/* BitFlight's working aviation palette. B3B type, hard edges and flat shadows. */
:root { --bg:#0a1628;--panel:#142238;--panel-alt:#1b3044;--accent:#f2a65a;--accent-dim:#d18d46;--cream:#fff0d7;--dim:#a6b0c3;--border:#3a4b61;--money:#62dca5;--danger:#ff7164;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px); }
* { box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none; }
body { background:var(--bg);font-family:var(--font-pixel);font-size:clamp(8px,.85vw,11px);color:var(--cream);touch-action:none; }
[hidden] { display:none!important; }
h1,h2,p,figure { margin:0; } h1,h2,strong { font-weight:400; }
button { font-family:var(--font-pixel);font-weight:400;cursor:pointer;line-height:1.6; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
button:disabled { cursor:default;opacity:.6; }
.fbs-btn { font-size:clamp(8px,.8vw,11px);letter-spacing:.02em;padding:10px 14px;overflow-wrap:anywhere; }
.fbs-btn--secondary { border-color:var(--border);background:var(--panel); }
.text-button { min-height:44px;border:0;padding:8px;background:transparent;color:var(--accent);font-size:clamp(8px,.75vw,10px);font-family:var(--font-pixel);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto; }
.label { display:block;color:var(--dim);font-size:clamp(7px,.7vw,9px);line-height:1.8;letter-spacing:.04em; }
#world { position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none; }
#interface { position:fixed;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);pointer-events:none; }
.screen { position:absolute;inset:0;pointer-events:auto; }
#title-screen { background:var(--bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:20px 30px 8px;gap:14px; }
.launch-header,.title-footer { display:flex;align-items:center;justify-content:space-between;gap:14px; }
.studio { display:flex;align-items:center;gap:12px;font-size:clamp(7px,.85vw,11px); }
.studio img { width:42px;height:42px; }
.beta-tag { display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:7px 8px;font-size:clamp(6px,.65vw,8px);line-height:1.4;white-space:nowrap; }
.coin-wallet { display:flex;align-items:center;gap:8px;color:var(--money);font-size:clamp(8px,.8vw,11px);line-height:1.5;white-space:nowrap; }
.coin-wallet small { font-size:clamp(6px,.6vw,8px);color:var(--dim); }
.coin-icon { display:inline-block;width:10px;height:12px;border:2px solid var(--money);background:var(--bg);flex-shrink:0; }
.launch-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,470px);gap:32px;max-width:1380px;width:100%;height:100%;margin:0 auto;overflow:hidden;min-height:0;grid-template-rows:minmax(0,1fr);padding:4px 4px 10px;scrollbar-color:var(--border) var(--bg); }
.launch-layout,.launch-layout *,.departure-content,.departure-content *,.menu-scroll,.menu-scroll *,.fleet-list,.fleet-list *,.chart-details,.chart-details * { touch-action:pan-y; }
.launch-hero { min-width:0;display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:720px;overflow-y:auto; }
.wordmark h1 { font-size:clamp(32px,5.5vw,76px);line-height:1.23;letter-spacing:-.06em;text-shadow:4px 4px 0 #0008; }
.wordmark h1 span { display:block;color:var(--accent); }
.wordmark p { margin-top:15px;line-height:1.8;font-size:clamp(8px,.9vw,12px); }
.launch-picture { border:2px solid var(--border);box-shadow:var(--drop); }
.launch-art { display:block;width:100%;aspect-ratio:400/224;object-fit:contain;image-rendering:pixelated;background:#d9ceb3; }
.launch-picture figcaption { display:flex;justify-content:space-between;gap:12px;padding:12px;background:var(--panel);font-size:clamp(6px,.7vw,9px);line-height:1.7; }
.launch-summary { display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:clamp(6px,.7vw,9px);line-height:1.7; }
.departure-panel { min-width:0;padding:20px;background:var(--panel);border:2px solid var(--border);box-shadow:var(--drop);align-self:stretch;height:100%;min-height:0;display:flex;flex-direction:column; }
.departure-content { flex:1;min-height:0;overflow-y:auto;scrollbar-color:var(--border) var(--panel);padding-bottom:8px; }
.departure-heading { display:flex;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border); }
.departure-heading .label:last-child { color:var(--accent);font-size:clamp(6px,.6vw,8px); }
.plane-choice { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;padding-bottom:16px;border-bottom:1px solid var(--border); }
.plane-choice>div { min-width:0; }.plane-choice strong { display:block;font-size:clamp(10px,1.2vw,15px);line-height:1.7;margin:6px 0; }.plane-choice small { display:block;color:var(--dim);font-size:clamp(6px,.6vw,8px);line-height:1.7; }
.plane-choice button { flex-shrink:0;padding:8px; }
.mode-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0; }
.choice { min-width:0;min-height:65px;background:var(--bg);border:2px solid var(--border);color:var(--cream);padding:10px 8px;text-align:left;font-size:clamp(8px,.8vw,10px);letter-spacing:0; }
.choice small { display:block;font-family:var(--font-pixel-body);font-size:clamp(17px,1.55vw,21px);color:var(--dim);margin-top:5px;line-height:1.1; }.choice.selected { border-color:var(--accent);color:var(--accent); }
#mode-description { font-family:var(--font-pixel-body);font-size:clamp(19px,1.8vw,23px);line-height:1.1;color:var(--cream);margin:12px 0;min-height:26px; }
.route-choice { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);align-items:center; }
.route-choice strong { display:block;font-size:clamp(7px,.7vw,9px);line-height:1.8;margin-top:4px; }.route-choice .text-button { font-size:clamp(6px,.6vw,8px); }
.chart-link { padding-left:0;justify-content:flex-start; }
.launch-options { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px; }.launch-options button { min-width:0;font-size:clamp(7px,.7vw,9px);padding:8px 5px; }
.departure-actions { display:grid;grid-template-columns:1fr;gap:2px; }.departure-actions .fbs-btn { min-height:49px; }
.title-footer { font-size:clamp(6px,.65vw,9px);line-height:1.8;color:var(--dim); }.title-footer .text-button { font-size:clamp(6px,.65vw,9px); }
/* Fleet preview remains live 3D behind these two panels. */
.hangar-header,.chart-header { position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px; }.hangar-header h1,.chart-header h1 { font-size:clamp(13px,1.8vw,24px);text-shadow:2px 2px 0 var(--bg);line-height:1.5; }
.hangar-header .coin-wallet { background:var(--bg);padding:10px; }
.hangar-detail { position:absolute;left:20px;bottom:20px;width:43%;max-width:550px;padding:18px;background:var(--bg);border:2px solid var(--border);box-shadow:var(--drop); }
.hangar-detail h2 { font-size:clamp(16px,2vw,27px);line-height:1.5;margin:9px 0; }.hangar-detail>p { font-family:var(--font-pixel-body);font-size:clamp(20px,1.8vw,25px);line-height:1.1; }.hangar-detail .fbs-btn { width:100%; }
.hangar-specs { display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--border);margin:14px 0; }.hangar-specs>div { padding:10px 8px;min-width:0; }.hangar-specs>div+div { border-left:1px solid var(--border); }.hangar-specs span { display:block;font-size:clamp(6px,.55vw,8px);color:var(--dim); }.hangar-specs strong { display:block;font-size:clamp(8px,.85vw,12px);margin-top:10px;line-height:1.7; }
#hangar-note { color:var(--dim);margin-top:10px;font-size:clamp(17px,1.5vw,21px); }
.fleet-list { position:absolute;right:20px;top:90px;bottom:20px;width:45%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:12px;overflow-y:auto;padding:2px 2px 6px;scrollbar-color:var(--border) var(--bg); }
.fleet-card { position:relative;min-width:0;min-height:142px;padding:14px 12px;background:var(--bg);border:2px solid var(--border);box-shadow:var(--drop);text-align:left;color:var(--cream); }.fleet-card.selected { border-color:var(--accent); }.fleet-role { display:block;font-size:clamp(6px,.55vw,8px);color:var(--dim); }.fleet-card strong { display:block;font-size:clamp(9px,.9vw,13px);line-height:1.8;margin:12px 0; }.fleet-status { display:block;font-size:clamp(6px,.6vw,9px);color:var(--accent);margin-top:18px; }
.fleet-silhouette { position:absolute;right:12px;bottom:12px;width:34px;height:30px;background:#a6b0c3;clip-path:polygon(47% 0,53% 0,58% 36%,100% 53%,100% 64%,58% 55%,57% 85%,76% 95%,76% 100%,24% 100%,24% 95%,43% 85%,42% 55%,0 64%,0 53%,42% 36%); }.fleet-silhouette.airliner,.fleet-silhouette.widebody,.fleet-silhouette.business { height:40px; }
/* Region chart has one map and a scrollable flight log. */
.chart-screen { background:var(--bg); }.chart-layout { position:absolute;inset:86px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:16px; }.chart-map { position:relative;min-width:0;min-height:0;border:2px solid var(--border);background:var(--panel); }.chart-map canvas { width:100%;height:100%;display:block; }.chart-zoom { position:absolute;left:12px;top:12px;display:flex;gap:6px; }.chart-zoom button { min-width:44px; }.chart-legend { position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:14px;justify-content:center;background:var(--bg);padding:10px;font-size:clamp(5px,.6vw,8px);line-height:1.7; }.chart-legend span:first-child { color:var(--accent); }.chart-legend span:nth-child(2) { color:var(--dim); }
.chart-details { min-height:0;overflow-y:auto;padding:14px;background:var(--panel);border:1px solid var(--border); }.chart-details h2 { font-size:clamp(11px,1.1vw,16px);line-height:1.9;margin:12px 0; }.chart-details p { font-family:var(--font-pixel-body);font-size:clamp(21px,1.8vw,25px);line-height:1.15;color:var(--dim); }.airport-card { display:block;width:100%;text-align:left;background:var(--bg);border:2px solid var(--border);color:var(--cream);padding:12px;margin-top:12px; }.airport-card.selected { border-color:var(--accent); }.airport-card span { font-size:clamp(7px,.7vw,10px);color:var(--accent); }.airport-card strong { display:block;font-size:clamp(10px,1vw,14px);margin:10px 0; }.airport-card small { font-family:var(--font-pixel-body);font-size:clamp(18px,1.6vw,22px); }.chart-log { border-top:1px solid var(--border);padding-top:18px;margin:18px 0; }.log-entry { margin-top:14px; }.log-entry strong { display:block;font-size:clamp(8px,.8vw,11px); }.log-entry span { display:block;font-family:var(--font-pixel-body);font-size:clamp(19px,1.7vw,23px);color:var(--dim);margin-top:7px; }.chart-help { border-top:1px solid var(--border);padding-top:14px; }
/* In-flight controls occupy the edges, keeping the forward view clear. */
.flight-header { position:absolute;top:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:14px; }.flight-brand { font-size:clamp(10px,1.2vw,16px);text-shadow:2px 2px 0 var(--bg); }.flight-brand span { display:block;font-size:clamp(6px,.6vw,9px);margin-top:10px; }.telemetry { display:flex;background:var(--bg);border:2px solid var(--border);box-shadow:var(--drop); }.telemetry>div { min-width:96px;padding:8px 12px; }.telemetry>div+div { border-left:1px solid var(--border); }.telemetry span,.telemetry small { display:block;font-size:clamp(6px,.55vw,8px);color:var(--dim); }.telemetry strong { display:block;font-size:clamp(13px,1.4vw,19px);margin:8px 0; }.menu-button { pointer-events:auto; }
.flight-wallet { position:absolute;top:94px;left:16px;background:var(--bg);border:1px solid var(--border);padding:7px 9px; }
#flight-message { position:absolute;top:102px;left:50%;transform:translateX(-50%);max-width:65%;font-size:clamp(8px,.8vw,11px);text-align:center;line-height:1.8;text-shadow:2px 2px 0 var(--bg); }.flight-strip { position:absolute;bottom:138px;left:16px;max-width:calc(100% - 320px);padding:10px 12px;background:var(--bg);border-left:3px solid var(--accent);box-shadow:var(--drop); }.flight-strip strong { display:block;font-size:clamp(7px,.75vw,10px);line-height:1.8;margin-top:7px; }.power-row { display:flex;flex-wrap:wrap;gap:10px;font-size:clamp(6px,.55vw,8px);border-top:1px solid var(--border);margin-top:8px;padding-top:8px; }
#warning { position:absolute;top:146px;left:50%;transform:translateX(-50%);background:var(--danger);padding:12px;font-size:clamp(8px,.8vw,11px);line-height:1.8;text-align:center;max-width:80%; }
.map-panel { position:absolute;right:16px;bottom:18px;width:244px;background:var(--bg);border:2px solid var(--border);box-shadow:var(--drop); }.map-title,.map-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;font-size:clamp(5px,.55vw,8px);line-height:1.7; }.map-title { border-bottom:1px solid var(--border); }.map-title .text-button { min-height:32px;font-size:clamp(6px,.6vw,8px); }#map { display:block;width:100%;height:150px;image-rendering:pixelated; }
#map-toggle,#flight-chart { position:absolute;right:16px;top:93px;pointer-events:auto; }#map-toggle { display:none; }#flight-chart { font-size:clamp(7px,.7vw,9px); }
.throttle-control { position:absolute;left:16px;top:146px;display:flex;flex-direction:column;align-items:center;gap:10px;width:56px;padding:10px 5px;border:2px solid var(--border);background:var(--bg);pointer-events:auto; }.throttle-control label,.throttle-control output { font-size:clamp(6px,.55vw,8px); }.throttle-control .text-button { font-size:clamp(6px,.55vw,8px);padding:2px; }#throttle { writing-mode:vertical-lr;direction:rtl;width:26px;height:135px;accent-color:var(--accent);touch-action:none; }
.flight-actions { position:absolute;right:16px;bottom:252px;display:flex;justify-content:flex-end;gap:6px;max-width:calc(100% - 32px);pointer-events:auto;flex-wrap:wrap; }.flight-actions button { padding:8px 10px;font-size:clamp(7px,.65vw,9px); }.flight-actions button:disabled { opacity:1;background:var(--panel);color:var(--dim);border-color:var(--border); }
#instrument-panel { position:absolute;bottom:18px;left:16px;display:flex;gap:6px;align-items:stretch;padding:6px;background:var(--bg);border:2px solid var(--border); }.instrument { width:87px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:10px; }.instrument span,.instrument small { font-size:clamp(5px,.5vw,7px); }.instrument strong { font-size:clamp(15px,1.5vw,21px); }.attitude { width:130px;height:82px; }#attitude { display:block;width:100%;height:100%;image-rendering:pixelated; }
#reticle { position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--cream);transform:translateX(-50%);opacity:.7; }#reticle span { position:absolute;left:8px;top:-8px;width:2px;height:18px;background:var(--cream); }
#touch-controls { display:none; }body.touch #touch-controls { display:block; }#stick { position:absolute;left:16px;bottom:18px;width:120px;height:120px;background:#0a1628dc;border:2px solid var(--border);pointer-events:auto;touch-action:none; }#stick::before,#stick::after { content:'';position:absolute;background:var(--border); }#stick::before { width:1px;height:100%;left:50%; }#stick::after { height:1px;width:100%;top:50%; }#stick-knob { position:absolute;left:calc(50% - 17px);top:calc(50% - 17px);width:34px;height:34px;border:2px solid var(--bg);background:var(--accent); }#stick small { position:absolute;bottom:5px;left:0;width:100%;text-align:center;font-size:clamp(5px,.5vw,7px); }#touch-brake { position:absolute;left:148px;bottom:18px;pointer-events:auto; }
body.control-drag #stick { display:none; }body.on-foot #stick { display:block; }.on-foot .throttle-control,.on-foot #touch-brake,.on-foot .vs-cell,.skydiving .throttle-control,.skydiving #touch-brake,.skydiving .vs-cell { display:none; }
#deck-panel { position:absolute;right:16px;bottom:308px;width:320px;max-width:calc(100% - 32px);background:var(--bg);border:2px solid var(--accent);padding:12px;pointer-events:auto;box-shadow:var(--drop); }#deck-panel header { display:flex;justify-content:space-between;align-items:center;gap:8px; }#deck-panel>div { display:grid;grid-template-columns:1fr 1fr;gap:8px; }#deck-panel button { font-size:clamp(7px,.65vw,9px);padding:8px; }#deck-panel p { font-family:var(--font-pixel-body);font-size:clamp(18px,1.6vw,22px);line-height:1.1;margin-top:12px;color:var(--dim); }
.overlay { position:absolute;inset:0;background:#0a1628c9;display:flex;align-items:center;justify-content:center;padding:14px;pointer-events:auto; }.menu-panel { display:flex;flex-direction:column;width:min(720px,100%);max-height:100%;min-height:0;background:var(--bg);border:2px solid var(--border);box-shadow:var(--drop); }.menu-header { flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--border); }.menu-header h1 { font-size:clamp(17px,2vw,26px);line-height:1.5;margin-top:8px; }.menu-scroll { padding:18px 20px;overflow-y:auto;min-height:0;scrollbar-color:var(--border) var(--bg); }.menu-scroll>p { font-family:var(--font-pixel-body);font-size:clamp(21px,1.8vw,26px);line-height:1.2;color:var(--dim); }#flight-earned { margin:14px 0; }#tuning h2 { font-size:clamp(10px,1vw,14px);margin:22px 0 15px; }#tuning label { display:grid;grid-template-columns:190px minmax(0,1fr) 42px;align-items:center;gap:12px;font-size:clamp(7px,.7vw,9px);line-height:1.8;margin:18px 0; }#tuning input { width:100%;min-width:0;accent-color:var(--accent);touch-action:none; }#tuning output { text-align:right; }.menu-options { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0; }.menu-options button { min-width:0; }.control-guide { border-top:1px solid var(--border);padding-top:14px; }.control-guide p { font-family:var(--font-pixel-body);font-size:clamp(20px,1.8vw,25px);line-height:1.2;color:var(--dim);margin:8px 0; }.menu-actions { flex-shrink:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;border-top:1px solid var(--border);padding:14px 20px; }.menu-actions button { font-size:clamp(7px,.7vw,9px);padding:8px 6px; }#landing-stats { font-size:clamp(8px,.8vw,11px);line-height:1.8; }#save-note { color:var(--danger);margin-top:18px; }#failure .menu-panel { padding:24px;gap:20px; }#failure h1 { font-size:clamp(15px,2vw,26px); }#failure p { font-family:var(--font-pixel-body);font-size:clamp(20px,2vw,26px); }
#zoom-hatch { position:fixed;left:0;top:0;transform-origin:0 0;z-index:1000;pointer-events:auto; }#performance { position:absolute;left:12px;bottom:4px;font-family:var(--font-pixel-body);font-size:clamp(13px,1.1vw,16px);color:var(--cream);background:var(--bg);padding:3px 6px; }
#flight-ui { position:absolute;inset:0;overflow:hidden; }