* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a1433; color: #fff4dc; font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hud { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; pointer-events: none; }
.score { font: 900 clamp(48px, 11vmin, 88px)/1 ui-rounded, system-ui, sans-serif; letter-spacing: -2px; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.best { margin-top: 4px; font-size: 14px; opacity: .75; }
.pause { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,244,220,.14); color: #fff4dc; font: 800 14px system-ui; letter-spacing: 1px; cursor: pointer; }
.pause:hover { background: rgba(255,244,220,.24); }

.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(30, 10, 34, .55); backdrop-filter: blur(3px); }
.screen[hidden] { display: none; }
.card { width: min(420px, 100%); text-align: center; background: #fff4dc; color: #3a1a2c; border-radius: 26px; padding: 30px 26px 26px; box-shadow: 0 10px 0 #d9a441, 0 30px 60px rgba(0,0,0,.35); animation: pop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.85) translateY(20px); opacity: 0; } }
h1, h2 { margin: 0 0 10px; font: 900 clamp(38px, 9vmin, 56px)/1 ui-rounded, system-ui, sans-serif; letter-spacing: -1.5px; color: #e2462b; }
h2 { font-size: clamp(30px, 7vmin, 42px); }
p { margin: 0 0 18px; font-size: 16px; line-height: 1.45; }
.big { font-size: 22px; margin-bottom: 6px; }
.big b { font-size: 46px; color: #e2462b; }
.small { margin: 16px 0 0; font-size: 14px; opacity: .7; }
.go { font: 800 19px ui-rounded, system-ui, sans-serif; padding: 15px 34px; border: 0; border-radius: 999px; background: #ffc23c; color: #3a1a2c; box-shadow: 0 5px 0 #c98d16; cursor: pointer; transition: transform .08s; }
.go:hover { background: #ffcf5e; }
.go:active { transform: translateY(3px); box-shadow: 0 2px 0 #c98d16; }
.go:focus-visible, .pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }