/* Seasonal decorations and the event banner (season.ts). Loaded only while one of them is live. */
html[data-season=halloween]:root{--gold:#ff8a1f;--gold-light:#ffc078;--line:rgba(255,138,31,.25);--red:#6b2a99}
html[data-season=christmas]:root{--red:#b3202a}
html[data-season=lunar]:root{--red:#c9202a}
html[data-season=valentine]:root{--red:#c2185b}

.season-fx{position:fixed;inset:0;z-index:7;pointer-events:none;overflow:hidden;user-select:none}
.season-art{display:block;width:var(--size);height:var(--size)}
.season-art svg{display:block;width:100%;height:100%;overflow:visible}

/* Ornaments on a thread from the top edge, swinging gently. */
.season-hang{position:absolute;top:0;left:var(--x);width:var(--size);margin-left:calc(var(--size) / -2);padding-top:var(--len);transform-origin:50% 0;color:var(--tone);animation:season-swing var(--swing) ease-in-out var(--delay) infinite alternate}
.season-hang:before{content:"";position:absolute;top:0;left:50%;width:1px;height:calc(var(--len) + 4px);background:linear-gradient(#0000,rgba(255,240,210,.55) 40%)}
.season-hang-spider{animation-name:season-bob}
.season-hang-spider:before{background:linear-gradient(#0000,rgba(235,235,245,.6) 40%)}
.season-hang-pumpkin .season-art,.season-hang-lantern .season-art,.season-hang-redLantern .season-art{filter:drop-shadow(0 0 10px rgba(255,170,60,.65))}
.season-hang-lantern .season-art{height:calc(var(--size) * 1.88)}
.season-hang-lantern{color:var(--tone,#ffcf6b)}
.season-hang-redLantern .season-art{height:calc(var(--size) * 1.62)}
.season-hang-crescent .season-art,.season-hang-star .season-art,.season-hang-sun .season-art{filter:drop-shadow(0 0 8px rgba(255,217,121,.7))}
.season-hang-bauble .season-art{height:calc(var(--size) * 1.2);filter:drop-shadow(0 3px 6px #0008)}
.season-hang-balloon .season-art{height:calc(var(--size) * 1.6)}
.season-hang-heart .season-art,.season-hang-flower .season-art{filter:drop-shadow(0 2px 6px #0007)}
@keyframes season-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes season-bob{from{transform:translateY(-18px)}to{transform:translateY(14px)}}

/* Falling pieces: the outer piece falls, the art inside drifts sideways and turns. */
.season-drop{position:absolute;top:-40px;left:var(--x);color:var(--tone);animation:season-fall var(--dur) linear var(--delay) infinite}
.season-drop .season-art{animation:season-drift calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate}
.season-leaf,.season-petal{opacity:.8}
.season-flake,.season-dot{opacity:.85}
.season-dot .season-art{border-radius:50%;background:#fff;box-shadow:0 0 6px #fff9}
.season-confetti .season-art{height:calc(var(--size) * .45);border-radius:1px;background:var(--tone)}
.season-confetti .season-art{animation-name:season-tumble}
@keyframes season-fall{to{transform:translateY(calc(100vh + 80px))}}
@keyframes season-drift{from{transform:translateX(-26px) rotate(-40deg)}to{transform:translateX(26px) rotate(50deg)}}
@keyframes season-tumble{from{transform:translateX(-18px) rotateX(0) rotate(-30deg)}to{transform:translateX(18px) rotateX(540deg) rotate(60deg)}}

/* Bats and butterflies cross the screen on a wavy path, flapping. */
.season-fly{position:absolute;top:var(--y);left:0;color:var(--tone);animation:season-cross var(--dur) linear var(--delay) infinite}
.season-fly .season-art{height:calc(var(--size) / 2);animation:season-flap .32s ease-in-out infinite alternate}
.season-butterfly .season-art{height:calc(var(--size) * .66);animation-duration:.22s}
.season-fly-back{animation-name:season-cross-back}
.season-fly-back .season-art{scale:-1 1}
@keyframes season-cross{0%{transform:translate(-12vw,0)}25%{transform:translate(20vw,-5vh)}50%{transform:translate(50vw,3vh)}75%{transform:translate(80vw,-4vh)}100%{transform:translate(112vw,0)}}
@keyframes season-cross-back{0%{transform:translate(112vw,0)}25%{transform:translate(80vw,4vh)}50%{transform:translate(50vw,-3vh)}75%{transform:translate(20vw,5vh)}100%{transform:translate(-12vw,0)}}
/* Eid al-Adha sheep stroll along the bottom edge instead of flying. */
.season-sheep{top:auto;bottom:4px;animation-name:season-walk}
.season-sheep.season-fly-back{animation-name:season-walk-back}
.season-sheep .season-art{height:calc(var(--size) * .75);animation:season-hop .45s ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px #0008)}
@keyframes season-walk{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
@keyframes season-walk-back{from{transform:translateX(112vw)}to{transform:translateX(-12vw)}}
@keyframes season-hop{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-5px) rotate(2deg)}}
@keyframes season-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}

/* Ghosts, balloons, bubbles and hearts drift up from the bottom and fade out. */
.season-rise{position:absolute;bottom:-90px;left:var(--x);opacity:0;color:var(--tone);animation:season-rise var(--dur) ease-in-out var(--delay) infinite}
.season-rise .season-art{animation:season-sway calc(var(--dur) / 4) ease-in-out infinite alternate}
.season-ghost .season-art{height:calc(var(--size) * 1.2)}
.season-balloon .season-art{height:calc(var(--size) * 1.6)}
.season-heart .season-art{height:calc(var(--size) * .94)}
.season-ghost{--peak:.45}
.season-balloon,.season-heart{--peak:.8}
.season-bubble{--peak:.7}
@keyframes season-rise{0%{transform:translateY(0);opacity:0}15%{opacity:var(--peak,.6)}70%{opacity:calc(var(--peak,.6) * .8)}100%{transform:translateY(-105vh);opacity:0}}
@keyframes season-sway{from{transform:translateX(-18px) rotate(-6deg)}to{transform:translateX(18px) rotate(6deg)}}

.season-corner{position:absolute;bottom:0;opacity:.28}
.season-corner-start{left:0;transform:scaleY(-1)}
.season-corner-end{right:0;transform:scale(-1,-1)}

/* Stars twinkle in place. */
.season-twinkle{position:absolute;top:var(--y);left:var(--x);animation:season-twinkle var(--dur) ease-in-out var(--delay) infinite}
@keyframes season-twinkle{0%,100%{opacity:.1;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}

/* Fireworks: sparks fly out from one point and fade. */
.season-burst{position:absolute;top:var(--y);left:var(--x)}
.season-spark{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--tone);box-shadow:0 0 8px var(--tone);opacity:0;animation:season-spark var(--dur) ease-out var(--delay) infinite}
@keyframes season-spark{0%{transform:rotate(var(--a)) translateX(0) scale(1.2);opacity:1}45%{opacity:1}70%,100%{transform:rotate(var(--a)) translateX(var(--r)) translateY(24px) scale(.3);opacity:0}}

/* Perched pieces sit on the top edge of the register buttons, the Discord card and the sign-up form. */
.season-perch{position:absolute;inset:0;z-index:3;pointer-events:none}
.season-perch>span{position:absolute;bottom:100%;color:var(--tone,#ffcf6b);filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))}
/* Buttons size their own icons, so the perched art overrides that. */
/* Mouse play (season.ts follow): lean toward the cursor, perk up when the host is hovered. */
.season-perch>span{transform:translateY(var(--lift,0px)) rotate(var(--lean,0deg));transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.6,.5,1),scale .3s ease-out}
:hover>.season-perch>span{scale:1.12}
:hover>.season-perch>.season-perch-small{transition-delay:.08s}
.season-hang.is-nudged{animation:season-swing var(--swing) ease-in-out var(--delay) infinite alternate,season-nudge 1.5s ease-out}
.season-hang-spider.is-nudged{animation:season-bob var(--swing) ease-in-out var(--delay) infinite alternate,season-nudge 1.5s ease-out}
@keyframes season-nudge{0%{rotate:0deg}18%{rotate:calc(var(--push,1) * 20deg)}42%{rotate:calc(var(--push,1) * -13deg)}64%{rotate:calc(var(--push,1) * 7deg)}84%{rotate:calc(var(--push,1) * -3deg)}100%{rotate:0deg}}
.season-perch .season-art{display:block;width:100%;height:auto;margin:0}
.season-perch svg{display:block;width:100%!important;height:auto!important;max-width:none;margin:0;flex:none}
.season-perch:before{content:"";position:absolute;top:-10px;width:150px;height:20px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold),transparent 55%),transparent);opacity:.8}
.season-perch-big{width:60px;inset-inline-end:-22px;margin-bottom:-16px;rotate:9deg}
.season-perch-small{width:36px;inset-inline-end:32px;margin-bottom:-7px;rotate:-10deg}
/* The hero button sits close under the tagline, so its pieces hug two corners instead of the top edge. */
.season-perch-cta .season-perch-big{width:54px;margin-bottom:-30px}
.season-perch-cta .season-perch-small{bottom:-12px;inset-inline-end:auto;inset-inline-start:-16px;margin:0;width:34px}
.season-perch-cta:before{top:-4px;inset-inline-end:-50px;width:110px}
.season-perch-mini .season-perch-big{width:26px;inset-inline-end:-9px;margin-bottom:-8px}
.season-perch-mini .season-perch-small,.season-perch-mini:before{display:none}
.season-perch-card .season-perch-big{width:66px;inset-inline-end:-16px;margin-bottom:-12px;rotate:-6deg}
.season-perch-card .season-perch-small{width:36px;inset-inline-end:44px;margin-bottom:-5px;rotate:8deg}
.season-perch-card:before{inset-inline-end:-30px;width:130px}
/* The sign-up form starts right under the fixed header, so its pieces sit inside the empty top corner. */
.season-perch-form .season-perch-big{width:58px;inset-inline-end:16px;margin-bottom:-58px;rotate:-6deg}
.season-perch-form .season-perch-small{width:34px;inset-inline-end:68px;margin-bottom:-40px;rotate:8deg}
.season-perch-form:before{display:none}
.season-perch-halloween>span{filter:drop-shadow(0 0 9px rgba(255,140,30,.7)) drop-shadow(0 4px 4px rgba(0,0,0,.6));animation:season-candle 3.2s ease-in-out infinite alternate}
.season-perch-halloween .season-perch-small{animation-delay:-1.4s}
.season-perch-halloween:before{background:radial-gradient(closest-side,rgba(255,130,30,.5),transparent)}
.season-perch-ramadan .season-perch-big,.season-perch-eid .season-perch-big{width:30px;rotate:0deg;filter:drop-shadow(0 0 10px rgba(255,200,90,.7))}
.season-perch-card.season-perch-ramadan .season-perch-big,.season-perch-card.season-perch-eid .season-perch-big{width:36px}
.season-perch-adha .season-perch-big{width:58px;rotate:0deg}
.season-perch-card.season-perch-adha .season-perch-big{width:70px}
.season-perch-adha .season-perch-small,.season-perch-christmas .season-perch-small{filter:drop-shadow(0 0 6px rgba(255,217,121,.8))}
.season-perch-christmas .season-perch-big{width:40px}
@keyframes season-candle{0%{filter:drop-shadow(0 0 7px rgba(255,140,30,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 13px rgba(255,160,40,.85)) drop-shadow(0 4px 4px rgba(0,0,0,.6))}100%{filter:drop-shadow(0 0 9px rgba(255,120,20,.65)) drop-shadow(0 4px 4px rgba(0,0,0,.6))}}

.season-halloween:after{content:"";position:absolute;inset:auto 0 0;height:22vh;background:linear-gradient(#0000,rgba(255,110,20,.08))}

/* Greeting badge, closable by the visitor; it sits above the event bar when both show. */
.season-greeting{position:fixed;bottom:calc(18px + var(--season-event-room,0px));inset-inline-start:18px;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;max-width:calc(100vw - 36px);padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:26px;background:rgba(14,10,9,.92);color:#f5f1e8;font-size:14px;font-weight:600;box-shadow:0 10px 30px #0009;animation:season-pop .5s ease-out both}
[dir=rtl] .season-greeting{padding:8px 12px 8px 8px}
.season-greeting-icon{flex:none;width:26px;height:26px;color:#ffcf6b}
.season-greeting-icon svg{display:block;width:100%;height:100%}
.season-greeting-close{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer}
.season-greeting-close:hover,.season-greeting-close:focus-visible{background:rgba(255,255,255,.18)}
.season-countdown{font-variant-numeric:tabular-nums;color:var(--gold-light,#f1d18a);font-weight:700;white-space:nowrap}
.season-greeting-halloween{border-color:rgba(255,138,31,.5)}
.season-greeting-christmas,.season-greeting-lunar{border-color:rgba(198,40,50,.55)}
.season-greeting-ramadan,.season-greeting-eid,.season-greeting-adha,.season-greeting-newyear,.season-greeting-anniversary{border-color:rgba(255,207,107,.5)}
.season-greeting-valentine{border-color:rgba(255,77,109,.55)}
.season-greeting-spring{border-color:rgba(255,143,177,.5)}
.season-greeting-summer{border-color:rgba(255,200,61,.55)}
@keyframes season-pop{from{opacity:0;transform:translateY(16px)}}

/* Event bar (Double EXP, tournaments, sales...). */
.season-event{position:fixed;inset-inline:12px;bottom:12px;z-index:41;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;max-width:980px;margin-inline:auto;padding:10px 12px 10px 16px;border:1px solid var(--gold);border-radius:14px;background:linear-gradient(90deg,rgba(20,14,10,.96),rgba(40,26,12,.96),rgba(20,14,10,.96));color:#f5f1e8;font-size:15px;box-shadow:0 12px 34px #000a,0 0 24px color-mix(in srgb,var(--gold),transparent 75%);animation:season-pop .5s ease-out both}
[dir=rtl] .season-event{padding:10px 16px 10px 12px}
.season-event-kind{flex:none;padding:4px 10px;border-radius:999px;background:var(--gold);color:#140d07;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.season-event-text{flex:1 1 220px;font-weight:600;min-width:0}
.season-event-link{flex:none;padding:6px 14px;border:1px solid var(--gold);border-radius:8px;color:var(--gold-light,#f1d18a);font-weight:700;text-decoration:none}
.season-event-link:hover,.season-event-link:focus-visible{background:color-mix(in srgb,var(--gold),transparent 80%)}
.season-event-sale .season-event-kind{background:#e5484d;color:#fff}
.season-event-tournament .season-event-kind{background:#b3202a;color:#fff}

@media(max-width:900px){.season-hang{display:none}.season-corner{display:none}}
@media(max-width:600px){.season-event{font-size:13px;gap:6px 10px}.season-event-text{flex-basis:100%;order:3}}
@media(prefers-reduced-motion:reduce){.season-fx *,.season-greeting,.season-event,.season-perch>span{animation:none!important}.season-perch>span{transition:none}}
@media print{.season-fx,.season-greeting,.season-event,.season-perch{display:none}}