/* ===============================================================
   Korfbaljournaal Voorspellingen
   Huisstijl overgenomen van korfbaljournaal.nl
   Alle kleuren en maten staan hier. Verander ze hier, nergens anders.
   =============================================================== */

:root {
  /* Kleuren, afgelezen van de live site */
  --goud:        #D4AF37;  /* knoppen en accentband */
  --goud-diep:   #B8952A;  /* hover */
  --goud-logo:   #A89040;  /* het goud in het logo, voor labels op zwart */
  --goud-zacht:  rgba(212, 175, 55, .16);
  --goud-tekst:  #7A6215;  /* goud dat leesbaar blijft als tekst */
  --navy:        #0E172A;  /* secundaire knop, donkere vlakken */
  --blauw:       #1F40AF;  /* spaarzaam accent */
  --zwart:       #000000;  /* footer */
  --inkt:        #1D1E20;  /* lopende tekst */
  --grijs:       #626670;  /* bijschrift */
  --grijs-lijn:  #D8DAE0;
  --vlak:        #E6E7EB;  /* sectie-achtergrond */
  --vlak-zacht:  #F9FAFC;
  --wit:         #FFFFFF;

  --goed:        #1B7F4C;
  --fout:        #B3261E;

  /* Podiumkleuren voor de eerste drie plekken */
  --zilver:      #98A0AE;
  --brons:       #B08150;

  /* Typografie */
  --kop: "Oswald", "Arial Narrow", sans-serif;
  --tekst: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Vorm */
  --rond-knop: 999px;
  --rond-kaart: 12px;
  --rond-veld: 8px;
  --schaduw: 0 1px 2px rgba(14, 23, 42, .06), 0 8px 24px rgba(14, 23, 42, .06);
  --breedte: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vlak-zacht);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: .1px;
}

h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(22px, 3.2vw, 30px); }
h3 { font-size: 18px; font-weight: 500; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 20px;
}

[hidden] { display: none !important; }

/* ---------------------------------------------- kop van de pagina */

.kop {
  background: var(--wit);
  border-bottom: 1px solid var(--grijs-lijn);
}

.kop__rij {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.kop__logo img { display: block; height: 38px; width: auto; }

.kop__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kop__nav .knop { text-decoration: none; line-height: 1.2; white-space: nowrap; }

.kop__terug {
  font-size: 14px;
  color: var(--grijs);
  text-decoration: none;
  padding-left: 10px;
  border-left: 1px solid var(--grijs-lijn);
}

.kop__terug:hover { color: var(--inkt); }

/* Wie er speelt, altijd in beeld zodra je bent aangemeld. */
.kop__jij {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-knop);
  background: var(--vlak-zacht);
  white-space: nowrap;
}

.kop__jij b { font-weight: 700; }

.kop__jij .kop__punten {
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  background: var(--goud-zacht);
  color: var(--goud-tekst);
  border-radius: var(--rond-knop);
  padding: 2px 10px;
}

/* ---------------------------------------------- tabbalk */

.tabbalk {
  background: var(--wit);
  border-bottom: 1px solid var(--grijs-lijn);
  position: sticky;
  top: 0;
  z-index: 20;
}

.tabbalk__rij {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabbalk__rij::-webkit-scrollbar { display: none; }

.tab {
  font-family: var(--tekst);
  font-size: 15px;
  font-weight: 500;
  color: var(--grijs);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 13px 14px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover { color: var(--inkt); }

.tab[aria-selected="true"] {
  color: var(--inkt);
  font-weight: 700;
  border-bottom-color: var(--goud);
}

/* ---------------------------------------------- titelblok */

.titel {
  background: var(--wit);
  border-bottom: 1px solid var(--grijs-lijn);
  padding: 34px 0 30px;
}

.eyebrow {
  font-family: var(--kop);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-logo);
  margin: 0 0 6px;
}

.titel p { margin: 8px 0 0; color: var(--grijs); max-width: 62ch; }

/* ---------------------------------------------- algemene bouwstenen */

/* main draagt ook .wrap, en die zet padding als shorthand. Een kale
   main-selector verliest daarvan op specificiteit, dus staat de
   verticale ruimte hier op main.wrap. De zijkanten blijven van .wrap. */
main { flex: 1; }
main.wrap { padding-top: 30px; padding-bottom: 64px; }

.paneel { display: none; }
.paneel.actief { display: block; }

.kaart {
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  box-shadow: var(--schaduw);
  padding: 20px;
  margin-bottom: 16px;
}

.kaart--rustig { box-shadow: none; background: var(--vlak-zacht); }

.kaart__kop {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kaart__kop .hint { margin-left: auto; }

.hint { color: var(--grijs); font-size: 14px; margin: 0; }

.rij-knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 5px;
}

input, select {
  font-family: var(--tekst);
  font-size: 15px;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-veld);
  padding: 10px 12px;
  width: 100%;
}

