/* Keep the camera preview as the main surface during a mobile audition. */
.studio { position: relative; }
.studio-exit { position: absolute; top: 14px; right: 14px; z-index: 7; }
@media (max-width: 820px) {
  body.in-studio .nav { height: 52px; }
  body.in-studio .nav-actions { display: none; }
  body.in-studio .studio,
  body.in-studio .stage { min-height: calc(100dvh - 52px); }
  body.in-studio .stage video { object-position: center center; }
  body.in-studio .recording { top: 10px; left: 10px; padding: 6px 9px; font-size: 11px; z-index: 4; }
  body.in-studio .studio .stage-bottom,
  body.in-studio .studio.beginner-studio .stage-bottom {
    position: absolute;
    top: 48px;
    bottom: auto;
    left: 10px;
    right: 10px;
    max-height: 112px;
    overflow-y: auto;
    padding: 9px 12px;
    border-radius: 13px;
    background: rgba(29, 19, 46, .82);
    backdrop-filter: blur(8px);
    z-index: 3;
  }
  body.in-studio .stage-bottom small { display: block; font-size: 10px; line-height: 1.2; }
  body.in-studio .studio .stage-bottom h2 { margin: 4px 0 0; font-size: 16px; line-height: 1.32; max-width: none; }
  body.in-studio .stage-bottom #cueNext { display: none; }
  body.in-studio .studio .studio-side {
    position: absolute;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    right: 10px;
    min-height: 0;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 57px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    background: rgba(30, 20, 46, .82);
    z-index: 5;
  }
  body.in-studio .studio .timer { font-size: 23px; line-height: 1; text-align: center; }
  body.in-studio .studio .studio-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  body.in-studio .studio .studio-actions .full-action { min-height: 42px; padding: 8px 6px; font-size: 13px; }
  body.in-studio .studio .studio-actions #nextTask:disabled,
  body.in-studio .studio .studio-actions #pauseStudio:disabled,
  body.in-studio .studio .studio-actions #rerollCue:disabled { display: none; }
  body.in-studio .studio .studio-actions #nextTask:not(:disabled) { grid-column: 1/-1; }
  body.in-studio .studio-exit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    min-height: 32px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    z-index: 7;
  }
  body.in-studio .studio .studio-actions #beginRecording { display: none; }
  body.in-studio .ready-overlay { bottom: 92px; }
  body.in-studio .countdown-overlay { z-index: 8; }
}

@media (max-width: 380px) {
  body.in-studio .studio .stage-bottom h2 { font-size: 15px; }
  body.in-studio .studio .studio-actions .full-action { font-size: 12px; }
}