*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#05051a;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff}
main{position:fixed;inset:0;display:flex;justify-content:center}
canvas{display:block;height:100%;width:100%;max-width:520px;background:linear-gradient(#0b0b2b,#1a0b3b 70%,#2b0f45)}
#hud{visibility:hidden;position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(100%,520px);display:flex;justify-content:space-between;padding:0 18px;font-weight:800;pointer-events:none;text-shadow:0 2px 6px #000}
#score{font-size:34px}
#best{font-size:14px;opacity:.75;align-self:center;letter-spacing:1px}
.overlay{position:absolute;inset:0;margin:0 auto;max-width:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;background:rgba(5,5,26,.55);backdrop-filter:blur(2px)}
.hidden{display:none}
h1{font-size:clamp(52px,16vw,84px);line-height:.9;letter-spacing:2px;background:linear-gradient(#ffe066,#ff6b3d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6b1d00)}
h2{font-size:56px;color:#ff6b3d;letter-spacing:2px}
.big{font-size:72px;font-weight:900}
.tag{font-size:18px;opacity:.9}
.how{font-size:14px;opacity:.7}
.bestline{font-size:16px;color:#ffe066;font-weight:700;min-height:1em}
button{font:inherit;font-weight:900;font-size:22px;letter-spacing:1px;color:#2b0f45;background:#ffe066;border:0;border-radius:999px;padding:18px 40px;box-shadow:0 6px 0 #c79a00;cursor:pointer;animation:pulse 1.2s ease-in-out infinite}
button:active{transform:translateY(4px);box-shadow:0 2px 0 #c79a00}
button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes pulse{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){button{animation:none}}