/* assets/theme-screen.css  —  Design 17, Etappe 5, Teil 2.
 *
 * DIE QUELLE FUER FARBEN UND BAUSTEINE DER SCREEN-WELT.
 *
 * Machart wie assets/theme-game.css (Design 4): Farbwerte stehen
 * AUSSCHLIESSLICH im Wurzelblock, jeder Baustein verweist nur auf
 * var(--screen-*). Geprueft in tests/screen_theme_test.php.
 *
 * WELCHE BILDSCHIRME (Guideline 18 Abschnitt 0):
 *   - board_display.html     der Bildschirm neben dem Board (X01, 121 Checkout)
 *   - game_display.php       die serverseitige Zweitanzeige der uebrigen Spiele
 *   - assets/tv_renderer.js  die vier TV-Anordnungen (Karten, Matrix,
 *                            Ziel-Dashboard, gemeinsames Ziel)
 *   - link.php               die Kopplungsseite am Fernseher
 *
 * NICHT HIER DRIN: die TURNIER-Anzeigen. tv_shell.php mit seinen fuenf
 * Huellen, assets/tv.css und assets/tv_pyramid_view.css sind abgenommen und
 * bleiben unangetastet. Sie sind das VORBILD dieser Welt - die neun Werte
 * unten sind aus tv.css abgelesen, nicht erfunden.
 *
 * DER GRUNDSATZ dieses Umbaus: angeglichen wird die FARBE, nicht der AUFBAU.
 * Keine Regel steht hier an einem anderen Platz als vorher; die Selektoren
 * und ihre Reihenfolge sind aus dem Bestand uebernommen. Der Nachweis liegt
 * in tests/browser/design17_screens.js (Geruestvergleich vorher/nachher).
 *
 * DER BESTAND VOR DEM UMBAU, nachgezaehlt: 40 verschiedene Hexwerte auf
 * board_display.html (16 im eigenen <style>, 24 in dem Stylesheet, das
 * tv_renderer.js zur Laufzeit einschob), 8 in game_display.php, und link.php
 * hing am Stylesheet der falschen Welt (SCREEN-01). Vier dunkle Familien fuer
 * dieselbe Sache.
 *
 * DIE DREI REGELN der Welt (Guideline 18 Abschnitt 3):
 *   Blau gliedert.  Gruen ist nur Zustand.  Gold ist nur Hervorhebung.
 * Daran haengen zwei Angleichungen, die hier sichtbar werden:
 *   - Der Namensbalken war ueberall gruen, auch bei wartenden Spielern. Gruen
 *     ist aber kein Schmuck: der ruhende Balken traegt jetzt die erhoehte
 *     Flaeche, der Balken des Spielers "am Zug" das Gruen.
 *   - Die Legs standen in einem eigenen Gruen. Sie sind kein Zustand, sondern
 *     ein hervorgehobener Wert - sie tragen jetzt den blauen Akzent.
 *
 * DAS ZEHNTE TOKEN, entschieden am 12.09.2026 (B-1): --screen-danger =
 * #f87171. Abschnitt 3a nannte neun Token und kein Rot, der Bestand braucht
 * eines (.tv-stat.t-bad, .tv-badge.t-bad). Abschnitt 2a sagt, Rot sei in allen
 * Welten gleich - gemeint ist die ROLLE, nicht der Zahlenwert: auf dem dunklen
 * Grund dieser Welt kommt #b91c1c als Text auf 2.3:1 und ist aus Entfernung
 * unlesbar. #f87171 traegt dieselbe Rolle mit lesbarem Kontrast.
 *
 * DESIGN 18 (Etappe 5, Teil 3, 12.09.2026) hat den AUFBAU geaendert - anders
 * als Teil 2, der nur die Farben anfasste:
 *   - "am Zug" ist ein gruener Balken LINKS am Spieler (Guideline 18 § 5).
 *     Der goldene Rahmen um die Karte und der gruen hinterlegte Name sind
 *     entfallen; der Name selbst blieb an seinem Platz.
 *   - Der Ziel-Bildschirm (Round the Clock, Shanghai) teilt sich in zwei
 *     benannte Haelften: oben Statistik und aktuelles Ziel, unten die
 *     Vorschau beziehungsweise die letzten Treffer (D-05, D-07).
 *   - Split Score zeigt Score, darunter das Ziel, darunter die Statistik
 *     (D-08).
 */

