/* Fold-aware command deck. CSS owns geometry; JS only chooses the viewport mode.
   Keep the same DOM, WebGL canvas, inspector and tools through every resize. */
:root {
  --duo-safe-t: max(10px, env(safe-area-inset-top, 0px));
  --duo-safe-r: max(10px, env(safe-area-inset-right, 0px));
  --duo-safe-b: max(10px, env(safe-area-inset-bottom, 0px));
  --duo-safe-l: max(10px, env(safe-area-inset-left, 0px));
}
html, body { overscroll-behavior: none; }
#game3d {
  --duo-head: 152px;
  --duo-left: clamp(142px, 23vw, 230px);
  --duo-right: clamp(174px, 28vw, 280px);
  --duo-footer: 104px;
  --duo-sheet: 48px;
  inset: var(--duo-offset-y, 0px) auto auto var(--duo-offset-x, 0px);
  width: var(--duo-vw, 100vw); height: var(--duo-vh, 100dvh);
  padding: var(--duo-safe-t) var(--duo-safe-r) var(--duo-safe-b) var(--duo-safe-l);
  box-sizing: border-box; overflow: hidden;
}
#game3d button, #game3d a, .game-dialog button, #modal button, .drawer-close {
  min-height: 44px; min-width: 44px; touch-action: manipulation;
}
#game3d button { flex-shrink: 0; }
#game3d #scene-container {
  inset: calc(var(--duo-safe-t) + var(--duo-head)) calc(var(--duo-safe-r) + var(--duo-right) + 10px) calc(var(--duo-safe-b) + var(--duo-footer)) calc(var(--duo-safe-l) + var(--duo-left) + 10px);
  touch-action: none; overscroll-behavior: none; overflow: hidden;
  border: 1px solid #164552;
}
#scene-container canvas { touch-action: none; overscroll-behavior: none; }
#game3d .game-top {
  top: var(--duo-safe-t); right: var(--duo-safe-r); left: var(--duo-safe-l);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0;
}
#game3d .game-brand { flex: 1; min-width: 80px; padding: 0; }
#game3d .game-brand strong { font-size: 20px; }
#game3d .game-brand small { display: none; }
#game3d .game-brand-mark { display: grid; }
#game3d .game-hud {
  display: flex; order: 10; flex: 1 1 100%; min-width: 0; max-width: 100%; min-height: 80px; margin: 0;
  container-type: inline-size; clip-path: none;
}
#game3d .hud-stat { padding: 8px; min-width: 0; grid-template-columns: 14px minmax(0, 1fr); }
#game3d .hud-stat small { grid-column: 2; font-size: 10px; min-height: 16px; letter-spacing: 0; }
#game3d .hud-stat strong { margin-top: 4px; min-height: 20px; font-size: clamp(13px, 2.2vw, 20px); letter-spacing: -.5px; white-space: normal; overflow-wrap: anywhere; }
#game3d .hud-icon { display: flex; }
#game3d .hud-detail { display: block; font-size: 10px; }
#game3d .hud-gauge { margin-top: 5px; }
#duo-hud-toggle, #duo-sheet-toggle { display: none; }
#duo-dock { display: contents; }
#duo-inspector {
  position: absolute; top: calc(var(--duo-safe-t) + var(--duo-head));
  right: var(--duo-safe-r); bottom: calc(var(--duo-safe-b) + var(--duo-footer));
  width: var(--duo-right); display: flex; flex-direction: column; gap: 8px;
  overflow: auto; scrollbar-width: thin; overscroll-behavior: contain;
  container: inspector / inline-size;
}
#game3d .game-left, #game3d .game-cameras, #game3d .device-card {
  position: static; inset: auto; width: auto; max-height: none; flex-shrink: 0;
}
#game3d .game-left { overflow: visible; }
#game3d .mission-toggle { padding: 8px; gap: 6px; font-size: 11px; }
#game3d .game-chapter { padding: 8px; }
#game3d .game-chapter h1 { font-size: 22px; overflow-wrap: anywhere; }
#game3d .game-chapter p { font-size: 11px; }
#game3d .game-chapter nav { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
#game3d .game-tutorial { margin: 0 8px 8px; }
#game3d .game-tutorial p { display: block; }
#game3d .game-cameras { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 3px; }
#game3d .game-cameras button { flex: 1 1 44px; width: 44px; min-height: 48px !important; }
#game3d .game-cameras button span { font-size: 9px; }
#game3d .device-card { min-width: 0; padding: 10px; box-shadow: none; overflow-wrap: anywhere; }
#game3d .device-card header > div { min-width: 0; }
#game3d .device-card::before { display: none; }
#game3d .device-card dl { display: block; }
#game3d .device-card h2 { font-size: 18px; }
.duo-inspector-hint { margin: 0; padding: 12px; color: #9fbbc4; border: 1px dashed #28535d; font-size: 12px; }
#duo-inspector:has(.device-card:not([hidden])) .duo-inspector-hint { display: none; }
#game3d .game-bottom { display: contents; position: static; inset: auto; }
#game3d .game-control-row {
  position: absolute; left: var(--duo-safe-l); right: var(--duo-safe-r); bottom: var(--duo-safe-b);
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px;
  background: #041216f2; border: 1px solid #28535d; pointer-events: auto; z-index: 3;
}
#game3d #game-planning { font-size: 11px; padding: 8px; }
#game3d .game-finance { display: flex; gap: 12px; flex: 1; padding: 4px 8px; }
#game3d .game-time { display: flex; flex: 1; justify-content: flex-end; min-width: 0; flex-wrap: wrap; gap: 3px; border: 0; padding: 0; font-size: 11px; }
#game3d .game-time > span { padding: 0 4px; font-size: 11px; }
#game3d .game-time button { padding: 8px; }
#game3d .game-time button.game-start { padding: 8px 12px; }
#game3d .build-tray {
  position: absolute; top: calc(var(--duo-safe-t) + var(--duo-head)); left: var(--duo-safe-l);
  bottom: calc(var(--duo-safe-b) + var(--duo-footer)); width: var(--duo-left);
  display: flex; flex-direction: column; min-height: 0; padding: 6px; box-sizing: border-box;
  clip-path: none; container: palette / inline-size; pointer-events: auto; z-index: 3;
}
#game3d .build-topline { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding-bottom: 5px; }
#game3d .build-categories, #game3d .build-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 0; border: 0; }
#game3d .build-topline button { padding: 6px 4px; white-space: normal; font-size: 11px; line-height: 1.3; }
#game3d .build-palette { flex: 1; flex-direction: column; min-height: 0; overflow: auto; gap: 6px; scroll-snap-type: y proximity; }
#game3d .build-item { min-width: 0; width: 100%; min-height: 68px; gap: 6px; padding: 8px; scroll-snap-align: start; }
#game3d .build-icon { width: 24px; }
#game3d .build-copy { min-width: 0; }
#game3d .build-copy strong { font-size: 12px; overflow-wrap: anywhere; }
#game3d .build-unit { display: block; }
#game3d .build-shortcut { display: none; }
#game3d .placement-status { max-height: 66px; min-height: 28px; overflow: auto; padding: 5px 0; font-size: 11px; }
#game3d .game-footnote { display: none; }
#game3d .game-library { top: calc(var(--duo-safe-t) + 50px); right: var(--duo-safe-r); width: min(290px, calc(100% - var(--duo-safe-l) - var(--duo-safe-r))); max-height: calc(var(--duo-vh, 100dvh) - var(--duo-safe-t) - var(--duo-safe-b) - 60px); overflow: auto; box-sizing: border-box; }
.duo-placement-actions {
  position: absolute; z-index: 10; left: calc(var(--duo-safe-l) + var(--duo-left) + 20px);
  bottom: calc(var(--duo-safe-b) + var(--duo-footer) + 12px); display: flex; gap: 8px;
  padding: 4px; border: 1px solid #00f0ff; background: #041216f2; box-shadow: 0 0 18px #00f0ff22;
}
#game3d .duo-placement-actions button { width: 52px; height: 48px; font-size: 24px; background: #08333a; color: #00f0ff; border: 1px solid #258997; }
#game3d #duo-cancel { color: #ff6b9b; border-color: #a53762; background: #2a0b1a; }
@container palette (max-width: 200px) {
  #game3d .build-unit { display: none; }
  #game3d .build-icon { display: none; }
}
@container inspector (max-width: 210px) {
  #game3d .device-card dl > div { display: block; }
  #game3d .device-card dd { text-align: left; }
  #game3d .game-eyebrow { letter-spacing: .4px; }
}
/* A wide, short foldable uses a single scrolling dock beside the scene. */
#game3d[data-layout="landscape-open"] { --duo-left: 0px; --duo-right: clamp(248px, 32vw, 320px); --duo-footer: 108px; }
#game3d[data-layout="landscape-open"] #scene-container { left: var(--duo-safe-l); }
#game3d[data-layout="landscape-open"] #duo-dock {
  position: absolute; top: calc(var(--duo-safe-t) + var(--duo-head)); right: var(--duo-safe-r); bottom: var(--duo-safe-b);
  width: var(--duo-right); display: flex; flex-direction: column; gap: 8px;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 3;
}
#game3d[data-layout="landscape-open"] #duo-inspector { position: static; width: auto; overflow: visible; flex-shrink: 0; }
#game3d[data-layout="landscape-open"] .build-tray { position: static; width: auto; flex-shrink: 0; max-height: none; }
#game3d[data-layout="landscape-open"] .build-palette { max-height: 240px; flex: auto; }
#game3d[data-layout="landscape-open"] .game-control-row { position: fixed; right: calc(var(--duo-safe-r) + var(--duo-right) + 10px); }
#game3d[data-layout="landscape-open"] .game-finance { display: none; }
#game3d[data-layout="landscape-open"] .game-time > span { display: none; }
#game3d[data-layout="landscape-open"] .game-time { justify-content: flex-start; }
/* Compact rows use their actual content height. Every remaining pixel belongs
   to the scene; opening the palette overlays it without moving the controls. */
