/* ============================================================
   Drumbug Game Mode — Design System (2026 overhaul)
   ------------------------------------------------------------
   One cohesive visual language for the game shell:
   deep "stage" gradient, warm amber accents (stage lights),
   crisp cards with layered depth, and a consistent 8px rhythm.

   Loaded AFTER game.css; it re-skins the same class names so the
   DOM (and every test) keeps working.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
#gameShell {
  --g-bg-0: #07090f;          /* deepest background */
  --g-bg-1: #0b1120;          /* stage floor */
  --g-bg-2: #111a2e;          /* raised surface */
  --g-surface: rgba(255, 255, 255, .045);
  --g-surface-2: rgba(255, 255, 255, .07);
  --g-border: rgba(148, 176, 255, .16);
  --g-border-strong: rgba(148, 176, 255, .32);
  --g-text: #eef4ff;
  --g-text-dim: #a8b8d8;
  --g-text-faint: #64769c;
  /* accent ramp — warm amber core with cyan assist (stage lights) */
  --g-amber: #ffb43a;
  --g-amber-soft: #ffd28a;
  --g-amber-glow: rgba(255, 180, 58, .35);
  --g-cyan: #53d6e8;
  --g-cyan-glow: rgba(83, 214, 232, .3);
  --g-green: #55e08c;
  --g-green-glow: rgba(85, 224, 140, .3);
  --g-pink: #ff6fa5;
  --g-red: #ff5964;
  --g-nav: #ffc93c;           /* drum-nav cursor (amber ring) */
  --g-radius: 16px;
  --g-radius-lg: 22px;
  --g-shadow-card: 0 18px 50px -12px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --g-shadow-pop: 0 28px 70px -20px rgba(0, 0, 0, .7);
  --g-font: "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --g-font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

/* ---------- 2. Backdrop ---------- */
#gameShell {
  color: var(--g-text);
  font-family: var(--g-font);
  background:
    radial-gradient(1100px 520px at 50% -8%, #1b2c55 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 108%, rgba(83, 214, 232, .12), transparent 55%),
    radial-gradient(700px 500px at 8% 100%, rgba(255, 111, 165, .09), transparent 50%),
    linear-gradient(180deg, var(--g-bg-1) 0%, var(--g-bg-0) 70%);
}
/* stage: slow ambient sweep + faint grid, both GPU-cheap */
#gameShell .game-bg {
  background-image:
    radial-gradient(900px 400px at 50% 120%, rgba(255, 180, 58, .07), transparent 60%),
    linear-gradient(rgba(148, 176, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 176, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  animation: gameGrid 26s linear infinite;
}
#gameShell .game-bg::after {
  background:
    radial-gradient(650px 320px at 50% 115%, rgba(255, 180, 58, .16), transparent 65%);
}

/* ---------- 3. Typography ---------- */
#gameShell .game-title {
  font-family: var(--g-font-display);
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  text-shadow: none;
  background: linear-gradient(180deg, #fff 20%, #9db6e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#gameShell .game-sub {
  color: var(--g-text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
#gameShell .game-sub b { color: var(--g-amber); font-weight: 700; }
#gameShell .game-maphead,
#gameShell .game-kitrow label {
  color: var(--g-text-faint);
  font-size: 11.5px;
  letter-spacing: .22em;
}

/* ---------- 4. Splash ---------- */
#gameShell .game-logo {
  font-family: var(--g-font-display);
  font-size: clamp(58px, 11vw, 100px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .95;
  filter: drop-shadow(0 8px 30px rgba(83, 214, 232, .25));
}
#gameShell .game-logo .gl {
  background: linear-gradient(180deg, #fff 10%, var(--g-cyan) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
#gameShell .game-logo .gl2 {
  background: linear-gradient(180deg, #ffe9c4 10%, var(--g-amber) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
#gameShell .game-tag {
  color: var(--g-text-dim);
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 14px 0 6px;
}
#gameShell .game-drums { font-size: 46px; letter-spacing: 16px; margin: 10px 0 26px; filter: drop-shadow(0 6px 18px rgba(255, 180, 58, .3)); }
#gameShell .game-connect {
  background: rgba(255, 180, 58, .1);
  color: var(--g-amber-soft);
  border-color: rgba(255, 180, 58, .4);
  padding: 10px 20px;
  font-size: 14px;
}
#gameShell .game-connect.on {
  background: rgba(85, 224, 140, .1);
  color: #a9f2c6;
  border-color: rgba(85, 224, 140, .45);
}
@keyframes connectPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,180,58,.22); } 50% { box-shadow: 0 0 0 12px rgba(255,180,58,0); } }

