/* ===== TOKENS ===== */
:root {
  --font-display: 'Baloo 2', 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --color-bg: #0d0b1e;
  --color-surface: #1a1535;
  --color-surface-2: #221d42;
  --color-border: #3a3060;
  --color-text: #f0eeff;
  --color-muted: #9b94cc;
  --color-faint: #4a4470;
  --color-up:     #ff6b6b;
  --color-down:   #4ecdc4;
  --color-left:   #ffd93d;
  --color-right:  #6bcb77;
  --color-space:  #c77dff;
  --color-shift:  #ff9f43;
  --color-primary: #ff6bcd;
  --color-gold: #ffd93d;
  --color-success: #6bcb77;
  --color-danger: #ff6b6b;
  --color-star-empty: #2a2550;
  --r-sm: .5rem; --r-md: .75rem; --r-lg: 1.25rem; --r-xl: 2rem; --r-full: 9999px;
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;--sp6:1.5rem;--sp8:2rem;--sp10:2.5rem;--sp12:3rem;
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);
}
html.kq-high-contrast{
  --color-text:#fff;--color-muted:#ddd;--color-bg:#000;--color-surface:#121212;
  --color-border:#666;--color-surface-2:#1a1a1a;
}
html.kq-high-contrast .mode-card,
html.kq-high-contrast .title-meta-link{color:#fff}
html.kq-high-contrast .name-privacy-link{color:#fff}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100dvh;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);overflow:hidden;user-select:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
canvas{display:block}
input{font:inherit}

/* ===== SCREENS ===== */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s ease,transform .3s ease;z-index:10}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.97)}

