/* Wereld SLOTJE (privacy): rustig slotje met schildje */
body:has(.d-world-slotje) { --t-orange: #FCE6D6; --t-blue: #E0E9F6; --t-green: #E5EEDD; --t-yellow: #FFF3D2; }
body:has(.d-world-slotje) .d-section.has-vlak-groen-background-color,
body:has(.d-world-slotje) .d-section.has-vlak-blauw-background-color { background: #EEF3FA !important; }
.d-world-slotje { background: linear-gradient(180deg, #E3ECF8 0%, #F6F9FD 100%) !important; }
.d-world-slotje .d-play-title mark { color: #4A6FA8 !important; }
body:has(.d-world-slotje) main .d-section { position: relative; }
body:has(.d-world-slotje) main .d-section + .d-section::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E %3Cpath d='M16 5 L 24 8 V 13 C 24 17 20 20 16 21 C 12 20 8 17 8 13 V 8 Z' fill='%238EAAD5' stroke='%231E2B45' stroke-width='1.6' stroke-linejoin='round'/%3E %3Ccircle cx='36' cy='13' r='1.8' fill='%238EAAD5'/%3E%3Ccircle cx='46' cy='13' r='1.8' fill='%238EAAD5'/%3E%3Ccircle cx='56' cy='13' r='1.8' fill='%238EAAD5'/%3E%3C/svg%3E") left center / 64px 24px repeat-x; z-index: 2; pointer-events: none; opacity: .8; }

.d-scene-slotje { position: absolute !important; inset: 0; height: auto !important; }
.d-slotje-schild { width: 120px; height: 139px; right: calc(3% + 118px); bottom: 7%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E %3Cpath d='M50 4 L 92 18 V 52 C 92 82 72 102 50 112 C 28 102 8 82 8 52 V 18 Z' fill='%23729A47' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M50 16 L 80 26 V 52 C 80 74 66 90 50 98 Z' fill='%23fff' opacity='.25'/%3E %3Cpath d='M32 56 L 45 69 L 70 42' stroke='%23fff' stroke-width='8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; z-index: 1; }
.d-slotje-beugel { width: 100px; height: 90px; right: calc(3% + 20px); bottom: calc(7% + 86px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E %3Cpath d='M20 90 V 44 C 20 16 80 16 80 44 V 90' stroke='%231E2B45' stroke-width='18' fill='none' stroke-linecap='round'/%3E %3Cpath d='M20 90 V 44 C 20 16 80 16 80 44 V 90' stroke='%238EAAD5' stroke-width='11' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; z-index: 2; }
.d-slotje-hoofd { width: 140px; height: 120px; right: 3%; bottom: 7%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E %3Crect x='6' y='6' width='128' height='108' rx='22' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M18 22 H 122' stroke='%23fff' stroke-width='4' stroke-linecap='round' opacity='.5'/%3E %3Ccircle cx='48' cy='52' r='6' fill='%231E2B45'/%3E%3Ccircle cx='92' cy='52' r='6' fill='%231E2B45'/%3E %3Ccircle cx='50.2' cy='49.8' r='2' fill='%23fff'/%3E%3Ccircle cx='94.2' cy='49.8' r='2' fill='%23fff'/%3E %3Cpath d='M60 66 Q 70 75 80 66' stroke='%231E2B45' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='36' cy='66' r='6.5' fill='%23F49AB4' opacity='.6'/%3E%3Ccircle cx='104' cy='66' r='6.5' fill='%23F49AB4' opacity='.6'/%3E %3Ccircle cx='70' cy='90' r='7' fill='%231E2B45'/%3E%3Cpath d='M67 92 H 73 L 72 102 H 68 Z' fill='%231E2B45'/%3E%3C/svg%3E") !important; z-index: 3; }
.d-slotje-glim { width: 22px; height: 22px; right: calc(3% + 128px); bottom: calc(7% + 132px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L 23 17 L 38 20 L 23 23 L 20 38 L 17 23 L 2 20 L 17 17 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important; z-index: 4; }

.d-slotje-hoofd { animation: d-slotje-in .9s ease-out .1s both, d-slotje-adem 5s ease-in-out 1.6s infinite; }
@keyframes d-slotje-in { from { opacity: 0; translate: 0 16px; } }
@keyframes d-slotje-adem { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.d-slotje-beugel { animation: d-slotje-in .9s ease-out .1s both, d-slotje-klik .5s cubic-bezier(.5,0,.6,1.4) 1.1s both, d-slotje-adem 5s ease-in-out 1.6s infinite; }
@keyframes d-slotje-klik { from { transform: translateY(-22px); } to { transform: translateY(0); } }
.d-slotje-schild { animation: d-slotje-in 1s ease-out .5s both, d-slotje-gloed 4s ease-in-out 1.6s infinite; }
@keyframes d-slotje-gloed { 0%, 100% { filter: drop-shadow(0 0 0 rgba(114,154,71,0)); } 50% { filter: drop-shadow(0 0 10px rgba(114,154,71,.55)); } }
.d-slotje-glim { animation: d-slotje-glim 5s ease-in-out 1.6s infinite; }
@keyframes d-slotje-glim { 0%, 70%, 100% { transform: scale(0); opacity: 0; } 80% { transform: scale(1) rotate(45deg); opacity: 1; } 90% { transform: scale(0) rotate(90deg); opacity: 0; } }

@media (max-width: 781px) {
	.d-slotje-schild, .d-slotje-glim { display: none; }
	.d-scene-slotje .d-slotje-hoofd { width: 70px; height: 60px; right: 4%; bottom: 3%; }
	.d-scene-slotje .d-slotje-beugel { width: 50px; height: 45px; right: calc(4% + 10px); bottom: calc(3% + 43px); }
}
@media (prefers-reduced-motion: reduce) {
	.d-scene-slotje > * { animation: none !important; }
}