/* ═══════════════════════════════════════════════════════
   ZEVSAMA STUDIO — rhythmtap.css
   Page-specific styles for zevsama-rhythmtap.html
   Lobby · Song list · Game lanes · Notes · Result screen
   Phase 02 — diekstrak dari zevsama-rhythmtap.html
   ═══════════════════════════════════════════════════════ */

:root{
  --pink:#FF007A;--cyan:#00FFCC;--yellow:#FFD600;--purple:#CC00FF;
  --black:#050505;--blush:#FCE4EC;--white:#f5f5f0;
  --g1:#0a0a0a;--g2:#111;--gray:#1a1a1a;
  --text:#f0ede6;
  --dim:rgba(240,237,230,.4);--border:rgba(255,255,255,.07);
  --mono:'Share Tech Mono',monospace;--disp:'Bebas Neue',sans-serif;--body:'DM Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--text);font-family:var(--body);user-select:none;-webkit-user-select:none;cursor:none;padding-top:0}
@media(pointer:coarse){body{cursor:auto}}

/* CURSOR (desktop only) */
#zs-cur,#zs-dot{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;transform:translate(-50%,-50%)}
#zs-cur{width:18px;height:18px;border:1.5px solid var(--pink);border-radius:50%;transition:width .15s,height .15s,background .15s}
#zs-cur.big{width:36px;height:36px;background:rgba(255,0,122,.1)}
#zs-dot{width:4px;height:4px;background:var(--pink);border-radius:50%}
@media(pointer:coarse){#zs-cur,#zs-dot{display:none}}

/* BG FX */
.scanlines{position:fixed;inset:0;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);pointer-events:none}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 85% 85% at 50% 50%,transparent 50%,rgba(0,0,0,.75) 100%)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:5000;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(5,5,5,.95);border-bottom:1px solid var(--border);backdrop-filter:blur(20px)}
.nav-logo{font-family:var(--disp);font-size:1.1rem;letter-spacing:4px;color:var(--text);text-decoration:none}
.nav-logo span{color:var(--pink)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-back{font-family:var(--mono);font-size:.54rem;letter-spacing:2px;color:var(--dim);text-decoration:none;border:1px solid var(--border);padding:6px 12px;border-radius:100px;transition:color .2s,border-color .2s;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.nav-back:hover,.nav-back:active{color:var(--text);border-color:rgba(255,255,255,.25)}
.nav-badge{font-family:var(--mono);font-size:.46rem;letter-spacing:2px;color:var(--pink);border:1px solid rgba(255,0,122,.3);background:rgba(255,0,122,.08);padding:5px 10px;border-radius:100px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* SCREENS */
.screen{position:fixed;inset:0;padding-top:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s;z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.hidden{opacity:0;pointer-events:none}
#scr-game{align-items:stretch;justify-content:flex-start;overflow:hidden}

/* ═══════════════════════════════════════════════════════════
   LOBBY — MLBB-STYLE 3-PANEL LAYOUT
═══════════════════════════════════════════════════════════ */
#scr-start{
  flex-direction:row;
  align-items:stretch;
  justify-content:flex-start;
  padding-top:52px;
  overflow:hidden;
}

/* ── LOBBY BG ── */
.lobby-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 30% 60%, rgba(255,0,122,.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(100,0,200,.1) 0%, transparent 50%),
    linear-gradient(160deg, #080012 0%, #060008 40%, #040010 100%);
}
.lobby-bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,0,122,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,122,.04) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

/* ── THREE PANELS ── */
.lobby-left{
  width:240px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,0,122,.1);
  background:rgba(4,0,12,.85);
  position:relative;z-index:10;
  padding:24px 0 0;
}
.lobby-center{
  flex:1;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  z-index:5;
}
.lobby-right{
  width:320px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-left:1px solid rgba(255,0,122,.1);
  background:rgba(4,0,12,.85);
  position:relative;z-index:10;
}

/* ── LEFT PANEL: PLAYER CARD ── */
.lp-header{
  padding:0 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);
  margin-bottom:0;
}
.lp-eyebrow{
  font-family:var(--mono);font-size:.42rem;letter-spacing:4px;
  color:rgba(255,0,122,.5);text-transform:uppercase;margin-bottom:10px;
}
.lp-game-name{
  font-family:var(--disp);font-size:2rem;letter-spacing:4px;
  line-height:.9;color:var(--text);
}
.lp-game-name span{color:var(--pink)}
.lp-sub{
  font-family:var(--mono);font-size:.42rem;letter-spacing:4px;
  color:rgba(255,255,255,.2);text-transform:uppercase;margin-top:6px;
}

/* player stats block */
.lp-stats{
  display:flex;flex-direction:column;gap:0;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.lp-stat-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  transition:background .2s;
}
.lp-stat-row:hover{background:rgba(255,0,122,.04)}
.lp-stat-label{
  font-family:var(--mono);font-size:.44rem;letter-spacing:2px;
  color:rgba(255,255,255,.3);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.lp-stat-label::before{
  content:'';width:4px;height:4px;background:var(--pink);opacity:.4;
}
.lp-stat-val{
  font-family:var(--disp);font-size:1.1rem;letter-spacing:2px;
  color:var(--text);line-height:1;
}
.lp-stat-val.pink{color:var(--pink)}
.lp-stat-val.cyan{color:var(--cyan)}

/* grade badge */
.lp-grade-block{
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;gap:14px;
}
.lp-grade-circle{
  width:52px;height:52px;flex-shrink:0;
  border:2px solid rgba(255,0,122,.4);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,0,122,.06);
  position:relative;
}
.lp-grade-letter{
  font-family:var(--disp);font-size:2rem;color:var(--pink);line-height:1;
}
.lp-grade-info{flex:1}
.lp-grade-label{
  font-family:var(--mono);font-size:.42rem;letter-spacing:3px;
  color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:4px;
}
.lp-grade-name{
  font-family:var(--body);font-size:.78rem;font-weight:500;
  color:rgba(255,255,255,.7);
}

/* music toggle */
.lp-music{
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.lp-music-label{
  font-family:var(--mono);font-size:.44rem;letter-spacing:2px;
  color:rgba(255,255,255,.35);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.music-toggle-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.4);
  padding:6px 16px;
  font-family:var(--mono);font-size:.46rem;letter-spacing:2px;
  cursor:none;transition:all .25s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.music-toggle-btn:hover{border-color:var(--pink);color:var(--pink)}
.music-toggle-btn:not(.off){background:rgba(255,0,122,.15);border-color:var(--pink);color:var(--pink)}
@media(pointer:coarse){.music-toggle-btn{cursor:default}}

/* bottom hint */
.lp-hint{
  margin-top:auto;padding:16px 20px;
  font-family:var(--mono);font-size:.4rem;letter-spacing:2px;
  color:rgba(255,255,255,.12);text-transform:uppercase;
  line-height:2;border-top:1px solid rgba(255,255,255,.04);
}

/* ── CENTER PANEL: HERO ILLUSTRATION ── */
#lobby-canvas{
  position:absolute;inset:0;width:100%;height:100%;
}
.lobby-center-bottom{
  position:relative;z-index:5;
  width:100%;padding:0 32px 28px;
  display:flex;align-items:flex-end;justify-content:space-between;
  background:linear-gradient(to top, rgba(4,0,12,.98) 0%, rgba(4,0,12,.7) 40%, transparent 100%);
}
.lobby-game-title-big{
  font-family:var(--disp);
  font-size:clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing:6px;line-height:.85;
  color:var(--text);
  text-shadow:0 0 80px rgba(255,0,122,.5), 0 2px 0 rgba(0,0,0,.8);
}
.lobby-game-title-big span{color:var(--pink)}
.lobby-game-title-sub{
  font-family:var(--mono);font-size:.52rem;letter-spacing:5px;
  color:rgba(255,255,255,.35);text-transform:uppercase;margin-top:8px;
}
.lobby-start-btn{
  font-family:var(--disp);font-size:1.4rem;letter-spacing:4px;
  background:var(--pink);color:#fff;border:none;
  padding:16px 36px;
  cursor:none;position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.34,1.3,.64,1);
  box-shadow:0 0 40px rgba(255,0,122,.4), 0 4px 20px rgba(0,0,0,.5);
  display:inline-flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.lobby-start-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  pointer-events:none;
}
.lobby-start-btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 60px rgba(255,0,122,.6),0 8px 32px rgba(0,0,0,.5);
}
.lobby-start-btn:active{transform:scale(.97)}
.lobby-start-btn:disabled{opacity:.35;transform:none;box-shadow:none}
@media(pointer:coarse){.lobby-start-btn{cursor:default}}

