/* GLAD-O-POLIS 2.0 — Die Bühne: kurze Filme über dem Spiel.
   Gehört zu js/ui/buehne.js. Farben ausschließlich über die Werte aus
   tokens.css.

   Die Ebene liegt fest über dem Fenster, über der Zugleiste, unter dem
   Sprunglink. Dialoge sind natives <dialog> und liegen in der obersten Ebene
   des Browsers, also immer darüber.

   data-art     gross | klein     Große Filme füllen die Fläche, kleine
                                  liegen mittig über dem Brett.
   data-warten  ja | nein         Nur wartende Filme fangen Klicks.
   data-bild    da                Erst wenn der Film wirklich läuft, wird er
                                  sichtbar. Ein Film, der nicht lädt, blitzt
                                  so gar nicht erst auf. */

/* Die Zeile für die Bildschirmleser. Zu sehen ist sie nie. */
.buehne-ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.buehne-flaeche {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.buehne-flaeche[hidden] { display: none; }

/* Das Spiel wartet: Ein Klick irgendwohin überspringt und landet nicht auf
   dem, was darunter liegt. */
.buehne[data-warten='ja'] .buehne-flaeche {
  pointer-events: auto;
  cursor: pointer;
}

/* ---------- Der Film ---------- */

.buehne-rahmen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(60vw, 420px);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: var(--linie-kraeftig);
  border-radius: var(--radius-m);
  background: var(--papier-hell);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--kontur) 35%, transparent);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dauer-dialog) linear;
  pointer-events: none;
}
.buehne[data-bild='da'] .buehne-rahmen { opacity: 1; }

.buehne-film {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  max-height: 100dvh;
}

/* ---------- Große Filme ---------- */

.buehne[data-art='gross'] .buehne-flaeche::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--kontur);
  opacity: 0;
  transition: opacity var(--dauer-dialog) linear;
}
.buehne[data-art='gross'][data-bild='da'] .buehne-flaeche::before { opacity: 1; }

.buehne[data-art='gross'] .buehne-rahmen {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.buehne[data-art='gross'] .buehne-film {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* ---------- Überspringen ---------- */

/* Im Bild steht nichts. Der Knopf ist da und hat bei wartenden Filmen den
   Fokus; zu sehen ist er erst, wenn jemand mit der Tastatur unterwegs ist. */
.buehne-ueberspringen {
  position: absolute;
  right: var(--abstand-m);
  bottom: var(--abstand-m);
  opacity: 0;
}
.buehne-ueberspringen[hidden] { display: none; }
.buehne-ueberspringen:focus-visible { opacity: 1; }

/* ---------- Ruhe ---------- */

/* js/ui/buehne.js spielt dann ohnehin nicht. Das hier ist der zweite Riegel. */
@media (prefers-reduced-motion: reduce) {
  .buehne-flaeche { display: none; }
}
.bewegung-aus .buehne-flaeche { display: none; }