/* Rondleiding voor wie de site voor het eerst opent (zie rondleiding.js). Sticker-stijl zoals de rest:
   dikke inktrand, harde schaduw, per slide een eigen kleur achter de illustratie. */
body.rl-open{overflow:hidden}
.rl-backdrop{position:fixed;inset:0;z-index:190;display:flex;align-items:flex-end;justify-content:center;
  background:rgb(26 26 34 / .66);overscroll-behavior:contain;animation:rl-fade .2s ease-out both}
.rl-sheet{--rl-kleur:#43a852;position:relative;width:min(460px,100%);max-height:calc(100dvh - env(safe-area-inset-top,0px));overflow:auto;
  box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px));
  border:3px solid #1a1a22;border-bottom:0;border-radius:28px 28px 0 0;background:#fffdf7;color:#1a1a22;
  font:600 1rem/1.45 "Nunito",ui-rounded,system-ui,sans-serif;animation:rl-up .3s cubic-bezier(.2,.9,.25,1) both}
.rl-skip{align-self:flex-end;margin:0;padding:6px 12px;min-height:36px;border:0;border-radius:999px;background:transparent;color:#5a5a66;
  font:800 .9rem "Nunito",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.rl-slide{display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
.rl-slide.rl-in > *{animation:rl-slide .38s cubic-bezier(.2,.9,.25,1) both}
.rl-slide.rl-in > *:nth-child(2){animation-delay:.04s} .rl-slide.rl-in > *:nth-child(3){animation-delay:.08s}
.rl-slide.rl-in > *:nth-child(n+4){animation-delay:.12s}
.rl-stage{position:relative;display:grid;place-items:center;height:min(210px,28dvh);margin-bottom:6px;border:3px solid #1a1a22;border-radius:22px;
  background:var(--rl-kleur);box-shadow:5px 5px 0 #1a1a22;overflow:hidden;transition:background .3s}
.rl-stage.kort{height:min(150px,20dvh)}
/* Een spelkaartje in plaats van een plaatje (kaartjes uit /spelkaarten.css): geen eigen kader, het kaartje heeft zijn eigen. */
.rl-stage.rl-kaartvak{display:block;height:auto;min-height:min(227px,31dvh);overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.rl-stage.rl-kaartvak::before{display:none}
.rl-kaart{width:min(100%,340px);margin:0 auto;padding-right:6px;pointer-events:none}
.rl-kaart .game{min-height:0}
.rl-kaart .game:hover{transform:none}
.rl-stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgb(255 255 255 / .28)}
/* absoluut in het vak: dan rekent de hoogte echt met de hoogte van het vak (in het grid liep de illustratie er
   onderaan uit, waardoor de kikker van de Spreekbeurt- en Wrapped-plaat half uit beeld viel) */
.rl-art{position:absolute;top:50%;left:50%;translate:-50% -50%;height:74%;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 6px 0 rgb(0 0 0 / .18))}
.rl-bob{animation:rl-bob 2.6s ease-in-out infinite}
/* moment-saved-art is een heel scherm (390×844); we tonen alleen y 90–510 (420 hoog), waar de feestkikker
   met zijn hoedje staat: hoogte 844/420 van het vak, 90/420 naar boven geschoven */
.rl-art.rl-feest{position:absolute;top:-21.4%;left:50%;height:201%;max-width:none;translate:-50% 0;filter:none}
.rl-label{margin:6px 0 0;font:900 .75rem/1 "Nunito",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5a5a66}
.rl-slide h2{margin:0;font:900 clamp(1.45rem,6vw,1.8rem)/1.08 "Montserrat","Nunito",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.rl-tekst{margin:0;color:#3d3d48;font-size:1.02rem}
.rl-stappen{margin:4px 0 0;padding:0;list-style:none;counter-reset:rl;display:flex;flex-direction:column;gap:8px}
.rl-stappen li{counter-increment:rl;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:14px;background:#efeee7;font-size:.95rem;line-height:1.35}
.rl-stappen li::before{content:counter(rl);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1a1a22;color:#fff;font-weight:900;font-size:.85rem}

/* de kikker die zichzelf in elkaar zet */
.rl-bouw{position:relative;height:88%;aspect-ratio:1}
.rl-bouw img{position:absolute;inset:0;width:100%;height:100%;animation:rl-plop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.25s + var(--i) * .38s)}

.rl-dots{display:flex;justify-content:center;gap:6px}
.rl-dots button{width:10px;height:10px;min-height:0;margin:0;padding:0;border:2px solid #1a1a22;border-radius:999px;background:transparent;cursor:pointer;transition:width .2s,background .2s}
.rl-dots button[aria-current]{width:28px;background:#1a1a22}
.rl-actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1.9fr;gap:10px;margin:0 -4px;padding:8px 4px calc(0px + env(safe-area-inset-bottom,0px));background:#fffdf7}
.rl-next,.rl-later{display:grid;place-items:center;min-height:52px;margin:0;padding:4px 12px;border-radius:999px;text-align:center;line-height:1.1;font:900 clamp(.9rem,4vw,1.05rem)/1.1 "Montserrat","Nunito",sans-serif;text-decoration:none;cursor:pointer;box-sizing:border-box}
.rl-next{border:3px solid #1a1a22;background:#e8408f;color:#fff;box-shadow:3px 3px 0 #1a1a22}
.rl-next:active{translate:2px 2px;box-shadow:1px 1px 0 #1a1a22}
.rl-later{border:2px solid #d9d9d2;background:transparent;color:#5a5a66}
.rl-sheet :focus-visible{outline:3px solid #43a852;outline-offset:3px}
.rl-sheet:focus{outline:none}

/* na de rondleiding, op /kikkers: de drie stappen nog even in beeld */
.rl-tip{position:fixed;left:12px;right:12px;bottom:calc(var(--nav-h,0px) + 12px + env(safe-area-inset-bottom,0px) * var(--nav-safe,1));z-index:45;
  max-width:460px;margin:0 auto;padding:12px 44px 12px 16px;border:3px solid #1a1a22;border-radius:18px;background:#fffdf7;color:#1a1a22;
  box-shadow:4px 4px 0 #1a1a22;font:700 .92rem/1.35 "Nunito",system-ui,sans-serif;animation:rl-up .3s cubic-bezier(.2,.9,.25,1) both}
.rl-tip b{font:900 1rem "Montserrat","Nunito",sans-serif}
.rl-tip ol{margin:6px 0 0;padding-left:20px}
/* kikker-doos op de vijver, via de rondleiding: de lege vakjes even laten opvallen */
.rl-wijs .sc-placeholder{border-color:#2ec4b6;color:var(--ink);animation:rl-wijs 1.6s ease-in-out infinite}
.rl-wijs .sc-placeholder small{color:#2ec4b6}
@keyframes rl-wijs{50%{box-shadow:0 0 0 5px rgb(46 196 182 / .35)}}
.rl-tip button{position:absolute;top:8px;right:8px;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:#efeee7;color:#1a1a22;font-weight:900;cursor:pointer}

/* lage schermen (iPhone SE en zo): compacter, zodat de knoppen in beeld blijven */
@media (max-height:720px){
  .rl-sheet{gap:10px;padding-top:10px}
  .rl-stage{height:min(170px,24dvh)} .rl-stage.kort{height:96px}
  .rl-stage.rl-kaartvak{min-height:187px} .rl-kaart{width:min(100%,280px)}
  .rl-slide h2{font-size:1.35rem} .rl-tekst{font-size:.95rem}
  .rl-stappen{gap:6px} .rl-stappen li{padding:8px 10px;font-size:.88rem}
}
@media (min-width:700px){
  .rl-backdrop{align-items:center;padding:24px}
  .rl-sheet{border-bottom:3px solid #1a1a22;border-radius:28px;box-shadow:8px 8px 0 #1a1a22;padding:16px 24px 24px}
}
@keyframes rl-fade{from{opacity:0}}
@keyframes rl-up{from{transform:translateY(40px);opacity:0}}
@keyframes rl-slide{from{transform:translateX(var(--rl-van,40px));opacity:0}}
@keyframes rl-plop{from{transform:scale(.4) translateY(-30px);opacity:0}}
@keyframes rl-bob{50%{transform:translateY(-8px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){
  .rl-backdrop,.rl-sheet,.rl-slide.rl-in > *,.rl-bouw img,.rl-bob,.rl-tip,.rl-wijs .sc-placeholder{animation:none}
}