.mobile-settings { display: none; }
@media (max-width: 900px), (max-height: 600px) and (pointer: coarse) {
  html, body { overflow: hidden; width: 100%; }
  #root { height: 100dvh; }
  .topbar { flex-shrink: 0; padding: 6px 8px; gap: 4px; flex-wrap: wrap; }
  .topbar > :not(#deviceName):not(#btnMute):not(.spacer):not(.github-link):not(.mobile-settings) { display: none; }
  .topbar .github-link { margin: 0; padding: 8px; font-size: 11px; gap: 4px; }
  .topbar b { font-size: 12px; }
  .mobile-settings { display: inline-flex; align-items: center; min-height: 38px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; }
  .layout { position: relative; min-width: 0; }
  .stage { min-width: 0; min-height: 0; overflow: hidden; }
  .side.controls { display: none; }
  .mobile-settings-open .side.controls { display: block; position: absolute; inset: 0 0 0 auto; z-index: 10; width: min(280px, 100%); max-width: 100%; background: var(--card); box-shadow: -8px 0 24px #0003; overscroll-behavior: contain; }
  .device-wrap { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(var(--mobile-scale, 1)); transform-origin: center; }
  .bottom-bar { position: static; flex-shrink: 0; width: 100%; padding: 6px 4px max(6px, env(safe-area-inset-bottom)); box-sizing: border-box; }
  .diag-strip, .tilt-slider, .stage-controls > .divider { display: none; }
  .stage-controls { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
  .stage-controls button { min-height: 36px; min-width: 36px; }
}