/* ===========================================================================
   THE HAUNTED TAVERN — the site's look for the Halloween weekend (30 Oct 2026)

   The owner sent the design ("Haunted Tavern home", their number 1): "which
   will be the site theme tomorrow. Align this challenge with the theme as
   well." Asked, they chose:
     * the HOME PAGE and the WEEKEND CHALLENGE's screens — other games stay as
       they are;
     * for the Halloween weekend: on while that weekend is on for everybody,
       off when it closes (app/services/weekend.site_theme);
     * "Create a light mode version" for Light Mode. The design is the dark one.

   ONLY ON THE PAGE WHILE IT IS ON. The server links this sheet, stamps
   <html data-event="haunted"> and puts the design's drawings into the room
   (app/services/haunted.py) for exactly that window, so every rule here waits
   on the attribute and none of it exists the rest of the year.

   THE PAGE'S OWN COLOURS CHANGE ONLY WHILE THE HOME PAGE OR THE WEEKEND IS ON
   SCREEN — the site's tokens, redefined on <html> under :has() — so a game
   opened from the home page is drawn as it always is. The room itself is
   restyled inside #home, which nothing else shares.

   DARK IS THE DESIGN; LIGHT IS ITS DAYTIME TWIN: the same room in lavender and
   candlelight, the same drawings, the felt board still a board.
   =========================================================================== */

/* ---- the palette ---------------------------------------------------------- */
html[data-event="haunted"] {
  --hn-ground: #120d1f;  --hn-card: #1a1330;   --hn-bar: rgba(0, 0, 0, .2);
  --hn-panel: #211939;   --hn-panel-2: #1c1530; --hn-panel-3: #2a1f40;
  --hn-line: #33275a;    --hn-line-2: #4a3c78;
  --hn-ink: #f6ecdc;     --hn-soft: #d9cdee;   --hn-muted: #b9aad8;
  --hn-orange: #ff7a1a;  --hn-orange-hi: #ff9442; --hn-orange-lip: #a8480a; --hn-orange-ink: #1c0d02;
  --hn-link: #ffb070;    --hn-lime: #c6f05a;   --hn-lime-hi: #d8f88a;
  --hn-title: #ff8a2b;
}
html[data-event="haunted"][data-theme="light"] {
  --hn-ground: #efe8f7;  --hn-card: #fbf8ff;   --hn-bar: rgba(58, 40, 90, .05);
  --hn-panel: #ffffff;   --hn-panel-2: #f6f1fd; --hn-panel-3: #ece4f8;
  --hn-line: #e0d6f0;    --hn-line-2: #c9bce3;
  --hn-ink: #22183a;     --hn-soft: #3d2f5c;   --hn-muted: #6b5b8e;
  --hn-orange: #ff7a1a;  --hn-orange-hi: #ff9442; --hn-orange-lip: #b4520c; --hn-orange-ink: #1c0d02;
  --hn-link: #c2410c;    --hn-lime: #c2410c;   --hn-lime-hi: #9a3412;
  --hn-title: #d9560a;
}

