@font-face { font-family: 'Nunito Orbita'; src: url('vendor/nunito-wght.ttf') format('truetype'); font-weight: 200 1000; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070a1c; color: #f4f1ff; font-family: 'Nunito Orbita', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

#hud { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 18px); text-align: center; pointer-events: none; }
#score { font-size: 64px; font-weight: 1000; line-height: 1; text-shadow: 0 0 24px rgba(140, 170, 255, .55); transition: transform .15s; }
#score.pop { transform: scale(1.25); }
#best { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .18em; opacity: .55; }

#panel { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(ellipse at center, rgba(7, 10, 28, .35), rgba(7, 10, 28, .75)); }
#panel h1 { margin: 0; font-size: clamp(52px, 15vw, 96px); font-weight: 1000; letter-spacing: .08em; background: linear-gradient(#fff 30%, #9fb4ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(120, 150, 255, .6)); }
#panel p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; opacity: .8; }
#result { display: flex; flex-direction: column; align-items: center; }
#result b { font-size: 84px; font-weight: 1000; line-height: 1; }
#result span { font-size: 13px; font-weight: 800; letter-spacing: .16em; opacity: .65; }
#play { font: inherit; font-size: 22px; font-weight: 1000; letter-spacing: .12em; color: #10132e; background: linear-gradient(#ffe68a, #ffbf3f); border: 0; border-radius: 999px; padding: 16px 44px; margin-top: 8px; cursor: pointer; box-shadow: 0 0 30px rgba(255, 196, 70, .45), 0 6px 0 #c27f12; transition: transform .08s, box-shadow .08s; }
#play:active { transform: translateY(4px); box-shadow: 0 0 30px rgba(255, 196, 70, .45), 0 2px 0 #c27f12; }
#daily { font-size: 12px; font-weight: 800; letter-spacing: .14em; opacity: .5; }

#pace { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#pace button { font: inherit; font-size: 13px; font-weight: 900; letter-spacing: .14em; color: #f4f1ff; background: transparent; border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; opacity: .6; transition: background .2s, opacity .2s, color .2s; }
#pace button.on { background: #f4f1ff; color: #10132e; opacity: 1; }