/* HALO / BREAKER — Copyright © 2026 Nuclear Cyborg Corp. All rights reserved. Written by Andrew Benson. */
:root{color-scheme:dark;--ice:#a7f9f0;--gold:#ffcc87;--dim:#758998}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#03070e;color:#e4f7f5;font-family:Arial,Helvetica,sans-serif}canvas{position:absolute;inset:0;width:100%;height:100%}#arena{touch-action:none}.grain{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#88ddff03 4px);opacity:.5}header{position:absolute;top:28px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:center;z-index:4}.brand{font-size:25px;font-weight:800;letter-spacing:3px}.brand span{color:var(--gold)}.brand small{margin-left:16px;font-size:10px;letter-spacing:3px;color:var(--dim)}.topRight{display:flex;align-items:center;gap:20px;font:10px monospace;letter-spacing:1px}button{font:11px monospace;letter-spacing:2px;border:1px solid #a7f9f033;background:#04121b99;color:var(--ice);cursor:pointer;padding:10px 14px;transition:.2s}button:hover,button:focus-visible{border-color:var(--ice);background:#15363f;box-shadow:0 0 24px #84ead922;outline:none}.volume{display:flex;align-items:center;gap:8px;color:var(--dim)}input{width:65px;accent-color:var(--ice)}.panel{position:absolute;z-index:3;left:8%;top:50%;transform:translateY(-46%);width:620px;padding:35px 0;background:linear-gradient(90deg,#030a12dd,#030a1200)}.tag,.eyebrow{font:10px monospace;letter-spacing:3px;color:var(--gold)}h1{font-size:clamp(65px,8vw,116px);font-weight:900;line-height:.87;letter-spacing:-7px;margin:29px 0 25px;text-shadow:0 0 55px #7bf3e32a}h1 span{display:block;color:transparent;-webkit-text-stroke:1px #c3ede8;letter-spacing:-6px}.lead{font-size:24px;letter-spacing:-.6px;margin:24px 0 15px}.desc{font-size:13px;line-height:1.9;color:#9eafb9}.primary{margin-top:25px;padding:20px 26px;min-width:285px;background:var(--ice);color:#06202a;border-color:var(--ice);font-weight:bold;text-align:left;box-shadow:0 0 45px #80f7db1a}.primary:hover{background:#d2fff5;color:#06202a;box-shadow:0 0 45px #80f7db55}.primary span{float:right;font-size:20px;line-height:12px}.controls{display:flex;gap:30px;margin-top:36px}.controls div{display:flex;flex-direction:column;gap:12px}kbd{font:11px monospace;letter-spacing:2px;color:#d6e6e9}small{font:9px monospace;letter-spacing:1px;color:var(--dim)}.hint{font:10px monospace;line-height:1.8;color:var(--dim);margin-top:22px}.footer{border-top:1px solid #83bbc322;margin-top:25px;padding-top:20px;display:flex;justify-content:space-between;max-width:500px;font:9px monospace;letter-spacing:2px;color:#6b8c98}.footer span{color:var(--gold)}#bottom{position:absolute;bottom:24px;left:38px;right:38px;display:flex;justify-content:space-between;pointer-events:none;font:9px monospace;letter-spacing:2px;color:#527480}#hud{position:absolute;inset:105px 38px 65px;pointer-events:none}.score{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:9px}.score strong{font:36px monospace;letter-spacing:2px}.score #combo{font:11px monospace;color:var(--ice);letter-spacing:2px}.sector{position:absolute;top:0;left:50%;transform:translateX(-50%);text-align:center;font:12px monospace;letter-spacing:4px}.sector small{display:block;margin-top:12px}.systems{position:absolute;left:0;bottom:0;width:205px;display:flex;flex-direction:column;gap:10px}.meter{height:3px;background:#96efda22}.meter i{display:block;height:100%;width:100%;background:var(--ice);box-shadow:0 0 10px var(--ice)}#hearts{font-size:20px;letter-spacing:8px;color:var(--gold)}#nova{font-size:8px;color:var(--ice)}#intermission{position:absolute;top:24%;width:100%;text-align:center;font:13px monospace;letter-spacing:6px;color:var(--gold);pointer-events:none;text-shadow:0 0 20px var(--gold)}.compact{left:50%;transform:translate(-50%,-50%);width:540px;background:#04101aee;border:1px solid #9ef1dc33;backdrop-filter:blur(16px);padding:46px;text-align:center}.compact h2{font-size:48px;letter-spacing:-2px}.compact p{color:#8ea6b2;font-size:13px;line-height:1.8}.compact .primary{text-align:center}.secondary{display:block;margin:18px auto 0}[hidden]{display:none!important}@media(max-width:800px){header{left:20px;right:20px;top:18px}.brand small,.volume,#record{display:none}.topRight{gap:10px}.panel{left:6%;width:88%;padding:20px 0}h1{font-size:76px;letter-spacing:-5px}.compact{left:50%;padding:25px}.controls{gap:18px}.controls small{font-size:8px}#hud{inset:85px 20px 55px}.score strong{font-size:25px}.sector{left:auto;right:0;transform:none}#bottom{left:20px;right:20px}#bottom span:first-child{display:none}.footer{font-size:8px}.desc{font-size:12px}}@media(max-height:720px){.panel{transform:translateY(-45%)}h1{font-size:70px;margin:18px 0}.lead{margin:15px 0;font-size:20px}.controls{margin-top:22px}.footer{margin-top:15px}.primary{margin-top:15px;padding:16px 24px}.compact{transform:translate(-50%,-50%)}}

/* Post-review legibility and combat clear zones. */
.hint{font-size:12px;color:#8eabb7}.controls small{font-size:10px;color:#91a5b0}#nova{font-size:11px;line-height:1.5}#bottom{color:#73919b}.eyebrow{font-size:11px}.systems{width:225px}#cosmos{transition:filter 1s}body:has(#hud:not([hidden])) #cosmos{filter:brightness(.75)}
@media(max-height:650px){.panel:not(.compact){top:52%;padding:0}.footer{display:none}.controls{margin-top:16px}.hint{font-size:10px;margin-top:15px}.desc{line-height:1.6}.systems{bottom:-15px;gap:6px}}

body:has(#pauseMenu:not([hidden])) #hud{visibility:hidden}@media(max-width:800px){.compact{width:min(540px,88vw)}}