/* =====================================================================
   Toernooiplanner - in de huisstijl van biljartpro.nl
   Figtree als enige letter, emerald als accent op koel grijs, strakke
   vlakken zonder papiertextuur. Zo staat de app naast de site alsof ze
   van hetzelfde huis zijn.
   ===================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --ink: #111827;
  --ink-mut: #6b7280;
  --border: #e5e7eb;
  --felt: #047857;
  --felt-bright: #059669;
  --felt-soft: #d1fae5;
  --felt-tekst: #065f46;
  --banner-a: #047857;
  --banner-b: #064e3b;
  --amber: #92400e;
  --amber-soft: #fef3c7;
  --messing: #34d399;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  /* halve tinten voor de rijvlakken in standen en partijtabellen: de volle
     tinten hierboven blijven voor labels en randen, want die moeten juist
     opvallen. Een hele tabel in de volle kleur werd te zwaar om te lezen. */
  --rij-door: #ecfdf5;
  --rij-kans: #fffbeb;
  --rij-uit: #fef2f2;
  /* podiumkleuren: goud, zilver en brons. Zacht vlak zodat de tekst leesbaar
     blijft, met de volle kleur als streep langs de rand. */
  --goud: #b8860b;   --goud-soft: #fbf1d8;
  --zilver: #6f7c78; --zilver-soft: #eef1f0;
  --brons: #a4693a;  --brons-soft: #f8ebe1;
  --zebra: #f9fafb;
  --shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.06);
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #111827; --surface-2: #1f2937;
    --ink: #f3f4f6; --ink-mut: #9ca3af; --border: #374151;
    --felt: #34d399; --felt-bright: #6ee7b7; --felt-soft: #064e3b; --felt-tekst: #a7f3d0;
    --banner-a: #065f46; --banner-b: #022c22;
    --amber: #fbbf24; --amber-soft: #3a2a0a; --messing: #34d399;
    --danger: #f87171; --danger-soft: #3a1414; --zebra: #151d2b;
    --rij-door: #0e2a22; --rij-kans: #2a2210; --rij-uit: #2c1719;
    --goud: #e2b84a; --goud-soft: #2c2413;
    --zilver: #c3cbd4; --zilver-soft: #1e242c;
    --brons: #d09263; --brons-soft: #2b1f17;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #111827; --surface-2: #1f2937;
  --ink: #f3f4f6; --ink-mut: #9ca3af; --border: #374151;
  --felt: #34d399; --felt-bright: #6ee7b7; --felt-soft: #064e3b; --felt-tekst: #a7f3d0;
  --banner-a: #065f46; --banner-b: #022c22;
  --amber: #fbbf24; --amber-soft: #3a2a0a; --messing: #34d399;
  --danger: #f87171; --danger-soft: #3a1414; --zebra: #151d2b;
  --rij-door: #0e2a22; --rij-kans: #2a2210; --rij-uit: #2c1719;
  --goud: #e2b84a; --goud-soft: #2c2413;
  --zilver: #c3cbd4; --zilver-soft: #1e242c;
  --brons: #d09263; --brons-soft: #2b1f17;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
}

/* zachte lichtval over de groene vlakken */
:root {
  --bannerlicht: radial-gradient(120% 100% at 18% -10%, rgba(255,255,255,.16), transparent 55%);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
/* ruimte voor de schuifbalk altijd reserveren: anders verspringt de hele
   pagina zijwaarts bij het wisselen tussen een korte pagina (geen schuifbalk,
   bv. "Mijn pagina") en een lange (wel een, bv. "Toernooien") */
html { scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Figtree", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6; font-size: 17px;
  /* cijfers in kolommen recht onder elkaar -- percentages en caramboles staan
     overal in tabellen, en dan is dit het verschil tussen netjes en rommelig */
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--felt-soft); color: var(--felt-tekst); }
a { color: var(--felt-bright); }
h1, h2, h3 {
  font-weight: 700; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .6rem;
}
h1 { font-size: 1.9rem; line-height: 1.2; }
h2 { font-size: 1.35rem; margin-top: 1.9rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .8rem; }
button, input, select { font: inherit; color: inherit; }
input, select { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: .5rem .65rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--felt-bright); outline-offset: 2px; border-radius: 6px;
}

.overslaan { position: absolute; left: -999px; top: 0; }
.overslaan:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--surface); padding: .5rem 1rem; border-radius: 8px; }

/* breder dan een leesregel: dit zijn geen artikelen maar tabellen met acht,
   tien kolommen. Smaller dwong die tot zijwaarts schuiven. */
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.3rem; }

/* ------------------------------------------------------------- header --
   Emerald met een zachte lichtval -- zelfde familie als de toernooibanner
   en als de balk op biljartpro.nl, zodat het merk op elke pagina
   herkenbaar is. */