/* ---- the page, while the home page or the weekend is on screen ------------
   The site's own tokens, so the top bar, the card, the boards, the guide, the
   sign-in box and every piece of the Weekend Challenge follow without a rule
   each. :has() — a browser without it keeps the page's usual colours around a
   room that is still the tavern. Not while a link is opening another mode
   (html.deep-boot): that home page is never shown. */
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])),
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) {
  --page: var(--hn-ground);  --ink: var(--hn-card);  --ink-2: var(--hn-panel-2);  --ink-3: var(--hn-ground);
  --bg: var(--hn-ground);    --bg2: var(--hn-panel-2);
  --panel: var(--hn-panel);  --panel-2: var(--hn-panel-2);  --panel-3: var(--hn-panel-3);
  --border: var(--hn-line);  --border-strong: var(--hn-line-2);
  --text: var(--hn-ink);     --text-soft: var(--hn-soft);  --text-muted: var(--hn-muted);
  --gold: var(--hn-lime);    --gold-hi: var(--hn-lime-hi); --accent: var(--hn-orange);
  --accent-face: var(--hn-orange); --accent-ink: var(--hn-orange-ink);
  --accent-lip: var(--hn-orange-lip); --accent-hi: var(--hn-orange-hi);
  --cap-face: var(--hn-orange); --cap-ink: var(--hn-orange-ink); --cap-lip: var(--hn-orange-lip);
  --bar-tint: var(--hn-bar);
  --sheet: rgba(203, 183, 255, .07); --sheet-2: rgba(203, 183, 255, .11); --sheet-3: rgba(203, 183, 255, .15);
  --hair: rgba(203, 183, 255, .12);
}
html[data-event="haunted"][data-theme="light"]:not(.deep-boot):has(#home:not([style*="none"])),
html[data-event="haunted"][data-theme="light"]:has(#wcScreen:not([style*="none"])) {
  --sheet: rgba(58, 40, 90, .045); --sheet-2: rgba(58, 40, 90, .075); --sheet-3: rgba(58, 40, 90, .11);
  --hair: rgba(58, 40, 90, .11);
}

/* THE TOP BAR, as the design draws it: the site's links in the tavern's
   orange, "Create account" a lit sign rather than a link, and the badge a
   pumpkin — the "?" carved into it, the stem on top. */
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .authbar,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .authbar {
  border-bottom: 1px solid var(--hn-line);
}
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .authbar a,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .authbar a { color: var(--hn-link); }
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .topnav a,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .topnav a { color: var(--hn-muted); }
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .topnav a.on,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .topnav a.on {
  color: var(--hn-ink); border-bottom-color: var(--hn-orange);
}
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .authbar .nav-cta,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .authbar .nav-cta {
  background: var(--hn-orange); color: var(--hn-orange-ink); text-decoration: none;
  padding: 8px 14px; border-radius: 9px;
}
/* The badge: the drawn pumpkin (haunted.py's LOGO) in place of the site's cap
   while the tavern is on screen, and the cap everywhere else. Sized in the
   badge's own em, so it follows the badge down a phone's two widths. */
html[data-event="haunted"] .brand-badge .hn-logo { display: none; }
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .brand-badge > i,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .brand-badge > i { display: none; }
html[data-event="haunted"]:not(.deep-boot):has(#home:not([style*="none"])) .brand-badge .hn-logo,
html[data-event="haunted"]:has(#wcScreen:not([style*="none"])) .brand-badge .hn-logo {
  display: block; position: absolute; left: 50%; top: 50%;
  width: 1.05em; height: 1.05em; transform: translate(-50%, -50%); overflow: visible;
}

/* ---- the room ------------------------------------------------------------ */
html[data-event="haunted"] #home .tr {
  --tr-ink: #f6ecdc;  --tr-muted: #b9aad8;
  --tr-accent: #ff8a2b; --tr-accent-ink: #1c0d02; --tr-accent-wash: rgba(255, 138, 43, .08);
  --tr-hover-ink: #f6ecdc;
  /* PLANKS IN THE DARK, the design's: purple boards, a darker seam, no lamps —
     the moon is the light here. */
  --tr-room: radial-gradient(ellipse 45% 55% at 50% 0%, rgba(140, 110, 220, .10), transparent 70%),
             repeating-linear-gradient(90deg, #211938 0 92px, #150f29 92px 96px), #1b1430;
  --tr-vignette: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(6, 3, 12, .45) 100%);
  --tr-board: #0b0812; --tr-board-edge: #3a2414;
  --tr-board-rule: rgba(246, 236, 220, .3); --tr-row-rule: rgba(246, 236, 220, .55);
  --tr-head-shadow: #ff7a1a;
  --tr-panel: #211939; --tr-panel-edge: #33275a; --tr-panel-rule: #33275a; --tr-panel-shadow: none;
  --tr-glass-edge: rgba(220, 210, 255, .5);  --tr-glass-foot: rgba(220, 210, 255, .42);
  --tr-glass-body: linear-gradient(90deg, rgba(220, 210, 255, .16), rgba(220, 210, 255, .05) 28%, rgba(220, 210, 255, .04) 68%, rgba(220, 210, 255, .14));
  --tr-glass-grip: rgba(220, 210, 255, .5);
  --tr-foam: #c6f05a;  --tr-foam-shadow: none;
  --tr-foam-blob: #c6f05a; --tr-foam-blob-2: #d4f77a; --tr-foam-blob-shadow: none;
  --tr-tab-bg: #150f28; --tr-tab-edge: #33275a; --tr-tab-ink: #f6ecdc;
  --tr-tab-on-bg: #ff7a1a; --tr-tab-on-edge: #ff7a1a; --tr-tab-on-ink: #1c0d02;
  --tr-floor: linear-gradient(#1c1530, #150f28 60px, #1a1330);
  --tr-mug-glow: rgba(126, 224, 58, .45);
}
/* THE SAME TAVERN BY DAY: lavender planks under a candle's glow, the glass
   rimmed in ink as the site's paper room rims it. */
html[data-event="haunted"][data-theme="light"] #home .tr {
  --tr-ink: #22183a;  --tr-muted: #6b5b8e;
  --tr-accent: #c2410c; --tr-accent-ink: #fff7ef; --tr-accent-wash: rgba(194, 65, 12, .07);
  --tr-hover-ink: #22183a;
  --tr-room: radial-gradient(ellipse 40% 55% at 50% 8%, rgba(255, 170, 90, .22), transparent 70%),
             repeating-linear-gradient(90deg, #ebe4f6 0 92px, #d7cbea 92px 96px), #e6def3;
  --tr-vignette: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(58, 40, 90, .16) 100%);
  --tr-panel: #ffffff; --tr-panel-edge: #e0d6f0; --tr-panel-rule: #ece4f8;
  --tr-panel-shadow: 0 8px 20px rgba(58, 40, 90, .08);
  /* THE CATEGORY'S BOARD BY DAY IS PAPER, as the site's own light room has it,
     not the night's slate: the owner, of light mode, "It should not be all
     black". Lavender paper in the letter board's dark wood. */
  --tr-board: #fbf8ff; --tr-board-edge: #4a2f1a;
  --tr-board-shadow: inset 0 0 0 2px #e0d6f0, 0 12px 30px rgba(58, 40, 90, .15);
  --tr-board-rule: rgba(58, 40, 90, .35); --tr-row-rule: rgba(58, 40, 90, .45);
  --tr-head-shadow: #ffb070;
  --tr-glass-edge: rgba(58, 40, 90, .38);  --tr-glass-foot: rgba(58, 40, 90, .32);
  --tr-glass-body: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25) 28%, rgba(255, 255, 255, .2) 68%, rgba(255, 255, 255, .6));
  --tr-glass-grip: rgba(58, 40, 90, .34);
  --tr-tab-bg: #ffffff; --tr-tab-edge: #e0d6f0; --tr-tab-ink: #22183a;
  --tr-floor: linear-gradient(#e2d9f2, #efe8f7 60px, #f3eefb);
  --tr-mug-glow: rgba(94, 190, 40, .35);
}

