/* ═══════════════════════════════════════════════
   DOT & DASH v3  |  css/main.css
═══════════════════════════════════════════════ */
:root {
  --bg-deep:#060b1c; --bg-mid:#0b1330; --bg-panel:#0f1840; --bg-card:#152050;
  --teal:#00dfc4; --teal-dim:#009e88; --teal-glow:rgba(0,223,196,.25);
  --yellow:#ffe44f; --orange:#ff7c2a; --purple:#9066f8; --coral:#ff4466;
  --success:#2de88a; --fail:#ff3355; --white:#eef2ff; --muted:#5d7099; --muted-hi:#8a9fd0;
  --font-main:'Nunito',sans-serif; --font-mono:'Space Mono',monospace;
  --r-xs:6px; --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:50px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{font-family:var(--font-main);background:var(--bg-deep);color:var(--white);
  min-height:100vh;overflow-x:hidden;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;}
button{font-family:var(--font-main);cursor:pointer;}
input{font-family:var(--font-main);}

/* ─── STARFIELD ─────────────────────────────── */
#starfield{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.star{position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s);}
@keyframes twinkle{0%,100%{opacity:var(--o1,.15);transform:scale(1);}50%{opacity:var(--o2,.8);transform:scale(1.7);}}

/* ─── SCREENS ───────────────────────────────── */
.screen{position:relative;z-index:1;min-height:100vh;display:none;flex-direction:column;
  align-items:center;padding:18px 16px 90px;max-width:640px;margin:0 auto;}
.screen.active{display:flex;}

/* ─── KEYFRAMES ─────────────────────────────── */
@keyframes fadeUp   {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown {from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes pop      {0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes shake    {0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}60%{transform:translateX(8px)}}
@keyframes bounce   {0%,100%{transform:translateY(0)}45%{transform:translateY(-16px)}}
@keyframes sway     {0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes spin     {to{transform:rotate(360deg)}}
@keyframes ring-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 10px var(--teal-glow)}50%{box-shadow:0 0 30px rgba(0,223,196,.6)}}
@keyframes bar-drain{from{width:100%}to{width:0%}}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg) scale(1);opacity:1}100%{transform:translateY(110vh) rotate(800deg) scale(.4);opacity:0}}
@keyframes levelPop {0%{transform:scale(.8) rotate(-5deg);opacity:0}70%{transform:scale(1.05) rotate(1deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes slideUp  {from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes feedPop  {0%{transform:translateY(0) scale(.8);opacity:0}30%{transform:translateY(-8px) scale(1.1);opacity:1}70%{transform:translateY(-14px) scale(1);opacity:1}100%{transform:translateY(-20px) scale(.95);opacity:0}}
@keyframes streakIn {from{transform:scale(.5) translateX(-50%);opacity:0}60%{transform:scale(1.2) translateX(-50%)}to{transform:scale(1) translateX(-50%);opacity:1}}

/* ════════════════ PROFILES SCREEN ════════════ */
#screen-profiles{justify-content:center;gap:20px;background:radial-gradient(ellipse at 40% 20%,rgba(144,102,248,.12) 0%,transparent 55%);}
.profiles-title{font-size:1.6rem;font-weight:900;text-align:center;}
.profiles-sub{font-size:.9rem;color:var(--muted-hi);text-align:center;}
.profiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;width:100%;}
.profile-select-card{background:var(--bg-card);border:2px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);padding:20px 12px;text-align:center;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;}
.profile-select-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 8px 28px rgba(0,223,196,.2);}
.profile-add{border-style:dashed;opacity:.7;}
.profile-add:hover{opacity:1;}
.psc-avatar{font-size:2.8rem;margin-bottom:8px;}
.psc-name{font-size:1rem;font-weight:800;}
.psc-rank{font-size:.72rem;font-weight:800;letter-spacing:1.5px;margin:4px 0;}
.psc-stats{font-size:.75rem;color:var(--muted);}
#profiles-new-form{display:none;flex-direction:column;align-items:center;gap:14px;
  width:100%;background:var(--bg-panel);border-radius:var(--r-lg);padding:20px;}
.new-form-title{font-size:1.1rem;font-weight:800;}
.avatar-picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.avatar-opt{background:var(--bg-card);border:2px solid rgba(255,255,255,.07);
  border-radius:50%;width:48px;height:48px;font-size:1.5rem;
  transition:transform .12s,border-color .12s;}
