/* Arcade Express — Halloween theme (public/js/themes/halloween.js; theme.js sets <html data-theme="halloween">).
   Recolours the site (home, lobby, HUD, panels, results) and styles the decoration layers. The games keep the neon
   palette: .game-host declares it again (style.css), and the stage is opaque so no decoration shows through it. */

:root[data-theme="halloween"] {
  --bg: #0d0716;
  --bg-2: #160b24;
  --surface: rgba(36, 18, 54, 0.74);
  --surface-solid: #221335;
  --surface-2: rgba(255, 236, 255, 0.05);
  --input-bg: #130a20;
  --border: rgba(200, 130, 255, 0.17);
  --border-strong: rgba(255, 160, 80, 0.36);
  --grid: rgba(180, 90, 255, 0.07);

  --text: #f7effe;
  --muted: #b6a4cc;
  --faint: #9886b0;   /* ≥ 4.5:1 (WCAG AA) on --bg, cards and overlays */

  --accent: #ff8a1f;      /* pumpkin orange */
  --accent-2: #b44dff;    /* poison violet */
  --accent-3: #a8ff3e;    /* slime green */
  --success: #3dff9a;
  --danger: #ff4060;
  --warning: #ffb84d;

  --accent-soft: rgba(255, 138, 31, 0.13);
  --magenta-soft: rgba(180, 77, 255, 0.16);
  --accent-end: #ff4a2a;
  --on-accent: #1d0900;
  --glow-mid: #e0397a;

  --spooky-font: 'Creepster', var(--font-display);
}

