/* ============================================================
   TANTE ZUS - boules-live.css
   De publieke live-stand van het jeu-de-boulestoernooi.

   Dit is de PUBLIEKE site, niet de bedieningsapp. Daarom leunt deze
   pagina op style.css: dezelfde kleuren, dezelfde letters, dezelfde nav
   en footer. Hier staat alleen wat er nog niet was.

   Drie dingen sturen het ontwerp:

   1. WAAR HIJ GELEZEN WORDT. Op het terras, met de zon erop, op een
      telefoon die zijn helderheid in fel licht juist terugschroeft, door
      mensen van boven de vijftig. Alles wat je moet LEZEN staat daarom op
      creme met donkerbruine letters. Alleen de kop bovenaan is donker: dat
      is het merk en de sfeer, en er staat niets in wat je moet uitpluizen.
      De bedieningsapp (toernooi.css) blijft wel donker; die wordt binnen
      bediend, in een donker cafe, en dat is een andere gebruiker.
   2. De aftelklok is het grootste element op de pagina en staat in cijfers
      met vaste breedte, zodat hij niet bij elke seconde staat te wiebelen.
   3. Hij staat een avond lang open. Er beweegt dus zo min mogelijk: geen
      doorlopende animaties behalve het ene stipje dat zegt dat het live is,
      en dat stipje staat stil zodra iemand bewegingsarm werkt.
   ============================================================ */

/* ----------------------------------------
   DE LEESKLEUREN

   Elke kleur hieronder is gemeten tegen de achtergrond waar hij echt op
   staat, niet geschat. De getallen in het commentaar zijn contrast-
   verhoudingen volgens WCAG; de eis is 4.5 voor gewone tekst en 3 voor
   grote tekst (24px, of 18.66px bij vet).

   Twee dingen waar het eerder op misging en die deze lijst afvangt:

   - HET MERKORANJE IS TE LICHT VOOR KLEINE LETTERS. #E85C28 haalt op creme
     maar 2.86 en op wit 3.5. Het blijft dus wat het altijd was, een accent
     op randen, stippen en rails, maar zodra er LETTERS in het oranje staan
     of er tekst OP een oranje vlak ligt, gebruiken we --bl-accent-diep.
     Dat is dezelfde kleur, dieper ingekookt, en haalt 5.1 op creme en 6.24
     op wit.
   - DOORZICHTIGHEID LIEGT. Een kleur op 45 procent leest in de code als
     "iets zachter" maar is in beeld gewoon te licht. Daarom staan er hier
     precies twee inktsterktes en geen enkele daaronder.
---------------------------------------- */
:root {
  --bl-papier:        #FFFFFF;                 /* kaarten op creme */
  --bl-inkt:          #2D1B0D;                 /* 13.45 op creme, 16.48 op wit */
  --bl-inkt-zacht:    rgba(45, 27, 13, 0.72);  /* 5.91 op creme, 6.57 op wit */

  --bl-lijn:          rgba(45, 27, 13, 0.16);
  --bl-lijn-sterk:    rgba(45, 27, 13, 0.32);
  --bl-vlak:          rgba(45, 27, 13, 0.05);

  --bl-accent-diep:   #A83E12;                 /* 5.10 op creme, 6.24 op wit, wit erop 6.24 */
  --bl-accent-amber:  #8A4A00;                 /* de klok die bijna om is: 5.60 op creme, 6.86 op wit */
  --bl-accent-vlak:   rgba(232, 92, 40, 0.10); /* getinte vlakken op creme */
  --bl-accent-wit:    rgba(232, 92, 40, 0.14); /* getinte vlakken op wit */
  --bl-groen-diep:    #1F6B3F;                 /* 5.30 op creme, alleen "voor op schema" */

  /* De ondergrond van de sectie waar je in staat. Elke sectie zet hem op zijn
     eigen tint (zie .bl-sectie--creme en .bl-sectie--zacht). Dat is niet voor
     de sier: er staan vormen op de pagina die de achtergrond moeten NABOOTSEN
     om een lijn te onderbreken, zoals de stip op de tijdlijn. Zou die stip zijn
     eigen kleur noemen, dan hangt hij er scheef in zodra de sectie ooit van
     tint wisselt, en niets zou dat melden. */
  --bl-ondergrond:    var(--off-white);
}

/* ----------------------------------------
   De volgorde van de pagina

   De secties staan in de HTML in de volgorde van een lopende avond. Bij een
   AFGEROND toernooi klopt die volgorde niet meer: dan is de eindstand het
   antwoord en is het rooster naslag. In plaats van elementen te verplaatsen
   krijgt body dan een klasse en wisselt hier een enkel getal.

   Alleen deze twee secties wisselen, en er staat in geen van beide iets waar
   je met een toetsenbord in kunt landen, dus de tabvolgorde blijft de
   leesvolgorde.
---------------------------------------- */
/* De ondergrond van de hele pagina. Staat hier en niet op de losse secties,
   zodat een verborgen sectie nooit een donker gat achterlaat. */
#main-content {
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}
.bl-kop            { order: 1; }
.bl-erepodium      { order: 2; }
.bl-jouwteam       { order: 3; }
.bl-schemastrook   { order: 4; }
#blBanenSectie     { order: 5; }
#blRoosterSectie   { order: 6; }
#blStandSectie     { order: 7; }
#blSchemaSectie    { order: 8; }
#blMeldingSectie   { order: 9; }
#blKeuzeSectie     { order: 10; }
.bl-voet           { order: 11; }
.bl-is-afgerond #blStandSectie { order: 5; }
/* Een avond die uitgespeeld is: dan staat het antwoord op "wanneer is het weer"
   boven de teamkiezer, want "wanneer moeten wij" is die avond geen vraag meer.
   In geen van beide secties kun je met een toetsenbord landen, dus de
   tabvolgorde blijft de leesvolgorde. */
