/* Seasonal themes (Halloween / Christmas / Easter). Loaded LAST so it wins. Everything is scoped to html[data-season=...]
   so with no season active this file does nothing. Art lives in seasons-art.js, behaviour in seasons.js.
   If you restyle the header, sidebar or game tiles, re-check these selectors: .top, .side, .gcard, .hero3, .nav-item.active, .btn.primary. */
#seasonFx,#seasonHdr{pointer-events:none}
#seasonFx{position:fixed;inset:0;z-index:0;overflow:hidden}
#seasonFx>*{position:absolute}
#seasonFx .sx-sky{inset:0}
#seasonFx .sx-scene{left:0;right:0;bottom:0;height:clamp(130px,23vh,250px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%);opacity:.9}
#seasonFx .sx-scene svg{width:100%;height:100%;display:block}
#seasonFx .sx-cv{inset:0;width:100%;height:100%}
#seasonHdr{position:absolute;left:0;right:0;top:100%;height:0;z-index:3;overflow:visible}   /* hangs from the bottom edge of the top bar so it never covers the buttons */
#seasonHdr>*{position:absolute}
.sx-hat{z-index:4;transform-origin:50% 100%;transition:none}
.sx-hat svg{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.sx-win{animation:sxFlick 3.6s ease-in-out infinite}
.sx-glow{animation:sxGlow 3.2s ease-in-out infinite}
.sx-face{animation:sxFlick 2.4s ease-in-out infinite}
.sx-tw{animation:sxTw 1.8s ease-in-out infinite}.sx-tw.t1{animation-delay:-.6s}.sx-tw.t2{animation-delay:-1.2s}
@keyframes sxFlick{0%,100%{opacity:1}45%{opacity:.78}50%{opacity:.95}70%{opacity:.7}}
@keyframes sxGlow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes sxTw{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sxSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes sxBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sxDrift{from{transform:translateX(-10vw)}to{transform:translateX(110vw)}}
.sx-spi,.sx-egg{top:0;width:20px;margin-left:-10px;transform-origin:50% 0;animation:sxSwing 3.4s ease-in-out infinite}
.sx-spi i,.sx-egg i{position:absolute;left:50%;top:0;width:1px;height:var(--len,14px);background:rgba(255,255,255,.55)}
.sx-spi svg{display:block;width:20px;height:auto;margin-top:var(--len,14px)}
.sx-egg{--len:10px}.sx-egg svg{display:block;width:20px;height:auto;margin-top:10px}

/* ====================== HALLOWEEN ====================== */
html[data-season=halloween]{--accent:#FF7A1A;--accent-2:#9B4DFF;--cyan:#8CFF5A;--pink:#FF4D8D;--violet:#9B4DFF;--gold:#FFB347;
  --bg:#0A0612;--bg2:rgba(20,10,30,.86);--panel:rgba(32,17,46,.78);--raised:#2B1740;--raised2:#3A2056;--line:rgba(255,138,31,.2)}
html[data-season=halloween] body{background:#0A0612}
html[data-season=halloween] .aurora i:nth-child(1){background:#FF6A00;opacity:.2}
html[data-season=halloween] .aurora i:nth-child(2){background:#8A2BE2;opacity:.2}
html[data-season=halloween] .aurora i:nth-child(3){background:#2BFF6A;opacity:.07}
html[data-season=halloween] #seasonFx .sx-sky{background:radial-gradient(60% 40% at 82% 12%,rgba(255,179,71,.2),transparent 70%),linear-gradient(to bottom,rgba(40,12,60,.45),rgba(10,6,18,.0) 60%)}
html[data-season=halloween] .sx-moon{right:5vw;top:7vh;width:clamp(90px,14vw,190px);opacity:.92;filter:drop-shadow(0 0 40px rgba(255,200,120,.45))}
html[data-season=halloween] .sx-moon svg{width:100%;height:auto;display:block}
html[data-season=halloween] .sx-fog{left:-10%;right:-10%;bottom:0;height:30vh;background:radial-gradient(50% 60% at 30% 100%,rgba(190,150,255,.18),transparent 70%),radial-gradient(50% 60% at 75% 100%,rgba(190,150,255,.14),transparent 70%);animation:sxFog 16s ease-in-out infinite alternate}
@keyframes sxFog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
html[data-season=halloween] #seasonHdr .sx-drip{left:0;right:0;top:-1px;height:30px;background:var(--sx-drip) repeat-x 0 0/160px 34px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
html[data-season=halloween] #seasonHdr .sx-web{top:0;width:46px;height:46px;background:var(--sx-web) no-repeat 0 0/100% 100%;opacity:.55}
html[data-season=halloween] #seasonHdr .sx-web.l{left:0}html[data-season=halloween] #seasonHdr .sx-web.r{right:0;transform:scaleX(-1)}
html[data-season=halloween] .btn.primary,html[data-season=halloween] .wallet-btn,html[data-season=halloween] .dep-plus{background:linear-gradient(180deg,#FF9A3C,#E4570A)!important;color:#1B0A00!important;box-shadow:0 6px 18px rgba(255,122,26,.35)!important}
html[data-season=halloween] .cs-switch button.on{background:linear-gradient(180deg,#FF9A3C,#E4570A)!important;color:#1B0A00!important}
html[data-season=halloween] .nav-item.active{background:linear-gradient(90deg,rgba(255,122,26,.3),rgba(255,122,26,.03))!important;box-shadow:inset 3px 0 0 #FF7A1A!important}
html[data-season=halloween] .nav-item.active .ic .ui-i{color:#FF9A3C;filter:drop-shadow(0 0 6px rgba(255,122,26,.6))}
html[data-season=halloween] .logo-word span{color:#FF9A3C!important}
html[data-season=halloween] .hero3{background:radial-gradient(120% 140% at 100% 0%,rgba(255,122,26,.3),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(155,77,255,.22),transparent 60%),linear-gradient(135deg,#1E0F2E,#12091C 70%)!important;border-color:rgba(255,138,31,.22)!important}
html[data-season=halloween] .side::after{background-image:var(--sx-side)}
html[data-season=halloween] .gcard:nth-child(6n+1){--sx-g1:#FF8A1F;--sx-g2:#8A2F05}
html[data-season=halloween] .gcard:nth-child(6n+2){--sx-g1:#9B4DFF;--sx-g2:#32105F}
html[data-season=halloween] .gcard:nth-child(6n+3){--sx-g1:#3FBF4A;--sx-g2:#0E4A1C}
html[data-season=halloween] .gcard:nth-child(6n+4){--sx-g1:#E4342A;--sx-g2:#5A0A12}
html[data-season=halloween] .gcard:nth-child(6n+5){--sx-g1:#FFB347;--sx-g2:#9A4A06}
html[data-season=halloween] .gcard:nth-child(6n+6){--sx-g1:#5B3A9A;--sx-g2:#1B0F33}
html[data-season=halloween] .gcard[data-g],html[data-season=halloween] .gcard{background:linear-gradient(165deg,var(--sx-g1,#9B4DFF),var(--sx-g2,#32105F))!important;border:1px solid rgba(255,170,80,.25)!important}
html[data-season=halloween] .gcard::after{background:var(--sx-tile-top) no-repeat 0 0/64% auto,radial-gradient(90% 40% at 50% 112%,rgba(255,138,31,.5),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,190,110,.35)!important}
html[data-season=halloween] .gcard:hover{box-shadow:0 12px 30px rgba(255,122,26,.35)!important}

/* ====================== CHRISTMAS ====================== */
html[data-season=christmas]{--accent:#FF3B4E;--accent-2:#37C47A;--cyan:#8FD8FF;--pink:#FF6B7E;--violet:#4FB3FF;--gold:#FFD36B;
  --bg:#07131C;--bg2:rgba(8,26,32,.88);--panel:rgba(14,40,46,.78);--raised:#16404A;--raised2:#1E5059;--line:rgba(255,255,255,.14)}
html[data-season=christmas] body{background:#07131C}
html[data-season=christmas] .aurora i:nth-child(1){background:#C21E36;opacity:.18}
html[data-season=christmas] .aurora i:nth-child(2){background:#1E9A55;opacity:.2}
html[data-season=christmas] .aurora i:nth-child(3){background:#4FB3FF;opacity:.12}
html[data-season=christmas] #seasonFx .sx-sky{background:linear-gradient(to bottom,rgba(10,40,70,.5),rgba(7,19,28,0) 65%)}
html[data-season=christmas] .sx-aur{left:0;right:0;top:0;height:40vh;background:radial-gradient(50% 70% at 30% 0%,rgba(80,255,180,.2),transparent 70%),radial-gradient(40% 60% at 72% 0%,rgba(120,160,255,.22),transparent 70%);animation:sxFog 14s ease-in-out infinite alternate}
html[data-season=christmas] #seasonHdr .sx-wire,html[data-season=christmas] #seasonHdr .sx-bulbs{left:0;right:0;top:-6px;height:34px;background-repeat:repeat-x;background-size:71px 34px}
html[data-season=christmas] #seasonHdr .sx-wire{background-image:var(--sx-wire)}
html[data-season=christmas] #seasonHdr .sx-bulbs.a{background-image:var(--sx-bulbs-a);animation:sxBlink 1.6s ease-in-out infinite}
html[data-season=christmas] #seasonHdr .sx-bulbs.b{background-image:var(--sx-bulbs-b);animation:sxBlink 1.6s ease-in-out -.5s infinite}
html[data-season=christmas] #seasonHdr .sx-bulbs.c{background-image:var(--sx-bulbs-c);animation:sxBlink 1.6s ease-in-out -1s infinite;background-position:35px 0;opacity:.9}
html[data-season=christmas] #seasonHdr .sx-holly{bottom:-6px;width:62px}
html[data-season=christmas] #seasonHdr .sx-holly svg{width:100%;height:auto;display:block}
html[data-season=christmas] #seasonHdr .sx-holly.l{left:2px}html[data-season=christmas] #seasonHdr .sx-holly.r{right:2px;transform:scaleX(-1)}
html[data-season=christmas] .btn.primary,html[data-season=christmas] .wallet-btn,html[data-season=christmas] .dep-plus{background:linear-gradient(180deg,#FF5468,#C21E36)!important;color:#fff!important;box-shadow:0 6px 18px rgba(232,52,74,.4)!important}
html[data-season=christmas] .cs-switch button.on{background:linear-gradient(180deg,#FF5468,#C21E36)!important;color:#fff!important}
html[data-season=christmas] .nav-item.active{background:linear-gradient(90deg,rgba(255,59,78,.28),rgba(255,59,78,.03))!important;box-shadow:inset 3px 0 0 #FF3B4E!important}
html[data-season=christmas] .nav-item.active .ic .ui-i{color:#FF6B7E;filter:drop-shadow(0 0 6px rgba(255,59,78,.55))}
html[data-season=christmas] .logo-word span{color:#FFD36B!important}
html[data-season=christmas] .hero3{background:radial-gradient(120% 140% at 100% 0%,rgba(255,59,78,.3),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(55,196,122,.22),transparent 60%),linear-gradient(135deg,#10333A,#0A2128 70%)!important;border-color:rgba(255,255,255,.18)!important}
html[data-season=christmas] .side::after{background-image:var(--sx-side)}
html[data-season=christmas] .gcard:nth-child(6n+1){--sx-g1:#E8344A;--sx-g2:#7A0F22}
html[data-season=christmas] .gcard:nth-child(6n+2){--sx-g1:#2FAE6B;--sx-g2:#0C4A2A}
html[data-season=christmas] .gcard:nth-child(6n+3){--sx-g1:#4FB3FF;--sx-g2:#14407A}
html[data-season=christmas] .gcard:nth-child(6n+4){--sx-g1:#FFC94D;--sx-g2:#A05A06}
html[data-season=christmas] .gcard:nth-child(6n+5){--sx-g1:#B58CFF;--sx-g2:#3A1E7A}
html[data-season=christmas] .gcard:nth-child(6n+6){--sx-g1:#1E8A5A;--sx-g2:#8C1226}
html[data-season=christmas] .gcard[data-g],html[data-season=christmas] .gcard{background:linear-gradient(165deg,var(--sx-g1,#E8344A),var(--sx-g2,#7A0F22))!important;border:1px solid rgba(255,255,255,.3)!important}
html[data-season=christmas] .gcard::after{background:var(--sx-tile-top) repeat-x 0 0/100% auto,radial-gradient(90% 40% at 50% 112%,rgba(255,224,150,.4),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)!important}
html[data-season=christmas] .gcard:hover{box-shadow:0 12px 30px rgba(255,59,78,.3)!important}

/* ====================== EASTER ====================== */
html[data-season=easter]{--accent:#FF7FB0;--accent-2:#B79BFF;--cyan:#8FE9D0;--pink:#FF9EC9;--violet:#B79BFF;--gold:#FFE08A;
  --bg:#150F26;--bg2:rgba(34,24,58,.86);--panel:rgba(48,34,78,.74);--raised:#3A2A5E;--raised2:#483572;--line:rgba(255,179,209,.22)}
html[data-season=easter] body{background:#150F26}
html[data-season=easter] .aurora i:nth-child(1){background:#FF9EC9;opacity:.2}
html[data-season=easter] .aurora i:nth-child(2){background:#8FE9D0;opacity:.16}
html[data-season=easter] .aurora i:nth-child(3){background:#FFE08A;opacity:.12}
html[data-season=easter] #seasonFx .sx-sky{background:linear-gradient(to bottom,rgba(183,155,255,.28),rgba(255,179,209,.08) 55%,transparent)}
html[data-season=easter] .sx-sun{right:6vw;top:6vh;width:clamp(70px,10vw,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFF6C8 0,#FFE08A 45%,rgba(255,224,138,0) 72%);opacity:.8}
html[data-season=easter] .sx-cloud{height:30px;width:120px;border-radius:30px;background:rgba(255,255,255,.28);left:0;filter:blur(1px);animation:sxDrift 90s linear infinite}
html[data-season=easter] .sx-cloud::before,html[data-season=easter] .sx-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
html[data-season=easter] .sx-cloud::before{width:50px;height:50px;left:18px;top:-24px}html[data-season=easter] .sx-cloud::after{width:38px;height:38px;right:18px;top:-16px}
html[data-season=easter] .sx-cloud.c1{top:16vh}html[data-season=easter] .sx-cloud.c2{top:34vh;animation-duration:130s;animation-delay:-50s;transform:scale(.7)}html[data-season=easter] .sx-cloud.c3{top:8vh;animation-duration:110s;animation-delay:-80s;transform:scale(.55)}
html[data-season=easter] #seasonHdr .sx-bunt{left:0;right:0;top:-4px;height:30px;background:var(--sx-bunt) repeat-x 0 0/75px 30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
html[data-season=easter] #seasonHdr .sx-daisy{bottom:-4px;width:46px}
html[data-season=easter] #seasonHdr .sx-daisy svg{width:100%;height:auto;display:block}
html[data-season=easter] #seasonHdr .sx-daisy.l{left:4px}html[data-season=easter] #seasonHdr .sx-daisy.r{right:4px;transform:scaleX(-1)}
html[data-season=easter] .btn.primary,html[data-season=easter] .wallet-btn,html[data-season=easter] .dep-plus{background:linear-gradient(180deg,#FF9EC9,#E0559A)!important;color:#2A0A1A!important;box-shadow:0 6px 18px rgba(255,127,176,.4)!important}
html[data-season=easter] .cs-switch button.on{background:linear-gradient(180deg,#FF9EC9,#E0559A)!important;color:#2A0A1A!important}
html[data-season=easter] .nav-item.active{background:linear-gradient(90deg,rgba(255,127,176,.28),rgba(255,127,176,.03))!important;box-shadow:inset 3px 0 0 #FF7FB0!important}
html[data-season=easter] .nav-item.active .ic .ui-i{color:#FF9EC9;filter:drop-shadow(0 0 6px rgba(255,127,176,.55))}
html[data-season=easter] .logo-word span{color:#FFE08A!important}
html[data-season=easter] .hero3{background:radial-gradient(120% 140% at 100% 0%,rgba(255,158,201,.32),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(143,233,208,.2),transparent 60%),linear-gradient(135deg,#33245A,#221846 70%)!important;border-color:rgba(255,179,209,.3)!important}
html[data-season=easter] .side::after{background-image:var(--sx-side)}
html[data-season=easter] .gcard:nth-child(6n+1){--sx-g1:#FF8FBE;--sx-g2:#B02F6E}
html[data-season=easter] .gcard:nth-child(6n+2){--sx-g1:#7FDDB8;--sx-g2:#1F7A5A}
html[data-season=easter] .gcard:nth-child(6n+3){--sx-g1:#FFD36B;--sx-g2:#C27A10}
html[data-season=easter] .gcard:nth-child(6n+4){--sx-g1:#B79BFF;--sx-g2:#5A3AB0}
html[data-season=easter] .gcard:nth-child(6n+5){--sx-g1:#7CC8FF;--sx-g2:#2A62B0}
html[data-season=easter] .gcard:nth-child(6n+6){--sx-g1:#FF9A7A;--sx-g2:#B0452A}
html[data-season=easter] .gcard[data-g],html[data-season=easter] .gcard{background:linear-gradient(165deg,var(--sx-g1,#FF8FBE),var(--sx-g2,#B02F6E))!important;border:1px solid rgba(255,255,255,.35)!important}
html[data-season=easter] .gcard::after{background:var(--sx-tile-top) repeat-x 0 0/70px auto,radial-gradient(90% 40% at 50% 112%,rgba(255,236,160,.45),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)!important}
html[data-season=easter] .gcard:hover{box-shadow:0 12px 30px rgba(255,127,176,.35)!important}

/* sidebar footer strip, desktop only (on mobile the sidebar is a drawer) */
@media (min-width:861px){ html[data-season] .side{position:relative} html[data-season] .side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;opacity:.9} }

/* settings: season picker */
.sx-pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sx-pick button{flex:1 1 auto;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.sx-pick button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* phones: smaller decorations, calmer scene */
@media (max-width:860px){
  #seasonFx .sx-scene{height:clamp(110px,18vh,170px);opacity:.75}
  html[data-season=halloween] #seasonHdr .sx-web{width:50px;height:50px}
  html[data-season=halloween] #seasonHdr .sx-drip{height:26px;background-size:120px 26px}
  .sx-spi:nth-of-type(n+3),.sx-egg:nth-of-type(n+3){display:none}
  html[data-season=christmas] #seasonHdr .sx-holly{width:42px}
  html[data-season=christmas] #seasonHdr .sx-wire,html[data-season=christmas] #seasonHdr .sx-bulbs{height:26px;background-size:55px 26px}
  html[data-season=easter] #seasonHdr .sx-bunt{height:24px;background-size:60px 24px}
  html[data-season=easter] #seasonHdr .sx-daisy{width:34px}
  html[data-season=halloween] .sx-moon{width:80px;top:70px}
}
@media (max-width:480px){ .sx-spi,.sx-egg{display:none} }
@media (prefers-reduced-motion:reduce){ .sx-win,.sx-glow,.sx-face,.sx-tw,.sx-spi,.sx-egg,.sx-cloud,.sx-fog,.sx-aur,#seasonHdr .sx-bulbs{animation:none!important} }

/* keep text readable over the scenery: dim it, and fade it in later */
html[data-season=christmas] #seasonFx .sx-scene{filter:brightness(.68) saturate(.9)}
html[data-season=easter] #seasonFx .sx-scene{filter:brightness(.78)}
html[data-season=halloween] #seasonFx .sx-scene{filter:brightness(.9)}
#seasonFx .sx-scene{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 35%,#000 70%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 35%,#000 70%)}
html[data-season=christmas] #seasonHdr .sx-bulbs{filter:drop-shadow(0 0 4px rgba(255,255,255,.55))}
html[data-season] .main{text-shadow:0 1px 3px rgba(0,0,0,.35)}
html[data-season] .main .gcard,html[data-season] .main .btn{text-shadow:none}
/* the lobby banner is deliberately flat in the normal theme: keep it flat in every season */
html[data-season] .lobby-page>.hero3{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}

/* ---------- the top bar itself ---------- */
html[data-season] .top{transition:box-shadow .4s,border-color .4s}
html[data-season=halloween] .top{background:linear-gradient(180deg,rgba(38,16,56,.96),rgba(16,8,26,.96))!important;border-bottom:2px solid rgba(255,138,31,.55)!important;box-shadow:0 8px 28px -10px rgba(255,122,26,.45),inset 0 1px 0 rgba(255,190,110,.18)!important}
html[data-season=christmas] .top{background:linear-gradient(180deg,rgba(12,44,38,.96),rgba(8,26,32,.96))!important;border-bottom:2px solid rgba(255,211,107,.4)!important;box-shadow:0 8px 28px -10px rgba(255,200,110,.4),inset 0 1px 0 rgba(255,255,255,.14)!important}
html[data-season=easter] .top{background:linear-gradient(180deg,rgba(58,40,98,.96),rgba(34,24,62,.96))!important;border-bottom:2px solid rgba(255,179,209,.5)!important;box-shadow:0 8px 28px -10px rgba(255,158,201,.4),inset 0 1px 0 rgba(255,255,255,.18)!important}
/* wallet, bell and friends buttons pick up the season */
html[data-season=halloween] .top .wallet,html[data-season=halloween] .top .icon-btn,html[data-season=halloween] .top .cs-switch{border-color:rgba(255,138,31,.3)!important}
html[data-season=christmas] .top .wallet,html[data-season=christmas] .top .icon-btn,html[data-season=christmas] .top .cs-switch{border-color:rgba(255,211,107,.3)!important}
html[data-season=easter] .top .wallet,html[data-season=easter] .top .icon-btn,html[data-season=easter] .top .cs-switch{border-color:rgba(255,179,209,.35)!important}
html[data-season=halloween] #seasonHdr .sx-drip{filter:drop-shadow(0 3px 6px rgba(255,122,26,.5))}
html[data-season=christmas] #seasonHdr .sx-wire{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}