#game3d[data-layout="compact"] {
  --duo-left: 0px; --duo-right: 0px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 48px auto; gap: 6px;
}
#game3d[data-layout="compact"] #scene-container {
  position: relative; inset: auto; grid-column: 1; grid-row: 2;
  width: auto; height: auto; min-width: 0; min-height: 0;
}
#game3d[data-layout="compact"] .game-top {
  position: relative; inset: auto; grid-column: 1; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px;
}
#game3d[data-layout="compact"] .game-brand { min-width: 0; overflow-wrap: anywhere; }
#game3d[data-layout="compact"] .game-brand-mark { display: none; }
#game3d[data-layout="compact"] .game-brand strong { font-size: 18px; }
#game3d[data-layout="compact"] #game-help, #game3d[data-layout="compact"] #game-shortcuts { display: none; }
#game3d[data-layout="compact"] #game-menu { width: 44px; padding: 0; }
#game3d[data-layout="compact"] #game-menu span { display: none; }
#game3d[data-layout="compact"] #duo-hud-toggle { display: block; }
#game3d[data-layout="compact"] .game-hud {
  grid-column: 1 / -1; grid-row: 2; order: 0; width: 100%; min-height: 68px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
#game3d[data-layout="compact"] .hud-stat { padding: 6px; grid-template-columns: minmax(0, 1fr); }
#game3d[data-layout="compact"] .hud-stat small { grid-column: 1; min-width: 0; min-height: 25px; overflow-wrap: anywhere; }
#game3d[data-layout="compact"] .hud-icon { display: none; }
#game3d[data-layout="compact"] .hud-stat strong { font-size: clamp(12px, 3.4vw, 16px); }
#game3d[data-layout="compact"] .hud-stat:nth-child(2), #game3d[data-layout="compact"] .hud-stat:nth-child(5) { display: none; }
#game3d[data-layout="compact"] .hud-detail { display: none; }
#game3d[data-layout="compact"].duo-hud-expanded .game-hud { background: #041216; }
#game3d[data-layout="compact"].duo-hud-expanded .hud-stat { display: grid; }
#game3d[data-layout="compact"].duo-hud-expanded .hud-detail { display: block; }
#game3d[data-layout="compact"] #duo-inspector { display: contents; position: static; container-type: normal; }
#game3d[data-layout="compact"] .duo-inspector-hint { display: none; }
#game3d[data-layout="compact"] .game-left {
  position: absolute; grid-column: 1; grid-row: 2; top: 8px; left: 8px;
  width: min(260px, calc(100% - 88px));
  max-height: calc(100% - 16px); overflow: auto; z-index: 4;
}
#game3d[data-layout="compact"] .game-left.is-collapsed { width: 166px; }
#game3d[data-layout="compact"] .game-cameras {
  position: absolute; grid-column: 1; grid-row: 2; top: auto; right: 8px; bottom: 8px;
  width: 60px; flex-direction: column; flex-wrap: nowrap; z-index: 4;
  max-height: calc(100% - 16px); overflow: auto; scrollbar-width: thin; overscroll-behavior: contain;
}
#game3d[data-layout="compact"] .game-cameras button { flex: 0 0 48px; width: 44px; }
#game3d[data-layout="compact"] .game-cameras button span { display: none; }
#game3d[data-layout="compact"] .device-card {
  position: absolute; grid-area: 1 / 1 / -1 / -1; left: 0; right: 0; top: auto; bottom: 0;
  width: auto; max-width: 100%; max-height: 100%; overflow: auto; z-index: 16;
  padding: 14px; background: #04151c; box-shadow: 0 -20px 70px #020915aa;
}
#game3d[data-layout="compact"] .game-control-row {
  position: static; grid-column: 1; grid-row: 4; min-width: 0;
  display: grid; grid-template-columns: repeat(3,44px) minmax(0,1fr); gap: 4px;
}
#game3d[data-layout="compact"] #game-planning { grid-column: 1 / 4; grid-row: 1; min-width: 0; padding: 4px; white-space: normal; }
#game3d[data-layout="compact"] .game-finance { display: none; }
#game3d[data-layout="compact"] .game-time { display: contents; }
#game3d[data-layout="compact"] .game-time > span { display: none; }
#game3d[data-layout="compact"] .game-time > button[data-speed="0"] { grid-column: 1; grid-row: 2; }
#game3d[data-layout="compact"] .game-time > button[data-speed="1"] { grid-column: 2; grid-row: 2; }
#game3d[data-layout="compact"] .game-time > button[data-speed="4"] { grid-column: 3; grid-row: 2; }
#game3d[data-layout="compact"] .game-time > #game-step { grid-column: 4; grid-row: 1; justify-self: stretch; }
#game3d[data-layout="compact"] .game-time > button.game-start { grid-column: 4; grid-row: 2; padding: 6px; white-space: normal; font-size: 11px; }
#game3d[data-layout="compact"] .build-tray {
  position: relative; inset: auto; grid-column: 1; grid-row: 3; align-self: end; min-width: 0;
  width: auto; height: var(--duo-sheet); padding: 0 6px; overflow: hidden;
  transition: height .2s ease; background: #041216fa; z-index: 6;
}
#game3d[data-layout="compact"] #duo-sheet-toggle { display: block; flex: 0 0 46px; width: 100%; background: transparent; color: #00f0ff; font: 12px var(--mono); touch-action: none; }
#game3d[data-layout="compact"] .build-topline, #game3d[data-layout="compact"] .build-palette, #game3d[data-layout="compact"] .placement-status { visibility: hidden; }
#game3d[data-layout="compact"].duo-sheet-expanded { --duo-sheet: min(340px, calc(var(--duo-vh, 100dvh) - var(--duo-safe-t) - var(--duo-safe-b) - 180px)); }
#game3d[data-layout="compact"].duo-sheet-expanded .build-topline,
#game3d[data-layout="compact"].duo-sheet-expanded .build-palette,
#game3d[data-layout="compact"].duo-sheet-expanded .placement-status { visibility: visible; }
#game3d[data-layout="compact"] .build-topline { flex: 0 0 auto; }
#game3d[data-layout="compact"] .build-categories { display: flex; overflow-x: auto; justify-content: flex-start; }
#game3d[data-layout="compact"] .build-categories button { flex: 1 0 auto; padding: 6px 10px; }
#game3d[data-layout="compact"] .build-mode { display: flex; overflow-x: auto; }
#game3d[data-layout="compact"] .build-mode button { flex: 1 0 60px; }
#game3d[data-layout="compact"] .build-palette { flex-direction: row; flex: 1 0 80px; overflow-x: auto; scroll-snap-type: x proximity; }
#game3d[data-layout="compact"] .build-item { flex: 0 0 166px; }
#game3d[data-layout="compact"] .build-unit { display: none; }
#game3d[data-layout="compact"] .placement-status { flex-shrink: 0; max-height: 42px; }
#game3d[data-layout="compact"] .duo-placement-actions { grid-column: 1; grid-row: 2; left: 12px; bottom: 12px; }
#game3d[data-layout="compact"].duo-sheet-expanded .duo-placement-actions { bottom: calc(var(--duo-sheet) - 48px + 12px); }
/* Media queries remain useful before JS initializes and when browser chrome shrinks. */
@media (max-width: 599px) {
  #game3d { --duo-left: 0px; --duo-right: 0px; }
  .game-dialog, #modal { max-width: calc(100vw - var(--duo-safe-l) - var(--duo-safe-r)); }
}
@media (min-width: 600px) and (max-width: 1023px) and (min-aspect-ratio: 11/10) {
  #game3d { --duo-right: clamp(248px, 32vw, 320px); }
}
@media (min-width: 600px) and (max-width: 760px) {
  #game3d[data-layout="expanded"] .game-finance { display: none; }
  #game3d[data-layout="expanded"] .game-time > span { display: none; }
  #game3d[data-layout="expanded"] .game-control-row { flex-wrap: nowrap; }
  #game3d[data-layout="expanded"] .game-time { justify-content: flex-end; flex-wrap: nowrap; }
  #game3d[data-layout="expanded"] #game-planning { max-width: 132px; white-space: normal; }
}
/* CSS-only viewport segment support; JS mirrors these values when the window
   API is exposed. Panels never straddle the crease, including zero-width folds. */
