/* ==========================================================================
   TIPS SEASONAL THEME — HALLOWEEN
   "Haunted Neon Pinball Arcade"

   Activation:  body.theme-halloween  (managed by assets/js/theme-halloween.js)
   Everything below is scoped under .theme-halloween so removing the body
   class (or this file) restores the default site instantly.
   ========================================================================== */

.theme-halloween {
  --tips-cyan: #28f4f4;
  --halloween-orange: #ff6a00;
  --halloween-purple: #7d35ff;
  --halloween-magenta: #d92cff;
  --halloween-green: #97ff38;
  --halloween-bg: #030609;
  --halloween-night: #10071f;
  --halloween-surface: rgba(5, 9, 14, 0.92);
  --halloween-border: rgba(40, 244, 244, 0.35);
}

/* --------------------------------------------------------------------------
   1. PAGE ATMOSPHERE  (painted behind all content via negative z-index)
   -------------------------------------------------------------------------- */

/* Base canvas tone — only visible in the gaps between the site's own
   illustrated section backgrounds; keeps the page perimeter moody. */
body.theme-halloween::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(140vmax 90vmax at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, #0b0618 0%, #030609 40%, #020408 100%);
}

/* Subtle edge embers — perimeter only, center stays calm */
body.theme-halloween::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34vmax 24vmax at 3% 92%, rgba(255, 106, 0, 0.06), transparent 62%),
    radial-gradient(30vmax 22vmax at 98% 8%, rgba(125, 53, 255, 0.07), transparent 60%);
}

/* --------------------------------------------------------------------------
   1b. SECTION ENVIRONMENTS — the supplied Halloween artwork replaces the
   normal section backgrounds ONLY while the theme class is present.
   cover + fixed (desktop) keeps the scene as a full-bleed environment
   that content scrolls over; scroll + cover on mobile.
   -------------------------------------------------------------------------- */

/* Full-bleed environments — cover + fixed on desktop so the scene stays
   pinned while content scrolls over it. Each section carries its own
   supplied artwork, so the correct scene is always behind the correct
   section (backgrounds only paint within each element's box). */
body.theme-halloween #welcome,
body.theme-halloween #streamer {
  background-color: #05070f;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
body.theme-halloween #welcome {
  background-image: url('../img/halloween/halloween-hero-bg.webp');
}
body.theme-halloween #streamer {
  background-image: url('../img/halloween/halloween-streamers-bg.webp');
}

/* Fixed attachment is a desktop/fine-pointer effect only — mobile uses
   scroll positioning further down (mobile browsers handle fixed poorly) */
@media (min-width: 768px) {
  body.theme-halloween #welcome,
  body.theme-halloween #streamer {
    background-attachment: fixed;
  }
}

/* Localized readability scrims — soft halo behind the hero text and a
   gentle darkening toward lower content. NO uniform black wash:
   the outer left/right scenery stays vivid. */
.theme-halloween #welcome::before {
  background:
    radial-gradient(56% 34% at 50% 16%, rgba(2, 5, 7, 0.55), transparent 72%),
    linear-gradient(180deg,
      rgba(4, 6, 13, 0.05) 0%,
      rgba(4, 6, 13, 0.2) 45%,
      rgba(4, 6, 13, 0.55) 100%);
}
.theme-halloween #streamer::before {
  background: linear-gradient(180deg,
      rgba(5, 7, 15, 0.15) 0%,
      rgba(4, 6, 13, 0.35) 55%,
      rgba(4, 6, 13, 0.65) 100%);
}

/* Fog transitions so the two environments blend instead of cutting hard */
.theme-halloween #welcome::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(20, 14, 44, 0.5) 55%, rgba(8, 11, 27, 0.9));
  pointer-events: none;
  z-index: 0;
}
.theme-halloween #streamer {
  position: relative;
}
.theme-halloween #streamer::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(8, 11, 27, 0.9), rgba(20, 14, 44, 0.45) 55%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   2. DECOR LAYER  (injected by theme-halloween.js — all aria-hidden)
   -------------------------------------------------------------------------- */

