/*
 * Pakjesrit: het Sint-en-Piet-spel met scorebord (stijlgids v0.4: hemel bij dag,
 * tekeninkt, papier, Sint- en Pietkleuren). Het speelveld is een podium van
 * 800 eenheden hoog dat met één transform schaalt; de lagen schuiven met
 * translate3d, zodat de huizen niet opnieuw getekend worden. Score, reeks en
 * tijd staan ín het veld: tijdens een rit zie je alles in één beeld.
 */
.pr { --grond: var(--hemel); position: relative; color: var(--inkt); }

/* ---------- Het veld ---------- */
.pr__veld {
  position: relative; overflow: hidden; height: clamp(380px, 58vw, 660px); max-height: calc(100svh - 96px);
  /* zelfde kleur als de bovenkant van het hemelverloop: geen naad als het veld hoger is dan de wereld */
  border-radius: 18px; background: #BFE0FF; cursor: pointer; outline: none;
  box-shadow: 0 0 0 2.5px var(--inkt), 6px 7px 0 2.5px var(--sintrood), 0 34px 60px -30px rgba(30, 26, 51, .5);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.pr__veld--speelt { touch-action: none; }
.pr__veld:focus-visible { box-shadow: 0 0 0 2.5px var(--inkt), var(--focus); }
.pr__podium { position: absolute; left: 0; top: 0; transform-origin: 0 0; contain: layout paint; }
.pr__hemel, .pr__wolken, .pr__ver, .pr__pakjes, .pr__spoor, .pr__sint, .pr__fx { position: absolute; left: 0; top: 0; }
.pr__hemel { width: 100%; height: 100%; display: block; }
.pr__wolken, .pr__ver { display: flex; will-change: transform; }
.pr__wolken-strook, .pr__ver-strook { flex: none; display: block; }
.pr__spoor, .pr__fx { will-change: transform; }
.pr__blok { position: absolute; left: 0; top: 0; }
.pr__huis { display: block; overflow: visible; }
/* Tot het spel gebouwd is (pas als het in beeld komt): een rustige hemel. */
.pr:not(.pr--klaar) .pr__veld { background: linear-gradient(#BFE0FF, var(--hemel) 55%, #FFF3DC); }

/* ---------- HUD in het veld ---------- */
.pr__hud {
  position: absolute; z-index: 4; inset: 12px 12px auto 12px;
  display: grid; grid-template-columns: auto auto minmax(120px, 1fr) auto auto; align-items: center; gap: 10px;
  pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.pr__veld[data-scherm="start"] .pr__hud, .pr__veld[data-scherm="einde"] .pr__hud, .pr__veld[data-scherm="melding"] .pr__hud { opacity: 0; transform: translateY(-8px); visibility: hidden; }
.pr__hud > * { margin: 0 !important; }
.pr__hud-score, .pr__hud-reeks, .pr__hud-tijd {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px;
  background: var(--papier); border-radius: 14px; box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--piet-blauw);
}
.pr__hud-label { font: 700 12px/1 var(--f-tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); }
.pr__hud strong { font: 600 30px/1 var(--f-display); font-variation-settings: "SOFT" 100; color: var(--inkt); font-variant-numeric: tabular-nums; }
.pr__hud-score strong { min-width: 2.6ch; }
.pr__hud-reeks { box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--goud); }
.pr__hud-reeks--aan { background: var(--goud-zacht); }
.pr__hud-reeks--aan strong { color: var(--sintrood); }
.pr__hud-reeks--plof strong { display: inline-block; animation: pr-plof .4s cubic-bezier(.34, 1.5, .64, 1); }
.pr__pips { display: grid; grid-template-columns: repeat(4, 8px); gap: 3px; }
.pr__pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--papier-diep); box-shadow: inset 0 0 0 1.5px var(--inkt); transition: background .15s; }
.pr__pips i.aan { background: var(--sintrood); }
@keyframes pr-plof { 40% { transform: scale(1.5) rotate(-6deg); } }
.pr__hud-tijd { gap: 12px; }
.pr__hud-tijd p { display: flex; align-items: center; gap: 8px; margin: 0; }
.pr__tijdbalk { flex: 1; min-width: 40px; height: 12px; border-radius: 6px; background: var(--papier-diep); box-shadow: inset 0 0 0 2px var(--inkt); overflow: hidden; }
.pr__tijdbalk i { display: block; height: 100%; background: var(--goud); transform-origin: 0 50%; border-right: 2px solid var(--inkt); }
.pr--haast .pr__tijdbalk i { background: var(--sintrood); }
.pr--haast .pr__hud-tijd strong { color: var(--sintrood); animation: pr-tik 1s ease-in-out infinite; }
@keyframes pr-tik { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } }
.pr__hud-rit {
  align-self: center; padding: 6px 12px; border-radius: 999px; font: 700 13px/1 var(--f-tekst); letter-spacing: .06em; text-transform: uppercase;
  background: var(--papier); color: var(--inkt-zacht); box-shadow: 0 0 0 2px rgba(30, 26, 51, .35);
}
.pr__hud-rit--telt { background: var(--groen-zacht); color: var(--piet-groen-donker); box-shadow: 0 0 0 2px var(--piet-groen-donker); }
.pr__knoppen { display: flex; gap: 8px; pointer-events: auto; }
.pr__knop {
  display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  color: var(--inkt); background: var(--piet-geel); box-shadow: 0 0 0 2px var(--inkt), 0 3px 0 2px var(--inkt);
}
.pr__knop:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--inkt), 0 1px 0 2px var(--inkt); }
.pr__knop svg { width: 24px; height: 24px; }
.pr__knop[data-geluid] .pr__kruis { display: none; }
.pr__knop[data-geluid][aria-pressed="false"] { background: var(--papier-diep); }
.pr__knop[data-geluid][aria-pressed="false"] .pr__kruis { display: inline; }
.pr__knop[data-geluid][aria-pressed="false"] .pr__golf { display: none; }
.pr__knop:focus-visible { box-shadow: var(--focus); }