@media (horizontal-viewport-segments: 2) {
  #game3d, :root {
    --duo-scene-x: env(viewport-segment-left 0 0); --duo-scene-y: env(viewport-segment-top 0 0);
    --duo-scene-w: env(viewport-segment-width 0 0); --duo-scene-h: env(viewport-segment-height 0 0);
    --duo-panel-x: env(viewport-segment-left 1 0); --duo-panel-y: env(viewport-segment-top 1 0);
    --duo-panel-w: env(viewport-segment-width 1 0); --duo-panel-h: env(viewport-segment-height 1 0);
  }
}
@media (vertical-viewport-segments: 2) {
  #game3d, :root {
    --duo-scene-x: env(viewport-segment-left 0 0); --duo-scene-y: env(viewport-segment-top 0 0);
    --duo-scene-w: env(viewport-segment-width 0 0); --duo-scene-h: env(viewport-segment-height 0 0);
    --duo-panel-x: env(viewport-segment-left 0 1); --duo-panel-y: env(viewport-segment-top 0 1);
    --duo-panel-w: env(viewport-segment-width 0 1); --duo-panel-h: env(viewport-segment-height 0 1);
  }
}
#game3d[data-segments="horizontal"], #game3d[data-segments="vertical"] { --duo-head: 168px; display: block; }
#game3d[data-segments]:not([data-segments="none"]) #scene-container {
  position: absolute;
  left: calc(var(--duo-scene-x) + var(--duo-safe-l)); top: calc(var(--duo-scene-y) + var(--duo-safe-t));
  width: calc(var(--duo-scene-w) - var(--duo-safe-l) - var(--duo-safe-r));
  height: calc(var(--duo-scene-h) - var(--duo-safe-t) - var(--duo-safe-b)); right: auto; bottom: auto;
}
#game3d[data-segments]:not([data-segments="none"]) .game-top {
  position: absolute; display: flex;
  left: calc(var(--duo-panel-x) + var(--duo-safe-l)); top: calc(var(--duo-panel-y) + var(--duo-safe-t)); right: auto;
  width: calc(var(--duo-panel-w) - var(--duo-safe-l) - var(--duo-safe-r));
}
#game3d[data-segments]:not([data-segments="none"]) .game-brand-mark,
#game3d[data-segments]:not([data-segments="none"]) #game-help,
#game3d[data-segments]:not([data-segments="none"]) #game-shortcuts { display: none; }
#game3d[data-segments]:not([data-segments="none"]) .game-brand strong { font-size: 17px; }
#game3d[data-segments]:not([data-segments="none"]) #game-menu span { display: none; }
#game3d[data-segments]:not([data-segments="none"]) .game-hud { display: flex; order: 10; flex-wrap: wrap; min-height: 110px; }
#game3d[data-segments]:not([data-segments="none"]) .hud-stat { flex: 1 1 28%; padding: 4px 6px; }
#game3d[data-segments]:not([data-segments="none"]) .hud-stat strong { font-size: 14px; }
#game3d[data-segments]:not([data-segments="none"]) .hud-detail { display: none; }
#game3d[data-segments]:not([data-segments="none"]) #duo-dock {
  position: absolute; left: calc(var(--duo-panel-x) + var(--duo-safe-l)); top: calc(var(--duo-panel-y) + var(--duo-safe-t) + var(--duo-head));
  width: calc(var(--duo-panel-w) - var(--duo-safe-l) - var(--duo-safe-r));
  height: calc(var(--duo-panel-h) - var(--duo-safe-t) - var(--duo-safe-b) - var(--duo-head));
  right: auto; bottom: auto; display: flex; flex-direction: column; gap: 8px; overflow: auto; overscroll-behavior: contain; z-index: 3;
}
#game3d[data-segments]:not([data-segments="none"]) #duo-inspector { position: static; display: flex; width: auto; overflow: visible; flex-shrink: 0; }
#game3d[data-segments]:not([data-segments="none"]) :is(.game-left,.game-cameras,.device-card) { position: static; width: auto; max-height: none; overflow: visible; }
#game3d[data-segments]:not([data-segments="none"]) .game-cameras { flex-direction: row; flex-wrap: wrap; }
#game3d[data-segments]:not([data-segments="none"]) .game-bottom { position: static; inset: auto; width: auto; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
#game3d[data-segments]:not([data-segments="none"]) .game-control-row { position: static; display: flex; flex-wrap: wrap; }
#game3d[data-segments]:not([data-segments="none"]) .game-time { display: flex; flex-wrap: wrap; justify-content: flex-start; }
#game3d[data-segments]:not([data-segments="none"]) .game-finance { display: none; }
#game3d[data-segments]:not([data-segments="none"]) .build-tray { position: static; align-self: stretch; width: auto; height: auto; max-height: none; }
#game3d[data-segments]:not([data-segments="none"]) #duo-sheet-toggle { display: none; }
#game3d[data-segments]:not([data-segments="none"]) :is(.build-topline,.build-palette,.placement-status) { visibility: visible; }
#game3d[data-segments]:not([data-segments="none"]) .build-palette { max-height: 240px; flex: auto; }
#game3d[data-segments]:not([data-segments="none"]) .duo-placement-actions {
  left: calc(var(--duo-panel-x) + var(--duo-safe-l)); bottom: auto;
  top: calc(var(--duo-panel-y) + var(--duo-safe-t) + 48px); z-index: 11;
}
#game3d[data-segments]:not([data-segments="none"]) .game-library {
  left: calc(var(--duo-panel-x) + var(--duo-safe-l)); right: auto;
  top: calc(var(--duo-panel-y) + var(--duo-safe-t) + 48px);
  width: calc(var(--duo-panel-w) - var(--duo-safe-l) - var(--duo-safe-r));
  max-height: calc(var(--duo-panel-h) - var(--duo-safe-t) - var(--duo-safe-b) - 48px);
}
/* Shared dialogs, engineering drawer and loading surface also respect the island. */
.game-dialog, #modal { box-sizing: border-box; inset: var(--duo-safe-t) var(--duo-safe-r) var(--duo-safe-b) var(--duo-safe-l); max-width: calc(100vw - var(--duo-safe-l) - var(--duo-safe-r)); max-height: calc(100dvh - var(--duo-safe-t) - var(--duo-safe-b) - 20px); margin: auto; }
.game-loading { padding: var(--duo-safe-t) var(--duo-safe-r) var(--duo-safe-b) var(--duo-safe-l); }
.spatial-active.panel-open > .app-shell { inset: var(--duo-safe-t) var(--duo-safe-r) var(--duo-safe-b) auto; width: min(1050px, calc(100% - var(--duo-safe-l) - var(--duo-safe-r))); }
.spatial-active.panel-open .drawer-close { top: calc(var(--duo-safe-t) + 12px); right: calc(var(--duo-safe-r) + 12px); }
html[data-duo-segments]:not([data-duo-segments="none"]) .spatial-active.panel-open > .app-shell,
html[data-duo-segments]:not([data-duo-segments="none"]) .game-dialog,
html[data-duo-segments]:not([data-duo-segments="none"]) #modal {
  position: fixed; left: calc(var(--duo-panel-x) + var(--duo-safe-l)); top: calc(var(--duo-panel-y) + var(--duo-safe-t)); right: auto; bottom: auto; margin: 0;
  width: calc(var(--duo-panel-w) - var(--duo-safe-l) - var(--duo-safe-r));
  max-height: calc(var(--duo-panel-h) - var(--duo-safe-t) - var(--duo-safe-b)); box-sizing: border-box;
}
html[data-duo-segments]:not([data-duo-segments="none"]) .spatial-active.panel-open .drawer-close {
  left: auto; right: calc(100vw - var(--duo-panel-x) - var(--duo-panel-w) + var(--duo-safe-r) + 8px);
  top: calc(var(--duo-panel-y) + var(--duo-safe-t) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  #game3d[data-layout] #duo-inspector, #game3d[data-layout] .game-top { animation: duo-arrive .18s ease-out; }
  @keyframes duo-arrive { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  #game3d *, #game3d *::before, #game3d *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.duo-quality-note { display: none; color: #9fbbc4; font-size: 11px; line-height: 1.5; }
#game3d[data-layout="compact"] .duo-quality-note { display: block; margin-top: 8px; }

.game-dialog#onboarding { margin-block: auto; }
#intro-overlay { padding: var(--duo-safe-t) max(var(--duo-safe-r), 24px) max(var(--duo-safe-b), 18vh) max(var(--duo-safe-l), 24px); }
/* The arrival camera owns the full viewport, independent of the gameplay deck. */
body.intro-active #game3d { display: block; }
body.intro-active #game3d[data-layout] #scene-container { position: absolute; inset: 0; width: auto; height: auto; border: 0; }
body.intro-active #game3d[data-layout] #duo-dock { display: none; }
body.intro-active .duo-inspector-hint,
body.intro-active .duo-placement-actions { visibility: hidden; pointer-events: none; }
html[data-duo-segments]:not([data-duo-segments="none"]) .spatial-active #toast {
  left: calc(var(--duo-panel-x) + var(--duo-safe-l)); top: calc(var(--duo-panel-y) + var(--duo-safe-t) + 52px); bottom: auto;
  max-width: calc(var(--duo-panel-w) - var(--duo-safe-l) - var(--duo-safe-r)); box-sizing: border-box; transform: none;
}
html[data-duo-segments]:not([data-duo-segments="none"]) #intro-overlay {
  left: var(--duo-panel-x); top: var(--duo-panel-y); right: auto; bottom: auto;
  width: var(--duo-panel-w); height: var(--duo-panel-h); box-sizing: border-box; padding-bottom: var(--duo-safe-b);
}

.duo-touch-help { margin: 8px; padding: 8px 0; color: #b5cbd1; font-size: 12px; line-height: 1.7; border-bottom: 1px solid #28535d; }
#game3d[data-layout="compact"].duo-hud-expanded .game-cameras { width: min(220px, calc(100% - 16px)); flex-direction: row; }