/* The game's own sky behind the 3D island, copied from the game's index.html (its body background and the
   .season-sky rules, lines 81-82 and 108-131 at commit f30b5e9): the season's colours come from src/menu-world.js applyTheme, which sets
   --sky-0..2 on the page and body[data-season], just as in the game. */
.view { background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 50%, var(--sky-2) 90%); }
/* ---------- seasons: a night sky behind the menu world (stars and the moon), under the 3D scene ---------- */
.season-sky { position: absolute; inset: 0; pointer-events: none; display: none; overflow: hidden; }
body[data-season="halloween"] .season-sky { display: block; }
.season-sky .stars, .season-sky .stars::after { position: absolute; inset: 0; content: ""; }
.season-sky .stars { background-image: radial-gradient(2px 2px at 33.1% 11.1%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 6.6% 51.3%, #fffbea 50%, transparent), radial-gradient(2px 2px at 37.1% 5.5%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 22.6% 7.2%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 8.7% 7.4%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 7.7% 35.9%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 62.5% 37.0%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 57.4% 25.8%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 6.5% 53.5%, #fffbea 50%, transparent), radial-gradient(2px 2px at 42.2% 34.4%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 31.6% 51.0%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 11.9% 36.3%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 37.8% 34.9%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 56.2% 39.1%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 67.3% 27.7%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 46.7% 57.4%, #fffbea 50%, transparent), radial-gradient(2px 2px at 30.8% 49.7%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 76.9% 6.9%, #fffbea 50%, transparent), radial-gradient(2px 2px at 52.4% 54.5%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 45.1% 38.5%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 13.3% 27.1%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 16.6% 31.3%, #fffbea 50%, transparent), radial-gradient(2px 2px at 94.4% 6.7%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 57.0% 54.5%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 34.7% 23.0%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 57.7% 29.4%, #fffbea 50%, transparent), radial-gradient(2px 2px at 92.7% 30.4%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 8.2% 45.9%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 64.1% 61.6%, #fffbea 50%, transparent), radial-gradient(2px 2px at 29.3% 25.1%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 35.3% 58.4%, #fffbea 50%, transparent), radial-gradient(1.2px 1.2px at 18.1% 9.0%, #fffbea 50%, transparent), radial-gradient(2px 2px at 22.9% 19.2%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 25.8% 25.5%, #fffbea 50%, transparent); opacity: 0.8; }
.season-sky .stars::after { background-image: radial-gradient(2.6px 2.6px at 9.7% 29.0%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 28.7% 10.2%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 84.9% 18.7%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 96.7% 43.0%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 93.9% 11.1%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 16.5% 41.5%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 48.6% 37.3%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 29.1% 10.7%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 37.4% 36.0%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 68.3% 32.9%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 64.9% 46.4%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 88.4% 48.8%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 78.6% 25.5%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 39.8% 30.9%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 8.0% 6.0%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 44.3% 8.6%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 7.0% 2.0%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 53.5% 58.9%, #fffbea 50%, transparent), radial-gradient(2.6px 2.6px at 4.4% 54.5%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 38.1% 40.1%, #fffbea 50%, transparent), radial-gradient(1.6px 1.6px at 59.8% 30.4%, #fffbea 50%, transparent), radial-gradient(2.2px 2.2px at 83.5% 61.6%, #fffbea 50%, transparent); animation: twinkle 2.8s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.2; } to { opacity: 1; } }
/* the moon: a painted face (an SVG: soft-edged maria, craters with a shaded and a lit wall, a fine grain, a rim of
   light and a soft terminator, lit from the upper left), a crisp glow round it and a wide warm halo, breathing slowly */
.season-sky .moon { position: absolute; top: 7%; right: 21%; width: clamp(72px, 8vw, 124px); aspect-ratio: 1; }
.season-sky .moon::before, .season-sky .moon::after { content: ""; position: absolute; border-radius: 50%; }
.season-sky .moon::before {
  inset: -140%;
  background: radial-gradient(closest-side, rgba(255, 228, 168, 0.26), rgba(255, 214, 160, 0.11) 40%, rgba(214, 180, 255, 0.04) 66%, rgba(214, 180, 255, 0));
  animation: moon-glow 9s ease-in-out infinite alternate;
}
.season-sky .moon::after {
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.38' cy='.34' r='.74'%3E%3Cstop offset='0' stop-color='%23fffef6'/%3E%3Cstop offset='.42' stop-color='%23fff5d3'/%3E%3Cstop offset='.8' stop-color='%23fbe5a8'/%3E%3Cstop offset='1' stop-color='%23f2cc80'/%3E%3C/radialGradient%3E%3CradialGradient id='t' cx='.32' cy='.28' r='.92'%3E%3Cstop offset='.55' stop-color='%23a8672e' stop-opacity='0'/%3E%3Cstop offset='.84' stop-color='%23a8672e' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%238f5222' stop-opacity='.38'/%3E%3C/radialGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fffef6' stop-opacity='.95'/%3E%3Cstop offset='.5' stop-color='%23fffef6' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='m' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='1' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3Cfilter id='b3' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Cfilter id='bs' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='.09'/%3E%3C/filter%3E%3Cfilter id='br' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .32 0 0 0 0 .14 2.2 0 0 0 -1'/%3E%3C/filter%3E%3Cfilter id='g2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .42 0 0 0 0 .2 2 0 0 0 -.95'/%3E%3C/filter%3E%3CclipPath id='d'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3Cmask id='m1' maskContentUnits='userSpaceOnUse'%3E%3Ccircle r='1' fill='%23fff'/%3E%3Ccircle cx='.32' cy='.32' r='1.02' fill='%23000'/%3E%3C/mask%3E%3Cmask id='m2' maskContentUnits='userSpaceOnUse'%3E%3Ccircle r='1' fill='%23fff'/%3E%3Ccircle cx='-.2' cy='-.2' r='1' fill='%23000'/%3E%3C/mask%3E%3Cg id='c' filter='url(%23bs)'%3E%3Ccircle r='1' fill='%23c8964f' fill-opacity='.26'/%3E%3Ccircle r='1' fill='%2394612a' fill-opacity='.42' mask='url(%23m1)'/%3E%3Ccircle r='1' fill='%23fffdf0' fill-opacity='.8' mask='url(%23m2)'/%3E%3C/g%3E%3C/defs%3E%3Cg clip-path='url(%23d)'%3E%3Crect width='200' height='200' fill='url(%23s)'/%3E%3Crect width='200' height='200' filter='url(%23g2)' opacity='.12'/%3E%3Cg fill='%23dca66a' opacity='.4' filter='url(%23m)'%3E%3Cellipse cx='70' cy='63' rx='25' ry='21' transform='rotate(-15 70 63)'/%3E%3Cellipse cx='40' cy='100' rx='17' ry='34' transform='rotate(-10 40 100)'/%3E%3Cellipse cx='50' cy='76' rx='14' ry='12'/%3E%3Cellipse cx='58' cy='130' rx='15' ry='13'/%3E%3Cellipse cx='30' cy='70' rx='9' ry='12'/%3E%3Cellipse cx='98' cy='31' rx='42' ry='7' transform='rotate(4 98 31)'/%3E%3Cellipse cx='60' cy='38' rx='18' ry='6.5' transform='rotate(-14 60 38)'/%3E%3Cellipse cx='117' cy='62' rx='14' ry='13'/%3E%3Cellipse cx='100' cy='81' rx='10' ry='7'/%3E%3Cellipse cx='92' cy='70' rx='9' ry='8'/%3E%3Cellipse cx='136' cy='89' rx='18' ry='14' transform='rotate(22 136 89)'/%3E%3Cellipse cx='124' cy='98' rx='10' ry='8'/%3E%3Cellipse cx='127' cy='76' rx='7' ry='7'/%3E%3Cellipse cx='170' cy='69' rx='8.5' ry='10.5'/%3E%3Cellipse cx='158' cy='113' rx='8' ry='14' transform='rotate(15 158 113)'/%3E%3Cellipse cx='150' cy='101' rx='6' ry='6'/%3E%3Cellipse cx='137' cy='121' rx='6.5' ry='7'/%3E%3Cellipse cx='136' cy='109' rx='4' ry='6'/%3E%3Cellipse cx='88' cy='136' rx='16' ry='11' transform='rotate(-10 88 136)'/%3E%3Cellipse cx='74' cy='126' rx='9' ry='7'/%3E%3Cellipse cx='54' cy='143' rx='8' ry='8'/%3E%3Cellipse cx='101' cy='101' rx='5' ry='4'/%3E%3C/g%3E%3Cg fill='%23c08d4c' opacity='.2' filter='url(%23b3)'%3E%3Cellipse cx='68' cy='62' rx='14' ry='11'/%3E%3Cellipse cx='117' cy='60' rx='7' ry='7'/%3E%3Cellipse cx='137' cy='88' rx='9' ry='7'/%3E%3Cellipse cx='38' cy='104' rx='9' ry='18'/%3E%3Cellipse cx='88' cy='136' rx='7' ry='5'/%3E%3Cellipse cx='170' cy='69' rx='4' ry='5'/%3E%3C/g%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.1'/%3E%3Cuse href='%23c' transform='translate(82 104) scale(7)'/%3E%3Cuse href='%23c' transform='translate(98 167) scale(6.5)'/%3E%3Cuse href='%23c' transform='translate(52 101) scale(3.8)'/%3E%3Cuse href='%23c' transform='translate(90 37) scale(4.6)'/%3E%3Cuse href='%23c' transform='translate(150 148) scale(11)'/%3E%3Cuse href='%23c' transform='translate(168 44) scale(4.5)'/%3E%3Cuse href='%23c' transform='translate(24 130) scale(5.5)'/%3E%3Cuse href='%23c' transform='translate(124 180) scale(3.6)'/%3E%3Cuse href='%23c' transform='translate(180 118) scale(3)'/%3E%3Cuse href='%23c' transform='translate(64 168) scale(2.4)'/%3E%3Cuse href='%23c' transform='translate(118 140) scale(2.2)'/%3E%3Cuse href='%23c' transform='translate(142 30) scale(2)'/%3E%3Cuse href='%23c' transform='translate(36 52) scale(2.2)'/%3E%3Cuse href='%23c' transform='translate(80 188) scale(2.4)'/%3E%3Crect width='200' height='200' fill='url(%23t)'/%3E%3Ccircle cx='100' cy='100' r='98.6' fill='none' stroke='url(%23r)' stroke-width='2.8' filter='url(%23br)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: 0 0 6px 1px rgba(255, 248, 222, 0.7), 0 0 26px 6px rgba(255, 232, 168, 0.36), 0 0 64px 20px rgba(255, 214, 140, 0.15);
}
@keyframes moon-glow { from { opacity: 0.7; transform: scale(0.95); } to { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .season-sky .stars::after, .season-sky .moon::before { animation: none; } }