/* ═══════════════════════════════════════════════════════
   ZEVSAMA STUDIO — piperush.css
   Page-specific styles for zevsama-piperush.html
   Lobby · Stage cards · Game canvas · Overlays
   Phase 02 — diekstrak dari zevsama-piperush.html
   ═══════════════════════════════════════════════════════ */

:root{
  --pink:#FF007A;--cyan:#00FFCC;--amber:#FFB800;
  --black:#050505;--blush:#FCE4EC;--white:#f5f5f0;
  --g1:#0a0a0a;--g2:#111;--g3:#1a1a1a;--gray:#1a1a1a;
  --text:#f0ede6;--dim:rgba(240,237,230,0.4);--border:rgba(255,255,255,0.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{min-height:100vh;background:var(--black);color:var(--text);font-family:var(--body);overflow-x:hidden;cursor:none}
body{padding-top:0}

/* CURSOR */
#zs-cur{position:fixed;top:0;left:0;z-index:99999;width:18px;height:18px;border:1.5px solid var(--pink);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .15s,height .15s,background .15s;mix-blend-mode:difference}
#zs-cur.big{width:40px;height:40px;background:rgba(255,0,122,0.1)}
#zs-dot{position:fixed;top:0;left:0;z-index:99999;width:4px;height:4px;background:var(--pink);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}

/* NOISE */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;z-index:9998}

/* NAV */
#top-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(5,5,5,0.85);border-bottom:1px solid var(--border);backdrop-filter:blur(20px)}
.nav-logo{font-family:var(--disp);font-size:1rem;letter-spacing:4px;color:var(--text);text-decoration:none}
.nav-logo span{color:var(--pink)}
.nav-back{font-family:var(--mono);font-size:.58rem;letter-spacing:2px;color:var(--dim);text-decoration:none;border:1px solid var(--border);padding:5px 13px;border-radius:100px;transition:color .2s,border-color .2s;text-transform:uppercase}
.nav-back:hover{color:var(--text);border-color:rgba(255,255,255,.22)}

/* ═══════════════════════════════════════════
   LOBBY — MODERN MOBILE-FIRST GAME UI
═══════════════════════════════════════════ */

/* ── LOBBY WRAPPER ── */
#lobby{
  min-height:100vh;
  padding-top:54px;
  display:flex;flex-direction:column;align-items:center;
  background:var(--black);
  position:relative;overflow:hidden;
}

/* Ambient background blobs */
#lobby::before,#lobby::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;
}
#lobby::before{
  width:600px;height:600px;
  top:-200px;right:-150px;
  background:radial-gradient(circle,rgba(255,0,122,.07) 0%,transparent 70%);
  animation:blob-drift 8s ease-in-out infinite alternate;
}
#lobby::after{
  width:400px;height:400px;
  bottom:0;left:-100px;
  background:radial-gradient(circle,rgba(0,255,204,.04) 0%,transparent 70%);
  animation:blob-drift 10s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,40px) scale(1.1)}}

/* ── HERO SECTION ── */
.lobby-hero{
  width:100%;
  padding:32px 20px 24px;
  text-align:center;
  position:relative;z-index:1;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,0,122,.1);
  border:1px solid rgba(255,0,122,.25);
  border-radius:100px;
  padding:5px 14px;
  font-family:var(--mono);font-size:.52rem;letter-spacing:3px;
  color:var(--pink);text-transform:uppercase;
  margin-bottom:20px;
  animation:badge-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--pink);animation:dot-pulse 1.5s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes badge-in{from{opacity:0;transform:translateY(-12px) scale(.9)}to{opacity:1;transform:none}}

