/* Legacy layout and paint share one cascade layer. Theme recipes own opt-in appearance. */
@layer legacy {
  /* Shared visual language for game screens, dialogs and the separate workshop. */
  :root,
  body.game-shell {
    color-scheme: dark;
    --paper: #070914;
    --ink: #edf2ff;
    --muted: #98acc8;
    --line: #293f66;
    --accent: #68d9fa;
    --safe: #68d9fa;
    --danger: #fa68b4;
    --pixel-font: var(--fk-font-ui, 'Field Kit UI', sans-serif);
  }

  /* The same inherited token reaches dialogs, prompts, HUD and title actions. */
  body.game-shell[data-text-face='plain'] {
    --pixel-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  html {
    background: #070914;
    scrollbar-color: #5d8bc5 #0a1021;
  }
  body,
  body.game-shell {
    background: #070914;
    color: #edf2ff;
    font-family: var(--pixel-font);
    font-size: 20px;
    line-height: 1.5;
    font-synthesis: none;
  }
  h1,
  h2,
  h3,
  button,
  .button,
  select,
  label,
  summary,
  kbd,
  input,
  textarea,
  .wordmark {
    font-family: var(--pixel-font);
    font-weight: 400;
  }
  h1,
  h2,
  h3 {
    letter-spacing: 0;
    text-wrap: balance;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  .version,
  .edition,
  .deck-heading,
  .section-line,
  .telemetry span,
  .coverage em,
  .eyebrow,
  .overlay-footnote,
  .flight-status,
  .direction-controls button,
  .ability-buttons > span,
  .minor-controls,
  .field,
  .field select,
  .field input,
  .mission .number,
  .mission .medal,
  .page-footer,
  .page-footer nav {
    font-family: var(--pixel-font);
  }
  button,
  .button,
  .icon-button,
  .text-button,
  select,
  input,
  textarea {
    border-radius: 0;
    font-size: 20px;
    letter-spacing: 0;
  }
  button,
  .button {
    min-height: 44px;
    border: 1px solid #314b75;
    border-bottom: 3px solid #314b75;
    background: #101a30;
    color: #d9e8ff;
    transition: none;
    box-shadow: none;
  }
  button:hover,
  .button:hover {
    transform: none;
    color: #fff;
    border-color: #68d9fa;
    background: #142743;
  }
  .button.primary {
    background: #182b4c;
    color: #8deaff;
    border-color: #5aaad0;
  }
  button:disabled,
  .button:disabled {
    opacity: 0.46;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #a1edff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #142440;
  }
  input,
  textarea,
  select {
    color: #edf2ff;
    background: #080e20;
    border: 1px solid #3e5983;
    accent-color: #68d9fa;
  }
  input[type='range'] {
    min-height: 30px;
  }
  textarea,
  input[type='text'],
  input[type='search'] {
    line-height: 1.4;
  }
  option {
    background: #0b1228;
    color: #edf2ff;
  }
  kbd {
    background: #111f36;
    border: 1px solid #36537d;
    border-bottom-width: 2px;
    border-radius: 0;
    color: #a9c8ea;
  }
  .eyebrow,
  .micro-note,
  .game-shell .micro-note,
  .class-description,
  .game-shell .class-description,
  .reading-hint {
    color: #9db4d3;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: 0;
  }
  .game-shell .shell-bar {
    background: #080d1c;
    border-bottom: 2px solid #283a62;
  }
  .shell-bar button,
  .game-shell .shell-bar button {
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0;
  }
  #shell-menu {
    color: #74d9ff;
  }
  .shell-edition {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .game-shell .telemetry {
    height: auto;
    min-height: 70px;
    gap: 10px;
    color: #7bbfe8;
  }
  .game-shell .telemetry strong {
    font-family: var(--pixel-font);
    font-size: 26px;
    font-weight: 400;
    color: #f675bc;
  }
  .game-shell .telemetry small {
    font-size: 18px;
  }
  .game-shell .telemetry .stat-label,
  .game-shell .telemetry span,
  .game-shell .telemetry label,
  .game-shell .telemetry em {
    font-size: 15px;
  }
  /* Explicit rows avoid the inline value's extra line box clipping the target. */
  .game-shell .telemetry .coverage {
    display: grid;
    align-content: start;
  }
  .game-shell .telemetry .coverage > span,
  .game-shell .telemetry .coverage > strong,
  .game-shell .telemetry .coverage > em {
    margin-block: 0;
    line-height: 1.15;
  }
  .game-shell .telemetry .coverage > em {
    display: block;
  }
  .game-shell .arena-panel {
    max-width: min(
      100%,
      calc((100dvh - 285px - var(--safe-top) - var(--safe-bottom)) * var(--board-aspect, 1.333333))
    );
  }
  .game-shell .arena-shell {
    border-color: #466493;
    box-shadow: none;
    /* The fixed pause/briefing panel must share the page's stacking context. */
    isolation: auto;
  }
  .game-shell .game-overlay {
    position: fixed;
    inset: 52px 0 0;
    z-index: 40;
    padding: clamp(12px, 3vw, 32px);
    background: #040815e8;
  }
  .game-shell .overlay-card {
    width: min(680px, 100%);
    max-width: 680px;
    max-height: 100%;
    overflow: hidden;
    background: #080e20f5;
    border: 2px solid #4b6790;
    box-shadow: 4px 4px 0 #030713;
    border-radius: 0;
    padding: 18px;
  }
  .game-shell #overlay-reading {
    min-height: 0;
    overflow: auto;
  }
  .game-shell .overlay-card h1 {
    font-family: var(--pixel-font);
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 400;
    letter-spacing: 0;
  }
  .game-shell .overlay-card p {
    font-size: 19px;
  }
  .game-shell #overlay-copy {
    max-width: none;
    font-size: 19px;
    line-height: 1.35;
    margin: 12px 0;
  }
  .game-shell #overlay-difficulty {
    font-size: 17px;
    line-height: 1.3;
    margin: 8px 0;
  }
  .game-shell .overlay-card .overlay-footnote {
    font-size: 15px;
    line-height: 1.3;
    margin-top: 12px;
  }
  .game-shell .overlay-card .reading-toolbar {
    margin: 8px 0;
  }
  .game-shell .reading-hint {
    font-size: 15px;
    min-height: 1.3em;
  }
  .game-shell .reading-actions button {
    border-radius: 0;
  }
  .game-shell .reading-actions button {
    font-size: 18px;
  }
  .game-shell .overlay-footnote {
    font-size: 15px;
  }
  .game-shell .flight-status {
    font-size: 17px;
    color: #8ec4e5;
  }
  .game-shell .run-message {
    font-size: 17px;
    line-height: 1.25;
  }
  .game-shell .encounter-status {
    background: #0b1225;
    border: 1px solid #304a75;
    border-left: 3px solid #78cdeb;
    border-radius: 0;
    font-size: 17px;
    padding: 5px 9px;
    margin: 6px 12px;
    gap: 0;
  }
  .game-shell .encounter-status strong {
    color: #75d8ff;
    font-weight: 400;
  }
  .game-shell .play-controls .button {
    font-size: 19px;
    padding: 6px 10px;
  }
  .game-shell .play-controls kbd {
    font-size: 14px;
  }

  /* Game panels occupy the screen instead of floating like website cards. */
  .game-shell dialog:not(.shell-home) {
    font-family: var(--pixel-font);
    font-size: 20px;
    width: min(1120px, var(--dialog-viewport-width, 100vw));
    max-width: var(--dialog-viewport-width, 100vw);
    height: var(--dialog-viewport-height, 100dvh);
    max-height: var(--dialog-viewport-height, 100dvh);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px);
    border: 0;
    border-left: 2px solid #253e68;
    border-right: 2px solid #253e68;
    border-radius: 0;
    background: #080e20;
    color: #edf2ff;
    box-shadow: none;
  }
  dialog::backdrop {
    background: #020510f5;
  }
  .game-shell dialog h2 {
    color: #7cdfff;
  }
  .game-shell dialog h3 {
    color: #e7d6ff;
  }
  .game-shell .soundtrack-dialog h3 {
    font-size: 24px;
  }
  .game-shell .soundtrack-dialog .micro-note,
  .game-shell .soundtrack-field > span,
  .game-shell .field {
    font-size: 17px;
  }
  .game-shell .mission .name {
    font-size: 20px;
  }
  .game-shell .mission .number,
  .game-shell .mission .medal {
    font-size: 16px;
  }
  .content-switcher {
    background: #0c1930;
    border-color: #324d77;
  }
  .game-shell .deck-heading,
  .game-shell .section-line {
    font-size: 15px;
  }
  .game-shell .mission-brief,
  .game-shell #difficulty-note,
  .game-shell .difficulty-details,
  .game-shell .appearance-hint {
    font-size: 17px;
    line-height: 1.35;
  }
  .game-shell .content-select-status {
    min-height: 1.35em;
  }
  .game-shell .content-select-status[data-kind='error'] {
    color: #ff9bcb;
  }
  .game-shell dialog button,
  .game-shell dialog select,
  .game-shell dialog input,
  .game-shell dialog textarea {
    font-size: 20px;
    border-radius: 0;
  }
  .game-shell .soundtrack-dialog section,
  .game-shell .profile-section,
  .game-shell .library-section {
    border-radius: 0;
    background: #0c1630;
    border-color: #2b436d;
  }
  .game-shell .mission,
  .game-shell .mission-card,
  .game-shell .gallery-card,
  .game-shell .achievement-card,
  .game-shell .controller-settings {
    border-radius: 0;
    border-color: #314974;
    background: #0b1730;
    box-shadow: none;
  }
  .game-shell .mission[aria-current],
  .game-shell .mission.selected {
    border-color: #72deff;
  }

  /* One arcade menu column; selection is a row, with a persistent pixel cursor. */
  .game-shell .shell-home {
    background: #070b18;
  }
  .shell-home[open] {
    grid-template-columns: minmax(250px, 520px) 1fr;
  }
  #shell-title {
    font-family: var(--pixel-font);
    font-size: clamp(56px, 8vw, 104px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.9;
    text-shadow: 4px 4px #1d365d;
    margin: 18px 0;
  }
  #shell-title span {
    color: #70d9fc;
  }
  .home-content .eyebrow {
    color: #b191cc;
    font-size: 17px;
    letter-spacing: 1px;
  }
  .home-copy {
    color: #9bb7d5;
    font-size: 21px;
    line-height: 1.25;
  }
  .landing-version {
    margin: -8px 0 12px;
    color: #526985;
    font-size: 10px;
    letter-spacing: 0.8px;
    opacity: 0.62;
    text-transform: uppercase;
  }
  .home-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 24px;
    max-width: 500px;
  }
  .home-actions .button,
  .home-actions #shell-play,
  .home-actions #shell-featured {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid transparent;
    background: transparent;
    color: #c8daed;
    font-size: 23px;
  }
  .home-actions .button::before {
    content: '';
    width: 8px;
    height: 12px;
    flex: 0 0 8px;
    background: #5d789d;
    clip-path: polygon(0 0, 4px 0, 4px 4px, 8px 4px, 8px 8px, 4px 8px, 4px 12px, 0 12px);
  }
  .home-actions .button:hover,
  .home-actions .button:focus-visible {
    color: #a0efff;
    background: #132540;
    border-color: #42628c;
    outline: none;
    box-shadow: inset 3px 0 #83e3ff;
  }
  .home-actions .button:focus-visible::before {
    background: #fa87c5;
  }
  .home-hint,
  .shell-tools {
    font-size: 16px;
  }
  .home-art {
    background: #070b18;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 31px, #152644 31px 32px),
      repeating-linear-gradient(90deg, transparent 0 31px, #152644 31px 32px);
    mask-image: linear-gradient(90deg, transparent, black 30%);
  }
  .home-art::before {
    inset: 18% 12% 22% 24%;
    transform: none;
    mask-image: none;
    border: 2px solid #243d68;
    background: #0b1931;
    box-shadow:
      -32px 64px #0e1e38,
      32px -32px #0b1226;
  }
  .home-flight-path {
    transform: none;
    width: 42%;
    height: 29%;
    right: 14%;
    top: 33%;
    border: 3px solid #559ac6;
    border-top-color: #f17aba;
    border-right-color: #f17aba;
    box-shadow: 0 4px #182d4b;
  }
  .home-craft {
    transform: none;
    top: 30%;
    right: 11%;
    color: #89e7ff;
    text-shadow: 3px 3px #32577c;
    font-size: 64px;
  }
  @media (max-width: 680px) {
    body {
      font-size: 18px;
    }
    .game-shell .flight-status {
      height: auto;
      min-height: 31px;
      flex-wrap: wrap;
      gap: 4px 12px;
      padding-block: 5px;
      line-height: 1.2;
    }
    .game-shell .flight-status > #objective-state {
      max-width: 100%;
      text-align: left;
    }
    .shell-home[open] {
      grid-template-columns: 1fr;
    }
    .game-shell .shell-home {
      padding: 24px;
    }
    #shell-title {
      font-size: 64px;
    }
    .home-actions .button,
    .home-actions #shell-play,
    .home-actions #shell-featured {
      font-size: 21px;
      min-height: 44px;
    }
    .home-art {
      opacity: 0.2;
    }
    .game-shell dialog:not(.shell-home) {
      padding: 18px 14px;
      border: 0;
    }
    .game-shell .shell-bar button {
      font-size: 17px;
      padding: 4px 7px;
    }
    .game-shell .overlay-card p {
      font-size: 18px;
    }
    .game-shell .telemetry strong {
      font-size: 24px;
    }
    .game-shell .arena-panel {
      max-width: 100%;
    }
  }
  @media (min-width: 681px) and (min-height: 501px) {
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) {
      max-width: min(
        100%,
        calc(
          (100dvh - 340px - var(--safe-top) - var(--safe-bottom)) * var(--board-aspect, 1.333333)
        )
      );
    }
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) > .arena-shell {
      max-width: 100%;
    }
  }
  @media (max-height: 820px) and (min-width: 681px) {
    .game-shell .shell-home {
      padding: 18px 32px;
    }
    #shell-title {
      font-size: 52px;
      margin: 6px 0;
    }
    .home-copy {
      display: none;
    }
    .home-actions {
      margin-top: 12px;
    }
    .home-actions .button,
    .home-actions #shell-play,
    .home-actions #shell-featured {
      font-size: 20px;
      min-height: 38px;
      padding: 3px 10px;
    }
    .home-hint {
      margin-top: 8px;
    }
    .shell-tools {
      margin-top: 12px;
    }
  }

  @media (min-width: 681px) and (max-height: 500px) {
    .game-shell .arena-panel,
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) {
      max-width: 100%;
    }
    .game-shell .arena-panel > .arena-shell,
    .game-shell .arena-panel:has(> .encounter-status:not([hidden])) > .arena-shell {
      max-width: min(100%, calc((100dvh - 180px) * var(--board-aspect, 1.333333)));
    }
    .game-shell .encounter-status {
      margin: 4px 8px;
      padding: 3px 6px;
      font-size: 14px;
      line-height: 1.25;
    }
    .game-shell .overlay-card {
      padding: 14px;
    }
    .game-shell .overlay-actions .button {
      font-size: 18px;
    }
    .game-shell .home-hint {
      display: none;
    }
  }

  @media (max-width: 680px) and (max-height: 740px) {
    .game-shell .flight-status {
      display: none;
    }
  }
  @media (max-width: 680px) and (max-height: 620px) {
    .game-shell .play-controls {
      gap: 4px;
      padding-top: 6px;
    }
    .game-shell .encounter-status {
      margin-block: 4px;
    }
  }
  @media (max-width: 360px), (max-width: 680px) and (max-height: 740px) {
    .game-shell .encounter-status {
      font-size: 15px;
      line-height: 1.2;
      padding: 4px 7px;
    }
    .game-shell .run-message {
      font-size: 15px;
    }
    .game-shell .ability-buttons .button {
      font-size: 16px;
    }
    .game-shell .ability-buttons kbd {
      display: none;
    }
  }

  input[type='range'] {
    appearance: none;
    background: transparent;
  }
  input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    background: #263f64;
    border: 1px solid #4b6e93;
  }
  input[type='range']::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 18px;
    margin-top: -7px;
    border: 2px solid #a5eaff;
    border-radius: 0;
    background: #497da6;
  }
  input[type='range']::-moz-range-track {
    height: 6px;
    background: #263f64;
    border: 1px solid #4b6e93;
  }
  input[type='range']::-moz-range-thumb {
    width: 12px;
    height: 16px;
    border: 2px solid #a5eaff;
    border-radius: 0;
    background: #497da6;
  }

  .game-shell .shell-dialog-heading {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-block: 10px;
    background: #080e20;
  }

  /* Keep a clear pixel face for prose and use ordinary symbol glyphs for controls. */
  .game-shell .direction-controls button,
  .game-shell .utility-buttons .icon-button {
    font-family: var(--fk-font-ui, sans-serif);
    font-weight: 700;
  }
  .game-shell .overlay-actions .button {
    min-height: 48px;
  }
  .game-shell .encounter-status[data-kind='classic'][data-phase='open'] {
    display: none;
  }
  .game-shell .encounter-status[data-kind='classic'][data-phase='warning'] {
    border-left-color: #ffa45b;
  }
  @media (hover: hover) and (pointer: fine) and (min-width: 681px) {
    .game-shell:not([data-input-mode='touch']) .direction-controls {
      display: none;
    }
  }
  .game-shell[data-input-mode='controller'] .play-controls kbd {
    display: none;
  }

  /* Static threat explanations belong in the briefing; live warnings keep their space. */
  @media (min-width: 681px) and (min-height: 501px) {
    .game-shell .arena-panel:has(> .encounter-status[data-kind='classic'][data-phase='open']) {
      max-width: min(
        100%,
        calc(
          (100dvh - 275px - var(--safe-top) - var(--safe-bottom)) * var(--board-aspect, 1.333333)
        )
      );
    }
  }
  .game-shell:is([data-flight-state='running'], [data-flight-layout='preparing']) .shell-edition {
    visibility: hidden;
  }
  .game-shell:is([data-flight-state='running'], [data-flight-layout='preparing']) .run-message {
    min-height: 1.5em;
  }

  /* Pixel labels must not inherit the old 11px emergency layout. */
  .game-shell .game-overlay .overlay-actions .button {
    font-size: 18px;
    line-height: 1.25;
  }
  @media (max-width: 680px) {
    .game-shell .game-overlay .overlay-actions .button {
      font-size: 16px;
      padding: 8px 10px;
      min-height: 44px;
    }
  }
  body.game-shell:not(.first-flight-session) {
    height: 100dvh;
    overflow: hidden;
  }
  .game-shell[data-flight-state='result'] .appearance-unlock,
  .game-shell[data-flight-state='picture'] .appearance-unlock {
    display: none;
  }

  /* Pause becomes a private, controller-first command screen. The opaque field
   deliberately conceals the live board and HUD instead of preserving tactical
   information through blur or translucency. */
  .game-shell .game-overlay[data-kind='pause'] {
    position: fixed;
    inset: 52px 0 0;
    display: flex;
    /* Keep oversized commands reachable from both ends of the scrollport. */
    align-items: safe center;
    justify-content: center;
    padding: max(12px, var(--safe-top, 0px)) max(12px, var(--safe-right, 0px))
      max(12px, var(--safe-bottom, 0px)) max(12px, var(--safe-left, 0px));
    overflow-y: auto;
    scroll-padding-block: 12px;
    background-color: #02040a;
    background-image:
      linear-gradient(#08101ce6 1px, transparent 1px),
      linear-gradient(90deg, #08101ce6 1px, transparent 1px),
      radial-gradient(circle at 50% 42%, #10223c 0, #050913 34%, #02040a 72%);
    background-size:
      32px 32px,
      32px 32px,
      auto;
    pointer-events: auto;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(700px, 100%);
    max-width: 700px;
    /* Undo the generic short-screen reader's height: 100%. Pause actions must
     contribute their full intrinsic height, including wrapped Large labels. */
    height: auto;
    max-height: 100%;
    flex-shrink: 0;
    padding: clamp(12px, 2.4vw, 20px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
    background: #050a14f2;
    border-color: #263b5b;
    box-shadow:
      0 0 0 1px #02040a,
      0 20px 60px #000c;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-label {
    margin: 0;
    color: #f3c84b;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    height: max-content;
    margin: 0;
    width: 100%;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-menu-section {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 4px;
    height: max-content;
    min-width: 0;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-menu-section > h3 {
    margin: 0;
    color: #8ba9c8;
    font: 700 12px/1.2 var(--font-interface, sans-serif);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
    min-width: 0;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-secondary-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions :is(.button, summary) {
    position: relative;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 16px;
    text-align: left;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions summary {
    border: 2px solid var(--fk-accent, #65e6da);
    color: inherit;
    cursor: pointer;
    list-style: none;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions summary::-webkit-details-marker {
    display: none;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions :is(.button, summary)::before {
    content: '◆';
    display: inline-block;
    width: 1.4em;
    color: #4f7197;
  }
  .game-shell
    .game-overlay[data-kind='pause']
    .overlay-actions
    :is(.button, summary):is(:hover, :focus-visible)::before,
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions .button.primary::before {
    color: #f675bc;
  }
  .game-shell .game-overlay[data-kind='pause'] .overlay-actions summary:focus-visible {
    outline: 3px solid #fff3b0;
    outline-offset: 2px;
  }
  .game-shell .game-overlay[data-kind='pause'] :is(#start-button, #overlay-menu) {
    width: 100%;
  }
  .game-shell .game-overlay[data-kind='pause'] #start-button {
    text-align: center;
  }
  .game-shell .game-overlay[data-kind='pause'] .pause-mission-info > div .button {
    background: #101a31;
  }
  /* Short confirmations opt in; full-screen game panels retain their own layout. */
  .game-shell dialog.restart-dialog {
    inset: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
    width: min(460px, calc(100vw - var(--safe-left, 0px) - var(--safe-right, 0px) - 32px));
    height: fit-content;
    max-width: 460px;
    max-height: calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 32px);
    margin: auto;
    padding: clamp(24px, 5vw, 40px);
    border: 2px solid #466493;
    box-shadow: 0 24px 80px #000e;
    overflow: auto;
  }
  .game-shell dialog.restart-dialog .overlay-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  .game-shell dialog.restart-dialog .overlay-actions .button {
    width: 100%;
    min-height: 50px;
  }
  .game-shell .home-status {
    max-width: 52ch;
    color: #9edcf2;
    font-size: 17px;
    line-height: 1.35;
  }
  .game-shell .home-status[data-kind='error'] {
    color: #ffcc83;
  }

  /* Enlarge interface text without scaling the simulation or its collision geometry. */
  .game-shell[data-text-size='large'] {
    font-size: 23px;
  }
  .game-shell[data-text-size='large'] dialog,
  .game-shell[data-text-size='large'] dialog :is(button, select, input, textarea, label, summary),
  .game-shell[data-text-size='large'] .shell-bar button,
  .game-shell[data-text-size='large'] .mission .name,
  .game-shell[data-text-size='large'] .game-overlay .overlay-actions .button {
    font-size: 22px;
  }
  .game-shell[data-text-size='large'] .game-overlay[data-kind='pause'] .pause-action-grid,
  .game-shell[data-text-size='large'] .game-overlay[data-kind='pause'] .pause-mission-info > div {
    grid-template-columns: 1fr;
  }
  .game-shell[data-text-size='large'] .game-overlay[data-kind='pause'] .pause-secondary-groups {
    grid-template-columns: 1fr;
  }
  .game-shell[data-text-size='large'] .game-overlay[data-kind='pause'] .pause-mission-info > div {
    inset-inline-start: 0;
    width: 100%;
  }
  .game-shell[data-text-size='large']
    :is(
      .micro-note,
      .field,
      .reading-hint,
      .overlay-footnote,
      .mission-brief,
      .difficulty-details,
      .appearance-hint,
      .home-status,
      .enemy-guide-copy,
      .class-description,
      .soundtrack-field > span
    ),
  .game-shell[data-text-size='large'] #difficulty-note,
  .game-shell[data-text-size='large'] .enemy-guide-dialog p,
  .game-shell[data-text-size='large'] #overlay-copy,
  .game-shell[data-text-size='large'] #overlay-difficulty {
    font-size: 21px;
    line-height: 1.4;
  }
  .game-shell[data-text-size='large']
    :is(
      .play-controls .button,
      .flight-status,
      .run-message,
      .encounter-status,
      .deck-heading,
      .section-line
    ) {
    font-size: 20px;
  }
  .game-shell[data-text-size='large'] .telemetry strong {
    font-size: 30px;
  }
  .game-shell[data-text-size='large'] .telemetry :is(.stat-label, span, label, em) {
    font-size: 17px;
  }
  .game-shell[data-text-size='large'] .game-overlay[data-kind='pause'] :is(.pause-label, .button) {
    font-size: 20px;
  }
  @media (max-width: 680px) {
    .game-shell[data-text-size='large'] .shell-bar button {
      font-size: 18px;
    }
    .game-shell[data-text-size='large'] .telemetry strong {
      font-size: 26px;
    }
    .game-shell[data-text-size='large'] .telemetry :is(.stat-label, span, label, em) {
      font-size: 16px;
    }
  }

  /* Small screens keep the same private pause surface and yield flight controls. */
  @media (max-width: 680px) {
    .game-shell .shell-bar {
      gap: 0;
    }
    .game-shell .shell-bar button {
      padding-inline: 6px;
    }
    .game-shell[data-flight-state='paused'] .play-controls {
      display: none;
    }
    .game-shell .game-overlay[data-kind='pause'] {
      inset: 48px 0 0;
      padding: 16px;
    }
  }
}