/* =====================================================================
   DartScorer - Oberfläche
   Ersetzt dart_base.css und dart_theme_light.css.
   Farben laufen über Variablen: Hell/Dunkel (data-theme auf <html>)
   und Brandings (brandings/<name>/branding.css setzt --accent …).
   ===================================================================== */

/* ---------- Design-Variablen ---------- */
:root {
   --accent: #309F6A;          /* Markenfarbe (Flächen, Rahmen): Dart-Grün */
   --accent-strong: #1f6e49;   /* dunkler, für weiße Schrift (6,2:1) und als Schrift auf Creme (5,1:1) */
   --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
   /* Zweitfarbe (Branding): aktiver Spieler, Checkout, Double/Triple, Bestwerte - ohne eigene wie die Markenfarbe */
   --accent2: var(--accent);
   --accent2-strong: var(--accent-strong);
   --accent2-soft: color-mix(in srgb, var(--accent2) 18%, var(--surface));
   /* Schriften (Branding): Überschriften, Namen und Zahlen bzw. übriger Text */
   --font-display: "Varela Round", system-ui, sans-serif;
   --font-body: "Varela Round", system-ui, sans-serif;
   /* Namen und kleine Überschriften: wie --font-display, bei Schriften nur aus Großbuchstaben (Bebas) die Textschrift */
   --font-label: var(--font-display);
   /* Buttons mit Schrift in Marken-/Zweitfarbe; ein Branding mit „Schrift auf Buttons: Dunkel“ setzt die unveränderte
      Farbe mit dunkler Schrift (brandingStyle) */
   --accent-fill: var(--accent-strong);
   --on-accent: #ffffff;
   --accent2-fill: var(--accent2-strong);
   --on-accent2: #ffffff;   /* eigenständig: dunkle Schrift auf der Markenfarbe gilt nicht automatisch für die Zweitfarbe */

   --bg: #eef1f4;
   --surface: #ffffff;
   --surface-2: #f4f6f8;
   --key: #ffffff;
   --key-2: #e6eaee;
   --key-pressed: #cfd6dd;
   --text: #111827;
   --muted: #5b6472;
   --border: #d7dce2;
   --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
   --danger: #c93a3a;
   --on-danger: #ffffff;   /* Schrift auf Gefahr-Rot (≥ 4.5:1), dunkel s. u. */
   --focus: #1d4ed8;       /* Fokusrahmen unabhängig vom Branding (≥ 3:1 zur Fläche), dunkel s. u. */
   --warn: #b7791f;
   --gold: #f5b700;

   --radius: 14px;
   --radius-small: 10px;
   --gap: 8px;
   --topbar-height: 52px;
   --dartbar-height: 68px;
   --nav-height: 64px;
   --tabs-height: 50px;           /* Reiter selbst 44 px (bei Handy-Zoom 0.75 sonst nur 28 pt) */
   --accent-text: var(--accent-strong);   /* Grün als Schrift: hell kräftig, dunkel hell (s. u.) */
   --warn-text: #8a5a12;                  /* Warnfarbe als Schrift (#b7791f hat auf Weiß nur 3,6:1) */

   color-scheme: light;
}

/* Klassische Flächen (Branding → Farbschema → Flächen, data-surface auf <html>): Creme statt Grau/Weiß.
   Steht vor den dunklen Blöcken: dunkel gelten erst diese, dann die klassischen dunklen weiter unten. */
:root[data-surface="classic"] {
   --bg: #f5e8d0;
   --surface: #fffaf1;
   --surface-2: #fbf1df;
   --key: #fffaf1;
   --key-2: #f1e3c8;
   --key-pressed: #e4d2b0;
   --text: #111111;
   --muted: #5e5546;
   --border: #e3d2b2;
   --shadow: 0 1px 2px rgba(60, 40, 10, 0.08), 0 4px 12px rgba(60, 40, 10, 0.10);
   /* Schrift in Markenfarbe auf Creme: etwas dunkler als auf Weiß (auch bei eigener Markenfarbe ≥ 4.5:1) */
   --accent-text: color-mix(in srgb, var(--accent-strong) 80%, #000);
}

/* Dunkles Design: bewusst gewählt oder automatisch nach Systemeinstellung */
:root[data-theme="dark"] {
   --bg: #0e1013;
   --surface: #171a1f;
   --surface-2: #1f232a;
   --key: #1d2128;
   --key-2: #262b33;
   --key-pressed: #343a45;
   --text: #f2f4f7;
   --muted: #a2abb8;
   --border: #2b3039;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
   --warn: #e0a43a;
   --danger: #ef6262;   /* Gefahr-Rot wie Turnierseite und Live Display */
   --on-danger: #111827;   /* weiß auf #ef6262 nur 3.2:1, dunkel 5.6:1 */
   --focus: #93c5fd;
   --accent-text: var(--accent);
   --warn-text: var(--warn);
   color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
   :root[data-theme="auto"] {
      --bg: #0e1013;
      --surface: #171a1f;
      --surface-2: #1f232a;
      --key: #1d2128;
      --key-2: #262b33;
      --key-pressed: #343a45;
      --text: #f2f4f7;
      --muted: #a2abb8;
      --border: #2b3039;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
      --warn: #e0a43a;
      --danger: #ef6262;
      --on-danger: #111827;
      --focus: #93c5fd;
      --accent-text: var(--accent);
      --warn-text: var(--warn);
      color-scheme: dark;
   }
}
/* Klassische Flächen dunkel: Dart-Schwarz mit Creme-Schrift */
:root[data-surface="classic"][data-theme="dark"] {
   --bg: #111111;
   --surface: #1b1a18;
   --surface-2: #23211e;
   --key: #211f1c;
   --key-2: #2a2824;
   --key-pressed: #37342f;
   --text: #f5e8d0;
   --muted: #b3a891;
   --border: #322f2a;
   --accent-text: var(--accent);
}
@media (prefers-color-scheme: dark) {
   :root[data-surface="classic"][data-theme="auto"] {
      --bg: #111111;
      --surface: #1b1a18;
      --surface-2: #23211e;
      --key: #211f1c;
      --key-2: #2a2824;
      --key-pressed: #37342f;
      --text: #f5e8d0;
      --muted: #b3a891;
      --border: #322f2a;
      --accent-text: var(--accent);
   }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after {
   box-sizing: border-box;
}
html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   overscroll-behavior: none;           /* kein Nachfedern, kein Ziehen zum Neuladen */
}
body {
   font-family: var(--font-body);
   font-size: 12pt;
   background: var(--bg);
   color: var(--text);
   -webkit-user-select: none;
   user-select: none;
   touch-action: pan-x pan-y;           /* kein Zoom durch Doppeltippen oder zwei Finger */
   -webkit-tap-highlight-color: transparent;
   overflow: hidden;
}
button {
   font: inherit;
   color: inherit;
}
a {
   color: var(--accent-text);
   text-decoration: none;
}
:root[data-theme="dark"] a { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] a { color: var(--accent); } }
.hidden, [hidden] {
   display: none !important;
}
button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
   outline: 3px solid var(--focus);
   outline-offset: 2px;
}

/* ---------- Grundlayout: Spielbereich + Eingabe ---------- */
#maincontainer {
   display: flex;
   flex-direction: column;
   height: 100%;
   height: 100dvh;
   box-sizing: border-box;
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* 4K-Bildschirm (App direkt am TV, ohne Live Display): alles 1,75-fach statt winziger Bedienung.
   zoom vergrößert auch die Höhe aus dvh, daher die Höhe zurückrechnen (sonst 3780 statt 2160 px) */
@supports (zoom: 1.75) {
   @media (min-width: 2560px) and (min-height: 1400px) {
      #maincontainer { zoom: 1.75; height: calc(100dvh / 1.75); }
   }
}
#leftcontent, #rightcontent {
   display: flex;
   flex-direction: column;
   min-height: 0;
   min-width: 0;
}
#leftcontent {
   flex: 1 1 50%;
   position: relative;
}
#rightcontent {
   flex: 1 1 50%;
   background: var(--surface-2);
   border-top: 1px solid var(--border);
}
@media (orientation: landscape) {
   #maincontainer {
      flex-direction: row;
   }
   #leftcontent { flex: 1 1 56%; }
   #rightcontent {
      flex: 1 1 44%;
      border-top: none;
      border-left: 1px solid var(--border);
   }
}

/* ---------- Kopfleiste ---------- */
.topbar {
   flex: 0 0 var(--topbar-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap);
   padding: 4px 6px;
}
.icon-btn {
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 12px;
   background: transparent;
   color: var(--text);
   font-size: 1.25rem;
   cursor: pointer;
}
.icon-btn:active { background: var(--key-pressed); }
@media (hover: hover) { .icon-btn:hover { background: var(--key-2); } }
.round-info {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 1em;
   color: var(--muted);
   white-space: nowrap;
   overflow: hidden;
}
.round-info span:empty { display: none; }
.round-info > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Spielname in der Kopfzeile: antippen zeigt die Regeln */
.mode-chip {
   flex: 0 0 auto;
   min-height: 32px;
   padding: 2px 12px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-2);
   color: var(--text);
   font: inherit;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
}
.mode-chip:hover { border-color: var(--accent-strong); }
.mode-chip { position: relative; }
.mode-chip::after { content: ""; position: absolute; inset: -6px 0; }   /* Tippfläche 44 px, Optik bleibt 32 px */
.mode-chip:empty { display: none; }
.round-info { min-width: 0; }
.round-info .rc-short { display: none; }
/* 520 px: Handys rechnen wegen des Zooms 0.75 mit ca. 480-500 CSS-px (440 griff dort nie) */
@media (max-width: 520px) {
   .round-info { gap: 8px; }
   .round-info .rc-long { display: none; }
   .round-info .rc-short { display: inline; }
   .mode-chip { padding: 2px 10px; }
}
.round-info img { height: 32px; width: auto; }
/* Kopfzeilenlogo je Design (brandHeaderLogoHtml) */
.round-info .brand-logo-dark { display: none; }
:root[data-theme="dark"] .round-info .brand-logo-light { display: none; }
:root[data-theme="dark"] .round-info .brand-logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
   :root[data-theme="auto"] .round-info .brand-logo-light { display: none; }
   :root[data-theme="auto"] .round-info .brand-logo-dark { display: inline; }
}

