/* Command interface. Deliberately scoped to the dialog: no flight HUD geometry. */
#modal {
  --panel-ink: #070e17;
  --panel-surface: #101f2a;
  --panel-raised: #142630;
  --panel-line: #8eafb32a;
  --panel-line-strong: #9bbcc147;
  --panel-white: #edf5f7;
  --panel-muted: #a3b6c0;
  --panel-mint: #91efd6;
  --panel-amber: #edb77b;
  --panel-gutter: 36px;
  width: min(1080px, calc(100% - 48px));
  max-width: 1080px;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0 var(--panel-gutter) var(--panel-gutter);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #526d77 var(--panel-ink);
  scroll-padding-top: 96px;
  border: 1px solid var(--panel-line-strong);
  border-radius: 16px;
  background: radial-gradient(ellipse at 95% 0%, #294a4824, transparent 48%), var(--panel-ink);
  box-shadow: 0 40px 120px #000b, 0 0 0 1px #02090d, inset 0 1px 0 #d8f7ef0a;
  color: var(--panel-white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
}
#modal::before { content: none; }
#modal::backdrop { background: #02070ddd; backdrop-filter: blur(16px); }
#modal #modal-content { min-width: 0; }
#modal .dialog-toolbar,
#modal.carrier-modal .dialog-toolbar,
#modal.pilot-modal .dialog-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  margin: 0 calc(-1 * var(--panel-gutter)) 30px;
  padding: 12px var(--panel-gutter);
  background: #09121bf5;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--panel-line);
}
#modal .dialog-toolbar::after {
  content: 'NAC / COMMAND';
  order: -1;
  font: 10px/1.5 var(--mono);
  letter-spacing: 1.4px;
  color: #a8bbbcb0;
}
#modal .dialog-toolbar:has(#panel-back:not([hidden]))::after { content: none; }
#modal .dialog-toolbar #panel-back:not([hidden]) {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--panel-muted);
  font: 11px/1.4 var(--mono);
  letter-spacing: .8px;
}
#modal .dialog-toolbar .dialog-close {
  position: static;
  float: none;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--panel-line-strong);
  border-radius: 50%;
  background: #15252e;
  color: var(--panel-white);
  font: 27px/1 var(--body);
  box-shadow: none;
}
#modal .dialog-toolbar .dialog-close:hover { background: #223840; border-color: #91efd67a; }
#modal h2,
#modal .carrier-heading h2,
#modal .pilot-page h2 {
  margin: 15px 0 16px;
  font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--body);
  letter-spacing: -1.6px;
  text-wrap: balance;
  color: var(--panel-white);
}
#modal .eyebrow {
  font: 10px/1.65 var(--mono);
  letter-spacing: 1.6px;
  color: var(--panel-mint);
}
#modal .lead {
  max-width: 760px;
  margin: 0 0 30px;
  font: 14px/1.85 var(--body);
  color: var(--panel-muted);
}
#modal h3 { font: 600 19px/1.35 var(--body); letter-spacing: -.45px; color: var(--panel-white); }
#modal-content > h3 { margin: 34px 0 16px; padding-top: 25px; border-top: 1px solid var(--panel-line); }
#modal button { min-height: 44px; }
#modal :is(button, a, input, select, summary):focus-visible { outline: 2px solid var(--panel-mint); outline-offset: 4px; }
#modal :is(button, input, select):disabled { opacity: .56; cursor: not-allowed; }
#modal :is(.primary-button, .outline-button) {
  min-height: 52px;
  padding: 15px 20px;
  border-radius: 7px;
  font: 600 11px/1.6 var(--mono);
  letter-spacing: .7px;
  box-shadow: none;
}
#modal .primary-button { color: #0c211f; background: var(--panel-mint); border: 1px solid #bcffeb; }
#modal .primary-button:hover:not(:disabled) { background: #b1f9e4; filter: none; transform: none; }
#modal .outline-button { background: #11212c; color: #d4e2e5; border-color: var(--panel-line-strong); }
#modal .outline-button:hover:not(:disabled) { border-color: #91efd69c; background: #193039; color: var(--panel-mint); }
#modal .text-button { display: inline-flex; align-items: center; font: 11px/1.6 var(--mono); color: #b5c9cb; border-bottom-color: var(--panel-line-strong); }
#modal :is(select, input[type=text], input[type=password], input:not([type])) {
  min-height: 48px;
  padding: 12px 14px;
  background: #07111a;
  border: 1px solid var(--panel-line-strong);
  border-radius: 7px;
  color: var(--panel-white);
  font: 14px/1.5 var(--body);
}
#modal :is(input, select) { accent-color: var(--panel-mint); }
#modal p { text-wrap: pretty; }