:root {
  /* --- Flaechen und Text ---------------------------- abgelesen aus tv.css --- */
  --screen-background:     #0b1220;   /* Seitengrund                (tv.css --bg)  */
  --screen-surface:        #131c2e;   /* Karten, Kopfzeile          (--panel)      */
  --screen-surface-raised: #1e293b;   /* ruhender Namensbalken, Kennzeichen        */
  --screen-border:         #22304a;   /* Trennlinien, Rahmen        (--line)       */
  --screen-text-primary:   #f1f5f9;   /* Haupttext, Grossziffer     (--ink)        */
  --screen-text-muted:     #93a3bb;   /* Beschriftungen, Zusatz     (--muted)      */

  /* --- Die drei Rollen ------------------------------------------------------- */
  --screen-accent:         #38bdf8;   /* BLAU gliedert              (--accent)     */
  --screen-live:           #34d399;   /* GRUEN ist nur Zustand      (--green)      */
  --screen-highlight:      #fbbf24;   /* GOLD ist nur Hervorhebung  (--amber)      */

  /* --- Entschieden am 12.09.2026, siehe Kopf dieser Datei -------------------- */
  --screen-danger:         #f87171;   /* Rot, lesbar auf dem dunklen Grund         */

  /* --- Struktur -------------------------------------------------------------- */
  --screen-font: "Segoe UI", Roboto, Arial, sans-serif;
  /* Die Breite des Balkens "am Zug". Keine Farbe - ein Mass. Er muss aus sechs
     Metern zu sehen sein, deshalb eher zu breit als zu schmal. */
  --screen-bar: clamp(12px, 1.2vw, 26px);

  /* --- Bestandsnamen als Alias -----------------------------------------------
     Wie im Spiel-Theme: board_display.html und game_display.php benutzen kurze
     Namen (--bg, --panel, --green ...). Sie hier auf die Token zu legen kostet
     nichts und erspart es, in zwei Dateien hunderte Regeln umzuschreiben. Es
     entsteht KEINE zweite Quelle - die Werte stehen nur einmal, oben.
     --green heisst weiterhin --green, traegt aber die ruhende Flaeche, und
     --legs den blauen Akzent (Begruendung im Kopf dieser Datei). */
  --bg:     var(--screen-background);
  --panel:  var(--screen-surface);
  --line:   var(--screen-border);
  --green:  var(--screen-surface-raised);
  --white:  var(--screen-text-primary);
  --muted:  var(--screen-text-muted);
  --active: var(--screen-highlight);
  --legs:   var(--screen-accent);
}

/* ==========================================================================
   DIE VIER TV-ANORDNUNGEN
   Bis zum 12.09.2026 schob assets/tv_renderer.js dieses Stylesheet zur
   Laufzeit selbst ein (ensureStyle, <style id="tv-renderer-style">). Die
   Regeln stehen hier UNVERAENDERT in Selektor, Reihenfolge und Mass - nur
   die Farbwerte sind Token geworden.
   ========================================================================== */

.tv{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--screen-background);color:var(--screen-text-primary);font-family:var(--screen-font);}
.tv-head{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--screen-surface);font-size:clamp(12px,1.6vh,20px);color:var(--screen-text-muted);flex:0 0 auto;}
.tv-head .c{flex:1;}
.tv-head .m{flex:1;text-align:center;font-weight:800;color:var(--screen-text-primary);}
.tv-head .r{flex:1;text-align:right;}
.tv-grid{flex:1;display:grid;gap:6px;padding:6px;min-height:0;}
.tv-grid.n1{grid-template-columns:1fr;}
.tv-grid.n2{grid-template-columns:1fr 1fr;}
.tv-grid.n3,.tv-grid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}

