/* live_scoring.css: het uiterlijk van het scoringsscherm.

   Gedeeld door templates/live_scoring.html (echte wedstrijd) en
   templates/oefen_scoring.html (oefenmodus), net als de markup in
   partials/scoring_scherm.html en de engine in js/live_scoring_engine.js.
   Wijzig hier dus niets dat maar op een van beide pagina's mag gelden. */

/* ═══════════════════════════════════════════════════════════════
   LIVE SCORING: STADIUM DARK UI  |  Nederlandse Honkbal App
═══════════════════════════════════════════════════════════════ */

:root {
  --ls-bg:        #060c18;
  --ls-surface:   #0b1528;
  --ls-card:      #0f1d36;
  --ls-card-2:    #162540;
  --ls-brand:     #1e3c72;
  --ls-brand-2:   #2a5298;
  --ls-gold:      #f5c518;
  --ls-gold-glow: rgba(245,197,24,.3);
  --ls-red:       #e63946;
  --ls-green:     #2dc653;
  --ls-border:    rgba(255,255,255,.1);
  --ls-border-2:  rgba(255,255,255,.18);
  --ls-text:      #dce8ff;
  --ls-muted:     rgba(220,232,255,.74);
  --ls-fg:        #ffffff;
  /* De werperskaart draagt als enige een eigen kleur, kop en vlak.
     Zie het blok "WERPERSKAART" verderop waarom dat hier mag. */
  --ls-pitch:     #5a3a9e;
  --ls-pitch-2:   #43297a;
  --ls-pitch-3:   #6b35c5;
  --ls-pitch-4:   #3a1578;
  --ls-pitch-rand: #c084fc;
}

/* ══════════════════════════════
   LIGHT THEME
══════════════════════════════ */
[data-ls-theme="light"] {
  --ls-bg:        #f0f4f9;
  --ls-surface:   #e2eaf5;
  --ls-card:      #ffffff;
  --ls-card-2:    #eef3ff;
  --ls-brand:     #1e3c72;
  --ls-brand-2:   #2a5298;
  --ls-gold:      #b8860b;
  --ls-gold-glow: rgba(184,134,11,.3);
  --ls-red:       #c0392b;
  --ls-green:     #1a7a3c;
  --ls-border:    rgba(30,60,114,.14);
  --ls-border-2:  rgba(30,60,114,.26);
  --ls-text:      #0f1e3c;
  --ls-muted:     rgba(15,30,60,.68);
  --ls-fg:        #0f1e3c;
  --ls-pitch:     #5a3a9e;
  --ls-pitch-2:   #43297a;
  --ls-pitch-3:   #6b35c5;
  --ls-pitch-4:   #3a1578;
  --ls-pitch-rand: #c084fc;
}

/* ════════════════════════════════════════
   LIGHT: Page & Hero
════════════════════════════════════════ */
[data-ls-theme="light"] body.live-scoring-active { background: var(--ls-bg) !important; }

/* Hero card: clean branded navy - licht maar nog steeds stijlvol */
[data-ls-theme="light"] .live-hero-card {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,255,255,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
    linear-gradient(150deg, #1e3c72 0%, #2a5298 55%, #3a62b8 100%) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 8px 32px rgba(30,60,114,.25), 0 2px 8px rgba(30,60,114,.15) !important;
}
/* Top glitter-lijn witter op blauwe achtergrond */
[data-ls-theme="light"] .live-hero-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 40%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.5) 60%, transparent) !important;
}
/* Hero topbar scheiding */
[data-ls-theme="light"] .hero-top-bar { border-bottom-color: rgba(255,255,255,.18) !important; }
[data-ls-theme="light"] .hero-meta-inline { color: rgba(220,232,255,.75) !important; }

