/* ==========================================================================
   huisstijl.css · Wie is de Woesjoem
   Eén stylesheet voor telefoon (index.html), host (host.html) en tv (tv.html).
   Laden ná de eigen <style> van elk bestand:
       <link rel="stylesheet" href="/huisstijl.css">
   en de body een schermklasse geven: s-tel, s-host of s-tv.
   Raakt geen id, klasse of functie van de spellogica. Alles hier is nieuw
   (w-*, s-*, --w-*, --tv-*) of een extra selector op wat er al is.
   ========================================================================== */


/* ---------- 1 · TOKENS EN BASIS ---------------------------------------- */

:root {
  /* kleur */
  --w-bg:          #0b0b0d;
  --w-vlak:        #16161a;
  --w-vlak-hoog:   #1d1d23;
  --w-lijn:        #2a2a31;
  --w-lijn-zacht:  #1d1d23;
  --w-tekst:       #f4f4f5;
  --w-tekst-2:     #d7d7dc;
  --w-grijs:       #8b8b93;
  --w-limoen:      #c8ff00;
  --w-op-limoen:   #0b0b0d;
  --w-rood:        #ff6b6b;
  --w-rood-tekst:  #ffd1d1;
  --w-rood-vlak:   #2a1013;
  --w-groen:       #4ade80;
  --w-groen-tekst: #c9f7da;
  --w-groen-vlak:  #0e2416;

  /* letters: drie spatiëringen, meer niet */
  --w-spatie-label:   .18em;   /* kapitalen tot 14 px, tv-labels   */
  --w-spatie-kop:     .14em;   /* koppen in kapitaal                */
  --w-spatie-display: .05em;   /* de grote titel                    */

  /* vorm */
  --w-r:   12px;
  --w-pil: 999px;

  /* beweging: vier duren, drie curves */
  --w-kort:     160ms;
  --w-midden:   280ms;
  --w-lang:     480ms;
  --w-spanning: 1400ms;
  --w-uit:    cubic-bezier(.16, 1, .3, 1);    /* snel vertrekken, zacht landen */
  --w-in-uit: cubic-bezier(.65, 0, .35, 1);   /* wissels van toestand          */
  --w-veer:   cubic-bezier(.34, 1.4, .64, 1); /* alleen de winnende woesjoem   */

  /* tv: diagonaal en kijkafstand. Of in de link: /tv?h=…&inch=65&m=3 */
  --tv-inch: 55;
  --tv-afstand: 3;

  /* de namen die de pagina's al gebruiken, nu overal met dezelfde waarde */
  --bg: var(--w-bg);  --fg: var(--w-tekst);  --accent: var(--w-limoen);
  --dim: var(--w-grijs);  --card: var(--w-vlak);

  color-scheme: dark;              /* schuif, vinkjes en keuzelijsten donker */
  accent-color: var(--w-limoen);   /* en in limoen in plaats van blauw       */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection   { background: var(--w-limoen); color: var(--w-op-limoen); }
::placeholder { color: var(--w-grijs); opacity: 1; }
:focus-visible { outline: 2px solid var(--w-limoen); outline-offset: 3px; }
.s-tel, .s-host, .s-tv { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* één gloed, alleen limoen: de blauwe en roze vlekken vervallen */
.s-tel::before { background: radial-gradient(80vw 60vw at 15% -12%, rgba(200,255,0,.08), transparent 62%); }
.s-host { background: radial-gradient(50vw 40vw at 100% -10%, rgba(200,255,0,.05), transparent 60%), var(--w-bg); }
.s-tv   { background: radial-gradient(70vw 70vw at 50% -20%, rgba(200,255,0,.07), transparent 60%), var(--w-bg); }

.s-tel h1, .s-host h1 { letter-spacing: var(--w-spatie-kop); }
.s-tv .titel { letter-spacing: var(--w-spatie-display); }
.s-tel .fout { color: var(--w-rood); }
.s-tel .uitleg { color: var(--w-tekst-2); }


/* ---------- 2 · ÉÉN COMPONENTENSET -------------------------------------- */

/* a. Label met streepje: badge (telefoon), h2 (host), kicker en onderschrift (tv) */
.badge, .s-host h2, .s-tv .kicker, .s-tv #diaklein {
  text-transform: uppercase; letter-spacing: var(--w-spatie-label);
  font-weight: 600; color: var(--w-grijs);
}
.badge::before, .s-host h2::before, .s-tv .kicker::before, .s-tv #diaklein::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 1.15em; height: max(2px, .1em); margin: -.12em .75em 0 0;
  border-radius: 2px; background: var(--w-limoen); transform-origin: left center;
}
.badge {
  font-size: 12.5px; padding: 0; border: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.s-host h2 { display: block; font-size: 12.5px; }
.s-host th { letter-spacing: var(--w-spatie-label); color: var(--w-grijs); font-weight: 600; }

/* b. Knoppen: één vorm, drie soorten (primair limoen, secundair vlak, waarschuwing) */
.s-tel button, .s-host button { font-family: inherit; border-radius: var(--w-r); }
.s-tel button:not(.optie), .s-host button.primair {
  background: var(--w-limoen); color: var(--w-op-limoen);
  border: 1px solid var(--w-limoen); font-weight: 700;
}
.s-tel button:not(.optie) { box-shadow: 0 10px 28px -18px rgba(200,255,0,.7); }
.s-host button:not(.primair):not(.waarschuwing) {
  background: var(--w-vlak); border: 1px solid var(--w-lijn); color: var(--w-tekst);
}
.s-host button.waarschuwing { background: var(--w-rood-vlak); border-color: var(--w-rood); color: var(--w-rood-tekst); }
.s-tel button:active, .s-host button:active { transform: scale(.98); }
.s-host button:not(.primair):not(.waarschuwing):active { border-color: var(--w-limoen); }
.s-tel button:disabled, .s-host button:disabled { opacity: .45; transform: none; box-shadow: none; }

/* c. Kaarten en vlakken */
.s-tel .kaart { background: var(--w-vlak); border-color: var(--w-lijn); border-radius: var(--w-r); }
.s-tel input:not([type=range]), .s-host input:not([type=checkbox]), .s-host select {
  background: var(--w-vlak); border-color: var(--w-lijn); border-radius: var(--w-r);
}

/* d. Host: zelfde knoppen en velden, groot genoeg, status altijd in beeld */
.s-host button { min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.s-host input:not([type=checkbox]), .s-host select { min-height: 44px; font-size: 16px; }
.s-host input[type=checkbox] { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.s-host #finale [data-finale] { min-height: 56px; padding: 0 24px; font-size: 16px; }
.s-host #status {
  position: sticky; top: 0; z-index: 10; margin: 0 -16px 8px; padding: 10px 16px;
  background: rgba(11,11,13,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--w-lijn-zacht);
}
.s-host .chip { background: var(--w-vlak); border-color: var(--w-lijn); color: var(--w-grijs); border-radius: var(--w-pil); }
.s-host .chip b { color: var(--w-limoen); }
.s-host td { border-bottom-color: var(--w-lijn-zacht); }
.s-host tr:hover td { background: var(--w-vlak); }

/* e. Afgeschermd (host): elke rol even breed, dus de vervaging verraadt
      niet langer of er "woesjoem" of "speler" staat */
.s-host .rolcel {
  filter: none; color: transparent; text-shadow: none;
  background: linear-gradient(var(--w-lijn), var(--w-lijn)) left center / 9ch .9em no-repeat;
  background-origin: content-box; border-radius: 4px;
}
.s-host span.rolcel {
  display: inline-block; width: 16ch; height: 1.45em; overflow: hidden;
  white-space: nowrap; vertical-align: bottom; background-size: 100% .9em;
}
.s-host #finale span.rolcel { width: 32ch; height: 2.9em; background-size: 100% 2.4em; }
.s-host pre.rolcel {
  background: repeating-linear-gradient(0deg, var(--w-lijn) 0 .9em, var(--w-vlak) .9em 1.45em);
  max-height: 8.7em; overflow: hidden;
}
.s-host .rolcel:hover, .s-host .rolcel:active { color: inherit; background: none; }
.s-host span.rolcel:hover, .s-host span.rolcel:active { width: auto; height: auto; white-space: normal; }
.s-host pre.rolcel:hover, .s-host pre.rolcel:active { background: var(--w-vlak); max-height: none; }


/* ---------- 3 · ÉÉN BEWEGINGSTAAL --------------------------------------- */

@keyframes w-in     { from { opacity: 0; } }
@keyframes w-op     { from { opacity: 0; transform: translate3d(0, var(--w-op, 10px), 0); } }
@keyframes w-streep   { from { transform: scaleX(0); } }
@keyframes w-streep-b { from { transform: scaleX(0); } }

/* De pagina's verversen elke 1–2 s en bouwen dan het hele scherm opnieuw op,
   ook als er niets verandert (bijvoorbeeld als een ander net antwoordt).
   ritme.js zet data-ritme="nieuw" alleen als de inhoud echt anders is;
   bij "rust" beweegt er niets. Zonder ritme.js: geen beweging, alles werkt. */
.s-tel #app { animation: w-in var(--w-midden) var(--w-uit) backwards; }
html[data-ritme="nieuw"] .s-tel #app > :not(.rolb) { animation: w-op var(--w-midden) var(--w-uit) backwards; }
html[data-ritme="nieuw"] .s-tel #app > :nth-child(2) { animation-delay:  60ms; }
html[data-ritme="nieuw"] .s-tel #app > :nth-child(3) { animation-delay: 110ms; }
html[data-ritme="nieuw"] .s-tel #app > :nth-child(4) { animation-delay: 160ms; }
html[data-ritme="nieuw"] .s-tel #app > :nth-child(5) { animation-delay: 210ms; }
html[data-ritme="nieuw"] .s-tel #app > :nth-child(n+6) { animation-delay: 250ms; }
html[data-ritme="nieuw"] .s-tel #app > .badge::before { animation: w-streep var(--w-kort) var(--w-uit) backwards; }

/* tv: alleen kaarten die er net bij kwamen bewegen (ritme.js zet w-nieuw) */
.s-tv .naam, .s-tv .naam.groen { animation: none; }
@keyframes w-kaart-op { from { opacity: 0; transform: translate3d(0, 3vh, 0) scale(.96); } }
.s-tv .naam.w-nieuw { animation: w-kaart-op var(--w-lang) var(--w-uit) backwards; }
.s-tv .bord.w-nieuw { animation: w-op var(--w-lang) var(--w-uit) backwards; --w-op: 3vh; }

/* faselabel op de tv: bij elke wissel loopt het streepje opnieuw en komt het woord binnen */
@keyframes w-fase-a { from { opacity: 0; letter-spacing: .6em; } }
@keyframes w-fase-b { from { opacity: 0; letter-spacing: .6em; } }
html[data-fw="a"] .s-tv #fase { animation: w-fase-a var(--w-lang) var(--w-uit) backwards; }
html[data-fw="b"] .s-tv #fase { animation: w-fase-b var(--w-lang) var(--w-uit) backwards; }
html[data-fw="a"] .s-tv .kicker::before { animation: w-streep   var(--w-lang) var(--w-uit) backwards; }
html[data-fw="b"] .s-tv .kicker::before { animation: w-streep-b var(--w-lang) var(--w-uit) backwards; }

/* beweeg minder: geen verschuiving, schaal of gloedpuls; wel korte fades
   en de kleurwissel op hetzelfde moment (dat is geen beweging) */
@media (prefers-reduced-motion: reduce) {
  html[data-ritme="nieuw"] .s-tel #app > :not(.rolb) { animation: w-in 120ms linear backwards !important; }
  .s-tv .naam.w-nieuw, .s-tv .bord.w-nieuw { animation: w-in 240ms linear backwards !important; }
  html[data-fw] .s-tv #fase { animation: none !important; }
  html[data-fw] .s-tv .kicker::before { animation: none !important; }
}


/* ---------- 4 · TV OP 3 METER ------------------------------------------- */

/* Lettergrootte voor 1 boogminuut kapitaalhoogte, 16:9-scherm, kapitaal = 0,70 em:
     hoogte scherm = inch × 12,45 mm   ·   1′ op d meter = d × 0,2909 mm
     font-size = (d × 0,2909 / 0,70) / (inch × 12,45) × 100vh = 10,01vh × (d/3) / inch   */
:root {
  --tv-1:     calc(10.01vh * var(--tv-afstand) / 3 / var(--tv-inch));
  --tv-label: calc(var(--tv-1) * 18);   /* 18′: labels, onderschriften         */
  --tv-tekst: calc(var(--tv-1) * 20);   /* 20′: lopende regels, het bord        */
  --tv-naam:  calc(var(--tv-1) * 26);   /* 26′: namen                           */
  --tv-held:  calc(var(--tv-1) * 30);   /* 30′: namen in de finale              */
}
.s-tv .wrap   { padding: 5vh 5vw; }                       /* binnen de 5 % title-safe (overscan) */
.s-tv .kicker { font-size: var(--tv-label); margin-bottom: 2vh; max-height: 12vh; overflow: hidden;
               transition: opacity var(--w-lang) var(--w-in-uit), max-height var(--w-lang) var(--w-in-uit), margin var(--w-lang) var(--w-in-uit); }
.s-tv .titel  { transition: font-size var(--w-lang) var(--w-in-uit); }
.s-tv .regel  { font-size: var(--tv-label); letter-spacing: var(--w-spatie-label); margin-top: 2.4vh; }
.s-tv .namen  { gap: 1.6vh 1.6vw; margin-top: 3.6vh; width: 88vw; max-width: none; }
.s-tv .naam {
  position: relative; flex: 0 1 27vw; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--tv-naam); line-height: 1.15; padding: 1.5vh 1.6vw;
  background: var(--w-vlak); border: 2px solid var(--w-lijn); border-radius: 1.2vh;
}
.s-tv .naam small { font-size: var(--tv-label); letter-spacing: var(--w-spatie-kop); color: var(--w-tekst-2); margin-top: .8vh; text-wrap: balance; }
.s-tv .klein  { font-size: var(--tv-tekst); color: var(--w-tekst-2); margin-top: 3vh; max-width: 84vw; text-wrap: balance; }

/* de titel maakt plaats: groot bij een leeg scherm, kleiner met namen, klein in de finale */
.s-tv .wrap:has(#namen > .naam) .titel { font-size: 8vh; }
.s-tv .wrap:has(#namen > :is(.rood, .groen, .mol, .bord)) .titel { font-size: 4.4vh; }
.s-tv .wrap:has(#namen > :is(.rood, .groen, .mol, .bord)) > .kicker { opacity: 0; max-height: 0; margin: 0; }   /* alleen de datumregel, niet de teamkoppen van het bord */
.s-tv #namen:has(> :is(.rood, .groen)) > .naam { flex-basis: 20.5vw; font-size: var(--tv-held); }   /* finale: 4 × 2 */
.s-tv #namen:has(> .mol) > .naam { flex-basis: 43vw; padding-inline: 1.2vw; font-size: var(--tv-held); }
.s-tv #namen:has(> .mol) > .naam small { font-size: calc(var(--tv-1) * 16); letter-spacing: .08em; }   /* 16′: één regel op 55″ en 65″ */
.s-tv #namen > .naam.mol.winnaar { order: 1; }                        /* leesrichting = volgorde van onthullen */
.s-tv #namen:has(> .mol) > .naam.groen { order: 2; }

/* het verdachtenbord (de inline 2,2vh van de regelkolom gaat eraf) */
.s-tv .bord     { gap: 6vw; margin-top: 0; }
.s-tv .bordkol  { min-width: 34vw; }
.s-tv .bordkol .kicker { margin-bottom: .6vh; }
.s-tv .bordnaam { font-size: var(--tv-tekst); padding: .7vh 0; align-items: center; border-bottom-color: var(--w-lijn-zacht); }
.s-tv #namen:has(> .bord) { margin-top: 2.4vh; }
.s-tv .wrap:has(#namen > .bord) #klein { margin-top: 2vh; }
.s-tv .bordnaam small { font-size: var(--tv-label) !important; color: var(--w-tekst-2) !important; letter-spacing: .06em; font-weight: 500; margin-top: .3vh; }

/* diashow-onderschrift: binnen title-safe en altijd op een donkere ondergrond */
.s-tv #diaklein {
  left: 5vw; bottom: 5vh; font-size: var(--tv-label); color: var(--w-tekst);
  background: rgba(11,11,13,.8); padding: 1vh 1.4vw; border-radius: 1vh;
}

/* rood en groen: zelfde vorm, zelfde gloed, alleen de kleur verschilt */
.s-tv .naam.groen { --k-vlak: var(--w-groen-vlak); --k-rand: var(--w-groen); --k-tekst: var(--w-groen-tekst); --k-gloed: rgba(74,222,128,.5); }
.s-tv .naam.rood,
.s-tv .naam.mol   { --k-vlak: var(--w-rood-vlak);  --k-rand: var(--w-rood);  --k-tekst: var(--w-rood-tekst);  --k-gloed: rgba(255,107,107,.5); }
.s-tv .naam.mol.winnaar { --k-vlak: #1a2006; --k-rand: var(--w-limoen); --k-tekst: #eaffb0; --k-gloed: rgba(200,255,0,.45); }
.s-tv .naam:is(.groen, .rood, .mol) {
  background: var(--k-vlak); border-color: var(--k-rand); color: var(--k-tekst);
  box-shadow: 0 0 3.2vh -.8vh var(--k-gloed); padding: 1.5vh 1.6vw;
}
/* kleurenblind? het woord staat erbij. Neutraal: zegt niets over goed of fout */
.s-tv #namen > .naam:is(.groen, .rood):not(:has(small))::after {
  display: block; margin-top: .6vh; font-size: var(--tv-label); font-weight: 600;
  letter-spacing: var(--w-spatie-label); text-transform: uppercase; color: var(--k-tekst);
}
.s-tv #namen > .naam.groen:not(:has(small))::after { content: 'groen'; }
.s-tv #namen > .naam.rood:not(:has(small))::after  { content: 'rood'; }


/* ---------- 5 · TELEFOON IN ÉÉN HAND ------------------------------------ */

.s-tel {
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overscroll-behavior-y: none;                      /* geen per ongeluk herladen */
}
.s-tel :is(button, label, input) { touch-action: manipulation; }   /* geen dubbeltik-zoom */
.s-tel :is(button, .fotoknop) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.s-tel button { min-height: 60px; }
.s-tel button.optie { min-height: 64px; margin-bottom: 10px; }
.s-tel .fotoknop { min-height: 56px; display: flex; align-items: center; justify-content: center; }
.s-tel .voortgang { height: 4px; }

/* beslisschermen: de keuzes zakken naar de duimzone, de vraag blijft boven */
.s-tel #app:has(> #opties, > #quizopties, > [data-keuze], > [data-gok], > [data-hebzucht], > #bod, > #uitlegverder) {
  flex: 1 0 auto; display: flex; flex-direction: column;
}
.s-tel #app:has(> #opties, > #quizopties, > [data-keuze], > [data-gok], > [data-hebzucht], > #bod, > #uitlegverder) ~ .leeg { display: none; }
.s-tel #app:has(> #opties, > #quizopties, > [data-keuze], > [data-gok], > [data-hebzucht], > #bod, > #uitlegverder) > .badge { align-self: flex-start; }
.s-tel #app > :is(#opties, #quizopties) { margin-top: auto; padding-top: 16px; }
.s-tel #app > #uitlegverder { margin-top: auto; }
.s-tel #app > :not(.optie) + .optie:is([data-keuze], [data-gok], [data-hebzucht]) { margin-top: auto; }
.s-tel #app:has(> #bod) > .vraag { margin-bottom: auto; }

/* veiling: een schuif die je in het donker met je duim raakt (44 px knop, limoen) */
.s-tel input[type=range] {
  -webkit-appearance: none; appearance: none; height: 56px; padding: 0; border: 0;
  background: transparent; margin-bottom: 4px;
}
.s-tel input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 10px; background: var(--w-vlak-hoog); border: 1px solid var(--w-lijn);
}
.s-tel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%;
  background: var(--w-limoen); border: 4px solid var(--w-bg); box-shadow: 0 0 0 1px var(--w-limoen);
}
.s-tel input[type=range]::-moz-range-track { height: 10px; border-radius: 10px; background: var(--w-vlak-hoog); border: 1px solid var(--w-lijn); }
.s-tel input[type=range]::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--w-limoen); border: 4px solid var(--w-bg); }