input:focus-visible, select:focus-visible, button:focus-visible,
.tab:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .55);
  outline-offset: 2px;
}

input:disabled { background: var(--vlak); color: var(--grijs); }
input:disabled::placeholder { color: var(--grijs); opacity: 1; }

input[type="checkbox"] { width: auto; }

.velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.velden--kort { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }

.code-veld { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* ---------------------------------------------- knoppen */

.knop {
  font-family: var(--tekst);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--rond-knop);
  padding: 11px 22px;
  cursor: pointer;
}

.knop--goud { background: var(--goud); color: var(--navy); }
.knop--goud:hover { background: var(--goud-diep); }

.knop--navy { background: var(--navy); color: var(--wit); }
.knop--navy:hover { background: #1a2748; }

.knop--rand { background: var(--wit); color: var(--inkt); border-color: var(--grijs-lijn); }
.knop--rand:hover { background: var(--vlak); }

.knop--stil {
  background: none;
  border: 0;
  color: var(--grijs);
  font-weight: 500;
  text-decoration: underline;
  padding: 6px 0;
}

.knop--stil:hover { color: var(--inkt); }

.knop--stil-gevaar { color: var(--fout); }
.knop--stil-gevaar:hover { color: var(--fout); }

.knop--breed { display: block; width: 100%; margin-top: 14px; }

.knop--gevaar { background: var(--wit); color: var(--fout); border-color: var(--grijs-lijn); }
.knop--gevaar:hover { background: rgba(179, 38, 30, .08); }

.knop:disabled { opacity: .5; cursor: not-allowed; }

.knop--klein { font-size: 14px; padding: 8px 16px; }

/* ---------------------------------------------- onthaal en stappen */

.stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stap {
  background: var(--vlak-zacht);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  padding: 14px 16px;
}

.stap__nr {
  font-family: var(--kop);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goud-logo);
  display: block;
  margin-bottom: 4px;
}

.stap h3 { margin-bottom: 3px; }
.stap p { margin: 0; font-size: 14px; color: var(--grijs); }

/* ---------------------------------------------- wedstrijdkaart */

/* Elke wedstrijd is een eigen kaartje. Eerst waren het rijen met een
   streep ertussen, en dan lees je een lijst met losse zwevende
   onderdelen in plaats van vijf wedstrijden. De poule-apps zetten er
   allemaal een kaartje omheen. */
.wed {
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  padding: 12px 16px;
  margin-bottom: 8px;
}

/* Staat de lijst binnen een witte kaart, zoals bij de uitslagen van
   een ronde of in Mijn punten, dan zou wit op wit verdwijnen. */
.kaart .wed { background: var(--vlak-zacht); }

.wed--dicht .wed__spel { opacity: .85; }

/* Voorspellen is een enkele kolom, smaller dan de rest van de pagina.
   Over de volle breedte hangen de teamnamen zo ver van de scores dat
   de lijst uit elkaar valt in losse zwevende blokjes. */
#paneel-voorspellen { max-width: 640px; margin: 0 auto; }

/* Alle wedstrijden van dezelfde dag onder een kop, zodat de datum een
   keer in beeld staat in plaats van bij elke wedstrijd. */
.dag + .dag { margin-top: 22px; }

.dag__kop {
  font-family: var(--tekst);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 4px;
}

.wed__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--grijs);
  margin-bottom: 6px;
}

.wed__tijd { font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; }
.wed__status { margin-left: auto; white-space: nowrap; }
.wed__status .haast { color: var(--fout); font-weight: 500; }