/* Hero scores & labels: wit op navy achtergrond */
[data-ls-theme="light"] .hero-score-display        { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.25) !important; }
[data-ls-theme="light"] .hero-score-display.leading { color: #ffd566 !important; text-shadow: 0 0 30px rgba(255,213,102,.4) !important; }
[data-ls-theme="light"] .hero-team-name             { color: rgba(220,232,255,.8) !important; }
[data-ls-theme="light"] .hero-team-label            { color: rgba(220,232,255,.6) !important; }
[data-ls-theme="light"] .hero-inning-num            { color: #ffffff !important; }
[data-ls-theme="light"] .hero-inning-half           { color: #ffd566 !important; }
[data-ls-theme="light"] .hero-inning-badge {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.28) !important;
}
[data-ls-theme="light"] .hero-vs {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(220,232,255,.65) !important;
}

/* ════════════════════════════════════════
   LIGHT: Card headers: branded navy op alle blokken
════════════════════════════════════════ */
[data-ls-theme="light"] .ls-dark-card > .card-header,
[data-ls-theme="light"] .scoreboard-card > .card-header,
[data-ls-theme="light"] .bso-card > .card-header,
[data-ls-theme="light"] .line-score-dark > .card-header,
[data-ls-theme="light"] .field-card > .card-header,
[data-ls-theme="light"] .controls-card > .card-header,
[data-ls-theme="light"] .batter-card > .card-header {
  background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
[data-ls-theme="light"] .card-header h5,
[data-ls-theme="light"] .card-header h6 { color: #ffffff !important; }

/* ════════════════════════════════════════
   LIGHT: Card bodies: wit, lichte navy schaduwen
════════════════════════════════════════ */
[data-ls-theme="light"] .ls-dark-card,
[data-ls-theme="light"] .scoreboard-card,
[data-ls-theme="light"] .bso-card,
[data-ls-theme="light"] .line-score-dark,
[data-ls-theme="light"] .field-card {
  background: #ffffff !important;
  border: 1px solid rgba(30,60,114,.13) !important;
  box-shadow: 0 2px 16px rgba(30,60,114,.08), 0 1px 4px rgba(30,60,114,.06) !important;
}
[data-ls-theme="light"] .ls-dark-card > .card-body,
[data-ls-theme="light"] .scoreboard-card > .card-body,
[data-ls-theme="light"] .bso-card > .card-body,
[data-ls-theme="light"] .field-card > .card-body { background: #ffffff !important; }

/* ════════════════════════════════════════
   LIGHT: Scoreboard teksten & nummers
════════════════════════════════════════ */
[data-ls-theme="light"] .score-display              { color: var(--ls-text) !important; text-shadow: none !important; }
[data-ls-theme="light"] .score-display.text-success { color: #1a7a3c !important; }
[data-ls-theme="light"] .scoreboard-card .text-info { color: #2a5298 !important; }
[data-ls-theme="light"] .team-name                  { color: rgba(15,30,60,.55) !important; }
/* Slagvolgorde - light mode correcties */
[data-ls-theme="light"] .lineup-number { color: #1e3c72 !important; }
/* AVG-kleur: cyan is te licht op wit achtergrond */
[data-ls-theme="light"] .avg-good { color: #0a7d9e !important; }
/* Spelverloop hover zichtbaar op wit */
[data-ls-theme="light"] .play-item:hover { background: rgba(30,60,114,.05) !important; }
[data-ls-theme="light"] .lineup-player:hover {
  background: rgba(30,60,114,.1) !important;
  border-color: var(--ls-brand) !important;
}
[data-ls-theme="light"] .lineup-player:hover .lineup-player-name,
[data-ls-theme="light"] .lineup-player:hover .lineup-player-details { color: var(--ls-text) !important; }

[data-ls-theme="light"] .ls-dark-card .text-muted   { color: var(--ls-muted) !important; }
/* Tabellen in ls-dark-card - licht thema */
[data-ls-theme="light"] .ls-dark-card .table {
  --bs-table-bg:           #ffffff;
  --bs-table-color:        #0f1e3c;
  --bs-table-border-color: rgba(30,60,114,.1);
  --bs-table-striped-bg:   rgba(30,60,114,.03);
  --bs-table-hover-bg:     rgba(30,60,114,.05);
  color: #0f1e3c;
}
[data-ls-theme="light"] .ls-dark-card .table td { color: #0f1e3c !important; border-color: rgba(30,60,114,.1) !important; }
[data-ls-theme="light"] .ls-dark-card .table tr.table-dark td,
[data-ls-theme="light"] .ls-dark-card .table tr.table-dark th { color: #ffffff !important; }
[data-ls-theme="light"] .ls-dark-card .table-dark {
  --bs-table-bg:           #1e3c72;
  --bs-table-color:        #ffffff;
  --bs-table-border-color: rgba(255,255,255,.15);
  color: #ffffff !important;
}
[data-ls-theme="light"] .ls-dark-card .table-light {
  --bs-table-bg:           rgba(30,60,114,.07);
  --bs-table-color:        #0f1e3c;
  --bs-table-border-color: rgba(30,60,114,.12);
  color: #0f1e3c !important;
}
/* Card headers in light mode: uniforme navy stijl */
[data-ls-theme="light"] .ls-dark-card .card-header.bg-info,
[data-ls-theme="light"] .ls-dark-card .card-header.bg-success,
[data-ls-theme="light"] .ls-dark-card .card-header.bg-warning {
  background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

/* Inning display */
[data-ls-theme="light"] .inning-display {
  background: rgba(30,60,114,.05) !important;
  border: 1px solid rgba(30,60,114,.12) !important;
}
[data-ls-theme="light"] .inning-display .text-warning { color: #1e3c72 !important; }
[data-ls-theme="light"] .inning-number                { color: #2a5298 !important; }

/* ════════════════════════════════════════
   LIGHT: Count (BSO) nummers & dots
════════════════════════════════════════ */
[data-ls-theme="light"] .count-label               { color: var(--ls-muted) !important; }
[data-ls-theme="light"] .count-number.text-warning { color: #1e3c72 !important; }
[data-ls-theme="light"] .count-number.text-info    { color: #2a5298 !important; }
[data-ls-theme="light"] .count-number.text-danger  { color: #c0392b !important; }
[data-ls-theme="light"] .bso-dot.b-off { border-color: rgba(30,60,114,.3) !important; }
[data-ls-theme="light"] .bso-dot.s-off { border-color: rgba(192,57,43,.3) !important; }
[data-ls-theme="light"] .bso-dot.o-off { border-color: rgba(60,80,120,.25) !important; }

/* ════════════════════════════════════════
   LIGHT: Nav tabs
════════════════════════════════════════ */
[data-ls-theme="light"] .nav-tabs.nav-fill        { background: #ffffff !important; border-color: rgba(30,60,114,.13) !important; }
[data-ls-theme="light"] .nav-tabs .nav-link       { color: var(--ls-muted) !important; }
[data-ls-theme="light"] .nav-tabs .nav-link:hover { background: rgba(30,60,114,.07) !important; color: var(--ls-text) !important; }

/* ════════════════════════════════════════
   LIGHT: Line score tabel
════════════════════════════════════════ */
[data-ls-theme="light"] .line-score-table thead th {
  background: rgba(30,60,114,.05) !important;
  color: var(--ls-text) !important;
  border-color: rgba(30,60,114,.1) !important;
}
[data-ls-theme="light"] .line-score-table td                   { border-color: rgba(30,60,114,.07) !important; color: var(--ls-text) !important; }
[data-ls-theme="light"] .line-score-table .team-name           { color: var(--ls-text) !important; background: rgba(30,60,114,.03) !important; }
[data-ls-theme="light"] .line-score-table .inning-score        { color: var(--ls-text) !important; }
[data-ls-theme="light"] .line-score-table .away-team-row td,
[data-ls-theme="light"] .line-score-table .home-team-row td    { background: #ffffff !important; }
[data-ls-theme="light"] .line-score-table tbody tr:hover td    { background: rgba(30,60,114,.04) !important; }
[data-ls-theme="light"] .line-score-table .inning-not-played   { background: rgba(30,60,114,.02) !important; color: rgba(15,30,60,.4) !important; }
[data-ls-theme="light"] .line-score-table .inning-score.current-inning { background: rgba(184,134,11,.14) !important; color: #6b4a00 !important; border-color: rgba(184,134,11,.5) !important; }
[data-ls-theme="light"] .line-score-table .total-runs          { color: #7a5800 !important; background: rgba(184,134,11,.08) !important; border-left-color: rgba(184,134,11,.25) !important; }
[data-ls-theme="light"] .line-score-table .total-hits          { background: rgba(30,60,114,.03) !important; border-left-color: rgba(30,60,114,.1) !important; }
[data-ls-theme="light"] .line-score-table .total-errors        { background: rgba(192,57,43,.04) !important; }
[data-ls-theme="light"] .line-score-table th.bg-primary        { background: rgba(30,60,114,.12) !important; color: #0f1e3c !important; }
[data-ls-theme="light"] .line-score-table th.bg-info           { background: rgba(42,82,152,.1) !important; color: #1e3c72 !important; }
[data-ls-theme="light"] .line-score-table th.bg-warning        { background: rgba(184,134,11,.1) !important; color: #7a5800 !important; }
[data-ls-theme="light"] .line-score-dark .card-footer          { background: rgba(30,60,114,.03) !important; color: var(--ls-muted) !important; border-top: 1px solid rgba(30,60,114,.1) !important; }

/* ════════════════════════════════════════
   LIGHT: Overige elementen
════════════════════════════════════════ */
[data-ls-theme="light"] #potentialOutsIndicator .alert-warning {
  background: rgba(184,134,11,.07) !important;
  border-color: rgba(184,134,11,.28) !important;
  color: #7a5800 !important;
}

/* ════════════════════════════════════════
   LIGHT: Knoppenkaart: labels en randknoppen

   De kopjes boven de knopgroepen en de randknoppen zijn gekozen voor een
   donkere kaart. In het lichte thema is die kaart wit, en dan staat er licht
   amber op wit: een verhouding van 1,3 op 1, terwijl 4,5 de ondergrens is.
   Op papier stond het label er wel, in de praktijk las niemand het.

   Dezelfde kleuren, maar dan de donkere variant die de huisstijl voor het
   lichte thema gebruikt. De vlakjes eronder blijven zoals ze waren, zodat de
   groepen nog steeds uit elkaar te houden zijn op kleur.
════════════════════════════════════════ */
[data-ls-theme="light"] .ctrl-title.count-t   { background: rgba(184,134,11,.14) !important; color: #7a5800 !important; }
[data-ls-theme="light"] .ctrl-title.hits-t    { background: rgba(26,122,60,.12)  !important; color: #14632f !important; }
[data-ls-theme="light"] .ctrl-title.outs-t    { background: rgba(184,134,11,.12) !important; color: #7a5800 !important; }
[data-ls-theme="light"] .ctrl-title.special-t { background: rgba(13,110,140,.12)  !important; color: #0b5c73 !important; }
[data-ls-theme="light"] .ctrl-title.pitcher-t { background: rgba(192,57,43,.12)  !important; color: #a32f22 !important; }

/* Een randknop op de witte kaart: Bootstrap zet hier zijn eigen amber neer, en
   dat is op wit net zo onleesbaar als de labels hierboven waren. */
[data-ls-theme="light"] .controls-card .btn-outline-warning {
  color: #7a5800 !important;
  border-color: rgba(184,134,11,.55) !important;
  background: rgba(184,134,11,.08) !important;
}
[data-ls-theme="light"] .controls-card .btn-outline-warning:hover {
  background: rgba(184,134,11,.2) !important;
}

/* De wisselknop van de werperskaart staat niet op wit maar op paars, in alle
   drie de thema's. Die regel staat daarom bij de kaart zelf, niet hier. */

/* ════════════════════════════════════════
   LIGHT: Slagman (batter) kaart  (premium stijl)
════════════════════════════════════════ */
[data-ls-theme="light"] .batter-card {
  background: linear-gradient(145deg, #1a3060 0%, #2756b8 55%, #1e3c72 100%) !important;
  border: none !important;
  border-top: 3px solid #f0c040 !important;
  box-shadow: 0 8px 32px rgba(30,60,114,.38), 0 2px 8px rgba(30,60,114,.22) !important;
}
[data-ls-theme="light"] .batter-card > .card-body { background: transparent !important; }
[data-ls-theme="light"] .jersey-number {
  color: #f0c040 !important;
  text-shadow: 0 0 22px rgba(240,192,64,.5), 0 2px 4px rgba(0,0,0,.3) !important;
}
[data-ls-theme="light"] .batter-name {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
}
[data-ls-theme="light"] .batter-position { color: rgba(255,255,255,.7) !important; }
[data-ls-theme="light"] .batter-stats {
  background: rgba(255,255,255,.11) !important;
  color: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  backdrop-filter: blur(6px) !important;
}
[data-ls-theme="light"] .batter-stats .text-muted,
[data-ls-theme="light"] .batter-card .text-muted { color: rgba(255,255,255,.6) !important; }

/* ══════════════════════════════════════════════════
   COLORBLIND THEME  (deuteranopia / protanopia safe)
   Palet gebaseerd op Wong 2011 + IBM accessible:
     🟡 Gold   #e69f00  balls / warning
     🟠 Orange #d55e00  strikes / danger
     🔵 Blue   #0072b2  success / wins
     🩵 Sky    #56b4e9  outs / info  ← nieuw, duidelijk onderscheidbaar
══════════════════════════════════════════════════ */
[data-ls-theme="colorblind"] {
  --ls-red:       #d55e00;
  --ls-green:     #0072b2;
  --ls-gold:      #e69f00;
  --ls-gold-glow: rgba(230,159,0,.35);
  /* Blauwpaars naast marineblauw is precies het onderscheid dat bij
     deuteranopie en protanopie wegvalt. Het roodpaars van Okabe-Ito blijft
     wel apart van de blauwe koppen. */
  --ls-pitch:     #8e4069;
  --ls-pitch-2:   #6d2f50;
  /* De lichtste stop van het kaartverloop bepaalt de leesbaarheid. Het eerst
     gekozen #a34f7e gaf daar 3,9 op 1 voor de labels; #8e4069 haalt 4,8. */
  --ls-pitch-3:   #8e4069;
  --ls-pitch-4:   #5c2743;
  --ls-pitch-rand: #e9a3c5;
}

/* - BSO dots: alle drie kleuren nu volledig onderscheidbaar - */
[data-ls-theme="colorblind"] .bso-dot.b-on  { border-color: #e69f00 !important; background: #e69f00 !important; box-shadow: 0 0 9px rgba(230,159,0,.85) !important; }
[data-ls-theme="colorblind"] .bso-dot.s-on  { border-color: #d55e00 !important; background: #d55e00 !important; box-shadow: 0 0 9px rgba(213,94,0,.85) !important; }
[data-ls-theme="colorblind"] .bso-dot.o-on  { border-color: #56b4e9 !important; background: #56b4e9 !important; box-shadow: 0 0 9px rgba(86,180,233,.85) !important; }
[data-ls-theme="colorblind"] .bso-dot.b-off { border-color: rgba(230,159,0,.32) !important; }
[data-ls-theme="colorblind"] .bso-dot.s-off { border-color: rgba(213,94,0,.32) !important; }
[data-ls-theme="colorblind"] .bso-dot.o-off { border-color: rgba(86,180,233,.32) !important; }

/* - Tekst utility-klassen - */
[data-ls-theme="colorblind"] .text-success  { color: #0072b2 !important; }
[data-ls-theme="colorblind"] .text-danger   { color: #d55e00 !important; }
[data-ls-theme="colorblind"] .text-warning  { color: #e69f00 !important; }
[data-ls-theme="colorblind"] .text-info     { color: #56b4e9 !important; }

/* - Badge achtergronden (win/verlies, status, DH, etc.) - */
[data-ls-theme="colorblind"] .badge.bg-success,
[data-ls-theme="colorblind"] .bg-success    { background-color: #0072b2 !important; }
[data-ls-theme="colorblind"] .badge.bg-danger,
[data-ls-theme="colorblind"] .bg-danger     { background-color: #d55e00 !important; }

/* - Knoppen - */
[data-ls-theme="colorblind"] .btn-success            { background-color: #0072b2 !important; border-color: #005a8f !important; }
[data-ls-theme="colorblind"] .btn-danger             { background-color: #d55e00 !important; border-color: #aa4b00 !important; }
[data-ls-theme="colorblind"] .btn-outline-success    { color: #56b4e9 !important; border-color: #0072b2 !important; }
[data-ls-theme="colorblind"] .btn-outline-danger     { color: #f5925a !important; border-color: #d55e00 !important; }

/* - ctrl-title labels (hits = groen → blauw; pitcher = rood → oranje) -

   De knoppenkaart is in dit thema donker, net als in het donkere thema: dit
   thema zet alleen de accentkleuren om en laat de ondergrond staan. Hier stonden
   daarom de donkere tinten van het lichte thema, donkerbruin op donkerblauw, met
   een contrast van 1,8 op 1. Nu de lichte varianten van dezelfde Wong-kleuren. */
/* Vijf groepen, vijf kleuren die ook zonder kleurwaarneming uit elkaar te
   houden zijn (Okabe-Ito). Hier stonden eerst twee keer goud en twee keer
   lichtblauw: het contrast klopte, maar de kleurcodering die de groepen uit
   elkaar moet houden deed niets, en dat is in dit thema juist de bedoeling. */
[data-ls-theme="colorblind"] .ctrl-title.count-t   { background: rgba(230,159,0,.16) !important; color: #ffc85c !important; }
[data-ls-theme="colorblind"] .ctrl-title.hits-t    { background: rgba(0,114,178,.22) !important; color: #7cc7f5 !important; }
[data-ls-theme="colorblind"] .ctrl-title.outs-t    { background: rgba(213,94,0,.20)  !important; color: #ff9d5c !important; }
[data-ls-theme="colorblind"] .ctrl-title.special-t { background: rgba(204,121,167,.22) !important; color: #efaed0 !important; }
[data-ls-theme="colorblind"] .ctrl-title.pitcher-t { background: rgba(86,180,233,.18) !important; color: #8fd3f7 !important; }

/* En de randknop op diezelfde donkere kaart. */
[data-ls-theme="colorblind"] .controls-card .btn-outline-warning {
  color: #ffc85c !important;
  border-color: rgba(230,159,0,.6) !important;
  background: rgba(230,159,0,.1) !important;
}
[data-ls-theme="colorblind"] .controls-card .btn-outline-warning:hover {
  background: rgba(230,159,0,.22) !important;
}

/* box score / pitching headers: groen → blauw, rood → oranje */
[data-ls-theme="colorblind"] .card-header.bg-success { background: linear-gradient(90deg, #0072b2, #005a8f) !important; }
[data-ls-theme="colorblind"] .card-header.bg-danger  { background: linear-gradient(90deg, #d55e00, #aa4b00) !important; }

/* ═══════════════════════
   PAGE DARK BACKGROUND
═══════════════════════ */
body.live-scoring-active {
  background: var(--ls-bg) !important;
}
body.live-scoring-active .breadcrumb {
  background: transparent;
}
body.live-scoring-active .breadcrumb-item a {
  color: var(--ls-muted);
  text-decoration: none;
}
body.live-scoring-active .breadcrumb-item a:hover { color: var(--ls-text); }
body.live-scoring-active .breadcrumb-item.active  { color: var(--ls-muted); }
body.live-scoring-active .breadcrumb-item + .breadcrumb-item::before { color: var(--ls-muted); }

/* ═══════════════════════
   LIVE BADGE
═══════════════════════ */
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }
@keyframes liveRing  { 0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.8)} 60%{box-shadow:0 0 0 10px rgba(230,57,70,0)} }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ls-red);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem 1rem .3rem .75rem;
  border-radius: 50px;
  animation: liveRing 2.2s ease-in-out infinite;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: livePulse 1s ease-in-out infinite;
}

.testmode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,193,7,.2);
  border: 1px solid rgba(255,193,7,.5);
  color: #f5c518;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 50px;
}

/* ═══════════════════════
   HERO HEADER
═══════════════════════ */
.live-hero-card {
  background:
    radial-gradient(ellipse at 12% 60%, rgba(30,60,114,.75) 0%, transparent 45%),
    radial-gradient(ellipse at 88% 60%, rgba(42,82,152,.65) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 0%, rgba(245,197,24,.07) 0%, transparent 60%),
    linear-gradient(180deg, #0e1d3a 0%, var(--ls-bg) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
.live-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--ls-brand) 15%, var(--ls-gold) 50%, var(--ls-brand) 85%, transparent 100%);
  opacity: .85;
}
.live-hero-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ls-border-2), transparent);
}
.live-hero-card .card-body {
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* ── Hero Top Bar ── */
.hero-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1.25rem .6rem;
  border-bottom: 1px solid var(--ls-border);
}
.hero-meta-inline {
  font-size: .72rem;
  color: var(--ls-muted);
  letter-spacing: .04em;
}
.hero-meta-inline i { opacity: .6; }

/* ── Theme Toggle ── */
.theme-toggle-group {
  display: flex;
  gap: 3px;
  align-items: center;
}
.theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--ls-border-2);
  background: rgba(255,255,255,.06);
  color: var(--ls-muted);
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  padding: 0;
  line-height: 1;
}
.theme-btn:hover {
  background: rgba(255,255,255,.14);
  color: var(--ls-text);
  border-color: var(--ls-border-2);
}
.theme-btn.active {
  background: var(--ls-brand);
  color: #fff;
  border-color: var(--ls-brand-2);
  box-shadow: 0 2px 8px rgba(30,60,114,.5);
}

/* ── Hero Score Row ── */
.hero-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem 1rem;
  gap: 1rem;
}
.hero-team-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
}
.hero-center-col {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.hero-vs {
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .25em;
  color: var(--ls-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ls-border);
  border-radius: 6px;
  padding: .25rem .5rem;
  text-transform: uppercase;
}

/* ── Club Logos ── */
.hero-logo-wrap {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.12),
    0 0 0 6px var(--ls-brand),
    0 10px 40px rgba(0,0,0,.55),
    0 0 50px rgba(30,60,114,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-logo-wrap:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.25),
    0 0 0 6px var(--ls-brand-2),
    0 14px 50px rgba(0,0,0,.65),
    0 0 70px rgba(42,82,152,.6);
}
.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-logo-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ls-brand);
  color: var(--ls-gold);
  font-size: 1.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero team/score */
.hero-team-name {
  font-size: clamp(.72rem, 2vw, .9rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ls-muted);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
}
.hero-score-display {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--ls-fg);
  line-height: 1;
  letter-spacing: -5px;
  text-shadow:
    0 0 50px rgba(255,255,255,.1),
    0 4px 12px rgba(0,0,0,.6);
  transition: color .35s, text-shadow .35s;
}
.hero-score-display.leading {
  color: var(--ls-gold);
  text-shadow:
    0 0 40px var(--ls-gold-glow),
    0 4px 12px rgba(0,0,0,.6);
}
.hero-team-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ls-muted);
  display: block;
}

/* Hero inning badge in center */
.hero-inning-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ls-brand);
  border: 1px solid var(--ls-border-2);
  border-radius: 10px;
  padding: .4rem .65rem;
  gap: 1px;
  min-width: 62px;
}
.hero-inning-half {
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ls-gold);
  display: block;
}
.hero-inning-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: block;
}

/* ═══════════════════════
   LINE SCORE
═══════════════════════ */
.line-score-dark {
  background: var(--ls-card) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.line-score-dark > .card-header {
  background: linear-gradient(90deg, var(--ls-card-2), var(--ls-card)) !important;
  border-bottom: 1px solid var(--ls-border) !important;
}
.line-score-dark > .card-header h5 { color: #fff !important; }
.line-score-dark > .card-body { padding: 0 !important; }
.line-score-table {
  font-size: .88rem;
  margin: 0;
  background: transparent;
}
.line-score-table thead th {
  background: rgba(255,255,255,.04) !important;
  color: var(--ls-muted) !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-color: rgba(255,255,255,.06) !important;
  padding: .55rem .45rem;
}
.line-score-table td {
  background: var(--ls-card) !important;
  color: var(--ls-text) !important;
  border-color: rgba(255,255,255,.06) !important;
  text-align: center;
  padding: .65rem .5rem;
  vertical-align: middle;
}
.line-score-table .team-header { text-align: left !important; }
.line-score-table .team-name {
  text-align: left !important;
  font-weight: 700 !important;
  color: var(--ls-text) !important;
  background: rgba(255,255,255,.025) !important;
  padding-left: .6rem !important;
  min-width: 110px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-score-table .team-header {
  min-width: 110px;
  max-width: 140px;
}
.line-score-table .total-runs {
  color: var(--ls-gold) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  background: rgba(245,197,24,.12) !important;
  border-left: 1px solid rgba(245,197,24,.2) !important;
}
.line-score-table .total-hits   { background: rgba(255,255,255,.03) !important; border-left: 1px solid var(--ls-border) !important; }
.line-score-table .total-errors { background: rgba(230,57,70,.05) !important; }
.line-score-table th.bg-primary { background: rgba(30,60,114,.4) !important; color: rgba(220,232,255,.8) !important; }
.line-score-table th.bg-info    { background: rgba(13,202,240,.2) !important; color: #6edff6 !important; }
.line-score-table th.bg-warning { background: rgba(245,197,24,.2) !important; color: var(--ls-gold) !important; }
.line-score-table .inning-score.current-inning {
  background: rgba(245,197,24,.18) !important;
  border: 1px solid rgba(245,197,24,.5) !important;
  color: #ffc107 !important;
  font-weight: 700 !important;
}
.line-score-table .inning-not-played { background: rgba(255,255,255,.015) !important; color: var(--ls-muted) !important; }
.line-score-table .extra-inning        { background: rgba(245,197,24,.07) !important; }
.line-score-table .extra-inning-header { background: rgba(30,60,114,.2) !important; color: #6ea8fe !important; }
.line-score-table .away-team-row td,
.line-score-table .home-team-row td    { background: var(--ls-card) !important; }
.line-score-table tbody tr:hover td    { background: rgba(255,255,255,.04) !important; }
.line-score-dark .card-footer {
  background: rgba(255,255,255,.025) !important;
  border-top: 1px solid var(--ls-border) !important;
  color: var(--ls-muted) !important;
}

/* ═══════════════════════
   TAB NAVIGATION
═══════════════════════ */
.nav-tabs.nav-fill {
  background: var(--ls-card) !important;
  border-radius: 12px !important;
  padding: .3rem !important;
  border: 1px solid var(--ls-border) !important;
  gap: 3px;
}
.nav-tabs.nav-fill .nav-item { flex: 1; }
.nav-tabs .nav-link {
  color: var(--ls-muted) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600;
  font-size: .82rem;
  transition: all .2s ease;
  padding: .6rem .75rem;
  text-align: center;
  background: transparent;
}
.nav-tabs .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--ls-text) !important;
}
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-2)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 14px rgba(30,60,114,.6) !important;
}

/* ═══════════════════════
   DARK CARD BASE
═══════════════════════ */
.ls-dark-card {
  background: var(--ls-card) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.ls-dark-card > .card-header {
  background: linear-gradient(135deg, var(--ls-card-2), var(--ls-card)) !important;
  border-bottom: 1px solid var(--ls-border) !important;
}
.ls-dark-card > .card-header h5,
.ls-dark-card > .card-header h6 { color: #fff !important; }
.ls-dark-card > .card-body { background: transparent !important; }
.ls-dark-card .text-muted { color: var(--ls-muted) !important; }
/* Tabellen in ls-dark-card - donker thema */
.ls-dark-card .table {
  --bs-table-bg:          var(--ls-card);
  --bs-table-color:       var(--ls-text);
  --bs-table-border-color: var(--ls-border);
  --bs-table-striped-bg:  rgba(255,255,255,.03);
  --bs-table-hover-bg:    rgba(255,255,255,.05);
  color: var(--ls-text);
}
.ls-dark-card .table-dark {
  --bs-table-bg:          var(--ls-card-2);
  --bs-table-color:       rgba(220,232,255,.88);
  --bs-table-border-color: var(--ls-border);
}
.ls-dark-card .table-light {
  --bs-table-bg:          var(--ls-card-2);
  --bs-table-color:       var(--ls-muted);
  --bs-table-border-color: var(--ls-border);
  color: var(--ls-muted);
}
/* header kleuren in dark mode behouden (bg-info / bg-success / bg-warning) */
.ls-dark-card .card-header.bg-info    { background: linear-gradient(90deg, #0dcaf0, #0aa2c0) !important; }
.ls-dark-card .card-header.bg-success { background: linear-gradient(90deg, #198754, #146c43) !important; }
.ls-dark-card .card-header.bg-warning { background: linear-gradient(90deg, #6f42c1, #5a329a) !important; color: #fff !important; }

/* ═══════════════════════
   SETTINGS CARD: inner rows theme-aware
═══════════════════════ */
.settings-card .ls-toggle-row,
.settings-card .ls-timer-row {
  border-color: var(--ls-border) !important;
  background: var(--ls-card-2) !important;
}
[data-ls-theme="light"] .settings-card .ls-toggle-row,
[data-ls-theme="light"] .settings-card .ls-timer-row {
  border-color: rgba(30,60,114,.15) !important;
  background: rgba(30,60,114,.04) !important;
}
[data-ls-theme="light"] .settings-card .text-muted { color: var(--ls-muted) !important; }

/* ═══════════════════════
   SCOREBOARD CARD
═══════════════════════ */
.scoreboard-card {
  background: linear-gradient(145deg, var(--ls-bg), var(--ls-card)) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.scoreboard-card > .card-header {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--ls-border) !important;
}
.scoreboard-card > .card-header h5 { color: #fff !important; }
.scoreboard-card > .card-body { background: transparent !important; }
.score-section  { padding: .75rem .35rem; }
.team-name {
  font-size: clamp(.6rem, 2vw, .78rem);
  font-weight: 800;
  color: var(--ls-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .25rem;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.2;
}
.score-display {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--ls-fg);
  text-shadow: 0 0 20px rgba(255,255,255,.1);
  line-height: 1;
  letter-spacing: -2px;
}
.game-info-center { padding: .6rem .25rem; }
.inning-display {
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .7rem .5rem;
  border: 1px solid var(--ls-border);
}
.inning-display .text-warning {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.inning-number {
  font-size: 2rem;
  font-weight: 900;
  color: #ffc107;
  line-height: 1;
  margin: .15rem 0;
}

/* ═══════════════════════
   BSO COUNT CARD
═══════════════════════ */
.bso-card {
  background: var(--ls-card) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.bso-card > .card-header {
  background: linear-gradient(135deg, var(--ls-card-2), var(--ls-card)) !important;
  border-bottom: 1px solid var(--ls-border) !important;
}
.bso-card > .card-header h5 { color: #fff !important; }
.bso-card > .card-body { background: transparent !important; }
.count-item { padding: .65rem .5rem 1rem; }
.count-number {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
}
.count-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ls-muted);
  margin-top: .25rem;
}
.bso-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.bso-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid;
  transition: all .18s ease;
}
.bso-dot.b-off { border-color: rgba(255,193,7,.28);   background: transparent; }
.bso-dot.b-on  { border-color: #ffc107; background: #ffc107; box-shadow: 0 0 9px rgba(255,193,7,.85); }
.bso-dot.s-off { border-color: rgba(230,57,70,.28);   background: transparent; }
.bso-dot.s-on  { border-color: var(--ls-red); background: var(--ls-red); box-shadow: 0 0 9px rgba(230,57,70,.85); }
.bso-dot.o-off { border-color: rgba(173,181,189,.25); background: transparent; }
.bso-dot.o-on  { border-color: #adb5bd; background: #adb5bd; box-shadow: 0 0 7px rgba(173,181,189,.7); }

/* ═══════════════════════
   CONTROLS CARD
═══════════════════════ */
.controls-card {
  background: var(--ls-card) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.controls-card > .card-header {
  background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-2)) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.controls-card > .card-header h5 { color: #fff !important; }
.controls-card > .card-body { background: transparent !important; }
.ctrl-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 6px;
  margin-bottom: .65rem;
}
.ctrl-title.count-t   { background: rgba(255,193,7,.15);  color: #ffd45a; }
.ctrl-title.hits-t    { background: rgba(45,198,83,.15);   color: #5ee680; }
.ctrl-title.outs-t    { background: rgba(255,193,7,.12);   color: #ffd060; }
.ctrl-title.special-t { background: rgba(13,202,240,.15);  color: #6edff6; }
.ctrl-title.pitcher-t { background: rgba(230,57,70,.15);   color: #ff8088; }

/* ═══════════════════════
   TIER TOGGLE KNOPPEN
═══════════════════════ */
.tier-toggle-btn {
  background: rgba(220,232,255,.06);
  border: 1px solid var(--ls-border-2);
  color: var(--ls-text);
  border-radius: 8px;
  padding: .45rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
  margin-bottom: .35rem;
}
.tier-toggle-btn:hover,
.tier-toggle-btn:focus { background: rgba(220,232,255,.12); color: var(--ls-text); box-shadow: none; }
.tier-toggle-btn[aria-expanded="true"] { background: rgba(42,82,152,.25); border-color: var(--ls-brand-2); }
.tier-toggle-btn[aria-expanded="true"] .tier-chevron { transform: rotate(90deg); }
.tier-chevron { transition: transform .2s ease; font-size: .7rem; opacity: .7; }
.tier-toggle-btn--rare { border-color: rgba(255,193,7,.25); }
/* De hint rechts op de knop is een opsomming van wat eronder zit. Staat de
   band open, dan staat die opsomming er als knoppen onder en is de tekst
   dubbelop. Hij mag ook altijd krimpen tot het beletselteken. */
.tier-toggle-btn > span:first-child { flex: 0 0 auto; }
.tier-toggle-btn .tier-hint { min-width: 0; flex: 0 1 auto; }
.tier-toggle-btn[aria-expanded="true"] .tier-hint { display: none !important; }
/* Het telbolletje op de uitklapknop droeg opacity .7. Dat maakt het grijs van
   Bootstrap (#6c757d) lichter tot ongeveer #949ba1 terwijl de tekst wit blijft:
   gemeten 2,74 op 1 in het lichte thema en 3,58 in het kleurenblinde. Nu een
   eigen grijs zonder doorzichtigheid, donker genoeg voor witte tekst. */
.tier-count-badge {
  font-size: .65rem;
  padding: .15em .45em;
  background-color: #5c636a !important;
  color: #fff !important;
}
.tier-hint { font-size: .7rem; font-style: italic; }

/* De extra spelen liggen als een band over de volle breedte, onder de knop die
   ze tevoorschijn haalt. Ze stonden eerder tweemaal anders: in een
   eigen rij van vier kolommen waarvan er twee leeg bleven (alles wat je
   opendeed verscheen rechts in beeld), en daarna onderaan de kolom van hun
   soort (Outs en Speciaal groeiden naar negen en tien knoppen terwijl Count en
   Hits er drie en vier hielden, met een leeg vlak linksonder).

   Een band leest rustiger: vier knoppen op een regel, even breed als de kolom
   erboven, en de hele kaart blijft zeven rijen hoog in plaats van tien. Wat
   voor soort spel het is staat in de kleur van de knop, niet meer in de kolom
   waar hij onder hangt. */
.tier-band {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: .5rem;
}
.pitcher-actions-live-badge { font-size: .65rem; vertical-align: middle; animation: pulseRed 2s infinite; }
[data-ls-theme="light"] .tier-toggle-btn { background: rgba(30,60,114,.05); color: var(--ls-text); }
[data-ls-theme="light"] .tier-toggle-btn[aria-expanded="true"] { background: rgba(42,82,152,.1); }

/* ═══════════════════════
   BATTER CARD
═══════════════════════ */
.batter-card {
  background: linear-gradient(145deg, var(--ls-card), var(--ls-card-2)) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.batter-card > .card-header {
  background: linear-gradient(90deg, var(--ls-brand), var(--ls-brand-2)) !important;
  border: none !important;
}
.batter-card > .card-header h6 { color: #fff !important; }
/* Zelfde lange kiezer als bij de werperskaart: body.theme-dark .card-body in
   main.css schildert anders het verloop van de kaart weer dicht. Dat viel hier
   niet op omdat het verloop van deze kaart dicht bij dat vlak ligt, maar het
   maakte de kaart wel plat. */
body.live-scoring-active .ls-scherm .batter-card > .card-body { background: transparent !important; }
.batter-info { padding: 1rem .75rem; text-align: center; }
.jersey-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--ls-gold);
  text-shadow: 0 0 20px var(--ls-gold-glow);
  line-height: 1;
}
.batter-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: .35rem 0 .15rem;
}
.batter-position {
  font-size: .78rem;
  color: var(--ls-muted);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.batter-stats {
  margin-top: .65rem;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.07);
  border-radius: 8px;
  color: rgba(220,232,255,.75);
  font-size: .82rem;
}
.batter-stats .text-muted,
.batter-card .text-muted   { color: rgba(220,232,255,.55) !important; }
/* text-primary is donkerblauw (#0d6efd) - onzichtbaar op donker navy */
.batter-card .text-primary { color: #6ea8fe !important; }

/* ═══════════════════════
   PITCHER CARD
═══════════════════════ */
/* ── WERPERSKAART ────────────────────────────────────────────────────
   Deze kaart draagt als enige een eigen vlak, net als de slagmankaart ernaast:
   de twee kaarten die zeggen wie er nu staat mogen eruit springen tussen de
   kaarten die knoppen en cijfers dragen.

   Dat vlak is eerder weggehaald, en met reden: het kostte ruim twintig regels
   die elke tekst erin met de hand wit forceerden (.text-dark werd wit, strong
   werd wit, small werd wit), in twee sets, één per thema. De oorzaak zat niet
   in het vlak maar in de engine: die schreef Bootstrap-klassen voor een lichte
   ondergrond (.text-dark, .text-muted) in een kaart die donker is. Dat is bij
   de bron opgelost, zie updateCurrentPitcherDisplay() in
   static/js/live_scoring_engine.js: de statwaarden dragen nu .ls-werper-cijfer
   en .ls-werper-zacht.

   Wat hier overblijft is één set regels die in alle drie de thema's hetzelfde
   is, want het vlak is in alle drie donkerpaars. Nieuwe tekst in deze kaart
   erft de witte kleur vanzelf; er valt niets meer na te lopen. */
/* Twee klassen in de kiezer, en dat is geen slordigheid: main.css zet
   [data-ls-theme="light"] .card { background: var(--ls-card) !important }, en
   daar wint een enkele .pitcher-card het niet van. De slagmankaart lost dat
   hetzelfde op, met [data-ls-theme="light"] .batter-card. */
.ls-scherm .pitcher-card {
  background: linear-gradient(145deg, var(--ls-pitch-4) 0%, var(--ls-pitch-3) 55%, var(--ls-pitch-2) 100%) !important;
  border: none !important;
  border-top: 3px solid var(--ls-pitch-rand) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(58,21,120,.32), 0 2px 8px rgba(58,21,120,.2) !important;
}
.pitcher-card > .card-header {
  background: linear-gradient(135deg, var(--ls-pitch), var(--ls-pitch-2)) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}
.pitcher-card > .card-header h6 { color: #fff !important; }
/* Weer een lange kiezer, en om dezelfde reden: main.css zet
   body.theme-dark .card-body { background-color: #1e293b !important }. Dat is
   één typeselector meer dan .pitcher-card > .card-body, dus dat wint, en dan
   schildert het kaartlichaam het paars van de kaart gewoon weer dicht. */
body.live-scoring-active .ls-scherm .pitcher-card > .card-body {
  background: transparent !important;
  color: #fff;
}
/* De twee klassen die de engine zelf zet. Zacht is niet lichter maar minder
   fel: op de lichtste stop van het verloop haalt .78 wit 5,0 op 1 (paars) en
   4,8 (roodpaars in het kleurenblindthema). De kiezer is weer lang omdat
   main.css body.theme-dark small { color: #94a3b8 !important } zet, en dat is
   precies het element waar .ls-werper-zacht meestal op staat. */
body.live-scoring-active .ls-scherm .pitcher-card .ls-werper-cijfer { color: #fff !important; }
body.live-scoring-active .ls-scherm .pitcher-card .ls-werper-zacht  { color: rgba(255,255,255,.78) !important; }
.pitcher-info  { padding: 1rem; text-align: center; }
.pitcher-name  { font-size: 1.05rem; font-weight: 800; color: #fff; margin: .35rem 0 .15rem; }
.pitcher-stats { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin-top: .75rem; }
.pitcher-stat-item {
  flex: 0 0 32%;
  background: rgba(255,255,255,.13);
  border-radius: 8px;
  padding: .55rem .45rem;
  margin-bottom: .4rem;
  border: 1px solid rgba(255,255,255,.2);
}
.pitcher-stat-value { font-size: 1.1rem; font-weight: 800; color: #fff; }
.pitcher-stat-label { font-size: .7rem; text-transform: uppercase; color: rgba(255,255,255,.78); letter-spacing: .4px; }

/* De kaart is in alle drie de thema's donkerpaars, dus dit is één set regels
   en niet drie. Het rugnummer en de wisselknop dragen het goud dat ook op de
   slagmankaart staat; #ffd97a haalt op de lichtste stop van het verloop 5,2
   op 1, het donkerder #f0c040 bleef daar onder de norm voor kleine tekst. */
body.live-scoring-active .ls-scherm .pitcher-card h5     { color: #fff !important; }
/* Geen regel op strong. De statlabels dragen zelf .ls-werper-zacht, en een
   regel op strong zou ook de "Let op!" in de waarschuwing hieronder wit maken:
   die staat op een lichtgeel vlak en werd dan onleesbaar. */
body.live-scoring-active .ls-scherm .pitcher-card .jersey-number {
  color: #f0c040 !important;
  text-shadow: 0 0 20px rgba(240,192,64,.5), 0 2px 4px rgba(0,0,0,.3);
}
.pitcher-card .border-top    { border-color: rgba(255,255,255,.22) !important; }
/* Lange kiezer met opzet: verderop staat een regel voor het lichte thema die
   élke .btn-outline-warning op dit scherm donkerbruin maakt (die is voor de
   knoppen op een witte ondergrond). Op paars is donkerbruin 1,1 op 1. */
body.live-scoring-active .ls-scherm .pitcher-card .btn-outline-warning {
  color: #ffd97a !important;
  border-color: rgba(255,217,122,.6) !important;
  background: rgba(255,217,122,.1) !important;
}
body.live-scoring-active .ls-scherm .pitcher-card .btn-outline-warning:hover {
  background: rgba(255,217,122,.22) !important;
  color: #fff !important;
}
/* De waarschuwing houdt haar eigen vlak, en dat vlak volgt het thema: donker
   bruin in het donkere thema, lichtgeel in de twee andere. De tekst hoort dus
   bij het vlak en niet bij de kaart eronder. Gemeten: 1,9 op 1 als je hier één
   kleur voor alle drie neemt. */
.pitcher-card .alert-warning,
.pitcher-card .alert-warning strong,
.pitcher-card .alert-warning small { color: #ffd98a !important; }
[data-ls-theme="light"] .pitcher-card .alert-warning,
[data-ls-theme="light"] .pitcher-card .alert-warning strong,
[data-ls-theme="light"] .pitcher-card .alert-warning small,
[data-ls-theme="colorblind"] .pitcher-card .alert-warning,
[data-ls-theme="colorblind"] .pitcher-card .alert-warning strong,
[data-ls-theme="colorblind"] .pitcher-card .alert-warning small { color: #5a4300 !important; }

/* ═══════════════════════
   FIELD / DIAMOND
═══════════════════════ */
.field-card {
  background: linear-gradient(145deg, #030b04, #081508) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.field-card > .card-header {
  background: rgba(255,255,255,.05) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.field-card > .card-header h6 { color: rgba(255,255,255,.8) !important; }
.field-card:hover { transform: none !important; box-shadow: 0 2px 12px rgba(0,0,0,.3) !important; }
.diamond-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  background: transparent;
}
.field-svg { width: 100%; max-width: 520px; display: block; margin: 0 auto; }
/* Een honk bestaat uit twee vormen: de ruit die je ziet en een onzichtbaar
   klikvlak eromheen (zie .base-hit onderaan). De aanwijzer valt op de groep en
   de ruit licht op; het klikvlak kleurt nooit zelf, want dan zie je een lichte
   rechthoek van honderd pixels over het veld liggen in plaats van een honk. */
.honk-groep { cursor: pointer; }
.base-shape {
  fill: transparent;
  stroke: none;
  transition: fill .12s ease, stroke .12s ease;
}
#base1.occupied, #base2.occupied, #base3.occupied, #baseH.occupied {
  fill: #f0b000 !important;
  filter: url(#baseGlow) !important;
}
/* Leeg honk onder de aanwijzer: lichtblauw met een witte omtrek, precies zo
   groot als het honk. Een bezet honk houdt zijn goud (dat is de stand van de
   wedstrijd) en wordt alleen een tint feller. */
.honk-groep:hover .base-shape {
  fill: rgba(154,218,255,.5);
  stroke: rgba(255,255,255,.9);
  stroke-width: 5;
}
.honk-groep:hover .base-shape.occupied { fill: #ffcf3d !important; }
.runner-name {
  font-size: 28px;
  font-weight: 800;
  fill: #ffffff;
  pointer-events: none;
  letter-spacing: .3px;
}
.batter-field-name { fill: #ffe566; }
.fielder-dot {
  fill: rgba(180,220,195,0.95);
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1px;
  pointer-events: none;
}
.fielder-name-label {
  font-size: 22px;
  font-weight: 700;
  fill: #ffffff;
  pointer-events: none;
  letter-spacing: .2px;
}

/* ═══════════════════════
   QUICK ACTIONS CARD
═══════════════════════ */
.quick-actions-card {
  background: var(--ls-card) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.quick-actions-card > .card-header {
  background: #1a2e4a !important;
  border-bottom: 2px solid #2d4a7a !important;
}
.quick-actions-card > .card-header h6 { color: #e8f0ff !important; }

/* ═══════════════════════
   TIMER
═══════════════════════ */
#liveTabTimerSection {
  background: rgba(255,193,7,.06) !important;
  border: 1px solid rgba(255,193,7,.25) !important;
  border-radius: 12px !important;
}
#liveTimerDisplay  { color: var(--ls-green); }
#liveTimerLabel,
#gameTimerLabel    { color: var(--ls-muted) !important; }

/* ═══════════════════════
   POTENTIAL OUTS
═══════════════════════ */
#potentialOutsIndicator .alert-warning {
  background: rgba(255,193,7,.1) !important;
  border: 1px solid rgba(255,193,7,.28) !important;
  border-radius: 10px !important;
  color: #ffd458 !important;
}

/* ═══════════════════════
   BOX SCORE HEADERS
═══════════════════════ */
.card .card-header.bg-info    { background: linear-gradient(90deg, #0dcaf0, #0aa2c0) !important; }
.card .card-header.bg-success { background: linear-gradient(90deg, #198754, #146c43) !important; }
.card .card-header.bg-warning { background: linear-gradient(90deg, #6f42c1, #5a329a) !important; color: #fff !important; }

/* ═══════════════════════
   PLAY LOG
═══════════════════════ */
.play-log, .play-log-detailed {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--ls-border);
  border-radius: 10px;
  background: var(--ls-card);
}
.play-item {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .75rem 1rem;
  font-size: .88rem;
  transition: background .15s;
  color: var(--ls-text);
}
.play-item:hover     { background: rgba(255,255,255,.04); }
.play-item:last-child{ border-bottom: none; }
.play-timestamp  { color: var(--ls-muted); font-size: .75rem; }
.play-description{ margin: .2rem 0; }
.play-situation  { font-size: .78rem; color: var(--ls-muted); font-style: italic; }

/* ═══════════════════════
   LINEUP
═══════════════════════ */
.lineup-player {
  display: flex;
  align-items: center;
  padding: .75rem;
  margin: .4rem 0;
  background: var(--ls-card-2);
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.lineup-player:hover          { background: rgba(30,60,114,.5); border-color: var(--ls-brand); }
.lineup-player.current-batter {
  background: rgba(245,197,24,.1);
  border-color: var(--ls-gold);
  box-shadow: 0 4px 14px rgba(245,197,24,.2);
}
.lineup-number        { font-size: 1.4rem; font-weight: 800; color: #6ea8fe; margin-right: 1rem; min-width: 36px; }
.lineup-player-info   { flex-grow: 1; }
.lineup-player-name   { font-weight: 700; margin-bottom: .2rem; color: var(--ls-text); }
.lineup-player-details{ font-size: .82rem; color: var(--ls-muted); }
.lineup-jersey        { font-size: 1.1rem; font-weight: 700; color: var(--ls-green); margin-left: 1rem; min-width: 38px; text-align: center; }

/* ═══════════════════════
   HIT DIRECTION MODAL
═══════════════════════ */
.hit-direction-option {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all .15s ease;
  cursor: pointer;
}
.hit-direction-option:hover             { background: #e8f5e9; border-color: #4caf50; }
.hit-direction-option input:checked + label { color: #2e7d32; font-weight: 500; }
.hit-direction-option:has(input:checked){
  background: #e8f5e9;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,.25);
}

/* ═══════════════════════
   PLAYER SELECTION CARDS
═══════════════════════ */
.player-card {
  background: var(--ls-card-2);
  border: 2px solid var(--ls-border);
  border-radius: 10px;
  padding: 1rem;
  margin: .5rem;
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
  color: var(--ls-text);
}
.player-card:hover {
  background: rgba(30,60,114,.5);
  border-color: var(--ls-brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(30,60,114,.4);
}
.player-card.selected { background: var(--ls-brand); color: #fff; border-color: var(--ls-brand-2); }
.player-jersey { font-size: 2rem; font-weight: 900; color: var(--ls-green); }
.player-card.selected .player-jersey { color: var(--ls-gold); }
.player-card.border-warning { border: 2px solid var(--ls-gold) !important; background: rgba(245,197,24,.08) !important; }

/* ═══════════════════════
   STATUS + ALERTS
═══════════════════════ */
.status-indicator { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: .4rem; }
.status-live { background: var(--ls-red); animation: livePulse 1s infinite; }

.alert-floating {
  position: fixed; top: 20px; right: 20px; z-index: 1060;
  min-width: min(320px, calc(100vw - 2rem));
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

/* ═══════════════════════
   AVG COLORS
═══════════════════════ */
.avg-excellent { color: var(--ls-green); font-weight: 700; }
.avg-good      { color: #0dcaf0; }
.avg-average   { color: var(--ls-muted); }
.avg-poor      { color: var(--ls-red); }

/* ═══════════════════════
   GENERAL CARD / BUTTON
═══════════════════════ */
.card {
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.card.border-warning { border: 1px solid rgba(245,197,24,.45) !important; border-radius: 14px !important; }
.btn { border-radius: 10px; font-weight: 600; font-size: .875rem; transition: all .15s ease; }
.btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* ═══════════════════════
   TABLES (box score)
═══════════════════════ */
.table-responsive { border-radius: 8px; -webkit-overflow-scrolling: touch; }
.table th { font-size: .82rem; font-weight: 700; text-align: center; vertical-align: middle; }
.table td { font-size: .88rem; text-align: center; vertical-align: middle; padding: .45rem .5rem; }
.table-success { background-color: rgba(45,198,83,.15) !important; }

/* ═══════════════════════
   RESPONSIVE
═══════════════════════ */

/* Tablet (768px-1199px): compactere hero om scrollen te beperken */
@media (min-width: 769px) and (max-width: 1199px) {
  .hero-logo-wrap { width: 72px; height: 72px; padding: 7px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 0 5px var(--ls-brand), 0 8px 24px rgba(0,0,0,.5); }
  .hero-score-display { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -3px; }
  .hero-score-row { padding: .9rem 1.25rem .75rem; gap: .75rem; }
  .hero-center-col { flex: 0 0 72px; }
  .hero-team-name { font-size: clamp(.65rem, 1.4vw, .8rem); }
}

@media (max-width: 767.98px) {
  .hero-score-display { font-size: 3rem; letter-spacing: -3px; }
  .hero-logo-wrap { width: 92px; height: 92px; padding: 8px; }
  .hero-center-col { flex: 0 0 72px; }
  .hero-score-row { padding: 1.5rem 1rem 1.25rem; gap: .75rem; }
  .score-display   { font-size: 2.2rem; }
  .inning-number   { font-size: 2rem; }
  .count-number    { font-size: 2.2rem; }
  .jersey-number   { font-size: 2.4rem; }
  .line-score-table { font-size: .75rem; }
  .line-score-table th, .line-score-table td { padding: .3rem .2rem; }
  .line-score-table .team-name,
  .line-score-table .team-header { min-width: 90px; max-width: 110px; }
  .table th, .table td { font-size: .7rem; padding: .2rem .15rem; white-space: nowrap; }

  /* Veld op mobiel */
  .field-card { overflow: hidden !important; }
  .field-card .card-body { padding: 0.5rem !important; }
  .diamond-container { padding: 0 !important; width: 100%; display: flex; justify-content: center; }
  .field-svg { width: 96% !important; height: auto !important; max-width: none !important; display: block; margin: 0 auto; }
}
@media (max-width: 576px) {
  .hero-score-display { font-size: clamp(2.4rem, 11vw, 3rem); letter-spacing: -2px; }
  .hero-logo-wrap { width: 72px; height: 72px; padding: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 0 4px var(--ls-brand), 0 6px 20px rgba(0,0,0,.5); }
  .hero-logo-fallback { font-size: 1.2rem; }
  .hero-center-col { flex: 0 0 56px; }
  .hero-score-row { padding: 1.25rem .75rem 1rem; gap: .5rem; }
  .hero-team-name { font-size: clamp(.58rem, 3vw, .76rem); }
  .hero-top-bar { flex-direction: column; gap: .35rem; text-align: center; justify-content: center; }
  .score-display   { font-size: 1.8rem; }
  .inning-number   { font-size: 1.6rem; }
  .count-number    { font-size: 1.8rem; }
  .jersey-number   { font-size: 2rem; }
  .line-score-table { font-size: .7rem; }
  .line-score-table .team-name,
  .line-score-table .team-header { min-width: 80px; max-width: 90px; }
  .nav-tabs .nav-link { font-size: .78rem; padding: .45rem .5rem; }
  .team-name { font-size: clamp(.5rem, 2.4vw, .78rem); letter-spacing: .04em; }
  .score-section { padding: .6rem .2rem; }
  .count-number { font-size: 1.8rem; }
  .count-item { padding: .5rem .25rem .75rem; }
  .theme-btn { width: 24px; height: 24px; font-size: .62rem; }
}

/* De kaarten in het double play venster hadden geen enkele stijl: een
   combinatie die in deze situatie niet kan zag er precies zo uit als een die
   wel kan, en de gekozen kaart ook. Klikken op zo'n kaart deed dus zichtbaar
   niets, en dat is precies het soort stilte waarin je gaat twijfelen of het
   scherm nog werkt. */
.double-play-option {
    border: 1px solid var(--ls-border, rgba(0, 0, 0, .15));
    transition: border-color .15s ease, box-shadow .15s ease;
}
.double-play-option:not(.disabled):hover {
    border-color: var(--ls-brand-2, #2a5298);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.double-play-option.selected {
    border: 2px solid var(--ls-brand-2, #2a5298);
    box-shadow: 0 0 0 .2rem rgba(42, 82, 152, .25);
}
.double-play-option.disabled {
    opacity: .45;
    filter: grayscale(.6);
}
.double-play-option .dp-niet-hier {
    color: #c0392b;
    font-weight: 600;
}

/* Runner Context Menu */
.runner-ctx-menu {
    background: var(--ls-card, #1a2a1a);
    border: 1px solid var(--ls-border, rgba(255,255,255,.15));
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    z-index: 9999;
    min-width: 200px;
    max-width: 240px;
    padding: 0;
    overflow: hidden;
    /* Het menu krijgt van het script nooit meer hoogte dan het venster. Past de
       inhoud niet (een telefoon liggend heeft zo'n 390 pixels), dan blijft de
       kop staan en scrollen de knoppen eronder. */
    display: flex;
    flex-direction: column;
}
.runner-ctx-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .4rem;
    padding: .6rem .75rem;
    background: linear-gradient(135deg, var(--ls-brand, #1e3c72) 0%, var(--ls-brand-2, #2a5298) 100%);
    color: #fff;
    font-size: .85rem;
}
.runner-ctx-header .btn-close { filter: invert(1); opacity: .8; margin-left: auto; flex-shrink: 0; }
.runner-ctx-body {
    padding: .6rem .75rem .75rem;
    overflow-y: auto;
    min-height: 0;
}
.runner-ctx-body .btn { font-size: .8rem; min-height: 36px; text-align: left; }


/* ══════════════════════════════════════════════════════════════════
   Verwijzing naar de oefenmodus, boven aan het scoringsscherm.

   Geen text-white-50 en geen text-warning: die staan vast en werden in het
   lichte thema wit op wit. Deze kleuren volgen het thema, en de link houdt
   een streep zodat hij ook zonder kleurverschil als link te herkennen is.
══════════════════════════════════════════════════════════════════ */
.ls-oefen-tip {
  color: var(--ls-text);
  opacity: .82;
}

.ls-oefen-tip a {
  color: var(--ls-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
}

[data-ls-theme="dark"] .ls-oefen-tip a,
:root:not([data-ls-theme]) .ls-oefen-tip a {
  color: var(--ls-gold);
}


/* ══════════════════════════════════════════════════════════════════
   LEESBAARHEID: tekst die te licht op zijn ondergrond stond

   Gemeten met de WCAG-verhouding op de drie thema's. De ondergrens is 4,5
   op 1 voor gewone tekst en 3 op 1 voor tekst vanaf 24px (of 18,5px vet).
   Wat hieronder staat, haalde die grens niet.

   De grootste groep loste zichzelf op met een steviger --ls-muted hierboven.
   Deze blijven over, en dat zijn steeds dezelfde twee gevallen:

     1. Een kaart die in élk thema donker is (de hero, de slagman, de werper),
        met daarop een kleur die het lichte thema voor een witte kaart koos.
     2. Een accentkleur van Bootstrap (amber, blauw, grijs) die precies is
        afgestemd op de tegenovergestelde ondergrond.
══════════════════════════════════════════════════════════════════ */

/* ── Hero: de kaart is donkerblauw in alle drie de thema's ─────────── */
.hero-team-name   { color: rgba(220,232,255,.95); }
.hero-team-label  { color: rgba(220,232,255,.82); }
.hero-meta-inline { color: rgba(220,232,255,.86); }
.hero-vs          { color: rgba(220,232,255,.86); }

[data-ls-theme="light"] .hero-team-name   { color: rgba(255,255,255,.95) !important; }
[data-ls-theme="light"] .hero-team-label  { color: rgba(255,255,255,.84) !important; }
[data-ls-theme="light"] .hero-meta-inline { color: rgba(255,255,255,.88) !important; }
[data-ls-theme="light"] .hero-meta-inline a,
[data-ls-theme="light"] .hero-meta-inline a span { color: rgba(255,255,255,.92) !important; }

/* De doorzichtige vlakjes in de hero (VS en het inningblokje) lagen in het
   lichte thema wit-op-blauw, en dan verdwijnt de tekst erin. Donker maken
   geeft ze hun eigen ondergrond terug. */
[data-ls-theme="light"] .hero-vs {
  background: rgba(8,20,45,.45) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.9) !important;
}
[data-ls-theme="light"] .hero-inning-badge {
  background: rgba(8,20,45,.5) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* De knoppen in de hero-balk (delen, thema) staan op datzelfde donkerblauw,
   dus ook in het lichte thema hoort hun tekst licht te zijn. */
.hero-top-bar .theme-btn { color: rgba(255,255,255,.88); }
.hero-top-bar .theme-btn:hover { color: #fff; }
[data-ls-theme="light"] .hero-top-bar .theme-btn {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
  background: rgba(8,20,45,.42) !important;
}
[data-ls-theme="light"] .hero-top-bar .theme-btn:hover { background: rgba(8,20,45,.62) !important; color: #fff !important; }
[data-ls-theme="light"] .hero-top-bar .theme-btn.active { background: rgba(8,20,45,.65) !important; color: #fff !important; }

/* De LIVE-badge: wit op #e63946 haalde 4,17. Een tint donkerder is genoeg,
   en op ooghoogte is het verschil met het oude rood niet te zien. */
.live-badge { background: #cc2233; }
[data-ls-theme="colorblind"] .live-badge { background: #a84a00 !important; }

/* ── Randknoppen op een donkere kaart ──────────────────────────────── */
/* De slagmankaart is in alle thema's donkerblauw; Bootstrap-blauw op blauw
   leest niet. */
.batter-card .btn-outline-primary {
  color: #9cc4ff !important;
  border-color: rgba(156,196,255,.6) !important;
}
.batter-card .btn-outline-primary:hover {
  background: rgba(156,196,255,.18) !important;
  color: #fff !important;
  border-color: rgba(156,196,255,.85) !important;
}

/* Snelle acties: de kaart is donker in donker en colorblind, wit in licht. */
.quick-actions-card .btn-outline-secondary {
  color: #ccd6e5 !important;
  border-color: rgba(204,214,229,.45) !important;
}
.quick-actions-card .btn-outline-secondary:hover {
  background: rgba(204,214,229,.16) !important;
  color: #fff !important;
}
[data-ls-theme="light"] .quick-actions-card .btn-outline-secondary {
  color: #2c3a55 !important;
  border-color: rgba(44,58,85,.45) !important;
}
[data-ls-theme="light"] .quick-actions-card .btn-outline-secondary:hover {
  background: rgba(44,58,85,.08) !important;
  color: #0f1e3c !important;
}

/* De knop "Testmodus activeren" staat los van de knoppenkaart, op de
   paginaondergrond. In het lichte thema is dat vrijwel wit. */
[data-ls-theme="light"] body.live-scoring-active .btn-outline-warning {
  color: #6b4a00 !important;
  border-color: rgba(184,134,11,.6) !important;
  background: rgba(184,134,11,.08) !important;
}

/* ── Colorblind: rood wordt oranje, en wit op oranje leest niet ─────── */
/* main.css zet hier #ee7733 neer (wit erop haalt 2,9). Een donkerder oranje
   houdt het onderscheid met het blauw en wordt wel leesbaar. */
[data-ls-theme="colorblind"] body.live-scoring-active .btn-danger,
body.theme-colorblind.live-scoring-active .btn-danger,
[data-ls-theme="colorblind"] body.live-scoring-active .badge.bg-danger,
body.theme-colorblind.live-scoring-active .badge.bg-danger {
  background-color: #b8430a !important;
  border-color: #93350a !important;
  color: #fff !important;
}

/* ── Losse bijschriften die hun eigen doorzichtigheid meebrachten ───── */
/* De hint naast de uitklapknop stond op twee doorzichtigheden tegelijk (.5 bij
   de opmaak, .85 hier) bovenop een kleur die zelf al gedempt is. Gemeten 4,12
   op 1 in het lichte thema en 3,92 in het donkere, allebei onder de 4,5 die
   voor tekst van elf pixels geldt. Nu de gedempte kleur van het thema zelf,
   zonder laag eroverheen; die is voor precies dit doel gemeten. */
.tier-hint { color: var(--ls-muted) !important; }
.batter-card .text-muted,
.batter-stats .text-muted { color: rgba(255,255,255,.8) !important; }
[data-ls-theme="light"] .batter-stats .text-muted,
[data-ls-theme="light"] .batter-card .text-muted { color: rgba(255,255,255,.8) !important; }
.batter-position { color: rgba(220,232,255,.8); }

/* ── Randknoppen op de tabbladen box score, opstelling en spelverloop ── */

/* Een kopbalk van een kaart heeft op dit scherm altijd de blauwe huisstijl-
   gradient. De knoppen die erin staan (PR, PH, Selecteer Pitcher) kregen de
   standaardkleuren van Bootstrap, die voor een witte ondergrond zijn gekozen:
   donkerblauw op donkerblauw. */
body.live-scoring-active .card-header .btn.btn-outline-primary,
body.live-scoring-active .card-header .btn.btn-outline-secondary,
body.live-scoring-active .card-header .btn.btn-outline-success,
body.live-scoring-active .card-header .btn.btn-outline-info,
body.live-scoring-active .card-header .btn.btn-outline-warning,
body.live-scoring-active .card-header .btn.btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(8,20,45,.28) !important;
}
body.live-scoring-active .card-header .btn.btn-outline-primary:hover,
body.live-scoring-active .card-header .btn.btn-outline-secondary:hover,
body.live-scoring-active .card-header .btn.btn-outline-success:hover,
body.live-scoring-active .card-header .btn.btn-outline-info:hover,
body.live-scoring-active .card-header .btn.btn-outline-warning:hover,
body.live-scoring-active .card-header .btn.btn-outline-light:hover {
  background: rgba(8,20,45,.5) !important;
  border-color: #ffffff !important;
}

/* Een kopbalk met bg-info werd in het donkere thema Bootstrap-cyaan, met witte
   tekst erop: 2,4 op 1. Op dit scherm hoort elke kopbalk de huisstijl te volgen. */
body.live-scoring-active .card-header.bg-info,
body.live-scoring-active .card-header.bg-primary {
  background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-2)) !important;
  color: #ffffff !important;
}

/* En de randknoppen daarbuiten: die ondergrond is donker in het donkere en
   het colorblind-thema, en wit in het lichte. */
body.live-scoring-active .btn-outline-primary   { color: #9cc4ff !important; border-color: rgba(156,196,255,.55) !important; }
body.live-scoring-active .btn-outline-secondary { color: #ccd6e5 !important; border-color: rgba(204,214,229,.45) !important; }
body.live-scoring-active .btn-outline-success   { color: #6fdc8c !important; border-color: rgba(111,220,140,.55) !important; }
body.live-scoring-active .btn-outline-info      { color: #7cd9f0 !important; border-color: rgba(124,217,240,.55) !important; }
body.live-scoring-active .btn-outline-danger    { color: #ff8f96 !important; border-color: rgba(255,143,150,.55) !important; }

[data-ls-theme="light"] body.live-scoring-active .btn-outline-primary   { color: #0a419c !important; border-color: rgba(10,65,156,.5) !important; }
[data-ls-theme="light"] body.live-scoring-active .btn-outline-secondary { color: #2c3a55 !important; border-color: rgba(44,58,85,.45) !important; }
[data-ls-theme="light"] body.live-scoring-active .btn-outline-success   { color: #14633a !important; border-color: rgba(20,99,58,.5) !important; }
[data-ls-theme="light"] body.live-scoring-active .btn-outline-info      { color: #0a5b70 !important; border-color: rgba(10,91,112,.5) !important; }
[data-ls-theme="light"] body.live-scoring-active .btn-outline-danger    { color: #a32318 !important; border-color: rgba(163,35,24,.5) !important; }

/* De slagmankaart is ook in het lichte thema donker: daar blijft de lichte
   variant staan. De werperskaart niet meer, die volgt het thema. */
[data-ls-theme="light"] body.live-scoring-active .batter-card .card-body .btn-outline-primary { color: #9cc4ff !important; border-color: rgba(156,196,255,.55) !important; }


/* ══════════════════════════════════════════════════════════════════
   HET SCHERM PAST OP EEN LAPTOP EN EEN TABLET

   Het scoringsscherm was opgebouwd als een pagina om doorheen te scrollen:
   scorebord, line score, tabbladen en daaronder twee kolommen die elk hun
   eigen lengte kregen. Op een laptop van 900 pixels hoog kwam dat neer op
   bijna drie schermen, en de rechterkolom (slagman, werper, veld, snelle
   acties) was daarvan in zijn eentje goed voor de helft. Wie tijdens een
   wedstrijd telt, wil na elke worp niet eerst scrollen om te zien wat er
   veranderde.

   Vanaf 992 pixels breed wordt het daarom één werkscherm:

     - scorebord en line score staan naast elkaar in plaats van onder elkaar
     - de knoppengroepen staan naast elkaar (vier kolommen) in plaats van
       twee onder elkaar
     - de rechterkolom valt uiteen in twee smalle kolommen, zodat het veld
       niet langer de volle breedte en dus de volle hoogte vraagt
     - alle kaarten worden compacter: minder witruimte, kleinere cijfers

   Op een telefoon verandert er niets: daar staat alles nog onder elkaar en
   is scrollen juist de natuurlijke manier van bewegen.

   De oefenmodus blijft buiten schot (.oefen-schermvolgorde). Die pagina heeft
   haar eigen volgorde en haar eigen compacte indeling, met een opdrachtbalk
   erboven die hier niet bestaat.
══════════════════════════════════════════════════════════════════ */

/* De twee omhulsels in de rechterkolom doen standaard niets: hun kaarten
   hangen dan alsof de omhulsels er niet zijn. */
.ls-kolom { display: contents; }

@media (min-width: 768px) {

  /* ── De pagina zelf: scorebord en line score naast elkaar ───────────── */
  .ls-scherm:not(.oefen-schermvolgorde) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: .75rem;
    align-content: start;
  }
  .ls-scherm:not(.oefen-schermvolgorde) > .row,
  .ls-scherm:not(.oefen-schermvolgorde) > .tab-content { grid-column: 1 / -1; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord { grid-column: 1 / 8; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore { grid-column: 8 / -1; }

  /* De marges tussen de blokken waren op een werkscherm te royaal. */
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-kruimels  { margin-bottom: .2rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord,
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore { margin-bottom: .75rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-tabs      { margin-bottom: .75rem !important; }

  /* Kruimelpad en oefentip op één regel, klein. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-blok-kruimels .breadcrumb { margin-bottom: .1rem; font-size: .8rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-oefen-tip { font-size: .75rem; }

  /* ── Scorebord: dezelfde opbouw, minder lucht ──────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar   { padding: .4rem .9rem .35rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row { padding: .5rem 1rem .6rem; gap: .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap {
    width: 54px; height: 54px; padding: 5px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 0 4px var(--ls-brand), 0 6px 18px rgba(0,0,0,.45);
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-fallback { font-size: 1.1rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col      { gap: .3rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display { font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -2px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-name     { font-size: .72rem; letter-spacing: .05em; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-label    { font-size: .62rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-center-col    { flex: 0 0 66px; gap: .35rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-badge  { padding: .25rem .5rem; min-width: 54px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-num    { font-size: 1.15rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .live-hero-card     { border-radius: 14px !important; }

  /* ── Line score: compacter, en de W/L-regel op één regel ───────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header { padding: .35rem .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header h5 { font-size: .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table { font-size: .78rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table thead th { padding: .3rem .25rem; font-size: .65rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table td { padding: .32rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { min-width: 86px; max-width: 120px; font-size: .72rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark .card-footer { padding: .25rem .75rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark .card-footer .row > [class*="col-"] { flex: 0 0 auto; width: auto; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark .card-footer .row { justify-content: center; gap: 1.5rem; }

  /* ── Tabbladen ─────────────────────────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .nav-tabs.nav-fill { padding: .2rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .nav-tabs .nav-link { padding: .35rem .6rem; font-size: .78rem; }

  /* ── Live-tabblad: drie kolommen in plaats van twee ────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) #live > .row { --bs-gutter-x: .75rem; }
  /* De knoppen hebben minder breedte nodig dan ze hadden, en het veld meer: dat
     is de enige kaart waarvan de breedte ook de bruikbaarheid bepaalt, want hij
     is vierkant en je klikt erop om lopers te zetten.

     44 tegen 56, en niet de 47/53 die hier eerst stond. Het veld is het blok dat
     als eerste inkrimpt op een smaller scherm, want zijn breedte is een deel van
     een deel: op een MacBook van 1512 bleef er 459 pixels van over terwijl de
     twee kolommen ernaast op 590 stonden, en op 1280 nog maar 382. Dat is
     omgekeerd aan wat je wilt, want juist daar klik je op.

     Drie procent verschuiven levert het veld 26 pixels op (485 op 1512, 405 op
     1280) en kost de pagina geen hoogte. De knoppen kunnen het missen: op geen
     enkele breedte vanaf 1200 en in geen van de vier talen loopt een knoplabel
     buiten zijn vlak. Verder gaan kan niet: bij 41 procent breekt "Caught
     Stealing" op 1280, en in het Spaans ook "CI - Interferencia del Receptor". */
  .ls-scherm:not(.oefen-schermvolgorde) #live .col-lg-8 { flex: 0 0 auto; width: 44%; }
  .ls-scherm:not(.oefen-schermvolgorde) #live .col-lg-4 { flex: 0 0 auto; width: 56%; }

  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts .ls-kolom {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
  }
  /* De slagmankaart is tekst: die heeft genoeg aan een smalle kolom. Wat
     overblijft gaat naar het veld, met de werper eronder.
     De linkerkolom heeft een ondergrens nodig, geen percentage: op 1280 pixels
     zakte hij naar tweehonderd pixels en brak "Selecteer speler" in tweeën. Hij
     krijgt een vaste band, de rest gaat naar het veld. Dat is de enige kaart
     waarvan de breedte de bruikbaarheid bepaalt (je klikt erop om lopers te
     zetten). */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler { flex: 0 1 38%; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld   { flex: 1 1 62%; min-width: 0; }
  /* De kaarten regelen hun onderlinge afstand nu via gap. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts .card { margin-bottom: 0 !important; margin-top: 0 !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card { margin-bottom: .75rem !important; }

  /* ── De knoppen: vier groepen naast elkaar ─────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body > .row > .col-6 {
    flex: 0 0 auto;
    width: 25%;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header { padding: .35rem .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header h5 { font-size: .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body { padding: .6rem .75rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .btn { font-size: .78rem; padding: .35rem .4rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .ctrl-title { font-size: .62rem; padding: .18rem .45rem; margin-bottom: .35rem; }

  /* ── De count: één lage strook in plaats van drie hoge vakken ──────── */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header { padding: .3rem .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header h5 { font-size: .85rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-body { padding: .3rem .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .count-item { padding: .15rem .25rem .3rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .count-number { font-size: 1.7rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .count-label { margin-top: 0; font-size: .64rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-dots { margin-top: 0; gap: 4px; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-dot { width: 11px; height: 11px; }

  /* ── Slagman en werper ─────────────────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-header { padding: .3rem .75rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-info { padding: .5rem .5rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .jersey-number { font-size: 1.9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-body { padding: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .mt-3 { margin-top: .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body { padding: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-info { padding: .4rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-stat-item { padding: .3rem .25rem; margin-bottom: .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-stat-value { font-size: .95rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-stat-label { font-size: .6rem; }

  /* ── Het veld: het vroeg als enige kaart de volle kolombreedte ─────── */
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-body { padding: .3rem; }

  /* ── Snelle acties ─────────────────────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-body { padding: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn { font-size: .76rem; padding: .3rem .4rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid { gap: .35rem !important; }

  /* De voettekst van de site hoort niet op een werkscherm: die zou het
     scorebord alsnog buiten beeld duwen. Op een telefoon blijft hij staan,
     en op elke andere pagina ook. De oefenmodus houdt hem eveneens: dat is een
     openbare pagina waar de privacy- en cookielinks thuishoren. */
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) > footer { display: none; }
  body.live-scoring-active > main { margin-top: .75rem !important; }
}

@media (min-width: 768px) {
  /* ── Scorebord: van drie lagen onder elkaar naar logo naast de stand ──
     Het scorebord was gebouwd als een poster: logo, naam, stand en label
     stonden op vier regels onder elkaar. Dat is mooi op een telefoon, maar op
     een werkscherm kost het ruim 150 pixels voor vier gegevens. Het logo staat
     nu naast de naam en de stand, en de balk erboven blijft op één regel. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar { gap: .5rem; }

  /* De wedstrijdgegevens zijn het enige dat mag krimpen, en pas als er echt
     niets meer bij kan gaan ze naar een eigen regel. Knippen mag niet: de kaart
     heeft overflow:hidden, dus wat niet past is niet alleen onleesbaar maar ook
     onbereikbaar. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-meta-inline {
    flex: 1 1 8rem;
    min-width: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* De knoppenrij mag zelf ook afbreken. Doet hij dat niet, dan steekt hij als
     geheel buiten de kaart, en omdat de kaart knipt zijn de themaknoppen dan
     niet meer aan te klikken: precies het probleem dat de kleurenblindstand
     onbereikbaar maakte op een tablet. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-acties {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
  }
  /* De stadionnaam is het enige onderdeel dat lang kan worden; die kort in,
     de speldenknop en het routepictogram blijven staan. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-locatie {
    font-size: .72rem;
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
  }

  /* Het opschrift van de deelknop kost honderd pixels in een balk die het
     krap heeft. Het pictogram plus de tooltip zegt hier hetzelfde, en de
     stadionnaam ernaast is inhoudelijk belangrijker. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-acties > .theme-btn span { display: none !important; }

  /* "Terug naar Wedstrijden" staat op dit scherm twee keer: hier en in het
     kruimelpad linksboven, dat nu in hetzelfde beeld past. Eén keer is genoeg. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn-outline-secondary { display: none; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-locatie .maps-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-locatie .maps-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Logo links, naam erboven de stand, en UIT of THUIS vlak achter het cijfer.
     Die derde kolom (1fr) vangt op wat er aan breedte overblijft; zonder die
     kolom werd het label naar de buitenrand van de halve kaart geduwd en stond
     "UIT" driehonderd pixels van de nul waar het iets over zegt. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo naam  naam"
      "logo stand label";
    align-items: center;
    justify-items: start;
    column-gap: .6rem;
    row-gap: .1rem;
    text-align: left;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col > .hero-logo-wrap   { grid-area: logo; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col > .hero-team-name   { grid-area: naam; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col > .hero-score-display { grid-area: stand; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col > .hero-team-label {
    grid-area: label;
    justify-self: start;
    align-self: center;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display { font-size: clamp(1.8rem, 2.6vw, 2.2rem); line-height: 1.05; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row { padding: .45rem 1rem; }

  /* ── Het veld en de snelle acties nog een maat kleiner ─────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn { padding: .25rem .4rem; font-size: .74rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid { gap: .3rem !important; }
}

@media (min-width: 768px) {
  /* De balk boven het scorebord staat op één regel, dus de badge mag niet
     afbreken: drie regels "Live Wedstrijd Scoring" maakte de balk hoger dan
     het scorebord eronder. */
  .ls-scherm:not(.oefen-schermvolgorde) .live-badge,
  .ls-scherm:not(.oefen-schermvolgorde) .testmode-badge { flex-shrink: 0; }
  .ls-scherm:not(.oefen-schermvolgorde) .live-badge {
    white-space: nowrap;
    font-size: .62rem;
    letter-spacing: .1em;
    padding: .2rem .7rem .2rem .55rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .testmode-badge { white-space: nowrap; font-size: .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-meta-inline { flex-shrink: 1; }

  /* De thuisploeg gespiegeld, zodat de twee logo's de buitenkant van het
     scorebord vormen en de standen naar het midden wijzen. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-center-col + .hero-team-col {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "naam  naam  logo"
      "label stand logo";
    justify-items: end;
    text-align: right;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-center-col + .hero-team-col > .hero-team-label {
    justify-self: end;
  }
}

@media (min-width: 768px) {
  /* Kruimelpad en de verwijzing naar de oefenmodus delen één regel. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-blok-kruimels > .col-12 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 1.25rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-blok-kruimels .breadcrumb { margin-bottom: 0; }

  /* De line score staat naast het scorebord en bepaalt nu de hoogte van die
     regel: nog een tandje compacter. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table td { padding: .26rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table thead th { padding: .24rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .total-runs { font-size: .9rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark .card-footer { padding: .2rem .75rem; font-size: .8rem; }

  .ls-scherm:not(.oefen-schermvolgorde) .field-svg { max-width: 100%; }
}

@media (min-width: 768px) {
  /* De snelle acties stonden onder elkaar over de volle kolombreedte. Twee
     naast elkaar scheelt de halve hoogte en de knoppen blijven ruim genoeg. */
  /* Twee kolommen leek winst in hoogte, maar op 267 pixels breken vier van de
     zeven labels over twee regels en is de kaart per saldo nauwelijks lager.
     Eén kolom leest beter en houdt de knoppen even hoog. */
  /* De snelle acties staan nu onder de knoppen over de volle kolombreedte:
     daar passen ze naast elkaar in plaats van als lange rij onder elkaar. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }

  /* De werpersacties verschijnen zodra er een loper staat. Die kaart komt er
     middenin de wedstrijd bij, dus hij moet plat blijven: vier knoppen op één
     regel in plaats van twee kolommen van twee. */
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-body > .row > .col-6 {
    width: 50%;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard .d-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard { margin-top: .75rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-header { padding: .3rem .9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-body { padding: .5rem .75rem; }
}

@media (min-width: 768px) {
  /* Laatste beetje lucht uit de knoppenkaart. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid { gap: .35rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .tier-toggle-btn { padding: .28rem .6rem; font-size: .76rem; margin-bottom: .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body > .row.mb-2 { margin-bottom: .35rem !important; }
}


/* ── Tussenmaat: tablet en kleinere laptop (768 - 1400) ────────────────
   Dezelfde indeling als hierboven, maar er is zo'n vierhonderd pixels minder
   breedte te verdelen. Wat op een groot scherm naast elkaar past, breekt hier
   af tot twee regels, en dan is de kaart juist hóger. Deze maten zetten dat
   terug. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) .ctrl-title {
    font-size: .55rem;
    letter-spacing: .03em;
    padding: .15rem .35rem;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .btn { font-size: .72rem; padding: .3rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .btn i { margin-right: .25rem !important; }
  /* Vier knoppen dragen een statusteken dat zegt of de speelactie nu kan. Op een
     smalle kolom duwde dat de tekst naar een tweede regel; klein genoeg past het
     ernaast. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .btn > .badge {
    font-size: .55rem;
    padding: .1em .3em;
    margin-left: .2rem !important;
  }

  /* Twee snelle acties naast elkaar wordt op deze breedte twee regels tekst
     per knop: dan is één kolom lager. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn { font-size: .7rem; padding: .22rem .35rem; }

  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { min-width: 72px; max-width: 92px; font-size: .68rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table { font-size: .72rem; }

  .ls-scherm:not(.oefen-schermvolgorde) .field-svg { max-width: 100%; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap { width: 46px; height: 46px; padding: 4px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display { font-size: 1.7rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-stats small { font-size: .62rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .jersey-number { font-size: 1.6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-name { font-size: 1rem; }
}

@media (min-width: 768px) and (max-width: 1399.98px) {
  /* Meer breedte naar rechts: de twee smalle kolommen daar lopen eerder vast
     op woordafbreking dan de knoppen links. */
  .ls-scherm:not(.oefen-schermvolgorde) #live .col-lg-8 { width: 52%; }
  .ls-scherm:not(.oefen-schermvolgorde) #live .col-lg-4 { width: 48%; }
  /* De verdeling staat nu in het blok onderaan: vaste band links, rest naar
     het veld. Op deze tussenmaat hoeft daar niets bij. */

  /* De werperskaart zonder gekozen werper is een lege staat met een
     waarschuwing erin. Op een smalle kolom werd dat een blok van 400 pixels. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card .alert { font-size: .7rem; padding: .4rem .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card .py-3 { padding-top: .4rem !important; padding-bottom: .4rem !important; }
  /* Ook hier alleen de bal in het kaartlichaam: op de hele kaart raakt deze
     regel het pictogram in de kaartkop, en dan is die kop hoger dan die van de
     slagmankaart ernaast. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body .fa-baseball,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body .fa-baseball-ball { font-size: 1.4rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card p { font-size: .78rem; margin-bottom: .5rem !important; }
}


/* ── Telefoon in liggende stand ────────────────────────────────────────
   Alles tegelijk in beeld krijgen lukt hier niet: een telefoon heeft liggend
   zo'n 350 pixels hoogte en het scherm vraagt er ruim 700. Wat wel lukt is
   het scrollen ongeveer halveren ten opzichte van staand, en het belangrijkste
   (de count en de knoppen) meteen onder het scorebord zetten. De indeling
   hierboven doet het meeste werk; hier gaat alleen de lucht eruit die op een
   telefoon niets toevoegt. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  body.live-scoring-active nav.navbar { padding-top: .25rem; padding-bottom: .25rem; }
  body.live-scoring-active nav.navbar .navbar-brand { font-size: 1rem; }
  body.live-scoring-active nav.navbar .navbar-brand img { height: 30px !important; width: 30px !important; }

  /* Het kruimelpad en de oefentip zijn hier alleen maar hoogte. */
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-kruimels { display: none; }

  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap { width: 38px; height: 38px; padding: 3px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display { font-size: 1.5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-name { font-size: .62rem; }
  /* Ook liggend op een telefoon houdt de veldkolom hoogte over: het veld mag
     daar gewoon de kolom vullen in plaats van op een vaste maat te blijven. */
  .ls-scherm:not(.oefen-schermvolgorde) .field-svg { max-width: 100%; }
  .ls-scherm:not(.oefen-schermvolgorde) .count-number { font-size: 1.4rem; }
}

/* ── Tablet rechtop ────────────────────────────────────────────────────
   Een tablet rechtop is smal maar hoog. De indeling hierboven geldt ook
   daar, alleen krijgt de knoppenkaart hier twee groepen naast elkaar in
   plaats van vier: op 445 pixels breedte breken vier kolommen af. */
/* Hier stond de aparte indeling voor een tablet rechtop: twee kolommen met
   rechts één stapel, omdat drie kolommen te smal werden en het veld er kleiner
   van werd. Die reden is vervallen nu de werperskaart onder het veld staat in
   plaats van naast de slagman. De derde kolom draagt nu het veld met de werper
   eronder, en de twee stroken delen de breedte die overblijft: op een iPad Pro
   rechtop (1024) is dat 305, 305 en 307 pixels.

   Wat er wel apart blijft, staat in het tabletblok achteraan in dit bestand. */


/* ── Tip: draai je telefoon ────────────────────────────────────────────
   Alleen op een telefoon rechtop, en alleen zolang de tip niet is weggeklikt.
   Het element staat standaard op hidden; het script hieronder zet hem aan. */
.ls-draai-tip {
  display: none;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-2));
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: .55rem .75rem;
  margin-bottom: .75rem;
  font-size: .82rem;
  line-height: 1.35;
}
.ls-draai-tip .btn-close { flex-shrink: 0; opacity: .8; }

@media (max-width: 767.98px) and (orientation: portrait) {
  .ls-draai-tip:not([hidden]) { display: flex; }
}

/* De twee letters die een club zonder logo vervangen, staan op een donkerblauwe
   cirkel. Het goud van het lichte thema (#b8860b) is daarvoor gekozen tegen een
   witte achtergrond en haalt hier 3,3 op 1; op een compact scorebord is die
   tekst bovendien te klein om als "grote tekst" door te gaan. */
.hero-logo-fallback { color: #f5c518; }
[data-ls-theme="light"] .hero-logo-fallback { color: #f5c518 !important; }


/* ══════════════════════════════════════════════════════════════════
   NALEZING: wat de review op echte schermformaten bovenhaalde
══════════════════════════════════════════════════════════════════ */

/* De honken waren klikvlakken van 8 bij 8 pixels; op een kleiner veld helemaal
   niet meer te raken. De ruit zelf blijft even groot, er ligt alleen een
   onzichtbaar vlak omheen dat ruim boven de 44 pixels uitkomt. */
.base-hit { fill: transparent; }

/* Een knop met een donkere vulling (Einde Wedstrijd) stond in het donkere en
   het colorblind-thema op vrijwel dezelfde kleur als de kaart eronder: je zag
   alleen het witte opschrift zweven. Juist bij een onomkeerbare actie hoort de
   rand van de knop zichtbaar te zijn. */
[data-ls-theme="dark"] body.live-scoring-active .btn-dark,
[data-ls-theme="colorblind"] body.live-scoring-active .btn-dark,
:root:not([data-ls-theme]) body.live-scoring-active .btn-dark {
  border: 1px solid rgba(255,255,255,.4) !important;
}

/* Het gekozen tabblad was in het colorblind-thema nauwelijks te onderscheiden
   van de balk eromheen (ongeveer 1,6 op 1). Dezelfde heldere tint als in het
   donkere thema maakt het verschil zichtbaar zonder op kleur te leunen: er
   staat ook een lichte onderrand onder. */
[data-ls-theme="colorblind"] .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.55) !important;
}

@media (min-width: 768px) {
  /* De line score verloor op een smalle tablet de kolommen H en E achter de
     rand van de kaart, zonder zichtbare schuifbalk. De teamnaam mag inleveren:
     die staat er twee regels lang al. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { min-width: 64px; }
}

@media (min-width: 768px) and (max-width: 899.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { max-width: 78px; font-size: .64rem; }
}

/* Op een telefoon in liggende stand zakten de knoppen naar 26 tot 29 pixels
   hoog, terwijl dat juist de stand is die de app zelf aanraadt. Verticaal is
   daar ruimte voor: die pagina scrollt toch al. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .btn,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn,
  .ls-scherm:not(.oefen-schermvolgorde) .tier-toggle-btn { min-height: 40px; }
  .ls-scherm:not(.oefen-schermvolgorde) .theme-btn { width: 34px; height: 34px; }
  .ls-scherm:not(.oefen-schermvolgorde) .theme-toggle-group { gap: 6px; }
}

/* Het kruisje van de draai-tip was een raakvlak van 20 bij 20 pixels. Het
   kruisje blijft even groot, het vlak eromheen wordt dat van een duim. */
.ls-draai-tip .btn-close {
  padding: 12px;
  background-clip: content-box;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
}

/* De stadionlink staat nu in de knoppenrij van het scorebord, en dat is in élk
   thema donkerblauw. Zonder deze regel erft hij de donkere tekstkleur van het
   lichte thema en staat hij donker op donker. */
.hero-locatie,
.hero-locatie .maps-link { color: rgba(255,255,255,.9) !important; }
.hero-locatie .maps-link:hover { color: #ffffff !important; }

/* De twee knoppen die de extra spelpanelen open- en dichtklappen haalden op een
   telefoon 38 pixels; de huisregel is 44. Op een werkscherm mogen ze plat
   blijven, daar wordt met een muis geklikt. */
@media (max-width: 767.98px) {
  .tier-toggle-btn { min-height: 44px; }

  /* Op een telefoon staat alles onder elkaar, en dan hoort de werper meteen na
     de slagman: dat zijn de twee spelers van dezelfde worp. In het sjabloon
     staat zijn kaart achter het veld, want vanaf 1200 hoort hij daaronder. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts { display: flex; flex-direction: column; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts .field-card { order: 1; }
}

/* De vaste balken onderaan (cookies, installeren, meldingen) staan wel binnen
   body.live-scoring-active, maar horen niet bij het scoringsscherm: ze hebben
   hun eigen witte achtergrond. Zonder deze regel krijgen hun knoppen de lichte
   randkleuren die voor de donkere kaarten hierboven zijn gekozen, en stond er
   in het donkere en het colorblind-thema wit op wit (1,5 op 1). Uitgerekend op
   de cookiebalk, waar de keuze zichtbaar hoort te zijn. */
body.live-scoring-active .app-bottom-bar .btn-outline-primary   { color: #0a419c !important; border-color: rgba(10,65,156,.5) !important; }
body.live-scoring-active .app-bottom-bar .btn-outline-secondary { color: #2c3a55 !important; border-color: rgba(44,58,85,.45) !important; }
body.live-scoring-active .app-bottom-bar .btn-outline-success   { color: #14633a !important; border-color: rgba(20,99,58,.5) !important; }
body.live-scoring-active .app-bottom-bar .btn-outline-info      { color: #0a5b70 !important; border-color: rgba(10,91,112,.5) !important; }
body.live-scoring-active .app-bottom-bar .btn-outline-danger    { color: #a32318 !important; border-color: rgba(163,35,24,.5) !important; }
body.live-scoring-active .app-bottom-bar .btn-outline-warning   { color: #6b4a00 !important; border-color: rgba(184,134,11,.6) !important; }

/* ══════════════════════════════════════════════════════════════════
   WERKSCHERM: UITLIJNING

   Het werkscherm stond er ordelijk bij op de maat waarop het gemaakt is,
   maar niet als geheel: de drie kolommen eindigden op drie verschillende
   hoogtes (873, 791 en 758 pixels op een MacBook), de vier knopgroepen
   liepen na de derde rij uit elkaar omdat één label afbrak, de kaartkoppen
   waren allemaal net een andere hoogte, en de snelle acties vulden hun
   laatste rij half. Dit blok legt daar één raster onder.

   De regels staan bewust achteraan: ze hebben dezelfde zwaarte als de
   blokken hierboven en winnen op volgorde.
══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ── 1. Kaartkoppen: één hoogte, één stijl ────────────────────────
     Count en Scoring Controls hadden een h5, de drie kaarten rechts een
     h6, en de veldkaart een doorzichtige kop in plaats van de merkkleur.
     Daardoor begonnen de drie kolommen op drie verschillende regels. */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header {
    display: flex;
    align-items: center;
    min-height: 2.15rem;
    padding: .3rem .85rem !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header h5,
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header h5,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header h6 {
    font-size: .88rem;
    line-height: 1.25;
  }

  /* De count- en de veldkaart droegen als enige geen merkkleur in de kop.
     Wit op #1e3c72 is dezelfde combinatie als de vier andere koppen. */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header {
    background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-2)) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header h6 { color: #fff !important; }

  /* ── 2. De drie kolommen eindigen op dezelfde regel ───────────────
     De rij is al even hoog (Bootstrap rekt beide kolommen), alleen de
     kaarten erin stopten eerder. De onderste kaart van elke stapel vult
     nu wat overblijft, zodat de witruimte binnen een kaart valt in plaats
     van eronder. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts { align-items: stretch; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card:last-child { margin-bottom: 0 !important; }
  /* De veldkaart is zo breed als zijn kolom en even hoog als breed; wat de kolom
     daarna nog langer is, is voor de werperskaart eronder en anders gewoon
     pagina.

     Hier stond de kaart uit de stroom (absoluut, op nul), zodat zijn hoogte de
     rij niet kon opdrijven: een bredere kolom maakt het veld hoger, dat maakt de
     rij hoger, en daar rekt de linkerkolom dan weer in mee. Die slang bijt hier
     niet meer in zijn staart, want de rechterkolom is in deze band ruim korter
     dan de linker (452 tegen 757 op 1199), en uit de stroom kan niet meer: dan
     valt de werperskaart onder het veld door.
     Hier stond ook een max-height van 100%. Die ging knellen zodra het vierkant
     breder wilde zijn dan de kolom hoog is, en liet weer los zodra je een paneel
     opende: op 1920 was het veld daardoor 591 pixels dicht en 627 open. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .field-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: none;
    min-height: 0;
  }
  /* De slagman- en werperskaart rekken bewust NIET mee. Staan de uitklappanelen
     open en is er een werperskaart bij, dan is de linkerkolom een paar honderd
     pixels langer dan hier ooit inhoud voor is, en dan worden dit twee lege
     gekleurde vlakken van vierhonderdvijftig pixels. Twee kaarten op hun eigen
     maat met daaronder gewoon pagina leest beter. In de gewone stand schelen de
     kolommen maar een pixel of acht, dus daar valt het niet op. Het veld rekt
     wel mee: dat vlak is de omgeving van het veld en niet een leeg kaartje. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card { flex: 0 0 auto; }

  /* Het veld is vierkant en krijgt de hoogte die de kaart heeft. Geen padding:
     het veld is een ronde munt op een donker vlak, dus een rand eromheen levert
     alleen meer van datzelfde vlak op. */
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    padding: 0 !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .field-card .diamond-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  /* Niet height:100%: het veld heeft alleen een viewBox en geen eigen maten, en
     een procentuele hoogte in een vak dat zelf nog geen hoogte heeft maakt hem
     honderdzestig pixels te hoog. De breedte stuurt, de verhouding volgt, en
     max-height vangt af als de kolom ooit korter is dan het veld breed. */
  .ls-scherm:not(.oefen-schermvolgorde) .field-card .field-svg {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: 100%;
    margin: auto;
  }

  /* De werperskaart in haar lege staat (nog geen werper gekozen) nam met een
     grote bal, een waarschuwing van drie regels en royale witruimte bijna
     driehonderdvijftig pixels. Dat is de kolom die bepaalt hoe hoog het hele
     scherm wordt, en juist die kaart heeft dan niets te vertellen. Deze maten
     stonden al op de tussenmaat; ze horen op elk werkscherm. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card .alert { font-size: .78rem; padding: .45rem .6rem !important; margin-bottom: .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card .py-3 { padding-top: .4rem !important; padding-bottom: .4rem !important; }
  /* Alleen de grote bal in het kaartlichaam, niet het pictogram in de kop. Deze
     regel stond op de hele kaart, en daarmee werd ook het balletje naast het
     woord "Pitching" 1,9rem: de kop van de werperskaart werd er 41 pixels hoog
     van tegen 34 bij de slagmankaart ernaast, en dat zie je meteen als die twee
     naast elkaar staan. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body .fa-baseball,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body .fa-baseball-ball { font-size: 1.9rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card p { font-size: .82rem; margin-bottom: .6rem !important; }

  /* Het veld is een donkergroene cirkel. In het lichte thema stond die op een
     wit kaartvlak, met vier witte hoeken eromheen. Eén donker vlak eromheen
     laat het veld als veld lezen in plaats van als een plaatje dat ergens op
     ligt. Er staat geen tekst op dat vlak behalve de namen in de SVG, en die
     dragen hun eigen donkere pil.

     Het verloop loopt vanuit het midden naar buiten en niet schuin over de
     kaart: de munt is rond, en een vlak dat naar de hoeken toe wegzakt leest
     als de omgeving van het veld in plaats van als een groene rechthoek waar
     een plaatje middenin ligt. */
  .ls-scherm:not(.oefen-schermvolgorde) .field-card,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-body {
    background: radial-gradient(circle at 50% 54%, #14361f 0%, #0d2416 58%, #071009 100%) !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .field-card { border-color: rgba(255,255,255,.12) !important; }

  /* De werperskaart heeft weinig inhoud tot er een werper staat; die
     inhoud hoort dan midden in de kaart, niet bovenin met een gat. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* De linkerkolom heeft geen kaart die vanzelf uitrekt. Is de rechterkant
     de langste (dat wisselt: de werperskaart is hoger zolang er geen werper
     staat), dan zakt de speelruimte naar de knoppenkaart en schuiven de twee
     uitklapknoppen naar de voet daarvan. Het knoppenraster zelf blijft op zijn
     eigen maat, want rijen die meerekken lopen tussen de vier groepen weer uit
     elkaar. */
  /* Geen enkele kaart links rekt mee. De veldkaart vult het vak dat deze kolom
     en de middenkolom samen opspannen; wat de kortste kolom overhoudt is gewoon
     pagina. Een kaart die uitrekt om een gat te vullen is zelf het gat. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links { display: flex; flex-direction: column; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card { flex: 0 0 auto; }

  /* ── 3. De vier knopgroepen als één raster ────────────────────────
     Vier kolommen van gelijke breedte lieten "Sacrifice Fly" en
     "Caught Stealing" afbreken terwijl "Ball" en "Home Run" ruimte over
     hadden. De twee groepen met lange namen krijgen nu meer breedte. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body > .row {
    display: grid;
    grid-template-columns: .88fr .88fr 1.12fr 1.12fr;
    gap: .5rem;
    margin: 0 0 .4rem !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body > .row > .col-6 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }

  /* De band met extra spelen loopt op dezelfde kolommen als de vaste rij, zodat
     de kaart één raster blijft: elke knop in de band is even breed als de knop
     erboven. De kopjes COUNT en HITS gelden niet voor de band; die heeft zijn
     eigen kop, de uitklapknop erboven. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .tier-band {
    grid-template-columns: .88fr .88fr 1.12fr 1.12fr;
  }

  /* De werperskaart is óók een controls-card en kreeg daarmee het raster van
     vier kolommen, terwijl hij maar twee groepen heeft. Zijn vier knoppen
     werden daardoor in het linkerkwart geperst en liepen over elkaar heen.
     Net als de uitklappanelen beslaat elke groep hier twee kolommen, zodat de
     knoppen precies onder die van de vaste rij vallen. */
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-body > .row > .col-6:nth-child(1) { grid-column: 1 / 3; width: auto; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-body > .row > .col-6:nth-child(2) { grid-column: 3 / 5; width: auto; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard .d-grid { grid-template-columns: 1fr 1fr; }

  /* Groepskopjes over de volle kolombreedte: vier gelijke balkjes lezen
     als een kop boven een kolom, vier verschillend brede pillen niet. */
  .ls-scherm:not(.oefen-schermvolgorde) .ctrl-title {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: .4rem;
  }

  /* Elke knoprij even hoog, in alle vier de groepen en in de panelen. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid {
    gap: .4rem !important;
    grid-auto-rows: 2rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .3rem;
    min-width: 0;
    line-height: 1.1;
    padding: 0 .35rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn > i { margin: 0 !important; flex: 0 0 auto; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn > .badge {
    margin: 0 !important;
    flex: 0 0 auto;
    font-size: .55rem;
    line-height: 1;
    padding: .2em .35em;
  }

  /* ── 4. Snelle acties: rijen die vol zijn ─────────────────────────
     Er staan zes knoppen. Met een automatisch aantal kolommen werden dat
     er vier plus twee, met een gat rechtsonder. Twee of drie kolommen
     delen zes precies op. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .35rem;
    line-height: 1.15;
    min-height: 2.1rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn > i { margin: 0 !important; flex: 0 0 auto; }
  /* "Terug naar Wedstrijden" blijft verborgen op een werkscherm: het
     kruimelpad linksboven staat in hetzelfde beeld. De regel hierboven zet
     display op flex en zou hem anders terugzetten. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn-outline-secondary { display: none !important; }
}

@media (min-width: 1200px) {
  /* Zoveel knoppen naast elkaar als er bij een fatsoenlijke maat passen. Er
     stonden er drie vast, en dat klopte toen de kolom 600 pixels breed was. Nu
     is die kolom 824 en werden het knoppen van 304 pixels voor het woord "Einde
     Inning", met bovendien een rij van één omdat er zeven knoppen zijn. Met een
     ondergrens van 11rem worden het er vier van 190 op een breed scherm en drie
     zodra de kolom smaller wordt. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

/* Op een breed scherm past elk knoplabel op één regel en zijn de rijen 2rem.
   Onder de 1200 pixels is de linkerkolom zo'n vijfhonderd pixels breed en
   passen "Sacrifice Fly" en "Caught Stealing" daar niet meer op één regel.
   Afkappen zou de tekst kosten en kleiner zetten gaat onder de leesgrens van
   .7rem, dus krijgen alle knoppen daar ruimte voor twee regels. De rijhoogte
   ligt vast, zodat de vier groepen naast elkaar blijven lopen. */
@media (min-width: 1200px) {
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid { grid-auto-rows: 2rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn { white-space: nowrap; }
  /* Behalve in de panelen: daar staan de langste namen van het scherm, en
     "CI - Catcher's Interference" past op geen enkele breedte op één regel in
     één kolom. Twee regels van .78rem passen wel binnen diezelfde rij van
     2rem (30 van de 32 pixels), dus de rijhoogte hoeft er niet voor omhoog en
     de vier groepen blijven naast elkaar lopen. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .collapse .d-grid > .btn { white-space: normal; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid { grid-auto-rows: 2.7rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn { white-space: normal; }
}

/* De panelen hadden hier een eigen rijhoogte van 2,7rem, omdat hun knoppen
   smaller waren dan die van de vaste rij en "CI - Catcher's Interference" dus
   op twee regels moest. Nu ze in dezelfde kolom staan zijn ze even breed, en
   dan hoort de rijhoogte ook gelijk te zijn: knoppen van 43 pixels onder
   knoppen van 32 leest als twee verschillende schermen. De regels hierboven
   (2rem vanaf 1200, 2,7rem daaronder) gelden dus gewoon voor de panelen mee.
   Zie het blok WERKSCHERM: UITLIJNING hierboven. */

/* ══════════════════════════════════════════════════════════════════
   WERKSCHERM: DE VOLLE BREEDTE VAN HET SCHERM

   main.css kapt elke .container-fluid vanaf 1200 pixels af op 1400. Dat is
   goed voor een leespagina: een regel van tweeduizend pixels leest niet.
   Het scoringsscherm is geen leespagina maar een werkscherm, en daar kost die
   grens alles wat hij raakt: op een monitor van 1900 pixels bleef er 500 over
   aan lege marge terwijl het veld op 430 pixels stond en de middenkolom op 250.

   De grens gaat hier naar 1920. Wat erbij komt gaat naar de drie kolommen: het
   veld wordt groter (en zijn honken dus makkelijker te raken), de knoppen
   krijgen lucht, en de veldkaart houdt minder ongebruikte hoogte over omdat hij
   breder wordt terwijl de kolom ernaast even lang blijft.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* De grens staat op <main>, niet op het scherm zelf. */
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) > main.container-fluid,
  .ls-scherm:not(.oefen-schermvolgorde) {
    max-width: 1920px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   WERKSCHERM: DE SCHUIFBALK VERSPRINGT NIET MEER

   In de gewone stand past het scherm precies binnen het venster en is er geen
   schuifbalk. Klap je "Meer spelen" of "Zeldzame spelen" open, dan wordt de
   pagina langer, komt de schuifbalk erbij en verliest het venster elf pixels
   breedte. Alles herberekent dan: elke knop schuift naar links en het veld
   wordt smaller. Je klikt op één uitklapknop en het halve scherm verspringt.

   De ruimte voor de schuifbalk staat daarom altijd gereserveerd. Op een Mac met
   zwevende schuifbalken kost dat niets, want daar is die ruimte nul.
══════════════════════════════════════════════════════════════════ */
html:has(body.live-scoring-active) { scrollbar-gutter: stable; }


/* Het vierkante veld hoort bij de indeling met kolommen naast elkaar. Op een
   tablet rechtop staat hij in een stapel over de volle breedte, en dan zou een
   vierkant een halve pagina hoog worden. Deze terugzetregel staat achteraan
   omdat hij de regel hierboven moet overstemmen. */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .field-card { aspect-ratio: auto; }
}


/* ══════════════════════════════════════════════════════════════════
   LINE SCORE: DE TEAMKOLOM NEEMT WAT DE NAAM NODIG HEEFT, NIET MEER

   De kolom stond op `min-width: 110px; max-width: 140px`, maar een tabel meet
   zijn kolommen aan de inhoud en verdeelt wat er daarna nog over is naar
   verhouding: de breedste kolom krijgt het grootste deel erbij. De teamkolom was
   de breedste, dus die groeide door naar 216 pixels op een tabel van 586 voor
   een naam die er 155 nodig had, en de negen inningen hielden er 31 per stuk aan
   over. Een `max-width` op een cel doet daar niets tegen: die geldt wel voor de
   cel maar niet voor de kolom.

   Er zijn twee maten nodig, en ze doen elk iets anders. De opgegeven breedte op
   de kolomkop is wat de kolom vasthoudt zodra de tabel ruimte overhoudt; laat je
   die weg, dan loopt de kolom op 1512 zo weer naar 222 pixels. De maximumbreedte
   op de naam zelf is wat hem tegenhoudt als de naam juist lang is; zonder die
   grens trekt "DSS/Kinheim Combinatie MH-2" de kolom alsnog open. Samen leveren
   ze precies wat de naam nodig heeft: 151 pixels op 1280, 158 op 1512, en de
   rest gaat naar de inningen. 9,6rem is gemeten aan de langste namen die
   echt voorkomen: "Kinheim Haarlem MH-1" is 147 pixels breed op deze regel,
   "SVHV Schiedam MH-3" 136. Wat langer is (een combinatienaam van drie woorden)
   krijgt het beletselteken dat er al stond maar dat door de meegroeiende kolom
   nooit in beeld kwam; de volledige naam staat dan nog in het scorebord ernaast.

   De inningen blijven daarmee alle negen in beeld, ook als de wedstrijd uitloopt:
   de kolommen die de engine erbij zet maken de tabel breder dan de kaart, en dan
   schuift `.table-responsive` mee zoals hij altijd al deed. Een vaste
   kolomindeling (`table-layout: fixed`) zou dat juist kapotmaken: die laat de
   tabel niet groeien maar knijpt de cijfers samen, en bij een inning van tien
   punten breekt "10" dan over twee regels.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { width: 11rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name {
    min-width: 0;
    max-width: none;
    /* De inspringing was .6rem links; op een naam van twintig letters zijn die
       drie pixels het verschil tussen heel en afgekapt, en de kolom wordt er
       niet breder van, dus de inningen leveren niets in. */
    padding-left: .4rem !important;
    padding-right: .4rem !important;
    /* De ruime letterafstand komt van .team-name, een klasse die dit vak deelt
       met het oude scorebord. Op een kop van vijf letters valt dat niet op, op
       een teamnaam van twintig kost het zestien pixels: precies het verschil
       tussen "Kinheim Haarlem MH-1" heel en afgekapt. */
    letter-spacing: .02em;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name > strong {
    display: block;
    max-width: 9.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Een inning is een cijfer of twee; de zijkanten mogen dus krap. Dat scheelt
     vijf pixels per kolom, en dat is precies wat een tweecijferige stand nodig
     heeft om niet over twee regels te breken. Nooit afbreken dus: past het
     echt niet, dan wordt de tabel breder en schuift de kaart mee. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .inning-header,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .inning-score {
    padding-left: .15rem;
    padding-right: .15rem;
    white-space: nowrap;
  }
}
/* Onder 1400 is de tabel zelf al een maat kleiner (.72rem tegen .78rem) en is er
   een halve kolom minder te verdelen. De naam krijgt daar navenant minder. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-header { width: 9.25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name > strong { max-width: 8.6rem; }
}


/* ══════════════════════════════════════════════════════════════════
   SCOREBORD EN LINE SCORE: EEN RIJ, DUS EEN HOOGTE

   Ze staan naast elkaar en waren niet even hoog: het scorebord 133 pixels, de
   line score ernaast 148. Dat verschil zie je onderaan als een trapje van
   vijftien pixels, en het is bovendien ruimte die het scorebord goed kan
   gebruiken: de wedstrijdgegevens in de bovenbalk werden afgekapt tot
   "24 Se...", want die regel had 277 pixels en er was 307 nodig.

   Allebei de kaarten vullen nu de hoogte van hun rij, en de bovenbalk mag
   afbreken. Past de datum er niet meer bij, dan schuift de rechterkant
   (stadion, deelknop, de drie thema's) naar een eigen regel en staat de datum
   voluit. Op een breed scherm gebeurt dat niet: daar past alles op één regel en
   groeit het scorebord alleen tot de hoogte van de line score.

   De extra hoogte gaat naar de standregel, niet naar de balk: dat is de regel
   met de logo's en de cijfers, en die kan de lucht hebben.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord,
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore { align-self: stretch; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord > .col-12,
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore > .col-12 { display: flex; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord .card,
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore .card { flex: 1 1 auto; }

  .ls-scherm:not(.oefen-schermvolgorde) .live-hero-card > .card-body {
    display: flex;
    flex-direction: column;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row { flex: 1 1 auto; }

  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar {
    flex-wrap: wrap;
    row-gap: .2rem;
  }
  /* Deze regel stond op afkappen met een beletselteken. Dat was de oplossing
     toen de balk niet mocht afbreken; nu hij dat wel mag, is afkappen alleen
     nog verlies van informatie. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-meta-inline {
    flex: 1 1 auto;
    overflow: visible;
    text-overflow: clip;
  }
}


/* ══════════════════════════════════════════════════════════════════
   WERKSCHERM VANAF 1200: EEN RASTER, EN ALLES WAT JE NODIG HEBT IN BEELD

   De vorige indelingen liepen allemaal op hetzelfde vast. Boven de vouw is op
   een venster van 950 pixels hoog 611 pixels beschikbaar, en een vierkant veld
   van 593 eet dat in zijn eentje op: wat eronder stond (de slagman- en
   werperskaart) was daarmee altijd weg.

   Dit is de rekensom. De linkerkant heeft nodig: de count (80), de
   knoppenkaart (315) en de snelle acties (127), samen 546 met de tussenruimte.
   Blijft over voor een vierde blok: niets. Tenzij de slagman en de werper naast
   de count komen te staan in plaats van eronder, en dat kan alleen als die twee
   kaarten liggende stroken worden in plaats van staande kaarten.

   Dat is wat hier gebeurt. Het live-tabblad is een raster van drie kolommen:

     ┌────────┬──────────────┬──────────┐
     │ Count  │   Aan Slag   │          │
     ├────────┴──────────────┤   VELD   │
     │ Scoring Controls      │          │
     ├───────────────────────┼──────────┤
     │ Snelle Acties         │ Pitching │
     └───────────────────────┴──────────┘

   Die twee kaarten zijn tekst: een rugnummer, een naam en een rij cijfers. Als
   staande kaart kostten ze 231 pixels hoogte voor inhoud die er zestig nodig
   heeft, en dat is precies de hoogte die het veld tekortkwam. Liggend passen ze
   naast de count, en dan staat de hele linkerkolom op 566 en het veld op 495:
   allebei binnen de 611.

   De werper staat onder het veld en niet naast de slagman, en dat is geen
   schuifpartij maar de enige plek waar hij ruim staat. Het veld is vierkant en
   dus korter dan de kolom ernaast; onder het veld lag daardoor honderd pixels
   niets. Met de werper daarin komt er links een kolom vrij: de count gaat van
   168 naar 262 pixels (hij stond op zijn ondergrens) en de slagman van 369 naar
   656. De werper zelf gaat van 349 naar de volle veldbreedte, en dat is precies
   wat zijn negen cijfers nodig hebben om op één regel te staan in plaats van
   twee.

   Het klopt ook met waar je kijkt: links de slagbeurt (de count, de slagman, de
   knoppen), rechts de verdediging (de honken en de man die gooit).

   Het veld is niet meer het grootste blok van het scherm maar het blok dat
   past. 495 pixels is ruim: een honk is er 100 bij 100 groot, en je klikt erop
   met een muis, niet met een vergrootglas.

   De rijafstand loopt via de marges van de kaarten zelf en niet via row-gap.
   De werpersacties (#pitcherActionsCard) verschijnen pas als er een loper op
   honk staat; met row-gap houdt die kaart ook in verborgen staat zijn rij, en
   dan zit er een gat van niets tussen de knoppen en de snelle acties.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .ls-scherm:not(.oefen-schermvolgorde) #live > .row {
    display: grid;
    /* De negatieve marges van de bootstrap-rij moeten eraf. Ze horen bij de
       goot die de kolommen als padding terugnemen, en die kolommen doen hier
       niet meer mee (display: contents). Blijven ze staan, dan steekt het veld
       zes pixels buiten de line score erboven. */
    margin-left: 0;
    margin-right: 0;
    grid-template-columns:
      minmax(10.5rem, 1fr)         /* count: drie cijfers met stippen */
      minmax(0, 1fr)               /* aan slag */
      var(--ls-rechts);            /* veld, even breed als de line score erboven */
    /* De vijfde rij is leeg en vangt hoogte op. De rechterkolom is één vakje
       dat over alle rijen loopt; is die kolom langer dan de vier kaarten links
       (en dat is hij, zodra de werper onder het veld staat), dan verdeelt het
       raster dat verschil over de rijen die het overspant. Zonder deze rij komt
       het terecht tussen de knoppen en de snelle acties. Een rij op 1fr slokt
       het op, want die vult wat er overblijft. */
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: .75rem;
    row-gap: 0;
    align-items: start;
  }
  /* De omhulsels doen niet meer mee: hun kaarten zijn zelf de vakjes van het
     raster. De rechterkolom is de uitzondering; die blijft een vakje, want het
     veld en de werperskaart staan daarbinnen onder elkaar en niet in rijen van
     het raster zelf. */
  .ls-scherm:not(.oefen-schermvolgorde) #live > .row > .ls-live-links,
  .ls-scherm:not(.oefen-schermvolgorde) #live > .row > .ls-live-rechts,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts > .ls-kolom-speler { display: contents; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts > .ls-kolom-veld {
    display: flex;
    flex-direction: column;
    grid-column: 3;
    grid-row: 1 / 6;
    align-self: start;
  }

  /* De drie stroken bovenaan staan naast elkaar en zijn even hoog: hun
     onderranden vormen samen de lijn waar de knoppenkaart onder begint. Wat de
     een minder inhoud heeft dan de ander wordt lucht in de kaart, niet een
     trapje in de rij. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .bso-card      { grid-column: 1; grid-row: 1; align-self: stretch; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .batter-card  { grid-column: 2; grid-row: 1; align-self: stretch; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .bso-card > .card-body,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card > .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* En ze houden hun hoogte. Leeg zijn deze stroken 105 pixels en met een
     gekozen slagman en werper 146; zonder ondergrens schuift alles eronder
     veertig pixels omlaag op het moment dat je de eerste speler kiest. Een
     werkscherm dat verspringt terwijl je aan het tellen bent, telt niet
     prettig. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .bso-card,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card { min-height: 9.2rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .controls-card:not(#pitcherActionsCard) { grid-column: 1 / 3; grid-row: 2; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard              { grid-column: 1 / 3; grid-row: 3; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .quick-actions-card { grid-column: 1 / 3; grid-row: 4; }

  /* Het veld hangt aan de bovenkant van zijn kolom en blijft vierkant; de
     werperskaart staat eronder en neemt de hoogte die anders leeg bleef. Een
     kaart die uitrekt om een gat te vullen is zelf het gat. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .field-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Geen eigen marge: de kolom heeft zelf al een goot van .75rem (die staat op
       .ls-kolom vanaf 768). Met allebei stond er 24 pixels tussen het veld en de
       werperskaart in plaats van 12. */
    margin: 0 !important;
  }
  /* De werperskaart is 14rem hoog, en dat is een vaste maat en geen uitrekker.

     224 pixels is waar de kolom eindigt op de lijn van de kolom ernaast: het
     veld loopt tot 828, de tussenruimte tot 840, en de linkerkolom eindigt met
     de werpersacties erbij op 1065. Precies die 225.

     Waarom niet meerekken met wat er links staat: dan verandert de hoogte van
     deze kaart tijdens de wedstrijd. De werpersacties verschijnen zodra er een
     loper op honk staat, en de kaart zou daar veertig pixels van groeien, met
     de cijfers erin die opnieuw verdeeld worden. Een werkscherm dat verspringt
     terwijl je aan het tellen bent, telt niet prettig. Staan de uitklappanelen
     open, dan blijft er onder deze kaart ruimte over; dat is pagina, en pagina
     die er alleen is als je zelf een paneel hebt opengezet. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card {
    margin: 0 !important;
    flex: 0 0 auto;
    height: 14rem;
  }
  /* De inhoud rekt mee met de kaart: naam bovenaan, cijfers verdeeld over wat
     eronder overblijft. Deze keten van vier moet compleet zijn, anders houdt de
     inhoud zijn eigen hoogte en valt het extra als lucht onderaan de kaart. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card > .card-body,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center { flex: 1 1 auto; }

  /* De tussenruimte komt van de kaarten zelf. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card { margin-bottom: .75rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card:last-child { margin-bottom: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════════
   DE BREEDTE VAN DE RECHTERKANT: EEN MAAT VOOR TWEE RIJEN

   De line score bovenin en het veld eronder staan in verschillende rasters (de
   ene in het paginaraster, het andere in de bootstrap-rij van het tabblad) maar
   moeten even breed zijn, anders staan hun randen een centimeter uit elkaar.
   Vandaar een variabele, en vandaar vw en geen procent: een percentage rekent
   in elk raster met een andere ouder en geeft dan twee net verschillende
   uitkomsten.

   De band is gemeten. De ondergrens is wat de line score nodig heeft: onder de
   470 zakt een inningkolom onder de 26 pixels naast een teamkolom die de naam
   voluit moet kunnen tonen. De bovengrens is waar het veld ophoudt beter te
   worden en alleen nog hoogte kost.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Op een tablet gelden andere grenzen. De 470 hierboven komt van de line
     score op een breed scherm; op een tablet is die tabel zelf kleiner gezet en
     past hij ruim binnen 300. Wat hier telt is de hoogte: het veld is vierkant,
     dus elke pixel breedte is een pixel hoogte, en daaronder moet de
     werperskaart nog passen binnen een venster van 744 tot 834 pixels. Gemeten
     grens: 360. Daarboven wordt de kolom langer dan de kolom ernaast en moet je
     scrollen om de laatste knoppen te zien. */
  .ls-scherm:not(.oefen-schermvolgorde) { --ls-rechts: clamp(280px, 30vw, 360px); }
}

@media (min-width: 1200px) {
  .ls-scherm:not(.oefen-schermvolgorde) { --ls-rechts: clamp(470px, 33vw, 540px); }
}



@media (min-width: 768px) {

  /* Het scorebord en de line score volgen dezelfde verdeling als de rij
     eronder, en met dezelfde variabele, zodat de line score precies boven het
     veld staat. */
  .ls-scherm:not(.oefen-schermvolgorde) {
    grid-template-columns: minmax(0, 1fr) var(--ls-rechts);
  }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord { grid-column: 1; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-linescore { grid-column: 2; }
}



/* ══════════════════════════════════════════════════════════════════
   AAN SLAG EN PITCHING ALS LIGGENDE STROOK (vanaf 1200)

   Als staande kaart kostten deze twee 231 pixels hoogte voor inhoud die er
   zestig nodig heeft: een rugnummer, een naam en een rij cijfers, met veel lucht
   ertussen. Die 231 pixels waren precies wat het veld tekortkwam om boven de
   vouw te passen.

   Liggend staat dezelfde inhoud op één regel: rugnummer links, naam en positie
   ernaast, de cijfers rechts en de knop helemaal rechts. Het raster hieronder
   werkt in beide toestanden, en dat is nodig: de engine hertekent deze twee
   vakjes zelf en levert bij een gekozen speler een foto en meer cijfers dan bij
   een lege kaart.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Aan Slag ───────────────────────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-body { padding: .45rem .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentBatter {
    display: grid;
    /* De middelste kolom houdt een ondergrens: zonder die grens kneep het
       cijferblok ernaast hem op 1280 naar nul pixels en stond de positie ("SS")
       over de cijfers heen. */
    grid-template-columns: auto minmax(2.75rem, 1fr) auto auto;
    align-items: center;
    column-gap: .6rem;
    text-align: left;
  }
  /* De omhulsels verdwijnen als vak: hun inhoud wordt zelf een vakje. */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-info { display: contents; }

  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .jersey-number,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .player-avatar-wrap-lg {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 1.7rem;
    text-shadow: none;
  }
  /* De naam pakt de volle breedte van de strook, met de positie en de cijfers
     eronder. Stonden ze alle drie naast elkaar, dan hield de naam op een scherm
     van 1280 nul pixels over: de cijfers en de knop hebben een vaste maat en de
     naam is het enige dat kan krimpen. En de naam is nu juist waarvoor je kijkt. */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-name {
    grid-column: 2 / 4;
    grid-row: 1;
    margin: 0;
    font-size: .95rem;
    line-height: 1.2;
    /* .batter-info centreert zijn tekst, en dat blijft gelden ook nu dat vak
       zelf geen vak meer is (display: contents erft door). Op een strook hoort
       de naam links te beginnen, op dezelfde lijn als de positie eronder. */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-position {
    grid-column: 2;
    grid-row: 2;
    font-size: .68rem;
    text-align: left;
    /* Niet laten breken: op 1280 kneep het cijferblok ernaast deze kolom naar
       nul pixels en viel "SS" uit elkaar over twee regels. */
    white-space: nowrap;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-stats {
    grid-column: 3;
    grid-row: 2;
    margin: 0;
    padding: .25rem .5rem;
    font-size: .74rem;
    text-align: right;
    /* Wél laten afbreken: het cijferblok is het enige dat kan wijken als de
       strook smal wordt, en het heeft de hoogte ervoor. */
    min-width: 0;
  }
  /* "2 for 3" staat bij een gekozen slagman boven de gemiddelden. Die twee
     regels blijven: op één regel is het cijferblok 180 pixels breed en dan
     past de strook niet meer naast de naam. */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-stats > .fw-bold {
    font-size: .82rem !important;
    line-height: 1.2;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-stats small { font-size: .68rem; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentBatter > .mt-3 {
    grid-column: 4;
    grid-row: 1 / 3;
    margin-top: 0 !important;
  }


  /* ── Count ──────────────────────────────────────────────────────── */
  /* De drie tellers stonden liggend (cijfer, woord en stippen naast elkaar),
     want ze hadden de volle kolombreedte. In de strook is daar geen ruimte voor
     en dan botsen ze; staand kost een teller 55 pixels breedte en past het ruim
     binnen dezelfde rijhoogte. Nu de kolom de helft van de rij is, staan de drie
     ruim uit elkaar en mogen de cijfers groter. */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-item {
    flex-direction: column;
    gap: .1rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .row { --bs-gutter-x: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-number { font-size: 1.9rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-label { font-size: .64rem; letter-spacing: .06em; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dots { gap: 6px; margin-top: .15rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dot { width: 13px; height: 13px; }

  /* ── De knop in de slagmanstrook ────────────────────────────────── */
  /* "Selecteer Speler" kost tachtig pixels op een strook waar de naam er maar
     honderd heeft. Het pictogram zegt hier hetzelfde; de tekst blijft in de
     knop staan voor wie hem voorleest. De werperskaart ernaast heeft die knop
     al als los pictogram. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentBatter > .mt-3 .btn {
    font-size: 0;
    padding: .35rem .5rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentBatter > .mt-3 .btn > i {
    font-size: .9rem;
    margin-right: 0 !important;
  }

  /* ── Pitching ───────────────────────────────────────────────────── */
  /* Deze kaart draagt meer dan de slagmankaart: een naam, negen cijfers en het
     seizoensaldo. Alles naast elkaar vraagt 411 pixels; naast de slagman had de
     kolom er 349 en werden het drie regels, onder het veld is er 479 en worden
     het er twee: de naam met de wisselknop, en daaronder IP tot en met K, ERA,
     pitches, strike% en het saldo op één regel.

     Dat is ook de reden dat de kaart hier past. Onder het veld is 611 min 495
     min de tussenruimte over, dus honderd pixels; als strook van twee regels
     staat hij op 88 en blijft het veld boven de vouw. */
  /* Twintig pixels eraf, en die zijn nodig: het veld eindigt op 828 en de vouw
     ligt op 943, dus de strook eronder mag er 103 zijn en was er 120. Het zijn
     er 104 geworden: het rugnummer mocht niet kleiner (zie hieronder). Ze komen
     uit lucht: de rand van de kaart, het rugnummer, de wisselknop en de
     regelhoogte van de cijfers. De kaartkop blijft zoals hij is; die staat op
     dezelfde ondergrens als de kop van het veld erboven, en twee koppen in één
     kolom die net niet even hoog zijn, zie je meteen. */
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-body { padding: .3rem .6rem; }
  /* De zwevende AI-knop staat vast op twintig pixels van de hoek en is 56 bij
     56; hij steekt daarmee dertig pixels over de rechterrand van deze kaart
     heen, op welke vensterhoogte dan ook. Daar staan de wisselknop en de
     rechterkolom van de cijfers, en in de lege staat de knop "Selecteer
     pitcher". Die strook blijft vrij, en links net zo veel: de cijferrijen
     verdelen hun breedte, dus alleen rechts inhouden zet het hele blok scheef.
     Alleen als die knop er is, want hij hangt er niet voor iedereen. */
  body:has(#chatFab) .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card > .card-body {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }
  /* Op een tablet is die kaart 240 tot 360 pixels breed, en dan kost twee keer
     inhouden te veel: de naam van de werper werd afgekapt na twee letters. In
     liggende stand houdt alleen de kant waar de knop hangt ruimte vrij; rechtop
     staat de kaart in de bovenste helft van het scherm en raakt de knop hem
     helemaal niet. */
  @media (max-width: 1199.98px) {
    body:has(#chatFab) .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card > .card-body {
      padding-left: .6rem;
      padding-right: 2.6rem;
    }
  }
  @media (max-width: 1199.98px) and (orientation: portrait) {
    body:has(#chatFab) .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card > .card-body {
      padding-right: .6rem;
    }
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .d-flex > .btn {
    padding: .1rem .4rem;
    line-height: 1.2;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center { text-align: left; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .d-flex {
    align-items: center !important;
    gap: .4rem;
  }
  /* Rugnummer, naam en "sinds" stonden onder elkaar; naast elkaar is het één
     regel in plaats van drie. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .text-start {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
  }
  /* Niet kleiner dan 1.17rem. Het rugnummer is goud op de paarse kaart en haalt
     in het lichte thema 3,41 op 1 tegen zijn eigen ondergrond; dat is genoeg
     voor grote tekst (vanaf 18,66 pixels vet) en te weinig voor gewone. Op
     1.1rem viel het aan de verkeerde kant van die grens. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .jersey-number {
    font-size: 1.35rem !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
    text-shadow: none;
    flex: 0 0 auto;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay h5 {
    font-size: .92rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .text-start > small { flex: 0 0 auto; font-size: .66rem; }

  /* De cijfers: drie regels die de hoogte van de kaart onder elkaar verdelen.
     Op één regel gepropt passen ze wel, maar dan staat er tussen "ER" en "BB"
     nog geen halve letter ruimte, en onder de kaart bleef de kolom leeg. Nu de
     zes wedstrijdcijfers op hun eigen regel, de drie gemiddelden daaronder, en
     het seizoensaldo eronder. Elke regel verdeelt zijn breedte over zijn eigen
     vakjes, dus de kolommen staan op vaste afstanden in plaats van tegen elkaar
     aan. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .border-top {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: .35rem !important;
    padding-top: .35rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    row-gap: .2rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .border-top > .row { flex: 0 0 auto; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .border-top > .text-center {
    flex: 0 0 auto;
    margin-top: 0 !important;
    white-space: nowrap;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .border-top > .text-center small { font-size: .74rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .row {
    flex-wrap: nowrap;
    margin: 0;
    /* g-2 zet een verticale goot van een halve rem als padding op elke kolom.
       Naast elkaar op een strook is dat acht pixels lucht boven elk cijfer, twee
       keer, en dat is precies wat deze kaart hoger maakte dan de kaart ernaast. */
    --bs-gutter-y: 0;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .row + .row {
    margin-top: 0 !important;
    padding-top: .3rem !important;
    /* Een lijn tussen de wedstrijd en het seizoen: de eerste regel gaat over
       deze wedstrijd, de tweede over het hele jaar. Zonder scheiding lezen de
       negen cijfers als één rij. */
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .row > [class*="col-"] {
    padding-left: .2rem;
    padding-right: .2rem;
    font-size: 1.05rem;
    line-height: 1.25;
  }
  /* Het kopje boven het cijfer mag kleiner blijven: het staat er om te zeggen
     wat het cijfer is, en het cijfer is waar je naar kijkt. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .row > [class*="col-"] > strong {
    font-size: .72rem;
    letter-spacing: .04em;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay h5 { font-size: 1rem; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .text-start > small { font-size: .72rem; }

  /* De lege staat: een waarschuwing, een grote bal, de regel "geen pitcher
     geselecteerd" en een knop, onder elkaar. Dat was een halve kaart hoog voor
     de mededeling dat er nog niets is. De waarschuwing zegt het al, dus de bal
     en die regel kunnen weg; wat overblijft is de melding met de knop eronder
     en dat past binnen dezelfde strook. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center.py-3 {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important;
    text-align: center;
    /* De melding en de knop naast elkaar, niet onder elkaar: onder elkaar is
       deze lege kaart hoger dan de gevulde, en dan springt het veld omhoog op
       het moment dat je een werper kiest. */
    /* De lege kaart is even hoog als de gevulde, dus de melding met de knop
       eronder hoort in het midden en niet tegen de bovenrand. De richting komt
       van de regel hierboven (deze kaart is een kolom); alleen het uitvullen
       staat hier. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex: 1 1 auto;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .alert,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .btn { flex: 0 0 auto; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .alert {
    margin-bottom: 0 !important;
    padding: .3rem .5rem !important;
    font-size: .7rem;
    line-height: 1.25;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .fa-baseball-ball,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > p { display: none; }
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .btn { margin-bottom: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════════
   HET SLAGGEMIDDELDE IN DE SLAGMANKAART: EIGEN KLEUREN

   De engine hing er Bootstrap-klassen aan: text-success (donkergroen) boven de
   .300, text-primary (donkerblauw) boven de .250. Dat zijn kleuren voor een
   witte ondergrond, en deze kaart is in alle drie de thema's donkerblauw. In
   het lichte thema haalde het cijfer daardoor 1,26 op 1 tegen zijn eigen vlak
   en in het kleurenblinde thema 2,87; onleesbaar dus, precies bij het getal
   waar je naar kijkt.

   Dezelfde fout stond eerder in de werperskaart. De les was toen: los het op
   bij wie de HTML schrijft, niet met een stapel CSS eroverheen. Vandaar vier
   eigen klassen, hier één keer ingekleurd.

   De kleur is versiering, niet de boodschap: het getal zelf staat er. In het
   kleurenblinde thema staan er daarom vier kleuren uit het Okabe-Ito-palet,
   die onderling te onderscheiden blijven bij deuteranopie en protanopie.
══════════════════════════════════════════════════════════════════ */
.batter-card .ls-avg-top   { color: #6ee7b7 !important; }
.batter-card .ls-avg-goed  { color: #93c5fd !important; }
.batter-card .ls-avg-matig { color: #fcd34d !important; }
.batter-card .ls-avg-laag  { color: #fca5a5 !important; }
.batter-card .ls-avg-geen  { color: rgba(220,232,255,.74) !important; }

/* In het lichte thema is de kaart zelf lichter blauw (de middelste stop van
   het verloop is #2756b8), en dan haalt geen enkele leesbare accentkleur nog
   4,5 op 1. Het cijferblok krijgt daar dus een donker vlak in plaats van het
   witte waasje: gemeten ging de ondergrond van #446ab9 naar #2e487e en daarmee
   staat dezelfde set kleuren er ruim op. */
[data-ls-theme="light"] .batter-card .batter-stats { background: rgba(0,0,0,.34) !important; }

[data-ls-theme="colorblind"] .batter-card .ls-avg-top   { color: #46c7a0 !important; }
[data-ls-theme="colorblind"] .batter-card .ls-avg-goed  { color: #7fc9f0 !important; }
[data-ls-theme="colorblind"] .batter-card .ls-avg-matig { color: #f0e442 !important; }
[data-ls-theme="colorblind"] .batter-card .ls-avg-laag  { color: #f08a4b !important; }


/* ══════════════════════════════════════════════════════════════════
   DEZELFDE INDELING OP EEN TABLET, MAAR DAN BINNEN HET VENSTER

   Vanaf 768 pixels staat er nu hetzelfde raster als op een laptop: de count en
   de slagman als stroken bovenaan, de scoringsknoppen eronder over de volle
   breedte, en rechts het veld met de werperskaart eronder. Wat op een tablet
   anders is, is de hoogte. Een iPad Pro 11 liggend heeft 834 pixels, een iPad
   Air 820, een iPad mini 744, en Safari houdt daar zelf nog een balk van af.

   Dezelfde indeling kostte in de maten van de laptop 1163 pixels. Deze band
   haalt daar 287 af, en de regel bij elke maat is dezelfde: alles wat lucht is
   mag weg, alles wat je aanraakt blijft. De scoringsknoppen houden hun 38
   pixels, de snelle acties hun 34; wat kleiner wordt zijn kaartkoppen,
   binnenmarges, de clubwapens, het rugnummer en de tussenruimte.

   Boven het tabblad gaat er ook wat af: het logo in de navigatiebalk (60 naar
   30), de datum in de bovenbalk van het scorebord, de voetregel van de line
   score en het kruimelpad. Die laatste twee staan elders in de app ook.

   Gemeten met de werpersacties in beeld (dus met een loper op honk, de langste
   stand van het scherm): 876 pixels op een iPad Pro 11 en een Air, 901 op een
   iPad 9.7. Zonder die kaart 776 en 801, en dan past het geheel op beide grote
   iPads binnen het venster. Rechtop past alles ruim: 975 van de 1194 op een
   iPad Pro 11, 1005 van de 1024 op een iPad 9.7.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ── Boven het tabblad ──────────────────────────────────────────── */
  /* De navigatiebalk draagt een logo van zestig pixels. Op een werkscherm is
     dat zestig pixels die niets doen; het logo blijft herkenbaar op 30. */
  /* De oefenpagina laadt hetzelfde script en draagt dus dezelfde body-klasse;
     die blijft buiten schot, zoals elke werkschermregel hier. */
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) .navbar { padding-top: .15rem !important; padding-bottom: .15rem !important; }
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) .navbar-logo { width: 30px; height: 30px; margin-right: .45rem; }
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) .navbar .nav-link { padding-top: .25rem; padding-bottom: .25rem; }
  body.live-scoring-active:has(.ls-scherm:not(.oefen-schermvolgorde)) .navbar-brand { padding-top: 0; padding-bottom: 0; }

  /* Het kruimelpad wijkt: het staat er om terug te kunnen, en die knop staat
     ook in Snelle Acties. Op een werkscherm dat binnen het venster moet passen
     is dat een rij van veertig pixels voor een link die al bestaat. Op een
     laptop blijft het kruimelpad staan en is de knop juist verborgen. */
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-kruimels { display: none; }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .btn-outline-secondary { display: flex !important; }

  /* Het scorebord: dezelfde onderdelen, minder lucht. De bovenbalk mag blijven
     afbreken als het moet (de themaknoppen moeten bereikbaar blijven, zie het
     blok over flex-wrap hierboven), maar met de datum eruit hoeft dat niet meer
     en scheelt dat 24 pixels. Die datum staat op de wedstrijdpagina en in de
     kalender, en wie aan het tellen is weet welke dag het is. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-datum { display: none; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar { padding: .2rem .8rem .15rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar .btn { padding: .15rem .45rem; font-size: .75rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row { padding: .25rem .9rem .3rem; gap: .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap { width: 40px; height: 40px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-fallback { font-size: .95rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col { gap: .15rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-name { font-size: .68rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-badge { padding: .15rem .4rem; min-width: 46px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-num { font-size: 1rem; }

  /* De line score volgt de breedte van het veld eronder, maar niet lager dan
     340 pixels. Die maat is gemeten: daaronder schuiven R, H en E buiten de
     kaart, want de tabel draagt negen innings plus drie totalen naast een
     teamnaam. Het veld is op een tablet smaller dan dat (240 tot 360), dus de
     twee randen lopen hier niet meer gelijk. Dat is de prijs; een tabel die
     zijn laatste drie kolommen wegschuift is duurder. */
  .ls-scherm:not(.oefen-schermvolgorde) {
    grid-template-columns: minmax(0, 1fr) minmax(21.25rem, var(--ls-rechts));
  }

  /* De line score staat naast het scorebord en bepaalt samen met dat scorebord
     de hoogte van de bovenste rij. De voetregel noemt de winnende en de
     verliezende werper; die staat ook in de box score en wijkt hier als eerste. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header { padding: .2rem .7rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header h5 { font-size: .78rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table td,
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table thead th { padding: .18rem .25rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark .card-footer { display: none; }

  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-tabs { margin-bottom: .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .nav-tabs.nav-fill { padding: .15rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .nav-tabs .nav-link { padding: .25rem .5rem; font-size: .74rem; }

  /* ── De kaartkoppen: een regel tekst, geen balk ─────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-header,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header {
    padding: .2rem .7rem !important;
    min-height: 0;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-header h5,
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-header h5,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .pitcher-card > .card-header h6,
  .ls-scherm:not(.oefen-schermvolgorde) .field-card > .card-header h6 { font-size: .78rem; }

  /* De tussenruimte tussen de kaarten: .5rem in plaats van .75. Vier kaarten
     onder elkaar, dus dat scheelt twaalf pixels op een venster waar ze tellen. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .card,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card { margin-bottom: .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-rechts .ls-kolom { gap: .5rem; }

  /* ── De twee stroken bovenaan ───────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-body { padding: .25rem .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-number { font-size: 1.5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-label { font-size: .58rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dot { width: 10px; height: 10px; }

  /* De slagmanstrook: hetzelfde raster, een maat kleiner. Het rugnummer is hier
     geen blikvanger maar een cijfer naast een naam. */
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card > .card-body { padding: .3rem .5rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .jersey-number,
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .player-avatar-wrap-lg { font-size: 1.4rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-name { font-size: .88rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-stats { padding: .15rem .4rem; font-size: .7rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .batter-card .batter-stats > .fw-bold { font-size: .76rem !important; }

  /* De twee stroken houden een ondergrens, anders springt de rij zodra je de
     eerste speler kiest. Op een tablet mag die grens lager: er staat geen foto
     in de slagmankaart. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-live-links > .bso-card,
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-speler > .card { min-height: 4.4rem; }

  /* ── De knoppenkaarten ──────────────────────────────────────────── */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body { padding: .4rem .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body > .row { margin-bottom: .2rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .ctrl-title { margin-bottom: .2rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .tier-toggle-btn {
    margin-top: .25rem !important;
    padding-top: .3rem;
    padding-bottom: .3rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-header { padding: .2rem .7rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard > .card-body { padding: .35rem .6rem; }

  /* De snelle acties: smallere kolommen, dus vier knoppen naast elkaar in plaats
     van drie en twee rijen in plaats van drie. De knoppen zelf houden hun maat. */
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-body { padding: .4rem .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card .d-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: .35rem !important;
  }

  /* De teamnaam in de line score kwam één pixel tekort ("Waterland Wolves 1"
     vraagt er 139, het vak is er 138) en werd daardoor met een beletselteken
     vier tekens korter. De kolom verbreden kan niet: die 138 is wat overblijft
     naast negen innings en drie totalen. De letter een maat kleiner wel. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table .team-name > strong { font-size: .95em; }

  /* De twee wisselknoppen (andere slagman, andere werper) zijn pictogrammen van
     32 bij 28 en 29 bij 22 pixels. Op een muis is dat genoeg, op een tablet tik
     je ernaast: daar worden het vierkanten van 36. */
  .ls-scherm:not(.oefen-schermvolgorde) #currentBatter > .mt-3 .btn,
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay > .text-center > .d-flex > .btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── De werperskaart ────────────────────────────────────────────── */
  /* Hier geen vaste hoogte maar een ondergrens: op een laptop houdt die maat de
     twee kolommen op dezelfde eindlijn, en op een tablet is er geen kolom om op
     uit te komen. Vast zou hier betekenen dat de onderste regel ("Seizoen W-L")
     in het Spaans net buiten de kaart valt. */
  .ls-scherm:not(.oefen-schermvolgorde) .ls-kolom-veld > .pitcher-card {
    height: auto;
    min-height: 11.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   EEN TABLET RECHTOP: DEZELFDE DRIE KOLOMMEN, ANDERE VERDELING

   Onder de 992 pixels is er minder breedte te verdelen. De slagmanstrook is het
   smalst bruikbaar op 260 pixels (daaronder botsen de naam en het cijferblok
   ernaast) en de count heeft er 152 nodig voor drie tellers met stippen. Half
   om half zou de count tweehonderd geven die hij niet gebruikt en de slagman
   tweehonderd die hij tekortkomt, dus de verhouding schuift mee. Wat daarna
   overblijft gaat naar het veld: dat is hier een uitkomst en geen keuze.

   Hier stond tot 17 september 2026 een eigen indeling met twee kolommen, omdat
   drie kolommen te smal werden en het veld er kleiner van werd. Die reden is
   vervallen nu de werperskaart onder het veld staat in plaats van naast de
   slagman: de derde kolom draagt nu beide.
══════════════════════════════════════════════════════════════════ */
/* Een grote tablet rechtop heeft hoogte over: op een iPad Pro 12.9 eindigt het
   scherm op 903 van de 1366 pixels. Die ruimte gaat naar het veld, want dat is
   de enige kaart waarvan de breedte de bruikbaarheid bepaalt: je tikt erop om
   lopers te zetten. Het veld groeit daar van 307 naar 369 pixels zonder dat de
   kolom ernaast te smal wordt (571 voor vier knopgroepen) en zonder dat de
   pagina langer wordt, want de linkerkolom blijft de langste. */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) {
  .ls-scherm:not(.oefen-schermvolgorde) { --ls-rechts: clamp(300px, 36vw, 420px); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Deze drie maten zijn op 768 pixels precies opgeteld: het raster heeft daar
     653 pixels te verdelen (677 min de twee tussenruimtes) en vraagt er 646.
     Ze staan bewust krap, want alles wat de een meer krijgt, gaat bij de ander
     af: 160 voor drie tellers met stippen, 248 voor een naam met een cijferblok
     ernaast, en de rest voor het veld. */
  .ls-scherm:not(.oefen-schermvolgorde) { --ls-rechts: clamp(230px, 31vw, 300px); }
  .ls-scherm:not(.oefen-schermvolgorde) #live > .row {
    grid-template-columns:
      minmax(10rem, .62fr)         /* count */
      minmax(15.5rem, 1.38fr)      /* aan slag */
      var(--ls-rechts);            /* veld en werper */
  }

  /* De clubwapens in het scorebord wijken. Het scorebord is hier 348 pixels
     breed, en daarvan gaat 46 naar elk wapen; wat overblijft is zestig pixels
     voor een teamnaam, en die viel daardoor in drie regels uiteen ("ZUIDERZE /
     E ZEBRAS / 1"). De naam is waaraan je de ploeg herkent, het wapen is
     versiering. */
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap { display: none; }

  /* Drie tellers in 160 pixels: elk vakje is er vijftig. Het woord "STRIKES"
     vraagt op .58rem met de letterafstand erbij 46 pixels en steekt dan net
     buiten zijn vakje; de stippen vragen er 38. Allebei een maat kleiner, en dan
     staat er weer lucht omheen. Het cijfer blijft groot: dat is wat je leest. */
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-label { font-size: .52rem; letter-spacing: .02em; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dot { width: 9px; height: 9px; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dots { gap: 3px; }

}

/* Onder de 1100 pixels is de werperskaart 238 tot 307 breed. "Sinds TOP5" kost
   daar zestig pixels die de naam nodig heeft, en dan wordt "Ruben de Boer"
   afgekapt. In welke inning hij binnenkwam staat in het spelverloop; hoe hij
   heet is waar je naar kijkt. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) #currentPitcherDisplay .text-start > small { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   EEN TABLET LIGGEND: DE COUNT LIGGEND EN DE KNOPPEN OP ÉÉN REGEL
══════════════════════════════════════════════════════════════════ */
/* Cijfer, woord en stippen naast elkaar kosten 34 pixels hoogte in plaats van
   72, en dat is op een tablet in liggende stand de moeite waard. Het kan alleen
   als de kolom breed genoeg is: een teller vraagt liggend 110 pixels (een cijfer
   van 24, het woord "STRIKES" van 40 en drie stippen van 38, met de ruimte
   ertussen), dus drie tellers vragen 330.

   Die 330 is er vanaf ongeveer 1090 pixels vensterbreedte. Op 1024 heeft de
   kolom er 305 en dan raken de stippen van "balls" het cijfer van "strikes":
   gemeten nul pixels ertussen. Daar blijven ze dus staan. De grens ligt op 1100
   en niet op 992. */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-item {
    flex-direction: row;
    justify-content: center;
    gap: .35rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dots { margin-top: 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* De scoringsknoppen passen hier op één regel: de linkerkolom is in dit
     raster 741 pixels breed in plaats van de 572 van de oude tabletindeling, en
     dan past "Caught Stealing" ruim binnen zijn kolom. Rijen van 2.4rem (38
     pixels) in plaats van 2.7; onder de 992 blijft het bij twee regels en 43
     pixels, en in de uitklappanelen blijven twee regels altijd toegestaan. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid { grid-auto-rows: 2.4rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .d-grid > .btn { white-space: nowrap; }
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card .collapse .d-grid > .btn { white-space: normal; }
  /* De werpersacties dragen dezelfde klasse als de scoringsknoppen, maar hun
     vier knoppen delen de volle breedte in plaats van een kolom. Op een tablet
     rechtop is dat 142 pixels per knop, en "Intento de Pickoff" past daar in het
     Spaans niet op één regel. Daar mogen het dus twee regels zijn. */
  .ls-scherm:not(.oefen-schermvolgorde) #pitcherActionsCard .d-grid > .btn { white-space: normal; }
}


/* ══════════════════════════════════════════════════════════════════
   TELEFOON IN LIGGENDE STAND: DE BOVENKANT KORTER

   Dit blok staat achteraan omdat het de indeling hierboven overstemt. Zet je
   deze regels bij het andere liggende blok, dan winnen de latere blokken en
   gebeurt er niets.

   Gemeten op een iPhone-formaat van 844 bij 390: de navbar (45), het scorebord
   (145) en de tabbladen (32) namen samen 222 pixels, meer dan de helft van het
   scherm, voordat je bij een knop was. De bovenste knoprij begon op 412 en was
   dus helemaal niet te zien: je moest scrollen voor de eerste bal of slag.

   Wat hier wegvalt staat ergens anders in de app: de regel "TOP 1 Inning"
   staat als badge in het scorebord eronder, en de competitie, de datum en het
   stadion staan op de wedstrijdpagina. De knoppen zelf houden hun 40 pixels,
   want liggend op een telefoon wordt er met een duim geklikt.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  /* ── De bovenkant korter, want daar zat de winst ──────────────────────
     Gemeten op 844 bij 390: navbar 45, scorebord 145, tabbladen 32. Samen
     222 van de 390 pixels, dus meer dan de helft van het scherm was op
     vóórdat je bij een knop was. Wat hieronder wegvalt staat ergens anders:
     de regel "TOP 1 Inning" staat als badge in het scorebord eronder, en de
     competitie, de datum en het stadion staan op de wedstrijdpagina. */
  /* De navigatiebalk wijkt hier. Hij kost 45 pixels en dat is precies het
     verschil tussen wel of niet bij de bovenste knoprij kunnen zonder te
     scrollen. Op dit scherm navigeer je niet, je telt: opslaan, einde
     wedstrijd en reset staan in de knoppen van de pagina zelf. Draai je de
     telefoon rechtop, dan staat de balk er meteen weer.

     Alleen op het scoringsscherm: body.live-scoring-active staat nergens
     anders. */
  body.live-scoring-active nav.navbar { display: none; }

  .ls-scherm:not(.oefen-schermvolgorde) .hero-top-bar {
    flex-wrap: nowrap;
    padding: .2rem .6rem;
    gap: .4rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-meta-inline,
  .ls-scherm:not(.oefen-schermvolgorde) .hero-locatie { display: none; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-acties { margin-left: auto; }

  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row { padding: .3rem .7rem .35rem; gap: .4rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap { width: 32px; height: 32px; padding: 2px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-label { font-size: .55rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-badge { padding: .15rem .4rem; min-width: 46px; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-num { font-size: .95rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-center-col { flex: 0 0 54px; gap: .2rem; }

  /* De line score staat ernaast en bepaalt dus mee hoe hoog die rij wordt.
     Krimpt alleen het scorebord, dan levert dat niets op. */
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header { padding: .2rem .6rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-dark > .card-header h5 { font-size: .78rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table { font-size: .68rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table thead th { padding: .15rem .2rem; font-size: .58rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .line-score-table td { padding: .16rem .2rem; }

  .ls-scherm:not(.oefen-schermvolgorde) .nav-tabs .nav-link { font-size: .72rem; padding: .3rem .5rem; }

  /* De laatste veertig pixels tot de eerste knop. Zonder deze regels begint de
     bovenste knoprij op 389 van de 390: je ziet er dan niets van. Met deze
     regels staat hij er helemaal op, en dat is het verschil tussen wel of niet
     kunnen tellen zonder te scrollen. */
  body.live-scoring-active > .container-fluid.mt-4 { margin-top: .25rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-scorebord { margin-bottom: .35rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) > .ls-blok-tabs { margin-bottom: .25rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card { margin-bottom: .35rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card > .card-body { padding: .3rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-item { padding: .1rem .2rem .2rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .count-label { font-size: .55rem; }
  .ls-scherm:not(.oefen-schermvolgorde) .bso-card .bso-dot { width: 7px; height: 7px; }

  /* In de knoppenkaart gaat alleen de lucht eruit: de knoppen zelf houden hun
     40 pixels, want liggend op een telefoon wordt er met een duim geklikt. */
  .ls-scherm:not(.oefen-schermvolgorde) .controls-card > .card-body,
  .ls-scherm:not(.oefen-schermvolgorde) .quick-actions-card > .card-body { padding: .5rem !important; }
  .ls-scherm:not(.oefen-schermvolgorde) .ctrl-title { font-size: .62rem; margin-bottom: .2rem; padding: .15rem .3rem; }
}

/* ══════════════════════════════════════════════════════════════════
   TELEFOON RECHTOP: DE LINE SCORE EN DE ZWEVENDE KNOP

   Drie dingen die op een telefoon al langer meeliepen, en die alle drie
   dezelfde tabel en dezelfde hoek van het scherm raken.

   1. De kolommen R, H en E schoven buiten beeld. De tabel is 373 pixels breed
      en het venster laat er 332 zien op een scherm van 390; op 360 vielen ook
      de laatste innings weg. Er zit wel een schuifbalk omheen, maar die zie je
      op een telefoon niet: de totalen waren gewoon weg.

   2. De teamnaam werd afgekapt. Dat blijft zo (de kolom is 110 pixels breed en
      "Duinstad Dolphins 1" past daar niet in), maar hij schuift nu niet meer
      mee weg: de naam blijft staan terwijl de innings eronderdoor lopen.

   3. De zwevende AI-knop lag over het werk. Hij staat vast onderin rechts en
      dekte afhankelijk van hoe ver je gescrold was het R-totaal af, het aantal
      outs, of gewoon een scoringsknop: op 390 pixels bleek hij over Error en
      over Triple te liggen. Op dit scherm is elke vierkante centimeter een
      knop, dus er is geen veilige hoek. Op een telefoon wijkt hij daarom van
      dit ene scherm; op elke andere pagina en op een tablet blijft hij staan.

   De teamnaam links en R, H en E rechts blijven staan, de innings schuiven
   eronderdoor. Dat werkt ook als de wedstrijd uitloopt en er kolommen
   bijkomen, en dat is precies waar een vaste indeling het zou begeven.

   De plakkende cellen krijgen een dichte achtergrond met color-mix: de tint
   die ze hadden was doorzichtig, en dan zie je de cijfers eronderdoor schuiven.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  body.live-scoring-active #chatFab { display: none !important; }

  .ls-scherm .line-score-table .team-header,
  .ls-scherm .line-score-table .team-name {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 92px;
    max-width: 104px;
  }
  /* De naam blijft afgekapt: "Duinstad Dolphins 1" past op geen enkele
     telefoon naast negen innings en drie totalen. Over twee regels laten
     lopen is geprobeerd en dat werd erger: de kolom is te smal voor het
     woord zelf, dus brak hij midden in "Duinstad". Met een kleinere letter
     passen er een paar tekens meer in, en de kolom schuift tenminste niet
     meer weg. De volledige namen staan in het scorebord erboven. */
  .ls-scherm .line-score-table .team-name {
    font-size: .68rem;
    letter-spacing: 0;
    padding-left: .4rem !important;
    padding-right: .15rem !important;
  }
  .ls-scherm .line-score-table .total-header:nth-last-child(3),
  .ls-scherm .line-score-table .total-runs   { position: sticky; right: 56px; z-index: 3; }
  .ls-scherm .line-score-table .total-header:nth-last-child(2),
  .ls-scherm .line-score-table .total-hits   { position: sticky; right: 28px; z-index: 3; }
  .ls-scherm .line-score-table .total-header:last-child,
  .ls-scherm .line-score-table .total-errors { position: sticky; right: 0; z-index: 3; }

  /* Vaste maat voor de drie totalenkolommen, anders klopt de plakafstand
     hierboven niet meer zodra een cel twee cijfers krijgt. */
  .ls-scherm .line-score-table .total-header,
  .ls-scherm .line-score-table .total-runs,
  .ls-scherm .line-score-table .total-hits,
  .ls-scherm .line-score-table .total-errors {
    min-width: 28px;
    width: 28px;
    max-width: 28px;
    padding-left: .1rem !important;
    padding-right: .1rem !important;
  }
  .ls-scherm .line-score-table .total-runs { font-size: .92rem !important; }

  /* Een randje schaduw waar de innings onder de vaste kolommen door lopen.
     Zonder dat teken lijkt de tabel gewoon te eindigen bij inning 7 en heeft
     niemand door dat er nog iets te schuiven valt. */
  .ls-scherm .line-score-table .team-header,
  .ls-scherm .line-score-table .team-name { box-shadow: 5px 0 6px -4px rgba(0, 0, 0, .45); }
  .ls-scherm .line-score-table .total-header:nth-last-child(3),
  .ls-scherm .line-score-table .total-runs { box-shadow: -5px 0 6px -4px rgba(0, 0, 0, .45); }

  /* Dichte achtergronden. De tinten blijven, maar nu bovenop de kaartkleur in
     plaats van er doorheen. */
  .ls-scherm .line-score-table .team-name     { background: color-mix(in srgb, #ffffff 3%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table .total-runs    { background: color-mix(in srgb, #f5c518 12%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table .total-hits    { background: color-mix(in srgb, #ffffff 3%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table .total-errors  { background: color-mix(in srgb, #e63946 6%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table thead .team-header { background: color-mix(in srgb, #ffffff 4%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table thead th.bg-primary { background: color-mix(in srgb, #1e3c72 40%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table thead th.bg-info    { background: color-mix(in srgb, #0dcaf0 20%, var(--ls-card)) !important; }
  .ls-scherm .line-score-table thead th.bg-warning { background: color-mix(in srgb, #f5c518 20%, var(--ls-card)) !important; }

  /* Het lichte thema heeft eigen tinten en een witte rij; die moeten hier ook
     dicht zijn, anders schuiven de innings zichtbaar onder de totalen door. */
  [data-ls-theme="light"] .ls-scherm .line-score-table .team-name    { background: color-mix(in srgb, #1e3c72 3%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table .total-runs   { background: color-mix(in srgb, #b8860b 8%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table .total-hits   { background: color-mix(in srgb, #1e3c72 3%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table .total-errors { background: color-mix(in srgb, #c0392b 4%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table thead .team-header { background: color-mix(in srgb, #1e3c72 8%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table thead th.bg-primary { background: color-mix(in srgb, #1e3c72 12%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table thead th.bg-info    { background: color-mix(in srgb, #2a5298 10%, #ffffff) !important; }
  [data-ls-theme="light"] .ls-scherm .line-score-table thead th.bg-warning { background: color-mix(in srgb, #b8860b 10%, #ffffff) !important; }
}


/* ══════════════════════════════════════════════════════════════════
   SCOREBORD: DE STAND KRIJGT DE RUIMTE DIE ER AL WAS

   De standregel is op een laptop 105 pixels hoog en het blokje erin was er 54:
   logo, naam en cijfer stonden als een kluitje in de bovenhoek van een half
   leeg vlak, en UIT stond driehonderd pixels verderop. Dat leest als opgepropt
   terwijl er juist ruimte over is. De kaart wordt er niet hoger van (hij rekt
   toch al mee met de line score ernaast); de onderdelen gaan alleen mee met de
   hoogte die de regel al had.

   De maten lopen mee met de breedte in plaats van per breekpunt te springen:
   het logo gaat van 44 pixels op een tablet naar 72 op een breed scherm, de
   stand van 30 naar 48. De bovengrenzen zijn gemeten aan de laagste regel in
   hun bereik, zodat de kaart nergens hoger wordt dan de line score ernaast.

   Dit blok staat achteraan omdat het de maten uit de blokken hierboven moet
   overstemmen. Onder de 992 blijft alles zoals het was: daar is het scorebord
   smal, staan de clubwapens uit en is elke pixel al verdeeld.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-row {
    padding: clamp(.35rem, .55vw, .65rem) clamp(.9rem, 1.1vw, 1.4rem);
    gap: .75rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-wrap {
    width: clamp(44px, 4.6vw, 72px);
    height: clamp(44px, 4.6vw, 72px);
    padding: 6px;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-logo-fallback { font-size: clamp(1rem, 1.5vw, 1.5rem); }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-col {
    column-gap: clamp(.5rem, .8vw, .9rem);
    row-gap: .15rem;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-name {
    font-size: clamp(.7rem, .85vw, .84rem);
    letter-spacing: .07em;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-score-display {
    font-size: clamp(1.9rem, 3.1vw, 3rem);
    letter-spacing: -2px;
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-team-label { font-size: clamp(.6rem, .7vw, .7rem); }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-center-col {
    flex: 0 0 clamp(62px, 5.5vw, 86px);
    gap: clamp(.28rem, .4vw, .5rem);
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-badge {
    padding: clamp(.18rem, .28vw, .35rem) .6rem;
    min-width: clamp(50px, 4.2vw, 66px);
  }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-inning-num { font-size: clamp(1.05rem, 1.4vw, 1.4rem); }
  .ls-scherm:not(.oefen-schermvolgorde) .hero-vs { font-size: .62rem; padding: .28rem .55rem; }
}