.bl-avond-gespeeld .bl-schemastrook { order: 3; }
.bl-avond-gespeeld .bl-jouwteam     { order: 4; }

/* ----------------------------------------
   Kop van de pagina

   Het enige donkere blok dat overblijft. Hier staat de naam van het toernooi
   en verder niets wat je moet lezen, dus hij mag de sfeer van het cafe
   vasthouden. Alles daaronder is licht.
---------------------------------------- */
.bl-kop {
  position: relative;
  background: #111111;
  /* Krapper dan het was. In de kop staat sinds deze ronde ook WELKE avond het
     is en HOE OUD de stand is, en die twee horen op een telefoon in beeld te
     staan zonder te scrollen. De ruimte daarvoor komt uit de lucht erboven. */
  padding: 6.5rem var(--space-lg) 2.4rem;
  overflow: hidden;
}
.bl-kop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 85% 20%, rgba(232, 92, 40, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.bl-kop__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
/* Een volwaardig tikdoel en geen regel tekst: dit is de enige link in de kop
   en hij wordt met een duim aangetikt, buiten, staand. */
.bl-kop__terug {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}
.bl-kop__terug:hover { color: var(--orange); }

.bl-kop__titel {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}
.bl-kop__titel em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 0.7em;
  /* Op bijna zwart haalt het merkoranje 5.39, en dit is bovendien grote
     tekst. Hier mag het dus wel. */
  color: var(--orange);
  text-transform: none;
  letter-spacing: 0;
}
/* WELKE AVOND IS DIT.
   Direct onder de titel, in leesletters en niet in een pil: dit is een zin die
   je leest, geen etiket dat je scant. */
.bl-kop__avond {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dark);
  margin-top: 1.1rem;
}

.bl-kop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

/* HOE OUD IS DE STAND, EN VERVERST HIJ ZICHZELF.
   Twee mededelingen op een regel. De eerste verandert per seconde, de tweede
   staat er vast. Het puntje ertussen komt uit de CSS zodat er in de HTML geen
   los leesteken zonder betekenis staat. */
.bl-kop__vers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dark);
}
.bl-kop__verstijd { font-weight: 500; }
.bl-kop__versbelofte { color: rgba(240, 228, 215, 0.82); }
.bl-kop__versbelofte::before {
  content: '\00B7';
  margin-right: 0.55rem;
}
/* Op een smal scherm valt de belofte op een eigen regel; dan hoort het puntje
   ervoor weg te vallen, want dan scheidt het niets meer. */
@media (max-width: 24rem) {
  .bl-kop__vers { display: block; }
  .bl-kop__versbelofte::before { content: none; }
  .bl-kop__versbelofte { display: block; }
}

/* Het live-stipje. Klopt rustig, en staat stil bij prefers-reduced-motion. */
.bl-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 0.4rem 0.95rem;
}
/* Wit op het volle merkoranje haalt 3.5 en dat is voor letters van 12 pixels
   te weinig. Dezelfde pil in de diepe variant haalt 6.24 en blijft even
   oranje. */
.bl-pil--live {
  color: #fff;
  background: var(--bl-accent-diep);
}
.bl-pil--klaar {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.bl-pil__stip {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: bl-klop 2s ease-in-out infinite;
}
@keyframes bl-klop {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ----------------------------------------
   Algemene sectie-opzet

   Twee tinten creme die elkaar afwisselen, met een haarlijn ertussen. Dat
   is genoeg om te zien waar een sectie begint zonder dat er een donkere
   band tussen hoeft.
---------------------------------------- */
.bl-sectie { padding: var(--space-lg) var(--space-lg); }
.bl-sectie--creme { --bl-ondergrond: var(--cream);     background: var(--bl-ondergrond); border-top: 1px solid var(--bl-lijn); }
.bl-sectie--zacht { --bl-ondergrond: var(--off-white); background: var(--bl-ondergrond); border-top: 1px solid var(--bl-lijn); }
.bl-sectie__inner  { max-width: 1100px; margin: 0 auto; }

.bl-sectie__kop {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--bl-inkt);
}
.bl-sectie__uitleg {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bl-inkt-zacht);
  margin-bottom: 1.8rem;
}

/* ----------------------------------------
   Nu op de baan

   Witte kaarten op creme. De klok is het grootste getal op de pagina en
   staat in de donkerste inkt die er is: dit is het ding dat iemand vanaf
   armlengte, met de zon op zijn scherm, moet kunnen aflezen.
---------------------------------------- */
.bl-banen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

.bl-baan {
  background: var(--bl-papier);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--orange);
  box-shadow: 0 14px 34px rgba(45, 27, 13, 0.08);
  padding: 1.6rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.bl-baan__label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bl-accent-diep);
}
.bl-baan__teams {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bl-baan__team {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bl-inkt);
  overflow-wrap: anywhere;
}
.bl-baan__tegen {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bl-inkt-zacht);
  line-height: 1;
}

/* De klok. Het grootste element op de pagina, met opzet. */
.bl-klok {
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 12vw, 5.4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--bl-inkt);
  transition: color 0.4s ease;
}
/* Vanaf twee minuten voor tijd. Dezelfde grens als de bedieningsapp.
   Op donker was dit een helder amber (#F5B841); op wit is datzelfde amber
   nauwelijks van de achtergrond te onderscheiden, dus staat hier de diepe
   variant. */
.bl-klok--bijna { color: var(--bl-accent-amber); }
/* Over tijd: de klok stopt niet, hij telt door in de plus. */
.bl-klok--over  { color: var(--bl-accent-diep); }

.bl-baan__onder {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
  line-height: 1.5;
}

