/* =================================================================
   NEON·BACK — cyberpunk glassmorphic N-back
   Palette: violet-black bg · neon yellow / pink / turquoise / green
   ================================================================= */

:root{
  /* core palette */
  --bg-0:#050010;
  --bg-1:#0a0420;
  --bg-2:#0d0628;
  --ink:#eaf6ff;
  --ink-dim:#9fb2d8;
  --ink-faint:#5b6b94;

  /* neon streams */
  --yellow:#FFE600;
  --pink:#FF2D95;
  --turq:#2DE2E6;
  --green:#39FF14;
  --magenta:#B026FF;
  --orange:#FF6B00;

  /* stream semantics (used by js too) */
  --c-pos:var(--turq);
  --c-letter:var(--yellow);
  --c-color:var(--pink);
  --c-shape:var(--green);

  --glass-bg:rgba(20,12,46,.42);
  --glass-bg-2:rgba(28,16,62,.55);
  --glass-border:rgba(140,120,255,.22);
  --glass-hi:rgba(255,255,255,.08);

  --shadow-deep:0 24px 60px -20px rgba(0,0,0,.85);
  --glow-pink:0 0 18px rgba(255,45,149,.6);
  --glow-turq:0 0 18px rgba(45,226,230,.6);
  --glow-green:0 0 18px rgba(57,255,20,.6);
  --glow-yellow:0 0 18px rgba(255,230,0,.6);

  --radius:18px;
  --radius-lg:26px;

  --font-display:'Orbitron',system-ui,sans-serif;
  --font-mono:'Share Tech Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-mono);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(176,38,255,.20), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(45,226,230,.14), transparent 60%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 50%,var(--bg-2));
  min-height:100dvh;
  overflow-x:hidden;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

/* ===== atmosphere ===== */
.atmosphere{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.atmo-grid{
  position:absolute;inset:-50%;
  background-image:
    linear-gradient(rgba(120,90,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,90,255,.07) 1px,transparent 1px);
  background-size:48px 48px;
  transform:perspective(600px) rotateX(60deg);
  animation:gridScroll 14s linear infinite;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);
}
@keyframes gridScroll{from{background-position:0 0}to{background-position:0 48px}}

.atmo-scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}
.atmo-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%);
}
.atmo-orbs .orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  mix-blend-mode:screen;animation:orbDrift 18s ease-in-out infinite alternate;
}
.orb--pink{width:420px;height:420px;background:var(--pink);top:-120px;left:-80px}
.orb--turq{width:380px;height:380px;background:var(--turq);bottom:-100px;right:-60px;animation-delay:-4s}
.orb--green{width:260px;height:260px;background:var(--green);top:40%;left:55%;animation-delay:-8s;opacity:.22}
.orb--yellow{width:240px;height:240px;background:var(--yellow);top:10%;right:20%;animation-delay:-12s;opacity:.25}
@keyframes orbDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,-30px) scale(1.15)}
}

/* ===== topbar ===== */
.topbar{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand__logo{
  font-family:var(--font-display);font-weight:900;color:var(--green);
  text-shadow:var(--glow-green);letter-spacing:-2px;
}
.brand__name{
  font-family:var(--font-display);font-weight:900;font-size:1.35rem;
  letter-spacing:.18em;color:var(--ink);
}
.brand__tag{
  font-size:.66rem;color:var(--ink-faint);letter-spacing:.3em;
  border-left:1px solid var(--glass-border);padding-left:14px;
}
.topbar__actions{display:flex;gap:10px}
.iconbtn{
  width:42px;height:42px;border-radius:12px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  cursor:pointer;transition:all .2s;backdrop-filter:blur(12px);
}
.iconbtn:hover{color:var(--yellow);border-color:var(--yellow);box-shadow:var(--glow-yellow);transform:translateY(-2px)}

/* ===== glitch text ===== */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  overflow:hidden;clip-path:inset(0 0 0 0);
}
.glitch::before{color:var(--pink);animation:glitchA 4s infinite steps(2,end);text-shadow:-1px 0 var(--pink)}
.glitch::after{color:var(--turq);animation:glitchB 4s infinite steps(2,end);text-shadow:1px 0 var(--turq)}
@keyframes glitchA{
  0%,92%,100%{transform:translate(0,0);clip-path:inset(0 0 100% 0)}
  93%{transform:translate(-2px,1px);clip-path:inset(0 0 30% 0)}
  96%{transform:translate(2px,-1px);clip-path:inset(50% 0 20% 0)}
}
@keyframes glitchB{
  0%,90%,100%{transform:translate(0,0);clip-path:inset(100% 0 0 0)}
  94%{transform:translate(2px,1px);clip-path:inset(20% 0 40% 0)}
  97%{transform:translate(-2px,-1px);clip-path:inset(40% 0 10% 0)}
}

