@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-latin.woff2") format("woff2");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --rood: #e13a32;
  --paars: #7b32a8;
  --paars-donker: #4e176f;
  --das-zoom: #988abd;
  --oranje: #f26c21;
  --oranje-donker: #a74313;
  --geel: #ffd23f;
  --groen: #34ad6f;
  --groen-donker: #197445;
  --blauw: #2f9dbf;
  --blauw-donker: #176279;
  --inkt: #1f1b18;
  --lijn: #2a2420;
  --papier: #fffdf7;
  --wit: #ffffff;
  --tak-wouters: #b9efcf;
  --tak-jogis: #fff4a6;
  --tak-givers: #9edcff;
  --tak-jin: #f7f2ec;
  --potlood-oranje: #c9531d;
  --potlood-groen: #258653;
  --potlood-blauw: #24788e;
  --potlood-rand: url("assets/potlood-rand.svg?v=2");
  --potlood-streep: url("assets/potlood-streep.svg?v=1");
  --potlood-onderlijn: url("assets/potlood-onderlijn.svg?v=2");
  --font: "Nunito Sans", Arial, Helvetica, sans-serif;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--papier);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  max-width: 100%;
  padding-bottom: calc(98px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 5px solid var(--paars-donker);
  outline-offset: 4px;
}

h1[tabindex="-1"]:focus {
  outline: none;
}

img,
svg {
  max-width: 100%;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leden-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 12px 16px;
  background: var(--geel);
  color: var(--inkt);
  font-weight: 900;
  transform: translateY(-170%);
}

.leden-skip:focus {
  transform: translateY(0);
}