/* The carrier: a cinematic deck, followed by a legible engineering workbench. */
#modal.carrier-modal { width: min(1180px, calc(100% - 48px)); max-width: 1180px; }
#modal .carrier-heading { gap: 30px; align-items: center; padding: 0; margin-bottom: 26px; }
#modal .carrier-heading p { margin: 0; max-width: 520px; font: 14px/1.8 var(--body); color: var(--panel-muted); }
#modal .carrier-wallet { flex: 0 0 225px; max-width: none; padding: 20px 22px; border-left: 1px solid var(--panel-line); text-align: right; }
#modal .carrier-wallet > span { font: 10px/1.6 var(--mono); letter-spacing: 1px; color: var(--panel-muted); }
#modal .carrier-wallet > strong { margin: 7px 0; font: 500 42px/1.1 var(--body); letter-spacing: -1.5px; color: var(--panel-amber); font-variant-numeric: tabular-nums; }
#modal .carrier-wallet > small { font: 9px/1.7 var(--mono); letter-spacing: .25px; color: #b7c7c9; }
#modal .carrier-stage { height: 244px; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: #0c1922; }
#modal .carrier-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #06121b75, transparent 55%), linear-gradient(0deg, #06121b80, transparent 45%); }
#modal .carrier-aircraft { z-index: 1; top: 26px; left: 28px; max-width: 50%; }
#modal .carrier-aircraft span { font: 10px/1.6 var(--mono); letter-spacing: 1.2px; color: #bacccd; }
#modal .carrier-aircraft strong { font: 600 28px/1.2 var(--body); letter-spacing: -.8px; color: #eff6f6; margin: 10px 0; }
#modal .carrier-aircraft small { font: 9px/1.8 var(--mono); letter-spacing: .6px; color: #b7c7ce; }
#modal .carrier-deck-label { z-index: 1; bottom: 22px; left: 28px; font: 9px/1.6 var(--mono); letter-spacing: 1px; color: #bce5d7; }
#modal .carrier-summary { gap: 0; padding: 25px 0; border-bottom-color: var(--panel-line); }
#modal .carrier-summary > div { padding: 0 28px; }
#modal .carrier-summary > div:first-child { padding-left: 0; }
#modal .carrier-summary > div + div { border-left-color: var(--panel-line); }
#modal .carrier-summary span { font: 10px/1.6 var(--mono); letter-spacing: .8px; color: var(--panel-muted); }
#modal .carrier-summary strong { margin-top: 8px; font: 500 25px/1.3 var(--body); letter-spacing: -.6px; color: var(--panel-white); font-variant-numeric: tabular-nums; }
#modal .carrier-summary small { font: 9px/1.5 var(--mono); letter-spacing: .5px; color: var(--panel-muted); }
#modal .carrier-toolbar { gap: 28px; padding: 22px 0 12px; }
#modal .carrier-veteran { min-width: 220px; max-width: 340px; }
#modal .carrier-veteran span { font: 10px/1.5 var(--mono); letter-spacing: .9px; color: #c9d7d8; }
#modal .carrier-veteran b { margin: 9px 0 12px; font: 9px/1.6 var(--mono); color: var(--panel-muted); }
#modal .carrier-veteran > i { height: 4px; border-radius: 4px; background: #253b42; overflow: hidden; }
#modal .carrier-veteran em { background: var(--panel-mint); }
#modal .carrier-links { max-width: 500px; gap: 8px 16px; }
#modal .carrier-links button { min-height: 44px; padding: 10px 0; font: 10px/1.5 var(--mono); color: #c2d5d5; border-bottom: 1px solid var(--panel-line); }
#modal .carrier-links button:hover { color: var(--panel-mint); border-color: #91efd673; }
#modal .carrier-status { min-height: 22px; margin: 10px 0 20px; font: 12px/1.7 var(--body); color: var(--panel-muted); }
#modal .carrier-status.visible { color: var(--panel-mint); }
#modal .engineering-tabs { position: sticky; top: 72px; z-index: 20; gap: 5px; padding: 7px; margin: 0 0 24px; border: 1px solid var(--panel-line); border-radius: 9px; background: #0b161ff7; backdrop-filter: blur(16px); }
#modal .engineering-tabs button { min-width: 0; min-height: 46px; border: 1px solid transparent; border-radius: 5px; padding: 11px 8px; font: 500 12px/1.5 var(--body); color: var(--panel-muted); }
#modal .engineering-tabs button[aria-selected=true] { border-color: #91efd647; background: #91efd614; color: var(--panel-mint); }
#modal .engineering-tabs small { margin-left: 9px; font: 10px/1.5 var(--mono); color: inherit; opacity: .7; }
#modal .engineering-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#modal .engineering-card { padding: 25px; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: linear-gradient(150deg, #152731, #0e1a24 70%); box-shadow: inset 0 1px 0 #edf5f705; }
#modal .engineering-card.installed { border-color: #91efd646; }
#modal .engineering-card.commissioned { background: linear-gradient(150deg, #1c302c, #0e1a24); border-color: #91efd673; }
#modal .engineering-card-top { gap: 13px; }
#modal .engineering-icon { flex-basis: 42px; height: 42px; border: 1px solid #91efd639; border-radius: 9px; font-size: 27px; background: #91efd608; color: var(--panel-mint); }
#modal .engineering-card-top > span + span { font: 9px/1.8 var(--mono); letter-spacing: .85px; color: var(--panel-muted); }
#modal .engineering-card-top b { margin-top: 2px; font: 500 14px/1.5 var(--mono); color: #d5e9e5; }
#modal .engineering-card h3 { margin: 23px 0 12px; font: 600 22px/1.22 var(--body); letter-spacing: -.65px; }
#modal .engineering-card > p { min-height: 68px; margin: 0 0 21px; font: 13px/1.8 var(--body); color: var(--panel-muted); }
#modal .engineering-ranks { margin-bottom: 23px; gap: 4px; }
#modal .engineering-ranks i { height: 4px; border-radius: 1px; background: #34484d; }
#modal .engineering-ranks i.veteran { background: #71593952; }
#modal .engineering-ranks i.filled { background: var(--panel-mint); box-shadow: none; }
#modal .engineering-ranks i.filled.veteran { background: var(--panel-amber); }
#modal .engineering-comparison { gap: 13px; margin-bottom: 22px; }
#modal .engineering-comparison > span { font: 9px/1.6 var(--mono); letter-spacing: 1px; color: var(--panel-muted); }
#modal .engineering-comparison strong { margin-top: 5px; font: 500 12px/1.75 var(--body); color: #cfdddd; letter-spacing: 0; }
#modal .engineering-comparison .engineering-next { padding: 13px 15px; background: #91efd608; border: 1px solid #91efd624; border-radius: 6px; color: #a8d9cb; }
#modal .engineering-comparison .engineering-next strong { color: #dcf4eb; }
#modal .engineering-max { font: 10px/1.6 var(--mono); letter-spacing: .8px; color: var(--panel-mint); }
#modal .engineering-buy { gap: 12px; min-height: 50px; padding: 13px 14px; border-color: #91efd65c; border-radius: 6px; background: #91efd60d; color: #b9e9da; font: 500 10px/1.5 var(--mono); letter-spacing: .3px; }
#modal .engineering-buy b { font: 500 15px/1.4 var(--mono); color: var(--panel-mint); }
#modal .engineering-buy small { font-size: 9px; }
#modal .engineering-buy:hover:not(:disabled) { background: #91efd620; border-color: var(--panel-mint); }
#modal .engineering-afford { min-height: 18px; margin-top: 12px; font: 11px/1.6 var(--body); color: #a7babe; }
#modal .carrier-respec { gap: 28px; margin-top: 32px; padding: 28px 0; border-color: var(--panel-line); }
#modal .carrier-respec strong { font: 600 21px/1.4 var(--body); letter-spacing: -.6px; color: var(--panel-white); }
#modal .carrier-respec p { margin-top: 9px; font: 13px/1.8 var(--body); color: var(--panel-muted); }
#modal .carrier-respec button { font-size: 10px; }
#modal .carrier-departure { bottom: calc(-1 * var(--panel-gutter)); margin: 0 calc(-1 * var(--panel-gutter)) calc(-1 * var(--panel-gutter)); padding: 20px var(--panel-gutter); gap: 28px; border-color: var(--panel-line-strong); background: #0a151ef5; backdrop-filter: blur(20px); border-radius: 0 0 15px 15px; }
#modal .carrier-departure > span { max-width: 470px; font: 12px/1.7 var(--body); color: var(--panel-muted); }
#modal .carrier-departure button { min-width: 272px; font-size: 10px; }