/* Karten (X01, 121 Checkout) */
/* "AM ZUG" IST EIN BALKEN LINKS (Guideline 18 § 5). Die ruhende Karte traegt
   denselben Balken durchsichtig - so haelt sie den Platz frei und nichts
   springt, wenn der Zug wechselt. */
.tv-card{display:flex;flex-direction:column;background:var(--screen-surface);border-radius:10px;overflow:hidden;border-left:var(--screen-bar) solid transparent;min-height:0;}
.tv-card.s-active{border-left-color:var(--screen-live);}
.tv-card.s-done{opacity:.75;}
.tv-card.s-disabled{opacity:.4;}
/* Der Name bleibt an seinem Platz, seine Flaeche nicht: gefaerbt wird der
   Balken, nicht der Name. */
.tv-card .nm{color:var(--screen-text-muted);text-align:center;font-weight:800;padding:6px 8px;font-size:clamp(30px,6.6vh,76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tv-card.s-active .nm{color:var(--screen-text-primary);}
.tv-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;}
.tv-primary{font-weight:800;line-height:.95;color:var(--screen-text-primary);font-size:clamp(60px,20vh,240px);}
.tv-card:not(.s-active) .tv-primary{color:var(--screen-text-muted);}
.tv-plabel{color:var(--screen-text-muted);font-size:clamp(10px,1.6vh,18px);letter-spacing:1px;}
.tv-hint{color:var(--screen-highlight);font-weight:800;font-size:clamp(16px,3.4vh,42px);margin-top:4px;}

/* Statistikzeile */
.tv-stats{display:flex;justify-content:space-around;padding:8px 4px;border-top:1px solid var(--screen-border);flex:0 0 auto;}
.tv-stat{text-align:center;}
.tv-stat .v{font-weight:800;font-size:clamp(34px,6.6vh,78px);}
.tv-stat .l{color:var(--screen-text-muted);font-size:clamp(16px,2.4vh,26px);letter-spacing:.5px;}
.tv-stat.t-good .v{color:var(--screen-live);}
.tv-stat.t-bad .v{color:var(--screen-danger);}
.tv-stat.t-warning .v{color:var(--screen-highlight);}
.tv-stat.t-accent .v{color:var(--screen-accent);}

/* Kennzeichen. Der Bestand faerbte die FLAECHE je Ton ein und schrieb weiss
   darauf; mit den hellen Toenen dieser Welt waere das unlesbar. Die Flaeche
   ist deshalb einheitlich, der Ton traegt die Schrift. */
.tv-badges{display:flex;gap:6px;justify-content:center;padding-bottom:6px;flex-wrap:wrap;}
.tv-badge{font-size:clamp(10px,1.6vh,16px);font-weight:700;border-radius:999px;padding:2px 10px;background:var(--screen-surface-raised);color:var(--screen-text-primary);}
.tv-badge.t-accent{color:var(--screen-accent);}
.tv-badge.t-good{color:var(--screen-live);}
.tv-badge.t-bad{color:var(--screen-danger);}
.tv-badge.t-warning{color:var(--screen-highlight);}

/* Matrix (Cricket) */
.tv-matrix{flex:1;display:flex;flex-direction:column;overflow:auto;padding:10px 14px;}
.tv-matrix-title{text-align:center;font-weight:800;color:var(--screen-text-primary);font-size:clamp(20px,4vh,44px);margin-bottom:10px;}
.tv-matrix table{width:100%;height:100%;border-collapse:separate;border-spacing:4px;}
.tv-matrix th,.tv-matrix td{background:var(--screen-surface);border-radius:8px;text-align:center;font-weight:800;font-size:clamp(20px,4.6vh,48px);padding:6px 4px;color:var(--screen-text-primary);}
.tv-matrix th.tv-mx-col{background:var(--screen-background);color:var(--screen-text-muted);}
.tv-matrix td.tv-mx-name,.tv-matrix th.tv-mx-name{text-align:left;padding-left:14px;background:var(--screen-surface);color:var(--screen-text-muted);white-space:nowrap;font-size:clamp(18px,3.6vh,40px);min-width:2.5em;border-left:var(--screen-bar) solid transparent;}
.tv-matrix tr.s-active td.tv-mx-name{border-left-color:var(--screen-live);color:var(--screen-text-primary);}
.tv-matrix tr:not(.s-active) td{opacity:.9;}
.tv-matrix .tv-mx-closed{color:var(--screen-text-muted) !important;text-decoration:line-through;background:var(--screen-background) !important;}
.tv-matrix .tv-mx-sum{color:var(--screen-live);background:var(--screen-surface-raised);}
.tv-matrix td.t-good{color:var(--screen-live);}

/* Ziel-Bildschirm (Round the Clock, Shanghai) - D-05 und D-07.
   ZWEI HAELFTEN: oben teilen sich Statistik und aktuelles Ziel den Platz,
   unten steht, was als naechstes kommt (Round the Clock) beziehungsweise was
   zuletzt geworfen wurde (Shanghai). Vorher war die Statistik ein schmaler
   Streifen, das Ziel stand unten und dazwischen lag eine leere Flaeche. */
.tv-dash{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px;min-height:0;}
.tv-dash-top{flex:1 1 50%;display:flex;flex-direction:column;gap:10px;min-height:0;}
.tv-dash-rest{flex:1 1 50%;display:flex;flex-direction:column;gap:8px;min-height:0;}
.tv-dash .row{display:flex;gap:10px;flex:0 0 auto;}
.tv-dash .box{flex:1;background:var(--screen-surface);border-radius:10px;padding:clamp(8px,1.6vh,18px) 10px;text-align:center;}
.tv-dash .box .l{color:var(--screen-text-muted);font-size:clamp(13px,2.2vh,26px);letter-spacing:.06em;}
.tv-dash .box .v{font-weight:800;font-size:clamp(30px,6.4vh,74px);line-height:1.05;}
.tv-dash .target{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--screen-accent);border-radius:14px;background:var(--screen-surface);min-height:0;}
.tv-dash .target .big{font-size:clamp(60px,22vh,240px);font-weight:800;line-height:.95;}
.tv-dash .target .l{color:var(--screen-text-muted);font-size:clamp(13px,2.2vh,26px);}
.tv-dash .target .progress{color:var(--screen-accent);}