/* rol vasthouden: woesjoem en speler zien er van een meter afstand hetzelfde uit
   (geen vet of fel woesjoemspoor, gelijke hoogte) */
.s-tel .rolb b, .s-tel .rolb strong { font-weight: inherit; color: inherit; }
.s-tel .rolb .wacht { min-height: calc(4 * 1.45em); }


/* ---------- 6 · CHOREOGRAFIE: VRAAG OPENT · ROOD/GROEN · ONTHULLING ------ */

/* 6a. Vraag opent (telefoon) */
@keyframes w-glint { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.s-tel .voortgang > i { position: relative; }
html[data-ritme="nieuw"] .s-tel #app > :is(#opties, #quizopties) { animation: none; }
html[data-ritme="nieuw"] .s-tel #app > .vraag { animation-duration: 320ms; --w-op: 12px; }
html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie { animation: w-op 240ms var(--w-uit) backwards; --w-op: 8px; }
html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie:nth-child(1) { animation-delay: 140ms; }
html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie:nth-child(2) { animation-delay: 190ms; }
html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie:nth-child(3) { animation-delay: 240ms; }
html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie:nth-child(n+4) { animation-delay: 290ms; }
html[data-ritme="nieuw"] .s-tel .voortgang > i::after {
  content: ''; position: absolute; top: 0; right: 0; width: 18px; height: 100%;
  background: linear-gradient(90deg, rgba(234,255,176,0), #f4ffd6); opacity: 0; animation: w-glint 640ms var(--w-uit) 80ms backwards;
}

/* 6b. Rood/groen (tv): binnenkomen in neutraal, spanning, dan pas kleur.
       Voor rood en groen exact dezelfde tijden, curves en gloed. */
@keyframes w-uitslag {
  from { background-color: var(--w-vlak); border-color: var(--w-lijn); color: var(--w-tekst); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  to   { background-color: var(--k-vlak); border-color: var(--k-rand); color: var(--k-tekst); box-shadow: 0 0 3.2vh -.8vh var(--k-gloed); }
}
@keyframes w-gloed {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  35%  { box-shadow: 0 0 9vh .6vh var(--k-gloed); }
  100% { box-shadow: 0 0 3.2vh -.8vh var(--k-gloed); }
}
@keyframes w-zoek { 0% { transform: scaleX(0); opacity: 1; } 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.s-tv #namen > .naam:is(.groen, .rood):not(:has(small)).w-nieuw {
  animation: w-kaart-op var(--w-lang) var(--w-uit) backwards,
             w-uitslag 360ms var(--w-uit) var(--w-spanning) backwards,
             w-gloed 1200ms var(--w-uit) calc(var(--w-spanning) + 60ms) backwards;
}
.s-tv #namen > .naam:is(.groen, .rood):not(:has(small)).w-nieuw::before {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 1.1vh; height: max(2px, .2vh);
  background: var(--w-grijs); transform-origin: left center; opacity: 0;
  animation: w-zoek var(--w-spanning) linear backwards;
}
.s-tv #namen > .naam:is(.groen, .rood):not(:has(small)).w-nieuw::after {
  animation: w-in var(--w-midden) var(--w-uit) calc(var(--w-spanning) + 360ms) backwards;
}

/* 6c. Onthulling (tv): een tel niets, dan de woesjoem, de winnende woesjoem,
       de winnende speler. Fun facts pas daarna: die kunnen de woesjoem noemen. */
@keyframes w-onthul { from { opacity: 0; transform: translate3d(0, 4vh, 0) scale(.94); } }
@keyframes w-gloed-limoen {
  0%   { box-shadow: 0 0 0 0 rgba(200,255,0,0); }
  40%  { box-shadow: 0 0 12vh 1vh rgba(200,255,0,.5); }
  100% { box-shadow: 0 0 3.2vh -.8vh rgba(200,255,0,.45); }
}
.s-tv #namen > .naam.mol.w-nieuw:not(.winnaar)    { --d: 600ms;  animation: w-onthul 700ms var(--w-uit) var(--d) backwards; }
.s-tv #namen > .naam.mol.winnaar.w-nieuw          { --d: 1800ms; animation: w-onthul 900ms var(--w-veer) var(--d) backwards,
                                                                          w-gloed-limoen 1600ms var(--w-uit) 2200ms backwards; }