/* Foreground atmosphere scrim — sits above the sections' illustrated
   backgrounds (z-index:1) but below the HUD (1000) and modals (1055+).
   Only whisper-level elements belong here: fog and animated bats. */
.halloween-decor { display: none; } /* inert unless the theme class is present */
.theme-halloween .halloween-decor {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.halloween-decor.is-visible { opacity: 1; }

/* Fog banks — three independently drifting blurred gradients */
.hw-fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  will-change: transform;
}
.hw-fog-1 {
  width: 70vmax; height: 30vmax;
  left: -22vmax; bottom: 2%;
  background: radial-gradient(ellipse, rgba(125, 53, 255, 0.14), transparent 62%);
  animation: hwFogDrift 46s ease-in-out infinite alternate;
}
.hw-fog-2 {
  width: 58vmax; height: 26vmax;
  right: -18vmax; bottom: 14%;
  background: radial-gradient(ellipse, rgba(40, 244, 244, 0.09), transparent 60%);
  animation: hwFogDrift 62s ease-in-out infinite alternate-reverse;
}
.hw-fog-3 {
  width: 50vmax; height: 20vmax;
  left: 6vmax; top: 4%;
  background: radial-gradient(ellipse, rgba(255, 106, 0, 0.08), transparent 62%);
  animation: hwFogDrift 34s ease-in-out infinite alternate;
}
@keyframes hwFogDrift {
  from { transform: translate3d(-4vmax, 0, 0); }
  to   { transform: translate3d(6vmax, -1.5vmax, 0); }
}

/* Bats — small silhouettes that occasionally cross the upper sky */
.hw-bat {
  position: absolute;
  top: var(--bat-top, 8%);
  left: 0;
  width: var(--bat-size, 34px);
  opacity: 0;
  animation: hwBatFlight var(--bat-dur, 22s) linear infinite;
  animation-delay: var(--bat-delay, 0s);
}
.hw-bat svg { display: block; width: 100%; height: auto; }
.hw-bat svg path { fill: #0a0512; }
@keyframes hwBatFlight {
  0%        { transform: translate3d(-8vw, 0, 0) scale(1);        opacity: 0; }
  4%        { opacity: 0.85; }
  25%       { transform: translate3d(24vw, -1.6vh, 0) scale(1); }
  50%       { transform: translate3d(52vw, 1.2vh, 0) scale(0.94); }
  75%       { transform: translate3d(78vw, -1vh, 0) scale(1); }
  96%       { opacity: 0.85; }
  100%      { transform: translate3d(112vw, 0.6vh, 0) scale(1);   opacity: 0; }
}
.hw-bat.hw-bat-reverse { animation-name: hwBatFlightR; }
@keyframes hwBatFlightR {
  0%        { transform: translate3d(108vw, 0, 0) scaleX(-1);    opacity: 0; }
  4%        { opacity: 0.8; }
  30%       { transform: translate3d(70vw, -1.4vh, 0) scaleX(-1); }
  60%       { transform: translate3d(38vw, 1vh, 0) scaleX(-1) scale(0.92); }
  96%       { opacity: 0.8; }
  100%      { transform: translate3d(-8vw, -0.6vh, 0) scaleX(-1); opacity: 0; }
}
/* One-shot bat used by the logo easter egg */
.hw-bat.hw-bat-once { animation: hwBatFlight 3.2s ease-in forwards; }

/* Pumpkins are part of the supplied scene artwork — no extra DOM props */

/* Lightning flash overlay (logo click easter egg) */
.hw-flash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  background: radial-gradient(80vmax 60vmax at 50% 0%, rgba(215, 190, 255, 0.55), rgba(125, 53, 255, 0.25) 60%, transparent);
  opacity: 0;
}
.hw-flash.hw-flash-on { animation: hwFlash 0.28s ease-out; }
@keyframes hwFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */

/* Hero — ember-orange display headline (matches the concept art) with a
   cyan under-glow so it still belongs to TIPS; subheading stays cyan */
.theme-halloween h1.welcome {
  background: linear-gradient(180deg, #ffd76a 0%, #ff9c24 45%, #ff6a00 80%, #c33d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 14px rgba(255, 156, 36, 0.45))
    drop-shadow(0 0 34px rgba(125, 53, 255, 0.3))
    drop-shadow(0 2px 0 rgba(2, 5, 7, 0.9));
  animation: hwHeadlineGlow 6.5s ease-in-out infinite;
}
@keyframes hwHeadlineGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255,156,36,0.45)) drop-shadow(0 0 34px rgba(125,53,255,0.3)) drop-shadow(0 2px 0 rgba(2,5,7,0.9)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,156,36,0.6)) drop-shadow(0 0 46px rgba(125,53,255,0.4)) drop-shadow(0 2px 0 rgba(2,5,7,0.9)); }
}
.theme-halloween p.welcome {
  color: #a5f4f4;
  text-shadow: 0 0 14px rgba(40, 244, 244, 0.45);
}
.theme-halloween h2.welcome {
  text-shadow: 0 0 12px rgba(40, 244, 244, 0.35), 0 0 36px rgba(125, 53, 255, 0.3);
}

/* --------------------------------------------------------------------------
   4. HUD PANELS — logo, nav, site stats, streamers
   -------------------------------------------------------------------------- */

/* Corner spiderwebs (data-URI SVG, very low contrast).
   No backdrop-filter here: blurring the bright scene behind the nav plate
   milks out the panel — keep it solid. */
.theme-halloween .hud-top-right .hud-frame {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2328f4f4' stroke-opacity='0.28' stroke-width='1.1'><path d='M100 0 L8 100'/><path d='M100 0 L38 100'/><path d='M100 0 L68 100'/><path d='M100 0 L100 34'/><path d='M100 0 L100 62'/><path d='M82 0 A 20 20 0 0 1 100 18'/><path d='M62 0 A 42 42 0 0 1 100 40'/><path d='M42 0 A 64 64 0 0 1 100 62'/><path d='M20 0 A 88 88 0 0 1 100 84'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 54px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Nav panel sits above everything else inside the HUD stack (still below
   Bootstrap modals — .game-hud's z-1000 stacking context caps it) */
.theme-halloween .hud-top-right { z-index: 1100; }
.theme-halloween .hud-bottom-left .hud-frame {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2328f4f4' stroke-opacity='0.26' stroke-width='1.1' transform='translate(100 0) scale(-1 1)'><path d='M100 0 L8 100'/><path d='M100 0 L38 100'/><path d='M100 0 L68 100'/><path d='M100 0 L100 34'/><path d='M100 0 L100 62'/><path d='M82 0 A 20 20 0 0 1 100 18'/><path d='M62 0 A 42 42 0 0 1 100 40'/><path d='M42 0 A 64 64 0 0 1 100 62'/><path d='M20 0 A 88 88 0 0 1 100 84'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 54px;
}
.theme-halloween .hud-bottom-right .hud-frame {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2328f4f4' stroke-opacity='0.26' stroke-width='1.1'><path d='M100 0 L8 100'/><path d='M100 0 L38 100'/><path d='M100 0 L68 100'/><path d='M100 0 L100 34'/><path d='M100 0 L100 62'/><path d='M82 0 A 20 20 0 0 1 100 18'/><path d='M62 0 A 42 42 0 0 1 100 40'/><path d='M42 0 A 64 64 0 0 1 100 62'/><path d='M20 0 A 88 88 0 0 1 100 84'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 54px;
}

/* Logo — lit neon sign: brightness lift + cyan halo + purple/orange spill */
.theme-halloween .hud-top-left .logo img {
  filter:
    brightness(1.15)
    drop-shadow(0 0 10px rgba(40, 244, 244, 0.9))
    drop-shadow(0 0 28px rgba(125, 53, 255, 0.6))
    drop-shadow(0 0 4px rgba(255, 106, 0, 0.55));
}
.theme-halloween .hud-top-left .hud-frame {
  background: rgba(2, 5, 9, 0.92);
  border-color: rgba(125, 53, 255, 0.5);
  box-shadow: 0 0 24px rgba(125, 53, 255, 0.32), inset 0 0 24px rgba(40, 244, 244, 0.07);
}

/* Navigation — opaque glass plate, bright cyan labels with their own glow,
   unmistakable active state, orange only on hover */
.theme-halloween .hud-top-right .hud-frame {
  background: rgba(2, 5, 9, 0.97);
  border-color: rgba(41, 245, 245, 0.6);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.7), 0 0 30px rgba(125, 53, 255, 0.3), 0 0 10px rgba(41, 245, 245, 0.25);
}
.theme-halloween .hud-nav-item a {
  background: rgba(4, 9, 14, 0.92);
  border-color: rgba(41, 245, 245, 0.65);
  color: #6ff;
  text-shadow: 0 0 8px rgba(41, 245, 245, 0.75);
}
.theme-halloween .hud-nav-item a:hover {
  border-color: rgba(255, 106, 0, 0.85);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.5), 0 0 24px rgba(125, 53, 255, 0.3);
  color: #ffd9b0;
  text-shadow: 0 0 8px rgba(255, 140, 30, 0.7);
}
.theme-halloween .hud-nav-item.active a {
  background: rgba(41, 245, 245, 0.2);
  border-color: rgba(41, 245, 245, 0.95);
  color: #fff;
  text-shadow: 0 0 10px rgba(41, 245, 245, 0.9);
  box-shadow: 0 0 20px rgba(41, 245, 245, 0.6), 0 0 34px rgba(125, 53, 255, 0.35);
}