/* ===== screens ===== */
.screen{position:relative;z-index:2;display:none;animation:screenIn .5s ease both}
.screen.is-active{display:block}
#screenGame.is-active{display:flex;flex-direction:column}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== glass panel base ===== */
.panel{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:var(--shadow-deep),inset 0 1px 0 var(--glass-hi);
  position:relative;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 40%);
}

/* ===== MENU ===== */
.screen--menu{
  max-width:1080px;margin:0 auto;padding:8px 24px 60px;
  display:grid;gap:22px;
}
.panel--hero{padding:42px 36px 34px;text-align:center}
.hero-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.6rem,7vw,4.8rem);letter-spacing:.14em;
  background:linear-gradient(90deg,var(--yellow),var(--pink) 40%,var(--turq) 75%,var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,45,149,.35));
  line-height:1;
}
.hero-sub{
  margin:18px auto 30px;max-width:680px;color:var(--ink-dim);
  font-size:1rem;line-height:1.7;
}
.hero-sub b{color:var(--yellow)}
.hl{font-weight:700}
.hl--pink{color:var(--pink)}

.mode-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode-card{
  cursor:pointer;text-align:center;padding:24px 18px;border-radius:var(--radius);
  background:var(--glass-bg-2);border:1px solid var(--glass-border);
  color:var(--ink);font-family:inherit;transition:all .25s;position:relative;overflow:hidden;
}
.mode-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,45,149,.18),transparent 70%);
}
.mode-card:hover{transform:translateY(-4px);border-color:var(--pink)}
.mode-card:hover::after{opacity:1}
.mode-card.is-selected{
  border-color:var(--green);box-shadow:var(--glow-green),inset 0 0 0 1px var(--green);
}
.mode-card.is-featured::before{
  content:"RECOMMENDED";position:absolute;top:10px;right:-32px;transform:rotate(35deg);
  background:var(--pink);color:#0a0420;font-family:var(--font-display);
  font-size:.55rem;font-weight:900;letter-spacing:.15em;padding:3px 36px;
  box-shadow:var(--glow-pink);
}
.mode-card__badge{
  font-family:var(--font-display);font-weight:900;font-size:1.4rem;color:var(--turq);
  text-shadow:var(--glow-turq);
}
.mode-card__badge span{display:block;font-size:.55rem;letter-spacing:.3em;color:var(--ink-faint);text-shadow:none;margin-top:2px}
.mode-card__name{font-family:var(--font-display);font-weight:900;font-size:1.9rem;margin:8px 0 4px;letter-spacing:.1em}
.mode-card__streams{font-size:.78rem;color:var(--ink-dim);margin-bottom:12px}
.mode-card__streams b{color:var(--pink)}
.mode-card__keys{display:flex;gap:6px;justify-content:center}

kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;
  font-family:var(--font-mono);font-size:.8rem;color:var(--yellow);
  background:rgba(255,230,0,.08);border:1px solid rgba(255,230,0,.35);
  border-radius:7px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4);
}

