/* B3B canon fork. Press Start carries the interface; VT323 is confined to help. */
:root { --bg:#0a1628; --panel:#142238; --accent:#ffd700; --cream:#f8f4e8; --dim:#8899aa; }
* { box-sizing:border-box; font-variant-ligatures:none; font-feature-settings:"liga" 0,"clig" 0; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none; }
body { font-family:var(--font-pixel);font-size:clamp(8px,.85vw,11px);color:var(--cream); }
[hidden] { display:none !important; }
button { font-size:clamp(7px,.75vw,10px);font-weight:400; }
button:focus-visible,input:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
#world { position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated; }
#interface { position:fixed;inset:0;pointer-events:none; }
.screen,.overlay { pointer-events:auto; }
.screen { position:absolute;inset:0; }
.studio { position:absolute;top:calc(28px + env(safe-area-inset-top));left:calc(38px + env(safe-area-inset-left));display:flex;align-items:center;gap:14px;color:var(--cream);letter-spacing:.12em;text-shadow:2px 2px 0 var(--bg); }
.studio img { width:48px;height:48px; }
.wordmark { position:absolute;top:24%;left:42px;color:var(--cream);text-shadow:5px 6px 0 var(--bg); }
.wordmark span { display:block;font-size:clamp(38px,5.4vw,74px);margin-bottom:18px; }
.wordmark strong { display:block;font-size:clamp(44px,6.5vw,92px);font-weight:400;letter-spacing:-.06em; }
.wordmark p { font-size:clamp(8px,1vw,12px);letter-spacing:.13em;margin-top:24px;text-shadow:2px 2px 0 var(--bg); }
.field-card { position:absolute;left:42px;bottom:110px;padding:15px 18px;background:var(--bg);border-left:4px solid var(--cream);box-shadow:var(--drop); }
.label { display:block;color:var(--dim);font-size:clamp(7px,.7vw,9px);line-height:1.7;letter-spacing:.1em; }
.field-card strong { display:block;font-size:clamp(10px,1.25vw,15px);margin:12px 0; }
.field-card div,.field-card p { font-size:clamp(7px,.7vw,9px);line-height:1.8; }
.field-card p { color:var(--dim);margin-top:8px; }
.departure-panel { position:absolute;right:calc(36px + env(safe-area-inset-right));bottom:calc(48px + env(safe-area-inset-bottom));width:min(480px,44vw);padding:22px;background:var(--bg);border:2px solid #38445c;box-shadow:0 5px 0 #07101c; }
.mode-row { display:flex;gap:10px;margin:14px 0; }
.choice { background:var(--panel);color:var(--dim);border:2px solid #38445c;min-height:44px;flex:1;padding:10px 5px;font-size:clamp(7px,.8vw,10px);letter-spacing:0; }
.choice.selected { border-color:var(--accent);color:var(--accent); }
.departure-panel p { font-size:clamp(8px,.75vw,10px);line-height:1.8;color:var(--cream);margin:16px 0 22px; }
.departure-actions { display:flex;justify-content:flex-end;gap:10px; }
.departure-actions button { padding:13px 10px;font-size:clamp(7px,.72vw,9px);letter-spacing:.03em; }
.title-footer { position:absolute;left:42px;bottom:36px;color:var(--cream);font-size:clamp(7px,.7vw,9px);text-shadow:2px 2px 0 var(--bg);letter-spacing:.1em; }
.flight-header { position:absolute;top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.flight-brand { font-size:clamp(11px,1.3vw,16px);text-shadow:2px 2px 0 var(--bg);letter-spacing:-.04em; }
.flight-brand span { display:block;color:var(--cream);font-size:clamp(7px,.65vw,9px);letter-spacing:.08em;margin-top:10px; }
.telemetry { display:flex;gap:2px;background:var(--bg);border:2px solid #38445c;box-shadow:var(--drop); }
.telemetry>div { padding:10px 16px;min-width:112px; }
.telemetry>div+div { border-left:1px solid #38445c; }
.telemetry span { display:inline;color:var(--dim);font-size:clamp(7px,.65vw,9px); }
.telemetry strong { display:block;font-size:clamp(14px,1.4vw,20px);font-weight:400;margin-top:9px; }
.telemetry small { display:block;font-size:clamp(6px,.55vw,8px);color:var(--dim);margin-top:6px; }
.menu-button { pointer-events:auto;font-size:clamp(7px,.7vw,9px);padding:10px 14px; }
.flight-strip { position:absolute;bottom:calc(95px + env(safe-area-inset-bottom));left:calc(18px + env(safe-area-inset-left));max-width:calc(100vw - 350px);padding:14px 17px;background:var(--bg);border-left:3px solid var(--cream);box-shadow:var(--drop); }
.flight-strip strong { display:block;font-size:clamp(8px,.95vw,12px);line-height:1.8;font-weight:400;margin-top:8px; }
.flight-strip p { font-size:clamp(6px,.58vw,8px);color:var(--dim);line-height:1.8;margin-top:10px; }
body:has(#instrument-panel:not([hidden])) .flight-strip { bottom:calc(170px + env(safe-area-inset-bottom)); }
.power-row { display:flex;gap:18px;margin-top:14px;border-top:1px solid #38445c;padding-top:12px;font-size:clamp(6px,.6vw,8px); }
.key-strip { position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:18px;font-size:clamp(6px,.62vw,9px);color:var(--cream);text-shadow:2px 2px 0 var(--bg); }
.map-panel { position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:244px;background:var(--bg);border:2px solid #38445c;box-shadow:var(--drop); }
.map-title,.map-footer { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 8px;font-size:clamp(6px,.56vw,8px); }
.map-title { border-bottom:1px solid #38445c; }
.map-footer { font-size:clamp(5px,.46vw,7px); }
#map { display:block;width:100%;height:auto;image-rendering:pixelated; }
.text-button { min-height:28px;background:transparent;color:var(--accent);padding:4px;border:0;font-size:clamp(6px,.55vw,8px);letter-spacing:0;pointer-events:auto; }
#flight-message { position:absolute;top:115px;left:50%;transform:translateX(-50%);max-width:90%;font-size:clamp(8px,1vw,12px);line-height:1.7;text-align:center;color:var(--cream);text-shadow:2px 2px 0 var(--bg); }
#warning { position:absolute;top:160px;left:50%;transform:translateX(-50%);padding:12px 16px;background:var(--danger);font-size:clamp(8px,1vw,12px);white-space:nowrap;box-shadow:var(--drop); }
.throttle-control { position:absolute;top:120px;left:18px;width:58px;padding:12px 8px;background:var(--bg);border:2px solid #38445c;pointer-events:auto;display:flex;align-items:center;flex-direction:column;gap:14px; }
.throttle-control label,.throttle-control output { font-size:clamp(6px,.55vw,8px); }
#throttle { writing-mode:vertical-lr;direction:rtl;height:145px;width:24px;accent-color:var(--accent);cursor:pointer; }
.throttle-control .text-button { writing-mode:initial;font-size:clamp(5px,.45vw,7px);padding:0; }
#touch-controls { display:none; }
#reticle { position:absolute;left:50%;top:50%;width:22px;height:2px;background:var(--cream);transform:translateX(-50%); }
#reticle span { position:absolute;left:10px;top:-9px;width:2px;height:20px;background:var(--cream); }
#cockpit-frame { position:absolute;inset:0;overflow:hidden; }
#cockpit-frame i { position:absolute;bottom:0;left:0;height:58%;width:12px;background:#142238;transform:rotate(-24deg);transform-origin:bottom; }
#cockpit-frame i+i { left:auto;right:0;transform:rotate(24deg); }
#instrument-panel { position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;background:var(--bg);border:3px solid #38445c;box-shadow:var(--drop);padding:8px;gap:8px; }
.instrument { width:116px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;background:var(--panel); }
.instrument span,.instrument small { color:var(--dim);font-size:clamp(6px,.6vw,8px); }
.instrument strong { font-weight:400;font-size:clamp(16px,1.8vw,24px);padding:10px 0; }
.attitude { border:2px solid #38445c;height:104px; }
#attitude { width:180px;height:100px;image-rendering:pixelated; }
.overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:rgba(10,22,40,.86); }
.menu-panel { width:min(720px,100%);max-height:100%;overflow-y:auto;scrollbar-width:none;padding:28px;background:var(--bg);border:2px solid #38445c;box-shadow:0 5px 0 #07101c; }
.menu-panel h1 { font-size:clamp(15px,2.1vw,26px);font-weight:400;line-height:1.5;margin:15px 0; }
.menu-panel>p { font-size:clamp(8px,.9vw,11px);line-height:1.8;color:var(--dim); }
.menu-panel h2 { font-size:clamp(9px,1vw,12px);font-weight:400;margin:24px 0 16px; }
#tuning label { display:grid;grid-template-columns:210px 1fr 48px;align-items:center;gap:20px;font-size:clamp(7px,.7vw,9px);margin:18px 0; }
#tuning input { width:100%;min-width:0;accent-color:var(--accent); }
#tuning output { text-align:right;color:var(--cream); }
.menu-options { display:flex;gap:10px;flex-wrap:wrap;margin:24px 0; }
.menu-options button,.menu-actions button { font-size:clamp(7px,.68vw,9px);padding:12px 10px;letter-spacing:.02em; }
.control-guide { border-top:1px solid #38445c;padding-top:14px; }
.control-guide p { font-family:var(--font-pixel-body);font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--dim); }
.menu-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap; }
#landing-stats { margin:22px 0;color:var(--cream);font-size:clamp(8px,1vw,12px);line-height:1.8; }
@media (pointer:coarse) {
  #touch-controls { display:block; }
  .key-strip { display:none; }
  .flight-strip { bottom:185px; }
}
body.touch #touch-controls { display:block; }
body.touch .key-strip { display:none; }
body.touch .flight-strip { bottom:185px; }
#stick { position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));width:128px;height:128px;background:rgba(10,22,40,.85);border:2px solid #8899aa;touch-action:none;pointer-events:auto; }
#stick::before,#stick::after { content:'';position:absolute;background:#38445c; }
#stick::before { left:50%;top:0;height:100%;width:1px; }
#stick::after { top:50%;left:0;width:100%;height:1px; }
#stick-knob { position:absolute;width:36px;height:36px;left:calc(50% - 18px);top:calc(50% - 18px);background:var(--accent);border:2px solid var(--bg); }
#stick small { position:absolute;left:0;bottom:5px;width:100%;text-align:center;font-size:clamp(5px,.5vw,7px); }
#touch-brake { position:absolute;left:calc(166px + env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom));pointer-events:auto; }
@media (max-width:1000px) {
  .studio { left:24px;top:20px; }
  .wordmark { left:24px;top:25%; }
  .field-card { left:24px;bottom:80px;padding:12px; }
  .departure-panel { right:20px;bottom:30px;width:45vw;padding:16px; }
  .title-footer { left:24px;bottom:22px; }
  .telemetry>div { min-width:78px;padding:8px 10px; }
  .flight-header { gap:10px;height:54px; }
  .flight-brand { font-size:clamp(9px,1.2vw,13px); }
  .map-panel { width:190px; }
  .flight-strip { max-width:calc(100vw - 235px);padding:10px 12px; }
  .power-row { gap:10px; }
  #instrument-panel { padding:5px;gap:4px; }
  .instrument { width:80px; }
  .attitude { width:140px;height:82px; }
  #attitude { width:136px;height:78px; }
}
@media (max-height:500px) and (min-width:600px) {
  .studio { top:12px;left:20px; }
  .studio img { width:32px;height:32px; }
  .wordmark { top:25%;left:20px; }
  .wordmark span { font-size:clamp(28px,4.5vw,45px);margin-bottom:8px; }
  .wordmark strong { font-size:clamp(38px,6vw,58px); }
  .wordmark p { margin-top:14px; }
  .field-card { display:none; }
  .departure-panel { bottom:24px;right:18px;padding:14px; }
  .departure-panel p { margin:10px 0; }
  .mode-row { margin:10px 0; }
  .departure-actions button { padding:9px 7px; }
  .title-footer { bottom:18px;font-size:clamp(5px,.65vw,7px); }
  .flight-header { top:8px;left:10px;right:10px; }
  .telemetry>div { min-width:67px;padding:6px 8px; }
  .telemetry strong { font-size:clamp(10px,1.6vw,14px);margin-top:6px; }
  .telemetry small { margin-top:4px; }
  .map-panel { top:78px;bottom:auto;right:12px;width:166px; }
  .map-title { padding:4px 5px;font-size:clamp(5px,.6vw,7px); }
  .map-footer { padding:6px 5px; }
  .throttle-control { left:auto;right:200px;top:78px;bottom:auto;width:44px;padding:6px 3px;gap:5px; }
  #throttle { height:82px;width:20px; }
  #flight-message { top:73px;font-size:clamp(7px,.8vw,9px); }
  #warning { top:102px;padding:8px; }
  .flight-strip,body.touch .flight-strip { bottom:145px;left:14px;padding:8px 10px;max-width:calc(100vw - 210px); }
  body:has(#instrument-panel:not([hidden])) .flight-strip { bottom:145px; }
  .flight-strip p { display:none; }
  .power-row { margin-top:8px;padding-top:8px; }
  #stick { width:108px;height:108px;left:16px;bottom:16px; }
  #touch-brake { left:138px;bottom:18px;padding:10px; }
  #instrument-panel { bottom:14px; }
  .menu-panel { padding:18px 22px; }
  .menu-panel h1 { margin:8px 0; }
  .menu-panel h2 { margin:18px 0 10px; }
  #tuning label { margin:14px 0; }
  .menu-options { margin:16px 0; }
}
@media (max-width:599px) {
  .studio { top:20px;left:18px;gap:10px; }
  .studio img { width:36px;height:36px; }
  .wordmark { left:18px;top:20%; }
  .wordmark span { font-size:clamp(32px,10vw,50px); }
  .wordmark strong { font-size:clamp(36px,13vw,62px); }
  .wordmark p { font-size:clamp(7px,2.2vw,10px);margin-top:18px; }
  .field-card { display:none; }
  .departure-panel { left:14px;right:14px;width:auto;bottom:48px;padding:16px; }
  .departure-actions button { font-size:clamp(7px,1.9vw,9px); }
  .title-footer { left:18px;font-size:clamp(5px,1.45vw,7px);bottom:20px; }
  .flight-header { left:8px;right:8px;top:8px;height:48px;gap:5px; }
  .flight-brand { display:none; }
  .telemetry { flex:1; }
  .telemetry>div { flex:1;min-width:0;padding:7px 6px; }
  .telemetry strong { font-size:clamp(9px,2.8vw,13px); }
  .telemetry span,.telemetry small { font-size:clamp(5px,1.5vw,7px); }
  .menu-button { padding:7px;font-size:clamp(6px,1.7vw,8px); }
  .map-panel { width:166px;bottom:auto;top:85px;right:8px; }
  .throttle-control { top:100px;left:18px;right:auto;bottom:auto; }
  #flight-message { top:67px;white-space:normal;width:90%;font-size:clamp(7px,1.9vw,9px); }
  #warning { top:285px;font-size:clamp(8px,2.2vw,11px); }
  .flight-strip,body.touch .flight-strip { left:10px;right:10px;max-width:none;bottom:265px;padding:10px; }
  body:has(#instrument-panel:not([hidden])) .flight-strip { bottom:265px; }
  .flight-strip strong { font-size:clamp(7px,1.8vw,9px); }
  .flight-strip p { display:none; }
  .power-row { font-size:clamp(6px,1.5vw,8px); }
  #instrument-panel { bottom:18px;width:calc(100% - 20px); }
  .instrument { flex:1;width:auto;padding:8px 4px; }
  .instrument span,.instrument small { font-size:clamp(5px,1.3vw,7px); }
  body:has(#instrument-panel:not([hidden])) #stick { bottom:130px;width:100px;height:100px; }
  body:has(#instrument-panel:not([hidden])) #touch-brake { bottom:140px;left:135px; }
  body:has(#instrument-panel:not([hidden])) .throttle-control { bottom:auto; }
  .menu-panel { padding:18px 15px; }
  #tuning label { grid-template-columns:1fr 100px 34px;gap:10px;font-size:clamp(6px,1.6vw,8px); }
  .menu-options { gap:6px; }
  .menu-options button,.menu-actions button { font-size:clamp(6px,1.6vw,8px);padding:10px 7px; }
  .menu-actions { gap:6px; }
}