/* Site stats + streamers panels — faint purple ambience */
.theme-halloween .hud-bottom-left .hud-frame,
.theme-halloween .hud-bottom-right .hud-frame {
  border-color: rgba(40, 244, 244, 0.35);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(125, 53, 255, 0.06);
}
.theme-halloween .radar-mini-sweep {
  background: conic-gradient(from 0deg, rgba(40, 244, 244, 0.5), rgba(255, 106, 0, 0.15) 70deg, transparent 90deg) !important;
}
.theme-halloween .hud-status-indicator {
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.7);
}

/* --------------------------------------------------------------------------
   5. FILTER TOOLBAR
   -------------------------------------------------------------------------- */

.theme-halloween .filter-section .card {
  background: linear-gradient(160deg, rgba(10, 12, 26, 0.72), rgba(3, 6, 9, 0.8));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(40, 244, 244, 0.32);
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 106, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.theme-halloween .filter-btn:hover,
.theme-halloween .streamer-filter-btn:hover {
  border-color: rgba(255, 106, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.3);
}

/* --------------------------------------------------------------------------
   6. TOURNAMENT CARDS  (presentation only — scoped to #tournamentsContainer
   so Twitch streamer cards, which share .streamer-card, are NOT affected)
   -------------------------------------------------------------------------- */

.theme-halloween #tournamentsContainer .streamer-card {
  background: linear-gradient(160deg, rgba(6, 10, 20, 0.9), rgba(2, 7, 10, 0.93));
  border: 1px solid rgba(40, 244, 244, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(125, 53, 255, 0.12), 0 0 8px rgba(255, 106, 0, 0.06);
}
.theme-halloween #tournamentsContainer .streamer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(40, 244, 244, 0.55);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(40, 244, 244, 0.22),
    0 0 36px rgba(255, 106, 0, 0.12);
}
.theme-halloween #tournamentsContainer .streamer-thumb-container img {
  transition: transform 0.35s ease;
}
.theme-halloween #tournamentsContainer .streamer-card:hover .streamer-thumb-container img {
  transform: scale(1.03);
}
.theme-halloween #tournamentsContainer .tournament-thumb {
  position: relative;
}
.theme-halloween #tournamentsContainer .tournament-thumb::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(16, 7, 31, 0.55), transparent);
  pointer-events: none;
}

