/* ==========================================================================
   Evento di Halloween: attivo con data-event="halloween" su <html> (js/main.js,
   date in HALLOWEEN di js/config.js). Fuori dall'evento queste regole non fanno nulla.
   Accento arancio zucca al posto di ciano/viola, notte viola, pipistrelli e zucche.
   ========================================================================== */

:root {
  --pumpkin-300: #ffb066;
  --pumpkin-400: #f28c28;
  --pumpkin-600: #b85a0e;
  --pumpkin-950: #2a1200;
  --night-950: #0d0a14;
  --night-900: #130f1d;
  --night-850: #191426;
  --stem: #4f7a2a;

  /* Adesivi di Halloween (stessi disegni dei simboli della slot) */
  --hw-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23eef1fb' stroke='%236b7390' stroke-width='1.5' d='M14 56V28c0-12 8-20 18-20s18 8 18 20v28l-6-5-6 5-6-5-6 5-6-5z'/%3E%3Cg fill='%231b1430'%3E%3Cellipse cx='25' cy='28' rx='3.5' ry='5'/%3E%3Cellipse cx='39' cy='28' rx='3.5' ry='5'/%3E%3Cellipse cx='32' cy='40' rx='4' ry='5'/%3E%3C/g%3E%3C/svg%3E");
  --hw-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%234f7a2a' d='M30 14c0-4 2-8 6-10l3 3c-3 2-4 4-4 7z'/%3E%3Cg fill='%23f28c28' stroke='%23b85a0e' stroke-width='1.5'%3E%3Cellipse cx='20' cy='36' rx='14' ry='20'/%3E%3Cellipse cx='44' cy='36' rx='14' ry='20'/%3E%3Cellipse cx='32' cy='36' rx='13' ry='21'/%3E%3C/g%3E%3Cpath fill='%232a1200' d='M19 30l6-6 4 8zM45 30l-6-6-4 8zM17 40c4 8 26 8 30 0l-4 2-3-3-3 4-3-4-3 4-3-4-3 3z'/%3E%3C/svg%3E");
  --hw-skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23efe6cf' stroke='%236e6352' stroke-width='1.5' d='M32 6C18 6 10 16 10 28c0 8 4 13 8 16v8c0 3 2 5 5 5h18c3 0 5-2 5-5v-8c4-3 8-8 8-16C54 16 46 6 32 6z'/%3E%3Cg fill='%231b1430'%3E%3Cellipse cx='23' cy='29' rx='6' ry='7'/%3E%3Cellipse cx='41' cy='29' rx='6' ry='7'/%3E%3Cpath d='M32 36l-4 7h8z'/%3E%3C/g%3E%3Cpath stroke='%236e6352' stroke-width='2' d='M26 50v6M32 50v6M38 50v6'/%3E%3C/svg%3E");
  --hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23241a3a' stroke='%23a58cf5' stroke-width='1' d='M32 24c-3-6-8-8-8-8l2 8c-8-6-20-6-24 2 6-1 10 2 10 6 4-3 8-2 10 2 2-3 6-4 10-2 4-2 8-1 10 2 2-4 6-5 10-2 0-4 4-7 10-6-4-8-16-8-24-2l2-8s-5 2-8 8z'/%3E%3Ccircle cx='29' cy='29' r='1.8' fill='%23f28c28'/%3E%3Ccircle cx='35' cy='29' r='1.8' fill='%23f28c28'/%3E%3C/svg%3E");
}

/* html[...] pesa più di [data-theme="purple"]: l'evento vale con entrambi i temi */
html[data-event="halloween"] {
  --bg-0: var(--night-950);
  --bg-1: var(--night-900);
  --bg-2: var(--night-850);
  --accent: var(--pumpkin-400);
  --accent-rgb: 242, 140, 40;
  --accent-2: var(--pumpkin-600);
  --accent-2-rgb: 184, 90, 14;
  --on-accent: var(--pumpkin-950);
}