/* settings */
.panel--settings{padding:26px 30px 30px}
.panel__h{
  font-family:var(--font-display);font-size:.8rem;letter-spacing:.3em;
  color:var(--ink-dim);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot--yellow{background:var(--yellow);box-shadow:var(--glow-yellow)}
.dot--green{background:var(--green);box-shadow:var(--glow-green)}
.dot--pink{background:var(--pink);box-shadow:var(--glow-pink)}

.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.setting{display:flex;flex-direction:column;gap:10px}
.setting__label{font-size:.7rem;letter-spacing:.18em;color:var(--ink-dim)}
.setting__hint{display:block;font-size:.62rem;color:var(--ink-faint);letter-spacing:.05em;margin-top:2px}
.stepper{display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:rgba(0,0,0,.28);border:1px solid var(--glass-border);border-radius:12px;padding:10px 14px}
.stepper__btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);color:var(--turq);font-family:var(--font-display);
  font-weight:700;font-size:1.2rem;cursor:pointer;transition:all .15s;
}
.stepper__btn:hover{background:rgba(45,226,230,.15);border-color:var(--turq);box-shadow:var(--glow-turq)}
.stepper__val{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--yellow);min-width:60px;text-align:center}

.toggles{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.toggle{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:.85rem;color:var(--ink-dim)}
.toggle input{display:none}
.toggle__track{
  width:46px;height:26px;border-radius:13px;background:rgba(0,0,0,.4);
  border:1px solid var(--glass-border);position:relative;transition:all .2s;flex-shrink:0;
}
.toggle__knob{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--ink-faint);transition:all .25s cubic-bezier(.5,1.6,.5,1);
}
.toggle input:checked + .toggle__track{background:rgba(57,255,20,.18);border-color:var(--green)}
.toggle input:checked + .toggle__track .toggle__knob{left:22px;background:var(--green);box-shadow:var(--glow-green)}
.toggle__text b{color:var(--ink)}

.coach-level{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:60px}
.coach-level__label{font-size:.7rem;color:var(--ink-faint);letter-spacing:.15em}
.seg{cursor:pointer}
.seg input{display:none}
.seg span{
  display:inline-block;padding:5px 14px;font-size:.72rem;letter-spacing:.15em;
  border:1px solid var(--glass-border);border-radius:8px;color:var(--ink-dim);transition:all .15s;
}
.seg input:checked + span{background:var(--pink);color:#0a0420;border-color:var(--pink);box-shadow:var(--glow-pink);font-weight:700}

.big-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.best-line{margin-top:14px;font-size:.78rem;color:var(--ink-faint)}
.best-line b{color:var(--green)}

/* buttons */
.btn{
  font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
  border-radius:12px;cursor:pointer;border:1px solid var(--glass-border);
  padding:12px 22px;font-size:.85rem;color:var(--ink);
  background:var(--glass-bg-2);transition:all .2s;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:7px 12px;font-size:.7rem;border-radius:9px}
.btn--xl{padding:16px 38px;font-size:1rem}
.btn--primary{
  background:linear-gradient(95deg,var(--pink),var(--magenta));
  border:none;color:#fff;box-shadow:0 6px 22px -4px rgba(255,45,149,.55);
}
.btn--primary:hover{box-shadow:0 10px 30px -4px rgba(255,45,149,.7)}
.btn--ghost{background:rgba(255,255,255,.03)}
.btn--ghost:hover{border-color:var(--turq);color:var(--turq);box-shadow:var(--glow-turq)}
.btn__glitch{position:relative;display:inline-block}

/* keymap */
.panel--keys{padding:22px 30px}
.keymap{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px}
.keymap li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-dim)}
.keymap kbd{font-size:.72rem}

/* =================================================================
   GAME SCREEN
   ================================================================= */
