*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;overflow:hidden;background:#1a1040;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:none;overscroll-behavior:none;position:fixed;inset:0;
}
#app{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{
  position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(12px + env(safe-area-inset-top)) 18px 0;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:700}
#score,#level,#best{font-size:28px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.hleft,.hmid,.hright{min-width:72px}
.hmid{text-align:center}.hright{text-align:right}
#fever{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);
  z-index:4;pointer-events:none;font-weight:900;font-size:42px;letter-spacing:.08em;
  color:#ffe56a;text-shadow:0 0 20px #ff6ad5,0 4px 0 rgba(0,0,0,.25);
  animation:pulse .35s ease-in-out infinite alternate;
}
@keyframes pulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.08)}}
#toast{
  position:absolute;left:50%;top:30%;transform:translateX(-50%);
  z-index:4;pointer-events:none;font-weight:900;font-size:34px;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
}
#overlay{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:rgba(12,8,32,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;
  padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}
#overlay.show{opacity:1;pointer-events:auto}
.card{
  width:min(340px,100%);text-align:center;color:#fff;
  background:linear-gradient(180deg,#3a2a7a,#2a1a5c);
  border:3px solid #fff;border-radius:28px;padding:28px 22px 20px;
  box-shadow:0 12px 0 #120a30,0 20px 40px rgba(0,0,0,.45);
}
#logo{
  font-size:64px;font-weight:900;letter-spacing:.04em;line-height:1;
  background:linear-gradient(90deg,#ff6ad5,#ffe56a,#6af0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));
}
#tag{margin:12px 0 18px;font-size:16px;line-height:1.4;opacity:.92;font-weight:600}
#endstats{margin:4px 0 14px}
.big{font-size:64px;font-weight:900;line-height:1}
#newbest{
  display:inline-block;margin-top:8px;font-size:13px;font-weight:900;letter-spacing:.12em;
  color:#1a1040;background:#ffe56a;border-radius:999px;padding:6px 12px;
}
#btn{
  appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:900;font-size:22px;
  letter-spacing:.06em;color:#1a1040;background:#fff;border-radius:999px;
  padding:16px 48px;box-shadow:0 6px 0 #ff6ad5;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:180px;
}
#btn:active{transform:translateY(4px);box-shadow:0 2px 0 #ff6ad5}
.hint{margin-top:14px;font-size:12px;opacity:.55;font-weight:600}