/* THE DECORATIONS: the moon behind the taps, a web in the corner, three bats
   crossing, a spider on its thread — under the room's own parts, never over
   them, and never in the way of a press. */
html[data-event="haunted"] #home .tr-room > .hn-decor {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
html[data-event="haunted"] #home .hn-moon {
  position: absolute; left: 5%; top: 40px; width: 96px; height: 96px; border-radius: 50%;
  background: #fde9a8; box-shadow: 0 0 60px 10px rgba(253, 230, 138, .22);
}
html[data-event="haunted"] #home .hn-moon i {
  position: absolute; border-radius: 50%; background: #f1d98b;
}
html[data-event="haunted"] #home .hn-moon i:nth-child(1) { left: 22px; top: 26px; width: 18px; height: 18px; }
html[data-event="haunted"] #home .hn-moon i:nth-child(2) { left: 56px; top: 52px; width: 22px; height: 22px; }
html[data-event="haunted"][data-theme="light"] #home .hn-moon {
  box-shadow: 0 0 0 1px rgba(58, 40, 90, .1), 0 0 50px 12px rgba(255, 190, 90, .4);
}
html[data-event="haunted"] #home .hn-web {
  position: absolute; right: 0; top: 0; width: 170px; height: 170px;
  transform: scaleX(-1); opacity: .55; stroke: #a594cc;
}
html[data-event="haunted"][data-theme="light"] #home .hn-web { stroke: #8f7fb3; opacity: .6; }
html[data-event="haunted"] #home .hn-bat {
  position: absolute; left: 0; top: 150px; width: 54px; height: 27px; fill: #06030c;
  animation: hn-fly 17s linear infinite;
}
html[data-event="haunted"][data-theme="light"] #home .hn-bat { fill: #2a1d45; }
html[data-event="haunted"] #home .hn-bat svg {
  display: block; width: 100%; height: 100%;
  animation: hn-flap .28s ease-in-out infinite alternate;
}
html[data-event="haunted"] #home .hn-b2 { top: 230px; width: 36px; height: 18px; animation-duration: 23s; animation-delay: -9s; }
html[data-event="haunted"] #home .hn-b3 { top: 110px; width: 28px; height: 14px; animation-duration: 20s; animation-delay: -15s; }
@keyframes hn-fly {
  0%   { transform: translate(-120px, 0); }
  25%  { transform: translate(25vw, 40px); }
  50%  { transform: translate(52vw, -6px); }
  75%  { transform: translate(80vw, 34px); }
  100% { transform: translate(110vw, 0); }
}
@keyframes hn-flap { to { transform: scaleY(.45); } }
html[data-event="haunted"] #home .hn-spider {
  position: absolute; right: 5%; top: 0; transform-origin: top center;
  animation: hn-swing 4.5s ease-in-out infinite alternate;
}
html[data-event="haunted"] #home .hn-spider i {
  display: block; width: 1px; height: 150px; margin: 0 auto; background: #8e7db8;
}
html[data-event="haunted"] #home .hn-spider svg {
  display: block; width: 32px; height: 32px; margin: -2px auto 0; fill: #06030c; stroke: #06030c;
}
html[data-event="haunted"] #home .hn-spider .hn-spider-eye { fill: #ff7a1a; stroke: none; }
@keyframes hn-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* ---- the letter board: the design's sign ---------------------------------- */
html[data-event="haunted"] #home .tr-tgb-frame {
  background: repeating-linear-gradient(0deg, #0f0b18 0 5px, #0b0812 5px 7px);
  border: 8px solid #3a2414; border-radius: 6px;
  box-shadow: 0 0 0 2px #1c1008, 0 12px 30px rgba(0, 0, 0, .55);
}
html[data-event="haunted"] #home .tr-tgb-name {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif; font-weight: 400;
  letter-spacing: .3em; color: #f6ecdc; text-shadow: 0 0 14px rgba(255, 138, 43, .35);
}
html[data-event="haunted"] #home .tr-tgb-go {
  font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .18em; color: #c6f05a;
}
html[data-event="haunted"] #home .tr-new.tr-tgb-all {
  background: #efe6d2; color: #1a1330; font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700;
  letter-spacing: .14em; box-shadow: 0 3px 0 #8e7db8;
}
html[data-event="haunted"] #home .tr-tgb:focus-visible { outline-color: #ff8a2b; }
/* Hung on chains rather than brass rods. */
html[data-event="haunted"] #home .tr-tgb-hooks i::before { display: none; }
html[data-event="haunted"] #home .tr-tgb-hooks i::after {
  width: 0; background: none; border-left: 4px dotted #8e7db8;
}

