/* Seasonal Christmas skin. Scoped to body.christmas, which seasonal.js only adds on desktop from Thanksgiving to Jan 2. Shares the .hw-fx / .hw-toggle base from halloween.css. */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
  .sk-toggle-christmas{border-color:rgba(190,225,255,.6);background:rgba(8,20,38,.78);color:#d6ecff}
  .sk-christmas .xm-moon{position:absolute;top:16px;right:76px;width:76px;height:76px;border-radius:50%;opacity:.95;
    background:
      radial-gradient(circle at 34% 38%,rgba(120,150,185,.35) 0 6px,transparent 7px),
      radial-gradient(circle at 62% 30%,rgba(120,150,185,.28) 0 4px,transparent 5px),
      radial-gradient(circle at 56% 64%,rgba(120,150,185,.34) 0 9px,transparent 10px),
      radial-gradient(circle at 36% 32%,#ffffff 0,#e3f0ff 55%,#b9d3ee 100%);
    box-shadow:0 0 16px 3px rgba(200,230,255,.5),0 0 64px 22px rgba(150,200,255,.2)}
  .sk-christmas .xm-mist{position:absolute;left:-10%;width:120%;bottom:0;height:30%;opacity:.55;filter:blur(18px);
    background:radial-gradient(closest-side at 20% 80%,rgba(200,225,255,.4),transparent),radial-gradient(closest-side at 55% 85%,rgba(220,235,255,.38),transparent),radial-gradient(closest-side at 88% 78%,rgba(190,215,250,.36),transparent)}
  .sk-christmas .xm-flake{position:absolute;top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8);animation:xmfall linear infinite,xmsway ease-in-out infinite alternate;will-change:transform}
  @keyframes xmfall{from{transform:translateY(-10px)}to{transform:translateY(110vh)}}
  @keyframes xmsway{from{margin-left:-14px}to{margin-left:14px}}
  .sk-christmas .xm-lights{position:absolute;left:0;right:0;top:0;height:22px}
  .sk-christmas .xm-lights::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:rgba(20,40,24,.9);box-shadow:0 1px 0 rgba(255,255,255,.06)}
  .sk-christmas .xm-lights i{position:absolute;width:8px;height:11px;margin-left:-4px;border-radius:50% 50% 45% 45%;animation:xmtwinkle 2.6s ease-in-out infinite}
  .sk-christmas .xm-lights i.c0{background:#ff4b4b;box-shadow:0 0 9px 2px rgba(255,75,75,.75)}
  .sk-christmas .xm-lights i.c1{background:#ffd34d;box-shadow:0 0 9px 2px rgba(255,211,77,.75)}
  .sk-christmas .xm-lights i.c2{background:#4ddc7a;box-shadow:0 0 9px 2px rgba(77,220,122,.7)}
  .sk-christmas .xm-lights i.c3{background:#58a8ff;box-shadow:0 0 9px 2px rgba(88,168,255,.75)}
  @keyframes xmtwinkle{0%,100%{opacity:1}50%{opacity:.35}}

  body.christmas{background:#07101c}
  body.christmas header{border-bottom-color:rgba(190,225,255,.2)}
  body.christmas header h1{background:linear-gradient(135deg,#ff5a5a,#7ed6a0);-webkit-background-clip:text;background-clip:text}
  body.christmas #stage{background:radial-gradient(circle at center,#12294a,#07101c);box-shadow:0 0 44px rgba(120,190,255,.2)}
  body.christmas .leaflet-container{background:#0f2036}
  body.christmas .leaflet-popup-content-wrapper,body.christmas .leaflet-popup-tip{background:#122640}
  body.christmas #panel{background:rgba(12,26,46,.97)}
  body.christmas #panel.pinned{border-color:#7ec8ff}
  body.christmas aside{background:rgba(14,30,52,.95);border-color:rgba(190,225,255,.18)}
  body.christmas h3{color:#bfe3ff}
  body.christmas .stat b,body.christmas .pc h4,body.christmas .foot a{color:#bfe3ff}
  body.christmas .plist a{border-bottom-color:#7ec8ff}
  body.christmas .plist a:hover{color:#fff;border-color:#fff}
  body.christmas .plist .tag{color:#bfe3ff;border-color:rgba(190,227,255,.55)}
  body.christmas input:focus,body.christmas select:focus{border-color:#7ec8ff}
  body.christmas .primary{background:linear-gradient(135deg,#e24a4a,#b8242c);color:#fff}
  body.christmas .compass{color:#9fd4ff}
}
@media (prefers-reduced-motion:reduce){.xm-flake{animation:none!important}.xm-lights i{animation:none!important}}