/* ============================================================
   DARTVINCI SCORER - STYLES
   ============================================================ */

:root {
    /* DartVinci-Farben (konsistent mit /assets/css/style.css) */
    --sc-primary:     #1a1a2e;
    --sc-accent:      #e94560;
    --sc-accent-soft: rgba(233, 69, 96, 0.15);
    --sc-accent-glow: 0 0 24px rgba(233, 69, 96, 0.45);
    --sc-success:     #00b894;
    --sc-warning:     #fdcb6e;
    --sc-danger:      #d63031;
    --sc-bg:          #0f3460;
    --sc-bg-light:    #162447;
    --sc-bg-card:     #1a1a2e;
    --sc-bg-dark:     #0a0f1d;
    --sc-text:        #f5f5f5;
    --sc-text-muted:  #a0a0b8;
    --sc-border:      #2a2a4a;
    --sc-shadow:      rgba(0, 0, 0, 0.4);

    --sc-radius:      12px;
    --sc-radius-sm:   8px;
    --sc-transition:  0.25s ease;

    --sc-score-font:  'Orbitron', 'Segoe UI', sans-serif;
    --sc-body-font:   'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Schriftarten (lokal einbinden falls nicht bereits in style.css) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

* { box-sizing: border-box; }

html, body.scorer-body {
    margin: 0; padding: 0;
    font-family: var(--sc-body-font);
    background: var(--sc-bg-dark);
    color: var(--sc-text);
    min-height: 100vh;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body.scorer-body {
    padding-top: 56px; /* Header-Hoehe */
}

/* ============================================================ */
/* HEADER                                                       */
/* ============================================================ */
.scorer-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--sc-primary);
    border-bottom: 2px solid var(--sc-accent);
    display: flex; align-items: center;
    padding: 0 12px;
    z-index: 100;
    box-shadow: 0 2px 10px var(--sc-shadow);
}
.scorer-menu-btn {
    background: transparent; border: 0; cursor: pointer;
    width: 40px; height: 40px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.scorer-menu-btn span {
    display: block; width: 22px; height: 3px;
    background: var(--sc-text); border-radius: 2px;
    transition: var(--sc-transition);
}
.scorer-title-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-left: 8px;
    min-width: 0;
}
.scorer-title {
    font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.5px;
}
/* Board-UniqID mittig sichtbar - User kann sie ohne Menue-Aufruf
   am TV-Bildschirm via /scorer/z.php eintragen. */
.scorer-board-badge {
    display: none; /* Wird per JS sichtbar geschaltet wenn UniqID da ist */
    font-family: ui-monospace, monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #c4b5fd;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.scorer-board-badge.visible { display: inline-block; }
/* Offline-Wurf-Queue Badge - amber/orange wenn Wuerfe gepuffert sind. */
.scorer-offline-badge {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #0a0a1a;
    background: #f59e0b;
    border: 1px solid #d97706;
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
    margin-left: 6px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.scorer-header-actions { display: flex; gap: 4px; }
.scorer-icon-btn {
    background: transparent; border: 0; color: var(--sc-text);
    width: 40px; height: 40px; cursor: pointer;
    font-size: 1.3rem; border-radius: var(--sc-radius-sm);
}
.scorer-icon-btn:hover { background: rgba(255,255,255,0.05); }

/* ============================================================ */
/* SIDE MENU                                                    */
/* ============================================================ */
.scorer-side-menu {
    position: fixed;
    top: 0; left: -280px;
    width: 280px; height: 100%;
    background: var(--sc-primary);
    border-right: 1px solid var(--sc-border);
    z-index: 200;
    transition: transform var(--sc-transition);
    overflow-y: auto;
    padding-top: 12px;
}
.scorer-side-menu.open { transform: translateX(280px); }
.scorer-menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 150; opacity: 0; pointer-events: none;
    transition: opacity var(--sc-transition);
}
.scorer-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.scorer-user-info {
    padding: 16px; border-bottom: 1px solid var(--sc-border);
}
.sm-name { font-size: 1.05rem; font-weight: 700; }
.sm-role { font-size: 0.8rem; color: var(--sc-text-muted); }
.sm-login { color: var(--sc-accent); text-decoration: none; }
.scorer-side-menu ul { list-style: none; padding: 8px 0; margin: 0; }
.scorer-side-menu li a {
    display: block; padding: 14px 20px; color: var(--sc-text);
    text-decoration: none; font-size: 0.95rem;
    transition: var(--sc-transition);
}
.scorer-side-menu li a:hover { background: var(--sc-accent-soft); color: var(--sc-accent); }
.sm-separator { height: 1px; background: var(--sc-border); margin: 8px 0; }

/* ============================================================ */
/* MAIN / VIEWS                                                 */
/* ============================================================ */
.scorer-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 12px 80px;
}
/* Game-View nutzt mehr Breite fuer das Zwei-Spalten-Layout */
body.scorer-body[data-view="game"] .scorer-main {
    max-width: 1400px;
    padding: 12px;
}
.scorer-view.hidden { display: none; }

.hidden { display: none !important; }

/* ============================================================ */
/* HOME (grosse Buttons wie im Screenshot)                      */
/* ============================================================ */
.scorer-home {
    display: flex; flex-direction: column; gap: 10px;
}
.sh-card {
    display: flex; align-items: center;
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 18px 20px;
    color: var(--sc-text);
    cursor: pointer;
    transition: var(--sc-transition);
    box-shadow: 0 4px 12px var(--sc-shadow);
    text-align: left;
    width: 100%;
    font-family: var(--sc-body-font);
}
.sh-card:hover {
    border-color: var(--sc-accent);
    box-shadow: 0 4px 20px rgba(233,69,96,0.25);
    transform: translateY(-1px);
}
.sh-icon {
    font-size: 1.8rem; width: 48px; flex-shrink: 0;
    color: var(--sc-accent);
}
.sh-content { flex: 1; }
.sh-label { font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; }
.sh-sub { font-size: 0.8rem; color: var(--sc-text-muted); margin-top: 2px; }
.sh-resume { border-color: var(--sc-success); }
.sh-resume .sh-icon { color: var(--sc-success); }
.sh-quick { border-color: var(--sc-accent); background: linear-gradient(135deg, var(--sc-bg-card), var(--sc-bg-light)); }
.sh-footer {
    margin-top: 20px; padding: 12px;
    text-align: center; color: var(--sc-text-muted);
    font-size: 0.9rem; border-top: 1px solid var(--sc-border);
}

/* ============================================================ */
/* SETUP / TRAINING / SETTINGS (gemeinsame Formular-Styles)     */
/* ============================================================ */
.scorer-setup, .scorer-settings, .scorer-stats, .scorer-players {
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 20px;
    box-shadow: 0 4px 15px var(--sc-shadow);
}
.sv-title {
    margin: 0 0 16px;
    font-size: 1.3rem; font-weight: 700;
    color: var(--sc-text);
    border-bottom: 1px solid var(--sc-border);
    padding-bottom: 8px;
}
.sv-section { margin-bottom: 18px; }
.sv-section.sv-two {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sv-label {
    display: block; margin-bottom: 6px;
    font-size: 0.85rem; color: var(--sc-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sv-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip {
    background: var(--sc-bg-light);
    border: 1.5px solid var(--sc-border);
    color: var(--sc-text);
    padding: 8px 14px;
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-size: 0.9rem; font-weight: 600;
    transition: var(--sc-transition);
}
.sv-chip:hover { border-color: var(--sc-accent); }
.sv-chip.active {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: #fff;
    box-shadow: 0 0 10px rgba(233,69,96,0.45);
}
.sv-select, .sv-input {
    width: 100%;
    background: var(--sc-bg-light);
    border: 1.5px solid var(--sc-border);
    color: var(--sc-text);
    padding: 10px 12px;
    border-radius: var(--sc-radius-sm);
    font-size: 0.95rem;
}
.sv-select:focus, .sv-input:focus {
    outline: none; border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px rgba(233,69,96,0.2);
}
.sv-checkbox {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0;
    cursor: pointer; user-select: none;
}
.sv-checkbox input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--sc-accent);
}
.sv-players { display: flex; flex-direction: column; gap: 8px; }
.sv-player-row .sv-team-label {
    font-size: 0.85rem; color: var(--sc-accent); font-weight: 700; text-align: center;
}
.sv-player-row select, .sv-player-row input {
    background: var(--sc-primary); border: 1px solid var(--sc-border);
    color: var(--sc-text); padding: 8px; border-radius: 6px;
    font-size: 0.9rem;
}
.sv-player-row .sv-remove {
    background: transparent; border: 0; color: var(--sc-danger);
    cursor: pointer; font-size: 1.2rem;
}
.sv-add-player {
    margin-top: 8px;
    background: transparent;
    border: 1.5px dashed var(--sc-border);
    color: var(--sc-text-muted);
    padding: 10px; border-radius: var(--sc-radius-sm);
    cursor: pointer; width: 100%;
    transition: var(--sc-transition);
}
.sv-add-player:hover { border-color: var(--sc-accent); color: var(--sc-accent); }

/* Input mit gematchem DB-Spieler bekommt gruenen Rand */
.sv-player-name.sv-ac-linked {
    border-color: var(--sc-success) !important;
    box-shadow: 0 0 0 2px rgba(0,184,148,0.2);
}

/* Club-Picker unter dem Spielername-Input (nur wenn der Spieler
   in mehreren Verbaenden gemeldet ist - DSAB/DKV/NWDV/User). */
.sv-player-row {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    grid-template-rows: auto auto;
    gap: 8px;
    align-items: center;
    background: var(--sc-bg-light);
    padding: 8px;
    border-radius: var(--sc-radius-sm);
}
.sv-club-picker {
    grid-column: 2 / span 2;
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 2px;
}
.sv-club-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--sc-primary);
    border: 1.5px solid var(--sc-border);
    color: var(--sc-text);
    border-radius: 999px;
    cursor: pointer; font-size: 0.8rem;
    transition: var(--sc-transition);
}
.sv-club-chip:hover { border-color: var(--sc-accent); }
.sv-club-chip.active {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: #fff;
    box-shadow: 0 0 8px rgba(233,69,96,0.35);
}
.sv-club-chip-badge {
    font-size: 0.65rem; font-weight: 700;
    background: rgba(0,0,0,0.2);
    padding: 1px 5px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}