.avatar-opt.sel{border-color:var(--teal);transform:scale(1.12);}
.new-form-btns{display:flex;gap:10px;width:100%;}

/* ════════════════ HOME ════════════════════════ */
#screen-home{justify-content:center;gap:18px;padding-top:36px;}
#screen-home::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 25% 15%,rgba(0,100,180,.18) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 80%,rgba(0,180,140,.12) 0%,transparent 55%);}
.logo-area{text-align:center;animation:fadeDown .5s ease both;}
.logo-morse{font-family:var(--font-mono);font-size:.82rem;color:var(--teal);letter-spacing:10px;margin-bottom:10px;opacity:.65;}
.logo-title{font-size:clamp(3rem,11vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-2px;
  background:linear-gradient(140deg,var(--yellow) 0%,var(--orange) 45%,var(--teal) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(255,228,79,.3));}
.logo-sub{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:4px;text-transform:uppercase;margin-top:8px;}
.characters-row{display:flex;gap:24px;justify-content:center;align-items:flex-end;animation:fadeUp .5s .15s ease both;}
.char-wrap{text-align:center;}
.char-label{font-size:.62rem;font-weight:900;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.char-svg{width:84px;height:84px;display:block;margin:0 auto;}
.char-dot-anim{animation:bounce 2.2s ease-in-out infinite;}
.char-dash-anim{animation:sway 3s ease-in-out infinite;}
.char-sep{font-size:1.3rem;color:var(--muted);align-self:center;}
.home-profile-strip{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-panel);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);padding:12px 16px;width:100%;
  animation:fadeUp .5s .25s ease both;
}
.home-avatar{font-size:2rem;}
.home-info{flex:1;}
.home-agent-name{font-size:1rem;font-weight:800;}
#home-rank{font-size:.7rem;font-weight:800;letter-spacing:1.5px;}
.stats-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;animation:fadeUp .5s .35s ease both;}
.stat-pill{background:var(--bg-panel);border:1px solid rgba(255,255,255,.06);
  border-radius:50px;padding:7px 14px;display:flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:700;}
.stat-pill .val{color:var(--yellow);}
.home-actions{display:flex;flex-direction:column;gap:10px;width:100%;animation:fadeUp .5s .45s ease both;}
.tagline{font-size:clamp(.85rem,2.8vw,1.1rem);font-weight:700;color:var(--white);text-align:center;
  border:1px solid rgba(0,223,196,.18);border-radius:var(--r-md);padding:12px 20px;
  background:rgba(0,223,196,.04);animation:fadeUp .5s .3s ease both;}

/* ════════════════ BUTTONS ════════════════════ */
.btn-primary{display:block;width:100%;max-width:340px;margin:0 auto;padding:17px 28px;
  font-size:1.12rem;font-weight:800;color:var(--bg-deep);
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  border:none;border-radius:var(--r-xl);box-shadow:0 5px 24px rgba(255,124,42,.4);
  transition:transform .12s,box-shadow .12s;letter-spacing:.5px;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 9px 30px rgba(255,124,42,.55);}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{display:block;width:100%;max-width:340px;margin:0 auto;padding:14px 24px;
  font-size:.98rem;font-weight:700;color:var(--teal);
  background:rgba(0,223,196,.07);border:2px solid rgba(0,223,196,.25);border-radius:var(--r-xl);
  transition:background .12s,border-color .12s;}
.btn-secondary:hover{background:rgba(0,223,196,.14);border-color:var(--teal);}
.btn-secondary:active{transform:scale(.97);}
.btn-ghost{display:block;width:100%;max-width:340px;margin:0 auto;padding:12px 22px;
  font-size:.88rem;font-weight:700;color:var(--muted-hi);
  background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);
  transition:background .12s,color .12s;}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--white);}
.btn-back{background:var(--bg-panel);border:1px solid rgba(255,255,255,.08);
  color:var(--white);border-radius:50%;width:42px;height:42px;font-size:1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s;}
.btn-back:hover{background:var(--bg-card);}

