/* Presentatiescherm (beamer/tv): licht merkthema, grote letters, leesbaar op afstand.
   Grijs vlak met witte waterdots (zoals de sectiepagina's van het handboek), witte kaders erop. */
body.screen {
  --s-bg: var(--ground);
  --s-panel: var(--surface);
  --s-panel-2: var(--surface-2);
  --s-text: var(--ink);
  --s-muted: var(--ink);        /* op het grijze vlak: 80% zwart, lichter grijs haalt daar geen AA */
  --s-shadow: 0.2em 0.3em 0.9em rgba(65, 64, 66, 0.12);
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--waterdots-wit) center 85% / cover no-repeat, var(--s-bg);
  color: var(--s-text);
  font-size: clamp(14px, 1.15vw, 22px);
}

/* ---------- Kop: witte band met logo, zoals de Plainwater-site ---------- */
.s-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: max(0.8em, 14px) 2.5vw;
  background: var(--surface);
  border-top: 0.2em solid var(--brand);
  box-shadow: 0 0.2em 1em rgba(65, 64, 66, 0.12);
  position: relative;
  z-index: 1;
}
.s-brand { display: flex; align-items: center; gap: 1.3em; min-width: 0; }
.s-logo { height: max(2.5em, 45px); } /* minstens 160px breed, ook op een kleiner scherm */
.s-titles { padding-left: 1.3em; border-left: 1px solid var(--line); }
.s-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.55em; line-height: 0.95; text-transform: lowercase;
  color: var(--ink-title); white-space: nowrap;
}
.s-sub { color: var(--ink-soft); font-size: 0.8em; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.25em; }

.s-tabs { display: flex; gap: 0.4em; flex-wrap: wrap; justify-content: flex-end; }
.s-tabs button {
  background: var(--surface-2); color: var(--ink);
  padding: 0.55em 1em; font-size: 0.85em;
}
.s-tabs button.active { background: var(--brand); color: var(--brand-contrast); }
.s-tabs button.s-icon { padding-inline: 0.7em; }
.s-tabs button.auto.active { background: var(--ink); color: #fff; }
.s-tabs button.auto.active::before {
  content: ""; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0.18em rgba(0, 174, 239, 0.3);
}
/* Op een smal scherm (bijvoorbeeld een telefoon) loopt de kop door op meerdere regels. */
@media (max-width: 899px) {
  .s-header { flex-wrap: wrap; }
  .s-title { white-space: normal; }
  .s-tabs { justify-content: flex-start; }
}
kbd {
  font: inherit; font-size: 0.7em; opacity: 0.6;
  border: 1px solid currentColor; border-radius: 0.3em; padding: 0 0.3em;
}

.s-main { min-height: 0; padding: 2.6vh 2.5vw 2.5vh; }
.s-view { height: 100%; display: flex; flex-direction: column; gap: 2.2vh; min-height: 0; }
.s-view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; }
/* Hoofdtitel in huisstijl: condensed, kleine letters, laatste woord magenta. */
.s-view h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3em; line-height: 0.88; letter-spacing: -0.01em;
  text-transform: lowercase; color: var(--ink);
}
.s-eyebrow {
  color: var(--ink); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8em; margin-bottom: 0.45em;
}
.s-muted { color: var(--s-muted); }
.s-empty { color: var(--s-muted); font-size: 1.3em; padding: 4vh 0; }

/* ---------- Ranglijst ---------- */
/* scherm.js kiest per weergave het aantal kolommen (1 tot 4), de lettergrootte (--f) en de
   rijhoogte (--row-h), zodat alle spelers (40 en meer) zonder scrollen op het scherm passen.
   Bij veel spelers vallen eerst de rondekolommen en eventueel de initialen weg.
   De kolombreedtes in em hieronder staan ook in ROW in scherm.js: pas ze samen aan. */
