/* ============================================================
   Game Mode — beginner walkthrough shell (video-game aesthetic)
   Overlays the classic app; the classic layout stays underneath.
   ============================================================ */

#gameShell {
  position: fixed; inset: 0; z-index: 9000;
  color: #eaf6ff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  background: radial-gradient(1200px 700px at 50% -10%, #1c2b52 0%, #0d1428 55%, #070b18 100%);
}

/* animated backdrop: slow-moving grid + glow */
.game-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(56, 189, 248, .05) 1px, transparent 1px),
.game-assess-hero { margin-bottom: 16px; }
.game-assess-stats {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 12px;
}
.game-assess-stats .game-chip { min-width: 120px; justify-content: center; }
.game-assess-markers {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 2px auto 10px; max-width: 640px;
}
.game-assess-markers.hidden { display: none; }
/* technique-marker chips on the assess card: lit = the groove demonstrated
 * it; dimmed = the invitation to show it next time. --mk carries the skill's
 * taxonomy color (set inline per chip). */
.gm-marker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(148, 163, 184, .06);
  border: 1px solid rgba(148, 163, 184, .16);
  color: #94a3b8; opacity: .55;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}
.gm-marker .mk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: background .3s ease, box-shadow .3s ease; }
.gm-marker.on { opacity: 1; color: #e2e8f0; border-color: var(--mk); background: color-mix(in srgb, var(--mk) 13%, transparent); }
.gm-marker.on .mk-dot { background: var(--mk); box-shadow: 0 0 8px var(--mk); }
.game-assess-live {
  background: linear-gradient(180deg, #86efac, #22c55e);
}
.game-assess-done {
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
}
    linear-gradient(90deg, rgba(56, 189, 248, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: gameGrid 24s linear infinite;
  pointer-events: none;
}
.game-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 50% 108%, rgba(244, 114, 182, .22), transparent 70%);
}
@keyframes gameGrid { to { background-position: 44px 44px, 0 0; } }

#gameAdvanced {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  background: rgba(255, 255, 255, .06); color: #9fd8ff;
  border: 1px solid rgba(125, 211, 252, .35); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; letter-spacing: .06em; cursor: pointer;
  transition: all .18s ease;
}
#gameAdvanced:hover { background: rgba(125, 211, 252, .18); color: #fff; box-shadow: 0 0 18px rgba(56, 189, 248, .35); }

.game-stage {
  position: relative; z-index: 2;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  /* flex-start + margin:auto on .game-screen: short screens stay vertically
     centered, but a screen taller than the viewport aligns to the top and
     scrolls instead of clipping the title off (align-items:center clips it) */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px 32px;
}

