:root {
  color-scheme: dark;
  --watch-gold: #d9b978;
  --watch-cream: #f0dfb2;
  --watch-purple: #b86be5;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

body { color: var(--watch-cream); }

/* The permanent header remains. This room intentionally replaces only the
   permanent ambience meter with its documentary player console. */
body > .ambience-bar { display: none !important; }

.watch-room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.watch-stage {
  position: absolute;
  top: var(--site-header-height, 92px);
  left: 50%;
  width: min(100vw, calc((100vh - var(--site-header-height, 92px)) * 1.79074));
  height: min(calc(100vh - var(--site-header-height, 92px)), 55.842vw);
  transform: translateX(-50%);
  overflow: hidden;
  background: #050505;
}

.watch-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* Measured directly from the 1934 × 1080 supplied theater artwork. */
.screen-window {
  position: absolute;
  z-index: 2;
  left: 31.35%;
  top: 19.72%;
  width: 39.55%;
  height: 40.28%;
  overflow: hidden;
  background: #050505;
  clip-path: polygon(.7% 1.2%, 99.2% 0, 100% 98.6%, .2% 100%);
  box-shadow: inset 0 0 22px rgba(0,0,0,.72), 0 0 15px rgba(228,217,185,.12);
}

.screen-window video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  filter: contrast(.97) brightness(.92) saturate(.88);
}

.projector-flash {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255,255,244,.92);
  mix-blend-mode: screen;
}

.projector-flash.is-starting {
  animation: projector-start 3s steps(1,end) both;
}

@keyframes projector-start {
  0% { opacity: 0; }
  5% { opacity: .86; }
  10% { opacity: .08; }
  17% { opacity: .64; }
  24% { opacity: .02; }
  34% { opacity: .9; }
  42% { opacity: .16; }
  55% { opacity: .72; }
  63% { opacity: .04; }
  76% { opacity: .42; }
  86% { opacity: .1; }
  94% { opacity: .27; }
  100% { opacity: 0; }
}

.theater-panel {
  position: absolute;
  z-index: 8;
  left: 21.5%;
  right: 21.5%;
  bottom: 1.9%;
  padding: clamp(8px, 1.15vh, 15px) clamp(15px, 1.8vw, 31px);
  text-align: center;
  background: linear-gradient(180deg, rgba(18,12,10,.94), rgba(5,4,4,.97));
  border: 1px solid rgba(218,184,116,.72);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.88), inset 0 0 24px rgba(100,42,22,.18);
}

.theater-panel h1 {
  margin: 0 0 .28em;
  color: var(--watch-cream);
  font: 700 clamp(1rem, 2vw, 2rem) Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(178,70,48,.75);
}

.theater-panel p {
  max-width: 920px;
  margin: .25em auto;
  color: #e6d7bc;
  font: clamp(.63rem, .88vw, .92rem)/1.35 Georgia, serif;
}

.theater-panel .house-notice {
  color: #eacb8d;
  font-style: italic;
}

.player-console {
  display: grid;
  grid-template-columns: minmax(86px,auto) minmax(86px,auto) minmax(86px,auto) minmax(220px,1fr) minmax(190px,.55fr);
  gap: clamp(5px, .65vw, 10px);
  align-items: center;
  margin-top: .62em;
  padding: clamp(6px, .7vh, 10px);
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(184,107,229,.48);
  border-radius: 4px;
}

