.season-scene {
    --petal-pink: #dc7195;
    --petal-light: #edabc4;
    --petal-lilac: #a28acc;
    --flower-center: #ffe5a0;
    --leaf-gold: #cf942e;
    --leaf-rust: #c46d42;
    --leaf-red: #be6273;
    --leaf-vein: #74482e80;
    --snow: #70a7c1;
    --sunlight: #e9b141;
    --season-opacity: .65;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    contain: strict;
}

:root[data-palette=ocean] .season-scene {
    --petal-pink: #cf6d9b;
    --petal-light: #e9a4c4;
    --petal-lilac: #8c8ccd;
    --leaf-gold: #c79836;
    --leaf-rust: #bd7950;
    --leaf-red: #b85d7d;
    --snow: #589bb6;
    --sunlight: #dcac46;
}

:root[data-palette=candy] .season-scene {
    --petal-pink: #c875a2;
    --petal-light: #e8a4c8;
    --petal-lilac: #9778c3;
    --leaf-gold: #cc9748;
    --leaf-rust: #c67a65;
    --leaf-red: #bc678a;
    --snow: #859cc5;
    --sunlight: #dfae55;
}

/* Transparent text areas need a solid surface above the moving background. */
.fun-puzzles .puzzles-header,
.fun-puzzles .puzzles-preferences,
.fun-puzzles .puzzles-footer,
.fun-puzzles .puzzles-intro,
.fun-puzzles .game-heading,
.fun-puzzles .play-panel,
.fun-puzzles .tip-note,
.fun-puzzles .game-bottom,
.fun-puzzles .no-script {
    background: var(--bg);
}

.season-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--season-wash, none);
    pointer-events: none;
}

.season-scene[data-season=spring] {
    --season-wash: radial-gradient(ellipse at 0 45%, #f2c0d32e, transparent 40%), radial-gradient(ellipse at 100% 75%, #cbbce92e, transparent 35%);
}
.season-scene[data-season=summer] {
    --season-wash: radial-gradient(ellipse at 0 35%, #f8d57840, transparent 45%), radial-gradient(ellipse at 100% 70%, #f4cb8830, transparent 40%);
}
.season-scene[data-season=autumn] {
    --season-wash: radial-gradient(ellipse at 0 60%, #ebc48230, transparent 40%), radial-gradient(ellipse at 100% 30%, #e7ac9d28, transparent 40%);
}
.season-scene[data-season=winter] {
    --season-wash: radial-gradient(ellipse at 0 30%, #b9dbe838, transparent 45%), radial-gradient(ellipse at 100% 65%, #c7cdeb30, transparent 40%);
}

.season-particle {
    display: block;
    position: absolute;
    left: var(--x);
    top: -48px;
    width: var(--size);
    height: var(--size);
    pointer-events: none;
    opacity: var(--season-opacity);
    animation: season-drift var(--duration) linear var(--delay) infinite;
}
.season-motif { display: block; width: 100%; height: 100%; overflow: visible; }
.season-scene[data-season=spring] .season-particle { color: var(--petal-pink); }
.season-scene[data-season=spring] .season-particle:nth-child(3n+2) { color: var(--petal-light); }
.season-scene[data-season=spring] .season-particle:nth-child(3n) { color: var(--petal-lilac); }
.season-scene[data-season=autumn] .season-particle { color: var(--leaf-gold); }
.season-scene[data-season=autumn] .season-particle:nth-child(3n+2) { color: var(--leaf-rust); }
.season-scene[data-season=autumn] .season-particle:nth-child(3n) { color: var(--leaf-red); }
.season-scene[data-season=winter] .season-particle { color: var(--snow); --season-opacity: .6; }
.season-scene[data-season=summer] .season-particle {
    left: -34px;
    top: 34%;
    width: 112px;
    height: 112px;
    color: var(--sunlight);
    --season-opacity: .48;
    animation-name: season-sun;
    animation-duration: 32s;
    animation-timing-function: ease-in-out;
}
.season-scene[data-season=summer] .season-particle:nth-child(2) {
    left: auto;
    right: -32px;
    top: 72%;
    width: 84px;
    height: 84px;
    animation-direction: reverse;
}
.season-paused .season-particle { animation-play-state: paused; }

@keyframes season-drift {
    0% { transform: translate3d(-50%, 0, 0) rotate(0deg); opacity: 0; }
    8% { opacity: var(--season-opacity); }
    45% { transform: translate3d(calc(-50% + 12px), 48vh, 0) rotate(var(--turn)); }
    85% { opacity: var(--season-opacity); }
    100% { transform: translate3d(-50%, calc(100vh + 96px), 0) rotate(0deg); opacity: 0; }
}
@keyframes season-sun {
    0%, 100% { transform: rotate(-8deg) scale(.95); }
    50% { transform: rotate(8deg) scale(1.04); }
}

@media (max-width: 690px) {
    .season-particle { width: 22px; height: 22px; animation-name: season-edge-drift; }
    .season-scene[data-season=winter] .season-particle { width: 17px; height: 17px; }
    .season-scene[data-season=summer] .season-particle { left: -26px; width: 64px; height: 64px; }
    .season-scene[data-season=summer] .season-particle:nth-child(2) { left: auto; right: -26px; width: 64px; height: 64px; }
}
@keyframes season-edge-drift {
    0% { transform: translate3d(-50%, 0, 0) rotate(0deg); opacity: 0; }
    8%, 85% { opacity: var(--season-opacity); }
    45% { transform: translate3d(-50%, 48vh, 0) rotate(var(--turn)); }
    100% { transform: translate3d(-50%, calc(100vh + 96px), 0) rotate(0deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .season-scene .season-particle { display: none; animation: none !important; }
}