.sv-club-chip.active .sv-club-chip-badge { background: rgba(255,255,255,0.25); }
.sv-club-chip-name { font-weight: 500; }

/* Autocomplete Dropdown (fixed positioned, haengt an document.body) */
.sv-autocomplete {
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    max-height: 320px; overflow-y: auto;
    z-index: 500;
}
.sv-ac-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background var(--sc-transition);
}
.sv-ac-item:hover { background: var(--sc-accent-soft); }
.sv-ac-item img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--sc-bg-light);
}
.sv-ac-initials {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sc-bg-light);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--sc-text-muted);
    font-family: var(--sc-score-font);
}
.sv-ac-info { flex: 1; min-width: 0; }
.sv-ac-name { font-weight: 600; color: var(--sc-text); }
.sv-ac-sub  { font-size: 0.78rem; color: var(--sc-text-muted); }
.sv-ac-clublogo {
    width: 28px; height: 28px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
    flex-shrink: 0;
}
.sv-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--sc-border);
}

/* Buttons (konsistent mit DartVinci) */
.btn {
    padding: 10px 20px;
    border-radius: var(--sc-radius-sm);
    font-weight: 600;
    transition: var(--sc-transition);
    cursor: pointer;
    border: 0;
    font-size: 0.95rem;
    font-family: var(--sc-body-font);
}
.btn-primary {
    background: var(--sc-accent); color: #fff;
}
.btn-primary:hover { background: #c83650; box-shadow: var(--sc-accent-glow); }
.btn-outline {
    background: transparent; color: var(--sc-text);
    border: 1.5px solid var(--sc-border);
}
.btn-outline:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.btn-success { background: var(--sc-success); color: #fff; }
.btn-danger  { background: var(--sc-danger);  color: #fff; }

/* ============================================================ */
/* GAME BOARD                                                   */
/* Full-Height Layout: Alles passt ohne Scrollen auf den Screen */
/* Numpad fuellt automatisch den verbleibenden Platz.           */
/* ============================================================ */
body.scorer-body[data-view="game"] { overflow: hidden; }
body.scorer-body[data-view="game"] .scorer-main {
    /* Game-View nutzt die gesamte Bildschirmbreite OHNE Max-Width-Cap.
       Das Tablet bestimmt die Breite, nicht eine CSS-Hausgrenze. */
    max-width: 100%;
    width: 100%;
    padding: 4px 6px;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.scorer-body[data-view="game"] .scorer-view[data-view="game"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.scorer-body[data-view="presentation"] .scorer-view[data-view="presentation"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Grid-Layout - deterministisch + nimmt die ganze Breite.
   Portrait: 40% Score-Panels / 60% Controls (ohne max-width, voller Screen).
   Landscape: Main + Sidebar nebeneinander. */
.game-board {
    display: grid;
    grid-template-rows: minmax(0, 40fr) minmax(0, 60fr);
    grid-template-columns: 1fr;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    min-height: 0;
    min-width: 0;
}
/* Leg-Pause / End-Summary: Summary nimmt den Platz, Action-Leiste
   nur soviel wie die Buttons brauchen. Sonst wuerde die 40/60-Aufteilung
   die Buttons auf >50% der Screen-Hoehe blasen. */
.game-board.gb-board-paused {
    grid-template-rows: minmax(0, 1fr) auto;
}
.gb-main {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0; min-height: 0;
    overflow: hidden;
}
/* Engine-Area (X01/Cricket/Split-Rendering) muss die freie Hoehe ihrer
   Eltern-Box einnehmen - sonst bleiben Teams auf Content-Hoehe und der
   TV zeigt darunter schwarzen Leerraum. */
.gb-engine-area {
    display: flex; flex-direction: column; gap: 8px;
    flex: 1 1 auto; min-height: 0; min-width: 0;
}
.gb-engine-area .gb-teams { flex: 1 1 auto; }
.gb-controls {
    display: flex; flex-direction: column; gap: 4px;
    min-height: 0; min-width: 0;
    overflow: hidden;
}
/* Damit sich die Team-Panels die verfuegbare Hoehe teilen statt
   nur die Mindesthoehe einzunehmen (sonst grosse leere Bereiche). */
.gb-teams { flex: 1 1 auto; min-height: 0; }
.gb-team  { height: 100%; }
.gb-end-panel {
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-success);
    border-radius: var(--sc-radius);
    padding: 16px;
    text-align: center;
}
.gb-end-title {
    font-size: 1.4rem; font-weight: 700; color: var(--sc-success);
    margin-bottom: 12px;
}
.gb-end-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* ============================================================ */
/* END-OF-GAME SUMMARY                                          */
/* ============================================================ */
.gb-summary {
    background: var(--sc-bg-card);
    border: 2px solid var(--sc-success);
    border-radius: var(--sc-radius);
    padding: clamp(6px, 1.5vh, 20px);
    box-shadow: 0 0 40px rgba(0,184,148,0.25);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex: 1 1 auto;
    /* Kein Scroll mehr - alle Sektionen muessen passen. Fonts und Paddings
       skalieren ueber cqi/vh-Units. */
    overflow: hidden;
    container-type: inline-size;
    display: flex; flex-direction: column;
    min-height: 0;
}
.gb-summary-header {
    text-align: center;
    border-bottom: 1px solid var(--sc-border);
    padding-bottom: clamp(6px, 1.2vh, 16px);
    margin-bottom: clamp(6px, 1.2vh, 16px);
    flex: 0 0 auto;
}
.gb-summary-icon {
    font-size: clamp(1.8rem, 5vh, 4rem);
    line-height: 1;
    margin-bottom: 4px;
}
.gb-summary-winner {
    font-family: var(--sc-score-font);
    font-weight: 900;
    font-size: clamp(1.1rem, 3vh, 2.2rem);
    color: var(--sc-success);
    letter-spacing: 1px;
}
.gb-summary-sub {
    font-size: clamp(0.85rem, 1.7vh, 1.2rem);
    color: var(--sc-text-muted);
    margin-top: 2px;
}
.gb-summary-mode {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--sc-score-font);
    font-size: clamp(0.8rem, 1.5vh, 1rem);
    color: var(--sc-accent);
    background: var(--sc-accent-soft);
    padding: 3px 10px; border-radius: 999px;
    letter-spacing: 1px;
}
.gb-summary-table {
    width: 100%;
    border-collapse: collapse;
    /* Basis-Font skaliert mit Container-Breite, damit auch 9 Spalten
       (Label + 8 Teams) sauber nebeneinander passen. */
    font-size: min(clamp(0.6rem, 1.4vh, 1.05rem), 2.2cqi);
    table-layout: fixed;
}
.gb-summary-table th,
.gb-summary-table td {
    padding: clamp(4px, 1vh, 12px) clamp(3px, 0.4vw, 8px);
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Label-Spalte: darf etwas breiter sein und mehrzeilig umbrechen,
   damit "Runden (Aufnahmen)" lesbar bleibt. */
.gb-summary-table th:first-child,
.gb-summary-table td:first-child {
    text-align: left;
    width: clamp(90px, 14vw, 170px);
    white-space: normal;
    word-break: keep-all;
    hyphens: auto;
    color: var(--sc-text-muted);
    font-weight: 500;
}
.gb-summary-table .gs-stat-label { color: var(--sc-text-muted); font-weight: 500; }
.gb-summary-table th {
    font-size: min(clamp(0.7rem, 1.6vh, 1.1rem), 2.4cqi);
    color: var(--sc-text);
    border-bottom: 2px solid var(--sc-border);
    font-weight: 700;
}
/* Team-Name-Header darf auf 2 Zeilen umbrechen (z.B. bei Doppeln) */
.gb-summary-table thead th:not(:first-child) {
    white-space: normal;
    line-height: 1.15;
    word-break: keep-all;
}
.gb-summary-table .gs-stat-value {
    font-family: var(--sc-score-font);
    font-weight: 700;
    color: var(--sc-text);
}
.gb-summary-table .gs-winner {
    color: var(--sc-success);
    background: rgba(0,184,148,0.08);
}
.gb-summary-actions {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    padding: clamp(6px, 1.5vh, 12px) 0;
    flex: 0 0 auto;
}
.gb-summary-actions .btn {
    padding: clamp(6px, 1.2vh, 10px) clamp(10px, 1.5vw, 18px);
    font-size: clamp(0.8rem, 1.5vh, 1rem);
}
/* Kompakte Action-Leiste fuer Leg-Pause und End-Summary.
   Buttons schoen klein + Icon-Labels. Der Primary-Call-to-Action
   (Naechstes Leg / Nochmal 501) ist groesser und farbig hervorgehoben. */
.gb-pause-actions {
    display: flex;
    gap: clamp(6px, 1vw, 12px);
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: clamp(8px, 1.4vh, 14px) clamp(6px, 1vw, 12px);
}
.gb-pause-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gb-pause-actions .btn:active { transform: translateY(1px); }
.gb-pause-actions .btn-sm {
    font-size: clamp(0.78rem, 1.5vh, 0.95rem);
    padding: 7px 12px;
    min-height: 38px;
}
.gb-pause-actions .btn-lg {
    font-size: clamp(0.95rem, 1.9vh, 1.15rem);
    padding: 10px 20px;
    min-height: 46px;
    flex: 0 1 auto;
}
.gb-pause-actions .btn-ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--sc-border);
    color: var(--sc-text-muted);
}
.gb-pause-actions .btn-ghost:hover {
    background: rgba(233,69,96,0.08);
    border-color: var(--sc-accent);
    color: var(--sc-text);
}
.gb-pause-actions .btn-primary {
    background: linear-gradient(135deg, var(--sc-accent), #c83650);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(233,69,96,0.35);
}
.gb-pause-actions .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(233,69,96,0.5);
}
.gb-pause-actions .btn-ic {
    font-size: 1.05em;
    line-height: 1;
    opacity: 0.9;
}
.gb-pause-actions .btn-tx { white-space: nowrap; }

/* Portrait/schmal: Label der Ghost-Buttons ausblenden, nur Icon zeigen.
   Der Primary-Button behaelt immer seinen Text - das ist der Call-to-Action. */
@media (max-width: 520px) {
    .gb-pause-actions .btn-ghost .btn-tx { display: none; }
    .gb-pause-actions .btn-ghost { padding: 7px 12px; min-width: 44px; }
    .gb-pause-actions .btn-ic { font-size: 1.2em; opacity: 1; }
}
/* Summary-Sektionen: Haupt-Tabelle oben, Satz-Stats + Leg-Liste teilen
   sich den restlichen Platz. Alles skaliert ueber cqi damit kein Scroll. */
.gb-summary > .gb-summary-table {
    flex: 0 0 auto;
}
.gb-summary-sets,
.gb-summary-legs {
    margin-top: clamp(8px, 1.8vh, 18px);
    border-top: 1px solid var(--sc-border);
    padding-top: clamp(6px, 1.2vh, 12px);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.gb-summary-legs-title {
    font-size: clamp(0.8rem, 1.7vh, 1.1rem);
    color: var(--sc-text-muted);
    margin: 0 0 6px;
    font-weight: 600;
    flex: 0 0 auto;
}
.gb-summary-legs-table,
.gb-summary-sets-table {
    font-size: min(clamp(0.6rem, 1.3vh, 0.95rem), 2cqi);
    flex: 1 1 auto;
    overflow: hidden;
}
.gb-summary-legs-table th, .gb-summary-legs-table td,
.gb-summary-sets-table th, .gb-summary-sets-table td {
    padding: clamp(2px, 0.6vh, 8px) clamp(3px, 0.4vw, 8px);
}
.gb-summary-legs-table th:first-child,
.gb-summary-legs-table td:first-child { width: 30px; text-align: right; white-space: nowrap; }
.gb-summary-legs-table th:nth-child(2),
.gb-summary-legs-table td:nth-child(2) { width: 30px; text-align: right; }
.gb-summary-sets-table .gs-stat-label { padding-left: 4px; }
/* Sub-Row (Set-Avg/100+/140+/180): zart abgesetzt */
.gb-summary-sets-table .gs-sub-row td { font-size: 0.92em; }

/* Zuschauer-Version: groesser, kein Controls-Bereich */
.gb-summary-present {
    /* Zuschauer-Bildschirm: volle Hoehe+Breite nutzen fuer maximale Lesbarkeit.
       box-sizing explizit: padding darf die 100% Breite/Hoehe NICHT sprengen -
       sonst ueberlappt die Summary das Grid-Child und nimmt optisch weniger
       Breite ein als der Zuschauer-Container hergibt. */
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    border-width: 3px;
    box-shadow: 0 0 60px rgba(0,184,148,0.35);
    padding: clamp(16px, 2.5vh, 50px) clamp(20px, 2.5vw, 60px);
    /* Im Grid-Cell explizit auf volle Flaeche spannen. */
    justify-self: stretch;
    align-self: stretch;
    /* Inhalte vertikal entspannt verteilen statt oben klumpen. */
    justify-content: space-between;
}
.gb-summary-present .gb-summary-icon  { font-size: clamp(4rem, 10vh, 7rem); }
.gb-summary-present .gb-summary-winner{ font-size: clamp(2rem, 7vh, 5rem); }
.gb-summary-present .gb-summary-sub   { font-size: clamp(1.2rem, 3.2vh, 2.2rem); }
.gb-summary-present .gb-summary-table {
    /* Font-size skaliert nach sichtbarer Container-Breite (cqi). Damit
       passen Teamnamen/Werte bei schmalen Screens genauso wie auf 4K-TV. */
    font-size: min(clamp(0.9rem, 2.2vh, 1.7rem), 2.6cqi);
    width: 100%;
}
.gb-summary-present .gb-summary-table th {
    font-size: min(clamp(1rem, 2.6vh, 1.9rem), 2.9cqi);
}
/* Werte in der Zuschauer-Version mittig statt rechtsbuendig - so sind sie
   zentral unter den Team-Namen lesbar und nicht an die Zellwand geklatscht.
   Zellen duerfen wrappen, damit lange Werte nicht mit '...' abgeschnitten
   werden (nowrap + ellipsis greift nur in der kompakten Scorer-Variante). */
.gb-summary-present .gb-summary-table td,
.gb-summary-present .gb-summary-table th {
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.gb-summary-present .gb-summary-table th:first-child,
.gb-summary-present .gb-summary-table td:first-child {
    text-align: left;
    /* Label-Spalte etwas schmaler halten, damit die Teamspalten Breite
       abbekommen - das war der Grund fuer die Abschneidereien. */
    width: clamp(110px, 14vw, 200px);
}
/* Auto-Advance-Countdown */
.gb-summary-countdown {
    position: absolute;
    top: clamp(10px, 1.5vh, 30px);
    right: clamp(10px, 1.5vw, 40px);
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 999px;
    padding: clamp(6px, 1vh, 12px) clamp(12px, 1.5vw, 22px);
    color: #c4b5fd;
    font-weight: 700;
    font-size: clamp(0.9rem, 1.8vh, 1.3rem);
    letter-spacing: 1px;
}
.gb-summary-present { position: relative; }
.gb-abort-row {
    display: flex; gap: 6px; justify-content: flex-end;
    flex: 0 0 auto; margin-top: 2px;
}
.gb-abort-row .btn { font-size: 0.8rem; padding: 6px 10px; }

/* Team-Scores: noch grosszuegiger skaliert */
.gb-team-score { font-size: min(clamp(3.5rem, 26vmin, 18rem), 52cqi); }

/* --- Landscape MIT ausreichend Platz -> Zwei-Spalten-Layout --- */
@media (orientation: landscape) and (min-width: 700px) {
    .game-board {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr clamp(280px, 34vw, 420px);
    }
    .gb-team-score { font-size: min(clamp(4rem, 28vmin, 18rem), 52cqi); }
    /* In der schmalen Sidebar sind Shortcuts + Numpad untereinander
       statt nebeneinander - jede Sektion fuellt sich voll aus. */
    .gb-input-grids {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .gb-shortcuts {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    }
}

/* --- Portrait Tablet: Score in den schmalen Team-Container einpassen,
   Foto auch verkleinern damit der Header nicht aufblaeht --- */
@media (orientation: portrait) and (min-width: 600px) {
    .gb-team-score { font-size: min(clamp(3rem, 18vmin, 10rem), 38cqi); }
    .gb-player-photo {
        width:  min(clamp(20px, 5vh, 48px), 22cqi);
        height: min(clamp(20px, 5vh, 48px), 22cqi);
        border-width: 1px;
    }
}

/* --- Desktop ganz breit: Scores maximal --- */
@media (orientation: landscape) and (min-width: 1400px) {
    .gb-team-score { font-size: min(clamp(5rem, 30vmin, 22rem), 52cqi); }
}

/* --- Schmaler Handy-Landscape (< 700px) -> weiter vertikal, Header klein --- */
@media (orientation: landscape) and (max-width: 699px) {
    body.scorer-body[data-view="game"] { padding-top: 40px; }
    body.scorer-body[data-view="game"] .scorer-header { height: 40px; }
    body.scorer-body[data-view="game"] .scorer-main {
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
    }
    .gb-team-score { font-size: min(clamp(1.2rem, 12vh, 3rem), 38cqi); }
}

/* --- PRESENTATION / ZUSCHAUER-VIEW -------------------------- */
/* Keine Inputs, keine Shortcuts, nur die Scores so gross wie mgl. */
body.scorer-body[data-view="presentation"] {
    padding-top: 0;
    background: var(--sc-bg-dark);
}
body.scorer-body[data-view="presentation"] .scorer-header,
body.scorer-body[data-view="presentation"] .scorer-side-menu,
body.scorer-body[data-view="presentation"] .scorer-menu-backdrop { display: none; }
body.scorer-body[data-view="presentation"] .scorer-main {
    max-width: 100vw; padding: 0;
    height: 100vh; overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.scorer-body[data-view="presentation"] .game-board {
    height: 100vh; width: 100vw; max-width: 100vw;
    /* Padding so klein wie moeglich - wir wollen die volle Bildschirm-
       breite fuer die Score-Panels nutzen. Frueher klemmte zu viel
       Luft am Rand und der Score wirkte gestaucht. */
    padding: clamp(4px, 0.8vh, 10px) clamp(4px, 0.6vw, 12px);
    gap: 8px;
    /* Einzige Zeile + EINZIGE Spalte. Wichtig: ohne explizite
       grid-template-columns wuerde die Landscape-Regel (~1fr 280-420px
       Sidebar) auch hier greifen und ein leerer Sidebar-Slot frisst
       rechts ~30% der Bildschirmbreite. */
    grid-template-rows: 1fr;
    grid-template-columns: 1fr !important;
}
body.scorer-body[data-view="presentation"] .gb-main {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
}
body.scorer-body[data-view="presentation"] .gb-engine-area {
    width: 100%;
    max-width: 100%;
}
body.scorer-body[data-view="presentation"] .gb-teams {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
body.scorer-body[data-view="presentation"] .gb-controls,
body.scorer-body[data-view="presentation"] .gb-shortcuts,
body.scorer-body[data-view="presentation"] .gb-input-row,
body.scorer-body[data-view="presentation"] .gb-numpad,
body.scorer-body[data-view="presentation"] .gb-fnkeys,
body.scorer-body[data-view="presentation"] .gb-abort-row { display: none !important; }
body.scorer-body[data-view="presentation"] .gb-team-score {
    /* Absolute Positionierung mit transform translate(-50%, -50%) -
       garantiert mathematisch zentriert im relative-Wrapper. */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Konservativere font-size damit '888' auch auf Ultra-Widescreen
       (32:9 Monitore) nicht ueber den Panel-Rand laeuft. 45cqi statt
       55cqi: drei breite Ziffern bei Char-Width 0.6em = 0.45 * 3 * 0.6
       = 0.81 -> nimmt 81% der Panel-Breite, hat 9% Sicherheitsabstand
       links und rechts. */
    font-size: min(clamp(5rem, 32vh, 22rem), 45cqi) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 90% !important;
}
/* Team-Panel im Zuschauer-Modus als 3-Zeilen-Grid: top/middle/bottom.
   Das middle bekommt 1fr (= nimmt den verbleibenden Platz komplett),
   der Score darin ist per flex wirklich mittig - vorher hat der
   flex-column + space-between-Fallback den Score je nach Top-Content
   verschoben aussehen lassen. */
body.scorer-body[data-view="presentation"] .gb-team {
    /* !important damit das Basis-CSS '.gb-team' (Zeile 1077) mit
       'display:flex; flex-direction:column; justify-content:space-between'
       garantiert ueberschrieben wird. Sonst ist gb-team-middle ein
       flex-item mit auto-width statt grid-Cell. */
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    padding: clamp(4px, 0.8vh, 10px) clamp(2px, 0.4vw, 8px) !important;
    overflow: hidden !important;
}
body.scorer-body[data-view="presentation"] .gb-team-top {
    align-self: start !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(4px, 0.8vh, 10px) !important;
    text-align: center !important;
    width: 100% !important;
}
body.scorer-body[data-view="presentation"] .gb-team-middle {
    /* Hard-mathematische Zentrierung via position:relative + Score absolut
       darin platziert. Flex/Grid/text-align hat alles nicht zuverlaessig
       gegriffen - vermutlich greift im Browser eine andere Cascade-Regel.
       Mit relative-Wrapper + absolute-Score + translate(-50%) ist
       Zentrierung mathematisch ueber das DOM hinweg unmoeglich kaputt
       zu machen. */
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.scorer-body[data-view="presentation"] .gb-team-bottom {
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vh, 10px);
}
body.scorer-body[data-view="presentation"] .gb-team-name {
    /* Spielername schoen gross. Hier setzen wir die OBERGRENZE - das JS
       (fitTeamPanelTexts) misst nach dem Render und shrinkt alle Namen
       gemeinsam runter, sodass der laengste Name gerade noch reinpasst.
       So ist 'Roel Engbers' und 'Marcus Eßer' im selben Match gleich
       gross. */
    font-size: min(clamp(2.2rem, 7vh, 6.5rem), 14cqi);
    line-height: 1.1;
    padding: 0 clamp(8px, 1.5vh, 18px);
    white-space: nowrap;
}
/* (alte .gb-team-middle-Regel ist weiter unten als 3-Zonen-Grid neu
    definiert - hier absichtlich leer gelassen) */
/* Im Zuschauer-Modus: Spielerfotos komplett ausblenden. Der TV soll nur
   Score + Name + letzte Wuerfe zeigen - keine Foto-Header oben mehr. */
body.scorer-body[data-view="presentation"] .gb-player-photo,
body.scorer-body[data-view="presentation"] .gb-team-photos {
    display: none !important;
}
body.scorer-body[data-view="presentation"] .gb-team-club {
    /* Vereinsname analog zum Spielernamen: Obergrenze gross gewaehlt,
       JS shrinkt auf gemeinsame Groesse. Ohne nowrap wuerde Wrapping
       die scrollWidth-Messung verfaelschen. */
    font-size: clamp(0.95rem, 2.4vh, 2rem);
    padding: 3px 14px;
    white-space: nowrap;
    max-width: 100%;
}
body.scorer-body[data-view="presentation"] .gb-legs-between .gb-legs-num {
    font-size: clamp(2rem, 6vw, 5rem);
}
body.scorer-body[data-view="presentation"] .gb-checkout {
    /* Checkout-Hilfe UNTER der Restzahl, nicht drueber. Die Restzahl ist
       absolut zentriert in .gb-team-middle (top:50%). Der Checkout wuerde
       ohne Positionierung in den natuerlichen Fluss am oberen Rand fallen
       und ueber der Zahl haengen. Absolute Positionierung am unteren Rand
       von .gb-team-middle platziert ihn genau unter der grossen Zahl. */
    position: absolute !important;
    bottom: clamp(8px, 2vh, 28px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    white-space: nowrap !important;
    font-size: clamp(1rem, 2vw, 1.8rem);
    padding: 12px 20px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    border-radius: 12px;
}
/* History im Zuschauer-Bildschirm GROSS und lesbar (Sichtweite ~3-5m) */
body.scorer-body[data-view="presentation"] .gb-history {
    max-height: clamp(120px, 30vh, 400px);
    padding: 14px 18px;
    font-size: clamp(1rem, 2.4vw, 2rem);
}
body.scorer-body[data-view="presentation"] .gb-history-row {
    padding: clamp(4px, 0.8vh, 10px) 4px;
    font-size: clamp(1.2rem, 3vh, 2.4rem);
}
body.scorer-body[data-view="presentation"] .gb-history-scored,
body.scorer-body[data-view="presentation"] .gb-history-remaining {
    font-size: clamp(1.3rem, 3vh, 2.6rem);
}
body.scorer-body[data-view="presentation"] .gb-history-center {
    font-size: clamp(0.9rem, 1.8vh, 1.4rem);
}
body.scorer-body[data-view="presentation"] .gb-match-info {
    font-size: clamp(1rem, 2vh, 1.6rem);
    color: var(--sc-text-muted);
    padding: 8px 0;
}
/* Stats im Zuschauer-Bildschirm: grosse Fonts fuer Sichtbarkeit aus der
   Entfernung, aber ab 5 Spielern in 2+ Zeilen damit nichts abgeschnitten wird. */
body.scorer-body[data-view="presentation"] .gb-team-stats {
    gap: clamp(2px, 0.5vw, 5px);
    margin-top: clamp(8px, 1.5vh, 14px);
}
body.scorer-body[data-view="presentation"] .gb-stat {
    padding: clamp(3px, 1vh, 10px) clamp(2px, 0.8vw, 6px);
    border-radius: 6px;
}
body.scorer-body[data-view="presentation"] .gb-stat-label {
    font-size: min(clamp(0.7rem, 1.4vh, 1.2rem), 16cqi);
    letter-spacing: 0.3px;
    /* Wrapping-Regeln aus der Basis-Regel gelten weiter (line-clamp 2) */
}
body.scorer-body[data-view="presentation"] .gb-stat-value {
    font-size: min(clamp(1rem, 3.2vh, 2.6rem), 28cqi);
}
/* Presentation: bei 2 Teams 8-spaltiges Grid mit span-2 Boxen.
   Reihe 1: 4 Boxen (cols 1-2, 3-4, 5-6, 7-8) - voll ausgefuellt.
   Reihe 2: 3 Boxen, gezielt eingeruckt mit Start auf col 2 (cols 2-3,
   4-5, 6-7) - dadurch ist die kuerzere zweite Reihe SYMMETRISCH um
   die Mitte zentriert statt linksbuendig. */
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="2"] .gb-team-stats {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="2"] .gb-team-stats > .gb-stat {
    grid-column: span 2;
}
/* 5. Box (= erste der zweiten Reihe): explizit auf col 2 starten,
   damit die folgenden 6./7. Box automatisch in 4-5 und 6-7 landen.
   Damit sind die 3 Reihe-2-Boxen mittig 2-3 / 4-5 / 6-7. */
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="2"] .gb-team-stats > .gb-stat:nth-child(5) {
    grid-column: 2 / span 2;
}
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="3"] .gb-team-stats,
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="4"] .gb-team-stats {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="5"] .gb-team-stats,
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="6"] .gb-team-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="7"] .gb-team-stats,
body.scorer-body[data-view="presentation"] .gb-teams[data-teams="8"] .gb-team-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Stats-Container: volle Panel-Breite + minimale gaps, damit jede Box
   maximal breit ist. */
body.scorer-body[data-view="presentation"] .gb-team-stats {
    width: 100%;
    gap: clamp(2px, 0.3vw, 5px);
}
.gb-match-info {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    font-size: 0.85rem; color: var(--sc-text-muted);
    padding: 4px 0;
}
.gb-match-info b { color: var(--sc-text); }

/* Team-Panels: immer alle Teams nebeneinander, gleichmaessig verteilt.
   Score + Stats schrumpfen ueber Container-Queries automatisch mit. */
.gb-teams {
    display: grid;
    gap: clamp(3px, 0.8vw, 10px);
    align-items: stretch;
    justify-content: stretch;
    /* KRITISCH: Eine Zeile die den ganzen Container fuellt - sonst bleiben
       Team-Panels auf Content-Hoehe und lassen grossen Leerraum.
       minmax(0, 1fr) statt 1fr: ohne min: 0 schiebt der intrinsische Min-
       Content der Score-Zahl die Spalte auf, sodass die beiden 1fr-
       Spalten unterschiedlich breit werden ('501' und '368' sind
       unterschiedlich breit). minmax(0, 1fr) fixiert auf gleiche Breite. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    width: 100%;
}
.gb-teams[data-teams="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-teams[data-teams="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gb-teams[data-teams="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gb-teams[data-teams="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gb-teams[data-teams="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gb-teams[data-teams="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.gb-team {
    background: var(--sc-bg-card);
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: clamp(4px, 1vh, 14px);
    display: flex; flex-direction: column;
    /* 3-Zonen-Layout: Top buendig oben, Score zentriert in der Mitte,
       Bottom buendig unten - gleichmaessige Aufteilung fuer alle Screens. */
    justify-content: space-between;
    transition: var(--sc-transition);
    position: relative;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    container-type: inline-size;
}
.gb-team-top {
    flex: 0 0 auto;         /* nimmt Eigengroesse, bleibt oben */
    width: 100%;
}
.gb-team-middle {
    flex: 1 1 auto;         /* fuellt den Rest -> Score ist vertikal zentriert */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 0;
    width: 100%;
}
.gb-team-bottom {
    flex: 0 0 auto;         /* nimmt Eigengroesse, bleibt unten */
    width: 100%;
    display: flex; flex-direction: column; gap: 4px;
}
.gb-team.active {
    border-color: var(--sc-accent);
    box-shadow: var(--sc-accent-glow);
}
.gb-team.won {
    border-color: var(--sc-success);
    box-shadow: 0 0 24px rgba(0,184,148,0.45);
}
.gb-team-header {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(2px, 0.6vh, 6px);
    margin-bottom: clamp(4px, 1vh, 10px);
}
.gb-team-photos {
    display: flex; gap: 6px; justify-content: center;
}
/* User-Wunsch: Spieler-Fotos NUR auf dem Zuschauer-Screen anzeigen.
   Der Schreiber/Scorer braucht keine Fotos waehrend des Spielens -
   die Information ist auf dem TV-Screen daneben sichtbar. */
body.scorer-body:not([data-view="presentation"]) .gb-team-photos {
    display: none !important;
}
.gb-player-photo {
    /* Foto skaliert mit dem Team-Panel (cqi) damit bei 8 Teams nicht
       mehr Platz verbraucht wird als das Panel bietet. */
    width:  min(clamp(24px, 7vh, 72px), 45cqi);
    height: min(clamp(24px, 7vh, 72px), 45cqi);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sc-border);
    background: var(--sc-bg-light);
    transition: var(--sc-transition);
}
.gb-team.active .gb-player-photo { border-color: var(--sc-accent); box-shadow: 0 0 12px rgba(233,69,96,0.5); }
.gb-team.won    .gb-player-photo { border-color: var(--sc-success); }
.gb-player-photo-empty {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--sc-text-muted);
}
.gb-team-name {
    font-size: min(clamp(0.75rem, 1.8vh, 1.1rem), 13cqi);
    font-weight: 600;
    text-align: center;
    color: var(--sc-text);
    min-height: 1.3em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gb-team-name .doubles-sub {
    font-size: clamp(0.65rem, 1.3vh, 0.85rem);
    color: var(--sc-text-muted);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gb-team-club {
    font-size: clamp(0.7rem, 1.3vh, 0.85rem);
    color: var(--sc-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--sc-accent-soft);
    border-radius: 10px;
}

/* ============================================================ */
/* LIGA-MATCH OVERLAY                                           */
/* ============================================================ */
.gb-league-overlay {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: clamp(6px, 1.5vh, 14px) 10px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, rgba(233,69,96,0.08), rgba(0,184,148,0.08));
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    flex: 0 0 auto;
}
.gb-league-team {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
    justify-content: flex-start;
}
/* Rechtes Team: Logo rechts, Text rechtsbuendig */
.gb-league-team.gb-league-right {
    justify-content: flex-end;
    flex-direction: row-reverse;
    text-align: right;
}
.gb-league-team.gb-league-right .gb-league-name { text-align: right; }
.gb-league-logo {
    width: clamp(36px, 7vh, 80px);
    height: clamp(36px, 7vh, 80px);
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
}
/* Fallback: bis Bild geladen ist, Logo unsichtbar (kein weisser Kasten) */
.gb-league-logo:not([src]), .gb-league-logo[src=""], .gb-league-logo.gb-broken {
    display: none !important;
}
.gb-league-name {
    font-weight: 700;
    font-size: clamp(1rem, 2vh, 1.6rem);
    color: var(--sc-text);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gb-league-vs {
    font-family: var(--sc-score-font);
    font-weight: 900;
    font-size: clamp(1rem, 2.5vh, 2rem);
    color: var(--sc-accent);
    letter-spacing: 2px;
}

/* Presentation: Liga-Overlay riesig */
body.scorer-body[data-view="presentation"] .gb-league-overlay {
    padding: 12px 22px;
    margin-bottom: 10px;
}
body.scorer-body[data-view="presentation"] .gb-league-logo {
    width: clamp(60px, 10vh, 140px);
    height: clamp(60px, 10vh, 140px);
}
body.scorer-body[data-view="presentation"] .gb-league-name {
    font-size: clamp(1.6rem, 4vh, 3.5rem);
}
body.scorer-body[data-view="presentation"] .gb-league-vs {
    font-size: clamp(1.8rem, 4vh, 3.5rem);
}

/* Liga-Match Setup-Felder - nur Mannschaftsname, Logo kommt aus DB */
.sv-league-row {
    display: grid; grid-template-columns: 40px 1fr; gap: 8px;
    align-items: center;
    background: var(--sc-bg-light);
    padding: 8px; border-radius: var(--sc-radius-sm);
    margin-bottom: 6px;
}
.sv-league-hint {
    margin-top: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--sc-text-muted);
    background: rgba(0, 184, 148, 0.06);
    border-left: 3px solid var(--sc-success);
    border-radius: 4px;
    line-height: 1.4;
}
/* Base-Properties fuer die Team-Score-Anzeige. Die tatsaechliche font-size
   wird weiter oben per Media-Query gesetzt (mit cqi-Cap), hier NICHT
   font-size ueberschreiben damit die Query-Regeln greifen. */
.gb-team-score {
    font-family: var(--sc-score-font);
    font-weight: 900;
    text-align: center;
    color: var(--sc-success);
    line-height: 1;
    margin: clamp(4px, 1vh, 10px) 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Doppel mit Blocken: pro Spieler eine Zeile "Name : Restscore" */
.gb-doubles-score-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    padding: clamp(4px, 1vh, 10px) clamp(6px, 1.5cqi, 12px);
    margin: 2px 0;
    background: var(--sc-bg-light);
    border-radius: 6px;
    border-left: 3px solid transparent;
    min-width: 0;
}
.gb-doubles-score-row.active {
    border-left-color: var(--sc-accent);
    box-shadow: 0 0 12px rgba(233,69,96,0.35);
    background: rgba(233,69,96,0.08);
}
.gb-doubles-score-row.done {
    opacity: 0.55;
    border-left-color: var(--sc-success);
}
.gb-doubles-name {
    font-weight: 600;
    color: var(--sc-text);
    font-size: min(clamp(0.75rem, 1.6vh, 1.1rem), 14cqi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.gb-doubles-remaining {
    font-family: var(--sc-score-font);
    font-weight: 900;
    color: var(--sc-accent);
    font-size: min(clamp(1.2rem, 3.5vh, 2.6rem), 24cqi);
    line-height: 1;
    flex: 0 0 auto;
}
.gb-doubles-score-row.active .gb-doubles-remaining { color: var(--sc-accent); text-shadow: 0 0 12px rgba(233,69,96,0.55); }
.gb-doubles-score-row.done   .gb-doubles-remaining { color: var(--sc-success); }

/* Zuschauer-Bildschirm: groesser */
body.scorer-body[data-view="presentation"] .gb-doubles-remaining {
    font-size: min(clamp(1.8rem, 5vh, 4rem), 30cqi);
}
body.scorer-body[data-view="presentation"] .gb-doubles-name {
    font-size: min(clamp(1rem, 2vh, 1.5rem), 16cqi);
}
.gb-team.active .gb-team-score { color: var(--sc-accent); text-shadow: 0 0 20px rgba(233,69,96,0.6); }

/* Bestleistungen-Kaesten im SCORER (Game-View) ausblenden -
   auf dem kleinen Tablet kaum lesbar. Werden weiterhin angezeigt im:
   - Zuschauer-Bildschirm (presentation view)
   - End-Summary nach dem Match (eigene Tabelle)
   So hat der Score-Bereich mehr Platz. */
body.scorer-body[data-view="game"] .gb-team-stats { display: none; }

.gb-team-stats {
    display: grid;
    /* IMMER 4 Spalten = 2 Zeilen (4+3) - vermeidet dass die 7. Box
       durch overflow:hidden abgeschnitten wird wenn das Panel nicht
       breit genug fuer alle 7 nebeneinander ist. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: clamp(6px, 1.5vh, 14px);
}
.gb-stat {
    background: var(--sc-bg-light);
    padding: clamp(4px, 1.2vh, 12px) clamp(3px, 0.6cqi, 8px);
    border-radius: 6px;
    text-align: center;
    min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 2px;
    container-type: inline-size;
}
.gb-stat-label {
    color: var(--sc-text-muted);
    /* Deutlich groessere Labels - cqi-Cap 28% der Box-Breite */
    font-size: min(clamp(0.7rem, 1.8vh, 1.15rem), 28cqi);
    line-height: 1.05;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    hyphens: none;
    letter-spacing: 0.3px;
}
.gb-stat-value {
    font-weight: 700;
    font-family: var(--sc-score-font);
    /* Groessere Werte, 38cqi reicht um '62.6' unterzubringen ohne abzuschneiden */
    font-size: min(clamp(1rem, 2.6vh, 1.8rem), 38cqi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Ab 5+ Teams: EXPLIZIT 2+ Zeilen (Grid-Spalten) statt 1-zeilig.
   Font-Groessen kommen aus den Basis-Regeln (cqi-basiert) - damit
   skaliert die Zahl automatisch so klein wie noetig. */
.gb-teams[data-teams="5"] .gb-team-stats,
.gb-teams[data-teams="6"] .gb-team-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}
.gb-teams[data-teams="7"] .gb-team-stats,
.gb-teams[data-teams="8"] .gb-team-stats {
    /* 7 Stats in 3 Spalten -> 3 Zeilen (3+3+1) - gibt jedem Label
       genug horizontalen Platz bei schmalen Panels. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}
.gb-teams[data-teams="5"] .gb-stat,
.gb-teams[data-teams="6"] .gb-stat,
.gb-teams[data-teams="7"] .gb-stat,
.gb-teams[data-teams="8"] .gb-stat {
    padding: 2px 3px;
}

.gb-legs-between {
    align-self: center;
    font-family: var(--sc-score-font);
    font-size: 1.1rem;
    color: var(--sc-text-muted);
    text-align: center;
    padding: 0 8px;
    min-width: 60px;
}

/* Mini-History im Team-Panel (nur bei 3+ Teams aktiv) - letzte 2 Wuerfe */
.gb-team-mini-history {
    margin-top: clamp(4px, 1vh, 10px);
    padding-top: clamp(4px, 0.8vh, 8px);
    border-top: 1px solid var(--sc-border);
    display: flex; flex-direction: column;
    gap: clamp(2px, 0.7vh, 6px);
}
/* Im Scorer-Game-View: Mini-History als HORIZONTALE Reihe von 3 Pills
   unter dem Restscore. Nur die geworfene Punktzahl. Klickbar zum
   Korrigieren. Belegt minimal Hoehe damit der Restscore in der Mitte
   gross bleibt. */
body.scorer-body[data-view="game"] .gb-team-mini-history {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px solid var(--sc-border);
    max-height: none !important;
    overflow: visible !important;
}
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-row {
    cursor: pointer;
    padding: 4px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 44px;
}
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-scored {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sc-accent);
}
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-remaining,
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-darts {
    display: none !important;
}
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-row:hover,
body.scorer-body[data-view="game"] .gb-team-mini-history .gb-mini-row:active {
    background: rgba(0,229,255,0.18);
    border-color: var(--sc-accent);
}
.gb-mini-row {
    display: flex; justify-content: space-between;
    align-items: baseline;
    font-family: var(--sc-score-font);
    padding: clamp(2px, 0.6vh, 5px) 4px;
    border-radius: 4px;
    background: var(--sc-bg-light);
}
.gb-mini-scored {
    color: var(--sc-accent);
    font-weight: 700;
    font-size: min(clamp(0.8rem, 1.8vh, 1.2rem), 18cqi);
}
.gb-mini-remaining {
    color: var(--sc-text-muted);
    font-size: min(clamp(0.7rem, 1.4vh, 1rem), 15cqi);
}
/* Kumulative Darts-Anzahl - nur im Zuschauer-Modus sichtbar, sonst leer.
   Game-View zeigt stattdessen .gb-mini-remaining (Restscore). */
.gb-mini-darts {
    display: none;
    color: var(--sc-text-muted);
    font-size: min(clamp(0.7rem, 1.4vh, 1rem), 15cqi);
}
body.scorer-body[data-view="presentation"] .gb-mini-remaining {
    display: none;
}
body.scorer-body[data-view="presentation"] .gb-mini-darts {
    display: inline;
    /* gleiche Schriftgroesse wie der Score-Wert, damit "100 / 3" optisch
       gleichgewichtig wirkt - Zuschauer interessiert die Dart-Zahl genauso */
    color: var(--sc-text-muted);
    font-size: min(clamp(1.2rem, 3.6vh, 3.2rem), 20cqi);
    font-weight: 700;
}
/* Zuschauer-Mode: Bestleistungs-Stats ausgeblendet, dadurch frei werdender
   Platz fuer die letzten 5 Wuerfe -> die Score-Zahlen koennen deutlich
   groesser werden, Restzahl bleibt als Sub-Info kleiner. */
body.scorer-body[data-view="presentation"] .gb-team-stats {
    display: none !important;
}
body.scorer-body[data-view="presentation"] .gb-mini-row {
    padding: clamp(8px, 2vh, 18px) clamp(10px, 1.6vw, 22px);
    border-radius: 10px;
}
body.scorer-body[data-view="presentation"] .gb-mini-scored {
    font-size: min(clamp(1.8rem, 5.5vh, 5rem), 30cqi);
    font-weight: 800;
    line-height: 1;
}
body.scorer-body[data-view="presentation"] .gb-mini-remaining {
    font-size: min(clamp(1rem, 2.6vh, 2rem), 14cqi);
    line-height: 1;
}
.gb-legs-between .gb-legs-num {
    font-size: 2rem; font-weight: 700; color: var(--sc-text);
}
.gb-swap-starter {
    margin-top: 8px;
    background: rgba(0,229,255,0.12);
    border: 1px solid rgba(0,229,255,0.45);
    color: var(--sc-text);
    border-radius: var(--sc-radius-sm);
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, transform 0.08s;
}
.gb-swap-starter:hover { background: rgba(0,229,255,0.22); }
.gb-swap-starter:active { transform: scale(0.96); }
/* Im Zuschauer-Modus ausblenden - dort ist der Wechsel-Knopf irrelevant */
body.scorer-body[data-view="presentation"] .gb-swap-starter {
    display: none !important;
}

/* Checkout hint */
.gb-checkout {
    background: rgba(0,184,148,0.12);
    border: 1px solid var(--sc-success);
    border-radius: var(--sc-radius-sm);
    padding: 8px 12px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--sc-success);
    margin-top: 4px;
}
.gb-checkout-label { color: var(--sc-text-muted); margin-right: 6px; }

/* Score History (mittig) */
.gb-history {
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 6px 8px;
    /* Nimmt Platz den gb-main uebrig hat; JS fitHistoryToSpace()
       blendet alte Rows aus wenn es nicht reinpasst. */
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}
.gb-history-row.gb-hidden { display: none; }
.gb-history-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    font-family: var(--sc-score-font);
    padding: 2px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.gb-history-row.finished-leg { text-decoration: line-through; color: var(--sc-text-muted); }
.gb-history-scored { color: var(--sc-accent); font-weight: 700; }
.gb-history-remaining { color: var(--sc-text); font-weight: 700; }
.gb-history-center { color: var(--sc-text-muted); font-size: 0.8rem; }

/* Split-Layout: Shortcuts links + Numpad rechts, beide fuellen Raum */
.gb-input-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Shortcut-Grid: 3 Spalten x dynamische Zeilen, Buttons sind gross */
.gb-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 4px;
    min-height: 0;
    min-width: 0;
}
.gb-shortcut {
    background: var(--sc-bg-light);
    border: 1.5px solid var(--sc-border);
    color: var(--sc-text);
    padding: 0;
    border-radius: var(--sc-radius-sm);
    font-weight: 700;
    font-family: var(--sc-score-font);
    font-size: clamp(1.6rem, 7vmin, 4rem);
    cursor: pointer;
    transition: var(--sc-transition);
    min-height: 48px;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
}
.gb-shortcut:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.gb-shortcut:active { transform: scale(0.95); }
.gb-shortcut[data-value="180"] { border-color: var(--sc-accent); color: var(--sc-accent); }

/* Input-Row kompakt */
.gb-input-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    padding: 4px 10px;
    flex: 0 0 auto;
}
.gb-input-label { color: var(--sc-text-muted); font-size: clamp(0.75rem, 1.4vh, 0.9rem); }
.gb-input-display {
    flex: 1; font-family: var(--sc-score-font);
    font-size: clamp(2rem, 5.5vh, 3.5rem); font-weight: 800;
    color: var(--sc-accent); text-align: right;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.35);
}
.gb-undo-btn {
    background: var(--sc-warning); color: #222;
    border: 0; border-radius: 6px;
    /* doppelt so breit + fetteres Pfeil-Symbol */
    padding: 6px 20px;
    min-width: 56px;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.gb-finish-btn {
    background: var(--sc-success); color: #fff;
    border: 0; border-radius: 6px;
    padding: 6px 10px; font-weight: 700; cursor: pointer;
}

.gb-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 Spalten statt 4 - kein 1x/2x mehr */
    grid-template-rows: repeat(4, 1fr);       /* 4 Zeilen */
    gap: 4px;
    min-height: 0;
    min-width: 0;
}
.gb-numpad button {
    background: var(--sc-bg-light);
    border: 1.5px solid var(--sc-border);
    color: var(--sc-text);
    padding: 0;
    font-size: clamp(2rem, 9vmin, 6rem);   /* noch groesser - ganze Flaeche nutzen */
    font-family: var(--sc-score-font);
    font-weight: 700;
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    transition: var(--sc-transition);
    min-height: 50px;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
}
.gb-numpad button:hover { border-color: var(--sc-accent); }
.gb-numpad button:active { transform: scale(0.97); background: var(--sc-accent-soft); }
.gb-numpad .gb-key-ok {
    background: var(--sc-accent); color: #fff; border-color: var(--sc-accent);
    grid-row: span 2;
}
.gb-numpad .gb-key-back {
    background: var(--sc-bg-dark);
}
.gb-numpad .gb-key-clear {
    background: var(--sc-bg-dark); font-size: 1rem;
}

/* ============================================================ */
/* CRICKET-SPEZIFISCH                                           */
/* ============================================================ */
.cricket-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.cricket-col {
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: 10px;
}
.cricket-center {
    background: var(--sc-bg-dark);
    border-radius: var(--sc-radius);
    padding: 10px;
    text-align: center;
    min-width: 80px;
}
.cricket-row {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--sc-score-font);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cricket-target { font-weight: 700; font-size: 1.1rem; color: var(--sc-text); min-width: 32px; text-align: center; }
.cricket-marks { display: flex; gap: 4px; }
.cricket-mark {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--sc-bg-light); border: 1px solid var(--sc-border);
}
.cricket-mark.hit { background: var(--sc-accent); border-color: var(--sc-accent); }
.cricket-mark.closed { background: var(--sc-success); border-color: var(--sc-success); }
.cricket-points { margin-left: auto; font-weight: 700; color: var(--sc-accent); }