.hud{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:14px 24px;background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius);backdrop-filter:blur(20px);margin:0 24px 18px;
  box-shadow:var(--shadow-deep);
}
.hud__left,.hud__right{display:flex;align-items:center;gap:12px}
.hud__right{justify-content:flex-end}
.hud__badge{
  font-family:var(--font-display);font-weight:900;letter-spacing:.18em;font-size:.85rem;
  padding:8px 16px;border-radius:10px;
  background:linear-gradient(95deg,rgba(45,226,230,.18),rgba(176,38,255,.18));
  border:1px solid var(--turq);color:var(--turq);text-shadow:var(--glow-turq);
}
.hud__center{min-width:240px}
.progress__bar{height:8px;border-radius:5px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid var(--glass-border)}
.progress__fill{
  height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--green),var(--turq),var(--yellow),var(--pink));
  background-size:200% 100%;animation:fillShift 3s linear infinite;transition:width .3s ease;
}
@keyframes fillShift{to{background-position:200% 0}}
.progress__text{text-align:center;font-size:.7rem;color:var(--ink-faint);margin-top:4px;letter-spacing:.15em}
.progress__text span{color:var(--yellow);font-weight:700}
.hud__timer{
  font-family:var(--font-display);font-weight:900;font-size:1.4rem;color:var(--green);
  min-width:60px;text-align:right;text-shadow:var(--glow-green);
}
.coach-state{color:var(--pink);font-weight:700}

.play-area{display:flex;flex-direction:column;gap:18px;padding:0 24px 24px;flex:1}

/* ROW: grid (left) + coach hugging its right edge, both vertically centered */
.play-row{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.play-main{display:flex;flex-direction:column;gap:22px;align-items:center}

/* coach now sits as a sibling of play-main, raised to grid's vertical center */
.coach{
  align-self:stretch;
  display:flex;flex-direction:column;
  width:300px;flex-shrink:0;
}

/* grid */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  width:min(58vh,520px);aspect-ratio:1;flex-shrink:0;
  padding:18px;border-radius:var(--radius-lg);
  background:rgba(0,0,0,.35);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-deep),inset 0 0 60px rgba(176,38,255,.1);
  position:relative;
}
.grid::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 30%);
}
.cell{
  aspect-ratio:1;          /* force every cell to a fixed square */
  border-radius:14px;
  background:rgba(10,6,28,.55);border:1px solid rgba(140,120,255,.14);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,4.2vh,2.8rem);
  position:relative;transition:box-shadow .2s,border-color .2s,background .2s;
  backdrop-filter:blur(8px);overflow:hidden;min-width:0;
}
.cell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at 50% 40%,var(--cellColor,transparent),transparent 70%);
}
/* glyph: base is invisible, shown only in active/ghost states */
.cell .glyph{opacity:0;transition:opacity .25s ease,color .25s ease;pointer-events:none}
/* active states — glow only (inset/outer, no border-size or scale change) */
.cell.is-active{
  border-color:var(--cellColor,var(--turq));
  box-shadow:0 0 24px var(--cellColor,var(--turq)),
             inset 0 0 30px color-mix(in srgb,var(--cellColor,var(--turq)) 35%,transparent);
}
.cell.is-active::after{opacity:.5}
.cell.is-active .glyph{opacity:1;color:var(--cellColor,var(--ink))}

/* flash feedback for match/miss at trial end */
.cell.is-hit{animation:cellHit .5s ease}
.cell.is-miss{animation:cellMiss .5s ease}
@keyframes cellHit{0%,100%{filter:none}50%{filter:brightness(1.6) saturate(1.5)}}
@keyframes cellMiss{0%,100%{filter:none}50%{filter:hue-rotate(-30deg) brightness(.7)}}

/* GHOST TRAIL — faded echo that lingers the full duration of the following trial.
   No exit animation: it holds steady until the JS clears it when the next-next
   trial begins, so you always see the previous stimulus for a whole trial cycle. */
.cell.is-ghost{
  border-color:color-mix(in srgb,var(--cellColor,var(--turq)) 45%,transparent);
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--cellColor,var(--turq)) 14%,transparent);
  background:color-mix(in srgb,var(--cellColor,var(--turq)) 7%,rgba(10,6,28,.55));
}
.cell.is-ghost .glyph{
  opacity:.32;
  color:color-mix(in srgb,var(--cellColor,var(--turq)) 75%,var(--ink-dim));
  filter:blur(.4px);
}