/* ════════════════ SCREEN HEADER ══════════════ */
.screen-header{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.screen-title{font-size:1.25rem;font-weight:800;flex:1;}

/* ════════════════ LEARN SCREEN ═══════════════ */
#screen-learn{gap:16px;padding-top:20px;}
#screen-learn::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%,rgba(0,223,196,.1) 0%,transparent 60%);}
.learn-topbar{width:100%;display:flex;align-items:center;gap:12px;}
.learn-badge{font-size:.72rem;font-weight:900;letter-spacing:2px;padding:6px 14px;
  border-radius:50px;background:rgba(0,223,196,.12);color:var(--teal);
  border:1px solid rgba(0,223,196,.3);}
.learn-level-name{flex:1;font-size:.9rem;font-weight:800;color:var(--muted-hi);}
.learn-letters-wrap{width:100%;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.learn-letter-block{
  flex:1;min-width:130px;max-width:220px;
  background:var(--bg-panel);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:22px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.learn-big-letter{font-family:var(--font-mono);font-size:clamp(3.5rem,14vw,6rem);
  font-weight:700;color:var(--teal);line-height:1;
  text-shadow:0 0 40px rgba(0,223,196,.4);}
.learn-morse-txt{font-family:var(--font-mono);font-size:1.1rem;color:var(--muted-hi);letter-spacing:8px;}
.learn-mnemonic{font-size:.8rem;font-weight:700;color:var(--muted);text-align:center;
  background:rgba(255,255,255,.04);border-radius:var(--r-sm);padding:6px 10px;}
.learn-morse-dots{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:24px;}
.learn-controls{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.learn-plays-left{font-size:.9rem;font-weight:800;color:var(--teal);text-align:center;}
.learn-tap-hint{font-size:.8rem;color:var(--muted);text-align:center;display:none;}
.learn-tip{font-size:.8rem;color:var(--muted);text-align:center;
  background:var(--bg-panel);border-radius:var(--r-sm);padding:10px 14px;width:100%;}

/* ─── LEARN: SOUND-WORD SYLLABLE SYNC ────────
   The CORE pedagogical moment: syllable blocks
   pulse IN SYNC with each dot/dash sound.
   DAH = tall warm orange block
   DI  = small cool teal block
─────────────────────────────────────────────*/
.learn-sound-word{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:rgba(255,228,79,.05);border:1px solid rgba(255,228,79,.22);
  border-radius:var(--r-md);padding:12px 14px;width:100%;
}
.sound-word-label{
  font-size:.62rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:var(--yellow);
}
.sound-word-syllables{
  display:flex;gap:7px;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  min-height:50px;/* reserve space so layout doesn't jump */
}
.syl-block.syl-dah{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:48px;padding:0 6px;
  background:rgba(255,124,42,.13);border:2px solid rgba(255,124,42,.3);
  border-radius:var(--r-sm);
  font-family:var(--font-main);font-size:1rem;font-weight:900;
  color:var(--orange);transition:all .07s ease;white-space:nowrap;
}
.syl-block.syl-di{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:32px;padding:0 5px;
  background:rgba(0,223,196,.08);border:2px solid rgba(0,223,196,.2);
  border-radius:var(--r-xs);
  font-family:var(--font-main);font-size:.78rem;font-weight:800;
  color:var(--teal);transition:all .07s ease;white-space:nowrap;
}
/* ACTIVE: the syllable PULSES when that sound plays */
.syl-block.syl-active.syl-dah{
  background:rgba(255,124,42,.5);border-color:var(--orange);
  color:var(--yellow);
  transform:scale(1.35) translateY(-8px);
  box-shadow:0 0 22px rgba(255,124,42,.65);
  font-size:1.1rem;
}
.syl-block.syl-active.syl-di{
  background:rgba(0,223,196,.38);border-color:var(--teal);
  color:var(--white);
  transform:scale(1.25) translateY(-5px);
  box-shadow:0 0 16px rgba(0,223,196,.55);
}
.syl-block.syl-done{ opacity:.38; transform:none; box-shadow:none; }
.sound-word-hint{
  font-size:.72rem;font-weight:700;color:var(--muted-hi);
  text-align:center;font-style:italic;
}

/* Learn letter block: highlight which one is playing */
.learn-letter-block{ transition:border-color .2s,box-shadow .2s,transform .2s; }
.learn-letter-block.llb-playing{
  border-color:rgba(0,223,196,.55)!important;
  box-shadow:0 0 28px rgba(0,223,196,.2);
  transform:scale(1.02);
}

/* ─── GAME: MNEMONIC HINT ────────────────────
   Appears after morse plays; bridge sound→word
─────────────────────────────────────────────*/
#g-mnemonic-hint{
  font-size:.82rem;font-weight:800;color:var(--yellow);text-align:center;
  opacity:0;transition:opacity .5s ease;min-height:24px;
  font-style:italic;letter-spacing:.3px;
}

/* ════════════════ LEVEL SELECT ════════════════ */
.levels-intro{width:100%;background:linear-gradient(135deg,rgba(0,223,196,.08),rgba(144,102,248,.06));
  border:1px solid rgba(0,223,196,.15);border-radius:var(--r-md);padding:13px 16px;
  font-size:.85rem;line-height:1.65;color:var(--muted-hi);}
.levels-intro strong{color:var(--teal);}
.rank-section{width:100%;}
.rank-header{display:flex;align-items:center;gap:9px;font-size:.66rem;font-weight:900;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;margin-top:14px;}
.rank-header::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05);}
.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;margin-bottom:4px;}
.level-card{background:var(--bg-card);border:2px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);padding:12px 8px 10px;cursor:pointer;text-align:center;
  position:relative;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s;
  animation:fadeIn .3s ease both;}
