.rotate-device { display: none; }

@media (orientation: portrait) {
  .mobile-mode .booth { visibility: hidden; }
  .mobile-mode .rotate-device {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #171314;
    color: white;
    text-align: center;
  }
  .mobile-mode .rotate-device h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 34px; }
  .mobile-mode .rotate-device p { margin: 0 0 20px; color: #c7babc; line-height: 1.45; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .mobile-mode { --stage-pad: 16px; }
  .mobile-mode .start-copy { width: min(560px, calc(100% - 120px)); padding: 18px 0; }
  .mobile-mode .start-copy h1 { font-size: 48px; }
  .mobile-mode .start-lead { margin-top: 12px; font-size: 25px; }
  .mobile-mode .start-note { font-size: 12px; }
  .mobile-mode .start-kicker { margin-bottom: 8px; font-size: 9px; }
  .mobile-mode .start-button { padding: 10px 20px; }
  .mobile-mode .start-sticker { width: 78px; }
  .mobile-mode .film-edge { width: 30px; }
  .mobile-mode .timer { font-size: 108px; }
  .mobile-mode .shoot-topbar { top: 12px; left: 14px; right: 14px; }
  .mobile-mode .shoot-progress { bottom: 14px; }
  .mobile-mode .scene-header { height: 48px; }
  .mobile-mode .scene-brand { font-size: 18px; }
  .mobile-mode .review-layout {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 20px;
    max-width: 760px;
    padding: 58px 18px 10px;
    text-align: left;
  }
  .mobile-mode .review-copy { order: initial; }
  .mobile-mode .review-copy h2 { font-size: 28px; }
  .mobile-mode .review-copy > p:not(.eyebrow) { margin: 8px 0; font-size: 12px; line-height: 1.35; }
  .mobile-mode .raw-strip { width: 112px; height: calc(100dvh - 72px); }
  .mobile-mode .scene-actions { justify-content: flex-start; margin-top: 12px; }
  .mobile-mode .scene-actions .btn { padding: 9px 13px; }
  .mobile-mode .studio-layout {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 18px;
    min-height: 100%;
    padding: 56px 16px 8px;
  }
  .mobile-mode .studio-preview-wrap { position: static; align-self: center; }
  .mobile-mode .styled-strip { width: 104px; height: calc(100dvh - 104px); }
  .mobile-mode .zoom-open { margin-top: 5px; padding: 5px 7px; font-size: 10px; }
  .mobile-mode .render-status { min-height: 12px; margin-top: 3px; font-size: 9px; }
  .mobile-mode .studio-controls { align-self: start; max-height: calc(100dvh - 62px); overflow-y: auto; padding: 0 3px 8px; text-align: left; }
  .mobile-mode .studio-controls h2 { font-size: 25px; }
  .mobile-mode .studio-controls .eyebrow { margin-bottom: 5px; }
  .mobile-mode .choice-group { margin-top: 8px; }
  .mobile-mode .choice-group legend { margin-bottom: 5px; font-size: 11px; }
  .mobile-mode .template-picker, .mobile-mode .filter-picker { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }
  .mobile-mode .choice-card { flex: 0 0 66px; padding: 4px; }
  .mobile-mode .template-swatch, .mobile-mode .filter-thumb { height: 28px; }
  .mobile-mode .choice-card b { margin-top: 3px; font-size: 9px; }
  .mobile-mode .studio-actions { padding: 0; }
  .mobile-mode .center-stage { width: min(720px, calc(100% - 30px)); padding: 12px 0; }
  .mobile-mode .center-stage h2 { font-size: 29px; }
  .mobile-mode .copies { margin: 12px 0 8px; grid-template-columns: 42px 100px 42px; }
  .mobile-mode .copies input, .mobile-mode .icon-button { height: 42px; }
  .mobile-mode .icon-button { width: 42px; font-size: 21px; }
  .mobile-mode .mini-strip { width: 38px; min-height: 76px; }
  .mobile-mode .upload-progress { width: 340px; margin: 4px 0 0; }
  .mobile-mode .upload-progress-label { margin-bottom: 4px; font-size: 10px; }
  .mobile-mode .upload-progress-track { height: 7px; }
  .mobile-mode .done-layout { width: min(720px, calc(100% - 40px)); grid-template-columns: minmax(0,1fr) auto; gap: 26px; padding: 24px 0; text-align: left; }
  .mobile-mode .done-layout h2 { font-size: 42px; }
  .mobile-mode .done-layout p { margin: 5px 0; font-size: 12px; }
  .mobile-mode .final-code { margin: 8px 0; font-size: 34px; }
  .mobile-mode .qr { width: 150px; height: 150px; margin: 0; }
  .mobile-mode .bot-photo-button { width: 184px; min-height: 150px; margin: 0; padding: 16px; font-size: 17px; }
  .mobile-mode .done-sun { width: 150px; }
}