/* Der untere Bereich: eine Ueberschrift und darunter grosse Kacheln. */
.tv-dash-rest .h{color:var(--screen-text-muted);font-size:clamp(13px,2.4vh,28px);letter-spacing:.08em;text-align:center;flex:0 0 auto;}
.tv-dash-rest .items{flex:1;display:flex;gap:10px;min-height:0;}
.tv-dash-rest .item{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--screen-surface);border-radius:12px;font-weight:800;font-size:clamp(28px,7vh,86px);line-height:1.05;padding:6px;overflow:hidden;}
/* Die letzten Treffer: der juengste zuerst und hervorgehoben. */
.tv-dash-rest .item.neu{color:var(--screen-text-primary);background:var(--screen-surface-raised);}
.tv-dash-rest .item.alt{color:var(--screen-text-muted);}
/* Noch nichts geworfen: der Platzhalter soll nicht schreien. */
.tv-dash-rest .item.leer{color:var(--screen-text-muted);font-size:clamp(16px,3vh,34px);font-weight:600;}

/* Gemeinsames Ziel (Split Score) - D-08.
   Score oben, darunter ein EIGENER grosser Bereich fuer das Ziel, erst darunter
   die Statistik mit der Runde. Vorher stand die Statistik zuoberst und das Ziel
   dazwischen; fuer den Spielablauf ist das Ziel mindestens ebenso wichtig wie
   der Score. */
.tv-shared{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px;min-height:0;}
.tv-shared .tv-grid{flex:1 1 58%;padding:0;min-height:0;}
.tv-shared .goal{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,40px);background:var(--screen-surface);border:2px solid var(--screen-accent);border-radius:12px;padding:clamp(6px,1.4vh,16px) 10px;text-align:center;}
.tv-shared .goal .l{color:var(--screen-text-muted);font-size:clamp(14px,2.6vh,32px);letter-spacing:.08em;}
.tv-shared .goal .big{font-size:clamp(46px,13vh,150px);font-weight:800;line-height:1;}
.tv-shared .status{display:flex;gap:10px;flex:0 0 auto;}
.tv-shared .status .box{flex:1;background:var(--screen-surface);border-radius:10px;padding:clamp(4px,1vh,12px) 8px;text-align:center;}
.tv-shared .status .box .l{color:var(--screen-text-muted);font-size:clamp(12px,2vh,24px);letter-spacing:.06em;}
.tv-shared .status .box .v{font-weight:800;font-size:clamp(20px,4vh,46px);}

