:root{
  --ink:#f3ecf6;
  --muted:rgba(243,236,246,.62);
  --dot:#ff3b46;
  --dot-glow:#ff6a5a;
  --zoom:#ffd23d;
  --accent:#ff5e7e;
  --good:#7ee0a6;
  --panel:#fff8f1;
  --panel-ink:#3a2c44;
  --chip:rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Quicksand', ui-rounded, 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 50% -10%, #3a2e46 0%, #281f33 55%, #1b1525 100%) fixed;
  display:flex; align-items:center; justify-content:center;
  padding:12px; min-height:100%;
  -webkit-user-select:none; user-select:none; overflow:hidden;
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Fit the locked-aspect stage inside BOTH the available width and height (embed/short-viewport safe). 25/18 ≈ 1.389 */
.wrap{ width:min(760px, 96vw, calc((100vh - 84px) * 1.389)); margin:auto; }

/* ---------------- Stage ---------------- */
.stage{
  position:relative; width:100%; aspect-ratio:25/18; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  background:#241c2b; cursor:none; touch-action:none;
}
.stage.shake{ animation:shake .32s ease; }
@keyframes shake{ 0%,100%{transform:translate(0,0)} 25%{transform:translate(-6px,3px)} 50%{transform:translate(5px,-4px)} 75%{transform:translate(-3px,2px)} }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------------- HUD ---------------- */
.hud{ position:absolute; inset:0; pointer-events:none; z-index:5; padding:12px; }
.hud-top{ display:flex; gap:8px; align-items:center; }
.chip{
  display:flex; flex-direction:column; align-items:center; line-height:1;
  background:var(--chip); border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:6px 12px; min-width:62px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.chip .lbl{ font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; font-weight:800; margin-bottom:3px; }
.chip b{ font-size:1.15rem; font-weight:900; }
.chip.time b{ font-variant-numeric:tabular-nums; }
.chip.time.low b{ color:var(--dot); }
.chip.ghost{ opacity:.7; }
.iconbtn{
  margin-left:auto; pointer-events:auto; width:40px; height:40px; border-radius:12px;
  background:var(--chip); border:1px solid rgba(255,255,255,.1); color:var(--ink);
  font-size:1.05rem; cursor:pointer; backdrop-filter:blur(6px);
}
.iconbtn:active{ transform:scale(.94); }

.zoomies{
  position:relative; margin-top:10px; height:16px; border-radius:10px; overflow:hidden;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); max-width:340px;
}
.zoomies-fill{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, #ff9e3d, var(--zoom));
  box-shadow:0 0 14px rgba(255,210,61,.6); transition:width .12s linear;
}
.zoomies-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:900; letter-spacing:.18em; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.zoomies.ready{ animation:zoomready .5s ease-in-out infinite alternate; }
@keyframes zoomready{ from{ box-shadow:0 0 0 0 rgba(255,210,61,.0);} to{ box-shadow:0 0 16px 2px rgba(255,210,61,.7);} }

.zen-done{
  position:absolute; top:12px; right:12px; z-index:6; display:none; pointer-events:auto;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:var(--ink);
  border-radius:12px; padding:8px 16px; font-weight:800; font-family:inherit; cursor:pointer;
  backdrop-filter:blur(6px);
}
.zen-done.show{ display:block; }

/* ---------------- Overlays ---------------- */
.overlay{
  position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,28,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .3s ease; padding:14px; cursor:default;
}
.overlay.active{ opacity:1; pointer-events:auto; }
.panel{
  width:100%; max-width:360px; text-align:center; color:var(--panel-ink);
  background:var(--panel); border-radius:22px; padding:22px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); border:3px solid #ffe2d0;
}
.overlay.active .panel{ animation:pin .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes pin{ from{ transform:translateY(16px) scale(.92); opacity:0;} to{ transform:none; opacity:1;} }

.logo{ font-size:2rem; font-weight:900; color:#e84b62; line-height:1.05; letter-spacing:.3px; }
.logo.small{ font-size:1.6rem; }
.logo .rampage{ color:#ff8a3c; }
.logo .dot{ color:var(--dot); font-style:normal; animation:dotpulse 1s ease-in-out infinite; display:inline-block; }
@keyframes dotpulse{ 50%{ transform:scale(1.25); filter:drop-shadow(0 0 6px var(--dot)); } }
.tag{ margin:8px 0 12px; font-weight:600; opacity:.82; font-size:.95rem; }
.rules{ list-style:none; padding:0; margin:0 auto 12px; display:inline-block; text-align:left; }
.rules li{ margin:8px 0; font-weight:600; font-size:.92rem; }
.rules b{ color:#e84b62; }
.rules .emo{ display:inline-block; width:1.7rem; }

.modes{ display:flex; gap:8px; margin:4px 0 4px; }
.mode{
  flex:1; font-family:inherit; font-weight:800; font-size:.95rem; cursor:pointer; color:#6c5570;
  background:#fff1e6; border:2px solid #ffe0c8; border-radius:14px; padding:10px 6px;
  display:flex; flex-direction:column; gap:2px; transition:transform .1s;
}
.mode small{ font-weight:700; font-size:.66rem; opacity:.7; }
.mode.sel{ border-color:#ff8a3c; background:#fff3e0; color:#d9521f; box-shadow:0 0 0 3px rgba(255,138,60,.2); }
.mode:active{ transform:translateY(2px); }

.btn{
  margin-top:14px; font-family:inherit; font-size:1.05rem; font-weight:800; color:#fff;
  background:linear-gradient(#ff7a6a,#ef4d6b); border:none; border-radius:15px; padding:12px 30px;
  cursor:pointer; box-shadow:0 6px 0 #c8385a, 0 10px 18px rgba(230,80,110,.4);
}
.btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #c8385a; }
.btn.ghostbtn{ background:#fff1e6; color:#c2607a; box-shadow:0 6px 0 #f0cdbb; }
.btn.ghostbtn:active{ box-shadow:0 3px 0 #f0cdbb; }
.overbtns{ display:flex; gap:10px; justify-content:center; }
.hi{ margin-top:10px; font-weight:700; opacity:.78; font-size:.85rem; }
.rank{ font-size:1.1rem; font-weight:800; color:#d9622f; margin:4px 0; }
.scoreboard{ display:flex; gap:8px; margin-top:10px; }
.scoreboard>div{ flex:1; background:#fff1e6; border:2px solid #ffe0c8; border-radius:13px; padding:8px 4px; }
.scoreboard .lbl{ display:block; font-size:.55rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; opacity:.6; }
.scoreboard b{ font-size:1.2rem; }
.newhigh{ margin-top:9px; font-weight:900; color:#e84b62; display:none; }

.foot{ text-align:center; font-size:.72rem; opacity:.5; margin-top:10px; font-weight:600; }

@media (max-width:430px){
  .logo{ font-size:1.65rem; }
  .chip{ min-width:52px; padding:5px 9px; }
  .chip b{ font-size:1rem; }
  .foot{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; }
  .logo .dot{ animation:none; }
}