:root{--bg:#08070a;--surface:#19121c;--text:#f7efe4;--muted:#c7b8c4;--accent:#6dd5cf;--accent-2:#ac82b3;--ok:#74d9cf;--warn:#ead9ad;--bad:#ff7895;--radius:18px;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none;overscroll-behavior:none}
button{font:inherit}
#game-shell,#scene{position:fixed;inset:0;width:100%;height:100%}
#scene{display:block;background:linear-gradient(#080817,#170d24 60%,#25152c)}
.panel-layer{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:radial-gradient(circle at 50% 15%,rgba(109,213,207,.12),transparent 35%),linear-gradient(rgba(8,7,10,.28),rgba(8,7,10,.72));backdrop-filter:blur(3px)}
.panel-layer[hidden],#hud[hidden],#touch-controls[hidden]{display:none!important}
.title-card,.result-card{position:relative;width:min(650px,100%);padding:clamp(1rem,4vw,2rem);border:1px solid rgba(172,130,179,.42);border-radius:calc(var(--radius) + 8px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--bg) 82%,transparent));box-shadow:0 24px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06);text-align:center}
#title-hero .hhb{background:transparent;border:0}#title-hero .hhb__inner{min-height:0}#title-hero .hhb__content{padding:.6rem;align-self:center;text-align:center}#title-hero .hhb__title{max-width:none;font-size:clamp(2.2rem,8vw,5rem);letter-spacing:-.055em;text-shadow:0 0 32px rgba(109,213,207,.28)}#title-hero .hhb__subtitle{margin-inline:auto;color:var(--muted)}#title-hero .hhb__eyebrow{color:var(--accent);letter-spacing:.2em}
.controls-line{margin:1rem auto;color:var(--muted);font-size:.95rem}.best-line{margin:.8rem 0 0;color:var(--muted)}.best-line strong{color:var(--warn)}
.primary-button{min-width:180px;min-height:52px;padding:.8rem 1.3rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:linear-gradient(135deg,var(--accent),#a9f0cf);color:#081213;font-weight:900;letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 30px rgba(109,213,207,.25);transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(109,213,207,.38)}.primary-button:focus-visible,#boost-button:focus-visible{outline:3px solid var(--warn);outline-offset:4px}
#theme-slot{justify-content:center;margin:1rem auto 0}.theme-picker--icon-only .theme-picker__choices{bottom:auto;top:calc(100% + .4rem);left:50%;right:auto;transform:translateX(-50%)}
.result-card{width:min(440px,100%)}.result-card h2{margin:.25rem 0;font-size:clamp(2rem,7vw,3.5rem)}.eyebrow{margin:0;color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}.final-score{font-size:1.15rem}.final-score strong{display:block;color:var(--warn);font-size:4rem;line-height:1}
#hud{position:fixed;z-index:10;inset:0;pointer-events:none;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;align-items:flex-start;gap:.55rem}.hud-chip{min-width:92px;padding:.55rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(15,10,24,.68);backdrop-filter:blur(8px)}.hud-chip span{display:block;color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hud-chip strong{color:var(--text);font-size:1.3rem}.boost-meter{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:min(230px,34vw);height:38px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(15,10,24,.72)}.boost-meter span{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#8e58ac,var(--accent));transform-origin:left center;transition:transform .08s linear}.boost-meter b{position:relative;display:grid;place-items:center;height:100%;font-size:.68rem;letter-spacing:.12em;text-shadow:0 1px 5px #000}
#touch-controls{position:fixed;z-index:12;inset:0;pointer-events:none}.stick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:126px;height:126px;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(109,213,207,.1),rgba(18,10,28,.45));pointer-events:auto;touch-action:none}.stick::before,.stick::after{content:"";position:absolute;background:rgba(255,255,255,.11)}.stick::before{left:50%;top:12%;bottom:12%;width:1px}.stick::after{top:50%;left:12%;right:12%;height:1px}#stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e5fff6,var(--accent) 55%,#3a817e);box-shadow:0 0 24px rgba(109,213,207,.5)}#boost-button{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(34px,env(safe-area-inset-bottom));width:94px;height:94px;border:2px solid rgba(255,255,255,.35);border-radius:50%;background:radial-gradient(circle at 35% 25%,#f4dfff,var(--accent-2) 55%,#5e3568);color:#fff;font-size:.8rem;font-weight:950;letter-spacing:.1em;box-shadow:0 0 25px rgba(172,130,179,.45);pointer-events:auto;touch-action:none}#boost-button:active{transform:scale(.94)}#boost-button[disabled]{opacity:.42;filter:saturate(.35)}
#flash{position:fixed;z-index:11;left:50%;top:24%;transform:translate(-50%,-50%);color:var(--warn);font-size:clamp(1.1rem,4vw,2rem);font-weight:950;letter-spacing:.08em;text-shadow:0 2px 14px #000;pointer-events:none;opacity:0;transition:opacity .16s,transform .28s}#flash.show{opacity:1;transform:translate(-50%,-70%)}
footer{position:fixed;z-index:8;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));color:rgba(247,239,228,.48);font-size:.65rem;letter-spacing:.05em;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (hover:none),(pointer:coarse){footer{right:auto;left:50%;bottom:auto;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);font-size:.6rem}}
@media (max-width:600px){.panel-layer{padding:12px}.title-card{padding:14px}.controls-line{font-size:.78rem}.boost-meter{top:70px;width:148px}.hud-chip{min-width:75px;padding:.42rem .58rem}.hud-chip strong{font-size:1.05rem}.stick{width:112px;height:112px}#boost-button{width:84px;height:84px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}