.player-console button {
  min-width: 86px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid rgba(217,185,120,.66);
  border-radius: 3px;
  color: var(--watch-cream);
  background: linear-gradient(#2b211c, #100c0a);
  font: 700 clamp(.62rem, .72vw, .78rem) Georgia, serif;
  letter-spacing: .045em;
  cursor: pointer;
}

.player-console button:hover,
.player-console button:focus-visible {
  border-color: var(--watch-purple);
  box-shadow: 0 0 10px rgba(184,107,229,.65);
  outline: none;
}

.seek-control,
.volume-control {
  display: grid;
  align-items: center;
  gap: 7px;
  color: #d8c39b;
  font: 700 .67rem Georgia, serif;
  letter-spacing: .04em;
  min-height: 46px;
  padding: 6px 5px;
}

.seek-control { grid-template-columns: auto minmax(100px, 1fr) auto; }
.volume-control { grid-template-columns: auto minmax(55px, 1fr); }

.player-console input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.player-console input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid rgba(232,209,163,.58);
  border-radius: 999px;
  background: linear-gradient(90deg, #48205f, #a85ddd 48%, #48205f);
  box-shadow: inset 0 1px 3px #000, 0 0 7px rgba(184,107,229,.42);
}

.player-console input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 23px;
  margin-top: -8px;
  border: 2px solid #f0dfb2;
  border-radius: 50%;
  background: #9d52ca;
  box-shadow: 0 0 8px rgba(214,141,255,.92), 0 2px 4px #000;
}

.player-console input[type="range"]::-moz-range-track {
  height: 9px;
  border: 1px solid rgba(232,209,163,.58);
  border-radius: 999px;
  background: linear-gradient(90deg, #48205f, #a85ddd 48%, #48205f);
  box-shadow: inset 0 1px 3px #000, 0 0 7px rgba(184,107,229,.42);
}

.player-console input[type="range"]::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 2px solid #f0dfb2;
  border-radius: 50%;
  background: #9d52ca;
  box-shadow: 0 0 8px rgba(214,141,255,.92), 0 2px 4px #000;
}

.player-status {
  min-height: 1.2em;
  margin: .35em 0 0 !important;
  color: #bda98a !important;
  font-size: clamp(.56rem, .67vw, .7rem) !important;
  letter-spacing: .1em;
}

.watch-back {
  position: fixed;
  z-index: 40;
  left: 1.1rem;
  bottom: 1rem;
  padding: 10px 15px;
  color: #ead6aa;
  background: rgba(8,6,5,.92);
  border: 1px solid rgba(217,185,120,.7);
  border-radius: 4px;
  text-decoration: none;
  font: 700 clamp(.68rem, .85vw, .85rem) Georgia, serif;
  box-shadow: 0 5px 20px rgba(0,0,0,.76);
}

.watch-back:hover,
.watch-back:focus-visible {
  border-color: var(--watch-purple);
  box-shadow: 0 0 12px rgba(184,107,229,.62);
  outline: none;
}

@media (max-width: 900px), (max-height: 680px) {
  .theater-panel { left: 12%; right: 12%; }
  .theater-panel p { display: none; }
  .theater-panel .house-notice { display: block; }
  .player-console { grid-template-columns: repeat(3,minmax(80px,auto)); }
  .seek-control,
  .volume-control { grid-column: 1 / -1; }
}

@media (max-width: 700px) and (orientation: portrait) {
  html, body { overflow: auto; }

  .watch-room {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: var(--site-header-height, 92px);
    padding-bottom: 30px;
  }

  .watch-stage {
    position: relative;
    top: auto;
    left: 0;
    width: 100vw;
    height: 55.842vw;
    transform: none;
    overflow: visible;
    margin-bottom: 430px;
  }

  .theater-panel {
    top: calc(100% + 10px);
    bottom: auto;
    left: 4vw;
    right: 4vw;
    padding: 14px 12px;
  }

  .theater-panel p,
  .theater-panel .house-notice { display: block; }

  .player-console {
    grid-template-columns: repeat(3, 1fr);
  }

  .seek-control,
  .volume-control {
    grid-column: 1 / -1;
    display: grid;
  }

  .watch-back {
    position: relative;
    display: inline-block;
    left: 4vw;
    bottom: auto;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projector-flash.is-starting { animation: projector-start-reduced 3s ease-out both; }
  @keyframes projector-start-reduced {
    0% { opacity: .22; }
    100% { opacity: 0; }
  }
}