/* ============================================================ */
/* STATS / PLAYERS / SETTINGS                                   */
/* ============================================================ */
.stat-tabs, .sp-tabs {
    display: flex; gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--sc-border);
}
.stat-tab, .sp-tab {
    background: transparent;
    border: 0; color: var(--sc-text-muted);
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 600;
}
.stat-tab.active, .sp-tab.active {
    color: var(--sc-accent);
    border-bottom-color: var(--sc-accent);
}

.stat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.stat-card {
    background: var(--sc-bg-light);
    padding: 12px; border-radius: var(--sc-radius-sm);
    text-align: center;
}
.stat-card-label { color: var(--sc-text-muted); font-size: 0.8rem; }
.stat-card-value {
    font-family: var(--sc-score-font);
    font-size: 1.6rem; font-weight: 700;
    color: var(--sc-accent);
    margin-top: 4px;
}
.stat-table {
    width: 100%; border-collapse: collapse; margin-top: 8px;
}
.stat-table th, .stat-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sc-border);
    text-align: left;
    font-size: 0.88rem;
}
.stat-table th {
    background: var(--sc-bg-light);
    color: var(--sc-text-muted);
    font-weight: 600;
}

/* ============================================================ */
/* TOAST / MODAL                                                */
/* ============================================================ */
.scorer-toast {
    position: fixed;
    bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
    background: var(--sc-bg-card); border: 1px solid var(--sc-accent);
    color: var(--sc-text);
    padding: 10px 18px; border-radius: var(--sc-radius);
    font-weight: 600;
    z-index: 500;
    opacity: 0; transition: all var(--sc-transition);
    pointer-events: none;
    max-width: 90vw;
}
.scorer-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.scorer-toast.success { border-color: var(--sc-success); }
.scorer-toast.error   { border-color: var(--sc-danger);  }

