/* Holiday themes: one block per season, switched on by <html data-season="…"> (public/season.js). A block renames the
   page's colours (the tokens in style.css :root: page, windows, frames, headings) and adds its decorations; the
   layout, the kill buttons and the golden loot beam stay as they are. The pictures in img/season/ are our own
   drawings; the item sprites are the wiki copies in wimg/ (scripts/wimg-fixed.json). */

.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; }

/* ================= every theme ================= */
/* The few parts style.css paints with a fixed brown of their own, in the theme's shades. :where() keeps each rule as
   weak as the one it stands in for, so the rules that already beat that one (backpack slots, the kill buttons) still do. */
:where(:root[data-season]) .slot { box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--slot-bg) 82%, #000), inset -1px -1px 0 color-mix(in srgb, var(--slot-bg) 91%, #fff); }
:where(:root[data-season]) .chatbox { background: var(--well); border-color: var(--border); }
:where(:root[data-season]) .feed-bubble { background: color-mix(in srgb, var(--tip-bg) 80%, transparent); border-color: color-mix(in srgb, var(--brass) 70%, transparent); }
:where(:root[data-season]) .btn.primary:hover { background: var(--tab-hi); }
/* The advert for the Old School simulator keeps its own look, and whatever flies over the top bar passes behind it. */
:root[data-season] .sister-bar, :root[data-season] .sister-strip { position: relative; z-index: 42; }
/* The drop card: its picture stands in front of the theme's backdrop (::before) and what is cut out over it (::after). */
:root[data-season] .fx-icon { isolation: isolate; }
:root[data-season] .fx-icon::before { z-index: -2; border-radius: 50%; }
:root[data-season] .fx-icon::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
@media (max-height: 520px) {   /* a phone held sideways: the card is too short for a backdrop */
  :root[data-season] .fx-icon::after { display: none; }
}

/* ================= Halloween, 1 Oct to 2 Nov: a haunted night ================= */
:root[data-season="halloween"] {
  --bg: #0e0915;          /* night violet */
  --panel: #1e1826;       /* windows: charcoal with a violet cast */
  --panel-2: #272031;
  --panel-3: #31283d;
  --border: #4d3d61;
  --border-hi: #c98a55;
  --brass: #8c5527;       /* frames: tarnished copper */
  --frame-in: #51331d;
  --bar-rule: #46325b;
  --rule: #352a43;
  --row: #231c2c;
  --sect: #3c2558;
  --well: #17111e;
  --text: #ece2d4;
  --muted: #b5a6c2;
  --accent: #ff9a3d;      /* pumpkin */
  --accent-2: #ffc27d;
  --link: #c9b6ff;
  --heading-sm: #ff9a3d;
  --good: #7dde4f;
  --bad: #ff7565;
  --slot-bg: #2a2135;
  --slot-border: #44355a;
  --tab: linear-gradient(#4d3270, #36224f);
  --tab-hi: linear-gradient(#5e3f87, #432b62);
  --tab-off: #1d1726;
  --tip-bg: #120c19;
  --tip-border: #8c5527;
  --input-bg: #150f1c;
}
/* 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;
}
: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 advert (42) and the live feed (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: a violet night around the golden beam, a cobweb in the card's corner, the item in front of a
   full moon with bats across it, a pumpkin at each end of the rule under the title. The burst's pumpkins,
   hallowe'en masks and bats come from fx.js. */
:root[data-season="halloween"] .fx { background: radial-gradient(circle at 50% 45%, rgb(64 26 116 / .42), rgb(8 5 12 / .76) 70%); }
:root[data-season="halloween"] .fx-card {
  background: url(/img/season/halloween/web.svg) left top / 82px no-repeat, color-mix(in srgb, var(--panel) 94%, transparent);
}
:root[data-season="halloween"] .fx-title::after {
  height: 22px; margin: 6px 5% 0;
  background:
    url(/wimg/o/pumpkin-5d1181c6.png) left center / auto 22px no-repeat,    /* Wimg.file('Pumpkin.png') */
    url(/wimg/o/pumpkin-5d1181c6.png) right center / auto 22px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tier) 80%, transparent), transparent) center / calc(100% - 70px) 1px no-repeat;
}
:root[data-season="halloween"] .fx-icon::before {   /* the moon */
  width: calc(var(--pic) + 8px); height: calc(var(--pic) + 8px); margin: calc(var(--pic) / -2 - 4px) 0 0 calc(var(--pic) / -2 - 4px);
  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 */
  top: -6px; bottom: -6px; left: 50%; width: calc(var(--pic) + 52px); margin-left: calc(var(--pic) / -2 - 26px);
  background: #150d1f;
  --bats: url(/img/season/halloween/bat.svg) 4px 12% / 24% no-repeat, url(/img/season/halloween/bat.svg) calc(100% - 8px) 43% / 16% no-repeat;
  -webkit-mask: var(--bats); mask: var(--bats);
}
:root[data-season="halloween"] .fx-icon img { filter: drop-shadow(0 2px 3px rgb(20 10 30 / .55)); }