/* ── RIGHT PANEL: SONG LIST ── */
.rp-header{
  padding:20px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.rp-title{
  font-family:var(--mono);font-size:.44rem;letter-spacing:4px;
  color:var(--pink);text-transform:uppercase;opacity:.7;
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.rp-title::after{content:'';flex:1;height:1px;background:rgba(255,0,122,.2)}
.rp-count{
  font-family:var(--mono);font-size:.4rem;letter-spacing:2px;
  color:rgba(255,255,255,.2);text-transform:uppercase;
}

/* song list */
.song-list{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;
  scrollbar-width:none;
}
.song-list::-webkit-scrollbar{display:none}

/* Song cards — album-art style */
.song-card{
  display:flex;align-items:center;gap:0;
  padding:0;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:transparent;cursor:none;
  transition:background .25s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  position:relative;overflow:hidden;
  min-height:74px;
}
.song-card:last-child{border-bottom:none}
@media(pointer:coarse){.song-card{cursor:default}}

.song-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--pink);opacity:0;transition:opacity .25s;
}
.song-card:hover::after,.song-card.sel::after{opacity:1}
.song-card:hover{background:rgba(255,255,255,.03)}
.song-card.sel{background:rgba(255,0,122,.07)}
.song-card.sel::after{opacity:1}

/* album art block */
.song-art{
  width:74px;height:74px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  position:relative;overflow:hidden;
  background:#0a0015;
}
.song-art-canvas{
  position:absolute;inset:0;width:100%;height:100%;
}
.song-art-ico{
  position:relative;z-index:1;font-size:1.8rem;
  filter:drop-shadow(0 0 8px rgba(255,0,122,.6));
}
.song-card.sel .song-art{outline:2px solid rgba(255,0,122,.4)}

/* card content */
.song-body{
  flex:1;min-width:0;padding:12px 14px 12px 16px;
}
.song-name{
  font-family:var(--body);font-size:.82rem;font-weight:600;
  letter-spacing:.3px;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .25s;margin-bottom:3px;
}
.song-card:hover .song-name,.song-card.sel .song-name{color:var(--text)}
.song-artist{
  font-family:var(--mono);font-size:.4rem;letter-spacing:1.5px;
  color:rgba(255,255,255,.2);text-transform:uppercase;margin-bottom:6px;
}
.song-stat{
  font-family:var(--mono);font-size:.4rem;letter-spacing:1px;
  color:rgba(255,0,122,.5);
  display:flex;align-items:center;gap:6px;
}

/* right: index + diff badge */
.song-right{
  padding:0 14px;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  flex-shrink:0;
}
.song-num{
  font-family:var(--disp);font-size:1.6rem;color:rgba(255,255,255,.05);
  line-height:1;letter-spacing:2px;transition:color .25s;
}
.song-card:hover .song-num{color:rgba(255,0,122,.1)}
.song-card.sel .song-num{color:rgba(255,0,122,.2)}
.song-diff{
  font-family:var(--mono);font-size:.36rem;letter-spacing:2px;
  text-transform:uppercase;padding:2px 7px;border:1px solid;
}