/* ----------------------------------------
   De stand
---------------------------------------- */
/* De uitleg bij de ranglijst.
 *
 * Twee sterktes. Staat de stand ERNSTIG scheef (iemand speelde meer dan een
 * partij verschil), dan is het een echte waarschuwing en mag hij opvallen.
 * Voor de gewone opmerking, zoals "dit team gooit er onvermijdelijk een meer",
 * hoort geen alarm: dat is een feit dat erbij staat, niet iets wat er misgaat.
 * Zonder dat onderscheid gaat de bezoeker de oranje balk na de derde avond
 * gewoon niet meer zien.
 *
 * De TEKST is in beide gevallen even donker. Het verschil zit in het vlak
 * eronder en in de rand ernaast, niet in de leesbaarheid: een mededeling die
 * je niet kunt lezen is geen rustige mededeling maar een verdwenen mededeling. */
.bl-waarschuwing {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--bl-accent-vlak);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--bl-inkt);
}
.bl-waarschuwing--rustig {
  background: var(--bl-vlak);
  border-left-color: var(--bl-lijn-sterk);
  color: var(--bl-inkt-zacht);
}
.bl-waarschuwing--rustig .bl-waarschuwing__teken { filter: grayscale(1); opacity: 0.5; }

/* Meerdere zinnen onder elkaar, niet als een lopende lap tekst. */
.bl-waarschuwing__zin { display: block; }
.bl-waarschuwing__zin + .bl-waarschuwing__zin { margin-top: 0.4rem; }

.bl-tabelwikkel { overflow-x: auto; }
.bl-tabel {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  min-width: 30rem;
}
/* De kolomkoppen stonden op 0.62rem in 45 procent inkt: 10 pixels op 2.7.
   Dat is precies het soort tekst dat in de zon verdwijnt terwijl niemand
   kan aanwijzen wat er weg is. */
.bl-tabel th {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
  text-align: right;
  padding: 0 0.55rem 0.7rem;
  white-space: nowrap;
}
.bl-tabel th:nth-child(1),
.bl-tabel th:nth-child(2) { text-align: left; }
.bl-tabel td {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--bl-inkt);
  text-align: right;
  padding: 0.75rem 0.55rem;
  border-top: 1px solid var(--bl-lijn);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bl-tabel td:nth-child(2) {
  text-align: left;
  white-space: normal;
  /* break-word en niet anywhere: een teamnaam breekt bij voorkeur op een
     spatie, en alleen een woord dat echt niet past wordt afgebroken. Met
     `anywhere` werd "De Grindkoningen" op een telefoon "De Grindkoning / en". */
  overflow-wrap: break-word;
}
/* GEMETEN, 04-09-2026: DEZE DRIE REGELS DEDEN NIETS.
   Ze staan alle drie op een `<td>`, en `.bl-tabel td` hierboven (die maat en
   gewicht zet) weegt met zijn twee delen zwaarder dan een losse klasse. De
   plek, de naam en de punten stonden dus allemaal op 18,4 px in gewicht 400,
   terwijl hier 25,6 / 20 / 30,4 px in 900 en 600 staat. Geldige CSS, geen
   foutmelding, en precies het getal waar deze pagina voor bestaat bleef klein.
   De ouder staat nu in de selector, dezelfde reparatie als bij het vinkje in
   de app. `scripts/test/boules-live.test.js` legt dat vast. */
.bl-tabel td.bl-tabel__positie {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bl-inkt-zacht);
  text-align: left;
  width: 3.1rem;
}
.bl-tabel tr:nth-child(-n+3) td.bl-tabel__positie { color: var(--bl-accent-diep); }
.bl-tabel td.bl-tabel__naam {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.bl-tabel td.bl-tabel__punten {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--bl-inkt);
}
.bl-tabel__merk {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
  background: var(--bl-vlak);
  border-radius: 50px;
  padding: 0.12rem 0.5rem;
  margin-left: 0.45rem;
  vertical-align: 0.1rem;
}

/* Je eigen regel in de ranglijst.
   "Hoe staan we ervoor" is bij veertien teams in de praktijk "waar sta ik",
   en dan zoek je op een telefoon je naam in een lijst van veertien. Het team
   is al bekend, dus dat zoeken hoeft niet. Een achtergrond en een oranje kant,
   geen kleur op de letters zelf: de tekst moet even leesbaar blijven. */
.bl-tabel__rij--mijn td {
  background: var(--bl-accent-vlak);
  font-weight: 500;
}
.bl-tabel__rij--mijn td:first-child {
  box-shadow: inset 3px 0 0 var(--orange);
}
.bl-tabel__rij--mijn .bl-tabel__positie { color: var(--bl-inkt); }

/* ----------------------------------------
   Podium bij een afgerond toernooi
---------------------------------------- */
.bl-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.bl-podium__plek {
  background: var(--bl-papier);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--bl-lijn-sterk);
  padding: 1.6rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bl-podium__plek--1 {
  border-top-color: var(--orange);
  box-shadow: 0 20px 50px rgba(45, 27, 13, 0.12);
}
.bl-podium__rang {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
}
.bl-podium__plek--1 .bl-podium__rang { color: var(--bl-accent-diep); }
.bl-podium__naam {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--bl-inkt);
  overflow-wrap: anywhere;
}
.bl-podium__punten {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bl-inkt-zacht);
}