/* ---------- 5. Buttons ---------- */
#gameShell .game-btn {
  border-radius: 14px;
  letter-spacing: .02em;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s ease, background .16s ease, filter .16s ease;
}
#gameShell .game-btn.primary {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber) 55%, #f29c1a);
  box-shadow: 0 5px 0 #9a5c07, 0 16px 38px -8px var(--g-amber-glow);
}
#gameShell .game-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #9a5c07, 0 22px 52px -10px var(--g-amber-glow);
  filter: saturate(1.08);
}
#gameShell .game-btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #9a5c07; }
#gameShell .game-btn.primary:disabled { filter: grayscale(.9) brightness(.55); box-shadow: 0 5px 0 #1a2130; }
#gameShell .game-btn.big {
  animation: startGlow 2.4s ease-in-out infinite;
}
@keyframes startGlow {
  0%, 100% { box-shadow: 0 5px 0 #9a5c07, 0 0 26px rgba(255, 180, 58, .30); }
  50% { box-shadow: 0 5px 0 #9a5c07, 0 0 52px rgba(255, 180, 58, .65); }
}
#gameShell .game-btn.ghost {
  color: var(--g-text-dim);
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  backdrop-filter: blur(6px);
}
#gameShell .game-btn.ghost:hover { background: var(--g-surface-2); color: var(--g-text); border-color: var(--g-border-strong); }
#gameShell .game-btn.small { padding: 9px 18px; font-size: 13px; }

/* ---------- 6. Cards: fonts, kits, lessons ---------- */
#gameShell .game-fonts { gap: 14px; }
#gameShell .game-font {
  border-radius: var(--g-radius);
  border-width: 1.5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: var(--g-border);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,.5);
}
#gameShell .game-font:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 180, 58, .55);
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(255,180,58,.18);
}
#gameShell .game-font.sel {
  border-color: var(--g-amber);
  background:
    linear-gradient(180deg, rgba(255,180,58,.16), rgba(255,180,58,.05)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 0 0 2px rgba(255, 180, 58, .3), 0 16px 44px -14px rgba(255,180,58,.35);
}
#gameShell .game-font .gf-name { font-weight: 800; font-size: 15px; color: #fff; letter-spacing: .01em; }
#gameShell .game-font .gf-meta { color: var(--g-text-faint); font-size: 12px; margin-top: 4px; }
#gameShell .game-font .gf-prev {
  background: var(--g-surface-2);
  color: var(--g-amber-soft);
  border: 1px solid var(--g-border);
}
#gameShell .game-font .gf-prev:hover {
  background: rgba(255, 180, 58, .22);
  color: #fff;
  border-color: rgba(255, 180, 58, .6);
  transform: scale(1.08);
}
#gameShell .game-font.nav,
#gameShell .game-kit.nav,
#gameShell .game-lesson.nav,
#gameShell .coach-card.nav,
#gameShell .gs-row.nav,
#gameShell .gs-chip.nav {
  border-color: var(--g-nav) !important;
  box-shadow: 0 0 0 2px rgba(255, 201, 60, .45), 0 12px 34px -10px rgba(255, 201, 60, .35) !important;
}
#gameShell .game-kit {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .game-kit:hover { border-color: rgba(255, 180, 58, .6); color: var(--g-text); }
#gameShell .game-kit.sel {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  border-color: var(--g-amber);
  box-shadow: 0 0 18px -2px var(--g-amber-glow);
}

/* ---------- 7. Pad calibration ---------- */
#gameShell .game-pads-cols { gap: 18px; }
#gameShell .game-pad {
  border-radius: 999px;
  border-color: var(--g-border);
  background: var(--g-surface);
  padding: 7px 14px 7px 10px;
}
#gameShell .game-pad .gp-name { font-size: 12px; letter-spacing: .07em; color: var(--g-text-dim); }
#gameShell .game-pad .gp-glyph { color: var(--gp-c, #9fb8d8); }
#gameShell .game-pad.done {
  border-color: rgba(85, 224, 140, .55);
  background: linear-gradient(180deg, rgba(85,224,140,.14), rgba(85,224,140,.05));
  box-shadow: 0 0 20px -6px var(--g-green-glow);
}
#gameShell .game-pad.done .gp-name { color: #a9f2c6; }
/* glyphs keep their lane color when done — border + name carry the state
   (a green lane color must not be overridden by the same green) */
