/* =============================================================================
   BuzzBoard – die Bühne (Fernseher #/tv, später auch der Ein-Bildschirm-Modus).

   Feste 16:9-Fläche, mittig im Fenster. Alle Größen in „e“: 1 e = 1 % der
   Bühnenhöhe (--e). Auf einem 16:9-Fernseher ist das 1vh; bei schmaleren
   Fenstern rechnet die Media Query um. So sieht die Bühne auf jedem Gerät
   gleich aus und ist aus 3 m lesbar (Punktwerte ≥ 6 e, Kategorien ≥ 1,8 e).

   5 % Overscan-Rand rundum: Ältere Fernseher schneiden den Bildrand ab.

   Stile ([data-stil]): „glanz“ (Studio-Glanz, Standard) und „flach“
   (Klassisch-flach) tauschen nur Flächen, Schein und Schatten – nie das Layout.

   NUR CSS, das Chromium 68 kann (Tizen/webOS): kein clamp()/min()/max(), kein
   gap bei Flexbox (grid-gap ja), kein inset, kein aspect-ratio, kein :is().
   tools/check-tv-syntax.mjs prüft das.

   Kontraste (gegen Board-Blau #0b1e9e): Gold ≈ 9:1, Weiß ≈ 14:1.
   ============================================================================= */

html.tv-modus,
html.tv-modus body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #060a24;
}
html.tv-modus #auth,
html.tv-modus #app { display: none !important; }
html.tv-ruhig,
html.tv-ruhig * { cursor: none !important; }

.tv {
    --tv-grund: #060a24;
    --tv-grund-2: #0a1035;
    --tv-flaeche: #0f1748;
    --tv-kachel: #0b1e9e;
    --tv-kachel-hell: #1631c9;
    --tv-kachel-leer: #07124f;
    --tv-kante: #2a47e6;
    --tv-fuge: #030616;
    --tv-gold: #ffc83d;
    --tv-gold-hell: #ffd977;
    --tv-auf-gold: #1a1300;
    --tv-text: #f4f6ff;
    --tv-matt: #a9b6f0;
    --tv-richtig: #22c55e;
    --tv-falsch: #ef4444;
    --tv-falsch-hell: #ff8a8a;
    --tv-show: 'Barlow Condensed', 'Arial Narrow', 'Inter', sans-serif;
    --tv-font: 'Inter', 'Segoe UI', Roboto, sans-serif;

    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    overflow: hidden;
    background: var(--tv-grund);
    color: var(--tv-text);
    font-family: var(--tv-font);
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}
.tv.hidden,
.tv .hidden { display: none !important; }

/* Ein-Bildschirm-Modus in der App (#/partie/{id}/buehne): über der App-Hülle,
   unter Blättern und Dialogen (ui.js beginnt dann bei 600). */
body.buehne-offen .tv { z-index: 500; }

.tv-icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.12em;
}
.tv-icon + span { margin-left: 0.3em; }

.tv-flaeche,
.tv-rahmen {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.tv-rahmen {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------------------------
   Die Bühne: Kopf · Hauptfläche · Pulte
   ---------------------------------------------------------------------------- */

.tv-buehne {
    --e: 1vh;
    position: relative;
    width: 177.7778vh;
    height: 100vh;
    box-sizing: border-box;
    /* 5 % Overscan: 5 e oben/unten, 5 % der Breite (= 8,89 e) links/rechts */
    padding: calc(var(--e) * 5) calc(var(--e) * 8.8889);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: calc(var(--e) * 7) minmax(0, 1fr) auto;
    grid-row-gap: calc(var(--e) * 1.6);
    overflow: hidden;
    background: var(--tv-grund);
}
@media (max-aspect-ratio: 16/9) {
    .tv-buehne {
        --e: 0.5625vw;
        width: 100vw;
        height: 56.25vw;
    }
}

/* Spotlights (nur Studio-Glanz) */
.tv-licht {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 60% at 18% -5%, rgba(22, 49, 201, 0.42), rgba(22, 49, 201, 0) 70%),
        radial-gradient(45% 55% at 86% -8%, rgba(255, 200, 61, 0.07), rgba(255, 200, 61, 0) 70%),
        radial-gradient(70% 45% at 50% 110%, rgba(22, 49, 201, 0.30), rgba(22, 49, 201, 0) 70%);
}

.tv-kopf {
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}
.tv-titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 calc(var(--e) * 3.6) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tv-runde {
    flex: none;
    margin-left: calc(var(--e) * 3);
    font: 700 calc(var(--e) * 3.2) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tv-gold);
}