/* ----------------------------------------
   Schema van de avond (het terugvalschema)
---------------------------------------- */
.bl-blok { margin-bottom: 1.6rem; }
.bl-blok__kop {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.bl-blok__titel {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bl-accent-diep);
}
.bl-blok__status {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
}
.bl-partijen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.6rem;
  list-style: none;
}
.bl-partij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  background: var(--bl-papier);
  border: 1px solid var(--bl-lijn);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--bl-inkt);
  line-height: 1.35;
}
.bl-partij--bezig {
  background: var(--bl-accent-wit);
  border-color: rgba(232, 92, 40, 0.5);
}
/* GEEN opacity op een vervallen partij.
   Doorzichtigheid verlaagt het contrast van alles wat eronder valt zonder
   dat het ergens in de kleuren te zien is, en dus ook niet in een meting.
   "Vervallen" zeggen we daarom met een woord, een streep erdoor en een
   zachtere inkt, en dat is alle drie te meten. */
.bl-partij--vervallen {
  background: var(--bl-vlak);
  border-style: dashed;
}
.bl-partij__namen { overflow-wrap: anywhere; }
.bl-partij__baan {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
  margin-bottom: 0.15rem;
}
.bl-partij__uitslag {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bl-inkt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "Nog te spelen" en "vervallen" zijn rustige mededelingen, maar ze stonden in
   cursief op 40 procent en dat is op armlengte niet meer te lezen. Nu gewone
   letters, iets kleiner dan de namen, en genoeg contrast om ze in een oogopslag
   te pakken. */
.bl-partij__nog {
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--bl-inkt-zacht);
  white-space: nowrap;
}

.bl-partij__nog--vervallen {
  color: var(--bl-inkt-zacht);
  text-decoration: line-through;
}

/* Wie tegen wie: twee namen met een streepje ertussen. Het streepje krijgt
   lucht, zodat de NAMEN het beeld bepalen en het streepje alleen het verband
   legt. */
.bl-partij__team {
  color: var(--bl-inkt);
}

.bl-partij__streep {
  margin: 0 0.45em;
  color: var(--bl-accent-diep);
}

/* Een lopende partij: geen cursief zinnetje maar een pil die opvalt, met de
   aftellende tijd erin. Dat is de enige regel in het rooster die beweegt, dus
   hij mag het felst zijn. */
.bl-partij__bezig {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: var(--bl-accent-wit);
  border: 1px solid rgba(232, 92, 40, 0.55);
  white-space: nowrap;
}

.bl-partij__stip {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--orange);
  animation: bl-klop 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bl-partij__stip { animation: none; }
}

.bl-partij__bezigtekst {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl-accent-diep);
}

.bl-partij__klok {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bl-inkt);
}

.bl-partij__klok--bijna { color: var(--bl-accent-amber); }
.bl-partij__klok--over  { color: var(--bl-accent-diep); }

/* ----------------------------------------
   LOPEN WE UIT, JA OF NEE

   Een strook tussen de kop en de rest, over de volle breedte. Een zin en
   geen getal, want de klant vroeg letterlijk om te weten of er uitloop is,
   niet om een cijfer dat je zelf moet duiden.

   Goed nieuws is stil. "We liggen op schema" krijgt geen kleur en geen
   uitroepteken; alleen uitloop krijgt een getint vlak en een oranje stip.
   Zou alles oranje zijn, dan kijkt na twee avonden niemand er meer naar en
   heeft de strook geen waarde meer op de avond dat het er wel toe doet.

   De ZIN zelf staat in beide gevallen in dezelfde donkere inkt. Het verschil
   moet in de kleur eromheen zitten, nooit in hoe goed je hem kunt lezen.
---------------------------------------- */
.bl-schemastrook {
  background: var(--cream);
  border-bottom: 1px solid var(--bl-lijn);
  padding: 1.1rem var(--space-lg);
}
.bl-schemastrook__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
}
.bl-schemastrook__stip {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--bl-lijn-sterk);
  transform: translateY(-0.1rem);
}
.bl-schemastrook__zin {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bl-inkt);
}
.bl-schemastrook__bij {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bl-inkt-zacht);
  line-height: 1.35;
}
/* Alleen de afwijking krijgt kleur. */
.bl-schemastrook--uit  { background: var(--bl-accent-vlak); }
.bl-schemastrook--uit .bl-schemastrook__stip  { background: var(--orange); }
.bl-schemastrook--voor .bl-schemastrook__stip { background: var(--bl-groen-diep); }

/* ----------------------------------------
   JOUW TEAM: het antwoord bovenaan

   Deze sectie lag eerst tegen de kop aan, in hetzelfde zwart, want samen met
   de titel is dit het eerste scherm. Precies daar zat de klacht: het eerste
   scherm is ook het scherm waar het meeste te LEZEN valt (wanneer moet ik,
   waar staan we), en dat stond in bijna zwart. De kop blijft donker, dit
   blok is creme, en het antwoord zelf is een witte kaart.
---------------------------------------- */
.bl-jouwteam {
  background: var(--cream);
  padding: 2.4rem var(--space-lg);
}
.bl-jouwteam__inner { max-width: 1100px; margin: 0 auto; }

.bl-mijnteam__vraag {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bl-inkt);
  margin-bottom: 0.35rem;
}
.bl-mijnteam__bij {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bl-inkt-zacht);
  margin-bottom: 1rem;
}
/* Twee kolommen, ook bij veertien teams. Een vrij lopende rij pillen werd bij
   veertien namen zeven rijen van wisselende lengte, en dan is het zoeken in
   plaats van lezen. Links uitgelijnd in een vaste kolom lees je als een lijst. */
