/* Shared native/Web Viewport Segments layout. The unselected pane stays ambient. */
.fold-segment .screen {
  left:var(--play-region-left); top:var(--play-region-top); right:auto; bottom:auto;
  width:var(--play-region-width); height:var(--play-region-height);
}
.fold-segment .screen > .panel,
.fold-segment .shop-panel { max-width:100%; max-height:calc(var(--play-region-height) - 32px); min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
.fold-segment .screen > .panel > * { flex-shrink:0; }
.fold-segment #screen-title { box-sizing:border-box; overflow-y:auto; justify-content:flex-start; }
.fold-segment #screen-title > * { flex-shrink:0; }
.fold-segment dialog {
  position:fixed; inset:auto; margin:0;
  left:calc(var(--play-region-left) + 12px); top:calc(var(--play-region-top) + 12px);
  width:calc(var(--play-region-width) - 24px); max-width:calc(var(--play-region-width) - 24px);
  max-height:calc(var(--play-region-height) - 24px); box-sizing:border-box;
}
.fold-segment #item-drawer {
  left:var(--play-region-center-x); right:auto; bottom:calc(100% - var(--play-region-top) - var(--play-region-height));
  width:calc(var(--play-region-width) - var(--safe-area-left) - var(--safe-area-right));
  margin-inline:0; transform:translate(-50%, 108%);
}
.fold-segment #item-drawer.open { transform:translate(-50%, 0); }
.fold-segment #item-drawer:not(.open) { visibility:hidden; pointer-events:none; }
.fold-segment #toast { left:var(--play-region-center-x); bottom:calc(100% - var(--play-region-top) - var(--play-region-height) + 24px); max-width:calc(var(--play-region-width) - 32px); white-space:normal; }
.fold-segment #splash { left:var(--play-region-left); top:var(--play-region-top); right:auto; bottom:auto; width:var(--play-region-width); height:var(--play-region-height); }
.fold-segment-short #hud .hud-rail { padding-top:3px; }
.fold-segment-short #strategy-controls button { width:48px; height:48px; min-height:48px; }
.fold-segment-short #screen-title .logo-top,
.fold-segment-short #screen-title .logo-bottom { font-size:42px; }
/* Keep every instruction and a 44px close action reachable on a tabletop pane. */
.fold-segment-short .help-shot,
.fold-segment-short .help-shake-visual { display:none; }
.fold-segment-short .help-header { padding:6px 12px; }
.fold-segment-short .help-intro { margin:4px 12px; }
.fold-segment-short .help-footer { padding:6px 12px; }
.fold-segment-short .help-step-number { margin:4px 0 2px; }
.fold-segment-short .help-card h3 { font-size:22px; }
.fold-segment-short .help-body { overflow-y:auto; touch-action:pan-x pan-y; }