#gameShell .game-pad.done .gp-glyph { opacity: 1; }
@keyframes gp-flash {
  0% { border-color: var(--g-amber); box-shadow: 0 0 0 rgba(255,180,58,0); }
  50% { border-color: var(--g-amber); box-shadow: 0 0 24px rgba(255,180,58,.7); }
  100% { border-color: var(--g-amber); box-shadow: 0 0 0 rgba(255,180,58,0); }
}

/* ---------- 8. Drum-kit diagram ---------- */
#gameShell .game-kit-stage {
  background: radial-gradient(ellipse at 50% 120%, rgba(148,176,255,.1), transparent 60%);
}
#gameShell .dk-part.done .dk-body { stroke: var(--g-green); fill: rgba(85,224,140,.1); }
#gameShell .dk-part.done .dk-label { fill: #a9f2c6; }
#gameShell .dk-body {
  fill: rgba(148, 176, 255, .06);
  stroke: rgba(148, 176, 255, .35);
}
#gameShell .dk-detail { fill: rgba(148, 176, 255, .16); }
#gameShell .dk-label { fill: #7488ad; letter-spacing: .12em; }
/* The static re-skin above sits at ID specificity, which BEATS game.css's
   class-level `.dk-part.lit` flash rules — so inside the shell every lit part
   would render the static blue stroke instead of the lane color. Restate the
   flash at the same ID specificity (and the .done/.lit order within it) so
   the lane-color pulse wins everywhere the kit appears in game mode,
   including the intro card's mini-kit (the card is moved into the shell). */
#gameShell .dk-part.lit .dk-body {
  stroke: var(--dk-c, var(--g-amber));
  fill: color-mix(in srgb, var(--dk-c, var(--g-amber)) 20%, transparent);
}
#gameShell .dk-part.lit .dk-detail { fill: color-mix(in srgb, var(--dk-c, var(--g-amber)) 55%, transparent); }
#gameShell .dk-part.lit .dk-label { fill: color-mix(in srgb, var(--dk-c, var(--g-amber)) 55%, #fff); }
/* mapped pads keep their green "done" tint while flashing */
#gameShell .dk-part.done.lit .dk-body {
  stroke: var(--dk-c, var(--g-amber));
  fill: color-mix(in srgb, var(--dk-c, var(--g-amber)) 22%, transparent);
}
/* e-kit hardware (rack, posts, rods, module, tower, cables) re-skinned at
   ID specificity so the design tokens win inside the shell */
#gameShell .dk-hw .dk-post,
#gameShell .dk-hw .dk-hw-line { stroke: rgba(148,176,255,.20); }
/* unscoped on purpose: pedal/beater stems live INSIDE .dk-part groups, not
   under .dk-hw — they must pick up the same dim hardware tone */
#gameShell .dk-rod,
#gameShell .dk-arm { stroke: rgba(148,176,255,.15); }
#gameShell .dk-hw .dk-module { fill: rgba(148,176,255,.04); stroke: rgba(148,176,255,.22); }
#gameShell .dk-hw .dk-hw-detail { fill: rgba(148,176,255,.14); }
#gameShell .dk-hw .dk-cable { stroke: rgba(148,176,255,.18); }

/* ---------- 9. Assess screen ---------- */
#gameShell .game-hero-grade {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px var(--g-amber-glow);
}
#gameShell .game-assess-live {
  background: linear-gradient(180deg, #9df2b8, var(--g-green));
  color: #062812;
}
#gameShell .game-assess-done {
  background: linear-gradient(180deg, #b7ecf5, var(--g-cyan));
  color: #062730;
}
#gameShell .game-assess-stats .game-chip {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
/* technique-marker chips — same shape as the stat chips, but the dot carries
 * the skill's taxonomy color and lights up when the groove showed it */
#gameShell .gm-marker {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .gm-marker.on {
  color: var(--g-text, #e8eef7);
  border-color: color-mix(in srgb, var(--mk) 55%, transparent);
  background: color-mix(in srgb, var(--mk) 14%, transparent);
}
#gameShell .game-chip {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .game-chip.fire {
  background: rgba(255, 145, 60, .1);
  border-color: rgba(255, 145, 60, .45);
  color: #ffb27e;
}
#gameShell .game-chip.gs-gear:hover {
  border-color: rgba(255, 180, 58, .6);
  color: #fff;
  background: rgba(255, 180, 58, .12);
}

