@font-face { font-family: Banan; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #19231c; --surface: #222e24; --raised: #303d2d; --text: #f7f2d9; --muted: #c5cbb6;
  --accent: #efd45f; --accent-ink: #222719; --border: #7c886a; --danger: #edaa92;
  --space: 8px; --radius: 8px; --touch: 48px; --motion: 140ms; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Banan, sans-serif; font-size: 16px; line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; width: 100%; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { min-height: var(--touch); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 10px 16px; cursor: pointer; font-weight: 700; transition: background var(--motion), border-color var(--motion), opacity var(--motion); }
button:hover:not(:disabled), button:active:not(:disabled) { background: var(--raised); border-color: var(--accent); }
button:disabled { color: var(--muted); opacity: .6; cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover:not(:disabled) { background: #f8e394; }
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
.muted { color: var(--muted); font-size: .85rem; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#menu { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--space); isolation: isolate; padding: max(20px, var(--safe-top)) max(24px, env(safe-area-inset-right)) max(16px, var(--safe-bottom)) max(24px, env(safe-area-inset-left)); }
.menu-art { position: absolute; inset: 0; z-index: -2; background: url('/assets/art/planet-command-v1.png') center 48% / cover; }
.menu-art::after { content: ''; position: absolute; inset: 0; background: rgba(9, 19, 10, .18); }
.menu-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.menu-header a { display: flex; align-items: center; min-height: var(--touch); padding: 8px; font-weight: 700; }
.menu-header button { max-width: min(260px, 55%); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-content { align-self: center; width: min(360px, 40vw); max-width: 100%; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; scroll-padding: var(--space); padding: 24px var(--space); container-type: inline-size; }
.menu-content:focus-visible { outline: 2px solid var(--border); outline-offset: -2px; }
.menu-content > *, .menu-actions > * { min-width: 0; }
h1 { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 800; line-height: 1.07; color: var(--accent); }
h1 span { display: block; font-size: clamp(.95rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--text); }
.menu-description { margin: 20px 0 28px; font-size: 1.05rem; color: var(--text); }
.menu-actions { display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); }
.menu-actions #single-player-open { grid-column: 1 / -1; }
.menu-actions button { text-align: left; background: rgba(25, 35, 28, .96); }
.menu-actions .primary { display: flex; justify-content: space-between; align-items: center; }
.menu-actions .primary:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.menu-actions .primary:disabled { color: var(--muted); border-color: var(--border); }
.menu-actions button { overflow-wrap: anywhere; }
#menu-save-state { margin-top: 12px; }
#menu[data-preparing='true'] { background: var(--bg); }
#entry-preparation { margin-top: calc(var(--space) * 3); }
#entry-status { margin-bottom: calc(var(--space) * 2); padding: 12px; background: var(--bg); border-radius: var(--radius); }
.menu-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; font-size: .75rem; color: var(--muted); }
.menu-footer > * { min-width: 0; overflow-wrap: normal; }
.menu-footer > span { flex: 1 1 min-content; min-width: min-content; max-width: 100%; text-align: right; }
.menu-footer button { font-size: .85rem; }
#game-hud { position: absolute; inset: 0; pointer-events: none; padding: max(12px, var(--safe-top)) max(12px, env(safe-area-inset-right)) max(12px, var(--safe-bottom)) max(12px, env(safe-area-inset-left)); container: command-hud / size; }
.hud-font-measure { position: absolute; width: 1em; height: 1em; visibility: hidden; pointer-events: none; contain: strict; }
.damage-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.command-layout { display: contents; }
#game-hud button, #game-hud .selection, #steering-zone { pointer-events: auto; }
#world-markers { position: absolute; inset: 0; pointer-events: none; }
.unit-bearing { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.unit-bearing::before { content: ''; position: absolute; left: -5px; top: -30px; width: 10px; height: 11px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); filter: drop-shadow(0 1px 2px #000); }
.world-marker { position: absolute; top: 0; left: 0; display: flex; align-items: center; width: 152px; min-height: 48px; padding: 6px; gap: 7px; text-align: left; background: #19231cee; font-size: .72rem; }
.marker-badge { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; color: var(--muted); }
.world-marker[data-faction='banan'] .marker-badge { color: var(--accent); }
.world-marker[data-faction='monke'] .marker-badge { color: var(--danger); }
.marker-name { overflow: hidden; text-overflow: ellipsis; }
.game-header { display: flex; gap: 12px; align-items: stretch; container: game-header / inline-size; }
.mission { min-width: 0; flex: 1; max-width: 500px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 16px; text-align: left; font-weight: 500; }
.mission strong, .mission span { display: block; overflow-wrap: anywhere; }
.mission .mission-short { display: none; }
.mission strong { font-size: .95rem; }
.mission span { font-size: .78rem; color: var(--muted); }
.camera-tools { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(12px, var(--safe-top)) + 90px); display: grid; gap: 8px; }
.camera-tools button { min-width: 48px; padding: 6px 10px; font-size: .8rem; }
.selection { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: calc(max(12px, var(--safe-bottom)) + 38px); width: min(460px, calc(100% - 24px)); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.selection strong, .selection span { display: block; }
.selection span { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.selection-actions { display: flex; gap: 8px; margin-top: 12px; }
.selection-actions button { padding: 8px 12px; font-size: .85rem; }
@media (max-width: 400px) { .selection-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.host-hud { display: contents; }
body[data-host='true'] .game-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
body[data-host='true'] .mission, body[data-host='true'] #armies-open, body[data-host='true'] .camera-tools { display: none; }
body[data-host='true'] .command-hint { display: none; }
#host-status { min-width: 0; width: 100%; max-width: 480px; justify-self: center; text-align: left; padding: 6px 10px; font-weight: 500; background: var(--bg); }
#host-name { display: block; font-size: .85rem; line-height: 1.4; color: var(--muted); }
#host-motion { display: block; font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
body:is([data-host-damage='hit'], [data-host-damage='heavy'], [data-host-damage='critical']) #host-status { border-color: var(--danger); }
body:is([data-host-damage='heavy'], [data-host-damage='critical']) #host-motion,
body[data-host-damage='critical'] #host-health { color: var(--danger); font-weight: 800; }
#target-readout { display: block; font-size: .75rem; line-height: 1.4; color: var(--danger); overflow-wrap: anywhere; }
/* The selected-target readout replaces the role caption instead of adding a
   third status row. The control guide and accessible name retain the role. */
#host-status:has(#target-readout:not([hidden])) #host-name { display: none; }
.host-resources { display: flex; flex-wrap: wrap; column-gap: var(--space); font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.host-resource { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#host-navigation { font-size: .75rem; align-self: center; }
.host-resource svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#release { grid-column: 3; padding: 8px 12px; }
body[data-host='true'] #pause, body[data-host='true'] #release { align-self: start; }
.game-header[data-layout='compact'] #host-status { grid-column: 1 / -1; grid-row: 2; max-width: none; }
.game-header[data-layout='compact'] #release { grid-row: 1; }
.game-header[data-layout='compact'] .host-resources { column-gap: 16px; }
body[data-host='true'] .game-header:has(#transport-open:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
#transport-open { grid-column: 3; padding: 8px 12px; align-self: start; }
.game-header:has(#transport-open:not([hidden])) #release { grid-column: 4; }
.game-header[data-layout='compact']:has(#transport-open:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; }
.game-header[data-layout='compact'] #transport-open { grid-column: 2; grid-row: 1; justify-self: center; }
.game-header[data-layout='compact']:has(#transport-open:not([hidden])) #release { grid-column: 3; }
.command-hint { position: absolute; left: 12px; bottom: max(8px, var(--safe-bottom)); padding: 5px 10px; font-size: .8rem; max-width: calc(100% - 24px); background: var(--bg); border-radius: 4px; }
#notice { position: fixed; z-index: 80; left: 50%; bottom: calc(max(16px, var(--safe-bottom)) + 20px); translate: -50% 0; width: min(560px, calc(100% - 32px)); padding: 12px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius); pointer-events: none; }
body[data-screen='game'] #notice { bottom: max(8px, var(--safe-bottom)); font-size: .75rem; line-height: 1.35; padding: 6px 10px; max-height: 46px; overflow: hidden; }
body:has(#notice:not([hidden])) .command-hint { visibility: hidden; }
dialog { width: min(560px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog::backdrop { background: rgba(5, 12, 8, .78); }
dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
dialog h2 { font-size: 1.25rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
#panel-close { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; }
#panel-content { padding: 20px; overflow-y: auto; min-height: 0; max-width: 100%; overflow-wrap: anywhere; overscroll-behavior: contain; scroll-padding: var(--space); }
/* Native focus and scroll-into-view must expose the outer focus ring, not
   merely place the button border against the scrollport's clipping edge. */
#panel-content :is(button, summary, input, select, a) { scroll-margin-block: var(--space); }
#panel-notice { padding: 8px 16px; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: .85rem; max-height: 5em; overflow-y: auto; flex-shrink: 0; }
.panel-text { color: var(--muted); margin-bottom: 16px; }
.panel-buttons { display: grid; gap: 8px; }
.mission-briefing .panel-text { margin-bottom: 16px; }
.mission-launch-state { margin: 16px 0; color: var(--accent); }
.mission-briefing button { min-height: var(--touch); overflow-wrap: anywhere; }
.seed-hint { color: var(--muted); font-size: 1rem; }
.panel-buttons button { text-align: left; }
.panel-buttons a { min-height: 48px; display: flex; align-items: center; }
.operation-objectives { padding-left: 24px; margin: 0; }
.operation-objectives > li { padding: 16px 0; border-top: 1px solid var(--border); }
.operation-objectives h3 { margin: 0 0 4px; font-size: 1rem; line-height: 1.5; }
.planet-region { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.planet-region h3 { margin: 0 0 8px; font-size: 1rem; }
.planet-region .panel-buttons { margin-bottom: 16px; }
.planet-guidance { margin-top: var(--space); }
.planet-guidance > summary { min-height: var(--touch); padding: 10px var(--space); cursor: pointer; overflow-wrap: anywhere; }
.planet-guidance > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.planet-guidance[open] > summary { margin-bottom: var(--space); }
.atlas-overview, .atlas-region, .atlas-location-list > li { min-width: 0; }
.atlas-overview .panel-buttons { margin-bottom: 16px; }
.atlas-overview button { min-width: 0; overflow-wrap: anywhere; }
.atlas-region h3 { margin: 16px 0 8px; font-size: 1rem; }
.atlas-location-list, .atlas-links ul { list-style: none; padding: 0; margin: 0; }
.atlas-location-list > li { padding: 16px 0; border-top: 1px solid var(--border); }
.atlas-location-list h4 { margin: 0 0 4px; font-size: 1rem; }
.atlas-kind, .atlas-field-status { color: var(--muted); }
.atlas-field-status { margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.atlas-location-list .panel-buttons { margin: 0; }
.atlas-links li { padding: 8px 0; border-top: 1px solid var(--border); }
.operation-state { margin-bottom: 8px; color: var(--muted); }
.operation-objectives [data-status='complete'] .operation-state { color: var(--accent); }
.operation-recovery { margin-bottom: 16px; color: var(--danger); }
.field { display: grid; gap: 8px; margin: 16px 0; min-width: 0; max-width: 100%; }
.field select { width: 100%; min-width: 0; min-height: 48px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.field input[type='text'] { width: 100%; min-width: 0; min-height: 48px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; font: inherit; }
.field input[type='range'] { min-height: 48px; width: 100%; min-width: 0; accent-color: var(--accent); }
.field.checkbox { display: flex; align-items: center; min-height: 48px; }
.field input[type='checkbox'] { width: 24px; height: 24px; accent-color: var(--accent); }
.account-name { font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; margin-bottom: 8px; }
.danger { color: var(--danger); }
.unsupported { position: fixed; inset: 30%; background: var(--bg); padding: 20px; }
#touch-controls { pointer-events: none; }
#steering-zone { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, var(--safe-bottom)); width: min(34%, calc(100% - 204px)); height: min(25dvh, 176px); min-height: 96px; min-width: 64px; border: 1px solid rgba(247,242,217,.55); border-radius: var(--radius); touch-action: none; }
#steering-label { position: absolute; bottom: 10px; left: 12px; font-size: .8rem; color: var(--text); text-shadow: 0 1px 2px #000; }
#steering-indicator { position: absolute; top: 50%; left: 50%; width: 18px; height: 4px; background: var(--accent); display: none; }
.pedals, .weapons { position: absolute; right: max(12px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: max(168px, 11rem); }
.pedals { bottom: max(12px, var(--safe-bottom)); }
.weapons { bottom: calc(max(12px, var(--safe-bottom)) + 76px); }
.pedals button { min-width: 0; min-height: 64px; padding: 8px; touch-action: none; }
.weapons button { min-width: 0; min-height: 56px; padding: 8px; }
body[data-host-type='infantry'] .weapons, body[data-host-type='installation'] .weapons { bottom: max(12px, var(--safe-bottom)); }
body[data-host-type='installation'] #steering-zone { height: 112px; }
#accelerator, #fire[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }
#fire { touch-action: none; }
.flight-controls { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, var(--safe-bottom)); display: flex; flex-wrap: wrap; gap: var(--space); width: max(168px, 11rem); }
.flight-controls button { flex: 1 1 3.5em; min-width: var(--touch); min-height: var(--touch); padding: 6px; touch-action: none; }
.flight-controls button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }
.flight-arrow { display: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-touch-controls='true'] .flight-controls { width: min(34%, calc(100% - 204px)); min-width: 64px; bottom: calc(max(12px, var(--safe-bottom)) + max(96px, min(25dvh, 176px)) + var(--space)); }
.support-controls { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, var(--safe-bottom)); width: max(168px, 11rem); max-width: calc(100% - 24px); }
#support-tool { display: grid; width: 100%; min-width: var(--touch); min-height: var(--touch); padding: 6px 8px; touch-action: none; text-align: left; overflow-wrap: anywhere; }
#support-tool-name { font-size: .85rem; }
#support-tool-state { font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums; }
#support-tool[aria-pressed='true']:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
body[data-touch-controls='true'] .support-controls { bottom: calc(max(12px, var(--safe-bottom)) + 76px + max(56px, 1.5em + 18px) + var(--space)); }
body[data-touch-controls='true']:is([data-host-type='infantry'], [data-host-type='installation']) .support-controls { bottom: calc(max(12px, var(--safe-bottom)) + max(56px, 1.5em + 18px) + var(--space)); }
/* Desktop shares the same weapon actions, without invisible driving pedals.
   Keep any actual support tool above this existing two-button bank. */
body[data-touch-controls='false'] .weapons { bottom: max(12px, var(--safe-bottom)); }
body[data-touch-controls='false'] .support-controls { bottom: calc(max(12px, var(--safe-bottom)) + max(56px, 1.5em + 18px) + var(--space)); }
@media (max-width: 600px) {
  #menu { padding: max(12px, var(--safe-top)) 16px max(12px, var(--safe-bottom)); }
  .menu-art { background-position: 62% center; }
  .menu-art::after { background: rgba(9, 19, 10, .53); }
  .menu-content { width: min(330px, 100%); padding: 20px var(--space); }
  h1 { font-size: 4rem; }
  .menu-description { margin: 12px 0 20px; }
  .menu-footer { align-items: flex-end; }
  .menu-header button { max-width: 170px; font-size: .8rem; }
  .menu-header a { font-size: .85rem; padding: 0; }
  .game-header { gap: 8px; }
  .game-header > button { padding: 8px; font-size: .8rem; }
  .mission { padding: 6px 8px; }
  .mission strong { font-size: .78rem; }
  .mission span { font-size: .7rem; }
  #release { font-size: .8rem; padding: 8px; }
}
@media (max-height: 680px) and (orientation: portrait) {
  h1 { font-size: 3rem; }
  .menu-content { padding: var(--space); }
  .menu-description { margin: 8px 0 12px; font-size: .9rem; }
  .menu-description br { display: none; }
  .menu-actions { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); }
  .menu-actions #single-player-open { grid-column: 1 / -1; }
  .menu-actions button { min-height: 48px; padding: 8px 12px; }
  #menu-save-state { font-size: .75rem; margin-top: 8px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  #menu { padding: max(8px, var(--safe-top)) max(16px, env(safe-area-inset-right)) max(8px, var(--safe-bottom)) max(16px, env(safe-area-inset-left)); }
  /* Intrinsic rows stay intact inside one bounded scrollport. A tall action
     stack must not squeeze the description into the fixed footer's space. */
  .menu-content { width: min(640px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: repeat(3, max-content); column-gap: 28px; align-items: start; align-content: start; align-self: stretch; padding: var(--space); }
  h1 { font-size: 3.2rem; }
  .menu-description { grid-column: 1; margin: 4px 0; font-size: .9rem; }
  .menu-actions { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); }
  .menu-actions #single-player-open { grid-column: 1 / -1; }
  .menu-actions button { padding: 8px; font-size: .78rem; }
  #menu-save-state { grid-column: 1; font-size: .72rem; }
  .menu-footer { font-size: .72rem; }
  .menu-footer button { min-height: 48px; font-size: .78rem; }
  #game-hud { padding-top: max(8px, var(--safe-top)); }
  .camera-tools { right: 12px; top: 8px; grid-template-columns: repeat(2, minmax(48px, max-content)); }
  .camera-tools button { min-height: 48px; }
  /* Keep the left battlefield open from sky to the steering bank. These are
     still the same native actions in the same keyboard order. Online's longer
     Connection label grows the rail intrinsically; large text can wrap at the
     viewport limit. Inline-size containment would suppress this measurement. */
  body[data-host='true'] .game-header { width: fit-content; min-width: min(100%, max(168px, 11rem)); max-width: 100%; margin-left: auto; grid-template-columns: minmax(0, max-content) minmax(0, max-content); container-type: normal; }
  body[data-host='true'] :is(#pause, #release) { min-width: var(--touch); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  body[data-host='true'] #pause { grid-column: 1; grid-row: 1; justify-self: start; }
  body[data-host='true'] #release { grid-column: 2; grid-row: 1; justify-self: end; }
  body[data-host='true'] #host-status { grid-column: 1 / -1; grid-row: 2; padding-block: 2px; }
  body[data-host='true'] .game-header:has(#transport-open:not([hidden])) { grid-template-columns: auto auto auto; }
  body[data-host='true'] #transport-open { grid-column: 2; grid-row: 1; }
  body[data-host='true'] .game-header:has(#transport-open:not([hidden])) #release { grid-column: 3; }
  body[data-host='true'] #target-readout { line-height: 1.25; }
  #host-name { display: none; }
  #steering-zone { width: min(29%, 230px); height: 112px; bottom: max(12px, var(--safe-bottom)); }
  body[data-touch-controls='true'] .flight-controls { width: min(29%, 230px); bottom: calc(max(12px, var(--safe-bottom)) + 120px); }
  .pedals { bottom: max(12px, var(--safe-bottom)); }
  .weapons { bottom: calc(max(12px, var(--safe-bottom)) + 76px); }
  body[data-host-type='infantry'] .weapons, body[data-host-type='installation'] .weapons { bottom: max(12px, var(--safe-bottom)); }
  .pedals button { min-height: 64px; }
  .weapons button { min-height: 48px; }
  .selection { max-width: 470px; bottom: 42px; }
}
/* Enlarged text uses a one-column thumb bank in narrow portrait view. The
   labels keep their actual text size rather than clipping or shrinking. */
@media (orientation: landscape) and (max-height: 420px) {
  /* Large text needs a full-width status row above the actions, not beneath
     them. Keep the left altitude/support bank clear of Pause and Release. */
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .game-header { width: 100%; grid-template-columns: minmax(0, 1fr) max-content max-content; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) #host-status { grid-column: 1 / -1; grid-row: 1; max-width: none; padding-block: 0; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) #pause { grid-column: 2; grid-row: 2; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) #release { grid-column: 3; grid-row: 2; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .game-header:has(#transport-open:not([hidden])) { grid-template-columns: minmax(0, 1fr) max-content max-content max-content; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) #transport-open { grid-column: 3; grid-row: 2; font-size: .75rem; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .game-header:has(#transport-open:not([hidden])) #release { grid-column: 4; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .flight-controls button { flex: 1 1 var(--touch); display: grid; place-items: center; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .flight-word { display: none; }
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']) .flight-arrow { display: block; }
  /* At enlarged text the support action cannot stack between the right-hand
     status header and Fire. Use the free left column, clear of steering;
     aircraft retain their Rise/Lower bank there instead. */
  body[data-host='true'] #game-hud:is([data-layout='compact'], [data-layout='narrow']):has(#flight-controls[hidden]) .support-controls {
    left: max(12px, env(safe-area-inset-left)); right: auto; width: min(29%, 230px);
    bottom: calc(max(12px, var(--safe-bottom)) + 120px);
  }
  body[data-host='true'][data-touch-controls='false'] #game-hud:is([data-layout='compact'], [data-layout='narrow']):has(#flight-controls[hidden]) .support-controls { bottom: max(12px, var(--safe-bottom)); }
}
@media (orientation: portrait) {
  #touch-controls { position: absolute; inset: 0; container: touch-controls / inline-size; }
  #touch-controls[data-layout='compact'] :is(.pedals, .weapons) { width: max(80px, 4.25rem); grid-template-columns: minmax(0, 1fr); }
  #touch-controls[data-layout='compact'] .weapons { bottom: calc(max(12px, var(--safe-bottom)) + 152px); }
  #touch-controls[data-layout='compact'] #steering-zone { width: min(42%, calc(100% - 6rem - 36px)); }
  body[data-touch-controls='true']:has(#touch-controls[data-layout='compact']) .flight-controls { width: min(42%, calc(100% - 6rem - 36px)); }
  body[data-touch-controls='true']:has(#touch-controls[data-layout='compact']) .support-controls { width: max(80px, 4.25rem); bottom: calc(max(12px, var(--safe-bottom)) + 152px + 2 * max(56px, 1.5em + 18px) + 16px); }
  body[data-touch-controls='false'] #touch-controls[data-layout='compact'] .weapons { bottom: max(12px, var(--safe-bottom)); }
  body[data-touch-controls='false']:has(#touch-controls[data-layout='compact']) .support-controls { width: max(80px, 4.25rem); bottom: calc(max(12px, var(--safe-bottom)) + 2 * max(56px, 1.5em + 18px) + 16px); }
}
@media (max-width: 600px) and (orientation: portrait) {
  #host-status { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  #release { grid-row: 1; }
  body[data-host='true'] .game-header:has(#transport-open:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; }
  #transport-open { grid-column: 2; grid-row: 1; justify-self: center; }
  .game-header:has(#transport-open:not([hidden])) #release { grid-column: 3; }
  body[data-host='true'] .game-header[data-layout='compact'] #transport-open { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
}
/* Command controls reserve their actual text height instead of guessing a
   header or hint offset. A long selected-unit description can scroll without
   covering the camera or destination instruction. */
body:not([data-host='true']) .command-layout { position: absolute; inset: max(12px, var(--safe-top)) max(12px, env(safe-area-inset-right)) max(12px, var(--safe-bottom)) max(12px, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px 12px; }
body:not([data-host='true']) .game-header { grid-column: 1 / -1; grid-row: 1; max-width: none; }
body:not([data-host='true']) .camera-tools { position: static; grid-column: 2; grid-row: 2; align-self: start; }
body:not([data-host='true']) .selection { position: static; grid-column: 1; grid-row: 2; align-self: end; min-width: 0; min-height: 0; max-height: min(100%, 30dvh); width: min(460px, 100%); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Live intent text scrolls independently; it must not push the action bank
   away from a held finger. The outer scrollport remains an accessibility
   fallback when enlarged action labels alone exceed a very short viewport. */
body:not([data-host='true']) .selection { display: flex; flex-direction: column; }
.selection-details { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-padding: var(--space); }
.selection-details:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body:not([data-host='true']) .selection-actions { flex-shrink: 0; }
body:not([data-host='true']) .selection strong, body:not([data-host='true']) .selection span { overflow-wrap: anywhere; }
body:not([data-host='true']) .selection-actions { flex-wrap: wrap; }
body:not([data-host='true']) .selection-actions button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
body:not([data-host='true']) .command-hint { position: static; grid-column: 1 / -1; grid-row: 3; justify-self: start; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
/* Font-relative available width/height, not smaller text. In command view only, the
   objective journal holds the full live briefing and resource summary. Each
   HUD row owns its space; selected-unit actions scroll without covering the
   destination hint or camera controls. Possessed thumb controls are unchanged. */
body:not([data-host='true']) :where(#game-hud:is([data-layout='compact'], [data-layout='narrow'])) {
  & .command-layout { position: absolute; inset: max(8px, var(--safe-top)) max(12px, env(safe-area-inset-right)) max(12px, var(--safe-bottom)) max(12px, env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; }
  & .game-header { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px; max-width: none; min-width: 0; }
  & .mission { width: 100%; max-width: none; margin: 0; text-align: center; }
  & .mission #objective, & .mission #campaign-state { display: none; }
  & .mission .mission-short { display: block; font-size: inherit; }
  & .selection { position: static; grid-row: 2; align-self: end; min-width: 0; min-height: 0; max-height: min(100%, 30dvh); width: 100%; max-width: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px; }
  & .selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  & .command-hint { grid-column: 1; grid-row: 3; justify-self: stretch; max-width: none; }
  & .camera-tools { position: static; grid-column: 1; grid-row: 4; grid-template-columns: minmax(48px, 1fr) minmax(48px, 1fr) minmax(max-content, 1.5fr) minmax(max-content, 1.5fr); gap: 8px; }
}
body:not([data-host='true']) :where(#game-hud[data-layout='narrow']) {
  & .game-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  & .mission { grid-row: 2; grid-column: 1 / -1; }
  & #armies-open { grid-row: 1; grid-column: 2; }
  & .camera-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A selected unit already exposes its actions. Retain the destination hint
   during order placement, but don't cover the battlefield with beginner copy.
   On short landscape screens the inspector occupies the left side, leaving
   the rest of that row available for the actual selected body. */
body:not([data-host='true']) #game-hud:not([data-command-target='true']) .command-layout:has(> #selection:not([hidden])) .command-hint { display: none; }
@media (orientation: landscape) and (max-height: 480px) {
  body:not([data-host='true']) :where(#game-hud:is([data-layout='compact'], [data-layout='narrow'])) .selection { width: min(460px, 60%); max-height: 100%; }
}
/* A real pending move needs visible terrain, not a selection card covering the
   placement area. Cancel keeps the unit selected and restores its actions. */
.cancel-move { grid-column: 2; grid-row: 3; align-self: center; padding: 8px 12px; font-size: .85rem; }
#game-hud[data-command-target='true'] .command-layout { grid-template-columns: minmax(0, 1fr) max-content; }
#game-hud[data-command-target='true'] .game-header { grid-column: 1 / -1; }
#game-hud[data-command-target='true'] .selection { display: none; }
#game-hud[data-command-target='true'] .command-hint { grid-column: 1; }
body[data-screen='game']:not([data-host='true']) .command-layout > #notice { position: static; grid-column: 1 / -1; grid-row: 3; align-self: end; justify-self: start; translate: none; width: auto; max-width: 100%; max-height: none; overflow: visible; padding: 5px 10px; font-size: .8rem; line-height: 1.5; }
body[data-screen='game'] #game-hud[data-command-target='true'] .command-layout > #notice { grid-column: 1; }
.command-layout:has(> #notice:not([hidden])) .command-hint { display: none; }
#game-hud[data-command-target='true']:is([data-layout='compact'], [data-layout='narrow']) .camera-tools { grid-column: 1 / -1; }
/* The brand is a responsive wordmark; essential menu text still honors enlarged
   root text. Only the center content can scroll when accessibility sizing needs it. */
.menu-content h1 { font-size: min(6rem, 11.2vw, 100.8px); overflow-wrap: normal; }
/* Fallback follows the actual min(360px,40vw) / mobile content widths.
   The enhancement also accommodates the content's real scrollbar width. */
@media (max-width: 600px) { .menu-content h1 { font-size: min(6rem, 18vw, 92.4px, calc(28vw - 8.96px)); } }
@supports (font-size: 1cqw) {
  .menu-content h1 { font-size: min(6rem, 18vw, 28cqw); }
}
.menu-content h1 span { font-size: min(1.35rem, 5vw); }
@media (max-height: 680px) and (orientation: portrait) { .menu-content h1 { font-size: min(3rem, 17vw); } }
@media (max-height: 480px) and (orientation: landscape) { .menu-content h1 { font-size: min(3.2rem, 9vw); } .menu-content h1 span { font-size: min(1.35rem, 3vw); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.pattalium-controller-active :focus { outline: 3px solid #dcc4ff !important; outline-offset: 4px !important; }
.ptl-pad-hint, .ptl-pad-help, .ptl-pad-keyboard { color-scheme: dark; font: 400 14px/1.5 system-ui,sans-serif; color: #f1ecfa; background: #21182c; border: 1px solid #8a739f; box-shadow: 0 8px 32px #0008; }
.ptl-pad-hint { position: fixed; z-index: 2147483000; bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); max-width: min(340px,calc(100vw - 28px)); padding: 10px 14px; min-height: 44px; border-radius: 8px; cursor: pointer; }
.ptl-pad-hint[hidden] { display: none; }
.ptl-pad-cursor { pointer-events:none; position:fixed; z-index:2147483003; width:20px; height:20px; border:2px solid #fff; outline:2px solid #533773; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 18px #a877d4; }
.ptl-pad-help { z-index: 2147483001; width: min(440px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border-radius: 14px; }
.ptl-pad-help::backdrop { background: #08050ccd; }
.ptl-pad-help h2 { margin: 0 0 20px; color: inherit; font: 600 23px/1.2 system-ui,sans-serif; }
.ptl-pad-help dl { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; }
.ptl-pad-help dt { color: #dcc4ff; font-weight: 600; }
.ptl-pad-help dd { margin: 0; }
.ptl-pad-help p { color: #c9bbd8; margin: 20px 0; }
.ptl-pad-help button, .ptl-pad-keyboard button { font: inherit; color: #fff; background: #3e2f50; border: 1px solid #8a739f; border-radius: 5px; min-height: 44px; padding: 8px 12px; cursor: pointer; }
.ptl-pad-help button:hover, .ptl-pad-keyboard button:hover { background: #5b436f; }
.ptl-pad-keyboard { position: fixed; z-index: 2147483002; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(650px,calc(100vw - 20px)); padding: 14px; border-radius: 12px; }
.ptl-pad-keyboard p { margin: 0 0 12px; }
.ptl-pad-key-row { display: flex; gap: 5px; justify-content: center; margin-block: 5px; }
.ptl-pad-key-row button { flex: 1 1 0; min-width: 0; padding: 6px 2px; }
@media (max-width:420px) { .ptl-pad-keyboard { padding: 9px; } .ptl-pad-key-row { gap: 3px; } }

/* PATTALIUM LEGAL START */
/* Shared local privacy controls. Scoped so each experience keeps its own design. */
.ptl-legal{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;width:100%;min-width:0;padding:12px 0;font:400 12px/1.5 system-ui,sans-serif;letter-spacing:normal;text-transform:none;color:inherit}
.ptl-legal>span{white-space:nowrap}.ptl-legal nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}.ptl-legal a{display:inline-flex;align-items:center;min-height:32px;padding:2px 0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px}.ptl-legal a:focus-visible{outline:2px solid currentColor;outline-offset:4px}.ptl-legal--standalone{padding:16px 24px;flex:none}.ptl-legal--compact{width:auto;gap:4px 14px;padding:4px 0}.ptl-legal--compact a{min-height:32px}
.ptl-privacy-dialog{box-sizing:border-box;position:fixed;inset:0;z-index:2147483000;width:min(580px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);height:auto;margin:auto;padding:24px;overflow:auto;overscroll-behavior:contain;border:1px solid #9b90a8;border-radius:4px;background:#f8f5fa;color:#251c30;font:400 15px/1.6 system-ui,sans-serif;letter-spacing:normal;text-transform:none;text-align:left;color-scheme:light;isolation:isolate}
.ptl-privacy-dialog::backdrop{background:rgb(12 8 18 / .7)}.ptl-privacy-dialog *{box-sizing:border-box}.ptl-privacy-dialog .ptl-privacy-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.ptl-privacy-dialog h2{margin:0;font:600 23px/1.3 system-ui,sans-serif;color:inherit;letter-spacing:-.025em}.ptl-privacy-dialog h3{margin:0 0 6px;font:600 16px/1.4 system-ui,sans-serif;color:inherit}.ptl-privacy-dialog p{margin:12px 0;max-width:none;font:inherit;color:inherit}.ptl-privacy-dialog .ptl-privacy-essential{padding:16px 0;border-block:1px solid #d6cedd;margin:16px 0}.ptl-privacy-essential p{margin:0}.ptl-privacy-dialog button{appearance:none;display:inline-flex;align-items:center;justify-content:center;position:static;width:auto;min-height:44px;margin:0;padding:9px 14px;border:1px solid #92839f;border-radius:4px;background:#eee7f3;color:#251c30;font:600 14px/1.4 system-ui,sans-serif;letter-spacing:normal;text-transform:none;cursor:pointer;transform:none;box-shadow:none}.ptl-privacy-dialog button:hover{background:#e1d6e9}.ptl-privacy-dialog button:focus-visible,.ptl-privacy-dialog a:focus-visible,.ptl-privacy-dialog input:focus-visible{outline:3px solid #684886;outline-offset:3px}.ptl-privacy-dialog .ptl-privacy-close{background:transparent;flex:none}.ptl-privacy-dialog .ptl-privacy-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}.ptl-privacy-dialog .ptl-privacy-actions button{flex:1 1 auto}.ptl-privacy-dialog .ptl-privacy-links{display:flex;flex-wrap:wrap;gap:0 18px;border-top:1px solid #d6cedd;padding-top:12px;margin-top:16px}.ptl-privacy-dialog a{display:inline-flex;align-items:center;min-height:40px;color:#50356c;font:500 14px/1.5 system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}.ptl-privacy-dialog small{display:block;margin-top:12px;font:400 12px/1.5 system-ui,sans-serif}.ptl-privacy-dialog .ptl-privacy-option{display:flex;align-items:start;gap:12px;margin:16px 0;cursor:pointer}.ptl-privacy-option input{appearance:auto;flex:none;width:22px;height:22px;margin:2px 0;accent-color:#684886}.ptl-privacy-option span{display:block}.ptl-privacy-dialog .ptl-privacy-status:empty{display:none}
@media(max-width:420px){.ptl-privacy-dialog{padding:18px}.ptl-privacy-dialog .ptl-privacy-heading{gap:10px}.ptl-privacy-dialog h2{font-size:21px}.ptl-privacy-dialog .ptl-privacy-actions{flex-direction:column}}
@media(forced-colors:active){.ptl-privacy-dialog,.ptl-privacy-dialog button{border:1px solid CanvasText;background:Canvas;color:CanvasText}}

/* PATTALIUM LEGAL END */

/* Keep legal actions above the controller connection hint. */
body:has(.ptl-pad-hint:not([hidden])) .ptl-legal{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}