/* Kurt Air flight simulator. Flight-deck interface: the scene fills the screen and the menus sit on it as dark glass
   with square corners and hairlines. Headlines, captions and buttons use the squared display face in capitals; running
   text stays in the system face. White plates mark what is selected or under the pointer, gold marks the one thing to do
   next, money and progress. Live numbers (HUD, timers) use the condensed number face with tabular figures. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/chakra-petch-700.woff2') format('woff2'); }
@property --pc { syntax: '<color>'; inherits: false; initial-value: transparent; }
:root {
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --disp: 'Chakra Petch', Bahnschrift, 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --num: Bahnschrift, 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --bg: #05070a; --ink: #f1f4f8; --ink2: #aeb8c4; --ink3: #808c99;
  --line: rgba(190, 215, 255, .11); --line2: rgba(190, 215, 255, .22); --hover: rgba(190, 215, 255, .08); --track: rgba(190, 215, 255, .17);
  --signal: #f6b93b; --signal2: #ffd071; --signal-ink: #151003; --signal-soft: rgba(246, 185, 59, .13);
  --plate: #f1f4f8; --plate-ink: #06080b;
  --sel: #f1f4f8; --sel-soft: rgba(241, 244, 248, .1); --focus: #ffd071;
  --good: #5fe3a1; --good-soft: rgba(95, 227, 161, .12); --warn: #ffc23d; --warn-soft: rgba(255, 194, 61, .13); --bad: #ff6a5e; --bad-soft: rgba(255, 106, 94, .13);
  --panel: rgba(7, 10, 14, .88); --card: rgba(190, 215, 255, .045); --card-solid: #10151c; --raised-hover: #19212b; --well: rgba(3, 5, 8, .6);
  --glass: rgba(7, 10, 14, .6); --glass-hover: rgba(14, 19, 26, .82); --glass-edge: rgba(190, 215, 255, .2);
  --blur: blur(22px) saturate(1.15);
  --shadow: 0 30px 80px rgba(0, 0, 0, .6);
  --r-lg: 2px; --r-md: 2px; --r-sm: 1px;
  --cut: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* page gutters of the full-screen menus */
  --gl: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left)); --gr: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right));
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color-scheme: dark; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grow { flex: 1; }
[hidden] { display: none !important; }

/* ================================================================== boot: the lockup bottom left, one progress line along the bottom edge */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; align-items: end; justify-items: start;
  padding: max(32px, env(safe-area-inset-top)) max(clamp(24px, 6vw, 88px), env(safe-area-inset-right)) max(clamp(48px, 10vh, 96px), env(safe-area-inset-bottom)) max(clamp(24px, 6vw, 88px), env(safe-area-inset-left));
  background: radial-gradient(120% 90% at 85% 10%, #131c29 0%, rgba(19, 28, 41, 0) 55%), linear-gradient(180deg, #080b10, var(--bg)); transition: opacity .7s ease; }
#boot::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(190, 215, 255, .035) 0 1px, transparent 1px 120px); -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); pointer-events: none; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-card { position: relative; width: min(620px, 100%); text-align: left; }
.boot-logo { font: 700 clamp(52px, 11vw, 104px)/.88 var(--disp); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.boot-logo::before { content: ''; display: block; width: 64px; height: 5px; margin: 0 0 22px 4px; background: var(--signal); transform: skewX(-32deg); }
.boot-sub { margin-top: 16px; font: 600 13px var(--disp); letter-spacing: .42em; text-transform: uppercase; color: var(--signal); }
.boot-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: var(--track); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--signal); box-shadow: 0 0 18px rgba(246, 185, 59, .7); transition: width .25s ease; }
.boot-msg { min-height: 18px; margin-top: 36px; font: 600 12px var(--disp); letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }
.boot-msg.boot-error { max-width: 46ch; font: 400 15px/1.5 var(--font); letter-spacing: 0; text-transform: none; color: var(--bad); }
#boot-retry { margin-top: 18px; }
.boot-card noscript { display: block; margin-top: 12px; color: var(--ink2); }

/* Flight transitions use a lightweight DOM screen while the 3D view is prepared. */
#screen > .screen.loading { animation: none; display: grid; place-items: center; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) var(--gr) max(24px, env(safe-area-inset-bottom)) var(--gl);
  background: radial-gradient(ellipse at 50% 25%, #15212d, var(--bg) 75%); }
.loading-card { width: min(580px, 100%); margin: auto; }
.loading-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; font: 700 24px var(--disp); text-transform: uppercase; }
.loading-brand > span { color: var(--signal); font-size: 11px; letter-spacing: .18em; }
.loading-radar { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin: 32px 0;
  border: 1px solid var(--line2); border-radius: 50%; background: radial-gradient(circle, transparent 48%, var(--line) 49% 50%, transparent 51%); }