/* ---------- 10. Coach + styles ---------- */
#gameShell .coach-card {
  border-radius: var(--g-radius);
  background: var(--g-surface);
  border: 1.5px solid var(--g-border);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, background .18s, box-shadow .18s;
}
#gameShell .coach-card:hover { transform: translateY(-3px); background: var(--g-surface-2); }
#gameShell .coach-card.sel {
  border-color: var(--cc, #f472b6);
  background: color-mix(in srgb, var(--cc, #f472b6) 15%, rgba(255,255,255,.03));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, #f472b6) 26%, transparent), 0 18px 44px -16px var(--cc, #f472b6);
}
#gameShell .cc-ava { font-size: 40px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
#gameShell .cc-name { font-weight: 800; font-size: 15px; }
#gameShell .cc-vibe { color: var(--g-text-faint); font-size: 11px; }
#gameShell .game-styles .style-chip {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .game-styles .style-chip:hover { color: var(--g-text); border-color: var(--g-border-strong); transform: translateY(-1px); }
#gameShell .game-styles .style-chip.sel {
  color: #fff;
  border-color: var(--sc, #38bdf8);
  background: color-mix(in srgb, var(--sc, #38bdf8) 18%, rgba(255,255,255,.03));
  box-shadow: 0 8px 22px -8px var(--sc, #38bdf8);
}

/* ---------- 10b. Lesson grid ---------- */
#gameShell .game-lesson {
  border-radius: var(--g-radius);
  border-color: var(--g-border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 10px 12px;
  box-shadow: 0 4px 16px -10px rgba(0,0,0,.6);
}
#gameShell .game-lesson:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 180, 58, .5);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,180,58,.15);
}
#gameShell .game-lesson.sel {
  border-color: var(--g-pink);
  background:
    linear-gradient(180deg, rgba(255,111,165,.13), rgba(255,111,165,.04)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 0 0 2px rgba(255, 111, 165, .3), 0 16px 40px -14px rgba(255,111,165,.4);
}
#gameShell .game-lesson .gl-title { font-weight: 800; font-size: 12.5px; line-height: 1.3; color: #fff; }
#gameShell .game-lesson .gl-meta { color: var(--g-cyan); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
#gameShell .game-lesson .gl-stars { color: var(--g-amber); }
#gameShell .game-lesson .gl-stars .off { opacity: .22; }
#gameShell .game-lesson .gl-pos {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  border: none;
  font-weight: 900;
  box-shadow: 0 4px 12px -4px var(--g-amber-glow);
}
#gameShell .game-lesson.tab .gl-stars { color: var(--g-cyan); }
#gameShell .game-lesson.locked { opacity: .45; }
#gameShell .game-lesson.locked:hover { transform: none; box-shadow: 0 4px 16px -10px rgba(0,0,0,.6); border-color: var(--g-border); }

/* ---------- 11. Grade map ---------- */
#gameShell .game-grade {
  border-radius: 12px;
  border-color: var(--g-border);
  background: var(--g-surface);
  color: var(--g-text-dim);
}
#gameShell .game-grade:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 180, 58, .55);
  color: #fff;
}
#gameShell .game-grade.sel {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  border-color: var(--g-amber);
  box-shadow: 0 8px 22px -6px var(--g-amber-glow);
}
#gameShell .game-grade .gg-dot { color: var(--g-amber); }

