/* Stile der Host-App. Bis September 2026 standen sie in zwei <style>-Bloecken
   direkt in index.html; seit der Aufteilung liegen sie hier. Die Reihenfolge
   ist unveraendert - der DDF-/PIH-Block stand im Original weiter unten und
   darf deshalb weiterhin zuletzt kommen. */

:root {
  color-scheme: dark;

  /* ── Design-Tokens ───────────────────────────────────────────────────────
     Die Marken- und Statusfarben standen vorher als Literale ueber die ganze
     Datei verteilt (Gold allein 53x als Hex plus 48x als rgba). Jede Farbe
     liegt zusaetzlich als RGB-Tripel vor, damit sie sich mit beliebiger
     Deckkraft weiterverwenden laesst: rgba(var(--gold-rgb), .3). */
  --gold-rgb: 255,210,63;
  --gold: rgb(var(--gold-rgb));
  --gold-deep: #F0B800;
  --gold-dark: #C6930A;
  --gold-pale: #FFE8A0;

  --red-rgb: 232,69,60;
  --red: rgb(var(--red-rgb));
  --red-deep: #C62828;

  --green-rgb: 34,197,94;
  --green: rgb(var(--green-rgb));

  --blue-rgb: 59,130,246;
  --blue: rgb(var(--blue-rgb));
  --blue-deep: #1D4ED8;

  --ink: #0b0e2c;

  /* -- Design-Richtung ------------------------------------------------------
     Alles, was eine Richtung aus designs/ austauschen kann. Die Werte hier
     sind das Studio-Blau, mit dem die Show bisher lief - wer kein Design
     waehlt, sieht genau das. js/theme.js setzt data-theme auf <html>, die
     Bloecke am Dateiende ueberschreiben dann nur diese Zeilen.
     Rot und Blau der Teams stehen bewusst NICHT hier: die bleiben in jeder
     Richtung gleich (BAUPLAN 4.4), sonst raet das Publikum, wer dran ist. */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-logo: 'Luckiest Guy', system-ui, sans-serif;
  --bg: #0b0e2c;
  --bg-size: auto;
  --bg-img:
    radial-gradient(ellipse 120% 80% at 50% 20%, rgba(30,50,140,.5) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(100,20,20,.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(20,40,120,.2) 0%, transparent 50%);
  --panel: #101538;
  --panel-hi: #141a46;
  --line: #2b3160;
  --fg: #fff;
  --fg-rgb: 255,255,255;   /* fuer halbtransparente Schrift, Linien, Flaechen */
  --fg-strong: #F0EDE2;
  --muted: #8c93bd;
  --pill-fg: #9aa0c8;
  --accent-line: #D9A62E;
  /* Akzent als SCHRIFT. Gold auf Creme ist unlesbar - helle Richtungen
     setzen hier eine dunklere Fassung, die dunklen lassen es beim Akzent. */
  --accent-text: var(--gold);
  --accent-text-rgb: var(--gold-rgb);
  --on-accent: #1a1200;   /* Schrift AUF der Akzentflaeche (Primaerknopf) */

  /* ── Bewegung ────────────────────────────────────────────────────────────
     Eine benannte Kurve je Zweck statt neun Kopien derselben Zahlenreihe.
     --ease-pop ueberschwingt leicht (Einblenden, Treffer), --ease-out laeuft
     sauber aus (Hover, Wechsel), --ease-in-out ist fuer Hin-und-Her-Pulse. */
  --ease-pop: cubic-bezier(.17,.67,.3,1.3);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .12s;
  --t-med: .25s;
  --t-slow: .5s;

  /* ── Spielbrett-Material ─────────────────────────────────────────────────
     Die Bretter (Feud-Tafel, Jeopardy-Felder, WWM- und WWDS-Antworten, die
     Demos in den Anleitungen) zeichneten in jeder Design-Richtung Studio-
     Blau. --blue taugt dafuer nicht: das ist Team Blau (BAUPLAN 4.4).
     Deshalb eigene Namen, die hier bewusst NICHT gesetzt sind. Jede Stelle
     liest var(--tile, <ihr alter Studio-Wert>) - ohne Richtung bleibt also
     alles wie es war, eine Richtung setzt einmal --tile und trifft alle
     Bretter. Gesetzt werden sie im Block "Material je Design-Richtung" am
     Dateiende.
       --brd-surface  Flaeche hinter der Feud-Tafel und der WWM-Frage
       --brd-frame    deren box-shadow (Rahmen), auch das Jeopardy-Raster
       --brd-well     Grund zwischen den Jeopardy-Feldern, hinter Bildern
       --brd-tex      Ebene UEBER --brd-surface (Korn, Raster, Papier)
       --brd-radius, --brd-fg, --brd-inner (Linie innen an der Feud-Tafel)
       --tile         verdecktes Feld / Antwortknopf      --tile-hover
       --tile-edge    dessen box-shadow                   --tile-tex (Ebene darueber)
       --tile-fg      Schrift darauf                      --tile-font
       --tile-num     Zahl/Buchstabe darauf (sonst Akzent) --tile-num-glow
       --tile-dim-fg  leise Schrift (Platznummer)         --tile-rule, --tile-bar
       --tile-head    Jeopardy-Kategorie (sonst --tile)   --tile-head-fg
       --tile-used    verbrauchtes Feld
       --tile-open    aufgedeckt / richtig  (+ -fg, -edge, -dim)
       --tile-pick    eingeloggt / aktuelle Stufe  (+ -fg)
       --tile-pts-bg, --tile-pts-rule   Punktekasten im Feud-Feld
       --tile-reveal  animation beim Aufdecken in Feud (sonst tileFlip)
       --tile-radius
     Falsch bleibt Rot - das ist eine Aussage, kein Material. */
}
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  color: var(--fg); overflow-x: hidden;
  background: var(--bg);
  background-image: var(--bg-img);
  background-size: var(--bg-size);
}

.logo {
  margin: 30px 0 10px; text-align: center; position: relative;
}
.logo svg { width: 360px; height: auto; overflow: visible; filter: drop-shadow(0 4px 30px rgba(255,200,0,.3)); }

/* Der Wartebildschirm gehoert dem Zuschauerfenster. Im Hauptfenster ist er
   immer aus - der Host hat dort seine Bedienung, und das Logo steht oben
   ohnehin schon. Das Popout hebt diese Regel auf (siehe openBoardPopout). */
#board-idle { display: none; }

.screen { display: none; width: 100%; max-width: 880px; padding: 16px; }
.screen.active {
  display: flex; flex-direction: column; align-items: center;
  /* Bewusst ohne fill-mode: backwards wuerde den Startzustand (Deckkraft 0)
     halten, falls die Animation nie anlaeuft - Browser drosseln Animationen in
     Hintergrundfenstern, und genau darauf laeuft diese App mit Beamer-Popout
     und GM-Fenster hinaus. Ohne fill-mode ist der Screen im Zweifel sichtbar. */
  animation: screenIn .42s var(--ease-out);
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.btn {
  padding: 12px 28px; border: none; border-radius: 8px;
  font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px;
  position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.985); }
/* Lichtreflex, der beim Hover einmal ueber den Primaerknopf wandert. */
.btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--on-accent);
  box-shadow: 0 4px 16px rgba(255,200,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(255,200,0,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-danger {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%); color: var(--fg);
  box-shadow: 0 4px 12px rgba(200,40,40,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-secondary {
  background: rgba(var(--fg-rgb),.08); color: rgba(var(--fg-rgb),.7);
  border: 1px solid rgba(var(--fg-rgb),.1); backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(var(--fg-rgb),.14); color: var(--fg); }
.btn-accent {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%); color: var(--fg);
  box-shadow: 0 4px 12px rgba(30,80,210,.3), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── SETUP ── */
#setup-screen { gap: 28px; margin-top: 10px; }
/* Laufendes Spiel fortsetzen (js/resume.js) - nur im Menue, nur mit Stand. */
.resume-banner { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px 16px;
  border-radius: 12px; border: 1.5px solid rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.08); }
.resume-banner:empty { display: none; }
.resume-text { font-size: .9rem; color: var(--fg); }
.team-setup { display: flex; gap: 16px; width: 100%; justify-content: center; flex-wrap: wrap; margin: 8px 0 16px; }
/* WWM aus dem Turnier: fuer welches Team spielt der Kandidat (js/wwm.js). */
.wwm-tour-teams { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: -4px 0 16px; }
.wwm-tour-teams:empty { display: none; }
.wwm-tour-teams .label { width: 100%; text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(var(--fg-rgb),.5); }
.team-card {
  flex: 1; min-width: 200px; max-width: 300px;
  border-radius: 16px; padding: 28px 24px; text-align: center;
  position: relative; overflow: hidden;
}
.team-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.03));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.team-card.red { background: linear-gradient(180deg, rgba(185,28,28,.4), rgba(120,15,15,.5)); }
.team-card.blue { background: linear-gradient(180deg, rgba(29,78,216,.4), rgba(15,40,140,.5)); }
.team-card.green { background: linear-gradient(180deg, rgba(22,163,74,.4), rgba(15,100,40,.5)); }
.team-card .label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 4px; color: rgba(var(--fg-rgb),.5); margin-bottom: 14px;
}
.team-card input {
  width: 100%; padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid rgba(var(--fg-rgb),.12);
  background: rgba(0,0,0,.3); color: var(--fg);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  text-align: center; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.team-card input:focus { border-color: rgba(var(--gold-rgb),.5); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.1); }
.team-card input::placeholder { color: rgba(var(--fg-rgb),.2); }
/* Turnierwertung DDF/PIH (Team-Summe oder bester Einzelspieler). */
.team-card .tour-mode-select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid rgba(var(--fg-rgb),.12);
  background: rgba(0,0,0,.3); color: var(--fg); font-family: inherit; font-size: .9rem; font-weight: 700; outline: none;
}
.team-toggle { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 10px; }
.team-toggle label { font-size: .8rem; color: rgba(var(--fg-rgb),.5); font-weight: 600; }
.team-toggle input[type=text] {
  padding: 9px 13px; border-radius: 9px;
  border: 1.5px solid rgba(var(--fg-rgb),.12);
  background: rgba(0,0,0,.3); color: var(--fg);
  font-family: inherit; font-size: .9rem; font-weight: 700;
  text-align: center; outline: none;
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.team-toggle input[type=text]:focus {
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .1);
}
.team-toggle input[type=text]::placeholder { color: rgba(var(--fg-rgb),.2); }
.team-toggle input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--green); cursor: pointer;
}
.setup-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

/* ── GAME ── */
#game-screen { gap: 14px; }
.scoreboard {
  display: flex; width: 100%; gap: 4px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.team-panel {
  flex: 1; text-align: center; padding: 16px 12px;
  position: relative; transition: padding .4s var(--ease-out);
}
.team-panel.red { background: linear-gradient(180deg, #991B1B, #7F1D1D); }
.team-panel.blue { background: linear-gradient(180deg, #1E40AF, #1E3A8A); }
.team-panel.green { background: linear-gradient(180deg, #166534, #14532D); }
.team-panel.active-team { padding: 20px 12px; }
.team-panel.active-team::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px;
  background: var(--gold); border-radius: 3px 3px 0 0;
  box-shadow: 0 0 12px rgba(var(--gold-rgb),.5);
}
.team-panel .t-name {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 3px; color: rgba(var(--fg-rgb),.6); margin-bottom: 4px;
}
.team-panel.active-team .t-name { color: var(--accent-text); }
.team-panel .t-score {
  font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--fg);
}
.team-panel.active-team .t-score { color: var(--accent-text); text-shadow: 0 0 20px rgba(var(--gold-rgb),.3); }

.round-bar {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; text-align: center; max-width: 100%;
  font-size: .75rem; color: rgba(var(--fg-rgb),.4);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.round-bar .pts { color: var(--accent-text); font-size: 1rem; }

/* ── BOARD ── */
.board {
  width: 100%;
  background: var(--brd-tex, none), var(--brd-surface, linear-gradient(180deg, #0F1B5C 0%, #091042 100%));
  border-radius: var(--brd-radius, 18px); padding: 20px; position: relative;
  box-shadow: var(--brd-frame,
    0 0 0 3px var(--gold-dark), 0 0 0 5px #0a0e30,
    0 0 0 7px rgba(198,147,10,.3), 0 12px 48px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05));
}
.board::before {
  content: ''; position: absolute; inset: 3px; border-radius: 15px;
  border: 1px solid var(--brd-inner, rgba(var(--gold-rgb),.08)); pointer-events: none;
}

/* Question hidden/revealed */
.q-text {
  text-align: center; font-size: 1.1rem; font-weight: 700;
  padding: 12px 16px 18px; color: rgba(var(--fg-rgb),.9); line-height: 1.5;
  cursor: pointer; border-radius: 10px; transition: background .2s;
  min-height: 52px; display: flex; align-items: center; justify-content: center;
}
.q-text.hidden-q {
  background: rgba(var(--fg-rgb),.04);
  border: 1.5px dashed rgba(var(--gold-rgb),.2);
}
.q-text.hidden-q::after {
  content: 'Klicken um Frage aufzudecken';
  font-size: .75rem; color: rgba(var(--accent-text-rgb),.4);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.q-text.hidden-q .q-inner { display: none; }
.q-text:not(.hidden-q) { cursor: default; }

.answers { display: flex; flex-direction: column; gap: 5px; }
/* Ab 5 Antworten zwei Spalten: linke Spalte immer bis 4 gefüllt (1-4),
   alles darüber nach rechts (5-8). Spaltenweise via grid-auto-flow:column;
   renderBoard() setzt inline repeat(4,1fr) als Zeilenraster. */
.answers.split {
  display: grid; grid-auto-flow: column;
  grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 5px;
}
/* Feldhoehe waechst mit dem Fenster bis 50 px (ab ~830 px Hoehe wie
   frueher) - im 1280x720-Popout ragte das Brett sonst unten heraus. */
.tile {
  display: flex; align-items: stretch;
  min-height: clamp(38px, 7vh - 8px, 50px); cursor: pointer;
  border-radius: var(--tile-radius, 8px); overflow: hidden; transition: transform .15s;
}
.tile:hover:not(.open) { transform: scale(1.015); }
.tile-inner {
  display: flex; align-items: stretch; width: 100%;
  border-radius: var(--tile-radius, 8px); overflow: hidden; position: relative;
  color: var(--tile-fg, inherit); font-family: var(--tile-font, inherit);
}
.tile:not(.open) .tile-inner {
  background: var(--tile-tex, none), var(--tile, linear-gradient(180deg, #1E3FAE 0%, #162E88 50%, #112370 100%));
  box-shadow: var(--tile-edge, inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.3));
}
.tile:not(.open):hover .tile-inner {
  background: var(--tile-tex, none), var(--tile-hover, linear-gradient(180deg, #2850C8 0%, #1E3FAE 50%, #162E88 100%));
}
.tile-num {
  width: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--tile-dim-fg, rgba(var(--fg-rgb),.35)); border-right: 1px solid var(--tile-rule, rgba(var(--fg-rgb),.06));
}
.tile:not(.open) .tile-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.tile:not(.open) .tile-center::after {
  content: ''; width: 40%; height: 8px;
  background: var(--tile-bar, rgba(var(--fg-rgb),.06)); border-radius: 4px;
}
.tile:not(.open) .tile-pts { display: none; }
.tile:not(.open) .tile-answer { display: none; }
.tile.missed .tile-inner {
  background: linear-gradient(180deg, #7f1d1d 0%, #5a1010 50%, #450a0a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.25);
}
.tile.open .tile-inner {
  background: var(--tile-tex, none), var(--tile-open, linear-gradient(180deg, #166534 0%, #14532D 50%, #0F4024 100%));
  box-shadow: var(--tile-open-edge, inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.25));
  color: var(--tile-open-fg, inherit);
  animation: var(--tile-reveal, tileFlip .6s cubic-bezier(.25,.46,.45,.94));
  transform-origin: center top;
}
.tile.open .tile-num { color: var(--tile-open-dim, rgba(var(--fg-rgb),.5)); }
.tile.open .tile-center { flex: 1; display: flex; align-items: center; padding: 0 16px; }
.tile.open .tile-answer { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.tile.open .tile-pts {
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px; min-width: 60px;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--tile-num, var(--accent-text));
  border-left: 2px solid var(--tile-pts-rule, rgba(var(--gold-rgb),.45));
  background: var(--tile-pts-bg, rgba(0,0,0,.22));
  box-shadow: inset 1px 0 0 rgba(0,0,0,.3);
  text-shadow: 0 0 8px rgba(var(--gold-rgb),.3);
}
@keyframes tileFlip {
  0% { transform: perspective(800px) rotateX(90deg); }
  60% { transform: perspective(800px) rotateX(-5deg); }
  80% { transform: perspective(800px) rotateX(3deg); }
  100% { transform: perspective(800px) rotateX(0deg); }
}

/* ── PER-TEAM STRIKES ── */
.team-strikes {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding: 6px 8px; border-radius: 999px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(var(--fg-rgb),.08);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.team-strikes.active-strikes {
  border-color: rgba(var(--gold-rgb),.25);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.12), 0 0 14px rgba(var(--gold-rgb),.12);
  transform: translateY(-1px);
}
.team-strikes .ts-label {
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(var(--fg-rgb),.3); margin-right: 4px;
}
.team-strikes.active-strikes .ts-label { color: var(--accent-text); }
.strike-pip {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--fg-rgb),.04); border: 2px solid rgba(var(--fg-rgb),.08);
  font-weight: 900; font-size: .74rem; color: rgba(var(--fg-rgb),.08);
  transition: background .35s var(--ease-pop), border-color .35s var(--ease-pop),
              color .35s var(--ease-pop), box-shadow .35s var(--ease-pop);
}
.strike-pip.lit {
  background: radial-gradient(circle, rgba(var(--red-rgb),.35), rgba(198,40,40,.45));
  border-color: var(--red); color: #FF6B6B;
  box-shadow: 0 0 14px rgba(var(--red-rgb),.35);
  animation: strikePop .4s var(--ease-pop);
}
@keyframes strikePop {
  0% { transform: scale(0) rotate(-20deg); opacity: .2; }
  50% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  70% { transform: scale(.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── OVERLAYS ── */
.strike-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  pointer-events: none; animation: fadeIn .1s;
}
.strike-overlay .big-x {
  font-family: var(--font-display); font-size: 16rem; color: var(--red);
  text-shadow: 0 0 80px rgba(var(--red-rgb),.5);
  animation: xBounce .5s var(--ease-pop);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes xBounce {
  0% { transform: scale(3) rotate(-10deg); opacity: 0; }
  60% { transform: scale(.95) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reveal-flash {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(circle at center, rgba(var(--gold-rgb),.15), transparent 70%);
  pointer-events: none; animation: flashOut .4s ease-out forwards;
}
@keyframes flashOut { to { opacity: 0; } }

/* ── BLACKSCREEN INTRO ── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.intro-overlay svg {
  width: 120px; height: auto; opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255,200,0,.4));
  animation: introStarIn 1.5s ease-out .3s forwards;
}
@keyframes introStarIn {
  0% { opacity: 0; transform: scale(.5) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.05) rotate(2deg); }
  100% { opacity: .8; transform: scale(1) rotate(0); }
}
@keyframes introOut {
  to { opacity: 0; }
}

/* Permanent black backdrop during intro sequence */
.black-backdrop {
  position: fixed; inset: 0; z-index: 1999;
  background: #000; pointer-events: none;
}
.black-backdrop.fade-out {
  animation: introOut .5s ease-in forwards;
}
@keyframes overlayIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.overlay-enter { animation: overlayIn .5s ease-out; }

/* Klick-Overlays der Finale-Sequenz (Intro, Matchup) - gleiche Optik wie
   .welcome-overlay, aber über dem Black-Backdrop (z-index 2000). */
.finale-click-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; user-select: none; background: #000;
}

/* ── WELCOME SCREEN ── */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  user-select: none;
}
.welcome-star {
  opacity: 0;
  animation: welcomeStarIn 1s ease-out .2s forwards;
}
.welcome-star svg { width: 80px; height: auto; filter: drop-shadow(0 0 25px rgba(255,200,0,.4)); }
@keyframes welcomeStarIn {
  from { opacity: 0; transform: scale(.3) rotate(-30deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.welcome-line1 {
  font-family: var(--font-body); font-size: 1rem;
  font-weight: 700; letter-spacing: 6px; text-transform: uppercase;
  color: rgba(var(--fg-rgb),.35);
  opacity: 0; animation: welcomeTextIn .8s ease-out .6s forwards;
}
.welcome-line2 {
  font-family: var(--font-display); font-size: 5rem;
  color: var(--accent-text); letter-spacing: 6px;
  text-shadow: 0 0 50px rgba(var(--gold-rgb),.3);
  opacity: 0; animation: welcomeTextIn .8s ease-out .9s forwards;
}
@keyframes welcomeTextIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}



/* ── TUTORIAL INTRO ── */
.tut-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  overflow: hidden;
}
.tut-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; padding: 40px;
  opacity: 0; pointer-events: none;
  transition: opacity .6s, transform .6s;
  transform: scale(.95);
}
.tut-slide.active {
  opacity: 1; pointer-events: auto; transform: scale(1);
}
.tut-slide.exit {
  opacity: 0; transform: scale(1.1);
}

.tut-big {
  font-family: var(--font-display);
  font-size: 4.5rem; letter-spacing: 6px;
  text-align: center; line-height: 1.1;
}
.tut-gold { color: var(--accent-text); text-shadow: 0 0 40px rgba(var(--gold-rgb),.3); }
.tut-white { color: var(--fg); text-shadow: 0 0 30px rgba(255,255,255,.15); }
.tut-red { color: var(--red); text-shadow: 0 0 30px rgba(var(--red-rgb),.3); }
.tut-blue { color: var(--blue); text-shadow: 0 0 30px rgba(var(--blue-rgb),.3); }
.tut-green { color: var(--green); text-shadow: 0 0 30px rgba(var(--green-rgb),.3); }

.tut-sub {
  font-size: 1.1rem; color: rgba(var(--fg-rgb),.45);
  text-align: center; line-height: 1.7;
  max-width: 500px; font-weight: 600;
}

.tut-icon {
  font-size: 5rem; line-height: 1;
  animation: tutPulse 2s ease-in-out infinite;
}
@keyframes tutPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.tut-board-demo {
  display: flex; flex-direction: column; gap: 6px; width: 340px;
}
.tut-tile-demo {
  height: 42px; border-radius: 8px;
  display: flex; align-items: center; overflow: hidden;
}
.tut-tile-blue {
  background: var(--tile, linear-gradient(180deg, #1E3FAE, #112370));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.tut-tile-green {
  background: var(--tile-open, linear-gradient(180deg, #166534, #0F4024));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  animation: tutTileReveal .5s ease-out;
}
.tut-tile-num {
  width: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem;
  color: rgba(var(--fg-rgb),.4);
}
.tut-tile-text {
  flex: 1; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--fg);
}
.tut-tile-pts {
  padding: 0 12px; font-family: var(--font-display);
  font-size: 1.2rem; color: var(--accent-text);
}
.tut-tile-placeholder {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.tut-tile-placeholder::after {
  content: ''; width: 40%; height: 6px;
  background: rgba(var(--fg-rgb),.06); border-radius: 3px;
}
@keyframes tutTileReveal {
  from { transform: perspective(800px) rotateX(90deg); }
  to { transform: perspective(800px) rotateX(0); }
}

/* Buzzer-Demo: team-farbige Buzz-Buttons */
.tut-buzz-demo { display: flex; gap: 16px; margin-top: 6px; }
.tut-buzz-btn {
  padding: 14px 32px; border-radius: 16px;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 2px;
  color: var(--fg); box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.tut-buzz-btn.red { background: linear-gradient(180deg, var(--red), var(--red-deep)); }
.tut-buzz-btn.blue {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  animation: tutStrikePop .45s var(--ease-pop);
}
/* Einblendungen-Demo: kleine Medien-Kacheln */
.tut-media-demo { display: flex; gap: 10px; margin-top: 6px; }
.tut-media-tile {
  width: 70px; height: 70px; border-radius: 10px;
  border: 2px solid rgba(var(--fg-rgb),.15);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  background: rgba(var(--fg-rgb),.05);
}
/* Jeopardy-Board-Demo */
.tut-jboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 320px; }
.tut-jcat {
  background: var(--tile, linear-gradient(180deg, #1a2a8a, #111d6e)); border-radius: 5px;
  padding: 7px 3px; font-size: .5rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg); text-align: center;
  display: flex; align-items: center; justify-content: center; min-height: 34px;
}
.tut-jcell {
  background: var(--tile, linear-gradient(180deg, #1a2a8a, #111d6e)); border-radius: 5px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--accent-text);
}
.tut-jcell.used { background: var(--tile-used, #080c1e); color: transparent; }
.tut-jcell.pick { animation: tutStrikePop .45s var(--ease-pop); box-shadow: 0 0 18px rgba(var(--gold-rgb),.5); }
/* Richtig/Falsch-Demo (Jeopardy) */
.tut-scorerow { display: flex; gap: 14px; margin-top: 6px; }
.tut-scorechip {
  display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px;
  font-size: 1rem; font-weight: 800;
}
.tut-scorechip.good { background: rgba(var(--green-rgb),.15); border: 2px solid var(--green); color: #6EE7A0; }
.tut-scorechip.bad { background: rgba(var(--red-rgb),.15); border: 2px solid var(--red); color: #FF8A80; }
/* Kategorie- und Antwort-Demo (Wer weiß denn sowas) */
.tut-wwds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 400px; }
.tut-wwds-cat {
  min-height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 6px 4px; text-align: center; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--tile-fg, var(--fg));
  background: var(--tile, linear-gradient(180deg, #1E3FAE, #112370));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.tut-wwds-cat.pick { box-shadow: 0 0 18px rgba(var(--gold-rgb),.5); animation: tutStrikePop .45s var(--ease-pop); }
.tut-wwds-cat.used { background: var(--tile-used, linear-gradient(180deg,#243056,#141a33)); opacity: .4; text-decoration: line-through; }
.tut-wwds-opts { display: flex; flex-direction: column; gap: 8px; width: 380px; }
.tut-wwds-opt {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 10px;
  font-size: .9rem; font-weight: 700; color: var(--tile-fg, var(--fg));
  background: var(--tile, linear-gradient(180deg, #1E3FAE, #112370));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.tut-wwds-opt span {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-text); min-width: 20px;
}
.tut-wwds-opt.right { background: var(--tile-open, linear-gradient(180deg, #16A34A, #0F4024)); }
.tut-wwds-opt.right span { color: var(--fg); }
/* Daily-Double-Badge */
.tut-dd {
  font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 4px; color: var(--accent-text);
  padding: 14px 30px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(245,158,11,.06));
  border: 2px solid rgba(var(--gold-rgb),.5); text-shadow: 0 0 30px rgba(var(--gold-rgb),.4);
  animation: tutTrophyBounce 1.6s ease-in-out infinite;
}

.tut-strikes-demo {
  display: flex; gap: 12px; margin-top: 8px;
}
.tut-x {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.3rem;
}
.tut-x.on {
  background: radial-gradient(circle, rgba(var(--red-rgb),.3), rgba(198,40,40,.4));
  border: 2px solid var(--red); color: #FF6B6B;
  box-shadow: 0 0 20px rgba(var(--red-rgb),.4);
  animation: tutStrikePop .4s var(--ease-pop);
}
@keyframes tutStrikePop {
  from { transform: scale(0); } to { transform: scale(1); }
}

.tut-progress {
  position: absolute; bottom: 30px;
  display: flex; gap: 8px;
}
.tut-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--fg-rgb),.15);
  transition: background .3s var(--ease-out), width .3s var(--ease-out),
              border-radius .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.tut-dot.active {
  background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb),.4);
  width: 24px; border-radius: 4px;
}

.tut-hint {
  position: absolute; bottom: 60px;
  font-size: .7rem; color: rgba(var(--fg-rgb),.15);
  letter-spacing: 3px; text-transform: uppercase;
  animation: introPulse 2.5s ease-in-out infinite;
}

.tut-danger { margin-bottom: 12px; animation: tutTrophyBounce 2s ease-in-out infinite; }
.tut-danger svg { width: 96px; height: auto; filter: drop-shadow(0 4px 24px rgba(255,200,0,.35)); }
.tut-star-anim {
  animation: tutStarSpin 3s linear infinite;
}
@keyframes tutStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tut-trophy-bounce {
  animation: tutTrophyBounce 1.5s ease-in-out infinite;
}
@keyframes tutTrophyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.05); }
}

/* ── EDIT ── */
#edit-screen { gap: 16px; }
.page-title {
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 3px; color: rgba(var(--fg-rgb),.5);
}
.page-title em { font-style: normal; color: var(--accent-text); }
.editor-card {
  width: 100%; background: rgba(var(--fg-rgb),.04);
  border: 1px solid rgba(var(--fg-rgb),.08); border-radius: 14px;
  padding: 24px; backdrop-filter: blur(8px);
}
.editor-card label {
  display: block; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px;
  color: rgba(var(--fg-rgb),.4); margin-bottom: 6px;
}
.note-check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 6px;
  border-radius: 10px; border: 1px solid rgba(var(--fg-rgb),.1);
  background: rgba(var(--fg-rgb),.04); cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.note-check-item:hover { background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--gold-rgb),.3); }
.note-check-box {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid rgba(var(--gold-rgb),.5);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900; color: var(--accent-text);
}
.note-check-item.done { opacity: .5; }
.note-check-item.done .note-check-box { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.note-check-item.done .note-check-text { text-decoration: line-through; }
.note-check-text { font-size: .92rem; font-weight: 600; flex: 1; }
.editor-card input {
  width: 100%; padding: 11px 14px; border-radius: 8px;
  border: 1.5px solid rgba(var(--fg-rgb),.1);
  background: rgba(0,0,0,.3); color: var(--fg);
  font-family: inherit; font-size: .95rem; font-weight: 600;
  outline: none; margin-bottom: 12px; transition: border-color .2s;
}
.editor-card input:focus { border-color: rgba(var(--gold-rgb),.4); }
.editor-card input::placeholder { color: rgba(var(--fg-rgb),.15); }
.answer-edit-row { display: flex; gap: 8px; margin-bottom: 5px; align-items: center; }
.answer-edit-row input:first-child { flex: 3; }
.answer-edit-row input:nth-child(2) { flex: 1; text-align: center; }
.answer-edit-row .btn { padding: 8px 12px; font-size: .75rem; }
.editor-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.q-list { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.q-list-item {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(var(--fg-rgb),.03); padding: 12px 16px;
  border-radius: 8px; border: 1px solid rgba(var(--fg-rgb),.05); transition: background .15s;
}
.q-list-item:hover { background: rgba(var(--fg-rgb),.06); }
.q-list-item .q-label { flex: 1; font-size: .85rem; color: rgba(var(--fg-rgb),.6); }
.q-list-item .q-num { color: var(--accent-text); font-weight: 700; margin-right: 8px; }
.q-list-item .q-meta { color: rgba(var(--fg-rgb),.25); font-size: .75rem; margin-left: 6px; }
/* Turnierstand (js/tournament.js). Bis 2026-10-10 als Inline-Farben fuer
   dunklen Grund - in den hellen Richtungen stand der Spielplan weiss auf
   Creme. Ueber die Tokens folgt er jetzt der Richtung; im Studio-Blau sind
   die Werte dieselben wie vorher (--accent-text = #FFD23F, --fg-rgb weiss). */
.tour-lead { border-color: rgba(var(--gold-rgb),.35); background: rgba(var(--gold-rgb),.06); }
.tour-next { border-color: rgba(var(--gold-rgb),.35); }
.tour-bar-row { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 50%; }
.tour-bar { flex: 1; height: 10px; background: rgba(var(--fg-rgb),.06); border-radius: 5px; overflow: hidden; }
.tour-bar-fill { height: 100%; background: linear-gradient(90deg, #FFD23F, #F0B800); border-radius: 5px; transition: width .5s; }
.tour-total { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-text); min-width: 36px; text-align: right; }
.tour-stand { font-size: .78rem; color: rgba(var(--fg-rgb),.6); }
.tour-pts, .tour-jetzt { color: var(--accent-text); }
.tour-jetzt { font-weight: 700; }
.tour-spaeter { color: rgba(var(--fg-rgb),.3); }
/* "kommt noch" ist bewusst blass - auf Creme aber mit .3 blasser (1,7-2,0)
   als im Studio-Blau (2,7). .45 gleicht das an. */
:root[data-theme-hell] .tour-spaeter { color: rgba(var(--fg-rgb),.45); }
.q-list-item .q-meta.tour-weight { color: var(--accent-text); }
.q-list-item.tour-leer { justify-content: center; color: rgba(var(--fg-rgb),.35); }
/* Host-Seite des Turniers (renderTournament, Depot, Umbenennen) - dieselbe
   Umstellung; im Studio-Blau unveraendert. Die blassen Hinweise sind auf
   Creme heller als auf Dunkelblau, deshalb dort mehr Deckkraft. */
.tour-zeile { width: 100%; }
.tour-blass { color: rgba(var(--fg-rgb),.35); }
.tour-hinweis { color: rgba(var(--gold-rgb),.75); }
.tour-fussnote { font-size: .7rem; color: rgba(var(--fg-rgb),.35); margin-top: 8px; }
.tour-datei { width: 100%; font-size: .72rem; color: rgba(var(--fg-rgb),.45); }
.editor-card .tour-check {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: .8rem; font-weight: 600; color: rgba(var(--fg-rgb),.7);
}
.tour-select {
  flex: 2; min-width: 150px; padding: 11px 14px; border-radius: 8px;
  border: 1.5px solid rgba(var(--fg-rgb),.1); background: rgba(0,0,0,.3); color: var(--fg);
  font-family: inherit; font-size: .95rem; font-weight: 600; outline: none;
}
:root[data-theme-hell] :is(.tour-blass, .tour-fussnote, .q-list-item.tour-leer) { color: rgba(var(--fg-rgb),.5); }
:root[data-theme-hell] .tour-datei { color: rgba(var(--fg-rgb),.6); }
:root[data-theme-hell] .tour-hinweis { color: var(--accent-text); }
.tour-icon-svg { display: inline-flex; vertical-align: middle; margin-right: 2px; }
.tour-icon-svg svg { width: 22px; height: 22px; }
.pmini-av { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.player-row .q-label { display: flex; align-items: center; gap: 8px; }
.player-stats { font-size: .7rem; color: rgba(var(--fg-rgb),.35); margin-left: 8px; }
.player-team-tag { font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--green); box-shadow: 0 0 6px 2px rgba(var(--green-rgb),.7); animation: onlinePulse 1.6s ease-in-out infinite; }
.online-dot.offline { background: rgba(var(--fg-rgb),.15); box-shadow: none; animation: none; }
@keyframes onlinePulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.q-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.q-btns .btn { padding: 6px 14px; font-size: .7rem; }
/* Spielerübersicht: eine Zeile je Account, in zwei Bloecken.

   Vorher standen Name und Knopfleiste als zwei Flex-Geschwister nebeneinander
   und stritten sich um dieselbe Breite. Beide durften wachsen, keiner durfte
   richtig schrumpfen (der Name nicht wegen seiner Emoji-Kette aus Statistik
   und Team-Tag, die Knoepfe nicht wegen white-space:nowrap) - das Ergebnis
   waren uebereinanderliegende Knoepfe und Text, der unter ihnen verschwand.

   Jetzt bekommt jeder Block eine eigene Zeile, sobald es eng wird: der Name
   braucht mindestens 200px, die Knoepfe mindestens 260px. Passt das nicht
   nebeneinander, bricht die Zeile um - zwei Zeilen sind immer noch lesbar,
   uebereinander liegende Knoepfe nie. */
.player-row { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.player-row .q-label { flex: 1 1 200px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.player-row .q-btns { flex: 1 1 260px; min-width: 0; align-items: center; }
/* Der Name darf umbrechen statt die Zeile aufzudruecken. */
.player-row .q-label > b { overflow-wrap: anywhere; }
.player-team-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.edit-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Editor mit fester Button-Spalte daneben (bleibt beim Scrollen stehen). */
.screen.wide-editor { max-width: 1120px; }
.editor-layout { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.editor-layout > .editor-card, .editor-layout > .editor-main { flex: 1; min-width: 0; }
.editor-main { display: flex; flex-direction: column; }
.editor-side {
  position: sticky; top: 50%; transform: translateY(-50%); align-self: flex-start;
  display: flex; flex-direction: column; gap: 8px;
  width: 190px; flex-shrink: 0; box-sizing: border-box;
  background: rgba(var(--fg-rgb),.05);
  border: 1px solid rgba(var(--gold-rgb),.35);
  border-radius: 14px; padding: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.editor-side .btn { width: 100%; padding: 12px 14px; text-align: center; box-sizing: border-box; }
.editor-side .side-label {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(var(--fg-rgb),.4); margin: 2px 2px 2px; text-align: center;
}
@media (max-width: 760px) {
  .editor-layout { flex-direction: column; }
  .editor-side { position: static; transform: none; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .editor-side .btn { width: auto; }
  .editor-side .side-label { display: none; }
}

/* Floating „nach ganz oben"-Button im Editor. */
#editor-top-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 4000;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--on-accent);
  font-size: 1.6rem; font-weight: 900; line-height: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  transition: transform .12s, opacity .2s;
}
#editor-top-btn:hover { transform: translateY(-3px); }
#editor-top-btn.show { display: flex; }

/* ── RESULT ── */
#result-screen { gap: 24px; margin-top: 50px; text-align: center; }
.result-icon { font-size: 4.5rem; line-height: 1; }
.winner-text {
  font-family: var(--font-display); font-size: 2.8rem;
  color: var(--accent-text); text-shadow: 0 0 30px rgba(var(--gold-rgb),.3); letter-spacing: 3px;
}
.result-card {
  background: var(--brd-tex, none), var(--brd-surface, rgba(var(--fg-rgb),.04)); border: 1px solid rgba(var(--fg-rgb),.08);
  box-shadow: var(--brd-frame, none); color: var(--brd-fg, inherit);
  border-radius: var(--brd-radius, 14px); padding: 30px 44px; backdrop-filter: blur(8px);
}
.result-scores { line-height: 2.2; font-size: 1rem; color: rgba(var(--fg-rgb),.5); }
.result-scores strong { color: var(--accent-text); font-size: 1.5rem; font-family: var(--font-display); }
/* Vier Knoepfe nebeneinander passen auf einen Beamer, aber nicht auf ein
   schmales Fenster: mit laufendem Turnier stehen hier "Ins Turnier
   uebernehmen", "Zur Turnieruebersicht", "Nochmal spielen" und "Zum Menue"
   - gemessen 430 px bei 400 px Fensterbreite. Umbrechen statt ueberstehen. */
.result-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.confetti-p { position: fixed; top: -20px; z-index: 999; animation: confDrop linear forwards; }
@keyframes confDrop { to { transform: translateY(110vh) translateX(40px) rotate(720deg); } }

/* ── FINALE ── */
#finale-screen { gap: 14px; }
.finale-header { text-align: center; }
.finale-title {
  font-family: var(--font-display); font-size: 2.5rem;
  color: var(--accent-text); letter-spacing: 6px;
  text-shadow: 0 0 30px rgba(var(--gold-rgb),.3);
}
.finale-team-label {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 3px; color: rgba(var(--fg-rgb),.5); margin-top: 4px;
}
.finale-q-info {
  font-size: .75rem; color: rgba(var(--fg-rgb),.4);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-top: 8px;
}
.finale-timer {
  font-family: var(--font-display); font-size: 5rem;
  color: var(--fg); text-align: center; line-height: 1;
  transition: color .3s;
}
.finale-timer.urgent { color: var(--red); animation: timerPulse .5s ease-in-out infinite; }
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.finale-scores {
  display: flex; gap: 20px; justify-content: center;
}
.finale-score-card {
  text-align: center; padding: 12px 24px; border-radius: var(--tile-radius, 12px);
  background: var(--tile-tex, none), var(--tile, rgba(var(--fg-rgb),.04)); border: 1px solid rgba(var(--fg-rgb),.08);
  box-shadow: var(--tile-edge, none); color: var(--tile-fg, inherit);
  transition: border-color .3s, background .3s;
}
.finale-score-card.active { border-color: rgba(var(--gold-rgb),.3); background: rgba(var(--gold-rgb),.05); }
.finale-score-name {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(var(--fg-rgb),.4);
}
.finale-score-pts {
  font-family: var(--font-display); font-size: 2.5rem; color: var(--accent-text);
}
/* Gleichstand um Platz 2 (js/feud.js, feudShowTieChoice): wie das
   Ausscheiden, aber ohne Klick - gewaehlt wird im GM-Fenster. */
.feud-tie-overlay {
  position: fixed; inset: 0; z-index: 2000; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.elim-overlay {
  position: fixed; inset: 0; z-index: 2000; background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  cursor: pointer; user-select: none;
}
.elim-text {
  font-family: var(--font-display); font-size: 2rem;
  color: rgba(var(--fg-rgb),.4); letter-spacing: 4px;
  opacity: 0; animation: welcomeTextIn .8s ease-out .3s forwards;
}
.elim-team {
  font-family: var(--font-display); font-size: 3.5rem;
  color: var(--red); letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(var(--red-rgb),.3);
  opacity: 0; animation: welcomeTextIn .8s ease-out .6s forwards;
}
.elim-sub {
  font-size: .9rem; color: rgba(var(--fg-rgb),.3); font-weight: 600;
  opacity: 0; animation: welcomeTextIn .6s ease-out 1s forwards;
}
.finale-big-q {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--fg);
  text-align: center;
  line-height: 1.3;
  padding: 60px 20px;
  text-shadow: 0 0 30px rgba(255,255,255,.1);
}
.finale-reveal-cards {
  display: flex; gap: 12px; justify-content: center;
  width: 100%; margin-top: 12px;
}
.finale-reveal-team {
  flex: 1; max-width: 300px; text-align: center;
  padding: 16px; border-radius: var(--tile-radius, 12px);
  background: var(--tile-tex, none), var(--tile, rgba(var(--fg-rgb),.04));
  border: 1px solid rgba(var(--fg-rgb),.08);
  box-shadow: var(--tile-edge, none); color: var(--tile-fg, inherit);
  animation: var(--tile-reveal, none);
}
.finale-reveal-name {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: rgba(var(--fg-rgb),.4);
}
.finale-reveal-answer {
  font-size: 1rem; font-weight: 700; margin: 8px 0;
}
/* Treffer/Fehlgriff - bis 2026-10-09 als Inline-Farbe im JS (js/feud.js). */
.finale-reveal-answer.hit { color: #22C55E; }
.finale-reveal-answer.miss { color: #E8453C; }
.finale-reveal-pts {
  font-family: var(--font-display); font-size: 2rem; color: var(--accent-text);
}
/* Niedriges Fenster (Beamer-Popout 1280x720): die Aufloesung war in allen
   Richtungen 157-280 px zu hoch, die Vergleichskarten ganz ausserhalb
   (gemessen mit tools/shots, e3acca7). Unter 900 px Hoehe stehen Kopf und
   Punktestand in einer Zeile, Karten und Brett werden flacher. Ab 900 px
   (also auch bei 1920x1080) bleibt alles wie vorher. */
@media (max-height: 900px) {
  #finale-screen.active {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    column-gap: 32px; row-gap: clamp(6px, 2vh - 4px, 14px);
  }
  #finale-screen > :is(.finale-timer, .board, .finale-reveal-cards) { flex-basis: 100%; }
  .finale-header { text-align: left; }
  .finale-title { font-size: 2rem; line-height: 1.15; }
  .finale-q-info { margin-top: 4px; }
  #finale-question { padding-block: 4px 10px; }
  .finale-score-card { padding: 6px 20px; }
  .finale-score-pts { font-size: 2rem; line-height: 1.15; }
  #finale-screen .board { padding-block: 12px; }
  .finale-reveal-cards { margin-top: 0; }
  .finale-reveal-team { padding: 8px 16px; }
  .finale-reveal-answer { margin: 2px 0; }
  .finale-reveal-pts { font-size: 1.6rem; line-height: 1.15; }
}

/* ── GM BAR ── */
/* Show beenden (js/resume.js, hostQuitClick). Ueber den Intro-Overlays
   (bis 3000) und dem QR-Bild (4500), unter Host-Sperre (5000). Ist das
   GM-Panel offen, hat es seinen eigenen Knopf oben rechts - dann hier aus. */
.host-quit {
  position: fixed; top: 12px; right: 12px; z-index: 4900;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(232,69,60,.6); background: rgba(232,69,60,.16);
  /* light-dark(): helle Richtungen setzen color-scheme light (js/theme.js),
     dort war Hellrot auf Creme kaum lesbar. */
  color: light-dark(#B42318, #FF8A80); font: 700 .85rem var(--font-ui, Inter), system-ui, sans-serif;
}
.host-quit:hover, .host-quit:focus-visible { background: rgba(232,69,60,.32); outline: 2px solid light-dark(#B42318, #FF8A80); outline-offset: 1px; }
body:has(#gm-embed-overlay.visible) #host-quit { display: none !important; }
.gm-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
  background: linear-gradient(180deg, var(--panel-hi), var(--bg));
  border-top: 2px solid rgba(var(--gold-rgb),.2);
  padding: 12px 16px;
  display: none; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  animation: gmBarIn .3s ease-out;
}
.gm-bar.visible { display: flex; }
@keyframes gmBarIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.gm-bar .gm-btn {
  padding: 10px 18px; border: none; border-radius: 8px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
  transition: filter .1s;
}
.gm-bar .gm-btn:hover { filter: brightness(1.15); }
.gm-bar .gm-red { background: linear-gradient(180deg, var(--red), var(--red-deep)); color: var(--fg); }
.gm-bar .gm-gray { background: rgba(var(--fg-rgb),.1); color: rgba(var(--fg-rgb),.7); border: 1px solid rgba(var(--fg-rgb),.1); }
.gm-bar .gm-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--on-accent); }
.gm-bar .gm-blue { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); color: var(--fg); }
/* Orange ist in beiden Leisten die Farbe fuers Rueckgaengig - es soll sich
   von den Spielknoepfen abheben, ohne wie ein Fehler auszusehen (rot). */
.gm-bar .gm-orange { background: linear-gradient(180deg, #F97316, #C2410C); color: var(--fg); }
.gm-bar .gm-label {
  font-size: .6rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(var(--fg-rgb),.3);
}

/* ── GM-Fenster eingebettet auf dem Mainscreen (statt separates Popup) ── */
#gm-embed-overlay {
  display: none; position: fixed; inset: 0; z-index: 4800; background: var(--bg);
}
#gm-embed-overlay.visible { display: block; }
#gm-embed-frame { width: 100%; height: 100%; border: none; }

/* ── Einblendungen: Editor-Slots (Fragen bearbeiten) ── */
/* wrap ist Pflicht: die Slots schrumpfen nicht (flex-shrink:0), in einer zu
   schmalen Spalte liefen sie sonst heraus und über den Nachbarn. */
.media-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.media-slot { width: 84px; height: 84px; border-radius: 10px; flex-shrink: 0; position: relative; overflow: hidden; }
.media-slot.empty { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(var(--fg-rgb),.15); color: rgba(var(--fg-rgb),.3); font-size: 1.6rem; cursor: pointer; }
.media-slot.empty:hover { border-color: var(--gold); color: var(--accent-text); }
.media-slot.filled { border: 2px solid rgba(var(--fg-rgb),.15); }
.media-slot.filled img, .media-slot.filled video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-slot-remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #FF8A80; font-weight: 700; cursor: pointer; }
.media-slot.filled { cursor: help; }
/* Kleine Jeopardy-Bild-Thumbnails im Editor (Frage-/Lösungs-/Staffel-Bild) */
.jimg-thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(var(--fg-rgb),.2); cursor: help; vertical-align: middle; }
/* Schwebende Bild-Vorschau beim Hover: vergrößertes Bild + Dateiname */
#img-hover-preview {
  position: fixed; z-index: 6000; pointer-events: none; display: none;
  background: var(--bg); border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 10px;
  padding: 6px; box-shadow: 0 14px 44px rgba(0,0,0,.6); max-width: 264px;
}
#img-hover-preview img, #img-hover-preview video { max-width: 250px; max-height: 210px; border-radius: 6px; display: block; }
#img-hover-preview .ihp-name { font-size: .72rem; color: var(--accent-text); margin-top: 6px; text-align: center; word-break: break-all; font-weight: 600; }

/* ── Einblendungen: Anzeige auf dem Gamescreen ── */
#media-overlay { position: fixed; inset: 0; z-index: 4300; background: rgba(5,8,26,.94); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 40px; }
#media-overlay img, #media-overlay video { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }

@media (max-width: 600px) {
  .logo svg { width: 200px; }
  .team-panel .t-score { font-size: 2.2rem; }
  .board { padding: 14px; border-radius: var(--brd-radius, 14px); }
  .q-text { font-size: .95rem; }
  .tile { min-height: 44px; }
  .tile.open .tile-answer { font-size: .8rem; }
  .game-controls .btn { padding: 10px 14px; font-size: .75rem; }
  .result-card { padding: 20px; }
  .strike-overlay .big-x { font-size: 10rem; }
  .team-card { min-width: 160px; padding: 20px 16px; }
}

/* ── MENU (Studio Gold) ── */
.menu-divider { width: 200px; height: 1px; background: var(--line); margin: 4px auto 22px; }
.menu-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; width: 100%; max-width: 720px; margin: 0 auto;
}
.menu-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 16px;
  text-align: center; cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  position: relative; overflow: hidden;
}
/* Goldene Akzentkante, die beim Hover oben aufleuchtet */
.menu-card::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: 0; transition: opacity .2s;
}
.menu-card:hover {
  transform: translateY(-4px); border-color: rgba(217,166,46,.55); background: var(--panel-hi);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.menu-card:active { transform: translateY(-1px) scale(.992); }
.menu-card:hover::before { opacity: 1; }
/* Das Logo hebt beim Hover mit an - die Karte wirkt dadurch wie ein Objekt
   statt wie eine Flaeche mit Bild darauf. */
.menu-card-icon svg {
  transition: transform var(--t-med) var(--ease-pop), filter var(--t-med) var(--ease-out);
}
.menu-card:hover .menu-card-icon svg {
  transform: translateY(-3px) scale(1.07);
  filter: drop-shadow(0 6px 16px rgba(var(--gold-rgb), .45));
}
.menu-card-icon { font-size: 2.3rem; margin-bottom: 12px; line-height: 1; height: 56px; display: flex; align-items: center; justify-content: center; }
.menu-card-icon svg { width: 56px; height: 56px; display: block; filter: drop-shadow(0 2px 8px rgba(255,200,0,.28)); }
.menu-card-title {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  color: var(--fg-strong); letter-spacing: .3px; margin-bottom: 5px;
}
.menu-card-sub {
  font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .3px;
  margin-top: auto; /* haelt die Unterzeilen aller Karten auf einer Linie */
}
.menu-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.menu-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  color: var(--pill-fg); font-size: .8rem; font-weight: 700; letter-spacing: .5px;
  cursor: pointer; background: transparent; font-family: var(--font-body);
  transition: border-color .2s, color .2s, background .2s;
}
.menu-pill:hover { border-color: rgba(217,166,46,.5); color: #F3E4BC; background: rgba(217,166,46,.06); }
.menu-pill.active { border-color: var(--accent-line); color: #F3E4BC; background: rgba(217,166,46,.14); }

/* ── JEOPARDY ── */
#jeopardy-screen { gap: 12px; max-width: 1100px; }
.jeopardy-scores {
  display: flex; gap: 6px; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.jeopardy-team {
  flex: 1; text-align: center; padding: 10px 8px;
  position: relative;
}
.jeopardy-team.red { background: linear-gradient(180deg, #991B1B, #7F1D1D); }
.jeopardy-team.blue { background: linear-gradient(180deg, #1E40AF, #1E3A8A); }
.jeopardy-team.green { background: linear-gradient(180deg, #166534, #14532D); }
.jeopardy-team .jt-name { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(var(--fg-rgb),.5); }
.jeopardy-team .jt-score { font-family: var(--font-display); font-size: 2.2rem; color: var(--accent-text); }
.jeopardy-board {
  width: 100%; display: grid;
  border-radius: 14px; overflow: hidden;
  gap: 4px; background: var(--brd-well, #050815);
  padding: 4px;
  box-shadow: var(--brd-frame, 0 0 0 3px var(--gold-dark), 0 0 0 5px #0a0e30, 0 12px 40px rgba(0,0,0,.6));
}
.jeopardy-cat {
  background: var(--tile-head, var(--tile, linear-gradient(180deg, #1a2a8a, #111d6e)));
  text-align: center; padding: 12px 8px;
  font-size: .7rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; color: var(--tile-head-fg, var(--tile-fg, var(--fg)));
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; line-height: 1.3;
  border-radius: var(--tile-radius, 6px);
}
/* Bild statt Name: contain statt cover, damit bei Logos und Motiven nichts
   abgeschnitten wird, was zum Erraten gebraucht wird. */
.jeopardy-cat.has-img { padding: 4px; }
.jeopardy-cat-img { display: block; width: 100%; height: 84px; object-fit: contain; border-radius: 4px; }
.jeopardy-cell {
  background: var(--tile-tex, none), var(--tile, linear-gradient(180deg, #1a2a8a, #111d6e));
  box-shadow: var(--tile-edge, none);
  text-align: center; padding: 10px 6px;
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--tile-num, var(--accent-text)); letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center;
  min-height: 70px; cursor: pointer; border-radius: var(--tile-radius, 6px);
  transition: background var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
  text-shadow: var(--tile-num-glow, 0 0 12px rgba(var(--gold-rgb),.3));
}
.jeopardy-cell:hover:not(.used) {
  background: var(--tile-tex, none), var(--tile-hover, linear-gradient(180deg, #2a3eb0, #1a2e8a)); transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(var(--gold-rgb), .25);
}
.jeopardy-cell:active:not(.used) { transform: scale(.995); }
.jeopardy-cell.used { background: var(--tile-used, #080c1e); color: transparent; cursor: default; }
/* Niedrige Fenster: Das Brett passte bei 1280x720 (Beamer-Popout) schon im
   Studio-Blau nicht - Unterkante 757 px, mit den Design-Richtungen bis 846 px
   (J). Felder, Kopfzeile und Logo werden deshalb mit der Fensterhoehe
   kleiner. Die Obergrenzen sind die alten festen Werte: ab etwa 890 px Hoehe
   (also auch bei 1920x1080) bleibt alles wie vorher. */
.jeopardy-cell { min-height: clamp(40px, 9vh - 10px, 70px); padding-block: clamp(3px, 2.5vh - 12px, 10px); }
.jeopardy-cat { min-height: clamp(38px, 8vh - 11px, 60px); padding-block: clamp(4px, 2.5vh - 10px, 12px); }
body:has(:is(#jeopardy-screen, #game-screen, #wwm-screen, #finale-screen, #ddf-screen, #pih-screen, #tournament-board-screen).active) .logo { margin-top: clamp(8px, 6vh - 24px, 30px); }
body:has(:is(#jeopardy-screen, #game-screen, #wwm-screen, #finale-screen, #ddf-screen, #pih-screen, #tournament-board-screen).active) .logo svg { max-height: max(72px, 22vh - 48px); }
.jeopardy-clue-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  /* Aus der Design-Richtung (js/theme.js), wie am <body> - fest eingetragen
     stand hier das Studio-Blau auch auf hellen Richtungen. */
  background-image: var(--bg-img);
  background-size: var(--bg-size);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 40px;
  animation: screenIn .3s ease-out;
}
.danger-clue-sign svg { width: 70px; height: auto; filter: drop-shadow(0 0 20px rgba(255,200,0,.4)); margin-bottom: 6px; }
.danger-intro-sign svg {
  width: 120px; height: auto; opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255,200,0,.4));
  animation: introStarIn 1.5s ease-out .3s forwards;
}
.danger-title-sign {
  opacity: 0;
  animation: welcomeStarIn 1s ease-out .2s forwards;
}
.danger-title-sign svg { width: 90px; height: auto; filter: drop-shadow(0 0 25px rgba(255,200,0,.4)); }

.jeopardy-clue-cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: rgba(var(--fg-rgb),.4); }
.jeopardy-clue-cat-img { display: block; height: 72px; max-width: 240px; object-fit: contain; border-radius: 6px; }
.jeopardy-dd-banner {
  font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 6px;
  color: var(--accent-text); text-shadow: 0 0 30px rgba(var(--gold-rgb),.5);
  margin-bottom: 4px; animation: ddPop .6s var(--ease-pop);
}
@keyframes ddPop { 0%{transform:scale(.4) rotate(-6deg);opacity:0;} 60%{transform:scale(1.08) rotate(2deg);opacity:1;} 100%{transform:scale(1) rotate(0);opacity:1;} }
.jeopardy-clue-pts { font-family: var(--font-display); font-size: 3rem; color: var(--accent-text); letter-spacing: 4px; }
.jeopardy-clue-text {
  font-family: var(--font-display); font-size: 2.8rem;
  color: var(--fg); text-align: center; line-height: 1.3;
  max-width: 800px; text-shadow: 0 0 30px rgba(255,255,255,.1);
}
.jeopardy-clue-blank {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: 4px;
  color: rgba(var(--fg-rgb),.18); text-transform: uppercase;
  border: 2px dashed rgba(var(--fg-rgb),.12); border-radius: 12px;
  padding: 30px 60px; min-width: 340px; text-align: center;
}
.jeopardy-clue-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.jeopardy-answer-text {
  font-family: var(--font-display);
  font-size: 3.4rem; color: rgba(var(--fg-rgb),.35); font-weight: 400;
  letter-spacing: 2px; text-align: center; display: none;
}
.jeopardy-answer-text.visible { display: block; color: var(--green); text-shadow: 0 0 34px rgba(var(--green-rgb),.4); animation: ddPop .4s ease; }
/* Images in clues / answers */
.jeopardy-clue-img { max-width: min(70vw, 620px); max-height: 42vh; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5); border: 2px solid rgba(var(--fg-rgb),.1); }
.jeopardy-answer-img { max-width: min(60vw, 520px); max-height: 40vh; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5); border: 2px solid rgba(var(--green-rgb),.35); margin-top: 4px; display: none; }
.jeopardy-answer-img.visible { display: block; animation: ddPop .4s ease; }
/* Aufdecken der Frage, alle Richtungen ausser D (D hat eine eigene
   Bauchbinden-Choreografie weiter unten). David 2026-10-15: "das ploppt nur
   so auf" - bisher stand die Frage ohne jede Bewegung im Bild, weil das
   Overlay schon offen ist und nur sein Inhalt getauscht wird.
   Nur der Schritt, der gerade dazukommt (data-neu, js/jeopardy.js), spielt:
   1. ein Lichtstoss in der Akzentfarbe geht vom Zentrum aus,
   2. eine Lichtkante zieht sich unter der Frage auf,
   3. die Woerter (span.jw) klappen einzeln aus der Tiefe nach vorn, aus der
      Unschaerfe, mit kurzem Nachfedern - die Frage baut sich lesbar auf,
   4. Betrag bekommt einen Schlag, Bilder steigen nach.
   Die Antwort kommt als Stempel: gross, gesperrt, unscharf -> scharf.
   Alle Endzustaende sind "none": das Standbild bleibt wie vorher. */
.jeopardy-clue-text .jw { display: inline-block; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"]::after,
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="antwort"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(var(--gold-rgb),.42), rgba(var(--gold-rgb),.12) 45%, transparent 72%);
  animation: jqStoss 1.1s cubic-bezier(.2,.7,.2,1) both;
}
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu="antwort"]::after {
  background: radial-gradient(ellipse 60% 45% at 50% 62%, rgba(var(--green-rgb),.45), rgba(var(--green-rgb),.12) 45%, transparent 72%);
}
:root:not([data-theme="D"]) .jeopardy-clue-overlay { isolation: isolate; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text { position: relative; perspective: 700px; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -10px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-text), transparent);
  box-shadow: 0 0 18px rgba(var(--gold-rgb),.9);
  animation: jqKante 1.6s cubic-bezier(.2,.8,.2,1) both;
}
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text .jw {
  transform-origin: 50% 100%;
  animation: jqWort .7s calc(.12s + min(calc(var(--i, 0) * 55ms), 1.3s)) cubic-bezier(.2,.9,.25,1.15) both;
}
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-pts { animation: jqSchlag .55s cubic-bezier(.3,1.6,.4,1) both; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="frage"] :is(.jeopardy-clue-img, .jeopardy-stage, .jeopardy-series, .jeopardy-steps) { animation: jqHoch .8s .3s cubic-bezier(.2,.9,.25,1.1) both; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu="verdeckt"] .jeopardy-clue-blank { animation: jqHoch .6s .1s cubic-bezier(.2,.8,.2,1) both; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="antwort"] .jeopardy-answer-text.visible { animation: jqStempel .75s cubic-bezier(.2,.9,.3,1.2) both; }
:root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu~="antwort"] .jeopardy-answer-img.visible { animation: jqHoch .7s .25s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes jqStoss {
  0%   { opacity: 0; transform: scale(.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes jqKante {
  0%   { opacity: 0; transform: scaleX(0); }
  35%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes jqWort {
  0%   { opacity: 0; transform: translateY(.5em) rotateX(-85deg) scale(.85); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  75%  { transform: translateY(-.05em) rotateX(10deg) scale(1.03); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes jqSchlag {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
@keyframes jqHoch {
  0%   { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes jqStempel {
  0%   { opacity: 0; transform: scale(1.9); filter: blur(12px); letter-spacing: .4em; }
  50%  { opacity: 1; filter: blur(0); }
  70%  { transform: scale(.96); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu]::after,
  :root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu] .jeopardy-clue-text::after { display: none; }
  :root:not([data-theme="D"]) .jeopardy-clue-overlay[data-neu] :is(.jw, .jeopardy-clue-pts, .jeopardy-clue-img, .jeopardy-stage, .jeopardy-series, .jeopardy-steps, .jeopardy-clue-blank, .jeopardy-answer-text, .jeopardy-answer-img) { animation: none !important; }
}
/* Staged (progressively revealed) image */
.jeopardy-stage {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); border: 2px solid rgba(var(--fg-rgb),.1);
  max-width: min(78vw, 760px);
}
.jeopardy-stage img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; background: var(--brd-well, #05081a); }
.jeopardy-stage-cover { position: absolute; inset: 0; display: grid; gap: 2px; }
.jeopardy-stage-tile { background: var(--tile, #0F1B5C); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: opacity .35s ease; }
.jeopardy-stage-tile.gone { opacity: 0; }
/* Bilder-Reihe: mehrere einzelne Bilder nebeneinander, eins nach dem anderen
   aufgedeckt (z.B. 5 Pokémon). Jede Zelle ist erst verdeckt, Klick deckt die
   nächste (links → rechts) auf. */
.jeopardy-series { display: grid; gap: 10px; width: 100%; max-width: min(92vw, 1150px); margin: 0 auto; }
.jeopardy-series-cell {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: var(--brd-well, #05081a); box-shadow: 0 6px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}
.jeopardy-series-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jeopardy-series-cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--tile-tex, none), var(--tile, linear-gradient(180deg, #1E3FAE 0%, #162E88 50%, #112370 100%));
  box-shadow: var(--tile-edge, inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.2));
  font-family: var(--font-display); font-size: 2.8rem; color: var(--tile-dim-fg, rgba(var(--fg-rgb),.4));
  transition: opacity .4s ease;
}
.jeopardy-series-cell.shown .jeopardy-series-cover { opacity: 0; pointer-events: none; }
.jeopardy-series-cell.shown img { animation: ddPop .4s ease; }
/* Schritt-Frage: bis zu 5 Schritte untereinander, die der Host einzeln
   einblendet. Ein Schritt ist eine Zeile, ein Bild oder beides. Noch nicht
   gezeigte Schritte halten ihren Platz frei, damit die Frage beim Aufdecken
   nicht springt. */
.jeopardy-steps {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  max-width: min(88vw, 900px); max-height: 62vh; overflow-y: auto;
}
.jeopardy-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* min-height:0 ist der Grund, warum die Bilder bei fuenf Schritten von
     selbst kleiner werden statt unten rauszulaufen: ohne die Zeile darf ein
     Flex-Kind nicht unter seine Inhaltsgroesse schrumpfen. */
  min-height: 0;
  padding: 6px 20px; border-radius: 10px;
  background: rgba(var(--fg-rgb),.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  opacity: 0; transition: opacity .35s ease;
}
/* Je mehr Schritte, desto kleiner - sonst schiebt der fuenfte die Loesung aus
   dem Bild. Die Bilder teilen sich die Hoehe, die uebrig bleibt. */
.jeopardy-step-text {
  font-family: var(--font-display); line-height: 1.2;
  font-size: calc(2.1rem - (var(--jstep-n, 2) - 2) * .17rem);
  color: var(--fg); text-align: center; letter-spacing: 1px;
}
.jeopardy-step-img {
  max-width: min(60vw, 460px); border-radius: 8px; display: block;
  max-height: calc(min(46vh, 380px) / var(--jstep-imgs, 1));
  min-height: 0; object-fit: contain;
}
.jeopardy-step.shown { opacity: 1; animation: ddPop .4s ease; }
.jeopardy-step.shown .jeopardy-step-text { text-shadow: 0 0 30px rgba(255,255,255,.12); }
/* Sound playback animation */
.jeopardy-sound-fx {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  background: rgba(5,8,26,.55); backdrop-filter: blur(4px); pointer-events: none;
  animation: fadeIn .3s ease;
}
.jsfx-ring {
  width: 170px; height: 170px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 4rem;
  background: radial-gradient(circle, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.02));
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.4), 0 0 60px rgba(var(--gold-rgb),.35);
  animation: jsfxRing 1.4s ease-in-out infinite;
}
@keyframes jsfxRing { 0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.4),0 0 50px rgba(var(--gold-rgb),.3);} 50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(var(--gold-rgb),.25),0 0 90px rgba(var(--gold-rgb),.5);} }
.jsfx-bars { display: flex; gap: 8px; align-items: flex-end; height: 130px; }
.jsfx-bar {
  width: 15px; height: 120px; transform-origin: bottom; border-radius: 7px;
  background: linear-gradient(180deg, #FFE066, var(--gold-deep));
  box-shadow: 0 0 14px rgba(var(--gold-rgb),.4);
  animation: jsfxBounce .9s ease-in-out infinite;
}
@keyframes jsfxBounce { 0%,100%{transform:scaleY(.18);} 50%{transform:scaleY(1);} }
/* Kleine Fassung: sobald auf der Leinwand etwas steht (Schritte, Bilder,
   Fragetext), rutscht die Anzeige nach unten rechts und laesst alles andere
   in Ruhe - keine Abdunklung, kein Weichzeichner. Oben rechts sitzt schon
   die Buzzer-Anzeige. */
.jeopardy-sound-fx.compact {
  inset: auto 18px 18px auto;
  flex-direction: row; gap: 14px; align-items: center;
  padding: 10px 16px; border-radius: 14px;
  background: rgba(10,13,40,.82); backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(var(--gold-rgb),.25);
}
.jeopardy-sound-fx.compact .jsfx-ring {
  width: 44px; height: 44px; font-size: 1.3rem;
  /* Eigene Pulsfolge: die grosse wirft bis zu 90 px Schein, das waere um
     einen 44-px-Ring nur noch ein Fleck. */
  animation: jsfxRingSmall 1.4s ease-in-out infinite;
}
@keyframes jsfxRingSmall {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 2px rgba(var(--gold-rgb),.4), 0 0 14px rgba(var(--gold-rgb),.3); }
  50%     { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.25), 0 0 24px rgba(var(--gold-rgb),.45); }
}
.jeopardy-sound-fx.compact .jsfx-bars { height: 30px; gap: 4px; }
.jeopardy-sound-fx.compact .jsfx-bar { width: 6px; height: 28px; border-radius: 3px; box-shadow: 0 0 8px rgba(var(--gold-rgb),.35); }
/* Buzzer corner widget (Jeopardy und Family Feud teilen sich das Aussehen) */
#jeopardy-buzzer, #feud-buzzer {
  position: fixed; top: 14px; right: 14px; z-index: 1300; width: 236px;
  background: rgba(10,13,40,.88); border: 1px solid rgba(var(--fg-rgb),.12);
  border-radius: 12px; padding: 12px; backdrop-filter: blur(8px);
  font-family: var(--font-body); box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.jbz-title { font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(var(--fg-rgb),.4); font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.jbz-armed { color: var(--green); }
.jbz-idle { color: #FF8A80; }
.jbz-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; margin-bottom: 4px; background: rgba(var(--fg-rgb),.04); animation: jbzIn .25s ease; }
.jbz-row.first { background: linear-gradient(90deg, rgba(var(--gold-rgb),.22), rgba(var(--gold-rgb),.04)); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.3); }
@keyframes jbzIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.jbz-rank { font-family: var(--font-display); color: var(--accent-text); font-size: 1.15rem; width: 16px; }
.jbz-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.jbz-name { flex: 1; font-weight: 700; font-size: .8rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbz-time { font-family: var(--font-display); font-size: 1.15rem; color: var(--fg); letter-spacing: 1px; }
.jbz-legend { font-size: .62rem; color: rgba(var(--fg-rgb),.4); margin-top: 8px; line-height: 1.7; border-top: 1px solid rgba(var(--fg-rgb),.06); padding-top: 6px; }
.jbz-qr { width: 100%; margin-top: 8px; padding: 8px; border: none; border-radius: 8px; background: linear-gradient(180deg,var(--gold),var(--gold-deep)); color: var(--on-accent); font-family: var(--font-body); font-weight: 800; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.jbz-qr:hover { filter: brightness(1.08); }
/* QR-Overlay */
#qr-overlay { position: fixed; inset: 0; z-index: 4500; background: rgba(5,8,26,.94); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: fadeIn .25s ease; }
.qr-card { background: #fff; border-radius: 22px; padding: 30px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.qr-title { font-family: var(--font-display); font-size: 2rem; color: var(--ink); letter-spacing: 3px; }
#qr-box { padding: 4px; background: #fff; line-height: 0; }
#qr-box img, #qr-box canvas { display: block; }
.qr-url { color: #1a2a8a; font-weight: 800; font-size: 1.05rem; word-break: break-all; max-width: 460px; text-align: center; }
.qr-hint { color: rgba(0,0,0,.4); font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; }
/* Passwort-Gate (nur Host) */
#host-gate { position: fixed; inset: 0; z-index: 5000; background: var(--bg);
  background-image: var(--bg-img); background-size: var(--bg-size);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }
#host-gate .hg-title { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent-text); letter-spacing: 5px; }
#host-gate .hg-sub { color: rgba(var(--fg-rgb),.5); font-size: .9rem; max-width: 380px; line-height: 1.5; }
#host-gate .hg-row { display: flex; gap: 8px; width: 100%; max-width: 340px; }
#host-gate input { flex: 1; padding: 14px 18px; border-radius: 12px; border: 2px solid rgba(var(--fg-rgb),.15); background: rgba(0,0,0,.3); color: var(--fg); font-size: 1.1rem; text-align: center; font-weight: 700; outline: none; }
#host-gate.err input { border-color: var(--red); animation: hgShake .3s; }
@keyframes hgShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
#jeopardy-setup-screen { gap: 24px; margin-top: 10px; }

/* ── INTRO-BÜHNEN ──────────────────────────────────────────────────────────
   Alle Intros laufen über playIntro() in js/intro.js. Keller, Tag 2 und
   Geburtstag sind dort Vorlagen im selben Datenformat wie das eigene Intro,
   es gibt also nur noch einen Aufbau und eine Taktung. Drei Bühnen:
   #kg (Keller, Gold), #kgb (Geburtstag, wärmer, mit Luftballons) und
   #kgn (Neon-Nacht). Alle stecken im Wrapper #kg-overlay.

   Bis Oktober 2026 standen Keller, Tag 2 und Geburtstag als fertiges Markup
   in feud.js und jeopardy.js, mit fest verdrahteter Taktung .s1 bis .s7 hier
   im Stylesheet - jede Änderung an der Bühne an drei Stellen.

   Warum alles in CSS und nichts in GSAP, obwohl GSAP in vendor/ liegt: das
   Zuschauerfenster (mainscreen/) führt keinen App-Code aus, es spiegelt nur
   den DOM des Hauptfensters (morphMirror in feud.js). Eine CSS-Animation
   läuft dort selbstständig, sobald Klasse und style-Attribut angekommen sind.
   GSAP schriebe dagegen jeden Frame ein style-Attribut: ein Spiegel-Durchlauf
   pro Frame, und ist das Hauptfenster im Hintergrund, drosselt der Browser
   es und das Intro auf der Leinwand bleibt stehen.

   Taktung: jede Stufe trägt im style-Attribut --d (Start), --dur (Länge) und
   --st (Abstand zwischen zwei Buchstaben), jeder Buchstabe trägt --i. Die
   Verzögerungen rechnet calc() aus.

   Schriftgrößen in vh/vw statt px: das Zuschauerfenster läuft mal mit
   1280×720, mal im Vollbild am Beamer. Die festen 78px von früher waren im
   Vollbild klein, auf schmalen Fenstern zu breit. min() deckt beides ab,
   die Untergrenzen in max() halten die Regel "nichts unter 12px" ein. */

#kg-overlay{position:fixed;inset:0;z-index:4000;background:#141420;cursor:pointer;user-select:none;animation:kgFadeIn .8s ease both;}
#kg-overlay.leaving{animation:kgFadeOut .8s ease forwards;}
@keyframes kgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes kgFadeOut{from{opacity:1}to{opacity:0}}

/* ── Gemeinsam für alle drei Bühnen ── */
#kg, #kgb, #kgn{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;}
#kg-overlay .screen{position:absolute;left:0;right:0;top:40px;bottom:30px;max-width:none;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 34px;z-index:5;opacity:0;}
#kg-overlay .header{position:absolute;top:22px;left:0;right:0;z-index:7;text-align:center;font-size:max(14px,min(2.8vh,1.8vw));}
#kg-overlay .lbl{font-family:var(--font-body);font-weight:700;letter-spacing:3px;font-size:max(14px,min(2.8vh,1.8vw));text-transform:uppercase;margin:0 0 12px;}
#kg-overlay .big{font-size:min(10.8vh,6.2vw);line-height:.98;margin:0;}
#kg-overlay .big.sm{font-size:min(8vh,4.6vw);}
#kg-overlay .sub{font-family:var(--font-body);font-weight:600;font-size:max(15px,min(3.3vh,2.1vw));letter-spacing:.5px;margin:14px 0 0;}
#kg-overlay .kg-hint{position:absolute;bottom:20px;left:0;right:0;z-index:7;text-align:center;font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(var(--fg-rgb),.3);animation:introPulse 2.5s ease-in-out infinite;}

/* Stufen: wann und wie lange steht im style-Attribut, welche Bewegung hier. */
#kg-overlay .cs{animation-delay:var(--d);animation-duration:var(--dur);animation-timing-function:ease;animation-fill-mode:both;}
#kg.play .cs, #kgb.play .cs{animation-name:kgBeat;}
#kg.play .cs.hold, #kgb.play .cs.hold{animation-name:kgBeatHold;}
#kgn.play .cs{animation-name:knBeat;}
#kgn.play .cs.hold{animation-name:knBeatHold;}
@keyframes kgBeat{0%{opacity:0;transform:translateY(26px) scale(.9)}9%{opacity:1;transform:translateY(0) scale(1)}86%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(.96)}}
@keyframes kgBeatHold{0%{opacity:0;transform:scale(.55)}55%{opacity:1;transform:scale(1.08)}75%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}

/* ── Leuchtbuchstaben ──
   Das eine, was hängen bleiben soll: die großen Zeilen stehen erst als
   dunkle, tote Leuchtreklame da, dann geht Buchstabe für Buchstabe an -
   mit einem Flackern, wie eine Glühbirne, die nicht gleich will. Alles
   andere auf der Bühne bleibt ruhig.

   Jedes Wort ist ein .w mit nowrap, sonst bräche der Browser mitten im Wort
   um, sobald die Buchstaben einzelne inline-blocks sind. */
#kg-overlay .big .w{display:inline-block;white-space:nowrap;}
#kg-overlay .big .ch{display:inline-block;}
#kg-overlay .play .big .ch{animation:kgBulbOn .62s ease-out both;animation-delay:calc(var(--d) + .25s + var(--i) * var(--st));}
#kg-overlay .play .big .ch.qm{animation:kgBulbOn .62s ease-out calc(var(--d) + .25s + var(--i) * var(--st)) both,kgWob 1.1s ease-in-out calc(var(--d) + 1s) infinite;}
@keyframes kgBulbOn{
  0%{opacity:.14;filter:brightness(.35) saturate(.4);transform:translateY(-.06em);}
  20%{opacity:1;filter:brightness(1.9) saturate(1);transform:translateY(0);}
  30%{opacity:.3;filter:brightness(.5);}
  46%{opacity:1;filter:brightness(1.5);}
  100%{opacity:1;filter:none;transform:none;}}
@keyframes kgWob{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}

/* Scheinwerfer-Schlag: wenn eine Stufe kommt, flammt hinter ihr ein warmer
   Lichtfleck auf und sinkt auf ein Glimmen zurück. Er gehört zur Stufe
   (::before), blendet also mit ihr aus. Nur Keller und Geburtstag - die
   Neon-Bühne hat an der Stelle schon ihr dunkles Oval. */
#kg .cs::before, #kgb .cs::before{content:"";position:absolute;left:50%;top:50%;width:min(110vh,900px);height:min(70vh,560px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,120,.26),rgba(255,214,120,.08) 60%,transparent);z-index:-1;pointer-events:none;opacity:0;}
#kg.play .cs::before, #kgb.play .cs::before{animation:kgHit 1.4s ease-out var(--d) both;}
@keyframes kgHit{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}}

/* ── Extras einer Stufe (Feld "Extra" im Editor) ── */
#kg-overlay .teamrow{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:16px;}
#kg-overlay .teamrow svg{width:min(10vh,90px);height:auto;}
#kg-overlay .plus{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px;}
#kg-overlay .pill{font-family:var(--font-body);font-weight:800;font-size:max(16px,min(3.6vh,2.2vw));color:#141420;background:#FFC93C;border-radius:22px;padding:9px 22px;letter-spacing:1px;}
#kg-overlay .plus b{font-size:max(24px,min(5.5vh,3.4vw));color:#FF5DA2;}
#kg-overlay .big.euro{font-size:min(16vh,9.4vw);margin:4px 0;}

/* Torte mit flackernden Kerzen */
#kg-overlay .cake{position:relative;width:190px;height:150px;margin-bottom:26px;flex:none;}
#kg-overlay .cake .plate{position:absolute;bottom:0;left:0;right:0;height:12px;border-radius:8px;background:#E8E3F0;box-shadow:0 3px 0 #9d95b5;}
#kg-overlay .cake .tier{position:absolute;left:14px;right:14px;border-radius:8px;border:3px solid #3a1226;}
#kg-overlay .cake .t1{bottom:10px;height:46px;background:linear-gradient(180deg,#FF7FB8,#E24C8E);}
#kg-overlay .cake .t2{bottom:54px;left:30px;right:30px;height:38px;background:linear-gradient(180deg,#FFD9A0,#F0AC63);}
#kg-overlay .cake .icing{position:absolute;bottom:88px;left:30px;right:30px;height:14px;border-radius:8px;background:#FFF6E4;border:3px solid #3a1226;}
#kg-overlay .cake .candle{position:absolute;bottom:100px;width:8px;height:30px;border-radius:2px;background:repeating-linear-gradient(45deg,#fff 0 4px,#FF5DA2 4px 8px);border:2px solid #3a1226;}
#kg-overlay .cake .c1{left:64px;}
#kg-overlay .cake .c2{left:91px;}
#kg-overlay .cake .c3{left:118px;}
#kg-overlay .cake .flame{position:absolute;bottom:130px;width:12px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#FFF3B0,#FFA630 70%,#FF6A2A);box-shadow:0 0 16px 6px rgba(255,180,80,.55);transform-origin:bottom center;}
#kg-overlay .cake .f1{left:62px;animation:kgbFlame 1.1s ease-in-out infinite;}
#kg-overlay .cake .f2{left:89px;animation:kgbFlame 1.3s ease-in-out infinite .2s;}
#kg-overlay .cake .f3{left:116px;animation:kgbFlame .95s ease-in-out infinite .45s;}
@keyframes kgbFlame{0%,100%{transform:scale(1) rotate(-4deg);opacity:.95}50%{transform:scale(1.18) rotate(5deg);opacity:1}}

/* ── #kg: Kellerbühne ── */
#kg{background:#141420;}
#kg .wall, #kgb .wall{position:absolute;inset:0;background:#171726;background-image:repeating-linear-gradient(0deg,#1b1b2e 0 2px,transparent 2px 74px),repeating-linear-gradient(90deg,#1b1b2e 0 2px,transparent 2px 96px);opacity:.9;}
#kg .floor, #kgb .floor{position:absolute;left:0;right:0;bottom:0;height:66px;background:#0f0f1a;box-shadow:0 -2px 0 #2a2a44;}
#kg .cone, #kgb .cone{position:absolute;top:-30px;width:300px;height:640px;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:rgba(255,224,130,.09);z-index:1;transform-origin:top center;pointer-events:none;}
#kg .coneL, #kgb .coneL{left:60px;animation:kgSweepL 4.2s ease-in-out infinite;}
#kg .coneR, #kgb .coneR{right:60px;animation:kgSweepR 3.6s ease-in-out infinite;}
@keyframes kgSweepL{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(14deg)}}
@keyframes kgSweepR{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-14deg)}}
#kg .cord, #kgb .cord{position:absolute;top:0;right:110px;width:3px;height:64px;background:#3a3a52;z-index:2;transform-origin:top center;animation:kgSwing 2.4s ease-in-out infinite;}
@keyframes kgSwing{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
#kg .bulb, #kgb .bulb{position:absolute;top:60px;left:-11px;width:22px;height:28px;border-radius:50% 50% 48% 48%;background:#FFE27A;box-shadow:0 0 20px 7px rgba(255,220,110,.5),0 0 6px 2px #fff6cf inset;}
#kg .bulb:after, #kgb .bulb:after{content:"";position:absolute;top:-6px;left:6px;width:10px;height:7px;background:#6b6b46;border-radius:2px;}
/* Lämpchenrahmen als Lauflicht: jede dritte Birne gleichzeitig, die
   Verzögerung (i % 3) setzt runKgIntro. Vorher blinkten alle im selben
   Takt, das las sich als Warnblinker statt als Theaterrahmen. */
#kg .frame, #kgb .frame{position:absolute;inset:0;z-index:6;pointer-events:none;}
#kg .mb, #kgb .mb{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);animation:kgChase 1.2s linear infinite;}
@keyframes kgChase{0%,30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}34%,100%{opacity:.22;transform:translate(-50%,-50%) scale(1)}}
#kg .header, #kgb .header{color:#FFC93C;letter-spacing:2px;-webkit-text-stroke:1px #2a1600;text-shadow:0 2px 0 #9c6a08;}
#kg .header .star, #kgb .header .star{color:#FF5DA2;font-size:.8em;vertical-align:.1em;margin:0 8px;}
#kg .lbl{color:#FF7FB8;}
#kg .sub{color:#FFF3D6;}
#kg .spark, #kgb .spark{position:absolute;width:10px;height:10px;z-index:4;background:#FFE27A;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:kgTw 1.8s ease-in-out infinite;}
@keyframes kgTw{0%,100%{opacity:.12;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(90deg)}}

/* ── #kgb: Geburtstag ──
   Dieselbe Bühne wie #kg, wärmer eingefärbt, dazu Luftballons. Hier steht
   nur, was von #kg abweicht. */
#kgb{background:#1a1122;}
#kgb .wall{background:#20142b;background-image:repeating-linear-gradient(0deg,#291836 0 2px,transparent 2px 74px),repeating-linear-gradient(90deg,#291836 0 2px,transparent 2px 96px);}
#kgb .floor{background:#150d1c;box-shadow:0 -2px 0 #3a2450;}
#kgb .cone{background:rgba(255,190,120,.10);}
#kgb .coneL{animation-duration:4.6s;}
#kgb .coneR{animation-duration:3.9s;}
#kgb .cord{background:#4a3160;}
#kgb .bulb{background:#FFD9A0;box-shadow:0 0 20px 7px rgba(255,190,120,.5),0 0 6px 2px #fff6cf inset;}
#kgb .bulb:after{background:#6b5546;}
#kgb .lbl{color:#FF9EC7;}
#kgb .sub{color:#FFF0DC;}
#kgb .spark{background:#FFD9A0;}
#kgb .cs::before{background:radial-gradient(closest-side,rgba(255,170,140,.26),rgba(255,170,140,.08) 60%,transparent);}

/* Luftballons steigen nur an den Rändern auf (Bahnen setzt playIntro). Quer
   durch die Mitte wandern sie hinter Torte und Schrift durch und werden als
   Teil des Bildes gelesen statt als Deko. */
#kgb .balloon{position:absolute;bottom:-140px;width:54px;height:66px;border-radius:50% 50% 48% 48%;z-index:3;opacity:.9;animation:kgbFloat linear infinite;}
#kgb .balloon:after{content:"";position:absolute;bottom:-40px;left:50%;width:1px;height:40px;background:rgba(var(--fg-rgb),.25);}
#kgb .balloon:before{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:inherit;}
@keyframes kgbFloat{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-120vh) rotate(6deg)}}

/* ── #kgn: Neon-Nacht ──
   Bewusst nichts von der Kellerbühne geerbt: dort Holz, Gold und warmes
   Scheinwerferlicht, hier Nachthimmel, Gitterboden und Leuchtschrift. Wer
   beide nacheinander sieht, soll sie nicht verwechseln können.

   Der Gitterboden ist ein flaches Element, das per perspective/rotateX nach
   hinten gekippt wird - deshalb läuft er über die Bühnenbreite hinaus
   (left/right negativ), sonst klafften an den Seiten Lücken. */
#kgn{background:#07031a;}
#kgn .sky{position:absolute;inset:0;background:linear-gradient(180deg,#05021a 0%,#1b0940 42%,#4a1152 56%,#0a0324 100%);}
#kgn .stars{position:absolute;left:0;right:0;top:0;bottom:46%;opacity:.8;animation:knTwinkle 4.5s ease-in-out infinite;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 24%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 28% 12%,#cfe8ff,transparent),
    radial-gradient(1.8px 1.8px at 44% 30%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 62% 16%,#ffe9f7,transparent),
    radial-gradient(1.9px 1.9px at 78% 27%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 88% 9%,#cfe8ff,transparent),
    radial-gradient(1.5px 1.5px at 7% 45%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 53% 44%,#fff,transparent);}
#kgn .sun{position:absolute;left:50%;bottom:46%;width:min(42vh,300px);height:min(42vh,300px);transform:translate(-50%,42%);border-radius:50%;
  background:linear-gradient(180deg,#FFE86B 0%,#FF9A4D 40%,#FF4E8E 72%,#C22BC9 100%);
  box-shadow:0 0 90px 26px rgba(255,78,142,.35);}
/* Die Querstreifen: der klassische Retro-Sonnen-Look. */
#kgn .sun:after{content:"";position:absolute;left:0;right:0;top:46%;bottom:0;border-radius:0 0 50% 50%;
  background:repeating-linear-gradient(180deg,transparent 0 7px,#1b0940 7px 12px);}
#kgn .horizon{position:absolute;left:0;right:0;bottom:46%;height:2px;background:#FF7AC6;box-shadow:0 0 22px 7px rgba(255,122,198,.55);z-index:2;}
#kgn .grid{position:absolute;left:-60%;right:-60%;bottom:0;height:46%;z-index:2;opacity:.8;
  background-image:linear-gradient(#FF2E88 2px,transparent 2px),linear-gradient(90deg,#7DF9FF 2px,transparent 2px);
  background-size:100% 44px,74px 100%;
  transform:perspective(300px) rotateX(72deg);transform-origin:bottom center;
  animation:knGrid 1.8s linear infinite;}
#kgn .scan{position:absolute;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);}
#kgn .header{color:#7DF9FF;letter-spacing:5px;text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 10px rgba(125,249,255,.9),0 0 30px rgba(125,249,255,.5);}
/* Die Stufen liegen mitten auf der Sonne. Ohne das dunkle Oval darunter
   stehen helle Schrift und helle Sonne übereinander und die kleine Zeile
   (Cyan auf Orange) ist nicht mehr zu lesen. Das Oval ist Teil der Stufe,
   blendet also mit ihr ein und aus. */
#kgn .screen{background:radial-gradient(ellipse 54% 34% at 50% 50%,rgba(6,2,22,.72) 0%,rgba(6,2,22,.45) 55%,transparent 78%);}
#kgn .lbl{font-weight:800;letter-spacing:6px;color:#7DF9FF;margin:0 0 14px;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 12px rgba(125,249,255,.75);}
#kgn .big{color:var(--fg);line-height:1;-webkit-text-stroke:2px #FF2E88;
  text-shadow:0 0 8px #FF2E88,0 0 26px rgba(255,46,136,.75),0 0 62px rgba(255,46,136,.45);}
#kgn .big.pink{-webkit-text-stroke:2px #7DF9FF;
  text-shadow:0 0 8px #7DF9FF,0 0 26px rgba(125,249,255,.75),0 0 62px rgba(125,249,255,.4);}
#kgn .big.euro{color:var(--fg);-webkit-text-stroke:2px #7FE5B0;
  text-shadow:0 0 8px #7FE5B0,0 0 26px rgba(127,229,176,.75),0 0 62px rgba(127,229,176,.4);}
#kgn .sub{color:#D9CCFF;margin:16px 0 0;text-shadow:0 0 14px rgba(160,120,255,.5);}
#kgn .kg-hint{color:rgba(200,235,255,.6);text-shadow:0 2px 6px rgba(0,0,0,.9);}
#kgn .pill{background:#7DF9FF;}
/* Neonröhren zünden statt Birnen: unregelmäßiger, zwei Muster im Wechsel,
   damit nicht alle Buchstaben im selben Takt zucken. */
#kgn.play .big .ch{animation-name:knIgnite;animation-duration:.9s;}
#kgn.play .big .w .ch:nth-child(even){animation-name:knIgnite2;}
@keyframes knGrid{from{background-position:0 0,0 0;}to{background-position:0 44px,0 0;}}
@keyframes knTwinkle{0%,100%{opacity:.55}50%{opacity:.95}}
/* Die Kellerbühne schiebt die Stufen von unten hoch, hier fahren sie
   seitlich mit Unschärfe ein. Gleiche Taktung, anderer Eindruck. */
@keyframes knBeat{
  0%{opacity:0;transform:translateX(-70px) skewX(-9deg);filter:blur(7px);}
  11%{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);}
  86%{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);}
  100%{opacity:0;transform:translateX(56px) skewX(7deg);filter:blur(6px);}}
@keyframes knBeatHold{
  0%{opacity:0;transform:scale(1.35);filter:blur(12px);}
  58%{opacity:1;transform:scale(.98);filter:blur(0);}
  100%{opacity:1;transform:scale(1);filter:blur(0);}}

/* ── Profi-Schicht: Licht, Material, Kamera ──────────────────────────────
   Was eine Fernseh-Intro von einer Folie unterscheidet, ist selten EIN
   Effekt, sondern Schichten: Material in der Schrift, Licht im Raum, ein
   Ereignis beim Stufenwechsel und ein Bildfilter über allem. Von hinten nach
   vorn:

     Wand (zieht langsam auf) · Strahlenkranz · Dunst · Goldstaub hinten
     · Vignette · Stufe mit Lichtschlag, Flare, Konfetti, Metallschrift
     · Goldstaub vorn (groß, unscharf) · Lämpchenrahmen · Filmkorn

   Alles bewegt nur transform und opacity, bis auf den Glanz in der Schrift
   (background-position, einmal je Stufe). Das zählt doppelt, weil Haupt-
   und Zuschauerfenster dieselbe Bühne gleichzeitig zeichnen.

   Eigene Schriften statt --font-logo: die Intros erbten bisher die Schrift
   des gewählten Themes, bei "Press Start 2P" also eine Pixelschrift. Keine
   Fernseh-Intro sieht so aus. Bungee ist Leuchtreklamen-Schrift (fett,
   gerade Kanten, trägt Metall und Tiefe), Tilt Neon ist nach Neonröhren
   gezeichnet. Beide lädt index.html und injectBoardStyles() fürs
   Zuschauerfenster. */

#kg, #kgb{font-family:'Bungee',var(--font-logo);}
#kgn{font-family:'Tilt Neon',var(--font-logo);}

/* Metall statt Farbe. Der Verlauf hat eine harte Kante knapp unter der
   Mitte - die Horizontlinie, an der Chrom und Gold den Raum spiegeln. Die
   erste Ebene ist der Glanzstreifen, er steht außerhalb und läuft einmal
   durch (kgShine). text-shadow muss weg: bei durchsichtiger Füllung läge
   der Schatten ÜBER dem Verlauf. Die Tiefe kommt deshalb als gestapelte
   drop-shadows an der ganzen Zeile - jeder verschiebt das schon Gezeichnete
   weiter, so entsteht eine Extrusion statt vier einzelner Schatten. */
#kg .big .ch, #kgb .big .ch{
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),
    linear-gradient(180deg,#fffbe6 0%,#ffe680 22%,#f7c42f 44%,#9a5b07 50%,#e9a91f 58%,#ffd85a 80%,#fff0b0 100%);
  background-size:300% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.02em #4a2800;padding:0 .015em;}
#kg .big.pink .ch, #kgb .big.pink .ch{
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),
    linear-gradient(180deg,#fff0f7 0%,#ff9cc9 24%,#ff4f9a 46%,#8e1449 50%,#e23c86 60%,#ff8cc0 82%,#ffe0ef 100%);
  -webkit-text-stroke-color:#3d0820;}
#kg .big.euro .ch, #kgb .big.euro .ch{
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),
    linear-gradient(180deg,#f0fff7 0%,#a6f5cf 24%,#3fd394 46%,#0d5c3a 50%,#2fbf80 60%,#8ef0c0 82%,#e6fff3 100%);
  -webkit-text-stroke-color:#06301e;}
#kg .big, #kgb .big{
  filter:drop-shadow(0 .025em 0 #8a5600) drop-shadow(0 .025em 0 #6b4100) drop-shadow(0 .025em 0 #4a2c00)
         drop-shadow(0 .03em 0 #2b1900) drop-shadow(0 .14em .14em rgba(0,0,0,.55)) drop-shadow(0 0 .35em rgba(255,186,60,.35));}
#kg .big.pink, #kgb .big.pink{
  filter:drop-shadow(0 .025em 0 #8e1449) drop-shadow(0 .025em 0 #6d0f38) drop-shadow(0 .025em 0 #4d0a27)
         drop-shadow(0 .03em 0 #2e0517) drop-shadow(0 .14em .14em rgba(0,0,0,.55)) drop-shadow(0 0 .35em rgba(255,79,154,.35));}
#kg .big.euro, #kgb .big.euro{
  filter:drop-shadow(0 .025em 0 #137a4c) drop-shadow(0 .025em 0 #0d5c3a) drop-shadow(0 .025em 0 #08402a)
         drop-shadow(0 .03em 0 #042619) drop-shadow(0 .14em .14em rgba(0,0,0,.55)) drop-shadow(0 0 .4em rgba(63,211,148,.4));}

/* Erst geht der Buchstabe an, dann läuft einmal Glanz über die Zeile. Auf
   der letzten Stufe kommt der Glanz alle vier Sekunden wieder, solange sie
   stehen bleibt - ein stehendes Bild, das trotzdem lebt. */
#kg.play .big .ch, #kgb.play .big .ch{
  animation:kgBulbOn .62s ease-out calc(var(--d) + .25s + var(--i) * var(--st)) both,
            kgShine .8s ease-in-out calc(var(--d) + 1.5s + var(--i) * .035s) both;}
#kg.play .cs.hold .big .ch, #kgb.play .cs.hold .big .ch{
  animation:kgBulbOn .62s ease-out calc(var(--d) + .25s + var(--i) * var(--st)) both,
            kgShineLoop 4s ease-in-out calc(var(--d) + 1.5s + var(--i) * .035s) infinite;}
@keyframes kgShine{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}
@keyframes kgShineLoop{0%{background-position:100% 0,0 0}20%,100%{background-position:0% 0,0 0}}

/* Die kleine Zeile als Bauchbinde: zwei Linien wachsen von ihr nach außen. */
#kg-overlay .lbl{display:flex;align-items:center;justify-content:center;gap:.9em;}
#kg-overlay .lbl::before, #kg-overlay .lbl::after{content:"";flex:none;width:min(8vw,90px);height:2px;background:linear-gradient(90deg,transparent,currentColor);transform:scaleX(0);transform-origin:right center;}
#kg-overlay .lbl::after{background:linear-gradient(270deg,transparent,currentColor);transform-origin:left center;}
#kg-overlay .play .lbl::before, #kg-overlay .play .lbl::after{animation:kgRule .8s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .2s) both;}
@keyframes kgRule{to{transform:scaleX(1)}}
#kg .header, #kgb .header{letter-spacing:3px;-webkit-text-stroke:0;text-shadow:0 2px 0 #6b4100,0 0 14px rgba(255,186,60,.45);}

/* Strahlenkranz hinter der Schrift - das Zeichen der großen Samstagabend-
   Shows. Kaum sichtbar (9 %), dreht in 80 Sekunden einmal herum, läuft
   nach außen in einer Maske aus. 160vmax, damit er auch gedreht keine
   Ecke zeigt. */
#kg .rays, #kgb .rays{position:absolute;left:50%;top:52%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,206,110,.09) 0deg 5deg,transparent 5deg 14deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 42%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 42%);
  animation:kgRays 80s linear infinite;}
#kgb .rays{background:repeating-conic-gradient(from 0deg,rgba(255,170,140,.10) 0deg 5deg,transparent 5deg 14deg);}
@keyframes kgRays{to{transform:rotate(360deg)}}

/* Dunst: zwei weiche Lichtwolken, die langsam wandern. Ohne Dunst sehen
   Scheinwerfer aus wie Dreiecke; mit Dunst wie Licht in einem Raum. */
#kg .haze, #kgb .haze{position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:radial-gradient(40% 35% at 30% 60%,rgba(255,170,60,.16),transparent 70%),radial-gradient(35% 30% at 72% 40%,rgba(255,80,160,.12),transparent 70%);
  animation:kgHaze 18s ease-in-out infinite alternate;}
@keyframes kgHaze{from{transform:translate(-3%,2%) scale(1)}to{transform:translate(3%,-2%) scale(1.08)}}

/* Kamera: die Wand zieht über die ganze Intro ganz langsam auf. Man sieht
   es nicht bewusst, aber das Bild steht nie ganz still. */
#kg.play .wall, #kgb.play .wall{animation:kgPush 40s ease-out both;}
@keyframes kgPush{from{transform:scale(1.08)}to{transform:scale(1)}}

/* Vignette und Filmkorn: der Unterschied zwischen "Webseite" und "Bild". */
#kg-overlay .vig{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 50%,rgba(0,0,0,.7) 100%);}
#kg-overlay .grain{position:absolute;inset:-50%;z-index:9;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kgGrain .5s steps(4) infinite;}
@keyframes kgGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* Anamorphe Flare beim Stufenwechsel: ein Lichtstrich quer durchs Bild,
   wie ihn Kinoobjektive aus Scheinwerfern ziehen. Das Ereignis, das jede
   neue Stufe ankündigt. */
#kg-overlay .cs .flare{position:absolute;left:-10%;right:-10%;top:50%;height:3px;margin-top:-1.5px;z-index:-1;pointer-events:none;opacity:0;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(255,236,200,0) 10%,rgba(255,244,220,.95) 50%,rgba(255,236,200,0) 90%,transparent);
  box-shadow:0 0 18px 4px rgba(255,200,120,.55);}
#kg-overlay .play .cs .flare{animation:kgFlare 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d) + .15s) both;}
#kgn .cs .flare{background:linear-gradient(90deg,transparent,rgba(125,249,255,.95) 50%,transparent);box-shadow:0 0 18px 4px rgba(125,249,255,.6);}
@keyframes kgFlare{0%{opacity:0;transform:scaleX(.05)}15%{opacity:1}100%{opacity:0;transform:scaleX(1.2)}}

/* Goldstaub (playIntro streut ihn): kleine Körner hinten, wenige große,
   weiche vorn - die unscharfen vorn geben dem Bild Tiefe wie eine Kamera
   mit offener Blende. Weichheit über den Verlauf, nicht über filter:blur,
   das wäre bei 30 bewegten Teilchen zu teuer. */
#kg-overlay .dust{position:absolute;bottom:-4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,244,214,.95),rgba(255,200,90,.45) 40%,transparent 70%);
  animation:kgDust linear infinite;}
#kg-overlay .dust.vorn{z-index:8;background:radial-gradient(circle,rgba(255,236,190,.35),rgba(255,200,90,.12) 45%,transparent 70%);}
#kgb .dust{background:radial-gradient(circle,rgba(255,236,236,.95),rgba(255,150,170,.45) 40%,transparent 70%);}
@keyframes kgDust{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx),-110vh,0)}}

/* Konfetti-Explosion hinter der Schrift: auf der Geburtstagsbühne bei jeder
   Stufe, sonst beim Geldbetrag und auf der letzten Stufe. Erst schnell nach
   außen, dann fallen - die zweite Kurve beschleunigt, das liest sich als
   Schwerkraft. */
#kg-overlay .cf{position:absolute;left:50%;top:50%;width:10px;height:16px;margin:-8px 0 0 -5px;background:var(--c);border-radius:2px;opacity:0;pointer-events:none;z-index:-1;}
#kg-overlay .play .cf{animation:kgBurst 2.6s calc(var(--d) + .3s) both;}
@keyframes kgBurst{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4);animation-timing-function:cubic-bezier(.1,.8,.3,1);}
  45%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6);}
  100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 38vh)) rotate(calc(var(--r) * 3)) scale(1);}}

/* Neon: beim Zünden zieht die Röhre kurz Farbsäume (rot/cyan versetzt),
   wie ein Bildschirm, der das Signal noch nicht hat. */
@keyframes knIgnite{0%{opacity:.07}8%{opacity:1;text-shadow:-4px 0 rgba(255,0,90,.85),4px 0 rgba(0,240,255,.85)}12%{opacity:.15}20%{opacity:.9;text-shadow:-2px 0 rgba(255,0,90,.6),2px 0 rgba(0,240,255,.6)}24%{opacity:.2}38%{opacity:1}100%{opacity:1}}
@keyframes knIgnite2{0%,14%{opacity:.07}18%{opacity:1;text-shadow:-4px 0 rgba(255,0,90,.85),4px 0 rgba(0,240,255,.85)}26%{opacity:.25}44%{opacity:1}100%{opacity:1}}
#kgn .big{letter-spacing:.04em;}
#kgn .header{font-family:'Tilt Neon',var(--font-logo);}

/* Ruhige Fassung für "Bewegung reduzieren": Stufen blenden nur weich ein und
   aus, Buchstaben stehen sofort, kein Flackern, kein Lichtschlag.

   Nötig, weil die allgemeine Regel weiter unten jede Animation auf 0,01ms
   staucht: kgBeat endet bei opacity 0, eine Stufe wäre dann nur einen
   Augenblick zu sehen gewesen. Deshalb hier die echte Dauer zurück. */
@keyframes kgFade{0%{opacity:0}9%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes kgFadeHold{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  #kg-overlay .cs{animation-name:kgFade !important;animation-duration:var(--dur) !important;}
  #kg-overlay .cs.hold{animation-name:kgFadeHold !important;animation-duration:1s !important;}
  #kg-overlay .play .big .ch, #kg-overlay .cs::before{animation:none !important;}
  #kg-overlay .rays, #kg-overlay .haze, #kg-overlay .grain, #kg .wall, #kgb .wall{animation:none !important;}
  #kg-overlay .dust, #kg-overlay .cf, #kg-overlay .flare{display:none !important;}
  #kg-overlay .lbl::before, #kg-overlay .lbl::after{animation:none !important;transform:none;}
  #kg-overlay .cs::before{opacity:.5;}
}

/* ── FILM-INTROS: ARCADE (#kga) UND PRIMETIME (#kgp) ─────────────────────
   Feste Abläufe statt Stufen, gebaut in js/intro.js (playFilmIntro). Alles
   steht beim Start im Dokument; jede Einstellung sitzt in einem .ifw mit
   --a (an) und --b (aus). Was darin passiert, hat absolute Verzögerungen ab
   dem Einfügen - so laufen Haupt- und Zuschauerfenster im Gleichtakt, ohne
   dass irgendwo JavaScript die Zeit führt (BAUPLAN 4.8).

   An- und Ausschalten sind zwei 1-ms-Animationen auf derselben Eigenschaft:
   ifAn füllt rückwärts (vorher unsichtbar) und vorwärts (danach sichtbar),
   ifAus füllt nur vorwärts und steht in der Liste hinten - ab --b gewinnt
   sie. visibility statt nur opacity, damit eine ausgeblendete Einstellung
   auch nichts mehr zeichnet. */

#kg-overlay.film{background:#000;}
/* Kein Einblenden des Overlays: Arcade fängt mit dem Aufflackern der
   Röhre an, Primetime mit Schwarz - ein Überblenden würde beides
   verschmieren. Beim Beenden (.leaving) gilt kgFadeOut wie überall. */
#kg-overlay.film:not(.leaving){animation:none;}
#kg-overlay .ifw{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  animation:ifAn 1ms linear var(--a) both,ifAus 1ms linear var(--b,99999s) forwards;}
@keyframes ifAn{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes ifAus{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}

/* ── Arcade ──
   Zeiten wie im Labor (tools/intros/arcade/): Röhre .1, INSERT COIN .9,
   Münze 2.2, Titel 3.0, Spielerwahl 6.0, VS 7.2, READY 8.8, GO 9.8,
   Titelbild 10.6. Bewegungen in steps(), damit es ruckelt wie auf einem
   alten Automaten. */
#kga{position:relative;width:100%;height:100%;overflow:hidden;background:#000;font-family:'Press Start 2P',monospace;font-weight:400;}
#kga .ka-kasten{position:absolute;inset:2.5vh;border-radius:4vh;overflow:hidden;background:#05060d;
  box-shadow:inset 0 0 12vh rgba(0,0,0,.9),0 0 0 1vh #111,0 0 0 1.4vh #222;}
#kga .ka-wackel{position:absolute;inset:0;animation:kaWackelA .4s steps(6) 7.2s,kaWackelB .5s steps(8) 9.8s;}
@keyframes kaWackelA{from{transform:translateX(12px)}to{transform:none}}
@keyframes kaWackelB{from{transform:translate(-16px,8px)}to{transform:none}}
#kga .ka-bild{position:absolute;inset:0;color:#fff;line-height:1.3;
  text-shadow:-2px 0 rgba(255,0,80,.7),2px 0 rgba(0,240,255,.7);
  animation:kaFlimmer .12s steps(1) infinite,kaHell .8s ease-out .4s backwards;}
@keyframes kaFlimmer{0%{opacity:1}50%{opacity:.93}}
@keyframes kaHell{from{filter:brightness(3)}to{filter:brightness(1)}}
#kga .ka-sterne{position:absolute;left:0;right:0;top:-100%;height:200%;animation:kaSterne 40s linear infinite;}
#kga .ka-sterne i{position:absolute;width:.6vh;height:.6vh;background:#fff;}
@keyframes kaSterne{from{transform:translateY(0)}to{transform:translateY(50%)}}
#kga .ka-zeile{position:absolute;left:0;right:0;text-align:center;padding:0 4vw;}
#kga .ka-coin{top:46%;font-size:min(3vw,5vh);color:#ffe14d;animation:kaBlink .46s steps(1) .9s infinite;}
#kga .ka-credit{bottom:8%;font-size:min(1.6vw,2.6vh);}
@keyframes kaBlink{0%{opacity:1}50%{opacity:0}}
#kga .ka-titel{position:absolute;left:0;right:0;top:20%;text-align:center;white-space:nowrap;}
#kga .ka-titel .k{font-size:min(1.8vw,3vh);color:#ffd24d;margin-bottom:3vh;}
#kga .ka-titel .g{font-size:min(8.5vw,14vh,calc(84vw / var(--n,1)));line-height:1.15;}
#kga .ka-titel .g2{font-size:min(6vw,10vh,calc(84vw / var(--n,1)));}
/* Regenbogen: jeder Buchstabe eine Farbe weiter als sein Vorgänger, alle
   0,13 s rückt die ganze Reihe eins weiter. */
#kga .ka-titel .ch{display:inline-block;animation:kaRegen .91s steps(1) calc(3s - var(--i) * .13s) infinite;}
#kga .ka-t1 .ch{animation:kaRegen .91s steps(1) calc(3s - var(--i) * .13s) infinite,kaHuepf .24s steps(2) calc(3.9s + var(--i) * .05s);}
@keyframes kaRegen{0%{color:#ff3b3b}14.28%{color:#ff9f1c}28.57%{color:#ffe14d}42.86%{color:#39ff88}57.14%{color:#2fd2ff}71.43%{color:#7a7bff}85.71%{color:#ff4fd8}}
@keyframes kaHuepf{0%,100%{transform:none}50%{transform:translateY(-1.3vh)}}
#kga .ka-t1{animation:kaZoom .7s steps(10) 3s both;}
@keyframes kaZoom{from{transform:scale(6);filter:blur(4px)}to{transform:none;filter:none}}
#kga .ka-t2{animation:kaFall .6s steps(9) 10.6s both;}
@keyframes kaFall{from{transform:translateY(-60vh)}to{transform:none}}
#kga .ka-wahl{top:12%;font-size:min(2.4vw,4vh);color:#ffe14d;}
#kga .ka-sp{position:absolute;top:30%;width:34%;text-align:center;}
#kga .ka-sp0{left:6%;color:#ff4b4b;animation:kaLinks .4s steps(6) 6s both;}
#kga .ka-sp1{right:6%;color:#4f8bff;animation:kaRechts .4s steps(6) 6.3s both;}
@keyframes kaLinks{from{transform:translateX(-40vw)}to{transform:none}}
@keyframes kaRechts{from{transform:translateX(40vw)}to{transform:none}}
/* Die Pixel ragen vom 1x1-Element nach rechts unten - daher unten viel
   Innenabstand und die Figur um die halbe Breite nach links. */
#kga .ka-rahmen{display:inline-block;padding:2.5vh 8vh 16.5vh;border:.5vh solid currentColor;margin-bottom:2vh;animation:kaRahmen .22s steps(1) 6.8s 4;}
@keyframes kaRahmen{0%{opacity:.2}50%{opacity:1}}
#kga .ka-figur{width:.9vh;height:.9vh;transform:translateX(-6.5vh) scale(1.6);transform-origin:0 0;}
#kga .ka-p{font-size:min(1.4vw,2.4vh);margin-bottom:1.6vh;}
#kga .ka-name{font-size:min(2vw,3.4vh,calc(30vw / var(--n,8)));white-space:nowrap;}
#kga .ka-vs{position:absolute;left:50%;top:42%;font-size:min(10vw,16vh);color:#ffd24d;transform:translate(-50%,-50%);animation:kaVs .25s steps(4) 7.2s both;}
@keyframes kaVs{from{transform:translate(-50%,-50%) scale(4)}to{transform:translate(-50%,-50%)}}
#kga .ka-gross{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(9vw,15vh);}
#kga .ka-ready{color:#ffe14d;animation:kaReady .3s steps(5) 8.8s both;}
#kga .ka-go{color:#39ff88;animation:kaGo .25s steps(4) 9.8s both;}
@keyframes kaReady{from{transform:scale(.3)}to{transform:none}}
@keyframes kaGo{from{transform:scale(3)}to{transform:none}}
#kga .ka-hi{top:6%;font-size:min(1.5vw,2.5vh);}
#kga .ka-hi b{color:#ffe14d;font-weight:400;}
#kga .ka-copy{bottom:7%;font-size:min(1.1vw,1.9vh);color:#8a8fa8;line-height:1.7;}
#kga .ka-start{bottom:16%;font-size:min(2.2vw,3.6vh);animation:kaBlink .72s steps(1) 11.6s infinite;}
#kga .ka-weiss{position:absolute;inset:0;background:#fff;opacity:0;z-index:4;animation:kaWeissA .3s steps(3) 7.2s,kaWeissB .4s steps(4) 9.8s;}
@keyframes kaWeissA{from{opacity:.9}to{opacity:0}}
@keyframes kaWeissB{from{opacity:1}to{opacity:0}}
#kga .ka-raster{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);}
#kga .ka-woelbung{position:absolute;inset:0;pointer-events:none;z-index:6;background:radial-gradient(ellipse 85% 80% at 50% 50%,transparent 60%,rgba(0,0,0,.6) 100%);}
/* Röhre an: ein heller Strich, der erst in die Breite, dann in die Höhe
   aufreißt und verlischt. */
#kga .ka-an{position:absolute;inset:0;background:#fff;z-index:7;opacity:0;animation:kaAn .68s linear .1s both;}
@keyframes kaAn{
  0%{transform:scale(0,.004);opacity:1;animation-timing-function:ease-out}
  22%{transform:scale(1,.004);opacity:1;animation-timing-function:ease-in}
  49%{transform:none;opacity:1}
  100%{transform:none;opacity:0}}

/* ── Primetime ──
   Palette: Bühnenschwarz mit Violett (#07030f), Chrom-Gold (#fff3c4 bis
   #5e3a05), Laser-Magenta #ff2bd6, Cyan #29e7ff, dazu die Teamfarben.
   Schrift: Unbounded (breit, Fernseh-Logo), Inter für Kleines.
   Die Zeiten kommen als --t/--a/--b aus INTRO_PT in js/intro.js. */
#kgp{position:relative;width:100%;height:100%;overflow:hidden;background:#07030f;color:#fff;font-family:Unbounded,'Bungee',sans-serif;}
#kgp i{font-style:normal;}
#kg-overlay.film .pt-cam{position:absolute;inset:0;
  animation:ptWackelK .4s linear var(--s0),ptWackelK .4s linear var(--s1),ptWackelK .4s linear var(--s2),
            ptWackelK .4s linear var(--te),ptWackelG .55s linear var(--vs),ptWackelG .7s linear var(--h),ptWackelK .45s linear var(--l);}
@keyframes ptWackelK{0%{transform:translate(.8vh,-.6vh) rotate(.25deg)}25%{transform:translate(-.7vh,.5vh) rotate(-.2deg)}50%{transform:translate(.4vh,.3vh)}75%{transform:translate(-.2vh,-.2vh)}100%{transform:none}}
@keyframes ptWackelG{0%{transform:translate(2vh,-1.6vh) rotate(.8deg) scale(1.04)}15%{transform:translate(-1.8vh,1.4vh) rotate(-.6deg) scale(1.03)}35%{transform:translate(1.2vh,.9vh) rotate(.3deg)}55%{transform:translate(-.8vh,-.6vh)}75%{transform:translate(.4vh,.3vh)}100%{transform:none}}

/* Ab hier bis zu den Primetime-Einstellungen: Bausteine, die alle
   Film-Intros teilen (Kamera-Wackler, Chromschrift, Blenden, Logo, Funken,
   Konfetti). Sie hängen an #kg-overlay.film; wer sie in einer Bühne
   anpasst, braucht mindestens dieselbe Spezifität (#kg-overlay #kgX …).

   Chromschrift. .ex ist die Tiefe (Schattenstapel in em, damit
   sie mit der Schriftgröße wächst), .fc liegt deckungsgleich darüber und
   trägt den Chrom-Verlauf plus einen Glanzstreifen, der per
   background-position durchläuft. */
#kg-overlay.film .pt-chrom{font-weight:900;line-height:1;white-space:nowrap;letter-spacing:.02em;}
#kg-overlay.film .pl{position:relative;display:inline-block;}
#kg-overlay.film .pl b{font-weight:900;}
#kg-overlay.film .pl .ex{color:#4a2d04;
  text-shadow:0 .012em 0 #8a5a0a,0 .024em 0 #7a4e08,0 .036em 0 #6b4407,0 .048em 0 #5c3a05,0 .06em 0 #4e3104,
              0 .072em 0 #412803,0 .084em 0 #352003,0 .096em 0 #2a1902,0 .14em .12em rgba(0,0,0,.65),0 0 .35em rgba(255,190,80,.28);}
#kg-overlay.film .pl .fc{position:absolute;left:0;top:0;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%),
                   linear-gradient(180deg,#fffbe8 0%,#ffe08a 26%,#d9961f 46%,#6b4207 50%,#b8771a 58%,#ffd36a 78%,#fff3c4 100%);
  background-size:320% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat;}
#kg-overlay.film .pt-luft{display:inline-block;width:.32em;}

/* Licht- und Schnittebenen über allem */
#kg-overlay.film .pt-wisch{position:absolute;top:-10%;bottom:-10%;left:0;width:170vw;z-index:12;pointer-events:none;transform:translateX(-210vw);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.15) 70%,transparent 100%),
             repeating-linear-gradient(0deg,rgba(255,43,214,.25) 0 .5vh,transparent .5vh 2.4vh);
  animation:ptWisch .34s cubic-bezier(.7,0,.3,1) var(--t) both;}
@keyframes ptWisch{from{transform:translateX(-210vw) skewX(-12deg)}to{transform:translateX(135vw) skewX(-12deg)}}
#kg-overlay.film .pt-balken{position:absolute;inset:0;z-index:15;pointer-events:none;}
#kg-overlay.film .pt-balken i{position:absolute;left:0;right:0;height:11vh;background:#000;}
#kg-overlay.film .pt-balken i:first-child{top:0;transform:translateY(-100%);animation:ptBalkenO .8s cubic-bezier(.6,0,.2,1) var(--t) backwards;}
#kg-overlay.film .pt-balken i:last-child{bottom:0;transform:translateY(100%);animation:ptBalkenU .8s cubic-bezier(.6,0,.2,1) var(--t) backwards;}
@keyframes ptBalkenO{from{transform:none}to{transform:translateY(-100%)}}
@keyframes ptBalkenU{from{transform:none}to{transform:translateY(100%)}}
#kgp .pt-licht{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none;
  animation:ptBlitzK .14s linear var(--m0),ptBlitzK .14s linear var(--m1),ptBlitzK .14s linear var(--m2),ptBlitzK .2s linear var(--te),ptBlitzG 1.1s ease-out var(--hit);}
@keyframes ptBlitzK{from{opacity:.85}to{opacity:0}}
@keyframes ptBlitzG{from{opacity:1}to{opacity:0}}
#kg-overlay.film .vig{z-index:14;background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 45%,rgba(0,0,0,.75) 100%);}
#kg-overlay.film .grain{z-index:16;opacity:.09;}
#kg-overlay.film .kg-hint{z-index:17;color:rgba(255,243,196,.45);}

/* 1 · Kaltstart: ein Spot schlägt an, Staub tanzt darin. */
#kgp .pt-schub{position:absolute;inset:0;animation:ptSchub 1.9s linear both;}
@keyframes ptSchub{from{transform:scale(1)}to{transform:scale(1.12)}}
#kgp .pt-spot{position:absolute;left:50%;top:-6%;width:72vw;height:112%;margin-left:-36vw;opacity:0;
  background:linear-gradient(180deg,rgba(255,244,214,.8),rgba(255,236,190,.22) 60%,rgba(255,236,190,.04));
  clip-path:polygon(47% 0,53% 0,82% 100%,18% 100%);animation:ptSpot .55s linear var(--t) both;}
@keyframes ptSpot{0%{opacity:0}8%{opacity:1}14%{opacity:.15}22%{opacity:.9}30%{opacity:.4}40%,100%{opacity:1}}
#kgp .pt-pfuetze{position:absolute;left:50%;bottom:-8vh;width:80vw;height:30vh;margin-left:-40vw;border-radius:50%;opacity:0;
  background:radial-gradient(ellipse,rgba(255,240,205,.55),rgba(255,240,205,0) 70%);animation:ptSpot .55s linear var(--t) both;}
#kgp .pt-staub i{position:absolute;width:.5vh;height:.5vh;border-radius:50%;background:#fff6dc;box-shadow:0 0 .8vh #ffe6a8;animation:ptStaub 5s ease-in-out infinite alternate;}
@keyframes ptStaub{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
#kgp .pt-vorab{position:absolute;left:0;right:0;top:46%;text-align:center;font-weight:500;font-size:min(4.2vh,3vw);color:#fff4d6;letter-spacing:.45em;padding-left:.45em;
  text-shadow:0 0 2vh rgba(255,220,150,.6);animation:ptVorab 1.2s cubic-bezier(.2,.7,.2,1) var(--t) both;}
@keyframes ptVorab{from{opacity:0;letter-spacing:1.4em;filter:blur(1vh)}35%{opacity:1}to{opacity:1;letter-spacing:.45em;filter:blur(0)}}

/* 2 · LED-Wand mit Welle, Moving Heads, drei Schläge */
#kgp .pt-s1{background:#05020b;perspective:110vh;}
#kgp .pt-ledrig{position:absolute;inset:-8% -6%;animation:ptDolly 1.9s linear var(--t) both;}
@keyframes ptDolly{from{transform:rotateY(-9deg) scale(1.08)}to{transform:rotateY(9deg) scale(1)}}
#kgp .pt-led{position:absolute;inset:0;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(11,1fr);gap:.7vh;transform:rotateX(12deg);animation:ptLedPuls .55s ease-out var(--t) infinite;}
#kgp .pt-led i{border-radius:.5vh;background:var(--c);opacity:.07;animation:ptLed 1.1s ease-out calc(var(--t) + var(--k) * .035s) infinite both;}
@keyframes ptLed{0%{opacity:.07}10%{opacity:.95}45%{opacity:.25}100%{opacity:.07}}
@keyframes ptLedPuls{from{opacity:1}to{opacity:.6}}
#kgp .pt-heads{position:absolute;inset:0;pointer-events:none;}
#kgp .pt-heads i{position:absolute;width:18vw;height:130vh;margin-left:-9vw;mix-blend-mode:screen;opacity:.55;
  clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);animation:ptSchwenk 2.4s ease-in-out infinite alternate;}
#kgp .pt-heads.unten i{bottom:-6%;transform-origin:50% 100%;background:linear-gradient(0deg,var(--c),transparent 88%);}
#kgp .pt-heads.oben i{top:-6%;transform-origin:50% 0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--c),transparent 85%);opacity:.32;}
@keyframes ptSchwenk{from{transform:rotate(var(--r1))}to{transform:rotate(var(--r2))}}
#kgp .pt-schlag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  animation:ptSchlag .55s cubic-bezier(.12,.9,.25,1) var(--t) both;}
#kgp .pt-schlag span{font-weight:900;white-space:nowrap;font-size:min(15vh,calc(92vw / var(--n) / .92));letter-spacing:-.01em;color:#fff;
  text-shadow:-.04em 0 rgba(255,43,214,.85),.04em 0 rgba(41,231,255,.85),0 0 .4em rgba(255,255,255,.35);}
@keyframes ptSchlag{0%{transform:scale(2.1) skewX(-14deg);opacity:0}16%{transform:scale(1) skewX(0);opacity:1}100%{transform:scale(.93);opacity:1}}

/* 3 · Makro: drei Beauty-Shots ganz nah am Chrom-Logo, mit Bokeh dahinter
   und einem anamorphotischen Lichtstreifen. Jeder Shot ist ein Schwenk. */
#kgp .pt-s2{background:radial-gradient(ellipse at 50% 60%,#1a0b24,#05020a 70%);}
#kgp .pt-bokeh i{position:absolute;border-radius:50%;margin:-10vh 0 0 -10vh;animation:ptBokeh 2s ease-in-out infinite alternate;}
@keyframes ptBokeh{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}
#kgp .pt-makro{position:absolute;left:50%;top:50%;width:0;height:0;}
#kgp .pt-makro .pt-chrom{position:absolute;left:0;top:0;transform:translate(-50%,-50%);}
#kgp .pt-makro .fc{animation:ptGlanzMakro .6s ease-in-out calc(var(--t) + var(--i) * .03s) both;}
@keyframes ptGlanzMakro{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
#kgp .pt-makro.m1{font-size:62vh;animation:ptM1 .62s linear var(--t) both;}
#kgp .pt-makro.m2{font-size:48vh;animation:ptM2 .62s linear var(--t) both;}
#kgp .pt-makro.m3{font-size:56vh;animation:ptM3 .62s linear var(--t) both;}
@keyframes ptM1{from{transform:translateX(38vw) rotate(-8deg)}to{transform:translateX(-10vw) rotate(-6deg)}}
@keyframes ptM2{from{transform:perspective(90vh) rotateY(-48deg) translate(-30vw,6vh) scale(1.2)}to{transform:perspective(90vh) rotateY(-34deg) translate(6vw,2vh) scale(1.35)}}
@keyframes ptM3{from{transform:translate(-26vw,22vh) rotate(7deg)}to{transform:translate(18vw,-6vh) rotate(4deg)}}
#kgp .pt-streifen{position:absolute;left:-10vw;right:-10vw;height:.45vh;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(120,220,255,.25) 25%,rgba(200,240,255,1) 50%,rgba(120,220,255,.25) 75%,transparent);
  box-shadow:0 0 2.5vh rgba(110,210,255,.9);animation:ptStreifen .6s ease-out var(--t) both;}
@keyframes ptStreifen{0%{opacity:0;transform:scaleX(.2)}20%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.3)}}

/* 4 · Teams: diagonal geteilt, beide Hälften schlagen von den Seiten ein,
   in der Naht zuckt ein Blitz, VS knallt in die Mitte. */
#kgp .pt-team{position:absolute;inset:0;overflow:hidden;}
#kgp .pt-team.rot{clip-path:polygon(0 0,57.5% 0,43.5% 100%,0 100%);background:linear-gradient(125deg,#ff4a3d,#a3101f 60%,#4a0410);animation:ptVonL .42s cubic-bezier(.15,.95,.25,1) var(--t) both;}
#kgp .pt-team.blau{clip-path:polygon(56.5% 0,100% 0,100% 100%,42.5% 100%);background:linear-gradient(235deg,#43a0ff,#123ea8 60%,#06154a);animation:ptVonR .42s cubic-bezier(.15,.95,.25,1) var(--t) both;}
#kgp .pt-team::before{content:'';position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 1.2vh,transparent 1.2vh 4vh);animation:ptStreifenLauf 1.6s linear var(--t) both;}
@keyframes ptStreifenLauf{from{transform:translateX(-6vw)}to{transform:translateX(6vw)}}
@keyframes ptVonL{from{transform:translateX(-75%)}to{transform:none}}
@keyframes ptVonR{from{transform:translateX(75%)}to{transform:none}}
/* Die Namen stehen diagonal versetzt - rot oben links, blau unten rechts -,
   damit das VS in der Mitte keinen verdeckt. */
#kgp .pt-tinnen{position:absolute;width:44%;transform:translateY(-50%);animation:ptTDrift 1.7s ease-out var(--t) both;}
#kgp .rot .pt-tinnen{left:3%;top:30%;text-align:left;}
#kgp .blau .pt-tinnen{right:3%;top:70%;text-align:right;}
@keyframes ptTDrift{from{transform:translateY(-50%) scale(1.12)}to{transform:translateY(-50%) scale(1)}}
#kgp .pt-tinnen b{display:block;font-weight:900;white-space:nowrap;line-height:1;font-size:min(11vh,calc(42vw / var(--n) / .92));color:#fff;
  text-shadow:0 .05em 0 rgba(0,0,0,.35),0 .1em .2em rgba(0,0,0,.45);}
#kgp .pt-blitz{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 0 .6vh #fff) drop-shadow(0 0 2vh #b9e9ff);
  animation:ptBlitz .7s steps(1) var(--t) both,ptKnistern .26s steps(1) calc(var(--t) + .7s) infinite;}
@keyframes ptBlitz{0%{opacity:0}4%{opacity:1}18%{opacity:.15}28%{opacity:1}52%{opacity:.35}66%,100%{opacity:.9}}
@keyframes ptKnistern{0%{opacity:.9}40%{opacity:.4}70%{opacity:1}}
#kgp .pt-vs{position:absolute;left:50%;top:50%;font-size:26vh;transform-origin:0 0;animation:ptVs .5s cubic-bezier(.2,1.5,.4,1) var(--t) both;}
#kgp .pt-vs .pt-chrom{transform:translate(-50%,-50%) rotate(-7deg);}
@keyframes ptVs{from{transform:scale(4.5) rotate(-24deg);opacity:0}to{transform:none;opacity:1}}

/* 5 · Tunnel: Flug durch Lichtringe, Warp-Streifen, in der Mitte wird es
   weiß - das Weiß ist der Übergang zum Logo. */
#kgp .pt-iris{position:absolute;inset:0;background:#030108;animation:ptIris .35s ease-in var(--t) both;}
@keyframes ptIris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
#kgp .pt-tunnel{position:absolute;inset:0;perspective:500px;overflow:hidden;}
#kgp .pt-rohr{position:absolute;left:50%;top:50%;transform-style:preserve-3d;animation:ptFlug 1.1s cubic-bezier(.5,0,.9,.6) var(--t) both;}
@keyframes ptFlug{from{transform:translateZ(0) rotate(0)}to{transform:translateZ(7200px) rotate(100deg)}}
#kgp .pt-rohr i{position:absolute;width:76vmin;height:76vmin;margin:-38vmin 0 0 -38vmin;border:1.1vmin solid var(--c);
  box-shadow:0 0 3vmin var(--c),inset 0 0 3vmin var(--c);transform:translateZ(calc(var(--k) * -440px)) rotate(var(--rot));}
#kgp .pt-warp i{position:absolute;left:50%;top:50%;width:34vmax;height:.35vh;transform-origin:0 50%;opacity:0;
  background:linear-gradient(90deg,transparent,#fff);animation:ptWarp .42s linear infinite backwards;}
@keyframes ptWarp{from{transform:rotate(var(--r)) translateX(3vmax) scaleX(.1);opacity:0}30%{opacity:1}to{transform:rotate(var(--r)) translateX(75vmax) scaleX(1.2);opacity:0}}
#kgp .pt-kern{position:absolute;left:50%;top:50%;width:20vmin;height:20vmin;margin:-10vmin 0 0 -10vmin;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fff 32%,rgba(255,255,255,0) 70%);animation:ptKern 1.1s cubic-bezier(.75,0,1,.4) var(--t) both;}
@keyframes ptKern{from{transform:scale(.25);opacity:.5}to{transform:scale(16);opacity:1}}

/* 6 · Logo: Strahlen, Lichter von oben, Spiegelboden. Die Buchstaben
   fliegen einzeln aus dem Raum an ihren Platz (--x/--y/--z/--rx/--ry aus
   dem Markup), landen mit einem Stoß, dann dreht das ganze Logo langsam
   im Licht und der Glanz läuft in Abständen darüber. */
#kgp .pt-s5{background:radial-gradient(ellipse 70% 60% at 50% 42%,#2a0f3d 0%,#10051c 55%,#050208 100%);}
#kgp .pt-strahlen{position:absolute;left:50%;top:42%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,110,.15) 0deg 4deg,transparent 4deg 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);
  animation:ptDreh 70s linear infinite,ptStrahlAn 1.2s cubic-bezier(.2,.8,.2,1) var(--hit) backwards;}
@keyframes ptDreh{to{transform:rotate(360deg)}}
@keyframes ptStrahlAn{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
#kgp .pt-boden{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(255,215,120,.0),rgba(255,215,120,.06) 30%,rgba(0,0,0,.6)),
             repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7vw);
  transform:perspective(60vh) rotateX(58deg);transform-origin:50% 100%;}
#kg-overlay.film .pt-logo{position:absolute;left:0;right:0;top:15%;display:flex;justify-content:center;perspective:1400px;z-index:3;}
#kg-overlay.film .pt-orbit{transform-style:preserve-3d;animation:ptOrbit 12s ease-in-out var(--t) infinite backwards;}
@keyframes ptOrbit{0%,100%{transform:none}25%{transform:rotateY(-11deg) rotateX(4deg)}75%{transform:rotateY(11deg) rotateX(-3deg)}}
#kg-overlay.film .pt-landung{display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;animation:ptLandung .55s cubic-bezier(.2,1.7,.4,1) var(--t) backwards;}
@keyframes ptLandung{from{transform:scale(1.08)}to{transform:none}}
#kg-overlay.film .pt-logo .pt-chrom{transform-style:preserve-3d;}
#kg-overlay.film .pt-logo .l1{font-size:min(17vh,calc(88vw / var(--n) / .98));}
#kg-overlay.film .pt-logo .l2{font-size:min(12vh,calc(88vw / var(--n) / .98));margin-top:.06em;}
#kg-overlay.film .pt-logo .pl{animation:ptFlieg .8s cubic-bezier(.12,.8,.25,1) calc(var(--hit) + var(--i) * .03s) both;}
@keyframes ptFlieg{from{transform:translate3d(var(--x),var(--y),var(--z)) rotateX(var(--rx)) rotateY(var(--ry));opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
/* Glanz: einmal nach der Landung, danach alle 4,5 s. Die zweite Animation
   hat keine Füllung nach hinten - sonst überschriebe sie die erste schon
   vor ihrem Start. */
#kg-overlay.film .pt-logo .fc{animation:ptGlanz1 .9s ease-in-out calc(var(--hit) + .95s + var(--i) * .04s) both,ptGlanz2 4.5s ease-in-out calc(var(--hit) + 3.6s + var(--i) * .04s) infinite;}
@keyframes ptGlanz1{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@keyframes ptGlanz2{0%{background-position:130% 0,0 0}22%,100%{background-position:-30% 0,0 0}}
#kg-overlay.film .pt-klein{font-weight:500;font-size:min(4.4vh,3.2vw);letter-spacing:.35em;padding-left:.35em;margin-bottom:1.4vh;color:#ffe8a8;
  text-shadow:0 0 1.6vh rgba(255,200,90,.55);animation:ptKlein .9s cubic-bezier(.2,.8,.2,1) calc(var(--hit) + .55s) both;}
@keyframes ptKlein{from{opacity:0;transform:translateY(-3vh);letter-spacing:1.1em}to{opacity:1;transform:none;letter-spacing:.35em}}
#kg-overlay.film .pt-zeile{margin-top:3vh;font-family:var(--font-body,Inter),sans-serif;font-weight:700;font-size:min(3vh,2.1vw);letter-spacing:.14em;color:#f1e6ff;white-space:nowrap;
  display:flex;align-items:center;gap:1.6vw;animation:ptZeile .9s cubic-bezier(.2,.8,.2,1) var(--t) both;}
#kg-overlay.film .pt-zeile::before,#kg-overlay.film .pt-zeile::after{content:'';width:6vw;height:2px;background:linear-gradient(90deg,transparent,#ffd76a);}
#kg-overlay.film .pt-zeile::after{transform:scaleX(-1);}
@keyframes ptZeile{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
#kg-overlay.film .pt-preis{margin-top:3.4vh;display:flex;align-items:center;gap:1.4vw;padding:1.3vh 2.6vw;border-radius:99px;
  background:linear-gradient(180deg,rgba(40,16,58,.85),rgba(14,5,24,.85));box-shadow:0 0 0 .3vh #ffd76a,0 0 0 .7vh rgba(255,215,106,.25),0 1.5vh 4vh rgba(0,0,0,.6),0 0 5vh rgba(255,200,90,.3);
  animation:ptMuenze 1s cubic-bezier(.2,1.25,.3,1) var(--t) both;}
#kg-overlay.film .pt-preis small{font-family:var(--font-body,Inter),sans-serif;font-weight:700;font-size:min(2.4vh,1.7vw);letter-spacing:.12em;color:#e9dcff;}
#kg-overlay.film .pt-preis span{font-weight:900;font-size:min(5.4vh,3.8vw);color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,#fffbe8,#ffd36a 45%,#b8771a 55%,#fff3c4);}
@keyframes ptMuenze{from{transform:rotateY(-540deg) scale(.3);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
/* Spiegelboden: dasselbe Logo kopfüber, nach unten ausgeblendet. */
#kg-overlay.film .pt-spiegel{position:absolute;left:50%;top:100%;transform:translateX(-50%) scaleY(-1);opacity:.32;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;margin-top:2vh;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 55%);mask-image:linear-gradient(0deg,#000 0%,transparent 55%);}
#kg-overlay.film .pt-landung{position:relative;}

#kg-overlay.film .pt-ring{position:absolute;left:50%;top:var(--oy,42%);width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;
  border:2vmin solid #fff3c4;box-shadow:0 0 4vmin #ffd76a,inset 0 0 3vmin #ffd76a;opacity:0;z-index:4;
  animation:ptRing 1.15s cubic-bezier(.1,.8,.3,1) var(--t) both;}
@keyframes ptRing{from{transform:scale(.1);opacity:1}to{transform:scale(6.5);opacity:0}}
#kgp .pt-s3 .pt-ring{top:50%;border-color:#e6f6ff;box-shadow:0 0 4vmin #8fd8ff,inset 0 0 3vmin #8fd8ff;}

/* Funken: außen die Seitwärtsbewegung (bremst ab), innen die Höhe (steigt,
   fällt) - zusammen ein Bogen mit Schwerkraft. */
#kg-overlay.film .pt-funken,#kg-overlay.film .pt-pyro,#kg-overlay.film .pt-konfetti,#kg-overlay.film .pt-glitzer{position:absolute;inset:0;pointer-events:none;z-index:5;}
#kg-overlay.film .pt-fk{position:absolute;left:50%;top:var(--oy,42%);animation:ptFkX var(--u) cubic-bezier(.05,.75,.3,1) var(--d) both;}
#kg-overlay.film .pt-fk b{display:block;width:.55vh;height:.55vh;border-radius:50%;background:#fff;box-shadow:0 0 1.2vh .3vh var(--c);
  animation:ptFkY var(--u) cubic-bezier(.25,.6,.6,1) var(--d) both;}
@keyframes ptFkX{from{transform:translateX(0)}to{transform:translateX(var(--x))}}
@keyframes ptFkY{0%{transform:translateY(0);opacity:1}40%{transform:translateY(var(--y));opacity:1}100%{transform:translateY(calc(var(--y) + var(--g)));opacity:0}}
#kg-overlay.film .pt-pyro i{position:absolute;bottom:0;width:.5vh;height:.5vh;border-radius:50%;background:#fff6d0;box-shadow:0 0 1vh .2vh #ffc64a;
  animation:ptPyro var(--u) cubic-bezier(.15,.7,.4,1) var(--d) infinite both;}
@keyframes ptPyro{0%{transform:translate(0,0);opacity:0}6%{opacity:1}100%{transform:translate(var(--x),var(--y));opacity:0}}
#kg-overlay.film .pt-konfetti i{position:absolute;top:-4vh;width:1vh;height:1.6vh;background:var(--c);scale:var(--s);
  animation:ptKonfetti var(--u) linear var(--d) infinite both;}
@keyframes ptKonfetti{from{transform:translate(0,0) rotate3d(1,.4,.2,0deg)}to{transform:translate(var(--x),112vh) rotate3d(1,.4,.2,1260deg)}}
/* Glitzer: Vierstrahlsterne, die kurz auf dem Logo aufblitzen. */
#kg-overlay.film .pt-glitzer i{position:absolute;width:5vh;height:5vh;margin:-2.5vh 0 0 -2.5vh;opacity:0;scale:var(--s);
  background:radial-gradient(circle,#fff 0,rgba(255,255,255,.9) 6%,transparent 22%),
             linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 70%);mask-image:radial-gradient(circle,#000 0,transparent 70%);
  animation:ptGlitzer 4.4s ease-in-out var(--d) infinite both;}
@keyframes ptGlitzer{0%{opacity:0;transform:scale(.2) rotate(0)}6%{opacity:1;transform:scale(1) rotate(45deg)}14%,100%{opacity:0;transform:scale(.2) rotate(90deg)}}
#kg-overlay.film .pt-flare{position:absolute;left:-10%;right:-10%;top:var(--oy,42%);height:.6vh;margin-top:-.3vh;z-index:6;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(120,220,255,.3) 20%,rgba(220,245,255,1) 50%,rgba(120,220,255,.3) 80%,transparent);
  box-shadow:0 0 3vh rgba(130,215,255,.9);animation:ptFlare 1.3s ease-out var(--t) both,ptFlareLoop 6s ease-in-out calc(var(--t) + 5s) infinite;}
@keyframes ptFlare{0%{opacity:0;transform:scaleX(.1)}8%{opacity:1;transform:scaleX(1.1)}100%{opacity:0;transform:scaleX(1.5)}}
@keyframes ptFlareLoop{0%,100%{opacity:0;transform:translateY(-14vh) scaleX(.6)}12%{opacity:.7;transform:translateY(-4vh) scaleX(1)}26%{opacity:0;transform:translateY(8vh) scaleX(1.2)}}

/* Zweites Fensterpaar: für eine Ebene, die zweimal zu sehen ist (Tresor:
   Tür vor und nach dem Zahlenschloss). Dieselben zwei Animationen noch
   einmal hinten angehängt - die spätere gewinnt, sobald sie läuft. */
#kg-overlay .ifw2{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  animation:ifAn 1ms linear var(--a) both,ifAus 1ms linear var(--b) forwards,ifAn 1ms linear var(--a2) forwards,ifAus 1ms linear var(--b2,99999s) forwards;}

/* Materialien der Chromschrift. Gold ist der Grundfall (oben), Silber für
   Regie, 80er-Chrom (Himmelblau über Sonnenuntergang) für Outrun. */
#kg-overlay.film .mat-silber .pl .fc{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%),
  linear-gradient(180deg,#ffffff 0%,#e3ebf5 26%,#9aa8ba 46%,#2c3644 50%,#6f7f95 58%,#d5e1ee 80%,#ffffff 100%);}
#kg-overlay.film .mat-silber .pl .ex{color:#1d2633;
  text-shadow:0 .012em 0 #8a98ab,0 .024em 0 #7a889b,0 .036em 0 #69778a,0 .048em 0 #5a6779,0 .06em 0 #4b5768,
              0 .072em 0 #3d4858,0 .084em 0 #303a48,0 .096em 0 #242c38,0 .14em .12em rgba(0,0,0,.65),0 0 .35em rgba(120,190,255,.35);}
#kg-overlay.film .mat-80er .pl .fc{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%),
  linear-gradient(180deg,#1b2a6b 0%,#3e7bff 20%,#c9ecff 44%,#ffffff 49%,#2a0d3a 51%,#7b2d7a 60%,#ff8a3d 80%,#ffe7b0 100%);}
#kg-overlay.film .mat-80er .pl .ex{color:#2a0d3a;
  text-shadow:0 .012em 0 #ff2bd6,0 .024em 0 #d61fb5,0 .036em 0 #ad1894,0 .048em 0 #861273,0 .06em 0 #620d55,
              0 .072em 0 #440939,0 .084em 0 #2e0626,0 .096em 0 #1f041a,0 .14em .12em rgba(0,0,0,.65),0 0 .35em rgba(255,43,214,.45);}

/* ── Regie ──
   Zeiten aus INTRO_RG in js/intro.js. Die Monitorwand ist ein 3x3-Raster
   in einem 3D-Rahmen; --mw/--mh/--gap sind Kachelbreite, -höhe und Fuge,
   daraus rechnet das Gesamtbild seinen Versatz je Kachel. */
@property --rg-s{syntax:'<integer>';inherits:false;initial-value:0;}
@property --rg-f{syntax:'<integer>';inherits:false;initial-value:0;}
@property --rg-p{syntax:'<angle>';inherits:false;initial-value:0deg;}
#kgr{position:relative;width:100%;height:100%;overflow:hidden;background:#05070c;color:#fff;font-family:Unbounded,sans-serif;}
#kgr i,#kgr em{font-style:normal;}
#kgr .rg-raum{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 42%,#14243d 0%,#070b14 60%,#020306 100%);}
#kgr .rg-pult{position:absolute;left:-5%;right:-5%;bottom:-2%;height:17%;border-top:.4vh solid #2b3342;box-shadow:0 -2vh 6vh rgba(0,0,0,.7);
  background:radial-gradient(circle,rgba(90,210,255,.95) 0 .3vh,transparent .45vh) 0 30%/3.2vh 3.2vh repeat-x,
             radial-gradient(circle,rgba(255,70,70,.9) 0 .3vh,transparent .45vh) 1.6vh 62%/4.8vh 4.8vh repeat-x,
             linear-gradient(180deg,#1a1f29,#07090d);}
#kgr .rg-onair{position:absolute;left:50%;top:4%;transform:translateX(-50%);z-index:2;padding:.8vh 2.6vh;border-radius:.8vh;font-weight:900;font-size:3.4vh;letter-spacing:.2em;
  color:#fff;background:#e01b1b;border:.4vh solid #ff5a5a;box-shadow:0 0 3vh #ff2a2a,0 0 9vh rgba(255,30,30,.6);text-shadow:0 0 1vh #fff;
  animation:rgOnAir .8s steps(1) var(--t) backwards;}
@keyframes rgOnAir{0%,20%,44%{color:#4a1010;background:#240707;border-color:#3a0d0d;box-shadow:none;text-shadow:none}10%,32%,56%,100%{color:#fff;background:#e01b1b;border-color:#ff5a5a;box-shadow:0 0 3vh #ff2a2a,0 0 9vh rgba(255,30,30,.6);text-shadow:0 0 1vh #fff}}
#kgr .rg-rig{position:absolute;inset:0;perspective:120vh;--mw:30vh;--mh:16.9vh;--gap:1.9vh;}
#kgr .rg-wand{position:absolute;left:50%;top:49%;width:calc(3 * var(--mw) + 2 * var(--gap));height:calc(3 * var(--mh) + 2 * var(--gap));
  margin-left:calc((3 * var(--mw) + 2 * var(--gap)) / -2);margin-top:calc((3 * var(--mh) + 2 * var(--gap)) / -2);
  display:grid;grid-template-columns:repeat(3,var(--mw));grid-template-rows:repeat(3,var(--mh));gap:var(--gap);transform-style:preserve-3d;}
#kgr .rg-rig.a .rg-wand{animation:rgDollyA 1.9s linear both;}
@keyframes rgDollyA{from{transform:rotateY(-20deg) rotateX(4deg) scale(.9)}to{transform:rotateY(-10deg) rotateX(3deg) scale(1.02)}}
#kgr .rg-rig.b .rg-wand{animation:rgDollyB 1.9s cubic-bezier(.2,.7,.3,1) var(--t) both;}
@keyframes rgDollyB{from{transform:rotateY(26deg) rotateX(2deg) scale(1.3)}to{transform:rotateY(5deg) rotateX(2deg) scale(1.1)}}
#kgr .rg-rig.c .rg-wand{animation:rgDollyC 1s ease-in var(--t) both;}
@keyframes rgDollyC{from{transform:scale(1.08)}to{transform:scale(1.32)}}
#kgr .rg-mon{position:relative;border-radius:.5vh;background:#000;transform-style:preserve-3d;
  box-shadow:0 0 0 .6vh #15181f,0 0 0 .75vh #2a2f3a,0 1.6vh 3vh rgba(0,0,0,.6);}
#kgr .rg-bild{position:absolute;inset:0;overflow:hidden;border-radius:.4vh;background:#03050a;}
#kgr .rg-bild::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.13),transparent 38%),repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);}
#kgr .rg-wand.feeds .rg-bild{animation:rgAn .4s ease-out calc(.15s + var(--i) * .1s) both;}
@keyframes rgAn{0%{transform:scale(0,.01);opacity:0}30%{transform:scale(1,.02);opacity:1;filter:brightness(5)}100%{transform:none;filter:none}}
#kgr .rg-farbbalken{position:absolute;inset:0;
  background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.42%,#c00000 0 85.71%,#0000c0 0) top/100% 70% no-repeat,
             linear-gradient(90deg,#0000c0 0 14.28%,#131313 0 28.57%,#c000c0 0 42.85%,#131313 0 57.14%,#00c0c0 0 71.42%,#131313 0 85.71%,#c0c0c0 0) bottom/100% 30% no-repeat;}
#kgr .rg-cam,#kgr .rg-pgm,#kgr .rg-pvw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;}
#kgr .rg-cam.rot{background:radial-gradient(circle at 50% 60%,#8a1818,#1a0404);}
#kgr .rg-cam.blau{background:radial-gradient(circle at 50% 60%,#16418a,#040a1a);}
#kgr .rg-cam b{font-weight:900;font-size:1.9vh;white-space:nowrap;max-width:90%;overflow:hidden;}
#kgr .rg-rec{position:absolute;left:.8vh;top:.6vh;display:flex;align-items:center;gap:.4vh;font:700 1.1vh Inter,sans-serif;color:#fff;}
#kgr .rg-rec::before{content:'';width:.9vh;height:.9vh;border-radius:50%;background:#ff2a2a;animation:rgBlink 1s steps(1) infinite;}
#kgr .rg-cam em,#kgr .rg-pgm em,#kgr .rg-pvw em{position:absolute;right:.8vh;top:.6vh;font:700 1.1vh Inter,sans-serif;color:rgba(255,255,255,.75);}
@keyframes rgBlink{0%{opacity:1}50%{opacity:.15}}
#kgr .rg-rauschen{position:absolute;inset:-60%;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kgGrain .25s steps(4) infinite;}
#kgr .rg-ns{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.4vh 1vh;background:#000;font:700 1.2vh Inter,sans-serif;letter-spacing:.1em;white-space:nowrap;}
#kgr .rg-welle{position:absolute;inset:18% 8% 14%;display:flex;align-items:flex-end;gap:.4vh;}
#kgr .rg-welle i{flex:1;height:var(--h);background:linear-gradient(0deg,#29e7ff,#c8fff0);transform-origin:50% 100%;animation:rgWelle .5s ease-in-out infinite alternate;}
@keyframes rgWelle{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
#kgr .rg-pgm{background:#060606;box-shadow:inset 0 0 0 .4vh #e01b1b;}
#kgr .rg-pgm span{font-weight:900;font-size:1.6vh;letter-spacing:.25em;color:#ff5a5a;animation:rgBlink 1.2s steps(1) infinite;}
#kgr .rg-pvw{background:radial-gradient(circle,#123,#020406);box-shadow:inset 0 0 0 .4vh #2bdc5a;}
#kgr .rg-pvw span{font-weight:500;font-size:1.9vh;padding:0 1vh;}
#kgr .rg-pegel{position:absolute;inset:12% 36%;display:flex;gap:1vh;}
#kgr .rg-pegel i{flex:1;background:linear-gradient(0deg,#2bdc5a 0 60%,#ffd400 60% 82%,#ff2a2a 82%);transform-origin:50% 100%;animation:rgPegel .4s ease-in-out infinite alternate;}
@keyframes rgPegel{from{transform:scaleY(.3)}to{transform:scaleY(.95)}}
/* Timecode: zwei registrierte Ganzzahlen zählen, CSS-Zähler zeigen sie an. */
#kgr .rg-tc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 2.5vh Inter,sans-serif;font-variant-numeric:tabular-nums;color:#ffd400;
  counter-reset:s var(--rg-s) f var(--rg-f);animation:rgTcS 60s steps(60) infinite,rgTcF 1s steps(25) infinite;}
#kgr .rg-tc::before{content:'10:00:' counter(s,decimal-leading-zero) ':' counter(f,decimal-leading-zero);}
@keyframes rgTcS{from{--rg-s:0}to{--rg-s:60}}
@keyframes rgTcF{from{--rg-f:0}to{--rg-f:25}}
/* Gesamtbild über alle neun Kacheln */
#kgr .rg-ganz{position:absolute;left:calc(var(--sp) * -1 * (var(--mw) + var(--gap)));top:calc(var(--ze) * -1 * (var(--mh) + var(--gap)));
  width:calc(3 * var(--mw) + 2 * var(--gap));height:calc(3 * var(--mh) + 2 * var(--gap));animation:rgRaste .5s steps(1) calc(var(--onair) + var(--i) * .05s) both;}
@keyframes rgRaste{0%{opacity:0;transform:translateX(3vh)}20%{opacity:1;transform:translateX(-2vh)}40%{opacity:.3;transform:translateX(1vh)}60%,100%{opacity:1;transform:none}}
#kgr .rg-gesamtbild{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#2468e0 0%,#0b2a6e 45%,#040c24 100%);}
#kgr .rg-gstrahl{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.09) 0 6deg,transparent 6deg 18deg);animation:ptDreh 30s linear infinite;}
#kgr .rg-glogo{position:relative;display:flex;flex-direction:column;align-items:center;}
#kgr .rg-glogo .g1{font-size:min(15vh,calc(var(--mw) * 2.7 / var(--n)));}
#kgr .rg-glogo .g2{font-size:min(10vh,calc(var(--mw) * 2.7 / var(--n)));margin-top:.06em;}
#kgr .rg-glive{position:absolute;left:3vh;top:2.4vh;background:#e01b1b;font:900 1.8vh Inter,sans-serif;letter-spacing:.1em;padding:.3vh 1vh;border-radius:.4vh;}
#kgr .rg-mon.flieg{animation:rgFlieg .5s cubic-bezier(.35,0,.8,.6) var(--fd) both;}
@keyframes rgFlieg{from{transform:none;opacity:1}85%{opacity:1}to{transform:translate3d(var(--fx),var(--fy),var(--fz)) rotateX(var(--frx)) rotateY(var(--fry));opacity:0}}
#kgr .rg-gluehen{position:absolute;left:50%;top:49%;width:20vmin;height:20vmin;margin:-10vmin 0 0 -10vmin;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fff 30%,rgba(255,255,255,0) 70%);animation:ptKern .5s cubic-bezier(.75,0,1,.4) var(--t) both;}
/* Startband */
#kgr .rg-leader{background:radial-gradient(circle at 50% 50%,#5a5752 0%,#2b2925 55%,#0d0c0b 100%);}
#kgr .rg-lkreis{position:absolute;left:50%;top:50%;width:72vh;height:72vh;margin:-36vh 0 0 -36vh;border-radius:50%;box-shadow:0 0 0 .5vh #e9e4da;}
#kgr .rg-lkreis::after{content:'';position:absolute;inset:6vh;border-radius:50%;box-shadow:0 0 0 .35vh #e9e4da;}
#kgr .rg-lkreuz{position:absolute;inset:0;opacity:.8;
  background:linear-gradient(90deg,transparent calc(50% - .15vh),#e9e4da calc(50% - .15vh) calc(50% + .15vh),transparent 0),
             linear-gradient(0deg,transparent calc(50% - .15vh),#e9e4da calc(50% - .15vh) calc(50% + .15vh),transparent 0);}
#kgr .rg-lzeiger{position:absolute;left:50%;top:50%;width:72vh;height:72vh;margin:-36vh 0 0 -36vh;border-radius:50%;
  background:conic-gradient(rgba(0,0,0,.5) var(--rg-p),transparent 0);animation:rgZeiger .5s linear var(--t) 5 both;}
@keyframes rgZeiger{from{--rg-p:0deg}to{--rg-p:360deg}}
#kgr .rg-lzahl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:44vh;color:#f3eee4;
  text-shadow:0 0 2vh rgba(0,0,0,.6);animation:rgZahl .5s ease-out var(--t) both;}
@keyframes rgZahl{from{transform:scale(1.25);opacity:.4}to{transform:none;opacity:1}}
#kgr .rg-kratzer{position:absolute;inset:0;mix-blend-mode:overlay;
  background:linear-gradient(90deg,transparent 22%,rgba(255,255,255,.4) 22.1%,transparent 22.3%,transparent 71%,rgba(0,0,0,.5) 71.1%,transparent 71.25%);
  animation:rgKratzer .18s steps(3) infinite;}
@keyframes rgKratzer{0%{transform:translateX(0);opacity:.9}33%{transform:translateX(7vw);opacity:.4}66%{transform:translateX(-4vw);opacity:.8}}
/* Kameras nebeneinander */
#kgr .rg-split{background:#000;}
#kgr .rg-feed{position:absolute;top:0;bottom:0;width:49.7%;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#kgr .rg-feed::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px);}
#kgr .rg-feed.rot{left:0;background:radial-gradient(ellipse at 40% 55%,#c4252a,#4a0910 60%,#170205);animation:rgVonL .45s cubic-bezier(.15,.9,.25,1) var(--t) both;}
#kgr .rg-feed.blau{right:0;background:radial-gradient(ellipse at 60% 55%,#2563d8,#0a1f5a 60%,#030818);animation:rgVonR .45s cubic-bezier(.15,.9,.25,1) var(--t) both;}
@keyframes rgVonL{from{transform:translateX(-105%)}to{transform:none}}
@keyframes rgVonR{from{transform:translateX(105%)}to{transform:none}}
#kgr .rg-feed b{font-weight:900;white-space:nowrap;font-size:min(10vh,calc(42vw / var(--n) / .95));animation:rgFokus .7s ease-out var(--t) both;}
@keyframes rgFokus{from{filter:blur(1.2vh);transform:scale(1.12)}to{filter:none;transform:none}}
#kgr .rg-sucher{position:absolute;inset:7%;
  background:linear-gradient(#fff,#fff) top left/3.4vh .35vh no-repeat,linear-gradient(#fff,#fff) top left/.35vh 3.4vh no-repeat,
             linear-gradient(#fff,#fff) top right/3.4vh .35vh no-repeat,linear-gradient(#fff,#fff) top right/.35vh 3.4vh no-repeat,
             linear-gradient(#fff,#fff) bottom left/3.4vh .35vh no-repeat,linear-gradient(#fff,#fff) bottom left/.35vh 3.4vh no-repeat,
             linear-gradient(#fff,#fff) bottom right/3.4vh .35vh no-repeat,linear-gradient(#fff,#fff) bottom right/.35vh 3.4vh no-repeat;opacity:.8;}
#kgr .rg-feed .rg-rec{left:9%;top:9%;font-size:2vh;gap:.8vh;}
#kgr .rg-feed .rg-rec::before{width:1.6vh;height:1.6vh;}
#kgr .rg-feed em{position:absolute;right:9%;top:9%;font:700 2vh Inter,sans-serif;color:rgba(255,255,255,.8);}
#kgr .rg-vsbinde{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);display:flex;align-items:stretch;z-index:2;font:800 2.6vh Inter,sans-serif;white-space:nowrap;
  box-shadow:0 1vh 3vh rgba(0,0,0,.5);animation:rgAufklapp .5s cubic-bezier(.2,.9,.2,1) var(--t) both;}
#kgr .rg-vsbinde span{padding:1vh 2.4vh;background:#fff;color:#0a0f1c;}
#kgr .rg-vsbinde b{padding:1vh 1.8vh;background:#ffd400;color:#0a0f1c;font-weight:900;}
@keyframes rgAufklapp{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
/* Sendung */
#kgr .rg-studio{background:radial-gradient(ellipse 80% 70% at 50% 40%,#123a8a 0%,#071a45 45%,#020714 100%);}
#kgr .rg-studiolicht{position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 9vw,rgba(120,190,255,.1) 9vw 12vw,transparent 12vw 20vw);animation:rgLicht 6s ease-in-out infinite alternate;}
@keyframes rgLicht{from{transform:translateX(-10vw)}to{transform:translateX(10vw)}}
#kgr .rg-boden{position:absolute;left:-20%;right:-20%;bottom:0;height:40%;transform:perspective(50vh) rotateX(62deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(120,190,255,.18) 0 2px,transparent 2px 6vw),linear-gradient(180deg,transparent,rgba(30,90,200,.25));}
#kg-overlay #kgr .pt-logo{top:12%;}
#kg-overlay #kgr .pt-preis{box-shadow:0 0 0 .3vh #cfe8ff,0 0 0 .7vh rgba(160,210,255,.25),0 1.5vh 4vh rgba(0,0,0,.6),0 0 5vh rgba(120,190,255,.3);}
#kg-overlay #kgr .pt-preis span{background-image:linear-gradient(180deg,#ffffff,#cfe0f2 45%,#6f7f95 55%,#ffffff);}
#kg-overlay #kgr .pt-zeile::before,#kg-overlay #kgr .pt-zeile::after{background:linear-gradient(90deg,transparent,#9fd8ff);}
#kgr .rg-live{position:absolute;left:4vw;top:5vh;z-index:6;display:flex;align-items:center;gap:1vh;background:#e01b1b;color:#fff;font:900 2.6vh Inter,sans-serif;letter-spacing:.12em;
  padding:.8vh 1.8vh;border-radius:.6vh;box-shadow:0 0 3vh rgba(255,40,40,.6);animation:rgVonL .5s cubic-bezier(.2,.9,.2,1) var(--t) both;}
#kgr .rg-live i{width:1.2vh;height:1.2vh;border-radius:50%;background:#fff;animation:rgBlink 1s steps(1) infinite;}
#kgr .rg-bug{position:absolute;right:4vw;top:4.5vh;z-index:6;font-weight:900;font-size:4.4vh;line-height:1;text-align:right;color:rgba(255,255,255,.9);animation:rgEin .6s ease-out var(--t) both;}
#kgr .rg-bug small{display:block;font-size:1.4vh;letter-spacing:.4em;color:#9fd8ff;}
@keyframes rgEin{from{opacity:0;transform:translateY(-2vh)}to{opacity:1;transform:none}}
#kgr .rg-binde{position:absolute;left:4vw;bottom:10vh;z-index:6;display:flex;align-items:center;gap:1.4vh;padding:1.1vh 2.4vh;white-space:nowrap;
  background:linear-gradient(90deg,#ffffff,#dfe8f5);color:#071a45;font:800 2.6vh Inter,sans-serif;border-left:1.2vh solid #ffd400;box-shadow:0 1vh 3vh rgba(0,0,0,.4);
  animation:rgBindeL .6s cubic-bezier(.2,.9,.2,1) var(--t) both;}
#kgr .rg-binde span{font-weight:600;font-size:1.9vh;color:#5a6a85;}
@keyframes rgBindeL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#kgr .rg-ticker{position:absolute;left:0;right:0;bottom:0;height:6.4vh;z-index:6;display:flex;align-items:stretch;background:#0a0f1c;border-top:.4vh solid #ffd400;
  font:700 2.5vh Inter,sans-serif;animation:rgTickerEin .5s ease-out var(--t) both;}
@keyframes rgTickerEin{from{transform:translateY(100%)}to{transform:none}}
#kgr .rg-ticker em{display:flex;align-items:center;padding:0 2.4vh;background:#ffd400;color:#0a0f1c;font-weight:900;letter-spacing:.1em;}
#kgr .rg-band{flex:1;position:relative;overflow:hidden;}
#kgr .rg-lauf{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;white-space:nowrap;animation:rgLauf 20s linear var(--t) infinite;}
#kgr .rg-lauf span{padding:0 2.2vh;}
#kgr .rg-lauf i{color:#ffd400;}
@keyframes rgLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#kgr .rg-blitz{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none;
  animation:ptBlitzK .14s linear var(--z),ptBlitzK .25s linear var(--o),ptBlitzG 1.1s ease-out var(--h);}

/* ── Tresor ──
   Zeiten aus INTRO_TR. Die Taschenlampe ist ein Verlauf, dessen Lage und
   Größe registrierte Eigenschaften sind (--tr-x/--tr-y/--tr-r) - eine
   gewöhnliche Variable ließe sich nicht stufenlos animieren. */
@property --tr-x{syntax:'<percentage>';inherits:false;initial-value:50%;}
@property --tr-y{syntax:'<percentage>';inherits:false;initial-value:57%;}
@property --tr-r{syntax:'<length>';inherits:false;initial-value:0px;}
#kgt{position:relative;width:100%;height:100%;overflow:hidden;background:#050608;color:#fff;font-family:Unbounded,sans-serif;}
#kgt i{font-style:normal;}
#kgt .tr-flug{position:absolute;inset:0;transform-origin:50% 56%;animation:trFlug .6s cubic-bezier(.6,0,.9,.4) var(--t) both;}
@keyframes trFlug{from{transform:none}to{transform:scale(5)}}
#kgt .tr-wand{position:absolute;inset:0;
  background:radial-gradient(circle at 1.4vw 1.4vw,#8a9099 .3vh,transparent .45vh) 0 0/12vw 15vh,
             repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 .3vh,transparent .3vh 24vw),
             repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 .3vh,transparent .3vh 30vh),
             repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
             linear-gradient(180deg,#3b414a,#22262c 60%,#15181c);}
#kgt .tr-schild{position:absolute;left:50%;top:5%;transform:translateX(-50%);padding:1.2vh 4vh;border-radius:.6vh;text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,#d8c088,#8a6f33);color:#2a1d05;font-weight:900;font-size:3.4vh;letter-spacing:.25em;text-transform:uppercase;
  box-shadow:inset 0 0 0 .4vh #6b5422,0 1vh 2vh rgba(0,0,0,.6);}
#kgt .tr-schild small{display:block;font-size:1.4vh;letter-spacing:.3em;margin-top:.4vh;}
#kgt .tr-tuer{position:absolute;left:50%;top:57%;width:64vh;height:64vh;margin:-32vh 0 0 -32vh;perspective:140vh;}
#kgt .tr-loch{position:absolute;inset:3vh;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#1a1206,#050302 70%);box-shadow:inset 0 0 6vh #000;}
#kgt .tr-gold{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fffbe6 0,#ffd76a 30%,#b8771a 65%,rgba(80,40,0,0) 100%);animation:trGold 1.4s ease-in var(--t) both;}
@keyframes trGold{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1.15)}}
#kgt .tr-goldstrahl{position:absolute;left:50%;top:50%;width:260vh;height:260vh;margin:-130vh 0 0 -130vh;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:repeating-conic-gradient(rgba(255,215,106,.24) 0 5deg,transparent 5deg 14deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 12%,transparent 38%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 12%,transparent 38%);
  animation:trStrahl 1.2s ease-out var(--t) both,ptDreh 40s linear infinite;}
@keyframes trStrahl{from{opacity:0}to{opacity:1}}
#kgt .tr-rahmen{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 0 calc(50% - 3vh),#5d646f calc(50% - 3vh),#a9b2bd calc(50% - 1.6vh),#3d434c calc(50% - .2vh),transparent 50%);}
#kgt .tr-nieten i{position:absolute;left:50%;top:50%;width:1.2vh;height:1.2vh;margin:-.6vh 0 0 -.6vh;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#eef1f5,#5a616b);transform:rotate(var(--w)) translateX(30.5vh);}
#kgt .tr-blatt{position:absolute;inset:3vh;z-index:2;transform-origin:-2vh 50%;transform-style:preserve-3d;animation:trAuf 1.3s cubic-bezier(.45,0,.2,1) var(--t) both;}
@keyframes trAuf{from{transform:none}to{transform:rotateY(-108deg)}}
#kgt .tr-riegel i{position:absolute;left:50%;top:50%;width:6vh;height:2.2vh;margin:-1.1vh 0 0 -3vh;border-radius:.4vh;
  background:linear-gradient(180deg,#eef1f5,#8a929e);box-shadow:0 .3vh .6vh rgba(0,0,0,.5);
  transform:rotate(var(--w)) translateX(28.5vh);animation:trRiegel .35s ease-in var(--d) both;}
@keyframes trRiegel{from{transform:rotate(var(--w)) translateX(28.5vh)}to{transform:rotate(var(--w)) translateX(23vh)}}
#kgt .tr-platte{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#a3acb8,#5d6470 45%,#2a2e35 100%);
  box-shadow:inset 0 0 0 1.2vh #77808b,inset 0 0 0 1.7vh #2a2e35,0 1.5vh 3vh rgba(0,0,0,.7);}
#kgt .tr-ringe{position:absolute;inset:11%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 .2vh,transparent .2vh 2.2vh);box-shadow:inset 0 0 0 .4vh rgba(0,0,0,.35);}
#kgt .tr-scheibe{position:absolute;left:50%;top:13%;width:8vh;height:8vh;margin-left:-4vh;border-radius:50%;
  background:repeating-conic-gradient(#d9dee5 0 2deg,#4a515c 2deg 12deg);box-shadow:inset 0 0 0 1.4vh #3a4049,0 .6vh 1vh rgba(0,0,0,.5);}
#kgt .tr-rad{position:absolute;left:50%;top:57%;width:26vh;height:26vh;margin:-13vh 0 0 -13vh;animation:trRad 1s cubic-bezier(.5,0,.3,1) var(--t) both;}
@keyframes trRad{from{transform:none}to{transform:rotate(540deg)}}
#kgt .tr-rad i{position:absolute;left:0;top:50%;width:100%;height:2.4vh;margin-top:-1.2vh;border-radius:1.2vh;
  background:linear-gradient(180deg,#eef1f5,#7d8591);box-shadow:0 .6vh 1vh rgba(0,0,0,.5);}
#kgt .tr-rad i:nth-child(2){transform:rotate(60deg);}
#kgt .tr-rad i:nth-child(3){transform:rotate(120deg);}
#kgt .tr-rad b{position:absolute;inset:9vh;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f6f9,#7d8591);box-shadow:0 .6vh 1.2vh rgba(0,0,0,.6);}
#kgt .tr-scharnier{position:absolute;left:-2.6vh;top:22%;width:5vh;height:56%;z-index:3;
  background:linear-gradient(90deg,#4a515c,#c4ccd6 50%,#4a515c) top/100% 24% no-repeat,linear-gradient(90deg,#4a515c,#c4ccd6 50%,#4a515c) bottom/100% 24% no-repeat;}
#kgt .tr-dampf i{position:absolute;left:50%;top:50%;width:12vh;height:12vh;margin:-6vh 0 0 -6vh;border-radius:50%;z-index:4;opacity:0;
  background:radial-gradient(circle,rgba(230,235,240,.6),transparent 65%);animation:trDampf 1.3s ease-out var(--d) both;}
@keyframes trDampf{0%{opacity:0;transform:rotate(var(--w)) translateX(30vh) scale(.2)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--w)) translateX(42vh) scale(calc(var(--s) * 2.6))}}
#kgt .tr-notlicht{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,20,40,.3),rgba(120,0,10,.28) 60%,rgba(0,0,0,.35));
  animation:ifAn 1ms linear var(--a) both,ifAus 1ms linear var(--b) forwards;}
#kgt .tr-notlicht::before{content:'';position:absolute;inset:-60%;background:conic-gradient(from 0deg,rgba(255,30,30,.3) 0 28deg,transparent 28deg 180deg,rgba(255,30,30,.3) 180deg 208deg,transparent 208deg);animation:ptDreh 1.25s linear infinite;}
/* Taschenlampe: alles dunkel bis auf einen Lichtkreis, der die Wand
   abtastet und sich am Ende über das ganze Bild öffnet. */
#kgt .tr-lampe{position:absolute;inset:0;z-index:6;pointer-events:none;--tr-r:160vh;
  background:radial-gradient(circle var(--tr-r) at var(--tr-x) var(--tr-y),rgba(255,236,190,.1) 0,rgba(0,0,0,.25) 55%,rgba(0,0,0,.97) 100%);
  animation:trLampe 1.9s cubic-bezier(.45,0,.3,1) .1s backwards;}
@keyframes trLampe{0%{--tr-x:8%;--tr-y:85%;--tr-r:14vh}35%{--tr-x:46%;--tr-y:11%;--tr-r:20vh}55%{--tr-x:56%;--tr-y:13%;--tr-r:20vh}85%{--tr-x:50%;--tr-y:57%;--tr-r:42vh}100%{--tr-x:50%;--tr-y:57%;--tr-r:160vh}}
/* Sicherung: Laser, Kartenleser */
#kgt .tr-laser i{position:absolute;left:-10%;right:-10%;height:.35vh;
  background:linear-gradient(90deg,transparent,#ff1e3c 10%,#ff8a98 50%,#ff1e3c 90%,transparent);box-shadow:0 0 1.2vh #ff1e3c,0 0 3vh rgba(255,30,60,.6);
  transform:rotate(var(--w));animation:trLaserPuls 1.4s ease-in-out infinite,trLaserSchwenk 2s ease-in-out infinite alternate,trLaserAus .08s steps(1) var(--d) forwards;}
@keyframes trLaserPuls{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes trLaserSchwenk{from{transform:rotate(var(--w))}to{transform:rotate(var(--w2))}}
@keyframes trLaserAus{to{opacity:0}}
#kgt .tr-leser{position:absolute;right:6vw;top:40%;width:20vh;height:30vh;z-index:3;border-radius:1.2vh;
  background:linear-gradient(180deg,#2a2f37,#14171c);box-shadow:inset 0 0 0 .4vh #3d434d,0 2vh 4vh rgba(0,0,0,.7);}
#kgt .tr-schlitz{position:absolute;left:12%;right:12%;top:8%;height:.8vh;border-radius:.4vh;background:#000;box-shadow:0 .2vh 0 #4a515c;}
#kgt .tr-schacht{position:absolute;left:0;right:0;bottom:calc(92% - .4vh);height:40vh;overflow:hidden;}
#kgt .tr-karte{position:absolute;left:14%;right:14%;bottom:0;height:24vh;padding:1.4vh;border-radius:1vh;overflow:hidden;
  background:linear-gradient(160deg,#f4f6f9,#c9d0da);color:#14171c;box-shadow:0 1vh 2vh rgba(0,0,0,.5);
  transform:translateY(110%);animation:trKarte .75s cubic-bezier(.4,0,.2,1) var(--t) both;}
@keyframes trKarte{0%{transform:translateY(-110%)}100%{transform:translateY(110%)}}
#kgt .tr-karte small{display:block;font:700 1.1vh Inter,sans-serif;letter-spacing:.2em;color:#5a616b;}
#kgt .tr-karte b{display:block;margin-top:1vh;font-weight:900;font-size:1.7vh;line-height:1.2;word-break:break-word;}
#kgt .tr-karte i{position:absolute;left:0;right:0;bottom:3vh;height:3vh;background:var(--kc);}
#kgt .tr-karte.rot{--kc:#e8453c;}
#kgt .tr-karte.blau{--kc:#3b82f6;}
#kgt .tr-led{position:absolute;right:10%;top:18%;width:1.6vh;height:1.6vh;border-radius:50%;background:#2bff6a;box-shadow:0 0 1.8vh #2bff6a;animation:trLed .1s steps(1) var(--t) backwards;}
@keyframes trLed{from,to{background:#ff2a2a;box-shadow:0 0 1.5vh #ff2a2a}}
#kgt .tr-anzeige{position:absolute;left:10%;right:10%;top:32%;bottom:9%;border-radius:.6vh;overflow:hidden;background:#04140a;box-shadow:inset 0 0 1vh #000;
  font:700 1.5vh Inter,sans-serif;color:#7dffa8;}
#kgt .tr-anzeige span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 .6vh;letter-spacing:.05em;}
#kgt .tr-anzeige .ifw:first-child span{animation:rgBlink .6s steps(1) infinite;}
#kgt .tr-anzeige .ok{align-items:flex-start;padding-top:1.4vh;}
#kgt .tr-anzeige .ok.zwei{align-items:flex-end;padding-bottom:1.4vh;padding-top:0;}
#kgt .tr-anzeige .gross{align-items:center;padding:0;font-size:1.8vh;color:#2bff6a;text-shadow:0 0 1vh #2bff6a;}
/* Zahlenschloss */
#kgt .tr-schloss{background:radial-gradient(circle at 50% 45%,#2b3038,#0b0d10 75%);}
#kgt .tr-skala{position:absolute;left:50%;top:52%;width:84vh;height:84vh;margin:-42vh 0 0 -42vh;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#4a515c,#1c2026 70%);box-shadow:0 0 0 1.6vh #0d0f12,0 0 0 2.2vh #77808b,0 3vh 6vh rgba(0,0,0,.8);
  animation:trSkala 1.65s linear var(--t) both;}
@keyframes trSkala{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.3,0,.2,1)}27%,33%{transform:rotate(-216deg)}33%{animation-timing-function:cubic-bezier(.3,0,.2,1)}
  64%,70%{transform:rotate(-72deg)}70%{animation-timing-function:cubic-bezier(.3,0,.2,1)}100%{transform:rotate(-180deg)}}
#kgt .tr-striche{position:absolute;inset:2vh;border-radius:50%;background:repeating-conic-gradient(#e8ecf0 0 .4deg,transparent .4deg 3.6deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 calc(50% - 3.4vh),#000 calc(50% - 3.4vh));mask-image:radial-gradient(circle,transparent 0 calc(50% - 3.4vh),#000 calc(50% - 3.4vh));}
#kgt .tr-skala span{position:absolute;left:50%;top:50%;width:9vh;height:4vh;margin:-2vh 0 0 -4.5vh;text-align:center;font-weight:900;font-size:3.4vh;line-height:4vh;color:#e8ecf0;
  transform:rotate(var(--w)) translateY(-31vh);}
#kgt .tr-knauf{position:absolute;inset:31%;border-radius:50%;background:repeating-conic-gradient(#8a929e 0 4deg,#555c66 4deg 8deg);
  box-shadow:inset 0 0 0 1.6vh #2a2e35,0 1vh 2vh rgba(0,0,0,.6);}
#kgt .tr-knauf::after{content:'';position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f6f9,#6d7581);}
#kgt .tr-marke{position:absolute;left:50%;top:calc(52% - 47vh);margin-left:-2vh;border:2vh solid transparent;border-top:3vh solid #ffd76a;filter:drop-shadow(0 0 1vh #ffd76a);}
#kgt .tr-lampen{position:absolute;right:7vw;top:50%;display:flex;flex-direction:column;gap:2.4vh;transform:translateY(-50%);}
#kgt .tr-lampen i{width:3.4vh;height:3.4vh;border-radius:50%;background:#2bff6a;box-shadow:0 0 2vh #2bff6a,inset 0 0 0 .4vh #0a5a20;animation:trLed2 .1s steps(1) var(--t) backwards;}
@keyframes trLed2{from,to{background:#2a0a0a;box-shadow:inset 0 0 0 .4vh #111}}
#kgt .tr-glanz{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  animation:trGlanz 1.8s ease-in-out var(--t) both;}
@keyframes trGlanz{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
/* Kammer */
#kgt .tr-kammer{background:radial-gradient(ellipse 70% 60% at 50% 40%,#6a450c 0%,#2a1803 45%,#0a0601 100%);}
#kgt .tr-kammerlicht{position:absolute;left:50%;top:40%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;
  background:repeating-conic-gradient(rgba(255,215,106,.15) 0 4deg,transparent 4deg 12deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);
  animation:ptDreh 80s linear infinite;}
#kgt .tr-regal{position:absolute;top:16%;bottom:24%;width:34vw;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:1.6vh 1vh;padding:1.6vh;
  background:linear-gradient(180deg,#2e1d07,#140c02);box-shadow:inset 0 0 4vh #000;}
#kgt .tr-regal.l{left:-4vw;transform:perspective(80vh) rotateY(55deg);transform-origin:0 50%;}
#kgt .tr-regal.r{right:-4vw;transform:perspective(80vh) rotateY(-55deg);transform-origin:100% 50%;}
#kgt .tr-regal i{align-self:end;height:55%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:linear-gradient(180deg,#fff3c4,#ffd76a 30%,#c08a1e 70%,#7a5208);}
#kgt .tr-boden{position:absolute;left:-20%;right:-20%;bottom:0;height:30%;transform:perspective(50vh) rotateX(62deg);transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(255,200,90,.08),rgba(0,0,0,.6)),repeating-linear-gradient(90deg,rgba(255,215,106,.12) 0 2px,transparent 2px 8vw);}
#kg-overlay #kgt .pt-logo{top:12%;}
/* Der Preis als Goldbarren mit eingeprägter Schrift */
#kg-overlay #kgt .pt-preis{border-radius:0;padding:1.6vh 5vw;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);box-shadow:none;
  background:linear-gradient(180deg,#fff3c4,#ffd76a 35%,#c08a1e 75%,#8a5d0a);}
#kg-overlay #kgt .pt-preis small{color:#5a3a05;}
#kg-overlay #kgt .pt-preis span{background-image:none;color:#3d2604;}
#kgt .tr-muenzen{position:absolute;inset:0;z-index:5;pointer-events:none;}
#kgt .tr-muenzen i{position:absolute;top:-8vh;width:5vh;height:5vh;border-radius:50%;scale:var(--s);
  background:radial-gradient(circle at 40% 35%,#fff3c4,#ffd76a 35%,#c08a1e 70%,#8a5d0a);box-shadow:inset 0 0 0 .5vh #b07a14;
  animation:trFall var(--u) linear var(--d) infinite both,trFlip var(--dreh) linear infinite;}
@keyframes trFall{from{translate:0 0}to{translate:0 120vh}}
@keyframes trFlip{to{transform:rotateY(360deg)}}
#kgt .tr-blitz{position:absolute;inset:0;z-index:20;background:#fff3c4;opacity:0;pointer-events:none;
  animation:ptBlitzK .2s linear var(--r),ptBlitzK .2s linear var(--tu),ptBlitzG 1.3s ease-out var(--h);}

/* ── Outrun ──
   Zeiten aus INTRO_OR. Der Horizont liegt bei --hz; Sonne, Berge, Boden,
   Palmen und Streifen richten sich danach. Grundstile sind das Endbild,
   die Animationen kommen jeweils von "vorher". */
#kgo{position:relative;width:100%;height:100%;overflow:hidden;background:#0b0221;color:#fff;font-family:Unbounded,sans-serif;--hz:58%;}
#kgo i{font-style:normal;}
#kgo .or-welt{position:absolute;inset:0;}
#kgo .or-himmel{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,90,140,.5),transparent 42%),
             linear-gradient(180deg,#07011a 0%,#1a0640 30%,#4a0c6b 46%,#c2187a 54%,#ff5a7a 58%,#1a0533 58%);}
#kgo .or-himmel::after{content:'';position:absolute;inset:0;background:#000;opacity:0;animation:orNacht 1.6s ease-out .3s backwards;}
@keyframes orNacht{from{opacity:1}to{opacity:0}}
#kgo .or-sterne i{position:absolute;width:.4vh;height:.4vh;border-radius:50%;background:#fff;scale:var(--s);animation:orFunkel 3s ease-in-out infinite;}
@keyframes orFunkel{0%,100%{opacity:.25}50%{opacity:1}}
#kgo .or-sonne{position:absolute;left:50%;top:calc(var(--hz) - 44vh);width:52vh;height:52vh;margin-left:-26vh;border-radius:50%;
  background:linear-gradient(180deg,#ffe14d 0%,#ff9a3d 42%,#ff3d9a 78%,#c2187a 100%);
  -webkit-mask-image:linear-gradient(#000,#000),repeating-linear-gradient(180deg,#000 0 2.2vh,transparent 2.2vh 3.4vh);
  -webkit-mask-size:100% 52%,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:top,0 0;
  mask-image:linear-gradient(#000,#000),repeating-linear-gradient(180deg,#000 0 2.2vh,transparent 2.2vh 3.4vh);
  mask-size:100% 52%,100% 100%;mask-repeat:no-repeat;mask-position:top,0 0;
  animation:orSonne 1.8s cubic-bezier(.2,.7,.2,1) var(--t) backwards;}
@keyframes orSonne{from{transform:translateY(36vh)}to{transform:none}}
#kgo .or-berge{position:absolute;left:0;right:0;bottom:calc(100% - var(--hz));height:16vh;background:linear-gradient(180deg,#2a0b4a,#12032a);
  clip-path:polygon(0 100%,0 62%,6% 40%,12% 66%,19% 30%,27% 70%,33% 52%,38% 78%,62% 78%,67% 48%,73% 68%,80% 26%,87% 60%,93% 36%,100% 58%,100% 100%);}
#kgo .or-berge.hinten{height:16.8vh;background:#ff2bd6;}
#kgo .or-boden{position:absolute;left:0;right:0;top:var(--hz);bottom:0;overflow:hidden;perspective:30vh;perspective-origin:50% 0;
  background:linear-gradient(180deg,#2a0640,#0b0221);}
#kgo .or-boden > .ifw{perspective:30vh;perspective-origin:50% 0;}
#kgo .or-gitter{position:absolute;left:-150%;right:-150%;top:0;height:300%;transform-origin:50% 0;transform:rotateX(78deg);
  background-image:linear-gradient(90deg,rgba(45,226,255,.95) .25vh,transparent .25vh),linear-gradient(0deg,rgba(255,43,214,.95) .25vh,transparent .25vh);
  background-size:9vh 9vh;animation:orGitter .45s linear var(--t) infinite,orGitterAn 1.2s ease-out .4s backwards;}
#kgo .or-gitter.schnell{animation:orGitter .11s linear infinite;}
@keyframes orGitter{from{background-position:0 0}to{background-position:0 9vh}}
@keyframes orGitterAn{from{opacity:0}to{opacity:1}}
#kgo .or-horizont{position:absolute;left:0;right:0;top:var(--hz);height:.4vh;margin-top:-.2vh;
  background:linear-gradient(90deg,transparent,#ff2bd6 15%,#fff 50%,#2de2ff 85%,transparent);box-shadow:0 0 2vh #ff2bd6,0 0 5vh rgba(255,43,214,.6);
  animation:orLinie .7s cubic-bezier(.6,0,.2,1) var(--t) backwards;}
@keyframes orLinie{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#kgo .or-palmen{position:absolute;inset:0;perspective:40vh;perspective-origin:50% var(--hz);pointer-events:none;}
#kgo .or-palme{position:absolute;left:50%;top:var(--hz);width:18vh;height:36vh;margin:-36vh 0 0 -9vh;opacity:0;animation:orPalme 3.1s linear var(--d) infinite both;}
#kgo .or-palme svg{width:100%;height:100%;fill:#14031f;filter:drop-shadow(0 0 .4vh rgba(255,43,214,.7));}
@keyframes orPalme{0%{transform:translate3d(var(--x),22vh,-2600px) scaleX(var(--f));opacity:0}12%{opacity:1}100%{transform:translate3d(var(--x),22vh,250px) scaleX(var(--f));opacity:1}}
/* Leuchtschrift */
#kgo .or-neon{position:absolute;left:0;right:0;text-align:center;white-space:nowrap;font-weight:500;color:transparent;-webkit-text-stroke:.03em #fff;
  text-shadow:0 0 .04em #fff,0 0 .15em var(--c),0 0 .4em var(--c),0 0 .9em var(--c);animation:orFlackern .7s steps(1) var(--t) both;}
@keyframes orFlackern{0%{opacity:0}10%{opacity:1}18%{opacity:.15}30%{opacity:1}40%{opacity:.35}52%,100%{opacity:1}}
#kgo .or-schlag{top:27%;font-size:min(13vh,calc(90vw / var(--n) / .95));}
#kgo .or-vorab{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:'Mr Dafoe',cursive;font-size:min(12vh,8vw);color:#ff4fd8;white-space:nowrap;
  text-shadow:0 0 .05em #fff,0 0 .2em #ff2bd6,0 0 .5em #ff2bd6;transform:rotate(-5deg);animation:orFlackern .8s steps(1) var(--t) both;}
#kgo .or-schildchen{position:absolute;width:40vw;padding:2.2vh 1.5vw;border:.5vh solid var(--c);border-radius:1.6vh;text-align:center;background:rgba(10,0,25,.6);
  box-shadow:0 0 1.5vh var(--c),inset 0 0 1.5vh var(--c),0 0 5vh var(--c);animation:orFlackern .7s steps(1) var(--t) both;}
#kgo .or-schildchen.l{left:4vw;top:16%;}
#kgo .or-schildchen.r{right:4vw;top:42%;}
#kgo .or-schildchen b{display:block;font-weight:500;white-space:nowrap;font-size:min(8vh,calc(36vw / var(--n) / .95));color:#fff;
  text-shadow:0 0 .05em #fff,0 0 .2em var(--c),0 0 .5em var(--c);}
#kgo .or-vs{top:24%;font-size:17vh;font-weight:900;-webkit-text-stroke:.04em #fff;}
#kgo .or-blitz{position:absolute;left:30%;width:40%;top:6%;height:58%;opacity:0;filter:drop-shadow(0 0 .6vh #fff) drop-shadow(0 0 2vh #ffe14d);
  animation:ptBlitz .7s steps(1) var(--t) both,ptKnistern .26s steps(1) calc(var(--t) + .7s) infinite;}
/* Turbo */
#kgo .or-streifen i{position:absolute;left:50%;top:var(--hz);width:42vmax;height:.3vh;transform-origin:0 50%;opacity:0;
  background:linear-gradient(90deg,transparent,#fff);animation:ptWarp .38s linear infinite backwards;}
#kgo .or-streifen i:nth-child(3n){background:linear-gradient(90deg,transparent,#ff2bd6);}
#kgo .or-streifen i:nth-child(3n+1){background:linear-gradient(90deg,transparent,#2de2ff);}
#kgo .or-weiss{position:absolute;left:50%;top:var(--hz);width:20vmin;height:20vmin;margin:-10vmin 0 0 -10vmin;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fff 30%,rgba(255,255,255,0) 70%);animation:ptKern 1.2s cubic-bezier(.75,0,1,.4) var(--t) both;}
/* Logo */
#kg-overlay #kgo .pt-logo{top:16%;}
#kg-overlay #kgo .pt-klein{display:none;}
#kg-overlay #kgo .pt-zeile{color:#fff;text-shadow:0 0 1vh #ff2bd6,0 .2vh .4vh rgba(0,0,0,.8);}
#kg-overlay #kgo .pt-zeile::before,#kg-overlay #kgo .pt-zeile::after{background:linear-gradient(90deg,transparent,#2de2ff);}
#kg-overlay #kgo .pt-preis{box-shadow:0 0 0 .3vh #2de2ff,0 0 2vh #2de2ff,0 0 5vh rgba(255,43,214,.5);background:rgba(10,0,25,.75);}
#kg-overlay #kgo .pt-preis span{background-image:linear-gradient(180deg,#c9ecff,#ffffff 48%,#ff8a3d 52%,#ffe7b0);}
#kgo .or-schrift{position:absolute;left:50%;top:3%;z-index:4;white-space:nowrap;font-family:'Mr Dafoe',cursive;font-size:min(13vh,9vw);color:#ff4fd8;
  text-shadow:0 0 .05em #fff,0 0 .18em #ff2bd6,0 0 .5em #ff2bd6,0 .06em .1em rgba(0,0,0,.6);transform:translateX(-78%) rotate(-8deg);
  animation:orSchrift .9s cubic-bezier(.5,0,.3,1) var(--t) backwards;}
@keyframes orSchrift{from{clip-path:inset(-30% 100% -30% -5%)}to{clip-path:inset(-30% -5% -30% -5%)}}
#kgo .or-vhs{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:0;animation:orVhs 3.2s steps(1) var(--t) infinite;}
#kgo .or-vhs i{position:absolute;left:0;right:0;transform:translateX(var(--x));mix-blend-mode:screen;background:linear-gradient(90deg,rgba(255,43,214,.3),rgba(45,226,255,.3));}
@keyframes orVhs{0%{opacity:1;transform:none}3%{opacity:1;transform:translateY(5vh)}6%{opacity:.6;transform:translateY(-3vh)}9%,100%{opacity:0}}
#kgo .or-spur{position:absolute;left:0;right:0;top:-6vh;height:4vh;z-index:13;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent);animation:orSpur 5s linear var(--hit) infinite;opacity:0;}
@keyframes orSpur{from{transform:translateY(0);opacity:1}to{transform:translateY(112vh);opacity:1}}
#kgo .or-licht{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none;animation:ptBlitzK .25s linear var(--vs),ptBlitzG 1.1s ease-out var(--h);}

/* Wer weniger Bewegung eingestellt hat, bekommt bei allen Film-Intros
   gleich das Schlussbild: alle Animationen aus, nur die Einstellungen mit
   .fin stehen. Die Grundstile oben sind so gesetzt, dass ohne Animation das
   Endbild herauskommt. */
@media (prefers-reduced-motion: reduce){
  #kg-overlay.film *{animation:none !important;}
  #kg-overlay.film .ifw.fin{opacity:1;visibility:visible;}
  #kg-overlay.film .pt-funken,#kg-overlay.film .pt-pyro,#kg-overlay.film .pt-konfetti,#kg-overlay.film .pt-glitzer,#kg-overlay.film .pt-flare,#kg-overlay.film .pt-ring{display:none;}
  #kgt .tr-muenzen,#kgo .or-palmen,#kgo .or-vhs,#kgo .or-spur{display:none;}
  #kg-overlay.film .ifw2{opacity:0;visibility:hidden;}
}

/* ── WER WIRD MILLIONÄR ── */
#wwm-screen{gap:16px;max-width:1000px;}
.wwm-wrap{display:flex;gap:18px;width:100%;align-items:stretch;}
.wwm-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}
.wwm-q{
  background:var(--brd-tex, none),var(--brd-surface, linear-gradient(180deg,#0F1B5C 0%,#091042 100%));
  border-radius:var(--brd-radius, 16px);padding:clamp(12px, 3.6vh - 8px, 22px) 24px;text-align:center;
  font-size:1.25rem;font-weight:700;line-height:1.5;color:var(--brd-fg, var(--fg));min-height:70px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--brd-frame, 0 0 0 3px var(--gold-dark),0 0 0 5px #0a0e30,0 10px 32px rgba(0,0,0,.5));
}
.wwm-answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.wwm-opt{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--tile-radius, 10px);cursor:pointer;
  background:var(--tile-tex, none),var(--tile, linear-gradient(180deg,#1E3FAE 0%,#112370 100%));
  box-shadow:var(--tile-edge, inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.3));
  transition:transform .12s,filter .12s;font-weight:700;font-size:1rem;color:var(--tile-fg, var(--fg));
  font-family:var(--tile-font, inherit);
}
.wwm-opt:hover{filter:brightness(1.15);}
.wwm-opt .wwm-letter{color:var(--tile-num, var(--accent-text));font-family:var(--font-display);font-size:1.4rem;min-width:22px;}
.wwm-opt.selected{background:var(--tile-pick, linear-gradient(180deg,#F59E0B,#C2410C));color:var(--tile-pick-fg, var(--tile-fg, var(--fg)));}
.wwm-opt.selected .wwm-letter{color:var(--tile-pick-fg, var(--fg));}
.wwm-opt.correct{background:var(--tile-right, var(--tile-open, linear-gradient(180deg,#16A34A,#0F4024)));color:var(--tile-right-fg, var(--tile-open-fg, var(--tile-fg, var(--fg))));animation:wwmPulse .5s ease;}
.wwm-opt.correct .wwm-letter{color:var(--tile-right-fg, var(--tile-open-fg, var(--tile-num, var(--accent-text))));}
.wwm-opt.wrong{background:linear-gradient(180deg,var(--red),#7F1D1D);}
.wwm-opt.removed{opacity:.25;pointer-events:none;}
.wwm-opt.removed .wwm-text{visibility:hidden;}
@keyframes wwmPulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
.wwm-lifelines{display:flex;gap:10px;justify-content:center;}
.wwm-ll{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.85rem;color:var(--accent-text);
  background:rgba(var(--fg-rgb),.05);border:2px solid rgba(var(--gold-rgb),.4);
}
.wwm-ll.used{opacity:.3;text-decoration:line-through;border-color:rgba(var(--fg-rgb),.15);color:rgba(var(--fg-rgb),.3);}
.wwm-ladder{
  width:210px;flex-shrink:0;display:flex;flex-direction:column-reverse;gap:clamp(1px, .6vh - 2px, 3px);
  background:rgba(0,0,0,.25);border-radius:12px;padding:clamp(6px, 1.2vh, 10px);
}
.wwm-rung{
  /* 15 Stufen: bei 1280x720 lief die Leiter unten aus dem Bild. Der
     Innenabstand schrumpft mit dem Fenster, ab ~920 px Hoehe wie frueher. */
  display:flex;justify-content:space-between;align-items:center;padding:clamp(1px, 1.2vh - 5px, 6px) 12px;border-radius:6px;
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:1px;color:rgba(var(--fg-rgb),.55);
}
.wwm-rung .wwm-lvl{color:rgba(var(--fg-rgb),.3);font-size:.85rem;min-width:22px;}
.wwm-rung.safe{color:#FFF;}
.wwm-rung.safe .wwm-amt{color:var(--gold-pale);}
.wwm-rung.current{background:var(--tile-pick, linear-gradient(90deg,#F59E0B,#C2410C));color:var(--tile-pick-fg, var(--fg));}
.wwm-rung.current .wwm-lvl,.wwm-rung.current .wwm-amt{color:var(--tile-pick-fg, var(--fg));}
.wwm-rung.won{color:var(--green);}
.wwm-audience{display:flex;gap:14px;align-items:flex-end;justify-content:center;height:120px;margin-top:4px;}
/* Der Balken wird bei jedem Render per innerHTML neu erzeugt und bekommt seine
   Hoehe inline. Ein transition:height lief deshalb nie - das Publikumsergebnis
   stand fertig im Bild, statt zu wachsen. Jetzt waechst es aus dem Boden:
   from{height:0} laeuft auf die inline gesetzte Hoehe zu.
   Bewusst ohne Verzoegerung und ohne fill-mode - beides zusammen liesse im
   gedrosselten Popout-Fenster im schlimmsten Fall einen Balken auf Hoehe 0
   stehen. Den Versatz machen stattdessen unterschiedliche Laufzeiten. */
.wwm-abar{width:44px;background:linear-gradient(180deg,var(--blue),var(--blue-deep));border-radius:6px 6px 0 0;position:relative;animation:abarGrow .5s var(--ease-out);}
.wwm-abar:nth-child(2){animation-duration:.62s;}
.wwm-abar:nth-child(3){animation-duration:.74s;}
.wwm-abar:nth-child(4){animation-duration:.86s;}
@keyframes abarGrow{from{height:0;}}
.wwm-abar .wwm-apct{position:absolute;top:-20px;left:0;right:0;text-align:center;font-weight:700;font-size:.8rem;color:var(--accent-text);}
.wwm-abar .wwm-alet{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-weight:700;color:var(--fg);}
@media (max-width:720px){
  .wwm-wrap{flex-direction:column;}
  .wwm-ladder{width:100%;flex-direction:column-reverse;}
  .wwm-answers{grid-template-columns:1fr;}
}

/* ── WER WEISS DENN SOWAS ── */
/* Eigener Abstand zwischen den Blöcken: das Board hat einen 12px breiten
   Leuchtrand aus box-shadow, der ausserhalb seiner Box liegt und ohne Abstand
   in die Zeile darüber ragt (Schrift lag direkt auf dem Rand). */
#wwds-screen{gap:14px;}
/* Kopfzeile spannt sich genau so breit wie das Board darunter - mit einer
   max-width pro Karte stand bei 2 Teams sonst ein 500px-Block über einem
   800px-Board. */
.wwds-top{display:flex;gap:10px;width:100%;align-items:stretch;flex-wrap:wrap;}
.wwds-team{flex:1 1 0;min-width:150px;text-align:center;padding:12px 14px;border-radius:12px;position:relative;transition:border-color .3s,box-shadow .3s,background .3s;border:1px solid rgba(var(--fg-rgb),.07);}
.wwds-team.red{background:linear-gradient(180deg,rgba(153,27,27,.55),rgba(127,29,29,.65));}
.wwds-team.blue{background:linear-gradient(180deg,rgba(30,64,175,.55),rgba(30,58,138,.65));}
.wwds-team.green{background:linear-gradient(180deg,rgba(22,101,52,.55),rgba(20,83,45,.65));}
/* Kein translateY: das hat die aktive Karte gegen die andere verschoben und
   sah nach Layoutfehler aus statt nach Hervorhebung. Die Aufhellung läuft über
   inset-Schatten statt über background-image - letzteres hätte das Gradient
   der Teamfarbe (.red/.blue/.green) überschrieben und die Karte entfärbt. */
.wwds-team.on{border-color:rgba(var(--gold-rgb),.55);box-shadow:0 0 18px rgba(var(--gold-rgb),.18),inset 0 0 0 999px rgba(var(--gold-rgb),.06);}
.wwds-team .wt-name{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--fg-rgb),.55);}
.wwds-team.on .wt-name{color:var(--accent-text);}
.wwds-team .wt-money{font-family:var(--font-display);font-size:2rem;line-height:1.1;color:var(--fg);}
.wwds-team.on .wt-money{color:var(--accent-text);text-shadow:0 0 16px rgba(var(--gold-rgb),.3);}
.wwds-team .wt-meta{font-size:.6rem;color:rgba(var(--fg-rgb),.35);letter-spacing:1px;}
.wwds-team .wt-lock{margin-top:5px;font-family:var(--font-display);font-size:1.5rem;letter-spacing:3px;color:var(--accent-text);line-height:1.1;}

.wwds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;}
.wwds-cat{
  min-height:74px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:8px 6px;text-align:center;
  background:var(--tile-tex, none),var(--tile, linear-gradient(180deg,#1E3FAE 0%,#162E88 50%,#112370 100%));
  box-shadow:var(--tile-edge, inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.3));
  color:var(--tile-fg, inherit);font-family:var(--tile-font, inherit);
  transition:transform .15s,filter .15s;
}
.wwds-cat:hover:not(.done){transform:scale(1.03);filter:brightness(1.15);}
.wwds-cat .wc-num{font-family:var(--font-display);font-size:1.1rem;color:var(--tile-dim-fg, rgba(var(--fg-rgb),.35));}
.wwds-cat .wc-name{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.25;}
.wwds-cat.done{background:var(--tile-used, linear-gradient(180deg,#243056,#141a33));cursor:default;opacity:.45;}
.wwds-cat.done .wc-name{text-decoration:line-through;}

.wwds-q{
  text-align:center;font-size:1.15rem;font-weight:700;line-height:1.5;
  padding:16px 18px;border-radius:12px;background:rgba(0,0,0,.28);
  border:1px solid rgba(var(--fg-rgb),.07);width:100%;
  font-family:var(--tile-font, inherit);
}
.wwds-cat-chip{display:inline-block;padding:4px 14px;border-radius:6px;background:rgba(var(--gold-rgb),.12);
  border:1px solid rgba(var(--gold-rgb),.28);font-size:.7rem;font-weight:700;color:var(--accent-text);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.wwds-opts{display:flex;flex-direction:column;gap:9px;width:100%;}
.wwds-opt{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--tile-radius, 10px);cursor:pointer;
  background:var(--tile-tex, none),var(--tile, linear-gradient(180deg,#1E3FAE,#112370));
  box-shadow:var(--tile-edge, inset 0 1px 0 rgba(255,255,255,.1));font-weight:700;transition:filter .15s;
  color:var(--tile-fg, inherit);font-family:var(--tile-font, inherit);
}
.wwds-opt:hover{filter:brightness(1.15);}
.wwds-opt .wo-let{color:var(--tile-num, var(--accent-text));font-family:var(--font-display);font-size:1.5rem;min-width:24px;}
.wwds-opt.sel{background:var(--tile-pick, linear-gradient(180deg,#F59E0B,#C2410C));color:var(--tile-pick-fg, var(--tile-fg, inherit));}
.wwds-opt.sel .wo-let{color:var(--tile-pick-fg, var(--fg));}
.wwds-opt.right{background:var(--tile-right, var(--tile-open, linear-gradient(180deg,#16A34A,#0F4024)));color:var(--tile-right-fg, var(--tile-open-fg, var(--tile-fg, inherit)));animation:wwdsPulse .5s ease;}
.wwds-opt.right .wo-let{color:var(--tile-right-fg, var(--tile-open-fg, var(--tile-num, var(--accent-text))));}
.wwds-opt.bad{background:linear-gradient(180deg,var(--red),#7F1D1D);}
@keyframes wwdsPulse{0%{transform:scale(1);}50%{transform:scale(1.02);}100%{transform:scale(1);}}
.wwds-opt .wo-tags{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;}
.wwds-tag{font-size:.6rem;font-weight:900;letter-spacing:1px;padding:3px 8px;border-radius:999px;color:var(--fg);}

.wwds-timer{font-family:var(--font-display);font-size:3.2rem;line-height:1;color:var(--fg);transition:color .3s;}
.wwds-timer.urgent{color:var(--red);animation:wwdsTick .5s ease-in-out infinite;}
.wwds-timer.done{color:rgba(var(--fg-rgb),.25);}
@keyframes wwdsTick{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}

/* Frage-Buehne kompakter (2026-10-15): bei 1280x720 stand die offene Frage
   in 15 von 19 Richtungen bis zu 74 px unter dem Fenster, mit
   Publikumsjoker bis zu 186 px (shots.js wwds-frage / wwds-joker).
   Kategorie und Countdown teilen sich eine Zeile statt zwei, der
   Publikumsjoker steht rechts neben den Antworten statt darunter.
   Raster: Spalten a | b | c - a/b tragen Kategorie und Countdown, die
   Antworten laufen ueber a+b, c ist nur mit Joker breiter als 0.
   Die Wrapper um Chip und Timer haben Inline-Styles (js/wwds.js), daher
   !important. D hat eine eigene Komposition weiter unten. */
:root:not([data-theme="D"]) #wwds-stage:has(> .wwds-opts) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center;
}
:root:not([data-theme="D"]) #wwds-stage > div:has(> .wwds-cat-chip) { grid-area: 1 / 1; text-align: right !important; }
:root:not([data-theme="D"]) #wwds-stage > div:has(> .wwds-cat-chip) .wwds-cat-chip { margin: 0; }
:root:not([data-theme="D"]) #wwds-stage > div:has(> .wwds-timer) { grid-area: 1 / 2; justify-content: flex-start !important; margin: 0 0 10px 16px !important; }
:root:not([data-theme="D"]) #wwds-stage > .wwds-q { grid-area: 2 / 1 / 3 / -1; }
:root:not([data-theme="D"]) #wwds-stage > .wwds-opts { grid-area: 3 / 1 / 4 / 3; }
:root:not([data-theme="D"]) #wwds-stage > .wwds-aud { grid-area: 3 / 3; align-self: stretch; height: auto; min-height: 120px; margin: 0 0 0 18px; }
:root:not([data-theme="D"]) #wwds-stage > .wwds-sub { grid-column: 1 / -1; }
@media (max-height: 900px) {
  :root:not([data-theme="D"]) #wwds-screen { gap: 10px; }
  :root:not([data-theme="D"]) #wwds-stage .wwds-q { padding: 10px 18px; margin-bottom: 10px !important; }
  :root:not([data-theme="D"]) #wwds-stage .wwds-opts { gap: 7px; }
  :root:not([data-theme="D"]) #wwds-stage .wwds-opt { padding-block: 10px; }
  /* Masterfrage (shots.js wwds-master): die Tipp-Marke der Teams (.wt-lock)
     brachte eine Zeile mehr je Teamkarte, dazu die Statuszeile unter den
     Antworten - bis 48 px zu hoch. Solange Marken stehen (Einsatz,
     Masterfrage, Stichfrage): "Joker frei · 6 Fragen" gilt fuer die
     Hauptrunde und entfaellt; die Rundenzeile sagt dann nur "Masterfrage ·
     Am Zug: —", was der Chip in der Buehne schon sagt. Verworfen: die Marke
     absolut in eine Kartenecke - ueberdeckte in B den Teamnamen und in O
     das Euro-Zeichen, jede Richtung legt die Karte anders an. */
  :root:not([data-theme="D"]) #wwds-screen .wwds-team:has(.wt-lock) .wt-meta { display: none; }
  :root:not([data-theme="D"]) #wwds-screen:has(.wt-lock) > .round-bar { display: none; }
  :root:not([data-theme="D"]) #wwds-screen .wwds-team .wt-lock { margin-top: 2px; font-size: 1.3rem; line-height: 1; }
  :root:not([data-theme="D"]) #wwds-stage > .wwds-sub:last-child { margin-top: 6px !important; }
}

.wwds-aud{display:flex;gap:14px;align-items:flex-end;justify-content:center;height:110px;margin-top:2px;}
/* Wie bei WWM: neu erzeugtes Element, Hoehe inline - siehe abarGrow oben. */
.wwds-abar{width:46px;background:linear-gradient(180deg,var(--blue),var(--blue-deep));border-radius:6px 6px 0 0;position:relative;animation:abarGrow .5s var(--ease-out);}
.wwds-abar:nth-child(2){animation-duration:.62s;}
.wwds-abar:nth-child(3){animation-duration:.74s;}
.wwds-abar:nth-child(4){animation-duration:.86s;}
.wwds-abar .wa-pct{position:absolute;top:-20px;left:0;right:0;text-align:center;font-weight:700;font-size:.78rem;color:var(--accent-text);}
.wwds-abar .wa-let{position:absolute;bottom:-21px;left:0;right:0;text-align:center;font-weight:700;color:var(--fg);}

.wwds-banner{font-family:var(--font-display);font-size:1.7rem;letter-spacing:4px;color:var(--accent-text);text-align:center;}
.wwds-sub{font-size:.8rem;color:rgba(var(--fg-rgb),.4);text-align:center;font-weight:600;}
.wwds-bet-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:4px;}
/* Schätzung bleibt unscharf, bis der Host sie aufdeckt. Solange steht ein
   Platzhalter im DOM, nicht die echte Zahl - unscharf heisst nicht geheim. */
.wwds-guess{
  min-width:110px;padding:9px 12px;border-radius:8px;background:rgba(0,0,0,.35);
  border:1.5px solid rgba(var(--fg-rgb),.12);text-align:center;
  font-family:var(--font-display);font-size:1.4rem;color:var(--accent-text);
  filter:blur(9px);opacity:.55;transition:filter .5s ease,opacity .5s ease,transform .5s ease;
  user-select:none;
}
.wwds-guess.shown{filter:none;opacity:1;animation:wwdsGuessPop .45s var(--ease-pop);}
@keyframes wwdsGuessPop{0%{transform:scale(.85)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

@media (max-width:720px){
  .wwds-grid{grid-template-columns:repeat(2,1fr);}
  .wwds-team .wt-money{font-size:1.5rem;}
}

/* ── Setup-Lobby (Team-Zuteilung vor Spielstart) ──────────────────────────
   Der Kasten steht auf jedem Setup-Screen und ist das Letzte, was der Host
   vor dem Start ansieht - meist im Halbdunkel, oft mit dem Handy in der
   anderen Hand. Er war auf 520px gebaut und durchgehend in 0,68 bis 0,85rem
   gesetzt; mit Avatar, Namen, Mitspielen-Knopf und bis zu vier Team-Knoepfen
   in einer Reihe wurde daraus ein Gedraenge, in dem sich Knoepfe ueberlagert
   haben.

   Deshalb: breiter, groesser, und alles mittig. Mittig ist hier nicht Zierde -
   die Zeilen sind verschieden lang (ein Name, ein Name mit Team-Tag, ein Name
   mit vier Knoepfen), und linksbuendig steht dann jede Zeile woanders. */
.setup-lobby{width:100%;max-width:640px;margin:18px auto 0;background:rgba(var(--fg-rgb),.035);border:1px solid rgba(var(--fg-rgb),.08);border-radius:14px;padding:18px 20px;}
.setup-lobby .panel-head{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.8rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(var(--fg-rgb),.55);margin-bottom:14px;}
.setup-lobby .badge{background:rgba(var(--green-rgb),.18);color:#4ADE80;border-radius:99px;padding:3px 12px;font-size:.85rem;font-weight:800;}
/* Die Hoehe war auf 220px gedeckelt. Mit den groesseren Zeilen passten dort
   noch drei Spieler hinein, und die vierte stand angeschnitten da - das sieht
   aus wie ein Fehler, nicht wie eine Liste, die weitergeht. min() nimmt auf
   dem Handy den Bildschirm als Mass und auf dem Rechner eine feste Grenze,
   damit der Kasten nicht den ganzen Setup-Screen verdraengt. */
.setup-lobby .pr-list{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,470px);overflow-y:auto;margin-bottom:12px;}
/* Jede Zeile ein eigener Block: so ist zu sehen, was zusammengehoert, wenn
   die Team-Knoepfe darunter umbrechen. */
.setup-lobby .pr-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1rem;font-weight:600;padding:9px 12px;flex-wrap:wrap;
  background:rgba(var(--fg-rgb),.03);border-radius:10px;
}
/* Wer mitspielt, wird hervorgehoben - statt alle anderen abzublenden.

   Vorher trug jede nicht ausgewaehlte Zeile opacity:.45 (als Inline-Style).
   Solange niemand ausgewaehlt war - und das ist der Zustand, in dem der Host
   den Screen oeffnet - stand damit die GANZE Liste blass da und sah aus, als
   waere sie deaktiviert. Ein Haufen halbdurchsichtiger Namen ist keine
   Einladung, einen davon anzutippen. */
.setup-lobby .pr-row.mit{
  background:rgba(var(--gold-rgb),.09);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35);
}
/* Der Name nimmt nur den Platz, den er braucht - mit `flex:1` (so stand es
   vorher im Markup) waere jede Zeile linksbuendig, egal was daneben steht. */
.setup-lobby .pr-name{min-width:0;overflow-wrap:anywhere;text-align:center;}
.setup-lobby .pr-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);flex-shrink:0;animation:gmPulse 1.6s ease-in-out infinite;}
@keyframes gmPulse{0%,100%{opacity:1}50%{opacity:.4}}
.setup-lobby .pr-empty{font-size:.9rem;color:rgba(var(--fg-rgb),.4);padding:8px 0;text-align:center;}
/* Der Mitspielen-Knopf trug seine Groesse als Inline-Style (4px/0,7rem) - zu
   klein fuer einen Knopf, der im Dunkeln getroffen werden muss. */
.setup-lobby .roster-pick{padding:7px 16px;font-size:.78rem;letter-spacing:1px;}
/* Die Team-Knoepfe stehen inzwischen an drei Stellen: in den Setup-Lobbys, in
   der Teilnehmer-Auswahl von DDF/PIH und in der Spielerübersicht. Sie waren
   nur unterhalb von .setup-lobby gestaltet - ausserhalb kamen sie als nackte
   Browser-Knoepfe heraus. Deshalb jetzt ohne Vorfahren-Bedingung. */
.pr-team-btn{padding:8px 15px;border-radius:8px;border:1px solid rgba(var(--fg-rgb),.15);background:rgba(var(--fg-rgb),.06);color:rgba(var(--fg-rgb),.65);font-size:.82rem;font-weight:700;font-family:inherit;line-height:1.2;white-space:nowrap;cursor:pointer;}
.pr-team-btn:hover{filter:brightness(1.2);}
.pr-team-btn.active{background:rgba(var(--gold-rgb),.25);border-color:var(--gold);color:var(--accent-text);}
.setup-lobby .panel-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}

/* ── Der Duemmste fliegt & Der Preis ist heiss ─────────────────────────── */
/* Leben als Herzen. Voll ist kräftig rot, verbraucht bleibt als dunkle
   Silhouette stehen - so sieht man die Ausgangszahl die ganze Runde über. */
.ddf-heart { font-size: 1.35rem; line-height: 1; margin-right: 2px; }
.ddf-heart.full { color: #e23b3b; text-shadow: 0 0 6px rgba(226,59,59,.55), 0 1px 0 #000; }
.ddf-heart.empty { color: #2a2a2a; text-shadow: 0 1px 0 #000; }

.ddf-players { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 18px; }
.ddf-player {
  background: var(--tile-tex, none), var(--tile, rgba(var(--fg-rgb),.05)); border: 2px solid rgba(var(--fg-rgb),.14);
  box-shadow: var(--tile-edge, none); color: var(--tile-fg, inherit);
  border-radius: var(--tile-radius, 14px); padding: 10px 16px; min-width: 130px; text-align: center;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.ddf-player.out { opacity: .32; border-color: rgba(var(--fg-rgb),.08); transform: scale(.94); }
.ddf-player.out .ddf-player-name { text-decoration: line-through; }
.ddf-player.picked { border-color: #e23b3b; box-shadow: 0 0 18px rgba(226,59,59,.4); }
.ddf-player-name { font-weight: 700; margin-bottom: 6px; font-family: var(--tile-font, inherit); }

/* Die Frage ist der Mittelpunkt des Screens - alles andere ordnet sich unter. */
.ddf-question {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: clamp(1.6rem, 4.2vw, 3.4rem); font-weight: 800;
  line-height: 1.2; padding: 20px; max-width: 1100px; margin: 0 auto;
  font-family: var(--tile-font, inherit);
}
.ddf-answer {
  text-align: center; font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 700;
  color: #4ade80; padding: 10px 20px 20px;
  animation: var(--tile-reveal, none);
}
.ddf-note { text-align: center; font-size: .85rem; color: #9a9a9a; padding-bottom: 12px; }
.ddf-vote-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 10px 0 18px; }
.ddf-vote-btn { min-width: 120px; }
.ddf-media-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding-bottom: 10px; }

/* Der Edit-Screen ist ein zentrierter Flex-Container: ohne width:100% würde
   #ddf-editor auf seinen Inhalt schrumpfen und die Karten blieben schmal. */
#ddf-editor { width: 100%; }
.ddf-card {
  background: rgba(var(--fg-rgb),.03); border: 1px solid rgba(var(--fg-rgb),.08);
  border-radius: 8px; padding: 10px; max-width: 820px; margin: 0 auto 8px;
}
.ddf-card-head {
  max-width: 820px; margin: 0 auto 6px; font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--fg-rgb),.4);
}
/* Slot-Reihen sitzen dichter an ihrem Label als der globale Abstand vorgibt. */
.ddf-card .media-slots { margin-bottom: 10px; }

/* ── Der Preis ist heiß ─────────────────────────────────────────────────── */
/* Die Wertung sitzt zwischen Logo und Artikel. Eine Trennlinie darunter
   bindet sie an den Kopf der Seite, statt sie frei dazwischen schweben zu
   lassen - vorher war nicht zu sehen, ob sie zum Logo oder zum Artikel
   gehoert. */
.pih-scores {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 auto 14px; padding-bottom: 13px; max-width: 900px;
  border-bottom: 1px solid rgba(var(--fg-rgb),.07);
}
/* Pille statt Kasten: Platz, Name und Punkte stehen in einer Zeile. Das ist
   flacher, passt bei acht Teilnehmern noch in eine Reihe - und liest sich wie
   eine Rangliste statt wie eine Werkzeugleiste. */
.pih-score {
  display: flex; align-items: center; gap: 9px;
  background: var(--tile-tex, none), var(--tile, rgba(var(--fg-rgb),.04)); border: 1px solid rgba(var(--fg-rgb),.1);
  box-shadow: var(--tile-edge, none); color: var(--tile-fg, inherit);
  border-radius: 99px; padding: 7px 15px 7px 11px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
              background .2s var(--ease-out), transform .2s var(--ease-out);
}
.pih-rank {
  font-size: .7rem; font-weight: 900; min-width: 17px; text-align: center;
  color: rgba(var(--fg-rgb),.3); font-variant-numeric: tabular-nums;
}
.pih-score-name { font-weight: 700; font-size: .88rem; }
.pih-score-pts {
  font-size: 1.1rem; font-weight: 900; color: var(--accent-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Wer fuehrt, faellt ins Auge, ohne zu leuchten - das Leuchten ist fuer den
   Moment reserviert, in dem jemand den Punkt holt (.picked). */
.pih-score.lead {
  background: rgba(var(--gold-rgb),.09);
  border-color: rgba(var(--gold-rgb),.45);
}
.pih-score.lead .pih-rank { font-size: .85rem; }
/* Null Punkte bleiben lesbar, nehmen aber kein Gold in Anspruch. */
.pih-score.leer .pih-score-pts { color: rgba(var(--fg-rgb),.25); }
.pih-score.leer .pih-score-name { color: rgba(var(--fg-rgb),.6); }
.pih-score.picked {
  border-color: var(--gold); box-shadow: 0 0 18px rgba(var(--gold-rgb),.38);
  transform: translateY(-2px);
}
.pih-item { text-align: center; font-size: 1.9rem; font-weight: 800; padding: 6px 12px 12px; font-family: var(--tile-font, inherit); }
/* Das Artikelbild teilt sich die Höhe mit der Gebotsliste - deshalb eine feste
   Obergrenze statt max-height:100%, sonst drückt ein hohes Bild alles darunter
   aus dem Bild. */
.pih-stage { text-align: center; }
.pih-stage img, .pih-stage video { max-width: min(520px, 86vw); max-height: 34vh; border-radius: 10px; }
.pih-media-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 8px 0; }
.pih-price {
  text-align: center; font-size: 2.6rem; font-weight: 800; color: var(--accent-text);
  text-shadow: 0 0 18px rgba(var(--gold-rgb),.35); padding: 4px 0 2px;
}
.pih-note { text-align: center; font-size: .85rem; color: #9a9a9a; padding-bottom: 10px; }
.pih-bid-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px 0 18px; }
.pih-bid-row {
  width: 100%; max-width: 460px; margin: 0 auto; display: flex; align-items: center;
  gap: 10px; padding: 7px 12px; border-radius: var(--tile-radius, 8px);
  background: var(--tile-tex, none), var(--tile, rgba(var(--fg-rgb),.03)); border: 1px solid rgba(var(--fg-rgb),.08);
  box-shadow: var(--tile-edge, none); color: var(--tile-fg, inherit); font-family: var(--tile-font, inherit);
}
.pih-bid-row.win {
  border-color: var(--gold); background: var(--tile-open, rgba(var(--gold-rgb),.1));
  box-shadow: var(--tile-open-edge, none); color: var(--tile-open-fg, inherit);
  animation: var(--tile-reveal, none);
}
/* Überboten: der Wert zählt nicht mehr, das muss auf einen Blick lesbar sein. */
.pih-bid-row.bust { opacity: .45; }
.pih-bid-row.bust .pih-bid-val { text-decoration: line-through; }
.pih-bid-name { flex: 1; text-align: left; font-weight: 600; }
.pih-bid-val { font-weight: 800; min-width: 90px; text-align: right; }
.pih-bid-diff { min-width: 76px; text-align: right; font-size: .72rem; color: rgba(var(--fg-rgb),.45); }

#pih-editor { width: 100%; }
.pih-card-head {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(var(--fg-rgb),.4);
}
.pih-card .media-slots { margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   BEDIENBARKEIT UND BEWEGUNG
   Steht bewusst am Dateiende: beides sind Korrekturen, die sich ueber die
   Regeln darueber legen sollen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tastatur-Fokus ───────────────────────────────────────────────────────
   Bisher war jeder Knopf nur per :hover erkennbar - wer per Tab durch das
   Setup ging, sah nicht, wo er steht. :focus-visible trifft nur die
   Tastatur-Navigation, ein Mausklick loest den Ring also nicht aus. */
.btn:focus-visible,
.gm-bar .gm-btn:focus-visible,
.menu-card:focus-visible,
.menu-pill:focus-visible,
#editor-top-btn:focus-visible,
.jbz-qr:focus-visible,
.pr-team-btn:focus-visible,
.media-slot.empty:focus-within {
  outline: 3px solid rgba(var(--gold-rgb), .9);
  outline-offset: 3px;
}
.team-card input:focus-visible,
.editor-card input:focus-visible,
#host-gate input:focus-visible {
  outline: 2px solid rgba(var(--gold-rgb), .7);
  outline-offset: 2px;
}

/* ── Reduzierte Bewegung ──────────────────────────────────────────────────
   Die App laeuft dauerhaft mit Endlos-Animationen (Scheinwerfer, Funken,
   Luftballons, Puls-Punkte). Wer in den Systemeinstellungen "Bewegung
   reduzieren" gewaehlt hat, bekommt hier eine ruhige Fassung: einmalige
   Uebergaenge bleiben ganz kurz erhalten, Endlosschleifen werden angehalten.
   Die Overlays haben ohnehin einen Timeout-Fallback (closeOverlay), laufen
   also auch ohne animationend sauber weiter. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Dauerhafte Stimmungs-Animationen ganz aus, statt sie auf 0.01ms zu
     stauchen - sonst springt der Endzustand sichtbar. */
  #kgn .grid, #kgn .stars,
  #kg .cone, #kgb .cone,
  #kg .cord, #kgb .cord,
  #kg .mb, #kgb .mb,
  #kg .spark, #kgb .spark,
  #kgb .balloon, #kg-overlay .cake .flame,
  .online-dot, .tut-icon, .tut-star-anim, .tut-trophy-bounce,
  .jsfx-ring, .jsfx-bar, .setup-lobby .pr-dot, .tut-hint, .kg-hint {
    animation: none !important;
  }
  .confetti-p { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FEINSCHLIFF
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Ziffern mit fester Breite ────────────────────────────────────────────
   Punktestaende und Timer sind proportional gesetzt: eine 1 ist schmaler
   als eine 8, also wandert die Zahl beim Hochzaehlen sichtbar hin und her
   und schiebt die Nachbarspalte mit. Auf dem Beamer faellt das auf.
   tabular-nums gibt jeder Ziffer dieselbe Breite - der Stand aendert sich,
   die Position nicht. */
.team-panel .t-score,
.jeopardy-team .jt-score,
.wwds-team .wt-money,
.finale-score-pts,
.finale-reveal-pts,
.finale-timer,
.wwds-timer,
.pih-score-pts,
.pih-price,
.pih-bid-val,
.tile.open .tile-pts,
.round-bar .pts,
.result-scores strong,
.wwm-rung .wwm-amt {
  font-variant-numeric: tabular-nums;
}

/* ── Aufgedeckte Antwort ──────────────────────────────────────────────────
   Die Kachel klappt bereits auf; der Text darin erschien aber schlagartig.
   Ein kurzes Nachziehen von Text und Punktzahl macht aus dem Umschalten
   eine Bewegung. */
.tile.open .tile-answer { animation: tileTextIn .4s var(--ease-out) .18s both; }
.tile.open .tile-pts    { animation: tileTextIn .4s var(--ease-out) .26s both; }
@keyframes tileTextIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Aktives Team ─────────────────────────────────────────────────────────
   Der goldene Balken unter dem aktiven Team wurde bisher hart ein- und
   ausgeblendet. Jetzt faehrt er aus der Mitte heraus. */
.team-panel.active-team::after { animation: activeBarIn .35s var(--ease-out) both; }
@keyframes activeBarIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Overlays ─────────────────────────────────────────────────────────────
   Der Unschaerfe-Hintergrund lag sofort in voller Staerke da. Sanft
   aufziehen wirkt weniger wie ein Schnitt. */
.strike-overlay, #qr-overlay, #media-overlay, .jeopardy-sound-fx {
  animation: overlayFadeIn .28s var(--ease-out) both;
}
@keyframes overlayFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; }
}

/* ── Eingabefelder allgemein ──────────────────────────────────────────────
   Einheitlicher Fokuszustand statt nur Randfarbe: der leichte Schein macht
   auf einen Blick klar, wo geschrieben wird. */
.editor-card input:focus {
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .09);
}

/* ── Punktevergabe ───────────────────────────────────────────────────────
   Der Punktestand sprang bisher lautlos auf den neuen Wert. Im Spiel ist
   genau das der Moment, auf den alle schauen - ein kurzer Impuls macht ihn
   sichtbar. updateScores() setzt die Klasse nur, wenn sich der Wert
   wirklich geaendert hat. */
.score-bump { animation: scoreBump .45s var(--ease-pop); }
@keyframes scoreBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); text-shadow: 0 0 26px rgba(var(--gold-rgb), .6); }
  100% { transform: scale(1); }
}

/* ── Massen-Eingabe in den Editoren ──────────────────────────────────────
   Der Kasten "Mehrere einfuegen" steht in mehreren Editoren. Sein Aussehen
   lag bisher als Inline-Style-String im JavaScript, in jedem Editor eine
   eigene Kopie - der Style des Textfelds allein war 230 Zeichen lang und
   stand zweimal wortgleich da. Jetzt einmal hier. */
.editor-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.btn.btn-xs { padding: 7px 12px; font-size: .72rem; }
.btn.btn-sm { padding: 8px 14px; font-size: .75rem; }
.bulk-box {
  margin-bottom: 12px; padding: 12px; background: #0F1436;
  border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 10px;
}
.bulk-box label {
  display: block; font-size: .65rem; color: rgba(var(--fg-rgb),.4); margin: 0 0 4px;
}
.bulk-box textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb),.12); background: rgba(0,0,0,.35); color: var(--fg);
  font-family: inherit; font-size: .85rem; line-height: 1.5; outline: none;
  resize: vertical;
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.bulk-box textarea:focus {
  border-color: rgba(var(--gold-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .09);
}
.bulk-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.bulk-hint { font-size: .66rem; color: rgba(var(--fg-rgb),.4); }

/* ══════════════════════════════════════════════════════════════════════════
   TRIVIAL PURSUIT
   Das Rad ist das Herz der Anzeige: es ersetzt das Spielbrett des Originals.
   Deshalb steht es gross links und die Frage rechts daneben - auf einem
   Beamer liest das Publikum die Frage, waehrend der Zeiger noch nachwippt.
   ══════════════════════════════════════════════════════════════════════════ */

.tp-top{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:6px;}
.tp-team{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 20px;border-radius:var(--tile-radius, 16px);
  background:var(--tile-tex, none),var(--tile, rgba(var(--fg-rgb),.04));border:2px solid rgba(var(--fg-rgb),.08);
  box-shadow:var(--tile-edge, none);color:var(--tile-fg, inherit);
  transition:border-color var(--t-med) var(--ease-out),background var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);
}
/* Wer am Zug ist, muss man aus der letzten Reihe sehen - Rand allein reicht
   dafuer nicht, deshalb zusaetzlich ein Schein und ein Stueck Groesse. */
.tp-team.turn{
  border-color:var(--gold);background:rgba(var(--gold-rgb),.08);
  box-shadow:0 0 28px rgba(var(--gold-rgb),.22);transform:translateY(-4px);
}
.tp-team.red.turn{border-color:var(--red);box-shadow:0 0 28px rgba(var(--red-rgb),.25);}
.tp-team.blue.turn{border-color:var(--blue);box-shadow:0 0 28px rgba(var(--blue-rgb),.25);}
.tp-team.green.turn{border-color:var(--green);box-shadow:0 0 28px rgba(var(--green-rgb),.25);}
.tp-team-name{font-weight:900;font-size:1rem;letter-spacing:.5px;font-family:var(--tile-font, inherit);}
.tp-team-sub{font-size:.72rem;color:rgba(var(--fg-rgb),.45);font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.tp-pie{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}

.tp-board{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;}

.tp-wheel{position:relative;width:260px;height:260px;flex:0 0 260px;}
.tp-wheel-rotor{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 6px rgba(0,0,0,.45),0 14px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(0,0,0,.35);
  /* Lang und stark auslaufend: ein Rad, das gleichmaessig stoppt, sieht aus
     wie ein Umschalter. Der Reiz liegt im letzten Stueck, wo es nur noch
     kriecht und man schon mitzaehlt. */
  transition:transform 3.1s cubic-bezier(.12,.75,.15,1);
}
.tp-wheel-labels{position:absolute;inset:0;}
.tp-wlabel{
  position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));pointer-events:none;
}
.tp-wheel-hub{
  position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:var(--ink);border:4px solid rgba(var(--gold-rgb),.75);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2rem;color:var(--accent-text);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
/* Der Zeiger gehoert nicht zum Rad, sonst dreht er mit und zeigt nie irgendwo
   hin. Er sitzt oben ausserhalb und ragt ein Stueck ins Rad hinein. */
.tp-wheel-pointer{
  position:absolute;left:50%;top:-14px;margin-left:-13px;
  width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:30px solid var(--gold);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
}

.tp-side{flex:1;min-width:300px;display:flex;flex-direction:column;gap:14px;}
.tp-stage{
  min-height:150px;padding:20px 22px;border-radius:var(--brd-radius, 16px);
  background:var(--brd-tex, none),var(--brd-surface, rgba(var(--fg-rgb),.04));border:1px solid rgba(var(--fg-rgb),.08);
  box-shadow:var(--brd-frame, none);color:var(--brd-fg, inherit);
  display:flex;flex-direction:column;gap:12px;justify-content:center;
}
.tp-catchip{
  align-self:flex-start;padding:6px 16px;border-radius:99px;
  font-weight:900;font-size:.8rem;letter-spacing:1px;color:var(--ink);
}
.tp-question{font-size:1.5rem;font-weight:800;line-height:1.35;font-family:var(--tile-font, inherit);}
.tp-answer{
  font-size:1.2rem;font-weight:900;color:var(--tile-right-fg, var(--green));
  padding:10px 14px;border-radius:var(--tile-radius, 12px);background:var(--tile-right, rgba(var(--green-rgb),.1));
  border:1px solid rgba(var(--green-rgb),.3);font-family:var(--tile-font, inherit);
  animation:var(--tile-reveal, tpAnswerIn .3s var(--ease-pop));
}
@keyframes tpAnswerIn{from{opacity:0;transform:translateY(8px);}}
/* Verdeckt heisst wirklich verdeckt: der Text steht nicht im Markup, sondern
   erst dann, wenn der Host aufdeckt. Unscharf gestellte Schrift laesst sich
   mit der Entwicklerkonsole und manchmal sogar mit den Augen lesen. */
.tp-answer.hidden{
  color:rgba(var(--fg-rgb),.25);background:rgba(var(--fg-rgb),.03);
  border-style:dashed;border-color:rgba(var(--fg-rgb),.12);
  font-weight:700;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;animation:none;
}
.tp-steal{
  font-weight:800;color:var(--accent-text);font-size:.95rem;
  animation:tpStealPulse 1.4s ease-in-out infinite;
}
@keyframes tpStealPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.tp-hint{color:rgba(var(--fg-rgb),.5);font-size:1rem;line-height:1.5;}
.tp-controls{display:flex;gap:10px;flex-wrap:wrap;}

.tp-win{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.tp-win-title{font-family:var(--font-display);font-size:2.6rem;color:var(--accent-text);letter-spacing:2px;}
.tp-win-sub{color:rgba(var(--fg-rgb),.5);font-size:.9rem;}

.tp-editor-col{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}

@media (max-width:820px){
  .tp-board{flex-direction:column;}
  .tp-wheel{width:210px;height:210px;flex:0 0 210px;}
  .tp-side{min-width:0;width:100%;}
}

/* Das Rad dreht sich auch fuer jemanden, der Bewegung reduziert hat - sonst
   springt die Kategorie ohne jede Erklaerung ins Bild. Es dreht nur kurz. */
@media (prefers-reduced-motion: reduce){
  .tp-wheel-rotor{transition-duration:.4s !important;}
}

/* ── Trivial-Pursuit-Setup ────────────────────────────────────────────────
   Vorher standen die Regeln als drei einzeln zentrierte Haken-Zeilen da.
   Jede Zeile war anders breit, also sass jedes Kaestchen woanders - das Auge
   findet darin keine Kante. Jetzt eine Tafel mit fester linker Kante: die
   Kaestchen stehen untereinander, die Erklaerung haengt am Text. */
.tp-setup-panel{
  width:100%;max-width:640px;margin:4px auto 0;
  padding:18px 22px;border-radius:16px;
  background:rgba(var(--fg-rgb),.03);border:1px solid rgba(var(--fg-rgb),.08);
  display:flex;flex-direction:column;gap:10px;
}
.tp-setup-head{
  font-size:.66rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(var(--fg-rgb),.35);
}
.tp-setup-head + .tp-setup-head,
.tp-cats + .tp-setup-head{margin-top:8px;}

/* Raster statt Umbruch: bei freiem Umbruch endet jede Zeile woanders, weil die
   Namen verschieden lang sind. Drei gleich breite Spalten geben den sechs
   Stuecken eine Kante - und nebenbei dieselbe Anordnung wie auf dem Rad. */
.tp-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.tp-chip{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 7px 9px;border-radius:99px;
  background:rgba(var(--fg-rgb),.04);
  /* Der Rand traegt die Kategoriefarbe, nicht die Flaeche: sechs volle Farben
     nebeneinander erschlagen den Screen, und das Rad soll der bunte Teil
     bleiben. */
  border:1.5px solid var(--c);
  transition:background var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out);
}
.tp-chip:hover{background:rgba(var(--fg-rgb),.07);transform:translateY(-1px);}
.tp-chip-icon{font-size:1rem;line-height:1;}
.tp-chip-name{font-size:.8rem;font-weight:700;color:rgba(var(--fg-rgb),.82);}
.tp-chip-count{
  margin-left:auto;
  min-width:20px;padding:1px 6px;border-radius:99px;text-align:center;
  font-size:.7rem;font-weight:900;color:var(--ink);background:var(--c);
  font-variant-numeric:tabular-nums;
}
/* Eine Kategorie ohne Frage ist ein Spielabbruch in Zeitlupe - der Host muss
   das vor dem Start sehen, nicht mittendrin. */
.tp-chip.leer{border-color:var(--red);background:rgba(var(--red-rgb),.1);}
.tp-chip.leer .tp-chip-count{background:var(--red);color:var(--fg);}
.tp-chip.leer .tp-chip-name{color:rgba(var(--fg-rgb),.55);}

.tp-rule{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:9px 10px;border-radius:12px;
  transition:background var(--t-fast) var(--ease-out);
}
.tp-rule:hover{background:rgba(var(--fg-rgb),.04);}
.tp-rule input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--green);cursor:pointer;
  margin-top:2px;flex:0 0 18px;
}
.tp-rule-text{display:flex;flex-direction:column;gap:2px;}
.tp-rule-text b{font-size:.88rem;font-weight:800;color:rgba(var(--fg-rgb),.88);}
.tp-rule-text em{font-size:.74rem;font-style:normal;color:rgba(var(--fg-rgb),.4);line-height:1.45;}

@media (max-width:760px){ .tp-cats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){
  .tp-setup-panel{padding:14px 16px;}
  .tp-chip-name{font-size:.74rem;}
}
@media (max-width:420px){ .tp-cats{grid-template-columns:1fr;} }

/* ── Lobby-Kasten, Feinschliff ────────────────────────────────────────────
   Gilt fuer alle Setup-Screens, die ihn benutzen: Feud, Jeopardy, WWDS,
   Trivial Pursuit und ueber roster.js auch DDF und Der Preis ist heiss.

   Vorher lagen vier Knoepfe in einem flex-wrap. Weil sie verschieden breit
   sind, brach die Reihe bei 2+1+1 um und keine Kante stand unter der
   anderen. Zwei gleich breite Spalten ordnen das - und stellen nebenbei die
   Paare zusammen, die zusammengehoeren: oben QR, unten Teams. */
.setup-lobby .panel-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding-top:12px;margin-top:2px;
  border-top:1px solid rgba(var(--fg-rgb),.07);
}
.setup-lobby .panel-row .btn{
  width:100%;justify-content:center;text-align:center;
  padding:12px 12px;font-size:.8rem;
}
/* "Teams zuteilen" war btn-primary und damit der lauteste Knopf auf dem
   ganzen Screen - lauter als "Spiel starten", das darunter steht. Es bleibt
   der wichtigste im Kasten, aber der Vorrang gehoert dem Start. */
.setup-lobby .lobby-main{
  border-color:rgba(var(--gold-rgb),.45);
  color:var(--accent-text);
}
.setup-lobby .lobby-main:hover{background:rgba(var(--gold-rgb),.1);}
/* Zuruecksetzen wirft die Teamzuteilung aller Spieler weg. Es darf nicht
   aussehen wie die anderen drei, aber auch nicht nach Warnung schreien -
   es steht hier schliesslich absichtlich. */
.setup-lobby .lobby-reset{color:rgba(var(--fg-rgb),.4);}
.setup-lobby .lobby-reset:hover{color:var(--red);border-color:rgba(var(--red-rgb),.4);}

/* Null ist kein Erfolg. Die Zahl wird erst gruen, wenn wirklich jemand da
   ist - vorher stand dort ein gruenes "0", das Verbundene versprach. */
.setup-lobby .badge.leer{background:rgba(var(--fg-rgb),.07);color:rgba(var(--fg-rgb),.4);}

.setup-lobby .pr-empty{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 2px 12px;line-height:1.45;
}
.setup-lobby .pr-empty b{font-size:.95rem;font-weight:800;color:rgba(var(--fg-rgb),.55);}
.setup-lobby .pr-empty span{font-size:.82rem;color:rgba(var(--fg-rgb),.35);}

@media (max-width:460px){
  .setup-lobby .panel-row{grid-template-columns:1fr;}
}

/* ── Regeln im Fragen-Editor ──────────────────────────────────────────────
   Dieselbe Tafel wie vorher im Setup, nur an ihrem richtigen Platz: die
   Regeln gehoeren zu den Fragen, nicht zum Spielstart. */
.tp-rules-panel{
  padding:16px 20px;border-radius:14px;
  background:rgba(var(--fg-rgb),.03);border:1px solid rgba(var(--fg-rgb),.08);
  display:flex;flex-direction:column;gap:6px;margin-bottom:4px;
}
.tp-editor-grid{display:flex;flex-direction:column;gap:12px;}

/* Die Fragenzahl je Kategorie. .badge ist ausserhalb des Lobby-Kastens
   ungestylt - dort stand bisher eine nackte Ziffer neben dem Namensfeld. */
.tp-editor-grid .badge{
  background:rgba(var(--fg-rgb),.08);color:rgba(var(--fg-rgb),.55);
  border-radius:99px;padding:2px 11px;font-size:.72rem;font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* .panel-head ist ausserhalb des Lobby-Kastens display:block - ohne flex
   rutschen Zaehler und Loeschknopf unter die Namenszeile. */
.tp-editor-grid .panel-head{display:flex;align-items:center;gap:10px;}
.tp-editor-grid .q-list-item{flex-wrap:wrap;}

/* ── Wertung bei „Der Dümmste fliegt" ─────────────────────────────────────
   Dieselbe Ordnung wie bei „Der Preis ist heiß": die Leiste gehört zum Kopf
   der Seite, nicht zur Frage darunter. Ausgeschiedene stehen hinten, das
   laufende Feld bleibt zusammen. */
.ddf-players {
  padding-bottom: 12px; margin-bottom: 6px; max-width: 1000px;
  margin-left: auto; margin-right: auto;
  border-bottom: 1px solid rgba(var(--fg-rgb),.07);
}
.ddf-hearts { line-height: 1; }
/* Letztes Herz. Der Rand schlägt nicht Alarm, er ist nur wärmer als der
   normale - das Rot ist für .picked reserviert, den Moment des Rauswurfs. */
.ddf-player.last {
  border-color: rgba(226,59,59,.45);
  background: rgba(226,59,59,.07);
}
.ddf-player.last .ddf-player-name { color: #FFC9C9; }
/* Wie viele noch im Spiel sind. Steht sonst nirgends - man musste die roten
   Herzen zählen. */
.ddf-alive {
  text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(var(--fg-rgb),.35); margin-bottom: 10px;
}

/* ── Trivial Pursuit: eigene Kategorien ───────────────────────────────────
   Farbe, Zeichen und Name stehen im Editor nebeneinander in der Kopfzeile
   der Kategorie - dort, wo man sie sucht, und nicht in einem Untermenü. */
.tp-cat-edit { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
/* Der Farbwähler ist in jedem Browser anders gebaut. Rahmen und Polster weg,
   dann bleibt überall dasselbe Farbfeld übrig.

   Der Selektor braucht den Elementnamen davor: die allgemeine Editor-Regel
   für Eingabefelder ist spezifischer als eine blosse Klasse und drückte dem
   Feld 11px 14px Polster auf - vom Farbfeld blieb ein Strich übrig. */
.tp-editor-grid input.tp-cat-color {
  width: 34px; height: 32px; padding: 0; border: none; border-radius: 8px;
  background: transparent; cursor: pointer; flex: 0 0 34px;
}
.tp-editor-grid input.tp-cat-color::-webkit-color-swatch-wrapper { padding: 0; }
.tp-editor-grid input.tp-cat-color::-webkit-color-swatch {
  border: 2px solid rgba(var(--fg-rgb),.28); border-radius: 8px;
}
.tp-editor-grid input.tp-cat-color::-moz-color-swatch {
  border: 2px solid rgba(var(--fg-rgb),.28); border-radius: 8px;
}
.tp-cat-icon {
  width: 46px; text-align: center; font-size: 1.05rem; flex: 0 0 46px;
}
.tp-cat-name { flex: 1; min-width: 0; max-width: 260px; }

/* ── Intro und Anleitung der neuen Shows ──────────────────────────────────
   Dieselben Auftritte wie beim Jeopardy-Warnzeichen, nur mit dem jeweiligen
   Spiel-Icon: erst das grosse Zeichen im Intro, dann klein auf der Titelkarte. */
.game-intro-sign svg {
  width: 130px; height: auto; opacity: 0;
  filter: drop-shadow(0 0 30px rgba(var(--gold-rgb), .4));
  animation: introStarIn 1.5s ease-out .3s forwards;
}
.game-title-sign { opacity: 0; animation: welcomeStarIn 1s ease-out .2s forwards; }
.game-title-sign svg { width: 92px; height: auto; filter: drop-shadow(0 0 25px rgba(var(--gold-rgb), .4)); }
.tut-star-anim svg { width: 96px; height: auto; }

/* Der Dümmste fliegt: zwei Beispielkarten, damit man den Unterschied zwischen
   vollem und verbrauchtem Herz einmal gesehen hat, bevor es zählt. */
.tut-ddf-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.tut-ddf-card {
  padding: 12px 20px; border-radius: 14px;
  background: rgba(var(--fg-rgb),.05); border: 2px solid rgba(var(--fg-rgb),.14);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.tut-ddf-card b { font-size: .95rem; }

/* Der Preis ist heiß: drei Gebote und der echte Preis darunter. Die Regel
   steht als Text daneben - das Bild allein erklärt sie nicht. */
.tut-pih-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.tut-pih-bid {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 9px 18px; border-radius: 12px;
  background: rgba(var(--fg-rgb),.05); border: 2px solid rgba(var(--fg-rgb),.14);
}
.tut-pih-bid span { font-size: .72rem; color: rgba(var(--fg-rgb),.45); font-weight: 700; }
.tut-pih-bid b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tut-pih-bid.win { border-color: var(--green); background: rgba(var(--green-rgb), .12); }
.tut-pih-bid.win b { color: var(--green); }
/* Überbieten fliegt nur bei "Nur drunter zählt" raus - deshalb setzt die
   Anleitung diese Klasse auch nur dann. */
.tut-pih-bid.bust { border-color: rgba(var(--red-rgb), .5); opacity: .6; }
.tut-pih-bid.bust b { text-decoration: line-through; color: var(--red); }
.tut-pih-price {
  font-size: .95rem; font-weight: 800; color: var(--accent-text); margin-bottom: 12px;
}

/* Trivial Pursuit: die echten Kategorien in ihren echten Farben. */
.tut-tp-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 560px; margin: 0 auto 14px;
}
.tut-tp-chip {
  padding: 7px 14px; border-radius: 99px; font-size: .8rem; font-weight: 700;
  background: rgba(var(--fg-rgb),.05); border: 1.5px solid var(--c);
}

/* ── Preis ist heiss: Teamstand ───────────────────────────────────────────
   Gespielt wird in zwei Teams, gezaehlt werden Einzelpunkte. Damit waehrend
   des Spiels trotzdem klar ist, wie es zwischen den Teams steht, liegt diese
   Leiste ueber der Einzelwertung. Fuehrendes Team hell, das andere gedaempft
   - auf zehn Meter Entfernung erkennt man sonst keinen Unterschied. */
.pih-teamrow{display:flex;gap:10px;justify-content:center;margin:0 auto 8px;max-width:640px;}
.pih-team{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 16px;border-radius:10px;
  background:color-mix(in srgb, var(--team) 14%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--team) 45%, transparent);
  opacity:.62;transition:opacity .2s ease, box-shadow .2s ease;
}
.pih-team.lead{opacity:1;box-shadow:inset 0 0 0 2px var(--team),0 0 22px color-mix(in srgb, var(--team) 35%, transparent);}
.pih-team-name{font-family:var(--font-body);font-weight:800;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--fg);}
.pih-team-pts{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--team);}
.pih-team-hint{text-align:center;font-size:.62rem;color:rgba(var(--fg-rgb),.32);margin:-4px 0 8px;}
@media (max-width:760px){
  .pih-team{padding:6px 11px;}
  .pih-team-name{font-size:.68rem;letter-spacing:.5px;}
  .pih-team-pts{font-size:1.3rem;}
}

/* Wer vom Handy aus gedreht hat - steht nur kurz in der Rundenleiste. */
.tp-spin-by{color:#FFD23F;font-weight:800;}

/* Aufstellung unter der Teilnehmerliste: wer steht in welchem Team. */
/* Die Karten-Reihen auf den Setup-Screens (Leben, Zeit, Teamnamen, …).

   Vorher ein flex-wrap: bei drei Karten und zu wenig Platz brach die dritte
   als 2+1 um und stand dann schmaler da als die beiden darueber, weil
   .team-card ein max-width:300px traegt. Das Auge findet darin keine Kante -
   dieselbe Sache, die im Lobby-Kasten schon einmal ein Raster bekommen hat.

   auto-fit statt fester Spaltenzahl: solange zwei nebeneinander passen, stehen
   sie nebeneinander; darunter untereinander. In jedem Fall sind alle Karten
   in einer Zeile gleich breit, und die letzte fuellt sie aus. */
.setup-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-bottom:16px;
}
/* Im Raster bestimmt die Spalte die Breite - die Deckelung aus .team-card
   wuerde die Karte darin nur wieder verschmaelern. */
.setup-row .team-card{max-width:none;min-width:0;}

/* Gaeste ohne Handy: derselbe Zuschnitt wie der Lobby-Kasten darueber.

   Vorher lagen Ueberschrift, Eingabefelder und der "+ Gast"-Knopf als drei
   lose Elemente im Screen und standen deshalb linksbuendig - waehrend alles
   andere auf dem Setup-Screen mittig ist. Das war die zweite Stelle, die
   David im Bild rot eingekreist hat. */
.setup-guests{
  width:100%;max-width:640px;margin:14px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.setup-guests .label{
  font-size:.8rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(var(--fg-rgb),.55);text-align:center;
}
/* Die Gastzeilen bauen sich in renderRosterInputs() mit eigenem Flex-Layout;
   hier bekommen sie nur eine Breite, damit sie nicht ueber den Kasten
   hinauslaufen. */
.setup-guests > div{width:100%;max-width:420px;}

/* Die Team-Knoepfe bekommen eine eigene Zeile unter dem Namen: `flex-basis`
   auf 100% zwingt den Umbruch, statt ihn dem verfuegbaren Platz zu ueberlassen.
   Vorher standen sie mit flex-shrink:0 und ohne Umbruch in derselben Reihe und
   schoben sich bei drei Teams plus ✕-Knopf ueber den "spielt mit"-Knopf. Ein
   erzwungener Umbruch sieht immer gleich aus; ein zufaelliger nie. */
.roster-teams{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%;justify-content:center;margin-top:2px;}
.roster-lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(var(--fg-rgb),.07);font-size:.85rem;}
.roster-team-sum{color:rgba(var(--fg-rgb),.7);}
.roster-team-sum b{font-weight:800;margin-right:5px;}
.roster-team-sum.t0 b{color:var(--red);}
.roster-team-sum.t1 b{color:var(--blue);}
.roster-team-sum.t2 b{color:var(--green);}
.roster-team-sum.ohne b{color:rgba(var(--fg-rgb),.35);}

.intro-editor-col{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}
.intro-card .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
/* Zwei Spalten, solange Platz ist: die vier Zeilen einer Stufe gehoeren
   zusammen und sollen nicht ueber den halben Bildschirm auseinanderlaufen. */
.intro-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.intro-fields label{display:flex;flex-direction:column;gap:4px;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(var(--fg-rgb),.4);}
.intro-fields input, .intro-fields select{width:100%;}
/* Native Auswahlfelder waren rund 20px hoch - zu klein fuer den Host im
   Halbdunkel (BAUPLAN 4.2: Klickflaechen ab 32px). Optik wie #intro-variant. */
.intro-fields select{min-height:38px;padding:8px 10px;border-radius:8px;border:1.5px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:#fff;font-family:inherit;font-weight:700;outline:none;}
.intro-fields select:focus-visible{border-color:var(--gold);}
@media (max-width:760px){ .intro-fields{grid-template-columns:1fr;} }

/* Platzhalter fuer den Intro-Block. Er ist leer, solange der Block woanders
   steht - ohne eigene Hoehe, damit kein Loch im Setup-Screen bleibt. */
.intro-slot{display:contents;}

/* ── DESIGN-AUSWAHL ── */
#design-screen { max-width: 1200px; gap: 14px; }
.design-hint { color: var(--muted); font-size: .9rem; margin: 0; text-align: center; }
.design-hint strong { color: var(--fg); }
.design-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; width: 100%;
}
.design-card {
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.design-card.active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .35); }
/* Die Entwuerfe sind 1280x800 gezeichnet; die Vorschau zeigt sie verkleinert,
   ohne dass sie Klicks abfangen. */
.design-pv {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 8px; background: #000;
}
.design-pv iframe {
  position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0;
  transform-origin: 0 0; transform: scale(var(--pv-scale, .2)); pointer-events: none;
}
.design-pv-classic {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(ellipse 120% 80% at 50% 20%, rgba(30,50,140,.6) 0%, transparent 60%), #0b0e2c;
}
.design-pv-classic span { font-family: 'Luckiest Guy', system-ui, sans-serif; font-size: 3rem; color: #FFD23F; line-height: 1; }
.design-pv-classic small { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: 3px; color: #9aa0c8; text-transform: uppercase; }
.design-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.design-name { font-weight: 700; color: var(--fg); }
.design-name b { color: var(--accent-text); margin-right: 4px; }
.design-swatches { display: flex; gap: 3px; }
.design-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(var(--fg-rgb), .25); }
.design-actions { display: flex; gap: 8px; align-items: center; }
.design-actions .btn { padding: 9px 14px; font-size: .72rem; }
.design-on { font-weight: 800; color: var(--accent-text); font-size: .85rem; letter-spacing: 1px; padding: 9px 4px; }

/* Helle Richtungen: die Spiel-Logos oben sind weiss-gold mit Leuchten
   gezeichnet - auf hellem Grund verschwinden sie. Dort in Schriftfarbe. */
/* Show-Logos oben (renderLogo in core.js) mit Richtung: deren Logo-Schrift,
   Wort in der Akzentfarbe statt Gold, ohne Goldschein. Das Symbol zeichnet
   der Block "Show-Symbole je Design-Richtung" weiter unten. */
:root[data-theme] .logo svg { filter: none; }
:root[data-theme] #main-logo .logo-word { font-family: var(--font-logo); fill: rgb(var(--gold-rgb)); filter: none; }
/* Fraktur in Versalien ist unleserlich ("WER WEISS") - die Show-Logos in L
   deshalb in der Zeitungs-Serife; die Fraktur bleibt dem Kopf "The Iryo Gameshow". */
:root[data-theme="L"] #main-logo .logo-word { font-family: 'Playfair Display', serif; font-weight: 900; }
:root[data-theme-hell] #main-logo .logo-word { fill: var(--fg); filter: none; }

/* ---- Show-Symbole je Design-Richtung ---------------------------------
   Alle Symbole (core.js: STAR_SVG, DANGER_SVG, gameCardIcon, renderLogo)
   tragen die Klasse .show-icon und bestehen aus vier Sorten Elementen:
     [fill^="url"]    Goldflaeche          [stroke^="url"]  Goldlinie
     [fill="#0b0e2c"] Aussparung           [fill="#3a3f6b"] gedimmte Saeule
   Jede Richtung setzt nur Variablen, die Regeln darunter gelten fuer alle:
     --ico-fill      Flaeche              --ico-fstroke/--ico-fsw  deren Kontur
     --ico-line      Linie                --ico-lw   Linienbreite (nur Umriss-Stile)
     --ico-cut       Aussparung           --ico-cutline/--ico-cutlw  deren Umriss
     --ico-dim       gedimmte Flaeche     --ico-dimline  deren Umriss
     --ico-filter / --ico-blend           Schatten, Pixel, Kreide, Leuchten
   :where() nimmt der Waechter-Bedingung die Spezifitaet, damit die
   Richtungs-Regeln (Umriss-Stile, Bauhaus, Memphis) sie schlagen. Seit dem
   Studio-Rework (2026-10-14) laeuft auch A ueber die Variablen (Champagner
   statt des alten Goldverlaufs). */
:where(:root[data-theme]) .show-icon [fill^="url"]:not([stroke]) {
  fill: var(--ico-fill); stroke: var(--ico-fstroke, none); stroke-width: var(--ico-fsw, 0);
  paint-order: stroke; stroke-linejoin: round;
}
/* Mit eigenem Rand (Karte im Wer-weiss-denn-sowas-Pult): ohne Kontur bleibt
   die dunkle Fuge zur Flaeche dahinter. */
:where(:root[data-theme]) .show-icon [fill^="url"][stroke] {
  fill: var(--ico-fill); stroke: var(--ico-fstroke, var(--ico-cut)); stroke-width: var(--ico-fsw, 1.4);
  paint-order: stroke; stroke-linejoin: round;
}
:where(:root[data-theme]) .show-icon [stroke^="url"] {
  stroke: var(--ico-line, var(--ico-fill));
}
:where(:root[data-theme]) .show-icon [fill="#0b0e2c"] { fill: var(--ico-cut); }
:where(:root[data-theme]) .show-icon [fill="#0b0e2c"]:not([stroke]) {
  stroke: var(--ico-cutline, none); stroke-width: var(--ico-cutlw, 1);
}
:where(:root[data-theme]) .show-icon [stroke="#0b0e2c"]:not([fill^="url"]) { stroke: var(--ico-cut); }
:where(:root[data-theme]) .show-icon [fill="#3a3f6b"] { fill: var(--ico-dim); }
:where(:root[data-theme]) .show-icon [fill="#3a3f6b"] {
  stroke: var(--ico-dimline, var(--ico-fstroke, none)); stroke-width: var(--ico-fsw, 0); stroke-linejoin: round;
}
/* Umriss-Stile: Linien so dick wie die Konturen, nicht in den festen 3-5 Einheiten. */
:root:is([data-theme="I"], [data-theme="J"], [data-theme="K"]) .show-icon [stroke^="url"] { stroke-width: var(--ico-lw); }
/* Schatten und Co. Die Menuekarte hebt das Symbol beim Hover mit eigenem
   Goldschein an (.menu-card:hover ...) - die dritte Zeile schlaegt den. */
:root[data-theme] g.show-icon { filter: var(--ico-filter, none); mix-blend-mode: var(--ico-blend, normal); }
/* Am <svg> selbst rechnet ein Filter in CSS-Pixeln, an der <g> in Symbol-Einheiten:
   fuer das Pixel-Mosaik (B) deshalb --ico-filter-root. */
:root[data-theme] svg.show-icon,
:root[data-theme] .menu-card:hover .menu-card-icon svg.show-icon {
  filter: var(--ico-filter-root, var(--ico-filter, none)); mix-blend-mode: var(--ico-blend, normal);
}

:root[data-theme="A"] { --ico-fill:#F2D395; --ico-line:#F2D395; --ico-cut:#090A10; --ico-dim:#2B2F40; --ico-filter:drop-shadow(0 0 8px rgba(232,194,122,.5)); }
:root[data-theme="B"] { --ico-fill:#FFE14D; --ico-line:#45F0FF; --ico-cut:#0B0A12; --ico-dim:#2B2740; --ico-filter:drop-shadow(3px 3px 0 #8A7400); }
:root[data-theme="C"] { --ico-fill:#FFA3D1; --ico-fstroke:#121212; --ico-fsw:3.5; --ico-line:#121212; --ico-cut:#121212; --ico-dim:#FFF; --ico-filter:drop-shadow(4px 4px 0 #121212); }
:root[data-theme="D"] { --ico-fill:#FF5B1F; --ico-line:#F2F2F2; --ico-cut:#0E0E0E; --ico-dim:#3A3A3A; }
:root[data-theme="E"] { --ico-fill:#F6E7CB; --ico-line:#F2B33D; --ico-cut:#2B1810; --ico-dim:#8C3A1A; --ico-filter:drop-shadow(3px 3px 0 #E8622C) drop-shadow(3px 3px 0 #8C3A1A); }
:root[data-theme="F"] { --ico-fill:#FFE600; --ico-fstroke:#111; --ico-fsw:3.5; --ico-line:#E8453C; --ico-cut:#111; --ico-dim:#FFF; --ico-filter:drop-shadow(4px 4px 0 #111); }
:root[data-theme="H"] { --ico-fill:#D7372B; --ico-line:#141414; --ico-cut:#ECEAE4; --ico-dim:#141414; }
:root[data-theme="I"] { --ico-fill:none; --ico-fstroke:#C9A54C; --ico-fsw:2; --ico-line:#C9A54C; --ico-lw:2; --ico-cut:none; --ico-cutline:#C9A54C; --ico-cutlw:1.5; --ico-dim:none; --ico-dimline:rgba(201,165,76,.4); }
:root[data-theme="J"] { --ico-fill:none; --ico-fstroke:#EDEDE6; --ico-fsw:3; --ico-line:#EDEDE6; --ico-lw:3; --ico-cut:none; --ico-cutline:#EDEDE6; --ico-cutlw:2.5; --ico-dim:none; --ico-dimline:rgba(237,237,230,.35); --ico-filter:url(#ico-chalk); }
:root[data-theme="K"] { --ico-fill:none; --ico-fstroke:#FF4FA3; --ico-fsw:3; --ico-line:#45F0FF; --ico-lw:3; --ico-cut:none; --ico-cutline:#FF4FA3; --ico-cutlw:2; --ico-dim:none; --ico-dimline:rgba(255,79,163,.3); --ico-filter:drop-shadow(0 0 3px #FF4FA3) drop-shadow(0 0 8px #FF4FA3); }
:root[data-theme="L"] { --ico-fill:#1A1712; --ico-line:#1A1712; --ico-cut:#E6DECA; --ico-dim:rgba(26,23,18,.35); }
:root[data-theme="M"] { --ico-fill:url(#ico-aurora); --ico-line:#B7A6FF; --ico-cut:#070A1A; --ico-dim:rgba(183,166,255,.25); --ico-filter:drop-shadow(0 0 6px rgba(183,166,255,.6)); }
:root[data-theme="N"] { --ico-fill:#F06A4E; --ico-line:#163936; --ico-cut:#FBF5E8; --ico-dim:#9CCBC0; --ico-filter:drop-shadow(2px 3px 0 rgba(22,57,54,.25)); }
:root[data-theme="O"] { --ico-fill:url(#ico-scan); --ico-line:#7CFFA0; --ico-cut:#05140B; --ico-dim:#1F5A33; --ico-filter:drop-shadow(0 0 4px rgba(124,255,160,.7)); }
:root[data-theme="P"] { --ico-fill:#FFD23F; --ico-fstroke:#141414; --ico-fsw:2.5; --ico-line:#141414; --ico-cut:#F4F1FF; --ico-dim:rgba(20,20,20,.3); }
:root[data-theme="Q"] { --ico-fill:#3255A4; --ico-cut:#F2EEE4; --ico-dim:rgba(50,85,164,.3); --ico-filter:drop-shadow(3px 2px 0 rgba(255,72,176,.85)); --ico-blend:multiply; }
:root[data-theme="R"] { --ico-fill:#F2A900; --ico-line:#F4F1EA; --ico-cut:#111; --ico-dim:#3A3A3A; }
:root[data-theme="S"] { --ico-fill:url(#ico-deco); --ico-fstroke:#FBEBC0; --ico-fsw:.8; --ico-line:#D9B66B; --ico-cut:#0B0A08; --ico-dim:rgba(217,182,107,.25); }
/* Keller: Muenzgold mit hartem Schlagschatten nach unten rechts, wie ein
   Gegenstand, der im Raum auf dem Boden liegt. */
:root[data-theme="T"] { --ico-fill:#E0B43C; --ico-line:#17110D; --ico-cut:#17110D; --ico-dim:rgba(224,180,60,.28); --ico-filter:drop-shadow(2px 3px 0 rgba(0,0,0,.6)); }

/* Bauhaus und Memphis: reihum mehrere Farben statt einer. */
:root[data-theme="H"] .show-icon [fill^="url"]:nth-child(3n+1) { fill: #D7372B; }
:root[data-theme="H"] .show-icon [fill^="url"]:nth-child(3n+2) { fill: #1F4FA3; }
:root[data-theme="H"] .show-icon [fill^="url"]:nth-child(3n)   { fill: #F2C230; }
:root[data-theme="P"] .show-icon [fill^="url"]:nth-child(4n+1) { fill: #FFD23F; }
:root[data-theme="P"] .show-icon [fill^="url"]:nth-child(4n+2) { fill: #3FD0C9; }
:root[data-theme="P"] .show-icon [fill^="url"]:nth-child(4n+3) { fill: #FF6FA8; }
:root[data-theme="P"] .show-icon [fill^="url"]:nth-child(4n)   { fill: #7B5CFF; }

/* Helle Richtungen: Flaechen in Teamfarbe bleiben dunkelrot/-blau/-gruen
   (BAUPLAN 4.4) - Schrift darauf muss also hell bleiben. Die Variablen erben,
   deshalb reicht es, sie an der Teamflaeche selbst zurueckzusetzen. Die
   halbtransparenten Karten werden dabei deckend, sonst waeren sie auf Creme
   nur noch rosa und hellblau.
   Die Akzentschrift gehoert mit dazu: helle Richtungen setzen sie dunkel
   (Comic #B42318, Bauhaus #D7372B, New York #1A1712), und genau darin
   standen Punktestand und Name des Teams, das dran ist - rot auf Rot, also
   unsichtbar. Auf der Teamflaeche gilt deshalb ein helles Gold. */
:root[data-theme-hell] :is(.team-card, .team-panel, .jeopardy-team, .wwds-team, .tut-buzz-btn):is(.red, .blue, .green) {
  --fg: #fff; --fg-rgb: 255,255,255; --muted: rgba(255,255,255,.75);
  --accent-text: #FFE9A0; --accent-text-rgb: 255,233,160;
  color: #fff;
}
:root[data-theme-hell] .team-card.red   { background: linear-gradient(180deg, #B91C1C, #7F1D1D); }
:root[data-theme-hell] .team-card.blue  { background: linear-gradient(180deg, #1D4ED8, #1E3A8A); }
:root[data-theme-hell] .team-card.green { background: linear-gradient(180deg, #16A34A, #14532D); }
:root[data-theme-hell] .wwds-team.red   { background: linear-gradient(180deg, #991B1B, #7F1D1D); }
:root[data-theme-hell] .wwds-team.blue  { background: linear-gradient(180deg, #1E40AF, #1E3A8A); }
:root[data-theme-hell] .wwds-team.green { background: linear-gradient(180deg, #166534, #14532D); }

/* ══ Material je Design-Richtung ═══════════════════════════════════════════
   Die Spielbretter je Richtung, abgeleitet aus designs/s/<K>-Leinwand.html,
   -Jeopardy.html und -WWM.html. Grundlage sind die Tokens aus dem :root-Block
   "Spielbrett-Material"; was sich nicht als Token sagen laesst (Raster,
   gestrichelte Kanten, Glanz), steht als eigene Regel darunter.

   Jede Richtung hat EINEN Signatur-Moment: das Aufdecken eines Feud-Feldes
   (--tile-reveal). Alles reines CSS - das Zuschauerfenster spiegelt nur den
   DOM und fuehrt nichts aus (BAUPLAN 4.8). Mit reduzierter Bewegung faellt
   der Moment weg, siehe ganz unten.

   Rot fuer "falsch" und die Teamfarben bleiben in jeder Richtung gleich
   (BAUPLAN 4.4). */

/* ── A · Studio (neu 2026-10-14): Primetime-Studio ─────────────────────────
   Graphitglas unter zwei Scheinwerferkegeln (--bg-img in js/theme.js), warmes
   Champagner-Fuehrungslicht fuer alles Aufgedeckte, kuehles blaues
   Kantenlicht oben an jedem Glas. Schrift Anybody, weit gezogen.
   Signatur: beim Aufdecken geht ueber dem Feld das Licht an - es zieht aus
   dem Dunkeln hoch, ein Lichtstreif faehrt einmal ueber das Glas, dann
   glueht es champagner. Unter dem Brett liegt die Bodenspiegelung.
   Die alte Studio-Fassung (Navy, Goldbalken, Gluehbirnenrahmen) ist
   vollstaendig ersetzt, nicht umgebaut. */
:root[data-theme="A"] {
  font-stretch: 118%;
  --brd-surface: linear-gradient(180deg, rgba(90,169,255,.08) 0%, rgba(90,169,255,0) 20%), linear-gradient(180deg, #11131C 0%, #090A10 100%);
  --brd-frame: inset 0 1px 0 rgba(150,200,255,.4), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px #000, 0 40px 70px -30px rgba(0,0,0,.9);
  --brd-well: #05060A;
  --brd-inner: transparent;
  --brd-radius: 16px;
  --tile: linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.012) 52%, rgba(0,0,0,.18) 100%), #151824;
  --tile-hover: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 52%, rgba(0,0,0,.14) 100%), #1C2030;
  --tile-edge: inset 0 1px 0 rgba(140,195,255,.5), inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 22px -10px rgba(0,0,0,.8);
  --tile-fg: #FFF6E5;
  --tile-head: linear-gradient(180deg, #171A26, #0E1018);
  --tile-head-fg: #F6DFAE;
  --tile-used: #0A0B11;
  --tile-num: #8EC5FF;
  --tile-num-glow: 0 0 14px rgba(90,169,255,.6);
  --tile-dim-fg: #6F7488;
  --tile-open: radial-gradient(130% 160% at 0% 0%, #FFF4DA 0%, #F2D395 40%, #D9AB5B 100%);
  --tile-open-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(90,60,10,.35), 0 0 30px rgba(232,194,122,.42), 0 14px 26px -12px rgba(0,0,0,.7);
  --tile-open-fg: #1B1306;
  --tile-open-dim: rgba(27,19,6,.5);
  --tile-pts-bg: rgba(27,19,6,.07);
  --tile-pts-rule: rgba(27,19,6,.2);
  --tile-pick: radial-gradient(130% 160% at 0% 0%, #FFF4DA 0%, #F2D395 40%, #D9AB5B 100%);
  --tile-pick-fg: #1B1306;
  --tile-right: radial-gradient(130% 160% at 0% 0%, #D6FFE2 0%, #4ADE80 45%, #15803D 100%);
  --tile-right-fg: #03230E;
  --tile-radius: 6px;
  --tile-font: 'Anybody', sans-serif;
  --tile-reveal: thALicht .75s cubic-bezier(.2,.8,.2,1);
}
/* Bodenspiegelung: ein warmer Lichtfleck unter dem Brett, wie der Glanz
   eines Studiobodens unter den Scheinwerfern. */
:root[data-theme="A"] .board::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -34px; height: 34px; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(232,194,122,.24), transparent 72%);
}
/* Kandidatenpulte statt Farbflaechen: Graphitglas, oben ein leuchtendes
   Band in der Teamfarbe, das von oben in die Flaeche strahlt. Die Teamfarbe
   bleibt so eindeutig (BAUPLAN 4.4), aber Teil des Studios. Am Zug: das
   Pult bekommt Champagner-Licht von unten. */
:root[data-theme="A"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team).red   { --tc: 232,69,60; }
:root[data-theme="A"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team).blue  { --tc: 59,130,246; }
:root[data-theme="A"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team).green { --tc: 34,197,94; }
:root[data-theme="A"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team):is(.red, .blue, .green) {
  background:
    linear-gradient(180deg, rgb(var(--tc)) 0, rgb(var(--tc)) 4px, rgba(var(--tc),.34) 4px, rgba(var(--tc),.08) 60%, rgba(var(--tc),.03) 100%),
    linear-gradient(180deg, #161926, #0C0E15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 4px 22px -6px rgba(var(--tc),.7);
  border: 0;
}
:root[data-theme="A"] .team-panel .t-score,
:root[data-theme="A"] .jeopardy-team .jt-score { font-weight: 900; color: #FFF6E5; }
:root[data-theme="A"] .team-panel .t-name,
:root[data-theme="A"] .jeopardy-team .jt-name { color: rgba(var(--tc),1); filter: brightness(1.45); }
:root[data-theme="A"] .team-panel.active-team .t-score { color: #F2D395; text-shadow: 0 0 24px rgba(232,194,122,.4); }
:root[data-theme="A"] .team-panel.active-team { box-shadow: inset 0 0 0 1px rgba(232,194,122,.35), inset 0 4px 22px -6px rgba(var(--tc),.7), inset 0 -18px 30px -18px rgba(232,194,122,.45); }
/* TP: am Zug zusaetzlich gehoben und mit Champagner-Kante (wie die Pulte). */
:root[data-theme="A"] .tp-team.turn { box-shadow: inset 0 0 0 1px rgba(232,194,122,.45), inset 0 4px 22px -6px rgba(var(--tc),.7), 0 0 30px rgba(232,194,122,.22); }
/* Lange Texte (TP-Frage und -Loesung) nicht geweitet - sonst Umbruch nach drei Woertern. */
:root[data-theme="A"] :is(.tp-question, .tp-answer) { font-stretch: 100%; }
:root[data-theme="A"] .q-text { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: .2px; }
:root[data-theme="A"] .tile-num { font-weight: 800; font-size: 1.4rem; }
/* Antworten nur leicht geweitet: voll gezogen brach "Bus/Bahn verpasst" um. */
:root[data-theme="A"] .tile.open .tile-answer { font-weight: 800; font-size: 1.2rem; letter-spacing: .3px; font-stretch: 100%; }
:root[data-theme="A"] .tile.open .tile-pts { color: #1B1306; text-shadow: none; font-weight: 900; font-size: 1.6rem; }
:root[data-theme="A"] .jeopardy-cat { border-bottom: 2px solid #5AA9FF; font-weight: 800; font-size: 1.05rem; letter-spacing: .5px; }
:root[data-theme="A"] .jeopardy-cell { font-weight: 900; font-size: 2.2rem; color: #F2D395; text-shadow: none; }
:root[data-theme="A"] .wwm-opt { font-weight: 700; font-size: 1.35rem; font-stretch: 108%; }
/* Lichtstreif ueber dem frisch aufgedeckten Feld - einmal, dann Ruhe. */
:root[data-theme="A"] .tile.open .tile-inner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.85) 50%, transparent 68%);
  transform: translateX(-120%); animation: thAStreif .8s .25s cubic-bezier(.3,.7,.2,1) forwards;
}
@keyframes thALicht {
  0%   { filter: brightness(.25) saturate(0); }
  40%  { filter: brightness(1.7) saturate(1.1); }
  100% { filter: none; }
}
@keyframes thAStreif { to { transform: translateX(120%); } }

/* ── B · Arcade (Rework 2026-10-14): Automat, Original-Identitaet ──────────
   Zurueck zum Entwurf designs/s/B-*.html (Gelb und Cyan auf Fast-Schwarz,
   Press Start, harte Pixelrahmen) - die Fassung "Automat 1987" (0f4e9e9,
   Magenta-Verlaeufe und Leuchtschein) ist ersetzt, weil sie genau das war,
   was David bei Late Night als Verlaufs-Einheitsbrei abgelehnt hat.
   Veredelt wird ueber Ordnung und Details statt Glanz: weisse Doppelrahmen
   mit Fuge, Platznummern zweistellig (01), Spieleranzeigen 1P/2P/3P,
   Platzhalter aus Punkten, Auswahlpfeil, harter Pixelversatz statt Schatten,
   unten der Gitterboden aus dem Jeopardy-Entwurf.
   Signatur: das Feld blinkt beim Aufdecken hart auf wie eine Punkteanzeige.
   Teamfarben bleiben (BAUPLAN 4.4) - als Rahmen, nicht als Flaeche. */
:root[data-theme="B"] {
  --brd-surface: #14121F;
  --brd-frame: 0 0 0 4px #FFFFFF, 0 0 0 8px #0B0A12, 0 0 0 11px #2B2740;
  --brd-well: #0B0A12;
  --brd-inner: transparent;
  --brd-radius: 0;
  --tile: #0B0A12;
  --tile-hover: #1C1930;
  --tile-edge: inset 0 0 0 2px #2B2740;
  --tile-fg: #EEEAFE;
  --tile-head: #45F0FF;
  --tile-head-fg: #0B0A12;
  --tile-used: transparent;
  --tile-num: #FFE14D;
  --tile-num-glow: none;
  --tile-dim-fg: #8C86AD;
  --tile-bar: radial-gradient(circle, #45F0FF 2px, transparent 2.5px) 0 50% / 18px 6px repeat-x;
  --tile-rule: transparent;
  --tile-open: #FFE14D;
  --tile-open-edge: none;
  --tile-open-fg: #0B0A12;
  --tile-open-dim: #0B0A12;
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: #45F0FF;
  --tile-pick-fg: #0B0A12;
  --tile-right: #3CFF7A;
  --tile-right-fg: #0B0A12;
  --tile-radius: 0;
  --tile-font: 'Press Start 2P', monospace;
  --tile-reveal: thBBlink .45s steps(1, end);
  --b-px: 'Press Start 2P', monospace;
  --b-line: #2B2740;
}
/* Gitterboden wie unter dem Jeopardy-Brett im Entwurf: Linien, die nach
   hinten fluchten. Fest am unteren Rand, hinter allem, ohne Leuchten. */
:root[data-theme="B"] body::before {
  content: ''; position: fixed; left: -30%; right: -30%; bottom: 0; height: 30vh; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(69,240,255,.22) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(69,240,255,.22) 0 2px, transparent 2px 40px);
  transform: perspective(260px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(0deg, #000 0%, transparent 85%); mask: linear-gradient(0deg, #000 0%, transparent 85%);
}

/* ── Spieleranzeigen 1P / 2P / 3P ─────────────────────────────────────── */
:root[data-theme="B"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #E8453C; }
:root[data-theme="B"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #3B82F6; }
:root[data-theme="B"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #22C55E; }
:root[data-theme="B"] :is(.scoreboard, .jeopardy-scores) { gap: 14px; border-radius: 0; box-shadow: none; overflow: visible; counter-reset: bspieler; }
:root[data-theme="B"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  background: #14121F; border: 0; border-radius: 0; box-shadow: inset 0 0 0 4px var(--tc);
  counter-increment: bspieler; text-align: right; padding: 14px 18px 12px;
}
:root[data-theme="B"] .team-card::before { display: none; }
:root[data-theme="B"] :is(.team-panel, .jeopardy-team, .wwds-team)::before {
  content: counter(bspieler) 'P'; position: absolute; left: 16px; top: 13px;
  font-family: var(--b-px); font-size: .62rem; color: var(--tc);
}
:root[data-theme="B"] .wwds-top { counter-reset: bspieler; }
:root[data-theme="B"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: 2px; color: #9C96B8;
}
:root[data-theme="B"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: var(--b-px); color: #EEEAFE; text-shadow: 3px 3px 0 #2B2740; line-height: 1.2;
}
:root[data-theme="B"] .team-panel .t-score { font-size: 2.3rem; margin-top: 6px; }
:root[data-theme="B"] .jeopardy-team .jt-score { font-size: 1.5rem; margin-top: 4px; }
:root[data-theme="B"] .wwds-team .wt-money { font-size: 1.3rem; margin-top: 4px; }
/* Am Zug: gelber Rahmen innen, blinkender Pfeil am Namen - wie "1P READY". */
:root[data-theme="B"] .team-panel.active-team { padding: 14px 18px 12px; box-shadow: inset 0 0 0 4px var(--tc), inset 0 0 0 7px #0B0A12, inset 0 0 0 9px #FFE14D; }
:root[data-theme="B"] .wwds-team.on { box-shadow: inset 0 0 0 4px var(--tc), inset 0 0 0 7px #0B0A12, inset 0 0 0 9px #FFE14D; }
:root[data-theme="B"] .team-panel.active-team::after { content: '▶'; left: auto; right: auto; bottom: auto; top: 11px; left: 44px; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; color: #FFE14D; font-size: .7rem; animation: thBCursor 1s steps(1, end) infinite; }
:root[data-theme="B"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #FFE14D; text-shadow: 3px 3px 0 #8A7400; }
:root[data-theme="B"] :is(.team-panel.active-team .t-name, .wwds-team.on .wt-name) { color: #FFE14D; }
:root[data-theme="B"] .wwds-team .wt-meta { color: #6F6A8F; }

/* X wie am Automaten: rote Pixel-X in schwarzen Kaesten. */
:root[data-theme="B"] .team-strikes { justify-content: flex-end; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; transform: none; }
:root[data-theme="B"] .strike-pip { width: 28px; height: 28px; border-radius: 0; background: #0B0A12; border: 2px solid #2B2740; font-family: var(--b-px); font-size: .7rem; color: #2B2740; }
:root[data-theme="B"] .strike-pip.lit { background: #0B0A12; border-color: #E8453C; color: #E8453C; box-shadow: none; animation: thBBlink .45s steps(1, end); }

:root[data-theme="B"] .round-bar { font-family: var(--b-px); font-size: .58rem; letter-spacing: 1px; color: #45F0FF; gap: 14px; }
:root[data-theme="B"] .round-bar .pts { font-family: var(--b-px); font-size: .9rem; color: #FFE14D; text-shadow: 2px 2px 0 #8A7400; }

/* ── Feud ─────────────────────────────────────────────────────────────── */
:root[data-theme="B"] .board { padding: 18px; }
:root[data-theme="B"] .q-text {
  font-family: var(--b-px); font-size: .82rem; line-height: 1.75; font-weight: 400; text-transform: uppercase;
  text-align: left; justify-content: flex-start; color: #EEEAFE; border-radius: 0;
  box-shadow: inset 0 0 0 2px #EEEAFE; padding: 12px 16px; margin-bottom: 14px;
}
:root[data-theme="B"] .q-text.hidden-q { box-shadow: none; border: 2px dashed #2B2740; justify-content: center; }
:root[data-theme="B"] .q-text.hidden-q::after { font-family: var(--b-px); font-size: .55rem; letter-spacing: 1px; color: #6F6A8F; animation: thBCursor 1.2s steps(1, end) infinite; }
:root[data-theme="B"] .answers { counter-reset: bplatz; gap: 4px; }
:root[data-theme="B"] .tile { counter-increment: bplatz; }
:root[data-theme="B"] .tile:hover:not(.open) { transform: none; }
:root[data-theme="B"] .tile-num { width: 52px; font-size: 0; }
:root[data-theme="B"] .tile-num::before { content: counter(bplatz, decimal-leading-zero); font-family: var(--b-px); font-size: .72rem; }
:root[data-theme="B"] .tile:not(.open) .tile-center { justify-content: flex-start; padding-left: 8px; }
:root[data-theme="B"] .tile:not(.open) .tile-center::after { width: 60%; height: 6px; border-radius: 0; background: var(--tile-bar); }
:root[data-theme="B"] .tile.open .tile-center { padding-left: 8px; }
:root[data-theme="B"] .tile.open .tile-answer { font-size: .85rem; letter-spacing: 0; line-height: 1.5; font-weight: 400; }
:root[data-theme="B"] .tile.open .tile-pts { color: #0B0A12; text-shadow: none; font-size: .95rem; font-family: var(--b-px); box-shadow: none; }
:root[data-theme="B"] .tile.missed .tile-inner { background: #3A0E12 !important; box-shadow: inset 0 0 0 2px #E8453C !important; color: #FFB3AD; }

/* Finale */
:root[data-theme="B"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner, .elim-team) { font-family: var(--b-px); color: #FFE14D; text-shadow: 4px 4px 0 #8A7400; letter-spacing: 2px; text-transform: uppercase; }
:root[data-theme="B"] .finale-title { font-size: 1.6rem; }
:root[data-theme="B"] :is(.finale-team-label, .finale-q-info) { font-family: var(--b-px); font-size: .55rem; letter-spacing: 1px; color: #45F0FF; }
:root[data-theme="B"] :is(.finale-score-card, .finale-reveal-team) { background: #14121F; border: 0; border-radius: 0; box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] .finale-score-card.active { background: #14121F; box-shadow: inset 0 0 0 3px #FFE14D; }
:root[data-theme="B"] :is(.finale-score-pts, .finale-reveal-pts, .finale-timer) { font-family: var(--b-px); color: #FFE14D; text-shadow: 3px 3px 0 #8A7400; }
:root[data-theme="B"] .finale-score-pts { font-size: 1.5rem; margin-top: 6px; }
:root[data-theme="B"] .finale-reveal-pts { font-size: 1.2rem; }
:root[data-theme="B"] .finale-timer { font-size: 3.4rem; }
:root[data-theme="B"] :is(.finale-score-name, .finale-reveal-name) { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #9C96B8; }
:root[data-theme="B"] .finale-reveal-answer { font-family: var(--b-px); font-size: .7rem; line-height: 1.6; }
:root[data-theme="B"] .finale-big-q { font-family: var(--b-px); font-size: 1.8rem; line-height: 1.6; text-shadow: none; }

/* ── Jeopardy: gelb gerahmte Felder, Kategorien in Cyan ───────────────── */
:root[data-theme="B"] .jeopardy-board { gap: 8px; padding: 10px; border-radius: 0; background: #0B0A12; }
:root[data-theme="B"] .jeopardy-cat { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: 0; border-radius: 0; }
:root[data-theme="B"] .jeopardy-cell { font-family: var(--b-px); font-size: 1.15rem; letter-spacing: 0; border-radius: 0; background: #0B0A12; box-shadow: inset 0 0 0 3px #FFE14D; text-shadow: 3px 3px 0 #5C4E00; }
:root[data-theme="B"] .jeopardy-cell:hover:not(.used) { transform: none; background: #1C1930; box-shadow: inset 0 0 0 3px #FFE14D, inset 0 0 0 6px #0B0A12, inset 0 0 0 8px #45F0FF; }
:root[data-theme="B"] .jeopardy-cell.used { box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] .jeopardy-clue-cat { font-family: var(--b-px); font-size: .62rem; letter-spacing: 1px; color: #45F0FF; }
:root[data-theme="B"] .jeopardy-clue-pts { font-family: var(--b-px); font-size: 2rem; color: #FFE14D; text-shadow: 4px 4px 0 #8A7400; letter-spacing: 0; }
:root[data-theme="B"] .jeopardy-clue-text { font-family: var(--b-px); line-height: 1.6; }
:root[data-theme="B"] .jeopardy-clue-img { border-radius: 0; border: 4px solid #FFFFFF; box-shadow: 0 0 0 4px #0B0A12, 0 0 0 7px #2B2740; }

/* ── Wer wird Millionaer: Levelleiste oben, Antworten mit Auswahlpfeil ── */
:root[data-theme="B"] .wwm-wrap { flex-direction: column; gap: 14px; }
:root[data-theme="B"] .wwm-ladder { order: -1; width: 100%; flex-direction: row; gap: 3px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
:root[data-theme="B"] .wwm-rung {
  flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 0;
  border-radius: 0; background: none; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: 0;
  color: #6F6A8F; white-space: nowrap;
}
:root[data-theme="B"] .wwm-rung::before { content: ''; align-self: stretch; height: 14px; background: #14121F; box-shadow: inset 0 0 0 2px #2B2740; }
:root[data-theme="B"] .wwm-rung .wwm-lvl { display: none; }
:root[data-theme="B"] .wwm-rung.won { color: #9C96B8; }
:root[data-theme="B"] .wwm-rung.won::before { background: #45F0FF; box-shadow: none; }
:root[data-theme="B"] .wwm-rung.safe .wwm-amt { color: #FFE14D; }
:root[data-theme="B"] .wwm-rung.safe::before { box-shadow: inset 0 0 0 2px #FFE14D; }
:root[data-theme="B"] .wwm-rung.current { background: none; color: #FFFFFF; }
:root[data-theme="B"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #FFFFFF; }
:root[data-theme="B"] .wwm-rung.current::before { background: #0B0A12; box-shadow: inset 0 0 0 3px #FFFFFF; animation: thBCursor 1s steps(1, end) infinite; }
:root[data-theme="B"] .wwm-q { font-family: var(--b-px); font-size: 1.1rem; line-height: 1.75; font-weight: 400; text-align: left; justify-content: flex-start; text-transform: uppercase; }
:root[data-theme="B"] .wwm-answers { gap: 10px; }
:root[data-theme="B"] .wwm-opt { font-size: .95rem; line-height: 1.5; font-weight: 400; text-transform: uppercase; box-shadow: inset 0 0 0 3px #2B2740; padding: 16px 18px; }
:root[data-theme="B"] .wwm-opt .wwm-letter { font-family: var(--b-px); font-size: .95rem; color: #45F0FF; }
:root[data-theme="B"] .wwm-opt:hover { filter: none; box-shadow: inset 0 0 0 3px #45F0FF; }
:root[data-theme="B"] .wwm-opt.selected { box-shadow: none; }
:root[data-theme="B"] .wwm-opt.selected .wwm-letter::before { content: '▶ '; animation: thBCursor 1s steps(1, end) infinite; }
:root[data-theme="B"] .wwm-opt.correct { box-shadow: none; animation: thBBlink .45s steps(1, end); }
:root[data-theme="B"] .wwm-opt.wrong { background: #3A0E12; box-shadow: inset 0 0 0 3px #E8453C; color: #FFB3AD; }
/* Joker als Inventar: ITEMS-Kasten mit drei Woertern, verbrauchte grau gestrichen. */
:root[data-theme="B"] .wwm-lifelines { gap: 14px; justify-content: flex-end; padding: 8px 14px; box-shadow: inset 0 0 0 2px #2B2740; align-self: flex-end; }
:root[data-theme="B"] .wwm-lifelines::before { content: 'Items'; font-family: var(--b-px); font-size: .5rem; color: #45F0FF; text-transform: uppercase; align-self: center; margin-right: 4px; }
:root[data-theme="B"] .wwm-ll { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="B"] .wwm-ll::before { font-family: var(--b-px); font-size: .6rem; color: #EEEAFE; text-transform: uppercase; }
:root[data-theme="B"] .wwm-ll:nth-child(1)::before { content: '50:50'; }
:root[data-theme="B"] .wwm-ll:nth-child(2)::before { content: 'Telefon'; }
:root[data-theme="B"] .wwm-ll:nth-child(3)::before { content: 'Publikum'; }
:root[data-theme="B"] .wwm-ll.used { opacity: 1; }
:root[data-theme="B"] .wwm-ll.used::before { color: #4A4566; text-decoration: line-through; }
:root[data-theme="B"] :is(.wwm-abar, .wwds-abar) { background: repeating-linear-gradient(0deg, #45F0FF 0 8px, #0B0A12 8px 10px); border-radius: 0; }
:root[data-theme="B"] :is(.wwm-apct, .wa-pct, .wwm-alet, .wa-let) { font-family: var(--b-px); font-size: .6rem; }
:root[data-theme="B"] :is(.wwm-apct, .wa-pct) { color: #FFE14D; top: -18px; }

/* ── Wer weiss denn sowas ─────────────────────────────────────────────── */
:root[data-theme="B"] .wwds-cat { border-radius: 0; }
:root[data-theme="B"] .wwds-cat:hover:not(.done) { transform: none; filter: none; box-shadow: inset 0 0 0 2px #FFE14D; }
:root[data-theme="B"] .wwds-cat .wc-num { font-family: var(--b-px); font-size: .6rem; color: #45F0FF; }
:root[data-theme="B"] .wwds-cat .wc-name { font-family: var(--b-px); font-size: .55rem; line-height: 1.6; letter-spacing: 0; }
:root[data-theme="B"] .wwds-cat.done { opacity: .3; }
:root[data-theme="B"] .wwds-q { background: #14121F; border: 0; border-radius: 0; box-shadow: inset 0 0 0 3px #EEEAFE; font-family: var(--b-px); font-size: .8rem; line-height: 1.75; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .wwds-cat-chip { border-radius: 0; background: #45F0FF; color: #0B0A12; border: 0; font-family: var(--b-px); font-size: .5rem; letter-spacing: 1px; }
:root[data-theme="B"] .wwds-opt { font-size: .78rem; font-weight: 400; text-transform: uppercase; box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] .wwds-opt .wo-let { font-family: var(--b-px); font-size: .9rem; color: #45F0FF; }
:root[data-theme="B"] .wwds-opt.bad { background: #3A0E12; box-shadow: inset 0 0 0 3px #E8453C; color: #FFB3AD; }
:root[data-theme="B"] .wwds-tag { border-radius: 0; }
:root[data-theme="B"] .wwds-guess { border-radius: 0; background: #0B0A12; border: 2px solid #2B2740; font-family: var(--b-px); font-size: 1rem; }
:root[data-theme="B"] .wwds-timer { font-family: var(--b-px); font-size: 2rem; }

/* ── Der Duemmste fliegt: Spielerkacheln mit Buchstabe ────────────────── */
:root[data-theme="B"] .ddf-player { border: 0; border-radius: 0; background: #14121F; box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] .ddf-player-name { font-family: var(--b-px); font-size: .7rem; text-transform: uppercase; line-height: 1.6; }
:root[data-theme="B"] .ddf-player.picked { border: 0; box-shadow: inset 0 0 0 3px #E8453C; animation: thBBlink .45s steps(1, end); }
:root[data-theme="B"] .ddf-player.out { transform: none; }
:root[data-theme="B"] .ddf-heart { font-size: 1rem; }
:root[data-theme="B"] .ddf-heart.full { color: #E8453C; text-shadow: 2px 2px 0 #5A1210; }
:root[data-theme="B"] .ddf-heart.empty { color: #2B2740; text-shadow: none; }
:root[data-theme="B"] .ddf-question { font-family: var(--b-px); font-size: clamp(1rem, 2.4vw, 1.8rem); line-height: 1.6; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .ddf-answer { font-family: var(--b-px); font-size: clamp(.9rem, 1.8vw, 1.3rem); color: #3CFF7A; }

/* ── Der Preis ist heiss: Spielerzeilen P1..P8, Preis im Zaehlwerk ──────── */
:root[data-theme="B"] .pih-scores { border-bottom: 2px solid #2B2740; }
:root[data-theme="B"] .pih-score { border-radius: 0; background: #0B0A12; border: 0; box-shadow: inset 0 0 0 2px #2B2740; }
:root[data-theme="B"] .pih-score.lead { background: #0B0A12; box-shadow: inset 0 0 0 2px #FFE14D; }
:root[data-theme="B"] .pih-score.picked { box-shadow: inset 0 0 0 2px #45F0FF; transform: none; }
:root[data-theme="B"] .pih-rank { font-family: var(--b-px); font-size: .5rem; color: #45F0FF; }
:root[data-theme="B"] .pih-score-name { font-family: var(--b-px); font-size: .55rem; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .pih-score-pts { font-family: var(--b-px); font-size: .75rem; font-weight: 400; color: #FFE14D; }
:root[data-theme="B"] .pih-team { border-radius: 0; background: #14121F; box-shadow: inset 0 0 0 3px var(--team); }
:root[data-theme="B"] .pih-team.lead { box-shadow: inset 0 0 0 3px var(--team), inset 0 0 0 5px #0B0A12, inset 0 0 0 7px #FFE14D; }
:root[data-theme="B"] .pih-team-pts { font-family: var(--b-px); font-size: 1rem; }
:root[data-theme="B"] .pih-item { font-family: var(--b-px); font-size: 1.2rem; line-height: 1.6; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .pih-stage :is(img, video) { border-radius: 0; border: 4px solid #FFFFFF; box-shadow: 0 0 0 4px #0B0A12, 0 0 0 7px #2B2740; }
:root[data-theme="B"] .pih-price {
  display: table; margin: 4px auto 2px; padding: 10px 18px; font-family: var(--b-px); font-weight: 400; font-size: 1.9rem;
  color: #FFE14D; text-shadow: 4px 4px 0 #8A7400; background: #0B0A12; box-shadow: inset 0 0 0 3px #FFE14D;
}
:root[data-theme="B"] .pih-bid-row { border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px #2B2740; font-size: .7rem; text-transform: uppercase; }
:root[data-theme="B"] .pih-bid-row.win { box-shadow: none; }
:root[data-theme="B"] .pih-bid-diff { font-family: 'Space Grotesk', sans-serif; text-transform: none; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="B"] .tp-top { counter-reset: bspieler; }
:root[data-theme="B"] .tp-team { border: 0; border-radius: 0; background: #14121F; box-shadow: inset 0 0 0 3px #2B2740; counter-increment: bspieler; }
:root[data-theme="B"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 0 0 3px var(--tc); }
:root[data-theme="B"] .tp-team.turn { transform: none; background: #14121F; box-shadow: inset 0 0 0 3px var(--tc, #FFE14D), inset 0 0 0 6px #0B0A12, inset 0 0 0 8px #FFE14D; }
:root[data-theme="B"] .tp-team-name { font-family: var(--b-px); font-size: .62rem; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .tp-team-sub { font-family: 'Space Grotesk', sans-serif; }
:root[data-theme="B"] .tp-stage { border: 0; }
:root[data-theme="B"] .tp-catchip { border-radius: 0; font-family: var(--b-px); font-size: .5rem; font-weight: 400; }
:root[data-theme="B"] .tp-question { font-size: .95rem; line-height: 1.7; font-weight: 400; text-transform: uppercase; }
:root[data-theme="B"] .tp-answer { border: 0; border-radius: 0; font-size: .82rem; font-weight: 400; line-height: 1.6; text-transform: uppercase; }
:root[data-theme="B"] .tp-answer.hidden { border: 2px dashed #2B2740; font-family: var(--b-px); font-size: .5rem; }
:root[data-theme="B"] .tp-wheel-rotor { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 8px #0B0A12, 0 0 0 11px #2B2740; }
:root[data-theme="B"] .tp-wheel-hub { border-radius: 0; background: #0B0A12; border: 3px solid #FFE14D; box-shadow: none; font-family: var(--b-px); font-size: 1.2rem; }
:root[data-theme="B"] .tp-wheel-pointer { border-top-color: #FFE14D; filter: drop-shadow(3px 3px 0 #8A7400); }
:root[data-theme="B"] .tp-pie { filter: none; }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="B"] .winner-text { font-size: 1.9rem; line-height: 1.5; }
:root[data-theme="B"] .result-card { backdrop-filter: none; }
:root[data-theme="B"] .result-scores strong { font-family: var(--b-px); font-size: 1rem; color: #FFE14D; }
:root[data-theme="B"] .tour-bar { height: 12px; border-radius: 0; background: #14121F; box-shadow: inset 0 0 0 2px #2B2740; }
:root[data-theme="B"] .tour-bar-fill { border-radius: 0; background: repeating-linear-gradient(90deg, #FFE14D 0 10px, #0B0A12 10px 12px); }
:root[data-theme="B"] .tour-total { font-family: var(--b-px); font-size: .9rem; }
:root[data-theme="B"] .q-list-item { border-radius: 0; box-shadow: inset 0 0 0 2px #2B2740; border: 0; }
:root[data-theme="B"] .q-list-item.tour-lead { background: #14121F; box-shadow: inset 0 0 0 2px #FFE14D; }

/* ── Host: Menue, Knoepfe, Kaesten, Felder ────────────────────────────── */
:root[data-theme="B"] .menu-card { border-radius: 0; border: 0; background: #14121F; box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] .menu-card::before { content: '▶'; left: 10px; right: auto; top: 10px; height: auto; background: none; color: #FFE14D; font-size: .8rem; }
:root[data-theme="B"] .menu-card:hover { transform: none; border: 0; background: #1C1930; box-shadow: inset 0 0 0 3px #FFE14D; }
:root[data-theme="B"] .menu-card:hover::before { animation: thBCursor 1s steps(1, end) infinite; }
:root[data-theme="B"] .menu-card:hover .menu-card-icon svg { transform: none; }
:root[data-theme="B"] .menu-card-title { font-family: var(--b-px); font-weight: 400; font-size: .62rem; line-height: 1.7; text-transform: uppercase; }
:root[data-theme="B"] .menu-pill { border-radius: 0; border: 2px solid #2B2740; font-family: var(--b-px); font-weight: 400; font-size: .5rem; text-transform: uppercase; }
:root[data-theme="B"] :is(.menu-pill:hover, .menu-pill.active) { border-color: #45F0FF; color: #45F0FF; background: none; }
:root[data-theme="B"] .menu-divider { height: 4px; background: repeating-linear-gradient(90deg, #FFE14D 0 8px, transparent 8px 14px); }
:root[data-theme="B"] .btn { border-radius: 0; font-family: var(--b-px); font-weight: 400; font-size: .62rem; letter-spacing: 0; line-height: 1.6; }
:root[data-theme="B"] .btn:hover { transform: none; }
:root[data-theme="B"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
:root[data-theme="B"] .btn-primary { background: #FFE14D; color: #0B0A12; box-shadow: 4px 4px 0 #8A7400; }
:root[data-theme="B"] .btn-primary:hover { box-shadow: 4px 4px 0 #8A7400; background: #FFEB80; }
:root[data-theme="B"] .btn-primary::after { display: none; }
:root[data-theme="B"] .btn-secondary { background: #0B0A12; border: 2px solid #EEEAFE; color: #EEEAFE; backdrop-filter: none; }
:root[data-theme="B"] .btn-secondary:hover { border-color: #45F0FF; color: #45F0FF; background: #0B0A12; }
:root[data-theme="B"] .btn-danger { background: #E8453C; color: #0B0A12; box-shadow: 4px 4px 0 #5A1210; }
:root[data-theme="B"] .btn-accent { background: #45F0FF; color: #0B0A12; box-shadow: 4px 4px 0 #0E6B75; }
:root[data-theme="B"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 0; background: #14121F; border: 0; box-shadow: inset 0 0 0 3px #2B2740; }
:root[data-theme="B"] :is(.pr-team-btn, .setup-lobby .badge, .player-team-tag, .pmini-av) { border-radius: 0; }
:root[data-theme="B"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select) { border-radius: 0 !important; }
:root[data-theme="B"] .pih-price:empty { display: none; }
/* Show-Logos: Press Start fuellt das ganze Geviert, die Zeilen im SVG sind
   fuer Bebas gerechnet (Versalhoehe ~0,7) - "KELLER" lag sonst im Symbol,
   zwei gleich grosse Zeilen ineinander. Jede Zeile wird um ihre eigene
   Grundlinie verkleinert, so passt es fuer alle Show-Logos auf einmal. */
:root[data-theme="B"] #main-logo .logo-word { transform: scale(.7); transform-box: fill-box; transform-origin: 50% 100%; }
:root[data-theme="B"] .page-title { font-family: var(--b-px); font-size: 1.1rem; line-height: 1.6; }

/* Feste Zeilenhoehe in allen Richtungen: Bowlby, Bodoni, Permanent Marker
   haben eine viel groessere natuerliche Zeilenhoehe als Bebas (1,31) - die
   15 Stufen wurden dadurch bis zu 80 px hoeher. Studio-Blau bleibt bei normal.
   (Gilt fuer ALLE Richtungen, steht nur historisch in diesem Block.) */
:root[data-theme] .wwm-rung { line-height: 1.3; }

/* Arcade-Treffer: das Feld blinkt hart auf, wie eine Punkteanzeige. */
@keyframes thBBlink {
  0%   { opacity: 0; }
  18%  { opacity: 1; filter: invert(1); }
  36%  { opacity: 0; }
  54%  { opacity: 1; filter: none; }
  72%  { opacity: .2; }
  100% { opacity: 1; }
}
/* Auswahlpfeil und "am Zug" blinken wie ein Cursor. */
@keyframes thBCursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="B"] :is(.team-panel.active-team::after, .q-text.hidden-q::after, .wwm-rung.current::before, .wwm-opt.selected .wwm-letter::before, .menu-card:hover::before) { animation: none; }
  :root[data-theme="B"] :is(.strike-pip.lit, .wwm-opt.correct, .ddf-player.picked) { animation: none; }
}

/* ══ B · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war B eine Arcade-Farbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, zwei Teamkaesten darunter, das
   Spielfeld als schmaler Kasten in der Bildmitte, der Rest schwarz.
   Der Entwurf ist aber ein Automat: oben eine HUD-Zeile ueber die ganze
   Breite (1P links, 2P rechts, Punktestand in Pixelziffern), darunter eine
   duenne Statuszeile, und darunter fuellt das Spielfeld den Rest des
   Bildschirms bis zum Gitterboden.
   Grundsatz: alles klebt an den Kanten, nichts schwebt mittig. Die Zahl im
   HUD ist gelb, der Status cyan, das Spielfeld traegt den weissen
   Doppelrahmen - genau ein Rahmen im Bild, nicht drei.
   Der Rahmen bleibt, weil er die Identitaet ist (Entwurf designs/s/B-*.html);
   er umschliesst jetzt das ganze Spielfeld statt eines kleinen Kastens. */
:root[data-theme="B"] { --b-breit: min(1200px, 95vw); }

/* Der Screen fuellt den Rest des Fensters, damit das Spielfeld bis an den
   Gitterboden reicht statt in der Bildmitte zu enden. `flex: 1 0 auto`
   statt `1 1 auto`: wachsen ja, schrumpfen nie - sonst wuerde ein langer
   Screen gestaucht und liefe unten aus dem Beamerbild. */
:root[data-theme="B"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto;
}

/* Marquee: das Logo schrumpft auf Schildgroesse und sitzt dicht ueber dem
   HUD - im Automaten haengt es ueber dem Bild, nicht darin. */
:root[data-theme="B"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  margin: 14px 0 6px; }
:root[data-theme="B"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 150px; max-height: 52px; }

/* ── HUD: Spieleranzeigen ohne Kasten, aussen an den Kanten ── */
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores) {
  width: 100%; max-width: none; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin: 0; padding: 0 2px 10px; border-bottom: 2px solid var(--b-line);
}
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):is(.red, .blue, .green) {
  flex: 0 1 auto; min-width: 190px; background: none; box-shadow: none; padding: 15px 0 0; text-align: left;
}
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team)::before {
  left: 0; top: 0;
}
/* Die letzte Anzeige spiegelt sich an den rechten Rand - 1P links, 2P
   rechts, wie an der Scheibe des Automaten. */
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):last-child {
  text-align: right;
}
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):last-child::before {
  left: auto; right: 0;
}
:root[data-theme="B"] :is(#game-screen, #wwds-screen) :is(.team-panel, .wwds-team).active-team,
:root[data-theme="B"] :is(#game-screen, #wwds-screen) .wwds-team.on {
  box-shadow: inset 0 -3px 0 #FFE14D; padding-bottom: 6px;
}
:root[data-theme="B"] #game-screen .team-panel.active-team::after { top: 0; left: 30px; }
:root[data-theme="B"] #game-screen .team-panel:last-child.active-team::after { left: auto; right: 30px; }
:root[data-theme="B"] #game-screen .team-panel .t-score { font-size: clamp(2rem, 5.4vh, 2.8rem); margin-top: 4px; }
:root[data-theme="B"] #game-screen .team-panel .team-strikes { margin-top: 6px; }
:root[data-theme="B"] #game-screen .team-panel:not(:last-child) .team-strikes { justify-content: flex-start; }

/* Statuszeile unter dem HUD: duenn, cyan, mittig - wie "ROUND 1" im Spiel. */
:root[data-theme="B"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #wwm-screen, #tp-screen) .round-bar {
  justify-content: center; width: 100%; padding: 9px 0 10px; margin: 0;
}

/* ── Feud: HUD oben, Spielfeld fuellt den Rest ── */
:root[data-theme="B"] #game-screen.active {
  display: grid; width: 100%; max-width: var(--b-breit); padding-top: 0;
  grid-template-areas: "hud" "status" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="B"] #game-screen .scoreboard { grid-area: hud; }
:root[data-theme="B"] #game-screen .round-bar { grid-area: status; }
:root[data-theme="B"] #game-screen .board {
  grid-area: board; align-self: stretch; display: flex; flex-direction: column; padding: 16px;
}
:root[data-theme="B"] #game-screen .q-text { font-size: clamp(.72rem, 1.9vh, .92rem); line-height: 1.7; margin-bottom: 14px; }
:root[data-theme="B"] #game-screen .answers { flex: 1; align-content: stretch; gap: 6px; }
:root[data-theme="B"] #game-screen .tile { min-height: clamp(44px, 9.5vh, 76px); }
:root[data-theme="B"] #game-screen .tile.open .tile-answer { font-size: clamp(.72rem, 1.9vh, .95rem); }
:root[data-theme="B"] #game-screen .tile.open .tile-pts { font-size: clamp(.8rem, 2.1vh, 1.05rem); }
:root[data-theme="B"] #game-screen .tile-num::before { font-size: clamp(.64rem, 1.7vh, .82rem); }

/* ── Jeopardy: HUD oben, das Brett fuellt den Rest ── */
:root[data-theme="B"] #jeopardy-screen.active {
  display: grid; width: 100%; max-width: var(--b-breit); padding-top: 0;
  grid-template-areas: "hud" "status" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="B"] #jeopardy-screen .jeopardy-scores { grid-area: hud; }
:root[data-theme="B"] #jeopardy-screen .round-bar { grid-area: status; }
:root[data-theme="B"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; }
:root[data-theme="B"] #jeopardy-screen .jeopardy-team .jt-score { font-size: clamp(1.3rem, 3.6vh, 1.8rem); }
:root[data-theme="B"] #jeopardy-screen .jeopardy-cell { font-size: clamp(1rem, 3vh, 1.45rem); }

/* Jeopardy-Frage: der Automat zeigt sie formatfuellend, nicht als Karte in
   der Mitte - Kategorie als HUD-Zeile oben, Betrag gross rechts daneben. */
:root[data-theme="B"] .jeopardy-clue-overlay {
  display: grid; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  grid-template-rows: auto 1fr auto;
  padding: 7vh clamp(34px, 5vw, 70px); column-gap: 28px; row-gap: 0;
  /* Die Scheibe des Automaten: der weisse Doppelrahmen sitzt nicht um eine
     Karte in der Mitte, sondern am Bildrand - die Frage IST das Bild. */
  box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 8px #0B0A12, inset 0 0 0 11px #2B2740;
}
:root[data-theme="B"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="B"] .jeopardy-clue-cat { grid-area: cat; align-self: end; text-align: left; }
:root[data-theme="B"] .jeopardy-clue-pts { grid-area: pts; justify-self: end; align-self: end; font-size: clamp(1.2rem, 4.5vh, 1.9rem); }
:root[data-theme="B"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { padding-bottom: 14px; border-bottom: 2px solid #45F0FF; }
:root[data-theme="B"] .jeopardy-clue-text {
  grid-area: frage; align-self: center; max-width: none; text-align: center;
  font-size: clamp(.95rem, 1.6vw + .5vh, 1.5rem); line-height: 1.75;
}
:root[data-theme="B"] .jeopardy-clue-blank { grid-area: frage; align-self: center; justify-self: center; }
:root[data-theme="B"] .jeopardy-answer-text { grid-area: antwort; justify-self: center; text-align: center; }

/* ── WWM: Leiter als HUD-Balken, Frage und Karten fuellen den Rest ── */
:root[data-theme="B"] #wwm-screen.active { width: 100%; max-width: var(--b-breit); padding-top: 0; }
:root[data-theme="B"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="B"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="B"] #wwm-screen .wwm-q { font-size: clamp(.85rem, 2.4vh, 1.15rem); line-height: 1.75; padding: 6px 0; }
:root[data-theme="B"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="B"] #wwm-screen .wwm-opt { min-height: clamp(62px, 12vh, 92px); font-size: clamp(.78rem, 2.1vh, 1rem); }

/* ── WWDS: HUD oben, Buehne fuellt den Rest ── */
:root[data-theme="B"] #wwds-screen.active {
  display: grid; width: 100%; max-width: var(--b-breit); padding-top: 0;
  grid-template-areas: "hud" "status" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="B"] #wwds-screen .wwds-top { grid-area: hud; }
:root[data-theme="B"] #wwds-screen .round-bar { grid-area: status; }
:root[data-theme="B"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; padding: 16px; }
:root[data-theme="B"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="B"] #wwds-screen .wwds-team .wt-money { font-size: clamp(1.1rem, 3.2vh, 1.5rem); }
:root[data-theme="B"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="B"] #wwds-screen .wwds-cat { min-height: clamp(52px, 10vh, 86px); }
:root[data-theme="B"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="B"] #wwds-screen .wwds-opt { min-height: clamp(48px, 9vh, 78px); }

/* ── DDF: Kandidaten als Spielerleiste oben, Frage fuellt den Rest ──
   Der innere Wrapper traegt Inline-Styles (index.html) - daher !important. */
:root[data-theme="B"] #ddf-screen.active { width: 100%; max-width: var(--b-breit); padding-top: 0; }
/* Der Wrapper traegt inline `height:100%`. Das ist hier zirkulaer - der
   Screen waechst mit dem Inhalt (flex: 1 0 auto), also waechst der Wrapper
   mit sich selbst. Stattdessen `height:auto` plus `flex:1`: er fuellt den
   Screen, ohne ihn aufzublaehen. */
/* `width: 100%`: `.screen.active` ist eine Flex-Spalte mit
   `align-items: center`, der Wrapper waere sonst nur so breit wie sein
   Inhalt. In O war die Prozesstabelle dadurch 766 px breit in einem
   1216 px breiten Fenster (gemessen 2026-10-16). */
:root[data-theme="B"] #ddf-screen > div { height: auto !important; width: 100%; flex: 1; }
:root[data-theme="B"] #ddf-screen .ddf-players {
  max-width: none; margin: 0; padding: 0 0 10px; border: 0; border-bottom: 2px solid var(--b-line); gap: 0;
}
:root[data-theme="B"] #ddf-screen .ddf-player { padding: 10px 14px; }
:root[data-theme="B"] #ddf-screen .ddf-alive { margin: 10px 0 0; font-family: var(--b-px); font-size: .58rem; letter-spacing: 1px; color: #45F0FF; }
:root[data-theme="B"] #ddf-timer { font-family: var(--b-px); font-size: 1.1rem !important; color: #FFE14D; margin-top: 8px; }
:root[data-theme="B"] #ddf-screen .ddf-question { flex: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(.95rem, 2.6vh, 1.3rem); line-height: 1.75; }
:root[data-theme="B"] #ddf-screen .ddf-vote-grid { padding-bottom: 6px; }

/* ── PIH: Stand als HUD oben, Artikel als Marquee, Preis als Punktzahl ── */
:root[data-theme="B"] #pih-screen.active { width: 100%; max-width: var(--b-breit); padding-top: 0; }
:root[data-theme="B"] #pih-screen > div { height: auto !important; width: 100%; flex: 1; }
:root[data-theme="B"] #pih-screen .pih-teamrow { max-width: none; margin: 0 0 8px; }
:root[data-theme="B"] #pih-screen .pih-scores { max-width: none; margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--b-line); gap: 6px; }
:root[data-theme="B"] #pih-screen .pih-score { padding: 5px 9px; gap: 7px; }
:root[data-theme="B"] #pih-screen .pih-score-name { font-size: .85rem; }
:root[data-theme="B"] #pih-screen .pih-score .pmini-av { width: 22px; height: 22px; font-size: .8rem; }
:root[data-theme="B"] #pih-timer { font-family: var(--b-px); font-size: .9rem !important; color: #45F0FF; margin-top: 8px; }
:root[data-theme="B"] #pih-screen .pih-item { font-family: var(--b-px); font-size: clamp(.85rem, 2.2vh, 1.15rem); line-height: 1.6; text-transform: uppercase; }
/* Das Produktfoto darf nur so hoch werden, wie unter Artikel und Preis noch
   Platz ist - ohne Deckel stand PIH 179 px unter dem Beamerbild. */
:root[data-theme="B"] #pih-screen .pih-stage { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
:root[data-theme="B"] #pih-screen .pih-stage :is(img, video) { max-height: min(30vh, 260px); width: auto; }
:root[data-theme="B"] #pih-screen .pih-price { font-family: var(--b-px); font-size: clamp(1.3rem, 4.6vh, 2.1rem); color: #FFE14D; text-shadow: 4px 4px 0 #8A7400; }
:root[data-theme="B"] #pih-screen .pih-bid-grid { max-width: none; }

/* ── TP: Teams als HUD, Rad und Frage fuellen das Feld ── */
:root[data-theme="B"] #tp-screen.active {
  display: grid; width: 100%; max-width: var(--b-breit); padding-top: 0;
  grid-template-areas: "hud" "status" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="B"] #tp-screen .tp-top {
  grid-area: hud; max-width: none; width: 100%; margin: 0; padding: 0 2px 10px;
  border-bottom: 2px solid var(--b-line); gap: 24px; justify-content: space-between; align-items: flex-start;
}
/* Die Teams sind hier Anzeigen, keine Karten: Torte klein links, Name und
   Stand daneben - dieselbe HUD-Zeile wie bei Feud und WWDS. */
:root[data-theme="B"] #tp-screen .tp-team:is(.red, .blue, .green) {
  flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; gap: 12px;
  background: none; box-shadow: none; padding: 4px 0 0; transform: none;
}
:root[data-theme="B"] #tp-screen .tp-team.turn { box-shadow: inset 0 -3px 0 #FFE14D; padding-bottom: 6px; }
:root[data-theme="B"] #tp-screen .tp-team .tp-pie { width: 44px; height: 44px; flex: none; margin: 0; }
:root[data-theme="B"] #tp-screen .tp-team-name { font-family: var(--b-px); font-size: .72rem; line-height: 1.4; text-transform: uppercase; }
:root[data-theme="B"] #tp-screen .tp-team-sub { font-size: .62rem; letter-spacing: 1px; }
:root[data-theme="B"] #tp-screen .tp-team:last-child { flex-direction: row-reverse; text-align: right; }
:root[data-theme="B"] #tp-screen .round-bar { grid-area: status; }
:root[data-theme="B"] #tp-screen .tp-board { grid-area: board; align-self: stretch; align-items: center; width: 100%; justify-content: center; }
:root[data-theme="B"] #tp-screen .tp-question { font-family: var(--b-px); font-size: clamp(.88rem, 2.4vh, 1.15rem); line-height: 1.75; text-transform: uppercase; }

/* ── Feud-Finale: Kopf als HUD, Frage und Liste fuellen das Feld ── */
:root[data-theme="B"] #finale-screen.active {
  display: grid; width: 100%; max-width: var(--b-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "stand stand" "kopf uhr" "vergleich vergleich" "board board";
  grid-template-rows: auto auto auto 1fr; column-gap: 28px; row-gap: 0;
}
:root[data-theme="B"] #finale-screen .finale-header { grid-area: kopf; align-self: center; display: flex; align-items: baseline; gap: 16px; text-align: left; }
:root[data-theme="B"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; font-size: clamp(1.6rem, 6vh, 2.6rem); }
/* Der Stand ist die HUD-Zeile: 1P links, 2P rechts, Strich darunter. */
:root[data-theme="B"] #finale-screen .finale-scores {
  grid-area: stand; width: 100%; max-width: none; margin: 0; padding: 0 2px 10px;
  justify-content: space-between; border-bottom: 2px solid var(--b-line);
}
:root[data-theme="B"] #finale-screen .finale-score-card { flex: 0 1 auto; background: none; box-shadow: none; padding: 4px 0 0; text-align: left; }
:root[data-theme="B"] #finale-screen .finale-score-card:last-child { text-align: right; }
:root[data-theme="B"] #finale-screen .finale-score-card.active { background: none; box-shadow: inset 0 -3px 0 #FFE14D; padding-bottom: 6px; }
/* "Wer hat was gesagt" wird von js/feud.js erzeugt und landet sonst per
   Auto-Platzierung oben rechts im Raster - daher eine eigene Flaeche. */
:root[data-theme="B"] #finale-reveal-comparison { grid-area: vergleich; justify-content: center; gap: 14px; margin: 14px 0 0; }
:root[data-theme="B"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; padding: 16px; margin-top: 14px; }
:root[data-theme="B"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="B"] #finale-screen .q-text { font-size: clamp(.78rem, 2.1vh, 1.05rem); line-height: 1.75; }
:root[data-theme="B"] #finale-screen .finale-big-q {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(.95rem, 1.6vw + .5vh, 1.5rem); line-height: 1.75;
}

/* ── Ergebnis: GAME OVER wie am Automaten ──
   Mittig bleibt richtig - der Automat zeigt den Endstand in der Bildmitte.
   Veredelt wird ueber den Rahmen und die Kicker-Zeile, nicht ueber Umbau. */
:root[data-theme="B"] #result-screen.active { width: 100%; max-width: min(820px, 92vw); }
:root[data-theme="B"] #result-screen .result-icon { display: none; }
:root[data-theme="B"] #result-screen .winner-text { font-size: clamp(1.1rem, 3.4vh, 1.7rem); line-height: 1.7; }
:root[data-theme="B"] #result-screen .winner-text::before {
  content: 'Game Over'; display: block; margin-bottom: 20px; font-family: var(--b-px); font-size: .7rem;
  letter-spacing: 2px; color: #45F0FF; text-shadow: none;
}
:root[data-theme="B"] #result-screen .result-card {
  width: 100%; background: #14121F; border: 0; border-radius: 0; box-shadow: inset 0 0 0 3px #2B2740; padding: 22px;
}
:root[data-theme="B"] #result-screen .result-scores { font-family: var(--b-px); font-size: .72rem; line-height: 2; color: #EEEAFE; }
:root[data-theme="B"] #result-screen .result-scores strong { color: #FFE14D; }

/* ── Menue: Spielauswahl wie am Automaten ──
   Statt eines 720-px-Blocks in der Mitte die volle Breite, Kicker
   "Select Game" und vier Spalten. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="B"] #menu-screen.active { width: 100%; max-width: var(--b-breit); }
:root[data-theme="B"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }
:root[data-theme="B"] #menu-screen .menu-cards::before {
  content: 'Select Game'; grid-column: 1 / -1; padding-bottom: 6px;
  font-family: var(--b-px); font-size: .62rem; letter-spacing: 2px; color: #45F0FF;
}
:root[data-theme="B"] #menu-screen .menu-pills { justify-content: center; }

/* ── C · Pop: Aufkleber - schwarze Kontur, harter Versatzschatten, schief ── */
:root[data-theme="C"] {
  --brd-surface: #FFFFFF;
  --brd-frame: 0 0 0 5px #121212, 10px 10px 0 5px #121212;
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 22px;
  --tile: #EDE7DA;
  --tile-hover: #F6F1E6;
  --tile-edge: none;
  --tile-fg: #121212;
  --tile-head: #FFA3D1;
  --tile-head-fg: #121212;
  --tile-used: transparent;
  --tile-num: #121212;
  --tile-num-glow: none;
  --tile-dim-fg: #121212;
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: #FFA3D1;
  --tile-open-edge: 0 0 0 3px #121212, 5px 5px 0 3px #121212;
  --tile-open-fg: #121212;
  --tile-open-dim: #121212;
  --tile-pts-bg: transparent;
  --tile-pts-rule: #121212;
  --tile-pick: #FFD23F;
  --tile-pick-fg: #121212;
  --tile-right: #7EE3A1;
  --tile-right-fg: #121212;
  --tile-radius: 12px;
  --tile-font: 'Archivo Black', sans-serif;
  --tile-reveal: thCKlatsch .5s cubic-bezier(.3,1.6,.5,1);
}
/* Verdeckte Felder: gestrichelte Luecke wie im Entwurf, keine Flaeche. */
:root[data-theme="C"] .tile:not(.open) .tile-inner { outline: 3px dashed #121212; outline-offset: -3px; opacity: .8; }
:root[data-theme="C"] .tile.open,
:root[data-theme="C"] .tile.open .tile-inner { overflow: visible; }
:root[data-theme="C"] .answers .tile:nth-child(4n+1).open .tile-inner { rotate: -.7deg; }
:root[data-theme="C"] .answers .tile:nth-child(4n+2).open .tile-inner { background: #8FC8FF; rotate: .6deg; }
:root[data-theme="C"] .answers .tile:nth-child(4n+3).open .tile-inner { background: #7EE3A1; rotate: -.5deg; }
:root[data-theme="C"] .answers .tile:nth-child(4n).open .tile-inner   { background: #FF8A65; rotate: .8deg; }
:root[data-theme="C"] .tile-num { flex: 0 0 34px; width: 34px; height: 34px; margin: auto 6px auto 8px; border-radius: 50%; border: 0; background: #121212; color: #fff; font-size: 1.05rem; }
:root[data-theme="C"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-weight: 400; }
:root[data-theme="C"] .tile.open .tile-pts { color: #121212; text-shadow: none; font-family: 'Archivo Black', sans-serif; }
:root[data-theme="C"] .answers { gap: 12px; }
:root[data-theme="C"] .answers.split { row-gap: 12px; column-gap: 18px; }
:root[data-theme="C"] .jeopardy-board { gap: 10px; padding: 14px; }
:root[data-theme="C"] .jeopardy-cat { border: 3px solid #121212; box-shadow: 4px 4px 0 #121212; font-family: 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .85rem; }
:root[data-theme="C"] .jeopardy-cat:nth-child(6n+2) { background: #8FC8FF; }
:root[data-theme="C"] .jeopardy-cat:nth-child(6n+3) { background: #7EE3A1; }
:root[data-theme="C"] .jeopardy-cat:nth-child(6n+4) { background: #C8B6FF; }
:root[data-theme="C"] .jeopardy-cat:nth-child(6n+5) { background: #FFD23F; }
:root[data-theme="C"] .jeopardy-cat:nth-child(6n)   { background: #FF8A65; }
:root[data-theme="C"] .jeopardy-cell { background: #fff; border: 4px solid #121212; box-shadow: 5px 5px 0 #121212; border-radius: 999px; font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; }
:root[data-theme="C"] .jeopardy-cell:hover:not(.used) { background: #FFD23F; box-shadow: 7px 7px 0 #121212; }
:root[data-theme="C"] .jeopardy-cell.used { background: transparent; border-style: dashed; box-shadow: none; opacity: .45; }
:root[data-theme="C"] .wwm-q { border: 4px solid #121212; }
:root[data-theme="C"] .wwm-opt { border: 3px solid #121212; box-shadow: 4px 4px 0 #121212; font-weight: 400; }
:root[data-theme="C"] .wwm-opt .wwm-letter { font-family: 'Archivo Black', sans-serif; }
@keyframes thCKlatsch {
  0%   { transform: scale(1.35) rotate(-7deg); opacity: 0; }
  60%  { transform: scale(.94) rotate(1.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── D · Late Night (Rework 2026-10-14): Sendestudio nach Mitternacht ──────
   Identitaet aus designs/s/D-*.html, jetzt auf ALLEN Flaechen statt nur auf
   den Brettern: fast schwarz mit Filmkorn, ein einziges warmes Orange,
   Haarlinien statt Platten, grosse schmale Versalien (Big Shoulders) gegen
   kleine gesperrte Zeilen (Instrument Sans). Keine Rundungen, kein Glanz,
   keine Verlaeufe als Flaechenfuellung - nur Linie, Schrift und Orange.
   Unten rechts steht die Stadt (Skyline mit ein paar Fenstern), oben links
   faellt das Studiolicht ein - beides aus dem Entwurf.
   Signatur: aufgedeckt wird wie eine Bauchbinde, von links gewischt.
   Teamfarben bleiben (BAUPLAN 4.4) - als Strich und Schrift, nicht als
   Flaeche. */
:root[data-theme="D"] {
  --brd-surface: transparent;
  --brd-frame: none;
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 0;
  --tile: transparent;
  --tile-hover: rgba(255,91,31,.06);
  --tile-edge: inset 0 -1px 0 #2A2A2A;
  --tile-head: transparent;
  --tile-head-fg: #F2F2F2;
  --tile-used: transparent;
  --tile-num: #F2F2F2;
  --tile-num-glow: none;
  --tile-dim-fg: #3A3A3A;
  --tile-bar: #262626;
  --tile-rule: transparent;
  --tile-open: transparent;
  --tile-open-edge: inset 0 -1px 0 #3A3A3A;
  --tile-open-fg: #F2F2F2;
  --tile-open-dim: #FF5B1F;
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: #FF5B1F;
  --tile-pick-fg: #0E0E0E;
  --tile-right: #F2F2F2;
  --tile-right-fg: #0E0E0E;
  --tile-radius: 0;
  --tile-font: 'Big Shoulders Display', sans-serif;
  --tile-reveal: thDWisch .55s cubic-bezier(.7,0,.2,1);
  --d-line: #2A2A2A;
  --d-line-hi: #3A3A3A;
  --d-dim: #8A8A8A;
}
/* Die Stadt: steht fest unten rechts hinter allem, wie im Entwurf. */
:root[data-theme="D"] body::before {
  content: ''; position: fixed; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  width: min(760px, 52vw); aspect-ratio: 900 / 300; opacity: .95;
  /* Zwei Reihen Haeuser (hinten heller = Tiefe), Absaetze, Wassertanks,
     Antennen mit Positionslicht, Fensterraster mit wenigen warmen Lichtern.
     Erzeugt einmal per Skript (deterministisch), liegt als Datei in
     assets/d/ - vorher zehn Rechtecke mit ein paar Punkten. */
  background: url("assets/d/skyline.svg") right bottom / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%);
}

/* ── Teamanzeigen: Tafeln mit Strich in der Teamfarbe ─────────────────── */
:root[data-theme="D"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: 232,69,60; }
:root[data-theme="D"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: 59,130,246; }
:root[data-theme="D"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: 34,197,94; }
:root[data-theme="D"] :is(.scoreboard, .jeopardy-scores) { gap: 12px; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-theme="D"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  background: #151515; border: 0; border-radius: 0;
  box-shadow: inset 0 4px 0 rgb(var(--tc)), inset 0 0 0 1px var(--d-line);
  text-align: left; padding: 14px 18px 12px;
}
:root[data-theme="D"] .team-card::before { display: none; }
:root[data-theme="D"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: 3px;
  color: #BDBDBD;
}
:root[data-theme="D"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; color: #F2F2F2; text-shadow: none; line-height: .95;
}
:root[data-theme="D"] .team-panel .t-score { font-size: 3.6rem; }
:root[data-theme="D"] .jeopardy-team .jt-score { font-size: 2.4rem; }
/* Am Zug: Punkte in Orange, darunter ein voller Strich - keine Leuchtkante. */
:root[data-theme="D"] .team-panel.active-team { padding: 14px 18px 12px; box-shadow: inset 0 4px 0 rgb(var(--tc)), inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] .team-panel.active-team::after { display: none; }
:root[data-theme="D"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #FF5B1F; text-shadow: none; }
:root[data-theme="D"] :is(.team-panel.active-team .t-name, .wwds-team.on .wt-name) { color: #FF5B1F; }
:root[data-theme="D"] .wwds-team.on { box-shadow: inset 0 4px 0 rgb(var(--tc)), inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }

/* X wie im Entwurf: eckige Kaesten, gezaehlt wird in Rot. */
:root[data-theme="D"] .team-strikes { justify-content: flex-start; background: none; border: 0; border-radius: 0; padding: 0; margin-top: 10px; box-shadow: none; transform: none; }
:root[data-theme="D"] .strike-pip {
  width: 30px; height: 30px; border-radius: 0; background: transparent; border: 1px solid var(--d-line-hi);
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.05rem; color: #333;
}
/* Das X ist gezeichnet (zwei Diagonalen), nicht das Schriftzeichen - als
   Glyphe sass es je nach Schrift schief und duenn im Kasten. */
:root[data-theme="D"] .strike-pip { font-size: 0; background:
  linear-gradient(45deg, transparent calc(50% - 1px), #333 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 50% / 60% 60% no-repeat,
  linear-gradient(-45deg, transparent calc(50% - 1px), #333 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 50% / 60% 60% no-repeat; }
:root[data-theme="D"] .strike-pip.lit { border-color: #E8453C; box-shadow: none; background:
  linear-gradient(45deg, transparent calc(50% - 2px), #FF6B5E calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) 50% / 64% 64% no-repeat,
  linear-gradient(-45deg, transparent calc(50% - 2px), #FF6B5E calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) 50% / 64% 64% no-repeat,
  rgba(232,69,60,.16); }

/* Kopfzeile: "ON AIR" wie im Entwurf, dahinter Runde und Topf. */
:root[data-theme="D"] .round-bar { font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px; color: var(--d-dim); font-size: .72rem; }
:root[data-theme="D"] .round-bar::before {
  content: 'On Air'; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px solid #FF5B1F; color: #FF5B1F; font-weight: 600; letter-spacing: 3px;
  background: radial-gradient(circle, #FF5B1F 3.5px, transparent 4px) 9px 50% / 8px 8px no-repeat; padding-left: 22px;
}
:root[data-theme="D"] .round-bar .pts { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 0; color: #FF5B1F; }

/* ── Feud ─────────────────────────────────────────────────────────────── */
:root[data-theme="D"] .board { padding: 4px 0 8px; }
:root[data-theme="D"] .q-text {
  flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 4px;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.02;
  text-transform: uppercase; color: #F2F2F2; padding: 6px 0 12px; border-radius: 0;
}
:root[data-theme="D"] .q-text::before {
  content: 'Heute in der Show · Die Frage'; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: .7rem; letter-spacing: 3px; color: #FF5B1F; line-height: 1.4;
}
:root[data-theme="D"] .q-text.hidden-q { background: none; border: 0; border-bottom: 1px dashed var(--d-line-hi); }
:root[data-theme="D"] .q-text.hidden-q::after { color: var(--d-dim); font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px; }
:root[data-theme="D"] .tile { min-height: clamp(38px, 7vh - 8px, 56px); }
:root[data-theme="D"] .tile:hover:not(.open) { transform: none; }
/* Verdeckte Plaetze: Ziffer nur als Kontur, eine Haarlinie, ein Fragezeichen. */
:root[data-theme="D"] .tile-num { width: 56px; justify-content: flex-start; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2.4rem; }
:root[data-theme="D"] .tile:not(.open) .tile-num { color: transparent; -webkit-text-stroke: 1px #4A4A4A; }
:root[data-theme="D"] .tile:not(.open) .tile-center { justify-content: flex-start; padding-left: 24px; gap: 18px; }
:root[data-theme="D"] .tile:not(.open) .tile-center::after { width: auto; flex: 1; height: 1px; border-radius: 0; }
:root[data-theme="D"] .tile:not(.open) .tile-inner::after { content: '?'; align-self: center; padding: 0 4px 0 22px; font-family: 'Instrument Sans', sans-serif; font-size: .8rem; color: #555; }
:root[data-theme="D"] .tile.open .tile-num { color: transparent; -webkit-text-stroke: 1.2px #FF5B1F; }
:root[data-theme="D"] .tile.open .tile-center { padding: 0 0 0 24px; }
:root[data-theme="D"] .tile.open .tile-answer { font-weight: 800; font-size: 1.7rem; letter-spacing: .5px; }
:root[data-theme="D"] .tile.open .tile-pts { color: #F2F2F2; text-shadow: none; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.7rem; padding: 0 2px 0 18px; box-shadow: none; justify-content: flex-end; }
/* Die Nummer 1 ist das Ereignis: voll in Orange. */
:root[data-theme="D"] .answers .tile:first-child.open :is(.tile-answer, .tile-pts) { color: #FF5B1F; }
:root[data-theme="D"] .answers .tile:first-child.open .tile-num { color: #FF5B1F; -webkit-text-stroke: 0; }
:root[data-theme="D"] .tile.missed .tile-inner { background: rgba(232,69,60,.08) !important; box-shadow: inset 0 -1px 0 #5A1C18 !important; }
:root[data-theme="D"] .tile.missed .tile-answer { color: #9A9A9A; }

/* Finale */
:root[data-theme="D"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner) { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #F2F2F2; text-shadow: none; }
:root[data-theme="D"] :is(.finale-team-label, .finale-q-info) { font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px; color: #FF5B1F; }
:root[data-theme="D"] :is(.finale-score-card, .finale-reveal-team) { background: #151515; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--d-line); text-align: left; }
:root[data-theme="D"] .finale-score-card.active { background: #151515; box-shadow: inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] :is(.finale-score-pts, .finale-reveal-pts) { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; color: #F2F2F2; }
:root[data-theme="D"] :is(.finale-score-name, .finale-reveal-name) { font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px; color: var(--d-dim); }
:root[data-theme="D"] .finale-timer { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; }
:root[data-theme="D"] .finale-big-q { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1; text-shadow: none; }
:root[data-theme="D"] .elim-team { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-shadow: none; }

/* ── Jeopardy: Tabelle aus Haarlinien, verbrauchte Felder als Strich ──── */
:root[data-theme="D"] .jeopardy-board { gap: 0; padding: 0; border-radius: 0; box-shadow: none; }
:root[data-theme="D"] .jeopardy-cat { border-bottom: 1px solid var(--d-line-hi); font-family: 'Big Shoulders Display', sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: .5px; border-radius: 0; }
:root[data-theme="D"] .jeopardy-cell { border-bottom: 1px solid var(--d-line); font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: 0; border-radius: 0; }
:root[data-theme="D"] .jeopardy-cell:hover:not(.used) { transform: none; color: #FF5B1F; background: transparent; box-shadow: inset 0 -1px 0 #FF5B1F; }
:root[data-theme="D"] .jeopardy-cell.used::after { content: ''; width: 26px; height: 3px; background: #2C2C2C; }
:root[data-theme="D"] .jeopardy-clue-cat { font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 4px; color: #FF5B1F; }
:root[data-theme="D"] .jeopardy-clue-pts { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; letter-spacing: 0; color: #F2F2F2; }
:root[data-theme="D"] .jeopardy-clue-text { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1.02; }
:root[data-theme="D"] .jeopardy-clue-img { border-radius: 0; border: 1px solid var(--d-line-hi); box-shadow: none; }

/* ── Wer wird Millionaer: Leiste oben, Antworten als Karten ───────────── */
:root[data-theme="D"] .wwm-wrap { flex-direction: column; gap: 14px; }
:root[data-theme="D"] .wwm-ladder {
  order: -1; width: 100%; flex-direction: row; gap: 4px; padding: 0; background: none; border-radius: 0; box-shadow: none;
}
:root[data-theme="D"] .wwm-rung {
  flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;
  padding: 8px 0 0; border-radius: 0; background: none; border-top: 4px solid #2A2A2A;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: .74rem; letter-spacing: 0; line-height: 1.1;
  color: #4A4A4A; white-space: nowrap;
}
:root[data-theme="D"] .wwm-rung .wwm-lvl { display: none; }
:root[data-theme="D"] .wwm-rung.won { border-top-color: #8A8A8A; color: #8A8A8A; }
:root[data-theme="D"] .wwm-rung.safe .wwm-amt { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="D"] .wwm-rung.current { background: none; border-top: 8px solid #FF5B1F; margin-top: -4px; color: #FF5B1F; font-size: 1rem; }
:root[data-theme="D"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #FF5B1F; }
:root[data-theme="D"] .wwm-q { text-align: left; justify-content: flex-start; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1; text-transform: uppercase; padding: 8px 0; }
:root[data-theme="D"] .wwm-answers { gap: 14px; }
/* Karten aus Papier, minimal schief gelegt - wie im Entwurf. */
:root[data-theme="D"] .wwm-opt {
  position: relative; background: #EDE6D6; color: #141414; box-shadow: 0 10px 24px rgba(0,0,0,.45); border-radius: 1px;
  min-height: 96px; align-items: flex-end; padding: 26px 18px 12px;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1;
}
:root[data-theme="D"] .wwm-opt:nth-child(1) { rotate: -.7deg; }
:root[data-theme="D"] .wwm-opt:nth-child(2) { rotate: .5deg; }
:root[data-theme="D"] .wwm-opt:nth-child(3) { rotate: .4deg; }
:root[data-theme="D"] .wwm-opt:nth-child(4) { rotate: -.6deg; }
:root[data-theme="D"] .wwm-opt::before { content: 'Antwort'; position: absolute; left: 18px; top: 11px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; color: inherit; opacity: .75; }
:root[data-theme="D"] .wwm-opt .wwm-letter { color: inherit; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2.2rem; min-width: 30px; }
:root[data-theme="D"] .wwm-opt:hover { filter: none; }
:root[data-theme="D"] .wwm-opt.selected { background: #FF5B1F; color: #0E0E0E; }
:root[data-theme="D"] .wwm-opt.selected::after { content: 'Eingeloggt'; position: absolute; right: 18px; top: 11px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; }
:root[data-theme="D"] .wwm-opt.correct { background: #F2F2F2; color: #0E0E0E; box-shadow: inset 0 0 0 4px #FF5B1F, 0 10px 24px rgba(0,0,0,.45); }
:root[data-theme="D"] .wwm-opt.wrong { background: #3A1512; color: #F2F2F2; }
/* Joker als Wort statt Kreis: 50:50 · Telefon · Publikum, verbrauchte gestrichen. */
:root[data-theme="D"] .wwm-lifelines { justify-content: flex-end; gap: 18px; }
:root[data-theme="D"] .wwm-ll { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="D"] .wwm-ll::before { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: 3px; text-transform: uppercase; color: #F2F2F2; }
:root[data-theme="D"] .wwm-ll:nth-child(1)::before { content: '50:50'; }
:root[data-theme="D"] .wwm-ll:nth-child(2)::before { content: 'Telefon'; }
:root[data-theme="D"] .wwm-ll:nth-child(3)::before { content: 'Publikum'; }
:root[data-theme="D"] .wwm-ll.used { opacity: 1; }
:root[data-theme="D"] .wwm-ll.used::before { color: #555; text-decoration: line-through; }
:root[data-theme="D"] :is(.wwm-abar, .wwds-abar) { background: #3A3A3A; border-radius: 0; }
:root[data-theme="D"] :is(.wwm-abar, .wwds-abar):has(> :is(.wwm-apct, .wa-pct)) { background: #3A3A3A; }
:root[data-theme="D"] :is(.wwm-apct, .wa-pct) { color: #FF5B1F; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1rem; }
:root[data-theme="D"] :is(.wwm-alet, .wa-let) { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; }

/* ── Wer weiss denn sowas ─────────────────────────────────────────────── */
:root[data-theme="D"] .wwds-grid { gap: 0 18px; }
:root[data-theme="D"] .wwds-cat { border-radius: 0; min-height: 64px; align-items: flex-start; text-align: left; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--d-line); }
:root[data-theme="D"] .wwds-cat:hover:not(.done) { transform: none; filter: none; box-shadow: inset 0 -1px 0 #FF5B1F; }
:root[data-theme="D"] .wwds-cat .wc-num { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: 2px; color: #FF5B1F; }
:root[data-theme="D"] .wwds-cat .wc-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: .3px; }
:root[data-theme="D"] .wwds-cat.done { background: transparent; opacity: .35; }
:root[data-theme="D"] .wwds-q { background: none; border: 0; border-radius: 0; text-align: left; font-weight: 800; font-size: 2rem; line-height: 1.05; text-transform: uppercase; padding: 8px 0; }
:root[data-theme="D"] .wwds-cat-chip { background: none; border: 0; border-radius: 0; padding: 0 0 0 18px; color: #FF5B1F; font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px;
  background: linear-gradient(#FF5B1F, #FF5B1F) 0 50% / 10px 10px no-repeat; }
:root[data-theme="D"] .wwds-opt { box-shadow: inset 0 -1px 0 var(--d-line); font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; padding: 10px 0; }
:root[data-theme="D"] .wwds-opt .wo-let { font-weight: 900; font-size: 1.8rem; }
:root[data-theme="D"] .wwds-opt.sel { padding-inline: 14px; }
:root[data-theme="D"] .wwds-opt.right { padding-inline: 14px; }
:root[data-theme="D"] .wwds-opt.bad { background: #3A1512; color: #F2F2F2; padding-inline: 14px; }
:root[data-theme="D"] .wwds-tag { border-radius: 0; }
:root[data-theme="D"] .wwds-guess { border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--d-line-hi); font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.8rem; }
:root[data-theme="D"] .wwds-timer { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; }
:root[data-theme="D"] .wwds-team .wt-meta { font-family: 'Instrument Sans', sans-serif; letter-spacing: 1px; color: #6A6A6A; }

/* ── Der Duemmste fliegt: Kandidaten als Tafeln, Leben als Punkte ─────── */
:root[data-theme="D"] .ddf-players { gap: 0; justify-content: stretch; border-top: 1px solid var(--d-line); }
:root[data-theme="D"] .ddf-player {
  flex: 1 1 140px; background: transparent; border: 0; border-radius: 0; box-shadow: inset -1px 0 0 var(--d-line), inset 0 -1px 0 var(--d-line);
  text-align: left; padding: 10px 14px;
}
:root[data-theme="D"] .ddf-player-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
:root[data-theme="D"] .ddf-player.picked { border: 0; box-shadow: inset 0 -3px 0 #FF5B1F, inset -1px 0 0 var(--d-line); }
:root[data-theme="D"] .ddf-player.picked .ddf-player-name { color: #FF5B1F; }
:root[data-theme="D"] .ddf-player.out { transform: none; opacity: .4; }
:root[data-theme="D"] .ddf-heart { font-size: 0; margin-right: 6px; vertical-align: middle; }
:root[data-theme="D"] .ddf-heart::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #FF5B1F; }
:root[data-theme="D"] .ddf-heart.empty::before { background: #2A2A2A; }
:root[data-theme="D"] .ddf-question { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1; }
:root[data-theme="D"] .ddf-answer { color: #F2F2F2; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; text-transform: uppercase; }
:root[data-theme="D"] .ddf-answer::before { content: 'Lösung  '; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: 3px; color: #FF5B1F; vertical-align: middle; white-space: pre; }

/* ── Der Preis ist heiss: Preisschilder ───────────────────────────────── */
:root[data-theme="D"] .pih-scores { border-bottom-color: var(--d-line); }
:root[data-theme="D"] .pih-score { border-radius: 0; background: #151515; border: 0; box-shadow: inset 0 0 0 1px var(--d-line); }
:root[data-theme="D"] .pih-score.lead { background: #151515; box-shadow: inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] .pih-score.picked { box-shadow: inset 0 0 0 1px #FF5B1F; transform: none; }
:root[data-theme="D"] .pih-score-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
:root[data-theme="D"] .pih-score-pts { font-family: 'Big Shoulders Display', sans-serif; font-size: 1.3rem; color: #FF5B1F; }
:root[data-theme="D"] .pih-item { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1; text-transform: uppercase; }
:root[data-theme="D"] .pih-stage :is(img, video) { border-radius: 0; }
:root[data-theme="D"] .pih-price { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 3.4rem; color: #FF5B1F; text-shadow: none; }
/* Gebote als Schild mit Spitze links, wie am Euro-o-Meter des Entwurfs. */
:root[data-theme="D"] .pih-bid-row {
  border: 0; border-radius: 0; background: #1E1E1E; box-shadow: none; padding-left: 26px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.2rem; text-transform: uppercase;
}
:root[data-theme="D"] .pih-bid-row.win { background: #FF5B1F; color: #0E0E0E; border: 0; }
:root[data-theme="D"] .pih-bid-diff { font-family: 'Instrument Sans', sans-serif; letter-spacing: 1px; text-transform: none; }
:root[data-theme="D"] .pih-team { border-radius: 0; background: #151515; box-shadow: inset 0 3px 0 var(--team), inset 0 0 0 1px var(--d-line); opacity: .7; }
:root[data-theme="D"] .pih-team.lead { opacity: 1; box-shadow: inset 0 3px 0 var(--team), inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] .pih-team-pts { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; color: #F2F2F2; }
:root[data-theme="D"] .pih-team-name { font-weight: 600; letter-spacing: 3px; font-size: .7rem; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="D"] .tp-team { background: #151515; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--d-line); }
:root[data-theme="D"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 4px 0 rgb(var(--tc)), inset 0 0 0 1px var(--d-line); }
:root[data-theme="D"] .tp-team.turn { transform: none; background: #151515; box-shadow: inset 0 4px 0 rgb(var(--tc, 255,91,31)), inset 0 0 0 1px var(--d-line), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] .tp-team-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.3rem; text-transform: uppercase; }
:root[data-theme="D"] .tp-team-sub { font-family: 'Instrument Sans', sans-serif; letter-spacing: 2px; }
:root[data-theme="D"] .tp-stage { border: 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); border-radius: 0; padding-inline: 0; }
:root[data-theme="D"] .tp-catchip { border-radius: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: .72rem; }
:root[data-theme="D"] .tp-question { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2.1rem; line-height: 1.02; text-transform: uppercase; }
:root[data-theme="D"] .tp-answer { border-radius: 0; border: 0; text-transform: uppercase; font-size: 1.5rem; }
:root[data-theme="D"] .tp-answer.hidden { background: none; border: 0; border-bottom: 1px dashed var(--d-line-hi); font-family: 'Instrument Sans', sans-serif; font-size: .75rem; letter-spacing: 3px; }
:root[data-theme="D"] .tp-wheel-rotor { box-shadow: 0 0 0 1px #3A3A3A, 0 0 0 7px #0E0E0E, 0 0 0 8px #2A2A2A; }
:root[data-theme="D"] .tp-wheel-hub { background: #0E0E0E; border: 2px solid #FF5B1F; box-shadow: none; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; }
:root[data-theme="D"] .tp-wheel-pointer { border-top-color: #FF5B1F; filter: none; }
:root[data-theme="D"] .tp-pie { filter: none; }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="D"] .winner-text { font-size: 3rem; line-height: 1; }
:root[data-theme="D"] .result-card { border: 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); border-radius: 0; backdrop-filter: none; }
:root[data-theme="D"] .result-scores { font-family: 'Instrument Sans', sans-serif; letter-spacing: 1px; color: var(--d-dim); }
:root[data-theme="D"] .result-scores strong { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 2rem; color: #F2F2F2; }
:root[data-theme="D"] .tour-bar { height: 4px; border-radius: 0; background: #222; }
:root[data-theme="D"] .tour-bar-fill { background: #FF5B1F; border-radius: 0; }
:root[data-theme="D"] .tour-total { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.8rem; }
:root[data-theme="D"] .q-list-item { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--d-line); }
:root[data-theme="D"] .q-list-item:hover { background: rgba(255,91,31,.05); }
:root[data-theme="D"] .q-list-item.tour-lead { background: transparent; box-shadow: inset 3px 0 0 #FF5B1F; }

/* ── Host: Menue, Knoepfe, Kaesten, Felder ────────────────────────────── */
:root[data-theme="D"] .menu-cards { counter-reset: dshow; gap: 0; border-top: 1px solid var(--d-line); }
:root[data-theme="D"] .menu-card {
  counter-increment: dshow; background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--d-line), inset -1px 0 0 var(--d-line); padding: 34px 16px 18px; text-align: left; align-items: flex-start;
}
:root[data-theme="D"] .menu-card::before {
  content: counter(dshow, decimal-leading-zero); position: absolute; left: 16px; top: 12px; right: auto; height: auto;
  background: none; opacity: 1; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1rem; color: #4A4A4A;
}
:root[data-theme="D"] .menu-card:hover { transform: none; background: rgba(255,91,31,.04); box-shadow: inset 0 -3px 0 #FF5B1F, inset -1px 0 0 var(--d-line); }
:root[data-theme="D"] .menu-card:hover::before { color: #FF5B1F; }
:root[data-theme="D"] .menu-card-icon { justify-content: flex-start; }
:root[data-theme="D"] .menu-card-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 1.45rem; text-transform: uppercase; line-height: 1; letter-spacing: .3px; }
:root[data-theme="D"] .menu-card:hover .menu-card-title { color: #FF5B1F; }
:root[data-theme="D"] .menu-card-sub { letter-spacing: .3px; }
:root[data-theme="D"] .menu-pill { border-radius: 0; border: 0; border-bottom: 1px solid var(--d-line-hi); padding: 8px 4px; letter-spacing: 2px; text-transform: uppercase; font-size: .72rem; }
:root[data-theme="D"] :is(.menu-pill:hover, .menu-pill.active) { background: none; color: #FF5B1F; border-color: #FF5B1F; }
:root[data-theme="D"] .menu-divider { background: #FF5B1F; width: 48px; height: 3px; }
:root[data-theme="D"] .btn { border-radius: 0; letter-spacing: 2.5px; font-weight: 600; }
:root[data-theme="D"] .btn:hover { transform: none; }
:root[data-theme="D"] .btn-primary { background: #FF5B1F; color: #0E0E0E; box-shadow: none; }
:root[data-theme="D"] .btn-primary:hover { background: #FF7A45; box-shadow: none; }
:root[data-theme="D"] .btn-primary::after { display: none; }
:root[data-theme="D"] .btn-secondary { background: transparent; border: 1px solid var(--d-line-hi); color: #D0D0D0; backdrop-filter: none; }
:root[data-theme="D"] .btn-secondary:hover { border-color: #F2F2F2; background: transparent; }
:root[data-theme="D"] .btn-danger { background: #B8241C; box-shadow: none; }
:root[data-theme="D"] .btn-accent { background: #1E40AF; box-shadow: none; }
:root[data-theme="D"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 0; background: #131313; border: 1px solid var(--d-line); }
:root[data-theme="D"] :is(.pr-team-btn, .setup-lobby .badge, .player-team-tag, .pmini-av) { border-radius: 0; }
:root[data-theme="D"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select) { border-radius: 0 !important; }
:root[data-theme="D"] .page-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }

/* ══ D · Komposition (2026-10-15) ══════════════════════════════════════════
   David: "sieht kaum anders aus - als haettest du es leicht umgebaut". Bis
   hierher war D eine andere Farbe auf demselben, mittig gestapelten Layout.
   Der Entwurf ist aber eine Sendegrafik: links eine grosse Schlagzeile mit
   der Liste darunter, rechts eine schmale Spalte mit Topf und Teams, die
   Show-Marke klein oben links statt mittig darueber. Das wird hier per
   Grid umgestellt, ohne das Markup anzufassen.
   Grundsatz: auf jedem Screen ist genau EIN Ding laut (Schlagzeile oder
   Zahl), alles andere ist Haarlinie und kleine Schrift. Orange steht nur
   dort, wo gerade etwas passiert. */
:root[data-theme="D"] { --d-breit: min(1240px, 94vw); }

/* Show-Marke klein oben links, auf der Kante der Spalte darunter. */
:root[data-theme="D"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  align-self: flex-start; margin: 22px 0 6px calc((100vw - var(--d-breit)) / 2); text-align: left;
}
:root[data-theme="D"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 150px; max-height: 64px;
}

/* ── Feud: Schlagzeile + Liste links, Topf und Teams rechts ── */
:root[data-theme="D"] #game-screen.active {
  display: grid; max-width: var(--d-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kick topf" "board topf" "board teams";
  grid-template-rows: auto auto 1fr;
  column-gap: 56px; row-gap: 0; align-items: start;
}
:root[data-theme="D"] #game-screen .round-bar { display: contents; }
:root[data-theme="D"] #game-screen .round-bar::before { content: none; }
:root[data-theme="D"] #game-screen .round-bar > :nth-child(2) { display: none; }
:root[data-theme="D"] #game-screen #round-info {
  grid-area: kick; justify-self: start; display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #game-screen #round-info::before {
  content: 'On Air'; padding: 5px 11px 5px 24px; color: #0E0E0E; font-weight: 700;
  background: radial-gradient(circle, #0E0E0E 3px, transparent 3.5px) 10px 50% / 8px 8px no-repeat, #FF5B1F;
}
/* Der Topf: die eine grosse Zahl rechts oben. */
:root[data-theme="D"] #game-screen .round-bar > :nth-child(3) {
  grid-area: topf; justify-self: end; text-align: right; margin-top: -6px; font-size: 0;
}
/* "Punkte:" steht so im Markup - auf der Leinwand heisst es wie im Entwurf. */
:root[data-theme="D"] #game-screen .round-bar > :nth-child(3)::before {
  content: 'Im Topf'; display: block; margin-bottom: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #game-screen .round-bar .pts {
  display: block; margin-top: 2px; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900;
  font-size: clamp(4rem, 11vh, 7.5rem); line-height: .82; letter-spacing: -1px; color: #FF5B1F;
}
:root[data-theme="D"] #game-screen .board { grid-area: board; padding: 0; }
:root[data-theme="D"] #game-screen .q-text {
  font-size: clamp(2rem, 3.4vw + .6vh, 3.4rem); line-height: .94; padding: 10px 0 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--d-line-hi); letter-spacing: -.2px; text-wrap: balance;
}
:root[data-theme="D"] #game-screen .q-text::before { content: none; }
:root[data-theme="D"] #game-screen .answers.split { column-gap: 40px; }
/* Die Liste fuellt die Spalte: hohe Zeilen, grosse Ziffern - sonst stand
   sie klein oben und die untere Bildhaelfte blieb leer. */
:root[data-theme="D"] #game-screen .tile { min-height: clamp(44px, 9vh - 6px, 84px); }
:root[data-theme="D"] #game-screen .tile-num { width: 58px; font-size: clamp(2.4rem, 6.4vh, 3.6rem); }
:root[data-theme="D"] #game-screen .tile.open .tile-answer { font-size: clamp(1.6rem, 4vh, 2.3rem); line-height: .95; }
:root[data-theme="D"] #game-screen .tile.open .tile-center { padding-left: 14px; }
:root[data-theme="D"] #game-screen .tile.open .tile-pts { font-size: clamp(1.7rem, 4.6vh, 2.6rem); }
/* Teams als Spalte unter dem Topf: Name klein, Zahl gross, X darunter. */
:root[data-theme="D"] #game-screen .scoreboard { grid-area: teams; flex-direction: column; gap: 22px; margin-top: 26px; }
:root[data-theme="D"] #game-screen .team-panel:is(.red, .blue, .green),
:root[data-theme="D"] #game-screen .team-panel.active-team {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name score" "x score";
  align-items: end; column-gap: 12px; padding: 12px 0 10px; background: none;
  box-shadow: inset 0 3px 0 rgb(var(--tc));
}
:root[data-theme="D"] #game-screen .team-panel.active-team { box-shadow: inset 0 3px 0 rgb(var(--tc)), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] #game-screen .team-panel .t-name { grid-area: name; margin: 6px 0 0; }
:root[data-theme="D"] #game-screen .team-panel .t-score { grid-area: score; font-size: 4rem; line-height: .82; }
:root[data-theme="D"] #game-screen .team-panel .team-strikes { grid-area: x; margin-top: 8px; }
:root[data-theme="D"] #game-screen .strike-pip { width: 26px; height: 26px; font-size: .95rem; }

/* ── Jeopardy: Titel links, Raster, Teams als Zeile darunter ── */
:root[data-theme="D"] #jeopardy-screen.active {
  display: grid; max-width: var(--d-breit); padding-top: 0;
  grid-template-areas: "kick" "board" "teams"; row-gap: 14px;
}
:root[data-theme="D"] #jeopardy-screen .round-bar { grid-area: kick; justify-self: start; }
:root[data-theme="D"] #jeopardy-screen .round-bar::before { content: 'On Air'; }
:root[data-theme="D"] #jeopardy-screen .jeopardy-board { grid-area: board; }
:root[data-theme="D"] #jeopardy-screen .jeopardy-scores { grid-area: teams; justify-content: flex-start; gap: 56px; padding-top: 14px; border-top: 1px solid var(--d-line-hi); }
:root[data-theme="D"] #jeopardy-screen .jeopardy-team:is(.red, .blue, .green) {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; padding: 0; background: none; box-shadow: none;
}
:root[data-theme="D"] #jeopardy-screen .jeopardy-team .jt-name::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 9px; background: rgb(var(--tc)); }
:root[data-theme="D"] #jeopardy-screen .jeopardy-team .jt-score { font-size: 3rem; }
:root[data-theme="D"] #jeopardy-screen .jeopardy-cat { justify-content: flex-start; text-align: left; padding-inline: 6px; font-size: 1.25rem; }
:root[data-theme="D"] #jeopardy-screen .jeopardy-cell { justify-content: flex-start; padding-inline: 6px; font-size: clamp(2rem, 5.2vh, 2.9rem); }

/* ── Jeopardy-Frage: Sendegrafik statt mittiger Karte ──
   Kategorie als Kicker, Betrag gross in Kontur rechts oben, die Frage als
   linksbuendige Schlagzeile ueber die volle Breite, die Antwort als
   Bauchbinde darunter. */
:root[data-theme="D"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: start;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  column-gap: 40px; row-gap: 0; padding: 6vh max(3vw, (100vw - var(--d-breit)) / 2);
}
:root[data-theme="D"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="D"] .jeopardy-clue-cat { grid-area: cat; align-self: end; font-size: .85rem; letter-spacing: 4px; padding-bottom: 14px; }
:root[data-theme="D"] .jeopardy-clue-pts {
  grid-area: pts; justify-self: end; align-self: end; font-size: clamp(4rem, 13vh, 8rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px #FF5B1F;
}
:root[data-theme="D"] .jeopardy-clue-overlay { column-gap: 0; }
:root[data-theme="D"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { border-bottom: 1px solid var(--d-line-hi); margin-bottom: 26px; }
:root[data-theme="D"] .jeopardy-clue-cat { justify-self: stretch; }
:root[data-theme="D"] .jeopardy-clue-pts { padding: 0 0 10px 40px; }
:root[data-theme="D"] .jeopardy-clue-overlay > .jeopardy-clue-text { width: fit-content; max-width: 100%; }
:root[data-theme="D"] .jeopardy-clue-overlay > .jeopardy-clue-blank { width: 100%; }
:root[data-theme="D"] .jeopardy-clue-text {
  max-width: none; text-align: left; font-size: clamp(2.6rem, 5vw + 1vh, 5.4rem); line-height: .92; letter-spacing: -.3px;
  text-shadow: none; text-wrap: balance;
}
/* Verdeckt: kein gestrichelter Kasten, sondern drei leere Zeilen wie ein
   geschwaerzter Untertitel - man sieht, dass gleich Text kommt. */
:root[data-theme="D"] .jeopardy-clue-blank {
  min-width: 0; border: 0; border-radius: 0; padding: 0; font-size: 0; text-align: left;
  display: flex; flex-direction: column; gap: 18px;
}
:root[data-theme="D"] .jeopardy-clue-blank::before,
:root[data-theme="D"] .jeopardy-clue-blank::after { content: ''; display: block; height: clamp(26px, 5vh, 46px); background: #1B1B1B; }
:root[data-theme="D"] .jeopardy-clue-blank::before { width: 82%; }
:root[data-theme="D"] .jeopardy-clue-blank::after { width: 54%; }
:root[data-theme="D"] .jeopardy-answer-text {
  margin-top: 30px; padding: 10px 22px 8px; text-align: left; letter-spacing: 0; text-transform: uppercase;
  font-size: clamp(2rem, 4vh + 1vw, 3.4rem); line-height: 1; font-weight: 900;
}
:root[data-theme="D"] .jeopardy-answer-text.visible { display: inline-block; width: auto; justify-self: start; background: #FF5B1F; color: #0E0E0E; text-shadow: none; animation: none; }
:root[data-theme="D"] .jeopardy-answer-text.visible::before { content: 'Richtig ist'; display: block; margin-bottom: 4px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: 3px; opacity: .8; }
:root[data-theme="D"] .jeopardy-dd-banner { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; letter-spacing: 1px; color: #0E0E0E; background: #FF5B1F; padding: 4px 16px; text-shadow: none; }

/* Die Choreografie des Aufdeckens. Nur der Schritt, der gerade dazukommt
   (data-neu, js/jeopardy.js), wird animiert:
   1. Ein orangener Balken faehrt von links durch die Zeile (Bauchbinde),
   2. hinter ihm steht die Frage, Zeile fuer Zeile freigegeben,
   3. Kategorie und Betrag ruecken leicht nach - Ruhe statt Ploppen. */
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text { position: relative; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text::after {
  content: ''; position: absolute; inset: -14px -10px -4px; background: #FF5B1F; transform-origin: 0 50%;
  animation: thDBalken .62s cubic-bezier(.7,0,.2,1) both;
}
/* Hinter dem Balken steigen die Woerter einzeln auf (js/jeopardy.js setzt
   je Wort <span class="jw" style="--i:n">) - die Frage baut sich lesbar auf,
   statt als Block zu erscheinen. */
:root[data-theme="D"] .jeopardy-clue-text .jw { display: inline-block; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu~="frage"] .jeopardy-clue-text .jw {
  animation: thDWort .55s calc(.28s + var(--i, 0) * 45ms) cubic-bezier(.2,.9,.25,1) both;
}
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu~="frage"] :is(.jeopardy-clue-img, .jeopardy-stage, .jeopardy-series, .jeopardy-steps) { animation: thDHoch .7s .35s cubic-bezier(.2,.8,.2,1) both; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu~="antwort"] .jeopardy-answer-text.visible { animation: thDWisch .55s .05s cubic-bezier(.7,0,.2,1) both; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu="verdeckt"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { animation: thDHoch .6s cubic-bezier(.2,.8,.2,1) both; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu="verdeckt"] .jeopardy-clue-pts { animation-delay: .08s; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu="verdeckt"] .jeopardy-clue-blank::before { animation: thDWisch .7s .12s cubic-bezier(.7,0,.2,1) both; }
:root[data-theme="D"] .jeopardy-clue-overlay[data-neu="verdeckt"] .jeopardy-clue-blank::after { animation: thDWisch .7s .22s cubic-bezier(.7,0,.2,1) both; }
/* Der Balken faehrt ueber die Zeile und zieht nach rechts ab; die Woerter
   steigen dahinter auf. (Erste Fassung: clip-path am Text - schnitt den
   Balken mit ab; zweite: Text transparent bis der Balken deckt - David
   2026-10-15: "ploppt nur auf ohne irgendwas".) */
@keyframes thDWort {
  0%   { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes thDBalken {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(1); transform-origin: 0 50%; }
  41%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
@keyframes thDHoch {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="D"] .jeopardy-clue-overlay *,
  :root[data-theme="D"] .jeopardy-clue-overlay *::before,
  :root[data-theme="D"] .jeopardy-clue-overlay *::after { animation: none !important; }
  :root[data-theme="D"] .jeopardy-clue-overlay .jeopardy-clue-text::after { display: none; }
}

/* ── WWM: Frage als Schlagzeile ueber die volle Breite ── */
:root[data-theme="D"] #wwm-screen.active { max-width: var(--d-breit); padding-top: 0; }
:root[data-theme="D"] #wwm-screen .round-bar { align-self: flex-start; }
:root[data-theme="D"] #wwm-screen .round-bar::before { content: 'On Air'; }
:root[data-theme="D"] .wwm-q { font-size: clamp(2.4rem, 4vw + 1vh, 4.4rem); line-height: .92; text-wrap: balance; }
:root[data-theme="D"] .wwm-opt { min-height: 118px; font-size: 1.9rem; }
:root[data-theme="D"] .wwm-opt .wwm-letter { font-size: 2.8rem; }

/* Niedriges Fenster (Beamer 1280x720): Frage und Karten flacher, sonst
   stand WWM mit Publikumsjoker 19 px unter dem Bild. */
@media (max-height: 900px) {
  :root[data-theme="D"] .wwm-q { font-size: clamp(2.15rem, 6.4vh, 3.2rem); padding: 2px 0; }
  :root[data-theme="D"] .wwm-opt { min-height: clamp(78px, 13vh, 104px); padding-top: 24px; }
  :root[data-theme="D"] .wwm-answers { gap: 10px 14px; }
}

/* ── WWDS: wie Feud - Schlagzeile + Liste links, Teams als Spalte rechts ──
   Vorher: Teamtafeln quer ueber dem Bild, darunter alles mittig gestapelt.
   Laut ist in der Auswahl die Zeile "Team X waehlt eine Kategorie", in der
   Frage die Frage selbst; der Countdown steht als Konturziffer rechts oben
   wie der Betrag bei der Jeopardy-Frage. Die Wrapper um Chip und Timer
   tragen Inline-Styles (js/wwds.js) - daher dort !important. */
:root[data-theme="D"] #wwds-screen.active {
  display: grid; max-width: var(--d-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kick teams" "stage teams"; grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 0; align-items: start;
}
:root[data-theme="D"] #wwds-screen .round-bar { grid-area: kick; justify-self: start; }
:root[data-theme="D"] #wwds-screen .round-bar::before { content: 'On Air'; }
:root[data-theme="D"] #wwds-screen .round-bar .pts { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; color: #FF5B1F; }
:root[data-theme="D"] #wwds-screen .board { grid-area: stage; padding: 0; }
:root[data-theme="D"] #wwds-screen .wwds-top { grid-area: teams; flex-direction: column; flex-wrap: nowrap; gap: 22px; margin-top: 4px; }
:root[data-theme="D"] #wwds-screen .wwds-team:is(.red, .blue, .green) {
  flex: 0 0 auto; min-width: 0; padding: 12px 0 10px; background: none; box-shadow: inset 0 3px 0 rgb(var(--tc));
}
:root[data-theme="D"] #wwds-screen .wwds-team.on { box-shadow: inset 0 3px 0 rgb(var(--tc)), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] #wwds-screen .wwds-team .wt-name { margin-top: 6px; }
:root[data-theme="D"] #wwds-screen .wwds-team .wt-money { font-size: clamp(3rem, 8vh, 4.2rem); line-height: .85; margin: 8px 0 6px; }
:root[data-theme="D"] #wwds-screen .wwds-team .wt-lock { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; color: #FF5B1F; }

/* Auswahl: die Zeile ueber dem Raster ist die Schlagzeile. */
:root[data-theme="D"] #wwds-stage > .wwds-sub:first-child {
  margin: 10px 0 18px !important; padding-bottom: 18px; border-bottom: 1px solid var(--d-line-hi); text-align: left;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; color: #F2F2F2;
  font-size: clamp(2.2rem, 3.4vw + .8vh, 3.6rem); line-height: .92; letter-spacing: -.2px; text-wrap: balance;
}
:root[data-theme="D"] #wwds-stage > .wwds-sub:first-child strong { display: block; color: #FF5B1F !important; }
:root[data-theme="D"] #wwds-screen .wwds-grid { grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
:root[data-theme="D"] #wwds-screen .wwds-cat { min-height: clamp(52px, 9vh - 4px, 78px); justify-content: center; padding: 6px 0; }
:root[data-theme="D"] #wwds-screen .wwds-cat .wc-name { font-size: clamp(1.4rem, 3.4vh, 1.9rem); line-height: 1; }

/* Frage: Kategorie als Kicker, Countdown rechts, Frage als Schlagzeile. */
:root[data-theme="D"] #wwds-stage:has(> div > .wwds-timer) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end;
}
:root[data-theme="D"] #wwds-stage > div:has(> .wwds-cat-chip) { grid-column: 1; grid-row: 1; text-align: left !important; padding: 18px 0 10px; }
:root[data-theme="D"] #wwds-stage > div:has(> .wwds-timer) { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end !important; margin: 0 0 14px !important; }
:root[data-theme="D"] #wwds-stage > .wwds-q { grid-column: 1; grid-row: 2; margin: 0 0 14px !important; }
:root[data-theme="D"] #wwds-stage > :is(.wwds-opts, .wwds-aud, .wwds-sub) { grid-column: 1 / -1; }
:root[data-theme="D"] #wwds-stage > .wwds-opts { border-top: 1px solid var(--d-line-hi); }
:root[data-theme="D"] #wwds-screen .wwds-timer {
  font-size: clamp(4rem, 13vh, 7rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px #FF5B1F;
}
:root[data-theme="D"] #wwds-screen .wwds-timer.urgent { color: #E8453C; -webkit-text-stroke: 0; }
:root[data-theme="D"] #wwds-screen .wwds-timer.done { -webkit-text-stroke-color: #3A3A3A; }
:root[data-theme="D"] #wwds-screen .wwds-q {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 3.4vw + 1vh, 4rem);
  line-height: .92; letter-spacing: -.2px; padding: 0; text-wrap: balance;
}
:root[data-theme="D"] #wwds-screen .wwds-opt { min-height: clamp(54px, 10vh, 84px); font-size: clamp(1.5rem, 3.6vh, 2.1rem); gap: 18px; }
:root[data-theme="D"] #wwds-screen .wwds-opt .wo-let { font-size: clamp(2rem, 5vh, 2.8rem); min-width: 34px; }

/* ── DDF: Frage als Schlagzeile links, Kandidaten als Liste rechts ──
   Vorher: Spielerkacheln quer ueber dem Bild in zwei Reihen, darunter alles
   mittig. Jetzt wie Feud/WWDS: links Kicker (On Air, "8 noch dabei", Uhr),
   Frage, Loesung als Bauchbinde, Abstimmung; rechts die Kandidaten
   untereinander, Name links, Herzen rechts. Laut ist die Frage - im
   Ergebnis der Kandidat, der ein Herz verliert (orange Zeile).
   Der innere Wrapper und die Zeilen der Abstimmung tragen Inline-Styles
   (index.html, js/ddf.js) - daher dort !important. */
:root[data-theme="D"] #ddf-screen.active { max-width: var(--d-breit); padding-top: 0; }
:root[data-theme="D"] #ddf-screen > div {
  display: grid !important; height: auto !important;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kick spieler" "frage spieler" "antwort spieler" "note spieler" "media spieler" "vote spieler";
  grid-template-rows: auto auto auto auto auto 1fr; column-gap: 56px; align-items: start;
}
:root[data-theme="D"] #ddf-screen .ddf-alive {
  grid-area: kick; justify-self: start; display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; color: var(--d-dim);
}
:root[data-theme="D"] #ddf-screen .ddf-alive::before {
  content: 'On Air'; padding: 5px 11px 5px 24px; color: #0E0E0E; font-weight: 700;
  background: radial-gradient(circle, #0E0E0E 3px, transparent 3.5px) 10px 50% / 8px 8px no-repeat, #FF5B1F;
}
:root[data-theme="D"] #ddf-timer {
  grid-area: kick; justify-self: end; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900 !important;
  font-size: 2.2rem !important; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #FF5B1F;
}
:root[data-theme="D"] #ddf-screen .ddf-question {
  grid-area: frage; display: block; flex: none; max-width: none; margin: 0; padding: 14px 0 18px;
  text-align: left; font-size: clamp(2.4rem, 3.8vw + 1vh, 4.6rem); line-height: .92; letter-spacing: -.2px;
  text-wrap: balance; border-bottom: 1px solid var(--d-line-hi);
}
:root[data-theme="D"] #ddf-screen .ddf-answer { grid-area: antwort; text-align: left; padding: 16px 0 4px; font-size: clamp(2rem, 5.4vh, 3.2rem); line-height: 1; }
:root[data-theme="D"] #ddf-screen .ddf-note { grid-area: note; text-align: left; padding: 4px 0 10px; color: var(--d-dim); }
:root[data-theme="D"] #ddf-screen .ddf-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="D"] #ddf-screen .ddf-vote-grid { grid-area: vote; justify-content: flex-start; padding: 10px 0 0; }
:root[data-theme="D"] #ddf-vote-grid > div { justify-content: flex-start !important; text-align: left !important; }
:root[data-theme="D"] #ddf-vote-grid > div > div { justify-content: flex-start !important; }
/* Ergebnis-Zeilen (Name, Stimmen) in der Schrift der Sendung; die rote
   Zeile des Verlierers setzt js/ddf.js. */
:root[data-theme="D"] #ddf-vote-grid > div > div {
  font-family: 'Big Shoulders Display', sans-serif; font-size: clamp(1.4rem, 3.4vh, 1.9rem) !important; text-transform: uppercase; line-height: 1.15;
}
:root[data-theme="D"] #ddf-vote-grid > div > div > span { text-align: left !important; }
:root[data-theme="D"] #ddf-vote-grid > div > div > span:first-child { min-width: 180px !important; }
/* Stimmen-Zaehler der laufenden Abstimmung */
:root[data-theme="D"] #ddf-vote-grid > div:has(> span) {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900 !important; font-size: clamp(2.6rem, 7vh, 3.8rem) !important; line-height: 1; color: #FF5B1F;
}
:root[data-theme="D"] #ddf-vote-grid > div:has(> span) > span { font-family: 'Instrument Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase; font-size: .72rem !important; }

/* Kandidaten-Spalte */
:root[data-theme="D"] #ddf-screen .ddf-players {
  grid-area: spieler; grid-row: 1 / -1; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
  max-width: none; margin: 0; padding: 0; border: 0;
}
:root[data-theme="D"] #ddf-screen .ddf-players::before {
  content: 'Kandidaten'; padding-bottom: 10px; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #ddf-screen .ddf-player {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  padding: clamp(6px, 1.3vh, 12px) 0; background: none; border: 0; border-radius: 0;
  box-shadow: inset 0 1px 0 var(--d-line); text-align: left; transform: none;
}
:root[data-theme="D"] #ddf-screen .ddf-player-name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.3rem, 3.2vh, 1.7rem); }
:root[data-theme="D"] #ddf-screen .ddf-player-name .pmini-av { width: 26px; height: 26px; font-size: .9rem; flex: none; }
:root[data-theme="D"] #ddf-screen .ddf-player.last { box-shadow: inset 0 1px 0 var(--d-line), inset 4px 0 0 #E8453C; padding-left: 14px; }
:root[data-theme="D"] #ddf-screen .ddf-player.last .ddf-player-name { color: #F2F2F2; }
:root[data-theme="D"] #ddf-screen .ddf-player.out { opacity: .35; }
:root[data-theme="D"] #ddf-screen .ddf-player.picked { background: #FF5B1F; box-shadow: none; padding-inline: 12px; }
:root[data-theme="D"] #ddf-screen .ddf-player.picked .ddf-player-name { color: #0E0E0E; }
:root[data-theme="D"] #ddf-screen .ddf-player.picked .ddf-heart.full::before { background: #0E0E0E; }
:root[data-theme="D"] #ddf-screen .ddf-player.picked .ddf-heart.empty::before { background: rgba(14,14,14,.3); }
:root[data-theme="D"] #ddf-screen .ddf-heart { margin: 0 0 0 6px; }

/* ── PIH: Artikel als Schlagzeile, Foto + Preis, rechts der Stand ──
   Vorher: Teamleiste und acht Ranglisten-Pillen quer oben, darunter alles
   mittig gestapelt. Jetzt links On-Air-Kicker und Artikel, darunter das
   Foto mit dem aufgeloesten Preis als einziger grosser Zahl daneben, die
   Gebote zweispaltig; rechts Teamstand und Rangliste untereinander.
   Wrapper, Hinweise und Zaehler der Gebote tragen Inline-Styles
   (index.html, js/pih.js) - daher dort !important. */
:root[data-theme="D"] #pih-screen.active { max-width: var(--d-breit); padding-top: 0; }
:root[data-theme="D"] #pih-screen > div {
  display: grid !important; height: auto !important;
  width: 100%; grid-template-columns: auto minmax(0, 1fr) 346px;
  grid-template-areas: "uhr uhr ." "artikel artikel ." "bild preis ." "bild note ." "media media ." "gebote gebote .";
  grid-template-rows: auto auto auto auto auto 1fr; column-gap: 0; align-items: start;
}
:root[data-theme="D"] #pih-teams { grid-column: 3; grid-row: 1 / 3; margin-left: 56px; }
:root[data-theme="D"] #pih-screen .pih-scores { grid-column: 3; grid-row: 3 / -1; margin: 0 0 0 56px; }
:root[data-theme="D"] #pih-timer {
  grid-area: uhr; justify-self: start; padding-bottom: 6px; font-family: 'Instrument Sans', sans-serif;
  font-size: .8rem !important; font-weight: 700 !important; letter-spacing: 3px !important; color: #FF5B1F;
}
:root[data-theme="D"] #pih-screen .pih-item {
  grid-area: artikel; justify-self: stretch; text-align: left; padding: 0 0 18px; margin-bottom: 20px;
  font-size: clamp(2.4rem, 3.8vw + 1vh, 4.4rem); line-height: .92; letter-spacing: -.2px; text-wrap: balance;
  border-bottom: 1px solid var(--d-line-hi);
}
:root[data-theme="D"] #pih-screen .pih-item::before {
  content: 'On Air'; display: block; width: fit-content; margin-bottom: 14px; padding: 5px 11px 5px 24px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: 3px; line-height: 1.2; color: #0E0E0E;
  background: radial-gradient(circle, #0E0E0E 3px, transparent 3.5px) 10px 50% / 8px 8px no-repeat, #FF5B1F;
}
:root[data-theme="D"] #pih-screen .pih-stage { grid-area: bild; text-align: left; }
:root[data-theme="D"] #pih-screen .pih-stage :is(img, video) { display: block; max-width: min(460px, 36vw); max-height: 30vh; }
:root[data-theme="D"] #pih-screen .pih-price { grid-area: preis; align-self: end; text-align: left; padding: 0 0 0 36px; font-size: clamp(4rem, 13vh, 7.5rem); line-height: .82; }
:root[data-theme="D"] #pih-screen .pih-price:not(:empty)::before {
  content: 'Der Preis'; display: block; margin-bottom: 10px; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; line-height: 1; color: var(--d-dim);
}
:root[data-theme="D"] #pih-screen .pih-note { grid-area: note; text-align: left; padding: 10px 0 0 36px; color: var(--d-dim); }
:root[data-theme="D"] #pih-screen .pih-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="D"] #pih-screen .pih-bid-grid {
  grid-area: gebote; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 18px 0 0;
}
:root[data-theme="D"] #pih-bid-grid > :not(.pih-bid-row) { grid-column: 1 / -1; text-align: left !important; justify-content: flex-start !important; }
:root[data-theme="D"] #pih-bid-progress {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900 !important; font-size: clamp(2.6rem, 7vh, 3.8rem) !important; line-height: 1; color: #FF5B1F;
}
:root[data-theme="D"] #pih-bid-progress span { font-family: 'Instrument Sans', sans-serif; letter-spacing: 3px; text-transform: uppercase; font-size: .72rem !important; }
:root[data-theme="D"] #pih-screen .pih-bid-row { max-width: none; margin: 0; }

/* Stand rechts: Teams, darunter die Rangliste wie die DDF-Kandidaten. */
:root[data-theme="D"] #pih-screen .pih-teamrow { flex-direction: column; gap: 12px; max-width: none; margin: 0 0 10px; }
:root[data-theme="D"] #pih-screen .pih-team { padding: 10px 0 8px; background: none; box-shadow: inset 0 3px 0 var(--team); }
:root[data-theme="D"] #pih-screen .pih-team.lead { box-shadow: inset 0 3px 0 var(--team), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] #pih-screen .pih-team-pts { font-size: 2.4rem; }
:root[data-theme="D"] #pih-screen .pih-team-hint { text-align: left; margin: 0 0 6px; color: var(--d-dim); }
:root[data-theme="D"] #pih-screen .pih-scores {
  flex-direction: column; flex-wrap: nowrap; gap: 0; max-width: none; padding: 0; border: 0; align-items: stretch;
}
:root[data-theme="D"] #pih-screen .pih-scores::before {
  content: 'Rangliste'; padding: 6px 0 10px; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #pih-screen .pih-score {
  flex: none; gap: 10px; padding: clamp(4px, 1vh, 9px) 0; background: none; box-shadow: inset 0 1px 0 var(--d-line); transform: none;
}
:root[data-theme="D"] #pih-screen .pih-score-name { flex: 1; display: flex; align-items: center; gap: 8px; font-size: clamp(1.1rem, 2.8vh, 1.45rem); }
:root[data-theme="D"] #pih-screen .pih-score-name .pmini-av { width: 24px; height: 24px; font-size: .85rem; flex: none; }
:root[data-theme="D"] #pih-screen .pih-score.leer .pih-score-pts { color: #4A4A4A; }
:root[data-theme="D"] #pih-screen .pih-score.picked { background: #FF5B1F; box-shadow: none; padding-inline: 10px; }
:root[data-theme="D"] #pih-screen .pih-score.picked :is(.pih-score-name, .pih-score-pts, .pih-rank) { color: #0E0E0E; }

/* ── TP: Rad + Frage links, Teams mit Tortenstuecken als Spalte rechts ──
   Vorher: zwei hohe Teamkarten mittig ueber dem Bild, Rad und Frage
   darunter. Jetzt wie Feud: Kicker oben links, Rad und Frage als Buehne,
   rechts die Teams untereinander - Torte klein links, Name und Stand
   daneben. Laut ist die Frage. */
:root[data-theme="D"] #tp-screen.active {
  display: grid; max-width: var(--d-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kick teams" "board teams"; grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 0; align-items: start;
}
:root[data-theme="D"] #tp-screen .round-bar { grid-area: kick; justify-self: start; }
:root[data-theme="D"] #tp-screen .round-bar::before { content: 'On Air'; }
:root[data-theme="D"] #tp-screen .round-bar .pts { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; color: #FF5B1F; }
:root[data-theme="D"] #tp-screen .tp-board { grid-area: board; justify-content: flex-start; flex-wrap: nowrap; gap: 44px; padding-top: 26px; }
:root[data-theme="D"] #tp-screen .tp-wheel { width: clamp(220px, 40vh, 300px); height: clamp(220px, 40vh, 300px); flex: none; }
:root[data-theme="D"] #tp-screen .tp-side { min-width: 0; }
:root[data-theme="D"] #tp-screen .tp-stage { border-top: 0; padding-top: 0; }
:root[data-theme="D"] #tp-screen .tp-question { font-size: clamp(2.2rem, 3vw + 1vh, 3.6rem); line-height: .92; letter-spacing: -.2px; text-wrap: balance; }
:root[data-theme="D"] #tp-screen .tp-answer { font-size: clamp(1.4rem, 3.4vh, 2rem); }
:root[data-theme="D"] #tp-screen .tp-top { grid-area: teams; flex-direction: column; flex-wrap: nowrap; gap: 22px; margin: 4px 0 0; }
:root[data-theme="D"] #tp-screen .tp-team:is(.red, .blue, .green) {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pie name" "pie sub";
  align-items: center; justify-items: start; column-gap: 16px; row-gap: 2px;
  padding: 14px 0 10px; background: none; box-shadow: inset 0 3px 0 rgb(var(--tc)); transform: none;
}
:root[data-theme="D"] #tp-screen .tp-team.turn { box-shadow: inset 0 3px 0 rgb(var(--tc)), inset 0 -3px 0 #FF5B1F; }
:root[data-theme="D"] #tp-screen .tp-team .tp-pie { grid-area: pie; width: 64px; height: 64px; }
:root[data-theme="D"] #tp-screen .tp-team-name { grid-area: name; align-self: end; font-size: clamp(1.6rem, 4vh, 2.2rem); line-height: .95; }
:root[data-theme="D"] #tp-screen .tp-team.turn .tp-team-name { color: #FF5B1F; }
:root[data-theme="D"] #tp-screen .tp-team-sub { grid-area: sub; align-self: start; font-size: .7rem; letter-spacing: 3px; color: var(--d-dim); }

/* ── Feud-Finale: wie Feud - Frage + Liste links, Stand rechts ──
   Vorher: Kopf, Punktekarten und Vergleichskarten mittig gestapelt.
   Links Kicker (Finale-Schild, wer spielt, Frage x/y), die Frage als
   Schlagzeile, in der Aufloesung die Liste darunter. Rechts oben die Uhr
   als Konturziffer (Antwortphase), darunter der Stand als grosse Zahlen und
   der Vergleich "wer hat was gesagt" untereinander. */
:root[data-theme="D"] #finale-screen.active {
  display: grid; max-width: var(--d-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kopf uhr" "board stand" "board vergleich";
  grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 0; align-items: start;
}
:root[data-theme="D"] #finale-screen .finale-header { grid-area: kopf; display: flex; align-items: center; gap: 14px; text-align: left; }
:root[data-theme="D"] #finale-screen .finale-title {
  padding: 5px 11px; font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: 3px;
  line-height: 1.2; color: #0E0E0E; background: #FF5B1F;
}
:root[data-theme="D"] #finale-screen :is(.finale-team-label, .finale-q-info) { margin: 0; font-size: .72rem; }
:root[data-theme="D"] #finale-screen .finale-q-info { color: var(--d-dim); }
:root[data-theme="D"] #finale-screen .finale-timer {
  grid-area: uhr; justify-self: end; font-size: clamp(4rem, 13vh, 7rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px #FF5B1F;
}
:root[data-theme="D"] #finale-screen .finale-timer.urgent { color: #E8453C; -webkit-text-stroke: 0; }
:root[data-theme="D"] #finale-screen .board { grid-area: board; padding: 0; }
:root[data-theme="D"] #finale-screen :is(.q-text, .finale-big-q) {
  text-align: left; padding: 14px 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--d-line-hi);
  font-size: clamp(2rem, 3.4vw + .6vh, 3.4rem); line-height: .94; letter-spacing: -.2px; text-wrap: balance;
}
:root[data-theme="D"] #finale-screen .finale-big-q { font-size: clamp(2.6rem, 5vw + 1vh, 5.4rem); line-height: .92; padding-top: 22px; border-bottom: 0; }
:root[data-theme="D"] #finale-screen .q-text::before { content: none; }
:root[data-theme="D"] #finale-screen .finale-scores { grid-area: stand; flex-direction: column; gap: 18px; margin-top: 4px; }
:root[data-theme="D"] #finale-screen .finale-score-card { padding: 12px 0 0; background: none; box-shadow: inset 0 1px 0 var(--d-line-hi); }
:root[data-theme="D"] #finale-screen .finale-score-pts { font-size: clamp(3.2rem, 9vh, 4.6rem); line-height: .85; margin-top: 8px; color: #F2F2F2; }
:root[data-theme="D"] #finale-reveal-comparison { grid-area: vergleich; flex-direction: column; gap: 0; margin-top: 26px; }
:root[data-theme="D"] #finale-reveal-comparison::before {
  content: 'Diese Frage'; padding-bottom: 10px; font-family: 'Instrument Sans', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-team {
  max-width: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name pts" "antwort pts";
  align-items: center; column-gap: 12px; padding: 10px 0; background: none; box-shadow: inset 0 1px 0 var(--d-line);
}
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-name { grid-area: name; }
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-answer {
  grid-area: antwort; margin: 4px 0 0; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1; text-transform: uppercase;
}
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-answer.hit { color: #F2F2F2; }
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-answer.miss { color: #6A6A6A; text-decoration: line-through; }
:root[data-theme="D"] #finale-reveal-comparison .finale-reveal-pts { grid-area: pts; font-size: 2.2rem; line-height: 1; }

/* ── Ergebnis: Abspann-Karte statt Pokal in der Mitte ──
   Vorher: grosses Logo, Pokal-Emoji, Text mittig, Stand als Fliesstext.
   Jetzt wie die anderen Screens: Marke klein oben links, Kicker "Endstand",
   der Sieger als die eine riesige Schlagzeile, der Stand darunter als
   Zeilen mit grossen Zahlen, Knoepfe linksbuendig. Das Emoji passt nicht zur
   Sendegrafik und entfaellt. Der Stand kommt als Text mit <br> aus den
   Spieldateien (feud.js, jeopardy-ui.js, wwds.js, tournament.js) - daher nur
   Schrift und Zeilenabstand, keine Zeilen-Elemente. */
:root[data-theme="D"] body:has(#result-screen.active) .logo {
  align-self: flex-start; margin: 22px 0 6px calc((100vw - var(--d-breit)) / 2); text-align: left;
}
:root[data-theme="D"] body:has(#result-screen.active) .logo svg { width: 150px; max-height: 64px; }
:root[data-theme="D"] #result-screen.active { max-width: var(--d-breit); width: 100%; margin-top: 0; gap: 0; align-items: flex-start; text-align: left; }
:root[data-theme="D"] #result-screen .result-icon { display: none; }
:root[data-theme="D"] #result-screen .winner-text {
  font-size: clamp(3.6rem, 7vw + 2vh, 8.4rem); line-height: .86; letter-spacing: -.5px; text-wrap: balance;
  padding-bottom: 26px; border-bottom: 1px solid var(--d-line-hi); width: 100%;
}
:root[data-theme="D"] #result-screen .winner-text::before {
  content: 'Endstand'; display: block; width: fit-content; margin: 18px 0 18px; padding: 5px 11px 5px 24px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: 3px; line-height: 1.2; color: #0E0E0E;
  background: radial-gradient(circle, #0E0E0E 3px, transparent 3.5px) 10px 50% / 8px 8px no-repeat, #FF5B1F;
}
:root[data-theme="D"] #result-screen .result-card { width: 100%; max-width: none; margin: 0; padding: 18px 0 22px; border: 0; background: none; text-align: left; }
:root[data-theme="D"] #result-screen .result-scores { font-size: 1rem; line-height: 1.15; letter-spacing: 3px; text-transform: uppercase; }
:root[data-theme="D"] #result-screen .result-scores strong { display: inline-block; margin: 0 6px 10px 10px; font-size: clamp(2.6rem, 7vh, 3.8rem); line-height: 1; letter-spacing: 0; vertical-align: -.12em; }
:root[data-theme="D"] #result-screen .result-btns { justify-content: flex-start; }
:root[data-theme="D"] #result-screen #result-leaderboard { margin-left: 0 !important; }

/* ── Menue: Programmheft statt Kachelblock in der Mitte ──
   Vorher: grosses Logo mittig, darunter ein 720 px schmaler Kachelblock.
   Jetzt linksbuendig auf der Kante aller Show-Screens: Senderlogo oben
   links, Kicker "Heute im Programm", die acht Sendungen als breites Raster
   ueber die volle Breite, die Werkzeuge als Leiste darunter. Hostseite,
   kommt nicht auf den Beamer. */
:root[data-theme="D"] body:has(#menu-screen.active) .logo {
  align-self: flex-start; margin: 26px 0 10px calc((100vw - var(--d-breit)) / 2); text-align: left;
}
:root[data-theme="D"] body:has(#menu-screen.active) .logo svg { width: clamp(220px, 24vw, 320px); }
:root[data-theme="D"] #menu-screen.active { max-width: var(--d-breit); width: 100%; padding-top: 0; align-items: stretch; }
:root[data-theme="D"] #menu-screen .menu-divider { display: none; }
:root[data-theme="D"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; margin: 0; border-top: 1px solid var(--d-line-hi); }
:root[data-theme="D"] #menu-screen .menu-cards::before {
  content: 'Heute im Programm'; grid-column: 1 / -1; order: -1; padding: 0 0 12px; margin-top: -30px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--d-dim);
}
:root[data-theme="D"] #menu-screen .menu-cards { margin-top: 46px; }
:root[data-theme="D"] #menu-screen .menu-card { padding: 38px 18px 20px; }
:root[data-theme="D"] #menu-screen .menu-card-icon { height: 44px; margin-bottom: 14px; }
:root[data-theme="D"] #menu-screen .menu-card-icon svg { max-height: 44px; width: auto; }
:root[data-theme="D"] #menu-screen .menu-card-title { font-size: clamp(1.45rem, 1.6vw + .5vh, 2rem); }
:root[data-theme="D"] #menu-screen .menu-pills { justify-content: flex-start; gap: 6px 18px; }

/* Late Night deckt auf wie eine Bauchbinde: von links aufgezogen. */
@keyframes thDWisch {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ── E · 70er (Rework 2026-10-14): Samstagabend 1976 ────────────────────────
   Identitaet aus designs/s/E-*.html: Kakaobraun, Senf - Orange - Rost als
   Dreiklang, Creme fuer Schrift, Shrikhand kursiv fuer alles Laute, DM Sans
   fuer den Rest. Formen sind rund: Pillen, Kreise, Boegen. Hinter allem
   Sonnenstrahlen aus dem Entwurf (Muster, kein Leuchten).
   Veredelt wird ueber Flaechen statt Verlaeufe (David 2026-10-14: "das
   Original ist besser, es soll nur hochwertiger sein" - Emaille-Verlaeufe
   abgelehnt): jede Farbe flach, Tiefe nur durch eine harte dunkle Unterkante
   wie bei lackiertem Holz. Teamanzeigen als runde Plaketten mit Ring in der
   Teamfarbe (BAUPLAN 4.4), WWM-Leiter als Punktbogen, Preis im Ringschild.
   Signatur: der Balken rollt herunter wie eine Jalousie und federt nach. */
:root[data-theme="E"] {
  --brd-surface: #2E1A10;
  --brd-frame: inset 0 0 0 5px #F2B33D, inset 0 0 0 10px #E8622C, inset 0 0 0 15px #8C3A1A, 0 18px 36px rgba(0,0,0,.45);
  --brd-well: #23140B;
  --brd-inner: transparent;
  --brd-radius: 26px;
  --tile: #3D2417;
  --tile-hover: #4A2C1B;
  --tile-edge: inset 0 -3px 0 rgba(0,0,0,.28);
  --tile-fg: #F6E7CB;
  --tile-head: transparent;
  --tile-head-fg: #F6E7CB;
  --tile-used: #2A170D;
  --tile-num: #2B1810;
  --tile-num-glow: none;
  --tile-dim-fg: #8C5A3A;
  --tile-bar: rgba(246,231,203,.08);
  --tile-rule: rgba(0,0,0,.18);
  --tile-open: #F2B33D;
  --tile-open-edge: inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(0,0,0,.28);
  --tile-open-fg: #2B1810;
  --tile-open-dim: rgba(43,24,16,.6);
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(43,24,16,.25);
  --tile-pick: #F2B33D;
  --tile-pick-fg: #2B1810;
  /* Richtig in Avocado - das Gruen der Zeit, nicht das Studio-Gruen. */
  --tile-right: #8FA63A;
  --tile-right-fg: #1C2208;
  --tile-radius: 999px;
  --tile-font: 'DM Sans', sans-serif;
  --tile-reveal: thERollo .6s cubic-bezier(.3,1.5,.5,1);
  --e-senf: #F2B33D; --e-orange: #E8622C; --e-rost: #8C3A1A; --e-creme: #F6E7CB; --e-dunkel: #2B1810;
  --e-ringe: 0 0 0 4px #F2B33D, 0 0 0 8px #E8622C, 0 0 0 12px #8C3A1A;
}
/* Sonnenstrahlen vom unteren Rand, wie unter TP und WWDS im Entwurf. */
:root[data-theme="E"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 50% 118%, rgba(242,179,61,.045) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 75%); mask: linear-gradient(0deg, #000 10%, transparent 75%);
}

/* ── Teamanzeigen: runde Plaketten mit Ring in der Teamfarbe ───────────── */
:root[data-theme="E"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #E8453C; }
:root[data-theme="E"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #3B82F6; }
:root[data-theme="E"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #22C55E; }
:root[data-theme="E"] :is(.scoreboard, .jeopardy-scores) { gap: 22px; border-radius: 0; box-shadow: none; overflow: visible; padding: 6px; }
:root[data-theme="E"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  background: #2E1A10; border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 5px var(--tc), inset 0 -6px 0 5px rgba(0,0,0,.18), 0 5px 0 rgba(0,0,0,.3);
}
:root[data-theme="E"] .team-card { border-radius: 36px; }
:root[data-theme="E"] .team-card::before { display: none; }
:root[data-theme="E"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .5px; text-transform: none; color: #CDB898;
}
:root[data-theme="E"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'Shrikhand', serif; color: #F6E7CB; text-shadow: 3px 3px 0 #8C3A1A; line-height: 1.1;
}
:root[data-theme="E"] .team-panel .t-score { font-size: 3.2rem; }
:root[data-theme="E"] .team-panel.active-team { padding: 16px 12px; box-shadow: inset 0 0 0 5px var(--tc), inset 0 0 0 9px #2E1A10, inset 0 0 0 13px #F2B33D, 0 5px 0 rgba(0,0,0,.3); }
:root[data-theme="E"] .wwds-team.on { box-shadow: inset 0 0 0 5px var(--tc), inset 0 0 0 9px #2E1A10, inset 0 0 0 13px #F2B33D; }
:root[data-theme="E"] .team-panel.active-team::after { display: none; }
:root[data-theme="E"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #F2B33D; text-shadow: 3px 3px 0 #E8622C, 6px 6px 0 #8C3A1A; }
:root[data-theme="E"] :is(.team-panel.active-team .t-name, .wwds-team.on .wt-name) { color: #F2B33D; }

/* X in runden Knoepfen, wie oben rechts im Entwurf. */
:root[data-theme="E"] .team-strikes { background: none; border: 0; box-shadow: none; transform: none; }
:root[data-theme="E"] .strike-pip { width: 28px; height: 28px; background: #3D2417; border: 2px solid #5A3622; color: #5A3622; font-size: .85rem; }
:root[data-theme="E"] .strike-pip.lit { background: #E8622C; border-color: #F6E7CB; color: #F6E7CB; box-shadow: 0 3px 0 #8C3A1A; }

:root[data-theme="E"] .round-bar { font-family: 'DM Sans', sans-serif; text-transform: none; letter-spacing: .5px; font-size: .85rem; color: #CDB898; }
:root[data-theme="E"] .round-bar .pts { font-family: 'Shrikhand', serif; font-size: 1.5rem; color: #F2B33D; text-shadow: 2px 2px 0 #8C3A1A; }

/* ── Feud: Balken in Senf und Orange ──────────────────────────────────── */
:root[data-theme="E"] .board { padding: 30px; }
:root[data-theme="E"] .q-text { color: #F2B33D; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.15; text-shadow: 2px 2px 0 #8C3A1A; }
:root[data-theme="E"] .q-text.hidden-q { border: 2px dashed rgba(242,179,61,.4); border-radius: 999px; background: none; text-shadow: none; }
:root[data-theme="E"] .tile { min-height: clamp(38px, 7vh - 8px, 54px); }
:root[data-theme="E"] .tile:hover:not(.open) { transform: none; }
:root[data-theme="E"] .tile-num { font-family: 'Shrikhand', serif; font-size: 1.35rem; width: 54px; }
:root[data-theme="E"] .tile:not(.open) .tile-num { color: #8C5A3A; }
:root[data-theme="E"] .tile:not(.open) .tile-center::after { height: 6px; }
:root[data-theme="E"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.35rem; }
:root[data-theme="E"] .tile.open .tile-pts { color: #2B1810; text-shadow: none; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.6rem; box-shadow: none; padding-right: 24px; }
/* Wie im Entwurf: die Balken wechseln reihum zwischen Senf und Orange. */
:root[data-theme="E"] .answers .tile:nth-child(even).open .tile-inner { background: #E8622C; }
:root[data-theme="E"] .tile.missed .tile-inner { background: #6E2C12 !important; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25) !important; color: #F6E7CB; }

/* Finale */
:root[data-theme="E"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner, .elim-team) { font-family: 'Shrikhand', serif; font-weight: 400; color: #F6E7CB; letter-spacing: 0; text-shadow: 4px 4px 0 #E8622C, 8px 8px 0 #8C3A1A; }
:root[data-theme="E"] :is(.finale-team-label, .finale-q-info) { font-family: 'DM Sans', sans-serif; letter-spacing: .5px; text-transform: none; color: #F2B33D; }
:root[data-theme="E"] :is(.finale-score-card, .finale-reveal-team) { background: #2E1A10; border: 0; border-radius: 28px; box-shadow: inset 0 0 0 3px #5A3622; }
:root[data-theme="E"] .finale-score-card.active { background: #2E1A10; box-shadow: inset 0 0 0 4px #F2B33D; }
:root[data-theme="E"] :is(.finale-score-pts, .finale-reveal-pts, .finale-timer) { font-family: 'Shrikhand', serif; color: #F2B33D; text-shadow: 3px 3px 0 #8C3A1A; }
:root[data-theme="E"] :is(.finale-score-name, .finale-reveal-name) { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: .5px; text-transform: none; }
:root[data-theme="E"] .finale-big-q { font-family: 'Shrikhand', serif; text-shadow: 3px 3px 0 #8C3A1A; }

/* ── Jeopardy: Faecher in den drei Farben, flach ──────────────────────── */
:root[data-theme="E"] .jeopardy-board { gap: 8px; padding: 22px; border-radius: 26px; }
:root[data-theme="E"] .jeopardy-cat { border-bottom: 4px solid #E8622C; border-radius: 0; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #F6E7CB; }
:root[data-theme="E"] .jeopardy-cell { border-radius: 14px; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.8rem; color: #2B1810; text-shadow: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(0,0,0,.3); }
:root[data-theme="E"] .jeopardy-cell:nth-child(5n+1) { background: #F2B33D; }
:root[data-theme="E"] .jeopardy-cell:nth-child(5n+2) { background: #E8622C; }
:root[data-theme="E"] .jeopardy-cell:nth-child(5n+3) { background: #8C3A1A; color: #F6E7CB; }
:root[data-theme="E"] .jeopardy-cell:nth-child(5n+4) { background: #F6E7CB; }
:root[data-theme="E"] .jeopardy-cell:nth-child(5n)   { background: #E8622C; }
:root[data-theme="E"] .jeopardy-cell:hover:not(.used) { transform: translateY(-3px); }
:root[data-theme="E"] .jeopardy-cell.used { background: #2A170D; color: transparent; box-shadow: inset 0 3px 0 rgba(0,0,0,.35); }
:root[data-theme="E"] .jeopardy-clue-cat { font-family: 'DM Sans', sans-serif; letter-spacing: 1px; text-transform: none; color: #F2B33D; font-size: .95rem; }
:root[data-theme="E"] .jeopardy-clue-pts { font-family: 'Shrikhand', serif; color: #F2B33D; text-shadow: 4px 4px 0 #E8622C, 8px 8px 0 #8C3A1A; letter-spacing: 0; }
:root[data-theme="E"] .jeopardy-clue-text { font-family: 'Shrikhand', serif; line-height: 1.2; }
:root[data-theme="E"] .jeopardy-clue-img { border-radius: 26px; border: 0; box-shadow: var(--e-ringe); }

/* ── Wer wird Millionaer: Punktbogen oben, Pillen mit Senfrand ────────── */
:root[data-theme="E"] .wwm-wrap { flex-direction: column; gap: 10px; }
:root[data-theme="E"] .wwm-ladder { order: -1; width: 100%; flex-direction: row; align-items: flex-start; gap: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
:root[data-theme="E"] .wwm-rung {
  flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;
  padding: 0; border-radius: 0; background: none; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: 0;
  color: #8C5A3A; white-space: nowrap;
}
:root[data-theme="E"] .wwm-rung::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #3D2417; box-shadow: inset 0 0 0 2px #5A3622; }
:root[data-theme="E"] .wwm-rung .wwm-lvl { display: none; }
/* Der Bogen: Mitte oben, Enden unten - wie die Punkte im Entwurf. */
:root[data-theme="E"] .wwm-rung:nth-child(1), :root[data-theme="E"] .wwm-rung:nth-child(15) { margin-top: 30px; }
:root[data-theme="E"] .wwm-rung:nth-child(2), :root[data-theme="E"] .wwm-rung:nth-child(14) { margin-top: 22px; }
:root[data-theme="E"] .wwm-rung:nth-child(3), :root[data-theme="E"] .wwm-rung:nth-child(13) { margin-top: 15px; }
:root[data-theme="E"] .wwm-rung:nth-child(4), :root[data-theme="E"] .wwm-rung:nth-child(12) { margin-top: 10px; }
:root[data-theme="E"] .wwm-rung:nth-child(5), :root[data-theme="E"] .wwm-rung:nth-child(11) { margin-top: 5px; }
:root[data-theme="E"] .wwm-rung:nth-child(6), :root[data-theme="E"] .wwm-rung:nth-child(10) { margin-top: 2px; }
:root[data-theme="E"] .wwm-rung.won { color: #CDB898; }
:root[data-theme="E"] .wwm-rung.won::before { background: #E8622C; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
:root[data-theme="E"] .wwm-rung.safe::before { box-shadow: inset 0 0 0 2px #F6E7CB; }
:root[data-theme="E"] .wwm-rung.safe .wwm-amt { color: #F6E7CB; }
:root[data-theme="E"] .wwm-rung.current { background: none; color: #F2B33D; font-size: .75rem; }
:root[data-theme="E"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #F2B33D; }
:root[data-theme="E"] .wwm-rung.current::before { width: 24px; height: 24px; margin-top: -4px; background: #F2B33D; box-shadow: 0 0 0 3px #2B1810, 0 0 0 5px #E8622C; }
:root[data-theme="E"] .wwm-q { color: #F6E7CB; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.9rem; line-height: 1.15; text-shadow: 3px 3px 0 #8C3A1A; }
:root[data-theme="E"] .wwm-answers { gap: 14px; }
:root[data-theme="E"] .wwm-opt { justify-content: center; flex-direction: column; gap: 0; padding: 10px 18px; min-height: 64px; background: #3D2417; box-shadow: inset 0 0 0 4px #F2B33D, inset 0 -6px 0 rgba(0,0,0,.2), 0 6px 0 rgba(0,0,0,.28); color: #F6E7CB; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
:root[data-theme="E"] .wwm-opt:hover { filter: none; background: #4A2C1B; }
:root[data-theme="E"] .wwm-opt .wwm-letter { color: #E8622C; font-family: 'Shrikhand', serif; font-size: 1.15rem; min-width: 0; }
:root[data-theme="E"] .wwm-opt.selected { background: #F2B33D; color: #2B1810; }
:root[data-theme="E"] .wwm-opt.selected .wwm-letter { color: #8C3A1A; }
:root[data-theme="E"] .wwm-opt.correct { background: #8FA63A; color: #1C2208; box-shadow: inset 0 0 0 4px #F6E7CB, inset 0 -6px 0 rgba(0,0,0,.2), 0 6px 0 rgba(0,0,0,.28); }
:root[data-theme="E"] .wwm-opt.correct .wwm-letter { color: #1C2208; }
:root[data-theme="E"] .wwm-opt.wrong { background: #8C3A1A; color: #F6E7CB; }
/* Joker als Pillen mit Wort, verbrauchte durchgestrichen. */
:root[data-theme="E"] .wwm-lifelines { gap: 10px; }
:root[data-theme="E"] .wwm-ll { width: auto; height: auto; padding: 5px 14px; border-radius: 999px; border: 2px solid #F2B33D; background: none; font-size: 0; }
:root[data-theme="E"] .wwm-ll::before { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .82rem; color: #F6E7CB; }
:root[data-theme="E"] .wwm-ll:nth-child(1)::before { content: '50:50'; }
:root[data-theme="E"] .wwm-ll:nth-child(2)::before { content: 'Telefon'; }
:root[data-theme="E"] .wwm-ll:nth-child(3)::before { content: 'Publikum'; }
:root[data-theme="E"] .wwm-ll.used { opacity: .45; border-color: #5A3622; }
:root[data-theme="E"] .wwm-ll.used::before { text-decoration: line-through; }
:root[data-theme="E"] :is(.wwm-abar, .wwds-abar) { background: #E8622C; border-radius: 999px 999px 0 0; box-shadow: inset 6px 0 0 #F2B33D; }
:root[data-theme="E"] :is(.wwm-apct, .wa-pct) { color: #F2B33D; font-family: 'Shrikhand', serif; font-weight: 400; }

/* ── Wer weiss denn sowas ─────────────────────────────────────────────── */
:root[data-theme="E"] .wwds-cat { border-radius: 22px; }
:root[data-theme="E"] .wwds-cat:hover:not(.done) { transform: translateY(-3px); filter: none; }
:root[data-theme="E"] .wwds-cat .wc-num { font-family: 'Shrikhand', serif; color: #E8622C; }
:root[data-theme="E"] .wwds-cat .wc-name { font-family: 'DM Sans', sans-serif; font-weight: 700; text-transform: none; font-size: .95rem; letter-spacing: 0; }
:root[data-theme="E"] .wwds-q { background: #2E1A10; border: 0; border-radius: 28px; box-shadow: inset 0 0 0 4px #F2B33D; font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
:root[data-theme="E"] .wwds-cat-chip { border-radius: 999px; background: #F2B33D; color: #2B1810; border: 0; font-family: 'DM Sans', sans-serif; letter-spacing: .5px; text-transform: none; font-size: .8rem; }
:root[data-theme="E"] .wwds-opt { background: #3D2417; box-shadow: inset 0 0 0 4px #F2B33D, 0 5px 0 rgba(0,0,0,.28); font-size: 1.15rem; }
:root[data-theme="E"] .wwds-opt .wo-let { font-family: 'Shrikhand', serif; color: #E8622C; }
:root[data-theme="E"] .wwds-opt.bad { background: #8C3A1A; color: #F6E7CB; }
:root[data-theme="E"] .wwds-guess { border-radius: 999px; background: #2E1A10; border: 2px dashed #F2B33D; font-family: 'Shrikhand', serif; }
:root[data-theme="E"] .wwds-timer { font-family: 'Shrikhand', serif; text-shadow: 3px 3px 0 #8C3A1A; }

/* ── Der Duemmste fliegt: Karten mit Orangerand, Leben als Punkte ─────── */
:root[data-theme="E"] .ddf-player { border-radius: 22px; border: 0; background: #2E1A10; box-shadow: inset 0 0 0 3px #E8622C, 0 5px 0 rgba(0,0,0,.28); }
:root[data-theme="E"] .ddf-player-name { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.15rem; }
:root[data-theme="E"] .ddf-player.picked { border: 0; background: #F2B33D; color: #2B1810; box-shadow: inset 0 0 0 3px #F6E7CB, 0 5px 0 rgba(0,0,0,.28); }
:root[data-theme="E"] .ddf-heart { font-size: 0; margin-right: 5px; vertical-align: middle; }
:root[data-theme="E"] .ddf-heart::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #F2B33D; }
:root[data-theme="E"] .ddf-player.picked .ddf-heart::before { background: #8C3A1A; }
:root[data-theme="E"] .ddf-heart.empty::before { background: #5A3622; }
:root[data-theme="E"] .ddf-question { font-family: 'Shrikhand', serif; font-weight: 400; text-shadow: 3px 3px 0 #8C3A1A; }
:root[data-theme="E"] .ddf-answer { color: #B5C95A; font-family: 'Shrikhand', serif; font-weight: 400; }

/* ── Der Preis ist heiss: Preis im Ringschild, Gebote gestrichelt ─────── */
:root[data-theme="E"] .pih-scores { border-bottom-color: #5A3622; }
:root[data-theme="E"] .pih-score { background: #2E1A10; border: 2px dashed #F2B33D; box-shadow: none; }
:root[data-theme="E"] .pih-score.lead { background: #F2B33D; border-style: solid; color: #2B1810; --accent-text: #8C3A1A; }
:root[data-theme="E"] .pih-score.lead .pih-rank { color: #8C3A1A; }
:root[data-theme="E"] .pih-score.picked { box-shadow: 0 0 0 3px #E8622C; }
:root[data-theme="E"] .pih-score-pts { font-family: 'Shrikhand', serif; font-weight: 400; }
:root[data-theme="E"] .pih-team { border-radius: 999px; }
:root[data-theme="E"] .pih-team-pts { font-family: 'Shrikhand', serif; }
:root[data-theme="E"] .pih-item { font-family: 'Shrikhand', serif; font-weight: 400; color: #F2B33D; text-shadow: 2px 2px 0 #8C3A1A; }
:root[data-theme="E"] .pih-stage :is(img, video) { border-radius: 22px; box-shadow: 0 0 0 4px #F2B33D; }
:root[data-theme="E"] .pih-price {
  display: table; margin: 12px auto 8px; padding: 6px 30px; border-radius: 999px; background: #2B1810;
  font-family: 'Shrikhand', serif; font-weight: 400; color: #F6E7CB; text-shadow: 3px 3px 0 #E8622C; box-shadow: var(--e-ringe);
}
:root[data-theme="E"] .pih-price:empty { display: none; }
:root[data-theme="E"] .pih-bid-row { border-radius: 999px; background: #2E1A10; border: 2px dashed #F2B33D; box-shadow: none; padding-inline: 18px; }
:root[data-theme="E"] .pih-bid-row.win { background: #F2B33D; border-style: solid; color: #2B1810; }
:root[data-theme="E"] .pih-bid-val { font-family: 'Shrikhand', serif; font-weight: 400; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="E"] .tp-team { border: 0; border-radius: 28px; background: #2E1A10; box-shadow: inset 0 0 0 3px #5A3622; }
:root[data-theme="E"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 0 0 4px var(--tc); }
:root[data-theme="E"] .tp-team.turn { transform: translateY(-4px); background: #2E1A10; box-shadow: inset 0 0 0 4px var(--tc, #F2B33D), inset 0 0 0 8px #2E1A10, inset 0 0 0 11px #F2B33D; }
:root[data-theme="E"] .tp-team-name { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.15rem; }
:root[data-theme="E"] .tp-team-sub { text-transform: none; letter-spacing: .5px; }
:root[data-theme="E"] .tp-stage { border: 0; border-radius: 30px; box-shadow: inset 0 0 0 4px #F2B33D; background: #2E1A10; }
:root[data-theme="E"] .tp-catchip { font-family: 'DM Sans', sans-serif; font-weight: 700; }
:root[data-theme="E"] .tp-question { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.55rem; line-height: 1.2; }
:root[data-theme="E"] .tp-answer { border: 0; border-radius: 999px; padding-inline: 20px; }
:root[data-theme="E"] .tp-answer.hidden { border: 2px dashed rgba(242,179,61,.45); background: none; }
:root[data-theme="E"] .tp-wheel-rotor { box-shadow: var(--e-ringe), 0 18px 30px rgba(0,0,0,.45); }
:root[data-theme="E"] .tp-wheel-hub { background: #2B1810; border: 4px solid #F2B33D; box-shadow: none; font-family: 'Shrikhand', serif; }
:root[data-theme="E"] .tp-wheel-pointer { border-top-color: #F6E7CB; filter: drop-shadow(0 3px 0 #8C3A1A); }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="E"] .winner-text { font-size: 3rem; }
:root[data-theme="E"] .result-card { border: 0; border-radius: 34px; background: #2E1A10; box-shadow: var(--e-ringe); backdrop-filter: none; margin: 12px; }
:root[data-theme="E"] .result-scores strong { font-family: 'Shrikhand', serif; color: #F2B33D; }
:root[data-theme="E"] .tour-bar { height: 12px; background: #2E1A10; box-shadow: inset 0 0 0 2px #5A3622; }
:root[data-theme="E"] .tour-bar-fill { background: #F2B33D; box-shadow: inset 0 -3px 0 #E8622C; }
:root[data-theme="E"] .tour-total { font-family: 'Shrikhand', serif; }
:root[data-theme="E"] .q-list-item { border-radius: 999px; }
:root[data-theme="E"] .q-list-item.tour-lead { background: rgba(242,179,61,.12); box-shadow: inset 0 0 0 2px #F2B33D; }

/* ── Host: Menue, Knoepfe, Kaesten ────────────────────────────────────── */
:root[data-theme="E"] .menu-card { border-radius: 24px; border: 0; background: #2E1A10; box-shadow: inset 0 0 0 3px #F2B33D, 0 5px 0 rgba(0,0,0,.3); }
:root[data-theme="E"] .menu-card::before { display: none; }
:root[data-theme="E"] .menu-card:hover { transform: translateY(-4px); border: 0; background: #3D2417; box-shadow: inset 0 0 0 3px #F2B33D, inset 0 0 0 7px #2E1A10, inset 0 0 0 10px #E8622C, 0 8px 0 rgba(0,0,0,.3); }
:root[data-theme="E"] .menu-card-title { font-family: 'Shrikhand', serif; font-weight: 400; font-size: 1.1rem; color: #F2B33D; letter-spacing: 0; }
:root[data-theme="E"] .menu-pill { border: 2px solid #F2B33D; color: #F6E7CB; }
:root[data-theme="E"] :is(.menu-pill:hover, .menu-pill.active) { background: #F2B33D; color: #2B1810; border-color: #F2B33D; }
:root[data-theme="E"] .menu-divider { width: 120px; height: 12px; background: linear-gradient(#F2B33D 0 4px, #E8622C 4px 8px, #8C3A1A 8px 12px); border-radius: 6px; }
:root[data-theme="E"] .btn { border-radius: 999px; text-transform: none; letter-spacing: .5px; font-size: .95rem; }
:root[data-theme="E"] .btn:hover { transform: translateY(-2px); }
:root[data-theme="E"] .btn-primary { background: #F2B33D; color: #2B1810; box-shadow: 0 4px 0 #8C3A1A; }
:root[data-theme="E"] .btn-primary:hover { box-shadow: 0 6px 0 #8C3A1A; }
:root[data-theme="E"] .btn-primary::after { display: none; }
:root[data-theme="E"] .btn-secondary { background: transparent; border: 2px solid #F6E7CB; color: #F6E7CB; backdrop-filter: none; }
:root[data-theme="E"] .btn-danger { background: #E8622C; color: #2B1810; box-shadow: 0 4px 0 #8C3A1A; }
:root[data-theme="E"] .btn-accent { background: #3B82F6; box-shadow: 0 4px 0 #1E3A8A; }
:root[data-theme="E"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 24px; background: #2E1A10; border: 2px solid #5A3622; }
:root[data-theme="E"] .pr-team-btn { border-radius: 999px; }
:root[data-theme="E"] .page-title { font-family: 'Shrikhand', serif; font-weight: 400; text-shadow: 3px 3px 0 #8C3A1A; }

/* Niedriges Fenster (Beamer 1280x720): Plaketten, Bogen und Ringschild
   flacher - sonst lagen Feud mit langer Frage 23 px, PIH 36 px, Ergebnis
   16 px und WWM mit Publikum 10 px unter dem Bild. */
@media (max-height: 900px) {
  :root[data-theme="E"] :is(.scoreboard, .jeopardy-scores) { padding: 2px 6px; }
  :root[data-theme="E"] .team-panel { padding-block: 10px; }
  :root[data-theme="E"] .team-panel.active-team { padding-block: 10px; }
  :root[data-theme="E"] .team-panel .t-score { font-size: 2.5rem; }
  :root[data-theme="E"] .board { padding: 22px 26px; }
  :root[data-theme="E"] .q-text { font-size: 1.4rem; padding-bottom: 12px; }
  :root[data-theme="E"] .wwm-rung:nth-child(1), :root[data-theme="E"] .wwm-rung:nth-child(15) { margin-top: 16px; }
  :root[data-theme="E"] .wwm-rung:nth-child(2), :root[data-theme="E"] .wwm-rung:nth-child(14) { margin-top: 12px; }
  :root[data-theme="E"] .wwm-rung:nth-child(3), :root[data-theme="E"] .wwm-rung:nth-child(13) { margin-top: 8px; }
  :root[data-theme="E"] .wwm-rung:nth-child(4), :root[data-theme="E"] .wwm-rung:nth-child(12) { margin-top: 5px; }
  :root[data-theme="E"] .wwm-rung:nth-child(5), :root[data-theme="E"] .wwm-rung:nth-child(11) { margin-top: 3px; }
  :root[data-theme="E"] .wwm-rung:nth-child(6), :root[data-theme="E"] .wwm-rung:nth-child(10) { margin-top: 1px; }
  :root[data-theme="E"] .wwm-q { font-size: 1.6rem; }
  :root[data-theme="E"] .pih-price { margin: 4px auto 2px; padding: 0 26px; font-size: 1.9rem; }
  :root[data-theme="E"] .pih-score { padding-block: 3px; }
  :root[data-theme="E"] .pih-bid-row { padding-block: 3px; }
  :root[data-theme="E"] .result-card { margin: 4px; padding: 18px 36px; }
  :root[data-theme="E"] .winner-text { font-size: 2.5rem; }
}

/* Der Balken rollt herunter wie eine Jalousie und federt nach. */
@keyframes thERollo {
  0%   { transform: scaleY(.08); filter: brightness(1.7) saturate(1.3); }
  60%  { transform: scaleY(1.12); filter: brightness(1.15); }
  100% { transform: scaleY(1); filter: none; }
}

/* ══ E · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war E eine 70er-Farbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, Teamplaketten quer darueber,
   darunter ein schmales Brett, der Rest Kakaobraun.
   Der Entwurf ist eine Samstagabend-Buehne: die Buehne fuellt das Bild, und
   die Mitspieler stehen davor - als runde Plaketten in einer Reihe am
   unteren Rand, wie Pulte vor der Kulisse. Die Sonnenstrahlen kommen von
   unten, also stehen die Plaketten genau dort, wo das Licht herkommt.
   Grundsatz: eine Flaeche, nicht drei Stapel. Laut ist die Frage; die
   Plaketten sind klein und gleich gross, Senf nur dort, wer am Zug ist.
   Markup und JavaScript sind nicht angefasst. */
:root[data-theme="E"] { --e-breit: min(1180px, 94vw); }

/* Der Screen fuellt den Rest des Fensters, damit die Buehne bis zu den
   Plaketten reicht. `flex: 1 0 auto`: wachsen ja, schrumpfen nie - sonst
   wuerde ein langer Screen gestaucht und liefe aus dem Beamerbild. */
:root[data-theme="E"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto;
}
/* Das Logo ist die Titelkarte: kleiner und dichter ueber der Buehne. */
:root[data-theme="E"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  margin: 16px 0 6px; }
:root[data-theme="E"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 240px; max-height: 76px; }

/* ── Die Plakettenreihe unten: gleich breite runde Schilder ── */
:root[data-theme="E"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #tp-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores, .tp-top) {
  width: 100%; max-width: none; margin: 14px 0 0; padding: 6px 0 0; justify-content: center; gap: 26px;
}
:root[data-theme="E"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):is(.red, .blue, .green) {
  flex: 0 1 300px; padding: 10px 20px;
}
:root[data-theme="E"] #game-screen .team-panel .t-score { font-size: clamp(1.9rem, 5.2vh, 2.6rem); }
:root[data-theme="E"] #game-screen .team-strikes { margin-top: 4px; }
:root[data-theme="E"] #game-screen .strike-pip { width: 22px; height: 22px; font-size: .72rem; }

/* ── Feud: Frage und Liste fuellen die Buehne, Plaketten davor ── */
:root[data-theme="E"] #game-screen.active {
  display: grid; width: 100%; max-width: var(--e-breit); padding-top: 0;
  grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="E"] #game-screen .round-bar { grid-area: kick; justify-content: center; padding: 2px 0 10px; }
:root[data-theme="E"] #game-screen .scoreboard { grid-area: teams; }
:root[data-theme="E"] #game-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="E"] #game-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="E"] #game-screen .tile { min-height: clamp(42px, 8.5vh, 70px); }
:root[data-theme="E"] #game-screen .q-text { font-size: clamp(1.3rem, 2.4vw + .4vh, 2.1rem); line-height: 1.15; }

/* ── Jeopardy: das Faecherbrett fuellt die Buehne ── */
:root[data-theme="E"] #jeopardy-screen.active {
  display: grid; width: 100%; max-width: var(--e-breit); padding-top: 0;
  grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="E"] #jeopardy-screen .round-bar { grid-area: kick; justify-content: center; padding: 2px 0 10px; }
:root[data-theme="E"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; }
:root[data-theme="E"] #jeopardy-screen .jeopardy-scores { grid-area: teams; }
:root[data-theme="E"] #jeopardy-screen .jeopardy-cell { font-size: clamp(1.4rem, 4vh, 2rem); }

/* Jeopardy-Frage: Kategorie als Pille oben, Betrag im Ringschild rechts,
   die Frage in Shrikhand ueber die Buehne - keine Karte in der Mitte. */
:root[data-theme="E"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  padding: 8vh max(4vw, (100vw - var(--e-breit)) / 2); column-gap: 36px; row-gap: 0;
}
:root[data-theme="E"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="E"] .jeopardy-clue-cat {
  grid-area: cat; align-self: center; justify-self: start; padding: 7px 22px; border-radius: 999px;
  background: #E8622C; color: #F6E7CB;
}
:root[data-theme="E"] .jeopardy-clue-pts {
  grid-area: pts; align-self: center; justify-self: end; padding: 10px 26px; border-radius: 999px;
  background: #2E1A10; box-shadow: var(--e-ringe);
}
:root[data-theme="E"] .jeopardy-clue-text {
  grid-area: frage; max-width: none; text-align: left; margin-top: 44px;
  font-size: clamp(2rem, 3.6vw + .8vh, 3.6rem); line-height: 1.1;
}
:root[data-theme="E"] .jeopardy-clue-blank { grid-area: frage; justify-self: start; margin-top: 44px; border-radius: 999px; }
:root[data-theme="E"] .jeopardy-answer-text { grid-area: antwort; justify-self: start; text-align: left; margin-top: 28px; border-radius: 999px; }

/* ── WWM: Punktbogen oben, Frage als Band, Karten fuellen die Buehne ── */
:root[data-theme="E"] #wwm-screen.active { width: 100%; max-width: var(--e-breit); padding-top: 0; }
:root[data-theme="E"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="E"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="E"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="E"] #wwm-screen .wwm-opt { min-height: clamp(58px, 11vh, 88px); }
:root[data-theme="E"] #wwm-screen .wwm-q { font-size: clamp(1.4rem, 2.6vw + .5vh, 2.2rem); }

/* ── WWDS: Buehne fuellt, Plaketten davor ── */
:root[data-theme="E"] #wwds-screen.active {
  display: grid; width: 100%; max-width: var(--e-breit); padding-top: 0;
  grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="E"] #wwds-screen .round-bar { grid-area: kick; justify-content: center; padding: 2px 0 10px; }
:root[data-theme="E"] #wwds-screen .wwds-top { grid-area: teams; flex-wrap: nowrap; }
:root[data-theme="E"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="E"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="E"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="E"] #wwds-screen .wwds-cat { min-height: clamp(48px, 9vh, 80px); }
:root[data-theme="E"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="E"] #wwds-screen .wwds-opt { min-height: clamp(46px, 8.5vh, 74px); }
/* Mit Publikumsjoker kommt ein Balkenbild dazu - ohne flachere Antworten
   stand WWDS 50 px unter dem Beamerbild. */
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .wwds-opt { min-height: clamp(38px, 6vh, 52px); }
:root[data-theme="E"] #wwds-screen .wwds-aud { height: clamp(62px, 11vh, 84px); }
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .wwds-q { padding-block: 6px; margin-bottom: 8px !important; }
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .wwds-opts { gap: 6px; }
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .scoreboard,
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .wwds-top { margin-top: 8px; }
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .board { padding: 16px 22px; }
:root[data-theme="E"] #wwds-screen:has(.wwds-aud) .wwds-team { padding-block: 6px; }
:root[data-theme="E"] #wwds-screen .wwds-team .wt-money { font-size: clamp(1.3rem, 3.6vh, 1.8rem); }

/* ── DDF: Kandidaten als Plakettenreihe unten, Frage auf der Buehne ──
   Der innere Wrapper traegt inline `height:100%` - zirkulaer, sobald der
   Screen mit dem Inhalt waechst. Daher `height:auto` plus `flex:1`. */
:root[data-theme="E"] #ddf-screen.active { width: 100%; max-width: var(--e-breit); padding-top: 0; }
:root[data-theme="E"] #ddf-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "kick" "uhr" "frage" "media" "antwort" "note" "vote" "spieler";
  grid-template-rows: auto auto 1fr auto auto auto auto auto;
}
:root[data-theme="E"] #ddf-screen .ddf-alive { grid-area: kick; margin: 0 0 4px; }
:root[data-theme="E"] #ddf-timer { grid-area: uhr; font-family: 'Shrikhand', serif; font-weight: 400 !important; color: #F2B33D; }
:root[data-theme="E"] #ddf-screen .ddf-question { grid-area: frage; display: flex; align-items: center; justify-content: center; }
:root[data-theme="E"] #ddf-screen .ddf-media-bar { grid-area: media; }
:root[data-theme="E"] #ddf-screen .ddf-answer { grid-area: antwort; }
:root[data-theme="E"] #ddf-screen .ddf-note { grid-area: note; }
:root[data-theme="E"] #ddf-screen .ddf-vote-grid { grid-area: vote; }
:root[data-theme="E"] #ddf-screen .ddf-players { grid-area: spieler; max-width: none; margin: 14px 0 0; }

/* ── PIH: Rangliste als Plakettenreihe unten, Artikel und Preis auf der Buehne ── */
:root[data-theme="E"] #pih-screen.active { width: 100%; max-width: var(--e-breit); padding-top: 0; }
:root[data-theme="E"] #pih-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "teams" "uhr" "artikel" "bild" "media" "preis" "note" "gebote" "rang";
  grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
}
:root[data-theme="E"] #pih-teams { grid-area: teams; }
:root[data-theme="E"] #pih-timer { grid-area: uhr; font-family: 'Shrikhand', serif; font-weight: 400 !important; color: #F2B33D; }
:root[data-theme="E"] #pih-screen .pih-item { grid-area: artikel; }
:root[data-theme="E"] #pih-screen .pih-stage { grid-area: bild; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* Ohne Deckel schiebt das Produktfoto die Rangliste aus dem Beamerbild. */
:root[data-theme="E"] #pih-screen .pih-stage :is(img, video) { max-height: min(24vh, 200px); width: auto; }
/* Acht Mitspieler ergeben zwei Reihen Plaketten; ohne diese Straffung stand
   PIH 49 px unter dem Beamerbild. */
:root[data-theme="E"] #pih-screen .pih-scores { gap: 6px; }
:root[data-theme="E"] #pih-screen .pih-score { padding: 3px 12px; gap: 7px; }
:root[data-theme="E"] #pih-screen .pih-score .pmini-av { width: 22px; height: 22px; font-size: .8rem; }
:root[data-theme="E"] #pih-screen .pih-bid-row { padding-block: 3px; }
:root[data-theme="E"] #pih-screen .pih-media-bar { grid-area: media; }
:root[data-theme="E"] #pih-screen .pih-price { grid-area: preis; }
:root[data-theme="E"] #pih-screen .pih-note { grid-area: note; }
:root[data-theme="E"] #pih-screen .pih-bid-grid { grid-area: gebote; }
:root[data-theme="E"] #pih-screen .pih-scores { grid-area: rang; max-width: none; margin-top: 10px; }

/* ── TP: Rad und Frage auf der Buehne, Teams als Plaketten davor ── */
:root[data-theme="E"] #tp-screen.active {
  display: grid; width: 100%; max-width: var(--e-breit); padding-top: 0;
  grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="E"] #tp-screen .round-bar { grid-area: kick; justify-content: center; padding: 2px 0 10px; }
:root[data-theme="E"] #tp-screen .tp-top { grid-area: teams; flex-wrap: nowrap; }
:root[data-theme="E"] #tp-screen .tp-team:is(.red, .blue, .green) {
  flex: 0 1 300px; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 10px 20px;
}
:root[data-theme="E"] #tp-screen .tp-team .tp-pie { width: 52px; height: 52px; flex: none; margin: 0; }
:root[data-theme="E"] #tp-screen .tp-board { grid-area: board; align-self: center; width: 100%; justify-content: center; }

/* ── Feud-Finale: Frage und Liste auf der Buehne, Stand als Plaketten davor ── */
:root[data-theme="E"] #finale-screen.active {
  display: grid; width: 100%; max-width: var(--e-breit); padding-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf uhr" "board board" "vergleich vergleich" "stand stand";
  grid-template-rows: auto 1fr auto auto; column-gap: 28px; row-gap: 0;
}
:root[data-theme="E"] #finale-screen .finale-header { grid-area: kopf; align-self: center; display: flex; align-items: baseline; gap: 16px; text-align: left; }
:root[data-theme="E"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; }
:root[data-theme="E"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 10px; }
:root[data-theme="E"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="E"] #finale-screen .finale-big-q { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Von js/feud.js erzeugt - ohne eigene Flaeche landet es per
   Auto-Platzierung oben rechts im Raster. */
:root[data-theme="E"] #finale-reveal-comparison { grid-area: vergleich; justify-content: center; margin-top: 12px; }
:root[data-theme="E"] #finale-screen .finale-scores { grid-area: stand; justify-content: center; gap: 26px; margin-top: 14px; }

/* ── Ergebnis: Titelkarte im Ringschild ──
   Mittig bleibt richtig - am Ende der Sendung steht der Sieger in der
   Bildmitte. Veredelt ueber das Ringschild, nicht ueber Umbau. */
:root[data-theme="E"] #result-screen.active { width: 100%; max-width: min(860px, 92vw); }
:root[data-theme="E"] #result-screen .result-card { width: 100%; border-radius: 36px; box-shadow: var(--e-ringe); }

/* ── Menue: Programm des Samstagabends ──
   Statt eines 720-px-Blocks in der Mitte vier Spalten ueber die volle
   Breite. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="E"] #menu-screen.active { width: 100%; max-width: var(--e-breit); }
:root[data-theme="E"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* ── F · Comic: Panels mit schwarzen Stegen, Rasterpunkte, Sternblitz ── */
:root[data-theme="F"] {
  --brd-surface: #FFFFFF;
  --brd-tex: radial-gradient(rgba(0,0,0,.1) 1.6px, transparent 2px) 0 0 / 10px 10px;
  --brd-frame: 0 0 0 5px #111111, 9px 9px 0 5px #111111;
  --brd-well: #111111;
  --brd-inner: transparent;
  --brd-radius: 0;
  --brd-fg: #111111;
  --tile: #E8E8E8;
  --tile-hover: #F4F4F4;
  --tile-tex: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px;
  --tile-edge: 0 0 0 4px #111111;
  --tile-fg: #111111;
  --tile-head: #111111;
  --tile-head-fg: #FFFFFF;
  --tile-used: #E8E8E8;
  --tile-num: #111111;
  --tile-num-glow: none;
  --tile-dim-fg: rgba(0,0,0,.35);
  --tile-bar: transparent;
  --tile-rule: #111111;
  --tile-open: #7CC4FF;
  --tile-open-edge: 0 0 0 4px #111111;
  --tile-open-fg: #111111;
  --tile-open-dim: #111111;
  --tile-pts-bg: #FF9C8F;
  --tile-pts-rule: transparent;
  --tile-pick: #FFE600;
  --tile-pick-fg: #111111;
  --tile-right: #7EE3A1;
  --tile-right-fg: #111111;
  --tile-radius: 0;
  --tile-font: 'Bangers', cursive;
  --tile-reveal: thFPow .45s cubic-bezier(.3,1.7,.5,1);
}
:root[data-theme="F"] .board { padding: 14px; }
:root[data-theme="F"] .answers { gap: 10px; }
:root[data-theme="F"] .answers.split { row-gap: 10px; column-gap: 10px; }
:root[data-theme="F"] .tile, :root[data-theme="F"] .tile-inner { overflow: visible; }
/* Die Frage ist das gelbe Erzaehl-Panel oben links im Entwurf. */
:root[data-theme="F"] .q-text {
  margin-bottom: 14px; border-radius: 0; color: #111111; box-shadow: 0 0 0 4px #111111;
  background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #FFE600;
  font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.6rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1;
}
:root[data-theme="F"] .q-text.hidden-q { border: 0; }
:root[data-theme="F"] .tile-num { font-family: 'Bangers', cursive; color: #111; }
:root[data-theme="F"] .tile.open .tile-answer { font-size: 1.45rem; font-weight: 400; letter-spacing: 1px; }
/* Punkte im Sternblitz wie im Entwurf. */
:root[data-theme="F"] .tile.open .tile-pts {
  color: #111; text-shadow: none; font-family: 'Bangers', cursive; font-size: 1.6rem; min-width: 74px;
  clip-path: polygon(50% 0,58% 18%,78% 4%,74% 26%,98% 22%,84% 44%,100% 60%,78% 66%,86% 92%,62% 78%,50% 100%,40% 80%,14% 94%,22% 68%,0 60%,16% 44%,2% 22%,26% 26%,22% 4%,42% 18%);
}
:root[data-theme="F"] .jeopardy-board { gap: 6px; padding: 6px; }
:root[data-theme="F"] .jeopardy-cat { font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.05rem; letter-spacing: 1px; }
:root[data-theme="F"] .jeopardy-cell {
  background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #FFE600;
  font-family: 'Bangers', cursive; font-size: 2.3rem;
}
:root[data-theme="F"] .jeopardy-cell:hover:not(.used) { background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #FFF27A; }
:root[data-theme="F"] .jeopardy-cell.used { background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #E8E8E8; }
:root[data-theme="F"] .jeopardy-cell.used::after { content: '✕'; color: rgba(0,0,0,.2); font-size: 2rem; }
:root[data-theme="F"] .wwm-q {
  background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #FFFFFF;
  border: 5px solid #111; font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.7rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1.15;
}
:root[data-theme="F"] .wwm-opt { background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #7CC4FF; border: 5px solid #111; font-size: 1.4rem; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
:root[data-theme="F"] .wwm-opt.selected { background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #FFE600; }
:root[data-theme="F"] .wwm-opt.correct { background: radial-gradient(rgba(0,0,0,.16) 2.2px, transparent 2.5px) 0 0 / 12px 12px, #7EE3A1; }
:root[data-theme="F"] .wwm-opt .wwm-letter { font-family: 'Bangers', cursive; }
@keyframes thFPow {
  0%   { transform: scale(.2) rotate(-12deg); filter: brightness(2.5); }
  55%  { transform: scale(1.12) rotate(3deg); filter: none; }
  100% { transform: scale(1) rotate(0); }
}

/* ── H · Bauhaus: schwarzes Raster, Primaerfarben, Kreis oeffnet das Feld ── */
:root[data-theme="H"] {
  --brd-surface: #ECEAE4;
  --brd-frame: 0 0 0 3px #141414;
  --brd-well: #141414;
  --brd-inner: transparent;
  --brd-radius: 0;
  --tile: #ECEAE4;
  --tile-hover: #F6F5F1;
  --tile-edge: 0 0 0 1.5px #141414;
  --tile-fg: #141414;
  --tile-head: #ECEAE4;
  --tile-head-fg: #141414;
  --tile-used: #ECEAE4;
  --tile-num: #141414;
  --tile-num-glow: none;
  --tile-dim-fg: rgba(20,20,20,.18);
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: #F2C230;
  --tile-open-edge: 0 0 0 1.5px #141414;
  --tile-open-fg: #141414;
  --tile-open-dim: #141414;
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: #F2C230;
  --tile-pick-fg: #141414;
  --tile-right: #1F4FA3;
  --tile-right-fg: #FFFFFF;
  --tile-radius: 0;
  --tile-font: 'Bricolage Grotesque', sans-serif;
  --tile-reveal: thHKreis .6s cubic-bezier(.6,0,.2,1);
}
:root[data-theme="H"] .board { padding: 3px; }
:root[data-theme="H"] .answers { gap: 3px; }
:root[data-theme="H"] .answers.split { row-gap: 3px; column-gap: 3px; }
:root[data-theme="H"] .q-text { margin-bottom: 3px; border-radius: 0; background: #FFFFFF; color: #141414; justify-content: flex-start; text-align: left; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.15; padding: 16px 18px; }
:root[data-theme="H"] .q-text.hidden-q { border: 0; justify-content: center; }
:root[data-theme="H"] .tile { min-height: clamp(38px, 7vh - 8px, 62px); overflow: visible; }
:root[data-theme="H"] .tile-inner { overflow: visible; }
:root[data-theme="H"] .tile-num { width: 56px; align-items: flex-end; justify-content: flex-start; padding: 0 0 4px 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.4rem; line-height: .9; }
:root[data-theme="H"] .tile.open .tile-num { font-size: .8rem; align-items: flex-start; padding: 6px 0 0 10px; }
:root[data-theme="H"] .tile.open .tile-answer { text-transform: none; letter-spacing: -.3px; font-weight: 800; font-size: 1.35rem; }
:root[data-theme="H"] .tile.open .tile-pts { color: #141414; text-shadow: none; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2rem; }
/* Erste Antwort gelb, die weiteren weiss mit Farbbalken reihum. */
:root[data-theme="H"] .answers .tile:not(:first-child).open .tile-inner { background: #FFFFFF; box-shadow: inset 0 -6px 0 #D7372B, 0 0 0 1.5px #141414; }
:root[data-theme="H"] .answers .tile:nth-child(3n).open .tile-inner { box-shadow: inset 0 -6px 0 #1F4FA3, 0 0 0 1.5px #141414; }
:root[data-theme="H"] .answers .tile:nth-child(3n+1):not(:first-child).open .tile-inner { box-shadow: inset 0 -6px 0 #F2C230, 0 0 0 1.5px #141414; }
:root[data-theme="H"] .jeopardy-board { gap: 3px; padding: 3px; }
:root[data-theme="H"] .jeopardy-cat { justify-content: flex-start; text-align: left; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: .85rem; letter-spacing: 0; text-transform: none; }
:root[data-theme="H"] .jeopardy-cell { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: -1px; }
:root[data-theme="H"] .jeopardy-cell:not(.used):nth-child(4n+1) { background: #D7372B; color: #FFFFFF; }
:root[data-theme="H"] .jeopardy-cell:not(.used):nth-child(4n+2) { background: #F2C230; }
:root[data-theme="H"] .jeopardy-cell:not(.used):nth-child(4n+3) { background: #1F4FA3; color: #FFFFFF; }
:root[data-theme="H"] .jeopardy-cell:not(.used):nth-child(4n)   { background: #FFFFFF; }
:root[data-theme="H"] .jeopardy-cell:hover:not(.used) { transform: none; box-shadow: inset 0 0 0 4px #141414; }
:root[data-theme="H"] .wwm-q { background: #FFFFFF; color: #141414; text-align: left; justify-content: flex-start; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.1; }
:root[data-theme="H"] .wwm-answers { gap: 3px; background: #141414; padding: 3px; }
:root[data-theme="H"] .wwm-opt { background: #FFFFFF; min-height: 74px; font-weight: 800; font-size: 1.25rem; }
:root[data-theme="H"] .wwm-opt .wwm-letter { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: #D7372B; color: transparent; font-size: 0; }
:root[data-theme="H"] .wwm-opt:nth-child(2) .wwm-letter { border-radius: 0; background: #F2C230; }
:root[data-theme="H"] .wwm-opt:nth-child(3) .wwm-letter { border-radius: 0; background: #1F4FA3; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-theme="H"] .wwm-opt:nth-child(4) .wwm-letter { border-radius: 30px 30px 0 0; height: 15px; background: #141414; }
:root[data-theme="H"] .wwm-opt.selected { background: #F2C230; }
:root[data-theme="H"] .wwm-opt.correct { background: #1F4FA3; }
:root[data-theme="H"] .wwm-opt.correct .wwm-letter { background: #FFFFFF; }
@keyframes thHKreis {
  0%   { clip-path: circle(0 at 0 50%); }
  100% { clip-path: circle(150% at 0 50%); }
}

/* ── I · Salon (Rework 2026-10-14): Spieltisch im Casino-Salon ─────────────
   Identitaet aus designs/s/I-*.html: gruener Filz mit Goldkante, Spielkarten
   (Creme, Eckzeichen, rote Rueckseite mit Rautenmuster), Jetons mit
   gestricheltem Rand, Cormorant kursiv, Jost in gesperrten Versalien.
   Jetzt auf allen Flaechen: Teams als Plaetze am Tisch mit Jeton in der
   Teamfarbe (BAUPLAN 4.4), X als rote Jetons, der Topf als Goldjeton, die
   WWM-Leiter als Jetonstapel, Jeopardy-Karten mit Farbzeichen, das Menue
   als gefaecherte Hand. Material statt Leuchten: Filzkorn, Papier, Gold.
   Signatur: die Karte wird umgedreht. */
:root[data-theme="I"] {
  --brd-surface: radial-gradient(ellipse 90% 80% at 50% 40%, #1E5A42 0%, #13392C 60%, #0B261C 100%);
  --brd-frame: 0 0 0 3px #C9A54C, 0 0 0 12px #4A2E14, 0 0 0 14px rgba(201,165,76,.6), 0 20px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.45);
  --brd-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 1 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
  --brd-well: transparent;
  --brd-inner: rgba(201,165,76,.35);
  --brd-radius: 40px;
  --brd-fg: #F4EEDF;
  --tile: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px), #8E1B2C;
  --tile-hover: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 1px, transparent 1px 8px), #9E2033;
  --tile-edge: inset 0 0 0 4px #F1E9D2, inset 0 0 0 5px rgba(0,0,0,.35), 0 4px 6px rgba(0,0,0,.28), 0 10px 20px rgba(0,0,0,.35);
  --tile-fg: #F4EEDF;
  --tile-head: transparent;
  --tile-head-fg: #C9A54C;
  --tile-used: transparent;
  --tile-num: #8E1B2C;
  --tile-num-glow: none;
  --tile-dim-fg: #F1E9D2;
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: #F6F0E1;
  --tile-open-edge: inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.28), 0 10px 20px rgba(0,0,0,.35);
  --tile-open-fg: #2A1A12;
  --tile-open-dim: #8E1B2C;
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(142,27,44,.25);
  --tile-pick: #F6F0E1;
  --tile-pick-fg: #2A1A12;
  --tile-right: #E2C77E;
  --tile-right-fg: #2A1A12;
  --tile-radius: 10px;
  --tile-font: 'Cormorant Garamond', serif;
  --tile-reveal: thIKarte .7s cubic-bezier(.3,.7,.3,1.1);
  /* Jeton: Flaeche, gestrichelter Cremerand innen, dunkle Kante aussen. */
  --i-jeton: inset 0 0 0 3px rgba(0,0,0,.25);
  --i-karte: 0 4px 6px rgba(0,0,0,.28), 0 10px 20px rgba(0,0,0,.35);
}

/* ── Plaetze am Tisch: Filz mit Goldkante, Jeton in der Teamfarbe ─────── */
:root[data-theme="I"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #B4232F; }
:root[data-theme="I"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #2453B8; }
:root[data-theme="I"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #1E8A4C; }
:root[data-theme="I"] :is(.scoreboard, .jeopardy-scores) { gap: 18px; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-theme="I"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  background: #0F3326; border: 0; border-radius: 60px;
  box-shadow: inset 0 0 0 1px #C9A54C, inset 0 0 30px rgba(0,0,0,.35);
  padding-left: 84px;
}
:root[data-theme="I"] .team-card { padding-left: 24px; border-radius: 28px; }
:root[data-theme="I"] .team-card::before { display: none; }
/* Der Jeton: Teamfarbe, gestrichelter Rand wie die Kante eines Spielchips. */
:root[data-theme="I"] :is(.team-panel, .jeopardy-team, .wwds-team)::before {
  content: ''; position: absolute; left: 18px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%;
  background: var(--tc); border: 5px dashed #F4EEDF; box-shadow: 0 0 0 2px var(--tc), 0 4px 0 2px rgba(0,0,0,.35);
}
:root[data-theme="I"] .jeopardy-team::before { width: 36px; height: 36px; margin-top: -18px; border-width: 4px; left: 16px; }
:root[data-theme="I"] .jeopardy-team { padding-left: 66px; }
:root[data-theme="I"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: .66rem; letter-spacing: 4px; color: #C9A54C;
}
:root[data-theme="I"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; color: #F4EEDF; text-shadow: none;
}
:root[data-theme="I"] .team-panel .t-score { font-size: 3.2rem; line-height: 1; }
:root[data-theme="I"] .team-panel.active-team { padding: 16px 12px 16px 84px; box-shadow: inset 0 0 0 2px #E6CF8B, inset 0 0 30px rgba(0,0,0,.35); }
:root[data-theme="I"] .team-panel.active-team::after { left: 30%; right: 30%; height: 2px; background: #E6CF8B; box-shadow: none; }
:root[data-theme="I"] .wwds-team.on { box-shadow: inset 0 0 0 2px #E6CF8B, inset 0 0 30px rgba(0,0,0,.35); }
:root[data-theme="I"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #E6CF8B; text-shadow: none; }

/* X als rote Jetons. */
:root[data-theme="I"] .team-strikes { background: none; border: 0; box-shadow: none; transform: none; }
:root[data-theme="I"] .strike-pip { width: 28px; height: 28px; background: transparent; border: 2px dashed rgba(244,238,223,.35); color: rgba(244,238,223,.35); font-size: .8rem; }
:root[data-theme="I"] .strike-pip.lit { background: #8E1B2C; border: 3px dashed #F4EEDF; color: #F4EEDF; box-shadow: 0 0 0 2px #8E1B2C, 0 3px 0 2px rgba(0,0,0,.35); }

/* Topf als Goldjeton. */
:root[data-theme="I"] .round-bar { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 4px; color: #C9A54C; font-size: .68rem; }
:root[data-theme="I"] .round-bar .pts {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px;
  background: #C9A54C; border: 3px dashed #F6F0E1; box-shadow: 0 0 0 2px #C9A54C, 0 3px 0 2px rgba(0,0,0,.35);
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; letter-spacing: 0; color: #2A1A12;
}

/* ── Feud: Kartenreihe auf dem Filz ───────────────────────────────────── */
:root[data-theme="I"] .board { padding: 28px 30px; }
:root[data-theme="I"] .answers { gap: 10px; }
:root[data-theme="I"] .answers.split { row-gap: 10px; column-gap: 16px; }
:root[data-theme="I"] .q-text { color: #F4EEDF; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.7rem; line-height: 1.2; }
:root[data-theme="I"] .q-text.hidden-q { background: none; border: 1px dashed rgba(201,165,76,.5); border-radius: 40px; }
:root[data-theme="I"] .q-text.hidden-q::after { font-family: 'Jost', sans-serif; color: #C9A54C; letter-spacing: 4px; }
:root[data-theme="I"] .tile { min-height: clamp(38px, 7vh - 8px, 56px); }
:root[data-theme="I"] .tile:hover:not(.open) { transform: translateY(-2px); }
:root[data-theme="I"] .tile-num { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.5rem; }
/* Rueckseite: in der Mitte ein kleines Goldwappen statt der Platznummer. */
:root[data-theme="I"] .tile:not(.open) .tile-num { opacity: 0; }
:root[data-theme="I"] .tile:not(.open) .tile-center::after { content: '♦'; width: auto; height: auto; background: none; color: rgba(241,233,210,.55); font-size: 1.1rem; }
:root[data-theme="I"] .tile.open .tile-num { font-size: 1.15rem; align-items: flex-start; padding-top: 4px; }
:root[data-theme="I"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.45rem; }
:root[data-theme="I"] .tile.open .tile-pts { color: #8E1B2C; text-shadow: none; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.7rem; box-shadow: none; }
:root[data-theme="I"] .tile.missed .tile-inner { background: #F6F0E1 !important; box-shadow: var(--i-karte) !important; color: #8A7D6A; }

/* Finale */
:root[data-theme="I"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner, .elim-team) { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; letter-spacing: 0; color: #F4EEDF; text-shadow: none; }
:root[data-theme="I"] :is(.finale-team-label, .finale-q-info) { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 4px; color: #C9A54C; }
:root[data-theme="I"] :is(.finale-score-card, .finale-reveal-team) { background: #F6F0E1; color: #2A1A12; border: 0; border-radius: 10px; box-shadow: var(--i-karte); --fg-rgb: 42,26,18; }
:root[data-theme="I"] .finale-score-card.active { background: #F6F0E1; box-shadow: 0 0 0 3px #C9A54C, var(--i-karte); }
:root[data-theme="I"] :is(.finale-score-pts, .finale-reveal-pts) { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #8E1B2C; }
:root[data-theme="I"] .finale-timer { font-family: 'Cormorant Garamond', serif; font-style: italic; }
:root[data-theme="I"] :is(.finale-score-name, .finale-reveal-name) { font-family: 'Jost', sans-serif; letter-spacing: 3px; }
:root[data-theme="I"] .finale-reveal-answer.hit { color: #1E6B3A; }
:root[data-theme="I"] .finale-reveal-answer.miss { color: #8E1B2C; }
:root[data-theme="I"] .finale-big-q { font-family: 'Cormorant Garamond', serif; font-style: italic; text-shadow: none; }

/* ── Jeopardy: Karten mit Farbzeichen in der Ecke ─────────────────────── */
:root[data-theme="I"] .jeopardy-board { gap: 10px; padding: 16px; border-radius: 30px; background: var(--brd-tex), radial-gradient(ellipse 90% 80% at 50% 40%, #1E5A42 0%, #13392C 60%, #0B261C 100%); }
:root[data-theme="I"] .jeopardy-cat { font-family: 'Jost', sans-serif; font-weight: 500; font-size: .75rem; letter-spacing: 3px; }
:root[data-theme="I"] .jeopardy-cell { position: relative; background: #F6F0E1; box-shadow: var(--i-karte); font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2rem; letter-spacing: 0; text-shadow: none; }
:root[data-theme="I"] .jeopardy-cell::after { position: absolute; right: 9px; top: 5px; font-family: 'Cormorant Garamond', serif; font-size: .95rem; line-height: 1; }
:root[data-theme="I"] .jeopardy-cell:nth-child(4n+1)::after { content: '♦'; color: #8E1B2C; }
:root[data-theme="I"] .jeopardy-cell:nth-child(4n+2)::after { content: '♠'; color: #2A1A12; }
:root[data-theme="I"] .jeopardy-cell:nth-child(4n+3)::after { content: '♥'; color: #8E1B2C; }
:root[data-theme="I"] .jeopardy-cell:nth-child(4n)::after   { content: '♣'; color: #2A1A12; }
:root[data-theme="I"] .jeopardy-cell:nth-child(even) { color: #2A1A12; }
:root[data-theme="I"] .jeopardy-cell:hover:not(.used) { background: #FFFFFF; transform: translateY(-3px) rotate(-1deg); }
:root[data-theme="I"] .jeopardy-cell.used { background: transparent; box-shadow: inset 0 0 0 1px rgba(201,165,76,.3); }
:root[data-theme="I"] .jeopardy-cell.used::after { display: none; }
:root[data-theme="I"] .jeopardy-clue-cat { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 5px; color: #C9A54C; }
:root[data-theme="I"] .jeopardy-clue-pts { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; color: #E6CF8B; letter-spacing: 0; }
:root[data-theme="I"] .jeopardy-clue-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; line-height: 1.2; }
:root[data-theme="I"] .jeopardy-clue-img { border-radius: 10px; border: 6px solid #F6F0E1; box-shadow: var(--i-karte); }

/* ── Wer wird Millionaer: Jetonstapel als Leiter, Antworten als Karten ── */
:root[data-theme="I"] .wwm-ladder { background: none; border-radius: 0; padding: 4px 0; }
:root[data-theme="I"] .wwm-rung { justify-content: flex-start; gap: 12px; padding-block: 0; border-radius: 0; background: none; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1rem; letter-spacing: 0; color: rgba(244,238,223,.5); }
:root[data-theme="I"] .wwm-rung::before { content: ''; flex: none; width: 34px; height: 11px; border-radius: 50%; border: 1.5px dashed rgba(244,238,223,.35); background: #0F3326; }
:root[data-theme="I"] .wwm-rung .wwm-lvl { display: none; }
:root[data-theme="I"] .wwm-rung.won { color: rgba(244,238,223,.75); }
:root[data-theme="I"] .wwm-rung.won::before { background: #8E1B2C; border-color: #F4EEDF; }
:root[data-theme="I"] .wwm-rung.safe::before { border-style: solid; border-color: #C9A54C; }
:root[data-theme="I"] .wwm-rung.safe .wwm-amt { color: #E6CF8B; }
:root[data-theme="I"] .wwm-rung.current { background: none; color: #E6CF8B; font-size: 1.15rem; }
:root[data-theme="I"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #E6CF8B; }
:root[data-theme="I"] .wwm-rung.current::before { width: 42px; height: 14px; background: #C9A54C; border: 2px dashed #F6F0E1; }
:root[data-theme="I"] .wwm-q { background: none; box-shadow: none; color: #F4EEDF; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.9rem; line-height: 1.2; }
:root[data-theme="I"] .wwm-answers { gap: 14px; }
:root[data-theme="I"] .wwm-opt { position: relative; flex-direction: column; justify-content: center; gap: 2px; min-height: 84px; background: #F6F0E1; color: #2A1A12; box-shadow: var(--i-karte); font-size: 1.45rem; }
:root[data-theme="I"] .wwm-opt:nth-child(odd) { rotate: -.8deg; }
:root[data-theme="I"] .wwm-opt:nth-child(even) { rotate: .6deg; }
:root[data-theme="I"] .wwm-opt:hover { filter: none; transform: translateY(-3px); }
:root[data-theme="I"] .wwm-opt .wwm-letter { position: absolute; left: 10px; top: 4px; color: #8E1B2C; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.05rem; }
:root[data-theme="I"] .wwm-opt.selected { background: #F6F0E1; box-shadow: 0 0 0 3px #C9A54C, var(--i-karte); }
:root[data-theme="I"] .wwm-opt.selected .wwm-letter { color: #8E1B2C; }
:root[data-theme="I"] .wwm-opt.correct { background: #E2C77E; }
:root[data-theme="I"] .wwm-opt.correct .wwm-letter { color: #2A1A12; }
:root[data-theme="I"] .wwm-opt.wrong { background: #8E1B2C; color: #F4EEDF; }
:root[data-theme="I"] .wwm-opt.wrong .wwm-letter { color: #F4EEDF; }
/* Joker als Goldjetons mit Wort daneben. */
:root[data-theme="I"] .wwm-lifelines { gap: 22px; }
:root[data-theme="I"] .wwm-ll { width: auto; height: auto; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="I"] .wwm-ll::before { content: ''; width: 24px; height: 24px; border-radius: 50%; background: #C9A54C; border: 2px dashed #F6F0E1; box-shadow: 0 0 0 1px #C9A54C; }
:root[data-theme="I"] .wwm-ll::after { font-family: 'Jost', sans-serif; font-weight: 500; font-size: .78rem; letter-spacing: 1px; color: #F4EEDF; }
:root[data-theme="I"] .wwm-ll:nth-child(1)::after { content: '50:50'; }
:root[data-theme="I"] .wwm-ll:nth-child(2)::after { content: 'Telefon'; }
:root[data-theme="I"] .wwm-ll:nth-child(3)::after { content: 'Publikum'; }
:root[data-theme="I"] .wwm-ll.used { opacity: .45; }
:root[data-theme="I"] .wwm-ll.used::before { background: #4A2E14; box-shadow: 0 0 0 1px #4A2E14; }
:root[data-theme="I"] .wwm-ll.used::after { text-decoration: line-through; }
:root[data-theme="I"] :is(.wwm-abar, .wwds-abar) { background: #F6F0E1; border-radius: 4px 4px 0 0; box-shadow: var(--i-karte); }
:root[data-theme="I"] :is(.wwm-apct, .wa-pct) { color: #E6CF8B; font-family: 'Cormorant Garamond', serif; font-size: 1rem; }

/* ── Wer weiss denn sowas: Karten ─────────────────────────────────────── */
:root[data-theme="I"] .wwds-cat { background: #F6F0E1; color: #2A1A12; box-shadow: var(--i-karte); }
:root[data-theme="I"] .wwds-cat:hover:not(.done) { transform: translateY(-3px) rotate(-1deg); filter: none; }
:root[data-theme="I"] .wwds-cat .wc-num { font-family: 'Cormorant Garamond', serif; color: #8E1B2C; font-weight: 700; }
:root[data-theme="I"] .wwds-cat .wc-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
:root[data-theme="I"] .wwds-cat.done { background: var(--tile); color: transparent; opacity: .6; box-shadow: var(--tile-edge); }
:root[data-theme="I"] .wwds-q { background: none; border: 0; color: #F4EEDF; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.75rem; line-height: 1.2; }
:root[data-theme="I"] .wwds-cat-chip { background: none; border: 0; border-radius: 0; font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 5px; color: #C9A54C; }
:root[data-theme="I"] .wwds-opt { background: #F6F0E1; color: #2A1A12; box-shadow: var(--i-karte); font-size: 1.3rem; }
:root[data-theme="I"] .wwds-opt .wo-let { color: #8E1B2C; font-family: 'Cormorant Garamond', serif; font-weight: 700; }
:root[data-theme="I"] .wwds-opt.bad { background: #8E1B2C; color: #F4EEDF; }
:root[data-theme="I"] .wwds-guess { border-radius: 10px; background: #F6F0E1; color: #2A1A12; border: 0; font-family: 'Cormorant Garamond', serif; font-weight: 700; }
:root[data-theme="I"] .wwds-timer { font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ── Der Duemmste fliegt: Kandidaten als Karten, Leben als Herzen ─────── */
:root[data-theme="I"] .ddf-player { position: relative; background: #F6F0E1; color: #2A1A12; border: 0; box-shadow: var(--i-karte); padding-top: 18px; }
:root[data-theme="I"] .ddf-player-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; }
:root[data-theme="I"] .ddf-player.picked { border: 0; box-shadow: 0 0 0 3px #C9A54C, var(--i-karte); transform: translateY(-4px); }
:root[data-theme="I"] .ddf-player.out { background: var(--tile); color: transparent; box-shadow: var(--tile-edge); }
:root[data-theme="I"] .ddf-heart.full { color: #8E1B2C; text-shadow: none; }
:root[data-theme="I"] .ddf-heart.empty { color: #D9CDB0; text-shadow: none; }
:root[data-theme="I"] .ddf-question { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; }
:root[data-theme="I"] .ddf-answer { color: #E6CF8B; font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ── Der Preis ist heiss: Jetons und der Preis in Kursiv ──────────────── */
:root[data-theme="I"] .pih-scores { border-bottom-color: rgba(201,165,76,.3); }
:root[data-theme="I"] .pih-score { background: #0F3326; border: 1px solid rgba(201,165,76,.5); }
:root[data-theme="I"] .pih-score.lead { background: #0F3326; border-color: #E6CF8B; box-shadow: inset 0 0 0 1px #E6CF8B; }
:root[data-theme="I"] .pih-rank { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #C9A54C; }
:root[data-theme="I"] .pih-score-pts { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #E6CF8B; }
:root[data-theme="I"] .pih-team { border-radius: 60px; background: #0F3326; box-shadow: inset 0 0 0 1px #C9A54C, inset 0 -3px 0 var(--team); }
:root[data-theme="I"] .pih-team.lead { box-shadow: inset 0 0 0 2px #E6CF8B, inset 0 -3px 0 var(--team); }
:root[data-theme="I"] .pih-team-pts { font-family: 'Cormorant Garamond', serif; font-style: italic; }
:root[data-theme="I"] .pih-item { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; }
:root[data-theme="I"] .pih-stage :is(img, video) { border-radius: 6px; border: 6px solid #F6F0E1; box-shadow: var(--i-karte); }
:root[data-theme="I"] .pih-price { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 3rem; color: #F4EEDF; text-shadow: none; }
:root[data-theme="I"] .pih-bid-row { background: #F6F0E1; color: #2A1A12; border: 0; box-shadow: var(--i-karte); font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; --fg-rgb: 42,26,18; }
:root[data-theme="I"] .pih-bid-row.win { background: #E2C77E; box-shadow: 0 0 0 3px #F6F0E1, var(--i-karte); }
:root[data-theme="I"] .pih-bid-val { font-weight: 700; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="I"] .tp-team { background: #0F3326; border: 0; border-radius: 30px; box-shadow: inset 0 0 0 1px #C9A54C; }
:root[data-theme="I"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 0 0 1px #C9A54C, inset 0 -4px 0 var(--tc); }
:root[data-theme="I"] .tp-team.turn { transform: translateY(-4px); background: #0F3326; box-shadow: inset 0 0 0 2px #E6CF8B, inset 0 -4px 0 var(--tc, #C9A54C); }
:root[data-theme="I"] .tp-team-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.2rem; }
:root[data-theme="I"] .tp-team-sub { font-family: 'Jost', sans-serif; letter-spacing: 3px; }
:root[data-theme="I"] .tp-stage { background: #F6F0E1; color: #2A1A12; border: 0; border-radius: 8px; box-shadow: var(--i-karte); --fg-rgb: 42,26,18; }
:root[data-theme="I"] .tp-catchip { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; font-size: .7rem; }
:root[data-theme="I"] .tp-question { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.7rem; line-height: 1.2; }
:root[data-theme="I"] .tp-answer { border: 0; border-radius: 6px; font-size: 1.3rem; }
:root[data-theme="I"] .tp-answer.hidden { background: none; border: 1px dashed rgba(42,26,18,.3); font-family: 'Jost', sans-serif; }
:root[data-theme="I"] .tp-wheel-rotor { box-shadow: 0 0 0 4px #C9A54C, 0 0 0 12px #4A2E14, 0 0 0 13px rgba(201,165,76,.6), 0 18px 30px rgba(0,0,0,.45); }
:root[data-theme="I"] .tp-wheel-hub { background: #0F3326; border: 3px dashed #C9A54C; box-shadow: 0 0 0 3px #0F3326; font-family: 'Cormorant Garamond', serif; font-style: italic; }
:root[data-theme="I"] .tp-wheel-pointer { border-top-color: #E6CF8B; }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="I"] .result-card { background: #F6F0E1; color: #2A1A12; border: 0; border-radius: 10px; box-shadow: var(--i-karte); backdrop-filter: none; --fg-rgb: 42,26,18; }
:root[data-theme="I"] .result-scores strong { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #8E1B2C; }
:root[data-theme="I"] .tour-bar { height: 6px; background: rgba(0,0,0,.3); }
:root[data-theme="I"] .tour-bar-fill { background: #C9A54C; }
:root[data-theme="I"] .tour-total { font-family: 'Cormorant Garamond', serif; font-weight: 700; }
:root[data-theme="I"] .q-list-item { border-radius: 30px; }
:root[data-theme="I"] .q-list-item.tour-lead { background: rgba(201,165,76,.1); box-shadow: inset 0 0 0 1px #C9A54C; }

/* ── Host: Menue als gefaecherte Hand, Knoepfe wie Jetons ─────────────── */
:root[data-theme="I"] .menu-cards { counter-reset: ikarte; }
:root[data-theme="I"] .menu-card { counter-increment: ikarte; background: #F6F0E1; color: #2A1A12; border: 0; border-radius: 10px; box-shadow: var(--i-karte); --fg-strong: #2A1A12; --muted: #6E5F4C; }
:root[data-theme="I"] .menu-card:nth-child(4n+1) { rotate: -2deg; }
:root[data-theme="I"] .menu-card:nth-child(4n+2) { rotate: -.7deg; }
:root[data-theme="I"] .menu-card:nth-child(4n+3) { rotate: .7deg; }
:root[data-theme="I"] .menu-card:nth-child(4n)   { rotate: 2deg; }
:root[data-theme="I"] .menu-card::before { content: counter(ikarte); left: 10px; top: 6px; right: auto; height: auto; background: none; opacity: 1; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: #8E1B2C; font-size: 1rem; }
:root[data-theme="I"] .menu-card:hover { transform: translateY(-8px); background: #FFFFFF; border: 0; box-shadow: 0 0 0 2px #C9A54C, 0 14px 30px rgba(0,0,0,.4); }
:root[data-theme="I"] .menu-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.25rem; }
:root[data-theme="I"] .menu-card-icon svg { filter: none; }
:root[data-theme="I"] .menu-card .show-icon { --ico-fstroke: #8E1B2C; --ico-line: #8E1B2C; --ico-cutline: #8E1B2C; --ico-dimline: rgba(142,27,44,.35); }
:root[data-theme="I"] .menu-pill { border-color: rgba(201,165,76,.5); font-family: 'Jost', sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: .7rem; }
:root[data-theme="I"] .menu-divider { width: 120px; background: #C9A54C; }
:root[data-theme="I"] .btn { border-radius: 999px; font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 3px; }
:root[data-theme="I"] .btn-primary { background: #C9A54C; color: #1B1A17; box-shadow: inset 0 0 0 2px #C9A54C, inset 0 0 0 4px #F6F0E1, 0 4px 10px rgba(0,0,0,.35); }
:root[data-theme="I"] .btn-primary:hover { box-shadow: inset 0 0 0 2px #C9A54C, inset 0 0 0 4px #F6F0E1, 0 6px 14px rgba(0,0,0,.4); }
:root[data-theme="I"] .btn-primary::after { display: none; }
:root[data-theme="I"] .btn-secondary { background: transparent; border: 1px solid #C9A54C; color: #E6CF8B; backdrop-filter: none; }
:root[data-theme="I"] .btn-danger { background: #8E1B2C; box-shadow: none; }
:root[data-theme="I"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 26px; background: rgba(11,38,28,.75); border: 1px solid rgba(201,165,76,.4); }
:root[data-theme="I"] .page-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; }

/* Niedriges Fenster (Beamer 1280x720): Feud mit Frage ueber zwei Zeilen lag
   13 px unter dem Bild - Frage kleiner, Kartenabstand enger. */
@media (max-height: 900px) {
  :root[data-theme="I"] .q-text { font-size: 1.45rem; padding-bottom: 10px; }
  :root[data-theme="I"] .answers { gap: 7px; }
  :root[data-theme="I"] .answers.split { row-gap: 7px; }
}

/* Die Karte wird umgedreht: erst hochkant weg, dann mit der Vorderseite. */
@keyframes thIKarte {
  0%   { transform: perspective(900px) rotateY(-180deg) scale(1.04); filter: brightness(.6); }
  60%  { transform: perspective(900px) rotateY(12deg) scale(1.04); filter: none; }
  100% { transform: perspective(900px) rotateY(0) scale(1); }
}

/* ══ I · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war I eine Salon-Farbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, zwei Plaetze quer darueber,
   darunter ein kleiner Filztisch als Kasten, drumherum nochmal Filz.
   Zwei Tische uebereinander - das ist der Fehler.
   Der Entwurf zeigt EINEN Spieltisch von oben: die Filzflaeche mit
   Goldkante fuellt das Bild, die Karten liegen in der Mitte, die Plaetze
   sitzen gegenueber an der unteren Kante, der Topf als Goldjeton oben.
   Also bekommt der Screen selbst den Filz und die Goldkante, und das
   Brett darin verliert seinen Rahmen - sonst stuende ein Tisch auf dem
   Tisch.
   Grundsatz: eine Tischflaeche, Karten in der Mitte, Gold nur fuer den
   Topf und den Platz, der am Zug ist.
   Markup und JavaScript sind nicht angefasst. */
:root[data-theme="I"] { --i-breit: min(1180px, 94vw); }

/* Der Screen fuellt den Rest des Fensters und IST der Tisch. `flex: 1 0
   auto`: wachsen ja, schrumpfen nie - sonst wuerde ein langer Screen
   gestaucht und liefe aus dem Beamerbild. */
:root[data-theme="I"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto; width: 100%; max-width: var(--i-breit); padding: 26px 30px 22px;
  background: var(--brd-surface); background-blend-mode: normal;
  border-radius: var(--brd-radius); box-shadow: var(--brd-frame);
}
/* Das Brett im Tisch traegt keinen eigenen Rahmen mehr. */
:root[data-theme="I"] :is(#game-screen, #wwds-screen, #finale-screen) .board,
:root[data-theme="I"] #jeopardy-screen .jeopardy-board {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
}
/* Das Logo ist die Hausmarke am Tischrand: klein und dicht darueber. */
:root[data-theme="I"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  margin: 14px 0 8px; }
:root[data-theme="I"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 200px; max-height: 62px; }

/* ── Die Plaetze: gegenueber an der unteren Tischkante ── */
:root[data-theme="I"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #tp-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores, .tp-top) {
  width: 100%; max-width: none; margin: 16px 0 0; padding: 0;
  justify-content: space-between; flex-wrap: nowrap; gap: 24px;
}
:root[data-theme="I"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):is(.red, .blue, .green) {
  flex: 0 1 320px; padding: 10px 22px 10px 84px;
}
:root[data-theme="I"] #game-screen .team-panel.active-team { padding: 10px 22px 10px 84px; }
:root[data-theme="I"] #game-screen .team-panel .t-score { font-size: clamp(2rem, 5.4vh, 2.8rem); }
:root[data-theme="I"] #game-screen .team-strikes { margin-top: 2px; }
:root[data-theme="I"] #game-screen .strike-pip { width: 22px; height: 22px; font-size: .7rem; }

/* ── Feud: Topf oben, Karten in der Mitte, Plaetze unten ── */
:root[data-theme="I"] #game-screen.active {
  display: grid; grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="I"] #game-screen .round-bar { grid-area: kick; justify-content: center; padding: 0 0 14px; }
:root[data-theme="I"] #game-screen .scoreboard { grid-area: teams; }
:root[data-theme="I"] #game-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="I"] #game-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="I"] #game-screen .tile { min-height: clamp(40px, 8vh, 66px); }

/* ── Jeopardy: die Kartenreihen liegen auf dem Tisch ── */
:root[data-theme="I"] #jeopardy-screen.active {
  display: grid; grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="I"] #jeopardy-screen .round-bar { grid-area: kick; justify-content: center; padding: 0 0 14px; }
:root[data-theme="I"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; }
:root[data-theme="I"] #jeopardy-screen .jeopardy-scores { grid-area: teams; }

/* Jeopardy-Frage: die aufgedeckte Karte liegt gross auf dem Filz -
   Kategorie als Goldzeile oben, Betrag als Jeton rechts. */
:root[data-theme="I"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  padding: 8vh max(5vw, (100vw - var(--i-breit)) / 2); column-gap: 36px; row-gap: 0;
}
:root[data-theme="I"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="I"] .jeopardy-clue-cat { grid-area: cat; align-self: center; justify-self: start; }
:root[data-theme="I"] .jeopardy-clue-pts {
  grid-area: pts; align-self: center; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 96px; border-radius: 999px;
  background: #C9A54C; color: #2A1A12; border: 4px dashed #F6F0E1; box-shadow: 0 0 0 3px #C9A54C, 0 5px 0 3px rgba(0,0,0,.35);
}
:root[data-theme="I"] .jeopardy-clue-text {
  grid-area: frage; max-width: none; text-align: left; margin-top: 40px;
  font-size: clamp(2.2rem, 4vw + .8vh, 4rem); line-height: 1.08;
}
:root[data-theme="I"] .jeopardy-clue-blank { grid-area: frage; justify-self: start; margin-top: 40px; }
:root[data-theme="I"] .jeopardy-answer-text { grid-area: antwort; justify-self: start; text-align: left; margin-top: 26px; }

/* ── WWM: Stimmzettel auf dem Tisch, Jetonstapel daneben ── */
:root[data-theme="I"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="I"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="I"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="I"] #wwm-screen .wwm-opt { min-height: clamp(56px, 10.5vh, 86px); }

/* ── WWDS: Buehne auf dem Tisch, Plaetze unten ── */
:root[data-theme="I"] #wwds-screen.active {
  display: grid; grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="I"] #wwds-screen .round-bar { grid-area: kick; justify-content: center; padding: 0 0 14px; }
:root[data-theme="I"] #wwds-screen .wwds-top { grid-area: teams; }
:root[data-theme="I"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="I"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="I"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="I"] #wwds-screen .wwds-cat { min-height: clamp(46px, 8.5vh, 76px); }
:root[data-theme="I"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="I"] #wwds-screen .wwds-opt { min-height: clamp(44px, 8vh, 70px); }
:root[data-theme="I"] #wwds-screen:has(.wwds-aud) .wwds-opt { min-height: clamp(38px, 6vh, 52px); }
/* Mit Publikumsjoker kommt ein Balkenbild dazu - ohne Deckel und straffere
   Zeilen stand WWDS 9 px unter dem Beamerbild. */
:root[data-theme="I"] #wwds-screen .wwds-aud { height: clamp(58px, 10vh, 78px); }
:root[data-theme="I"] #wwds-screen:has(.wwds-aud) .wwds-q { padding-block: 8px; margin-bottom: 8px !important; }
:root[data-theme="I"] #wwds-screen:has(.wwds-aud) .wwds-top { margin-top: 8px; }

/* ── DDF: Mitspieler als Jetonplaetze an der unteren Tischkante ──
   Der innere Wrapper traegt inline `height:100%` - zirkulaer, sobald der
   Screen mit dem Inhalt waechst. Daher `height:auto` plus `flex:1`. */
:root[data-theme="I"] #ddf-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "kick" "uhr" "frage" "media" "antwort" "note" "vote" "spieler";
  grid-template-rows: auto auto 1fr auto auto auto auto auto;
}
:root[data-theme="I"] #ddf-screen .ddf-alive { grid-area: kick; margin: 0 0 4px; }
:root[data-theme="I"] #ddf-timer { grid-area: uhr; font-family: 'Cormorant Garamond', serif; font-style: italic; color: #E6CF8B; }
:root[data-theme="I"] #ddf-screen .ddf-question { grid-area: frage; display: flex; align-items: center; justify-content: center; }
:root[data-theme="I"] #ddf-screen .ddf-media-bar { grid-area: media; }
:root[data-theme="I"] #ddf-screen .ddf-answer { grid-area: antwort; }
:root[data-theme="I"] #ddf-screen .ddf-note { grid-area: note; }
:root[data-theme="I"] #ddf-screen .ddf-vote-grid { grid-area: vote; }
:root[data-theme="I"] #ddf-screen .ddf-players { grid-area: spieler; max-width: none; margin: 12px 0 0; }

/* ── PIH: der Artikel liegt auf dem Tisch, die Rangliste an der Kante ── */
:root[data-theme="I"] #pih-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "teams" "uhr" "artikel" "bild" "media" "preis" "note" "gebote" "rang";
  grid-template-rows: auto auto auto 1fr auto auto auto auto auto;
}
:root[data-theme="I"] #pih-teams { grid-area: teams; }
:root[data-theme="I"] #pih-timer { grid-area: uhr; font-family: 'Cormorant Garamond', serif; font-style: italic; color: #E6CF8B; }
:root[data-theme="I"] #pih-screen .pih-item { grid-area: artikel; }
:root[data-theme="I"] #pih-screen .pih-stage { grid-area: bild; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* Ohne Deckel schiebt das Produktfoto die Rangliste aus dem Beamerbild. */
:root[data-theme="I"] #pih-screen .pih-stage :is(img, video) { max-height: min(24vh, 200px); width: auto; }
:root[data-theme="I"] #pih-screen .pih-media-bar { grid-area: media; }
:root[data-theme="I"] #pih-screen .pih-price { grid-area: preis; }
:root[data-theme="I"] #pih-screen .pih-note { grid-area: note; }
:root[data-theme="I"] #pih-screen .pih-bid-grid { grid-area: gebote; }
:root[data-theme="I"] #pih-screen .pih-scores { grid-area: rang; max-width: none; margin-top: 8px; gap: 6px; }
:root[data-theme="I"] #pih-screen .pih-score { padding: 3px 12px; gap: 7px; }
:root[data-theme="I"] #pih-screen .pih-score .pmini-av { width: 22px; height: 22px; font-size: .8rem; }

/* ── TP: Rad und Frage auf dem Tisch, Plaetze an der Kante ── */
:root[data-theme="I"] #tp-screen.active {
  display: grid; grid-template-areas: "kick" "board" "teams"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="I"] #tp-screen .round-bar { grid-area: kick; justify-content: center; padding: 0 0 14px; }
:root[data-theme="I"] #tp-screen .tp-top { grid-area: teams; }
:root[data-theme="I"] #tp-screen .tp-team:is(.red, .blue, .green) {
  flex: 0 1 320px; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 10px 20px;
}
:root[data-theme="I"] #tp-screen .tp-team .tp-pie { width: 54px; height: 54px; flex: none; margin: 0; }
:root[data-theme="I"] #tp-screen .tp-board { grid-area: board; align-self: center; width: 100%; justify-content: center; }

/* ── Feud-Finale: Frage und Karten auf dem Tisch, Stand an der Kante ── */
:root[data-theme="I"] #finale-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf uhr" "board board" "vergleich vergleich" "stand stand";
  grid-template-rows: auto 1fr auto auto; column-gap: 28px; row-gap: 0;
}
:root[data-theme="I"] #finale-screen .finale-header { grid-area: kopf; align-self: center; display: flex; align-items: baseline; gap: 16px; text-align: left; }
:root[data-theme="I"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; }
:root[data-theme="I"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 10px; }
:root[data-theme="I"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="I"] #finale-screen .finale-big-q { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Von js/feud.js erzeugt - ohne eigene Flaeche landet es per
   Auto-Platzierung oben rechts im Raster. */
:root[data-theme="I"] #finale-reveal-comparison { grid-area: vergleich; justify-content: center; margin-top: 12px; }
:root[data-theme="I"] #finale-screen .finale-scores { grid-area: stand; justify-content: space-between; margin-top: 14px; }

/* ── Ergebnis: die letzte Karte liegt in der Tischmitte ── */
:root[data-theme="I"] #result-screen.active { width: 100%; max-width: min(860px, 92vw); }
:root[data-theme="I"] #result-screen .result-card {
  width: 100%; background: #F6F0E1; color: #2A1A12; border: 0; border-radius: 14px; box-shadow: var(--i-karte);
}
:root[data-theme="I"] #result-screen .result-scores { color: #2A1A12; }
:root[data-theme="I"] #result-screen .result-scores strong { color: #8E1B2C; }

/* ── Menue: die Hand wird aufgefaechert ──
   Statt eines 720-px-Blocks in der Mitte vier Spalten ueber die volle
   Breite. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="I"] #menu-screen.active { width: 100%; max-width: var(--i-breit); }
:root[data-theme="I"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* ── J · Kreide: Tafel im Holzrahmen, Kreidestrich, Haftzettel ── */
:root[data-theme="J"] {
  --brd-surface: radial-gradient(ellipse 120% 90% at 50% 40%, #34453F 0%, #2E3C37 55%, #25312D 100%);
  --brd-tex: radial-gradient(rgba(237,237,230,.05) 1px, transparent 1.5px) 0 0 / 7px 7px;
  --brd-frame: 0 0 0 12px #7A4E2A, 0 0 0 14px #5A3A1E, 0 16px 40px rgba(0,0,0,.5), inset 0 0 50px rgba(0,0,0,.35);
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 4px;
  --brd-fg: #EDEDE6;
  --tile: transparent;
  --tile-hover: rgba(237,237,230,.05);
  --tile-edge: none;
  --tile-fg: #EDEDE6;
  --tile-head: transparent;
  --tile-head-fg: #F4E58A;
  --tile-used: transparent;
  --tile-num: #26332E;
  --tile-num-glow: none;
  --tile-dim-fg: rgba(237,237,230,.45);
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: transparent;
  --tile-open-edge: none;
  --tile-open-fg: #EDEDE6;
  --tile-open-dim: rgba(237,237,230,.6);
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: transparent;
  --tile-pick-fg: #F2A7B5;
  --tile-right: transparent;
  --tile-right-fg: #F4E58A;
  --tile-radius: 0;
  --tile-font: 'Patrick Hand', cursive;
  --tile-reveal: thJKreide .9s steps(14, end);
}
:root[data-theme="J"] .q-text { color: #EDEDE6; font-family: 'Patrick Hand', cursive; font-size: 1.6rem; font-weight: 400; }
:root[data-theme="J"] .q-text.hidden-q { border-color: rgba(237,237,230,.35); }
/* Verdeckt: eine gestrichelte Kreidelinie mit Fragezeichen-Platz. */
:root[data-theme="J"] .tile:not(.open) .tile-inner { border-bottom: 2px dashed rgba(237,237,230,.3); }
:root[data-theme="J"] .tile-num { font-family: 'Patrick Hand', cursive; font-size: 1.4rem; }
:root[data-theme="J"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.6rem; }
/* Die Punkte sind mit Kreide eingekreist. */
:root[data-theme="J"] .tile.open .tile-pts {
  align-self: center; min-width: 0; width: 46px; height: 38px; padding: 0; margin-right: 6px;
  border: 2px solid #F4E58A; border-radius: 50% 45% 55% 48% / 52% 50% 46% 50%;
  color: #F4E58A; text-shadow: none; font-family: 'Patrick Hand', cursive; font-size: 1.3rem;
}
:root[data-theme="J"] .jeopardy-board { gap: clamp(8px, 2vh - 4px, 14px); padding: 18px; background: radial-gradient(ellipse 120% 90% at 50% 40%, #34453F 0%, #2E3C37 55%, #25312D 100%); }
:root[data-theme="J"] .jeopardy-cat { font-family: 'Patrick Hand', cursive; font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
/* Jeopardy als Haftzettel mit Klebestreifen, Farbe reihum, leicht schief. */
:root[data-theme="J"] .jeopardy-cell { position: relative; background: #F4E58A; color: #26332E; box-shadow: 0 6px 12px rgba(0,0,0,.4); font-family: 'Permanent Marker', cursive; font-size: 1.7rem; rotate: -2deg; }
:root[data-theme="J"] .jeopardy-cell:nth-child(3n)   { background: #F2A7B5; rotate: 1.5deg; }
:root[data-theme="J"] .jeopardy-cell:nth-child(3n+1) { background: #9CC7F0; rotate: -1deg; }
:root[data-theme="J"] .jeopardy-cell:nth-child(5n)   { background: #A8E0B5; }
:root[data-theme="J"] .jeopardy-cell::before { content: ''; position: absolute; top: -8px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: rgba(237,237,230,.45); rotate: 3deg; }
:root[data-theme="J"] .jeopardy-cell:hover:not(.used) { transform: scale(1.06); }
:root[data-theme="J"] .jeopardy-cell.used { background: transparent; box-shadow: none; color: transparent; }
:root[data-theme="J"] .jeopardy-cell.used::before { display: none; }
:root[data-theme="J"] .wwm-q { color: #EDEDE6; font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 1.6rem; line-height: 1.3; }
/* WWM-Antworten als Kreidekaesten - die ungleichen Radien machen die
   Linie handgezogen. */
:root[data-theme="J"] .wwm-opt { border: 2px solid rgba(237,237,230,.8); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; font-size: 1.5rem; font-weight: 400; }
:root[data-theme="J"] .wwm-opt .wwm-letter { color: #EDEDE6; font-family: 'Patrick Hand', cursive; }
:root[data-theme="J"] .wwm-opt.selected { border-color: #F2A7B5; }
:root[data-theme="J"] .wwm-opt.correct { border-color: #F4E58A; border-width: 3px; }
/* Mit Kreide geschrieben: in Stufen von links nach rechts sichtbar. */
@keyframes thJKreide {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ── K · Neon-Bar (Rework 2026-10-14): Bar nach Ladenschluss ───────────────
   Identitaet aus designs/s/K-*.html: dunkle Ziegelwand, Neonroehren in Pink,
   Cyan, Bernstein und Gruen, Schreibschrift (Yellowtail) fuer Namen, Sora
   fuer Zahlen und Versalien. Hier IST das Leuchten das Material - eine
   Roehre ist eine Linie mit Schein, keine weiche Flaeche: jede Form ist
   nur Kontur (2 px) plus Lichthof, nie gefuellt.
   Jetzt auf allen Flaechen: Teamnamen als Leuchtschrift in der Teamfarbe
   (BAUPLAN 4.4), X als rote Roehren, WWM-Leiter als Balken, die von links
   nach rechts wachsen, PIH-Gebote auf dem Kassenbon, Menue als schief
   haengende Leuchtschilder.
   Signatur: aufgedeckt flackert die Roehre an. Eine Roehre ist ein --nc. */
:root[data-theme="K"] {
  --brd-surface: rgba(23,13,16,.85);
  --brd-frame: 0 0 0 3px #FF4FA3, 0 0 14px #FF4FA3, 0 0 36px rgba(255,79,163,.45), inset 0 0 22px rgba(255,79,163,.3);
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 26px;
  --tile: transparent;
  --tile-hover: rgba(69,240,255,.05);
  --tile-edge: inset 0 0 0 2px rgba(255,243,224,.1);
  --tile-fg: #FFF8F0;
  --tile-head: transparent;
  --tile-head-fg: #FFF8F0;
  --tile-used: transparent;
  --tile-num: #FFF8F0;
  --tile-num-glow: 0 0 6px #FF4FA3, 0 0 16px #FF4FA3;
  --tile-dim-fg: rgba(255,243,224,.2);
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: rgba(69,240,255,.06);
  --tile-open-edge: 0 0 0 2px #45F0FF, 0 0 12px #45F0FF, inset 0 0 14px rgba(69,240,255,.35);
  --tile-open-fg: #FFF8F0;
  --tile-open-dim: #45F0FF;
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(69,240,255,.4);
  --tile-pick: rgba(255,159,69,.08);
  --tile-pick-fg: #FFF8F0;
  --tile-right: rgba(124,255,107,.08);
  --tile-right-fg: #FFF8F0;
  --tile-radius: 14px;
  --tile-font: 'Sora', sans-serif;
  --tile-reveal: thKFlacker .9s linear;
  --nc: #45F0FF;
}
/* Eine Roehre: Kontur, Lichthof aussen, Widerschein innen - in --nc.
   Nur einfache Klassen in der Liste: :is() nimmt die hoechste Spezifitaet
   seiner Liste an, ein zusammengesetzter Selektor darin wuerde jede
   spaetere Zustandsregel (.done, .out, :hover) schlagen. */
:root[data-theme="K"] :is(.wwm-ll, .ddf-player, .tp-team, .tp-stage, .wwds-cat, .wwds-opt, .wwds-q, .menu-card, .finale-score-card, .finale-reveal-team, .result-card, .pih-score, .pih-team, .menu-pill, .btn-secondary, .editor-card, .setup-lobby, .resume-banner, .team-card) {
  box-shadow: 0 0 0 2px var(--nc), 0 0 12px var(--nc), inset 0 0 12px color-mix(in srgb, var(--nc) 35%, transparent);
  border: 0; background: rgba(23,13,16,.55);
}

/* ── Teams als Leuchtschrift in der Teamfarbe, ohne Kasten ────────────── */
:root[data-theme="K"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #FF5A4E; --nc: #FF5A4E; }
:root[data-theme="K"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #5B9BFF; --nc: #5B9BFF; }
:root[data-theme="K"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #7CFF6B; --nc: #7CFF6B; }
:root[data-theme="K"] :is(.scoreboard, .jeopardy-scores) { gap: 18px; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-theme="K"] :is(.team-panel, .jeopardy-team, .wwds-team):is(.red, .blue, .green) { background: transparent; border: 0; box-shadow: none; }
:root[data-theme="K"] .team-card::before { display: none; }
:root[data-theme="K"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name) {
  font-family: 'Yellowtail', cursive; font-size: 1.7rem; letter-spacing: 0; text-transform: none; line-height: 1;
  color: #FFF8F0; text-shadow: 0 0 6px var(--tc), 0 0 16px var(--tc);
}
:root[data-theme="K"] .jeopardy-team .jt-name { font-size: 1.3rem; }
:root[data-theme="K"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'Sora', sans-serif; font-weight: 700; color: #FFF8F0; text-shadow: 0 0 6px var(--tc), 0 0 18px var(--tc), 0 0 40px var(--tc);
}
:root[data-theme="K"] .team-panel .t-score { font-size: 3.6rem; }
/* Am Zug: der Name bekommt eine Bernsteinroehre darunter. */
:root[data-theme="K"] .team-panel.active-team::after { left: 30%; right: 30%; height: 3px; border-radius: 3px; background: #FFE9C4; box-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] :is(.team-panel.active-team .t-name, .wwds-team.on .wt-name) { color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #FFF8F0; }
:root[data-theme="K"] .wwds-team.on { box-shadow: none; border: 0; }
:root[data-theme="K"] .wwds-team .wt-meta { color: rgba(255,243,224,.4); }

/* X als Roehren: aus = dunkles Glas, an = rot. */
:root[data-theme="K"] .team-strikes { background: none; border: 0; box-shadow: none; transform: none; }
:root[data-theme="K"] .strike-pip { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 1.5px solid rgba(255,243,224,.12); color: rgba(255,243,224,.12); font-size: 1rem; }
:root[data-theme="K"] .team-strikes .strike-pip.lit { box-shadow: 0 0 0 2px #FF3B3B, 0 0 12px #FF3B3B, inset 0 0 10px rgba(255,59,59,.35); border: 0; color: #FFF0F0; text-shadow: 0 0 6px #FF3B3B, 0 0 14px #FF3B3B; background: transparent; animation: thKFlacker .9s linear; }

:root[data-theme="K"] .round-bar { font-family: 'Sora', sans-serif; color: rgba(255,243,224,.55); }
:root[data-theme="K"] .round-bar .pts { color: #FFF8F0; font-size: 1.2rem; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }

/* ── Feud ─────────────────────────────────────────────────────────────── */
:root[data-theme="K"] .board { padding: 24px; }
:root[data-theme="K"] .answers { gap: 10px; }
:root[data-theme="K"] .answers.split { row-gap: 10px; column-gap: 14px; }
:root[data-theme="K"] .q-text { color: #FFF8F0; font-weight: 700; font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 6px rgba(255,79,163,.9), 0 0 18px rgba(255,79,163,.6); }
:root[data-theme="K"] .q-text.hidden-q { background: none; border: 2px dashed rgba(255,79,163,.35); border-radius: 14px; text-shadow: none; }
:root[data-theme="K"] .tile:hover:not(.open) { transform: none; }
:root[data-theme="K"] .tile.open .tile-answer { text-shadow: 0 0 6px rgba(69,240,255,.8); letter-spacing: 1.5px; }
:root[data-theme="K"] .tile.open .tile-pts { color: #FFE14D; text-shadow: 0 0 6px #FFB52E, 0 0 14px rgba(255,181,46,.7); box-shadow: none; }
:root[data-theme="K"] .tile.missed .tile-inner { background: transparent !important; box-shadow: 0 0 0 2px #FF3B3B, 0 0 12px #FF3B3B, inset 0 0 12px rgba(255,59,59,.3) !important; }

/* Finale */
:root[data-theme="K"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner, .elim-team) { font-family: 'Yellowtail', cursive; font-weight: 400; letter-spacing: 0; text-transform: none; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3, 0 0 18px #FF4FA3, 0 0 40px #FF4FA3; }
:root[data-theme="K"] .finale-title { font-size: 2.8rem; }
:root[data-theme="K"] .finale-score-card.active { --nc: #FFB52E; }
:root[data-theme="K"] :is(.finale-score-pts, .finale-reveal-pts, .finale-timer) { color: #FFF8F0; font-family: 'Sora', sans-serif; font-weight: 700; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] .finale-big-q { font-family: 'Sora', sans-serif; font-weight: 700; text-shadow: 0 0 6px #45F0FF, 0 0 18px #45F0FF; }

/* ── Jeopardy: Kategorien in Schreibschrift, jede Spalte ihre Roehre ──── */
:root[data-theme="K"] .jeopardy-board { gap: 10px; padding: 16px; border-radius: 26px; }
:root[data-theme="K"] .jeopardy-cat { font-family: 'Yellowtail', cursive; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; text-shadow: 0 0 6px #FF4FA3, 0 0 16px #FF4FA3; }
:root[data-theme="K"] .jeopardy-cell { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.9rem; box-shadow: inset 0 0 0 2px rgba(255,243,224,.08); }
:root[data-theme="K"] .jeopardy-cell:nth-child(4n+1) { text-shadow: 0 0 6px #45F0FF, 0 0 16px #45F0FF; }
:root[data-theme="K"] .jeopardy-cell:nth-child(4n+2) { text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] .jeopardy-cell:nth-child(4n+3) { text-shadow: 0 0 6px #7CFF6B, 0 0 16px #7CFF6B; }
:root[data-theme="K"] .jeopardy-cell:hover:not(.used) { box-shadow: 0 0 0 2px #45F0FF, 0 0 14px #45F0FF; transform: none; }
/* Verbraucht: die Roehre ist aus, die Zahl bleibt als dunkles Glas stehen. */
:root[data-theme="K"] .jeopardy-cell.used { color: rgba(255,243,224,.1); text-shadow: none; }
:root[data-theme="K"] .jeopardy-clue-cat { font-family: 'Yellowtail', cursive; font-size: 1.8rem; letter-spacing: 0; text-transform: none; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3, 0 0 16px #FF4FA3; }
:root[data-theme="K"] .jeopardy-clue-pts { color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] .jeopardy-clue-text { text-shadow: 0 0 6px rgba(69,240,255,.8), 0 0 18px rgba(69,240,255,.4); }
:root[data-theme="K"] .jeopardy-clue-img { border-radius: 14px; border: 0; box-shadow: 0 0 0 2px #45F0FF, 0 0 14px #45F0FF; }

/* ── WWM: Balken, die nach rechts wachsen; Antworten als Roehrenpillen ── */
:root[data-theme="K"] .wwm-wrap { flex-direction: column; gap: 12px; }
:root[data-theme="K"] .wwm-ladder { order: 2; width: 100%; flex-direction: row; align-items: flex-end; gap: 6px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
:root[data-theme="K"] .wwm-rung { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 5px; padding: 0; border-radius: 0; background: none; font-family: 'Sora', sans-serif; font-weight: 600; font-size: .56rem; letter-spacing: 0; text-align: center; color: rgba(255,243,224,.35); white-space: nowrap; }
:root[data-theme="K"] .wwm-rung .wwm-lvl { display: none; }
:root[data-theme="K"] .wwm-rung::before { content: ''; height: 10px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255,243,224,.12); }
:root[data-theme="K"] .wwm-rung:nth-child(2)::before { height: 14px; }
:root[data-theme="K"] .wwm-rung:nth-child(3)::before { height: 18px; }
:root[data-theme="K"] .wwm-rung:nth-child(4)::before { height: 22px; }
:root[data-theme="K"] .wwm-rung:nth-child(5)::before { height: 26px; }
:root[data-theme="K"] .wwm-rung:nth-child(6)::before { height: 30px; }
:root[data-theme="K"] .wwm-rung:nth-child(7)::before { height: 34px; }
:root[data-theme="K"] .wwm-rung:nth-child(8)::before { height: 38px; }
:root[data-theme="K"] .wwm-rung:nth-child(9)::before { height: 42px; }
:root[data-theme="K"] .wwm-rung:nth-child(10)::before { height: 46px; }
:root[data-theme="K"] .wwm-rung:nth-child(11)::before { height: 50px; }
:root[data-theme="K"] .wwm-rung:nth-child(12)::before { height: 54px; }
:root[data-theme="K"] .wwm-rung:nth-child(13)::before { height: 58px; }
:root[data-theme="K"] .wwm-rung:nth-child(14)::before { height: 62px; }
:root[data-theme="K"] .wwm-rung:nth-child(15)::before { height: 66px; }
:root[data-theme="K"] .wwm-rung.won { color: rgba(255,243,224,.75); }
:root[data-theme="K"] .wwm-rung.won::before { background: #BFFFAF; box-shadow: 0 0 6px #7CFF6B, 0 0 14px #7CFF6B; }
:root[data-theme="K"] .wwm-rung.safe .wwm-amt { color: #FFF8F0; text-shadow: 0 0 6px #45F0FF; }
:root[data-theme="K"] .wwm-rung.safe::before { box-shadow: inset 0 0 0 1.5px rgba(69,240,255,.6); }
:root[data-theme="K"] .wwm-rung.current { background: none; color: #FFF8F0; }
:root[data-theme="K"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #FFF8F0; text-shadow: 0 0 6px #FFB52E; }
:root[data-theme="K"] .wwm-rung.current::before { background: #FFE9C4; box-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; animation: thKFlacker .9s linear; }
:root[data-theme="K"] .wwm-q { color: #FFF8F0; font-weight: 700; text-shadow: 0 0 6px rgba(69,240,255,.8), 0 0 16px rgba(69,240,255,.5); }
:root[data-theme="K"] .wwm-opt { border-radius: 999px; box-shadow: 0 0 0 2px #45F0FF, 0 0 12px rgba(69,240,255,.7), inset 0 0 12px rgba(69,240,255,.25); }
:root[data-theme="K"] .wwm-opt:nth-child(even) { box-shadow: 0 0 0 2px #FFB52E, 0 0 12px rgba(255,181,46,.7), inset 0 0 12px rgba(255,181,46,.25); }
:root[data-theme="K"] .wwm-opt:hover { filter: brightness(1.2); }
:root[data-theme="K"] .wwm-opt .wwm-letter { font-family: 'Yellowtail', cursive; color: #FF4FA3; text-shadow: 0 0 8px #FF4FA3; }
:root[data-theme="K"] .wwm-opt.selected { box-shadow: 0 0 0 2px #FF4FA3, 0 0 16px #FF4FA3, inset 0 0 16px rgba(255,79,163,.4); }
:root[data-theme="K"] .wwm-opt.correct { box-shadow: 0 0 0 2px #7CFF6B, 0 0 16px #7CFF6B, inset 0 0 16px rgba(124,255,107,.35); }
:root[data-theme="K"] .wwm-opt.wrong { background: transparent; box-shadow: 0 0 0 2px #FF3B3B, 0 0 16px #FF3B3B; }
:root[data-theme="K"] .wwm-lifelines { gap: 12px; justify-content: flex-end; }
:root[data-theme="K"] .wwm-ll { --nc: #FF4FA3; width: auto; height: auto; padding: 5px 14px; border-radius: 999px; font-size: 0; }
:root[data-theme="K"] .wwm-ll::before { font-family: 'Sora', sans-serif; font-weight: 700; font-size: .78rem; color: #FFF8F0; }
:root[data-theme="K"] .wwm-ll:nth-child(1)::before { content: '50:50'; }
:root[data-theme="K"] .wwm-ll:nth-child(2)::before { content: 'Telefon'; }
:root[data-theme="K"] .wwm-ll:nth-child(3)::before { content: 'Publikum'; }
:root[data-theme="K"] .wwm-ll.used { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255,243,224,.12); }
:root[data-theme="K"] .wwm-ll.used::before { color: rgba(255,243,224,.25); }
:root[data-theme="K"] :is(.wwm-abar, .wwds-abar) { background: transparent; border-radius: 6px 6px 0 0; box-shadow: 0 0 0 2px #45F0FF, 0 0 12px #45F0FF, inset 0 0 12px rgba(69,240,255,.35); }
:root[data-theme="K"] :is(.wwm-apct, .wa-pct) { color: #FFF8F0; text-shadow: 0 0 6px #45F0FF; }

/* ── Wer weiss denn sowas: Schilder in drei Roehrenfarben ─────────────── */
:root[data-theme="K"] .wwds-cat { --nc: #FF4FA3; }
:root[data-theme="K"] .wwds-cat:nth-child(3n+2) { --nc: #45F0FF; }
:root[data-theme="K"] .wwds-cat:nth-child(3n) { --nc: #FFB52E; }
:root[data-theme="K"] .wwds-cat:hover:not(.done) { transform: none; filter: brightness(1.2); }
:root[data-theme="K"] .wwds-cat .wc-num { font-family: 'Yellowtail', cursive; font-size: 1.3rem; color: #FFF8F0; text-shadow: 0 0 6px var(--nc); }
:root[data-theme="K"] .wwds-cat.done { box-shadow: 0 0 0 1.5px rgba(255,243,224,.1); opacity: .5; }
:root[data-theme="K"] .wwds-q { --nc: #45F0FF; font-weight: 700; text-shadow: 0 0 6px rgba(69,240,255,.7); }
:root[data-theme="K"] .wwds-cat-chip { background: none; border: 0; font-family: 'Yellowtail', cursive; font-size: 1.3rem; letter-spacing: 0; text-transform: none; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3, 0 0 14px #FF4FA3; }
:root[data-theme="K"] .wwds-opt { --nc: #FF4FA3; border-radius: 999px; }
:root[data-theme="K"] .wwds-opt:nth-child(2) { --nc: #45F0FF; }
:root[data-theme="K"] .wwds-opt:nth-child(3) { --nc: #FFB52E; }
:root[data-theme="K"] .wwds-opt.sel { --nc: #FFE14D; }
:root[data-theme="K"] .wwds-opt.right { --nc: #7CFF6B; }
:root[data-theme="K"] .wwds-opt.bad { --nc: #FF3B3B; background: transparent; }
:root[data-theme="K"] .wwds-opt .wo-let { font-family: 'Yellowtail', cursive; color: #FFF8F0; text-shadow: 0 0 6px var(--nc); }
:root[data-theme="K"] .wwds-guess { border-radius: 12px; background: transparent; border: 0; box-shadow: 0 0 0 2px #FFB52E, 0 0 12px #FFB52E; }
:root[data-theme="K"] .wwds-timer { text-shadow: 0 0 6px #45F0FF, 0 0 18px #45F0FF; }

/* ── Der Duemmste fliegt: Kandidaten als runde Roehrenschilder ────────── */
:root[data-theme="K"] .ddf-player { --nc: #45F0FF; border-radius: 999px; }
:root[data-theme="K"] .ddf-player:nth-child(3n+2) { --nc: #FF4FA3; }
:root[data-theme="K"] .ddf-player:nth-child(3n) { --nc: #FFB52E; }
:root[data-theme="K"] .ddf-player-name { font-family: 'Yellowtail', cursive; font-size: 1.5rem; font-weight: 400; color: #FFF8F0; text-shadow: 0 0 6px var(--nc), 0 0 14px var(--nc); }
:root[data-theme="K"] .ddf-player.picked { --nc: #FF3B3B; }
:root[data-theme="K"] .ddf-player.out { --nc: rgba(255,243,224,.15); box-shadow: 0 0 0 1.5px rgba(255,243,224,.12); transform: none; }
:root[data-theme="K"] .ddf-heart.full { color: #FFE0EE; text-shadow: 0 0 5px #FF4FA3, 0 0 10px #FF4FA3; }
:root[data-theme="K"] .ddf-heart.empty { color: rgba(255,243,224,.1); }
:root[data-theme="K"] .ddf-question { font-family: 'Yellowtail', cursive; font-weight: 400; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3, 0 0 18px #FF4FA3; }
:root[data-theme="K"] .ddf-answer { color: #F0FFEC; text-shadow: 0 0 6px #7CFF6B, 0 0 16px #7CFF6B; }

/* ── Der Preis ist heiss: Gebote auf dem Kassenbon ────────────────────── */
:root[data-theme="K"] .pih-scores { border-bottom-color: rgba(255,243,224,.1); }
:root[data-theme="K"] .pih-score { --nc: rgba(69,240,255,.55); background: transparent; }
:root[data-theme="K"] .pih-score.lead { --nc: #FFB52E; background: transparent; }
:root[data-theme="K"] .pih-score-pts { color: #FFF8F0; text-shadow: 0 0 6px #FFB52E; }
:root[data-theme="K"] .pih-team { background: transparent; --nc: var(--team); }
:root[data-theme="K"] .pih-item { font-family: 'Yellowtail', cursive; font-weight: 400; font-size: 2.3rem; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3, 0 0 18px #FF4FA3; }
:root[data-theme="K"] .pih-stage :is(img, video) { border-radius: 14px; box-shadow: 0 0 0 2px #45F0FF, 0 0 14px #45F0FF; }
:root[data-theme="K"] .pih-price { font-family: 'Sora', sans-serif; font-weight: 700; color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 18px #FFB52E, 0 0 40px #FFB52E; }
:root[data-theme="K"] .pih-bid-grid:has(.pih-bid-row) {
  padding: 14px 18px 22px; background: #F4EFE4; color: #2A2420;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 0 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 0 90deg, #0000 0) bottom / 18px 9px repeat-x;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
:root[data-theme="K"] .pih-bid-row { background: transparent; border: 0; border-bottom: 1px dashed rgba(42,36,32,.35); border-radius: 0; box-shadow: none; color: #2A2420; font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: .95rem; --fg-rgb: 42,36,32; }
:root[data-theme="K"] .pih-bid-row.win { background: transparent; border-bottom: 1px dashed rgba(42,36,32,.35); box-shadow: none; color: #2A2420; font-weight: 800; }
:root[data-theme="K"] .pih-bid-row.win .pih-bid-name::before { content: '*** '; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="K"] .tp-team { border-radius: 18px; }
:root[data-theme="K"] .tp-team.turn { transform: none; box-shadow: 0 0 0 2px var(--nc), 0 0 22px var(--nc), inset 0 0 18px color-mix(in srgb, var(--nc) 45%, transparent); }
:root[data-theme="K"] .tp-team-name { font-family: 'Yellowtail', cursive; font-weight: 400; font-size: 1.5rem; color: #FFF8F0; text-shadow: 0 0 6px var(--nc), 0 0 14px var(--nc); }
:root[data-theme="K"] .tp-stage { --nc: #FFB52E; border-radius: 22px; }
:root[data-theme="K"] .tp-catchip { border-radius: 999px; }
:root[data-theme="K"] .tp-question { color: #FFF8F0; text-shadow: 0 0 6px rgba(69,240,255,.8), 0 0 16px rgba(69,240,255,.4); }
:root[data-theme="K"] .tp-answer { background: transparent; border: 0; color: #F0FFEC; box-shadow: 0 0 0 2px #7CFF6B, 0 0 12px #7CFF6B; text-shadow: 0 0 6px #7CFF6B; }
:root[data-theme="K"] .tp-answer.hidden { box-shadow: none; border: 2px dashed rgba(255,243,224,.15); text-shadow: none; }
:root[data-theme="K"] .tp-wheel-rotor { box-shadow: 0 0 0 3px #FF4FA3, 0 0 16px #FF4FA3, 0 0 40px rgba(255,79,163,.4); }
:root[data-theme="K"] .tp-wheel-hub { background: #170D10; border: 2px solid #45F0FF; box-shadow: 0 0 12px #45F0FF; color: #FFF8F0; text-shadow: 0 0 6px #45F0FF; }
:root[data-theme="K"] .tp-wheel-pointer { border-top-color: #FFE9C4; filter: drop-shadow(0 0 6px #FFB52E); }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="K"] .winner-text { font-size: 3.4rem; }
:root[data-theme="K"] .result-card { --nc: #45F0FF; backdrop-filter: none; }
:root[data-theme="K"] .result-scores strong { color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] .tour-bar { height: 8px; background: rgba(255,243,224,.06); }
:root[data-theme="K"] .tour-bar-fill { background: #FFE0EE; box-shadow: 0 0 6px #FF4FA3, 0 0 14px #FF4FA3; }
:root[data-theme="K"] .tour-total { color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3; }
:root[data-theme="K"] .q-list-item.tour-lead { background: transparent; box-shadow: 0 0 0 2px #FFB52E, 0 0 12px #FFB52E; }

/* ── Host: Menue als schief haengende Leuchtschilder ──────────────────── */
:root[data-theme="K"] .menu-card { --nc: #FF4FA3; border-radius: 16px; }
:root[data-theme="K"] .menu-card:nth-child(4n+2) { --nc: #45F0FF; rotate: 1.5deg; }
:root[data-theme="K"] .menu-card:nth-child(4n+3) { --nc: #FFB52E; rotate: -1deg; }
:root[data-theme="K"] .menu-card:nth-child(4n)   { --nc: #7CFF6B; rotate: 2deg; }
:root[data-theme="K"] .menu-card:nth-child(4n+1) { rotate: -2deg; }
:root[data-theme="K"] .menu-card::before { display: none; }
:root[data-theme="K"] .menu-card:hover { transform: translateY(-4px); background: rgba(23,13,16,.55); border: 0; box-shadow: 0 0 0 2px var(--nc), 0 0 24px var(--nc), inset 0 0 18px color-mix(in srgb, var(--nc) 45%, transparent); }
:root[data-theme="K"] .menu-card-title { font-family: 'Yellowtail', cursive; font-weight: 400; font-size: 1.6rem; color: #FFF8F0; text-shadow: 0 0 6px var(--nc), 0 0 14px var(--nc); }
:root[data-theme="K"] .menu-pill { --nc: rgba(69,240,255,.6); }
:root[data-theme="K"] :is(.menu-pill:hover, .menu-pill.active) { --nc: #45F0FF; color: #FFF8F0; background: transparent; }
:root[data-theme="K"] .menu-divider { height: 2px; background: #FFE0EE; box-shadow: 0 0 6px #FF4FA3, 0 0 14px #FF4FA3; }
:root[data-theme="K"] .btn { border-radius: 999px; }
:root[data-theme="K"] .btn:hover { transform: none; }
:root[data-theme="K"] .btn-primary { background: transparent; color: #FFF8F0; text-shadow: 0 0 6px #FF4FA3; box-shadow: 0 0 0 2px #FF4FA3, 0 0 14px #FF4FA3, inset 0 0 14px rgba(255,79,163,.45); }
:root[data-theme="K"] .btn-primary:hover { box-shadow: 0 0 0 2px #FF4FA3, 0 0 24px #FF4FA3, inset 0 0 18px rgba(255,79,163,.6); }
:root[data-theme="K"] .btn-primary::after { display: none; }
:root[data-theme="K"] .btn-secondary { --nc: rgba(69,240,255,.6); color: #FFF8F0; backdrop-filter: none; }
:root[data-theme="K"] .btn-danger { background: transparent; color: #FFF0F0; box-shadow: 0 0 0 2px #FF3B3B, 0 0 14px #FF3B3B; }
:root[data-theme="K"] :is(.editor-card, .setup-lobby, .resume-banner) { --nc: rgba(255,79,163,.45); border-radius: 18px; }
:root[data-theme="K"] .team-card { border-radius: 18px; }
:root[data-theme="K"] .page-title { font-family: 'Yellowtail', cursive; font-weight: 400; text-transform: none; text-shadow: 0 0 6px #FF4FA3, 0 0 18px #FF4FA3; }

/* Niedriges Fenster (Beamer 1280x720): Feud mit langer Frage lag 21 px
   unter dem Bild - Zahlen und Brett etwas flacher. */
@media (max-height: 900px) {
  :root[data-theme="K"] .team-panel .t-score { font-size: 2.9rem; }
  :root[data-theme="K"] .team-panel { padding-block: 10px; }
  :root[data-theme="K"] .board { padding: 16px 22px; }
  :root[data-theme="K"] .answers, :root[data-theme="K"] .answers.split { gap: 7px; row-gap: 7px; }
}

/* Eine Neonroehre zuendet: zweimal Aussetzer, dann steht sie. */
@keyframes thKFlacker {
  0%, 8%   { opacity: 0; }
  10%, 18% { opacity: 1; }
  20%, 30% { opacity: .15; }
  32%, 44% { opacity: 1; }
  46%, 50% { opacity: .4; }
  52%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="K"] :is(.team-strikes .strike-pip.lit, .wwm-rung.current::before) { animation: none; }
}


/* ══ K · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war K eine Neonfarbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, zwei Namen quer darueber,
   darunter ein Kasten mit Neonrand in der Bildmitte - und dieser Kasten
   war das Problem. Eine Roehre ist eine Linie, kein Rahmen um alles.
   Der Entwurf ist eine Wand nach Ladenschluss: an der oberen Kante haengen
   die Schilder (die Namen, leicht schief, jedes an seiner Aufhaengung),
   darunter haengt frei das grosse Schild der Sendung, und die Wand bleibt
   sonst dunkel. Also: der Rahmen um das Brett faellt weg, die Namen
   haengen oben an einer Bernsteinroehre, und die Frage ist das eine
   grosse Schild.
   Grundsatz: nur Kontur und Schein, keine gefuellten Flaechen, und genau
   ein Schild leuchtet laut - der Rest ist dunkles Glas.
   Markup und JavaScript sind nicht angefasst. */
:root[data-theme="K"] { --k-breit: min(1200px, 94vw); }

/* Der Screen fuellt den Rest des Fensters. `flex: 1 0 auto`: wachsen ja,
   schrumpfen nie - sonst wuerde ein langer Screen gestaucht und liefe aus
   dem Beamerbild. */
:root[data-theme="K"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto; width: 100%; max-width: var(--k-breit); padding-top: 0;
}
/* Das Brett ist kein Kasten mehr: die Wand traegt die Schilder. */
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #finale-screen) .board,
:root[data-theme="K"] #jeopardy-screen .jeopardy-board {
  background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0;
}
:root[data-theme="K"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  margin: 14px 0 8px; }
:root[data-theme="K"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 190px; max-height: 60px; }

/* ── Die Namen haengen an der Bernsteinroehre oben ── */
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #tp-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores, .tp-top) {
  position: relative; width: 100%; max-width: none; margin: 0; padding: 0 6px 14px;
  justify-content: space-between; flex-wrap: nowrap; gap: 24px;
  border-radius: 0; overflow: visible; box-shadow: none;
}
/* Die Roehre, an der die Schilder haengen. Als eigenes Element und nicht
   als box-shadow der Reihe: ein Schein am Kasten leuchtet rundherum und
   sah aus wie ein gerahmter Kasten - genau das, was hier weg sollte. */
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #tp-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores, .tp-top)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #FFE9C4;
  box-shadow: 0 0 8px #FFB52E, 0 0 20px #FFB52E;
}
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):is(.red, .blue, .green) {
  flex: 0 1 auto; padding: 6px 10px 10px; text-align: left;
}
/* Leicht schief wie ein Schild an zwei Ketten - erstes nach links, letztes
   nach rechts; mehr als 1,5 Grad wirkt kaputt statt gehaengt. */
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):first-child { rotate: -1.2deg; }
:root[data-theme="K"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):last-child { rotate: 1deg; text-align: right; }
:root[data-theme="K"] #game-screen .team-panel .t-score { font-size: clamp(2.2rem, 6vh, 3.2rem); }
:root[data-theme="K"] #game-screen .team-strikes { margin-top: 4px; }
:root[data-theme="K"] #game-screen .team-panel:last-child .team-strikes { justify-content: flex-end; }
:root[data-theme="K"] #game-screen .strike-pip { width: 24px; height: 24px; font-size: .85rem; }

/* ── Feud: das grosse Schild haengt unter der Roehre ── */
:root[data-theme="K"] #game-screen.active {
  display: grid; grid-template-areas: "teams" "kick" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="K"] #game-screen .scoreboard { grid-area: teams; }
:root[data-theme="K"] #game-screen .round-bar { grid-area: kick; justify-content: center; padding: 12px 0; }
:root[data-theme="K"] #game-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="K"] #game-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="K"] #game-screen .tile { min-height: clamp(42px, 8.5vh, 70px); }

/* ── Jeopardy: die Roehrenspalten fuellen die Wand ── */
:root[data-theme="K"] #jeopardy-screen.active {
  display: grid; grid-template-areas: "teams" "kick" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="K"] #jeopardy-screen .jeopardy-scores { grid-area: teams; }
:root[data-theme="K"] #jeopardy-screen .round-bar { grid-area: kick; justify-content: center; padding: 12px 0; }
:root[data-theme="K"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; }

/* Jeopardy-Frage: ein Schild an der Wand - Kategorie klein darueber, der
   Betrag als Bernsteinzahl rechts, die Frage gross in der Mitte. */
:root[data-theme="K"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  padding: 8vh max(5vw, (100vw - var(--k-breit)) / 2); column-gap: 36px; row-gap: 0;
}
:root[data-theme="K"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="K"] .jeopardy-clue-cat { grid-area: cat; align-self: end; justify-self: start; padding-bottom: 14px; }
:root[data-theme="K"] .jeopardy-clue-pts { grid-area: pts; align-self: end; justify-self: end; padding-bottom: 14px; }
:root[data-theme="K"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { border-bottom: 2px solid #FFE9C4; box-shadow: 0 2px 10px rgba(255,181,46,.5); }
:root[data-theme="K"] .jeopardy-clue-text {
  grid-area: frage; max-width: none; text-align: left; margin-top: 40px;
  font-size: clamp(2.2rem, 4vw + .8vh, 4rem); line-height: 1.08;
}
:root[data-theme="K"] .jeopardy-clue-blank { grid-area: frage; justify-self: start; margin-top: 40px; }
:root[data-theme="K"] .jeopardy-answer-text { grid-area: antwort; justify-self: start; text-align: left; margin-top: 26px; }

/* ── WWM: Balkenleiter oben, Antworten als Roehren darunter ── */
:root[data-theme="K"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="K"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="K"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="K"] #wwm-screen .wwm-opt { min-height: clamp(56px, 10.5vh, 86px); }

/* ── WWDS: Schilderwand ── */
:root[data-theme="K"] #wwds-screen.active {
  display: grid; grid-template-areas: "teams" "kick" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="K"] #wwds-screen .wwds-top { grid-area: teams; }
:root[data-theme="K"] #wwds-screen .round-bar { grid-area: kick; justify-content: center; padding: 12px 0; }
:root[data-theme="K"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="K"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="K"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="K"] #wwds-screen .wwds-cat { min-height: clamp(46px, 8.5vh, 76px); }
:root[data-theme="K"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="K"] #wwds-screen .wwds-opt { min-height: clamp(44px, 8vh, 70px); }
/* Mit Publikumsjoker kommt ein Balkenbild dazu - ohne Deckel laeuft die
   Seite unten aus dem Beamerbild. */
:root[data-theme="K"] #wwds-screen:has(.wwds-aud) .wwds-opt { min-height: clamp(36px, 5.6vh, 48px); }
:root[data-theme="K"] #wwds-screen .wwds-aud { height: clamp(50px, 8.5vh, 66px); }
:root[data-theme="K"] #wwds-screen:has(.wwds-aud) .round-bar { padding: 6px 0; }
:root[data-theme="K"] #wwds-screen:has(.wwds-aud) .wwds-top { padding-bottom: 8px; }
:root[data-theme="K"] #wwds-screen:has(.wwds-aud) .wwds-q { padding-block: 8px; margin-bottom: 8px !important; }
/* Mit Joker darf die Antwortliste nicht mehr den Rest der Hoehe nehmen:
   sonst rutscht das Balkenbild ganz nach unten und seine Beschriftung
   (A B C) steht 5 px unter dem Beamerbild. */
:root[data-theme="K"] #wwds-screen:has(.wwds-aud) .wwds-opts { gap: 7px; flex: 0 0 auto; }

/* ── DDF: die Mitspieler haengen als kleine Schilder unten ──
   Der innere Wrapper traegt inline `height:100%` - zirkulaer, sobald der
   Screen mit dem Inhalt waechst. Daher `height:auto` plus `flex:1`. */
:root[data-theme="K"] #ddf-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "spieler" "kick" "uhr" "frage" "media" "antwort" "note" "vote";
  grid-template-rows: auto auto auto 1fr auto auto auto auto;
}
:root[data-theme="K"] #ddf-screen .ddf-players { grid-area: spieler; max-width: none; margin: 0 0 14px; }
:root[data-theme="K"] #ddf-screen .ddf-alive { grid-area: kick; margin: 0 0 4px; }
:root[data-theme="K"] #ddf-timer { grid-area: uhr; color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] #ddf-screen .ddf-question { grid-area: frage; display: flex; align-items: center; justify-content: center; }
:root[data-theme="K"] #ddf-screen .ddf-media-bar { grid-area: media; }
:root[data-theme="K"] #ddf-screen .ddf-answer { grid-area: antwort; }
:root[data-theme="K"] #ddf-screen .ddf-note { grid-area: note; }
:root[data-theme="K"] #ddf-screen .ddf-vote-grid { grid-area: vote; }

/* ── PIH: Kassenbon unten, der Artikel gross an der Wand ── */
:root[data-theme="K"] #pih-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "teams" "rang" "uhr" "artikel" "bild" "media" "preis" "note" "gebote";
  grid-template-rows: auto auto auto auto 1fr auto auto auto auto;
}
:root[data-theme="K"] #pih-teams { grid-area: teams; }
:root[data-theme="K"] #pih-screen .pih-scores { grid-area: rang; max-width: none; gap: 6px; }
:root[data-theme="K"] #pih-screen .pih-score { padding: 3px 12px; gap: 7px; }
:root[data-theme="K"] #pih-screen .pih-score .pmini-av { width: 22px; height: 22px; font-size: .8rem; }
:root[data-theme="K"] #pih-timer { grid-area: uhr; color: #FFF8F0; text-shadow: 0 0 6px #FFB52E, 0 0 16px #FFB52E; }
:root[data-theme="K"] #pih-screen .pih-item { grid-area: artikel; }
:root[data-theme="K"] #pih-screen .pih-stage { grid-area: bild; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* Ohne Deckel schiebt das Produktfoto die Gebote aus dem Beamerbild. */
:root[data-theme="K"] #pih-screen .pih-stage :is(img, video) { max-height: min(26vh, 220px); width: auto; }
:root[data-theme="K"] #pih-screen .pih-media-bar { grid-area: media; }
:root[data-theme="K"] #pih-screen .pih-price { grid-area: preis; }
:root[data-theme="K"] #pih-screen .pih-note { grid-area: note; }
:root[data-theme="K"] #pih-screen .pih-bid-grid { grid-area: gebote; }

/* ── TP: Rad und Frage an der Wand, Namen oben ── */
:root[data-theme="K"] #tp-screen.active {
  display: grid; grid-template-areas: "teams" "kick" "board"; grid-template-rows: auto auto 1fr; row-gap: 0;
}
:root[data-theme="K"] #tp-screen .tp-top { grid-area: teams; }
:root[data-theme="K"] #tp-screen .tp-team:is(.red, .blue, .green) {
  flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 6px 12px 10px; background: transparent; box-shadow: none; transform: none;
}
:root[data-theme="K"] #tp-screen .tp-team:first-child { rotate: -1.2deg; }
:root[data-theme="K"] #tp-screen .tp-team:last-child { rotate: 1deg; flex-direction: row-reverse; text-align: right; }
:root[data-theme="K"] #tp-screen .tp-team .tp-pie { width: 50px; height: 50px; flex: none; margin: 0; }
:root[data-theme="K"] #tp-screen .round-bar { grid-area: kick; justify-content: center; padding: 12px 0; }
:root[data-theme="K"] #tp-screen .tp-board { grid-area: board; align-self: center; width: 100%; justify-content: center; }

/* ── Feud-Finale: Stand oben an der Roehre, Frage als Schild darunter ── */
:root[data-theme="K"] #finale-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "stand stand" "kopf uhr" "vergleich vergleich" "board board";
  grid-template-rows: auto auto auto 1fr; column-gap: 28px; row-gap: 0;
}
:root[data-theme="K"] #finale-screen .finale-scores {
  position: relative; grid-area: stand; width: 100%; max-width: none; margin: 0; padding: 0 6px 14px;
  justify-content: space-between;
}
:root[data-theme="K"] #finale-screen .finale-scores::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #FFE9C4;
  box-shadow: 0 0 8px #FFB52E, 0 0 20px #FFB52E;
}
:root[data-theme="K"] #finale-screen .finale-header { grid-area: kopf; align-self: center; display: flex; align-items: baseline; gap: 16px; text-align: left; padding-top: 12px; }
:root[data-theme="K"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; }
/* Von js/feud.js erzeugt - ohne eigene Flaeche landet es per
   Auto-Platzierung oben rechts im Raster. */
:root[data-theme="K"] #finale-reveal-comparison { grid-area: vergleich; justify-content: center; margin-top: 12px; }
:root[data-theme="K"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 12px; }
:root[data-theme="K"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="K"] #finale-screen .finale-big-q { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ── Ergebnis: das letzte Schild der Nacht ── */
:root[data-theme="K"] #result-screen.active { width: 100%; max-width: min(860px, 92vw); }
:root[data-theme="K"] #result-screen .result-card { width: 100%; }

/* ── Menue: die Schilderwand ──
   Statt eines 720-px-Blocks in der Mitte vier Spalten ueber die volle
   Breite. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="K"] #menu-screen.active { width: 100%; max-width: var(--k-breit); }
:root[data-theme="K"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* ── L · New York (Rework 2026-10-14): die Zeitung als Buehne ───────────────
   Identitaet aus designs/s/L-*.html: Zeitungspapier mit Falz, schwarze
   Druckfarbe, Playfair 900 fuer Schlagzeilen, Old Standard fuer Spitzmarken
   in gesperrten Kapitaelchen, Fraktur nur im Kopf. Vorher stand die Show auf
   mittelbraunem Grund mit Vignette - der Entwurf ist aber durchgehend
   Papier. Jetzt ist jede Flaeche eine Zeitungsseite:
   Spielstand-Kasten mit Teamfarb-Quadrat (BAUPLAN 4.4), "Dementis" als
   schwarze X-Kaesten, Jeopardy als Kreuzwortraetsel mit Feldnummern, WWM als
   Stimmzettel mit Gewinnstufen-Tabelle, Kleinanzeigen bei PIH (Gewinner
   eingekreist), ein roter "Ausgeschieden"-Stempel bei DDF, das Menue als
   Inhaltsverzeichnis. Keine Schatten, keine Rundungen - nur Linien und Satz.
   Signatur: wie frisch gedruckt. */
:root[data-theme="L"] {
  --brd-surface: #EFE8D6;
  --brd-frame: 0 0 0 1px #1A1712, 0 0 0 5px #EFE8D6, 0 0 0 7px #1A1712;
  --brd-well: #1A1712;
  --brd-inner: transparent;
  --brd-radius: 0;
  --brd-fg: #1A1712;
  --tile: transparent;
  --tile-hover: rgba(26,23,18,.05);
  --tile-edge: inset 0 -1px 0 rgba(26,23,18,.35);
  --tile-fg: #1A1712;
  --tile-head: #EFE8D6;
  --tile-head-fg: #1A1712;
  --tile-used: #1A1712;
  --tile-num: #1A1712;
  --tile-num-glow: none;
  --tile-dim-fg: #1A1712;
  --tile-bar: #1A1712;
  --tile-rule: transparent;
  --tile-open: repeating-linear-gradient(-45deg, rgba(26,23,18,.12) 0 2px, transparent 2px 7px);
  --tile-open-edge: inset 0 -2px 0 #1A1712;
  --tile-open-fg: #1A1712;
  --tile-open-dim: #1A1712;
  --tile-pts-bg: #EFE8D6;
  --tile-pts-rule: #1A1712;
  --tile-pick: #1A1712;
  --tile-pick-fg: #EFE8D6;
  --tile-right: repeating-linear-gradient(-45deg, rgba(26,23,18,.18) 0 2px, transparent 2px 7px), #EFE8D6;
  --tile-right-fg: #1A1712;
  --tile-radius: 0;
  --tile-font: 'Playfair Display', serif;
  --tile-reveal: thLDruck .6s ease-out;
  --l-ink: #1A1712;
  --l-paper: #EFE8D6;
  --l-kap: 'Old Standard TT', serif;
}
/* Der Falz in der Mitte der Seite, wie im Entwurf. */
:root[data-theme="L"] body::before {
  content: ''; position: fixed; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(26,23,18,.05) 45%, rgba(255,255,255,.18) 50%, rgba(26,23,18,.04) 55%, transparent);
}

/* ── Spielstand-Kaesten ───────────────────────────────────────────────── */
:root[data-theme="L"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #B4232F; }
:root[data-theme="L"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #2453B8; }
:root[data-theme="L"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #1E7A42; }
:root[data-theme="L"] :is(.scoreboard, .jeopardy-scores) { gap: 14px; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-theme="L"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  --fg: #1A1712; --fg-rgb: 26,23,18; --muted: #4A443A; --accent-text: #1A1712; --accent-text-rgb: 26,23,18;
  --field-bg: rgba(255,255,255,.6); --field-line: rgba(26,23,18,.35);
  color: #1A1712; background: transparent; border: 0; border-radius: 0;
  box-shadow: inset 0 3px 0 #1A1712, inset 0 -1px 0 #1A1712; text-align: left;
}
:root[data-theme="L"] .team-card::before { display: none; }
/* Der helle Feldgrund muss gegen die Hell-Regel weiter unten gewinnen, die
   auf Teamkarten dunkle Felder setzt (dort sind die Karten sonst farbig). */
:root[data-theme="L"][data-theme-hell] :is(.team-card, .team-panel, .jeopardy-team, .wwds-team):is(.red, .blue, .green) { --field-bg: rgba(255,255,255,.6); --field-line: rgba(26,23,18,.35); }
/* Leise Hinweise (#9a9a9a fest) waren auf Papier kaum lesbar. */
:root[data-theme="L"] :is(.ddf-note, .pih-note) { color: #4A443A; }
:root[data-theme="L"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  font-family: var(--l-kap); font-weight: 700; font-size: .7rem; letter-spacing: 2.5px; color: #1A1712;
}
:root[data-theme="L"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label)::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--tc); vertical-align: 0;
}
:root[data-theme="L"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; text-shadow: none; text-align: right; line-height: 1;
}
:root[data-theme="L"] .team-panel .t-score { font-size: 3rem; }
:root[data-theme="L"] .team-panel.active-team { padding: 16px 12px; box-shadow: inset 0 3px 0 #1A1712, inset 0 -5px 0 #1A1712; }
:root[data-theme="L"] .team-panel.active-team::after { display: none; }
:root[data-theme="L"] .wwds-team.on { border: 0; box-shadow: inset 0 3px 0 #1A1712, inset 0 -5px 0 #1A1712; }
:root[data-theme="L"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #1A1712; text-shadow: none; }
:root[data-theme="L"] :is(.team-panel.active-team .t-name, .wwds-team.on .wt-name)::after { content: '  · am Zug'; font-style: italic; letter-spacing: .5px; text-transform: none; white-space: pre; }

/* "Dementis": schwarze Kaesten mit X. */
:root[data-theme="L"] .team-strikes { justify-content: flex-start; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; transform: none; }
:root[data-theme="L"] .strike-pip { width: 26px; height: 26px; border-radius: 0; background: transparent; border: 1px solid #1A1712; color: rgba(26,23,18,.25); font-family: 'Playfair Display', serif; font-weight: 900; font-size: .9rem; }
:root[data-theme="L"] .strike-pip.lit { background: #1A1712; border-color: #1A1712; color: #EFE8D6; box-shadow: none; }

/* Folio-Zeile wie oben auf jeder Zeitungsseite. */
:root[data-theme="L"] .round-bar { align-self: stretch; padding: 4px 0; border-top: 1px solid #1A1712; border-bottom: 1px solid #1A1712; font-family: var(--l-kap); font-weight: 700; letter-spacing: 2.5px; color: #1A1712; font-size: .66rem; }
:root[data-theme="L"] .round-bar .pts { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.1rem; letter-spacing: 0; color: #1A1712; }

/* ── Feud: Umfrage mit geschwaerzten und schraffierten Zeilen ─────────── */
:root[data-theme="L"] .q-text { color: #1A1712; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.7rem; line-height: 1.1; justify-content: flex-start; text-align: left; border-bottom: 1px solid #1A1712; border-radius: 0; margin-bottom: 8px; }
:root[data-theme="L"] .q-text::before { content: 'Umfrage: '; font-style: italic; font-weight: 700; margin-right: .3em; }
:root[data-theme="L"] .q-text.hidden-q { justify-content: center; background: none; border: 0; border-bottom: 1px solid #1A1712; }
:root[data-theme="L"] .q-text.hidden-q::before { display: none; }
:root[data-theme="L"] .q-text.hidden-q::after { color: #1A1712; font-family: var(--l-kap); }
:root[data-theme="L"] .tile:hover:not(.open) { transform: none; }
:root[data-theme="L"] .tile-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.15rem; }
:root[data-theme="L"] .tile-num::after { content: '.'; }
/* Verdeckt: eine geschwaerzte Zeile, wie zensiert. */
:root[data-theme="L"] .tile:not(.open) .tile-center { justify-content: flex-start; padding-left: 14px; }
:root[data-theme="L"] .tile:not(.open) .tile-center::after { height: 12px; border-radius: 0; width: 46%; }
:root[data-theme="L"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.3rem; }
:root[data-theme="L"] .tile.open .tile-pts { color: #1A1712; text-shadow: none; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.6rem; box-shadow: none; }
:root[data-theme="L"] .tile.missed .tile-inner { background: transparent !important; box-shadow: inset 0 -1px 0 rgba(26,23,18,.35) !important; color: #6E6556; font-style: italic; }

/* Finale */
:root[data-theme="L"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner) { font-family: 'Playfair Display', serif; font-weight: 900; letter-spacing: 0; text-transform: none; color: #1A1712; text-shadow: none; }
:root[data-theme="L"] .elim-team { font-family: 'Playfair Display', serif; font-weight: 900; text-shadow: none; }
:root[data-theme="L"] :is(.finale-team-label, .finale-q-info) { font-family: var(--l-kap); letter-spacing: 2.5px; color: #1A1712; }
:root[data-theme="L"] :is(.finale-score-card, .finale-reveal-team) { background: transparent; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] .finale-score-card.active { background: transparent; box-shadow: inset 0 0 0 1px #1A1712, inset 0 -5px 0 #1A1712; }
:root[data-theme="L"] :is(.finale-score-pts, .finale-reveal-pts, .finale-timer) { font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; }
:root[data-theme="L"] .finale-big-q { font-family: 'Playfair Display', serif; font-weight: 900; text-shadow: none; }

/* ── Jeopardy als Kreuzwortraetsel, Felder nummeriert ─────────────────── */
:root[data-theme="L"] .jeopardy-board { gap: 1px; padding: 1px; border-radius: 0; counter-reset: lfeld; }
:root[data-theme="L"] .jeopardy-cat { font-family: var(--l-kap); font-weight: 700; font-size: .75rem; letter-spacing: 1.5px; border-radius: 0; }
:root[data-theme="L"] .jeopardy-cell { position: relative; counter-increment: lfeld; background: #FBF8F0; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.8rem; letter-spacing: 0; border-radius: 0; text-shadow: none; }
:root[data-theme="L"] .jeopardy-cell::before { content: counter(lfeld); position: absolute; left: 4px; top: 2px; font-family: var(--l-kap); font-size: .6rem; font-weight: 400; line-height: 1; color: #1A1712; }
:root[data-theme="L"] .jeopardy-cell.used { background: #1A1712; }
:root[data-theme="L"] .jeopardy-cell.used::before { display: none; }
:root[data-theme="L"] .jeopardy-cell:hover:not(.used) { background: #FFFFFF; transform: none; box-shadow: inset 0 0 0 2px #1A1712; }
:root[data-theme="L"] .jeopardy-clue-cat { font-family: var(--l-kap); letter-spacing: 3px; color: #1A1712; }
:root[data-theme="L"] .jeopardy-clue-pts { font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; letter-spacing: 0; }
:root[data-theme="L"] .jeopardy-clue-text { font-family: 'Playfair Display', serif; font-weight: 900; line-height: 1.1; }
:root[data-theme="L"] .jeopardy-clue-img { border-radius: 0; border: 1px solid #1A1712; box-shadow: 0 0 0 4px #EFE8D6, 0 0 0 5px #1A1712; filter: grayscale(.3) contrast(1.05); }

/* ── WWM als Stimmzettel mit Gewinnstufen-Tabelle ─────────────────────── */
:root[data-theme="L"] .wwm-q { color: #1A1712; text-align: left; justify-content: flex-start; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; line-height: 1.1; }
:root[data-theme="L"] .wwm-answers { padding: 10px 14px; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] .wwm-opt { background: transparent; box-shadow: inset 0 -1px 0 #1A1712; font-size: 1.4rem; font-weight: 700; }
:root[data-theme="L"] .wwm-opt:hover { filter: none; background: rgba(26,23,18,.04); }
:root[data-theme="L"] .wwm-opt .wwm-letter { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; border: 2px solid #1A1712; color: #1A1712; font-family: 'Playfair Display', serif; font-size: 1rem; }
:root[data-theme="L"] .wwm-opt.selected .wwm-letter { background: #1A1712; color: #EFE8D6; }
:root[data-theme="L"] .wwm-opt.selected { background: transparent; color: #1A1712; }
:root[data-theme="L"] .wwm-opt.correct { box-shadow: inset 0 -4px 0 #1A1712; }
:root[data-theme="L"] .wwm-opt.wrong { background: transparent; color: #8A2018; text-decoration: line-through; }
:root[data-theme="L"] .wwm-ladder { background: transparent !important; box-shadow: inset 0 0 0 1px #1A1712, inset 0 0 0 4px #EFE8D6, inset 0 0 0 5px #1A1712 !important; border-radius: 0; padding: 10px 12px; }
:root[data-theme="L"] .wwm-rung { border-radius: 0; font-family: var(--l-kap); font-size: .9rem; letter-spacing: .5px; color: #1A1712; padding-inline: 6px; }
:root[data-theme="L"] .wwm-rung .wwm-lvl { font-family: var(--l-kap); color: #4A443A; }
:root[data-theme="L"] .wwm-rung.safe { font-weight: 700; }
:root[data-theme="L"] .wwm-rung.safe .wwm-amt { color: #1A1712; text-decoration: underline; }
:root[data-theme="L"] .wwm-rung.won { color: #6E6556; }
:root[data-theme="L"] .wwm-rung.current { background: #1A1712; color: #EFE8D6; }
:root[data-theme="L"] .wwm-rung.current :is(.wwm-lvl, .wwm-amt) { color: #EFE8D6; }
/* Joker als Ankreuzfelder: ☐ frei, ☒ verbraucht. */
:root[data-theme="L"] .wwm-lifelines { justify-content: flex-start; gap: 18px; }
:root[data-theme="L"] .wwm-ll { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="L"] .wwm-ll::before { font-family: var(--l-kap); font-size: .9rem; font-weight: 400; color: #1A1712; }
:root[data-theme="L"] .wwm-ll:nth-child(1)::before { content: '☐ 50:50'; }
:root[data-theme="L"] .wwm-ll:nth-child(2)::before { content: '☐ Telefon'; }
:root[data-theme="L"] .wwm-ll:nth-child(3)::before { content: '☐ Publikum'; }
:root[data-theme="L"] .wwm-ll.used { opacity: 1; }
:root[data-theme="L"] .wwm-ll.used:nth-child(1)::before { content: '☒ 50:50'; color: #6E6556; text-decoration: line-through; }
:root[data-theme="L"] .wwm-ll.used:nth-child(2)::before { content: '☒ Telefon'; color: #6E6556; text-decoration: line-through; }
:root[data-theme="L"] .wwm-ll.used:nth-child(3)::before { content: '☒ Publikum'; color: #6E6556; text-decoration: line-through; }
:root[data-theme="L"] :is(.wwm-abar, .wwds-abar) { background: repeating-linear-gradient(-45deg, #1A1712 0 2px, transparent 2px 6px); border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] :is(.wwm-apct, .wa-pct) { color: #1A1712; font-family: 'Playfair Display', serif; font-weight: 900; }

/* ── WWDS: Stimmzettel mit Kreisen ────────────────────────────────────── */
:root[data-theme="L"] .wwds-cat { border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712; background: #FBF8F0; }
:root[data-theme="L"] .wwds-cat:hover:not(.done) { transform: none; filter: none; box-shadow: inset 0 0 0 2px #1A1712; }
:root[data-theme="L"] .wwds-cat .wc-num { font-family: var(--l-kap); color: #1A1712; font-size: .8rem; }
:root[data-theme="L"] .wwds-cat .wc-name { font-family: 'Playfair Display', serif; font-weight: 900; text-transform: none; letter-spacing: 0; font-size: 1rem; }
:root[data-theme="L"] .wwds-cat.done { background: #1A1712; color: #EFE8D6; opacity: 1; }
:root[data-theme="L"] .wwds-q { background: transparent !important; border: 0 !important; border-radius: 0; text-align: left; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.8rem; line-height: 1.1; padding-inline: 0; }
:root[data-theme="L"] .wwds-cat-chip { background: none; border: 0; border-radius: 0; padding: 0; font-family: var(--l-kap); letter-spacing: 2.5px; color: #1A1712; }
:root[data-theme="L"] .wwds-opt { background: transparent; box-shadow: inset 0 -1px 0 #1A1712; border-radius: 0; font-size: 1.3rem; }
:root[data-theme="L"] .wwds-opt .wo-let { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; border: 2px solid #1A1712; border-radius: 50%; color: #1A1712; font-family: 'Playfair Display', serif; font-size: 1rem; }
:root[data-theme="L"] .wwds-opt.sel { background: transparent; color: #1A1712; }
:root[data-theme="L"] .wwds-opt.sel .wo-let { background: #1A1712; color: #EFE8D6; }
:root[data-theme="L"] .wwds-opt.right { box-shadow: inset 0 -4px 0 #1A1712; }
:root[data-theme="L"] .wwds-opt.bad { background: transparent; color: #8A2018; text-decoration: line-through; }
:root[data-theme="L"] .wwds-tag { border-radius: 0; }
:root[data-theme="L"] .wwds-guess { border-radius: 0; background: #FBF8F0; border: 1px solid #1A1712; color: #1A1712; font-family: 'Playfair Display', serif; font-weight: 900; }

/* ── DDF: Portraets mit Stempel ───────────────────────────────────────── */
:root[data-theme="L"] .ddf-player { position: relative; background: #FBF8F0; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712; text-align: left; }
:root[data-theme="L"] .ddf-player-name { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.15rem; }
:root[data-theme="L"] .ddf-player.picked { border: 0; box-shadow: inset 0 0 0 1px #1A1712, inset 0 -5px 0 #1A1712; }
:root[data-theme="L"] .ddf-player.out { opacity: 1; transform: none; color: #6E6556; }
:root[data-theme="L"] .ddf-player.out::after {
  content: 'Ausgeschieden'; position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg;
  padding: 2px 8px; border: 2px solid #B4232F; color: #B4232F; font-family: var(--l-kap); font-weight: 700; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; background: rgba(251,248,240,.6);
}
:root[data-theme="L"] .ddf-heart { font-size: 0; margin-right: 3px; vertical-align: middle; }
:root[data-theme="L"] .ddf-heart::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1A1712; }
:root[data-theme="L"] .ddf-heart.empty::before { background: transparent; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] .ddf-question { font-family: 'Playfair Display', serif; font-weight: 900; }
:root[data-theme="L"] .ddf-answer { color: #1A1712 !important; font-family: 'Playfair Display', serif; font-style: italic; }

/* ── PIH: Kleinanzeigen, der Gewinner eingekreist ─────────────────────── */
:root[data-theme="L"] .pih-scores { border-bottom: 1px solid #1A1712; }
:root[data-theme="L"] .pih-score { border-radius: 0; background: transparent; border: 1px solid #1A1712; box-shadow: none; }
:root[data-theme="L"] .pih-score.lead { background: transparent; border-width: 2px; }
:root[data-theme="L"] .pih-score-pts { font-family: 'Playfair Display', serif; color: #1A1712; }
:root[data-theme="L"] .pih-team { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px #1A1712, inset 4px 0 0 var(--team); opacity: .75; }
:root[data-theme="L"] .pih-team.lead { opacity: 1; box-shadow: inset 0 0 0 2px #1A1712, inset 6px 0 0 var(--team); }
:root[data-theme="L"] .pih-team-pts { font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; }
:root[data-theme="L"] .pih-item { font-family: 'Playfair Display', serif; font-weight: 900; }
:root[data-theme="L"] .pih-stage :is(img, video) { border-radius: 0; border: 1px solid #1A1712; filter: grayscale(.3) contrast(1.05); }
:root[data-theme="L"] .pih-price { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 3rem; color: #1A1712; text-shadow: none; }
:root[data-theme="L"] .pih-bid-row { position: relative; background: #FBF8F0; border: 1px solid #1A1712; border-radius: 0; box-shadow: none; }
:root[data-theme="L"] .pih-bid-row.win { background: #FBF8F0; border: 1px solid #1A1712; box-shadow: none; color: #1A1712; }
:root[data-theme="L"] .pih-bid-row.win::after { content: ''; position: absolute; inset: -7px -12px; border: 2px solid #1A1712; border-radius: 50%; rotate: -2deg; pointer-events: none; }
:root[data-theme="L"] .pih-bid-val { font-family: 'Playfair Display', serif; font-weight: 900; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="L"] .tp-team { background: transparent; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 0 0 1px #1A1712, inset 0 4px 0 var(--tc); }
:root[data-theme="L"] .tp-team.turn { transform: none; background: transparent; box-shadow: inset 0 0 0 2px #1A1712, inset 0 -5px 0 #1A1712; }
:root[data-theme="L"] .tp-team-name { font-family: 'Playfair Display', serif; font-weight: 900; }
:root[data-theme="L"] .tp-stage { background: transparent; border: 0; border-top: 3px solid #1A1712; border-bottom: 1px solid #1A1712; border-radius: 0; box-shadow: none; }
:root[data-theme="L"] .tp-catchip { border-radius: 0; font-family: var(--l-kap); letter-spacing: 2px; }
:root[data-theme="L"] .tp-question { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.9rem; line-height: 1.1; }
:root[data-theme="L"] .tp-answer { border-radius: 0; border: 1px solid #1A1712; }
:root[data-theme="L"] .tp-answer.hidden { background: transparent; border: 1px dashed #1A1712; color: #4A443A; }
:root[data-theme="L"] .tp-wheel-rotor { box-shadow: 0 0 0 2px #1A1712, 0 0 0 6px #EFE8D6, 0 0 0 7px #1A1712; }
:root[data-theme="L"] .tp-wheel-hub { background: #EFE8D6; border: 2px solid #1A1712; box-shadow: none; color: #1A1712; font-family: 'Playfair Display', serif; font-weight: 900; }
:root[data-theme="L"] .tp-wheel-pointer { border-top-color: #1A1712; filter: none; }
:root[data-theme="L"] .tp-pie { filter: none; }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="L"] .result-card { background: #FBF8F0; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px #1A1712, inset 0 0 0 4px #FBF8F0, inset 0 0 0 5px #1A1712; backdrop-filter: none; }
:root[data-theme="L"] .result-scores strong { font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; }
:root[data-theme="L"] .tour-bar { height: 10px; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px #1A1712; }
:root[data-theme="L"] .tour-bar-fill { border-radius: 0; background: repeating-linear-gradient(-45deg, #1A1712 0 2px, transparent 2px 5px); }
:root[data-theme="L"] .tour-total { font-family: 'Playfair Display', serif; font-weight: 900; color: #1A1712; }
:root[data-theme="L"] .q-list-item { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(26,23,18,.4); }
:root[data-theme="L"] .q-list-item.tour-lead { background: transparent; border-bottom: 3px solid #1A1712; }

/* ── Host: Menue als Inhaltsverzeichnis, Knoepfe in Druckschwarz ──────── */
:root[data-theme="L"] .menu-cards { gap: 0; counter-reset: lseite; border-top: 3px solid #1A1712; border-bottom: 1px solid #1A1712; }
:root[data-theme="L"] .menu-card {
  counter-increment: lseite; background: transparent; border: 0; border-radius: 0; box-shadow: inset -1px 0 0 rgba(26,23,18,.5);
  text-align: left; align-items: flex-start; padding: 26px 14px 16px;
}
:root[data-theme="L"] .menu-card::before { content: 'Seite ' counter(lseite); left: 14px; top: 9px; right: auto; height: auto; background: none; opacity: 1; font-family: var(--l-kap); font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: #1A1712; }
:root[data-theme="L"] .menu-card:hover { transform: none; background: rgba(26,23,18,.04); border: 0; box-shadow: inset -1px 0 0 rgba(26,23,18,.5), inset 0 -4px 0 #1A1712; }
:root[data-theme="L"] .menu-card-icon { justify-content: flex-start; }
:root[data-theme="L"] .menu-card-icon svg { filter: none; }
:root[data-theme="L"] .menu-card-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.2rem; line-height: 1.1; color: #1A1712; }
:root[data-theme="L"] .menu-card-sub { font-style: italic; color: #4A443A; }
:root[data-theme="L"] .menu-pill { border-radius: 0; border: 1px solid #1A1712; font-family: var(--l-kap); letter-spacing: 1.5px; color: #1A1712; }
:root[data-theme="L"] :is(.menu-pill:hover, .menu-pill.active) { background: #1A1712; color: #EFE8D6; border-color: #1A1712; }
:root[data-theme="L"] .menu-divider { height: 4px; border-top: 1px solid #1A1712; border-bottom: 1px solid #1A1712; background: none; width: 260px; }
:root[data-theme="L"] .btn { border-radius: 0; font-family: var(--l-kap); font-weight: 700; letter-spacing: 2.5px; }
:root[data-theme="L"] .btn:hover { transform: none; }
:root[data-theme="L"] .btn-primary { background: #1A1712; color: #EFE8D6; box-shadow: none; }
:root[data-theme="L"] .btn-primary:hover { background: #000; box-shadow: none; }
:root[data-theme="L"] .btn-primary::after { display: none; }
:root[data-theme="L"] .btn-secondary { background: transparent; border: 1px solid #1A1712; color: #1A1712; backdrop-filter: none; }
:root[data-theme="L"] .btn-secondary:hover { background: rgba(26,23,18,.06); color: #1A1712; }
:root[data-theme="L"] .btn-danger { background: #8A2018; color: #EFE8D6; box-shadow: none; }
:root[data-theme="L"] .btn-accent { background: #2453B8; color: #EFE8D6; box-shadow: none; }
:root[data-theme="L"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 0; background: rgba(251,248,240,.6); border: 1px solid #1A1712; }
:root[data-theme="L"] :is(.pr-team-btn, .setup-lobby .badge, .player-team-tag, .pmini-av) { border-radius: 0; }
:root[data-theme="L"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select) { border-radius: 0 !important; }
:root[data-theme="L"] .page-title { font-family: 'Playfair Display', serif; font-weight: 900; }

/* Niedriges Fenster (Beamer 1280x720): Feud mit langer Frage lag 7 px
   unter dem Bild. */
@media (max-height: 900px) {
  :root[data-theme="L"] .q-text { font-size: 1.45rem; margin-bottom: 4px; }
  :root[data-theme="L"] .team-panel { padding-block: 10px; }
  :root[data-theme="L"] .team-panel.active-team { padding-block: 10px; }
}

/* Wie frisch gedruckt: unscharf und dunkel, dann setzt die Farbe. */
@keyframes thLDruck {
  0%   { opacity: 0; filter: blur(5px) contrast(2); transform: scale(1.04); }
  60%  { opacity: 1; filter: blur(.5px); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

/* ══ L · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war L eine Zeitungsfarbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, zwei Kaesten quer darueber,
   darunter ein Block in der Bildmitte - ringsum leeres Papier.
   Eine Zeitungsseite ist aber gesetzt, nicht gestapelt: oben der
   Zeitungskopf mit Doppellinie, darunter die Zeile mit Datum und Ressort,
   dann die Schlagzeile ueber die Breite, darunter der Satzspiegel in
   Spalten - links der Text, rechts, durch eine Haarlinie getrennt, der
   Kasten mit dem Stand ("Der Stand" statt "Standings").
   Deshalb bleibt hier als einziger Richtung das Logo gross und mittig:
   es ist der Zeitungskopf, kein Sendungslogo.
   Grundsatz: Linien und Satz, keine Flaechen. Genau eine Schlagzeile je
   Seite, alles andere ist Brotschrift und Spitzmarke.
   Markup und JavaScript sind nicht angefasst. */
:root[data-theme="L"] { --l-breit: min(1220px, 95vw); --l-linie: #1A1712; }

/* Die Seite fuellt den Rest des Fensters. `flex: 1 0 auto`: wachsen ja,
   schrumpfen nie - sonst wuerde eine lange Seite gestaucht und liefe aus
   dem Beamerbild. */
:root[data-theme="L"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto; width: 100%; max-width: var(--l-breit); padding-top: 0;
}
/* Der Zeitungskopf: Name gross und mittig, Doppellinie darunter. */
:root[data-theme="L"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  width: 100%; max-width: var(--l-breit); margin: 14px auto 0; padding-bottom: 10px;
  border-bottom: 3px solid var(--l-linie);
}
:root[data-theme="L"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: clamp(240px, 26vw, 340px); max-height: 84px;
}
/* Die Zeile unter dem Kopf: Ressort, Ausgabe, Stand - in Kapitaelchen. */
:root[data-theme="L"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #tp-screen) .round-bar {
  width: 100%; margin: 0; padding: 7px 0 8px; justify-content: space-between;
  border-top: 1px solid var(--l-linie); border-bottom: 1px solid var(--l-linie);
}
/* Das Brett ist der Satzspiegel, kein Kasten darin. */
:root[data-theme="L"] :is(#game-screen, #wwds-screen, #finale-screen) .board,
:root[data-theme="L"] #jeopardy-screen .jeopardy-board {
  background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0;
}

/* ── Der Stand als Kasten in der rechten Spalte ── */
:root[data-theme="L"] :is(#game-screen, #wwds-screen, #tp-screen) :is(.scoreboard, .wwds-top, .tp-top) {
  flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: none; margin: 0;
  padding: 0 0 0 22px; gap: 14px; border-left: 1px solid var(--l-linie);
}
:root[data-theme="L"] :is(#game-screen, #wwds-screen, #tp-screen) :is(.scoreboard, .wwds-top, .tp-top)::before {
  content: 'Der Stand'; padding-bottom: 8px; border-bottom: 1px solid var(--l-linie);
  font-family: 'Old Standard TT', serif; font-size: .74rem; letter-spacing: 3px; text-transform: uppercase;
}
:root[data-theme="L"] :is(#game-screen, #wwds-screen) :is(.team-panel, .wwds-team):is(.red, .blue, .green) {
  width: 100%; text-align: left;
}
:root[data-theme="L"] #game-screen .team-panel .t-score { font-size: clamp(2.2rem, 6vh, 3.2rem); }

/* ── Feud: Schlagzeile ueber die Breite, Liste links, Stand rechts ── */
:root[data-theme="L"] #game-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "zeile zeile" "frage frage" "board stand";
  grid-template-rows: auto auto 1fr; column-gap: 26px; row-gap: 0; align-items: start;
}
:root[data-theme="L"] #game-screen .round-bar { grid-area: zeile; }
:root[data-theme="L"] #game-screen .scoreboard { grid-area: stand; }
:root[data-theme="L"] #game-screen .board { grid-area: board; display: contents; }
:root[data-theme="L"] #game-screen .q-text {
  /* Linksbuendig, weil die Spitzmarke "Umfrage:" als ::before davorsteht -
     zentriert haengt sie schief neben der Schlagzeile. */
  grid-area: frage; text-align: left; padding: 18px 0 16px; margin: 0 0 14px;
  border-bottom: 1px solid var(--l-linie);
  font-size: clamp(1.9rem, 3.4vw + .6vh, 3.2rem); line-height: 1.04; text-wrap: balance;
}
:root[data-theme="L"] #game-screen .answers { grid-area: board; align-content: stretch; align-self: stretch; }
:root[data-theme="L"] #game-screen .tile { min-height: clamp(42px, 8.5vh, 70px); }

/* ── Jeopardy: das Kreuzwortraetsel fuellt die Seite ── */
:root[data-theme="L"] #jeopardy-screen.active {
  display: grid; grid-template-areas: "zeile" "board" "stand"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="L"] #jeopardy-screen .round-bar { grid-area: zeile; }
:root[data-theme="L"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; margin-top: 14px; }
:root[data-theme="L"] #jeopardy-screen .jeopardy-scores {
  grid-area: stand; width: 100%; max-width: none; margin: 14px 0 0; padding-top: 10px;
  justify-content: flex-start; gap: 48px; border-top: 1px solid var(--l-linie);
}

/* Jeopardy-Frage: die Seite ist der Artikel - Spitzmarke oben, Betrag in
   der Marginalspalte, die Frage als Schlagzeile darunter. */
:root[data-theme="L"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  padding: 8vh max(5vw, (100vw - var(--l-breit)) / 2); column-gap: 30px; row-gap: 0;
}
:root[data-theme="L"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="L"] .jeopardy-clue-cat { grid-area: cat; align-self: end; justify-self: start; padding-bottom: 10px; }
:root[data-theme="L"] .jeopardy-clue-pts { grid-area: pts; align-self: end; justify-self: end; padding-bottom: 10px; }
:root[data-theme="L"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { border-bottom: 3px solid var(--l-linie); }
:root[data-theme="L"] .jeopardy-clue-text {
  grid-area: frage; max-width: none; text-align: left; margin-top: 34px;
  font-size: clamp(2.2rem, 4.2vw + .8vh, 4.2rem); line-height: 1.02; text-wrap: balance;
}
:root[data-theme="L"] .jeopardy-clue-blank { grid-area: frage; justify-self: start; margin-top: 34px; }
:root[data-theme="L"] .jeopardy-answer-text { grid-area: antwort; justify-self: start; text-align: left; margin-top: 24px; }

/* ── WWM: der Stimmzettel fuellt die Seite ── */
:root[data-theme="L"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="L"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="L"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="L"] #wwm-screen .wwm-opt { min-height: clamp(56px, 10.5vh, 86px); }
:root[data-theme="L"] #wwm-screen .wwm-q { font-size: clamp(1.6rem, 2.8vw + .5vh, 2.6rem); line-height: 1.06; }

/* ── WWDS: Satzspiegel links, Stand rechts ── */
:root[data-theme="L"] #wwds-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "zeile zeile" "board stand";
  grid-template-rows: auto 1fr; column-gap: 26px; row-gap: 0; align-items: start;
}
:root[data-theme="L"] #wwds-screen .round-bar { grid-area: zeile; }
:root[data-theme="L"] #wwds-screen .wwds-top { grid-area: stand; margin-top: 14px; }
:root[data-theme="L"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 14px; }
:root[data-theme="L"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="L"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="L"] #wwds-screen .wwds-cat { min-height: clamp(46px, 8.5vh, 76px); }
:root[data-theme="L"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="L"] #wwds-screen .wwds-opt { min-height: clamp(44px, 8vh, 70px); }
/* Mit Publikumsjoker kommt ein Balkenbild dazu - ohne Deckel laeuft die
   Seite unten aus dem Beamerbild. */
/* Mit Joker darf die Antwortliste nicht mehr den Rest der Hoehe nehmen:
   sonst rutscht das Balkenbild ganz nach unten und seine Beschriftung
   (A B C) steht unter dem Beamerbild. */
:root[data-theme="L"] #wwds-screen:has(.wwds-aud) .wwds-opts { flex: 0 0 auto; }
:root[data-theme="L"] #wwds-screen:has(.wwds-aud) .wwds-opt { min-height: clamp(38px, 6vh, 52px); }
:root[data-theme="L"] #wwds-screen .wwds-aud { height: clamp(58px, 10vh, 78px); }

/* ── DDF: die Kandidaten sind die Namensliste in der Marginalspalte ──
   Der innere Wrapper traegt inline `height:100%` - zirkulaer, sobald der
   Screen mit dem Inhalt waechst. Daher `height:auto` plus `flex:1`. */
:root[data-theme="L"] #ddf-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "zeile spieler" "frage spieler" "media spieler" "antwort spieler" "note spieler" "vote spieler";
  grid-template-rows: auto auto auto auto auto 1fr; column-gap: 26px; align-items: start;
}
:root[data-theme="L"] #ddf-screen .ddf-alive {
  grid-area: zeile; justify-self: start; margin: 0;
}
:root[data-theme="L"] #ddf-timer { grid-area: zeile; justify-self: end; }
:root[data-theme="L"] #ddf-screen .ddf-question { grid-area: frage; margin-top: 10px; }
:root[data-theme="L"] #ddf-screen .ddf-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="L"] #ddf-screen .ddf-answer { grid-area: antwort; }
:root[data-theme="L"] #ddf-screen .ddf-note { grid-area: note; }
:root[data-theme="L"] #ddf-screen .ddf-vote-grid { grid-area: vote; }
:root[data-theme="L"] #ddf-screen .ddf-players {
  grid-area: spieler; grid-row: 1 / -1; flex-direction: column; flex-wrap: nowrap;
  max-width: none; margin: 0; padding: 0 0 0 22px; gap: 0; border: 0; border-left: 1px solid var(--l-linie);
}
:root[data-theme="L"] #ddf-screen .ddf-players::before {
  content: 'Kandidaten'; padding-bottom: 8px; border-bottom: 1px solid var(--l-linie);
  font-family: 'Old Standard TT', serif; font-size: .74rem; letter-spacing: 3px; text-transform: uppercase;
}
:root[data-theme="L"] #ddf-screen .ddf-player { width: 100%; text-align: left; }

/* ── PIH: Kleinanzeigen links, Rangliste als Spalte rechts ── */
:root[data-theme="L"] #pih-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "teams rang" "uhr rang" "artikel rang" "bild rang" "media rang" "preis rang" "note rang" "gebote rang";
  grid-template-rows: auto auto auto auto auto auto auto 1fr; column-gap: 26px; align-items: start;
}
:root[data-theme="L"] #pih-teams { grid-area: teams; }
:root[data-theme="L"] #pih-timer { grid-area: uhr; }
:root[data-theme="L"] #pih-screen .pih-item { grid-area: artikel; }
:root[data-theme="L"] #pih-screen .pih-stage { grid-area: bild; display: flex; align-items: center; justify-content: center; min-height: 0; }
/* Ohne Deckel schiebt das Produktfoto die Gebote aus dem Beamerbild. */
:root[data-theme="L"] #pih-screen .pih-stage :is(img, video) { max-height: min(26vh, 220px); width: auto; }
:root[data-theme="L"] #pih-screen .pih-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="L"] #pih-screen .pih-price { grid-area: preis; }
:root[data-theme="L"] #pih-screen .pih-note { grid-area: note; }
:root[data-theme="L"] #pih-screen .pih-bid-grid { grid-area: gebote; }
:root[data-theme="L"] #pih-screen .pih-scores {
  grid-area: rang; grid-row: 1 / -1; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  max-width: none; margin: 0; padding: 0 0 0 22px; gap: 0; border: 0; border-left: 1px solid var(--l-linie);
}
:root[data-theme="L"] #pih-screen .pih-scores::before {
  content: 'Rangliste'; padding-bottom: 8px; border-bottom: 1px solid var(--l-linie);
  font-family: 'Old Standard TT', serif; font-size: .74rem; letter-spacing: 3px; text-transform: uppercase;
}
:root[data-theme="L"] #pih-screen .pih-score { width: 100%; padding: 5px 0; }

/* ── TP: Rad und Frage im Satzspiegel, Stand in der Marginalspalte ── */
:root[data-theme="L"] #tp-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "zeile zeile" "board stand";
  grid-template-rows: auto 1fr; column-gap: 26px; row-gap: 0; align-items: start;
}
:root[data-theme="L"] #tp-screen .round-bar { grid-area: zeile; }
:root[data-theme="L"] #tp-screen .tp-top { grid-area: stand; margin-top: 14px; }
:root[data-theme="L"] #tp-screen .tp-team:is(.red, .blue, .green) {
  width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pie name" "pie sub";
  align-items: center; column-gap: 14px; transform: none;
}
:root[data-theme="L"] #tp-screen .tp-team .tp-pie { grid-area: pie; width: 54px; height: 54px; margin: 0; }
:root[data-theme="L"] #tp-screen .tp-team-name { grid-area: name; align-self: end; text-align: left; }
:root[data-theme="L"] #tp-screen .tp-team-sub { grid-area: sub; align-self: start; text-align: left; }
:root[data-theme="L"] #tp-screen .tp-board { grid-area: board; align-self: center; width: 100%; justify-content: center; margin-top: 14px; }

/* ── Feud-Finale: Schlagzeile und Liste links, Stand rechts ── */
:root[data-theme="L"] #finale-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-areas: "kopf uhr" "board stand" "board vergleich";
  grid-template-rows: auto auto 1fr; column-gap: 26px; row-gap: 0; align-items: start;
}
:root[data-theme="L"] #finale-screen .finale-header {
  grid-area: kopf; display: flex; align-items: baseline; gap: 16px; text-align: left;
  padding: 7px 0 8px; border-top: 1px solid var(--l-linie); border-bottom: 1px solid var(--l-linie);
}
:root[data-theme="L"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; }
:root[data-theme="L"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 14px; }
:root[data-theme="L"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="L"] #finale-screen .finale-big-q { flex: 1; display: flex; align-items: center; justify-content: center; }
:root[data-theme="L"] #finale-screen .finale-scores {
  grid-area: stand; flex-direction: column; width: 100%; max-width: none; margin: 14px 0 0;
  padding: 0 0 0 22px; gap: 12px; border-left: 1px solid var(--l-linie);
}
/* Von js/feud.js erzeugt - ohne eigene Flaeche landet es per
   Auto-Platzierung oben rechts im Raster. */
:root[data-theme="L"] #finale-reveal-comparison {
  grid-area: vergleich; flex-direction: column; margin: 16px 0 0; padding: 0 0 0 22px; border-left: 1px solid var(--l-linie);
}

/* ── Ergebnis: die Ausgabe von morgen ──
   Der Sieger ist die Schlagzeile ueber die Breite, der Stand steht als
   Zeilen darunter. */
:root[data-theme="L"] #result-screen.active { width: 100%; max-width: min(900px, 94vw); }
:root[data-theme="L"] #result-screen .winner-text {
  width: 100%; padding-bottom: 16px; border-bottom: 3px solid var(--l-linie); text-wrap: balance;
}
:root[data-theme="L"] #result-screen .result-card { width: 100%; }

/* ── Menue: das Inhaltsverzeichnis ──
   Statt eines 720-px-Blocks in der Mitte vier Spalten ueber die volle
   Breite. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="L"] #menu-screen.active { width: 100%; max-width: var(--l-breit); }
:root[data-theme="L"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* ── M · Aurora: Glas auf Nachthimmel, Waben, Aufbluehen ── */
:root[data-theme="M"] {
  --brd-surface: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --brd-frame: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.45), 0 0 60px rgba(183,166,255,.12);
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 28px;
  --tile: rgba(255,255,255,.05);
  --tile-hover: rgba(255,255,255,.09);
  --tile-edge: inset 0 0 0 1px rgba(255,255,255,.13);
  --tile-fg: #F5F7FF;
  --tile-head: transparent;
  --tile-head-fg: #BFC5E6;
  --tile-used: rgba(255,255,255,.03);
  --tile-num: #F5F7FF;
  --tile-num-glow: 0 0 18px rgba(183,166,255,.6);
  --tile-dim-fg: rgba(245,247,255,.35);
  --tile-bar: rgba(255,255,255,.07);
  --tile-rule: transparent;
  --tile-open: linear-gradient(90deg, rgba(255,159,203,.32), rgba(183,166,255,.32) 50%, rgba(143,182,255,.32));
  --tile-open-edge: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 30px rgba(183,166,255,.35);
  --tile-open-fg: #FFFFFF;
  --tile-open-dim: rgba(255,255,255,.7);
  --tile-pts-bg: rgba(255,255,255,.14);
  --tile-pts-rule: transparent;
  --tile-pick: linear-gradient(160deg, rgba(183,166,255,.45), rgba(143,182,255,.25));
  --tile-pick-fg: #FFFFFF;
  --tile-right: linear-gradient(160deg, rgba(91,227,161,.45), rgba(143,182,255,.2));
  --tile-right-fg: #FFFFFF;
  --tile-radius: 999px;
  --tile-font: 'Plus Jakarta Sans', sans-serif;
  --tile-reveal: thMBluehen .8s cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="M"] .board { backdrop-filter: blur(14px); padding: 24px; }
:root[data-theme="M"] .answers { gap: 10px; }
:root[data-theme="M"] .answers.split { row-gap: 10px; column-gap: 14px; }
:root[data-theme="M"] .q-text { font-weight: 800; font-size: 1.4rem; background: linear-gradient(90deg, #FF9FCB, #B7A6FF, #8FB6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="M"] .q-text.hidden-q { background: rgba(255,255,255,.04); -webkit-background-clip: border-box; background-clip: border-box; }
:root[data-theme="M"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.1rem; }
:root[data-theme="M"] .tile.open .tile-pts { color: #FFFFFF; text-shadow: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.1rem; margin: 7px; border-radius: 999px; min-width: 52px; }
/* Jeopardy als Waben wie im Entwurf. */
:root[data-theme="M"] .jeopardy-board { gap: 8px; padding: 18px; border-radius: 28px; backdrop-filter: blur(14px); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
:root[data-theme="M"] .jeopardy-cat { font-weight: 700; font-size: .7rem; letter-spacing: 1px; text-transform: none; }
:root[data-theme="M"] .jeopardy-cell {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; box-shadow: none;
  background: linear-gradient(160deg, #6A58A8 0%, #3B3373 55%, #262150 100%);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem;
}
:root[data-theme="M"] .jeopardy-cell:hover:not(.used) { background: linear-gradient(160deg, #8A76D0 0%, #4D4294 55%, #2E2862 100%); }
:root[data-theme="M"] .jeopardy-cell.used { background: rgba(255,255,255,.04); }
:root[data-theme="M"] .wwm-q { backdrop-filter: blur(14px); font-weight: 800; font-size: 1.6rem; }
:root[data-theme="M"] .wwm-opt { border-radius: 18px; min-height: 74px; align-items: flex-end; font-weight: 700; font-size: 1.15rem; }
:root[data-theme="M"] .wwm-opt .wwm-letter { font-size: .9rem; color: rgba(245,247,255,.55); }
/* Wie Polarlicht: das Feld bluet aus dem Unscharfen auf. */
@keyframes thMBluehen {
  0%   { opacity: 0; filter: blur(14px) saturate(2); transform: scale(.94); }
  60%  { opacity: 1; filter: blur(2px) saturate(1.5); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

/* ── N · Papier: Schilder auf Mint, Umschlaege, das Schild schwingt ── */
:root[data-theme="N"] {
  --brd-surface: transparent;
  --brd-frame: none;
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 0;
  --tile: #F5EEDD;
  --tile-hover: #FBF5E8;
  --tile-edge: 0 2px 0 rgba(22,57,54,.12), 0 8px 18px rgba(22,57,54,.16);
  --tile-fg: #163936;
  --tile-head: transparent;
  --tile-head-fg: #163936;
  --tile-used: transparent;
  --tile-num: #163936;
  --tile-num-glow: none;
  --tile-dim-fg: #FFFFFF;
  --tile-bar: rgba(22,57,54,.08);
  --tile-rule: transparent;
  --tile-open: #FBF5E8;
  --tile-open-edge: 0 2px 0 rgba(22,57,54,.15), 0 12px 24px rgba(22,57,54,.22);
  --tile-open-fg: #163936;
  --tile-open-dim: #FFFFFF;
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(22,57,54,.15);
  --tile-pick: #F2C14E;
  --tile-pick-fg: #163936;
  --tile-right: #2E8C7E;
  --tile-right-fg: #FFFFFF;
  --tile-radius: 6px;
  --tile-font: 'Fraunces', serif;
  --tile-reveal: thNSchwing 1s cubic-bezier(.3,1.4,.4,1);
}
:root[data-theme="N"] .board { padding: 10px 4px; }
:root[data-theme="N"] .answers { gap: 12px; }
:root[data-theme="N"] .answers.split { row-gap: 12px; column-gap: 22px; }
/* Die Frage steht auf einer Papierwolke wie im Entwurf. */
:root[data-theme="N"] .q-text { background: #FBF5E8; border-radius: 40px; box-shadow: 0 10px 24px rgba(22,57,54,.15); color: #163936; font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.5rem; line-height: 1.15; margin-bottom: 12px; }
:root[data-theme="N"] .q-text.hidden-q { border: 0; }
:root[data-theme="N"] .tile { overflow: visible; }
:root[data-theme="N"] .tile-inner { overflow: visible; }
:root[data-theme="N"] .tile:nth-child(odd) .tile-inner { rotate: -.8deg; }
:root[data-theme="N"] .tile:nth-child(even) .tile-inner { rotate: .7deg; }
:root[data-theme="N"] .tile-num { flex: 0 0 30px; width: 30px; height: 30px; margin: auto 8px auto 10px; border-radius: 50%; border: 0; background: #F06A4E; font-family: 'Karla', sans-serif; font-weight: 700; font-size: .95rem; }
:root[data-theme="N"] .tile:not(.open) .tile-num { background: rgba(22,57,54,.18); }
:root[data-theme="N"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 900; font-size: 1.3rem; }
:root[data-theme="N"] .tile.open .tile-pts { color: #C4472F; text-shadow: none; font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.7rem; }
/* Jeopardy als Briefumschlaege: zwei schraege Baender ergeben die Klappe,
   Farbe je Spalte reihum. */
:root[data-theme="N"] .jeopardy-board { gap: 12px; padding: 6px; }
:root[data-theme="N"] .jeopardy-cat { background: #FBF5E8; box-shadow: 0 4px 10px rgba(22,57,54,.12); font-family: 'Fraunces', serif; font-weight: 900; font-size: .85rem; letter-spacing: 0; text-transform: none; }
:root[data-theme="N"] .jeopardy-cell {
  --flap: #F06A4E;
  background: linear-gradient(162deg, var(--flap) 0 30%, transparent 30.5%), linear-gradient(198deg, var(--flap) 0 30%, transparent 30.5%), #FBF5E8;
  box-shadow: 0 2px 0 rgba(22,57,54,.12), 0 8px 16px rgba(22,57,54,.16);
  align-items: flex-end; padding-bottom: 8px;
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.6rem; letter-spacing: 0;
}
:root[data-theme="N"] .jeopardy-cell:nth-child(4n+2) { --flap: #2E8C7E; }
:root[data-theme="N"] .jeopardy-cell:nth-child(4n+3) { --flap: #F2C14E; }
:root[data-theme="N"] .jeopardy-cell:nth-child(4n)   { --flap: #9C8CE0; }
:root[data-theme="N"] .jeopardy-cell:hover:not(.used) { transform: translateY(-3px) rotate(-1deg); }
:root[data-theme="N"] .jeopardy-cell.used { background: transparent; box-shadow: inset 0 0 0 2px rgba(22,57,54,.15); }
:root[data-theme="N"] .wwm-q { background: #FBF5E8; color: #163936; box-shadow: 0 10px 24px rgba(22,57,54,.15); text-align: left; justify-content: flex-start; font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.8rem; line-height: 1.15; }
:root[data-theme="N"] .wwm-opt { background: #FBF5E8; box-shadow: 0 2px 0 rgba(22,57,54,.12), 0 8px 18px rgba(22,57,54,.16); font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.3rem; }
:root[data-theme="N"] .wwm-opt .wwm-letter { color: #163936; font-family: 'Fraunces', serif; font-weight: 900; }
:root[data-theme="N"] .wwm-opt.selected { background: #F2C14E; }
:root[data-theme="N"] .wwm-opt.correct { background: #2E8C7E; }
:root[data-theme="N"] .wwm-opt.correct .wwm-letter { color: #FFFFFF; }
/* Das Schild wird aufgehaengt und pendelt aus. */
@keyframes thNSchwing {
  0%   { transform: rotate(-9deg) translateY(-14px); opacity: 0; transform-origin: 50% 0; }
  35%  { transform: rotate(5deg); opacity: 1; transform-origin: 50% 0; }
  65%  { transform: rotate(-2deg); transform-origin: 50% 0; }
  100% { transform: rotate(0); transform-origin: 50% 0; }
}

/* ── O · Terminal (Rework 2026-10-14): die Show laeuft in der Konsole ──────
   Identitaet aus designs/s/O-*.html: gruener Phosphor auf Schwarzgruen,
   Zeilen statt Platten, VT323 fuer alles Grosse, IBM Plex Mono fuer den Rest,
   Fenster als Rahmen mit Titel in der Kante (┤ ROT ├), invertierte
   Statuszeile, Eingabeprompt mit Blockcursor.
   Jetzt auf allen Flaechen: Teams als Fenster mit Titel und Farbstreifen
   (BAUPLAN 4.4), X als [X], WWM als Radioknoepfe ( )/(*) und Joker als
   Checkboxen [ ]/[x], DDF als Prozesstabelle (PID, KILLED), Knoepfe als
   [ BEFEHL ], Menue als nummerierte Liste mit invertierter Auswahl.
   Leuchten nur als Phosphor-Nachglimmen der Schrift, keine Flaechen.
   Signatur: die Antwort wird Zeichen fuer Zeichen getippt. */
:root[data-theme="O"] {
  --brd-surface: #031008;
  --brd-tex: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  --brd-frame: 0 0 0 1px #2E7D4A;
  --brd-well: #031008;
  --brd-inner: transparent;
  --brd-radius: 0;
  --brd-fg: #B8FFCD;
  --tile: transparent;
  --tile-hover: rgba(124,255,160,.06);
  --tile-edge: none;
  --tile-fg: #B8FFCD;
  --tile-head: transparent;
  --tile-head-fg: #7CFFA0;
  --tile-used: transparent;
  --tile-num: #B8FFCD;
  --tile-num-glow: 0 0 8px rgba(124,255,160,.6);
  --tile-dim-fg: #2E7D4A;
  --tile-bar: repeating-linear-gradient(90deg, #2E7D4A 0 3px, transparent 3px 9px);
  --tile-rule: transparent;
  --tile-open: rgba(124,255,160,.05);
  --tile-open-edge: none;
  --tile-open-fg: #B8FFCD;
  --tile-open-dim: #7CFFA0;
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: #7CFFA0;
  --tile-pick-fg: #031008;
  --tile-right: #B8FFCD;
  --tile-right-fg: #031008;
  --tile-radius: 0;
  --tile-font: 'VT323', monospace;
  --tile-reveal: thOTippen .7s steps(18, end);
  --o-gruen: #7CFFA0; --o-hell: #B8FFCD; --o-dunkel: #2E7D4A; --o-grund: #031008;
  --o-glimm: 0 0 8px rgba(124,255,160,.55);
}
/* Bildschirmrand: die Roehre dunkelt zu den Ecken ab. Liegt ueber allem,
   faengt aber keine Klicks. */
:root[data-theme="O"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  box-shadow: inset 0 0 140px rgba(0,0,0,.55); border-radius: 18px;
}

/* ── Teams als Fenster mit Titel in der Kante ─────────────────────────── */
:root[data-theme="O"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).red   { --tc: #FF6B5E; }
:root[data-theme="O"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).blue  { --tc: #6EA8FF; }
:root[data-theme="O"] :is(.team-panel, .jeopardy-team, .wwds-team, .tp-team, .team-card).green { --tc: #7CFFA0; }
:root[data-theme="O"] :is(.scoreboard, .jeopardy-scores) { gap: 16px; border-radius: 0; box-shadow: none; overflow: visible; padding-top: 8px; }
:root[data-theme="O"] :is(.team-panel, .jeopardy-team, .wwds-team, .team-card):is(.red, .blue, .green) {
  background: #031008; border: 1px solid #2E7D4A; border-radius: 0; box-shadow: inset 0 -8px 0 #031008, inset 0 -18px 0 color-mix(in srgb, var(--tc) 70%, transparent);
  text-align: right; padding: 16px 16px 26px; overflow: visible;
}
:root[data-theme="O"] .team-card { padding-bottom: 28px; text-align: center; }
:root[data-theme="O"] .team-card::before { display: none; }
:root[data-theme="O"] .jeopardy-team { padding: 12px 14px 22px; }
:root[data-theme="O"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label) {
  position: absolute; left: 12px; top: -.75em; margin: 0; padding: 0 6px; background: #05140B;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .72rem; letter-spacing: 1px; color: var(--tc, #7CFFA0); line-height: 1.4;
}
:root[data-theme="O"] .team-card .label { position: static; display: inline-block; margin: -40px 0 14px; }
:root[data-theme="O"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label)::before { content: '┤ '; color: #2E7D4A; }
:root[data-theme="O"] :is(.team-panel .t-name, .jeopardy-team .jt-name, .wwds-team .wt-name, .team-card .label)::after { content: ' ├'; color: #2E7D4A; }
:root[data-theme="O"] :is(.team-panel .t-score, .jeopardy-team .jt-score, .wwds-team .wt-money) {
  font-family: 'VT323', monospace; color: #B8FFCD; text-shadow: var(--o-glimm); line-height: .9;
}
:root[data-theme="O"] .team-panel .t-score { font-size: 3.8rem; }
:root[data-theme="O"] .jeopardy-team .jt-score { font-size: 2.6rem; }
:root[data-theme="O"] .team-panel.active-team { padding: 16px 16px 26px; border-color: #7CFFA0; box-shadow: inset 0 0 0 1px #7CFFA0, inset 0 -8px 0 #031008, inset 0 -18px 0 color-mix(in srgb, var(--tc) 70%, transparent); }
:root[data-theme="O"] .team-panel.active-team::after { content: '> am zug_'; left: 16px; right: auto; bottom: auto; top: 18px; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: #7CFFA0; }
:root[data-theme="O"] .wwds-team.on { border-color: #7CFFA0; box-shadow: inset 0 0 0 1px #7CFFA0, inset 0 -8px 0 #031008, inset 0 -18px 0 color-mix(in srgb, var(--tc) 70%, transparent); }
:root[data-theme="O"] :is(.team-panel.active-team .t-score, .wwds-team.on .wt-money) { color: #D6FFE2; }

/* X als [X] in Rot, frei als [ ]. */
:root[data-theme="O"] .team-strikes { justify-content: flex-start; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; transform: none; gap: 8px; }
:root[data-theme="O"] .strike-pip { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="O"] .strike-pip::before { content: '[ ]'; font-family: 'VT323', monospace; font-size: 1.5rem; color: #2E7D4A; }
:root[data-theme="O"] .strike-pip.lit { background: none; box-shadow: none; animation: none; }
:root[data-theme="O"] .strike-pip.lit::before { content: '[X]'; color: #FF6B5E; text-shadow: 0 0 8px rgba(255,107,94,.6); }

/* Statuszeile: invertiert, ueber die ganze Breite. */
:root[data-theme="O"] .round-bar { align-self: stretch; justify-content: space-between; padding: 2px 10px; background: #7CFFA0; color: #031008; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .7rem; letter-spacing: 1px; }
:root[data-theme="O"] .round-bar .pts { color: #031008; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .8rem; }

/* ── Feud ─────────────────────────────────────────────────────────────── */
:root[data-theme="O"] .q-text { color: #B8FFCD; justify-content: flex-start; text-align: left; font-family: 'VT323', monospace; font-weight: 400; font-size: 2rem; line-height: 1; text-shadow: var(--o-glimm); border-radius: 0; }
:root[data-theme="O"] .q-text:not(.hidden-q)::before { content: '\276F\00a0'; color: #7CFFA0; }
:root[data-theme="O"] .q-text:not(.hidden-q)::after { content: ''; display: inline-block; width: .5em; height: .9em; margin-left: .25em; background: #7CFFA0; vertical-align: -.1em; animation: thOCursor 1.1s steps(1, end) infinite; }
:root[data-theme="O"] .q-text.hidden-q { background: none; border: 1px dashed #2E7D4A; }
:root[data-theme="O"] .q-text.hidden-q::after { color: #4FB874; font-family: 'IBM Plex Mono', monospace; }
:root[data-theme="O"] .answers { counter-reset: oplatz; }
:root[data-theme="O"] .tile { counter-increment: oplatz; }
:root[data-theme="O"] .tile:hover:not(.open) { transform: none; }
:root[data-theme="O"] .tile-num { font-family: 'VT323', monospace; font-size: 0; color: #7CFFA0; }
:root[data-theme="O"] .tile-num::before { content: counter(oplatz, decimal-leading-zero); font-size: 1.6rem; }
:root[data-theme="O"] .tile.open .tile-answer { font-weight: 400; font-size: 1.7rem; letter-spacing: 1px; text-shadow: var(--o-glimm); }
/* Punkte durch Puenktchen an die Antwort gebunden, wie in einer Tabelle. */
:root[data-theme="O"] .tile.open .tile-center { background: radial-gradient(circle, #2E7D4A 1px, transparent 1.5px) 0 60% / 8px 8px repeat-x; }
:root[data-theme="O"] .tile.open .tile-answer { background: #031008; padding-right: 8px; }
:root[data-theme="O"] .tile.open .tile-pts { color: #B8FFCD; text-shadow: var(--o-glimm); font-family: 'VT323', monospace; font-size: 1.8rem; box-shadow: none; }
:root[data-theme="O"] .tile.missed .tile-inner { background: transparent !important; box-shadow: none !important; color: #FF6B5E; }
:root[data-theme="O"] .tile.missed .tile-answer { text-shadow: none; }

/* Finale */
:root[data-theme="O"] :is(.finale-title, .winner-text, .tp-win-title, .wwds-banner, .elim-team) { font-family: 'VT323', monospace; font-weight: 400; letter-spacing: 2px; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .finale-title::before, :root[data-theme="O"] .winner-text::before { content: '> '; color: #7CFFA0; }
:root[data-theme="O"] :is(.finale-team-label, .finale-q-info) { font-family: 'IBM Plex Mono', monospace; letter-spacing: 1px; color: #4FB874; }
:root[data-theme="O"] :is(.finale-score-card, .finale-reveal-team) { background: #031008; border: 1px solid #2E7D4A; border-radius: 0; box-shadow: none; }
:root[data-theme="O"] .finale-score-card.active { background: #031008; border-color: #7CFFA0; }
:root[data-theme="O"] :is(.finale-score-pts, .finale-reveal-pts, .finale-timer) { font-family: 'VT323', monospace; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] :is(.finale-score-name, .finale-reveal-name) { font-family: 'IBM Plex Mono', monospace; }
:root[data-theme="O"] .finale-big-q { font-family: 'VT323', monospace; text-shadow: var(--o-glimm); }

/* ── Jeopardy: [100], verbraucht [---] ────────────────────────────────── */
:root[data-theme="O"] .jeopardy-board { border-radius: 0; gap: 2px; padding: 8px; }
:root[data-theme="O"] .jeopardy-cat { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .7rem; letter-spacing: 1px; border-radius: 0; color: #4FB874; }
:root[data-theme="O"] .jeopardy-cell { font-family: 'VT323', monospace; font-size: 2.2rem; letter-spacing: 0; border-radius: 0; }
:root[data-theme="O"] .jeopardy-cell:not(.used)::before { content: '['; color: #2E7D4A; }
:root[data-theme="O"] .jeopardy-cell:not(.used)::after { content: ']'; color: #2E7D4A; }
:root[data-theme="O"] .jeopardy-cell:hover:not(.used) { background: #7CFFA0; color: #031008; text-shadow: none; transform: none; box-shadow: none; }
:root[data-theme="O"] .jeopardy-cell.used::after { content: '[---]'; color: #1F5A33; font-size: 1.8rem; }
:root[data-theme="O"] .jeopardy-clue-cat { font-family: 'IBM Plex Mono', monospace; letter-spacing: 2px; color: #4FB874; }
:root[data-theme="O"] .jeopardy-clue-cat::before { content: '┤ '; } :root[data-theme="O"] .jeopardy-clue-cat::after { content: ' ├'; }
:root[data-theme="O"] .jeopardy-clue-pts { font-family: 'VT323', monospace; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .jeopardy-clue-text { font-family: 'VT323', monospace; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .jeopardy-clue-img { border-radius: 0; border: 1px solid #2E7D4A; box-shadow: none; filter: sepia(1) hue-rotate(70deg) saturate(1.6) brightness(.9); }

/* ── WWM: Radioknoepfe, Gewinnstufen-Fenster, Joker als Checkboxen ───── */
:root[data-theme="O"] .wwm-q { color: #B8FFCD; text-align: left; justify-content: flex-start; font-family: 'VT323', monospace; font-weight: 400; font-size: 2.1rem; line-height: 1.05; text-shadow: var(--o-glimm); box-shadow: none; background: none; }
:root[data-theme="O"] .wwm-q::before { content: '\276F\00a0'; color: #7CFFA0; }
:root[data-theme="O"] .wwm-answers { grid-template-columns: 1fr; gap: 2px; padding: 12px 10px 8px; border: 1px solid #2E7D4A; }
:root[data-theme="O"] .wwm-opt { box-shadow: none; padding: 4px 10px; font-size: 1.7rem; font-weight: 400; }
:root[data-theme="O"] .wwm-opt:hover { filter: none; background: rgba(124,255,160,.08); }
:root[data-theme="O"] .wwm-opt .wwm-letter { color: #7CFFA0; font-family: 'VT323', monospace; font-size: 1.7rem; min-width: 0; }
:root[data-theme="O"] .wwm-opt .wwm-letter::before { content: '( ) '; white-space: pre; }
:root[data-theme="O"] .wwm-opt.selected .wwm-letter::before { content: '(*) '; }
:root[data-theme="O"] .wwm-opt.correct .wwm-letter::before { content: '(+) '; }
:root[data-theme="O"] .wwm-opt.wrong { background: transparent; color: #FF6B5E; }
:root[data-theme="O"] .wwm-opt.wrong .wwm-letter { color: #FF6B5E; }
:root[data-theme="O"] .wwm-opt.wrong .wwm-letter::before { content: '(-) '; }
:root[data-theme="O"] .wwm-opt.selected .wwm-letter,
:root[data-theme="O"] .wwm-opt.correct .wwm-letter { color: #031008; }
:root[data-theme="O"] .wwm-ladder { background: transparent; border: 1px solid #2E7D4A; border-radius: 0; }
:root[data-theme="O"] .wwm-rung { border-radius: 0; font-family: 'VT323', monospace; font-size: 1.15rem; color: #4FB874; }
:root[data-theme="O"] .wwm-rung .wwm-lvl { color: #2E7D4A; font-family: 'VT323', monospace; }
:root[data-theme="O"] .wwm-rung.safe .wwm-amt { color: #B8FFCD; }
:root[data-theme="O"] .wwm-rung.won { color: #7CFFA0; }
:root[data-theme="O"] .wwm-rung.current .wwm-amt::after { content: ' ◄'; }
:root[data-theme="O"] .wwm-lifelines { justify-content: flex-start; gap: 20px; }
:root[data-theme="O"] .wwm-ll { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 0; }
:root[data-theme="O"] .wwm-ll::before { font-family: 'IBM Plex Mono', monospace; font-size: .85rem; color: #B8FFCD; white-space: pre; }
:root[data-theme="O"] .wwm-ll:nth-child(1)::before { content: '[ ] 50:50'; }
:root[data-theme="O"] .wwm-ll:nth-child(2)::before { content: '[ ] Telefon'; }
:root[data-theme="O"] .wwm-ll:nth-child(3)::before { content: '[ ] Publikum'; }
:root[data-theme="O"] .wwm-ll.used { opacity: 1; }
:root[data-theme="O"] .wwm-ll.used:nth-child(1)::before { content: '[x] 50:50'; color: #2E7D4A; }
:root[data-theme="O"] .wwm-ll.used:nth-child(2)::before { content: '[x] Telefon'; color: #2E7D4A; }
:root[data-theme="O"] .wwm-ll.used:nth-child(3)::before { content: '[x] Publikum'; color: #2E7D4A; }
:root[data-theme="O"] :is(.wwm-abar, .wwds-abar) { background: repeating-linear-gradient(0deg, #7CFFA0 0 3px, transparent 3px 5px); border-radius: 0; }
:root[data-theme="O"] :is(.wwm-apct, .wa-pct, .wwm-alet, .wa-let) { font-family: 'VT323', monospace; font-size: 1.1rem; color: #B8FFCD; }

/* ── WWDS: Kategorien als Liste, Antworten wie ein diff ───────────────── */
:root[data-theme="O"] .wwds-cat { border-radius: 0; box-shadow: inset 0 0 0 1px #2E7D4A; }
:root[data-theme="O"] .wwds-cat:hover:not(.done) { transform: none; filter: none; background: #7CFFA0; color: #031008; }
:root[data-theme="O"] .wwds-cat .wc-num { font-family: 'VT323', monospace; font-size: 1.2rem; color: #4FB874; }
:root[data-theme="O"] .wwds-cat .wc-name { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: .75rem; }
:root[data-theme="O"] .wwds-cat.done .wc-name { text-decoration: line-through; }
:root[data-theme="O"] .wwds-q { background: none; border: 0; border-radius: 0; text-align: left; font-family: 'VT323', monospace; font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .wwds-q::before { content: '\276F\00a0'; color: #7CFFA0; }
:root[data-theme="O"] .wwds-cat-chip { background: none; border: 0; border-radius: 0; padding: 0; font-family: 'IBM Plex Mono', monospace; letter-spacing: 1px; color: #4FB874; }
:root[data-theme="O"] .wwds-cat-chip::before { content: '┤ '; } :root[data-theme="O"] .wwds-cat-chip::after { content: ' ├'; }
:root[data-theme="O"] .wwds-opt { border-radius: 0; box-shadow: none; padding: 6px 10px; font-size: 1.5rem; font-weight: 400; }
:root[data-theme="O"] .wwds-opt .wo-let::before { content: '- '; white-space: pre; }
:root[data-theme="O"] .wwds-opt.right .wo-let::before { content: '+ '; }
:root[data-theme="O"] .wwds-opt .wo-let { font-family: 'VT323', monospace; color: #7CFFA0; }
:root[data-theme="O"] .wwds-opt.bad { background: transparent; color: #FF6B5E; }
:root[data-theme="O"] .wwds-tag { border-radius: 0; }
:root[data-theme="O"] .wwds-guess { border-radius: 0; background: #031008; border: 1px solid #2E7D4A; font-family: 'VT323', monospace; }
:root[data-theme="O"] .wwds-timer { font-family: 'VT323', monospace; text-shadow: var(--o-glimm); }

/* ── DDF als Prozesstabelle: PID, Name, Leben, Status ─────────────────── */
:root[data-theme="O"] .ddf-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; width: 100%; max-width: 1000px; margin-inline: auto; counter-reset: opid 2099; border-top: 1px solid #2E7D4A; }
:root[data-theme="O"] .ddf-players > :not(.ddf-player) { grid-column: 1 / -1; }
:root[data-theme="O"] .ddf-player {
  counter-increment: opid; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 4px 6px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid rgba(46,125,74,.5); border-radius: 0; box-shadow: none;
}
:root[data-theme="O"] .ddf-player::before { content: counter(opid); font-family: 'VT323', monospace; font-size: 1.2rem; color: #4FB874; }
:root[data-theme="O"] .ddf-player::after { content: 'running'; margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: #4FB874; }
:root[data-theme="O"] .ddf-player-name { flex: 1; min-width: 0; margin: 0; font-family: 'VT323', monospace; font-weight: 400; font-size: 1.6rem; line-height: 1; color: #B8FFCD; }
:root[data-theme="O"] .ddf-player.picked { border: 0; border-bottom: 1px solid rgba(46,125,74,.5); box-shadow: none; background: rgba(255,107,94,.1); }
:root[data-theme="O"] .ddf-player.picked::after { content: 'ZOMBIE?'; color: #FF6B5E; }
:root[data-theme="O"] .ddf-player.out { transform: none; opacity: .5; }
:root[data-theme="O"] .ddf-player.out::after { content: 'KILLED'; color: #FF6B5E; }
:root[data-theme="O"] .ddf-heart.full { color: #FF6B5E; text-shadow: none; }
:root[data-theme="O"] .ddf-heart.empty { color: #1F5A33; text-shadow: none; }
:root[data-theme="O"] .ddf-question { font-family: 'VT323', monospace; font-weight: 400; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .ddf-answer { font-family: 'VT323', monospace; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .ddf-answer::before { content: '= '; color: #7CFFA0; }

/* ── PIH: Gebotsliste wie ein sort-Ergebnis, der Preis riesig ─────────── */
:root[data-theme="O"] .pih-scores { border-bottom: 1px solid #2E7D4A; }
:root[data-theme="O"] .pih-score { border-radius: 0; background: transparent; border: 1px solid #2E7D4A; box-shadow: none; }
:root[data-theme="O"] .pih-score.lead { background: transparent; border-color: #7CFFA0; }
:root[data-theme="O"] .pih-score-pts { font-family: 'VT323', monospace; font-size: 1.3rem; }
:root[data-theme="O"] .pih-team { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px #2E7D4A, inset 0 -4px 0 var(--team); }
:root[data-theme="O"] .pih-team-pts { font-family: 'VT323', monospace; }
:root[data-theme="O"] .pih-item { font-family: 'VT323', monospace; font-weight: 400; font-size: 2.3rem; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .pih-stage :is(img, video) { border-radius: 0; border: 1px solid #2E7D4A; filter: sepia(1) hue-rotate(70deg) saturate(1.6) brightness(.9); }
:root[data-theme="O"] .pih-price { font-family: 'VT323', monospace; font-weight: 400; font-size: 4rem; line-height: 1; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .pih-bid-row { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(46,125,74,.5); box-shadow: none; font-family: 'VT323', monospace; font-size: 1.4rem; }
:root[data-theme="O"] .pih-bid-row.win { background: rgba(124,255,160,.08); border-bottom-color: #7CFFA0; box-shadow: none; color: #B8FFCD; }
:root[data-theme="O"] .pih-bid-row.win::after { content: '◄ WINNER'; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: #7CFFA0; }
:root[data-theme="O"] .pih-bid-row.bust .pih-bid-val::after { content: ' überboten'; text-decoration: none; display: inline-block; margin-left: 4px; font-family: 'IBM Plex Mono', monospace; font-size: .6rem; color: #4FB874; }

/* ── Trivial Pursuit ──────────────────────────────────────────────────── */
:root[data-theme="O"] .tp-team { background: transparent; border: 1px solid #2E7D4A; border-radius: 0; box-shadow: none; }
:root[data-theme="O"] .tp-team:is(.red, .blue, .green) { box-shadow: inset 0 -4px 0 var(--tc); }
:root[data-theme="O"] .tp-team.turn { transform: none; background: transparent; border-color: #7CFFA0; box-shadow: inset 0 -4px 0 var(--tc, #7CFFA0); }
:root[data-theme="O"] .tp-team-name { font-family: 'VT323', monospace; font-weight: 400; font-size: 1.5rem; }
:root[data-theme="O"] .tp-stage { border: 1px solid #2E7D4A; border-radius: 0; box-shadow: none; }
:root[data-theme="O"] .tp-catchip { border-radius: 0; font-family: 'IBM Plex Mono', monospace; }
:root[data-theme="O"] .tp-question { font-family: 'VT323', monospace; font-weight: 400; font-size: 2rem; line-height: 1.05; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .tp-question::before { content: '\276F\00a0'; color: #7CFFA0; }
:root[data-theme="O"] .tp-answer { border-radius: 0; border: 0; font-size: 1.6rem; font-weight: 400; }
:root[data-theme="O"] .tp-answer.hidden { background: none; border: 1px dashed #2E7D4A; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; }
:root[data-theme="O"] .tp-wheel-rotor { box-shadow: 0 0 0 1px #2E7D4A, 0 0 0 8px #031008, 0 0 0 9px #2E7D4A; filter: saturate(.75) brightness(.9); }
:root[data-theme="O"] .tp-wheel-hub { background: #031008; border: 1px solid #7CFFA0; box-shadow: none; font-family: 'VT323', monospace; color: #7CFFA0; }
:root[data-theme="O"] .tp-wheel-pointer { border-top-color: #7CFFA0; filter: none; }

/* ── Ergebnis, Turnier ────────────────────────────────────────────────── */
:root[data-theme="O"] .result-card { background: #031008; border: 1px solid #2E7D4A; border-radius: 0; box-shadow: none; backdrop-filter: none; text-align: left; font-family: 'IBM Plex Mono', monospace; }
:root[data-theme="O"] .result-scores strong { font-family: 'VT323', monospace; color: #B8FFCD; text-shadow: var(--o-glimm); }
:root[data-theme="O"] .tour-bar { height: 10px; border-radius: 0; background: repeating-linear-gradient(90deg, #1F5A33 0 6px, transparent 6px 8px); }
:root[data-theme="O"] .tour-bar-fill { border-radius: 0; background: repeating-linear-gradient(90deg, #7CFFA0 0 6px, transparent 6px 8px); }
:root[data-theme="O"] .tour-total { font-family: 'VT323', monospace; }
:root[data-theme="O"] .q-list-item { border-radius: 0; }
:root[data-theme="O"] .q-list-item.tour-lead { background: rgba(124,255,160,.06); border-color: #7CFFA0; }

/* ── Host: Menue als nummerierte Liste, Knoepfe als [ BEFEHL ] ────────── */
:root[data-theme="O"] .menu-cards { counter-reset: omenu; gap: 6px; }
:root[data-theme="O"] .menu-card { counter-increment: omenu; background: #031008; border: 1px solid #2E7D4A; border-radius: 0; box-shadow: none; padding-top: 30px; }
:root[data-theme="O"] .menu-card::before { content: counter(omenu, decimal-leading-zero); left: 10px; top: 6px; right: auto; height: auto; background: none; opacity: 1; font-family: 'VT323', monospace; font-size: 1.2rem; color: #4FB874; }
:root[data-theme="O"] .menu-card:hover { transform: none; background: #7CFFA0; border-color: #7CFFA0; box-shadow: none; --fg-strong: #031008; --muted: #0B3A1C; }
:root[data-theme="O"] .menu-card:hover::before { color: #031008; }
:root[data-theme="O"] .menu-card:hover .show-icon { --ico-fill: #031008; --ico-line: #031008; --ico-cut: #7CFFA0; --ico-dim: #2E7D4A; --ico-filter: none; }
:root[data-theme="O"] .menu-card-title { font-family: 'VT323', monospace; font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
:root[data-theme="O"] .menu-pill { border-radius: 0; border: 0; padding: 4px 6px; font-family: 'IBM Plex Mono', monospace; }
:root[data-theme="O"] .menu-pill::before { content: '['; color: #2E7D4A; } :root[data-theme="O"] .menu-pill::after { content: ']'; color: #2E7D4A; }
:root[data-theme="O"] :is(.menu-pill:hover, .menu-pill.active) { background: #7CFFA0; color: #031008; }
:root[data-theme="O"] .menu-divider { height: 1px; background: repeating-linear-gradient(90deg, #2E7D4A 0 6px, transparent 6px 10px); }
:root[data-theme="O"] .btn { border-radius: 0; font-family: 'IBM Plex Mono', monospace; font-weight: 600; letter-spacing: 1px; }
:root[data-theme="O"] .btn:hover { transform: none; }
:root[data-theme="O"] .btn::before { content: '[ '; } :root[data-theme="O"] .btn::after { content: ' ]'; }
:root[data-theme="O"] .btn-primary { background: #7CFFA0; color: #031008; box-shadow: none; }
:root[data-theme="O"] .btn-primary:hover { background: #B8FFCD; box-shadow: none; }
:root[data-theme="O"] .btn-primary::after { position: static; inset: auto; background: none; transform: none; transition: none; }
:root[data-theme="O"] .btn-secondary { background: transparent; border: 1px solid #2E7D4A; color: #B8FFCD; backdrop-filter: none; }
:root[data-theme="O"] .btn-secondary:hover { border-color: #7CFFA0; background: transparent; }
:root[data-theme="O"] .btn-danger { background: transparent; border: 1px solid #FF6B5E; color: #FF6B5E; box-shadow: none; }
:root[data-theme="O"] .btn-accent { background: transparent; border: 1px solid #6EA8FF; color: #6EA8FF; box-shadow: none; }
:root[data-theme="O"] :is(.editor-card, .setup-lobby, .resume-banner, .ddf-card, .design-card) { border-radius: 0; background: #031008; border: 1px solid #2E7D4A; }
:root[data-theme="O"] :is(.pr-team-btn, .setup-lobby .badge, .player-team-tag, .pmini-av) { border-radius: 0; }
:root[data-theme="O"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select) { border-radius: 0 !important; }
:root[data-theme="O"] .page-title { font-family: 'VT323', monospace; font-weight: 400; }

/* Niedriges Fenster (Beamer 1280x720): WWM lag mit untereinander
   stehenden Antworten 9 px, PIH mit grossem Preis 14 px unter dem Bild. */
@media (max-height: 900px) {
  :root[data-theme="O"] .wwm-answers { grid-template-columns: 1fr 1fr; }
  :root[data-theme="O"] .wwm-q { font-size: 1.8rem; }
  :root[data-theme="O"] .pih-price { font-size: 2.8rem; }
  :root[data-theme="O"] .wwm-rung { font-size: 1rem; }
  :root[data-theme="O"] .pih-item { font-size: 1.9rem; }
}

/* Die Antwort wird Zeichen fuer Zeichen getippt. */
@keyframes thOTippen {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes thOCursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="O"] .q-text:not(.hidden-q)::after { animation: none; }
}

/* ══ O · Komposition (2026-10-16) ══════════════════════════════════════════
   Bis hierher war O eine Terminalfarbe auf dem mittig gestapelten
   Standard-Layout: Logo gross in der Mitte, zwei Fenster quer darueber,
   darunter ein Kasten in der Bildmitte. Eine Konsole stapelt aber nicht
   mittig - sie fuellt das Fenster, schreibt von links oben nach unten und
   haelt unten eine invertierte Statuszeile.
   Also: der Screen ist das Fenster (1 px Rahmen in Phosphorgruen), die
   Teamfenster stehen oben links nebeneinander, der Inhalt laeuft
   linksbuendig darunter, und die Zeile mit Runde und Punkten sitzt als
   invertierter Balken ganz unten am Rand - wie die Statuszeile in vi.
   Grundsatz: alles linksbuendig, nichts zentriert, keine Flaechen ausser
   der invertierten Statuszeile.
   Markup und JavaScript sind nicht angefasst. */
:root[data-theme="O"] { --o-breit: min(1220px, 95vw); --o-linie: #2E7D4A; --o-fg: #B8FFCD; }

/* Das Fenster fuellt den Rest des Bildschirms. `flex: 1 0 auto`: wachsen
   ja, schrumpfen nie - sonst wuerde ein langer Screen gestaucht und liefe
   aus dem Beamerbild. */
:root[data-theme="O"] :is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active {
  flex: 1 0 auto; width: 100%; max-width: var(--o-breit); padding: 0 0 0;
  box-shadow: 0 0 0 1px var(--o-linie);
}
/* Innen ein Zeichen Luft, aussen die Rahmenlinie. */
:root[data-theme="O"] :is(#game-screen, #jeopardy-screen, #wwds-screen, #tp-screen, #finale-screen).active {
  padding: 16px 20px 0;
}
:root[data-theme="O"] :is(#wwm-screen, #ddf-screen, #pih-screen).active { padding: 16px 20px; }
/* Das Logo ist die Kopfzeile ueber dem Fenster: klein und links. */
:root[data-theme="O"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo {
  width: 100%; max-width: var(--o-breit); margin: 14px auto 8px; text-align: left;
}
:root[data-theme="O"] body:has(:is(#game-screen, #jeopardy-screen, #wwm-screen, #wwds-screen, #ddf-screen, #pih-screen, #tp-screen, #finale-screen).active) .logo svg {
  width: 170px; max-height: 56px;
}
/* Das Brett ist kein zweites Fenster im Fenster. */
:root[data-theme="O"] :is(#game-screen, #wwds-screen, #finale-screen) .board,
:root[data-theme="O"] #jeopardy-screen .jeopardy-board {
  background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0;
}

/* ── Die Statuszeile: invertiert, ganz unten, ueber die volle Breite ── */
/* `width: auto` statt `calc(100% + 40px)`: als Rasterfeld wird die Zeile
   ohnehin auf die Spaltenbreite gezogen, und die negativen Aussenabstaende
   schieben sie bis an die Fensterlinie. Mit calc blieb rechts eine Luecke. */
:root[data-theme="O"] :is(#game-screen, #jeopardy-screen, #wwds-screen, #tp-screen) .round-bar {
  width: auto; margin: 14px -20px 0; padding: 6px 20px;
  justify-content: flex-start; gap: 18px;
  background: var(--o-fg); color: #031008;
}
/* Die Marke "> am zug_" steht oben links im Teamfenster; linksbuendig
   gesetzt lag die Punktzahl sonst darunter. */
:root[data-theme="O"] #game-screen .team-panel.active-team { padding-top: 34px; }
:root[data-theme="O"] :is(#game-screen, #jeopardy-screen, #wwds-screen, #tp-screen) .round-bar .pts { color: #031008; text-shadow: none; }

/* ── Teamfenster: oben links nebeneinander ── */
:root[data-theme="O"] :is(#game-screen, #wwds-screen, #jeopardy-screen, #tp-screen) :is(.scoreboard, .wwds-top, .jeopardy-scores, .tp-top) {
  width: 100%; max-width: none; margin: 0 0 14px; padding: 0;
  justify-content: flex-start; flex-wrap: nowrap; gap: 18px;
}
:root[data-theme="O"] :is(#game-screen, #wwds-screen, #jeopardy-screen) :is(.team-panel, .wwds-team, .jeopardy-team):is(.red, .blue, .green) {
  flex: 0 1 300px; text-align: left;
}
:root[data-theme="O"] #game-screen .team-panel .t-score { font-size: clamp(2rem, 5.4vh, 2.8rem); }

/* ── Feud: Fenster oben, Liste darunter, Statuszeile unten ── */
:root[data-theme="O"] #game-screen.active {
  display: grid; grid-template-areas: "teams" "board" "status"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="O"] #game-screen .scoreboard { grid-area: teams; }
:root[data-theme="O"] #game-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="O"] #game-screen .round-bar { grid-area: status; }
:root[data-theme="O"] #game-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="O"] #game-screen .tile { min-height: clamp(40px, 8vh, 66px); }
:root[data-theme="O"] #game-screen .q-text { text-align: left; justify-content: flex-start; }

/* ── Jeopardy: die Tabelle fuellt das Fenster ── */
:root[data-theme="O"] #jeopardy-screen.active {
  display: grid; grid-template-areas: "teams" "board" "status"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="O"] #jeopardy-screen .jeopardy-scores { grid-area: teams; }
:root[data-theme="O"] #jeopardy-screen .jeopardy-board { grid-area: board; align-self: stretch; }
:root[data-theme="O"] #jeopardy-screen .round-bar { grid-area: status; }

/* Jeopardy-Frage: die Ausgabe eines Befehls - Kopfzeile, Leerzeile, Text. */
:root[data-theme="O"] .jeopardy-clue-overlay {
  display: grid; align-content: center; justify-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cat pts" "frage frage" "antwort antwort";
  padding: 8vh max(5vw, (100vw - var(--o-breit)) / 2); column-gap: 28px; row-gap: 0;
}
:root[data-theme="O"] .jeopardy-clue-overlay > * { grid-column: 1 / -1; }
:root[data-theme="O"] .jeopardy-clue-cat { grid-area: cat; align-self: end; justify-self: start; padding-bottom: 10px; }
:root[data-theme="O"] .jeopardy-clue-pts { grid-area: pts; align-self: end; justify-self: end; padding-bottom: 10px; }
:root[data-theme="O"] :is(.jeopardy-clue-cat, .jeopardy-clue-pts) { border-bottom: 1px solid var(--o-linie); }
:root[data-theme="O"] .jeopardy-clue-text {
  grid-area: frage; max-width: none; text-align: left; margin-top: 34px;
  font-size: clamp(2.2rem, 4vw + .8vh, 4rem); line-height: 1.06;
}
:root[data-theme="O"] .jeopardy-clue-blank { grid-area: frage; justify-self: start; margin-top: 34px; }
:root[data-theme="O"] .jeopardy-answer-text { grid-area: antwort; justify-self: start; text-align: left; margin-top: 24px; }

/* ── WWM: Radioknoepfe untereinander, Leiter als Tabelle ── */
:root[data-theme="O"] #wwm-screen .wwm-wrap { flex: 1; }
:root[data-theme="O"] #wwm-screen .wwm-main { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="O"] #wwm-screen .wwm-answers { flex: 1; align-content: stretch; }
:root[data-theme="O"] #wwm-screen .wwm-opt { min-height: clamp(54px, 10vh, 82px); }
:root[data-theme="O"] #wwm-screen .wwm-q { text-align: left; justify-content: flex-start; }

/* ── WWDS: Fenster oben, Buehne darunter, Statuszeile unten ── */
:root[data-theme="O"] #wwds-screen.active {
  display: grid; grid-template-areas: "teams" "board" "status"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="O"] #wwds-screen .wwds-top { grid-area: teams; }
:root[data-theme="O"] #wwds-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; }
:root[data-theme="O"] #wwds-screen .round-bar { grid-area: status; }
:root[data-theme="O"] #wwds-screen #wwds-stage { flex: 1; display: flex; flex-direction: column; }
:root[data-theme="O"] #wwds-screen .wwds-grid { flex: 1; align-content: stretch; }
:root[data-theme="O"] #wwds-screen .wwds-cat { min-height: clamp(44px, 8vh, 72px); }
:root[data-theme="O"] #wwds-screen .wwds-opts { flex: 1; align-content: stretch; }
:root[data-theme="O"] #wwds-screen .wwds-opt { min-height: clamp(42px, 7.5vh, 66px); }
/* Mit Publikumsjoker kommt ein Balkenbild dazu - ohne Deckel laeuft die
   Seite unten aus dem Beamerbild. */
:root[data-theme="O"] #wwds-screen:has(.wwds-aud) .wwds-opt { min-height: clamp(36px, 5.6vh, 48px); }
:root[data-theme="O"] #wwds-screen .wwds-aud { height: clamp(50px, 8.5vh, 66px); }

/* ── DDF: die Prozesstabelle steht oben, die Frage darunter ──
   Der innere Wrapper traegt inline `height:100%` - zirkulaer, sobald der
   Screen mit dem Inhalt waechst. Daher `height:auto` plus `flex:1`. */
:root[data-theme="O"] #ddf-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "spieler" "kick" "uhr" "frage" "media" "antwort" "note" "vote";
  grid-template-rows: auto auto auto 1fr auto auto auto auto;
}
:root[data-theme="O"] #ddf-screen .ddf-players { grid-area: spieler; max-width: none; width: 100%; margin: 0 0 12px; justify-content: flex-start; }
:root[data-theme="O"] #ddf-screen .ddf-alive { grid-area: kick; margin: 0 0 4px; text-align: left; }
:root[data-theme="O"] #ddf-timer { grid-area: uhr; text-align: left !important; }
/* `max-width: none` und `margin: 0`: die Frage steht sonst in einem
   zentrierten Satzblock und nicht am linken Rand wie jede Ausgabezeile. */
:root[data-theme="O"] #ddf-screen .ddf-question { grid-area: frage; display: flex; align-items: center; text-align: left; max-width: none; margin: 0; }
:root[data-theme="O"] #ddf-screen .ddf-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="O"] #ddf-screen .ddf-answer { grid-area: antwort; text-align: left; }
:root[data-theme="O"] #ddf-screen .ddf-note { grid-area: note; text-align: left; }
:root[data-theme="O"] #ddf-screen .ddf-vote-grid { grid-area: vote; }

/* ── PIH: Artikel und Preis als Ausgabe, Rangliste als Tabelle oben ── */
:root[data-theme="O"] #pih-screen > div {
  height: auto !important; width: 100%; flex: 1; display: grid !important;
  grid-template-areas: "teams" "rang" "uhr" "artikel" "bild" "media" "preis" "note" "gebote";
  grid-template-rows: auto auto auto auto 1fr auto auto auto auto;
}
:root[data-theme="O"] #pih-teams { grid-area: teams; }
:root[data-theme="O"] #pih-screen .pih-scores { grid-area: rang; max-width: none; gap: 6px; justify-content: flex-start; }
:root[data-theme="O"] #pih-screen .pih-score { padding: 3px 10px; gap: 7px; }
:root[data-theme="O"] #pih-screen .pih-score .pmini-av { width: 22px; height: 22px; font-size: .8rem; }
:root[data-theme="O"] #pih-timer { grid-area: uhr; text-align: left !important; }
:root[data-theme="O"] #pih-screen .pih-item { grid-area: artikel; text-align: left; }
:root[data-theme="O"] #pih-screen .pih-stage { grid-area: bild; display: flex; align-items: center; justify-content: flex-start; min-height: 0; }
/* Ohne Deckel schiebt das Produktfoto die Gebote aus dem Beamerbild. */
:root[data-theme="O"] #pih-screen .pih-stage :is(img, video) { max-height: min(26vh, 220px); width: auto; }
:root[data-theme="O"] #pih-screen .pih-media-bar { grid-area: media; justify-content: flex-start; }
:root[data-theme="O"] #pih-screen .pih-price { grid-area: preis; text-align: left; }
:root[data-theme="O"] #pih-screen .pih-note { grid-area: note; text-align: left; }
:root[data-theme="O"] #pih-screen .pih-bid-grid { grid-area: gebote; max-width: none; }

/* ── TP: Rad und Frage im Fenster, Statuszeile unten ── */
:root[data-theme="O"] #tp-screen.active {
  display: grid; grid-template-areas: "teams" "board" "status"; grid-template-rows: auto 1fr auto; row-gap: 0;
}
:root[data-theme="O"] #tp-screen .tp-top { grid-area: teams; }
:root[data-theme="O"] #tp-screen .tp-team:is(.red, .blue, .green) {
  flex: 0 1 300px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pie name" "pie sub";
  align-items: center; column-gap: 14px; text-align: left; transform: none;
}
:root[data-theme="O"] #tp-screen .tp-team .tp-pie { grid-area: pie; width: 50px; height: 50px; margin: 0; }
:root[data-theme="O"] #tp-screen .tp-team-name { grid-area: name; align-self: end; }
:root[data-theme="O"] #tp-screen .tp-team-sub { grid-area: sub; align-self: start; }
:root[data-theme="O"] #tp-screen .tp-board { grid-area: board; align-self: center; width: 100%; justify-content: flex-start; gap: 36px; }
:root[data-theme="O"] #tp-screen .round-bar { grid-area: status; }

/* ── Feud-Finale: Kopf oben, Liste darunter, Stand als Zeile ── */
:root[data-theme="O"] #finale-screen.active {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf uhr" "stand stand" "board board" "vergleich vergleich";
  grid-template-rows: auto auto 1fr auto; column-gap: 26px; row-gap: 0; align-items: start;
}
:root[data-theme="O"] #finale-screen .finale-header { grid-area: kopf; display: flex; align-items: baseline; gap: 16px; text-align: left; }
:root[data-theme="O"] #finale-screen .finale-timer { grid-area: uhr; justify-self: end; align-self: center; }
:root[data-theme="O"] #finale-screen .finale-scores { grid-area: stand; width: 100%; max-width: none; margin: 12px 0 0; justify-content: flex-start; gap: 18px; }
:root[data-theme="O"] #finale-screen .board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; margin-top: 14px; }
:root[data-theme="O"] #finale-screen .answers { flex: 1; align-content: stretch; }
:root[data-theme="O"] #finale-screen .finale-big-q { flex: 1; display: flex; align-items: center; text-align: left; }
/* Von js/feud.js erzeugt - ohne eigene Flaeche landet es per
   Auto-Platzierung oben rechts im Raster. */
:root[data-theme="O"] #finale-reveal-comparison { grid-area: vergleich; justify-content: flex-start; margin: 12px 0 16px; }

/* ── Ergebnis: die letzte Ausgabe, linksbuendig ── */
:root[data-theme="O"] #result-screen.active { width: 100%; max-width: min(900px, 94vw); align-items: flex-start; text-align: left; }
:root[data-theme="O"] #result-screen .result-icon { display: none; }
:root[data-theme="O"] #result-screen .result-card { width: 100%; text-align: left; }
:root[data-theme="O"] #result-screen .result-btns { justify-content: flex-start; }

/* ── Menue: die nummerierte Liste ──
   Statt eines 720-px-Blocks in der Mitte vier Spalten ueber die volle
   Breite. Hostseite, kommt nicht auf den Beamer. */
:root[data-theme="O"] #menu-screen.active { width: 100%; max-width: var(--o-breit); }
:root[data-theme="O"] #menu-screen .menu-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* ── P · Memphis: Formen mit Muster, schwarze Kontur, Punkteteppich ── */
:root[data-theme="P"] {
  --brd-surface: #FFFFFF;
  --brd-tex: radial-gradient(rgba(20,20,20,.18) 1.4px, transparent 1.8px) 0 0 / 16px 16px;
  --brd-frame: 0 0 0 4px #141414, 10px 10px 0 4px #7B5CFF;
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 18px;
  --tile: #FFFFFF;
  --tile-hover: #FFF8DF;
  --tile-tex: repeating-linear-gradient(-45deg, rgba(63,208,201,.35) 0 6px, transparent 6px 14px);
  --tile-edge: 0 0 0 3px #141414;
  --tile-fg: #141414;
  --tile-head: #FFD23F;
  --tile-head-fg: #141414;
  --tile-used: transparent;
  --tile-num: #141414;
  --tile-num-glow: none;
  --tile-dim-fg: #FFFFFF;
  --tile-bar: transparent;
  --tile-rule: transparent;
  --tile-open: #FF6FA8;
  --tile-open-edge: 0 0 0 3px #141414, 6px 6px 0 3px #141414;
  --tile-open-fg: #141414;
  --tile-open-dim: #FFFFFF;
  --tile-pts-bg: #FFFFFF;
  --tile-pts-rule: #141414;
  --tile-pick: #3FD0C9;
  --tile-pick-fg: #141414;
  --tile-right: #FFD23F;
  --tile-right-fg: #141414;
  --tile-radius: 14px;
  --tile-font: 'Lilita One', sans-serif;
  --tile-reveal: thPHuepf .7s cubic-bezier(.3,1.8,.5,1);
}
:root[data-theme="P"] .board { padding: 22px; }
:root[data-theme="P"] .answers { gap: 14px; }
:root[data-theme="P"] .answers.split { row-gap: 14px; column-gap: 20px; }
:root[data-theme="P"] .q-text { background: #141414; color: #FFFFFF; border-radius: 0; rotate: -1deg; box-shadow: 6px 6px 0 #FFD23F; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.45rem; margin-bottom: 18px; }
:root[data-theme="P"] .q-text.hidden-q { border: 0; }
:root[data-theme="P"] .tile, :root[data-theme="P"] .tile-inner { overflow: visible; }
:root[data-theme="P"] .tile-num { flex: 0 0 30px; width: 30px; height: 30px; margin: auto 8px auto 10px; border-radius: 50%; border: 2px solid #141414; background: #141414; font-family: 'Lilita One', sans-serif; font-size: .95rem; }
/* Die aufgedeckten Felder reihum in den vier Memphis-Farben. */
:root[data-theme="P"] .answers .tile:nth-child(4n+2).open .tile-inner { background: #3FD0C9; }
:root[data-theme="P"] .answers .tile:nth-child(4n+3).open .tile-inner { background: #FFD23F; }
:root[data-theme="P"] .answers .tile:nth-child(4n).open .tile-inner   { background: #7B5CFF; }
:root[data-theme="P"] .answers .tile:nth-child(4n).open .tile-answer  { color: #FFFFFF; }
:root[data-theme="P"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.3rem; }
:root[data-theme="P"] .tile.open .tile-pts { color: #141414; text-shadow: none; font-family: 'Lilita One', sans-serif; margin: 6px; border-radius: 50%; min-width: 46px; border: 2px solid #141414; }
:root[data-theme="P"] .jeopardy-board { gap: 12px; padding: 16px; border-radius: 18px; background: radial-gradient(rgba(20,20,20,.18) 1.4px, transparent 1.8px) 0 0 / 16px 16px, #FFFFFF; }
:root[data-theme="P"] .jeopardy-cat { border: 3px solid #141414; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: .9rem; letter-spacing: 0; text-transform: none; }
/* Jeopardy als Formen: Kreis, Quadrat, Pille, Tropfen - je Spalte. */
:root[data-theme="P"] .jeopardy-cell { box-shadow: 0 0 0 3px #141414, 5px 5px 0 3px #141414; font-family: 'Lilita One', sans-serif; font-size: 1.6rem; }
:root[data-theme="P"] .jeopardy-cell:nth-child(4n+1) { background: #FF6FA8; border-radius: 999px; }
:root[data-theme="P"] .jeopardy-cell:nth-child(4n+2) { background: #FFD23F; border-radius: 6px; }
:root[data-theme="P"] .jeopardy-cell:nth-child(4n+3) { background: #3FD0C9; border-radius: 30px 30px 6px 6px; }
:root[data-theme="P"] .jeopardy-cell:nth-child(4n)   { background: #B9A6FF; border-radius: 50% 50% 50% 10%; }
:root[data-theme="P"] .jeopardy-cell:hover:not(.used) { transform: rotate(-4deg) scale(1.05); }
:root[data-theme="P"] .jeopardy-cell.used { background: transparent; box-shadow: none; outline: 2px dashed rgba(20,20,20,.3); outline-offset: -4px; }
:root[data-theme="P"] .wwm-q { background: #FFFFFF; color: #141414; box-shadow: 0 0 0 4px #141414, 8px 8px 0 4px #FF6FA8; text-align: left; justify-content: flex-start; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.7rem; }
:root[data-theme="P"] .wwm-opt { background: #FFFFFF; box-shadow: 0 0 0 3px #141414, 6px 6px 0 3px #141414; font-weight: 400; font-size: 1.3rem; }
:root[data-theme="P"] .wwm-opt.selected { background: #3FD0C9; }
:root[data-theme="P"] .wwm-opt.correct { background: #FFD23F; }
:root[data-theme="P"] .wwm-opt .wwm-letter { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: #FF6FA8; box-shadow: 0 0 0 2px #141414; color: transparent; font-size: 0; }
:root[data-theme="P"] .wwm-opt:nth-child(2) .wwm-letter { border-radius: 2px; background: #3FD0C9; }
:root[data-theme="P"] .wwm-opt:nth-child(3) .wwm-letter { border-radius: 0; background: #FFD23F; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
:root[data-theme="P"] .wwm-opt:nth-child(4) .wwm-letter { border-radius: 2px; background: #7B5CFF; rotate: 45deg; }
@keyframes thPHuepf {
  0%   { transform: translateY(-30px) scale(.6) rotate(8deg); opacity: 0; }
  55%  { transform: translateY(4px) scale(1.06) rotate(-2deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* ── Q · Riso: Pink und Blau ueberdrucken sich, leicht verrutscht ── */
:root[data-theme="Q"] {
  --brd-surface: #F2EEE4;
  --brd-tex: radial-gradient(rgba(50,85,164,.07) 1px, transparent 1.3px) 0 0 / 5px 5px;
  --brd-frame: 0 0 0 2px #3255A4;
  --brd-well: transparent;
  --brd-inner: transparent;
  --brd-radius: 0;
  --tile: transparent;
  --tile-hover: rgba(255,72,176,.06);
  --tile-edge: inset 0 0 0 2px #3255A4;
  --tile-fg: #3255A4;
  --tile-head: transparent;
  --tile-head-fg: #3255A4;
  --tile-used: transparent;
  --tile-num: #3255A4;
  --tile-num-glow: 3px 2px 0 rgba(255,72,176,.85);
  --tile-dim-fg: rgba(50,85,164,.35);
  --tile-bar: transparent;
  --tile-rule: #3255A4;
  --tile-open: #E0309A;
  --tile-open-edge: inset 0 0 0 2px #3255A4, 4px 3px 0 #3255A4;
  --tile-open-fg: #FFFFFF;
  --tile-open-dim: #FFFFFF;
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(255,255,255,.5);
  --tile-pick: #3255A4;
  --tile-pick-fg: #FFFFFF;
  --tile-right: #FF48B0;
  --tile-right-fg: #FFFFFF;
  --tile-radius: 0;
  --tile-font: 'Bowlby One', sans-serif;
  --tile-reveal: thQPasser .55s steps(5, end);
}
:root[data-theme="Q"] .q-text { color: #3255A4; justify-content: flex-start; text-align: left; font-family: 'Bowlby One', sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; text-shadow: 3px 2px 0 rgba(255,72,176,.85); }
:root[data-theme="Q"] .q-text.hidden-q { border-color: #3255A4; text-shadow: none; }
/* Verdeckte Felder als Abriss-Marke mit Lochrand. */
:root[data-theme="Q"] .tile:not(.open) .tile-inner { background: radial-gradient(circle at 0 50%, #F2EEE4 6px, transparent 6.5px), radial-gradient(circle at 100% 50%, #F2EEE4 6px, transparent 6.5px); }
:root[data-theme="Q"] .tile-num { font-family: 'Bowlby One', sans-serif; font-size: 1.2rem; }
:root[data-theme="Q"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.15rem; text-shadow: 2px 2px 0 rgba(50,85,164,.6); }
:root[data-theme="Q"] .tile.open .tile-pts { color: #FFFFFF; text-shadow: 2px 2px 0 rgba(50,85,164,.6); font-family: 'Bowlby One', sans-serif; font-size: 1.5rem; }
:root[data-theme="Q"] .jeopardy-board { gap: 6px; padding: 10px; background: #F2EEE4; }
:root[data-theme="Q"] .jeopardy-cat { justify-content: flex-start; text-align: left; border-bottom: 2px solid #3255A4; font-family: 'Familjen Grotesk', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: 1px; }
:root[data-theme="Q"] .jeopardy-cell { box-shadow: none; font-family: 'Bowlby One', sans-serif; font-size: 2.2rem; line-height: 1.05; }
:root[data-theme="Q"] .jeopardy-cell:hover:not(.used) { transform: none; color: #FF48B0; text-shadow: 3px 2px 0 rgba(50,85,164,.85); }
/* Verbraucht: nur noch ein blasser Fehldruck. */
:root[data-theme="Q"] .jeopardy-cell.used { color: rgba(50,85,164,.1); text-shadow: 3px 2px 0 rgba(255,72,176,.12); }
:root[data-theme="Q"] .wwm-q { color: #3255A4; text-align: left; justify-content: flex-start; font-family: 'Bowlby One', sans-serif; font-weight: 400; font-size: 1.8rem; line-height: 1.1; text-shadow: 3px 2px 0 rgba(255,72,176,.85); }
:root[data-theme="Q"] .wwm-opt { font-weight: 700; font-size: 1.2rem; font-family: 'Familjen Grotesk', sans-serif; }
:root[data-theme="Q"] .wwm-opt .wwm-letter { font-family: 'Bowlby One', sans-serif; }
/* Der zweite Druckgang rastet in Stufen ein. */
@keyframes thQPasser {
  0%   { transform: translate(10px, -6px); opacity: .3; filter: hue-rotate(40deg); }
  40%  { transform: translate(-5px, 3px); opacity: 1; }
  70%  { transform: translate(2px, -1px); }
  100% { transform: none; filter: none; }
}

/* ── R · Jazzplatte: Plattenhuellen in der Kiste, Label mit Punkten ── */
:root[data-theme="R"] {
  --brd-surface: linear-gradient(180deg, #3A2617, #2A1B10) bottom / 100% 22px no-repeat, linear-gradient(180deg, #161616, #111111);
  --brd-frame: 0 18px 40px rgba(0,0,0,.6);
  --brd-well: #111111;
  --brd-inner: transparent;
  --brd-radius: 4px;
  --tile: linear-gradient(180deg, #232323, #181818);
  --tile-hover: linear-gradient(180deg, #2C2C2C, #1E1E1E);
  --tile-edge: inset 0 0 0 1px #333333, 0 6px 10px rgba(0,0,0,.45);
  --tile-fg: #F4F1EA;
  --tile-head: transparent;
  --tile-head-fg: #F4F1EA;
  --tile-used: #161616;
  --tile-num: #111111;
  --tile-num-glow: none;
  --tile-dim-fg: #555555;
  --tile-bar: rgba(244,241,234,.05);
  --tile-rule: transparent;
  --tile-open: #2D5BD7;
  --tile-open-edge: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.55);
  --tile-open-fg: #F4F1EA;
  --tile-open-dim: rgba(244,241,234,.6);
  --tile-pts-bg: transparent;
  --tile-pts-rule: transparent;
  --tile-pick: #F2A900;
  --tile-pick-fg: #111111;
  --tile-right: #F4F1EA;
  --tile-right-fg: #111111;
  --tile-radius: 3px;
  --tile-font: 'Antonio', sans-serif;
  --tile-reveal: thRZiehen .55s cubic-bezier(.2,.9,.3,1.1);
}
:root[data-theme="R"] .board { padding: 20px 20px 34px; }
:root[data-theme="R"] .q-text { color: #F4F1EA; justify-content: flex-start; text-align: left; font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.05; text-transform: uppercase; }
:root[data-theme="R"] .q-text.hidden-q { justify-content: center; }
:root[data-theme="R"] .tile { min-height: clamp(38px, 7vh - 8px, 56px); }
:root[data-theme="R"] .tile-num { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 1.1rem; }
/* Die Huellen reihum in den Farben der Kiste. */
:root[data-theme="R"] .answers .tile:nth-child(3n+2).open .tile-inner { background: #E8542A; }
:root[data-theme="R"] .answers .tile:nth-child(3n).open .tile-inner   { background: #F2A900; color: #111111; }
:root[data-theme="R"] .tile.open .tile-answer { font-weight: 700; font-size: 1.5rem; letter-spacing: .5px; }
/* Punkte auf dem Plattenlabel: Label in Senfgelb, aussen die schwarze Rille. */
:root[data-theme="R"] .tile.open .tile-pts {
  align-self: center; width: 44px; height: 44px; min-width: 44px; padding: 0; margin-right: 8px; border-radius: 50%;
  background: radial-gradient(circle, #F2A900 0 14px, #111 14.5px); color: #111111; text-shadow: none;
  font-family: 'Antonio', sans-serif; font-weight: 700; font-size: .95rem;
}
:root[data-theme="R"] .jeopardy-board { gap: 8px; padding: 10px; }
:root[data-theme="R"] .jeopardy-cat { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: 1px; }
/* Jeopardy als Buchruecken im Regal, je Spalte eine Farbe. */
:root[data-theme="R"] .jeopardy-cell { font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 2rem; color: #111111; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
:root[data-theme="R"] .jeopardy-cell:nth-child(5n+1) { background: #F2A900; }
:root[data-theme="R"] .jeopardy-cell:nth-child(5n+2) { background: #E8542A; }
:root[data-theme="R"] .jeopardy-cell:nth-child(5n+3) { background: #2D5BD7; color: #F4F1EA; }
:root[data-theme="R"] .jeopardy-cell:nth-child(5n+4) { background: #E9E4D8; }
:root[data-theme="R"] .jeopardy-cell:nth-child(5n)   { background: #C93A2E; color: #F4F1EA; }
:root[data-theme="R"] .jeopardy-cell:hover:not(.used) { transform: translateY(-4px); }
:root[data-theme="R"] .jeopardy-cell.used { background: #1B1B1B; color: transparent; }
:root[data-theme="R"] .wwm-q { background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(242,169,0,.12), transparent 70%), linear-gradient(180deg, #1E1E1E, #141414); box-shadow: inset 0 0 0 2px #3A2617, 0 0 0 6px #2A1B10, 0 18px 40px rgba(0,0,0,.55); color: #F4F1EA; font-family: 'Antonio', sans-serif; font-weight: 700; font-size: 2.1rem; line-height: 1.05; text-transform: uppercase; border-radius: 200px 200px 16px 16px; padding-top: 34px; }
/* WWM als Klaviertasten. */
:root[data-theme="R"] .wwm-opt { background: linear-gradient(180deg, #F4F1EA, #DCD6C8); color: #111111; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.45); font-size: 1.4rem; font-weight: 700; text-transform: uppercase; }
:root[data-theme="R"] .wwm-opt .wwm-letter { color: #111111; font-family: 'Antonio', sans-serif; }
:root[data-theme="R"] .wwm-opt.selected { background: #F2A900; }
:root[data-theme="R"] .wwm-opt.correct { background: #2D5BD7; color: #F4F1EA; }
:root[data-theme="R"] .wwm-opt.correct .wwm-letter { color: #F4F1EA; }
/* Die Huelle wird aus der Kiste gezogen. */
@keyframes thRZiehen {
  0%   { transform: translateY(40%); clip-path: inset(0 0 40% 0); filter: brightness(.6); }
  70%  { transform: translateY(-6%); clip-path: inset(0 0 0 0); filter: none; }
  100% { transform: translateY(0); }
}

/* ── S · Art deco: Messing, Hotelfaecher, Aufzugtueren ── */
:root[data-theme="S"] {
  --brd-surface: linear-gradient(180deg, #17140E, #0E0C08);
  --brd-frame: 0 0 0 1px #D9B66B, 0 0 0 6px #0B0A08, 0 0 0 7px #A8853F, 0 20px 50px rgba(0,0,0,.6);
  --brd-well: #0B0A08;
  --brd-inner: rgba(217,182,107,.35);
  --brd-radius: 2px;
  --tile: linear-gradient(180deg, #E9CF8F 0%, #B8954E 45%, #8A6A2C 55%, #D9B66B 100%);
  --tile-hover: linear-gradient(180deg, #F6E1A8 0%, #C9A65E 45%, #9C7A3A 55%, #E9CF8F 100%);
  --tile-edge: inset 0 1px 0 rgba(255,245,210,.6), inset 0 -2px 0 rgba(60,40,10,.5), 0 4px 10px rgba(0,0,0,.5);
  --tile-fg: #1B150A;
  --tile-head: transparent;
  --tile-head-fg: #D9B66B;
  --tile-used: #12100B;
  --tile-num: #1B150A;
  --tile-num-glow: 0 1px 0 rgba(255,245,210,.5);
  --tile-dim-fg: #1B150A;
  --tile-bar: #0B0A08;
  --tile-rule: rgba(60,40,10,.35);
  --tile-open: linear-gradient(180deg, #FBF3DE, #EFE3C2);
  --tile-open-edge: inset 0 0 0 3px #A8853F, inset 0 0 0 4px #EFE3C2, inset 0 0 0 5px #A8853F, 0 6px 14px rgba(0,0,0,.5);
  --tile-open-fg: #1B150A;
  --tile-open-dim: #8A6A2C;
  --tile-pts-bg: transparent;
  --tile-pts-rule: rgba(168,133,63,.6);
  --tile-pick: rgba(217,182,107,.18);
  --tile-pick-fg: #FBEBC0;
  --tile-right: linear-gradient(180deg, #FBEBC0, #D9B66B);
  --tile-right-fg: #1B150A;
  --tile-radius: 2px;
  --tile-font: 'Bodoni Moda', serif;
  --tile-reveal: thSTueren .75s cubic-bezier(.65,0,.25,1);
}
:root[data-theme="S"] .board { padding: 26px; }
:root[data-theme="S"] .answers { gap: 9px; }
:root[data-theme="S"] .answers.split { row-gap: 9px; column-gap: 14px; }
:root[data-theme="S"] .q-text { color: #EFE6D2; font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 600; font-size: 1.7rem; }
/* Verdeckt: Messingplatte mit dunklem Einwurfschlitz, Nummer darin. */
:root[data-theme="S"] .tile:not(.open) .tile-center::after { width: 54%; height: 10px; border-radius: 1px; box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,245,210,.5); }
:root[data-theme="S"] .tile-num { font-family: 'Poiret One', sans-serif; font-weight: 400; font-size: 1.3rem; }
:root[data-theme="S"] .tile.open .tile-answer { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1.4rem; }
:root[data-theme="S"] .tile.open .tile-pts { color: #8A6A2C; text-shadow: none; font-family: 'Bodoni Moda', serif; font-weight: 800; font-size: 1.6rem; }
:root[data-theme="S"] .jeopardy-board { gap: clamp(5px, 1.6vh - 6px, 8px); padding: 12px; }
:root[data-theme="S"] .jeopardy-cat { border-bottom: 1px solid #A8853F; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: 3px; }
:root[data-theme="S"] .jeopardy-cell { font-family: 'Bodoni Moda', serif; font-weight: 800; font-size: 2rem; letter-spacing: 1px; line-height: 1.1; }
:root[data-theme="S"] .jeopardy-cell:hover:not(.used) { transform: none; filter: brightness(1.08); }
:root[data-theme="S"] .wwm-q { color: #EFE6D2; font-family: 'Bodoni Moda', serif; font-weight: 600; font-size: 1.9rem; line-height: 1.15; }
:root[data-theme="S"] .wwm-opt { background: transparent; color: #EFE6D2; box-shadow: inset 0 0 0 1px #A8853F; font-family: 'Bodoni Moda', serif; font-weight: 600; font-size: 1.35rem; }
:root[data-theme="S"] .wwm-opt .wwm-letter { color: #D9B66B; font-family: 'Poiret One', sans-serif; }
:root[data-theme="S"] .wwm-opt.selected { box-shadow: inset 0 0 0 2px #D9B66B, 0 0 22px rgba(217,182,107,.3); }
:root[data-theme="S"] .wwm-opt.correct { background: linear-gradient(180deg, #FBEBC0, #D9B66B); color: #1B150A; }
:root[data-theme="S"] .wwm-opt.correct .wwm-letter { color: #1B150A; }
/* Wie Aufzugtueren im Grand Hotel: von der Mitte nach aussen. */
@keyframes thSTueren {
  0%   { clip-path: inset(0 50% 0 50%); filter: brightness(1.6); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}

/* Art deco: die Messingplatte ist hell, die Richtung dunkel. Was auf der
   Platte steht (Unterzeilen in rgba(--fg-rgb), Punkte in --accent-text),
   braucht dort dunkle Tinte. Und wer am Zug ist oder fuehrt, behaelt die
   Platte - die halbtransparente Goldflaeche dieser Zustaende laege sonst
   dunkel unter dunkler Schrift. */
:root[data-theme="S"] :is(.ddf-player, .pih-score, .pih-bid-row, .tp-team, .finale-score-card, .finale-reveal-team, .wwds-cat) {
  --fg-rgb: 27,21,10; --accent-text: #5A3F12;
}
:root[data-theme="S"] :is(.tp-team.turn, .pih-score.lead, .finale-score-card.active) {
  background: var(--tile); box-shadow: var(--tile-edge), 0 0 22px rgba(217,182,107,.45);
}


/* Bestes Gebot (PIH): die Abweichung stand in 45 % heller Schrift auf der
   Gewinnerflaeche der Richtung (Gold, Pink, Creme ...) - dort Feldschrift. */
:root[data-theme] .pih-bid-row.win .pih-bid-diff { color: inherit; opacity: .7; }

/* Finale-Aufloesung und Ergebnis: auf hellen Flaechen (helle Richtungen,
   Messing bei Art deco) reichten 40 % Schrift und Hellgruen nicht - gemessen
   2,1-2,6 fuer die Teamnamen, 1,1-2,0 fuer die Antwort. */
:root[data-theme-hell] :is(.finale-score-name, .finale-reveal-name),
:root[data-theme="S"] :is(.finale-score-name, .finale-reveal-name),
:root[data-theme="J"] :is(.finale-score-name, .finale-reveal-name) { color: rgba(var(--fg-rgb),.72); }
:root[data-theme-hell] .finale-reveal-answer.hit,
:root[data-theme="S"] .finale-reveal-answer.hit { color: #15803D; }
:root[data-theme-hell] .finale-reveal-answer.miss,
:root[data-theme="S"] .finale-reveal-answer.miss { color: #B42318; }
:root[data-theme-hell] .result-scores { color: rgba(var(--fg-rgb),.75); }
/* New York: die Karten liegen sonst direkt auf dem mittelbraunen Grund. */
:root[data-theme="L"] :is(.finale-score-card, .finale-reveal-team) { background: #EDE6D3; box-shadow: 0 0 0 1px #1A1712, 0 0 0 4px #EDE6D3, 0 0 0 5px #1A1712; }
/* Art deco: Messing ist mittelhell - Gruen und Rot brauchen dort mehr Tinte. */
:root[data-theme="S"] .finale-reveal-answer.hit { color: #0E3A1E; }
:root[data-theme="S"] .finale-reveal-answer.miss { color: #6E1410; }

/* Helle Richtungen: Unterzeilen in 45 % Schrift lagen auf hellen Flaechen
   unter Kontrast 3 (gemessen 2,3 bis 2,9). Die gruene Loesung bei DDF
   (#4ade80) ist auf Creme kaum zu lesen. */
:root[data-theme="S"] .tp-team-sub { color: rgba(var(--fg-rgb),.75); }
:root[data-theme-hell] .tp-team-sub { color: rgba(var(--fg-rgb),.7); }
:root[data-theme-hell] .tp-hint { color: rgba(var(--fg-rgb),.75); }
:root[data-theme-hell] .ddf-answer { color: #15803D; }
/* Die WWDS-Frage lag als rgba(0,0,0,.28) grau auf dem hellen Brett. */
:root[data-theme-hell] .wwds-q { background: rgba(255,255,255,.72); border-color: rgba(var(--fg-rgb),.18); }

/* Helle Richtungen: die WWM-Leiter lag als rgba(0,0,0,.25) grau auf Creme.
   Dort eine Panel-Flaeche mit Linie, wie die anderen Kaesten. */
:root[data-theme-hell] .wwm-ladder { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line); }

/* Niedriges Fenster (Beamer-Popout 1280x720): I, M, P, S setzen die Frage
   gross (1.4-1.7rem) bei Zeilenhoehe 1.5 und haben weite Brett-Polster und
   Abstaende - eine Frage ueber zwei Zeilen schob das Feud-Brett 6-34 px
   unten heraus (tools/shots feud-lang). Unter 900 px Hoehe enger, darueber
   unveraendert. */
@media (max-height: 900px) {
  :root:is([data-theme="I"], [data-theme="M"], [data-theme="P"], [data-theme="S"]) .q-text { line-height: 1.25; }
  :root:is([data-theme="I"], [data-theme="S"]) .board { padding-block: 16px; }
  :root[data-theme="P"] .board { padding-block: 14px; }
  :root[data-theme="P"] .q-text { margin-bottom: 10px; }
  :root[data-theme="P"] .answers { gap: 8px; }
  :root[data-theme="P"] .answers.split { row-gap: 8px; }
}

/* Niedriges Fenster (Beamer-Popout 1280x720), DDF, Preis ist heiss und
   Turnierstand mit acht Spielern bzw. vier Teams und sechs Spielen: DDF
   52-126, PIH 195-276, Turnierstand 133-153 px zu hoch (tools/shots,
   d897a6d). Unter 900 px Hoehe flacher; die Gebotsliste bei PIH steht in
   zwei Spalten (Platz 1 oben links). Darueber unveraendert. Steht hinter den
   Richtungen, damit gleich spezifische Regeln von dort nicht gewinnen. */
@media (max-height: 900px) {
  .ddf-players { gap: 8px; padding-bottom: 6px; margin-bottom: 2px; }
  .ddf-player { padding: 5px 14px; }
  .ddf-player-name { margin-bottom: 2px; }
  .ddf-question { font-size: clamp(1.6rem, 6vh, 3.4rem); padding: 6px 20px; }
  .ddf-answer { padding: 2px 20px 8px; }
  .ddf-note { padding-bottom: 4px; }
  .ddf-vote-grid { padding: 2px 0 6px; }

  .pih-teamrow { margin-bottom: 4px; }
  .pih-team { padding-block: 3px; }
  .pih-scores { gap: 6px 8px; margin-bottom: 6px; padding-bottom: 6px; }
  .pih-score { padding-block: 4px; }
  .pih-item { padding: 2px 12px 4px; line-height: 1.2; }
  /* Foto in der Bietphase: bei 720 px ~195 statt 245 px. */
  .pih-stage :is(img, video) { max-height: max(120px, 34vh - 50px); }
  .pih-media-bar { padding: 4px 0; }
  .pih-price { font-size: 2.1rem; padding: 0; }
  .pih-note { padding-bottom: 2px; }
  .pih-bid-grid { padding: 2px 0 6px; }
  .pih-bid-row { padding-block: 5px; }

  #tournament-board-content .q-list-item { padding-block: 6px; }
}
/* Preis ist heiss, Aufloesung mit Foto: schon bei 1920x1080 mit acht Geboten
   233 px zu hoch (Foto 34vh = 367 px plus Liste 8 x 45 px). Steht die
   Gebotsliste, laeuft sie in zwei Spalten (Platz 1 oben links, zeilenweise
   gelesen) und das Foto wird kleiner - bei jeder Fensterhoehe. Nicht auf
   schmalen Fenstern, dort waeren zwei Spalten zu eng. */
@media (min-width: 700px) {
  .pih-bid-grid:has(.pih-bid-row) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center; column-gap: 12px; row-gap: 6px;
  }
  .pih-bid-grid > :not(.pih-bid-row) { grid-column: 1 / -1; }
  #pih-screen:has(.pih-bid-row) .pih-stage :is(img, video) { max-height: clamp(80px, 34vh - 160px, 250px); }
}

/* Eingabefelder in den hellen Richtungen. Die Felder haben fest
   rgba(0,0,0,.3) als Grund, viele dazu inline color:#fff oder #FFD23F (121
   Feld-Tags in js/ und index.html). Auf Creme ergab das Kontrast 1,0-2,7,
   Median 2,3-3,1 (Studio-Blau 18,7). Hier ein heller Feldgrund mit Schrift
   in --fg. !important, weil sonst jedes Inline-Style im JS einzeln
   umgestellt werden muesste - und ein neues Feld waere wieder falsch.
   Nur hell: Studio-Blau und die dunklen Richtungen bleiben unberuehrt. */
:root[data-theme-hell] { --field-bg: rgba(255,255,255,.78); --field-line: rgba(var(--fg-rgb),.28); }
/* Auf den farbigen Teamkarten ist --fg weiss (siehe oben) - dort bleibt der
   dunkle Feldgrund, sonst stuende Weiss auf Weiss. */
:root[data-theme-hell] :is(.team-card, .team-panel, .jeopardy-team, .wwds-team):is(.red, .blue, .green) {
  --field-bg: rgba(0,0,0,.3); --field-line: rgba(255,255,255,.12);
}
:root[data-theme-hell] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), textarea, select) {
  background: var(--field-bg) !important; color: var(--fg) !important; border-color: var(--field-line) !important;
}
:root[data-theme-hell] :is(input, textarea, select):focus { border-color: var(--accent-text) !important; }
:root[data-theme-hell] :is(input, textarea)::placeholder { color: rgba(var(--fg-rgb),.45) !important; }
/* Zusatzinfo in Listen (".q-meta", z. B. "5 Antworten"): hell 1,5-1,75. */
:root[data-theme-hell] .q-meta:not(.tour-weight) { color: rgba(var(--fg-rgb),.5); }

/* ══ T · Keller ═══════════════════════════════════════════════════════════
   "The Binding of Isaac", mit den Bildern AUS dem Spiel statt mit
   nachgebauten Flaechen. Zwei Versuche davor waren reines CSS - Verlaeufe,
   Kanten, gezeichnete SVG-Sprites - und Davids Urteil beide Male: "das
   sieht 0 so aus wie The Binding of Isaac." Der Grund ist einfach: ein
   gezeichnetes Spiel besteht aus gemalten Pixeln, und die kann man nicht
   aus Farbwerten zusammenrechnen.

   Die Richtung in einem Satz: die Show spielt IN einem Raum. Unten liegt
   sein Boden, ringsum steht die gemauerte Wand, und jedes Ding darin -
   Block, Herz, Muenze - hat die schwarze Kontur, die im Spiel alles hat.

   Die Dateien liegen in assets/t/eigene/ und stehen in .gitignore; warum,
   steht ausfuehrlich in js/theme.js beim Eintrag "T". Fehlt der Ordner
   (auf GitHub Pages), bleiben Farbe und Kontur stehen - die Seite wird
   nicht kaputt, nur nuechtern. Jede Regel hier ist deshalb so gebaut,
   dass ein fehlendes Bild nichts mitreisst. */

:root[data-theme="T"] {
  /* DIE Isaac-Eigenschaft: dicke schwarze Kontur, flache Fuellung. */
  --stein-auf: 0 0 0 3px #000;
  --stein-ab: 0 0 0 3px #000, 0 5px 0 rgba(0,0,0,.55);
  /* Wandstein als Flaeche, abgedunkelt, damit Text darauf ruhig steht.
     Ohne die Abdunklung flimmert jede Zeile ueber den Fugen. */
  --wand: linear-gradient(rgba(0,0,0,.46), rgba(0,0,0,.46)), url('assets/t/eigene/wand.png');
  --wand-size: 128px 128px;

  /* Brett und Felder. Ohne diese Variablen bleibt das Jeopardy-Brett blau:
     die Grundregel (.jeopardy-cell) hat ein blaues Fallback eingebaut, und
     eine Richtung, die sie nicht setzt, erbt es. */
  --brd-surface: #3A2219;
  --brd-frame: 0 0 0 3px #000, 0 0 0 6px #5B392C;
  --brd-well: #2B1A15;
  --brd-inner: transparent;
  --brd-radius: 3px;
  --tile: #704536;
  --tile-hover: #835140;
  --tile-edge: 0 0 0 3px #000;
  --tile-fg: #F5EDE0;
  --tile-head: #3A2219;
  --tile-head-fg: #C68F3C;
  --tile-used: #2B1A15;
  --tile-num: #C68F3C;
  --tile-num-glow: none;
  --tile-dim-fg: #A68A74;
  --tile-bar: #492D24;
  --tile-rule: #000;
  /* Aufgedeckt ist das Feld aufgebrochen: dunkles Loch mit Kontur. */
  --tile-open: #2B1A15;
  --tile-open-edge: 0 0 0 3px #000;
  --tile-open-fg: #F5EDE0;
  --tile-open-dim: #C0A48F;
  --tile-pts-bg: #C68F3C;
  --tile-pts-rule: #000;
  --tile-pick: #C68F3C;
  --tile-pick-fg: #080000;
  --tile-right: #6FA82E;
  --tile-right-fg: #080000;
  --tile-radius: 3px;
  --tile-font: 'Zilla Slab', serif;
}

/* Pixel bleiben Pixel. Ohne das rechnet der Browser die Vorlagen weich und
   aus dem gezeichneten Spiel wird ein verwaschenes Foto - der sichtbarste
   Einzelfehler, den man mit echten Sprites machen kann. */
:root[data-theme="T"] body,
:root[data-theme="T"] body::before,
:root[data-theme="T"] .panel,
:root[data-theme="T"] .menu-card,
:root[data-theme="T"] .score-card,
:root[data-theme="T"] .info-card,
:root[data-theme="T"] .strike-pip,
:root[data-theme="T"] .board,
:root[data-theme="T"] .jeopardy-board { image-rendering: pixelated; }

/* ── Der Raum ─────────────────────────────────────────────────────────────
   Die gemauerte Wand steht als border-image rund um das Fenster: ein Bild
   mit neun Feldern (assets/t/eigene/rahmen.png, aus dem Backdrop des
   Spiels geschnitten und gespiegelt), 42 px je Feld, doppelt gezeigt.

   z-index: -1 ist Absicht. Der Rahmen gehoert HINTER den Inhalt, sonst
   liegt er ueber den Knoepfen am Rand; ein fixiertes Element mit z-index 0
   wuerde nach dem Inhalt gemalt. Mit -1 liegt er zwischen Bodenkachel und
   Seite - genau da, wo eine Wand hingehoert. */
:root[data-theme="T"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  border: 64px solid transparent;
  border-image-source: url('assets/t/eigene/rahmen.png');
  border-image-slice: 42;
  /* round, nicht repeat: die Kantenstuecke werden so gestaucht, dass sie
     ganzzahlig aufgehen. Mit repeat endete die Wand mitten im Stein. */
  border-image-repeat: round;
}
/* Leichte Abdunklung zum Rand, wie das Licht im Spiel. Nicht mehr: bei .62
   war der ganze Boden schwarz und die Textur verschwand. */
:root[data-theme="T"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 88% 80% at 50% 46%, transparent 58%, rgba(0,0,0,.42) 100%);
}

/* ── Flaechen sind Wandstein ──────────────────────────────────────────────
   Vorher waren es Farbfelder mit Kontur. Der Unterschied zum Spiel lag
   genau hier: dort ist nichts einfarbig, jede Flaeche hat Steinstruktur. */
:root[data-theme="T"] .panel,
:root[data-theme="T"] .menu-card,
:root[data-theme="T"] .score-card,
:root[data-theme="T"] .info-card {
  border-radius: 3px; border-width: 2px;
  background-image: var(--wand);
  background-size: var(--wand-size);
  box-shadow: var(--stein-auf), var(--stein-ab);
}
:root[data-theme="T"] .menu-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--stein-auf), 0 6px 0 rgba(0,0,0,.5), 0 10px 20px rgba(0,0,0,.4);
}
/* Knoepfe sind Bloecke: beim Druecken sinken sie auf den Boden, statt zu
   verblassen. Der Weg nach unten ist genau so hoch wie der Schatten. */
:root[data-theme="T"] .btn,
:root[data-theme="T"] .menu-pill {
  border-radius: 3px;
  box-shadow: inset 0 2px 0 rgba(255,236,200,.12), 0 3px 0 rgba(0,0,0,.5);
  transition: transform .07s ease-out, box-shadow .07s ease-out, filter .1s;
}
:root[data-theme="T"] .btn:active,
:root[data-theme="T"] .menu-pill:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,236,200,.08), 0 0 0 rgba(0,0,0,.5);
}
/* Der Hauptknopf ist eine Muenze: die drei Goldtoene sind aus dem Sprite
   gemessen (#C68F3C hell, #9E712E mitte, #775422 Schatten). */
:root[data-theme="T"] .btn-primary {
  background: linear-gradient(180deg, #E8C77A 0%, #C68F3C 44%, #9E712E 100%);
  color: #080000; text-shadow: none;
  box-shadow: inset 0 2px 0 rgba(255,246,222,.5), 0 4px 0 #775422;
}
:root[data-theme="T"] .btn-primary:active { box-shadow: inset 0 2px 0 rgba(255,246,222,.4), 0 1px 0 #775422; }

/* Schrift bekommt dieselbe Kontur wie alles andere - im Spiel ist jede
   Zahl im HUD schwarz umrandet. paint-order legt die Kontur HINTER die
   Fuellung, sonst frisst sie die Form auf. */
:root[data-theme="T"] .screen-title,
:root[data-theme="T"] .menu-card h3,
:root[data-theme="T"] .jeopardy-cell,
:root[data-theme="T"] .jeopardy-cat,
:root[data-theme="T"] .tile-num,
:root[data-theme="T"] .tile-pts,
:root[data-theme="T"] .tile-answer,
:root[data-theme="T"] .score-val,
:root[data-theme="T"] .wwm-q,
:root[data-theme="T"] .q-text,
:root[data-theme="T"] .logo-wort {
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
  letter-spacing: .5px;
}
/* Kleine Schrift vertraegt keine 3px - sonst laufen die Buchstaben zu. */
:root[data-theme="T"] .jeopardy-cat { -webkit-text-stroke-width: 2px; }

/* ── Herzen statt Kreuze ──────────────────────────────────────────────────
   In Isaac HAT man Herzen und verliert sie. Die Logik ist deshalb
   umgedreht: drei volle Herzen stehen da, jeder Strike nimmt eins weg.
   Das liest sich schneller als drei Kreuze, von denen manche "an" sind.

   Die Sprites sind jetzt die echten aus ui_hearts.png (16x16-Raster:
   voll bei 0,0 - leer bei 32,0), zugeschnitten nach assets/t/eigene/icon/.
   Fehlt der Ordner, nimmt der Browser das gezeichnete SVG dahinter: in
   einer background-image-Liste gilt die erste Quelle, die laedt. */
:root[data-theme="T"] .strike-pip {
  width: 36px; height: 34px;
  border: 0; border-radius: 0; background-color: transparent;
  color: transparent; font-size: 0;
  background-image: url('assets/t/eigene/icon/herz.png'), url('assets/t/herz.svg');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
  transition: transform .12s ease-out;
}
:root[data-theme="T"] .strike-pip.lit {
  background-image: url('assets/t/eigene/icon/herz-leer.png'), url('assets/t/herz-leer.svg');
  border: 0; background-color: transparent; color: transparent;
  transform: scale(.9);
}

/* ── Spielflaechen ────────────────────────────────────────────────────────
   Das Brett ist der Raum, die Felder sind die Steine darin. */
:root[data-theme="T"] .board,
:root[data-theme="T"] .jeopardy-board {
  border-radius: 3px; border: 3px solid #000;
  background-color: #3A2219;
  background-image: var(--wand);
  background-size: var(--wand-size);
  box-shadow: 0 0 0 3px #5B392C, 0 6px 0 rgba(0,0,0,.45);
}
/* Kontur statt Lichtkante. Diese Regel ueberschrieb vorher --tile-edge und
   nahm den Feldern genau das Merkmal, um das es geht. */
:root[data-theme="T"] .tile,
:root[data-theme="T"] .jeopardy-cell {
  border-radius: 3px;
  box-shadow: 0 0 0 3px #000, 0 5px 0 rgba(0,0,0,.5);
}
:root[data-theme="T"] .tile.open,
:root[data-theme="T"] .jeopardy-cell.used {
  box-shadow: 0 0 0 3px #000, inset 0 3px 8px rgba(0,0,0,.7);
  transform: translateY(2px);
}
:root[data-theme="T"] .jeopardy-cell:hover:not(.used) {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px #000, 0 7px 0 rgba(0,0,0,.5);
}
:root[data-theme="T"] .jeopardy-cell { font-family: 'Zilla Slab', serif; font-weight: 700; color: #C68F3C; }

/* Teamflaechen stehen als Block wie alles andere. Die FARBE bleibt, wie sie
   ist (BAUPLAN 4.4: Team-Rot und -Blau sind fest) - nur Kante und Schatten
   kommen dazu. "background-image: none" allein nahm sie weg: Rot und Blau
   kommen als Gradient, darunter liegt nichts; zwei durchsichtige Leisten
   waren die Folge, und damit war nicht mehr zu sehen, wer am Zug ist. */
/* Die Form der Punktetafel entsteht nicht an ".team-panel" - das Element
   hat weder Rundung noch Schatten. Beides sitzt an ".scoreboard"
   (border-radius: 14px, overflow: hidden), und solange das steht, bleiben
   die Teams rund, egal was hier an den Kindern gesetzt wird. Die schwarze
   Fuge zwischen den Teams ist die Luecke (gap) auf schwarzem Grund. */
:root[data-theme="T"] .scoreboard {
  border-radius: 3px; gap: 3px; background: #000;
  box-shadow: 0 0 0 3px #000, 0 5px 0 rgba(0,0,0,.5);
}
:root[data-theme="T"] .team-panel,
:root[data-theme="T"] .jeopardy-team {
  border-radius: 0;
  background-image: none;
}
:root[data-theme="T"] .jeopardy-team { box-shadow: 0 0 0 3px #000, 0 5px 0 rgba(0,0,0,.5); }
:root[data-theme="T"] .team-panel.red,
:root[data-theme="T"] .jeopardy-team.red    { background-color: #B9271F; }
:root[data-theme="T"] .team-panel.blue,
:root[data-theme="T"] .jeopardy-team.blue   { background-color: #2B5FC4; }
:root[data-theme="T"] .team-panel.green,
:root[data-theme="T"] .jeopardy-team.green  { background-color: #3C9440; }
/* ".team-name" gibt es im Markup nicht - der Name steht in ".t-name"
   (js/feud.js, buildScoreboard). Die Regel lief vorher ins Leere. */
:root[data-theme="T"] .team-panel .t-name,
:root[data-theme="T"] .jeopardy-team .jt-name {
  font-family: 'Bowlby One', sans-serif; letter-spacing: 1px;
}
:root[data-theme="T"] .jeopardy-cat { font-family: 'Bowlby One', sans-serif; letter-spacing: .5px; }
:root[data-theme="T"] .tile-num { font-family: 'Zilla Slab', serif; font-weight: 700; }
:root[data-theme="T"] .tile-pts { font-family: 'Zilla Slab', serif; font-weight: 700; color: #C68F3C; }

/* Punktzahlen bekommen die Muenze davor - im Spiel steht sie genauso im
   HUD vor der Zahl. Bewusst ::before am Wert und nicht an ".round-label":
   die Klasse gehoert zum GM-Fenster (GM_SHARED_CSS in js/core.js), dorthin
   reicht styles.css gar nicht. Genau daran scheiterte der Versuch davor. */
:root[data-theme="T"] .t-score::before,
:root[data-theme="T"] .score-val::before,
:root[data-theme="T"] .jt-score::before {
  /* Das Sprite ist 18x13; hier anderthalbfach, damit die Muenze neben einer
     3,2-rem-Zahl nicht zum Krümel wird. Seitenverhaeltnis bleibt. */
  content: ''; display: inline-block; vertical-align: .08em;
  width: 27px; height: 20px; margin-right: 10px;
  background-image: url('assets/t/eigene/icon/muenze.png'), url('assets/t/muenze.svg');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: pixelated;
}

/* Die Frage steht auf einer Tafel im Raum, nicht im Nichts. */
:root[data-theme="T"] .q-text,
:root[data-theme="T"] .wwm-q,
:root[data-theme="T"] .jeopardy-clue-text {
  font-family: 'Zilla Slab', serif; font-weight: 600;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
:root[data-theme="T"] .wwm-opt {
  border-radius: 3px;
  box-shadow: inset 0 2px 0 rgba(255,236,200,.1), 0 3px 0 rgba(0,0,0,.5);
}
:root[data-theme="T"] .wwm-opt .wwm-letter { color: #C68F3C; font-family: 'Bowlby One', sans-serif; }
/* Der Lichtkegel ueber der offenen Frage - im Spiel liegt jedes Item unter
   einem. Reines CSS, damit es auf der Leinwand laeuft (BAUPLAN 4.8). Er
   muss bis UNTER den Text reichen: im ersten Versuch endete er darueber,
   und die Frage stand im Dunkeln neben einem Dreieck. */
:root[data-theme="T"] .jeopardy-clue-overlay::before {
  content: ''; position: absolute; left: 50%; top: -6%; width: 58%; height: 86%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(198,143,60,.2) 0%, rgba(198,143,60,.1) 46%, transparent 92%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
/* Das Podest, auf dem die Frage liegt: eine flache Steinscheibe im Licht. */
:root[data-theme="T"] .jeopardy-clue-overlay::after {
  content: ''; position: absolute; left: 50%; top: 72%; width: 38%; height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(198,143,60,.3), transparent 72%);
  border-top: 2px solid rgba(198,143,60,.32);
  border-radius: 50%;
  pointer-events: none;
}
:root[data-theme="T"] .jeopardy-clue-cat,
:root[data-theme="T"] .jeopardy-clue-pts,
:root[data-theme="T"] .jeopardy-clue-text { position: relative; z-index: 1; }
/* Reduzierte Bewegung: Signatur-Momente und Dauerlaeufer aus. Steht am Ende
   des Blocks, damit es jede Richtung oben drueber schlaegt. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] { --tile-reveal: none; }
  :root[data-theme] .board,
  :root[data-theme] .tile.open .tile-inner::after { animation: none; }
}