/* scorezone-season.css Shared seasonal background layer for ScoreZone - Safe-by-default: only affects body background (and optional snow layer) - Opt-out: */ /* Base: do not touch app UI elements; only paint behind everything */ :root{ --sz-season-bg: #f6f3ee; /* default fallback */ } /* If you ever want to force a season for testing: etc. */ /* Apply background */ body{ background: var(--sz-season-bg) !important; background-attachment: fixed !important; } /* Season backgrounds (subtle) */ body[data-season="spring"]{ --sz-season-bg: radial-gradient(1200px 700px at 10% 10%, rgba(34,197,94,.10), transparent 60%), radial-gradient(900px 600px at 90% 25%, rgba(56,189,248,.10), transparent 55%), #f6f3ee; } body[data-season="summer"]{ --sz-season-bg: radial-gradient(1200px 700px at 10% 10%, rgba(250,204,21,.12), transparent 60%), radial-gradient(900px 600px at 90% 25%, rgba(34,211,238,.10), transparent 55%), #f7f4ea; } body[data-season="autumn"]{ --sz-season-bg: radial-gradient(1200px 700px at 10% 10%, rgba(245,158,11,.14), transparent 60%), radial-gradient(900px 600px at 90% 25%, rgba(239,68,68,.10), transparent 55%), #f6f2ea; } /* Winter gets a slightly darker cool tint so white snow is visible */ body[data-season="winter"]{ --sz-season-bg: radial-gradient(1200px 700px at 10% 10%, rgba(147,197,253,.16), transparent 60%), radial-gradient(900px 600px at 90% 25%, rgba(107,114,128,.16), transparent 55%), linear-gradient(180deg, #e6edf7 0%, #d9e3f1 100%); } /* December variant (still winter, slightly warmer festive tint) */ body[data-season="xmas"]{ --sz-season-bg: radial-gradient(1200px 700px at 10% 10%, rgba(220,38,38,.12), transparent 60%), radial-gradient(900px 600px at 90% 25%, rgba(107,114,128,.14), transparent 55%), linear-gradient(180deg, #e6edf7 0%, #d9e3f1 100%); } /* ----------------------------- Snow overlay (only in winter/xmas) We inject #sz-snow via JS. It sits behind the app (no clicks) and above body background. --------------------------------*/ #sz-snow{ position: fixed; inset: 0; pointer-events: none; z-index: 0; /* behind app; your app should remain above naturally */ overflow: hidden; } /* Ensure typical app wrappers stay above the snow layer without needing changes. If a page has unusual stacking, you can add: .wrap, .card, #app, #setup { position: relative; z-index: 1; } */ body.sz-has-snow .wrap, body.sz-has-snow .card, body.sz-has-snow #app, body.sz-has-snow #setup{ position: relative; z-index: 1; } /* Individual snowflake */ .sz-flake{ position: absolute; top: -12px; left: 0; width: var(--sz, 6px); height: var(--sz, 6px); border-radius: 999px; background: rgba(255,255,255,.98); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.10); opacity: var(--op, .9); transform: translate3d(var(--x, 0px), -20px, 0); animation: sz-fall var(--dur, 10s) linear infinite, sz-drift var(--driftDur, 4s) ease-in-out infinite alternate; } @keyframes sz-fall{ to { transform: translate3d(var(--x, 0px), calc(100vh + 30px), 0); } } @keyframes sz-drift{ from { margin-left: 0px; } to { margin-left: var(--dx, 25px); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ #sz-snow{ display:none !important; } }