/* ==========================================================================
   DIE KARTEN DER ZWEITANZEIGE
   game_display.php und die 121-Ansicht in board_display.html bauen ihre Karten
   selbst (.cp / .cn). Die REGEL, wie "am Zug" aussieht, steht trotzdem nur
   hier - sonst gaebe es sie dreimal.
   ========================================================================== */
.cp{border-left:var(--screen-bar) solid transparent;}
.cp.act{border-left-color:var(--screen-live);}
.cn{background:transparent;color:var(--screen-text-muted);}
.cp.act .cn{color:var(--screen-text-primary);}

/* ==========================================================================
   DIE SIEGERANIMATION (SPIEL-16, Entscheide Thomas 22./23.09.2026;
   SIEGER-01, 25.09.2026: Lottie-Feuerwerk statt Raketen, Aussehen nach
   docs/design/siegeranimation-vorschau.html)
   Nur auf dem Board-Screen (board_display.html), gebaut von
   assets/sieger_screen.js. Ueber allem, auch ueber dem iframe der
   Zweitanzeige. Farben ausschliesslich aus den Token dieser Welt - auch das
   Feuerwerk (assets/animations/fireworks.json) wird zur Laufzeit aus
   --screen-text-primary, --screen-highlight und --screen-accent gefaerbt.
   Schichten: Feuerwerk (1) unter dem Inhalt (2) unter dem Kopf (3).
   Reduzierte Bewegung: kein Pop, Feuerwerk als Standbild.
   Nur Klassen mit dem Praefix sg- (kein .play, .on, .fx, .phase - die
   kollidierten in der Vorschau).
   ========================================================================== */
.sg-screen{position:fixed;inset:0;z-index:9500;overflow:hidden;
  background:var(--screen-background);color:var(--screen-text-primary);font-family:var(--screen-font);}
/* Der Kopf wie die Spiel-TV-Ansichten: Kontext links, Board Mitte (blau), Spielart rechts. */
.sg-kopfzeile{position:absolute;inset:0 0 auto 0;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:baseline;gap:1vw;padding:1.6vw 2.4vw 1.1vw;border-bottom:1px solid var(--screen-border);
  background:var(--screen-background);font-size:clamp(14px,2vw,34px);font-weight:700;line-height:1.2;}
.sg-kopfzeile .sg-ctx{color:var(--screen-text-muted);font-weight:600;text-align:left;min-height:1em;}
.sg-kopfzeile .sg-brd{color:var(--screen-accent);text-align:center;}
.sg-kopfzeile .sg-mode{color:var(--screen-text-muted);font-weight:600;text-align:right;}
/* Das Feuerwerk: sechs Instanzen, ueber die Breite verteilt, unter dem Inhalt.
   SIEGER-02 (27.09.2026): die Instanzen sitzen 30 % der Bildhoehe tiefer (Lage aus
   der Komponente, oben 12-52 %) - damit liegt das Feuerwerk hinter dem Namen; der
   Name bleibt lesbar durch den mehrschichtigen Schatten aus --screen-background. */
.sg-fx-lage{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.sg-fx{position:absolute;pointer-events:none;transition:opacity .8s;}
.sg-fx svg{display:block;width:100%;height:100%;}
.sg-fx-gedaempft{opacity:.35;}
/* Der Inhalt der Phase. */
.sg-inhalt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6vw 4vw 2vw;gap:clamp(6px,1vh,16px);}
/* Phase 1: "Sieger" und der Name gross in Gold mit kurzem Pop - vor dem Feuerwerk,
   deshalb (SIEGER-02) ein weicher Hof und der Kantenschatten aus --screen-background. */
