/* Halloween 2026 — Le Refuge Virtuel
   Activé uniquement lorsque halloween-event67.js ajoute .halloween-event */

html.halloween-event,
body.halloween-event{
  --halloween-orange:#ff8a24;
  --halloween-purple:#7b4cff;
  --halloween-night:#090713;
  --halloween-gold:#ffc45c;
}

/* Ambiance générale */
body.halloween-event{
  background:
    radial-gradient(circle at 50% -10%,rgba(113,65,155,.28),transparent 38%),
    radial-gradient(circle at 10% 30%,rgba(255,112,25,.10),transparent 30%),
    linear-gradient(180deg,#090713 0%,#110b1d 48%,#080b13 100%);
  background-attachment:fixed;
}

body.halloween-event::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,137,36,.08),transparent 22%),
    radial-gradient(circle at 80% 35%,rgba(117,72,180,.10),transparent 25%);
}

/* Couche décorative */
.halloween-atmosphere{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}

.halloween-atmosphere > *{
  pointer-events:none;
}

/* Lune */
.halloween-moon{
  position:absolute;
  top:5vh;
  right:5vw;
  width:clamp(90px,12vw,170px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fff9d4 0 8%,transparent 9%),
    radial-gradient(circle at 55% 58%,#d6bd86 0 9%,transparent 10%),
    radial-gradient(circle at 70% 35%,#e2ca96 0 6%,transparent 7%),
    #ffe7a5;
  box-shadow:
    0 0 20px rgba(255,221,145,.9),
    0 0 65px rgba(255,166,61,.35);
  opacity:.92;
  animation:halloweenMoon 6s ease-in-out infinite;
}

.halloween-moon-glow{
  position:absolute;
  inset:-30%;
  border-radius:50%;
  box-shadow:0 0 80px rgba(255,188,82,.35);
}

.halloween-moon-crater{
  position:absolute;
  border-radius:50%;
  background:rgba(120,83,62,.15);
}
.halloween-moon-crater.c1{width:18%;height:18%;left:25%;top:48%}
.halloween-moon-crater.c2{width:12%;height:12%;left:58%;top:22%}
.halloween-moon-crater.c3{width:9%;height:9%;left:65%;top:62%}

/* Chauves-souris */
.halloween-bats span{
  position:absolute;
  top:15%;
  left:-10%;
  font-size:clamp(18px,2.4vw,34px);
  filter:drop-shadow(0 3px 4px #000);
  animation:halloweenBat 14s linear infinite;
}

.halloween-bats span:nth-child(2){top:24%;animation-delay:-2s;animation-duration:18s}
.halloween-bats span:nth-child(3){top:11%;animation-delay:-5s;animation-duration:20s}
.halloween-bats span:nth-child(4){top:34%;animation-delay:-8s;animation-duration:17s}
.halloween-bats span:nth-child(5){top:7%;animation-delay:-11s;animation-duration:22s}
.halloween-bats span:nth-child(6){top:44%;animation-delay:-4s;animation-duration:21s}
.halloween-bats span:nth-child(7){top:19%;animation-delay:-13s;animation-duration:19s}
.halloween-bats span:nth-child(8){top:51%;animation-delay:-9s;animation-duration:23s}
.halloween-bats span:nth-child(9){top:28%;animation-delay:-15s;animation-duration:25s}
.halloween-bats span:nth-child(10){top:13%;animation-delay:-7s;animation-duration:16s}
.halloween-bats span:nth-child(11){top:39%;animation-delay:-17s;animation-duration:24s}

/* Fantômes */
.halloween-ghosts span{
  position:absolute;
  font-size:clamp(26px,4vw,55px);
  opacity:.25;
  animation:halloweenGhost 7s ease-in-out infinite;
}
.halloween-ghosts span:nth-child(1){left:5%;top:22%}
.halloween-ghosts span:nth-child(2){right:8%;top:40%;animation-delay:-2s}
.halloween-ghosts span:nth-child(3){left:12%;bottom:18%;animation-delay:-4s}
.halloween-ghosts span:nth-child(4){right:18%;bottom:12%;animation-delay:-1s}
.halloween-ghosts span:nth-child(5){left:48%;top:8%;animation-delay:-3s}
.halloween-ghosts span:nth-child(6){left:35%;bottom:8%;animation-delay:-5s}
.halloween-ghosts span:nth-child(7){right:3%;top:68%;animation-delay:-6s}

/* Toiles */
.halloween-corners{
  position:absolute;
  top:0;
  font-size:clamp(70px,11vw,150px);
  opacity:.45;
  filter:grayscale(1) brightness(1.8);
}
.halloween-corner-left{left:-15px;transform:rotate(-15deg)}
.halloween-corner-right{right:-15px;transform:scaleX(-1) rotate(-15deg)}

/* Araignée */
.halloween-spider{
  position:absolute;
  top:-5px;
  left:12%;
  font-size:34px;
  animation:halloweenSpider 8s ease-in-out infinite;
}
.halloween-spider i{
  position:absolute;
  width:1px;
  height:100px;
  background:rgba(255,255,255,.35);
  left:50%;
  bottom:80%;
}

/* Citrouilles */
.halloween-pumpkins{
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
}
.halloween-pumpkins span{
  font-size:clamp(30px,5vw,64px);
  filter:drop-shadow(0 0 10px rgba(255,104,20,.55));
  animation:halloweenPumpkin 3.5s ease-in-out infinite;
}
.halloween-pumpkins span:nth-child(even){animation-delay:-1.7s}

/* Étincelles */
.halloween-sparks,
.halloween-stars{
  position:absolute;
  left:0;
  right:0;
  top:20%;
  text-align:center;
  color:#ffc45c;
  font-size:20px;
  opacity:.5;
  animation:halloweenTwinkle 3s ease-in-out infinite;
}
.halloween-stars{
  top:55%;
  color:#cba6ff;
  animation-delay:-1.5s;
}

/* Feuilles */
.halloween-leaves span{
  position:absolute;
  top:-10%;
  font-size:24px;
  animation:halloweenLeaf 12s linear infinite;
}
.halloween-leaves span:nth-child(1){left:8%;animation-delay:-2s}
.halloween-leaves span:nth-child(2){left:20%;animation-delay:-8s}
.halloween-leaves span:nth-child(3){left:35%;animation-delay:-4s}
.halloween-leaves span:nth-child(4){left:48%;animation-delay:-10s}
.halloween-leaves span:nth-child(5){left:62%;animation-delay:-1s}
.halloween-leaves span:nth-child(6){left:73%;animation-delay:-6s}
.halloween-leaves span:nth-child(7){left:85%;animation-delay:-3s}
.halloween-leaves span:nth-child(8){left:94%;animation-delay:-9s}

/* Cartes et interface */
body.halloween-event .card{
  border-color:rgba(255,139,46,.28);
  box-shadow:
    0 12px 32px rgba(0,0,0,.22),
    0 0 18px rgba(116,63,165,.08);
}

body.halloween-event .button.gold{
  box-shadow:0 0 14px rgba(255,132,34,.22);
}

/* Animations */
@keyframes halloweenMoon{
  50%{transform:translateY(7px);filter:brightness(1.08)}
}

@keyframes halloweenBat{
  0%{transform:translateX(-10vw) translateY(0) rotate(-8deg)}
  25%{transform:translateX(30vw) translateY(-30px) rotate(8deg)}
  50%{transform:translateX(60vw) translateY(15px) rotate(-6deg)}
  75%{transform:translateX(90vw) translateY(-25px) rotate(7deg)}
  100%{transform:translateX(120vw) translateY(10px) rotate(-5deg)}
}

@keyframes halloweenGhost{
  0%,100%{transform:translateY(0) rotate(-3deg);opacity:.18}
  50%{transform:translateY(-24px) rotate(4deg);opacity:.38}
}

@keyframes halloweenSpider{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(90px)}
}

@keyframes halloweenPumpkin{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-7px) rotate(2deg)}
}

