.dorp3d{width:100vw;height:max(420px, calc(100dvh - var(--dorp3d-boven,64px)));touch-action:pan-y;user-select:none;background:linear-gradient(#7cb8f5,#dff0fb);margin-inline:calc(50% - 50vw);position:relative;overflow:hidden}.dorp3d>canvas{cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.dorp3d__plekken{pointer-events:none;position:absolute;inset:0}.dorp3d__plekken>*{pointer-events:auto;will-change:transform;position:absolute;top:0;left:0}.dorp3d__plekken>.is-weg{visibility:hidden}.dorp3d__plek{border:3px solid var(--inkt);border-radius:var(--radius-rond);color:#1f2a44;font:700 18px/1.2 var(--font-display);white-space:nowrap;cursor:pointer;background:#fff;align-items:center;gap:6px;padding:6px 14px;text-decoration:none;display:inline-flex;box-shadow:0 3px #1f2a4440}.dorp3d__plek:hover,.dorp3d__plek:focus-visible{background:var(--zon);outline:none}.dorp3d__plek--buur{border-width:2px;padding:3px 10px;font-size:15px}.dorp3d__plek.is-nieuw{animation:1.6s ease-in-out infinite dorp3d-gloed}@keyframes dorp3d-gloed{50%{box-shadow:0 0 0 6px #ffc93c99}}.dorp3d__sterren{border-radius:var(--radius-rond);background:var(--zon);color:#1f2a44;padding:1px 8px;font-size:.85em}.dorp3d:fullscreen{height:100%;margin:0}body:has(.dorp.is-3d){overflow-x:clip}.dorp3d__raam{aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:10px;width:clamp(40px,7vw,72px);padding:0}.dorp3d__raam--deur{aspect-ratio:.6}.dorp3d__raam:hover,.dorp3d__raam:focus-visible{outline:4px solid var(--zon);outline-offset:2px}.dorp3d__wolkje{transform-origin:50%;width:clamp(80px,12vw,130px);display:block}.dorp3d__wolkje .zorgteken{font-size:18px;top:-10%;right:-14%}.dorp3d__wolkje[data-weg] .wolkje{opacity:0}.dorp3d__wolkje:focus-visible{outline:4px solid var(--zon);border-radius:40%}.dorp3d__paneel{inset:auto var(--ruimte-2) var(--ruimte-2);max-height:calc(100% - 2 * var(--ruimte-2));padding:var(--ruimte-2);border:3px solid var(--inkt);border-radius:var(--radius-wolk);background:var(--oppervlak);animation:.22s ease-out dorp3d-op;position:absolute;overflow-y:auto;box-shadow:0 8px 24px #00000040}@keyframes dorp3d-op{0%{opacity:0;transform:translateY(24px)}}.dorp3d__paneel-kop{align-items:center;gap:var(--ruimte-2);margin-bottom:var(--ruimte-2);display:flex}.dorp3d__paneel-kop img{border-radius:50%}.dorp3d__paneel-kop h2{flex:1;margin:0}.dorp3d__sluit{background:var(--lucht);width:48px;height:48px;color:var(--inkt);cursor:pointer;border:0;border-radius:50%;font-size:22px}.dorp3d__spellen{gap:var(--ruimte-2);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:0;padding:0;list-style:none;display:grid}.dorp3d__spellen a{height:100%;padding:var(--ruimte-1);border-radius:var(--radius-klein);background:var(--lucht);color:var(--inkt);text-align:center;flex-direction:column;align-items:center;gap:4px;text-decoration:none;display:flex}.dorp3d__spellen a:hover,.dorp3d__spellen a:focus-visible{outline:4px solid var(--zon)}.dorp3d__spellen img{object-fit:contain;width:80px;height:80px}.dorp3d__spel-naam{font:700 17px/1.2 var(--font-display)}.dorp.is-3d .tegels,.dorp.is-3d .hemel,.dorp.is-3d #wachter-zegt{display:none}.dorp.is-3d #dorpsnaam{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.dorp3d__boven,.dorp3d__onder{justify-content:space-between;align-items:flex-start;gap:var(--ruimte-2);padding:var(--ruimte-2);pointer-events:none;display:flex;position:absolute;inset-inline:0}.dorp3d__boven{top:0}.dorp3d__onder{align-items:flex-end;padding-right:96px;bottom:0}.dorp3d__boven>*,.dorp3d__onder>*{pointer-events:auto}.dorp3d__onder .weer-label{border-radius:var(--radius-rond);color:#1f2a44;background:#fffc;margin:0 0 0 auto;padding:2px 10px;font-size:13px}.dorp3d__rond{border:3px solid var(--inkt);color:#1f2a44;cursor:pointer;background:#fff;border-radius:50%;flex:none;width:52px;height:52px;font-size:24px}.dorp3d__volscherm{margin-left:auto}.dorp3d__zegt,.dorp3d__opdracht{align-items:center;gap:var(--ruimte-2);border:3px solid var(--inkt);border-radius:var(--radius-wolk);color:#1f2a44;background:#fff;max-width:min(560px,100%);margin:0;padding:8px 12px;display:flex;box-shadow:0 4px #1f2a4440}.dorp3d__zegt img,.dorp3d__opdracht>img{border-radius:50%;flex:none}.dorp3d__opdracht-zin{font:700 clamp(16px, 2.4vw, 22px) / 1.25 var(--font-display);margin:0}.dorp3d__opdracht.is-klaar .dorp3d__opdracht-zin{font-weight:600}.dorp3d__stappen{gap:6px;margin:6px 0 0;padding:0;list-style:none;display:flex}.dorp3d__stappen li{border:2px solid var(--inkt);border-radius:50%;width:16px;height:16px}.dorp3d__stappen .is-klaar{background:var(--zon)}.dorp3d__stappen .is-nu{box-shadow:0 0 0 3px var(--zon);background:#fff}.dorp3d__luister.is-nieuw{animation:1.6s ease-in-out infinite dorp3d-gloed}.dorp3d__rugzak{flex:none;align-items:center;gap:6px;display:flex}.dorp3d__rugzak:not(:empty){border:3px solid var(--inkt);border-radius:var(--radius-rond);background:#fff6e0;padding:6px 12px}.dorp3d__rugzak-woord{font-size:28px}.dorp3d__rugzak img{object-fit:contain;animation:.3s ease-out dorp3d-op}.dorp3d__ding{cursor:pointer;background:0 0;border:0;padding:0}.dorp3d__ding,.dorp3d__rugzak img{mix-blend-mode:multiply}.dorp3d__ding img{width:clamp(48px,7vw,72px);height:auto;animation:1.4s ease-in-out infinite dorp3d-wip;display:block}.dorp3d__ding:focus-visible{outline:4px solid var(--zon);border-radius:50%}@keyframes dorp3d-wip{50%{transform:translateY(-8px)rotate(-6deg)}}.dorp3d__plekken>.is-doel{outline:5px solid var(--zon);outline-offset:3px;animation:1.2s ease-in-out infinite dorp3d-gloed}.dorp3d__plekken>.is-doel:before{content:"⬇";color:#1f2a44;text-shadow:0 0 4px #fff,0 0 8px #fff;pointer-events:none;font-size:34px;line-height:1;animation:.9s ease-in-out infinite dorp3d-wip;position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50%}.dorp3d__klaar{width:min(420px, calc(100% - 2 * var(--ruimte-2)));padding:var(--ruimte-3,24px);border:3px solid var(--inkt);border-radius:var(--radius-wolk);background:var(--oppervlak);text-align:center;animation:.26s ease-out dorp3d-op;position:absolute;inset:50% auto auto 50%;translate:-50% -50%;box-shadow:0 8px 24px #00000040}.dorp3d__klaar img{width:160px;height:auto}@media (width<=600px){.dorp3d__opdracht>img{width:48px;height:48px}.dorp3d__plek{padding:4px 10px;font-size:15px}}