/* Hoofdstuk 4: pakjesavond. Wat er beweegt, en de close-ups: de zak, de namen, het gedicht, de surprise en de
   speurtocht. */
@keyframes paPennant{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
.pa-pennant{transform-box:fill-box;transform-origin:50% 0;animation:paPennant 2.4s ease-in-out infinite}
@keyframes paBonk{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pa-bonk{animation:paBonk .2s linear infinite}
@keyframes paHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pa-hop{animation:paHop .9s ease-in-out infinite}
@keyframes paArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-30deg)}}
.pa-arm{transform-box:fill-box;transform-origin:0 100%;animation:paArm .7s ease-in-out infinite}
.pa-arm.b{animation-delay:-.3s}

/* ---------- de zak ---------- */
.zak4 p{margin:0 0 10px;font-size:14px}

/* ---------- van wie is welk pakje ---------- */
.nm-clues{margin:0 0 12px;padding:10px 12px 10px 30px;background:#fffaf0;color:#2b2118;border-radius:4px;font-family:var(--f-hand);font-size:21px;line-height:1.2}
.nm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.nm-row{display:flex;align-items:center;gap:8px;background:#3a2016;border-radius:8px;padding:8px;flex-wrap:wrap}
.nm-row b{font-size:13px;flex:1 1 90px}
.nm-row select{font:inherit;font-size:14px;padding:6px;border-radius:4px;background:#fffaf0;color:#2b2118;border:1px solid var(--line);max-width:100%}
.nm-pic{display:block;width:30px;height:30px;flex:0 0 auto}
.nm-rond{border-radius:50%;background:#c21f2b} .nm-plat{height:10px;background:#1f4fa8} .nm-lang{width:8px;height:34px;background:#4f9a4a} .nm-zacht{border-radius:50% 50% 40% 40%;background:#c73f6d;height:20px} .nm-klein{width:16px;height:16px;border-radius:3px;background:#f2b631;box-shadow:inset 0 0 0 2px #c21f2b}
@media (max-width:480px){.nm-grid{grid-template-columns:1fr}}

/* ---------- het gedicht ---------- */
.gd-paper{position:relative;background:#fffaf0;color:#2b2118;font-family:var(--f-hand);font-size:clamp(20px,3.6vw,25px);line-height:1.25;padding:16px 18px;border-radius:4px;transform:rotate(-.6deg);overflow:hidden}
.gd-paper p{margin:0 0 .3em}
.gd-gap{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.gd-opt{font-family:var(--f-hand);font-size:.85em;padding:0 8px;border-radius:12px;border:2px dashed #b8861f;background:#fff3d6;color:#2b2118}
.gd-opt.on{border-style:solid;background:var(--amber)}
.gd-sig{text-align:right;font-size:.9em}
.gd-stain{position:absolute;right:20px;top:14px;width:70px;height:50px;border-radius:50%;background:rgba(122,74,38,.25);pointer-events:none}
.gd-tip{font-size:14px;margin:10px 0}

/* ---------- de surprise (bouwplaten) ---------- */
.netten p{margin:0 0 10px;font-size:14px}
.nt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.nt-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:8px;border:2px solid var(--line);background:#3a2016}
.nt-card.on{border-color:var(--phosphor);background:#2e5a3a}
.nt-svg{width:100%;max-width:100px;height:auto}
.nt-card b{font-family:var(--f-mono)}
.nt-tip{color:var(--muted)}
@media (max-width:480px){.nt-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- de speurtocht ---------- */
.sp-note{background:#fffaf0;color:#2b2118;font-family:var(--f-hand);font-size:clamp(19px,3.4vw,23px);line-height:1.2;padding:12px 14px;border-radius:4px;margin-bottom:12px;transform:rotate(-.8deg)}
.sp-plan{display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto 20px;gap:4px;width:min(100%,380px);margin:0 auto}
.sp-rows{display:grid;grid-template-rows:repeat(5,1fr);font-family:var(--f-mono);font-size:12px;align-items:center;text-align:center}
.sp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:#5a3418;padding:2px;border-radius:4px}
.sp-cols{grid-column:1 / -1;display:grid;grid-template-columns:20px repeat(6,1fr);gap:2px;font-family:var(--f-mono);font-size:12px;text-align:center}
.sp-c{aspect-ratio:1.3;border:0;background:#c99a62;border-radius:2px;padding:0;position:relative}
.sp-c:hover{outline:2px solid var(--amber)}
.sp-c.miss{background:#a8744a}
.sp-c.found{background:var(--amber)}
.sp-c::after{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(16px,4vw,22px)}
.sp-kachel::after{content:"🔥"} .sp-deur::after{content:"🚪"} .sp-bank::after{content:"🛋"} .sp-raam::after{content:"🪟"} .sp-kast::after{content:"📚"}
.sp-c.found::after{content:"🎁"}
.sp-tip{font-size:14px;margin:10px 0 0}

/* ---------- meer leven op pakjesavond ---------- */
.pa-lamp{transform-origin:300px 30px}
@keyframes paPendulum{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
.pa-pendulum{transform-box:view-box;transform-origin:1021px 230px;animation:paPendulum 2s ease-in-out infinite}
/* het sneeuwt op 5 december */
@keyframes paFlake{from{transform:translate(0,-80px)}to{transform:translate(14px,200px)}}
.pa-flake{animation:paFlake 7s linear infinite}
.pa-flake.b{animation-duration:9s}
/* Oma's breinaalden tikken tegen elkaar */
@keyframes paKnit{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
#pa-oma .knit{transform-box:fill-box;transform-origin:50% 100%;animation:paKnit .5s ease-in-out infinite}
#pa-oma .knit.b{animation-direction:reverse}
/* de cadeaus wiebelen een beetje, van opwinding */
@keyframes paWiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}
.pa-wiggle > :not([transform]){transform-box:fill-box;transform-origin:50% 100%;animation:paWiggle 4s ease-in-out infinite}
.pa-wiggle > :not([transform]):nth-child(2n){animation-delay:-1.3s}
/* pepernoten vliegen door de deur naar binnen als er gebonsd wordt (ze bestaan alleen als ze bewegen) */
@keyframes paThrow{0%{transform:translate(222px,430px);opacity:1}100%{transform:translate(var(--tx),var(--ty));opacity:1}}
.pa-throw{opacity:0}
.pa-strooi .pa-throw{animation:paThrow .9s cubic-bezier(.2,.6,.4,1) both}
/* de kamerdeur gaat even op een kier: hij draait om zijn scharnier links */
@keyframes paDoor{0%,100%{transform:none}12%,80%{transform:scaleX(.78)}}
#pa-door{transform-box:view-box;transform-origin:66px 443px}
.pa-strooi #pa-door{animation:paDoor 2.6s ease-in-out}
@keyframes paConf{0%{transform:translate(0,-60px) rotate(0)}100%{transform:translate(30px,960px) rotate(540deg)}}
.pa-conf{transform-box:fill-box;transform-origin:center;animation:paConf 5s linear infinite}

/* ---------- de gang en de extra puzzels ---------- */
/* eerlijk delen */
.delen4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:center}
.dl-pile{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px;background:rgba(255,255,255,.04);border-radius:8px}
.dl-pile i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c98a4a,#7a4a1a)}
.dl-side{display:flex;flex-direction:column;gap:8px}
.dl-side p{margin:0}
.dl-row{display:grid;grid-template-columns:1fr 90px 1fr;gap:8px;align-items:center}
.dl-row input{font-family:var(--f-mono);font-size:18px;padding:4px 8px;width:100%}
.dl-row small{color:var(--muted)}
/* lootjes */
.lootjes4{display:flex;flex-direction:column;gap:10px}
.lt-note{background:#fbf3dc;color:#3a1d12;font-family:var(--f-hand);font-size:21px;line-height:1.25;padding:10px 14px;border-radius:4px;margin:0;transform:rotate(-.8deg)}
.lt-clues{margin:0;padding-left:22px;font-size:15px}
.lt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.lt-row{display:grid;grid-template-columns:auto auto 1fr;gap:6px;align-items:center;background:rgba(255,255,255,.04);padding:6px 8px;border-radius:6px}
.lt-row span{color:var(--muted);font-size:13px}
@media (max-width:620px){.delen4{grid-template-columns:1fr}}
/* grapjes: kaarsen uitblazen, de krantenmijter valt van de kapstok */
#pa-c1.out,#pa-c2.out,#pa-g1.out,#pa-g2.out{opacity:0;animation:none}
@keyframes gaFall{0%{transform:none}18%,85%{transform:translate(-20px,440px) rotate(-160deg)}100%{transform:none}}
#ga-mitre.fall{transform-box:view-box;transform-origin:860px 236px;animation:gaFall 5s ease-in forwards}
/* meer grapjes: het spandoek laat links los, valt naar beneden en bungelt aan de punaise rechts */
@keyframes paDroop{0%,100%{transform:rotate(0)}6%{transform:rotate(-3deg)}22%{transform:rotate(-80deg)}32%{transform:rotate(-64deg)}42%{transform:rotate(-76deg)}52%{transform:rotate(-69deg)}60%,86%{transform:rotate(-72deg)}}
.pa-banner.droop{transform-box:view-box;transform-origin:1516px 64px;animation:paDroop 5s ease-in}
/* de Saab rijdt een stukje heen en weer: broem broem */
@keyframes paBroem{0%,100%{transform:translateX(0)}10%{transform:translateX(-4px) rotate(-1deg)}45%{transform:translateX(-70px)}55%{transform:translateX(-70px) rotate(1deg)}90%{transform:translateX(0)}}
#pa-saab.broem{animation:paBroem 2.4s ease-in-out}