:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#070d1a;color:#e9f3ff;font-size:16px;--blue:#46cfff;--red:#ff6c7d;--gold:#ffdb67}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#132745 0,#070d1a 65%);min-height:100svh}button,select{font:inherit}button,select,summary{cursor:pointer}button{border:1px solid #3f5671;border-radius:6px;background:#142339;color:#e9f3ff;padding:.65rem 1rem;min-height:44px;font-weight:600}button:hover{background:#203954;border-color:#8db4dc}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button.primary{background:var(--blue);border-color:var(--blue);color:#061321}button.primary:hover{background:#9ae7ff}[hidden]{display:none!important}
main{width:min(100% - 2rem,1000px);margin:auto;padding:1rem 0 2rem}header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.brand{font-weight:850;letter-spacing:.13em;font-size:1rem;color:#e9f3ff;text-decoration:none}.brand span{color:var(--blue)}.tools{display:flex;gap:.5rem}.tools button{font-size:.875rem;padding:.5rem .75rem}.cabinet{border:1px solid #3c5675;border-radius:10px;overflow:hidden;background:#070d1a;box-shadow:0 18px 80px #0007}.hud{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.85rem 1.2rem;background:#0d192b;border-bottom:1px solid #243b55;gap:.5rem;font:600 .875rem ui-monospace,monospace}.hud strong{display:block;font-size:1.5rem;letter-spacing:.06em;margin:.2rem 0}.hud small{font-size:.875rem;color:#a1b5cd;font-weight:400;display:block}.wave{text-align:center;color:var(--gold)}.p1{color:var(--red)}.p2{color:var(--blue)}.hud>.p2{text-align:right}.stage{position:relative;width:min(100%,calc((100svh - 245px)*4/3));min-width:min(100%,340px);margin:0 auto;aspect-ratio:4/3}canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated;cursor:crosshair}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#070d1af5,#070d1ab8);display:flex;align-items:center;padding:clamp(1rem,4vw,3rem);overflow:auto}.panel{max-width:100%}.eyebrow{font:600 .875rem ui-monospace,monospace;letter-spacing:.1em;color:var(--gold);margin:0 0 1rem}h1{font-size:clamp(2rem,5vw,3.7rem);line-height:.98;letter-spacing:-.055em;margin:0 0 1rem}h1 span{color:var(--blue)}.panel>p:not(.eyebrow){line-height:1.5;color:#b5c7dc;margin:.6rem 0}.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0}.record{font-size:.875rem}label{display:flex;gap:1rem;align-items:center;font-size:.875rem;margin-top:.85rem}select{background:#142339;color:#e9f3ff;border:1px solid #536d89;border-radius:4px;padding:.5rem}.wave-banner{position:absolute;left:15%;right:15%;top:43%;background:#10233aee;border:1px solid #4e7093;text-align:center;font:700 clamp(1rem,3vw,1.8rem) ui-monospace,monospace;color:var(--gold);padding:1rem;pointer-events:none}.controls{display:flex;justify-content:space-between;gap:.5rem;padding:.7rem;background:#0d192b;border-top:1px solid #243b55}.hint{font-size:.9rem;color:#a1b5cd;text-align:center;line-height:1.5}details{border-top:1px solid #243b55;margin-top:1rem;padding-top:.8rem}summary{color:#bdd1e7;min-height:44px}.help{max-width:75ch;color:#bdd1e7;line-height:1.6}.status{font-size:.875rem;color:var(--gold)}main:fullscreen{width:100%;max-width:none;padding:1rem;background:#070d1a;overflow:auto}main:fullscreen .stage{width:min(100%,calc((100svh - 210px)*4/3))}
@media(max-width:600px){main{width:100%;padding:.6rem .5rem 1rem}header{flex-wrap:wrap;gap:.5rem}.brand{font-size:.875rem}.hud{padding:.5rem;font-size:.875rem}.hud strong{font-size:1.15rem;letter-spacing:0}.hud small{font-size:.875rem}.stage{width:100%;min-width:0;aspect-ratio:4/3}.overlay{padding:1rem;align-items:flex-start}.eyebrow{margin-bottom:.5rem}h1{font-size:2rem;line-height:1}h1 br{display:none}h1 br:after{content:' '}.panel>p:not(.eyebrow){margin:.4rem 0}.actions{margin:.6rem 0;gap:.4rem}.actions button{padding:.5rem .7rem}.controls button{font-size:.875rem;padding:.5rem}.hint{font-size:.875rem}.record{margin-bottom:0!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.volume-label{display:flex;align-items:center;gap:.4rem;margin:0;color:#bdd1e7;font-size:.875rem}.volume-label input{width:85px;accent-color:#46cfff;min-height:44px}.tools{flex-wrap:wrap;align-items:center}@media(max-width:600px){.volume-label input{width:65px}.tools{gap:.35rem}}
/* Portrait arcade presentation, based on the user’s reference captures. */
:root{background:#080808;--blue:#00aaff;--red:#ff1717;--gold:#f4ff00}body{background:radial-gradient(ellipse at top,#191919,#050505 70%)}header{max-width:850px;margin:0 auto .75rem}.brand{color:#fff;font-family:ui-monospace,monospace}.brand span{color:#f4ff00}.cabinet{position:relative;width:min(100%,max(330px,calc((100svh - 180px)*.7619)));max-width:640px;margin:auto;background:#000;border:2px solid #f22121;border-radius:0;box-shadow:0 0 22px #ff000019}.stage,main:fullscreen .stage{width:100%;min-width:0;aspect-ratio:640/840}.hud{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}.overlay{background:#000e;padding:clamp(1rem,4vw,2rem);align-items:center;text-align:center;justify-content:center}.panel{width:100%}.eyebrow{color:#ff3030;font-size:.875rem;letter-spacing:.06em}h1{font:900 clamp(2rem,5vw,3.3rem)/.95 ui-monospace,monospace;letter-spacing:-.06em;color:#f4ff00;text-shadow:3px 3px #bd3618;margin-bottom:1rem}h1 span{color:#00ff39}.panel>p:not(.eyebrow){color:#d4d4d4;font-size:1rem;line-height:1.4}label{justify-content:center}select{background:#181818;border-color:#686868}.actions{justify-content:center}.actions button{flex:1 1 42%;padding:.65rem .5rem}button{background:#151515;border-color:#505050;border-radius:2px}button:hover{background:#303030;border-color:#aaa}button.primary{background:#f0ff00;border-color:#f0ff00;color:#000}button.primary:hover{background:#ffff7b}.controls{background:#080808;border-top:1px solid #721212;padding:.4rem}.controls button{font-size:.875rem;padding:.4rem}.wave-banner{left:5%;right:5%;top:44%;background:#000e;border:1px solid #ff2727;color:#f4ff00;padding:.8rem;font-size:clamp(1rem,3vw,1.3rem)}.hint{max-width:640px;margin:.7rem auto;color:#c3c3c3}details{max-width:850px;margin:1rem auto 0;border-color:#3b3b3b}.help,summary{color:#c8c8c8}main:fullscreen{background:#050505}main:fullscreen .cabinet{width:min(100%,max(330px,calc((100svh - 120px)*.7619)))}
@media(max-width:600px){header{justify-content:center}.tools{justify-content:center}.cabinet{width:100%;max-width:440px}.overlay{padding:.8rem}.panel>p:not(.eyebrow){font-size:.875rem}h1 br{display:initial}.actions{gap:.4rem}.actions button{font-size:.875rem}.volume-label{font-size:.875rem}.controls button{font-size:.875rem}}

/* Edition 3: real full-surface gameplay and multi-touch controls. */
body.immersed{overflow:hidden}main.immersive,main:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:0;background:#000;overflow:hidden;z-index:100}
main.immersive .cabinet,main:fullscreen .cabinet{position:absolute;inset:0;width:100%;height:100%;max-width:none;border:0;margin:0;box-shadow:none}
main.immersive .stage,main:fullscreen .stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
main.immersive header,main:fullscreen header{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));margin:0;z-index:8;max-width:none;opacity:.82}
main.immersive header .brand,main.immersive header .volume-label,main.immersive #touch-toggle,main.immersive .hint,main.immersive details{display:none}
main.immersive .controls{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:auto;z-index:8;background:#0009;border:0}
main.immersive .status{position:absolute;top:58px;left:10%;right:10%;z-index:10;text-align:center;background:#000a;pointer-events:none}
main.immersive .panel{max-width:540px}.touch-controls{position:absolute;inset:0;z-index:5;pointer-events:none;user-select:none;-webkit-user-select:none}
.touch-controls button{pointer-events:auto;touch-action:none;-webkit-touch-callout:none;user-select:none;border:2px solid #ff3838;background:#171717dc;color:white;min-width:50px;min-height:50px;font-size:20px;padding:0;box-shadow:0 2px 8px #000a}
.dpad{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:60px;display:grid;grid-template:repeat(3,50px)/repeat(3,50px);gap:2px;pointer-events:none}
#pad-up{grid-area:1/2}#pad-left{grid-area:2/1}#pad-right{grid-area:2/3}#pad-down{grid-area:3/2}
.touch-actions{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:65px;display:flex;flex-direction:column;gap:12px}
#touch-fire{width:80px;height:80px;border-radius:50%;background:#bb1010dc;font-weight:900}#touch-bomb{font-size:13px;min-height:56px;width:86px;border-color:#f5ed00;background:#4c4500dc}
.touch-device .cabinet{width:100%;max-width:100%}.touch-device main{width:100%;padding:8px}.touch-device .stage{height:calc(100dvh - 190px);min-height:400px;aspect-ratio:auto}
@media (orientation:landscape) and (max-height:600px){.touch-device .stage{height:calc(100dvh - 130px);min-height:280px}.dpad{grid-template:repeat(3,44px)/repeat(3,44px);bottom:55px}.touch-controls button{min-width:44px;min-height:44px}.touch-actions{bottom:55px;flex-direction:row;align-items:end}#touch-fire{width:65px;height:65px}main.immersive .tools button,main.immersive .controls button{min-height:40px;font-size:12px;padding:6px}}