/* ---------- Hinweis nach jeder Aufnahme (blockiert nichts) ---------- */
.toast {
   /* liegt über der Kopfleiste (zwischen Menü- und Spieler-Button), nicht über den Karten */
   position: absolute;
   top: 4px;
   left: 50%;
   z-index: 50;
   width: min(calc(100% - 112px), 520px);
   height: calc(var(--topbar-height) - 8px);
   display: flex;
   align-items: center;
   padding: 0 14px;
   border-radius: var(--radius-small);
   background: var(--surface);
   color: var(--text);
   box-shadow: var(--shadow);
   border-left: 5px solid var(--accent);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -12px);
   transition: opacity 0.2s, transform 0.2s;
   cursor: pointer;
}
.toast.visible {
   opacity: 1;
   pointer-events: auto;
   transform: translate(-50%, 0);
}
.toast.warn { border-left-color: var(--warn); }
.toast.big { border-left-color: var(--gold); }
.toast .toast-score {
   font-weight: bold;
   font-size: 1.25em;
}
.toast .toast-next {
   color: var(--muted);
   font-size: 0.9em;
}
.toast .toast-next::before { content: " · "; }
.toast.visible { display: block; line-height: calc(var(--topbar-height) - 8px); }

/* ---------- Spielerkarten ---------- */
.spieleranzeige {
   flex: 1 1 auto;
   min-height: 0;
   padding: 0 var(--gap) var(--gap);
   display: flex;
}
#selectedPlayers {
   display: grid;
   gap: var(--gap);
   width: 100%;
   height: 100%;
   grid-template-columns: repeat(2, 1fr);
   grid-auto-rows: 1fr;
}
#selectedPlayers[data-count="1"] { grid-template-columns: 1fr; }
#selectedPlayers[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
#selectedPlayers[data-count="5"], #selectedPlayers[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
#selectedPlayers[data-count="7"], #selectedPlayers[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
@media (orientation: portrait) {
   #selectedPlayers[data-count="3"] { grid-template-columns: 1fr; }
   #selectedPlayers[data-count="5"], #selectedPlayers[data-count="6"],
   #selectedPlayers[data-count="7"], #selectedPlayers[data-count="8"] { grid-template-columns: repeat(2, 1fr); }
}
/* Ab 9 Spielern berechnet adjustGrid() die Spaltenzahl aus der freien Fläche (--cols) */
#selectedPlayers[data-cols] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }

#selectedPlayers .player-card {
   container-type: size;
   position: relative;
   min-height: 0;
   overflow: hidden;
   border-radius: var(--radius);
   background: var(--surface);
   border: 2px solid var(--border);
   box-shadow: var(--shadow);
   padding: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   transition: border-color 0.2s, background-color 0.2s;
}
#selectedPlayers .player-card.active {
   border-color: var(--accent2);
   background: var(--accent2-soft);
}
.pc-head {
   display: flex;
   align-items: center;
   gap: 6px;
   max-width: calc(100% - 36px);
   align-self: flex-start;
   min-width: 0;
}
.pc-inner {
   width: 100%;
   height: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

/* Lange Namen werden mit … gekürzt statt die Karte zu sprengen */
.pc-head > div { min-width: 0; overflow: hidden; }
#selectedPlayers .playerAvatar {
   width: clamp(24px, min(20cqh, 18cqw), 72px);
   height: clamp(24px, min(20cqh, 18cqw), 72px);
   border-radius: 50%;
   object-fit: cover;
   flex: 0 0 auto;
   cursor: pointer;
}
#selectedPlayers .player-name {
   font-size: clamp(11px, min(10cqh, 8cqw), 26px);
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
}
.pc-badge {
   display: none;
   font-size: clamp(11px, min(7cqh, 6cqw), 15px);
   color: var(--accent2-strong);
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}
:root[data-theme="dark"] .pc-badge { color: var(--accent2); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .pc-badge { color: var(--accent2); } }
.player-card.active .pc-badge { display: inline-flex; align-items: center; gap: 4px; }
.pc-badge::before {
   content: "";
   width: 0.6em;
   height: 0.6em;
   border-radius: 50%;
   background: var(--accent2);
   animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.25; }
}
#selectedPlayers .score-display {
   font-size: clamp(28px, min(36cqh, 30cqw), 220px);
   font-weight: bold;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.02em;
   cursor: text;
}
.score-display input {
   width: 4ch;
   font: inherit;
   text-align: center;
   background: transparent;
   color: var(--text);
   border: 2px solid var(--accent);
   border-radius: 8px;
}
.pc-checkout {
   font-size: clamp(10px, min(8cqh, 6.5cqw), 22px);
   font-weight: bold;
   color: var(--accent2-strong);
   min-height: 1.2em;
   min-width: 0;
   max-width: 100%;
}
:root[data-theme="dark"] .pc-checkout { color: var(--accent2); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .pc-checkout { color: var(--accent2); } }
/* Letzte Aufnahme: eigene Zeile, Summe groß, einzelne Darts daneben */
.pc-last {
   display: flex;
   align-items: baseline;
   justify-content: center;
   flex-wrap: wrap;
   gap: 0 0.45em;
   min-height: 1.3em;
   font-size: clamp(14px, min(11cqh, 12.5cqw), 40px);
   line-height: 1.15;
}
.pc-last-label {
   font-size: 0.6em;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--muted);
}
.pc-last-label {
   flex-basis: 100%;          /* "Letzte" als kleine Überschrift, die Darts darunter */
   text-align: center;
}
.pc-last-darts {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
.pc-stats {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2px 12px;
   font-size: clamp(11px, min(8cqh, 7cqw), 18px);
   color: var(--muted);
}
.set-player-display { font-size: 0.85em; color: var(--muted); text-align: center; }
.leg-player-display {
   display: flex;
   gap: 5px;
   justify-content: center;
   height: clamp(8px, 5cqh, 14px);
}
.leg-player-display .round {
   height: 100%;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--key-2);
   border: 1px solid var(--border);
}
.leg-player-display .round.done {
   background: var(--gold);
   border-color: var(--gold);
}
/* Bei sehr flachen Karten Nebensächliches ausblenden - Modus-Infos (Killer-Leben, Fuchs/Jäger,
   ATC-Fortschritt, Shanghai „raus“) stehen auch in .pc-checkout und bleiben sichtbar */
@container (max-height: 120px) and (aspect-ratio <= 1.6) {
   .pc-stats, .pc-checkout:not(:has(.mode-info, .atc-progress)) { display: none; }
}
@container (max-height: 90px) and (aspect-ratio <= 1.6) {
   .pc-last { display: none; }
}

/* Breite, flache Karten (z. B. Handy mit 3 Spielern untereinander): Querlayout
   links Name und Legs, Mitte Restpunkte, rechts letzte Aufnahme, Ø und Finish-Weg */
@container (aspect-ratio > 1.6) and (max-height: 260px) {
   .pc-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      grid-template-areas:
         "head  score last"
         "legs  score stats"
         ".     score checkout";
      align-items: center;
      align-content: center;
      column-gap: 10px;
      row-gap: 2px;
      padding-right: 34px;               /* Platz für das ✕ */
   }
   .pc-head { grid-area: head; align-self: center; max-width: 100%; }
   #selectedPlayers .score-display { grid-area: score; font-size: clamp(24px, min(62cqh, 21cqw), 160px); }
   .pc-last { grid-area: last; justify-content: flex-end; font-size: clamp(12px, min(16cqh, 5.5cqw), 30px); }
   .pc-last-label { flex-basis: auto; margin-right: 0.3em; }
   .pc-stats { grid-area: stats; justify-content: flex-end; font-size: clamp(10px, min(12cqh, 4.2cqw), 20px); }
   .pc-checkout {
      grid-area: checkout;
      justify-self: stretch;           /* volle Spaltenbreite, Inhalt rechtsbündig und gekürzt */
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
      min-height: 0;
      font-size: clamp(10px, min(13cqh, 4.6cqw), 22px);
   }
   #selectedPlayers .mode-info { justify-content: flex-end; }   /* .mode-info steht weiter unten */
   .leg-player-display { grid-area: legs; justify-content: flex-start; }
   #selectedPlayers .playerAvatar { width: clamp(22px, min(30cqh, 9cqw), 56px); height: clamp(22px, min(30cqh, 9cqw), 56px); }
   #selectedPlayers .player-name { font-size: clamp(11px, min(15cqh, 5cqw), 24px); }
}
/* Flach und dazu schmal (z. B. Handy mit 5-8 Spielern): oben Name, darunter
   links die Restpunkte, rechts letzte Aufnahme, Ø und Finish-Weg */
