/* Fox vs Fox night ramp. Loads after /theme.css and overrides the same names.
   A farmhouse after dark: plum shadows, lamplight orange, hay gold. The white fox and
   the black fox carry their own coats in the art, so the UI stays warm and dim. */
:root {
  --bg: #14101C;
  --ink: #F1EAE0;
  --ink-bright: #FFFFFF;
  --muted: #9A9083;
  --green-deep: #8A3F14;
  --green: #C4652A;
  --green-bright: #F0A868;
  --amber: #E3B341;
  --amber-mid: #A67C1E;
  --amber-deep: #5C4310;
  --red: #FF6B57;
  --key: #4E4458;
  --key-miss: #221C2C;
  --tile-correct: var(--green);
  --tile-correct-ink: #ffffff;
  --tile-present: var(--amber);
  --tile-present-ink: #1a1000;
  --tile-absent: #221C2C;
  --key-ink: #ffffff;
  --key-miss-ink: #9A9083;
  --plank: #2A2136;
  --plank-edge: #3B2F4A;
  --lamp: rgba(224, 120, 42, 0.22);
}

/* The shared card ring, tab, and header rule are painted in /theme.css with
   Battordle's greens. Repaint them here in lamplight and plum. */
.frame,
.game-btn {
  background-color: #150F1E;
  background-image:
    radial-gradient(circle, rgba(224, 120, 42, 0.22) var(--dot), transparent var(--dot-edge)),
    radial-gradient(ellipse at 50% -10%, rgba(224, 120, 42, 0.16), transparent 42%),
    radial-gradient(ellipse at 50% 120%, rgba(10, 5, 30, 0.8), transparent 58%);
  background-size: 4px 4px, 100% 100%, 100% 100%;
  box-shadow: 5px 5px 0 #5C4310;
}

.frame::before,
.game-btn::before {
  background: linear-gradient(
    135deg,
    #ffffff 0 8%,
    #f7dcc4 8% 20%,
    #f0a868 20% 38%,
    #c4652a 38% 58%,
    #8a3f14 58% 78%,
    #3d1b08 78% 100%
  );
}

.frame::after,
.game-btn::after {
  background: linear-gradient(
    #ffffff 0 16.67%,
    #f7dcc4 16.67% 33.33%,
    #f0a868 33.33% 50%,
    #8a3f14 50% 66.67%,
    #e3b341 66.67% 83.33%,
    #5c4310 83.33% 100%
  );
}

.taper {
  background: linear-gradient(
      90deg,
      #ffffff 0 4%,
      #fbeee2 4% 8%,
      #f7dcc4 8% 12%,
      #f0a868 12% 16.5%,
      #c4652a 16.5% 21%,
      #a85220 21% 25%,
      #8a3f14 25% 29%,
      #3d1b08 29% 32.5%,
      #241004 32.5% 35.5%,
      #e3b341 35.5% 39.5%,
      #c99a2e 39.5% 42.5%,
      #a67c1e 42.5% 45.5%,
      #7f5e16 45.5% 48.5%,
      #5c4310 48.5% 51.5%,
      #3d1b08 51.5% 53.5%,
      #241004 53.5% 55%,
      #a67c1e 55% 56.3%,
      #8a3f14 56.3% 57.4%,
      #e3b341 57.4% 58.3%,
      #7f5e16 58.3% 59%,
      #2d1408 59% 59.6%,
      #3d2c0a 59.6% 60.1%,
      #2a1f08 60.1% 60.5%,
      transparent 60.5%
    )
    0 5px / 100% 3px no-repeat;
}

.taper::after {
  background: radial-gradient(circle, #c4652a 1.1px, transparent 1.6px) 0 0 / 12px 14px repeat-x;
}

:focus-visible { outline-color: var(--green-bright); }