/* respond keys */
.respond{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.resp{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:120px;padding:12px 18px;border-radius:14px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
  border:1px solid var(--glass-border);background:rgba(0,0,0,.35);color:var(--ink);
  transition:all .15s;position:relative;overflow:hidden;
}
.resp[hidden]{display:none}
.resp kbd{margin-bottom:2px}
.resp span{font-size:.75rem;color:var(--ink-dim)}
.resp--pos{--rc:var(--c-pos)} .resp--letter{--rc:var(--c-letter)}
.resp--color{--rc:var(--c-color)} .resp--shape{--rc:var(--c-shape)}
.resp:hover{border-color:var(--rc);box-shadow:0 0 18px color-mix(in srgb,var(--rc) 40%,transparent)}
.resp:active{transform:scale(.95)}
.resp.is-pressed{
  border-color:var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent);
  box-shadow:0 0 22px var(--rc);transform:scale(.97);
}
.resp.is-pressed kbd,.resp.is-pressed span{color:var(--rc)}
.resp.is-correct{animation:respCorrect .6s ease}
.resp.is-wrong{animation:respWrong .6s ease}
@keyframes respCorrect{0%{box-shadow:0 0 0 var(--rc)}50%{box-shadow:0 0 40px var(--green)}100%{box-shadow:0 0 22px var(--rc)}}
@keyframes respWrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* highlight when coach suggests a key */
.resp.is-coached{
  border-color:var(--pink);
  animation:coachPulse 1s ease-in-out infinite;
}
@keyframes coachPulse{
  0%,100%{box-shadow:0 0 6px var(--pink)}
  50%{box-shadow:0 0 26px var(--pink)}
}

/* coach panel */
.coach{
  background:linear-gradient(160deg,rgba(255,45,149,.12),rgba(20,12,46,.55));
  border:1px solid rgba(255,45,149,.4);border-radius:var(--radius-lg);
  padding:20px;backdrop-filter:blur(20px);
  box-shadow:var(--shadow-deep),0 0 30px -8px rgba(255,45,149,.4);
  position:relative;overflow:hidden;min-height:240px;
}
.coach::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--magenta),var(--turq));
}
.coach.is-off{opacity:.55;filter:saturate(.4)}
.coach__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.coach__avatar{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  background:linear-gradient(135deg,var(--pink),var(--magenta));color:#fff;
  box-shadow:var(--glow-pink);
}
.coach__name{font-family:var(--font-display);font-weight:900;font-size:.8rem;letter-spacing:.15em;color:var(--ink)}
.coach__status{font-size:.66rem;color:var(--ink-faint);letter-spacing:.1em;margin-top:2px}
.coach__live{
  width:9px;height:9px;border-radius:50%;background:var(--green);margin-left:auto;
  box-shadow:var(--glow-green);animation:liveBlink 1.4s ease-in-out infinite;
}
.coach.is-off .coach__live{background:var(--ink-faint);box-shadow:none;animation:none}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.3}}

.coach__body{min-height:120px;display:flex;flex-direction:column;gap:8px}
.coach__line{
  font-size:.92rem;line-height:1.5;color:var(--ink);
  padding:10px 12px;border-radius:10px;
  background:rgba(0,0,0,.28);border-left:3px solid var(--pink);
  animation:coachSlide .35s ease both;
}
.coach__line--muted{color:var(--ink-faint);border-color:var(--ink-faint);font-style:italic}
.coach__line--press{border-color:var(--green);color:var(--green);font-weight:700}
.coach__line--hold{border-color:var(--turq);color:var(--turq)}
.coach__line kbd{font-size:.75rem}