/* ===== BG CANVAS ===== */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* ===== BUTTONS ===== */
.btn{padding:var(--sp3) var(--sp8);border-radius:var(--r-full);font-family:var(--font-display);font-size:var(--text-base);cursor:pointer;border:none;transition:all .2s ease;letter-spacing:.04em}
.btn-primary{background:linear-gradient(135deg,#ff6bcd,#c77dff);color:#fff;box-shadow:0 4px 20px rgba(199,125,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(199,125,255,.55)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}
.btn-secondary:hover{border-color:var(--color-primary);transform:translateY(-2px)}
.btn-danger{background:linear-gradient(135deg,#ff6b6b,#ff9a00);color:#fff}
.btn-sm{padding:var(--sp2) var(--sp5);font-size:var(--text-sm)}
.btn-gold{background:linear-gradient(135deg,#ffd93d,#ff9a00);color:#1a1000;font-weight:900}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,217,61,.45)}

/* ===== NAME ENTRY SCREEN ===== */
#screen-name{z-index:10;gap:var(--sp8);text-align:center;padding:var(--sp8);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.name-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp10) var(--sp12);display:flex;flex-direction:column;align-items:center;gap:var(--sp6);max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.name-title{font-family:var(--font-display);font-size:var(--text-2xl);background:linear-gradient(135deg,#ff6bcd,#c77dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.name-sub{font-size:var(--text-sm);color:var(--color-muted);font-weight:600}
.name-input{width:100%;padding:var(--sp4) var(--sp6);border-radius:var(--r-lg);border:2px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-lg);font-family:var(--font-display);text-align:center;outline:none;transition:border-color .2s}
.name-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,107,205,.15)}
.name-input::placeholder{color:var(--color-faint)}

/* ===== TITLE SCREEN ===== */
#screen-title{z-index:10;gap:var(--sp8);text-align:center;padding:var(--sp8);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp3)}
.logo-title{font-family:var(--font-display);font-size:var(--text-3xl);background:linear-gradient(135deg,#ff6bcd 0%,#c77dff 40%,#6bcb77 80%,#ffd93d 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;letter-spacing:.02em}
.logo-sub{font-size:var(--text-sm);color:var(--color-muted);font-weight:700;letter-spacing:.1em}
.greeting{font-size:var(--text-base);color:var(--color-muted);font-weight:700;min-height:1.5em}

/* Key set toggle */
.ks-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp3)}
.ks-label{font-size:var(--text-xs);color:var(--color-muted);font-weight:700;letter-spacing:.1em}
.ks-toggle{display:flex;gap:var(--sp2);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-full);padding:var(--sp1)}
.ks-btn{padding:var(--sp2) var(--sp6);border-radius:var(--r-full);font-weight:800;font-size:var(--text-sm);transition:all .2s;color:var(--color-muted)}
.ks-btn.active{background:linear-gradient(135deg,#ff6bcd,#c77dff);color:#fff;box-shadow:0 2px 16px rgba(199,125,255,.5)}
.lang-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp2);margin-bottom:var(--sp2)}
.lang-wrap .ks-label{font-size:var(--text-xs)}
.lang-wrap .ks-toggle{padding:var(--sp1)}
.lang-wrap .ks-btn{padding:var(--sp2) var(--sp5);font-size:var(--text-xs)}

/* Mode cards 2x2 grid */
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp4);max-width:560px;width:100%}
.mode-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp6) var(--sp5);display:flex;flex-direction:column;align-items:center;gap:var(--sp3);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.mode-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s}
.mode-card.rhythm::before{background:linear-gradient(135deg,rgba(255,107,205,.12),rgba(199,125,255,.12))}
.mode-card.waves::before{background:linear-gradient(135deg,rgba(255,107,107,.12),rgba(255,217,61,.12))}
.mode-card.dualhand::before{background:linear-gradient(135deg,rgba(84,160,255,.12),rgba(107,203,119,.12))}
.mode-card.premium::before{background:linear-gradient(135deg,rgba(255,217,61,.15),rgba(255,154,0,.12))}
.mode-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:0 8px 32px rgba(255,107,205,.2)}
.mode-card:hover::before{opacity:1}
.mode-card.dualhand:hover{border-color:#54a0ff;box-shadow:0 8px 32px rgba(84,160,255,.2)}
.mode-card.premium:hover{border-color:var(--color-gold);box-shadow:0 8px 32px rgba(255,217,61,.25)}
.mode-card.premium{border-color:rgba(255,217,61,.3)}
.mode-icon{font-size:2.5rem;line-height:1}
.mode-name{font-family:var(--font-display);font-size:var(--text-lg)}
.mode-desc{font-size:var(--text-xs);color:var(--color-muted);text-align:center;max-width:130px;font-weight:600;line-height:1.4}
.mode-badge{position:absolute;top:var(--sp2);right:var(--sp2);background:var(--color-gold);color:#1a1000;font-size:10px;font-weight:900;padding:2px 8px;border-radius:var(--r-full)}
.mode-badge.new-badge{background:linear-gradient(135deg,#54a0ff,#6bcb77);color:#fff}

/* ===== PREFS (title) ===== */
.pref-row{display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center;align-items:center;max-width:620px;padding:var(--sp2) var(--sp4);background:rgba(26,21,53,.5);border:1px solid var(--color-border);border-radius:var(--r-lg)}
.pref-item{display:flex;align-items:center;gap:var(--sp2);font-size:var(--text-xs);font-weight:700;color:var(--color-muted);cursor:pointer;user-select:none}
.pref-item input[type=checkbox]{accent-color:var(--color-primary);width:1rem;height:1rem}
.pref-item input[type=range]{accent-color:var(--color-primary)}
.pref-row-advanced{flex-wrap:wrap;max-width:640px}
.pref-rhythm-wrap{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;justify-content:center;max-width:100%}
.pref-rhythm-head{display:flex;align-items:flex-start;gap:var(--sp2);max-width:100%}
.pref-rhythm-label{flex:1;min-width:0;max-width:14rem;text-align:left;line-height:1.3}
.pref-info-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-top:.1rem;padding:0;border-radius:var(--r-full);border:2px solid var(--color-border);background:var(--color-surface-2);color:var(--color-primary);font-family:var(--font-display);font-size:var(--text-sm);font-weight:900;line-height:1;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s}
.pref-info-btn:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,107,205,.12);transform:scale(1.05)}
.pref-info-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pref-info-icon{display:block;transform:translateY(-.04em)}
#pref-rhythm-offset{width:min(200px,42vw);accent-color:var(--color-primary)}
.pref-rhythm-val{min-width:2.25rem;font-variant-numeric:tabular-nums;font-weight:800;color:var(--color-muted)}
.pref-popover{margin:0;max-width:min(22rem,92vw);padding:var(--sp5);border:none;border-radius:var(--r-lg);background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border);box-shadow:0 16px 48px rgba(0,0,0,.45)}
.pref-popover::backdrop{background:rgba(13,11,30,.45);backdrop-filter:blur(2px)}
.pref-popover-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;margin-bottom:var(--sp3);line-height:1.25}
.pref-popover-body{font-size:var(--text-sm);color:var(--color-muted);font-weight:600;line-height:1.55;margin:0 0 var(--sp4)}
.pref-popover-close{width:100%}
html.kq-high-contrast .pref-info-btn{border-color:#fff;color:#fff;background:#121212}
.title-meta{margin-top:var(--sp4);text-align:center;font-size:var(--text-xs);color:var(--color-faint);font-weight:600;line-height:1.5;max-width:520px;padding:0 var(--sp4)}
.title-meta strong{color:var(--color-muted)}
.name-privacy{margin-top:var(--sp4);font-size:var(--text-xs);color:var(--color-muted);font-weight:600;line-height:1.45;max-width:360px}

/* ===== CAPABILITY (keyboard hint) ===== */
#screen-capability{z-index:15;gap:var(--sp6);text-align:center;padding:var(--sp8);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.cap-card{max-width:440px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp8);display:flex;flex-direction:column;gap:var(--sp5)}
.cap-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text)}
.cap-body{font-size:var(--text-sm);color:var(--color-muted);line-height:1.55;font-weight:600}