.level-card:hover:not(.locked){transform:translateY(-4px);border-color:rgba(0,223,196,.5);box-shadow:0 8px 24px rgba(0,223,196,.15);}
.level-card.locked{opacity:.35;cursor:not-allowed;}
.level-card.current{border-color:var(--yellow);box-shadow:0 0 18px rgba(255,228,79,.2);}
.level-card.done{border-color:rgba(45,232,138,.3);}
.level-card.current::after{content:'ACTIEF';position:absolute;top:4px;right:5px;
  font-size:.52rem;font-weight:900;letter-spacing:1.5px;background:var(--yellow);
  color:var(--bg-deep);padding:2px 5px;border-radius:8px;}
.lc-num{font-size:.58rem;font-weight:800;color:var(--muted);letter-spacing:2px;margin-bottom:4px;}
.lc-letters{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--teal);
  letter-spacing:5px;min-height:22px;word-break:break-all;/* FIX: more spacing */}
.lc-name{font-size:.7rem;color:var(--muted-hi);margin:4px 0;line-height:1.3;}
.lc-stars{font-size:.78rem;margin-top:4px;min-height:16px;}
.lc-lock{font-size:1.3rem;margin:4px 0;}
.lc-stream-btn{display:inline-flex;align-items:center;gap:3px;margin-top:6px;padding:3px 9px;
  font-size:.6rem;font-weight:900;letter-spacing:1px;color:var(--purple);
  background:rgba(144,102,248,.12);border:1px solid rgba(144,102,248,.3);
  border-radius:18px;cursor:pointer;transition:background .12s;}
.lc-stream-btn:hover{background:rgba(144,102,248,.22);}

/* ════════════════ GAME SCREEN ═════════════════ */
#screen-game{gap:13px;}
.game-topbar{width:100%;display:flex;align-items:center;gap:10px;}
.game-level-badge{font-size:.68rem;font-weight:900;letter-spacing:2px;
  background:var(--bg-card);border:1px solid rgba(255,255,255,.08);
  padding:6px 12px;border-radius:50px;color:var(--muted);flex-shrink:0;}
.game-mission-type{flex:1;text-align:center;font-size:.72rem;font-weight:800;
  letter-spacing:2px;color:var(--teal);text-transform:uppercase;}
.game-score{font-family:var(--font-mono);font-size:.86rem;font-weight:700;color:var(--yellow);flex-shrink:0;}
#g-streak{font-size:.8rem;margin-left:4px;}
.progress-wrap{width:100%;background:rgba(255,255,255,.05);border-radius:8px;height:5px;}
.progress-bar{height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--teal),var(--purple));
  transition:width .45s cubic-bezier(.4,0,.2,1);}

/* Feedback bar — floats above choices */
#g-feedback-bar{
  font-size:1.4rem;font-weight:900;text-align:center;
  opacity:0;transition:opacity .2s;
  min-height:32px;
}

/* Streak banner */
#streak-banner{
  position:fixed;top:80px;left:50%;transform:translateX(-50%) scale(.5);
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  color:var(--bg-deep);font-weight:900;font-size:1.1rem;letter-spacing:1px;
  padding:10px 28px;border-radius:50px;z-index:250;
  opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;
}
#streak-banner.show{opacity:1;transform:translateX(-50%) scale(1);animation:streakIn .4s ease;}

/* Char stage */
.char-stage{width:100%;background:var(--bg-panel);border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);padding:22px 16px 18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  min-height:175px;justify-content:center;position:relative;overflow:hidden;}
.char-stage::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -5%,rgba(0,223,196,.07) 0%,transparent 65%);}
.stage-instruction{font-size:.72rem;font-weight:800;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}

