/* DubStage — im Aussehen des ZOCKÄÄÄN Party Club.
   ============================================================
   Übernommen sind Palette, Glasflächen, Knöpfe und der wandernde Hintergrund;
   eigen bleibt die Wellenform: grau das Original, blau die eigene Stimme --
   dort soll die Farbe sagen, WER spricht, nicht ob es gut war.

   WICHTIG: wellenform.js liest --accent, --hot, --good und --line direkt aus
   dem Wurzelelement. Diese vier Namen dürfen nicht verschwinden, sonst zeichnet
   die Kurve in Schwarz auf Schwarz. */

:root {
  /* Terminal-Palette: fast schwarz, phosphor-pink statt Neon-Regenbogen.
     Flach statt Glas -- ein Terminal hat keine Milchglas-Flaechen. */
  --bg: #050406;
  --bg-2: #0a080c;
  --panel: #0c0a10;
  --panel-2: #131019;
  --stroke: rgba(255, 90, 150, 0.22);
  --stroke-2: rgba(255, 90, 150, 0.4);
  --text: #f2e8ee;
  --muted: #8a8090;
  --pink: #ff2d78;
  --violet: #a855f7;
  --cyan: #22e6ff;
  --gold: #ffc83d;
  --green: #2be08a;
  --red: #ff4d5e;
  /* Fast eckig -- 3px statt 18px. Ein Terminal-Fenster rundet nicht ab. */
  --r: 3px;
  --shadow: 0 0 0 1px rgba(255, 45, 120, 0.08), 0 24px 60px rgba(0, 0, 0, 0.65);
  /* Monospace ist hier nicht der Akzent, sondern die Grundschrift -- genau
     das macht den Unterschied zwischen "hat ein Terminal-Detail" und
     "sieht aus wie ein Terminal". */
  --font: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Die Namen, unter denen DubStage seine Farben kennt -- auf die Palette
     oben gelegt. Gold bleibt der Akzent: es ist die Farbe der Originalkurve,
     und an der liest man beim Sprechen ab, ob man trifft. */
  --accent: var(--gold);
  --accent-ink: #2a1500;
  --hot: var(--pink);
  --good: var(--green);
  --line: var(--stroke);
  /* Eigene Palette fuer die Wellenform: grau das Original, blau die eigene
     Stimme. Bewusst ausserhalb der Signalfarben -- hier sagt die Farbe, wer
     spricht, nicht ob es gut war. */
  --welle-original: #7c7c8a;
  --welle-eigene: #3d8ef7;
  --welle-eigene-live: #7cc4ff;
  --ink: var(--text);
  --ink-dim: var(--muted);
  --bg-lift: rgba(255, 255, 255, 0.05);
  --bg-card: var(--panel);
  --radius: var(--r);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* .view setzt display:flex und schlägt damit die Regel des Browsers für
   [hidden]. Ohne das hier stünden alle Ansichten übereinander. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 15px/1.55 var(--font);
  color: var(--text);
  background: var(--bg);
  overscroll-behavior: none;
}

/* Statt des wandernden Regenbogen-Nebels: eine einzelne, ruhige Gluehquelle
   oben -- wie ein Monitor, der irgendwo im Dunkeln steht -- plus feine
   Scanlines. Ein Terminal glueht an EINER Stelle, es badet nicht in Farbe. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(255, 45, 120, 0.16), transparent 60%),
    var(--bg);
}

/* Scanlines: ein sehr feines, sich wiederholendes Streifenmuster. Bewusst
   dezent -- bei voller Staerke ist Flimmern anstrengend, nicht stimmungsvoll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px,
    transparent 1px, transparent 3px
  );
}

/* Wer Bewegung nicht will, bekommt keine -- betrifft hier nur noch das
   Logo, der Hintergrund selbst steht schon still. */
@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.view {
  --vpad-x: 20px;
  max-width: 940px;
  margin: 0 auto;
  padding: 24px var(--vpad-x) 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: rein .45s cubic-bezier(.2, .8, .2, 1);
  /* Jede Ansicht ist ein eigenes Fenster: derselbe Rahmen wie jede Karte,
     nicht nur Inhalt auf dem nackten Hintergrund. Start und Anmeldung tragen
     ihr eigenes Fenster (.term-fenster) und schlagen das hier ab -- sonst
     staekt ein Rahmen im anderen. */
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
#view-join, #view-anmelden {
  border: 0; background: none; box-shadow: none;
}
@keyframes rein { from { opacity: 0; transform: scale(.985) translateY(10px); } }

/* Der erste Balken jeder Ansicht wird zur Titelleiste: drei Punkte links,
   dieselbe Ueberschrift wie vorher, nur auf einem eigenen Streifen statt
   frei auf der Flaeche. Das ist derselbe Rahmen wie beim Start -- nur ohne
   eine zweite HTML-Vorlage je Ansicht, weil jede Seite sowieso schon mit
   genau diesem Balken anfaengt. */
.view > header.bar:first-child {
  position: relative;
  margin: -24px calc(var(--vpad-x) * -1) 18px;
  /* Rechts etwas mehr Luft als links: dort schwebt immer der runde
     Profil-Knopf (position: fixed, 40px breit) in der Ecke -- ohne die
     Reserve stiess der letzte Knopf oder ein Abzeichen mit ihm zusammen. */
  padding: 14px calc(var(--vpad-x) + 50px) 14px calc(var(--vpad-x) + 46px);
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke);
  border-radius: var(--r) var(--r) 0 0;
}
.view > header.bar:first-child::before {
  content: "";
  position: absolute;
  left: var(--vpad-x);
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  box-shadow: 14px 0 0 var(--gold), 28px 0 0 var(--green);
}

/* ---------------------------------------------------------------- Bausteine */

/* Flach statt Glas -- jede Karte und jedes Feld tragen dieselbe feste Flaeche,
   ohne die Weichzeichnung dahinter. Ein Terminal hat keine Milchglas-Flaechen. */
.stage-card, .panel, .clip-frame, .klapp, .film-link, .roster-row,
.results li, .raum, .pack, .modus, .abschnitt, .probe, .zeile, .cbox {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}
.stage-card, .panel {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Knoepfe wie Terminal-Befehle: eckig, ein Rahmen statt Schatten, und ein
   Prompt-Zeichen davor statt eines Farbverlaufs -- ">" ist die Handschrift
   einer Kommandozeile, kein Gradient. Kein Hover-Lichtstreifen mehr: der
   gehoert zu Knoepfen, die wie Glas aussehen wollen. Diese hier nicht. */
.btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r);
  padding: 11px 18px 11px 14px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: inline-block;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn::before { content: "›"; color: var(--pink); margin-right: 8px; font-weight: 700; }
.btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--pink); }
.btn:active:not(:disabled) { background: var(--bg-2); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn-primary {
  background: var(--pink);
  color: #1a0510;
  border-color: var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 45, 120, .3), 0 0 24px rgba(255, 45, 120, .35);
}
.btn-primary::before { color: #1a0510; }
.btn-primary:hover:not(:disabled) { background: #ff487f; border-color: #ff487f; }
/* Gesperrt heisst hier wirklich farblos: der grosse Knopf soll erst dann
   leuchten, wenn er etwas kann. Blosse Transparenz liess die pinke Fuellung
   und den Schein weiterhin durchscheinen -- er sah aus wie bereit. */
.btn-primary:disabled {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--stroke);
  box-shadow: none;
  opacity: .55;
}
.btn-ghost { background: transparent; }
.btn-ghost::before { color: var(--muted); }
.btn-small { padding: 7px 12px 7px 10px; font-size: 13px; }
.btn-small::before { margin-right: 6px; }
.btn-block { width: 100%; }

/* Der Aufnahmeknopf ist der wichtigste der Seite und darf das zeigen. */
.btn-record {
  background: linear-gradient(135deg, var(--gold), #ff8a3d);
  border-color: transparent; color: #2a1500;
  box-shadow: 0 8px 26px rgba(255, 200, 61, .32);
  min-width: 150px;
}
.btn-record.recording {
  background: linear-gradient(135deg, var(--red), #d61f4a);
  color: var(--text);
  box-shadow: 0 8px 26px rgba(255, 77, 94, .4);
  animation: pochen 1.4s ease-in-out infinite;
}
@keyframes pochen { 50% { box-shadow: 0 8px 40px rgba(255, 77, 94, .75); } }

input[type=text], input[type=password], input:not([type]), .field input,
.pack-filter input, select {
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 13px 15px;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder { color: #6b6480; }
input:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 45, 120, .16); }
input[type=file] { font-size: 13px; color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--pink); }

code {
  font-family: var(--mono);
  background: rgba(0, 0, 0, .35);
  padding: 1px 6px; border-radius: var(--r); font-size: .9em;
}

.toast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 50; max-width: min(520px, 92vw);
  padding: 12px 18px; border-radius: var(--r); font-size: 14px; font-weight: 600;
  color: #1a0510;
  background: var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 45, 120, .3), 0 12px 40px rgba(0, 0, 0, .6);
}

.empty { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- Start */

/* Die Anmeldung bleibt eine schmale, mittige Karte -- anders als Start und
   Lobby hat sie nur ein Formular zu zeigen, kein Nebeneinander von Wegen. */
#view-anmelden .term-fenster {
  margin: max(5vh, 28px) auto 0;
  width: min(440px, 100%);
}
#view-anmelden .term-inhalt { padding: 30px 26px 26px; }

/* Ein Terminal schimmert nicht in Regenbogenfarben -- es gluecht in EINER.
   Phosphor-pink statt Farbverlauf, mit einem echten blinkenden Cursor-Block
   dahinter statt einer Animation ueber den Text selbst. */
.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.14;
  text-align: center;
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 45, 120, .55), 0 0 3px rgba(255, 45, 120, .8);
}
.wordmark span { color: inherit; }
.wordmark::after {
  content: "";
  display: inline-block;
  width: .5em; height: .95em;
  margin-left: .12em;
  background: var(--pink);
  box-shadow: 0 0 12px rgba(255, 45, 120, .7);
  animation: cursor-blink 1.1s steps(1) infinite;
  vertical-align: -.12em;
}
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.tagline {
  margin: 8px 0 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.field { display: block; margin-bottom: 14px; }
.field span {
  display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); margin-bottom: 7px;
}
.field em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .13em; font-weight: 800;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--stroke);
}

/* ---------------------------------------------------------------- Raumliste */

.lobby-liste-kopf {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px;
}
.lobby-liste-kopf h2 {
  margin: 0; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}

.raum-liste { display: flex; flex-direction: column; gap: 8px; }
.raum {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r);
  transition: transform .16s, border-color .16s;
}
.raum:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-2px); }
.raum:disabled { opacity: .45; cursor: default; }
.raum-code {
  font-family: var(--mono); font-weight: 800; letter-spacing: .08em;
  color: #04121a; background: var(--cyan);
  padding: 4px 9px; border-radius: var(--r); font-size: 14px;
}
.raum-mitte { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.raum-mitte span { font-size: 12px; color: var(--muted); }
.raum-mitte strong, .raum-mitte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raum-zahl { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- Lobby */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.bar h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
/* Klebt unten, fest statt durchscheinend: dieselbe Flaeche wie jede andere
   Karte, nur breiter als der Inhalt es braeuchte. */
.bar-bottom {
  position: sticky; bottom: 14px; z-index: 5;
  margin-top: 8px; padding: 12px 16px;
  justify-content: flex-end;
  border-radius: var(--r);
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.room-code { font-size: 14px; color: var(--muted); }
.room-code strong {
  font-family: var(--mono); letter-spacing: .1em; font-size: 19px;
  color: var(--gold); margin-left: 4px;
}
.lobby-oeffentlich { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--stroke); }

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

.panel { padding: 18px; }
.panel h2 {
  margin: 0 0 11px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
/* Knöpfe, die direkt in einer Spalte stehen, brauchen ihren eigenen Abstand --
   die Elemente darüber (eine Liste, ein zugeklappter Bereich) bringen unten
   keinen mit, und dann klebten "Pack hinzufügen" und "Ordner neu einlesen"
   aufeinander. */
.panel > .btn { display: block; margin-top: 12px; }
/* Muss spezifisch genug sein, um `.panel h2` zu schlagen — sonst greift der
   Abstand bei Überschriften in einer Spalte nicht, und „Blind spielen" klebt
   an „Zusatzmodus". Dieselbe Falle wie schon einmal beim Ordner-Knopf. */
.abstand, .panel h2.abstand, .panel .toggle.abstand { margin-top: 20px; }

.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.players li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--r);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke);
  font-size: 14px;
}
.players li.gone { opacity: .4; }
.dot {
  width: 9px; height: 9px; border-radius: 99px; flex: none;
  background: rgba(255, 255, 255, .2);
}
.dot.on { background: var(--green); box-shadow: 0 0 10px rgba(43, 224, 138, .8); }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--stroke); color: var(--muted);
}
.tag-you { background: var(--pink); color: #1a0510; border-color: transparent; }
.tag-gucker { background: rgba(34, 230, 255, .12); border-color: rgba(34, 230, 255, .35); color: var(--cyan); }

/* ---------------------------------------------------------------- Packs */

.pack-filter { display: flex; gap: 8px; margin-bottom: 10px; }
.pack-filter input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r); }
.pack-filter select { width: auto; padding: 10px 12px; border-radius: var(--r); }

.pack-list { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow-y: auto; }
.pack {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 8px 13px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.pack:hover:not(:disabled) { border-color: var(--pink); transform: translateY(-1px); }
.pack:disabled { cursor: default; }
.pack.chosen { border-color: var(--pink); background: rgba(255, 45, 120, .12); }
/* Dasselbe Standbild, das man ohnehin als erstes sieht, sobald man das Pack
   spielt -- kein eigens gepflegtes Cover, nur eins der Bilder markiert als
   "das hier zeigt, worum es geht". */
.pack-cover {
  width: 46px; height: 46px; flex: none;
  object-fit: cover; border-radius: var(--r); border: 1px solid var(--stroke);
  background: #000;
}
.pack-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pack-name { font-weight: 700; }
.pack-meta { font-size: 12px; color: var(--muted); }
.pack-meta b { color: var(--green); }

.pack-detail { border-top: 1px solid var(--stroke); padding-top: 12px; margin: 12px 0; }
.pack-sub { margin: 0 0 8px; font-size: 14px; }
.pack-chars { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.pack-chars b { color: var(--gold); }
.pack-hash { margin: 0; font-size: 11px; color: var(--muted); }
.pack-de { margin: 0 0 8px; font-size: 12px; color: var(--green); }
.pack-de.teils { color: var(--gold); }
.pack-de.fehlt { color: var(--muted); }

/* ---------------------------------------------------------------- Abschnitte */

.abschnitt-wahl { margin-top: 18px; }
.abschnitt-wahl h2 {
  margin: 0 0 9px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
.abschnitt-liste { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.abschnitt {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 9px 12px; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.abschnitt:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); }
.abschnitt:disabled { cursor: default; }
.abschnitt.chosen { border-color: var(--cyan); background: rgba(34, 230, 255, .1); }
/* Die Zeilenzahl ist die Angabe, nach der man wählt: sie sagt, wie lang der
   Abend wird. */
.abschnitt-zahl {
  flex: none; min-width: 36px; text-align: center; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .35);
  color: var(--gold); border-radius: var(--r); padding: 3px 0;
}
.abschnitt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.abschnitt-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abschnitt-text > span { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- Modi */

.modus-wahl { display: flex; flex-direction: column; gap: 8px; }
/* Der allererste Fork: DubStage oder Mimic Party, bevor irgendwas anderes zu
   sehen ist. Nebeneinander statt untereinander -- es sind nur zwei, und das
   ist die wichtigste Entscheidung des Abends, kein Listeneintrag. */
.modus-wahl-start {
  display: flex; gap: 14px; max-width: 720px; margin: 32px auto;
  padding: 0 16px; flex-wrap: wrap;
}
.modus-wahl-start .modus-start {
  flex: 1 1 260px; padding: 22px 20px; gap: 6px;
}
.modus-wahl-start .modus-start strong { font-size: 17px; }
.modus-wahl-start .modus-start span { font-size: 13px; line-height: 1.5; }
.modus {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r); transition: transform .16s, border-color .16s;
}
.modus:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-1px); }
.modus:disabled { cursor: default; }
.modus.chosen { border-color: var(--violet); background: rgba(168, 85, 247, .14); }
.modus strong { font-weight: 700; }
.modus span { font-size: 12px; color: var(--muted); }

