:root {
  /* Dark theme throughout. */
  color-scheme: dark;
  --bg: #0b0f15;
  --panel: #131a24;
  --panel-2: #1a2330;       /* inputs, chips, hover rows */
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #253041;
  --input-border: #334155;
  --accent: #ef4444;
  --header: #0f1620;
  --pos: #4ade80;
  --neg: #f87171;
  --warn: #fbbf24;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

body { display: flex; flex-direction: column; }

/* ---------- top bar: menu + speed (left), the section tabs (middle, on a desktop screen), airline, money
   and time (right) ---------- */
#topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
  color: #fff;
  position: relative;
  z-index: 2100;
}
.tb-left { display: flex; align-items: center; gap: 6px; }
.tb-tabs { display: flex; justify-content: center; min-width: 0; }
.tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
.tb-status { display: flex; align-items: center; gap: 14px; }
.brand { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#money { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
#money.negative { color: #fca5a5; }
.tb-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
#clock-time { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
#clock-day { font-size: 11px; color: var(--muted); }
.icon-btn {
  height: 32px; min-width: 32px; padding: 0 8px;
  background: #1e293b; border: 1px solid #334155; color: #fff; font-size: 18px; line-height: 1;
}
#topbar .icon-btn.active { background: var(--accent); border-color: var(--accent); }
#view3d-toggle { font-size: 12px; font-weight: 700; }
#sound-toggle { font-size: 15px; }
#sound-toggle.off { opacity: 0.55; }
.set-volume { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.set-volume input { flex: 1; max-width: 220px; }
.set-sound-about { margin: 6px 0; font-size: 12px; }
.set-preview [data-preview-status] { font-size: 12px; }
.speed-ctl { position: relative; display: flex; align-items: center; gap: 6px; }
#speed-btn svg { width: 18px; height: 18px; fill: #fff; transform: rotate(90deg); display: block; }
#speed-btn.paused svg { fill: var(--warn); }
#speed-label { min-width: 64px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.9; cursor: pointer; }
#speed-label:hover { opacity: 1; text-decoration: underline dotted; }
.pop {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 2200;
}
#speed-pop { top: 40px; left: 0; width: 280px; }
#speed-pop input[type=range] { flex: 1; accent-color: var(--accent); }
#pause.active { background: var(--accent); border-color: var(--accent); }
.speed-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.speed-presets button { flex: 1; font-size: 12px; padding: 3px 4px; }
.menu { top: 46px; left: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px; }
.menu button { text-align: left; border: none; background: none; padding: 8px 10px; display: flex; justify-content: space-between; }
.menu button:hover { background: var(--panel-2); filter: none; }
#settings {
  position: fixed; inset: 0; z-index: 3600; /* (over the start screen too) */ background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
#settings[hidden], .pop[hidden] { display: none; }
.set-card {
  width: min(420px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
}
.set-card h4 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
label.check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.side-head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.side-head h2 { margin: 0; font-size: 17px; }
.side-head .close { position: static; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips button.bad { border-color: var(--neg); }
.chips .n { opacity: 0.75; font-size: 11px; }

/* ---------- right: icon rail + sliding sidebar ---------- */
#rail {
  width: 64px; flex: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 4px;
  background: var(--header); border-left: 1px solid var(--border); overflow-y: auto; z-index: 1200;
}
#rail button {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 0; border: none; background: none; border-radius: 8px; color: var(--text);
}
#rail button span { font-size: 20px; line-height: 1; }
#rail button small { font-size: 10px; color: var(--muted); }
#rail button.active { background: var(--accent); }
#rail button.active small { color: #fff; }
#rail button:hover:not(.active) { background: var(--panel-2); filter: none; }

/* The tabs in the top bar (desktop screens, js/ui.js placeTabs): a row of icon buttons with their names. */
#topbar #rail {
  width: auto; flex-direction: row; gap: 2px; padding: 0; background: none; border: none; overflow: visible;
}
#topbar #rail button { padding: 3px 6px 2px; min-width: 60px; }
#topbar #rail button span { font-size: 17px; }
body.tabs-top #sidebar { right: 0; max-width: 100%; }

/* ---------- bottom: one card per plane ---------- */
#strip { flex: none; background: var(--header); border-top: 1px solid var(--border); }
#strip-list { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; scrollbar-width: thin; }
.pcard {
  position: relative; flex: none; width: 108px; height: 70px; padding: 4px 4px 2px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #1f2a3a, #121923);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.pcard:hover { border-color: #64748b; }
.pcard.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pcard.follow::after { content: "🎥"; position: absolute; top: 2px; left: 4px; font-size: 11px; }
.pcard img { position: absolute; top: 2px; left: 4px; right: 4px; width: calc(100% - 8px); height: 46px; object-fit: contain; pointer-events: none; }
.pc-type { position: relative; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pcard .st { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pcard .st.fly { background: var(--pos); }
.pcard .st.turn { background: var(--warn); }
.pcard .st.repair { background: var(--neg); }
.pcard.add { width: 56px; font-size: 22px; color: var(--muted); justify-content: center; }
#strip-tip {
  position: fixed; z-index: 2300; width: 250px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); font-size: 13px;
}
#strip-tip > * + * { margin-top: 5px; }
.tt-route { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.tt-route small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.tt-route .arrow { color: var(--accent); font-size: 14px; }
.tt-prog, .tt-fuel .bar { height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.tt-prog i, .tt-fuel .bar i { display: block; height: 100%; background: var(--pos); }
.tt-fuel { display: flex; align-items: center; gap: 6px; }
.tt-fuel .bar { flex: 1; }
.tt-fuel .bar i.low { background: var(--neg); }
#follow-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: rgba(15, 22, 32, 0.9); border: 1px solid var(--border); border-radius: 16px; padding: 4px 6px 4px 12px; font-size: 13px;
}

/* The ring round the plane you follow (js/trackring.js), on the 2D map and in 3D; an arrow at the edge when it is off screen. */
.track-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; z-index: 600; }
.track-ring i { position: absolute; inset: 0; border: 2px solid #facc15; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 10px rgba(250, 204, 21, 0.55); animation: track-pulse 1.6s ease-in-out infinite; }
.track-ring.edge i { inset: 8px; border: 0; border-radius: 0; background: #facc15; clip-path: polygon(100% 50%, 0 0, 0 100%);
  box-shadow: none; transform: rotate(var(--ang)); animation: none; }
@keyframes track-pulse { 50% { transform: scale(1.2); opacity: 0.55; } }

/* A crash (ui.js updateBlasts): a fireball with flares, drawn at a fixed size so it shows from far away. */
.blast-icon { background: none; border: 0; }
.blast { position: relative; width: 96px; height: 96px; pointer-events: none; }
.blast i { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle, #fffbea 0%, #ffd23f 20%, #ff7a1a 45%, rgba(70, 40, 25, 0.6) 66%, rgba(0, 0, 0, 0) 72%);
  animation: blast-grow 1.1s ease-out both; }
.blast::before, .blast::after { content: ''; position: absolute; left: 0; top: 47px; width: 96px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff6cc, transparent); transform: rotate(45deg); animation: blast-flare 0.4s steps(2) infinite; }
.blast::after { transform: rotate(-45deg); }
.blast-icon.late .blast { opacity: 0.35; transition: opacity 6s; }
@keyframes blast-grow { from { transform: scale(0.2); } 60% { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes blast-flare { 50% { opacity: 0.35; } }

main { flex: 1; display: flex; min-height: 0; position: relative; }
#map { flex: 1; min-width: 0; }

#sidebar {
  position: absolute; top: 0; bottom: 0; right: 64px; z-index: 1150;
  width: 440px; max-width: calc(100% - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background: rgba(11, 15, 21, 0.97);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
#sidebar[hidden] { display: none; }
#sidebar > * + * { margin-top: 8px; }

/* ---------- planning: day timeline, slots, airports ---------- */
.timeline, .slot-lanes { margin-top: 8px; }
.tl-axis { position: relative; height: 14px; margin-left: 96px; font-size: 10px; color: var(--muted); }
.tl-axis span { position: absolute; transform: translateX(-50%); }
.tl-axis span:first-child { transform: none; }
.tl-axis span:last-child { transform: translateX(-100%); }
.tl-row { display: flex; align-items: center; gap: 4px; padding: 2px 0; border-radius: 6px; }
.tl-row[data-pl] { cursor: pointer; }
.tl-row[data-pl]:hover, .tl-row.editing { background: var(--panel-2); }
.tl-label { width: 92px; flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-label small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
.tl-label em { font-style: normal; font-size: 10px; }
.tl-bar { position: relative; flex: 1; height: 24px; background: #0e141c; border-radius: 4px; overflow: hidden; }
.tl-bar > i, .tl-bar > b { position: absolute; top: 0; bottom: 0; }
.tl-night { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0 4px, transparent 4px 8px); }
.tl-now { width: 2px; background: var(--accent); z-index: 3; }
.tl-flight, .tl-ground, .tl-use {
  top: 3px !important; bottom: 3px !important; border-radius: 3px; font-size: 9px; font-weight: 700; color: #fff;
  overflow: hidden; white-space: nowrap; text-align: center; line-height: 18px; z-index: 2;
}
.tl-flight { background: #2563eb; }
.tl-flight.draft { background: #f59e0b; color: #111; }
.tl-ground { background: #475569; color: #e2e8f0; font-weight: 600; }
.tl-ground:hover { background: #64748b; }
.tl-use { background: #0d9488; }
.tl-use.idle { background: #475569; }
.tl-use.draft { background: #f59e0b; color: #111; }
.tl-text { position: absolute; left: 6px; top: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; z-index: 2; }
/* An ultra long-haul timetable: one lane per day of its round (--n days, --k = the lane) */
.tl-bar.days { height: calc(var(--n) * 14px + 4px); }
.tl-bar.days > .tl-flight, .tl-bar.days > .tl-ground { top: calc(2px + var(--k) * 14px) !important; bottom: auto !important; height: 12px; line-height: 12px; font-size: 8px; }
.pl-ultra { gap: 6px; margin: 6px 0 2px; cursor: pointer; }
.tl-row.slot.over .tl-bar { box-shadow: inset 0 0 0 1px var(--neg); }
.slot-lanes.compact { border-top: 1px solid var(--border); padding-top: 4px; }
.sl-head { cursor: pointer; font-size: 13px; }
.plan .stops-chips .chip { display: inline-flex; gap: 3px; align-items: center; background: var(--panel-2); border-radius: 6px; padding: 2px 4px 2px 8px; font-weight: 700; }
.plan .arrow { color: var(--muted); }
.plan select#pl-add { flex: none; }
.plan input[type=time] { padding: 2px 4px; border: 1px solid var(--input-border); border-radius: 6px; }
table.legs td { vertical-align: middle; }
.plan .pl-when input[type=range] { flex: 1; min-width: 120px; accent-color: #f59e0b; }
.pl-fit { margin: 4px 0 6px; }
.pl-fit .tl-label[data-pl] { cursor: pointer; }
.tl-bar.fit { height: 32px; }
.tl-bar.fit > .fit-other, .tl-bar.fit > .fit-mine { border-radius: 3px; font-size: 9px; font-weight: 700; overflow: hidden; white-space: nowrap;
  text-align: center; z-index: 2; }
.tl-bar.fit > .fit-other { top: 2px; bottom: 50%; background: #64748b; color: #e2e8f0; line-height: 14px; opacity: 0.85; }
.tl-bar.fit > .fit-mine { top: 50%; bottom: 2px; background: #f59e0b; color: #111; line-height: 14px; }
.tl-bar.fit > .fit-over { top: 0; bottom: 0; background: rgba(239, 68, 68, 0.55); z-index: 3; pointer-events: auto; }
.fit-legend .key { display: inline-block; width: 10px; height: 8px; border-radius: 2px; vertical-align: middle; }
.fit-legend .key.mine { background: #f59e0b; } .fit-legend .key.other { background: #64748b; } .fit-legend .key.over { background: rgba(239, 68, 68, 0.8); }
table.legs input[type=time] { width: 78px; }
.nowrap { white-space: nowrap; }
ul.errors { margin: 6px 0; padding-left: 18px; color: var(--neg); font-size: 12px; }
.warn { color: var(--warn); }
table.board tr.past td { opacity: 0.45; }
.ap-item { border-bottom: 1px solid var(--border); }
.ap-sum { display: flex; align-items: center; gap: 6px; padding: 7px 2px; cursor: pointer; }
.ap-sum:hover { background: var(--panel-2); }
.ap-sum .city { color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sum .caret { width: 12px; color: var(--muted); }
.tag { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--panel-2); white-space: nowrap; }
.tag.slot { background: #134e4a; }
.tag.stake { background: #4c1d95; }
.ap-body { padding: 4px 4px 10px 20px; }
.ap-body > * + * { margin-top: 6px; }
.ap-slot { padding: 6px 8px; border-radius: 6px; background: var(--panel-2); user-select: none; }
.click { cursor: pointer; }

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.panel > * + * { margin-top: 6px; }
.panel h3 { margin: 0; font-size: 15px; }
.panel h4 { margin: 12px 0 4px; font-size: 13px; }
.panel.airport { border-color: #3b82f6; }
.plane-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }

.close {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  padding: 0 6px;
}

button {
  font: inherit;
  padding: 4px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.2); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.mini { padding: 0 6px; font-size: 12px; }

select, input { font: inherit; color: var(--text); background: var(--panel-2); }
select { padding: 3px; border-radius: 6px; border: 1px solid var(--input-border); flex: 1; }
a { color: #60a5fa; }

.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.label { font-weight: 600; margin-top: 10px; }
.muted { color: var(--muted); font-size: 12px; }
.hint { color: var(--muted); font-style: italic; font-size: 12px; }
.ok, .pos { color: var(--pos); }
.neg { color: var(--neg); }
.status { font-weight: 600; }

.route span { padding: 1px 6px; border-radius: 4px; background: var(--panel-2); font-weight: 600; }
.route span.here { background: var(--accent); color: #fff; }

.editor {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 6px;
  padding: 8px;
}
.editor > * + * { margin-top: 6px; }
.stops { margin: 0; padding-left: 22px; }
.stops li { padding: 2px 0; }

table.small { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.small th, table.small td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--border); }
td.fare { white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover { background: var(--panel-2); }

.log .entry { font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.log .entry.good { color: var(--pos); }
.log .entry.bad { color: var(--neg); }
.log .entry.summary { font-weight: 600; }

/* map – Apple-Maps-like look. Colours mirror COLORS in ui.js. */
#map {
  --m-blue: #007aff;
  --m-green: #34c759;
  --m-orange: #ff9500;
  --m-red: #ff3b30;
  --m-purple: #af52de;
  --m-gray: #8e8e93;
  --m-panel: rgba(30, 32, 38, 0.8);   /* dark controls on every base map */
  --m-ink: #f2f2f7;
  --m-halo: #1c1c1e;
  --m-hairline: rgba(255, 255, 255, 0.16);
  --m-label: #64b0ff;
  --m-label-own: #30d158;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  background: #1c1c1e;
}
/* Dark and Satellite base maps */
#map.map-dark {
  --m-panel: rgba(44, 44, 46, 0.78);
  --m-ink: #f2f2f7;
  --m-halo: #1c1c1e;
  --m-hairline: rgba(255, 255, 255, 0.16);
  --m-label: #64b0ff;
  --m-label-own: #30d158;
  background: #1c1c1e;
}

/* Frosted-glass controls */
#map .leaflet-bar,
#map .leaflet-control-layers {
  border: none;
  border-radius: 10px;
  background: var(--m-panel);
  color: var(--m-ink);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 0 0 0.5px var(--m-hairline);
}
#map .leaflet-bar { overflow: hidden; }
#map .leaflet-bar a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: transparent;
  color: var(--m-ink);
  border-bottom: 0.5px solid var(--m-hairline);
}
#map .leaflet-bar a:last-child { border-bottom: none; }
#map .leaflet-bar a:hover { background: rgba(127, 127, 127, 0.18); }
#map .leaflet-bar a.leaflet-disabled { opacity: 0.35; }
#map .leaflet-control-zoom a { font-family: inherit; font-size: 22px; font-weight: 300; line-height: 32px; }
#map .leaflet-bar a.fit-network { font-size: 18px; color: var(--m-blue); }
#map .leaflet-control-layers-expanded { padding: 8px 12px; font-size: 13px; }
#map .leaflet-control-layers-separator { border-top: 0.5px solid var(--m-hairline); }
#map .leaflet-control-layers input { accent-color: var(--m-blue); }
#map .leaflet-control-layers-toggle { filter: invert(1); }

#map .leaflet-control-scale-line {
  background: none;
  border: 1.5px solid var(--m-ink);
  border-top: none;
  color: var(--m-ink);
  font-size: 10px;
  text-shadow: 0 0 2px var(--m-halo), 0 0 2px var(--m-halo);
}
#map .leaflet-control-attribution {
  background: var(--m-panel);
  color: var(--m-ink);
  font-size: 10px;
  border-top-left-radius: 6px;
}

/* Callouts */
#map .leaflet-tooltip:not(.ap-label) {
  border: none;
  border-radius: 8px;
  padding: 4px 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

/* Airports: coloured pin with white rim, label as haloed text */
.ap-dot { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
.leaflet-tooltip.ap-label {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--m-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: -0.6em; /* half its one line: centred on the dot (js/ui.js AirportLabel doesn't measure it) */
  text-shadow: -1px -1px 0 var(--m-halo), 1px -1px 0 var(--m-halo), -1px 1px 0 var(--m-halo),
    1px 1px 0 var(--m-halo), 0 0 3px var(--m-halo);
}
.leaflet-tooltip.ap-label::before { display: none; }
.ap-label.hidden { display: none; }
.ap-label .city { display: none; font-weight: 500; }
.ap-label.hover, .ap-label.selected { z-index: 1; font-size: 13px; }
.ap-label.hover .city, .ap-label.selected .city { display: inline; }
.ap-label.owned { color: var(--m-label-own); }
.ap-label.home b::after { content: " ★"; }

/* Only the aircraft shape itself catches the mouse, not its square box. */
.plane-icon.leaflet-interactive { pointer-events: none; }
.plane-icon .plane { width: 28px; height: 28px; }
.plane-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: var(--m-red);
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke;
  filter: var(--shadow, drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)));
}
.plane-icon path { pointer-events: auto; cursor: pointer; }
.plane-icon .plane.grounded svg { fill: var(--m-gray); }
.plane-icon .plane.selected svg { stroke: #ffcc00; stroke-width: 2.6; }
/* An aircraft type's own shape in a line of text (ui.js planeGlyph): the <i> is masked with its top view
   (models/icons/) and takes the text colour. */
.type-icon { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; transform: rotate(45deg); }
.type-icon .plane-shape { position: relative; display: block; width: 100%; height: 100%; }
.type-icon .plane-shape i {
  position: absolute; inset: 0; background: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.type-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
/* 3D model seen from above (js/icons3d.js): the livery stays, parked planes are a little dimmer. */
.plane-icon img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  filter: var(--shadow, drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)));
}
.plane-icon .plane.grounded img { filter: saturate(0.6) brightness(0.92) var(--shadow, drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35))); }
.plane-icon .plane.selected img {
  filter: drop-shadow(0 0 1.5px #ffcc00) drop-shadow(0 0 1.5px #ffcc00) var(--shadow, drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)));
}
/* Pushback: a tug at the nose, pushing the plane tail first. */
.plane-icon .plane { position: relative; }
.plane-icon .plane.pushback::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 5px;
  height: 7px;
  margin-left: -2.5px;
  background: #facc15;
  border: 1px solid #111;
  border-radius: 1.5px;
}

#map .map-legend {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.8;
}
.map-legend summary { cursor: pointer; font-weight: 600; }
.map-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.map-legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  margin-left: 4px;
  margin-right: 9px;
  box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.4);
}
.map-legend .dot.own { background: var(--m-green); }
.map-legend .dot.ap { background: var(--m-blue); }
.map-legend .dot.town { background: var(--m-gray); }
.map-legend .dot.catch { background: var(--m-orange); }
.map-legend .line { width: 18px; border-top: 3px solid; border-radius: 2px; }
.map-legend .line.active { border-color: var(--m-blue); }
.map-legend .line.paused { border-color: var(--m-gray); }
.map-legend .line.draft { border-color: var(--m-orange); border-top-style: dotted; }
.map-legend .line.ferry { border-color: var(--m-purple); border-top-style: dashed; }
.map-legend .dot.stake { background: var(--m-purple); }
.map-legend .rw { width: 18px; height: 6px; background: #4b5563; outline: 1px solid #fff; }
.map-legend .rw.build { background: rgba(255, 149, 0, 0.3); outline: 2px dashed var(--m-orange); }

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 1px solid var(--input-border);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 2000;
}
#toast.show { opacity: 1; }
#toast.bad { background: #b91c1c; border-color: #b91c1c; }

#gameover {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #b91c1c;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 2000;
}

@media (max-width: 1250px) {
  .brand { display: none; }
}
@media (max-width: 800px) {
  .tb-status { gap: 10px; }
  #money, #clock-time { font-size: 15px; }
  #sidebar { width: calc(100% - 64px); }
}

button.dispose { color: var(--neg); }

/* finance charts */
:root {
  --s-rev: #2a78d6;
  --s-cost: #eb6834;
  --s-loss: #e34948;
}
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .grid.zero { stroke: var(--muted); }
.chart .ref { stroke: var(--neg); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .tick { font-size: 9px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--panel); stroke-width: 2; }
.chart .line.s-cash, .chart .line.s-rev { stroke: var(--s-rev); }
.chart .dot.s-cash, .chart .dot.s-rev { fill: var(--s-rev); }
.chart .line.s-cost { stroke: var(--s-cost); }
.chart .dot.s-cost { fill: var(--s-cost); }
.chart .bar.gain { fill: var(--s-rev); }
.chart .bar.loss { fill: var(--s-loss); }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; pointer-events: none; opacity: 0; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.legend i, #chart-tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
i.s-cash, i.s-rev { background: var(--s-rev); }
i.s-cost { background: var(--s-cost); }
i.s-net { background: var(--muted); }
#chart-tip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
}
#chart-tip div { display: flex; align-items: center; gap: 4px; }
#chart-tip span { margin-left: auto; padding-left: 12px; font-weight: 600; }

/* Aircraft marketplace (hangar overlay) */
#market {
  position: absolute; inset: 0; z-index: 1500;
  display: flex; flex-direction: column;
  background: #0b0f15; color: #e5e7eb;
}
#market[hidden] { display: none; }
#market button { color: inherit; }
.mk-top { display: flex; align-items: center; gap: 16px; padding: 12px 20px 6px; }
.mk-top h1 { margin: 0; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; }
.mk-money { font-variant-numeric: tabular-nums; color: #a7f3d0; font-weight: 600; }
.mk-top .spacer { flex: 1; }
.mk-year { font-size: 13px; color: #fcd34d; }
.mk-year b { font-variant-numeric: tabular-nums; }
.mk-close { background: transparent; border: 1px solid #334155; font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; }
.mk-close:hover { background: #1e293b; }
.mk-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 6px 20px 12px; border-bottom: 1px solid #1e293b; }
.mk-bar label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #94a3b8; }
.mk-bar select { background: #111827; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: 4px 6px; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chips button { background: #111827; border: 1px solid #263041; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
#market .chips button.on { background: #e5e7eb; color: #0b0f15; border-color: #e5e7eb; }
.chips .n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; }
.mk-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.mk-empty { padding: 40px; text-align: center; color: #94a3b8; }

.mk-show { display: flex; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.mk-stage { position: relative; flex: 1; min-width: 0; border-radius: 10px; overflow: hidden; border: 1px solid #1e293b; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.mk-stage svg, .mk-tile svg { display: block; width: 100%; height: auto; }
/* live 3D aircraft over the hangar drawing (js/hangar3d.js) */
.mk-stage canvas.hangar3d { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 640 / 300; cursor: grab; touch-action: none; }
.mk-stage canvas.hangar3d:active { cursor: grabbing; }
.mk-stage.live3d .hangar-plane { visibility: hidden; }
.mk-stage.live3d::after { content: "⟲ Drag to turn"; position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #94a3b8; pointer-events: none; }
.mk-info { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-info h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.mk-maker { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.mk-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-badges .b { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.b.new { background: #1d4ed8; }
.b.used { background: #b45309; }
.b.fleet { background: #15803d; }
.mk-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 4px 0; }
.mk-specs div { border-top: 1px solid #1e293b; padding-top: 4px; }
.mk-specs dt { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.mk-specs dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-delivery { font-size: 13px; color: #cbd5e1; background: #111827; border-left: 3px solid #16a34a; padding: 8px 10px; border-radius: 4px; }
.mk-delivery .neg { color: #fca5a5; }
.mk-buy { display: flex; gap: 8px; margin-top: auto; }
.mk-buy button.big { flex: 1; padding: 10px 12px; font-size: 15px; font-weight: 700; border-radius: 8px; background: #1e293b; border: 1px solid #334155; }
.mk-buy button.big.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mk-buy button small { display: block; font-weight: 400; font-size: 11px; opacity: 0.8; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mk-tile {
  text-align: left; padding: 0 0 10px; background: #111827; border: 1px solid #1e293b; border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.mk-tile:hover { transform: translateY(-2px); border-color: #475569; box-shadow: 0 6px 20px rgba(0,0,0,.4); filter: none; }
.mk-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 24px rgba(220,38,38,.25); }
.mk-tile.toobig { opacity: 0.55; }
.mk-tile .t-name { padding: 8px 10px 0; font-weight: 700; }
.mk-tile .t-sub { padding: 0 10px; font-size: 12px; color: #94a3b8; }
.mk-tile .t-price { padding: 4px 10px 0; font-size: 13px; font-weight: 600; color: #e5e7eb; }
.mk-tile .neg { color: #fca5a5; }

.factory-icon { font-size: 15px; line-height: 18px; text-align: center; filter: drop-shadow(0 0 2px #fff); }

@media (max-width: 900px) {
  .mk-show { flex-direction: column; }
  .mk-info { width: auto; }
}

/* ---------- game mode ---------- */
#mode-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  background: #334155;
}
#mode-badge.realistic { background: var(--accent); }

/* ---------- active events ---------- */
.panel.events { padding: 6px 10px; margin-bottom: 8px; }
.events .event { font-size: 13px; padding: 2px 0; }
.events .event.bad { color: var(--neg); }
.events .event.good { color: var(--pos); }

/* ---------- newspaper ---------- */
#newspaper {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.6);
  animation: news-fade 0.3s ease-out;
}
#newspaper[hidden] { display: none; }
#newspaper .paper {
  width: min(560px, 100%);
  max-height: calc(100vh - 110px);
  overflow: hidden;
  padding: 26px 28px 30px;
  color: #1b1712;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(circle at 85% 90%, rgba(120, 90, 40, 0.12), transparent 50%),
    #efe6cf;
  font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  animation: news-drop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#newspaper .masthead {
  font-family: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  text-align: center;
}
#newspaper .dateline {
  display: flex;
  justify-content: space-between;
  border-top: 3px double #1b1712;
  border-bottom: 1px solid #1b1712;
  margin: 6px 0 12px;
  padding: 3px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#newspaper h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  margin: 0 0 6px;
  text-align: center;
}
#newspaper .sub {
  font-style: italic;
  font-size: 16px;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #1b1712;
}
#newspaper .cols { display: flex; gap: 16px; align-items: flex-start; }
#newspaper figure { flex: 0 0 44%; margin: 0; }
#newspaper figure svg {
  display: block;
  width: 100%;
  border: 1px solid #1b1712;
  filter: grayscale(1) contrast(1.1) sepia(0.25);
}
#newspaper figure { position: relative; }
#newspaper figure::after { /* halftone dots */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  aspect-ratio: 160 / 110;
  background: radial-gradient(rgba(0, 0, 0, 0.22) 30%, transparent 32%) 0 0 / 3px 3px;
  pointer-events: none;
}
#newspaper figcaption { font-size: 11px; font-style: italic; margin-top: 4px; }
#newspaper .cols p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  text-align: justify;
  hyphens: auto;
}
#newspaper .cols p::first-letter {
  float: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  line-height: 0.85;
  padding: 4px 6px 0 0;
}
#newspaper > button { font-size: 15px; padding: 8px 22px; }

@media (max-width: 520px) {
  #newspaper .paper { padding: 20px 16px 24px; }
  #newspaper .masthead { font-size: 28px; }
  #newspaper h1 { font-size: 22px; }
  #newspaper .cols { flex-direction: column; }
  #newspaper figure { width: 100%; }
}

@keyframes news-fade { from { opacity: 0; } }
@keyframes news-drop {
  from { opacity: 0; scale: 0.3; rotate: -25deg; }
}

/* ---------- runways, gates, construction, airport shares ---------- */
.gate-label {
  color: #facc15;
  font: 700 9px/12px system-ui, sans-serif;
  text-align: center;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}
/* stand names from zoom 16 (js/ui.js drawGates sets z16 on the pane) */
.leaflet-gates-pane:not(.z16) .gate-label { display: none; }
/* the aprons' canvas: nothing on it takes the mouse (runways under it do) */
.leaflet-gates-pane > canvas { pointer-events: none; }
.rw-num {
  color: #fff;
  font: 700 10px/14px system-ui, sans-serif;
  text-align: center;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}
.build-icon { font-size: 18px; line-height: 20px; pointer-events: none; }
#map.build-mode, #map.build-mode .leaflet-interactive, #view3d.build-mode canvas { cursor: crosshair !important; }
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--m-orange, #ff9500); }
.warn { color: var(--warn); }
.panel .row select { max-width: 100%; }

/* ---------- flight tracks ---------- */
.map-legend .alt-scale {
  width: 18px; height: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #ff9500, #ffcc00, #34c759, #30b0c7, #5856d6);
}
.leaflet-tooltip .alt { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 3D view (js/view3d.js) ---------- */
#view3d {
  position: absolute;
  inset: 0;
  z-index: 1100; /* above the Leaflet map and its controls */
  background: #0b1220;
}
#view3d[hidden] { display: none; }
#view3d .maplibregl-canvas { outline: none; }
.view3d-controls {
  position: absolute;
  bottom: 40px; /* (above the map credits, which reach the middle on a wide screen) */
  left: 50%; /* (bottom centre: the plane window opens top left, where they were hidden under it; the right side is where the sidebar opens) */
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.view3d-controls button {
  background: rgba(19, 26, 36, 0.85);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.view3d-controls button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .view3d-controls button span { display: none; } /* (phones: the icons only, the names are in the tooltips) */
}

/* ---------- developer tools ---------- */
#devtools {
  position: fixed;
  top: 56px;
  left: 12px;
  z-index: 2000;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--panel);
  border: 2px dashed #f59e0b;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}
#devtools[hidden] { display: none; }
#devtools .dev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#devtools section { border-top: 1px solid var(--border); padding: 6px 0; }
#devtools h4 { margin: 0 0 5px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
#devtools h4 .muted { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#devtools .dev-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
#devtools .dev-row select { min-width: 0; }
#devtools .dev-row input { font: inherit; padding: 3px 6px; border: 1px solid var(--input-border); border-radius: 6px; flex: 1; min-width: 0; }
#devtools #dev-count { flex: 0 0 56px; }
#devtools .muted { color: var(--muted); }
#devtools .small { font-size: 12px; }
#dev-msg { min-height: 1.4em; color: var(--pos); font-size: 12px; }
#dev-msg.bad { color: var(--neg); }
#devtools-toggle.active { background: #f59e0b; border-color: #f59e0b; }

/* ---------- airport editor (js/airportedit.js) ---------- */
#apedit {
  position: fixed;
  top: 56px;
  left: 12px;
  z-index: 2000;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--panel);
  border: 2px dashed #22d3ee;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-size: 13px;
}
#apedit[hidden], #ae-banner[hidden] { display: none; }
/* build mode (the player's): tools in the panel */
#apedit.ae-build { border-style: solid; border-color: #f59e0b; }
.ae-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.ae-tools.ae-build { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.ae-tools button { padding: 5px 2px; font-size: 12px; line-height: 1.2; }
.ae-tools button span { display: block; font-size: 16px; }
.ae-tools button.on { background: #f59e0b; border-color: #f59e0b; color: #111827; font-weight: 600; }
#apedit .ae-sub { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
#apedit .ae-ctx { min-height: 34px; }
#apedit .ae-ctx-title { font-weight: 600; margin-bottom: 3px; }
#apedit .ae-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0; }
#apedit .ae-form input:not([type="checkbox"]) { width: 60px; flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid var(--input-border); border-radius: 6px; }
#apedit button.danger { border-color: var(--neg); color: var(--neg); }
#apedit button.mini.on { border-color: #22d3ee; color: #22d3ee; }
#apedit details summary { cursor: pointer; color: var(--muted); margin-top: 4px; }
.ae-handle.ae-move { display: flex; align-items: center; justify-content: center; background: #f59e0b; border-radius: 6px; font-size: 15px; color: #111827; cursor: move; }
#apedit .dev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#apedit section { border-top: 1px solid var(--border); padding: 6px 0; margin-top: 6px; }
#apedit h4 { margin: 0 0 3px; font-size: 13px; }
#apedit .dev-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
#apedit .muted { color: var(--muted); }
#apedit .small { font-size: 12px; }
#apedit .muted .mini { margin: 2px 2px 0 0; }
.ae-ops { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.ae-ops li { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 12px; }
.ae-ops li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-ops li.missed span { color: var(--warn); }
.ae-warn { color: var(--warn); font-size: 12px; margin-top: 4px; }
.ae-signin { margin-top: 4px; }
.ae-signin a { color: #22d3ee; }
.ae-signin .dev-row { margin-top: 5px; }
.ae-signin input { flex: 1; min-width: 0; padding: 3px 6px; border: 1px solid var(--input-border); border-radius: 6px; }
#ae-msg { min-height: 1.4em; color: var(--pos); font-size: 12px; margin-top: 4px; }
#ae-msg.bad { color: var(--neg); }
#map.ap-edit, #map.ap-edit .leaflet-grab { cursor: crosshair; }
#map.ap-edit .leaflet-dragging .leaflet-grab { cursor: move; }
/* the game's markers and shapes let the clicks through to the map; the editor's own points take them */
#map.ap-edit .leaflet-interactive { pointer-events: none !important; }
#map.ap-edit .leaflet-apedit-pane .leaflet-interactive { pointer-events: auto !important; }
.ae-handle { background: #facc15; border: 2px solid #111827; border-radius: 50%; box-sizing: border-box; cursor: grab; }
.ae-handle.ae-corner { background: #22d3ee; border-radius: 2px; cursor: move; }
.ae-handle.ae-mid { background: rgba(250, 204, 21, 0.45); border-width: 1px; cursor: copy; }
#ae-banner {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2001;
  max-width: min(720px, calc(100vw - 24px));
  padding: 8px 12px;
  background: rgba(19, 26, 36, 0.95);
  border: 1px solid #f472b6;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#ae-banner .muted { color: var(--muted); }
.ae-popup .leaflet-popup-content-wrapper, .ae-popup .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid #22d3ee; }
.ae-popup .leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.35; }
.ae-popup a.leaflet-popup-close-button { color: var(--muted); }
.ae-pop .ae-title { font-weight: 600; margin-bottom: 4px; padding-right: 14px; }
.ae-pop .ae-sel { margin-bottom: 6px; }
.ae-pop .ae-also { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ae-pop .ae-sub { font-size: 12px; color: var(--muted); margin: 8px 0 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.ae-pop .ae-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 5px; }
.ae-pop .ae-form input:not([type="checkbox"]) { width: 70px; flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid var(--input-border); border-radius: 6px; }
.ae-pop .ae-found { margin: 4px 0 8px; }
.ae-pop .ae-busy { color: #22d3ee; margin-bottom: 6px; }
.ae-pop button.danger { border-color: var(--neg); color: var(--neg); }
.ae-pop button.mini.on { border-color: #22d3ee; color: #22d3ee; }
.ae-pop .muted { color: var(--muted); }

/* MapLibre controls in the dark theme */
#view3d .maplibregl-ctrl-group { background: rgba(19, 26, 36, 0.85); }
#view3d .maplibregl-ctrl-group button + button { border-top-color: var(--border); }
#view3d .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
#view3d .maplibregl-ctrl-attrib { background: rgba(19, 26, 36, 0.75); color: var(--muted); }
#view3d .maplibregl-ctrl-attrib a { color: var(--muted); }
#view3d .maplibregl-ctrl-scale { background: rgba(19, 26, 36, 0.75); color: var(--text); border-color: var(--text); }
#view3d .maplibregl-popup-content { background: var(--panel); color: var(--text); }

/* ---------- start screen ---------- */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 3500;
  overflow-y: auto;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(239, 68, 68, 0.18), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(59, 130, 246, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(11, 15, 21, 0.9), rgba(11, 15, 21, 0.97));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#start-screen[hidden] { display: none; }
.st-card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 26px 28px 28px;
  background: rgba(19, 26, 36, 0.92);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: st-in 0.35s ease-out;
}
@keyframes st-in { from { opacity: 0; transform: translateY(12px); } }
.st-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.st-logo {
  width: 58px; height: 58px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
  transform: rotate(-8deg);
}
.st-hero h1 { margin: 0; font-size: 34px; letter-spacing: 0.02em; }
.st-hero p { margin: 2px 0 0; color: var(--muted); }
.st-card h2 { margin: 20px 0 4px; font-size: 18px; }
.st-continue {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--input-border);
}
.st-continue div { display: flex; flex-direction: column; }
.st-continue b { font-size: 16px; }
.st-continue span { color: var(--muted); font-size: 13px; }
.st-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.st-label .muted { font-weight: 400; margin-left: 6px; }
#start-screen input, #start-screen select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--bg);
}
.st-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.st-choice, .st-plane {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--input-border);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.st-choice span, .st-plane span { color: var(--muted); font-size: 12px; }
.st-choice:hover:not(:disabled), .st-plane:hover:not(:disabled) { transform: translateY(-1px); filter: none; border-color: #64748b; }
.st-choice.on, .st-plane.on { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6, 0 6px 20px rgba(59, 130, 246, 0.2); }
.st-choice.danger.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(239, 68, 68, 0.25); }
.st-planes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-plane { padding: 0 0 10px; overflow: hidden; }
.st-plane b, .st-plane span { padding: 0 11px; }
.st-plane .neg { color: var(--neg); }
.st-quick { margin-top: 18px; }
.st-quick summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.st-quick summary .muted { font-weight: 400; font-size: 12px; margin-left: 6px; }
.st-presets .st-choice { padding: 8px 11px; }
.st-art svg { display: block; width: 100%; height: auto; }
.st-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
button.big { padding: 10px 22px; font-size: 15px; font-weight: 700; border-radius: 10px; }
.st-warn { text-align: right; margin: 6px 0 0; }
@media (max-width: 520px) {
  .st-card { padding: 20px 16px; }
  .st-hero h1 { font-size: 26px; }
  .st-actions button { flex: 1; }
}

/* 3D view: info box over the plane under the mouse */
#view3d .plane-hover { pointer-events: none; }
#view3d .plane-hover .maplibregl-popup-content {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(19, 26, 36, 0.92);
  border: 1px solid var(--input-border);
  color: var(--text);
  font: 12px/1.45 system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
#view3d .plane-hover .maplibregl-popup-tip { display: none; }

/* ---------- rival airlines ---------- */
.rv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.rv-dot.big { width: 11px; height: 11px; margin-right: 6px; }
.rv-badge { font-size: 11px; white-space: nowrap; margin-left: 4px; color: var(--muted, #9aa3ae); }
.panel.rival { cursor: pointer; }
.panel.rival.selected { border-color: var(--accent); }

/* Planner: how-to steps, slot check and live slot state */
ol.howto { margin: 4px 0 6px; padding-left: 20px; font-size: 12px; line-height: 1.5; }
ul.slot-check { margin: 4px 0 6px; padding-left: 0; list-style: none; font-size: 12px; line-height: 1.45; }
ul.slot-check li { margin: 2px 0; }
ul.slot-check .warn-li { color: #fbbf24; }
ul.slot-check .warn-li button { margin-left: 2px; }
.slots-now { font-size: 12px; margin: 4px 0 8px; }
.slots-now ul { margin: 4px 0; padding-left: 0; list-style: none; }
.slots-now li { padding: 2px 6px; border-radius: 6px; }
.slots-now li:hover { background: var(--panel-2); }
.label.neg { color: var(--neg); }

/* Slot market of an airport: who holds the slots, lease, offers */
.slot-market { margin: 6px 0 8px; font-size: 12px; }
.sm-bar { display: flex; height: 12px; border-radius: 4px; overflow: hidden; margin: 5px 0; background: var(--panel-2); gap: 1px; }
.sm-bar i { display: block; min-width: 3px; }
.sm-bar i.free { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.35) 0 3px, transparent 3px 6px) !important; }
.sm-table td { vertical-align: middle; padding: 2px 4px; }
.sm-table td.num, .sm-overview td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rv-dot.sm-free { background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.7) 0 2px, transparent 2px 4px); }
.sm-rep { margin-top: 4px; cursor: help; }
.sm-overview tr.on td { background: var(--panel-2); }

/* ---------- phones and touch screens ---------- */
/* No double-tap zoom on controls, no pull-to-refresh while panning the map or scrolling a panel. */
button, .pcard, #rail, #topbar, #strip, .leaflet-control a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior: none; }
body { height: 100dvh; } /* the visible height, also while the phone's address bar is shown */
#sidebar, #strip-list, #market, .set-card, #devtools { overscroll-behavior: contain; }
.sheet-grip { display: none; }
/* Notches and the home indicator (viewport-fit=cover in index.html). */
#topbar {
  padding-top: max(6px, env(safe-area-inset-top));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
#strip { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; } /* smaller fields make iPhones zoom in on focus */
  table.legs input[type=time] { width: 96px; }
  .keys-help, #devtools-toggle .muted { display: none; }
}
@media (hover: none) {
  #rail button:hover:not(.active) { background: none; } /* no hover colour stuck on the last tapped tab */
}

/* Portrait phones: the sections become a tab bar at the bottom and the sidebar a sheet over the map. */
@media (max-width: 640px) {
  :root { --tabbar-h: 56px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  #topbar { gap: 8px; padding-bottom: 5px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .tb-left { gap: 4px; }
  .icon-btn { height: 36px; min-width: 36px; }
  #speed-label { min-width: 0; max-width: 58px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #speed-pop { width: min(280px, calc(100vw - 60px)); }
  .tb-status { gap: 8px; min-width: 0; }
  #money { font-size: 15px; white-space: nowrap; }
  #clock-time { font-size: 15px; }
  #clock-day { font-size: 10px; white-space: nowrap; }
  .menu { left: max(8px, env(safe-area-inset-left)); top: calc(48px + env(safe-area-inset-top)); }

  #rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2050;
    width: auto; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    flex-direction: row; gap: 0;
    padding: 3px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-left: none; border-top: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  #rail button { flex: 1 0 44px; justify-content: center; padding: 4px 0; }

  #sidebar {
    top: var(--sheet-top, 34%); left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    padding: 0 12px 16px;
    border-left: none; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
    transition: top 0.18s ease-out;
  }
  #sidebar.dragging { transition: none; }
  /* The head stays on top while the sheet scrolls; drag it to resize the sheet, tap it for full height. */
  .side-head {
    position: sticky; top: 0; z-index: 5; margin: 0 -12px; padding: 18px 12px 8px;
    background: rgb(11, 15, 21); touch-action: none; cursor: grab;
  }
  .sheet-grip { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #475569; }
  .side-head .close { font-size: 22px; min-width: 36px; min-height: 36px; }

  #strip-list { gap: 5px; padding: 5px 6px; }
  .pcard { width: 92px; height: 60px; }
  .pcard img { height: 38px; }
  .pcard.add { width: 48px; }
  #toast { bottom: auto; top: calc(56px + env(safe-area-inset-top)); max-width: calc(100vw - 24px); text-align: center; }
  #devtools { top: calc(52px + env(safe-area-inset-top)); left: 8px; max-height: calc(100dvh - 150px); }
  #bugreport { top: calc(52px + env(safe-area-inset-top)); right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 150px); }
  .mk-top { gap: 10px; padding: 10px 12px 4px; }
  .mk-top h1 { font-size: 16px; }
  .mk-next { display: none; }
  .mk-money { white-space: nowrap; }
  .leaflet-control-scale { display: none; }
  .leaflet-control-attribution { font-size: 9px; }
}
@media (max-width: 640px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  .leaflet-control-zoom { display: none; } /* pinch to zoom */
}

/* Phones held sideways: little height, so a slim rail without labels and smaller plane cards. */
@media (max-height: 500px) and (min-width: 641px) {
  #topbar { padding-top: max(3px, env(safe-area-inset-top)); padding-bottom: 3px; }
  .icon-btn { height: 30px; min-width: 30px; }
  #money, #clock-time { font-size: 15px; }
  #rail { width: calc(52px + env(safe-area-inset-right)); padding: 2px max(2px, env(safe-area-inset-right)) 2px 2px; gap: 0; }
  #rail button { padding: 6px 0; }
  #rail button small { display: none; }
  #sidebar { right: calc(52px + env(safe-area-inset-right)); width: min(440px, 62%); }
  #strip-list { padding: 4px 6px; }
  .pcard { width: 84px; height: 48px; }
  .pcard img { height: 30px; }
  .pc-type { font-size: 10px; }
  .pcard.add { width: 44px; font-size: 18px; }
  #devtools { top: 44px; max-height: calc(100dvh - 56px); }
}

/* ---------- airport checklist (js/airportcheck.js, F8) ---------- */
#apcheck {
  position: fixed;
  top: 56px;
  left: 12px;
  z-index: 2001;
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: var(--panel);
  border: 2px dashed #4ade80;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-size: 13px;
}
#apcheck.beside { left: 384px; } /* the airport editor is open on the left */
#apcheck[hidden] { display: none; }
#bugreport {
  position: fixed;
  top: 56px;
  right: 12px;
  z-index: 3600; /* above the start screen and the newspaper: bugs happen there too */
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--panel);
  border: 2px solid #f87171;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-size: 13px;
}
#bugreport[hidden] { display: none; }
#bugreport .dev-head { display: flex; justify-content: space-between; align-items: center; }
#bugreport .dev-row { display: flex; flex-wrap: wrap; gap: 5px; }
#bugreport input:not([type]), #bugreport textarea { font: inherit; padding: 4px 7px; border: 1px solid var(--input-border); border-radius: 6px; flex: 1; min-width: 0; width: 100%; box-sizing: border-box; resize: vertical; }
#bugreport .muted { color: var(--muted); }
#bugreport .small { font-size: 12px; }
#bugreport .br-check { display: flex; gap: 6px; align-items: flex-start; }
#bugreport pre { white-space: pre-wrap; word-break: break-word; font-size: 11px; max-height: 160px; overflow: auto; margin: 4px 0 0; }
#bugreport .br-list { margin: 2px 0 0; padding-left: 18px; }
#bugreport .br-list small { display: block; }
#br-msg { color: var(--pos); font-size: 12px; }
#br-msg:empty { display: none; }
#br-msg.bad { color: var(--neg); }
#apcheck .dev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#apcheck .muted { color: var(--muted); }
#apcheck .small { font-size: 12px; }
#apcheck section { border-top: 1px solid var(--border); padding: 6px 0 0; margin-top: 6px; }
#apcheck .dev-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
#apcheck input, #apcheck textarea { font: inherit; padding: 3px 6px; border: 1px solid var(--input-border); border-radius: 6px; flex: 1; min-width: 0;
  background: var(--panel-2); color: var(--text); }
#apcheck textarea { width: 100%; box-sizing: border-box; resize: vertical; }
#apcheck .ck-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#apcheck .ck-filter button { font-size: 12px; padding: 2px 7px; }
.ck-bar { display: flex; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-bottom: 4px; }
.ck-bar i { display: block; height: 100%; min-width: 0; }
.ck-bar i.ok { background: #22c55e; }
.ck-bar i.checked { background: #3b82f6; }
.ck-bar i.bad { background: #ef4444; }
.ck-list { list-style: none; margin: 4px 0; padding: 0; overflow-y: auto; flex: 1; min-height: 120px; }
.ck-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; cursor: pointer; border-left: 3px solid transparent; }
.ck-row:hover { background: var(--panel-2); }
.ck-row.sel { background: var(--panel-2); outline: 1px solid var(--border); }
.ck-row.checked { border-left-color: #3b82f6; }
.ck-row.ok { border-left-color: #22c55e; }
.ck-row.bad { border-left-color: #ef4444; }
.ck-n { width: 34px; text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.ck-dot { flex: none; font-size: 12px; }
.ck-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-name small { color: var(--muted); }
.ck-tag { flex: none; font-size: 11px; color: var(--muted); padding: 0 5px; border-radius: 8px; background: var(--bg); }
.ck-tag.start { color: var(--warn); }
.ck-tag.busy { color: #93c5fd; }
.ck-unsaved { color: var(--warn); font-weight: 700; flex: none; }
.ck-detail { padding: 4px 6px 8px 44px; border-bottom: 1px solid var(--border); }
#ck-msg { min-height: 1.4em; color: var(--pos); font-size: 12px; }
#ck-msg.bad { color: var(--neg); }
@media (max-width: 1100px) { #apcheck.beside { left: auto; right: 12px; } }

/* ---------- loading screen (index.html; js/ui.js showLoading / hideLoading) ---------- */
#loading {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 70%);
  color: var(--text);
  transition: opacity 0.4s;
}
#loading[hidden] { display: none; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-card { width: min(420px, calc(100vw - 48px)); text-align: center; }
.ld-card h1 { margin: 6px 0 18px; font-size: 30px; letter-spacing: 0.04em; }
.ld-sky { position: relative; height: 70px; overflow: hidden; }
.ld-sky::before { /* the runway */
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--muted) 0 14px, transparent 14px 26px); opacity: 0.5;
}
.ld-plane {
  position: absolute; left: -40px; bottom: 10px; font-size: 30px; color: var(--accent);
  animation: ld-takeoff 2.4s cubic-bezier(0.5, 0, 0.6, 1) infinite;
}
@keyframes ld-takeoff { /* (the ✈ glyph points up and to the right: turned 45° it faces right) */
  0% { transform: translate(0, 0) rotate(45deg); opacity: 0; }
  10% { opacity: 1; }
  45% { transform: translate(190px, 0) rotate(45deg); }
  100% { transform: translate(480px, -70px) rotate(31deg); opacity: 0.2; }
}
.ld-track { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border); }
#ld-bar { display: block; height: 100%; width: 35%; background: var(--accent); border-radius: 4px; transition: width 0.2s; }
#loading:not(.det) #ld-bar { animation: ld-indet 1.3s ease-in-out infinite; }
@keyframes ld-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
#ld-text { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.ld-fail { margin-top: 14px; font-size: 13px; }
.ld-fail p { margin: 0 0 8px; color: var(--neg); }
.ld-fail button { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }

/* ---------- main menu and its pages (js/ui.js start screen) ---------- */
#start-screen[data-page="menu"] { display: flex; align-items: center; justify-content: center; overflow: hidden; }
#start-screen[data-page="menu"][hidden] { display: none; }
.mm-card { width: min(440px, 100%); text-align: center; padding: 30px 30px 22px; position: relative; z-index: 1; }
.mm-logo {
  width: 74px; height: 74px; margin: 0 auto 10px; display: grid; place-items: center; font-size: 38px; color: #fff;
  border-radius: 20px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent); transform: rotate(-8deg);
}
.mm-title { margin: 0; font-size: 44px; letter-spacing: 0.03em; line-height: 1.1; }
.mm-tag { margin: 4px 0 22px; color: var(--muted); }
.mm-buttons { display: flex; flex-direction: column; gap: 10px; }
.mm-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; text-align: left; border-radius: 12px; }
.mm-btn b { font-size: 17px; }
.mm-btn span { font-size: 12px; color: var(--muted); }
.mm-btn.primary span { color: inherit; opacity: 0.85; }
.mm-btn:hover:not(:disabled) { transform: translateX(3px); }
.mm-small { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.mm-foot { margin: 16px 0 0; font-size: 11px; color: var(--muted); }
.mm-back { margin-bottom: 8px; }
.mm-page h2 { margin: 6px 0 4px; }
.mm-file {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; cursor: pointer;
  border: 2px dashed var(--input-border); border-radius: 12px; background: var(--panel-2);
}
.mm-file:hover { border-color: var(--accent); }
.mm-file input { display: none; }
/* Planes crossing the sky behind the menu. */
.mm-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mm-plane {
  position: absolute; top: 18%; left: -10%; font-size: 26px; color: var(--accent); opacity: 0.7;
  animation: mm-cross 26s linear infinite;
}
.mm-plane::after { /* contrail */
  content: ""; position: absolute; right: 100%; top: 50%; width: 260px; height: 3px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 45%, transparent)); border-radius: 2px;
}
.mm-plane i { display: inline-block; font-style: normal; transform: rotate(45deg); } /* (facing right) */
.mm-plane.two { top: 72%; font-size: 18px; opacity: 0.45; animation-duration: 38s; animation-delay: -17s; }
@keyframes mm-cross { from { transform: translateX(0); } to { transform: translateX(125vw); } }
@media (prefers-reduced-motion: reduce) { .mm-plane, .ld-plane { animation: none; } }

/* ---------- 3D warning (js/view3d.js) ---------- */
#warn3d {
  position: fixed; inset: 0; z-index: 3700; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); padding: 16px;
}
.w3-card { width: min(460px, 100%); padding: 20px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.w3-card h2 { margin: 0 0 8px; font-size: 19px; display: flex; gap: 10px; align-items: center; }
.w3-card h2 span { font-size: 26px; }
.w3-card p { margin: 8px 0; }
.w3-gpu { font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.w3-gpu.slow { color: var(--neg); }
.w3-card .row { justify-content: flex-end; margin-top: 14px; }

/* ---------- plane names (Fleet card ✏️) ---------- */
.plane-card .rename-btn { padding: 0 4px; font-size: 11px; opacity: 0.6; vertical-align: middle; }
.plane-card .rename-btn:hover { opacity: 1; }
.plane-card .rename input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--input-border); border-radius: 6px; font-weight: 700; }

/* ---------- windows that can be moved (js/windows.js) and the plane and timetable windows (js/planewin.js) ---------- */
.fg-movable .dev-head, .fg-movable .side-head, .fg-win-head { cursor: grab; user-select: none; }
.fg-dragging, .fg-dragging * { cursor: grabbing !important; user-select: none; }
.fg-win {
  position: fixed;
  z-index: 2100;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  font-size: 13px;
}
.fg-win[hidden] { display: none; }
.fg-win-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.fg-win-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-win-title .muted { font-weight: 400; color: var(--muted); }
.fg-win-body { padding: 8px 10px 10px; overflow-y: auto; }
/* the sound mixer (F6, js/soundmix.js) */
.mix-pick { display: flex; gap: 6px; align-items: center; }
.mix-pick select { flex: 1; min-width: 0; }
.mix-help { margin: 6px 0 8px; font-size: 12px; }
.mix-row { display: grid; grid-template-columns: 9.5em 1fr 3.2em auto; gap: 4px 8px; align-items: center; padding: 3px 0; }
.mix-row label { color: var(--muted); }
.mix-row.own label { color: inherit; font-weight: 600; }
.mix-row input[type=range] { width: 100%; min-width: 0; }
.mix-pick-row select { grid-column: span 2; width: 100%; min-width: 0; }
.mix-val { text-align: right; font-variant-numeric: tabular-nums; }
.mix-note { grid-column: 2 / -1; font-size: 11px; margin-top: -3px; }
.mix-foot { margin-top: 8px; display: flex; justify-content: flex-end; }
.tt-win .fg-win-body .panel { margin: 0; padding: 0; border: none; background: none; box-shadow: none; }
.pw-cam { position: relative; height: 200px; margin: -8px -10px 8px; background: #1e293b; overflow: hidden; }
.pw-cam-map { position: absolute; inset: 0; }
.pw-cam-note { position: absolute; left: 10px; bottom: 8px; color: #cbd5e1; font-size: 12px; pointer-events: none; }
.pw-phase { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.pw-route { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.pw-route > span:not(.pw-arrow) { flex: 1; min-width: 0; }
.pw-route small { display: block; color: var(--muted); }
.pw-arrow { color: var(--muted); padding-top: 1px; }
.pw-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 8px; }
.pw-bar i { display: block; height: 100%; background: #007aff; }
.pw-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; margin-bottom: 6px; }
.pw-grid span { color: var(--muted); }
.pw-grid small { color: var(--muted); }
.pw-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* slots by class (js/planner.js slotMarket) */
.sm-cls { width: 100%; margin-top: 4px; border-collapse: collapse; }
.sm-cls th { font-weight: 500; color: var(--muted); text-align: left; font-size: 11px; }
.sm-cls td, .sm-cls th { padding: 1px 4px; }
.ae-class { color: #22d3ee; font: 700 16px/1 system-ui, sans-serif; text-shadow: 0 0 3px #000, 0 0 3px #000; white-space: nowrap; }
.ae-class small { display: block; font-size: 11px; font-weight: 600; }
.site-check { list-style: none; margin: 4px 0; padding: 0; font-size: 12px; }
.site-check li { padding: 1px 0; }
#apedit .ae-site { border-top: none; }
.pw-rw { margin-top: 6px; }
.pw-rw-head { font-weight: 600; margin-bottom: 2px; }
.pw-rw-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.pw-rw-row b { width: 36px; }
.pw-rw-row select { flex: 1; min-width: 0; }

/* The four airport categories (C.airports.categories): a label in the airport panel, the legend and the lists. */
.tag.ap-cat { color: #fff; }
.tag.ap-cat.cat-small { background: #4b5563; }
.tag.ap-cat.cat-regional { background: #0f766e; }
.tag.ap-cat.cat-large { background: #1d4ed8; }
.tag.ap-cat.cat-hub { background: #b45309; }
.panel h4.ap-group { margin: 12px 0 2px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }

/* the plane stats window (js/planewin.js openStats): its records, as OpenTTD's vehicle details */
.ps-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ps-top img { width: 132px; height: 60px; object-fit: contain; flex: none; }
.ps-top > div { min-width: 0; }
.ps-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; margin-bottom: 8px; }
.ps-grid > span { color: var(--muted); }
.ps-grid small { color: var(--muted); font-weight: 400; }
.ps-table th, .ps-table td { text-align: right; }
.ps-table th:first-child, .ps-table td:first-child { text-align: left; color: var(--muted); }
.ps-table th small { font-weight: 400; color: var(--muted); }
.ps-table tr.ps-net td { border-bottom: none; padding-top: 5px; }
.ps-win h4 { margin: 10px 0 4px; font-size: 13px; }
.ps-flights td:last-child { text-align: right; }

/* clouds and weather (js/weather.js): the 2D cloud canvas, and rain, snow, fog and lightning over both maps */
.fg-clouds { pointer-events: none; }
#wx-fx { position: absolute; inset: 0; z-index: 1150; pointer-events: none; overflow: hidden; }
#wx-fx > i { position: absolute; inset: -40%; display: none; will-change: transform; }
#wx-fx.rain > i, #wx-fx.snow > i { display: block; }
#wx-fx.rain .wx-a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cline x1='42' y1='16' x2='42' y2='38' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='83' y1='8' x2='83' y2='30' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='68' y1='39' x2='68' y2='61' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='9' y1='54' x2='9' y2='76' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='7' y1='46' x2='7' y2='68' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='11' y1='10' x2='11' y2='32' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='55' y1='88' x2='55' y2='110' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='17' y1='24' x2='17' y2='46' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3Cline x1='80' y1='100' x2='80' y2='122' stroke='%23dbeafe' stroke-opacity='0.55' stroke-width='1.2'/%3E%3C/svg%3E"); animation: wx-fall 0.45s linear infinite; opacity: 0.55; }
#wx-fx.rain .wx-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cline x1='74' y1='46' x2='74' y2='58' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='123' y1='5' x2='123' y2='17' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='108' y1='34' x2='108' y2='46' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='20' y1='14' x2='20' y2='26' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='40' y1='95' x2='40' y2='107' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='24' y1='67' x2='24' y2='79' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='81' y1='43' x2='81' y2='55' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='70' y1='7' x2='70' y2='19' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='9' y1='24' x2='9' y2='36' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='86' y1='50' x2='86' y2='62' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='41' y1='68' x2='41' y2='80' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='58' y1='35' x2='58' y2='47' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='101' y1='81' x2='101' y2='93' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='32' y1='67' x2='32' y2='79' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='67' y1='102' x2='67' y2='114' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3Cline x1='92' y1='33' x2='92' y2='45' stroke='%23dbeafe' stroke-opacity='0.35' stroke-width='1.2'/%3E%3C/svg%3E"); animation: wx-fall 0.8s linear infinite; opacity: 0.45; }
#wx-fx.rain.heavy .wx-a { opacity: 0.85; }
#wx-fx.rain.heavy .wx-b { opacity: 0.7; }
#wx-fx.rain.heavy { background: rgba(30, 41, 59, 0.18); }
#wx-fx.snow .wx-a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Ccircle cx='123' cy='17' r='1.8' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='95' cy='22' r='1.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='8' cy='85' r='2.2' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='73' cy='110' r='1.7' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='88' cy='76' r='2.0' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='59' cy='105' r='2.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='61' cy='84' r='1.5' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='89' cy='82' r='2.4' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='103' cy='38' r='1.8' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='85' cy='6' r='1.9' fill='white' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: wx-snow 4s linear infinite; }
#wx-fx.snow .wx-b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Ccircle cx='24' cy='17' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='97' cy='19' r='1.0' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='51' cy='109' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='58' cy='70' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='103' cy='108' r='1.0' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='54' cy='47' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='120' cy='21' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='31' cy='31' r='1.1' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='75' cy='35' r='0.8' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='54' cy='48' r='1.2' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='119' cy='87' r='1.1' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='78' cy='85' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='113' cy='98' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='100' cy='51' r='1.1' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='16' cy='80' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='11' cy='28' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='44' cy='9' r='0.8' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='21' cy='15' r='1.0' fill='white' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: wx-snow 7s linear infinite; opacity: 0.7; }
#wx-fx.fog { background: radial-gradient(ellipse at 50% 60%, rgba(226, 232, 240, 0.15), rgba(226, 232, 240, 0.45)); }
#wx-fx.still > i { animation-play-state: paused; }
#wx-fx .wx-flash { inset: 0; display: block; background: #f8fafc; opacity: 0; }
#wx-fx .wx-flash.on { animation: wx-flash 0.6s ease-out; }
@keyframes wx-fall { from { transform: rotate(12deg) translateY(-128px); } to { transform: rotate(12deg) translateY(0); } }
@keyframes wx-snow { from { transform: rotate(-8deg) translateY(-128px); } to { transform: rotate(-8deg) translateY(0); } }
@keyframes wx-flash { 0% { opacity: 0; } 8% { opacity: 0.5; } 20% { opacity: 0.05; } 32% { opacity: 0.35; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #wx-fx > i { animation: none !important; } #wx-fx .wx-flash { display: none; } }
#wx-fx .wx-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 120px);
  padding: 4px 10px; border-radius: 12px; background: rgba(15, 22, 32, 0.78); color: #e5e7eb;
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#wx-fx .wx-chip[hidden] { display: none; }
@media (max-width: 640px) { #wx-fx .wx-chip { top: 52px; } } /* (phones: under the 3D view's buttons, not over them) */

/* winds placed with the developer tools (js/devtools.js Wind, drawn by js/weather.js) */
#map.wind-pick, #map.wind-pick .leaflet-interactive, #map.wind-pick #view3d canvas { cursor: crosshair !important; }
.wx-wind { pointer-events: none; }
.wx-wind-in {
  transform: translate(-50%, -160%); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 9px 2px 5px; border-radius: 12px; background: rgba(8, 47, 73, 0.88); color: #e0f2fe;
  font: 600 12px/1.4 system-ui, sans-serif; box-shadow: 0 0 0 1px #7dd3fc;
}
.wx-wind-arrow { display: inline-block; color: #7dd3fc; font-size: 15px; }
.wx-wind-3d { position: absolute; left: 0; top: 0; }
#devtools .dev-compass { display: inline-flex; gap: 2px; flex-wrap: wrap; }
#devtools .dev-compass .on { background: #0369a1; color: #fff; }
#devtools .dev-wind input[type=number], #devtools .dev-wnum { width: 56px; }
#devtools .dev-wind-row { align-items: center; gap: 6px; }