/* Page-specific Halloween theme, loaded only by the Halloween game-night article. */
.halloween-page {
  --halloween-orange: #ff8a1f;
  --halloween-orange-light: #ffb347;
  --clr-border: rgba(255, 138, 31, .22);
  --clr-surface: rgba(25, 12, 35, .78);
  background:
    linear-gradient(180deg, rgba(7,3,12,.2), rgba(8,4,13,.68) 50%, rgba(9,4,14,.82)),
    url("/images/articles/halloween-haunted-background.png") center top / cover no-repeat fixed,
    #09050e;
  background-attachment: fixed;
}
.halloween-page .article-page { position:relative; isolation:isolate; overflow:hidden; }
.halloween-page .article-shell { position:relative; z-index:2; }
.halloween-page .article-page::before,
.halloween-page .article-page::after {
  content:"";
  position:fixed;
  z-index:1;
  width:min(28vw,390px);
  aspect-ratio:2/3;
  bottom:-3rem;
  pointer-events:none;
  background:url("/images/articles/halloween-character-cluster.png") center / contain no-repeat;
  opacity:.48;
  filter:drop-shadow(0 0 28px rgba(255,105,20,.2));
  -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 52%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 76% at 50% 52%,#000 58%,transparent 100%);
}
.halloween-page .article-page::before { right:-5.5rem; }
.halloween-page .article-page::after { left:-7rem; transform:scaleX(-1); opacity:.28; }
.halloween-page .site-header:not(#site-header) { background:rgba(15,7,22,.96); border-bottom-color:rgba(255,138,31,.28); box-shadow:0 4px 30px rgba(255,103,16,.08); }
.halloween-page .logo-accent,
.halloween-page .breadcrumbs a,
.halloween-page .article-body a:not(.btn),
.halloween-page .article-card span,
.halloween-page .toc a:hover { color:var(--halloween-orange-light); }
.halloween-page .article-hero { border-color:rgba(255,138,31,.48); background:linear-gradient(145deg,rgba(39,15,48,.97),rgba(17,9,24,.98)); box-shadow:0 22px 75px rgba(0,0,0,.58),0 0 45px rgba(255,113,24,.12); }
.halloween-page .article-hero img { border-bottom:1px solid rgba(255,138,31,.3); }
.halloween-page .article-kicker { color:var(--halloween-orange-light); }
.halloween-page .article-title { background:linear-gradient(100deg,#fff3df 12%,#ffad45 55%,#d9a5ff 96%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.halloween-page .article-body h2 { color:#fff1dd; text-shadow:0 0 24px rgba(255,120,24,.16); }
.halloween-page .article-body h2::before { content:"✦"; color:var(--halloween-orange); margin-right:.55rem; font-size:.72em; }
.halloween-page .article-body h3 { color:#f3dfff; }
.halloween-page .note,
.halloween-page .play-cta { border-color:rgba(255,138,31,.38); background:linear-gradient(135deg,rgba(255,112,18,.13),rgba(130,48,180,.14)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.halloween-page .toc { border-color:rgba(255,138,31,.3); background:linear-gradient(155deg,rgba(35,13,43,.96),rgba(12,8,18,.96)); box-shadow:0 14px 40px rgba(0,0,0,.35); }
.halloween-page .toc strong { color:var(--halloween-orange-light); }
.halloween-page .table-wrap,
.halloween-page .idea-card,
.halloween-page .article-card { border-color:rgba(255,138,31,.25); background:linear-gradient(145deg,rgba(37,16,44,.82),rgba(15,10,22,.9)); }
.halloween-page th { color:#ffe7c7; background:linear-gradient(90deg,rgba(255,119,18,.2),rgba(137,50,190,.18)); }
.halloween-page .faq details { border-color:rgba(255,138,31,.2); }
.halloween-page .faq summary { color:#ffe4c0; }
.halloween-page .article-card:hover { border-color:rgba(255,138,31,.65); box-shadow:0 14px 35px rgba(255,103,16,.1); }
.halloween-page .btn-primary { background:linear-gradient(135deg,#e85d0b,#a13bd1); box-shadow:0 8px 30px rgba(232,93,11,.22); }
@media (prefers-reduced-motion:no-preference) { .halloween-page .article-hero { animation:halloween-glow 5s ease-in-out infinite alternate; } }
@keyframes halloween-glow {
  from { box-shadow:0 22px 75px rgba(0,0,0,.58),0 0 35px rgba(255,113,24,.08); }
  to { box-shadow:0 22px 75px rgba(0,0,0,.58),0 0 52px rgba(168,85,247,.16); }
}
@media (max-width:1350px) {
  .halloween-page .article-page::before,
  .halloween-page .article-page::after { opacity:.17; }
}
@media (max-width:1050px) {
  .halloween-page { background-position:center top; background-attachment:scroll; }
  .halloween-page .article-page::before,
  .halloween-page .article-page::after { display:none; }
}