/* Hoofdstuk 1: de stoomboot. Kleuren per spreker, wat er beweegt in de kamer, en de close-ups:
   de stoomketel, de sluis, de hoedendoos, de oorkonde, de Romeinse cijfers, de voerkist en de loopplank. */
.dialog.who-sint{border-left-color:var(--red)} .dialog.who-sint .who{color:#ff8a8f}
.dialog.who-hoofd .who,.dialog.who-piet .who{color:var(--amber)} .dialog.who-hoofd,.dialog.who-piet{border-left-color:var(--amber)}
.dialog.who-paard .who,.dialog.who-koek .who{color:var(--phosphor)} .dialog.who-paard,.dialog.who-koek{border-left-color:var(--phosphor)}
.dialog.who-burg .who,.dialog.who-sluis .who,.dialog.who-mama .who,.dialog.who-papa .who,.dialog.who-oma .who,.dialog.who-sem .who{color:var(--sky)}
.dialog.who-burg,.dialog.who-sluis,.dialog.who-mama,.dialog.who-papa,.dialog.who-oma,.dialog.who-sem{border-left-color:var(--sky)}

/* ---------- wat er beweegt op de stoomboot ---------- */
@keyframes sbDrift{from{transform:translateX(-200px)}to{transform:translateX(1800px)}}
.sb-cloud{animation:sbDrift 90s linear infinite}
.sb-cloud.b{animation-duration:130s;animation-delay:-60s}
@keyframes sbGull{0%{transform:translate(-80px,160px)}50%{transform:translate(800px,90px)}100%{transform:translate(1700px,140px)}}
.sb-gull{animation:sbGull 26s linear infinite}
@keyframes sbMill{to{transform:rotate(360deg)}}
.sb-mill{animation:sbMill 9s linear infinite}
@keyframes sbWave{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.sb-waves path{animation:sbWave 6s linear infinite}
.sb-waves path:nth-child(2){animation-duration:8s}
.sb-waves path:nth-child(3){animation-duration:5s}
.sb-sailing .sb-waves path{animation-duration:2s}
@keyframes sbFront{from{transform:translateX(0)}to{transform:translateX(-200px)}}
.sb-front{animation:sbFront 9s linear infinite}
@keyframes sbBobShip{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
#sb-ship{animation:sbBobShip 4s ease-in-out infinite}
.sb-spin{transform-box:view-box;transform-origin:1000px 690px}
@keyframes sbSpin{to{transform:rotate(-360deg)}}
.sb-sailing .sb-spin{animation:sbSpin 2.6s linear infinite}
@keyframes sbPuff{0%{transform:translate(0,0) scale(.5);opacity:.9}100%{transform:translate(90px,-200px) scale(2.4);opacity:0}}
.sb-puff{transform-box:fill-box;transform-origin:center;animation:sbPuff 3.6s ease-out infinite}
.sb-puff.b{animation-delay:-1.2s} .sb-puff.c{animation-delay:-2.4s}
@keyframes sbSteam{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(20px,-60px) scale(3);opacity:0}}
.sb-steam{transform-box:fill-box;transform-origin:center;animation:sbSteam .9s ease-out infinite}
@keyframes sbPennant{0%,100%{transform:skewY(0)}50%{transform:skewY(8deg)}}
.sb-pennant{transform-box:fill-box;transform-origin:50% 0;animation:sbPennant 2.2s ease-in-out infinite}
@keyframes sbFlag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(4deg) scaleX(.94)}}
.sb-flag,.sb-topflag{transform-box:fill-box;transform-origin:0 50%;animation:sbFlag 1.8s ease-in-out infinite}
@keyframes sbWaveArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
.sb-wave{transform-box:fill-box;transform-origin:0 100%;animation:sbWaveArm .8s ease-in-out infinite}
@keyframes sbHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sb-kid{animation:sbHop 1.1s ease-in-out infinite}
.sb-kid.b{animation-duration:1.4s;animation-delay:-.5s}
@keyframes sbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sb-bob{animation:sbBob 2.4s ease-in-out infinite}
@keyframes sbStamp{0%,80%,100%{transform:translateY(0)}85%{transform:translateY(-6px)}90%{transform:translateY(0)}95%{transform:translateY(-4px)}}
.sb-restless{animation:sbStamp 2.2s ease-in-out infinite}
#sb-horsehead{transform-box:fill-box;transform-origin:80% 90%}
@keyframes sbToss{0%,100%{transform:rotate(0)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}}
.sb-restless #sb-horsehead{animation:sbToss 2.2s ease-in-out infinite}
.sb-fed .sb-restless{animation:none}
@keyframes sbEat{0%,100%{transform:rotate(18deg)}50%{transform:rotate(24deg)}}
.sb-fed .sb-restless #sb-horsehead{animation:sbEat 1.4s ease-in-out infinite}
/* de boot vaart: de oever schuift weg naar rechts en de sluis (en daarna de kade) schuift van links het beeld in */
@keyframes sbOutRight{from{transform:none}to{transform:translateX(1700px)}}
@keyframes sbInLeft{from{transform:translateX(-1000px)}to{transform:none}}
.sb-depart #sb-bg-river,.sb-arrive #sb-bg-lock{display:inline!important;animation:sbOutRight 4.5s ease-in-out forwards}
.sb-depart #sb-bg-lock,.sb-arrive #sb-bg-quay{animation:sbInLeft 4.5s ease-in-out}
.sb-depart .sb-waves path,.sb-arrive .sb-waves path{animation-duration:.8s}
/* de verstopte Saab rijdt over de dijk en verdwijnt achter de boot */
@keyframes sbSaab{0%{transform:translate(-120px,537px)}40%,100%{transform:translate(460px,537px)}}
.sb-saab{transform:translate(340px,537px);animation:sbSaab 16s linear infinite}
@keyframes sbBroem{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-3deg)}}
.sb-saabbody.broem{animation:sbBroem .2s ease-in-out 8}

