@font-face{font-family:system-mono;src:local("SF Mono"),local("Consolas");font-display:swap}
:root{color-scheme:dark;--ink:#173a47;--cream:#f7e9cc;--dim:#b9c7c2;--accent:#ef9a68;--mint:#a6edd6;font-family:Arial,Helvetica,sans-serif;color:var(--cream);background:#102c39}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,select,a{touch-action:manipulation}button,select{font:700 13px Arial,sans-serif;min-height:44px;border:1px solid #c8d6c24a;border-radius:5px;color:var(--cream);background:#1e4a56;padding:9px 14px;cursor:pointer}
button:hover{background:#346371}button:active,button.pressed{background:#527e7e;transform:translateY(1px)}button:disabled{cursor:default;opacity:.55}button:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffca80;outline-offset:3px}
a{color:inherit}button.primary{background:var(--accent);color:#1e3540;border-color:var(--accent);font-size:16px}.primary:hover{background:#ffc18c}
[hidden]{display:none!important}.eyebrow{font:700 10px system-mono,monospace;letter-spacing:.14em;color:var(--mint);margin:0 0 8px}
.masthead{height:58px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:5px 24px;border-bottom:1px solid #b3d5cb29;gap:10px;background:#14313e}
.masthead a{font:800 16px Arial,sans-serif;text-decoration:none;letter-spacing:.05em}.masthead a span,.edition{font:10px system-mono,monospace;letter-spacing:.1em;color:#becbc4}.masthead button{min-width:88px}
footer{flex-shrink:0;padding:9px 10px;text-align:center;font-size:11px;background:#14313e;color:#c0c9be}footer a{text-underline-offset:3px}
.title-screen{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;padding:5vw;gap:30px;isolation:isolate;overflow:auto}
.cover{position:absolute;inset:0;z-index:-2}.cover img{width:100%;height:100%;object-fit:cover;object-position:center}.title-screen:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#102c39d9,#102c3910 60%,#102c3955)}
.title-copy{align-self:flex-start;padding-top:16px}.title-copy h1{font:900 clamp(48px,7.2vw,112px)/.86 Arial,sans-serif;letter-spacing:-.065em;margin:25px 0;color:#fff2d4;text-shadow:0 3px 20px #112b38aa}.title-copy h1 span{color:#f0a276}.tagline{font:400 clamp(20px,2.4vw,35px)/1.2 Georgia,serif;margin:22px 0}
.dispatch-panel{width:min(360px,44%);padding:24px;background:#153745ed;backdrop-filter:blur(10px);border:1px solid #d3d8b65c;box-shadow:0 20px 60px #0c1b2799;border-radius:7px;align-self:flex-end}
.dispatch-panel .intro{font-size:15px;line-height:1.5;margin:7px 0 18px}.dispatch-panel label{font-size:12px;display:block;margin:5px 0}.dispatch-panel select,.dispatch-panel>.primary{width:100%;margin-bottom:10px}.menu-row{display:flex;gap:8px}.menu-row button{flex:1;padding:8px;font-size:12px}.quiet{background:transparent;width:100%;margin-top:7px}.small{font-size:11px;line-height:1.35;color:#c0cfc6;margin:9px 0 0}
.play-screen{flex:1;min-height:0;display:flex;flex-direction:column;max-width:1320px;width:100%;margin:auto;padding:10px 18px;gap:8px}
.hud{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,220px) 80px 80px;gap:5px 16px;align-items:center;flex-shrink:0}
.route-title .eyebrow{display:block;margin-bottom:3px}.route-title strong{font-size:17px}.fuel-instrument label{font:10px system-mono,monospace;display:flex;justify-content:space-between}.fuel-instrument meter{display:block;width:100%;height:14px;accent-color:var(--mint)}.fuel-instrument span{font-size:10px;display:block;white-space:nowrap}.fuel-instrument.refilling{color:#c4ffc5}.hull-instrument{display:flex;flex-direction:column;font-size:10px;gap:4px}.hull-instrument b{font:700 17px system-mono,monospace}
.route-progress{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:10px}.route-progress progress{height:5px;flex:1;accent-color:var(--accent)}.route-progress span{min-width:200px;text-align:right}
.stage{display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 64px;gap:8px;flex:1;min-height:0}
.scene-panel{position:relative;grid-row:1;min-height:0;background:#173e4b;overflow:hidden;border:1px solid #9cc9c34f;border-radius:4px}
#scene{display:block;width:100%;height:100%;object-fit:cover}.scene-caption{position:absolute;bottom:0;left:0;right:0;padding:18px 12px 12px;background:linear-gradient(transparent,#152f3fee)}.scene-caption span{display:block;font:9px system-mono,monospace;letter-spacing:.10em;margin-bottom:8px}.scene-caption b{font-size:13px;line-height:1.3}
.field-wrap{position:relative;min-width:0;min-height:0;border:1px solid #95bdbd88;border-radius:4px;overflow:hidden;background:#143b49}
#field{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}
.ready{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#153643b8;backdrop-filter:blur(3px)}.ready>div{max-width:360px;padding:24px;background:#153743f2;border:1px solid #d3e7cf77;border-radius:5px}.ready h2{font:700 25px Georgia,serif;margin:8px 0}.ready p{font-size:14px;line-height:1.45}.ready .control-tip{font-size:12px;color:#bdebd9}.ready button{width:100%}
.controls{grid-column:1/-1;display:flex;gap:14px;align-items:center;min-height:0}.controls p{font-size:13px;line-height:1.4;margin:0}.controls p span{font-size:11px;color:#b2c8c4}
#pulse{min-width:190px;min-height:56px;flex-shrink:0;border:2px solid #e3ba7e;background:#674832;color:#fff2d4}#pulse span,#pulse b{display:block}#pulse b{font-size:10px;font-weight:400;margin-top:4px}#feedback{font-size:12px;line-height:1.3;color:#ffe1a6;margin-left:auto;max-width:350px}
dialog{padding:0;background:#163b49;color:var(--cream);border:1px solid #e2cf9c77;border-radius:8px;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow:hidden;box-shadow:0 20px 70px #0009}
dialog::backdrop{background:#091b27cf;backdrop-filter:blur(5px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #bbd2c244;gap:10px}.modal-head h2{font:700 25px Georgia,serif;margin:0}.modal-content{padding:20px;overflow-y:auto;max-height:calc(100dvh - 118px);overscroll-behavior:contain}.modal-content p{line-height:1.5;font-size:14px}.modal-content h3{font-size:18px;margin:12px 0}
.route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.route-grid button{text-align:left;min-height:70px;font-size:12px}.route-grid small{display:block;color:#c7d9ca;font-size:10px;margin-top:7px}.route-grid .done{border-color:#b5e5ab}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.actions>*{flex:1;min-width:130px}
.reward-header{display:flex;gap:20px;align-items:center}.gear-preview{width:120px;height:140px;border:1px solid #a2cbb955;background:#112f3e;border-radius:5px;flex-shrink:0}.reward-title{color:#eab27d;font:700 22px Georgia,serif}.lore-card{padding:16px;border:1px solid #abcdbb44;background:#1b4652;border-radius:5px;margin:12px 0}.lore-card h3{margin-top:0}.lore-card .eyebrow{font-size:9px}.lore-card a{display:inline-flex;align-items:center;min-height:44px;color:#b8f1d7;font-size:13px;line-height:1.4}.gear-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gear-list>div{border:1px solid #afcbbd44;padding:12px;border-radius:4px}.gear-list h3{font-size:14px;margin:0 0 6px}.gear-list p{font-size:12px;margin:0}
@media(max-width:800px){.masthead{height:48px;padding:2px 12px}.masthead a{font-size:13px}.edition{display:none}.play-screen{padding:6px 10px;gap:6px}.stage{grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr) 62px;gap:5px}.scene-panel{grid-row:1}.scene-caption{bottom:0;left:44%;padding:7px 10px;background:linear-gradient(90deg,transparent,#14313ee8 15%);height:100%;display:flex;justify-content:center;flex-direction:column}.scene-caption span{font-size:8px;margin-bottom:4px}.scene-caption b{font-size:11px}.field-wrap{grid-row:2}.controls{grid-row:3;gap:8px}.controls p{font-size:11px}.controls p span{font-size:9px}#pulse{min-width:158px;padding:6px;font-size:12px}#feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hud{grid-template-columns:1fr 115px 49px 60px;gap:3px 8px}.hud #pause{padding:5px;font-size:12px}.route-title strong{font-size:13px}.route-title .eyebrow{font-size:8px;letter-spacing:.03em}.hull-instrument b{font-size:13px}.fuel-instrument span{font-size:8px}.route-progress{font-size:9px;gap:8px}.route-progress span{min-width:165px}footer{font-size:9px;padding:7px 4px}.title-screen{padding:24px;gap:14px}.dispatch-panel{padding:16px;width:49%}.dispatch-panel .eyebrow{font-size:8px}.title-copy h1{font-size:64px}}
@media(max-width:600px) and (orientation:portrait){.title-screen{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:20px 18px 14px;gap:12px}.title-screen:before{background:linear-gradient(#0d2a3c66,#102a3c00 28%,#102b3ccb 60%,#102c39)}.title-copy{padding:0;align-self:auto}.title-copy h1{font-size:clamp(45px,15vw,70px);margin:14px 0}.tagline{font-size:20px;margin:0}.title-copy>.eyebrow{font-size:9px}.dispatch-panel{width:100%;align-self:auto;padding:14px}.dispatch-panel .intro{font-size:12px;line-height:1.35;margin:4px 0 10px}.dispatch-panel .eyebrow{font-size:8px}.dispatch-panel .small{font-size:10px}.route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gear-list{grid-template-columns:1fr}.ready>div{padding:16px}.ready h2{font-size:21px}.ready p{font-size:12px;margin:9px 0}.ready .control-tip{font-size:11px}.modal-content{padding:14px}.reward-header{gap:12px}.gear-preview{width:85px;height:110px}}
@media(max-width:380px) and (orientation:portrait){.masthead{height:46px}.masthead a span{display:none}.play-screen{padding:5px 6px}.hud{grid-template-columns:1fr 95px 40px 55px;gap:3px 6px}.fuel-instrument span{font-size:7px}.title-screen{padding:12px;gap:8px}.title-copy h1{font-size:46px;margin:10px 0}.title-copy .tagline{font-size:17px}.dispatch-panel{padding:11px}.dispatch-panel .intro{display:none}.dispatch-panel .eyebrow{font-size:7px}.dispatch-panel .small{margin-top:4px}.dispatch-panel select,.dispatch-panel>.primary{margin-bottom:6px}.dispatch-panel .quiet{margin-top:4px;min-height:44px}.stage{grid-template-rows:54px minmax(0,1fr) 60px}.scene-caption{left:40%}.route-title strong{font-size:12px}.route-progress span{min-width:155px}#pulse{min-width:148px}.controls p{font-size:10px}}
@media(orientation:landscape) and (max-height:500px){.masthead{height:36px;padding:0 10px}.masthead button{min-height:32px;padding:3px 10px;font-size:11px}.masthead a{font-size:12px}.play-screen{padding:4px 8px;gap:4px}.hud{grid-template-columns:1fr 130px 65px 64px;gap:2px 9px}.hud #pause{min-height:44px;grid-row:1/3;grid-column:4}.hud .route-title strong{font-size:12px}.route-progress{grid-column:1/4}.stage{grid-template-columns:110px minmax(0,1fr) 118px;grid-template-rows:minmax(0,1fr);gap:5px}.scene-panel{grid-column:1;grid-row:1}.scene-caption{left:0;bottom:0;height:auto;padding:8px;background:linear-gradient(transparent,#14313eee);display:block}.scene-caption span{font-size:7px}.scene-caption b{font-size:9px}.field-wrap{grid-column:2;grid-row:1}.controls{grid-column:3;grid-row:1;flex-direction:column;justify-content:center;gap:10px;text-align:center}.controls p{font-size:10px}.controls p span{display:none}#pulse{min-width:0;width:112px;min-height:64px;font-size:11px}#pulse b{font-size:9px}footer{padding:4px;font-size:8px}.ready{padding:5px}.ready>div{padding:9px;max-width:290px}.ready h2{font-size:17px;margin:5px 0}.ready p{font-size:10px;margin:6px 0}.ready .eyebrow{font-size:8px}.ready .control-tip{font-size:9px}.ready button{min-height:44px;padding:7px;font-size:13px}.title-screen{padding:12px 28px;gap:16px}.title-copy{padding:0}.title-copy h1{font-size:clamp(35px,8vw,66px);margin:13px 0}.title-copy .tagline{font-size:18px;margin:0}.title-copy .eyebrow{font-size:7px}.dispatch-panel{padding:10px;width:45%;align-self:center}.dispatch-panel>.eyebrow,.dispatch-panel .intro,.dispatch-panel .small,.dispatch-panel label{display:none}.dispatch-panel select,.dispatch-panel>.primary{margin-bottom:5px;min-height:44px;padding:7px;font-size:12px}.dispatch-panel .menu-row{gap:5px}.dispatch-panel .menu-row button{font-size:10px;padding:5px}.dispatch-panel .quiet{min-height:44px;padding:4px;margin-top:3px}.modal-content{max-height:calc(100dvh - 100px)}.modal-head{padding:6px 12px}.modal-head h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:600px) and (orientation:portrait){.title-screen .cover{bottom:auto;height:58%}.title-screen .cover img{object-position:50% 75%}.title-screen:before{background:linear-gradient(#0d2a3c22,#102a3c00 22%,#102c39 62%)}.tagline{text-shadow:0 2px 12px #102b3c}.hangar-portrait{width:100%;max-height:180px;object-fit:cover;object-position:75% 45%;border-radius:5px;margin-bottom:12px}}
@media(orientation:landscape) and (max-height:500px){.masthead{height:44px}.masthead button{min-height:44px}}
.hangar-portrait{display:block;width:100%;max-height:240px;object-fit:cover;object-position:80% 46%;border-radius:5px;margin-bottom:15px}
.masthead>a{display:inline-flex;align-items:center;min-height:44px}
footer{height:44px;min-height:44px;padding:0 4px;display:flex;align-items:center;justify-content:center;gap:3px}
footer a{display:inline-flex;align-items:center;min-height:44px}
@media(orientation:landscape) and (max-height:500px){.ready>div{padding:8px}.ready .eyebrow{display:none}.ready h2{font-size:15px;margin:3px 0}.ready p{line-height:1.3;margin:3px 0}.ready .control-tip{font-size:9px;line-height:1.2;margin:3px 0}}