.scorer-modal {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 300;
}
.sm-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.7);
}
.sm-dialog {
    position: relative;
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: 0 10px 40px var(--sc-shadow);
    max-width: 90vw; width: 420px;
    max-height: 90vh; overflow: hidden;
    display: flex; flex-direction: column;
}
.sm-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sc-border);
    display: flex; align-items: center; justify-content: space-between;
}
.sm-title { font-weight: 700; font-size: 1.05rem; }
.sm-close {
    background: transparent; border: 0;
    color: var(--sc-text-muted); font-size: 1.6rem;
    cursor: pointer; width: 32px; height: 32px;
}
.sm-body { padding: 16px 18px; overflow-y: auto; }
.sm-footer {
    padding: 12px 18px; border-top: 1px solid var(--sc-border);
    display: flex; gap: 10px; justify-content: flex-end;
}

/* ============================================================ */
/* RESPONSIVE - Home / Karten                                   */
/* ============================================================ */
@media (min-width: 900px) {
    .scorer-main { padding: 20px 20px 60px; max-width: 1400px; }
}
@media (max-width: 500px) {
    .sh-card { padding: 14px 16px; }
    .sh-icon { font-size: 1.5rem; width: 40px; }
    .sh-label { font-size: 0.95rem; }
}

/* ============================================================ */
/* TASTATUR-Shortcuts (F1-F9) - zeigen nur wenn echte Tastatur  */
/* wahrscheinlich ist (Landscape + breit) oder Maus vorhanden    */
/* ============================================================ */
.gb-fnkeys {
    display: none;
    gap: 4px; flex-wrap: wrap; margin-top: 6px;
    font-size: 0.75rem;
    color: var(--sc-text-muted);
    padding: 4px 8px;
    background: var(--sc-bg-dark);
    border-radius: 6px;
}
/* Nur anzeigen auf breiten Desktops mit Maus - auf schmaleren Fenstern
   waeren sie eh nicht sinnvoll nutzbar und wuerden nur Platz fressen. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) and (min-height: 700px) {
    .gb-fnkeys { display: flex; }
}
.gb-fnkey { padding: 2px 6px; background: var(--sc-bg-light); border-radius: 4px; }
.gb-fnkey b { color: var(--sc-accent); margin-right: 4px; }

/* ============================================================ */
/* TRAINING - 12 Modi-Kacheln + Setup + Active + Statistik     */
/* ============================================================ */
.training-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(8px, 1.5vw, 16px);
    margin: 16px 0;
}
.training-tile {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    text-align: left;
    color: var(--sc-text);
    min-height: 130px;
}
.training-tile:hover {
    transform: translateY(-2px);
    border-color: var(--sc-accent);
    background: rgba(233, 69, 96, 0.06);
}
.training-tile .tt-icon { font-size: 2rem; line-height: 1; }
.training-tile .tt-name { font-weight: 700; font-size: 1rem; }
.training-tile .tt-desc { font-size: 0.82rem; color: var(--sc-text-muted); line-height: 1.35; }