.sg-lbl{font-size:clamp(16px,2.4vw,40px);font-weight:600;color:var(--screen-text-muted);
  text-shadow:0 0 1.2vw var(--screen-background),0 0 .4vw var(--screen-background);}
.sg-name{font-size:clamp(48px,10vw,200px);font-weight:800;line-height:1;color:var(--screen-highlight);
  max-width:100%;overflow-wrap:anywhere;
  text-shadow:0 .3vw 0 var(--screen-background),0 0 2.4vw var(--screen-background),0 0 .8vw var(--screen-background);
  animation:sg-pop .9s cubic-bezier(.2,1.35,.4,1) both;}
@keyframes sg-pop{0%{transform:scale(.4);opacity:0;}60%{opacity:1;}100%{transform:scale(1);}}
/* Phase 2 (X01): Karte Sieger, Legs mit Format-Chip, Karte Zweiter. */
.sg-x01{display:grid;grid-template-columns:1fr auto 1fr;gap:2.4vw;align-items:stretch;width:100%;max-width:88vw;}
.sg-karte{background:var(--screen-surface);border:1px solid var(--screen-border);border-radius:.6vw;padding:2.2vw 2vw;
  display:flex;flex-direction:column;gap:.6vw;justify-content:center;text-align:left;min-width:0;}
.sg-karte .sg-k{font-size:clamp(14px,1.9vw,32px);color:var(--screen-text-muted);font-weight:600;}
.sg-karte .sg-n{font-size:clamp(28px,4.6vw,80px);font-weight:800;line-height:1.05;overflow-wrap:anywhere;}
.sg-karte-sieger{box-shadow:inset .9vw 0 0 var(--screen-highlight);}
.sg-karte-sieger .sg-n{color:var(--screen-highlight);}
.sg-karte-zweiter .sg-n{color:var(--screen-text-muted);}
.sg-legs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4vw;min-width:18vw;}
.sg-legs .sg-k{font-size:clamp(14px,1.9vw,32px);color:var(--screen-text-muted);font-weight:600;}
.sg-legs .sg-v{font-size:clamp(40px,8vw,150px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--screen-text-primary);}
.sg-chip{margin-top:.6vw;background:var(--screen-surface-raised);color:var(--screen-text-muted);
  font-size:clamp(12px,1.6vw,26px);font-weight:600;padding:.3vw 1vw;border-radius:.4vw;}
/* Ruhiges Standbild: das Betriebssystem wuenscht weniger Bewegung - oder die
   Komponente hat es erkannt (.sg-ruhig). Kein Pop; das Feuerwerk steht
   (Frame 70, gesetzt von der Komponente). */
.sg-ruhig .sg-name{animation:none;}
.sg-ruhig .sg-fx{transition:none;}
@media (prefers-reduced-motion: reduce){
  .sg-screen .sg-name{animation:none;}
  .sg-screen .sg-fx{transition:none;}
}

/* ==========================================================================
   SPIEL-25 (Entscheide Thomas 25.09.2026): EREIGNIS-ANIMATIONEN - die Buehne
   von assets/ereignis_screen.js. Selbst gezeichnete Figuren (Inline-SVG),
   nur Token. Die Dauer kommt als --ev-ms aus der Komponente; im Stau wird sie
   verkuerzt, die Bewegung folgt ihr.
   ELIM-01 (Nachtauftrag 25.09.2026, Vorlage leben-verlieren-vorschau.html):
   "Leben verloren" und "ausgeschieden" laufen mit Lottie (.el-*, unten) - die
   Figur mit Hammer und die Figur mit fliegendem Herz sind entfallen; die
   Herzen der Karte (.el-herz) zeichnet tv_renderer.js in currentColor.
   ========================================================================== */
.ev-screen{position:fixed;inset:0;z-index:9400;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,20px);
  background:var(--screen-background);color:var(--screen-text-primary);
  font-family:var(--screen-font);text-align:center;padding:clamp(16px,4vh,48px) clamp(16px,4vw,60px);}
