:root{color-scheme:dark;--cyan:#75e6ff;--orange:#ff8a51;--muted:#adc0cc;--ink:#081422}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#597e9c;color:#f2f6f8;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}#game,#vignette{position:absolute;inset:0;width:100%;height:100%}#vignette{pointer-events:none;background:linear-gradient(90deg,rgba(4,13,24,.82),transparent 70%),linear-gradient(0deg,rgba(4,13,24,.8),transparent 25%,transparent 83%,rgba(4,13,24,.55))}body.playing #vignette{background:radial-gradient(ellipse,transparent 35%,#06111d88)}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 36px;border-bottom:1px solid #ffffff1c;gap:20px}.brand{display:flex;align-items:center;gap:12px;letter-spacing:2px;font-size:14px;font-weight:700}.brand small{display:block;letter-spacing:5px;font-size:8px;color:var(--muted);margin-top:6px}.symbol{font-size:40px;line-height:30px;font-style:italic;color:var(--cyan)}.world{font-size:10px;letter-spacing:2px;color:#deebf2}.world span{margin:0 16px;color:#b9d3e57a}.world i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#76efbe;box-shadow:0 0 12px #76efbe;margin-right:8px}#sound,#back{background:#11203488;border:1px solid #a9d4eb3d;padding:11px 16px;border-radius:5px;font-size:10px;letter-spacing:1px}.screen{position:absolute;top:17%;left:5%;width:480px}.eyebrow{color:var(--cyan);font-size:10px;letter-spacing:3px;font-weight:700}h1{font-size:clamp(36px,4.3vw,64px);font-weight:900;letter-spacing:-2.5px;line-height:1.05;margin:20px 0}h1 em{font-style:normal;color:#ffab7f}.intro{font-size:13px;line-height:1.8;color:#c4d1db;margin:18px 0 25px}.selectLabel{font-size:10px;color:var(--orange);letter-spacing:1px;display:flex;gap:12px;border-bottom:1px solid #ffffff2a;padding-bottom:12px}.selectLabel span{color:#d9e8f2}.selectLabel small{margin-left:auto;color:#b8c6d4;font-size:8px}#pilots{display:flex;gap:10px;margin:14px 0}.pilot{width:33.33%;background:#0a172bcc;border:1px solid #b2d6ed29;border-radius:8px;text-align:left;padding:10px;position:relative;transition:.15s}.pilot:hover{background:#263b53}.pilot.active{border-color:var(--cyan);box-shadow:inset 0 0 25px #43cfff13}.pilot svg{height:59px;width:100%;display:block}.pilot b{display:block;font-size:11px;letter-spacing:.3px;margin-top:6px}.pilot small{display:block;font-size:8px;color:#97b2c3;margin-top:5px}.pilot.active:after{content:'●';position:absolute;top:8px;right:8px;color:var(--cyan);font-size:8px}.ability{display:flex;flex-direction:column;gap:6px;font-size:10px;color:#c6d1d9;margin:13px 0 19px}.ability b{text-transform:uppercase;color:var(--cyan);letter-spacing:1px}.primary{background:#ff9463;border:1px solid #ffc0a2;color:#1c1d22;font-weight:800;font-size:12px;letter-spacing:2px;border-radius:6px;padding:18px 23px;display:flex;justify-content:space-between;align-items:center;width:100%;box-shadow:0 6px 28px #d65f2130}.primary:hover{background:#ffb185}.primary span{font-size:22px;line-height:10px}.meta{margin-top:13px;font-size:8px;letter-spacing:1px;color:#9fb4c3}.meta span{margin:0 9px;color:#65d9ed}#showcase{position:absolute;bottom:15%;right:5%;width:330px}#showcase h2{font-size:22px;font-style:italic;letter-spacing:-.6px}#showcase p{font-size:9px;color:#c4d0d9;letter-spacing:1px}#stats{display:flex;gap:25px}#stats div{font-size:8px;color:#b1c3d0;letter-spacing:1px}#stats b{display:block;font-size:20px;color:white;margin-top:6px}.glass{background:linear-gradient(135deg,#0c1b2cde,#0c1e31b8);border:1px solid #b3dcf437;border-radius:10px;backdrop-filter:blur(16px);box-shadow:0 10px 35px #0003}#hud small{font-size:9px;letter-spacing:1.7px;color:#aac2d3}.position{position:absolute;top:115px;left:36px;width:160px;padding:18px}.position div{display:flex;align-items:baseline;gap:10px}.position div b{font-size:52px;font-style:italic;line-height:1.3}.position div span{color:#9eb4c5;font-size:16px}.position footer{font-size:9px;color:#a6becc;border-top:1px solid #ffffff20;padding-top:10px}.position footer strong{color:#fff;padding:0 8px}.position footer span{color:var(--cyan);float:right}.timing{position:absolute;top:115px;right:36px;padding:17px 22px}.timing b{display:block;font-size:26px;font-variant-numeric:tabular-nums;margin:9px 0}.timing span{display:block;color:#9cb5c5;font-size:8px;letter-spacing:1px}#map{position:absolute;right:36px;top:245px;opacity:.85}.reticle{position:absolute;top:46%;left:50%;font-size:24px;color:#cbf4ff88;transform:translate(-50%,-50%)}#notice{position:absolute;top:25%;left:25%;right:25%;text-align:center;font-size:13px;letter-spacing:3px;color:#cbf5ff;text-shadow:0 2px 10px #000;font-weight:bold}.vitals{position:absolute;bottom:85px;left:36px;width:270px;padding:17px;display:flex;gap:15px;align-items:center}.portrait{width:60px;height:64px;flex-shrink:0;background:#182c3e;border-radius:8px}.portrait svg{width:100%;height:100%}.healths{flex:1}label{font-size:8px;letter-spacing:1px;color:#b9cfdd;display:block;margin-bottom:7px}label span{float:right;color:#fff}progress{display:block;appearance:none;width:100%;height:4px;border:0;background:#415261;border-radius:5px;overflow:hidden}progress::-webkit-progress-bar{background:#415261}progress::-webkit-progress-value{background:var(--cyan)}progress::-moz-progress-bar{background:var(--cyan)}#hull{margin-bottom:15px}#hull::-webkit-progress-value{background:var(--orange)}.weapon{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);width:300px;padding:16px 20px}.weapon b{font-size:12px;display:block;margin:12px 0}.weapon b span{font-size:10px;font-weight:normal;color:#c4d8e3;margin-left:7px}.weapon i{display:inline-block;width:1px;height:10px;background:#7991a0;margin:0 14px}.weapon strong{color:white}#abilityHud{font-size:8px;letter-spacing:.7px;border-top:1px solid #ffffff22;padding-top:9px;color:#bdd2dd}#abilityHud span{float:right;color:var(--cyan)}.speed{position:absolute;right:36px;bottom:85px;width:225px;padding:17px 20px}.speed div{display:flex;align-items:baseline;gap:9px}.speed b{font-size:62px;font-style:italic;letter-spacing:-3px;line-height:1.2;font-variant-numeric:tabular-nums}.speed div span{font-size:9px;color:#a4bdce}.speed label{margin-top:8px}.trackProgress{position:absolute;bottom:64px;left:36px;right:36px;height:2px;background:#d4edfc22}.trackProgress i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}#controls{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:24px;font-size:8px;color:#b0c2ce;letter-spacing:1px}kbd{font-family:inherit;padding:5px 6px;background:#cde4f30e;border:1px solid #bad7e52a;color:#deedf5;border-radius:3px;margin-right:4px}#countdown{position:absolute;inset:35% 0 auto;text-align:center;font-size:100px;font-style:italic;font-weight:bold;text-shadow:0 0 50px #78e8ff88}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#030b16a1;backdrop-filter:blur(7px)}.modalCard{width:450px;padding:40px}.modalCard h2{font-size:34px;font-style:italic}.modalCard p{font-size:13px;line-height:1.7;color:#c3d5e3}.modalCard .primary{margin-top:28px}.modalCard #back{margin-top:14px;width:100%}#error{position:absolute;inset:25%;background:#101f32;padding:30px;z-index:10;color:#fff}@media(max-height:760px){.screen{top:15%;width:420px}h1{font-size:44px;margin:13px 0}.intro{margin:10px 0 15px}.pilot svg{height:40px}.ability{margin:10px 0}.primary{padding:14px 20px}#showcase{bottom:17%}}@media(max-width:1000px){.world{display:none}header{padding:18px 22px}.screen{left:4%;width:390px}h1{font-size:42px}#showcase{right:3%;width:250px}.weapon{width:250px}.vitals{left:20px;width:225px}.speed{right:20px;width:190px}#controls{gap:10px;font-size:7px}}@media(max-width:720px){#showcase{display:none}.screen{width:min(90%,430px);left:5%;top:13%}#controls span:nth-child(n+4){display:none}.weapon{bottom:220px;left:20px;transform:none;width:225px}.position{left:20px;top:95px}.timing{right:20px;top:95px}.timing span,#map{display:none}.speed{width:145px}.speed b{font-size:43px}.brand{font-size:11px}#notice{left:20%;right:20%;font-size:10px}.modalCard{width:90%;padding:25px}}
