/* A phone held sideways gets the computer layout (the breakpoints in app.css include it), just smaller. Owner, 2026-11-01. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .hud, .tools, .infobar, .dock { zoom: .62; }
  .hud { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .tools, .infobar { top: calc(var(--hud-h, 72px) / .62 + 8px); }
  .tools { flex-direction: row; flex-wrap: wrap; inline-size: 220px; gap: 6px; margin-right: env(safe-area-inset-right); }
  .infobar { margin-left: env(safe-area-inset-left); }
  .tool { width: 66px; height: 66px; font-size: 26px; }         /* 66 x .62 = 41px real */
  .tools .extra-tool { display: block; }
  .tools .more-tool { display: none; }
  .dock { max-height: none; overflow: visible; bottom: calc(var(--kb, 0px) / .62); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .dock .inp, .dock input { font-size: 26px; }                  /* 26 x .62 = 16px real: iPhone does not zoom in */
  .dock .btn { min-height: 66px; }
  .music-fab { top: auto; bottom: 10px; }
}

/* home on an upright phone: the start panel before the streamers bubble, so you reach "open a room" sooner */
@media (max-width: 899px) and (orientation: portrait) {
  .home-left { display: flex; flex-direction: column; }
  .home-left > * { order: 3; }
  .home-left > .logo { order: 0; }
  .home-left > .start-panel { order: 1; }
  .home-left > .streamers-bubble { order: 2; }
}