/* Progio – scènes (SVG + CSS-animaties). Geladen door het spel én door de statische pagina's. */
/* ===== Kampscène (SVG + animaties) ===== */
.pg-scene { width: 100%; border-radius: var(--pg-radius); overflow: hidden; box-shadow: var(--pg-shadow); background: #BFE6FF; line-height: 0; }
.pg-scene__svg { width: 100%; height: auto; display: block; aspect-ratio: 720 / 300; }
.pg-scene__bo-inner { width: 110px; height: 110px; animation: pg-float 2.6s ease-in-out infinite; }
.pg-scene__bo-inner .pg-bo { display: block; }
.pg-world-scene { margin: .2rem 0 1.2rem; }
.pg-world-scene__caption { margin: .5rem 0 0; font-weight: 700; color: var(--pg-ink-soft); }
.pg-sun__rays { animation: pg-spin 40s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pg-cloud { animation: pg-drift 26s linear infinite; }
.pg-cloud--2 { animation-duration: 38s; animation-delay: -12s; }
.pg-smoke { animation: pg-smoke 4s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.pg-wave { animation: pg-wave 3s linear infinite; }
.pg-palm { animation: pg-sway 4s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.pg-flame { animation: pg-flicker .7s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
.pg-spark { animation: pg-spark 1.6s ease-out infinite; }
.pg-spark--2 { animation-delay: .7s; }
.pg-wheel { animation: pg-spin 6s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.pg-boat { animation: pg-bob 3s ease-in-out infinite; }
.pg-flag { animation: pg-flagwave 1.2s ease-in-out infinite alternate; transform-origin: 0 50%; transform-box: fill-box; }
.pg-sprout { animation: pg-sway 3s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.pg-scene__item--new { animation: pg-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.pg-confetti { animation: pg-fall 2.4s linear infinite; animation-delay: var(--d, 0s); transform: translate(var(--x), -20px); }
@keyframes pg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-drift { from { transform: translate(-120px, var(--cy, 50px)); } to { transform: translate(820px, var(--cy, 50px)); } }
@keyframes pg-smoke { 0% { transform: translateY(0) scale(.8); opacity: 1; } 100% { transform: translateY(-40px) scale(1.3); opacity: 0; } }
@keyframes pg-wave { from { transform: translateX(0); } to { transform: translateX(-80px); } }
@keyframes pg-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pg-flicker { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.12) scaleX(.94); } }
@keyframes pg-spark { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes pg-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes pg-flagwave { from { transform: skewY(-6deg); } to { transform: skewY(6deg); } }
@keyframes pg-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pg-fall { 0% { transform: translate(var(--x), -20px) rotate(0); opacity: 1; } 100% { transform: translate(calc(var(--x) + 30px), 300px) rotate(360deg); opacity: .2; } }
@keyframes pg-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(47, 181, 165, .6); } 100% { box-shadow: 0 0 0 14px rgba(47, 181, 165, 0); } }


.pg-glow { animation: pg-glow 1.6s ease-in-out infinite alternate; }
@keyframes pg-glow { from { opacity: .6; } to { opacity: 1; } }
.pg-hook { animation: pg-hook 3s ease-in-out infinite alternate; }
@keyframes pg-hook { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.pg-boom { animation: pg-boom 4s ease-in-out infinite; transform-origin: 0 50%; transform-box: fill-box; }
@keyframes pg-boom { 0%, 40% { transform: rotate(0); } 60%, 90% { transform: rotate(-60deg); } 100% { transform: rotate(0); } }
.pg-loco { animation: pg-loco 6s ease-in-out infinite alternate; }
@keyframes pg-loco { from { transform: translateX(0); } to { transform: translateX(60px); } }
.pg-flow { animation: pg-flow 1.2s linear infinite; }
@keyframes pg-flow { to { stroke-dashoffset: -24; } }
.pg-spray { animation: pg-spray 1.4s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
@keyframes pg-spray { from { transform: scaleY(.85); opacity: .7; } to { transform: scaleY(1.1); opacity: 1; } }
.pg-star-tw { animation: pg-twinkle 2.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes pg-twinkle { from { opacity: .3; } to { opacity: 1; } }
.pg-rocket .pg-flame { animation: pg-flicker .5s ease-in-out infinite alternate; transform-origin: 50% 0; transform-box: fill-box; }
.pg-dish { animation: pg-dish 6s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; }
@keyframes pg-dish { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.pg-float { animation: pg-float 4s ease-in-out infinite; }
.pg-launch { animation: pg-launch 3s ease-in infinite; }
@keyframes pg-launch { 0% { transform: translate(300px, 254px); } 70% { transform: translate(300px, -200px); } 100% { transform: translate(300px, -200px); } }
.pg-mono { animation: pg-mono 8s linear infinite; }
@keyframes pg-mono { from { transform: translateX(-240px); } to { transform: translateX(240px); } }

@media (prefers-reduced-motion: reduce) { .pg-glow, .pg-hook, .pg-boom, .pg-loco, .pg-flow, .pg-spray, .pg-star-tw, .pg-dish, .pg-float, .pg-launch, .pg-mono { animation: none; } }