/* ---------------------------------------------------------------
   Kroegentocht. Laadt na site.css en gebruikt dezelfde tokens,
   dezelfde letter en dezelfde randen.

   Eén verschil met de rest van de site: dit wordt bediend met een
   duim, in een donkere bar, door iemand die al vier holes ver is.
   Dus grote knoppen, grote cijfers, en niets dat je per ongeluk
   aantikt. De min en de plus zijn 60px hoog en staan uit elkaar.
--------------------------------------------------------------- */
:root {
  --goed: #4d7c57;
  --bezig: #c9a227;
  --laat: #a04a3c;
  --vlak: #e7e3d9;

  --team-rood: #a04a3c;
  --team-oranje: #bd7333;
  --team-amber: #a8891f;
  --team-groen: #4d7c57;
  --team-teal: #3d7a74;
  --team-blauw: #3f6b8a;
  --team-paars: #7a5c8f;
  --team-roze: #a8557a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --goed: #6f9c78;
    --bezig: #cfae44;
    --laat: #c2685a;
    --vlak: #2b2721;

    --team-rood: #c2685a;
    --team-oranje: #d08c4c;
    --team-amber: #cfae44;
    --team-groen: #6f9c78;
    --team-teal: #5c9a93;
    --team-blauw: #6a93b0;
    --team-paars: #9d7fb0;
    --team-roze: #c47a9b;
  }
}

body.tocht {
  overflow-x: hidden;
}

/* De kleur van een team gaat via een klasse, niet via een
   style-attribuut: het Content-Security-Policy van de site laat geen
   inline stijl toe, en dat houden we zo. */
.k-rood {
  --kleur: var(--team-rood);
}
.k-oranje {
  --kleur: var(--team-oranje);
}
.k-amber {
  --kleur: var(--team-amber);
}
.k-groen {
  --kleur: var(--team-groen);
}
.k-teal {
  --kleur: var(--team-teal);
}
.k-blauw {
  --kleur: var(--team-blauw);
}
.k-paars {
  --kleur: var(--team-paars);
}
.k-roze {
  --kleur: var(--team-roze);
}

/* Verbergen moet verbergen. Een eigen display wint het anders van de
   hidden-regel van de browser zelf. */
[hidden] {
  display: none !important;
}

.niks {
  color: var(--muted);
  font-size: 15px;
  padding: var(--s5) 0;
}

.kop-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0 0 var(--s3);
}

.kop-mono.later {
  margin-top: var(--s7);
}

/* ---------------------------------------------------------------
   De poort
--------------------------------------------------------------- */
.poort {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--s5);
}

.poort form {
  width: 100%;
  max-width: 22rem;
  display: grid;
  gap: var(--s4);
}

.poort h1 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin: 0;
}

.poort-uitleg {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 var(--s2);
}

/* ---------------------------------------------------------------
   Kop en bladen
--------------------------------------------------------------- */
.tocht-kop {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0 0;
}

.tocht-kop .rij1 {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.tocht-kop .merk {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tocht-kop .pols {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.tocht-kop .uit {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--s3) 0;
}

.tocht-kop .uit:hover {
  color: var(--ink);
}

.bladen {
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: var(--s3);
}

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

.bladen button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s3) 0;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--snel);
}

.bladen button[aria-current='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

main.blad {
  padding-top: var(--s5);
  padding-bottom: 140px;
}

.blad h2 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s4);
}

