/* ==========================================================================
   SEASONAL SKIN -- HALLOWEEN ("Haunted Header")
   Loaded only while app/models/season.py says a Halloween event is running
   (by the real calendar), and every selector hangs off
   :root[data-season="halloween"], so when season.js sees the event end in a tab
   that stayed open it removes that attribute and the page undresses with the
   sheet still loaded.

   Scope is the site chrome only: the topbar, the tab strip and its phone
   drawer, the news ticker, a graveyard strip on the footer and (desktop) the
   empty gutters.  The store's own markup is never styled from here.

   Rules of the house:
   * every decoration is pointer-events:none, absolutely or fixed positioned
     inside an overflow:hidden box -- it can never take a click or add width;
     the one exception is the footer ghost, which says boo when tapped;
   * all art is inline SVG, the silhouettes drawn as masks so one drawing
     takes the colour of the theme it is in;
   * every animation lives inside prefers-reduced-motion: no-preference, so a
     player who asked for less motion gets a still scene, not a broken one;
   * only transform and opacity animate (the bats' two-frame wing flap is the
     one mask-position animation, on three 14x7 boxes).
   ========================================================================== */

/* ------------------------------------------------------------ (a) tokens */
:root[data-season="halloween"] {
  --topbar: linear-gradient(#ff9f2e, #f58a1f 40%, #e2730f 78%, #c65a08);
  --topbar-edge: #140a06;
  --topbar-ink: #1a0904;
  --topbar-tag: #3a1606;
  --tabbar: linear-gradient(#241a28, #0d0810);
  --tabbar-edge: #ff8c1a;
  --tabbar-ink: #ffb35c;
  --tabbar-hover: #b84a06;
  --ticker-bg: #140b06;
  --ticker-edge: #ff8c1a;
  --ticker-ink: #ffcf9a;
  --ticker-tag: #ff8c1a;
  --hw-silhouette: #140a10;
  --hw-window: #ffd23f;
  --hw-fog: rgba(255, 240, 225, .30);
  --hw-yard: #2b1a30;
  --hw-yard-glow: rgba(255, 140, 26, .22);
  --hw-ghost-glow: none;
  --hw-web: rgba(20, 10, 6, .38);
  --hw-thread: rgba(20, 10, 6, .45);
  --hw-spider: #241830;
  --hw-topnav-hover: rgba(20, 10, 6, .14);
  --hw-on-bg: #140a06;
  --hw-on-ink: #ffb35c;
  --sn-chip-bg: linear-gradient(#2a160a, #0f0805);
  --sn-chip-edge: #ff8c1a;
  --sn-chip-ink: #ffb35c;
  --sn-icon: var(--hw-art-pumpkin-lit);
  /* the art, each drawing once (inline SVG, pixel grid) */
  --hw-art-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM13 0h1v1H13zM0 1h2v1H0zM12 1h2v1H12zM19 1h1v1H19zM22 1h1v1H22zM1 2h2v1H1zM5 2h1v1H5zM8 2h1v1H8zM11 2h2v1H11zM18 2h6v1H18zM2 3h10v1H2zM15 3h12v1H15zM4 4h6v1H4zM14 4h3v1H14zM19 4h4v1H19zM25 4h3v1H25zM5 5h4v1H5zM14 5h2v1H14zM20 5h2v1H20zM26 5h2v1H26zM6 6h2v1H6zM14 6h1v1H14zM27 6h1v1H27z'/%3E%3C/svg%3E");
  --hw-art-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM9 0h1v1H9zM0 1h2v1H0zM3 1h1v1H3zM6 1h1v1H6zM8 1h2v1H8zM1 2h8v1H1zM3 3h4v1H3zM4 4h2v1H4z'/%3E%3C/svg%3E");
  --hw-art-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23160c12' d='M4 0h3v1H4zM2 1h2v1H2zM7 1h2v1H7zM1 2h1v1H1zM9 2h1v1H9zM0 3h1v9H0zM10 3h1v9H10zM3 11h1v1H3zM7 11h1v1H7zM1 12h2v1H1zM4 12h3v1H4zM8 12h2v1H8z'/%3E%3Cpath fill='%23f7f3ff' d='M4 1h3v1H4zM2 2h6v1H2zM1 3h8v8H1zM1 11h2v1H1zM4 11h3v1H4zM8 11h1v1H8z'/%3E%3Cpath fill='%23d8d0ec' d='M8 2h1v1H8zM9 3h1v9H9z'/%3E%3C/svg%3E");
  --hw-art-jack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath fill='%234f7a1e' d='M6 0h2v1H6zM6 1h1v1H6z'/%3E%3Cpath fill='%23ff8c1a' d='M3 2h3v1H3zM8 2h3v1H8zM1 3h4v1H1zM6 3h2v1H6zM9 3h4v1H9zM0 4h3v1H0zM5 4h4v1H5zM11 4h3v1H11zM0 5h2v1H0zM6 5h2v1H6zM12 5h2v1H12zM0 6h6v1H0zM8 6h6v1H8zM0 7h2v2H0zM3 7h8v1H3zM12 7h2v2H12zM0 9h3v1H0zM5 9h1v1H5zM8 9h1v1H8zM11 9h3v1H11zM1 10h12v1H1zM3 11h8v1H3z'/%3E%3Cpath fill='%23d8650a' d='M6 2h2v1H6zM5 3h1v1H5zM8 3h1v1H8z'/%3E%3Cpath fill='%23ffe066' d='M3 4h2v1H3zM9 4h2v1H9zM2 5h4v1H2zM8 5h4v1H8zM6 6h2v1H6zM2 7h1v1H2zM11 7h1v1H11zM2 8h10v1H2zM3 9h2v1H3zM6 9h2v1H6zM9 9h2v1H9z'/%3E%3C/svg%3E");
  --hw-art-pumpkin-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%2345424a' d='M5 0h2v1H5zM5 1h1v1H5z'/%3E%3Cpath fill='%235b5660' d='M2 2h2v1H2zM5 2h1v4H5zM7 2h2v1H7zM1 3h3v1H1zM7 3h3v1H7zM0 4h2v1H0zM3 4h1v1H3zM7 4h1v1H7zM9 4h2v1H9zM0 5h1v1H0zM10 5h1v1H10zM0 6h4v1H0zM7 6h4v1H7zM0 7h1v1H0zM10 7h1v1H10zM0 8h2v1H0zM3 8h1v1H3zM7 8h1v1H7zM9 8h2v1H9zM1 9h3v1H1zM5 9h1v2H5zM7 9h3v1H7zM2 10h2v1H2zM7 10h2v1H7z'/%3E%3Cpath fill='%234b4750' d='M4 2h1v5H4zM6 2h1v5H6zM4 9h1v2H4zM6 9h1v2H6z'/%3E%3Cpath fill='%232a282d' d='M2 4h1v1H2zM8 4h1v1H8zM1 5h3v1H1zM7 5h3v1H7zM5 6h1v1H5zM1 7h9v1H1zM2 8h1v1H2zM4 8h3v1H4zM8 8h1v1H8z'/%3E%3C/svg%3E");
  --hw-art-pumpkin-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%235f8a24' d='M5 0h2v1H5zM5 1h1v1H5z'/%3E%3Cpath fill='%23ff8c1a' d='M2 2h2v1H2zM5 2h1v4H5zM7 2h2v1H7zM1 3h3v1H1zM7 3h3v1H7zM0 4h2v1H0zM3 4h1v1H3zM7 4h1v1H7zM9 4h2v1H9zM0 5h1v1H0zM10 5h1v1H10zM0 6h4v1H0zM7 6h4v1H7zM0 7h1v1H0zM10 7h1v1H10zM0 8h2v1H0zM3 8h1v1H3zM7 8h1v1H7zM9 8h2v1H9zM1 9h3v1H1zM5 9h1v2H5zM7 9h3v1H7zM2 10h2v1H2zM7 10h2v1H7z'/%3E%3Cpath fill='%23e0700c' d='M4 2h1v5H4zM6 2h1v5H6zM4 9h1v2H4zM6 9h1v2H6z'/%3E%3Cpath fill='%23ffe066' d='M2 4h1v1H2zM8 4h1v1H8zM1 5h3v1H1zM7 5h3v1H7zM5 6h1v1H5zM1 7h9v1H1zM2 8h1v1H2zM4 8h3v1H4zM8 8h1v1H8z'/%3E%3C/svg%3E");
  --hw-art-pumpkin-unlit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%233d4a1a' d='M5 0h2v1H5zM5 1h1v1H5z'/%3E%3Cpath fill='%236a3208' d='M2 2h2v1H2zM5 2h1v4H5zM7 2h2v1H7zM1 3h3v1H1zM7 3h3v1H7zM0 4h2v1H0zM3 4h1v1H3zM7 4h1v1H7zM9 4h2v1H9zM0 5h1v1H0zM10 5h1v1H10zM0 6h4v1H0zM7 6h4v1H7zM0 7h1v1H0zM10 7h1v1H10zM0 8h2v1H0zM3 8h1v1H3zM7 8h1v1H7zM9 8h2v1H9zM1 9h3v1H1zM5 9h1v2H5zM7 9h3v1H7zM2 10h2v1H2zM7 10h2v1H7z'/%3E%3Cpath fill='%23552705' d='M4 2h1v5H4zM6 2h1v5H6zM4 9h1v2H4zM6 9h1v2H6z'/%3E%3Cpath fill='%231e0d03' d='M2 4h1v1H2zM8 4h1v1H8zM1 5h3v1H1zM7 5h3v1H7zM5 6h1v1H5zM1 7h9v1H1zM2 8h1v1H2zM4 8h3v1H4zM8 8h1v1H8z'/%3E%3C/svg%3E");
  --hw-art-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' shape-rendering='crispEdges'%3E%3Cpath d='M85 0h4v1H85zM120 0h2v1H120zM84 1h8v1H84zM119 1h4v1H119zM66 2h2v2H66zM83 2h9v1H83zM118 2h6v2H118zM190 2h2v1H190zM45 3h2v2H45zM62 3h1v1H62zM82 3h10v1H82zM189 3h4v1H189zM63 4h5v1H63zM71 4h1v1H71zM81 4h12v1H81zM115 4h12v1H115zM176 4h2v2H176zM188 4h6v1H188zM34 5h5v1H34zM43 5h6v2H43zM63 5h1v1H63zM66 5h5v1H66zM80 5h14v1H80zM113 5h16v1H113zM187 5h8v1H187zM33 6h7v5H33zM53 6h4v1H53zM66 6h2v1H66zM70 6h1v1H70zM79 6h16v1H79zM114 6h14v5H114zM174 6h6v2H174zM186 6h10v1H186zM0 7h1v2H0zM4 7h1v2H4zM8 7h1v2H8zM12 7h1v2H12zM16 7h1v2H16zM20 7h1v2H20zM24 7h1v2H24zM28 7h1v2H28zM45 7h2v4H45zM52 7h6v4H52zM64 7h4v1H64zM80 7h14v4H80zM102 7h3v1H102zM136 7h1v1H136zM144 7h1v2H144zM148 7h1v2H148zM152 7h1v2H152zM156 7h1v2H156zM160 7h1v2H160zM164 7h1v2H164zM168 7h1v2H168zM185 7h12v1H185zM207 7h4v1H207zM218 7h1v1H218zM66 8h2v3H66zM101 8h5v3H101zM135 8h4v1H135zM176 8h2v3H176zM186 8h10v3H186zM206 8h6v3H206zM217 8h4v1H217zM226 8h1v2H226zM230 8h1v2H230zM234 8h1v2H234zM238 8h1v3H238zM0 9h29v1H0zM134 9h6v2H134zM144 9h25v1H144zM216 9h6v2H216zM0 10h1v1H0zM4 10h1v1H4zM8 10h1v1H8zM12 10h1v1H12zM16 10h1v1H16zM20 10h1v1H20zM24 10h1v1H24zM28 10h1v1H28zM144 10h1v1H144zM148 10h1v1H148zM152 10h1v1H152zM156 10h1v1H156zM160 10h1v1H160zM164 10h1v1H164zM168 10h1v1H168zM226 10h11v1H226zM0 11h240v1H0z'/%3E%3C/svg%3E");
  --hw-art-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h1v1H7zM6 1h3v1H6zM0 2h1v1H0zM5 2h5v1H5zM14 2h1v1H14zM1 3h1v1H1zM4 3h7v1H4zM13 3h1v1H13zM2 4h11v1H2zM0 5h1v1H0zM4 5h7v1H4zM14 5h1v1H14zM1 6h13v1H1zM4 7h7v1H4zM2 8h2v1H2zM5 8h5v1H5zM11 8h2v1H11zM1 9h1v1H1zM6 9h3v1H6zM13 9h1v1H13zM0 10h1v1H0zM7 10h1v1H7zM14 10h1v1H14z'/%3E%3C/svg%3E");
  --hw-art-spider-eyes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12' shape-rendering='crispEdges'%3E%3Cpath d='M5 4h1v1H5zM9 4h1v1H9z'/%3E%3C/svg%3E");
  --hw-art-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' shape-rendering='crispEdges'%3E%3Cpath d='M9 0h14v1H9zM5 1h22v2H5zM2 3h28v3H2zM0 6h32v2H0zM0 8h11v5H0zM14 8h1v2H14zM16 8h1v5H16zM20 8h12v3H20zM12 9h1v1H12zM18 9h1v1H18zM13 10h2v1H13zM12 11h1v2H12zM14 11h1v2H14zM18 11h14v2H18zM0 13h32v11H0z'/%3E%3C/svg%3E");
  --hw-art-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M0 0L44.0 0.0M0 0L40.7 16.8M0 0L31.1 31.1M0 0L16.8 40.7M0 0L0.0 44.0M9.0 0.0Q7.2 1.4 8.3 3.4Q6.1 4.1 6.4 6.4Q4.1 6.1 3.4 8.3Q1.4 7.2 0.0 9.0M17.0 0.0Q13.7 2.7 15.7 6.5Q11.6 7.7 12.0 12.0Q7.7 11.6 6.5 15.7Q2.7 13.7 0.0 17.0M26.0 0.0Q20.9 4.2 24.0 9.9Q17.7 11.8 18.4 18.4Q11.8 17.7 9.9 24.0Q4.2 20.9 0.0 26.0M36.0 0.0Q29.0 5.8 33.3 13.8Q24.5 16.4 25.5 25.5Q16.4 24.5 13.8 33.3Q5.8 29.0 0.0 36.0' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --hw-art-windows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' shape-rendering='crispEdges'%3E%3Cpath d='M120 7h2v3H120zM82 8h2v2H82zM89 8h2v2H89zM116 8h1v1H116zM125 8h1v1H125zM135 9h1v1H135zM138 9h1v1H138zM190 9h2v2H190zM217 9h1v1H217zM220 9h1v1H220zM136 10h2v1H136zM218 10h2v1H218z'/%3E%3C/svg%3E");
  --hw-art-yard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' shape-rendering='crispEdges'%3E%3Cpath d='M114 1h2v1H114zM112 2h2v2H112zM101 4h2v2H101zM110 4h4v5H110zM103 6h3v3H103zM121 7h2v2H121zM106 9h8v2H106zM119 9h2v3H119zM66 10h3v3H66zM110 11h4v1H110zM110 12h9v2H110zM0 13h1v1H0zM6 13h1v1H6zM12 13h1v1H12zM18 13h1v1H18zM24 13h1v1H24zM30 13h1v1H30zM36 13h1v1H36zM63 13h9v3H63zM146 13h1v1H146zM152 13h1v1H152zM158 13h1v1H158zM164 13h1v1H164zM170 13h1v1H170zM176 13h1v1H176zM182 13h1v1H182zM0 14h2v3H0zM6 14h2v3H6zM12 14h2v3H12zM18 14h2v3H18zM24 14h2v3H24zM30 14h2v3H30zM36 14h2v3H36zM48 14h8v1H48zM106 14h2v1H106zM110 14h4v1H110zM146 14h2v3H146zM152 14h2v3H152zM158 14h2v3H158zM164 14h2v3H164zM170 14h2v3H170zM176 14h2v3H176zM182 14h2v3H182zM47 15h10v1H47zM108 15h6v2H108zM46 16h12v10H46zM66 16h3v10H66zM79 16h8v1H79zM132 16h7v1H132zM0 17h38v2H0zM78 17h10v9H78zM110 17h4v9H110zM131 17h9v1H131zM146 17h38v2H146zM130 18h11v8H130zM0 19h2v3H0zM6 19h2v3H6zM12 19h2v3H12zM18 19h2v3H18zM24 19h2v3H24zM30 19h2v3H30zM36 19h2v3H36zM146 19h2v3H146zM152 19h2v3H152zM158 19h2v3H158zM164 19h2v3H164zM170 19h2v3H170zM176 19h2v3H176zM182 19h2v3H182zM190 19h4v1H190zM189 20h6v1H189zM188 21h8v5H188zM0 22h38v2H0zM146 22h38v2H146zM0 24h2v2H0zM6 24h2v2H6zM12 24h2v2H12zM18 24h2v2H18zM24 24h2v2H24zM30 24h2v2H30zM36 24h2v2H36zM146 24h2v2H146zM152 24h2v2H152zM158 24h2v2H158zM164 24h2v2H164zM170 24h2v2H170zM176 24h2v2H176zM182 24h2v2H182zM0 26h200v2H0z'/%3E%3C/svg%3E");
}
:root[data-season="halloween"][data-theme="dark"] {
  --topbar: linear-gradient(#24110a, #6e2c05 32%, #8a3a06 62%, #5a2303);
  --topbar-edge: #000;
  --topbar-ink: #fff1e0;
  --topbar-tag: #ffc58a;
  --tabbar: linear-gradient(#1a121d, #07050a);
  --tabbar-edge: #ff8c1a;
  --tabbar-ink: #ffb35c;
  --tabbar-hover: #b84a06;
  --ticker-bg: #0e080b;
  --ticker-edge: #7a3a0a;
  --ticker-ink: #ffb35c;
  --ticker-tag: #ff8c1a;
  --hw-silhouette: #050307;
  --hw-fog: rgba(190, 180, 215, .16);
  --hw-yard: #05030a;
  --hw-yard-glow: rgba(255, 140, 26, .34);
  --hw-ghost-glow: drop-shadow(0 0 3px rgba(107, 255, 154, .35));
  --hw-web: rgba(255, 228, 196, .26);
  --hw-thread: rgba(255, 228, 196, .38);
  --hw-spider: #3a2a4a;
  --hw-topnav-hover: rgba(255, 214, 160, .14);
  --hw-on-bg: #ff8c1a;
  --hw-on-ink: #140a06;
}
@media (prefers-color-scheme: dark) {
  :root[data-season="halloween"]:not([data-theme="light"]) {
    --topbar: linear-gradient(#24110a, #6e2c05 32%, #8a3a06 62%, #5a2303);
    --topbar-edge: #000;
    --topbar-ink: #fff1e0;
    --topbar-tag: #ffc58a;
    --tabbar: linear-gradient(#1a121d, #07050a);
    --tabbar-edge: #ff8c1a;
    --tabbar-ink: #ffb35c;
    --tabbar-hover: #b84a06;
    --ticker-bg: #0e080b;
    --ticker-edge: #7a3a0a;
    --ticker-ink: #ffb35c;
    --ticker-tag: #ff8c1a;
    --hw-silhouette: #050307;
    --hw-fog: rgba(190, 180, 215, .16);
    --hw-yard: #05030a;
    --hw-yard-glow: rgba(255, 140, 26, .34);
    --hw-ghost-glow: drop-shadow(0 0 3px rgba(107, 255, 154, .35));
    --hw-web: rgba(255, 228, 196, .26);
    --hw-thread: rgba(255, 228, 196, .38);
    --hw-spider: #3a2a4a;
    --hw-topnav-hover: rgba(255, 214, 160, .14);
    --hw-on-bg: #ff8c1a;
    --hw-on-ink: #140a06;
  }
}

/* ------------------------------------------------------ (b) chrome scope */
:root[data-season="halloween"] .topbar { position: relative; isolation: isolate; --focus: #140a06; }
:root[data-season="halloween"][data-theme="dark"] .topbar { --focus: #ffd23f; }
@media (prefers-color-scheme: dark) {
  :root[data-season="halloween"]:not([data-theme="light"]) .topbar { --focus: #ffd23f; }
}
:root[data-season="halloween"] .topbar > .wrap { position: relative; z-index: 1; }
:root[data-season="halloween"] .topbar .topnav a:hover { background: var(--hw-topnav-hover); }
:root[data-season="halloween"] .topbar .topnav a.on,
:root[data-season="halloween"] .topbar .topnav a.on:hover { background: var(--hw-on-bg); color: var(--hw-on-ink); }
:root[data-season="halloween"] .topbar .wallet { background: rgba(20, 10, 6, .72); border-color: rgba(255, 179, 92, .55); }
:root[data-season="halloween"] .navtoggle { background: rgba(20, 10, 6, .6); border-color: rgba(255, 179, 92, .5); }

/* ---------------------------------------------------------- (c) tab strip
   A candy-corn stripe along the top, and a pumpkin in every tab -- drawn
   inside the padding the tab already had (6/13 becomes 6/9 + 17 on the
   left), so no tab gets a pixel wider.  The lit pumpkin is a second layer
   that fades in on hover, focus, the current page -- and always on Market,
   the one lantern burning on every page. */
:root[data-season="halloween"] .tabbar {
  background: linear-gradient(#ff8c1a 0 1px, #ffd23f 1px 2px, #fff3d6 2px 3px, transparent 3px),
              var(--tabbar);
}
:root[data-season="halloween"] .tabbar a { position: relative; padding: 6px 9px 6px 17px; }
:root[data-season="halloween"] .tabbar a::before,
:root[data-season="halloween"] .tabbar a::after {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px; pointer-events: none;
  background: var(--hw-art-pumpkin-unlit) 0 0 / 100% 100% no-repeat;
}
:root[data-season="halloween"] .tabbar a::after {
  background-image: var(--hw-art-pumpkin-lit);
  filter: drop-shadow(0 0 2px rgba(255, 170, 40, .85));
  opacity: 0;
}
:root[data-season="halloween"] .tabbar a:hover::after,
:root[data-season="halloween"] .tabbar a:focus-visible::after,
:root[data-season="halloween"] .tabbar a:active::after,
:root[data-season="halloween"] .tabbar a.on::after,
:root[data-season="halloween"] .tabbar a[href="/market"]::after { opacity: 1; }
:root[data-season="halloween"] .tabbar a.off::before { background-image: var(--hw-art-pumpkin-grey); }
:root[data-season="halloween"] .tabbar a.off::after { display: none; }
:root[data-season="halloween"] .tabbar .sn-navtag {
  display: none; margin-left: auto; padding: 2px 5px; flex: 0 0 auto;
  background: #ff8c1a; color: #140a06; border: 1px solid #140a06; border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255, 236, 196, .75), inset -1px -1px 0 rgba(122, 52, 0, .55);
  font-size: 9px; font-weight: bold; line-height: 11px; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap;
}
:root[data-season="halloween"] .tabbar .sn-navtag span { text-transform: none; }
:root[data-season="halloween"] .sn-drawer-row .sn-fx-switch,
:root[data-season="halloween"] .sn-settings-row .sn-fx-switch { flex: 0 0 auto; }
:root[data-season="halloween"] .sn-fx-switch[aria-checked="true"] {
  background: linear-gradient(#ffad4a, #ff8c1a 55%, #e2730f); border-color: #140a06;
}

/* ------------------------------------------------------------- (d) ticker
   The event chip: a bevelled badge on the news strip.  Its ::before is
   blown up to the strip's full 20px, so the whole height is the target. */
:root[data-season="halloween"] .ticker .sn-chip,
:root[data-season="halloween"] .ticker .sn-chip:visited {
  position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 16px; padding: 0 5px 0 3px;
  background: var(--sn-chip-bg); border: 1px solid var(--sn-chip-edge); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, .35), inset 0 -1px 0 rgba(0, 0, 0, .6);
  color: var(--sn-chip-ink); font-size: 9px; font-weight: bold; line-height: 14px;
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
:root[data-season="halloween"] .ticker .sn-chip::before { content: ""; position: absolute; inset: -3px -5px; }
:root[data-season="halloween"] .ticker .sn-chip:hover,
:root[data-season="halloween"] .ticker .sn-chip:focus-visible { background: #ff8c1a; color: #140a06; text-decoration: none; }
:root[data-season="halloween"] .ticker .sn-chip:active {
  transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
:root[data-season="halloween"] .ticker .sn-chip:focus-visible { outline: 2px solid #ffd23f; outline-offset: -1px; }
:root[data-season="halloween"] .sn-chip-icon {
  flex: 0 0 auto; width: 11px; height: 11px; margin-right: 5px;
  background: var(--sn-icon) 0 0 / 100% 100% no-repeat;
}
:root[data-season="halloween"] .ticker .sn-chip:hover .sn-chip-icon,
:root[data-season="halloween"] .ticker .sn-chip:focus-visible .sn-chip-icon { background-image: var(--hw-art-pumpkin-unlit); }
:root[data-season="halloween"] .sn-chip-deal,
:root[data-season="halloween"] .sn-chip-left,
:root[data-season="halloween"] .sn-chip-compact {
  margin-left: 6px; padding-left: 6px; border-left: 1px solid rgba(255, 140, 26, .45);
}
:root[data-season="halloween"] .sn-chip-deal { color: #fff3d6; }
:root[data-season="halloween"] .sn-chip-left,
:root[data-season="halloween"] .sn-chip-compact { color: #ffd23f; text-transform: none; }
:root[data-season="halloween"] .sn-chip-go { margin-left: 5px; font-size: 12px; line-height: 12px; }
:root[data-season="halloween"] .ticker .sn-chip:hover > span,
:root[data-season="halloween"] .ticker .sn-chip:focus-visible > span { color: inherit; border-left-color: rgba(20, 10, 6, .45); }
:root[data-season="halloween"] .sn-chip-short,
:root[data-season="halloween"] .sn-chip-compact,
:root[data-season="halloween"] .sn-chip-trick,
:root[data-season="halloween"] .sn-trick-short { display: none; }
/* the last three days: the time turns into a yellow block */
:root[data-season="halloween"] .sn-chip.sn-hurry .sn-chip-left,
:root[data-season="halloween"] .sn-chip.sn-hurry .sn-chip-compact {
  background: #ffd23f; color: #140a06; border-left: 0; padding: 0 4px; border-radius: 1px;
}
/* a header ghost was tapped: the chip asks the question for four seconds */
:root[data-season="halloween"] .sn-chip.sn-trick > span { display: none; }
:root[data-season="halloween"] .sn-chip.sn-trick > .sn-chip-trick,
:root[data-season="halloween"] .sn-chip.sn-trick > .sn-chip-go { display: inline; }
:root[data-season="halloween"] .sn-chip.sn-trick .sn-trick-long { display: inline; }

/* --------------------------------------------------------- (e) header sky */
:root[data-season="halloween"] .hw-sky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  --hw-band: 12px;
}
:root[data-season="halloween"] .hw-lane { position: absolute; inset: 0; max-width: 1024px; margin: 0 auto; }
:root[data-season="halloween"] .hw-track {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 18px; --hw-pw: 16px;
}
:root[data-season="halloween"] .hw-slot { position: absolute; left: 0; top: 0; transform: translate(var(--x, 0px), var(--y, 0px)); }
:root[data-season="halloween"] .hw-slot:not(.hw-placed) { visibility: hidden; }

/* fog: two strips twice the bar's width whose pattern repeats every half,
   so sliding one by -50% loops without a seam */
:root[data-season="halloween"] .hw-fog {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 16px;
  background:
    radial-gradient(ellipse 70px 7px at 18% 75%, var(--hw-fog), transparent 70%),
    radial-gradient(ellipse 110px 8px at 52% 95%, var(--hw-fog), transparent 70%),
    radial-gradient(ellipse 60px 6px at 84% 80%, var(--hw-fog), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x;
}
:root[data-season="halloween"] .hw-fog.hw-front { height: 10px; opacity: .7; transform: translateX(-25%); }

/* the harvest moon (a slot item: season.js finds it a clear gap or hides it) */
:root[data-season="halloween"] .hw-moon {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff4cf, #f8de9c 46%, #f2c46b 78%);
  box-shadow: inset -4px -3px 0 rgba(170, 96, 20, .22);
}
:root[data-season="halloween"] .hw-moon::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 14px 5px rgba(255, 236, 170, .5);
  opacity: .7;
}
:root[data-season="halloween"] .hw-moon i { position: absolute; border-radius: 50%; background: rgba(196, 136, 52, .32); }
:root[data-season="halloween"] .hw-moon i:nth-child(1) { left: 22%; top: 26%; width: 22%; height: 22%; }
:root[data-season="halloween"] .hw-moon i:nth-child(2) { left: 57%; top: 50%; width: 17%; height: 17%; }
:root[data-season="halloween"] .hw-moon i:nth-child(3) { left: 31%; top: 63%; width: 11%; height: 11%; }

/* bats: three sprites crossing the top padding band, above every control */
:root[data-season="halloween"] .hw-bats { position: absolute; left: 0; top: 0; width: 100%; height: var(--hw-band); }
:root[data-season="halloween"] .hw-bat {
  position: absolute; left: 0; top: 3px; width: 14px; height: 7px;
  transform: translateX(-20px);
}
:root[data-season="halloween"] .hw-bat.b2 { top: 2px; }
:root[data-season="halloween"] .hw-bat i {
  position: absolute; inset: 0; background: var(--hw-silhouette);
  -webkit-mask: var(--hw-art-bat) 0 0 / 28px 7px no-repeat;
  mask: var(--hw-art-bat) 0 0 / 28px 7px no-repeat;
}

/* the skyline: a graveyard and a village in the bottom padding band */
:root[data-season="halloween"] .hw-skyline,
:root[data-season="halloween"] .hw-windows {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--hw-band);
  background: var(--hw-silhouette);
  -webkit-mask: var(--hw-art-skyline) 0 100% / 240px 12px repeat-x;
  mask: var(--hw-art-skyline) 0 100% / 240px 12px repeat-x;
}
:root[data-season="halloween"] .hw-windows {
  background: var(--hw-window);
  -webkit-mask-image: var(--hw-art-windows);
  mask-image: var(--hw-art-windows);
}
:root[data-season="halloween"] .hw-web {
  display: none; position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  background: var(--hw-web);
  -webkit-mask: var(--hw-art-web) 0 0 / 44px 44px no-repeat;
  mask: var(--hw-art-web) 0 0 / 44px 44px no-repeat;
}
@media (min-width: 1180px) {
  :root[data-season="halloween"] .hw-web { display: block; }
}

/* the speech bubble a tapped ghost says its line in */
:root[data-season="halloween"] .hw-boo {
  position: absolute; left: 0; top: 0; z-index: 3;
  padding: 2px 5px; background: #fff; color: #140a06;
  border: 2px solid #140a06; border-radius: 2px; box-shadow: 2px 2px 0 rgba(20, 10, 6, .35);
  font: bold 9px/11px Verdana, Geneva, Tahoma, Arial, sans-serif;
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
}
:root[data-season="halloween"] .hw-boo::before,
:root[data-season="halloween"] .hw-boo::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-style: solid; border-color: transparent;
}
:root[data-season="halloween"] .hw-boo::before { left: -7px; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #140a06; }
:root[data-season="halloween"] .hw-boo::after { left: -3px; margin-top: -3px; border-width: 3px 3px 3px 0; border-right-color: #fff; }
:root[data-season="halloween"] .hw-boo.hw-boo-l::before { left: auto; right: -7px; border-width: 5px 0 5px 5px;
  border-right-color: transparent; border-left-color: #140a06; }
:root[data-season="halloween"] .hw-boo.hw-boo-l::after { left: auto; right: -3px; border-width: 3px 0 3px 3px;
  border-right-color: transparent; border-left-color: #fff; }

/* a tap on empty sky lets loose a few bats */
:root[data-season="halloween"] .hw-burst {
  position: absolute; left: 0; top: 0; width: 10px; height: 5px; margin: -2px 0 0 -5px;
  background: var(--hw-silhouette);
  -webkit-mask: var(--hw-art-burst) 0 0 / 10px 5px no-repeat;
  mask: var(--hw-art-burst) 0 0 / 10px 5px no-repeat;
  opacity: 0;
}

/* ------------------------------------------------------ (f) ghost sprite
   One 11x13 pixel sprite for every ghost, drawn at whatever size the ghost
   is.  The eyes are their own boxes so they can follow the pointer. */
:root[data-season="halloween"] .hw-ghost .hw-flee,
:root[data-season="halloween"] .hw-ghost .hw-bob { position: absolute; inset: 0; }
:root[data-season="halloween"] .hw-flee {
  transform: translate(var(--fx, 0px), var(--fy, 0px));
  transition: transform .35s steps(4);
}
:root[data-season="halloween"] .hw-sheet {
  position: absolute; inset: 0; filter: var(--hw-ghost-glow);
  background: var(--hw-art-ghost) 0 0 / 100% 100% no-repeat;
}
:root[data-season="halloween"] .hw-eye {
  position: absolute; top: 31%; width: 14%; height: 15%; background: #140a10;
  transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px));
}
:root[data-season="halloween"] .hw-eye.l { left: 26%; }
:root[data-season="halloween"] .hw-eye.r { left: 55%; }
:root[data-season="halloween"] .hw-mouth { position: absolute; left: 41%; top: 58%; width: 18%; height: 7%; background: #140a10; }
:root[data-season="halloween"] .hw-spooked .hw-sheet { opacity: .55; }
:root[data-season="halloween"] .hw-spooked .hw-eye { top: 27%; height: 21%; }
:root[data-season="halloween"] .hw-spooked .hw-mouth { left: 42%; top: 55%; width: 15%; height: 15%; border-radius: 50%; }
:root[data-season="halloween"] .hw-float { width: 22px; height: 26px; }
:root[data-season="halloween"] .hw-peeker {
  position: absolute; left: 0; bottom: -6px; width: 16px; height: 18px;
  transform: translateY(4px);
}
:root[data-season="halloween"] .hw-peeker.hw-duck .hw-flee { transform: translateY(14px); }

/* --------------------------------------------------------------- (g) yard
   A graveyard strip standing on the footer's top rule, on every width. */
:root[data-season="halloween"] .hw-yard {
  position: relative; height: 48px; margin: 18px 0 -18px; overflow: hidden;
  pointer-events: none;
}
:root[data-season="halloween"] .hw-yard-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: radial-gradient(ellipse 58% 100% at 50% 100%, var(--hw-yard-glow), transparent 72%);
}
:root[data-season="halloween"] .hw-yard-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: var(--hw-yard);
  -webkit-mask: var(--hw-art-yard) 40px 100% / 200px 28px repeat-x;
  mask: var(--hw-art-yard) 40px 100% / 200px 28px repeat-x;
}
/* the stone the riser hides behind */
:root[data-season="halloween"] .hw-yard::after {
  content: ""; position: absolute; left: calc(18% - 5px); bottom: 0; width: 32px; height: 24px;
  background: var(--hw-yard);
  -webkit-mask: var(--hw-art-stone) 0 0 / 32px 24px no-repeat;
  mask: var(--hw-art-stone) 0 0 / 32px 24px no-repeat;
}
:root[data-season="halloween"] .hw-riser {
  position: absolute; left: 18%; bottom: 13px; width: 22px; height: 26px;
  pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translateY(30px); transition: transform .5s steps(5);
}
:root[data-season="halloween"] .hw-riser::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
}
:root[data-season="halloween"] .hw-riser.hw-up { transform: translateY(0); }
:root[data-season="halloween"] .hw-riser.hw-still { transform: translateY(11px); }
:root[data-season="halloween"] .hw-jack {
  position: absolute; bottom: 1px; width: 14px; height: 12px;
  background: var(--hw-art-jack) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 150, 30, .7));
}
:root[data-season="halloween"] .hw-jack.j1 { left: 7%; }
:root[data-season="halloween"] .hw-jack.j2 { right: 10%; }
:root[data-season="halloween"] .hw-jack.hw-flare {
  transform: scale(1.25); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px rgba(255, 190, 60, .95));
}
:root[data-season="halloween"] .hw-yard .hw-boo { z-index: 4; }

/* ---------------------------------------------------------- (h) FX layer
   Desktop gutters only: a spider that lowers itself as you scroll down and
   climbs back when you stop, and a faint ghost that keeps out of the way of
   your mouse.  Fixed, under every dialog, toast, dock and stage. */
:root[data-season="halloween"] .hw-fx {
  display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 30;
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-season="halloween"]:not([data-season-calm]):not([data-season-fx="off"]) .hw-fx { display: block; }
}
:root[data-season="halloween"] .hw-spider {
  position: absolute; top: 0; right: calc((100vw - 1024px) / 2 - 40px);
  width: 15px; height: 200px; transform-origin: 50% 0;
  transform: rotate(calc(var(--sw, 0) * 1deg));
  opacity: 0; transition: opacity .3s steps(3);
}
:root[data-season="halloween"] .hw-spider.hw-on { opacity: 1; }
:root[data-season="halloween"] .hw-thread {
  position: absolute; left: 7px; top: 0; width: 1px; height: 200px; background: var(--hw-thread);
  transform-origin: 0 0; transform: scaleY(calc((24 + var(--drop, 0)) / 200));
}
:root[data-season="halloween"] .hw-spider-body,
:root[data-season="halloween"] .hw-spider::after {
  position: absolute; left: 0; top: 0; width: 15px; height: 12px;
  transform: translateY(calc((18 + var(--drop, 0)) * 1px));
}
:root[data-season="halloween"] .hw-spider-body {
  background: var(--hw-spider);
  -webkit-mask: var(--hw-art-spider) 0 0 / 15px 12px no-repeat;
  mask: var(--hw-art-spider) 0 0 / 15px 12px no-repeat;
}
:root[data-season="halloween"] .hw-spider::after {
  content: ""; background: #ff8c1a;
  -webkit-mask: var(--hw-art-spider-eyes) 0 0 / 15px 12px no-repeat;
  mask: var(--hw-art-spider-eyes) 0 0 / 15px 12px no-repeat;
}
:root[data-season="halloween"] .hw-spider.hw-climb .hw-thread,
:root[data-season="halloween"] .hw-spider.hw-climb .hw-spider-body,
:root[data-season="halloween"] .hw-spider.hw-climb::after { transition: transform .6s steps(6); }
:root[data-season="halloween"] .hw-drifter {
  position: absolute; left: calc((100vw - 1024px) / 4 - 14px); top: 42vh;
  width: 28px; height: 32px; opacity: .55;
}

/* --------------------------------------------------------------- (i) modes */
/* lite: the quiet pages (world pages, sign-in, the editors, admin) keep the
   colours, pumpkins, chip and a still skyline, and run nothing */
:root[data-season="halloween"][data-season-lite] .hw-sky > :not(.hw-skyline) { display: none; }
:root[data-season="halloween"][data-season-lite] .hw-sky *,
:root[data-season="halloween"][data-season-lite] .tabbar a::after,
:root[data-season="halloween"][data-season-lite] .sn-chip * { animation: none !important; }
/* calm: the market's event hero has its own moon and bats */
:root[data-season="halloween"][data-season-calm] .hw-bats,
:root[data-season="halloween"][data-season-calm] .hw-moon,
:root[data-season="halloween"][data-season-calm] .hw-fog { display: none; }
/* critters muted on this device: the scenery stays, the creatures go */
:root[data-season="halloween"][data-season-fx="off"] .hw-ghost,
:root[data-season="halloween"][data-season-fx="off"] .hw-bats,
:root[data-season="halloween"][data-season-fx="off"] .hw-fx,
:root[data-season="halloween"][data-season-fx="off"] .hw-boo,
:root[data-season="halloween"][data-season-fx="off"] .hw-burst { display: none !important; }
/* paused: a hidden tab, a strip scrolled out of view, or something on the
   page that wants the stage to itself (a crate opening, a drag) */
:root[data-season="halloween"].sn-hold .hw-sky *, :root[data-season="halloween"].sn-hold .hw-sky *::before, :root[data-season="halloween"].sn-hold .hw-sky *::after,
:root[data-season="halloween"].sn-hold .hw-yard *, :root[data-season="halloween"].sn-hold .hw-yard *::before, :root[data-season="halloween"].sn-hold .hw-yard *::after,
:root[data-season="halloween"].sn-hold .hw-fx *,
:root[data-season="halloween"].sn-hold .tabbar a::after, :root[data-season="halloween"].sn-hold .sn-chip *,
:root[data-season="halloween"] .hw-sky.hw-idle *, :root[data-season="halloween"] .hw-sky.hw-idle *::before, :root[data-season="halloween"] .hw-sky.hw-idle *::after,
:root[data-season="halloween"] .hw-yard.hw-idle *, :root[data-season="halloween"] .hw-yard.hw-idle *::before, :root[data-season="halloween"] .hw-yard.hw-idle *::after,
:root[data-season="halloween"] body.cs-open .hw-sky *, :root[data-season="halloween"] body.cs-open .hw-sky *::before, :root[data-season="halloween"] body.cs-open .hw-yard *,
:root[data-season="halloween"] body.key-mode .hw-sky *, :root[data-season="halloween"] body.key-mode .hw-sky *::before, :root[data-season="halloween"] body.key-mode .hw-yard *,
:root[data-season="halloween"] body.pin-dragging .hw-sky *, :root[data-season="halloween"] body.pin-dragging .hw-sky *::before, :root[data-season="halloween"] body.pin-dragging .hw-yard *,
:root[data-season="halloween"] body.bi-dragging .hw-sky *, :root[data-season="halloween"] body.bi-dragging .hw-sky *::before, :root[data-season="halloween"] body.bi-dragging .hw-yard *,
:root[data-season="halloween"] body.item-dragging .hw-sky *, :root[data-season="halloween"] body.item-dragging .hw-sky *::before, :root[data-season="halloween"] body.item-dragging .hw-yard * {
  animation-play-state: paused !important;
}
:root[data-season="halloween"] body.cs-open .hw-fx,
:root[data-season="halloween"] body.key-mode .hw-fx,
:root[data-season="halloween"] body.pin-dragging .hw-fx,
:root[data-season="halloween"] body.bi-dragging .hw-fx,
:root[data-season="halloween"] body.item-dragging .hw-fx { display: none; }

/* -------------------------------------------------------------- (j) phones */
@media (max-width: 860px) {
  :root[data-season="halloween"] .hw-sky { --hw-band: 10px; }
  :root[data-season="halloween"] .hw-bat.b2,
  :root[data-season="halloween"] .hw-bat.b3 { display: none; }
  :root[data-season="halloween"] .hw-bat.b1 { top: 2px; }
  :root[data-season="halloween"] .hw-skyline,
  :root[data-season="halloween"] .hw-windows { -webkit-mask-size: 200px 10px; mask-size: 200px 10px; }
  :root[data-season="halloween"] .hw-fog { height: 12px; }
  :root[data-season="halloween"] .hw-fog.hw-front { height: 8px; }
  :root[data-season="halloween"] .hw-moon { width: 28px; height: 28px; }
  :root[data-season="halloween"] .hw-moon::before { box-shadow: 0 0 9px 3px rgba(255, 236, 170, .5); }
  :root[data-season="halloween"] .hw-float { width: 18px; height: 22px; }
  :root[data-season="halloween"] .hw-track { --hw-pw: 14px; }
  :root[data-season="halloween"] .hw-peeker { width: 14px; height: 16px; }

  /* the drawer: a black sheet, orange ink, a bigger pumpkin per row */
  :root[data-season="halloween"] .tabbar a { padding: 11px 6px 11px 28px; }
  :root[data-season="halloween"] .tabbar a::before,
  :root[data-season="halloween"] .tabbar a::after { left: 7px; width: 14px; height: 14px; margin-top: -7px; }
  :root[data-season="halloween"] .tabbar .sn-navtag { display: inline-block; }

  :root[data-season="halloween"] .hw-yard { height: 40px; }
  :root[data-season="halloween"] .hw-riser { width: 18px; height: 22px; bottom: 11px; }
}
@media (max-width: 640px) {
  :root[data-season="halloween"] .sn-chip-deal { display: none; }
}
@media (max-width: 480px) {
  :root[data-season="halloween"] .ticker .wrap > b { display: none; }
  :root[data-season="halloween"] .sn-chip-name,
  :root[data-season="halloween"] .sn-chip-left,
  :root[data-season="halloween"] .sn-trick-long,
  :root[data-season="halloween"] .sn-chip.sn-trick .sn-trick-long { display: none; }
  :root[data-season="halloween"] .sn-chip-short,
  :root[data-season="halloween"] .sn-chip-compact,
  :root[data-season="halloween"] .sn-chip.sn-trick .sn-trick-short { display: inline; }
  :root[data-season="halloween"] .sn-chip-short { margin-left: 0; }
}

/* --------------------------------------------------------------- (k) motion
   Every animation, in one place, and only for players who have not asked
   for less motion.  Pixel-game timing: steps() rather than easing. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-season="halloween"] .hw-fog { will-change: transform; animation: hw-fog 80s linear infinite; }
  :root[data-season="halloween"] .hw-fog.hw-front { animation: hw-fog-front 110s linear infinite; }
  :root[data-season="halloween"] .hw-bat { will-change: transform; animation: hw-fly 22s linear infinite; }
  :root[data-season="halloween"] .hw-bat.b2 { animation-duration: 29s; animation-delay: -9s; }
  :root[data-season="halloween"] .hw-bat.b3 { animation-duration: 35s; animation-delay: -21s; }
  :root[data-season="halloween"] .hw-bat i { animation: hw-flap .24s steps(2) infinite; }
  :root[data-season="halloween"] .hw-bob { animation: hw-bob 2.4s steps(8) infinite; }
  :root[data-season="halloween"] .hw-float + .hw-float:not(.hw-booing):not(.hw-cheer) .hw-bob { animation-delay: -1.1s; }
  :root[data-season="halloween"] .hw-drifter .hw-bob { animation-duration: 3.2s; }
  :root[data-season="halloween"] .hw-track { animation: hw-wander 46s linear infinite alternate; }
  :root[data-season="halloween"] .hw-peeker { animation: hw-peek 9s steps(2) infinite; }
  :root[data-season="halloween"] .hw-peeker .hw-bob { animation: hw-wobble 1.6s steps(4) infinite; }
  :root[data-season="halloween"] .hw-moon::before { animation: hw-halo 6s ease-in-out infinite alternate; }
  :root[data-season="halloween"] .hw-windows { animation: hw-windows 5.3s steps(1) infinite; }
  :root[data-season="halloween"] .hw-jack { animation: hw-flicker 1.9s steps(1) infinite; }
  :root[data-season="halloween"] .hw-jack.j2 { animation-duration: 2.3s; animation-delay: -.7s; }
  :root[data-season="halloween"] .tabbar a[href="/market"]::after { animation: hw-flicker 1.7s steps(1) infinite; }
  :root[data-season="halloween"] .hw-boo { animation: hw-pop .24s steps(3) both; }
  :root[data-season="halloween"] .hw-burst { animation: hw-scatter .9s steps(6) forwards; }
  :root[data-season="halloween"] .hw-booing .hw-bob,
  :root[data-season="halloween"] .hw-peeker.hw-cheer .hw-bob { animation: hw-booing .9s steps(6); }
  :root[data-season="halloween"] .hw-cheer .hw-bob { animation: hw-cheer 1.2s steps(6); }
  :root[data-season="halloween"] .sn-chip.sn-hurry .sn-chip-left,
  :root[data-season="halloween"] .sn-chip.sn-hurry .sn-chip-compact { animation: sn-blink 1s steps(1) infinite; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  :root[data-season="halloween"] .tabbar.open a::after {
    animation: hw-ignite .6s steps(4) calc(var(--sn-i, 0) * 45ms) backwards;
  }
  :root[data-season="halloween"] .tabbar.open a[href="/market"]::after {
    animation: hw-ignite .6s steps(4) calc(var(--sn-i, 0) * 45ms) backwards,
               hw-flicker 1.7s steps(1) calc(var(--sn-i, 0) * 45ms + .6s) infinite;
  }
}
@keyframes hw-fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hw-fog-front { from { transform: translateX(-25%); } to { transform: translateX(-75%); } }
@keyframes hw-fly {
  0% { transform: translate(-20px, 0); }
  10% { transform: translate(calc(25vw - 10px), 1px); }
  20% { transform: translate(50vw, -1px); }
  30% { transform: translate(calc(75vw + 10px), 1px); }
  40%, 100% { transform: translate(calc(100vw + 20px), 0); }
}
@keyframes hw-flap {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: -28px 0; mask-position: -28px 0; }
}
@keyframes hw-bob {
  0%, 100% { transform: translateY(2px) rotate(-4deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
@keyframes hw-wobble {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes hw-wander { from { transform: translateX(0); } to { transform: translateX(calc(100% - var(--hw-pw, 16px))); } }
@keyframes hw-peek {
  0%, 74% { transform: translateY(4px); }
  78%, 92% { transform: translateY(0); }
  96%, 100% { transform: translateY(4px); }
}
@keyframes hw-halo { from { opacity: .45; } to { opacity: 1; } }
@keyframes hw-windows {
  0% { opacity: 1; } 31% { opacity: .5; } 33% { opacity: 1; }
  64% { opacity: .75; } 66% { opacity: 1; } 88% { opacity: .55; } 90% { opacity: 1; }
}
@keyframes hw-flicker {
  0% { opacity: 1; } 9% { opacity: .55; } 13% { opacity: 1; } 47% { opacity: .78; }
  51% { opacity: 1; } 72% { opacity: .6; } 75% { opacity: 1; }
}
@keyframes hw-ignite {
  0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes hw-pop {
  0% { transform: scale(.4); } 60% { transform: scale(1.1); } 100% { transform: scale(1); }
}
@keyframes hw-scatter {
  0% { opacity: 1; transform: translate(0, 0) scale(.7); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -30px)) scale(1.2); }
}
@keyframes hw-booing {
  0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); }
}
@keyframes hw-cheer {
  0% { transform: translateY(0) rotateY(0); }
  30% { transform: translateY(-7px) rotateY(180deg); }
  60% { transform: translateY(0) rotateY(360deg); }
  80% { transform: translateY(-3px) rotateY(540deg); }
  100% { transform: translateY(0) rotateY(720deg); }
}
@keyframes sn-blink { 0% { opacity: 1; } 50% { opacity: .35; } }