/* =========================================================
   HALLOWEEN 2026 — "La Nuit des Sortilèges"
   Chargé uniquement du 1er octobre au 1er novembre
   (voir halloween_loader.php). Aucun autre fichier CSS modifié.
   ========================================================= */

:root {
  --hw-orange:   #f97316;
  --hw-orange-2: #fb923c;
  --hw-ember:    #fbbf24;
  --hw-poison:   #a3e635;
  --hw-violet:   #a855f7;
  --hw-night:    #0a0e14;
}

/* ---------- 1. BANDEAU + COMPTE À REBOURS ---------- */
.hw-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 44px 14px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(249,115,22,.20), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(168,85,247,.24), transparent 60%),
    linear-gradient(180deg, #170f24, #0f0b18);
  border: 1px solid rgba(249,115,22,.30);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(168,85,247,.12);
  overflow: hidden;
}
.hw-banner .hw-web { width: 70px; height: 70px; opacity: .35; }

.hw-banner__pumpkin {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 10px rgba(249,115,22,.6));
  animation: hwBob 3.2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.hw-banner__pumpkin svg { width: 100%; height: 100%; display: block; }

.hw-banner__text { flex: 1; min-width: 0; position: relative; z-index: 2; }
.hw-banner__title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #fdba74, #f97316 40%, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hw-banner__sub { color: #cbd5e1; font-size: .86rem; margin-top: 2px; }

.hw-banner__count { display: flex; gap: 8px; position: relative; z-index: 2; }
.hw-banner__count[hidden] { display: none; }
.hw-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(10,14,20,.7);
  border: 1px solid rgba(168,85,247,.28);
}
.hw-cd b {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  line-height: 1.1;
  color: #fdba74;
  text-shadow: 0 0 8px rgba(249,115,22,.55);
  font-variant-numeric: tabular-nums;
}
.hw-cd small {
  font-size: .6rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hw-banner__fx {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(249,115,22,.4);
  background: rgba(249,115,22,.12);
  color: #fed7aa;
  font: 600 .78rem 'Inter', sans-serif;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.hw-banner__fx:hover { background: rgba(249,115,22,.22); }
.hw-banner__fx[aria-pressed="false"] {
  border-color: rgba(156,163,175,.35);
  background: rgba(31,41,55,.6);
  color: #9ca3af;
}
.hw-banner__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.hw-banner__close:hover { color: #fff; background: rgba(255,255,255,.06); }

@media (max-width: 760px) {
  .hw-banner { flex-wrap: wrap; padding: 12px 40px 12px 14px; gap: 10px 12px; }
  .hw-banner__pumpkin { width: 40px; height: 40px; flex-basis: 40px; }
  .hw-banner__text { flex-basis: calc(100% - 60px); }
  .hw-banner__count { width: 100%; }
  .hw-cd { flex: 1; min-width: 0; }
  .hw-banner__fx { width: 100%; }
}

/* ---------- 2. TOILES D'ARAIGNÉE + ARAIGNÉE ---------- */
.hw-web {
  position: absolute;
  width: 78px;
  height: 78px;
  pointer-events: none;
  z-index: 6;
  opacity: .5;
}
.hw-web svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hw-web--tl { top: 0; left: 0; }
.hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hw-web--br { bottom: 0; right: 0; transform: scale(-1, -1); }
.hw-web--fixed { position: fixed; }

.hw-spider {
  position: absolute;
  top: 26px;
  left: 30px;
  width: 0;
  height: 0;
  z-index: 7;
  pointer-events: none;
}
.hw-spider__thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(rgba(229,231,235,.15), rgba(229,231,235,.6));
  transition: height 1.6s cubic-bezier(.3,.7,.3,1);
}
.hw-spider__drop {
  position: absolute;
  left: -9px;
  top: -4px;
  width: 18px;
  height: 18px;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 1.6s cubic-bezier(.3,.7,.3,1);
}
.hw-spider__drop svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% -30px;
  animation: hwSway 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(168,85,247,.7));
}
.hw-spider.is-down .hw-spider__thread { height: 70px; }
.hw-spider.is-down .hw-spider__drop { transform: translateY(70px); }