/* ---- the taps: the design's four handles ----------------------------------
   Each drawing is the lever's first child (haunted.py), so the lever's pull
   still turns it, and the room's own drawing and stem after it are hidden —
   the ferrule and the pin stay, the metal the faucet is screwed to. */
html[data-event="haunted"] #home .tr-lever > .hn-art {
  display: block; flex: none; overflow: visible;     /* each its own size: haunted.py */
}
html[data-event="haunted"] #home .tr-lever > .hn-art ~ :not(.tr-ferrule):not(.tr-pin) { display: none; }
html[data-event="haunted"] #home .hn-glow { animation: hn-flicker 2.6s steps(1) infinite; }
@keyframes hn-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .7; } 44% { opacity: 1; } 71% { opacity: .85; } }
html[data-event="haunted"] #home .hn-orbit {
  transform-origin: 75px 92px; animation: hn-orbit 7s linear infinite;
}
@keyframes hn-orbit { to { transform: rotate(360deg); } }
/* THE CLAPBOARD OPENS AS THE ROOM'S DOES: shut at rest, open under the pointer,
   on focus and while pouring — the tap's own --tr-clap, from the hinge at the
   top bar's left foot, on the room's own spring. */
html[data-event="haunted"] #home .hn-clap {
  transform-origin: 12px 56px; transform: rotate(var(--tr-clap, 0deg));
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
}

