:root {
  color-scheme: dark;
  --design-width: 1535;
  --design-height: 1024;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: grid;
  place-items: center;
  background: #050302;
  font-family: "Cinzel", Georgia, serif;
  overflow-x: hidden;
}

.stage {
  width: min(100vw, calc(100vh * 1535 / 1024));
  margin: auto;
}

.theater {
  position: relative;
  width: 100%;
  aspect-ratio: 1535 / 1024;
  overflow: hidden;
  background: #100704;
  isolation: isolate;
}

.theater-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Live marquee panel. It covers the baked-in sample lettering while leaving
   the permanent TONIGHT'S FEATURE heading visible above it. */
.marquee-data {
  position: absolute;
  left: 23.55%;
  top: 21.05%;
  width: 53.75%;
  height: 12.25%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: .28em;
  padding: .5% 1.8% .75%;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(rgba(234, 205, 154, .985), rgba(222, 187, 128, .985));
  box-shadow:
    inset 0 .12rem .35rem rgba(117, 72, 26, .16),
    inset 0 -.12rem .35rem rgba(117, 72, 26, .16);
}

.marquee-data::before,
.marquee-data::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(115, 72, 31, .16);
  pointer-events: none;
}
.marquee-data::before { top: 34%; }
.marquee-data::after { top: 70%; }

.marquee-data h1,
.marquee-data p { position: relative; z-index: 1; }

.marquee-data h1 {
  margin: 0;
  width: 100%;
  align-self: end;
  color: #8f1511;
  font-size: clamp(1rem, 3.85vw, 4.05rem);
  line-height: .95;
  font-weight: 600;
  letter-spacing: .018em;
  white-space: nowrap;
  text-wrap: nowrap;
  text-shadow:
    0 .018em 0 #f3b35b,
    0 .045em .025em #2a0805,
    0 0 .11em rgba(126, 17, 9, .42);
  transform-origin: center;
}

.marquee-data p {
  margin: 0;
  width: 100%;
  color: #382014;
  font-size: clamp(.34rem, 1.02vw, 1.06rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .09em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-slot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #080504;
  box-shadow:
    inset 0 0 1.2rem rgba(0,0,0,.88),
    0 0 .55rem rgba(255, 183, 55, .08);
}

.poster-slot img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.015);
}

.poster-slot img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.poster-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background:
    radial-gradient(circle at 50% 38%, rgba(102, 65, 29, .22), transparent 36%),
    linear-gradient(145deg, #15100d, #050403 70%);
}

.poster-slot.has-poster .poster-placeholder { opacity: 0; }

/* Precisely aligned to the three illuminated inner poster openings. */
.spotlight-slot {
  left: 24.63%;
  top: 52.54%;
  width: 11.47%;
  height: 27.05%;
  cursor: pointer;
}
.feature-one-slot {
  left: 64.04%;
  top: 52.54%;
  width: 10.62%;
  height: 27.05%;
}
.feature-two-slot {
  left: 79.80%;
  top: 52.54%;
  width: 10.49%;
  height: 27.05%;
}

.spotlight-slot:hover,
.spotlight-slot:focus-visible {
  outline: .22rem solid rgba(255, 204, 77, .85);
  outline-offset: -.22rem;
  filter: brightness(1.08);
}

.welcome-hotspot {
  position: absolute;
  left: 40.7%;
  top: 49.8%;
  width: 18.7%;
  height: 39.7%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.welcome-hotspot:focus-visible {
  outline: .22rem solid rgba(255, 204, 77, .85);
  outline-offset: -.35rem;
}

.hint {
  margin: .55rem 1rem 1rem;
  color: #b78a45;
  text-align: center;
  font: 600 clamp(.65rem, 1vw, .9rem)/1.4 Georgia, serif;
}

/* Invisible button aligned specifically to the illuminated SPOTLIGHT plaque. */
.spotlight-plaque-hotspot {
  position: absolute;
  left: 24.15%;
  top: 82.05%;
  width: 12.25%;
  height: 5.65%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.spotlight-plaque-hotspot:hover { filter: drop-shadow(0 0 .5rem rgba(255, 206, 77, .75)); }
.spotlight-plaque-hotspot:focus-visible {
  outline: .2rem solid rgba(255, 211, 91, .9);
  outline-offset: -.3rem;
}

.palace-status {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 20;
  translate: -50% .5rem;
  max-width: min(90vw, 48rem);
  padding: .65rem 1rem;
  border: 1px solid rgba(224, 170, 62, .72);
  border-radius: .35rem;
  background: rgba(9, 4, 2, .94);
  color: #efc45e;
  text-align: center;
  font: 600 .9rem/1.4 Georgia, serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, translate .2s ease;
}
.palace-status.show { opacity: 1; translate: -50% 0; }
.palace-status.error { color: #ffd0b8; border-color: rgba(214, 88, 46, .8); }
.spotlight-plaque-hotspot.choosing { cursor: progress; filter: drop-shadow(0 0 .8rem rgba(255, 216, 98, .95)); }
.spotlight-plaque-hotspot:disabled { pointer-events: none; }

.page-curtain {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: #050201;
  opacity: 0;
}
.page-curtain.is-closing { opacity: 1; }

@media (max-width: 720px) {
  .stage { width: 100vw; }
  .hint { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .poster-slot img { transition: opacity .42s ease, transform .5s ease; }
  .poster-placeholder { transition: opacity .35s ease; }
  .spotlight-slot:hover img { transform: scale(1.02); }
  .marquee-data h1,
  .marquee-data p { transition: opacity .2s ease; }
  .page-curtain { transition: opacity .45s ease; }
}


/* RC6.7 Universal Play test: posters are interactive without changing the theater artwork. */
.playable-poster { cursor: pointer; }
.playable-poster:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.playable-poster:hover img.is-loaded { transform: scale(1.018); }