/* ---------- 12. Hero card ---------- */
#gameShell .game-hero {
  border-radius: var(--g-radius-lg);
  padding: 12px 18px;
  border: 1px solid rgba(255, 180, 58, .35);
  background:
    linear-gradient(135deg, rgba(255,180,58,.10), rgba(255,111,165,.07) 55%, rgba(83,214,232,.08)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--g-shadow-card), inset 0 1px 0 rgba(255,255,255,.09);
  overflow: hidden;
}
/* stage-light sweep across the hero on entry */
#gameShell .game-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: heroSweep 5s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes heroSweep {
  0%, 55% { transform: translateX(-80%); }
  100% { transform: translateX(80%); }
}
#gameShell .game-hero h2 {
  font-family: var(--g-font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
#gameShell .game-hero p { color: var(--g-text-dim); font-size: 12px; line-height: 1.4; }

/* ---------- 13. Stats strip / profile ask ---------- */
#gameShell .game-stats {
  border-radius: var(--g-radius);
  border-color: var(--g-border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
#gameShell .game-user:hover .game-avatar { filter: brightness(1.2); }
#gameShell .game-lv b { color: var(--g-amber); }
#gameShell .game-xpbar { background: rgba(255,255,255,.09); }
#gameShell .game-xpbar i { background: linear-gradient(90deg, var(--g-cyan), var(--g-pink)); }
#gameShell .game-ask {
  border-radius: 14px;
  background: rgba(255,180,58,.09);
  border-color: rgba(255,180,58,.4);
}
#gameShell .game-ask span { color: var(--g-amber-soft); }
#gameShell .game-ask input {
  background: rgba(4, 8, 18, .6);
  border-color: var(--g-border-strong);
  border-radius: 10px;
}
#gameShell .game-ask input:focus { border-color: var(--g-amber); box-shadow: 0 0 0 3px rgba(255, 180, 58, .25); }

/* ---------- 14. Settings rows ---------- */
#gameShell .gs-row {
  border-radius: 14px;
  border-color: var(--g-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#gameShell .gs-row:hover { border-color: rgba(255, 180, 58, .5); transform: translateY(-1px); }
#gameShell .gs-row .gs-label { font-weight: 700; font-size: 14.5px; }
#gameShell .gs-row .gs-desc { color: var(--g-text-faint); }
#gameShell .gs-row .gs-val { color: var(--g-cyan); }
#gameShell .gs-row .gs-go { color: var(--g-text-faint); }
#gameShell .gs-row.sel {
  border-color: var(--g-cyan);
  background: linear-gradient(180deg, rgba(83,214,232,.14), rgba(83,214,232,.04));
  box-shadow: 0 0 0 2px rgba(83, 214, 232, .25);
}
#gameShell .gs-row.rec {
  border-color: var(--g-nav);
  box-shadow: 0 0 0 2px rgba(255, 201, 60, .45);
  animation: gsRecPulse 1.1s ease-in-out infinite;
}
@keyframes gsRecPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,201,60,.35); }
  50% { box-shadow: 0 0 0 2px rgba(255,201,60,.8), 0 0 26px rgba(255,201,60,.45); }
}
#gameShell .gs-row.confirm { border-color: var(--g-red); box-shadow: 0 0 0 2px rgba(255, 89, 100, .45); }
#gameShell .gs-row.confirm .gs-label { color: #ffb3b8; }
#gameShell .gs-pill.on { background: rgba(85,224,140,.14); color: #a9f2c6; border-color: rgba(85,224,140,.45); }
#gameShell .gs-pill.off { background: rgba(148,163,184,.1); color: #8b9bb5; border-color: rgba(148,163,184,.3); }
#gameShell .gs-chip {
  border-radius: 999px;
  border-color: var(--g-border);
  background: var(--g-surface);
  color: var(--g-text-dim);
}
#gameShell .gs-chip:hover { border-color: rgba(255,180,58,.55); color: var(--g-text); }
#gameShell .gs-chip.sel {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  border-color: var(--g-amber);
  box-shadow: 0 6px 18px -6px var(--g-amber-glow);
}
#gameShell .gs-input {
  background: rgba(4, 8, 18, .6);
  border-color: var(--g-border-strong);
  border-radius: 11px;
}
#gameShell .gs-input:focus { border-color: var(--g-amber); box-shadow: 0 0 0 2px rgba(255, 180, 58, .3); }
#gameShell .gs-stats {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(83,214,232,.09), rgba(83,214,232,.03));
  border-color: rgba(83, 214, 232, .22);
}
#gameShell .gs-panel { border-radius: 14px; background: var(--g-surface); border-color: var(--g-border); color: var(--g-text-dim); }
#gameShell .gs-panel .good { color: #a9f2c6; }

/* ---------- 15. Crumbs ---------- */
#gameShell .game-crumbs {
  background: rgba(10, 14, 26, .55);
  border-color: var(--g-border);
  backdrop-filter: blur(10px);
}
#gameShell .gc-step { color: var(--g-text-faint); font-weight: 800; letter-spacing: .07em; }
#gameShell .gc-step.done { color: var(--g-text-dim); }
#gameShell .gc-step.done:hover { color: #fff; background: rgba(255,255,255,.08); }
#gameShell .gc-step.cur {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  box-shadow: 0 4px 14px -4px var(--g-amber-glow);
}
#gameShell .gc-sep { color: #3b4a68; }

