/*
  Pausenbild, ausgelegt auf 1920x1080.

  Zwei Regeln bestimmen das Layout:
   - Das Seitenverhaeltnis des Clips (16:9) wird GEWAHRT. Links und rechts bleibt Flaeche
     frei, weil Kopf- und Fusszeile Hoehe kosten - genau so bestellt.
   - Nichts blinkt, nichts springt. Es laeuft im Hintergrund einer Sendung; jede schnelle
     Bewegung zoege den Blick vom Clip weg.
*/

@font-face {
  font-family: "Roboto";
  src: url("font/roboto-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lila: #9147ff; /* nur noch fuer Kategorie und Ton-Knopf - NICHT im Hintergrund */
  --lila-hell: #bf94ff;
  --weiss: #fff;
  /*
    Drei Helligkeitsstufen statt einer Sammlung von Zufallswerten. Auf dunklem Grund traegt
    Weiss weit; unter ~55 % franst Text aus und wirkt schmutzig statt zurueckhaltend.
  */
  --laut: rgba(255, 255, 255, 0.92); /* Zahlen, die man liest */
  --leise: rgba(255, 255, 255, 0.7); /* Datum */
  --sehr-leise: rgba(255, 255, 255, 0.55); /* wer den Clip gemacht hat */
  --kopf-h: 104px;
  --fuss-h: 132px;
  --luft: 28px;

  /*
    DIE BREITE DES VIDEOS - EINE QUELLE FUER ALLE.

    Der Clip ist 16:9 und so hoch, wie die mittlere Zeile zulaesst; daraus ergibt sich seine
    Breite. Bei 1920x1080 sind das 1500 px, also je 210 px freie Flaeche links und rechts.

    Die Fusszeile haengt an den *gedachten Raendern des Videos*, nicht am Seitenrand - sie
    braucht dieselbe Zahl. Deshalb wird sie hier EINMAL gerechnet, statt Rahmen und Fusszeile
    getrennt zu einem Ergebnis kommen zu lassen: zwei Rechenwege waeren zwei Gelegenheiten,
    um ein paar Pixel auseinanderzulaufen.
  */
  --video-breite: min(
    calc(100vw - var(--luft) * 2),
    calc((100vh - var(--kopf-h) - var(--fuss-h)) * 16 / 9)
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #070708;
  color: var(--weiss);
  font-family: "Roboto", system-ui, sans-serif;
  /* Ein Pausenbild wird nicht bedient - eine Textauswahl kann hier nur stoeren. */
  user-select: none;
}

/* ---------- Hintergrund ------------------------------------------------------------------ */
/*
  Das Vorschaubild des laufenden Clips, stark unscharf. `scale` ist noetig, weil der
  Weichzeichner sonst ausgefranste Raender zeigt. Die Bewegung ist absichtlich sehr langsam
  (40 s) und sehr klein - sie soll man eher spueren als sehen.
*/
.hintergrund {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #070708;
}

.ebene {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(64px) saturate(1.6) brightness(0.85);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: transform, opacity;
  animation: wandern 40s ease-in-out infinite alternate;
}

.ebene.an {
  opacity: 1;
}

@keyframes wandern {
  from {
    transform: scale(1.15) translate3d(-1.5%, -1%, 0);
  }
  to {
    transform: scale(1.24) translate3d(1.5%, 1%, 0);
  }
}

/*
  Die Auflage sichert den Kontrast fuer die weisse Schrift - neutral schwarz, KEIN Farbstich.
  Der Hintergrund ist das Vorschaubild des laufenden Clips; seine Farben sollen die Seite
  faerben, nicht eine Hausfarbe darueber.

  Der Verlauf ist deshalb nicht gleichmaessig: Oben und unten, wo Text steht, deckt er stark
  ab; in der Mitte - hinter dem Video, wo ohnehin nichts zu lesen ist - laesst er die Farben
  des Clips durch. Die Vignette nimmt zusaetzlich die Ecken zurueck, damit der Blick beim
  Video bleibt.
*/
.schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.55) 24%,
      rgba(0, 0, 0, 0.5) 72%,
      rgba(0, 0, 0, 0.86) 100%
    );
}

/* ---------- Buehne ----------------------------------------------------------------------- */
.buehne {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--kopf-h) 1fr var(--fuss-h);
}

/* ---------- Kopf ------------------------------------------------------------------------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--luft);
}

.kopf h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Mitte: der Clip -------------------------------------------------------------- */
.buehne-mitte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--luft);
}