.wed__datum { font-size: 13px; color: var(--grijs); }

.wed__spel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

/* De namen hangen tegen de scores aan, zoals op een scorebord.
   Zonder dit worden ze bij een brede kaart uit elkaar getrokken. */
.wed__team {
  font-family: var(--kop);
  font-size: 19px;
  font-weight: 500;
  text-align: right;
}

.wed__team--uit { text-align: left; }

.wed__midden { display: flex; align-items: center; gap: 8px; }

.score {
  width: 62px;
  text-align: center;
  font-family: var(--kop);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 6px 4px;

  /* Zonder dit reserveert de browser rechts ruimte voor de pijltjes van
     een getalveld, en dan staat het cijfer zichtbaar links van het
     midden terwijl er text-align: center staat. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.score::-webkit-outer-spin-button,
.score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.score--gevuld { border-color: var(--goud); background: var(--goud-zacht); }

.streep { color: var(--grijs); font-weight: 700; }

/* De regel onder de wedstrijd: wat het werd en wat het jou opleverde. */
.wed__uitkomst {
  display: flex;
  gap: 4px 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  font-size: 13px;
  color: var(--grijs);
}

.wed__uitkomst b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.wed__uitkomst b.raak { color: var(--goed); }

/* Het puntje tussen de stukjes van de regel. */
.scheiding { color: var(--grijs-lijn); margin: 0 2px; }
.scheiding::before { content: "\00b7"; }

.wed__datum--haast { color: var(--fout); font-weight: 500; }

/* De eindstand in de uitslagenlijst, waar niets in te vullen valt. */
.eindstand {
  font-family: var(--kop);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.punten-bal {
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--rond-knop);
  padding: 2px 12px;
  background: var(--vlak);
  color: var(--grijs);
}

.punten-bal--raak { background: rgba(27, 127, 76, .12); color: var(--goed); }

/* ---------------------------------------------- labels */

.slot {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--rond-knop);
  background: var(--vlak);
  color: var(--grijs);
}

/* Alleen afgelast krijgt kleur. De rest is grijs, want als elke
   toestand een eigen kleur heeft valt geen enkele meer op. */
.slot--afgelast { background: rgba(179, 38, 30, .1); color: var(--fout); }

/* De klasse waarin gespeeld wordt. Staat gewoon in de grijze kopregel
   mee: het is bijschrift, geen label. */
.niveau {
  font-size: 13px;
  font-weight: 500;
  color: var(--grijs);
  white-space: nowrap;
}

/* ---------------------------------------------- voortgang */

.voortgang { margin-bottom: 16px; }

.voortgang__tekst {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--grijs);
  margin-bottom: 6px;
}

.voortgang__baan {
  height: 6px;
  background: var(--vlak);
  border-radius: var(--rond-knop);
  overflow: hidden;
}

.voortgang__vulling {
  height: 100%;
  background: var(--goud);
  border-radius: var(--rond-knop);
  transition: width .25s ease;
}

/* ---------------------------------------------- opslaanbalk */

/* De opslaanbalk staat los onder de wedstrijden, dus krijgt hij zelf
   een kaartje. Vroeger hing hij onderin de kaart met de lijst erin. */
.opslaan-balk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  padding: 12px 16px;
  margin-top: 12px;
}

.kaart > .opslaan-balk {
  background: none;
  border: 0;
  border-top: 1px solid var(--grijs-lijn);
  border-radius: 0;
  padding: 16px 0 0;
  margin-top: 18px;
}

.opslaan-balk .hint { margin-right: auto; }

/* ---------------------------------------------- keuzeknoppen */

.segment {
  display: inline-flex;
  background: var(--vlak);
  border-radius: var(--rond-knop);
  padding: 3px;
  gap: 2px;
}

.segment button {
  font-family: var(--tekst);
  font-size: 14px;
  font-weight: 500;
  color: var(--grijs);
  background: none;
  border: 0;
  border-radius: var(--rond-knop);
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
}

.segment button[aria-pressed="true"] {
  background: var(--wit);
  color: var(--inkt);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 23, 42, .12);
}