/* Cobweb on roughly 1-in-3 cards so the grid doesn't look cloned */
.theme-halloween #tournamentsContainer .streamer-card-container:nth-child(3n+1) .streamer-card {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2328f4f4' stroke-opacity='0.15' stroke-width='1'><path d='M100 0 L8 100'/><path d='M100 0 L38 100'/><path d='M100 0 L68 100'/><path d='M100 0 L100 34'/><path d='M100 0 L100 62'/><path d='M82 0 A 20 20 0 0 1 100 18'/><path d='M62 0 A 42 42 0 0 1 100 40'/><path d='M42 0 A 64 64 0 0 1 100 62'/><path d='M20 0 A 88 88 0 0 1 100 84'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 58px;
}

/* --------------------------------------------------------------------------
   7. COUNTDOWN BADGES
   -------------------------------------------------------------------------- */

/* Upcoming — keep cyan, slight breathing glow */
.theme-halloween #tournamentsContainer .status-badge:not(.live) {
  box-shadow: 0 0 10px rgba(40, 244, 244, 0.35);
}
/* Urgent — orange/red ember badge with a slow pulse */
.theme-halloween #tournamentsContainer .status-badge.live {
  background: rgba(255, 69, 0, 0.18) !important;
  border-color: rgba(255, 106, 0, 0.65) !important;
  color: #ffb37a !important;
  animation: hwBadgePulse 2.6s ease-in-out infinite;
}
@keyframes hwBadgePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 69, 0, 0.35); }
  50%      { box-shadow: 0 0 18px rgba(255, 106, 0, 0.65); }
}

/* --------------------------------------------------------------------------
   8. DIVIDERS / MISC
   -------------------------------------------------------------------------- */

.theme-halloween .hr.anim {
  filter: drop-shadow(0 0 6px rgba(125, 53, 255, 0.5));
}

/* Deepen the sections' existing scrim — keeps the artwork haunting the
   edges while the center behind the tournament grid stays calm/dark */
.theme-halloween #welcome::before,
.theme-halloween #streamer::before {
  background:
    radial-gradient(110% 70% at 50% 18%, rgba(125, 53, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(3, 6, 9, 0.55) 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.8) 100%);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE — strip atmosphere before readability suffers
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .hw-bat:nth-of-type(n+4) { display: none; }
  .hw-fog-3 { display: none; }
  .hw-fog { filter: blur(26px); }
}
@media (max-width: 767.98px) {
  /* Mobile: scroll-attached cover (no fixed attachment — unreliable on
     mobile), centered on the moon/castle zone, decor thinned out */
  body.theme-halloween #welcome,
  body.theme-halloween #streamer {
    background-attachment: scroll;
    background-size: cover;
    background-position: center top;
  }
  .hw-bat { display: none; }
  .hw-fog-2, .hw-fog-3 { display: none; }
  .hw-fog-1 { filter: blur(20px); opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION — atmosphere stays, movement stops
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hw-bat { display: none; }
  .hw-flash { display: none; }
  .hw-fog,
  .theme-halloween h1.welcome,
  .theme-halloween #tournamentsContainer .status-badge.live {
    animation: none !important;
  }
  .halloween-decor { transition: none; }
  .theme-halloween #tournamentsContainer .streamer-card,
  .theme-halloween #tournamentsContainer .streamer-thumb-container img {
    transition: none;
  }
  .theme-halloween #tournamentsContainer .streamer-card:hover { transform: none; }
}