/* ---------- 16. Advanced pill ---------- */
#gameShell #gameAdvanced {
  background: rgba(255, 255, 255, .05);
  color: var(--g-text-dim);
  border-color: var(--g-border);
  backdrop-filter: blur(8px);
}
#gameShell #gameAdvanced:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: var(--g-border-strong);
  box-shadow: none;
}

/* ---------- 17. Hints (drum-nav legend) ---------- */
#gameShell .game-hint {
  color: var(--g-text-faint);
  font-size: 12.5px;
  line-height: 1.6;
}
/* the reusable drum-legend — three chips that always match the current
   screen's gestures. Fixed to the shell's bottom edge like a game HUD: it
   stays visible on every screen, at any viewport height, without taking
   layout space (screens taller than the viewport scroll freely above it). */
.gm-legend {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(10, 14, 26, .62);
  border: 1px solid var(--g-border);
  backdrop-filter: blur(10px);
  max-width: min(92vw, 760px);
  pointer-events: none;   /* display-only: never eats a click aimed at a card */
}
.gm-legend .gm-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--g-border);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
/* glyph colors come from each drum's own lane color (inline --gp-c) — the
   same language as the note highway and the pad chips, no per-key tinting */
.gm-legend .gp-glyph { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gp-c, #9fb8d8); }
.gm-legend .gp-glyph circle, .gm-legend .gp-glyph ellipse, .gm-legend .gp-glyph rect {
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
/* the Crash + Ride pair sits tight together */
.gm-legend .gm-k-back .gp-glyph + .gp-glyph { margin-left: -3px; }

/* ---------- 18. Play screen header ---------- */
#gameShell .game-play-head {
  background: linear-gradient(180deg, rgba(10, 14, 26, .72), rgba(10, 14, 26, .45));
  border-bottom-color: var(--g-border);
  backdrop-filter: blur(10px);
}
#gameShell .gp-title {
  font-family: var(--g-font-display);
  text-shadow: none;
  letter-spacing: 0;
}
#gameShell .gp-xp {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  border: none;
  box-shadow: 0 6px 16px -6px var(--g-amber-glow);
}
#gameShell #playbar {
  background: linear-gradient(180deg, rgba(10,14,26,.6), rgba(10,14,26,.42));
  border-bottom-color: var(--g-border);
}
#gameShell #playBtn {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber) 60%, #f29c1a);
  box-shadow: 0 4px 0 #9a5c07, 0 10px 24px -8px var(--g-amber-glow);
}
#gameShell #playBtn:hover { transform: translateY(-1px); }
#gameShell #restartBtn { background: var(--g-surface); border: 1px solid var(--g-border); color: var(--g-text-dim); }
#gameShell #restartBtn:hover { background: var(--g-surface-2); color: #fff; }
#gameShell .progress { background: rgba(255,255,255,.08); }
#gameShell .progress #progressFill { background: linear-gradient(90deg, var(--g-cyan), var(--g-amber)); }
#gameShell #timeLabel { color: var(--g-text-faint); }
#gameShell .combo { color: var(--g-amber); text-shadow: 0 0 22px rgba(255, 180, 58, .45); }
#gameShell .acc { color: #a9f2c6; }
#gameShell .stars { color: var(--g-cyan); }
#gameShell .score-box .muted { color: var(--g-text-faint); }
#gameShell #overviewWrap { background: rgba(10,14,26,.5); border-bottom-color: var(--g-border); }
#gameShell #gameWrap { background: rgba(3, 6, 14, .55); }
#gameShell #sidepanel { background: rgba(10,14,26,.5); border-left-color: var(--g-border); }
#gameShell #sidepanel h3 { color: var(--g-text-faint); }
#gameShell .steps li { border-radius: 11px; border-color: transparent; background: var(--g-surface); border: 1px solid var(--g-border); }
#gameShell .steps li.current { border-color: rgba(255,180,58,.55); background: rgba(255,180,58,.1); box-shadow: 0 0 18px -6px rgba(255,180,58,.5); }
#gameShell .switch { background: var(--g-surface); border-color: var(--g-border); color: var(--g-text-dim); }
#gameShell .switch input { accent-color: var(--g-amber); }
#gameShell #speedSelect,
#gameShell #bpmSelect {
  background: var(--g-surface);
  border-color: var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .game-tailor {
  border-radius: var(--g-radius);
  border-color: rgba(255, 180, 58, .3);
  background: linear-gradient(180deg, rgba(255,180,58,.09), rgba(255,180,58,.03));
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.8);
}
#gameShell .game-tailor .gt-head { color: var(--g-amber); }
#gameShell .game-tailor .gt-summary { color: #fff; }
#gameShell .game-tailor .gt-meta { color: var(--g-text-dim); }
#gameShell .game-tailor .gt-status { color: #ffe0ad; }
#gameShell .game-tailor .gt-line { color: var(--g-text-dim); }
#gameShell .game-tailor .gt-line b { color: #fff; }