/* ─── MORSE SYMBOLS — BIGGER GAPS ON MOBILE ─── */
.morse-display{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;min-height:24px;}
.morse-sym{border-radius:4px;background:rgba(255,255,255,.14);transition:background .08s,transform .08s;}
.morse-sym.dot {width:16px;height:16px;border-radius:50%;}
.morse-sym.dash{width:42px;height:16px;border-radius:8px;}
.morse-sym.active{background:var(--teal);transform:scaleY(1.4);box-shadow:0 0 10px var(--teal);}
.morse-sym.played{background:var(--teal-dim);}

.big-letter{font-family:var(--font-mono);font-size:clamp(4rem,14vw,7rem);
  font-weight:700;color:var(--white);line-height:1;
  text-shadow:0 0 40px rgba(0,223,196,.3);transition:color .15s;}
.big-letter.correct{color:var(--success);text-shadow:0 0 50px rgba(45,232,138,.5);}
.big-letter.wrong{color:var(--coral);animation:shake .3s ease;}

.btn-play-morse{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;
  font-size:.92rem;font-weight:800;color:var(--bg-deep);
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  border:none;border-radius:50px;box-shadow:0 4px 18px rgba(0,223,196,.3);
  transition:transform .12s,box-shadow .12s;}
.btn-play-morse:hover{transform:scale(1.04);box-shadow:0 6px 26px rgba(0,223,196,.45);}
.btn-play-morse.playing{opacity:.55;cursor:default;pointer-events:none;}
.play-icon.spinning{animation:spin 1s linear infinite;display:inline-block;}

/* ─── CHOICES — with morse hint below letter ─── */
.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;}
.choice-btn{
  padding:16px 8px 12px;
  background:var(--bg-card);border:2px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .1s,border-color .1s,background .1s;
}
.choice-btn:hover:not(:disabled){border-color:var(--teal);background:rgba(0,223,196,.07);transform:scale(1.03);}
.choice-btn.correct{border-color:var(--success);background:rgba(45,232,138,.1);}
.choice-btn.wrong  {border-color:var(--coral);  background:rgba(255,51,85,.1);animation:shake .3s;}
.choice-btn:disabled{cursor:not-allowed;}
.cb-letter{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--white);letter-spacing:2px;line-height:1;}
.cb-morse {font-family:var(--font-mono);font-size:.65rem;color:var(--muted-hi);letter-spacing:4px;}
/* When correct/wrong, inherit color */
.choice-btn.correct .cb-letter,.choice-btn.correct .cb-morse{color:var(--success);}
.choice-btn.wrong   .cb-letter,.choice-btn.wrong   .cb-morse{color:var(--coral);}

/* ─── DOT/DASH mascots in game ─────────────── */
.game-mascot{display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:.82rem;font-weight:700;color:var(--muted-hi);}
.mascot-mini{font-size:1.5rem;}


/* ════════════════ REEKS MODE ══════════════════ */
#mode-reeks{display:flex;flex-direction:column;gap:14px;width:100%;}
.reeks-header{font-size:.72rem;font-weight:800;letter-spacing:2px;color:var(--purple);
  text-align:center;text-transform:uppercase;}
.reeks-slots-row{display:flex;gap:14px;justify-content:center;width:100%;}
.reeks-slot{
  width:64px;height:64px;border-radius:var(--r-md);
  background:var(--bg-card);border:2px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:1.8rem;font-weight:700;
  color:var(--muted);transition:all .25s;
}
.reeks-slot.active{border-color:var(--teal);color:var(--teal);animation:glow-pulse 1s ease infinite;}
.reeks-slot.done  {border-color:rgba(255,255,255,.2);color:var(--muted-hi);animation:none;}
.reeks-slot.correct{border-color:var(--success);color:var(--success);background:rgba(45,232,138,.08);animation:none;}
.reeks-slot.wrong  {border-color:var(--coral);  color:var(--coral);  background:rgba(255,51,85,.08);  animation:none;}
.reeks-status{font-size:.85rem;font-weight:700;color:var(--muted-hi);text-align:center;min-height:22px;}
.btn-reeks-replay{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  font-size:.88rem;font-weight:800;color:var(--bg-deep);
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  border:none;border-radius:50px;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,223,196,.3);transition:transform .12s;
}
.btn-reeks-replay:hover{transform:scale(1.04);}
.btn-reeks-replay:disabled{opacity:.45;cursor:default;pointer-events:none;}