.stuurrij {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.stuurrij select { width: auto; min-width: 190px; }

/* ---------------------------------------------- stand */

/* Een lijst, geen tabel: plek, naam en punten zijn waar mensen voor
   komen, de rest staat er klein onder. Een tabel met vijf kolommen
   dwingt op een telefoon tot horizontaal scrollen. */
.stand { list-style: none; margin: 0; padding: 0; }

.stand__rij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--grijs-lijn);
}

.stand__rij:last-child { border-bottom: 0; }

.stand__rij--jij {
  background: var(--goud-zacht);
  border-bottom-color: transparent;
  border-radius: var(--rond-veld);
}

/* Goud, zilver en brons bovenaan, daaronder een rustige cirkel. */
.stand__plek {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-knop);
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
}

.stand__plek--1 { background: var(--goud);   border-color: var(--goud);   color: var(--navy); }
.stand__plek--2 { background: var(--zilver); border-color: var(--zilver); color: var(--wit); }
.stand__plek--3 { background: var(--brons);  border-color: var(--brons);  color: var(--wit); }

.stand__wie { flex: 1; min-width: 0; }
.stand__wie b { display: block; font-weight: 700; }
.stand__bij { font-size: 13px; color: var(--grijs); }

.stand__punten {
  font-family: var(--kop);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stand__punten span {
  display: block;
  font-family: var(--tekst);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* ---------------------------------------------- tabellen (beheer) */

.tabelrol { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th {
  font-family: var(--kop);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs);
  text-align: left;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--grijs-lijn);
  white-space: nowrap;
}

td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--grijs-lijn);
  font-variant-numeric: tabular-nums;
}

th.num, td.num { text-align: right; }

.plek {
  font-family: var(--kop);
  font-size: 18px;
  font-weight: 600;
  color: var(--grijs);
  width: 52px;
}

.plek--1 { color: var(--goud-logo); }
.plek--2 { color: var(--zilver); }
.plek--3 { color: var(--brons); }

tr.jij { background: var(--goud-zacht); }
tr.jij td { font-weight: 700; }

.jij-vlag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--goud-tekst);
  margin-left: 8px;
}

.punten { font-family: var(--kop); font-size: 20px; font-weight: 600; }

td code {
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  background: var(--vlak);
  border-radius: var(--rond-veld);
  padding: 2px 8px;
}

/* ---------------------------------------------- cijfertegels */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.tegel {
  background: var(--vlak-zacht);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  padding: 14px 16px;
}

.tegel__getal {
  font-family: var(--kop);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tegel__naam {
  font-size: 13px;
  color: var(--grijs);
  margin-top: 2px;
}

/* ---------------------------------------------- uitklapper */

.uitklap {
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  background: var(--wit);
  margin-bottom: 10px;
  overflow: hidden;
}

.uitklap > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.uitklap > summary::-webkit-details-marker { display: none; }

.uitklap > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--kop);
  font-size: 20px;
  color: var(--grijs);
}

.uitklap[open] > summary::after { content: "–"; }

.uitklap > summary:hover { background: var(--vlak-zacht); }

.uitklap__romp { padding: 0 16px 14px; }

.uitklap__titel { font-family: var(--kop); font-size: 19px; font-weight: 600; }

/* ---------------------------------------------- dialogen */

/* Inloggen, een poule maken en meedoen gebeuren in een dialoog, zodat
   er per keer maar een ding op het scherm staat. Dat scheelde op de
   voorkant een half formulier boven de wedstrijden. */

.dialoog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--rond-kaart);
  background: var(--wit);
  color: var(--inkt);
  box-shadow: 0 12px 40px rgba(14, 23, 42, .22);
}

.dialoog::backdrop { background: rgba(14, 23, 42, .45); }

.dialoog__kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--grijs-lijn);
}

.dialoog__kop h2 { font-size: 24px; }

.dialoog__kruis {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  color: var(--grijs);
  background: none;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
}

.dialoog__kruis:hover { color: var(--inkt); }

.dialoog__romp { padding: 18px 20px 20px; }

.dialoog__romp .hint { margin-bottom: 16px; }

.rij-knoppen--midden { justify-content: center; margin-top: 10px; }

/* Annuleren en doorgaan onderin een dialoog: rechts uitgelijnd, met de
   knop die iets doet als laatste. */
