/* Wereld: nachtje (Babyopvang) */
body:has(.d-world-nachtje) { --t-blue: #DDE3F6; --t-orange: #F6E2EC; --t-green: #E6E1F5; --t-yellow: #FFF3D2; }
body:has(.d-world-nachtje) .d-section.has-vlak-groen-background-color,
body:has(.d-world-nachtje) .d-section.has-vlak-blauw-background-color { background: #ECE8F8 !important; }
.d-world-nachtje { background: radial-gradient(circle at 82% 70%, #F6F1FF 0, transparent 45%), linear-gradient(180deg, #D9DDF4, #EEEAFA 70%, #F7F4FC) !important; }
.d-world-nachtje .d-play-title mark { color: #6B57B0 !important; }
body:has(.d-world-nachtje) main .d-section { position: relative; }
body:has(.d-world-nachtje) 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 90 24'%3E %3Cpath d='M14.0 3.0 L16.4 8.8 L22.6 9.2 L17.8 13.2 L19.3 19.3 L14.0 16.0 L8.7 19.3 L10.2 13.2 L5.4 9.2 L11.6 8.8 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='1.8' stroke-linejoin='round'/%3E %3Ccircle cx='36' cy='8' r='2.2' fill='%23B9A7E0'/%3E%3Ccircle cx='44' cy='17' r='1.6' fill='%238EAAD5'/%3E %3Cpath d='M62.0 7.0 L63.5 10.9 L67.7 11.1 L64.5 13.8 L65.5 17.9 L62.0 15.6 L58.5 17.9 L59.5 13.8 L56.3 11.1 L60.5 10.9 Z' fill='%23D8CCF2' stroke='%231E2B45' stroke-width='1.5' stroke-linejoin='round'/%3E %3Ccircle cx='80' cy='7' r='1.8' fill='%23FFC94D'/%3E%3Ccircle cx='84' cy='18' r='2.2' fill='%23B9A7E0'/%3E %3C/svg%3E") left center / 90px 24px repeat-x; z-index: 2; pointer-events: none; }

.d-scene-nachtje { position: absolute !important; inset: 0; height: auto !important; }
.d-nachtje-maan { width: 230px; height: 230px; right: 3%; bottom: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E %3Cpath d='M120 30 C 60 34 30 90 44 140 C 58 188 116 210 160 190 C 112 186 80 150 82 108 C 84 70 104 42 120 30 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='70' cy='150' r='6' fill='%23F2B33A' opacity='.6'/%3E%3Ccircle cx='60' cy='96' r='4' fill='%23F2B33A' opacity='.6'/%3E %3Cpath d='M70 124 Q 78 130 86 124' stroke='%231E2B45' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3Cpath d='M74 146 Q 80 152 88 147' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='66' cy='136' r='6' fill='%23F49AB4' opacity='.65'/%3E %3Cpath d='M60 72 C 74 40 116 22 136 34 C 156 46 170 74 184 92 C 160 86 128 70 106 76 C 88 80 74 80 60 72 Z' fill='%23B9A7E0' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M56 70 C 74 84 100 82 112 74' stroke='%231E2B45' stroke-width='9' stroke-linecap='round' fill='none'/%3E %3Cpath d='M56 70 C 74 84 100 82 112 74' stroke='%23FFF6E6' stroke-width='5' stroke-linecap='round' fill='none'/%3E %3Cpath d='M118 46 L 126 58 M144 56 L 150 70' stroke='%23FFF6E6' stroke-width='3' stroke-linecap='round'/%3E %3Ccircle cx='188' cy='96' r='11' fill='%23FFF6E6' stroke='%231E2B45' stroke-width='3'/%3E %3C/svg%3E") !important; transform-origin: 50% 0; }
.d-nachtje-mobiel { width: 170px; height: 180px; left: 55%; top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 190'%3E %3Cpath d='M90 0 V 30' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M20 34 Q 90 22 160 34' stroke='%231E2B45' stroke-width='5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='90' cy='30' r='5' fill='%23B9A7E0' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M24 34 V 96 M90 30 V 128 M156 34 V 92' stroke='%231E2B45' stroke-width='1.8'/%3E %3Cpath d='M8 112 C 6 98 20 92 28 98 C 34 86 54 90 54 104 C 64 106 62 122 50 122 H 14 C 4 122 2 114 8 112 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Cpath d='M90.0 126.0 L96.5 141.1 L112.8 142.6 L100.5 153.4 L104.1 169.4 L90.0 161.0 L75.9 169.4 L79.5 153.4 L67.2 142.6 L83.5 141.1 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Ccircle cx='84' cy='148' r='2' fill='%231E2B45'/%3E%3Ccircle cx='96' cy='148' r='2' fill='%231E2B45'/%3E%3Cpath d='M86 155 Q 90 158 94 155' stroke='%231E2B45' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E %3Cpath d='M156 128 C 140 116 138 100 148 96 C 153 94 156 98 156 102 C 156 98 159 94 164 96 C 174 100 172 116 156 128 Z' fill='%23F49AB4' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3C/svg%3E") !important; transform-origin: 50% 0; }
.d-nachtje-ster-1, .d-nachtje-ster-2, .d-nachtje-ster-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20.0 4.0 L24.4 14.9 L36.2 15.7 L27.1 23.3 L30.0 34.8 L20.0 28.5 L10.0 34.8 L12.9 23.3 L3.8 15.7 L15.6 14.9 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.d-nachtje-ster-1 { width: 34px; height: 34px; right: calc(3% + 250px); bottom: 170px; }
.d-nachtje-ster-2 { width: 24px; height: 24px; right: calc(3% + 30px); bottom: 250px; }
.d-nachtje-ster-3 { width: 28px; height: 28px; left: 46%; top: 24%; }
.d-nachtje-stip-1 { width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 C 11 8 12 9 19 10 C 12 11 11 12 10 19 C 9 12 8 11 1 10 C 8 9 9 8 10 1 Z' fill='%23fff' stroke='%23B9A7E0' stroke-width='1.5'/%3E%3C/svg%3E") !important; }
.d-nachtje-stip-1 { left: 4%; top: 12%; }
.d-nachtje-wolk { width: 120px; height: 60px; left: 30%; bottom: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M18 52 C 4 52 2 36 16 32 C 14 16 36 10 46 22 C 54 6 82 8 84 26 C 100 22 114 34 104 48 C 102 52 98 52 96 52 Z' fill='%23fff' stroke='%23D8CCF2' stroke-width='3' stroke-linejoin='round' opacity='.95'/%3E%3C/svg%3E") !important; opacity: .85; }
.d-peek-nachtje::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E %3Cpath d='M40.0 4.0 L49.4 27.1 L74.2 28.9 L55.2 44.9 L61.2 69.1 L40.0 56.0 L18.8 69.1 L24.8 44.9 L5.8 28.9 L30.6 27.1 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='33' cy='40' r='3.5' fill='%231E2B45'/%3E%3Ccircle cx='47' cy='40' r='3.5' fill='%231E2B45'/%3E%3Ccircle cx='34.2' cy='38.8' r='1.2' fill='%23fff'/%3E%3Ccircle cx='48.2' cy='38.8' r='1.2' fill='%23fff'/%3E %3Cpath d='M35 48 Q 40 52 45 48' stroke='%231E2B45' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='28' cy='47' r='3.5' fill='%23F49AB4' opacity='.65'/%3E%3Ccircle cx='52' cy='47' r='3.5' fill='%23F49AB4' opacity='.65'/%3E %3C/svg%3E"); width: 72px; height: 64px; top: -56px; left: 14%; }

/* Animaties: maantje schommelt zacht, mobieltje zwaait, sterren twinkelen, wolkje drijft */
.d-nachtje-maan { animation: d-nachtje-in 1.2s cubic-bezier(.3,1.3,.5,1) .2s both, d-nachtje-schommel 6s ease-in-out 1.4s infinite; }
@keyframes d-nachtje-in { from { transform: translateY(60px) rotate(-12deg); opacity: 0; } }
@keyframes d-nachtje-schommel { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-4px); } }
.d-nachtje-mobiel { animation: d-nachtje-zwaai 5s ease-in-out infinite; }
@keyframes d-nachtje-zwaai { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.d-nachtje-ster-1, .d-nachtje-ster-2, .d-nachtje-ster-3, .d-nachtje-stip-1 { animation: d-nachtje-twinkel 2.8s ease-in-out infinite; }
.d-nachtje-ster-2 { animation-delay: -.9s; } .d-nachtje-ster-3 { animation-delay: -1.7s; } .d-nachtje-stip-1 { animation-delay: -.4s; }
@keyframes d-nachtje-twinkel { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.65) rotate(18deg); opacity: .55; } }
.d-nachtje-wolk { animation: d-nachtje-drijf 16s ease-in-out infinite alternate; }
@keyframes d-nachtje-drijf { to { transform: translateX(80px); } }
@media (prefers-reduced-motion: reduce) { .d-scene-nachtje > * { animation: none !important; } }

@media (max-width: 781px) {
	.d-nachtje-maan { width: 130px; height: 130px; right: 2%; bottom: 4px; }
	.d-nachtje-mobiel { width: 96px; height: 102px; left: auto; right: 4%; }
	.d-nachtje-ster-1 { right: calc(2% + 140px); bottom: 100px; }
	.d-nachtje-ster-3, .d-nachtje-wolk { display: none; }
	.d-peek-nachtje::before { width: 56px; height: 50px; top: -44px; }
}