/* ---------------------------------------------------------------
   De bar waar we nu staan
--------------------------------------------------------------- */
.hole-kop {
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: var(--vlak);
  padding: var(--s4);
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.hole-kop .stap {
  height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: var(--paper);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.hole-kop .stap[disabled] {
  opacity: 0.35;
  cursor: default;
}

.hole-kop .midden {
  text-align: center;
  min-width: 0;
}

.hole-kop .welke {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.hole-kop .bar {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: block;
  margin: var(--s1) 0;
  overflow-wrap: break-word;
}

.hole-kop .drankje {
  font-size: 15px;
  color: var(--muted);
  display: block;
}

.hole-kop .notitie {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  font-size: 14px;
  color: var(--muted);
}

/* De rij bolletjes waarmee je naar eender welke bar springt. */
.holes-rij {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s3);
  margin-bottom: var(--s5);
}

.holes-rij::-webkit-scrollbar {
  display: none;
}

.holes-rij button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}

.holes-rij button.gedaan {
  border-color: var(--muted);
  color: var(--ink);
}

.holes-rij button[aria-current='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------------------------------------------------------------
   De teller per team
--------------------------------------------------------------- */
.teams {
  display: grid;
  gap: var(--s4);
}

.teamkaart {
  border: 1px solid var(--line);
  border-left: 4px solid var(--kleur, var(--line));
  border-radius: var(--rand);
  padding: var(--s4);
}

.teamkaart .naamrij {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.teamkaart .naam {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.teamkaart .totaal {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.teamkaart .totaal b {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.teller {
  display: grid;
  grid-template-columns: 1fr minmax(88px, 1.2fr) 1fr;
  align-items: stretch;
  gap: var(--s3);
}

.teller button {
  height: 60px;
  border: 1px solid var(--ink);
  border-radius: var(--rand);
  background: transparent;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: background var(--snel), color var(--snel);
}

.teller button:active {
  background: var(--ink);
  color: var(--paper);
}

.teller button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.teller .cijfer {
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.teller .cijfer small {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s1);
}

/* Een cijfer dat nog niet bevestigd is, mag er niet uitzien als een
   cijfer dat wel al opgeslagen staat. */
.teller .cijfer.hangend,
.teller .cijfer.hangend small {
  color: var(--bezig);
}

.bevestig {
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  border: 1px solid var(--bezig);
  border-radius: var(--rand);
  background: var(--vlak);
  padding: var(--s3);
}

.bevestig .wat {
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.bevestig button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: var(--rand);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.bevestig button.vol {
  background: var(--ink);
  color: var(--paper);
}

/* Wie het gedronken heeft, en de knoppen voor straf en winst. */
.teamkaart .onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.teamkaart .wie {
  flex: 1 1 130px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s2) var(--s3);
  min-height: 44px;
}

.teamkaart .wie:focus {
  border-color: var(--ink);
  outline: none;
}

.klein {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: transparent;
  color: var(--muted);
  padding: 0 var(--s3);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--snel), color var(--snel);
}

.klein:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.klein.straf:hover {
  border-color: var(--laat);
  color: var(--laat);
}

.klein.winst:hover {
  border-color: var(--goed);
  color: var(--goed);
}

/* Het inlegvakje voor straf- en winstslokken. */
.bijvak {
  margin-top: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s3);
  background: var(--vlak);
  display: grid;
  gap: var(--s3);
}

.bijvak .wat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.bijvak .rij {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.bijvak .aantal {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
}

.bijvak .aantal button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.bijvak .aantal span {
  min-width: 2ch;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bijvak input[type='text'] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s2) var(--s3);
  min-height: 44px;
}

.bijvak .knopjes {
  display: flex;
  gap: var(--s2);
}

.bijvak .knopjes button {
  flex: 1 1 auto;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: var(--rand);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.bijvak .knopjes button.vol {
  background: var(--ink);
  color: var(--paper);
}

/* De regels die er al bij staan. */
.extralijst {
  margin-top: var(--s3);
  display: grid;
  gap: var(--s1);
}

.extralijst div {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  color: var(--muted);
}

.extralijst .cijf {
  font-family: var(--mono);
  font-weight: 400;
  min-width: 3ch;
}

.extralijst .cijf.straf {
  color: var(--laat);
}

.extralijst .cijf.winst {
  color: var(--goed);
}

.extralijst .weg {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  padding: var(--s1) var(--s2);
}

.extralijst .weg:hover {
  color: var(--laat);
}

/* ---------------------------------------------------------------
   Power-ups
--------------------------------------------------------------- */
.powerups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.powerups .pu {
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: transparent;
  color: var(--ink);
  padding: var(--s2) var(--s3);
  min-height: 40px;
  cursor: pointer;
  text-align: left;
  transition: opacity var(--snel), border-color var(--snel);
}

.powerups .pu:hover {
  border-color: var(--muted);
}

/* De power-up waarover de vraag loopt. */
.powerups .pu.vraag {
  border-color: var(--bezig);
  color: var(--ink);
}

.powerups .pu.op {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--muted);
  opacity: 0.65;
}

.powerups .geen {
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   De stand
--------------------------------------------------------------- */
.ranglijst {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s7);
}

.rang {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kleur, var(--line));
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
}

.rang.eerste {
  background: var(--vlak);
}

.rang .plek {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--muted);
}

.rang.eerste .plek {
  color: var(--ink);
}

.rang .naam {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  min-width: 0;
  overflow-wrap: break-word;
}

.rang .split {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.rang .som {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rang .som small {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Het rooster. Achttien rijen breed genoeg om te lezen, dus dat mag
   op zijn eentje schuiven; de pagina zelf niet. */
.roosterhoes {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  -webkit-overflow-scrolling: touch;
}

table.rooster {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

table.rooster th,
table.rooster td {
  padding: var(--s2) var(--s3);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

table.rooster thead th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  position: sticky;
  top: 0;
  background: var(--paper);
}

table.rooster th.links,
table.rooster td.links {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--paper);
  min-width: 128px;
}

table.rooster tbody tr.nu td {
  background: var(--vlak);
}

table.rooster tbody tr.nu td.links {
  background: var(--vlak);
}

table.rooster td.leeg {
  color: var(--line);
}

table.rooster tfoot td {
  font-weight: 500;
  border-bottom: 0;
  border-top: 1px solid var(--ink);
}

table.rooster .barnaam {
  display: block;
}

table.rooster .drank {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   De kaart

   Tegels van OpenStreetMap, met het parcours erover getekend en je
   eigen plek als een blauwe stip. Alle maten worden door
   js/kroegentocht.js op de elementen gezet, want het
   Content-Security-Policy van de site laat geen stijlattribuut in de
   HTML toe. Wat hier staat is enkel wat niet beweegt.
--------------------------------------------------------------- */
.kaarthoes {
  margin-bottom: var(--s5);
}

.kaartveld {
  position: relative;
  height: 50svh;
  min-height: 240px;
  max-height: 460px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  overflow: hidden;
  background: var(--vlak);
  /* Slepen op de kaart verschuift de kaart, niet de pagina. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.kaartveld:active {
  cursor: grabbing;
}

.tegelvak {
  position: absolute;
  inset: 0;
}

.tegelvak .tegel {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  opacity: 0;
  transition: opacity 200ms ease;
  will-change: transform;
}

.tegelvak .tegel.er {
  opacity: 1;
}

/* Komt er geen enkele tegel binnen, dan blijft het parcours over:
   de lijn, de nummers en je eigen plek. Genoeg om je te oriënteren
   in een kelder zonder netwerk. */
.kaartveld.geentegels .tegelvak {
  display: none;
}

/* De tegels zijn licht. In het donker keren we ze om, anders staar
   je om twee uur 's nachts in een lamp. */
@media (prefers-color-scheme: dark) {
  .tegelvak {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.92) saturate(0.75);
  }
}

.tekening {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 2px var(--paper));
}

.tekening .lijn {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 7;
  opacity: 0.65;
}

.stipvak {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.stip {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 2px solid var(--paper);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.stip.gedaan {
  background: var(--muted);
  opacity: 0.75;
}

.stip.nu {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-size: 15px;
  opacity: 1;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--paper), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.stip .etiket {
  display: none;
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: 3px 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.stip.open .etiket {
  display: block;
}

/* Je eigen plek. Blauw, want dat leest iedereen meteen als "ik". */
.mijstip {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2f6df6;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.mijring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: rgba(47, 109, 246, 0.13);
  border: 1px solid rgba(47, 109, 246, 0.35);
  z-index: 4;
}

.kaartknoppen {
  position: absolute;
  right: var(--s3);
  top: var(--s3);
  z-index: 6;
  display: grid;
  gap: var(--s2);
}

.kaartknoppen button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.kaartknoppen button:active {
  background: var(--ink);
  color: var(--paper);
}

.kaartveld .bron {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  margin: 0;
  padding: 2px 6px;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  opacity: 0.88;
}

.kaartveld .bron a {
  color: inherit;
}

.kaartonder {
  margin: var(--s3) 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Het parcours als lijst
--------------------------------------------------------------- */
.route {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--rand);
}

.route .stop {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.route .stop:last-child {
  border-bottom: 0;
}

.route .stop.nu {
  background: var(--vlak);
}

.route .stop .nr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.route .stop.nu .nr {
  color: var(--ink);
}

.route .stop .bar {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: break-word;
}

.route .stop .wat {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

.route .stop .ga {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.route .stop .ga:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------------------------------------------------------------
   Inzet: teams en bars op voorhand
--------------------------------------------------------------- */
.vakken {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.vak {
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s4);
  display: grid;
  gap: var(--s4);
}

.vak.team {
  border-left: 4px solid var(--kleur, var(--line));
}

.vakkop {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.vakkop .nr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-width: 2.5ch;
}

.vakkop .weg {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--s2);
}

.vakkop .weg:hover {
  color: var(--laat);
}

.vakkop .schuif {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  min-width: 44px;
  height: 40px;
  padding: 0 var(--s2);
  cursor: pointer;
}

.vakkop .schuif:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.vakkop .schuif[disabled] {
  opacity: 0.3;
  cursor: default;
}

.paar {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 620px) {
  .paar {
    grid-template-columns: 1fr 1fr;
  }
}

.kleuren {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.kleuren button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: var(--kleur);
  cursor: pointer;
  padding: 0;
}

.kleuren button[aria-pressed='true'] {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}

/* De power-ups in de opzet: een lijstje regels met een kruisje. */
.pulijst {
  display: grid;
  gap: var(--s2);
}

.pulijst .regel {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.pulijst .regel input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s2) var(--s3);
  min-height: 44px;
}

.pulijst .regel input:focus {
  border-color: var(--ink);
  outline: none;
}

.pulijst .regel.op input {
  text-decoration: line-through;
  color: var(--muted);
}

.pulijst .regel .weg {
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  width: 36px;
  height: 44px;
}

.pulijst .regel .weg:hover {
  color: var(--laat);
}

.erbij {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px dashed var(--line);
  border-radius: var(--rand);
  background: transparent;
  color: var(--muted);
  min-height: 48px;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--snel), color var(--snel);
}

.erbij:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.erbij.ruim {
  margin-bottom: var(--s8);
}

.erbij.dicht {
  margin-top: var(--s2);
}

.erbij.onder {
  margin-bottom: var(--s4);
}

/* Een kaartpunt dat hij niet kan lezen. Beter dat je het ziet dan
   dat het stilzwijgend nergens heen gaat. */
.veld input.mis {
  border-color: var(--laat);
}

.paar.ruim {
  margin-bottom: var(--s6);
}

.vak.dicht {
  gap: var(--s2);
}

.vakkop .naam {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Een kop boven een lijstje ziet eruit als een label, maar hoort
   niet bij één veld. */
.veld .etiket {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.veld.gewijzigd input,
.veld.gewijzigd textarea {
  font-weight: 500;
  border-color: var(--muted);
}

/* De schakelaar voor het publieke scorebord. */
.schakelrij {
  display: flex;
  align-items: center;
  gap: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s4);
  margin-bottom: var(--s6);
}

.schakelrij .tekst {
  flex: 1 1 auto;
}

.schakelrij .tekst b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}

.schakelrij .tekst span {
  font-size: 13px;
  color: var(--muted);
}

.schakel {
  flex: 0 0 auto;
  width: 56px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: transparent;
  padding: 3px;
  cursor: pointer;
  display: flex;
}

.schakel .duim {
  width: 50%;
  height: 100%;
  background: var(--line);
  border-radius: 1px;
  transition: transform var(--snel), background var(--snel);
}

.schakel[aria-pressed='true'] {
  border-color: var(--ink);
}

.schakel[aria-pressed='true'] .duim {
  transform: translateX(100%);
  background: var(--ink);
}

/* ---------------------------------------------------------------
   De balk en het praatje onderaan
--------------------------------------------------------------- */
.opslaanbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
}

.opslaanbalk .binnen {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.opslaanbalk .telling {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opslaanbalk .knoppen {
  margin: 0 0 0 auto;
  display: flex;
  gap: var(--s2);
}

.opslaanbalk button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--paper);
  border-radius: var(--rand);
  padding: var(--s2) var(--s5);
  min-height: 44px;
  cursor: pointer;
  background: transparent;
  color: var(--paper);
}

.opslaanbalk button.vol {
  background: var(--paper);
  color: var(--ink);
}

.opslaanbalk button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.praat {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 12;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: var(--s3) var(--s4);
  border-radius: var(--rand);
  max-width: 90vw;
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.praat button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--paper);
  color: var(--paper);
  cursor: pointer;
  padding: 0 0 1px;
}

/* ---------------------------------------------------------------
   Terug naar de stand vanuit de poort
--------------------------------------------------------------- */
.poortterug {
  justify-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  padding: var(--s2) 0;
}

.poortterug:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------------------------------------------------------------
   Vrijgeven: hoeveel de ploegen van deze hole al mogen zien
--------------------------------------------------------------- */
.vrijrij {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

.vrijrij .wat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: var(--s1);
}

.vrijrij .schakel {
  margin-left: auto;
  background: var(--paper);
}

/* ---------------------------------------------------------------
   De vraag naar je locatie

   Een eigen vraag voor de browservraag. Zo weet je waarvoor het
   dient voor je telefoon het venstertje toont, en zo komt die vraag
   uit een tik van jou: browsers negeren een vraag die zomaar uit het
   niets komt steeds vaker.
--------------------------------------------------------------- */
.locatievraag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  padding: var(--s4) clamp(20px, 5vw, 56px) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

.locatievraag .binnen {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: var(--s3);
}

.locatievraag p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.locatievraag p b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s1);
}

.locatievraag .knopjes {
  display: flex;
  gap: var(--s2);
}

.locatievraag button {
  flex: 1 1 auto;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: var(--rand);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.locatievraag button.vol {
  background: var(--ink);
  color: var(--paper);
}

/* Wat enkel de organisatie mag zien, staat er ook uit als iets dat
   je niet luidop voorleest. */
.hole-kop .notitie.geheim {
  border-top: 0;
  padding-top: 0;
  color: var(--laat);
}

.hole-kop .notitie.geheim span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------
   Wie deze hole drinkt
--------------------------------------------------------------- */
.wierij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.wieknop {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  background: transparent;
  color: var(--ink);
  min-height: 44px;
  padding: 0 var(--s3);
  cursor: pointer;
  transition: background var(--snel), border-color var(--snel), color var(--snel);
}

.wieknop span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.wieknop.achter span {
  color: var(--laat);
}

.wieknop.aan {
  background: var(--kleur, var(--ink));
  border-color: var(--kleur, var(--ink));
  color: var(--paper);
}

.wieknop.aan span,
.wieknop.aan.achter span {
  color: var(--paper);
  opacity: 0.8;
}

/* ---------------------------------------------------------------
   Wie hoeveel holes deed
--------------------------------------------------------------- */
.beurten {
  display: grid;
  gap: var(--s2);
}

.beurt {
  border: 1px solid var(--line);
  border-left: 4px solid var(--kleur, var(--line));
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
  display: grid;
  gap: var(--s2);
}

.beurt .naam {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.beurt .rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.beurt .lid {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s1) var(--s3);
  font-size: 14px;
}

.beurt .lid b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.beurt .lid.achter b {
  color: var(--laat);
}

.beurt .norm {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Regels en power-ups
--------------------------------------------------------------- */
.inleiding {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--s4);
  max-width: 46ch;
}

.inleiding.later {
  margin-top: var(--s7);
}

.regellijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  max-width: 60ch;
}

.regellijst li {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}

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

.regellijst li b {
  font-weight: 500;
}

.pukaarten {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

@media (min-width: 620px) {
  .pukaarten {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pukaart {
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s4);
  background: var(--vlak);
}

.pukaart h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s2);
}

.pukaart p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.pustand {
  display: grid;
  gap: var(--s2);
}

.purij {
  border: 1px solid var(--line);
  border-left: 4px solid var(--kleur, var(--line));
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
  display: grid;
  gap: var(--s2);
}

.purij .naam {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.purij .hoeveel {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.purij .lijst {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.purij .pu {
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s1) var(--s3);
}

.purij .pu.op {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--muted);
  opacity: 0.6;
}

.purij .geen {
  font-size: 13px;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Kleine dingen op de andere bladen
--------------------------------------------------------------- */
.waarnu {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 var(--s5);
}

.klaarzet {
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s4);
  margin-bottom: var(--s6);
  display: grid;
  gap: var(--s3);
}

.klaarzet p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.klaarzet.onderaan {
  margin-top: var(--s8);
  border-style: dashed;
}

.klaarzet.onderaan p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vakkop .schuif[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.route .stop.gedaan .nr,
.route .stop.gedaan .bar {
  opacity: 0.6;
}

.route .stop.winkel .bar {
  font-weight: 400;
}

.route .stop .wat.dicht {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.route .stop .opdracht {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: var(--s2);
  padding-left: var(--s3);
  border-left: 2px solid var(--line);
}

.route .stop .ga.leeg {
  color: var(--line);
  border-bottom: 0;
}

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