.s-board {
  --f: 20px;
  --row-h: 2em;
  --board-cols: 1;
  --cols: 0;                 /* aantal getoonde rondekolommen */
  --c-pad: 0.9em;            /* binnenruimte links en rechts */
  --c-rank: 1.9em;
  --c-avatar: 1.7em;
  --c-cell: 3.7em;
  --c-total: 4.4em;
  --c-gap: 0.7em;
  display: grid;
  grid-auto-flow: column;    /* kolom voor kolom vullen: 1 t/m 14 links, 15 t/m 28 in het midden, enz. */
  grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr));
  column-gap: 2vw;
  row-gap: calc(var(--f) * 0.22);
  align-content: start;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  padding: 0.3em 0.7em 0.8em; /* ruimte voor de schaduw van de rijen */
  margin: -0.3em -0.7em 0;
}
.s-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--c-rank) var(--c-avatar) minmax(0, 1fr) repeat(var(--cols), var(--c-cell)) var(--c-total); /* vaste kolommen: cijfers lijnen uit */
  align-items: center;
  column-gap: var(--c-gap);
  height: var(--row-h);
  padding: 0 var(--c-pad);
  border-radius: 0 0.75em 0 0.75em;
  background: var(--s-panel);
  box-shadow: var(--s-shadow);
  font-size: var(--f);
  line-height: 1.25;
  will-change: transform;
}
.s-board.no-avatar .s-row { grid-template-columns: var(--c-rank) minmax(0, 1fr) repeat(var(--cols), var(--c-cell)) var(--c-total); }
/* Zonder rondekolommen: repeat(0, …) is ongeldige CSS en zou de hele kolomindeling laten wegvallen. */
.s-board.no-cells .s-row { grid-template-columns: var(--c-rank) var(--c-avatar) minmax(0, 1fr) var(--c-total); }
.s-board.no-cells.no-avatar .s-row { grid-template-columns: var(--c-rank) minmax(0, 1fr) var(--c-total); }
/* Veel spelers: kleinere titel, zodat de ranglijst meer ruimte krijgt. */
.s-view:has(.s-board.compact) .s-view-head h1 { font-size: 2.2em; }
.s-view:has(.s-board.compact) .s-eyebrow { margin-bottom: 0.25em; }
/* De kopregel houdt de lettergrootte van de rijen (anders lijnen de em-kolommen niet uit), alleen de tekst is kleiner. */
.s-head { height: 1.3em; background: none; box-shadow: none; color: var(--s-muted); font-weight: 700; }
.s-head > *, .s-head > .s-total { font-size: 0.9em; }
.s-rank { font-weight: 700; text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.s-avatar {
  width: 1.7em; height: 1.7em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-panel-2); color: var(--ink); font-weight: 700; font-size: 1em;
}
.s-avatar > span { font-size: 0.68em; }
.s-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-row.has-delta .s-name { padding-right: 4.2em; } /* ruimte voor de "+punten"-badge */
/* Status zonder emoji: een stip (live = pulserend cyaan) */
.s-live { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.35em; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.s-busy::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.s-busy { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rank-1 .s-busy { color: var(--brand-contrast); }
@media (prefers-reduced-motion: reduce) { .s-live, .s-busy::before { animation: none; } }
.s-cell { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-head .s-cell, .s-head .s-total { color: var(--s-muted); font-family: var(--font); }
.s-status { color: var(--s-text); font-weight: 600; }
.s-total {
  text-align: right; font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 1.25em; line-height: 1;
}
/* Focus op de top 3: de koploper als magenta kader, nummer 2 en 3 met een magenta rand en magenta score. */
.rank-1 { background: var(--brand); color: var(--brand-contrast); }
.rank-1 .s-rank, .rank-1 .s-cell, .rank-1 .s-status { color: var(--brand-contrast); }
.rank-1 .s-avatar { background: rgba(255, 255, 255, 0.2); color: var(--brand-contrast); }
.rank-2, .rank-3 { box-shadow: inset 0.3em 0 0 var(--brand), var(--s-shadow); }
.rank-2 .s-total, .rank-3 .s-total { color: var(--brand-strong); }
.rank-2 .s-avatar, .rank-3 .s-avatar { background: var(--brand-tint); color: var(--brand-deep); }
/* "+123"-badge: binnen de rij, rechts in de naamkolom (vlak voor de cijfers), zodat hij nooit
   over een andere rij of buiten het scherm valt. */
.s-delta {
  position: absolute; top: 0; bottom: 0;
  right: calc(var(--c-pad) + var(--c-total) + var(--c-gap) + var(--cols) * (var(--c-cell) + var(--c-gap)));
  display: flex; align-items: center;
  pointer-events: none;
  animation: delta 3s ease forwards;
}
.s-delta > b {
  font-size: 0.72em; line-height: 1.3; padding: 0.1em 0.6em; border-radius: 999px;
  background: var(--brand-strong); color: var(--brand-contrast);
  box-shadow: 0 0 0 0.18em var(--surface);
  font-variant-numeric: tabular-nums;
}
.rank-1 .s-delta > b { background: var(--surface); color: var(--brand-strong); box-shadow: none; }
@keyframes delta {
  0% { opacity: 0; transform: translateX(0.6em); }
  10%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* ---------- Voortgang van een ronde ---------- */
.s-progress { min-width: 26vw; display: grid; gap: 0.6em; }
.s-progress-text { font-size: 1.2em; text-align: right; }
.s-progress-track { height: 0.8em; border-radius: 999px; background: var(--s-panel); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.s-progress-bar { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 0.6s ease; }

/* ---------- Doe mee ---------- */
.s-join { flex-direction: row; align-items: center; justify-content: center; gap: 7vw; position: relative; }
/* Papieren bootje op de golf, rechtsonder */
.s-join::after {
  content: "";
  position: absolute; right: 3vw; bottom: 3vh;
  width: 11vw; aspect-ratio: 240 / 150;
  background: url("/img/bootje.svg") center / contain no-repeat;
  pointer-events: none;
}
.s-join h1 { font-size: 4.4em; }
.s-lead { font-size: 1.3em; font-weight: 600; margin-top: 3vh; }
/* URL als omlijnde pill, zoals het telefoonnummer op de Plainwater-site. */
.s-url {
  display: inline-block;
  margin: 2.4vh 0 2.4vh;
  padding: 0.3em 0.9em;
  font-size: 1.8em; font-weight: 700; color: var(--brand-strong);
  background: var(--surface);
  border: 0.1em solid var(--brand);
  border-radius: 999px;
  word-break: break-all;
}
.s-join .s-muted { font-size: 1.1em; }
.s-qr-wrap { position: relative; }
.s-qr {
  background: var(--surface); padding: 1.5em;
  border-radius: 0 1.8em 0 1.8em; box-shadow: var(--shadow);
}
.s-qr img, .s-qr canvas { display: block; width: min(36vh, 30vw) !important; height: auto !important; }
/* Sticker alleen op de hoek van het witte kader, nooit over de code zelf (anders scant hij niet). */
.s-qr-wrap .bullit {
  position: absolute; top: -2.9em; right: -2.9em;
  width: 4.2em; height: 4.2em; font-size: 1.5em;
}

/* ---------- Onthulling ---------- */
.s-reveal { flex-direction: row; gap: 1.5vw; position: relative; }
.s-reveal-map { flex: 1; border-radius: 0 1.4em 0 1.4em; overflow: hidden; min-height: 0; box-shadow: var(--s-shadow); }
.s-reveal-side {
  width: 34vw; display: flex; flex-direction: column; gap: 1.2vh;
  background: var(--s-panel); border-radius: 0 1.4em 0 1.4em; padding: 1.4em; min-height: 0;
  box-shadow: var(--s-shadow);
}
.s-reveal-side h1 { font-size: 2.3em; text-transform: none; line-height: 0.95; }
.s-reveal-side .s-muted { color: var(--ink-soft); }
.s-reveal-list { display: grid; gap: 0.5vh; overflow-y: auto; flex: 1; align-content: start; }
.s-reveal-row {
  display: grid; grid-template-columns: 2.2em 0.9em minmax(0, 1fr) 3.8em;
  align-items: center; gap: 0.7em; padding: 0.45em 0.6em;
  border-radius: 0 0.6em 0 0.6em; background: var(--s-panel-2);
}
.s-reveal-row .s-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.s-reveal-row .s-meta { font-size: 0.78em; color: var(--ink-soft); white-space: nowrap; }
.s-reveal-side .s-eyebrow { color: var(--brand-deep); }
.s-dot { width: 0.9em; height: 0.9em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(65, 64, 66, 0.15); } /* scorekleur, zie PP.band */
.s-reveal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-weight: 700; }
.s-reveal-nav button { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.s-reveal-nav button:disabled { box-shadow: none; background: var(--surface-2); }
.s-reveal-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--s-panel); font-size: 1.6em; color: var(--ink-soft);
  border-radius: 0 1.4em 0 1.4em; box-shadow: var(--s-shadow);
}

/* ---------- Bediening ---------- */
/* Rechtsboven in de kop, naast de tabs, zodat de knop nooit een score afdekt.
   De top volgt de opbouw van .s-header: lijn + padding + halve logohoogte - halve knophoogte. */
.s-dock {
  position: fixed; z-index: 1000; right: 2.5vw;
  top: calc(0.2em + max(0.8em, 14px) + max(1.25em, 22.5px) - 0.95em);
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6em;
}
body.screen:has(#s-dock:not([hidden])) .s-tabs { margin-right: 2.7em; }
.s-dock-toggle {
  background: var(--surface-2); color: var(--brand-strong); border-radius: 50%;
  width: 2.2em; height: 2.2em; padding: 0;
}
.s-dock-panel {
  display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;
  background: var(--surface); color: var(--ink); padding: 0.6em;
  border-radius: 0 0.9em 0 0.9em; box-shadow: var(--shadow);
  font-size: 0.8em; max-width: 80vw;
}
.s-dock-panel select { width: auto; min-width: 14em; }
.s-dock-msg { color: var(--ink-soft); font-weight: 600; }

/* Leaflet-labels leesbaar op de beamer */
.screen .leaflet-tooltip { font-weight: 700; font-size: clamp(13px, 0.85vw, 17px); color: var(--ink); }

/* ---------- Onthulling met spanning ---------- */
/* Prikken vallen één voor één op de kaart (vertraging --d per prik), de juiste plek valt er groot bij. */
.pin-player.drop { animation: pin-drop 0.45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes pin-drop { from { transform: translateY(-36px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pin-target.drop { animation: target-drop 0.8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes target-drop { 0% { transform: translateY(-140px) scale(1.8); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
.s-fade-in { animation: s-fade-in 0.9s ease 0.35s both; }
@keyframes s-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-player.drop, .pin-target.drop, .s-fade-in { animation: none; } }

.s-suspense { display: grid; place-items: center; align-content: center; gap: 0.4em; min-height: 40vh; text-align: center; }
.s-suspense-count { font-family: var(--font-display); font-weight: 700; font-size: 5em; line-height: 1; color: var(--ink); }
.s-suspense-q {
  font-family: var(--font-display); font-weight: 700; font-size: 2.4em; line-height: 1;
  text-transform: lowercase; color: var(--ink); margin: 0.3em 0 0.6em;
}
.s-reveal-row.winner { background: var(--brand-tint); box-shadow: inset 0.3em 0 0 var(--brand); animation: s-fade-in 0.6s ease 0.5s both; }
.s-reveal-row.winner .s-meta { color: var(--brand-deep); font-weight: 700; }

/* Geluidsknop op het scherm */
.s-tabs .sound-toggle { width: auto; height: auto; padding-inline: 0.7em; }
.sound-toggle .off { display: none; }
.sound-toggle.off .on { display: none; }
.sound-toggle.off .off { display: block; }