/* THE POUR IS POTION. */
html[data-event="haunted"] #home .tr-stream {
  background: linear-gradient(90deg, rgba(126, 224, 58, .6), #9ff05e 40%, rgba(94, 190, 40, .85));
  box-shadow: 0 0 10px rgba(126, 224, 58, .7);
}
html[data-event="haunted"] #home .tr-stream > i {
  background: radial-gradient(ellipse at 50% 60%, #e5ff9e, rgba(229, 255, 158, 0) 75%);
}

/* ---- the bar, the posts, the counter, the rail ------------------------- */
html[data-event="haunted"] #home .tr-bar {
  background: linear-gradient(#6a5a80, #3a2e52 45%, #241a38);
  box-shadow: inset 0 2px 0 #8f80a8, inset 0 -3px 0 #120c20, 0 18px 34px rgba(0, 0, 0, .55);
}
html[data-event="haunted"] #home .tr-bar b {
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 13px; letter-spacing: .4em;
  color: #cbb7ff; background: #2a1f40; border: 2px solid #8f80a8;
  text-shadow: none; box-shadow: none;
}
html[data-event="haunted"] #home .tr-bar i { background: #9a8db3; box-shadow: inset -2px -2px 0 #4a3d63; }
html[data-event="haunted"] #home .tr-pedestal {
  background: linear-gradient(90deg, #1c1530, #4a3d63 45%, #1c1530);
  box-shadow: none;
}
html[data-event="haunted"] #home .tr-counter {
  background: repeating-linear-gradient(90deg, #3a2414 0 118px, #2e1c0f 118px 122px, #33200f 122px 236px, #2e1c0f 236px 240px);
  box-shadow: inset 0 4px 0 #5a3820, inset 0 -12px 16px -10px rgba(0, 0, 0, .6), 0 -10px 30px rgba(0, 0, 0, .4);
}
html[data-event="haunted"] #home .tr-rail {
  background: linear-gradient(#8f80a8, #3a2e52); box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
}
html[data-event="haunted"][data-theme="light"] #home .tr-bar {
  background: linear-gradient(#cbbde6, #a493c8 45%, #8475ab);
  box-shadow: inset 0 2px 0 #e6def3, inset 0 -3px 0 #5f5087, 0 14px 26px rgba(58, 40, 90, .22);
}
html[data-event="haunted"][data-theme="light"] #home .tr-bar b {
  color: #3b2a5c; background: #f6f1ff; border-color: #8f80a8;
}
html[data-event="haunted"][data-theme="light"] #home .tr-bar i { background: #ece4f8; box-shadow: inset -2px -2px 0 #a493c8; }
html[data-event="haunted"][data-theme="light"] #home .tr-pedestal {
  background: linear-gradient(90deg, #b9acd6, #e6dff3 45%, #b9acd6);
}
html[data-event="haunted"][data-theme="light"] #home .tr-counter {
  background: repeating-linear-gradient(90deg, #9a6a42 0 118px, #7d5232 118px 122px, #91623c 122px 236px, #7d5232 236px 240px);
  box-shadow: inset 0 4px 0 #6b4423, inset 0 -12px 16px -10px rgba(0, 0, 0, .35), 0 -8px 24px rgba(58, 40, 90, .18);
}
html[data-event="haunted"][data-theme="light"] #home .tr-rail {
  background: linear-gradient(#cbbde6, #8f7fb3); box-shadow: 0 4px 8px rgba(58, 40, 90, .25);
}
/* The pumpkins sit on the counter's two ends — the ends that SHOW: the counter
   runs out past the card by the room's bleed, and the card trims it there. */
html[data-event="haunted"] #home .hn-pumpkin {
  position: absolute; bottom: calc(100% - 10px); z-index: 2; width: 58px; height: 50px;
}
html[data-event="haunted"] #home .hn-pk-l { left: calc(var(--tr-bleed, 40px) + 14px); }
/* Not while a tap's board is open: it comes down to the counter, and a pumpkin
   would sit on its corner. */
