/* Layout: airline operations center. Full-bleed world map, departure-board HUD on top, dispatch panel on the right. */
:root {
  --ink: #07101b;
  --deep: #0c1828;
  --panel: #10203a;
  --panel-2: #152a47;
  --line: #22395a;
  --text: #e6edf7;
  --muted: #8ea3bf;
  --amber: #ffb547;
  --amber-dim: #a3712a;
  --good: #5fd38d;
  --bad: #ff6b6b;
  --ocean: #08182a;
  --land: #15283f;
  --coast: #2c4a6e;
  --grid: rgba(120, 160, 210, 0.07);
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- buttons & fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 600;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #1b1203; }
.btn.primary:hover { background: #ffc46e; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.icon { width: 36px; height: 36px; padding: 0; font-size: 18px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select {
  background: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; color: var(--text); min-width: 0;
}
input[type=range] { padding: 0; accent-color: var(--amber); }
label.check { display: flex; align-items: center; gap: 8px; }
.card { background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card h2 { font: 800 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.card h3 { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- lobby ---------- */
.screen { min-height: 100%; }
.lobby-wrap, .room-wrap { max-width: 1040px; margin: 0 auto; padding: 40px 16px 60px; display: grid; gap: 28px; }
.brand-hero { display: grid; gap: 14px; }
.board-row { display: flex; gap: 6px; flex-wrap: wrap; font: 600 13px var(--mono); }
.board-row span { background: #0a0f15; border: 1px solid #1b2836; color: var(--amber); padding: 4px 8px; border-radius: 3px; letter-spacing: .12em; }
.blink { animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.logo { font: 800 clamp(56px, 11vw, 120px)/.86 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.logo em { font-style: normal; color: var(--amber); }
.tagline { max-width: 60ch; color: var(--muted); font-size: 17px; margin: 0; }
.lobby-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; font: 600 20px var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.sub { margin-top: 6px; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.room-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.room-list .meta { font-size: 13px; color: var(--muted); }
.room-list .empty { justify-content: center; color: var(--muted); background: transparent; border-style: dashed; }
.conn { color: var(--muted); font-size: 13px; margin: 0; }

/* ---------- room ---------- */
.room-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.room-head h2 { font: 800 44px/1 var(--display); text-transform: uppercase; }
.code-chip { font: 600 30px var(--mono); letter-spacing: .3em; background: #0a0f15; color: var(--amber); border: 1px solid #1b2836; border-radius: 6px; padding: 8px 8px 8px 16px; cursor: pointer; }
.room-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; }
.player-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.player-list li { display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.tag.host { color: var(--amber); border-color: var(--amber-dim); }
.off { opacity: .5; }
.room-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.settings-grid { display: grid; gap: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv span:first-child { color: var(--muted); }
.chat-card { min-height: 280px; }
.chat-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; align-content: start; font-size: 14px; }
.chat-log .sys { color: var(--muted); font-style: italic; }
.chat-log b { font-weight: 600; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; }

/* ---------- game ---------- */
.game { height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
/* Grid items may shrink below their content (the command bar scrolls instead of widening the page on phones). */
.game > *, .game-main > * { min-width: 0; }
.hud { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #050b13; border-bottom: 1px solid var(--line); }
.hud-brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.swatch { width: 14px; height: 14px; border-radius: 3px; }
.hud-stats { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.flap { display: grid; background: #0a0f15; border: 1px solid #1b2836; border-radius: 4px; padding: 3px 10px; min-width: 88px; }
.flap .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.flap .v { font: 600 16px var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flap .v.neg { color: var(--bad); }
.date-flap { position: relative; padding-bottom: 6px; }
.clock { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: #1b2836; border-radius: 1px; overflow: hidden; }
.clock i { display: block; height: 100%; width: 0; background: var(--amber); }
.clock i.paused { background: var(--muted); }

.team-pick { display: grid; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.team-row.mine { border-color: var(--amber-dim); }
.team-row .members { flex: 1; font-size: 13px; color: var(--muted); min-width: 0; }
.team-row b { color: var(--text); font-weight: 600; }
.team-tag { font-size: 11px; letter-spacing: .06em; border-radius: 4px; padding: 1px 6px; border: 1px solid currentColor; white-space: nowrap; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-weight: 600; }
.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2) infinite; }
.live.paused { color: var(--muted); }
.live.paused::before { animation: none; }
#speed-select { padding: 6px 8px; font-size: 13px; }

.game-main { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
.map-wrap { position: relative; min-height: 0; background: var(--ocean); overflow: hidden; }
#map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map.dragging { cursor: grabbing; }
.map-tools { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.map-banner { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(5, 11, 19, .9); border: 1px solid var(--amber-dim); color: var(--amber); padding: 8px 16px; border-radius: 6px; font-weight: 600; text-align: center; max-width: calc(100% - 32px); }
.map-tip { position: absolute; pointer-events: none; background: rgba(5, 11, 19, .94); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }

.side { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: var(--deep); border-left: 1px solid var(--line); }
.tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs button { flex: 1 0 auto; padding: 12px 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; position: relative; }
.tabs button.on { color: var(--text); border-bottom-color: var(--amber); }
.badge { display: inline-block; min-width: 8px; height: 8px; border-radius: 4px; background: var(--amber); margin-left: 4px; vertical-align: middle; }
/* minmax(0, 1fr): the column is the window's width, never stretched by a wide table (that gave narrow windows a
   sideways scrollbar); a wide table scrolls inside its own section instead. */
.panel { overflow-y: auto; overflow-x: hidden; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-height: 0; }

.p-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p-title h2 { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.p-sec { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.p-sec > h3 { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--panel); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.stat .k { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.stat .v { font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.owners { display: flex; flex-wrap: wrap; gap: 6px; }
.owner { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--panel); border-radius: 999px; padding: 2px 10px 2px 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stepper { display: flex; align-items: center; gap: 0; }
.stepper button { width: 34px; height: 36px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.stepper button:first-child { border-radius: 6px 0 0 6px; }
.stepper button:last-child { border-radius: 0 6px 6px 0; }
.stepper output { flex: 1; text-align: center; height: 36px; line-height: 34px; border-block: 1px solid var(--line); background: var(--ink); font-family: var(--mono); }
.estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; background: var(--panel); border-radius: 8px; padding: 12px; font-size: 14px; }
.estimate .kv span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.warn { color: var(--bad); font-size: 13px; margin: 0; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.route { background: var(--panel); border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; cursor: pointer; }
.route.open { border-color: var(--amber-dim); cursor: default; }
.route-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.route-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.loadbar { height: 4px; background: var(--ink); border-radius: 2px; overflow: hidden; }
.loadbar i { display: block; height: 100%; background: var(--good); }
.loadbar i.mid { background: var(--amber); }
.loadbar i.low { background: var(--bad); }
/* A new route counting down to its first delivery (opening day). */
.route-opens { color: var(--px-gold, #f5c832); }
.route-countdown { display: grid; gap: 4px; font-size: 13px; color: #cfe0ff; }
.route-countdown b { color: var(--px-gold, #f5c832); }
.route-countdown .meter > i, .route-countdown .meter > i:is(.low, .mid) { background: linear-gradient(90deg, #4f8cf0, #ffd84a); } /* progress, not a warning */
.route-locked { margin: 0; }
/* An era project that opens up in a later decade: shown, but quieter. */
.job.later { opacity: 0.72; }
.route-edit { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.plane { background: var(--panel); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.plane-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.plane-top b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.plane-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.plane-specs b { color: var(--text); font-weight: 600; font-family: var(--mono); }
.sst { color: var(--amber); font-size: 11px; letter-spacing: .14em; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl td, .tbl th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.tbl td.r, .tbl th.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: 160px; display: block; background: var(--panel); border-radius: 8px; }
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.news li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font-size: 14px; }
.news .d { font: 12px var(--mono); color: var(--muted); padding-top: 2px; }
.news .alert { color: var(--bad); }
.news .plane { background: none; padding: 0; color: var(--amber); display: block; }

.turnbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #050b13; border-top: 1px solid var(--line); }
.turn-info { flex: 1; font-size: 14px; color: var(--muted); min-width: 0; }
.turn-info b { color: var(--text); }
.turn-timer { font: 600 18px var(--mono); color: var(--amber); }
#btn-end.waiting { background: transparent; color: var(--amber); }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(2, 6, 12, .72); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal-card { background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 24px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; display: grid; gap: 16px; }
.modal-card > h2 { font: 800 34px/1 var(--display); text-transform: uppercase; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.big-num { font: 600 34px var(--mono); }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #2a1215; border: 1px solid var(--bad); color: #ffd7d7; padding: 10px 16px; border-radius: 8px; z-index: 60; max-width: calc(100% - 32px); }
.toast.info { background: #11253d; border-color: var(--amber-dim); color: var(--text); }

/* ---------- operations, businesses, events ---------- */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; padding: 7px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; cursor: pointer; font-weight: 600; }
.seg button.on { background: var(--amber); color: #1b1203; border-color: var(--amber); }
.meter { height: 8px; background: var(--ink); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--good); }
.meter i.mid { background: var(--amber); }
.meter i.low { background: var(--bad); }
.biz { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border-radius: 8px; padding: 8px 10px; }
.biz .ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--panel-2); color: var(--amber); }
.biz .ico svg { width: 18px; height: 18px; }
.biz .t { font-weight: 600; }
.biz .d { font-size: 12px; color: var(--muted); }
.biz.owned { outline: 1px solid var(--amber-dim); }
.stars { color: var(--amber); letter-spacing: 1px; white-space: nowrap; }
.fx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.fx-list .neg { color: var(--bad); } .fx-list .pos { color: var(--good); }
.coming { border-left: 3px dashed #ffd84a; padding: 4px 8px; margin: 4px 0 6px; font-size: 13px; background: rgba(255,216,74,0.08); border-radius: 0 4px 4px 0; }
.coming a { color: #ffd84a; }
.paper-link { display: block; width: 100%; text-align: left; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-tag { font-size: 11px; letter-spacing: .06em; border-radius: 4px; padding: 1px 6px; border: 1px solid currentColor; }
.callout { border: 1px solid var(--amber-dim); background: color-mix(in srgb, var(--amber) 10%, transparent); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; }
.cmp td.best { color: var(--good); font-weight: 600; }
.news .politics { color: #8fb8ff; }

/* ---------- maiden flight ---------- */
.sky-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: opacity 0.8s; opacity: 0; }
.sky-tint.on { opacity: 1; }
.maiden-banner { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); pointer-events: none;
  background: var(--glass, var(--deep)); border: 1px solid rgba(170,186,255,0.35); border-radius: 14px; padding: 10px 16px 12px;
  box-shadow: 0 16px 40px rgba(3,6,30,0.55); animation: banner-in 0.6s cubic-bezier(.2,1.4,.4,1) both; overflow: hidden; }
.maiden-banner.out { animation: banner-out 0.5s ease-in forwards; }
.maiden-banner { z-index: 3; } /* over the route-profit legend, which sits in the same map corner on narrow maps */
/* With a game window open over the map (bottom-bar layout, 470px + 12px margin), the banner centres in the map that is
   left (it slid underneath the window). The animation keeps translate(-50%), so only left/width move. Under 960px the
   window covers the width: the banner then shows on top of it for its few seconds. */
body.layout-bottom.side-open:has(#side:not(.win-left)) .maiden-banner { left: calc((100% - 482px) / 2); width: min(520px, calc(100% - 514px)); }
body.layout-bottom.side-open:has(#side.win-left) .maiden-banner { left: calc(482px + (100% - 482px) / 2); width: min(520px, calc(100% - 514px)); }
@media (max-width: 960px) {
  body.layout-bottom.side-open .maiden-banner { left: 50%; width: min(560px, calc(100% - 32px)); z-index: 20; }
}
.maiden-banner .mb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.maiden-banner .mb-kicker { font: 600 12px/1.3 var(--display); letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; }
.maiden-banner .mb-flight { font: 18px/1 var(--mono); color: var(--amber); }
.maiden-banner .mb-route { font: 700 22px/1.2 var(--display); margin-top: 2px; }
.maiden-banner .mb-plane { height: 92px; margin: 2px 0 0; animation: plane-roll 6.5s cubic-bezier(.5,0,.3,1) both; }
.maiden-banner .mb-plane svg { height: 100%; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 6px rgba(0,0,0,0.35)); }
.maiden-banner .mb-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.maiden-banner .mb-facts b { color: var(--text); font-weight: 600; }
.maiden-banner .mb-story { font-size: 13px; margin-top: 4px; font-style: italic; color: var(--text); }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes banner-out { to { opacity: 0; transform: translate(-50%, 30px); } }
@keyframes plane-roll { 0% { transform: translateX(-38%) rotate(0deg); } 18% { transform: translateX(-10%) rotate(-7deg); } 75% { transform: translateX(6%) rotate(-2deg); } 100% { transform: translateX(34%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .maiden-banner, .maiden-banner .mb-plane { animation: none; } }

/* ---------- period newspapers ---------- */
.modal-card.paper-modal { padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; width: min(720px, 100%); }
.modal-card.paper-modal > h2 { display: none; }
.modal-card.paper-modal .modal-actions { padding: 0 4px; }
.paper { border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); overflow: hidden; animation: paper-in 0.7s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes paper-in { from { opacity: 0; transform: rotate(-8deg) scale(0.6); } to { opacity: 1; transform: rotate(0) scale(1); } }
.paper h1, .paper h2 { margin: 0; text-shadow: none; }
.paper .np-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.paper .np-cols > * { min-width: 0; }
.paper blockquote { margin: 8px 0; }
.paper cite { display: block; font-style: normal; font-size: 12px; opacity: 0.75; }
.paper ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.paper .np-pollbar { display: block; height: 6px; margin-top: 4px; background: rgba(0,0,0,0.15); }
.paper .np-pollbar i { display: block; height: 100%; background: currentColor; }
.paper .np-photo { margin: 8px 0 10px; }
.paper .np-photo svg { width: 100%; height: auto; display: block; }
.paper .np-photo figcaption { font-size: 12px; opacity: 0.75; margin-top: 3px; }
/* 1960s-70s broadsheet */
.paper.broadsheet { background: #f2e8d2; color: #1e1a12; font-family: 'Old Standard TT', Georgia, serif; padding: 16px 22px 20px; }
.broadsheet .np-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 3px double #1e1a12; padding-bottom: 6px; }
.broadsheet .np-name { font: 400 40px/1.1 'UnifrakturMaguntia', 'Old Standard TT', serif; text-align: center; }
.broadsheet .np-ear { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid #1e1a12; padding: 3px 6px; justify-self: start; }
.broadsheet .np-ear:last-child { justify-self: end; }
.broadsheet .np-dateline { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #1e1a12; padding: 4px 0; margin-bottom: 10px; }
.broadsheet h1 { font: 700 34px/1.08 'Old Standard TT', serif; text-align: center; text-wrap: balance; }
.broadsheet .np-deck { text-align: center; font-style: italic; margin: 6px 0 12px; border-bottom: 1px solid #1e1a12; padding-bottom: 8px; }
.broadsheet h2 { font: 700 13px/1.2 'Old Standard TT', serif; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #1e1a12; margin: 10px 0 6px; }
.broadsheet .np-lede::first-letter { float: left; font-size: 46px; line-height: 0.85; padding: 4px 6px 0 0; font-weight: 700; }
.broadsheet aside { border-left: 1px solid #1e1a12; padding-left: 14px; }
.broadsheet .np-photo svg { filter: grayscale(1) sepia(0.35) contrast(1.1); }
/* 1980s-90s tabloid */
.paper.tabloid { background: #ffffff; color: #111; font-family: 'IBM Plex Sans', Arial, sans-serif; padding: 0 0 18px; }
.tabloid .np-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #d4141c; color: #fff; padding: 8px 14px; }
.tabloid .np-name { font: 700 34px/1 'Oswald', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.tabloid .np-ear { font: 600 11px/1.2 'Oswald', sans-serif; text-transform: uppercase; background: #ffe600; color: #111; padding: 3px 6px; justify-self: start; }
.tabloid .np-ear:last-child { justify-self: end; }
.tabloid .np-dateline { display: flex; justify-content: space-between; font: 600 11px 'Oswald', sans-serif; text-transform: uppercase; padding: 4px 14px; background: #111; color: #fff; }
.tabloid .np-body { padding: 10px 16px 0; }
.tabloid h1 { font: 700 40px/1 'Oswald', Impact, sans-serif; text-transform: uppercase; text-wrap: balance; }
.tabloid .np-deck { font: 600 15px/1.3 'Oswald', sans-serif; color: #d4141c; margin: 6px 0 10px; text-transform: uppercase; }
.tabloid h2 { font: 700 14px/1.2 'Oswald', sans-serif; text-transform: uppercase; background: #ffe600; display: inline-block; padding: 2px 6px; margin: 10px 0 4px; }
.tabloid blockquote { font-weight: 600; }
.tabloid .np-poll { color: #d4141c; }
/* 2000s+ news website */
.paper.web { background: #ffffff; color: #1b1f27; font-family: 'IBM Plex Sans', Arial, sans-serif; padding: 0 0 18px; }
.web .np-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #12324f; color: #fff; padding: 10px 16px; flex-wrap: wrap; }
.web .np-site { font-weight: 700; font-size: 17px; }
.web .np-nav { font-size: 12px; opacity: 0.8; }
.web .np-body { padding: 14px 18px 0; }
.web .np-breaking { display: inline-block; background: #c62828; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 3px; }
.web h1 { font: 700 30px/1.15 'IBM Plex Sans', sans-serif; margin-top: 6px; text-wrap: balance; }
.web .np-meta { font-size: 12px; color: #687080; margin: 6px 0; }
.web .np-deck { color: #3d4452; margin: 0 0 10px; }
.web h2 { font: 700 14px/1.2 'IBM Plex Sans', sans-serif; margin: 12px 0 6px; color: #12324f; }
.web blockquote { border-left: 3px solid #12324f; padding-left: 10px; }
.web aside { background: #f2f5f9; border-radius: 8px; padding: 10px 12px; }
.web .np-poll { color: #12324f; }
.paper .np-stars { color: #c99a00; letter-spacing: 1px; }
@media (max-width: 600px) { .paper .np-cols { grid-template-columns: 1fr; } .broadsheet aside { border-left: 0; padding-left: 0; } .broadsheet h1, .tabloid h1 { font-size: 28px; } }

/* Split-flap tiles in the HUD */
.flap .v.flaps { display: flex; gap: 2px; perspective: 120px; }
.fc { position: relative; display: inline-block; min-width: 0.66em; padding: 1px 2px 0; text-align: center; border-radius: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0 49%, rgba(0,0,0,0.38) 51% 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transform-origin: 50% 50%; backface-visibility: hidden; }
.fc::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.65); }
.fc.blank { background: rgba(0,0,0,0.25); }
.fc.flip { animation: fc-flip 0.11s ease-in; }
@keyframes fc-flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-88deg); filter: brightness(0.6); } 100% { transform: rotateX(0deg); } }
@media (prefers-reduced-motion: reduce) { .fc.flip { animation: none; } }
canvas.sprite { width: 54px; height: 39px; image-rendering: pixelated; flex: none; }
.legend { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 2px; padding: 8px 10px; font-size: 12px; background: rgba(5,11,19,.85); border: 1px solid var(--line); border-radius: 6px; pointer-events: none; }
.legend b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 4px; border-radius: 2px; }
@media (max-width: 480px) { .legend { display: none; } }

/* Grand-opening cards that pop up on the map */
.celebrate-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cele { position: absolute; transform: translate(-50%, calc(-100% - 14px)); min-width: 180px; max-width: 240px; padding: 10px 14px 12px;
  background: var(--deep); border: 2px solid var(--amber); border-radius: 10px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: cele-in .55s cubic-bezier(.2,1.6,.4,1) both, cele-out .5s ease-in 3.6s forwards; }
.cele::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: var(--deep); border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: translateX(-50%) rotate(45deg); }
.cele .c-ico { width: 34px; height: 34px; margin: -28px auto 4px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #1b1203; border: 2px solid var(--deep); }
.cele .c-ico svg { width: 18px; height: 18px; }
.cele .c-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.cele .c-title { font-weight: 700; font-size: 15px; line-height: 1.2; margin-top: 2px; }
.cele .c-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cele .c-stars { margin-top: 6px; font-size: 20px; letter-spacing: 3px; color: #3a4562; }
.cele .c-stars b { color: var(--amber); display: inline-block; animation: star-pop .35s cubic-bezier(.2,1.8,.4,1) both; }
.cele-burst { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 3px solid var(--amber); animation: burst 1s ease-out forwards; }
@keyframes cele-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 10px)) scale(.6); } to { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); } }
@keyframes cele-out { to { opacity: 0; transform: translate(-50%, calc(-100% - 40px)) scale(.9); } }
@keyframes star-pop { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(6); } }

/* ---------- Aero theme (default) ----------
   Late-90s strategy look, made modern: deep blue glass panels, gold capsules, glossy buttons, crisp tech type. */
body.aero {
  --ink: #0b1140;
  --deep: #141f6e;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.11);
  --line: rgba(170, 186, 255, 0.22);
  --text: #f4f6ff;
  --muted: #a9b3e6;
  --amber: #ffd84a;
  --amber-dim: #b59a2e;
  --good: #6ee78a;
  --bad: #ff7a7a;
  --ocean: #1e3fc0;
  --land: #3cae3c;
  --coast: #1d6b1d;
  --grid: rgba(255, 255, 255, 0.07);
  --glass: linear-gradient(180deg, rgba(36, 54, 168, 0.92) 0%, rgba(18, 28, 102, 0.94) 100%);
  --logo: 'Exo 2', 'Segoe UI', sans-serif;
  --display: 'Exo 2', 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Share Tech Mono', 'Consolas', monospace;
  background: radial-gradient(1200px 600px at 20% -10%, #24319a 0%, transparent 60%), linear-gradient(180deg, #0f1a5c 0%, #0b1140 60%) fixed;
  background-attachment: fixed;
  min-height: 100%;
}
body.aero .card, body.aero .modal-card, body.aero .cele, body.aero .map-banner, body.aero .map-tip, body.aero .legend {
  background: var(--glass);
  border: 1px solid rgba(170, 196, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 14px 36px rgba(3, 6, 30, 0.5);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
body.aero .side { background: var(--glass); border-left: 1px solid rgba(170, 186, 255, 0.28); }
body.aero .hud, body.aero .turnbar { background: rgba(8, 13, 52, 0.94); border-color: rgba(170, 186, 255, 0.22); backdrop-filter: blur(8px); }
/* A thin gold rule with a soft glow under the HUD. */
body.aero .hud { border-bottom: 0; box-shadow: 0 2px 0 rgba(255, 216, 74, 0.9), 0 3px 14px rgba(255, 200, 60, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35); position: relative; z-index: 2; }
/* Chrome logo with a gold X. */
body.aero .logo { font: italic 900 80px/1 var(--logo); letter-spacing: 0.02em; background: linear-gradient(180deg, #ffffff 0%, #dfe9ff 42%, #7d9be0 52%, #c9d8ff 70%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); }
body.aero .logo em { background: linear-gradient(180deg, #fff1b0 0%, #ffd24a 50%, #d9951c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) { body.aero .logo { font-size: 44px; } }
body.aero .card h2, body.aero .p-title h2, body.aero .modal-card > h2 { font: 800 22px/1.25 var(--display); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(5, 10, 40, 0.6); }
body.aero .room-head h2 { font: 800 32px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
body.aero .hud-brand { font: 800 18px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
body.aero .card h3, body.aero .p-sec > h3 { font: 700 13px/1.3 var(--display); color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; }
body.aero .flap { background: linear-gradient(180deg, rgba(4, 8, 30, 0.85), rgba(14, 22, 64, 0.85)); border: 1px solid rgba(170, 196, 255, 0.3); border-radius: 8px; padding: 4px 10px 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
body.aero .flap .k { font: 700 11px/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
body.aero .flap .v { font: 21px/1.1 var(--mono); color: var(--amber); text-shadow: 0 0 8px rgba(255, 216, 74, 0.45); }
/* Glossy capsule buttons. */
body.aero .btn { border-radius: 10px; border: 1px solid rgba(170, 196, 255, 0.38); background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.03) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); font-weight: 600; letter-spacing: 0.01em; }
body.aero .btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 52%, rgba(255, 255, 255, 0.05) 100%); border-color: rgba(210, 222, 255, 0.65); }
body.aero .btn.primary { background: linear-gradient(180deg, #fff0b0 0%, #ffd84a 46%, #e9a91f 100%); color: #2a1a00; border-color: #fff0b0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(233, 169, 31, 0.35); }
body.aero .btn.primary:hover { filter: brightness(1.06); }
body.aero .btn.primary:active { box-shadow: inset 0 2px 4px rgba(120, 70, 0, 0.35); }
body.aero input, body.aero select { background: rgba(5, 9, 40, 0.65); border: 1px solid rgba(170, 196, 255, 0.32); border-radius: 10px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
body.aero .tabs { border-bottom-color: rgba(170, 186, 255, 0.2); }
body.aero .tabs button { font: 700 13px/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 9px; }
body.aero .tabs button.on { color: var(--amber); border-bottom-color: var(--amber); text-shadow: 0 0 10px rgba(255, 216, 74, 0.4); }
body.aero .stat, body.aero .route, body.aero .plane, body.aero .biz, body.aero .estimate, body.aero .room-list li, body.aero .team-row, body.aero .owner { background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
body.aero .stat .k { font: 700 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
body.aero .stat .v { font: 22px/1.15 var(--mono); }
body.aero .tbl td, body.aero .tbl th { border-bottom-color: rgba(170, 186, 255, 0.16); }
body.aero .tbl th { font: 700 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
body.aero .tbl td.r { font: 16px/1.2 var(--mono); }
body.aero .plane-top b { font: 700 16px/1.2 var(--display); letter-spacing: 0.02em; }
body.aero .board-row span { font: 16px/1 var(--mono); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(170, 186, 255, 0.3); border-radius: 6px; color: var(--amber); }
body.aero .eyebrow, body.aero .c-kicker { font: 700 11px/1.3 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
body.aero .cele { border-width: 2px; }
body.aero .cele .c-title { font: 800 17px/1.25 var(--display); }
body.aero .cele .c-stars { color: rgba(255, 255, 255, 0.25); }
body.aero .code-chip { font: 32px/1 var(--mono); letter-spacing: 0.2em; background: rgba(5, 9, 40, 0.6); border: 1px solid rgba(255, 216, 74, 0.5); border-radius: 10px; }
body.aero .big-num { font: 40px/1 var(--mono); }
body.aero .turn-timer { font: 22px/1 var(--mono); }
body.aero .tag, body.aero .team-tag, body.aero .bloc-tag { font: 700 11px/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
body.aero .sst { font: 600 12px/1.3 var(--display); }
body.aero .seg button { border-radius: 8px; border: 1px solid rgba(170, 186, 255, 0.3); background: rgba(255, 255, 255, 0.05); }
body.aero .seg button.on { background: linear-gradient(180deg, #fff0b0 0%, #ffd84a 46%, #e9a91f 100%); color: #2a1a00; border-color: #fff0b0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
body.aero .chart { background: rgba(5, 9, 40, 0.5); border-radius: 10px; }
body.aero .biz .ico { border-radius: 8px; background: rgba(255, 216, 74, 0.12); }
body.aero .num, body.aero .estimate .kv span:last-child, body.aero .news .d { font: 15px/1.3 var(--mono); }
body.aero .legend b { font: 700 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
body.aero .toast { border-radius: 10px; backdrop-filter: blur(8px); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .lobby-grid, .room-grid { grid-template-columns: 1fr; }
  .game { height: auto; min-height: 100%; }
  .game-main { grid-template-columns: 1fr; }
  .map-wrap { height: 52vh; min-height: 300px; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .panel { overflow: visible; }
  .turnbar { position: sticky; bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hud { flex-wrap: wrap; }
  .hud-stats { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .flap { min-width: 0; flex: 1 1 30%; }
}
@media (max-width: 480px) {
  .row2, .field-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .turn-info { font-size: 12px; }
  /* Split-flap panels: two to a row with smaller tiles, so dates and money fit a phone. */
  .hud { padding: 6px 10px; gap: 8px; }
  .hud-stats { gap: 4px; }
  .flap { flex: 1 1 calc(50% - 4px); padding: 3px 7px 4px; overflow: hidden; }
  body.aero .flap .v { font-size: 15px; }
  .flap .v.flaps { gap: 1px; }
  table.tbl { display: block; overflow-x: auto; font-size: 12.5px; } /* wide tables scroll sideways */
  .tbl td, .tbl th { padding: 5px 3px; }
  .fc { padding: 1px 1px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  * { transition: none !important; }
}

/* Profit-chance badge on route forecasts */
.chance { display: inline-block; min-width: 3.2em; text-align: center; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font-family: var(--mono); font-weight: 700; cursor: help; }
.chance.hi { color: var(--good); } .chance.mid { color: var(--amber); } .chance.lo { color: var(--bad); }
/* Saved seats in the lobby */
#my-seats { margin-bottom: 14px; }
#my-seats .meta { font-weight: 400; }

/* ===== People pop-ups: dialogue boxes, managers, board meeting, showroom ===== */
.portrait { display: block; width: 100%; height: auto; }
.dlg { position: relative; display: grid; grid-template-columns: 132px 1fr; align-items: end; gap: 0; min-height: 132px; }
.dlg-bust { position: relative; z-index: 2; width: 132px; border: 3px solid #cfe0ff; border-radius: 10px 10px 4px 4px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.35); background: #1b2a4d; }
.dlg-box { position: relative; margin-left: -10px; padding: 12px 16px 14px 24px; min-height: 96px; border: 2px solid #9fbef5; border-radius: 0 18px 18px 18px;
  background: linear-gradient(180deg, rgba(22,44,104,.94), rgba(10,22,58,.96)); color: #f2f6ff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.35); }
.dlg-name { position: absolute; top: -14px; left: 18px; display: flex; gap: 8px; align-items: baseline; padding: 2px 12px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: linear-gradient(180deg, #ffe58a, #d9a628); color: #2a1a00; border: 1px solid #fff3c4; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.dlg-name span { font-weight: 500; font-size: 11px; opacity: .8; }
.dlg-text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; min-height: 3em; }
.dlg .btn-row { margin-top: 8px; }
.dlg-more { position: absolute; right: 14px; bottom: 6px; color: #7cf29a; font-style: normal; font-size: 12px; opacity: 0; }
.dlg.done .dlg-more { opacity: 1; animation: dlgBlink 1s steps(2) infinite; }
@keyframes dlgBlink { 50% { opacity: 0; } }
.dlg.good .dlg-bust { border-color: #9df0b9; } .dlg.bad .dlg-bust { border-color: #ff9c9c; } .dlg.warn .dlg-bust { border-color: #ffd98a; } .dlg.sad .dlg-bust { border-color: #a9b8d8; }

.advisor { position: absolute; left: 14px; bottom: 14px; width: min(520px, calc(100% - 28px)); z-index: 6; }
.advisor.in { animation: advIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes advIn { from { transform: translateY(30px); opacity: 0; } }
.advisor .dlg { grid-template-columns: 96px 1fr; min-height: 100px; }
.advisor .dlg-bust { width: 96px; }
.advisor .dlg-text { font-size: 14px; }
.dlg-x { position: absolute; top: 4px; right: 8px; z-index: 3; background: none; border: 0; color: #cfe0ff; font-size: 20px; cursor: pointer; }

.modal-card.people-modal { width: min(760px, 100%); background: radial-gradient(120% 90% at 50% 0%, #2a58c4 0%, #14306f 45%, #0a1636 100%); border: 2px solid #9fbef5; color: #f2f6ff; }
.modal-card.people-modal.showroom-modal { width: min(940px, 100%); }
.modal-card.people-modal > h2 { color: #fff; text-shadow: 0 2px 0 #0a1636; font-size: 26px; }
.modal-card.people-modal .hint { color: #b9c9ee; }
.mgr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.mgr-grid.compact { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.mgr { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 10px; text-align: left; padding: 8px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(40,80,170,.85), rgba(16,34,86,.9)); border: 2px solid #7f9fe0; color: #f2f6ff; font: inherit; }
.mgr .portrait { grid-row: 1 / 5; width: 64px; border: 2px solid #cfe0ff; border-radius: 6px; }
.mgr-name { font-weight: 700; } .mgr-role { font-size: 12px; opacity: .75; } .mgr-status { font-size: 12px; color: #ffe58a; align-self: start; }
.mgr.busy .mgr-status { color: #ffb4a8; }
.mgr:not(:disabled):hover { border-color: #ffe58a; transform: translateY(-1px); }
.mgr:disabled { cursor: default; opacity: .85; }
.stamina { height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; align-self: end; }
.stamina i { display: block; height: 100%; background: linear-gradient(90deg, #4fd17a, #b6f27c); }
.mgr.busy .stamina i { background: linear-gradient(90deg, #e0a030, #ffe58a); }
.mgr-grid.compact .mgr { grid-template-columns: 1fr; grid-template-rows: auto; padding: 6px; gap: 2px; background: var(--panel); border-color: var(--line); color: inherit; }
.mgr-grid.compact .mgr .portrait { grid-row: auto; width: 100%; }
.mgr-grid.compact .mgr-status { color: var(--amber); }

/* The boardroom: the PixelLab room (art/ui/boardroom.png) behind the seats, and the PixelLab table as a border-image
   (its ends kept, the middle repeated, so it fits any width). The room's navy is the fallback colour. */
.boardroom { position: relative; display: flex; justify-content: center; gap: 14px; padding: 10px 10px 64px; margin-bottom: 12px;
  background: #0f1730 url(art/ui/boardroom.png) center 30% / cover no-repeat; image-rendering: pixelated; border: 2px solid #3a2a12; border-radius: 4px; }
.boardroom .table { position: absolute; left: 6%; right: 6%; bottom: 36px; height: 48px; border-style: solid; border-color: #5a3415; border-width: 0 30px;
  border-image: url(art/ui/boardroom_table.png) 0 40 fill / 0 30px round; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(10, 6, 2, .55)); }
.boardroom .chair { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 11px; color: #ffe58a; letter-spacing: .08em; text-transform: uppercase; z-index: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.boardroom .chair-face { width: 30px; border: 2px solid #ffe58a; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.seat { position: relative; z-index: 2; width: 92px; padding: 0; border: 3px solid #5f7fc0; border-radius: 8px; overflow: hidden; background: #1b2a4d; cursor: pointer; transition: transform .15s; }
.seat.on { border-color: #ffe58a; transform: translateY(-8px); box-shadow: 0 0 0 3px rgba(255,229,138,.35); }
.seat .mood { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; }
.mood.good { background: #4fd17a; } .mood.warn { background: #ffc94a; } .mood.bad { background: #ff5a5a; } .mood.calm { background: #8fb4ff; }

.makers { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-bottom: 12px; }
.makers button { padding: 6px 8px; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); background: linear-gradient(180deg, color-mix(in srgb, var(--mk) 70%, #0a1636), #0a1636); color: #fff; font: inherit; cursor: pointer; text-align: left; display: grid; }
.makers button span { font-size: 11px; opacity: .8; }
.makers button.on { border-color: #ffe58a; box-shadow: 0 0 0 2px rgba(255,229,138,.35); }
.makers button.blocked { filter: grayscale(.7); }
.stage { position: relative; border-radius: 14px; padding: 36px 52px 14px; overflow: hidden; border: 2px solid #9fbef5;
  background: linear-gradient(180deg, #7ab8ff 0%, #bfe0ff 55%, #e8f4ff 56%, #9fc4e8 100%); }
.stage.future .hero { filter: grayscale(1) brightness(1.2) opacity(.6); }
.stage .cap { position: absolute; top: 8px; left: 12px; padding: 3px 16px; border-radius: 999px; background: linear-gradient(180deg, #2a58c4, #14306f); border: 2px solid #cfe0ff; font-weight: 800; letter-spacing: .04em; color: #fff; }
.stage .mk-motto { position: absolute; top: 12px; right: 14px; font-size: 12px; font-style: italic; color: #14306f; }
.stage .hero svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 6px rgba(0,0,0,.25)); }
.stage .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border-radius: 10px; border: 2px solid #cfe0ff; background: rgba(20,48,111,.85); color: #fff; font-size: 30px; cursor: pointer; }
.stage .nav.prev { left: 6px; } .stage .nav.next { right: 6px; }
.stage .nav:hover { background: #2a58c4; }
.plates { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.plate { padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-weight: 700; font-size: 13px; background: linear-gradient(180deg, #ffe58a, #d9a628); color: #2a1a00; border: 1px solid #fff3c4; }
.plate.sst { background: linear-gradient(180deg, #ff9ad5, #c8327a); color: #fff; }
.stage .dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.stage .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,48,111,.35); }
.stage .dots i.on { background: #14306f; } .stage .dots i.f { outline: 1px dashed #14306f; background: none; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 14px 0 18px; }
.spec { display: grid; grid-template-columns: 82px 1fr 78px; gap: 8px; align-items: center; font-size: 13px; }
.spec .track { height: 10px; border-radius: 5px; background: rgba(0,0,0,.4); overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.spec .track i { display: block; height: 100%; background: linear-gradient(90deg, #4f8cff, #8fe3ff); }
.spec .track i.lo { background: linear-gradient(90deg, #e0a030, #ff7a5a); }
.spec .v { font-family: var(--mono); text-align: right; }
.order { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* ===== World-event bulletin ===== */
.modal-card.event-modal { width: min(820px, 100%); background: linear-gradient(180deg, #1b2a6e, #0a1636); border: 2px solid #9fbef5; color: #f2f6ff; }
.event-modal > h2 { color: #fff; }
.ev-flash { position: relative; aspect-ratio: 1000 / 380; background-size: cover; border-radius: 8px; border: 3px solid #cfe0ff; box-shadow: inset 0 0 0 2px #14306f; overflow: hidden; animation: ev-in .5s ease-out both; }
.ev-flash.bad { animation: ev-in .5s ease-out both, ev-throb 2.4s ease-in-out .5s infinite; }
@keyframes ev-in { from { filter: brightness(2.2) saturate(0); transform: scale(1.03); } to { filter: none; transform: none; } }
@keyframes ev-throb { 50% { filter: brightness(1.18); } }
.ev-frame { position: absolute; left: 50%; top: 50%; width: 46%; margin: 0; transform: translate(-50%, -50%); border: 4px solid #f2f6ff; outline: 2px solid #14306f; box-shadow: 0 10px 30px rgba(0,0,0,.55); background: #000; animation: ev-frame .6s .2s cubic-bezier(.2,1.4,.4,1) both; }
.ev-frame svg { width: 100%; height: auto; display: block; }
.ev-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(10,22,54,.78); color: #ffe86a; }
@keyframes ev-frame { from { transform: translate(-50%, -50%) scale(.4) rotate(-6deg); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.ev-pin { position: absolute; transform: translate(-50%, -50%); z-index: 1; animation: ev-pin .5s both; }
.ev-pin i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #ffe86a; border: 2px solid #1b1f2a; box-shadow: 0 0 0 0 rgba(255,232,106,.7); animation: ev-ping 1.4s ease-out infinite; }
.ev-pin b { position: absolute; left: 18px; top: -3px; font-size: 12px; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
@keyframes ev-ping { to { box-shadow: 0 0 0 18px rgba(255,232,106,0); } }
@keyframes ev-pin { from { transform: translate(-50%, -150%); opacity: 0; } }
.ev-caption { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: linear-gradient(180deg, #2a58c4, #14306f); border: 3px solid #cfe0ff; min-height: 64px; }
.ev-caption .dlg-text { margin: 0; font-size: 16px; line-height: 1.45; }
.ev-impact { margin-top: 6px; font-family: var(--mono); font-size: 13px; }
.ev-impact.down { color: #ffb3bd; } .ev-impact.up { color: #a8f5c0; }
@media (prefers-reduced-motion: reduce) { .ev-flash, .ev-frame, .ev-pin, .ev-pin i { animation: none !important; } }

/* ===== Aircraft shop, after the console original ===== */
.mk-map { position: relative; aspect-ratio: 1200 / 380; background-size: cover; border-radius: 10px; border: 3px solid #cfe0ff; box-shadow: inset 0 0 0 2px #14306f, 0 8px 22px rgba(0,0,0,.35); margin-bottom: 12px; overflow: hidden; }
.mk-pin { position: absolute; transform: translate(-50%, -78%); display: grid; justify-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; font: inherit; transition: transform .15s; }
.mk-pin:hover, .mk-pin:focus-visible { transform: translate(-50%, -82%) scale(1.12); z-index: 2; outline: none; }
.mk-pin .mk-plane { width: 64px; height: 32px; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,30,.5)); }
.mk-pin .mk-plane svg { width: 100%; height: 100%; display: block; }
.mk-pin .mk-sign { min-width: 34px; padding: 1px 8px 2px; margin-top: -4px; border-radius: 4px 4px 9px 9px; background: linear-gradient(180deg, #ff6a8e, #c81e4a 60%, #8a0f30); border: 2px solid #ffd0dc; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #ffe86a; text-shadow: 0 1px 0 #5a0820; box-shadow: 0 3px 0 #5a0820, 0 5px 8px rgba(0,0,30,.4); }
.mk-pin .mk-name { margin-top: 5px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: rgba(10,22,70,.72); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.mk-pin:hover .mk-name, .mk-pin.on .mk-name, .mk-pin:focus-visible .mk-name { opacity: 1; }
.mk-pin.on .mk-sign { background: linear-gradient(180deg, #fff3a0, #e6b422 60%, #9a6c00); border-color: #fff8cf; color: #3a2400; text-shadow: none; box-shadow: 0 3px 0 #6a4a00, 0 0 14px rgba(255,220,90,.7); }
.mk-pin.blocked .mk-sign { background: linear-gradient(180deg, #a3a7b3, #6c717e); border-color: #d6d9e0; color: #f0f0f0; }
.mk-pin.soon { opacity: .75; }
.hs-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 10px; border-radius: 8px; background: linear-gradient(180deg, #2a58c4, #14306f); border: 2px solid #cfe0ff; }
.hs-maker { font-family: 'Big Shoulders Display', 'Exo 2', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .03em; color: #fff; text-shadow: 0 2px 0 #0a1636; }
.hs-nation { font-size: 12px; color: #cfe0ff; margin-right: auto; }
.hs-card { position: relative; border-radius: 8px; overflow: hidden; border: 3px solid #cfe0ff; box-shadow: inset 0 0 0 2px #14306f; background: #5f6573; }
.hs-card svg { width: 100%; height: auto; display: block; }
.hs-card.future svg { filter: saturate(.4) brightness(1.08); }
.hs-card.blocked svg { filter: grayscale(.85); }
.hs-card .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 50px; border-radius: 8px; border: 2px solid #cfe0ff; background: rgba(20,48,111,.8); color: #fff; font-size: 26px; cursor: pointer; z-index: 1; }
.hs-card .nav.prev { left: 6px; } .hs-card .nav.next { right: 6px; }
.hs-card .nav:hover { background: #2a58c4; }
.hs-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; margin: 4px 0 6px; scrollbar-width: thin; }
.hs-strip button { flex: 0 0 auto; width: 104px; padding: 0 0 3px; border-radius: 6px; border: 2px solid rgba(207,224,255,.35); background: #5f6573; color: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; overflow: hidden; }
.hs-strip button svg { width: 100%; height: auto; display: block; }
.hs-strip button.on { border-color: #ffe86a; box-shadow: 0 0 0 2px rgba(255,232,106,.35); }
.hs-strip button.f { opacity: .6; border-style: dashed; }
@media (max-width: 720px) { .mk-pin .mk-plane { width: 44px; height: 22px; } .mk-pin .mk-sign { font-size: 11px; min-width: 26px; padding: 0 5px; } }
.showroom-btn { width: 100%; }
@media (max-width: 620px) {
  .dlg { grid-template-columns: 84px 1fr; } .dlg-bust { width: 84px; }
  .specs { grid-template-columns: 1fr; } .stage { padding: 36px 40px 12px; }
  .mgr-grid { grid-template-columns: 1fr; } .mgr-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .seat { width: 58px; } .boardroom { gap: 6px; }
}

/* HD pixel portraits */
.portrait.px { image-rendering: pixelated; image-rendering: crisp-edges; aspect-ratio: 1; object-fit: cover; }

/* HD pixel artwork (aircraft, businesses) */
.px-art { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.plane-thumb { display: inline-block; width: 96px; flex: none; }
.plane-thumb svg { width: 100%; height: auto; display: block; }

.manual-link { margin: 8px 0 0; } .manual-link a { color: var(--amber); font-weight: 600; text-decoration: none; } .manual-link a:hover { text-decoration: underline; }

/* Projected profit */
.proj-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; background: var(--panel); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.proj-line b { font-family: var(--mono); } .proj-line a { margin-left: auto; color: var(--amber); }
.proj-seg { margin: 8px 0; }
#proj-chart { height: 170px; }

/* Investments (Airline window), shares and takeovers (Airlines window), airport shares (Airport window) */
.fin-seg { margin: 4px 0 10px; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.job .payback { margin-top: 2px; }
.job-top .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.job-money a, .job-top a { color: var(--amber); }

/* Painted portraits from public/portraits/ */
.portrait.photo { aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; background: #1b2a4d; }
/* Pixel-art cast faces (transparent, bottom-aligned) on a soft studio backdrop. */
/* Cast faces: a 3:4 frame, pixel-crisp, with the whole cut showing. The tall cuts fill it; the small square cuts
   (regional casts) sit on the navy backdrop with room above the head, instead of "cover" cutting off both sides. */
.portrait.staff { aspect-ratio: 3 / 4; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; background: radial-gradient(90% 80% at 50% 35%, #4d6fae, #1b2a4d); }

.full-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--amber); }

.c-plane { width: 170px; margin: 2px auto 0; } .c-plane svg { width: 100%; height: auto; display: block; }

/* ===== Layout: bottom command bar (default) or side panel ===== */
.dock { display: block; }
.cmdbar, .side-head { display: none; }
body.layout-bottom .game { grid-template-rows: auto 1fr auto; }
body.layout-bottom .game-main { grid-template-columns: 1fr; position: relative; }
/* The panel becomes a floating window over the map, opened from the command bar or by clicking a city. */
body.layout-bottom .side {
  position: absolute; z-index: 30; top: 12px; right: 12px; width: min(470px, calc(100% - 24px)); max-height: calc(100% - 24px);
  grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(170, 196, 255, 0.35); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: winIn 0.18s ease-out;
}
body.layout-bottom .side.win-left { right: auto; left: 12px; }
body.layout-bottom:not(.side-open) .side { display: none; }
body.layout-bottom .side .tabs { display: none; }
body.layout-bottom .side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 16px;
  background: linear-gradient(180deg, rgba(74, 116, 212, 0.55), rgba(24, 44, 118, 0.55)); border-bottom: 1px solid rgba(170, 196, 255, 0.3); }
.side-head b { font: 800 13px/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.side-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(170, 196, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.side-x:hover { background: rgba(255, 255, 255, 0.18); }
@keyframes winIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
/* Command bar: big icons with labels, like the console originals. */
body.layout-bottom .dock { display: flex; align-items: stretch; background: linear-gradient(180deg, rgba(14, 24, 76, 0.97), rgba(6, 10, 40, 0.98)); border-top: 1px solid rgba(170, 196, 255, 0.28); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3); }
body.layout-bottom .cmdbar { display: flex; flex: 1; gap: 2px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
.cmd { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 66px; padding: 7px 8px 6px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.cmd svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.cmd span { font: 700 10px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.cmd:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.cmd.on { color: var(--amber); border-color: rgba(255, 216, 74, 0.45); background: linear-gradient(180deg, rgba(255, 216, 74, 0.16), rgba(255, 216, 74, 0.04)); }
.cmd .badge { position: absolute; top: 5px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #0b1140; }
body.layout-bottom .turnbar { flex: none; border-top: 0; border-left: 1px solid rgba(170, 196, 255, 0.2); background: transparent; }
body.layout-bottom #btn-board, body.layout-bottom #btn-menu { display: none; } /* they live in the command bar */
@media (max-width: 960px) {
  body.layout-bottom .dock { flex-direction: column; }
  body.layout-bottom .turnbar { border-left: 0; border-top: 1px solid rgba(170, 196, 255, 0.2); }
  body.layout-bottom .side { left: 8px; right: 8px; width: auto; top: 8px; max-height: calc(100% - 16px); }
  body.layout-bottom .game-main { min-height: 60vh; }
  body.layout-bottom .map-wrap { height: 60vh; }
  body.layout-bottom.side-open .map-banner { display: none; } /* the open window covers the map anyway */
  .cmd { min-width: 54px; }
}

/* Airlines at a city */
.here { border: 1px solid rgba(170, 196, 255, 0.2); border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: rgba(255, 255, 255, 0.04); }
.here.mine { border-color: rgba(255, 216, 74, 0.45); }
.here-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.here-head .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.here-meta { margin-left: auto; font: 13px var(--mono); color: var(--muted); }
.here-routes { margin-top: 6px; font-size: 13px; }
.here-routes small { color: var(--muted); }
.here-biz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.here-biz .owner { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 12px; }
.here-biz .ico svg { width: 14px; height: 14px; }

/* Market share by region */
.share-row { margin: 8px 0; }
.share-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.share-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(170, 196, 255, 0.2); margin-top: 3px; }
.share-bar i { display: block; height: 100%; }
.share-bar i.me { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* ---------- Pixel skin (the concept boards; see the pixel bible) ----------
   Navy windows with gold frames and steel inner lines, title bars with a gold tab, blue buttons,
   a pixel face for titles and labels. Layered over the aero theme, which keeps the layout. */
body.aero {
  --ink: #00112e;
  --deep: #011d4b;
  --panel: rgba(2, 45, 102, 0.55);
  --panel-2: rgba(0, 81, 213, 0.22);
  --line: rgba(129, 156, 194, 0.38);
  --text: #f4fbff;
  --muted: #b7c6de;
  --amber: #e5b436;
  --amber-dim: #9c7c21;
  --good: #16b13b;
  --bad: #ff5a3c;
  --px-gold: #e5b436;
  --px-gold-dk: #9c7c21;
  --px-blue: #0051d5;
  --px-blue-hi: #2b83e5;
  --px-steel: #819cc2;
  --glass: linear-gradient(180deg, #022d66 0%, #011d4b 100%);
  --px-frame: inset 0 0 0 2px #00163c, inset 0 0 0 3px rgba(129, 156, 194, 0.45), 0 8px 24px rgba(0, 0, 0, 0.45);
  --display: 'DotGothic16', 'MS Gothic', 'Segoe UI', sans-serif;
  --logo: 'Exo 2', 'Segoe UI', sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #06306f 0%, transparent 60%), linear-gradient(180deg, #011d4b 0%, #00112e 70%) fixed;
}
body.aero .card, body.aero .modal-card, body.aero .map-banner, body.aero .map-tip, body.aero .legend {
  background: var(--glass); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--px-frame); backdrop-filter: none;
}
body.aero .side { background: var(--glass); border-left: 3px solid var(--px-gold); }
body.aero.layout-bottom .side { border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--px-frame); }
body.aero .side-head, body.aero.layout-bottom .side-head { background: linear-gradient(180deg, #0b3b86, #022d66); border-bottom: 2px solid var(--px-gold-dk); }
body.aero .side-head b, body.aero .card h2, body.aero .p-title h2, body.aero .modal-card > h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; text-shadow: 0 2px 0 #000c24; }
body.aero .side-head b::before, body.aero .modal-card > h2::before { content: ''; display: inline-block; width: 10px; height: 12px; margin-right: 10px; background: var(--px-gold); box-shadow: inset 0 -3px 0 var(--px-gold-dk); vertical-align: -1px; }
body.aero .modal-card > h2 { margin: -24px -24px 0; padding: 10px 24px; background: linear-gradient(180deg, #0b3b86, #022d66); border-bottom: 2px solid var(--px-gold-dk); font-size: 22px; }
body.aero .card h3, body.aero .p-sec > h3, body.aero .tbl th, body.aero .stat .k, body.aero .flap .k, body.aero .eyebrow, body.aero .c-kicker, body.aero .tag, body.aero .legend b, body.aero .tabs button, body.aero .cmd span {
  font-family: var(--display); font-weight: 400;
}
body.aero .hud, body.aero .turnbar { background: linear-gradient(180deg, #022d66, #011d4b); backdrop-filter: none; }
body.aero .hud { box-shadow: 0 3px 0 var(--px-gold), 0 4px 0 var(--px-gold-dk), 0 8px 24px rgba(0, 0, 0, 0.35); }
body.aero .flap { background: #000c24; border: 2px solid var(--px-steel); border-radius: 3px; box-shadow: inset 0 0 0 1px #00163c; }
body.aero .flap .v { color: var(--px-gold); text-shadow: 0 0 6px rgba(229, 180, 54, 0.35); }
body.aero.layout-bottom .dock { background: linear-gradient(180deg, #022d66, #011d4b); border-top: 3px solid var(--px-gold); box-shadow: 0 -1px 0 var(--px-gold-dk), 0 -6px 18px rgba(0, 0, 0, 0.3); }
body.aero .cmd.on { color: var(--px-gold); border-color: var(--px-gold); background: rgba(0, 81, 213, 0.35); }
/* Buttons: blue tiles with a light top edge; gold frame on hover; primary is the gold one. */
body.aero .btn { border-radius: 4px; border: 2px solid #001a4a; background: var(--px-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 0 #000c24; color: #f4fbff; }
body.aero .btn:hover { background: var(--px-blue); border-color: var(--px-gold); }
body.aero .btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25); }
body.aero .btn:disabled { background: #4b5a6f; border-color: #2c3647; box-shadow: none; }
body.aero .btn.ghost { background: rgba(0, 81, 213, 0.18); border-color: rgba(129, 156, 194, 0.5); }
body.aero .btn.primary { background: linear-gradient(180deg, #ffd96a, var(--px-gold)); border-color: var(--px-gold-dk); color: #1a1000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #000c24; }
body.aero .btn.danger { background: rgba(225, 17, 6, 0.15); border-color: #e11106; color: #ffb4a8; }
body.aero input, body.aero select { background: #000c24; border: 2px solid rgba(129, 156, 194, 0.5); border-radius: 3px; box-shadow: none; }
body.aero input:focus, body.aero select:focus { border-color: var(--px-gold); outline: none; }
body.aero .tabs button.on { color: var(--px-gold); border-bottom-color: var(--px-gold); text-shadow: none; }
body.aero .stat, body.aero .route, body.aero .plane, body.aero .biz, body.aero .estimate, body.aero .room-list li, body.aero .team-row, body.aero .owner { background: rgba(0, 12, 36, 0.55); border: 1px solid rgba(129, 156, 194, 0.3); border-radius: 4px; }
body.aero .tbl th { color: var(--px-gold); background: rgba(0, 81, 213, 0.18); border-bottom: 2px solid var(--px-gold-dk); }
body.aero .seg button { border-radius: 4px; border: 2px solid #001a4a; background: rgba(0, 81, 213, 0.3); }
body.aero .seg button.on { background: linear-gradient(180deg, #ffd96a, var(--px-gold)); border-color: var(--px-gold-dk); color: #1a1000; }
body.aero .toast { background: var(--glass); border: 3px solid var(--px-gold); border-radius: 6px; backdrop-filter: none; }
body.aero .toast:not(.info) { border-color: #e11106; }
/* Dialogue: portrait in a gold frame, text box with a speech notch and a gold nameplate. */
body.aero .dlg-bust { border: 3px solid var(--px-gold); border-radius: 4px; background: #011d4b; }
body.aero .dlg.good .dlg-bust { border-color: #16b13b; } body.aero .dlg.bad .dlg-bust { border-color: #e11106; } body.aero .dlg.warn .dlg-bust { border-color: #eba11b; } body.aero .dlg.sad .dlg-bust { border-color: var(--px-steel); }
body.aero .dlg-box { border: 3px solid var(--px-gold); border-radius: 4px; background: var(--glass); box-shadow: var(--px-frame); }
body.aero .dlg-name { border-radius: 3px; background: linear-gradient(180deg, #ffd96a, var(--px-gold)); border: 2px solid var(--px-gold-dk); font-family: var(--display); font-weight: 400; }
body.aero .modal-card.people-modal, body.aero .modal-card.event-modal { background: var(--glass); border: 3px solid var(--px-gold); }
body.aero .mgr .portrait, body.aero .seat { border-color: var(--px-steel); border-radius: 4px; }
body.aero .seat.on, body.aero .mgr:not(:disabled):hover { border-color: var(--px-gold); }

/* ---------- Chairman's desk ---------- */
.desk-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.desk-opts .btn { display: grid; justify-items: start; gap: 2px; text-align: left; padding: 8px 12px; }
.desk-opts .btn small { font-weight: 400; font-size: 12px; opacity: .85; }
.desk-log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.desk-log b { color: var(--text); margin-right: 6px; }
.job { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin: 8px 0; background: rgba(0, 12, 36, 0.45); display: grid; gap: 4px; }
.job.mine { border-color: var(--good); }
.job-top { display: flex; align-items: center; gap: 8px; }
.job-top .tag { margin-left: auto; }
.era-pic { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 5 / 2; margin-bottom: 2px; border: 1px solid var(--line); border-radius: 3px; image-rendering: pixelated; image-rendering: crisp-edges; }
.era-pic[hidden] { display: none; }
.job-ico { font-size: 18px; line-height: 1; }
.job-route { font-size: 14px; }
.job-route a { color: var(--amber); }
.job-money { font-size: 13px; color: var(--muted); }
.job-money b { color: var(--text); }
.job .btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Special contracts: olive drab for the military, a dashed shadowy card for the black market. */
.contract-text { font-size: 13px; line-height: 1.45; }
.contract-risk { font-size: 12px; color: var(--amber); }
.contract.mil { border-color: #7d8f4e; background: linear-gradient(180deg, rgba(74, 92, 40, 0.28), rgba(0, 12, 36, 0.45)); }
.contract.mil .job-top b { color: #c5d68a; letter-spacing: .03em; text-transform: uppercase; font-size: 13px; }
.contract.mil.war { border-color: #b8743a; background: linear-gradient(180deg, rgba(120, 62, 22, 0.3), rgba(0, 12, 36, 0.45)); }
.contract.mil.war .job-top b { color: #f0b27a; }
.contract.shady { border: 1px dashed #8a6bb8; background: repeating-linear-gradient(135deg, rgba(20, 8, 32, 0.6) 0 10px, rgba(28, 12, 44, 0.6) 10px 20px); }
.contract.shady .job-top b { color: #c9b2f0; font-style: italic; }
.contract.shady .contract-risk { color: var(--bad); }
.contract.mine.mil, .contract.mine.shady { border-style: solid; border-width: 1px 1px 1px 4px; }
.contract-cover { font-size: 12px; color: var(--good); }
.contract.shady.lane-drugs { border-color: #c0506a; }
.contract.shady.lane-arms { border-color: #b88a3a; }
.contract.shady.lane-east { border-color: #5a8fd0; }
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.awards li { display: grid; grid-template-columns: 22px 1fr; gap: 0 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; opacity: .55; }
.awards li.won { opacity: 1; border-color: var(--amber); background: rgba(229, 180, 54, 0.1); }
.awards .medal { grid-row: 1 / 3; color: var(--amber); font-size: 18px; line-height: 1.2; }
.awards b { font-size: 13px; }
.awards small { font-size: 12px; color: var(--muted); }

/* ---------- The host ---------- */
/* Map card: her face and what she's announcing, top centre over the map. */
.map-banner { padding: 0; width: min(560px, calc(100% - 32px)); text-align: left; color: var(--text); font-weight: 400; }
.host-card { display: grid; grid-template-columns: 76px 1fr; align-items: stretch; min-height: 0; }
.host-card .host-face { width: 76px; border: 0; border-right: 3px solid var(--amber); border-radius: 3px 0 0 3px; }
.host-card .dlg-box { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 0; padding: 8px 12px 10px 14px; }
.host-card .dlg-name { position: static; display: inline-flex; margin-bottom: 4px; }
.host-card .dlg-text { margin: 0; font-size: 14px; min-height: 0; }
/* In windows: her full-body pose beside a speech box. */
.host-say { display: grid; grid-template-columns: 150px 1fr; align-items: end; gap: 0; }
.host-pose { width: 150px; height: auto; max-height: 330px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); position: relative; z-index: 2; }
.host-say .dlg { display: block; min-height: 0; }
.host-say .dlg-box { margin-left: -12px; margin-bottom: 18px; min-height: 120px; padding-top: 22px; }
.host-say .dlg-text { font-size: 16px; }
.modal-card.host-modal { width: min(680px, 100%); }
/* World news: her face beside the bulletin text. */
.host-news { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: start; min-height: 0; }
.host-news .host-face { width: 88px; border: 3px solid var(--amber); border-radius: 4px; }
.host-news.warn .host-face { border-color: #e11106; }
.host-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); font-family: var(--display); }
@media (max-width: 560px) {
  .host-say { grid-template-columns: 96px 1fr; }
  .host-pose { width: 96px; }
  .host-card { grid-template-columns: 58px 1fr; }
  .host-card .host-face { width: 58px; }
  .host-news { grid-template-columns: 64px 1fr; }
  .host-news .host-face { width: 64px; }
}

.seat-btns { display: flex; gap: 6px; flex: none; }

/* ---------- Business portfolio ---------- */
.portfolio .pf-main { display: grid; gap: 4px; min-width: 0; flex: 1; }
.pf-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spark rect { fill: var(--good); }
.pf-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.pf-nums b { color: var(--text); font-family: var(--mono); font-weight: 400; }
.payback { position: relative; height: 16px; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 12, 36, .6); overflow: hidden; }
.payback i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #0f7a2b, var(--good)); opacity: .55; }
.payback span { position: relative; display: block; font-size: 11px; line-height: 14px; padding-left: 6px; color: var(--text); }
.portfolio .btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ---------- Joy's tour and Ask Joy ---------- */
.tour-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tour-n { font: 12px var(--display); color: var(--amber); margin-right: auto; }
.joy-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.joy-topics .btn.on { border-color: var(--amber); }
.cmd-joy img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--amber); }
/* Joy points at the control she is talking about. */
.joy-point { outline: 3px solid var(--amber); outline-offset: 3px; animation: joyPulse 0.8s ease-in-out 3; }
@keyframes joyPulse { 50% { outline-color: transparent; } }

/* With a window open on the right, Joy's card moves to the left so both stay readable. */
body.layout-bottom.side-open:not(.win-left-open) .map-banner { left: 12px; transform: none; width: min(460px, calc(100% - 510px)); min-width: 260px; }

/* ---------- PixelLab UI kit (art/ui, generated from the blue concept kit) ---------- */
/* Game windows: the pixel window as a 9-slice frame. The frame image reaches into the padding,
   so the title sits in its bar, beside the gold icon slot, while the content still scrolls. */
body.aero .modal-card, body.aero .modal-card.people-modal, body.aero .modal-card.event-modal {
  position: relative; border: 22px solid transparent; border-radius: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border-image: url(art/ui/window.png) 78 22 22 78 fill / 78px 22px 22px 78px stretch;
  background: none; padding: 0 8px 8px; image-rendering: pixelated;
}
body.aero .modal-card > h2 {
  margin: -6px 0 6px 50px; padding: 0 8px; height: 44px; line-height: 44px; background: none; border: 0; font-size: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.aero .modal-card > h2::before { display: none; }/* Side and pop-up windows, and lobby cards: the riveted panel. */
body.aero .side, body.aero.layout-bottom .side, body.aero .card {
  border: 16px solid transparent; border-image: url(art/ui/panel.png) 22 fill / 22px stretch; border-radius: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); background: none;
}
body.aero.layout-bottom .side { overflow: visible; }
body.aero .side-head { background: none; border-bottom: 2px solid rgba(229, 180, 54, 0.45); }
/* Map zoom buttons on the round pixel button. */
body.aero .map-tools .btn.icon { border: 0; background: url(art/ui/round.png) center / contain no-repeat; box-shadow: none; width: 42px; height: 42px; color: #f4fbff; text-shadow: 0 1px 0 #000c24; font-weight: 800; }
body.aero .map-tools .btn.icon:hover { filter: brightness(1.2); }

/* ---------- Start screen (lobby), after the Game Start UI concept ---------- */
body.aero #screen-lobby { background: #0a1846 url(art/ui/lobby_bg.jpg) center top / cover no-repeat fixed; min-height: 100%; }
body.aero .lobby-wrap { max-width: 1100px; padding-top: 22px; }
body.aero .logo.logo-img { background: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); margin: 0; line-height: 0; }
.logo-img img { width: min(480px, 100%); height: auto; image-rendering: pixelated; }
body.aero .board-row span { font: 15px/1 var(--display); background: #0b2a6e; border: 2px solid #2b83e5; border-radius: 4px; color: #ffd84a; padding: 6px 12px; letter-spacing: .1em; }
body.aero .tagline { color: #e8eeff; text-shadow: 0 1px 2px #000c24; font-family: var(--display); font-size: 15px; line-height: 1.6; max-width: 62ch; }
body.aero .manual-link a { color: #ffd84a; font-family: var(--display); }
/* Desktop app: Quit in the main menu's top-right corner. */
.quit-app { position: fixed; top: 16px; right: 16px; z-index: 20; }
body.aero .lobby-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.lobby-side { display: grid; gap: 16px; min-width: 0; }
body.aero .card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -6px 8px; padding: 8px 12px;
  background: linear-gradient(180deg, #0d47b8, #062a7a); border-bottom: 2px solid #2b83e5; font: 22px/1.1 var(--display) !important; letter-spacing: .08em !important; text-transform: uppercase; color: #f4fbff; }
.head-ico { flex: none; width: auto; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000c24); }
body.aero .lobby-grid .card { gap: 10px; }
body.aero .room-list li { background: rgba(0, 20, 70, .6); border: 2px solid #1d4fb0; border-radius: 4px; }
body.aero .conn { color: #c8d6ff; font-family: var(--display); }
body.aero .conn::before { content: ''; display: inline-block; width: 10px; height: 10px; background: #16b13b; margin-right: 8px; vertical-align: -1px; }
@media (max-width: 860px) { body.aero .lobby-grid { grid-template-columns: 1fr; } }
/* On a phone, "Your airlines" (Rejoin) comes first instead of 1,500px down, under the whole new-room form. */
@media (max-width: 860px) { body.aero .lobby-side { display: contents; } body.aero #my-seats { order: -1; } }
/* A checkbox sharing a row with a select sits level with the select, not up by its label. */
.row2 > label.check { align-self: end; min-height: 41px; }
/* Table buttons ("Fly it") and tags ("talks ~10 mo") stay on one line instead of breaking word by word. */
.tbl .btn, .tbl .tag { white-space: nowrap; }
/* A "warn" mood on a dialogue (grave news, refusals) only recolours the portrait frame: the generic .warn
   utility (red 13px text) made Joy's bulletins and refusals small red text on blue, hard to read. */
.dlg.warn { color: inherit; font-size: inherit; }
/* While a director or Joy speaks from the bottom-left corner, the route legend underneath steps aside
   (its top edge used to poke out above the speech box). */
.map-wrap > .legend { transition: opacity .2s; }
.map-wrap:has(> .advisor:not([hidden])) > .legend { opacity: 0; pointer-events: none; }
/* With a window open, notices drop in at the top so they never sit on the window's buttons. */
body:has(#modal:not([hidden])) .toast { bottom: auto; top: 12px; }
/* Room-list buttons ("Drop in", "Rejoin") stay on one line. */
.room-list .btn { white-space: nowrap; flex: none; }

/* ---------- In-game HUD redesign (art/concept/hud redesign.webp) ---------- */
/* One tile style for everything on the HUD: navy-to-blue glass in a gold frame with a dark inner rim. */
body.aero {
  --tile-bg: linear-gradient(180deg, #0d3fa8 0%, #082c82 55%, #062270 100%);
  --tile-frame: 0 0 0 2px #00163c inset, 0 0 0 1px #4f8cf0 inset;
}
body.aero .hud { background: linear-gradient(180deg, #051a52, #031238); gap: 8px; padding: 8px 10px; box-shadow: 0 3px 0 var(--px-gold-dk), 0 6px 18px rgba(0, 0, 0, .45); }
body.aero .hud-brand { background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); padding: 8px 18px 8px 12px; font: 28px/1 var(--display); letter-spacing: .06em; color: #f4fbff; text-shadow: 0 2px 0 #000c24; min-height: 64px; }
body.aero .hud-brand .swatch { width: 26px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 2px #000c24, inset 0 2px 0 rgba(255,255,255,.4); }
body.aero .hud-stats { gap: 8px; justify-content: flex-start; }
body.aero .flap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 64px;
  background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); padding: 4px 10px 6px 8px; }
body.aero .flap .ico { grid-row: 1 / 3; width: 34px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000c24); }
body.aero .flap .k { font: 15px/1 var(--display); color: #e8eeff; letter-spacing: .1em; }
body.aero .flap .v { font: 26px/1.05 var(--mono); color: #ffd84a; text-shadow: 0 0 8px rgba(255, 216, 74, .35); }
body.aero .flap .v.neg { color: #ffd84a; }
body.aero .flap .v .fc { background: #041640; }
/* Command bar: square gold-framed tiles, a pixel icon over a pixel label. */
body.aero.layout-bottom .dock { background: linear-gradient(180deg, #051a52, #031238); border-top: 3px solid var(--px-gold); }
body.aero .cmdbar { gap: 6px !important; padding: 8px !important; }
body.aero .cmd { min-width: 76px; min-height: 64px; padding: 6px 6px 5px; gap: 3px; background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); color: #f4fbff; }
body.aero .cmd .ico { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000c24); }
body.aero .cmd svg { width: 28px; height: 28px; color: #cfe3ff; }
body.aero .cmd span { font: 13px/1 var(--display); letter-spacing: .08em; color: #f4fbff; }
body.aero .cmd:hover { filter: brightness(1.15); color: #fff; background: var(--tile-bg); }
body.aero .cmd.on { border-color: #fff3b0; box-shadow: var(--tile-frame), 0 0 12px rgba(255, 216, 74, .55); background: var(--tile-bg); }
body.aero .cmd .badge { top: 3px; right: 6px; width: 12px; height: 12px; box-shadow: 0 0 0 2px #fff; }
body.aero .cmd-joy img { width: 30px; height: 30px; border-width: 2px; }
/* Turn info box with the info icon. */
body.aero.layout-bottom .turnbar { margin: 8px; padding: 8px 14px; background: var(--tile-bg); border: 2px solid #4f8cf0; border-radius: 6px; box-shadow: var(--tile-frame); gap: 10px; }
.turn-ico { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
body.aero .turn-info { font-family: var(--display); color: #e8eeff; }
/* Legend and zoom buttons as gold-framed tiles. */
body.aero .legend { background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); padding: 10px 14px; font: 14px/1.5 var(--display); }
body.aero .legend b { font-size: 15px; color: #ffd84a; }
body.aero .map-tools .btn.icon { width: 46px; height: 46px; background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); font: 28px/1 var(--display); color: #f4fbff; }
/* The Joy card in the redesign has a gold frame and a gold nameplate, as before. */
body.aero .map-banner { border: 3px solid var(--px-gold); border-radius: 6px; }
/* Fit the redesign: stats on one row, every command tile visible, the turn box compact. */
body.aero .hud { flex-wrap: nowrap; }
body.aero .hud-stats { flex-wrap: nowrap; flex: 1; min-width: 0; }
body.aero .flap { flex: 1 1 0; min-width: 0; }
body.aero .flap .v { font-size: 22px; overflow: hidden; }
body.aero .hud-brand { flex: none; max-width: 24%; overflow: hidden; text-overflow: ellipsis; font-size: 24px; }
body.aero .cmd { min-width: 0; flex: 1 1 0; max-width: 92px; }
body.aero.layout-bottom .cmdbar { flex: 1 1 auto; min-width: 0; }
body.aero.layout-bottom .turnbar { flex: 0 1 330px; flex-wrap: wrap; row-gap: 6px; }
body.aero.layout-bottom .turnbar .turn-info { flex: 1 1 200px; font-size: 13px; }
body.aero.layout-bottom .turnbar select, body.aero.layout-bottom .turnbar .btn { font-size: 12px; padding: 4px 8px; }
@media (max-width: 1200px) { body.aero .flap .ico { width: 26px; } body.aero .flap .k { font-size: 12px; } body.aero .flap .v { font-size: 18px; } body.aero .flap .v .fc { padding: 1px 1px 0; } /* "$140.8M" no longer loses its M */ }
/* Command labels never spill past their tile: on narrower screens the tiles get tighter padding and type. */
body.aero .cmd span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
/* When the turn box wraps to more lines, the tiles keep their square shape instead of stretching tall. */
body.aero.layout-bottom .cmdbar { align-items: center; }
@media (max-width: 1320px) {
  body.aero .cmd { padding: 6px 2px 5px; }
  body.aero .cmd span { font-size: 12px; letter-spacing: .02em; }
}

body.aero .flap.date-flap { flex-grow: 1.45; }
body.aero .flap .v.flaps { gap: 1px; }

/* Tablets in landscape (iPad 1024-1180 wide): one-row HUD and command bar still, but the stat icons go so the
   figures fit ("$140.8M" keeps its M), and the turn box gives up width so every command label fits its tile. */
@media (min-width: 961px) and (max-width: 1180px) {
  body.aero .flap .ico { display: none; }
  /* Label above figure (with the icon gone they would share one row and squeeze the figure). */
  body.aero .flap { padding-left: 8px; padding-right: 8px; grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  body.aero .flap .k { font-size: 11px; white-space: nowrap; overflow: hidden; }
  body.aero .flap .v { font-size: 17px; }
  body.aero .hud-brand { font-size: 18px; max-width: 15%; }
  body.aero.layout-bottom .turnbar { flex-basis: 230px; column-gap: 6px; padding: 6px 10px; }
  body.aero.layout-bottom .turnbar .turn-info { font-size: 12px; flex-basis: 100%; }
  body.aero.layout-bottom .turnbar .turn-ico { display: none; }
  /* The speed picker and Pause share one row, so the dock stays about as tall as the command tiles. */
  body.aero.layout-bottom .turnbar select { flex: 1 1 0; min-width: 0; max-width: 140px; }
  body.aero .cmd { padding: 6px 1px 5px; }
  body.aero .cmd span { font-size: 11px; letter-spacing: 0; }
  /* Alliance games add a 14th tile and a longer HUD figure ("$41.9M #1"). */
  body.aero .cmd[data-cmd=alliance] span { font-size: 10px; letter-spacing: -0.03em; }
  body.aero .ally-flap .v { font-size: 13px; }
}

/* Phones and narrow windows. The one-row HUD and the fitted command bar above are desktop rules; here the HUD
   wraps (airline name on top, figures two or three to a row), the command bar scrolls sideways with full-size
   tiles, and the turn box takes only the height it needs (its 330px desktop width became 330px of height). */
@media (max-width: 960px) {
  body.aero .hud { flex-wrap: wrap; }
  body.aero .hud-brand { flex: 1 1 auto; max-width: none; min-height: 0; padding: 6px 12px; font-size: 20px; }
  body.aero .hud-stats { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
  body.aero .flap, body.aero .flap.date-flap { flex: 1 1 30%; min-height: 0; }
  body.aero .cmd { flex: none; min-width: 64px; max-width: none; padding: 6px 4px 5px; }
  body.aero.layout-bottom .turnbar { flex: none; position: static; }
  /* The whole dock sticks to the bottom, not just the turn box (which slid over the command tiles). */
  body.aero.layout-bottom .dock { position: sticky; bottom: 0; z-index: 7; }
  /* A pop-up window scrolls inside its frame (the side-panel rule "overflow: visible" let it spill over the dock). */
  body.layout-bottom .panel { overflow-y: auto; min-height: 0; }
  /* The map takes the height left between the HUD and the dock, so nothing sits under the sticky dock.
     --chrome-h is the HUD + dock height, measured by app.js (fitChrome); 330px is the fallback. */
  body.aero.layout-bottom .map-wrap { height: max(300px, calc(100dvh - var(--chrome-h, 330px))); }
  body.aero.layout-bottom .game-main { min-height: 0; }
}
/* Tablets in portrait (iPad 768-834 wide): all 13 command tiles fit across without scrolling sideways. */
@media (min-width: 700px) and (max-width: 960px) {
  body.aero .cmd { flex: 1 1 0; min-width: 0; padding: 6px 1px 5px; }
  body.aero .cmd span { font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 480px) {
  body.aero .flap, body.aero .flap.date-flap { flex: 1 1 calc(50% - 4px); padding: 3px 7px 4px; }
  body.aero .flap .ico { width: 22px; }
  body.aero .flap .k { font-size: 11px; }
  body.aero .flap .v { font-size: 15px; }
  body.aero.layout-bottom .map-wrap { height: max(300px, calc(100dvh - var(--chrome-h, 405px))); }
}

/* PixelLab start-screen buttons (art/ui/btn_*.png, 9-sliced): blue by default, gold primary, navy ghost,
   red danger; the checkboxes use the same kit. Scoped to the lobby and the room screen. */
body.aero :is(#screen-lobby, #screen-room) .btn { border: 7px solid transparent; border-image: url(art/ui/btn_blue.png) 14 fill / 7px stretch; background: none; box-shadow: none; border-radius: 0; padding: 3px 12px; color: #f4fbff; text-shadow: 0 1px 0 #001a4a; image-rendering: pixelated; }
body.aero :is(#screen-lobby, #screen-room) .btn.small { padding: 0 8px; }
body.aero :is(#screen-lobby, #screen-room) .btn.primary { border-image-source: url(art/ui/btn_gold.png); color: #1a1000; text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6); }
body.aero :is(#screen-lobby, #screen-room) .btn.ghost { border-image-source: url(art/ui/btn_navy.png); }
body.aero :is(#screen-lobby, #screen-room) .btn.danger { border-image-source: url(art/ui/btn_red.png); color: #fff4f0; text-shadow: 0 1px 0 #4a0000; }
body.aero :is(#screen-lobby, #screen-room) .btn:hover { filter: brightness(1.12); border-color: transparent; }
body.aero :is(#screen-lobby, #screen-room) .btn:active { transform: translateY(1px); filter: brightness(0.92); }
body.aero :is(#screen-lobby, #screen-room) .btn:disabled { filter: grayscale(0.8) brightness(0.8); }
body.aero :is(#screen-lobby, #screen-room) .check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0 6px 0 0; flex: none; background: url(art/ui/btn_check.png) center / contain no-repeat; image-rendering: pixelated; cursor: pointer; vertical-align: middle; }
body.aero :is(#screen-lobby, #screen-room) .check input[type=checkbox]:checked { background-image: url(art/ui/btn_check_on.png); }
body.aero :is(#screen-lobby, #screen-room) .check input[type=checkbox]:focus-visible { outline: 2px solid var(--px-gold); outline-offset: 1px; }

/* City window: the PixelLab city scene as a header, with the name over it, and the city in this decade. */
.city-hero { margin: -4px -4px 10px; aspect-ratio: 400 / 224; /* no fixed min-height: in the panel grid it made the row shorter than the painting, so the decade card overlapped it */ background: #0a1e50 center / cover no-repeat; image-rendering: pixelated; border: 3px solid var(--px-gold, #f5c832); border-radius: 4px; box-shadow: inset 0 -70px 50px -30px rgba(0, 12, 40, 0.85); display: flex; align-items: flex-end; padding: 10px 12px; }
.city-hero .p-title { width: 100%; }
.city-hero .p-title h2 { text-shadow: 0 2px 0 #000c24, 0 0 8px #000c24; }
.city-decade { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--px-gold, #f5c832); background: rgba(0, 20, 70, 0.45); }
.city-decade b { display: block; font-family: var(--display); letter-spacing: 0.04em; color: var(--px-gold, #f5c832); margin-bottom: 3px; }
.city-decade b i { font-style: normal; opacity: 0.7; font-size: 0.85em; }
.city-decade p { margin: 0; line-height: 1.45; }

/* Business ownership: one owner per business per city, shown in the owner's colours. */
.biz-owner { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0; padding: 1px 7px; border: 1px solid var(--oc); border-radius: 3px; background: color-mix(in srgb, var(--oc) 22%, transparent); font-size: 12px; font-weight: 700; }
.biz-owner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oc); box-shadow: 0 0 0 1px #000c24; }
.list li.biz.taken { opacity: 0.85; }

/* Event paintings (art/events, PixelLab): bigger in the bulletin, period-toned in old newspapers. */
.ev-img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 160; object-fit: cover; image-rendering: pixelated; background: #0a1636; }
.ev-frame { width: 64%; }
.paper.broadsheet .np-photo .ev-img { filter: grayscale(1) sepia(0.25) contrast(1.15); }
.paper.tabloid .np-photo .ev-img { filter: saturate(0.85) contrast(1.05); }
/* Tall windows (showroom, reports) scroll their body, so the title bar and the buttons stay in the frame. */
body.aero .modal-card { overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; }
body.aero .modal-card:not(.event-modal) > #modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The bulletin window: keep its title in the bar and never scroll. */
body.aero .modal-card.event-modal { max-height: none; overflow: visible; }
/* The frame's gold slot beside the title holds an icon: news for bulletins, info elsewhere. */
body.aero .modal-card::before { content: ''; position: absolute; left: 6px; top: 3px; width: 30px; height: 30px; background: url(art/ui/icons/info.png) center / contain no-repeat; image-rendering: pixelated; pointer-events: none; z-index: 1; }
body.aero .modal-card.event-modal::before { background-image: url(art/ui/icons/cmd_news.png); }
/* The newspaper has no window frame, so no icon slot either (the icon floated over the masthead). */
body.aero .modal-card.paper-modal::before { display: none; }

/* War bulletins: the nations' flags across the top of the map, pixelated like the rest of the kit. */
.ev-flags { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: center; align-items: center; gap: 10px; z-index: 2; animation: ev-flags-in .5s .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ev-flags-in { from { opacity: 0; transform: translateY(-14px) scale(.8); } to { opacity: 1; transform: none; } }
.ev-flag { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ev-flag i { display: block; width: 54px; height: 36px; border: 2px solid #f2f6ff; outline: 2px solid #14306f; box-shadow: 0 4px 10px rgba(0,0,0,.5); background: #333; image-rendering: pixelated; }
.ev-flag i svg { display: block; width: 100%; height: 100%; }
.ev-flag b { font: 700 10px/1 var(--display, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 #000c24, 0 0 4px #000c24; }
.ev-vs { font: 800 16px/1 var(--display, sans-serif); color: #ffe86a; text-shadow: 0 2px 0 #000c24; }
.ev-flash:has(.ev-flags) .ev-frame { top: 58%; }

/* World news closes itself after 20 s: a thin gold bar runs down meanwhile. */
.ev-timer { height: 3px; margin: 8px 2px 0; background: rgba(255, 255, 255, 0.12); }
.ev-timer i { display: block; height: 100%; background: var(--px-gold, #f5c832); transform-origin: left; animation: ev-timer 20s linear both; }
@keyframes ev-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.host-news .dlg-text { white-space: pre-line; }

/* Joy's bulletin commentary: larger, easier to read. */
.host-news .dlg-text { font-size: 17px; line-height: 1.5; }
.host-news .host-label { font-size: 13px; }
.host-news .ev-impact { font-size: 15px; }
/* Fit the bulletin to short screens: the map band gives up height first, so the buttons always show. */
body.aero .modal-card.event-modal .ev-flash { aspect-ratio: auto; height: min(calc((min(820px, 100vw) - 60px) * 0.38), calc(100vh - 400px)); min-height: 170px; }
body.aero .modal-card.event-modal .ev-frame { width: auto; height: 74%; }
body.aero .modal-card.event-modal .ev-frame .ev-img { width: auto; height: 100%; }
body.aero .modal-card.event-modal .ev-flash:has(.ev-flags) .ev-frame { top: 60%; height: 66%; }

/* ---------- Showroom: the spec screen after the console original ----------
   Centred and spacious: big aircraft card on the left, a 2-column tech readout of icon cells on the right,
   the maker's line-up below, and the director with the cash readout at the bottom. Tabs switch to the plane buyer. */
body.aero .modal-card.people-modal.showroom-modal { width: min(1180px, 100%); max-height: 96vh; padding: 0 14px 12px; }
.showroom-modal #modal-body { display: grid; gap: 10px; align-content: start; padding: 4px 6px 2px; }
.showroom-modal .dlg { grid-template-columns: 96px 1fr; min-height: 96px; }
.showroom-modal .dlg-bust { width: 96px; }
.showroom-modal .dlg-box { min-height: 80px; }
.showroom-modal .dlg-text { font-size: 14px; }
.showroom-modal #modal-body > * { width: 100%; max-width: 1100px; margin-inline: auto; min-width: 0; }
.px-ico { display: block; width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000c24); }
/* Pixel glyphs inline in text and buttons (lock, pause, play, blocked): text height, on the baseline. */
.px-glyph { display: inline-block; height: 1.15em; width: auto; vertical-align: -.2em; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000c24); }
.hs-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hs-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 10px; font: 15px/1 var(--display); letter-spacing: .06em; color: #e8eeff; background: var(--tile-bg); border: 3px solid var(--px-gold-dk); border-radius: 6px; box-shadow: var(--tile-frame); cursor: pointer; }
.hs-tabs button .px-ico { width: 24px; height: 24px; }
.hs-tabs button:hover { filter: brightness(1.12); }
.hs-tabs button.on { border-color: var(--px-gold); color: #ffd84a; box-shadow: var(--tile-frame), 0 0 10px rgba(255, 216, 74, .45); }
.hs-count { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #e11106; color: #fff; font: 12px/18px var(--mono); text-align: center; }
/* PixelLab buttons (art/ui/btn_*.png) in the showroom, as on the start screen. */
body.aero .showroom-modal .btn { border: 7px solid transparent; border-image: url(art/ui/btn_blue.png) 14 fill / 7px stretch; background: none; box-shadow: none; border-radius: 0; padding: 4px 14px; color: #f4fbff; text-shadow: 0 1px 0 #001a4a; image-rendering: pixelated; }
body.aero .showroom-modal .btn.small { padding: 1px 9px; }
body.aero .showroom-modal .btn.primary { border-image-source: url(art/ui/btn_gold.png); color: #1a1000; text-shadow: 0 1px 0 rgba(255, 240, 180, .6); }
body.aero .showroom-modal .btn.ghost { border-image-source: url(art/ui/btn_navy.png); }
body.aero .showroom-modal .btn:hover { filter: brightness(1.12); border-color: transparent; }
body.aero .showroom-modal .btn:disabled { filter: grayscale(.8) brightness(.75); cursor: not-allowed; }
/* The makers' map, with every maker's name readable on its tag, and a legend below. */
.hs-map-wrap { display: grid; gap: 10px; }
.showroom-modal .mk-map { margin: 0; border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: inset 0 0 0 2px #00163c, 0 8px 22px rgba(0, 0, 0, .35); }
.mk-pin .mk-sign { font-family: var(--display); font-weight: 400; font-size: 15px; }
.mk-pin .mk-name { opacity: 1; margin-top: 4px; font: 11px/1.35 var(--display); padding: 0 6px; background: rgba(0, 12, 40, .85); border: 1px solid rgba(255, 232, 106, .55); color: #fff; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.mk-pin:hover, .mk-pin:focus-visible { z-index: 3; }
.mk-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.showroom-modal .mk-map { width: min(100%, calc(42vh * 1200 / 380)); margin-inline: auto; }
.mk-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; text-align: left; background: var(--tile-bg); border: 2px solid rgba(129, 156, 194, .5); border-radius: 4px; color: #f4fbff; cursor: pointer; font: inherit; min-width: 0; }
.mk-row .mk-sign { flex: none; min-width: 36px; text-align: center; padding: 2px 6px; border-radius: 3px 3px 8px 8px; background: linear-gradient(180deg, #ff6a8e, #c81e4a 60%, #8a0f30); border: 2px solid #ffd0dc; color: #ffe86a; font: 15px/1.1 var(--display); text-shadow: 0 1px 0 #5a0820; }
.mk-row-t { display: grid; min-width: 0; }
.mk-row-t b { font: 15px/1.25 var(--display); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row-t small { color: #b7c6de; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row:hover, .mk-row.on { border-color: var(--px-gold); }
.mk-row.on .mk-sign { background: linear-gradient(180deg, #fff3a0, #e6b422 60%, #9a6c00); border-color: #fff8cf; color: #3a2400; text-shadow: none; }
.mk-row.blocked { filter: grayscale(.75); }
.mk-row.soon { opacity: .75; }
/* The sales floor. */
.showroom-modal .hs-banner { margin-bottom: 0; padding: 6px 12px; background: linear-gradient(180deg, #0d47b8, #062a7a); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); }
.showroom-modal .hs-maker { font: 26px/1.1 var(--display); letter-spacing: .04em; }
.showroom-modal .hs-nation { font-size: 13px; }
.hs-units { flex: none; gap: 0; flex-wrap: nowrap; }
.hs-units button { flex: none; padding: 3px 10px; font: 13px/1.2 var(--display); }
.hs-spec { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 20px; padding: 14px 16px; background: var(--glass); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--px-frame); align-items: start; }
.hs-left { display: grid; gap: 12px; align-content: start; }
.showroom-modal .hs-card { border: 4px solid #cfd6e6; border-radius: 4px; box-shadow: inset 0 0 0 2px #3b404b, 0 6px 0 #000c24; }
.hs-blurb { margin: 0; padding: 6px 12px; border-left: 3px solid var(--px-gold); background: rgba(0, 20, 70, .45); font-size: 14px; line-height: 1.5; color: #dfe8ff; }
.hs-readout { display: grid; gap: 9px; align-content: start; min-width: 0; }
.showroom-modal .hs-title { margin: 0; font: 24px/1.15 var(--display); color: #ffd84a; text-shadow: 0 2px 0 #000c24; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 8px; }
.hs-own { margin-left: auto; color: #ffe58a; border-color: var(--px-gold-dk); font-family: var(--display); }
.ro-cell { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: center; padding: 5px 10px 5px 5px; background: rgba(0, 12, 36, .62); border: 2px solid rgba(129, 156, 194, .45); border-radius: 4px; min-width: 0; }
.ro-ico { grid-row: 1 / span 4; width: 42px; height: 42px; display: grid; place-items: center; background: var(--tile-bg); border: 2px solid var(--px-gold-dk); border-radius: 4px; box-shadow: var(--tile-frame); }
.ro-k { font: 12px/1.2 var(--display); color: #b7c6de; letter-spacing: .08em; text-transform: uppercase; }
.ro-v { font: 19px/1.12 var(--mono); font-weight: 400; color: #ffd84a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-sub { font-size: 11.5px; color: #b7c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-bar { display: block; height: 6px; margin: 2px 0 1px; background: rgba(255, 255, 255, .12); border-radius: 3px; overflow: hidden; }
.ro-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a5a, #ffd84a 50%, #6ff0a0); background-size: 220px 100%; }
.ro-stars { letter-spacing: 1px; }
.ro-stars i { font-style: normal; color: rgba(255, 255, 255, .18); }
.hs-order { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-order .stepper { width: 124px; }
.hs-order .btn { font-size: 15px; }
.hs-note { margin: 0; }
.showroom-modal .hs-strip { margin: 0; padding: 2px 2px 6px; }
.showroom-modal .hs-strip button { width: 104px; border-radius: 4px; border: 2px solid rgba(129, 156, 194, .5); font-family: var(--display); font-weight: 400; font-size: 12px; }
.showroom-modal .hs-strip button.on { border-color: var(--px-gold); box-shadow: 0 0 0 2px rgba(255, 216, 74, .35); }
/* The director's dialogue with the cash readout beside it. */
.hs-advisor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.hs-cash { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px; margin-bottom: 4px; background: var(--tile-bg); border: 3px solid var(--px-gold); border-radius: 6px; box-shadow: var(--tile-frame); }
.hs-cash img { grid-row: 1 / 3; width: 30px; image-rendering: pixelated; }
.hs-cash span { font: 14px/1 var(--display); letter-spacing: .14em; color: #e8eeff; }
.hs-cash b { font: 24px/1.1 var(--mono); font-weight: 400; color: #ffd84a; }
.hs-cash b.neg { color: #ff8a70; }
/* The plane buyer: used aircraft on the market. */
.hs-empty { margin: 0; text-align: center; padding: 40px 16px; border: 3px dashed rgba(129, 156, 194, .5); border-radius: 6px; color: #dfe8ff; font-family: var(--display); line-height: 1.6; }
.used-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.used-card { display: grid; gap: 6px; align-content: start; padding: 10px; background: var(--glass); border: 3px solid var(--px-gold-dk); border-radius: 6px; box-shadow: var(--px-frame); }
.used-art { background: linear-gradient(180deg, #868c99, #5f6573); border: 2px solid #3b404b; border-radius: 3px; }
.used-art svg { width: 100%; height: auto; display: block; }
.used-t b { font: 17px/1.2 var(--display); font-weight: 400; color: #fff; }
.used-t small { display: block; font-size: 12px; color: #b7c6de; }
.used-card.blocked { opacity: .7; }
.used-specs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #b7c6de; }
.used-specs span { display: inline-flex; align-items: center; gap: 4px; }
.used-specs .px-ico { width: 18px; height: 18px; }
.used-specs b { color: #f4fbff; font-family: var(--mono); font-weight: 400; }
.used-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.used-price b { font: 22px/1 var(--mono); font-weight: 400; color: #ffd84a; }
.used-price small { color: #9df0b9; font-size: 12px; }
.used-price small + small { color: #b7c6de; }
@media (max-width: 860px) { .hs-spec { grid-template-columns: 1fr; padding: 12px; gap: 14px; } }
@media (max-width: 560px) {
  body.aero .modal-card.people-modal.showroom-modal { padding: 0 2px 8px; }
  .showroom-modal #modal-body { gap: 10px; padding: 2px; }
  .hs-tabs button { font-size: 13px; padding: 5px 10px 5px 6px; }
  .showroom-modal .hs-maker { font-size: 20px; }
  .showroom-modal .hs-title { font-size: 19px; }
  .ro-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ro-cell { grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; padding: 4px 5px 4px 4px; }
  .ro-ico { width: 30px; height: 30px; border-width: 1px; }
  .ro-ico .px-ico { width: 20px; height: 20px; }
  .ro-v { font-size: 15px; }
  .hs-long, .hs-tabs .px-ico { display: none; }
  .hs-tabs { flex-wrap: nowrap; }
  .ro-k, .ro-sub { font-size: 10.5px; }
  .hs-advisor { grid-template-columns: 1fr; }
  .hs-cash { justify-self: end; }
  .mk-pin .mk-name { display: none; } /* the legend under the map names every maker */
  .mk-pin .mk-plane { width: 30px; height: 15px; }
  .mk-pin .mk-sign { font-size: 10px; min-width: 20px; padding: 0 3px; border-width: 1px; }
  .showroom-modal .dlg { grid-template-columns: 72px 1fr; min-height: 72px; }
  .showroom-modal .dlg-bust { width: 72px; }
  .showroom-modal .dlg-name { white-space: nowrap; }
  .showroom-modal .dlg-name span { display: none; }
  .mk-legend { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mk-row { padding: 5px 6px; gap: 6px; }
  .mk-row .mk-sign { min-width: 28px; font-size: 13px; }
  .mk-row-t b { font-size: 13px; white-space: normal; line-height: 1.1; }
  .used-grid { grid-template-columns: 1fr; }
}

/* ---------- Fleet window: idle aircraft up front, then the fleet by type and the orders ---------- */
.fleet-stats { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.fleet-stats .stat:last-child { grid-column: span 2; }
.fleet-stats .stat .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.aero .stat.alert { border-color: #e11106; background: rgba(225, 17, 6, .2); }
.stat.alert .v { color: #ffb4a8; }
.fleet-idle { margin-top: 10px; border: 3px solid var(--px-gold, #e5b436); border-radius: 6px; padding: 10px 12px !important;
  background: repeating-linear-gradient(135deg, rgba(229, 180, 54, .1) 0 12px, rgba(229, 180, 54, .04) 12px 24px), rgba(0, 12, 36, .55); box-shadow: 0 0 0 1px #00163c, 0 0 16px rgba(229, 180, 54, .25); }
body.aero .fleet-idle > h3 { display: flex; align-items: center; gap: 8px; color: #ffd84a; margin-top: 0; }
.idle-flag { font: 12px/1 var(--mono); padding: 3px 6px; background: #e11106; color: #fff; border-radius: 3px; letter-spacing: .1em; animation: idleBlink 1.6s steps(2) infinite; }
@keyframes idleBlink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .idle-flag { animation: none; } }
.idle-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0 4px; border-top: 1px dashed rgba(229, 180, 54, .35); }
.fleet-idle > .hint + .idle-row { border-top: 0; }
.idle-row .plane-thumb { width: 76px; }
.idle-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.idle-t b { font: 17px/1.2 var(--display); font-weight: 400; }
.idle-n { font: 20px/1 var(--mono); color: #ffd84a; }
.idle-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; }
.idle-row .btn-row { gap: 6px; }
.fleet-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ftype { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0, 12, 36, .55); border: 1px solid rgba(129, 156, 194, .3); border-radius: 4px; }
.ftype.has-idle { border-color: var(--px-gold, #e5b436); }
.ftype-art { padding: 0; border: 0; background: none; cursor: pointer; }
.ftype-art svg { width: 100%; height: auto; display: block; }
.ftype-art:hover { filter: brightness(1.15); }
.ftype-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ftype-t b { font: 15px/1.2 var(--display); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftype-n { font: 22px/1 var(--mono); color: #ffd84a; flex: none; }
.ftype-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.chip { font-size: 11.5px; padding: 1px 7px; border-radius: 3px; border: 1px solid rgba(129, 156, 194, .5); color: #dfe8ff; white-space: nowrap; }
.chip.fly { border-color: #16b13b; color: #9df0b9; }
.chip.idle { border-color: #e11106; background: rgba(225, 17, 6, .25); color: #ffd0c8; }
.chip.order { border-color: #2b83e5; color: #a8ccff; }
.chip.charter { border-color: #e5b436; color: #ffe58a; }
.chip.lease { border-style: dashed; }
.ftype-meta { font-size: 12px; color: var(--muted); }
.warn-i { color: #ffb4a8; }
.fleet-shop .btn { flex: 1 1 180px; }
/* The idle count on the Fleet tile and tab: a number, not just a dot. */
.badge.count { width: auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font: 11px/18px var(--mono); color: #fff; text-align: center; background: #e11106; }
body.aero .cmd .badge.count { top: 1px; right: 2px; width: auto; height: 18px; box-shadow: 0 0 0 2px #fff; }
.tabs .badge.count { margin-left: 5px; vertical-align: 1px; }

/* ---------- City window: route slots held here, yours against every airline's ---------- */
.slots-here { padding-top: 6px; }
.slots-you { font-size: 15px; }
.slots-you b { font: 19px/1 var(--mono); color: #ffd84a; }
.slots-share { font-size: 13px; color: var(--muted); }
.slots-share b { font-size: 15px; }
.slots-split { margin: 2px 0 0; font-size: 12px; }
.slots-bar { height: 14px; margin: 6px 0 8px; }
.slots-tbl { font-size: 13px; }
.slots-tbl td .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 1px #000c24; }
.slots-tbl td b { text-shadow: 0 1px 0 #000c24; }
.slots-tbl tr.me td { background: rgba(229, 180, 54, .1); }
.slots-tbl td.r { white-space: nowrap; font-family: var(--mono); }
.slots-tbl td.r b { color: #ffd84a; font-weight: 400; }
.slot-meter { display: inline-block; width: 46px; height: 6px; margin-right: 8px; vertical-align: middle; background: rgba(255, 255, 255, .12); border-radius: 3px; overflow: hidden; }
.slot-meter i { display: block; height: 100%; background: linear-gradient(90deg, #16b13b, #ffd84a); }
.slots-you .hint { display: inline-block; margin-top: 4px; font-size: 12px; }
.slot-mine { margin: 4px 0 6px; }
.slot-mine .field-row, .ally-give .field-row, .ally-ask { align-items: end; flex-wrap: wrap; }
.slot-need .num { font-family: var(--mono); font-size: 13px; }
.full-row .btn[disabled] { opacity: .75; }

/* ---------- Alliance window ---------- */
/* Alliance crests (art/ui/crests): beside alliance names in the window, standings and lobby; on the HUD flap as its icon. */
.crest { display: inline-block; height: 1.25em; width: auto; vertical-align: -.25em; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000c24); }
.p-title h2 .crest { height: 1.1em; vertical-align: -.15em; }
.team-row .crest { height: 26px; flex: none; }
.ally-flap .v { white-space: nowrap; }
.ally-tbl tr.me td, .tbl tr.me td { background: rgba(229, 180, 54, .1); }
.ally-help { border-left: 3px solid #4fd1c5; }
.ally-help .btn-row { flex-wrap: wrap; }
.ally-give { padding: 8px 0; border-top: 1px solid rgba(170, 196, 255, .18); }
.ally-give:first-of-type { border-top: 0; }
.ally-give input[type=number], .ally-ask input[type=number] { width: 84px; }
.ally-chat { max-height: 220px; overflow-y: auto; }



/* Map tip: event flags explain themselves above the city's line. */
#map-tip .flag-tip { margin: -2px 0 6px; padding: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); max-width: 300px; white-space: normal; }
#map-tip { max-width: 320px; }

/* Sound settings: a small speaker button (bottom-left, above the route legend) and its panel. */
.audio-btn { position: fixed; left: 12px; bottom: 12px; z-index: 60; width: 34px; height: 34px; border: 2px solid var(--px-gold, #f5c832); border-radius: 6px; background: #0a1e50; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 #000c24; }
.audio-btn:hover { filter: brightness(1.2); }
.audio-panel { position: fixed; left: 12px; bottom: 54px; z-index: 61; display: grid; gap: 6px; padding: 10px 12px; min-width: 190px; background: #0a1e50; border: 2px solid var(--px-gold, #f5c832); border-radius: 6px; color: #f2f6ff; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.audio-panel label { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 6px; }
.audio-panel label.check { grid-template-columns: auto 1fr; }
/* In a game: top right, just under the HUD (--hud-h from app.js fitChrome; the HUD wraps taller on tablets). */
body:has(#screen-game:not([hidden])) .audio-btn { bottom: auto; top: calc(var(--hud-h, 80px) + 12px); left: auto; right: 14px; }
body:has(#screen-game:not([hidden])) .audio-panel { bottom: auto; top: calc(var(--hud-h, 80px) + 52px); left: auto; right: 14px; }
/* Alliance games: a 14th command tile and a longer HUD figure ("$41.9M #1") at every width. */
@media (min-width: 1181px) { /* (the tablet block above sets smaller sizes up to 1180px) */
  body.aero .cmd[data-cmd=alliance] span { font-size: 11px; letter-spacing: 0; }
  body.aero .ally-flap .v { font-size: 14px; }
  body.aero .flap.ally-flap { flex-grow: 1.15; }
}
/* With the 7th (alliance) stat, a 1181-1440px HUD gets the tablet treatment too: labels above figures, no icons. */
@media (min-width: 1181px) and (max-width: 1440px) {
  body.aero:has(#hud-ally-wrap:not([hidden])) .flap .ico { display: none; }
  body.aero:has(#hud-ally-wrap:not([hidden])) .flap { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding-left: 8px; padding-right: 8px; }
  body.aero:has(#hud-ally-wrap:not([hidden])) .flap .k { font-size: 11px; white-space: nowrap; overflow: hidden; }
}
/* ...and its 14th command tile needs the narrow-screen tile type a little wider than without it. */
@media (min-width: 1321px) and (max-width: 1500px) {
  body.aero:has(#cmd-alliance:not([hidden])) .cmd { padding: 6px 2px 5px; }
  body.aero:has(#cmd-alliance:not([hidden])) .cmd span { font-size: 12px; letter-spacing: .02em; }
}
/* Portrait tablets fit 14 tiles across: the one long label gets tighter type. With the 7th (alliance) stat the HUD
   takes four to a row (4 + 3) instead of leaving Fuel alone on a fourth row. */
@media (min-width: 700px) and (max-width: 960px) {
  body.aero .cmd[data-cmd=alliance] span { font-size: 9.5px; letter-spacing: -0.04em; }
  body.aero:has(#hud-ally-wrap:not([hidden])) :is(.flap, .flap.date-flap) { flex: 1 1 22%; }
  body.aero:has(#hud-ally-wrap:not([hidden])) .flap .v { font-size: 16px; }
}
/* Side-panel layout (desktop/tablet): the speaker button sits over the map, left of the 400px panel, not on its tabs. */
@media (min-width: 961px) {
  body:not(.layout-bottom):has(#screen-game:not([hidden])) :is(.audio-btn, .audio-panel) { right: 414px; }
  /* ...and Joy's card, centred on a map that can be only ~620px wide, keeps clear of it. */
  body.aero:not(.layout-bottom) .map-banner { width: min(560px, calc(100% - 128px)); }
}
/* Its ten tabs wrap to a second row instead of scrolling sideways out of sight (the scrollbar is hidden). */
body.aero:not(.layout-bottom) .tabs { flex-wrap: wrap; overflow: visible; gap: 2px; padding: 4px 4px 0; }
body.aero:not(.layout-bottom) .tabs button { font-size: 11px; letter-spacing: 0.02em; padding: 3px 5px; flex: 1 1 auto; }
/* Its HUD also holds the Board and Menu buttons: up to 1600px wide, stat labels go above the figures (no icons) and
   the figures shrink so "$140.8M" and the alliance score fit. */
@media (min-width: 961px) and (max-width: 1600px) {
  body.aero:not(.layout-bottom) .flap .ico { display: none; }
  body.aero:not(.layout-bottom) .flap { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding-left: 6px; padding-right: 6px; }
  body.aero:not(.layout-bottom) .flap .k { font-size: 10px; white-space: nowrap; overflow: hidden; }
  body.aero:not(.layout-bottom) .flap .v { font-size: 14px; }
  body.aero:not(.layout-bottom) .ally-flap .v { font-size: 11px; }
}
/* An open window covers the speaker button instead of the button sitting on the window's frame. */
body:has(#modal:not([hidden])) :is(.audio-btn, .audio-panel) { z-index: 40; }
/* A game window open over the map (bottom-bar layout) would have its close button under the speaker button. */
body.layout-bottom.side-open:has(#side:not(.win-left)) :is(.audio-btn, .audio-panel) { display: none; }
@media (max-width: 960px) { body.layout-bottom.side-open :is(.audio-btn, .audio-panel) { display: none; } } /* full-width windows */

/* ---------- The PixelLab kit across the whole game (art/ui) ---------- */
/* Buttons everywhere, as on the start screen and in the showroom: blue by default, gold primary, navy ghost, red
   danger, 9-sliced from art/ui/btn_*.png. The 7px slice plus the padding keep them as tall as before (44px, small 34px). */
body.aero .btn { border: 7px solid transparent; border-image: url(art/ui/btn_blue.png) 14 fill / 7px stretch; background: none; box-shadow: none; border-radius: 0; padding: 4px 13px; color: #f4fbff; text-shadow: 0 1px 0 #001a4a; image-rendering: pixelated; }
body.aero .btn.small { padding: 1px 9px; }
body.aero .btn.primary { border-image-source: url(art/ui/btn_gold.png); background: none; box-shadow: none; color: #1a1000; text-shadow: 0 1px 0 rgba(255, 240, 180, .6); }
body.aero .btn.ghost { border-image-source: url(art/ui/btn_navy.png); background: none; }
body.aero .btn.danger { border-image-source: url(art/ui/btn_red.png); background: none; color: #fff4f0; text-shadow: 0 1px 0 #4a0000; }
body.aero .btn:hover, body.aero .btn.primary:hover { background: none; border-color: transparent; filter: brightness(1.12); }
body.aero .btn:active, body.aero .btn.primary:active { transform: translateY(1px); box-shadow: none; filter: brightness(.92); }
body.aero .btn:disabled, body.aero .btn:disabled:hover { background: none; filter: grayscale(.8) brightness(.75); cursor: not-allowed; }
/* The zoom buttons keep their gold-framed tiles; "centre on hub" shows the airport icon. */
body.aero .map-tools .btn.icon { border-image: none; padding: 0; }
.map-tools .btn.icon img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000c24); }
/* Turn box: the slice makes the buttons taller, so less padding keeps the dock its height. The HUD's Board and
   Menu buttons (side-panel layout) keep their old width, so the stat tiles keep theirs. */
body.aero.layout-bottom .turnbar .btn { padding: 0 8px; }
body.aero .hud .btn.small { padding: 1px 5px; }
/* "End quarter" pressed and waiting for the others: the navy button with gold text. */
body.aero #btn-end.waiting { border-image-source: url(art/ui/btn_navy.png); color: var(--px-gold); text-shadow: 0 1px 0 #000c24; }
.joy-topics .btn.on { border-image-source: url(art/ui/btn_gold.png); color: #1a1000; text-shadow: none; }

/* Checkboxes: the kit's pixel box and tick. */
body.aero input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0 6px 0 0; padding: 0; flex: none; border: 0; border-radius: 0; box-shadow: none; background: url(art/ui/btn_check.png) center / contain no-repeat; image-rendering: pixelated; cursor: pointer; vertical-align: middle; }
body.aero input[type=checkbox]:checked { background-image: url(art/ui/btn_check_on.png); }
body.aero input[type=checkbox]:focus-visible { outline: 2px solid var(--px-gold); outline-offset: 1px; }

/* Steppers: two small blue kit buttons around a navy readout in the pixel face. */
body.aero .stepper button { width: 36px; height: 38px; padding: 0; border: 6px solid transparent; border-image: url(art/ui/btn_blue.png) 14 fill / 6px stretch; border-radius: 0; background: none; color: #f4fbff; font: 20px/1 var(--display); text-shadow: 0 1px 0 #001a4a; image-rendering: pixelated; }
body.aero .stepper button:hover { filter: brightness(1.12); }
body.aero .stepper button:active { transform: translateY(1px); filter: brightness(.92); }
body.aero .stepper button:disabled { filter: grayscale(.8) brightness(.75); cursor: not-allowed; }
body.aero .stepper output { height: 38px; line-height: 34px; border: 2px solid var(--px-gold-dk); border-inline: 0; background: #000c24; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45); color: #ffd84a; font: 19px/34px var(--mono); }

/* Segmented choices: navy kit buttons, the chosen one gold. */
body.aero .seg button { padding: 4px 8px; border: 6px solid transparent; border-image: url(art/ui/btn_navy.png) 14 fill / 6px stretch; border-radius: 0; background: none; box-shadow: none; color: #dfe8ff; font-family: var(--display); font-weight: 400; text-shadow: 0 1px 0 #000c24; image-rendering: pixelated; }
body.aero .seg button.on { border-image-source: url(art/ui/btn_gold.png); background: none; color: #1a1000; text-shadow: 0 1px 0 rgba(255, 240, 180, .6); }
body.aero .seg button:not(:disabled):hover { filter: brightness(1.15); }
body.aero .seg button:disabled { filter: grayscale(.8) brightness(.75); }

/* Side-panel tabs (side layout): navy kit tabs over a gold rule, the open one gold. */
body.aero .tabs { gap: 3px; padding: 6px 6px 0; border-bottom: 2px solid var(--px-gold-dk); }
body.aero .tabs button { padding: 7px 8px; border: 6px solid transparent; border-image: url(art/ui/btn_navy.png) 14 fill / 6px stretch; color: #dfe8ff; text-shadow: 0 1px 0 #000c24; image-rendering: pixelated; }
body.aero .tabs button.on { border-image-source: url(art/ui/btn_gold.png); color: #1a1000; text-shadow: none; }

/* Fields: square navy wells with a gold rim; drop-down lists get a pixel arrow; numbers and lists in the pixel face. */
body.aero input:not([type=checkbox]):not([type=range]), body.aero select { border: 2px solid var(--px-gold-dk); border-radius: 0; background-color: #000c24; box-shadow: inset 0 0 0 1px #00163c, inset 0 2px 0 rgba(0, 0, 0, .45); color: #f4fbff; }
body.aero input:not([type=checkbox]):not([type=range]):focus, body.aero select:focus { border-color: var(--px-gold); outline: none; }
body.aero input[type=number], body.aero select { font-family: var(--display); }
body.aero select { appearance: none; -webkit-appearance: none; padding-right: 28px; line-height: 1.25; /* as tall as the native list was */ cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23e5b436' d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 8px; }
body.aero select option { background: #011d4b; color: #f4fbff; }
body.aero #speed-select { padding-right: 26px; }

/* Sliders: a navy groove with a gold rim and a gold kit button for the handle. */
body.aero input[type=range] { -webkit-appearance: none; appearance: none; height: 26px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
body.aero input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #000c24; border: 2px solid var(--px-gold-dk); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5); }
body.aero input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 24px; margin-top: -9px; border: 5px solid transparent; border-image: url(art/ui/btn_gold.png) 14 fill / 5px stretch; background: none; image-rendering: pixelated; }
body.aero input[type=range]::-moz-range-track { height: 6px; background: #000c24; border: 2px solid var(--px-gold-dk); }
body.aero input[type=range]::-moz-range-thumb { width: 8px; height: 14px; border: 5px solid transparent; border-image: url(art/ui/btn_gold.png) 14 fill / 5px stretch; border-radius: 0; background: none; }

/* Notices: the riveted panel, in the pixel face; problems in the red kit frame. */
body.aero .toast { border: 16px solid transparent; border-image: url(art/ui/panel.png) 22 fill / 22px stretch; border-radius: 0; background: none; padding: 0 6px; font: 15px/1.45 var(--display); color: #f4fbff; text-shadow: 0 1px 0 #000c24; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); image-rendering: pixelated; }
body.aero .toast:not(.info) { border-width: 7px; border-image: url(art/ui/btn_red.png) 14 fill / 7px stretch; padding: 8px 14px; color: #fff4f0; text-shadow: 0 1px 0 #4a0000; }

/* The game window's close button: a small red kit button. */
body.aero .side-x { width: 34px; height: 34px; padding: 0; border: 6px solid transparent; border-image: url(art/ui/btn_red.png) 14 fill / 6px stretch; border-radius: 0; background: none; color: #fff4f0; font: 22px/1 var(--display); text-shadow: 0 1px 0 #4a0000; image-rendering: pixelated; }
body.aero .side-x:hover { background: none; filter: brightness(1.15); }

/* Businesses as their own PixelLab buildings (art/map/biz, 48 px) on a gold-rimmed tile. */
.biz-art { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
body.aero .biz { grid-template-columns: 54px minmax(0, 1fr) auto; }
body.aero .biz .ico { width: 54px; height: 54px; border: 2px solid var(--px-gold-dk); border-radius: 3px; background: var(--tile-bg); box-shadow: var(--tile-frame); }
body.aero .portfolio .biz .ico { align-self: start; }
.here-biz .ico .biz-art { width: 24px; height: 24px; image-rendering: auto; } /* exactly half size: a clean 2x2 average */
@media (max-width: 480px) {
  body.aero .biz { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
  body.aero .biz .ico { width: 40px; height: 40px; }
  body.aero .biz .ico .biz-art { width: 36px; height: 36px; image-rendering: auto; }
}

/* Opening cards on the map: a square gold-framed tile with the building or a kit icon, the airline's colour along its foot. */
body.aero .cele { border-radius: 4px; }
body.aero .cele .c-ico { width: 56px; height: 56px; margin: -42px auto 4px; border: 3px solid var(--px-gold); border-radius: 4px; background: var(--tile-bg); box-shadow: var(--tile-frame), inset 0 -5px 0 var(--cc, var(--px-gold-dk)); color: #f4fbff; }
.cele .c-ico .px-ico { width: 30px; height: 30px; }
.cele .c-ico svg { width: 26px; height: 26px; }
.c-plane { width: 200px; }

/* Maiden flight: the riveted panel instead of the glass box, the aircraft's Pro Flash painting rolling across. */
body.aero .maiden-banner { border: 16px solid transparent; border-image: url(art/ui/panel.png) 22 fill / 22px stretch; border-radius: 0; background: none; padding: 0 6px 2px; image-rendering: pixelated; }
body.aero .maiden-banner .mb-kicker { font-weight: 400; }
body.aero .maiden-banner .mb-route { font: 22px/1.2 var(--display); text-shadow: 0 2px 0 #000c24; }
body.aero .maiden-banner .mb-flight { color: #ffd84a; }
body.aero .maiden-banner .mb-plane { height: 100px; }
body.aero .maiden-banner .mb-plane svg { filter: none; }

/* Each airline's chairman beside its name (Airlines and Alliance windows). */
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chair-ico { flex: none; width: 30px; height: 40px; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; border: 2px solid var(--px-steel, #819cc2); border-radius: 2px; background: radial-gradient(90% 80% at 50% 35%, #4d6fae, #1b2a4d); }
.job-top .chair-ico { width: 24px; height: 32px; }
b.who { display: inline-flex; }

/* Desk and charter board: pixel pictures where the kit has one. */
.job-ico img { display: block; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000c24); }

/* Charts: pixel marks on a navy well in a gold rim. */
body.aero .chart { border: 2px solid var(--px-gold-dk); border-radius: 0; background: #000c24; box-shadow: inset 0 0 0 1px #00163c; }
.spark rect.hi { fill: #9df0b9; }

/* The expansion offer opens on the city's scene, as its Airport window does. */
.exp-hero { margin: 0 0 10px; }

/* ---------- touch screens (iPad, tablets) ---------- */
/* iPads without a home button draw a home bar along the bottom edge: the dock stays above it. */
body.layout-bottom .dock { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* No grey flash on tap, no double-tap zoom on controls, no long-press "save image" menu on the game's art. */
html { -webkit-tap-highlight-color: transparent; }
:is(button, .btn, .cmd, [data-act], [data-tab], .seat, select, label, summary) { touch-action: manipulation; }
:is(#map, .cmd, .flap, #screen-game img, .modal img) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: none) and (pointer: coarse) {
  /* iPad Safari zooms the whole page into any text box under 16px; keep them at 16px so it doesn't. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px !important; }
  /* A tapped tile stays "hovered" on touch screens; don't leave it lit. */
  body.aero .cmd:hover { filter: none; }
  /* Bigger targets for fingers: the small steppers and icon buttons. */
  .stepper button { min-width: 36px; min-height: 36px; }
  .btn.small { min-height: 34px; }
}

/* ---- Layout fix (GameScape): card contents stay inside the card ----
   A card is a grid whose single column sized itself to its widest child. In Firefox the room-code box is wide by
   default, so the Join button and the open-room rows stuck out past the card's right edge. */
.card { grid-template-columns: minmax(0, 1fr); }
.join-row input { min-width: 0; }
.room-list { grid-template-columns: minmax(0, 1fr); }
.room-list li > div { min-width: 0; overflow-wrap: anywhere; }
.room-list li > .btn { flex: none; }