/* ================= Thanksgiving, 3 Nov to the day after it: a harvest table by candlelight ================= */
:root[data-season="thanksgiving"] {
  --bg: #120b06;          /* dark walnut */
  --panel: #24190f;
  --panel-2: #2e2115;
  --panel-3: #3a2b1b;
  --border: #5b4428;
  --border-hi: #b9925a;
  --brass: #8a6230;       /* frames: copper */
  --frame-in: #5a3f20;
  --bar-rule: #4f3a22;
  --rule: #3d2d1c;
  --row: #2a1e13;
  --sect: #5c1f22;        /* cranberry */
  --well: #1b130b;
  --text: #f1e3c6;
  --muted: #bca887;
  --accent: #f2a93b;      /* candle amber */
  --accent-2: #ffd27f;
  --link: #ffd27f;
  --heading-sm: #f2a93b;
  --good: #84d16a;
  --bad: #ff7a66;
  --slot-bg: #30241a;
  --slot-border: #4c3a26;
  --tab: linear-gradient(#6e2528, #4c1719);
  --tab-hi: linear-gradient(#843034, #5c1e21);
  --tab-off: #281c13;
  --tip-bg: #160e08;
  --tip-border: #8a6230;
  --input-bg: #19110a;
}
/* 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;
}
: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 advert (42) and the live feed (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: candlelight around the golden beam, the item inside a wreath of wheat, oak leaves and acorns
   with a low warm light behind it, a roast turkey at each end of the rule under the title. 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 / .78) 70%); }
:root[data-season="thanksgiving"] .fx-title::after {
  height: 22px; margin: 6px 5% 0;
  background:
    url(/wimg/o/cooked-turkey-f81fc69e.png) left center / auto 22px no-repeat,    /* Wimg.file('Cooked turkey.png') */
    url(/wimg/o/cooked-turkey-f81fc69e.png) right center / auto 22px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tier) 80%, transparent), transparent) center / calc(100% - 70px) 1px no-repeat;
  filter: drop-shadow(0 0 4px rgb(255 190 92 / .6));   /* candlelight: the sprite is dark brown on a dark card */
}
:root[data-season="thanksgiving"] .fx-icon { margin-top: 26px; margin-bottom: 22px; }
:root[data-season="thanksgiving"] .fx-icon::before {   /* the low light inside the wreath */
  width: calc(var(--pic) + 12px); height: calc(var(--pic) + 12px); margin: calc(var(--pic) / -2 - 6px) 0 0 calc(var(--pic) / -2 - 6px);
  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 */
  inset: -20px 0; background: url(/img/season/thanksgiving/wreath.svg) center / contain no-repeat;
}
:root[data-season="thanksgiving"] .fx-icon img { max-width: calc(var(--pic) * .8); max-height: calc(100% - 30px); }   /* inside the wreath */
@media (max-height: 520px) {
  :root[data-season="thanksgiving"] .fx-icon { margin-top: 4px; margin-bottom: 2px; }
  :root[data-season="thanksgiving"] .fx-icon img { max-height: calc(100% - 10px); }
}