.toggle {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted);
  cursor: pointer;
}
.toggle input { accent-color: var(--pink); width: 16px; height: 16px; flex: none; }
.toggle em { color: var(--gold); font-style: normal; }

/* ---------------------------------------------------------------- Rollen */

.blurb { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }

.casting-boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.cbox {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 15px; cursor: pointer; border-radius: 99px;
  transition: transform .16s, border-color .16s;
}
.cbox:hover { transform: translateY(-1px); }
.cbox:has(input:checked) { border-color: var(--pink); background: rgba(255, 45, 120, .14); }
.cbox input { accent-color: var(--pink); }
.cbox-name { font-weight: 700; }
.cbox-zahl {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gold); background: rgba(255, 200, 61, .14);
  border: 1px solid rgba(255, 200, 61, .35);
  padding: 1px 9px; border-radius: 99px;
}
.cbox-wer { font-size: 12px; color: var(--cyan); }

.roster { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.roster-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 15px; border-radius: var(--r); font-size: 14px;
}
.roster-row span { color: var(--muted); }
.roster-zahl { color: var(--gold) !important; white-space: nowrap; font-weight: 700; }

/* ---------------------------------------------------------------- Clip */

.clip-frame {
  margin: 0; padding: 18px;
  background: rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.clip-frame img, .clip-frame video {
  max-width: 100%; max-height: 44vh; border-radius: var(--r); display: block;
}
/* Ohne die Begrenzung schiebt ein hochformatiges Video die Zeile und den
   Sprechernamen unter den Bildrand -- 4:3-Quellen sind hier die Regel. */
.clip-frame.big img, .clip-frame.big video { max-height: 56vh; }
.clip-frame video { object-fit: contain; background: #000; }

/* Deutsch groß, Original klein darunter. Wer Englisch kann, will die Vorlage
   trotzdem sehen — man spricht ja auf die Lippen. */
.clip-line {
  display: flex; flex-direction: column; gap: 6px;
  text-align: center; max-width: 44ch; color: var(--text);
}
.zeile-de { font-size: 21px; line-height: 1.4; font-weight: 600; }
.zeile-en { font-size: 13px; line-height: 1.4; color: var(--muted); font-style: italic; }

.progress-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge {
  padding: 5px 13px; border-radius: 99px; font-size: 13px; font-weight: 800;
  background: var(--gold); color: #2a1500;
}

.speaker-tag { text-align: center; color: var(--gold); font-weight: 800; }
.waiting { text-align: center; color: var(--muted); padding: 30px 0; font-size: 15px; }
.sync-anzeige {
  text-align: center; font-size: 11px; color: var(--muted);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Wellenform */

.wave-wrap {
  padding: 12px 14px 8px; border-radius: var(--r);
  background: rgba(0, 0, 0, .4); border: 1px solid var(--stroke);
}
.wave-legende {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
}
.wave-marke { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.wave-marke-original { background: var(--welle-original); }
.wave-marke-du { background: var(--welle-eigene); margin-left: 10px; }
/* Die Höhe muss hier stehen, nicht nur als Attribut am Element: wellenform.js
   setzt canvas.height auf Pixel mal Bildschirmdichte, und ohne CSS-Höhe wird
   genau das zur Layouthöhe — auf einem Retina-Schirm also das Doppelte. */
.wave { width: 100%; height: 150px; display: block; }
#probe-wave { height: 110px; }

/* Länge und Versatz sitzen rechts außen: die Länge schiebt sich mit
   margin-left:auto dorthin, der Versatz hängt sich direkt daneben. */
.wave-laenge { margin-left: auto; font-size: 12px; color: var(--muted); }
.wave-versatz {
  margin-left: auto; font-weight: 800; padding: 3px 11px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.wave-versatz.gut     { color: #052018; background: var(--good); }
.wave-versatz.daneben { color: #2a1500; background: var(--gold); }
.wave-versatz.unklar  { color: var(--muted); background: rgba(255, 255, 255, .06); font-weight: 600; }

/* ---------------------------------------------------------------- Aufnahme */

.rec-controls { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rec-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.klapp { width: min(440px, 100%); border-radius: var(--r); }
.klapp > summary {
  cursor: pointer; padding: 11px 15px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
  list-style: none;
}
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary::before { content: "▸ "; color: var(--pink); }
.klapp[open] > summary::before { content: "▾ "; }
.klapp-inhalt {
  display: flex; flex-direction: column; gap: 13px;
  padding: 4px 15px 15px; border-top: 1px solid var(--stroke);
}
.klapp-inhalt .field { margin-bottom: 0; }

.regler { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.regler b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }

.pegel {
  height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--stroke);
}
.pegel-balken {
  height: 100%; width: 0%;
  background: var(--green);
  transition: width .05s linear;
}
/* Rot heißt: es schlägt oben an und wird beim Aufnehmen verzerrt. */
.pegel-balken.zuviel { background: var(--red); }

.hinweis { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.hinweis.fehler { color: var(--red); }
.hinweis.gut { color: var(--green); }

/* ---------------------------------------------------------------- Hörproben */

.proben { width: min(560px, 100%); }
.proben h3, .meine-liste-wrap h3, .film-links h3 {
  margin: 0 0 9px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
}
.proben-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.probe {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  padding: 8px 14px; border-radius: 99px; color: var(--text);
  transition: transform .16s, border-color .16s;
}
.probe:hover { border-color: var(--cyan); transform: translateY(-1px); }
.probe.jetzt { border-color: var(--cyan); background: rgba(34, 230, 255, .12); }
.probe-figur { font-weight: 700; font-size: 14px; }
.probe-hinweis { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------- eigene Zeilenliste */

.meine-liste-wrap { width: min(640px, 100%); }
.meine-liste { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; }
.zeile {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 8px 12px; font: inherit; font-size: 13px; color: var(--muted);
  border-radius: var(--r);
}
.zeile:hover { border-color: var(--pink); }
.zeile.jetzt { border-color: var(--pink); background: rgba(255, 45, 120, .12); color: var(--text); }
.zeile.fertig .zeile-nr {
  background: rgba(43, 224, 138, .18); border-color: rgba(43, 224, 138, .4); color: var(--green);
}
.zeile-nr {
  flex: none; min-width: 28px; text-align: center; border-radius: var(--r);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stroke);
  font-size: 12px; font-weight: 700; padding: 2px 0; font-variant-numeric: tabular-nums;
}
.zeile-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.film-bereich {
  display: flex; flex-direction: column; gap: 11px; align-items: center;
  width: min(600px, 100%); margin: 0 auto;
}
.fortschritt {
  width: 100%; height: 9px; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--stroke);
}
.fortschritt-balken {
  height: 100%; width: 0%;
  background: var(--pink);
  transition: width .3s linear;
}

.film-links { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.film-zeile { display: flex; gap: 8px; align-items: stretch; }
.film-zeile .film-link { flex: 1; min-width: 0; }
.film-zeile .btn { white-space: nowrap; }
.film-link {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 9px 13px; border-radius: var(--r); color: var(--text);
  transition: border-color .16s;
}
.film-link:hover { border-color: var(--gold); }
.film-link span { font-size: 13px; font-weight: 600; }
.film-link code { font-size: 11px; color: var(--muted); background: none; padding: 0; }

/* ---------------------------------------------------------------- Abstimmung */

.vote-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vote { min-width: 140px; }
.vote.chosen {
  background: var(--pink); color: #1a0510;
  border-color: transparent; box-shadow: 0 8px 26px rgba(255, 45, 120, .4);
}
.vote.chosen::before { color: #1a0510; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.results li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 19px; border-radius: var(--r); font-size: 17px; font-weight: 600;
}
.results li:first-child {
  border-color: var(--gold);
  background: rgba(255, 200, 61, .1);
  box-shadow: 0 8px 30px rgba(255, 200, 61, .18);
}
.results strong { color: var(--gold); font-size: 24px; font-variant-numeric: tabular-nums; }

/* Wird auf Feldern benutzt, die außerhalb von .field stehen (Packsuche). */
.input {
  font: inherit; color: var(--text);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 10px 12px; outline: none; width: 100%;
}

/* ---------------------------------------------------------------- Drehbuch */

.drehbuch-leiste { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.drehbuch-leiste .input { width: auto; min-width: 220px; }

.drehbuch-liste { display: flex; flex-direction: column; gap: 8px; }

.db-zeile {
  display: flex; gap: 12px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r);
}
/* Die eigenen Zeilen heben sich ab -- in einer Liste von dreißig sucht man
   sonst jedes Mal, was einen selbst angeht. */
.db-zeile.meine { border-color: rgba(255, 45, 120, .45); background: rgba(255, 45, 120, .06); }

.db-bild {
  width: 108px; height: 68px; object-fit: cover; border-radius: var(--r); flex: none;
  background: #000;
}
.db-bild.leer { background: rgba(0, 0, 0, .4); border: 1px solid var(--stroke); }

.db-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.db-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-figur {
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .35);
  color: var(--gold);
}
.db-wer { font-size: 11.5px; color: var(--muted); }

/* Die Längenanzeige ist der Grund, warum das Schreiben funktioniert: sie sagt
   auf den Zeichen genau, was in die Cliplänge passt. */
.db-laenge {
  margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--muted); padding: 2px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
}
.db-laenge.gut    { color: var(--green); border-color: rgba(43, 224, 138, .4); background: rgba(43, 224, 138, .12); }
.db-laenge.knapp  { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.db-laenge.zuviel { color: var(--red);   border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

.db-feld {
  font: inherit; font-size: 14px; line-height: 1.4;
  color: var(--text); background: rgba(0, 0, 0, .35);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 8px 11px; width: 100%; resize: vertical; outline: none;
}
.db-feld:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 45, 120, .16); }
.db-feld::placeholder { color: #5c566e; font-style: italic; }

/* Die Vorlage bleibt sichtbar, aber klein: man spricht auf dieselben Lippen. */
.db-original {
  font-size: 11.5px; color: var(--muted); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 640px) {
  .db-bild { width: 76px; height: 48px; }
}

/* Der Fußbalken der Schreibphase trägt vier Knöpfe. Damit er die letzte Zeile
   der Tabelle nicht verdeckt, bekommt diese Ansicht mehr Luft nach unten. */
#view-drehbuch { padding-bottom: 130px; }
/* Auf einem breiten Bildschirm stand die Aufnahme in einer schmalen Spalte
   mit viel Rand daneben. Hier arbeitet man -- Bild, Kurve und Zeilenliste
   duerfen den Platz haben. Die lesenden Ansichten (Beitreten, Lobby, Ergebnis)
   bleiben schmal: eine Textzeile ueber die ganze Breite liest sich schlecht. */
#view-recording, #view-screening, #view-lobby, #view-join, #view-casting {
  /* Grosszuegig, aber nicht grenzenlos: auf einem sehr breiten Schirm wird
     sonst alles zu einem flachen Band gezogen. --vpad-x steuert hier zugleich
     die Innenpolsterung UND den Ausschlag der Titelleiste (siehe .view). */
  --vpad-x: max(20px, 2vw);
  max-width: 2400px;
}

/* ------------------------------------------------ Alles auf eine Seite
   Beim Sprechen darf man nicht scrollen muessen -- die Knoepfe, die Kurve und
   das Bild gehoeren gleichzeitig sichtbar. Statt fester vh-Werte bekommt die
   Aufnahme deshalb die Bildschirmhoehe als Rahmen und teilt sie auf: Zeile,
   Kurve, Wertung und Knoepfe nehmen sich, was sie brauchen, und das Video
   bekommt den Rest. Es schrumpft mit, wenn der Text lang ist oder die Wertung
   dazukommt.

   Nur auf dem Rechner: ab 900 px Breite (darunter stapeln sich die Spalten,
   und dann ist Scrollen richtig) und ab 620 px Hoehe -- in einem flacheren
   Fenster waere das Bild sonst briefmarkengross. */
@media (min-width: 900px) and (min-height: 620px) {
  #view-recording {
    min-height: 100dvh;
    padding-bottom: 16px;
    justify-content: flex-start;
  }
  #view-recording .rec-layout {
    /* height:0 zusammen mit flex-grow ist der Kniff: ohne das nimmt der
       Container seine Inhaltshoehe als Untergrenze und waechst ueber den
       Bildschirm hinaus, egal was man ihm deckelt. So bekommt er genau den
       Platz, der uebrig ist -- nicht mehr. */
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    /* Ohne feste Zeilenhoehe richtet sich das Raster nach seinem Inhalt, und
       der Inhalt richtet sich nach der Zeile -- ein Kreis, aus dem nichts
       schrumpft. minmax(0,1fr) bricht ihn auf. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  #view-recording .rec-haupt {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  /* Die rechte Spalte darf die linke nicht in die Hoehe treiben: wird die
     Zeilenliste lang, scrollt sie in sich selbst. */
  #view-recording .rec-seite {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    position: static;
  }
  #view-recording .meine-liste { max-height: none; }
  /* Enger stapeln: 18 px Abstand viermal sind 72 px, und die fehlen genau
     dort, wo das Bild sie braucht. */
  #view-recording .rec-haupt { gap: 10px; }

  /* Der Bildrahmen gibt nach -- aber nur bis hierher. Ohne Untergrenze
     schrumpfte er bei einer langen Zeile auf 137x77 Pixel: die Seite passte,
     das Bild war aber nicht mehr zu gebrauchen. Wenn es eng wird, scrollt
     lieber der Text (der steht auch daneben in der Zeilenliste) als dass das
     Bild verschwindet -- man spricht schliesslich auf das Bild. */
  #view-recording .clip-frame {
    flex: 1 1 auto;
    min-height: clamp(170px, 27vh, 260px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #view-recording .clip-frame video,
  #view-recording .clip-frame img {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  /* Die Zeile darf nicht die halbe Seite fressen. Lange Zeilen werden
     kleiner gesetzt, statt das Bild wegzudruecken. */
  #view-recording .clip-line { flex: 0 0 auto; max-width: 70ch; }
  #view-recording .zeile-de {
    font-size: clamp(15px, 1.9vh, 21px);
    max-height: 14vh;
    overflow-y: auto;
  }
  #view-recording .zeile-en { font-size: clamp(11px, 1.2vh, 13px); }
  /* Kurve und Knoepfe geben ihre Hoehe nicht her, aber die Kurve darf
     flacher werden, wenn es eng wird. */
  #view-recording .wave-wrap, #view-recording #rec-score,
  #view-recording .rec-controls { flex: 0 0 auto; }
  #view-recording .wave { height: clamp(70px, 14vh, 150px); }
}

/* Auf niedrigen Bildschirmen rueckt die Wertung zusammen. Dieselben drei
   Zahlen, nur ohne die Luft dazwischen -- die braucht das Bild dringender. */
@media (min-width: 900px) and (max-height: 900px) {
  #view-recording .score { padding: 9px 12px; margin: 0; }
  #view-recording .score-kopf { margin-bottom: 5px; }
  #view-recording .score-zeile { margin-top: 3px; }
  #view-recording .score-gesamt { font-size: 1.45em; }
  #view-recording .score-bahn { height: 6px; }
}

/* Der Rahmen legt sich jetzt ums Bild statt umgekehrt. Ihn auf die volle
   Breite zu ziehen half nichts: die schwarzen Balken links und rechts stecken
   im aufbereiteten Video selbst, die waeren einfach mitgewachsen. Also darf
   das Bild etwas groesser werden als vorher, der Kasten hoert dort auf, wo das
   Bild aufhoert -- und die gewonnene Breite geht an Kurve und Zeilenliste,
   wo mehr Platz auch mehr zeigt. */
#view-recording .clip-frame {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#view-recording .clip-frame video,
#view-recording .clip-frame img {
  max-height: 48vh;
  width: auto;
  max-width: 100%;
}

/* Eine Zahl von 0 bis 100 braucht keinen anderthalb Meter langen Balken. */
.score { max-width: 720px; }
/* Die rechte Spalte darf mitwachsen, aber nicht davonlaufen. */
@media (min-width: 1500px) {
  .rec-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* In der Lobby steht links die Aufnahmeart und rechts die Packliste. Rechts
   ist mehr los, also bekommt die Seite dort auch mehr Platz -- und die Liste
   selbst darf hoeher werden, statt fuenf Packs durch einen Sehschlitz zu
   zeigen, waehrend daneben die halbe Seite leer ist. */
@media (min-width: 1100px) {
  #view-lobby .columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; }
  #view-lobby .pack-list { max-height: 60vh; }
}
@media (min-width: 1600px) {
  #view-lobby .pack-list { max-height: 66vh; }
}
#view-drehbuch .bar-bottom { gap: 8px; }

/* ---------------------------------------------------------------- Rückkehr */

.rueckkehr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 4px; padding: 12px 14px; border-radius: var(--r);
  background: rgba(43, 224, 138, .1);
  border: 1px solid rgba(43, 224, 138, .4);
}
.rueckkehr > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.rueckkehr b { font-size: 14px; }
.rueckkehr span { font-size: 11.5px; color: var(--muted); }
.rueckkehr #rueckkehr-code { font-family: var(--mono); color: var(--gold); }

/* ---------------------------------------------------------------- Pause */

.pause-schirm {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(7, 5, 13, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pause-karte {
  width: min(420px, 100%); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.pause-karte h2 {
  margin: 0; font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -.01em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 200, 61, .5), 0 0 3px rgba(255, 200, 61, .75);
}
.pause-karte p { margin: 0; }
.pause-dauer { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- Stimmprobe */

.probe-leute { width: min(480px, 100%); margin: 0 auto; }
/* Wer gerade zu hören ist, hebt sich hervor -- sonst weiß man bei vier
   ähnlichen Stimmen nicht, wem man gerade zuhört. */
.probe-leute li.spricht {
  border-color: var(--gold);
  background: rgba(255, 200, 61, .12);
  box-shadow: 0 0 26px rgba(255, 200, 61, .2);
}

/* Das Urteil steht klein und beiläufig neben dem Namen. Es ist ein Nebenprodukt
   der Stimmprobe, keine Warnung — deshalb kein Ausrufezeichen und kein Rot,
   außer es ist wirklich nichts angekommen. */
.urteil {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  color: var(--muted); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke); white-space: nowrap;
}
.urteil.gut   { color: var(--green); border-color: rgba(43, 224, 138, .4); background: rgba(43, 224, 138, .12); }
.urteil.leise { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.laut  { color: var(--gold);  border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.still { color: var(--red);   border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

#view-stimmprobe .clip-frame img { max-height: 30vh; }

/* Auch hier trägt der Fußbalken zwei Knöpfe und würde sonst die Namensliste
   verdecken. */
#view-stimmprobe { padding-bottom: 120px; }

/* Die Bestätigungstaste der Aufnahme steht allein und trägt entsprechend auf.
   Der Abstand nach oben und unten ist Absicht: daneben soll nichts liegen,
   was man aus Versehen mittrifft. */
.btn-gross {
  padding: 16px 34px; font-size: 17px; border-radius: var(--r);
  margin: 6px 0 4px; min-width: 220px;
}

/* Blind-Modus: statt der Zeile ein Hinweis, damit die Fläche nicht leer wirkt
   und niemand denkt, das Pack habe keinen Text. */
.verdeckt {
  font-size: 15px; color: var(--muted); font-style: italic;
  padding: 8px 16px; border-radius: var(--r);
  background: rgba(255, 255, 255, .04); border: 1px dashed var(--stroke);
}

/* ------------------------------------------------- Aufnahme in zwei Spalten */

/* Links das, worauf man beim Sprechen schaut, rechts das Beiwerk. Untereinander
   wurde die Spalte so lang, dass man zwischen dem Aufnahmeknopf und „Deine
   Stimmen bisher" ständig gescrollt hat. */
.rec-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.rec-haupt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rec-seite {
  display: flex; flex-direction: column; gap: 14px;
  /* Mitlaufen lassen: bei einer langen Zeilenliste soll das Mikrofon oben
     erreichbar bleiben. */
  position: sticky; top: 18px;
}
.rec-seite .klapp,
.rec-seite .proben,
.rec-seite .meine-liste-wrap { width: 100%; }

/* Schmale Schirme: wieder untereinander, Beiwerk nach unten. */
@media (max-width: 860px) {
  .rec-layout { grid-template-columns: 1fr; }
  .rec-seite { position: static; }
}

/* ---------------------------------------------------------------- Regie */

/* Die eigene Anweisung steht über der Zeile und darf auffallen: beim Sprechen
   ist sie wichtiger als der Text. Gold, damit sie sich von allem abhebt, was
   zum Clip gehört. */
.regie-band {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--r);
  background: rgba(255, 200, 61, .1);
  border: 1px solid rgba(255, 200, 61, .45);
  font-size: 17px; font-weight: 600;
}
.regie-marke {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: #2a1500; background: var(--gold);
  padding: 3px 9px; border-radius: 99px; flex: none;
}

.regie-raten { display: flex; flex-direction: column; gap: 10px; }
.regie-zeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--stroke);
}
.regie-zeile strong { min-width: 120px; font-size: 15px; }
.regie-zeile select { flex: 1; min-width: 220px; }

/* Die Auflösung im Ergebnis, klein unter dem Namen. */
.regie-war {
  display: block; font-size: 11.5px; color: var(--gold);
  font-weight: 600; margin-top: 2px;
}
.results li span { display: flex; flex-direction: column; }

/* Geheimauftrag: getippt wird eine Person, nicht eine Anweisung. */
.regie-taeter { display: flex; flex-wrap: wrap; gap: 10px; }
.taeter { min-width: 140px; }
.taeter.chosen {
  background: var(--pink); color: #1a0510;
  border-color: transparent; box-shadow: 0 8px 26px rgba(255, 45, 120, .4);
}
.taeter.chosen::before { color: #1a0510; }

/* ---------------------------------------------------------------- Duell */

.duell-fassungen {
  display: flex; flex-direction: column; gap: 10px;
  width: min(560px, 100%); margin: 0 auto;
}
.duell-fassung {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--stroke);
}
.duell-fassung.gewaehlt { border-color: var(--pink); background: rgba(255, 45, 120, .1); }
.duell-fassung strong { flex: 1; min-width: 80px; }
.duell-nr {
  flex: none; width: 28px; height: 28px; border-radius: var(--r);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: rgba(255, 200, 61, .14); border: 1px solid rgba(255, 200, 61, .35);
  color: var(--gold);
}
/* Die Stimmenzahl erscheint erst, wenn man selbst gewählt hat — vorher wäre
   sie eine Empfehlung. */
.duell-zahl {
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold);
  min-width: 20px; text-align: right;
}

/* Die Schranke vor den Sammlungen. Sichtbar genug, dass man weiß, dass da noch
   etwas liegt — unaufdringlich genug, dass sie niemanden aufhält, der sie
   nicht braucht. */
.schranke {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r);
  background: rgba(255, 200, 61, .08);
  border: 1px solid rgba(255, 200, 61, .32);
}
.schranke > div { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 130px; }
.schranke b { font-size: 13px; color: var(--gold); }
.schranke span { font-size: 11.5px; color: var(--muted); }
.schranke input { width: auto; flex: 1; min-width: 110px; padding: 8px 11px; border-radius: var(--r); }

/* Rauswerfen: klein und unauffällig neben dem Namen, rot erst beim Berühren.
   Ein Kreuz, das ständig rot leuchtet, sieht aus wie eine Warnung. */
.raus {
  flex: none; width: 24px; height: 24px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1;
  background: rgba(255, 255, 255, .05); color: var(--muted);
  border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s;
}
.raus:hover { background: rgba(255, 77, 94, .18); color: var(--red); border-color: rgba(255, 77, 94, .45); }

/* ---------------------------------------------------- Reinhören vor der Wahl */

.pack-reihe { display: flex; gap: 6px; align-items: stretch; }
.pack-reihe .pack { flex: 1; min-width: 0; }
.reinhoeren {
  flex: none; width: 40px; cursor: pointer; font: inherit; font-size: 13px;
  border-radius: var(--r); color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s;
}
.reinhoeren:hover { border-color: var(--cyan); color: var(--cyan); }
.reinhoeren.laeuft {
  border-color: var(--cyan); color: #04121a;
  background: var(--cyan);
}

/* Hinweis, wen der Lautstärke-Ausgleich beim Rendern bewegt hat. Steht unter
   dem Fortschrittsbalken und auf der Ergebnisseite. */
.film-ausgleich {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #b9b2c8);
}

/* Wer in der Tonprobe hörbar leiser ist als die Runde. Rot, wenn er im Video
   untergehen würde, sonst gelb wie die anderen Warnungen. */
.urteil.abstand-leicht { color: var(--gold); border-color: rgba(255, 200, 61, .4); background: rgba(255, 200, 61, .12); }
.urteil.abstand-schwer { color: var(--red);  border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .14); }

/* Der Warnkasten unter der Tonprobe. Hiess frueher .probe-hinweis -- und das
   war schon vergeben, fuer das kleine "anhoeren" an der Stimmen-Kachel. Die
   spaetere Regel gewann, und aus einem 12px-Wort wurde ein Kasten mit Rahmen. */
.tonprobe-warnung {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 200, 61, .08);
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text, #ece7f5);
}

/* ------------------------------------------------------------------ Maulwurf
   Das Band über der Aufnahme: für alle die Anweisung, für den Maulwurf die
   drei Köder. Rot, damit er beim Hinsehen sofort weiß, dass er dran ist. */
.lobby-spiele { display: flex; gap: 8px; flex-wrap: wrap; }

.maulwurf-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  line-height: 1.5;
}
.maulwurf-band em { color: var(--accent); font-style: normal; font-weight: 600; }
.maulwurf-marke {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.maulwurf-band.ich-bins {
  border-color: rgba(255, 77, 94, .45);
  background: rgba(255, 77, 94, .1);
}
.maulwurf-band.ich-bins .maulwurf-marke { color: var(--red); }
.maulwurf-band.ich-bins em { color: var(--gold); }

.maulwurf-raten { margin: 0 0 16px; }

.maulwurf-aufloesung { margin: 0 0 16px; }
.aufl-zeile { margin: 0 0 8px; line-height: 1.5; }
.aufl-zeile em { color: var(--accent); font-style: normal; font-weight: 600; }
.aufl-treffer {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--green);
  border: 1px solid rgba(43, 224, 138, .4);
  background: rgba(43, 224, 138, .12);
}
.aufl-stimmen { list-style: none; margin: 14px 0 0; padding: 0; }
.aufl-stimmen li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.aufl-stimmen li.ist-maulwurf {
  border-color: rgba(255, 77, 94, .45);
  background: rgba(255, 77, 94, .1);
}
.aufl-stimmen .aufl-zahl { margin-left: auto; color: var(--muted); font-size: .9rem; }
/* Punktestand ganz rechts, in fester Breite -- sonst wandert er je nach
   Laenge der Stimmenzahl hin und her. */