/*
  SEITENVERHAELTNIS: Breite aus `--video-breite`, Hoehe daraus per `aspect-ratio`. Die Flaeche
  links und rechts ergibt sich von selbst - und die Fusszeile unten kennt dieselbe Kante.
*/
.rahmen {
  position: relative;
  width: var(--video-breite);
  aspect-ratio: 16 / 9;
  max-height: 100%; /* Sicherheitsnetz gegen Rundungsreste */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 28px 80px rgba(0, 0, 0, 0.62);
}

/*
  Seit dem Umbau auf eigene MP4s ist das hier ein <video> und kein fremder iframe mehr.
  Damit entfaellt die ganze Akrobatik gegen Twitchs Steuerleiste: Es gibt keine.

  Es liegen ZWEI Videos uebereinander: das laufende und das schon gepufferte naechste. Das
  wartende ist unsichtbar (`opacity: 0`) statt `display: none` - ein ausgeblendetes Element
  darf der Browser beim Puffern hintanstellen, und genau das Puffern ist ja der Zweck.
*/
.spieler {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.spieler video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Die Clips sind 16:9 wie der Rahmen; `contain` schuetzt trotzdem vor Beschnitt, falls
     ein alter Clip einmal anders daherkommt. */
  object-fit: contain;
  background: #000;
  opacity: 0;
}

.spieler video.an {
  opacity: 1;
}

/* ---------- Fuss: Metadaten -------------------------------------------------------------- */
/*
  ZWEI SPALTEN, ZWEI KANTEN. Links die Identitaet des Clips (Titel, darunter Kategorie und
  Ersteller), rechts die Zahlen. Vorher stand "Clip von ..." mittig - und eine Mitte zwischen
  zwei Kanten hat keine eigene Kante: Sie wandert mit jeder Titellaenge, das Auge findet keine
  Fluchtlinie. Kategorie und Ersteller sagen beide, WOHER der Clip kommt; sie gehoeren
  zusammen in eine Zeile, nicht auf zwei Seiten des Bildschirms.

  KEIN SCHLAGSCHATTEN hinter der Schrift. Er sollte Kontrast schaffen, legte aber einen
  dunklen Hof um jeden Buchstaben - auf dunklem Grund frisst das genau die Brillanz weg, die
  weisse Schrift dort hat. Den Kontrast sichert die Auflage ueber dem Hintergrundbild
  (`.schleier`), nicht der Text selbst.
*/
.fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* minmax, sonst sprengt ein langer Titel das Raster */
  align-items: center;
  gap: 32px;
  /* Buendig mit den Kanten des Videos darueber - nicht mit dem Seitenrand. */
  width: var(--video-breite);
  margin: 0 auto;
  padding: 0 0 22px;
}

.fuss-rechts {
  text-align: right;
  white-space: nowrap;
}

.titel {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--weiss);
  /* Lange Clip-Titel gibt es wirklich - eine Zeile, dann Punkte. Zwei Zeilen wuerden die
     Fusszeile aufblaehen und den Clip nach oben schieben. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unterzeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  min-width: 0;
}

.marke {
  font-size: 22px;
  font-weight: 500;
  color: var(--lila-hell);
}

.ersteller {
  font-size: 20px;
  color: var(--sehr-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 8 % der Clips haben keine Kategorie - dann darf weder Luecke noch Trennpunkt stehen. */
.marke:empty,
.ersteller:empty {
  display: none;
}

.marke:not(:empty) + .ersteller::before {
  content: "·";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.32);
}

.aufrufe {
  font-size: 26px;
  font-weight: 500;
  color: var(--laut);
}

.datum {
  margin-top: 2px;
  font-size: 21px;
  color: var(--leise);
}

/* ---------- Ton-Hinweis ------------------------------------------------------------------ */
/*
  Nur fuer den normalen Browser. In OBS ist automatisches Abspielen mit Ton erlaubt,
  dort bleibt das hier unsichtbar.
*/
.tonhinweis {
  position: fixed;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  padding: 14px 22px;
  font: 500 20px "Roboto", system-ui, sans-serif;
  color: #fff;
  background: rgba(145, 71, 255, 0.92);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.tonhinweis[hidden] {
  display: none;
}

/* ---------- Wenn (noch) nichts da ist ---------------------------------------------------- */
.hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 26px;
  color: var(--leise);
  text-align: center;
  padding: 40px;
}

/* Manche mögen keine Bewegung - und in einer Aufzeichnung spart es Rechenzeit. */
@media (prefers-reduced-motion: reduce) {
  .ebene {
    animation: none;
  }
}

/* Selbstauskunft, nur mit ?diag=1 - ich kann in ein fremdes OBS nicht hineinsehen. */
.diag {
  position: fixed;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  font: 400 14px/1.4 "Roboto", monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 8px;
  max-width: 92vw;
}