/* V26 responsive pass. Loaded last so phone layouts are based on usable height,
   not width alone. Desktop presentation remains owned by the component files. */

/* Browsers focus a modal dialog when it opens. Keep focus rings on its controls,
   but do not draw a native white rectangle over the illustrated housing. */
dialog:focus,
dialog:focus-visible {
  outline: 0;
}

#dialog-content {
  overflow-anchor: none;
}

@media (max-width: 600px) and (orientation: portrait) {
  dialog.terminal-dialog,
  dialog.armory-dialog {
    --housing: 10px;
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
  }

  .terminal-dialog #dialog-content,
  .armory-dialog #dialog-content {
    max-height: calc(100dvh - 8px - 2 * var(--housing));
  }

  .terminal-dialog .dialog-body {
    padding: 18px 16px;
  }

  .terminal-dialog h1 {
    font-size: clamp(32px, 10.4vw, 42px);
  }

  .terminal-dialog .intro {
    font-size: 14px;
    line-height: 1.55;
  }

  .terminal-dialog .menu-actions #rankings-button {
    grid-column: 1 / -1;
  }

  .terminal-dialog .controls-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terminal-dialog .controls-guide > :last-child {
    grid-column: 1 / -1;
  }

  .armory-dialog .armory-console {
    padding-inline: 5px;
  }
}

