/* Dino Escape ramp. Loads after /theme.css and overrides the same names.
   Obsidian ground, jungle green as the primary step, crystal violet as the accent, lava
   orange only for warnings and the geyser. Full art direction: dinoescape/ART.md. */
:root {
  --bg: #0B0E12;
  --ink: #E9EEE6;
  --ink-bright: #FFFFFF;
  --muted: #8B978F;
  --green-deep: #1F5A2E;
  --green: #2F8A45;
  --green-bright: #8CD98F;
  --amber: #9B6BE0;
  --amber-mid: #6B44A8;
  --amber-deep: #3B2464;
  --red: #FF6A3D;
  --key: #46504E;
  --key-miss: #1E2523;
  --tile-correct: var(--green);
  --tile-correct-ink: #ffffff;
  --tile-present: var(--amber);
  --tile-present-ink: #ffffff;
  --tile-absent: #1E2523;
  --key-ink: #ffffff;
  --key-miss-ink: #8B978F;
  --obsidian: #0B0E12;
  --lava: #FF6A3D;
  --lava-deep: #B23A1A;
  --crystal: #9B6BE0;
  --crystal-bright: #C9A9FF;
  --amber-gem: #E8A33C;
  --jungle: #2F8A45;
  --jungle-deep: #1F5A2E;
}

/* The shared card ring, tab, and header rule are painted in /theme.css with Battordle's
   greens. Repaint them here in jungle green and crystal violet. */
.frame,
.game-btn {
  background-color: #0C1113;
  background-image:
    radial-gradient(circle, rgba(47, 138, 69, 0.26) var(--dot), transparent var(--dot-edge)),
    radial-gradient(ellipse at 50% -10%, rgba(155, 107, 224, 0.14), transparent 42%),
    radial-gradient(ellipse at 50% 120%, rgba(5, 10, 20, 0.8), transparent 58%);
  background-size: 4px 4px, 100% 100%, 100% 100%;
  box-shadow: 5px 5px 0 #3B2464;
}

.frame::before,
.game-btn::before {
  background: linear-gradient(
    135deg,
    #ffffff 0 8%,
    #d9f0d6 8% 20%,
    #8cd98f 20% 38%,
    #2f8a45 38% 58%,
    #1f5a2e 58% 78%,
    #0e2a16 78% 100%
  );
}

.frame::after,
.game-btn::after {
  background: linear-gradient(
    #ffffff 0 16.67%,
    #d9f0d6 16.67% 33.33%,
    #8cd98f 33.33% 50%,
    #1f5a2e 50% 66.67%,
    #9b6be0 66.67% 83.33%,
    #3b2464 83.33% 100%
  );
}

.taper {
  background: linear-gradient(
      90deg,
      #ffffff 0 4%,
      #edf7eb 4% 8%,
      #d9f0d6 8% 12%,
      #8cd98f 12% 16.5%,
      #2f8a45 16.5% 21%,
      #27743a 21% 25%,
      #1f5a2e 25% 29%,
      #0e2a16 29% 32.5%,
      #08170c 32.5% 35.5%,
      #9b6be0 35.5% 39.5%,
      #8358c4 39.5% 42.5%,
      #6b44a8 42.5% 45.5%,
      #533486 45.5% 48.5%,
      #3b2464 48.5% 51.5%,
      #0e2a16 51.5% 53.5%,
      #08170c 53.5% 55%,
      #6b44a8 55% 56.3%,
      #1f5a2e 56.3% 57.4%,
      #9b6be0 57.4% 58.3%,
      #533486 58.3% 59%,
      #0e2a16 59% 59.6%,
      #221a30 59.6% 60.1%,
      #171122 60.1% 60.5%,
      transparent 60.5%
    )
    0 5px / 100% 3px no-repeat;
}

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

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