/* memory chain inside a coach line */
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.12);font-size:.72rem;line-height:1.4}
.chain-step{padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.3);color:var(--ink-dim);white-space:nowrap}
.chain-step--now{background:rgba(255,230,0,.16);color:var(--yellow);font-weight:700;border:1px solid rgba(255,230,0,.4)}
.chain-arrow{color:var(--ink-faint);font-size:.7rem;padding:0 1px}
@keyframes coachSlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

.coach__hints{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.coach-hint{
  display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--ink-dim);
  padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.2);
  animation:coachSlide .4s ease both;
}
.coach-hint b{color:var(--hintColor,var(--ink));font-family:var(--font-display)}
.coach-hint .swatch{width:10px;height:10px;border-radius:3px;background:var(--hintColor,var(--turq));box-shadow:0 0 8px var(--hintColor,var(--turq))}

/* tally — full-width horizontal strip below the play row */
.tally{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:14px 20px;backdrop-filter:blur(18px)}
.tally__h{font-family:var(--font-display);font-size:.7rem;letter-spacing:.25em;color:var(--ink-dim);margin-bottom:10px}
.tally__rows{display:flex;flex-direction:row;gap:18px;flex-wrap:wrap}
.tally-row{display:grid;grid-template-columns:auto min(220px,22vw) auto;gap:10px;align-items:center;font-size:.74rem;flex:1;min-width:240px}
.tally-row__name{display:flex;align-items:center;gap:6px;color:var(--ink-dim);min-width:78px}
.tally-row__name .swatch{width:8px;height:8px;border-radius:2px}
.tally-row__bar{height:6px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden}
.tally-row__bar span{display:block;height:100%;width:0;background:var(--tc,var(--turq));transition:width .4s ease;box-shadow:0 0 8px var(--tc,var(--turq))}
.tally-row__count{color:var(--ink-faint);font-size:.7rem;min-width:54px;text-align:right}
.tally-row__count b{color:var(--green)}
.tally-row__count i{color:var(--pink);font-style:normal}