/* ---------- 19. Result + intro cards (game restyle) ---------- */
#gameShell .result-card,
#gameShell #introOverlay.game .dialog.intro {
  border-radius: var(--g-radius-lg);
  background: linear-gradient(180deg, #16223c, #0d1526);
  border: 1px solid rgba(255, 180, 58, .4);
  box-shadow: var(--g-shadow-pop), inset 0 1px 0 rgba(255,255,255,.08);
}
#gameShell .result-title,
#gameShell #introOverlay.game .dialog.intro h2#introTitle {
  background: linear-gradient(90deg, #ffd98d, var(--g-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 3px;
}
#gameShell .result-score,
#gameShell .result-card.platinum .result-score { color: var(--g-amber); text-shadow: 0 0 34px rgba(255, 180, 58, .55); }
#gameShell .result-card.platinum .result-score { color: #e8f6ff; text-shadow: 0 0 40px rgba(160, 220, 255, .95); }
#gameShell .result-best { color: #a9f2c6; }
#gameShell .result-stars .rstar.on { color: var(--g-amber); text-shadow: 0 0 26px rgba(255, 180, 58, .8); }
#gameShell .result-actions .btn.primary {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  border: none;
  box-shadow: 0 4px 0 #9a5c07, 0 10px 24px -8px var(--g-amber-glow);
}
#gameShell .result-actions .btn {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  color: var(--g-text-dim);
}
#gameShell .result-actions .btn:hover { border-color: var(--g-border-strong); color: #fff; }
#gameShell .result-actions .btn.focused {
  border-color: var(--g-nav);
  box-shadow: 0 0 0 2px rgba(255, 201, 60, .55), 0 0 20px rgba(255, 201, 60, .45);
}
#gameShell .result-xp { border-color: rgba(255, 180, 58, .3); background: rgba(255, 180, 58, .07); }
#gameShell .rxp-total { color: var(--g-amber); }
#gameShell .rxp-bar i { background: linear-gradient(90deg, var(--g-amber), var(--g-cyan)); }
#gameShell .rxp-up { color: #a9f2c6; text-shadow: 0 0 18px rgba(85, 224, 140, .5); }
#gameShell .rxp-streak { color: #ffb27e; }
#gameShell .result-coach-line { color: #c4b5fd; }
#gameShell #introOverlay.game .dialog-actions .btn.primary {
  color: #241300;
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  border: none;
  box-shadow: 0 4px 0 #9a5c07, 0 10px 24px -8px var(--g-amber-glow);
}
#gameShell #introOverlay.game .dialog-actions .btn.mini {
  background: var(--g-surface);
  border: 1px solid var(--g-border-strong);
  color: var(--g-text-dim);
}
#gameShell #introOverlay.game .intro-blurb { color: #d7e2f7; }
#gameShell #introOverlay.game .intro-badge {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  border: none;
}
#gameShell #introOverlay.game .intro-chip { background: rgba(255,255,255,.05); border-color: var(--g-border); color: var(--g-text-dim); }
#gameShell #introOverlay.game .intro-song { background: var(--g-surface); border-color: var(--g-border); }
#gameShell #introOverlay.game .intro-song:hover { border-color: rgba(255, 180, 58, .5); box-shadow: 0 10px 26px -12px rgba(0,0,0,.7); }
#gameShell #introOverlay.game .intro-song .is-play {
  background: linear-gradient(135deg, var(--g-amber), #ffd98d);
  color: #241300;
}