.leden-symbolen {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Het groepslogo als dasschuiver, met de stof erachter. */
.leden-das {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 118px;
  overflow: hidden;
}

.leden-das-band {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: clamp(50px, 5vw, 64px);
  overflow: hidden;
  stroke: none;
}

.leden-das-rand {
  fill: none;
  stroke: var(--lijn);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.leden-das-zoom {
  fill: var(--paars);
}

.leden-das-rood {
  fill: var(--rood);
}

.leden-das-knoop {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 50%;
  width: 190px;
  height: auto;
  aspect-ratio: 20 / 11;
  overflow: visible;
  transform: translateX(-50%);
}

.leden-das-punt {
  fill: var(--rood);
  stroke: var(--lijn);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leden-das-logo-achter {
  fill: #fffdf7;
  stroke: var(--oranje);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.leden-das-punt-paars {
  fill: var(--paars);
}

.leden-das-vouw {
  fill: none;
  stroke: var(--lijn);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: .18;
}

.leden-das-logo-knoop {
  pointer-events: none;
}

.leden-kop {
  position: relative;
  z-index: 5;
  width: min(940px, calc(100% - 24px));
  margin: -4px auto 0;
}

.leden-kop-binnen,
.lees-knop,
.leden-volgende,
.leden-view-kop,
.leden-activiteit,
.leden-foto,
.bericht-kaart,
.berichten-toegang,
.bericht-hart,
.tak-kiezer button,
.gekozen-ploeg-kop,
.leider-profiel,
.spel-keuze-knop,
.mini-spel,
.leidinggame-portret,
.leidinggame-takken button,
.leidinggame-keuzes button,
.paar-kaart,
.kleur-optie,
.spel-opnieuw {
  position: relative;
  isolation: isolate;
}

.leden-kop-binnen::after,
.lees-knop::after,
.leden-volgende::after,
.leden-view-kop::after,
.leden-activiteit::after,
.leden-foto::after,
.bericht-kaart::after,
.berichten-toegang::after,
.bericht-hart::after,
.tak-kiezer button::after,
.gekozen-ploeg-kop::after,
.leider-profiel::after,
.spel-keuze-knop::after,
.mini-spel::after,
.leidinggame-portret::after,
.leidinggame-takken button::after,
.leidinggame-keuzes button::after,
.paar-kaart::after,
.kleur-optie::after,
.spel-opnieuw::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--potlood, var(--potlood-oranje));
  -webkit-mask: var(--potlood-rand) center / 100% 100% no-repeat;
  mask: var(--potlood-rand) center / 100% 100% no-repeat;
}

.leden-kop-binnen {
  --potlood: var(--potlood-blauw);
  min-height: 76px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--wit);
  transform: rotate(-.12deg);
}

.leden-merk {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.leden-merk span,
.leden-merk strong,
.leden-merk small {
  display: block;
}

.leden-merk strong {
  font-size: 27px;
  font-weight: 900;
  line-height: .95;
}

.leden-merk small {
  margin-top: 5px;
  color: var(--oranje-donker);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.leden-terug {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--paars-donker);
  font-size: 16px;
  font-weight: 900;
}

.leden-terug svg {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
}

.leden-terug span {
  position: relative;
}

.leden-terug span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: var(--paars-donker);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.leden-inhoud {
  width: min(940px, calc(100% - 28px));
  margin: 0 auto;
  padding: 40px 0 54px;
}

.leden-view,
.volgende-inhoud,
.activiteit-inhoud,
.activiteit-feiten dd {
  min-width: 0;
}

.volgende-inhoud,
.activiteit-inhoud,
.activiteit-feiten dd,
.leden-ondernav span {
  overflow-wrap: break-word;
}

.leden-js .leden-view {
  display: none;
}

.leden-js .leden-view.is-actief {
  display: block;
}

.leden-view[hidden] {
  display: none !important;
}

.leden-geen-js .leden-view + .leden-view {
  margin-top: 72px;
}

h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  font-size: 54px;
  line-height: .96;
}

.leden-welkomrij {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.leden-welkomrij h1 {
  position: relative;
  width: fit-content;
  padding-bottom: 11px;
}

.leden-welkomrij h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 4%;
  bottom: 0;
  height: 9px;
  background: var(--potlood-oranje);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.lees-knop {
  --potlood: #b8860f;
  min-width: 164px;
  min-height: 58px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: var(--geel);
  color: var(--inkt);
  font-weight: 900;
  cursor: pointer;
  transform: rotate(.18deg);
}

.leden-view > .lees-knop {
  margin-top: 22px;
}

.lees-knop svg {
  width: 31px;
  height: 31px;
}

.lees-knop[aria-pressed="true"] {
  background: var(--paars);
  color: var(--wit);
}

.lees-knop:disabled {
  --potlood: #736b65;
  background: #eceae7;
  color: #5f5853;
  cursor: not-allowed;
}

.lees-status {
  margin-top: 10px;
  color: #674f43;
  font-size: 16px;
  font-weight: 800;
}

.lees-status:empty {
  display: none;
}

[data-lees].wordt-gelezen {
  outline: 4px solid var(--oranje);
  outline-offset: 4px;
  background: #fff4b8;
}

.leden-taken {
  margin-top: 31px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.leden-volgende {
  --potlood: var(--potlood-oranje);
  grid-column: 1 / -1;
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  background: var(--wit);
  transform: rotate(-.12deg);
}

.volgende-foto {
  min-width: 0;
  min-height: 350px;
  overflow: hidden;
}

.volgende-foto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.volgende-inhoud {
  padding: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.taak-label,
.ploeg-label {
  color: var(--oranje-donker);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.volgende-inhoud > strong {
  font-size: 39px;
  line-height: 1;
}

.volgende-regel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 800;
}

.volgende-regel svg {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  color: var(--oranje-donker);
}

.leden-afteller {
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
  padding: 9px 12px 9px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff2dd;
  color: var(--oranje-donker);
  font-size: 18px;
  font-weight: 900;
  transform: rotate(.1deg);
}

.leden-afteller svg {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
}

.taak-link {
  position: relative;
  margin-top: auto;
  padding-bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paars-donker);
  font-size: 18px;
  font-weight: 900;
}

.taak-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 35px;
  bottom: 0;
  height: 6px;
  background: var(--potlood-blauw);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.taak-link svg {
  width: 28px;
  height: 28px;
}

.leden-volgende:active,
.leden-ondernav a:active,
.lees-knop:active,
.tak-kiezer button:active {
  scale: .985;
}

.leden-view-kop {
  --potlood: var(--potlood-oranje);
  min-height: 132px;
  padding: 24px 29px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--oranje);
  transform: rotate(-.15deg);
}

.leden-view-kop.fotos-kop {
  --potlood: var(--potlood-blauw);
  background: var(--tak-givers);
  transform: rotate(.12deg);
}

.leden-view-kop.berichten-kop {
  --potlood: var(--potlood-oranje);
  background: var(--geel);
  transform: rotate(-.1deg);
}

.leden-view-kop.leiding-kop {
  --potlood: var(--paars-donker);
  background: var(--paars);
  color: var(--wit);
  transform: rotate(-.12deg);
}

.leden-view-kop.spelen-kop {
  --potlood: var(--potlood-oranje);
  background: var(--oranje);
  transform: rotate(.1deg);
}

.spelen-kop h1 {
  font-size: 50px;
  white-space: nowrap;
}

.view-icoon {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  color: var(--inkt);
}

.view-icoon svg {
  width: 76px;
  height: 76px;
}

.leiding-kop .view-icoon {
  color: var(--wit);
}

.leden-view-kop h1 {
  min-width: 0;
}

.leden-activiteit {
  --potlood: var(--potlood-oranje);
  margin-top: 29px;
  background: var(--wit);
  transform: rotate(.08deg);
}

.activiteit-foto {
  width: 100%;
  height: 310px;
  display: block;
  object-fit: cover;
  object-position: center 45%;
}

.activiteit-inhoud {
  padding: 29px;
}

.activiteit-inhoud h2 {
  color: var(--oranje-donker);
  font-size: 41px;
  line-height: 1;
}

.berichten-lijst {
  margin-top: 31px;
  display: grid;
  gap: 31px;
}

.berichten-laden {
  padding: 20px 0;
  font-weight: 850;
}

.bericht-kaart {
  --potlood: var(--potlood-oranje);
  min-width: 0;
  background: var(--wit);
}

.bericht-kaart.tak-wouters { --potlood: var(--potlood-groen); }
.bericht-kaart.tak-jogis { --potlood: #b8860f; }
.bericht-kaart.tak-givers { --potlood: var(--potlood-blauw); }
.bericht-kaart.tak-jin { --potlood: #8c7d70; }

.bericht-foto {
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

.bericht-binnen {
  padding: 24px 26px 21px;
}

.bericht-meta {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: #644f43;
  font-size: 15px;
  font-weight: 900;
}

.bericht-tak,
.bericht-vast {
  padding: 5px 9px;
  display: inline-block;
  background: #fff0d9;
  color: var(--oranje-donker);
  line-height: 1;
  text-transform: uppercase;
}

.tak-wouters .bericht-tak { background: var(--tak-wouters); color: var(--groen-donker); }
.tak-jogis .bericht-tak { background: var(--tak-jogis); color: #765900; }
.tak-givers .bericht-tak { background: var(--tak-givers); color: var(--blauw-donker); }
.tak-jin .bericht-tak { background: var(--tak-jin); color: #5d5148; }

.bericht-vast {
  background: var(--paars);
  color: var(--wit);
}

.bericht-kaart h2 {
  margin: 0;
  font-size: 35px;
  line-height: 1.02;
  overflow-wrap: break-word;
}

.bericht-tekst {
  margin-top: 11px;
  white-space: pre-line;
}

.bericht-acties {
  position: relative;
  margin-top: 22px;
  padding-top: 17px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.bericht-acties::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--potlood);
  -webkit-mask: var(--potlood-streep) center / 100% 100% no-repeat;
  mask: var(--potlood-streep) center / 100% 100% no-repeat;
}

.bericht-hart {
  --potlood: var(--potlood-oranje);
  min-height: 48px;
  padding: 9px 13px;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wit);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.bericht-hart svg {
  width: 27px;
  height: 27px;
}

.bericht-hart[aria-pressed="true"] {
  --potlood: var(--rood);
  background: #ffe2df;
  color: #a5231c;
}

.bericht-hart[aria-pressed="true"] svg {
  fill: currentColor;
}

.bericht-album {
  position: relative;
  padding: 7px 0 8px;
  color: var(--paars-donker);
  font-size: 17px;
  font-weight: 900;
}

.bericht-album::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 6px;
  background: var(--potlood-blauw);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.berichten-toegang {
  --potlood: var(--potlood-oranje);
  padding: 25px;
  background: #fff0dc;
}

.berichten-toegang h2 {
  margin-bottom: 8px;
  font-size: 31px;
}

.berichten-toegang a {
  position: relative;
  margin-top: 18px;
  padding: 11px 15px;
  display: inline-block;
  background: var(--oranje);
  font-weight: 900;
}

.activiteit-feiten {
  margin-top: 23px;
  display: grid;
}

.activiteit-feiten > div {
  min-width: 0;
  padding: 16px 0;
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 18px;
  border-bottom: 0;
  position: relative;
}

.activiteit-feiten > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--potlood-blauw);
  -webkit-mask: var(--potlood-streep) center / 100% 100% no-repeat;
  mask: var(--potlood-streep) center / 100% 100% no-repeat;
  opacity: .55;
}

.activiteit-feiten dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.activiteit-feiten dt svg {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--oranje-donker);
}

.activiteit-feiten dd {
  align-self: center;
  font-size: 22px;
  font-weight: 800;
}

.leden-fotorooster {
  margin-top: 31px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.leden-foto {
  --potlood: var(--potlood-blauw);
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: var(--wit);
}

.leden-foto:nth-child(1) {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
  transform: rotate(-.35deg);
}

.leden-foto:nth-child(2) { transform: rotate(.45deg); }
.leden-foto:nth-child(3) { transform: rotate(.25deg); }
.leden-foto:nth-child(4) { transform: rotate(-.4deg); }
.leden-foto:nth-child(5) { transform: rotate(.35deg); }
.leden-foto:nth-child(6) { transform: rotate(-.2deg); }

.leden-foto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.spel-keuze {
  margin-top: 29px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.spel-keuze-knop {
  --spel-vlak: #fff2dd;
  --spel-inkt: var(--oranje-donker);
  --potlood: var(--potlood-oranje);
  min-width: 0;
  min-height: 170px;
  padding: 13px 13px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: var(--wit);
  color: var(--inkt);
  cursor: pointer;
}

.spel-keuze-knop.leidinggame {
  --spel-vlak: var(--tak-wouters);
  --spel-inkt: var(--groen-donker);
  transform: rotate(-.25deg);
}

.spel-keuze-knop.das {
  --spel-vlak: #ffd7c3;
  --spel-inkt: var(--rood-donker, #9d2f28);
  transform: rotate(.18deg);
}

.spel-keuze-knop.spring {
  --spel-vlak: #e5d0f3;
  --spel-inkt: var(--paars-donker);
  transform: rotate(.2deg);
}

.spel-keuze-knop[aria-pressed="true"] {
  translate: 0 -5px;
  background: var(--spel-vlak);
}

.spel-keuze-knop[aria-pressed="true"] strong {
  position: relative;
  padding-bottom: 8px;
}

.spel-keuze-knop[aria-pressed="true"] strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--spel-inkt);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.spel-keuze-knop > strong {
  font-size: 23px;
  line-height: 1;
  text-align: center;
}

.spel-keuze-beeld {
  width: 100%;
  height: 98px;
  display: grid;
  place-items: center;
  background: var(--spel-vlak);
}

.spel-keuze-beeld img {
  width: 78px;
  height: 101px;
  display: block;
  object-fit: contain;
}

.leidinggame-beeld svg,
.das-beeld svg {
  width: 90px;
  height: 82px;
  stroke-width: 3.8;
}

.leidinggame-beeld svg {
  color: var(--groen-donker);
}

.das-beeld svg {
  color: var(--rood-donker);
}

.spring-beeld svg {
  width: 96px;
  height: 76px;
  color: var(--paars-donker);
  stroke-width: 4.2;
}

.spel-podium {
  margin-top: 29px;
}

.mini-spel {
  --potlood: var(--potlood-oranje);
  padding: 29px;
  background: var(--wit);
  scroll-margin-top: 16px;
  transform: rotate(-.05deg);
}

.mini-spel[hidden] {
  display: none !important;
}

.leidinggame-spel {
  --potlood: var(--potlood-oranje);
}

.das-spel {
  --potlood: var(--potlood-oranje);
}

.spring-spel {
  --potlood: var(--potlood-oranje);
}

.mini-spel-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.mini-spel h2 {
  font-size: 38px;
  line-height: 1;
}

.mini-spel-kop p {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
}

.spel-voortgang {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 9px 12px;
  background: #fff2dd;
  color: var(--oranje-donker);
  font-size: 17px;
  text-align: center;
  transform: rotate(.5deg);
}

.spring-beste,
.das-beste {
  background: #fff2dd;
  color: var(--oranje-donker);
}

.leidinggame-takken {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.leidinggame-takken button,
.leidinggame-keuzes button {
  border: 0;
  border-radius: 0;
  color: var(--inkt);
  cursor: pointer;
  font-weight: 900;
}

.leidinggame-takken button {
  --potlood: var(--potlood-blauw);
  min-height: 54px;
  padding: 10px 7px;
  background: var(--wit);
  font-size: 17px;
}

.leidinggame-takken button[aria-pressed="true"] {
  --potlood: var(--potlood-groen);
  background: var(--tak-wouters);
  translate: 0 -3px;
}

.leidinggame-podium {
  width: min(810px, 100%);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
  align-items: center;
  gap: 30px;
}

.leidinggame-portret {
  --potlood: var(--potlood-groen);
  min-width: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: stretch;
  background: #daf2e4;
  overflow: hidden;
}

.leidinggame-foto,
.leidinggame-foto img {
  width: 100%;
  height: 100%;
  display: block;
}

.leidinggame-foto img {
  object-fit: cover;
}

.leidinggame-podium.is-wachten {
  grid-template-columns: 1fr;
}

.leidinggame-podium.is-wachten .leidinggame-portret {
  width: min(540px, 100%);
  margin-inline: auto;
}

.leidinggame-wacht {
  padding: 28px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
}

.leidinggame-wacht strong {
  color: var(--groen-donker);
  font-size: clamp(27px, 5vw, 42px);
  line-height: 1;
}

.leidinggame-wacht span {
  font-size: 18px;
  font-weight: 800;
}

.leidinggame-keuzes {
  display: grid;
  gap: 16px;
}

.leidinggame-keuzes button {
  --potlood: var(--potlood-blauw);
  min-height: 76px;
  padding: 15px 18px;
  background: var(--tak-givers);
  font-size: 25px;
}

.leidinggame-keuzes button:nth-child(2) {
  --potlood: #b8860f;
  background: var(--tak-jogis);
  transform: rotate(.2deg);
}

.leidinggame-keuzes button:nth-child(3) {
  --potlood: var(--potlood-oranje);
  background: #ffd7c3;
  transform: rotate(-.15deg);
}

.leidinggame-keuzes button.is-goed {
  --potlood: var(--potlood-groen);
  background: var(--groen);
  outline: 5px solid var(--groen-donker);
  outline-offset: 3px;
}

.leidinggame-keuzes button.is-fout {
  animation: spel-wiegel .18s ease-in-out 2 alternate;
}

.station-kast {
  width: min(850px, 100%);
  margin: 26px auto 0;
  padding: 16px 18px 22px;
  border: 8px solid #2b222f;
  background: var(--oranje);
  color: var(--wit);
}

.station-kast-titel {
  margin: -1px -1px 12px;
  padding: 10px 8px 9px;
  border: 5px solid #2b222f;
  background: var(--paars);
  color: var(--wit);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.station-kast-scherm {
  position: relative;
  overflow: hidden;
  border: 9px solid #2b222f;
}

.das-scherm {
  background: #8fd8ef;
  touch-action: none;
}

.leidinggame-scherm {
  padding: 20px;
  overflow: visible;
  background: #f7fbf8;
  color: var(--inkt);
}

.leidinggame-kast .leidinggame-podium {
  margin-top: 20px;
}

.station-kast-voet {
  min-height: 68px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
}

.station-joystick {
  position: relative;
  width: 58px;
  height: 54px;
  display: block;
  border-bottom: 10px solid #2b222f;
}

.station-joystick::before {
  content: "";
  position: absolute;
  left: 26px;
  bottom: 8px;
  width: 8px;
  height: 35px;
  background: #2b222f;
}

.station-joystick i {
  position: absolute;
  left: 15px;
  top: 0;
  width: 30px;
  height: 30px;
  display: block;
  border: 5px solid #2b222f;
  border-radius: 50%;
  background: var(--rood);
}

.station-arcadeknop {
  width: 38px;
  height: 22px;
  display: block;
  border: 5px solid #2b222f;
  border-radius: 50%;
}

.station-arcadeknop.rood { background: var(--rood); }
.station-arcadeknop.geel { background: var(--geel); }

#das-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  cursor: crosshair;
}

.das-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgb(31 27 24 / 42%);
  text-align: center;
}

.das-overlay[hidden] {
  display: none !important;
}

.das-overlay > strong {
  color: var(--geel);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.04;
  text-shadow: 4px 4px 0 var(--paars-donker);
}

.das-overlay button {
  min-width: 150px;
  padding: 13px 21px;
  border: 4px solid var(--wit);
  border-radius: 0;
  background: var(--geel);
  color: var(--inkt);
  cursor: pointer;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 19px;
  font-weight: 900;
}

.das-geluid {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--wit);
  border-radius: 0;
  background: rgb(31 27 24 / 70%);
  color: var(--wit);
  cursor: pointer;
}

.das-geluid svg {
  grid-area: 1 / 1;
  width: 25px;
  height: 25px;
  stroke-width: 4;
}

.das-geluid[aria-pressed="true"] .das-geluid-aan,
.das-geluid[aria-pressed="false"] .das-geluid-uit {
  display: none;
}

.das-spelbalk {
  min-height: 62px;
  padding: 13px 16px 0;
  justify-content: space-between;
  gap: 16px;
  color: var(--wit);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 18px;
  font-weight: 900;
}

.das-spelbalk strong {
  color: var(--geel);
  font-size: 25px;
}

.spring-zone {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 218px;
  align-items: start;
  gap: 22px;
}

.spring-kast {
  width: 100%;
  margin: 0;
  min-width: 0;
}

.spring-kast-titel {
  font-size: 23px;
}

.spring-scherm {
  background: #0b0620;
  touch-action: none;
}

.das-scherm::after,
.spring-scherm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 14%) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 38%) 100%);
}