.bl-mijnteam__namen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.45rem;
}
.bl-teamknop {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  color: var(--bl-inkt);
  background: var(--bl-papier);
  border: 1px solid var(--bl-lijn-sterk);
  /* Een afgeronde rechthoek en geen pil: verderop in het rooster staan de
     teams die aan de beurt zijn wel als pillen, en die zijn NIET aan te tikken.
     Twee dingen die hetzelfde doen horen er hetzelfde uit te zien, twee dingen
     die dat niet doen juist niet. */
  border-radius: var(--radius-sm);
  /* 48 pixels: dit wordt met een duim aangetikt, staand, buiten. */
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bl-teamknop:hover,
.bl-teamknop:focus-visible {
  background: var(--bl-accent-diep);
  border-color: var(--bl-accent-diep);
  color: #fff;
}

/* Het antwoord. Dit is waar de pagina voor bestaat, dus het is ook het enige
   blok in deze sectie met een eigen vlak: wit, met een oranje kant, zodat het
   van de creme afkomt zonder dat er iets donkerder hoeft te worden. */
.bl-antwoord {
  position: relative;
  background: var(--bl-papier);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(45, 27, 13, 0.08);
  padding: 1.3rem 1.4rem 1.4rem;
}
.bl-antwoord__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bl-accent-diep);
  margin-bottom: 0.45rem;
}
.bl-antwoord__zin {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--bl-inkt);
  overflow-wrap: anywhere;
}
.bl-antwoord__bij {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* De eigen plek in de ranglijst: de tweede vraag, in dezelfde blik. Het cijfer
   staat los en groot, want dat is waar het oog naartoe gaat. */
.bl-antwoord__stand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bl-lijn);
}
.bl-antwoord__plek {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--bl-inkt);
  font-variant-numeric: tabular-nums;
}
.bl-antwoord__plekbij {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
  line-height: 1.3;
}
/* Het enige dat per seconde verandert. In het diepe oranje, want het is het
   antwoord op "hoe lang nog"; de rest van de regel staat er alleen omheen. */
.bl-antwoord__over {
  color: var(--bl-accent-diep);
  font-weight: 500;
}
/* Een omlijnde knop en geen onderstreepte tekst. Met een tikdoel van 48 pixels
   kwam die streep een halve centimeter onder de letters te hangen en zag het
   eruit als een fout in de opmaak. */
.bl-antwoord__wissel {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bl-inkt);
  background: none;
  border: 1px solid var(--bl-lijn-sterk);
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  min-height: 48px;
  cursor: pointer;
}
.bl-antwoord__wissel:hover,
.bl-antwoord__wissel:focus-visible { color: var(--bl-accent-diep); border-color: var(--orange); }

/* ----------------------------------------
   HET ROOSTER: DE AVOND ALS TIJDLIJN

   Links een rail met de tijd, rechts het blok. Dat is geen versiering: een
   avond IS een volgorde in de tijd, en de rail maakt in een oogopslag
   zichtbaar waar je nu bent en hoeveel er nog komt.

   De tijd staat in Barlow Condensed, dezelfde zware smalle cijfers als de
   aftelklok hierboven, zodat een tijd op deze pagina er overal hetzelfde
   uitziet en vanaf armlengte te lezen is.
---------------------------------------- */
.bl-tijdlijn { list-style: none; }

.bl-blokrij {
  display: grid;
  /* De rail is precies breed genoeg voor "20:58" in deze letter plus de ruimte
     naar de stip toe. Krap je hem verder in, dan schuift het getal tegen de
     stip aan en leest "20:58" als "20:58 graden". */
  grid-template-columns: 6.8rem 1fr;
  gap: 0 1.1rem;
  padding-bottom: 1.5rem;
}
.bl-blokrij:last-child { padding-bottom: 0; }

/* De rail zelf. De lijn loopt door tot onder het blok, behalve bij het
   laatste: dan houdt de avond daar op en hoort de lijn daar ook op te
   houden. */
.bl-blokrij__rail {
  position: relative;
  text-align: right;
  padding-right: 1.15rem;
}
.bl-blokrij__rail::after {
  content: '';
  position: absolute;
  top: 1.9rem;
  bottom: -1.5rem;
  right: -0.03rem;
  width: 1px;
  background: var(--bl-lijn-sterk);
}
.bl-blokrij:last-child .bl-blokrij__rail::after { display: none; }

.bl-blokrij__tijd {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--bl-inkt-zacht);
}
/* De stip zit op de rail en moet de lijn onderbreken, dus hij heeft de kleur
   van de sectie waar hij in staat. Die haalt hij op via --bl-ondergrond en
   niet als een eigen kleur, zodat hij vanzelf meeschuift als de sectie ooit
   van tint wisselt. */
.bl-blokrij__stip {
  position: absolute;
  top: 0.35rem;
  right: -0.28rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bl-ondergrond);
  box-shadow: inset 0 0 0 2px var(--bl-lijn-sterk);
}

.bl-blokrij__kop {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  padding-top: 0.15rem;
}
.bl-blokrij__nummer {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bl-inkt);
}
/* De status van een blok: gespeeld, nu bezig, of over hoeveel minuten.
   Dit is een van de drie dingen waar iemand op deze pagina naar zoekt, dus elk
   van de drie heeft een eigen vorm. Zonder dat onderscheid stonden ze alle drie
   klein en grijs door elkaar en moest je ze lezen om te weten welke je las. */
.bl-blokrij__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--bl-inkt);
  line-height: 1.2;
}
/* Voorbij: zacht, in de schrijfletter, maar wel te lezen. */
.bl-blokrij__status--gespeeld {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
}
/* Wat nu gebeurt: het enige dat een vol vlak krijgt. In het diepe oranje,
   want wit op het volle merkoranje haalt maar 3.5. */
.bl-blokrij__status--bezig {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--bl-accent-diep);
  border-radius: 50px;
  padding: 0.3rem 0.7rem;
}
.bl-blokrij__statusstip {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
  animation: bl-klop 2s ease-in-out infinite;
}
/* "kan nog schuiven": een blok dat de rekenkern zelf niet hard noemt.
   Bewust het stilste kenmerk op deze pagina. In het begin van een avond staan
   er zoveel teams gelijk dat bijna elk blok zo is; zou dit opvallen, dan zou
   de bezoeker het na een minuut niet meer zien en had het net zo goed weg
   kunnen blijven. Stil betekent hier: een gestreepte rand en kleine letters,
   niet lichtgrijze tekst. */
