/* Holiday themes: one block per season, switched on by <html data-season="…"> (public/season.js, which also sets
   data-theme="dark" for a night theme so style.css's light colours stay out of the way). The pictures in
   img/season/ are our own drawings; the item sprites are the wiki copies in wimg/ (scripts/wimg-sync.mjs). */

.season-sky { display: none; }
/* A season's looping Looting icon (img/season/<id>/looting-anim.svg) has half an icon of empty room on its left, right and
   top, for the things that shoot out of the beam. The <img> is drawn that much bigger and pulled back over the 16 px icon. */
.lvl-badge img.season-roomy { width: 32px; height: 24px; max-width: none; margin: -8px calc(.1rem - 8px) 0 -8px; }

/* ================= Halloween, 1 Oct to 2 Nov ================= */
:root[data-season="halloween"] {
  --bg: #130e1a;
  --panel: #1f1729;
  --panel-2: #291f36;
  --border: #44345a;
  --text: #efe4d0;
  --muted: #a898b8;
  --accent: #ff8a1f;      /* pumpkin */
  --accent-2: #ffb561;
  --link: #ffb561;
  --heading-sm: #ff8a1f;
  --good: #7dde4f;
  --slot-bg: #2c2139;
  --slot-border: #4a395f;
  --shadow: 0 2px 12px rgb(0 0 0 / .45);
}
/* Moonlight from the top right, a pumpkin glow from the bottom left. */
:root[data-season="halloween"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vmax 46vmax at 88% -12%, rgb(140 82 255 / .2), transparent 62%),
    radial-gradient(60vmax 36vmax at 6% 112%, rgb(255 122 24 / .1), transparent 62%);
}
:root[data-season="halloween"] .topbar {
  background-image: url(/img/season/halloween/web.svg), url(/img/season/halloween/web-r.svg);
  background-repeat: no-repeat; background-position: left top, right top; background-size: 84px, 84px;
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
:root[data-season="halloween"] .lvl-fill { background: linear-gradient(90deg, #6b2fb3, #ff8a1f 62%, #ffd27a); }

/* Bats crossing the top bar: each flies over in about ten seconds, then stays away for a while. */
:root[data-season="halloween"] .season-sky {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 96px; overflow: hidden; pointer-events: none;
  z-index: 41;   /* over the sticky level bar (40), under the language menu (45) */
}
:root[data-season="halloween"] .season-sky i { position: absolute; top: 0; left: 0; animation: hwFly 27s linear infinite; animation-delay: -3s; }
:root[data-season="halloween"] .season-sky b {
  display: block; width: 26px; height: 14px; background: #7a5aa8; opacity: .8;
  -webkit-mask: url(/img/season/halloween/bat.svg) center / contain no-repeat; mask: url(/img/season/halloween/bat.svg) center / contain no-repeat;
  animation: hwFlap .26s ease-in-out infinite alternate;
}
:root[data-season="halloween"] .season-sky i:nth-child(2) { top: 18px; animation-duration: 35s; animation-delay: -16s; animation-direction: reverse; }
:root[data-season="halloween"] .season-sky i:nth-child(2) b { width: 20px; height: 11px; }
:root[data-season="halloween"] .season-sky i:nth-child(3) { top: 6px; animation-duration: 43s; animation-delay: -30s; }
:root[data-season="halloween"] .season-sky i:nth-child(3) b { width: 16px; height: 9px; opacity: .6; }
@keyframes hwFly {
  0%        { transform: translate(-8vw, 34px); }
  8%        { transform: translate(15vw, 10px); }
  16%       { transform: translate(38vw, 38px); }
  24%       { transform: translate(61vw, 14px); }
  32%       { transform: translate(84vw, 34px); }
  40%, 100% { transform: translate(110vw, 8px); }
}
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@media (prefers-reduced-motion: reduce) { :root[data-season="halloween"] .season-sky { display: none; } }

/* The rare drop card: night sky, a cobweb in the corner, the item in front of a full moon with bats across it,
   pumpkins either side of the label. The burst's pumpkins, h'ween masks and bats come from fx.js. */
:root[data-season="halloween"] .fx { background: radial-gradient(circle at 50% 45%, rgb(64 26 116 / .4), rgb(8 5 12 / .72) 70%); }
:root[data-season="halloween"] .fx.tier-rare { --tier: #ff8a1f; }
:root[data-season="halloween"] .fx-card {
  background: url(/img/season/halloween/web.svg) left top / 82px no-repeat, linear-gradient(180deg, #2d1e44 0%, #1b1228 58%, #130c1c 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 0 34px color-mix(in srgb, var(--tier) 42%, transparent), 0 0 90px rgb(120 60 220 / .28);
}
:root[data-season="halloween"] .fx-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .6rem; }
:root[data-season="halloween"] .fx-pill::before,
:root[data-season="halloween"] .fx-pill::after {
  content: ""; flex: none; width: 23px; height: 20px; image-rendering: pixelated;
  background: url(/wimg/o/pumpkin-5d1181c6.png) center / contain no-repeat;   /* Wimg.file('Pumpkin.png') */
}
@media (max-width: 359px) {   /* the narrowest phones: a long translated label would run under the close button */
  :root[data-season="halloween"] .fx-pill::before, :root[data-season="halloween"] .fx-pill::after { display: none; }
}
:root[data-season="halloween"] .fx-icon { position: relative; isolation: isolate; margin-top: 14px; margin-bottom: 10px; }
:root[data-season="halloween"] .fx-icon::before {   /* the moon */
  content: ""; position: absolute; inset: -4px; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffbe2 0, #ffeeaa 48%, #efca62 100%);
  box-shadow: 0 0 28px 8px rgb(255 226 140 / .34), inset -9px -7px 0 rgb(206 160 62 / .32);
}
:root[data-season="halloween"] .fx-icon::after {    /* two bats, cut out of one dark layer */
  content: ""; position: absolute; inset: -6px -22px; z-index: -1; background: #150d1f;
  -webkit-mask: url(/img/season/halloween/bat.svg) 4px 12px / 36px no-repeat, url(/img/season/halloween/bat.svg) calc(100% - 8px) 46px / 24px no-repeat;
  mask: url(/img/season/halloween/bat.svg) 4px 12px / 36px no-repeat, url(/img/season/halloween/bat.svg) calc(100% - 8px) 46px / 24px no-repeat;
}
:root[data-season="halloween"] .fx-icon img { filter: drop-shadow(0 2px 3px rgb(20 10 30 / .55)) drop-shadow(0 0 10px color-mix(in srgb, var(--tier) 45%, transparent)); }
:root[data-season="halloween"] .fx-meta { color: #cdbfdd; }
:root[data-season="halloween"] .fx-also { border-top-color: #44345a; }
:root[data-season="halloween"] .fx-also-label,
:root[data-season="halloween"] .fx-off,
:root[data-season="halloween"] .fx-x { color: #a898b8; }
:root[data-season="halloween"] .fx-x:hover { color: var(--text); }
:root[data-season="halloween"] .fx-mini { background: #2c2139; }
:root[data-season="halloween"] .fx-mini.more { --mini: #5e4a80; }

/* The collection log notice keeps its in-game shape, in night colours. */
:root[data-season="halloween"] .clog-toast { background: #2a1f3a; border-color: #120b1a; outline-color: #5e4a80; }
:root[data-season="halloween"] .clog-toast .t-title { color: #ff8a1f; }
:root[data-season="halloween"] .clog-toast .t-slot { background: #1d1529; border-color: #5e4a80; }

/* ================= Thanksgiving, 3 Nov to the day after it: a harvest table by candlelight ================= */
:root[data-season="thanksgiving"] {
  --bg: #150f0a;
  --panel: #21170f;
  --panel-2: #2b1f15;
  --border: #4b3824;
  --text: #f1e3c6;
  --muted: #b3a082;
  --accent: #f2a93b;      /* candle amber */
  --accent-2: #ffd27f;
  --link: #ffd27f;
  --heading-sm: #f2a93b;
  --good: #84d16a;
  --slot-bg: #2f2318;
  --slot-border: #54402a;
  --shadow: 0 2px 12px rgb(0 0 0 / .5);
}
/* A low harvest moon off the top right, candlelight from the bottom of the page. */
:root[data-season="thanksgiving"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vmax 44vmax at 90% -14%, rgb(226 106 30 / .17), transparent 62%),
    radial-gradient(64vmax 34vmax at 30% 114%, rgb(255 184 72 / .1), transparent 62%);
}
:root[data-season="thanksgiving"] .topbar {
  background-image: url(/img/season/thanksgiving/corner.svg), url(/img/season/thanksgiving/corner-r.svg);
  background-repeat: no-repeat; background-position: left top, right top; background-size: 84px, 84px;
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
:root[data-season="thanksgiving"] .lvl-fill { background: linear-gradient(90deg, #8f2233, #e8862a 55%, #ffd27f); }   /* cranberry to gold */

/* Maple leaves drifting down past the top bar: each takes about ten seconds, swinging as it falls, then stays away. */
:root[data-season="thanksgiving"] .season-sky {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 120px; overflow: hidden; pointer-events: none;
  z-index: 41;   /* over the sticky level bar (40), under the language menu (45) */
}
:root[data-season="thanksgiving"] .season-sky i { position: absolute; top: 0; left: 9%; opacity: 0; animation: thanksFall 31s linear -2s infinite; }
:root[data-season="thanksgiving"] .season-sky i > b {
  display: block; width: 17px; height: 18px; background: #dd9330; opacity: .85;
  -webkit-mask: url(/img/season/thanksgiving/flyer.svg) center / contain no-repeat; mask: url(/img/season/thanksgiving/flyer.svg) center / contain no-repeat;
  animation: thanksTurn 2.7s ease-in-out infinite alternate;
}
:root[data-season="thanksgiving"] .season-sky i:nth-child(2) { top: 0; left: 76%; animation: thanksFall 37s linear -19s infinite; }
:root[data-season="thanksgiving"] .season-sky i:nth-child(2) > b { width: 13px; height: 14px; background: #c2473f; animation-duration: 2.2s; }
:root[data-season="thanksgiving"] .season-sky i:nth-child(3) { top: 0; left: 38%; animation: thanksFall 43s linear -33s infinite; }
:root[data-season="thanksgiving"] .season-sky i:nth-child(3) > b { width: 12px; height: 13px; background: #e8bd58; opacity: .7; animation-duration: 3.1s; }
:root[data-season="thanksgiving"] .season-sky i:nth-child(4) { left: 58%; animation: thanksFall 47s linear -9s infinite; }
:root[data-season="thanksgiving"] .season-sky i:nth-child(4) > b { width: 15px; height: 16px; background: #98a468; opacity: .7; animation-duration: 2.4s; }
@keyframes thanksFall {
  0%        { transform: translate(0, -22px); opacity: 0; animation-timing-function: ease-in-out; }
  2%        { opacity: 1; }
  8%        { transform: translate(3.4vw, 16px); animation-timing-function: ease-in-out; }
  16%       { transform: translate(.6vw, 44px); animation-timing-function: ease-in-out; }
  24%       { transform: translate(4.4vw, 72px); opacity: 1; animation-timing-function: ease-in-out; }
  32%, 100% { transform: translate(1.8vw, 102px); opacity: 0; }
}
@keyframes thanksTurn { from { transform: rotate(-34deg) scaleX(1); } to { transform: rotate(40deg) scaleX(.55); } }
@media (max-width: 560px) { :root[data-season="thanksgiving"] .season-sky i:nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { :root[data-season="thanksgiving"] .season-sky { display: none; } }

/* The rare drop card: a dark table, the item inside a wreath of wheat, oak leaves and acorns with a low warm light
   behind it, a roast turkey either side of the label. The burst's turkeys, pies, corn and leaves come from fx.js. */
:root[data-season="thanksgiving"] .fx { background: radial-gradient(circle at 50% 45%, rgb(150 72 16 / .36), rgb(10 6 3 / .76) 70%); }
:root[data-season="thanksgiving"] .fx.tier-rare { --tier: #f6ab35; }
:root[data-season="thanksgiving"] .fx-card {
  background: linear-gradient(180deg, #3a2413 0%, #24160c 58%, #170e08 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 0 34px color-mix(in srgb, var(--tier) 42%, transparent), 0 0 90px rgb(232 130 34 / .26);
}
:root[data-season="thanksgiving"] .fx-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem; }
:root[data-season="thanksgiving"] .fx-pill::before,
:root[data-season="thanksgiving"] .fx-pill::after {
  content: ""; flex: none; width: 24px; height: 19px; image-rendering: pixelated;   /* under its 31 x 24: the card is 300 px at most, and a long translated label must stay clear of the close button */
  background: url(/wimg/o/cooked-turkey-f81fc69e.png) center / contain no-repeat;   /* Wimg.file('Cooked turkey.png') */
  filter: drop-shadow(0 0 4px rgb(255 190 92 / .55));   /* candlelight: the sprite is dark brown on a dark card */
}
:root[data-season="thanksgiving"] .fx-pill::after { transform: scaleX(-1); }   /* the two turkeys face each other */
@media (max-width: 359px) {   /* the narrowest phones: a long translated label would run under the close button */
  :root[data-season="thanksgiving"] .fx-pill::before, :root[data-season="thanksgiving"] .fx-pill::after { display: none; }
}
@media (max-height: 480px) {   /* a phone held sideways: the card goes back to its plain height so its buttons stay on screen */
  :root[data-season="thanksgiving"] .fx-icon { margin-top: 10px; margin-bottom: 6px; }
  :root[data-season="thanksgiving"] .fx-icon::after,
  :root[data-season="thanksgiving"] .fx-pill::before, :root[data-season="thanksgiving"] .fx-pill::after { display: none; }
}
:root[data-season="thanksgiving"] .fx-icon { position: relative; isolation: isolate; margin-top: 24px; margin-bottom: 20px; }
:root[data-season="thanksgiving"] .fx-icon::before {   /* the low light inside the wreath */
  content: ""; position: absolute; inset: -6px; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 198 108 / .36) 0, rgb(208 100 42 / .18) 46%, transparent 70%);
}
:root[data-season="thanksgiving"] .fx-icon::after {    /* the wreath */
  content: ""; position: absolute; inset: -20px; z-index: -1;
  background: url(/img/season/thanksgiving/wreath.svg) center / contain no-repeat;
}
:root[data-season="thanksgiving"] .fx-icon img { filter: drop-shadow(0 2px 3px rgb(36 16 4 / .6)) drop-shadow(0 0 10px color-mix(in srgb, var(--tier) 45%, transparent)); }
:root[data-season="thanksgiving"] .fx-meta { color: #dccaa6; }
:root[data-season="thanksgiving"] .fx-also { border-top-color: #4b3824; }
:root[data-season="thanksgiving"] .fx-also-label,
:root[data-season="thanksgiving"] .fx-off,
:root[data-season="thanksgiving"] .fx-x { color: #b3a082; }
:root[data-season="thanksgiving"] .fx-x:hover { color: var(--text); }
:root[data-season="thanksgiving"] .fx-mini { background: #2f2318; }
:root[data-season="thanksgiving"] .fx-mini.more { --mini: #6e5436; }

/* The collection log notice keeps its in-game shape, in candlelit browns. */
:root[data-season="thanksgiving"] .clog-toast { background: #33241a; border-color: #150d07; outline-color: #6e5436; }
:root[data-season="thanksgiving"] .clog-toast .t-title { color: #f2a93b; }
:root[data-season="thanksgiving"] .clog-toast .t-slot { background: #21170f; border-color: #6e5436; }

/* ================= Christmas, 1 Dec to 1 Jan: a snowy night ================= */
:root[data-season="christmas"] {
  --bg: #0b1a20;          /* midnight blue-green */
  --panel: #12262d;
  --panel-2: #193239;
  --border: #2e4d55;
  --text: #eef4f1;        /* snow */
  --muted: #9bb4b6;
  --accent: #f2c14e;      /* warm window gold */
  --accent-2: #ffd98a;
  --link: #ffd98a;
  --heading-sm: #f2c14e;
  --good: #5fd97a;
  --bad: #ff7468;         /* a touch lighter than the usual red: 4.5:1 on --panel-2 too */
  --slot-bg: #1d3a42;
  --slot-border: #36565e;
  --shadow: 0 2px 12px rgb(0 0 0 / .45);
}
/* Cold moonlight from the top right, warm window light from the bottom left. */
:root[data-season="christmas"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vmax 46vmax at 88% -12%, rgb(120 205 235 / .16), transparent 62%),
    radial-gradient(60vmax 36vmax at 6% 112%, rgb(255 196 90 / .09), transparent 62%);
}
:root[data-season="christmas"] .topbar {
  background-image: url(/img/season/christmas/corner.svg), url(/img/season/christmas/corner-r.svg);
  background-repeat: no-repeat; background-position: left top, right top; background-size: 84px, 84px;
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
:root[data-season="christmas"] .lvl-fill {   /* red to gold under a candy-cane stripe */
  background: repeating-linear-gradient(-45deg, transparent 0 5px, rgb(255 255 255 / .16) 5px 10px), linear-gradient(90deg, #b3262d, #f2c14e 62%, #fff3c9);
}

/* Snow over the top of the page: six flakes, each sinking for about twenty seconds and swaying as it goes; three are
   snowflakes (flyer.svg), three are far-away dots. They fade out before the bottom of the strip. */
:root[data-season="christmas"] .season-sky {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 96px; overflow: hidden; pointer-events: none;
  z-index: 41;   /* over the sticky level bar (40), under the language menu (45) */
}
:root[data-season="christmas"] .season-sky i {
  position: absolute; top: 0; left: 7%; opacity: 0;
  animation: xmasFall 21s linear -4s infinite normal;
}
:root[data-season="christmas"] .season-sky i > b {
  display: block; width: 13px; height: 15px; background: #eaf7ff; opacity: 1; border-radius: 0;
  -webkit-mask: url(/img/season/christmas/flyer.svg) center / contain no-repeat; mask: url(/img/season/christmas/flyer.svg) center / contain no-repeat;
  animation: xmasSway 4.6s ease-in-out infinite alternate;
}
:root[data-season="christmas"] .season-sky i:nth-child(2) { left: 23%; animation-duration: 27s; animation-delay: -15s; }
:root[data-season="christmas"] .season-sky i:nth-child(3) { left: 41%; animation-duration: 18s; animation-delay: -9s; }
:root[data-season="christmas"] .season-sky i:nth-child(4) { left: 58%; animation-duration: 30s; animation-delay: -22s; }
:root[data-season="christmas"] .season-sky i:nth-child(5) { left: 76%; animation-duration: 23s; animation-delay: -1s; }
:root[data-season="christmas"] .season-sky i:nth-child(6) { left: 91%; animation-duration: 28s; animation-delay: -12s; }
:root[data-season="christmas"] .season-sky i:nth-child(3) > b { width: 10px; height: 12px; animation-duration: 3.8s; }
:root[data-season="christmas"] .season-sky i:nth-child(5) > b { width: 11px; height: 13px; animation-duration: 5.4s; }
:root[data-season="christmas"] .season-sky i:nth-child(2n) > b {   /* the dots */
  width: 4px; height: 4px; border-radius: 50%; opacity: .5; -webkit-mask: none; mask: none; animation-duration: 6.2s;
}
:root[data-season="christmas"] .season-sky i:nth-child(4) > b { width: 3px; height: 3px; }
@keyframes xmasFall {
  0%   { transform: translateY(-18px); opacity: 0; }
  10%  { opacity: .85; }
  62%  { opacity: .7; }
  100% { transform: translateY(96px); opacity: 0; }
}
@keyframes xmasSway { from { transform: translateX(-9px) rotate(-30deg); } to { transform: translateX(9px) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) { :root[data-season="christmas"] .season-sky { display: none; } }

/* The rare drop card: a snowy night, icicles in the corner, the item inside a snow globe on a gold stand, Santa hats
   either side of the label. The burst's partyhats, crackers and snowflakes come from fx.js. */
:root[data-season="christmas"] .fx { background: radial-gradient(circle at 50% 45%, rgb(24 84 100 / .42), rgb(3 9 12 / .74) 70%); }
:root[data-season="christmas"] .fx.tier-rare { --tier: #f5c451; }
:root[data-season="christmas"] .fx.tier-purple { --tier: #cd94ff; }   /* lighter than usual: the label sits on blue-green here */
:root[data-season="christmas"] .fx.tier-mega { --tier: #ff85f4; }
:root[data-season="christmas"] .fx-card {
  background: url(/img/season/christmas/corner.svg) left top / 82px no-repeat, linear-gradient(180deg, #1f4250 0%, #132c35 58%, #0c1d23 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 0 34px color-mix(in srgb, var(--tier) 42%, transparent), 0 0 90px rgb(90 190 220 / .24);
}
:root[data-season="christmas"] .fx-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .1rem .6rem; }
:root[data-season="christmas"] .fx-pill::before,
:root[data-season="christmas"] .fx-pill::after {
  content: ""; flex: none; width: 22px; height: 18px; image-rendering: pixelated;   /* under its 28 x 23: the card is 300 px at most, and a long translated label must stay clear of the close button */
  background: url(/wimg/o/santa-hat-59f375a1.png) center / contain no-repeat;   /* Wimg.file('Santa hat.png') */
}
:root[data-season="christmas"] .fx-pill::after { transform: scaleX(-1); }   /* the two hats lean towards the label */
@media (max-width: 359px) {   /* the narrowest phones: a long translated label would run under the close button */
  :root[data-season="christmas"] .fx-pill::before, :root[data-season="christmas"] .fx-pill::after { display: none; }
}
@media (max-height: 480px) {   /* a phone held sideways: the card goes back to its plain height so its buttons stay on screen */
  :root[data-season="christmas"] .fx-icon { margin-top: 10px; margin-bottom: 8px; }
  :root[data-season="christmas"] .fx-icon::after,
  :root[data-season="christmas"] .fx-pill::before, :root[data-season="christmas"] .fx-pill::after { display: none; }
}
:root[data-season="christmas"] .fx-icon { position: relative; isolation: isolate; margin-top: 18px; margin-bottom: 30px; }
:root[data-season="christmas"] .fx-icon::before {   /* the snow globe: a shine on the glass, snow on its floor, night air */
  content: ""; position: absolute; inset: -8px; z-index: -2; border-radius: 50%;
  background:
    radial-gradient(30% 20% at 29% 21%, rgb(255 255 255 / .55), transparent 72%),
    radial-gradient(24% 13% at 21% 88%, #fff 0 88%, transparent 92%),
    radial-gradient(22% 12% at 79% 87%, #fff 0 88%, transparent 92%),
    radial-gradient(66% 30% at 50% 105%, #fff 0 60%, #d5ecf5 73%, transparent 75%),
    radial-gradient(circle at 50% 42%, #a9d3f5 0, #5b8fd0 34%, #2c4f93 66%, #172d63 100%);
  box-shadow: 0 0 26px 6px rgb(150 215 250 / .3), inset 0 0 0 2px rgb(235 248 255 / .55), inset -9px -9px 14px rgb(8 16 44 / .4);
}
:root[data-season="christmas"] .fx-icon::after {    /* snowflakes in the globe and its gold stand, cut out of one layer */
  content: ""; position: absolute; inset: -8px -8px -22px; z-index: -1;
  background: linear-gradient(180deg, #fff0b8 0 2px, #f2c14e 2px 9px, #b9812a 9px 11px, #e8b445 11px 13px, #d39c35 13px 19px, #8a5a14 100%) center bottom / 100% 22px no-repeat, #fff;
  --snow-mask:
    url(/img/season/christmas/flyer.svg) 9px 36px / 16px no-repeat, url(/img/season/christmas/flyer.svg) calc(100% - 15px) 24px / 13px no-repeat,
    url(/img/season/christmas/flyer.svg) calc(100% - 6px) 64px / 10px no-repeat, url(/img/season/christmas/flyer.svg) 8px 76px / 10px no-repeat,
    radial-gradient(circle, #000 1.5px, transparent 2px) 46px 5px / 5px 5px no-repeat, radial-gradient(circle, #000 1.5px, transparent 2px) 88px 10px / 5px 5px no-repeat,
    linear-gradient(#000, #000) left 50% bottom 12px / 74px 10px no-repeat,                        /* the stand: a step ... */
    linear-gradient(#000, #000) left 50% bottom 0 / 88px 12px no-repeat,                           /* ... on a foot with sloping ends */
    linear-gradient(to bottom right, transparent 50%, #000 51%) left 14px bottom 0 / 7px 12px no-repeat,
    linear-gradient(to bottom left, transparent 50%, #000 51%) right 14px bottom 0 / 7px 12px no-repeat;
  -webkit-mask: var(--snow-mask); mask: var(--snow-mask);
}
:root[data-season="christmas"] .fx-icon img { filter: drop-shadow(0 0 1.5px rgb(4 12 36 / .95)) drop-shadow(0 2px 3px rgb(4 20 28 / .6)) drop-shadow(0 0 10px color-mix(in srgb, var(--tier) 45%, transparent)); }
:root[data-season="christmas"] .fx-meta { color: #c5d8dc; }
:root[data-season="christmas"] .fx-also { border-top-color: #2e4d55; }
:root[data-season="christmas"] .fx-also-label,
:root[data-season="christmas"] .fx-off,
:root[data-season="christmas"] .fx-x { color: #9bb4b6; }
:root[data-season="christmas"] .fx-x:hover { color: var(--text); }
:root[data-season="christmas"] .fx-mini { background: #1d3a42; }
:root[data-season="christmas"] .fx-mini.more { --mini: #4a7480; }

:root[data-season="christmas"] .btn.danger:hover { color: #1a0d0b; }   /* white on this season's lighter red was too faint */

/* The collection log notice keeps its in-game shape, in night colours. */
:root[data-season="christmas"] .clog-toast { background: #173038; border-color: #071216; outline-color: #4a7480; }
:root[data-season="christmas"] .clog-toast .t-title { color: #f5c451; }
:root[data-season="christmas"] .clog-toast .t-slot { background: #0f2329; border-color: #4a7480; }