/* Aircraft, armament, special powers and distinctions share one card language. */
#modal .card-grid, #modal .power-cards { gap: 17px; }
#modal :is(.choice-card, .power-card, .award-card) { padding: 24px; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: linear-gradient(145deg, #13232d, #0d1821); }
#modal :is(.choice-card, .power-card) { transition: background .18s ease, border-color .18s ease; }
#modal :is(.choice-card, .power-card):hover:not(:disabled) { border-color: #91efd67a; background: #172c34; }
#modal :is(.choice-card, .power-card).selected { border-color: #91efd68c; background: linear-gradient(145deg, #1d3837, #11242a); box-shadow: inset 0 0 0 1px #91efd615; }
#modal :is(.choice-card > strong, .power-card > strong) { display: block; font: 600 22px/1.3 var(--body); letter-spacing: -.6px; color: var(--panel-white); }
#modal :is(.choice-card > small, .power-card > small) { margin-top: 9px; font: 9px/1.8 var(--mono); letter-spacing: .6px; color: var(--panel-mint); }
#modal :is(.choice-card > p, .power-card > p) { margin: 15px 0 0; font: 13px/1.85 var(--body); color: #aebfc6; }
#modal .choice-card .locked { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--panel-line); font: 11px/1.6 var(--body); color: var(--panel-amber); }
#modal :is(.choice-card, .power-card):disabled { opacity: .7; }
#modal #back-engineering { margin: -9px 0 17px; }
#modal .hangar-banner { position: relative; min-height: 216px; margin: 30px 0 24px; padding: 18px 36px; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: linear-gradient(90deg, #16373855, transparent), repeating-linear-gradient(90deg, transparent 0 59px, #acddd106 59px 60px), #0c1922; }
#modal .hangar-banner canvas { width: 240px; height: 170px; max-width: 48%; object-fit: contain; }
#modal .hangar-stats { width: 40%; min-width: 220px; }
#modal .hangar-stat { gap: 24px; margin: 17px 0; padding-bottom: 12px; border-bottom: 1px solid var(--panel-line); font: 10px/1.7 var(--mono); letter-spacing: .8px; color: var(--panel-muted); }
#modal .hangar-stat strong { color: var(--panel-mint); font-size: 15px; letter-spacing: 0; }
#modal .module-grid { gap: 12px; }
#modal .module-choice { min-height: 86px; gap: 16px; padding: 18px; border: 1px solid var(--panel-line-strong); border-radius: 8px; background: #0e1c25; }
#modal .module-choice:has(input:checked) { background: #15302e; border-color: #91efd659; }
#modal .module-choice input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; }
#modal .module-choice strong { font: 500 14px/1.5 var(--body); color: #e4efef; }
#modal .module-choice small { margin-top: 5px; font: 12px/1.65 var(--body); color: var(--panel-muted); }
#modal .form-row { gap: 20px; margin-top: 28px; }
#modal .form-row label { font: 500 13px/1.5 var(--body); color: #d2dfe2; }
#modal .form-row label > span { margin-bottom: 10px; }
#modal .form-row .save-status { text-align: left; margin-top: 10px; font: 12px/1.7 var(--body); color: var(--panel-muted); }
#modal .skin-options { gap: 10px; }
#modal .skin-option { min-height: 48px; gap: 10px; padding: 12px 16px; border: 1px solid var(--panel-line-strong); border-radius: 7px; background: #101f29; font-size: 12px; color: #c8d8dd; }
#modal .skin-option.selected { border-color: var(--panel-mint); background: #19352f; color: #e5f4ef; }
#modal .skin-option i { width: 14px; height: 14px; box-shadow: 0 0 0 3px #e4f2ee12; }
#modal .dialog-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--panel-line); }
#modal .dialog-actions .primary-button { min-width: 240px; }
#modal .dialog-status { color: var(--panel-amber); }
#modal .power-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
#modal .power-card { display: flex; flex-direction: column; align-items: flex-start; }
#modal .power-emblem { float: none; width: 52px; height: 52px; margin: 0 0 20px; border-radius: 12px; border-color: color-mix(in srgb, var(--power-color) 45%, transparent); background: color-mix(in srgb, var(--power-color) 7%, #0b1922); font-size: 31px; }
#modal .power-card > strong { margin: 10px 0 0; }
#modal .power-card > p { flex: 1; margin: 15px 0 24px; padding: 0; }
#modal .power-card > b { width: 100%; padding-top: 16px; border-top: 1px solid var(--panel-line); font: 10px/1.8 var(--mono); letter-spacing: .45px; color: var(--panel-mint); }
#modal .award-card { display: flex; flex-direction: column; }
#modal .award-card.unlocked { border-color: #edb77b7a; background: linear-gradient(145deg, #322d23, #101e27); }
#modal .award-icon { color: var(--panel-amber); font-size: 32px; }
#modal .award-card h3 { margin: 16px 0 10px; font-size: 18px; }
#modal .award-card p { flex: 1; min-height: 46px; margin: 0 0 16px; font: 13px/1.75 var(--body); color: var(--panel-muted); }
#modal .award-progress { height: 4px; margin: 14px 0 12px; background: #30434c; }
#modal .award-progress span { background: var(--panel-mint); }
#modal .award-card .progress-label { margin-bottom: 12px; font: 10px/1.6 var(--mono); color: #bacccd; }
#modal .award-card small { font: 10px/1.8 var(--mono); color: #e7be90; }