@container (aspect-ratio > 1.6) and (max-height: 260px) and (max-width: 340px) {
   .pc-inner {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
         "head  legs"
         "score last"
         "score stats"
         "score checkout";
      column-gap: 8px;
      padding-right: 0;
   }
   .pc-head { padding-right: 30px; }
   #selectedPlayers .score-display { font-size: clamp(20px, min(44cqh, 26cqw), 90px); }
   .pc-last { font-size: clamp(11px, min(14cqh, 7cqw), 22px); }
   .pc-last-label { display: none; }
   .pc-stats { font-size: clamp(10px, min(11cqh, 5.5cqw), 16px); }
   .pc-checkout { font-size: clamp(10px, min(12cqh, 6cqw), 18px); }
   .leg-player-display { justify-content: flex-end; padding-right: 30px; }
   #selectedPlayers .playerAvatar { width: clamp(18px, 22cqh, 36px); height: clamp(18px, 22cqh, 36px); }
   #selectedPlayers .player-name { font-size: clamp(11px, min(13cqh, 6.5cqw), 18px); }
}
@container (aspect-ratio > 1.6) and (max-height: 80px) { .pc-stats { display: none; } }
/* Sehr kleine Karten (viele Spieler, Handy quer): Avatar und „am Wurf“ weglassen
   (die aktive Karte ist am Rahmen zu erkennen) */
@container (max-height: 100px) {
   #selectedPlayers .playerAvatar,
   #selectedPlayers .player-card.active .pc-badge { display: none; }
}
@container (max-width: 140px) {
   #selectedPlayers .playerAvatar { display: none; }
   #selectedPlayers .mode-tag { padding: 1px 4px; }   /* .mode-tag steht weiter unten */
}
.player-card-button {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 10px;
   background: transparent;
   color: var(--muted);
   cursor: pointer;
   font-size: 0.9rem;
}
.player-card-button:active { background: var(--key-pressed); }
@media (hover: hover) { .player-card-button:hover { background: var(--key-2); } }

/* ---------- Startbildschirm ohne Spieler ---------- */
.empty-state {
   margin: auto;
   width: 100%;
   max-width: 420px;
   padding: 16px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}
.empty-state .inputbutton { white-space: nowrap; }
/* Ohne Spieler gibt es keine Aufnahme anzuzeigen */
#leftcontent:has(#selectedPlayers[data-count="0"]) #scores { visibility: hidden; }
.empty-state h2 { margin: 4px 0 0; font-size: 1.4em; }
.empty-state p { margin: 0; color: var(--muted); }
.empty-icon {
   font-size: 3rem;
   color: var(--accent);
}

/* ---------- Leiste mit den drei Darts der Aufnahme ---------- */
#scores {
   flex: 0 0 var(--dartbar-height);
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: 0 var(--gap) var(--gap);
}
#scores .scorefield {
   flex: 1 1 0;
   height: 100%;
   border-radius: var(--radius-small);
   background: var(--surface);
   border: 2px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6em;
   font-weight: bold;
   font-variant-numeric: tabular-nums;
}
/* Geworfene Darts: gefülltes, kräftiges Feld */
#scores .scorefield:not(:empty):not(.finish-suggestion) {
   background: var(--accent-soft);
   border-color: var(--accent);
}
/* Cricket/ATC: Dart ohne Wirkung */
#scores .scorefield.sf-miss {
   color: var(--danger);
   background: color-mix(in srgb, var(--danger) 10%, var(--surface));
   border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
/* Finish-Vorschlag: kein Hintergrund, feine gestrichelte Linie, ausdrücklich beschriftet */
#scores .scorefield.finish-suggestion {
   flex-direction: column;
   gap: 1px;
   background: transparent;
   border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent);
   color: var(--muted);
   font-weight: normal;
   line-height: 1.05;
}
#scores .finish-suggestion .sf-label {
   font-size: 0.4em;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
#scores .finish-suggestion .sf-value {
   font-size: 0.75em;
   font-style: italic;
}
#scores .turn-total {
   flex: 0 0 auto;
   min-width: 3.2em;
   text-align: center;
   font-size: 1.6em;
   font-weight: bold;
   color: var(--muted);
}
#scores .turn-total:not(:empty)::before {
   content: "= ";
   font-weight: normal;
}

/* ---------- Eingabe: Tabs ---------- */
.input-tabs {
   flex: 0 0 var(--tabs-height);
   display: flex;
   gap: 4px;
   padding: 6px 6px 0;
}
.input-tabs button {
   flex: 1;
   border: none;
   border-radius: 10px 10px 0 0;
   background: transparent;
   color: var(--muted);
   font-weight: bold;
   cursor: pointer;
}
.input-tabs button[aria-selected="true"] {
   background: var(--surface);
   color: var(--text);
   box-shadow: inset 0 -3px 0 var(--accent);
}

.eingabecontainer {
   flex: 1 1 auto;
   min-height: 0;
   position: relative;
   background: var(--surface);
}

/* ---------- Eingabe: Zahlen-Tastatur ---------- */
.buttons-container {
   container-type: inline-size;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   grid-template-rows: repeat(5, minmax(0, 1fr));
   gap: 6px;
   padding: 6px;
   height: 100%;
}
.countbutton { min-height: 0; }
.countbutton button, .sum-keypad button, .sum-checkout-buttons button {
   width: 100%;
   height: 100%;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font-size: clamp(1.1rem, 3.4vmin, 2.1rem);
   font-weight: bold;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 4px;
   transition: background-color 0.08s, transform 0.08s;
}
.lightbutton { background: var(--key); color: var(--text); }
.darkbutton { background: var(--key-2); color: var(--text); }
.okbutton { background: var(--accent-fill); color: var(--on-accent); border-color: transparent !important; }
.countbutton button:active, .sum-keypad button:active, .corrbutton:active {
   background: var(--key-pressed);
   transform: scale(0.97);
}
.okbutton:active { filter: brightness(0.9); }
@media (hover: hover) {
   .lightbutton:hover, .darkbutton:hover { filter: brightness(0.97); }
}
.countbutton button { font-size: clamp(15px, 6.2cqw, 34px); }
.countbutton button.miss { color: var(--danger); }
.countbutton button.multiplier, .countbutton button.miss { font-size: clamp(11px, 3.7cqw, 22px); }
.countbutton button.multiplier.active {
   background: var(--accent2-fill);
   color: var(--on-accent2);
   border-color: transparent;
}
/* Ist Double/Triple aktiv, zeigen die Zahlentasten das deutlich an */
#score-buttons.multiplier-double .lightbutton:not(.miss):not([data-base-value="25"]):not([data-base-value="50"]),
#score-buttons.multiplier-triple .lightbutton:not(.miss):not([data-base-value="25"]):not([data-base-value="50"]) {
   background: var(--accent2-soft);
   border-color: var(--accent2);
}

