/* ============================================
   THEMES (Settings → Visuals → Theme)
   Each theme overrides the design tokens; Midnight is the :root default.
   ============================================ */

body[data-theme="ocean"] {
  --stage-atmosphere-opacity: 0.34;
  --stage-horizon-opacity: 0.3;
  --color-primary: #2dd4bf;
  --color-primary-dark: #14b8a6;
  --color-primary-glow: rgba(45, 212, 191, 0.3);
  --color-accent-2: #38bdf8;
  --color-bg: #05131c;
  --color-bg-gradient:
    radial-gradient(ellipse at 50% 115%, rgba(45, 212, 191, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 18%, rgba(56, 189, 248, 0.08) 0%, transparent 34%),
    linear-gradient(145deg, #041019 0%, #092235 54%, #041019 100%);
  --color-surface: #0c2231;
  --color-surface-elevated: #123245;
  --color-surface-hover: #1a4258;
  --border-accent: rgba(45, 212, 191, 0.3);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="ocean"]::before {
  opacity: calc(var(--stage-atmosphere-opacity) + var(--stage-atmosphere-pulse));
  background-image:
    radial-gradient(ellipse at 22% 26%,
      color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
      transparent 34%),
    radial-gradient(ellipse at 76% 68%,
      color-mix(in srgb, var(--color-accent-2) 14%, transparent) 0%,
      transparent 38%),
    repeating-radial-gradient(ellipse at 50% 116%,
      transparent 0 54px,
      color-mix(in srgb, var(--color-primary) 9%, transparent) 55px 56px,
      transparent 57px 124px),
    repeating-linear-gradient(112deg,
      transparent 0 68px,
      color-mix(in srgb, var(--color-accent-2) 9%, transparent) 69px 70px,
      transparent 71px 142px);
  background-position:
    0% 42%,
    100% 58%,
    0 0,
    0 0;
  background-size:
    150% 130%,
    170% 150%,
    100% 100%,
    260px 260px;
  transform-origin: 50% 52%;
  animation: ocean-caustics-drift 32s ease-in-out infinite alternate;
}

body[data-theme="ocean"] #game-container::before {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  opacity: calc(0.2 + var(--stage-atmosphere-pulse));
  background-image:
    repeating-radial-gradient(ellipse at 50% 118%,
      transparent 0 78px,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 79px 80px,
      transparent 81px 168px),
    repeating-linear-gradient(104deg,
      transparent 0 118px,
      color-mix(in srgb, var(--color-accent-2) 8%, transparent) 119px 121px,
      transparent 122px 236px),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-primary) 5%, transparent) 48%,
      transparent 100%);
  background-size:
    100% 100%,
    320px 320px,
    100% 100%;
  transform-origin: 50% 62%;
  animation: ocean-current-sheet 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

body[data-theme="ocean"]::after {
  left: -18vw;
  right: -18vw;
  bottom: -12vh;
  height: 58vh;
  opacity: calc(var(--stage-horizon-opacity) + var(--stage-horizon-pulse));
  background-image:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-accent-2) 11%, transparent) 42%,
      color-mix(in srgb, var(--color-primary) 15%, transparent) 62%,
      transparent 86%),
    repeating-radial-gradient(ellipse at 50% 118%,
      transparent 0 52px,
      color-mix(in srgb, var(--color-primary) 13%, transparent) 53px 54px,
      transparent 55px 128px);
  background-size:
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 100%;
  transform-origin: 50% 100%;
  animation: ocean-swell 13s ease-in-out infinite alternate;
}

@keyframes ocean-caustics-drift {
  0% {
    transform: translate3d(calc(-1.2vw - var(--stage-caustic-shift)), -0.4vh, 0) rotate(-0.4deg) scale(var(--stage-caustic-scale-low));
  }

  50% {
    transform: translate3d(0.2vw, calc(0.7vh + var(--stage-caustic-lift)), 0) rotate(0.35deg) scale(var(--stage-caustic-scale-mid));
  }

  100% {
    transform: translate3d(calc(1.2vw + var(--stage-caustic-shift)), -0.2vh, 0) rotate(-0.2deg) scale(var(--stage-caustic-scale-high));
  }
}

@keyframes ocean-current-sheet {
  0% {
    transform: translate3d(calc(-1.8vw - var(--stage-caustic-shift)), calc(0.4vh + var(--stage-caustic-lift)), 0) rotate(-0.8deg) scale(var(--stage-caustic-scale-low));
  }

  50% {
    transform: translate3d(0.6vw, -0.8vh, 0) rotate(0.45deg) scale(var(--stage-caustic-scale-mid));
  }

  100% {
    transform: translate3d(calc(1.8vw + var(--stage-caustic-shift)), calc(-0.4vh + var(--stage-caustic-lift)), 0) rotate(-0.35deg) scale(var(--stage-caustic-scale-high));
  }
}

@keyframes ocean-swell {
  0% {
    transform: translate3d(calc(-2.4vw - var(--stage-wave-shift)), 0, 0) skewX(-3deg) scaleY(var(--stage-wave-scale-low));
  }

  100% {
    transform: translate3d(calc(2.4vw + var(--stage-wave-shift)), calc(-1.3vh + var(--stage-wave-lift)), 0) skewX(3deg) scaleY(var(--stage-wave-scale-high));
  }
}