.rij-knoppen--eind { justify-content: flex-end; margin-top: 18px; }

/* Een stap die je niet halverwege moet kunnen verlaten, zoals het
   kiezen van je naam: zonder naam sta je in geen enkele stand. Escape
   is in speler.js dichtgezet, hier verdwijnt het kruisje. */
.dialoog--moet .dialoog__kruis { display: none; }

/* Zes cijfers, groot genoeg om te controleren wat je hebt overgetypt. */
.cijfer-veld {
  font-family: var(--kop);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .3em;
  text-align: center;
  padding: 10px 12px;
}

.deellink {
  font-size: 13px;
  color: var(--grijs);
  background: var(--vlak-zacht);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-veld);
  padding: 10px 12px;
  word-break: break-all;
}

/* ---------------------------------------------- strook voor bezoekers */

/* Wie niet is ingelogd krijgt een regel, geen formulier. Aanmelden
   gebeurt in de dialoog. */
.nodig {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-kaart);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.nodig b { display: block; }
.nodig span { color: var(--grijs); font-size: 14px; }
.nodig .knop { margin-left: auto; }

/* ---------------------------------------------- poules */

/* Pillen zijn een keuze uit een rijtje: welke poule bekijk je, welke
   speelronde bekijk je. Ze zien er bewust anders uit dan de knoppen
   ernaast, want die doen iets in plaats van iets te kiezen. */
.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tekst);
  font-size: 15px;
  font-weight: 500;
  color: var(--inkt);
  background: var(--vlak-zacht);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-knop);
  padding: 8px 15px;
  cursor: pointer;
}

.pil:hover { background: var(--vlak); }

.pil[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--wit);
  font-weight: 700;
}

/* Het getal of het woordje achter de naam: het aantal deelnemers, of
   dat een speelronde nu bezig is. */
.pil__merk {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--grijs);
  background: var(--vlak);
  border-radius: var(--rond-knop);
  padding: 3px 8px;
  white-space: nowrap;
}

.pil[aria-pressed="true"] .pil__merk {
  color: var(--navy);
  background: var(--goud);
}

/* Bladeren door de speelrondes, onder de wedstrijdlijst: pijl terug,
   keuzelijst, pijl vooruit. Met alleen pijlen ben je bij ronde 20 te
   lang aan het klikken, met alleen een lijst mis je het gemak van
   even eentje terug. */
.rondebalk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.rondebalk select {
  width: auto;
  min-width: 210px;
  text-align: center;
  font-weight: 700;
}

.stapknop {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--kop);
  font-size: 26px;
  line-height: 1;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--rond-knop);
  cursor: pointer;
}

.stapknop:hover:not(:disabled) { background: var(--vlak); }
.stapknop:disabled { opacity: .4; cursor: not-allowed; }

/* Klein kopje boven een rijtje pillen. */
.veldlabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: 8px;
}

/* Titel links, knoppen rechts. De knoppen staan zo los van de pillen
   eronder, zodat je ziet dat het twee verschillende dingen zijn. */
.kaart__kop--acties .rij-knoppen { margin-left: auto; }

/* De regel onder de titel van de gekozen poule: de code om te delen
   en wat je met deze poule mag. */
.poulebalk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--grijs-lijn);
}

.poulebalk .hint { margin: 0; }

.poule__code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kop);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  background: var(--vlak);
  border-radius: var(--rond-knop);
  padding: 4px 6px 4px 14px;
}

.poule__acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------- puntenuitleg */

.punten-lijst { list-style: none; margin: 0; padding: 0; }

.punten-lijst li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--grijs-lijn);
  font-size: 15px;
}

.punten-lijst li:last-child { border-bottom: 0; }

.punten-lijst .voorbeeld { display: block; font-size: 13px; color: var(--grijs); margin-top: 2px; }