/* ════════════════ BRIEFING SCREEN ═════════════ */
#screen-briefing{gap:16px;padding-top:18px;}
#screen-briefing::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 25%,rgba(255,228,79,.07) 0%,transparent 55%);}
.briefing-topbar{width:100%;display:flex;align-items:center;gap:12px;}
.briefing-badge{font-size:.66rem;font-weight:900;letter-spacing:2px;padding:6px 14px;
  border-radius:50px;background:rgba(255,228,79,.12);color:var(--yellow);
  border:1px solid rgba(255,228,79,.3);}
.br-progress-dots{display:flex;gap:8px;justify-content:center;width:100%;}
.br-word-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);transition:all .3s;}
.br-word-dot.active{background:var(--yellow);transform:scale(1.3);}
.br-word-dot.done  {background:var(--success);}

/* Tiles showing word progress */
.br-tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%;}
.br-tile{
  min-width:42px;height:52px;border-radius:var(--r-sm);
  background:var(--bg-card);border:2px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;
  color:var(--muted-hi);transition:all .2s;
}
.br-tile.active {border-color:var(--teal);color:var(--teal);animation:glow-pulse 1s ease infinite;}
.br-tile.correct{border-color:var(--success);color:var(--success);background:rgba(45,232,138,.08);animation:none;}
.br-tile.wrong  {border-color:var(--orange); color:var(--orange); background:rgba(255,124,42,.08); animation:none;}

.br-stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.br-word-label{font-size:.88rem;font-weight:800;color:var(--teal);text-align:center;}
.br-morse-stage{
  width:100%;background:var(--bg-panel);border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;gap:14px;min-height:100px;justify-content:center;
}
.btn-br-replay{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  font-size:.88rem;font-weight:800;color:var(--bg-deep);
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  border:none;border-radius:50px;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,223,196,.3);transition:transform .12s,opacity .2s;
}
.btn-br-replay:hover{transform:scale(1.03);}
.btn-br-replay:disabled{opacity:.4;cursor:default;pointer-events:none;}

/* Briefing result */
.br-result{display:none;flex-direction:column;align-items:center;gap:14px;width:100%;}
.br-result-score{font-family:var(--font-mono);font-size:4rem;font-weight:700;color:var(--yellow);}
.br-result-label{font-size:1.3rem;font-weight:900;}
.br-result-sub  {font-size:.85rem;color:var(--muted-hi);}
.br-result-words{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px;}
.br-result-word{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);border-radius:var(--r-sm);padding:10px 14px;
}
.brw-icon{font-size:1.1rem;}
.brw-word{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:3px;}

/* Home briefing button */
.btn-briefing{
  display:block;width:100%;max-width:340px;margin:0 auto;padding:16px 24px;
  font-size:1rem;font-weight:800;color:var(--bg-deep);
  background:linear-gradient(135deg,var(--yellow),#f0b800);
  border:none;border-radius:var(--r-xl);
  box-shadow:0 5px 20px rgba(255,228,79,.35);
  transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.btn-briefing:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,228,79,.5);}
.btn-briefing:active{transform:scale(.97);}

/* ════════════════ STREAM SCREEN ═══════════════ */
#screen-stream{gap:16px;padding-top:20px;}
#screen-stream::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(144,102,248,.1) 0%,transparent 60%);}
.stream-topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.stream-badge{font-size:.66rem;font-weight:900;letter-spacing:2px;padding:6px 14px;
  border-radius:50px;background:rgba(144,102,248,.15);color:var(--purple);
  border:1px solid rgba(144,102,248,.3);}
.stream-score{font-family:var(--font-mono);font-size:.88rem;color:var(--yellow);font-weight:700;}
.stream-slots{display:flex;gap:10px;justify-content:center;width:100%;}
.stream-slot{width:52px;height:52px;border-radius:var(--r-sm);background:var(--bg-card);
  border:2px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--muted);transition:all .25s;}
.stream-slot.active{border-color:var(--teal);color:var(--teal);animation:glow-pulse 1s ease infinite;}
.stream-slot.correct{border-color:var(--success);color:var(--success);background:rgba(45,232,138,.08);animation:none;}
.stream-slot.wrong  {border-color:var(--coral);  color:var(--coral);  background:rgba(255,51,85,.08);  animation:none;}
.stream-stage{width:100%;background:var(--bg-panel);border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);padding:26px 16px;display:flex;flex-direction:column;
  align-items:center;gap:18px;min-height:170px;justify-content:center;position:relative;}