/* Pipistrelli sullo sfondo, fermi se l'utente preferisce meno animazioni */
html[data-event="halloween"] body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 320px;
  z-index: -1;                       /* dietro a tutto il contenuto, sopra lo sfondo */
  pointer-events: none;
  opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cg fill='%23a58cf5'%3E%3Cpath transform='translate(60 40) scale(.5)' d='M32 24c-3-6-8-8-8-8l2 8c-8-6-20-6-24 2 6-1 10 2 10 6 4-3 8-2 10 2 2-3 6-4 10-2 4-2 8-1 10 2 2-4 6-5 10-2 0-4 4-7 10-6-4-8-16-8-24-2l2-8s-5 2-8 8z'/%3E%3Cpath transform='translate(330 90) scale(.4)' d='M32 24c-3-6-8-8-8-8l2 8c-8-6-20-6-24 2 6-1 10 2 10 6 4-3 8-2 10 2 2-3 6-4 10-2 4-2 8-1 10 2 2-4 6-5 10-2 0-4 4-7 10-6-4-8-16-8-24-2l2-8s-5 2-8 8z'/%3E%3Cpath transform='translate(500 20) scale(.6)' d='M32 24c-3-6-8-8-8-8l2 8c-8-6-20-6-24 2 6-1 10 2 10 6 4-3 8-2 10 2 2-3 6-4 10-2 4-2 8-1 10 2 2-4 6-5 10-2 0-4 4-7 10-6-4-8-16-8-24-2l2-8s-5 2-8 8z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 200px repeat-x;
  animation: hw-bats 60s linear infinite;
}
@keyframes hw-bats { to { background-position: 600px 0; } }

/* Marchio: il quadrato del "7" diventa una zucca con il picciolo */
html[data-event="halloween"] .brand__mark {
  position: relative;
  border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 35% 30%, var(--pumpkin-300), var(--pumpkin-400) 55%, var(--pumpkin-600));
  color: var(--pumpkin-950);
}
html[data-event="halloween"] .brand__mark::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 4px;
  height: 7px;
  border-radius: 2px;
  background: var(--stem);
  transform: translateX(-50%) rotate(12deg);
}

