:root{color-scheme:dark;--ink:#061022;--white:#f8fdff;--mint:#73ffe5;--blue:#79cdff;--danger:#ff8c56;--gold:#ffe29b}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink)}
body{font:600 15px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--white);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.4}
button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:360px;overflow:hidden;background:var(--ink)}
.environment{position:absolute;inset:-2%;z-index:-5;background:#06142c url("./assets/hyperlane.webp") center center/cover no-repeat;transform:scale(1.035);transform-origin:center center;will-change:transform}
.game.playing .environment{animation:travel 2.2s ease-in-out infinite alternate}
.speed-wash{position:absolute;inset:0;z-index:-4;pointer-events:none;opacity:.28;background:linear-gradient(90deg,#09152c66,transparent 35%,transparent 65%,#07193455)}
.damage-wash{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;background:#fb3f5a90}
.damage-wash.flash{animation:damage .38s ease-out}
.hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));height:68px;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:8px;align-items:start;text-shadow:0 2px 12px #061326}
.identity{min-width:0;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:900;font-size:12px;letter-spacing:-.025em;white-space:nowrap}.brand span,.game-name span{color:var(--mint)}
.game-name{font-weight:950;font-size:clamp(16px,4.8vw,25px);letter-spacing:-.07em;white-space:nowrap}
.score-group{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.hud-label{font-size:9px;color:#c6fff4;letter-spacing:.18em;font-weight:900}
.score-group strong{font-size:clamp(30px,8vw,43px);letter-spacing:-.05em;line-height:1.03;font-variant-numeric:tabular-nums;filter:drop-shadow(0 4px 9px #22b8e355)}
.combo{position:absolute;top:52px;font-size:10px;letter-spacing:.08em;color:var(--gold);font-weight:950;white-space:nowrap;text-shadow:0 0 12px #ffc733}
.survival{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-top:10px;white-space:nowrap}
.hull{font-size:14px;letter-spacing:-.16em;color:var(--mint);text-shadow:0 0 12px #50fde0}
.survival strong{font-size:clamp(17px,5vw,27px);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.icon-button{min-width:34px;min-height:34px;border:1px solid #b3d6ea75;color:var(--white);background:#09182cb3;border-radius:10px;padding:1px 6px}
.course{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.wave-layer{position:absolute;inset:0;pointer-events:none}
.flight-object{position:absolute;display:block;width:1px;height:auto;max-width:none;pointer-events:none;transform:translate(-50%,-50%) scale(.4);transform-origin:center center;will-change:transform,top,left;filter:drop-shadow(0 7px 12px #071020aa)}
.flight-object.gate{filter:drop-shadow(0 0 14px #f35b26a8)}
.flight-object.energy{filter:drop-shadow(0 0 17px #ffc44aaf)}
.player-ship{position:absolute;z-index:7;left:50%;top:79%;width:clamp(104px,34vw,166px);height:auto;display:block;max-width:none;pointer-events:none;user-select:none;transform:translate(-50%,-50%) rotate(0deg);transition:left .15s cubic-bezier(.2,0,.2,1),transform .15s ease;filter:drop-shadow(0 12px 24px #0be5fd80);will-change:left,transform}
.player-ship.left{transform:translate(-50%,-50%) rotate(-10deg)}.player-ship.right{transform:translate(-50%,-50%) rotate(10deg)}
.player-ship.hit{animation:hit-shake .22s 2}
.score-burst{position:absolute;z-index:8;left:50%;top:64%;color:var(--gold);font-size:clamp(21px,6vw,30px);font-weight:950;letter-spacing:-.04em;text-shadow:0 0 15px #f3ad25,0 3px 10px #061424;transform:translate(-50%,0);opacity:0;pointer-events:none;white-space:nowrap}
.score-burst.show{animation:burst .7s ease-out}
.phase-announcement{position:absolute;z-index:9;top:27%;left:0;right:0;text-align:center;color:var(--mint);font-size:clamp(23px,6vw,42px);font-weight:950;letter-spacing:.04em;text-shadow:0 0 25px #00e9f0,0 2px 8px #051122;pointer-events:none;animation:phase-in 1.4s ease-out both}
.touch-controls{position:absolute;z-index:9;bottom:max(11px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none}
.steer{pointer-events:auto;min-height:64px;min-width:84px;border:1px solid #9eeff555;border-radius:28px;color:#c6fff8;background:#0b24494d;backdrop-filter:blur(5px);box-shadow:inset 0 1px #ffffff22;font-size:24px;font-weight:900;opacity:.73}
.steer:active{background:#108b8c80;opacity:1}.steer:disabled{opacity:.12}
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:100px 20px 72px;background:#020b20bb;backdrop-filter:blur(8px);overflow-y:auto}
.menu{text-align:center;width:min(100%,430px);display:flex;align-items:center;flex-direction:column;gap:12px;justify-content:center}
.menu-kicker{margin:0;color:var(--mint);font-size:12px;font-weight:950;letter-spacing:.22em;text-shadow:0 0 17px #35f2ce44}
.menu h1{margin:0;font-size:clamp(38px,11vw,61px);line-height:.95;letter-spacing:-.075em;text-shadow:0 3px 23px #02152d}
.menu h1 em{font-style:normal;color:var(--mint)}
.menu-description{color:#e0f5ff;max-width:360px;font-size:14px;line-height:1.45;margin:0;text-wrap:balance}
.menu-buttons{display:flex;flex-direction:column;gap:9px;width:min(100%,310px);margin-top:8px}
.primary-button{min-height:56px;padding:13px 18px;color:#062b32;border:1px solid #e6fff7;border-radius:16px;background:linear-gradient(120deg,#d4fff6,#65f8db);font-size:14px;font-weight:950;letter-spacing:.06em;box-shadow:0 7px 32px #1ff3d46b}
.primary-button span{padding-left:12px}
.primary-button:active{transform:scale(.985)}
.ghost-button{min-height:45px;padding:10px 16px;color:#dcfbff;background:#092544e3;border:1px solid #80c7df88;border-radius:14px;font-size:13px;font-weight:850}
.menu-score{display:flex;flex-direction:column;align-items:center;gap:2px;margin:5px 0 0}
.menu-score small{font-size:11px;letter-spacing:.16em;color:#a7e5ed;font-weight:900}
.menu-score strong{font-size:clamp(50px,14vw,70px);color:var(--mint);font-variant-numeric:tabular-nums;line-height:1.1;text-shadow:0 0 24px #28ffca80}
.menu-score span{font-size:12px;color:#d9f1f5}
.menu-feedback{color:#c7ffdb;font-size:12px;max-width:325px;overflow-wrap:anywhere;margin:0}
.controls-hint{margin:12px 0 0;font-size:10px;font-weight:900;letter-spacing:.06em;color:#bed5e4}
.sound-button{position:absolute;z-index:21;left:50%;bottom:max(15px,env(safe-area-inset-bottom));transform:translateX(-50%);min-height:38px;min-width:90px;border:1px solid #b5e6e380;border-radius:999px;color:#eefeff;background:#051b38ba;font-size:11px;font-weight:850;white-space:nowrap}
.game.playing .sound-button{left:auto;right:max(12px,env(safe-area-inset-right));top:max(72px,env(safe-area-inset-top) + 72px);bottom:auto;transform:none;min-height:28px;min-width:75px;font-size:10px;opacity:.75}
.build-tag{position:absolute;z-index:19;bottom:max(5px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap;letter-spacing:.07em;color:#bed9e2a6;pointer-events:none}
.game.playing .build-tag{display:none}
.game.playing .hud{pointer-events:auto}
@keyframes travel{from{transform:scale(1.035) translateY(-.2%)}to{transform:scale(1.054) translateY(.7%)}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,12px) scale(.75)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-48px) scale(1.06)}}
@keyframes hit-shake{25%{transform:translate(calc(-50% - 8px),-50%) rotate(-8deg)}75%{transform:translate(calc(-50% + 8px),-50%) rotate(9deg)}}
@keyframes damage{0%{opacity:.7}100%{opacity:0}}
@keyframes phase-in{0%{opacity:0;transform:scale(.8)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:scale(1.12)}}
@media(max-width:380px){.hud{left:9px;right:9px;gap:4px}.brand{font-size:10px}.game-name{font-size:16px}.survival{gap:4px}.hull{font-size:11px}.survival strong{font-size:17px}.menu-description{font-size:13px}.steer{min-width:72px;min-height:56px}}
@media(max-height:620px){.hud{height:54px}.overlay{padding:58px 14px 46px}.menu{gap:6px}.menu h1{font-size:32px}.menu-description{font-size:12px}.controls-hint{margin-top:2px}.primary-button{min-height:46px}.menu-score strong{font-size:40px}.menu-buttons{gap:5px;margin-top:0}.ghost-button{min-height:36px}.sound-button{bottom:4px}.player-ship{width:clamp(80px,24vw,128px)}}
@media(min-width:900px){.game{width:min(100%,640px);margin-inline:auto;box-shadow:0 0 70px #030b20}.environment{background-position:center center}.hud{top:16px}.game-name{font-size:23px}.player-ship{width:155px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.game.playing .environment{transform:scale(1.035)}.score-burst.show{opacity:1}}