.s-tv #namen:has(> .mol) > .naam.groen.w-nieuw    { --d: 3200ms; animation: w-onthul 700ms var(--w-uit) var(--d) backwards; }
.s-tv #namen > .naam.w-nieuw small { animation: w-in var(--w-lang) var(--w-uit) calc(var(--d, 0ms) + 500ms) backwards; }
.s-tv .wrap:has(#namen > .mol) #klein { animation: w-in var(--w-lang) var(--w-uit) 4200ms backwards; }

@media (prefers-reduced-motion: reduce) {
  html[data-ritme="nieuw"] .s-tel :is(#opties, #quizopties) > .optie { animation: w-in 120ms linear backwards !important; }
  html[data-ritme="nieuw"] .s-tel .voortgang > i::after { animation: none !important; opacity: 0; }
  .s-tv #namen > .naam:is(.groen, .rood):not(:has(small)).w-nieuw {
    animation: w-in 240ms linear backwards, w-uitslag 240ms linear var(--w-spanning) backwards !important;
  }
  .s-tv #namen > .naam:is(.groen, .rood):not(:has(small)).w-nieuw::before { animation: none !important; opacity: 0; }
  .s-tv #namen > .naam.mol.w-nieuw:not(.winnaar) { animation: w-in 400ms linear 600ms backwards !important; }
  .s-tv #namen > .naam.mol.winnaar.w-nieuw        { animation: w-in 400ms linear 1800ms backwards !important; }
  .s-tv #namen:has(> .mol) > .naam.groen.w-nieuw  { animation: w-in 400ms linear 3200ms backwards !important; }
  .s-tv #namen > .naam.w-nieuw small             { animation: w-in 400ms linear calc(var(--d, 0ms) + 500ms) backwards !important; }
  .s-tv .wrap:has(#namen > .mol) #klein           { animation: w-in 400ms linear 4200ms backwards !important; }
}

/* Toegevoegd na de ontwerplaag: de opening. Als alle deelnemers binnen zijn, kleuren de
   naamkaarten groen. Losse klasse, zodat de finale (die 'groen' + 'rood' gebruikt en
   daar het label aan hangt) ongemoeid blijft. */
/* De opening gebruikt 'groen klaar': groen voor de kaartstijl en de 4×2-indeling,
   'klaar' om het label 'groen' (dat bij de finale hoort) te onderdrukken. */
.s-tv #namen > .naam.groen.klaar::after { content: none; }

.s-tv #namen > .naam.klaar {
  --k-vlak: var(--w-groen-vlak); --k-rand: var(--w-groen); --k-tekst: var(--w-groen-tekst);
  --k-gloed: rgba(74,222,128,.35);
}

/* Turflijst compact: één regel per teamgenoot met - teller + en twee kleine oordelen.
   Toegevoegd na de test op de telefoon (30 oktober). */
.s-tel .turfrij { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid #23232a; border-radius:12px; margin:0 0 8px; }
.s-tel .turfnaam { flex:1 1 auto; font-weight:600; font-size:16px; }
.s-tel .turfknoppen, .s-tel .turfstand { display:flex; align-items:center; gap:6px; }
.s-tel .kleinknop { min-height:44px; min-width:44px; padding:0 10px; border-radius:10px;
  border:1px solid #2c2c34; background:#141418; color:#e8e8ec; font-size:15px; font-weight:600; }
.s-tel .kleinknop.aan { border-color:#c8ff00; color:#c8ff00; background:#1a1f08; }
.s-tel .turfteller { min-width:20px; text-align:center; font-size:17px; }

/* Uitleg als lijst met bolletjes in plaats van een lap tekst (30 oktober). */
.s-tel .punten { margin:0; padding-left:1.15em; }
.s-tel .punten li { margin:0 0 .5em; line-height:1.4; }
.s-tel .regelblok { border:1px solid #23232a; border-radius:12px; margin:0 0 8px; padding:10px 12px; }
.s-tel .regelblok summary { font-weight:600; font-size:16px; cursor:pointer; }
.s-tel .regelblok[open] summary { color:#c8ff00; }