/* ---------- 3. BRUME ---------- */
.hw-fog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent);
  mask-image: linear-gradient(to top, #000 15%, transparent);
}
.hw-fog__l {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  background:
    radial-gradient(30% 60% at 15% 95%, rgba(168,85,247,.20), transparent 70%),
    radial-gradient(25% 55% at 45% 100%, rgba(132,204,22,.09), transparent 70%),
    radial-gradient(30% 60% at 70% 95%, rgba(168,85,247,.17), transparent 70%),
    radial-gradient(25% 50% at 92% 100%, rgba(249,115,22,.07), transparent 70%);
  filter: blur(6px);
  animation: hwFog 40s linear infinite alternate;
}
.hw-fog__l--2 {
  opacity: .8;
  transform: scaleX(-1);
  animation: hwFog2 58s linear infinite alternate;
}
@media (max-width: 760px) { .hw-fog { height: 16vh; } }

/* ---------- 4. BRAISES / ÉCLATS DE GEMMES (canvas) ---------- */
.hw-embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 35;
}

/* ---------- 5. CHAUVES-SOURIS ---------- */
.hw-bat {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: var(--s, 36px);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(168,85,247,.6));
  will-change: transform;
}
.hw-bat svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 40%;
  animation: hwFlap .2s ease-in-out infinite alternate;
}

/* Mode "effets calmes" : on coupe l'ambiance animée */
html.hw-calm .hw-fog,
html.hw-calm .hw-embers,
html.hw-calm .hw-bat,
html.hw-calm .hw-spark { display: none !important; }

/* ---------- 6. LOGO + TITRES ---------- */
html.hw-on .logo {
  position: relative;
  background: linear-gradient(135deg, #fdba74 0%, #f97316 30%, #c084fc 68%, #facc15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: hwCandle 3.8s ease-in-out infinite;
}
.hw-hat {
  position: absolute;
  left: -16px;
  top: -17px;
  width: 30px;
  height: 30px;
  transform: rotate(-22deg);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.hw-hat svg { width: 100%; height: 100%; display: block; }

html.hw-on .main-content h1 {
  animation: hwTitle 5.5s ease-in-out infinite;
}
html.hw-calm .main-content h1 {
  animation: none;
  filter: drop-shadow(0 0 6px rgba(249,115,22,.35));
}

/* ---------- 7. CURSEUR BAGUETTE MAGIQUE ---------- */
@media (pointer: fine) {
  html.hw-on body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M9 9l19 19' stroke='%23120a1f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M9 9l19 19' stroke='%237c3aed' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M9 9l4 4' stroke='%23fde68a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M4 0.3l1.2 2.5 2.5 1.2-2.5 1.2L4 7.7 2.8 5.2 0.3 4l2.5-1.2z' fill='%23facc15' stroke='%23120a1f' stroke-width='.6'/%3E%3C/svg%3E") 4 4, auto;
  }
  html.hw-on a,
  html.hw-on button,
  html.hw-on [role="button"],
  html.hw-on label,
  html.hw-on select,
  html.hw-on summary,
  html.hw-on .inv2-slot,
  html.hw-on .roue-center-btn,
  html.hw-on .hw-spider__drop {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='5' cy='5' r='4.6' fill='%23f97316' fill-opacity='.35'/%3E%3Cpath d='M9 9l19 19' stroke='%23120a1f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M9 9l19 19' stroke='%23f97316' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M9 9l4 4' stroke='%23fde68a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M5 0l1.4 3.6L10 5 6.4 6.4 5 10 3.6 6.4 0 5l3.6-1.4z' fill='%23fde047' stroke='%23120a1f' stroke-width='.6'/%3E%3C/svg%3E") 5 5, pointer;
  }
  html.hw-on input,
  html.hw-on textarea,
  html.hw-on [contenteditable="true"] { cursor: text; }
}

/* Traînée d'étincelles derrière la baguette */
.hw-spark {
  position: fixed;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c, #facc15);
  box-shadow: 0 0 8px var(--c, #facc15);
  pointer-events: none;
  z-index: 99998;
  animation: hwSpark .75s ease-out forwards;
}

/* =========================================================
   DÉCO INTÉGRÉE À L'UNIVERS (inventaire, coffres, roue)
   ========================================================= */

/* Halo commun (potions, gemmes, coffres) */
.hw-aura {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 12px var(--hw-cg, rgba(249,115,22,.35)), inset 0 0 10px var(--hw-cg, rgba(249,115,22,.25));
  animation: hwAura 3.6s ease-in-out infinite;
}

/* --- Potions : bulles + fumée --- */
.hw-pfx {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.hw-bubble {
  position: absolute;
  left: -3px;
  top: 0;
  width: var(--bs, 6px);
  height: var(--bs, 6px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 18%, var(--hw-c) 65%);
  box-shadow: 0 0 6px var(--hw-c);
  opacity: 0;
  animation: hwBubble 2.6s ease-in infinite;
  animation-delay: var(--d, 0s);
}
.hw-smoke {
  position: absolute;
  left: -11px;
  top: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hw-c) 0%, transparent 70%);
  filter: blur(4px);
  opacity: 0;
  animation: hwSmoke 4.2s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* --- Gemmes : scintillements --- */
.hw-twinkle {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: hwTwinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hw-twinkle::before,
.hw-twinkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px #fde68a, 0 0 10px var(--hw-c, #f97316);
  transform: translate(-50%, -50%);
}
.hw-twinkle::before { width: 12px; height: 2px; }
.hw-twinkle::after  { width: 2px;  height: 12px; }

/* --- Cases vides : mini toile --- */
.hw-miniweb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 30px;
  height: 30px;
  opacity: .3;
  pointer-events: none;
}
.hw-miniweb.is-br { top: auto; left: auto; bottom: 1px; right: 1px; transform: scale(-1, -1); }
.hw-miniweb svg { width: 100%; height: 100%; display: block; }

/* --- Coffres hantés : fantôme qui sort du coffre --- */
.hw-ghost {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 22px;
  height: 27px;
  margin-left: -11px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(163,230,53,.75));
  animation: hwGhost 7s ease-in-out infinite;
  animation-delay: var(--d, 1.5s);
}
.hw-ghost svg { width: 100%; height: 100%; display: block; }
.inv2-slot-chest .hw-aura { --hw-cg: rgba(163,230,53,.32); }