/* Het paard galoppeert ter plaatse; de wereld schuift eronder door. */
.pr__sint { z-index: 2; pointer-events: none; }
.pr__ruiter { position: absolute; left: -107px; top: 198px; width: 213px; height: 180px; animation: pr-galop .36s ease-in-out infinite alternate; animation-play-state: paused; }
.pr__veld--speelt .pr__ruiter, .pr__veld[data-scherm="aftellen"] .pr__ruiter { animation-play-state: running; }
.pr__ruiter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pr__ruiter .paard__been--av, .pr__ruiter .paard__been--vd, .pr__ruiter .paard__been--vv, .pr__ruiter .paard__been--ad { animation-duration: .36s; }
.pr__lijn { position: absolute; left: -1px; top: 376px; width: 0; height: 370px; border-left: 3px dotted rgba(58, 35, 32, .28); }
.pr__lijn::after { content: ""; position: absolute; left: -9px; bottom: -6px; width: 15px; height: 6px; border-radius: 50%; background: rgba(58, 35, 32, .18); }
.pr__sint--gooit .sint__arm { animation: pr-gooi .28s ease-out 1; }
@keyframes pr-galop { to { transform: translateY(-7px) rotate(-1deg); } }
@keyframes pr-gooi { 0% { transform: rotate(4deg); } 40% { transform: rotate(-38deg); } 100% { transform: rotate(4deg); } }

.pr__pakjes { z-index: 0; }
.pr__pakje { position: absolute; left: -24px; top: -55px; width: 48px; height: 55px; will-change: transform; }
.pr__pakje-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Schoorstenen: Piet vangt, de ster glinstert, rook stijgt op. */
.pr__piet { transform: translateY(30px); transition: transform .35s cubic-bezier(.34, 1.5, .64, 1); }
.pr__blok:not(.pr__blok--raak) .pr__piet { animation: pr-piet-op .6s cubic-bezier(.34, 1.5, .64, 1) .1s forwards; }
.pr__piet--vangt { transform: translateY(-14px); animation: pr-piet-hup .5s ease-out 1; }
.pr__ster { transform-box: fill-box; transform-origin: 50% 50%; animation: pr-twinkel 1.8s ease-in-out infinite; }
.pr__ster--aan { animation: pr-ster-raak .6s ease-out 1; }
.pr__wolkje { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: pr-rook 1.65s ease-out infinite; }
.pr__blok--roet .pr__wolkje { animation-duration: .8s; }
.pr__fx { z-index: 3; pointer-events: none; }
.pr__popup {
  position: absolute; translate: -50% -50%; white-space: nowrap;
  font: 600 34px/1 var(--f-display); font-variation-settings: "SOFT" 100; color: var(--inkt);
  padding: 6px 12px; border-radius: 12px; background: var(--papier); box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--goud);
  animation: pr-popup 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.pr__popup--perfect { background: var(--goud-zacht); box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--sintrood); }