/* ---------- Eingabe: 3-Dart-Summe ---------- */
#sum-container {
   display: flex;
   flex-direction: column;
   padding: 6px;
   gap: 6px;
}
#sum-container.hidden { display: none; }
.sum-display {
   flex: 0 0 auto;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 8px;
   padding: 6px 12px;
   border-radius: var(--radius-small);
   background: var(--surface-2);
   border: 1px solid var(--border);
}
.sum-label { color: var(--muted); }
.sum-value {
   font-size: clamp(2rem, 7vmin, 3.6rem);
   font-weight: bold;
   font-variant-numeric: tabular-nums;
}
.sum-hint {
   flex-basis: 100%;
   min-height: 1.2em;
   font-size: 0.9em;
   color: var(--danger);
   text-align: right;
}
.sum-display { flex-wrap: wrap; }
.sum-keypad {
   flex: 1 1 auto;
   min-height: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-template-rows: repeat(4, minmax(0, 1fr));
   gap: 6px;
}
.sum-checkout {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   text-align: center;
   font-size: 1.2em;
}
.sum-checkout-buttons {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   width: 100%;
   height: 30%;
}
.sum-checkout-buttons button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Eingabe: Dartscheibe mit Lupe ---------- */
#dartboard-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 6px;
   gap: 6px;
}
#dartboard-container.hidden { display: none; }
#dartboard {
   flex: 1 1 auto;
   min-height: 0;
   width: 100%;
   max-width: 100%;
   touch-action: none;       /* Finger-Ziehen wählt ein Feld statt zu scrollen */
   cursor: crosshair;
}
.board-background { fill: #121212; }
.dartboard-svg .segment.even { fill: #1c1c1c; }
.dartboard-svg .segment.odd { fill: #f0e1bf; }
.dartboard-svg .double.even, .dartboard-svg .triple.even { fill: #d23a2c; }
.dartboard-svg .double.odd, .dartboard-svg .triple.odd { fill: #1f8f4a; }
.dartboard-svg path, .dartboard-svg circle:not(.board-background) {
   stroke: #8a8a8a;
   stroke-width: 0.35;
}
.dartboard-svg .outer-bullseye { fill: #1f8f4a; }
.dartboard-svg .bullseye { fill: #d23a2c; }
.dartboard-svg .label {
   fill: #ffffff;
   font-size: 7.5px;
   font-weight: bold;
   text-anchor: middle;
   dominant-baseline: central;
   pointer-events: none;
}
.dartboard-svg .is-target {
   fill: var(--gold) !important;
}
.board-loupe {
   position: fixed;
   z-index: 60;
   width: 132px;
   height: 132px;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid var(--accent);
   box-shadow: var(--shadow);
   background: #121212;
   pointer-events: none;
   display: none;
}
.board-loupe.visible { display: block; }
.board-loupe svg { width: 100%; height: 100%; }
.board-loupe-label {
   position: absolute;
   left: 50%;
   bottom: 6px;
   transform: translateX(-50%);
   padding: 2px 10px;
   border-radius: 999px;
   background: var(--accent-fill);
   color: var(--on-accent);
   font-weight: bold;
   font-size: 1rem;
   z-index: 1;
}
.board-loupe::after {          /* Fadenkreuz in der Mitte */
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 8px;
   height: 8px;
   margin: -4px 0 0 -4px;
   border-radius: 50%;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #000;
}
.board-miss {
   flex: 0 0 auto;
   min-height: 44px;
   padding: 0 20px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--key);
   color: var(--danger);
   font-weight: bold;
   cursor: pointer;
}

/* ---------- Aktionsleiste ---------- */
.eingabenavigation {
   flex: 0 0 var(--nav-height);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
   padding: 6px;
   background: var(--surface-2);
}
.corrbutton {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   background: var(--key);
   color: var(--text);
   cursor: pointer;
   font-size: 1.1rem;
}
.corrbutton span {
   font-size: 0.8rem;
   color: var(--muted);
}
.pulseredbutton {
   background: var(--danger) !important;
   color: var(--on-danger) !important;
   animation: pulse 1.5s ease-in-out infinite;
}
.pulseredbutton span { color: var(--on-danger); }

/* ---------- Seitenmenü ---------- */
.sidenav {
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   height: 100%;
   width: min(320px, 85vw);
   background: var(--surface);
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   transform: translateX(-105%);
   transition: transform 0.25s ease;
}
.sidenav.open { transform: translateX(0); }
.sidenav-backdrop {
   position: fixed;
   inset: 0;
   z-index: 998;
   background: rgba(0, 0, 0, 0.45);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s;
}
.sidenav.open + .sidenav-backdrop { opacity: 1; pointer-events: auto; }
/* Dunkel: Menü hebt sich ab wie die Dialoge (s. „Dialoge“) - Fläche einen Hauch heller, heller Rand, Seite abgedunkelt */
@supports (color: light-dark(#000, #fff)) {
   .sidenav {
      --modal-surface: light-dark(var(--surface), color-mix(in srgb, var(--surface) 95%, #fff));
      --modal-surface-2: light-dark(var(--surface-2), color-mix(in srgb, var(--surface-2) 95%, #fff));
      --modal-key-2: light-dark(var(--key-2), color-mix(in srgb, var(--key-2) 95%, #fff));
      background: var(--modal-surface);
      border-right: 1px solid light-dark(transparent, rgba(255, 255, 255, 0.16));
   }
   .sidenav > * {
      --surface: var(--modal-surface);
      --surface-2: var(--modal-surface-2);
      --key-2: var(--modal-key-2);
      --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
   }
   .sidenav-backdrop {
      background: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72));
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
   }
}
.sidenav-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 8px 8px 16px;
}
.sidenav-title { font-weight: bold; font-size: 1.15em; }
/* Schrift für Überschriften, Namen und Zahlen (Branding); Ziffern gleich breit, damit der Punktestand nicht springt */
h1, .score-display, #scores, .winner-name {
   font-family: var(--font-display);
}
h2, h3, .sidenav-title, .player-name, .winner-label, #scores .finish-suggestion .sf-label {
   font-family: var(--font-label);
}
.score-display, #scores, .stats-table td { font-variant-numeric: tabular-nums; }
.sidenav a {
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 48px;
   padding: 0 18px;
   color: var(--text);
   font-size: 1.05em;
}
.sidenav a i { width: 1.3em; text-align: center; color: var(--muted); }
#mySidenav a { color: var(--text); }          /* nicht die allgemeine Link-Farbe */
#mySidenav a.sidenav-primary { color: var(--on-accent); }
.sidenav a:active { background: var(--key-2); }
@media (hover: hover) { .sidenav a:hover { background: var(--surface-2); } }
.sidenav a.sidenav-primary {
   margin: 4px 12px 8px;
   border-radius: 12px;
   background: var(--accent-fill);
   color: var(--on-accent);
   font-weight: bold;
}
.sidenav a.sidenav-primary i { color: var(--on-accent); }
.sidenav-divider { height: 1px; margin: 6px 16px; background: var(--border); }
.sidenav a .sidenav-ext { width: auto; margin-left: auto; font-size: 0.75em; }   /* öffnet eine andere Seite */
/* Sprache und Design direkt im Menü (wie Turnierseite und Live Display) */
.sidenav-setting { display: flex; flex-direction: column; gap: 6px; padding: 6px 18px 8px; }
.sidenav-setting-label { display: flex; align-items: center; gap: 14px; font-size: 1.05em; }
.sidenav-setting-label i { width: 1.3em; text-align: center; color: var(--muted); }
.sidenav-setting .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sidenav-setting .segmented button { justify-content: center; padding: 0 8px; }

/* ---------- Dialoge (Einstellungen) ---------- */
.configmodal, .popupmodal {
   display: none;
   position: fixed;
   z-index: 1000;
   inset: 0;
   padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
   background: rgba(0, 0, 0, 0.5);
   flex-direction: column;
   align-items: center;
   justify-content: safe center;   /* zu hoher Inhalt beginnt oben statt oben abgeschnitten zu sein */
   overflow: auto;
}
.configmodal .modal-header {
   position: relative;
   width: min(680px, 100%);
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 6px 6px 18px;
   background: var(--surface);
   border-radius: var(--radius) var(--radius) 0 0;
   border-bottom: 1px solid var(--border);
}
.configmodal .modal-header h2 {
   flex: 1;
   margin: 0;
   font-size: 1.2em;
}
.configmodal .modal-header h2 > i:first-child { color: var(--accent-text); margin-right: 4px; }
/* Titel bekommt beim Öffnen den Fokus (Screenreader), ist aber kein Bedienelement */
.configmodal .modal-header h2:focus { outline: none; }
.configmodal .modal-content {
   width: min(680px, 100%);
   max-height: calc(100dvh - 24px - 57px); /* Rand oben/unten + Kopfzeile */
   overflow-y: auto;
   padding: 6px 18px 18px;
   background: var(--surface);
   border-radius: 0 0 var(--radius) var(--radius);
   -webkit-user-select: text;
   user-select: text;
}
.configmodal .modal-content h3 {
   margin: 18px 0 8px;
   font-size: 1em;
}
.configmodal .modal-content h3 > i:first-child { color: var(--accent-text); width: 1.25em; text-align: center; }
.configmodal .modal-content h4 { margin: 14px 0 6px; font-size: 0.95em; }
/* Breite Dialoge: ab Tablet-Breite zwei Spalten statt einer langen Liste */
.configmodal.wide .modal-header, .configmodal.wide .modal-content { width: min(940px, 100%); }
.modal-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.modal-section > h3:first-child { margin-top: 14px; }
@media (min-width: 760px) {
   .configmodal.wide .modal-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .configmodal.wide .modal-columns > .modal-section + .modal-section { border-left: 1px solid var(--border); padding-left: 28px; margin-left: -1px; }
}
@media (max-width: 759px) {
   .modal-columns > .modal-section + .modal-section { border-top: 1px solid var(--border); margin-top: 14px; }
}
/* Handy quer und andere flache Bildschirme: weniger Rand, mehr Inhalt */
@media (max-height: 560px) {
   .configmodal, .popupmodal { padding: 6px; }
   .configmodal .modal-header { padding: 2px 4px 2px 14px; }
   .configmodal .modal-header .close-btn { width: 40px; height: 40px; }
   .configmodal .modal-content { max-height: calc(100dvh - 12px - 45px); padding: 4px 14px 14px; }
   .configmodal .modal-content h3 { margin: 12px 0 6px; }
   .popupmodal .modal-content { max-height: calc(100dvh - 12px); overflow-y: auto; padding: 16px 18px 14px; }
}
.configmodal .modal-content p { margin: 6px 0; line-height: 1.45; }
/* Scrollbalken in Dialogen, Siegeranzeige und Menü schmal und dezent statt des grauen Standardbalkens (hell und dunkel);
   ebenso ds-ui.css, turnier.css (.dialog), live/index.php, admin.css und der Sitzplan */
.configmodal, .configmodal .modal-content, .popupmodal .modal-content, .winner-card, .sidenav {
   scrollbar-width: thin;
   scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}
/* Dunkel: Dialog hebt sich deutlich von der Seite ab - Seite stärker abgedunkelt, Dialogfläche einen Hauch heller,
   heller Rand (light-dark() folgt color-scheme der Design-Variablen; hell bleibt es, wie es war). Die Seite dahinter
   wird in beiden Designs leicht unscharf. Wie ds-ui.css, turnier.css (.dialog) und admin.css (.modal) */
@supports (color: light-dark(#000, #fff)) {
   .configmodal, .popupmodal {
      background: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.72));
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      --modal-surface: light-dark(var(--surface), color-mix(in srgb, var(--surface) 95%, #fff));
      --modal-surface-2: light-dark(var(--surface-2), color-mix(in srgb, var(--surface-2) 95%, #fff));
      --modal-key: light-dark(var(--key), color-mix(in srgb, var(--key) 95%, #fff));
      --modal-key-2: light-dark(var(--key-2), color-mix(in srgb, var(--key-2) 95%, #fff));
      --modal-key-pressed: light-dark(var(--key-pressed), color-mix(in srgb, var(--key-pressed) 95%, #fff));
      --modal-ring: light-dark(transparent, rgba(255, 255, 255, 0.16));
   }
   /* im Dialog gelten die angehobenen Flächen (eigene Namen oben, sonst verwiese --surface auf sich selbst) */
   .configmodal .modal-header, .configmodal .modal-content, .popupmodal .modal-content {
      --surface: var(--modal-surface);
      --surface-2: var(--modal-surface-2);
      --key: var(--modal-key);
      --key-2: var(--modal-key-2);
      --key-pressed: var(--modal-key-pressed);
      --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
      --accent2-soft: color-mix(in srgb, var(--accent2) 18%, var(--surface));
      border: 1px solid var(--modal-ring);
   }
   .configmodal .modal-header { border-bottom-color: var(--border); }
   .configmodal .modal-content { border-top: 0; max-height: calc(100dvh - 24px - 58px); }   /* Kopfzeile + 1 px Rand */
   @media (max-height: 560px) { .configmodal .modal-content { max-height: calc(100dvh - 12px - 46px); } }
}
.close-btn {
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 10px;
   background: transparent;
   color: var(--muted);
   font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
}
.close-btn:active { background: var(--key-2); }
@media (hover: hover) { .close-btn:hover { background: var(--key-2); color: var(--text); } }
.popupmodal .modal-content {
   position: relative;
   width: min(520px, 100%);
   max-height: calc(100dvh - 24px);
   overflow-y: auto;
   padding: 22px 22px 18px;
   border-radius: var(--radius);
   background: var(--surface);
   box-shadow: var(--shadow);
   text-align: center;
   animation: pop 0.2s ease-out;
}
.popupmodal .close-btn {
   position: absolute;
   top: 4px;
   right: 4px;
   z-index: 1;
}
/* langer Inhalt: ✕ scrollt nicht mit weg */
@supports (position: sticky) {
   .popupmodal .modal-content > .close-btn { position: sticky; float: right; top: -18px; margin: -18px -18px 0 0; background: var(--surface); }
}
.popupmodal h2 { margin: 6px 36px 10px; }
@keyframes pop {
   from { opacity: 0; transform: scale(0.96); }
   to { opacity: 1; transform: scale(1); }
}
.hint {
   color: var(--muted);
   font-size: 0.9em;
}
.modal-actions {
   position: sticky;
   bottom: -18px;
   margin: 16px -18px -18px;
   padding: 12px 18px;
   background: var(--surface);
   border-top: 1px solid var(--border);
   display: flex;
   justify-content: flex-end;
}
@media (max-height: 560px) { .modal-actions { bottom: -14px; margin: 12px -14px -14px; padding: 8px 14px; } }

/* ---------- Formularelemente ---------- */
.inputbutton, .sliderbutton, .player-addtogame {
   min-height: 44px;
   padding: 0 16px;
   margin: 4px 4px 4px 0;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--key-2);
   color: var(--text);
   font-weight: bold;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}
.inputbutton.primary, .player-addtogame {
   background: var(--accent-fill);
   color: var(--on-accent);
   border-color: transparent;
}
.inputbutton.large { min-height: 52px; padding: 0 24px; font-size: 1.1em; }
a.inputbutton { text-decoration: none; }
/* WhatsApp wie auf der Turnierseite: Markengrün mit dunkler Schrift (Kontrast ca. 9:1) */
.inputbutton.whatsapp, #mySidenav a.inputbutton.whatsapp { background: #25d366; border-color: #1ebe5a; color: #0b1f12; }
.inputbutton:active, .sliderbutton:active, .player-addtogame:active { filter: brightness(0.92); }
.inputtext, .inputselectbox {
   min-height: 44px;
   padding: 0 12px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface-2);
   color: var(--text);
   font: inherit;
}
.inputselectbox { min-width: 220px; max-width: 100%; }
/* iOS zoomt beim Antippen in Felder unter 16 px (kleine Schriftstufe in den Einstellungen) */
.inputtext, .inputselectbox, .configmodal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .configmodal select, .configmodal textarea { font-size: max(16px, 1em); }
/* Spieloptionen: Spielauswahl mit Regel-Button, Kurzbeschreibung */
.mode-pick, .field-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mode-pick .inputselectbox, .field-row .inputselectbox { flex: 1 1 220px; }
.mode-pick .inputbutton, .field-row .inputbutton { margin: 0; }
.mode-summary { margin: 8px 0 4px !important; }
.add-player {
   display: flex;
   gap: 8px;
   margin-top: 12px;
}
.add-player .inputtext { flex: 1; min-width: 0; }
.add-player .inputbutton { margin: 0; }
.inputmultilist {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.inputmultilist .option {
   min-height: 40px;
   display: inline-flex;
   align-items: center;
   padding: 0 14px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-2);
   cursor: pointer;
}
.inputmultilist .option.selected {
   background: var(--accent-fill);
   border-color: transparent;
   color: var(--on-accent);
}
.inputmultilist .option.selected::before {
   content: "\2713";
   margin-right: 6px;
}
/* Audioausgabe: eine Zeile je Ansage mit Schiebeschalter */
.speak-settings {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.speak-row {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 10px 14px;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   background: var(--surface-2);
}
.speak-label {
   display: flex;
   flex-direction: column;
}
.speak-label small { color: var(--muted); }
.speak-row .segmented {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
   background: var(--surface);
}
.speak-row .segmented button {
   justify-content: center;
   min-height: 38px;
   padding: 4px 8px;
   line-height: 1.2;
   text-align: center;
}
/* .segmented (Segment-Schalter) steht in ds-ui.css - gemeinsam mit Turnierseite und Live Display */
.menuslider {
   display: flex;
   align-items: center;
   gap: 8px;
}
.menuslider input[type="range"] {
   flex: 1;
   max-width: 320px;
   accent-color: var(--accent-strong);
   height: 32px;
}
.menuslider .sliderbutton { min-width: 44px; padding: 0 10px; margin: 0; }
.slider-value { font-weight: bold; margin-top: 4px !important; }
.rate-slider {
   display: flex;
   align-items: center;
   gap: 12px;
}
.rate-slider input[type="range"] {
   flex: 1;
   max-width: 320px;
   height: 32px;
   accent-color: var(--accent-strong);
}

/* Schalter (Live Display) */
.toggle-container { position: relative; width: 52px; height: 30px; }
.toggle-input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-label {
   position: absolute;
   inset: 0;
   cursor: pointer;
   background: var(--key-pressed);
   border-radius: 999px;
   transition: background-color 0.2s;
}
.toggle-label::after {
   content: "";
   position: absolute;
   width: 24px;
   height: 24px;
   top: 3px;
   left: 3px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transition: transform 0.2s;
}
.toggle-input:checked + .toggle-label { background: var(--accent-fill); }
.toggle-input:checked + .toggle-label::after { transform: translateX(22px); }
.toggle-input:focus-visible + .toggle-label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Spieler-Dialog ---------- */
#players {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 10px;
   margin-top: 10px;
}
#players .player-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 12px 8px;
   border-radius: var(--radius);
   background: var(--surface-2);
   border: 1px solid var(--border);
}
#players .player-card .player-name {
   padding: 0 30px;          /* Platz für das ✕ oben rechts */
   font-weight: bold;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
}
#players img.playerAvatar {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   object-fit: cover;
   cursor: pointer;
}
#players .player-addtogame { width: 100%; margin: 0; font-size: 0.9em; }
#players .player-ingame-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; width: 100%; }
#players .player-leavegame { margin: 0; font-size: 0.85em; }
#players .player-ingame {
   min-height: 44px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--accent-text);
   font-weight: bold;
   font-size: 0.9em;
}
.player-name.editable input { width: 100%; }
.edit-controls { display: inline-flex; gap: 2px; }
.edit-controls button {
   min-width: 40px;
   min-height: 40px;
   border: none;
   background: none;
   cursor: pointer;
   font-size: 1em;
}
.edit-controls button.confirm { color: var(--accent-text); }
.edit-controls button.cancel { color: var(--danger); }
.confirm:disabled { opacity: 0.3; cursor: not-allowed; }
.input-error { outline: 2px solid var(--danger); }
#avatarPreview {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
   gap: 8px;
}
#avatarPreview img {
   width: 100%;
   aspect-ratio: 1;
   border-radius: 50%;
   object-fit: cover;
   cursor: pointer;
}

/* ---------- Sonstiges aus dem Bestand ---------- */
#qrcode, #liveDisplayQRCode { margin: 8px 0; }
#qrcode img, #liveDisplayQRCode img {
   max-width: 100%;
   max-height: 60vh;
   max-height: 60svh;
   background: #fff;
   padding: 8px;
   border-radius: 8px;
}
#dataUrlContainer, #liveDisplayURL { word-break: break-all; font-size: 0.85em; }
.copy-button { cursor: pointer; color: var(--accent-text); padding: 6px; }
.copytooltip {
   background: var(--accent-fill);
   color: var(--on-accent);
   border-radius: 6px;
   padding: 4px 10px;
   position: absolute;
   z-index: 1;
   margin-left: -2.5em;
   margin-top: -1.8em;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.6s, visibility 0s linear 0.6s;
}
.copytooltip.visible { visibility: visible; opacity: 1; transition: opacity 0.3s; }
.consolemessages {
   font-size: 0.75em;
   font-family: ui-monospace, monospace;
   text-align: left;
   height: 50vh;
   height: 50svh;
   overflow: auto;
   -webkit-user-select: text;
   user-select: text;
}
.console-message.warn { color: var(--warn-text); }
.console-message.error { color: var(--danger); }
.console-message.info { color: #3b82f6; }
.dartscorerlogo { max-width: 100%; height: auto; }
#welcomeModal video { max-width: 100%; }
#welcomeModal .modal-content { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Begrüßung aus dem Admin (Branding): je Sprache ein Block, Klassen aus dem Editor */
html[lang="en"] .brand-welcome[data-wl="de"],
html:not([lang="en"]) .brand-welcome[data-wl="en"] { display: none; }
.brand-welcome { overflow-wrap: anywhere; }
.welcome-hint { padding: 8px 12px; border-left: 4px solid var(--accent); border-radius: 6px; background: var(--accent-soft); text-align: left; }
.welcome-hint i { color: var(--accent); }
.brand-welcome h2 { margin: 6px 36px 10px; }
.brand-welcome h3 { margin: 12px 0 6px; }
.brand-welcome p { margin: 8px 0; line-height: 1.45; }
.brand-welcome ul, .brand-welcome ol { display: inline-block; margin: 6px 0; text-align: left; }
.brand-welcome blockquote { margin: 10px 0; padding: 4px 12px; border-left: 4px solid var(--accent); text-align: left; }
.brand-welcome hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.brand-welcome a { color: var(--accent-text); }
:root[data-theme="dark"] .brand-welcome a { color: var(--accent); }
.brand-welcome img { max-width: 100%; height: auto; vertical-align: middle; }
.brand-welcome img.img-s { width: 25%; }
.brand-welcome img.img-m { width: 55%; }
.brand-welcome img.img-l { width: 100%; }
.brand-welcome .ta-left { text-align: left; }
.brand-welcome .ta-center { text-align: center; }
.brand-welcome .ta-right { text-align: right; }
.brand-welcome .tc-accent { color: var(--accent); }
.brand-welcome .tc-muted { color: var(--muted); }
.brand-welcome .fs-small { font-size: 0.85em; }
.brand-welcome .fs-large { font-size: 1.3em; }

/* ---------- Computergegner ---------- */
.bot-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 40px;
   cursor: pointer;
   font-size: 0.9em;
   color: var(--muted);
}
.bot-toggle input { width: 20px; height: 20px; accent-color: var(--accent-strong); }
.bot-toggle:has(input:checked) { color: var(--text); font-weight: bold; }
#players .bot-level { min-width: 0; width: 100%; font-size: 0.85em; }
#selectedPlayers .player-name .fa-robot { color: var(--muted); }

/* ---------- Hilfeseite Sprachsteuerung ---------- */
.help .say {
   display: inline-block;
   padding: 1px 8px;
   margin: 1px 0;
   border-radius: 999px;
   background: var(--accent-soft);
   border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
   font-weight: bold;
   white-space: nowrap;
}
.help-table {
   width: 100%;
   border-collapse: collapse;
   margin: 4px 0 8px;
}
.help-table th {
   text-align: left;
   font-size: 0.85em;
   color: var(--muted);
   font-weight: normal;
   padding: 4px 8px 4px 0;
   border-bottom: 1px solid var(--border);
}
.help-table td {
   padding: 8px 8px 8px 0;
   border-bottom: 1px solid var(--border);
   vertical-align: top;
   line-height: 1.6;
}
.help-table td:last-child { color: var(--muted); }
.help-table small { color: var(--muted); }
.help-steps, .help-tips { padding-left: 1.3em; line-height: 1.55; }
.help-steps li, .help-tips li { margin: 6px 0; }

/* ---------- Statistik ---------- */
.topbar-actions { display: flex; gap: 2px; }
.stats-tabs { margin: 10px 0 6px; }
.stats-tabs button[aria-selected="true"] {
   background: var(--accent-fill);
   color: var(--on-accent);
   font-weight: bold;
}
.stats-meta { color: var(--muted); }
.stats-meta strong { color: var(--text); }
.stats-table-wrap { overflow-x: auto; margin: 6px 0 12px; }
.stats-table {
   width: 100%;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
}
.stats-table th, .stats-table td {
   padding: 8px 10px;
   border-bottom: 1px solid var(--border);
   text-align: right;
   white-space: nowrap;
}
.stats-table thead th { font-size: 0.95em; vertical-align: bottom; }
.stats-table tbody th {
   text-align: left;
   font-weight: normal;
   color: var(--muted);
}
.stats-table td.best {
   font-weight: bold;
   color: var(--accent2-strong);
}
:root[data-theme="dark"] .stats-table td.best { color: var(--accent2); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .stats-table td.best { color: var(--accent2); } }
.stats-table small { color: var(--muted); font-weight: normal; }
.stats-legs, .stats-list { list-style: none; padding: 0; margin: 6px 0; }
.stats-legs li {
   display: flex;
   gap: 12px;
   padding: 8px 0;
   border-bottom: 1px solid var(--border);
}
.stats-leg-no { color: var(--muted); min-width: 4em; }
.stats-list li button {
   width: 100%;
   min-height: 56px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
   margin: 4px 0;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2);
   text-align: left;
   cursor: pointer;
}
.stats-list li button > span:last-child { text-align: right; white-space: nowrap; }
.stats-list small { color: var(--muted); }
.stats-list .won { color: var(--accent-text); font-weight: bold; }
.stats-list .lost { color: var(--danger); }
.stats-player-select { margin: 8px 0; }
.stats-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 8px;
   margin: 8px 0;
}
.stats-cards > div {
   display: flex;
   flex-direction: column;
   padding: 10px 12px;
   border-radius: 12px;
   background: var(--surface-2);
   border: 1px solid var(--border);
}
.stats-cards span { color: var(--muted); font-size: 0.85em; }
.stats-cards strong { font-size: 1.6em; font-variant-numeric: tabular-nums; }
.stats-cards small { color: var(--muted); }

/* ---------- Sieger-Bildschirm ---------- */
.winner-overlay {
   position: fixed;
   inset: 0;
   z-index: 950;               /* unter den Dialogen (Statistik), über dem Spiel */
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
   background: rgba(0, 0, 0, 0.6);
}
.winner-overlay[hidden] { display: none; }
.winner-overlay { overflow: auto; justify-content: safe center; }
@media (max-height: 560px) {
   .winner-card { padding: 16px 18px 12px; }
   .winner-trophy { font-size: 2.2rem; }
   .winner-avatar img { width: 56px; height: 56px; }
   .winner-name { font-size: 1.5em; }
}
.winner-confetti {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}
.winner-card {
   position: relative;
   width: min(460px, 100%);
   max-height: calc(100dvh - 32px);
   overflow-y: auto;
   padding: 26px 22px 18px;
   border-radius: 22px;
   background: var(--surface);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
   text-align: center;
}
.winner-overlay.celebrate .winner-card { animation: winner-pop 0.5s cubic-bezier(.2, 1.4, .4, 1); }
.winner-close { position: absolute; top: 6px; right: 6px; }
.winner-trophy {
   font-size: 3.4rem;
   color: var(--gold);
   line-height: 1;
}
.winner-overlay.celebrate .winner-trophy { animation: winner-bounce 1.1s ease-in-out 0.2s 2; }
.winner-avatar img {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   object-fit: cover;
   margin-top: 10px;
   border: 3px solid var(--gold);
}
.winner-label {
   margin: 10px 0 0;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-size: 0.8em;
   color: var(--muted);
}
.winner-name { margin: 4px 0; font-size: 2em; }
.winner-details { color: var(--muted); margin: 4px 0 16px; }
.winner-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tm-live { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; cursor: pointer; }
.tm-live input { margin-top: 3px; }
.winner-tournament { margin: 0 0 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.winner-tournament p { margin: 0; }
.winner-tournament .warn { color: var(--warn-text); }

/* ---------- Turnierspiel: Leiste unter der Kopfzeile ---------- */
.tournament-bar {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 var(--gap) 6px;
   padding: 4px 4px 4px 12px;
   border-radius: var(--radius-small);
   background: var(--accent-soft);
   border: 1px solid var(--accent);
   font-size: 0.9em;
}
.tournament-bar[hidden] { display: none; }
.tournament-bar > i { color: var(--gold); }
.tournament-bar.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.tournament-bar.sent > i { color: var(--accent-text); }
.tournament-bar-text { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-bar-action { min-height: 40px; border: 1px solid var(--accent); background: var(--accent-fill); color: var(--on-accent); border-radius: var(--radius-small); padding: 4px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
.tournament-bar-action[hidden] { display: none; }
.tournament-bar-close { border: none; background: transparent; color: var(--muted); width: 44px; height: 44px; border-radius: var(--radius-small); cursor: pointer; }
.winner-undo {
   margin-top: 12px;
   min-height: 40px;
   border: none;
   background: transparent;
   color: var(--muted);
   cursor: pointer;
   text-decoration: underline;
}
@keyframes winner-pop {
   from { transform: scale(0.7); opacity: 0; }
   to { transform: scale(1); opacity: 1; }
}
@keyframes winner-bounce {
   0%, 100% { transform: translateY(0) rotate(0); }
   30% { transform: translateY(-14px) rotate(-8deg); }
   60% { transform: translateY(0) rotate(6deg); }
}

/* ---------- Cricket-Tafel ---------- */
/* Die Tafel passt sich der Höhe an (Container Query) und scrollt nie */
#selectedPlayers[data-mode="cricket"] { display: block; overflow: hidden; container-type: size; }
.cricket-board-wrap { height: 100%; display: flex; }
.cricket-board {
   width: 100%;
   height: 100%;
   border-collapse: separate;
   border-spacing: 4px;
   table-layout: fixed;
   font-variant-numeric: tabular-nums;
}
.cricket-board thead th {
   padding: 6px 2px;
   border-radius: 12px;
   background: var(--surface);
   border: 2px solid var(--border);
   vertical-align: top;
   overflow: hidden;
}
.cricket-board thead th { position: relative; }
/* ✕ wie auf den Spielerkarten der anderen Modi: Spieler aus dem Spiel nehmen (mit Rückfrage) */
.cb-remove { position: absolute; top: 0; right: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
   background: transparent; color: var(--muted); font-size: 0.75rem; cursor: pointer; z-index: 1; }
/* Name antippen öffnet den Spieler-Dialog bei diesem Spieler („Aus dem Spiel“); Platz links und rechts für das ✕ */
.cricket-board thead .cb-name { padding-inline: 0 22px; cursor: pointer; }
/* Ab 5 Spielern sind die Spalten zu schmal für ✕ und Name (Handy: ca. 66 px) - dann nur der Name (antippen) */
.cricket-board:is([data-players="5"], [data-players="6"], [data-players="7"], [data-players="8"],
   [data-players="9"], [data-players="10"], [data-players="11"], [data-players="12"]) .cb-remove { display: none; }
.cricket-board:is([data-players="5"], [data-players="6"], [data-players="7"], [data-players="8"],
   [data-players="9"], [data-players="10"], [data-players="11"], [data-players="12"]) thead .cb-name { padding-inline: 0; font-size: 0.8em; }
.cb-remove:active { background: var(--key-pressed); }
@media (hover: hover) { .cb-remove:hover { background: var(--key-2); } }
.cricket-board thead th:first-child { background: transparent; border-color: transparent; width: 2.6em; }   /* „Bull“ passt genau, mehr Platz für Namen */
.cricket-board thead th.active { border-color: var(--accent); background: var(--accent-soft); }
.cb-name {
   display: block;
   font-size: 0.95em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cricket-board thead .playerAvatar {
   display: block;
   width: clamp(20px, min(5vmin, 9cqh), 44px);
   height: clamp(20px, min(5vmin, 9cqh), 44px);
   margin: 0 auto 2px;
}
@media (max-width: 520px) { .cricket-board[data-players="4"] thead .playerAvatar { display: none; } }
.cricket-board[data-players="5"] thead .playerAvatar, .cricket-board[data-players="6"] thead .playerAvatar,
.cricket-board[data-players="7"] thead .playerAvatar, .cricket-board[data-players="8"] thead .playerAvatar,
.cricket-board:is([data-players="9"], [data-players="10"], [data-players="11"], [data-players="12"]) thead .playerAvatar { display: none; }
.cb-points { display: block; font-size: clamp(1.2em, min(5vmin, 7cqh), 3em); font-weight: bold; line-height: 1.05; }
.cricket-board:is([data-players="5"], [data-players="6"], [data-players="7"], [data-players="8"],
   [data-players="9"], [data-players="10"], [data-players="11"], [data-players="12"]) .cb-points {
   font-size: clamp(1.1em, min(3.5vmin, 6cqh), 2em);
}
.cb-legs { display: block; font-size: 0.75em; color: var(--muted); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-last {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2px 4px;
   margin-top: 3px;
   font-size: 0.72em;
   font-weight: normal;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
}
.cb-dart { padding: 0 4px; border-radius: 4px; background: var(--surface-2); }
.cb-dart.miss { color: var(--danger); font-weight: bold; }
.cricket-board tbody th {
   font-size: clamp(1em, 4.5cqh, 1.3em);
   font-weight: bold;
   text-align: center;
   border-radius: 10px;
   background: var(--surface-2);
}
.cricket-board tbody td {
   text-align: center;
   font-size: clamp(1em, min(4.5vmin, 5.5cqh), 2.4em);
   line-height: 1;
   border-radius: 10px;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
}
.cricket-board tbody td.active { background: var(--accent-soft); border-color: var(--accent); }
.cricket-board tbody tr { height: auto; }
/* Niedrige Tafel (Handy quer, Turnierleiste): Kopf verdichten */
@container (max-height: 460px) { .cricket-board thead .playerAvatar { display: none; } }
@container (max-height: 340px) {
   .cricket-board { border-spacing: 3px; }
   .cricket-board thead th { padding: 3px 2px; }
   .cb-last { display: none; }
   .cb-name { font-size: 0.85em; }
   .cb-legs { font-size: 0.7em; }
   .cricket-board tbody td { font-size: clamp(0.9em, 5.5cqh, 2.4em); }
}
/* Gleich hohe Zeilen, egal ob ein Zeichen drinsteht */
.cricket-board .mk { display: inline-block; height: 1em; line-height: 1em; min-width: 1em; }
.cricket-board td.marks-3 { color: var(--accent-text); }
:root[data-theme="dark"] .cricket-board td.marks-3 { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .cricket-board td.marks-3 { color: var(--accent); } }
.cricket-board tr.closed th, .cricket-board tr.closed td { opacity: 0.35; }

/* ---------- Eingabe Cricket ---------- */
#mode-container { padding: 6px; }
#mode-container.hidden { display: none; }
.cricket-keypad {
   height: 100%;
   display: grid;
   grid-template-rows: repeat(8, minmax(0, 1fr));
   gap: 6px;
}
.ck-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 0; }
/* Niedrige Bildschirme (Handy quer): „Fehlwurf“ in die freie dritte Zelle der Bull-Zeile legen -
   7 statt 8 Zeilen, die Tasten werden ein Siebtel höher. Die Fehlwurf-Zeile liegt dazu in derselben
   Rasterzelle wie die Bull-Zeile, nur ihr Button (Spalte 3) nimmt Klicks an. */
@media (max-height: 560px) {
   .cricket-keypad { grid-template-rows: repeat(7, minmax(0, 1fr)); }
   /* beide fest in Zeile 7 - sonst schiebt die automatische Platzierung die Bull-Zeile in eine 8. Zeile */
   .cricket-keypad > .ck-row:nth-last-child(2) { grid-row: 7; grid-column: 1; }
   .cricket-keypad > .ck-row:last-child { grid-row: 7; grid-column: 1; pointer-events: none; }
   .cricket-keypad > .ck-row:last-child .ck-miss { grid-column: 3; pointer-events: auto; }
}
.ck-row.closed button { opacity: 0.45; }
.cricket-keypad button, .atc-keypad button {
   width: 100%;
   height: 100%;
   min-height: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font-size: clamp(1rem, 3.2vmin, 1.8rem);
   font-weight: bold;
   cursor: pointer;
}
.cricket-keypad button:active, .atc-keypad button:active { background: var(--key-pressed); transform: scale(0.97); }
.ck-row .ck-miss { grid-column: 1 / -1; }

/* ---------- Eingabe Around the Clock ---------- */
.atc-keypad {
   height: 100%;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: 8px;
}
.atc-target-display {
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: 12px;
   padding: 6px;
   border-radius: var(--radius-small);
   background: var(--surface-2);
}
.atc-target-display span { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.atc-target-display strong { font-size: clamp(2rem, 9vmin, 4.5rem); line-height: 1; }
.atc-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.atc-buttons.bull { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atc-hit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.atc-hit small { color: var(--muted); font-weight: normal; }
.atc-miss { min-height: 56px !important; }

/* ---------- Around the Clock auf der Spielerkarte ---------- */
.atc-progress {
   width: clamp(60px, 60cqw, 280px);    /* an der Karte ausgerichtet (Container Query) */
   max-width: 100%;
   height: clamp(6px, 3cqh, 14px);
   border-radius: 999px;
   background: var(--key-2);
   border: 1px solid var(--border);
   overflow: hidden;
}
/* Around the Clock: die große Zahl ist das Ziel, nicht der Rest */
#selectedPlayers .score-display.atc-target::before {
   content: "Ziel";
   display: block;
   font-size: 0.18em;
   font-weight: normal;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   text-align: center;
}
.atc-progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
html[lang="en"] #selectedPlayers .score-display.atc-target::before { content: "Target"; }

/* ---------- Shanghai, Killer, Fuchsjagd auf der Spielerkarte ---------- */
#selectedPlayers .score-display.killer-number::before {
   content: "Zahl";
   display: block;
   font-size: 0.18em;
   font-weight: normal;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   text-align: center;
}
html[lang="en"] #selectedPlayers .score-display.killer-number::before { content: "Number"; }
/* Kleine Karten: Beschriftung über der großen Zahl weglassen */
@container (max-height: 120px) {
   #selectedPlayers .score-display.atc-target::before,
   #selectedPlayers .score-display.killer-number::before { display: none; }
}
#selectedPlayers .player-card.out { opacity: 0.45; filter: grayscale(0.8); }
/* einzeilig: der Zusatztext wird gekürzt statt die Karte zu sprengen */
.mode-info { display: flex; align-items: center; justify-content: center; gap: 4px 10px; min-width: 0; max-width: 100%; font-weight: normal; }
.mode-tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 1px 8px;
   border-radius: 999px;
   font-size: 0.85em;
   font-weight: bold;
   background: var(--surface-2);
   color: var(--text);
   flex: 0 0 auto;
   white-space: nowrap;
}
.mode-tag.killer { background: var(--danger, #c0392b); color: var(--on-danger, #fff); }
.mode-tag.out { background: var(--key-2); color: var(--muted); }
.mode-tag.fox { background: #b35309; color: #fff; }   /* Orange mit Kontrast 5:1 zur weißen Schrift */
.mode-sub { color: var(--muted); font-size: 0.85em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.killer-lives { color: var(--danger, #c0392b); letter-spacing: 1px; white-space: nowrap; }
.killer-lives .lost { opacity: 0.25; }
.killer-buttons { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.killer-buttons .atc-hit { min-width: 0; overflow: hidden; }
/* viele Gegner: Namen höchstens zweizeilig, Rest mit … statt aus der Taste zu ragen */
.killer-buttons .atc-hit span { font-size: 0.8em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.killer-buttons .atc-hit small { font-size: 0.7em; }
.killer-keypad .killer-self small { color: var(--danger, #c0392b); }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent-strong); }

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* ---------- Info & Impressum, Feedback ---------- */
.inputbutton.danger {
   background: transparent;
   color: var(--danger, #c62828);
   border-color: currentColor;
}
.info-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 4px; }
.info-actions .inputbutton { margin: 0; }
a.inputbutton { text-decoration: none; }
.app-info-head {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 14px;
   border-radius: 14px;
   background: var(--surface-2);
   border: 1px solid var(--border);
}
.app-info-head > i { font-size: 2.2em; color: var(--accent-text); }
.app-info-head div { display: flex; flex-direction: column; gap: 2px; }
.app-info-head strong { font-size: 1.2em; }
.app-info-head div > span { color: var(--muted); font-size: 0.9em; }
.info-details { margin: 12px 0 4px; }
.danger-zone { margin-top: 22px; padding: 2px 14px 14px; border: 1px solid color-mix(in srgb, var(--danger, #c62828) 45%, var(--border)); border-radius: 12px; }
.configmodal .modal-content .danger-zone h3 { margin-top: 12px; }
.configmodal .modal-content .danger-zone h3 > i { color: var(--danger, #c62828); }
.info-details summary { cursor: pointer; font-weight: bold; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
.info-details summary::-webkit-details-marker { display: none; }
.info-details summary::before { content: "\25B8"; color: var(--accent-text); transition: transform 0.15s; }
.info-details[open] summary::before { transform: rotate(90deg); }
/* Häufige Fragen: einheitliche Akkordeon-Liste, Spielregeln als Unterliste */
.faq-list {
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   background: var(--surface);
   overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item summary {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 48px;
   padding: 8px 14px;
   font-weight: bold;
   cursor: pointer;
   list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
   content: "\25B8";
   margin-left: auto;
   color: var(--muted);
   transition: transform 0.15s;
}
.faq-item[open] > summary::after { transform: rotate(90deg); color: var(--accent-text); }
.faq-item[open] > summary { color: var(--accent-text); }
.faq-item summary:hover { background: var(--surface-2); }
.faq-item > .faq-answer { padding: 0 14px 14px; }
.faq-sublist {
   margin: 0 14px 14px;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   background: var(--surface-2);
   overflow: hidden;
}
.faq-sublist .faq-item summary { min-height: 42px; font-weight: 600; }
.faq-sublist .faq-item summary:hover { background: var(--surface); }
.faq-answer { line-height: 1.5; }
.faq-answer p { margin: 0 0 6px; }
.faq-answer ul { margin: 0; padding-left: 1.2em; }
.faq-answer li { margin: 3px 0; }
#faqModal .faq-list + .hint { margin-top: 12px; }
#infoModal .faq-answer { text-align: left; }
#infoModal .rules-actions { justify-content: center; margin-top: 14px; }
.info-details ul { margin: 6px 0 0; padding-left: 20px; }
.info-details li { margin: 3px 0; }
.feedback-form { display: flex; flex-direction: column; gap: 6px; }
.feedback-form textarea { padding: 10px 12px; resize: vertical; min-height: 120px; line-height: 1.4; }
.feedback-label { font-weight: bold; margin-top: 6px; }
.feedback-label small { font-weight: normal; color: var(--muted); }
.feedback-count { align-self: flex-end; color: var(--muted); font-size: 0.8em; }
.feedback-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.feedback-kinds label { cursor: pointer; }
.feedback-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-kinds label > span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 40px;
   padding: 0 14px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--key-2);
   font-weight: bold;
}
.feedback-kinds input:checked + span { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.feedback-kinds input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.feedback-kinds label.disabled { cursor: not-allowed; opacity: 0.45; }
.feedback-status { min-height: 1.3em; margin: 0; }
/* Live Display: Status, Kopplung mit dem Fernseher, QR-Code/Link */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live-status { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px;
   border: 1px solid var(--border); border-left-width: 4px; background: var(--surface-2); }
.live-on .live-status { border-left-color: var(--accent-strong); }
.live-status .toggle-container { flex: none; }
.live-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-status-text small { color: var(--muted); font-size: 0.85em; line-height: 1.35; }
#liveDisplayModal:not(.live-on) .live-if-on, #liveDisplayModal.live-on .live-if-off { display: none; }
.live-steps { margin: 4px 0 10px; padding-left: 1.3em; line-height: 1.45; }
.live-steps li { margin: 4px 0; }
.live-steps .tv-url { display: block; margin: 2px 0 4px; }
.live-url { margin: 4px 0 !important; }
.copy-wrap { position: relative; align-items: center; }
.copy-wrap .copytooltip { position: static; margin: 0; }
#liveDisplayQRCode img { max-height: min(40vh, 240px); }
.tv-url { font-size: 1.2em; margin: 4px 0 8px; word-break: break-all; }
.tv-pair { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.tv-pair input { flex: 0 1 9em; min-width: 7em; font-size: 1.4em; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; }
.tv-pair button { flex: 1 1 auto; }
.feedback-status.success { color: var(--accent-text, var(--accent-strong)); font-weight: bold; }
.feedback-status.error { color: var(--danger, #c62828); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Import / Export: Auswahl der Bereiche, Ergebnis (QR-Code, Link, Code) */
.ie-parts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.ie-parts .check-row { align-items: flex-start; padding: 6px 0; }
.ie-parts .check-row input { margin-top: 2px; flex: none; }
.ie-parts .check-row > span { display: flex; flex-direction: column; gap: 2px; }
.ie-parts .check-row small { color: var(--muted); font-size: 0.85em; overflow-wrap: anywhere; }
.check-row.disabled { cursor: default; opacity: 0.5; }
.ie-label { font-weight: bold; margin: 10px 0 4px; }
.hint.ie-warning { color: var(--danger, #c62828); }
.ie-note, .note { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 10px 12px; border-radius: 10px;
   border: 1px solid var(--border); border-left-width: 4px; background: var(--surface-2); font-size: 0.9em; line-height: 1.4; }
.ie-note:empty { display: none; }
#exportMethodHint { margin: 4px 0 0; }
#exportMethodHint:empty { display: none; }
.ie-note > i, .note > i { margin-top: 3px; }
.note { margin: 14px 0 0; }
.note > i { color: var(--muted); }
.ie-note-local { border-left-color: var(--accent-strong); }
.ie-note-local > i { color: var(--accent-text); }
.ie-note-server { border-color: #d39e00; background: color-mix(in srgb, #f0b400 14%, var(--surface)); }
.ie-note-server > i { color: #b08300; }
.ie-note.ie-warning { border-color: var(--danger, #c62828); }
.ie-note.ie-warning > i { color: var(--danger, #c62828); }
.ie-result:empty { display: none; }
.ie-result { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.ie-qr img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
.ie-link { position: relative; margin: 6px 0; }
.ie-link #dataUrlContainer { display: inline-block; max-height: 4.5em; overflow: hidden; vertical-align: middle; max-width: calc(100% - 3em); }
.ie-code-display { font-size: 2em; font-weight: bold; letter-spacing: 0.15em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.ie-code input { text-transform: uppercase; }
.ie-select { margin-top: 4px; }
.ie-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.ie-tabs button { justify-content: center; font-size: 1em; color: var(--text); }
.ie-tabs button[aria-selected="true"] { background: var(--accent-fill); color: var(--on-accent); font-weight: bold; }
.ie-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- App installieren ---------- */
.install-guide ol { padding-left: 22px; margin: 6px 0; }
.install-guide li { margin: 6px 0; line-height: 1.4; }
.install-guide [data-install-platform] + [data-install-platform] { margin-top: 10px; }


/* ---------- Icons ---------- */
/* Font Awesome lädt nicht blockierend (boot.js): bis dahin den Platz der Icons freihalten, damit nichts springt */
html.icons-loading .fa, html.icons-loading .fas { display: inline-block; min-width: 1em; }