/* The same native dialog becomes a full-window cinema, with one video only. */
.project-dialog.is-theatre {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #020303;
  animation: none;
  overscroll-behavior: none;
}
.project-dialog.is-theatre::backdrop { background: #020303; backdrop-filter: none; }
.project-dialog.is-theatre > :not(.theatre) { display: none !important; }
.project-dialog .theatre[hidden] { display: none !important; }
.project-dialog .theatre { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: #020303; color: #ebe8dd; }
.theatre-bar { display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; align-items: center; gap: 24px; flex: 0 0 auto; min-height: 72px; padding: max(12px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 12px max(28px, env(safe-area-inset-left)); }
.theatre-back, .theatre-source { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; padding: 8px 0; border: 0; background: transparent; color: #c6cbbf; font: inherit; font-size: 13px; white-space: nowrap; text-decoration: none; }
.theatre-back { justify-self: start; cursor: pointer; }
.theatre-back > span { font-size: 20px; line-height: 1; }
.theatre-source { justify-self: end; color: #b9aa8a; }
.theatre-back:hover, .theatre-source:hover { color: #f0d7a7; }
.project-dialog .theatre-title { margin: 0; color: #e0e2d8; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theatre-screen { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-height: 0; padding: 0 max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.theatre-player { position: relative; flex: 0 0 auto; width: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.theatre-player > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.project-dialog .theatre :is(button, a):focus-visible { outline: 2px solid #e0bd76; outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) {
  .theatre-bar { grid-template-columns: 1fr auto; gap: 0 14px; min-height: 94px; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .theatre-back, .theatre-source { font-size: 12px; gap: 7px; }
  .project-dialog .theatre-title { grid-column: 1 / -1; grid-row: 2; font-size: 12px; color: #91998e; text-align: left; }
  .theatre-source { grid-column: 2; grid-row: 1; font-size: 11px; }
  .theatre-screen { padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .theatre-bar { display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; min-height: 48px; padding-block: 2px; gap: 12px; }
  .project-dialog .theatre-title { grid-column: 2; grid-row: 1; text-align: center; }
  .theatre-source { grid-column: 3; }
  .theatre-screen { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}