:root[data-theme="halloween"] body {
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(150, 50, 255, 0.30), transparent 60%),
    radial-gradient(900px 560px at 108% 8%, rgba(255, 130, 30, 0.13), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(120, 255, 60, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- Site components (never used inside the games) ---------- */

:root[data-theme="halloween"] .title-display {
  font-family: var(--spooky-font);
  font-size: clamp(48px, 11vw, 96px);
  letter-spacing: .04em;
  background: linear-gradient(180deg, #ffd9a0 10%, var(--accent) 45%, #ff4a2a 75%, #b02a6a);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(255, 120, 30, .45));
}
:root[data-theme="halloween"] .logo-badge {
  background: linear-gradient(135deg, #3a1660, #6a24a8 55%, var(--accent-2));
  box-shadow: 0 14px 40px -12px var(--accent), 0 0 0 1px rgba(255, 160, 80, .3) inset;
  font-size: 46px;
}

:root[data-theme="halloween"] .room-code { text-shadow: 0 0 22px rgba(168, 255, 62, .45); }

:root[data-theme="halloween"] .player-row.me,
:root[data-theme="halloween"] .score-row.me,
:root[data-theme="halloween"] .final-ranking li.me { box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .4); }
:root[data-theme="halloween"] .game-card.selected {
  background: linear-gradient(160deg, rgba(255, 138, 31, .18), rgba(180, 77, 255, .12));
}
:root[data-theme="halloween"] .toggle.on .toggle-track { box-shadow: 0 0 14px rgba(255, 138, 31, .55); }
:root[data-theme="halloween"] .preset-btn.on { box-shadow: 0 0 14px rgba(255, 138, 31, .5); }
:root[data-theme="halloween"] .chat-msg.mine .chat-text { color: #ffe3c4; }

:root[data-theme="halloween"] .hud { background: rgba(22, 10, 34, .86); }
:root[data-theme="halloween"] .hud-timer { text-shadow: 0 0 18px rgba(255, 138, 31, .55); }
/* The game board itself: the neon look of style.css, made opaque so the decorations stay out of it. */
:root[data-theme="halloween"] .stage {
  background: radial-gradient(ellipse at 50% 30%, rgba(60, 80, 200, .18), transparent 70%), #050818;
}

:root[data-theme="halloween"] .overlay-card,
:root[data-theme="halloween"] .countdown-card { background: rgba(34, 16, 52, .92); }
:root[data-theme="halloween"] .overlay-card,
:root[data-theme="halloween"] .confirm-card { box-shadow: var(--shadow), 0 0 60px -18px rgba(255, 120, 30, .55); }
:root[data-theme="halloween"] .overlay-roundEnd { background: rgba(13, 7, 22, .86); }
:root[data-theme="halloween"] .overlay-matchEnd { background: rgba(13, 7, 22, .95); }
:root[data-theme="halloween"] .confirm-dialog::backdrop { background: rgba(13, 7, 22, .8); }
:root[data-theme="halloween"] .countdown-number {
  text-shadow: 0 0 30px rgba(168, 255, 62, .6), 0 0 80px rgba(180, 77, 255, .4);
}
:root[data-theme="halloween"] .overlay-matchEnd .overlay-title {
  font-family: var(--spooky-font);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: .05em;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 120, 30, .5);
}

/* A jack-o'-lantern on each podium step. */
:root[data-theme="halloween"] .podium-deco { animation: hw-flicker 2.6s ease-in-out infinite; }

/* ---------- Decorations (theme.js layers) ---------- */

.hw-moon {
  position: absolute;
  top: 7vh;
  right: 10vw;
  width: clamp(70px, 9vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 38%, rgba(190, 120, 60, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 62%, rgba(190, 120, 60, .3) 0 13%, transparent 14%),
    radial-gradient(circle at 70% 70%, rgba(190, 120, 60, .25) 0 6%, transparent 7%),
    radial-gradient(circle at 35% 32%, #fff6dc, #ffd88e 45%, #f2a24a 80%);
  box-shadow: 0 0 40px rgba(255, 200, 110, .45), 0 0 140px rgba(255, 150, 60, .28);
  opacity: .9;
}

.hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; }
.hw-fog span {
  position: absolute;
  bottom: -10vh;
  left: -30vw;
  width: 160vw;
  height: 100%;
  background:
    radial-gradient(40% 50% at 25% 70%, rgba(200, 170, 255, .14), transparent 70%),
    radial-gradient(35% 45% at 70% 80%, rgba(170, 255, 200, .08), transparent 70%),
    radial-gradient(30% 40% at 50% 60%, rgba(200, 170, 255, .1), transparent 70%);
  filter: blur(8px);
  animation: hw-drift 38s ease-in-out infinite alternate;
}
.hw-fog span + span { bottom: -16vh; animation-duration: 52s; animation-direction: alternate-reverse; opacity: .8; }

.hw-ghost { position: absolute; opacity: .5; animation: hw-float 7s ease-in-out infinite; }
.hw-ghost-a { left: 3vw; bottom: 26vh; font-size: clamp(46px, 6vw, 84px); }
.hw-ghost-b { right: 4vw; top: 40vh; font-size: clamp(36px, 4.4vw, 62px); animation-delay: -3.5s; animation-duration: 8.5s; opacity: .4; }

/* Corner scenes (theme.js, VIGNETTES): props standing on the bottom edge. */
.hw-corner {
  position: absolute;
  bottom: 1vh;
  display: flex;
  align-items: flex-end;
  gap: .1em;
  font-size: clamp(52px, 7vw, 96px);
}
.hw-corner-left { left: 2vw; }
.hw-corner-right { right: 3vw; flex-direction: row-reverse; }
.hw-prop { position: relative; display: block; }
.hw-small { font-size: .7em; }
.hw-pumpkin { animation: hw-flicker 3.4s ease-in-out infinite; }
.hw-pumpkin.hw-small { animation-delay: -1.7s; }
.hw-tomb { opacity: .85; }
.hw-cat { font-size: .75em; margin-bottom: .05em; }
.hw-cat .icon { animation: hw-blink 6s steps(1) infinite; }
.hw-skull { font-size: .42em; transform: rotate(-14deg); }
.hw-cauldron { font-size: .9em; }
.hw-bubble {
  position: absolute;
  bottom: 52%;
  left: 40%;
  width: .1em;
  height: .1em;
  border-radius: 50%;
  border: 2px solid rgba(168, 255, 62, .8);
  box-shadow: 0 0 8px rgba(168, 255, 62, .6);
  opacity: 0;
  animation: hw-bubble 2.4s ease-out infinite;
}
.hw-bubble:nth-of-type(2) { left: 55%; animation-delay: .8s; width: .14em; height: .14em; }
.hw-bubble:nth-of-type(3) { left: 30%; animation-delay: 1.6s; }

.hw-web { position: absolute; top: 0; font-size: clamp(90px, 13vw, 170px); line-height: 0; opacity: .5; }
.hw-web-left { left: 0; }
.hw-web-right { right: 0; transform: scaleX(-1); }

.hw-spider {
  position: absolute;
  top: 0;
  left: clamp(54px, 7.6vw, 100px);
  font-size: 30px;
  animation: hw-dangle 19s ease-in-out infinite;
}
.hw-thread {
  position: absolute;
  bottom: 62%;
  left: 50%;
  width: 1px;
  height: 100vh;
  background: linear-gradient(transparent, rgba(214, 204, 255, .65));
}
.hw-spider .icon { animation: hw-swing 3.2s ease-in-out infinite; transform-origin: 50% -40%; }

.hw-bat-wings { display: block; animation: hw-flap .2s ease-in-out infinite alternate; }
.hw-witch-ride { display: block; animation: hw-bob 1.6s ease-in-out infinite; }
.hw-witch.rtl .hw-witch-ride .icon { transform: scaleX(-1); }

/* The skeleton rises from the bottom edge, dances, and goes back down. */
.hw-skeleton {
  position: absolute;
  left: var(--x);
  bottom: 0;
  font-size: clamp(110px, 14vw, 180px);
  opacity: .8;
  transform: translateY(100%);
  animation: hw-peek 8s ease-in-out both;
}
.hw-skeleton-dance { display: block; transform-origin: 50% 100%; animation: hw-dance .5s ease-in-out infinite alternate; }

/* Game view: small webs over the HUD corners only, no spider coming down over the game. */
body:has(.game-view) .hw-web { font-size: clamp(60px, 6vw, 92px); opacity: .4; }
body:has(.game-view) .hw-spider { display: none; }
@media (max-width: 760px) {
  .hw-web { font-size: 84px; }
  .hw-moon { width: 64px; top: 12px; right: 96px; }
  .hw-ghost-b { display: none; }
}

/* Ghosts rising through the final results (theme.js, resultsBurst). */
:root[data-theme="halloween"] .theme-burst-item {
  bottom: -100px;
  animation: hw-rise 3.8s cubic-bezier(.3, .6, .4, 1) var(--delay) forwards;
}

@keyframes hw-float {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(12px, -18px) rotate(4deg); }
}
@keyframes hw-flicker {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 170, 40, .6)); }
  45% { filter: brightness(.85); }
  55% { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 170, 40, .5)); }
}
@keyframes hw-drift { to { transform: translateX(22vw); } }
@keyframes hw-dangle {
  0%, 100% { transform: translateY(28px); }
  35%, 55% { transform: translateY(min(36vh, 300px)); }
}
@keyframes hw-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes hw-flap { to { transform: scaleY(.4); } }
@keyframes hw-blink { 0%, 96% { opacity: 1; } 97%, 100% { opacity: .55; } }
@keyframes hw-bubble {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-1.1em) scale(1.3); opacity: 0; }
}
@keyframes hw-bob { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes hw-peek {
  0% { transform: translateY(100%); }
  18%, 78% { transform: translateY(14%); }
  100% { transform: translateY(100%); }
}
@keyframes hw-dance {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg) translateY(-4px); }
}
@keyframes hw-rise {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  15% { opacity: .85; }
  70% { opacity: .75; }
  100% { transform: translate(var(--sway), -105vh) scale(1.1); opacity: 0; }
}