.aufl-stimmen .aufl-punkte { min-width: 2ch; text-align: right; color: var(--accent); }
.aufl-stimmen .aufl-marke {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  color: var(--red);
  border: 1px solid rgba(255, 77, 94, .45);
}

/* Casting-Show: der Gecastete wird anders markiert als der, der die Rolle
   wirklich hatte -- sonst liest man in der Auflösung nicht, was schiefging. */
.aufl-stimmen .aufl-marke.gecastet {
  color: var(--violet);
  border-color: rgba(168, 85, 247, .5);
  background: rgba(168, 85, 247, .12);
}

/* ------------------------------------------------------------- Der Prozess
   Die Besetzung steht immer oben — ein Gerichtssaal lebt davon, dass alle
   wissen, wer wer ist. */
.pz-rollen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pz-rolle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.pz-rolle.ich { border-color: rgba(255, 200, 61, .45); background: rgba(255, 200, 61, .1); }
.pz-rolle-was {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pz-inhalt { margin: 0 0 16px; }
.pz-block { margin: 0 0 18px; }
.pz-block h3 {
  margin: 0 0 8px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pz-zahl { color: var(--accent); letter-spacing: 0; text-transform: none; }

.pz-beweise { list-style: none; margin: 0; padding: 0; }
.pz-beweise li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.pz-beweise li.drin,
.pz-beweise li.gewaehlt { border-color: rgba(255, 200, 61, .45); background: rgba(255, 200, 61, .09); }
.pz-beweise li.spielt { border-color: var(--hot); background: rgba(255, 45, 120, .14); }
.pz-beweise li.gegenbeweis { border-style: dashed; }
.pz-beweise .pz-zeile { flex: 1 1 auto; line-height: 1.4; }
.pz-beweise .pz-zeile em { color: var(--accent); font-style: normal; font-weight: 600; }
.pz-beweise .pz-nr {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pz-aufnahme { margin: 0 0 16px; }

/* Packs nach Spielerzahl gruppiert. Bei dreißig Packs sagt eine Überschrift
   mehr als eine Reihenfolge. */
.pack-gruppe { margin: 0 0 18px; }
.pack-gruppe:last-child { margin-bottom: 0; }
.pack-gruppe-titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
}
.pack-gruppe-was {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: .8rem;
  opacity: .75;
}
.pack-gruppe-passt {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--green);
  border: 1px solid rgba(43, 224, 138, .4);
  background: rgba(43, 224, 138, .12);
}

/* Steht über der Figurenliste, sobald nur ein Abschnitt gespielt wird — sonst
   liest man die Zahlen als die des ganzen Packs. */
.pack-chars-marke {
  margin: 0 0 2px;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Der Löschknopf. Gedämpft, solange er nur fragt — rot erst, wenn der nächste
   Druck wirklich löscht. */
.btn.btn-warn {
  border-color: rgba(255, 77, 94, .35);
  color: var(--red);
}
.btn.btn-warn:hover:not(:disabled) { border-color: rgba(255, 77, 94, .6); }
.btn.btn-warn.scharf {
  background: rgba(255, 77, 94, .16);
  border-color: var(--red);
  color: var(--text);
  font-weight: 700;
}
.klapp-trenner {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0 12px;
}
.hinweis.gut { color: var(--green); }
.hinweis.fehler { color: var(--red); }

/* Der zweite Download-Knopf steht neben dem ersten, aber leiser: die Fassung
   mit Korrektur ist der Normalfall, die rohe dient dem Vergleich. */
.btn-neben {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .92em;
}
.btn-neben:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------- Match-Score
   Drei Balken nach jedem Take. Farben aus der bestehenden Palette: Grün für
   gut, Gold für mittel, Pink für schwach -- dieselben, die auch sonst für
   „passt / geht so / daneben" stehen. */
.score {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}
.score-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.score-titel {
  font-size: .8em;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.score-gesamt {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-gesamt.gut     { color: var(--green); }
.score-gesamt.mittel  { color: var(--gold); }
.score-gesamt.schwach { color: var(--pink); }

.score-zeile {
  display: grid;
  grid-template-columns: 5.5em 1fr 2.4em;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.score-name { font-size: .85em; color: var(--muted); }
.score-bahn {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.score-bahn i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .35s ease;
}
.score-bahn i.gut     { background: var(--green); }
.score-bahn i.mittel  { background: var(--gold); }
.score-bahn i.schwach { background: var(--pink); }
.score-wert {
  font-size: .85em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Countdown neben den Aufnahmeknöpfen. Ruhig, bis es knapp wird. */
.countdown {
  align-self: center;
  font-variant-numeric: tabular-nums;
  font-size: .95em;
  color: var(--muted);
  min-width: 6em;
}
.countdown.knapp   { color: var(--gold); font-weight: 600; }
.countdown.auslauf { color: var(--pink); }

/* Die Punktzahl in der Zeilenliste. */
.zeile-note {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: .78em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zeile-note.gut     { background: rgba(43, 224, 138, .16); color: var(--green); }
.zeile-note.mittel  { background: rgba(255, 200, 61, .16); color: var(--gold); }
.zeile-note.schwach { background: rgba(255, 45, 120, .16); color: var(--pink); }
.zeile-note.leer    { color: var(--muted); background: none; }

/* Der Reihe nach lässt sich nicht springen -- dann soll die Zeile auch nicht
   wie ein Knopf aussehen. */
.meine-liste .zeile:disabled { cursor: default; opacity: 1; }

/* Tastenkürzel auf den Knöpfen: da, aber leise. */
kbd {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--stroke);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .78em;
  opacity: .6;
}

/* Die mitlaufende Wort-Hervorhebung stand hier und ist entfernt -- siehe die
   Begründung in app.js. Kurz: die Zeiten je Wort waren geschätzt und lagen
   sichtbar daneben. */

/* ------------------------------------------------------- Startbildschirm
   Zwei Karten gleicher Höhe, die Handlung jeweils unten. Der frühere Aufbau
   waren zwei Spalten an einer Haarlinie: die linke endete früh und liess ein
   Loch darunter, und weil alle Kästen dasselbe Gewicht hatten, sagte einem
   nichts, wo man anfangen soll. */

#view-join { max-width: 1180px; }

/* Das Fenster drumherum: eine Titelleiste macht aus einer Karte einen
   Bildschirm, den man ausfüllt, statt ein Formular, das in der Mitte
   schwebt und den Rest der Seite leer lässt. */
.term-fenster {
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.term-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  background: var(--panel-2);
}
.term-punkte { display: flex; gap: 6px; flex: none; }
.term-punkte i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--stroke-2);
}
.term-punkte i:nth-child(1) { background: var(--red); opacity: .75; }
.term-punkte i:nth-child(2) { background: var(--gold); opacity: .75; }
.term-punkte i:nth-child(3) { background: var(--green); opacity: .75; }
.term-titel {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}
.term-blink {
  display: inline-block;
  width: .55em; height: 1em;
  margin-left: 2px;
  background: var(--pink);
  vertical-align: -.15em;
  animation: cursor-blink 1s step-end infinite;
}
.term-inhalt {
  padding: 28px clamp(20px, 4vw, 48px) 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .term-blink { animation: none; }
}

.start-kopf { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.start-kopf .tagline { margin: 0; }
.start-kopf .konto-leiste { width: 100%; margin: 6px 0 0; }

.feld-name { margin: 0; }

.start-karten {
  display: grid;
  gap: 14px;
  /* Bewusst NICHT stretch: die eröffnende Karte hat weniger zu sagen, und auf
     gleiche Höhe gezwungen klaffte darin ein Loch von 200 Pixeln. Zwei Karten
     unterschiedlicher Länge lesen sich als „kurz und schnell" gegen „hier gibt
     es mehr zu wählen" – das ist ehrlicher als Füllmaterial. */
  align-items: start;
}
@media (min-width: 820px) {
  .start-karten { grid-template-columns: 1fr 1fr; }
}

.start-karte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--stroke);
}
/* Die eröffnende Karte ist der Hauptweg und darf das zeigen – aber leise,
   über den Rand, nicht über eine zweite Leuchtfarbe. */
.start-karte-los { border-color: rgba(255, 45, 120, .35); }

.start-karte-kopf { display: flex; flex-direction: column; gap: 4px; }
.start-karte-kopf h2 {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
}
.start-karte-kopf p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.start-tat { margin-top: 4px; }

/* Der Kopf trägt die Überschrift und rechts das Neuladen – als eigener Knopf
   darunter stand er wie ein zweiter Handlungsvorschlag im Weg. */
.start-karte-kopf-reihe {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.start-karte-kopf-reihe .start-karte-kopf { flex: 1; }

.start-raeume { display: flex; flex-direction: column; gap: 8px; }
.start-raeume .raum-liste:empty { display: none; }

/* Der Link zur Kontenverwaltung -- klein und beiläufig, wie es einem Admin-
   Werkzeug zusteht, das die allermeisten Besucher nie zu sehen bekommen. */
.admin-link {
  display: inline-block; margin-top: 6px;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.admin-link:hover { color: var(--pink); }

/* --------------------------------------------------------------- Anmeldung
   Eine Zeile unter dem Titelblock. Bei Anmeldepflicht bekommt sie den Akzent,
   sonst bleibt sie ruhig — sie ist dann ein Angebot, keine Schranke. */
.konto-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 9px 13px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--panel);
  font-size: 13px;
}
.konto-leiste.pflicht { border-color: var(--accent); }
.konto-hinweis { color: var(--muted); flex: 1; min-width: 12ch; }
.konto-bild {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: block;
  flex: none;
  object-fit: cover;
}
.konto-name { font-weight: 700; flex: 1; }
.konto-marke {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 2px 8px; border-radius: 99px; flex: none;
}
.konto-ab { text-decoration: none; flex: none; }

/* Das Zeichen neben dem Schriftzug. Größe hängt am Schriftgrad, damit beides
   zusammen wächst und schrumpft statt auseinanderzulaufen. */
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28em;
}
.wortmarke-zeichen {
  width: .95em; height: .95em; flex: none;
  /* Optischer Ausgleich: der Blasenschwanz zieht das Zeichen sonst nach unten. */
  margin-top: -.06em;
}
/* Der Name ist EIN Wort. Ohne diese Hülle behandelt das Flex-Layout „Dub" und
   „Stage" als zwei Kästchen und setzt den Abstand des Zeichens auch dazwischen
   – aus DubStage wird „Dub Stage". */
.wortmarke-text { display: inline; }

/* ------------------------------------------------------------ Anmeldeseite
   Was ein Fremder sieht, der die Adresse zum ersten Mal öffnet. Deshalb steht
   hier auch, worum es geht — der Knopf allein wäre eine Zumutung. */
.anmelde-karte { text-align: center; }
.anmelde-karte .wordmark { text-align: center; }
.anmelde-text {
  margin: 18px auto 24px; max-width: 42ch;
  color: var(--text); line-height: 1.65;
}
.anmelde-karte .btn-gross { margin: 0 auto; display: block; text-decoration: none; }
.anmelde-klein {
  margin: 22px auto 0; max-width: 44ch;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

/* Konto ohne Discord — gleichwertig neben dem Discord-Knopf, nicht darunter
   versteckt. Wer Discord nicht will, hat dafür Gründe. */
.lokal-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lokal-knoepfe { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 480px) {
  .lokal-knoepfe { flex-direction: row; }
  .lokal-knoepfe .btn { flex: 1; }
}
#view-anmelden .divider { margin: 24px 0 18px; }

/* ------------------------------------------------------- Tastenkürzel
   Vier Zeilen, je eine Handlung und die Taste dazu. Der Knopf ist gleichzeitig
   die Anzeige und das Eingabefeld — antippen, Taste drücken, fertig. */
.tasten-liste { display: flex; flex-direction: column; gap: 7px; }
.tasten-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.taste-knopf { min-width: 92px; font-family: var(--mono); font-size: 12px; }
.taste-knopf.wartet { border-color: var(--accent); color: var(--accent); font-family: var(--font); }

/* Wie viele Räume heute noch gehen. Steht in der Kontoleiste, damit man es
   sieht, bevor man auf „Raum eröffnen" drückt — nicht erst danach. */
.konto-kontingent {
  font-size: 12px; color: var(--muted); white-space: nowrap; flex: none;
}
.konto-kontingent.leer { color: var(--gold); font-weight: 700; }

/* Kontenverwaltung. Eine Zeile je Konto, Name links, Stand und Knöpfe rechts. */
.konten-liste { display: flex; flex-direction: column; gap: 8px; }
.konto-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--stroke); border-radius: var(--r);
  font-size: 13px;
}
.konto-zeile-name { font-weight: 700; }
.konto-zeile-art { font-size: 11px; color: var(--muted); }
.konto-zeile-stand { margin-left: auto; color: var(--gold); font-weight: 700; white-space: nowrap; }
.konto-zeile-knoepfe { display: flex; gap: 6px; flex: none; }

/* ---------------------------------------------------------------------------
   Stelle melden. Ein Fenster über allem, weil es mitten im Spielen aufgerufen
   wird und danach sofort wieder weg sein muss.

   Die Karte nimmt --bg-2 und NICHT --panel: --panel ist ein Glaseffekt
   (rgba mit 4,5 % Weiß), gedacht als Auflage auf dem dunklen Grund. Als
   Hintergrund eines Fensters ist es durchsichtig -- beim ersten Versuch
   las man die Anmeldeseite durch den Dialog hindurch.
   --------------------------------------------------------------------------- */
.melde-huelle {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 5, 13, .8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.melde-huelle[hidden] { display: none; }
.melde-karte {
  width: min(30rem, 100%);
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--stroke-2); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem;
}
.melde-karte h3 { margin: 0; font-size: 1.15rem; }
.melde-hinweis { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.melde-zeile { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--muted); }
.melde-zeile em { font-style: normal; opacity: .7; }
.melde-feld {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--stroke); border-radius: var(--r);
  padding: .6rem .75rem; font: inherit; width: 100%; resize: vertical;
}
.melde-feld::placeholder { color: var(--muted); opacity: .7; }
.melde-feld:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.melde-zeit { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .06em; max-width: 7rem; }
.melde-stand { font-size: .82rem; color: var(--muted); min-height: 1.2em; }
.melde-knoepfe { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .2rem; }