/* overlays */
.overlay{
  position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%,rgba(10,4,32,.85),rgba(0,0,0,.92));
  backdrop-filter:blur(8px);
}
.overlay.is-active{display:flex;animation:overlayIn .3s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

.countdown-num{
  font-family:var(--font-display);font-weight:900;font-size:14rem;line-height:1;
  background:linear-gradient(180deg,var(--yellow),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,45,149,.6));
  animation:countPunch .9s ease;
}
@keyframes countPunch{0%{transform:scale(.2);opacity:0;filter:blur(20px)}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.countdown-sub{font-family:var(--font-display);letter-spacing:.4em;color:var(--turq);text-shadow:var(--glow-turq);text-align:center;margin-top:-12px}

.overlay--pause .pause-card{
  background:var(--glass-bg-2);border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  padding:40px 50px;text-align:center;backdrop-filter:blur(24px);box-shadow:var(--shadow-deep);
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.overlay--pause h2{font-family:var(--font-display);font-size:2rem;letter-spacing:.2em;color:var(--yellow)}
.overlay--pause p{color:var(--ink-dim)}

/* =================================================================
   RESULTS
   ================================================================= */
.screen--results{max-width:760px;margin:0 auto;padding:40px 24px}
.panel--results{padding:40px 36px;text-align:center}
.result-title{
  font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:.14em;background:linear-gradient(90deg,var(--green),var(--turq));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(57,255,20,.4));
}
.result-sub{color:var(--ink-dim);margin:8px 0 24px}
.result-grade{
  font-family:var(--font-display);font-weight:900;font-size:5rem;line-height:1;margin:6px 0 18px;
  animation:gradePop .6s cubic-bezier(.4,1.8,.5,1) both;
}
@keyframes gradePop{from{transform:scale(0) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
.result-streams{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.result-stream{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;
  background:rgba(0,0,0,.3);border:1px solid var(--glass-border);border-radius:12px;padding:14px 18px;
}
.result-stream__name{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-dim);min-width:100px}
.result-stream__name .swatch{width:12px;height:12px;border-radius:3px}
.result-stream__meter{height:10px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden}
.result-stream__meter span{display:block;height:100%;background:var(--tc,var(--turq));box-shadow:0 0 10px var(--tc,var(--turq));transition:width 1s cubic-bezier(.4,1.4,.5,1)}
.result-stream__pct{font-family:var(--font-display);font-weight:700;color:var(--tc,var(--turq));min-width:60px;text-align:right}
.result-meta{color:var(--ink-faint);font-size:.8rem;margin:16px 0 24px;line-height:1.7}
.result-meta b{color:var(--yellow)}
.result-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =================================================================
   TUTORIAL
   ================================================================= */
.tut{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px}
.tut.is-active{display:flex}
.tut__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);animation:overlayIn .3s ease}
.tut__card{
  position:relative;max-width:580px;width:100%;
  background:linear-gradient(160deg,rgba(28,16,62,.95),rgba(10,4,32,.95));
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  padding:34px 32px 24px;box-shadow:var(--shadow-deep),0 0 50px -10px rgba(255,45,149,.4);
  animation:cardPop .4s cubic-bezier(.4,1.6,.5,1);
}
@keyframes cardPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.tut__close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:9px;
  background:rgba(0,0,0,.4);border:1px solid var(--glass-border);color:var(--ink-dim);
  font-size:1.4rem;cursor:pointer;transition:all .15s;
}
.tut__close:hover{color:var(--pink);border-color:var(--pink)}
.tut__progress{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
#tutDot{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);transition:all .3s}
#tutDot.is-on{background:var(--pink);box-shadow:var(--glow-pink)}
.tut__stage{min-height:280px;display:flex;flex-direction:column;gap:14px}
.tut__title{font-family:var(--font-display);font-weight:900;font-size:1.4rem;letter-spacing:.1em;color:var(--yellow);text-shadow:var(--glow-yellow)}
.tut__body{color:var(--ink-dim);line-height:1.7;font-size:.95rem}
.tut__body b{color:var(--ink)}
.tut__demo{
  background:rgba(0,0,0,.4);border:1px dashed var(--glass-border);border-radius:12px;
  padding:18px;display:flex;align-items:center;justify-content:center;gap:14px;min-height:90px;
}
.tut__demo .mini-cell{
  width:48px;height:48px;border-radius:9px;border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;
  background:rgba(0,0,0,.4);transition:all .3s;
}
.tut__demo .mini-cell.lit{border-color:var(--turq);box-shadow:var(--glow-turq);background:rgba(45,226,230,.2);color:var(--turq)}
.tut__demo .mini-arrow{color:var(--pink);font-size:1.4rem}
.tut__demo .mini-coach{
  font-size:.78rem;color:var(--green);background:rgba(57,255,20,.1);
  border:1px solid var(--green);border-radius:8px;padding:6px 10px;text-align:center;
}
.tut__foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid var(--glass-border)}
.tut__counter{font-size:.75rem;color:var(--ink-faint);letter-spacing:.2em}

/* toast */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--glass-bg-2);border:1px solid var(--glass-border);
  border-radius:12px;padding:12px 22px;backdrop-filter:blur(20px);
  color:var(--ink);font-size:.85rem;box-shadow:var(--shadow-deep);
  opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.4,1.6,.5,1);z-index:60;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--green)}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1040px){
  /* coach wraps below the grid when there's no room beside it */
  .play-row{flex-direction:column}
  .coach{width:100%;max-width:520px;align-self:center}
  .mode-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .topbar{padding:14px 16px}
  .brand__tag{display:none}
  .mode-cards{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .coach-level{margin-left:0}
  .hud{grid-template-columns:1fr;gap:10px}
  .hud__left,.hud__right{justify-content:center;flex-wrap:wrap}
  .hud__center{min-width:0}
  .grid{width:min(86vw,440px)}
  .countdown-num{font-size:9rem}
  .tally-row{min-width:100%}
}