#spring-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  image-rendering: pixelated;
}

.spring-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 18px;
  background: rgb(11 6 32 / 58%);
  text-align: center;
}

.spring-overlay[hidden] {
  display: none !important;
}

.spring-overlay > strong {
  color: var(--geel);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(20px, 4.2vw, 38px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
  text-shadow: 3px 3px 0 var(--rood);
}

.spring-overlay button,
.spring-scoreformulier button {
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-weight: 900;
}

.spring-overlay button {
  min-width: 142px;
  padding: 13px 20px;
  border: 4px solid var(--wit);
  background: var(--geel);
  color: var(--inkt);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 19px;
}

.spring-geluid {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--wit);
  border-radius: 0;
  background: rgb(11 6 32 / 72%);
  color: var(--wit);
  cursor: pointer;
}

.spring-geluid svg {
  grid-area: 1 / 1;
  width: 25px;
  height: 25px;
  stroke-width: 4;
}

.spring-geluid[aria-pressed="true"] .spring-geluid-aan,
.spring-geluid[aria-pressed="false"] .spring-geluid-uit {
  display: none;
}

.spring-bediening {
  min-height: 68px;
}

.spring-scorebord,
.spring-scoreformulier {
  position: relative;
  isolation: isolate;
}

.spring-scorebord::after,
.spring-scoreformulier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--potlood);
  -webkit-mask: var(--potlood-rand) center / 100% 100% no-repeat;
  mask: var(--potlood-rand) center / 100% 100% no-repeat;
}

.spring-scorebord {
  --potlood: #b8860f;
  min-height: 360px;
  padding: 20px 18px;
  background: var(--tak-jogis);
}

.spring-scorebord h3 {
  font-size: 30px;
  line-height: 1;
}

.spring-scorebord ol {
  margin-top: 18px;
  list-style: none;
  counter-reset: plaats;
}

.spring-scorebord li {
  counter-increment: plaats;
  min-width: 0;
  padding: 7px 0;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  gap: 7px;
  border-bottom: 2px solid rgb(31 27 24 / 17%);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 17px;
  font-weight: 900;
}

.spring-scorebord li::before {
  content: counter(plaats) ".";
}

.spring-scorebord li strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.spring-scorebord li span:last-child {
  text-align: right;
}

.spring-scorebord .spring-score-leeg {
  display: block;
  font-family: var(--font);
  font-size: 17px;
}

.spring-scorebord .spring-score-leeg::before {
  content: none;
}

.spring-score-status {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 800;
}

.spring-scoreformulier {
  --potlood: var(--potlood-oranje);
  margin-top: 24px;
  padding: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  background: #fff2dd;
}

.spring-scoreformulier[hidden] {
  display: none !important;
}

.spring-scoreformulier > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spring-scoreformulier > div:first-child span,
.spring-scoreformulier legend {
  font-size: 15px;
  font-weight: 900;
}

.spring-scoreformulier > div:first-child strong {
  color: var(--oranje-donker);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 46px;
  line-height: 1;
}