html[data-event="haunted"] #home .tr.is-poured .hn-pumpkin { display: none; }
html[data-event="haunted"] #home .hn-pk-r {
  right: calc(var(--tr-bleed, 40px) + 16px); width: 46px; height: 40px; animation-delay: -1.2s;
}

/* ---- the glasses: potion, with an eye in it ------------------------------ */
html[data-event="haunted"] #home .tr-tap { --tr-fill: 46%; --tr-foam-op: 1; }
@media (hover: hover) {
  html[data-event="haunted"] #home .tr-tap:hover { --tr-fill: 60%; }
}
html[data-event="haunted"] #home .tr-tap:focus-visible { --tr-fill: 60%; }
html[data-event="haunted"] #home .tr-tap.is-pouring { --tr-fill: 88%; }
html[data-event="haunted"] #home .tr-beer {
  background: linear-gradient(#8ee84a, #5fbf2a); opacity: .9;
}
html[data-event="haunted"] #home .tr-foam b { background: none; }
html[data-event="haunted"] #home .tr-bub { background: #e5ff9e; }
html[data-event="haunted"] #home .hn-eye {
  position: absolute; left: 30%; bottom: 16%; z-index: 1; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 58% 52%, #1a1330 0 30%, #f6f1ff 34%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-event="haunted"] #home .tr-tap[data-group="ent"] .hn-eye {
  left: 44%; bottom: 22%; width: 19%;
  background: radial-gradient(circle at 40% 45%, #8f1d1d 0 28%, #f6f1ff 32%);
}

/* ---- the boards under the counter ----------------------------------------- */
html[data-event="haunted"] #home .home-grid .panel {
  background: var(--hn-panel); border: 1px solid var(--hn-line); border-radius: 16px;
}
html[data-event="haunted"] #home .home-grid .panel-t {
  font-family: 'Archivo Black', 'Archivo', system-ui, sans-serif; font-weight: 400; color: var(--hn-ink);
}
html[data-event="haunted"] #home .home-grid .panel-link { color: var(--hn-link); }

/* ---- the Weekend Challenge in the tavern ----------------------------------
   The page's tokens above do most of it — the tiles, the slots, the cards,
   the buttons in the tavern's orange. What is left is the weekend's own
   name between rounds, set the way the design sets its film title. */
html[data-event="haunted"] #wcScreen .gg-rank {
  font-family: Creepster, 'Archivo Black', system-ui, sans-serif; font-weight: 400;
  letter-spacing: .05em; color: var(--hn-title); text-shadow: 0 0 14px rgba(255, 138, 43, .3);
}
html[data-event="haunted"][data-theme="light"] #wcScreen .gg-rank { text-shadow: none; }
html[data-event="haunted"] #wcScreen .gg-back { color: var(--hn-link); }
html[data-event="haunted"] #wcScreen .gg-final .big { color: var(--hn-lime); }

/* ---- the Hall of Fame (the owner: "Also make Hall of Fame on theme") -------
   Its own page with its own tokens (web/leaderboards.html), the same names
   mostly, so the same move: the tokens redefined while the look is on, the
   badge a pumpkin, the top bar's links and its sign the tavern's, the title
   set like the clapboard's word, a web and two bats over it. */