.th-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin: 10px 0 16px;
}
.th-stats, .th-runs { margin: 12px 0; }
.th-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.th-table th, .th-table td { padding: 6px 10px; border-bottom: 1px solid var(--sc-border); text-align: left; }
.th-table th { color: var(--sc-text-muted); font-weight: 600; }
.th-h3 { margin: 16px 0 8px; font-size: 1rem; color: var(--sc-text-muted); }
.th-run { padding: 8px 12px; margin: 6px 0; background: var(--sc-bg-card); border-radius: var(--sc-radius-sm); }
.th-run-line { font-size: 0.92rem; }
.th-run-score { color: var(--sc-accent); font-weight: 700; }
.th-empty, .th-loading, .th-error { padding: 16px; color: var(--sc-text-muted); text-align: center; }

[data-view="training-active"] {
    padding: clamp(8px, 2vw, 18px);
    color: var(--sc-text);
}
.ta-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    position: sticky;
    top: 0;
    background: var(--sc-bg-card);
    padding: 10px 12px;
    border-radius: var(--sc-radius-sm);
    z-index: 10;
}
.ta-header .ta-icon { font-size: 1.6rem; }
.ta-header .ta-title { font-weight: 700; font-size: 1.2rem; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-home-btn {
    padding: 10px 16px;
    border-radius: var(--sc-radius-sm);
    background: transparent;
    border: 1px solid var(--sc-border);
    color: var(--sc-text);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 44px;
}
.ta-home-btn:hover { background: var(--sc-bg-light); border-color: var(--sc-accent); color: var(--sc-accent); }
.ta-abort {
    padding: 10px 16px;
    border-radius: var(--sc-radius-sm);
    background: rgba(214, 48, 49, 0.1);
    border: 1px solid var(--sc-danger);
    color: var(--sc-danger);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    min-height: 44px;
}
.ta-abort:hover { background: var(--sc-danger); color: #fff; }
.ta-abort:active { transform: scale(0.96); }

.ta-engine { background: var(--sc-bg-card); border-radius: var(--sc-radius); padding: 18px; margin-bottom: 14px; }
.tg-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.tg-stat { flex: 1 1 80px; min-width: 80px; background: var(--sc-bg-light); padding: 10px; border-radius: var(--sc-radius-sm); text-align: center; }
.tg-stat.tg-mini { flex: 1 1 50px; min-width: 50px; padding: 6px; }
.tg-stat-label { font-size: 0.72rem; color: var(--sc-text-muted); text-transform: uppercase; }
.tg-stat-value { font-family: var(--sc-score-font); font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 700; color: var(--sc-text); }
.tg-progress { height: 6px; background: var(--sc-bg-light); border-radius: 3px; overflow: hidden; margin: 12px 0 6px; }
.tg-progress-bar { height: 100%; background: var(--sc-accent); transition: width .25s ease; }
.tg-input-hint { font-size: 0.92rem; color: var(--sc-text-muted); margin-top: 8px; }
.tg-done { padding: 12px; background: rgba(0, 184, 148, 0.08); border-left: 3px solid var(--sc-success); border-radius: var(--sc-radius-sm); margin-top: 10px; }
.tg-done.tg-bust { background: rgba(214, 48, 49, 0.1); border-left-color: var(--sc-danger); }

.ta-controls { background: var(--sc-bg-card); border-radius: var(--sc-radius); padding: 16px; }
.ti-counter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ti-counter .ti-label { font-weight: 600; }
.ti-counter .ti-num { flex: 1; min-width: 100px; padding: 10px; font-size: 1.1rem; background: var(--sc-bg-light); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); color: var(--sc-text); }
.ti-segbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.ti-segbtns.ti-grid2 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ti-btn {
    padding: 14px 12px;
    background: var(--sc-bg-light);
    color: var(--sc-text);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--sc-transition);
    min-height: 48px;
}
.ti-btn:hover { background: var(--sc-bg-card); border-color: var(--sc-accent); }
.ti-btn.ti-miss   { color: var(--sc-text-muted); }
.ti-btn.ti-single { color: #74b9ff; }
.ti-btn.ti-double { color: #ffeaa7; }
.ti-btn.ti-triple { color: var(--sc-accent); }
.ti-btn.ti-hit    { color: var(--sc-success); border-color: var(--sc-success); }
.ti-jdc { display: flex; flex-direction: column; gap: 8px; }
.ti-jdc-row { display: flex; align-items: center; gap: 8px; }
.ti-jdc-row input { width: 60px; padding: 6px; background: var(--sc-bg-light); border: 1px solid var(--sc-border); border-radius: 4px; color: var(--sc-text); text-align: center; }
.ti-jdc-flag { display: flex; align-items: center; gap: 6px; }

.ta-finish-card { padding: 20px; background: rgba(0, 184, 148, 0.06); border: 1px solid var(--sc-success); border-radius: var(--sc-radius); }
.ta-finish-title { font-size: 1.3rem; font-weight: 700; color: var(--sc-success); margin-bottom: 10px; }
.ta-finish-stats { background: var(--sc-bg-light); padding: 10px; border-radius: var(--sc-radius-sm); font-family: var(--sc-score-font); font-size: 0.85rem; max-height: 200px; overflow-y: auto; }
.ta-finish-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ============================================================ */
/* TRAINING - Multiplayer (1-4 Spieler) Setup + Player-Bar      */
/* ============================================================ */
.tsetup-players {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
}
.tsp-row { display: flex; gap: 6px; }
.tsp-input { flex: 1; }
.tsp-remove {
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid var(--sc-border);
    color: var(--sc-text-muted);
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
}
.tsp-remove:hover { color: var(--sc-danger); border-color: var(--sc-danger); }

/* Player-Bar in der aktiven Trainings-View */
.tg-mp-section { margin-bottom: 10px; }
.tg-mp-players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.tg-mp-player {
    padding: 10px 12px;
    background: var(--sc-bg-light);
    border: 2px solid transparent;
    border-radius: var(--sc-radius-sm);
    text-align: center;
    position: relative;
    transition: var(--sc-transition);
}
.tg-mp-player.active {
    border-color: var(--sc-accent);
    background: rgba(233, 69, 96, 0.08);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.3);
}
.tg-mp-player.done {
    opacity: 0.6;
    border-color: var(--sc-success);
}
.tg-mp-name {
    font-size: 0.85rem; font-weight: 600;
    color: var(--sc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-mp-score {
    font-family: var(--sc-score-font);
    font-size: 1.5rem; font-weight: 700;
    color: var(--sc-accent);
    line-height: 1.1;
}
.tg-mp-flag {
    font-size: 0.65rem; color: var(--sc-success);
    margin-top: 2px; font-weight: 700; letter-spacing: 1px;
}
.tg-mp-current-label {
    font-size: 0.95rem; color: var(--sc-text-muted);
    margin: 6px 0 12px; text-align: center;
}
.tg-mp-current-label strong { color: var(--sc-accent); }
.tg-mp-engine { background: var(--sc-bg-light); padding: 12px; border-radius: var(--sc-radius-sm); }

/* Finish-Card mit Winner-Anzeige */
.ta-finish-winner {
    font-size: 1.1rem;
    padding: 10px;
    background: rgba(255, 215, 0, 0.08);
    border-radius: var(--sc-radius-sm);
    margin: 8px 0;
}
.ta-finish-winner strong { color: gold; }
.ta-finish-players {
    display: flex; flex-direction: column; gap: 4px;
    margin: 8px 0;
}
.ta-fp {
    display: flex; justify-content: space-between;
    padding: 8px 12px;
    background: var(--sc-bg-light);
    border-radius: var(--sc-radius-sm);
}
.ta-fp-name { font-weight: 600; }
.ta-fp-score { font-family: var(--sc-score-font); color: var(--sc-accent); font-weight: 700; }
.ta-finish-details { margin-top: 10px; }
.ta-finish-details summary { cursor: pointer; color: var(--sc-text-muted); font-size: 0.9rem; }

/* Spieler-Autocomplete im Training-Setup */
.tsp-input-wrap { position: relative; flex: 1; }
.tsp-suggest {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 50;
    background: var(--sc-bg-card);
    border: 1px solid var(--sc-border);
    border-top: 0;
    border-radius: 0 0 var(--sc-radius-sm) var(--sc-radius-sm);
    max-height: 240px; overflow-y: auto;
    box-shadow: 0 8px 24px var(--sc-shadow);
}
.tsp-sugg-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--sc-border);
    font-size: 0.9rem;
}
.tsp-sugg-item:last-child { border-bottom: 0; }
.tsp-sugg-item:hover { background: var(--sc-bg-light); }
.tsp-sugg-item strong { color: var(--sc-text); }
.tsp-sugg-item em { color: var(--sc-accent); font-style: normal; font-size: 0.85rem; }
.tsp-sugg-meta { color: var(--sc-text-muted); font-size: 0.78rem; margin-left: 6px; }

/* ============================================================ */
/* TRAINING NUMPAD - identisch zum 501-Numpad (gross + griffig)  */
/* ============================================================ */
.tr-input-wrap {
    display: flex; flex-direction: column;
    gap: clamp(6px, 1vh, 12px);
}
.tr-input-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--sc-bg-light);
    border-radius: var(--sc-radius-sm);
    padding: 8px 12px;
}
.tr-input-label {
    font-size: 0.9rem; color: var(--sc-text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.tr-input-display {
    flex: 1;
    text-align: right;
    font-family: var(--sc-score-font);
    font-size: clamp(1.6rem, 4vh, 2.4rem);
    font-weight: 700;
    color: var(--sc-accent);
    line-height: 1;
}
.tr-clr-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--sc-text-muted);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-weight: 600;
}
.tr-clr-btn:hover { color: var(--sc-danger); border-color: var(--sc-danger); }