.pr__popup--reeks { background: var(--sintrood); color: #fff; box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--mijterrood); font-size: 38px; }
.pr__popup--rook { background: var(--papier-diep); }
.pr__popup--mis { font-size: 26px; color: var(--inkt-zacht); background: rgba(255, 253, 247, .9); box-shadow: 0 0 0 2px rgba(30, 26, 51, .35); }
.pr__popup--haast { font-size: 40px; background: var(--sintrood); color: #fff; box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--inkt); animation-duration: 1.6s; }
.pr__confetti {
  position: absolute; width: 10px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--inkt);
  animation: pr-confetti .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes pr-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)); opacity: 0; } }
@keyframes pr-popup { 0% { opacity: 0; transform: translateY(12px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.06); } 70% { opacity: 1; transform: translateY(-24px) scale(1); } 100% { opacity: 0; transform: translateY(-40px) scale(.96); } }
@keyframes pr-piet-op { to { transform: translateY(0); } }
@keyframes pr-piet-hup { 0% { transform: translateY(0); } 45% { transform: translateY(-26px); } 100% { transform: translateY(-14px); } }
@keyframes pr-twinkel { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes pr-ster-raak { 0% { transform: scale(1); } 40% { transform: scale(1.7) rotate(40deg); } 100% { transform: scale(1.2) rotate(72deg); } }
@keyframes pr-rook { 0% { opacity: .95; transform: translate(0, 8px) scale(.5); } 100% { opacity: 0; transform: translate(-22px, -46px) scale(1.5); } }

/* ---------- Schermen boven het veld (start, melding, aftellen, pauze, einde) ---------- */
.pr__scherm {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  background: rgba(220, 239, 255, .45); cursor: default;
  animation: pr-scherm .3s cubic-bezier(.22, 1, .36, 1);
}
.pr__scherm--doorzichtig { background: transparent; pointer-events: none; }
.pr__scherm[hidden] { display: none; }
@keyframes pr-scherm { from { opacity: 0; } }
.pr__kaart {
  width: min(600px, 100%); max-height: 100%; overflow: auto; padding: clamp(18px, 3vw, 32px);
  background: var(--papier) var(--ruis); border-radius: 12px; text-align: left;
  box-shadow: 0 0 0 2.5px var(--inkt), 5px 6px 0 2.5px var(--piet-blauw), 0 24px 40px -24px rgba(30, 26, 51, .5);
  animation: pr-kaart .4s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pr-kaart { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.pr__kaart--smal { width: min(460px, 100%); }
.pr__kaart h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.04; }
.pr__kaart p { font-size: 17px; }
.pr__kicker { margin: 0 0 8px !important; font: 700 13px/1.2 var(--f-tekst) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--mijterrood); }
.pr__intro { color: var(--inkt-zacht); }
.pr__start { margin-top: 18px !important; }
.pr__startknop { min-height: 64px; padding-inline: 32px; font-size: 21px; }
.pr__startknop svg { width: 22px; height: 22px; }
.pr__tips { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1.5px dashed rgba(30, 26, 51, .25); }
.pr__tips li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; font-size: 15px; line-height: 1.3; }
.pr__tips svg { width: 40px; height: 40px; }
.pr__punten { margin-top: 12px; font-size: 15px; }
.pr__punten summary { cursor: pointer; font-weight: 700; color: var(--mijterrood); width: fit-content; }
.pr__punten p { font-size: 15px !important; margin-top: 6px !important; color: var(--inkt-zacht); }
.pr__klein { font-size: 15px !important; color: var(--inkt-zacht); margin-top: 14px !important; }
.pr__klein a, .pr__kaart a:not(.knop) { color: var(--mijterrood); font-weight: 700; }
.pr__aftel {
  margin: 0; text-align: center; font: 600 clamp(72px, 13vw, 150px)/1 var(--f-display); font-variation-settings: "SOFT" 100; color: var(--sintrood);
  text-shadow: 3px 3px 0 var(--papier), -3px -3px 0 var(--papier), 3px -3px 0 var(--papier), -3px 3px 0 var(--papier), 6px 7px 0 var(--inkt);
}
.pr__aftel--tik { animation: pr-aftel .7s cubic-bezier(.22, 1, .36, 1); }
@keyframes pr-aftel { 0% { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }
.pr__aftel-tip { margin: 10px auto 0 !important; width: fit-content; padding: 6px 14px; border-radius: 999px; font-weight: 700; background: var(--papier); box-shadow: 0 0 0 2px var(--inkt); }

.pr__kaart--einde { width: min(620px, 100%); box-shadow: 0 0 0 2.5px var(--inkt), 5px 6px 0 2.5px var(--goud), 0 24px 40px -24px rgba(30, 26, 51, .5); }
.pr__eind-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pr__eind-score { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.pr__eind-score strong { font: 600 clamp(60px, 9vw, 96px)/.95 var(--f-display); font-variation-settings: "SOFT" 100; color: var(--sintrood); font-variant-numeric: tabular-nums; }
.pr__eind-score span { font: 700 20px/1 var(--f-tekst); color: var(--inkt-zacht); }
.pr__record {
  flex: none; margin: 6px 0 0 !important; padding: 10px 12px; border-radius: 50%; width: 92px; height: 92px; display: grid; place-items: center; text-align: center;
  font: 700 16px/1.1 var(--f-tekst) !important; color: var(--inkt); background: var(--goud); rotate: 10deg;
  box-shadow: 0 0 0 2.5px var(--inkt), 3px 4px 0 2.5px var(--inkt); animation: pr-record .6s cubic-bezier(.34, 1.5, .64, 1) .3s backwards;
}
@keyframes pr-record { from { transform: scale(0) rotate(-40deg); } }
.pr__cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 0; }
.pr__cijfers div { padding: 8px; border-radius: 8px; background: var(--papier-diep); text-align: center; }
.pr__cijfers dt { font-size: 13px; font-weight: 700; color: var(--inkt-zacht); }
.pr__cijfers dd { margin: 0; font: 700 22px/1.2 var(--f-tekst); font-variant-numeric: tabular-nums; }
.pr__status { padding: 10px 12px; border-radius: 8px; background: var(--groen-zacht); font-weight: 700; font-size: 16px !important; }
.pr__status[data-soort="info"] { background: var(--goud-zacht); }
.pr__status[data-soort="fout"] { background: #FDE2E1; }
.pr__status:empty { display: none; }
.pr__wedstrijd { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--goud-zacht); box-shadow: inset 0 0 0 1.5px var(--goud-donker); }
.pr__wedstrijd[hidden] { display: none; }
.pr__wedstrijd p { margin: 0; font-size: 16px; }
.pr__wedstrijd .pr__acties { margin-top: 12px; }
.pr__acties { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 16px !important; }
.pr__acties--einde { padding-top: 4px; }
.pr__deel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: var(--r-knop); cursor: pointer;
  font: 700 16px/1 var(--f-tekst); color: var(--inkt); background: transparent; box-shadow: inset 0 0 0 2px var(--inkt);
}
.pr__deel:hover { background: var(--papier-diep); }
.pr__deel svg { width: 20px; height: 20px; }