/* ===== LESSON MAP SCREEN ===== */
#screen-lessons{z-index:10;gap:var(--sp6);padding:var(--sp8);overflow-y:auto;justify-content:flex-start;padding-top:80px}
.lesson-header{display:flex;align-items:center;gap:var(--sp4);width:100%;max-width:700px}
.lesson-title{font-family:var(--font-display);font-size:var(--text-2xl);background:linear-gradient(135deg,#54a0ff,#6bcb77);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lesson-subtitle{font-size:var(--text-sm);color:var(--color-muted);font-weight:600}
.lesson-path{display:flex;flex-direction:column;gap:var(--sp4);width:100%;max-width:700px;padding-bottom:var(--sp12)}
.lesson-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp5) var(--sp6);display:flex;align-items:center;gap:var(--sp5);cursor:pointer;transition:all .2s;position:relative}
.lesson-card.locked{opacity:.5;cursor:not-allowed}
.lesson-card.locked:hover{transform:none;box-shadow:none}
.lesson-card:not(.locked):hover{transform:translateX(6px);border-color:#54a0ff;box-shadow:0 4px 20px rgba(84,160,255,.2)}
.lesson-card.completed{border-color:rgba(107,203,119,.5);background:rgba(107,203,119,.06)}
.lesson-num{width:52px;height:52px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-lg);flex-shrink:0;background:var(--color-surface-2,#221d42);border:2px solid var(--color-border)}
.lesson-card:not(.locked):not(.completed) .lesson-num{background:linear-gradient(135deg,#54a0ff,#6bcb77);border:none;color:#fff}
.lesson-card.completed .lesson-num{background:linear-gradient(135deg,#6bcb77,#4ecdc4);border:none;color:#fff}
.lesson-info{flex:1}
.lesson-name{font-family:var(--font-display);font-size:var(--text-base);margin-bottom:4px}
.lesson-desc-text{font-size:var(--text-xs);color:var(--color-muted);font-weight:600}
.lesson-stars{display:flex;gap:4px;margin-top:6px}
.star{font-size:1.1rem;transition:transform .2s}
.star.filled{filter:drop-shadow(0 0 4px rgba(255,217,61,.8))}
.lesson-keys{display:flex;gap:var(--sp2);flex-wrap:wrap}
.key-chip{padding:3px 10px;border-radius:var(--r-sm);font-size:11px;font-weight:800;border:2px solid;font-family:var(--font-display)}
.lesson-connector{width:3px;height:24px;background:linear-gradient(to bottom,var(--color-border),transparent);margin-left:37px;border-radius:var(--r-full)}

/* ===== GAME HUD ===== */
#game-hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;padding:var(--sp3) var(--sp6) var(--sp4);background:linear-gradient(to bottom,rgba(13,11,30,.97) 0%,rgba(13,11,30,.7) 70%,transparent 100%);pointer-events:none}
#game-hud.hidden{display:none}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:2px;min-width:80px}
.hud-center{display:flex;flex-direction:column;align-items:center;gap:2px}
.hud-label{font-size:var(--text-xs);color:var(--color-muted);font-weight:700;letter-spacing:.1em}
.hud-value{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums lining-nums;line-height:1}
.hud-combo{color:var(--color-gold)}
.hud-score{color:var(--color-primary)}
.combo-bar-wrap{width:120px;height:6px;background:rgba(255,255,255,.08);border-radius:var(--r-full);overflow:hidden}
.combo-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-gold),var(--color-primary));border-radius:var(--r-full);transition:width .15s ease}
.hud-lives{display:flex;gap:var(--sp1);align-items:center}
.life-heart{font-size:1.4rem;line-height:1;transition:transform .2s}
.life-heart.lost{opacity:.2;filter:grayscale(1)}

/* Wave badge */
#hud-wave-badge{position:fixed;top:var(--sp3);left:50%;transform:translateX(-50%);z-index:22;pointer-events:none;display:none}
#hud-wave-badge.visible{display:block}
.wave-badge-text{font-family:var(--font-display);font-size:var(--text-sm);color:var(--color-muted);background:rgba(13,11,30,.8);border:2px solid var(--color-border);border-radius:var(--r-full);padding:4px 16px;letter-spacing:.05em}

/* ===== BACK BUTTON ===== */
#btn-back{position:fixed;top:var(--sp3);left:var(--sp4);z-index:55;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-full);padding:var(--sp2) var(--sp4);font-size:var(--text-sm);font-weight:800;color:var(--color-muted);transition:all .2s;display:none}
#btn-back:hover{color:var(--color-text);border-color:var(--color-primary)}
#btn-back.visible{display:block}

/* ===== FULLSCREEN BUTTON ===== */
#btn-fullscreen{position:fixed;bottom:var(--sp4);right:var(--sp4);z-index:60;background:rgba(26,21,53,.85);border:2px solid var(--color-border);border-radius:var(--r-md);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .2s;backdrop-filter:blur(8px);cursor:pointer;color:var(--color-muted)}
#btn-fullscreen:hover{border-color:var(--color-primary);color:var(--color-text);background:var(--color-surface)}

/* ===== GAME CANVAS ===== */
#game-canvas{position:fixed;inset:0;display:none;z-index:5}
#game-canvas.visible{display:block}

/* ===== HTML OVERLAY (canvas text replacement) ===== */
#canvas-overlays{position:fixed;inset:0;pointer-events:none;z-index:8}
#overlay-countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;pointer-events:none}
#overlay-countdown.hidden{display:none}
.countdown-num{font-family:var(--font-display);font-size:10rem;background:linear-gradient(135deg,var(--color-primary),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(255,107,205,.4));animation:countdownPop .8s ease forwards}
#overlay-levelup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:35;text-align:center;pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#overlay-levelup.show{transform:translate(-50%,-50%) scale(1)}
.level-up-text{font-family:var(--font-display);font-size:var(--text-2xl);background:linear-gradient(135deg,var(--color-gold),var(--color-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 24px rgba(255,217,61,.5))}
#overlay-boss{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:36;text-align:center;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
#overlay-boss.show{transform:translate(-50%,-50%) scale(1)}
.boss-banner-text{font-family:var(--font-display);font-size:var(--text-2xl);color:#ff4444;filter:drop-shadow(0 0 30px rgba(255,68,68,.7));text-shadow:0 0 40px rgba(255,68,68,.5)}
.boss-sub-text{font-family:var(--font-display);font-size:var(--text-base);color:var(--color-gold);margin-top:8px}

/* ===== LANE LABELS ===== */
#lane-labels{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);display:none;gap:12px;z-index:15;pointer-events:none}
#lane-labels.visible{display:flex}
.lane-key-label{width:56px;height:56px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.1rem;font-weight:700;border:3px solid;transition:all .08s ease}
.lane-key-label.hit{transform:scale(.88);box-shadow:0 0 20px currentColor}

/* ===== DUAL HAND UI ===== */
#dual-ui{position:fixed;bottom:0;left:0;right:0;z-index:15;display:none;flex-direction:column;align-items:center;gap:var(--sp3);padding:var(--sp4) var(--sp6) var(--sp5);background:linear-gradient(to top,rgba(13,11,30,.97),transparent)}
#dual-ui.visible{display:flex}
.dual-hands{display:flex;gap:var(--sp8);align-items:flex-end;justify-content:center}
.hand-panel{display:flex;flex-direction:column;align-items:center;gap:var(--sp2)}
.hand-label{font-size:var(--text-xs);color:var(--color-muted);font-weight:700;letter-spacing:.1em}
.hand-keys{display:flex;gap:var(--sp2)}
.hand-wasd{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:4px}
.key-btn{width:48px;height:48px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1rem;border:3px solid;transition:all .1s;background:rgba(255,255,255,.04)}
.key-btn.wide{width:108px}
.key-btn.active-key{transform:scale(.85);box-shadow:0 0 20px currentColor}
.key-btn.flash-correct{background:rgba(107,203,119,.3)!important;box-shadow:0 0 24px var(--color-success)!important}
.key-btn.flash-wrong{background:rgba(255,107,107,.3)!important;box-shadow:0 0 24px var(--color-danger)!important}

/* ===== WAVE UI ===== */
#wave-ui{position:fixed;bottom:var(--sp6);left:50%;transform:translateX(-50%);z-index:15;display:none;flex-direction:column;align-items:center;gap:var(--sp3)}
#wave-ui.visible{display:flex}
.wave-key-display{display:flex;gap:var(--sp2)}
.wave-key{min-width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;border:3px solid;transition:all .1s;padding:0 var(--sp2)}
.wave-key.active{transform:scale(.88);box-shadow:0 0 18px currentColor}
.wave-health-bar{width:200px;height:8px;background:rgba(255,255,255,.1);border-radius:var(--r-full);overflow:hidden}
.wave-health-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,#ff6b6b,#ff9a00);transition:width .3s ease}

/* ===== LESSON PROMPT ===== */
#lesson-prompt{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:20;text-align:center;pointer-events:none;display:none}
#lesson-prompt.visible{display:block}
.prompt-text{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);background:rgba(13,11,30,.85);backdrop-filter:blur(8px);border:2px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp3) var(--sp6)}
.prompt-sub{font-size:var(--text-xs);color:var(--color-muted);font-weight:600;margin-top:4px}

/* ===== PROGRESS BAR (lesson) ===== */
#lesson-progress-wrap{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:20;width:320px;pointer-events:none;display:none}
#lesson-progress-wrap.visible{display:block}
.lp-bar{height:8px;background:rgba(255,255,255,.08);border-radius:var(--r-full);overflow:hidden}
.lp-fill{height:100%;background:linear-gradient(90deg,#54a0ff,#6bcb77);border-radius:var(--r-full);transition:width .3s ease}
.lp-label{font-size:var(--text-xs);color:var(--color-muted);font-weight:700;text-align:center;margin-bottom:4px}

/* ===== FEEDBACK ===== */
#feedback{position:fixed;left:50%;transform:translateX(-50%);z-index:25;pointer-events:none;top:42%}
.feedback-text{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;text-align:center;pointer-events:none;animation:feedbackPop .6s ease forwards;white-space:nowrap}

/* ===== LESSON COMPLETE SCREEN ===== */
#screen-lesson-complete{z-index:50;gap:var(--sp6);text-align:center;background:rgba(13,11,30,.95);backdrop-filter:blur(16px);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:var(--sp8);padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.lc-title{font-family:var(--font-display);font-size:var(--text-3xl);background:linear-gradient(135deg,#ffd93d,#6bcb77);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lc-stars{display:flex;gap:var(--sp4);justify-content:center;font-size:3.5rem;margin:var(--sp2) 0}
.lc-star{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1);transform:scale(0)}
.lc-star.pop{transform:scale(1)}
.lc-stats{display:flex;gap:var(--sp8);justify-content:center;flex-wrap:wrap}
.stat-block{display:flex;flex-direction:column;align-items:center;gap:var(--sp1)}
.stat-value{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-gold)}
.stat-label{font-size:var(--text-xs);color:var(--color-muted);font-weight:700;letter-spacing:.1em}
.lc-btns{display:flex;gap:var(--sp4);justify-content:center;flex-wrap:wrap}

/* ===== GAME OVER ===== */
#screen-gameover{z-index:50;gap:var(--sp6);text-align:center;background:rgba(13,11,30,.92);backdrop-filter:blur(16px);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:var(--sp8);padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.gameover-title{font-family:var(--font-display);font-size:var(--text-3xl);background:linear-gradient(135deg,var(--color-danger),#ff9a00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gameover-title.win{background:linear-gradient(135deg,var(--color-gold),var(--color-success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.go-stats{display:flex;gap:var(--sp8);justify-content:center;flex-wrap:wrap}
.go-btns{display:flex;gap:var(--sp4);justify-content:center;flex-wrap:wrap}

/* ===== PREMIUM SCREEN ===== */
#screen-premium{z-index:50;gap:var(--sp6);text-align:center;background:rgba(13,11,30,.98);backdrop-filter:blur(20px);padding:var(--sp8);justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:max(var(--sp12),env(safe-area-inset-bottom,0px))}
.premium-title{font-family:var(--font-display);font-size:var(--text-2xl);background:linear-gradient(135deg,#ffd93d,#ff9a00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.premium-subtitle{font-size:var(--text-base);color:var(--color-muted);font-weight:600;max-width:420px;line-height:1.6}
.premium-features{display:flex;flex-direction:column;gap:var(--sp3);max-width:380px;width:100%;text-align:left}
.premium-feature{display:flex;align-items:center;gap:var(--sp3);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp3) var(--sp4)}
.premium-feature-icon{font-size:1.5rem;flex-shrink:0}
.premium-feature-text{font-size:var(--text-sm);font-weight:700}
.premium-price-card{background:linear-gradient(135deg,rgba(255,217,61,.1),rgba(255,154,0,.08));border:2px solid rgba(255,217,61,.4);border-radius:var(--r-xl);padding:var(--sp6) var(--sp10);display:flex;flex-direction:column;align-items:center;gap:var(--sp3)}
.premium-price{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-gold)}
.premium-price-sub{font-size:var(--text-sm);color:var(--color-muted);font-weight:600}
.premium-divider{width:100%;max-width:380px;height:1px;background:var(--color-border);margin:var(--sp2) 0}
.premium-code-row{display:flex;gap:var(--sp3);width:100%;max-width:380px}
.premium-code-input{flex:1;padding:var(--sp3) var(--sp4);border-radius:var(--r-lg);border:2px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm);font-family:var(--font-display);outline:none;transition:border-color .2s;letter-spacing:.1em}
.premium-code-input:focus{border-color:var(--color-gold)}
.premium-status{font-size:var(--text-sm);font-weight:700;min-height:1.4em;text-align:center}
.premium-status.ok{color:var(--color-success)}
.premium-status.err{color:var(--color-danger)}
.kq-auth-hidden{display:none!important}
.premium-auth-wrap{display:flex;flex-direction:column;gap:var(--sp3);max-width:380px;width:100%;padding:var(--sp4);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl)}
.premium-auth-title{font-size:var(--text-sm);font-weight:800;color:var(--color-text);text-align:center}
.premium-auth-lead{font-size:var(--text-xs);color:var(--color-muted);font-weight:600;line-height:1.55;margin:0;text-align:center}
.premium-auth-fields{display:flex;flex-direction:column;gap:var(--sp3);align-items:stretch}
.premium-auth-label{display:flex;flex-direction:column;gap:var(--sp2);font-size:var(--text-xs);font-weight:700;color:var(--color-muted)}
.premium-auth-session{font-size:var(--text-sm);font-weight:600;margin:0;text-align:center}
.premium-auth-status{min-height:0}
.premium-auth-code-hint{font-size:var(--text-xs);color:var(--color-muted);font-weight:600;line-height:1.5;margin:0;text-align:center}
.premium-stripe-note{margin-top:var(--sp3);max-width:22rem;font-size:var(--text-xs);color:var(--color-muted);font-weight:600;line-height:1.5;text-align:center}

/* ===== PRIVACY (Sprint 5) ===== */
#screen-privacy{z-index:50;gap:var(--sp5);padding:var(--sp8);overflow-y:auto;justify-content:flex-start;padding-top:72px;background:rgba(13,11,30,.96);backdrop-filter:blur(12px)}
.privacy-wrap{width:100%;max-width:460px;display:flex;flex-direction:column;gap:var(--sp5)}
.privacy-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp6);display:flex;flex-direction:column;gap:var(--sp3)}
.privacy-title{font-family:var(--font-display);font-size:var(--text-xl);background:linear-gradient(135deg,#ff6bcd,#c77dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.privacy-p{font-size:var(--text-sm);color:var(--color-muted);font-weight:600;line-height:1.55;margin:0}
.privacy-p.privacy-muted{color:var(--color-faint);font-size:var(--text-xs)}
.privacy-inline-link{color:var(--color-primary);font-weight:800;text-decoration:underline;margin-left:.25rem}
.privacy-inline-link:hover{color:#ff8fd8}

/* ===== SHARE OVERLAY (Sprint 5) ===== */
.share-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:var(--sp6);background:rgba(13,11,30,.92);backdrop-filter:blur(10px)}
.share-overlay.hidden{display:none!important}
.share-dialog{width:100%;max-width:min(920px,100%);max-height:min(96vh,900px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp4);padding:var(--sp5);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.share-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--color-text)}
.share-canvas{width:100%;max-width:100%;height:auto;border-radius:var(--r-md);border:2px solid var(--color-border);background:#0d0b1e}
.share-hint{font-size:var(--text-xs);color:var(--color-muted);font-weight:600;text-align:center;line-height:1.45;max-width:36rem;margin:0}
.share-actions{display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center}

/* ===== DEBUG ===== */
#debug-overlay{position:fixed;top:0;right:0;background:rgba(0,0,0,.75);color:#0f0;font:11px/1.5 monospace;padding:4px 8px;z-index:99999;pointer-events:none;white-space:pre;display:none}
html.kq-debug #debug-overlay{display:block}

/* ===== ANIMATIONS ===== */
@keyframes feedbackPop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(10px)}20%{opacity:1;transform:translateX(-50%) scale(1.15) translateY(0)}80%{opacity:1;transform:translateX(-50%) scale(1) translateY(-20px)}100%{opacity:0;transform:translateX(-50%) scale(.9) translateY(-40px)}}
@keyframes countdownPop{0%{opacity:0;transform:scale(2)}20%{opacity:1;transform:scale(.9)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes keyPop{0%{transform:scale(1)}40%{transform:scale(.82)}100%{transform:scale(1)}}
@keyframes bossShake{0%,100%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-48%,-50%) scale(1.02)}75%{transform:translate(-52%,-50%) scale(1.02)}}