/* ---------------------------------------------------------------------------
   Plätze an einem Gerät. Zwei Leute auf einem Sofa teilen sich ein Mikrofon
   und zählen trotzdem als zwei Mitspieler.
   --------------------------------------------------------------------------- */
.platz-kasten {
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .8rem .9rem; margin: 0 0 .9rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.platz-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: .88rem; color: var(--muted); }
.platz-wahl {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .35rem .6rem; font: inherit; font-size: .88rem;
}
.platz-namen { display: flex; flex-wrap: wrap; gap: .45rem; }
.platz-namen[hidden] { display: none; }
.platz-feld {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--stroke);
  border-radius: var(--r); padding: .4rem .6rem; font: inherit; font-size: .9rem; width: 9rem;
}
.platz-feld:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.platz-hinweis { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* Die Reiter, mit denen man am geteilten Gerät zwischen den Leuten umschaltet. */
.platz-reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.platz-reiter[hidden] { display: none; }
.platz-tab {
  background: var(--panel); color: var(--muted); border: 1px solid var(--stroke);
  border-radius: 999px; padding: .35rem .85rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.platz-tab:hover { background: var(--panel-2); }
.platz-tab.ist-dran {
  background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600;
}

/* Wer von den Leuten am Gerät jetzt sprechen muss. Steht über den Knöpfen,
   weil man dorthin greift. */
.platz-dran {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r); padding: .5rem .9rem; margin: 0 0 .7rem;
  font-size: .95rem; text-align: center;
}
.platz-dran[hidden] { display: none; }
.platz-dran strong { font-weight: 700; }

/* Lautstärke-Regler bei der Vorführung: Sprecher und Hintergrund. Kompaktere
   Fassung des normalen .regler -- zwei nebeneinander in einer schmalen Leiste
   statt untereinander in einer Formularspalte. */
.screen-mixer {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--stroke);
}
.regler-klein { flex: 1; min-width: 160px; max-width: 260px; }
.regler-klein span { display: flex; justify-content: space-between; gap: 8px; }

