/* Viewport layouts. This is the single owner of theatre/fullscreen geometry. */
#spectator-panel { height: max(640px, calc(100dvh - 128px)); }
body[data-game="robot_kitchen"] #spectator-panel { height: max(660px, calc(100dvh - 116px)); }
.fullscreen-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid #637b5d; border-radius: 6px; background: #3d5437; color: #e3eed7; font-size: 12px; white-space: nowrap; }
.fullscreen-control>span:first-child { font-size: 19px; line-height: 1; }
.fullscreen-control:hover { background: #526d49; }
.fullscreen-control[aria-pressed=true] { color: #263822; background: #dce9cb; border-color: #dce9cb; }
.mobile-fullscreen-control { display: none; }
.camera-mode-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #47574a; border-radius: 7px; background: #19231c; }
.camera-mode-switch button { min-height: 40px; min-width: 76px; padding: 7px 13px; border: 1px solid transparent; border-radius: 5px; color: #9caf98; background: transparent; font-size: 12px; white-space: nowrap; }
.camera-mode-switch .is-active { background: #d6e4c7; color: #293b24; border-color: #d6e4c7; }
/* More controls stays above the bottom bar in all viewing modes. */
body.spectator-focus, body.spectator-fullscreen { overflow: hidden; overscroll-behavior: none; }
body.spectator-focus:before { content: ''; position: fixed; inset: 0; z-index: 99; background: #080e0ce8; backdrop-filter: blur(10px); }
body.spectator-focus #spectator-panel { position: fixed; inset: 10px; z-index: 100; width: auto; height: auto; max-width: none; margin: 0; }
#spectator-panel:fullscreen, #spectator-panel.is-fullscreen { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; background: #1b241e; }
#spectator-panel:fullscreen::backdrop { background: #1b241e; }
body.spectator-fullscreen #spectator-panel>.panel-heading { border-radius: 0; }
body.spectator-fullscreen #spectator-panel .spectator-controls { border-radius: 0; padding-bottom: max(8px,env(safe-area-inset-bottom)); }
body.spectator-focus #spectator-panel .arena-stage-top, body.spectator-fullscreen #spectator-panel .arena-stage-top { display: none; }
body.spectator-focus #spectator-panel .arena-stage-bottom, body.spectator-fullscreen #spectator-panel .arena-stage-bottom { display: none; }
body.spectator-focus #spectator-panel .race-scoreboard, body.spectator-fullscreen #spectator-panel .race-scoreboard { margin-top: 5px; }
body.spectator-fullscreen #spectator-panel .more-controls { max-height: calc(100dvh - 170px); }
/* Native fullscreen and CSS fallback use the exact same layout and controls. */
@media(min-width:1800px) {
  .sidebar { padding-inline: 30px; }
  main { padding-inline: 24px; }
  .workspace-heading { min-height: 64px; }
  #spectator-panel { height: max(680px,calc(100dvh - 178px)); }
}
@media(max-width:950px) and (min-width:701px) {
  .transport-row { gap: 6px; }
  .race-camera-controls .toggle-control { padding-inline: 10px; }
  .camera-mode-switch button { min-width: 66px; padding-inline: 10px; }
}
@media(max-width:700px) {
  #spectator-panel { height: max(560px, calc(100dvh - 140px)); }
  body[data-game="robot_kitchen"] #spectator-panel { height: max(570px, calc(100dvh - 132px)); }
  body[data-workspace-tab="watch"] .workspace-heading { min-height: 46px; padding: 3px 0 2px; }
  body[data-workspace-tab="watch"] .workspace-heading .hero { display: none; }
  body[data-workspace-tab="watch"] .workspace-tabs { margin-top: 0; }
  body[data-workspace-tab="watch"] #spectator-panel { height: calc(100dvh - 146px); min-height: 520px; }
  body[data-workspace-tab="watch"][data-game="robot_kitchen"] #spectator-panel { height: calc(100dvh - 136px); min-height: 530px; }
  .fullscreen-control { min-height: 44px; padding: 8px 10px; font-size: 11px; }
  .arena-heading-actions .fullscreen-control { min-height: 44px; background: transparent; border-color: transparent; color: #d1e5c7; padding-inline: 6px; }
  .arena-heading-actions .fullscreen-control>span:first-child { font-size: 20px; }
  .mobile-fullscreen-control { display: inline-flex; min-height: 44px; padding: 8px 8px; font-size: 11px; }
  .camera-mode-switch { order: 4; padding: 0; flex: 0 0 auto; height: 46px; }
  .camera-mode-switch button { min-height: 44px; min-width: 62px; padding: 8px 12px; font-size: 11px; }
  .transport-main { order: 0; }
  .transport-options { order: 0; }
  .mobile-fullscreen-control { order: 1; }
  .spectator-more { order: 2; }
  .transport-row:after { content: ''; flex-basis: 100%; order: 2; height: 0; }
  body.spectator-fullscreen #spectator-panel { height: 100dvh; }
  body.spectator-focus #spectator-panel { inset: 3px; height: auto; }
  body.spectator-fullscreen #spectator-panel .more-controls { max-height: calc(100dvh - 210px); }
  body.spectator-fullscreen #spectator-panel .spectator-controls { padding-bottom: max(5px,env(safe-area-inset-bottom)); }
}
/* On a short landscape screen, navigation and view tabs share one top row. */
@media(max-height:600px) and (orientation:landscape) {
  body[data-workspace-tab=watch] .sidebar { position: absolute; top: 0; left: 0; width: calc(100% - 285px); height: 46px; padding: 0 9px; gap: 7px; border-bottom: 0; background: transparent; }
  body[data-workspace-tab=watch] .sidebar .brand>span:last-child,
  body[data-workspace-tab=watch] .header-status,
  body[data-workspace-tab=watch] .sidebar>#admin-open,
  body[data-workspace-tab=watch] .training-strip { display: none; }
  body[data-workspace-tab=watch] .sidebar .brand-symbol { font-size: 29px; }
  body[data-workspace-tab=watch] .game-nav-item { min-height: 44px; padding: 6px 8px; }
  body[data-workspace-tab=watch] main { padding: 0 6px 8px; }
  body[data-workspace-tab=watch] .workspace-heading { display: flex; justify-content: flex-end; height: 46px; min-height: 46px; padding: 0; }
  body[data-workspace-tab=watch] .hero { display: none; }
  body[data-workspace-tab=watch] .workspace-tabs { flex: 0 0 auto; width: 276px; margin: 0; gap: 2px; }
  body[data-workspace-tab=watch] .workspace-tab { min-width: 0; min-height: 44px; padding: 6px 15px; }
  body[data-workspace-tab=watch] #spectator-panel { height: calc(100dvh - 52px); min-height: 0; }
  body[data-workspace-tab=watch] #spectator-panel>.panel-heading { min-height: 45px; padding: 0 8px; }
  body[data-workspace-tab=watch] #spectator-panel .fullscreen-control { min-height: 44px; padding-block: 6px; }
  body[data-workspace-tab=watch] #spectator-panel .arena-stage-top,
  body[data-workspace-tab=watch] #spectator-panel .arena-stage-bottom { display: none; }
  body[data-workspace-tab=watch] #spectator-panel .race-scoreboard { min-height: 31px; margin: 2px 4px 3px; padding: 2px 10px; }
  body[data-workspace-tab=watch] #spectator-panel .race-team-score strong { font-size: 23px; }
  body[data-workspace-tab=watch] #spectator-panel .race-match-clock strong { font-size: 21px; }
  body[data-workspace-tab=watch] #spectator-panel .race-kitchen { grid-template-rows: max-content minmax(0,1fr); }
  body[data-workspace-tab=watch] #spectator-panel .race-kitchen>header { display: none; }
  body[data-workspace-tab=watch] #spectator-panel .race-orders { min-height: 32px; padding: 3px; }
  body[data-workspace-tab=watch] #spectator-panel .race-order { grid-template-rows: 16px 2px; padding: 3px 5px; gap: 2px 4px; }
  body[data-workspace-tab=watch] #spectator-panel .race-order small { display: none; }
  body[data-workspace-tab=watch] #spectator-panel .race-order .race-order-food { grid-row: 1; font-size: 13px; }
  body[data-workspace-tab=watch] #spectator-panel .race-order .progress-track { grid-row: 2; height: 2px; }
  body[data-workspace-tab=watch] #spectator-panel .spectator-controls { padding: 0 6px 4px; }
  body[data-workspace-tab=watch] #spectator-panel .timeline-row { height: 20px; }
  body[data-workspace-tab=watch] #spectator-panel .transport-row { flex-wrap: nowrap; gap: 6px; }
  body[data-workspace-tab=watch] #spectator-panel .transport-row:after { display: none; }
  body[data-workspace-tab=watch] #spectator-panel .transport-row>* { order: 0; }
  body[data-workspace-tab=watch] #spectator-panel .race-camera-controls { flex: none; width: auto; height: auto; }
  body[data-workspace-tab=watch] #spectator-panel .mobile-fullscreen-control { display: none; }
  body[data-workspace-tab=watch] #spectator-panel .more-controls { max-height: calc(100dvh - 85px); }
  body.spectator-focus #spectator-panel { height: auto; }
  body.spectator-fullscreen #spectator-panel { height: 100dvh; }
}
/* Touch devices keep comfortable primary targets after rotating the phone. */
@media(pointer:coarse) {
  #spectator-panel .transport-main .icon-control,
  #spectator-panel .transport-main .play-button,
  #spectator-panel .transport-options select,
  #spectator-panel .race-camera-controls .toggle-control,
  #spectator-panel .camera-mode-switch button,
  #spectator-panel .more-toggle,
  #spectator-panel .fullscreen-control,
  body.spectator-fullscreen #spectator-panel .fullscreen-control,
  body.spectator-focus #spectator-panel .fullscreen-control { min-height: 44px; }
}