html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0c0c0f;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(8,8,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center}
.overlay[hidden],.hud[hidden]{display:none}
.card{max-width:380px;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:#a9a9a2}
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:#a9a9a2}.small:empty{display:none}.big{font:600 40px var(--font-label)}
.cta{min-height:52px;padding:0 28px;margin-top:var(--space-2);border:0;border-radius:99px;background:#ff4a24;color:#fff;font:700 16px var(--font-body);box-shadow:0 0 24px rgba(255,74,36,.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:#a9a9a2}
.hearts{font-size:22px;letter-spacing:2px;color:#ff4a24}
.pluses{font:700 18px/1 var(--font-label);letter-spacing:1px;color:rgba(255,200,61,.3)}.pluses .on{color:#ffc83d;text-shadow:0 0 8px rgba(255,200,61,.8)}
.weapon{font:600 12px/1 var(--font-label);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:99px;border:1px solid rgba(255,166,77,.5);color:#ffb36b}
.group{display:flex;gap:var(--space-2);margin-left:auto}
.pill{font:600 13px/1 var(--font-body);color:#fff;background:rgba(20,20,24,.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,.6);font-size:15px;white-space:nowrap;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}}
.feed{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
.test-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%)}.test-dock[hidden]{display:none}.test-dock .pill{min-height:32px;padding:0 10px;font-size:12px}
.testing #status{bottom:120px}

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