.tv-haupt {
    grid-row: 2;
    position: relative;
    min-height: 0;
}
.tv-haupt > section {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
}

.tv-pulte {
    grid-row: 3;
    position: relative;
    z-index: 3;   /* aufsteigende Punkte über der Karte */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: calc(var(--e) * 3);
}

/* Welche Teile je Ansicht */
[data-ansicht="kopplung"] .tv-kopplung,
[data-ansicht="lobby"] .tv-lobby,
[data-ansicht="karte"] .tv-karte,
[data-ansicht="finale"] .tv-finale,
[data-ansicht="stand"] .tv-stand { display: flex; }
[data-ansicht="board"] .tv-board,
[data-ansicht="karte"] .tv-board { display: grid; }

.tv-buehne[data-ansicht="kopplung"],
.tv-buehne[data-ansicht="leer"] { grid-template-rows: 0 minmax(0, 1fr) 0; grid-row-gap: 0; }
.tv-buehne[data-ansicht="stand"] { grid-template-rows: calc(var(--e) * 7) minmax(0, 1fr) 0; }
[data-ansicht="kopplung"] .tv-kopf,
[data-ansicht="kopplung"] .tv-pulte,
[data-ansicht="leer"] .tv-kopf,
[data-ansicht="leer"] .tv-pulte,
[data-ansicht="stand"] .tv-pulte { display: none; }

/* ----------------------------------------------------------------------------
   Kopplung: Code + QR
   ---------------------------------------------------------------------------- */