body[data-theme="sunset"] {
  --color-primary: #ff9e64;
  --color-primary-dark: #f97316;
  --color-primary-glow: rgba(255, 158, 100, 0.3);
  --color-accent-2: #f472b6;
  --color-bg: #1a0f1e;
  --color-bg-gradient: linear-gradient(145deg, #1a0f1e 0%, #2b1430 50%, #1a0f1e 100%);
  --color-surface: #261327;
  --color-surface-elevated: #341a35;
  --color-surface-hover: #452345;
  --border-accent: rgba(255, 158, 100, 0.35);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="forest"] {
  --color-primary: #4ade80;
  --color-primary-dark: #16a34a;
  --color-primary-glow: rgba(74, 222, 128, 0.3);
  --color-accent-2: #a3e635;
  --color-bg: #0a140d;
  --color-bg-gradient: linear-gradient(145deg, #0a140d 0%, #12241a 50%, #0a140d 100%);
  --color-surface: #12241a;
  --color-surface-elevated: #1a3324;
  --color-surface-hover: #234431;
  --border-accent: rgba(74, 222, 128, 0.3);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="signal"] {
  --color-primary: #f9b73f;
  --color-primary-dark: #b77610;
  --color-primary-glow: rgba(249, 183, 63, 0.3);
  --color-accent-2: #4ac9ec;
  --color-bg: #03080f;
  --color-bg-gradient: linear-gradient(145deg, #03080f 0%, #0f1923 52%, #03080f 100%);
  --color-surface: #0f1923;
  --color-surface-elevated: #1d2a37;
  --color-surface-hover: #293949;
  --color-text: #eaeff5;
  --color-text-secondary: #a8b2be;
  --color-text-muted: #8794a1;
  --border-accent: rgba(249, 183, 63, 0.36);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="auroraglass"] {
  --color-primary: #65e0a5;
  --color-primary-dark: #009f7a;
  --color-primary-glow: rgba(101, 224, 165, 0.3);
  --color-accent-2: #b688fe;
  --color-bg: #060717;
  --color-bg-gradient: linear-gradient(145deg, #060717 0%, #15182f 52%, #060717 100%);
  --color-surface: #15182f;
  --color-surface-elevated: #242944;
  --color-surface-hover: #303653;
  --color-text: #e5f2ed;
  --color-text-secondary: #a4bab5;
  --color-text-muted: #8c92a2;
  --border-accent: rgba(101, 224, 165, 0.34);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="solar"] {
  --color-primary: #ffb330;
  --color-primary-dark: #d45e00;
  --color-primary-glow: rgba(255, 179, 48, 0.3);
  --color-accent-2: #5ad5a6;
  --color-bg: #1b0604;
  --color-bg-gradient: linear-gradient(145deg, #1b0604 0%, #35140f 52%, #1b0604 100%);
  --color-surface: #35140f;
  --color-surface-elevated: #4c221c;
  --color-surface-hover: #603026;
  --color-text: #f5ede4;
  --color-text-secondary: #c2b5a7;
  --color-text-muted: #a39188;
  --border-accent: rgba(255, 179, 48, 0.36);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-theme="contrast"] {
  --color-primary: #ffd60a;
  --color-primary-dark: #ccab00;
  --color-primary-glow: rgba(255, 214, 10, 0.35);
  --color-accent-2: #ffd60a; /* deliberately flat: no gradients in high contrast */
  --color-bg: #000000;
  --color-bg-gradient: linear-gradient(145deg, #000000 0%, #0a0a0a 50%, #000000 100%);
  --color-surface: #0d0d0d;
  --color-surface-elevated: #1a1a1a;
  --color-surface-hover: #2b2b2b;
  --color-text: #ffffff;
  --color-text-secondary: #d0d0d0;
  --color-text-muted: #9a9a9a;
  --border-subtle: rgba(255, 255, 255, 0.25);
  --border-default: rgba(255, 255, 255, 0.4);
  --border-accent: rgba(255, 214, 10, 0.6);
  --shadow-glow: 0 0 30px var(--color-primary-glow);
}

body[data-high-contrast="true"] {
  --color-bg: #000000;
  --color-bg-gradient: #000000;
  --color-surface: #090909;
  --color-surface-elevated: #171717;
  --color-text: #ffffff;
  --color-text-secondary: #f2f2f2;
  --color-text-muted: #d0d0d0;
}

body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] #playfield-shell,
body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] .icon-btn,
body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] #now-playing,
body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] .rail-card {
  border-color: var(--border-accent);
}

body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] #playfield-shell {
  outline-color: var(--border-accent);
}

body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] #stats,
body[data-high-contrast="true"] #game-ui[data-chrome="quiet"] #word-input:not(.correct):not(.wrong) {
  background: var(--color-surface);
  border-color: var(--border-default);
}

body[data-high-contrast="true"] .settings-section-link.active,
body[data-high-contrast="true"] .final-stat.is-headline {
  border-color: var(--color-primary);
}