/* ================= Christmas, 1 Dec to 1 Jan: a snowy night ================= */
:root[data-season="christmas"] {
  --bg: #07151a;          /* midnight blue-green */
  --panel: #11262b;       /* windows: pine */
  --panel-2: #173137;
  --panel-3: #1e3c43;
  --border: #36565c;
  --border-hi: #d3b96e;
  --brass: #94803f;       /* frames: gold */
  --frame-in: #5d5230;
  --bar-rule: #2b494f;
  --rule: #234148;
  --row: #152d33;
  --sect: #6b1d21;        /* holly red */
  --well: #0c1f24;
  --text: #eef4f1;        /* snow */
  --muted: #a5bdbd;
  --accent: #f2c14e;      /* warm window gold */
  --accent-2: #ffd98a;
  --link: #a9dcee;
  --heading-sm: #f2c14e;
  --good: #5fd97a;
  --bad: #ff8076;
  --slot-bg: #1b373e;
  --slot-border: #33545b;
  --tab: linear-gradient(#8a2a2c, #621b1f);
  --tab-hi: linear-gradient(#a23336, #742226);
  --tab-off: #13282e;
  --tip-bg: #0a1a1f;
  --tip-border: #94803f;
  --input-bg: #0b1b20;
}
/* 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;
}
: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);
}
/* The collection log's rarest chance: style.css's red is too dark on a pine slot. */
:root[data-season="christmas"] .pct.p5 { color: #ff7a7a; }

/* 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 advert (42) and the live feed (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 cold night around the golden beam, icicles in the card's corner, the item inside a snow globe
   on a gold stand, a Santa hat at each end of the rule under the title. 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 / .76) 70%); }
:root[data-season="christmas"] .fx-card {
  background: url(/img/season/christmas/corner.svg) left top / 82px no-repeat, color-mix(in srgb, var(--panel) 94%, transparent);
}
:root[data-season="christmas"] .fx-title::after {
  height: 22px; margin: 6px 5% 0;
  background:
    url(/wimg/o/santa-hat-59f375a1.png) left center / auto 22px no-repeat,    /* Wimg.file('Santa hat.png') */
    url(/wimg/o/santa-hat-59f375a1.png) right center / auto 22px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--tier) 80%, transparent), transparent) center / calc(100% - 70px) 1px no-repeat;
}
:root[data-season="christmas"] .fx-icon { margin-top: 18px; margin-bottom: 32px; }
:root[data-season="christmas"] .fx-icon::before {   /* the snow globe: a shine on the glass, snow on its floor, night air */
  width: calc(var(--pic) + 16px); height: calc(var(--pic) + 16px); margin: calc(var(--pic) / -2 - 8px) 0 0 calc(var(--pic) / -2 - 8px);
  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 */
  top: -8px; bottom: -24px; left: 50%; width: calc(var(--pic) + 16px); margin-left: calc(var(--pic) / -2 - 8px);
  background: linear-gradient(180deg, #fff0b8 0 2px, #f2c14e 2px 9px, #b9812a 9px 11px, #e8b445 11px 13px, #d39c35 13px 19px, #8a5a14 100%) center bottom / 100% 24px no-repeat, #fff;
  --flake: url(/img/season/christmas/flyer.svg);
  --stand: calc(var(--pic) * .7);   /* the stand's width at the floor */
  --snow-mask:
    var(--flake) 6% 28% / 12% no-repeat, var(--flake) 90% 18% / 10% no-repeat,
    var(--flake) 96% 50% / 8% no-repeat, var(--flake) 5% 60% / 8% no-repeat,
    radial-gradient(circle, #000 1.5px, transparent 2px) 38% 4% / 5px 5px no-repeat, radial-gradient(circle, #000 1.5px, transparent 2px) 72% 8% / 5px 5px no-repeat,
    linear-gradient(#000, #000) center bottom 13px / calc(var(--stand) - 14px) 11px no-repeat,     /* the stand: a step ... */
    linear-gradient(#000, #000) center bottom / var(--stand) 13px no-repeat,                        /* ... on a foot with sloping ends */
    linear-gradient(to bottom right, transparent 50%, #000 51%) calc(50% - var(--stand) / 2 - 3px) bottom / 7px 13px no-repeat,
    linear-gradient(to bottom left, transparent 50%, #000 51%) calc(50% + var(--stand) / 2 + 3px) bottom / 7px 13px no-repeat;
  -webkit-mask: var(--snow-mask); mask: var(--snow-mask);
}
:root[data-season="christmas"] .fx-icon img { max-width: calc(var(--pic) * .86); filter: drop-shadow(0 0 1.5px rgb(4 12 36 / .95)) drop-shadow(0 2px 3px rgb(4 20 28 / .6)); }
@media (max-height: 520px) {
  :root[data-season="christmas"] .fx-icon { margin-top: 4px; margin-bottom: 2px; }
}

/* ================= every theme, on phones ================= */
/* After the themes' own top-bar rules, which it has to beat: the header is the logo and the name from edge to edge,
   so the corner pictures keep to the corners. */
@media (max-width: 600px) {
  :root[data-season] .topbar { background-size: 60px, 60px; }
}