.stream-countdown{font-size:clamp(3rem,12vw,5rem);font-weight:900;color:var(--purple);
  font-family:var(--font-mono);animation:pop .4s ease;}
.stream-timer-wrap{width:100%;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.stream-timer-bar{height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--success),var(--teal));}
.stream-timer-bar.running{animation:bar-drain var(--answer-time,2.2s) linear forwards;}
.stream-timer-bar.urgent{background:linear-gradient(90deg,var(--coral),var(--orange));}
.stream-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.stream-choice{
  padding:14px 8px 10px;background:var(--bg-card);border:2px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .1s,border-color .1s,background .1s;animation:fadeIn .2s ease both;
}
.stream-choice:hover:not(:disabled){border-color:var(--purple);background:rgba(144,102,248,.1);transform:scale(1.03);}
.stream-choice.correct{border-color:var(--success);background:rgba(45,232,138,.1);color:var(--success);}
.stream-choice.wrong  {border-color:var(--coral);  background:rgba(255,51,85,.1); color:var(--coral);animation:shake .3s;}
.stream-choice:disabled{cursor:not-allowed;}
.stream-result{display:none;flex-direction:column;align-items:center;gap:12px;text-align:center;width:100%;}
.stream-result.visible{display:flex;animation:fadeIn .4s ease;}
.stream-result-score{font-family:var(--font-mono);font-size:3.5rem;font-weight:700;color:var(--yellow);}
.stream-result-label{font-size:1.2rem;font-weight:800;}
.stream-result-sub{font-size:.84rem;color:var(--muted-hi);}
#stream-actions{display:none;width:100%;flex-direction:column;gap:10px;margin-top:10px;}

/* ════════════════ RESULT ══════════════════════ */
#screen-result{justify-content:center;gap:16px;}
.result-emoji{font-size:3.5rem;text-align:center;animation:pop .5s ease;}
.result-stars{font-size:2rem;letter-spacing:6px;text-align:center;}
.result-title{font-size:1.8rem;font-weight:900;text-align:center;}
.result-score-big{font-family:var(--font-mono);font-size:4.5rem;font-weight:700;
  color:var(--yellow);text-align:center;line-height:1;animation:pop .4s .15s ease both;}
.result-score-sub{font-size:.88rem;color:var(--muted-hi);text-align:center;}
.result-unlock{width:100%;background:linear-gradient(135deg,rgba(0,223,196,.08),rgba(144,102,248,.06));
  border:1px solid rgba(0,223,196,.25);border-radius:var(--r-md);padding:16px 22px;text-align:center;animation:levelPop .5s ease;}
.result-unlock small{font-size:.7rem;font-weight:900;letter-spacing:2px;color:var(--teal);}
.new-letter{font-family:var(--font-mono);font-size:3rem;font-weight:700;color:var(--teal);display:block;margin:6px 0 4px;}
.new-morse{font-size:.82rem;font-family:var(--font-mono);color:var(--muted-hi);}
.result-actions{display:flex;flex-direction:column;gap:9px;width:100%;}
.btn-stream-bonus{display:block;width:100%;padding:15px;font-size:.98rem;font-weight:800;
  color:var(--bg-deep);background:linear-gradient(135deg,var(--purple),#5530d0);
  border:none;border-radius:var(--r-xl);box-shadow:0 5px 18px rgba(144,102,248,.4);
  transition:transform .12s,box-shadow .12s;cursor:pointer;}
.btn-stream-bonus:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(144,102,248,.55);}

/* ════════════════ PROFILE SCREEN ═════════════ */
#screen-profile{gap:18px;}
.profile-card{width:100%;background:var(--bg-panel);border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);padding:20px;display:flex;gap:16px;align-items:center;}
.profile-avatar{font-size:3rem;}
.profile-info{flex:1;min-width:0;}
.profile-name{font-size:1.4rem;font-weight:800;}
.profile-rank-tag{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:2px;
  padding:4px 12px;border-radius:50px;margin-top:5px;}
.profile-stats{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;}
.profile-stat{font-size:.76rem;color:var(--muted);}
.profile-stat strong{display:block;font-size:1rem;color:var(--white);font-weight:800;}
.section-label{font-size:.66rem;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);width:100%;}
.collection-grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;}
.col-letter{width:52px;height:60px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--font-mono);font-weight:700;font-size:1.1rem;
  background:var(--bg-card);border:1px solid rgba(255,255,255,.05);color:var(--muted);transition:all .3s;}