.ev-buehne{position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(8px,2vw,40px);height:clamp(140px,44vh,420px);}
/* (.ev-buehne-breit entfiel mit KUM-01 - Hammer und Rutsch sind Lottie geworden.) */
.ev-spieler{position:relative;height:100%;}
.ev-figur{display:block;height:100%;width:auto;overflow:visible;}
.ev-kopf,.ev-rumpf{fill:var(--screen-surface-raised);stroke:var(--screen-text-primary);stroke-width:3;}
.ev-glied{stroke:var(--screen-text-primary);stroke-width:6;stroke-linecap:round;}
.ev-auge{fill:var(--screen-text-primary);}
.ev-mund{fill:none;stroke:var(--screen-text-primary);stroke-width:3;stroke-linecap:round;}
.ev-herz{display:block;width:clamp(28px,8vh,90px);height:auto;fill:var(--screen-danger);}
.ev-herzbahn{position:absolute;left:50%;top:14%;transform:translate(-50%,0);}
.ev-name{font-weight:800;line-height:1.12;font-size:clamp(40px,12vh,150px);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ev-text{color:var(--screen-text-muted);font-weight:600;font-size:clamp(18px,4.5vh,52px);}
.ev-ausgeschieden .ev-text{color:var(--screen-danger);}
.ev-leben_zurueck .ev-text{color:var(--screen-live);}
/* Highscore (Issue 110): neuer persoenlicher Rekord - Pokal und Wert in der Akzentfarbe */
.ev-pokal{display:block;width:clamp(70px,20vh,220px);height:auto;fill:var(--screen-accent);}
.ev-pokal .ev-pokal-henkel{fill:none;stroke:var(--screen-accent);stroke-width:4;stroke-linecap:round;}
.ev-rekord .ev-text{color:var(--screen-live);}
.ev-rekord .ev-text b{color:var(--screen-accent);font-weight:800;}
.ev-rekord .ev-rekord-bei{color:var(--screen-text-muted);}

/* Leben verloren: das Herz steigt auf und fliegt davon */
.ev-herz-weg{animation:ev-herz-weg var(--ev-ms) ease-in forwards;}
@keyframes ev-herz-weg{
  0%{transform:translate(-50%,10%) scale(.5);opacity:0;}
  18%{transform:translate(-50%,-20%) scale(1.1);opacity:1;}
  100%{transform:translate(140%,-360%) scale(.6) rotate(30deg);opacity:0;}
}
/* Leben zurueck: das Herz fliegt zurueck zur Figur */
.ev-herz-rein{animation:ev-herz-rein var(--ev-ms) ease-out forwards;}
@keyframes ev-herz-rein{
  0%{transform:translate(160%,-340%) scale(.6) rotate(-25deg);opacity:0;}
  20%{opacity:1;}
  75%{transform:translate(-50%,0) scale(1.2);opacity:1;}
  100%{transform:translate(-50%,0) scale(1);opacity:1;}
}
/* ELIM-01: LEBEN VERLIEREN UND GAME OVER (Eliminator) - die grosse Einblendung
   liegt UNTER dem Kopf des TV-Modells (top setzt die Komponente), der Grund
   ueber ein Pseudo-Element mit opacity (keine Farbmischung); Game Over deckt voll.
   Die Herzen der Karte: 8,4 % der Bildschirmbreite, verlorene blass und grau. */
.ev-screen.el-unten{background:transparent;padding:0;}
.el-gross{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vw;
  opacity:0;transition:opacity .25s;}
.el-gross::before{content:"";position:absolute;inset:0;background:var(--screen-background);opacity:.82;}
.el-gross.el-go-screen::before{opacity:1;}
.el-gross.el-an{opacity:1;}
.el-herz-gross{position:relative;z-index:1;width:24vw;aspect-ratio:560/523;}
.el-herz-gross svg,.el-go svg,.el-herz-bruch svg{display:block;width:100%;height:100%;}
.el-go{position:relative;z-index:1;width:62vw;aspect-ratio:826/500;margin-bottom:-4vw;}
.el-name{position:relative;z-index:1;font-size:clamp(28px,6vw,110px);font-weight:800;line-height:1;color:var(--screen-text-primary);
  max-width:94vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.el-text{position:relative;z-index:1;font-size:clamp(16px,2.8vw,52px);font-weight:700;color:var(--screen-danger);}
.el-go-screen .el-name,.el-go-screen .el-text{opacity:0;transition:opacity .4s;}
.el-go-screen.el-zeigt .el-name,.el-go-screen.el-zeigt .el-text{opacity:1;}
.el-herzen{display:flex;flex-wrap:wrap;gap:1vw;align-items:center;justify-content:center;padding:.4vw 1vw;}
.el-herz{position:relative;width:8.4vw;aspect-ratio:560/523;color:var(--screen-danger);}
.el-herz svg{display:block;width:100%;height:100%;}
.el-herz-weg{opacity:.14;filter:grayscale(1);}
.el-herz-bruch{position:absolute;inset:0;}
.el-aus{font-size:clamp(18px,2.6vw,44px);font-weight:800;color:var(--screen-text-muted);}
.el-wackelt{animation:el-wackeln .45s ease-in-out;}
@keyframes el-wackeln{
  0%,100%{transform:none;}
  20%{transform:translateX(-.6vw);}
  40%{transform:translateX(.6vw);}
  60%{transform:translateX(-.4vw);}
  80%{transform:translateX(.3vw);}
}
/* Zurueckgesetzt (Katz und Maus, SPIEL-20; KUM-01, Vorlage katz-und-maus-
   vorschau.html): der Kampf - assets/animations/katz-und-maus-kampf.json auf
   vollem Grund, 92 % der Breite; oben "<von> holt <name> ein" (von in Gold),
   unten "zurueck auf 20" in Rot ab dem Sturz. Die Figuren sind Bilder, sie
   bleiben weiss-grau; nur die Zeilen tragen Token. */
.ev-kampf-buehne{position:absolute;inset:0;opacity:0;transition:opacity .15s;}
.ev-kampf-buehne.ev-kampf-an{opacity:1;transition:opacity .15s;}
.ev-kampf-anim{position:absolute;left:50%;top:50%;width:92vw;aspect-ratio:1920/1024;transform:translate(-50%,-50%);}
.ev-kampf-anim .ev-kampf-svg,.ev-kampf-anim svg{display:block;width:100%;height:100%;}
.ev-zurueckgesetzt .ev-name.ev-kampf-zeile{position:absolute;top:3vw;left:0;right:0;text-align:center;
  font-size:clamp(24px,4.6vw,88px);font-weight:800;line-height:1.1;white-space:normal;color:var(--screen-text-primary);}
.ev-kampf-von{color:var(--screen-highlight);}
.ev-kampf-holt{color:var(--screen-text-muted);font-weight:700;font-size:.74em;}
.ev-kampf-wer{color:var(--screen-text-primary);}
.ev-kampf-res{position:absolute;bottom:3.4vw;left:0;right:0;text-align:center;font-size:clamp(20px,3.6vw,70px);font-weight:800;
  color:var(--screen-danger);opacity:0;transition:opacity .25s;}
.ev-kampf-zeigt .ev-kampf-res{opacity:1;}
/* Ruhiges Standbild: das Betriebssystem wuenscht weniger Bewegung - oder die
   Komponente hat es erkannt (.ev-ruhig). Figur, Herz und Name stehen still. */
.ev-ruhig .ev-bewegt{animation:none;}
.ev-ruhig .ev-herzbahn{transform:translate(25%,-45%);}
.ev-ruhig .el-gross,.ev-ruhig .el-go-screen .el-name,.ev-ruhig .el-go-screen .el-text{transition:none;}
.ev-ruhig .ev-kampf-buehne,.ev-ruhig .ev-kampf-res{transition:none;}
.tv-card.el-wackelt{animation:el-wackeln .45s ease-in-out;}
@media (prefers-reduced-motion: reduce){
  .ev-screen .ev-bewegt{animation:none;}
  .ev-screen .ev-herzbahn{transform:translate(25%,-45%);}
  .tv-card.el-wackelt{animation:none;}
  .el-gross,.el-go-screen .el-name,.el-go-screen .el-text{transition:none;}
  .ev-kampf-buehne,.ev-kampf-res{transition:none;}
}