.loading-radar .ico { width: 32px; height: 32px; color: var(--signal); }
.loading-sweep { position: absolute; inset: -1px; border: 2px solid transparent; border-top-color: var(--signal); border-radius: 50%; animation: loadingSpin 1.5s linear infinite; }
.screen.loading h2 { font-size: clamp(25px, 5vw, 38px); line-height: 1.12; }
.screen.loading .loading-plan { margin-top: 12px; color: var(--ink2); overflow-wrap: anywhere; }
.loading-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 28px; }
.loading-status { font-size: 14px; }
.loading-percent { flex-shrink: 0; color: var(--signal); font: 600 20px var(--num); font-variant-numeric: tabular-nums; }
.loading progress { display: block; width: 100%; height: 5px; appearance: none; border: 0; background: var(--track); color: var(--signal); }
.loading progress::-webkit-progress-bar { background: var(--track); }
.loading progress::-webkit-progress-value { background: var(--signal); }
.loading progress::-moz-progress-bar { background: var(--signal); }
.loading-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.loading-steps li { color: var(--ink2); font-size: 12px; }
.loading-steps li > span { display: block; margin-bottom: 5px; font: 600 16px var(--num); }
.loading-steps [aria-current], .loading-steps .complete { color: var(--signal); }
.screen.loading .loading-tip { margin-top: 28px; color: var(--ink2); font-size: 13px; line-height: 1.6; }
.loading-error .loading-sweep { animation: none; border-top-color: var(--bad); }
.loading-error .loading-status { color: var(--bad); }
.loading [hidden] { display: none !important; }
.loading-error .loading-steps, .loading-error .loading-tip { display: none; }
@keyframes loadingSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .loading-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-height: 500px) { .loading-radar { width: 64px; height: 64px; margin: 16px 0; } .loading-readout { margin-top: 12px; } .screen.loading .loading-tip { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .loading-sweep { animation: none; } }

/* ================================================================== icons (CSS masks, no emoji) */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-back { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.ico-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6.8'/%3E%3Cpath stroke-width='2.8' d='M12 5V2.6M18.06 8.5l2.1-1.2M18.06 15.5l2.1 1.2M12 19v2.4M5.94 15.5l-2.1 1.2M5.94 8.5l-2.1-1.2'/%3E%3C/svg%3E"); }
.ico-help { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.4a2.6 2.6 0 1 1 3.6 2.4c-.6.3-1 .8-1 1.5v.6M12 17.2h.01'/%3E%3C/svg%3E"); }
.ico-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E"); }
.ico-route { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='19' r='2.4'/%3E%3Ccircle cx='19' cy='5' r='2.4'/%3E%3Cpath d='M7.4 19H16a3.5 3.5 0 0 0 0-7H8a3.5 3.5 0 0 1 0-7h8.6'/%3E%3C/svg%3E"); }
.ico-briefcase { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3 12.5h18'/%3E%3C/svg%3E"); }
.ico-users { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 2.9-6 6.5-6s6.5 2.5 6.5 6M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.3c2.1.7 3.5 2.6 3.5 5.7'/%3E%3C/svg%3E"); }
.ico-book { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h14v15H6a2 2 0 0 0 0 4h14'/%3E%3C/svg%3E"); }
.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V6M17 16V9'/%3E%3C/svg%3E"); }
.ico-list { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); }
.ico-play { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a1 1 0 0 0 1.5.9l11.6-7.4a1 1 0 0 0 0-1.8L8.5 3.7A1 1 0 0 0 7 4.6z'/%3E%3C/svg%3E"); }
.ico-autopilot { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 3.5V7M12 17v3.5M3.5 12H7M17 12h3.5'/%3E%3C/svg%3E"); }
.ico-replay { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6M3.5 3.5V8H8'/%3E%3Cpath d='M10 9v6l5-3z' fill='%23000'/%3E%3C/svg%3E"); }
.ico-wrench { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3.6 17.4a2.1 2.1 0 0 0 3 3l5.7-5.7a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.ico-restart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7M20 4v5h-5'/%3E%3C/svg%3E"); }
.ico-home { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7M5.5 9.5V20h4.5v-5.5h4V20h4.5V9.5'/%3E%3C/svg%3E"); }
.ico-alert { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0zM12 9.5v4.5M12 17.3h.01'/%3E%3C/svg%3E"); }
.ico-camera { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h3l1.6-2.5h6.8L17 7.5h3a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8.5a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.2' r='3.5'/%3E%3C/svg%3E"); }
.ico-close { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ico-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-minus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ico-fit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
.ico-star { --ico: var(--star); }
.ico-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ico-clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.4V8l2.6 1.6'/%3E%3C/svg%3E"); }
.ico-lock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Crect x='2.8' y='7' width='10.4' height='7.6' rx='1.4'/%3E%3C/svg%3E"); }
.ico-plane { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2l1 8 8 5v2l-8-2v5l3 2v1l-5-1-5 1v-1l3-2v-5l-8 2v-2l8-5z'/%3E%3C/svg%3E"); }
.ico-gauge { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.2 17.5a9 9 0 1 1 15.6 0'/%3E%3Cpath d='m12 13 4.5-4.5'/%3E%3Ccircle cx='12' cy='13' r='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.ico-pause { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4.2' height='14' rx='1'/%3E%3Crect x='13.8' y='5' width='4.2' height='14' rx='1'/%3E%3C/svg%3E"); }
.ico-map { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m3 5 6-2 6 2 6-2v16l-6 2-6-2-6 2zM9 3v16M15 5v16'/%3E%3C/svg%3E"); }

/* ================================================================== HUD
   Head-up glass: thin dark plates with square corners and a bright top hairline, sized in em on a 10 px base that hud.js
   scales (1 design px = .1em). Captions use the display face in capitals, live values the number face. Top row:
   annunciators left, mission and messages centre, tool buttons right. Bottom: the data strip, or PFD + systems + map. */
#hud { --accent: var(--signal); --g-text: #fff; --g-dim: rgba(232, 240, 250, .74); --g-bg: rgba(5, 8, 12, .54); --g-bg2: rgba(5, 8, 12, .86); --g-edge: rgba(200, 225, 255, .17); --g-top: rgba(255, 255, 255, .5);
  --g-cyan: #7ad7ff; --g-magenta: #ff8df2; --g-green: #5fe3a1; --g-amber: #ffc23d; --g-red: #e8382d; --g-r: 2px; }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: var(--g-text); font-family: var(--font); font-size: 10px; font-variant-numeric: tabular-nums; --clear: 0px; }
#hud > * { pointer-events: none; }
#hud [hidden] { display: none !important; }
#hud .hud-safe { position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); visibility: hidden; pointer-events: none; }
.hud-glass { background: var(--g-bg); border: 1px solid var(--g-edge); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* top row */
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46em) minmax(0, 1fr); grid-template-areas: 'cas centre tools'; align-items: start; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
/* annunciators: flat tags with a status edge on the left */
#hud-cas { grid-area: cas; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; }
#hud-cas .cas-i { max-width: 100%; padding: .42em 1em .38em .85em; border-radius: var(--g-r); border-left: .3em solid var(--g-dim); font: 600 max(11px, 1.12em)/1.3 var(--disp); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--g-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#hud-cas .warning { color: #fff; background: rgba(232, 56, 45, .88); border-left-color: #fff; }
#hud-cas .caution { color: #1d1400; background: rgba(255, 194, 61, .93); border-left-color: #1d1400; }
#hud-cas .advisory { color: var(--g-text); }
#hud-cas .advisory.ok { color: var(--g-green); border-left-color: var(--g-green); }
#hud-cas .advisory.sel { color: var(--g-cyan); border-left-color: var(--g-cyan); }
.hud-centre { grid-area: centre; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
#hud-master { padding: .5em 1.6em .42em 1.8em; border-radius: var(--g-r); background: var(--g-red); color: #fff; font: 700 max(13px, 1.5em)/1.2 var(--disp); letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 4px 22px rgba(232, 56, 45, .5); animation: masterBlink 1s steps(1, end) infinite; }
@keyframes masterBlink { 50% { background: rgba(5, 8, 12, .82); color: #ff8a82; box-shadow: inset 0 0 0 2px #ff6357; } }
/* mission card: objective in front, timer and active leg below a hairline */
.hud-mission { position: relative; max-width: 100%; border-radius: var(--g-r); overflow: hidden; background: var(--g-bg); border: 1px solid var(--g-edge); border-top-color: var(--g-top); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.hud-mission::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .3em; background: var(--g-magenta); }
#hud-card { padding: .8em 1.5em .9em 1.8em; }
#hud-card .card-h { display: flex; gap: 1.2em; align-items: baseline; justify-content: space-between; font: 600 max(10px, 1em)/1.3 var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--g-dim); }
#hud-card .card-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud-card .card-time { flex: none; font: 700 1.2em/1.1 var(--num); letter-spacing: .06em; color: var(--g-text); }
#hud-card .card-time.warn { color: var(--g-amber); }
#hud-card .card-o { margin-top: .15em; font: 650 max(13px, 1.45em)/1.35 var(--font); }
#hud-card .card-o b { color: var(--g-cyan); }
#hud-card .card-leg { margin-top: .55em; padding-top: .55em; border-top: 1px solid var(--g-edge); display: flex; gap: 1.4em; align-items: baseline; font: 700 max(11px, 1.2em) var(--num); }
#hud-card .card-leg .wp { flex: 1; min-width: 0; color: var(--g-magenta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud-card .card-leg .wp i { display: inline-block; width: .6em; height: .6em; margin: 0 .6em .05em .1em; background: var(--g-magenta); transform: rotate(45deg); }
#hud-card .card-leg small { margin-right: .4em; font: 600 .78em var(--disp); letter-spacing: .16em; color: var(--g-dim); }
/* only "all instruments" shows the timer and the leg; lighter modes keep the objective alone */
#hud:not([data-mode='2']) #hud-card .card-h, #hud:not([data-mode='2']) #hud-card .card-leg { display: none; }
#hud-coach { padding: .7em 1.5em .8em 1.8em; font: 500 max(12px, 1.25em)/1.45 var(--font); color: rgba(255, 255, 255, .9); }
#hud-card:not([hidden]) + #hud-coach { border-top: 1px solid var(--g-edge); }
#hud-toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.toast { max-width: 100%; padding: .6em 1.5em; border-radius: var(--g-r); background: var(--g-bg2); border: 1px solid var(--g-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 650 max(12px, 1.3em)/1.35 var(--font); text-align: center; animation: toastIn .28s var(--ease); transition: opacity .4s, transform .4s; }
.toast.good { color: #c9f8e2; box-shadow: inset 0 -2px 0 var(--g-green); }
.toast.bad { color: #ffe7b8; box-shadow: inset 0 -2px 0 var(--g-amber); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } }
.hud-tools { grid-area: tools; justify-self: end; display: flex; gap: 4px; pointer-events: auto; }
#hud .hud-btn { --ink: #fff; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: max(44px, 3.7em); min-height: max(44px, 3.7em); padding: 0 max(11px, 1.1em); border-radius: var(--g-r);
  color: var(--g-text); background: linear-gradient(180deg, rgba(5, 8, 12, .5), rgba(5, 8, 12, .74)); border: 1px solid var(--g-edge); border-top-color: var(--g-top); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; font-size: max(13px, 1.3em); }
#hud .hud-btn:hover { background: var(--g-bg2); color: #fff; border-color: rgba(255, 255, 255, .5); }
#hud .hud-btn:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: 2px; }
#hud .hud-btn .ico { width: 1.35em; height: 1.35em; }
.hud-tools .pips { display: inline-flex; gap: 2px; align-items: flex-end; height: .9em; }
.hud-tools .pips b { width: 3px; background: rgba(255, 255, 255, .28); }
.hud-tools .pips b:nth-child(1) { height: 55%; } .hud-tools .pips b:nth-child(2) { height: 100%; }
#hud[data-mode='1'] .pips b:nth-child(1), #hud[data-mode='2'] .pips b { background: var(--g-cyan); }

/* bottom: data strip (mode 1 and cockpit view) */
#hud-strip, #hud-sys { position: absolute; display: flex; align-items: stretch; border-radius: var(--g-r); background: linear-gradient(180deg, rgba(5, 8, 12, .42), rgba(5, 8, 12, .7)); border: 1px solid var(--g-edge); border-top-color: var(--g-top);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
/* bracket ticks at both ends of the top hairline */
#hud-strip::before, #hud-strip::after, #hud-sys::before, #hud-sys::after { content: ''; position: absolute; top: -1px; width: 2px; height: .8em; background: #fff; pointer-events: none; }
#hud-strip::before, #hud-sys::before { left: -1px; } #hud-strip::after, #hud-sys::after { right: -1px; }
#hud-strip .cells { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#hud-strip .cell { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 1.3em; }
#hud-strip .cell + .cell::before { content: ''; position: absolute; left: 0; top: 1.1em; bottom: 1.1em; width: 1px; background: var(--g-edge); }
#hud-strip .cell small { padding-top: .3em; margin-top: -.3em; font: 600 max(9px, .86em)/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-strip .val { display: flex; align-items: baseline; gap: .25em; min-width: 0; white-space: nowrap; }
#hud-strip .val b { font: 700 2.3em/1.06 var(--num); letter-spacing: .01em; }
#hud-strip .val i { font: 600 max(10px, 1.05em) var(--num); font-style: normal; color: var(--g-dim); }
#hud-strip .crs { position: absolute; right: 1.2em; top: 1.05em; font: 700 max(10px, 1em)/1.2 var(--num); font-style: normal; color: var(--g-magenta); }
#hud-strip .cell[data-s='warn'] { background: rgba(232, 56, 45, .7); }
#hud-strip .cell[data-s='warn'] small, #hud-strip .cell[data-s='warn'] .val i { color: rgba(255, 255, 255, .9); }
#hud-strip .cell[data-s='caution'] .val b { color: var(--g-amber); }
#hud-strip .chips-s { flex: none; display: flex; align-items: stretch; border-left: 1px solid var(--g-edge); background: rgba(255, 255, 255, .035); }
.chip-s { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 5.6em; padding: 0 .7em; box-shadow: inset 0 -.2em 0 transparent; }
.chip-s + .chip-s::before { content: ''; position: absolute; left: 0; top: 1.1em; bottom: 1.1em; width: 1px; background: var(--g-edge); }
.chip-s small { font: 600 max(9px, .82em)/1.2 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--g-dim); white-space: nowrap; }
.chip-s b { font: 700 max(12px, 1.3em)/1.25 var(--num); white-space: nowrap; }
.chip-s[data-s='ok'] { box-shadow: inset 0 -.2em 0 var(--g-green); } .chip-s[data-s='ok'] b { color: var(--g-green); }
.chip-s[data-s='sel'] { box-shadow: inset 0 -.2em 0 var(--g-cyan); } .chip-s[data-s='sel'] b { color: var(--g-cyan); }
.chip-s[data-s='caution'] { box-shadow: inset 0 -.2em 0 var(--g-amber); } .chip-s[data-s='caution'] b { color: var(--g-amber); }
.chip-s[data-s='warn'] { background: rgba(232, 56, 45, .7); }
/* gap: the menus have a .stack helper of their own */
#hud-strip.stack { flex-direction: column; gap: 0; }
#hud-strip.stack .cells { flex: 1 1 0; }
#hud-strip.stack .chips-s { flex: 0 0 3.4em; border-left: 0; border-top: 1px solid var(--g-edge); }
#hud-strip.stack .chip-s { flex: 1 1 0; flex-direction: row; gap: .5em; min-width: 0; }
#hud-strip.stack .chip-s + .chip-s::before { top: .8em; bottom: .8em; }

/* bottom: all instruments */
#hud-pfd, #hud-dmg { position: absolute; display: block; }
#hud-mfd { position: absolute; display: block; pointer-events: auto !important; cursor: pointer; border-radius: var(--g-r); touch-action: manipulation; }
#hud-mfd:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: 3px; }
.scell { position: relative; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: 'l l' 'v e'; column-gap: .4em; align-content: center; align-items: baseline; padding: 0 .8em .2em; }
.scell + .scell::before { content: ''; position: absolute; left: 0; top: 1.1em; bottom: 1.1em; width: 1px; background: var(--g-edge); }
.scell small { grid-area: l; padding-top: .3em; margin-top: -.3em; font: 600 max(9px, .82em)/1.25 var(--disp); letter-spacing: .03em; text-transform: uppercase; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scell b { grid-area: v; font: 700 max(13px, 1.6em)/1.2 var(--num); white-space: nowrap; }
.scell em { grid-area: e; justify-self: end; min-width: 0; font: 600 max(10px, .95em)/1.2 var(--num); font-style: normal; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scell .meter { position: absolute; left: .8em; right: .8em; bottom: .6em; height: .2em; background: rgba(255, 255, 255, .16); overflow: hidden; text-decoration: none; }
.scell .meter i { display: block; height: 100%; background: var(--g-text); transform-origin: left; transform: scaleX(0); }
.scell[data-s='warn'] { background: rgba(232, 56, 45, .7); } .scell[data-s='warn'] .meter i { background: #fff; }
.scell[data-s='caution'] b { color: var(--g-amber); } .scell[data-s='caution'] .meter i { background: var(--g-amber); }
.scell[data-s='sel'] b { color: var(--g-cyan); }
.scell .lights { grid-area: 2 / 1 / 3 / -1; display: flex; gap: .25em; align-items: center; align-self: center; justify-self: start; }
.scell .lights i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 1px; font: 700 .95em var(--num); font-style: normal; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); }
.scell .lights i[data-s='ok'] { color: #052114; background: var(--g-green); }
.scell .lights i[data-s='caution'] { color: #1d1400; background: var(--g-amber); }
.scell .lights i[data-s='warn'] { color: #fff; background: var(--g-red); }
/* above the PFD (narrow screens) the row is only as wide as the PFD: drop the secondary line */
#hud-sys.tall .scell { padding: 0 .6em; } #hud-sys.tall .scell em { display: none; } #hud-sys.tall .scell b { font-size: 1.4em; }
#hud-sys.tall .scell small { font-family: var(--num); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* overlays */
#hud-wp { position: absolute; left: 0; top: 0; will-change: transform; }
#hud-wp .wp-mark { position: absolute; left: -.9em; top: -.9em; width: 1.8em; height: 1.8em; border: .22em solid var(--g-magenta); rotate: 45deg; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
#hud-wp.edge .wp-mark { left: -1.1em; top: -1.1em; width: 2.2em; height: 2.2em; border: 0; border-radius: 0; rotate: none; background: var(--g-magenta); clip-path: polygon(100% 50%, 15% 8%, 34% 50%, 15% 92%); }
#hud-wp .wp-lbl { position: absolute; left: 0; top: 0; padding: .32em .9em .28em; border-radius: var(--g-r); background: var(--g-bg2); border-left: .3em solid var(--g-magenta); color: #fff; font: 700 max(11px, 1.15em)/1.3 var(--num); letter-spacing: .04em; white-space: nowrap; }
#hud-hint { position: absolute; left: 50%; transform: translateX(-50%); padding: .5em 1.3em .45em; border-radius: var(--g-r); background: var(--g-bg); border: 1px solid var(--g-edge); border-top-color: var(--g-top); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 max(12px, 1.15em) var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--g-cyan); white-space: nowrap; }
#hud > .hud-action { --pc: var(--signal); pointer-events: auto; position: absolute; max-width: min(280px, calc(100vw - 24px)); min-height: 52px; padding: 0 26px 0 22px; display: inline-flex; align-items: center; gap: 12px; border-radius: 0;
  font: 700 15px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--signal-ink); background: linear-gradient(-45deg, transparent var(--cut), var(--pc) calc(var(--cut) + .5px)); border: 0; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5)); }
#hud > .hud-action:hover:not(:disabled) { --pc: #fff; }
#hud > .hud-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#hud > .hud-action:disabled { opacity: .55; }
#hud > .hud-action .key { color: inherit; background: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .35); }
#hud-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#hud-vf { position: absolute; left: 50%; top: calc((100% - var(--clear)) * .48); width: min(56vh, 420px, 80vw); height: min(36vh, 270px); transform: translate(-50%, -50%); }
#hud-vf i { position: absolute; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
#hud-vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
#hud-vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
#hud-vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
#hud-vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#hud-vf b { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: .4em 1.1em .35em; border-radius: var(--g-r); background: var(--g-bg2); font: 600 12px var(--disp); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
#hud-vf.ok i { border-color: var(--g-green); }
@media (max-width: 699px) {
  .hud-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'cas tools' 'centre centre'; row-gap: 8px; }
  #hud-cas .cas-i { white-space: normal; }
}
@media (max-width: 380px) { #hud .hud-btn { padding: 0 10px; } .hud-tools .pips { display: none; } }

/* ================================================================== menus: shared */
#screen { position: fixed; inset: 0; z-index: 15; pointer-events: none !important; }
#screen > .screen { position: absolute; inset: 0; animation: screenIn .26s ease-out; }
/* the hub is rebuilt on every tab change: only its content fades, not the whole screen */
#screen > .screen.hub { animation: none; }
@keyframes screenIn { from { opacity: 0; } }
.screen { color: var(--ink); font: 400 15px/1.5 var(--font); pointer-events: auto; }
.screen h2 { margin: 0; font: 700 28px/1.05 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.screen h3 { margin: 0 0 14px; font: 600 13px/1.3 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.screen h3 small { font: 400 13px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.screen p { margin: 8px 0; }
.dim { color: var(--ink2); } .small { font-size: 13px; } .pre { white-space: pre-line; } .ok { color: var(--good); }
.ok > .ico, .dim > .ico { margin-right: 2px; }
.lead { font-size: 16px; line-height: 1.6; color: var(--ink); }
kbd { display: inline-block; min-width: 24px; padding: 2px 6px; border-radius: var(--r-md); background: rgba(190, 215, 255, .06); border: 1px solid var(--line2); font: 700 12px/1.4 var(--num); color: var(--ink); text-align: center; }
a { color: var(--signal2); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
summary { cursor: pointer; }
.screen ::selection { background: var(--signal); color: var(--signal-ink); }
.screen * { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* headers of sheets and side sheets: back, a large title and a gold mark on the rule */
.hdr { position: relative; flex: none; display: flex; align-items: center; gap: 18px; padding: 22px var(--pr, 24px) 18px var(--pl, 24px); border-bottom: 1px solid var(--line); }
.hdr::after { content: ''; position: absolute; left: var(--pl, 24px); bottom: -1px; width: 72px; height: 2px; background: var(--signal); }
.hdr h2 { font-size: clamp(26px, 3.2vw, 40px); }
.hdr-title { min-width: 0; }
.hdr-title p { margin: 6px 0 0; color: var(--ink2); font-size: 14px; }
.hdr > .cr, .hg-top > .cr { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 18px; border-left: 1px solid var(--line2); font-size: 20px; letter-spacing: .02em; }

/* buttons: outlined by default, a white plate under the pointer, a gold cut plate for the one main action */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: var(--r-md); border: 1px solid var(--line2); background-color: rgba(190, 215, 255, .04); color: var(--ink);
  font: 600 14px/1.2 var(--disp); letter-spacing: .08em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background-color .14s, border-color .14s, color .14s, --pc .14s, transform .1s var(--ease); }
.btn:active:not([disabled]), .chip:active, .tab:active, .card.hg-item:active, .dep:active, #hud .hud-btn:active { transform: scale(.97); }
.btn:hover:not([disabled]) { background-color: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .card:focus-visible, .dep:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn.primary, .btn.primary:hover:not([disabled]) { --pc: var(--signal); border-color: transparent; background-color: transparent; background-image: linear-gradient(-45deg, transparent var(--cut), var(--pc) calc(var(--cut) + .5px)); background-origin: border-box; color: var(--signal-ink); font-weight: 700; }
.btn.primary:hover:not([disabled]) { --pc: var(--signal2); }
.btn.big { min-height: 54px; padding: 12px 30px; font-size: 16px; letter-spacing: .1em; }
.btn.small { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.btn.ghost { background-color: transparent; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.danger:hover:not([disabled]) { background-color: var(--bad); border-color: var(--bad); color: #1a0503; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn .key { flex: none; min-width: 0; padding: 0 6px; font-size: 11px; letter-spacing: 0; color: inherit; background: transparent; border-color: currentColor; opacity: .7; }
.btn.icon-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.btn.icon-btn .ico { width: 20px; height: 20px; }
/* choice cards (aircraft): the selected one is the plate, the pointer only brightens the edge */
.btn.card { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; text-align: left; }
.btn.card b { font-size: 14px; }
.btn.card small { font: 400 13px/1.35 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.btn.card:hover:not([disabled]) { background-color: var(--hover); border-color: var(--ink); color: var(--ink); }
.btn.card.on, .btn.card.on:hover:not([disabled]) { --ink2: rgba(6, 8, 11, .72); background-color: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
/* key chips only help with a keyboard: touch screens and very narrow layouts drop them */
@media (pointer: coarse), (max-width: 480px) { .btn .key { display: none; } }

/* form rows, chips, switches */
.row { display: flex; align-items: center; gap: 16px; min-height: 48px; margin: 0; padding: 4px 0; min-width: 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row > span { flex: 1; min-width: 0; }
.row > span small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink2); }
.row.col { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 14px; }
.row output { min-width: 60px; text-align: right; font: 700 16px var(--num); color: var(--signal); font-variant-numeric: tabular-nums; }
/* faders: a hairline track and a square gold handle */
.screen input[type=range] { -webkit-appearance: none; appearance: none; min-height: 44px; margin: 0; background: none; cursor: pointer; }
.row input[type=range] { flex: 1.3; min-width: 0; }
.screen input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--track); }
.screen input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 22px; margin-top: -9px; border: 0; border-radius: 0; background: var(--signal); box-shadow: 0 0 0 3px rgba(5, 7, 10, .85); }
.screen input[type=range]::-moz-range-track { height: 4px; background: var(--track); }
.screen input[type=range]::-moz-range-progress { height: 4px; background: var(--signal); }
.screen input[type=range]::-moz-range-thumb { width: 10px; height: 22px; border: 0; border-radius: 0; background: var(--signal); box-shadow: 0 0 0 3px rgba(5, 7, 10, .85); }
.screen input[type=range]:hover::-webkit-slider-thumb { background: #fff; } .screen input[type=range]:hover::-moz-range-thumb { background: #fff; }
.screen select { -webkit-appearance: none; appearance: none; min-height: 44px; max-width: 100%; padding: 8px 40px 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line2); color: var(--ink); font: 500 15px var(--font); cursor: pointer;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb8c4' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
.screen select:hover { border-color: var(--ink); }
.screen select option { background: #10151c; color: #f1f4f8; }
.row.toggle { cursor: pointer; position: relative; }
.row.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw { flex: none; position: relative; width: 46px; height: 24px; border-radius: var(--r-md); background: transparent; border: 1px solid var(--line2); transition: background .18s, border-color .18s; pointer-events: none; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 16px; border-radius: 1px; background: var(--ink3); transition: transform .18s var(--ease), background .18s; }
.row.toggle:hover .sw { border-color: var(--ink); }
.row.toggle input:checked ~ .sw { background: var(--signal-soft); border-color: var(--signal); }
.row.toggle input:checked ~ .sw::after { transform: translateX(20px); background: var(--signal); }
.row.toggle input:focus-visible ~ .sw { outline: 2px solid var(--focus); outline-offset: 3px; }
/* chips read as a segmented control */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 8px 16px; border-radius: var(--r-md); border: 1px solid var(--line2); background: rgba(190, 215, 255, .04); color: var(--ink); font: 600 13px var(--disp); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
.chips.wrap { margin-bottom: 10px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--ink2); }
.kv b { font: 700 15px var(--num); text-align: right; font-variant-numeric: tabular-nums; }
.note { margin: 10px 0; padding: 12px 14px; background: var(--card); border-left: 2px solid var(--ink2); font-size: 14px; }
.warnline { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 14px; background: var(--bad-soft); border-left: 2px solid var(--bad); color: var(--bad); font-size: 14px; font-weight: 600; }
.cr { font-family: var(--num); font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp { font: 700 13px var(--num); color: var(--ink2); }
.tag { padding: 1px 7px; border-radius: var(--r-sm); border: 1px solid var(--line2); color: var(--ink); font: 600 10px/1.7 var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.statbar { display: grid; grid-template-columns: 110px minmax(20px, 1fr) auto; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; }
.sb-l { color: var(--ink2); }
/* segmented gauges */
.sb-t { height: 6px; background: var(--track); overflow: hidden; -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.sb-t i { display: block; height: 100%; background: var(--ink); }
.sb-v { min-width: 64px; display: flex; justify-content: flex-end; font: 700 14px var(--num); text-align: right; font-variant-numeric: tabular-nums; }
.sb-v .ico { color: var(--good); }
.xpbar { height: 4px; min-width: 80px; background: var(--track); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--signal); }
/* three CSS stars: bronze, silver, gold */
.medals { display: inline-flex; gap: .16em; font-size: 16px; vertical-align: -.15em; }
.medals i { width: 1em; height: 1em; background: rgba(190, 215, 255, .18); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.medals i.on.m1 { background: #d38c56; } .medals i.on.m2 { background: #d5dbe2; } .medals i.on.m3 { background: var(--signal); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 36px clamp(24px, 4vw, 64px); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
/* sections are not boxed: a rule with a gold tick, then the content */
.group, .panel { position: relative; min-width: 0; padding: 18px 0 0; border-top: 1px solid var(--line2); }
.group::before, .panel::before { content: ''; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--signal); }
.group > h3 + .row, .group > h3 + .kv, .panel > h3 + .kv { margin-top: -6px; }

/* glass surfaces */
.drawer-panel, .rail-panel, .dialog-card, .title-tools .btn, .pilot, .map-directory, .maptip, .replay-bar, .hg-info, .hg-item, .padhint, .map-zoom .btn, .map-close, .map-hint, .hg-top .back, .screen.sheet {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.drawer-panel, .rail-panel, .dialog-card, .map-directory, .replay-bar, .hg-info { background: var(--panel); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }

/* ================================================================== title: the scene fills the screen, the lockup and a numbered menu stand on the left, the pilot card on the right */
.screen.title { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto auto minmax(20px, 1fr) auto auto; grid-template-areas: 'bar bar bar' 'brand . pilot' '. . pilot' 'menu . .' 'foot foot foot'; column-gap: 24px;
  padding: max(18px, env(safe-area-inset-top)) var(--gr) max(16px, env(safe-area-inset-bottom)) var(--gl); overflow-y: auto;
  background: linear-gradient(90deg, rgba(5, 7, 10, .9), rgba(5, 7, 10, .62) 28%, rgba(5, 7, 10, 0) 60%), linear-gradient(180deg, rgba(5, 7, 10, .66), rgba(5, 7, 10, 0) 24%), linear-gradient(0deg, rgba(5, 7, 10, .78), rgba(5, 7, 10, 0) 30%); }
.title-bar { grid-area: bar; display: flex; align-items: center; gap: 12px; }
.site-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--ink2); font: 600 12px var(--disp); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: color .14s; }
.site-link::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transform: scaleX(-1); }
.site-link:hover { color: var(--ink); }
.site-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.title-tools { display: flex; gap: 6px; }
.title-tools .btn { gap: 9px; padding: 0 16px; background-color: var(--glass); border-color: var(--glass-edge); font-size: 12px; letter-spacing: .14em; }
.title-tools .btn .ico { width: 17px; height: 17px; }
.title-hero { display: contents; }
.brand { grid-area: brand; align-self: start; padding-top: clamp(16px, 5vh, 56px); animation: brandIn .5s var(--ease) backwards; }
@keyframes brandIn { from { opacity: 0; transform: translateX(-18px); } }
.brand .sub { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 600 13px var(--disp); letter-spacing: .42em; text-transform: uppercase; color: var(--signal); }
.brand .sub::before { content: ''; flex: none; width: 44px; height: 4px; background: var(--signal); transform: skewX(-32deg); }
.brand .logo { margin: 0; font: 700 clamp(60px, min(8.4vw, 15vh), 132px)/.86 var(--disp); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-shadow: 0 4px 50px rgba(0, 0, 0, .5); }
.title-note { max-width: 420px; margin: 10px 0 0 !important; font-size: 14px; color: var(--signal2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.title-intro { max-width: 420px; margin: 18px 0 0 !important; font-size: 16px; color: var(--ink2); text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 1px 18px rgba(0, 0, 0, .6); }
/* the menu: numbered lines; a plate wipes in under the pointer or the focus, the career line is the gold plate */
.menu { grid-area: menu; position: relative; display: flex; flex-direction: column; counter-reset: item; margin-bottom: 20px; }
.btn.tile { --pc: var(--plate); counter-increment: item; position: static; justify-content: flex-start; gap: 18px; width: 100%; min-height: 54px; padding: 6px 20px 6px 16px; border: 0; border-radius: 0; text-align: left;
  background-color: transparent; background-image: linear-gradient(-45deg, transparent var(--cut), var(--pc) calc(var(--cut) + .5px)); background-repeat: no-repeat; background-position: left; background-size: 0% 100%;
  font: 600 21px/1.15 var(--disp); letter-spacing: .08em; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); animation: tileIn .45s ease-out backwards; transition: background-size .22s var(--ease), color .12s, padding .22s var(--ease), --pc .14s, transform .1s var(--ease); }
.btn.tile:nth-child(2) { animation-delay: .05s; } .btn.tile:nth-child(3) { animation-delay: .1s; } .btn.tile:nth-child(4) { animation-delay: .15s; } .btn.tile:nth-child(5) { animation-delay: .2s; }
@keyframes tileIn { from { opacity: 0; } }
.btn.tile:hover:not([disabled]), .btn.tile:focus-visible { background-color: transparent; background-size: 100% 100%; padding-left: 26px; padding-right: 10px; color: var(--plate-ink); text-shadow: none; }
.tile-no { flex: none; width: 26px; font: 700 12px var(--num); letter-spacing: .1em; color: var(--ink3); text-shadow: none; }
.tile-no::before { content: counter(item, decimal-leading-zero); }
.btn.tile:hover:not([disabled]) .tile-no, .btn.tile:focus-visible .tile-no, .btn.tile.primary .tile-no { color: inherit; opacity: .62; }
.tile-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tile-copy b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font: inherit; }
.tile-copy small { font: 400 14px/1.45 var(--font); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink2); }
.tile-go { flex: none; width: 18px; height: 18px; background: currentColor; opacity: 0; transition: opacity .14s; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
.btn.tile:hover:not([disabled]) .tile-go, .btn.tile:focus-visible .tile-go { opacity: 1; }
.btn.tile.primary, .btn.tile.primary:hover:not([disabled]), .btn.tile.primary:focus-visible { --pc: var(--signal); min-height: 72px; margin-bottom: 10px; background-size: 100% 100%; color: var(--signal-ink); font-size: 27px; font-weight: 700; letter-spacing: .05em; text-shadow: none; }
.btn.tile.primary:hover:not([disabled]) { --pc: var(--signal2); }
.btn.tile.primary .tile-go { opacity: .9; }
.btn.tile.multiplayer[disabled] { opacity: 1; color: var(--ink3); }
.btn.tile.multiplayer .tile-go { display: none; }
.coming-soon { padding: 1px 7px; border-radius: var(--r-sm); border: 1px solid currentColor; color: var(--warn); font: 600 10px/1.7 var(--disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-shadow: none; }
/* by default the description sits inside its line; with a pointer and room it moves to one slot under the menu */
.btn.tile:hover:not([disabled]) .tile-copy small, .btn.tile:focus-visible .tile-copy small { color: rgba(6, 8, 11, .74); }
.btn.tile.primary .tile-copy small, .btn.tile.primary:hover:not([disabled]) .tile-copy small, .btn.tile.primary:focus-visible .tile-copy small { color: rgba(21, 16, 3, .8); }
@media (hover: hover) and (min-width: 901px) and (min-height: 521px) {
  .menu { padding-bottom: 64px; }
  .menu::after { content: ''; position: absolute; left: 0; right: 0; bottom: 51px; height: 1px; background: linear-gradient(90deg, var(--signal) 0 28px, var(--line2) 28px); }
  .menu .btn.tile .tile-copy small, .menu .btn.tile.primary .tile-copy small, .menu .btn.tile:hover:not([disabled]) .tile-copy small, .menu .btn.tile:focus-visible .tile-copy small { color: var(--ink2); }
  .menu .btn.tile .tile-copy small { position: absolute; left: 0; right: 0; bottom: 0; height: 51px; padding: 12px 0 0 16px; overflow: hidden; opacity: 0; transition: opacity .16s; pointer-events: none; }
  .menu .btn.tile:hover .tile-copy small, .menu .btn.tile:focus-visible .tile-copy small { opacity: 1; }
  .menu:has(.tile:hover) .btn.tile:not(:hover) .tile-copy small { opacity: 0; }
  .menu:not(:has(.tile:hover, .tile:focus-visible)) .btn.tile.primary .tile-copy small { opacity: 1; }
}
/* pilot card */
.pilot { grid-area: pilot; align-self: start; position: relative; margin-top: clamp(16px, 5vh, 56px); padding: 20px 20px 12px; background: var(--glass); border: 1px solid var(--glass-edge); animation: screenIn .5s .12s ease-out backwards; }
.pilot::before, .pilot::after, .dialog-card::before, .dialog-card::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--signal); pointer-events: none; }
.pilot::before, .dialog-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.pilot::after, .dialog-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.pilot-heading { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'tag stripes' 'rank stripes'; align-items: center; column-gap: 12px; row-gap: 4px; margin-bottom: 14px; }
.pilot-tag { grid-area: tag; font: 600 11px var(--disp); letter-spacing: .24em; text-transform: uppercase; color: var(--signal); }
.pilot-rank { grid-area: rank; font: 700 24px/1.1 var(--disp); letter-spacing: .03em; text-transform: uppercase; }
.stripes { grid-area: stripes; display: flex; flex-direction: column-reverse; gap: 3px; padding: 7px 8px; background: rgba(3, 5, 8, .7); border: 1px solid var(--line2); }
.stripes i { width: 28px; height: 3px; background: var(--signal); }
.pilot-sub { margin: 10px 0 8px; font: 700 14px var(--num); letter-spacing: .03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pilot-facts { margin: 0; }
.pilot-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pilot-facts dt { font: 600 11px/1.7 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); } .pilot-facts dd { margin: 0; font-weight: 600; text-align: right; }
/* key legend along the bottom edge (keyboard and mouse only) */
.title-foot { grid-area: foot; display: flex; align-items: center; gap: 22px; min-height: 40px; padding-top: 10px; border-top: 1px solid var(--line); font: 600 11px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.title-foot span { display: inline-flex; align-items: center; gap: 6px; }
.title-foot kbd { min-width: 22px; padding: 1px 5px; font-size: 11px; letter-spacing: 0; }
.title-foot .stamp { color: var(--ink3); letter-spacing: .28em; }
@media (pointer: coarse), (max-width: 900px), (max-height: 520px) { .title-foot { display: none; } }

/* ================================================================== sheets: hub, help and settings fill the screen, the account is a card */
.screen.sheet { --pl: max(var(--gl), calc(50vw - 720px)); --pr: max(var(--gr), calc(50vw - 720px)); background: radial-gradient(90% 70% at 100% 0%, rgba(40, 62, 92, .32), rgba(40, 62, 92, 0) 60%), linear-gradient(180deg, rgba(5, 7, 10, .93), rgba(5, 7, 10, .86)); }
.sheet-panel { display: flex; flex-direction: column; width: 100%; height: 100%; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 30px var(--pr) 40px var(--pl); overscroll-behavior: contain; animation: bodyIn .3s var(--ease) backwards; }
@keyframes bodyIn { from { opacity: 0; transform: translateY(10px); } }
.sheet-body.cols { align-content: start; }
.screen.sheet.narrow { --pl: 24px; --pr: 24px; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.screen.sheet.narrow .sheet-panel { width: min(520px, 100%); height: auto; max-height: 100%; padding: 0; background: var(--panel); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.screen.sheet.narrow .hdr h2 { font-size: 26px; }
.screen.sheet.narrow .sheet-body { padding: 22px 24px 24px; }
.help .keys { display: flex; flex-direction: column; }
.keyrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 42px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.keyrow:last-child { border-bottom: 0; }
.kk { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.kk em { font-style: normal; color: var(--ink3); margin: 0 2px; }

/* hub: a tab bar under the header with the rank at its end, the tab content below */
.hub-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hub-side { flex: none; display: flex; align-items: stretch; gap: 28px; padding: 0 var(--pr) 0 var(--pl); border-bottom: 1px solid var(--line); background: rgba(3, 5, 8, .35); }
.tabs { order: 1; flex: 1; min-width: 0; display: flex; gap: 2px; margin-left: -18px; overflow-x: auto; scrollbar-width: none; }
.tab { flex: none; position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; color: var(--ink2); font: 600 14px var(--disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .14s, background .14s; }
.tab .ico { width: 17px; height: 17px; opacity: .75; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: transparent; }
.tab.on { color: var(--ink); }
.tab.on .ico { color: var(--signal); opacity: 1; }
.tab.on::after { background: var(--signal); }
.tab:focus-visible { outline-offset: -4px; }
.rankbox { order: 2; flex: none; display: flex; align-items: center; gap: 12px; }
.rankbox small:first-child { display: none; }
.rankbox b { font: 600 13px var(--disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.rankbox .xpbar { width: 130px; }
.rankbox small:last-child { font: 600 12px var(--num); color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hub-body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px var(--pr) 40px var(--pl); overscroll-behavior: contain; animation: bodyIn .3s var(--ease) backwards; }
.tab-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.tab-head p { flex: 1; margin: 0; }
.tab-foot { margin-top: 16px; }
.chapter { margin-bottom: 36px; }
.chapter:last-child { margin-bottom: 0; }
/* departures board: ruled lines, the line under the pointer becomes the plate */
.board { display: flex; flex-direction: column; border-top: 1px solid var(--line2); }
.board-head, .dep { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(150px, .7fr) 130px; gap: 20px; align-items: center; padding: 0 20px; }
.board-head { padding-top: 12px; padding-bottom: 10px; font: 600 11px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line); }
.board-head span:last-child, .dep-pay { text-align: right; justify-content: flex-end; }
.dep { min-height: 74px; padding-top: 12px; padding-bottom: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.dep:hover, .dep:focus-visible { --ink: var(--plate-ink); --ink2: rgba(6, 8, 11, .72); --ink3: rgba(6, 8, 11, .6); --signal: var(--plate-ink); --line2: rgba(6, 8, 11, .35); background: var(--plate); color: var(--plate-ink); }
.dep-time { font: 700 24px/1.1 var(--num); letter-spacing: .04em; color: var(--signal); font-variant-numeric: tabular-nums; }
.dep-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dep-main b { font: 600 17px/1.25 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.dep-main small, .dep-tags { font-size: 13px; color: var(--ink2); }
.dep-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dep-type { font: 600 11px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.dep-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.card { position: relative; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; }
button.card { cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
button.card:hover:not([disabled]) { background: var(--raised-hover); border-color: var(--ink); }
.card.mission { display: flex; flex-direction: column; gap: 6px; min-height: 164px; overflow: hidden; }
.card.mission.open { border-color: var(--line2); box-shadow: inset 0 2px 0 var(--ink); }
.card.mission.done { border-color: rgba(95, 227, 161, .28); }
.card.mission.done::after { content: ''; position: absolute; right: 16px; top: 16px; width: 20px; height: 20px; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306180e' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.card.mission.locked { color: var(--ink2); cursor: not-allowed; background: repeating-linear-gradient(-45deg, rgba(190, 215, 255, .035) 0 6px, transparent 6px 14px); }
.card.mission.locked .mc-title { color: var(--ink2); }
.card.mission.finale { border-color: rgba(246, 185, 59, .5); background: linear-gradient(160deg, rgba(246, 185, 59, .13), transparent 62%); box-shadow: inset 0 2px 0 var(--signal); }
.mc-type { font: 600 11px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.card.mission.finale .mc-type { color: var(--signal); }
.mc-title { font: 600 18px/1.2 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.card.mission.done .mc-title { padding-right: 30px; }
.mc-sub { font-size: 14px; color: var(--ink2); }
.mc-meta { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink2); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mc-pay { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.card.fleet { display: flex; flex-direction: column; gap: 6px; }
.card.fleet.owned, .card.fleet.open { box-shadow: inset 2px 0 0 var(--good); }
.card.fleet .btn { align-self: flex-start; margin-top: auto; }
.card.fleet > .dim, .card.fleet > .ok { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.rankladder { margin-top: 14px; }
.log-medal + .log-medal { margin-left: 12px; }
.log-scroll { overflow-x: auto; border-top: 1px solid var(--line2); }
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.log-table th, .log-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.log-table th { font: 600 11px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.logbook .chapter { margin-top: 36px; }

/* ================================================================== side sheets: free flight and briefing dock right, pause docks left */
.screen.drawer { background: linear-gradient(270deg, rgba(5, 7, 10, .78), rgba(5, 7, 10, 0) 72%); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(580px, 100%); display: flex; flex-direction: column; border-width: 0 0 0 1px; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0; animation: drawerIn .34s var(--ease); }
@keyframes drawerIn { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.drawer-panel .hdr h2 { font-size: clamp(22px, 2.4vw, 30px); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.drawer-body > * { flex-shrink: 0; }
.drawer-body > p { margin: 0; }
.drawer-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 24px 20px; border-top: 1px solid var(--line2); background: rgba(3, 5, 8, .55); }
.drawer-foot > .btn.primary { flex: none; margin-left: auto; min-width: 190px; min-height: 56px; }
.plan-line { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font: 600 13px var(--num); letter-spacing: .02em; color: var(--ink2); }
.plan-line span:first-child { color: var(--ink); font-weight: 700; }
.plan-line span + span::before { content: '·'; margin: 0 6px; color: var(--ink3); }
.reward { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reward small { font: 600 10px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.reward b { font: 700 19px var(--num); font-variant-numeric: tabular-nums; }
.acgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ac-info:not(:empty) { margin-top: 8px; }
/* free flight: the setup reads as numbered steps */
.screen.free .drawer-body { counter-reset: step; }
.screen.free .group > h3::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 700 13px var(--num); letter-spacing: .06em; color: var(--signal); }
/* briefing: the facts as a ruled data block */
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 2px solid var(--signal); }
.facts div { padding: 11px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { font: 600 10px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.facts dd { margin: 3px 0 0; font: 600 16px/1.3 var(--font); overflow-wrap: anywhere; }

/* pause: docked to the left so the paused scene stays visible */
.screen.rail { background: linear-gradient(90deg, rgba(5, 7, 10, .7), rgba(5, 7, 10, 0) 66%); }
.rail-panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; gap: 18px; border-width: 0 1px 0 0; overflow-y: auto; overscroll-behavior: contain;
  padding: max(40px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); animation: railIn .32s var(--ease); }
@keyframes railIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.rail-panel > h2 { font-size: 56px; line-height: .9; }
.rail-panel > h2::before { content: ''; display: block; width: 48px; height: 4px; margin: 0 0 18px 3px; background: var(--signal); transform: skewX(-32deg); }
.pause-mission { padding: 2px 0 2px 14px; border-left: 2px solid var(--signal); font-size: 14px; color: var(--ink2); }
.pause-mission b { display: block; margin-bottom: 2px; font: 600 14px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.list { display: flex; flex-direction: column; border-top: 1px solid var(--line2); }
.list.exit { margin-top: auto; }
.btn.list-btn { justify-content: flex-start; gap: 14px; width: 100%; min-height: 50px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background-color: transparent; font-size: 15px; }
.btn.list-btn .lbl { flex: 1; text-align: left; }
.btn.list-btn.on .lbl::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 10px; background: var(--good); vertical-align: 1px; box-shadow: 0 0 0 3px var(--good-soft); }
.btn.list-btn.primary { min-height: 62px; padding-left: 20px; border-bottom: 0; font-size: 19px; }
.ap-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ap-controls .btn { font-size: 12px; padding: 8px 10px; }

/* ================================================================== dialogs: crash and debrief */
.screen.dialog { display: grid; place-items: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(5, 7, 10, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* a band across the screen behind the card */
.screen.dialog::before { content: ''; position: fixed; left: 0; right: 0; top: 50%; height: min(360px, 60%); transform: translateY(-50%); background: linear-gradient(90deg, rgba(190, 215, 255, 0), rgba(190, 215, 255, .05) 30%, rgba(190, 215, 255, .05) 70%, rgba(190, 215, 255, 0)); border-block: 1px solid var(--line); pointer-events: none; }
/* the debrief card is taller than the band */
.screen.dialog:has(.debrief)::before { display: none; }
.dialog-card { position: relative; width: min(560px, 100%); margin: auto; padding: 38px 32px 28px; text-align: center; animation: cardIn .34s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
.dialog-card h2 { font-size: clamp(30px, 7vw, 46px); line-height: 1; }
.dialog-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: var(--r-md); }
.dialog-ico .ico { width: 28px; height: 28px; }
.dialog-ico.bad { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.dialog-actions .btn.primary { min-width: 180px; min-height: 54px; font-size: 16px; }
/* crash: full-width retry on top, secondary actions share an even row below */
.dialog-card.crash { width: min(440px, 100%); background: linear-gradient(180deg, rgba(255, 106, 94, .12), transparent 46%), var(--panel); }
.dialog-card.crash::before, .dialog-card.crash::after, .debrief.fail::before, .debrief.fail::after { border-color: var(--bad); }
.crash .dialog-actions, .debrief .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
.crash .dialog-actions .btn, .debrief .dialog-actions .btn { min-width: 0; }
.crash .dialog-actions .btn.primary, .crash .dialog-actions .btn:last-child:nth-child(2), .debrief .dialog-actions .btn.primary, .debrief .dialog-actions .btn:last-child:nth-child(2) { grid-column: 1 / -1; }
.deb-kick { margin-bottom: 10px; font: 600 12px var(--disp); letter-spacing: .26em; text-transform: uppercase; color: var(--signal); }
.debrief.ok { background: linear-gradient(180deg, rgba(246, 185, 59, .1), transparent 40%), var(--panel); }
.debrief.fail { background: linear-gradient(180deg, rgba(255, 106, 94, .1), transparent 40%), var(--panel); }
.debrief.fail h2, .debrief.fail .deb-kick { color: var(--bad); }
.bigmedals { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin: 20px 0; }
.bigmedals .medals { font-size: clamp(34px, 9vw, 48px); gap: .12em; }
.bigmedals .medals i { animation: medalPop .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.bigmedals .medals i:nth-child(2) { animation-delay: .15s; } .bigmedals .medals i:nth-child(3) { animation-delay: .3s; }
@keyframes medalPop { from { opacity: 0; transform: translateY(6px) scale(.8); } }
.score { font: 700 64px/1 var(--num); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.score small { margin-left: 4px; font: 600 16px var(--num); color: var(--ink2); }
/* flight log: ruled lines */
.deb-lines { margin: 16px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-align: left; }
.deb-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 4px 0; text-align: left; }
.deb-reward small, .deb-rank small { display: block; font: 600 10px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.deb-reward b { font: 700 26px var(--num); color: var(--signal); font-variant-numeric: tabular-nums; }
.deb-rank { width: 160px; } .deb-rank .xpbar { margin-top: 8px; }
.rankup { margin: 14px 0 10px; padding: 12px; background: var(--signal-soft); box-shadow: inset 0 0 0 1px rgba(246, 185, 59, .5); color: var(--signal2); font: 700 15px var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.unlocks { margin: 8px 0; }
.unlock { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; font-weight: 650; color: var(--ink); }
.unlock .ico { color: var(--signal); }

/* ================================================================== replay */
.screen.replay { pointer-events: none; }
.replay-bar { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(940px, calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px 10px 20px; border-top-color: rgba(255, 255, 255, .5); pointer-events: auto; font-variant-numeric: tabular-nums; }
.replay-meta { display: flex; flex-direction: column; min-width: 76px; }
.replay-meta b { font: 600 11px var(--disp); letter-spacing: .22em; text-transform: uppercase; color: var(--signal); } .replay-meta output { font: 700 16px var(--num); color: var(--ink); }
.replay-progress { flex: 1; min-width: 140px; }
.replay-progress input { width: 100%; }
.seg { display: flex; }
.seg .btn { min-width: 52px; margin-left: -1px; font-family: var(--num); letter-spacing: 0; }
.seg .btn:hover:not([disabled]) { background-color: var(--hover); border-color: var(--line2); color: var(--ink); }
.seg .btn[aria-pressed='true'], .seg .btn[aria-pressed='true']:hover { background-color: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
.replay-actions { display: flex; align-items: center; gap: 6px; }

/* ================================================================== hangar: aircraft in the scene, details on the right, fleet docked below */
.screen.hangar { pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 10, .6), rgba(5, 7, 10, 0) 22%), linear-gradient(0deg, rgba(5, 7, 10, .72), rgba(5, 7, 10, 0) 30%); }
.screen.hangar > * { pointer-events: auto; }
.hg-top { position: absolute; top: max(18px, env(safe-area-inset-top)); left: var(--gl); right: var(--gr); display: flex; align-items: center; gap: 18px; pointer-events: none; }
.hg-top > * { pointer-events: auto; }
.hg-top .back { background-color: var(--glass); border-color: var(--glass-edge); }
.hg-top h2 { font-size: clamp(22px, 3.2vw, 40px); text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.hg-top > .cr { text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.hg-info { position: absolute; top: calc(max(18px, env(safe-area-inset-top)) + 66px); right: var(--gr); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 128px); width: min(400px, 36vw); overflow-y: auto; overscroll-behavior: contain; }
.hg-info > summary { display: none; }
.hg-info-body { padding: 24px 24px 22px; }
.hg-name { font: 700 34px/1 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.hg-role { margin: 10px 0 14px; font: 600 11px var(--disp); letter-spacing: .22em; text-transform: uppercase; color: var(--signal); }
.hg-info .actions .btn { flex: 1; }
.hg-dock { position: absolute; left: var(--gl); right: var(--gr); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.hg-hint { margin: 0; font: 600 11px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hg-list { max-width: 100%; display: flex; gap: 6px; padding: 5px; margin: -5px; overflow-x: auto; pointer-events: auto; }
.card.hg-item { flex: 0 0 184px; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--glass); border-color: var(--glass-edge); cursor: pointer; overflow: hidden; }
.card.hg-item b { font: 600 15px/1.2 var(--disp); letter-spacing: .06em; text-transform: uppercase; padding-right: 22px; }
.card.hg-item small { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.hg-item:hover:not(.on) { background: var(--glass-hover); border-color: var(--ink); }
.card.hg-item.on, .card.hg-item.on:hover { --ink2: rgba(6, 8, 11, .72); --signal: var(--plate-ink); background: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
.card.hg-item.locked:not(.on) { color: var(--ink2); }
.card.hg-item .lk { position: absolute; right: 12px; top: 12px; font: 700 12px var(--num); }
.paint-shop { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); }
.paint-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.paint-presets .btn { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; font-size: 11px; letter-spacing: .06em; }
.paint-presets .btn:hover:not([disabled]) { background-color: var(--hover); border-color: var(--ink); color: var(--ink); }
.paint-presets .btn[aria-pressed='true'], .paint-presets .btn[aria-pressed='true']:hover { background-color: var(--plate); border-color: var(--plate); color: var(--plate-ink); }
.paint-swatches { display: flex; height: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.paint-swatches i { flex: 1; }
.paint-colors { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.paint-colors label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink2); }
.paint-colors input { width: 64px; height: 44px; padding: 2px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--well); cursor: pointer; }

/* ================================================================== world map */
.screen.map { background: var(--bg); }
.mapcv { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.mapcv:active { cursor: grabbing; }
.map-directory { position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); width: min(340px, calc(100% - 104px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 22px 20px 18px; border-top-color: rgba(255, 255, 255, .5); }
.map-directory h2 { font-size: 30px; margin-bottom: 16px; }
.map-directory h2::before { content: ''; display: block; width: 36px; height: 4px; margin: 0 0 12px 2px; background: var(--signal); transform: skewX(-32deg); }
.map-directory select { width: 100%; }
.map-info { margin-top: 14px; font-size: 14px; line-height: 1.6; }
.map-info b, .maptip b { display: block; margin-bottom: 2px; font: 600 17px/1.25 var(--disp); letter-spacing: .05em; text-transform: uppercase; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink2); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.lg.ap { background: #7ad7ff; } .lg.base { background: #4aa3ff; } .lg.off { background: #808c99; } .lg.poi { background: #f6b93b; border-radius: 0; transform: rotate(45deg); }
.btn.map-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.map-zoom { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 56px); right: max(16px, env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 4px; }
.btn.map-close, .map-zoom .btn { background-color: var(--panel); border-color: var(--glass-edge); }
.maptip { position: absolute; width: 236px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--glass-edge); border-top: 2px solid var(--signal); box-shadow: var(--shadow); font-size: 13px; line-height: 1.5; pointer-events: none; }
.maptip:empty { display: none; }
.map-hint { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); font: 600 11px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
@media (hover: none) { .maptip { display: none !important; } }

/* ================================================================== account */
.group.account-panel { padding: 0; border: 0; } .group.account-panel::before { display: none; }
.account-body > p { margin: 0 0 14px; }
.account-body .stack { margin-top: 16px; gap: 10px; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font: 600 11px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.field-input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--well); color: var(--ink); font: 16px var(--font); letter-spacing: 0; text-transform: none; }
.field-input:hover, .field-input:focus-visible { border-color: var(--ink); }
.field-input:user-invalid { border-color: var(--bad); }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink2); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--signal); }
.form-msg { min-height: 1.4em; margin: 0; font-size: 14px; }
.form-msg.bad { color: var(--bad); } .form-msg.ok { color: var(--good); }
.account-form .btn.primary, .account-body > .btn.google { width: 100%; }
.account-form .btn.primary { min-height: 52px; }
.account-body .or { display: flex; align-items: center; gap: 12px; margin: 14px 0; font: 600 11px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.account-body .or::before, .account-body .or::after { content: ''; flex: 1; height: 1px; background: var(--line2); }
.account-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; }
.cloud-state[data-state='synced'] { color: var(--good); } .cloud-state[data-state='error'] { color: var(--bad); }

/* ================================================================== gamepad prompts */
.padhint { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 18px; padding: 7px 16px; background: var(--panel); border: 1px solid var(--glass-edge); border-top-color: rgba(255, 255, 255, .5); font: 600 11px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); pointer-events: none !important; }
.padhint span { display: inline-flex; align-items: center; gap: 7px; }
.padhint kbd { letter-spacing: 0; }

/* ================================================================== responsive */
@media (max-width: 1100px) {
  .screen.title { grid-template-columns: minmax(0, 460px) minmax(0, 1fr) minmax(0, 300px); }
  .rankbox small:last-child { display: none; }
}
@media (max-width: 900px) {
  .screen.title { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); grid-template-areas: 'bar bar' 'brand pilot' '. pilot' 'menu menu' 'foot foot'; }
  .menu { max-width: 560px; }
  /* without the description slot each entry carries its own text: rule the rows apart */
  .btn.tile { min-height: 60px; padding-top: 10px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--line); }
  .btn.tile.primary, .btn.tile:last-child { box-shadow: none; }
  .rankbox { display: none; }
  /* hangar: the details become a collapsible card above the dock */
  .hg-info { top: auto; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); width: auto; max-height: min(52vh, calc(100% - 190px)); }
  .hg-info > summary { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 10px 52px 10px 20px; list-style: none; background: var(--card-solid); }
  .hg-info > summary::-webkit-details-marker { display: none; }
  .hg-info > summary b { font: 600 17px/1.2 var(--disp); letter-spacing: .05em; text-transform: uppercase; }
  .hg-info > summary span { font: 600 10px var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--signal); }
  .hg-info > summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ink2); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transform: rotate(-90deg); transition: transform .2s; }
  .hg-info[open] > summary::after { transform: rotate(90deg); }
  .hg-info[open] > summary { border-bottom: 1px solid var(--line); }
  .hg-info-body { padding: 16px 20px 18px; }
  .hg-info-body .hg-name { display: none; }
  .hg-dock { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .hg-hint { display: none; }
  .card.hg-item { flex-basis: 150px; padding: 12px 14px; }
}
@media (max-width: 760px) {
  .screen.title { display: flex; flex-direction: column; gap: 22px; background: linear-gradient(180deg, rgba(5, 7, 10, .88), rgba(5, 7, 10, .7)); }
  .brand { align-self: stretch; padding-top: 6px; }
  .brand .logo { font-size: 60px; }
  .title-intro { margin-top: 12px !important; font-size: 15px; }
  .menu { align-self: stretch; order: 1; max-width: none; margin-bottom: 0; }
  .pilot { align-self: stretch; order: 2; margin-top: 0; }
}
@media (max-width: 640px) {
  .hdr { padding-top: 14px; padding-bottom: 12px; gap: 12px; }
  .hdr::after { width: 48px; }
  .hdr h2 { font-size: 24px; }
  .hdr-title p { font-size: 13px; }
  .hub .hdr-title p { display: none; }
  .hdr > .cr { padding-left: 12px; font-size: 16px; }
  .sheet-body { padding-top: 20px; padding-bottom: 24px; }
  .screen.sheet.narrow { padding: 0; }
  .screen.sheet.narrow .sheet-panel { width: 100%; height: 100%; border: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .screen.sheet.narrow .sheet-body { padding: 18px 16px 20px; }
  .screen.sheet.narrow { --pl: 16px; --pr: 16px; }
  .tabs { margin-left: -12px; padding-right: 28px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .tab { min-height: 50px; padding: 0 12px; font-size: 13px; letter-spacing: .1em; }
  .tab::after { left: 12px; right: 12px; }
  .tab .ico { display: none; }
  .hub-body { padding-top: 16px; padding-bottom: 24px; }
  .tab-head { flex-wrap: wrap; gap: 10px; } .tab-head p { flex-basis: 100%; }
  .board-head { display: none; }
  .dep { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'time main pay' 'time tags tags'; gap: 4px 12px; padding: 14px 8px; }
  .dep-time { grid-area: time; align-self: start; font-size: 19px; }
  .dep-main { grid-area: main; } .dep-main b { font-size: 15px; } .dep-tags { grid-area: tags; } .dep-pay { grid-area: pay; align-self: start; font-size: 14px; }
  .drawer-panel { left: 0; width: auto; border-width: 0; padding-left: env(safe-area-inset-left); }
  .drawer-panel .hdr { --pl: 16px; --pr: 16px; }
  .drawer-body { padding: 18px 16px 18px; }
  .drawer-foot { flex-wrap: wrap; padding: 12px 16px 16px; }
  .drawer-foot > .btn.primary { flex: 1 1 100%; }
  /* pause: a bottom sheet */
  .rail-panel { top: auto; right: 0; width: auto; max-height: calc(100% - 16px); border-width: 1px 0 0; padding: 22px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 12px; animation-name: sheetUp; }
  .rail-panel > h2 { font-size: 34px; } .rail-panel > h2::before { display: none; }
  .screen.rail { background: linear-gradient(0deg, rgba(5, 7, 10, .7), rgba(5, 7, 10, 0) 70%); }
  .list.exit { margin-top: 0; }
  .dialog-card { padding: 30px 18px 18px; }
  .dialog-actions .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
  .row:has(input[type=range]) { flex-wrap: wrap; }
  .row:has(input[type=range]) > span { flex-basis: calc(100% - 80px); }
  .row input[type=range] { order: 2; flex-basis: 100%; }
  .keyrow { flex-wrap: wrap; padding: 8px 0; }
  .replay-bar { width: calc(100% - 16px); bottom: max(8px, env(safe-area-inset-bottom)); padding: 10px 12px; }
  .replay-progress { order: 5; flex-basis: 100%; }
  .replay-actions { margin-left: auto; }
  .map-directory { top: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 42%; padding: 16px 16px 14px; }
  .map-directory h2 { display: none; }
  .btn.map-close { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .map-zoom { top: calc(max(8px, env(safe-area-inset-top)) + 52px); right: max(8px, env(safe-area-inset-right)); }
  .map-hint { display: none; }
  .hg-top { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); gap: 12px; }
  .hg-top > .cr { padding-left: 12px; font-size: 16px; }
  .padhint { display: none !important; }
}
@keyframes sheetUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@media (max-width: 480px) {
  /* title tools: icons only, the labels stay available to assistive technology */
  .title-tools .btn { width: 44px; padding: 0; }
  .title-tools .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn.tile { gap: 12px; padding-left: 12px; font-size: 19px; }
  .btn.tile.primary, .btn.tile.primary:hover:not([disabled]), .btn.tile.primary:focus-visible { font-size: 22px; }
}
@media (max-width: 380px) {
  .brand .logo { font-size: 50px; }
  .brand .sub { letter-spacing: .3em; }
  .tile-copy small { display: none; }
  .btn.tile.primary .tile-copy small { display: block; }
  .acgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
/* landscape phones: everything gets shorter rather than scrolling off */
@media (max-height: 520px) and (min-width: 641px) {
  .screen.title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; grid-template-areas: 'bar bar' 'brand menu' 'pilot menu'; gap: 10px 24px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom));
    /* the menu sits on the right here: darken the whole scene instead of only the left edge */
    background: linear-gradient(90deg, rgba(5, 7, 10, .88), rgba(5, 7, 10, .7)); }
  .brand { align-self: start; padding-top: 0; }
  .brand .sub { margin-bottom: 8px; font-size: 11px; }
  .brand .logo { font-size: 46px; }
  .title-intro { display: none; }
  .menu { align-self: start; max-width: none; margin-bottom: 0; }
  .btn.tile { min-height: 46px; padding-top: 4px; padding-bottom: 4px; font-size: 17px; }
  .btn.tile.primary, .btn.tile.primary:hover:not([disabled]), .btn.tile.primary:focus-visible { min-height: 52px; margin-bottom: 4px; font-size: 20px; }
  .tile-copy small { display: none; }
  .pilot { align-self: start; margin-top: 0; padding: 14px 16px 10px; }
  .pilot-heading { margin-bottom: 10px; } .pilot-rank { font-size: 19px; }
  .pilot-facts { display: none; }
  .hdr { padding-top: 8px; padding-bottom: 8px; }
  .hdr h2 { font-size: 22px; }
  .hdr-title p { display: none; }
  .tab { min-height: 44px; }
  .hub-body, .sheet-body { padding-top: 14px; padding-bottom: 20px; }
  .drawer-body { padding-top: 14px; gap: 16px; }
  .drawer-foot { padding: 8px 16px 10px; }
  .drawer-foot > .btn.primary { min-height: 46px; }
  .rail-panel { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); gap: 10px; }
  .rail-panel > h2 { display: none; }
  .btn.list-btn { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .btn.list-btn.primary { min-height: 48px; font-size: 16px; }
  .dialog-card { padding: 22px 22px 16px; }
  .dialog-card h2 { font-size: 28px; }
  .dialog-ico { width: 44px; height: 44px; margin-bottom: 8px; }
  .dialog-actions { margin-top: 14px; }
  .bigmedals { margin: 8px 0; } .score { font-size: 42px; }
  .deb-lines { margin: 8px 0; }
  .hg-info { top: calc(max(10px, env(safe-area-inset-top)) + 56px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 92px); }
  .hg-hint { display: none; }
  .map-directory { max-height: calc(100% - 16px); }
}
/* the collapsed details panel must not be stretched between top and bottom */
@media (max-height: 520px) and (min-width: 641px) and (max-width: 900px) {
  .hg-info { top: auto; max-height: calc(100% - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)) - 152px); }
}

/* ================================================================== preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --panel: #0b0f14; --glass: #0b0f14; --glass-hover: #151b23; --card: #111720; --blur: none; }
  .screen.sheet { background: #06080b; }
  #hud { --g-bg: rgba(5, 8, 12, .92); --g-bg2: rgba(5, 8, 12, .96); }
  #hud-strip, #hud-sys, #hud .hud-btn { background: rgba(5, 8, 12, .92); }
}
@media (forced-colors: active) {
  .ico, .tile-go, .site-link::before { background: CanvasText; } .btn .ico, .btn .tile-go { background: ButtonText; }
  .medals i { background: GrayText; } .medals i.on { background: CanvasText; }
  .sw { border: 1px solid CanvasText; } .sw::after { background: CanvasText; }
  .stripes i, .xpbar i, .sb-t i { background: CanvasText; }
  .btn.primary, .btn.tile, .btn.tile.primary { background-image: none; border: 1px solid ButtonText; }
  .btn.card.on, .chip.on, .card.hg-item.on, .seg .btn[aria-pressed='true'], .paint-presets .btn[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
  .tab.on::after, .hdr::after, .group::before, .panel::before { background: Highlight; }
  .screen input[type=range]::-webkit-slider-thumb { background: ButtonText; } .screen input[type=range]::-webkit-slider-runnable-track { background: GrayText; }
}