:root {
  --bg: #141821;
  --panel: #202737;
  --panel2: #273146;
  --text: #f4f7fb;
  --muted: #aeb8c8;
  --accent: #58d68d;
  --accent2: #79b8ff;
  --danger: #ff6b6b;
  --warn: #ffd166;
  --bg-radial: #25314a;
  --panel-end: #1c2331;
  --active-panel: #050505;
  --active-panel2: #050505;
  --active-text: #ffe600;
  --active-border: #ffe600;
  --active-badge-text: #000000;
  --active-ring: rgba(255,230,0,.70);
  --dart-hit-bg: rgba(66, 153, 225, .45);
  --dart-hit-border: rgba(144, 205, 244, .8);
  --shadow: 0 14px 36px rgba(0,0,0,.28);
  --radius: 18px;
}

body.theme-outdoor {
  --bg: #020617;
  --bg-radial: #111827;
  --panel: #0b1220;
  --panel2: #111827;
  --panel-end: #070b12;
  --text: #ffffff;
  --muted: #e6edf8;
  --accent: #ffe600;
  --accent2: #00e5ff;
  --danger: #ff3131;
  --warn: #ffb000;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #ffff00;
  --active-border: #ffff00;
  --active-badge-text: #000000;
  --active-ring: rgba(255,255,0,.78);
  --dart-hit-bg: rgba(0,229,255,.70);
  --dart-hit-border: #ffffff;
  --shadow: 0 16px 38px rgba(0,0,0,.55);
}

body.theme-yellow_dark {
  --bg: #050505;
  --bg-radial: #1c1a06;
  --panel: #101010;
  --panel2: #1f1f13;
  --panel-end: #080808;
  --text: #fff7b0;
  --muted: #f3e68a;
  --accent: #ffdd00;
  --accent2: #ffffff;
  --danger: #ff4a4a;
  --warn: #ffd54f;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #ffeb00;
  --active-border: #ffeb00;
  --active-badge-text: #000000;
  --active-ring: rgba(255,235,0,.78);
  --dart-hit-bg: rgba(255,221,0,.24);
  --dart-hit-border: #ffeb00;
}

body.theme-neon {
  --bg: #030914;
  --bg-radial: #111d3a;
  --panel: #071426;
  --panel2: #0c213d;
  --panel-end: #040b16;
  --text: #e9fbff;
  --muted: #a7e9ff;
  --accent: #00f5ff;
  --accent2: #ff4dff;
  --danger: #ff3b6b;
  --warn: #fff04a;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #fff04a;
  --active-border: #00f5ff;
  --active-badge-text: #001014;
  --active-ring: rgba(0,245,255,.72);
  --dart-hit-bg: rgba(255,77,255,.32);
  --dart-hit-border: #00f5ff;
}

body.theme-ice {
  --bg: #06121f;
  --bg-radial: #1a3a5f;
  --panel: #0b2036;
  --panel2: #123555;
  --panel-end: #081827;
  --text: #f1fbff;
  --muted: #c1e7ff;
  --accent: #7dd3fc;
  --accent2: #facc15;
  --danger: #fb7185;
  --warn: #facc15;
  --active-panel: #001a2e;
  --active-panel2: #001a2e;
  --active-text: #fff36b;
  --active-border: #7dd3fc;
  --active-badge-text: #001a2e;
  --active-ring: rgba(125,211,252,.65);
  --dart-hit-bg: rgba(125,211,252,.36);
  --dart-hit-border: #e0f7ff;
}

body.theme-warm {
  --bg: #160b03;
  --bg-radial: #4a2408;
  --panel: #2a1406;
  --panel2: #3b1c08;
  --panel-end: #1d0d03;
  --text: #fff4df;
  --muted: #ffdca8;
  --accent: #ffb000;
  --accent2: #ff6b35;
  --danger: #ff4d4d;
  --warn: #ffd166;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #ffe56b;
  --active-border: #ffb000;
  --active-badge-text: #000000;
  --active-ring: rgba(255,176,0,.70);
  --dart-hit-bg: rgba(255,107,53,.32);
  --dart-hit-border: #ffd166;
}

body.theme-contrast {
  --bg: #000000;
  --bg-radial: #000000;
  --panel: #111111;
  --panel2: #1f1f1f;
  --panel-end: #080808;
  --text: #ffffff;
  --muted: #f0f0f0;
  --accent: #ffff00;
  --accent2: #00ffff;
  --danger: #ff0000;
  --warn: #ffff00;
  --active-panel: #ffff00;
  --active-panel2: #ffff00;
  --active-text: #000000;
  --active-border: #ffffff;
  --active-badge-text: #000000;
  --active-ring: rgba(255,255,0,.78);
  --dart-hit-bg: rgba(0,255,255,.72);
  --dart-hit-border: #ffffff;
}

body.theme-bright {
  --bg: #e8eef7;
  --bg-radial: #ffffff;
  --panel: #ffffff;
  --panel2: #eef3fb;
  --panel-end: #ffffff;
  --text: #111827;
  --muted: #374151;
  --accent: #16a34a;
  --accent2: #2563eb;
  --danger: #dc2626;
  --warn: #b45309;
  --active-panel: #111827;
  --active-panel2: #111827;
  --active-text: #ffeb3b;
  --active-border: #f59e0b;
  --active-badge-text: #111827;
  --active-ring: rgba(245,158,11,.55);
  --dart-hit-bg: rgba(37,99,235,.22);
  --dart-hit-border: rgba(37,99,235,.8);
}

body.theme-dartboard {
  --bg: #07150c;
  --bg-radial: #16351f;
  --panel: #13251a;
  --panel2: #1d3424;
  --panel-end: #0d1b12;
  --text: #f7fff9;
  --muted: #cde6d3;
  --accent: #f44336;
  --accent2: #4caf50;
  --danger: #ff5252;
  --warn: #ffd54f;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #ffeb3b;
  --active-border: #f44336;
  --active-badge-text: #ffffff;
  --active-ring: rgba(244,67,54,.65);
  --dart-hit-bg: rgba(76,175,80,.55);
  --dart-hit-border: rgba(255,255,255,.9);
}


body.theme-steel {
  --bg: #07111c;
  --bg-radial: #1d3a57;
  --panel: #102033;
  --panel2: #183653;
  --panel-end: #081522;
  --text: #f2f8ff;
  --muted: #b9d4ec;
  --accent: #64d2ff;
  --accent2: #f59e0b;
  --danger: #ff5d6c;
  --warn: #ffd166;
  --active-panel: #03101d;
  --active-panel2: #08213a;
  --active-text: #e8fbff;
  --active-border: #64d2ff;
  --active-badge-text: #06121f;
  --active-ring: rgba(100,210,255,.72);
  --dart-hit-bg: rgba(100,210,255,.28);
  --dart-hit-border: rgba(199,242,255,.95);
}

body.theme-royal {
  --bg: #12051f;
  --bg-radial: #3a1762;
  --panel: #221134;
  --panel2: #351a55;
  --panel-end: #160820;
  --text: #fff7ff;
  --muted: #dec7ff;
  --accent: #c084fc;
  --accent2: #f0abfc;
  --danger: #fb7185;
  --warn: #facc15;
  --active-panel: #09010f;
  --active-panel2: #1f0833;
  --active-text: #fff4b8;
  --active-border: #c084fc;
  --active-badge-text: #160820;
  --active-ring: rgba(192,132,252,.72);
  --dart-hit-bg: rgba(240,171,252,.26);
  --dart-hit-border: rgba(245,208,254,.95);
}

body.theme-sunset {
  --bg: #170604;
  --bg-radial: #6b1f13;
  --panel: #2b0d08;
  --panel2: #4a160d;
  --panel-end: #180604;
  --text: #fff6ee;
  --muted: #ffc9a8;
  --accent: #ff4d4d;
  --accent2: #ffb000;
  --danger: #ff3030;
  --warn: #ffd166;
  --active-panel: #090100;
  --active-panel2: #351007;
  --active-text: #fff0b8;
  --active-border: #ffb000;
  --active-badge-text: #210500;
  --active-ring: rgba(255,176,0,.76);
  --dart-hit-bg: rgba(255,77,77,.32);
  --dart-hit-border: #ffd166;
}

body.theme-bvb {
  --bg: #060606;
  --bg-radial: #252000;
  --panel: #111111;
  --panel2: #242000;
  --panel-end: #080808;
  --text: #ffe600;
  --muted: #fff0a3;
  --accent: #fde100;
  --accent2: #ffffff;
  --danger: #ff3030;
  --warn: #fde100;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #fde100;
  --active-border: #fde100;
  --active-badge-text: #000000;
  --active-ring: rgba(253,225,0,.82);
  --dart-hit-bg: rgba(253,225,0,.20);
  --dart-hit-border: #fde100;
}

body.theme-bayern {
  --bg: #13030a;
  --bg-radial: #4b0015;
  --panel: #210814;
  --panel2: #4a0b1e;
  --panel-end: #15030a;
  --text: #fff5f7;
  --muted: #ffc8d2;
  --accent: #dc052d;
  --accent2: #ffffff;
  --danger: #ff3d5a;
  --warn: #ffd447;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #ffffff;
  --active-border: #dc052d;
  --active-badge-text: #ffffff;
  --active-ring: rgba(220,5,45,.72);
  --dart-hit-bg: rgba(255,255,255,.22);
  --dart-hit-border: #ffffff;
}

body.theme-schalke {
  --bg: #020b18;
  --bg-radial: #063b7a;
  --panel: #06172c;
  --panel2: #073b7a;
  --panel-end: #020b18;
  --text: #f3f9ff;
  --muted: #c7e6ff;
  --accent: #005a9c;
  --accent2: #ffffff;
  --danger: #ff4d4d;
  --warn: #ffdd55;
  --active-panel: #000000;
  --active-panel2: #000000;
  --active-text: #fff36b;
  --active-border: #005a9c;
  --active-badge-text: #ffffff;
  --active-ring: rgba(0,90,156,.78);
  --dart-hit-bg: rgba(255,255,255,.24);
  --dart-hit-border: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, var(--bg-radial) 0%, var(--bg) 52%);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

.topbar, .game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(18px, 4vw, 46px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(12, 16, 24, .78);
  backdrop-filter: blur(10px);
}

.topbar h1, .game-topbar h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
}

.topbar p, .game-topbar p { margin: 8px 0 0; color: var(--muted); }
.topbar.compact h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

.back {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.page {
  width: min(1180px, calc(100% - 30px));
  margin: 26px auto 60px;
}

.page.narrow { width: min(860px, calc(100% - 30px)); }

.hero {
  margin: 22px 0;
  padding: 26px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
}
.hero h2 { margin: 0 0 8px; font-size: 2rem; }
.hero p { margin: 0; color: var(--muted); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-end));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.game-card h3 { margin: 0 0 12px; font-size: 2.2rem; }
.game-card p, .muted { color: var(--muted); }
.disabled { opacity: .62; }
.settings-card { margin-top: 22px; }

.button-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.button-row.spaced { justify-content: space-between; }
.button-row.full > * { flex: 1; }

.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  padding: 13px 18px;
  background: var(--accent);
  color: #0d1812;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  min-height: 48px;
}
.button.big { min-height: 62px; font-size: 1.15rem; }
.button.ghost { background: rgba(255,255,255,.11); color: var(--text); }
.button.danger { background: var(--danger); color: #280707; }
.button.yellow { background: #ffeb00; color: #15120a; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 10px 24px rgba(255,235,0,.18); }
.button:disabled, .dart-button:disabled { opacity: .45; cursor: not-allowed; }

.variant-list { display: grid; gap: 16px; margin-top: 18px; }
.variant-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.variant-card h2 { margin: 0 0 8px; }
.variant-card p { margin: 0; }

.form-card { display: grid; gap: 18px; }
.form-card label { display: grid; gap: 7px; font-weight: 800; }
input, select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  padding: 14px 15px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 1.08rem;
}
select option {
  background: #ffffff;
  color: #111827;
}
select optgroup {
  background: #ffffff;
  color: #111827;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
fieldset {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  padding: 16px;
}
legend { font-weight: 900; padding: 0 8px; }
.radio { display: inline-flex !important; align-items: center; grid-auto-flow: column; margin-right: 18px; font-weight: 700 !important; }
.radio input { width: auto; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }

.list-card h2 { margin-top: 0; }
.player-edit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rename-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.check-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  cursor: pointer;
}
.check-card input { width: 24px; height: 24px; }
.alert {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,107,107,.18);
  border: 1px solid rgba(255,107,107,.35);
  margin-bottom: 14px;
}

.game-body { min-height: 100vh; overflow-x: hidden; }
.game-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
}
.game-topbar h1 { font-size: clamp(1.3rem, 3vw, 2.2rem); }
.top-actions { display: flex; gap: 10px; }

.game-layout {
  display: grid;
  grid-template-columns: 1fr minmax(330px, 420px);
  gap: 18px;
  padding: 18px;
}

.game-message {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(121,184,255,.13);
  border: 1px solid rgba(121,184,255,.28);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 900;
  margin-bottom: 18px;
}
.game-message.error { background: rgba(255,107,107,.18); border-color: rgba(255,107,107,.42); }

.players-grid {
  display: grid;
  gap: 18px;
  min-height: 60vh;
}
.players-grid[data-count="1"] { grid-template-columns: 1fr; }
.players-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players-grid[data-count="3"], .players-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players-grid[data-count="5"], .players-grid[data-count="6"], .players-grid[data-count="7"], .players-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.player-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  min-height: 240px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.player-card.active {
  border-color: var(--active-border, var(--accent));
  background: var(--active-panel);
  color: var(--active-text);
  box-shadow: 0 0 0 6px var(--active-ring), 0 0 0 11px rgba(0,0,0,.45), var(--shadow);
  transform: translateY(-2px);
}
.player-card.finished-player { border-color: var(--accent2); }
.player-card h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 3rem); }
.small-meta { color: var(--muted); font-weight: 700; }
.active-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--active-border, var(--accent));
  color: var(--active-badge-text, #000000);
  font-weight: 1000;
  padding: 8px 13px;
  border-radius: 999px;
  letter-spacing: .06em;
  box-shadow: 0 0 0 2px rgba(0,0,0,.55);
}
.score {
  align-self: center;
  justify-self: center;
  font-size: clamp(5rem, 12vw, 12rem);
  font-weight: 1000;
  line-height: .85;
}
.warn-score { color: var(--warn); }
.danger-score { color: var(--danger); }
.turn-points { font-size: 1.25rem; font-weight: 900; color: var(--muted); }
.darts-row { display: flex; gap: 10px; flex-wrap: wrap; }
.darts-row span {
  min-width: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.11);
  text-align: center;
  font-weight: 900;
}

.touch-panel {
  position: sticky;
  top: 102px;
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(12,16,24,.86);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow);
}
.touch-panel h2 { margin: 0; }
.multiplier-row, .special-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.multiplier, .dart-button {
  border: 0;
  border-radius: 14px;
  min-height: 58px;
  background: rgba(255,255,255,.1);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 1000;
  cursor: pointer;
}
.multiplier.selected {
  background: var(--accent2);
  color: #06111e;
}
.number-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}
.dart-button:hover, .multiplier:hover { filter: brightness(1.12); }
.dart-button.miss { background: rgba(255,107,107,.88); color: #240707; }

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: 1fr; }
  .touch-panel { position: static; }
  .players-grid[data-count] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 700px) {
  .topbar, .game-topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; }
  .top-actions .button { flex: 1; }
  .variant-card { flex-direction: column; align-items: stretch; }
  .inline-form, .player-edit-row, .rename-form { grid-template-columns: 1fr; }
  .number-grid { grid-template-columns: repeat(4, 1fr); }
  .score { font-size: 5rem; }
}

/* v0.1.2: kompaktere Spielanzeige für 3/4 Spieler und deutlicher aktiver Spieler */
.game-layout {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 360px);
  gap: 14px;
  padding: 14px;
  align-items: start;
}
.game-layout > section { min-width: 0; }
.game-message {
  min-height: 48px;
  margin-bottom: 12px;
  padding: 10px 14px;
}
.players-grid {
  gap: 12px;
  min-height: 0;
}
.players-grid[data-count="1"] { grid-template-columns: 1fr; }
.players-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.players-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players-grid[data-count="5"], .players-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.players-grid[data-count="7"], .players-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.player-card {
  min-height: clamp(170px, calc((100vh - 245px) / 2), 250px);
  padding: clamp(12px, 1.4vw, 20px);
  gap: 8px;
}
.players-grid[data-count="1"] .player-card,
.players-grid[data-count="2"] .player-card {
  min-height: clamp(260px, calc(100vh - 230px), 540px);
}
.players-grid[data-count="3"] .player-card {
  min-height: clamp(230px, calc(100vh - 230px), 500px);
}
.player-card h2 { font-size: clamp(1.2rem, 2.2vw, 2.4rem); }
.score { font-size: clamp(3.4rem, 7.5vw, 8.5rem); }
.players-grid[data-count="1"] .score,
.players-grid[data-count="2"] .score { font-size: clamp(5rem, 11vw, 12rem); }
.players-grid[data-count="3"] .score { font-size: clamp(4rem, 7vw, 8.5rem); }
.players-grid[data-count="4"] .score { font-size: clamp(3.5rem, 6.5vw, 7.5rem); }
.small-meta { font-size: clamp(.85rem, 1.1vw, 1rem); }
.turn-points { font-size: clamp(.95rem, 1.3vw, 1.2rem); }
.darts-row span {
  min-width: 44px;
  padding: 8px 10px;
}

.player-card.active {
  background: var(--active-panel);
  border-color: var(--active-border, var(--accent));
  box-shadow: 0 0 0 6px var(--active-ring), 0 0 0 11px rgba(0,0,0,.45), 0 18px 42px rgba(0,0,0,.34);
}
.player-card.active .score { text-shadow: 0 3px 18px rgba(0,0,0,.45); }

.touch-panel {
  top: 92px;
  gap: 10px;
  padding: 14px;
}
.multiplier-row, .special-grid { gap: 8px; }
.multiplier, .dart-button {
  min-height: 50px;
  font-size: 1rem;
}
.number-grid { gap: 7px; }
.button.big { min-height: 54px; }

@media (max-width: 880px) {
  .game-layout { grid-template-columns: 1fr; }
  .touch-panel { position: static; }
  .players-grid[data-count] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 620px) {
  .players-grid[data-count] { grid-template-columns: 1fr; }
  .player-card { min-height: 190px; }
}

@media (max-height: 720px) and (min-width: 881px) {
  .topbar, .game-topbar { padding-top: 12px; padding-bottom: 12px; }
  .game-topbar p { margin-top: 4px; }
  .game-message { min-height: 42px; font-size: 1.05rem; }
  .player-card { min-height: clamp(150px, calc((100vh - 210px) / 2), 220px); }
  .players-grid[data-count="3"] .player-card { min-height: clamp(210px, calc(100vh - 210px), 460px); }
  .score { font-size: clamp(3rem, 6.5vw, 7.5rem); }
  .touch-panel { top: 78px; }
  .multiplier, .dart-button { min-height: 44px; }
  .button.big { min-height: 48px; }
}

/* v0.1.4/v0.1.5: Vollbild-Taste und Bot-Unterstützung */
.page.wide { width: min(1120px, calc(100% - 30px)); }
.add-player-form {
  grid-template-columns: minmax(240px, 1fr) auto minmax(150px, 220px) minmax(110px, 140px) auto;
  align-items: end;
}
.bot-check {
  display: inline-flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 0 4px 11px;
  font-weight: 900 !important;
}
.bot-check input { width: 24px; height: 24px; }
.compact-check { padding-bottom: 0; justify-content: center; }
.player-edit-row-wide { grid-template-columns: 1fr auto; }
.rename-form-wide {
  grid-template-columns: minmax(180px, 1fr) auto minmax(130px, 160px) minmax(110px, 140px) auto;
  align-items: center;
}
.check-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}
.bot-hint {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 209, 102, .16);
  border: 1px solid rgba(255, 209, 102, .34);
  color: var(--warn);
  font-weight: 1000;
}
.player-card.bot-player:not(.active) {
  background:
    radial-gradient(circle at 0% 0%, rgba(121,184,255,.16), transparent 36%),
    linear-gradient(180deg, var(--panel), var(--panel2));
}
.player-card.bot-player .small-meta { color: #c7d6eb; }
:fullscreen .game-topbar {
  padding-top: 12px;
  padding-bottom: 12px;
}
:fullscreen .game-layout {
  padding: 12px;
}

@media (max-width: 900px) {
  .add-player-form,
  .rename-form-wide,
  .player-edit-row-wide {
    grid-template-columns: 1fr;
  }
  .bot-check,
  .compact-check { justify-content: flex-start; padding-bottom: 0; }
}


/* v0.1.5: Bots deutlicher erkennbar */
.bot-select-card {
  background: rgba(121,184,255,.14);
  border-color: rgba(121,184,255,.45);
}
.bot-pill {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(121,184,255,.24);
  border: 1px solid rgba(121,184,255,.55);
  color: #d8ebff;
  font-size: .82rem;
  letter-spacing: .04em;
}
.player-card.bot-player::before {
  content: "🤖 BOT";
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(121,184,255,.22);
  border: 1px solid rgba(121,184,255,.48);
  color: #d8ebff;
  font-weight: 1000;
  font-size: .82rem;
  letter-spacing: .06em;
}
.player-card.bot-player header {
  padding-top: 28px;
}
.player-card.bot-player.active::before {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.48);
  color: #fff;
}


/* v0.3.0: Startreihenfolge und Folge-Leg-Reihenfolge */
.order-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.player-order-list {
  display: grid;
  gap: 10px;
}
.player-order-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 150px);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  cursor: pointer;
}
.player-order-card:has(.player-check:checked) {
  border-color: rgba(88,214,141,.7);
  background: rgba(88,214,141,.13);
}
.player-check { width: 26px; height: 26px; }
.player-order-name {
  display: grid;
  gap: 4px;
  font-weight: 900;
  min-width: 0;
}
.player-order-name small { color: var(--muted); font-weight: 800; }
.start-order-box {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 900;
}
.start-order-input {
  padding: 10px;
  text-align: center;
  font-weight: 1000;
}
.start-order-input:disabled { opacity: .45; }

@media (max-width: 620px) {
  .player-order-card { grid-template-columns: auto 1fr; }
  .start-order-box { grid-column: 2; }
}

/* v0.4.6: Startreihenfolge per ↑/↓ verschieben */
.player-order-card {
  grid-template-columns: minmax(0, 1fr) auto minmax(96px, 120px);
}
.player-order-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
}
.order-move-box {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.move-order {
  min-width: 44px;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 1000;
  color: #06121f;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.move-order:disabled {
  cursor: not-allowed;
  opacity: .28;
  filter: grayscale(1);
  box-shadow: none;
}
.player-order-card.is-selected-player .start-order-box {
  color: var(--accent2);
}
.player-order-card.is-random-order .order-move-box,
.player-order-card.is-random-order .start-order-box {
  opacity: .5;
}

@media (max-width: 620px) {
  .player-order-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .order-move-box {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
  }
  .start-order-box {
    grid-column: 1;
  }
}


/* v0.3.0: sichtbarere Startreihenfolge und Dropdown-Kontrast */
.version-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(121,184,255,.16);
  color: #d8ebff;
  border: 1px solid rgba(121,184,255,.35);
  font-size: .8rem;
  font-weight: 900;
}
.selected-order-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 12px;
  border: 1px dashed rgba(121,184,255,.45);
  background: rgba(121,184,255,.09);
  border-radius: 15px;
  color: var(--text);
  font-weight: 800;
}
.selected-order-preview.empty {
  color: var(--muted);
  font-weight: 700;
}
.selected-order-preview span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
.selected-order-preview strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #06121f;
}
.selected-order-preview em {
  color: var(--warn);
  font-style: normal;
  font-weight: 900;
}
.player-order-card.is-selected-player {
  border-color: rgba(88,214,141,.85);
  background: rgba(88,214,141,.16);
}
.move-order {
  min-width: 54px;
  padding: 0 10px;
  font-size: 1.45rem;
}
@media (max-width: 620px) {
  .move-order {
    min-width: 50px;
    font-size: 1.25rem;
  }
}


/* v0.3.0: Deutlich sichtbare Startreihenfolge mit großen Verschiebe-Buttons */
.selected-order-panel {
  margin: 14px 0 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(121,184,255,.28);
  background: rgba(6,18,31,.55);
}
.selected-order-panel h3 {
  margin: 0 0 6px;
}
.selected-order-panel .small {
  font-size: .92rem;
  margin: 0 0 10px;
}
.selected-order-controls {
  display: grid;
  gap: 9px;
}
.selected-order-controls.empty {
  color: var(--muted);
  font-weight: 800;
}
.selected-order-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
.selected-order-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: #06121f;
  font-weight: 1000;
}
.selected-order-player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 1000;
}
.move-order.big-move {
  min-width: 58px;
  height: 42px;
  font-size: 1.45rem;
}
@media (max-width: 620px) {
  .selected-order-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .selected-order-row .big-move {
    grid-column: span 1;
    width: 100%;
  }
}


/* v0.3.0: sichtbare Versionsinfo und noch klarerer Reihenfolge-Bereich */
.tiny-version { margin: 2px 0 0; font-size: .75rem; color: var(--muted); font-weight: 800; }
.selected-order-panel { outline: 2px solid rgba(121,184,255,.18); }
.selected-order-controls.empty::before { content: "☑️ Wähle unten Spieler aus, dann erscheinen hier die Verschiebe-Buttons."; }
.selected-order-controls.empty { font-size: 1rem; }

/* v0.3.0: getrennte Anzeige-/Eingabeseiten */
.version-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(121,184,255,.18);
  border: 1px solid rgba(121,184,255,.38);
  color: #d8ebff;
  font-size: .82rem;
  font-weight: 1000;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.role-card {
  display: grid;
  gap: 14px;
  align-content: start;
}
.role-card h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.primary-role {
  border-color: rgba(88,214,141,.42);
  background:
    radial-gradient(circle at 15% 0%, rgba(88, 214, 141, .22), transparent 42%),
    linear-gradient(180deg, var(--panel), #1c2331);
}
.copy-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.copy-line input {
  font-size: .9rem;
  color: #111827;
  background: #fff;
}
.active-role {
  background: var(--accent2) !important;
  color: #06111e !important;
}
.role-link { min-height: 42px; padding: 10px 12px; }

.mode-display .game-layout {
  grid-template-columns: 1fr;
  padding: 14px;
}
.mode-display .game-message {
  margin-bottom: 14px;
}
.mode-display .players-grid {
  min-height: calc(100vh - 190px);
}
.mode-display .player-card {
  min-height: clamp(220px, calc((100vh - 230px) / 2), 420px);
}
.mode-display .players-grid[data-count="1"] .player-card,
.mode-display .players-grid[data-count="2"] .player-card {
  min-height: clamp(380px, calc(100vh - 230px), 720px);
}
.mode-display .score {
  font-size: clamp(5rem, 11vw, 14rem);
}
.mode-display .players-grid[data-count="3"] .score,
.mode-display .players-grid[data-count="4"] .score {
  font-size: clamp(4.5rem, 9vw, 11rem);
}
.mode-display .game-topbar .top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mode-display .touch-panel { display: none; }

.mode-input .game-layout {
  grid-template-columns: minmax(260px, 1fr) minmax(330px, 520px);
}
.mode-input .touch-panel {
  top: 92px;
}
.mode-input .players-grid {
  grid-template-columns: 1fr !important;
}
.mode-input .player-card {
  min-height: 125px;
  grid-template-rows: auto auto auto;
}
.mode-input .score {
  justify-self: start;
  font-size: clamp(3.5rem, 9vw, 7rem);
}
.mode-input .darts-row span {
  min-width: 42px;
}

@media (max-width: 920px) {
  .copy-line { grid-template-columns: 1fr; }
  .mode-input .game-layout { grid-template-columns: 1fr; }
  .mode-input .touch-panel { order: 1; position: static; }
  .mode-input .score-section { order: 2; }
  .mode-input .players-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  .role-link { flex: 1 1 30%; }
  .game-topbar .top-actions { flex-wrap: wrap; }
  .mode-display .players-grid[data-count] { grid-template-columns: 1fr; }
}

@media (max-height: 720px) and (min-width: 881px) {
  .mode-display .players-grid {
    min-height: calc(100vh - 160px);
  }
  .mode-display .player-card {
    min-height: clamp(170px, calc((100vh - 200px) / 2), 330px);
  }
  .mode-display .score {
    font-size: clamp(4rem, 9vw, 11rem);
  }
}

/* v0.3.0: einfache Verbindung per Spiel-ID */
.join-card {
  display: grid;
  gap: 14px;
}
.join-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.join-form label {
  display: grid;
  gap: 6px;
  font-weight: 900;
}
.join-form input,
.join-form select {
  min-height: 54px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #111827;
  background: #fff;
}
.error-box {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 95, 86, .14);
  border: 1px solid rgba(255, 95, 86, .38);
  color: #ffd7d4;
  font-weight: 900;
}
.screen-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 22px;
}
.game-id-box,
.game-id-chip {
  border: 1px solid rgba(121,184,255,.42);
  background: radial-gradient(circle at 50% 0%, rgba(121,184,255,.28), rgba(17,24,39,.92));
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  color: #fff;
}
.game-id-box {
  min-width: 230px;
  padding: 18px 22px;
  border-radius: 24px;
  text-align: center;
}
.game-id-box span,
.game-id-chip span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: #bcdcff;
  font-weight: 1000;
}
.game-id-box strong {
  display: block;
  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: .95;
  margin: 6px 0 8px;
}
.game-id-box small {
  display: block;
  color: #d8ebff;
  font-weight: 800;
  word-break: break-word;
}
.game-id-chip {
  padding: 8px 14px;
  border-radius: 18px;
  text-align: center;
  min-width: 108px;
}
.game-id-chip strong {
  display: block;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1;
}
.mode-display .game-id-chip strong {
  font-size: clamp(3rem, 6vw, 5.5rem);
}
@media (max-width: 720px) {
  .join-form,
  .screen-hero {
    grid-template-columns: 1fr;
  }
  .game-id-box {
    width: 100%;
  }
  .game-id-chip {
    order: 3;
    width: 100%;
  }
}


/* v0.3.0: Handy-Eingabe kompakter, TV-Anzeige etwas flacher */
.mode-input .game-topbar {
  padding: 10px 12px;
  gap: 10px;
}
.mode-input .game-topbar h1 {
  font-size: clamp(1.05rem, 4.5vw, 1.5rem);
}
.mode-input .game-topbar p {
  margin-top: 2px;
}
.mode-input .game-id-chip {
  min-width: 82px;
  padding: 6px 10px;
  border-radius: 14px;
}
.mode-input .game-id-chip span {
  font-size: .62rem;
}
.mode-input .game-id-chip strong {
  font-size: clamp(1.6rem, 8vw, 2.6rem);
}
.mode-input .top-actions {
  gap: 6px;
}
.mode-input .top-actions .button,
.mode-input .back {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: .9rem;
}
.mode-input .touch-panel {
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
}
.mode-input .touch-panel h2 {
  font-size: 1.15rem;
}
.mode-input .multiplier,
.mode-input .dart-button {
  min-height: 46px;
  border-radius: 12px;
  font-size: .98rem;
}
.mode-input .number-grid {
  gap: 6px;
}
.mode-input .special-grid,
.mode-input .multiplier-row {
  gap: 6px;
}
.mode-input .button.big {
  min-height: 46px;
  font-size: .98rem;
}

.mode-display .game-topbar {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mode-display .game-topbar h1 {
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
}
.mode-display .game-topbar p {
  margin-top: 3px;
}
.mode-display .game-layout {
  padding: 10px 12px;
}
.mode-display .game-message {
  min-height: 40px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
}
.mode-display .players-grid {
  gap: 10px;
  min-height: 0;
}
.mode-display .player-card {
  padding: clamp(10px, 1.2vw, 18px);
  gap: 6px;
  min-height: clamp(170px, calc((100vh - 210px) / 2), 330px);
}
.mode-display .players-grid[data-count="1"] .player-card,
.mode-display .players-grid[data-count="2"] .player-card {
  min-height: clamp(270px, calc(100vh - 215px), 560px);
}
.mode-display .players-grid[data-count="2"] .score {
  font-size: clamp(4.8rem, 10vw, 11rem);
}
.mode-display .turn-points {
  font-size: clamp(.9rem, 1.2vw, 1.1rem);
}
.mode-display .darts-row span {
  min-width: 42px;
  padding: 7px 9px;
}

@media (max-width: 920px) {
  .mode-input .game-layout {
    padding: 8px;
    gap: 8px;
  }
  .mode-input .score-section {
    order: 2;
  }
  .mode-input .touch-panel {
    order: 1;
  }
}

@media (max-width: 720px) {
  .mode-input .game-topbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .mode-input .game-topbar .back {
    display: none;
  }
  .mode-input .game-topbar > div:nth-of-type(1) {
    min-width: 0;
  }
  .mode-input #gameSubline,
  .mode-input .tiny-version {
    display: none;
  }
  .mode-input .game-id-chip {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    order: initial;
  }
  .mode-input .top-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .mode-input .top-actions .role-link {
    display: none;
  }
  .mode-input #fullscreenBtn,
  .mode-input #undoBtnTop,
  .mode-input #nextLegBtnTop {
    min-height: 34px;
    padding: 6px 8px;
    font-size: .82rem;
  }
  .mode-input .touch-panel h2 {
    display: none;
  }
  .mode-input .multiplier,
  .mode-input .dart-button {
    min-height: 42px;
    font-size: .92rem;
  }
  .mode-input .number-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .mode-input .score-section {
    margin-top: 4px;
  }
  .mode-input .game-message {
    min-height: 34px;
    padding: 7px 10px;
    margin-bottom: 8px;
    font-size: .95rem;
  }
  .mode-input .player-card {
    min-height: 96px;
    padding: 10px;
    gap: 4px;
  }
  .mode-input .player-card h2 {
    font-size: 1.05rem;
  }
  .mode-input .small-meta,
  .mode-input .turn-points,
  .mode-input .darts-row {
    font-size: .8rem;
  }
  .mode-input .score {
    font-size: clamp(2.4rem, 16vw, 4.6rem);
  }
}

@media (max-height: 620px) and (max-width: 920px) {
  .mode-input .game-topbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .mode-input .top-actions {
    display: none;
  }
  .mode-input .touch-panel {
    padding: 8px;
  }
  .mode-input .multiplier,
  .mode-input .dart-button {
    min-height: 36px;
    font-size: .86rem;
  }
  .mode-input .button.big {
    min-height: 38px;
  }
}

/* v0.3.0: Autodarts-Diagnose */
.notice {
  margin: 16px auto;
  padding: 14px 18px;
  max-width: 1180px;
  border-radius: 16px;
  font-weight: 800;
}
.notice.success {
  background: rgba(55, 180, 120, 0.18);
  border: 1px solid rgba(55, 180, 120, 0.45);
}
.notice.error {
  background: rgba(220, 70, 70, 0.18);
  border: 1px solid rgba(220, 70, 70, 0.45);
}
.autodarts-card code,
.autodarts-warning code {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px 6px;
}
.debug-box {
  min-height: 240px;
  max-height: 520px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 16px;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* v0.3.0 Autodarts Diagnose */
.autodarts-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 0.7rem;
    margin: 1rem 0;
}
.autodarts-status-grid > div {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 0.8rem;
    background: rgba(255,255,255,0.05);
}
.autodarts-status-grid span {
    display: block;
    color: var(--muted, #9aa4b2);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.autodarts-status-grid strong {
    font-size: 1.3rem;
}
.small-debug {
    max-height: 220px;
    overflow: auto;
}
.autodarts-hint {
    margin: 0.2rem 0 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: rgba(48, 209, 88, 0.13);
    border: 1px solid rgba(48, 209, 88, 0.25);
    font-weight: 700;
}
.autodarts-hint.error {
    background: rgba(255, 69, 58, 0.14);
    border-color: rgba(255, 69, 58, 0.35);
}
.button.selected#autodartsToggleBtn,
#autodartsToggleBtn.selected {
    background: rgba(48, 209, 88, 0.18);
    border-color: rgba(48, 209, 88, 0.45);
}
@media (max-width: 760px) {
    .autodarts-status-grid {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }
}


/* v0.3.4: Wurfwert ohne Beschriftung und kompaktere Dart-/Wurfzeile */
.throw-line {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.throw-line .darts-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: stretch;
}
.dart-slot,
.darts-row span {
  min-width: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  text-align: center;
  font-weight: 1000;
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  line-height: 1.05;
}
.dart-slot.dart-hit {
  background: var(--dart-hit-bg);
  border-color: var(--dart-hit-border);
  color: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.dart-slot.dart-suggest {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(232,238,247,.72);
}
.dart-slot.dart-empty {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(232,238,247,.45);
}
.throw-line .turn-points {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 2px solid rgba(88,214,141,.35);
  background: rgba(88,214,141,.13);
  color: var(--text);
  font-size: clamp(1.45rem, 2.45vw, 2.45rem);
  font-weight: 1000;
  line-height: 1;
}
.player-card.active .dart-slot.dart-suggest {
  border-color: rgba(246,196,83,.45);
  color: rgba(255,240,197,.86);
}
.mode-display .throw-line {
  gap: 11px;
}
.mode-display .dart-slot,
.mode-display .darts-row span {
  min-width: 62px;
  padding: 11px 13px;
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
}
.mode-display .throw-line .turn-points {
  min-width: 105px;
  font-size: clamp(1.75rem, 3vw, 2.9rem);
}
.mode-input .throw-line {
  gap: 6px;
}
.mode-input .dart-slot,
.mode-input .darts-row span {
  min-width: 36px;
  padding: 5px 6px;
  border-radius: 9px;
  font-size: .9rem;
}
.mode-input .throw-line .turn-points {
  min-width: 48px;
  padding: 5px 7px;
  border-radius: 10px;
  font-size: 1rem;
}
@media (max-width: 700px) {
  .throw-line .darts-row { flex-wrap: wrap; }
  .throw-line .turn-points { min-width: 110px; }
}


/* v0.3.5 Sprachausgabe */
.speech-toggle.selected {
  background: rgba(121, 184, 255, .23);
  border: 1px solid rgba(121, 184, 255, .45);
  color: var(--text);
}

.mode-input .speech-toggle {
  display: none;
}

@media (max-width: 900px) {
  .speech-toggle { min-width: 0; }
}

/* v0.3.7: Anzeige-/Ablaufoptionen */
.setting-check {
  align-self: stretch;
  min-height: 62px;
  margin: 0;
}
.setting-check span {
  font-weight: 900;
}

/* v0.4.3: Neues Spiel + rechtsbündige Wurfanzeige */
.throw-line {
  justify-content: flex-end;
  width: 100%;
}
.throw-line .darts-row {
  justify-content: flex-end;
}
.dart-slot,
.darts-row span,
.throw-line .turn-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#restartSameGameBtn {
  background: rgba(88,214,141,.16);
  border-color: rgba(88,214,141,.42);
  color: var(--text);
  font-weight: 1000;
}

