:root{--bg:#10091a;--surface:#24152b;--text:#fff4dc;--muted:#d0bdcc;--accent:#65d9c8;--accent-2:#b178b5;--warn:#ffe48d;--bad:#ff7691;--radius:18px;color-scheme:dark}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font:inherit}
#game-shell,#game{position:fixed;inset:0;width:100%;height:100%}
#game{display:block;background:#10091a;cursor:pointer}
.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% 12%,rgba(101,217,200,.15),transparent 34%),linear-gradient(rgba(11,6,18,.18),rgba(11,6,18,.72));backdrop-filter:blur(3px)}
.panel-layer[hidden],#hud[hidden]{display:none!important}
.title-card,.result-card{position:relative;width:min(650px,100%);padding:clamp(1rem,4vw,2rem);border:1px solid rgba(177,120,181,.42);border-radius:calc(var(--radius) + 8px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 91%,transparent),color-mix(in srgb,var(--bg) 84%,transparent));box-shadow:0 24px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.07);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.7rem,10vw,5.6rem);letter-spacing:-.06em;text-shadow:0 0 34px rgba(101,217,200,.3)}#title-hero .hhb__subtitle{margin-inline:auto;color:var(--muted)}#title-hero .hhb__eyebrow{color:var(--accent);letter-spacing:.18em}
.controls-line{margin:1rem auto;color:var(--muted);font-size:.95rem}.best-line{margin:.85rem 0 0;color:var(--muted)}.best-line strong{color:var(--warn)}
.primary-button{min-width:190px;min-height:52px;padding:.8rem 1.4rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:linear-gradient(135deg,var(--accent),#b8f0b3);color:#0a1715;font-weight:950;letter-spacing:.035em;cursor:pointer;box-shadow:0 8px 30px rgba(101,217,200,.24);transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(101,217,200,.4)}.primary-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.45rem);letter-spacing:-.04em}.eyebrow{margin:0;color:var(--accent);font-weight:900;letter-spacing:.13em;text-transform:uppercase;font-size:.72rem}.final-score{font-size:1.05rem}.final-score strong{display:block;color:var(--warn);font-size:4rem;line-height:1.05}
#hud{position:fixed;z-index:10;inset:0;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:.5rem}.hud-chip{min-width:82px;padding:.48rem .7rem;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(19,10,29,.68);backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(0,0,0,.16)}.hud-chip span{display:block;color:var(--muted);font-size:.61rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.hud-chip strong{color:var(--text);font-size:1.2rem}.firefly-chip strong{font-size:.74rem;color:var(--warn)}.firefly-chip.ready{border-color:rgba(255,228,141,.65);box-shadow:0 0 22px rgba(255,228,141,.22)}
.charge-meter{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:min(250px,32vw);height:40px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(19,10,29,.74);backdrop-filter:blur(8px)}.charge-meter span{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#69d1a8,var(--warn),#ff9b75);transform:scaleX(0);transform-origin:left center}.charge-meter b{position:relative;display:grid;place-items:center;height:100%;font-size:.67rem;letter-spacing:.13em;text-shadow:0 1px 5px #000}
#hint{position:fixed;z-index:11;left:50%;bottom:max(40px,calc(env(safe-area-inset-bottom) + 30px));transform:translateX(-50%);padding:.52rem .85rem;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(18,9,28,.62);color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .25s}#hint.show{opacity:1}
#splash{position:fixed;z-index:12;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 68%,rgba(112,224,225,.5),transparent 15%);opacity:0;transition:opacity .18s}#splash.show{opacity:1}
footer{position:fixed;z-index:8;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));color:rgba(255,244,220,.46);font-size:.64rem;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(max-width:600px){.panel-layer{padding:12px}.title-card{padding:14px}.controls-line{font-size:.78rem}.hud-chip{min-width:66px;padding:.4rem .5rem}.hud-chip strong{font-size:1rem}.firefly-chip{position:absolute;top:66px;left:max(14px,env(safe-area-inset-left))}.charge-meter{width:164px}.charge-meter b{font-size:.6rem}footer{font-size:.56rem;bottom:max(4px,env(safe-area-inset-bottom));right:max(6px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}