/* Mission files and encounter intelligence retain all tactical information. */
#modal .mission-card { align-items: flex-start; gap: 24px; margin-bottom: 14px; padding: 25px; border: 1px solid var(--panel-line-strong); border-radius: 10px; background: linear-gradient(115deg, #152832, #0e1923 70%); }
#modal .mission-card:disabled { opacity: .65; }
#modal .mission-card.selected { border-color: #91efd685; background: linear-gradient(115deg, #1b3636, #0e1d25); }
#modal .mission-card:hover:not(:disabled) { border-color: #91efd69c; }
#modal .mission-card .mission-number { flex: 0 0 48px; width: 48px; font: 400 36px/1.2 var(--body); letter-spacing: -1.5px; color: #91efd6a8; }
#modal .mission-card > div { min-width: 0; }
#modal .mission-card h3 { margin: 0 0 10px; font: 600 22px/1.3 var(--body); letter-spacing: -.5px; }
#modal .mission-card p { margin: 8px 0 0; font: 13px/1.75 var(--body); color: #afc0c7; }
#modal .mission-card p:first-of-type { font: 10px/1.9 var(--mono); letter-spacing: .15px; color: #bdd4d2; }
#modal .mission-card p:last-child { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--panel-line); font-size: 12px; color: #b9d9cd; }
#modal .mission-card .medal { padding: 7px 9px; border: 1px solid #edb77b36; border-radius: 4px; font: 9px/1.6 var(--mono); letter-spacing: .6px; color: var(--panel-amber); white-space: nowrap; }
#modal .boss-space-feature { margin: 28px 0 20px; border: 1px solid #adabd54a; border-radius: 11px; background: linear-gradient(120deg, #111e2b, #1b2435); }
#modal .boss-feature-art { min-height: 290px; }
#modal .boss-feature-art > span { bottom: 20px; left: 22px; font: 9px/1.7 var(--mono); letter-spacing: 1px; color: #c7d9e4; }
#modal .boss-feature-copy { padding: 30px; }
#modal .boss-feature-copy .eyebrow { font-size: 9px; color: #c9c2e6; }
#modal .boss-feature-copy h3 { margin: 14px 0 16px; font: 600 29px/1.15 var(--body); letter-spacing: -.9px; }
#modal .boss-feature-copy p { margin-bottom: 24px; font: 13px/1.85 var(--body); color: #b6c3d1; }
#modal .boss-feature-copy button { min-height: 50px; font-size: 10px; color: #ddd6f0; border-color: #beb0eb62; background: #c4b7f00a; }
#modal .boss-support-note { gap: 20px; margin-bottom: 30px; padding: 20px 24px; border: 1px solid #91efd62e; border-radius: 8px; background: #91efd607; }
#modal .boss-support-note strong { font: 10px/1.6 var(--mono); letter-spacing: .85px; color: #bcddda; }
#modal .boss-support-note p { margin: 7px 0 0; font: 13px/1.8 var(--body); color: #aebfc5; }
#modal .boss-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#modal .boss-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--panel-line-strong); border-radius: 11px; background: #0f1c26; transition: border-color .18s ease, background .18s ease; }
#modal .boss-card:hover, #modal .boss-card.selected { transform: none; border-color: #91efd69c; background: #142832; }
#modal .boss-card-art { width: 100%; border-bottom-color: var(--panel-line); }
#modal .boss-card-art canvas { display: block; width: 100%; max-width: none; height: auto; }
#modal .boss-card-art > span { top: 15px; left: 16px; padding: 6px 9px; border: 1px solid #a8d0d22a; border-radius: 4px; font: 9px/1.6 var(--mono); letter-spacing: .7px; background: #07121bd9; }
#modal .boss-card-copy { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 26px; }
#modal .boss-card-copy > small { font: 9px/1.8 var(--mono); letter-spacing: 1.1px; }
#modal .boss-card-copy h3 { margin: 9px 0 14px; font: 600 25px/1.22 var(--body); letter-spacing: -.65px; }
#modal .boss-card-copy > p { min-height: 0; margin: 0; font: 13px/1.85 var(--body); color: #b2c1c9; }
#modal .boss-tactics-label { margin: 24px 0 14px; font: 9px/1.6 var(--mono); letter-spacing: 1.15px; color: #a3b9bf; }
#modal .boss-mechanics { display: grid; gap: 13px; padding: 0; margin: 0 0 25px; }
#modal .boss-mechanics li { gap: 13px; font: 12px/1.8 var(--body); color: #c1ced4; }
#modal .boss-mechanics li > span { flex: 0 0 18px; padding-top: 2px; font: 9px/1.8 var(--mono); color: #91efd6b8; }
#modal .boss-card-footer { gap: 8px; margin-top: auto; padding-top: 18px; border-color: var(--panel-line-strong); }
#modal .boss-card-footer > strong { font: 500 10px/1.6 var(--mono); letter-spacing: .65px; color: var(--panel-mint); }
#modal .boss-card-footer > span { font: 9px/1.6 var(--mono); letter-spacing: .5px; color: #9eb1ba; }