.bl-blokrij__los {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
  border: 1px dashed var(--bl-lijn-sterk);
  border-radius: 50px;
  padding: 0.15rem 0.5rem;
}
.bl-blokrij__jij {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--bl-accent-diep);
  border-radius: 50px;
  padding: 0.2rem 0.55rem;
}

/* Gespeeld is voorbij: het mag zachter staan dan wat er nog komt. */
.bl-blokrij--gespeeld .bl-blokrij__tijd { color: var(--bl-inkt-zacht); }
.bl-blokrij--gespeeld .bl-blokrij__nummer { color: var(--bl-inkt-zacht); }

.bl-blokrij--bezig .bl-blokrij__tijd { color: var(--bl-accent-diep); }
.bl-blokrij--bezig .bl-blokrij__stip {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(232, 92, 40, 0.22);
}


/* Je eigen blok: de rail wordt oranje. Dat is het enige verschil dat je op
   een armlengte afstand nog ziet, en het is precies genoeg. */
.bl-blokrij--mijn .bl-blokrij__rail::after { background: var(--orange); }
.bl-blokrij--mijn .bl-blokrij__stip { box-shadow: inset 0 0 0 2px var(--orange); }
.bl-blokrij--mijn.bl-blokrij--bezig .bl-blokrij__stip { box-shadow: 0 0 0 4px rgba(232, 92, 40, 0.22); }
.bl-blokrij--mijn .bl-blokrij__tijd { color: var(--bl-inkt); }
/* Een blok dat je al gespeeld hebt is nog steeds van jou, maar het is voorbij.
   Zonder deze regel stond de tijd van een gespeeld eigen blok net zo fel als
   die van het blok dat nu bezig is. */
.bl-blokrij--mijn.bl-blokrij--gespeeld .bl-blokrij__tijd { color: var(--bl-inkt-zacht); }
/* Hetzelfde merkje, maar dan omlijnd in plaats van gevuld. Een gevuld vlak in
   een lichtere oranje zou wit onleesbaar maken; een omlijning zegt precies
   hetzelfde en blijft leesbaar. */
.bl-blokrij--gespeeld .bl-blokrij__jij {
  color: var(--bl-accent-diep);
  background: none;
  box-shadow: inset 0 0 0 1px var(--bl-accent-diep);
}

.bl-blokrij__partijen { list-style: none; display: grid; gap: 0.4rem; }
.bl-blokpartij {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  background: var(--bl-papier);
  border: 1px solid var(--bl-lijn);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--bl-inkt);
}
/* Zie de opmerking bij .bl-partij--vervallen: geen opacity, want die haalt
   het contrast onderuit zonder dat het in een kleur te zien is. */
.bl-blokpartij--vervallen {
  background: var(--bl-vlak);
  border-style: dashed;
}
.bl-blokpartij__baan {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
}
.bl-blokpartij__namen { flex: 1 1 12rem; overflow-wrap: anywhere; }
/* Het streepje tussen de twee namen. Gewoon een koppelteken, hetzelfde teken
   als in de uitslag ernaast (13 - 9), met lucht eromheen zodat het de namen
   scheidt in plaats van eraan vast te plakken. */
.bl-blokpartij__streep {
  margin: 0 0.45em;
  color: var(--bl-accent-diep);
}
.bl-blokpartij__uitslag {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bl-inkt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}
.bl-blokpartij__nog {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bl-inkt-zacht);
  margin-left: auto;
}

/* Een lopende partij in het rooster: dezelfde aftelling als bovenaan, klein.
   Zonder deze klok stond er bij "blok 3, nu bezig" geen enkel getal, terwijl
   dat juist de tijd is die bepaalt hoe laat het blok daarna begint. */
.bl-blokpartij--bezig {
  background: var(--bl-accent-wit);
  border-color: rgba(232, 92, 40, 0.5);
}
.bl-blokpartij__klok {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bl-inkt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bl-blokpartij__klok--bijna { color: var(--bl-accent-amber); }
.bl-blokpartij__klok--over  { color: var(--bl-accent-diep); }


/* Een blok dat nog niet ingedeeld is.
 *
 * De namen staan met opzet als EEN doorlopende rij en nooit twee aan twee
 * onder elkaar. Van dit blok is alleen bekend welke teams aan de beurt zijn;
 * wie tegen wie wordt op stand bepaald, vlak van tevoren. Zouden de namen
 * hier per twee onder elkaar staan, dan leest iemand daar een koppeling in
 * die er niet is, en stelt hij zich in op een tegenstander die het niet
 * wordt. Vandaar ook de zin eronder: de vorm en de woorden zeggen hetzelfde. */
.bl-blokbeurt {
  background: var(--bl-vlak);
  border: 1px dashed var(--bl-lijn-sterk);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
}
.bl-blokbeurt__kop {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bl-inkt-zacht);
  margin-bottom: 0.5rem;
}
.bl-blokbeurt__namen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--bl-inkt);
}
/* Elke naam een eigen omhulsel, zoals de knoppen waarmee je je team koos.
   Dat is de vorm van een verzameling losse dingen. Zou hier een scheidingsteken
   tussen de namen staan, dan valt dat bij het afbreken naar een nieuwe regel
   aan het begin van die regel, en dan gaat de rij er alsnog uitzien als een
   indeling in paren. */
