html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0d0b14;color:#fff;position:fixed;inset:0;width:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:rgba(10,8,16,.76);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center;overflow:auto;touch-action:pan-y}
.overlay[hidden],.hud[hidden],.dock[hidden]{display:none}
.card{max-width:390px;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.card p{margin:0;line-height:1.45}.eyebrow{font:600 12px var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:#b0abbd}
.card a{color:#ffd23d}
h1,h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:64px;line-height:1}h2{font-size:48px}
.small{font-size:13px;color:#b0abbd}.small:empty{display:none}.big{font:600 40px var(--font-label)}
.safety{font-size:14px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,210,61,.45);background:rgba(255,210,61,.08);color:#ffe9a6}
.quote{font:600 16px var(--font-label);color:#ffd23d}.quote:empty{display:none}
.cta{min-height:52px;padding:0 28px;margin-top:var(--space-2);border:0;border-radius:99px;background:#ff3d3d;color:#fff;font:700 16px var(--font-body);box-shadow:0 0 24px rgba(255,61,61,.55)}
.cta:disabled{opacity:.5;box-shadow:none}
.hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:var(--space-3);padding:max(var(--space-3),env(safe-area-inset-top)) max(var(--space-3),env(safe-area-inset-right)) 0 max(var(--space-3),env(safe-area-inset-left));pointer-events:none}
.hud>*{pointer-events:auto;margin:0}
.score{font:700 28px/1 var(--font-label);display:flex;align-items:baseline;gap:var(--space-2)}.best{font-size:13px;font-weight:500;color:#b0abbd}
.timer{font:700 20px/1 var(--font-label);color:#ffd23d;min-width:2.5ch}.timer:empty{display:none}
.group{display:flex;gap:var(--space-2);margin-left:auto}
.pill{font:600 13px/1 var(--font-body);color:#fff;background:rgba(20,18,28,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:99px;min-height:40px;padding:0 14px}
.pill.icon{width:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}.pill svg{width:18px;height:18px;fill:currentColor}
.pill[aria-pressed=true]{background:#fff;color:#111}
#status{position:fixed;left:50%;bottom:max(var(--space-8),env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:99px;background:rgba(0,0,0,.65);font-size:15px;max-width:92vw;text-align:center;pointer-events:none}#status:empty{display:none}
@media (max-width:520px){.hud{flex-wrap:wrap}.group{width:100%;order:3;justify-content:flex-end}.pill{min-height:36px;padding:0 12px}#status{white-space:normal}}
.feed{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dock{position:fixed;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:var(--space-2) var(--space-2) max(var(--space-2),env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.7) 40%)}
.dock .pill.move{min-height:48px;padding:0 16px;font-size:15px;border-color:rgba(255,210,61,.6)}
.dock .pill.dev{min-height:32px;padding:0 10px;font-size:12px}
.docked #status{bottom:140px}

.scorecard{width:min(100%,340px);margin:var(--space-3) auto;background:#f6f1e3;color:#1a1612;border-radius:12px;padding:var(--space-3) var(--space-4);box-shadow:0 8px 30px rgba(0,0,0,.5);text-align:left;font-family:var(--font-label)}
.scorecard .big{display:block;font:700 56px/1 var(--font-label);color:#b3201a}.scorecard .small{display:block;color:#6b6254;margin-top:4px}
.sc-label{display:block;font:600 11px/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:#6b6254;margin-bottom:6px}
.sc-total{margin:0;padding-bottom:var(--space-2);border-bottom:2px solid #1a1612}
.sc-rows{margin:0}.sc-rows div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #b9ae96}.sc-rows dt{color:#4a4236}.sc-rows dd{margin:0;font-weight:700}
.sc-grade{margin:0;padding-top:var(--space-2);display:flex;justify-content:space-between;align-items:center}.sc-grade .sc-label{margin:0}.sc-grade #sc-rank{font:700 40px/1 var(--font-label);color:#b3201a;border:3px solid #b3201a;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;transform:rotate(-8deg)}

/* Phone-shaped stage: on wide screens the game sits in a centred 9:16 column. The transform makes the fixed children size to it. */
html{background:#000}
body{inset:auto;top:0;bottom:0;left:50%;width:min(100vw,calc(100dvh*9/16));transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(0,0,0,.6)}