
:root{color-scheme:dark;--bg:#0a0d17;--panel:#111725;--text:#f1f3e9;--muted:#8b95a8;--accent:#c3ff83;--line:#ffffff17;--pink:#ff738b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}button,select{font:inherit}button{color:inherit;background:transparent;border:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:40px}button:hover{border-color:#ffffff70}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.3;cursor:default}#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{height:80px;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 28px;border-bottom:1px solid var(--line);background:#0b0f19;z-index:3}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-size:17px;font-weight:900;letter-spacing:-.4px;white-space:nowrap}.brand svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:3}.brand-light{font-weight:400;margin-left:3px;color:var(--accent)}.brand small{display:block;font:7px monospace;letter-spacing:1.2px;color:var(--muted);margin-top:5px}.era-control{text-align:center}.era-label{display:block;font:7px monospace;letter-spacing:1.3px;color:var(--muted);margin-bottom:7px}#mode{padding:4px;display:flex;gap:5px;align-items:center;border-radius:7px;background:#181e2b;font:10px monospace;letter-spacing:.8px;min-height:34px}#mode>span{padding:7px 10px;color:#8f98ab;border-radius:3px}#mode .selected{background:var(--accent);color:#182218}#mode i{font-style:normal;font-size:16px}kbd{font:9px monospace;border:1px solid #ffffff25;padding:3px 5px;border-radius:3px;color:#9ca8bd;margin-right:5px}.header-actions{display:flex;gap:8px}.header-actions button{border-radius:50%;width:38px;min-height:38px;font-size:15px}#sound{font:10px monospace;border-radius:4px;width:auto;padding:0 11px;color:#b9c0cf}.scorebar{height:64px;min-height:64px;padding:0 max(28px,calc((100vw - 750px)/2));display:flex;justify-content:space-between;gap:35px;align-items:center;border-bottom:1px solid var(--line);z-index:2;background:#0d111c}.scorebar>div{min-width:70px}.scorebar span{display:block;font:8px monospace;color:var(--muted);letter-spacing:1px;white-space:nowrap}.scorebar strong{display:block;font:20px monospace;color:#f1f3ed;margin-top:5px;letter-spacing:1px}.scorebar small{font:11px monospace;color:#657187}.scorebar b{font-weight:400}#lives{color:var(--pink);font-size:14px;letter-spacing:3px}#stage{position:relative;min-height:0;flex:1;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,#1c2840 0%,#0b101b 48%,#080c13 100%);touch-action:none;isolation:isolate}#stage>canvas{position:absolute;width:100%;height:100%;inset:0;display:block;touch-action:none}#retroCanvas{image-rendering:pixelated}.scanlines{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 4px);z-index:1}body[data-mode=retro] .scanlines{opacity:.5}body[data-mode=retro]{--accent:#ffc578}body[data-mode=retro] #stage{background:#090b14}.stage-aside{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;max-width:215px}.stage-aside.left{left:5%}.stage-aside.right{right:5%}.micro{font:8px monospace;letter-spacing:1.6px;color:#606e86}.vertical-title{font-size:clamp(28px,3.5vw,55px);font-weight:900;line-height:.97;letter-spacing:-2px;margin-top:23px;color:#2c3547}.vertical-title em{font-style:normal;color:#4d6555}.stage-aside p{font-size:12px;color:#67758d;line-height:1.7}.aside-line{height:1px;background:var(--line);margin:25px 0}.power-legend{display:flex;flex-direction:column;gap:22px;margin-top:23px}.power-legend>div{display:flex;gap:12px;align-items:center}.power-legend b{width:33px;height:33px;display:grid;place-items:center;font:14px monospace;border:1px solid currentColor;border-radius:6px}.wide{color:#78e6fc}.split{color:#c5ff8b}.charge{color:#ff8297}.power-legend span{font:9px monospace;letter-spacing:1px;color:#9da9bf}.power-legend small{display:block;font:11px Arial;color:#67758d;margin-top:6px;letter-spacing:0}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;background:linear-gradient(90deg,#090d17fc 0%,#090d17ed 22%,#090d17a6 40%,#090d1700 72%);overflow:auto}.intro{margin-left:6%;max-width:480px;padding:22px 0}.eyebrow{font:8px monospace;letter-spacing:1.8px;color:var(--accent)}h1{font-size:clamp(48px,6.8vw,94px);font-weight:900;line-height:.9;letter-spacing:-5px;margin:24px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{font-size:15px;color:#a8b2c5;line-height:1.7;margin:20px 0}.primary{background:var(--accent);color:#192217;border:0;border-radius:3px;padding:17px 20px;display:flex;gap:30px;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;min-width:270px;min-height:52px}.primary:hover{filter:brightness(1.08)}.primary span{font-size:20px}#introHint{font:9px monospace;color:#8793aa;margin-top:14px;line-height:1.6}.intro-bottom{display:flex;gap:19px;margin-top:30px;color:#65728b;font:7px monospace;letter-spacing:1px}.overlay.result{background:#090e19dc;backdrop-filter:blur(7px);justify-content:center}.overlay.result .intro{margin:0;text-align:center;padding:24px;max-width:600px}.overlay.result h1{font-size:clamp(35px,5vw,65px);letter-spacing:-2px}.overlay.result .primary{margin:auto}.overlay.result .intro-bottom{justify-content:center}.overlay.result #introHint{color:#9ca9bf}.overlay.result .intro p{font-size:15px}#notice{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font:800 18px Arial;letter-spacing:.6px;text-align:center;color:var(--accent);text-shadow:0 2px 15px #000;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}#notice.on{opacity:1}#combo{position:absolute;left:50%;top:46%;transform:translateX(-50%);font:900 34px Arial;color:#ffffff1c;pointer-events:none}#powerTimers{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);display:flex;gap:8px;font:9px monospace;pointer-events:none;white-space:nowrap}#powerTimers span{padding:6px 9px;background:#0b1220e8;border:1px solid #ffffff30;border-radius:20px}#readyHint{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);z-index:3;text-align:center}#readyHint>span{font:8px monospace;color:#9dacbe;letter-spacing:2px;display:block;margin-bottom:10px}#readyHint .primary{min-width:195px;padding:12px 18px;min-height:44px}#touchHint{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:7px monospace;letter-spacing:1px;color:#6c7e98;pointer-events:none;display:none}.era-flash{position:absolute;inset:0;background:#d1ffbc;pointer-events:none;opacity:0;z-index:4}.era-flash.flash{animation:flash .35s ease-out}@keyframes flash{from{opacity:.22}to{opacity:0}}footer{height:38px;min-height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-top:1px solid var(--line);font:8px monospace;letter-spacing:.7px;color:#758299}footer b{font-weight:400;color:var(--accent)}footer i{font-style:normal;margin:0 10px;color:#445066}footer button{border:0;font:9px monospace;color:#9da8ba;min-height:30px;padding:5px}.nojs{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:var(--bg)}[hidden]{display:none!important}dialog{max-width:660px;width:calc(100% - 28px);max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #ffffff35;border-radius:10px;padding:25px;color:var(--text);background:#121928;box-shadow:0 20px 100px #000}dialog::backdrop{background:#02050be0;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{width:40px;border-radius:50%}dialog h2{font-size:35px;letter-spacing:-1.5px}dialog p{font-size:13px;line-height:1.7;color:#a4b0c4}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 25px;margin-top:25px}.help-grid b{font:10px monospace;color:var(--accent);letter-spacing:1px}.help-powers{display:flex;flex-wrap:wrap;gap:7px}.help-powers span{font:10px monospace;padding:8px;border:1px solid var(--line);border-radius:4px}.settings{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-top:25px}.settings label{font-size:12px}.settings select{background:#202a3d;border:1px solid var(--line);border-radius:4px;padding:9px;color:#e7eff6;font-size:12px}.settings button{padding:9px;border-radius:4px;font-size:11px}.fine{font-size:10px!important;color:#74819a!important}
@media(max-width:1050px){.stage-aside{display:none}.brand small{display:none}.scorebar{padding:0 30px}.intro{max-width:380px}h1{font-size:70px}.desktop-help{display:none}}
@media(max-width:650px){header{height:64px;min-height:64px;padding:0 12px;gap:8px}.brand{font-size:11px;gap:5px}.brand svg{width:23px;height:23px}.brand-light{display:block;margin:0;letter-spacing:1px;font-size:9px}.era-label{display:none}#mode{font-size:8px;gap:1px;padding:3px}#mode>span{padding:9px 5px}#mode i{font-size:13px}#mode kbd{display:none}.header-actions{gap:4px}.header-actions button{width:32px;min-height:38px;font-size:15px;border-radius:5px}#sound{display:none}.scorebar{height:55px;min-height:55px;padding:0 17px;gap:12px}.scorebar>div{min-width:0}.scorebar span{font-size:7px;letter-spacing:.6px}.scorebar strong{font-size:17px}.scorebar .best-readout{display:none}#lives{font-size:12px;letter-spacing:2px}.intro{margin:0;padding:25px;width:100%;max-width:430px}.intro h1{font-size:60px;letter-spacing:-3px;margin:20px 0}.intro p{font-size:14px;margin:16px 0}.eyebrow{font-size:7px;letter-spacing:1.3px}.overlay{background:linear-gradient(0deg,#090d17f5,#090d17bc 65%,#090d1744);align-items:center}.primary{width:100%;min-width:0}.intro-bottom{gap:10px;margin-top:23px;font-size:6px}.overlay.result .intro{padding:20px}.overlay.result h1{font-size:40px}.overlay.result .primary{width:auto;min-width:230px}.intro #introHint{font-size:9px}footer{height:32px;min-height:32px;padding:0 12px;font-size:7px}footer i{margin:0 6px}#notice{font-size:15px;width:80%}#combo{font-size:30px}#touchHint{display:block}#readyHint .primary{width:195px}#powerTimers{bottom:6%;font-size:8px}.help-grid{grid-template-columns:1fr;gap:0}dialog h2{font-size:28px}.settings{flex-wrap:wrap}#modeStatus{font-size:6px}}
@media(max-height:580px){header{height:48px;min-height:48px}.scorebar{height:46px;min-height:46px}.era-label,.brand small{display:none}footer{height:26px;min-height:26px}.intro{padding:12px 0}.intro h1{font-size:45px;margin:12px 0}.intro p{font-size:12px;margin:10px 0}.intro-bottom{display:none}.primary{min-height:42px;padding:10px 15px}#introHint{margin-top:8px}.overlay.result h1{font-size:34px}.overlay.result .intro{padding:12px}#readyHint{bottom:11%}#readyHint>span{display:none}#touchHint{display:none}.stage-aside{display:none}}
@media(max-width:360px){.brand svg{display:none}header{padding:0 8px}.header-actions{gap:3px}.header-actions button{width:29px}.intro h1{font-size:52px}.scorebar{padding:0 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:650px) and (max-height:580px){.intro{padding:16px 22px}.intro h1{font-size:46px}.eyebrow{font-size:6px;letter-spacing:.8px}}
.wide{color:#caff75}.split{color:#56dfed}.charge{color:#ffbb59}

.orientation-tip{display:none}@media(orientation:landscape) and (max-height:500px){.orientation-tip{display:block;position:absolute;right:3%;top:40%;width:23%;font:8px monospace;line-height:1.8;color:#71809a;pointer-events:none}.orientation-tip strong{font:12px Arial;display:block;color:#a1b0c6;margin-top:6px}}

/* Orbital edition */
:root{--accent:#65f8ef}header{background:#090d1bd9}.scorebar{background:#0a1020e8}.year{display:block;font:300 48px monospace;letter-spacing:12px;color:#8da6cd;margin-top:18px}.stage-aside.left{left:3%}.stage-aside.right{right:3%}.vertical-title{color:#8d9fbd80;font-size:clamp(28px,3vw,48px)}.vertical-title em{color:#61ccdf88}.stage-aside p,.micro{color:#859cba}.overlay{background:linear-gradient(90deg,#070b18f5,#070b18bd 28%,#070b1844 60%,transparent)}#stage{background:#060b1b}.overlay.result{background:#090e19cf}#pulse{position:absolute;right:22px;bottom:20px;z-index:4;padding:13px 18px;font:11px monospace;letter-spacing:1px;color:#abffff;border:1px solid #57f5ec88;border-radius:5px;background:linear-gradient(90deg,#177f8a66 var(--charge),#0b1329dd var(--charge));box-shadow:0 0 28px #19dce51a;min-height:48px}#pulse:disabled{opacity:.6}#powerTimers{bottom:17%}.power-legend .wide{color:#caff75}.power-legend .split{color:#56dfed}body[data-mode=retro] .year{color:#ffc578}
@media(max-width:650px){.year{font-size:30px;letter-spacing:8px;margin-top:14px}.overlay{background:linear-gradient(0deg,#090d17e6,#090d1788 65%,#090d1722)}#pulse{bottom:17px;right:10px;padding:10px;font-size:9px;min-height:44px}#powerTimers{bottom:13%;font-size:7px}#readyHint{bottom:20%}.intro h1{font-size:54px}.intro p{font-size:13px}}
@media(max-height:580px){.year{font-size:24px;margin-top:8px}.intro h1{font-size:40px}#pulse{bottom:10px;right:10px}.intro p{font-size:12px}.intro{padding-top:10px;padding-bottom:10px}}