/* ---------- breadcrumb trail ---------- */
.game-crumbs {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 190px); overflow-x: auto; scrollbar-width: none;
  background: rgba(10, 18, 38, .6); border: 1px solid rgba(125, 211, 252, .2);
  border-radius: 999px; padding: 4px 7px; backdrop-filter: blur(7px);
  white-space: nowrap;
}
.game-crumbs::-webkit-scrollbar { display: none; }
.gc-step {
  font-family: inherit; border: 0; background: transparent; cursor: default;
  color: #5c7799; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 999px; transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.gc-step.done { color: #9fd8ff; cursor: pointer; }
.gc-step.done:hover { color: #fff; background: rgba(125, 211, 252, .16); }
.gc-step.cur {
  color: #06121f;
  background: linear-gradient(180deg, #7dd3fc, #38bdf8);
  box-shadow: 0 3px 12px rgba(14, 165, 233, .4);
}
.gc-sep { color: #3d5678; font-size: 10px; user-select: none; }

/* ---------- screens ---------- */
.game-screen {
  width: min(880px, 100%);
  text-align: center;
  margin: auto;   /* centers when short, tops out (never clipped) when tall */
  animation: screenIn .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes screenIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.game-title { font-size: clamp(30px, 5vw, 46px); font-weight: 900; letter-spacing: .02em; margin: 0 0 6px;
  text-shadow: 0 0 24px rgba(56, 189, 248, .45); }
.game-sub { color: #8fb3d8; font-size: 15.5px; margin: 0 0 26px; line-height: 1.5; }
.game-sub b { color: #fcd34d; }

/* ---------- splash ---------- */
.game-logo { font-size: clamp(56px, 10vw, 96px); font-weight: 900; letter-spacing: .06em; line-height: 1; }
.game-logo .gl { color: #38bdf8; text-shadow: 0 0 34px rgba(56, 189, 248, .8), 0 4px 0 rgba(0,0,0,.35); }
.game-logo .gl2 { color: #f472b6; text-shadow: 0 0 34px rgba(244, 114, 182, .8), 0 4px 0 rgba(0,0,0,.35); }
.game-tag { color: #9fb8d8; letter-spacing: .28em; text-transform: uppercase; font-size: 12.5px; margin: 10px 0 18px; }
.game-drums { font-size: 44px; letter-spacing: 14px; margin: 6px 0 20px; }
.game-drums span { display: inline-block; animation: drumFloat 2.6s ease-in-out infinite; }
.game-drums span:nth-child(2) { animation-delay: .35s; }
.game-drums span:nth-child(3) { animation-delay: .7s; }
@keyframes drumFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.game-connect {
  display: inline-block; margin: 0 0 22px; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; letter-spacing: .04em;
  background: rgba(251, 191, 36, .12); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .45);
  animation: connectPulse 1.8s ease-in-out infinite;
}
.game-connect.retry {
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, .2), 0 12px 30px rgba(250, 204, 21, .12);
}
.game-connect.retry:hover {
  border-color: rgba(250, 204, 21, .75);
  transform: translateY(-1px);
}
.game-connect.on { background: rgba(74, 222, 128, .14); color: #86efac; border-color: rgba(74, 222, 128, .5); animation: none; }
@keyframes connectPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.25); } 50% { box-shadow: 0 0 0 12px rgba(251,191,36,0); } }

/* ---------- buttons ---------- */
.game-btn {
  font-family: inherit; cursor: pointer; border: 0; border-radius: 14px;
  font-weight: 800; letter-spacing: .04em; transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-btn.primary {
  padding: 15px 42px; font-size: 18px; color: #06121f;
  background: linear-gradient(180deg, #7dd3fc, #38bdf8 55%, #0ea5e9);
  box-shadow: 0 6px 0 #0369a1, 0 14px 34px rgba(14, 165, 233, .45);
}
.game-btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 #0369a1, 0 18px 44px rgba(14, 165, 233, .6); }
.game-btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #0369a1; }
.game-btn.primary:disabled { filter: grayscale(.85) brightness(.6); cursor: not-allowed; box-shadow: 0 6px 0 #123; }
.game-btn.big { font-size: 21px; padding: 17px 52px; animation: startGlow 2.2s ease-in-out infinite; }
@keyframes startGlow { 0%,100% { box-shadow: 0 6px 0 #0369a1, 0 0 24px rgba(14,165,233,.35); } 50% { box-shadow: 0 6px 0 #0369a1, 0 0 46px rgba(14,165,233,.75); } }
.game-btn.ghost {
  padding: 12px 22px; font-size: 14.5px; color: #cfe8ff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(148, 197, 255, .3);
}
.game-btn.ghost:hover { background: rgba(125, 211, 252, .14); }
.game-btn.small { padding: 9px 18px; font-size: 13.5px; }

.game-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }

.game-hint { color: #6f8db0; font-size: 12.5px; margin-top: 20px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ---------- kit cards ---------- */
.game-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.game-font {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1.5px solid rgba(148, 197, 255, .28); border-radius: 16px; padding: 16px 14px 14px;
  cursor: pointer; text-align: left; position: relative; transition: all .16s ease;
  min-height: 108px; display: flex; flex-direction: column; justify-content: space-between;
}
.game-font:hover { transform: translateY(-3px); border-color: rgba(125, 211, 252, .8); box-shadow: 0 10px 30px rgba(56, 189, 248, .25); }
.game-font.sel { border-color: #38bdf8; background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.07)); box-shadow: 0 0 0 2px rgba(56,189,248,.35), 0 12px 34px rgba(56,189,248,.3); }
.game-font .gf-name { font-weight: 800; font-size: 15px; color: #fff; }
.game-font .gf-meta { color: #8fb3d8; font-size: 12px; margin-top: 4px; }
.game-font .gf-prev {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 14px;
  background: rgba(255,255,255,.1); color: #7dd3fc; transition: all .15s ease;
}  .game-font .gf-prev:hover { background: rgba(125, 211, 252, .35); color: #fff; transform: scale(1.1); }
  /* hands-free drum-nav cursor: Tom 1 / Tom 2 browse, Kick picks — an amber
     ring reads as the moving cursor, distinct from the cyan "selected" state */
  .game-font.nav { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250, 204, 21, .5), 0 12px 34px rgba(250, 204, 21, .22); }
  .game-kit.nav { box-shadow: 0 0 0 2px rgba(250, 204, 21, .6), 0 0 16px rgba(250, 204, 21, .5); }

.game-kitrow { margin-top: 18px; }
.game-kitrow label { display: block; color: #9fb8d8; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.game-kits { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.game-kit {
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(148,197,255,.3); color: #cfe8ff; transition: all .15s ease;
}
.game-kit:hover { border-color: #7dd3fc; }
.game-kit.sel { background: #38bdf8; color: #06121f; border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,.55); }

/* ---------- pad calibration ---------- */
/* chip row sits BELOW the kit: compact pills, one per target, wrapping */
.game-pads { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* a connected kit doesn't need the chip row — the diagram is the feedback */
.game-pads.midi { display: none; }
.game-pad {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(148,197,255,.25); border-radius: 999px;
  padding: 7px 14px 7px 10px; background: rgba(255,255,255,.05);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.game-pad .gp-name { font-weight: 700; font-size: 12.5px; letter-spacing: .05em; color: #cfe0f5; }
/* the glyph speaks the diagram's language: drum circle, cymbal ellipse,
   hat pair, pedal plate — stroked in the drum's lane color */
.game-pad .gp-glyph { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gp-c, #9fb8d8); opacity: .7; transition: opacity .2s ease; }
.game-pad .gp-glyph circle, .game-pad .gp-glyph ellipse, .game-pad .gp-glyph rect {
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.game-pad.done { border-color: #4ade80; background: rgba(74,222,128,.10); box-shadow: 0 0 16px -4px rgba(74,222,128,.45); }
.game-pad.done .gp-name { color: #86efac; }
/* glyphs KEEP their lane color when done (some lane colors ARE green) —
   the border + name + full-opacity glyph carry the done state instead */
.game-pad.done .gp-glyph { opacity: 1; }
.game-pad.hit { animation: gp-flash .4s ease; }
@keyframes gp-flash {
  0% { border-color: #ffd166; box-shadow: 0 0 0 rgba(255,209,102,0); }
  50% { border-color: #ffd166; box-shadow: 0 0 22px rgba(255,209,102,.75); }
  100% { border-color: #ffd166; box-shadow: 0 0 0 rgba(255,209,102,0); }
}

/* ---------- drum-kit diagram (pad calibration) ---------- */
.game-kit-stage {
  position: relative; width: min(560px, 100%); margin: 4px auto 18px;   /* square canvas: cap it */
  background: radial-gradient(ellipse at 50% 118%, rgba(148,197,255,.10), transparent 62%);
  border-radius: 22px; padding: 4px 4px 0;
}
/* pads screen: kit above (bigger now that it's alone), chip row below */
.game-pads-cols {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.game-pads-cols .game-kit-stage { margin: 0; width: min(680px, 100%); }
.game-kit-stage svg { width: 100%; height: auto; display: block; }
/* lesson-preview mini-kit on the intro card */
.intro-kit {
  width: min(320px, 100%); margin: 12px auto 6px;
  background: radial-gradient(ellipse at 50% 118%, rgba(148,197,255,.10), transparent 62%);
  border: 1px solid rgba(148,197,255,.16); border-radius: 16px; padding: 8px 8px 4px;
}
.intro-kit svg { width: 100%; height: auto; display: block; }
/* parts the lesson never plays stay dimmed in the preview kit */
.dk-part.off { opacity: .20; filter: grayscale(.9); }
.dk-floor { stroke: rgba(148,197,255,.16); stroke-width: 2; stroke-dasharray: 4 8; }
.dk-part { cursor: default; }
.dk-body {
  fill: rgba(148,197,255,.07); stroke: rgba(148,197,255,.38); stroke-width: 2.5;
  transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}
.dk-detail { fill: rgba(148,197,255,.18); transition: fill .18s ease; }
.dk-label {
  fill: #7c93b8; font: 700 15px "Segoe UI", system-ui, sans-serif;
  letter-spacing: .14em; text-anchor: middle;
}
.dk-part.done .dk-body { stroke: #4ade80; fill: rgba(74,222,128,.10); }
.dk-part.done .dk-detail { fill: rgba(74,222,128,.35); }
.dk-part.done .dk-label { fill: #86efac; }
.dk-part.lit .dk-body {
  stroke: var(--dk-c, #ffd166);
  fill: color-mix(in srgb, var(--dk-c, #ffd166) 20%, transparent);
  animation: dk-pulse .45s ease;
}
.dk-part.lit .dk-detail { fill: color-mix(in srgb, var(--dk-c, #ffd166) 55%, transparent); }
.dk-part.lit .dk-label { fill: color-mix(in srgb, var(--dk-c, #ffd166) 55%, #fff); }
@keyframes dk-pulse {
  0%   { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--dk-c, #ffd166) 50%, transparent)); }
  50%  { filter: drop-shadow(0 0 20px var(--dk-c, #ffd166)); }
  100% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--dk-c, #ffd166) 85%, transparent)); }
}
/* e-kit hardware: rack bar + 4 posts, cymbal rods, drum L-arms, module box,
   kick tower, cables. An e-kit hangs EVERYTHING off the rack — no legs. */
.dk-hw-line { stroke: rgba(148,197,255,.32); stroke-width: 5; fill: none; stroke-linecap: round; }
.dk-post { stroke: rgba(148,197,255,.32); stroke-width: 5; stroke-linecap: round; }
.dk-rod, .dk-arm { stroke: rgba(148,197,255,.24); stroke-width: 2.5; stroke-linecap: round; }
.dk-module { fill: rgba(148,197,255,.09); stroke: rgba(148,197,255,.36); stroke-width: 2; }
.dk-hw-detail { fill: rgba(148,197,255,.20); }
.dk-cable { fill: none; stroke: rgba(148,197,255,.30); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
/* hi-hat state: one disc pair — the top disc lifts for open, presses down
   for closed, and half sits between. Mechanically how an e-hat reads. */
.dk-part .dk-hat-top { transform-box: fill-box; transform-origin: center; transition: transform .25s ease; }
.dk-part.hat-open .dk-hat-top { transform: translateY(-7px); }
.dk-part.hat-half .dk-hat-top { transform: translateY(-2.5px); }
.dk-part.hat-closed .dk-hat-top { transform: translateY(4.5px); }

/* ---------- stats strip ---------- */
.game-stats {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
  margin-bottom: 22px; padding: 12px 18px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(148,197,255,.22);
}
.game-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; color: #06121f; background: linear-gradient(135deg, #7dd3fc, #f472b6); margin-right: 8px;
}
.game-uname { font-weight: 800; font-size: 15px; }
.game-lv { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9fb8d8; }
.game-lv b { color: #fcd34d; font-size: 16px; }
.game-xpbar { width: 110px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.game-xpbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #38bdf8, #a78bfa); transition: width .5s ease; }
.game-xptext { font-size: 11.5px; color: #8fb3d8; }
.game-chip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px; font-weight: 700;
  background: rgba(255,255,255,.07); border: 1px solid rgba(148,197,255,.25); color: #cfe8ff;
  white-space: nowrap; flex-shrink: 0;   /* chips keep their one-line pill shape in the stats strip */
}
.game-chip.fire { background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.5); color: #fdba74; }

/* ---------- profile ask ---------- */
.game-ask { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 0 0 18px; padding: 12px 16px;
  border-radius: 14px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4); }
.game-ask span { color: #fcd34d; font-weight: 700; font-size: 14px; }
.game-ask input {
  padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(148,197,255,.4); background: rgba(0,0,0,.35);
  color: #fff; font-size: 14px; width: 180px; outline: none;
}
.game-ask input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.25); }

/* ---------- hero (next lesson) — compact "up next" bar ---------- */
.game-hero {
  position: relative; margin: 0 0 14px; padding: 12px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 2px; align-items: center;
  border-radius: 16px; text-align: left; overflow: hidden;
  background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(244,114,182,.12));
  border: 1.5px solid rgba(125, 211, 252, .5);
  box-shadow: 0 16px 44px rgba(2, 8, 23, .6), inset 0 0 60px rgba(56,189,248,.06);
}
.game-hero-grade {
  display: inline-flex; align-items: center; grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: start;
  font-size: 11.5px; font-weight: 900; letter-spacing: .14em;
  padding: 4px 12px; border-radius: 999px;
  background: #fcd34d; color: #3b2f00;
}
.game-hero h2 {
  grid-column: 2; grid-row: 1; margin: 0; font-size: 16.5px; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-hero p {
  grid-column: 2; grid-row: 2; margin: 0; color: #a9c6e6; font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-hero > .game-btn { grid-column: 3; grid-row: 1 / 3; align-self: center; flex: none; }

.game-maphead { color: #9fb8d8; letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; margin: 16px 0 10px; }

/* ---------- mode toggle (curriculum / MIDI songs) ---------- */
.game-modes { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.game-mode {
  padding: 9px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 800; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(148,197,255,.3); color: #cfe8ff;
  transition: all .15s ease; font-family: inherit;
}
.game-mode:hover { transform: translateY(-1px); border-color: #7dd3fc; }
.game-mode.sel {
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9); color: #06121f;
  border-color: #7dd3fc; box-shadow: 0 0 16px rgba(56, 189, 248, .5);
}

/* ---------- grade map + lesson grid ---------- */
.game-grades { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.game-grade {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; cursor: pointer; position: relative;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(148,197,255,.3); color: #cfe8ff; transition: all .15s ease;
}
.game-grade:hover { transform: translateY(-2px) scale(1.06); border-color: #7dd3fc; }
.game-grade.sel { background: linear-gradient(180deg, #7dd3fc, #0ea5e9); color: #06121f; border-color: #7dd3fc; box-shadow: 0 0 18px rgba(56,189,248,.5); }
.game-grade .gg-dot { position: absolute; bottom: 3px; right: 5px; font-size: 8px; color: #fcd34d; }

.game-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin-bottom: 10px; }
.game-lesson {
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(148,197,255,.22); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; text-align: left; transition: all .16s ease;
}
.game-lesson:hover { transform: translateY(-3px); border-color: rgba(125,211,252,.8); box-shadow: 0 10px 28px rgba(56,189,248,.22); }
.game-lesson.sel { border-color: #f472b6; background: rgba(244,114,182,.1); box-shadow: 0 0 0 2px rgba(244,114,182,.35); }
.game-lesson .gl-title {
  font-weight: 800; font-size: 12.5px; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-lesson .gl-meta { margin-top: 4px; font-size: 10.5px; font-weight: 800; color: #7dd3fc; letter-spacing: .02em; }
.game-lesson .gl-stars { color: #fcd34d; letter-spacing: 2px; font-size: 11px; margin-top: 5px; }
.game-lesson .gl-pos {
  float: right; font-size: 10px; font-weight: 800; color: #7dd3fc;
  background: rgba(125, 211, 252, .12); border: 1px solid rgba(125, 211, 252, .3);
  border-radius: 999px; padding: 1px 7px; margin-left: 8px; letter-spacing: .5px;
}
.game-lesson .gl-stars .off { opacity: .25; }
.game-lesson.tab .gl-stars { color: #7dd3fc; letter-spacing: 0; font-size: 15px; }
.game-lesson.locked { opacity: .55; cursor: not-allowed; }
.game-lesson.locked:hover { transform: none; box-shadow: none; border-color: rgba(148,197,255,.22); }
.game-lesson.locked .gl-lock { color: #6f8db0; font-size: 12px; letter-spacing: .02em; }
.game-lessons.busy { opacity: .55; pointer-events: none; }

/* ---------- picker layouts: path + wall (?layout=path|wall) ----------
   #gameShell-prefixed so these beat the design layer's .game-lesson rules */
#gameShell .lp-wrap {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 26px 10px; padding: 6px 4px 2px;
}
#gameShell .lp-rail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#gameShell .lp-rail path { fill: none; stroke: url(#lpGrad); stroke-width: 3; stroke-linecap: round; opacity: .55; }
#gameShell .game-lesson.lp-node {
  width: 108px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px; background: none; border: none; box-shadow: none; border-radius: 14px;
}
#gameShell .game-lesson.lp-node:hover { transform: none; box-shadow: none; }
#gameShell .game-lesson.lp-node .lp-num {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; color: #cfe8ff;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 2px solid rgba(148,197,255,.35);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.7);
  transition: all .15s ease;
}
#gameShell .game-lesson.lp-node:hover .lp-num { transform: translateY(-2px) scale(1.06); border-color: rgba(255,201,60,.7); }
#gameShell .game-lesson.lp-node.sel { background: none; }
#gameShell .game-lesson.lp-node.sel .lp-num {
  background: linear-gradient(180deg, #ffd98d, #ffc93c);
  color: #241300; border-color: #ff6fa5;
  box-shadow: 0 0 0 3px rgba(255,111,165,.35), 0 10px 26px -8px rgba(255,111,165,.55);
}
#gameShell .game-lesson.lp-node .gl-title {
  min-height: 0; max-width: 108px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.25; color: #cfe8ff;
}
#gameShell .game-lesson.lp-node .gl-stars { font-size: 10px; letter-spacing: 1px; margin-top: 0; }

#gameShell .lw-grade { margin-bottom: 18px; text-align: left; }
#gameShell .lw-head {
  display: flex; align-items: center; gap: 10px; margin: 0 2px 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #9fb8d8;
}
#gameShell .lw-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900; color: #241300;
  background: linear-gradient(180deg, #ffd98d, #ffc93c);
  box-shadow: 0 4px 14px -4px rgba(255,201,60,.5);
}
#gameShell .lw-count { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: none; color: #8fb3d8; }
#gameShell .lw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
#gameShell .game-lesson.lw-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; min-height: 0; }
#gameShell .lw-pos {
  flex: none; min-width: 26px; text-align: center;
  font-size: 10.5px; font-weight: 800; color: #7dd3fc;
  background: rgba(125,211,252,.1); border: 1px solid rgba(125,211,252,.3);
  border-radius: 999px; padding: 1px 6px;
}
#gameShell .game-lesson.lw-pill .gl-title {
  flex: 1; min-width: 0; min-height: 0;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; font-weight: 700;
}
#gameShell .game-lesson.lw-pill .gl-stars { flex: none; font-size: 10px; letter-spacing: 1px; margin-top: 0; }
#gameShell .game-lesson.lw-pill.sel { border-radius: 10px; }

/* ---------- picker layouts: stage + board + metro (?layout=stage|board|metro) ----------
   renderLessons stamps data-layout on the lessons <section>; each layout
   rearranges the SCREEN CHROME too, not just the picker body:
     stage — hero becomes a big centrepiece card, grade map shrinks to dots,
             the grade's lessons become a horizontal filmstrip
     board — hero hidden, stage-style grade dots pick the grade, its lessons
             flow into four kanban columns; the ▶ badge on the selected card is the play control
     metro — hero docks as a sticky left panel, grade map hidden, every grade
             becomes a coloured transit line of numbered stops */

/* the path rail was being squeezed into one 165px grid track — span all */
#gameShell .lp-wrap { grid-column: 1 / -1; }

/* --- stage --------------------------------------------------------------- */
#gameShell .game-screen[data-layout="stage"] .game-hero {
  grid-template-columns: 1fr; grid-template-rows: auto auto auto auto;
  gap: 10px; padding: 28px 22px; text-align: center;
  background: linear-gradient(160deg, rgba(255,201,60,.14), rgba(244,114,182,.10) 55%, rgba(56,189,248,.10));
  border-color: rgba(255,201,60,.5);
  box-shadow: 0 18px 50px -18px rgba(255,150,80,.45), inset 0 0 80px rgba(255,201,60,.05);
}
#gameShell .game-screen[data-layout="stage"] .game-hero-grade { grid-column: 1; grid-row: 1; justify-self: center; align-self: auto; font-size: 12px; padding: 5px 16px; }
#gameShell .game-screen[data-layout="stage"] .game-hero h2 { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: 27px; white-space: normal; overflow: visible; text-align: center; }
#gameShell .game-screen[data-layout="stage"] .game-hero p { grid-column: 1; grid-row: 3; -webkit-line-clamp: 3; font-size: 13px; text-align: center; }
#gameShell .game-screen[data-layout="stage"] .game-hero > .game-btn { grid-column: 1; grid-row: 4; justify-self: center; align-self: auto; margin-top: 6px; padding: 11px 30px; font-size: 15px; }
#gameShell .game-screen[data-layout="stage"] .game-maphead { margin: 20px 0 8px; }
#gameShell .game-screen:is([data-layout="stage"],[data-layout="board"]) .game-grade { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 11.5px; }
#gameShell .game-screen:is([data-layout="stage"],[data-layout="board"]) .game-grade .gg-dot { bottom: 1px; right: 3px; }
#gameShell .game-screen[data-layout="stage"] .game-lessons { margin-bottom: 14px; }
#gameShell .st-strip {
  grid-column: 1 / -1;
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px 14px;
  scroll-snap-type: x proximity;
}
#gameShell .st-item .st-num,
#gameShell .bd-card .bd-num {
  position: absolute; top: 8px; right: 9px; font-size: 10px; font-weight: 800; color: #7dd3fc;
  background: rgba(125,211,252,.12); border: 1px solid rgba(125,211,252,.3); border-radius: 999px; padding: 1px 7px;
}
#gameShell .st-item .gl-title { min-height: 3.2em; }
#gameShell .st-item { flex: 0 0 170px; position: relative; scroll-snap-align: center; }
#gameShell .st-strip::-webkit-scrollbar-thumb { background: rgba(148,197,255,.22); border-radius: 4px; }

/* --- board --------------------------------------------------------------- */
/* the lessons screen always starts at the top of the stage — no vertical
   centering — so the stats strip never drifts down on short grades or the
   MIDI songs list. (data-layout is set in tabs mode too, so this holds for
   both lists.) */
#gameShell .game-screen[data-layout="board"] { margin: 0 auto; }
/* the stats strip (avatar / level / streaks / settings) stays pinned to the
   top of the lessons screen — it holds the identity and account actions and
   must be reachable no matter how far the lesson list scrolls. It rests at
   the stage's 48px top padding; sticky top:0 keeps it right there while the
   cards scroll under its fade (the mode row scrolls under too). */
#gameShell .game-screen[data-layout="board"] .game-stats {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, #0a1220 78%, rgba(10,18,32,.92) 94%, rgba(10,18,32,0));
}
#gameShell .game-screen[data-layout="board"] .game-maphead { margin: 0 0 10px; }
#gameShell .bd-board {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 2px 12px;
}
#gameShell .bd-card { position: relative; }
#gameShell .bd-card .gl-title { min-height: 0; padding-right: 32px; }   /* clear of the number chip */
/* the hero is the "now playing" display in other layouts; the board hides it
   whenever it has a board to show (the badged card is the indicator) — the
   plain hero shows through for the empty/error states that need its message */
#gameShell .game-screen[data-layout="board"]:has(.bd-board) .game-hero { display: none; }
#gameShell .bd-play {
  position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; border: none; border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd98d, #ffc93c);
  box-shadow: 0 4px 14px -4px rgba(255,201,60,.5);
}
#gameShell .bd-play::before { content: "▶"; font-size: 10px; color: #241300; margin-left: 1px; }

/* --- metro --------------------------------------------------------------- */
#gameShell .game-screen[data-layout="metro"] {
  display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); column-gap: 16px;
}
#gameShell .game-screen[data-layout="metro"] .game-stats,
#gameShell .game-screen[data-layout="metro"] .game-modes,
#gameShell .game-screen[data-layout="metro"] .game-hint,
#gameShell .game-screen[data-layout="metro"] .game-actions { grid-column: 1 / -1; }
#gameShell .game-screen[data-layout="metro"] .game-hero {
  grid-column: 1; grid-row: 3; position: sticky; top: 10px; align-self: start;
  grid-template-columns: 1fr; grid-template-rows: auto auto auto auto;
  gap: 8px; margin: 0 0 12px; padding: 14px; text-align: center;
}
#gameShell .game-screen[data-layout="metro"] .game-hero-grade { grid-column: 1; grid-row: 1; justify-self: center; align-self: auto; font-size: 10.5px; padding: 3px 12px; }
#gameShell .game-screen[data-layout="metro"] .game-hero h2 { grid-column: 1; grid-row: 2; font-size: 14px; white-space: normal; overflow: visible; text-align: center; }
#gameShell .game-screen[data-layout="metro"] .game-hero p { grid-column: 1; grid-row: 3; font-size: 11px; text-align: center; }
#gameShell .game-screen[data-layout="metro"] .game-hero > .game-btn { grid-column: 1; grid-row: 4; justify-self: center; align-self: auto; margin-top: 2px; padding: 8px 20px; font-size: 13px; }
#gameShell .game-screen[data-layout="metro"] .game-maphead,
#gameShell .game-screen[data-layout="metro"] .game-grades { display: none; }
#gameShell .game-screen[data-layout="metro"] .game-lessons { grid-column: 2; grid-row: 3; margin-bottom: 12px; }
#gameShell .mt-map { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; text-align: left; }
#gameShell .mt-lane { background: rgba(255,255,255,.03); border: 1px solid rgba(148,197,255,.14); border-radius: 12px; padding: 10px 14px 12px; }
#gameShell .mt-lane.cur { border-color: var(--mt-line); box-shadow: 0 0 0 1px var(--mt-line-dim); }
#gameShell .mt-lanehead { display: flex; align-items: center; gap: 8px; }
#gameShell .mt-gnum {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; color: #081018; background: var(--mt-line);
}
#gameShell .mt-gname { font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #cfe8ff; }
#gameShell .mt-gcount { margin-left: auto; font-size: 10px; font-weight: 600; color: #8fb3d8; }
#gameShell .mt-stops { position: relative; display: flex; gap: 24px; margin-top: 14px; overflow-x: auto; padding: 0 2px 4px; }
#gameShell .mt-stops::before {
  content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mt-line), var(--mt-line-dim));
}
#gameShell .mt-stop { position: relative; flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 10px 6px; }
#gameShell .mt-stop.sel { border-color: var(--mt-line); background: rgba(255,255,255,.06); box-shadow: 0 0 0 2px var(--mt-line-dim); }
#gameShell .mt-dot {
  width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box;
  background: #0b1526; border: 3px solid var(--mt-line); color: #eaf6ff;
  font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 14px rgba(0,0,0,.5);
}
#gameShell .mt-stop:hover .mt-dot { transform: scale(1.1); }
#gameShell .mt-stop.sel .mt-dot { background: var(--mt-line); color: #081018; box-shadow: 0 0 0 3px var(--mt-glow); }
#gameShell .mt-ttl {
  max-width: 92px; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #cfe8ff; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#gameShell .mt-stop .gl-stars { margin-top: 0; font-size: 9px; letter-spacing: 1px; }
#gameShell .mt-stops::-webkit-scrollbar { height: 8px; }
#gameShell .mt-stops::-webkit-scrollbar-thumb { background: rgba(148,197,255,.22); border-radius: 4px; }

@media (max-width: 900px) {
  #gameShell .game-screen[data-layout="metro"] { grid-template-columns: 1fr; }
  #gameShell .game-screen[data-layout="metro"] .game-hero { grid-column: 1; grid-row: auto; position: static; }
  #gameShell .game-screen[data-layout="metro"] .game-lessons { grid-column: 1; grid-row: auto; }
}

/* ---------- play screen: the lesson runs inside the shell ---------- */
#gameShell.playing .game-stage { padding: 0; overflow: hidden; }

.game-play {
  width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left;
}
.game-play-head {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 14px 200px 14px 18px;   /* right gutter clears the ⏭ pill */
  background: rgba(9, 15, 32, .55); border-bottom: 1px solid rgba(148, 197, 255, .16);
  backdrop-filter: blur(8px);
}
.game-play-meta { flex: 1; min-width: 0; }
.gp-title {
  font-weight: 900; font-size: 19px; letter-spacing: .02em;
  text-shadow: 0 0 16px rgba(56, 189, 248, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-sub { color: #8fb3d8; font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-play-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* live XP earned during the run */
.gp-xp {
  flex: none; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
  color: #fcd34d; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .45);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 9.5ch; text-align: center;
}
.gp-xp.pop { animation: xpPop .5s ease; }
@keyframes xpPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); box-shadow: 0 0 26px rgba(251, 191, 36, .6); }
  100% { transform: scale(1); }
}

.game-playbar-host { flex: none; }
.game-stage-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* the classic play chrome, re-skinned for the neon shell */
#gameShell #playbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: rgba(9, 15, 32, .6); border-bottom: 1px solid rgba(148, 197, 255, .16);
}
#gameShell #playbar .btn { font-family: inherit; border: 0; border-radius: 12px; font-weight: 800; cursor: pointer; transition: all .15s ease; }
#gameShell #playBtn {
  padding: 11px 28px; font-size: 15px; color: #06121f;
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
  box-shadow: 0 4px 0 #0369a1, 0 10px 24px rgba(14, 165, 233, .4);
}
#gameShell #playBtn:hover { transform: translateY(-1px); }
#gameShell #restartBtn {
  padding: 11px 16px; font-size: 15px; color: #cfe8ff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(148, 197, 255, .3);
}
#gameShell #restartBtn:hover { background: rgba(125, 211, 252, .16); }
#gameShell .progress { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); cursor: pointer; }
#gameShell .progress #progressFill { background: linear-gradient(90deg, #38bdf8, #a78bfa); border-radius: 99px; }
#gameShell #timeLabel { color: #9fb8d8; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#gameShell .score-box { display: flex; align-items: baseline; gap: 8px; min-width: 210px; justify-content: flex-end; }
#gameShell .combo { font-size: 30px; font-weight: 900; color: #fcd34d; text-shadow: 0 0 18px rgba(252, 211, 77, .5); font-variant-numeric: tabular-nums; }
#gameShell .acc { font-size: 16px; font-weight: 800; color: #86efac; font-variant-numeric: tabular-nums; }
#gameShell .stars { letter-spacing: 2px; font-size: 15px; color: #38bdf8; }
#gameShell .score-box .muted { font-size: 11px; color: #6f8db0; }

#gameShell #stage { flex: 1; min-height: 0; }
#gameShell #overviewWrap { height: 54px; background: rgba(9, 15, 32, .5); border-bottom: 1px solid rgba(148, 197, 255, .16); }
#gameShell #gameWrap { background: rgba(3, 7, 16, .6); }
#gameShell #sidepanel { background: rgba(9, 15, 32, .5); border-left: 1px solid rgba(148, 197, 255, .16); }
#gameShell #sidepanel h3 { color: #7da6d0; }

/* the lesson-structure cards ("lesson cards") inside the shell */
#gameShell .steps li {
  border-radius: 12px; padding: 9px 12px; margin-bottom: 6px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 197, 255, .14);
  transition: all .15s ease; cursor: pointer;
}
#gameShell .steps li:hover { border-color: rgba(125, 211, 252, .6); }
#gameShell .steps li.current { border-color: #38bdf8; background: rgba(56, 189, 248, .12); box-shadow: 0 0 14px rgba(56, 189, 248, .25); }
#gameShell .steps li.locked { opacity: .5; }
#gameShell .step-stars { color: #fcd34d; }
#gameShell .step-meta { color: #6f8db0; font-size: 11.5px; }
#gameShell .step-lock { font-size: 12px; }

/* toggles + tempo re-homed in the play header */
#gameShell .switch {
  display: inline-flex; align-items: center; gap: 6px;
  color: #9fb8d8; font-size: 12.5px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 197, 255, .2); cursor: pointer;
}
#gameShell .switch input { accent-color: #38bdf8; cursor: pointer; }
#gameShell #speedSelect, #gameShell #bpmSelect {
  font-family: inherit; font-size: 12.5px; color: #cfe8ff; padding: 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 197, 255, .2); outline: none; cursor: pointer;
}

/* ---------- game-styled results (rendered inside the shell) ---------- */
#gameShell #resultOverlay, #gameShell #profileOverlay,
#gameShell #coachOverlay { z-index: 9500; background: rgba(3, 6, 14, .86); }
/* the stats strip (avatar + name) opens the coach & styles dialog */
.game-user { cursor: pointer; }
.game-user:hover .game-avatar { filter: brightness(1.25); }
#gameShell .result-card {
  width: 470px; padding: 36px 44px 32px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(28, 43, 82, .94), rgba(13, 20, 40, .97));
  border: 1.5px solid rgba(125, 211, 252, .55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .22), 0 34px 100px rgba(0, 0, 0, .75), inset 0 0 90px rgba(56, 189, 248, .07);
}
#gameShell .result-title {
  font-size: 18px; letter-spacing: 4px; font-weight: 900;
  background: linear-gradient(90deg, #7dd3fc, #f472b6);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
#gameShell .result-score { color: #fcd34d; text-shadow: 0 0 34px rgba(252, 211, 77, .5); }
#gameShell .result-card.platinum .result-score { color: #e5f3ff; text-shadow: 0 0 40px rgba(120, 200, 255, .95); }
#gameShell .result-best { color: #86efac; }
#gameShell .result-xp { border-color: rgba(125, 211, 252, .35); background: rgba(56, 189, 248, .08); }
#gameShell .rxp-total { color: #7dd3fc; }
#gameShell .rxp-bar i { background: linear-gradient(90deg, #38bdf8, #fcd34d); }
#gameShell .rxp-up { color: #fcd34d; text-shadow: 0 0 18px rgba(252, 211, 77, .6); }
#gameShell .rxp-streak { color: #fdba74; }
#gameShell .result-actions { flex-wrap: wrap; justify-content: center; gap: 10px; }
#gameShell .result-actions .btn { font-family: inherit; }
#gameShell .result-actions .btn.primary {
  color: #06121f; background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
  box-shadow: 0 4px 0 #0369a1, 0 10px 24px rgba(14, 165, 233, .4);
}
#gameShell .result-actions::after {
  content: "🥁 Kick = practice again · Tom 2 = next";
  display: block; margin-top: 14px; font-size: 11.5px; color: #6f8db0; letter-spacing: .03em;
}
/* coach text must never clip: the persona line + the AI tip grow the card */
#gameShell .result-coach-line { line-height: 1.55; }
.result-coach { max-height: none; overflow: visible; }

/* ---------- intro card: same neon language as the result card ---------- */
#gameShell #introOverlay {
  z-index: 9500; background: rgba(3, 6, 14, .86);
  align-items: flex-start; overflow-y: auto; padding: 44px 16px;   /* tall cards scroll, nothing clips */
}
#gameShell #introOverlay.game .dialog.intro {
  width: 470px; max-width: 92vw; padding: 36px 44px 32px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(28, 43, 82, .94), rgba(13, 20, 40, .97));
  border: 1.5px solid rgba(125, 211, 252, .55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .22), 0 34px 100px rgba(0, 0, 0, .75),
              inset 0 0 90px rgba(56, 189, 248, .07);
  max-height: none; overflow: visible;   /* size to content — long coach takes fit */
}
#gameShell #introOverlay.game .dialog.intro h2#introTitle {
  font-size: 18px; letter-spacing: 3px; font-weight: 900; text-transform: uppercase;
  background: linear-gradient(90deg, #7dd3fc, #f472b6);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
#gameShell #introOverlay.game .dialog.intro .intro-badge {
  color: #06121f; background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
  border: none; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 2px 12px rgba(14, 165, 233, .45);
}
#gameShell #introOverlay.game .intro-blurb { color: #dce7f6; font-size: 14px; line-height: 1.7; }
#gameShell #introOverlay.game .intro-firstpart { border-top-color: rgba(125, 211, 252, .25); }
#gameShell #introOverlay.game .intro-firstpart h3,
#gameShell #introOverlay.game .intro-trains h3,
#gameShell #introOverlay.game .intro-songs h3,
#gameShell #introOverlay.game .intro-coach h3 { color: #7dd3fc; letter-spacing: 1.5px; }
#gameShell #introOverlay.game .intro-song {
  background: rgba(125, 211, 252, .08); border: 1px solid rgba(125, 211, 252, .3); color: #dce7f6;
}
#gameShell #introOverlay.game .intro-song:hover { border-color: #7dd3fc; box-shadow: 0 4px 18px rgba(14, 165, 233, .35); }
#gameShell #introOverlay.game .intro-song .intro-song-link { color: #dce7f6; }
#gameShell #introOverlay.game .intro-song .is-a { color: #8fb4d6; }
#gameShell #introOverlay.game .intro-song .is-go { color: #7dd3fc; }
#gameShell #introOverlay.game .intro-song .is-play {
  background: linear-gradient(135deg, #0ea5e9, #7dd3fc); color: #08121f;
}
#gameShell #introOverlay.game .intro-songs-note { color: #8fb4d6; }
#gameShell #introOverlay.game .intro-chip {
  background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .35); color: #bfe9ff;
}
#gameShell #introOverlay.game .intro-coach { border-top-color: rgba(125, 211, 252, .25); }
#gameShell #introOverlay.game .intro-coach-text { color: #b39dff; font-size: 13.5px; line-height: 1.65; }
#gameShell #introOverlay.game .dialog-actions .btn.primary {
  color: #06121f; background: linear-gradient(180deg, #7dd3fc, #0ea5e9); border: none;
  box-shadow: 0 4px 0 #0369a1, 0 10px 24px rgba(14, 165, 233, .4);
}
#gameShell #introOverlay.game .dialog-actions .btn.mini {
  color: #bfe9ff; background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .35);
}

/* ---------- coach + styles setup screen ---------- */
.game-coaches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 18px; }
.coach-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 10px; border-radius: 16px; cursor: pointer; font: inherit; color: #e7ecf5;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.coach-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.09); }
.coach-card.sel {
  border-color: var(--cc, #f472b6);
  background: color-mix(in srgb, var(--cc, #f472b6) 16%, rgba(255,255,255,.04));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, #f472b6) 32%, transparent),
              0 10px 26px -12px var(--cc, #f472b6);
}
.cc-ava { font-size: 36px; line-height: 1.1; }
.cc-name { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.cc-vibe { font-size: 11px; opacity: .62; text-align: center; }
.game-styles { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; justify-content: center; }
.game-styles .style-chip { font-size: 13.5px; padding: 8px 15px; }
.gl-style { opacity: .9; }
/* tailoring progress chip on the lessons screen */
.game-tailor {
  margin: 12px auto 16px; padding: 14px 16px; border-radius: 16px;
  color: #dcecff; background: linear-gradient(180deg, rgba(125,211,252,.12), rgba(56,189,248,.06));
  border: 1px solid rgba(125,211,252,.28); max-width: 720px; text-align: left;
  box-shadow: 0 12px 30px rgba(2, 8, 23, .18);
}
.game-tailor.busy { animation: tailorPulse 1.8s ease-in-out infinite; }
.game-tailor.error {
  color: #ffe3bf; background: linear-gradient(180deg, rgba(251,146,60,.12), rgba(251,146,60,.05));
  border-color: rgba(251,146,60,.3);
}
.game-tailor .gt-head { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #7dd3fc; margin-bottom: 7px; }
.game-tailor .gt-summary { font-size: 15px; font-weight: 800; line-height: 1.45; color: #f7fbff; margin-bottom: 6px; }
.game-tailor .gt-meta { font-size: 12.5px; color: #9fc0df; margin-bottom: 8px; }
.game-tailor .gt-status { font-size: 13px; color: #ffe9a8; line-height: 1.45; margin-bottom: 6px; }
.game-tailor.error .gt-status { color: #ffd4a8; }
.game-tailor .gt-line { font-size: 12px; color: #a9c6e6; line-height: 1.45; margin-top: 5px; word-break: break-word; }
.game-tailor .gt-line b { color: #dcecff; margin-right: 8px; }
.game-tailor .gt-command { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
@keyframes tailorPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* scrollbars */
.game-stage::-webkit-scrollbar { width: 10px; }
.game-stage::-webkit-scrollbar-thumb { background: rgba(125,211,252,.3); border-radius: 99px; }
.game-stage::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
  .game-stage { padding: 40px 12px 24px; align-items: flex-start; }
  .game-actions { flex-direction: column; }
}

/* ---------- settings screens (game-view Settings popup) ---------- */
.gs-gear { font-family: inherit; cursor: pointer; }
.gs-gear:hover { border-color: #fcd34d; color: #fff; }
.gs-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gs-row {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 14px 16px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1.5px solid rgba(148,197,255,.26); color: #e8f2ff;
  transition: all .16s ease; position: relative;
}
.gs-row:hover { border-color: rgba(125,211,252,.7); transform: translateY(-1px); }
.gs-row .gs-ico { font-size: 20px; flex: none; }
.gs-row .gs-label { font-weight: 800; font-size: 15px; flex: 1; min-width: 0; }
.gs-row .gs-desc { display: block; color: #8fb3d8; font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.4; }
.gs-row .gs-val { color: #9fd8ff; font-size: 13px; font-weight: 700; text-align: right; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-row .gs-go { color: #5c7799; font-size: 18px; flex: none; }
.gs-row.nav { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.5), 0 10px 30px rgba(250,204,21,.2); }
.gs-row.sel { border-color: #38bdf8; background: linear-gradient(180deg, rgba(56,189,248,.2), rgba(56,189,248,.06)); box-shadow: 0 0 0 2px rgba(56,189,248,.25); }
.gs-row.rec {
  border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.5);
  animation: gsRecPulse 1.1s ease-in-out infinite;
}
@keyframes gsRecPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(250,204,21,.4); } 50% { box-shadow: 0 0 0 2px rgba(250,204,21,.85), 0 0 26px rgba(250,204,21,.5); } }
.gs-row.confirm { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,.5); }
.gs-row.confirm .gs-label { color: #fca5a5; }
.gs-row.dim { opacity: .45; pointer-events: none; }
.gs-pill { font-size: 10.5px; font-weight: 900; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px; flex: none; }
.gs-pill.on { background: rgba(74,222,128,.18); color: #86efac; border: 1px solid rgba(74,222,128,.5); }
.gs-pill.off { background: rgba(148,163,184,.12); color: #94a3b8; border: 1px solid rgba(148,163,184,.35); }
.gs-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 34px;
  padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; cursor: pointer;
  font-family: inherit; text-align: left; max-width: calc(100% - 44px);
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(148,197,255,.3); color: #cfe8ff; transition: all .15s ease;
}
.gs-chip:hover { border-color: #7dd3fc; }
.gs-chip.sel { background: #38bdf8; color: #06121f; border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,.55); }
.gs-chip.nav { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.6), 0 0 16px rgba(250,204,21,.5); }
.gs-inputrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.gs-inputrow .gs-label { font-weight: 800; font-size: 14px; color: #e8f2ff; min-width: 96px; flex: none; }
.gs-input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(148,197,255,.3);
  background: rgba(4,10,24,.6); color: #fff; font: inherit; font-size: 13.5px; }
.gs-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.35); }
.gs-stats { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px;
  background: rgba(56,189,248,.07); border: 1px solid rgba(56,189,248,.25); margin-bottom: 4px; }
.gs-stats-lv { display: flex; align-items: center; gap: 12px; font-weight: 800; color: #fff; }
.gs-stats-lv .game-xpbar { flex: 1; width: auto; }
.gs-stats-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #8fb3d8; font-size: 12.5px; }
.gs-panel { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,197,255,.2); color: #cfe8ff; font-size: 13px; line-height: 1.55; text-align: left; }
.gs-panel .good { color: #86efac; }

/* ---- Game mode is the app (2026-09-05) ----
   While the game shell is open, the classic chrome inside #app must never
   paint: it used to flash through shell screen transitions (the splash->setup
   flicker) and kept an idle canvas/playbar rendering behind the shell.
   game.js toggles body.game-open with the shell. Elements the shell borrows
   mid-lesson are MOVED into #gameShell (moveIn), so they keep rendering;
   #app only holds the retired classic chrome while the shell is up. */
body.game-open > #app { display: none !important; }
/* The landing page is the site front door and sits over the same classic
   chrome — but game-open is CLEARED when the shell closes (sign-out /
   home), so #app would sit exposed behind the landing. body.landing-open
   re-hides #app for the whole time the landing is on screen, including the
   400ms fade-out transition when entering the game, so the retired advanced
   view can never flash through. Set by landing-html.js (mount) and
   landing.js (showLanding), cleared by game.js show() when the shell
   takes over. */
body.landing-open > #app { display: none !important; }

/* ---- Account dialogs above everything (2026-09-05) ----
   The auth/upgrade/profile overlays are relocated to <body> at first paint so
   they can open over the landing page (z 10000) AND the game shell (z 9000).
   The landing CTAs gate on the auth modal, so the dialogs must beat the
   landing's z-index — not sit under it (a lower value made sign-in look dead
   while the modal rendered invisibly behind the marketing page). */
#authOverlay, #upgradeOverlay, #profileOverlay { z-index: 10001; }

/* ---- Checkout redirect blocker ----
   The checkout session POST + Stripe's first paint take 1–2s; the browser
   keeps painting the player meanwhile, so the main screen flashes before the
   hosted page. This opaque cover stays up from click until page exit — the
   player is only ever repainted when Stripe returns us via return_to. */
#checkoutWait {
  position: fixed; inset: 0; z-index: 10002;
  background: radial-gradient(1000px 620px at 50% -12%, #1c2b52 0%, #0d1428 55%, #070b18 98%);
  color: #eaf6ff; font-size: 15px; letter-spacing: .02em;
  display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center;
}
#checkoutWait .spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(125, 211, 252, .25); border-top-color: #7dd3fc;
  animation: checkoutSpin .8s linear infinite;
}
@keyframes checkoutSpin { to { transform: rotate(360deg); } }

/* ---- Auth dialog in the game-mode look (2026-09-05) ----
   Game mode is the face of the app, so the account popups use its aesthetic:
   the deep blue radial backdrop, frosted cyan-bordered card, pill mode tabs
   and the chunky gradient CTA with its drop-shadow "pedestal". Applied to
   the auth (sign in / sign up) dialog; the upgrade + profile dialogs share
   the same card + backdrop treatment for consistency. */
#authOverlay {
  background: radial-gradient(1000px 620px at 50% -12%, #1c2b52 0%, #0d1428 55%, #070b18 98%);
  color: #eaf6ff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
#authOverlay .dialog {
  max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1.5px solid rgba(148, 197, 255, .28);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 26px 70px rgba(3, 10, 25, .65);
}
#authOverlay .dialog-head h2 {
  font-size: 20px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(90deg, #7dd3fc, #eaf6ff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#authOverlay #authClose {
  background: rgba(255,255,255,.07); color: #9fc8ea;
  border: 1px solid rgba(148, 197, 255, .25); border-radius: 10px;
  padding: 4px 10px; font-size: 12px; font-weight: 800;
}
#authOverlay #authClose:hover { background: rgba(125, 211, 252, .16); color: #fff; }
#authOverlay .auth-mode-row {
  background: rgba(255,255,255,.05); border: 1px solid rgba(148, 197, 255, .2);
  border-radius: 999px; padding: 4px;
}
#authOverlay .auth-mode-btn { color: #8fb7d8; border-radius: 999px; }
#authOverlay .auth-mode-btn:hover { color: #d6ecff; }
#authOverlay .auth-mode-btn.sel {
  background: linear-gradient(180deg, #7dd3fc, #38bdf8 55%, #0ea5e9);
  color: #06121f;
}
#authOverlay .auth-label { color: #8fb7d8; }
#authOverlay .auth-input {
  background: rgba(7, 13, 27, .62); color: #eaf6ff;
  border: 1px solid rgba(148, 197, 255, .22); border-radius: 10px;
  padding: 10px 12px; font-size: 14px;
}
#authOverlay .auth-input::placeholder { color: #56749a; }
#authOverlay .auth-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}
#authOverlay .auth-submit {
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #7dd3fc, #38bdf8 55%, #0ea5e9);
  color: #06121f;
  box-shadow: 0 5px 0 #0369a1;
  font-weight: 800; letter-spacing: .04em;
  padding: 12px; font-size: 15px; margin-top: 4px;
}
#authOverlay .auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 #0369a1; }
#authOverlay .auth-submit:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #0369a1; }
#authOverlay .auth-submit:disabled { filter: grayscale(.85) brightness(.6); cursor: not-allowed; box-shadow: 0 5px 0 #123; }
#authOverlay .auth-link { color: #8fb7d8; }
#authOverlay .auth-link:hover { color: #7dd3fc; }
#authOverlay .auth-error { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); color: #ffd9dd; border-radius: 10px; }
#authOverlay .auth-info { background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .35); color: #d4efff; border-radius: 10px; }
#authOverlay .auth-note { color: #9fb8d8; }
#authOverlay .auth-foot { color: #6f8db0; }

/* ---- Upgrade + membership dialogs: full game-mode theme (2026-09-05) ----
   The account popups (upgrade prompt, and the profile/settings dialog that
   hosts the membership card, users, coach/style pickers, practice stats)
   use the shell's palette end to end — backdrop, card, buttons, chips,
   inputs, status tints. Same language as the auth dialog above. */

#upgradeOverlay,
#profileOverlay {
  background: radial-gradient(1000px 620px at 50% -12%, #1c2b52 0%, #0d1428 55%, #070b18 98%);
  color: #eaf6ff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
#upgradeOverlay .dialog,
#profileOverlay .dialog {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1.5px solid rgba(148, 197, 255, .28);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(3, 10, 25, .65);
}
#upgradeOverlay .dialog h2,
#profileOverlay .dialog h2 {
  font-size: 20px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(90deg, #7dd3fc, #eaf6ff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#upgradeOverlay .muted,
#profileOverlay .muted { color: #8fb7d8; }
#upgradeOverlay .dialog code,
#profileOverlay .dialog code { background: rgba(255,255,255,.07); color: #9fd8ff; }
#upgradeOverlay .settings-row,
#profileOverlay .settings-row { border-top-color: rgba(148, 197, 255, .14); }
#upgradeOverlay label,
#profileOverlay label { color: #d6ecff; }
#upgradeOverlay .switch span,
#profileOverlay .switch span { color: #d6ecff; }

/* buttons — game ghost / primary / mini */
#upgradeOverlay .btn,
#profileOverlay .btn {
  font-family: inherit; cursor: pointer; border: 1px solid rgba(148, 197, 255, .25);
  background: rgba(255,255,255,.07); color: #cfe8ff; border-radius: 10px;
  font-weight: 700; padding: 8px 15px; font-size: 13px;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
#upgradeOverlay .btn:hover:not(:disabled),
#profileOverlay .btn:hover:not(:disabled) { background: rgba(125, 211, 252, .14); color: #fff; border-color: rgba(125, 211, 252, .5); }
#upgradeOverlay .btn.primary,
#profileOverlay .btn.primary {
  border: 0; background: linear-gradient(180deg, #7dd3fc, #38bdf8 55%, #0ea5e9); color: #06121f;
  box-shadow: 0 4px 0 #0369a1; letter-spacing: .03em;
}
#upgradeOverlay .btn.primary:hover:not(:disabled),
#profileOverlay .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 #0369a1; }
#upgradeOverlay .btn.primary:active:not(:disabled),
#profileOverlay .btn.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #0369a1; }
#upgradeOverlay .btn.mini,
#profileOverlay .btn.mini { padding: 5px 11px; font-size: 11.5px; border-radius: 8px; }
#upgradeOverlay .btn:disabled,
#profileOverlay .btn:disabled { cursor: not-allowed; opacity: .55; }
#upgradeOverlay .switch input,
#profileOverlay .switch input { accent-color: #38bdf8; }

/* inputs + selects */
#upgradeOverlay input[type=text], #upgradeOverlay input[type=password],
#profileOverlay input[type=text], #profileOverlay input[type=password],
#profileOverlay select {
  background: rgba(7, 13, 27, .62); color: #eaf6ff;
  border: 1px solid rgba(148, 197, 255, .22); border-radius: 10px;
  padding: 8px 11px; font-size: 13.5px; font-family: inherit;
}
#upgradeOverlay input:focus,
#profileOverlay input:focus,
#profileOverlay select:focus {
  outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

/* upgrade prompt */
#upgradeOverlay .upgrade-copy { color: #cfe8ff; }
#upgradeOverlay .upgrade-pill {
  background: rgba(255,255,255,.07); border: 1px solid rgba(148, 197, 255, .25); color: #cfe8ff;
}
#upgradeOverlay .upgrade-pill.accent {
  color: #fbbf24; border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1);
}
#upgradeOverlay .intro-badge,
#profileOverlay .intro-badge {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  border: 0; color: #1a1205;
}

/* users */
#profileOverlay .user-row {
  background: rgba(255,255,255,.05); border: 1px solid rgba(148, 197, 255, .18);
  border-radius: 12px;
}
#profileOverlay .user-row:hover { border-color: #38bdf8; }
#profileOverlay .user-row.active { border-color: #38bdf8; box-shadow: 0 0 0 1px #38bdf8, 0 0 14px rgba(56, 189, 248, .25); }
#profileOverlay .user-row .u-name { color: #eaf6ff; }
#profileOverlay .user-row .u-meta { color: #8fb7d8; }
#profileOverlay .user-row .u-del { color: #6f8db0; }
#profileOverlay .user-row .u-del:hover { color: #f87171; background: rgba(248, 113, 113, .14); }

/* practice stats */
#profileOverlay .practice-stats {
  background: rgba(255,255,255,.05); border: 1px solid rgba(148, 197, 255, .18);
  border-radius: 12px;
}
#profileOverlay .ps-level { color: #7dd3fc; }
#profileOverlay .ps-xp-bar { background: rgba(7, 13, 27, .6); }
#profileOverlay .ps-time, #profileOverlay .ps-streak, #profileOverlay .ps-goal { color: #8fb7d8; }

/* membership card */
#profileOverlay .membership-card {
  border: 1px solid rgba(148, 197, 255, .25); border-radius: 14px;
  background: linear-gradient(135deg, rgba(244, 114, 182, .10), rgba(56, 189, 248, .08));
}
#profileOverlay .membership-title { color: #eaf6ff; }
#profileOverlay .membership-copy { color: #cfe8ff; }

/* account status tints */
#profileOverlay .account-status { border-radius: 10px; border-color: rgba(148, 197, 255, .25); }
#profileOverlay .account-status.neutral { background: rgba(122, 132, 153, .14); border-color: rgba(148, 163, 184, .3); color: #c6cedd; }
#profileOverlay .account-status.info { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .32); color: #cfeeff; }
#profileOverlay .account-status.success { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .32); color: #d9ffe5; }
#profileOverlay .account-status.warn { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .32); color: #ffe9bd; }
#profileOverlay .account-status.error { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .32); color: #ffd9dd; }

/* coach + style pickers */
#profileOverlay .coach-opt {
  background: rgba(255,255,255,.05); border-color: rgba(148, 197, 255, .2); color: #eaf6ff;
}
#profileOverlay .coach-opt.sel {
  border-color: var(--cc, #f472b6);
  background: color-mix(in srgb, var(--cc, #f472b6) 18%, rgba(255,255,255,.05));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc, #f472b6) 32%, transparent);
}
#profileOverlay .style-chip {
  background: rgba(255,255,255,.05); border-color: rgba(148, 197, 255, .2); color: #d6ecff;
}
#profileOverlay .style-chip.sel {
  border-color: var(--sc, #38bdf8);
  background: color-mix(in srgb, var(--sc, #38bdf8) 20%, rgba(255,255,255,.05));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, #38bdf8) 30%, transparent);
  color: #fff;
}
#profileOverlay .style-chip.locked { opacity: .45; }

/* drum controls */
#profileOverlay .dr-label { color: #8fb7d8; }
#profileOverlay .dr-pad { color: #d6ecff; }