/* Pilot identity and settings. Labels stay native, generous, and easy to target. */
#modal.pilot-modal { width: min(780px, calc(100% - 48px)); }
#modal .pilot-status { gap: 22px; margin-top: 26px; padding: 26px; border: 1px solid #91efd64a; border-radius: 10px; background: linear-gradient(120deg, #1a3333, #0e1c26); }
#modal .pilot-insignia { font-size: 46px; color: var(--panel-mint); }
#modal .pilot-status small, #modal .pilot-status span:not(.pilot-insignia) { font: 9px/1.8 var(--mono); letter-spacing: .7px; color: #a8c5c4; }
#modal .pilot-status strong { margin: 8px 0; font: 600 26px/1.25 var(--body); letter-spacing: -.7px; color: var(--panel-white); overflow-wrap: anywhere; }
#modal .pilot-message { margin: 14px 0 0; font: 13px/1.8 var(--body); color: var(--panel-mint); }
#modal .pilot-form { margin-top: 28px; padding-top: 26px; border-top-color: var(--panel-line); }
#modal .pilot-form h3 { margin: 0 0 20px; font: 600 21px/1.4 var(--body); letter-spacing: -.55px; }
#modal .pilot-form label { font: 500 13px/1.6 var(--body); color: #c9d8dc; }
#modal .pilot-form input { margin-top: 10px; min-height: 50px; border-radius: 7px; border-color: var(--panel-line-strong); background: #0c1821; font: 16px/1.5 var(--body); }
#modal .pilot-form p, #modal .recovery-vault p { margin: 14px 0 18px; font: 13px/1.85 var(--body); color: var(--panel-muted); }
#modal .pilot-form button { font-size: 10px; }
#modal .pilot-tools { margin-top: 30px; padding-top: 20px; border-color: var(--panel-line); }
#modal .pilot-tools summary { min-height: 44px; padding: 12px 0; font: 14px/1.5 var(--body); color: #d4e3e4; }
#modal .pilot-tools .text-button { font-size: 10px; }
#modal .recovery-vault { margin-top: 26px; padding: 26px; border: 1px solid #edb77b69; border-radius: 10px; background: linear-gradient(120deg, #2b2b24, #10232c); }
#modal .recovery-vault > span { font: 10px/1.7 var(--mono); letter-spacing: 1px; color: var(--panel-amber); }
#modal .recovery-vault code { margin: 20px 0; padding: 18px; border: 1px solid var(--panel-line); border-radius: 6px; background: #06131a94; color: #f0f7ef; font: 15px/1.9 var(--mono); }
#modal .recovery-vault > div { gap: 12px; }
#modal .recovery-vault button { font-size: 10px; }
#modal .settings-list { gap: 0; margin-top: 28px; border-top: 1px solid var(--panel-line); }
#modal .setting-row { min-height: 92px; gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--panel-line); font: 500 14px/1.6 var(--body); color: #dde8eb; }
#modal .setting-row > span:first-child { flex: 1; min-width: 0; }
#modal .setting-row p { max-width: 520px; margin-top: 7px; font: 12px/1.8 var(--body); color: var(--panel-muted); }
#modal .setting-row select { flex: 0 0 230px; width: 230px; min-height: 48px; font-size: 13px; }
#modal .setting-row input[type=range] { width: 210px; min-height: 44px; margin: 0; }
#modal .setting-row input[type=checkbox] { appearance: none; flex: 0 0 46px; width: 46px; height: 28px; margin: 8px 0; border: 1px solid #69818a66; border-radius: 18px; background: #1c2c36; cursor: pointer; transition: background .18s ease; }
#modal .setting-row input[type=checkbox]::before { content: ''; display: block; width: 18px; height: 18px; margin: 4px; border-radius: 50%; background: #9cadb6; transition: transform .18s ease; }
#modal .setting-row input[type=checkbox]:checked { border-color: #91efd680; background: #31574d; }
#modal .setting-row input[type=checkbox]:checked::before { transform: translateX(18px); background: var(--panel-mint); }
#modal .setting-row input[type=checkbox]:disabled { cursor: not-allowed; }
#modal .control-order { justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 380px; }
#modal .control-order button { padding: 10px 12px; background: #142b35; border: 1px solid var(--panel-line-strong); border-radius: 6px; color: #c9dddd; font: 10px/1.5 var(--mono); }
#modal .audio-mixer-heading { margin-top: 24px; padding: 24px 0 17px; border: 0; }
#modal .audio-mixer-heading p { margin: 8px 0; font: 13px/1.8 var(--body); color: var(--panel-muted); }
#modal .audio-range { gap: 14px; }
#modal .audio-range [data-audio-value] { width: 38px; font: 11px/1.5 var(--mono); color: #cfdfde; }
#modal .audio-setting input[type=range] { width: 180px; }

/* Flight records, field guide and command menu. */
#modal .record-tabs { gap: 8px; margin: 26px 0; padding: 6px; border: 1px solid var(--panel-line); border-radius: 8px; background: #0c1922; }
#modal .record-tabs button { flex: 1; min-height: 46px; padding: 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; font: 500 12px/1.5 var(--body); color: var(--panel-muted); }
#modal .record-tabs button.selected { background: #91efd616; border-color: #91efd64a; color: var(--panel-mint); }
#modal #record-body { max-width: 100%; overflow-x: auto; }
#modal .records-table { font: 13px/1.6 var(--body); font-variant-numeric: tabular-nums; }
#modal .records-table th { padding: 16px 12px; font: 9px/1.6 var(--mono); letter-spacing: .8px; color: #adc0c3; border-color: var(--panel-line-strong); }
#modal .records-table td { padding: 20px 12px; border-color: var(--panel-line); color: #c7d7db; }
#modal .records-table tbody tr:hover { background: #91efd606; }
#modal .records-table td strong { font: 500 17px/1.5 var(--mono); color: var(--panel-mint); }
#modal .records-table td small { font: 10px/1.8 var(--mono); color: #95adb8; }
#modal .empty-state { min-height: 210px; display: grid; place-content: center; padding: 36px; border: 1px dashed var(--panel-line-strong); border-radius: 10px; background: #101f2966; color: #afc2c8; font: 14px/1.9 var(--body); }
#modal .daily-note { padding: 12px 20px; border-left-color: #91efd684; font: 13px/1.8 var(--body); color: #b2c8ce; }
#modal .manual-grid { gap: 24px; }
#modal .manual-grid article { min-width: 0; padding: 24px; border: 1px solid var(--panel-line); border-radius: 10px; background: #101e27; }
#modal .manual-grid h3 { margin: 0 0 18px; font: 600 20px/1.4 var(--body); color: #d5efe5; }
#modal .manual-grid p { margin: 0; font: 14px/1.9 var(--body); color: #aec0c8; }
#modal[data-view=menu] { width: min(850px, calc(100% - 48px)); padding-top: 0; }
#modal .cockpit-menu-heading p { margin: 0 0 26px; font: 14px/1.8 var(--body); color: var(--panel-muted); }
#modal .cockpit-menu-stats { gap: 0; margin: 26px 0; padding: 20px; border: 1px solid var(--panel-line); border-radius: 8px; background: #101e27; }
#modal .cockpit-menu-stats > div + div { padding-left: 24px; border-left: 1px solid var(--panel-line); }
#modal .cockpit-menu-stats small { font: 9px/1.7 var(--mono); letter-spacing: .8px; color: var(--panel-muted); }
#modal .cockpit-menu-stats strong { margin-top: 8px; font: 500 22px/1.2 var(--body); letter-spacing: -.5px; color: #dfefeb; }
#modal #menu-return { min-height: 54px; border-radius: 7px; font-size: 11px; }
#modal .cockpit-menu-grid { gap: 12px; margin: 26px 0 22px; }
#modal .cockpit-menu-grid button { gap: 17px; min-height: 90px; padding: 20px; border: 1px solid var(--panel-line-strong); border-radius: 9px; background: linear-gradient(125deg, #142731, #0e1c26); }
#modal .cockpit-menu-grid button:hover { border-color: #91efd683; background: #19323a; }
#modal .cockpit-menu-grid i { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #91efd62e; border-radius: 8px; background: #91efd606; color: var(--panel-mint); font: 24px/1 var(--mono); }
#modal .cockpit-menu-grid strong { font: 500 15px/1.5 var(--body); letter-spacing: -.2px; color: #e2eeed; }
#modal .cockpit-menu-grid small { margin-top: 5px; font: 11px/1.6 var(--body); color: #a4b9c3; }
#modal .cockpit-menu-grid b { display: block; font: 23px/1 var(--body); color: #91efd69c; }
#modal .cockpit-menu-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#modal .cockpit-menu-sound { min-height: 54px; padding: 15px 18px; border-color: var(--panel-line-strong); border-radius: 7px; background: #0d1b24; font: 13px/1.5 var(--body); color: #cfdee1; }
#modal .cockpit-menu-sound strong { font: 10px/1.5 var(--mono); color: #98aeb8; }
#modal .cockpit-menu-sound[aria-pressed=true] strong { color: var(--panel-mint); }
#modal .cockpit-menu-help, #modal .cockpit-menu-footnote { margin: 22px 0 0; font: 12px/1.85 var(--body); color: #9bb2bd; }
#modal .cockpit-menu-footnote a { color: #c2dcd7; text-underline-offset: 3px; }
#modal .cockpit-menu-end { min-height: 48px; margin-top: 18px; justify-content: center; color: #dfae9d; }

