:root{ --cyan:#00f0ff; --pink:#ff2fb3; --yellow:#ffe14d; --green:#3dff7a; --purple:#a855f7; }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#07070f}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#eef2ff; user-select:none; -webkit-user-select:none;
}
#wrap{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;touch-action:none;display:block}
#topbar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 6px;pointer-events:none;z-index:5;
}
#topbar>*{pointer-events:auto}
#homeBtn{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:24px;font-weight:700;
  border:1px solid rgba(255,255,255,.15);
}
#modeLabel{
  font-size:12px;font-weight:800;letter-spacing:2px;color:var(--purple);
  text-shadow:0 0 10px rgba(168,85,247,.8);
}
.spacer{flex:1}
#muteBtn,#pauseBtn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);font-size:17px;color:#fff;cursor:pointer;
}
#hud{
  position:absolute;top:calc(58px + env(safe-area-inset-top));left:0;right:0;z-index:5;
  display:flex;justify-content:center;gap:18px;pointer-events:none;
}
.hud-block{display:flex;flex-direction:column;align-items:center;min-width:56px}
.hud-k{font-size:10px;font-weight:800;letter-spacing:2px;color:#8b93b8}
.hud-v{font-size:21px;font-weight:900;color:#fff;text-shadow:0 0 12px rgba(0,240,255,.6)}
#streakVal{text-shadow:0 0 12px rgba(255,225,77,.6)}
.pips{display:flex;gap:5px;margin-top:6px}
.pip{width:11px;height:11px;border-radius:50%;background:#2a2f45}
.pip.on{background:var(--green);box-shadow:0 0 8px rgba(61,255,122,.9)}
.pip.off{background:#3a2030}
#banner{
  position:absolute;top:26%;left:0;right:0;text-align:center;z-index:4;pointer-events:none;
  font-size:44px;font-weight:900;letter-spacing:2px;color:#fff;
  text-shadow:0 0 20px var(--cyan),0 0 60px var(--cyan);
  animation:bannerpop .5s ease-out;
}
@keyframes bannerpop{from{transform:scale(.6);opacity:0}}
.overlay{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(5,5,12,.82);backdrop-filter:blur(6px);padding:24px;text-align:center;gap:14px;
}
.overlay[hidden]{display:none}
.title{font-size:clamp(44px,11vw,76px);font-weight:900;line-height:1;letter-spacing:2px;
  text-shadow:0 0 24px rgba(0,240,255,.9),0 0 80px rgba(0,240,255,.4)}
.title span{color:var(--purple);text-shadow:0 0 24px rgba(168,85,247,.9),0 0 80px rgba(168,85,247,.4)}
.tagline{color:#aab2d8;font-size:16px}
.rules{color:#8b93b8;font-size:13.5px;max-width:350px;line-height:1.65}
.rules b{color:var(--yellow)}
.rules.dim{opacity:.8;font-size:12.5px}
.modes{display:flex;gap:12px}
.modes button{
  width:110px;height:100px;border-radius:18px;border:2px solid rgba(255,255,255,.14);cursor:pointer;
  background:rgba(255,255,255,.05);color:#fff;font-size:32px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;transition:transform .12s;
}
.modes button span{font-size:13px;font-weight:700;letter-spacing:1px}
.modes button:active{transform:scale(.94)}
.best{color:#8b93b8;font-size:13px;min-height:18px}
.overlay h2{font-size:40px;font-weight:900;letter-spacing:3px}
.big-btn{
  background:linear-gradient(135deg,var(--purple),#6d28d9);border:none;color:#fff;font-weight:800;
  font-size:17px;padding:14px 30px;border-radius:14px;cursor:pointer;min-width:200px;
  box-shadow:0 0 22px rgba(168,85,247,.45);
}
.big-btn:active{transform:scale(.96)}
.ghost-btn{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;
  font-size:15px;padding:12px 24px;border-radius:14px;cursor:pointer;min-width:140px;
}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.final-score{font-size:64px;font-weight:900;letter-spacing:4px;text-shadow:0 0 24px rgba(168,85,247,.8)}
.stats{color:#aab2d8;font-size:14px;line-height:1.7}
.toast{color:var(--green);font-weight:700;font-size:14px;min-height:20px}