/* Themes. Each block redefines the colours from :root in style.css (the classic theme), plus a few
 * decorations. A [data-theme] attribute also works on any element, which is how the 🎨 screen
 * shows a preview of each theme. Mascot, stickers and confetti live in js/themes.js. */

/* ---------- K-pop Demon Hunters: neon stage at night ---------- */
[data-theme=hunters] {
  color-scheme: dark;
  --bg: #160d33;
  --card: #251a4d;
  --ink: #fbf3ff;
  --muted: #b9a8e6;
  --line: #3f2f78;
  --brand: #ff3fa4;
  --brand-dark: #b8136f;
  --go: #19c98f;
  --go-dark: #5cf2c2;        /* "correct" text */
  --good-bg: #123f3c;
  --good-line: #19c98f;
  --bad: #ff4d6d;
  --bad-bg: #4a1537;
  --bad-line: #a3284f;
  --bad-ink: #ff9bb0;
  --bad-dark: #b3243f;
  --star: #ffd23f;
  --star-dark: #e0a400;
  --meh: #ffb44d;
  --purple: #9d5cff;
  --purple-dark: #6427d1;
  --disabled: #4a3f72;
  --off: #43357a;
  --track: #2e2163;
  --done-bg: #3a2a52;
  --done-line: #c9a227;
  --slot: #5a4a99;
  --hilite: #4b2a72;
  --soft: #362566;
  --soft-line: #6a4fc2;
  --shadow: 0 4px 0 rgba(0, 0, 0, .35);
  --trace-rule: #3f2f78;
  --trace-guide: #5b5580;    /* the "grey letter" */
  --trace-ink: #ff5cb5;
  background: var(--bg);
  color: var(--ink);
}

/* night sky with pink and blue stage lights */
html[data-theme=hunters] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 63, 164, .28), transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(62, 197, 255, .22), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(157, 92, 255, .30), transparent 50%),
    radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, #fff8, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff6, transparent),
    radial-gradient(1px 1px at 85% 80%, #fff6, transparent),
    var(--bg);
}
html[data-theme=hunters] body { background: transparent; }
/* Seoul at night under the glowing barrier (original art, img/hunters-skyline.svg; the URL comes
 * from index.php so it gets ?v=). Bigger on the start screens, faint during lessons. */
html[data-theme=hunters] body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(110px, 22vh, 240px);
  background: var(--art-hunters) center bottom / cover no-repeat;
  opacity: .5;
}
html[data-theme=hunters] body:has(.picker, .welcome)::after { height: max(150px, min(30vh, 55vw, 360px)); opacity: .9; }
html[data-theme=hunters] body:has(.player)::after { opacity: .25; }
[data-theme=hunters] h1 { text-shadow: 0 0 14px rgba(255, 63, 164, .65); }
[data-theme=hunters] .mascot { filter: drop-shadow(0 0 18px rgba(255, 63, 164, .7)); }
[data-theme=hunters] .u-head {
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #1a0b3a));
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .15);
}
[data-theme=hunters] .unit { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
[data-theme=hunters] .lesson-btn.next { box-shadow: 0 0 14px var(--c); }
[data-theme=hunters] .btn.go:not(:disabled) { box-shadow: 0 4px 0 #0c7a57, 0 0 18px rgba(25, 201, 143, .45); }
[data-theme=hunters] .mic-btn { box-shadow: 0 5px 0 var(--purple-dark), 0 0 22px rgba(157, 92, 255, .6); }
[data-theme=hunters] .sticker.got, [data-theme=hunters] .new-sticker { box-shadow: 0 0 16px color-mix(in srgb, var(--c, var(--star)) 60%, transparent); }
[data-theme=hunters] .p-top { background: transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-theme=hunters] .letter-big { color: #c9a2ff; }
[data-theme=hunters] .letter-big span { color: #ff7cc4; }
[data-theme=hunters] .link { color: #ff8fcc; }
[data-theme=hunters] .fam-code { color: #c9a2ff; }