.kop {
  background:
    var(--bannerlicht),
    linear-gradient(165deg, var(--banner-a), var(--banner-b));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 18px rgba(10,47,37,.28);
}
.balk { padding: .65rem 0 0; }
.balk-inhoud { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
/* de weg terug naar de site: klein, links van het merk */
.terug-site {
  display: inline-flex; align-items: center; gap: .2rem; text-decoration: none;
  color: rgba(255,255,255,.78); font-size: .8rem; font-weight: 600; white-space: nowrap;
  padding: .3rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
}
.terug-site:hover { color: #fff; background: rgba(255,255,255,.12); }
.merk { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
/* het logo (logo.png, witte achtergrond) als afgerond wit tegeltje in de
   groene balk -- zachte hoeken i.p.v. een cirkel, want de keus lopen tot in
   de hoeken van de afbeelding en zouden bij een ronde uitsnede afvallen */
.merk-bal {
  width: 2.3rem; height: 2.3rem; flex: 0 0 auto; border-radius: 24%;
  background: #fff; object-fit: cover;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.14);
}
.merk-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.merk-tekst strong {
  font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.merk-tekst small { color: rgba(255,255,255,.7); font-size: .78rem; }
/* Beta-label naast de merknaam: klein en in messing, zodat het opvalt als
   mededeling zonder de naam zelf te overstemmen. Bewust niet in het
   lettertype van de kop -- dit is een status, geen onderdeel van de naam. */
.merk-tekst .beta {
  display: inline-block; vertical-align: .28em; margin-left: .4rem;
  padding: .05rem .38rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid var(--messing);
  color: var(--messing);
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.balk-rechts { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.sessie a { font-weight: 700; text-decoration: none; color: #fff; }
.sessie .naam-kort { display: none; }
@media (max-width: 640px) { .sessie .naam-kort { display: inline; } }
.sessie a:hover { text-decoration: underline; }
.btn-icon {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff;
  border-radius: 9px; width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease;
}
.btn-icon:hover { background: rgba(255,255,255,.18); }
.btn-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* het menu als één rij die op een smal scherm zijwaarts schuift, in plaats van
   knoppen die naar een volgende regel vallen en de kop steeds hoger maken */
.hoofdmenu {
  display: flex; gap: 1.4rem; padding: .15rem 0 0; flex-wrap: nowrap; overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,.13); margin-top: .45rem; flex-basis: 100%;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hoofdmenu::-webkit-scrollbar { display: none; }
.hoofdmenu a {
  display: inline-block; text-decoration: none; color: rgba(255,255,255,.72); white-space: nowrap;
  font-weight: 600; font-size: .92rem; padding: .45rem .1rem .5rem;
  border-bottom: 2px solid transparent; transition: color .15s ease;
}
.hoofdmenu a:hover { color: #fff; }
.hoofdmenu a[aria-current="page"] { color: #fff; border-bottom-color: var(--messing); }
/* smal scherm: ondertitel weg, naam ingekort - de kop blijft twee regels hoog */
/* smal scherm: alles op twee regels - merk en sessie op één rij, het menu eronder.
   Daarvoor wijkt het overbodige: het logotegeltje, de ondertitel, het Beta-label
   en de tekst van de terugknop (alleen het pijltje blijft). */
@media (max-width: 640px) {
  .balk-inhoud { gap: .45rem; flex-wrap: wrap; }
  .terug-site { order: -1; padding: .3rem .5rem; font-size: 1rem; line-height: 1; }
  .terug-site-tekst { display: none; }
  .merk { gap: .45rem; min-width: 0; }
  .merk-bal { width: 1.9rem; height: 1.9rem; }
  .merk-tekst small { display: none; }
  .merk-tekst strong { font-size: 1.05rem; }
  .merk-tekst .beta { display: none; }
  .balk-rechts { gap: .5rem; }
  .sessie a { display: inline-block; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: .88rem; }
  .sessie .naam-vol { display: none; }
  .btn-icon { width: 1.9rem; height: 1.9rem; }
  .hoofdmenu { gap: 1.1rem; margin-top: .35rem; }
}

/* --------------------------------------------------------------- main -- */
/* Let op de volgorde met .wrap hierboven: dat is een klasse en wint het van een
   kale elementnaam. Stond hier alleen "main { padding: ... }", dan gooide
   .wrap { padding: 0 1.3rem } die er compleet overheen en plakte elke kop
   tegen de groene balk. Vandaar main.wrap. */
main.wrap { padding-top: 1.7rem; padding-bottom: 3rem; }

/* smal formulier (inloggen, wachtwoord wijzigen): gelijke ruimte tussen de
   velden onderling en tussen het laatste veld en de knop -- zonder dit
   plakte de knop tegen het wachtwoordveld aan */
.formulier { display: flex; flex-direction: column; gap: .9rem; }
.formulier p { margin: 0; }
.sub { color: var(--ink-mut); max-width: 42rem; }
.mut { color: var(--ink-mut); }
.crumb { font-size: .85rem; margin: 0 0 .8rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.leeg { color: var(--ink-mut); }
.laden { color: var(--ink-mut); padding: 1rem 0; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.2rem 1.35rem; margin: 0 0 1rem;
}
.card h2, .card h3 { margin-top: 0; }

/* toernooikaarten op het overzicht: de hele kaart is de link */
.toernooikaart {
  display: block; color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.toernooikaart:hover {
  transform: translateY(-2px); border-color: var(--felt);
  box-shadow: 0 4px 8px rgba(23,33,26,.08), 0 16px 34px rgba(23,33,26,.12);
}
.toernooikaart:hover h3 { color: var(--felt-bright); }
.toernooikaart-voet { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }

/* ------------------------------------------------- wizard "Nieuw toernooi" --
   Het aanmaakformulier als stappenplan achter één startknop: één stap
   tegelijk in beeld, met voortgangsbalk en terug/volgende-knoppen. */
.wizard-kaart { padding: 0; overflow: hidden; }
.wizard-start {
  display: block; cursor: pointer; list-style: none;
  background: linear-gradient(170deg, var(--felt-bright), var(--felt));
  color: #fff; font-weight: 700; font-size: 1rem; padding: .85rem 1.15rem;
}
.wizard-start::-webkit-details-marker { display: none; }
.wizard-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; margin-right: .55rem; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
  font-weight: 700; line-height: 1;
}
.wizard-start:hover { filter: brightness(1.07); }
.wizard-kaart[open] .wizard-start { filter: none; }
.wizard { padding: 1rem 1.15rem 1.15rem; }
/* Genummerde stappen: waar je bent, wat je gehad hebt en wat er nog komt --
   alle drie in één oogopslag. De streep tussen de bollen loopt door zodat het
   als één route leest en niet als vijf losse knopjes. */
.wizard-stappen {
  list-style: none; display: flex; gap: 0; margin: 0 0 1.4rem; padding: 0;
  counter-reset: stap;
}
.wizard-stap {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--ink-mut); text-align: center;
}
/* de verbindingslijn: achter de bollen door, van bol tot bol */
.wizard-stap::before {
  content: ""; position: absolute; top: 0.95rem; left: -50%; width: 100%;
  height: 2px; background: var(--border);
}
.wizard-stap:first-child::before { display: none; }
.wizard-stap.nu::before, .wizard-stap.gehad::before { background: var(--felt); }
.wizard-bol {
  position: relative; z-index: 1;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--border);
  font-weight: 700; font-size: .85rem; color: var(--ink-mut);
}
.wizard-stapnaam { padding: 0 .2rem; }
.wizard-stap.gehad .wizard-bol { background: var(--felt); border-color: var(--felt); color: #fff; }
.wizard-stap.gehad { color: var(--ink-mut); }
.wizard-stap.nu .wizard-bol {
  background: var(--felt); border-color: var(--felt); color: #fff;
  box-shadow: 0 0 0 4px var(--felt-soft);
}
.wizard-stap.nu { color: var(--felt-tekst); font-weight: 700; }
/* op een smal scherm alleen de bollen: vijf namen naast elkaar past daar niet */
@media (max-width: 34rem) {
  .wizard-stapnaam { display: none; }
  .wizard-stappen { margin-bottom: 1rem; }
}
.nt-stap { display: none; }
.nt-stap.actief { display: block; }
.wizard-knoppen {
  display: flex; justify-content: space-between; gap: .6rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}

/* genummerde stap-koppen in een lang formulier (bv. "Nieuw toernooi"): een
   duidelijke scheidingslijn erboven zodat elke stap zichtbaar een nieuw
   blokje is, in plaats van alles in één ononderbroken muur van velden */
.stap-kop {
  margin: 1.5rem 0 .6rem; padding-top: 1.15rem; border-top: 1px solid var(--border);
  font-size: 1rem; color: var(--felt-tekst);
}
.stap-kop:first-of-type { margin-top: .3rem; padding-top: 0; border-top: 0; }

/* uitkomst van de schema-planner ("Nieuw toernooi"): scanbare statkaartjes
   i.p.v. één dichte zin -- het aantal poules en wat er doorgaat moet in één
   oogopslag duidelijk zijn, de rest is toelichting eronder */
.schema-uitkomst {
  background: var(--felt-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem .95rem .95rem; margin: .6rem 0 .9rem;
}
.schema-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.schema-stats li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .5rem .85rem .45rem; min-width: 5.5rem; text-align: center;
  box-shadow: 0 1px 2px rgba(23,33,26,.06);
}
.schema-stats b {
  display: block; font-size: 1.55rem; font-weight: 600; line-height: 1.1;
  color: var(--felt-tekst); font-variant-numeric: tabular-nums;
}
.schema-stats span { display: block; font-size: .68rem; color: var(--ink-mut); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.schema-toelichting { margin: .7rem 0 0; font-size: .85rem; color: var(--felt-tekst); }
.schema-link-knop {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700;
  color: var(--felt-tekst); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  /* een <button> centreert zijn tekst standaard -- dat zette een koppelnaam
     (die uit meerdere regels bestaat) midden in de kolom i.p.v. links */
  text-align: left;
}
.schema-link-knop:hover { color: var(--felt-bright); }

.grid { display: grid; gap: .85rem; }
@media (min-width: 40rem) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }

.tag {
  display: inline-block; padding: .16rem .55rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-mut); font-size: .74rem; font-weight: 700;
  white-space: nowrap; letter-spacing: .02em;
}
.tag.felt { background: var(--felt-soft); color: var(--felt-tekst); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
strong.tag { display: inline; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(8, 16, 12, .6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 200;
}
.modal-kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--felt);
  box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 1.15rem 1.25rem; max-width: 26rem; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.modal-kaart h3 { margin-top: 0; }
/* de affiche groot in de pop-up: zo groot als het scherm toelaat, hoogte voorop
   (een A4 is staand), met de knoppen eronder */
.modal-kaart.modal-kaart-affiche { max-width: min(96vw, 70rem); width: auto; padding: .6rem; display: flex; flex-direction: column; align-items: center; }
.affiche-groot { display: block; max-width: 100%; max-height: calc(90vh - 5rem); width: auto; height: auto; border-radius: 4px; }
.affiche-groot-knoppen { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: .6rem 0 0; }
.modal-kaart .veld { margin-bottom: .7rem; }
.modal-veld { display: flex; gap: .4rem; margin-top: .3rem; }
.modal-veld input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: .95rem; }

/* partijen van één speler/koppel in de pop-up: een kaartje per partij i.p.v.
   een brede tabel -- zo hoeft er nooit zijwaarts geschoven te worden, ook
   niet bij lange koppelnamen */
.partijlijst { list-style: none; margin: 0; padding: 0; }
.partijregel {
  border-top: 1px solid var(--border); padding: .6rem 0;
}
.partijregel:first-child { border-top: 0; padding-top: 0; }
.partijregel p { margin: .25rem 0 0; font-size: .88rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.partijregel-kop { display: flex; align-items: baseline; gap: .5rem; font-size: .88rem; }
.partijregel-kop .mut { flex: 0 0 auto; font-size: .78rem; }
.partijregel-naam { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.partijregel-naam .koppel { line-height: 1.25; }

/* rij "nog geen tafel toegewezen": elke partij een eigen afgeronde kaart
   i.p.v. rijen met alleen een dun lijntje ertussen in één grote platte lijst
   -- dat oogde als een kale tabel en niet als losse, aanklikbare items. */
/* rij "nog geen tafel toegewezen": elke partij een eigen afgeronde kaart
   i.p.v. rijen met alleen een dun lijntje ertussen in één grote platte lijst
   -- dat oogde als een kale tabel en niet als losse, aanklikbare items. */
.toewijs-regel {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 0 0 .5rem;
}
.toewijs-regel:last-child { margin-bottom: 0; }
.toewijs-groep { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.toewijs-groep input[type="number"] { width: 4.5rem; text-align: center; }
.toewijs-groep input[type="text"] { width: 9rem; }

/* -------------------------------------------------------------- tabellen -- */
.tabelwrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 .9rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; padding: .95rem 1.1rem .45rem; color: var(--ink-mut); font-size: .85rem; }
/* volledige partijenlijst per poule/ronde ("Poule 1 - alle partijen"): zelfde
   groene kop als de standkaart erboven, zodat bij elkaar horende blokken ook
   visueel bij elkaar horen.
   Hier stond eerst overflow:hidden om de groene kop netjes binnen de afgeronde
   hoeken te houden. Dat overschreef de overflow-x:auto van .tabelwrap hierboven,
   waardoor deze tabel als enige NIET horizontaal te schuiven was: op een smal
   scherm (telefoon, of de demo in een kader) vielen de rechterkolommen weg
   zonder dat je erbij kon. De hoeken worden nu op de kop zelf afgerond, zodat
   schuiven gewoon werkt. */
.tabelwrap-kop { overflow-x: auto; }
.tabelwrap-kop caption {
  background: linear-gradient(165deg, var(--banner-a), var(--banner-b));
  color: #fff; padding: .72rem 1rem .68rem; font-size: .85rem; font-weight: 700;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* vertical-align top: bij een koppel staat de tweede naam op een eigen regel
   onder de eerste; de andere cellen (moyenne, te maken, knoppen) horen dan op
   één lijn met de EERSTE naam te staan, niet er half tussenin te zweven */
th, td { text-align: left; padding: .68rem 1rem; border-top: 1px solid var(--border); white-space: nowrap; vertical-align: top; }
th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mut); border-top: 0; padding-bottom: .5rem; }
tbody tr:nth-child(even) td { background: var(--zebra); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
tr.tag td:first-child { font-weight: 700; }

/* koppelnaam ("Jan & Piet"): beide namen onder elkaar en even zwaar -- het
   is één koppel, geen hoofdnaam met bijschrift. Zo blijft de kolom ook smal
   genoeg voor de krappe poulekaartjes. */
.koppel { display: inline-flex; flex-direction: column; line-height: 1.35; }

/* het te maken aantal caramboles onder een naam in de partijenlijst -- klein
   en rustig, zodat de naam de hoofdzaak blijft */
.te-maken-bij-naam { display: block; font-size: .74rem; font-weight: 400; color: var(--ink-mut); }
/* dezelfde regel, maar aanklikbaar voor de onderbouwing: als knop opgemaakt
   zonder dat het een knop wordt om naar te kijken -- alleen een stippellijn */
button.te-maken-bij-naam {
  background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  border-bottom: 1px dotted var(--ink-mut); border-radius: 0; width: auto;
}
button.te-maken-bij-naam:hover { color: var(--felt-tekst); border-bottom-color: var(--felt); }
/* uitslag in detail: een blokje per deelnemer met het percentage groot rechts.
   Als tabel viel die kolom op een telefoon buiten beeld, en daar klik je juist
   voor. */
.uitslag-regel {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .75rem; margin: 0 0 .5rem; border-radius: var(--radius);
  background: var(--surface-2); border-left: 4px solid transparent;
}
.uitslag-naam { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.uitslag-naam .mut { font-size: .76rem; }
.uitslag-pct { flex: 0 0 auto; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uitslag-winnaar { background: var(--rij-door); border-left-color: var(--felt); color: var(--felt-tekst); }
.uitslag-verliezer { background: var(--rij-uit); border-left-color: var(--danger); color: var(--danger); }
.uitslag-winnaar .mut, .uitslag-verliezer .mut { color: inherit; opacity: .8; }

/* "afgemeld" op een eigen regel onder de naam i.p.v. achter de naam geplakt --
   anders werd de deelnemerkolom te breed en ging het hele poulekaartje
   onnodig horizontaal scrollen */
.afgemeld-label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--danger);
  text-transform: uppercase; letter-spacing: .03em;
}

/* ------------------------------------------------------------ formulieren -- */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .9rem; align-items: flex-end; }
.veld { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--ink-mut); }
.veld input, .veld select { min-width: 0; }
/* bij elkaar horende velden (bv. "invoeren als" + het bijbehorende
   waardeveld) als één blok, zodat ze samen naar een volgende regel gaan
   i.p.v. los van elkaar te breken */
.veld-groep { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(170deg, var(--felt-bright), var(--felt));
  color: #fff; border: 0; border-radius: 9px;
  padding: .58rem .95rem; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 2px rgba(14,61,45,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transition: filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.knop:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(14,61,45,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.knop:active { transform: translateY(0); filter: brightness(.98); }
.knop.zacht {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); box-shadow: none;
}
.knop.zacht:hover { border-color: var(--felt); filter: none; }

/* ------------------------------------------------------------ toernooi -- */
.toernooi-header {
  background:
    var(--bannerlicht),
    linear-gradient(165deg, var(--banner-a), var(--banner-b));
  background-size: cover; border-radius: var(--radius);
  overflow: hidden; margin: 0 0 .85rem; padding: 2rem 1.5rem 1.7rem; position: relative;
  border-bottom: 3px solid var(--messing);
  box-shadow: var(--shadow);
}
/* de affiche van het toernooi (meestal de A4-poster van de club) rechts naast de
   beheerkaart en de deelnemers; de brede tabellen eronder houden de volle breedte.
   Op een smal scherm komt hij onder de inhoud, niet te groot. */
.affiche-rij { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; margin: 1rem 0 1.2rem; }
@media (min-width: 860px) { .affiche-rij { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; } }
.affiche-links { min-width: 0; position: relative; }
/* Op een breed scherm is de linkerkant precies zo hoog als de affiche: de inhoud staat
   absoluut in de cel (draagt dus niet bij aan de rijhoogte) en scrolt binnenin als hij
   langer is. Op een smal scherm gewoon onder elkaar in de normale stroom. */
@media (min-width: 860px) {
  .affiche-binnen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
  .affiche-binnen > .beheer-tabs { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; }
  .affiche-binnen > .beheer-tabs .beheer-paneel { flex: 1; overflow: auto; min-height: 0; }
  .affiche-binnen > .beheer-tabs .beheer-paneel[hidden] { display: none; }
  .affiche-binnen > h2 { margin-top: 0; }
  .affiche-binnen > details { flex: 1; overflow: auto; min-height: 0; }
}
.affiche-binnen > .beheer-tabs { margin-bottom: 0; }
/* de toernooi-instellingen als leesbare lijst: naam, waarde in woorden, Wijzig-knop;
   een regel die open staat toont zijn velden met Opslaan/Annuleer. */
.instellingen-lijst { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.instellingen-kop {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mut); background: var(--surface-2); padding: .45rem .9rem; border-top: 1px solid var(--border);
}
.instellingen-lijst > .instellingen-kop:first-child { border-top: 0; }
.instelling {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: .6rem .9rem; align-items: center; padding: .55rem .9rem; border-top: 1px solid var(--border); font-size: .92rem;
}
.instelling-naam { color: var(--ink-mut); }
.instelling-naam small, .instelling-vast { display: block; font-size: .74rem; color: var(--ink-mut); font-weight: 400; }
.instelling-waarde { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.instelling.vast .instelling-waarde { font-weight: 500; }
.instelling-wijzig { font-size: .8rem; padding: .3rem .65rem; }
.instelling.bewerk { background: var(--felt-soft); align-items: start; }
.instelling.bewerk .instelling-naam { padding-top: 1.35rem; }
.instelling-velden { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: flex-end; }
.instelling-velden .veld { margin: 0; }
.instelling-velden .let-op { margin: 0; }
.instelling-knoppen { display: flex; gap: .4rem; align-items: center; padding-bottom: .15rem; }
@media (max-width: 640px) {
  .instelling { grid-template-columns: minmax(0, 1fr) auto; }
  .instelling-waarde { grid-column: 1; }
  .instelling-wijzig { grid-row: 1 / span 2; }
  .instelling.bewerk .instelling-naam { padding-top: 0; }
  .instelling-velden { grid-column: 1 / span 2; }
}
/* vinkjeslijst van het wedstrijdleiders-scherm: toernooien naast elkaar op een breed
   scherm, onder elkaar op een telefoon */
.wl-vinkjes { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.wl-vinkje {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem;
  font-size: .88rem; background: var(--surface-2);
}
.wl-vinkje:has(input:checked) { background: var(--felt-soft); border-color: var(--felt); color: var(--felt-tekst); font-weight: 600; }

.beheer-voet {
  border-top: 1px solid var(--border); background: var(--surface-2);
  padding: .55rem 1.1rem; font-size: .82rem; color: var(--ink-mut);
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
}
.beheer-voet b { color: var(--ink); }
.affiche {
  display: block; justify-self: center; width: 100%; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem; box-shadow: var(--shadow); text-decoration: none; color: var(--ink-mut);
}
.affiche img { display: block; width: 100%; height: auto; border-radius: 4px; }
.affiche-kop { display: block; margin-top: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.affiche:hover { border-color: var(--felt-bright); }
.affiche:focus-visible { outline: 2px solid var(--felt-bright); outline-offset: 2px; }
.toernooi-header h1 {
  position: relative; margin: .3rem 0 0; color: #fff; font-size: 2.15rem;
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.toernooi-header .eyebrow {
  position: relative; display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #f0d9a0;
}
/* kerngegevens (deelnemers, spelvorm, ...) als pillen binnen de banner zelf,
   in plaats van losse grijze tekst eronder -- alles over dit toernooi staat
   zo in één samenhangend, direct leesbaar blok. */
.toernooi-feiten {
  position: relative; display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  list-style: none; margin: .95rem 0 0; padding: 0;
}
.toernooi-feiten li {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: .8rem; font-weight: 600; padding: .27rem .7rem; border-radius: 999px;
}

/* vier losse banners op de openbare volgpagina (aanleverresolutie 390x100) naast
   elkaar i.p.v. één 300x250-plek. Geen max-width: ze verdelen de volle breedte
   van de pagina gelijk (dus samen even breed als de toernooi-header erboven),
   en schalen daarbij mee dankzij aspect-ratio. */
/* twee naast elkaar op een telefoon, vier op een breed scherm. Met flex-basis 200px
   kwamen ze op mobiel onder elkaar te staan: vier vakken hoog voordat het schema in
   beeld kwam. */
.volgen-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 0 0 1.2rem; }
@media (min-width: 720px) { .volgen-banners { grid-template-columns: repeat(4, 1fr); } }
.volgen-banner {
  display: block; margin: 0; min-width: 0;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.volgen-banner img { display: block; width: 100%; aspect-ratio: 390 / 100; object-fit: cover; }
/* lege plek zonder actieve advertentie - laat zien dat hier ruimte te koop is */
.volgen-banner-leeg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  width: 100%; text-align: center; padding: .4rem;
  border: 2px dashed var(--border); box-shadow: none; color: var(--ink-mut);
  font-size: .78rem; font-weight: 600; line-height: 1.2;
}
.volgen-banner-leeg:hover { border-color: var(--felt-bright); color: var(--felt-tekst); }

/* verbindingsbalk: alleen zichtbaar als het misgaat, en dan opvallend genoeg om
   een wedstrijdleider te laten wachten in plaats van nog eens te klikken */
.verbinding-balk { display: none; }
.verbinding-balk.zichtbaar {
  display: block; text-align: center;
  background: var(--amber-soft); color: var(--amber);
  border-bottom: 1px solid var(--amber);
  padding: .5rem 1rem; font-size: .88rem; font-weight: 600;
  position: sticky; top: 0; z-index: 40;
}

/* de sponsors van de club zelf: dezelfde rij van vier als de landelijke plekken (zodat
   een sponsor gewoon 390x100 aanlevert en het op mobiel twee-bij-twee past), met een
   regeltje erboven dat zegt van wie ze zijn. */
.sponsor-rij { margin: 0 0 1.2rem; }
.sponsor-rij-kop {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mut);
}
.sponsor-rij .volgen-banners { margin: 0; }
span.volgen-banner { cursor: default; }

/* de beheerkaart: één kaart met tabbladen (Delen, Sponsors, Eerdere versies,
   Headerfoto, Instellingen) i.p.v. losse kaarten onder elkaar - zo begint het
   toernooi zelf al na één kaart, ook op een telefoon. */
.beheer-tabs { padding: 0; overflow: hidden; margin: 1rem 0 1.2rem; }
/* de tabbladen lopen op een smal scherm door op een tweede regel - een horizontaal
   schuifbalkje verbergt juist de tabs die je niet ziet, en dan weet niemand dat
   "Instellingen" er ook nog is. */
.beheer-tabs-kop {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.beheer-tabs-kop [data-beheer-tab] {
  font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap;
  padding: .7rem .9rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink-mut); cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.beheer-tabs-kop [data-beheer-tab]:hover { color: var(--ink); }
.beheer-tabs-kop [data-beheer-tab][aria-selected="true"] { color: var(--felt-tekst); border-bottom-color: var(--felt); background: var(--surface); }
.beheer-tabs-kop [data-beheer-tab]:focus-visible { outline: 2px solid var(--felt-bright); outline-offset: -2px; }
.beheer-teller { font-size: .7rem; font-weight: 700; line-height: 1.3; padding: .05rem .45rem; border-radius: 999px; background: var(--felt-soft); color: var(--felt-tekst); }
.beheer-tabs-actie { margin: .35rem .6rem .35rem auto; align-self: center; font-size: .82rem; padding: .4rem .75rem; white-space: nowrap; }
.beheer-paneel { padding: 1rem 1.1rem; }
.beheer-paneel .filterbar { margin-top: 0; }

.schema-kaart { margin: 0; padding: 0; overflow: hidden; }
/* elk poule-/ronde-blok (stand + bijbehorende partijenlijst samen) op volle
   breedte onder elkaar -- niet meer naast elkaar in een grid, want er zit nu
   een brede partijentabel in elk blok die in een smalle kolom niet paste */
.schema-blok { margin: 0 0 1.1rem; }
.schema-blok .schema-kaart-lijf > .tabelwrap { margin: 0 0 .9rem; }
.schema-blok .schema-kaart-lijf > .tabelwrap:last-child { margin-bottom: 0; }
/* elke poule/ronde krijgt een eigen gekleurde kop -- zo is meteen te zien
   waar de ene poule ophoudt en de volgende begint, in plaats van dat alle
   kaarten in elkaar overlopen met alleen een dunne rand als scheiding */
.schema-kaart-kop {
  background: linear-gradient(165deg, var(--banner-a), var(--banner-b));
  color: #fff; padding: .75rem 1.05rem .7rem;
}
.schema-kaart-kop h3 { margin: 0; font-size: 1.12rem; color: #fff; }
.schema-kaart-kop .tag { background: rgba(255,255,255,.2); color: #fff; }
.schema-kaart-kop p { margin: .15rem 0 0; font-size: .8rem; color: rgba(255,255,255,.78); }
.schema-kaart-lijf { padding: .9rem 1.05rem 1.05rem; }
.schema-kaart .tabelwrap { margin: 0 0 .5rem; box-shadow: none; }
/* rij van een deelnemer die nu zou doorgaan naar de volgende ronde -- een
   duidelijk gekleurde tabelrij, niet de ronde "tag"-pil (die is voor losse
   labels bedoeld en hoort niet op een <tr>, dat brak eerder de tabel-layout) */
.rij-gekwalificeerd td, tbody tr.rij-gekwalificeerd:nth-child(even) td { background: var(--rij-door); }
.rij-gekwalificeerd td:first-child { font-weight: 700; color: var(--felt-tekst); box-shadow: inset 3px 0 0 var(--felt); }
/* oranje: maakt nog kans op een wildcard-plek ("beste nummer 3") */
.rij-kanshebber td, tbody tr.rij-kanshebber:nth-child(even) td { background: var(--rij-kans); }
.rij-kanshebber td:first-child { font-weight: 700; color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
/* rood: staat onder de streep. Bewust bleek gehouden -- zolang er nog
   partijen te spelen zijn is dit de stand van dit moment, geen uitslag, en
   een schreeuwend rood zou meer zeggen dan waar is. */
.rij-uit td, tbody tr.rij-uit:nth-child(even) td { background: var(--rij-uit); }
.rij-uit td:first-child { color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }

/* winnaar en verliezer in een partijrij: dezelfde kleuren als in de standen,
   zodat "groen is door" overal hetzelfde betekent. Een gelijkspel (mogelijk op
   vaste beurten) krijgt bewust geen van beide. */
.cel-winnaar { background: var(--rij-door); font-weight: 700; color: var(--felt-tekst); box-shadow: inset 3px 0 0 var(--felt); }
.cel-verliezer { background: var(--rij-uit); color: var(--danger); }
.cel-gelijk { background: var(--rij-kans); }
tbody tr:nth-child(even) .cel-winnaar { background: var(--rij-door); }
tbody tr:nth-child(even) .cel-verliezer { background: var(--rij-uit); }
tbody tr:nth-child(even) .cel-gelijk { background: var(--rij-kans); }

/* erepodium: winnaar in het midden en hoger, zilver links, brons rechts --
   zoals een echt podium. Op een smal scherm onder elkaar in de goede volgorde
   (1, 2, 3), want naast elkaar wordt het daar onleesbaar. */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.podium-plek {
  flex: 1 1 8rem; max-width: 13rem; text-align: center;
  background: var(--surface-2); border-radius: var(--radius);
  padding: .9rem .7rem .8rem; border-top: 4px solid var(--border);
}
.podium-medaille { font-size: 2rem; line-height: 1; }
.podium-naam { font-weight: 700; margin: .35rem 0 .15rem; }
.podium-plaats { font-size: .78rem; color: var(--ink-mut); }
.podium-1 { background: var(--goud-soft); border-top-color: var(--goud); padding-bottom: 1.6rem; padding-top: 1.3rem; }
.podium-1 .podium-medaille { font-size: 2.6rem; }
.podium-2 { background: var(--zilver-soft); border-top-color: var(--zilver); }
.podium-3 { background: var(--brons-soft); border-top-color: var(--brons); }
@media (max-width: 32rem) {
  .podium { flex-direction: column; align-items: stretch; }
  .podium-plek { max-width: none; padding-bottom: .8rem; padding-top: .9rem; }
  .podium-1 { order: -1; }
}
.rij-podium td { font-weight: 700; }
.rij-podium-1 td, tbody tr.rij-podium-1:nth-child(even) td { background: var(--goud-soft); }
.rij-podium-1 td:first-child { box-shadow: inset 3px 0 0 var(--goud); }
.rij-podium-2 td, tbody tr.rij-podium-2:nth-child(even) td { background: var(--zilver-soft); }
.rij-podium-2 td:first-child { box-shadow: inset 3px 0 0 var(--zilver); }
.rij-podium-3 td, tbody tr.rij-podium-3:nth-child(even) td { background: var(--brons-soft); }
.rij-podium-3 td:first-child { box-shadow: inset 3px 0 0 var(--brons); }
.medaille { margin-right: .35rem; }

/* het woordje naast de naam: kleur alleen volstaat niet (kleurenblindheid,
   zwart-wit printen, en de gedeelde foto tekent alleen tekst na) */
/* naam links, de labels rechts tegen de rand van de deelnemerkolom, zodat ze
   recht onder elkaar staan in plaats van mee te schuiven met de naamlengte */
.deelnemer-cel {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}
.deelnemer-labels {
  flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
  /* op één lijn met de eerste naamregel, ook als een koppel twee regels beslaat */
  padding-top: .1rem;
}
.deelnemer-cel .status-label, .deelnemer-cel .afgemeld-label { margin-left: 0; }
/* alle labels even breed: "door" is langer dan "uit", en rechts uitlijnen
   alleen zou hun linkerrand nog steeds laten verspringen */
.deelnemer-labels .status-label { min-width: 3.4rem; text-align: center; }
/* gewonnen/verloren/gelijk zijn langere woorden dan door/kans/uit -- eigen
   breedte, zodat ook die drie precies onder elkaar uitkomen */
.deelnemer-labels .partij-label { min-width: 5.9rem; }

.status-label {
  display: inline-block; margin-left: .45rem; padding: .05rem .4rem;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; vertical-align: .08em;
}
.status-door { background: var(--felt); color: #fff; }
.status-kans { background: var(--amber); color: #fff; }
.status-uit  { background: var(--danger); color: #fff; }
.status-legenda {
  margin: 0; padding: .5rem .85rem .7rem; font-size: .76rem; color: var(--ink-mut);
  border-top: 1px solid var(--border);
}
.status-legenda .status-label { margin: 0 .1rem; }
/* twee deelnemers staan precies gelijk; alleen de hoogste serie of het lot
   scheidt ze nog. Zonder teken lijkt de volgorde ertussen willekeurig. */
.gedeeld-teken {
  display: inline-block; margin-left: .3rem; padding: 0 .28rem;
  border-radius: 5px; background: var(--surface-2); color: var(--ink-mut);
  font-size: .7rem; font-weight: 700; vertical-align: .06em;
}
.cel-gedeeld { white-space: nowrap; }
/* het percentage is aanklikbaar voor de onderbouwing -- als knop opgemaakt,
   maar zonder dat de kolom cijfers eruit gaat zien als een rij knoppen: alleen
   een stippellijn eronder, zoals een voetnoot */
.pct-knop {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted var(--ink-mut); border-radius: 0;
}
.pct-knop:hover { color: var(--felt-tekst); border-bottom-color: var(--felt); }
.pct-totaal td { border-top: 2px solid var(--border); }
/* de tegenstandersnaam mag afbreken: tabelcellen staan standaard op nowrap, en
   met een lange koppelnaam moet je dit venster anders zijwaarts schuiven */
.pct-tabel td:first-child { white-space: normal; min-width: 5.5rem; }
.pct-tabel th, .pct-tabel td { padding: .5rem .5rem; }

/* partijen: compacte tabel per poule/ronde; "Invoeren"/"Bekijken" opent de
   score in een pop-up (.modal-overlay, hierboven) zodat de tabel altijd
   recht blijft staan */
.frame-invoer { margin: 0; }
.frame-invoer > div { margin-bottom: .4rem; }
.frame-invoer label { font-size: .8rem; color: var(--ink-mut); margin-right: .5rem; }
.frame-invoer input { margin-left: .25rem; }
/* score invoeren: per deelnemer een eigen blokje met daaronder drie even brede
   vakken, label bóven het vak. Op een telefoon is er geen ruimte om label en
   vak naast elkaar te zetten -- dan brak de regel middenin af en raakte een
   vakje los van zijn label. Dit past van 320 pixels tot desktop. */
.score-speler {
  background: var(--felt-soft); border-radius: var(--radius);
  padding: .6rem .7rem .7rem; margin: 0 0 .6rem;
}
.score-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .45rem 0 0; }
.score-veld { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.score-veld input { width: 100%; margin: 0; }

/* scorebord bij pool/snooker: de tussenstand in frames groot en duidelijk,
   zodat tijdens het invoeren meteen zichtbaar is wie voorstaat */
.frame-score {
  display: flex; align-items: stretch; gap: .5rem; margin: 0 0 .2rem;
}
.frame-score-kant {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .6rem .5rem; text-align: center; min-width: 0;
}
.frame-score-kant.leidt { background: var(--felt-soft); border-color: var(--felt); }
.frame-score-kant .naam {
  display: block; font-size: .82rem; color: var(--ink-mut); overflow-wrap: anywhere;
}
.frame-score-kant.leidt .naam { color: var(--felt-tekst); font-weight: 700; }
.frame-score-kant b {
  display: block; font-size: 2rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.frame-score-kant.leidt b { color: var(--felt-tekst); }
.frame-score-midden {
  display: flex; align-items: center; color: var(--ink-mut); font-size: 1.2rem;
}

/* "Voorronde aanpassen" binnen de instellingen: zichtbaar een apart
   onderdeel, want dit maakt een nieuw schema i.p.v. alleen een instelling
   opslaan */
.voorronde-blok {
  border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .9rem;
}
.voorronde-blok h3 { font-size: 1rem; margin: 0 0 .4rem; }

/* opvallende waarschuwing, bv. als de poule-indeling niet meer klopt met de
   deelnemersgegevens -- mag niet in een dichtgeklapt blokje verdwijnen */
.waarschuwing {
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-left: 4px solid var(--amber); border-radius: var(--radius);
  padding: .85rem 1rem; margin: 0 0 .9rem;
}
.waarschuwing p { margin: 0; font-size: .88rem; color: var(--ink); }
.waarschuwing-kop { font-weight: 700; color: var(--amber); margin: 0 0 .3rem !important; }

/* --------------------------------------------------------------- footer -- */
.voet { border-top: 1px solid var(--border); margin-top: 2.5rem; padding: 1.3rem 0 1.5rem; color: var(--ink-mut); font-size: .85rem; }

/* wie liever geen beweging ziet, krijgt geen beweging */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .toernooikaart:hover, .knop:hover { transform: none; }
}

/* Tabellen met weinig kolommen zwemmen op een breed scherm: de naam en het
   getal komen dan meters uit elkaar te staan. Vaste verhoudingen houden ze
   bij elkaar leesbaar, terwijl de deelnemerkolom de ruimte opneemt. */
/* drie kolommen: plek, naam, poule. De naam neemt de ruimte op, de rest blijft
   smal -- anders drijven ze op een breed scherm meters uiteen. */
#eindstand-tabel th:first-child, #eindstand-tabel td:first-child { width: 6rem; text-align: left; }
#eindstand-tabel th:nth-child(2), #eindstand-tabel td:nth-child(2) { width: auto; }
#eindstand-tabel th:last-child, #eindstand-tabel td:last-child { width: 8rem; }

/* "let op"-regel bij een invulveld: opvallend genoeg om te lezen, niet zo
   alarmerend dat het op een fout lijkt -- het mag meestal gewoon. */
.let-op {
  margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 9px;
  background: var(--amber-soft); color: var(--amber);
  border-left: 3px solid var(--amber);
  font-size: .82rem; line-height: 1.45;
}

/* de route van poule tot finale in de vooruitblik: zelfde tegeltjes als de
   cijfers erboven, maar met een pijl ertussen zodat het als een volgorde leest
   en niet als losse feiten */
.schema-kop-klein { margin: .9rem 0 .4rem; font-size: .82rem; font-weight: 700; color: var(--felt-tekst); }
.schema-route li { position: relative; }
.schema-route li + li::before {
  content: "→"; position: absolute; left: -1.05rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-mut); font-size: .9rem;
}
.schema-route { gap: 1.6rem; }

/* --------------------------------------------------- oefentoernooi (demo) -- */
/* Groen en niet amber: dit is geen waarschuwing maar een uitnodiging om te
   proberen. De balk staat boven de beheerkaart, want wie binnenkomt moet eerst
   weten dat hij hier vrij mag werken. */
.demo-balk {
  background: var(--felt-soft); border: 1px solid var(--felt);
  border-left: 4px solid var(--felt); border-radius: var(--radius);
  padding: .85rem 1rem; margin: 0 0 .9rem;
}
.demo-balk p { margin: 0; font-size: .88rem; color: var(--ink); }
.demo-balk a { color: var(--felt-tekst); font-weight: 600; }
.demo-kop { font-weight: 700; color: var(--felt-tekst); margin: 0 0 .3rem !important; }