:root {
  color-scheme: dark;
  --bg: #08131e;
  --panel: #0e1c29;
  --panel-high: #142737;
  --line: #263b4c;
  --line-strong: #355266;
  --text: #e4edf2;
  --muted: #91a5b3;
  --faint: #647c8b;
  --cyan: #79c9e4;
  --green: #75c49a;
  --amber: #e5b35f;
  --red: #e9847d;
  --sans: "Aptos", "Segoe UI", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { height: 100vh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--bg); font: 12px/1.4 var(--sans); }
button, input, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #f0c879; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar { flex: 0 0 61px; padding: 0 16px; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid var(--line); background: #0b1925; }
.brand { min-width: 181px; display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #58788b; color: #c7e6f0; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.brand > span:last-child { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.brand small { display: block; margin-top: 2px; color: #8097a6; font-size: 7px; font-weight: 500; letter-spacing: 1.2px; }
.shift-status { min-width: 90px; flex: 1; display: grid; gap: 2px; color: #c7d4dc; font-size: 10px; }
.shift-status span, .radar-meta > span, .radar-meta label { color: #71899a; font-size: 8px; letter-spacing: 1px; }
.shift-status strong { overflow: hidden; color: #c7d4dc; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.score-counter { min-width: 54px; padding: 5px 9px; display: grid; gap: 1px; border-left: 1px solid var(--line); color: #e5b35f; text-align: right; }
.score-counter span { color: #8298a7; font: 8px var(--mono); letter-spacing: 1px; }
.score-counter strong { font: 700 15px var(--mono); }
.header-actions { display: flex; gap: 6px; }
.button { min-height: 30px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 2px; color: #cddae2; background: #102130; font-size: 10px; transition: border-color .12s, background .12s; }
.button:hover:not(:disabled) { border-color: #6a8b9e; background: #172e40; }
.button-primary { border-color: #367b93; color: #e8f7fb; background: #164256; }
.button-primary:hover:not(:disabled) { border-color: #73bfd6; background: #1a526b; }
.button-small { min-height: 25px; padding: 4px 8px; }

.app-grid { flex: 1 1 auto; min-height: 0; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(275px, 315px); gap: 10px; }
.radar-card, .panel { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.radar-card { min-height: 0; display: flex; flex-direction: column; }
.radar-heading { flex: 0 0 51px; padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0; color: var(--faint); font-size: 7px; font-weight: 650; letter-spacing: 1.25px; }
.radar-heading h1 { margin: 2px 0 0; color: #e7eff3; font-size: 14px; font-weight: 550; letter-spacing: .15px; }
.scope-live { margin-left: 6px; color: #83cba0; font-size: 8px; font-weight: 600; letter-spacing: 1px; vertical-align: 1px; }
.scope-live i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--green); }
.radar-meta { display: flex; align-items: center; gap: 12px; }
.radar-meta > span { display: flex; align-items: center; gap: 5px; }
.radar-meta strong { color: #d7e6ec; font: 12px var(--mono); letter-spacing: .4px; }
.radar-meta label { display: flex; align-items: center; gap: 5px; }
.radar-wrap { flex: 1 1 auto; min-height: 200px; position: relative; overflow: hidden; background: #081723; }
#radar { width: 100%; height: 100%; display: block; touch-action: manipulation; cursor: crosshair; }
.radar-compass { position: absolute; color: #6e8797; font: 8px var(--mono); pointer-events: none; }
.compass-n { top: 6px; left: 50%; transform: translateX(-50%); }
.compass-s { bottom: 5px; left: 50%; transform: translateX(-50%); }
.compass-e { top: 50%; right: 6px; transform: translateY(-50%); }
.compass-w { top: 50%; left: 6px; transform: translateY(-50%); }
.radar-range { position: absolute; right: 11px; bottom: 9px; padding-top: 4px; border-top: 1px solid #98adba; color: #91a7b4; font: 8px var(--mono); pointer-events: none; }
.radar-legend { flex: 0 0 auto; min-height: 29px; padding: 5px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: 1px solid var(--line); color: #9cafbb; background: #0b1925; font-size: 8px; }
.radar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.radar-legend i { width: 13px; height: 6px; display: inline-block; }
.legend-plane { width: 0 !important; height: 0 !important; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #dbe9f0; }
.legend-route { border-top: 1px solid #687f8e; }
.legend-projection { border-top: 1px dashed var(--cyan); }
.legend-alert { width: 7px !important; height: 7px !important; border: 1px solid var(--amber); border-radius: 50%; }
.legend-selection { border: 1px solid var(--cyan); border-radius: 50%; }
.legend-airport { width: 7px !important; height: 7px !important; border: 1px solid #f0c879; border-radius: 50%; background: #f0c879; }
.radar-lower { flex: 0 0 auto; display: grid; grid-template-columns: minmax(180px, .9fr) minmax(180px, 1.1fr); border-top: 1px solid var(--line); }
.safety-banner { min-height: 46px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--line); color: #a8bdc8; background: #10212f; font-size: 9px; line-height: 1.4; }
.safety-banner.alert { color: #f2d298; background: #292318; }
.safety-banner.safe { color: #acd7b9; background: #10241e; }
.safety-icon { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 9px var(--mono); }
.learning-tip { padding: 6px 10px; }
.learning-tip p { margin: 3px 0 0; color: #9eb2be; font-size: 9px; line-height: 1.45; }
.ops-column { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.panel-heading { min-height: 40px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #213748; }
.panel-heading h2 { margin: 2px 0 0; color: #e0eaf0; font-size: 12px; font-weight: 550; }
.panel-heading h2 span { margin-left: 4px; color: #7f98a7; font: 9px var(--mono); }
.threshold-tag { color: #718a99; font: 7px/1.45 var(--mono); text-align: right; }
.traffic-panel { flex: 1 1 auto; min-height: 175px; display: flex; flex-direction: column; overflow: hidden; }
.traffic-list { flex: 1 1 auto; min-height: 50px; overflow: auto; padding: 4px 6px; }
.traffic-row { width: 100%; min-height: 37px; padding: 5px 6px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid transparent; border-bottom-color: #1d3343; color: #d9e5ec; background: transparent; text-align: left; cursor: pointer; }
.traffic-row:hover { background: #122637; }
.traffic-row[aria-selected="true"] { border-color: #34556b; background: #132b3d; }
.traffic-row.has-alert .traffic-diamond { background: var(--amber); }
.traffic-diamond { width: 6px; height: 6px; transform: rotate(45deg); background: var(--cyan); }
.traffic-call { display: grid; gap: 1px; min-width: 0; }
.traffic-call strong { overflow: hidden; font: 600 9px var(--mono); letter-spacing: .35px; text-overflow: ellipsis; white-space: nowrap; }
.traffic-call small { color: #8198a7; font-size: 8px; }
.traffic-track { color: #98adba; font: 8px var(--mono); white-space: nowrap; }
.traffic-alert { color: var(--amber); font-size: 7px; font-weight: 700; letter-spacing: .45px; }
.selected-detail { flex: 0 0 auto; min-height: 39px; padding: 7px 9px; border-top: 1px solid var(--line); color: #97aab6; background: #0b1925; font-size: 8px; line-height: 1.45; }
.selected-detail strong { color: #d5e1e8; font: 600 9px var(--mono); }
.selected-detail p { margin: 2px 0 0; }
.performance-panel { flex: 0 0 auto; }
.small-heading { min-height: 38px; }
.metric-grid { padding: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.metric-grid div { min-width: 0; padding: 5px 5px 4px; border-left: 1px solid var(--line-strong); }
.metric-grid span, .sustainability-mini span { display: block; color: #708796; font-size: 7px; letter-spacing: .7px; }
.metric-grid strong { display: block; margin-top: 2px; color: #d4e1e8; font: 11px var(--mono); }
.sustainability-mini { padding: 7px 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; border-top: 1px solid #213748; }
.sustainability-mini strong { display: block; margin-top: 3px; color: #b8d9c2; font: 10px var(--mono); }
.estimate-disclaimer { margin: 0; padding: 0 9px 7px; color: #718593; font-size: 7px; line-height: 1.4; }
.shift-metrics { padding: 5px 8px 7px; display: flex; flex-wrap: wrap; gap: 4px 9px; border-top: 1px solid #213748; color: #90a6b3; font: 7px var(--mono); letter-spacing: .2px; }
.shift-metrics:empty { display: none; }
.results-dialog { position: fixed; z-index: 20; top: 50%; left: 50%; width: min(540px, calc(100% - 28px)); max-height: 85vh; margin: 0; padding: 17px; overflow: auto; transform: translate(-50%, -50%); border: 1px solid #405d70; border-radius: 3px; color: var(--text); background: #0d1d2a; box-shadow: 0 16px 65px #000b; }
.results-dialog::backdrop { background: #020913c9; }
.results-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.results-header h2 { margin: 3px 0 0; font-size: 17px; font-weight: 550; }
.results-summary { color: #c0ced6; font-size: 10px; line-height: 1.6; }
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.result-cell { padding: 8px; border: 1px solid #253c4e; background: #102230; }
.result-cell span { display: block; color: #8199a8; font-size: 8px; }
.result-cell strong { display: block; margin-top: 4px; color: #e0eaf0; font: 11px var(--mono); }
.results-note { margin-top: 10px; padding: 9px; border-left: 2px solid var(--green); background: #10231f; }
.results-note strong { color: #a9dbbb; font-size: 11px; }
.results-note p, .results-caveat { margin: 4px 0 0; color: #a9bac3; font-size: 9px; line-height: 1.55; }
.results-caveat { margin: 9px 0; color: #7e929e; }

@media (max-width: 900px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .topbar { min-height: 58px; flex-wrap: wrap; gap: 8px 12px; padding: 7px 10px; }
  .brand { min-width: 140px; }
  .shift-status { flex: 1 1 140px; }
  .app-grid { min-height: 850px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(390px, 55vh) minmax(390px, auto); }
  .ops-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(180px, 1fr) auto; }
  .traffic-panel { grid-row: span 2; }
}
@media (max-width: 560px) {
  body { min-height: 700px; }
  .topbar { gap: 6px; }
  .brand { flex: 1 1 130px; }
  .shift-status { order: 5; }
  .header-actions { margin-left: auto; }
  .app-grid { padding: 6px; gap: 6px; grid-template-rows: minmax(330px, 47vh) minmax(490px, auto); }
  .radar-lower { grid-template-columns: 1fr; }
  .safety-banner { min-height: 36px; border-right: 0; border-bottom: 1px solid var(--line); }
  .learning-tip { display: none; }
  .ops-column { display: flex; }
  .traffic-panel { min-height: 205px; }
  .performance-panel { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { position: relative; display: block; min-height: 600px; background: #070c11; }
.tower-room { position: fixed; z-index: 0; inset: 0; overflow: hidden; background: linear-gradient(#101b24 0 8%, #1a242a 8% 70%, #11171c 70%); }
.tower-window { position: absolute; top: 7%; right: 3.2%; left: 3.2%; height: 63%; overflow: hidden; border: 12px solid #18212a; border-bottom-width: 18px; background: #8fa9b5; box-shadow: inset 0 0 0 2px #31404a, 0 13px 34px #0009; }
#airport-view { width: 100%; height: 100%; display: block; }
.window-mullion, .window-crossbar { position: absolute; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #101820, #29343b 48%, #141c23); box-shadow: 1px 0 2px #7d899033; }
.window-mullion { top: 0; bottom: 0; width: 13px; }
.window-mullion-left { left: 22%; }
.window-mullion-center { left: 50%; }
.window-mullion-right { left: 78%; }
.window-crossbar { right: 0; bottom: 25%; left: 0; height: 10px; background: linear-gradient(#111a22, #303a40, #121a21); }
.window-caption { position: absolute; right: 12px; bottom: 8px; z-index: 2; color: #e0e8e7; font: 8px var(--mono); letter-spacing: 1px; text-shadow: 0 1px 4px #071018; }
.tower-side { position: absolute; top: 0; bottom: 0; width: 3%; background: linear-gradient(90deg, #171f26, #0a0f13); }
.tower-side-left { left: 0; }
.tower-side-right { right: 0; transform: scaleX(-1); }

.topbar { position: absolute; z-index: 5; top: 0; right: 0; left: 0; height: 60px; padding: 0 20px; border-bottom: 1px solid #ffffff1c; background: linear-gradient(90deg, #0a1119f2, #101923e8 55%, #0a1119f2); box-shadow: 0 5px 20px #0006; }
.shift-status, .time-picker select { border-radius: 1px; }
.time-picker { display: grid; gap: 2px; color: #8298a7; font-size: 8px; letter-spacing: 1px; }
.time-picker select { width: 78px; height: 29px; padding: 3px 7px; border: 1px solid var(--line-strong); color: #dce7ed; background: #102130; font-size: 10px; letter-spacing: 0; }

.tower-console { position: fixed; z-index: 2; inset: 60px 0 0; overflow: hidden; pointer-events: none; }
.monitor-bank { position: absolute; z-index: 4; right: 2.8%; bottom: 17.8vh; left: 2.8%; height: min(52vh, 500px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, 1fr); align-items: stretch; gap: clamp(8px, 1.3vw, 20px); pointer-events: none; }
.monitor { position: relative; min-width: 0; min-height: 0; padding: 9px 9px 12px; border: 1px solid #424e54; border-bottom-color: #10161b; background: linear-gradient(135deg, #303a40, #11171c 18%, #080d11 80%, #30383c); box-shadow: 0 12px 23px #000a, inset 0 1px 0 #77818955; pointer-events: auto; }
.monitor::before { position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #566169; content: ""; }
.monitor::after { position: absolute; top: 100%; left: 35%; width: 30%; height: 17vh; clip-path: polygon(34% 0, 66% 0, 82% 84%, 100% 100%, 0 100%, 18% 84%); background: linear-gradient(90deg, #182127, #465158 47%, #161e24); content: ""; }
.monitor-label { position: absolute; right: 0; bottom: calc(100% + 5px); left: 0; overflow: hidden; color: #c2cbd0; font: 8px var(--mono); letter-spacing: 1.1px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.monitor-label span { margin-right: 7px; color: #88c1cf; }
.monitor-screen { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #42515a; background: #07131d; box-shadow: inset 0 0 0 2px #02070b, 0 0 20px #4b91a01c; pointer-events: auto; }
.monitor-screen::after { position: absolute; inset: 0; border: 1px solid #b5d8e00a; background: linear-gradient(120deg, #ffffff08, transparent 26% 76%, #d7f2f608); content: ""; pointer-events: none; }

.radar-card { height: 100%; border: 0; background: #08131e; }
.radar-heading { flex-basis: 47px; min-height: 0; padding: 5px 8px; background: #0e1c29; }
.radar-wrap { min-height: 110px; }
.radar-legend { gap: 5px 9px; padding: 4px 7px; font-size: 7px; }
.radar-lower { grid-template-columns: 1fr; }
.safety-banner { min-height: 38px; padding: 5px 7px; border-right: 0; border-bottom: 1px solid var(--line); font-size: 8px; }
.learning-tip { padding: 4px 7px; }
.learning-tip p { font-size: 8px; }
.radar-compass { text-shadow: 0 1px 3px #000; }

.flight-screen { padding: 6px; }
.ops-column { height: 100%; gap: 6px; }
.radar-card, .panel { border-color: #263b4c; }
.traffic-panel { min-height: 100px; }
.performance-panel { flex: 0 0 auto; }
.panel-heading { min-height: 34px; padding: 5px 7px; }
.panel-heading h2 { font-size: 11px; }
.traffic-row { min-height: 32px; padding: 4px 5px; }
.selected-detail { min-height: 37px; padding: 5px 7px; }
.metric-grid { padding: 5px; gap: 2px; }
.metric-grid div { padding: 4px 3px; }
.metric-grid strong { font-size: 10px; }
.sustainability-mini { padding: 5px 6px; gap: 3px; }
.sustainability-mini span { font-size: 6px; }
.sustainability-mini strong { font-size: 8px; }
.estimate-disclaimer { padding: 0 6px 5px; font-size: 6px; }

.tower-desk { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 22vh; pointer-events: none; }
.desk-surface { position: absolute; top: 4%; right: -3%; left: -3%; height: 61%; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); border-top: 2px solid #46535a; background: linear-gradient(180deg, #252e33, #11171b 70%, #090d11); box-shadow: 0 -5px 20px #0008; }
.desk-front { position: absolute; right: 0; bottom: 0; left: 0; height: 43%; border-top: 1px solid #303b41; background: linear-gradient(90deg, #101519, #1b2328 25%, #151c20 70%, #0c1216); }
.desk-mouse { position: absolute; right: 18%; bottom: 12%; width: 26px; height: 39px; transform: rotate(-18deg); border: 1px solid #59656a; border-radius: 48% 48% 42% 42%; background: linear-gradient(100deg, #252d32, #080c0f); box-shadow: 0 3px 8px #000b; }
.desk-mouse::after { position: absolute; top: 5px; left: 50%; width: 1px; height: 9px; background: #78858b; content: ""; }

@media (max-width: 1050px) {
  .monitor-bank { right: 1.8%; left: 1.8%; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .9fr); gap: 8px; }
  .monitor { padding: 7px 7px 10px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { min-width: 150px; }
  .shift-status { max-width: 35vw; }
}
@media (max-width: 760px) {
  body { min-height: 100vh; height: auto; overflow: auto; }
  .tower-room { position: fixed; }
  .tower-window { top: 100px; right: 2%; left: 2%; height: 46vh; }
  .topbar { position: relative; min-height: 102px; height: auto; flex-wrap: wrap; gap: 6px 10px; padding: 7px 10px; }
  .brand { min-width: 130px; flex: 1 1 35%; }
  .brand-mark { width: 27px; height: 27px; }
  .time-picker { flex: 0 0 70px; }
  .shift-status { order: 5; flex: 1 1 50%; }
  .header-actions { order: 6; }
  .tower-console { position: relative; inset: auto; min-height: calc(100vh - 102px); overflow: visible; }
  .monitor-bank { position: relative; inset: auto; height: auto; padding: 40vh 12px 180px; display: flex; flex-direction: column; gap: 22px; }
  .monitor { min-height: 360px; padding: 8px; }
  .monitor::after { height: 9vh; }
  .monitor-screen { min-height: 340px; }
  .monitor-radar { min-height: 440px; }
  .monitor-radar .monitor-screen { min-height: 420px; }
  .monitor-operations { min-height: 430px; }
  .monitor-operations .monitor-screen { min-height: 410px; }
  .radar-card { min-height: 100%; }
  .radar-wrap { min-height: 260px; }
  .ops-column { height: auto; min-height: 100%; }
  .traffic-panel { flex: 1 1 auto; min-height: 180px; }
  .tower-desk { position: fixed; z-index: 3; height: 100px; }
  .desk-surface { top: 0; height: 52%; }
  .desk-front { height: 50%; }
  .desk-mouse { bottom: 12%; }
}
@media (max-width: 420px) {
  .shift-status { display: none; }
  .topbar { min-height: 84px; }
  .header-actions { margin-left: auto; }
  .monitor-bank { padding-top: 38vh; }
  .tower-console { min-height: calc(100vh - 84px); }
  .monitor { padding-right: 5px; padding-left: 5px; }
  .radar-legend { gap: 4px 6px; font-size: 6px; }
  .results-dialog { width: calc(100% - 16px); padding: 12px; }
}

.operations-screen { padding: 6px; display: grid; grid-template-columns: minmax(150px, .82fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 5px; }
.operations-screen > .ops-column { grid-column: 1; grid-row: 1 / 4; min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.operations-screen .traffic-panel { min-height: 0; flex: 1 1 auto; }
.operations-screen .performance-panel { min-height: 0; flex: 0 0 auto; }
.weather-strip { grid-column: 2; grid-row: 1; min-width: 0; padding: 5px 7px; display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); align-items: center; gap: 4px 9px; border: 1px solid var(--line); background: #0e1c29; }
.weather-strip div span, .weather-strip > p { display: block; margin: 0; color: #718796; font: 6px var(--mono); letter-spacing: .4px; }
.weather-strip div strong { display: block; margin-top: 2px; color: #cfdae0; font: 7px var(--mono); white-space: nowrap; }
.weather-strip > p { color: #9cafbb; text-align: right; }
.runway-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.runway-status-item { color: #93a8b4; font: 7px var(--mono); white-space: nowrap; }
.runway-status-item.open { color: #8bcba2; }
.runway-status-item.cooldown { color: #e5b35f; }
.runway-status-item.occupied { color: #e9847d; }
.radar-heading { flex-basis: 43px; }
.radar-meta { gap: 7px; }
.radar-meta label { gap: 3px; }
.radar-meta select { min-width: 50px; height: 24px; padding: 2px; border: 1px solid var(--line-strong); color: #dce7ed; background: #102130; font: 8px var(--mono); }
.radar-wrap { flex: 1 1 0; display: grid; place-items: center; min-height: 0; background: #06121b; }
#radar { width: auto; height: min(100%, 40vh); max-width: 100%; aspect-ratio: 1; border: 1px solid #314d5b; border-radius: 50%; background: #081723; }
.radar-range { right: calc(50% - min(20vh, 200px) + 8px); bottom: calc(50% - min(20vh, 200px) + 8px); }
.monitor-label { letter-spacing: .85px; }
.shift-metrics { gap: 3px 6px; }

@media (max-width: 1050px) and (min-width: 761px) {
  .weather-strip { grid-template-columns: repeat(3, auto); }
  .weather-strip > p { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 760px) {
  .monitor-bank { grid-template-columns: 1fr; }
  .operations-screen { min-height: 0; }
  .radar-wrap { min-height: 280px; }
  #radar { height: min(75vw, 340px); }
  .radar-range { right: calc(50% - min(37.5vw, 170px) + 8px); bottom: calc(50% - min(37.5vw, 170px) + 8px); }
}
@media (max-width: 560px) {
  .operations-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, auto) auto auto; overflow: visible; }
  .operations-screen > .ops-column { grid-column: 1; grid-row: 1; }
  .weather-strip { grid-column: 1; grid-row: 2; }
  .operations-screen > .flight-actions-panel { grid-column: 1; grid-row: 3; }
  .operations-screen .traffic-panel { min-height: 200px; }
  .operations-screen .performance-panel { flex: 0 0 auto; }
  .weather-strip { grid-template-columns: repeat(3, auto) minmax(0, 1fr); }
  .weather-strip > p { grid-column: auto; text-align: right; }
  .radar-meta { gap: 3px; }
  .radar-meta label { font-size: 6px; }
  .radar-meta select { font-size: 7px; }
  .radar-heading { padding-right: 3px; padding-left: 5px; }
  .radar-heading h1 { font-size: 11px; }
}
@media (max-width: 760px) {
  .monitor-bank { height: auto; }
}
.header-actions { gap: 5px; }
.header-actions .button { padding-right: 8px; padding-left: 8px; }
@media (min-width: 761px) {
  .monitor-bank { bottom: 2.5vh; height: min(48vh, 430px); }
  #radar { width: min(100%, 23vh); height: auto; max-width: 100%; aspect-ratio: 1; border-radius: 50%;   }

  :root {
    --bg: #102432;
    --panel: #f5f2e8;
    --panel-high: #fffdf5;
    --line: #bdd0d3;
    --line-strong: #7e9fa9;
    --text: #183344;
    --muted: #56717d;
    --faint: #718995;
    --cyan: #399bb2;
    --green: #398b68;
    --amber: #ca7b33;
    --red: #c8544d;
  }
  body { background: #a9c4ca; color: #183344; }
  .tower-window { border-radius: 12px; border-color: #173343; box-shadow: inset 0 0 0 2px #527381, 0 12px 28px #10202b66; }
  .monitor-bank { grid-template-columns: minmax(0, 1.35fr) minmax(390px, 1fr); }
  .monitor { padding: 9px 9px 12px; border: 2px solid #284d5d; border-radius: 13px; background: linear-gradient(145deg, #527180, #1b3948 25%, #10222e 85%, #486573); box-shadow: 0 12px 25px #10202b66, inset 0 2px 0 #a4c0c855; }
  .monitor::before { width: 5px; height: 5px; background: #d8ba71; }
  .monitor-screen { border: 2px solid #627f88; border-radius: 8px; background: #edf0e7; box-shadow: inset 0 0 0 2px #173343; }
  .monitor-label { color: #eef3e9; font-size: 9px; font-weight: 700; }
  .topbar { background: #173747ed; border-bottom-color: #668493; box-shadow: 0 5px 18px #162d3b66; }
  .brand, .shift-status strong { color: #f3f2e9; }
  .brand-mark { border-radius: 8px; border-color: #7faeb5; color: #e1f1e9; background: #315665; }
  .brand small, .shift-status span, .time-picker { color: #d0e1df; }
  .time-picker select {
    border: 1px solid #7597a2;
    border-radius: 7px;
    color: #f5f2e8;
    background: #244555;
  }
  .button { min-height: 36px; border: 1.5px solid #7a9ba4; border-radius: 9px; color: #203f50; background: #f5f2e8; font-size: 11px; font-weight: 700; }
  .button:hover:not(:disabled) { border-color: #3187a0; color: #173747; background: #e2f1ed; }
  .button-primary { border-color: #327a68; color: #fffdf5; background: #398b68; }
  .button-primary:hover:not(:disabled) { border-color: #24694f; color: #fff; background: #2e795b; }
  .panel, .radar-card { border-color: #b8cdd0; background: #f5f2e8; }
  .radar-heading { background: #e7eee8; border-bottom-color: #bfd0d0; }
  .radar-heading h1, .panel-heading h2 { color: #173747; }
  .scope-live { color: #27684f; }
  .eyebrow { color: #587885; }
  .radar-meta > span, .radar-meta label { color: #496875; }
  .radar-meta strong { color: #183c4d; }
  .radar-wrap { background: #153648; }
  .radar-legend { color: #385666; background: #e7eee8; border-top-color: #bfd0d0; }
  .safety-banner { color: #275849; background: #e4f1df; border-color: #bfd0d0; }
  .safety-banner.alert { color: #714315; background: #fff0d6; }
  .safety-banner.safe { color: #245c46; background: #e2f1dc; }
  .learning-tip p { color: #4d6874; }
  .traffic-panel, .flight-actions-panel, .sustainability-panel, .weather-strip { border: 1.5px solid #bfd0d0; border-radius: 9px; background: #f8f6ed; }
  .panel-heading { border-bottom-color: #d4dfdb; }
  .traffic-row { min-height: 39px; border-bottom-color: #dbe4dc; border-radius: 6px; color: #244556; }
  .traffic-row:hover { background: #e7f0e8; }
  .traffic-row[aria-selected="true"] { border-color: #4b9a9d; background: #dceddf; box-shadow: inset 3px 0 #4b9a9d; }
  .traffic-row.has-alert { color: #744217; background: #fff1d8; }
  .traffic-diamond { border-color: #399bb2; background: #81c5c5; }
  .selected-detail { border-top-color: #d2dfdb; color: #355766; background: #e9f0e7; }
  .selected-detail strong { color: #16394b; }
  .selected-detail p { color: #355766; }
  .traffic-call small, .traffic-track { color: #4f6874; }
  .panel-heading h2 span, .threshold-tag { color: #4f6874; }
  .weather-strip { background: #e9f0e7; }
  .weather-strip div span, .weather-strip > p { color: #4d6872; }
  .weather-strip div strong { color: #244556; }
  .sustainability-mini { padding: 8px 10px; gap: 8px; }
  .sustainability-mini span { color: #4e6b75; }
  .sustainability-mini strong { color: #25495a; font-size: 10px; }
  .shift-metrics { color: #3f606c; }
  .estimate-disclaimer { color: #506b73; }
  .flight-actions-panel { display: flex; flex-direction: column; }
  .aircraft-actions { min-height: 57px; padding: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
  .aircraft-actions .button { min-height: 40px; flex: 1 1 140px; }
  .action-note { flex: 1 1 100%; color: #496570; font-size: 10px; }
  .action-note.blocked { color: #a24d39; font-weight: 750; }
  .empty-actions { margin: 5px; color: #496570; font-size: 11px; }
  .action-feedback { min-height: 29px; margin: auto 8px 7px; padding: 6px 8px; border-radius: 6px; color: #355a65; background: #e6eee7; font-size: 10px; }
  .action-feedback.success { color: #275d45; background: #e1f1df; }
  .action-feedback.error { color: #8e4039; background: #fae6df; }
  .threshold-tag { color: #4f6874; }
  button:disabled { opacity: 1; }
  .button:disabled { border-color: #9bb0b3; color: #526b73; background: #e2e9e2; }
  .emergency-alert { border-color: #d8755a; background: #2e4654; }
  .emergency-alert .button { color: #244354; }
  .emergency-alert .button-primary { color: #fff; }
  .rules-dialog, .results-dialog { border-radius: 14px; color: #e4edf2; }
  .tutorial-card { border-radius: 14px; }

  @media (min-width: 761px) {
    .operations-screen {
      padding: 9px;
      display: grid;
      grid-template-columns: minmax(155px, .9fr) minmax(0, 1.1fr);
      grid-template-rows: auto minmax(90px, 1fr) auto;
      gap: 8px;
    }
    .operations-screen > .traffic-panel { grid-column: 1; grid-row: 1 / 4; min-height: 0; }
    .operations-screen > .flight-actions-panel { grid-column: 2; grid-row: 2; min-height: 90px; }
    .operations-screen > .weather-strip { grid-column: 2; grid-row: 1; min-height: 48px; }
    .operations-screen > .sustainability-panel { grid-column: 2; grid-row: 3; min-height: 92px; }
    .operations-screen .traffic-list { min-height: 45px; }
  }

  @media (max-width: 1050px) and (min-width: 761px) {
    .monitor-bank { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .9fr); }
    .operations-screen { grid-template-columns: minmax(135px, .88fr) minmax(0, 1.12fr); padding: 6px; gap: 5px; }
    .aircraft-actions { padding: 6px; }
    .aircraft-actions .button { font-size: 9px; }
  }

  @media (max-width: 760px) {
    .monitor-bank { gap: 18px; }
    .monitor-screen { min-height: 470px; }
    .operations-screen { min-height: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
    .operations-screen > .traffic-panel { min-height: 230px; }
    .operations-screen > .flight-actions-panel { min-height: 120px; }
    .operations-screen > .weather-strip { min-height: 52px; }
    .operations-screen > .sustainability-panel { min-height: 100px; }
  }
  .radar-range { right: calc(50% - min(11.5vh, 220px) + 8px); bottom: calc(50% - min(11.5vh, 220px) + 8px); }

  .operations-screen .estimate-disclaimer { padding: 0 7px 4px; font-size: 6px; line-height: 1.25; }
  .operations-screen .shift-metrics { padding: 3px 6px 4px; gap: 3px 6px; font-size: 6px; }
  .operations-screen .traffic-row { min-height: 29px; padding: 3px 5px; }
  .operations-screen .selected-detail { min-height: 34px; padding: 5px 7px; }
}
.emergency-alert {
  position: fixed; z-index: 40; top: 50%; left: 50%; box-sizing: border-box;
  width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 12px;
  overflow: hidden; transform: translate(-50%, -50%); border: 2px solid #e2a26b;
  color: #f2e7dc; background: #211b19f5; box-shadow: 0 0 0 100vmax #02070a70, 0 16px 60px #000e;
}
.emergency-alert[hidden], .tutorial-actions[hidden] { display: none; }
.emergency-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.emergency-alert strong { color: #f3b477; font: 700 13px var(--mono); letter-spacing: 1px; }
.emergency-alert #emergency-clock { width: auto; height: auto; min-width: 54px; padding: 3px 6px; border: 1px solid #c87e60; border-radius: 0; color: #ffe1bd; font: 700 18px var(--mono); text-align: center; }
.emergency-alert > p { margin: 6px 0 0; color: #ddd0c5; font-size: 11px; line-height: 1.4; }
.emergency-alert .emergency-instruction { margin-top: 8px; color: #c7a789; font: 700 9px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; }
.emergency-feedback { min-height: 14px; color: #ffd59d !important; font-size: 10px !important; line-height: 1.35 !important; }
.emergency-alert .emergency-footnote { margin-top: 3px; color: #a99b90; font-size: 9px; line-height: 1.3; }
.rules-dialog { position: fixed; z-index: 45; top: 50%; left: 50%; width: min(680px, calc(100% - 24px)); max-height: 82vh; margin: 0; padding: 18px; overflow: auto; transform: translate(-50%, -50%); border: 1px solid #405d70; color: var(--text); background: #0d1d2a; box-shadow: 0 16px 65px #000b; }
.rules-dialog::backdrop { background: #020913c9; }
.rules-list { margin: 12px 0 0; padding-left: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; color: #adbdc6; font-size: 10px; line-height: 1.5; }
.rules-list li { padding: 4px 0; }
.rules-list strong { color: #e0eaf0; }
.tutorial-overlay { position: fixed; z-index: 50; inset: 0; background: #0209139c; pointer-events: auto; }
.tutorial-overlay[hidden] { display: none; }
.tutorial-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tutorial-connector path { fill: none; stroke: #edb76e; stroke-width: 2; stroke-dasharray: 5 4; filter: drop-shadow(0 1px 3px #000); }
.tutorial-card { position: fixed; top: 75px; right: 20px; z-index: 52; width: min(360px, calc(100% - 24px)); padding: 15px; border: 1px solid #7d694d; color: var(--text); background: #111c25f7; box-shadow: 0 12px 35px #000b; pointer-events: auto; }
.tutorial-kicker { color: #e6b879; font: 700 9px var(--mono); letter-spacing: 1px; }
.tutorial-card h2 { margin: 6px 0; font-size: 16px; font-weight: 600; }
.tutorial-card p { margin: 0; color: #bbc8cf; font-size: 11px; line-height: 1.55; }
.tutorial-card h2 { color: #f3b477; }
.tutorial-actions { margin-top: 13px; display: flex; justify-content: flex-end; gap: 7px; }
.tutorial-highlight { position: relative; outline: 2px solid #edb76e !important; outline-offset: 3px; box-shadow: 0 0 0 5px #edb76e38 !important; }
@media (max-width: 760px) {
  .header-actions .button { padding-right: 6px; padding-left: 6px; }
  .emergency-alert { top: 50%; }
  .rules-list { grid-template-columns: 1fr; }
  .tutorial-card { top: 112px; right: 12px; }
  #radar { height: min(65vw, 280px); }
  .radar-range { right: calc(50% - min(32.5vw, 140px) + 8px); bottom: calc(50% - min(32.5vw, 140px) + 8px); }
}
@media (max-width: 420px) {
  .topbar { padding-right: 7px; padding-left: 7px; }
  .header-actions { gap: 3px; }
  .header-actions .button { min-height: 27px; padding: 3px 5px; font-size: 8px; }
  .emergency-alert { padding: 10px; }
  .emergency-alert strong { font-size: 11px; }
  .emergency-alert > p { font-size: 10px; }
}
@media (max-height: 420px) {
  .emergency-alert { padding: 8px; }
  .emergency-alert > p { margin-top: 4px; font-size: 10px; line-height: 1.3; }
  .emergency-alert .emergency-instruction { margin-top: 5px; }
}

body {
  position: relative;
  display: flex;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  color: #e4edf2;
  background: #08131e;
}

.tower-room { position: fixed; z-index: 0; inset: 0; background: #08131e; }
.tower-window { top: 62px; right: 2%; left: 2%; height: 15vh; border-color: #18212a; }
.tower-side, .window-mullion, .window-crossbar { pointer-events: none; }
.topbar {
  position: relative;
  z-index: 5;
  flex: 0 0 62px;
  height: 62px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #263b4c;
  background: #0b1925;
  box-shadow: none;
}
.brand { min-width: 142px; }
.brand-mark { border-radius: 0; border-color: #58788b; color: #c7e6f0; background: transparent; }
.shift-status { max-width: none; color: #c7d4dc; }
.shift-status strong { color: #c7d4dc; }
.score-counter { color: #e5b35f; }
.time-picker { flex: 0 0 auto; display: grid; gap: 2px; color: #8298a7; }
.time-picker select {
  height: 28px;
  padding: 3px 6px;
  border: 1px solid #355266;
  border-radius: 2px;
  color: #dce7ed;
  background: #102130;
  font: 10px var(--mono);
}
.button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #355266;
  border-radius: 2px;
  color: #cddae2;
  background: #102130;
  font-size: 10px;
  font-weight: 500;
}
.button:hover:not(:disabled) { border-color: #6a8b9e; color: #e4edf2; background: #172e40; }
.button-primary { border-color: #367b93; color: #e8f7fb; background: #164256; }
.button-primary:hover:not(:disabled) { border-color: #73bfd6; background: #1a526b; }

.tower-console {
  position: relative;
  z-index: 2;
  inset: auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-top: 15vh;
  padding: 10px;
  overflow: hidden;
  pointer-events: auto;
}
.monitor-bank {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  gap: 10px;
  pointer-events: auto;
}
.map-monitor, .flight-monitor {
  min-width: 0;
  min-height: 0;
  border: 1px solid #314858;
  background: rgba(10, 24, 34, .97);
  box-shadow: 0 8px 25px #0006;
}
.map-monitor { display: flex; flex-direction: column; overflow: hidden; }
.map-header {
  flex: 0 0 auto;
  min-height: 75px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #263b4c;
  background: #0e1c29;
}
.map-title { min-width: 140px; }
.map-title h1 { margin: 0; color: #e7eff3; font-size: 15px; font-weight: 550; }
.map-subtitle { display: block; margin-top: 4px; color: #91a5b3; font: 9px var(--mono); letter-spacing: .7px; }
.scope-live { color: #83cba0; }
.scope-live i { background: #75c49a; }
.map-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.map-readout { display: grid; gap: 2px; color: #91a5b3; font: 8px var(--mono); letter-spacing: .8px; }
.map-readout strong { color: #d7e6ec; font: 12px var(--mono); }
.map-weather { max-width: 190px; display: grid; gap: 2px; }
.map-weather > span { color: #91a5b3; font: 8px var(--mono); letter-spacing: .8px; }
.map-weather strong { color: #d7e6ec; font: 10px var(--mono); }
.map-weather small { overflow: hidden; color: #91a5b3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.runway-status { display: grid; gap: 3px; color: #b9c9d1; font: 8px var(--mono); white-space: nowrap; }
.runway-status-item.open { color: #75c49a; }
.runway-status-item.cooldown { color: #e5b35f; }
.runway-status-item.occupied { color: #e9847d; }
.map-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #1c3039; }
.safety-banner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  max-width: min(430px, calc(100% - 24px));
  min-height: 38px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b64f4d;
  border-radius: 2px;
  color: #f0d6d0;
  background: #492a2a;
  box-shadow: 0 2px 8px #0008;
  font-size: 10px;
  text-align: left;
}
.safety-banner[hidden] { display: none; }
.safety-banner.alert { color: #f0d6d0; background: #492a2a; }
.safety-banner:disabled { opacity: .86; }
.safety-icon { border-radius: 0; }
.warning-action { margin-left: 5px; color: #ffaaa0; font: 700 8px var(--mono); white-space: nowrap; }
.map-credit { position: absolute; right: 9px; bottom: 6px; margin: 0; color: #9badb2; font-size: 8px; text-shadow: 0 1px 3px #08131e; pointer-events: none; }

.flight-monitor { display: flex; flex-direction: column; overflow: hidden; }
.traffic-panel, .flight-actions-panel, .sustainability-panel {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.traffic-panel { flex: 0 0 auto; min-height: 0; }
.panel-heading { min-height: 42px; padding: 8px 10px; border-bottom: 1px solid #263b4c; }
.panel-heading h2 { color: #e0eaf0; font-size: 12px; }
.panel-heading h2 span { color: #91a5b3; }
.traffic-list { min-height: 0; max-height: 220px; padding: 5px 7px; overflow: auto; }
.traffic-row {
  min-height: 42px;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  padding: 6px 7px;
  border-bottom-color: #203443;
  border-radius: 0;
  color: #d9e5ec;
}
.traffic-row:hover { background: #122637; }
.traffic-row[aria-selected="true"] { border-color: #34556b; border-left-color: #79c9e4; background: #132b3d; box-shadow: inset 2px 0 #79c9e4; }
.traffic-row.has-alert { color: #f0d6d0; background: #352526; }
.traffic-call small, .traffic-track { color: #91a5b3; font-size: 8px; }
.traffic-alert { color: #e9847d; font: 700 8px var(--mono); }
.selected-detail { min-height: 0; padding: 9px 10px 4px; border-top: 1px solid #263b4c; color: #d9e5ec; background: transparent; }
.selected-detail strong { color: #e4edf2; font: 700 10px var(--mono); }
.selected-detail p { margin: 4px 0 0; color: #91a5b3; font-size: 9px; line-height: 1.45; }
.aircraft-actions { min-height: 0; padding: 7px 10px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aircraft-actions .button { min-height: 34px; flex: 1 1 auto; }
.action-note { flex: 1 1 100%; color: #91a5b3; font-size: 9px; }
.action-note.blocked { color: #e9847d; }
.empty-actions { margin: 8px 0; color: #91a5b3; font-size: 10px; }
.action-feedback { min-height: 0; margin: 0 9px 8px; padding: 5px 7px; border-radius: 0; color: #aebfc8; background: #122331; font-size: 9px; }
.action-feedback.success { color: #acd7b9; background: #10241e; }
.action-feedback.error { color: #f0b2a9; background: #352526; }
.sustainability-panel { flex: 0 0 auto; margin-top: 10px; border-top: 1px solid #263b4c; }
.sustainability-heading { padding: 8px 10px 5px; }
.sustainability-heading h2 { color: #e0eaf0; }
.sustainability-heading > span { color: #91a5b3; }
.sustainability-mini { padding: 5px 10px 7px; gap: 8px; }
.sustainability-mini > div { padding: 0; }
.sustainability-mini span { color: #91a5b3; font-size: 8px; }
.sustainability-mini strong { color: #d7e6ec; font-size: 11px; }
.estimate-disclaimer { padding: 0 10px 8px; color: #8399a5; font-size: 8px; }
.tower-desk { display: none; }

.emergency-alert {
  width: min(500px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow: hidden;
  border: 2px solid #c95f56;
  border-radius: 2px;
  background: #211b19;
}
.emergency-alert strong { color: #ffaaa0; }
.emergency-alert #emergency-clock { border-color: #c95f56; color: #ffe1bd; }

@media (max-width: 900px) {
  .topbar { gap: 8px; padding: 0 9px; }
  .brand { min-width: 120px; }
  .brand > span:last-child { letter-spacing: 1px; }
  .header-actions { gap: 4px; }
  .header-actions .button { padding: 5px 7px; }
  .monitor-bank { grid-template-columns: minmax(0, 1fr) 270px; }
  .map-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .map-controls { width: 100%; justify-content: space-between; gap: 8px; }
}
@media (max-width: 700px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .topbar { min-height: 100px; height: auto; flex-wrap: wrap; gap: 7px 9px; padding: 7px 9px; }
  .brand { flex: 1 1 35%; }
  .shift-status { display: none; }
  .score-counter { min-width: 45px; }
  .header-actions { flex: 1 1 100%; justify-content: flex-end; }
  .tower-console { flex: 1 0 auto; min-height: 0; overflow: visible; padding: 8px; }
  .tower-console { margin-top: 0; }
  .monitor-bank { height: auto; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .map-monitor { min-height: 510px; }
  .map-canvas-wrap { min-height: 380px; }
  .flight-monitor { min-height: 390px; }
  .traffic-panel { min-height: 170px; }
  .traffic-panel { flex: 1 1 auto; }
  .tower-window { top: 105px; height: 42vh; }
  .rules-list { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .topbar { min-height: 112px; }
  .brand { min-width: 110px; }
  .time-picker { flex-basis: 68px; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .button { flex: 1 1 auto; }
  .map-monitor { min-height: 465px; }
  .map-canvas-wrap { min-height: 330px; }
  .map-controls { flex-wrap: wrap; }
  .map-weather { flex: 1 1 100%; }
  .runway-status { grid-template-columns: repeat(3, auto); }
  .map-credit { font-size: 7px; }
}

/* Compact paired monitors keep the airport scene visible behind the console. */
@media (min-width: 701px) {
  .tower-window {
    top: 68px;
    right: 3%;
    left: 3%;
    height: 79vh;
  }

  .window-mullion, .window-crossbar { display: none; }

  .tower-console {
    position: fixed;
    z-index: 4;
    inset: 62px 0 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .monitor-bank {
    position: absolute;
    right: 4%;
    bottom: 6vh;
    left: 4%;
    height: min(40vh, 370px);
    min-height: 290px;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .78fr);
    gap: 12px;
    pointer-events: auto;
  }

  .map-monitor, .flight-monitor {
    border: 2px solid #263f50;
    background: rgba(9, 22, 32, .97);
    box-shadow: 0 8px 22px #0008, inset 0 0 0 1px #0b1720;
  }

  .map-header {
    min-height: 55px;
    padding: 6px 9px;
    gap: 9px;
  }

  .map-title { min-width: 116px; }
  .map-title h1 { font-size: 13px; }
  .map-subtitle { margin-top: 2px; font-size: 8px; }
  .map-controls { gap: 8px; }
  .map-readout { font-size: 7px; }
  .map-readout strong { font-size: 10px; }
  .map-weather { max-width: 130px; }
  .map-weather small { max-width: 130px; font-size: 8px; }
  .runway-status { gap: 2px; font-size: 7px; }
  .map-credit { font-size: 7px; }

  .panel-heading { min-height: 31px; padding: 5px 8px; }
  .panel-heading h2 { font-size: 10px; }
  .traffic-list { max-height: 112px; padding: 3px 5px; overflow: hidden; }
  .traffic-row { min-height: 26px; padding: 2px 5px; gap: 5px; }
  .traffic-call strong { font-size: 9px; }
  .traffic-call small, .traffic-track { font-size: 7px; }
  .selected-detail { padding: 5px 8px 2px; }
  .selected-detail strong { font-size: 9px; }
  .selected-detail p { margin-top: 2px; font-size: 8px; line-height: 1.25; }
  .aircraft-actions { padding: 4px 8px 5px; gap: 4px; }
  .aircraft-actions .button { min-height: 28px; padding: 4px 7px; font-size: 9px; }
  .action-note, .empty-actions { font-size: 8px; }
  .action-feedback { margin: 0 7px 4px; padding: 3px 5px; font-size: 8px; }
  .sustainability-panel { margin-top: 4px; }
  .sustainability-heading { padding: 5px 8px 3px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
  .sustainability-heading h2 { margin: 0; font-size: 9px; }
  .sustainability-heading > span { font-size: 7px; white-space: nowrap; }
  .sustainability-mini { padding: 3px 8px 4px; gap: 6px; }
  .sustainability-mini span { font-size: 7px; }
  .sustainability-mini strong { font-size: 9px; }
  .estimate-disclaimer { padding: 0 8px 4px; font-size: 7px; }
}

.emergency-alert {
  width: min(460px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  top: 74px;
  right: 18px;
  left: auto;
  padding: 12px;
  overflow: visible;
  transform: none;
  box-shadow: 0 14px 40px #000b;
}

.emergency-mistakes {
  margin-top: 7px;
  padding: 5px 7px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #5b3933;
  color: #c5aaa0;
  font: 700 9px var(--mono);
  letter-spacing: .6px;
}

.emergency-command-form { margin-top: 8px; }
.emergency-command-form > label { color: #c9afa2; font: 700 9px var(--mono); letter-spacing: .8px; }
.emergency-command-row { display: flex; gap: 6px; margin-top: 4px; }
.emergency-command-row input {
  min-width: 0;
  min-height: 34px;
  flex: 1 1 auto;
  padding: 6px 8px;
  border: 1px solid #765146;
  border-radius: 2px;
  color: #f2e4da;
  background: #151414;
  font: 12px var(--mono);
  text-transform: uppercase;
}
.emergency-command-row input:focus-visible { outline: 2px solid #e1a274; outline-offset: 1px; }
.emergency-command-row .button { min-height: 34px; }
.emergency-command-help { margin: 5px 0 0; color: #b9a49a; font: 8px/1.4 var(--mono); }
.emergency-feedback { min-height: 0; margin: 5px 0 0; color: #ffd19f; font-size: 10px; line-height: 1.35; }
.emergency-alert .emergency-footnote { margin-top: 5px; }
.emergency-command-row input:disabled,
.emergency-command-row .button:disabled { opacity: .55; }

.failure-cutscene[hidden] { display: none; }
.failure-cutscene {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #e8e1d8;
  background: #111719;
  animation: cutscene-in .22s ease-out both;
}
.failure-cutscene-frame { width: min(540px, 100%); text-align: center; }
.failure-cutscene-frame > p { margin: 0 0 20px; color: #ef9387; font: 700 13px var(--mono); letter-spacing: 3px; }
.failure-cutscene-frame > strong { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; }
.failure-runway { position: relative; height: 128px; overflow: hidden; border-block: 1px solid #34434a; background: linear-gradient(#242d31 0 58%, #171d20 58%); }
.failure-runway::before { position: absolute; top: 64%; left: 50%; width: 70%; height: 180%; content: ""; transform: translateX(-50%) perspective(90px) rotateX(22deg); background: repeating-linear-gradient(to bottom, transparent 0 15px, #c9c7b0 15px 19px, transparent 19px 34px); opacity: .5; }
.failure-aircraft { position: absolute; z-index: 1; top: 48%; left: 50%; width: 42px; height: 18px; transform: translate(-50%, -50%); background: #d9e3e4; clip-path: polygon(0 46%, 40% 42%, 45% 0, 58% 0, 62% 42%, 100% 46%, 100% 56%, 62% 61%, 58% 100%, 46% 100%, 40% 61%, 0 56%); animation: cutscene-aircraft 1.8s ease-in-out infinite alternate; }
@keyframes cutscene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cutscene-aircraft { from { transform: translate(-50%, -50%) translateY(8px); } to { transform: translate(-50%, -50%) translateY(-8px); } }

@media (max-width: 900px) and (min-width: 701px) {
  .monitor-bank { right: 2%; left: 2%; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px; }
  .map-header { align-items: center; flex-direction: row; }
  .map-controls { width: auto; justify-content: flex-end; }
  .map-weather { display: none; }
}

@media (min-width: 701px) and (max-height: 820px) {
  .monitor-bank { height: min(43vh, 360px); min-height: 324px; }
}

@media (max-width: 700px) {
  .tower-window { top: 108px; right: 2%; left: 2%; height: 44vh; }
  .window-mullion, .window-crossbar { display: none; }
  .tower-console { position: relative; z-index: 4; inset: auto; min-height: 0; margin: 0; padding: 8px; overflow: visible; }
  .monitor-bank { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .map-monitor { min-height: 410px; }
  .map-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .map-controls { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
  .map-canvas-wrap { min-height: 305px; }
  .flight-monitor { min-height: 330px; }
  .traffic-list { max-height: 150px; overflow: auto; }
  .tower-desk { display: none; }
  .failure-runway { height: 100px; }
  .emergency-alert { top: 120px; right: 10px; max-height: calc(100dvh - 130px); }
}

@media (max-width: 440px) {
  .map-monitor { min-height: 385px; }
  .map-canvas-wrap { min-height: 275px; }
  .map-weather { display: none; }
  .map-credit { font-size: 6px; }
  .emergency-alert { padding: 9px; }
  .emergency-command-help { font-size: 7px; }
}

@media (max-height: 420px) {
  .emergency-alert { top: 68px; right: 10px; max-height: calc(100dvh - 76px); padding: 8px; }
  .emergency-alert > p { margin-top: 3px; line-height: 1.2; }
  .emergency-mistakes { margin-top: 4px; padding: 3px 5px; }
  .emergency-command-form { margin-top: 4px; }
  .emergency-command-row input, .emergency-command-row .button { min-height: 30px; }
  .emergency-command-help, .emergency-alert .emergency-footnote { margin-top: 3px; }
}

.map-canvas-wrap { background: #d9dedb; }
#city-map { width: 100%; height: 100%; min-height: 0; background: #d9dedb; }
#city-map:focus-visible { outline: 2px solid #f0c879; outline-offset: -3px; }
.leaflet-container { color: #20313a; font: 11px/1.4 var(--sans); }
.leaflet-tile { filter: grayscale(.55) saturate(.62) contrast(.95) brightness(.94); }
.leaflet-control-zoom a {
  border-color: #627782 !important;
  color: #dce7ed !important;
  background: #102130 !important;
}
.leaflet-control-attribution {
  padding: 1px 5px !important;
  color: #40555f !important;
  background: #e4e9e5d9 !important;
  font-size: 8px !important;
}
.leaflet-control-attribution a { color: #345e6d !important; }
.airport-map-marker, .aircraft-map-icon { border: 0; background: transparent; }
.airport-map-marker span {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #876f3d;
  color: #fff2cd;
  background: #152735;
  font: 700 9px var(--mono);
  letter-spacing: .5px;
}
.aircraft-map-tag { display: flex; width: max-content; align-items: center; gap: 4px; }
.aircraft-map-tag i {
  width: 17px;
  height: 20px;
  flex: 0 0 17px;
  transform: rotate(var(--heading));
  clip-path: polygon(50% 0, 64% 33%, 100% 59%, 100% 70%, 62% 61%, 61% 94%, 50% 100%, 39% 94%, 38% 61%, 0 70%, 0 59%, 36% 33%);
  background: #14536a;
  filter: drop-shadow(0 1px 1px #0009);
}
.aircraft-map-tag b {
  transform: translateY(var(--label-offset, 0px));
  padding: 1px 3px;
  border: 1px solid #7b929b;
  color: #162a35;
  background: #e8eeeeed;
  font: 700 9px var(--mono);
  line-height: 1.35;
  white-space: nowrap;
}
.aircraft-map-tag.selected i { background: #0d7297; }
.aircraft-map-tag.selected b { border-color: #0a6b8b; color: #062537; background: #d6f2fa; }
.aircraft-map-tag.conflict i { background: #bd3732; }
.aircraft-map-tag.conflict b { border-color: #a43c37; color: #fff4f2; background: #a43c37; }
.map-load-status {
  position: absolute;
  z-index: 700;
  top: 9px;
  left: 50px;
  max-width: min(430px, calc(100% - 64px));
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #9b6a43;
  color: #f5e3d0;
  background: #382a20ed;
  font-size: 10px;
}
.map-load-status[hidden] { display: none; }
.emergency-choices {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.emergency-choices[hidden] { display: none; }
.emergency-choice {
  min-width: 0;
  min-height: 32px;
  padding: 5px 6px;
  border: 1px solid #865047;
  color: #f2ded3;
  background: #332523;
  font: 700 8px/1.25 var(--mono);
  text-align: left;
}
.emergency-choice:hover:not(:disabled) { border-color: #e08a75; background: #492d2a; }
.emergency-choice:disabled { cursor: not-allowed; opacity: .5; }

@media (min-width: 701px) {
  .tower-window { top: 62px; height: 78vh; }
  .tower-console { position: fixed; inset: 62px 0 0; margin: 0; padding: 0; overflow: visible; }
  .monitor-bank {
    position: absolute;
    top: 15vh;
    right: 3%;
    bottom: 3vh;
    left: 3%;
    width: auto;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 315px);
    gap: 10px;
  }
  .map-monitor, .flight-monitor { border-color: #405866; background: #0a1822f5; }
  .map-header { min-height: 56px; padding: 6px 10px; }
  .map-title { min-width: 135px; }
  .map-title h1 { font-size: 13px; }
  .map-subtitle { font-size: 8px; }
  .map-controls { gap: 9px; }
  .map-weather { max-width: 150px; }
  .map-weather small { max-width: 150px; font-size: 8px; }
  .runway-status { grid-auto-flow: column; gap: 7px; font-size: 7px; }
  .map-credit { left: 9px; right: auto; bottom: 6px; color: #40535b; text-shadow: none; }
  .traffic-list { max-height: 230px; overflow: auto; }
  .traffic-row { min-height: 34px; padding: 4px 6px; }
  .selected-detail { padding: 7px 9px 3px; }
  .selected-detail p { font-size: 8px; }
  .sustainability-panel { margin-top: 5px; }
  .emergency-alert {
    top: 82px;
    right: auto;
    left: 18px;
    width: min(420px, calc(100vw - 36px));
    max-height: min(430px, calc(100dvh - 96px));
    padding: 11px;
    overflow: hidden;
  }
  .emergency-choices { margin-top: 6px; gap: 4px; }
  .emergency-choice { min-height: 29px; padding: 4px 5px; font-size: 7px; }
  .emergency-command-form { margin-top: 6px; }
  .emergency-command-help { margin-top: 3px; font-size: 7px; }
  .emergency-alert .emergency-footnote { margin-top: 3px; }
}

@media (max-width: 900px) and (min-width: 701px) {
  .monitor-bank { grid-template-columns: minmax(0, 1fr) 260px; }
  .map-header { align-items: center; flex-direction: row; }
  .map-controls { width: auto; justify-content: flex-end; }
  .map-weather { display: none; }
}

@media (max-width: 700px) {
  .tower-console { position: relative; inset: auto; margin: 0; padding: 38vh 8px 18px; overflow: visible; }
  .tower-window { top: 105px; height: 37vh; }
  .monitor-bank { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .map-monitor { min-height: 450px; }
  .map-header { align-items: flex-start; flex-direction: column; gap: 7px; }
  .map-controls { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 7px; }
  .map-canvas-wrap { min-height: 340px; }
  .flight-monitor { min-height: 380px; }
  .traffic-list { max-height: 200px; }
  .tower-desk { display: none; }
  .emergency-alert { top: 112px; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 124px); }
}

@media (max-width: 440px) {
  .tower-console { padding-top: 35vh; }
  .tower-window { height: 34vh; }
  .map-monitor { min-height: 410px; }
  .map-canvas-wrap { min-height: 300px; }
  .map-weather { display: none; }
  .runway-status { grid-template-columns: repeat(3, auto); }
}

.emergency-alert { box-sizing: border-box; overflow: hidden; }

/* Compact monitor layout: runway window on top, two framed CRT-style screens below */
body .tower-window { top: 62px; right: 3%; left: 3%; height: 34vh; }
body .tower-console { position: fixed; inset: calc(62px + 34vh + 22px) 0 0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; }
body .tower-console .monitor-bank { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; width: min(980px, 94vw); height: calc(100% - 34px); min-height: 250px; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 22px; }
.map-monitor, .flight-monitor { position: relative; border: 7px solid #2b363c; border-bottom-width: 11px; border-radius: 12px; background: #07131d; box-shadow: 0 0 0 1px #0a0f13, 0 10px 22px #000a, inset 0 0 0 2px #02070b, inset 0 0 26px #000c; }
.map-monitor::after, .flight-monitor::after { position: absolute; inset: 0; z-index: 20; border-radius: 5px; background: linear-gradient(120deg, #ffffff0c, transparent 28% 72%, #ffffff08), repeating-linear-gradient(0deg, #0000 0 2px, #0000000d 2px 3px); content: ""; pointer-events: none; }
.map-header { min-height: 0; padding: 6px 10px; }
.map-title h1 { font-size: 13px; }
.map-weather small { display: none; }
.flight-monitor { overflow: auto; }
.traffic-list { max-height: 150px; }
.sustainability-panel { display: none; }
.tower-desk { display: block; height: 26px; }
.tower-desk .desk-surface, .tower-desk .desk-front { background: #11181d; }
@media (max-width: 760px) {
  .tower-console { overflow: auto; }
  .monitor-bank { grid-template-columns: 1fr; height: auto; }
  .map-canvas-wrap { min-height: 260px; }
}

/* Storm outside the window */
@keyframes rain { to { background-position: 0 0, -30px 120px; } }
@keyframes twist { to { transform: translateX(10px) skewX(-8deg); } }

/* Radar-style left monitor */
.map-canvas-wrap { background: radial-gradient(circle, #06210f, #020b06); }
#city-map { background: transparent; }
.leaflet-tile-pane { opacity: .12; filter: hue-rotate(80deg) brightness(.6); }
.map-canvas-wrap::before { position: absolute; inset: 0; z-index: 5; background: repeating-radial-gradient(circle at 50% 50%, #0000 0 11%, #3cff7a33 11% 11.4%), linear-gradient(#3cff7a14 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, #3cff7a14 1px, transparent 1px) 0 0 / 40px 40px; content: ""; pointer-events: none; }
.map-canvas-wrap::after { position: absolute; top: 50%; left: 50%; z-index: 5; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: conic-gradient(from 0deg, #3cff7a00 0 80%, #3cff7a55 100%); animation: sweep 4s linear infinite; content: ""; pointer-events: none; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* Retro text-based right monitor */
.flight-monitor { background: #020b06; color: #5dff8f; font-family: var(--mono); }
.flight-monitor * { color: #5dff8f !important; background-color: transparent; font-family: var(--mono); text-shadow: 0 0 4px #3cff7a66; }
.flight-monitor .traffic-row[aria-selected="true"] { background: #0d2a16; }
.flight-monitor .button { border-color: #2f8f4f; background: #0a2314; }

.runway-panel { flex: 0 0 auto; margin-top: auto; border-top: 1px solid #2f8f4f; }
.runway-buttons { padding: 8px 10px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.runway-button { padding: 7px 4px; display: grid; gap: 3px; border: 1px solid #2f8f4f; background: #0a2314; font: 10px var(--mono); cursor: pointer; }
.runway-button span { font-size: 9px; }
.runway-button.selected { background: #1d5a31; box-shadow: 0 0 8px #3cff7a88; }
.runway-button:disabled { opacity: .55; cursor: not-allowed; }
.runway-button.cooldown, .runway-button.cooldown * { color: #ffd166 !important; }
.runway-button.occupied, .runway-button.occupied * { color: #ff7a70 !important; }
.leaflet-control-attribution, .map-credit, .airport-map-marker + .x { display: none !important; }
.aircraft-map-tag i { background: #5dff8f; }
.aircraft-map-tag.selected i { background: #d6ffe2; }
.aircraft-map-tag.conflict i { background: #ff5148; }

.emergency-input-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.emergency-input-wrap input { position: relative; width: 100%; background: transparent; }
.emergency-ghost { position: absolute; inset: 0; padding: 7px 9px; overflow: hidden; border: 1px solid transparent; color: #f2e4da; opacity: .4; font: 12px var(--mono); line-height: 1.4; white-space: pre; pointer-events: none; text-transform: uppercase; }
.emergency-command-row input { color: #ffd19f; }

/* Shop, worker arm and luxury themes */
body .tower-console .shop-sign { position: absolute; left: -44px; top: 18%; z-index: 30; width: 34px; height: 110px; padding: 0; border: 3px solid #2b363c; border-radius: 6px; background: #07130d; color: #6dff9a; font: 700 15px var(--mono); letter-spacing: 3px; writing-mode: vertical-rl; transform: rotate(180deg); text-shadow: 0 0 8px #3dff7a; box-shadow: 0 0 10px #3dff7a55, inset 0 0 12px #000; cursor: pointer; }
body .tower-console .shop-sign:hover { background: #0d2616; }
.shop-dialog { width: min(440px, 92vw); padding: 14px; border: 6px solid #2b363c; border-radius: 12px; background: #04100a; color: #6dff9a; font-family: var(--mono); box-shadow: 0 0 30px #000, inset 0 0 26px #000; }
.shop-dialog::backdrop { background: #000a; }
.shop-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; letter-spacing: 2px; }
.shop-head b { color: #ffe27a; }
.shop-note { margin: 6px 0 10px; font-size: 11px; opacity: .75; }
.shop-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px; margin-bottom: 8px; border: 1px solid #3dff7a66; background: #07180f; }
.shop-item strong { display: block; font-size: 14px; }
.shop-item small { display: block; margin: 3px 0; font-size: 11px; opacity: .8; }
.shop-item em { font-size: 11px; font-style: normal; color: #ffe27a; }
.shop-dialog button { padding: 7px 10px; border: 1px solid #3dff7a; background: #0a2415; color: #6dff9a; font: 700 12px var(--mono); cursor: pointer; white-space: nowrap; }
.shop-dialog button:disabled { opacity: .4; cursor: not-allowed; }
.shop-close { width: 100%; }

.worker-arm { position: fixed; z-index: 100; left: 50%; top: 110vh; width: 0; height: 0; transition: left .8s ease, top .8s ease; pointer-events: none; }
.worker-arm[hidden] { display: none; }
.worker-hand { position: absolute; left: -22px; top: -8px; font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 3px #000a); }
.worker-sleeve { position: absolute; left: -17px; top: 30px; width: 34px; height: 150vh; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #1b2d44, #2e4a6b 50%, #1b2d44); box-shadow: 0 0 6px #000a; }

body.lux-1 .tower-console, body.lux-1 .shop-dialog { filter: hue-rotate(62deg) saturate(1.3) brightness(1.2); }
body.lux-2 .tower-console, body.lux-2 .shop-dialog { filter: hue-rotate(-70deg) saturate(1.8) brightness(1.15); }
body.lux-3 .tower-console, body.lux-3 .shop-dialog { animation: lux-rainbow 6s linear infinite; }
body.lux-1 .map-monitor, body.lux-1 .flight-monitor { box-shadow: 0 0 18px #7fffff88, inset 0 0 26px #000c; }
body.lux-2 .map-monitor, body.lux-2 .flight-monitor { box-shadow: 0 0 18px #ffcc4488, inset 0 0 26px #000c; }
@keyframes lux-rainbow { from { filter: hue-rotate(0deg) saturate(1.6) brightness(1.15); } to { filter: hue-rotate(360deg) saturate(1.6) brightness(1.15); } }

/* Clearer emergency ghost text */
.emergency-ghost { opacity: 1; color: #9a8579; font-weight: 700; letter-spacing: .5px; }
body .emergency-command-row input { color: #ffffff; font-weight: 700; letter-spacing: .5px; text-shadow: 0 0 4px #000; }

/* Small radar explosion */
.radar-explosion i, .radar-explosion b { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.radar-explosion i { width: 8px; height: 8px; background: #fff3b0; box-shadow: 0 0 14px 6px #ff9a2e, 0 0 26px 12px #ff4a1a88; animation: radar-boom 1.2s ease-out forwards; }
.radar-explosion b { width: 10px; height: 10px; border: 2px solid #ff7b2e; animation: radar-ring 1.2s ease-out forwards; }
@keyframes radar-boom { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(2.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }
@keyframes radar-ring { 0% { transform: translate(-50%, -50%) scale(.5); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; } }

/* Radar: fixed view, no zoom buttons, conflict rings */
.leaflet-control-zoom { display: none !important; }
path.conflict-ring { animation: conflict-pulse .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
path.conflict-link { stroke-dasharray: 4 4; }
@keyframes conflict-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
.leaflet-marker-icon.aircraft-map-icon { transition: none !important; }

/* Weather outside the window follows the current conditions */
body .tower-window::before, body .tower-window::after { position: absolute; z-index: 3; content: ""; pointer-events: none; opacity: 0; transition: opacity .6s; }
body .tower-window::before { inset: 0; background: repeating-linear-gradient(100deg, #0000 0 6px, #cfe0eb44 6px 7px, #0000 7px 14px); background-size: 120px 120px; animation: rain .35s linear infinite; }
body .tower-window.wx-rain::before { opacity: .8; box-shadow: inset 0 0 0 999px #3a4a5740; }
body .tower-window.wx-storm::before { opacity: 1; box-shadow: inset 0 0 0 999px #060a10b8; }
body .tower-window::after { top: 4%; left: 66%; width: 70px; height: 40%; background: linear-gradient(#2a323b, #4a5560 60%, #1a2026); clip-path: polygon(0 0, 100% 0, 62% 30%, 70% 55%, 54% 80%, 50% 100%, 44% 80%, 32% 55%, 40% 30%); filter: blur(1.5px); animation: twist 1.4s ease-in-out infinite alternate; }
body .tower-window.wx-storm::after { opacity: .9; }

/* Ready / in-the-air markers */
.flight-monitor .traffic-row.row-ready { border-left: 4px solid #ffd45a; }
.flight-monitor .traffic-row.row-air { border-left: 4px solid #4ac8ff; }
.flight-monitor .traffic-track { padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px; font-weight: 700; }
.flight-monitor .traffic-track.is-ready { color: #ffd45a !important; text-shadow: 0 0 4px #ffd45a66; }
.flight-monitor .traffic-track.is-air { color: #4ac8ff !important; text-shadow: 0 0 4px #4ac8ff66; }

/* Monitors on stands, keyboard and mouse on the desk */
body .tower-console .monitor-bank { height: calc(100% - 215px); }
body .tower-console .monitor-bank .map-monitor, body .tower-console .monitor-bank .flight-monitor { border: 10px solid #2b363c; border-bottom-width: 18px; border-radius: 14px; box-shadow: 0 0 0 2px #0a0f13, inset 0 0 0 3px #02070b, inset 0 0 26px #000c, 0 10px 22px #000a; }
.monitor-stand { position: absolute; top: 100%; z-index: 2; width: 0; pointer-events: none; }
.monitor-stand-left { left: calc((100% - 22px) * 0.3); }
.monitor-stand-right { left: calc((100% - 22px) * 0.8 + 22px); }
.monitor-stand .neck { position: absolute; top: 0; left: -22px; width: 44px; height: 30px; background: linear-gradient(90deg, #11181d, #4a565d 50%, #11181d); }
.monitor-stand .foot { position: absolute; top: 28px; left: -75px; width: 150px; height: 12px; border-radius: 50%; background: linear-gradient(#566269, #1b2328); box-shadow: 0 4px 8px #000a; }
body .tower-console .tower-desk { z-index: 1; height: 170px; }
body .tower-desk .desk-surface { top: 0; height: 100%; }
body .tower-desk .desk-front { height: 28%; }
.desk-keyboard { position: absolute; left: calc(50% - 190px); bottom: 62px; width: 330px; height: 44px; border: 1px solid #59656a; border-radius: 6px; background: repeating-linear-gradient(90deg, #0000 0 17px, #0a0e11 17px 19px), repeating-linear-gradient(0deg, #2c363c 0 9px, #0a0e11 9px 11px); box-shadow: 0 4px 10px #000b; }
body .tower-desk .desk-mouse { right: auto; left: calc(50% + 180px); bottom: 66px; }

/* Window frame */
body .tower-window { border: 18px solid #202a31; border-bottom-width: 30px; border-radius: 6px; box-shadow: inset 0 0 0 3px #090d11, inset 0 0 0 5px #55636c, 0 0 0 4px #090d11, 0 0 0 9px #364249, 0 14px 30px #000a; }
body .tower-window .window-mullion, body .tower-window .window-crossbar { display: block; z-index: 4; }
body .tower-window .window-mullion { width: 12px; }
body .tower-window .window-crossbar { bottom: 62%; height: 10px; }

/* Fit runway buttons on the right monitor */
body .tower-console .monitor-bank { height: calc(100% - 170px); }
body .tower-console .tower-desk { height: 130px; }
body .tower-desk .desk-keyboard { bottom: 34px; }
body .tower-desk .desk-mouse { bottom: 38px; }
body .flight-monitor .sustainability-panel { display: none; }
body .flight-monitor .traffic-list { max-height: 30vh; }
body .flight-monitor .traffic-list { max-height: 148px; flex: 0 0 auto; overflow-y: auto; }
body .flight-monitor .traffic-panel { flex: 0 0 auto; }
body .flight-monitor .traffic-list { max-height: 100px; }
body .flight-monitor .traffic-row { min-height: 28px; padding-top: 2px; padding-bottom: 2px; }
body .tower-console .monitor-bank { height: calc(100% - 128px); }
body .tower-console .tower-desk { height: 112px; }
body .tower-desk .desk-keyboard { bottom: 26px; height: 40px; }
body .tower-desk .desk-mouse { bottom: 30px; }
body .flight-monitor .traffic-list { max-height: 112px; }
body .flight-monitor .traffic-list { max-height: 84px; }
body .flight-monitor .action-feedback { padding-top: 2px; padding-bottom: 2px; min-height: 0; }

/* Strike toast, learn dialog, desk decorations */
.strike-toast { position: fixed; z-index: 60; top: 84px; right: 16px; width: 260px; padding: 10px 12px; border: 2px solid #ff4a4a; border-radius: 6px; background: #240808f0; color: #ffd0d0; font: 700 12px var(--mono); box-shadow: 0 0 18px #ff2a2a88; animation: strike-in .25s ease-out; }
.strike-toast[hidden] { display: none; }
.strike-toast strong { display: block; margin-bottom: 4px; color: #ff6a6a; font-size: 15px; letter-spacing: .08em; }
@keyframes strike-in { from { transform: translateX(120%); } to { transform: none; } }
.learn-dialog { width: min(720px, 92vw); padding: 14px; border: 2px solid #3dff7a; background: #06130c; color: #6dff9a; font-family: var(--mono); }
.learn-dialog::backdrop { background: #000a; }
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.learn-grid section { padding: 8px; border: 1px solid #3dff7a66; background: #07180f; }
.learn-grid h3 { margin: 0 0 4px; font-size: 13px; color: #b7ffcc; }
.learn-grid p { margin: 0; font-size: 12px; line-height: 1.4; color: #9be8b3; }
.learn-grid .learn-green { border-color: #9be84a; background: #0d2208; }
.learn-live { margin: 6px 0 10px; font-size: 12px; }
.learn-live b { color: #ffe27a; }
.shop-decos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.desk-deco { position: absolute; inset: 0; pointer-events: none; }
.desk-deco .deco { position: absolute; bottom: 30px; font-size: 26px; filter: drop-shadow(0 4px 3px #000b); }
.deco-lamp { left: calc(50% - 380px); }
.deco-plant { left: calc(50% - 330px); }
.deco-mug { left: calc(50% - 255px); font-size: 20px !important; }
.deco-plane { left: calc(50% + 250px); }
.deco-globe { left: calc(50% + 310px); }
@media (max-width: 760px) { .learn-grid { grid-template-columns: 1fr; } }

/* Compact header and non-scrolling right monitor */
body .topbar { justify-content: flex-start; }
body .topbar .header-actions { margin-left: auto; }
body .flight-monitor { overflow: hidden; }
body .flight-monitor .traffic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; max-height: none; overflow: hidden; }
body .flight-monitor .traffic-row { min-height: 22px; font-size: 11px; }
body .flight-monitor .traffic-call small { display: none; }
body .flight-monitor .traffic-row { min-height: 24px; height: 24px; padding: 0 6px; align-items: center; }
body .flight-monitor .traffic-diamond { display: none; }
body .flight-monitor .traffic-list { gap: 3px 6px; }
body .flight-monitor .traffic-row { display: flex; justify-content: space-between; gap: 6px; }
body .flight-monitor .traffic-row .traffic-call { flex: 0 0 auto; width: auto; min-width: 0; overflow: visible; text-overflow: clip; }
body .flight-monitor .traffic-row .traffic-call strong { white-space: nowrap; overflow: visible; }
body .flight-monitor .traffic-row .traffic-track, body .flight-monitor .traffic-row .traffic-alert { flex: 0 0 auto; width: auto; margin-left: auto; white-space: nowrap; }
body .flight-monitor .action-feedback { display: none; }
body .flight-monitor .selected-detail p { display: none; }
body .flight-monitor .traffic-row { min-height: 22px; height: 22px; }
body .flight-monitor .traffic-list { gap: 2px 6px; }

/* Crisp monitors, realistic keyboard/mouse, 3D desk decorations */
body .tower-console .monitor-bank .map-monitor, body .tower-console .monitor-bank .flight-monitor {
  border: 9px solid #5b666d; border-bottom-width: 20px; border-radius: 10px;
  border-color: #7b868d #3d474d #2a3237 #4d585f;
  background: #02070b;
  box-shadow: inset 0 0 0 2px #0b1014, 0 2px 0 #1b2226;
}
.monitor-stand .neck { background: linear-gradient(90deg, #4d585f, #a4aeb4 45%, #4d585f); width: 36px; left: -18px; height: 26px; }
.monitor-stand .foot { background: linear-gradient(#aab4ba, #5a656c); box-shadow: none; border-radius: 8px; height: 8px; left: -70px; width: 140px; top: 24px; }
body .tower-desk .desk-surface { background: linear-gradient(180deg, #46525a, #2c363c 70%, #222b30); border-top-color: #8a959b; }
body .tower-desk .desk-front { background: linear-gradient(90deg, #2a3338, #3a454b 30%, #2a3338 80%); }

body .tower-desk .desk-keyboard {
  left: calc(50% - 170px); width: 300px; height: 38px; bottom: 28px; border: 0; border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, #0000 0 18px, #1d2428 18px 20px),
    repeating-linear-gradient(0deg, #0000 0 8px, #1d2428 8px 10px),
    linear-gradient(#d3dadd, #aab4b9);
  box-shadow: 0 0 0 3px #bfc7cb, 0 3px 0 3px #6d787e, 0 6px 6px 2px #0007;
}
body .tower-desk .desk-mouse {
  left: calc(50% + 175px); bottom: 30px; width: 20px; height: 32px; transform: none; border: 0;
  border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%;
  background: linear-gradient(90deg, #aeb7bc, #e6ebed 45%, #8e999f);
  box-shadow: 0 3px 0 #5d686e, 0 5px 5px #0007;
}
body .tower-desk .desk-mouse::after { top: 0; left: 50%; width: 1px; height: 13px; background: #4d585f; }
body .tower-desk .desk-mouse::before { content: ""; position: absolute; top: -10px; left: 50%; width: 1px; height: 12px; background: #1b2226; }

.desk-deco .deco { font-size: 0; width: 44px; height: 44px; filter: none; bottom: 28px; }
.deco i { position: absolute; display: block; }
.deco-mug { left: calc(50% - 250px) !important; }
.deco-mug i:nth-child(1) { left: 12px; bottom: 0; width: 18px; height: 20px; border-radius: 2px 2px 6px 6px; background: linear-gradient(90deg, #b8442f, #f07a5a 40%, #8d2f20); box-shadow: 0 3px 3px #0008; }
.deco-mug i:nth-child(2) { left: 12px; bottom: 16px; width: 18px; height: 7px; border-radius: 50%; background: #3b1d12; border: 1px solid #f09a80; }
.deco-mug i:nth-child(3) { left: 28px; bottom: 5px; width: 9px; height: 11px; border: 3px solid #d6624a; border-left: 0; border-radius: 0 8px 8px 0; }
.deco-plant { left: calc(50% - 320px) !important; }
.deco-plant i:nth-child(1) { left: 11px; bottom: 0; width: 22px; height: 16px; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); background: linear-gradient(90deg, #a5552f, #e0875a 40%, #7a3a1e); }
.deco-plant i:nth-child(2) { left: 10px; bottom: 14px; width: 12px; height: 22px; border-radius: 100% 0; background: linear-gradient(135deg, #7be07b, #1f7a35); }
.deco-plant i:nth-child(3) { left: 21px; bottom: 14px; width: 12px; height: 28px; border-radius: 0 100%; background: linear-gradient(225deg, #6bd16b, #176a2b); }
.deco-plant i:nth-child(4) { left: 16px; bottom: 14px; width: 11px; height: 18px; border-radius: 100% 100% 0 0; background: #2fa04a; }
.deco-lamp { left: calc(50% - 385px) !important; }
.deco-lamp i:nth-child(1) { left: 6px; bottom: 0; width: 24px; height: 5px; border-radius: 50%; background: linear-gradient(#8e999f, #3b454b); }
.deco-lamp i:nth-child(2) { left: 17px; bottom: 4px; width: 3px; height: 28px; background: #aab4ba; transform: rotate(18deg); transform-origin: bottom; }
.deco-lamp i:nth-child(3) { left: 17px; bottom: 28px; width: 24px; height: 12px; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #d8a526, #ffe27a 50%, #b07d14); transform: rotate(-25deg); }
.deco-lamp i:nth-child(4) { left: 20px; bottom: 14px; width: 28px; height: 20px; background: radial-gradient(circle, #ffe27a88, #0000 70%); }
.deco-plane { left: calc(50% + 235px) !important; }
.deco-plane i:nth-child(1) { left: 2px; bottom: 0; width: 40px; height: 5px; border-radius: 50%; background: linear-gradient(#8e999f, #3b454b); }
.deco-plane i:nth-child(2) { left: 6px; bottom: 16px; width: 34px; height: 7px; border-radius: 50% 80% 80% 50%; background: linear-gradient(#fff, #c5ced3 60%, #8e999f); transform: rotate(-12deg); }
.deco-plane i:nth-child(3) { left: 14px; bottom: 16px; width: 10px; height: 22px; clip-path: polygon(30% 100%, 70% 100%, 100% 0, 60% 0); background: linear-gradient(90deg, #4aa3df, #1d5f96); transform: rotate(-12deg); }
.deco-plane i:nth-child(4) { left: 4px; bottom: 20px; width: 9px; height: 12px; clip-path: polygon(0 0, 60% 0, 100% 100%, 40% 100%); background: #2b7fbe; }
.deco-plane i:nth-child(5) { left: 20px; bottom: 5px; width: 3px; height: 12px; background: #8e999f; }
.deco-globe { left: calc(50% + 300px) !important; }
.deco-globe i:nth-child(1) { left: 5px; bottom: 0; width: 34px; height: 5px; border-radius: 50%; background: linear-gradient(#aab4ba, #4d585f); }
.deco-globe i:nth-child(2) { left: 20px; bottom: 3px; width: 4px; height: 8px; background: #aab4ba; }
.deco-globe i:nth-child(3) { left: 8px; bottom: 9px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff8, #0000 30%), radial-gradient(circle at 40% 45%, #3fae5a 0 18%, #0000 20%), radial-gradient(circle at 68% 62%, #3fae5a 0 14%, #0000 16%), radial-gradient(circle at 35% 35%, #4aa3df, #14507f 75%); box-shadow: inset -5px -5px 8px #0006, 0 2px 4px #0006; }
.deco-globe i:nth-child(4) { display: none; }

.aircraft-map-tag.ambient i { filter: saturate(0) brightness(.9); opacity: .65; }
.aircraft-map-tag.ambient b { opacity: .55; background: #1a2a22; border-color: #4a6a58; color: #a7c4b3; }

/* CO2 emission meter */
.co2-meter { position: fixed; z-index: 20; right: 1.5vw; top: 44vh; width: 15vw; max-width: 230px; min-width: 150px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 8px solid #5b666d; border-color: #7b868d #3d474d #2a3237 #4d585f; border-radius: 10px; background: #02070b; color: #9be8b3; font-family: var(--mono, monospace); text-align: center; }
.co2-meter h2 { margin: 0; font-size: 12px; letter-spacing: 1px; color: #b7ffcc; }
.co2-bar { position: relative; width: 34px; height: 140px; border: 2px solid #46535a; border-radius: 4px; background: linear-gradient(0deg, #1b8f3a, #d8c42a 55%, #d92b2b); overflow: hidden; }
.co2-fill { position: absolute; top: 0; right: 0; left: 0; height: 0; }
.co2-fill { top: 0; bottom: auto; background: #0b1216; transition: height .3s; }
.co2-meter strong { font-size: 18px; color: #fff; }
.co2-meter > span { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.co2-tip { margin: 0; min-height: 48px; font-size: 11px; line-height: 1.35; color: #9be8b3; }
.co2-meter.max { border-color: #ff5a4a; animation: co2-flash .6s infinite alternate; }
.co2-meter.max > span { color: #ff6b5a; }
@keyframes co2-flash { to { box-shadow: 0 0 18px #ff3b2a; } }
.co2-meter .co2-fill { background: #0b1216 !important; border: 0 !important; }
.co2-meter { right: 1vw; width: 12vw; min-width: 130px; padding: 8px; top: 46vh; }
.co2-meter .co2-bar { height: 120px; }
.co2-meter .co2-tip { font-size: 10px; min-height: 56px; }
.co2-meter { box-sizing: border-box; width: 11vw; min-width: 120px; }
.failure-cutscene-frame > p { font-size: 34px; letter-spacing: 6px; }
.failure-cutscene.win .failure-cutscene-frame > p { color: #6dff9a; text-shadow: 0 0 18px #3dff7a; }
.failure-cutscene.win .failure-runway { display: none; }

/* Bigger alert button, blinking light and centred popup */
body .safety-banner { top: 10px; right: 10px; left: 10px; max-width: none; min-height: 64px; padding: 10px 16px; gap: 12px; border: 3px solid #ff5148; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; z-index: 5; }
body .safety-banner:disabled { cursor: default; }
body .safety-banner.alert { animation: alert-blink .7s steps(2, start) infinite; }
body .safety-banner .safety-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #ff5148; color: #fff; font-size: 22px; }
body .safety-banner .safety-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
body .safety-banner .safety-warn { display: none; font-size: 10px; letter-spacing: .5px; color: #ffd2cc; }
body .safety-banner:not(:disabled) .safety-warn { display: block; }
body .safety-banner .warning-action { padding: 8px 14px; border-radius: 4px; background: #ff5148; color: #fff; font-size: 16px; }
body .safety-light { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #ff2b1f; box-shadow: 0 0 14px 6px #ff2b1f; animation: light-blink .5s infinite alternate; }
@keyframes alert-blink { 0%, 100% { background: #5a1f1f; } 50% { background: #8f2622; box-shadow: 0 0 22px #ff3b2a; } }
@keyframes light-blink { to { opacity: .15; box-shadow: 0 0 2px 0 #ff2b1f; } }
body .emergency-alert { position: fixed; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: min(680px, 92vw) !important; max-height: 90vh !important; padding: 22px 26px !important; z-index: 60; overflow: auto; box-shadow: 0 0 0 100vmax #000a, 0 0 30px #ff3b2a; }
body .emergency-alert strong { font-size: 22px; }
body .emergency-alert #emergency-clock { font-size: 26px; padding: 6px 12px; }
body .emergency-alert > p { font-size: 16px; line-height: 1.5; }
body .emergency-alert .emergency-instruction, body .emergency-alert label { font-size: 12px; }
body .emergency-alert .emergency-footnote { font-size: 13px; color: #ffb4aa; }
body .emergency-alert .emergency-choices button, body .emergency-alert .button { font-size: 16px; padding: 12px 16px; min-height: 48px; }
body .emergency-alert input { font-size: 18px; min-height: 46px; }
body .emergency-alert .emergency-ghost { font-size: 18px; }
body .safety-banner { z-index: 1200; min-height: 78px; background-color: #5a1f1f; }
body .safety-banner .safety-warn { white-space: normal; line-height: 1.25; }
body .safety-banner .warning-action { white-space: nowrap; flex: none; }

/* Emergency alarm lives on the desk below the monitors; popup is compact at the bottom */
body .safety-banner { position: fixed; top: auto; right: auto; left: 9vw; bottom: 34px; width: 300px; max-width: 30vw; min-height: 64px; height: 64px; padding: 6px 10px; gap: 8px; z-index: 1200; border: 3px solid #2a2d33; border-radius: 6px; background: #050506; box-shadow: 0 6px 10px #0009, inset 0 0 8px #000; overflow: hidden; }
body .safety-banner[hidden] { display: flex; animation: none; }
body .safety-banner[hidden] > * { visibility: hidden; }
body .safety-banner:not([hidden]) { border-color: #ff5148; box-shadow: 0 0 22px #ff3b2a, inset 0 0 8px #000; }
body .safety-banner .safety-icon { display: none; }
body .safety-banner .safety-light { width: 12px; height: 12px; box-shadow: 0 0 8px 3px #ff2b1f; }
body .safety-banner #safety-text { font-size: 11px; }
body .safety-banner .safety-warn { display: none !important; }
body .safety-banner .warning-action { font-size: 13px; padding: 6px 8px; }
body .safety-banner .safety-warn { font-size: 9px; }
body .emergency-alert { top: 50% !important; bottom: auto !important; left: 50% !important; transform: translate(-50%, -50%); width: min(680px, 92vw) !important; max-height: 90vh !important; padding: 22px 26px !important; box-shadow: 0 0 0 100vmax #000a, 0 0 30px #ff3b2a; }
body .emergency-alert strong { font-size: 22px; }
body .emergency-alert #emergency-clock { font-size: 26px; padding: 6px 12px; }
body .emergency-alert > p { font-size: 16px; line-height: 1.5; }
body .emergency-alert .emergency-choices button, body .emergency-alert .button { font-size: 16px; padding: 12px 16px; min-height: 48px; }
body .emergency-alert input { font-size: 18px; min-height: 46px; }
body .emergency-alert .emergency-ghost { font-size: 18px; }
body .safety-banner[hidden]::after { content: "SEARCHING FOR CONFLICTS..."; visibility: visible; margin: auto; color: #4d6b57; font: 11px/1 monospace; letter-spacing: 1px; animation: light-blink 1.4s infinite alternate; }