.punten-lijst b {
  font-family: var(--kop);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------- meldingen */

.melding {
  border-radius: var(--rond-veld);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}

.melding--goed { background: rgba(27, 127, 76, .1); color: var(--goed); }
.melding--fout { background: rgba(179, 38, 30, .1); color: var(--fout); }
.melding--let  { background: var(--goud-zacht); color: #6f5810; }

.leeg { color: var(--grijs); padding: 22px 0; text-align: center; }

/* ---------------------------------------------- voet */

.voet {
  background: var(--zwart);
  color: var(--wit);
  padding: 30px 0;
  font-size: 14px;
}

.voet__streep { width: 42px; height: 3px; background: var(--goud); margin-bottom: 14px; }
.voet__merk { font-family: var(--kop); font-size: 22px; font-weight: 600; }
.voet__merk span { color: var(--goud); }
.voet p { color: #9BA0AC; margin: 6px 0 0; }
.voet a { color: var(--goud); }

/* ---------------------------------------------- mobiel */

@media (max-width: 720px) {
  .kop__rij { min-height: 58px; gap: 10px; }
  .kop__logo img { height: 30px; }
  .kop__terug { display: none; }
  .kop__jij { padding: 4px 6px 4px 10px; font-size: 13px; }
  .kop__jij .kop__naam { display: none; }

  /* Op een telefoon is de bovenkant van het scherm het hele scherm.
     Wie vanuit een app-groep binnenkomt moet wedstrijden zien, niet
     eerst een paginakop: kop, tabbalk, titel, uitnodigingsstrook en
     rondekop duwden de eerste wedstrijd samen ver onder de vouw.
     Alles hierboven is daarom een maatje kleiner. */
  .titel { padding: 16px 0 14px; }
  .titel h1 { font-size: 26px; }
  .titel .eyebrow { font-size: 11px; }
  .titel p { font-size: 14px; margin-top: 4px; }
  main.wrap { padding-top: 14px; padding-bottom: 48px; }

  /* De strook voor wie nog niet meedoet: twee regels naast een knop in
     plaats van drie regels met de knop eronder. */
  .nodig { padding: 12px 14px; gap: 10px; margin-bottom: 12px; }
  .nodig > div { flex: 1; min-width: 160px; }
  .nodig b { font-size: 15px; }
  .nodig span { font-size: 13px; }
  .nodig .knop { padding: 10px 16px; }

  /* De kop van de ronde is een titel met een balkje; die hoeft niet de
     hoogte van een volle kaart te hebben. */
  .rondekop { padding: 12px 16px; }
  .rondekop .kaart__kop { margin-bottom: 0; }
  .rondekop .voortgang { margin-top: 10px; }

  /* Ook op een telefoon blijft de wedstrijd een regel. Gestapeld werd
     elke wedstrijd drie regels hoog en werd de lijst juist langer, en
     korfbalnamen zijn kort genoeg om naast elkaar te passen. */
  .wed__spel { gap: 8px; }
  .wed__team { font-size: 16px; }
  .score { width: 52px; font-size: 21px; }

  .kaart { padding: 16px; }
  .kaart__kop .hint { margin-left: 0; }

  /* De opslaanknop blijft in beeld, zodat je na het invullen van de
     laatste wedstrijd niet terug hoeft te scrollen. */
  .opslaan-balk--vast {
    position: sticky;
    bottom: 0;
    margin: 0 -14px;
    border-radius: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--grijs-lijn);
    box-shadow: 0 -6px 18px rgba(14, 23, 42, .08);
    z-index: 10;
  }

  /* De knop houdt zijn tekst op een regel; de hint ernaast wikkelt maar
     en krimpt mee. Andersom brak "Voorspelling opslaan" doormidden. */
  .opslaan-balk--vast .knop { white-space: nowrap; }
  .opslaan-balk--vast .hint { flex: 1; min-width: 0; }

  .stuurrij select { min-width: 0; flex: 1; }
  .poule__acties { margin-left: 0; }
  .kaart__kop--acties .rij-knoppen { margin-left: 0; width: 100%; }
  .kaart__kop--acties .rij-knoppen .knop { flex: 1; }
  .nodig .knop { margin-left: 0; }
  .dialoog { width: calc(100vw - 24px); }
}

@media (max-width: 400px) {
  .wrap { padding: 0 14px; }
  .tab { padding: 12px 10px; font-size: 14px; }
  .score { width: 48px; font-size: 20px; }
  .wed__team { font-size: 15px; }
  .tegels { grid-template-columns: repeat(2, 1fr); }
  .tegel__getal { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}