.tr-input-grids {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(6px, 1vw, 12px);
    min-height: 0;
}
@media (max-width: 600px) {
    .tr-input-grids { grid-template-columns: 1fr; }
}
.tr-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: stretch;
}
.tr-shortcut {
    padding: clamp(10px, 2.5vh, 18px) 8px;
    background: var(--sc-bg-light);
    color: var(--sc-text);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-family: var(--sc-score-font);
    font-size: clamp(1rem, 2.4vh, 1.4rem);
    font-weight: 700;
    min-height: 52px;
    transition: var(--sc-transition);
}
.tr-shortcut:hover {
    background: var(--sc-bg-card);
    border-color: var(--sc-accent);
    color: var(--sc-accent);
}
.tr-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.tr-numpad button {
    padding: clamp(12px, 2.8vh, 22px) 8px;
    background: var(--sc-bg-light);
    color: var(--sc-text);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    cursor: pointer;
    font-family: var(--sc-score-font);
    font-size: clamp(1.4rem, 3.5vh, 2rem);
    font-weight: 700;
    min-height: 60px;
    transition: var(--sc-transition);
}
.tr-numpad button:hover {
    background: var(--sc-bg-card);
    border-color: var(--sc-accent);
}
.tr-numpad button:active { transform: scale(0.97); }
.tr-numpad .tr-key-back {
    background: rgba(214, 48, 49, 0.08);
    color: var(--sc-danger);
    border-color: rgba(214, 48, 49, 0.3);
}
.tr-numpad .tr-key-ok {
    background: var(--sc-accent);
    color: #fff;
    border-color: var(--sc-accent);
    font-size: clamp(1.1rem, 2.8vh, 1.5rem);
}
.tr-numpad .tr-key-ok:hover {
    background: var(--sc-accent-hover, #c83650);
}

/* Kategorie-Buttons (Miss/S/D/T, Hit/Miss, Outcome) GROESSER */
.ti-segbtns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.ti-segbtns.ti-grid2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ti-btn {
    padding: clamp(16px, 3vh, 26px) 12px !important;
    min-height: 64px !important;
    font-size: clamp(1.05rem, 2.6vh, 1.4rem) !important;
    font-weight: 700 !important;
    border-width: 2px !important;
}

/* Versions-Badge im Training-Header (zeigt SW-Cache-Name) */
.ta-ver {
    font-size: 0.65rem;
    color: var(--sc-text-muted);
    background: var(--sc-bg-light);
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
    font-family: monospace;
}

/* Versions-Badge im Haupt-Header (immer sichtbar) */
.scorer-ver-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--sc-text-muted);
    background: var(--sc-bg-light);
    padding: 3px 10px;
    border-radius: 12px;
    margin: 0 8px;
    font-family: monospace;
    border: 1px solid var(--sc-border);
}