.bl-blokbeurt__namen .bl-naam {
  background: var(--bl-papier);
  border: 1px solid var(--bl-lijn);
  border-radius: 50px;
  padding: 0.3rem 0.7rem;
  line-height: 1.25;
}
.bl-blokbeurt__namen .bl-naam--mijn {
  background: var(--bl-accent-diep);
  border-color: var(--bl-accent-diep);
  color: #fff;
  box-shadow: none;
}
.bl-blokbeurt__nogniet {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bl-inkt-zacht);
  margin-top: 0.55rem;
  line-height: 1.4;
}

.bl-naam { overflow-wrap: anywhere; }
/* Een markeerstift onder je eigen naam. De letters zelf blijven donker, want
   het merk mag opvallen maar de naam moet leesbaar blijven. */
.bl-naam--mijn {
  color: var(--bl-inkt);
  font-weight: 500;
  box-shadow: inset 0 -0.42em 0 rgba(232, 92, 40, 0.4);
}

.bl-tijdlijn__voet {
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--bl-inkt-zacht);
}
.bl-tijdlijn__voetzin { display: block; }
.bl-tijdlijn__voetzin + .bl-tijdlijn__voetzin { margin-top: 0.3rem; }

/* ----------------------------------------
   Toernooikiezer, meldingen en voetregel
---------------------------------------- */
.bl-keuze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.bl-keuze__kaart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bl-papier);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--orange);
  padding: 1.4rem 1.3rem;
}
.bl-keuze__titel {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bl-inkt);
}
.bl-keuze__datums {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
}
.bl-keuze__kaart .btn { margin-top: auto; text-align: center; }

/* De oranje knop van de site is te licht voor witte letters: wit op #E85C28
   haalt 3.5 en de eis is 4.5. Op deze pagina staat hij daarom op dezelfde
   kleur, dieper ingekookt (6.24). Alleen hier, want style.css is de bron voor
   de rest van de site en die wordt in deze ronde niet aangeraakt. */
#main-content .btn--primary {
  background-color: var(--bl-accent-diep);
  color: #fff;
}
/* De hoverkleur is het bestaande --orange-dark uit style.css (wit erop haalt
   4.84), geen nieuwe kleur. De schaduw komt van .btn--primary zelf; die wordt
   hier met opzet niet overschreven. */
#main-content .btn--primary:hover {
  background-color: var(--orange-dark);
}

.bl-melding {
  max-width: 42rem;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--bl-inkt-zacht);
}
.bl-melding strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--bl-inkt);
  margin-bottom: 0.6rem;
}
.bl-melding .btn { margin-top: 1.4rem; }

.bl-voet {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--bl-inkt-zacht);
  text-align: center;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--cream);
  border-top: 1px solid var(--bl-lijn);
}
.bl-voet__pauze { color: var(--bl-accent-diep); }

/* Alles wat er nog niet is, is er ook niet. Zo hoeft de JS alleen een klasse
   om te zetten en nooit een hoogte of een display-waarde te onthouden. */
[hidden] { display: none !important; }

/* ----------------------------------------
   Mobiel
---------------------------------------- */
@media (max-width: 768px) {
  .bl-kop      { padding: 5.5rem 1.25rem 1.9rem; }
  .bl-sectie   { padding: 2.6rem 1.25rem; }
  .bl-jouwteam { padding: 2rem 1.25rem; }
  .bl-voet     { padding: 2rem 1.25rem 2.6rem; }
  .bl-banen    { grid-template-columns: 1fr; }
  .bl-podium   { grid-template-columns: 1fr; gap: 0.7rem; }
  .bl-baan     { padding: 1.3rem 1.2rem 1.5rem; }
  .bl-schemastrook { padding: 1rem 1.25rem; }
}

/* De tijdlijn op een telefoon.
 *
 * De rail wordt smaller maar de tijd blijft groot: dat is het getal waar
 * iemand voor op deze pagina komt. Wat er wel af mag is de ruimte eromheen,
 * en de uitslag springt onder de namen zodra de regel niet meer past. */
@media (max-width: 560px) {
  .bl-blokrij { grid-template-columns: 5.4rem 1fr; gap: 0 0.85rem; padding-bottom: 1.25rem; }
  .bl-blokrij__rail { padding-right: 0.8rem; }
  .bl-blokrij__rail::after { top: 1.6rem; bottom: -1.25rem; }
  .bl-blokrij__tijd { font-size: 1.7rem; }
  .bl-blokrij__stip { top: 0.2rem; }
  .bl-blokpartij { padding: 0.7rem 0.8rem; font-size: 1rem; }
  .bl-blokpartij__uitslag { font-size: 1.4rem; }
  .bl-blokpartij__klok { font-size: 1.4rem; }
  .bl-antwoord { padding: 1.1rem 1.1rem 1.2rem; }
  .bl-schemastrook__inner { gap: 0.35rem 0.7rem; }
  .bl-schemastrook__zin { font-size: 1.1rem; }
  .bl-schemastrook__bij { font-size: 1.1rem; }
}

/* De stand op een telefoon.
 *
 * De tabel MOET hier passen zonder zijwaarts schuiven. De kolom "Gem." is
 * precies de kolom waar de waarschuwing boven de tabel naar verwijst zodra de
 * ranglijst scheef staat; die achter een horizontale schuifbalk verstoppen
 * maakt die waarschuwing zinloos.
 *
 * Wat er dan af moet is "Gewonnen". Dat is de eerste tiebreak en verklaart
 * waarom twee teams met evenveel punten toch op volgorde staan, maar op een
 * telefoon wint leesbaarheid van volledigheid. Op een bredere telefoon en op
 * een tablet staat hij er gewoon bij.
 *
 * De lettergroottes gaan hier NIET omlaag onder de 0.85rem. Dat was de oude
 * uitweg om alles passend te krijgen en precies daar begon het onleesbaar
 * worden. */