/* Draw navigation symbols as vectors so the interface never depends on glyph fallback. */
#modal .cockpit-menu-grid button i { font-size: 0; }
#modal .cockpit-menu-grid button i::before {
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--menu-symbol) center / contain no-repeat;
  mask: var(--menu-symbol) center / contain no-repeat;
}
#modal [data-menu-view=engineering] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2"/><path d="M12 7v14M7 11h10M3 14v3c3 0 4 4 9 4s6-4 9-4v-3M3 14l-2 3m20-3 2 3"/></svg>'); }
#modal [data-menu-view=pilot], #modal .pilot-status .pilot-insignia { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2"/><path d="M12 1v5m0 12v5M1 12h5m12 0h5"/></svg>'); }
#modal [data-menu-view=hangar] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="m12 2 2 7 7 6v3l-7-3v4l2 2H8l2-2v-4l-7 3v-3l7-6Z"/></svg>'); }
#modal [data-menu-view=powers] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="m14 2-10 12h7l-1 8L20 9h-7Z"/></svg>'); }
#modal [data-menu-view=campaign] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="19" r="2"/><circle cx="19" cy="5" r="2"/><path d="M7 19h8a4 4 0 0 0 0-8H9a4 4 0 0 1 0-8h6"/></svg>'); }
#modal [data-menu-view=bosses] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="m12 2 10 10-10 10L2 12Z"/><path d="m12 7 5 5-5 5-5-5Z"/></svg>'); }
#modal [data-menu-view=records] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M4 6h2m4 0h10M4 12h2m4 0h10M4 18h2m4 0h10"/></svg>'); }
#modal [data-menu-view=achievements] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"><path d="m12 2 3 6 7 1-5 5 1 8-6-4-6 4 1-8-5-5 7-1Z"/></svg>'); }
#modal [data-menu-view=settings] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M5 3v4m0 6v8M12 3v10m0 6v2M19 3v1m0 6v11"/><circle cx="5" cy="10" r="3"/><circle cx="12" cy="16" r="3"/><circle cx="19" cy="7" r="3"/></svg>'); }
#modal [data-menu-view=manual] { --menu-symbol: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v16M3 3c4-1 7 0 9 2 2-2 5-3 9-2v16c-4-1-7 0-9 2-2-2-5-3-9-2Z"/></svg>'); }
#modal .pilot-status .pilot-insignia { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 44px; font-size: 0; }
#modal .pilot-status .pilot-insignia::before { content: ''; width: 38px; height: 38px; background: var(--panel-mint); -webkit-mask: var(--menu-symbol) center / contain no-repeat; mask: var(--menu-symbol) center / contain no-repeat; }