/* ---------- Scorebord ---------- */
.sb { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sb__rij { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 12px; border-bottom: 1px solid rgba(30, 26, 51, .12); }
.sb__plaats { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; background: var(--papier-diep); }
.sb__rij--1 .sb__plaats { background: var(--goud); box-shadow: 0 0 0 2px var(--inkt); }
.sb__rij--2 .sb__plaats { background: var(--hemel); box-shadow: 0 0 0 2px var(--inkt); }
.sb__rij--3 .sb__plaats { background: var(--goud-zacht); box-shadow: 0 0 0 2px var(--inkt); }
.sb__naam { font-weight: 700; overflow-wrap: anywhere; }
.sb__score { font: 600 24px/1 var(--f-display); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .pr__veld { height: clamp(440px, 72svh, 600px); max-height: none; border-radius: 14px; }
  .pr__hud { inset: 8px 8px auto 8px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "score reeks knoppen" "tijd tijd rit"; gap: 6px; }
  .pr__hud-score { grid-area: score; } .pr__hud-reeks { grid-area: reeks; justify-self: start; } .pr__hud-tijd { grid-area: tijd; min-height: 34px; padding: 4px 12px; }
  .pr__hud-rit { grid-area: rit; justify-self: end; font-size: 11px; padding: 5px 8px; }
  .pr__knoppen { grid-area: knoppen; gap: 6px; }
  .pr__hud-score, .pr__hud-reeks { min-height: 46px; padding: 4px 10px; gap: 6px; }
  .pr__hud-label { font-size: 10px; }
  .pr__hud strong { font-size: 24px; }
  .pr__hud-tijd strong { font-size: 18px; }
  .pr__pips { display: none; }
  .pr__knop { width: 46px; height: 46px; }
  .pr__scherm { padding: 10px; }
  .pr__kaart { padding: 18px; }
  .pr__kaart h2 { font-size: 27px; }
  .pr__intro { font-size: 16px !important; }
  .pr__startknop { width: 100%; }
  .pr__tips { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; padding-top: 12px; }
  .pr__tips li { grid-template-columns: 32px 1fr; font-size: 15px; }
  .pr__tips svg { width: 32px; height: 32px; }
  .pr__cijfers { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
  .pr__cijfers div { padding: 6px 2px; }
  .pr__cijfers dt { font-size: 11px; }
  .pr__cijfers dd { font-size: 18px; }
  .pr__eind-score strong { font-size: 56px; }
  .pr__record { width: 64px; height: 64px; padding: 6px; font-size: 13px !important; }
  .pr__wedstrijd { padding: 12px; }
  .pr__wedstrijd p { font-size: 15px; }
  .pr__status { font-size: 15px !important; }
  .pr__acties .knop { flex: 1 1 100%; }
  .pr__deel { flex: 1 1 100%; justify-content: center; }
  .pr-kop .pagina-titel { font-size: 30px; }
  .pr-kop__lead { font-size: 17px; }
  .pr-kop__prijs { grid-template-columns: 52px 1fr; padding: 10px 12px; font-size: 15px; line-height: 1.45; }
  .pr-kop__stempel { width: 52px; height: 52px; font-size: 16px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .pr__tips { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr__ruiter, .pr__ster, .pr__wolkje, .pr__piet, .pr__popup, .pr__hud-reeks--plof strong, .pr__sint--gooit .sint__arm, .pr__scherm, .pr__kaart, .pr__aftel--tik, .pr__record, .pr--haast .pr__hud-tijd strong { animation: none !important; }
  .pr__wolkje { opacity: .8; }
  .pr__piet { transform: none; }
  .pr__popup { animation: pr-popup-rustig 1s linear forwards !important; }
  @keyframes pr-popup-rustig { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------- Spelpagina en homepage-blok ---------- */
.pr-boven { background: var(--hemel); padding-bottom: 56px; }
.pr-kop { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 40px; align-items: end; padding-top: 18px; }
.pr-kop .pagina-titel { font-size: clamp(32px, 4.4vw, 54px); }
.pr-kop__lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--inkt-zacht); max-width: 34em; }
.pr-kop__prijs {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 0 !important;
  padding: 14px 16px; background: var(--papier); border-radius: var(--r-papier); rotate: .8deg;
  box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--goud);
}
.pr-kop__stempel {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; rotate: -8deg;
  font: 700 22px/1 var(--f-tekst); color: var(--sintrood); border: 3px solid var(--sintrood); box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 5px var(--sintrood);
}
.pr-speel { margin-top: 22px; }
.pr-onder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.pr-onder__bord { rotate: -.6deg; }
.pr-onder__bord .hulp { margin-top: 4px !important; }
.pr-stappen { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 14px; }
.pr-stappen li { counter-increment: stap; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.pr-stappen li::before {
  content: counter(stap); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 700 20px/1 var(--f-tekst); color: #fff; background: var(--sintrood); box-shadow: 0 3px 0 var(--mijterrood);
}
.pr-stappen li:nth-child(2)::before { background: var(--piet-blauw-donker); box-shadow: 0 3px 0 #123E78; }
.pr-stappen li:nth-child(3)::before { background: var(--piet-groen-donker); box-shadow: 0 3px 0 #145A29; }
.pr-ouders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin: 36px 0 0; padding: 0; list-style: none; max-width: 960px; }
.pr-ouders li { padding-top: 14px; border-top: 3px dashed var(--goud-donker); }
.pr-ouders strong { display: block; font: 600 21px/1.25 var(--f-display); font-variation-settings: "SOFT" 100; }
.pr-slot { padding-bottom: var(--ritme) !important; }
.scorebord .hulp { font-size: 16px; color: var(--inkt-zacht); }
@media (max-width: 860px) {
  .pr-kop, .pr-onder, .pr-ouders { grid-template-columns: 1fr; }
  .pr-kop__prijs { rotate: 0deg; }
}

/* ---------- Wedstrijdpagina ---------- */
.wd-held { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; padding-top: 24px; }
.wd-held .pagina-titel { font-size: clamp(34px, 5vw, 62px); }
.wd-held .hulp { font-size: 16px; color: var(--inkt-zacht); }
.wd-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wd-podium__trede {
  position: relative; display: grid; align-content: start; justify-items: center; gap: 4px; padding: 18px 8px 14px;
  border-radius: 8px 8px 0 0; background: var(--papier) var(--ruis); box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--piet-blauw);
}
.wd-podium__trede--1 { min-height: 230px; box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--sintrood); }
.wd-podium__trede--2 { min-height: 170px; }
.wd-podium__trede--3 { min-height: 130px; box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--piet-groen); }
.wd-podium__trede::before {
  content: ""; position: absolute; top: -46px; width: 54px; height: 46px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -30 40 46'%3E%3Cpath d='M-16 -18 H16 V14 H-16 Z' fill='%23C8102E' stroke='%233A2320' stroke-width='2.1' stroke-linejoin='round'/%3E%3Cpath d='M-3 -18 H3 V14 H-3 Z M-16 -5 H16 V1 H-16 Z' fill='%23F2B705' stroke='%233A2320' stroke-width='1.5'/%3E%3Cpath d='M0 -18 C-6 -28 -15 -26 -12 -20 C-10 -17 -5 -17 0 -18 Z M0 -18 C6 -28 15 -26 12 -20 C10 -17 5 -17 0 -18 Z' fill='%23F2B705' stroke='%233A2320' stroke-width='1.5'/%3E%3C/svg%3E");
}
.wd-podium__trede--2::before { rotate: -8deg; }
.wd-podium__trede--3::before { rotate: 6deg; width: 46px; }
.wd-podium__bedrag { font: 600 clamp(30px, 4vw, 44px)/1 var(--f-display); font-variation-settings: "SOFT" 100; }
.wd-podium__trede--1 .wd-podium__bedrag { color: var(--sintrood); font-size: clamp(38px, 5vw, 56px); }
.wd-podium__plaats { font-size: 15px; font-weight: 700; color: var(--inkt-zacht); }
.wd-feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 48px auto 0; border-top: 2px solid var(--inkt); }
.wd-feiten div { padding: 14px 18px 0 0; }
.wd-feiten div + div { padding-left: 18px; border-left: 1px solid rgba(30, 26, 51, .2); }
.wd-feiten dt { font-size: 15px; font-weight: 700; color: var(--inkt-zacht); }
.wd-feiten dd { margin: 4px 0 0; font-size: 17px; line-height: 1.45; }
.wd-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 36px; }
@media (max-width: 860px) {
  .wd-held { grid-template-columns: 1fr; }
  .wd-podium { max-width: 420px; margin-top: 40px; }
  .wd-feiten { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .wd-feiten div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---------- Homepage: het spel als tweede sectie, op de hemel ---------- */
.home-spel { background: var(--hemel); padding-block: 64px 72px; margin-top: var(--ritme); }
.home-spel__kop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 40px; align-items: end; margin-bottom: 22px; }
.home-spel__kop p { font-size: 19px; color: var(--inkt-zacht); max-width: 32em; }
.home-spel__kop .pr-kop__prijs { color: var(--inkt); font-size: 17px; }
.home-spel__onder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; margin-top: 36px; align-items: start; }
.home-spel__onder h3 { font-size: 26px; }
.home-spel__bord { padding: 18px 20px; background: var(--papier); border-radius: var(--r-papier); box-shadow: 0 0 0 2px var(--inkt), 3px 4px 0 2px var(--goud); }
.home-spel__links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
@media (max-width: 860px) {
  .home-spel { padding-block: 40px 48px; }
  .home-spel__kop, .home-spel__onder { grid-template-columns: 1fr; }
}
.wd-leider {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 22px !important; padding: 8px 14px 8px 8px;
  border-radius: 999px; background: var(--papier); box-shadow: 0 0 0 2px var(--inkt), 2px 3px 0 2px var(--goud); font-size: 16px;
}
.wd-leider__label { padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 var(--f-tekst); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--sintrood); }
.pr-kop__prijs--afgelopen .pr-kop__stempel { color: var(--inkt-zacht); border-color: var(--inkt-zacht); box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 5px var(--inkt-zacht); }