/* Keep gameplay text readable at every viewport; smaller screens scroll
   the dialogue and command windows instead of shrinking their contents. */
:root {
  --game-copy: 22px;
  --game-control: 16px;
  --game-note: 14px;
}
body { font-size: 16px; }
button, input, select { font-size: var(--game-control); }

/* Setup, dispatch and handover use the same readable type scale. */
.nav-link, .sound-button, .hero-facts, .section-heading .muted,
.setup legend, .field-label, .check-label, .pool-info,
.setup select, .primary, .secondary, .hud-button, .text-button {
  font-size: var(--game-control);
}
.brand small, .nav-link span, .sound-button span, .eyebrow,
.hero-facts span, .setup legend small, .segmented small,
.start-note, .setup-footer, .setup-links .text-button, .status-pill,
.how-strip small, .lobby-footer p, .scene-caption small,
.dialog-heading p, .bank-card small, .bank-card p {
  font-size: var(--game-note);
  line-height: 1.7;
}
.hero-description { font-size: 18px; line-height: 1.8; }
.hero { height: auto; min-height: 440px; padding-bottom: 36px; }
.eyebrow span { font-size: 14px; }
.hero-facts b, .segmented>label>span { font-size: 18px; }
.how-strip b { font-size: 16px; }
.setup select, .primary, .secondary, .hud-button, .sound-button {
  min-height: 44px;
}
.setup-grid { grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 22px; }
.setup-column, .start-column { min-width: 0; }
.setup select { width: 100%; text-overflow: ellipsis; }
.setup-footer { gap: 18px; flex-wrap: wrap; }
.setup-links { flex-wrap: wrap; }
.scene-caption { font-size: 16px; }
.mission-dialog { padding: 0; }
.mission-stage { min-height: 0; max-height: 92dvh; }
.mission-character p, .mission-heading p, .dispatch-order dl,
.mission-check b, .mission-hint, .reassessment-note p,
.hospital-destination small, .handover-list small,
.mission-footer .primary, .mission-footer .hud-button {
  font-size: 16px;
  line-height: 1.8;
}
.mission-character small, .mission-check small, .dispatch-order dd small,
.reassessment-note small, .hospital-destination em, .mission-audio {
  font-size: 14px;
  line-height: 1.7;
}
.mission-paper .mission-heading h2 { font-size: 28px; }
.mission-paper .dispatch-order blockquote { font-size: 22px; }
.mission-footer .primary, .mission-footer .hud-button { min-height: 48px; }
.mission-paper .mission-check { height: auto; min-height: 84px; }
.small-dialog p, .dispatch p, .dispatch dl, .map-guide { font-size: 16px; line-height: 1.8; }
.shift-header, .journey-progress>span, .unit-stats b { font-size: 14px; }
.map-guide small, .unit-stats small { font-size: 14px; }
.audio-caption { font-size: 14px; max-width: min(560px, calc(100vw - 32px)); }
body.flat-mode #worldFallback {
  position: relative; top: auto; right: auto; margin: 12px 5%;
  max-width: none; padding: 10px 14px; font-size: 14px; line-height: 1.7;
}
.field-recap span, .debrief-timeline time { font-size: 14px; }
.handover-gaps, .debrief-timeline, .field-debrief details { font-size: 16px; }
.handover-gaps h3 { font-size: 18px; }

