/* Mobile is a single instrument. Short viewports scroll the instrument itself. */
@media (max-width: 1050px), (max-height: 600px) {
  html, body { background: #000; }
  .room-header,
  .room-number,
  .room-title > p,
  .room-title > .eyebrow,
  .room-bottom,
  .room-instruction,
  .room-tooltip,
  .room-vignette,
  .touch-nav,
  .teaser-launch,
  .desk-photo-controls,
  .cigarette-tools,
  #cigarette-hit { display: none !important; }
  .room-title { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .room-title h1 { white-space: nowrap; }
  .room-experience { top: var(--visual-top); height: var(--visual-height); bottom: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #000; }
  .room-ready #room-scene { position: absolute; inset: 0 0 auto; width: 100%; height: var(--machine-stage-height, 100%); }
  .room-ready .machine-controls { position: absolute; inset: 0 0 auto; height: var(--machine-stage-height, 100%); }
  .room-ready .room-hotspot { touch-action: manipulation; }
  .room-ready .room-hotspot:active { background: #e5f2c918; outline: 1px solid #dce7bf55; }
  .page-shell { top: var(--visual-top); left: 0; right: 0; bottom: auto; width: 100%; height: var(--visual-height); max-width: none; border: 0; border-radius: 0; background: #152219; animation: none; }
  .page-top { padding: calc(10px + var(--safe-top)) max(12px, var(--safe-right)) 10px max(12px, var(--safe-left)); min-height: calc(64px + var(--safe-top)); }
  .page-top > div { min-width: 0; }
  .page-top > button { font-size: 9px; gap: 5px; padding: 0 6px 0 10px; min-height: 44px; }
  .page-top > button > span { width: 24px; height: 36px; font-size: 25px; }
  .page-shell footer { padding-bottom: calc(16px + var(--safe-bottom)); }
  body:not(.room-ready) .machine-controls { margin-top: 20px; }
  .room-fallback #room-scene { background: #000; }
}