@media (max-width: 560px) {
  .bl-tabel               { min-width: 0; }
  .bl-tabel th            { padding: 0 0.28rem 0.6rem; letter-spacing: 0.04em; font-size: 0.8rem; }
  .bl-tabel td            { padding: 0.75rem 0.28rem; font-size: 1.05rem; }
  .bl-tabel td.bl-tabel__positie { width: 2.1rem; font-size: 1.4rem; }
  .bl-tabel td.bl-tabel__naam    { font-size: 1.15rem; }
  .bl-tabel td.bl-tabel__punten  { font-size: 1.6rem; }
  .bl-tabel__merk         { margin-left: 0; margin-top: 0.2rem; }
  .bl-kolom--breed        { display: none; }
}
@media (max-width: 480px) {
  .bl-kop      { padding: 5rem 1rem 1.7rem; }
  .bl-sectie   { padding: 2.2rem 1rem; }
  .bl-jouwteam { padding: 1.8rem 1rem; }
  .bl-voet     { padding: 1.6rem 1rem 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-pil__stip,
  .bl-blokrij__statusstip { animation: none; }
}


/* ----------------------------------------
   HET EREPODIUM
   Verschijnt zodra de laatste partij van de laatste avond binnen is. Alles
   erin is een graad groter dan de rest van de pagina, want dit is het moment
   waarop iemand zijn telefoon aan de rest van de tafel laat zien.
---------------------------------------- */
.bl-erepodium {
  position: relative;
  overflow: hidden;
  background: var(--bl-inkt);
  color: var(--off-white, #F6F1E7);
  padding: 2.5rem 1.25rem 2.75rem;
}
.bl-erepodium__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bl-erepodium__inner {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
}
.bl-erepodium__aanhef {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.72);
}
.bl-erepodium__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.bl-erepodium__plek {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(246, 241, 231, 0.16);
  border-radius: 0.6rem;
  background: rgba(246, 241, 231, 0.04);
}
.bl-erepodium__plek--1 {
  border-color: var(--orange, #E85C28);
  background: rgba(232, 92, 40, 0.14);
  padding: 1.35rem 1.1rem;
}
.bl-erepodium__rang {
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 700;
  /* Was 0.45 en dat haalde 3.26 op de donkere ondergrond: net genoeg voor
     grote tekst en te weinig zodra iemand er een graad kleiner van maakt. */
  color: rgba(246, 241, 231, 0.68);
  text-align: center;
}
.bl-erepodium__plek--1 .bl-erepodium__rang { color: var(--orange, #E85C28); }
.bl-erepodium__naam {
  font-size: 1.55rem;
  line-height: 1.15;
  min-width: 0;
  /* GEMETEN op 390 px: met `anywhere` mag de browser overal knippen, en dan
     stond de winnaar er als "De Grindkoni / ngen" bij. Dat is de naam die op
     dit blok het langst blijft staan, dus die mag niet middenin een woord
     breken. break-word breekt alleen een woord dat op zijn eigen regel
     werkelijk niet past. */
  overflow-wrap: break-word;
}
.bl-erepodium__plek--1 .bl-erepodium__naam { font-size: 2.1rem; }
.bl-erepodium__punten {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: rgba(246, 241, 231, 0.72);
  white-space: nowrap;
}
.bl-erepodium__plek--1 .bl-erepodium__punten { color: var(--off-white, #F6F1E7); }

/* 24rem is 384 px en daarmee viel een iPhone van 390 px er NET buiten: de
   winnaarsnaam bleef daar op 33,6 px staan en paste niet naast zijn punten.
   30rem (480 px) vangt elke telefoon. Vanaf 27,2 px leest het nog steeds
   ruim vanaf een meter. */
/* 24rem is 384 px en daarmee viel een iPhone van 390 px er NET buiten: de
   winnaarsnaam bleef daar op 33,6 px staan. 30rem (480 px) vangt elke
   telefoon.

   En het punt eronder is de indeling zelf, gemeten: ook op 27,2 px hield de
   naamkolom naast de punten maar 157 punten over, en "Grindkoningen" heeft er
   ongeveer 190 nodig. De naam brak dus MIDDEN IN HET WOORD, en dat is precies
   de naam die na de laatste worp een half uur op het scherm blijft staan. Op
   een telefoon zakken de punten daarom onder de naam: de naam krijgt dan 266
   punten en past in een keer, en de punten blijven op dezelfde regelhoogte
   leesbaar. */
@media (max-width: 30rem) {
  .bl-erepodium__plek { grid-template-columns: 2.2rem 1fr; row-gap: 0.15rem; }
  .bl-erepodium__punten { grid-column: 2; }
  .bl-erepodium__plek--1 .bl-erepodium__naam { font-size: 1.7rem; }
  .bl-erepodium__naam { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-erepodium__confetti { display: none; }
}

/* Het spel per baan (08-09): de verdeling onder het aantal partijen in de
   stand. Klein en gedempt, want het is uitleg bij het getal. */
.bl-tabel__spel {
  display: block;
  font-size: 0.72em;
  line-height: 1.3;
  color: var(--bl-inkt-zacht);
  white-space: nowrap;
}

/* Deciding-round instructions and pairings need a full-width text column. */
.bl-horeca-finalebericht.bl-erepodium__plek { grid-template-columns:minmax(0,1fr); gap:.55rem; }
.bl-horeca-finalebericht .bl-erepodium__punten { grid-column:1; white-space:normal; line-height:1.5; }

.bl-meetelling-note { grid-column:1/-1; margin:.5rem 0; padding:.65rem; border-left:3px solid #a55b0b; background:#fff3dd; color:#513515; white-space:normal; font-size:1rem; line-height:1.4; }