/* ---------- 20. Scrollbars ---------- */
#gameShell .game-stage::-webkit-scrollbar { width: 11px; }
#gameShell .game-stage::-webkit-scrollbar-thumb {
  background: rgba(255, 201, 60, .22);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#gameShell .game-stage::-webkit-scrollbar-thumb:hover { background: rgba(255, 201, 60, .4); background-clip: padding-box; }
#gameShell .game-stage::-webkit-scrollbar-track { background: transparent; }

/* ---------- 21. Screen entry animation ---------- */
#gameShell .game-screen {
  animation: screenIn .42s cubic-bezier(.16, .84, .28, 1);
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- 22. Mode toggle ---------- */
#gameShell .game-mode {
  border-radius: 999px;
  border: 1.5px solid var(--g-border);
  background: var(--g-surface);
  color: var(--g-text-dim);
}
#gameShell .game-mode:hover { border-color: var(--g-border-strong); color: #fff; }
#gameShell .game-mode.sel {
  background: linear-gradient(180deg, #ffd98d, var(--g-amber));
  color: #241300;
  border-color: var(--g-amber);
  box-shadow: 0 8px 22px -8px var(--g-amber-glow);
}

/* leave breathing room so the fixed HUD legend never overlaps the last row */
#gameShell .game-stage { padding-bottom: 84px; }
#gameShell.playing .game-stage { padding-bottom: 0; }   /* play screen: no HUD */

/* ---------- 23. Small screens ---------- */
@media (max-width: 640px) {
  .gm-legend { gap: 6px; padding: 6px 10px; bottom: 10px; }
  .gm-legend .gm-key { font-size: 11px; padding: 5px 10px; }
}

/* ---------- 24. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  #gameShell .game-bg,
  #gameShell .game-logo,
  #gameShell .game-drums span,
  #gameShell .game-connect,
  #gameShell .game-btn.big,
  #gameShell .game-hero::before {
    animation: none !important;
  }
  #gameShell .game-hero::before { content: none; }
}

/* ---------- 25. Splash drum-kit silhouette ---------- */
/* a crisp inline SVG kit replaces the three floating drum emojis — it ties the
   splash to the calibration diagram language (same dk-* stroke style) */
#gameShell .gm-splash-kit {
  display: block;
  width: min(430px, 76vw, 46vh);   /* clamps on short viewports too */
  /* same specificity as #gameShell .game-drums but later in the cascade —
     centers the SVG without an !important arm-wrestle */
  margin: 8px auto 4px;
  filter: drop-shadow(0 18px 44px rgba(83, 214, 232, .18));
}
.gm-splash-kit .dk-body {
  fill: rgba(148, 176, 255, .05);
  stroke: rgba(148, 176, 255, .45);
  stroke-width: 2.5;
}
.gm-splash-kit .dk-detail { fill: rgba(255, 180, 58, .5); }
.gm-splash-kit .dk-floor { stroke: rgba(148, 176, 255, .25); }
/* glow pulse runs on the sk-part wrapper groups (the decorative splash copy
   uses sk-part, so it never collides with the calibration stage's dk-part
   contract that tests + lighting rely on) */
.gm-splash-kit .sk-part { animation: splashPartGlow 3.2s ease-in-out infinite; }
/* the hardware <g> is nth-of-type(1), so the 9 parts are slots 2..10 —
   re-slotted so every part gets its own glow slot again */
.gm-splash-kit .sk-part:nth-of-type(2) { animation-delay: 0s; }
.gm-splash-kit .sk-part:nth-of-type(3) { animation-delay: .36s; }
.gm-splash-kit .sk-part:nth-of-type(4) { animation-delay: .72s; }
.gm-splash-kit .sk-part:nth-of-type(5) { animation-delay: 1.08s; }
.gm-splash-kit .sk-part:nth-of-type(6) { animation-delay: 1.44s; }
.gm-splash-kit .sk-part:nth-of-type(7) { animation-delay: 1.8s; }
.gm-splash-kit .sk-part:nth-of-type(8) { animation-delay: 2.16s; }
.gm-splash-kit .sk-part:nth-of-type(9) { animation-delay: 2.52s; }
.gm-splash-kit .sk-part:nth-of-type(10) { animation-delay: 2.88s; }
@keyframes splashPartGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 180, 58, 0)); }
  40% { filter: drop-shadow(0 0 14px rgba(255, 180, 58, .55)); }
  60% { filter: drop-shadow(0 0 8px rgba(255, 180, 58, .25)); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-splash-kit .sk-part { animation: none !important; }
}