.spring-scoreformulier form {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.spring-score-uitleg {
  flex: 1 1 190px;
  max-width: 22rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

.spring-score-uitleg a {
  color: inherit;
  font-weight: 900;
}

.spring-scoreformulier fieldset {
  min-width: 0;
  border: 0;
}

.spring-lettervakjes {
  margin-top: 5px;
  display: flex;
  gap: 7px;
}

.spring-lettervakjes input {
  width: 48px;
  height: 54px;
  border: 4px solid var(--lijn);
  border-radius: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.spring-scoreformulier button {
  min-height: 54px;
  padding: 10px 15px;
  background: var(--oranje);
  color: var(--wit);
}

.spring-scoreformulier .spring-nogmaals {
  background: var(--paars);
}

.spring-scoreformulier button:disabled {
  cursor: default;
  opacity: .55;
}

.paar-rooster {
  width: min(620px, 100%);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.paar-kaart {
  --potlood: var(--potlood-oranje);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--oranje);
  color: var(--wit);
  cursor: pointer;
}

.paar-kaart:nth-child(even) { transform: rotate(.5deg); }
.paar-kaart:nth-child(3n) { transform: rotate(-.4deg); }

.kaart-dicht {
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}

.kaart-open {
  display: none;
}

.kaart-open svg {
  width: 76px;
  height: 76px;
}

.paar-kaart.is-open,
.paar-kaart.is-gevonden {
  color: var(--inkt);
}

.paar-kaart[data-paar="tent"].is-open,
.paar-kaart[data-paar="tent"].is-gevonden { --potlood: #b8860f; background: var(--tak-jogis); }
.paar-kaart[data-paar="boom"].is-open,
.paar-kaart[data-paar="boom"].is-gevonden { --potlood: var(--potlood-groen); background: var(--tak-wouters); }
.paar-kaart[data-paar="vuur"].is-open,
.paar-kaart[data-paar="vuur"].is-gevonden { background: #ffd7c3; }

.paar-kaart.is-open .kaart-dicht,
.paar-kaart.is-gevonden .kaart-dicht {
  display: none;
}

.paar-kaart.is-open .kaart-open,
.paar-kaart.is-gevonden .kaart-open {
  display: block;
}

.paar-kaart.is-gevonden {
  opacity: .72;
}

.kleur-rooster {
  margin-top: 29px;
  display: grid;
  gap: 18px;
}

.kleur-rooster {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kleur-optie,
.spel-opnieuw {
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.kleur-optie {
  min-height: 120px;
  padding: 16px 8px;
  color: var(--wit);
  font-size: 22px;
  font-weight: 900;
}

.kleur-optie.rood { --potlood: #a92c27; background: var(--rood); transform: rotate(-.35deg); }
.kleur-optie.paars { --potlood: var(--paars-donker); background: var(--paars); transform: rotate(.35deg); }
.kleur-optie.groen { --potlood: var(--potlood-groen); background: var(--groen); color: var(--inkt); transform: rotate(.2deg); }
.kleur-optie.blauw { --potlood: var(--potlood-blauw); background: var(--blauw); color: var(--inkt); transform: rotate(-.25deg); }

.kleur-optie.is-goed {
  outline: 6px solid var(--groen-donker);
  outline-offset: 3px;
}

.kleur-optie.is-fout {
  animation: spel-wiegel .18s ease-in-out 2 alternate;
}

.spel-melding {
  min-height: 32px;
  margin-top: 24px;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
}

.spel-opdracht strong {
  position: relative;
  display: inline-block;
  padding: 0 2px 5px;
}

.spel-opdracht strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--potlood-blauw);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.spel-opnieuw {
  --potlood: var(--potlood-groen);
  min-height: 55px;
  margin: 16px auto 0;
  padding: 11px 22px;
  display: block;
  background: var(--groen);
  font-weight: 900;
}

.spel-opnieuw[hidden] {
  display: none;
}

.spel-keuze-knop:active,
.paar-kaart:active,
.kleur-optie:active,
.spel-opnieuw:active {
  scale: .985;
}

@keyframes spel-wiegel {
  from { translate: -5px 0; }
  to { translate: 5px 0; }
}

.tak-kies-titel {
  position: relative;
  width: fit-content;
  margin: 36px 0 22px;
  padding-bottom: 9px;
  font-size: 31px;
}

.tak-kies-titel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: var(--potlood-oranje);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.tak-kiezer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}

.tak-kiezer button {
  min-width: 0;
  min-height: 158px;
  padding: 15px 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: var(--tak-kleur);
  color: var(--inkt);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.tak-kiezer button.wouters { --tak-kleur: var(--tak-wouters); --potlood: #55a874; transform: rotate(-.3deg); }
.tak-kiezer button.jogis { --tak-kleur: var(--tak-jogis); --potlood: #d9b52d; transform: rotate(.25deg); }
.tak-kiezer button.givers { --tak-kleur: var(--tak-givers); --potlood: #3b8fc0; transform: rotate(-.2deg); }
.tak-kiezer button.jin { --tak-kleur: var(--tak-jin); --potlood: #9a8d80; transform: rotate(.3deg); }

.tak-kiezer button[aria-pressed="true"] {
  translate: 0 -5px;
}

.tak-kiezer button span {
  position: relative;
  display: inline-block;
}

.tak-kiezer button[aria-pressed="true"] span::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -5px;
  height: 6px;
  background: var(--lijn);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.tak-kiezer img {
  width: 86px;
  height: 102px;
  display: block;
  object-fit: contain;
}

.gekozen-ploeg {
  --potlood: #55a874;
  margin-top: 30px;
  padding: 0;
  background: transparent;
}

.gekozen-ploeg.wouters { --potlood: #55a874; --tak-kleur: var(--tak-wouters); }
.gekozen-ploeg.jogis { --potlood: #d9b52d; --tak-kleur: var(--tak-jogis); }
.gekozen-ploeg.givers { --potlood: #3b8fc0; --tak-kleur: var(--tak-givers); }
.gekozen-ploeg.jin { --potlood: #9a8d80; --tak-kleur: var(--tak-jin); }

.gekozen-ploeg-kop {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 23px;
  padding: 0 4px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  background: transparent;
  transform: none;
}

.gekozen-ploeg-kop::after {
  inset: auto 0 0;
  width: 100%;
  height: 7px;
  background: var(--potlood);
  -webkit-mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
  mask: var(--potlood-onderlijn) center / 100% 100% no-repeat;
}

.gekozen-ploeg h2 {
  margin: 0;
  font-size: 41px;
  line-height: 1;
  white-space: nowrap;
}

.leden-namen {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}

.leden-namen li {
  min-width: 0;
}

.leider-geheim {
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 18px;
  background: var(--wit);
}

.leider-geheim img {
  display: block;
  width: 144px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.leden-namen li:nth-child(2n) .leider-geheim img {
  transform: scaleX(-1);
}

.leden-namen li:nth-child(3n) .leider-geheim img {
  transform: scaleY(-1);
}

.leider-profiel {
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--wit);
  color: var(--inkt);
  cursor: pointer;
}

.leider-profiel.heeft-geen-foto {
  min-height: 86px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 13px;
  text-align: left;
}

.leider-profiel.heeft-foto {
  padding: 0 0 14px;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.leider-portret {
  width: 100%;
  padding: 15px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  overflow: hidden;
  background: var(--tak-kleur);
  color: var(--potlood);
}

.heeft-geen-foto .leider-portret {
  width: 58px;
  height: 58px;
  aspect-ratio: 1;
  padding: 6px;
}

.heeft-foto .leider-portret {
  aspect-ratio: 4 / 5;
}

.leider-portret img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.leider-foto-volgt {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--inkt);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.leider-profiel > strong {
  font-size: 23px;
  line-height: 1;
  overflow-wrap: break-word;
}

.heeft-foto > strong {
  max-width: calc(100% - 14px);
}

.leider-luister {
  display: inline-flex;
  align-items: center;
  color: var(--paars-donker);
}

.leider-luister svg {
  width: 30px;
  height: 30px;
}

.leider-profiel.naam-wordt-gezegd {
  background: var(--geel);
  outline: 5px solid var(--oranje);
  outline-offset: 3px;
}

.leden-ondernav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 5px 0 env(safe-area-inset-bottom);
  background: var(--wit);
}

.leden-ondernav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: var(--potlood-oranje);
  -webkit-mask: var(--potlood-streep) center / 100% 100% no-repeat;
  mask: var(--potlood-streep) center / 100% 100% no-repeat;
}

.leden-ondernav a {
  min-width: 0;
  min-height: 82px;
  padding: 8px 3px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  color: var(--inkt);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.leden-ondernav a[aria-current="page"] {
  background: var(--geel);
}

.leden-ondernav svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

@media (max-width: 700px) {
  body {
    font-size: 19px;
  }

  .leden-das {
    height: 92px;
  }

  .leden-das-band { height: 50px; }

  .leden-das-knoop {
    top: 1px;
    width: 154px;
  }

  .leden-kop {
    width: calc(100% - 18px);
    margin-top: 0;
  }

  .leden-kop-binnen {
    min-height: 68px;
    padding: 9px 11px;
    gap: 9px;
  }

  .leden-merk {
    gap: 0;
  }

  .leden-merk strong {
    font-size: 23px;
  }

  .leden-merk small {
    font-size: 11px;
  }

  .leden-terug {
    gap: 4px;
    font-size: 14px;
  }

  .leden-terug svg {
    width: 24px;
    height: 24px;
  }

  .leden-inhoud {
    width: calc(100% - 20px);
    padding-top: 31px;
  }

  h1 {
    font-size: 44px;
  }

  .leden-welkomrij {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .lees-knop {
    width: 100%;
  }

  .leden-taken {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  .leden-volgende {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .volgende-foto {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .volgende-inhoud {
    padding: 22px;
  }

  .volgende-inhoud > strong {
    font-size: 33px;
  }

  .leden-view-kop {
    min-height: 116px;
    padding: 20px 22px;
    gap: 15px;
  }

  .view-icoon {
    width: 68px;
    height: 68px;
  }

  .view-icoon svg {
    width: 64px;
    height: 64px;
  }

  .spelen-kop h1 {
    font-size: 38px;
  }

  .activiteit-foto {
    height: 225px;
  }

  .activiteit-inhoud {
    padding: 22px 18px;
  }

  .activiteit-inhoud h2 {
    font-size: 34px;
  }

  .activiteit-feiten > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .activiteit-feiten dd {
    padding-left: 46px;
    font-size: 21px;
  }

  .leden-fotorooster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }

  .spel-keuze {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }

  .spel-keuze-knop {
    min-height: 142px;
    padding: 11px 6px 12px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    text-align: center;
  }

  .spel-keuze-beeld {
    flex: 0 0 77px;
    width: 100%;
    height: 77px;
  }

  .spel-keuze-knop > strong {
    font-size: 17px;
    text-align: center;
  }

  .spel-keuze-beeld img {
    width: 56px;
    height: 76px;
  }

  .leidinggame-beeld svg,
  .das-beeld svg {
    width: 66px;
    height: 62px;
  }

  .spring-beeld svg {
    width: 78px;
    height: 62px;
  }

  .mini-spel {
    padding: 23px 18px;
  }

  .mini-spel-kop {
    align-items: flex-start;
  }

  .mini-spel h2 {
    font-size: 31px;
  }

  .leidinggame-takken {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .leidinggame-podium {
    grid-template-columns: minmax(120px, .82fr) minmax(150px, 1.18fr);
    gap: 14px;
  }

  .leidinggame-portret {
    width: 100%;
    margin-inline: auto;
  }

  .leidinggame-keuzes {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .leidinggame-keuzes button {
    min-height: 68px;
    padding-inline: 8px;
    font-size: 19px;
  }

  .station-kast {
    padding: 11px 12px 14px;
    border-width: 7px;
  }

  .station-kast-scherm {
    border-width: 7px;
  }

  .station-kast-titel {
    font-size: 19px;
  }

  .spring-zone {
    grid-template-columns: 1fr;
  }

  .spring-scorebord {
    min-height: 0;
  }

  .spring-scoreformulier {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 17px;
  }

  .spring-scoreformulier form {
    flex-wrap: wrap;
  }

  .spring-scoreformulier form > button {
    flex: 1 1 170px;
  }

  .spring-scoreformulier .spring-nogmaals {
    width: 100%;
  }

  .leden-foto:nth-child(1) {
    grid-column: 1 / -1;
  }

  .tak-kiezer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tak-kiezer button {
    min-height: 140px;
  }

  .tak-kiezer img {
    width: 76px;
    height: 91px;
  }

  .gekozen-ploeg {
    padding: 0;
  }

  .leden-namen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .leden-namen {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .leden-merk strong {
    font-size: 21px;
  }

  .leden-terug span {
    max-width: 62px;
  }

  .volgende-inhoud {
    padding: 19px 17px;
  }

  .leden-view-kop {
    padding-inline: 17px;
  }

  .leden-view-kop h1 {
    font-size: 39px;
  }

  .spelen-kop {
    gap: 11px;
  }

  .spelen-kop .view-icoon {
    width: 53px;
    height: 53px;
  }

  .spelen-kop .view-icoon svg {
    width: 51px;
    height: 51px;
  }

  .spelen-kop h1 {
    font-size: 31px;
  }

  .leden-fotorooster {
    grid-template-columns: 1fr;
  }

  .leden-foto,
  .leden-foto:nth-child(1) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }

  .leden-ondernav a {
    font-size: 12px;
  }

  .leden-ondernav svg {
    width: 30px;
    height: 30px;
  }

  .mini-spel-kop {
    flex-direction: column;
    gap: 12px;
  }

  .leidinggame-keuzes {
    grid-template-columns: 1fr;
  }

  .leidinggame-keuzes button {
    min-height: 60px;
  }

  .station-kast {
    margin-inline: -8px;
    padding: 8px 8px 12px;
    border-width: 6px;
  }

  .station-kast-titel {
    margin-bottom: 7px;
    border-width: 4px;
    font-size: 16px;
  }

  .station-kast-scherm {
    border-width: 5px;
  }

  .leidinggame-scherm {
    padding: 12px;
  }

  .leidinggame-podium {
    grid-template-columns: 1fr;
  }

  .das-spelbalk {
    min-height: 51px;
    padding: 9px 6px 0;
    font-size: 14px;
  }

  .das-spelbalk strong {
    font-size: 19px;
  }

  .spring-bediening {
    min-height: 58px;
    gap: 19px;
  }

  .station-joystick {
    transform: scale(.8);
    transform-origin: bottom center;
  }

  .station-arcadeknop {
    width: 33px;
  }

  .spring-scoreformulier form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .spring-lettervakjes input {
    width: 46px;
  }

}

@media (min-width: 960px) {
  .leden-ondernav {
    left: 50%;
    right: auto;
    width: 940px;
    transform: translateX(-50%);
  }
}

/* Tijdelijke fotovakken, in dezelfde rechte beeldtaal als de ledenomgeving. */
.leden-view .foto-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 16px;
  background: #dcebed;
  color: var(--inkt);
  text-align: center;
}

.leden-view .foto-placeholder svg {
  width: clamp(44px, 7vw, 72px);
  height: clamp(44px, 7vw, 72px);
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leden-view .foto-placeholder strong {
  font-size: clamp(18px, 2.4vw, 27px);
  line-height: 1;
}

.volgende-foto .foto-placeholder,
.leden-foto:nth-child(1) .foto-placeholder,
.leden-foto:nth-child(5) .foto-placeholder {
  background: #b8ebcf;
  color: #155f3b;
}

.activiteit-foto.foto-placeholder,
.leden-foto:nth-child(2) .foto-placeholder,
.leden-foto:nth-child(6) .foto-placeholder {
  background: #fff0a8;
  color: #6c4a00;
}

.leden-foto:nth-child(3) .foto-placeholder {
  background: #b8e0f4;
  color: #174f6a;
}

.leden-foto:nth-child(4) .foto-placeholder {
  background: #f3c4c1;
  color: #761f1b;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* SJIMSTATION heeft een eigen, rustige console-interface. */
.station-omgeving {
  --station-zwart: #191719;
  --station-grijs: #f6f6f7;
  padding: 30px;
  background: var(--station-grijs);
}

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.station-kop {
  min-height: 0;
  padding: 8px 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 2px solid #d9d9dd;
  background: transparent;
}

.station-merkblok {
  min-width: 0;
  width: min(560px, 68%);
}

.station-logo {
  width: 100%;
  line-height: 0;
}

.station-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.station-lees {
  --potlood: transparent;
  flex: 0 0 auto;
  min-width: 150px;
  border: 2px solid var(--station-zwart);
  background: transparent;
  color: var(--station-zwart);
  transform: none;
}

.station-lees::after,
.station-omgeving .spel-keuze-knop::after,
.station-omgeving .mini-spel::after,
.station-omgeving .leidinggame-portret::after,
.station-omgeving .leidinggame-takken button::after,
.station-omgeving .leidinggame-keuzes button::after,
.station-omgeving .spel-opnieuw::after,
.station-omgeving .spring-scorebord::after,
.station-omgeving .spring-scoreformulier::after {
  display: none;
}

.station-lees[aria-pressed="true"] {
  background: var(--paars);
}

.station-kies-titel {
  margin-top: 27px;
  font-size: 32px;
  line-height: 1;
}

.station-omgeving .spel-keuze {
  margin-top: 18px;
  gap: 18px;
}

.station-omgeving .spel-keuze-knop {
  position: relative;
  isolation: isolate;
  min-height: 228px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 68px;
  align-items: stretch;
  gap: 0;
  border: 3px solid transparent;
  background: var(--wit);
  overflow: hidden;
  transform: none;
  transition: translate .16s ease, border-color .16s ease;
}

.station-omgeving .spel-keuze-knop.leidinggame {
  --spel-vlak: var(--wit);
  --game-accent: #187a49;
}

.station-omgeving .spel-keuze-knop.das {
  --spel-vlak: var(--wit);
  --game-accent: #a51610;
}

.station-omgeving .spel-keuze-knop.spring {
  --spel-vlak: var(--wit);
  --game-accent: #5a1685;
}

.station-omgeving .spel-keuze-knop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 8px;
  background: var(--game-accent);
  opacity: 0;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] {
  border-color: var(--station-zwart);
  background: var(--wit);
  translate: 0 -6px;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"]::before {
  opacity: 1;
}

.station-omgeving .spel-keuze-knop:focus-visible {
  outline: 4px solid var(--game-accent);
  outline-offset: 3px;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] strong {
  padding-bottom: 0;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] strong::after {
  display: none;
}

.station-omgeving .spel-keuze-beeld {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--spel-vlak);
}

.station-omgeving .spel-keuze-beeld > svg:not(.spel-cover-art) {
  width: 96px;
  height: 84px;
  color: var(--wit);
  stroke-width: 3.8;
}

.station-omgeving .spel-cover-art {
  width: 100%;
  height: 100%;
  display: block;
}

.station-omgeving .spel-open {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid var(--wit);
  background: var(--station-zwart);
  color: var(--wit);
  opacity: 0;
}

.station-omgeving .spel-open svg {
  width: 22px;
  height: 22px;
  color: currentColor;
  fill: currentColor;
  stroke-width: 2;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-open {
  opacity: 1;
}

.station-omgeving .spel-keuze-knop > strong {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  display: grid;
  align-items: center;
  justify-items: start;
  font-size: 21px;
  line-height: 1.05;
  text-align: left;
}

.station-omgeving .spel-podium {
  margin-top: 28px;
}

.station-omgeving .mini-spel {
  --game-accent: var(--oranje);
  --game-soft: #fff2e8;
  padding: 30px;
  border-top: 8px solid var(--game-accent);
  background: var(--wit);
  transform: none;
}

.station-omgeving .leidinggame-spel {
  --game-accent: #2fbf71;
  --game-soft: #e1f4e9;
}

.station-omgeving .das-spel {
  --game-accent: #e8281f;
  --game-soft: #fde6e4;
}

.station-omgeving .spring-spel {
  --game-accent: #8a2fc4;
  --game-soft: #f0e4f7;
}

.station-omgeving .mini-spel-kop {
  align-items: center;
  padding-left: 16px;
  border-left: 8px solid var(--game-accent);
}

.station-omgeving .mini-spel h2 {
  font-size: 42px;
}

.station-omgeving .spel-voortgang,
.station-omgeving .spring-beste,
.station-omgeving .das-beste {
  min-width: 104px;
  padding: 10px 13px;
  background: var(--game-accent);
  color: var(--wit);
  transform: none;
}

.station-omgeving .station-kast {
  width: 100%;
  margin: 25px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--inkt);
}

.station-omgeving .station-kast-titel {
  display: none;
}

.station-omgeving .station-kast-scherm {
  border: 5px solid var(--station-zwart);
}

.station-omgeving .leidinggame-scherm {
  padding: 24px;
  background: var(--game-soft);
}

.station-omgeving .leidinggame-takken {
  gap: 10px;
}

.station-omgeving .leidinggame-takken button,
.station-omgeving .leidinggame-keuzes button {
  border: 3px solid var(--station-zwart);
  background: var(--wit);
  transform: none;
}

.station-omgeving .leidinggame-takken button[aria-pressed="true"] {
  border-color: var(--station-zwart);
  background: var(--game-accent);
  color: var(--wit);
  translate: 0 -2px;
}

.station-omgeving .leidinggame-portret {
  border: 4px solid var(--station-zwart);
  background: #d8f0e2;
}

.station-omgeving .leidinggame-wacht {
  width: 100%;
  min-width: 0;
  min-height: 360px;
  padding: 28px;
}

.station-omgeving .leidinggame-podium.is-wachten .leidinggame-portret {
  min-height: 400px;
  aspect-ratio: auto;
}

.station-omgeving .leidinggame-wacht-fotos {
  width: min(350px, 92%);
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.station-omgeving .leidinggame-wacht-fotos i {
  position: relative;
  width: 112px;
  height: 134px;
  display: grid;
  place-items: center;
  border: 5px solid var(--station-zwart);
  background: var(--wit);
  transform: rotate(-7deg);
}

.station-omgeving .leidinggame-wacht-fotos i:nth-child(2) {
  z-index: 2;
  background: #fff0a8;
  transform: translateY(-8px) rotate(2deg);
}

.station-omgeving .leidinggame-wacht-fotos i:nth-child(3) {
  transform: rotate(8deg);
}

.station-omgeving .leidinggame-wacht-fotos b {
  position: relative;
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 50%;
  background: var(--station-zwart);
}

.station-omgeving .leidinggame-wacht-fotos b::after {
  content: "";
  position: absolute;
  left: -18px;
  bottom: -37px;
  width: 88px;
  height: 45px;
  background: var(--station-zwart);
  border-radius: 48px 48px 0 0;
}

.station-omgeving .leidinggame-wacht > strong {
  color: #187a49;
}

.station-omgeving .leidinggame-keuzes button {
  min-height: 72px;
  background: var(--wit);
}

.station-omgeving .leidinggame-keuzes button:nth-child(2),
.station-omgeving .leidinggame-keuzes button:nth-child(3) {
  background: var(--wit);
  transform: none;
}

.station-omgeving .leidinggame-keuzes button.is-goed {
  background: var(--groen);
  outline: 0;
}

.station-omgeving .leidinggame-kast > .station-kast-voet,
.station-omgeving .spring-bediening {
  display: none;
}

.station-omgeving .das-spelbalk {
  min-height: 60px;
  padding: 12px 16px;
  align-items: center;
  background: var(--station-zwart);
  color: var(--wit);
}

.station-omgeving .spring-zone {
  gap: 18px;
}

.station-omgeving .spring-kast {
  margin: 0;
}

.station-omgeving .spring-scorebord {
  min-height: 0;
  padding: 20px;
  border: 4px solid var(--station-zwart);
  border-top: 10px solid var(--game-accent);
  background: var(--wit);
}

.station-omgeving .spring-scoreformulier {
  padding: 20px;
  border: 4px solid var(--station-zwart);
  background: var(--wit);
}

.station-omgeving .das-overlay button,
.station-omgeving .spring-overlay button {
  border: 4px solid var(--station-zwart);
  background: var(--oranje);
  color: var(--wit);
}

.station-omgeving .das-overlay,
.station-omgeving .spring-overlay {
  background: transparent;
}

.station-omgeving .das-overlay > strong,
.station-omgeving .spring-overlay > strong {
  min-width: min(78%, 360px);
  padding: 12px 20px;
  border: 4px solid var(--wit);
  background: var(--station-zwart);
}

.station-omgeving .spel-opnieuw {
  border: 3px solid var(--station-zwart);
  background: var(--oranje);
}

@media (max-width: 700px) {
  .station-omgeving {
    padding: 18px 14px 24px;
  }

  .station-kop {
    min-height: 0;
    padding: 8px 0 20px;
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .station-logo {
    width: 100%;
  }

  .station-merkblok {
    width: 100%;
  }

  .station-lees {
    width: 100%;
  }

  .station-kies-titel {
    margin-top: 28px;
    font-size: 24px;
  }

  .station-omgeving .spel-keuze {
    gap: 10px;
  }

  .station-omgeving .spel-keuze-knop {
    min-height: 176px;
    grid-template-rows: minmax(0, 1fr) 60px;
    border-width: 3px;
  }

  .station-omgeving .spel-keuze-beeld {
    flex: none;
    height: 100%;
  }

  .station-omgeving .spel-keuze-beeld > svg:not(.spel-cover-art) {
    width: 66px;
    height: 62px;
  }

  .station-omgeving .spel-cover-art {
    width: 100%;
    height: 100%;
  }

  .station-omgeving .spel-keuze-knop > strong {
    padding: 8px 7px;
    font-size: 16px;
  }

  .station-omgeving .spel-open {
    right: 7px;
    bottom: 7px;
    width: 31px;
    height: 31px;
    border-width: 2px;
  }

  .station-omgeving .spel-open svg {
    width: 18px;
    height: 18px;
  }

  .station-omgeving .mini-spel {
    padding: 24px 18px;
  }

  .station-omgeving .mini-spel-kop {
    padding-left: 11px;
    border-left-width: 6px;
  }

  .station-omgeving .mini-spel h2 {
    font-size: 32px;
  }

  .station-omgeving .station-kast {
    margin-inline: 0;
    padding: 0;
    border: 0;
  }

  .station-omgeving .station-kast-scherm {
    border-width: 5px;
  }

  .station-omgeving .leidinggame-scherm {
    padding: 16px;
  }

  .station-omgeving .leidinggame-wacht {
    min-height: 300px;
    padding: 18px 8px;
  }

  .station-omgeving .leidinggame-podium.is-wachten .leidinggame-portret {
    min-height: 320px;
  }

  .station-omgeving .leidinggame-wacht-fotos {
    height: 126px;
  }

  .station-omgeving .leidinggame-wacht-fotos i {
    width: 84px;
    height: 106px;
    border-width: 4px;
  }

  .station-omgeving .leidinggame-wacht-fotos b {
    width: 40px;
    height: 40px;
  }

  .station-omgeving .leidinggame-wacht-fotos b::after {
    left: -14px;
    bottom: -28px;
    width: 68px;
    height: 34px;
  }
}

@media (max-width: 380px) {
  .station-omgeving {
    margin-inline: -2px;
    padding-inline: 10px;
  }

  .station-omgeving .spel-keuze {
    gap: 7px;
  }

  .station-omgeving .spel-keuze-knop {
    min-height: 164px;
    grid-template-rows: minmax(0, 1fr) 62px;
    border-width: 3px;
  }

  .station-omgeving .spel-keuze-beeld > svg:not(.spel-cover-art) {
    width: 57px;
    height: 55px;
  }

  .station-omgeving .spel-keuze-knop > strong {
    font-size: 15px;
  }

  .station-omgeving .leidinggame-wacht-fotos {
    width: 100%;
  }

  .station-omgeving .leidinggame-wacht-fotos i {
    flex: 0 0 72px;
    width: 72px;
    height: 94px;
  }

  .station-omgeving .leidinggame-wacht-fotos b {
    width: 34px;
    height: 34px;
  }

  .station-omgeving .leidinggame-wacht-fotos b::after {
    left: -12px;
    bottom: -24px;
    width: 58px;
    height: 30px;
  }

  .station-omgeving .mini-spel {
    padding: 21px 12px;
  }

  .station-omgeving .mini-spel-kop {
    align-items: flex-start;
  }

  .station-omgeving .station-kast {
    margin-inline: 0;
  }

  .station-omgeving .leidinggame-scherm {
    padding: 11px;
  }
}

/* SJIMSTATION v116: bewegende console-achtergrond en draaiende game-discs. */
.station-omgeving {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f1f2f6;
}

.station-omgeving > :not(.station-fluid) {
  position: relative;
  z-index: 1;
}

.station-fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.station-fluid svg {
  position: absolute;
  inset: -8% -12%;
  width: 124%;
  height: 116%;
  animation: station-veld-zweef 10s ease-in-out infinite alternate;
}

.station-flow {
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.flow-oranje {
  stroke: #f26c21;
  stroke-width: 178px;
  opacity: .2;
  animation: station-stroom-links 7s ease-in-out infinite;
}

.flow-paars {
  stroke: #8a2fc4;
  stroke-width: 142px;
  opacity: .16;
  animation: station-stroom-rechts 9s ease-in-out -3s infinite;
}

.flow-rood {
  stroke: #e8281f;
  stroke-width: 118px;
  opacity: .13;
  animation: station-stroom-links 11s ease-in-out -5s infinite reverse;
}

.flow-blauw {
  stroke: #2f9dbf;
  stroke-width: 138px;
  opacity: .15;
  animation: station-stroom-rechts 8s ease-in-out -2s infinite reverse;
}

@keyframes station-stroom-links {
  0%, 100% { transform: translate3d(-13%, -4%, 0) scaleX(1.12) skewY(-1deg); }
  50% { transform: translate3d(10%, 5%, 0) scaleX(.92) skewY(2deg); }
}

@keyframes station-stroom-rechts {
  0%, 100% { transform: translate3d(12%, 4%, 0) scaleX(.92) skewY(1deg); }
  50% { transform: translate3d(-11%, -5%, 0) scaleX(1.12) skewY(-2deg); }
}

@keyframes station-veld-zweef {
  from { transform: translate3d(-2%, -3%, 0) scale(1.03); }
  to { transform: translate3d(2%, 3%, 0) scale(1.08); }
}

.station-kop {
  border-bottom-color: var(--station-zwart);
}

.station-omgeving .spel-keuze {
  align-items: start;
  gap: 28px;
}

.station-omgeving .spel-keuze-knop {
  min-height: 282px;
  padding: 0;
  grid-template-rows: 230px auto;
  justify-items: center;
  border: 0;
  background: transparent;
  overflow: visible;
  clip-path: none;
  transition: translate .18s ease;
}

.station-omgeving .spel-keuze-knop::before {
  display: none;
}

.station-omgeving .spel-keuze-knop > * {
  position: relative;
  z-index: 1;
}

.station-omgeving .spel-keuze-knop:hover {
  translate: 0 -4px;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] {
  border: 0;
  background: transparent;
  translate: 0 -6px;
}

.station-omgeving .spel-keuze-knop:focus-visible {
  outline: 0;
}

.station-omgeving .spel-keuze-beeld {
  width: min(230px, 100%);
  height: auto;
  min-width: 0;
  aspect-ratio: 1;
  border: 7px solid var(--station-zwart);
  border-radius: 50%;
  background: var(--spel-vlak);
  transform: rotate(-3deg);
  transition: transform .2s ease, border-color .2s ease;
}

.station-omgeving .spel-keuze-knop:nth-child(2) .spel-keuze-beeld {
  transform: rotate(2deg);
}

.station-omgeving .spel-keuze-knop:nth-child(3) .spel-keuze-beeld {
  transform: rotate(-2deg);
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
  border-color: var(--game-accent);
  animation: station-disc-draai 4.2s linear infinite;
}

@keyframes station-disc-draai {
  from { transform: rotate(0) scale(1.04); }
  to { transform: rotate(360deg) scale(1.04); }
}

.station-omgeving .spel-keuze-knop:focus-visible .spel-keuze-beeld {
  outline: 5px solid var(--station-zwart);
  outline-offset: 5px;
}

.station-omgeving .spel-keuze-beeld::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 2;
  border: 2px solid rgb(25 23 25 / 25%);
  border-radius: 50%;
  pointer-events: none;
}

.station-omgeving .spel-keuze-beeld::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 3;
  width: 12px;
  height: 5px;
  display: none;
  background: var(--station-zwart);
  transform: translateX(-50%);
  pointer-events: none;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld::before {
  display: block;
}

.station-omgeving .spel-logo-art {
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.station-omgeving .disc-naaf {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 17%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid var(--station-zwart);
  border-radius: 50%;
  background: var(--wit);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.station-omgeving .disc-naaf i {
  width: 44%;
  aspect-ratio: 1;
  display: block;
  border: 0;
  border-radius: 50%;
  background: var(--station-zwart);
}

.station-omgeving .spel-keuze-knop > strong {
  min-height: 0;
  padding: 15px 5px 0;
  border: 0;
  background: transparent;
  color: var(--station-zwart);
  font-size: 21px;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] > strong {
  color: var(--game-accent);
}

.station-omgeving .spel-open {
  display: none;
}

.station-omgeving .spel-podium {
  background: var(--wit);
}

@media (prefers-reduced-motion: reduce) {
  .station-fluid svg,
  .station-flow,
  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
    animation: none !important;
  }

  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
    transform: rotate(0) scale(1.04);
  }
}

@media (max-width: 700px) {
  .station-fluid svg {
    inset: -5% -34%;
    width: 168%;
    height: 110%;
  }

  .station-omgeving .spel-keuze {
    gap: 8px;
  }

  .station-omgeving .spel-keuze-knop {
    min-height: 151px;
    grid-template-rows: minmax(0, 91px) auto;
  }

  .station-omgeving .spel-keuze-beeld {
    width: 100%;
    border-width: 4px;
  }

  .station-omgeving .spel-keuze-beeld::after {
    inset: 6px;
    border-width: 1px;
  }

  .station-omgeving .disc-naaf {
    border-width: 3px;
  }

  .station-omgeving .disc-naaf i {
    border-width: 2px;
  }

  .station-omgeving .spel-keuze-knop > strong {
    padding: 9px 2px 0;
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .station-omgeving .spel-keuze {
    gap: 6px;
  }

  .station-omgeving .spel-keuze-knop {
    min-height: 144px;
    grid-template-rows: minmax(0, 86px) auto;
  }

  .station-omgeving .spel-keuze-knop > strong {
    padding-inline: 1px;
    font-size: 13px;
  }
}

/* De drie spellen delen dezelfde rustige console-opbouw. */
.station-omgeving .mini-spel {
  padding: 26px;
  border-top-width: 9px;
}

.station-omgeving .mini-spel-kop {
  padding: 0 0 20px;
  align-items: flex-start;
  border-left: 0;
  border-bottom: 3px solid #dedee3;
}

.station-omgeving .mini-spel-kop > div {
  min-width: 0;
}

.station-omgeving .mini-spel h2 {
  font-size: 44px;
}

.station-omgeving .mini-spel-kop p {
  max-width: 34rem;
  margin-top: 7px;
  line-height: 1.3;
}

.station-omgeving .spel-voortgang,
.station-omgeving .spring-beste,
.station-omgeving .das-beste {
  min-width: 116px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  font-size: 17px;
}

.station-omgeving .station-kast-scherm {
  border-width: 5px;
}

.station-omgeving .das-spelbalk,
.station-omgeving .spring-bediening {
  min-height: 62px;
  padding: 10px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--station-zwart);
  color: var(--wit);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 900;
}

.station-omgeving .das-spelbalk strong,
.station-omgeving .spring-bediening strong {
  margin-left: 5px;
  color: var(--geel);
  font-size: 24px;
}

.station-omgeving .spring-beloning {
  max-width: 12rem;
  margin-top: 6px;
  display: block;
  color: var(--groen-donker);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.station-omgeving .das-overlay button,
.station-omgeving .spring-overlay button,
.station-omgeving .spel-opnieuw,
.station-omgeving .spring-scoreformulier button {
  min-height: 54px;
  padding: 11px 20px;
  border: 4px solid var(--station-zwart);
  background: var(--oranje);
  color: var(--wit);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 900;
}

.station-omgeving .das-overlay > strong,
.station-omgeving .spring-overlay > strong {
  min-width: min(78%, 350px);
  padding: 12px 18px;
  border-width: 4px;
  font-size: 43px;
  line-height: 1.02;
}

.station-omgeving .leidinggame-wacht {
  min-height: 320px;
}

.station-omgeving .leidinggame-wacht-fotos {
  gap: 0;
}

.station-omgeving .leidinggame-wacht-fotos i {
  place-items: end center;
  padding: 10px 6px;
  background: #f5f5f6;
}

.station-omgeving .leidinggame-wacht-fotos i:nth-child(2) {
  background: var(--wit);
}

.station-omgeving .leidinggame-wacht-fotos i span {
  color: #56515a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
  animation-duration: 5.2s;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-logo-art {
  animation: station-picto-stil 5.2s linear infinite;
}

@keyframes station-disc-draai {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes station-picto-stil {
  from { transform: rotate(0); }
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
    transform: rotate(0);
  }

  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-logo-art {
    animation: none;
  }
}

@media (max-width: 700px) {
  .station-omgeving .station-kies-titel {
    margin-left: 4px;
  }

  .station-omgeving .spel-keuze {
    margin-inline: -14px;
    padding: 8px 14px 18px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .station-omgeving .spel-keuze::-webkit-scrollbar {
    display: none;
  }

  .station-omgeving .spel-keuze-knop {
    flex: 0 0 138px;
    min-height: 180px;
    grid-template-rows: 132px auto;
    scroll-snap-align: center;
  }

  .station-omgeving .spel-keuze-beeld {
    width: 132px;
    border-width: 5px;
  }

  .station-omgeving .spel-keuze-knop > strong {
    padding-top: 10px;
    font-size: 16px;
  }

  .station-omgeving .spel-podium {
    margin-top: 8px;
  }

  .station-omgeving .mini-spel {
    padding: 19px 12px 22px;
  }

  .station-omgeving .mini-spel-kop {
    gap: 12px;
    padding-bottom: 16px;
  }

  .station-omgeving .mini-spel h2 {
    font-size: 31px;
  }

  .station-omgeving .mini-spel-kop p {
    font-size: 17px;
  }

  .station-omgeving .spel-voortgang,
  .station-omgeving .spring-beste,
  .station-omgeving .das-beste {
    min-width: 96px;
    min-height: 44px;
    padding-inline: 8px;
    font-size: 15px;
  }

  .station-omgeving .das-spelbalk,
  .station-omgeving .spring-bediening {
    min-height: 56px;
    padding: 8px 12px;
    font-size: 14px;
  }

  .station-omgeving .das-spelbalk strong,
  .station-omgeving .spring-bediening strong {
    font-size: 21px;
  }

  .station-omgeving .leidinggame-wacht {
    min-height: 260px;
  }

  .station-omgeving .leidinggame-podium.is-wachten .leidinggame-portret {
    min-height: 290px;
  }

  .station-omgeving .das-geluid,
  .station-omgeving .spring-geluid {
    width: 48px;
    height: 48px;
    top: 8px;
    right: 8px;
  }

  .station-omgeving .das-overlay,
  .station-omgeving .spring-overlay {
    gap: 8px;
    padding: 8px;
  }

  .station-omgeving .das-overlay > strong,
  .station-omgeving .spring-overlay > strong {
    min-width: min(68%, 250px);
    padding: 6px 12px;
    border-width: 3px;
    font-size: 25px;
  }

  .station-omgeving .das-overlay button,
  .station-omgeving .spring-overlay button {
    min-width: 126px;
    min-height: 42px;
    padding: 5px 14px;
    border-width: 3px;
    font-size: 16px;
  }

  .station-omgeving .spring-zone {
    margin-top: 18px;
    gap: 14px;
  }

  .station-omgeving .spring-scorebord {
    padding: 18px;
  }

  .station-fluid .flow-rood,
  .station-fluid .flow-blauw {
    display: none;
  }
}

@media (max-width: 360px) {
  .station-omgeving .spel-keuze-knop {
    flex-basis: 132px;
    grid-template-rows: 126px auto;
  }

  .station-omgeving .spel-keuze-beeld {
    width: 126px;
  }

  .station-omgeving .spel-keuze-knop > strong {
    font-size: 15px;
  }

  .station-omgeving .mini-spel-kop {
    flex-direction: column;
  }

  .station-omgeving .das-overlay > strong,
  .station-omgeving .spring-overlay > strong {
    font-size: 22px;
  }

  .station-omgeving .das-overlay button,
  .station-omgeving .spring-overlay button {
    min-height: 38px;
    font-size: 15px;
  }
}

/* Mijn scoutje: één beloningensysteem voor de arcadegames. */
.station-acties {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.station-scout-knop {
  min-width: 198px;
  min-height: 64px;
  padding: 6px 12px 6px 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 3px solid var(--station-zwart);
  background: var(--wit);
  color: var(--station-zwart);
  cursor: pointer;
  text-align: left;
}

.station-scout-knop > span:last-child {
  display: grid;
  gap: 2px;
}

.station-scout-knop strong,
.station-scout-knop small {
  display: block;
  line-height: 1;
}

.station-scout-knop strong {
  font-size: 17px;
}

.station-scout-knop small {
  color: var(--paars-donker);
  font-size: 13px;
  font-weight: 900;
}

.station-beloning {
  margin: 14px 0 0;
  padding: 12px 15px;
  border: 3px solid var(--station-zwart);
  background: var(--geel);
  font-weight: 900;
}

.station-beloning[hidden] {
  display: none;
}

.pixel-scout {
  --scout-huid: #c8875b;
  --scout-trui: #f26c21;
  display: grid;
  place-items: center;
  image-rendering: pixelated;
}

.pixel-scout.mini {
  flex: 0 0 45px;
  width: 45px;
  height: 50px;
}

.pixel-scout.groot {
  width: min(210px, 70%);
  margin-inline: auto;
}

.pixel-scout svg {
  width: 100%;
  height: auto;
  display: block;
  stroke: none;
  stroke-width: 0;
}

.station-omgeving .spel-cover-art {
  stroke: none;
  stroke-width: 0;
}

.pixel-scout .scout-huid { fill: var(--scout-huid); }
.pixel-scout .scout-trui { fill: var(--scout-trui); }
.pixel-scout .scout-broek { fill: #182454; }
.pixel-scout .scout-schoen,
.pixel-scout .scout-haar,
.pixel-scout .scout-oog { fill: #191719; }
.pixel-scout .scout-extra { display: none; }
.pixel-scout[data-extra="pet"] .extra-pet,
.pixel-scout[data-extra="rugzak"] .extra-rugzak,
.pixel-scout[data-extra="bril"] .extra-bril,
.pixel-scout[data-extra="medaille"] .extra-medaille { display: block; }

.pixel-scout[data-super="ja"] svg > rect:not(.scout-oog),
.pixel-scout[data-super="ja"] svg > g rect:not(.scout-oog) {
  fill: url("#super-scout-heelal");
}

.pixel-scout[data-super="ja"] svg {
  animation: scout-super-gloed 2.4s steps(4, end) infinite;
  filter: drop-shadow(0 0 5px rgb(120 101 255 / 72%));
}

.super-scout-galaxy-beeld {
  transform-box: fill-box;
  transform-origin: center;
  animation: scout-galaxy-beweeg 6s ease-in-out infinite alternate;
}

@keyframes scout-galaxy-beweeg {
  from { transform: translate(-4px, -1px) scale(1.08); }
  to { transform: translate(4px, 1px) scale(1.18); }
}

@keyframes scout-super-gloed {
  0%, 100% {
    filter: brightness(1) saturate(1.05) drop-shadow(0 0 3px rgb(111 87 255 / 60%));
  }
  50% {
    filter: brightness(1.2) saturate(1.25) drop-shadow(0 0 10px rgb(226 88 214 / 88%));
  }
}

.scout-dialoog {
  width: min(860px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 5px solid var(--station-zwart);
  border-radius: 0;
  background: #f2f3f7;
  color: var(--station-zwart);
}

.scout-dialoog::backdrop {
  background: rgb(25 23 25 / 72%);
}

.scout-dialoog-kop {
  min-height: 78px;
  padding: 12px 14px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 5px solid var(--station-zwart);
  background: var(--paars);
  color: var(--wit);
}

.scout-dialoog-kop span {
  display: block;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.scout-dialoog-kop h2 {
  font-size: 30px;
  line-height: 1;
}

.scout-dialoog-kop button {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 3px solid var(--wit);
  background: var(--station-zwart);
  color: var(--wit);
  cursor: pointer;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

.scout-bouwer {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(340px, 1.2fr);
  align-items: start;
  gap: 20px;
}

.scout-voorbeeldvak {
  min-height: 420px;
  padding: 24px 18px;
  display: grid;
  place-content: center;
  gap: 13px;
  border: 4px solid var(--station-zwart);
  background: #dfe4f1;
  text-align: center;
}

.scout-voorbeeldvak p {
  max-width: 18rem;
  font-size: 16px;
  font-weight: 900;
}

.scout-meter {
  width: 100%;
  height: 15px;
  display: block;
  border: 3px solid var(--station-zwart);
  background: var(--wit);
}

.scout-meter i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--oranje);
  transition: width .25s ease;
}

.scout-keuzes {
  display: grid;
  gap: 17px;
}

.scout-keuzes fieldset {
  min-width: 0;
  padding: 14px;
  border: 4px solid var(--station-zwart);
  background: var(--wit);
}

.scout-keuzes legend {
  padding: 0 8px;
  font-size: 20px;
  font-weight: 900;
}

.scout-kleurkeuzes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.scout-kleurkeuzes button {
  position: relative;
  min-width: 0;
  min-height: 68px;
  padding: 5px;
  border: 4px solid var(--station-zwart);
  background: var(--staal);
  cursor: pointer;
}

.scout-kleurkeuzes button small {
  position: absolute;
  inset: auto 3px 3px;
  padding: 3px 2px;
  background: var(--wit);
  color: var(--station-zwart);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 400px) {
  .scout-truikeuzes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scout-truikeuzes button small {
    font-size: 12px;
    line-height: 1.15;
  }
}

.scout-extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.scout-extras button {
  min-height: 68px;
  padding: 8px 5px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 3px solid var(--station-zwart);
  background: #f2f3f7;
  cursor: pointer;
  text-align: center;
}

.scout-extras button strong {
  font-size: 15px;
}

.scout-extras button small {
  font-size: 11px;
  font-weight: 900;
}

.scout-kleurkeuzes button[aria-pressed="true"],
.scout-extras button[aria-pressed="true"] {
  outline: 5px solid var(--oranje);
  outline-offset: 2px;
}

.scout-kleurkeuzes button[aria-disabled="true"],
.scout-extras button[aria-disabled="true"] {
  cursor: default;
  filter: grayscale(.8);
  opacity: .48;
}

.scout-super-keuze label {
  min-height: 74px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  border: 4px solid var(--station-zwart);
  background: #e4e5ff;
  cursor: pointer;
}

.scout-super-keuze input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.scout-super-vink {
  position: relative;
  width: 48px;
  height: 48px;
  border: 4px solid var(--station-zwart);
  background: #17123f;
}

.scout-super-keuze strong,
.scout-super-keuze small {
  display: block;
}

.scout-super-keuze strong {
  font-size: 18px;
}

.scout-super-keuze small {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 900;
}

.scout-super-keuze input:checked + .scout-super-vink {
  background: linear-gradient(135deg, #243b9b 0 30%, #7b32a8 30% 66%, #d14d9f 66%);
}

.scout-super-keuze input:checked + .scout-super-vink::before,
.scout-super-keuze input:checked + .scout-super-vink::after {
  content: "";
  position: absolute;
  background: var(--wit);
}

.scout-super-keuze input:checked + .scout-super-vink::before {
  left: 9px;
  top: 9px;
  width: 5px;
  height: 5px;
  box-shadow: 22px 5px 0 #9fe8ff, 9px 21px 0 var(--wit);
}

.scout-super-keuze input:checked + .scout-super-vink::after {
  left: 11px;
  top: 4px;
  width: 15px;
  height: 27px;
  background: transparent;
  border: solid var(--station-zwart);
  border-width: 0 6px 6px 0;
  transform: rotate(45deg);
}

.scout-super-keuze label:focus-within {
  outline: 5px solid var(--oranje);
  outline-offset: 2px;
}

.scout-super-keuze label[data-vergrendeld="true"] {
  cursor: default;
  filter: grayscale(.8);
  opacity: .48;
}

@media (max-width: 700px) {
  .station-acties {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .station-scout-knop,
  .station-lees {
    width: 100%;
    min-width: 0;
    min-height: 62px;
  }

  .station-scout-knop {
    padding-inline: 6px;
    gap: 5px;
  }

  .station-scout-knop strong {
    font-size: 15px;
  }

  .pixel-scout.mini {
    flex-basis: 38px;
    width: 38px;
    height: 46px;
  }

  .scout-dialoog {
    width: calc(100% - 14px);
    max-height: calc(100dvh - 14px);
  }

  .scout-dialoog-kop {
    min-height: 70px;
    padding-left: 14px;
  }

  .scout-dialoog-kop h2 {
    font-size: 25px;
  }

  .scout-dialoog-kop button {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .scout-bouwer {
    padding: 12px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .scout-voorbeeldvak {
    min-height: 300px;
    padding: 16px;
  }

  .pixel-scout.groot {
    width: 150px;
  }

  .scout-kleurkeuzes button {
    min-height: 62px;
  }

  .scout-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scout-extras button {
    min-height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scout-meter i {
    transition: none;
  }

  .pixel-scout[data-super="ja"] svg {
    animation: none;
  }

  .super-scout-galaxy-beeld {
    animation: none;
  }
}

/* Het dassenspel gebruikt dezelfde scherpe pixeltaal als Spring erover. */
#das-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

/* Laatste visuele afwerking voor het volledige Sjimstation. */
.station-omgeving .station-scout-knop,
.station-omgeving .station-lees {
  transition: translate .15s ease, background-color .15s ease;
}

.station-omgeving .station-scout-knop {
  border-bottom-width: 6px;
  border-bottom-color: var(--oranje);
}

.station-omgeving .station-lees {
  border-bottom-width: 6px;
  border-bottom-color: var(--paars);
}

.station-omgeving .station-scout-knop:hover,
.station-omgeving .station-lees:hover {
  background: #fff8f3;
  translate: 0 -2px;
}

.station-omgeving .station-scout-knop:active,
.station-omgeving .station-lees:active {
  translate: 0 1px;
}

.station-omgeving button:focus-visible,
.scout-dialoog button:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 3px;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
  outline: 3px solid var(--station-zwart);
  outline-offset: 4px;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] > strong {
  font-weight: 950;
}

.station-omgeving .mini-spel {
  border-right: 3px solid #dedee3;
  border-bottom: 3px solid #dedee3;
  border-left: 3px solid #dedee3;
}

.station-omgeving .mini-spel-kop {
  border-bottom-width: 4px;
}

.station-omgeving .spel-voortgang,
.station-omgeving .spring-beste,
.station-omgeving .das-beste {
  border: 3px solid var(--station-zwart);
  font-variant-numeric: tabular-nums;
}

.station-omgeving .station-kast-scherm {
  outline: 2px solid #f2f3f7;
  outline-offset: -7px;
}

.station-omgeving .das-spelbalk span,
.station-omgeving .spring-bediening span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.station-omgeving .das-spelbalk strong,
.station-omgeving .spring-bediening strong {
  min-width: 2ch;
  margin-left: 0;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.station-omgeving .das-overlay,
.station-omgeving .spring-overlay {
  background: rgb(11 6 32 / 28%);
}

.station-omgeving .das-spel > .spel-melding {
  min-height: 58px;
  margin-top: 0;
  padding: 14px 16px;
  display: grid;
  place-items: center;
  border-right: 3px solid #dedee3;
  border-bottom: 3px solid #dedee3;
  border-left: 3px solid #dedee3;
  background: var(--wit);
  text-align: center;
}

.scout-dialoog-kop {
  position: sticky;
  top: 0;
  z-index: 5;
}

.scout-dialoog-kop button:focus-visible {
  outline-offset: -7px;
}

.scout-kleurkeuzes button[aria-pressed="true"],
.scout-extras button[aria-pressed="true"] {
  outline-width: 4px;
  outline-offset: 2px;
}

.scout-kleurkeuzes button[aria-disabled="true"],
.scout-extras button[aria-disabled="true"] {
  opacity: .55;
}

.scout-kleurkeuzes button small,
.scout-extras button small {
  letter-spacing: 0;
  line-height: 1.05;
}

@media (max-width: 700px) {
  .station-omgeving .mini-spel {
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }

  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
    outline-width: 2px;
    outline-offset: 3px;
  }

  .station-omgeving .das-spel > .spel-melding {
    min-height: 54px;
    padding: 12px;
  }
}

@media (hover: none) {
  .station-omgeving .station-scout-knop:hover,
  .station-omgeving .station-lees:hover {
    background: var(--wit);
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .station-omgeving .station-scout-knop,
  .station-omgeving .station-lees {
    transition: none;
  }
}

/* Spelhoesjes: het pictogram blijft op de hoes, de disc beweegt apart. */
.station-omgeving .spel-keuze {
  gap: 42px;
}

.station-omgeving .spel-keuze-knop {
  min-height: 266px;
  grid-template-rows: 220px auto;
}

.station-omgeving .spel-keuze-object {
  position: relative;
  width: 100%;
  height: 220px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.station-omgeving .spel-keuze-disc {
  position: absolute;
  top: 50%;
  left: 57%;
  z-index: 1;
  width: min(72%, 174px);
  aspect-ratio: 1;
  border: 5px solid var(--station-zwart);
  border-radius: 50%;
  background: #e7e7eb;
  transform: translate(-50%, -50%);
  transition: left .28s ease;
  pointer-events: none;
}

.station-omgeving .spel-keuze-disc::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2px solid #9e9ea6;
  border-radius: 50%;
}

.station-omgeving .spel-keuze-disc::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 18px;
  height: 7px;
  background: var(--game-accent);
  transform: translateX(-50%);
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-disc {
  left: 76%;
  animation: station-losse-disc-draai 3.8s linear infinite;
}

.station-omgeving .spel-keuze-beeld,
.station-omgeving .spel-keuze-knop:nth-child(2) .spel-keuze-beeld,
.station-omgeving .spel-keuze-knop:nth-child(3) .spel-keuze-beeld {
  position: relative;
  z-index: 2;
  width: min(70%, 168px);
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 5px solid var(--station-zwart);
  border-left-width: 10px;
  border-radius: 0;
  background: var(--wit);
  transform: rotate(-1deg);
  animation: none;
  transition: transform .2s ease;
}

.station-omgeving .spel-keuze-knop:nth-child(2) .spel-keuze-beeld {
  transform: rotate(1deg);
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-beeld {
  border-color: var(--station-zwart);
  outline: 0;
  transform: translateX(-9px) rotate(-1deg);
  animation: none;
}

.station-omgeving .spel-keuze-knop[aria-pressed="true"]:nth-child(2) .spel-keuze-beeld {
  transform: translateX(-9px) rotate(1deg);
}

.station-omgeving .spel-keuze-beeld::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  width: auto;
  height: 13px;
  display: block;
  background: var(--game-accent);
  transform: none;
}

.station-omgeving .spel-keuze-beeld::after {
  content: "";
  position: absolute;
  inset: 8px 7px 20px;
  z-index: 1;
  border: 2px solid #dedee3;
  border-radius: 0;
  pointer-events: none;
}

.station-omgeving .spel-logo-art {
  position: relative;
  z-index: 2;
  width: 70%;
  height: 70%;
  animation: none !important;
}

.station-omgeving .spel-keuze-disc .disc-naaf {
  z-index: 3;
  width: 23%;
  border: 4px solid var(--station-zwart);
  background: var(--wit);
}

.station-omgeving .spel-keuze-disc .disc-naaf i {
  width: 43%;
  border: 0;
  background: var(--station-zwart);
}

.station-omgeving .spel-keuze-knop:focus-visible .spel-keuze-beeld {
  outline: 4px solid var(--geel);
  outline-offset: 4px;
}

@keyframes station-losse-disc-draai {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 700px) {
  .station-omgeving .spel-keuze {
    gap: 18px;
  }

  .station-omgeving .spel-keuze-knop {
    flex: 0 0 168px;
    min-height: 202px;
    grid-template-rows: 156px auto;
  }

  .station-omgeving .spel-keuze-object {
    height: 156px;
  }

  .station-omgeving .spel-keuze-disc {
    width: 112px;
    border-width: 4px;
  }

  .station-omgeving .spel-keuze-disc::before {
    inset: 8px;
    border-width: 1px;
  }

  .station-omgeving .spel-keuze-disc::after {
    top: 8px;
    width: 14px;
    height: 5px;
  }

  .station-omgeving .spel-keuze-beeld,
  .station-omgeving .spel-keuze-knop:nth-child(2) .spel-keuze-beeld,
  .station-omgeving .spel-keuze-knop:nth-child(3) .spel-keuze-beeld {
    width: 108px;
    border-width: 4px;
    border-left-width: 8px;
  }

  .station-omgeving .spel-keuze-knop > strong {
    padding-top: 8px;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .station-omgeving .spel-keuze-knop {
    flex-basis: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .station-omgeving .spel-keuze-knop[aria-pressed="true"] .spel-keuze-disc {
    animation: none;
  }
}