html[data-event="haunted"][data-hof] {
  --page: var(--hn-ground); --ink: var(--hn-card); --ink-2: var(--hn-panel-2);
  --gold: #ff8a2b; --gold-hi: #ffa45e; --gold-sh: #a8480a; --gold-rgb: 255, 138, 43; --gold-dim: #c46a2a;
  --accent-face: var(--hn-orange); --accent-ink: var(--hn-orange-ink);
  --cap-face: var(--hn-orange); --cap-lip: var(--hn-orange-lip); --cap-ink: var(--hn-orange-ink);
  --text: var(--hn-ink); --muted: var(--hn-muted); --muted-2: var(--hn-soft); --faint: #8576ad;
  --sheet: rgba(203, 183, 255, .07); --sheet-2: rgba(203, 183, 255, .11); --sheet-3: rgba(203, 183, 255, .16);
  --hair: rgba(203, 183, 255, .12); --bar-tint: var(--hn-bar);
}
html[data-event="haunted"][data-hof][data-theme="light"] {
  --gold: #c2410c; --gold-hi: #9a3412; --gold-sh: #7c2d12; --gold-rgb: 194, 65, 12; --gold-dim: #b4622f;
  --faint: #9a8cba;
  --sheet: rgba(58, 40, 90, .045); --sheet-2: rgba(58, 40, 90, .075); --sheet-3: rgba(58, 40, 90, .11);
  --hair: rgba(58, 40, 90, .11);
}
html[data-event="haunted"][data-hof] .topbar { border-bottom: 1px solid var(--hn-line); }
html[data-event="haunted"][data-hof] .hof-auth a { color: var(--hn-link); }
html[data-event="haunted"][data-hof] .hof-auth .nav-cta {
  background: var(--hn-orange); color: var(--hn-orange-ink); padding: 8px 14px; border-radius: 9px;
}
html[data-event="haunted"][data-hof] .topnav a.on { border-bottom-color: var(--hn-orange); }
html[data-event="haunted"][data-hof] .brand-badge > i { display: none; }
html[data-event="haunted"][data-hof] .brand-badge .hn-logo {
  display: block; position: absolute; left: 50%; top: 50%;
  width: 1.05em; height: 1.05em; transform: translate(-50%, -50%); overflow: visible;
}
html[data-event="haunted"][data-hof] header { position: relative; }
html[data-event="haunted"][data-hof] h1 {
  font-family: Creepster, 'Archivo Black', system-ui, sans-serif; font-weight: 400;
  letter-spacing: .04em; color: var(--hn-title); text-shadow: 0 0 18px rgba(255, 138, 43, .35);
}
html[data-event="haunted"][data-hof][data-theme="light"] h1 { text-shadow: none; }
html[data-event="haunted"][data-hof] .hn-hof-decor {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
html[data-event="haunted"][data-hof] header > :not(.hn-hof-decor) { position: relative; z-index: 1; }
html[data-event="haunted"][data-hof] .hn-hof-decor .hn-web {
  position: absolute; right: 0; top: 0; width: 140px; height: 140px;
  transform: scaleX(-1); opacity: .5; stroke: #a594cc;
}
html[data-event="haunted"][data-hof][data-theme="light"] .hn-hof-decor .hn-web { stroke: #8f7fb3; }
html[data-event="haunted"][data-hof] .hn-hof-decor .hn-bat {
  position: absolute; left: 0; top: 18px; width: 40px; height: 20px; fill: #06030c;
  animation: hn-fly 19s linear infinite;
}
html[data-event="haunted"][data-hof][data-theme="light"] .hn-hof-decor .hn-bat { fill: #2a1d45; }
html[data-event="haunted"][data-hof] .hn-hof-decor .hn-b3 {
  top: 52px; width: 26px; height: 13px; animation-duration: 24s; animation-delay: -11s;
}
html[data-event="haunted"][data-hof] .hn-hof-decor .hn-bat svg {
  display: block; width: 100%; height: 100%;
  animation: hn-flap .28s ease-in-out infinite alternate;
}

/* ---- a phone: the design's own cuts ----------------------------------------- */
@media (max-width: 700px) {
  html[data-event="haunted"] #home .hn-moon,
  html[data-event="haunted"] #home .hn-spider,
  html[data-event="haunted"] #home .hn-pumpkin { display: none; }
  html[data-event="haunted"] #home .hn-web { width: 110px; height: 110px; }
  html[data-event="haunted"] #home .hn-bat { top: 120px; }
  html[data-event="haunted"] #home .hn-b2 { top: 170px; }
  html[data-event="haunted"] #home .hn-b3 { top: 90px; }
  html[data-event="haunted"] #home .tr-bar b { font-size: 10px; letter-spacing: .25em; padding: 2px 8px; }
}

/* ---- nobody is animated who asked not to be -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-event="haunted"] #home .hn-bat,
  html[data-event="haunted"][data-hof] .hn-hof-decor .hn-bat { display: none; }
  html[data-event="haunted"] #home .hn-spider,
  html[data-event="haunted"] #home .hn-glow,
  html[data-event="haunted"] #home .hn-orbit { animation: none; }
  html[data-event="haunted"] #home .hn-clap { transition: none; }
}