/* The station is a full scene; enlarge its labels as well as its dialogue. */
.station-header small, .station-header h1 span,
.station-dispatch small, .station-pocket>small { font-size: 14px; letter-spacing: 1px; }
.station-header h1 { font-size: 28px; }
.station-header button { font-size: 16px; min-height: 44px; }
.station-dispatch { width: 330px; top: 125px; }
.station-dispatch p { font-size: 16px; line-height: 1.8; color: #d9e2dc; }
.station-pocket { top: 130px; }
.station-pocket>span { font-size: 16px; }
.station-labels button { font-size: 16px; padding: 8px 12px; min-height: 38px; }
.station-hint { max-width: calc(100% - 32px); white-space: normal; text-align: center; }
.station-hint>span { display: block; font-size: 16px; line-height: 1.7; }
.station-hint button { font-size: 18px; line-height: 1.7; }
.station-hint button span, .station-help { font-size: 14px; }
.station-direction button { width: 44px; height: 44px; font-size: 18px; }
.station-conversation { width: min(1060px, calc(100% - 52px)); max-height: 60dvh; }
.rpg-copy>small, .field-dialogue .rpg-copy>small { font-size: 20px; flex-wrap: wrap; gap: 8px 13px; }
.rpg-copy>small>span, .field-dialogue .rpg-copy>small>span {
  font-size: 14px; letter-spacing: 0; color: #b2ccc6;
}
.rpg-copy>p, .field-dialogue .rpg-copy>p {
  font-size: var(--game-copy); line-height: 1.75; letter-spacing: .3px; margin: 12px 0 16px;
}
.rpg-replies button, .field-replies button, .action-confirm button,
.rpg-hold, .rpg-response-row button {
  font-size: var(--game-control); line-height: 1.7; min-height: 44px; padding: 9px 14px;
}
.rpg-replies em, .rpg-copy>small.hold-note, .field-replies button small,
.rpg-response-row button span, .rpg-scene-icon small {
  font-size: 14px;
}
.rpg-response-row { flex-wrap: wrap; }
.rpg-response-row button { padding: 6px 0; }
.rpg-replies button>span { min-width: 0; }
.rpg-replies b { flex-shrink: 0; }

/* Reserve room for larger dialogue and controls instead of overlapping them. */
.rpg-field {
  --dialogue-space: 280px;
  --command-width: 420px;
  --edge: 25px;
  grid-template-rows: 68px minmax(0, 1fr);
}
.rpg-field .theatre-header { height: 68px; box-sizing: border-box; }
.theatre-location small, .theatre-level { font-size: 14px; }
.theatre-location h2 { font-size: 18px; }
.theatre-header>button { width: 44px; height: 44px; flex-shrink: 0; font-size: 18px; }
.rpg-field .theatre-backdrop { width: 100%; left: 0; right: auto; }
.rpg-field .theatre-scene-label p { font-size: 18px; }
.rpg-field .theatre-scene-label small { font-size: 14px; letter-spacing: 1px; }
.rpg-field .theatre-cast { top: 115px; width: 340px; }
.rpg-field .theatre-cast b { font-size: 16px; white-space: normal; overflow: visible; max-width: none; }
.rpg-field .theatre-cast button { min-height: 44px; padding: 8px 4px; }
.rpg-field .theatre-nameplate { bottom: calc(var(--dialogue-space) + 55px); max-width: 340px; }
.rpg-field .theatre-nameplate>span, .rpg-field .theatre-nameplate p { font-size: 16px; line-height: 1.7; }
.rpg-field .theatre-nameplate h3 { font-size: 30px; }
.rpg-field .theatre-art-credit { bottom: calc(var(--dialogue-space) + 30px); font-size: 12px; }
.rpg-field .theatre-portrait { bottom: calc(var(--dialogue-space) - 20px); }
.rpg-field .theatre-vitals, .rpg-field .theatre-jobs, .rpg-field .theatre-alerts,
.rpg-field .theatre-tabs, .rpg-field .theatre-controls, .rpg-field .theatre-footer {
  right: var(--edge); width: var(--command-width);
}
.rpg-field .theatre-vitals { top: 20px; height: 80px; padding: 12px 16px; gap: 12px; }
.theatre-readings>div { flex-direction: column; min-width: 0; }
.rpg-field .theatre-readings small, .theatre-readings span { font-size: 14px; }
.rpg-field .theatre-readings b { font-size: 26px; }
.rpg-field .theatre-vitals .bp b { font-size: 22px; line-height: normal; }
.rpg-field .theatre-readings b.reading-text { font-size: 16px; white-space: normal; }
.theatre-vitals>button { font-size: 18px; min-height: 44px; }
.rpg-field .theatre-jobs { top: 108px; height: auto; min-height: 48px; }
.rpg-field .theatre-job { flex-wrap: wrap; padding: 8px 10px; gap: 3px 8px; }
.rpg-field .theatre-job>span, .rpg-field .theatre-job>b, .rpg-field .theatre-job>em {
  font-size: 14px; white-space: normal; overflow: visible; line-height: 1.5;
}
.rpg-field .theatre-job>b { flex: 1; min-width: 75px; }
.rpg-field .theatre-alerts { top: 190px; }
.rpg-field .theatre-alert, .rpg-field .theatre-device-alert { font-size: 16px; line-height: 1.6; padding: 10px 12px; }
.rpg-field .theatre-alert b { font-size: 14px; white-space: nowrap; }
.rpg-field .theatre-tabs { bottom: calc(var(--dialogue-space) + 84px); height: 48px; }
.rpg-field .theatre-tabs button { font-size: 16px; }
.rpg-field .theatre-footer { bottom: calc(var(--dialogue-space) + 28px); height: auto; min-height: 56px; }
.rpg-field .theatre-footer>span { font-size: 14px; }
.rpg-field .theatre-footer>button { font-size: 16px; min-height: 44px; min-width: 140px; }
.rpg-field .theatre-controls {
  top: 20px; bottom: calc(var(--dialogue-space) + 28px); min-height: 0;
  padding: 18px; overscroll-behavior: contain;
}
.rpg-menu-heading { font-size: 18px; }
.rpg-menu-heading button { width: 44px; height: 44px; font-size: 28px; }
.rpg-field .theatre-action { min-height: 72px; padding: 12px 14px; }
.theatre-action b, .rpg-field .theatre-choices>button:not(.theatre-action),
.theatre-actor-select button, .talk-heading, .theatre-aside,
.procedure-title>b, .theatre-notebook p, .theatre-other b, .theatre-empty {
  font-size: 16px; line-height: 1.7;
}
.theatre-action small, .theatre-choices>button>span, .talk-heading small,
.procedure-title>span, .procedure-title>small, .theatre-notebook time,
.theatre-procedure>p, .monitor-state, .monitor-state span,
.theatre-other p, .theatre-event>small, .theatre-event>p {
  font-size: 14px; line-height: 1.7;
}
.theatre-actor-select button { min-height: 44px; }
.talk-heading, .monitor-state { flex-wrap: wrap; }
.rpg-field .theatre-procedure>button { font-size: 16px; min-height: 56px; padding: 12px; }
.rpg-field .theatre-procedure>button>b, .rpg-device>small { font-size: 14px; }
.theatre-event blockquote { font-size: 20px; line-height: 1.8; }
.theatre-notebook h3, .theatre-event h3 { font-size: 22px; }
.field-dialogue {
  left: var(--edge); right: var(--edge); bottom: 18px;
  max-height: var(--dialogue-space); padding: 20px 25px;
}
.field-dialogue .rpg-copy { overscroll-behavior: contain; }
.field-replies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-confirm { grid-template-columns: 2fr 1fr; }

@media (max-width: 1100px) {
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .rpg-field { --command-width: 360px; --edge: 18px; }
  .rpg-field .theatre-cast { width: 280px; }
  .rpg-field .theatre-scene-label p { max-width: 300px; }
  .theatre-location { display: block; }
  .theatre-brand { font-size: 16px; padding-right: 12px; }
}
@media (max-width: 780px) and (min-height: 521px) {
  .mission-stage { grid-template-columns: 1fr; grid-template-rows: 180px minmax(0, 1fr); }
  .mission-character>div:last-child { bottom: 15px; right: 125px; }
  .mission-character .cast-portrait { width: 125px; }
  .mission-character h3 { font-size: 24px; }
  .mission-character p { font-size: 14px; margin: 5px 0; }
}
@media (max-width: 700px) {
  :root { --game-copy: 20px; }
  .site-header { gap: 12px; flex-wrap: wrap; height: auto; min-height: 85px; padding-block: 16px; }
  .site-header nav { gap: 12px; flex-wrap: wrap; }
  .brand small { font-size: 12px; }
  .hero { height: auto; min-height: 360px; padding-bottom: 80px; }
  .hero-description { font-size: 17px; }
  .hero-facts { gap: 12px; flex-wrap: wrap; }
  .hero-facts span { font-size: 14px; }
  .scene-caption { font-size: 14px; max-width: calc(100% - 32px); }
  .setup-grid { grid-template-columns: 1fr; gap: 24px; }
  .section-heading>div { flex-wrap: wrap; gap: 10px; }
  .section-heading .muted { width: 100%; }
  .section-heading .status-pill { display: none; }
  .setup select { min-height: 48px; }
  .how-strip { flex-wrap: wrap; gap: 18px; }
  .how-strip>div { flex: 1 1 40%; }
  .how-strip>i { display: none; }
  .station-header { padding: 14px 16px; align-items: flex-start; }
  .station-header small { font-size: 12px; }
  .station-header h1 { font-size: 22px; letter-spacing: 1px; }
  .station-header button { margin-left: 3px; padding: 7px; }
  .station-dispatch { top: 110px; width: 49%; right: 12px; padding: 10px; }
  .station-dispatch small { font-size: 12px; }
  .station-dispatch p { font-size: 14px; line-height: 1.7; }
  .station-pocket { top: 115px; left: 12px; gap: 6px; }
  .station-pocket>small, .station-pocket>span { font-size: 14px; }
  .station-pocket>span { padding: 7px; }
  .station-labels button { font-size: 14px; padding: 6px; }
  .station-labels [data-station-go="locker"] { margin: -36px 0 0 25px; }
  .station-labels [data-station-go="bag"] { margin-top: -10px; }
  .station-labels [data-station-go="monitor"] { margin: 14px 0 0 24px; }
  .station-labels [data-station-go="partner"] { margin: 40px 0 0 50px; }
  .station-labels [data-station-go="ambulance"] { margin-top: 65px; }
  .station-labels [data-station-go="desk"] { margin: 18px 0 0 -10px; }
  .station-help { font-size: 14px; left: 12px; bottom: 16px; gap: 6px; }
  .station-help span { max-width: calc(100vw - 175px); }
  .station-hint { bottom: 135px; width: max-content; }
  .station-hint>span { font-size: 16px; }
  .station-hint button { font-size: 16px; }
  .station-conversation { width: calc(100% - 24px); max-height: 64dvh; padding: 18px; }
  .rpg-face { width: 60px; min-width: 60px; height: 80px; }
  .station-conversation, .field-dialogue { display: block; }
  .station-conversation .rpg-face, .field-dialogue .rpg-face {
    float: left; width: 48px; min-width: 48px; height: 64px; margin: 0 12px 8px 0;
  }
  .station-conversation .rpg-copy>small, .field-dialogue .rpg-copy>small {
    min-height: 64px; display: flex; align-content: center; gap: 5px; font-size: 18px;
  }
  .station-conversation .rpg-copy>p, .field-dialogue .rpg-copy>p { clear: both; }
  .rpg-copy>small>span, .field-dialogue .rpg-copy>small>span { border: 0; padding: 0; width: 100%; font-size: 14px; }
  .field-dialogue { overflow: auto; overscroll-behavior: contain; padding: 16px; }
  .field-dialogue .rpg-copy { overflow: visible; }
  .rpg-field { --dialogue-space: min(300px, 39dvh); --edge: 12px; grid-template-rows: 64px minmax(0, 1fr); }
  .rpg-field .theatre-header { height: 64px; gap: 8px; }
  .theatre-brand, .theatre-level { display: none; }
  .theatre-location { flex: 1; min-width: 0; }
  .theatre-location h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .theatre-clock b { font-size: 20px; }
  .rpg-field .theatre-vitals, .rpg-field .theatre-jobs, .rpg-field .theatre-tabs,
  .rpg-field .theatre-footer, .rpg-field .theatre-controls {
    width: auto; left: var(--edge); right: var(--edge);
  }
  .rpg-field .theatre-vitals { top: 10px; height: 78px; padding: 10px 12px; gap: 8px; }
  .rpg-field .theatre-readings b { font-size: 24px; }
  .rpg-field .theatre-vitals .bp b { font-size: 20px; }
  .rpg-field .theatre-jobs { top: 94px; min-height: 66px; }
  .rpg-field .theatre-job { padding: 7px; }
  .rpg-field .theatre-job>b {
    order: 1; flex-basis: 100%; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rpg-field .theatre-alerts { top: 228px; right: 12px; width: calc(100% - 24px); z-index: 4; }
  .rpg-field .theatre-alert, .rpg-field .theatre-device-alert { font-size: 14px; padding: 8px 10px; }
  .rpg-field .theatre-scene-label { display: none; }
  .rpg-field .theatre-cast { top: 172px; left: 12px; right: 12px; width: auto; gap: 5px; }
  .rpg-field .theatre-cast button { flex-direction: row; justify-content: center; padding: 6px 3px; gap: 4px; }
  .rpg-field .theatre-cast .cast-avatar, .rpg-field .theatre-cast .patient-avatar { display: none; }
  .rpg-field .theatre-cast b { font-size: 16px; }
  .rpg-field .theatre-nameplate { display: none; }
  .rpg-field .theatre-portrait { left: 42%; right: auto; transform: translateX(-50%); }
  .rpg-field .theatre-tabs { bottom: calc(var(--dialogue-space) + 74px); }
  .rpg-field .theatre-footer { bottom: calc(var(--dialogue-space) + 18px); }
  .rpg-field .theatre-controls { top: 10px; bottom: calc(var(--dialogue-space) + 18px); padding: 14px; }
  .rpg-field .theatre-controls .theatre-action { min-height: 72px; }
  .field-dialogue { bottom: 10px; }
  .field-replies, .action-confirm { grid-template-columns: 1fr; }
  .field-replies button, .action-confirm button { font-size: 16px; padding: 10px 12px; }
  .rpg-response-row button { font-size: 16px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .rpg-field { --dialogue-space: 32dvh; }
  .rpg-field:has(.theatre-alerts>button) { --dialogue-space: 24dvh; }
  .rpg-field .theatre-alerts { display: flex; gap: 4px; }
  .rpg-field .theatre-alerts>button { flex: 1; min-width: 0; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .station-header { padding: 10px 20px; }
  .station-header h1 { font-size: 22px; margin: 5px 0; }
  .station-header h1 span { display: none; }
  .station-dispatch, .station-pocket { top: 90px; }
  .station-conversation { max-height: 72dvh; padding: 18px; }
  .station-help { bottom: 12px; font-size: 14px; }
  .rpg-field { --dialogue-space: 155px; --command-width: 360px; --edge: 14px; grid-template-rows: 56px minmax(0, 1fr); }
  .rpg-field .theatre-header { height: 56px; }
  .rpg-field .theatre-scene-label { top: 12px; }
  .rpg-field .theatre-scene-label p { font-size: 16px; max-width: 280px; }
  .rpg-field .theatre-cast { top: 96px; width: 270px; }
  .rpg-field .theatre-cast button { flex-direction: row; justify-content: center; padding: 6px; }
  .rpg-field .theatre-cast .cast-avatar, .rpg-field .theatre-cast .patient-avatar { display: none; }
  .rpg-field .theatre-vitals { top: 10px; height: 76px; left: auto; }
  .rpg-field .theatre-jobs { top: 94px; left: auto; min-height: 48px; }
  .rpg-field .theatre-alerts { top: 150px; max-height: 70px; overflow: auto; }
  .rpg-field .theatre-tabs { height: 44px; left: auto; bottom: 68px; }
  .rpg-field .theatre-footer { left: auto; bottom: 12px; }
  .rpg-field .theatre-controls { top: 10px; left: auto; bottom: 12px; }
  .rpg-field .theatre-nameplate { display: none; }
  .field-dialogue {
    right: calc(var(--command-width) + var(--edge) + 12px);
    max-height: var(--dialogue-space); bottom: 10px; padding: 16px;
  }
  .field-dialogue .rpg-copy>p { font-size: 20px; }
  .field-dialogue .rpg-face { width: 60px; min-width: 60px; height: 80px; }
  .field-replies, .action-confirm { grid-template-columns: 1fr; }
}