/* Warm neutral game interface. */
:root {
  color-scheme: light;
  --bg: #f3f1ea;
  --panel: #faf9f4;
  --text: #252724;
  --dim: #666b63;
  --line: #cfcfc4;
  --red: #b13e35;
  --cyan: #287552;
  --green: #287552;
  font-family: Arial, Helvetica, system-ui, sans-serif;
}

body { background: #f3f1ea; color: #252724; }
button { background: #faf9f4; border-color: #c8cbbf; border-radius: 4px; }
button:hover { border-color: #888e80; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: #287552;
}
.topbar { background: #f3f1ea; border-bottom: 1px solid #d3d4ca; }
.wordmark > span { font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.wordmark small { color: #676d63; letter-spacing: .04em; }
.stages button { color: #71766b; letter-spacing: 0; font-weight: 600; }
.stages button span { font-family: inherit; font-size: 12px; color: #868b7f; }
.stages button[aria-pressed=true] {
  color: #252724;
  border-bottom-color: #287552;
  background: #e7eadf;
}
.stages button[aria-pressed=true] span { color: #287552; }
.tools button { background: transparent; border-color: #c7cbbf; letter-spacing: 0; }
.tools #pause { background: #287552; color: #fff; border-color: #287552; }

.preferences-bar { background: #eae9e0; border-bottom-color: #d1d3c7; }
.language-label, .volume-control > span { color: #656b60; }
.language-picker select {
  color: #343931;
  background: #f7f6f0;
  border-color: #c6cbbb;
  font-family: inherit;
}
.audio-controls button { background: transparent; color: #666c61; border-color: #c6cbbb; }
.audio-controls button::before { background: #92988b; }
.audio-controls button[aria-pressed=true] {
  color: #235c43;
  background: #f7f8f1;
  border-color: #a7bba5;
}
.audio-controls button[aria-pressed=true]::before { background: #287552; box-shadow: none; }
.volume-control input { accent-color: #287552; }
.audio-status:not(:empty) { background: #f6ebd7; color: #674e20; border: 1px solid #d9c8a4; }

/* A neutral instrument strip stays legible above the original night track. */
.telemetry { background: #252724f5; padding-top: 13px; padding-bottom: 13px; }
.metric > span { color: #bfc4b6; font-size: 9px; letter-spacing: .015em; min-height: 1.25em; }
.metric strong {
  font-family: Arial, Helvetica, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.045em;
  color: #f3f1ea;
  font-size: 29px;
}
.metric strong small { font-family: inherit; color: #bfc4b6; letter-spacing: 0; }
.track { background: #53584e; height: 3px; }
.track i { background: #9ab7a0; }
.metric.warning strong { color: #eac480; }
.metric.danger strong { color: #f2a29b; }
.scene-caption { color: #e2e2d7; letter-spacing: .015em; }
.mode-dot { background: #b9beb1; }
.mode-dot.air { background: #9bc8a7; box-shadow: none; }
.separator { color: #9da396; }
.score-panel { color: #eeeee4; text-shadow: 0 1px 4px #0008; }
.score-panel > span { letter-spacing: .015em; }
.score-panel strong { font-family: inherit; font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.score-panel small { color: #bac7b8; }
.attitude { border: 1px solid #adaf9b; background: #4c554d; }
.horizon { background: linear-gradient(#748071 0 49.6%, #f6f1dc 49.6% 50.4%, #5e5342 50.4%); }
.fixed-wing, .fixed-wing::after { border-color: #fff3cf; }
.center-dot { background: #fff3cf; }
.angle span, .rate span { color: #c6cbbb; letter-spacing: .015em; }
.angle strong, .rate strong { color: #f3f1ea; font-family: inherit; font-weight: 500; letter-spacing: -.03em; }
.angle strong { font-size: 18px; }
.rate strong { font-size: 14px; }
.scene-footer { color: #f3f1ea; text-shadow: 0 1px 4px #000; }
.scene-footer #timer { color: #ced2c5; letter-spacing: 0; }
.portrait-hint { color: #bdc2b3; }

.control-deck {
  background: #f3f1ea;
  border-top: 1px solid #c9ccbf;
  box-shadow: none;
}
.control-title { color: #4b5447; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.control-title output {
  color: #252724;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.035em;
}
.control-title output small { font-family: inherit; color: #70766b; }
.stick { background: #e5e6db; border-color: #b9c0af; }
.stick:hover { border-color: #86977d; }
.ring { border-color: #bfc6b5; }
.axis { background: #c0c8b6; }
.knob { background: #434c3f; border-color: #434c3f; box-shadow: 0 2px 3px #25272426; }
.pad-top, .pad-bottom, .pad-left, .pad-right { color: #64715b; letter-spacing: 0; }
.stick-caption { color: #626a5d; }
.stick-caption span, .keyboard-hint span { color: #737e6a; }
.keyboard-hint { color: #747c6e; letter-spacing: 0; }
.lift-preset-hint { color: #626b5a; }
.system-field input { accent-color: #287552; }
.range-caps { color: #6c7663; letter-spacing: 0; }
.wheel-label { color: #68715f; letter-spacing: 0; }
.wheel-row button {
  background: #fcfbf6;
  border-color: #c5cbbb;
  color: #333b2c;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
.wheel-row button span { font-family: inherit; color: #78816c; letter-spacing: .015em; font-size: 7px; }
.wheel-row button[aria-pressed=true] { background: #287552; color: #fff; border-color: #287552; box-shadow: none; }
.wheel-row button[aria-pressed=true] span { color: #e9f4e9; }
.wheel-row .rear-control { background: #e7eadf; border-color: #b4bea7; font-size: 13px; }
.wheel-row .rear-control[aria-pressed=true] { background: #776440; color: #fff; border-color: #776440; }
.wheel-row .rear-control[aria-pressed=true] span { color: #fff3dc; }
.systems-foot { color: #66715a; letter-spacing: 0; }
.systems-foot button { color: #a23e32; font-weight: 600; letter-spacing: 0; }
.precision-toggle { background: #f9f8f2; color: #59674d; border-color: #bfc9b3; }
.precision-toggle[aria-pressed=true] { background: #dce8d7; color: #24583b; border-color: #8caf83; }
.app-footer { background: #e7e7dc; color: #6d7661; border-top: 1px solid #d1d5c6; letter-spacing: .015em; }
.app-footer button { color: #4f6143; letter-spacing: 0; }

.stage-overlay, .stage-overlay.terminal { background: none; }
.intro, .terminal .intro {
  color: #252724;
  background: #f3f1eaf5;
  border: 1px solid #c6ccbc;
  border-radius: 5px;
  backdrop-filter: none;
  box-shadow: 0 8px 25px #0003;
}
.eyebrow { color: #287552; font-weight: 600; letter-spacing: .025em; }
.intro h1 { font-family: inherit; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -.045em; }
.intro > p:not(.eyebrow) { color: #59614f; }
.overlay-facts { color: #70775f; letter-spacing: 0; }
.overlay-facts.result { color: #43654a; }
.primary { background: #287552; color: #fff; border-color: #287552; border-radius: 4px; letter-spacing: .015em; }
.primary:hover { background: #205f43; border-color: #205f43; }
.text-button { color: #3e5440; }
.scenario-note { color: #777c6b; }
.score-details { background: #e5eadd; border: 1px solid #c6d2b9; }
.score-details > strong { font-family: inherit; color: #287552; font-weight: 600; letter-spacing: -.035em; }
.score-details p, .score-details small { color: #596c4a; }
.impact-banner { background: #f3f1eaf5; color: #287552; border-color: #8eb69a; border-radius: 4px; box-shadow: 0 3px 12px #0003; }
.impact-banner strong { font-family: inherit; font-weight: 600; letter-spacing: -.02em; }
.impact-banner small { color: #4d6050; }
.impact-banner[data-kind=hard] { background: #f7efddf5; color: #795a1d; border-color: #ccb77c; }
.impact-banner[data-kind=hard] small { color: #75643c; }
.impact-banner[data-kind=crash] { background: #f6e9e4f5; color: #a33b30; border-color: #cf968a; }
.impact-banner[data-kind=crash] small { color: #875c50; }

dialog { background: #f3f1ea; color: #252724; border-color: #c6ccbc; border-radius: 6px; }
dialog::backdrop { background: #151a14bb; backdrop-filter: blur(3px); }
.dialog-head { border-color: #d0d5c5; }
.dialog-head h2 { font-family: inherit; font-size: 29px; font-weight: 600; letter-spacing: -.04em; }
.dialog-body h3 { color: #35482c; letter-spacing: 0; }
.dialog-body p, .assumption-list { color: #606954; }
.key-table kbd { color: #3a5130; letter-spacing: 0; }
.key-table span { color: #69765b; }
.dialog-body .briefing-note { background: #e5eadc; border-left-color: #74956b; color: #4c6040; }
.dialog-body .precision-note, .dialog-body .lift-note { color: #526b44; }
.source-links a { color: #287552; }
.diagnostics { background: #e1e8d7; color: #456039; border-top-color: #aab99c; }

@media (max-width: 850px) {
  .wordmark > span { font-size: 15px; }
  .metric strong { font-size: 26px; }
  .control-title { font-size: 9px; }
  .control-title output { font-size: 16px; }
}
@media (max-width: 620px) and (orientation: portrait) {
  .wordmark > span { font-size: 11px; }
  .wordmark small { letter-spacing: 0; }
  .stages button span { font-size: 9px; }
  .telemetry { padding-top: 10px; padding-bottom: 10px; }
  .metric > span { font-size: 6px; }
  .metric strong { font-size: 20px; }
  .control-title { font-size: 8px; }
  .control-title output { font-size: 15px; }
  .score-panel strong { font-size: 16px; }
  .angle strong { font-size: 15px; }
  .rate strong { font-size: 12px; }
  .intro h1 { font-size: 28px; }
  .wheel-row button { font-size: 13px; }
  .wheel-row button span { font-size: 6px; }
  .terminal .intro h1 { font-size: 27px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .wordmark > span { font-size: 13px; }
  .stages button span { font-size: 10px; }
  .telemetry { padding-top: 6px; padding-bottom: 8px; }
  .metric > span { font-size: 6px; }
  .metric strong { font-size: 19px; }
  .control-title { font-size: 8px; }
  .control-title output { font-size: 14px; }
  .angle strong { font-size: 13px; }
  .score-panel strong { font-size: 14px; }
  .wheel-row button { font-size: 12px; }
  .wheel-row button span { font-size: 5px; }
  .wheel-row .rear-control { font-size: 11px; }
  .intro h1, .terminal .intro h1 { font-size: 22px; }
  .paused .intro h1 { font-size: 18px; }
}