.tv-kopplung {
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--e) * 3);
}
.tv-k-text { flex: 1 1 auto; min-width: 0; }
.tv-marke {
    display: flex;
    align-items: center;
    font: 800 calc(var(--e) * 4) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tv-gold);
}
.tv-kopplung h1 {
    margin: calc(var(--e) * 3) 0 calc(var(--e) * 1.5);
    font: 700 calc(var(--e) * 5.6) / 1.05 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.tv-code {
    font: 800 calc(var(--e) * 19) / 1 var(--tv-show);
    letter-spacing: 0.05em;
    color: var(--tv-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tv-schritte {
    margin: calc(var(--e) * 3) 0 0;
    padding-left: calc(var(--e) * 3.6);
    font-size: calc(var(--e) * 2.9);
    line-height: 1.35;
    color: var(--tv-matt);
}
.tv-schritte li { margin-bottom: calc(var(--e) * 0.8); padding-left: calc(var(--e) * 0.6); }
.tv-k-gueltig {
    margin: calc(var(--e) * 2.4) 0 0;
    font-size: calc(var(--e) * 2.5);
    color: var(--tv-matt);
    font-variant-numeric: tabular-nums;
}
.tv-k-qr {
    flex: none;
    width: calc(var(--e) * 46);
    height: calc(var(--e) * 46);
    margin-left: calc(var(--e) * 6);
    padding: calc(var(--e) * 1.2);
    box-sizing: border-box;
    border-radius: calc(var(--e) * 2);
    background: #fff;
}
.tv-k-qr svg { display: block; width: 100%; height: 100%; }

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

.tv-lobby {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tv-lobby-titel {
    width: 100%;
    height: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 800 calc(var(--e) * 12) / 1 var(--tv-show);
    text-transform: uppercase;
    color: var(--tv-gold);
}
.tv-lobby-zeile {
    margin-top: calc(var(--e) * 3);
    font: 700 calc(var(--e) * 5) / 1.1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tv-lobby-anzahl {
    margin-top: calc(var(--e) * 1.6);
    font-size: calc(var(--e) * 2.8);
    color: var(--tv-matt);
}

/* ----------------------------------------------------------------------------
   Board
   ---------------------------------------------------------------------------- */

.tv-board {
    grid-gap: calc(var(--e) * 0.7);
    padding: calc(var(--e) * 0.7);
    box-sizing: border-box;
    border-radius: calc(var(--e) * 1.4);
    background: var(--tv-fuge);
}
.tv-kat,
.tv-zelle {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: calc(var(--e) * 0.8);
    background: linear-gradient(180deg, var(--tv-kachel-hell), var(--tv-kachel));
    box-shadow: inset 0 calc(var(--e) * 0.15) 0 rgba(255, 255, 255, 0.22), inset 0 calc(var(--e) * -0.5) calc(var(--e) * 1) rgba(0, 0, 0, 0.35);
}
.tv-kat { padding: calc(var(--e) * 0.6) calc(var(--e) * 0.8); }
.tv-kat span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    font: 700 calc(var(--e) * 3.2) / 1.05 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 calc(var(--e) * 0.2) 0 rgba(0, 0, 0, 0.45);
}
.tv-zelle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-zelle span {
    font: 800 calc(var(--e) * 7) / 1 var(--tv-show);
    color: var(--tv-gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 calc(var(--e) * 1.6) rgba(255, 200, 61, 0.45), 0 calc(var(--e) * 0.3) 0 rgba(0, 0, 0, 0.55);
}
.tv-board[data-zeilen="6"] .tv-zelle span { font-size: calc(var(--e) * 6); }
.tv-board[data-zeilen="7"] .tv-zelle span { font-size: calc(var(--e) * 5.2); }
.tv-board[data-zeilen="8"] .tv-zelle span { font-size: calc(var(--e) * 4.6); }
.tv-board[data-spalten="7"] .tv-zelle span,
.tv-board[data-spalten="8"] .tv-zelle span { letter-spacing: -0.01em; }

.tv-zelle[data-z="x"],
.tv-zelle[data-z="-"] { background: var(--tv-kachel-leer); box-shadow: inset 0 0 0 1px rgba(169, 182, 240, 0.08); }
.tv-zelle[data-z="x"] span,
.tv-zelle[data-z="-"] span { visibility: hidden; }
.tv-zelle[data-z="-"] { opacity: 0.45; }
.tv-zelle[data-z="a"] { animation: tv-aktiv 1.4s ease-in-out infinite; }

/* Ein-Bildschirm-Modus: offene Felder sind wählbar (Maus, Tab + Enter). */
.tv-zelle.is-klickbar { cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }
.tv-zelle.is-klickbar:hover,
.tv-zelle.is-klickbar:focus {
    outline: none;
    box-shadow: inset 0 0 0 calc(var(--e) * 0.45) var(--tv-gold), 0 0 calc(var(--e) * 2) rgba(255, 200, 61, 0.45);
}
.tv-zelle.is-klickbar:active { transform: scale(0.98); }

/* Unter einer offenen Karte tritt das Board zurück. */
[data-ansicht="karte"] .tv-board { opacity: 0.35; }

/* ----------------------------------------------------------------------------
   Karte: Frage, Medium, Lösung, Countdown, Joker
   ---------------------------------------------------------------------------- */

.tv-karte { z-index: 2; }
.tv-karte-innen {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--e) * 3.4) calc(var(--e) * 4) calc(var(--e) * 3);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: calc(var(--e) * 1.8);
    background: linear-gradient(180deg, var(--tv-kachel-hell), var(--tv-kachel) 55%, #091882);
    box-shadow: 0 calc(var(--e) * 2) calc(var(--e) * 6) rgba(0, 0, 0, 0.55), inset 0 calc(var(--e) * 0.2) 0 rgba(255, 255, 255, 0.25);
    transform-origin: 50% 50%;
}
.tv-karte-kopf {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font: 700 calc(var(--e) * 3.4) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tv-matt);
}
.tv-karte-kat {
    flex: 0 1 auto;
    max-width: 38%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tv-karte-wert {
    flex: none;
    margin-left: calc(var(--e) * 2);
    font-weight: 800;
    color: var(--tv-gold);
    font-variant-numeric: tabular-nums;
}
.tv-karte.is-joker .tv-karte-wert {
    padding: calc(var(--e) * 0.5) calc(var(--e) * 1.4);
    border-radius: calc(var(--e) * 4);
    background: var(--tv-gold);
    color: var(--tv-auf-gold);
}

.tv-karte-inhalt {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-top: calc(var(--e) * 2);
}
.tv-karte-medium {
    flex: 0 1 auto;
    max-width: 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--e) * 3);
}
.tv-karte-medium:empty { display: none; }
.tv-frage-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    font-weight: 600;
    font-size: calc(var(--e) * 6);
    line-height: 1.22;
    overflow-wrap: break-word;
}
.tv-karte.mit-medium .tv-frage-text { text-align: left; justify-content: flex-start; }
.tv-frage-text:empty { display: none; }

.tv-loesung {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "label label" "medium text";
    align-items: center;
    margin-top: calc(var(--e) * 2);
    padding-top: calc(var(--e) * 1.6);
    border-top: calc(var(--e) * 0.35) solid var(--tv-gold);
}
.tv-loesung-label {
    grid-area: label;
    margin-bottom: calc(var(--e) * 1);
    font: 700 calc(var(--e) * 2.4) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tv-gold);
}
.tv-loesung-text {
    grid-area: text;
    height: calc(var(--e) * 13);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    font-weight: 700;
    font-size: calc(var(--e) * 5);
    line-height: 1.15;
    color: var(--tv-gold);
    overflow-wrap: break-word;
}
.tv-loesung-medium {
    grid-area: medium;
    height: calc(var(--e) * 22);
    margin-right: calc(var(--e) * 3);
}
.tv-loesung-medium:empty { display: none; }
.tv-karte.hat-loesung .tv-loesung-text { height: calc(var(--e) * 13); }