@keyframes halloweenTwinkle{
  0%,100%{opacity:.25}
  50%{opacity:.75}
}

@keyframes halloweenLeaf{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg)}
  50%{transform:translateY(55vh) translateX(45px) rotate(220deg)}
  100%{transform:translateY(115vh) translateX(-30px) rotate(480deg)}
}

/* Mobile */
@media(max-width:700px){
  .halloween-moon{
    width:85px;
    top:70px;
    right:10px;
  }

  .halloween-corners{
    font-size:75px;
  }

  .halloween-pumpkins span{
    font-size:32px;
  }

  .halloween-ghosts span{
    font-size:30px;
  }
}

/* Respect du réglage d'accessibilité */
@media(prefers-reduced-motion:reduce){
  .halloween-atmosphere *{
    animation:none!important;
  }
}

/* ==========================================================
   V4 — Citrouilles dispersées
   ========================================================== */

.halloween-pumpkins{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

.halloween-pumpkins span{
  position:absolute;
  filter:drop-shadow(0 0 10px rgba(255,104,20,.5));
  animation:halloweenPumpkin 4s ease-in-out infinite;
}

.halloween-pumpkins span:nth-child(1){
  left:1.5%;
  bottom:2%;
  font-size:54px;
  transform:rotate(-8deg);
}

.halloween-pumpkins span:nth-child(2){
  left:8%;
  bottom:1%;
  font-size:30px;
  animation-delay:-1.2s;
}

.halloween-pumpkins span:nth-child(3){
  right:2%;
  bottom:3%;
  font-size:58px;
  animation-delay:-2s;
}

.halloween-pumpkins span:nth-child(4){
  right:10%;
  bottom:1%;
  font-size:34px;
  animation-delay:-.8s;
}

.halloween-pumpkins span:nth-child(5){
  left:2%;
  top:48%;
  font-size:28px;
  opacity:.75;
  animation-delay:-2.8s;
}

.halloween-pumpkins span:nth-child(6){
  right:2%;
  top:62%;
  font-size:31px;
  opacity:.78;
  animation-delay:-1.7s;
}

.halloween-pumpkins span:nth-child(7){
  left:48%;
  bottom:1%;
  font-size:25px;
  opacity:.55;
  animation-delay:-3.1s;
}

@media(max-width:700px){
  .halloween-pumpkins span:nth-child(5),
  .halloween-pumpkins span:nth-child(6),
  .halloween-pumpkins span:nth-child(7){
    display:none;
  }

  .halloween-pumpkins span:nth-child(1),
  .halloween-pumpkins span:nth-child(3){
    font-size:38px;
  }

  .halloween-pumpkins span:nth-child(2),
  .halloween-pumpkins span:nth-child(4){
    font-size:23px;
  }
}

/* ==========================================================
   HALLOWEEN — PAGE JEUX
   Décoration spéciale des cartes sans modifier leur disposition
   ========================================================== */

body.halloween-game-cards .game-grid{
  position:relative;
}

/* Cartes Halloween */
body.halloween-game-cards .game-tile{
  border-color:rgba(255,137,36,.48);
  background:
    radial-gradient(circle at 85% 10%,rgba(123,76,255,.18),transparent 35%),
    linear-gradient(145deg,#181128,#101a2b 70%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.38),
    0 0 18px rgba(255,112,25,.10);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

body.halloween-game-cards .game-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(255,167,74,.8);
  box-shadow:
    0 16px 34px rgba(0,0,0,.45),
    0 0 24px rgba(255,112,25,.18),
    0 0 30px rgba(123,76,255,.10);
}

/* Petit décor différent sur les cartes */
body.halloween-game-cards .game-tile::before{
  content:"🕸️";
  position:absolute;
  left:-5px;
  top:-8px;
  z-index:3;
  font-size:35px;
  opacity:.48;
  pointer-events:none;
  filter:grayscale(.35);
}

body.halloween-game-cards .game-tile::after{
  content:"🎃";
  position:absolute;
  right:7px;
  bottom:5px;
  z-index:3;
  font-size:25px;
  opacity:.78;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,111,20,.55));
}

