/* Mijn Leerplein - routespel-v1.css: de splitsing (Eiland Ei, Au-woud, Klankachtbaan). Maten in scènepixels (1600 x 900). */
.sb-stage .rs-kaart { position: relative; display: flex; align-items: center; gap: 28px; margin: 0 auto; padding: 12px 30px 12px 18px; min-height: 130px;
  width: max-content; max-width: 1120px; border-radius: 30px; background: rgba(255,255,255,.96); box-shadow: 0 8px 0 rgba(0,0,0,.14); }
.rs-plaatje { width: 120px; height: 120px; object-fit: contain; }
.rs-emoji { font-size: 96px; line-height: 1; width: 120px; text-align: center; }
.rs-tekst { font-size: 88px; font-weight: 700; color: #16313b; line-height: 1.1; }
.rs-woord { display: inline-flex; align-items: flex-end; white-space: nowrap; }
.rs-gat { display: inline-flex; gap: 4px; margin: 0 4px; }
.rs-vak { display: inline-grid; place-items: center; min-width: 62px; height: 92px; border-bottom: 8px solid var(--sb-hoofd, #0c8a6e); border-radius: 10px 10px 0 0;
  background: rgba(12,138,110,.08); color: var(--sb-hoofd, #0c8a6e); }
.rs-gat.gevuld .rs-vak { background: var(--mlp-goed-zacht, #e3f6ea); }
.rs-woord.flits .rs-gat .rs-vak { animation: rs-flits .9s ease 2; }
@keyframes rs-flits { 50% { background: #fff1b8; } }
.rs-zin { margin: 0; font-size: 56px; font-weight: 700; max-width: 900px; white-space: normal; line-height: 1.3; }
.rs-zin .rs-woord { font-size: 64px; }
.rs-zin .rs-vak { min-width: 44px; height: 70px; }
.sb-stage .rs-luister { position: static; width: 96px; height: 96px; flex: none; }
.rs-kaart.rs-compleet { box-shadow: 0 0 0 8px var(--mlp-goed, #2e9d5b), 0 8px 0 rgba(0,0,0,.14); }
.rs-verstopt { letter-spacing: 10px; color: #9fb1b8; }

/* de splitsing */
.rs-route { position: relative; width: 1180px; height: 455px; margin: 6px auto 0; }
.rs-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rs-rand { fill: none; stroke: var(--rs-rand, rgba(0,0,0,.18)); stroke-width: 120; stroke-linecap: round; }
.rs-baan { fill: none; stroke: var(--rs-baan, rgba(255,255,255,.55)); stroke-width: 100; stroke-linecap: round; }
.rs-lijn { fill: none; stroke: var(--rs-lijn, rgba(255,255,255,.95)); stroke-width: 8; stroke-dasharray: 26 22; stroke-linecap: round; }
.rs-voertuig { position: absolute; width: 150px; height: 150px; pointer-events: none; transition: none; z-index: 3; filter: drop-shadow(0 10px 8px rgba(0,0,0,.25)); }
.rs-voertuig img, .rs-voertuig svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-voertuig.rs-stop { animation: rs-wiebel .5s ease 2; }
.rs-voertuig.rs-weg { opacity: 0; transition: opacity .6s; }
@keyframes rs-wiebel { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }
.sb-stage .rs-bord { position: absolute; transform: translate(-50%, -50%); z-index: 4; display: grid; place-items: center; gap: 0;
  min-width: 210px; min-height: 150px; padding: 10px 26px; border-radius: 28px; border: 6px solid #fff; background: var(--rs-bord, #f2b705);
  color: #16313b; cursor: pointer; box-shadow: 0 10px 0 rgba(0,0,0,.22); font-family: var(--mlp-letter); touch-action: manipulation; }
.rs-bordklank { font-size: 92px; font-weight: 700; line-height: 1; letter-spacing: 4px; }
.rs-bordnaam { font-size: 30px; font-weight: 700; opacity: .85; }
.sb-stage .rs-bord:active { transform: translate(-50%, -46%); box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.sb-stage .rs-bord:focus-visible { outline: 8px solid #fff; outline-offset: 6px; }
.rs-bord[data-uitslag="goed"] { background: var(--mlp-goed, #2e9d5b); color: #fff; }
.rs-bord[data-uitslag="fout"] { background: #e9eef0; color: #8a9aa0; border-style: dashed; }
.rs-route.bezig .rs-bord { cursor: default; }

/* typen */
.rs-typ { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.rs-typlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sb-stage .rs-in { width: 520px; height: 110px; padding: 0 24px; border-radius: 24px; border: 6px solid #16313b; font: 700 68px var(--mlp-letter); text-align: center; }
.rs-in:focus { outline: 8px solid var(--mlp-warm, #f2b705); }
.rs-hek { display: flex; justify-content: center; margin-top: 30px; transition: transform .8s; }
.rs-hekbalk { width: 520px; height: 40px; border-radius: 20px; background: repeating-linear-gradient(90deg, #e4473a 0 50px, #fff 50px 100px); box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.rs-hek.open { transform: translateY(-20px) rotate(-12deg); opacity: .5; }

body.zonder-beweging .rs-voertuig, body.zonder-beweging .rs-hek { transition: none; animation: none; }