:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#090909; color:#fff; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#090909; }
body { min-height:100svh; overflow:hidden; }
button, input { font:inherit; }
.app { min-height:100svh; display:grid; grid-template-rows:auto 1fr auto auto; align-items:center; justify-items:center; gap:16px; padding:clamp(18px,4vw,42px); }
.counter-wrap { width:min(100%,1200px); text-align:center; }
.eyebrow { font-size:.78rem; letter-spacing:.28em; opacity:.58; margin-bottom:8px; }
.counter-scroller { width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding:0 3px 6px; }
.counter { width:max-content; min-width:100%; text-align:center; font-weight:950; font-variant-numeric:tabular-nums; font-size:clamp(2.1rem,9vw,7.5rem); line-height:1; letter-spacing:-.05em; white-space:nowrap; }
.status { min-height:1.25em; font-size:.8rem; opacity:.45; margin-top:8px; }
.red-button { width:min(68vmin,560px); height:min(68vmin,560px); min-width:230px; min-height:230px; border-radius:50%; border:clamp(10px,1.8vmin,18px) solid #520000; background:radial-gradient(circle at 36% 28%,#ff5a5a 0,#ef1111 30%,#ba0000 68%,#850000 100%); box-shadow:0 22px 0 #560000, 0 32px 55px rgba(255,0,0,.22), inset 0 8px 18px rgba(255,255,255,.16), inset 0 -16px 30px rgba(80,0,0,.34); color:white; cursor:pointer; user-select:none; touch-action:manipulation; transition:transform .045s ease,box-shadow .045s ease,filter .1s ease; }
.red-button span { font-weight:1000; font-size:clamp(2rem,8vmin,5.5rem); letter-spacing:.04em; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.red-button:active,.red-button.pressed { transform:translateY(12px); box-shadow:0 10px 0 #560000,0 18px 32px rgba(255,0,0,.2),inset 0 8px 18px rgba(255,255,255,.12),inset 0 -12px 22px rgba(80,0,0,.32); filter:brightness(.94); }
.mine { font-size:.82rem; letter-spacing:.08em; opacity:.72; }
.mine strong { color:#ff4040; font-variant-numeric:tabular-nums; }
footer { display:flex; align-items:center; gap:10px; font-size:.78rem; opacity:.62; }
.link-btn { color:inherit; background:none; border:0; padding:6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.modal { width:min(92vw,560px); max-height:82svh; overflow:auto; color:#fff; background:#151515; border:1px solid #343434; border-radius:18px; padding:26px; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.modal::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.modal h2 { margin-top:0; font-size:1.7rem; }
.modal p,.modal li,.modal small { color:#cfcfcf; line-height:1.5; }
.modal .close { position:absolute; top:10px; right:14px; border:0; background:none; color:#fff; font-size:1.8rem; cursor:pointer; }
.name-row { display:flex; gap:8px; margin-top:7px; }
.name-row input { flex:1; min-width:0; background:#090909; border:1px solid #3b3b3b; color:#fff; border-radius:9px; padding:10px 12px; }
.name-row button { border:0; border-radius:9px; padding:10px 16px; background:#d81313; color:#fff; font-weight:800; cursor:pointer; }
.leaderboard { display:grid; gap:5px; }
.lb-row { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; padding:9px 10px; border-radius:9px; background:#0d0d0d; }
.lb-row:nth-child(-n+3) { background:#211010; }
.lb-rank { opacity:.55; }
.lb-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score { font-variant-numeric:tabular-nums; font-weight:800; }
@media (max-height:680px) { .app { gap:9px; padding:14px; } .red-button { width:min(52vmin,420px); height:min(52vmin,420px); min-width:190px; min-height:190px; } }

.hidden { display:none !important; }
.muted { color:#aaa !important; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin:18px 0; background:#0b0b0b; border:1px solid #303030; border-radius:12px; }
.auth-tab { border:0; background:transparent; color:#aaa; padding:10px 12px; border-radius:8px; cursor:pointer; font-weight:750; }
.auth-tab.active { background:#252525; color:#fff; }
.auth-form { display:grid; gap:8px; }
.auth-form label { margin-top:6px; font-size:.85rem; color:#ddd; }
.auth-form input { width:100%; background:#090909; border:1px solid #3b3b3b; color:#fff; border-radius:9px; padding:11px 12px; outline:none; }
.auth-form input:focus { border-color:#777; }
.primary,.secondary { margin-top:8px; border:0; border-radius:9px; padding:11px 16px; color:#fff; font-weight:800; cursor:pointer; }
.primary { background:#d81313; }
.secondary { background:#333; }
.auth-message { min-height:1.4em; margin-top:12px; color:#ff8d8d; font-size:.9rem; }


/* Live score motion */
.counter-stage { position:relative; width:100%; min-width:0; }
.button-stage { position:relative; display:grid; place-items:center; }
.float-layer { position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:30; }
.float-score { position:absolute; left:50%; font-weight:950; font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,.75); opacity:0; will-change:transform,opacity; }
.float-score.global { top:64%; color:#ff6666; font-size:clamp(.95rem,2.1vw,1.5rem); }
.float-score.local { top:48%; color:#fff; font-size:clamp(1rem,3vw,1.9rem); }