/* GRAVITAS — Neon-Void family look */
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('fonts/SpaceGrotesk-500-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('fonts/SpaceGrotesk-700-normal-latin.woff2') format('woff2'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #04060d; color: #eef2ff; font-family: 'Space Grotesk', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; display: block; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(115% 95% at 50% 45%, transparent 55%, rgba(0,0,0,.5) 100%); }

#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 1.2rem; pointer-events: none; z-index: 5; font-weight: 700; font-size: .92rem; letter-spacing: .05em; text-shadow: 0 0 16px rgba(232,121,249,.5); }
#hudWell b { color: #fbbf24; }
#btnRetry2 { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; z-index: 6; width: auto; padding: .7rem 1.1rem; border-radius: 1rem; font-size: .95rem; }
#btnPause { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 12px; z-index: 6; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: grid; place-items: center; }

#toast { position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: clamp(.85rem, 3.2vw, 1.15rem); text-shadow: 0 0 22px rgba(251,191,36,.9); opacity: 0; transition: opacity .25s, transform .25s; }
#toast.show { opacity: 1; transform: translateX(-50%) scale(1.05); }

.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 3rem); overflow-y: auto; text-align: center; z-index: 10; background: rgba(8,12,26,.82); border: 1px solid rgba(148,163,200,.16); border-radius: 1.4rem; padding: 1.9rem 1.5rem; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 28px 90px -24px rgba(0,0,0,.9), 0 0 70px -30px rgba(251,191,36,.25); animation: panelIn .4s cubic-bezier(.2,.95,.3,1.15); }
.panel.slim { width: min(22rem, calc(100vw - 3rem)); }
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.95); } }
.hidden { display: none !important; }
h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: .16em; color: #fbbf24; text-shadow: 0 0 26px rgba(251,191,36,.5); }
h1 .mag { color: #e879f9; text-shadow: 0 0 26px rgba(232,121,249,.6); }
h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; }
.tag { color: #94a3c8; margin: .7rem 0 1.4rem; line-height: 1.55; font-weight: 500; }
.hint { color: #64748b; font-size: .75rem; margin-top: 1rem; line-height: 1.5; font-weight: 500; }
button { display: block; width: 100%; margin: .45rem 0; padding: .85rem 1.2rem; font: inherit; font-weight: 700; letter-spacing: .04em; color: #eef2ff; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,200,.24); border-radius: 1rem; transition: transform .12s, border-color .2s, box-shadow .2s; }
button:hover, button:focus-visible { border-color: #fbbf24; box-shadow: 0 0 26px -8px rgba(251,191,36,.9); transform: translateY(-1px); }
button.big { font-size: 1.12rem; padding: 1rem 1.2rem; color: #04060d; background: linear-gradient(100deg, #fbbf24, #e879f9 75%); border: none; box-shadow: 0 12px 36px -10px rgba(251,191,36,.7), inset 0 1px 0 rgba(255,255,255,.35); }
button.big:hover { filter: brightness(1.1); }
#menuStats, #ceStats, #wdInfo { color: #94a3c8; font-size: .84rem; margin-top: .8rem; line-height: 1.7; font-weight: 500; }
#menuStats b, #ceStats b, #wdInfo b { color: #eef2ff; }
#goScore { font-size: clamp(2.2rem, 9vw, 3.2rem); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(251,191,36,.7); }
#goDelta { font-weight: 700; margin: .3rem 0 .8rem; min-height: 1.3em; }
#goDelta.pb { color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,.8); }
#wdStars { font-size: 2.2rem; letter-spacing: .3em; margin: .4rem 0; filter: drop-shadow(0 0 14px rgba(251,191,36,.8)); }
#ceGrid { font-size: 1.5rem; letter-spacing: .25em; margin: .5rem 0 .8rem; }
.helpBody { text-align: left; margin-top: .8rem; }
.helpBody p { color: #94a3c8; font-size: .86rem; line-height: 1.6; margin-bottom: .7rem; font-weight: 500; }
.helpBody b { color: #eef2ff; }
.helpBody kbd { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; border: 1px solid rgba(148,163,200,.3); border-radius: .3rem; padding: 0 .3rem; color: #eef2ff; }
footer { position: fixed; bottom: max(6px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; color: #475569; font-size: .68rem; z-index: 4; pointer-events: none; font-weight: 500; }
footer a, footer #soundToggle { pointer-events: auto; color: #64748b; text-decoration: none; cursor: pointer; }
footer a:hover, footer #soundToggle:hover { color: #94a3c8; }