@media (max-width: 1000px) {
  #modal { --panel-gutter: 28px; }
  #modal .engineering-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .engineering-card > p { min-height: 0; }
  #modal .carrier-wallet { flex-basis: 180px; padding-right: 0; }
  #modal .carrier-links { gap: 4px 12px; }
  #modal .carrier-links button { font-size: 9px; }
  #modal .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .power-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal .boss-feature-copy { padding: 24px; }
}
@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px), (max-height: 540px) and (max-width: 1024px) {
  #modal, #modal.carrier-modal, #modal.pilot-modal, #modal[data-view=menu] {
    --panel-gutter: 22px;
    width: calc(100% - 20px);
    max-width: 780px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top));
    margin: auto;
    padding: 0 var(--panel-gutter) calc(var(--panel-gutter) + env(safe-area-inset-bottom));
    border-radius: 13px;
  }
  #modal .dialog-toolbar, #modal.carrier-modal .dialog-toolbar, #modal.pilot-modal .dialog-toolbar { top: 0; min-height: 66px; margin-bottom: 24px; padding: 10px var(--panel-gutter); }
  #modal h2, #modal .carrier-heading h2, #modal .pilot-page h2 { font-size: 32px; letter-spacing: -1.25px; }
  #modal .eyebrow { font-size: 9px; letter-spacing: 1.1px; }
  #modal .lead { font-size: 13px; line-height: 1.85; margin-bottom: 25px; }
  #modal .carrier-heading { align-items: flex-start; gap: 17px; margin-bottom: 20px; }
  #modal .carrier-heading p { font-size: 12px; }
  #modal .carrier-wallet { flex-basis: 142px; padding: 14px 0 14px 18px; }
  #modal .carrier-wallet > strong { font-size: 31px; }
  #modal .carrier-wallet > span, #modal .carrier-wallet > small { font-size: 8px; letter-spacing: .35px; }
  #modal .carrier-wallet > small { display: block; }
  #modal .carrier-stage { height: 195px; }
  #modal .carrier-aircraft { top: 22px; left: 22px; }
  #modal .carrier-aircraft strong { font-size: 24px; }
  #modal .carrier-aircraft span { font-size: 9px; }
  #modal .carrier-aircraft small { font-size: 8px; }
  #modal .carrier-deck-label { bottom: 18px; left: 22px; font-size: 8px; }
  #modal .carrier-summary { padding: 21px 0; }
  #modal .carrier-summary > div { padding-inline: 17px; }
  #modal .carrier-summary span { font-size: 8px; letter-spacing: .4px; }
  #modal .carrier-summary strong { font-size: 22px; }
  #modal .carrier-summary small { display: block; font-size: 8px; margin-top: 3px; }
  #modal .carrier-toolbar { display: block; padding-top: 23px; }
  #modal .carrier-veteran { max-width: none; }
  #modal .carrier-links { justify-content: flex-start; max-width: none; margin-top: 15px; gap: 6px 19px; }
  #modal .carrier-links button { font-size: 9px; }
  #modal .engineering-tabs { top: 66px; margin-bottom: 20px; padding: 5px; gap: 3px; }
  #modal .engineering-tabs button { min-height: 44px; padding: 9px 5px; font-size: 11px; }
  #modal .engineering-tabs small { margin-left: 6px; font-size: 9px; }
  #modal .engineering-card { padding: 22px; }
  #modal .engineering-card h3 { font-size: 21px; }
  #modal .carrier-respec { display: block; }
  #modal .carrier-respec button { width: 100%; margin-top: 12px; }
  #modal .carrier-departure { display: block; bottom: calc(-1 * var(--panel-gutter) - env(safe-area-inset-bottom)); margin: 0 calc(-1 * var(--panel-gutter)) calc(-1 * var(--panel-gutter) - env(safe-area-inset-bottom)); padding: 15px var(--panel-gutter) calc(15px + env(safe-area-inset-bottom)); border-radius: 0 0 12px 12px; }
  #modal .carrier-departure > span { display: block; max-width: none; margin: 0 0 12px; font-size: 11px; }
  #modal .carrier-departure button { width: 100%; min-width: 0; }
  #modal .boss-roster { gap: 18px; }
  #modal .boss-card-copy { padding: 22px; }
  #modal .boss-feature-copy h3 { font-size: 26px; }
  #modal .boss-support-note { padding: 18px; }
  #modal .hangar-banner { min-height: 188px; padding: 15px 22px; }
  #modal .hangar-banner canvas { width: 210px; height: 155px; }
  #modal .hangar-stats { min-width: 190px; }
  #modal .hangar-stat { gap: 15px; font-size: 9px; }
  #modal .settings-list { margin-top: 22px; }
  #modal .setting-row { gap: 24px; }
  #modal .setting-row select { flex-basis: 195px; width: 195px; }
  #modal .setting-row input[type=range] { width: 170px; }
  #modal .audio-setting input[type=range] { width: 140px; }
  #modal .audio-range { gap: 10px; }
  #modal .manual-grid { grid-template-columns: 1fr; }
  #modal .cockpit-menu-grid button { gap: 12px; min-height: 87px; padding: 16px; }
  #modal .cockpit-menu-grid strong { font-size: 14px; }
  #modal .cockpit-menu-grid small { font-size: 11px; }
}
@media (max-width: 540px) {
  #modal, #modal.carrier-modal, #modal.pilot-modal, #modal[data-view=menu] { --panel-gutter: 18px; width: calc(100% - 16px); }
  #modal .dialog-toolbar { margin-bottom: 22px; }
  #modal h2, #modal .carrier-heading h2, #modal .pilot-page h2 { font-size: 30px; letter-spacing: -1.1px; }
  #modal .carrier-heading { display: block; }
  #modal .carrier-heading h2 { margin-top: 11px; }
  #modal .carrier-heading p { font-size: 13px; }
  #modal .carrier-wallet { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 15px; margin-top: 22px; padding: 17px 19px; border: 1px solid #edb77b36; border-radius: 8px; background: #edb77b05; text-align: left; }
  #modal .carrier-wallet > strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 31px; }
  #modal .carrier-wallet > span { font-size: 9px; letter-spacing: .8px; }
  #modal .carrier-wallet > small { font-size: 8px; }
  #modal .carrier-stage { height: 196px; }
  #modal .carrier-aircraft { max-width: 68%; top: 19px; left: 19px; }
  #modal .carrier-aircraft strong { font-size: 22px; margin: 8px 0; }
  #modal .carrier-aircraft small { max-width: 200px; font-size: 8px; line-height: 1.8; letter-spacing: .1px; }
  #modal .carrier-deck-label { bottom: 17px; left: 19px; font-size: 8px; letter-spacing: .5px; }
  #modal .carrier-summary > div { padding-inline: 12px; }
  #modal .carrier-summary > div:last-child { padding-right: 0; }
  #modal .carrier-summary span { font-size: 8px; line-height: 1.8; }
  #modal .carrier-summary strong { font-size: 21px; }
  #modal .carrier-summary small { font-size: 8px; }
  #modal .carrier-links { gap: 4px 16px; }
  #modal .carrier-status { font-size: 12px; }
  #modal .engineering-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  #modal .engineering-tabs button { font-size: 12px; }
  #modal .engineering-grid { grid-template-columns: 1fr; gap: 16px; }
  #modal .engineering-card { padding: 24px; }
  #modal .engineering-card h3 { font-size: 23px; }
  #modal .engineering-card > p { font-size: 13px; }
  #modal .engineering-comparison { grid-template-columns: 1fr; gap: 13px; }
  #modal .engineering-comparison > span { font-size: 9px; }
  #modal .engineering-comparison strong { font-size: 13px; }
  #modal .engineering-buy { font-size: 11px; }
  #modal .engineering-buy b { font-size: 15px; }
  #modal .engineering-afford { font-size: 12px; }
  #modal .card-grid, #modal .module-grid, #modal .power-cards, #modal .form-row { grid-template-columns: 1fr; }
  #modal :is(.choice-card, .power-card, .award-card) { padding: 23px; }
  #modal :is(.choice-card > strong, .power-card > strong) { font-size: 22px; }
  #modal .hangar-banner { display: block; padding: 20px; background: radial-gradient(ellipse at 50% 15%, #2348446b, transparent 70%), #0b1720; }
  #modal .hangar-banner canvas { display: block; width: min(100%, 228px); height: auto; aspect-ratio: 25 / 17; max-width: 100%; margin: 0 auto 15px; }
  #modal .hangar-stats { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
  #modal .hangar-stat { display: block; min-width: 0; margin: 0; padding: 0 0 8px; font-size: 8px; letter-spacing: .3px; }
  #modal .hangar-stat strong { display: block; margin-top: 8px; font-size: 18px; }
  #modal .dialog-actions { display: block; }
  #modal .dialog-actions .primary-button { width: 100%; min-width: 0; }
  #modal .dialog-status { display: block; margin-top: 12px; }
  #modal .power-emblem { width: 48px; height: 48px; margin-bottom: 17px; }
  #modal .mission-card { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 15px; padding: 22px 18px; }
  #modal .mission-card .mission-number { flex-basis: 31px; width: 31px; font-size: 27px; }
  #modal .mission-card h3 { padding-right: 5px; font-size: 20px; }
  #modal .mission-card p { font-size: 12px; }
  #modal .mission-card p:first-of-type { font-size: 9px; }
  #modal .mission-card .medal { grid-column: 2; justify-self: start; margin: 0; padding: 6px 9px; font-size: 9px; letter-spacing: .4px; }
  #modal .boss-space-feature { grid-template-columns: 1fr; }
  #modal .boss-feature-art { min-height: 0; height: 240px; }
  #modal .boss-feature-art canvas { object-position: center 46%; }
  #modal .boss-feature-copy { padding: 24px; }
  #modal .boss-feature-copy p { font-size: 13px; }
  #modal .boss-support-note { gap: 15px; align-items: flex-start; }
  #modal .boss-support-note p { font-size: 12px; }
  #modal .boss-roster { grid-template-columns: 1fr; }
  #modal .boss-card-copy { padding: 24px; }
  #modal .boss-card-copy h3 { font-size: 25px; }
  #modal .boss-card-copy > p { font-size: 13px; }
  #modal .boss-mechanics li { font-size: 12px; }
  #modal .pilot-status { gap: 17px; padding: 22px; }
  #modal .pilot-status strong { font-size: 23px; }
  #modal .pilot-status span:not(.pilot-insignia) { font-size: 8px; }
  #modal .pilot-insignia { font-size: 37px; }
  #modal .pilot-form button { width: 100%; }
  #modal .recovery-vault { padding: 21px; }
  #modal .recovery-vault code { font-size: 13px; padding: 14px; }
  #modal .recovery-vault > div { flex-direction: column; }
  #modal .recovery-vault > div button { width: 100%; }
  #modal .setting-row { gap: 18px; padding: 21px 0; font-size: 14px; }
  #modal .setting-row p { font-size: 12px; }
  #modal .setting-row:has(select), #modal .setting-row:has(.control-order), #modal .setting-row:has(input[type=range]) { flex-wrap: wrap; }
  #modal .setting-row:has(select) > span:first-child, #modal .setting-row:has(.control-order) > span:first-child, #modal .setting-row:has(input[type=range]) > span:first-child { flex-basis: 100%; }
  #modal .setting-row select { flex: 1 1 100%; width: 100%; }
  #modal .setting-row input[type=range] { width: 100%; }
  #modal .control-order { justify-content: flex-start; max-width: none; width: 100%; }
  #modal .control-order button { flex: 1; }
  #modal .audio-range { width: 100%; }
  #modal .audio-setting input[type=range] { flex: 1; min-width: 0; width: auto; }
  #modal .audio-range [data-audio-value] { flex: 0 0 40px; }
  #modal .record-tabs { gap: 3px; padding: 4px; }
  #modal .record-tabs button { padding: 10px 7px; font-size: 11px; }
  #modal .records-table th { padding: 13px 7px; font-size: 8px; letter-spacing: .3px; }
  #modal .records-table td { padding: 17px 7px; font-size: 11px; }
  #modal .records-table td strong { font-size: 13px; }
  #modal .records-table td small { font-size: 9px; }
  #modal .manual-grid article { padding: 22px; }
  #modal .manual-grid p { font-size: 14px; }
  #modal .cockpit-menu-heading p { font-size: 13px; }
  #modal .cockpit-menu-stats { padding: 17px 15px; }
  #modal .cockpit-menu-stats > div + div { padding-left: 13px; }
  #modal .cockpit-menu-stats small { font-size: 8px; }
  #modal .cockpit-menu-stats strong { font-size: 19px; }
  #modal .cockpit-menu-grid { grid-template-columns: 1fr; gap: 10px; }
  #modal .cockpit-menu-grid button { min-height: 78px; gap: 18px; padding: 17px 20px; }
  #modal .cockpit-menu-grid i { flex-basis: 38px; width: 38px; height: 38px; }
  #modal .cockpit-menu-grid strong { font-size: 15px; }
  #modal .cockpit-menu-grid small { font-size: 12px; }
  #modal .cockpit-menu-help, #modal .cockpit-menu-footnote { font-size: 12px; }
}
@media (max-height: 540px) and (min-width: 541px) {
  #modal, #modal.carrier-modal, #modal.pilot-modal, #modal[data-view=menu] { max-height: calc(100dvh - 16px); }
  #modal .dialog-toolbar { min-height: 60px; padding-block: 7px; margin-bottom: 20px; }
  #modal .engineering-tabs { position: static; }
  #modal .carrier-departure { position: static; }
  #modal .boss-space-feature { grid-template-columns: 1fr 1fr; }
  #modal .boss-feature-art { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  #modal *, #modal *::before, #modal *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #modal::backdrop { backdrop-filter: none; }
}
.reduced-effects #modal *, .reduced-effects #modal *::before, .reduced-effects #modal *::after { animation: none !important; transition: none !important; }