/* Variation pour éviter que toutes les cartes soient identiques */
body.halloween-game-cards .game-tile:nth-child(3n+2)::before{
  content:"🦇";
  left:8px;
  top:7px;
  font-size:24px;
  opacity:.65;
}

body.halloween-game-cards .game-tile:nth-child(3n)::after{
  content:"👻";
  font-size:24px;
  opacity:.55;
}

body.halloween-game-cards .game-tile:nth-child(4n)::before{
  content:"🕷️";
  font-size:23px;
  opacity:.65;
}

/* Illustration de chaque jeu */
body.halloween-game-cards .game-picture{
  position:relative;
  background:
    radial-gradient(circle at 72% 24%,var(--tile),transparent 62%),
    radial-gradient(circle at 20% 85%,rgba(255,113,26,.12),transparent 38%),
    linear-gradient(145deg,#19112b,#10233a);
  border-bottom:1px solid rgba(255,143,45,.18);
  text-shadow:
    0 4px 10px rgba(0,0,0,.6),
    0 0 20px rgba(255,155,60,.15);
}

/* Étoile des favoris */
body.halloween-game-cards .game-tile .star{
  border-color:rgba(255,173,73,.5);
  background:#130d20dd;
  color:#ffc45c;
  box-shadow:0 0 10px rgba(255,129,28,.15);
}

/* Filtres de jeux */
body.halloween-game-cards .toolbar .chip{
  border-color:rgba(137,93,189,.55);
  background:#18132a;
}

body.halloween-game-cards .toolbar .chip.active{
  border-color:#ff9a3c;
  background:linear-gradient(135deg,#7a3c23,#47255e);
  color:#fff5e7;
  box-shadow:0 0 13px rgba(255,126,30,.18);
}

/* Lumière orange très discrète sur les boutons Jouer */
body.halloween-game-cards .game-tile .button{
  box-shadow:
    0 4px 16px rgba(0,0,0,.2),
    0 0 10px rgba(255,137,36,.12);
}

/* Mobile : décoration plus légère */
@media(max-width:700px){
  body.halloween-game-cards .game-tile::before{
    font-size:25px;
  }

  body.halloween-game-cards .game-tile::after{
    font-size:19px;
  }

  body.halloween-game-cards .game-tile:nth-child(3n+2)::before,
  body.halloween-game-cards .game-tile:nth-child(4n)::before{
    font-size:19px;
  }
}

/* Accessibilité */
@media(prefers-reduced-motion:reduce){
  body.halloween-game-cards .game-tile{
    transition:none;
  }

  body.halloween-game-cards .game-tile:hover{
    transform:none;
  }
}