/* v0.4.3: Darts links, Wurf rechts, etwas mehr Abstand zur Hauptzahl */
.throw-line {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: clamp(6px, 0.9vw, 14px);
}
.throw-line .darts-row {
  justify-content: flex-start;
  margin-right: auto;
}
.throw-line .turn-points {
  margin-left: auto;
  text-align: right;
}
.dart-slot,
.darts-row span,
.throw-line .turn-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#restartSameGameBtn {
  background: rgba(88,214,141,.16);
  border-color: rgba(88,214,141,.42);
  color: var(--text);
  font-weight: 1000;
}

/* v0.4.3 Sprachausgabe-Einstellungen */
.speech-settings-card {
  max-width: 1100px;
  margin: 0 auto;
}
.speech-settings-rows {
  display: grid;
  gap: 12px;
}
.speech-setting-row {
  display: grid;
  grid-template-columns: minmax(210px, 280px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.speech-enable {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.speech-enable input {
  width: 24px;
  height: 24px;
}
.speech-template-input {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: #fff;
  color: #101827;
  font-size: 1.05rem;
  padding: 10px 12px;
}
@media (max-width: 760px) {
  .speech-setting-row { grid-template-columns: 1fr; }
}


/* v0.4.6: Einstellungsseite und Farbschemata */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.settings-tile {
  box-shadow: none;
  transition: transform .15s ease, border-color .15s ease;
}
.settings-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.settings-tile h3 { margin: 0 0 8px; font-size: 1.35rem; }
.settings-tile p { margin: 0; color: var(--muted); }
.success-box {
  padding: 16px;
  border-radius: 14px;
  background: rgba(88,214,141,.18);
  border: 1px solid rgba(88,214,141,.35);
  margin-bottom: 14px;
  font-weight: 800;
}
.settings-url-form { margin-top: 12px; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  color: var(--muted);
}
.info-grid code { color: var(--text); overflow-wrap: anywhere; }
.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.theme-choice {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.theme-choice input { width: 24px; height: 24px; }
.theme-choice.active-theme-choice { border-color: var(--accent); box-shadow: 0 0 0 4px var(--active-ring); }
.theme-preview-box {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.preview-card, .preview-dart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 1000;
}
.theme-preview-standard .normal { background: #202737; color: #f4f7fb; }
.theme-preview-standard .active { background: #050505; color: #ffe600; border: 2px solid #ffe600; }
.theme-preview-standard .preview-dart { background: rgba(66,153,225,.45); color: #fff; border: 2px solid rgba(144,205,244,.8); }
.theme-preview-outdoor .normal { background: #0b1220; color: #fff; }
.theme-preview-outdoor .active { background: #000; color: #ffff00; border: 2px solid #ffff00; }
.theme-preview-outdoor .preview-dart { background: #00e5ff; color: #000; border: 2px solid #fff; }
.theme-preview-contrast .normal { background: #000; color: #fff; border: 2px solid #fff; }
.theme-preview-contrast .active { background: #ffff00; color: #000; }
.theme-preview-contrast .preview-dart { background: #00ffff; color: #000; border: 2px solid #fff; }
.theme-preview-yellow_dark .normal { background: #101010; color: #fff7b0; }
.theme-preview-yellow_dark .active { background: #000; color: #ffeb00; border: 2px solid #ffeb00; }
.theme-preview-yellow_dark .preview-dart { background: rgba(255,221,0,.24); color: #ffeb00; border: 2px solid #ffeb00; }
.theme-preview-neon .normal { background: #071426; color: #e9fbff; }
.theme-preview-neon .active { background: #000; color: #fff04a; border: 2px solid #00f5ff; }
.theme-preview-neon .preview-dart { background: rgba(255,77,255,.32); color: #fff; border: 2px solid #00f5ff; }
.theme-preview-ice .normal { background: #0b2036; color: #f1fbff; }
.theme-preview-ice .active { background: #001a2e; color: #fff36b; border: 2px solid #7dd3fc; }
.theme-preview-ice .preview-dart { background: rgba(125,211,252,.36); color: #f1fbff; border: 2px solid #e0f7ff; }
.theme-preview-warm .normal { background: #2a1406; color: #fff4df; }
.theme-preview-warm .active { background: #000; color: #ffe56b; border: 2px solid #ffb000; }
.theme-preview-warm .preview-dart { background: rgba(255,107,53,.32); color: #fff4df; border: 2px solid #ffd166; }
.theme-preview-bright .normal { background: #fff; color: #111827; border: 2px solid #d1d5db; }
.theme-preview-bright .active { background: #111827; color: #ffeb3b; border: 2px solid #f59e0b; }
.theme-preview-bright .preview-dart { background: rgba(37,99,235,.22); color: #111827; border: 2px solid #2563eb; }
.theme-preview-dartboard .normal { background: #13251a; color: #fff; }
.theme-preview-dartboard .active { background: #000; color: #ffeb3b; border: 2px solid #f44336; }
.theme-preview-dartboard .preview-dart { background: #4caf50; color: #fff; border: 2px solid #fff; }
.theme-preview-steel .normal { background: #102033; color: #f2f8ff; }
.theme-preview-steel .active { background: #03101d; color: #e8fbff; border: 2px solid #64d2ff; }
.theme-preview-steel .preview-dart { background: rgba(100,210,255,.28); color: #f2f8ff; border: 2px solid #c7f2ff; }
.theme-preview-royal .normal { background: #221134; color: #fff7ff; }
.theme-preview-royal .active { background: #09010f; color: #fff4b8; border: 2px solid #c084fc; }
.theme-preview-royal .preview-dart { background: rgba(240,171,252,.26); color: #fff7ff; border: 2px solid #f5d0fe; }
.theme-preview-sunset .normal { background: #2b0d08; color: #fff6ee; }
.theme-preview-sunset .active { background: #090100; color: #fff0b8; border: 2px solid #ffb000; }
.theme-preview-sunset .preview-dart { background: rgba(255,77,77,.32); color: #fff6ee; border: 2px solid #ffd166; }
.theme-preview-bvb .normal { background: #111; color: #fde100; }
.theme-preview-bvb .active { background: #000; color: #fde100; border: 2px solid #fde100; }
.theme-preview-bvb .preview-dart { background: rgba(253,225,0,.20); color: #fde100; border: 2px solid #fde100; }
.theme-preview-bayern .normal { background: #210814; color: #fff5f7; }
.theme-preview-bayern .active { background: #000; color: #fff; border: 2px solid #dc052d; }
.theme-preview-bayern .preview-dart { background: rgba(255,255,255,.22); color: #fff; border: 2px solid #fff; }
.theme-preview-schalke .normal { background: #06172c; color: #f3f9ff; }
.theme-preview-schalke .active { background: #000; color: #fff36b; border: 2px solid #005a9c; }
.theme-preview-schalke .preview-dart { background: rgba(255,255,255,.24); color: #fff; border: 2px solid #fff; }
.player-card.active .small-meta,
.player-card.active .turn-points {
  color: var(--active-text);
}
.player-card.active .score {
  color: var(--active-text);
}

/* v0.5.0 Tactics-Setup und Board-Vorschau */
.tactics-idea-card {
    overflow: hidden;
}

.tactics-preview {
    display: grid;
    grid-template-columns: minmax(64px, .55fr) repeat(3, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 18px;
    align-items: stretch;
}

.tactics-preview-head,
.tactics-preview-num,
.tactics-preview-cell {
    border: 2px solid var(--card-border, rgba(255,255,255,.18));
    border-radius: 12px;
    padding: 10px;
    background: rgba(0,0,0,.22);
    text-align: center;
    font-weight: 900;
}

.tactics-preview-head {
    color: var(--muted-text, #cbd5e1);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tactics-preview-num {
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--score-text, #fff);
}

.tactics-preview-cell {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.tactics-preview-cell .x {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    border: 2px solid rgba(255,255,255,.22);
}

.tactics-preview-cell .x.full {
    background: var(--dart-hit-bg, #facc15);
    color: var(--dart-hit-text, #111);
    border-color: var(--active-border, #fff);
}

.tactics-preview-cell .x.ghost {
    color: rgba(255,255,255,.28);
}

.tactics-preview .active-preview {
    background: var(--active-player-bg, #111827);
    color: var(--active-player-text, #facc15);
    border-color: var(--active-border, #facc15);
    box-shadow: 0 0 0 3px rgba(250,204,21,.2);
}

.tactics-rule-card {
    border: 2px solid var(--card-border, rgba(255,255,255,.16));
    border-radius: 18px;
    padding: 18px;
    background: rgba(0,0,0,.18);
}

.tactics-rule-card ul {
    margin: 10px 0 0;
    padding-left: 22px;
}

@media (max-width: 780px) {
    .tactics-preview {
        grid-template-columns: 58px repeat(3, minmax(80px, 1fr));
        gap: 6px;
        overflow-x: auto;
    }
    .tactics-preview-head,
    .tactics-preview-num,
    .tactics-preview-cell {
        padding: 7px;
        border-radius: 10px;
    }
    .tactics-preview-cell .x {
        width: 26px;
        height: 26px;
        font-size: 1.5rem;
    }
}

.speech-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.continue-card {
    border: 2px solid var(--active-border);
    background: color-mix(in srgb, var(--card-bg) 82%, var(--active-bg) 18%);
}
.autodarts-hint.error {
    font-weight: 900;
}

/* v0.5.2 Turniere / Liga */
.tournament-create-form {
    gap: 1rem;
}
.participant-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
    margin: .6rem 0 1rem;
}
.participant-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem;
    border: 2px solid var(--border-soft, rgba(255,255,255,.18));
    border-radius: 14px;
    background: var(--card-bg-soft, rgba(255,255,255,.06));
    cursor: pointer;
}
.participant-check input {
    transform: scale(1.25);
}
.tournament-list {
    display: grid;
    gap: .75rem;
}
.tournament-list-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg-soft, rgba(255,255,255,.06));
    border: 2px solid var(--border-soft, rgba(255,255,255,.14));
}
.tournament-list-item:hover {
    border-color: var(--accent, #ffd400);
}
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.table-wrap {
    overflow-x: auto;
}
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
}
.standings-table th,
.standings-table td {
    padding: .65rem .55rem;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.15));
    text-align: center;
}
.standings-table th {
    color: var(--muted-fg, #bbb);
    font-weight: 700;
}
.standings-table .name-cell {
    text-align: left;
    font-weight: 800;
}
.round-block {
    margin-top: 1.2rem;
}
.round-block h3 {
    margin-bottom: .65rem;
}
.match-list {
    display: grid;
    gap: .75rem;
}
.match-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    padding: .9rem;
    border-radius: 16px;
    border: 2px solid var(--border-soft, rgba(255,255,255,.16));
    background: var(--card-bg-soft, rgba(255,255,255,.06));
}
.match-card.status-running {
    border-color: var(--accent, #ffd400);
}
.match-card.status-finished {
    opacity: .82;
}
.match-main {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: baseline;
    font-size: 1.12rem;
}
.match-player {
    font-weight: 900;
}
.match-vs,
.match-meta {
    color: var(--muted-fg, #bbb);
}
.match-actions form {
    margin: 0;
}
@media (max-width: 760px) {
    .match-card {
        grid-template-columns: 1fr;
    }
    .tournament-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* v0.5.3 Tactics-Anzeige */
.players-grid.tactics-grid {
  align-items: stretch;
}
.tactics-player-card .score.tactics-points {
  font-size: clamp(2.8rem, 6vw, 6.5rem);
}
.tactics-board-mini {
  display: grid;
  gap: .35rem;
  margin-top: .8rem;
}
.tactics-cell {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: .45rem;
  padding: .22rem .35rem;
  border: 1px solid var(--panel-border, rgba(255,255,255,.2));
  border-radius: .55rem;
  background: rgba(0,0,0,.18);
}
.tactics-target-label {
  font-weight: 900;
  text-align: right;
  color: var(--accent, #ffd54f);
}
.tactics-xs {
  display: flex;
  gap: .18rem;
  flex-wrap: wrap;
}
.tactics-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: .3rem;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.28);
  font-weight: 900;
  font-size: 1rem;
}
.tactics-x.hit {
  color: #0b0b0b;
  background: var(--accent, #ffd54f);
  border-color: var(--accent, #ffd54f);
}
.player-card.active .tactics-x.hit {
  background: #fff;
  border-color: #fff;
  color: #000;
}
@media (max-width: 900px) {
  .tactics-cell { grid-template-columns: 2.6rem 1fr; }
  .tactics-x { width: 1.05rem; height: 1.05rem; }
}

/* v0.5.4 Teams */
.team-active-player {
    margin-top: .45rem;
    padding: .35rem .55rem;
    border: 2px solid var(--accent, #ffd54f);
    background: rgba(255, 213, 79, .12);
    border-radius: .7rem;
    font-size: clamp(.95rem, 1.2vw, 1.25rem);
    color: var(--text, #fff);
}
.player-card.active .team-active-player,
.team-active-player.hot {
    background: var(--active-bg, #ffd54f);
    color: var(--active-text, #101010);
    border-color: var(--active-border, #ffffff);
    font-weight: 900;
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    text-transform: uppercase;
}
.team-roster {
    margin-top: .25rem;
    font-size: .85rem;
    opacity: .85;
}
.team-last-thrower {
    margin-top: .25rem;
    font-size: .85rem;
    opacity: .95;
}
.team-edit-card {
    border: 1px solid var(--border, rgba(255,255,255,.18));
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,.04);
}
.team-roster-line {
    margin: .6rem 0;
}
.compact-check-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .45rem;
}
.small-check {
    padding: .45rem .55rem;
}
.team-select-card small {
    display: block;
    margin-top: .25rem;
    opacity: .8;
    line-height: 1.25;
}
.participant-mode-card {
    max-width: 240px;
}
.participant-panel[hidden] {
    display: none !important;
}

/* v0.5.6: Tactics als echtes Board mit Spielern/Teams als Spalten */
.players-grid.tactics-grid {
  display: block;
  min-height: 0;
}
.tactics-layout {
  display: grid;
  gap: 14px;
}
.tactics-scorebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.tactics-score-card {
  min-height: 0 !important;
  grid-template-rows: auto auto auto;
  padding: clamp(12px, 1.2vw, 18px);
}
.tactics-score-card h2 {
  font-size: clamp(1.15rem, 1.8vw, 2.2rem);
  padding-right: 5.5rem;
}
.tactics-score-card .score.tactics-points {
  justify-self: start;
  font-size: clamp(2.3rem, 4.5vw, 5.2rem);
  line-height: .95;
}
.tactics-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow);
}
.tactics-table {
  width: 100%;
  min-width: min(980px, 100%);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.tactics-table th,
.tactics-table td {
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: clamp(.42rem, .75vw, .72rem);
  text-align: center;
  vertical-align: middle;
}
.tactics-table tr:last-child th,
.tactics-table tr:last-child td {
  border-bottom: 0;
}
.tactics-table th:last-child,
.tactics-table td:last-child {
  border-right: 0;
}
.tactics-corner,
.tactics-target-head,
.tactics-points-row th {
  width: clamp(58px, 7vw, 92px);
  color: var(--accent, #ffd54f);
  font-weight: 1000;
  background: rgba(0,0,0,.28);
}
.tactics-target-head {
  font-size: clamp(1.25rem, 2.1vw, 2.4rem);
}
.tactics-player-head {
  background: rgba(255,255,255,.06);
}
.tactics-head-name {
  font-size: clamp(1rem, 1.55vw, 1.8rem);
  font-weight: 1000;
}
.tactics-active-member {
  margin-top: .25rem;
  font-size: clamp(.82rem, 1vw, 1.05rem);
  color: var(--muted, #cbd5e1);
  font-weight: 800;
}
.tactics-player-head.active-col,
.tactics-table-cell.active-col,
.tactics-points-cell.active-col {
  background: color-mix(in srgb, var(--active-panel) 86%, #000 14%);
  color: var(--active-text);
  box-shadow: inset 0 0 0 3px var(--active-border, #ffd54f);
}
.tactics-player-head.active-col .tactics-active-member {
  color: var(--active-text);
}
.tactics-points-cell {
  font-size: clamp(1.25rem, 2vw, 2.3rem);
  font-weight: 1000;
  background: rgba(255,255,255,.045);
}
.tactics-table-cell {
  background: rgba(255,255,255,.035);
}
.tactics-table-cell.closed {
  background: rgba(88,214,141,.12);
}
.tactics-table .tactics-xs {
  justify-content: center;
  gap: .28rem;
}
.tactics-table .tactics-x {
  width: clamp(1.25rem, 2vw, 2rem);
  height: clamp(1.25rem, 2vw, 2rem);
  font-size: clamp(1rem, 1.65vw, 1.55rem);
  border-width: 2px;
}
.tactics-table-cell.active-col .tactics-x.hit {
  background: var(--active-text, #fff);
  border-color: var(--active-text, #fff);
  color: #000;
}
.mode-display .tactics-scorebar {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mode-display .tactics-table .tactics-x {
  width: clamp(1.45rem, 2.25vw, 2.35rem);
  height: clamp(1.45rem, 2.25vw, 2.35rem);
}
.mode-input .tactics-scorebar {
  grid-template-columns: 1fr;
}
.mode-input .tactics-table {
  min-width: 620px;
}
@media (max-width: 720px) {
  .tactics-scorebar { grid-template-columns: 1fr; }
  .tactics-table { min-width: 720px; }
  .tactics-score-card h2 { padding-right: 0; }
}


/* v0.5.7: Tactics muss auch auf 16:9/kleinen Monitoren ohne Scrollen passen */
.game-body.game-type-tactics {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.game-type-tactics .game-topbar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) auto minmax(360px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  min-height: 0;
}
.game-type-tactics .game-topbar h1 {
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1.05;
  max-width: 36rem;
}
.game-type-tactics .game-topbar p {
  margin-top: 2px;
  font-size: clamp(.7rem, .9vw, .9rem);
  line-height: 1.15;
}
.game-type-tactics .tiny-version {
  display: none;
}
.game-type-tactics .back {
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 10px;
}
.game-type-tactics .game-id-chip {
  min-width: 72px;
  padding: 5px 8px;
  border-radius: 12px;
}
.game-type-tactics .game-id-chip span {
  font-size: .55rem;
  letter-spacing: .08em;
}
.game-type-tactics .game-id-chip strong {
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
}
.game-type-tactics .top-actions {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.game-type-tactics .top-actions .button,
.game-type-tactics .top-actions button.button {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: clamp(.72rem, .9vw, .9rem);
}
.game-type-tactics .game-layout {
  height: calc(100vh - 88px);
  grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 340px);
  gap: 8px;
  padding: 8px;
  align-items: stretch;
  overflow: hidden;
}
.game-type-tactics.mode-display .game-layout {
  grid-template-columns: 1fr;
  height: calc(100vh - 88px);
}
.game-type-tactics .score-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.game-type-tactics .game-message {
  min-height: 28px;
  padding: 5px 9px;
  margin-bottom: 5px;
  border-radius: 10px;
  font-size: clamp(.78rem, 1.05vw, 1rem);
  line-height: 1.15;
}
.game-type-tactics .autodarts-hint-top {
  margin: 0 0 4px;
  padding: 4px 8px;
  font-size: .78rem;
}
.game-type-tactics .players-grid.tactics-grid {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.game-type-tactics .tactics-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
/* Die Punkte stehen bereits in der Tabellenzeile. Die Zusatzkarten kosten auf dem TV zu viel Höhe. */
.game-type-tactics .tactics-scorebar {
  display: none;
}
.game-type-tactics .tactics-table-wrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  border-width: 1px;
}
.game-type-tactics .tactics-table {
  height: 100%;
  min-width: 0;
  table-layout: fixed;
}
.game-type-tactics .tactics-table th,
.game-type-tactics .tactics-table td {
  padding: .22rem .28rem;
  line-height: 1.05;
}
.game-type-tactics .tactics-corner,
.game-type-tactics .tactics-target-head,
.game-type-tactics .tactics-points-row th {
  width: clamp(48px, 5.2vw, 74px);
}
.game-type-tactics .tactics-target-head {
  font-size: clamp(.95rem, 2.8vh, 1.75rem);
}
.game-type-tactics .tactics-head-name {
  font-size: clamp(.72rem, 1.25vw, 1.05rem);
  line-height: 1.05;
}
.game-type-tactics .tactics-active-member {
  margin-top: .08rem;
  font-size: clamp(.58rem, .82vw, .78rem);
  line-height: 1.05;
}
.game-type-tactics .tactics-points-cell {
  font-size: clamp(.95rem, 2.5vh, 1.6rem);
}
.game-type-tactics .tactics-table .tactics-xs {
  gap: .18rem;
  flex-wrap: nowrap;
}
.game-type-tactics .tactics-table .tactics-x {
  width: clamp(.82rem, 2.45vh, 1.35rem);
  height: clamp(.82rem, 2.45vh, 1.35rem);
  font-size: clamp(.72rem, 1.85vh, 1.05rem);
  border-width: 1px;
  border-radius: 5px;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-table th,
.game-type-tactics .tactics-layout.tactics-medium .tactics-table td {
  padding: .14rem .2rem;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-table .tactics-x {
  width: clamp(.72rem, 2vh, 1.05rem);
  height: clamp(.72rem, 2vh, 1.05rem);
  font-size: clamp(.62rem, 1.5vh, .9rem);
}
.game-type-tactics .tactics-layout.tactics-many .tactics-table th,
.game-type-tactics .tactics-layout.tactics-many .tactics-table td {
  padding: .05rem .12rem;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-target-head {
  font-size: clamp(.72rem, 1.8vh, 1.05rem);
}
.game-type-tactics .tactics-layout.tactics-many .tactics-head-name {
  font-size: clamp(.6rem, .9vw, .8rem);
}
.game-type-tactics .tactics-layout.tactics-many .tactics-active-member {
  display: none;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-points-cell {
  font-size: clamp(.75rem, 1.65vh, 1rem);
}
.game-type-tactics .tactics-layout.tactics-many .tactics-table .tactics-xs {
  gap: .08rem;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-table .tactics-x {
  width: clamp(.5rem, 1.45vh, .78rem);
  height: clamp(.5rem, 1.45vh, .78rem);
  font-size: clamp(.45rem, 1.1vh, .65rem);
  border-radius: 3px;
}
.game-type-tactics .touch-panel {
  top: 76px;
  align-self: stretch;
  max-height: 100%;
  overflow: hidden;
  gap: 7px;
  padding: 9px;
  border-radius: 15px;
}
.game-type-tactics .touch-panel h2,
.game-type-tactics .multiplier-row {
  display: none;
}
.game-type-tactics .number-grid {
  gap: 6px;
}
.game-type-tactics .dart-button,
.game-type-tactics .multiplier {
  min-height: 42px;
  border-radius: 11px;
  font-size: clamp(.85rem, 1vw, 1rem);
}
.game-type-tactics .special-grid {
  gap: 6px;
}
.game-type-tactics .button.big {
  min-height: 46px;
  font-size: .95rem;
}
@media (max-width: 1200px) {
  .game-type-tactics .game-topbar {
    grid-template-columns: auto minmax(170px, 1fr) auto;
  }
  .game-type-tactics .top-actions {
    grid-column: 1 / -1;
  }
  .game-type-tactics .game-layout,
  .game-type-tactics.mode-display .game-layout {
    height: calc(100vh - 124px);
  }
}
@media (max-width: 920px) {
  .game-body.game-type-tactics {
    overflow: auto;
    height: auto;
  }
  .game-type-tactics .game-layout {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .game-type-tactics .score-section,
  .game-type-tactics .players-grid.tactics-grid,
  .game-type-tactics .tactics-layout,
  .game-type-tactics .tactics-table-wrap {
    height: auto;
    overflow: visible;
  }
  .game-type-tactics .touch-panel {
    max-height: none;
    overflow: visible;
  }
}

/* v0.5.8: Der kompakte Spiel-Header gilt jetzt für alle Spielarten. */
.game-body .game-topbar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(380px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  min-height: 0;
}
.game-body .game-topbar h1 {
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1.05;
}
.game-body .game-topbar p {
  margin-top: 2px;
  font-size: clamp(.7rem, .9vw, .9rem);
  line-height: 1.15;
}
.game-body .tiny-version { display: none; }
.game-body .back {
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 10px;
}
.game-body .game-id-chip {
  min-width: 72px;
  padding: 5px 8px;
  border-radius: 12px;
}
.game-body .game-id-chip span {
  font-size: .55rem;
  letter-spacing: .08em;
}
.game-body .game-id-chip strong {
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
}
.game-body .top-actions {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.game-body .top-actions .button,
.game-body .top-actions button.button {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: clamp(.72rem, .9vw, .9rem);
}
.game-body .game-layout {
  padding: 10px;
  gap: 10px;
}

/* v0.5.8: Tactics-Tabelle füllt die verfügbare Spielfläche. Meldungen liegen darüber. */
.game-type-tactics .game-layout,
.game-type-tactics.mode-display .game-layout {
  height: calc(100vh - 72px);
}
.game-type-tactics .score-section {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
}
.game-type-tactics .game-message {
  position: absolute;
  z-index: 5;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 0;
  margin: 0;
  padding: 4px 8px;
  opacity: .92;
  pointer-events: none;
}
.game-type-tactics .autodarts-hint-top {
  position: absolute;
  z-index: 6;
  right: 8px;
  top: 8px;
  margin: 0;
  pointer-events: none;
}
.game-type-tactics .players-grid.tactics-grid,
.game-type-tactics .tactics-layout,
.game-type-tactics .tactics-table-wrap {
  height: 100%;
}
.game-type-tactics .tactics-table th,
.game-type-tactics .tactics-table td {
  padding-top: .16rem;
  padding-bottom: .16rem;
}
.game-type-tactics .tactics-table thead th,
.game-type-tactics .tactics-table thead td {
  height: 1%;
}
@media (max-width: 1200px) {
  .game-body .game-topbar {
    grid-template-columns: auto minmax(170px, 1fr) auto;
  }
  .game-body .top-actions {
    grid-column: 1 / -1;
  }
  .game-type-tactics .game-layout,
  .game-type-tactics.mode-display .game-layout {
    height: calc(100vh - 108px);
  }
}

/* v0.5.9: Tactics-Infozeile wieder unter dem Header, Tabelle füllt Resthöhe, X-Felder größer */
.game-type-tactics .score-section {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.game-type-tactics .game-message {
  position: static;
  z-index: auto;
  left: auto;
  right: auto;
  bottom: auto;
  min-height: 26px;
  margin: 0 0 4px 0;
  padding: 4px 8px;
  opacity: 1;
  pointer-events: auto;
}
.game-type-tactics .autodarts-hint-top {
  position: static;
  z-index: auto;
  right: auto;
  top: auto;
  margin: 0 0 4px 0;
  pointer-events: auto;
}
.game-type-tactics .players-grid.tactics-grid,
.game-type-tactics .tactics-layout,
.game-type-tactics .tactics-table-wrap {
  height: 100%;
  min-height: 0;
}
.game-type-tactics .tactics-table {
  height: 100%;
}
.game-type-tactics .tactics-table tbody tr {
  height: auto;
}
.game-type-tactics .tactics-table-cell {
  padding: .08rem .14rem;
  height: 1%;
}
.game-type-tactics .tactics-table .tactics-xs {
  height: 100%;
  min-height: clamp(1.7rem, 5.4vh, 4.6rem);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .18rem;
}
.game-type-tactics .tactics-table .tactics-x {
  height: auto;
  min-height: 100%;
  width: clamp(1.35rem, 3.8vw, 4.2rem);
  max-width: 32%;
  flex: 0 1 clamp(1.35rem, 3.8vw, 4.2rem);
  font-size: clamp(1.15rem, 4vh, 3.4rem);
  line-height: 1;
  border-width: 2px;
  border-radius: 8px;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-table .tactics-xs {
  min-height: clamp(1.35rem, 4.3vh, 3.2rem);
  gap: .12rem;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-table .tactics-x {
  width: clamp(1.05rem, 3vw, 3rem);
  flex-basis: clamp(1.05rem, 3vw, 3rem);
  font-size: clamp(.95rem, 3vh, 2.3rem);
}
.game-type-tactics .tactics-layout.tactics-many .tactics-table .tactics-xs {
  min-height: clamp(.95rem, 3vh, 2.2rem);
  gap: .08rem;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-table .tactics-x {
  width: clamp(.7rem, 2vw, 1.8rem);
  flex-basis: clamp(.7rem, 2vw, 1.8rem);
  font-size: clamp(.65rem, 2vh, 1.45rem);
  border-radius: 5px;
}
/* Bei 4-6 X pro Feld muss es horizontal enger werden, aber die Zellhöhe bleibt genutzt. */
.game-type-tactics .tactics-layout[data-required="4"] .tactics-table .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-table .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-table .tactics-x {
  max-width: 16%;
  flex-basis: clamp(.62rem, 1.45vw, 1.55rem);
  width: clamp(.62rem, 1.45vw, 1.55rem);
  font-size: clamp(.58rem, 1.7vh, 1.25rem);
}

/* v0.6.0: Tactics-Board als echtes Grid, nutzt die ganze Höhe und hat große X-Felder. */
.game-type-tactics .score-section {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}
.game-type-tactics .game-message {
  min-height: 30px;
  font-size: clamp(.9rem, 1.2vw, 1.15rem);
  font-weight: 900;
}
.game-type-tactics .players-grid.tactics-grid,
.game-type-tactics .tactics-layout,
.game-type-tactics .tactics-table-wrap {
  height: 100%;
  min-height: 0;
}
.game-type-tactics .tactics-table-wrap {
  overflow: hidden;
}
.tactics-grid-board {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: clamp(58px, 6vw, 94px) repeat(var(--tactics-columns), minmax(0, 1fr));
  grid-template-rows: minmax(40px, .75fr) minmax(34px, .55fr) repeat(var(--tactics-rows), minmax(0, 1fr));
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}
.tactics-grid-board > div {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tactics-grid-board > div:nth-child(calc(var(--tactics-columns) + 1)n) {
  border-right: 0;
}
.tactics-corner,
.tactics-points-label,
.tactics-target-head {
  color: var(--accent, #ffea00);
  font-weight: 1000;
  background: rgba(0,0,0,.34);
}
.tactics-corner,
.tactics-points-label {
  font-size: clamp(.85rem, 1.25vw, 1.35rem);
  line-height: 1.02;
}
.tactics-target-head {
  font-size: clamp(1.55rem, 4vh, 3.35rem);
  line-height: .95;
}
.tactics-player-head {
  flex-direction: column;
  gap: .15rem;
  padding: .16rem .35rem;
  background: rgba(255,255,255,.065);
}
.game-type-tactics .tactics-head-name,
.tactics-head-name {
  font-size: clamp(1.05rem, 2vw, 2.35rem);
  line-height: 1.02;
  font-weight: 1000;
}
.game-type-tactics .tactics-active-member,
.tactics-active-member {
  margin-top: 0;
  font-size: clamp(.72rem, 1.15vw, 1.18rem);
  line-height: 1.02;
  font-weight: 900;
}
.tactics-points-cell {
  font-size: clamp(1.45rem, 3.2vh, 2.9rem);
  font-weight: 1000;
  background: rgba(255,255,255,.04);
}
.tactics-table-cell {
  padding: .18rem .32rem;
  background: rgba(255,255,255,.028);
}
.tactics-table-cell.closed {
  background: rgba(88,214,141,.14);
}
.tactics-player-head.active-col,
.tactics-table-cell.active-col,
.tactics-points-cell.active-col {
  background: color-mix(in srgb, var(--active-panel) 90%, #000 10%);
  color: var(--active-text);
  box-shadow: inset 0 0 0 3px var(--active-border, #ffea00);
}
.tactics-xs {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(.12rem, .45vw, .55rem);
}
.tactics-x {
  flex: 1 1 0;
  max-width: 30%;
  height: 100%;
  min-height: 0;
  border-radius: clamp(7px, .8vw, 14px);
  font-size: clamp(1.5rem, 5.3vh, 4.7rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
}
.tactics-layout[data-required="1"] .tactics-x { max-width: min(78%, 10rem); }
.tactics-layout[data-required="2"] .tactics-x { max-width: 44%; }
.tactics-layout[data-required="4"] .tactics-x,
.tactics-layout[data-required="5"] .tactics-x,
.tactics-layout[data-required="6"] .tactics-x {
  max-width: 16%;
  font-size: clamp(.8rem, 3vh, 2.4rem);
}
.tactics-layout.tactics-medium .tactics-x {
  font-size: clamp(1.0rem, 3.6vh, 3rem);
  border-radius: clamp(5px, .6vw, 10px);
}
.tactics-layout.tactics-many .tactics-target-head {
  font-size: clamp(.9rem, 2.3vh, 1.55rem);
}
.tactics-layout.tactics-many .tactics-head-name {
  font-size: clamp(.65rem, 1vw, 1rem);
}
.tactics-layout.tactics-many .tactics-active-member {
  display: none;
}
.tactics-layout.tactics-many .tactics-points-cell {
  font-size: clamp(.8rem, 2vh, 1.35rem);
}
.tactics-layout.tactics-many .tactics-table-cell {
  padding: .06rem .12rem;
}
.tactics-layout.tactics-many .tactics-x {
  font-size: clamp(.55rem, 1.65vh, 1.15rem);
  border-radius: 4px;
}
/* Tactics braucht auch manuelle Single/Double/Triple-Eingabe. */
.game-type-tactics .touch-panel h2 {
  display: none;
}
.game-type-tactics .multiplier-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.game-type-tactics .multiplier-row .multiplier {
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 11px;
  font-size: clamp(.78rem, 1vw, .98rem);
}
.game-type-tactics .touch-panel {
  display: grid;
  grid-template-rows: auto minmax(0, .9fr) auto auto;
}
.game-type-tactics .number-grid {
  align-content: stretch;
}
@media (max-width: 920px) {
  .tactics-grid-board {
    min-width: 720px;
    height: min(76vh, 720px);
  }
}


/* v0.6.1: Tactics-Board Feinschliff: mehr Kontrast, größere Namen/Punkte, X-Felder füllen die Zellen. */
.game-type-tactics .tactics-grid-board {
  grid-template-columns: clamp(82px, 6.8vw, 126px) repeat(var(--tactics-columns), minmax(0, 1fr));
  grid-template-rows: minmax(46px, .72fr) minmax(42px, .58fr) repeat(var(--tactics-rows), minmax(0, 1fr));
}
.game-type-tactics .tactics-grid-board > div {
  overflow: hidden;
}
.game-type-tactics .tactics-corner,
.game-type-tactics .tactics-points-label {
  font-size: clamp(.78rem, 1.05vw, 1.05rem);
  line-height: 1;
  padding: 2px 4px;
  white-space: normal;
  word-break: keep-all;
}
.game-type-tactics .tactics-target-head {
  font-size: clamp(1.35rem, 3.9vh, 3.1rem);
  line-height: .95;
}
.game-type-tactics .tactics-player-head {
  padding: .12rem .4rem;
}
.game-type-tactics .tactics-head-name {
  font-size: clamp(1.35rem, 2.35vw, 3.05rem);
  line-height: 1;
}
.game-type-tactics .tactics-active-member {
  font-size: clamp(.78rem, 1.05vw, 1.05rem);
}
.game-type-tactics .tactics-points-cell {
  font-size: clamp(1.55rem, 3.8vh, 3.25rem);
  line-height: 1;
}
.game-type-tactics .tactics-table-cell {
  padding: clamp(2px, .42vh, 6px) clamp(4px, .4vw, 8px);
}
.game-type-tactics .tactics-xs {
  display: grid;
  grid-template-columns: repeat(var(--tactics-required), minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  gap: clamp(2px, .26vw, 8px);
}
.game-type-tactics .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium .tactics-x,
.game-type-tactics .tactics-layout.tactics-many .tactics-x,
.game-type-tactics .tactics-layout[data-required="4"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  border-width: 2px;
  border-radius: clamp(7px, .75vw, 14px);
  font-size: clamp(1.15rem, 4.0vh, 3.4rem);
}
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  font-size: clamp(.95rem, 3.15vh, 2.35rem);
}
.game-type-tactics .tactics-player-head.active-col {
  box-shadow: inset 0 0 0 4px var(--active-border, #ffea00);
}
.game-type-tactics .tactics-table-cell.active-col,
.game-type-tactics .tactics-points-cell.active-col {
  box-shadow: inset 4px 0 0 var(--active-border, #ffea00), inset -4px 0 0 var(--active-border, #ffea00);
}
.game-type-tactics .tactics-table-cell.active-col .tactics-x.hit {
  background: var(--accent, #ffea00);
  border-color: var(--accent, #ffea00);
  color: #050505;
}
.game-type-tactics .touch-panel {
  min-width: 0;
}

/* v0.6.2: Tactics lesbarer: X-Felder wieder echte große Kästen, tote Zahlen deutlich grau. */
.game-type-tactics .tactics-grid-board {
  grid-template-columns: clamp(74px, 5.8vw, 104px) repeat(var(--tactics-columns), minmax(0, 1fr));
  grid-template-rows: minmax(54px, .74fr) minmax(44px, .52fr) repeat(var(--tactics-rows), minmax(0, 1fr));
}
.game-type-tactics .tactics-head-name {
  font-size: clamp(1.45rem, 2.55vw, 3.25rem);
}
.game-type-tactics .tactics-points-cell {
  font-size: clamp(1.7rem, 4.1vh, 3.45rem);
}
.game-type-tactics .tactics-target-head {
  font-size: clamp(1.45rem, 4.1vh, 3.2rem);
}
.game-type-tactics .tactics-table-cell {
  padding: clamp(3px, .48vh, 7px) clamp(5px, .48vw, 10px);
}
.game-type-tactics .tactics-xs {
  display: grid !important;
  grid-template-columns: repeat(var(--tactics-required), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  gap: clamp(3px, .38vw, 10px);
  align-items: stretch;
  justify-items: stretch;
}
.game-type-tactics .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium .tactics-x,
.game-type-tactics .tactics-layout.tactics-many .tactics-x,
.game-type-tactics .tactics-layout[data-required="4"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.42);
  border-radius: clamp(7px, .75vw, 14px);
  font-size: clamp(1.15rem, 4.6vh, 4rem);
  line-height: 1;
  font-weight: 1000;
}
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  font-size: clamp(.92rem, 3.35vh, 2.8rem);
  border-radius: clamp(5px, .55vw, 10px);
}
.game-type-tactics .tactics-x.hit {
  background: var(--accent, #ffea00) !important;
  border-color: var(--accent, #ffea00) !important;
  color: #050505 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.game-type-tactics .tactics-table-cell.closed:not(.all-closed) {
  background: rgba(255,234,0,.045);
}
.game-type-tactics .tactics-target-head.all-closed,
.game-type-tactics .tactics-table-cell.all-closed,
.game-type-tactics .tactics-table-cell.all-closed.active-col {
  background: rgba(105,113,125,.22) !important;
  color: rgba(226,232,240,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.game-type-tactics .tactics-target-head.all-closed {
  text-decoration: line-through;
  color: rgba(226,232,240,.7) !important;
}
.game-type-tactics .tactics-table-cell.all-closed .tactics-x,
.game-type-tactics .tactics-table-cell.all-closed .tactics-x.hit {
  background: rgba(148,163,184,.34) !important;
  border-color: rgba(203,213,225,.36) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: none;
}
.game-type-tactics .tactics-table-cell.active-col:not(.all-closed) {
  background: color-mix(in srgb, var(--active-panel) 80%, #000 20%);
  box-shadow: inset 0 0 0 3px var(--active-border, #ffea00);
}


/* v0.6.3: Tactics-X wirklich groß: jede Trefferbox füllt ihren Anteil der Zelle.
   Geschlossene Zahlen werden im JavaScript ausgeblendet, damit die verbleibenden Reihen größer werden. */
.game-type-tactics .tactics-layout {
  grid-template-rows: auto minmax(0, 1fr);
}
.game-type-tactics .tactics-closed-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  margin: 0 0 4px 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  color: rgba(226,232,240,.86);
  font-weight: 900;
  font-size: clamp(.78rem, .95vw, 1rem);
}
.game-type-tactics .tactics-table-cell {
  position: relative;
  display: block !important;
  padding: clamp(4px, .65vh, 10px) clamp(7px, .7vw, 14px) !important;
}
.game-type-tactics .tactics-xs {
  position: absolute;
  inset: clamp(4px, .65vh, 10px) clamp(7px, .7vw, 14px);
  display: grid !important;
  grid-template-columns: repeat(var(--tactics-required), minmax(0, 1fr));
  gap: clamp(5px, .45vw, 12px);
  width: auto !important;
  height: auto !important;
  align-items: stretch;
  justify-items: stretch;
}
.game-type-tactics .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium .tactics-x,
.game-type-tactics .tactics-layout.tactics-many .tactics-x,
.game-type-tactics .tactics-layout[data-required="4"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255,255,255,.42) !important;
  background: rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.54) !important;
  border-radius: clamp(8px, .8vw, 16px) !important;
  font-size: clamp(1.35rem, 5.2vh, 4.6rem) !important;
  line-height: .9 !important;
  font-weight: 1000 !important;
  box-sizing: border-box;
}
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  font-size: clamp(1.05rem, 4.15vh, 3.5rem) !important;
  border-width: 2px !important;
  border-radius: clamp(6px, .62vw, 12px) !important;
}
.game-type-tactics .tactics-x.hit,
.game-type-tactics .tactics-table-cell.active-col .tactics-x.hit {
  background: var(--accent, #ffea00) !important;
  border-color: var(--accent, #ffea00) !important;
  color: #050505 !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.24), 0 0 14px rgba(255,234,0,.22) !important;
}
.game-type-tactics .tactics-target-head.all-closed,
.game-type-tactics .tactics-table-cell.all-closed {
  display: none !important;
}

/* v0.6.4: Tactics-Board zurück auf eine robuste Darstellung.
   Keine Kästchen, die abgeschnitten werden: große X füllen die Zelle als Zeichen.
   Geschlossene Zahlen werden weiterhin per JavaScript ausgeblendet. */
.game-type-tactics .tactics-grid-board {
  grid-template-columns: clamp(72px, 5.2vw, 104px) repeat(var(--tactics-columns), minmax(0, 1fr)) !important;
  grid-template-rows: minmax(50px, .85fr) minmax(42px, .65fr) repeat(var(--tactics-rows), minmax(0, 1fr)) !important;
}
.game-type-tactics .tactics-grid-board > div {
  overflow: hidden !important;
}
.game-type-tactics .tactics-table-cell {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 .25rem !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.018) !important;
}
.game-type-tactics .tactics-table-cell.closed:not(.all-closed) {
  background: rgba(255,234,0,.04) !important;
}
.game-type-tactics .tactics-table-cell.active-col:not(.all-closed) {
  background: color-mix(in srgb, var(--active-panel) 62%, #000 38%) !important;
  box-shadow: inset 0 0 0 3px var(--active-border, #ffea00) !important;
}
.game-type-tactics .tactics-xs,
.game-type-tactics .tactics-layout.tactics-medium .tactics-xs,
.game-type-tactics .tactics-layout.tactics-many .tactics-xs {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  gap: clamp(.18rem, .55vw, .8rem) !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium .tactics-x,
.game-type-tactics .tactics-layout.tactics-many .tactics-x,
.game-type-tactics .tactics-layout[data-required="4"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  flex: 0 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: rgba(226,232,240,.34) !important;
  font-size: clamp(1.85rem, 5.7vh, 5.4rem) !important;
  line-height: .86 !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 4px rgba(0,0,0,.95) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  font-size: clamp(1.35rem, 4.75vh, 4.3rem) !important;
  letter-spacing: -.08em !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-x {
  font-size: clamp(1.45rem, 4.9vh, 4.5rem) !important;
}
.game-type-tactics .tactics-layout.tactics-medium[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium[data-required="6"] .tactics-x {
  font-size: clamp(1.05rem, 3.9vh, 3.45rem) !important;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-x {
  font-size: clamp(.82rem, 2.9vh, 2.3rem) !important;
  letter-spacing: -.1em !important;
}
.game-type-tactics .tactics-x.hit,
.game-type-tactics .tactics-table-cell.active-col .tactics-x.hit {
  color: var(--accent, #ffea00) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 16px rgba(255,234,0,.45) !important;
}
.game-type-tactics .tactics-target-head {
  font-size: clamp(1.7rem, 4.45vh, 3.65rem) !important;
}
.game-type-tactics .tactics-head-name {
  font-size: clamp(1.65rem, 2.75vw, 3.55rem) !important;
}
.game-type-tactics .tactics-points-cell {
  font-size: clamp(1.75rem, 4.25vh, 3.65rem) !important;
}
.game-type-tactics .tactics-target-head.all-closed,
.game-type-tactics .tactics-table-cell.all-closed {
  display: none !important;
}

/* v0.6.5: Tactics wieder robust und lesbar.
   Die vorherigen Experimente werden hier bewusst hart übersteuert:
   - X-Felder sind wieder echte, sichtbare Kästen
   - die Kästen füllen die Zelle, ohne abgeschnitten zu werden
   - Eingabefeld rechts wird kompakter und vollständig sichtbar
*/
.game-type-tactics .score-section {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.game-type-tactics .players-grid.tactics-grid,
.game-type-tactics .tactics-layout,
.game-type-tactics .tactics-table-wrap {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-layout {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 4px !important;
}
.game-type-tactics .tactics-closed-note {
  margin: 0 0 3px 2px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.24) !important;
  color: rgba(226,232,240,.92) !important;
  font-size: clamp(.72rem, .9vw, .95rem) !important;
  font-weight: 900 !important;
}
.game-type-tactics .tactics-grid-board {
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(70px, 5.5vw, 105px) repeat(var(--tactics-columns), minmax(0, 1fr)) !important;
  grid-template-rows: minmax(48px, .78fr) minmax(40px, .55fr) repeat(var(--tactics-rows), minmax(0, 1fr)) !important;
  background: rgba(0,0,0,.22) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-grid-board > div {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-right: 1px solid rgba(255,255,255,.14) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.game-type-tactics .tactics-corner,
.game-type-tactics .tactics-points-label,
.game-type-tactics .tactics-target-head {
  color: var(--accent, #ffea00) !important;
  background: rgba(0,0,0,.38) !important;
  font-weight: 1000 !important;
}
.game-type-tactics .tactics-corner,
.game-type-tactics .tactics-points-label {
  font-size: clamp(.84rem, 1.1vw, 1.2rem) !important;
  line-height: 1.02 !important;
  padding: 2px 3px !important;
}
.game-type-tactics .tactics-target-head {
  font-size: clamp(1.5rem, 4.4vh, 3.45rem) !important;
  line-height: .95 !important;
}
.game-type-tactics .tactics-player-head {
  flex-direction: column !important;
  gap: .05rem !important;
  padding: .12rem .32rem !important;
  background: rgba(255,255,255,.065) !important;
}
.game-type-tactics .tactics-head-name {
  font-size: clamp(1.35rem, 2.55vw, 3.35rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}
.game-type-tactics .tactics-active-member {
  font-size: clamp(.72rem, 1vw, 1rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.game-type-tactics .tactics-points-cell {
  font-size: clamp(1.45rem, 3.6vh, 3.1rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  background: rgba(255,255,255,.04) !important;
}
.game-type-tactics .tactics-player-head.active-col,
.game-type-tactics .tactics-points-cell.active-col {
  background: color-mix(in srgb, var(--active-panel) 84%, #000 16%) !important;
  color: var(--active-text) !important;
  box-shadow: inset 0 0 0 4px var(--active-border, #ffea00) !important;
}
.game-type-tactics .tactics-table-cell {
  position: static !important;
  display: grid !important;
  place-items: stretch !important;
  padding: clamp(3px, .45vh, 7px) clamp(4px, .36vw, 8px) !important;
  background: rgba(255,255,255,.028) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.game-type-tactics .tactics-table-cell.active-col:not(.all-closed) {
  background: color-mix(in srgb, var(--active-panel) 68%, #000 32%) !important;
  box-shadow: inset 0 0 0 3px var(--active-border, #ffea00) !important;
}
.game-type-tactics .tactics-table-cell.closed:not(.all-closed) {
  background: rgba(255,234,0,.05) !important;
}
.game-type-tactics .tactics-xs,
.game-type-tactics .tactics-layout.tactics-medium .tactics-xs,
.game-type-tactics .tactics-layout.tactics-many .tactics-xs {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(var(--tactics-required), minmax(0, 1fr)) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(3px, .35vw, 9px) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-x,
.game-type-tactics .tactics-layout.tactics-medium .tactics-x,
.game-type-tactics .tactics-layout.tactics-many .tactics-x,
.game-type-tactics .tactics-layout[data-required="4"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(226,232,240,.42) !important;
  border-radius: clamp(6px, .68vw, 13px) !important;
  background: rgba(226,232,240,.08) !important;
  color: rgba(226,232,240,.50) !important;
  font-size: clamp(1.0rem, 3.7vh, 3.2rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25) !important;
  box-sizing: border-box !important;
}
.game-type-tactics .tactics-layout[data-required="5"] .tactics-x,
.game-type-tactics .tactics-layout[data-required="6"] .tactics-x {
  font-size: clamp(.8rem, 2.9vh, 2.45rem) !important;
  border-width: 2px !important;
  gap: 0 !important;
}
.game-type-tactics .tactics-layout.tactics-many .tactics-x {
  font-size: clamp(.62rem, 2vh, 1.55rem) !important;
  border-width: 1px !important;
  border-radius: 4px !important;
}
.game-type-tactics .tactics-x.hit,
.game-type-tactics .tactics-table-cell.active-col .tactics-x.hit {
  background: var(--accent, #ffea00) !important;
  border-color: var(--accent, #ffea00) !important;
  color: #050505 !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 10px rgba(255,234,0,.22) !important;
}
.game-type-tactics .tactics-target-head.all-closed,
.game-type-tactics .tactics-table-cell.all-closed {
  display: none !important;
}

/* Eingabefeld bei Tactics wieder ruhig und kompakt. */
.game-type-tactics .touch-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  align-self: stretch !important;
  gap: 8px !important;
  padding: 9px !important;
  overflow: hidden !important;
}
.game-type-tactics .touch-panel h2 {
  display: none !important;
}
.game-type-tactics .multiplier-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.game-type-tactics .multiplier-row .multiplier {
  min-height: 52px !important;
  max-height: 68px !important;
  padding: 8px 6px !important;
  font-size: clamp(.86rem, 1vw, 1.05rem) !important;
}
.game-type-tactics .number-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(58px, 1fr) !important;
  gap: 7px !important;
  align-content: start !important;
}
.game-type-tactics .dart-button,
.game-type-tactics .multiplier {
  min-height: 58px !important;
  height: auto !important;
  border-radius: 12px !important;
  font-size: clamp(.88rem, 1vw, 1.1rem) !important;
}
.game-type-tactics .special-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.game-type-tactics .button.big {
  min-height: 52px !important;
  font-size: clamp(.86rem, 1vw, 1.05rem) !important;
}
@media (max-height: 760px) {
  .game-type-tactics .number-grid { grid-auto-rows: minmax(48px, 1fr) !important; gap: 6px !important; }
  .game-type-tactics .dart-button,
  .game-type-tactics .multiplier { min-height: 48px !important; }
  .game-type-tactics .button.big { min-height: 46px !important; }
}

/* v0.6.8: Tactics harter Neustart als echte Tabelle.
   In jeder Spielzelle stehen nur große X. Keine Grid-Experimente, keine Linien durch die Zellen. */
.game-type-tactics .score-section {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.game-type-tactics .players-grid.tactics-grid,
.game-type-tactics .tactics-layout,
.game-type-tactics .tt-wrap {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-layout {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 4px !important;
}
.game-type-tactics .tactics-closed-note {
  justify-self: start !important;
  margin: 0 0 3px 2px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.24) !important;
  color: rgba(226,232,240,.92) !important;
  font-weight: 900 !important;
  font-size: clamp(.75rem, .9vw, .95rem) !important;
}
.game-type-tactics .tactics-real-table {
  width: 100% !important;
  height: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.game-type-tactics .tactics-real-table th,
.game-type-tactics .tactics-real-table td {
  border: 1px solid rgba(255,255,255,.16) !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.22) !important;
  color: var(--accent, #ffea00) !important;
  box-sizing: border-box !important;
}
.game-type-tactics .tactics-real-table thead {
  height: 1% !important;
}
.game-type-tactics .tactics-real-table thead tr:first-child {
  height: clamp(46px, 7vh, 78px) !important;
}
.game-type-tactics .tactics-real-table thead tr:nth-child(2) {
  height: clamp(34px, 5vh, 58px) !important;
}
.game-type-tactics .tt-corner,
.game-type-tactics .tt-score-label,
.game-type-tactics .tt-target {
  width: clamp(64px, 5.2vw, 95px) !important;
  font-weight: 1000 !important;
  background: rgba(0,0,0,.52) !important;
}
.game-type-tactics .tt-corner,
.game-type-tactics .tt-score-label {
  font-size: clamp(.85rem, 1.1vw, 1.15rem) !important;
  line-height: 1 !important;
}
.game-type-tactics .tt-target {
  font-size: clamp(1.7rem, 4.5vh, 3.6rem) !important;
  line-height: 1 !important;
}
.game-type-tactics .tt-player {
  background: rgba(255,255,255,.055) !important;
}
.game-type-tactics .tt-name {
  font-size: clamp(1.6rem, 2.7vw, 3.6rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: var(--accent, #ffea00) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 6px !important;
}
.game-type-tactics .tt-active-member {
  font-size: clamp(.72rem, 1vw, 1.05rem) !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  color: inherit !important;
  font-weight: 900 !important;
}
.game-type-tactics .tt-points {
  font-size: clamp(1.55rem, 3.6vh, 3.2rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}
.game-type-tactics .tt-player.active-col,
.game-type-tactics .tt-points.active-col,
.game-type-tactics .tt-cell.active-col {
  background: color-mix(in srgb, var(--active-panel) 80%, #000 20%) !important;
  color: var(--active-text) !important;
  box-shadow: inset 0 0 0 4px var(--active-border, #ffea00) !important;
}
.game-type-tactics .tt-player.active-col .tt-name,
.game-type-tactics .tt-player.active-col .tt-active-member,
.game-type-tactics .tt-points.active-col {
  color: var(--active-text) !important;
}
.game-type-tactics .tt-cell {
  height: calc((100% - 120px) / var(--tactics-rows)) !important;
  background: rgba(255,255,255,.018) !important;
  white-space: nowrap !important;
  letter-spacing: clamp(0px, .12vw, 2px) !important;
}
.game-type-tactics .tt-x {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc((100% - (var(--tactics-required) - 1) * 8px) / var(--tactics-required)) !important;
  max-width: clamp(2.2rem, 7vw, 8rem) !important;
  height: 82% !important;
  margin: 0 4px !important;
  font-size: clamp(2.0rem, 7.2vh, 6.2rem) !important;
  line-height: .8 !important;
  font-weight: 1000 !important;
  color: rgba(226,232,240,.42) !important;
  background: transparent !important;
  border: 0 !important;
  text-shadow: 0 0 4px rgba(0,0,0,.9) !important;
  vertical-align: middle !important;
}
.game-type-tactics .tt-x.hit {
  color: var(--accent, #ffea00) !important;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 14px rgba(255,234,0,.45) !important;
}
.game-type-tactics .tactics-layout[data-required="4"] .tt-x,
.game-type-tactics .tactics-layout[data-required="5"] .tt-x,
.game-type-tactics .tactics-layout[data-required="6"] .tt-x {
  width: calc((100% - (var(--tactics-required) - 1) * 4px) / var(--tactics-required)) !important;
  margin: 0 2px !important;
  font-size: clamp(1.45rem, 5.7vh, 4.8rem) !important;
}
.game-type-tactics .tactics-layout.tactics-many .tt-name {
  font-size: clamp(1.05rem, 2vw, 2.25rem) !important;
}
.game-type-tactics .tactics-layout.tactics-many .tt-active-member {
  display: none !important;
}
.game-type-tactics .tactics-layout.tactics-many .tt-target {
  font-size: clamp(1.25rem, 3.7vh, 2.6rem) !important;
}
.game-type-tactics .tactics-layout.tactics-many .tt-x {
  font-size: clamp(1.25rem, 4.7vh, 3.7rem) !important;
}
.game-type-tactics .touch-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  padding: 9px !important;
  overflow: hidden !important;
}
.game-type-tactics .multiplier-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.game-type-tactics .multiplier-row .multiplier {
  min-height: 54px !important;
  max-height: 70px !important;
}
.game-type-tactics .number-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(52px, 1fr) !important;
  gap: 7px !important;
  align-content: start !important;
  overflow: hidden !important;
}
.game-type-tactics .special-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.game-type-tactics .dart-button,
.game-type-tactics .multiplier,
.game-type-tactics .button.big {
  border-radius: 12px !important;
  font-size: clamp(.88rem, 1vw, 1.08rem) !important;
}
@media (max-height: 760px) {
  .game-type-tactics .tactics-real-table thead tr:first-child { height: 42px !important; }
  .game-type-tactics .tactics-real-table thead tr:nth-child(2) { height: 34px !important; }
  .game-type-tactics .tt-name { font-size: clamp(1.2rem, 2.2vw, 2.8rem) !important; }
  .game-type-tactics .tt-x { font-size: clamp(1.45rem, 5.5vh, 4.2rem) !important; }
  .game-type-tactics .number-grid { grid-auto-rows: minmax(44px, 1fr) !important; gap: 6px !important; }
}


/* v0.6.8: Tactics active player ruhiger markieren.
   Nur Name/Score deutlich hervorheben, keine gelben Rahmenlinien in jeder Tabellenzeile. */
.game-type-tactics .tt-cell.active-col {
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
  color: var(--accent, #ffea00) !important;
}
.game-type-tactics .tt-cell.active-col .tt-x.hit {
  color: var(--accent, #ffea00) !important;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 14px rgba(255,234,0,.45) !important;
}
.game-type-tactics .tt-points.active-col {
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  color: var(--accent, #ffea00) !important;
}
.game-type-tactics .tt-player.active-col {
  background: rgba(0,0,0,.72) !important;
  color: var(--accent, #ffea00) !important;
  box-shadow: inset 0 0 0 4px var(--active-border, #ffea00), 0 0 14px rgba(255,234,0,.22) !important;
}
.game-type-tactics .tt-player.active-col .tt-name,
.game-type-tactics .tt-player.active-col .tt-active-member {
  color: var(--accent, #ffea00) !important;
}


/* v0.6.8: Tactics - Zahlen, die bei allen zu sind, bleiben sichtbar.
   Die Zeile wird ruhig/grau markiert, die Spielzellen bleiben leer. */
.game-type-tactics .tactics-real-table tr.all-closed-row .tt-target {
  color: rgba(226,232,240,.55) !important;
  text-decoration: line-through !important;
  background: rgba(100,116,139,.18) !important;
}
.game-type-tactics .tactics-real-table tr.all-closed-row .tt-cell,
.game-type-tactics .tactics-real-table tr.all-closed-row .tt-cell.active-col,
.game-type-tactics .tt-cell.all-closed,
.game-type-tactics .tt-cell.all-closed.active-col {
  background: rgba(100,116,139,.10) !important;
  box-shadow: none !important;
  color: transparent !important;
}
.game-type-tactics .tt-cell.all-closed::after {
  content: "" !important;
}
.game-type-tactics .tactics-real-table tr.all-closed-row {
  opacity: .78 !important;
}

/* v0.7.0 Tauziehen setup */
.tauziehen-preview {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .6rem .9rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(0,0,0,.18);
}
.tauziehen-preview.small {
    grid-template-columns: auto 1fr;
    max-width: 520px;
}
.tau-team {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--accent, #ffe600);
}
.tau-team.right { text-align: right; }
.tau-score {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--text, #fff);
    padding: .25rem .7rem;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
}
.tau-row-label {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--accent, #ffe600);
}
.tau-track {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: .35rem;
    align-items: center;
}
.tauziehen-preview.small .tau-track { grid-column: auto; }
.tau-track span {
    min-height: 32px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.07);
}
.tau-track .ball {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--accent, #ffe600);
    background: var(--accent, #ffe600);
    color: #111;
    font-size: 1.1rem;
    font-weight: 900;
}
@media (max-width: 760px) {
    .tauziehen-preview { grid-template-columns: 1fr; }
    .tau-score, .tau-team.right { text-align: left; }
    .tau-track, .tauziehen-preview.small .tau-track { grid-column: auto; grid-template-columns: repeat(5, minmax(28px, 1fr)); }
}

/* v0.7.2 Tauziehen Spielanzeige */
.game-type-tauziehen .game-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 21vw);
  gap: 10px;
}
.game-type-tauziehen .score-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.game-type-tauziehen .players-grid.tauziehen-grid {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.tauziehen-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}
.tau-score-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.tau-side-player,
.tau-main-score {
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.38);
  padding: 8px 12px;
  min-height: 76px;
}
.tau-side-player.right { text-align: right; }
.tau-side-player.active {
  border-color: var(--active-border, #ffea00);
  box-shadow: inset 0 0 0 3px var(--active-border, #ffea00), 0 0 18px rgba(255,234,0,.22);
  background: rgba(0,0,0,.72);
}
.tau-side-name {
  font-size: clamp(1.5rem, 3vw, 3.1rem);
  line-height: .95;
  font-weight: 1000;
  color: var(--accent, #ffea00);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tau-active-member {
  margin-top: 4px;
  font-size: clamp(.85rem, 1.15vw, 1.15rem);
  color: rgba(255,255,255,.9);
}
.tau-side-points {
  margin-top: 2px;
  font-size: clamp(1.3rem, 2.2vw, 2.4rem);
  font-weight: 1000;
  color: var(--accent, #ffea00);
}
.tau-main-score {
  min-width: clamp(110px, 10vw, 170px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.1rem, 4.5vw, 4.5rem);
  line-height: 1;
  font-weight: 1000;
  color: #fff;
  border-color: rgba(96,165,250,.45);
  background: rgba(15,23,42,.85);
}
.tau-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}
.tau-table thead { height: 42px; }
.tau-table th,
.tau-table td {
  border: 1px solid rgba(255,255,255,.11);
  padding: 3px 8px;
  vertical-align: middle;
}
.tau-table thead th {
  font-size: clamp(.8rem, 1vw, 1.05rem);
  color: var(--accent, #ffea00);
  background: rgba(0,0,0,.42);
}
.tau-target {
  width: clamp(70px, 7vw, 110px);
  font-size: clamp(1.7rem, 4vh, 3.6rem);
  line-height: 1;
  color: var(--accent, #ffea00);
  font-weight: 1000;
  text-align: center;
}
.tau-row-points {
  width: clamp(48px, 5vw, 84px);
  text-align: center;
  color: var(--accent, #ffea00);
  font-size: clamp(1rem, 2vh, 1.8rem);
  font-weight: 1000;
}
.tau-board-cell {
  padding: 4px 10px !important;
}
.tau-track-line {
  display: grid;
  grid-template-columns: repeat(var(--tau-cells, 7), minmax(0, 1fr));
  gap: clamp(4px, .6vw, 10px);
  align-items: center;
}
.tauziehen-layout[data-fields="1"] .tau-track-line { --tau-fields: 1; }
.tauziehen-layout[data-fields="2"] .tau-track-line { --tau-fields: 2; }
.tauziehen-layout[data-fields="3"] .tau-track-line { --tau-fields: 3; }
.tauziehen-layout[data-fields="4"] .tau-track-line { --tau-fields: 4; }
.tauziehen-layout[data-fields="5"] .tau-track-line { --tau-fields: 5; }
.tauziehen-layout[data-fields="6"] .tau-track-line { --tau-fields: 6; }
.tauziehen-layout[data-fields="7"] .tau-track-line { --tau-fields: 7; }
.tauziehen-layout[data-fields="8"] .tau-track-line { --tau-fields: 8; }
.tauziehen-layout[data-fields="9"] .tau-track-line { --tau-fields: 9; }
.tau-field {
  min-height: clamp(28px, 4.8vh, 54px);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 3.5vh, 3rem);
  line-height: 1;
  font-weight: 1000;
  color: #111;
}
.tau-field.center {
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.11);
}
.tau-field.left-side { box-shadow: inset 4px 0 0 rgba(96,165,250,.3); }
.tau-field.right-side { box-shadow: inset -4px 0 0 rgba(248,113,113,.3); }
.tau-field.has-ball {
  background: var(--accent, #ffea00);
  border-color: var(--accent, #ffea00);
  box-shadow: 0 0 16px rgba(255,234,0,.45);
  transform: scale(1.05);
}
.tau-row.won {
  background: rgba(255,255,255,.035);
}
.tau-row.won .tau-target {
  color: var(--accent, #ffea00);
  background: transparent;
  text-decoration: none;
  text-shadow: none;
  opacity: .78;
}
.tau-row.won .tau-row-points {
  color: rgba(255,255,255,.72);
}
.tau-row.won .tau-field {
  opacity: .36;
}
.tau-row.won .tau-field.has-ball {
  opacity: .45;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
  box-shadow: none;
  transform: none;
}
.tau-row.winner-0 .tau-field.won-final {
  opacity: 1;
  background: #60a5fa;
  border-color: #bfdbfe;
  color: #07111f;
  box-shadow: 0 0 18px rgba(96,165,250,.55);
}
.tau-row.winner-1 .tau-field.won-final {
  opacity: 1;
  background: #f87171;
  border-color: #fecaca;
  color: #210707;
  box-shadow: 0 0 18px rgba(248,113,113,.55);
}
.game-type-tauziehen .touch-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  overflow: hidden;
}
.game-type-tauziehen .number-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(62px, 1fr);
  gap: 8px;
  align-content: start;
  overflow: hidden;
}
.game-type-tauziehen .special-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.game-type-tauziehen .dart-button,
.game-type-tauziehen .multiplier,
.game-type-tauziehen .button.big {
  border-radius: 12px;
  font-size: clamp(.9rem, 1vw, 1.12rem);
}
.game-type-tauziehen.mode-display .game-layout { grid-template-columns: 1fr; }
.game-type-tauziehen.mode-display .tau-target { width: 90px; }
@media (max-height: 760px) {
  .tau-side-player, .tau-main-score { min-height: 58px; padding: 5px 9px; }
  .tau-table thead { height: 34px; }
  .tau-field { min-height: clamp(22px, 4vh, 42px); }
  .tau-target { font-size: clamp(1.35rem, 3.3vh, 2.8rem); }
}

/* v0.8.0 Abräumen setup */
.abraeumen-idea-card p,
.abraeumen-rule-card p {
  max-width: 78ch;
}
.abraeumen-preview-board {
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  margin: 1rem auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  border: 10px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at center, rgba(255,220,70,.9) 0 9%, rgba(80,20,20,.95) 9% 18%, transparent 18%),
    conic-gradient(from -9deg, rgba(255,255,255,.16) 0 18deg, rgba(0,0,0,.18) 18deg 36deg);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.32);
  overflow: hidden;
}
.abraeumen-preview-board::before,
.abraeumen-preview-board::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.28);
}
.abraeumen-preview-board::after {
  inset: 32%;
  border-style: solid;
  border-color: rgba(255,213,79,.55);
}
.board-ring {
  position: absolute;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--text, #fff);
  font-weight: 900;
  text-align: center;
}
.board-ring.outer { top: 12%; left: 50%; transform: translateX(-50%); }
.board-ring.middle { bottom: 20%; left: 50%; transform: translateX(-50%); }
.board-ring.bull { inset: auto auto 50% 50%; transform: translate(-50%, 50%); color: #111; background: #ffd54f; }
.abraeumen-setup-form .segment-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}
.segment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: .35rem .7rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
}

/* v0.8.1 Abräumen / Board-Abräumen */
.game-type-abraeumen .game-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}
.game-type-abraeumen.mode-display .game-layout {
  grid-template-columns: 1fr;
}
.abraeumen-grid {
  display: block;
  height: 100%;
}
.abraeumen-layout {
  height: calc(100vh - 180px);
  min-height: 520px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}
.mode-input .abraeumen-layout {
  min-height: auto;
  height: auto;
}
.abraeumen-score-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.abraeumen-player {
  border: 2px solid var(--card-border, rgba(255,255,255,.18));
  border-radius: 18px;
  background: var(--card-bg, rgba(255,255,255,.08));
  padding: 10px 12px;
  min-height: 110px;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.abraeumen-player.active {
  border: 5px solid var(--active-border, #ffe45c);
  background: var(--active-bg, #211a00);
  color: var(--active-text, #ffe45c);
  box-shadow: 0 0 0 3px rgba(255,228,92,.25), 0 0 24px rgba(255,228,92,.25);
}
.abraeumen-player h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.05;
}
.abraeumen-member,
.abraeumen-turn,
.abraeumen-last {
  font-size: clamp(.82rem, 1.1vw, 1.05rem);
  opacity: .9;
}
.abraeumen-score {
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.9rem);
  line-height: .95;
  margin-top: 4px;
}
.abraeumen-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  font-size: clamp(.9rem, 1.25vw, 1.2rem);
}
.abraeumen-statusline strong {
  color: var(--accent, #ffe45c);
}
.abraeumen-board {
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: stretch;
}
.abraeumen-board.numbers-mode {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  grid-auto-rows: minmax(82px, 1fr);
}
.abraeumen-segment {
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18));
  color: var(--text, #fff);
  min-height: 74px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.abraeumen-segment strong {
  font-size: clamp(1.7rem, 4.2vw, 4.2rem);
  line-height: 1;
  font-weight: 950;
}
.abraeumen-segment span {
  font-size: clamp(.85rem, 1.2vw, 1.25rem);
  opacity: .85;
}
.abraeumen-segment .by {
  margin-top: 2px;
  opacity: .95;
  color: #fff;
  font-weight: 800;
}
.abraeumen-segment.cleared {
  background: rgba(80, 80, 80, .42);
  color: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.12);
}
.abraeumen-segment.cleared::after {
  content: '';
  position: absolute;
  inset: 50% -10%;
  height: 4px;
  background: rgba(255,255,255,.42);
  transform: rotate(-14deg);
}
.abraeumen-segment.last-hit {
  border-color: #ffe45c;
  background: #ffe45c;
  color: #111;
  box-shadow: 0 0 22px rgba(255,228,92,.38);
}
.abraeumen-segment.last-hit .by,
.abraeumen-segment.last-hit span {
  color: #111;
  opacity: 1;
}
.abraeumen-board.segments-mode {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(122px, 1fr);
}
.abraeumen-target-group {
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  padding: 8px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
}
.abraeumen-target-group h3 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  line-height: 1;
}
.abraeumen-target-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 6px;
}
.abraeumen-segment.mini {
  min-height: 58px;
  border-radius: 12px;
  padding: 4px;
}
.abraeumen-segment.mini strong {
  font-size: clamp(1.05rem, 1.9vw, 2rem);
}
.abraeumen-segment.mini span {
  font-size: .85rem;
}
@media (max-width: 900px) {
  .game-type-abraeumen .game-layout { grid-template-columns: 1fr; }
  .abraeumen-layout { height: auto; min-height: auto; }
  .abraeumen-board.numbers-mode { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
  .abraeumen-score-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* v0.8.9 Abräumen: Originalboard, schwarzer Zahlenring, Teamfarben für Treffer und einmaliger Gelb-Blitz */
.game-type-abraeumen .score-section {
  min-height: 0;
}
.abraeumen-layout.visual-board {
  height: calc(100vh - 156px);
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}
.mode-input .abraeumen-layout.visual-board {
  height: calc(100vh - 180px);
  min-height: 470px;
}
.abraeumen-visual-grid {
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at center, rgba(255,255,255,.06), rgba(0,0,0,.20));
}
.abraeumen-board-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
}
.abraeumen-dartboard {
  width: min(100%, 108vh);
  height: min(100%, 108vh);
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.46));
}
.ab-zone {
  position: absolute;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  width: clamp(150px, 20vw, 270px);
  pointer-events: none;
}
.ab-zone-top-left { top: 8px; left: 8px; }
.ab-zone-top-right { top: 8px; right: 8px; }
.ab-zone-bottom-left { bottom: 8px; left: 8px; }
.ab-zone-bottom-right { bottom: 8px; right: 8px; }

/* Originalähnliches Board mit schwarzem Zahlenring */
.ab-board-back {
  fill: #ded8cc;
  stroke: rgba(255,255,255,.94);
  stroke-width: .02;
}
.ab-board-number-ring {
  fill: #050607;
  stroke: rgba(235,235,225,.92);
  stroke-width: .006;
}
.ab-board-sector {
  stroke: rgba(230,236,232,.82);
  stroke-width: .0032;
  transition: opacity .18s ease, filter .18s ease, stroke-width .18s ease;
}
.ab-board-sector.ring-d0,
.ab-board-sector.ring-t2 { fill: #c82126; }
.ab-board-sector.ring-d0.odd,
.ab-board-sector.ring-t2.odd { fill: #23894b; }
.ab-board-sector.ring-s1,
.ab-board-sector.ring-s3 { fill: #f1e6c8; }
.ab-board-sector.ring-s1.odd,
.ab-board-sector.ring-s3.odd { fill: #111516; }
.ab-board-sector.ring-bull-25 { fill: #23894b; }
.ab-board-sector.ring-bull-50 { fill: #c82126; }
.ab-board-sector.inactive {
  opacity: .18;
  filter: grayscale(1) brightness(.62);
}

/* Abgeräumt: Teamfarben, bewusst anders als Rot/Grün/Schwarz/Creme vom Board. */
.ab-board-sector.cleared {
  opacity: .76;
  filter: saturate(.82) brightness(.92);
  stroke: rgba(0,0,0,.42);
  stroke-width: .0024;
}
.ab-board-sector.cleared.player-0 { fill: #00c8ff; }
.ab-board-sector.cleared.player-1 { fill: #b56cff; }
.ab-board-sector.cleared.player-2 { fill: #ff9d2e; }
.ab-board-sector.cleared.player-3 { fill: #ff4fd2; }

/* Letzter Treffer: gelber Blitz nur einmal beim neuen Treffer. Danach greift wieder die Teamfarbe. */
.ab-board-sector.last-hit {
  animation: ab-hit-flash 900ms ease-out 1;
}
@keyframes ab-hit-flash {
  0%   { fill: #fff100; opacity: 1; filter: brightness(2.0) saturate(1.5); stroke: #ffffff; stroke-width: .023; }
  25%  { fill: #fff100; opacity: 1; filter: brightness(1.9) saturate(1.4); stroke: #111111; stroke-width: .018; }
  55%  { fill: #fff100; opacity: .92; filter: brightness(1.45) saturate(1.2); stroke: #111111; stroke-width: .010; }
  100% { opacity: .76; filter: saturate(.82) brightness(.92); stroke-width: .0024; }
}
.ab-board-number {
  fill: #fff1a3;
  font-size: .086px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(10,10,10,.96);
  stroke-width: .013px;
  pointer-events: none;
}
.ab-board-number.inactive { opacity: .28; }
.ab-player-box {
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  background: rgba(15,20,28,.88);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.ab-player-box.active {
  box-shadow: 0 0 0 3px var(--active-border, #ffd900), 0 0 18px rgba(255,217,0,.35);
}
.ab-player-box h2 {
  font-size: clamp(1rem, 1.25vw, 1.55rem);
  line-height: 1.05;
}
.ab-player-box .abraeumen-member,
.ab-player-box .abraeumen-turn,
.ab-player-box .abraeumen-last {
  font-size: clamp(.78rem, .9vw, 1rem);
  line-height: 1.1;
}
.ab-player-box .abraeumen-score {
  font-size: clamp(1.8rem, 3.1vw, 3.4rem);
  line-height: .95;
}
.mode-display .abraeumen-layout.visual-board { height: calc(100vh - 136px); }
.mode-display .abraeumen-dartboard { width: min(100%, 112vh); height: min(100%, 112vh); }
@media (max-width: 1050px) {
  .ab-zone { width: clamp(132px, 23vw, 220px); }
  .ab-player-box { padding: 7px; }
  .ab-player-box .abraeumen-score { font-size: clamp(1.5rem, 4vw, 2.8rem); }
}
@media (max-width: 760px) {
  .abraeumen-layout.visual-board { height: auto; min-height: auto; }
  .abraeumen-visual-grid {
    min-height: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(320px, 1fr) auto;
    gap: 6px;
    overflow: visible;
  }
  .abraeumen-board-stage { grid-column: 1 / 3; grid-row: 2; }
  .ab-zone { position: static; width: auto; }
  .ab-zone-top-left { grid-column: 1; grid-row: 1; }
  .ab-zone-top-right { grid-column: 2; grid-row: 1; }
  .ab-zone-bottom-left { grid-column: 1; grid-row: 3; }
  .ab-zone-bottom-right { grid-column: 2; grid-row: 3; }
}


/* v0.8.9: Sieger-Popup mit Blinkeffekt und Fanfare */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 238, 0, .30), transparent 34%),
    radial-gradient(circle at 18% 20%, rgba(0, 210, 255, .18), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255, 60, 180, .20), transparent 26%),
    rgba(0, 0, 0, .70);
  transition: opacity .22s ease, visibility .22s ease;
}
.celebration-overlay.show {
  opacity: 1;
  visibility: visible;
  animation: celebration-screen-flash 900ms ease-in-out 0s 4;
}
.celebration-card {
  width: min(920px, 94vw);
  border: 5px solid #fff100;
  border-radius: 34px;
  padding: clamp(26px, 4vw, 54px);
  text-align: center;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(32, 34, 42, .96), rgba(8, 10, 18, .98)),
    radial-gradient(circle at center, rgba(255, 241, 0, .18), transparent 60%);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, .12),
    0 0 42px rgba(255, 241, 0, .55),
    0 22px 80px rgba(0, 0, 0, .72);
  transform: scale(.82) rotate(-1deg);
  animation: celebration-pop 620ms cubic-bezier(.2, 1.25, .25, 1) forwards, celebration-card-pulse 950ms ease-in-out infinite;
}
.celebration-overlay.game .celebration-card {
  border-color: #ffffff;
  box-shadow:
    0 0 0 10px rgba(255, 241, 0, .22),
    0 0 62px rgba(255, 241, 0, .80),
    0 0 92px rgba(0, 210, 255, .42),
    0 28px 100px rgba(0, 0, 0, .80);
  animation: celebration-pop-game 720ms cubic-bezier(.2, 1.35, .25, 1) forwards, celebration-card-pulse-game 760ms ease-in-out infinite;
}
.celebration-confetti {
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  line-height: 1;
  margin-bottom: .35em;
  letter-spacing: .15em;
  animation: celebration-confetti-wiggle 820ms ease-in-out infinite;
}
.celebration-kicker {
  font-size: clamp(2.2rem, 7vw, 6.3rem);
  line-height: .95;
  font-weight: 1000;
  letter-spacing: .04em;
  color: #fff100;
  text-shadow: 0 0 12px rgba(255, 241, 0, .75), 0 4px 0 rgba(0, 0, 0, .5);
  text-transform: uppercase;
}
.celebration-overlay.game .celebration-kicker {
  font-size: clamp(2.8rem, 8.6vw, 8rem);
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255, 241, 0, .95), 0 0 36px rgba(0, 210, 255, .58), 0 5px 0 rgba(0, 0, 0, .55);
}
.celebration-name {
  margin-top: .2em;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 1000;
  color: #ffffff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .48);
}
.celebration-message {
  margin-top: .8em;
  font-size: clamp(1rem, 2.4vw, 2rem);
  font-weight: 800;
  color: rgba(255, 255, 255, .92);
}
.celebration-score {
  margin-top: .85em;
  font-size: clamp(.9rem, 1.5vw, 1.35rem);
  font-weight: 800;
  color: #fff6a8;
}
@keyframes celebration-pop {
  0% { transform: scale(.62) rotate(-5deg); filter: brightness(1.8); }
  70% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(-1deg); filter: brightness(1); }
}
@keyframes celebration-pop-game {
  0% { transform: scale(.55) rotate(4deg); filter: brightness(2.2); }
  58% { transform: scale(1.11) rotate(-1deg); }
  100% { transform: scale(1.03) rotate(0deg); filter: brightness(1.08); }
}
@keyframes celebration-card-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.32); }
}
@keyframes celebration-card-pulse-game {
  0%, 100% { filter: brightness(1.04) saturate(1.05); }
  50% { filter: brightness(1.55) saturate(1.35); }
}
@keyframes celebration-screen-flash {
  0%, 100% { background-color: rgba(0, 0, 0, .70); }
  45% { background-color: rgba(255, 241, 0, .16); }
}
@keyframes celebration-confetti-wiggle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
@media (max-width: 760px) {
  .celebration-overlay { padding: 12px; }
  .celebration-card { border-radius: 24px; border-width: 4px; }
  .celebration-score { display: none; }
}

.celebration-sound-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(260px, 1.2fr);
  gap: 12px 16px;
  align-items: end;
  margin-top: 12px;
}

.celebration-sound-grid label {
  display: grid;
  gap: 6px;
}

.celebration-sound-grid select,
.celebration-sound-grid input[type="text"] {
  width: 100%;
}

.celebration-preview {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .celebration-sound-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.10.5: Sound-Upload und Auswahl */
.sound-upload-form {
    margin: 1rem 0 1.25rem;
    border: 1px solid rgba(255,255,255,.12);
}
.uploaded-sound-select {
    margin-top: .4rem;
    width: 100%;
}
.uploaded-sound-list {
    margin-top: 1rem;
    padding: .9rem;
    border-radius: 16px;
    background: rgba(0,0,0,.16);
}
.sound-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .65rem;
}
.sound-file-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .5rem;
    align-items: center;
    padding: .55rem;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
}
.sound-file-item code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v0.10.5: aufgeräumte Einstellungen mit Untermenüs */
.settings-menu { margin-top: 18px; }
.settings-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.settings-menu-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.settings-menu-links a:hover { background: rgba(255,255,255,0.14); }
.settings-group { padding: 0; overflow: hidden; }
.settings-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .01em;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  transform: translateY(-1px);
}
.settings-group[open] > summary::before { content: '▾'; }
.settings-group-body { padding: 20px 22px 22px; }
.volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.volume-grid label {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 800;
}
.volume-grid input[type="range"] { width: 100%; }
.volume-grid span { font-weight: 500; opacity: .9; }
@media (max-width: 640px) {
  .settings-menu-links a { flex: 1 1 160px; }
  .settings-group > summary { font-size: 1.1rem; padding: 15px 16px; }
  .settings-group-body { padding: 16px; }
}

.sound-duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
  margin: 0.8rem 0 1.2rem;
}
.sound-duration-grid label {
  display: grid;
  gap: 0.35rem;
}

/* v0.10.7 Sound-Untermenue */
.sound-submenu {
  margin: 1rem 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.14);
  overflow: hidden;
}
.sound-submenu > summary {
  cursor: pointer;
  padding: 0.9rem 1rem;
  font-weight: 800;
  font-size: 1.05rem;
  background: rgba(255,255,255,0.06);
}
.sound-submenu-body {
  padding: 1rem;
}
.compact-settings-grid {
  grid-template-columns: minmax(220px, 1fr);
}
.sound-settings-form {
  display: block;
}
.sound-event-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 0.85rem;
  align-items: end;
}
.sound-event-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sound-event-grid input[type="text"],
.sound-event-grid input[type="number"],
.sound-event-grid select {
  width: 100%;
}
.sound-event-grid input[type="range"] {
  width: 100%;
}
.sound-event-actions {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  min-height: 2.8rem;
}
.single-volume-grid {
  grid-template-columns: minmax(220px, 420px);
}
@media (max-width: 900px) {
  .sound-event-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
@media (max-width: 560px) {
  .sound-event-grid {
    grid-template-columns: 1fr;
  }
}

/* v0.10.8: Soundverwaltung mit Löschen und Zufalls-Playlists */
.sound-file-item {
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
}
.inline-delete-form {
  margin: 0;
}
.inline-delete-form .button {
  white-space: nowrap;
}
.sound-playlist-editor {
  grid-column: 1 / -1;
  margin: 1rem 0 0.25rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
}
.sound-playlist-editor h4 {
  margin: 0 0 0.35rem;
}
.playlist-table {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.playlist-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.85fr) minmax(180px, 2.2fr) repeat(3, minmax(70px, 0.75fr)) auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.13);
}
.playlist-head {
  font-size: 0.82rem;
  font-weight: 800;
  opacity: 0.82;
  background: rgba(255,255,255,0.08);
}
.playlist-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem !important;
  font-weight: 700;
}
.playlist-file {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.playlist-file code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playlist-file small {
  opacity: 0.7;
}
.playlist-row input[type="number"] {
  width: 100%;
}
.playlist-empty {
  grid-column: 1 / -1;
  padding: 0.8rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}
@media (max-width: 900px) {
  .playlist-row,
  .playlist-head {
    grid-template-columns: 1fr 1fr;
  }
  .playlist-head { display: none; }
  .playlist-row .playlist-file { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sound-file-item { grid-template-columns: 1fr; }
}

/* v0.10.9: vereinfachte Soundliste untereinander */
.random-sound-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}
.random-sound-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.7fr) auto minmax(90px, .75fr) minmax(90px, .75fr) minmax(90px, .75fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
}
.random-sound-head {
  font-size: 0.82rem;
  font-weight: 900;
  opacity: .82;
  background: rgba(255,255,255,0.09);
}
.random-sound-name {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}
.random-sound-name code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.random-sound-name small { opacity: .7; }
.random-sound-row input[type="number"] { width: 100%; }
.random-sound-row .button { white-space: nowrap; }
@media (max-width: 920px) {
  .random-sound-row,
  .random-sound-head {
    grid-template-columns: 1fr 1fr;
  }
  .random-sound-head { display: none; }
  .random-sound-name { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .random-sound-row { grid-template-columns: 1fr; }
}

/* v0.11.1 Soundverwaltung */
.sounds-page .settings-card { margin-bottom: 1rem; }
.sound-upload-form { align-items: end; }
.sound-events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.sound-event-card { display: flex; flex-direction: column; gap: .65rem; }
.sound-event-card h2 { margin-bottom: .15rem; }
.sound-event-compact-grid { display: grid; grid-template-columns: 92px 1fr; gap: .65rem; align-items: end; }
.sound-file-list { display: grid; gap: .38rem; }
.sound-file-row { display: grid; grid-template-columns: minmax(160px, 1.35fr) minmax(80px, .65fr) auto 54px 54px 54px 54px 54px auto; gap: .42rem; align-items: center; padding: .48rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.sound-file-head { font-weight: 700; background: rgba(255,255,255,.10); font-size: .86rem; }
.sound-display-name input { width: 100%; }
.sound-file-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; font-size: .76rem; opacity: .8; }
.sound-file-meta code { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.sound-file-meta small { opacity: .72; font-size: .7rem; }
.tiny-number, .sound-file-row input[type=number] { max-width: 54px; text-align: center; padding-left: .35rem; padding-right: .35rem; }
.sticky-save-bar { position: sticky; bottom: .75rem; display: flex; gap: .75rem; align-items: center; justify-content: flex-end; padding: .75rem; margin: 1rem 0; border-radius: 18px; background: rgba(20,20,20,.82); backdrop-filter: blur(8px); z-index: 20; }
@media (max-width: 980px) {
  .sound-events-grid { grid-template-columns: 1fr; }
  .sound-file-row { grid-template-columns: 1fr 1fr 1fr; }
  .sound-file-head { display: none; }
  .sound-file-row > * { min-width: 0; }
  .sound-display-name, .sound-file-meta { grid-column: span 3; }
}
@media (max-width: 560px) {
  .sound-file-row { grid-template-columns: 1fr 1fr; }
  .sound-display-name, .sound-file-meta { grid-column: span 2; }
}


/* v0.11.2: Abräumen auf Handy/Eingabeseite kompakter.
   Die grafische Dartscheibe darf nicht über der Touch-Eingabe liegen. */
@media (max-width: 920px) {
  .game-type-abraeumen:not(.mode-display) .game-layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .game-type-abraeumen:not(.mode-display) .touch-panel {
    order: 1;
    position: relative;
    z-index: 20;
  }

  .game-type-abraeumen:not(.mode-display) .score-section {
    order: 2;
    position: relative;
    z-index: 1;
    min-height: 0;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-layout.visual-board {
    height: auto;
    min-height: 0;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-statusline {
    padding: 6px 8px;
    gap: 8px;
    font-size: .86rem;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-visual-grid {
    min-height: 0;
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(220px, 42vh) auto;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-board-stage {
    min-height: 220px;
    max-height: 42vh;
    overflow: hidden;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-dartboard {
    width: min(94vw, 42vh, 420px);
    height: min(94vw, 42vh, 420px);
  }

  .game-type-abraeumen:not(.mode-display) .ab-zone {
    position: static;
    width: auto;
    pointer-events: auto;
  }

  .game-type-abraeumen:not(.mode-display) .ab-player-box {
    padding: 6px 7px;
    border-radius: 12px;
    min-height: 74px;
  }

  .game-type-abraeumen:not(.mode-display) .ab-player-box h2 {
    font-size: .95rem;
  }

  .game-type-abraeumen:not(.mode-display) .ab-player-box .abraeumen-member,
  .game-type-abraeumen:not(.mode-display) .ab-player-box .abraeumen-turn,
  .game-type-abraeumen:not(.mode-display) .ab-player-box .abraeumen-last {
    font-size: .72rem;
  }

  .game-type-abraeumen:not(.mode-display) .ab-player-box .abraeumen-score {
    font-size: 1.55rem;
  }
}

@media (max-width: 520px) {
  .game-type-abraeumen:not(.mode-display) .abraeumen-visual-grid {
    grid-template-rows: auto minmax(180px, 36vh) auto;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-board-stage {
    min-height: 180px;
    max-height: 36vh;
  }

  .game-type-abraeumen:not(.mode-display) .abraeumen-dartboard {
    width: min(92vw, 36vh, 340px);
    height: min(92vw, 36vh, 340px);
  }

  .game-type-abraeumen:not(.mode-display) .ab-player-box {
    min-height: 64px;
  }
}

/* v0.11.4: Fernsteuerung vom Handy zum Monitor */
.remote-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.remote-panel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.remote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.remote-grid .button {
  padding: 10px 8px;
  min-height: 42px;
}
.remote-hint {
  margin: 8px 0 0;
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  line-height: 1.25;
}
.remote-display-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.58);
  padding: 24px;
}
.remote-display-overlay[hidden] { display: none; }
.remote-display-card {
  max-width: 680px;
  width: min(680px, 92vw);
  text-align: center;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(35,35,35,.97), rgba(10,10,10,.97));
  border: 3px solid var(--accent, #f4d000);
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.remote-display-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--accent, #f4d000);
  margin-bottom: 12px;
}
.remote-display-text {
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  margin-bottom: 20px;
  color: #fff;
}
@media (max-width: 560px) {
  .remote-grid { grid-template-columns: 1fr; }
  .remote-panel { padding: 10px; }
  .remote-hint { font-size: .72rem; }
}

/* v0.11.5 Monitor-Fernsteuerung */
.monitor-body {
  margin: 0;
  overflow: hidden;
  background: #05070b;
}
.monitor-shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #05070b;
}
.monitor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0,0,0,.85);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  z-index: 5;
}
.monitor-toolbar strong { color: #ffd55a; }
.monitor-toolbar span { flex: 1; opacity: .8; font-size: .9rem; }
.monitor-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #05070b;
}
.monitor-body:fullscreen .monitor-toolbar { opacity: .18; transition: opacity .2s ease; }
.monitor-body:fullscreen .monitor-toolbar:hover { opacity: 1; }
@media (max-width: 720px) {
  .monitor-toolbar { font-size: .85rem; padding: 6px; }
  .monitor-toolbar .button { padding: 6px 8px; font-size: .8rem; }
}

/* v0.11.8: Tactics-Handyeingabe robust trennen.
   Wenn Tactics nur auf dem Handy gespielt wird, darf die große Tabelle die Eingabe nicht überdecken. */
@media (max-width: 920px) {
  .game-body.game-type-tactics.mode-input {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .game-body.game-type-tactics.mode-input .game-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .game-body.game-type-tactics.mode-input .touch-panel {
    order: 1 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    align-self: stretch !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }
  .game-body.game-type-tactics.mode-input .score-section {
    order: 2 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .game-body.game-type-tactics.mode-input .players-grid.tactics-grid,
  .game-body.game-type-tactics.mode-input .tactics-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .game-body.game-type-tactics.mode-input .tt-wrap,
  .game-body.game-type-tactics.mode-input .tactics-table-wrap {
    height: auto !important;
    max-height: 52vh !important;
    min-height: 220px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .game-body.game-type-tactics.mode-input .tactics-real-table {
    height: auto !important;
    min-width: 560px !important;
  }
  .game-body.game-type-tactics.mode-input .tactics-real-table thead tr:first-child {
    height: 38px !important;
  }
  .game-body.game-type-tactics.mode-input .tactics-real-table thead tr:nth-child(2) {
    height: 32px !important;
  }
  .game-body.game-type-tactics.mode-input .tt-cell {
    height: 42px !important;
  }
  .game-body.game-type-tactics.mode-input .tt-name {
    font-size: clamp(.9rem, 4vw, 1.25rem) !important;
  }
  .game-body.game-type-tactics.mode-input .tt-target,
  .game-body.game-type-tactics.mode-input .tt-points {
    font-size: clamp(1rem, 5vw, 1.5rem) !important;
  }
  .game-body.game-type-tactics.mode-input .tt-x {
    font-size: clamp(1.15rem, 7vw, 2rem) !important;
  }
}

@media (max-width: 480px) {
  .game-body.game-type-tactics.mode-input .tt-wrap,
  .game-body.game-type-tactics.mode-input .tactics-table-wrap {
    max-height: 46vh !important;
    min-height: 190px !important;
  }
  .game-body.game-type-tactics.mode-input .tactics-real-table {
    min-width: 520px !important;
  }
  .game-body.game-type-tactics.mode-input .tt-cell {
    height: 38px !important;
  }
}

/* v0.11.8: Nur-Handy-Modus: Eingabe oben, Anzeige direkt darunter.
   So bleibt die Eingabe bedienbar und darunter sieht man trotzdem einen Teil der Ausgabe. */
@media (max-width: 920px) {
  .game-body.mode-input.game-type-tactics .game-layout,
  .game-body.mode-input.game-type-abraeumen .game-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .game-body.mode-input.game-type-tactics .touch-panel,
  .game-body.mode-input.game-type-abraeumen .touch-panel {
    order: 1 !important;
    position: static !important;
    z-index: 10 !important;
  }
  .game-body.mode-input.game-type-tactics .score-section,
  .game-body.mode-input.game-type-abraeumen .score-section {
    order: 2 !important;
    margin-top: 0 !important;
    max-height: 56vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* v0.11.9: Handy-Layout aufräumen.
   Erst die Eingabe, darunter die Ausgabe, ganz unten die Monitorsteuerung. */
@media (max-width: 920px) {
  .game-body:not(.mode-display).game-type-tactics,
  .game-body:not(.mode-display).game-type-abraeumen {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .game-body:not(.mode-display).game-type-tactics .game-layout,
  .game-body:not(.mode-display).game-type-abraeumen .game-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  .game-body:not(.mode-display).game-type-tactics .touch-panel,
  .game-body:not(.mode-display).game-type-abraeumen .touch-panel {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 5 !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: stretch !important;
  }

  .game-body:not(.mode-display).game-type-tactics .score-section,
  .game-body:not(.mode-display).game-type-abraeumen .score-section {
    order: 2 !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 58vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 0 !important;
  }

  .game-body:not(.mode-display).game-type-tactics .remote-panel,
  .game-body:not(.mode-display).game-type-abraeumen .remote-panel,
  .game-body:not(.mode-display) .remote-panel {
    order: 99 !important;
    margin-top: 12px !important;
  }

  .game-body:not(.mode-display).game-type-tactics .button-row.full,
  .game-body:not(.mode-display).game-type-abraeumen .button-row.full {
    order: 20 !important;
  }

  .game-body:not(.mode-display).game-type-tactics .players-grid.tactics-grid,
  .game-body:not(.mode-display).game-type-tactics .tactics-layout,
  .game-body:not(.mode-display).game-type-tactics .tactics-table-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .game-body:not(.mode-display).game-type-tactics .tactics-table-wrap,
  .game-body:not(.mode-display).game-type-tactics .tt-wrap {
    max-height: 52vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .game-body:not(.mode-display).game-type-tactics .tactics-table {
    min-width: 520px !important;
  }
}

@media (max-width: 520px) {
  .game-body:not(.mode-display).game-type-tactics .score-section,
  .game-body:not(.mode-display).game-type-abraeumen .score-section {
    max-height: 50vh !important;
  }
  .game-body:not(.mode-display) .remote-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .game-body:not(.mode-display) .remote-grid .button {
    min-height: 38px !important;
    padding: 8px 6px !important;
    font-size: .85rem !important;
  }
}

/* v0.12.0: Monitorsteuerung strukturell aus der Eingabe herausgelöst.
   Sie steht im HTML nach dem Spielbereich und damit wirklich bei jedem Spiel ganz unten. */
.remote-panel-bottom {
  width: min(1180px, calc(100% - 20px));
  margin: 12px auto 18px !important;
  flex: none !important;
  order: 9999 !important;
  position: static !important;
  clear: both !important;
}
.game-body.mode-display .remote-panel-bottom {
  display: none !important;
}
@media (max-width: 920px) {
  .remote-panel-bottom {
    width: calc(100% - 16px);
    margin: 10px 8px 16px !important;
  }
  .game-body:not(.mode-display) .touch-panel .remote-panel {
    display: none !important;
  }
}


/* v0.12.1: Tauziehen auf Handy wie Tactics/Abräumen sauber trennen.
   Eingabe oben, Ausgabe darunter, Monitorsteuerung ganz am Ende. */
@media (max-width: 920px) {
  .game-body:not(.mode-display).game-type-tauziehen {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .game-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .touch-panel {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 5 !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: stretch !important;
    display: block !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .score-section {
    order: 2 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 58vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 0 !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .players-grid.tauziehen-grid,
  .game-body:not(.mode-display).game-type-tauziehen .tauziehen-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-score-head {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-side-player,
  .game-body:not(.mode-display).game-type-tauziehen .tau-main-score {
    min-height: 48px !important;
    padding: 6px 8px !important;
    text-align: left !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-side-name {
    font-size: clamp(1.05rem, 6vw, 1.6rem) !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-main-score {
    font-size: clamp(1.6rem, 8vw, 2.6rem) !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-table {
    min-width: 560px !important;
    height: auto !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-field {
    min-height: 30px !important;
    font-size: 1.1rem !important;
  }
}
@media (max-width: 520px) {
  .game-body:not(.mode-display).game-type-tauziehen .score-section {
    max-height: 50vh !important;
  }
  .game-body:not(.mode-display).game-type-tauziehen .tau-table {
    min-width: 520px !important;
  }
}

/* v0.12.1: Popup ist jetzt per Klick schließbar. */
.celebration-close-hint {
  margin-top: 12px;
  font-size: clamp(.78rem, 1.5vw, 1rem);
  color: rgba(255,255,255,.72);
  font-weight: 700;
}
.celebration-overlay.show {
  cursor: pointer;
  pointer-events: auto;
}


.remote-autodarts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.remote-autodarts h4 {
  margin: 0 0 8px;
  font-size: .95rem;
}
.remote-grid-small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .remote-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remote-grid-small .button { font-size: .78rem; padding: 8px 6px; }
}

/* v0.12.5: Autodarts TAKEOUT deutlich und dauerhaft sichtbar machen. */
.game-message.takeout-active {
  background: linear-gradient(135deg, rgba(255, 193, 7, .95), rgba(255, 112, 67, .92));
  border-color: rgba(255, 255, 255, .55);
  color: #1b1200;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, .26), 0 14px 34px rgba(0, 0, 0, .28);
  animation: takeoutPulse 1s ease-in-out infinite alternate;
  text-transform: none;
}

@keyframes takeoutPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.012); filter: brightness(1.08); }
}

.mode-display .game-message.takeout-active {
  min-height: 88px;
  font-size: clamp(1.7rem, 3.3vw, 3.2rem);
  justify-content: center;
  text-align: center;
}

.mode-input .game-message.takeout-active,
.mode-combined .game-message.takeout-active {
  min-height: 60px;
  font-size: clamp(1.15rem, 4.2vw, 1.6rem);
}


/* v0.12.7: Highscore-Anzeige übersichtlicher */
.highscore-card .highscore-total {
  font-size: clamp(4rem, 10vw, 10rem);
}
.highscore-throw-line {
  align-items: center;
  gap: 12px;
}
.highscore-throw-line .darts-row {
  flex: 1 1 auto;
  min-width: 0;
}
.highscore-turn-points {
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  text-align: center;
}
.highscore-turn-points span {
  font-size: .75rem;
  opacity: .82;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.highscore-turn-points strong {
  font-size: clamp(1.35rem, 2.4vw, 2.35rem);
  line-height: 1;
}
@media (max-width: 760px) {
  .highscore-card .highscore-total { font-size: clamp(3.2rem, 18vw, 6rem); }
  .highscore-throw-line { gap: 8px; }
  .highscore-turn-points { min-width: 76px; padding: 7px 8px; }
  .highscore-turn-points strong { font-size: 1.25rem; }
  .highscore-turn-points span { font-size: .62rem; }
}


/* v0.12.8: Highscore-Wurfzeile besser lesbar und nicht mehr als kleiner Text unten links */
.highscore-card {
  grid-template-rows: auto minmax(120px, 1fr) auto;
}
.highscore-card .highscore-total {
  align-self: center;
  justify-self: center;
  line-height: .9;
}
.highscore-throw-line {
  align-self: end;
  width: 100%;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 230, 0, .18);
  box-sizing: border-box;
}
.highscore-darts-row {
  gap: 7px;
  flex-wrap: wrap;
}
.highscore-dart-pill {
  min-width: auto;
  padding: 7px 9px;
  font-size: clamp(.82rem, 1.05vw, 1.05rem);
  white-space: nowrap;
}
.highscore-turn-points {
  min-width: 96px;
  flex: 0 0 auto;
}
.mode-input .highscore-throw-line,
.mode-combined .highscore-throw-line {
  padding: 8px;
}
@media (max-width: 760px) {
  .highscore-dart-pill { font-size: .78rem; padding: 6px 7px; }
  .highscore-turn-points { min-width: 72px; }
}


/* v0.13.1: bessere Lesbarkeit bei Highscore mit vielen Spielern */
.players-grid[data-count="7"] .player-card,
.players-grid[data-count="8"] .player-card {
  padding: clamp(8px, 1vw, 14px);
  gap: 6px;
}
.players-grid[data-count="7"] .player-card h2,
.players-grid[data-count="8"] .player-card h2 {
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.players-grid[data-count="7"] .score,
.players-grid[data-count="8"] .score,
.players-grid[data-count="7"] .highscore-card .highscore-total,
.players-grid[data-count="8"] .highscore-card .highscore-total {
  font-size: clamp(2.4rem, 4.8vw, 5.2rem);
  letter-spacing: -.05em;
  max-width: 100%;
  overflow: visible;
}
.players-grid[data-count="7"] .small-meta,
.players-grid[data-count="8"] .small-meta,
.highscore-card .small-meta {
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  font-weight: 1000;
  color: rgba(255,255,255,.92);
}
.players-grid[data-count="7"] .highscore-throw-line,
.players-grid[data-count="8"] .highscore-throw-line {
  padding: 7px;
  gap: 6px;
}
.players-grid[data-count="7"] .highscore-dart-pill,
.players-grid[data-count="8"] .highscore-dart-pill {
  font-size: clamp(.72rem, .9vw, .95rem);
  padding: 5px 6px;
}
.players-grid[data-count="7"] .highscore-turn-points,
.players-grid[data-count="8"] .highscore-turn-points {
  min-width: 70px;
}

/* v0.13.4: Autodarts-Status dauerhaft sichtbar, ohne blinkenden Textwechsel. */
.game-message.autodarts-status-active {
  background: linear-gradient(135deg, rgba(42, 125, 225, .88), rgba(35, 73, 150, .84));
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  text-transform: none;
}
.game-message.autodarts-status-throw {
  background: linear-gradient(135deg, rgba(31, 164, 86, .92), rgba(13, 104, 64, .88));
}
.game-message.autodarts-status-stop {
  background: linear-gradient(135deg, rgba(180, 38, 38, .92), rgba(110, 20, 20, .88));
}
.game-message.autodarts-status-wait {
  background: linear-gradient(135deg, rgba(50, 88, 150, .90), rgba(32, 54, 102, .88));
}


/* v0.13.9: eindeutige Autodarts-Farben pro Zustand */
.game-message.autodarts-status-active {
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-transform: none;
}
.game-message.autodarts-status-throw {
  background: linear-gradient(135deg, rgba(23, 170, 88, .98), rgba(11, 112, 64, .96));
  border-color: rgba(199, 255, 218, .55);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(35, 210, 115, .25), 0 12px 32px rgba(0,0,0,.24);
  animation: none;
}
.game-message.autodarts-status-takeout {
  background: linear-gradient(135deg, rgba(224, 38, 38, .98), rgba(125, 16, 20, .96));
  border-color: rgba(255,255,255,.55);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 50, 50, .28), 0 14px 36px rgba(0,0,0,.30);
  animation: autodartsRedPulse .85s ease-in-out infinite alternate;
}
.game-message.autodarts-status-pulling {
  background: linear-gradient(135deg, rgba(255, 151, 30, .98), rgba(193, 80, 10, .96));
  border-color: rgba(255,255,255,.55);
  color: #1b1000;
  box-shadow: 0 0 0 3px rgba(255, 173, 50, .30), 0 14px 36px rgba(0,0,0,.30);
  animation: autodartsOrangePulse 1s ease-in-out infinite alternate;
}
.game-message.autodarts-status-stop {
  background: linear-gradient(135deg, rgba(110, 110, 120, .96), rgba(48, 48, 58, .96));
  border-color: rgba(255,255,255,.35);
  color: #fff;
  animation: none;
}
.game-message.autodarts-status-other,
.game-message.autodarts-status-wait {
  background: linear-gradient(135deg, rgba(42, 126, 220, .96), rgba(34, 72, 145, .96));
  border-color: rgba(255,255,255,.35);
  color: #fff;
  animation: none;
}
@keyframes autodartsRedPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.014); filter: brightness(1.13); }
}
@keyframes autodartsOrangePulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.010); filter: brightness(1.10); }
}

/* v0.13.10: Autodarts-Status wie ein kompaktes Dashboard, ohne das Spielfeld zu sprengen. */
.game-message.autodarts-status-active {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  line-height: 1.12;
  overflow: hidden;
}
.autodarts-status-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 4vw, 56px);
  height: clamp(34px, 4vw, 56px);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  font-size: clamp(1.25rem, 2.6vw, 2.2rem);
}
.autodarts-status-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autodarts-inline-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}
.autodarts-inline-actions button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.autodarts-inline-actions button:hover { filter: brightness(1.08); }
.mode-display .game-message.autodarts-status-active {
  min-height: clamp(64px, 8vh, 112px);
  font-size: clamp(1.35rem, 3vw, 3.35rem);
  justify-content: center;
}
.mode-display .autodarts-status-text { text-align: center; }
.mode-display .autodarts-inline-actions { position: absolute; right: 22px; }
.mode-combined .game-message.autodarts-status-active,
.mode-input .game-message.autodarts-status-active {
  min-height: clamp(48px, 6vh, 74px);
  font-size: clamp(1rem, 2vw, 1.55rem);
}
@media (max-width: 880px) {
  .game-message.autodarts-status-active { gap: 10px; }
  .autodarts-inline-actions button { padding: 8px 10px; font-size: .86rem; }
  .autodarts-status-text { white-space: normal; }
}
@media (max-width: 520px) {
  .autodarts-status-icon { width: 30px; height: 30px; font-size: 1rem; }
  .autodarts-inline-actions { display: none; }
}

/* v0.14.0 KO-Turnier */
.ko-help-box {
    border: 1px solid rgba(255, 221, 0, .35);
    background: rgba(255, 221, 0, .08);
    color: var(--text, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    font-weight: 800;
}
.ko-winner-box {
    font-size: clamp(1.2rem, 2.2vw, 2rem);
}
.tournament-mode-row .participant-mode-card span {
    font-size: 1.05rem;
}
.ko-options[hidden], .round-robin-options[hidden] { display: none !important; }

/* v0.14.1 Turnier-Komfort und KO-Farben */
.tournament-action-row {
    align-items: center;
}
.tournament-nav-buttons {
    align-items: center;
    justify-content: flex-end;
}
.inline-form {
    margin: 0;
    display: inline-flex;
}
.tournament-overview-card {
    border-color: rgba(255, 212, 0, .28);
    background: linear-gradient(135deg, rgba(255,212,0,.08), rgba(255,255,255,.04));
}
.ko-bye-list {
    margin-top: .8rem;
    padding: .75rem .9rem;
    border-radius: 14px;
    background: rgba(76, 170, 255, .16);
    border: 1px solid rgba(76, 170, 255, .38);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    align-items: center;
}
.ko-bye-list span {
    background: rgba(76, 170, 255, .24);
    border: 1px solid rgba(76, 170, 255, .36);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-weight: 800;
}
.standings-table thead th {
    background: rgba(255, 212, 0, .16);
    color: var(--text, #fff);
}
.standings-table tbody tr:nth-child(1) {
    background: rgba(52, 211, 153, .14);
}
.standings-table tbody tr:nth-child(2) {
    background: rgba(255, 255, 255, .06);
}
.match-card {
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.match-card.status-open,
.match-card.status-pending {
    background: rgba(255,255,255,.055);
}
.match-card.status-running,
.match-card.match-current {
    border-color: #ffd400;
    background: linear-gradient(135deg, rgba(255, 212, 0, .22), rgba(255, 212, 0, .07));
    box-shadow: 0 0 0 3px rgba(255,212,0,.12), 0 12px 30px rgba(0,0,0,.22);
}
.match-card.match-current::before {
    content: "🟡 läuft";
    font-weight: 900;
    color: #111;
    background: #ffd400;
    border-radius: 999px;
    padding: .2rem .55rem;
    justify-self: start;
    grid-column: 1 / -1;
}
.match-card.status-finished {
    opacity: 1;
    border-color: rgba(52, 211, 153, .45);
    background: linear-gradient(135deg, rgba(52, 211, 153, .16), rgba(255,255,255,.04));
}
.match-winner {
    color: #d8ffe8;
    background: rgba(52, 211, 153, .28);
    border: 1px solid rgba(52, 211, 153, .48);
    border-radius: 999px;
    padding: .2rem .55rem;
}
.match-winner::before {
    content: "🏆 ";
}
.match-loser {
    color: rgba(255,255,255,.62);
    text-decoration: line-through;
}
.match-card.status-finished .match-meta strong {
    color: #d8ffe8;
}
.ko-winner-box {
    background: linear-gradient(135deg, rgba(52, 211, 153, .26), rgba(255,212,0,.12));
    border-color: rgba(52, 211, 153, .55);
}
@media (max-width: 760px) {
    .tournament-nav-buttons {
        justify-content: stretch;
        width: 100%;
    }
    .tournament-nav-buttons .button,
    .tournament-nav-buttons form,
    .tournament-nav-buttons form button {
        width: 100%;
    }
    .match-card.match-current::before {
        grid-column: auto;
    }
}

/* v0.14.2 Startseiten-/Spielvorlagen-Aufräumung */
.compact-hero {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.game-overview-grid .simple-game-card {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.game-overview-grid .simple-game-card h3 {
    margin-bottom: 0.8rem;
}
.tournament-home-section {
    margin-top: 1.2rem;
}
.create-variant-card {
    margin-top: 1.2rem;
    border-style: dashed;
}
.create-variant-card h2 {
    margin-bottom: 0.25rem;
}
@media (max-width: 700px) {
    .game-overview-grid .simple-game-card {
        min-height: auto;
    }
}

/* v0.14.3: einheitliche Symbolbuttons und klickbare Spielvorlagen */
.variant-card-clickable {
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.variant-card-clickable:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 214, 10, .55);
    box-shadow: 0 0 0 1px rgba(255, 214, 10, .22), 0 10px 24px rgba(0,0,0,.24);
}
.icon-button {
    min-width: 2.6rem;
    width: 2.6rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.08rem;
    line-height: 1;
}
.variant-card .button-row {
    align-items: center;
}
.variant-card .button-row form {
    margin: 0;
}
@media (max-width: 640px) {
    .icon-button {
        min-width: 2.8rem;
        width: 2.8rem;
        height: 2.5rem;
    }
}

/* v0.15.0: deutlichere Legs/Sets-Anzeige */
.match-mini {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  margin: .25rem 0 .15rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.match-mini span { opacity: .95; }
.match-stand-line {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  margin: .25rem 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,202,40,.24), rgba(80,200,120,.16));
  border: 1px solid rgba(255,255,255,.22);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 950;
  letter-spacing: .02em;
}
.tt-player .match-mini,
.tau-side-player .match-mini,
.abraeumen-player .match-mini,
.highscore-card .match-mini,
.player-card .match-mini {
  max-width: 100%;
}
body.mode-input .match-mini,
body.mode-combined .match-mini {
  font-size: .95rem;
  padding: .14rem .42rem;
}
@media (max-width: 700px) {
  .match-mini { font-size: .86rem; padding: .12rem .35rem; }
  .match-stand-line { font-size: .95rem; padding: .22rem .5rem; }
}

/* v0.15.4: aufgeräumte Vorlagen- und Bildschirmseiten */
.page.wide {
  width: min(1500px, calc(100% - 30px));
}

.create-variant-card .button-row {
  align-items: stretch;
}
.create-variant-card .button-row .button.big {
  flex: 1 1 420px;
  min-width: 260px;
}
.create-variant-card .button-row .button.ghost:not(.icon-button) {
  flex: 0 1 260px;
  min-width: 220px;
}

.clean-screen-choice.role-grid {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  align-items: stretch;
}
.clean-screen-choice .role-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clean-screen-choice .role-card h2 {
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: 1.08;
}
.clean-screen-choice .role-card > .muted:first-of-type {
  flex: 1 1 auto;
}
.clean-screen-choice .role-card .button.big {
  width: 100%;
}
.copy-line input {
  min-width: 0;
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copy-line .button {
  min-width: 140px;
}
.secondary-action {
  min-height: 48px;
  font-size: .95rem;
  opacity: .88;
}
.muted.small {
  font-size: .95rem;
  line-height: 1.35;
}
@media (max-width: 1060px) {
  .clean-screen-choice.role-grid {
    grid-template-columns: 1fr;
  }
  .clean-screen-choice .role-card {
    min-height: auto;
  }
}
@media (max-width: 640px) {
  .create-variant-card .button-row .button.big,
  .create-variant-card .button-row .button.ghost:not(.icon-button) {
    flex-basis: 100%;
    min-width: 0;
  }
  .copy-line {
    grid-template-columns: 1fr;
  }
  .copy-line .button {
    width: 100%;
  }
}

/* v0.16.0: Echo */
.echo-grid {
  gap: clamp(12px, 1.6vw, 24px);
}
.echo-info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,230,0,.22);
}
.echo-info div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.echo-info span,
.echo-role {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
  font-weight: 900;
}
.echo-info strong {
  font-size: clamp(1.2rem, 2.6vw, 2.4rem);
  line-height: 1;
}
.echo-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,230,0,.14);
  border: 1px solid rgba(255,230,0,.25);
  color: #ffe600;
  margin-top: 4px;
}
.echo-role.chaser {
  background: rgba(111, 196, 255, .14);
  border-color: rgba(111, 196, 255, .25);
  color: #9dddff;
}
.echo-total {
  letter-spacing: -.06em;
}
.echo-card .highscore-turn-points small {
  font-size: .78rem;
  opacity: .82;
  min-height: 1em;
}
@media (max-width: 760px) {
  .echo-info { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .echo-info div { min-height: 54px; }
}

/* v0.16.1: Echo Lesbarkeit */
.echo-stage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr);
  gap: clamp(10px, 1.5vw, 18px);
  align-items: stretch;
}
.echo-live-main {
  min-height: clamp(120px, 16vw, 190px);
  border-radius: 24px;
  border: 2px solid rgba(255,230,0,.42);
  background: radial-gradient(circle at top, rgba(255,230,0,.24), rgba(0,0,0,.42));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(12px, 2vw, 24px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.echo-live-main span,
.echo-active-throw span,
.echo-minus-box span {
  font-size: clamp(.72rem, 1vw, .92rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .86;
}
.echo-live-main strong {
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: .86;
  letter-spacing: -.08em;
  font-weight: 1000;
}
.echo-live-main small {
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 900;
  opacity: .9;
}
.echo-stage .echo-info {
  grid-column: auto;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  align-content: stretch;
  height: 100%;
}
.echo-stage .echo-info div {
  min-height: clamp(84px, 10vw, 130px);
}
.echo-stage .echo-info small {
  font-size: .78rem;
  opacity: .72;
  font-weight: 800;
  text-align: center;
}
.echo-minus-box {
  margin: 10px 0 12px;
  border-radius: 20px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.echo-minus-box strong {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.07em;
}
.echo-minus-box small {
  opacity: .68;
  font-weight: 800;
}
.echo-active-throw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 12px;
}
.echo-active-throw div {
  min-height: 112px;
  border-radius: 18px;
  background: rgba(255,230,0,.12);
  border: 1px solid rgba(255,230,0,.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}
.echo-active-throw strong {
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: .92;
  letter-spacing: -.07em;
}
.echo-active-throw small {
  font-size: clamp(.9rem, 1.4vw, 1.25rem);
  font-weight: 900;
  opacity: .86;
}
.echo-card .highscore-turn-points strong::before {
  content: none;
}
@media (max-width: 1050px) {
  .echo-stage {
    grid-template-columns: 1fr;
  }
  .echo-stage .echo-info {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}
@media (max-width: 760px) {
  .echo-stage .echo-info {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .echo-active-throw {
    grid-template-columns: 1fr;
  }
  .echo-minus-box {
    align-items: center;
  }
}

/* v0.16.2: Echo Rollen und Wurfstand deutlicher */
.echo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 34vh, 460px);
}
.echo-card.setter-card {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 230, 0, .16), transparent 44%),
    linear-gradient(135deg, rgba(255, 230, 0, .13), rgba(0, 0, 0, .28));
  border-color: rgba(255, 230, 0, .58);
}
.echo-card.chaser-card {
  background:
    radial-gradient(circle at 50% 20%, rgba(75, 190, 255, .18), transparent 44%),
    linear-gradient(135deg, rgba(75, 190, 255, .14), rgba(0, 0, 0, .28));
  border-color: rgba(75, 190, 255, .58);
}
.echo-card.active.setter-card {
  box-shadow: 0 0 0 4px rgba(255, 230, 0, .42), 0 24px 60px rgba(0, 0, 0, .38);
}
.echo-card.active.chaser-card {
  box-shadow: 0 0 0 4px rgba(75, 190, 255, .42), 0 24px 60px rgba(0, 0, 0, .38);
}
.echo-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 88px;
}
.echo-card-top h2 {
  margin: 0;
  justify-self: start;
  text-align: left;
}
.echo-card-top .echo-role {
  justify-self: end;
  margin-top: 0;
  font-size: clamp(.85rem, 1.3vw, 1.05rem);
  padding: 8px 13px;
}
.echo-card-top .player-match-badge,
.echo-card-top .small-meta,
.echo-card-top .team-info,
.echo-card-top .team-members,
.echo-card-top .team-member-list,
.echo-card-top .team-active-member {
  grid-column: 1 / -1;
}
.echo-score-badge {
  justify-self: center;
  align-self: start;
  min-width: 118px;
  padding: 7px 16px 8px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.echo-score-badge span {
  display: block;
  font-size: clamp(.62rem, .9vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 1000;
  opacity: .76;
}
.echo-score-badge strong {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 3.1rem);
  line-height: .92;
  letter-spacing: -.06em;
}
.echo-big-throw {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(170px, 24vh, 310px);
  margin: clamp(8px, 1vw, 14px) 0;
  padding: clamp(10px, 1.6vw, 22px);
  border-radius: 26px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .12);
}
.setter-card .echo-big-throw {
  background: radial-gradient(circle at center, rgba(255, 230, 0, .18), rgba(0,0,0,.28));
}
.chaser-card .echo-big-throw {
  background: radial-gradient(circle at center, rgba(75, 190, 255, .20), rgba(0,0,0,.28));
}
.echo-big-throw span {
  font-size: clamp(.9rem, 1.4vw, 1.25rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 1000;
  opacity: .82;
}
.echo-big-throw strong {
  font-size: clamp(7rem, 17vw, 17rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 1000;
}
.echo-big-throw small {
  max-width: 100%;
  font-size: clamp(.9rem, 1.5vw, 1.35rem);
  font-weight: 900;
  opacity: .86;
  overflow-wrap: anywhere;
}
.echo-darts-line {
  margin-top: auto;
}
.echo-darts-line .darts-row {
  justify-content: center;
}
.echo-darts-line .highscore-dart-pill {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  min-width: clamp(64px, 8vw, 96px);
  min-height: 42px;
}
.echo-live-main.is-setter-phase {
  border-color: rgba(255, 230, 0, .54);
  background: radial-gradient(circle at top, rgba(255, 230, 0, .28), rgba(0,0,0,.42));
}
.echo-live-main.is-chaser-phase {
  border-color: rgba(75, 190, 255, .54);
  background: radial-gradient(circle at top, rgba(75, 190, 255, .30), rgba(0,0,0,.42));
}
@media (max-width: 760px) {
  .echo-card-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .echo-card-top h2,
  .echo-card-top .echo-role,
  .echo-score-badge {
    justify-self: center;
  }
  .echo-big-throw strong {
    font-size: clamp(5rem, 34vw, 10rem);
  }
}

/* v0.16.3: Echo Ergebnis sichtbar halten und aktive Box klarer markieren */
.echo-round-result {
  grid-column: 1 / -1;
  border: 4px solid rgba(255, 255, 255, .28);
  border-radius: 26px;
  padding: clamp(12px, 1.6vw, 22px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .16), transparent 42%),
    rgba(0, 0, 0, .38);
  box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.echo-round-result.ended-by-miss {
  border-color: rgba(255, 95, 95, .58);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 95, 95, .20), transparent 44%),
    rgba(0, 0, 0, .42);
}
.echo-result-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.echo-result-title span {
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
}
.echo-result-title strong {
  font-size: clamp(1.15rem, 2.1vw, 2rem);
  text-align: right;
}
.echo-result-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.echo-result-numbers > div {
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  text-align: center;
}
.echo-result-numbers span,
.echo-result-darts span {
  display: block;
  font-size: clamp(.7rem, .95vw, .85rem);
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}
.echo-result-numbers strong {
  display: block;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  margin-top: 4px;
}
.echo-result-numbers b {
  display: block;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: .95;
  margin-top: 2px;
}
.echo-result-numbers small {
  display: block;
  font-weight: 900;
  opacity: .78;
}
.echo-result-darts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.echo-result-darts > div {
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.echo-result-darts .darts-row {
  justify-content: center;
  margin-top: 8px;
}
.echo-card {
  border-width: 4px;
}
.echo-card.active {
  border-width: 8px;
  transform: translateY(-3px) scale(1.01);
}
.echo-card.active.setter-card {
  border-color: rgba(255, 235, 40, .96);
  box-shadow: 0 0 0 8px rgba(255, 230, 0, .46), 0 0 42px rgba(255,230,0,.22), 0 24px 60px rgba(0, 0, 0, .46);
}
.echo-card.active.chaser-card {
  border-color: rgba(95, 205, 255, .98);
  box-shadow: 0 0 0 8px rgba(75, 190, 255, .46), 0 0 42px rgba(75,190,255,.24), 0 24px 60px rgba(0, 0, 0, .46);
}
.echo-card .active-badge {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  border-width: 3px;
}
.echo-card-top .echo-role {
  border-width: 3px;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
}
@media (max-width: 760px) {
  .echo-result-title {
    display: block;
    text-align: center;
  }
  .echo-result-title strong {
    display: block;
    text-align: center;
    margin-top: 6px;
  }
  .echo-result-numbers,
  .echo-result-darts {
    grid-template-columns: 1fr;
  }
  .echo-card.active {
    border-width: 6px;
  }
}

/* v0.16.4: Echo kompakt, damit Anzeige ohne Scrollen passt */
.echo-stage-compact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
.echo-status-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 2px solid rgba(255,255,255,.14);
}
.echo-status-row.is-setter-phase {
  border-color: rgba(255,230,0,.48);
  background: linear-gradient(90deg, rgba(255,230,0,.14), rgba(0,0,0,.34));
}
.echo-status-row.is-chaser-phase {
  border-color: rgba(75,190,255,.50);
  background: linear-gradient(90deg, rgba(75,190,255,.15), rgba(0,0,0,.34));
}
.echo-status-row > div {
  min-height: 54px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px 7px;
}
.echo-status-row span,
.echo-result-compact strong {
  font-size: clamp(.65rem, .9vw, .78rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 1000;
  opacity: .78;
}
.echo-status-row strong {
  font-size: clamp(1.45rem, 2.7vw, 2.55rem);
  line-height: .9;
  font-weight: 1000;
}
.echo-status-row small {
  font-weight: 900;
  opacity: .78;
}
.echo-result-compact {
  display: grid;
  grid-template-columns: auto repeat(4, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 3px solid rgba(255,230,0,.42);
  box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09);
  overflow: hidden;
}
.echo-result-compact.ended-by-miss {
  border-color: rgba(255,95,95,.62);
  background: rgba(255,95,95,.12);
}
.echo-result-compact span {
  font-size: clamp(.9rem, 1.35vw, 1.15rem);
  font-weight: 1000;
  white-space: nowrap;
}
.echo-result-compact b {
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  font-weight: 1000;
  white-space: nowrap;
}
.echo-result-compact small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  opacity: .82;
}
.game-body.game-type-echo .players-grid.echo-grid {
  gap: clamp(8px, 1vw, 14px);
}
.game-body.game-type-echo .echo-card {
  min-height: clamp(250px, 30vh, 390px);
  padding: clamp(12px, 1.2vw, 20px);
}
.game-body.game-type-echo .echo-card-top {
  min-height: 68px;
  gap: 7px;
}
.game-body.game-type-echo .echo-big-throw {
  min-height: clamp(130px, 18vh, 230px);
  margin: clamp(4px, .65vw, 8px) 0;
  padding: clamp(8px, 1vw, 16px);
}
.game-body.game-type-echo .echo-big-throw strong {
  font-size: clamp(6rem, 13vw, 13rem);
}
.game-body.game-type-echo .echo-darts-line .highscore-dart-pill {
  min-height: 36px;
  min-width: clamp(54px, 6.5vw, 82px);
}
.mode-display.game-type-echo .game-layout {
  padding: 8px 10px;
}
.mode-display.game-type-echo .game-message {
  min-height: 34px;
  padding: 7px 11px;
  margin-bottom: 8px;
}
.mode-display.game-type-echo .players-grid.echo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  min-height: 0;
}
.mode-display.game-type-echo .echo-stage-compact {
  grid-column: 1 / -1;
}
.mode-display.game-type-echo .echo-card {
  min-height: clamp(250px, calc(100vh - 285px), 560px) !important;
}
.mode-display.game-type-echo .players-grid.echo-grid:has(.echo-result-compact) .echo-card {
  min-height: clamp(235px, calc(100vh - 340px), 520px) !important;
}
.mode-display.game-type-echo .echo-card.active {
  border-width: 9px;
}
@media (max-width: 920px) {
  .echo-status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .echo-result-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .echo-result-compact small {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .mode-display.game-type-echo .players-grid.echo-grid,
  .game-body.game-type-echo .players-grid.echo-grid {
    grid-template-columns: 1fr !important;
  }
  .echo-status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .echo-result-compact {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


/* v0.16.9: Echo Aktiv-Hinweis nicht mehr über Rolle legen */
.echo-card .active-badge {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(6px, .8vw, 10px);
  padding: 8px 18px;
  border-radius: 999px;
  z-index: 2;
}
.echo-card:not(.active) .active-badge {
  display: none;
}
.echo-card.active .echo-card-top {
  margin-top: 0;
}


/* v0.16.10: Echo Aktiv-Anzeige fest unter dem Namen, inaktiv ausgegraut */
.echo-name-block {
  justify-self: start;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.echo-name-block h2 {
  margin: 0;
}
.echo-card .echo-name-block .active-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 96px;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: clamp(.76rem, 1.05vw, .98rem);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 1000;
  border: 2px solid rgba(255, 230, 0, .72);
  background: rgba(255, 230, 0, .18);
  color: #fff5a5;
  box-shadow: none;
  z-index: 2;
}
.echo-card .echo-name-block .active-badge.is-inactive {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .38);
  opacity: .78;
}
.echo-card.chaser-card .echo-name-block .active-badge.is-active {
  border-color: rgba(75, 190, 255, .72);
  background: rgba(75, 190, 255, .18);
  color: #bfefff;
}
.echo-card:not(.active) .active-badge {
  display: inline-flex;
}
.echo-card.active .echo-card-top {
  margin-top: 0;
}
.echo-card-top .echo-name-block {
  grid-column: auto;
}
@media (max-width: 760px) {
  .echo-name-block {
    justify-self: center;
    align-items: center;
    text-align: center;
  }
}


/* v0.16.11: Echo Aktiv-Anzeige bleibt immer sichtbar und Box springt nicht */
.game-body.game-type-echo .echo-card,
.mode-display.game-type-echo .echo-card {
  box-sizing: border-box;
  border-width: 8px;
  transform: none !important;
}
.mode-display.game-type-echo .echo-card.active,
.game-body.game-type-echo .echo-card.active {
  border-width: 8px;
  transform: none !important;
}
.echo-card:not(.active) .active-badge,
.echo-card .echo-name-block .active-badge {
  display: inline-flex !important;
}
.echo-card .echo-name-block .active-badge {
  min-width: 72px;
  padding: 4px 9px;
  font-size: clamp(.62rem, .82vw, .78rem);
  letter-spacing: .10em;
  line-height: 1;
  margin-top: 1px;
}
.echo-card .echo-name-block .active-badge.is-inactive {
  color: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  opacity: 1;
}
.echo-card .echo-name-block .active-badge.is-active {
  color: #fff4a8;
  border-color: rgba(255,230,0,.82);
  background: rgba(255,230,0,.20);
}
.echo-card.chaser-card .echo-name-block .active-badge.is-active {
  color: #bfefff;
  border-color: rgba(75,190,255,.82);
  background: rgba(75,190,255,.20);
}

/* v0.17.0 Round the Clock */
.roundclock-grid {
  gap: 1rem;
}
.rtc-board-card {
  grid-column: 1 / -1;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: .85rem;
  background: rgba(0,0,0,.22);
}
.rtc-board-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .55rem;
}
.rtc-board-title span {
  opacity: .75;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.rtc-board-title strong {
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1;
}
.rtc-target-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.rtc-target {
  min-width: 2.2rem;
  text-align: center;
  padding: .34rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
}
.rtc-target.done {
  opacity: .42;
  text-decoration: line-through;
}
.rtc-target.current {
  transform: scale(1.1);
  outline: 3px solid rgba(255, 230, 0, .72);
  background: rgba(255, 230, 0, .18);
}
.rtc-card.active {
  outline-width: 6px;
}
.rtc-next-target {
  text-align: center;
  margin: .4rem 0 .7rem;
}
.rtc-next-target span {
  display: block;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.rtc-next-target strong {
  display: block;
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: .95;
}
.rtc-progress {
  height: .7rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.14);
  margin: .2rem 0 .65rem;
}
.rtc-progress > div {
  height: 100%;
  background: currentColor;
  opacity: .75;
}
.rtc-stats {
  display: flex;
  justify-content: space-around;
  gap: .5rem;
  flex-wrap: wrap;
  opacity: .88;
  font-weight: 800;
}

/* v0.18.0 Shanghai */
.shanghai-grid .shanghai-board-card { grid-column: 1 / -1; }
.shanghai-card .highscore-total { font-size: clamp(3rem, 8vw, 6.5rem); }
.shanghai-marks { display:flex; justify-content:center; gap:.5rem; margin:.4rem 0 .7rem; }
.shanghai-mark { display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; min-height:2.2rem; border-radius:999px; border:2px solid rgba(255,255,255,.25); color:rgba(255,255,255,.55); font-weight:900; }
.shanghai-mark.hit { border-color:rgba(255,230,120,.95); color:#111; background:#ffe678; box-shadow:0 0 18px rgba(255,230,120,.35); }
.shanghai-card.winner-card { box-shadow:0 0 0 5px rgba(255,230,120,.95), 0 0 35px rgba(255,230,120,.4); }

/* v0.18.1 Shanghai: Punkte/Ziel klarer und aktiven Spieler deutlicher */
.shanghai-board-card {
  border: 3px solid rgba(255,230,120,.42);
}
.shanghai-main-target span {
  font-size: clamp(.85rem, 1.5vw, 1.1rem);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.shanghai-main-target strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65em;
  min-height: 1.15em;
  margin-left: .35em;
  padding: .02em .22em .08em;
  border-radius: .18em;
  border: .06em solid rgba(255,230,120,.95);
  background: rgba(255,230,120,.18);
  box-shadow: 0 0 24px rgba(255,230,120,.22);
}
.shanghai-card {
  border-width: 4px;
  transform: none !important;
}
.shanghai-card.active {
  border-width: 7px;
  background: linear-gradient(180deg, rgba(255,230,120,.20), rgba(255,230,120,.08)), var(--active-panel);
  box-shadow: 0 0 0 7px rgba(255,230,120,.25), 0 0 38px rgba(255,230,120,.20), var(--shadow);
  transform: none !important;
}
.shanghai-card header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .25rem;
}
.shanghai-card .active-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
  padding: 5px 10px;
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: 1;
}
.shanghai-card .active-badge.is-inactive {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.45);
  box-shadow: none;
}
.shanghai-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 100%;
}
.shanghai-score-block > span {
  font-size: clamp(.8rem, 1.5vw, 1.05rem);
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}
.shanghai-target-box {
  border: 3px solid rgba(255,230,120,.65);
  background: rgba(255,230,120,.12);
  border-radius: 18px;
  padding: .55rem .75rem;
  margin: .15rem auto .35rem;
  width: min(92%, 260px);
}
.shanghai-target-box span {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.shanghai-target-box strong {
  display: block;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: .95;
}


/* v0.18.2 Shanghai: Kopfzeile ruhiger, Punkte/Ziel getauscht */
.shanghai-card {
  padding-top: 1.1rem;
}
.shanghai-card .shanghai-card-header,
.shanghai-card header.shanghai-card-header {
  align-items: stretch;
  text-align: left;
  width: 100%;
  gap: .5rem;
}
.shanghai-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .8rem;
  width: 100%;
}
.shanghai-name-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-width: 0;
}
.shanghai-name-stack h2 {
  margin: 0;
  text-align: left;
}
.shanghai-name-stack .match-badge {
  align-self: flex-start;
}
.shanghai-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
}
.shanghai-card .active-badge {
  min-width: 4.6rem;
  font-size: .68rem;
  padding: 5px 10px;
}
.shanghai-dart-status {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 1.6rem;
}
.shanghai-dart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  font-size: .9rem;
  line-height: 1;
  transform: rotate(-20deg);
}
.shanghai-dart-icon.is-open {
  color: rgba(255,230,120,.95);
  background: rgba(255,230,120,.12);
  box-shadow: 0 0 10px rgba(255,230,120,.16);
}
.shanghai-dart-icon.is-thrown {
  color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.shanghai-points-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  width: min(92%, 260px);
  margin: .15rem auto .25rem;
  padding: .52rem .75rem;
  border-radius: 18px;
  border: 3px solid rgba(255,230,120,.65);
  background: rgba(255,230,120,.12);
}
.shanghai-points-box span {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.shanghai-points-box strong {
  display: block;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: .95;
  color: #f3efe5;
}
.shanghai-score-block {
  margin-top: .05rem;
}
.shanghai-score-block > span {
  margin-bottom: .15rem;
}
.shanghai-card .highscore-total {
  font-size: clamp(4.2rem, 10vw, 7.8rem);
  line-height: .92;
}
.shanghai-card .throw-line {
  margin-top: .5rem;
}


/* v0.18.3 Shanghai: obere Zielbox kompakter, Dart-Icons kontrastreicher */
.shanghai-board-card .rtc-board-title.shanghai-main-target {
  display: block;
  margin-bottom: .7rem;
}
.shanghai-main-target span {
  display: inline-block;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  letter-spacing: .12em;
  opacity: .92;
}
.shanghai-main-target strong {
  display: inline-block;
  min-width: 0;
  min-height: 0;
  margin-left: .3em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  line-height: inherit;
  color: #ffe678;
}
.shanghai-dart-status {
  gap: .34rem;
  min-height: 1.95rem;
}
.shanghai-dart-icon {
  width: 1.8rem;
  height: 1.8rem;
  padding: .14rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
}
.shanghai-dart-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.shanghai-dart-icon.is-open {
  color: #ffe678;
  background: rgba(255,230,120,.16);
  border-color: rgba(255,230,120,.42);
  box-shadow: 0 0 16px rgba(255,230,120,.20);
}
.shanghai-dart-icon.is-thrown {
  color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}


/* v0.18.4 Shanghai: obere Zielbox entfernt, echte SVG-Dartpfeile */
.shanghai-grid .shanghai-board-card {
  display: none !important;
}
.shanghai-dart-status {
  gap: .28rem;
  min-height: 2.2rem;
}
.shanghai-dart-icon {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}
.shanghai-dart-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.shanghai-dart-icon.is-open svg {
  filter: drop-shadow(0 0 8px rgba(255, 82, 82, .42)) drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

.shanghai-dart-icon .dart-tip { fill: #f4f4f4; }
.shanghai-dart-icon .dart-shaft { fill: #cfcfcf; }
.shanghai-dart-icon .dart-grip { fill: #8f8f8f; }
.shanghai-dart-icon .dart-grip-line { stroke: #5d5d5d; stroke-width: 1.5; }
.shanghai-dart-icon .dart-barrel { fill: #a31515; }
.shanghai-dart-icon .dart-flight-main { fill: #ff5252; }
.shanghai-dart-icon .dart-flight-top { fill: #d62828; }
.shanghai-dart-icon .dart-flight-bottom { fill: #e53935; }
.shanghai-dart-icon .dart-flight-tail-top { fill: #ff8a80; }
.shanghai-dart-icon .dart-flight-tail-bottom { fill: #ff6b6b; }
.shanghai-dart-icon.is-thrown {
  opacity: 1;
}
.shanghai-dart-icon.is-thrown svg {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.shanghai-dart-icon.is-thrown .dart-tip { fill: #bdbdbd; }
.shanghai-dart-icon.is-thrown .dart-shaft { fill: #9f9f9f; }
.shanghai-dart-icon.is-thrown .dart-grip { fill: #7f7f7f; }
.shanghai-dart-icon.is-thrown .dart-grip-line { stroke: #666; }
.shanghai-dart-icon.is-thrown .dart-barrel,
.shanghai-dart-icon.is-thrown .dart-flight-main,
.shanghai-dart-icon.is-thrown .dart-flight-top,
.shanghai-dart-icon.is-thrown .dart-flight-bottom { fill: #7f7f7f; }
.shanghai-dart-icon.is-thrown .dart-flight-tail-top,
.shanghai-dart-icon.is-thrown .dart-flight-tail-bottom { fill: #8a8a8a; }


/* v0.18.6 Shanghai: flexibles Layout bis 8 Spieler */
.shanghai-grid {
  align-items: stretch;
}
.shanghai-grid[data-count="1"] { grid-template-columns: 1fr; }
.shanghai-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shanghai-grid[data-count="3"],
.shanghai-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shanghai-grid[data-count="5"],
.shanghai-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shanghai-grid[data-count="7"],
.shanghai-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mode-display .shanghai-grid,
.mode-combined .shanghai-grid {
  gap: clamp(7px, .85vw, 12px);
}
.mode-display .shanghai-card,
.mode-combined .shanghai-card {
  min-height: clamp(235px, calc((100vh - 205px) / 2), 370px);
  padding: clamp(9px, 1vw, 16px);
  gap: clamp(4px, .55vw, 8px);
}
.mode-display .shanghai-grid[data-count="1"] .shanghai-card,
.mode-display .shanghai-grid[data-count="2"] .shanghai-card {
  min-height: clamp(430px, calc(100vh - 205px), 720px);
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-card,
.mode-display .shanghai-grid[data-count="4"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-card {
  min-height: clamp(255px, calc((100vh - 205px) / 2), 390px);
}
.mode-display .shanghai-grid[data-count="5"] .shanghai-card,
.mode-display .shanghai-grid[data-count="6"] .shanghai-card,
.mode-display .shanghai-grid[data-count="7"] .shanghai-card,
.mode-display .shanghai-grid[data-count="8"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="5"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-card {
  min-height: clamp(205px, calc((100vh - 200px) / 2), 310px);
}

.shanghai-grid[data-count="5"] .shanghai-card,
.shanghai-grid[data-count="6"] .shanghai-card,
.shanghai-grid[data-count="7"] .shanghai-card,
.shanghai-grid[data-count="8"] .shanghai-card {
  border-width: 3px;
}
.shanghai-grid[data-count="5"] .shanghai-card.active,
.shanghai-grid[data-count="6"] .shanghai-card.active,
.shanghai-grid[data-count="7"] .shanghai-card.active,
.shanghai-grid[data-count="8"] .shanghai-card.active {
  border-width: 5px;
  box-shadow: 0 0 0 4px rgba(255,230,120,.22), 0 0 22px rgba(255,230,120,.18), var(--shadow);
}
.shanghai-grid[data-count="5"] .shanghai-name-stack h2,
.shanghai-grid[data-count="6"] .shanghai-name-stack h2,
.shanghai-grid[data-count="7"] .shanghai-name-stack h2,
.shanghai-grid[data-count="8"] .shanghai-name-stack h2 {
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.shanghai-grid[data-count="7"] .shanghai-name-stack h2,
.shanghai-grid[data-count="8"] .shanghai-name-stack h2 {
  font-size: clamp(1.05rem, 1.55vw, 1.65rem);
}
.shanghai-grid[data-count="5"] .shanghai-header-row,
.shanghai-grid[data-count="6"] .shanghai-header-row,
.shanghai-grid[data-count="7"] .shanghai-header-row,
.shanghai-grid[data-count="8"] .shanghai-header-row {
  gap: .45rem;
}
.shanghai-grid[data-count="5"] .shanghai-card .active-badge,
.shanghai-grid[data-count="6"] .shanghai-card .active-badge,
.shanghai-grid[data-count="7"] .shanghai-card .active-badge,
.shanghai-grid[data-count="8"] .shanghai-card .active-badge {
  min-width: 3.9rem;
  font-size: .58rem;
  padding: 4px 8px;
}
.shanghai-grid[data-count="5"] .shanghai-dart-status,
.shanghai-grid[data-count="6"] .shanghai-dart-status,
.shanghai-grid[data-count="7"] .shanghai-dart-status,
.shanghai-grid[data-count="8"] .shanghai-dart-status {
  gap: .16rem;
  min-height: 1.8rem;
}
.shanghai-grid[data-count="5"] .shanghai-dart-icon,
.shanghai-grid[data-count="6"] .shanghai-dart-icon {
  width: 2.15rem;
  height: 2.15rem;
}
.shanghai-grid[data-count="7"] .shanghai-dart-icon,
.shanghai-grid[data-count="8"] .shanghai-dart-icon {
  width: 1.85rem;
  height: 1.85rem;
}
.shanghai-grid[data-count="5"] .shanghai-points-box,
.shanghai-grid[data-count="6"] .shanghai-points-box,
.shanghai-grid[data-count="7"] .shanghai-points-box,
.shanghai-grid[data-count="8"] .shanghai-points-box {
  width: min(94%, 190px);
  padding: .34rem .45rem;
  border-width: 2px;
  border-radius: 14px;
  margin: .05rem auto .08rem;
}
.shanghai-grid[data-count="7"] .shanghai-points-box,
.shanghai-grid[data-count="8"] .shanghai-points-box {
  width: min(96%, 160px);
}
.shanghai-grid[data-count="5"] .shanghai-points-box span,
.shanghai-grid[data-count="6"] .shanghai-points-box span,
.shanghai-grid[data-count="7"] .shanghai-points-box span,
.shanghai-grid[data-count="8"] .shanghai-points-box span,
.shanghai-grid[data-count="5"] .shanghai-score-block > span,
.shanghai-grid[data-count="6"] .shanghai-score-block > span,
.shanghai-grid[data-count="7"] .shanghai-score-block > span,
.shanghai-grid[data-count="8"] .shanghai-score-block > span {
  font-size: .58rem;
  letter-spacing: .09em;
}
.shanghai-grid[data-count="5"] .shanghai-points-box strong,
.shanghai-grid[data-count="6"] .shanghai-points-box strong {
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
}
.shanghai-grid[data-count="7"] .shanghai-points-box strong,
.shanghai-grid[data-count="8"] .shanghai-points-box strong {
  font-size: clamp(1.5rem, 3vw, 2.65rem);
}
.shanghai-grid[data-count="5"] .shanghai-card .highscore-total,
.shanghai-grid[data-count="6"] .shanghai-card .highscore-total {
  font-size: clamp(3.2rem, 6.2vw, 5.6rem);
}
.shanghai-grid[data-count="7"] .shanghai-card .highscore-total,
.shanghai-grid[data-count="8"] .shanghai-card .highscore-total {
  font-size: clamp(2.7rem, 5.2vw, 4.7rem);
}
.shanghai-grid[data-count="5"] .shanghai-marks,
.shanghai-grid[data-count="6"] .shanghai-marks,
.shanghai-grid[data-count="7"] .shanghai-marks,
.shanghai-grid[data-count="8"] .shanghai-marks {
  gap: .22rem;
  margin: .1rem 0 .25rem;
}
.shanghai-grid[data-count="5"] .shanghai-mark,
.shanghai-grid[data-count="6"] .shanghai-mark,
.shanghai-grid[data-count="7"] .shanghai-mark,
.shanghai-grid[data-count="8"] .shanghai-mark {
  min-width: 1.55rem;
  min-height: 1.55rem;
  font-size: .82rem;
  border-width: 1px;
}
.shanghai-grid[data-count="5"] .highscore-throw-line,
.shanghai-grid[data-count="6"] .highscore-throw-line,
.shanghai-grid[data-count="7"] .highscore-throw-line,
.shanghai-grid[data-count="8"] .highscore-throw-line {
  padding: 6px;
  gap: 5px;
}
.shanghai-grid[data-count="5"] .highscore-dart-pill,
.shanghai-grid[data-count="6"] .highscore-dart-pill,
.shanghai-grid[data-count="7"] .highscore-dart-pill,
.shanghai-grid[data-count="8"] .highscore-dart-pill {
  font-size: clamp(.72rem, .95vw, .95rem);
  padding: 5px 7px;
}
.shanghai-grid[data-count="5"] .highscore-turn-points,
.shanghai-grid[data-count="6"] .highscore-turn-points,
.shanghai-grid[data-count="7"] .highscore-turn-points,
.shanghai-grid[data-count="8"] .highscore-turn-points {
  min-width: 64px;
  padding: 5px 7px;
}
.shanghai-grid[data-count="7"] .highscore-turn-points span,
.shanghai-grid[data-count="8"] .highscore-turn-points span {
  font-size: .55rem;
}
.shanghai-grid[data-count="7"] .highscore-turn-points strong,
.shanghai-grid[data-count="8"] .highscore-turn-points strong {
  font-size: 1.25rem;
}

@media (max-width: 1250px) {
  .shanghai-grid[data-count="7"],
  .shanghai-grid[data-count="8"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .shanghai-grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shanghai-grid[data-count] { grid-template-columns: 1fr; }
}


/* v0.18.7 Shanghai: kombinierte Ansicht mit 5-8 Spielern deutlich kompakter */
.mode-combined .shanghai-grid[data-count="5"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-card {
  min-height: clamp(155px, calc((100vh - 235px) / 2), 240px);
  padding: 8px;
  gap: 3px;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-name-stack h2,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-name-stack h2,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-name-stack h2,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-name-stack h2 {
  font-size: clamp(1rem, 1.35vw, 1.4rem);
}
.mode-combined .shanghai-grid[data-count="5"] .player-meta-badges,
.mode-combined .shanghai-grid[data-count="6"] .player-meta-badges,
.mode-combined .shanghai-grid[data-count="7"] .player-meta-badges,
.mode-combined .shanghai-grid[data-count="8"] .player-meta-badges {
  transform: scale(.9);
  transform-origin: left center;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-card .active-badge,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-card .active-badge,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-card .active-badge,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-card .active-badge {
  min-width: 3.3rem;
  padding: 3px 7px;
  font-size: .55rem;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-dart-status,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-dart-status,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-dart-status,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-dart-status {
  gap: .08rem;
  min-height: 1.35rem;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-dart-icon,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-dart-icon,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-dart-icon,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-dart-icon {
  width: 1.45rem;
  height: 1.45rem;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-points-box,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-points-box,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-points-box,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-points-box {
  width: min(96%, 118px);
  padding: .18rem .28rem;
  margin: 0 auto;
  border-radius: 12px;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="5"] .shanghai-score-block > span,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-score-block > span,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-score-block > span,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-score-block > span {
  font-size: .52rem;
  letter-spacing: .08em;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-points-box strong,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-points-box strong,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-points-box strong,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-points-box strong {
  font-size: clamp(1.45rem, 2.1vw, 2.1rem);
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-card .highscore-total,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-card .highscore-total,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-card .highscore-total,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-card .highscore-total {
  font-size: clamp(2.2rem, 3.9vw, 3.6rem);
  line-height: .9;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-marks,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-marks,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-marks,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-marks {
  gap: .16rem;
  margin: 0 0 .12rem;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-mark,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-mark,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-mark,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-mark {
  min-width: 1.28rem;
  min-height: 1.28rem;
  font-size: .72rem;
}
.mode-combined .shanghai-grid[data-count="5"] .highscore-throw-line,
.mode-combined .shanghai-grid[data-count="6"] .highscore-throw-line,
.mode-combined .shanghai-grid[data-count="7"] .highscore-throw-line,
.mode-combined .shanghai-grid[data-count="8"] .highscore-throw-line {
  padding: 4px;
  gap: 4px;
  border-radius: 12px;
  margin-top: auto;
}
.mode-combined .shanghai-grid[data-count="5"] .highscore-dart-pill,
.mode-combined .shanghai-grid[data-count="6"] .highscore-dart-pill,
.mode-combined .shanghai-grid[data-count="7"] .highscore-dart-pill,
.mode-combined .shanghai-grid[data-count="8"] .highscore-dart-pill {
  font-size: .82rem;
  padding: 3px 6px;
  min-width: 0;
}
.mode-combined .shanghai-grid[data-count="5"] .highscore-turn-points,
.mode-combined .shanghai-grid[data-count="6"] .highscore-turn-points,
.mode-combined .shanghai-grid[data-count="7"] .highscore-turn-points,
.mode-combined .shanghai-grid[data-count="8"] .highscore-turn-points {
  min-width: 50px;
  padding: 4px 6px;
}
.mode-combined .shanghai-grid[data-count="5"] .highscore-turn-points span,
.mode-combined .shanghai-grid[data-count="6"] .highscore-turn-points span,
.mode-combined .shanghai-grid[data-count="7"] .highscore-turn-points span,
.mode-combined .shanghai-grid[data-count="8"] .highscore-turn-points span {
  font-size: .5rem;
}
.mode-combined .shanghai-grid[data-count="5"] .highscore-turn-points strong,
.mode-combined .shanghai-grid[data-count="6"] .highscore-turn-points strong,
.mode-combined .shanghai-grid[data-count="7"] .highscore-turn-points strong,
.mode-combined .shanghai-grid[data-count="8"] .highscore-turn-points strong {
  font-size: 1rem;
}
.mode-combined .shanghai-grid[data-count="5"] .shanghai-card.active,
.mode-combined .shanghai-grid[data-count="6"] .shanghai-card.active,
.mode-combined .shanghai-grid[data-count="7"] .shanghai-card.active,
.mode-combined .shanghai-grid[data-count="8"] .shanghai-card.active {
  box-shadow: 0 0 0 3px rgba(255,230,120,.2), 0 0 18px rgba(255,230,120,.16), var(--shadow);
}


/* v0.18.8 Shanghai: 3-4 Spieler kompakter, damit 2x2 ohne Scrollen passt */
.mode-display .shanghai-grid[data-count="3"] .shanghai-card,
.mode-display .shanghai-grid[data-count="4"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-card,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-card {
  min-height: clamp(190px, calc((100vh - 230px) / 2), 290px);
  padding: 9px;
  gap: 4px;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-name-stack h2,
.mode-display .shanghai-grid[data-count="4"] .shanghai-name-stack h2,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-name-stack h2,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-name-stack h2 {
  font-size: clamp(1.35rem, 1.8vw, 2rem);
}
.mode-display .shanghai-grid[data-count="3"] .player-meta-badges,
.mode-display .shanghai-grid[data-count="4"] .player-meta-badges,
.mode-combined .shanghai-grid[data-count="3"] .player-meta-badges,
.mode-combined .shanghai-grid[data-count="4"] .player-meta-badges {
  transform: scale(.94);
  transform-origin: left center;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-card .active-badge,
.mode-display .shanghai-grid[data-count="4"] .shanghai-card .active-badge,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-card .active-badge,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-card .active-badge {
  min-width: 3.8rem;
  font-size: .58rem;
  padding: 4px 8px;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-dart-status,
.mode-display .shanghai-grid[data-count="4"] .shanghai-dart-status,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-dart-status,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-dart-status {
  gap: .12rem;
  min-height: 1.55rem;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-dart-icon,
.mode-display .shanghai-grid[data-count="4"] .shanghai-dart-icon,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-dart-icon,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-dart-icon {
  width: 1.8rem;
  height: 1.8rem;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-points-box,
.mode-display .shanghai-grid[data-count="4"] .shanghai-points-box,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-points-box,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-points-box {
  width: min(94%, 170px);
  padding: .28rem .4rem;
  margin: 0 auto .05rem;
  border-radius: 14px;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-points-box span,
.mode-display .shanghai-grid[data-count="4"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-points-box span,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-points-box span,
.mode-display .shanghai-grid[data-count="3"] .shanghai-score-block > span,
.mode-display .shanghai-grid[data-count="4"] .shanghai-score-block > span,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-score-block > span,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-score-block > span {
  font-size: .6rem;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-points-box strong,
.mode-display .shanghai-grid[data-count="4"] .shanghai-points-box strong,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-points-box strong,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-points-box strong {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-card .highscore-total,
.mode-display .shanghai-grid[data-count="4"] .shanghai-card .highscore-total,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-card .highscore-total,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-card .highscore-total {
  font-size: clamp(3.3rem, 6vw, 5.2rem);
  line-height: .9;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-marks,
.mode-display .shanghai-grid[data-count="4"] .shanghai-marks,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-marks,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-marks {
  gap: .18rem;
  margin: .05rem 0 .16rem;
}
.mode-display .shanghai-grid[data-count="3"] .shanghai-mark,
.mode-display .shanghai-grid[data-count="4"] .shanghai-mark,
.mode-combined .shanghai-grid[data-count="3"] .shanghai-mark,
.mode-combined .shanghai-grid[data-count="4"] .shanghai-mark {
  min-width: 1.45rem;
  min-height: 1.45rem;
  font-size: .78rem;
}
.mode-display .shanghai-grid[data-count="3"] .highscore-throw-line,
.mode-display .shanghai-grid[data-count="4"] .highscore-throw-line,
.mode-combined .shanghai-grid[data-count="3"] .highscore-throw-line,
.mode-combined .shanghai-grid[data-count="4"] .highscore-throw-line {
  margin-top: auto;
  padding: 5px;
  gap: 5px;
}
.mode-display .shanghai-grid[data-count="3"] .highscore-dart-pill,
.mode-display .shanghai-grid[data-count="4"] .highscore-dart-pill,
.mode-combined .shanghai-grid[data-count="3"] .highscore-dart-pill,
.mode-combined .shanghai-grid[data-count="4"] .highscore-dart-pill {
  font-size: .85rem;
  padding: 4px 7px;
}
.mode-display .shanghai-grid[data-count="3"] .highscore-turn-points,
.mode-display .shanghai-grid[data-count="4"] .highscore-turn-points,
.mode-combined .shanghai-grid[data-count="3"] .highscore-turn-points,
.mode-combined .shanghai-grid[data-count="4"] .highscore-turn-points {
  min-width: 58px;
  padding: 4px 7px;
}
.mode-display .shanghai-grid[data-count="3"] .highscore-turn-points span,
.mode-display .shanghai-grid[data-count="4"] .highscore-turn-points span,
.mode-combined .shanghai-grid[data-count="3"] .highscore-turn-points span,
.mode-combined .shanghai-grid[data-count="4"] .highscore-turn-points span {
  font-size: .55rem;
}
.mode-display .shanghai-grid[data-count="3"] .highscore-turn-points strong,
.mode-display .shanghai-grid[data-count="4"] .highscore-turn-points strong,
.mode-combined .shanghai-grid[data-count="3"] .highscore-turn-points strong,
.mode-combined .shanghai-grid[data-count="4"] .highscore-turn-points strong {
  font-size: 1.15rem;
}

/* v0.18.9: Dart-Icons/Spielkopf in mehreren Spielarten vereinheitlicht */
.score-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.score-card-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.card-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  min-width: 68px;
}
.score-card-header .active-badge,
.card-status-stack .active-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: none;
  font-size: clamp(.66rem, .95vw, .84rem);
  line-height: 1;
  letter-spacing: .1em;
}
.card-status-stack .active-badge.is-inactive {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.12);
}
.card-status-stack .active-badge.is-active {
  background: rgba(255,230,0,.84);
  color: #0b0b0b;
  border: 1px solid rgba(255,230,0,.95);
}
.header-dart-status,
.tt-dart-status,
.tau-dart-status,
.echo-role-darts,
.ab-dart-status {
  gap: .1rem;
  min-height: 1.45rem;
}
.header-dart-status .shanghai-dart-icon,
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon,
.echo-role-darts .shanghai-dart-icon,
.ab-dart-status .shanghai-dart-icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* Echo: Pfeile unter Vorlage/Jäger */
.echo-card-top .echo-role-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.echo-card-top .echo-role-stack .echo-role {
  margin: 0;
}
.echo-role-darts {
  justify-content: center;
}

/* Tactics: Set/Leg links, Name mittig, Pfeile rechts */
.tt-player {
  vertical-align: top;
}
.tt-player .tt-head-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.tt-player .tt-head-left,
.tt-player .tt-head-right {
  display: flex;
  align-items: flex-start;
}
.tt-player .tt-name {
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 1000;
  line-height: 1.05;
}
.tt-player .match-mini {
  margin: 0;
  font-size: clamp(.72rem, 1.05vw, .92rem);
  padding: .12rem .35rem;
}
.tt-player .tt-active-member {
  margin-top: .3rem;
}

/* Tauziehen: Set/Leg links, Name größer mittig, Pfeile rechts */
.tau-side-player .tau-head-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.tau-side-player .tau-head-left,
.tau-side-player .tau-head-right {
  display: flex;
  align-items: flex-start;
}
.tau-side-player .tau-side-name {
  text-align: center;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 1000;
  line-height: 1.05;
}
.tau-side-player .match-mini {
  margin: 0;
  font-size: clamp(.72rem, 1vw, .95rem);
  padding: .12rem .36rem;
}
.tau-side-player.left .tau-head-right,
.tau-side-player.right .tau-head-right {
  justify-content: flex-end;
}

/* Abräumen: Name rechts oben, Set/Leg links oben, Pfeile mittig, Punkte groß */
.ab-player-box {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-items: start;
}
.ab-player-box .ab-header-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.ab-player-box .ab-header-left {
  justify-self: start;
}
.ab-player-box h2 {
  justify-self: end;
  text-align: right;
  width: 100%;
}
.ab-player-box .match-mini {
  margin: 0;
  font-size: clamp(.76rem, 1vw, 1rem);
}
.ab-player-box .abraeumen-member {
  text-align: left;
}
.ab-player-box .abraeumen-score {
  justify-self: center;
  text-align: center;
}
.ab-player-box .ab-darts-center {
  justify-self: center;
  margin-top: 2px;
}
.ab-player-box .ab-dart-status .shanghai-dart-icon {
  width: 1.9rem;
  height: 1.9rem;
}
.ab-player-box .abraeumen-turn,
.ab-player-box .abraeumen-last {
  justify-self: start;
  text-align: left;
}

/* Highscore / X01 / Round the Clock */
.highscore-card .score-card-header,
.rtc-card .score-card-header,
.players-grid .player-card > .score-card-header {
  margin-bottom: 2px;
}
.highscore-card .card-status-stack,
.rtc-card .card-status-stack,
.players-grid .player-card .card-status-stack {
  align-self: start;
}
@media (max-width: 900px) {
  .score-card-header { gap: 8px; }
  .score-card-header .active-badge,
  .card-status-stack .active-badge {
    min-width: 66px;
    padding: 5px 8px;
    font-size: .62rem;
  }
  .header-dart-status .shanghai-dart-icon,
  .tt-dart-status .shanghai-dart-icon,
  .tau-dart-status .shanghai-dart-icon,
  .echo-role-darts .shanghai-dart-icon,
  .ab-dart-status .shanghai-dart-icon {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* v0.18.10: Feinschliff Pfeile/Set-Leg und kompaktere Spielerauswahl */
.match-mini {
  gap: .38rem;
  padding: .12rem .34rem;
  font-size: clamp(1rem, 1.75vw, 1.35rem);
}
.highscore-card .match-mini,
.player-card .match-mini {
  padding-inline: .3rem;
}
.tt-player .match-mini {
  font-size: clamp(.84rem, 1.2vw, 1.06rem);
  padding: .12rem .28rem;
}
.tau-side-player .match-mini {
  font-size: clamp(.86rem, 1.2vw, 1.08rem);
  padding: .12rem .3rem;
}
.ab-player-box .match-mini {
  font-size: clamp(.84rem, 1.1vw, 1.06rem);
  padding: .12rem .3rem;
}
.header-dart-status .shanghai-dart-icon,
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon,
.echo-role-darts .shanghai-dart-icon,
.ab-dart-status .shanghai-dart-icon {
  width: 1.9rem;
  height: 1.9rem;
}
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon {
  width: 2rem;
  height: 2rem;
}
.ab-player-box .ab-dart-status .shanghai-dart-icon {
  width: 2.1rem;
  height: 2.1rem;
}
.header-dart-status,
.tt-dart-status,
.tau-dart-status,
.echo-role-darts,
.ab-dart-status {
  gap: .14rem;
  min-height: 1.8rem;
}
@media (max-width: 900px) {
  .header-dart-status .shanghai-dart-icon,
  .tt-dart-status .shanghai-dart-icon,
  .tau-dart-status .shanghai-dart-icon,
  .echo-role-darts .shanghai-dart-icon,
  .ab-dart-status .shanghai-dart-icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.select-participants-card {
  display: grid;
  gap: 18px;
}
.select-top-layout,
.select-lower-layout {
  display: grid;
  gap: 14px;
}
.select-section-head.compact-head {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}
.select-section-head.compact-head h3 {
  margin: 0;
}
.compact-player-list {
  gap: 8px;
}
.compact-order-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 9px 12px;
  min-height: 54px;
}
.compact-order-card .player-order-main {
  gap: 10px;
}
.compact-order-card .player-order-name.compact-player-name {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-order-card .player-order-name.compact-player-name .main-player-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-order-card .player-order-name.compact-player-name small {
  display: inline;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-order-card .order-move-box {
  gap: 5px;
}
.compact-order-card .move-order {
  min-width: 38px;
  min-height: 36px;
  border-radius: 10px;
  font-size: 1.1rem;
}
.compact-order-card .start-order-box {
  gap: 3px;
  font-size: .74rem;
  min-width: 74px;
  text-align: center;
}
.compact-order-card .start-order-input {
  padding: 7px 6px;
  width: 72px;
}
.compact-add-player-card {
  margin-top: 4px;
}
.quick-add-player-form {
  display: none;
}
.select-top-header {
  display: grid;
  gap: 8px;
}
.select-top-header h3,
.select-lower-layout h2 {
  margin: 0;
}
.selected-order-panel,
.selected-order-preview,
.order-options {
  scroll-margin-top: 12px;
}
@media (max-width: 700px) {
  .compact-order-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 8px 10px;
  }
  .compact-order-card .player-order-name.compact-player-name {
    gap: 6px;
    font-size: .98rem;
  }
  .compact-order-card .move-order {
    min-width: 34px;
    min-height: 34px;
    font-size: 1rem;
  }
  .compact-order-card .start-order-box {
    min-width: 62px;
    font-size: .68rem;
  }
  .compact-order-card .start-order-input {
    width: 58px;
    padding: 6px 4px;
  }
}


/* v0.18.11: noch etwas groessere Dartpfeile und Startbutton oben in Spielerauswahl */
.header-dart-status .shanghai-dart-icon,
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon,
.echo-role-darts .shanghai-dart-icon,
.ab-dart-status .shanghai-dart-icon {
  width: 2.15rem;
  height: 2.15rem;
}
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon {
  width: 2.25rem;
  height: 2.25rem;
}
.ab-player-box .ab-dart-status .shanghai-dart-icon {
  width: 2.35rem;
  height: 2.35rem;
}
.match-mini {
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  padding: .13rem .36rem;
}
.tt-player .match-mini,
.tau-side-player .match-mini,
.ab-player-box .match-mini {
  font-size: clamp(.92rem, 1.32vw, 1.16rem);
  padding: .13rem .32rem;
}
.select-start-top-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.select-start-top-button {
  flex: 1 1 220px;
}
.select-start-top-row .button.ghost {
  flex: 0 1 auto;
}
@media (max-width: 900px) {
  .header-dart-status .shanghai-dart-icon,
  .tt-dart-status .shanghai-dart-icon,
  .tau-dart-status .shanghai-dart-icon,
  .echo-role-darts .shanghai-dart-icon,
  .ab-dart-status .shanghai-dart-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* v0.18.12 Hilfe / Spielregeln */
.help-main {
  display: grid;
  gap: 18px;
}
.help-hero .help-jump-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.help-hero .help-jump-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}
.help-hero .help-jump-grid a:hover {
  background: rgba(255,255,255,.16);
}
.help-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.help-two-col > div {
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
}
.help-two-col h3 {
  margin: 0 0 6px;
}
.help-two-col p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}
.help-rules-grid {
  display: grid;
  gap: 18px;
}
.help-rule-card {
  scroll-margin-top: 16px;
}
.help-rule-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.help-rule-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.help-top-link {
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  white-space: nowrap;
}
.help-subtitle {
  margin: 6px 0 12px;
  color: var(--muted);
  font-weight: 850;
}
.help-goal {
  border-radius: 16px;
  border: 1px solid rgba(255,230,120,.35);
  background: rgba(255,230,120,.10);
  padding: 12px 14px;
  font-size: 1.08rem;
  line-height: 1.35;
}
.help-rule-card ol {
  margin: 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 7px;
}
.help-rule-card li {
  line-height: 1.35;
  font-weight: 800;
}
.help-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.help-option-row span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(121,184,255,.14);
  border: 1px solid rgba(121,184,255,.28);
  font-weight: 850;
}
@media (max-width: 760px) {
  .help-two-col {
    grid-template-columns: 1fr;
  }
  .help-rule-head {
    align-items: flex-start;
  }
}

/* v0.18.14: Next-Leg Countdown und Echo-Differenz klarer sichtbar */
.next-leg-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .16em .55em;
  border-radius: 999px;
  background: rgba(255,230,0,.24);
  border: 1px solid rgba(255,230,0,.55);
  color: #fff6a8;
  font-weight: 1000;
  white-space: nowrap;
}
.echo-status-row .echo-live-diff {
  border-color: rgba(255,230,0,.55);
  background: linear-gradient(180deg, rgba(255,230,0,.18), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,230,0,.18);
}
.echo-status-row .echo-live-diff strong {
  color: #fff2a8;
}

/* v0.18.16: Autodarts Rohdaten-/Koordinaten-Test */
.autodarts-raw-page .debug-box {
  max-height: 46vh;
  overflow: auto;
}
.ad-raw-verdict {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(121,184,255,.12);
  border: 2px solid rgba(121,184,255,.32);
  font-weight: 1000;
  color: var(--text, #fff);
}
.ad-raw-verdict.success {
  background: rgba(52, 211, 153, .18);
  border-color: rgba(52, 211, 153, .62);
}
.ad-raw-verdict.warn {
  background: rgba(255, 203, 72, .16);
  border-color: rgba(255, 203, 72, .55);
}
.ad-raw-verdict.error {
  background: rgba(255, 95, 95, .16);
  border-color: rgba(255, 95, 95, .58);
}
.ad-raw-grid {
  margin-top: 12px;
}
.ad-raw-list {
  display: grid;
  gap: 10px;
}
.ad-raw-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.12);
}
.ad-raw-item strong {
  font-size: 1.05rem;
}
.ad-raw-item code {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #d7ebff;
}
.ad-raw-item pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* v0.19.3: Turnierspiele fortsetzen */
.tournament-resume-card {
  border-color: rgba(88, 214, 141, .45);
  background: linear-gradient(135deg, rgba(88,214,141,.12), rgba(255,255,255,.05));
}
.resume-match-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.resume-match-chip {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text, #fff);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(88,214,141,.42);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.resume-match-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255,230,0,.72);
}
.resume-match-chip strong {
  font-size: 1.08rem;
  font-weight: 1000;
}
.resume-match-chip span {
  font-weight: 850;
  color: var(--muted, rgba(255,255,255,.72));
}
.match-card.status-running,
.match-card.match-current {
  border-color: rgba(88,214,141,.65);
  background: linear-gradient(135deg, rgba(88,214,141,.15), rgba(255,255,255,.06));
}
.match-card.status-running .match-meta span,
.match-card.match-current .match-meta span {
  color: #c8ffd8;
  font-weight: 1000;
}

/* v0.19.5: Adminmodus und besser erkennbare Dart-Icons */
.not-admin-mode .admin-only {
  display: none !important;
}
.admin-login-card {
  border-color: rgba(255, 230, 0, .28);
  background: linear-gradient(135deg, rgba(255,230,0,.10), rgba(255,255,255,.05));
}
.admin-login-card.admin-active {
  border-color: rgba(88,214,141,.55);
  background: linear-gradient(135deg, rgba(88,214,141,.14), rgba(255,255,255,.05));
}
.admin-required-card {
  border-color: rgba(255, 116, 116, .42);
  background: rgba(255, 116, 116, .08);
}
.alert-inline {
  margin: .4rem 0 .7rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: rgba(255, 95, 86, .16);
  border: 1px solid rgba(255, 95, 86, .38);
  color: #ffd7d4;
  font-weight: 900;
}
.shanghai-dart-icon {
  width: 3rem;
  height: 3rem;
}
.header-dart-status .shanghai-dart-icon,
.echo-role-darts .shanghai-dart-icon {
  width: 2.15rem;
  height: 2.15rem;
}
.tt-dart-status .shanghai-dart-icon,
.tau-dart-status .shanghai-dart-icon {
  width: 2.25rem;
  height: 2.25rem;
}
.ab-player-box .ab-dart-status .shanghai-dart-icon {
  width: 2.35rem;
  height: 2.35rem;
}
@media (max-width: 900px) {
  .shanghai-dart-icon {
    width: 2.55rem;
    height: 2.55rem;
  }
  .header-dart-status .shanghai-dart-icon,
  .tt-dart-status .shanghai-dart-icon,
  .tau-dart-status .shanghai-dart-icon,
  .echo-role-darts .shanghai-dart-icon,
  .ab-dart-status .shanghai-dart-icon {
    width: 1.85rem;
    height: 1.85rem;
  }
}
@media (max-width: 560px) {
  .header-dart-status .shanghai-dart-icon,
  .tt-dart-status .shanghai-dart-icon,
  .tau-dart-status .shanghai-dart-icon,
  .echo-role-darts .shanghai-dart-icon,
  .ab-dart-status .shanghai-dart-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.email-link-form {
    margin-top: 1rem;
    display: grid;
    gap: .65rem;
}
.email-link-form input[type="email"] {
    width: 100%;
}

.training-game-card {
    border-color: rgba(78, 205, 196, 0.55);
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.18), rgba(255,255,255,0.04));
}
.training-game-card h3 {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

/* v0.19.20 Trefferbild / Heatmap */
.heatmap-display{display:flex;flex-direction:column;gap:.45rem;min-height:calc(100vh - 2rem)}
.heatmap-head{display:none}
.heatmap-player-card{display:none}
.heatmap-current{text-align:right;font-size:clamp(.95rem,1.8vw,1.35rem);padding:.45rem .85rem;min-width:0;max-width:none;margin:0 0 .85rem}
.heatmap-current strong{display:block;font-size:clamp(1.15rem,2.4vw,1.9rem)}
.heatmap-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,420px);gap:.75rem;align-items:stretch}
.heatmap-board-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:.35rem 1rem 1rem;overflow:hidden}
.heatmap-board{width:min(80vh,100%);max-width:800px;height:auto;display:block;overflow:visible;margin-top:-8.5vh}
.hm-outside{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.18);stroke-width:3}
.hm-number-ring{fill:rgba(0,0,0,.28);stroke:rgba(255,255,255,.1);stroke-width:1.5}
.hm-segment-dark{fill:#1f1f1f;stroke:rgba(255,255,255,.07);stroke-width:1}
.hm-segment-light{fill:#f1eadb;stroke:rgba(0,0,0,.08);stroke-width:1}
.hm-segment-red{fill:#b1262b;stroke:rgba(255,255,255,.08);stroke-width:1}
.hm-segment-green{fill:#1e8b57;stroke:rgba(255,255,255,.08);stroke-width:1}
.hm-ring-line{fill:none;stroke:rgba(255,255,255,.32);stroke-width:2}
.hm-single-bull{fill:#2f925e;stroke:rgba(255,255,255,.45);stroke-width:3}
.hm-bull{fill:#b1262b;stroke:rgba(255,255,255,.55);stroke-width:3}
.hm-sector{stroke:rgba(255,255,255,.15);stroke-width:1.5}
.hm-number{fill:#fff;font-weight:800;font-size:30px;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(0,0,0,.75);stroke-width:4;letter-spacing:.02em}
.hm-point{stroke-width:3;filter:drop-shadow(0 0 10px rgba(0,0,0,.45));opacity:.88}
.hm-hit{fill:#ffd54a;stroke:#161616}.hm-miss{fill:#ff5a5a;stroke:#fff}.hm-point.recent{opacity:1;stroke-width:5;filter:drop-shadow(0 0 18px rgba(255,255,255,.65))}
.heatmap-side{padding:1rem;overflow:auto}
.heatmap-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.7rem 0 1rem}
.heatmap-stats div{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.75rem;background:rgba(255,255,255,.055)}
.heatmap-stats strong{display:block;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1}
.heatmap-stats span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.heatmap-recent{list-style:none;padding:0;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.45rem}
.heatmap-recent li{border-bottom:1px solid rgba(255,255,255,.12);padding:.35rem 0}
.heatmap-recent strong{display:block;font-size:1.05rem}.heatmap-recent span{display:block;color:var(--muted);font-size:.85rem}
@media (max-width: 850px){.heatmap-current{text-align:left;width:100%}.heatmap-layout{grid-template-columns:1fr}.heatmap-board{width:min(92vw,74vh);margin-top:-5vh}.heatmap-side{max-height:none}}

/* v0.19.25: Bildschirmwahl Buttons ausgerichtet */
.clean-screen-choice {
  align-items: stretch;
}
.clean-screen-choice .role-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.clean-screen-choice .role-card > p.muted {
  min-height: 5.6em;
}
.clean-screen-choice .role-card .button.big:first-of-type {
  margin-top: 0;
}
.clean-screen-choice .role-card .copy-line,
.clean-screen-choice .role-card .email-link-form,
.clean-screen-choice .role-card .secondary-action,
.clean-screen-choice .role-card .small {
  margin-top: .65rem;
}


@media (max-width: 980px) {
  .clean-screen-choice .role-card > p.muted {
    min-height: auto;
  }
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-real-table thead tr:first-child,
.game-type-tactics .tactics-layout.tactics-many .tactics-real-table thead tr:first-child {
  height: clamp(34px, 4.8vh, 52px) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tactics-real-table thead tr:nth-child(2),
.game-type-tactics .tactics-layout.tactics-many .tactics-real-table thead tr:nth-child(2) {
  height: clamp(26px, 3.6vh, 40px) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-cell,
.game-type-tactics .tactics-layout.tactics-many .tt-cell {
  height: calc((100% - 76px) / var(--tactics-rows)) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-target {
  font-size: clamp(1.0rem, 2.7vh, 2.05rem) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-name {
  font-size: clamp(.95rem, 1.55vw, 1.75rem) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-points {
  font-size: clamp(1.0rem, 2.55vh, 1.9rem) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-x {
  font-size: clamp(.85rem, 3.1vh, 2.45rem) !important;
  margin: 0 2px !important;
}
.game-type-tactics .tactics-layout.tactics-many .tt-cell {
  height: calc((100% - 64px) / var(--tactics-rows)) !important;
}

.tauziehen-layout.tau-medium,
.tauziehen-layout.tau-many {
  gap: 4px;
}
.tauziehen-layout.tau-medium .tau-score-head,
.tauziehen-layout.tau-many .tau-score-head {
  gap: 6px;
}
.tauziehen-layout.tau-medium .tau-side-player,
.tauziehen-layout.tau-medium .tau-main-score,
.tauziehen-layout.tau-many .tau-side-player,
.tauziehen-layout.tau-many .tau-main-score {
  min-height: 46px;
  padding: 4px 8px;
  border-radius: 10px;
}
.tauziehen-layout.tau-medium .tau-side-name,
.tauziehen-layout.tau-many .tau-side-name {
  font-size: clamp(.95rem, 1.75vw, 1.8rem);
}
.tauziehen-layout.tau-medium .tau-active-member,
.tauziehen-layout.tau-many .tau-active-member {
  display: none;
}
.tauziehen-layout.tau-medium .tau-side-points,
.tauziehen-layout.tau-many .tau-side-points {
  font-size: clamp(.95rem, 1.7vw, 1.55rem);
}
.tauziehen-layout.tau-medium .tau-main-score,
.tauziehen-layout.tau-many .tau-main-score {
  font-size: clamp(1.45rem, 3.1vw, 2.65rem);
  min-width: clamp(78px, 7vw, 120px);
}
.tauziehen-layout.tau-medium .tau-table thead,
.tauziehen-layout.tau-many .tau-table thead {
  height: 28px;
}
.tauziehen-layout.tau-medium .tau-table th,
.tauziehen-layout.tau-medium .tau-table td,
.tauziehen-layout.tau-many .tau-table th,
.tauziehen-layout.tau-many .tau-table td {
  padding: 1px 5px;
}
.tauziehen-layout.tau-medium .tau-target,
.tauziehen-layout.tau-many .tau-target {
  font-size: clamp(.95rem, 2.45vh, 1.8rem);
  width: clamp(44px, 4.6vw, 70px);
}
.tauziehen-layout.tau-medium .tau-row-points,
.tauziehen-layout.tau-many .tau-row-points {
  font-size: clamp(.8rem, 1.75vh, 1.25rem);
  width: clamp(36px, 3.6vw, 58px);
}
.tauziehen-layout.tau-medium .tau-board-cell,
.tauziehen-layout.tau-many .tau-board-cell {
  padding: 1px 6px !important;
}
.tauziehen-layout.tau-medium .tau-track-line,
.tauziehen-layout.tau-many .tau-track-line {
  gap: clamp(2px, .35vw, 6px);
}
.tauziehen-layout.tau-medium .tau-field,
.tauziehen-layout.tau-many .tau-field {
  min-height: clamp(17px, 2.7vh, 32px);
  border-width: 1px;
  font-size: clamp(.9rem, 2.1vh, 1.55rem);
}


/* v0.19.26: Bildschirmauswahl - gelbe Hauptbuttons exakt auf gleicher Hoehe */
.clean-screen-choice .role-card > .muted:first-of-type,
.clean-screen-choice .role-card > p.muted:first-of-type {
  flex: 0 0 5.6em !important;
  min-height: 5.6em !important;
  margin-bottom: 0 !important;
}
.clean-screen-choice .role-card > .button.big:first-of-type {
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}
@media (max-width: 980px) {
  .clean-screen-choice .role-card > .muted:first-of-type,
  .clean-screen-choice .role-card > p.muted:first-of-type {
    flex-basis: auto !important;
    min-height: auto !important;
  }
}

/* v0.19.33: Sprachausgabe nach Spielart gruppiert */
.speech-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
}
.speech-group h3 {
  margin: 0 0 4px;
  color: var(--accent, #ffd54a);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.1;
}
.speech-group .speech-setting-row {
  background: rgba(255,255,255,.05);
}


/* v0.19.36: Autodarts-Steuerung dauerhaft in der großen Infozeile */
.game-message-shell {
  position: relative;
}
.game-message-shell .game-message {
  padding-right: clamp(260px, 28vw, 390px);
}
.autodarts-permanent-actions {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.autodarts-permanent-actions button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 11px;
  padding: 9px 12px;
  background: rgba(255,255,255,.94);
  color: #111827;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(0,0,0,.24);
}
.autodarts-permanent-actions button:hover { filter: brightness(1.07); }
.mode-display .autodarts-permanent-actions button {
  font-size: clamp(.9rem, 1.15vw, 1.25rem);
  padding: 10px 14px;
}
@media (max-width: 760px) {
  .game-message-shell .game-message { padding-right: 10px; padding-bottom: 58px; }
  .autodarts-permanent-actions {
    top: auto;
    bottom: 8px;
    right: 50%;
    transform: translateX(50%);
    width: calc(100% - 16px);
    justify-content: center;
  }
  .autodarts-permanent-actions button { flex: 1 1 0; max-width: 150px; padding: 8px 7px; }
}

/* v20.02: In der großen Infozeile exakt dieselben SVG-Darts wie in den Spielerboxen. */
.autodarts-hit-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 32px);
  flex-wrap: wrap;
}
.autodarts-hit {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  white-space: nowrap;
}
.autodarts-hit .autodarts-dart-icon {
  width: clamp(28px, 2.2vw, 42px);
  height: clamp(28px, 2.2vw, 42px);
  flex: 0 0 auto;
}
.autodarts-hit .autodarts-dart-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.autodarts-takeout-prompt {
  margin-left: clamp(14px, 2vw, 28px);
}
@media (max-width: 760px) {
  .autodarts-hit-list { gap: 10px; }
  .autodarts-hit .autodarts-dart-icon { width: 38px; height: 38px; }
  .autodarts-takeout-prompt { display: block; margin: 6px 0 0; width: 100%; }
}


/* v20.02: gut sichtbarer Matchstand, kompakte farbige Autodarts-Darts und Leg-Fortsetzung. */
.game-type-x01 .game-topbar > div:nth-of-type(1) {
  min-width: 0;
}
.game-type-x01 #gameSubline {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  min-height: clamp(38px, 4.4vw, 58px);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
}
.game-type-x01 #gameSubline .match-score-big {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  flex: 0 0 auto;
  color: #fff;
  font-size: clamp(1.35rem, 2.55vw, 2.35rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
}
.game-type-x01 #gameSubline .match-score-big b {
  color: #ffe600;
  font-weight: 950;
  margin-left: .28em;
}
.game-type-x01 #gameSubline .match-score-big b:first-child { margin-left: 0; }
.game-type-x01 #gameSubline .match-details {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f2f4f8;
  font-size: clamp(.78rem, 1vw, 1rem);
}

.game-type-x01 .score-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(10px, 1vw, 18px);
}
.game-type-x01 .score-card-title h2 { flex: 0 0 auto; }
.game-type-x01 .score-card-title .small-meta {
  order: 1;
  display: inline-block;
  margin: 0;
  color: #ffe600;
  font-size: clamp(.9rem, 1.25vw, 1.25rem);
  font-weight: 900;
}
.game-type-x01 .score-card-title .match-mini { order: 2; flex-basis: 100%; }
.game-type-x01 .score-card-title .team-info { order: 3; flex-basis: 100%; }

.game-message .autodarts-hit-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: clamp(10px, 1.25vw, 20px);
  min-width: 0;
}
.game-message .autodarts-hit {
  gap: .12em;
  flex: 0 0 auto;
}
.game-message .autodarts-hit .autodarts-dart-icon {
  width: clamp(24px, 1.8vw, 34px);
  height: clamp(24px, 1.8vw, 34px);
  opacity: 1;
}
.game-message .autodarts-hit .autodarts-dart-icon svg { filter: none; opacity: 1; }
/* Darts 1/2/3 wie in den Spielerboxen: rot, grün, blau. */
.game-message .autodarts-dart-1 .dart-barrel,
.game-message .autodarts-dart-1 .dart-flight-main { fill:#39FF14 !important; }
.game-message .autodarts-dart-1 .dart-flight-top,
.game-message .autodarts-dart-1 .dart-flight-bottom { fill:#d71920 !important; }
.game-message .autodarts-dart-1 .dart-flight-tail-top,
.game-message .autodarts-dart-1 .dart-flight-tail-bottom { fill:#ff7474 !important; }
.game-message .autodarts-dart-2 .dart-barrel,
.game-message .autodarts-dart-2 .dart-flight-main { fill:#31d02f !important; }
.game-message .autodarts-dart-2 .dart-flight-top,
.game-message .autodarts-dart-2 .dart-flight-bottom { fill:#159d19 !important; }
.game-message .autodarts-dart-2 .dart-flight-tail-top,
.game-message .autodarts-dart-2 .dart-flight-tail-bottom { fill:#78e96f !important; }
.game-message .autodarts-dart-3 .dart-barrel,
.game-message .autodarts-dart-3 .dart-flight-main { fill:#18b8f2 !important; }
.game-message .autodarts-dart-3 .dart-flight-top,
.game-message .autodarts-dart-3 .dart-flight-bottom { fill:#087fc1 !important; }
.game-message .autodarts-dart-3 .dart-flight-tail-top,
.game-message .autodarts-dart-3 .dart-flight-tail-bottom { fill:#72d8ff !important; }
.game-message .autodarts-dart-icon .dart-tip { fill:#fff !important; }
.game-message .autodarts-dart-icon .dart-shaft { fill:#ddd !important; }
.game-message .autodarts-dart-icon .dart-grip { fill:#aaa !important; }
.autodarts-takeout-prompt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nextLegBtnTop:not([hidden]),
#nextLegBtn:not([hidden]) {
  color: #181400;
  background: #ffe600;
  border-color: #fff36a;
  font-weight: 950;
  box-shadow: 0 0 8px #ffe600, 0 0 20px rgba(255,230,0,.9), 0 0 36px rgba(255,230,0,.55);
  animation: next-leg-glow-1947 1.05s ease-in-out infinite alternate;
}
@keyframes next-leg-glow-1947 {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.045); filter: brightness(1.16); }
}

@media (max-width: 900px) {
  .game-type-x01 #gameSubline .match-score-big { font-size: clamp(1.15rem, 4vw, 1.7rem); }
  .game-type-x01 #gameSubline .match-details { display: none; }
  .game-message .autodarts-hit-list { gap: 7px; }
  .game-message .autodarts-hit .autodarts-dart-icon { width: 25px; height: 25px; }
}

/* v20.01: dauerhafter Abschlussbereich nach dem Sieger-Jingle */
.game-finished-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 2px solid #6fe000;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 70, 12, .94), rgba(6, 34, 7, .97));
  box-shadow: 0 0 18px rgba(111, 224, 0, .32), inset 0 0 22px rgba(111, 224, 0, .08);
}
.game-finished-panel[hidden] { display: none !important; }
.game-finished-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.35rem);
  font-weight: 1000;
  color: #fff;
}
.game-finished-title > strong { letter-spacing: .025em; }
.game-finished-title b { color: #ffe600; }
.game-finished-trophy { font-size: 1.15em; }
.game-finished-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.game-finished-button { min-height: 48px; font-size: clamp(.95rem, 1.3vw, 1.2rem); }
.game-new-button { background: #159b1b !important; border-color: #62ed54 !important; color: #fff !important; }
.game-summary-overlay {
  position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
  padding: 18px; background: rgba(0,0,0,.76);
}
.game-summary-overlay[hidden] { display: none !important; }
.game-summary-card {
  width: min(920px, 96vw); max-height: 88vh; overflow: auto;
  border: 2px solid rgba(121,184,255,.65); border-radius: 20px;
  background: linear-gradient(180deg, #101d31, #07111f); padding: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.game-summary-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.game-summary-head h2 { margin:0; font-size:clamp(1.5rem,3vw,2.4rem); }
.game-summary-close { min-width:48px; min-height:44px; }
.game-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.game-summary-player { border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:16px; background:rgba(255,255,255,.045); }
.game-summary-player.is-winner { border-color:#ffe600; box-shadow:inset 0 0 0 2px rgba(255,230,0,.14); }
.game-summary-player h3 { margin:0 0 12px; font-size:1.4rem; }
.game-summary-player dl { display:grid; grid-template-columns:1fr auto; gap:8px 14px; margin:0; }
.game-summary-player dt { color:var(--muted); font-weight:800; }
.game-summary-player dd { margin:0; font-weight:1000; }
@media (max-width: 850px) {
  .game-finished-panel { grid-template-columns: 1fr; }
  .game-finished-actions { justify-content: stretch; }
  .game-finished-actions .button { flex: 1 1 150px; }
}


/* v20.02: Abschluss-Statistiken direkt in den X01-Spielerkarten */
.player-card.winner-card {
  border-color: #ffe600;
  box-shadow: 0 0 0 4px rgba(255,230,0,.16), var(--shadow);
}
.card-status-stack .active-badge.is-winner {
  background: #ffe600;
  color: #050505;
  border: 1px solid #fff27a;
  min-width: 112px;
}
.x01-final-stats {
  position: absolute;
  right: clamp(14px, 1.6vw, 24px);
  top: 50%;
  transform: translateY(-38%);
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px 16px;
  min-width: min(43%, 310px);
  margin: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 14px;
  background: rgba(3,8,15,.78);
  backdrop-filter: blur(3px);
  font-size: clamp(.82rem, 1.15vw, 1.12rem);
  z-index: 2;
}
.x01-final-stats dt { color: rgba(255,255,255,.82); font-weight: 750; }
.x01-final-stats dd { margin: 0; text-align: right; font-weight: 1000; color: #fff; }
.player-card.winner-card .x01-final-stats dd { color: #ffe600; }
.player-card:has(.x01-final-stats) .score {
  justify-self: start;
  margin-left: clamp(8%, 9vw, 18%);
  max-width: 46%;
}
@media (max-width: 820px) {
  .x01-final-stats {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    order: 3;
  }
  .player-card:has(.x01-final-stats) .score {
    justify-self: center;
    margin-left: 0;
    max-width: none;
  }
}

/* v20.03: gespeicherter X01-Leg-Verlauf */
.game-history-list {
  display: grid;
  gap: 12px;
}
.game-history-leg {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  padding: 12px;
  background: rgba(255,255,255,.045);
}
.game-history-leg.is-final {
  border-color: #6fe000;
  box-shadow: inset 0 0 0 2px rgba(111,224,0,.13);
}
.game-history-number {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 12px;
  background: #ffe600;
  color: #070707;
  font-size: 1.65rem;
  font-weight: 1000;
}
.game-history-main { min-width: 0; }
.game-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 1.18rem;
}
.game-history-head strong { color: #fff; }
.game-history-head span {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(111,224,0,.18);
  border: 1px solid rgba(111,224,0,.55);
  color: #baff83;
  font-weight: 900;
}
.game-history-finish { margin-top: 5px; color: rgba(255,255,255,.82); }
.game-history-finish b { color: #ffe600; }
.game-history-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: .93rem;
}
.game-history-empty {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: rgba(255,255,255,.78);
}
@media (max-width: 600px) {
  .game-history-leg { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .game-history-number { min-height: 44px; font-size: 1.25rem; }
  .game-history-head { align-items: flex-start; font-size: 1rem; }
}

/* v20.04: grafischer Leg-Verlauf oberhalb der Detailansicht */
.game-history-visual-wrap {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  background: rgba(0,0,0,.18);
}
.game-history-visual-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.game-history-visual-title strong { font-size: 1.2rem; color: #fff; }
.game-history-visual-title span { color: rgba(255,255,255,.68); font-size: .86rem; }
.game-history-visual-title i {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border-radius: 3px;
  background: #ffe600;
  vertical-align: -2px;
}
.game-history-visual-scroll { overflow-x: auto; padding-bottom: 4px; }
.game-history-visual {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) repeat(var(--history-cols), minmax(48px, 1fr)) minmax(48px, .7fr);
  gap: 6px;
  min-width: max-content;
  align-items: stretch;
}
.game-history-visual-corner,
.game-history-visual-total-head,
.game-history-visual-head-cell,
.game-history-visual-name,
.game-history-visual-cell,
.game-history-visual-total {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.game-history-visual-corner,
.game-history-visual-total-head {
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 900;
  background: rgba(255,255,255,.055);
}
.game-history-visual-head-cell {
  grid-template-rows: auto auto;
  align-content: center;
  gap: 1px;
  color: #fff;
  background: rgba(255,255,255,.065);
}
.game-history-visual-head-cell span { min-height: 12px; color: #9dff69; font-size: .72rem; line-height: 1; }
.game-history-visual-name {
  justify-items: start;
  padding: 0 12px;
  color: #fff;
  font-weight: 900;
  background: rgba(255,255,255,.055);
  white-space: nowrap;
}
.game-history-visual-name.is-winner { color: #ffe600; }
.game-history-visual-cell {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 1000;
  color: #101000;
}
.game-history-visual-cell.is-win {
  background: #ffe600;
  border-color: #fff36a;
}
.game-history-visual-cell.is-loss {
  background: rgba(255,54,54,.22);
  border-color: rgba(255,90,90,.35);
  color: rgba(255,255,255,.35);
}
.game-history-visual-cell.is-set-end::after,
.game-history-visual-cell.is-game-end::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: #6fe000;
}
.game-history-visual-cell.is-game-end::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.65); }
.game-history-visual-total {
  color: #ffe600;
  font-size: 1.2rem;
  font-weight: 1000;
  background: rgba(111,224,0,.10);
  border: 1px solid rgba(111,224,0,.35);
}
.game-history-detail-title {
  margin: 2px 0 10px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 1000;
}
@media (max-width: 620px) {
  .game-history-visual-title { align-items: flex-start; flex-direction: column; }
  .game-history-visual { grid-template-columns: minmax(105px, 1.3fr) repeat(var(--history-cols), 46px) 46px; }
}


/* v20.05: Höhepunkte auf dem Abschluss-Hauptbildschirm */
.game-finished-highlights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.game-finished-highlights > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: rgba(0,0,0,.24);
}
.game-finished-highlights span {
  color: rgba(255,255,255,.78);
  font-weight: 800;
  white-space: nowrap;
}
.game-finished-highlights strong {
  color: #ffe600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 900px) {
  .game-finished-highlights { grid-template-columns: 1fr; }
  .game-finished-highlights > div { grid-template-columns: minmax(145px, auto) minmax(0, 1fr); }
}

/* v20.05: kompakterer und klarer markierter Leg-Verlauf */
.game-history-list { gap: 8px; }
.game-history-leg { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; padding: 9px 11px; }
.game-history-number { min-height: 48px; font-size: 1.35rem; }
.game-history-head { font-size: 1.05rem; }
.game-history-finish, .game-history-scores { line-height: 1.25; }
.game-history-visual-cell.is-set-end { box-shadow: inset 0 0 0 2px #6fe000; }
.game-history-visual-cell.is-game-end {
  box-shadow: inset 0 0 0 3px #fff, 0 0 10px rgba(255,255,255,.35);
}
.game-history-visual-head-cell span { font-size: .9rem; }


/* v20.09: Zusammenfassung und Leg-Verlauf direkt unter den Spielerboxen */
.game-finished-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 14px;
  margin: 16px 0 6px;
}
.game-finished-details[hidden] { display: none !important; }
.game-finished-summary-table,
.game-finished-leg-overview {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(121,184,255,.45);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(15,31,53,.96), rgba(7,17,31,.98));
}
.game-finished-details h3 {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.game-finished-table-scroll,
.inline-leg-scroll { overflow-x: auto; }
.game-finished-summary-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.82rem, 1.05vw, 1.02rem);
}
.game-finished-summary-table th,
.game-finished-summary-table td {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.22);
  text-align: center;
  white-space: nowrap;
}
.game-finished-summary-table thead th { background: rgba(255,255,255,.06); }
.game-finished-summary-table tbody th { text-align: left; }
.game-finished-summary-table tr.is-winner { color: #ffe600; font-weight: 950; }
.game-finished-summary-table td span { color: rgba(255,255,255,.72); }
.inline-leg-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inline-leg-title h3 { margin-bottom: 10px; }
.inline-leg-title span { color: rgba(255,255,255,.70); font-size: .82rem; white-space: nowrap; }
.inline-leg-grid {
  display: grid;
  grid-template-columns: minmax(112px, 1.25fr) repeat(var(--inline-leg-cols), minmax(45px, 1fr)) 48px;
  gap: 4px;
  min-width: calc(170px + (var(--inline-leg-cols) * 48px));
}
.inline-leg-corner,
.inline-leg-head,
.inline-leg-name,
.inline-leg-cell,
.inline-leg-total,
.inline-leg-total-head {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.inline-leg-corner,
.inline-leg-head,
.inline-leg-total-head { background: rgba(255,255,255,.07); font-weight: 850; }
.inline-leg-head { flex-direction: column; gap: 0; line-height: 1; }
.inline-leg-head span { min-height: 12px; font-size: .68rem; color: #73f15d; }
.inline-leg-name { justify-content: flex-start; padding: 0 10px; background: rgba(255,255,255,.05); font-weight: 900; white-space: nowrap; }
.inline-leg-name.is-winner { color: #ffe600; }
.inline-leg-cell { border: 1px solid rgba(255,255,255,.12); font-weight: 1000; }
.inline-leg-cell.is-win { color: #181400; background: #ffe600; border-color: #fff36a; }
.inline-leg-cell.is-loss { background: rgba(170,34,48,.32); border-color: rgba(255,94,105,.28); }
.inline-leg-cell.is-set-end { box-shadow: inset 0 0 0 2px #6fe000; }
.inline-leg-cell.is-game-end { box-shadow: inset 0 0 0 3px #fff; }
.inline-leg-total { color: #ffe600; background: rgba(255,255,255,.05); font-size: 1.12rem; font-weight: 1000; }
@media (max-width: 980px) {
  .game-finished-details { grid-template-columns: 1fr; }
}


/* v20.09: eigener Abschlussbildschirm ohne große Spielerboxen */
.players-grid[hidden] {
  display: none !important;
}
.game-finished-details {
  margin-top: 14px;
  align-items: start;
}
.game-finished-summary-table,
.game-finished-leg-overview {
  min-height: 100%;
}
@media (min-width: 981px) {
  .game-finished-details {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  }
}


/* v20.14: X01-Kopfzeile mit grosser Set-/Leg-Anzeige */
.game-type-x01 .x01-card-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: clamp(8px, 1vw, 16px);
}
.game-type-x01 .x01-card-header .score-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.game-type-x01 .x01-card-header .score-card-title h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-type-x01 .x01-card-header .score-card-title .small-meta {
  order: initial;
  flex-basis: auto;
}
.game-type-x01 .x01-match-center {
  align-self: start;
  display: flex;
  justify-content: center;
  min-width: clamp(110px, 10vw, 160px);
  transform: translateY(-6px);
}

.x01-card-header .card-status-stack {
  justify-self: end;
}
.game-type-x01 .x01-match-center .match-mini {
  margin: 0;
  padding: .28rem .72rem;
  gap: .7rem;
  border-radius: 999px;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1;
  background: rgba(255,255,255,.11);
}
.game-type-x01 .x01-card-header .card-status-stack {
  gap: 4px;
}
.game-type-x01 .x01-card-header .header-dart-status {
  justify-content: center;
  width: 100%;
}
/* Punktestand etwas kleiner, damit Set/Leg optisch mehr Gewicht bekommen. */
.game-type-x01 .players-grid .player-card > .score {
  font-size: clamp(3.1rem, 6.5vw, 7.4rem);
}
.game-type-x01 .players-grid[data-count="1"] .player-card > .score,
.game-type-x01 .players-grid[data-count="2"] .player-card > .score {
  font-size: clamp(4.6rem, 9.5vw, 10.5rem);
}
.game-type-x01 .players-grid[data-count="3"] .player-card > .score {
  font-size: clamp(3.8rem, 6.4vw, 7.6rem);
}
.game-type-x01 .players-grid[data-count="4"] .player-card > .score {
  font-size: clamp(3.35rem, 5.8vw, 6.8rem);
}
.game-type-x01 .players-grid[data-count="7"] .x01-card-header,
.game-type-x01 .players-grid[data-count="8"] .x01-card-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 7px;
}
.game-type-x01 .players-grid[data-count="7"] .x01-match-center,
.game-type-x01 .players-grid[data-count="8"] .x01-match-center {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  min-width: 0;
}
.game-type-x01 .players-grid[data-count="7"] .x01-match-center .match-mini,
.game-type-x01 .players-grid[data-count="8"] .x01-match-center .match-mini {
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  padding: .18rem .46rem;
}
.game-type-x01 .players-grid[data-count="7"] .card-status-stack,
.game-type-x01 .players-grid[data-count="8"] .card-status-stack {
  grid-column: 2;
  grid-row: 1 / span 2;
}
@media (max-width: 900px) {
  .game-type-x01 .x01-card-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .game-type-x01 .x01-match-center {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    min-width: 0;
  }
  .game-type-x01 .x01-card-header .card-status-stack {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .game-type-x01 .x01-match-center .match-mini {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    padding: .2rem .5rem;
  }
}

/* v20.15: intelligente X01-Checkout-Farben */
.score.normal-score {
  color: #ffe34f;
  text-shadow: 0 0 0.16em rgba(255, 227, 79, 0.34);
}
.score.checkout-three-score {
  color: #ff9f2f;
  text-shadow: 0 0 0.2em rgba(255, 159, 47, 0.48);
}
.score.checkout-one-score {
  color: #39FF14;
  text-shadow: 0 0 0.22em rgba(57,255,20,0.60);
}
.score.bogey-score {
  color: #d770ff;
  text-shadow: 0 0 0.2em rgba(215, 112, 255, 0.45);
}


/* v20.15.1: Checkout-Farben haben auch beim aktiven Spieler Vorrang */
.player-card.active .score.normal-score {
  color: #ffe34f;
  text-shadow: 0 0 0.16em rgba(255, 227, 79, 0.34);
}
.player-card.active .score.checkout-three-score {
  color: #ff9f2f;
  text-shadow: 0 0 0.2em rgba(255, 159, 47, 0.48);
}
.player-card.active .score.checkout-one-score {
  color: #39FF14;
  text-shadow: 0 0 0.22em rgba(57,255,20,0.60);
}
.player-card.active .score.bogey-score {
  color: #d770ff;
  text-shadow: 0 0 0.2em rgba(215, 112, 255, 0.45);
}


/* v20.15.3: Qualitätsdurchgang Highscore, Shanghai und Tauziehen */
.tau-side-name .tau-name-points {
  display: inline-block;
  margin-left: .55rem;
  padding: .16rem .5rem;
  border: 1px solid rgba(255,230,120,.55);
  border-radius: 999px;
  background: rgba(255,230,120,.13);
  color: #ffe678;
  font-size: .62em;
  line-height: 1.15;
  vertical-align: .12em;
  white-space: nowrap;
}
.tau-side-player.active .tau-name-points {
  background: #ffe000;
  color: #17120a;
  border-color: #ffe000;
  box-shadow: 0 0 14px rgba(255,224,0,.28);
}
.shanghai-score-block > span { color: rgba(255,230,120,.88); }
.shanghai-card.active .shanghai-score-block .highscore-total {
  color: #ffe45c;
  text-shadow: 0 0 18px rgba(255,228,92,.20);
}


/* v20.15.4: Round the Clock lesbarer, ohne Änderung der Spiellogik */
.rtc-board-card {
  padding: 1rem 1.05rem;
}
.rtc-board-title {
  margin-bottom: .72rem;
}
.rtc-board-title strong {
  color: #ffe35a;
  text-shadow: 0 0 18px rgba(255,227,90,.30);
}
.rtc-target-strip {
  gap: .48rem;
}
.rtc-target {
  min-width: 2.55rem;
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .38rem .58rem;
  font-size: 1.05rem;
}
.rtc-target.current {
  transform: scale(1.13);
  outline: 4px solid rgba(255, 230, 0, .92);
  background: rgba(255, 230, 0, .25);
  color: #fff8bc;
  box-shadow: 0 0 20px rgba(255, 230, 0, .32);
}
.rtc-card .rtc-next-target strong {
  color: inherit;
}
.rtc-card.active .rtc-next-target strong {
  color: #ffe35a;
  text-shadow: 0 0 18px rgba(255,227,90,.20);
}
.rtc-stats {
  font-size: clamp(1rem, 1.65vw, 1.18rem);
  opacity: .96;
}
.rtc-dart-meta:empty {
  min-height: 1.35em;
}


/* v20.16.0: Round the Clock kompakter und bei 3/4 Spielern vollständig sichtbar */
.game-topbar { position: sticky; }
.match-center-score {
  position: absolute;
  left: 50%;
  top: .55rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff6bf;
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
}
.game-type-roundclock .roundclock-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.game-type-roundclock .roundclock-grid[data-count="1"] { grid-template-columns: 1fr; }
.game-type-roundclock .roundclock-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-type-roundclock .roundclock-grid[data-count="3"],
.game-type-roundclock .roundclock-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-type-roundclock .rtc-board-card {
  padding: .5rem .7rem;
  border-radius: 14px;
}
.game-type-roundclock .rtc-target-strip {
  gap: .28rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.game-type-roundclock .rtc-target-strip::-webkit-scrollbar { display: none; }
.game-type-roundclock .rtc-target {
  min-width: 2.05rem;
  min-height: 2.05rem;
  padding: .24rem .42rem;
  font-size: .95rem;
  flex: 0 0 auto;
}
.game-type-roundclock .rtc-card {
  min-height: clamp(220px, calc((100vh - 265px) / 2), 390px);
  grid-template-rows: auto 1fr auto auto;
}
.game-type-roundclock .rtc-next-target { margin: .15rem 0 .35rem; }
.game-type-roundclock .rtc-next-target strong { font-size: clamp(3.4rem, 7vw, 6.4rem); }
.game-type-roundclock .rtc-progress { margin: .1rem 0 .35rem; }
.game-type-roundclock .rtc-stats { display: none !important; }
@media (max-width: 900px) {
  .match-center-score { position: static; transform: none; order: 3; margin: 0 auto; }
}

/* v20.16.1: Round the Clock bei 3/4 Spielern vollständig im sichtbaren Bereich */
.game-type-roundclock .roundclock-grid {
  height: calc(100vh - 238px);
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(2, minmax(0, 1fr));
  align-content: stretch;
  overflow: hidden;
}
.game-type-roundclock .rtc-board-card {
  grid-column: 1 / -1 !important;
  min-height: 0;
}
.game-type-roundclock .rtc-card {
  min-height: 0 !important;
  height: 100%;
  padding: clamp(.55rem, 1vw, .9rem);
  overflow: hidden;
}
.game-type-roundclock .rtc-next-target {
  align-self: center;
  margin: 0;
}
.game-type-roundclock .rtc-next-target span {
  font-size: clamp(.8rem, 1.05vw, 1rem);
}
.game-type-roundclock .rtc-next-target strong {
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: .92;
}
.game-type-roundclock .rtc-progress {
  margin: .05rem 0 .18rem;
}
.game-type-roundclock .highscore-throw-line {
  margin-top: .1rem;
}
@media (max-height: 760px) {
  .game-type-roundclock .roundclock-grid {
    height: calc(100vh - 218px);
    gap: 8px;
  }
  .game-type-roundclock .rtc-board-card { padding: .28rem .55rem; }
  .game-type-roundclock .rtc-target {
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: .14rem .3rem;
    font-size: .82rem;
  }
  .game-type-roundclock .rtc-next-target strong {
    font-size: clamp(4.4rem, 8vw, 6.8rem);
  }
}


/* v20.16.2: Teamspieler bei Round the Clock kompakt neben dem Teamnamen */
.game-type-roundclock .rtc-card .score-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(.55rem, 1vw, 1rem);
  row-gap: .18rem;
}
.game-type-roundclock .rtc-card .score-card-title h2 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}
.game-type-roundclock .rtc-card .team-inline-info {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  min-width: 0;
  padding: .15rem .48rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: clamp(.78rem, 1vw, 1rem);
  line-height: 1.1;
  white-space: nowrap;
}
.game-type-roundclock .rtc-card .team-inline-info.hot {
  border-color: rgba(255,224,0,.9);
  background: rgba(255,224,0,.16);
  color: #ffe45c;
}
.game-type-roundclock .rtc-card .team-inline-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(7rem, 14vw, 13rem);
}
.game-type-roundclock .rtc-card .rtc-dart-meta {
  flex-basis: 100%;
  order: 3;
}

/* v20.16.4: einheitliche kompakte Teamkopfzeile und zentrierter Satz-/Legstand */
.game-body .game-topbar {
  position: relative;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(380px, auto) !important;
}
.game-body .match-center-score {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4;
  margin: 0 !important;
  pointer-events: none;
}

.score-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .28rem .55rem;
  min-width: 0;
}
.score-card-title h2 {
  flex: 0 1 auto;
  min-width: 0;
}
.team-inline-info {
  display: inline-flex;
  align-items: baseline;
  gap: .22rem;
  padding: .18rem .48rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
  font-size: clamp(.72rem, .9vw, .92rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.team-inline-info.hot {
  border-color: var(--accent, #ffd54f);
  color: var(--active-text, #fff36b);
  background: rgba(255,213,79,.10);
}
.team-inline-info strong { font-weight: 950; }
.compact-team-roster {
  order: 20;
  flex: 1 0 100%;
  margin: .05rem 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.72rem, .88vw, .9rem);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Alte großflächige Teamhinweise dürfen in Spielkarten nicht mehr erscheinen. */
.player-card .team-active-player,
.player-card .team-last-thrower { display: none !important; }

/* RTC behält die Teamliste unter der Dart-/Zugzeile. */
.game-type-roundclock .rtc-card .rtc-team-roster {
  flex-basis: 100%;
  order: 5;
}

@media (max-width: 1100px) {
  .game-body .game-topbar {
    grid-template-columns: auto minmax(150px, 1fr) auto !important;
  }
  .game-body .game-id-chip { grid-column: 3; }
  .game-body .top-actions { grid-column: 1 / -1; }
  .game-body .match-center-score {
    top: .45rem !important;
    transform: translateX(-50%) !important;
  }
}


/* v20.16.6: stabile Kopfzeile ohne Überlappung; Teamliste mit mehr Abstand */
.game-body .game-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(210px, 1fr) max-content auto minmax(360px, max-content) !important;
  align-items: center;
  column-gap: clamp(.55rem, 1vw, 1.15rem);
  position: sticky;
}
.game-body .game-topbar > .back { grid-column: 1; }
.game-body .game-topbar > div:nth-of-type(1) {
  grid-column: 2;
  min-width: 0;
}
.game-body .match-center-score {
  grid-column: 3;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: center;
  align-self: center;
  margin: 0 !important;
  z-index: auto;
  pointer-events: none;
  max-width: min(31vw, 410px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-body .game-id-chip {
  grid-column: 4;
  position: relative;
  z-index: 1;
}
.game-body .top-actions {
  grid-column: 5;
  justify-self: end;
  min-width: 0;
}

/* Die vollständige Mannschaft steht bewusst unter der Kopfzeile und bekommt Luft. */
.score-card-title .compact-team-roster,
.game-type-roundclock .rtc-card .rtc-team-roster {
  margin-top: .28rem !important;
  padding-top: .04rem;
}

@media (max-width: 1220px) {
  .game-body .game-topbar {
    grid-template-columns: auto minmax(180px, 1fr) max-content auto !important;
    row-gap: .45rem;
  }
  .game-body .game-topbar > .back { grid-column: 1; }
  .game-body .game-topbar > div:nth-of-type(1) { grid-column: 2; }
  .game-body .match-center-score { grid-column: 3; max-width: 34vw; }
  .game-body .game-id-chip { grid-column: 4; }
  .game-body .top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .game-body .game-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  .game-body .game-topbar > .back { grid-column: 1; }
  .game-body .game-topbar > div:nth-of-type(1) { grid-column: 2; }
  .game-body .game-id-chip { grid-column: 3; }
  .game-body .match-center-score {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: calc(100vw - 2rem);
  }
  .game-body .top-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
  }
}

/* v20.16.6: Teamköpfe und zentrale Sets/Legs konsistent */
.tt-name, .tau-side-name, .x01-card-header h2 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.tt-name .team-inline-info,
.tau-side-name .team-inline-info,
.x01-card-header h2 .team-inline-info { font-size: .48em; }
.tt-team-roster, .tau-team-roster {
  margin-top: .18rem;
  font-size: .78rem;
  opacity: .9;
  font-weight: 700;
}
.tt-active-member, .tau-active-member { display:none !important; }
.game-body .game-topbar > div:nth-of-type(1) p#gameSubline,
.game-body .game-topbar #gameSubline { white-space: normal; }

/* v20.17.0: gemeinsame Karten-Kopfzeile für X01, Highscore, RTC, Echo und Shanghai */
.unified-card-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: .55rem 1rem;
  width: 100%;
}
.unified-card-title { min-width: 0; }
.unified-card-title-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  flex-wrap: wrap;
}
.unified-card-title-row h2 {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
}
.unified-card-title-row .team-inline-info {
  flex: 0 0 auto;
  margin: 0;
}
.unified-card-meta {
  margin-top: .22rem;
  line-height: 1.2;
}
.unified-team-roster {
  margin-top: .22rem !important;
  padding-top: 0 !important;
  width: 100%;
}
.unified-card-center {
  align-self: center;
  justify-self: center;
}
.unified-card-header .card-status-stack {
  align-self: start;
  justify-self: end;
}
/* Alte, spielartspezifische Teamblöcke in den fünf Kachelspielen ausblenden. */
.game-type-x01 .player-card > .team-active-player,
.game-type-highscore .player-card > .team-active-player,
.game-type-roundclock .player-card > .team-active-player,
.game-type-echo .player-card > .team-active-player,
.game-type-shanghai .player-card > .team-active-player,
.game-type-x01 .player-card > .team-roster:not(.unified-team-roster),
.game-type-highscore .player-card > .team-roster:not(.unified-team-roster),
.game-type-roundclock .player-card > .team-roster:not(.unified-team-roster),
.game-type-echo .player-card > .team-roster:not(.unified-team-roster),
.game-type-shanghai .player-card > .team-roster:not(.unified-team-roster) {
  display: none !important;
}
@media (max-width: 820px) {
  .unified-card-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .unified-card-center {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* v20.17.1: kompaktere Kachelspiele und größere Touch-Ziele in der Kopfzeile */
.game-body .game-topbar > .back,
.game-body .top-actions .button,
.game-body .top-actions button.button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.game-body .game-id-chip {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Die Kachelspiele nutzen den vorhandenen Platz gleichmäßiger. */
.game-type-roundclock .roundclock-grid,
.game-type-shanghai .shanghai-grid,
.game-type-highscore .highscore-grid,
.game-type-echo .echo-grid {
  align-content: stretch;
}
.game-type-roundclock .rtc-card,
.game-type-shanghai .shanghai-card,
.game-type-highscore .highscore-card,
.game-type-echo .echo-card {
  min-height: 0;
}
.game-type-roundclock .rtc-card .unified-card-meta:empty,
.game-type-shanghai .shanghai-card .unified-card-meta:empty,
.game-type-highscore .highscore-card .unified-card-meta:empty,
.game-type-echo .echo-card .unified-card-meta:empty {
  display: none;
}
.game-type-roundclock .rtc-next-target strong {
  font-size: clamp(5.8rem, 10vw, 9rem);
}
.game-type-shanghai .shanghai-card .highscore-total,
.game-type-highscore .highscore-card .highscore-total {
  font-size: clamp(5rem, 10vw, 9rem);
}
.game-type-roundclock .rtc-card,
.game-type-shanghai .shanghai-card,
.game-type-highscore .highscore-card,
.game-type-echo .echo-card {
  padding-top: clamp(.55rem, .8vw, .8rem);
  padding-bottom: clamp(.5rem, .75vw, .75rem);
}
.game-type-roundclock .rtc-card .highscore-throw-line,
.game-type-shanghai .shanghai-card .highscore-throw-line,
.game-type-highscore .highscore-card .highscore-throw-line,
.game-type-echo .echo-card .highscore-throw-line {
  margin-top: auto;
}

/* v20.18.0: vier Spieler auf breiten Spiel-/Monitoranzeigen nebeneinander */
@media (min-width: 1180px) {
  .players-grid[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .players-grid[data-count="4"] .player-card {
    min-height: clamp(260px, calc(100vh - 235px), 620px);
  }

  .players-grid[data-count="4"] .score {
    font-size: clamp(3.6rem, 5.3vw, 7.2rem);
  }

  .mode-display .players-grid[data-count="4"] .player-card {
    min-height: clamp(380px, calc(100vh - 230px), 720px);
  }

  .mode-display .players-grid[data-count="4"] .score {
    font-size: clamp(4.2rem, 6.7vw, 9rem);
  }
}

/* Auf schmaleren Tablets und Fenstern bleibt die bisherige 2×2-Darstellung. */
@media (min-width: 881px) and (max-width: 1179px) {
  .players-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v20.18.0 Korrektur: Viererreihe in allen kartenbasierten Spielarten.
   Bewusst ausgenommen: Tactics, Tauziehen, Abräumen und Heatmap mit Sonderlayout. */
@media (min-width: 1180px) {
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"],
  .game-type-highscore .highscore-grid[data-count="4"],
  .game-type-shanghai .shanghai-grid[data-count="4"],
  .game-type-roundclock .roundclock-grid[data-count="4"],
  .game-type-echo .echo-grid[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] .player-card {
    min-width: 0;
    min-height: clamp(250px, calc(100vh - 235px), 620px);
    padding-left: clamp(.55rem, 1vw, 1rem);
    padding-right: clamp(.55rem, 1vw, 1rem);
  }

  .game-type-highscore .highscore-grid[data-count="4"] .highscore-card,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-card,
  .game-type-roundclock .roundclock-grid[data-count="4"] .rtc-card,
  .game-type-echo .echo-grid[data-count="4"] .echo-card {
    min-height: clamp(250px, calc(100vh - 235px), 620px) !important;
  }

  .game-type-highscore .highscore-grid[data-count="4"] .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-total,
  .game-type-echo .echo-grid[data-count="4"] .highscore-total,
  .game-type-roundclock .roundclock-grid[data-count="4"] .rtc-next-target strong {
    font-size: clamp(3.2rem, 5vw, 6.5rem) !important;
  }

  .game-body.mode-display:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] .player-card {
    min-height: clamp(360px, calc(100vh - 230px), 720px) !important;
  }
}

/* v20.18.0 Layoutkorrektur 2:
   Einheitliche Spielerboxen auf Spiel- und Monitoransichten.
   1–4 Spieler: eine Zeile; 5: 3+2; 6: 3+3; 7: 4+3; 8: 4+4.
   Sonderlayouts (Tactics, Tauziehen, Abräumen, Heatmap) bleiben unverändert. */
@media (min-width: 881px) {
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="5"],
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="7"],
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Bei einer einzigen Reihe darf keine alte Zweizeilen-Mindesthöhe greifen. */
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="3"] .player-card,
  .game-body:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] .player-card {
    min-width: 0;
    min-height: clamp(250px, calc(100vh - 235px), 620px) !important;
  }

  .game-body.mode-display:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="3"] .player-card,
  .game-body.mode-display:not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] .player-card {
    min-height: clamp(360px, calc(100vh - 230px), 720px) !important;
  }
}

/* Shanghai: Zielzahl deutlich größer, Punktestand im Verhältnis kleiner. */
.game-type-shanghai .shanghai-points-box strong {
  font-size: clamp(4.8rem, 9vw, 8.5rem) !important;
  line-height: .88;
}
.game-type-shanghai .shanghai-card .highscore-total {
  font-size: clamp(2.8rem, 5vw, 5rem) !important;
  line-height: .92;
}
@media (min-width: 881px) {
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-points-box strong,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-points-box strong {
    font-size: clamp(4rem, 6.2vw, 6.8rem) !important;
  }
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-total {
    font-size: clamp(2.4rem, 3.8vw, 4.2rem) !important;
  }
}


/* v20.18.Debug.01: sichtbares Autodarts-Diagnoseprotokoll */
.autodarts-debug-panel {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 10050;
  width: min(760px, calc(100vw - 20px));
  max-height: 34vh;
  display: flex;
  flex-direction: column;
  border: 2px solid #ffd54a;
  border-radius: 10px;
  background: rgba(5, 9, 18, .94);
  color: #f5f7ff;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font: 13px/1.3 Consolas, "Courier New", monospace;
}
.autodarts-debug-head { display:flex; align-items:center; gap:10px; padding:6px 8px; background:#352b00; color:#fff3a2; }
.autodarts-debug-head strong { white-space:nowrap; }
.autodarts-debug-head span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.autodarts-debug-head button,
.autodarts-debug-actions button { min-height:28px; padding:2px 9px; border:1px solid #8c8c8c; border-radius:6px; background:#202938; color:#fff; }
.autodarts-debug-panel pre { margin:0; padding:7px 9px; overflow:auto; min-height:92px; white-space:pre-wrap; word-break:break-word; color:#d9f3ff; }
.autodarts-debug-actions { display:flex; gap:8px; justify-content:flex-end; padding:5px 8px; border-top:1px solid #4b5362; }
.autodarts-debug-panel.is-collapsed pre,
.autodarts-debug-panel.is-collapsed .autodarts-debug-actions { display:none; }
.autodarts-debug-panel.is-collapsed { max-height:none; }
@media (max-width: 760px) {
  .autodarts-debug-panel { font-size:11px; max-height:28vh; }
  .autodarts-debug-head { gap:6px; }
}


/* v20.19.4: frei einstellbare Sprechgeschwindigkeit */
.speech-rate-control {
  display: grid;
  gap: .55rem;
}
.speech-rate-value {
  display: block;
  font-size: 1.2rem;
}
.speech-rate-control input[type="range"] {
  width: 100%;
  min-height: 2rem;
}
.speech-rate-scale {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
  opacity: .75;
}

/* v20.19.8 – Team-Spielernamen und Checkboxbreite korrigiert */
.teams-page {
    max-width: 1500px;
}
.team-overview-card {
    display: grid;
    gap: 1rem;
}
.team-toolbar,
.team-summary-row,
.team-editor-head,
.team-player-tools,
.team-editor-basics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.team-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
}
.team-compact-list {
    display: grid;
    gap: .65rem;
}
.team-compact-item {
    border: 1px solid var(--border, rgba(255,255,255,.18));
    border-radius: 1rem;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}
.team-compact-item.is-inactive {
    opacity: .72;
}
.team-summary-row {
    min-height: 68px;
    padding: .7rem .85rem;
    flex-wrap: wrap;
}
.team-summary-main,
.team-summary-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.team-summary-main {
    flex-wrap: wrap;
}
.team-summary-actions {
    margin-left: auto;
}
.team-summary-name {
    font-size: 1.15rem;
}
.team-summary-members,
.team-summary-roster {
    opacity: .85;
}
.team-summary-roster {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .2rem .65rem;
    border: 1px solid var(--border, rgba(255,255,255,.18));
    border-radius: 999px;
    font-weight: 800;
}
.team-compact-item.is-active .team-status-pill {
    background: color-mix(in srgb, var(--success, #2aa36b) 26%, transparent);
}
.team-editor {
    padding: 1rem;
    border-top: 1px solid var(--border, rgba(255,255,255,.18));
    background: rgba(0,0,0,.18);
}
.team-new-editor {
    border: 1px solid var(--active-border, #ffd900);
    border-radius: 1rem;
}
.team-editor[hidden] {
    display: none !important;
}
.team-editor-head {
    margin-bottom: .9rem;
}
.team-editor-head h3 {
    margin: 0;
}
.team-editor-basics {
    align-items: end;
    flex-wrap: wrap;
}
.team-editor-basics > label:first-child {
    flex: 1 1 360px;
}
.team-active-switch {
    flex: 0 1 360px;
    margin-bottom: .25rem;
}
.team-player-tools {
    margin: 1rem 0 .55rem;
    flex-wrap: wrap;
}
.team-player-search-label {
    flex: 1 1 320px;
}
.team-player-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .35rem;
    margin: .5rem 0 1rem;
}
.team-player-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    padding: .35rem .55rem;
    border: 1px solid var(--border-soft, rgba(255,255,255,.16));
    border-radius: .7rem;
    background: rgba(255,255,255,.04);
    cursor: pointer;
}
.team-player-row:hover {
    background: rgba(255,255,255,.08);
}
.team-player-row input[type="checkbox"] {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px;
    margin: 0;
    padding: 0;
}
.team-player-name {
    display: block;
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.team-player-row:has(input[type="checkbox"]:checked) {
    background: rgba(255, 222, 0, .12);
    border-color: rgba(255, 222, 0, .55);
}
.team-player-row[hidden] {
    display: none !important;
}
@media (max-width: 760px) {
    .team-summary-row,
    .team-summary-actions,
    .team-editor-head,
    .team-player-tools,
    .team-editor-basics {
        align-items: stretch;
    }
    .team-summary-actions {
        width: 100%;
        margin-left: 0;
    }
    .team-summary-roster {
        flex: 1;
        max-width: none;
    }
    .team-player-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .team-player-list {
        grid-template-columns: 1fr;
    }
    .team-summary-actions {
        flex-wrap: wrap;
    }
}


/* v20.19.12 Shanghai: Ziel kleiner, Punkte klar im Mittelpunkt */
.shanghai-points-box {
  width: min(82%, 230px);
  padding: .7rem .8rem;
  margin: .3rem auto .55rem;
}
.shanghai-points-box span,
.shanghai-score-block > span {
  font-size: clamp(.95rem, 1.65vw, 1.35rem);
  letter-spacing: .12em;
}
.shanghai-points-box strong {
  font-size: clamp(3.2rem, 6.2vw, 5.4rem);
  line-height: .95;
}
.shanghai-card .highscore-total {
  font-size: clamp(6rem, 13vw, 10.5rem);
  line-height: .86;
}
.shanghai-score-block {
  flex: 1 1 auto;
  min-height: 0;
}

/* v20.19.13: bessere Fernlesbarkeit der Spielerboxen */
/* Punkte in den normalen Karten deutlich größer. */
.mode-display .player-card .score,
.mode-display .highscore-card .highscore-total,
.mode-display .shanghai-card .highscore-total,
.mode-display .rtc-card .rtc-current,
.mode-display .echo-card .echo-score {
  font-size: clamp(5.2rem, 9.2vw, 11.5rem);
  line-height: .84;
}
.mode-display .players-grid[data-count="1"] .player-card .score,
.mode-display .players-grid[data-count="2"] .player-card .score {
  font-size: clamp(6.5rem, 13vw, 14rem);
}
.mode-display .players-grid[data-count="3"] .player-card .score,
.mode-display .players-grid[data-count="4"] .player-card .score {
  font-size: clamp(4.8rem, 7.8vw, 9.2rem);
}

/* Sets/Legs ungefähr doppelt so hoch und aus größerer Entfernung lesbar. */
.mode-display .match-mini,
.mode-display .player-card .match-mini,
.mode-display .highscore-card .match-mini,
.mode-display .tt-player .match-mini,
.mode-display .tau-side-player .match-mini,
.mode-display .ab-player-box .match-mini {
  min-height: 2.9rem;
  padding: .48rem .9rem;
  gap: .7rem;
  font-size: clamp(1.18rem, 1.9vw, 1.7rem);
  line-height: 1;
  border-width: 2px;
}

/* Bei Teams ist der tatsächlich aktive Werfer das wichtigste Element. */
.mode-display .player-card.active .team-inline-info.hot,
.mode-display .tt-player.active-col .team-inline-info.hot,
.mode-display .tau-side-player.active .team-inline-info.hot,
.mode-display .rtc-card.active .team-inline-info.hot {
  padding: .5rem .9rem;
  border-width: 3px;
  border-radius: .8rem;
  font-size: clamp(1.35rem, 2.25vw, 2.25rem);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: 0 0 0 3px rgba(0,0,0,.28), 0 0 18px rgba(255,213,79,.28);
}
.mode-display .player-card.active .team-inline-info.hot strong,
.mode-display .tt-player.active-col .team-inline-info.hot strong,
.mode-display .tau-side-player.active .team-inline-info.hot strong,
.mode-display .rtc-card.active .team-inline-info.hot strong {
  font-size: 1.12em;
  font-weight: 1000;
}

@media (max-width: 820px) {
  .mode-display .match-mini,
  .mode-display .player-card .match-mini {
    min-height: 2.45rem;
    padding: .36rem .65rem;
    font-size: clamp(1rem, 3.2vw, 1.35rem);
  }
  .mode-display .player-card.active .team-inline-info.hot {
    font-size: clamp(1.15rem, 4vw, 1.7rem);
  }
}


/* v20.19.14: finale Team-Spielerboxen */
.mode-display .unified-team-header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: .45rem .75rem;
}
.mode-display .unified-team-header .unified-card-title-row {
  display: block;
}
.mode-display .unified-team-header .unified-card-title-row h2 {
  font-size: clamp(1.5rem, 2.25vw, 2.35rem);
  line-height: 1.05;
  font-weight: 950;
}
.mode-display .unified-team-header .team-inline-info,
.mode-display .unified-team-header .team-inline-info.hot,
.mode-display .player-card.active .unified-team-header .team-inline-info.hot {
  display: block;
  width: fit-content;
  margin-top: .38rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent, #ffd54f);
  font-size: clamp(1.15rem, 1.75vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}
.mode-display .unified-team-header .team-inline-info strong,
.mode-display .player-card.active .unified-team-header .team-inline-info.hot strong {
  font-size: 1em;
  font-weight: 900;
}
.mode-display .unified-team-header .team-card-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .38rem;
}
.mode-display .unified-team-header .match-mini {
  min-height: 0;
  padding: .28rem .5rem;
  gap: .42rem;
  font-size: clamp(1rem, 1.55vw, 1.45rem);
  line-height: 1;
  border-width: 1px;
}
.mode-display .unified-team-header .card-status-stack,
.mode-display .unified-team-header .active-badge {
  display: none !important;
}
.mode-display .unified-team-header .header-dart-status,
.mode-display .unified-team-header .shanghai-dart-status {
  display: flex;
  justify-content: flex-end;
  gap: .18rem;
}
.mode-display .unified-team-header .shanghai-dart-icon:nth-child(n+4) {
  display: none !important;
}
/* Fünf und mehr Karten: Kopf und Punkte proportional verkleinern. */
.mode-display .players-grid[data-count="5"] .unified-team-header .unified-card-title-row h2,
.mode-display .players-grid[data-count="6"] .unified-team-header .unified-card-title-row h2,
.mode-display .players-grid[data-count="7"] .unified-team-header .unified-card-title-row h2,
.mode-display .players-grid[data-count="8"] .unified-team-header .unified-card-title-row h2 {
  font-size: clamp(1.12rem, 1.55vw, 1.55rem);
}
.mode-display .players-grid[data-count="5"] .unified-team-header .team-inline-info,
.mode-display .players-grid[data-count="6"] .unified-team-header .team-inline-info,
.mode-display .players-grid[data-count="7"] .unified-team-header .team-inline-info,
.mode-display .players-grid[data-count="8"] .unified-team-header .team-inline-info {
  font-size: clamp(.95rem, 1.25vw, 1.25rem);
}
.mode-display .players-grid[data-count="5"] .unified-team-header .match-mini,
.mode-display .players-grid[data-count="6"] .unified-team-header .match-mini,
.mode-display .players-grid[data-count="7"] .unified-team-header .match-mini,
.mode-display .players-grid[data-count="8"] .unified-team-header .match-mini {
  padding: .2rem .38rem;
  font-size: clamp(.82rem, 1.05vw, 1.05rem);
}
.mode-display .players-grid[data-count="5"] .player-card .score,
.mode-display .players-grid[data-count="6"] .player-card .score,
.mode-display .players-grid[data-count="7"] .player-card .score,
.mode-display .players-grid[data-count="8"] .player-card .score {
  font-size: clamp(3.8rem, 6.4vw, 7.2rem);
}
@media (max-width: 820px) {
  .mode-display .unified-team-header .unified-card-title-row h2 {
    font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  }
  .mode-display .unified-team-header .team-inline-info,
  .mode-display .player-card.active .unified-team-header .team-inline-info.hot {
    font-size: clamp(1rem, 3.8vw, 1.35rem);
  }
}

/* v20.19.17: Admin-Anmeldung als Popup auf der aktuellen Seite */
.admin-modal-backdrop[hidden] { display: none !important; }
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 8, 20, .78);
  backdrop-filter: blur(5px);
}
.admin-modal {
  width: min(31rem, 100%);
  position: relative;
  padding: 1.35rem;
  border: 1px solid rgba(255, 230, 0, .45);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(28, 38, 68, .99), rgba(12, 18, 38, .99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.admin-modal h2 { margin: 0 2.5rem .55rem 0; }
.admin-modal-form { display: grid; gap: .75rem; margin-top: 1rem; }
.admin-modal-form label { font-weight: 900; }
.admin-modal-form input {
  width: 100%;
  margin-top: .35rem;
  font-size: 1.25rem;
  letter-spacing: .15em;
}
.admin-modal-close {
  position: absolute;
  top: .65rem;
  right: .75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: inherit;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.admin-modal-error {
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid rgba(255,95,86,.45);
  border-radius: 12px;
  background: rgba(255,95,86,.16);
  color: #ffd7d4;
  font-weight: 900;
}
body.admin-modal-open { overflow: hidden; }


/* v20.19.18: Adminstatus dauerhaft in der Kopfzeile */
.topbar .admin-header-control {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
  border-color: rgba(255,255,255,.28);
  background: rgba(8, 15, 30, .52);
}
.topbar .admin-header-control.is-active {
  border-color: rgba(52, 211, 153, .78);
  background: rgba(5, 150, 105, .22);
  color: #d1fae5;
}
@media (max-width: 760px) {
  .topbar .admin-header-control {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    font-size: .84rem;
    padding: 9px 12px;
  }
}

/* v20.19.18: Leg, Satz und Spielsieg auf einen Blick unterscheidbar */
.celebration-overlay.leg {
  background: radial-gradient(circle at 50% 45%, rgba(34,197,94,.24), transparent 34%), rgba(0,0,0,.64);
}
.celebration-overlay.leg .celebration-card {
  width: min(650px, 90vw);
  padding: clamp(20px, 3vw, 36px);
  border-width: 4px;
  border-color: #4ade80;
  border-radius: 26px;
  box-shadow: 0 0 0 6px rgba(74,222,128,.12), 0 0 34px rgba(34,197,94,.46), 0 20px 65px rgba(0,0,0,.68);
  background: linear-gradient(145deg, rgba(14,55,38,.97), rgba(5,20,17,.99));
}
.celebration-overlay.leg .celebration-kicker {
  font-size: clamp(2rem, 5.3vw, 4.7rem);
  color: #86efac;
  text-shadow: 0 0 13px rgba(74,222,128,.72), 0 4px 0 rgba(0,0,0,.52);
}
.celebration-overlay.leg .celebration-name { font-size: clamp(1.8rem, 4.2vw, 3.8rem); }
.celebration-overlay.leg .celebration-confetti { font-size: clamp(1.25rem, 3vw, 2.25rem); }

.celebration-overlay.set {
  background: radial-gradient(circle at 50% 44%, rgba(96,165,250,.30), transparent 36%), radial-gradient(circle at 20% 25%, rgba(168,85,247,.18), transparent 28%), rgba(0,0,0,.70);
}
.celebration-overlay.set .celebration-card {
  width: min(800px, 93vw);
  padding: clamp(28px, 4vw, 50px);
  border-color: #60a5fa;
  border-width: 6px;
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(30,41,90,.98), rgba(13,16,38,.99));
  box-shadow: 0 0 0 9px rgba(168,85,247,.14), 0 0 54px rgba(96,165,250,.62), 0 26px 90px rgba(0,0,0,.78);
}
.celebration-overlay.set .celebration-kicker {
  font-size: clamp(2.6rem, 7.3vw, 6.8rem);
  color: #bfdbfe;
  text-shadow: 0 0 15px rgba(96,165,250,.9), 0 0 30px rgba(168,85,247,.52), 0 5px 0 rgba(0,0,0,.55);
}
.celebration-overlay.set .celebration-name { font-size: clamp(2.2rem, 5.4vw, 5.2rem); }
.celebration-overlay.set .celebration-confetti { font-size: clamp(1.8rem, 4vw, 3.3rem); }

.celebration-overlay.game {
  background: radial-gradient(circle at 50% 42%, rgba(255,241,0,.38), transparent 38%), radial-gradient(circle at 16% 22%, rgba(0,210,255,.22), transparent 28%), radial-gradient(circle at 84% 76%, rgba(255,60,180,.22), transparent 28%), rgba(0,0,0,.78);
}
.celebration-overlay.game .celebration-card {
  width: min(1080px, 96vw);
  min-height: min(650px, 82vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-width: 8px;
  border-radius: 48px;
  background: linear-gradient(145deg, rgba(45,37,5,.98), rgba(10,10,18,.99));
}
.celebration-overlay.game .celebration-name {
  font-size: clamp(3.2rem, 9vw, 9rem);
  color: #fff7a3;
  text-shadow: 0 0 18px rgba(255,241,0,.82), 0 6px 0 rgba(0,0,0,.58);
}
.celebration-overlay.game .celebration-confetti { font-size: clamp(2.5rem, 6vw, 5rem); }


/* v20.19.25: iOS/iPadOS verlangt für die erste SpeechSynthesis-Ausgabe eines
   neu geladenen game.php-Dokuments eine echte Benutzeraktion. */
.speech-activation-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: .48rem .9rem;
  font: inherit;
  font-weight: 700;
  background: rgba(7, 20, 35, .88);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.speech-activation-button[hidden] { display: none !important; }
.speech-activation-button.visible { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 700px) {
  .speech-activation-button {
    position: static;
    transform: none;
    margin: .45rem auto 0;
  }
}

/* v20.19.26: Tactics – mehr Platz fuer Spielernamen.
   Der Name bekommt eine eigene Zeile; Set/Leg und die drei Darts stehen darunter. */
.game-type-tactics .tt-player .tt-head-top {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "name name name"
    "left . right" !important;
  align-items: center !important;
  gap: 3px 6px !important;
  height: 100% !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}
.game-type-tactics .tt-player .tt-name {
  grid-area: name !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 2px !important;
  font-size: clamp(1.45rem, 2.35vw, 3rem) !important;
  line-height: 1.05 !important;
}
.game-type-tactics .tt-player .tt-head-left {
  grid-area: left !important;
  align-self: end !important;
}
.game-type-tactics .tt-player .tt-head-right {
  grid-area: right !important;
  align-self: end !important;
  justify-self: end !important;
}
.game-type-tactics .tactics-real-table thead tr:first-child {
  height: clamp(66px, 9vh, 96px) !important;
}
/* Auch bei langen Varianten bleibt der Kopf lesbar; die Zielzeilen werden dafuer kompakter. */
.game-type-tactics .tactics-layout.tactics-medium .tactics-real-table thead tr:first-child,
.game-type-tactics .tactics-layout.tactics-many .tactics-real-table thead tr:first-child {
  height: clamp(60px, 8vh, 82px) !important;
}
.game-type-tactics .tactics-layout.tactics-medium .tt-cell,
.game-type-tactics .tactics-layout.tactics-many .tt-cell {
  height: auto !important;
}
@media (max-width: 900px) {
  .game-type-tactics .tt-player .tt-name {
    font-size: clamp(1.15rem, 2.1vw, 1.75rem) !important;
  }
  .game-type-tactics .tt-player .tt-head-top {
    padding: 3px 4px !important;
    gap: 2px 4px !important;
  }
}

/* v20.19.27: schneller Korrekturmodus nur in der grossen Anzeige */
.correction-open { overflow: hidden; }
.correction-open .game-layout { filter: blur(1px); }
.correction-open .game-topbar { filter: blur(1px); }
.correction-open-button {
  background: rgba(255, 209, 102, .16);
  border-color: rgba(255, 209, 102, .55);
  color: #ffe3a0;
  font-weight: 900;
}
.correction-modal[hidden] { display: none !important; }
.correction-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 8, 14, .88);
  backdrop-filter: blur(6px);
}
.correction-dialog {
  width: min(1180px, 97vw);
  max-height: 96vh;
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 2px solid rgba(255, 209, 102, .5);
  background: linear-gradient(180deg, rgba(24,32,46,.99), rgba(10,15,24,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
}
.correction-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}
.correction-header h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
}
.correction-header p {
  margin: 8px 0 0;
  color: #d9e5f4;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 800;
}
.correction-close-x { min-width: 64px; min-height: 56px; font-size: 1.5rem; }
.correction-darts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.correction-turn-group {
  min-width: 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.025);
}
.correction-turn-current {
  border-color: rgba(121,184,255,.34);
  background: rgba(121,184,255,.055);
}
.correction-turn-label {
  margin: 0 2px 8px;
  color: #d9e5f4;
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  font-weight: 900;
}
.correction-turn-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.correction-dart-card {
  min-height: 108px;
  padding: 10px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.correction-dart-card strong { font-size: clamp(1.7rem, 3vw, 2.8rem); color: #ffd166; }
.correction-dart-card small { color: #9fb1c8; font-weight: 800; }
.correction-dart-player { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.correction-dart-card.selected {
  border-color: #ffd166;
  background: rgba(255,209,102,.16);
  box-shadow: 0 0 0 3px rgba(255,209,102,.1);
}
.correction-dart-card.correction-empty-slot {
  border-style: dashed;
  border-color: rgba(121,184,255,.55);
  background: rgba(121,184,255,.08);
}
.correction-dart-card.correction-empty-slot strong {
  color: #79d6ff;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: .9;
}
.correction-dart-card.correction-empty-slot:not(.disabled-slot):hover {
  background: rgba(121,184,255,.16);
}
.correction-dart-card.disabled-slot {
  opacity: .42;
  border-style: solid;
  border-color: rgba(255,255,255,.08);
  cursor: default;
}
.correction-tools { display: grid; gap: 12px; }
.correction-history-actions,
.correction-multiplier-row,
.correction-special-grid {
  display: grid;
  gap: 10px;
}
.correction-history-actions { grid-template-columns: repeat(3, 1fr); }
.correction-add-button.active { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.24) inset; background: rgba(255,209,102,.14); }
.correction-multiplier-row { grid-template-columns: repeat(3, 1fr); }
.correction-special-grid { grid-template-columns: repeat(3, 1fr); }
.correction-multiplier,
.correction-dart-button {
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 900;
}
.correction-multiplier.selected {
  border-color: #79b8ff;
  background: rgba(121,184,255,.2);
}
.correction-number-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.correction-number-grid .correction-dart-button { min-height: 62px; font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
.correction-special-grid .miss { border-color: rgba(255,107,107,.55); background: rgba(255,107,107,.12); }
.correction-message {
  min-height: 28px;
  margin: 14px 0 4px;
  text-align: center;
  color: #b9c8db;
  font-weight: 800;
}
.correction-message.error { color: #ff8d8d; }
.correction-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.correction-footer .button { min-width: 220px; }

@media (max-width: 900px) {
  .correction-modal { padding: 8px; }
  .correction-dialog { width: 99vw; max-height: 98vh; padding: 14px; border-radius: 16px; }
  .correction-darts { grid-template-columns: 1fr; }
  .correction-turn-group { padding: 8px; }
  .correction-turn-slots { grid-template-columns: repeat(3, 1fr); }
  .correction-number-grid { grid-template-columns: repeat(5, 1fr); }
  .correction-dart-card { min-height: 88px; }
  .correction-dart-button, .correction-multiplier { min-height: 54px; }
}


/* v20.19.28-Test: kleine Performance-Anzeige für den Praxistest. */
.perf-debug-panel {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 25000;
  min-width: 230px;
  max-width: min(360px, calc(100vw - 20px));
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(8, 12, 18, .90);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  color: #f5f7fb;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: auto;
}
.perf-debug-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:3px; }
.perf-debug-title { font-weight: 800; margin-bottom: 2px; }
.perf-debug-reset { border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.09); color:inherit; border-radius:7px; padding:2px 7px; font:inherit; cursor:pointer; }
.perf-debug-stats { margin-top:4px; display:grid; gap:1px; }
.perf-debug-row { display:flex; justify-content:space-between; gap:12px; white-space:nowrap; }
.perf-debug-row span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.perf-debug-row.slow { font-weight:800; }
.perf-debug-row.very-slow { font-weight:900; font-size:13px; }
#perfDebugCurrent.slow { font-weight: 800; }
#perfDebugCurrent.very-slow { font-size: 14px; font-weight: 900; }
@media (max-width: 700px) {
  .perf-debug-panel { min-width: 190px; font-size: 11px; }
}

/* v20.19.32-Test: Bei Zielspielen bleibt das komplette Dartboard 1-20 bedienbar.
   Spielrelevante Ziele werden nur optisch hervorgehoben; alle anderen Treffer
   bleiben für eine vollständige Statistik weiterhin eingebbar. */
.touch-panel .dart-button.is-game-target {
  outline: 2px solid rgba(113, 211, 255, .92);
  outline-offset: -2px;
  background: rgba(61, 145, 196, .30);
}
.touch-panel .dart-button.is-non-target {
  opacity: .72;
}
.touch-panel .dart-button.is-non-target:hover,
.touch-panel .dart-button.is-non-target:focus-visible {
  opacity: 1;
}

/* v20.19.33-Test: Feinschliff Eingabe/Board nach Praxistest. */
/* Tactics: komplette 1-20-Eingabe behalten, aber die Zahlentasten niedriger,
   damit das Feld auf Tablet/Monitor weniger hoch wirkt. */
.game-type-tactics .number-grid {
  grid-auto-rows: 48px !important;
}
.game-type-tactics .number-grid .dart-button {
  min-height: 48px !important;
  max-height: 48px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Abräumen: Board in Kombi/Eingabe etwas kleiner lassen, damit mehr Luft
   zum Eingabefeld und zu den Spielerboxen bleibt. */
.game-type-abraeumen:not(.mode-display) .abraeumen-dartboard {
  width: min(94%, 94vh) !important;
  height: min(94%, 94vh) !important;
}

/* Standard-Dartboard: 20 ist dunkel/schwarz, 1 hell/beige.
   Double/Triple waren bereits korrekt; nur die Single-Sektoren waren vertauscht. */
.ab-board-sector.ring-s1,
.ab-board-sector.ring-s3 {
  fill: #111516;
}
.ab-board-sector.ring-s1.odd,
.ab-board-sector.ring-s3.odd {
  fill: #f1e6c8;
}

/* v20.19.34-Test: Tactics-Sondertasten direkt unter die Zahlen ziehen.
   Seit den niedrigeren 1-20-Tasten soll die freie Resthoehe nicht mehr
   zwischen Zahlenblock und Bull/Miss verteilt werden. */
.game-type-tactics .touch-panel {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
}
.game-type-tactics .special-grid {
  align-self: start !important;
  margin-top: 0 !important;
}


/* v20.19.38-Test: Abgeräumte Segmente müssen auch auf den dunklen
   Single-Feldern eindeutig die Spielerfarbe erhalten. Die höhere
   Spezifität verhindert, dass die Grundfarbe des Boards darüberliegt. */
.game-type-abraeumen .ab-board-sector.cleared.player-0 { fill: #00c8ff; }
.game-type-abraeumen .ab-board-sector.cleared.player-1 { fill: #b56cff; }
.game-type-abraeumen .ab-board-sector.cleared.player-2 { fill: #ff9d2e; }
.game-type-abraeumen .ab-board-sector.cleared.player-3 { fill: #ff4fd2; }


/* v20.19.39-Test: Beim Abräumen zeigt nur der Spielername dauerhaft
   dieselbe Farbe wie seine abgeräumten Board-Segmente. Der Rahmen bleibt
   ausschließlich für die Markierung des aktiven Spielers reserviert. */
.game-type-abraeumen .ab-player-name.player-0 { color: #00c8ff; }
.game-type-abraeumen .ab-player-name.player-1 { color: #b56cff; }
.game-type-abraeumen .ab-player-name.player-2 { color: #ff9d2e; }
.game-type-abraeumen .ab-player-name.player-3 { color: #ff4fd2; }
.game-type-abraeumen .ab-player-name.player-4 { color: #62d98b; }
.game-type-abraeumen .ab-player-name.player-5 { color: #ffd54f; }
.game-type-abraeumen .ab-player-name.player-6 { color: #ff6b6b; }
.game-type-abraeumen .ab-player-name.player-7 { color: #7ca8ff; }


/* v20.19.40-Test: Abräumen-Feinschliff nach Praxistest.
   Das Board ist in allen Spielansichten etwas kleiner. Bereits abgeräumte
   Ziele verlieren ihre Hervorhebung im vollständigen Eingabefeld, bleiben
   für Statistik/Korrektur aber weiterhin anklickbar. */
.game-type-abraeumen .abraeumen-dartboard {
  width: min(86%, 88vh) !important;
  height: min(86%, 88vh) !important;
}


/* v20.19.41-Test: Abräumen weiter entzerren.
   Board in allen Ansichten etwas kleiner; untere Spielerboxen etwas höher. */
.game-type-abraeumen .abraeumen-dartboard {
  width: min(80%, 82vh) !important;
  height: min(80%, 82vh) !important;
}
.game-type-abraeumen .ab-zone-bottom-left,
.game-type-abraeumen .ab-zone-bottom-right {
  bottom: 28px !important;
}

/* v20.19.42-Test: Abräumen Feinschliff.
   In der reinen Eingabeansicht ist das Board rund 30% kleiner als zuvor.
   In der Anzeigeansicht sitzen die unteren Spielerboxen etwas höher. */
.mode-input.game-type-abraeumen .abraeumen-dartboard {
  width: min(56%, 58vh) !important;
  height: min(56%, 58vh) !important;
}
.mode-display.game-type-abraeumen .ab-zone-bottom-left,
.mode-display.game-type-abraeumen .ab-zone-bottom-right {
  bottom: 52px !important;
}

/* v20.19.43-Test: Abräumen Anzeigeansicht weiter nach oben entzerren.
   Eingabeansicht bleibt unverändert. */
.mode-display.game-type-abraeumen .abraeumen-board-stage {
  transform: translateY(-34px);
}
.mode-display.game-type-abraeumen .ab-zone-bottom-left,
.mode-display.game-type-abraeumen .ab-zone-bottom-right {
  bottom: 88px !important;
}

/* v20.19.44-Test: Browser hat automatische Vollbild-Wiederherstellung blockiert. */
.fullscreen-restore-pending { outline: 2px solid rgba(255, 214, 64, .9); box-shadow: 0 0 0 3px rgba(255, 214, 64, .18); }

/* v20.19.50 Diagnose speichern/download */
.perf-debug-actions{display:flex;gap:4px;align-items:center}.perf-debug-save-status{margin-top:4px;font-size:.72rem;line-height:1.2;max-width:330px;white-space:normal;overflow-wrap:anywhere;color:#bfe9ff}.perf-debug-actions .perf-debug-reset{white-space:nowrap}

.handicap-inline{display:block;font-size:.58em;line-height:1.05;color:var(--muted);font-weight:800;margin-top:2px;}

.speech-template-wrap{min-width:0}
.speech-variable-palette{margin-top:22px;padding:18px;border:1px solid rgba(126,211,255,.28);border-radius:16px;background:rgba(7,25,43,.55)}
.speech-variable-palette h3{margin:0 0 6px;color:#8edcff}
.speech-variable-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.speech-variable-btn{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(126,211,255,.2);background:rgba(255,255,255,.045);color:inherit;cursor:pointer}
.speech-variable-btn:hover,.speech-variable-btn:focus-visible{border-color:#78d5ff;background:rgba(89,190,242,.12)}
.speech-variable-btn code{flex:0 0 auto;color:#8edcff;font-weight:900;font-size:.92rem}
.speech-variable-btn span{font-size:.82rem;line-height:1.3;color:rgba(235,244,252,.78)}
.speech-variable-hint{margin:12px 0 0;font-weight:700}
@media(max-width:760px){.speech-variable-grid{grid-template-columns:1fr}}
.language-select-wrap {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .65rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    white-space: nowrap;
}

.language-select {
    appearance: auto;
    min-width: 105px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.language-select option { color: #111; background: #fff; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.speech-voice-picker { margin: 1.25rem 0; padding: 1rem; border: 1px solid rgba(126,211,255,.28); border-radius: 16px; background: rgba(7,25,43,.55); }
.speech-voice-picker h3 { margin: 0 0 .3rem; }
.speech-voice-grid { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: .75rem; align-items: end; margin-top: 1rem; }
.speech-voice-grid label { min-width: 0; }
.speech-voice-grid select { width: 100%; margin-top: .35rem; }
.speech-language-voice[hidden] { display: none !important; }
@media(max-width:760px) { .speech-voice-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
    .topbar .language-select-wrap {
        margin-left: 0;
        margin-top: .5rem;
    }
}

/* v20.20.10: Bildschirmflaeche und Fernlesbarkeit der Spielkarten optimiert. */
@media (min-width: 1180px) and (min-height: 760px) {
  /* RTC hatte immer zwei Kartenzeilen reserviert. Fuer 1-4 Spieler auf einer
     breiten Anzeige gibt es jetzt genau eine Kartenzeile unter der Zielkette. */
  .game-type-roundclock .roundclock-grid[data-count="1"],
  .game-type-roundclock .roundclock-grid[data-count="2"],
  .game-type-roundclock .roundclock-grid[data-count="3"],
  .game-type-roundclock .roundclock-grid[data-count="4"] {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .game-type-roundclock .roundclock-grid[data-count="1"] .rtc-card,
  .game-type-roundclock .roundclock-grid[data-count="2"] .rtc-card,
  .game-type-roundclock .roundclock-grid[data-count="3"] .rtc-card,
  .game-type-roundclock .roundclock-grid[data-count="4"] .rtc-card {
    grid-row: 2;
    height: 100% !important;
  }

  .game-type-roundclock .roundclock-grid[data-count="1"] .rtc-next-target strong,
  .game-type-roundclock .roundclock-grid[data-count="2"] .rtc-next-target strong {
    font-size: clamp(9rem, 19vh, 15rem) !important;
  }

  .game-type-roundclock .roundclock-grid[data-count="3"] .rtc-next-target strong,
  .game-type-roundclock .roundclock-grid[data-count="4"] .rtc-next-target strong {
    font-size: clamp(7rem, 13vh, 11rem) !important;
  }

  .game-type-roundclock .roundclock-grid[data-count="1"] .rtc-next-target span,
  .game-type-roundclock .roundclock-grid[data-count="2"] .rtc-next-target span,
  .game-type-roundclock .roundclock-grid[data-count="3"] .rtc-next-target span,
  .game-type-roundclock .roundclock-grid[data-count="4"] .rtc-next-target span {
    font-size: clamp(1rem, 1.35vw, 1.35rem);
  }

  .game-type-roundclock .rtc-progress {
    height: clamp(.7rem, 1.1vh, 1rem);
  }

  /* Die klassischen Kartenansichten fuellen bei einer einzigen Spielerzeile
     die restliche Bildschirmhoehe aus. Tabellen-/Boardspiele sind ausgenommen. */
  .game-body:not(.game-type-roundclock):not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="1"],
  .game-body:not(.game-type-roundclock):not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="2"],
  .game-body:not(.game-type-roundclock):not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="3"],
  .game-body:not(.game-type-roundclock):not(.game-type-tactics):not(.game-type-tauziehen):not(.game-type-abraeumen):not(.game-type-heatmap)
  .players-grid[data-count="4"] {
    min-height: min(720px, calc(100dvh - 285px));
    grid-auto-rows: minmax(0, 1fr);
  }

  .players-grid[data-count="1"] .unified-card-title-row h2,
  .players-grid[data-count="2"] .unified-card-title-row h2,
  .players-grid[data-count="3"] .unified-card-title-row h2,
  .players-grid[data-count="4"] .unified-card-title-row h2 {
    font-size: clamp(1.9rem, 2.35vw, 3rem);
    line-height: 1.04;
  }
}

/* Shanghai: Ziel bleibt dominant, der eigentliche Punktestand ist nun aber
   deutlich groesser und aus Monitorentfernung klar lesbar. */
.game-type-shanghai .shanghai-score-block .highscore-total {
  font-size: clamp(4.8rem, 7.2vw, 7.8rem) !important;
  line-height: .84 !important;
}
.game-type-shanghai .shanghai-score-block > span {
  font-size: clamp(.9rem, 1.25vw, 1.2rem) !important;
}
@media (min-width: 1180px) {
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-score-block .highscore-total {
    font-size: clamp(4.2rem, 5.8vw, 6.8rem) !important;
  }
}
@media (min-width: 881px) {
  .game-type-shanghai .shanghai-grid[data-count="5"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="6"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="7"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="8"] .shanghai-score-block .highscore-total {
    font-size: clamp(3.4rem, 4.8vw, 5.8rem) !important;
  }
}

/* v20.20.11: Trefferfelder und Shanghai-Inhalte auf grossen Karten besser lesbar. */
@media (min-width: 881px) {
  /* Drei Darts nutzen die komplette verfuegbare Breite statt kleiner Pillen. */
  .game-type-roundclock .roundclock-grid[data-count="1"] .highscore-darts-row,
  .game-type-roundclock .roundclock-grid[data-count="2"] .highscore-darts-row,
  .game-type-roundclock .roundclock-grid[data-count="3"] .highscore-darts-row,
  .game-type-roundclock .roundclock-grid[data-count="4"] .highscore-darts-row,
  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-darts-row,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-darts-row,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-darts-row,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-darts-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.45rem, .65vw, .7rem);
    width: 100%;
  }

  .game-type-roundclock .roundclock-grid[data-count="1"] .highscore-dart-pill,
  .game-type-roundclock .roundclock-grid[data-count="2"] .highscore-dart-pill,
  .game-type-roundclock .roundclock-grid[data-count="3"] .highscore-dart-pill,
  .game-type-roundclock .roundclock-grid[data-count="4"] .highscore-dart-pill,
  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-dart-pill,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-dart-pill,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-dart-pill,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-dart-pill {
    width: 100%;
    min-width: 0 !important;
    min-height: clamp(3rem, 5vh, 3.8rem);
    padding: .55rem .35rem !important;
    border-width: 2px;
    border-radius: 13px;
    font-size: clamp(1.05rem, 1.25vw, 1.4rem) !important;
  }

  .game-type-roundclock .roundclock-grid[data-count="1"] .highscore-throw-line,
  .game-type-roundclock .roundclock-grid[data-count="2"] .highscore-throw-line,
  .game-type-roundclock .roundclock-grid[data-count="3"] .highscore-throw-line,
  .game-type-roundclock .roundclock-grid[data-count="4"] .highscore-throw-line,
  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-throw-line,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-throw-line,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-throw-line,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-throw-line {
    min-height: 4.5rem;
    padding: clamp(.55rem, .75vw, .8rem) !important;
    gap: clamp(.5rem, .7vw, .75rem) !important;
  }

  /* Shanghai: Zielbox, S/D/T-Treffer und Wurfsumme fuellen die Kartenbreite. */
  .game-type-shanghai .shanghai-grid[data-count="1"] .shanghai-points-box,
  .game-type-shanghai .shanghai-grid[data-count="2"] .shanghai-points-box,
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-points-box,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-points-box {
    width: min(94%, 300px) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="2"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-score-block .highscore-total,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-score-block .highscore-total {
    font-size: clamp(6.2rem, 7.8vw, 9.2rem) !important;
    line-height: .78 !important;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .shanghai-marks,
  .game-type-shanghai .shanghai-grid[data-count="2"] .shanghai-marks,
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-marks,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-marks {
    gap: .42rem;
    margin: .35rem 0 .45rem;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .shanghai-mark,
  .game-type-shanghai .shanghai-grid[data-count="2"] .shanghai-mark,
  .game-type-shanghai .shanghai-grid[data-count="3"] .shanghai-mark,
  .game-type-shanghai .shanghai-grid[data-count="4"] .shanghai-mark {
    min-width: 2.35rem;
    min-height: 2.35rem;
    font-size: 1rem;
    border-width: 2px;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-turn-points,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-turn-points,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-turn-points,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-turn-points {
    min-width: clamp(5rem, 5.6vw, 6.5rem) !important;
    padding: .45rem .65rem !important;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-turn-points span,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-turn-points span,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-turn-points span,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-turn-points span {
    font-size: .72rem !important;
  }

  .game-type-shanghai .shanghai-grid[data-count="1"] .highscore-turn-points strong,
  .game-type-shanghai .shanghai-grid[data-count="2"] .highscore-turn-points strong,
  .game-type-shanghai .shanghai-grid[data-count="3"] .highscore-turn-points strong,
  .game-type-shanghai .shanghai-grid[data-count="4"] .highscore-turn-points strong {
    font-size: clamp(1.35rem, 1.7vw, 1.8rem) !important;
  }
}