/* Lösung mit Bild oder Video: Das Medium bekommt den Platz, die Frage rückt
   klein nach oben. */
.tv-karte.loesung-medium .tv-karte-inhalt { flex: 0 1 auto; max-height: 18%; margin-top: calc(var(--e) * 1.2); }
.tv-karte.loesung-medium .tv-frage-text { justify-content: flex-start; text-align: left; font-weight: 500; color: var(--tv-matt); }
.tv-karte.loesung-medium .tv-loesung {
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}
.tv-karte.loesung-medium .tv-loesung-medium { height: 100%; min-height: 0; }
.tv-karte.loesung-medium .tv-loesung-text { height: 100%; }

/* Medien */
.tv-medium {
    position: relative;
    height: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-medium img,
.tv-medium video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: calc(var(--e) * 1);
    background: #000;
}
.tv-medium-video video { height: 100%; }
.tv-medium-laedt {
    position: absolute;
    left: 50%;
    bottom: calc(var(--e) * 1.2);
    transform: translateX(-50%);
    padding: calc(var(--e) * 0.6) calc(var(--e) * 1.6);
    border-radius: calc(var(--e) * 3);
    background: rgba(3, 6, 22, 0.75);
    font-size: calc(var(--e) * 2);
    color: var(--tv-matt);
    white-space: nowrap;
}
.tv-medium.is-geladen .tv-medium-laedt { display: none; }
.tv-ton-bild {
    width: calc(var(--e) * 30);
    height: calc(var(--e) * 26);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--e) * 2);
    background: rgba(3, 6, 22, 0.45);
    color: var(--tv-gold);
}
.tv-ton-bild > .tv-icon { width: calc(var(--e) * 10); height: calc(var(--e) * 10); }
.tv-ton-wellen { display: flex; align-items: flex-end; height: calc(var(--e) * 6); margin-top: calc(var(--e) * 2); }
.tv-ton-wellen i {
    width: calc(var(--e) * 1.2);
    height: 100%;
    margin: 0 calc(var(--e) * 0.4);
    border-radius: calc(var(--e) * 0.6);
    background: var(--tv-gold);
    transform: scaleY(0.25);
    transform-origin: 50% 100%;
}
.tv-medium.is-spielt .tv-ton-wellen i { animation: tv-welle 0.9s ease-in-out infinite; }
.tv-ton-wellen i:nth-child(2) { animation-delay: -0.3s !important; }
.tv-ton-wellen i:nth-child(3) { animation-delay: -0.6s !important; }
.tv-ton-wellen i:nth-child(4) { animation-delay: -0.15s !important; }
.tv-ton-wellen i:nth-child(5) { animation-delay: -0.45s !important; }

