/* The normal game window owns the action and every menu. */
html, body { height: 100%; min-height: 0; }
body { min-height: 100dvh; padding: 16px; overflow: hidden; }
.game-shell { width: min(1120px, calc(100vw - 32px), calc((100dvh - 32px) * 16 / 9)); }
.stage, body[data-testing="true"] .stage,
.stage:has(#menu:not([hidden])), body[data-testing="true"] .stage:has(#menu:not([hidden])) {
  display: grid; grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 9;
  min-height: 0; container-type: inline-size; border-radius: 6px; overflow: hidden;
}
.playfield { position: relative; min-width: 0; min-height: 0; isolation: isolate; overflow: hidden; }
#game, .stage:has(#menu:not([hidden])) #game { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.play-pause { position: absolute; z-index: 4; top: 9px; right: 9px; width: 30px; height: 30px; padding: 7px; background: #102329c9; }
.play-pause svg { width: 16px; height: 16px; }
.hud { padding: 12px 50px 16px 14px; gap: 12px; }
.stage[data-state="menu"] .hud { visibility: hidden; }
.survivor-switch { bottom: 10px; }

/* Title controls leave the painted survivors in the right two thirds clear. */
.menu-overlay { padding: 0; display: block; overflow: hidden; }
.cover-art { background-position: center; }
.cover-shade { background: linear-gradient(90deg, #081319df 0%, #0b171dc4 19%, #0d1a2170 30%, #10192100 43%), linear-gradient(0deg, #08131950, transparent 24%); }
.menu-content { position: absolute; inset: 5% auto 5% 3%; width: 29%; max-width: none; min-height: 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.title-brand { flex: 0 0 auto; }
.title-brand .chapter-label { font-size: clamp(6px, .66cqw, 9px); letter-spacing: .15em; }
.title-brand h1 { margin: .8cqw 0 .5cqw; font-size: inherit; line-height: 1; }
.title-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px #000b); }
.story { font-size: clamp(9px, .95cqw, 13px); line-height: 1.5; margin: 0; color: #d6e1dc; }
.title-options { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #95734d #112126; padding: 2px; }
.coop-choice { gap: 5px; margin: 0 0 .8cqw; font-size: clamp(8px, .9cqw, 12px); }
.coop-choice input { margin: 0; }
.coop-choice span { width: 100%; font-size: clamp(8px, .7cqw, 10px); line-height: 1.4; }
.selection-heading { margin-bottom: .55cqw; gap: 5px; }
.selection-heading .mini-label { font-size: clamp(6px, .63cqw, 8px); letter-spacing: .1em; }
.switch-hint { font-size: clamp(6px, .63cqw, 8px); gap: 4px; }
.switch-hint kbd { min-width: 0; font-size: 7px; }
.character-options { flex-direction: column; gap: .55cqw; }
.character-button { gap: 8px; padding: .8cqw 1cqw; min-height: 0; background: #111f27c9; }
.character-index { display: block; font-size: clamp(13px, 1.7cqw, 21px); }
.character-copy { gap: .3cqw; }
.character-copy strong { font-size: clamp(11px, 1.25cqw, 16px); }
.character-copy small { font-size: clamp(8px, .7cqw, 10px); }
.start-row { gap: 6px; margin-top: .9cqw; flex-wrap: wrap; }
.start-row .primary-button { width: 100%; min-height: 0; padding: 1cqw 1.2cqw; font-size: clamp(8px, .85cqw, 12px); }
.selected-note { font-size: clamp(6px, .67cqw, 9px); }
.loading-status { font-size: clamp(8px, .7cqw, 10px); min-height: 0; margin: .5cqw 0 0; }
.mission-promise { font-size: clamp(8px, .7cqw, 10px); margin-top: .55cqw; }
.title-settings { margin-top: .8cqw; padding: 5px 0; color: #cad8d2; background: transparent; border: 0; font-size: clamp(8px, .75cqw, 11px); letter-spacing: .06em; text-align: left; }
.title-settings:hover { color: var(--amber); }
.menu-edition { left: auto; right: 2%; bottom: 2%; font-size: clamp(5px, .52cqw, 7px); letter-spacing: .1em; }
.menu-edition > span:first-child { display: none; }

/* Secondary tools and instructions are only visible on pause/options screens. */
.dialog-overlay { overflow: hidden; place-items: center; padding: 2cqw; }
.dialog-card { max-height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pause-card { width: min(590px, 92%); padding: clamp(16px, 3cqw, 30px); }
.pause-card h2 { margin: 8px 0; font-size: clamp(24px, 3.6cqw, 40px); }
.pause-card p { margin: 0 0 12px; font-size: clamp(10px, 1.2cqw, 13px); }
.pause-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.pause-tools > button, #game-recorder-button.game-recorder-toolbar-control, #game-recorder-microphone-button.game-recorder-toolbar-control {
  position: static; width: 100%; min-width: 0; max-width: none; height: auto; min-height: 36px;
  padding: 9px 7px; font-size: clamp(9px, 1cqw, 12px); line-height: 1.2; white-space: normal;
  background: #15262dd9; border: 1px solid #738d814d; border-radius: 4px; color: #d3dfd6; box-shadow: none;
}
.pause-tools > button:hover { border-color: var(--amber); background: #28423e; }
.pause-card .controller-status { display: block; max-width: none; margin: 12px 0 8px; white-space: normal; font-size: 9px; }
.pause-help { font-size: 11px; color: #bacdc2; }
.pause-help summary { cursor: pointer; padding: 5px 0; }
.controls-strip { margin: 8px 0; padding: 0; gap: 6px 12px; font-size: 10px; line-height: 1.4; }
.controls-strip kbd { min-width: 0; padding: 2px 3px; font-size: 9px; }
.game-note { text-align: left; }
.pause-card .dialog-footnote { margin-top: 12px; }
.game-recorder-dialog::backdrop { background: transparent; }
#game-window:has(> #game-recorder-dialog[open])::after { content: ""; position: absolute; inset: 0; z-index: 120; background: #040a10bd; pointer-events: none; }
#game-recorder-dialog { overscroll-behavior: contain; font-size: 12px; }
#game-recorder-dialog h2 { font-size: 30px; }
.touch-controls { position: absolute; z-index: 5; bottom: 8px; left: 8px; right: 8px; margin: 0; padding: 0; gap: 6px; }
.touch-button { min-height: 30px; min-width: 32px; padding: 5px 8px; font-size: 9px; background: #102329c9; }
.touch-movement .touch-button { font-size: 19px; }
.stage:not([data-state="playing"]) .touch-controls { display: none; }
.game-shell:fullscreen { display: grid; place-items: center; padding: 0; width: 100vw; height: 100dvh; background: #070c10; }
.game-shell:fullscreen .stage, body[data-testing="true"] .game-shell:fullscreen .stage { width: min(100vw, calc(100dvh * 16 / 9)); height: auto; max-height: none; flex: none; margin: 0; }
@media (pointer: fine) { .survivor-switch { display: none; } }
@media (max-height: 480px) and (orientation: landscape) {
  .title-options { display: flex; flex-direction: column; }
  .title-options > * { flex-shrink: 0; }
  .title-brand h1 { margin: 4px 0; }
  .title-brand .story { font-size: 7px; line-height: 1.35; }
  .menu-content { gap: 5px; }
  .coop-choice { margin-bottom: 4px; font-size: 8px; gap: 3px; }
  .coop-choice span { font-size: 6px; }
  .character-button { padding: 4px 7px; gap: 5px; }
  .character-copy { gap: 1px; }
  .character-copy strong { font-size: 10px; }
  .character-copy small { font-size: 6px; }
  .character-index { font-size: 13px; }
  .start-row { order: -1; margin: 0 0 7px; gap: 3px; }
  .start-row .primary-button { padding: 6px 8px; }
  .selected-note, .loading-status, .mission-promise { font-size: 6px; }
  .pause-card { padding: 12px; }
  .pause-tools { gap: 5px; margin-top: 8px; }
  .pause-tools > button { min-height: 30px; padding: 6px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  body { padding: 8px; }
  .game-shell { width: min(calc(100vw - 16px), calc((100dvh - 16px) * .625)); }
  .stage, body[data-testing="true"] .stage,
  .stage:has(#menu:not([hidden])), body[data-testing="true"] .stage:has(#menu:not([hidden])) { aspect-ratio: 5 / 8; }
  .stage #game, .stage:has(#menu:not([hidden])) #game { inset: auto 0; top: 50%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); }
  .cover-art { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: #0e1b22; }
  .cover-shade { background: linear-gradient(90deg, #08131977, transparent 36%), linear-gradient(0deg, #0e1b22 0%, #0e1b22 57%, transparent 70%); }
  .menu-content { inset: 0; width: 100%; padding: 12px; display: grid; grid-template-rows: calc(56.25cqw - 12px) minmax(0, 1fr); gap: 0; }
  .title-brand { position: relative; width: 34%; }
  .title-brand .chapter-label { font-size: 5px; letter-spacing: .07em; gap: 3px; }
  .title-brand .chapter-label > span { width: 8px; }
  .title-brand h1 { margin-top: 7px; }
  .title-brand .story { font-size: 7px; margin-top: 4px; }
  .title-options { padding: 12px 2px 2px; }
  .coop-choice { margin-bottom: 8px; font-size: 12px; }
  .coop-choice span { width: auto; font-size: 8px; }
  .character-options { flex-direction: row; gap: 6px; }
  .character-button { padding: 12px 8px; }
  .character-index { font-size: 16px; }
  .character-copy strong { font-size: 14px; }
  .character-copy small { font-size: 8px; }
  .selection-heading { margin-bottom: 6px; }
  .selection-heading .mini-label, .switch-hint { font-size: 8px; }
  .start-row { flex-wrap: nowrap; margin-top: 12px; }
  .start-row .primary-button { width: auto; flex: 1; padding: 14px; font-size: 11px; }
  .selected-note { font-size: 9px; }
  .loading-status, .mission-promise { font-size: 8px; margin-top: 8px; }
  .title-settings { font-size: 10px; margin-top: 12px; }
  .menu-edition { display: none; }
  .hud { flex-wrap: wrap; gap: 8px; padding-right: 44px; }
  .survivor-card { width: calc(50% - 4px); }
  .objective-card { flex: 1; }
  .supplies-card { min-width: 70px; }
  .role-label { font-size: 7px; }
  .survivor-heading strong { font-size: 15px; }
  #objective { font-size: 9px; }
  .boss-bar { top: 86px; }
  .dialog-overlay { padding: 10px; }
  .pause-card { width: 100%; }
  .pause-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-shell:fullscreen .stage, body[data-testing="true"] .game-shell:fullscreen .stage { width: min(100vw, calc(100dvh * .625)); }
}