.chest-modal-stage.hw-haunted {
  background:
    radial-gradient(circle, rgba(163,230,53,.14), rgba(168,85,247,.16) 45%, transparent 72%);
  animation: hwRattle 5s ease-in-out infinite;
}
.chest-modal-stage .hw-ghost {
  width: 38px;
  height: 46px;
  margin-left: -19px;
  top: 4%;
  animation-duration: 6s;
}
.chest-modal-stage .hw-web { width: 46px; height: 46px; opacity: .4; z-index: 0; }

/* --- Roue « maudite » --- */
html.hw-on .roue-pointer {
  border-top-color: var(--hw-orange);
  filter: drop-shadow(0 0 8px rgba(249,115,22,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
html.hw-on .roue-wheel {
  border-color: #2e1065;
  box-shadow:
    0 0 0 4px rgba(249,115,22,.35),
    0 0 34px rgba(249,115,22,.22),
    0 20px 40px rgba(0,0,0,.45),
    inset 0 0 30px rgba(0,0,0,.35);
}
html.hw-on .roue-center-btn {
  background: radial-gradient(circle at 35% 30%, #ffedd5, #fb923c 45%, #c2410c 85%, #7c2d12);
  border-color: #2e1065;
  color: #2a0f02;
  box-shadow: 0 0 18px rgba(249,115,22,.55), 0 6px 16px rgba(0,0,0,.5);
}
.hw-wheel-pumpkin {
  position: absolute;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  animation: hwLantern 2.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.hw-wheel-pumpkin svg { width: 100%; height: 100%; display: block; }
.roue-container .hw-web { width: 64px; height: 64px; opacity: .45; z-index: 1; }

.hw-wheel-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,230,53,.8), rgba(163,230,53,.25) 42%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -8%);
}
.hw-wheel-glow.is-on { animation: hwWin 2.4s ease-out; }

/* --- Clickers LeaderBoard (panneau droit) --- */
html.hw-on .leaderboard-card {
  border-color: rgba(249,115,22,.32);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(249,115,22,.11), transparent 60%),
    radial-gradient(100% 50% at 0% 100%, rgba(168,85,247,.13), transparent 60%),
    var(--bg-card);
  box-shadow: 0 8px 25px rgba(0,0,0,.4), 0 0 22px rgba(249,115,22,.10);
}
html.hw-on .leaderboard-header h2 {
  background: linear-gradient(to right, #fff7ed, #fb923c 55%, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hwTitle 5.5s ease-in-out infinite;
}
html.hw-on .leaderboard-countdown {
  background: rgba(163,230,53,.08);
  border-color: rgba(163,230,53,.30);
  color: #bef264;
}
html.hw-on .leaderboard-item { border-color: rgba(249,115,22,.14); }
html.hw-on .leaderboard-item:hover {
  background: rgba(249,115,22,.08);
  box-shadow: 0 0 14px rgba(249,115,22,.16);
}
html.hw-on .leaderboard-card .score { color: #fdba74; }
html.hw-on .leaderboard-item.rank-1 {
  border-color: rgba(249,115,22,.5);
  background: linear-gradient(90deg, rgba(249,115,22,.18), #0e131c 75%);
  animation: hwLbKing 3.2s ease-in-out infinite;
}
html.hw-on .leaderboard-item.rank-2 {
  border-color: rgba(192,132,252,.38);
  background: linear-gradient(90deg, rgba(168,85,247,.14), #0e131c 75%);
}
html.hw-on .leaderboard-item.rank-3 {
  border-color: rgba(163,230,53,.30);
  background: linear-gradient(90deg, rgba(163,230,53,.10), #0e131c 75%);
}
html.hw-on .leaderboard-item .player { position: relative; }

.hw-lb-hat {
  position: absolute;
  left: -11px;
  top: -17px;
  width: 28px;
  height: 28px;
  transform: rotate(-22deg);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.hw-lb-pumpkin {
  position: absolute;
  left: 23px;
  top: 19px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
  animation: hwLantern 2.8s ease-in-out infinite;
}
.hw-lb-hat svg, .hw-lb-pumpkin svg { width: 100%; height: 100%; display: block; }

/* Chauve-souris endormie, suspendue au bord de la carte */
.hw-lb-bat {
  position: absolute;
  top: 0;
  right: 70px;
  width: 28px;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 0;
  animation: hwSleepSwing 4s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(168,85,247,.6));
}
.hw-lb-bat svg { width: 100%; height: auto; display: block; margin-top: 3px; transform: rotate(180deg) scaleX(.8); }
.hw-lb-bat i {
  position: absolute;
  left: 22px;
  top: 2px;
  font: 700 9px 'Inter', sans-serif;
  font-style: normal;
  color: #c4b5fd;
  opacity: 0;
  animation: hwZzz 3s ease-in-out infinite;
}
.hw-lb-bat i:nth-child(3) { animation-delay: 1.5s; font-size: 7px; }
.leaderboard-card .hw-web { width: 58px; height: 58px; opacity: .3; }

@keyframes hwLbKing {
  0%,100% { box-shadow: 0 0 8px rgba(249,115,22,.18); }
  50%     { box-shadow: 0 0 18px rgba(249,115,22,.40); }
}
@keyframes hwSleepSwing {
  0%,100% { transform: rotate(-5deg); }
  50%     { transform: rotate(5deg); }
}
@keyframes hwZzz {
  0%   { opacity: 0; transform: translate(0, 4px) scale(.7); }
  30%  { opacity: .9; }
  100% { opacity: 0; transform: translate(8px, -10px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  html.hw-on .leaderboard-header h2, html.hw-on .leaderboard-item.rank-1,
  .hw-lb-pumpkin, .hw-lb-bat, .hw-lb-bat i { animation: none !important; }
}

/* --- Explosion (ouverture coffre / gain roue) --- */
.hw-burst {
  position: fixed;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  z-index: 100001;
  pointer-events: none;
}
.hw-burst svg { width: 100%; height: 100%; display: block; }
.hw-burst--bat { width: 34px; height: 17px; filter: drop-shadow(0 0 6px rgba(168,85,247,.7)); }
.hw-burst--bat svg { animation: hwFlap .16s ease-in-out infinite alternate; }
.hw-burst--pumpkin { filter: drop-shadow(0 0 8px rgba(249,115,22,.8)); }
.hw-burst--spark {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c, #facc15);
  box-shadow: 0 0 10px var(--c, #facc15);
}

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes hwBob    { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes hwSway   { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes hwFog    { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes hwFog2   { from { transform: scaleX(-1) translateX(-10%); } to { transform: scaleX(-1) translateX(10%); } }
@keyframes hwFlap   { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hwSpark  { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--dx,0), var(--dy,10px)) scale(.2); } }

@keyframes hwCandle {
  0%,100% { filter: drop-shadow(0 0 6px rgba(249,115,22,.55)); }
  7%      { filter: drop-shadow(0 0 3px rgba(249,115,22,.30)); }
  11%     { filter: drop-shadow(0 0 9px rgba(249,115,22,.70)); }
  40%     { filter: drop-shadow(0 0 6px rgba(168,85,247,.55)); }
  52%     { filter: drop-shadow(0 0 2px rgba(249,115,22,.25)); }
  57%     { filter: drop-shadow(0 0 10px rgba(249,115,22,.75)); }
  80%     { filter: drop-shadow(0 0 5px rgba(249,115,22,.45)); }
}
@keyframes hwTitle {
  0%,100% { filter: drop-shadow(0 0 4px rgba(249,115,22,.30)); }
  48%     { filter: drop-shadow(0 0 9px rgba(249,115,22,.55)); }
  52%     { filter: drop-shadow(0 0 2px rgba(249,115,22,.20)); }
  56%     { filter: drop-shadow(0 0 8px rgba(168,85,247,.50)); }
}
@keyframes hwAura {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}
@keyframes hwBubble {
  0%   { opacity: 0;   transform: translate(0, 8px) scale(.4); }
  15%  { opacity: .95; }
  70%  { opacity: .8; }
  100% { opacity: 0;   transform: translate(var(--bx, 4px), -26px) scale(1); }
}
@keyframes hwSmoke {
  0%   { opacity: 0;   transform: translateY(4px) scale(.5); }
  30%  { opacity: .45; }
  100% { opacity: 0;   transform: translateY(-30px) scale(1.9); }
}
@keyframes hwTwinkle {
  0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  75%           { opacity: 1; transform: scale(1)  rotate(45deg); }
}
@keyframes hwGhost {
  0%, 55% { opacity: 0;   transform: translateY(12px) scale(.5); }
  62%     { opacity: .95; transform: translateY(-14px) scale(1); }
  70%     { transform: translate(-3px, -20px) rotate(-8deg); }
  78%     { opacity: .95; transform: translate(3px, -22px) rotate(8deg); }
  88%     { opacity: .9;  transform: translateY(-16px) rotate(0deg); }
  100%    { opacity: 0;   transform: translateY(10px) scale(.5); }
}
@keyframes hwRattle {
  0%, 84%, 100% { transform: none; }
  86% { transform: rotate(-2.5deg); }
  88% { transform: rotate(2.5deg); }
  90% { transform: rotate(-2deg); }
  92% { transform: rotate(2deg); }
  94% { transform: rotate(-1deg); }
}
@keyframes hwLantern {
  0%,100% { filter: drop-shadow(0 0 5px rgba(249,115,22,.65)); }
  45%     { filter: drop-shadow(0 0 2px rgba(249,115,22,.35)); }
  55%     { filter: drop-shadow(0 0 9px rgba(251,191,36,.85)); }
}
@keyframes hwWin {
  0%   { opacity: 0; transform: translate(-50%, -8%) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, -8%) scale(1.05); }
  45%  { opacity: .65; }
  65%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8%) scale(1.15); }
}

/* Accessibilité : visiteurs qui demandent moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .hw-banner__pumpkin, .hw-spider__drop svg, .hw-fog__l, .hw-bat svg,
  html.hw-on .logo, html.hw-on .main-content h1, .hw-aura, .hw-bubble, .hw-smoke,
  .hw-twinkle, .hw-ghost, .chest-modal-stage.hw-haunted, .hw-wheel-pumpkin,
  .hw-wheel-glow.is-on {
    animation: none !important;
  }
  .hw-spider__thread, .hw-spider__drop { transition: none !important; }
}