/* SaitoDex 3.15: Halloween event theme, "百鬼夜行" (night parade of a hundred
 * yokai), drawn in the Saito Legends manga style.
 *
 * Loaded only while the Halloween event is switched on in Control (or the
 * owner is previewing it). The colours come from theme-halloween.css, which
 * scripts/build_theme_css.py generates; this file adds the art: a glowing
 * harvest moon, crows, hitodama wisps and falling momiji leaves, a lantern
 * garland and a swinging lantern ghost (chochin-obake), dripping Halloween
 * headlines with a manga ink outline, oni pumpkins and the midnight touge
 * road along the footer. Card pictures, set colours and badges are never
 * changed. The surprises live in js/events/halloween.js.
 */

@font-face{font-family:"SaitoDex Dela";src:url("../../fonts/dela-gothic-one-saitodex.90f0f62fb5c4.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SaitoDex Creepster";src:url("../../fonts/creepster-saitodex.107ac2ebb7d6.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root[data-event="halloween"]{
  --hw-orange:#ff7a1a;--hw-amber:#ffb347;--hw-candle:#ffe08a;--hw-purple:#8f5bd6;--hw-violet:#4b2a78;
  --hw-night:#0c0712;--hw-deep:#07040b;--hw-cream:#fbf1e4;--hw-ink:#0b0610;--hw-red:#c1121f;
  --hw-dots:radial-gradient(circle,rgba(255,122,26,.22) 1.2px,transparent 1.6px);
  background:
    radial-gradient(ellipse 80% 55% at 85% -8%,rgba(143,91,214,.30),transparent 60%),
    radial-gradient(ellipse 70% 45% at 8% 30%,rgba(75,42,120,.28),transparent 65%),
    radial-gradient(ellipse 120% 60% at 50% 115%,rgba(255,122,26,.10),transparent 60%),
    linear-gradient(180deg,#120a1c 0%,#0c0712 38%,#09050e 100%);
  background-attachment:fixed;
}
/* The night sky sits on the page itself; the body stays see-through so the
   moon, wisps and fog can show between sections. */
:root[data-event="halloween"] body{background:transparent}

/* ----------------------------------------------------------------- sky -- */
.event-fx{position:static}
.event-fx>*{pointer-events:none}
.hw-stars,.hw-fog,.hw-embers,.hw-wisps{position:fixed;z-index:-1}
.hw-stars{inset:0;opacity:.55;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 27% 8%,#ffe9c7 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 41% 22%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 58% 12%,#e9dcff 50%,transparent 51%),
  radial-gradient(1px 1px at 66% 31%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 79% 6%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 91% 27%,#ffe9c7 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 44%,#e9dcff 50%,transparent 51%),
  radial-gradient(1px 1px at 35% 48%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 72% 52%,#fff 50%,transparent 51%);
  background-size:520px 420px;animation:hw-twinkle 7s ease-in-out infinite alternate}
@keyframes hw-twinkle{from{opacity:.35}to{opacity:.7}}
@keyframes hw-moon-bob{from{transform:translateY(0)}to{transform:translateY(10px)}}

/* Drifting fog along the bottom of the screen. */
.hw-fog{left:0;right:0;bottom:0;height:38vh;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 55%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%)}
.hw-fog i{position:absolute;bottom:-12vh;left:-50%;width:200%;height:42vh;border-radius:50%;filter:blur(28px);
  background:
    radial-gradient(ellipse 18% 55% at 12% 60%,rgba(200,180,230,.14),transparent 70%),
    radial-gradient(ellipse 22% 50% at 38% 55%,rgba(170,150,210,.12),transparent 70%),
    radial-gradient(ellipse 16% 60% at 63% 62%,rgba(210,190,235,.13),transparent 70%),
    radial-gradient(ellipse 20% 50% at 88% 58%,rgba(170,150,210,.11),transparent 70%)}
.hw-fog .hw-fog-1{animation:hw-drift 70s linear infinite}
.hw-fog .hw-fog-2{bottom:-16vh;opacity:.8;animation:hw-drift 95s linear infinite reverse}
.hw-fog .hw-fog-3{bottom:-20vh;opacity:.6;filter:blur(40px);animation:hw-drift 130s linear infinite}
@keyframes hw-drift{from{transform:translateX(0)}to{transform:translateX(25%)}}

/* Hitodama: the pale spirit flames of Japanese ghost stories, drifting up. */
.hw-wisps{inset:0;overflow:hidden}
.hw-wisps i{position:absolute;bottom:-60px;width:18px;height:26px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 66%,#fff 0 18%,#e6dbff 30%,rgba(171,136,255,.75) 52%,rgba(143,91,214,0) 72%);
  box-shadow:0 0 18px 6px rgba(171,136,255,.35),0 0 46px 10px rgba(143,91,214,.18);opacity:0;animation:hw-wisp 22s linear infinite}
.hw-wisps i:after{content:"";position:absolute;left:50%;bottom:62%;width:7px;height:34px;transform:translateX(-50%) rotate(8deg);transform-origin:bottom;border-radius:50% 50% 40% 40%/90% 90% 10% 10%;background:linear-gradient(0deg,rgba(214,198,255,.55),rgba(171,136,255,0));filter:blur(1.5px);animation:hw-tail 1.6s ease-in-out infinite alternate}
.hw-wisps i:nth-child(1){left:7%;animation-delay:-2s}
.hw-wisps i:nth-child(2){left:22%;animation-delay:-11s;animation-duration:26s;scale:.7}
.hw-wisps i:nth-child(3){left:46%;animation-delay:-6s;animation-duration:30s;scale:.55}
.hw-wisps i:nth-child(4){left:68%;animation-delay:-16s;animation-duration:24s}
.hw-wisps i:nth-child(5){left:84%;animation-delay:-3s;animation-duration:28s;scale:.8}
.hw-wisps i:nth-child(6){left:95%;animation-delay:-19s;animation-duration:33s;scale:.6}
@keyframes hw-wisp{
  0%{translate:0 0;opacity:0}
  8%{opacity:.9}
  25%{translate:26px -26vh}
  50%{translate:-18px -52vh;opacity:.75}
  75%{translate:22px -78vh;opacity:.5}
  100%{translate:-10px -110vh;opacity:0}}
@keyframes hw-tail{from{transform:translateX(-50%) rotate(-10deg)}to{transform:translateX(-50%) rotate(12deg)}}

/* A few embers from the lanterns. */
.hw-embers{left:0;right:0;bottom:0;height:60vh;overflow:hidden}
.hw-embers i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px 2px rgba(255,122,26,.75);opacity:0;animation:hw-ember 12s linear infinite}
.hw-embers i:nth-child(1){left:9%;animation-delay:0s}
.hw-embers i:nth-child(2){left:19%;animation-delay:4.2s;animation-duration:14s}
.hw-embers i:nth-child(3){left:33%;animation-delay:7.1s}
.hw-embers i:nth-child(4){left:47%;animation-delay:1.9s;animation-duration:15s}
.hw-embers i:nth-child(5){left:58%;animation-delay:9.3s}
.hw-embers i:nth-child(6){left:71%;animation-delay:5.6s;animation-duration:13s}
.hw-embers i:nth-child(7){left:83%;animation-delay:2.7s}
.hw-embers i:nth-child(8){left:94%;animation-delay:10.4s;animation-duration:16s}
@keyframes hw-ember{
  0%{transform:translate(0,0) scale(1);opacity:0}
  10%{opacity:.9}
  50%{transform:translate(18px,-28vh) scale(.8);opacity:.7}
  100%{transform:translate(-14px,-58vh) scale(.3);opacity:0}}

/* Momiji: autumn maple leaves tumbling down, the October version of the
   sakura petals on the cards. */
.hw-leaves{position:fixed;inset:0;z-index:-1;overflow:hidden}
.hw-leaves i{position:absolute;top:-40px;width:22px;height:22px;background:url("../../img/events/halloween/momiji.88d177598c4f.svg") center/contain no-repeat;opacity:0;animation:hw-leaf 19s linear infinite}
.hw-leaves i:nth-child(even){background-image:url("../../img/events/halloween/momiji-gold.e1437fd36448.svg")}
.hw-leaves i:nth-child(1){left:6%;animation-delay:-3s}
.hw-leaves i:nth-child(2){left:19%;width:16px;height:16px;animation-delay:-11s;animation-duration:23s}
.hw-leaves i:nth-child(3){left:37%;animation-delay:-7s;animation-duration:21s}
.hw-leaves i:nth-child(4){left:55%;width:18px;height:18px;animation-delay:-15s;animation-duration:25s}
.hw-leaves i:nth-child(5){left:71%;animation-delay:-1s;animation-duration:20s}
.hw-leaves i:nth-child(6){left:86%;width:15px;height:15px;animation-delay:-9s;animation-duration:24s}
.hw-leaves i:nth-child(7){left:95%;animation-delay:-17s;animation-duration:22s}
@keyframes hw-leaf{
  0%{translate:0 0;rotate:0deg;opacity:0}
  6%{opacity:.85}
  25%{translate:40px 28vh;rotate:120deg}
  50%{translate:-30px 56vh;rotate:250deg}
  75%{translate:35px 84vh;rotate:400deg;opacity:.75}
  100%{translate:-10px 112vh;rotate:540deg;opacity:0}}

/* --------------------------------------------------------------- crows -- */
.hw-crows{position:fixed;inset:0 0 auto 0;height:70vh;z-index:25;overflow:hidden}
.hw-crow{position:absolute;left:-110px;top:20vh;width:84px;height:47px;background:url("../../img/events/halloween/crow.4a5ebfdb1b2d.svg") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(143,91,214,.35));opacity:0;animation:hw-fly-1 26s linear infinite}
.hw-crow-2{top:12vh;width:60px;height:34px;animation:hw-fly-2 33s linear 7s infinite}
.hw-crow-3{top:34vh;width:48px;height:27px;animation:hw-fly-1 39s linear 16s infinite}
.hw-crow-4{top:8vh;width:70px;height:39px;animation:hw-fly-3 45s linear 23s infinite}
@keyframes hw-fly-1{
  0%{transform:translate(0,0) rotate(-4deg);opacity:0}
  2%{opacity:1}
  8%{transform:translate(30vw,-6vh) rotate(3deg)}
  14%{transform:translate(62vw,3vh) rotate(-4deg)}
  20%{transform:translate(98vw,-9vh) rotate(4deg);opacity:1}
  21%,100%{transform:translate(110vw,-12vh);opacity:0}}
@keyframes hw-fly-2{
  0%{transform:translate(0,0) rotate(3deg);opacity:0}
  2%{opacity:.9}
  9%{transform:translate(28vw,7vh) rotate(-3deg)}
  16%{transform:translate(64vw,-2vh) rotate(4deg)}
  22%{transform:translate(105vw,9vh) rotate(-2deg);opacity:.9}
  23%,100%{transform:translate(112vw,10vh);opacity:0}}
@keyframes hw-fly-3{
  0%{transform:translate(0,22vh) rotate(-8deg) scale(.7);opacity:0}
  2%{opacity:1}
  7%{transform:translate(24vw,6vh) rotate(-3deg) scale(.9)}
  12%{transform:translate(48vw,14vh) rotate(4deg) scale(1.1)}
  18%{transform:translate(80vw,-2vh) rotate(-5deg) scale(1.3)}
  22%{transform:translate(108vw,-8vh) scale(1.4);opacity:1}
  23%,100%{transform:translate(115vw,-8vh);opacity:0}}

/* ---------------------------------------------- lantern ghost (obake) -- */
.hw-obake{position:absolute;top:126px;right:6%;z-index:21;width:74px;height:190px;transform-origin:50% 0;animation:hw-swing 7s ease-in-out infinite}
.hw-obake-cord{position:absolute;left:50%;top:0;width:2px;height:58px;margin-left:-1px;background:linear-gradient(180deg,rgba(106,74,156,.2),#6a4a9c);animation:hw-cord 15s ease-in-out infinite}
.hw-obake-body{position:absolute;left:0;top:50px;width:74px;height:122px;pointer-events:auto;cursor:pointer;background:url("../../img/events/halloween/chochin-obake.941e9827122e.svg") center top/contain no-repeat;filter:drop-shadow(0 0 16px rgba(255,140,40,.55)) drop-shadow(0 0 40px rgba(255,122,26,.25));animation:hw-peek 15s ease-in-out infinite}
@keyframes hw-swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes hw-cord{0%,70%,100%{height:58px}78%,88%{height:96px}}
.hw-obake.is-bee .hw-obake-body{animation:hw-spin-bee .9s cubic-bezier(.3,1.6,.5,1)}
.hw-obake.is-bee:after{content:"";position:absolute;left:-118px;top:70px;width:120px;height:80px;background:url("../../img/events/halloween/sfx-bee.d3d08f538411.svg") center/contain no-repeat;animation:hw-pop 1.6s cubic-bezier(.2,1.4,.4,1) forwards;pointer-events:none}
@keyframes hw-spin-bee{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.25) rotate(-20deg)}70%{transform:scale(1.15) rotate(14deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hw-pop{0%{transform:scale(.2) rotate(-14deg);opacity:0}25%{transform:scale(1.08) rotate(3deg);opacity:1}80%{opacity:1}100%{transform:scale(1) translateY(-10px);opacity:0}}
@keyframes hw-peek{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(38px) rotate(-6deg)}82%{transform:translateY(34px) rotate(5deg)}88%{transform:translateY(38px) rotate(-2deg)}}

/* ------------------------------------------- the lantern garland (header) -- */
/* A strip of night sky under the header for the lanterns to hang in. */
:root[data-event="halloween"] .site-header{margin-bottom:58px}
:root[data-event="halloween"] .site-header:after{content:"";position:absolute;top:100%;left:50%;width:100vw;height:74px;transform:translateX(-50%);background:url("../../img/events/halloween/lantern-garland.03033d2a6427.svg") 0 0/920px 75px repeat-x;filter:drop-shadow(0 0 10px rgba(255,140,40,.45));pointer-events:none;z-index:1}

/* -------------------------------------------------------------- header -- */
:root[data-event="halloween"] .announcement{background:linear-gradient(90deg,#120a1a,#2a1238 30%,#3a160c 50%,#2a1238 70%,#120a1a);background-size:200% 100%;color:var(--hw-amber);text-shadow:0 0 10px rgba(255,122,26,.45);animation:hw-shimmer 14s linear infinite;position:relative;z-index:22;border-bottom:2px solid var(--hw-ink);box-shadow:0 1px 0 rgba(255,122,26,.35)}
:root[data-event="halloween"] .announcement span{color:var(--hw-purple)}
:root[data-event="halloween"] .announcement b{font-weight:inherit}
:root[data-event="halloween"] .announcement b:last-child{font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP","Meiryo",sans-serif;font-weight:800;letter-spacing:.24em;color:#ffd27a}
@keyframes hw-shimmer{from{background-position:0 0}to{background-position:200% 0}}
:root[data-event="halloween"] .site-header{background:rgba(12,7,18,.88);border-bottom:2px solid var(--hw-ink);box-shadow:0 1px 0 rgba(255,122,26,.35),0 18px 40px -26px rgba(255,122,26,.55)}
:root[data-event="halloween"] .brand-wordmark,:root[data-event="halloween"] .footer-wordmark img{filter:hue-rotate(48deg) saturate(1.35) drop-shadow(0 0 12px rgba(255,122,26,.40))}
:root[data-event="halloween"] .site-header nav a:after{background:var(--hw-orange);box-shadow:0 0 10px rgba(255,122,26,.9)}
:root[data-event="halloween"] .site-header nav a.is-active,:root[data-event="halloween"] .site-header nav a:hover{color:var(--hw-amber)}
:root[data-event="halloween"] .site-messages .site-message{border-color:rgba(255,122,26,.45)}

/* ------------------------------------------------------ manga headlines -- */
/* Dripping Halloween lettering with a manga ink outline and a purple drop,
   like the card titles. Only with Standard letters: anyone using a reading
   font (e.g. Weighted letters) keeps it. */
:root[data-event="halloween"]:not([data-font]) .hero-copy h1,
:root[data-event="halloween"]:not([data-font]) .page-hero h1,
:root[data-event="halloween"]:not([data-font]) .set-hero h1,
:root[data-event="halloween"]:not([data-font]) .detail-copy h1,
:root[data-event="halloween"]:not([data-font]) .section-title-row h2,
:root[data-event="halloween"]:not([data-font]) .split-feature h2,
:root[data-event="halloween"]:not([data-font]) .database-cta h2,
:root[data-event="halloween"]:not([data-font]) .event-home h2{font-family:"SaitoDex Creepster","Arial Black","Segoe UI",Arial,sans-serif;font-weight:400;letter-spacing:.045em;line-height:1.04;color:var(--hw-cream);
  text-shadow:-2px -2px 0 var(--hw-ink),2px -2px 0 var(--hw-ink),-2px 2px 0 var(--hw-ink),2px 2px 0 var(--hw-ink),0 3px 0 var(--hw-ink),5px 6px 0 var(--hw-violet),6px 7px 0 var(--hw-ink)}
:root[data-event="halloween"]:not([data-font]) .hero-copy h1{font-size:clamp(50px,5.7vw,90px)}
:root[data-event="halloween"]:not([data-font]) .page-hero h1,:root[data-event="halloween"]:not([data-font]) .set-hero h1{font-size:clamp(48px,5.3vw,80px)}
:root[data-event="halloween"]:not([data-font]) .detail-copy h1{font-size:clamp(40px,4.4vw,68px)}
:root[data-event="halloween"]:not([data-font]) .section-title-row h2,:root[data-event="halloween"]:not([data-font]) .split-feature h2{font-size:clamp(32px,3.8vw,54px)}
:root[data-event="halloween"]:not([data-font]) .database-cta h2{font-size:clamp(30px,3.4vw,50px)}
:root[data-event="halloween"] .hero-copy h1 em,:root[data-event="halloween"] .page-hero h1 em,:root[data-event="halloween"] .set-hero h1 em{color:var(--hw-orange);-webkit-text-stroke:0}
:root[data-event="halloween"]:not([data-font]) .hero-copy h1 em,:root[data-event="halloween"]:not([data-font]) .page-hero h1 em{text-shadow:-2px -2px 0 var(--hw-ink),2px -2px 0 var(--hw-ink),-2px 2px 0 var(--hw-ink),2px 2px 0 var(--hw-ink),0 3px 0 var(--hw-ink),5px 6px 0 #7a1d05,6px 7px 0 var(--hw-ink),0 0 34px rgba(255,122,26,.55)}
:root[data-event="halloween"] .hero-label,:root[data-event="halloween"] .micro-label{color:var(--hw-amber)}
/* Little oni pumpkin on each section label. */
:root[data-event="halloween"] .section-title-row .micro-label:before{content:"";display:inline-block;width:1.9em;height:1.8em;margin:-.45em .55em 0 0;vertical-align:middle;background:url("../../img/events/halloween/oni-pumpkin.29ea8ed3b43f.svg") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(255,140,30,.55))}
/* Manga screentone behind the big page titles. */
:root[data-event="halloween"] .page-hero:before,:root[data-event="halloween"] .set-hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hw-dots) 0 0/9px 9px;mask-image:radial-gradient(ellipse 60% 90% at 100% 50%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 90% at 100% 50%,#000,transparent 70%)}
:root[data-event="halloween"] .page-hero>*,:root[data-event="halloween"] .set-hero>*{position:relative}

/* ---------------------------------------------------- home page bits -- */
:root[data-event="halloween"] .sun-disc{display:block;border-radius:0;width:330px;height:330px;right:auto;left:-20px;top:-70px;opacity:1;background:url("../../img/events/halloween/moon.42ded35af23c.svg") center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 40px rgba(255,190,100,.4)) drop-shadow(0 0 120px rgba(255,122,26,.25));animation:hw-moon-bob 12s ease-in-out infinite alternate}
:root[data-event="halloween"] .home-hero:before{background:radial-gradient(circle,rgba(255,122,26,.16),rgba(143,91,214,.08) 45%,transparent 67%)}
:root[data-event="halloween"] .sakura-noise{opacity:.7}
/* The three hero cards stay clean, with just a deeper shadow at night. */
:root[data-event="halloween"] .fan-card{border-color:transparent;box-shadow:0 28px 65px rgba(0,0,0,.6)}
/* Easter egg: click the moon (three times) and it grins back. */
:root[data-event="halloween"] .sun-disc{cursor:pointer;pointer-events:auto}
:root[data-event="halloween"] .sun-disc:after{content:"";position:absolute;inset:0;background:url("../../img/events/halloween/moon-face.d4aeec824377.svg") center/contain no-repeat;opacity:0;transition:opacity .5s}
:root[data-event="halloween"] .sun-disc.is-grinning:after{opacity:1;animation:hw-grin 3.6s ease-in-out}
@keyframes hw-grin{0%,100%{transform:scale(1)}10%{transform:scale(1.06) rotate(-3deg)}20%{transform:scale(1) rotate(2deg)}}
:root[data-event="halloween"] .vertical-jp{color:rgba(255,179,71,.5)}
.event-hero-badge{display:none}
:root[data-event="halloween"] .event-hero-badge{display:flex;width:fit-content;align-items:center;gap:10px;margin:0 0 18px;padding:6px 16px 6px 6px;border:2px solid var(--hw-ink);border-radius:999px;background:linear-gradient(90deg,#ff8a24,#ff6a0a);color:#1a0c02;font-size:10px;font-weight:800;letter-spacing:.2em;box-shadow:3px 3px 0 var(--hw-ink),0 0 26px -6px rgba(255,122,26,.75);animation:hw-pulse 3.2s ease-in-out infinite}
:root[data-event="halloween"] .event-hero-badge i{width:30px;height:28px;background:url("../../img/events/halloween/oni-pumpkin.29ea8ed3b43f.svg") center/contain no-repeat}
:root[data-event="halloween"] .event-hero-badge:hover{background:linear-gradient(90deg,#ffb04a,#ff7a1a);color:#000}
@keyframes hw-pulse{0%,100%{box-shadow:3px 3px 0 var(--hw-ink),0 0 18px -8px rgba(255,122,26,.55)}50%{box-shadow:3px 3px 0 var(--hw-ink),0 0 32px -4px rgba(255,122,26,.85)}}
:root[data-event="halloween"] .hero-search{background:rgba(20,13,29,.92);border-color:rgba(255,122,26,.4);box-shadow:4px 4px 0 var(--hw-ink),0 12px 35px rgba(0,0,0,.35),0 0 30px -12px rgba(255,122,26,.5)}

:root[data-event="halloween"] .ticker{background:linear-gradient(90deg,#ff6a0a,#ff8a24 50%,#ff6a0a);color:var(--hw-ink);border-top:3px solid var(--hw-ink);border-bottom:3px solid var(--hw-ink);position:relative}
:root[data-event="halloween"] .ticker div{font-family:"SaitoDex Creepster","Arial Black",sans-serif;font-weight:400;letter-spacing:.12em;font-size:1.25em}
:root[data-event="halloween"] .ticker b{color:var(--hw-ink);text-shadow:none}
:root[data-event="halloween"] .ticker span:nth-child(4n+3){color:#fff6e0;font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP","Meiryo",sans-serif;font-weight:900;letter-spacing:.3em;text-shadow:-1px -1px 0 var(--hw-ink),1px -1px 0 var(--hw-ink),-1px 1px 0 var(--hw-ink),1px 1px 0 var(--hw-ink),2px 2px 0 var(--hw-ink)}

/* The Halloween welcome panel on Home, laid out like a manga page. */
.event-home{display:none}
:root[data-event="halloween"] .event-home{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,520px);gap:40px;align-items:center;padding-top:80px;padding-bottom:60px;position:relative}
:root[data-event="halloween"] .event-home:before{content:"";position:absolute;inset:40px 30px 20px;z-index:-1;border:3px solid var(--hw-ink);outline:1px solid rgba(255,122,26,.35);outline-offset:-8px;background:
    radial-gradient(circle,rgba(255,179,71,.16) 1.3px,transparent 1.7px) 0 0/10px 10px,
    radial-gradient(ellipse at 85% 40%,rgba(255,122,26,.20),transparent 55%),
    radial-gradient(ellipse at 10% 90%,rgba(143,91,214,.22),transparent 55%),
    linear-gradient(160deg,rgba(29,19,40,.92),rgba(12,7,18,.92));
  box-shadow:8px 8px 0 var(--hw-ink),inset 0 0 80px rgba(0,0,0,.45),0 0 60px -30px rgba(255,122,26,.6)}
:root[data-event="halloween"] .event-home-banner{align-self:stretch;margin:-30px 0 -14px 40px;min-height:380px;background:url("../../img/events/halloween/banner-hyakki.cb6c0f0a118b.svg") center top/contain no-repeat;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.5));transform-origin:50% 0;animation:hw-banner 8s ease-in-out infinite}
@keyframes hw-banner{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
:root[data-event="halloween"] .event-home-copy{padding:20px 0}
:root[data-event="halloween"] .event-home-kanji{margin-left:8px;padding:2px 8px;border:1px solid rgba(255,179,71,.5);color:#ffd27a;letter-spacing:.2em}
:root[data-event="halloween"] .event-home h2{font-size:clamp(40px,4.8vw,72px);margin:14px 0 6px}
:root[data-event="halloween"]:not([data-font]) .event-home h2{color:var(--hw-orange);text-shadow:-2px -2px 0 var(--hw-ink),2px -2px 0 var(--hw-ink),-2px 2px 0 var(--hw-ink),2px 2px 0 var(--hw-ink),0 3px 0 var(--hw-ink),5px 6px 0 #7a1d05,6px 7px 0 var(--hw-ink),0 0 40px rgba(255,122,26,.5)}
:root[data-event="halloween"] .event-home .event-home-jp{margin:14px 0 16px;font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP","Meiryo",sans-serif;font-weight:800;font-size:15px;letter-spacing:.42em;color:#ffd27a}
:root[data-event="halloween"] .event-home p{max-width:560px;color:#cfc3dc;line-height:1.75;font-size:15px}
:root[data-event="halloween"] .event-home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
:root[data-event="halloween"] .event-home-actions .outline-button{margin-top:0}
:root[data-event="halloween"] .event-home-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:30px 44px 30px 0}
:root[data-event="halloween"] .event-home-cards .card-tile{position:relative;overflow:visible}
:root[data-event="halloween"] .event-home-cards .card-tile:nth-child(1){transform:rotate(-3deg)}
:root[data-event="halloween"] .event-home-cards .card-tile:nth-child(2){transform:rotate(3deg) translateY(14px)}
:root[data-event="halloween"] .event-home-cards .card-tile:hover{transform:rotate(0) translateY(-6px)}
/* A sealing talisman (ofuda) slapped on each promo card. */
:root[data-event="halloween"] .event-home-cards .card-tile:after{content:"";position:absolute;top:-18px;right:14px;width:40px;height:126px;z-index:4;background:url("../../img/events/halloween/ofuda.75963c2fc711.svg") center/contain no-repeat;transform:rotate(9deg);filter:drop-shadow(2px 4px 4px rgba(0,0,0,.55));pointer-events:none;transition:transform .25s}
:root[data-event="halloween"] .event-home-cards .card-tile:nth-child(2):after{right:auto;left:14px;transform:rotate(-8deg)}
:root[data-event="halloween"] .event-home-cards .card-tile:hover:after{transform:rotate(16deg) translate(6px,-8px)}

/* ------------------------------------------------ panels, cards, buttons -- */
:root[data-event="halloween"] .card-tile{background:linear-gradient(160deg,rgba(29,19,40,.94),rgba(13,8,20,.96));border-color:#2e2140}
:root[data-event="halloween"] .card-tile:hover{border-color:var(--hw-orange);background:linear-gradient(160deg,rgba(40,24,52,.96),rgba(16,9,24,.98));box-shadow:4px 4px 0 var(--hw-ink),0 20px 44px -14px rgba(255,122,26,.50),0 0 60px -22px rgba(143,91,214,.8)}
:root[data-event="halloween"] .set-panel{border-color:#34254a}
:root[data-event="halloween"] .set-panel:hover{border-color:var(--hw-orange);box-shadow:6px 6px 0 var(--hw-ink),0 26px 65px rgba(0,0,0,.4),0 0 50px -16px rgba(255,122,26,.55)}
:root[data-event="halloween"] .set-panel:before{background:linear-gradient(145deg,#1d1328,#0c0712)}
:root[data-event="halloween"] .set-art-word{color:rgba(255,122,26,.16)}

:root[data-event="halloween"] .button,
:root[data-event="halloween"] .solid-button,
:root[data-event="halloween"] .hero-search button,
:root[data-event="halloween"] .filters button{background:linear-gradient(180deg,#ffa149 0%,#ff7a1a 55%,#e8620c 100%);border-color:var(--hw-ink);color:#1a0c02;box-shadow:3px 3px 0 var(--hw-ink),0 8px 24px -10px rgba(255,122,26,.75);text-shadow:none}
:root[data-event="halloween"] .button:hover,
:root[data-event="halloween"] .solid-button:hover,
:root[data-event="halloween"] .hero-search button:hover,
:root[data-event="halloween"] .filters button:hover{background:linear-gradient(180deg,#ffd27a,#ffa149 60%,#ff7a1a);color:#1a0c02;border-color:var(--hw-ink);animation:hw-flicker 1.4s steps(1) infinite}
@keyframes hw-flicker{0%,100%{box-shadow:3px 3px 0 var(--hw-ink),0 0 26px rgba(255,140,40,.65)}33%{box-shadow:3px 3px 0 var(--hw-ink),0 0 18px rgba(255,140,40,.45)}66%{box-shadow:3px 3px 0 var(--hw-ink),0 0 32px rgba(255,140,40,.75)}}
:root[data-event="halloween"] .outline-button:hover{box-shadow:3px 3px 0 var(--hw-ink),0 0 22px -6px rgba(255,122,26,.7)}

:root[data-event="halloween"] .page-hero,:root[data-event="halloween"] .set-hero{border-bottom:3px solid var(--hw-ink);box-shadow:0 1px 0 rgba(255,122,26,.3)}
:root[data-event="halloween"] .page-hero:after{content:"百鬼夜行";color:rgba(255,122,26,.06)}
:root[data-event="halloween"] .value-panel{border-left-color:var(--hw-orange);box-shadow:0 0 40px -24px rgba(255,122,26,.8)}
:root[data-event="halloween"] .detail-art{box-shadow:0 0 0 3px var(--hw-ink),10px 12px 0 var(--hw-ink),0 35px 80px rgba(0,0,0,.45),0 0 70px -20px rgba(255,122,26,.45),0 0 120px -40px rgba(143,91,214,.7)}
:root[data-event="halloween"] ::selection{background:rgba(255,122,26,.55);color:#1a0c02}
:root[data-event="halloween"] ::-webkit-scrollbar{width:12px;height:12px}
:root[data-event="halloween"] ::-webkit-scrollbar-track{background:#0c0712}
:root[data-event="halloween"] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7a1a,#8f5bd6);border:3px solid #0c0712;border-radius:8px}
:root[data-event="halloween"]{scrollbar-color:#ff7a1a #0c0712}

/* --------------------------------------------- midnight touge footer -- */
/* Fuji, torii gates, a pagoda, stone lanterns, oni pumpkins and a mountain
   road with tail-light trails running along it. */
:root[data-event="halloween"] .site-footer{position:relative;margin-top:250px;border-top:0;background:var(--hw-deep);box-shadow:0 0 0 100vmax var(--hw-deep);clip-path:inset(-240px -100vmax 0 -100vmax)}
:root[data-event="halloween"] .site-footer:before{content:"";position:absolute;left:50%;bottom:calc(100% - 2px);width:100vw;height:240px;transform:translateX(-50%);background:url("../../img/events/halloween/footer-touge.7d3d02db8e66.svg") center bottom/1600px 260px repeat-x,radial-gradient(ellipse 70% 100% at 50% 100%,rgba(255,122,26,.16),transparent 70%),linear-gradient(180deg,transparent,rgba(75,42,120,.28) 60%,rgba(143,91,214,.22));pointer-events:none}
:root[data-event="halloween"] .site-footer p,:root[data-event="halloween"] .footer-year{color:#8c7f9a}
.hw-footer-pumpkin{display:none}
:root[data-event="halloween"] .hw-footer-pumpkin{display:inline-grid;place-items:center;width:52px;height:50px;border:0;padding:0;background:url("../../img/events/halloween/oni-pumpkin.29ea8ed3b43f.svg") center/46px no-repeat;cursor:pointer;filter:drop-shadow(0 0 8px rgba(255,140,30,.55));transition:transform .2s}
:root[data-event="halloween"] .hw-footer-pumpkin:hover,:root[data-event="halloween"] .hw-footer-pumpkin:focus-visible{transform:scale(1.15) rotate(-6deg);filter:drop-shadow(0 0 14px rgba(255,170,60,.9))}

/* ------------------------------------------------- easter egg: バァ!! -- */
.hw-flash{position:fixed;inset:0;z-index:59;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(251,241,228,.85) 0deg 1.4deg,transparent 1.4deg 6deg);mask-image:radial-gradient(circle at 50% 50%,transparent 22%,#000 60%);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 22%,#000 60%);animation:hw-flash 1.3s ease-out forwards}
@keyframes hw-flash{0%{opacity:0;transform:scale(1.2)}12%{opacity:.9}100%{opacity:0;transform:scale(1)}}
.hw-ghost{position:fixed;z-index:61;left:50%;bottom:-260px;width:150px;height:250px;margin-left:-75px;background:url("../../img/events/halloween/chochin-obake.941e9827122e.svg") center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 24px rgba(255,150,50,.75));animation:hw-ghost 3.6s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes hw-ghost{
  0%{transform:translateY(0) rotate(-12deg)}
  22%{transform:translateY(-62vh) rotate(6deg)}
  30%{transform:translateY(-58vh) rotate(-4deg)}
  70%{transform:translateY(-60vh) rotate(3deg);opacity:1}
  100%{transform:translateY(-120vh) rotate(-8deg);opacity:0}}
.hw-boo{position:fixed;z-index:62;left:50%;top:30%;width:min(560px,86vw);aspect-ratio:640/420;transform:translate(-50%,-50%);background:url("../../img/events/halloween/sfx-baa.3e8c3f9c2ec4.svg") center/contain no-repeat;pointer-events:none;animation:hw-boo 1.9s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes hw-boo{0%{transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0}22%{transform:translate(-50%,-50%) scale(1.06) rotate(2deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{transform:translate(-50%,-56%) scale(1.15);opacity:0}}
.hw-swarm-crow{position:fixed;z-index:60;left:var(--x,50vw);top:var(--y,80vh);width:var(--s,54px);height:calc(var(--s,54px) * .56);background:url("../../img/events/halloween/crow.4a5ebfdb1b2d.svg") center/contain no-repeat;pointer-events:none;animation:hw-swarm var(--d,2.4s) cubic-bezier(.3,.1,.5,1) forwards}
@keyframes hw-swarm{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  10%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,-90vh)) scale(1.2) rotate(var(--r,0deg));opacity:0}}

/* ------------------------------------- easter egg: the night parade -- */
/* The secret code (up up down down left right left right B A) sends the
   hyakki yagyo across the bottom of the screen: lantern ghosts, paper
   lanterns and oni pumpkins hopping along, with "ヒュ〜ドロドロ". */
.hw-parade-yokai{position:fixed;left:-120px;bottom:4vh;z-index:60;width:var(--s,60px);height:calc(var(--s,60px) * 1.65);background:url("../../img/events/halloween/chochin-obake.941e9827122e.svg") center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,140,40,.6));animation:hw-hop 4.6s linear forwards}
.hw-parade-yokai.is-lantern{background-image:url("../../img/events/halloween/chochin.e488584e4c06.svg")}
.hw-parade-yokai.is-pumpkin{height:calc(var(--s,60px) * .96);background-image:url("../../img/events/halloween/oni-pumpkin.29ea8ed3b43f.svg")}
@keyframes hw-hop{
  0%{transform:translate(0,0)}10%{transform:translate(12vw,-34px)}20%{transform:translate(24vw,0)}30%{transform:translate(36vw,-34px)}40%{transform:translate(48vw,0)}
  50%{transform:translate(60vw,-34px)}60%{transform:translate(72vw,0)}70%{transform:translate(84vw,-34px)}80%{transform:translate(96vw,0)}90%{transform:translate(108vw,-34px)}100%{transform:translate(120vw,0)}}
.hw-hyudoro{position:fixed;z-index:62;left:50%;top:34%;width:min(640px,90vw);aspect-ratio:760/300;transform:translate(-50%,-50%);background:url("../../img/events/halloween/sfx-hyudoro.84b8157b9981.svg") center/contain no-repeat;pointer-events:none;animation:hw-boo 2.6s cubic-bezier(.2,1.4,.4,1) forwards}

/* ------------------------------------------------------ owner preview -- */
.event-preview-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border:2px solid #0b0610;border-radius:999px;background:rgba(20,10,30,.96);color:#fbf1e4;font-size:13px;box-shadow:4px 4px 0 #0b0610,0 12px 40px rgba(0,0,0,.5),0 0 30px -10px rgba(255,122,26,.7);outline:1px solid rgba(255,122,26,.6)}
.event-preview-bar button{border:0;border-radius:999px;padding:8px 14px;background:#ff7a1a;color:#1a0c02;font-weight:700;cursor:pointer}

/* --------------------------------------------------------- small screens -- */
@media (max-width:1100px){
  :root[data-event="halloween"] .event-home{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  :root[data-event="halloween"] .event-home-banner{display:none}
  :root[data-event="halloween"] .event-home-copy{padding:20px 0 20px 36px}
}
@media (max-width:899px){
  .event-announcement .event-announcement-more{display:none}
  .hw-obake{display:none}
  .hw-crow-3,.hw-crow-4{display:none}
  :root[data-event="halloween"] .site-header{margin-bottom:40px}
  :root[data-event="halloween"] .site-header:after{height:52px;background-size:640px 52px}
  :root[data-event="halloween"] .sun-disc{width:260px;height:260px;left:auto;right:58%;top:-20px}
  :root[data-event="halloween"] .event-home{grid-template-columns:1fr;gap:10px;padding-top:56px}
  :root[data-event="halloween"] .event-home:before{inset:30px 12px 10px}
  :root[data-event="halloween"] .event-home-copy{padding:20px 22px 0}
  :root[data-event="halloween"] .event-home-cards{padding:24px 30px 30px}
  :root[data-event="halloween"] .site-footer{margin-top:170px;clip-path:inset(-160px -100vmax 0 -100vmax)}
  :root[data-event="halloween"] .site-footer:before{height:160px;background-size:1100px 179px,100% 100%,100% 100%}
  .event-preview-bar{left:12px;right:12px;transform:none;border-radius:14px;font-size:12px}
}
@media (max-width:600px){
  :root[data-event="halloween"] .sun-disc{width:200px;height:200px;right:60%;top:-10px}
  :root[data-event="halloween"] .event-home-cards .card-tile:after{width:30px;height:94px}
}

/* Calm version for anyone who asks their device for less motion. */
@media (prefers-reduced-motion:reduce){
  .hw-crows,.hw-embers,.hw-wisps{display:none}
  .hw-leaves{display:none}
  .event-fx *,:root[data-event="halloween"] .announcement,:root[data-event="halloween"] .sun-disc,:root[data-event="halloween"] .sun-disc:after,:root[data-event="halloween"] .event-hero-badge,:root[data-event="halloween"] .event-home-banner,
  :root[data-event="halloween"] .button:hover,:root[data-event="halloween"] .solid-button:hover{animation:none!important}
  .hw-swarm-crow,.hw-ghost,.hw-boo,.hw-flash,.hw-parade-yokai,.hw-hyudoro,.hw-obake:after{display:none}
}
@media print{.event-fx,.event-preview-bar{display:none}}