/* boss card */
.song-card.boss-card{border-color:rgba(200,0,0,.15)}
.song-card.boss-card::after{background:linear-gradient(to bottom,#ff4400,#ff0000)}
.song-card.boss-card:hover,.song-card.boss-card.sel{background:rgba(200,0,0,.07)}
.song-card.boss-card .song-art{background:#100000}
.song-card.boss-card .song-name{color:rgba(255,80,50,.6)}
.song-card.boss-card.sel .song-name,.song-card.boss-card:hover .song-name{color:#ff6644}

/* tags */
.boss-tag{
  font-family:var(--mono);font-size:.36rem;letter-spacing:2px;
  color:#ff4422;border:1px solid rgba(255,50,0,.35);
  background:rgba(255,50,0,.1);padding:2px 7px;margin-left:8px;
  text-transform:uppercase;
}
.err-tag{
  font-family:var(--mono);font-size:.36rem;letter-spacing:1px;
  color:rgba(255,214,0,.7);margin-left:6px;
}

/* ── RIGHT PANEL BOTTOM: SELECTED SONG DETAIL ── */
.rp-selected{
  flex-shrink:0;padding:16px 20px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(255,0,122,.04);
}
.rp-sel-label{
  font-family:var(--mono);font-size:.4rem;letter-spacing:3px;
  color:rgba(255,0,122,.5);text-transform:uppercase;margin-bottom:8px;
}
.rp-sel-name{
  font-family:var(--disp);font-size:1.1rem;letter-spacing:2px;
  color:var(--text);line-height:1;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rp-sel-artist{
  font-family:var(--mono);font-size:.42rem;letter-spacing:1.5px;
  color:rgba(255,255,255,.3);text-transform:uppercase;
}
.rp-sel-bars{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;
}
.rp-bar-item{display:flex;flex-direction:column;gap:4px}
.rp-bar-label{
  font-family:var(--mono);font-size:.38rem;letter-spacing:2px;
  color:rgba(255,255,255,.25);text-transform:uppercase;
}
.rp-bar-track{height:3px;background:rgba(255,255,255,.07);position:relative}
.rp-bar-fill{
  position:absolute;inset-block:0;left:0;
  background:var(--pink);transition:width .6s cubic-bezier(.4,0,.2,1);
}
.rp-bar-fill.cyan{background:var(--cyan)}

/* Primary button */
.btn-primary{
  font-family:var(--mono);font-size:.6rem;letter-spacing:3px;
  text-transform:uppercase;
  background:var(--pink);color:#fff;border:none;
  padding:14px 40px;
  cursor:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 0 0 rgba(255,0,122,0);
  position:relative;z-index:1;min-height:48px;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{box-shadow:0 8px 32px rgba(255,0,122,.35);transform:translateY(-2px)}
@media(pointer:coarse){.btn-primary{cursor:default}}
.btn-primary:active{transform:scale(.97) translateY(0)}
.btn-primary:disabled{opacity:.3;transform:none;box-shadow:none}

/* Secondary button */
.btn-secondary{
  font-family:var(--mono);font-size:.52rem;letter-spacing:2px;
  text-transform:uppercase;
  background:transparent;color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.1);
  padding:13px 26px;
  cursor:none;transition:all .3s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  min-height:46px;
}
.btn-secondary:hover{border-color:rgba(255,255,255,.3);color:var(--text)}
@media(pointer:coarse){.btn-secondary{cursor:default}}
.btn-secondary:active{background:rgba(255,255,255,.03)}

/* hint text — now in lp-hint */
.start-hint{display:none}

/* ═══ LOADING SCREEN ═══ */
.load-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px}
.load-title{font-family:var(--disp);font-size:3rem;letter-spacing:8px;color:var(--text)}
.load-song{font-family:var(--mono);font-size:.56rem;letter-spacing:4px;color:var(--pink);text-transform:uppercase}
.load-bar-wrap{width:280px;height:3px;background:rgba(255,255,255,.06);overflow:hidden}
.load-bar{height:100%;background:var(--pink);transition:width .4s ease;width:0%}
.load-msg{font-family:var(--mono);font-size:.44rem;letter-spacing:3px;color:rgba(255,255,255,.3);text-transform:uppercase}

/* ═══ HUD ═══ */
.hud{position:relative;display:flex;align-items:center;padding:7px 10px;flex-shrink:0;border-bottom:1px solid var(--border);background:rgba(5,5,5,.7);gap:8px;min-height:52px}
.hud-block{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px}
.hud-lbl{font-family:var(--mono);font-size:.32rem;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
.hud-val{font-family:var(--disp);font-size:1.5rem;letter-spacing:2px;color:var(--text);line-height:1}
.hud-val.pk{color:var(--pink)}.hud-val.cy{color:var(--cyan)}
.hud-center{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0}
.hud-song{font-family:var(--mono);font-size:.32rem;letter-spacing:2px;color:rgba(255,0,122,.5);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.hud-bpm{font-family:var(--disp);font-size:.9rem;letter-spacing:4px;color:var(--text)}
.hud-prog-wrap{width:120px;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.hud-prog-bar{height:100%;background:var(--pink);border-radius:2px;transition:width .2s linear}
.hud-lives{display:flex;gap:4px;align-items:center}
.life-dot{width:7px;height:7px;border-radius:50%;background:var(--pink);transition:background .3s,transform .2s;box-shadow:0 0 5px rgba(255,0,122,.5)}
.life-dot.lost{background:rgba(255,255,255,.1);box-shadow:none;transform:scale(.75)}
.hud-combo-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}
.hud-fire{font-size:.8rem;line-height:1;opacity:0;transition:opacity .15s}
.hud-fire.on{opacity:1;animation:fire .4s ease}
@keyframes fire{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.combo-bar-wrap{width:52px;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:2px}
.combo-bar{height:100%;background:var(--cyan);border-radius:2px;transition:width .15s ease,background .3s;width:0%}

/* PAUSE BUTTON — inline in HUD, right side */
#btn-pause{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);
  font-family:var(--mono);font-size:.48rem;letter-spacing:3px;text-transform:uppercase;
  border-radius:8px;cursor:none;
  transition:color .2s,border-color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  width:44px;height:28px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
@media(pointer:coarse){#btn-pause{cursor:default;width:48px;height:32px;font-size:.52rem}}
#btn-pause:active{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}

/* ═══ GAME AREA ═══ */
.game-area{flex:1;position:relative;overflow:hidden;background:#06061a;min-height:0}
.track-labels{position:absolute;left:0;top:0;bottom:0;width:48px;z-index:20;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.05);background:rgba(4,4,4,.85)}
.track-lbl{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.3rem;letter-spacing:2px;color:rgba(255,255,255,.18);text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.04)}
#game-canvas{position:absolute;left:48px;right:0;top:0;bottom:112px;z-index:10}
#phaser-mount{position:absolute;left:48px;right:0;top:0;bottom:112px;z-index:10;overflow:hidden}
#wf-canvas{position:absolute;left:48px;right:0;top:0;bottom:112px;opacity:.12;pointer-events:none;z-index:5}

/* ── HIT LINE — thick glowing bar, Guitar Hero style ── */
.hit-line{
  position:absolute;left:48px;right:0;bottom:112px;height:4px;
  background:linear-gradient(90deg,rgba(255,0,122,.2),var(--pink) 25%,#fff 50%,var(--pink) 75%,rgba(255,0,122,.2));
  z-index:22;
  box-shadow:0 0 20px rgba(255,0,122,1),0 0 50px rgba(255,0,122,.6),0 0 100px rgba(255,0,122,.3),0 -8px 40px rgba(255,0,122,.2);
  animation:hit-line-pulse 1.2s ease infinite alternate;
}
@keyframes hit-line-pulse{
  0%{box-shadow:0 0 16px rgba(255,0,122,.9),0 0 40px rgba(255,0,122,.5),0 -6px 30px rgba(255,0,122,.15)}
  100%{box-shadow:0 0 28px rgba(255,0,122,1),0 0 70px rgba(255,0,122,.7),0 0 120px rgba(255,0,122,.3),0 -10px 50px rgba(255,0,122,.25)}
}

/* ── LANE DIVIDERS — subtle colored stripes ── */
.lane-divider{
  position:absolute;top:0;bottom:112px;width:1px;z-index:11;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.06) 20%,rgba(255,255,255,.06) 80%,transparent);
}

/* ── KEYS ZONE — Guitar Hero dark panel ── */
.keys-zone{
  position:absolute;left:48px;right:0;bottom:0;height:112px;display:flex;
  z-index:25;
  background:rgba(2,2,10,.97);
  border-top:2px solid rgba(255,0,122,.25);
  box-shadow:0 -8px 40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,0,122,.1);
  overflow:visible; /* allow judge text to float above the zone */
}

/* ── KEY BUTTONS — impact pads ── */
.key-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:none;
  background:rgba(255,255,255,.02);
  border-right:1px solid rgba(255,255,255,.05);
  position:relative;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  cursor:none;
  /* overflow:hidden REMOVED — judge text and ripple need to escape */
}
@media(pointer:coarse){.key-btn{cursor:default}}
.key-btn:last-child{border-right:none}

/* Colored bottom accent bar — always visible, per-lane color */
.key-btn::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  transition:height .06s,opacity .06s;
}
.key-btn:nth-child(1)::after{background:var(--pink);box-shadow:0 0 10px var(--pink);opacity:.6}
.key-btn:nth-child(2)::after{background:var(--cyan);box-shadow:0 0 10px var(--cyan);opacity:.6}
.key-btn:nth-child(3)::after{background:var(--yellow);box-shadow:0 0 10px var(--yellow);opacity:.6}
.key-btn:nth-child(4)::after{background:var(--purple);box-shadow:0 0 10px var(--purple);opacity:.6}

/* Radial burst overlay — pseudo element that explodes on hit */
.key-btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 100%, rgba(255,255,255,.06) 0%, transparent 70%);
}

/* KEY LETTER */
.key-letter{
  font-family:var(--mono);font-size:1.4rem;
  color:rgba(255,255,255,.28);line-height:1;pointer-events:none;
  transition:color .06s,text-shadow .06s,transform .06s;
  position:relative;z-index:2;
}
.key-name{font-family:var(--mono);font-size:.3rem;letter-spacing:1.5px;color:rgba(255,255,255,.14);text-transform:uppercase;pointer-events:none;position:relative;z-index:2}

/* Glow beam — radial burst from center bottom, erupts on hit */
.key-glow{
  position:absolute;inset:-20px;pointer-events:none;opacity:0;
  border-radius:50%;
  transition:opacity .05s;
}

/* Tap ripple — radial shockwave that expands on EVERY press (hit or miss) */
.key-tap-ripple{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;
  border-radius:0;
}
/* Ripple restart trick: animation-name changes per lane via separate classes */
.key-btn.press .key-tap-ripple{animation:none}
.key-btn:nth-child(1).press .key-tap-ripple{animation:ripple-1 .24s ease-out forwards}
.key-btn:nth-child(2).press .key-tap-ripple{animation:ripple-2 .24s ease-out forwards}
.key-btn:nth-child(3).press .key-tap-ripple{animation:ripple-3 .24s ease-out forwards}
.key-btn:nth-child(4).press .key-tap-ripple{animation:ripple-4 .24s ease-out forwards}
@keyframes ripple-1{0%{box-shadow:inset 0 0 0 0 rgba(255,0,122,.7)}100%{box-shadow:inset 0 0 0 60px rgba(255,0,122,0)}}
@keyframes ripple-2{0%{box-shadow:inset 0 0 0 0 rgba(0,255,204,.7)}100%{box-shadow:inset 0 0 0 60px rgba(0,255,204,0)}}
@keyframes ripple-3{0%{box-shadow:inset 0 0 0 0 rgba(255,214,0,.7)}100%{box-shadow:inset 0 0 0 60px rgba(255,214,0,0)}}
@keyframes ripple-4{0%{box-shadow:inset 0 0 0 0 rgba(204,0,255,.7)}100%{box-shadow:inset 0 0 0 60px rgba(204,0,255,0)}}

/* ── PRESS STATE — instant tap feedback, haptic-feel visual ── */
/* Background flash + depress — fires on EVERY tap regardless of hit/miss */
.key-btn.press{
  animation:key-press-anim .14s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes key-press-anim{
  0%  {transform:scaleY(1)}
  35% {transform:scaleY(.85)}
  100%{transform:scaleY(1)}
}
/* Per-lane instant bright flood on press — fades via CSS transition */
.key-btn:nth-child(1).press{background:rgba(255,0,122,.45)!important}
.key-btn:nth-child(2).press{background:rgba(0,255,204,.45)!important}
.key-btn:nth-child(3).press{background:rgba(255,214,0,.45)!important}
.key-btn:nth-child(4).press{background:rgba(204,0,255,.45)!important}
/* Letter lights up on every press */
.key-btn:nth-child(1).press .key-letter{color:var(--pink)!important;text-shadow:0 0 18px var(--pink),0 0 40px var(--pink)!important}
.key-btn:nth-child(2).press .key-letter{color:var(--cyan)!important;text-shadow:0 0 18px var(--cyan),0 0 40px var(--cyan)!important}
.key-btn:nth-child(3).press .key-letter{color:var(--yellow)!important;text-shadow:0 0 18px var(--yellow),0 0 40px var(--yellow)!important}
.key-btn:nth-child(4).press .key-letter{color:var(--purple)!important;text-shadow:0 0 18px var(--purple),0 0 40px var(--purple)!important}
/* Bottom accent fully bright on press */
.key-btn.press::after{height:5px!important;opacity:1!important;}

/* ── HIT STATE — PERFECT ── */
.key-btn.hit-perf{animation:key-hit-perf .35s cubic-bezier(.15,.8,.2,1.1) forwards}
@keyframes key-hit-perf{
  0%  {transform:scale(.92)}
  30% {transform:scale(1.04)}
  65% {transform:scale(.99)}
  100%{transform:scale(1)}
}
.key-btn:nth-child(1).hit-perf{background:rgba(255,0,122,.32)!important;box-shadow:0 0 18px rgba(255,0,122,.5),inset 0 0 28px rgba(255,0,122,.22),0 -8px 24px rgba(255,0,122,.28)!important}
.key-btn:nth-child(2).hit-perf{background:rgba(0,255,204,.32)!important;box-shadow:0 0 18px rgba(0,255,204,.5),inset 0 0 28px rgba(0,255,204,.22),0 -8px 24px rgba(0,255,204,.28)!important}
.key-btn:nth-child(3).hit-perf{background:rgba(255,214,0,.32)!important;box-shadow:0 0 18px rgba(255,214,0,.5),inset 0 0 28px rgba(255,214,0,.22),0 -8px 24px rgba(255,214,0,.28)!important}
.key-btn:nth-child(4).hit-perf{background:rgba(204,0,255,.32)!important;box-shadow:0 0 18px rgba(204,0,255,.5),inset 0 0 28px rgba(204,0,255,.22),0 -8px 24px rgba(204,0,255,.28)!important}
.key-btn:nth-child(1).hit-perf .key-letter{color:#fff!important;text-shadow:0 0 16px var(--pink);transform:scale(1.2)}
.key-btn:nth-child(2).hit-perf .key-letter{color:#fff!important;text-shadow:0 0 16px var(--cyan);transform:scale(1.2)}
.key-btn:nth-child(3).hit-perf .key-letter{color:#fff!important;text-shadow:0 0 16px var(--yellow);transform:scale(1.2)}
.key-btn:nth-child(4).hit-perf .key-letter{color:#fff!important;text-shadow:0 0 16px var(--purple);transform:scale(1.2)}
.key-btn.hit-perf::after{height:5px!important;opacity:1!important}

/* ── GOOD HIT ── */
.key-btn.hit-good{animation:key-hit-good .22s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes key-hit-good{
  0%  {transform:scale(.95)}
  50% {transform:scale(1.01)}
  100%{transform:scale(1)}
}
.key-btn:nth-child(1).hit-good{background:rgba(255,0,122,.18)!important;box-shadow:0 0 10px rgba(255,0,122,.35),inset 0 0 16px rgba(255,0,122,.12)!important}
.key-btn:nth-child(2).hit-good{background:rgba(0,255,204,.18)!important;box-shadow:0 0 10px rgba(0,255,204,.35),inset 0 0 16px rgba(0,255,204,.12)!important}
.key-btn:nth-child(3).hit-good{background:rgba(255,214,0,.18)!important;box-shadow:0 0 10px rgba(255,214,0,.35),inset 0 0 16px rgba(255,214,0,.12)!important}
.key-btn:nth-child(4).hit-good{background:rgba(204,0,255,.18)!important;box-shadow:0 0 10px rgba(204,0,255,.35),inset 0 0 16px rgba(204,0,255,.12)!important}
.key-btn:nth-child(1).hit-good .key-letter{color:var(--pink)!important;text-shadow:0 0 10px var(--pink)}
.key-btn:nth-child(2).hit-good .key-letter{color:var(--cyan)!important;text-shadow:0 0 10px var(--cyan)}
.key-btn:nth-child(3).hit-good .key-letter{color:var(--yellow)!important;text-shadow:0 0 10px var(--yellow)}
.key-btn:nth-child(4).hit-good .key-letter{color:var(--purple)!important;text-shadow:0 0 10px var(--purple)}
.key-btn.hit-good::after{height:4px!important;opacity:.9!important}

/* Miss key flash — simple background transition, no animation restart needed */
.key-btn.hit-miss{background:rgba(255,30,30,.22)!important;transition:background .18s ease!important}

/* Holding state */
.key-btn.holding{
  background:rgba(0,255,204,.1)!important;
  box-shadow:inset 0 0 40px rgba(0,255,204,.15),0 0 25px rgba(0,255,204,.2)!important;
}
.key-btn.holding .key-glow{opacity:1!important}
.key-btn.holding .key-letter{color:var(--cyan)!important;text-shadow:0 0 15px var(--cyan)}

/* ── IN-PAD HIT FEEDBACK — floats up from pad on every tap ── */
.key-judge{
  position:absolute;
  left:-10%;right:-10%;   /* slightly wider than button for centered text */
  bottom:105%;            /* just above the button top edge */
  text-align:center;
  font-family:var(--disp);
  font-size:clamp(1rem, 3.5vw, 1.4rem);
  letter-spacing:3px;
  pointer-events:none;
  opacity:0;
  z-index:40;             /* above keys-zone z-index:25 */
  will-change:transform,opacity;
  line-height:1;
  white-space:nowrap;
}
/* a/b toggle for zero-reflow animation restart */
.key-judge.judge-perf-a{animation:judge-perf-a .65s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-perf-b{animation:judge-perf-b .65s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-good-a{animation:judge-good-a .55s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-good-b{animation:judge-good-b .55s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-bad-a {animation:judge-bad-a  .50s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-bad-b {animation:judge-bad-b  .50s cubic-bezier(.1,.9,.2,1) forwards}
.key-judge.judge-miss-a{animation:judge-miss-a .45s ease forwards}
.key-judge.judge-miss-b{animation:judge-miss-b .45s ease forwards}

/* PERFECT — punchy scale-in, floats high */
@keyframes judge-perf-a{
  0%  {opacity:1;transform:translateY(0) scale(1.6)}
  12% {opacity:1;transform:translateY(-6px) scale(1.1)}
  70% {opacity:1;transform:translateY(-44px) scale(1)}
  100%{opacity:0;transform:translateY(-64px) scale(.9)}
}
@keyframes judge-perf-b{
  0%  {opacity:1;transform:translateY(0) scale(1.6)}
  12% {opacity:1;transform:translateY(-6px) scale(1.1)}
  70% {opacity:1;transform:translateY(-44px) scale(1)}
  100%{opacity:0;transform:translateY(-64px) scale(.9)}
}
/* GOOD — medium float */
@keyframes judge-good-a{
  0%  {opacity:1;transform:translateY(0) scale(1.3)}
  12% {opacity:1;transform:translateY(-4px) scale(1.05)}
  70% {opacity:.9;transform:translateY(-34px) scale(1)}
  100%{opacity:0;transform:translateY(-50px) scale(.92)}
}
@keyframes judge-good-b{
  0%  {opacity:1;transform:translateY(0) scale(1.3)}
  12% {opacity:1;transform:translateY(-4px) scale(1.05)}
  70% {opacity:.9;transform:translateY(-34px) scale(1)}
  100%{opacity:0;transform:translateY(-50px) scale(.92)}
}
/* BAD — smaller, shorter float */
@keyframes judge-bad-a{
  0%  {opacity:1;transform:translateY(0) scale(1.15)}
  15% {opacity:1;transform:translateY(-3px) scale(1)}
  65% {opacity:.7;transform:translateY(-24px)}
  100%{opacity:0;transform:translateY(-36px)}
}
@keyframes judge-bad-b{
  0%  {opacity:1;transform:translateY(0) scale(1.15)}
  15% {opacity:1;transform:translateY(-3px) scale(1)}
  65% {opacity:.7;transform:translateY(-24px)}
  100%{opacity:0;transform:translateY(-36px)}
}
/* MISS — fades quickly with slight shake */
@keyframes judge-miss-a{
  0%  {opacity:1;transform:translateY(0) scale(1) translateX(-3px)}
  20% {opacity:1;transform:translateY(-2px) translateX(3px)}
  50% {opacity:.6;transform:translateY(-12px) translateX(0)}
  100%{opacity:0;transform:translateY(-20px)}
}
@keyframes judge-miss-b{
  0%  {opacity:1;transform:translateY(0) scale(1) translateX(3px)}
  20% {opacity:1;transform:translateY(-2px) translateX(-3px)}
  50% {opacity:.6;transform:translateY(-12px) translateX(0)}
  100%{opacity:0;transform:translateY(-20px)}
}

/* Colors per judgment */
.key-judge.judge-perf-a,.key-judge.judge-perf-b{
  color:var(--cyan);
  text-shadow:0 0 16px var(--cyan), 0 0 32px var(--cyan), 0 2px 0 rgba(0,0,0,.5);
}
.key-judge.judge-good-a,.key-judge.judge-good-b{
  color:var(--yellow);
  text-shadow:0 0 12px var(--yellow), 0 2px 0 rgba(0,0,0,.5);
}
.key-judge.judge-bad-a,.key-judge.judge-bad-b{
  color:#ff8844;
  text-shadow:0 0 10px #ff8844, 0 2px 0 rgba(0,0,0,.5);
}
.key-judge.judge-miss-a,.key-judge.judge-miss-b{
  color:rgba(255,80,80,.95);
  text-shadow:0 0 10px rgba(255,50,50,.7), 0 2px 0 rgba(0,0,0,.5);
}
/* HOLD IT — stays visible while holding, pulses */
.key-judge.judge-holding{
  color:var(--cyan);
  text-shadow:0 0 14px var(--cyan), 0 2px 0 rgba(0,0,0,.5);
  opacity:1;
  animation:judge-holding-pulse .5s ease infinite alternate;
  transform:translateY(-20px);
}
@keyframes judge-holding-pulse{
  0%  {opacity:.7;text-shadow:0 0 8px var(--cyan)}
  100%{opacity:1;text-shadow:0 0 22px var(--cyan), 0 0 44px var(--cyan)}
}

/* Hold progress bar inside key button */
.key-hold-bar{
  position:absolute;bottom:0;left:0;height:4px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  width:0%;transition:width .06s linear;
  pointer-events:none;z-index:3;
}
.fb{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:1.3rem;letter-spacing:4px;
  opacity:0;pointer-events:none;
  text-shadow:0 0 30px currentColor, 0 0 60px currentColor;
}
.fb.pop{animation:fb-pop .52s cubic-bezier(.15,.8,.25,1) forwards}
@keyframes fb-pop{
  0%  {opacity:1;transform:translateY(0) scale(1.6)}
  15% {opacity:1;transform:translateY(-8px) scale(1.05)}
  65% {opacity:.95;transform:translateY(-26px) scale(1)}
  100%{opacity:0;transform:translateY(-42px) scale(.9)}
}
.fb.perf{color:var(--cyan)}.fb.good{color:var(--yellow)}.fb.miss{color:rgba(255,60,60,.95)}.fb.hold{color:var(--cyan)}

/* Combo burst — larger pop */
#combo-pop{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  font-family:var(--disp);font-size:clamp(2rem,6vw,4rem);letter-spacing:4px;
  pointer-events:none;z-index:32;opacity:0;text-align:center;line-height:1.1;
  will-change:transform,opacity;
  text-shadow:0 0 40px currentColor;
}
#combo-pop.show{animation:combo-burst .9s ease forwards}
@keyframes combo-burst{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1.3)}
  20% {opacity:1;transform:translate(-50%,-56%) scale(1)}
  75% {opacity:.8;transform:translate(-50%,-66%) scale(.98)}
  100%{opacity:0;transform:translate(-50%,-75%) scale(.94)}
}

/* Fever glow overlay — stronger */
#fever-bg{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse 100% 60% at 50% 100%,rgba(255,0,122,.22),rgba(255,0,122,.05) 50%,transparent 70%);
}
#fever-bg.on{opacity:1;animation:fever-pulse 1.5s ease infinite alternate}
@keyframes fever-pulse{0%{opacity:.8}100%{opacity:1}}

/* Beat flash — stronger hit */
#beat-flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
#beat-flash.pop{animation:bf .18s ease}
@keyframes bf{0%{opacity:1}100%{opacity:0}}

/* Screen shake */
.game-area.shake{animation:shake .15s ease}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(-4px,1px)}75%{transform:translate(4px,-1px)}}

/* Level flash */
#lvl-flash{position:absolute;inset:0;z-index:35;background:rgba(0,255,204,.1);pointer-events:none;opacity:0}
#lvl-flash.flash{animation:lvf .6s ease}
@keyframes lvf{0%,100%{opacity:0}30%{opacity:1}}

/* Countdown overlay */
#countdown-ov{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);opacity:0;pointer-events:none;transition:opacity .3s}
#countdown-ov.show{opacity:1;pointer-events:all}
#cd-num{font-family:var(--disp);font-size:clamp(6rem,20vw,12rem);letter-spacing:6px;color:var(--pink);text-shadow:0 0 80px rgba(255,0,122,.8);line-height:1}
#cd-num.pop{animation:cd .7s cubic-bezier(.34,1.5,.64,1) forwards}
@keyframes cd{0%{transform:scale(2.2);opacity:0}30%{opacity:1}80%{transform:scale(1)}100%{transform:scale(.95);opacity:.9}}

/* Pause overlay */
#pause-ov{
  position:absolute;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:rgba(5,5,5,.92);backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#pause-ov.show{opacity:1;pointer-events:all}
.pause-title{font-family:var(--disp);font-size:clamp(3rem,10vw,5rem);letter-spacing:10px;color:var(--text)}
.pause-info{font-family:var(--mono);font-size:.5rem;letter-spacing:3px;color:rgba(255,255,255,.35);text-transform:uppercase;max-width:300px;text-align:center;line-height:1.7}

/* ═══ RESULT — Editorial magazine style ═══ */
#scr-result{padding:30px 20px;gap:20px;justify-content:center}

.res-eyebrow{
  font-family:var(--mono);font-size:.52rem;letter-spacing:6px;
  color:var(--pink);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
.res-eyebrow::before,.res-eyebrow::after{
  content:'';width:24px;height:1px;
  background:linear-gradient(90deg, transparent, var(--pink));
}
.res-eyebrow::after{background:linear-gradient(90deg, var(--pink), transparent)}

.res-grade{
  font-family:var(--disp);font-size:clamp(6rem,22vw,12rem);
  letter-spacing:8px;line-height:.8;
  color:var(--text);
  text-shadow:0 0 80px rgba(255,0,122,.2);
}
.res-grade.sg{color:var(--cyan);text-shadow:0 0 80px rgba(0,255,204,.3)}
.res-grade.ag{color:var(--yellow);text-shadow:0 0 80px rgba(255,214,0,.3)}

.res-song{
  font-family:var(--mono);font-size:.46rem;letter-spacing:4px;
  color:rgba(255,255,255,.3);text-transform:uppercase;margin-top:-8px;
}

.res-new{
  font-family:var(--mono);font-size:.5rem;letter-spacing:4px;
  color:var(--cyan);text-transform:uppercase;
  border:1px solid rgba(0,255,204,.3);
  padding:8px 20px;
  background:rgba(0,255,204,.05);
}
.res-new.hide{display:none}

/* Stats grid — editorial boxes with + markers */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  width:100%;max-width:500px;
  border:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.stt{
  background:transparent;
  border:none;
  border-right:1px solid rgba(255,255,255,.08);
  padding:20px 12px;text-align:center;
  position:relative;
  transition:background .3s;
}
.stt:last-child{border-right:none}
.stt:hover{background:rgba(255,0,122,.03)}

/* + marker at corner */
.stt::before{
  content:'+';position:absolute;top:-6px;left:-4px;
  font-family:var(--mono);font-size:.55rem;
  color:rgba(255,255,255,.12);
}

.stt-l{
  font-family:var(--mono);font-size:.4rem;letter-spacing:2.5px;
  color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:8px;
}
.stt-v{
  font-family:var(--disp);font-size:clamp(1.4rem,4vw,2rem);
  letter-spacing:2px;color:var(--text);
}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ═══ GAMEOVER — Editorial style ═══ */
#scr-over{gap:24px;padding:30px}
.over-title{
  font-family:var(--disp);font-size:clamp(4rem,14vw,8rem);
  letter-spacing:8px;line-height:.85;
}
.over-title span{color:var(--pink)}

/* Hit flash and circle containers */
/* Hit flash container */
#hit-flashes{position:absolute;inset:0;pointer-events:none;z-index:28}


/* Full-lane glow that erupts upward on successful hit */
/* a/b dual classes so browser sees a NEW animation name each tap = no reflow needed */
.lane-hit-flash{
  position:absolute;bottom:112px;z-index:28;pointer-events:none;
  height:100%;opacity:0;transform-origin:bottom;
  will-change:opacity,transform;
}
.lane-hit-flash.perf-a{animation:hfpa .38s cubic-bezier(.15,.8,.25,1) forwards}
.lane-hit-flash.perf-b{animation:hfpb .38s cubic-bezier(.15,.8,.25,1) forwards}
@keyframes hfpa{0%{opacity:1;transform:scaleY(.05)}25%{opacity:.8;transform:scaleY(.5)}100%{opacity:0;transform:scaleY(1)}}
@keyframes hfpb{0%{opacity:1;transform:scaleY(.05)}25%{opacity:.8;transform:scaleY(.5)}100%{opacity:0;transform:scaleY(1)}}
.lane-hit-flash.good-a{animation:hfga .28s cubic-bezier(.2,.8,.3,1) forwards}
.lane-hit-flash.good-b{animation:hfgb .28s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes hfga{0%{opacity:.6;transform:scaleY(.04)}20%{opacity:.35;transform:scaleY(.3)}100%{opacity:0;transform:scaleY(.75)}}
@keyframes hfgb{0%{opacity:.6;transform:scaleY(.04)}20%{opacity:.35;transform:scaleY(.3)}100%{opacity:0;transform:scaleY(.75)}}
.lane-hit-flash.miss-tap{animation:hfm .22s ease forwards}
@keyframes hfm{0%{opacity:.5}100%{opacity:0}}


/* ══ COMBO LANE EFFECTS — Guitar Hero style colored lanes ══ */
/* Lane color tint — activates at combo 5, intensifies with combo */
.lane-tint{
  position:absolute;top:0;bottom:112px;z-index:8;pointer-events:none;
  opacity:0;transition:opacity .4s;
  will-change:opacity;
}
.lane-tint.active{opacity:1}

/* Fire trail — bottom-up, bright and visible */
.lane-fire{
  position:absolute;top:0;bottom:112px;z-index:9;pointer-events:none;
  opacity:0;transition:opacity .5s;
  will-change:opacity;
}
.lane-fire.active{
  opacity:1;
  animation:lane-fire-flicker .6s ease infinite alternate;
}
@keyframes lane-fire-flicker{
  0%{opacity:.8}100%{opacity:1}
}

/* ── Beat-reactive side waves — flanking the game area ── */
#beat-wave-left{
  position:absolute;left:0;top:0;bottom:112px;z-index:11;pointer-events:none;
  /* width set by JS = LABEL_W() */
}
#beat-wave-right{
  position:absolute;right:0;top:0;bottom:112px;z-index:11;pointer-events:none;
  /* width set by JS = LABEL_W() */
}

/* ══ FINAL BOSS ARENA ══ */
.game-area.final-boss{
  background:linear-gradient(180deg,#1a0000 0%,#2d0000 35%,#1a0000 70%,#000 100%);
  animation:fb-bg-pulse 1.4s ease infinite alternate;
}
@keyframes fb-bg-pulse{
  0%{background:linear-gradient(180deg,#1a0000,#2d0000 35%,#1a0000 70%,#000)}
  100%{background:linear-gradient(180deg,#200000,#3d0000 35%,#220000 70%,#0a0000)}
}
.game-area.final-boss .track-labels{background:rgba(30,0,0,.92);border-right-color:rgba(255,40,0,.25)}
.game-area.final-boss .track-lbl{color:rgba(255,80,60,.55);border-bottom-color:rgba(255,40,0,.12)}
.game-area.final-boss #beat-flash.pop{animation:bf-boss .1s ease}
@keyframes bf-boss{0%{opacity:.22;background:rgba(255,30,0,.28)!important}100%{opacity:0}}
.boss-hud{
  background:rgba(20,0,0,.97)!important;
  border-bottom-color:rgba(255,40,0,.3)!important;
  box-shadow:0 2px 25px rgba(255,0,0,.2);
  transition:all .8s ease;
}
.boss-hud #hud-score{color:#ff4422!important;animation:boss-score-pulse .8s ease infinite alternate}
@keyframes boss-score-pulse{0%{text-shadow:0 0 10px rgba(255,60,0,.5)}100%{text-shadow:0 0 28px rgba(255,60,0,1),0 0 60px rgba(255,0,0,.35)}}
.key-btn.boss-pulse{background:rgba(255,40,0,.28)!important}
.key-btn.boss-pulse .key-letter{color:#ff5533!important}
/* party glitter rain */
.fb-glitter{position:absolute;top:-10px;pointer-events:none;z-index:8;border-radius:1px;animation:glitter-fall linear infinite}
@keyframes glitter-fall{0%{opacity:0;transform:translateY(-10px) rotate(0deg)}10%{opacity:1}90%{opacity:.8}100%{opacity:0;transform:translateY(110vh) rotate(720deg) scale(.3)}}
/* finish impact text */
#finish-text{position:fixed;inset:0;z-index:99990;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0}
#finish-text.show{animation:finish-seq 3.2s ease forwards}
@keyframes finish-seq{0%{opacity:0}5%{opacity:1}85%{opacity:1}100%{opacity:0}}
.finish-line1{
  font-family:var(--disp);font-size:clamp(3rem,14vw,7rem);letter-spacing:4px;line-height:.9;
  color:#fff;text-align:center;
  text-shadow:3px 3px 0 #8b0000,-3px -3px 0 #8b0000,3px -3px 0 #8b0000,-3px 3px 0 #8b0000,
    0 0 40px rgba(255,60,0,.95),0 0 80px rgba(255,0,0,.5);
  animation:finish-stamp .25s cubic-bezier(.2,.8,.2,1.4) forwards;
}
@keyframes finish-stamp{0%{transform:scale(3.5) rotate(-4deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}
.finish-line2{
  font-family:var(--mono);font-size:clamp(.6rem,3vw,1.4rem);letter-spacing:8px;text-transform:uppercase;
  color:rgba(255,200,0,.9);text-shadow:0 0 20px rgba(255,200,0,.7);text-align:center;margin-top:10px;
  animation:finish-sub .3s .15s ease both;
}
@keyframes finish-sub{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.finish-bg{position:fixed;inset:0;z-index:99989;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(180,0,0,.7),transparent);animation:finish-flash-bg 3.2s ease forwards}
@keyframes finish-flash-bg{0%{opacity:0}5%{opacity:1}25%{opacity:.4}85%{opacity:.25}100%{opacity:0}}

/* ══ ENDGAME THEME ══ */
.game-area.endgame{
  background:linear-gradient(180deg,#000814 0%,#001a2e 40%,#000d1a 100%);
  animation:endgame-bg-pulse 2s ease infinite alternate;
}
@keyframes endgame-bg-pulse{
  0%{background:linear-gradient(180deg,#000814,#001a2e 40%,#000d1a)}
  100%{background:linear-gradient(180deg,#000d1a,#002244 40%,#000814)}
}
.game-area.endgame .track-labels{
  background:rgba(0,0,30,.9);
  border-right-color:rgba(0,255,255,.2);
}
.game-area.endgame .track-lbl{
  color:rgba(0,255,255,.5);
  border-bottom-color:rgba(0,255,255,.08);
}
.game-area.endgame #beat-flash.pop{
  animation:bf-endgame .12s ease;
}
@keyframes bf-endgame{0%{opacity:.18;background:rgba(0,200,255,.2)!important}100%{opacity:0}}

/* Endgame HUD pulse */
.endgame-hud{
  background:rgba(0,10,30,.95)!important;
  border-bottom-color:rgba(0,255,255,.2)!important;
  box-shadow:0 2px 20px rgba(0,200,255,.15);
  transition:all .8s ease;
}
.endgame-hud .hud-val{text-shadow:0 0 12px currentColor}
.endgame-hud #hud-score{
  color:var(--cyan)!important;
  animation:score-pulse 1s ease infinite alternate;
}
@keyframes score-pulse{0%{text-shadow:0 0 10px rgba(0,255,204,.4)}100%{text-shadow:0 0 25px rgba(0,255,204,.9),0 0 50px rgba(0,255,204,.3)}}

/* Endgame key buttons */
.key-btn.endgame-pulse{
  background:rgba(0,255,204,.22)!important;
}
.key-btn.endgame-pulse .key-letter{color:var(--cyan)!important}

/* Endgame banner */
#endgame-banner{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  z-index:40;pointer-events:none;text-align:center;
  opacity:0;transition:opacity .5s;
}
#endgame-banner.show{opacity:1;animation:egb-in 3s ease forwards}
@keyframes egb-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  75%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-68%) scale(.96)}
}
.egb-title{
  font-family:var(--disp);font-size:clamp(2rem,7vw,4.5rem);letter-spacing:8px;
  color:var(--cyan);text-shadow:0 0 40px rgba(0,255,204,.6),0 0 80px rgba(0,255,204,.25);
  line-height:1;
}
.egb-sub{
  font-family:var(--mono);font-size:.45rem;letter-spacing:5px;
  color:rgba(0,255,204,.6);text-transform:uppercase;margin-top:8px;
}

/* Target bar */
.hud-lives{display:none}/* hide old lives area */
.target-bar-wrap{
  width:52px;height:5px;background:rgba(255,255,255,.06);border-radius:3px;
  overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.08);
}
.target-bar{
  height:100%;background:var(--pink);border-radius:3px;
  transition:width .3s ease,background .5s;width:0%;
}
.target-bar.reached{background:var(--cyan);box-shadow:0 0 8px rgba(0,255,204,.6)}
.target-lbl{
  font-family:var(--mono);font-size:.3rem;letter-spacing:2px;
  color:var(--dim);text-transform:uppercase;display:block;
  text-align:center;margin-top:2px;
}
.target-lbl.reached{color:var(--cyan)}

/* hud-target (old, keep for compat) */
.hud-target{font-family:var(--mono);font-size:.28rem;letter-spacing:2px;color:var(--dim);text-transform:uppercase}

/* 100 COMBO HYPE TEXT */
#hype-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:45;pointer-events:none;text-align:center;opacity:0;
  will-change:transform,opacity;
}
/* Simplified animation: translate + opacity only — compositor thread, zero paint */
#hype-text.show{animation:hype-impact 2.2s ease forwards}
@keyframes hype-impact{
  0%  {opacity:0;transform:translate(-50%,-44%)}
  10% {opacity:1;transform:translate(-50%,-50%)}
  75% {opacity:1;transform:translate(-50%,-52%)}
  100%{opacity:0;transform:translate(-50%,-60%)}
}
.hype-line1{
  font-family:var(--disp);
  font-size:clamp(2rem,7vw,4.5rem);letter-spacing:5px;line-height:.95;
  color:#fff;
  /* Single glow only — 6 text-shadows kills paint perf during animation */
  text-shadow:0 0 24px rgba(255,0,122,.9);
  display:block;
}
.hype-line2{
  font-family:var(--mono);font-size:clamp(.42rem,1.6vw,.85rem);
  letter-spacing:5px;text-transform:uppercase;
  color:rgba(0,255,204,.9);
  display:block;margin-top:8px;
}

/* ══ HOLD NOTE INDICATOR ══ */
.hold-indicator{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:8px;border-radius:4px;
  pointer-events:none;z-index:26;
  transition:height .05s;
  animation:hold-pulse .25s ease infinite alternate;
}
@keyframes hold-pulse{0%{opacity:.7}100%{opacity:1;filter:brightness(1.3)}}

/* HOLD feedback label */
.fb.hold{color:var(--cyan)}

/* Key btn holding glow */
.key-btn.holding{
  background:rgba(0,255,204,.12)!important;
  box-shadow:inset 0 0 20px rgba(0,255,204,.1);
}
.key-btn.holding .key-glow{opacity:1!important}

/* ═══════════════════════════════════════════════════════════
   MOBILE — Simple Single-Screen Layout
   Tujuan: hero + play button + 3 lagu langsung kelihatan
═══════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── NAV ── */
  nav{padding:0 14px;height:46px}
  .nav-logo{font-size:.9rem;letter-spacing:3px}
  .nav-badge{display:none}

  /* ── LOBBY: satu kolom, full screen ── */
  #scr-start{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    overflow:hidden;
    padding-top:46px;
  }

  /* ── SEMBUNYIKAN panel kiri — stats pindah ke strip ── */
  .lobby-left{display:none}

  /* ── HERO: title + PLAY ── */
  .lobby-center{
    width:100%;height:190px;flex-shrink:0;overflow:hidden;position:relative;
  }
  .lobby-center-bottom{
    position:absolute;bottom:0;left:0;right:0;
    padding:0 16px 14px;
    display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px;
    background:linear-gradient(to top,rgba(4,0,12,1) 0%,rgba(4,0,12,.5) 55%,transparent 100%);
  }
  .lobby-game-title-big{font-size:clamp(1.9rem,8vw,2.8rem);letter-spacing:4px;line-height:.88}
  .lobby-game-title-sub{font-size:.36rem;letter-spacing:3px;margin-top:5px}

  /* ── PLAY BUTTON — unmissable ── */
  .lobby-start-btn{
    font-family:var(--disp);font-size:1rem;letter-spacing:3px;
    padding:15px 26px;min-height:52px;min-width:116px;flex-shrink:0;
    cursor:pointer;touch-action:manipulation;
    display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 0 28px rgba(255,0,122,.65),0 4px 16px rgba(0,0,0,.6);
    animation:m-play-pulse 1.8s ease infinite alternate;
  }
  @keyframes m-play-pulse{
    0%{box-shadow:0 0 16px rgba(255,0,122,.5),0 4px 14px rgba(0,0,0,.5)}
    100%{box-shadow:0 0 36px rgba(255,0,122,.9),0 6px 20px rgba(0,0,0,.6)}
  }

  /* ── STATS STRIP ── */
  .mob-stats-strip{
    display:flex;align-items:center;justify-content:space-around;
    background:rgba(255,0,122,.05);
    border-top:1px solid rgba(255,0,122,.12);
    border-bottom:1px solid rgba(255,0,122,.08);
    padding:7px 12px;flex-shrink:0;
  }
  .mob-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
  .mob-stat-lbl{font-family:var(--mono);font-size:.3rem;letter-spacing:2px;color:rgba(255,255,255,.3);text-transform:uppercase}
  .mob-stat-val{font-family:var(--disp);font-size:.85rem;letter-spacing:2px;color:var(--text);line-height:1}
  .mob-stat-val.pk{color:var(--pink)}.mob-stat-val.cy{color:var(--cyan)}
  .mob-divider{width:1px;height:26px;background:rgba(255,255,255,.07);flex-shrink:0}
  .mob-music-toggle{
    background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.45);
    font-family:var(--mono);font-size:.34rem;letter-spacing:2px;padding:5px 11px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:all .2s;
  }
  .mob-music-toggle:not(.off){border-color:var(--pink);color:var(--pink);background:rgba(255,0,122,.1)}

  /* ── RIGHT PANEL: song list ── */
  .lobby-right{
    width:100%;flex-shrink:0;border-left:none;border-top:none;
    background:transparent;display:flex;flex-direction:column;flex:1;min-height:0;
  }
  /* scr-start is fixed height so flex children fill correctly */
  #scr-start{height:100dvh;height:calc(100vh - 0px)}
  .rp-header{padding:10px 16px 8px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
  .rp-title{font-size:.4rem;letter-spacing:3px}
  .rp-count{font-size:.34rem}

  /* ── SONG LIST: tepat 3 lagu terlihat, sisanya scroll ── */
  .song-list{
    flex:1;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,0,122,.3) transparent;
  }
  .song-list::-webkit-scrollbar{width:3px}
  .song-list::-webkit-scrollbar-thumb{background:rgba(255,0,122,.3);border-radius:2px}
  .song-list::-webkit-scrollbar-track{background:transparent}

  /* Card height fixed agar tepat 3 muat di layar */
  .song-card{min-height:68px;max-height:68px}
  .song-art{width:68px;height:68px}
  .song-art-ico{font-size:1.65rem}
  .song-body{padding:10px 10px 10px 14px}
  .song-name{font-size:.76rem;font-weight:600}
  .song-artist{font-size:.37rem;margin-bottom:4px}
  .song-stat{font-size:.37rem}
  .song-right{padding:0 12px}
  .song-num{font-size:1.35rem}
  .song-diff{font-size:.31rem;padding:2px 6px}

  /* ── SELECTED DETAIL ── */
  .rp-selected{padding:9px 16px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.05)}
  .rp-sel-label{font-size:.34rem;margin-bottom:4px}
  .rp-sel-name{font-size:.92rem;letter-spacing:1px}
  .rp-sel-artist{font-size:.36rem}
  .rp-sel-bars{margin-top:7px;gap:6px}
  .rp-bar-label{font-size:.32rem}

  /* ── GAME HUD ── */
  .hud{padding:5px 8px;gap:5px;min-height:46px}
  .hud-block{min-width:46px}
  .hud-val{font-size:1.2rem}
  .hud-lbl{font-size:.28rem;letter-spacing:2px}
  .hud-bpm{font-size:.7rem;letter-spacing:2px}
  .hud-song{max-width:88px;font-size:.27rem}
  .hud-prog-wrap{width:70px;height:2px}
  .hud-fire{font-size:.68rem}
  .combo-bar-wrap{width:42px}
  #btn-pause{width:50px;height:34px;font-size:.5rem;border-radius:8px;touch-action:manipulation;cursor:pointer}

  /* ── GAME AREA ── */
  .track-labels{width:30px}
  #game-canvas,#phaser-mount,#wf-canvas,.hit-line,#feedback{left:30px}
  .keys-zone{left:30px;height:116px}
  .track-lbl{font-size:.24rem;letter-spacing:1px}
  .key-letter{font-size:1.4rem}
  .key-name{font-size:.25rem}

  /* ── RESULT ── */
  #scr-result{padding:20px 14px;gap:12px}
  .res-grade{font-size:clamp(4rem,18vw,9rem)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .btn-row{flex-direction:column;gap:8px;align-items:stretch}
  .btn-primary,.btn-secondary{
    padding:15px 20px;font-size:.55rem;text-align:center;
    justify-content:center;min-height:52px;touch-action:manipulation;cursor:pointer;
  }

  /* ── PAUSE & MODAL ── */
  .pause-title{font-size:clamp(2rem,9vw,3.5rem);letter-spacing:6px}
  .pause-info{font-size:.43rem}
  #pause-ov{gap:16px;padding:24px 20px}
  .zcm-box{padding:26px 22px}
  .zcm-title{font-size:2rem}
  .zcm-btns{flex-direction:column;gap:8px}
  .zcm-yes,.zcm-no{padding:13px 20px;font-size:.5rem;min-height:48px;cursor:pointer}
}

/* ── VERY SMALL (≤360px) ── */
@media(max-width:360px){
  .lobby-center{height:165px}
  .lobby-start-btn{font-size:.88rem;padding:13px 20px;min-height:50px;min-width:104px}
  .lobby-game-title-big{font-size:clamp(1.65rem,10vw,2.4rem)}
  .song-card{min-height:62px;max-height:62px}
  .song-art{width:62px;height:62px}
  .keys-zone{height:104px}
  .key-letter{font-size:1.25rem}
  .hud-val{font-size:1.05rem}
}

/* Strip only shown on mobile */
.mob-stats-strip{display:none}

/* ── ZSA Exit Confirm Modal ── */
#zsa-confirm-modal{position:fixed;inset:0;z-index:99995;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;}
#zsa-confirm-modal.show{opacity:1;pointer-events:all;}
.zcm-bg{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);}
.zcm-box{position:relative;z-index:1;background:#0c0c0c;border:1px solid rgba(255,0,122,.25);padding:40px 48px;text-align:center;max-width:360px;width:90%;}
.zcm-label{font-family:'Share Tech Mono',monospace;font-size:.42rem;letter-spacing:5px;color:rgba(255,0,122,.4);text-transform:uppercase;margin-bottom:14px;}
.zcm-title{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;letter-spacing:6px;color:#f5f5f0;margin-bottom:6px;line-height:1;}
.zcm-sub{font-family:'Share Tech Mono',monospace;font-size:.48rem;letter-spacing:2px;color:rgba(240,237,230,.22);margin-bottom:32px;}
.zcm-btns{display:flex;gap:10px;justify-content:center;}
.zcm-yes{font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:2px;text-transform:uppercase;background:transparent;border:1px solid rgba(255,0,122,.5);color:rgba(255,0,122,.9);padding:10px 24px;cursor:pointer;transition:background .2s,border-color .2s;}
.zcm-yes:hover{background:rgba(255,0,122,.15);border-color:rgba(255,0,122,.9);}
.zcm-no{font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:2px;text-transform:uppercase;background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);padding:10px 24px;cursor:pointer;transition:border-color .2s,color .2s;}
.zcm-no:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75);}