/* --- Banner dell'evento nella lobby (js/ui/lobby.js) -------------------------- */
.event-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
  padding: var(--space-6) var(--space-8);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(360px 220px at 80% 30%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, var(--night-850), var(--night-950));
  box-shadow: var(--panel-shadow);
}
.event-banner__pill {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 4px 12px;
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: var(--radius-full);
  background: rgba(var(--accent-rgb), .1);
  color: var(--pumpkin-300);
  font-size: var(--text-xs);
  font-weight: 600;
}
.event-banner__title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); letter-spacing: -.02em; color: var(--pumpkin-300); }
.event-banner__lead { margin: 0; max-width: 52ch; color: var(--ink-300); }
.event-banner__lead b { color: var(--text); }
.event-banner__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.ev-art { width: 100%; max-width: 280px; height: auto; justify-self: center; }
.ev-art__moon { fill: #e9e4f7; opacity: .9; }
.ev-art__pumpkin { fill: var(--pumpkin-400); stroke: var(--pumpkin-600); stroke-width: 1.5; }
.ev-art__stem { fill: var(--stem); }
.ev-art__face { fill: #ffcf5a; }
.ev-art__bat { fill: #4a3a72; }
.ev-art__bat--0 { animation: hw-flap 3.2s ease-in-out infinite; }
.ev-art__bat--1 { animation: hw-flap 2.6s ease-in-out -1s infinite; }
.ev-art__bat--2 { animation: hw-flap 3.8s ease-in-out -2s infinite; }
.ev-art__ghost { fill: #eef1fb; opacity: .9; animation: hw-flap 4.5s ease-in-out -1.5s infinite; }
.ev-art__eye { fill: #1b1430; }
.ev-art__bone { fill: none; stroke: #efe6cf; stroke-width: 3; stroke-linecap: round; }
.ev-art__skull { fill: #efe6cf; }
@keyframes hw-flap { 50% { translate: 0 -6px; } }

/* Fantasmino che fluttua nell'angolo in basso a sinistra */
html[data-event="halloween"] body::after {
  content: "";
  position: fixed;
  left: 18px;
  bottom: calc(18px + var(--safe-bottom, 0px));
  width: 46px;
  height: 46px;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background: var(--hw-ghost) center / contain no-repeat;
  animation: hw-float 6s ease-in-out infinite;
}
@keyframes hw-float { 50% { translate: 0 -12px; rotate: 6deg; } }

/* Fila di zucche, teschi e fantasmini sopra il footer */
html[data-event="halloween"] .site-footer::before {
  content: "";
  display: block;
  max-width: 280px;
  height: 30px;
  margin: 0 auto 6px;
  background-image: var(--hw-pumpkin), var(--hw-skull), var(--hw-ghost), var(--hw-pumpkin), var(--hw-bat), var(--hw-skull), var(--hw-pumpkin);
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: 0% 100%, 16.6% 100%, 33.3% 100%, 50% 100%, 66.6% 0%, 83.3% 100%, 100% 100%;
  opacity: .75;
}

/* --- Copertine dei giochi nei colori di Halloween ---------------------------- */
html[data-event="halloween"] [data-game="slots"]      { --cover: #b8561a; }
html[data-event="halloween"] [data-game="blackjack"]  { --cover: #3f6b1f; }
html[data-event="halloween"] [data-game="roulette"]   { --cover: #7d1f2a; }
html[data-event="halloween"] [data-game="videopoker"] { --cover: #5b2d86; }
html[data-event="halloween"] [data-game="baccarat"]   { --cover: #2a2f5e; }
html[data-event="halloween"] [data-game="craps"]      { --cover: #a8451a; }
html[data-event="halloween"] [data-game="hilo-tower"] { --cover: #4a2470; }
html[data-event="halloween"] [data-game="neon-heist"] { --cover: #2f5a1c; }
html[data-event="halloween"] [data-game="towers"]     { --cover: #8c2a1e; }
html[data-event="halloween"] [data-game="crash"]      { --cover: #c06418; }
html[data-event="halloween"] [data-game="plinko"]     { --cover: #3b2a6e; }
html[data-event="halloween"] [data-game="casebattle"] { --cover: #6b1d2e; }
html[data-event="halloween"] [data-game="upgrader"]   { --cover: #456b22; }
html[data-event="halloween"] [data-game="dice"]       { --cover: #9a4a14; }

/* Adesivo nell'angolo di ogni copertina: zucca, fantasma, teschio, pipistrello a turno */
html[data-event="halloween"] .game-card__cover::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  background: var(--hw-pumpkin) center / contain no-repeat;
  rotate: -8deg;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
html[data-event="halloween"] .game-grid li:nth-child(4n+2) .game-card__cover::after { background-image: var(--hw-ghost); rotate: 6deg; }
html[data-event="halloween"] .game-grid li:nth-child(4n+3) .game-card__cover::after { background-image: var(--hw-skull); }
html[data-event="halloween"] .game-grid li:nth-child(4n) .game-card__cover::after { background-image: var(--hw-bat); rotate: 0deg; width: 46px; }

/* Classifica dell'evento (js/ui/leaderboard.js) */
.lb__event { margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); border-color: rgba(var(--accent-rgb), .35); }
.lb__event .lb__title { color: var(--pumpkin-300); }

/* Slot "Notte delle Zucche": cornice arancio */
.machine--halloween .reels-frame {
  background:
    linear-gradient(180deg, var(--night-950), var(--night-900)) padding-box,
    linear-gradient(160deg, var(--pumpkin-300), var(--pumpkin-600) 45%, var(--pumpkin-400) 70%, var(--pumpkin-600)) border-box;
}

@media (max-width: 720px) {
  .event-banner { grid-template-columns: 1fr; padding: var(--space-5); }
  .ev-art { max-width: 200px; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-event="halloween"] body::before,
  html[data-event="halloween"] body::after,
  .ev-art__bat, .ev-art__ghost { animation: none; }
}