/* ---------------------------------------------------------------------------
   Profil & Freunde. Der Knopf liegt fest in der Ecke, unabhaengig von der
   jeweiligen .view -- deshalb position: fixed statt im normalen Fluss.
   --------------------------------------------------------------------------- */
.profil-knopf {
  position: fixed; top: 14px; right: 14px; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--stroke-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; overflow: hidden;
}
.profil-knopf:hover { border-color: var(--pink); }
.profil-knopf-bild { width: 100%; height: 100%; object-fit: cover; }
.profil-knopf-buchstabe { font-weight: 800; color: var(--pink); font-size: 15px; }

.profil-karte { width: min(26rem, 100%); max-height: 85vh; overflow-y: auto; }
.profil-kopf { display: flex; align-items: center; gap: 12px; }
.profil-kopf h3 { margin: 0; font-size: 1.1rem; }
.profil-bild { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.profil-statistik { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.profil-statistik span { color: var(--gold); font-weight: 700; }
.profil-schliessen { margin-left: auto; }

.profil-abschnitt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.profil-abschnitt h4 { margin: 0 0 6px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.profil-hinweis { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }

.profil-code-zeile { display: flex; gap: 8px; align-items: center; }
.profil-code {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: .12em;
  background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r);
  padding: 6px 12px; color: var(--gold); flex: 1;
}

.profil-liste { display: flex; flex-direction: column; gap: 6px; }
.profil-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel); border-radius: var(--r); padding: 6px 10px; font-size: .88rem;
}
.profil-zeile-knoepfe { display: flex; gap: 6px; flex: none; }
.profil-warten { color: var(--muted); font-size: .78rem; font-style: italic; }

/* Die Einladungsleiste -- kein Vollbild-Fenster wie das Profil, sondern ein
   schmaler Streifen: sie ploppt ungefragt auf und soll niemanden aus der
   laufenden Runde reissen. */
.einladung-leiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 56;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--pink); color: #1a0510;
  font-size: .92rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.einladung-leiste[hidden] { display: none; }
.einladung-leiste .btn { flex: none; }