/* Countdown: Balken oben an der Karte, Sekunden oben rechts */
.tv-countdown {
    position: absolute;
    top: 0; left: 0; right: 0;
    pointer-events: none;
}
.tv-cd-balken {
    height: calc(var(--e) * 0.9);
    background: rgba(255, 255, 255, 0.12);
}
.tv-cd-balken span {
    display: block;
    height: 100%;
    background: var(--tv-gold);
    transform-origin: 0 50%;
    transition: transform 200ms linear;
}
/* Mittig in der Kopfzeile: Kategorie links, Zeit in der Mitte, Wert rechts */
.tv-cd-zahl {
    position: absolute;
    top: calc(var(--e) * 1.8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: calc(var(--e) * 0.6) calc(var(--e) * 1.8);
    border-radius: calc(var(--e) * 5);
    background: rgba(3, 6, 22, 0.5);
    font: 800 calc(var(--e) * 4.6) / 1 var(--tv-show);
    color: var(--tv-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tv-countdown[data-z="bereit"] .tv-cd-zahl,
.tv-countdown[data-z="pause"] .tv-cd-zahl { color: var(--tv-matt); }
.tv-countdown[data-z="bereit"] .tv-cd-balken span { background: rgba(255, 200, 61, 0.35); }
.tv-countdown[data-z="wartet"] .tv-cd-zahl { font-size: calc(var(--e) * 2.8); color: var(--tv-matt); text-transform: uppercase; letter-spacing: 0.06em; }
.tv-cd-zahl .tv-icon { width: 0.8em; height: 0.8em; }
.tv-countdown.is-knapp .tv-cd-zahl,
.tv-countdown[data-z="ende"] .tv-cd-zahl { color: var(--tv-falsch-hell); }
.tv-countdown.is-knapp .tv-cd-balken span { background: var(--tv-falsch); }
.tv-countdown[data-z="ende"] .tv-cd-zahl { animation: tv-zeit 0.8s ease-in-out 3; text-transform: uppercase; }

/* Joker-Einsatz: großes JOKER statt der Frage */
.tv-joker { display: none; }
.tv-karte.is-joker-einsatz .tv-joker {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tv-karte.is-joker-einsatz .tv-karte-inhalt,
.tv-karte.is-joker-einsatz .tv-loesung { display: none; }
.tv-joker-wort {
    display: flex;
    align-items: center;
    font: 800 calc(var(--e) * 18) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tv-gold);
    text-shadow: 0 0 calc(var(--e) * 4) rgba(255, 200, 61, 0.55), 0 calc(var(--e) * 0.5) 0 rgba(0, 0, 0, 0.5);
}
.tv-joker-wort .tv-icon { width: 0.6em; height: 0.6em; margin-right: 0.15em; }
.tv-joker-wer {
    margin-top: calc(var(--e) * 3);
    padding: calc(var(--e) * 1) calc(var(--e) * 3);
    border-radius: calc(var(--e) * 5);
    border: calc(var(--e) * 0.4) solid var(--farbe);
    font: 700 calc(var(--e) * 4.4) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------------
   Pulte
   ---------------------------------------------------------------------------- */

.tv-pult {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(var(--e) * 34);
    margin: 0 calc(var(--e) * 0.6);
    padding: calc(var(--e) * 1) calc(var(--e) * 1.2) calc(var(--e) * 1.1);
    box-sizing: border-box;
    border-radius: calc(var(--e) * 1);
    border-top: calc(var(--e) * 0.7) solid var(--farbe, var(--tv-matt));
    background: linear-gradient(180deg, var(--tv-flaeche), var(--tv-grund-2));
    box-shadow: 0 calc(var(--e) * 0.8) calc(var(--e) * 2) rgba(0, 0, 0, 0.4);
    text-align: center;
    transition: transform 250ms ease, box-shadow 250ms ease, opacity 250ms ease;
}
.tv-pult-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font: 700 calc(var(--e) * 2.8) / 1.1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tv-pult-name span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tv-avatar {
    flex: none;
    width: calc(var(--e) * 3.2);
    height: calc(var(--e) * 3.2);
    margin-right: calc(var(--e) * 0.7);
    border-radius: 50%;
    object-fit: cover;
    background: var(--tv-grund-2);
}
.tv-pult-punkte {
    margin-top: calc(var(--e) * 0.6);
    font: 800 calc(var(--e) * 5.2) / 1 var(--tv-show);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tv-pult.is-minus .tv-pult-punkte { color: var(--tv-falsch-hell); }
.tv-pult-marke {
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--e) * -3);
    font: 700 calc(var(--e) * 2) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.tv-pult-marke .gold { color: var(--tv-gold); }
.tv-pult-marke .ok { color: var(--tv-richtig); }
.tv-pult-marke .falsch { color: var(--tv-falsch-hell); }
.tv-pult-marke .matt { color: var(--tv-matt); }
.tv-pult.is-am-zug {
    transform: translateY(calc(var(--e) * -0.6));
    box-shadow: 0 0 0 calc(var(--e) * 0.35) var(--tv-gold), 0 0 calc(var(--e) * 3) rgba(255, 200, 61, 0.5);
}
.tv-pult.is-gesperrt { opacity: 0.45; }
.tv-pult.blitz-richtig { animation: tv-blitz-richtig 1.2s ease-out; }
.tv-pult.blitz-falsch { animation: tv-blitz-falsch 1.2s ease-out; }

/* Viele Spieler: kleinere Pulte */
.tv-pulte[data-anzahl="7"] .tv-pult-punkte,
.tv-pulte[data-anzahl="8"] .tv-pult-punkte { font-size: calc(var(--e) * 4.2); }
.tv-pulte[data-anzahl="9"] .tv-pult-punkte,
.tv-pulte[data-anzahl="10"] .tv-pult-punkte { font-size: calc(var(--e) * 3.6); }
.tv-pulte[data-anzahl="7"] .tv-pult-name,
.tv-pulte[data-anzahl="8"] .tv-pult-name { font-size: calc(var(--e) * 2.3); }
.tv-pulte[data-anzahl="9"] .tv-pult-name,
.tv-pulte[data-anzahl="10"] .tv-pult-name { font-size: calc(var(--e) * 2); }
.tv-pulte[data-anzahl="9"] .tv-avatar,
.tv-pulte[data-anzahl="10"] .tv-avatar { display: none; }

.tv-delta {
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--e) * -2);
    z-index: 3;
    pointer-events: none;
    font: 800 calc(var(--e) * 6) / 1 var(--tv-show);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 calc(var(--e) * 0.3) calc(var(--e) * 1) rgba(0, 0, 0, 0.6);
}
.tv-delta.plus { color: var(--tv-richtig); }
.tv-delta.minus { color: var(--tv-falsch-hell); }

/* ----------------------------------------------------------------------------
   Finale
   ---------------------------------------------------------------------------- */

.tv-finale {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tv-finale-wort {
    display: flex;
    align-items: center;
    font: 800 calc(var(--e) * 13) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tv-gold);
    text-shadow: 0 0 calc(var(--e) * 3) rgba(255, 200, 61, 0.45);
}
.tv-finale-wort .tv-icon { width: 0.7em; height: 0.7em; margin-right: 0.2em; }
.tv-finale-kat {
    width: 100%;
    height: 30%;
    margin-top: calc(var(--e) * 3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 700 calc(var(--e) * 9) / 1.05 var(--tv-show);
    text-transform: uppercase;
}
.tv-finale-hinweis {
    margin-top: calc(var(--e) * 2);
    font-size: calc(var(--e) * 3);
    color: var(--tv-matt);
}

/* ----------------------------------------------------------------------------
   Stand: Zwischenstand und Siegerehrung
   ---------------------------------------------------------------------------- */

.tv-stand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tv-stand-titel {
    flex: none;
    display: flex;
    align-items: baseline;
    font: 800 calc(var(--e) * 6) / 1 var(--tv-show);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tv-gold);
}
.tv-stand-titel span {
    margin-left: calc(var(--e) * 1.6);
    font-size: 0.55em;
    color: var(--tv-matt);
}
.tv-stand-titel .tv-icon { align-self: center; margin-right: 0.25em; }
.tv-rangliste {
    width: 70%;
    margin-top: calc(var(--e) * 3);
    display: grid;
    grid-template-columns: 100%;
    grid-row-gap: calc(var(--e) * 1.2);
}
.tv-rangliste.is-zweispaltig .tv-rang { font-size: calc(var(--e) * 3.8); }
.tv-rangliste.is-zweispaltig {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: calc(var(--e) * 3);
    grid-auto-flow: column;
}
.tv-rang {
    display: flex;
    align-items: center;
    padding: calc(var(--e) * 1.1) calc(var(--e) * 2);
    border-radius: calc(var(--e) * 1);
    border-left: calc(var(--e) * 0.8) solid var(--farbe);
    background: linear-gradient(90deg, var(--tv-flaeche), var(--tv-grund-2));
    font: 700 calc(var(--e) * 4.6) / 1 var(--tv-show);
    text-transform: uppercase;
}
.tv-rang-platz {
    flex: none;
    width: calc(var(--e) * 5);
    color: var(--tv-gold);
    font-weight: 800;
}
.tv-rang-punkt {
    flex: none;
    width: calc(var(--e) * 2);
    height: calc(var(--e) * 2);
    margin-right: calc(var(--e) * 1);
    border-radius: 50%;
    background: var(--farbe);
}
.tv-rang .tv-avatar { width: calc(var(--e) * 4); height: calc(var(--e) * 4); margin-right: calc(var(--e) * 1); }
.tv-rang-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tv-rang-punkte {
    flex: none;
    margin-left: calc(var(--e) * 2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tv-rang-punkte.is-minus,
.tv-podest-punkte.is-minus { color: var(--tv-falsch-hell); }

.tv-sieger {
    flex: none;
    width: 100%;
    height: calc(var(--e) * 9);
    margin-top: calc(var(--e) * 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 800 calc(var(--e) * 7) / 1 var(--tv-show);
    text-transform: uppercase;
    text-align: center;
}
.tv-podest {
    flex: 1 1 auto;
    min-height: 0;
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.tv-podest-platz {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(var(--e) * 42);
    margin: 0 calc(var(--e) * 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tv-podest-platz .tv-avatar { width: calc(var(--e) * 7); height: calc(var(--e) * 7); margin: 0 0 calc(var(--e) * 1); border: calc(var(--e) * 0.4) solid var(--farbe); }
.tv-krone {
    margin-bottom: calc(var(--e) * 0.6);
    font-size: calc(var(--e) * 7);
    line-height: 1;
    color: var(--tv-gold);
    filter: drop-shadow(0 0 calc(var(--e) * 1.4) rgba(255, 200, 61, 0.6));
}
.tv-krone .tv-icon { display: block; }
/* Studio-Glanz: Lichtkegel auf Platz 1 */
.tv-podest-platz[data-platz="1"] .tv-podest-sockel {
    box-shadow: 0 calc(var(--e) * -3) calc(var(--e) * 8) rgba(255, 200, 61, 0.25);
}
[data-stil="flach"] .tv-krone { filter: none; }
[data-stil="flach"] .tv-podest-platz[data-platz="1"] .tv-podest-sockel { box-shadow: none; }
.tv-podest-name {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 calc(var(--e) * 4) / 1.1 var(--tv-show);
    text-transform: uppercase;
}
.tv-podest-punkte {
    margin: calc(var(--e) * 0.6) 0 calc(var(--e) * 1.2);
    font: 800 calc(var(--e) * 4.6) / 1 var(--tv-show);
    color: var(--tv-gold);
    font-variant-numeric: tabular-nums;
}
.tv-podest-sockel {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--e) * 1.4);
    border-radius: calc(var(--e) * 1) calc(var(--e) * 1) 0 0;
    border-top: calc(var(--e) * 0.7) solid var(--farbe);
    background: linear-gradient(180deg, var(--tv-kachel-hell), var(--tv-kachel));
    font: 800 calc(var(--e) * 8) / 1 var(--tv-show);
    color: var(--tv-gold);
}
.tv-podest-platz[data-platz="1"] .tv-podest-sockel { height: calc(var(--e) * 24); }
.tv-podest-platz[data-platz="2"] .tv-podest-sockel { height: calc(var(--e) * 16); }
.tv-podest-platz[data-platz="3"] .tv-podest-sockel { height: calc(var(--e) * 11); }
.tv-podest-platz[data-platz="2"] .tv-podest-sockel,
.tv-podest-platz[data-platz="3"] .tv-podest-sockel { font-size: calc(var(--e) * 6); }
.tv-rangliste.is-rest { width: 80%; margin-top: calc(var(--e) * 1.6); grid-row-gap: calc(var(--e) * 0.8); }
.tv-rangliste.is-rest .tv-rang { font-size: calc(var(--e) * 2.8); padding: calc(var(--e) * 0.7) calc(var(--e) * 1.6); }
.tv-ende-hinweis {
    margin-top: calc(var(--e) * 1.4);
    font-size: calc(var(--e) * 2.2);
    color: var(--tv-matt);
}

/* ----------------------------------------------------------------------------
   Start-Overlay („Bühne starten“ / „Ton freigeben“) und Netzhinweis
   ---------------------------------------------------------------------------- */

.tv-start {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 10, 36, 0.84);
}
.tv-start-karte {
    max-width: 72vmin;
    padding: 5vmin 7vmin;
    border-radius: 3vmin;
    border: 1px solid rgba(169, 182, 240, 0.25);
    background: #0a1035;
    box-shadow: 0 3vmin 8vmin rgba(0, 0, 0, 0.6);
    text-align: center;
}
.tv-start .tv-marke { justify-content: center; font-size: 3.4vmin; }
.tv-start h1 {
    margin: 2.6vmin 0 1.6vmin;
    font: 800 7vmin / 1 'Barlow Condensed', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
}
.tv-start-hinweis { margin: 0; font-size: 2.6vmin; line-height: 1.4; color: #a9b6f0; }
.tv-knopf {
    margin-top: 4.4vmin;
    padding: 2vmin 7vmin;
    border: 0;
    border-radius: 99vmin;
    background: #ffc83d;
    color: #1a1300;
    font: 800 4vmin / 1 'Barlow Condensed', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.tv-knopf:focus {
    outline: none;
    transform: scale(1.05);
    box-shadow: 0 0 0 0.7vmin #fff, 0 0 5vmin rgba(255, 200, 61, 0.75);
}

.tv-netz {
    position: fixed;
    left: 4vmin;
    bottom: 4vmin;
    z-index: 11;
    display: flex;
    align-items: center;
    max-width: 60vmin;
    padding: 1.4vmin 2.4vmin;
    border-radius: 1.4vmin;
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    font-size: 2.4vmin;
    line-height: 1.3;
}

/* ----------------------------------------------------------------------------
   Klassisch-flach: Kobalt, schwarze Fugen, gelbe Zahlen, keine Effekte
   ---------------------------------------------------------------------------- */

[data-stil="flach"] .tv-licht { display: none; }
[data-stil="flach"] .tv-board { background: #000; border-radius: 0; }
[data-stil="flach"] .tv-kat,
[data-stil="flach"] .tv-zelle,
[data-stil="flach"] .tv-karte-innen,
[data-stil="flach"] .tv-podest-sockel {
    background: var(--tv-kachel);
    box-shadow: none;
    border-radius: 0;
}
[data-stil="flach"] .tv-zelle[data-z="x"],
[data-stil="flach"] .tv-zelle[data-z="-"] { background: var(--tv-kachel-leer); }
[data-stil="flach"] .tv-zelle span,
[data-stil="flach"] .tv-kat span,
[data-stil="flach"] .tv-joker-wort,
[data-stil="flach"] .tv-finale-wort { text-shadow: none; }
[data-stil="flach"] .tv-zelle[data-z="a"] { animation: none; box-shadow: inset 0 0 0 calc(var(--e) * 0.5) var(--tv-gold); }
[data-stil="flach"] .tv-pult,
[data-stil="flach"] .tv-rang {
    background: var(--tv-grund-2);
    box-shadow: none;
    border-radius: 0;
}
[data-stil="flach"] .tv-pult.is-am-zug {
    transform: none;
    box-shadow: inset 0 0 0 calc(var(--e) * 0.35) var(--tv-gold);
}

/* ----------------------------------------------------------------------------
   Bewegung
   ---------------------------------------------------------------------------- */

@keyframes tv-aktiv {
    0%, 100% { box-shadow: inset 0 0 0 0.4vh #ffc83d; }
    50% { box-shadow: inset 0 0 0 0.4vh #ffc83d, 0 0 3vh rgba(255, 200, 61, 0.65); }
}
@keyframes tv-blitz-richtig {
    0% { background: #22c55e; }
    100% { background: #0a1035; }
}
@keyframes tv-blitz-falsch {
    0% { background: #ef4444; }
    100% { background: #0a1035; }
}
@keyframes tv-welle {
    0%, 100% { transform: scaleY(0.25); }
    50% { transform: scaleY(1); }
}
@keyframes tv-zeit {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .tv *,
    .tv *::before,
    .tv *::after {
        animation: none !important;
        transition: none !important;
    }
}