*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070b17;color:#fff1ce;font-family:'Arial Black',Arial,sans-serif;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}button{font:900 15px/1.2 'Arial Black',Arial,sans-serif;color:#f5e7bc;background:#14263e;border:2px solid #698192;padding:12px 19px;cursor:pointer;touch-action:none;box-shadow:0 4px #030711;text-transform:uppercase}button:active{transform:translateY(2px)}button:focus-visible{outline:3px solid #ffda6b;outline-offset:4px}.primary{color:#231911;background:#ffd878;border-color:#ffecc4;box-shadow:0 5px #926739;font-size:18px;padding:13px 30px}#gameShell{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden}#viewport{position:absolute;inset:0;overflow:hidden}#game{display:block;width:100%;height:100%;image-rendering:pixelated}#scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#0000000d 4px);z-index:2}#damageVignette{position:absolute;inset:0;opacity:0;pointer-events:none;box-shadow:inset 0 0 80px #fb5823;transition:opacity .15s;z-index:3}#damageVignette.hit{opacity:1}#message{position:absolute;z-index:9;left:50%;top:38%;transform:translate(-50%,-50%) skew(-8deg);font:900 clamp(38px,8vw,80px)/1 'Arial Black',Arial,sans-serif;white-space:nowrap;color:#fff3bc;-webkit-text-stroke:1px #553523;text-shadow:4px 4px #a95120,7px 7px #101421;pointer-events:none}#hud{position:absolute;inset:0 0 auto;z-index:7;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:start;padding:12px 20px 30px;background:linear-gradient(#040914e6,transparent);pointer-events:none;text-shadow:2px 2px #050918}.hudBlock{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.hudBlock.right{align-items:flex-end}.hudBlock small,.hudCenter small{font:900 12px monospace;letter-spacing:.12em;color:#cee2df}.hudBlock b{font:900 24px/1.05 monospace;color:#fff0a3}.hudBlock span{font:900 12px monospace;margin-top:4px;color:#d3e3e5}.hudCenter{text-align:center}.hudCenter b{display:block;font:900 43px/.95 Impact,'Arial Black',sans-serif;color:#ffdf71;text-shadow:2px 2px #a85b2c,4px 4px #142035}.hudCenter.danger b{color:#ff6953;animation:blink .4s steps(1) infinite}#timeBar{width:76%;max-width:160px;height:5px;margin:6px auto;background:#182633;overflow:hidden}#timeBar i{display:block;height:100%;background:#ffd278;transform-origin:left}#utility{position:absolute;z-index:14;left:12px;top:100px;display:flex;gap:6px}#utility button{font-size:19px;padding:5px 10px;background:#112037b3;border-color:#68818d77;box-shadow:none}body:not([data-state="playing"]) #pauseButton{display:none}body:not([data-state="playing"]) #utility{top:auto;bottom:12px}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:#050b1abb}.menuCard,.wideCard{position:relative;text-align:center;max-height:96%;overflow:auto;width:min(650px,96%);padding:28px;background:#081323ee;border:2px solid #66858f;box-shadow:8px 8px #0007}.eyebrow{margin:0 0 10px;font:900 12px monospace;letter-spacing:.22em;color:#bed5d3}.titleCard{width:min(690px,96%);padding:22px 26px 25px;background:none;border:0;box-shadow:none;overflow:visible}.titleCard h1{margin:4px 0;font:900 clamp(74px,14vw,134px)/.8 Impact,'Arial Black',sans-serif;letter-spacing:-.045em;color:#e8f2f5;transform:skew(-12deg);text-shadow:3px 3px #2c526b,6px 6px #152536,9px 9px #000b}.titleCard h1 span{display:block;color:#ffd06a;text-shadow:3px 3px #b76535,6px 6px #633625,9px 9px #000b}.titleCard h2{font:900 clamp(17px,3vw,27px)/1.2 monospace;letter-spacing:.25em;margin:17px 0;color:#e4ebe5;text-shadow:2px 2px #05080c}.titleCard #tagline{font:900 13px/1.5 monospace;color:#fff2cc;margin:16px 0}.titleCard .primary{min-width:250px}.menuRow{display:flex;gap:10px;justify-content:center;margin-top:16px}.menuRow button{flex:1;max-width:230px;font-size:13px}.controlsHint{font:900 12px/1.5 monospace;color:#bec7bc;margin:17px 0 0}#menu{background:linear-gradient(90deg,#030817dd 0%,#03081785 52%,#03081766)}.wideCard{width:min(1120px,98%);background:linear-gradient(160deg,#142840f5,#060e1be8);border-color:#688a98;padding:25px 22px}.wideCard h2,.panelCard h2,.endCard h2,#pauseTitle{font:900 clamp(25px,5vw,45px)/1.05 Impact,'Arial Black',sans-serif;color:#ffdc87;letter-spacing:.02em;margin:5px 0 20px;text-shadow:3px 3px #7d4927}.wideCard>p{font:700 14px/1.5 monospace;color:#c6d8d7}#shipGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:20px 0}.shipCard{position:relative;padding:13px 3px 17px;border:2px solid #354a5c;background:linear-gradient(#17283d,#080f1b);cursor:pointer;transition:background .12s,transform .12s;min-width:0}.shipCard.selected{border-color:var(--ship);background:linear-gradient(#294153,#101a26);box-shadow:inset 0 -4px var(--ship);transform:translateY(-5px)}.shipCard small{display:block;text-align:left;padding-left:9px;font:900 13px monospace;color:var(--ship)}.shipCard canvas{width:100%;height:auto;image-rendering:pixelated;display:block}.shipCard b{display:block;font:900 13px monospace;color:#f4ead4;letter-spacing:.02em}.wideCard>.primary{min-width:250px}#shipEqual{margin:10px 0 17px}#panelBody{max-height:55vh;overflow:auto;font:500 16px/1.65 Arial,sans-serif;text-align:left;color:#d6e0db}.panelCard>.primary{margin-top:20px}.leaderboard{width:100%;font:900 20px monospace;border-collapse:collapse}.leaderboard td{padding:8px 12px;border-bottom:1px solid #344453}.leaderboard td:first-child{color:#f3bb6f}.leaderboard td:last-child{text-align:right;color:#fff0ad}.transition{pointer-events:none;background:linear-gradient(transparent 20%,#040a1599 70%,#040a15c9);align-items:end;padding-bottom:8%}.transitionFrame{position:absolute;inset:0;box-shadow:inset 0 30px #030812,inset 0 -25px #030812}.transitionCard{position:relative;text-align:center;animation:readout-in .35s both}.transitionCard p{margin:6px 0;font:900 14px monospace;letter-spacing:.12em;color:#f3cf91}.transitionCard h2{font:900 clamp(35px,7vw,75px)/1 Impact,'Arial Black',sans-serif;letter-spacing:.02em;margin:7px 0;text-shadow:4px 4px #243448,6px 6px #000;color:#fff0c3}#transitionSub{font-size:16px;color:#fff}#transitionScore{font:900 clamp(16px,3vw,25px)/1.5 monospace;color:#d5e9e9;background:#091324df;padding:14px 24px;display:inline-block;border-left:4px solid var(--world,#ffd26b);margin-top:15px}#transitionScore b{color:#ffdd87}#finalScore{font:900 clamp(38px,8vw,66px) monospace;color:#ffe598;margin:8px 0}#endStats{font:700 14px monospace;color:#c8d9db}#recordEntry{border-top:1px solid #46606b;padding-top:12px;margin-top:14px}#recordLabel{font:900 13px/1.4 monospace;color:#ffdc7e}#initials{display:flex;justify-content:center;gap:12px;margin:12px}#initials button{width:58px;height:60px;padding:0;font:900 35px monospace}#initials button.active{border-color:#ffd78a;color:#ffe6a8}.letterTools{display:flex;justify-content:center;gap:20px}.letterTools button{font-size:16px;padding:5px 24px}#initialHint,#saveStatus{font:700 12px/1.5 monospace;color:#c0d2d7}#saveStatus{min-height:18px}#touchControls{position:absolute;z-index:15;inset:auto 0 0;height:90px;display:flex;justify-content:space-between;align-items:center;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:#08101b}.touchLeft,.touchRight{display:flex;gap:10px}#touchControls button{width:72px;height:66px;padding:4px;font-size:23px;border-radius:7px;background:#1f354b;border-color:#6d91a6;box-shadow:0 3px #000}.touchRight button{font-size:12px!important}.touchRight .gas{background:#705128!important;border-color:#d8ae64!important}.touchRight .brake{background:#344657!important}#touchControls .pressed{background:#6996b1;border-color:#d5fbff}.with-touch #viewport{bottom:90px}#pauseOverlay{z-index:40;background:#030b17c9}@keyframes blink{50%{opacity:.5}}@keyframes readout-in{from{opacity:0;transform:translateX(-40px) skew(-7deg)}to{opacity:1;transform:translateX(0) skew(0)}}@keyframes punch{from{opacity:0;transform:translate(-50%,-50%) scale(1.8) skew(-8deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) skew(-8deg)}}
@media(max-width:600px) and (orientation:portrait){#hud{padding:12px 10px}.hudBlock b{font-size:19px}.hudBlock span{font-size:10px;max-width:140px}.hudBlock small,.hudCenter small{font-size:10px}.hudCenter b{font-size:36px}.overlay{padding:10px}.titleCard h1{font-size:90px}.titleCard .primary{min-width:230px}.titleCard #tagline{font-size:12px}.wideCard{padding:15px 10px}#shipGrid{grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.shipCard{padding:6px 3px 10px}.shipCard canvas{max-height:90px}.shipCard b{font-size:11px}.shipCard small{font-size:11px}.wideCard>p{font-size:12px}.wideCard h2{font-size:29px}#utility{top:88px}#panelBody{font-size:15px}.transitionCard h2{font-size:40px}.transition{padding-bottom:20%}.menuRow button{font-size:12px;padding:10px 8px}#touchControls button{width:64px}.touchLeft,.touchRight{gap:7px}#message{font-size:46px}}
@media(max-height:540px) and (orientation:landscape){#hud{padding:6px 12px}.hudBlock b{font-size:18px}.hudBlock small,.hudCenter small{font-size:10px}.hudBlock span{font-size:10px}.hudCenter b{font-size:32px}#utility{top:78px;left:8px}#utility button{font-size:15px;padding:4px 9px}.overlay{padding:8px}.menuCard,.wideCard{padding:12px 18px}.titleCard{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:center;max-width:760px}.titleCard>.eyebrow{grid-column:1/-1;margin:0}.titleCard h1{grid-column:1;grid-row:2/5;font-size:76px}.titleCard h2{grid-column:2;grid-row:2;font-size:19px;margin:9px 0}.titleCard #tagline{grid-column:2;grid-row:3;font-size:11px;margin:8px 0}.titleCard>.primary{grid-column:2;grid-row:4;min-width:0}.titleCard .menuRow{grid-column:2;grid-row:5;margin-top:10px}.titleCard .controlsHint{grid-column:1/-1;margin-top:12px;font-size:11px}.wideCard h2{font-size:29px;margin:4px}.wideCard .eyebrow{font-size:10px;margin:2px}#shipGrid{margin:8px 0;gap:8px}.shipCard{padding:4px 2px 9px}.shipCard canvas{max-height:90px}.shipCard b{font-size:11px}.shipCard small{font-size:10px}.wideCard>p{font-size:12px;margin:4px}.wideCard>.primary{font-size:15px;padding:8px 22px;min-width:200px}.with-touch #viewport{inset:0 86px 0}.with-touch #hud{left:86px;right:86px}.with-touch #utility{left:94px}#touchControls{inset:0;height:auto;pointer-events:none;background:none;align-items:center}.touchLeft,.touchRight{flex-direction:column;pointer-events:auto;gap:14px}#touchControls button{width:60px;height:65px}.transition{padding-bottom:6%}.transitionCard h2{font-size:43px}.transitionCard p{font-size:12px}#transitionScore{font-size:17px;padding:7px 20px;margin-top:7px}.transitionFrame{box-shadow:inset 0 14px #030812,inset 0 -14px #030812}.panelCard h2,.endCard h2{font-size:29px;margin:4px 0 10px}#panelBody{font-size:14px;max-height:53vh}.panelCard>.primary{margin-top:10px;padding:9px 23px}#finalScore{font-size:34px;margin:4px}#endStats{font-size:12px;margin:5px}#recordEntry{margin:6px;padding-top:4px}#recordLabel{font-size:11px;margin:4px}#initials{margin:5px}#initials button{height:40px;width:45px;font-size:27px}.letterTools{position:absolute;right:22px;top:43%;flex-direction:column;gap:7px}.letterTools button{padding:5px 14px}#initialHint{font-size:10px;margin:4px}#saveScore{font-size:14px;padding:8px 22px}.endCard .menuRow{margin-top:6px}.endCard .menuRow button{padding:8px}#saveStatus{margin:5px}}

.transition[data-scene="clear"] .transitionCard{animation:finish-banner .6s cubic-bezier(.1,.8,.2,1) both!important}.transition[data-scene="fail"] .transitionCard{animation:failure-stamp .65s .35s both!important}.transition[data-scene="warp"] .transitionCard{animation:warp-readout .8s both!important}@keyframes finish-banner{from{transform:translateX(100vw) skew(-20deg);opacity:0}to{transform:translateX(0) skew(0);opacity:1}}@keyframes failure-stamp{from{transform:scale(3) rotate(-12deg);opacity:0}70%{transform:scale(.92) rotate(3deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes warp-readout{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Game-only gesture protection and iOS safe areas. */
#gameShell,#gameShell button,#touchControls,#touchControls *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#gameShell canvas,#gameShell img{-webkit-user-drag:none;touch-action:none}
#touchControls{padding-bottom:max(8px,env(safe-area-inset-bottom))}
body.with-touch{--touch-height:calc(90px + env(safe-area-inset-bottom))}
body.with-touch #touchControls{height:var(--touch-height)}
body.with-touch #viewport{bottom:var(--touch-height)}
@media(orientation:landscape) and (pointer:coarse){
 body.with-touch #viewport{inset:0 calc(86px + env(safe-area-inset-right)) 0 calc(86px + env(safe-area-inset-left))}
 body.with-touch #hud{left:calc(86px + env(safe-area-inset-left));right:calc(86px + env(safe-area-inset-right))}
 body.with-touch #utility{left:calc(94px + env(safe-area-inset-left))}
 body.with-touch #touchControls{inset:0;height:auto;pointer-events:none;background:none;align-items:center}
 .touchLeft,.touchRight{flex-direction:column;pointer-events:auto;gap:14px}
 #touchControls button{width:64px;height:70px}
}