/* Short phone landscape: every modal remains fully operable inside the visual
   viewport, including when the browser address bar is still present. */
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
  dialog.terminal-dialog,
  dialog.armory-dialog {
    --housing: 12px;
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
  }

  .terminal-dialog #dialog-content,
  .armory-dialog #dialog-content {
    max-height: calc(100dvh - 8px - 2 * var(--housing));
    overscroll-behavior: contain;
  }

  .terminal-dialog .dialog-body {
    padding: 12px 16px;
  }

  .terminal-dialog .eyebrow {
    margin-bottom: 5px;
    font-size: 8px;
    line-height: 1.35;
  }

  .terminal-dialog h1,
  .terminal-dialog h2 {
    margin-bottom: 7px;
    font-size: 24px;
    line-height: 1.08;
  }

  .terminal-dialog .intro {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .terminal-dialog .menu-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
  }

  .terminal-dialog .menu-actions > :is(.primary-button, .secondary-button) {
    min-width: 0;
    min-height: 44px;
    padding: 5px 8px;
    font-size: 9px;
  }

  .terminal-dialog .controls-guide {
    display: none;
  }

  .terminal-dialog .menu-bottom {
    margin-top: 9px;
    padding-top: 8px;
    font-size: 8px;
  }

  .terminal-dialog .mobile-shell-note,
  .terminal-dialog .build-summary,
  .terminal-dialog .dialog-footnote {
    margin-block: 7px;
    padding-block: 6px;
    font-size: 9px;
    line-height: 1.4;
  }

  .terminal-dialog .settings {
    margin: 9px 0;
    padding-inline: 10px;
  }

  .terminal-dialog .settings label {
    min-height: 44px;
    padding: 7px 0;
    font-size: 11px;
  }

  .terminal-dialog .result-grid {
    margin: 10px 0;
  }

  .terminal-dialog .rankings {
    margin: 9px 0;
  }

  /* Reward choices: compress the explanation, not the selectable controls. */
  .terminal-choice .dialog-body {
    padding: 9px 12px;
  }

  .terminal-choice .intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1.3;
  }

  .terminal-choice .run-limits {
    gap: 5px 12px;
    padding-top: 6px;
    font-size: 9px;
  }

  .terminal-choice .specialization-grid {
    gap: 7px;
    margin: 7px 0;
  }

  .terminal-choice .specialization-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 2px 6px;
    height: 176px;
    min-height: 0;
    padding: 8px;
    border-width: 6px;
    border-image-width: 6px;
  }

  .terminal-choice .specialization-card .tag {
    grid-column: 1;
    min-height: 0;
    padding-right: 2px;
    font-size: 7px;
    line-height: 1.25;
  }

  .terminal-choice .choice-available {
    top: 6px;
    right: 6px;
    padding: 2px 5px;
    font-size: 7px;
  }

  .terminal-choice .choice-art {
    --art-height: 50px;
    grid-column: 2;
    grid-row: 2 / 4;
    height: 50px;
    align-self: start;
  }

  .terminal-choice .choice-art .equipment-art {
    --art-height: 50px;
  }

  .terminal-choice .specialization-card h3 {
    grid-column: 1;
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.15;
  }

  .terminal-choice .specialization-card p {
    display: -webkit-box;
    grid-column: 1 / -1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 3px 0 5px;
    font-size: 9px;
    line-height: 1.3;
  }

  .terminal-choice .choose-label {
    grid-column: 1 / -1;
    padding-top: 5px;
    font-size: 8px;
  }

  /* Arsenal and weapon paths use a four-column console in short landscape.
     The content region still scrolls for long research paths. */
  dialog.armory-dialog {
    --art-height: 48px;
  }

  .armory-dialog .armory-console {
    padding: 4px 5px 0;
  }

  .armory-console .shop-header {
    margin-bottom: 5px;
  }

  .armory-console .shop-header h2 {
    font-size: 21px;
  }

  .armory-console .wallet {
    font-size: 22px;
  }

  .armory-console .eyebrow,
  .armory-console .wallet small {
    font-size: 7px;
  }

  .armory-manifest {
    gap: 4px;
    margin-bottom: 5px;
  }

  .armory-manifest .run-limits {
    flex-basis: auto;
    gap: 4px 9px;
    padding: 4px 6px;
    font-size: 8px;
  }

  .armory-manifest .loadout-chip {
    padding: 3px 5px;
    font-size: 8px;
  }

  .armory-console .arsenal-nav {
    gap: 4px;
    margin-bottom: 5px;
    padding-bottom: 4px;
  }

  .armory-console .arsenal-nav button {
    min-height: 44px;
    padding: 2px 5px;
    border-width: 6px;
    border-image-width: 6px;
    font-size: 8px;
  }

  .armory-console .arsenal-nav small {
    font-size: 7px;
  }

  .armory-console .arsenal-nav .menu-art {
    width: 30px;
    height: 25px;
    --art-height: 25px;
  }

  .armory-console .arsenal-tiles {
    gap: 4px;
    padding: 3px;
  }

  .armory-console .installation-tiles > .arsenal-tile,
  .armory-console .installation-tiles > .arsenal-tile:nth-child(n + 5) {
    grid-column: span 3;
  }

  .armory-console .support-tiles > .arsenal-tile {
    grid-column: span 4;
  }

  .armory-console .arsenal-tile {
    border-width: 6px;
    border-image-width: 6px;
  }

  .armory-console .tile-buy {
    padding: 3px 5px;
  }

  .armory-console .tile-buy > strong {
    font-size: 11px;
  }

  .armory-console .tile-buy .tile-summary {
    margin: 2px 0 5px;
    font-size: 8px;
  }

  .armory-console .tile-bottom {
    min-height: 22px;
    padding-top: 4px;
  }

  .armory-console .tile-bottom > b {
    font-size: 10px;
  }

  .armory-console .arsenal-hint {
    margin: 5px 0;
    font-size: 8px;
  }

  .armory-dialog .armory-console .shop-footer {
    gap: 8px;
    margin-top: 5px;
    padding: 5px 0;
  }

  .armory-console .shop-footer > .primary-button,
  .armory-console .compact-repair {
    min-height: 44px;
  }

  .armory-console .weapon-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .armory-console .weapon-path {
    padding: 8px;
  }

  .armory-console .weapon-path > p {
    min-height: 0;
    font-size: 9px;
  }

  .armory-console.armory-research h2 {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 1.08;
  }

  .armory-console.armory-research > .intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0 0 6px;
    max-width: none;
    font-size: 9px;
    line-height: 1.35;
  }

  .armory-console.armory-research > .run-limits {
    gap: 5px 14px;
    margin: 0 0 6px;
    font-size: 8px;
  }

  .armory-console.armory-research .weapon-heading {
    font-size: 10px;
  }

  .armory-console.armory-research .weapon-identity .menu-art {
    width: 48px;
    height: 34px;
    --art-height: 34px;
  }

  .armory-console.armory-research .weapon-path ol {
    margin: 7px 0;
  }

  .armory-console.armory-research .weapon-path li {
    padding: 5px 0;
  }

  .armory-console.armory-research .weapon-path li strong {
    font-size: 9px;
  }

  .armory-console.armory-research .weapon-path li small {
    font-size: 8px;
    line-height: 1.3;
  }

  /* Live combat HUD: reserve enough width for values and preserve 44px touch
     targets. Compact labels are supplied by game.js; titles stay descriptive. */
  .game-shell {
    grid-template-rows: 46px minmax(0, 1fr) 72px;
  }

  .game-shell .topbar {
    grid-template-columns: minmax(112px, 1fr) 34% minmax(132px, 1fr);
    padding-inline: 6px;
    --header-control-height: 44px;
  }

  .game-shell .brand {
    gap: 4px;
    font-size: 9px;
    letter-spacing: .09em;
  }

  .game-shell .brand-icon {
    width: 14px;
    min-width: 14px;
    height: 18px;
  }

  .game-shell .mission-instruments {
    grid-template-columns: 43% 57%;
    height: 48px;
    padding: 5px 4px 8px;
  }

  .game-shell #run-mode,
  .game-shell .integrity {
    font-size: 6px;
  }

  .game-shell #run-clock,
  .game-shell .integrity strong {
    font-size: 14px;
  }

  .game-shell .integrity {
    gap: 4px;
    padding-left: 4px;
  }

  .game-shell .integrity meter {
    width: 26px;
    margin-top: 8px;
  }

  .game-shell .header-right {
    gap: 4px;
  }

  .game-shell .header-right > .arsenal-button {
    min-width: 78px;
    padding: 3px 6px;
  }

  .game-shell .arsenal-button strong {
    font-size: 8px;
  }

  .game-shell .arsenal-button small {
    font-size: 6px;
  }

  .game-shell .arsenal-button kbd {
    display: none;
  }

  .game-shell .controlbar {
    grid-template-columns: 27% minmax(0, 1fr) 29%;
    gap: 3px;
    padding: 4px;
  }

  .game-shell .heat-control {
    margin-top: -3px;
  }

  .game-shell .heat-label {
    font-size: 6px;
  }

  .game-shell #heat-number,
  .game-shell .dial-limit {
    font-size: 7px;
  }

  .game-shell .weapon-bay {
    grid-template-columns: minmax(0, 1fr) 36%;
    gap: 3px;
    padding: 4px 5px;
  }

  .game-shell .weapon-button {
    grid-template-columns: 43% minmax(0, 1fr);
    gap: 4px;
  }

  .game-shell #weapon-art {
    --portrait-height: 43px;
  }

  .game-shell #weapon-name {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
  }

  .game-shell #weapon-status {
    max-width: 100%;
    overflow: hidden;
    margin-top: 2px;
    padding: 2px 3px;
    font-size: 6px;
    text-overflow: ellipsis;
  }

  .game-shell .burst-button {
    justify-items: center;
    gap: 2px;
    padding: 4px;
    text-align: center;
  }

  .game-shell .burst-button strong {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 100%;
    font-size: 8px;
    line-height: 1.05;
    white-space: normal;
  }

  .game-shell .burst-button small {
    grid-row: 2;
    font-size: 6px;
    line-height: 1.1;
  }

  .game-shell .support-bay {
    gap: 3px;
    padding: 4px 5px;
  }

  .game-shell #pulse-art {
    width: 28%;
    flex-basis: 28%;
    --portrait-height: 39px;
  }

  .game-shell .pulse-button {
    gap: 4px;
  }

  .game-shell .pulse-button strong {
    font-size: 8px;
  }

  .game-shell .pulse-button small {
    margin-top: 2px;
    font-size: 7px;
  }

  .game-shell .sound-button {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }
}