/* ---------- de stoomketel ---------- */
.ketel{display:flex;flex-direction:column;gap:12px}
.ket-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ketel-svg{width:min(100%,340px);height:auto;background:#1b0f0a;border-radius:8px}
.ket-thermo{display:flex;flex-direction:column;align-items:center;background:#f6ead2;color:#3a1d12;border-radius:10px;padding:10px 16px;min-width:120px}
.ket-thermo b{font-family:var(--f-mono);font-size:28px;color:#c4302b}
.ket-thermo span{font-size:12px}
.ket-card{background:#3a2016;border-left:3px solid var(--amber);padding:10px 12px;border-radius:4px;font-size:14px}
.ket-btns,.sl-btns,.pl-btns,.zk-btns,.wd-btns,.tw-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn.ghost.on{background:rgba(242,182,49,.2)}
@keyframes ketBub{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-80px);opacity:0}}
.ket-bub{animation:ketBub 1.4s ease-in infinite}

/* ---------- de sluis ---------- */
.sluis{display:flex;flex-direction:column;gap:12px}
.sluis-svg{width:100%;height:auto;max-height:240px;background:#8fb0c4;border-radius:8px}
.sl-water{transition:y .8s ease,height .8s ease}
.sl-say{margin:0;font-size:14px;color:var(--paper)}

/* ---------- de hoedendoos, de oorkonde en de Romeinse cijfers ---------- */
.hatbox{background:#9c1d22;border:4px solid var(--amber);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px}
.hb-label{background:#fbf3dc;color:#3a1d12;font-family:var(--f-hand);font-size:24px;line-height:1.15;padding:10px 14px;border-radius:4px;transform:rotate(-1.5deg);max-width:340px}
.hatbox .feedback{color:#fff3d0} .hatbox .feedback.good{color:#c9f2a5} .hatbox .feedback.bad{color:#ffd0c4}
.oorkonde{background:#fbf3dc;color:#3a1d12;text-align:center;padding:18px 16px;border:8px double #b8861f;border-radius:6px;font-family:Georgia,serif;position:relative}
.oorkonde p{margin:6px 0}
.ok-h{font-size:22px;letter-spacing:.3em;color:#7a1a16}
.ok-name{font-family:var(--f-hand);font-size:34px}
.ok-year{font-size:34px;letter-spacing:.12em;color:#7a1a16;font-weight:700}
.ok-small{font-size:13px;font-style:italic}
.ok-seal{position:absolute;right:16px;bottom:10px;width:40px;height:40px;border-radius:50%;background:#c21f2b;color:#f2b631;display:grid;place-items:center;font-size:22px}
.romeins{background:#f9f1dc;color:#3a1d12;padding:16px;border-radius:6px}
.romeins p{margin:10px 0 0}
.rm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.rm-grid div{display:flex;flex-direction:column;align-items:center;background:#fff;border:2px solid #b8861f;border-radius:6px;padding:6px 0}
.rm-grid b{font-family:Georgia,serif;font-size:24px;color:#7a1a16}
.rm-grid span{font-family:var(--f-mono);font-size:13px}
.rm-ex{font-family:var(--f-mono);font-size:14px}
.rm-small{font-size:13px;opacity:.8}
@media (max-width:480px){.rm-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- de voerkist ---------- */
.voer{display:flex;flex-direction:column;gap:12px}
.vr-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vr-it{padding:14px 8px;border-radius:8px;border:2px solid #5a3a1d;background:#a8743f;color:#24120a;font-weight:600}
.vr-it.on{background:var(--phosphor);border-color:#2e6a2e}
.vr-card{font-size:14px;background:#3a2016;padding:8px 12px;border-radius:4px}
.vr-bucket{font-size:14px}
@media (max-width:480px){.vr-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- de loopplank ---------- */
.plank{display:flex;flex-direction:column;gap:12px}
.plank-svg{width:100%;height:auto;max-height:220px;background:#c9d6e0;border-radius:8px}
.pl-card{font-size:14px;background:#3a2016;padding:8px 12px;border-radius:4px}

/* ---------- meer leven op en rond de Maas ---------- */
@keyframes sbReed{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
.sb-reed{transform-box:fill-box;transform-origin:50% 100%;animation:sbReed 3.4s ease-in-out infinite}
.sb-reed.b{animation-duration:4.2s;animation-delay:-1.3s}
@keyframes sbHeron{0%,70%,100%{transform:rotate(0)}78%,90%{transform:rotate(28deg)}}
.sb-heronhead{transform-box:fill-box;transform-origin:0% 100%;animation:sbHeron 7s ease-in-out infinite}
@keyframes sbGlint{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
.sb-glint{transform-box:fill-box;transform-origin:center;opacity:0;animation:sbGlint 4s ease-in-out infinite}
/* de eendjes zwemmen heen en weer langs de kade; met Beweging uit liggen ze stil in het midden */
@keyframes sbDucks{0%{transform:translate(120px,786px) scaleX(1)}46%{transform:translate(330px,792px) scaleX(1)}50%{transform:translate(330px,792px) scaleX(-1)}96%{transform:translate(120px,786px) scaleX(-1)}100%{transform:translate(120px,786px) scaleX(1)}}
.sb-ducks{transform:translate(220px,788px);animation:sbDucks 40s linear infinite}
@keyframes sbDuck{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(-3deg)}}
.sb-duck{animation:sbDuck 1.6s ease-in-out infinite}
.sb-duck.b{animation-delay:-.6s}
/* een vis springt af en toe op: hij bestaat alleen als hij beweegt */
@keyframes sbFish{0%,74%{transform:translate(700px,800px) rotate(0);opacity:0}76%{transform:translate(700px,780px) rotate(-50deg);opacity:1}82%{transform:translate(735px,738px) rotate(0);opacity:1}88%{transform:translate(770px,782px) rotate(50deg);opacity:1}90%,100%{transform:translate(775px,800px) rotate(50deg);opacity:0}}
.sb-fish{opacity:0;transform:translate(-100px,-100px);animation:sbFish 11s ease-in-out infinite}
@keyframes sbBalloon{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3px,-6px) rotate(2deg)}}
.sb-balloon{transform-box:fill-box;transform-origin:50% 100%;animation:sbBalloon 3s ease-in-out infinite}
.sb-balloon.b{animation-duration:3.8s}
@keyframes sbBanner{0%,100%{transform:skewY(0)}50%{transform:skewY(.8deg)}}
.sb-banner{transform-box:fill-box;transform-origin:50% 0;animation:sbBanner 4s ease-in-out infinite}
@keyframes sbLantern{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.sb-lantern{transform-box:fill-box;transform-origin:50% 0;animation:sbLantern 3s ease-in-out infinite}
.sb-lantern rect{animation:flick 5s infinite}
@keyframes sbClimber{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sb-climber{animation:sbClimber 1.8s ease-in-out infinite}

/* ---------- aan wal: Sint loopt over de loopplank naar de kade, Ozosnel loopt achter hem aan over het dek ---------- */
.sb-out #sb-sint{transform:translate(-380px,60px)}
.sb-out #sb-horsewalk{transform:translateX(-760px)}
@keyframes sbAshoreSint{0%{transform:none}35%{transform:translate(-175px,0)}100%{transform:translate(-380px,60px)}}
@keyframes sbAshoreHorse{0%{transform:none}100%{transform:translateX(-760px)}}
.sb-ashore #sb-sint{animation:sbAshoreSint 6s ease-in-out}
.sb-ashore #sb-horsewalk{animation:sbAshoreHorse 6s ease-in-out}
.sb-ashore #sb-horsewalk .hleg{transform-box:fill-box;transform-origin:50% 4%;animation:hlegStep .9s ease-in-out infinite}
/* het bordje naar huis (hoofdstuk 2) klopt zachtjes, zodat je het ziet */
@keyframes sbExit{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.sb-exit-sign{transform-box:fill-box;transform-origin:center;animation:sbExit 1.6s ease-in-out infinite}
.sb-ashore #sb-horsewalk .hleg.b{animation-delay:-.45s}
.sb-ashore #sb-horsehead{animation:none!important}
/* confetti dwarrelt omlaag: hij begint boven het beeld */
@keyframes sbConf{0%{transform:translate(0,-60px) rotate(0)}100%{transform:translate(30px,960px) rotate(540deg)}}
.sb-conf{transform-box:fill-box;transform-origin:center;animation:sbConf 5s linear infinite}

/* ---------- het ruim ---------- */
@keyframes rmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.rm-bob{animation:rmBob 2.6s ease-in-out infinite}
@keyframes rmWave{0%,100%{transform:translateX(0)}50%{transform:translateX(-16px)}}
.rm-wave{animation:rmWave 3.2s ease-in-out infinite}
@keyframes rmLantern{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.rm-lantern{transform-box:view-box;transform-origin:600px 60px;animation:rmLantern 3.6s ease-in-out infinite}
@keyframes rmFish{0%{transform:translateX(30px)}100%{transform:translateX(-40px)}}
.rm-fish{animation:rmFish 6s ease-in-out infinite alternate}
/* drijven of zinken */
.drijf{display:flex;flex-direction:column;gap:12px}
.dr-list{display:flex;flex-direction:column;gap:6px}
.dr-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:rgba(255,255,255,.04);padding:6px 10px;border-radius:6px}
.dr-row span{display:flex;flex-direction:column}
.dr-row small{color:var(--muted)}
.dr-opt.on{background:var(--amber);color:var(--ink)}
.dr-tip{font-size:14px;color:var(--muted);margin:0}
/* het Grote Boek op volgorde */
.bladen{display:flex;flex-direction:column;gap:12px}
.bl-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bl-page{background:#f6ead2;color:#3a1d12;border:2px solid #b9a37a;border-radius:4px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;font-family:var(--f-hand);font-size:22px;cursor:pointer}
.bl-page small{font-size:13px;color:#7a5a3a}
.bl-page:nth-child(odd){transform:rotate(-2deg)}.bl-page:nth-child(even){transform:rotate(2deg)}
.bl-page.in{opacity:.3}
.bl-book{font-family:var(--f-mono);font-size:14px;color:var(--amber);min-height:1.4em}
@media (max-width:520px){.bl-pages{grid-template-columns:repeat(2,minmax(0,1fr))}.dr-row{grid-template-columns:1fr}}
/* grapjes: ballonnen knallen, de meeuw schrikt, de eendjes duiken, het visje schiet weg */
@keyframes sbPop{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
.sb-balloon.pop{opacity:0;animation:sbPop .22s ease-out}
@keyframes sbGrow{0%{transform:scale(0)}100%{transform:scale(1)}}
.sb-balloon.grow{animation:sbGrow .9s ease-out}
@keyframes sbScared{0%{transform:none;opacity:1}15%{transform:translate(220px,-260px) rotate(-25deg);opacity:1}16%,90%{transform:translate(220px,-260px);opacity:0}100%{transform:none;opacity:1}}
.sb-gullbody.scared{animation:sbScared 9s ease-in forwards}
@keyframes sbDive{0%,100%{transform:none;opacity:1}20%,70%{transform:translateY(14px);opacity:.15}}
.sb-duckdive.dive{animation:sbDive 2.6s ease-in-out}
@keyframes rmFlee{0%{transform:none;opacity:1}12%{transform:translate(-90px,20px);opacity:0}90%{transform:translate(-90px,20px);opacity:0}100%{transform:none;opacity:1}}
.rm-fishbody.flee{animation:rmFlee 6s ease-in forwards}
/* meer grapjes: de molen draait door, de reiger schrikt, de hangmat schommelt */
.sb-mill.fast{animation-duration:.5s}
@keyframes sbHop{0%,40%,80%,100%{transform:none}20%,60%{transform:translateY(-10px)}}
.sb-sheep.hop{animation:sbHop 1.2s ease-out}
@keyframes sbShock{0%,100%{transform:none}20%,70%{transform:translateY(-18px) rotate(-12deg)}}
.sb-heronhead.shock{animation:sbShock 1.8s ease-out}
@keyframes rmHammock{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}
#rm-hammock.swing{transform-box:view-box;transform-origin:310px 230px;animation:rmHammock 1s ease-in-out 3}