.col-letter.mastered{background:rgba(0,223,196,.08);border-color:rgba(0,223,196,.28);
  color:var(--teal);box-shadow:0 0 10px rgba(0,223,196,.12);}
.col-morse{font-size:.38rem;letter-spacing:1.5px;opacity:.65;}
.col-speed{font-size:.42rem;color:var(--yellow);font-weight:700;}
.speed-records-row{display:flex;gap:10px;flex-wrap:wrap;width:100%;}
.speed-record{background:var(--bg-card);border-radius:var(--r-sm);
  padding:6px 12px;font-size:.8rem;display:flex;gap:6px;align-items:center;}
.speed-record strong{font-family:var(--font-mono);color:var(--teal);font-size:1rem;}

/* ════════════════ ONBOARDING ══════════════════ */
#screen-onboard{justify-content:center;gap:24px;text-align:center;}
.ob-step{display:none;flex-direction:column;align-items:center;gap:16px;width:100%;}
.ob-step.active{display:flex;animation:fadeUp .35s ease;}
.ob-big{font-size:4rem;} .ob-title{font-size:1.75rem;font-weight:900;}
.ob-body{font-size:.96rem;color:var(--muted-hi);line-height:1.7;max-width:340px;}
.ob-demo{display:flex;gap:18px;align-items:center;justify-content:center;
  background:var(--bg-panel);border-radius:var(--r-md);padding:18px 28px;
  border:1px solid rgba(255,255,255,.05);}
.ob-demo-item{text-align:center;}
.ob-demo-sym{font-size:2rem;font-weight:900;font-family:var(--font-mono);}
.ob-demo-desc{font-size:.7rem;color:var(--muted);margin-top:4px;}
.ob-sep{font-size:1.2rem;color:var(--muted);}
.ob-dots{display:flex;gap:7px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .25s;}
.ob-dot.active{background:var(--teal);width:22px;border-radius:4px;}
.name-input{padding:13px 18px;font-size:1.1rem;font-weight:700;
  background:var(--bg-card);border:2px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);color:var(--white);text-align:center;
  width:100%;max-width:280px;outline:none;transition:border-color .15s;}
.name-input:focus{border-color:var(--teal);}

/* ════════════════ NAV DOCK ════════════════════ */
#nav-dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;z-index:50;
  background:rgba(9,16,42,.9);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.07);border-radius:50px;padding:5px 7px;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 18px;border-radius:40px;color:var(--muted);font-size:.6rem;font-weight:800;
  letter-spacing:1px;background:none;border:none;cursor:pointer;transition:background .15s,color .15s;}
.nav-item:hover{color:var(--white);background:rgba(255,255,255,.06);}
.nav-item.active{color:var(--teal);}
.nav-icon{font-size:1.12rem;}

/* ════════════════ TOAST / OVERLAY ════════════ */
#toast{position:fixed;top:18px;left:50%;
  transform:translateX(-50%) translateY(-80px);
  background:var(--bg-card);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:10px 24px;font-size:.86rem;font-weight:700;
  z-index:400;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;white-space:nowrap;max-width:92vw;}
#toast.show{transform:translateX(-50%) translateY(0);}
.feedback-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;pointer-events:none;opacity:0;transition:opacity .1s;}
.feedback-overlay.show{opacity:1;}
.feedback-burst{font-size:clamp(3rem,12vw,6rem);animation:pop .4s ease;}
.confetti-piece{position:fixed;pointer-events:none;z-index:300;width:9px;height:9px;
  border-radius:2px;animation:confettiFall 1.4s ease-in forwards;}

/* ════════════════ RESPONSIVE ══════════════════ */
@media(max-width:420px){
  .levels-grid{grid-template-columns:repeat(3,1fr);}
  .choices-grid{gap:8px;}
  .cb-letter{font-size:1.7rem;}
  #send-btn{width:120px;height:120px;}
  .stream-slots{gap:7px;}
  .stream-slot{width:46px;height:46px;font-size:1.3rem;}
  .learn-letters-wrap{gap:10px;}
  /* Extra spacing for morse on very small screens */
  .morse-display{gap:16px;}
  .morse-sym.dot{width:14px;height:14px;}
  .morse-sym.dash{width:38px;height:14px;}
}

/* ─── UTILITY ────────────────────────────────── */
.hidden{display:none!important;}