@media (prefers-reduced-motion:reduce){
  .screen,.btn,.mode-card,.lesson-card,.key-btn,.lane-key-label,.wave-key{transition:none!important}
  .countdown-num{animation:none!important}
  .feedback-text{animation:none!important}
}

/* Premium lesson cards */
.premium-lesson.premium-locked{border-color:rgba(255,217,61,.35);background:rgba(255,217,61,.04)}
.premium-lesson.premium-locked:hover{border-color:var(--color-gold);background:rgba(255,217,61,.09);transform:translateY(-2px);cursor:pointer}
.premium-connector.premium-connector{border-color:rgba(255,217,61,.3)}
.premium-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.05em;background:linear-gradient(135deg,#ffd93d,#ff9a00);color:#1a1025;border-radius:var(--r-full);padding:1px 6px;margin-left:6px;vertical-align:middle}

/* ===== PROGRESS (Sprint 2) ===== */
#screen-progress{z-index:50;gap:var(--sp5);padding:var(--sp8);overflow-y:auto;justify-content:flex-start;padding-top:72px;background:rgba(13,11,30,.96);backdrop-filter:blur(12px)}
.prog-wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--sp5)}
.prog-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp6);display:flex;flex-direction:column;gap:var(--sp4)}
.prog-title{font-family:var(--font-display);font-size:var(--text-xl);background:linear-gradient(135deg,#54a0ff,#6bcb77);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.prog-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp4);font-size:var(--text-sm);font-weight:700}
.prog-row span:first-child{color:var(--color-muted)}
.prog-row span:last-child{color:var(--color-text);text-align:right}
.prog-actions{display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center}
.prog-hint{font-size:var(--text-xs);color:var(--color-faint);font-weight:600;text-align:center;line-height:1.45}
.prog-status{font-size:var(--text-sm);font-weight:700;min-height:1.3em;text-align:center}
.prog-status.ok{color:var(--color-success)}
.prog-status.err{color:var(--color-danger)}
.title-progress-link{margin-top:var(--sp2);display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center;align-items:center}
.title-meta-link{display:inline;padding:0 .15em;background:none;border:none;font:inherit;color:var(--color-primary);font-weight:800;text-decoration:underline;cursor:pointer;vertical-align:baseline}
.title-meta-link:hover{color:#ff8fd8}
.name-privacy-link{display:block;margin:.35rem auto 0;padding:0;background:none;border:none;font-size:var(--text-xs);color:var(--color-primary);font-weight:800;text-decoration:underline;cursor:pointer;font-family:inherit}
.name-privacy-link:hover{color:#ff8fd8}

/* ===== Sprint 8: teacher PIN + PWA-adjacent overlay ===== */
.teacher-lock-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp6);background:rgba(13,11,30,.88);backdrop-filter:blur(10px)}
.teacher-lock-overlay.hidden{display:none!important}
.teacher-lock-dialog{width:100%;max-width:380px;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--r-xl);padding:var(--sp6) var(--sp8);display:flex;flex-direction:column;gap:var(--sp4);box-shadow:0 12px 48px rgba(0,0,0,.45)}
.teacher-lock-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--color-text);text-align:center}
.teacher-lock-hint{font-size:var(--text-sm);color:var(--color-muted);font-weight:600;text-align:center;line-height:1.45;margin:0}
.teacher-pin-input{width:100%;padding:var(--sp3) var(--sp4);border-radius:var(--r-lg);border:2px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-lg);font-family:var(--font-display);letter-spacing:.2em;text-align:center;outline:none}
.teacher-pin-input:focus{border-color:var(--color-primary)}
.teacher-pin-err{min-height:0;text-align:center}
.teacher-lock-actions{display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center;margin-top:var(--sp2)}
#pref-class-legend{width:100%;text-align:center;margin-bottom:var(--sp1)}