.hero-title{
  font-family:var(--disp);
  font-size:clamp(4.5rem,22vw,8rem);
  line-height:.82;letter-spacing:4px;
  color:var(--text);
  animation:title-in .7s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.hero-title .pk{
  color:transparent;
  -webkit-text-stroke:2px var(--pink);
  -webkit-text-stroke:2px var(--pink);
  display:block;
  filter:drop-shadow(0 0 20px rgba(255,0,122,.4));
}
@keyframes title-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.hero-sub{
  font-size:.78rem;color:var(--dim);
  margin-top:14px;line-height:1.7;letter-spacing:.5px;
  animation:title-in .6s ease .25s both;
}

/* ── STATS BAR (replaces hs-row) ── */
.stats-strip{
  width:100%;max-width:520px;
  display:flex;gap:0;
  margin:0 auto 28px;
  border:1px solid var(--border);border-radius:16px;
  background:var(--g1);
  overflow:hidden;
  position:relative;z-index:1;
  animation:title-in .5s ease .35s both;
}
.stat-cell{
  flex:1;padding:12px 10px;text-align:center;
  border-right:1px solid var(--border);
  position:relative;
}
.stat-cell:last-child{border-right:none}
.stat-cell-icon{font-size:.95rem;margin-bottom:2px}
.stat-cell-label{font-family:var(--mono);font-size:.42rem;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.stat-cell-val{font-family:var(--disp);font-size:1.2rem;letter-spacing:2px;color:var(--text);line-height:1.1}
.stat-cell-val .u{font-family:var(--mono);font-size:.38rem;color:var(--dim);margin-left:2px}

/* ── LEVEL CARDS GRID ── */
.levels-section{
  width:100%;max-width:520px;
  padding:0 16px 32px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;z-index:1;
}

/* Individual level card */
.lv-card{
  width:100%;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--g1);
  overflow:hidden;
  position:relative;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s;
  cursor:none;
  animation:card-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.lv-card:nth-child(1){animation-delay:.1s}
.lv-card:nth-child(2){animation-delay:.18s}
.lv-card:nth-child(3){animation-delay:.26s}
.lv-card:nth-child(4){animation-delay:.34s}
.lv-card:nth-child(5){animation-delay:.42s}
@keyframes card-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* Active/unlocked card */
.lv-card.lv-unlocked:not(.lv-locked):hover{
  transform:scale(1.025) translateY(-2px);
  box-shadow:0 12px 40px rgba(255,0,122,.15);
}
.lv-card.lv-current{
  border-color:rgba(255,0,122,.4);
  box-shadow:0 0 0 1px rgba(255,0,122,.15), 0 8px 32px rgba(255,0,122,.12);
}
.lv-card.lv-cleared{
  border-color:rgba(0,200,80,.2);
}
.lv-card.lv-locked{
  opacity:.55;cursor:not-allowed;
}

/* Card accent bar (top) */
.lv-card-accent{
  height:3px;width:100%;
  background:linear-gradient(90deg,var(--pink),#ff66aa,transparent);
  opacity:0;transition:opacity .3s;
}
.lv-card.lv-current .lv-card-accent{opacity:1}
.lv-card.lv-cleared .lv-card-accent{background:linear-gradient(90deg,#00c850,#33ff88,transparent);opacity:1}

/* Card inner layout */
.lv-card-body{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;
}

/* Level badge / orb */
.lv-orb{
  width:52px;height:52px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;
  font-family:var(--disp);
  position:relative;overflow:hidden;
  transition:transform .2s;
}
.lv-card:not(.lv-locked):hover .lv-orb{transform:scale(1.08)}
.lv-orb-num{font-size:1.5rem;letter-spacing:2px;line-height:1}
.lv-orb-txt{font-family:var(--mono);font-size:.35rem;letter-spacing:2px;opacity:.7;margin-top:1px}
/* Orb color states */
.lv-orb.orb-active{background:rgba(255,0,122,.15);border:1.5px solid rgba(255,0,122,.5);color:var(--pink);box-shadow:0 0 20px rgba(255,0,122,.2);animation:orb-pulse 2s ease-in-out infinite}
.lv-orb.orb-cleared{background:rgba(0,200,80,.12);border:1.5px solid rgba(0,200,80,.4);color:#00c850}
.lv-orb.orb-locked{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);color:rgba(255,255,255,.2)}
@keyframes orb-pulse{0%,100%{box-shadow:0 0 16px rgba(255,0,122,.2),inset 0 0 12px rgba(255,0,122,.1)}50%{box-shadow:0 0 30px rgba(255,0,122,.35),inset 0 0 20px rgba(255,0,122,.15)}}

/* Card text */
.lv-info{flex:1;min-width:0}
.lv-num-label{font-family:var(--mono);font-size:.42rem;letter-spacing:3px;color:rgba(255,0,122,.5);text-transform:uppercase;margin-bottom:3px}
.lv-name{font-family:var(--disp);font-size:1.15rem;letter-spacing:2px;color:var(--text);line-height:1;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-desc{font-size:.66rem;color:var(--dim);line-height:1.5;margin-bottom:8px}
.lv-tags{display:flex;gap:6px;flex-wrap:wrap}
.lv-tag{font-family:var(--mono);font-size:.42rem;letter-spacing:1.5px;color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.08);padding:2px 7px;border-radius:4px;text-transform:uppercase}
.lv-tag.tag-easy{color:rgba(0,200,80,.7);border-color:rgba(0,200,80,.2)}
.lv-tag.tag-med{color:rgba(255,184,0,.7);border-color:rgba(255,184,0,.2)}
.lv-tag.tag-hard{color:rgba(255,100,50,.7);border-color:rgba(255,100,50,.2)}
.lv-tag.tag-expert{color:rgba(255,50,50,.7);border-color:rgba(255,50,50,.2)}
.lv-tag.tag-insane{color:var(--pink);border-color:rgba(255,0,122,.3)}

/* Progress bar */
.lv-prog-track{height:3px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden;margin-top:8px}
.lv-prog-fill{height:100%;border-radius:100px;width:0%;transition:width .8s cubic-bezier(.4,0,.2,1)}
.lv-current .lv-prog-fill,.lv-unlocked .lv-prog-fill{background:linear-gradient(90deg,var(--pink),#ff66aa)}
.lv-cleared .lv-prog-fill{background:linear-gradient(90deg,#00c850,#33ff88)}

/* CTA column (right) */
.lv-cta{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;
}

/* Status chip */
.lv-status{
  font-family:var(--mono);font-size:.44rem;letter-spacing:2px;
  text-transform:uppercase;white-space:nowrap;
}
.lv-status.s-cleared{color:#00c850}
.lv-status.s-current{color:var(--pink)}
.lv-status.s-locked{color:rgba(255,255,255,.2)}

/* Play button */
.lv-play-btn{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:var(--pink);color:#fff;
  border:none;cursor:none;
  font-size:1rem;
  box-shadow:0 4px 16px rgba(255,0,122,.35);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s;
}
.lv-play-btn:hover{transform:scale(1.12);box-shadow:0 6px 24px rgba(255,0,122,.5)}
.lv-play-btn.btn-replay{background:rgba(0,200,80,.15);border:1.5px solid rgba(0,200,80,.4);color:#00c850;box-shadow:none}
.lv-play-btn.btn-replay:hover{background:rgba(0,200,80,.25);box-shadow:0 4px 20px rgba(0,200,80,.2)}
.lv-lock-icon{
  font-size:1.2rem;opacity:.35;
}

/* Best score on card */
.lv-best{
  font-family:var(--mono);font-size:.42rem;letter-spacing:1px;
  color:var(--dim);white-space:nowrap;text-align:center;
}
.lv-best span{color:var(--text)}

/* ── SCROLL HINT (mobile) ── */
.scroll-hint{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.48rem;letter-spacing:2px;
  color:rgba(255,255,255,.18);text-transform:uppercase;
  padding:0 0 24px;
  animation:hint-bob 2s ease-in-out infinite;
}
.scroll-hint::before,.scroll-hint::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── RESPONSIVE — desktop ── */
@media(min-width:640px){
  .hero-title{font-size:clamp(5rem,12vw,9rem)}
  .levels-section{max-width:600px;padding:0 24px 40px}
  .stats-strip{max-width:600px}
  .lv-card-body{padding:18px 22px;gap:20px}
  .lv-orb{width:58px;height:58px;border-radius:18px}
  .lv-orb-num{font-size:1.7rem}
  .lv-name{font-size:1.3rem}
  .lv-play-btn{width:50px;height:50px;border-radius:16px}
}

@media(min-width:900px){
  .lobby-hero{padding:40px 32px 28px}
  .levels-section{max-width:680px}
  .stats-strip{max-width:680px}
  .lv-card:not(.lv-locked):hover{transform:scale(1.018) translateY(-3px)}
}

/* ═══════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════ */
#game-screen{display:none;position:fixed;inset:0;z-index:500;background:var(--black);flex-direction:column}
#game-screen.active{display:flex}
#game-canvas-wrap{position:relative;flex:1;overflow:hidden}
#gc{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Dead flash */
#dead-flash{position:absolute;inset:0;z-index:30;background:var(--pink);opacity:0;pointer-events:none;mix-blend-mode:overlay;transition:opacity .08s}
#touch-flap{position:absolute;inset:0;z-index:5;cursor:none}

/* HUD */
#game-hud{position:absolute;top:0;left:0;right:0;z-index:20;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(5,5,5,0.78);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.hud-left{display:flex;align-items:center}
.hud-game-title{font-family:var(--disp);font-size:.95rem;letter-spacing:3px;color:var(--pink)}
.hud-center{text-align:center}
.hud-score-label{font-family:var(--mono);font-size:.44rem;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
.hud-score{font-family:var(--disp);font-size:1.6rem;letter-spacing:3px;color:var(--text);line-height:1}
.hud-right{display:flex;align-items:center;gap:12px}
.hud-best-wrap{font-family:var(--mono);font-size:.52rem;letter-spacing:2px;color:var(--dim)}
.hud-best-label{color:rgba(255,0,122,.6)}
#hud-best{color:var(--text)}
.hud-esc{font-family:var(--mono);font-size:.5rem;letter-spacing:2px;color:var(--dim);border:1px solid var(--border);padding:4px 10px;border-radius:100px;cursor:none;background:none;transition:color .2s,border-color .2s}
.hud-esc:hover{color:var(--text);border-color:rgba(255,255,255,.2)}

/* Level bar */
#level-bar-wrap{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.05);z-index:20;overflow:visible}
#level-bar-fill{height:100%;background:linear-gradient(90deg,var(--pink),#ff66aa);border-radius:0;box-shadow:0 0 8px rgba(255,0,122,.5);transition:width .3s ease;width:0%}
#level-bar-finish{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:10px;filter:drop-shadow(0 0 4px rgba(255,0,122,.8));z-index:2}
#level-label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.48rem;letter-spacing:2px;color:rgba(255,255,255,.4);z-index:21;white-space:nowrap}

/* Game overlays */
.game-overlay{position:absolute;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,5,5,0.92);backdrop-filter:blur(16px);text-align:center;padding:32px 24px}
.game-overlay.active{display:flex}
.overlay-eyebrow{font-family:var(--mono);font-size:.58rem;letter-spacing:4px;color:var(--pink);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;justify-content:center}
.overlay-eyebrow::before,.overlay-eyebrow::after{content:'';display:block;width:24px;height:1px;background:var(--pink);opacity:.5}
.overlay-title{font-family:var(--disp);font-size:clamp(3rem,10vw,6rem);letter-spacing:4px;line-height:.9;color:var(--text);margin-bottom:20px}
.overlay-title .pink{color:var(--pink)}
.overlay-desc{font-size:.76rem;color:var(--dim);line-height:1.7;margin-bottom:22px;max-width:340px}
.overlay-controls{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.control-row{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:.55rem;color:var(--dim)}
.key-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:6px;color:var(--text);font-size:.55rem}
.key-action{letter-spacing:1px}
.overlay-btn{background:var(--pink);color:#fff;border:none;padding:12px 28px;border-radius:100px;font-family:var(--mono);font-size:.65rem;letter-spacing:2px;text-transform:uppercase;cursor:none;margin-top:8px;transition:opacity .2s,transform .15s}
.overlay-btn:hover{opacity:.88;transform:scale(1.03)}
.overlay-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--dim)}
.overlay-btn.secondary:hover{border-color:rgba(255,255,255,.3);color:var(--text)}

/* Obstacle guide */
.obs-guide{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px;width:100%;max-width:300px}
.obs-guide-item{display:flex;align-items:center;gap:9px;background:var(--g2);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.obs-guide-icon{font-size:1rem;flex-shrink:0}
.obs-guide-label{font-family:var(--mono);font-size:.5rem;letter-spacing:1px;color:var(--dim);text-transform:uppercase;line-height:1.4}
.obs-guide-action{font-family:var(--mono);font-size:.55rem;color:var(--pink);letter-spacing:1px;margin-top:2px}

/* Score popup */
.score-popup{position:absolute;z-index:25;pointer-events:none;font-family:var(--disp);font-size:1.1rem;letter-spacing:2px;color:var(--pink);animation:popup-rise .9s ease forwards}
@keyframes popup-rise{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-55px) scale(.9)}}

/* Score breakdown */
.score-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;width:100%;max-width:260px}
.breakdown-item{background:var(--g2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;text-align:left}
.breakdown-label{font-family:var(--mono);font-size:.5rem;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:3px}
.breakdown-val{font-family:var(--disp);font-size:1.3rem;letter-spacing:2px;color:var(--text)}
.breakdown-val .pink{color:var(--pink)}

/* Finish overlay */
#overlay-finish,#overlay-allclear{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,5,5,.96);backdrop-filter:blur(16px);text-align:center;padding:32px 24px}
#overlay-finish.active,#overlay-allclear.active{display:flex}
.finish-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.finish-particle{position:absolute;border-radius:50%;animation:fp-fly var(--dur,1.5s) ease-out forwards}
@keyframes fp-fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx,0),var(--ty,-200px)) scale(0);opacity:0}}
.finish-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:finish-rise .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes finish-rise{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.finish-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:4px;color:var(--pink);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.finish-eyebrow::before,.finish-eyebrow::after{content:'';display:block;width:28px;height:1px;background:var(--pink);opacity:.5}
.finish-title{font-family:var(--disp);font-size:clamp(3rem,10vw,6rem);letter-spacing:4px;line-height:.9;color:var(--text);margin-bottom:20px}
.finish-title span{color:var(--pink)}
.finish-stats{display:flex;gap:16px;margin-bottom:16px}
.finish-stat{background:var(--g2);border:1px solid var(--border);border-radius:12px;padding:12px 20px;text-align:center;min-width:100px}
.finish-stat-label{font-family:var(--mono);font-size:.5rem;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:4px}
.finish-stat-val{font-family:var(--disp);font-size:1.6rem;letter-spacing:2px;color:var(--text)}
.finish-msg{font-size:.78rem;color:var(--dim);margin-bottom:24px;line-height:1.6}
.allclear-score{margin-bottom:8px}
.allclear-num{font-family:var(--disp);font-size:clamp(3.5rem,12vw,7rem);letter-spacing:4px;color:var(--pink);text-shadow:0 0 40px rgba(255,0,122,.5);animation:pulse-glow 1.5s ease-in-out infinite alternate}
@keyframes pulse-glow{from{text-shadow:0 0 20px rgba(255,0,122,.4)}to{text-shadow:0 0 60px rgba(255,0,122,.8),0 0 100px rgba(255,0,122,.3)}}

/* Countdown */
#countdown-overlay{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:rgba(5,5,5,.85);backdrop-filter:blur(8px);pointer-events:none}
#countdown-overlay.active{display:flex}
#countdown-num{font-family:var(--disp);font-size:clamp(5rem,20vw,10rem);letter-spacing:4px;color:var(--text);text-align:center;line-height:1;text-shadow:0 0 60px rgba(255,0,122,.6);animation:countdown-pop .8s cubic-bezier(.34,1.56,.64,1) forwards}
#countdown-num.go{color:var(--pink)}
@keyframes countdown-pop{0%{transform:scale(.5);opacity:0}40%{transform:scale(1.15);opacity:1}70%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
.countdown-ring{position:absolute;width:80px;height:80px;border:3px solid var(--pink);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);animation:ring-expand .7s ease-out forwards;pointer-events:none}
@keyframes ring-expand{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-50%) scale(6);opacity:0}}
@keyframes cd-impact{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}
#countdown-overlay.impact{animation:cd-impact .18s ease}

/* Game over anim */
#overlay-gameover.entering{animation:go-enter .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes go-enter{from{opacity:0;transform:scale(.88) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Music btn */
#music-btn{position:absolute;bottom:12px;right:16px;z-index:25;background:rgba(5,5,5,.7);border:1px solid var(--border);border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:.52rem;letter-spacing:1.5px;color:var(--dim);cursor:none;display:flex;align-items:center;gap:6px;transition:color .2s,border-color .2s;backdrop-filter:blur(8px)}
#music-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
#music-btn.playing{color:var(--pink);border-color:rgba(255,0,122,.3)}
.music-bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.music-bar{width:2px;background:currentColor;border-radius:1px;animation:music-bounce var(--spd,.4s) ease-in-out infinite alternate}
@keyframes music-bounce{from{height:2px}to{height:10px}}

/* Toast */
#zs-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);z-index:9999;display:flex;align-items:center;gap:12px;background:rgba(8,8,8,.96);border:1px solid rgba(255,0,122,.28);border-radius:100px;padding:9px 10px 9px 18px;backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;white-space:nowrap;max-width:calc(100vw - 32px);font-family:var(--body)}
#zs-toast.show{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.zt-text{font-size:.76rem;color:rgba(240,237,230,.85)}
.zt-text strong{color:#fff}
.zt-btn{background:var(--pink);color:#fff;border:none;border-radius:100px;padding:6px 15px;font-family:var(--mono);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;cursor:none}
.zt-dismiss{background:transparent;color:var(--dim);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:6px 12px;font-family:var(--mono);font-size:.6rem;cursor:none}

/* Unlock banner */
#unlock-banner{position:fixed;top:68px;left:50%;transform:translateX(-50%) translateY(-16px);z-index:9999;background:rgba(10,10,10,.95);border:1px solid rgba(255,0,122,.5);border-radius:16px;padding:16px 24px;text-align:center;box-shadow:0 0 40px rgba(255,0,122,.2);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;max-width:340px;width:calc(100vw - 40px)}
#unlock-banner.show{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.unlock-title{font-family:var(--disp);font-size:1.2rem;letter-spacing:3px;color:var(--pink);margin-bottom:4px}
.unlock-desc{font-size:.72rem;color:var(--dim);margin-bottom:12px;line-height:1.5}
.unlock-link{display:inline-flex;align-items:center;gap:6px;background:var(--pink);color:#fff;text-decoration:none;padding:8px 18px;border-radius:100px;font-family:var(--mono);font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase}

@media(max-width:480px){
  #top-nav{padding:0 16px}
  .lv-name{font-size:1rem}
  .lv-desc{display:none}
  .lv-card-body{padding:14px 14px;gap:12px}
  .lv-orb{width:46px;height:46px;border-radius:13px}
  .lv-play-btn{width:40px;height:40px;border-radius:12px}
}

/* ── 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);}