/**
 * Bildschirm teilen — Grundgerüst und Bühne.
 *
 * Bewusst EINE Welt, keine Umschaltung zwischen hell und dunkel: Das Ding ist ein
 * Sendepult bei Nacht. Alles wird ausdrücklich gemalt, damit die Seite in keinem
 * Browser plötzlich die Farben des Wirts leiht.
 *
 * Schriften liegen auf diesem Server, nicht bei Google — sonst hinterließe jeder
 * Zuschauer beim Öffnen des Links dort einen Treffer, und genau das soll nicht sein.
 */

@font-face {
  font-family: "Syne";
  src: url("/f/Syne-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Syne";
  src: url("/f/Syne-800-latin-ext.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Syne";
  src: url("/f/Syne-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/f/SpaceMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/f/SpaceMono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Tinte mit Violett-Stich statt reinem Grau — ein neutrales Grau wirkt unentschieden. */
  --tinte: #08070f;
  --panel: #12111f;
  --panel-hoch: #191826;
  --rand: #272438;
  --weiss: #f3f1ff;
  --nebel: #8f8caa;

  /* Drei Leuchtfarben. Säure führt, die anderen zwei nur als Signal. */
  --saeure: #d8ff46;
  --magenta: #ff2f92;
  --zyan: #37e9ff;

  --radius: 16px;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --anzeige: "Syne", "Space Mono", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Muss stehen, bevor irgendeine Klasse „display" setzt: Sonst gewinnt die Klasse
   gegen das hidden-Attribut und ein versteckter Kasten bleibt sichtbar — genau so
   stand der Hintergrund-Tunnel noch mitten in der laufenden Sendung. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  /* Nichts darf die Seite seitlich aufziehen — eine zu breite Schlagzeile sonst schon. */
  overflow-x: hidden;
  background: var(--tinte);
  color: var(--weiss);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.huelle { max-width: 1240px; margin: 0 auto; padding: 24px 18px 48px; }

h1 {
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.unterzeile { color: var(--nebel); font-family: var(--mono); font-size: 12.5px; margin: 0 0 22px; }

.karte {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
}

label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 7px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--rand);
  background: #0c0b16;
  color: var(--weiss);
  font: 14px/1.4 var(--mono);
}
input::placeholder { color: #5a5873; }
input:focus-visible { outline: 2px solid var(--saeure); outline-offset: 1px; border-color: transparent; }

.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.reihe > * { flex: 1; min-width: 180px; }

button {
  padding: 12px 20px;
  border-radius: 11px;
  border: 0;
  background: var(--saeure);
  color: #0a0a12;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.09s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
button:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 0 0 4px rgb(216 255 70 / 0.14); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
button:disabled { opacity: 0.45; cursor: default; }
button.still { background: var(--panel-hoch); color: var(--weiss); box-shadow: inset 0 0 0 1px var(--rand); }
button.still:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--nebel); }
button.gefahr { background: var(--magenta); color: #140008; }

/* Ein Verweis, der wie ein Knopf aussehen soll — für „Selbst senden" auf der
   Sackgassen-Karte. Als <a> und nicht als <button>, weil er wirklich woanders hinführt. */
a.knopf {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 11px;
  background: var(--saeure);
  color: #0a0a12;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.09s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
a.knopf:hover { filter: brightness(1.07); box-shadow: 0 0 0 4px rgb(216 255 70 / 0.14); }
a.knopf:active { transform: translateY(1px) scale(0.985); }

.weg-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
@media (prefers-reduced-motion: reduce) { a.knopf { transition: none; } }
button.gefahr:hover:not(:disabled) { box-shadow: 0 0 0 4px rgb(255 47 146 / 0.16); }

/* Ein Schalter ist AUCH ein <label>, erbt also sonst Großschrift und Sperrung
   der Feld-Beschriftungen — das machte aus einem Satz ein Schild. */
.schalter {
  display: flex; align-items: center; gap: 10px;
  color: var(--weiss);
  font: 13.5px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  margin-bottom: 0;
}
.schalter input { width: 17px; height: 17px; accent-color: var(--saeure); flex: none; }

/* ─────────────────── Bühne: Bild links, Chat rechts ─────────────────── */

.buehne { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 880px) { .buehne { grid-template-columns: 1fr; } }

.bildkasten { position: relative; line-height: 0; }

video {
  width: 100%;
  background: #000;
  border-radius: 13px;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Die Zeige-Leinwand liegt deckungsgleich über dem Bild und fängt keine Klicks ab. */
.zeiger-schicht {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  pointer-events: none;
}
.bildkasten[data-zeigen="an"] video { cursor: crosshair; }

.leiste { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; line-height: 1.5; }
.leiste .hinweis { flex: 1; min-width: 110px; }

.marke {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  color: var(--nebel);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.marke.gut { color: var(--saeure); border-color: rgb(216 255 70 / 0.42); }
.marke.mittel { color: #ffc24d; border-color: rgb(255 194 77 / 0.42); }

.link-kasten {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding: 12px;
  border-radius: 12px;
  background: #0c0b16;
  border: 1px solid var(--rand);
}
.link-kasten code {
  flex: 1; min-width: 190px;
  font: 13px/1.4 var(--mono);
  word-break: break-all;
  color: var(--saeure);
}
.link-kasten button { padding: 9px 14px; }

.punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); display: inline-block; flex: none; }
.punkt.an { background: var(--saeure); box-shadow: 0 0 12px var(--saeure); animation: atmen 2.2s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ─────────────────── Chat ─────────────────── */

.chat { display: flex; flex-direction: column; height: min(68dvh, 580px); }
.chat > strong {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--nebel);
  margin-bottom: 12px;
}
.chat-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 4px; }
.chat-zeile { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-von { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--saeure); }
.chat-eingabe { display: flex; gap: 8px; margin-top: 12px; }
.chat-eingabe input { flex: 1; }
.chat-eingabe button { padding: 11px 13px; }

.hinweis { font-size: 12.5px; color: var(--nebel); font-family: var(--mono); line-height: 1.6; }
.fehler { color: var(--magenta); font-size: 13px; font-family: var(--mono); }

/* ─────────────────── Hand heben und zeigen ─────────────────── */

.frage-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--rand);
}

.hand-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--panel-hoch); color: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--rand);
  padding: 11px 16px;
}
.hand-knopf svg { width: 17px; height: 17px; flex: none; }
.hand-knopf[aria-pressed="true"] {
  background: var(--saeure); color: #0a0a12;
  box-shadow: 0 0 0 4px rgb(216 255 70 / 0.18);
}
.hand-knopf[aria-pressed="true"] svg { animation: winken 1.5s ease-in-out infinite; }
@keyframes winken {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

/* Erhobene Hände: beim Sender eine Reihe antippbarer Namen. */
.haende { display: flex; gap: 8px; flex-wrap: wrap; }
.haende:empty { display: none; }
.hand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgb(216 255 70 / 0.1);
  border: 1px solid rgb(216 255 70 / 0.4);
  color: var(--saeure);
  font: 700 12px/1 var(--mono);
  /* Ein Name wird nicht gebrüllt — die Großschrift kommt sonst von der button-Regel. */
  text-transform: none;
  cursor: pointer;
  /* OHNE Füllrichtung: Läuft die Animation einmal nicht an (gedrosselter Tab,
     Kopfloser Browser), stünde der Chip bei „backwards" dauerhaft auf opacity 0 —
     gemessen und genau so passiert. Ohne Füllung gilt immer der Ruhezustand. */
  animation: hochpoppen 0.3s ease;
}
.hand-chip:hover { background: rgb(216 255 70 / 0.2); }
.hand-chip .wisch { color: var(--nebel); font-weight: 400; }
@keyframes hochpoppen {
  from { transform: translateY(6px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .punkt.an, .hand-knopf[aria-pressed="true"] svg, .hand-chip { animation: none; }
  button { transition: none; }
}

/* Beim Zeigen darf die Seite nicht unter dem Finger wegscrollen. */
.bildkasten[data-zeigen="an"] video { touch-action: none; }

/* ─────────────────── Vollbild ───────────────────
   Die Leiste liegt INNERHALB von .bildkasten: Im echten Vollbild zeigt der Browser
   nur den Teilbaum des Vollbild-Elements, alles daneben wäre sonst weg.
   Auf dem iPhone verweigert Safari Vollbild für alles außer nackten Videos — dann
   bliebe nur das Video ohne Zeigerschicht übrig. Deshalb macht die Klasse die Arbeit
   und das echte Vollbild kommt obendrauf, wenn der Browser mitspielt. */

.bildkasten.vollbild {
  position: fixed;
  inset: 0;
  /* dvh statt 100%: Auf dem Handy wächst und schrumpft die Adressleiste, und mit
     einer festen Höhe ragt das Bild entweder darunter weg oder lässt einen Streifen. */
  width: 100vw;
  height: 100dvh;
  z-index: 60;
  background: #000;
  border-radius: 0;
}
.bildkasten.vollbild video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.bildkasten.vollbild .zeiger-schicht { border-radius: 0; }

/* Der Vollbild-Knopf sitzt in der Ecke des Bildes, nicht in einer Zeile darunter. */
.vollbild-ecke {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgb(8 7 15 / 0.62);
  color: var(--weiss);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  backdrop-filter: blur(6px);
}
.vollbild-ecke svg { width: 19px; height: 19px; }
.vollbild-ecke:hover:not(:disabled) { background: rgb(8 7 15 / 0.82); box-shadow: inset 0 0 0 1px var(--saeure); color: var(--saeure); }
/* Im Vollbild übernimmt „Vollbild aus" in der Leiste. */
.bildkasten.vollbild .vollbild-ecke { display: none; }

.vb-leiste { display: none; }
.bildkasten.vollbild .vb-leiste {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "chat chat chat"
    "eingabe hand zu";
  gap: 10px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgb(0 0 0 / 0.55) 42%, rgb(0 0 0 / 0.82));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Nach ein paar Sekunden Ruhe verschwindet die Leiste — man will das Bild sehen. */
.bildkasten.vollbild[data-leiste="weg"] .vb-leiste {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.vb-chat {
  grid-area: chat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  max-height: 94px;
  overflow: hidden;
  font-size: 13px;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.9);
}
.vb-chat:empty { display: none; }
.vb-chat .chat-von { font-size: 11.5px; }
/* Jede Zeile bekommt ihr eigenes dunkles Feld: Der Chat liegt über fremdem Bild und
   wäre über einer hellen Fläche sonst nicht zu lesen. */
.vb-chat .chat-zeile {
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 9px;
  background: rgb(8 7 15 / 0.66);
  backdrop-filter: blur(4px);
}

.vb-eingabe { grid-area: eingabe; display: flex; }
.vb-eingabe input {
  width: 100%;
  background: rgb(10 9 18 / 0.72);
  backdrop-filter: blur(6px);
  padding: 10px 13px;
}
.vb-hand { grid-area: hand; padding: 10px 14px; }
.vb-hand span { display: none; }
.vb-zu { grid-area: zu; padding: 10px 14px; }

@media (min-width: 720px) {
  /* Am Rechner ist Platz: Beschriftung statt nur Sinnbild. */
  .vb-hand span { display: inline; }
  .bildkasten.vollbild .vb-leiste { padding: 18px; }
  .vb-chat { max-height: 128px; font-size: 13.5px; }
}

/* ─────────────────── Werkzeuge während der Sendung ─────────────────── */

.werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.werkzeuge button { padding: 9px 14px; font-size: 12px; }

/* Die Leinwand zeigt, was WIRKLICH rausgeht — mit Schwärzungen und Pause. */
.vorschau-leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
  background: #000;
  pointer-events: none;
}

/* Rechteck aufziehen zum Schwärzen. */
.maskenzieher {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  cursor: crosshair;
  touch-action: none;
  background: rgb(8 7 15 / 0.22);
  box-shadow: inset 0 0 0 2px rgb(216 255 70 / 0.55);
}
.gummiband {
  position: absolute;
  background: rgb(0 0 0 / 0.72);
  border: 2px solid var(--saeure);
  border-radius: 4px;
  pointer-events: none;
}

/* ─────────────────── Fernsteuerung ─────────────────── */

.steuerband {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(8 7 15 / 0.86);
  border: 1px solid rgb(255 47 146 / 0.6);
  color: var(--magenta);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.steuerband .punkt.an { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

/* Beim Steuern ist der echte Mauszeiger drüben — hier braucht es kein Fadenkreuz. */
.bildkasten[data-steuern="an"] video { cursor: none; touch-action: none; }
.bildkasten[data-steuern="an"] { box-shadow: 0 0 0 2px rgb(255 47 146 / 0.55); border-radius: 13px; }