/* Approved ivory/orange suit hardware; text and hit areas remain native HTML. */
:root{--interface-scale:1;--frame:url('../assets/interface/console-frame.png');--cyan:#efc57d;--gold:#f6ad43;--ink:#eee4cd;--line:#6f5940}
.hardware-frame,#flight .ff-console,#flight .ff-picture,#flight .ff-controls,#flight .ff-top,#panel,.dialog{border:22px solid transparent;border-image:var(--frame) 13% stretch;background:linear-gradient(110deg,#171711,#080e11);background-clip:padding-box;border-radius:0;color:#ece2cc}
#menuBackdrop{position:fixed;inset:0;z-index:4;background:#05090e;pointer-events:none;transition:filter .5s}#menuBackdrop.menu-open{filter:brightness(.72)}#titleScreen{background:transparent}
#home{background:transparent!important;backdrop-filter:none;display:flex;align-items:center;justify-content:flex-start;padding:70px 24px 20px;z-index:5}
#home .home-card{position:relative;width:420px;max-width:100%;max-height:calc(100dvh - 90px);padding:18px 16px;margin:0;border-width:34px;overflow:auto;box-shadow:0 14px 40px #0009}
#home .menu-heading{border-bottom:1px solid #705229;padding-bottom:12px;margin-bottom:16px}#home .menu-heading h2{font:700 20px ui-monospace,monospace;letter-spacing:3px;margin:8px 0 0;color:#e6c08a}
#home .menu-choice{display:block;width:100%;min-height:70px;margin:12px 0;text-align:left;padding:16px 18px;background:linear-gradient(110deg,#1d211e,#0c1214);border:1px solid #756038;color:#eee1c6;text-transform:uppercase;font:700 calc(20px * var(--interface-scale)) ui-monospace,monospace;letter-spacing:1px}
#home .menu-choice.primary{border:2px solid #ffbf50;color:#ffd276;background:linear-gradient(100deg,#583608,#1b1d12);box-shadow:inset 3px 0 #ffbe4c}
#home .menu-choice small{display:block;font:12px/1.5 ui-monospace,monospace;letter-spacing:0;text-transform:none;margin-top:9px;color:#debf85}
#home button,#home select{border-color:#8a693c;color:#f4d8a3;background:#141b1a}#home button:hover{background:#3b301a;border-color:#ffc462}#home section p{font-size:calc(14px * var(--interface-scale))}#home section h3{font:700 19px ui-monospace,monospace;color:#ffcc7c}
#home details{max-width:none}#home .menu-footer{border-top:1px solid #71542d;margin-top:22px;padding-top:12px;display:flex;flex-wrap:wrap;gap:7px}#home .menu-footer button{font-size:12px;padding:8px}.menu-brand{position:absolute;top:24%;left:49%;width:49%;text-align:center;pointer-events:none;color:#beae92;font:700 clamp(20px,3vw,45px) ui-monospace,monospace;letter-spacing:7px;opacity:.8}
#menuSettingsPage select{display:block;width:100%;margin:8px 0}#menuSettingsPage label{display:block;margin-top:16px}
#flight{background:#080e11;padding:6px;max-width:none}#flight .ff-top{border-width:12px;padding:8px 12px;margin-bottom:6px}#flight .ff-top h2{font-size:18px}#flight .ff-top .ff-actions{gap:5px}#flight .ff-top button{font-size:11px;padding:7px}
#flight .ff-layout{grid-template-columns:minmax(0,1fr) 330px;gap:8px}#flight .ff-picture{border-width:14px}#flight .ff-stage{border:0;background:transparent}#flight .ff-controls{border-width:18px;padding:8px;gap:8px;margin-top:3px}#flight .ff-controls .controls-help{max-width:135px;font-size:9px;color:#d1c2a7}
#flight .ff-console{padding:10px 13px;border-width:24px;min-width:0}#flight .console-heading{font:700 20px ui-monospace,monospace;letter-spacing:2px;color:#ffd283;border-bottom:1px solid #987240;margin:0 0 12px;padding-bottom:12px}
#flight .console-tabs{display:flex;gap:3px;margin-bottom:12px}#flight .console-tabs button{flex:1;padding:7px 3px;font-size:11px}#flight button,#flight input,#flight select,#panel button,#panel input,#panel select{border-color:#766043;color:#eedab5;background:#141e20}#flight button:hover,#panel button:hover{border-color:#ffd281;background:#39321f}#flight button[aria-pressed=true],#flight button.primary,#panel button.primary{background:#e9a441;color:#191910;border-color:#ffda87}#flight button:disabled{opacity:.5}
#flight .ff-hint,#flight .ff-stat,#flight label,#flight .ff-small{font-size:calc(12px * var(--interface-scale))}#flight .ff-stat{background:#090f12;border-left:2px solid #d39749;color:#e8d2ac}#flight .ff-objective-banner{background:#08131dee;border-color:#b28445}#flight .ff-objective-banner strong{color:#fff0d0}#flight .ff-message{border-left:2px solid #bd8a4a;color:#ecc895;font-size:12px;padding:9px}
#flight .ff-launch-action{width:100%;margin-top:3px;min-height:44px;color:#ffd680;border-color:#a77839}
#flight .ff-console>p.ff-small{display:none}#flight .ff-console #ffSave{display:block}#flight .ff-checks{font-size:11px;padding-left:16px;color:#b8b0a0}#flight .console-footer{display:flex;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid #76562f}#flight .console-footer button{flex:1;font-size:12px}
#flight.planner-open .ff-layout{grid-template-columns:minmax(0,1fr) 420px}#flight.planner-open .ff-picture canvas{filter:brightness(.85)}#flight #ffPredict{border:0;padding:0;background:transparent}#flight #ffPredict p{font-size:14px;line-height:1.5}#flight #ffAnswer{font-size:20px;width:100%;margin:8px 0}
#flight .console-keypad{margin:10px 0;padding:0;border:0}#flight .console-keypad #ffFold{font-size:11px;min-height:30px;margin:0}#flight .console-keypad .ff-instrument-body{background:none;aspect-ratio:auto;min-height:0;height:auto;padding:0}#flight .console-keypad .ff-instrument-screen{position:static;width:100%;height:auto;min-height:36px;background:#0b1417;color:#ffd680;padding:4px;margin:6px 0;font-size:15px}
#flight .console-keypad .ff-instrument-keys{position:static;width:100%;height:auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,48px);gap:5px}#flight .console-keypad .ff-instrument-keys button{min-height:44px;font-size:19px;border:2px outset #676359;background:linear-gradient(#263239,#152127);color:#f6e5c3}#flight .console-keypad .ff-instrument-keys button:last-child{grid-column:span 2;font-size:12px}#flight .console-keypad.folded .ff-instrument-keys,#flight .console-keypad.folded .ff-instrument-screen{display:none}#flight .console-keypad>p{display:none}
#panel,.dialog{padding:18px;border-width:23px}#panel h2{color:#ffd18b}#app header{background:#0c1418}#app .viewport{border:12px solid transparent;border-image:var(--frame) 13% stretch}
@media(max-width:1100px){#flight .ff-layout{grid-template-columns:minmax(0,1fr) 300px}#flight.planner-open .ff-layout{grid-template-columns:minmax(0,1fr) 360px}#flight .ff-console{border-width:18px;padding:8px}#flight .ff-controls .controls-help{display:none}}
@media(max-width:700px){#home{padding:62px 10px 12px;justify-content:center}#home .home-card{width:420px;border-width:24px;padding:12px;max-height:calc(100dvh - 75px);background-color:#101511}.menu-brand{display:none}#home .menu-choice{min-height:60px;font-size:17px;padding:13px}#flight .ff-layout,#flight.planner-open .ff-layout{grid-template-columns:minmax(0,1fr)}#flight .ff-console{border-width:16px}#flight .ff-picture{border-width:8px}#flight .ff-controls{border-width:7px;padding:2px;gap:3px}#flight .ff-launch-action{margin-bottom:3px}#flight .ff-top{border-width:8px;padding:5px}#flight .ff-top h2{font-size:15px}#flight .ff-stage{position:static}#flight .ff-picture{position:sticky;top:50px;z-index:2}}
body.compact-landscape #flight .ff-top{border-width:5px;padding:3px}body.compact-landscape #flight .ff-layout,body.compact-landscape #flight.planner-open .ff-layout{grid-template-columns:minmax(0,1fr) 290px}body.compact-landscape #flight .ff-controls{border-width:7px;padding:3px}body.compact-landscape #flight .ff-console{border-width:10px;padding:7px}body.compact-landscape #flight .ff-picture{border-width:6px}
@media(prefers-reduced-motion:reduce){#menuBackdrop{transition:none}}

@media(min-width:701px) and (min-height:601px){
 #flight{display:flex;flex-direction:column;overflow:hidden}
 #flight .ff-top{flex:none;width:100%;max-width:none}
 #flight .ff-layout{flex:1;min-height:0;width:100%;max-width:none}
 #flight .ff-stage{height:100%;min-height:0;align-self:stretch;position:relative;display:grid;grid-template-rows:minmax(120px,1fr) 236px 48px 44px}
 #flight .ff-picture{display:flex;align-items:center;justify-content:center;overflow:hidden}
 #flight .ff-picture canvas{flex:none;max-width:none;aspect-ratio:auto}
 #flight .ff-controls{min-height:0;margin:0}
 #flight .ff-launch-action{margin:0}
 #flight .ff-message{min-height:0;overflow:auto;margin:0}
 #flight .ff-console{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:12px}
}
body.compact-landscape #flight .ff-stage{grid-template-rows:minmax(0,1fr) 44px 38px}
body.compact-landscape #flight .ff-launch-action{grid-column:1/-1;grid-row:2;min-height:44px;margin:0}
body.compact-landscape #flight .ff-message{grid-row:3}
#flight .ff-thrust-hardware #ffQuickMatch{color:#ffcf7d;border-color:#bf883f;background:#302516}

/* The title plate remains visible while Jack checks his console. */
#home:not([data-title-ready="true"]){visibility:hidden;pointer-events:none}

#flight #ffOxygenHUD{--o2:#75e49e;position:absolute;left:8px;bottom:8px;z-index:3;width:270px;max-width:48%;box-sizing:border-box;margin:0;padding:9px 12px;font-size:11px;white-space:normal;background:#090f12ed;border:1px solid var(--o2);border-left:5px solid var(--o2);color:var(--o2);pointer-events:none}
#flight #ffOxygenHUD[data-band=yellow]{--o2:#f5df62}#flight #ffOxygenHUD[data-band=orange]{--o2:#ffac50}#flight #ffOxygenHUD[data-band=red]{--o2:#ff7575;box-shadow:0 0 18px #f4433628}
#ffOxygenValue{display:block;font:700 29px/1.1 ui-monospace,monospace}#ffOxygenText{display:block;font:11px/1.35 ui-monospace,monospace;margin:5px 0;color:#ede4d2}
#ffOxygenBar{display:block;width:100%;height:12px;accent-color:var(--o2);appearance:none;border:0;background:#263236;border-radius:2px;overflow:hidden}#ffOxygenBar::-webkit-progress-bar{background:#263236}#ffOxygenBar::-webkit-progress-value{background:var(--o2)}#ffOxygenBar::-moz-progress-bar{background:var(--o2)}#ffOxygenRecover{pointer-events:auto;max-width:100%;margin-top:6px}
#ffAlarmHUD{position:absolute;z-index:4;left:8px;right:8px;top:5px;padding:5px 8px;text-align:center;font:700 12px/1.2 ui-monospace,monospace;letter-spacing:1px;color:#ffd6d0;background:#6d171aaa;border:1px solid #ec736c99;pointer-events:none}
#flight .has-alarm .ff-objective-banner{top:40px}
#ffPauseOverlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:350px;max-width:88%;padding:16px;text-align:center;border:1px solid #e9b66c;background:#091316e8;box-shadow:0 8px 24px #0008;box-sizing:border-box}
#ffPauseTitle{display:block;font:700 20px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#ffcf82}#ffPauseHint{font:12px/1.4 ui-monospace,monospace;color:#e4dbc8;margin:9px 0}#flight #ffResumeOverlay{width:100%;min-height:48px;font-size:14px}
#flight .is-paused .ff-objective-banner{width:auto;left:auto;right:8px;top:38px;padding:0;border:0;background:none}#flight .is-paused .ff-objective-banner>div{display:none}
#ffPauseOverlay{pointer-events:none}#ffResumeOverlay{pointer-events:auto}
#flight .feedback-compact #ffPauseHint{display:none}#flight .feedback-compact #ffPauseOverlay{width:270px;padding:6px;transform:translate(-50%,-70%)}#flight .feedback-compact #ffPauseTitle{font-size:14px;margin-bottom:6px}
#flight .feedback-tiny #ffPauseOverlay{top:8px;transform:translateX(-50%)}#flight .feedback-tiny.has-alarm #ffPauseOverlay{top:34px}#flight .feedback-tiny.has-alarm #ffPauseTitle{display:none}
@media(max-width:700px),(max-height:600px){#flight #ffOxygenHUD{padding:5px 7px;width:210px;max-width:49%;left:4px;bottom:4px}#ffOxygenValue{font-size:23px}#ffOxygenText{font-size:9px;margin:3px 0}#ffOxygenBar{height:10px}#ffPauseOverlay{padding:8px;width:310px}#ffPauseTitle{font-size:15px}#ffPauseHint{font-size:10px;margin:5px 0}#flight #ffResumeOverlay{font-size:12px;min-height:44px}#ffAlarmHUD{font-size:10px}}
