/* ============================================================
   mode_hud.css — Polices + styling HUD combo/check par mode
   body[data-mode="<mode>"] override les polices & couleurs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Nosifer&family=Luckiest+Guy&family=Bungee&family=Bungee+Inline&family=Bungee+Shade&family=Black+Ops+One&family=Monoton&family=Audiowide&family=Orbitron:wght@700;900&family=Russo+One&family=Cinzel:wght@700;900&family=Cinzel+Decorative:wght@700;900&family=Uncial+Antiqua&family=MedievalSharp&family=Metamorphous&family=Pirata+One&family=Playfair+Display:wght@700;900&family=Press+Start+2P&family=VT323&family=Special+Elite&display=swap');

/* Commun : suppression des polices par défaut puis override par mode */
#comboInfo, #checkInfo {
  font-family: inherit;
}

/* — ZOMBIE : horror drip, sang vert toxique */
body[data-mode="zombie"] #comboInfo,
body[data-mode="zombie"] #checkInfo {
  font-family: 'Creepster', cursive !important;
  letter-spacing: .06em !important;
  color: #9cff63 !important;
  text-shadow: 0 0 8px #1b5c1b, 0 0 18px #74ff40, 2px 2px 0 #0c1a0c;
}
body[data-mode="zombie"] #checkInfo {
  background: radial-gradient(circle, rgba(30,80,20,0.9), rgba(5,15,5,0.97)) !important;
  border-color: #74ff40 !important;
}

/* — CHAT : bulle fun, coup de patte */
body[data-mode="chat"] #comboInfo,
body[data-mode="chat"] #checkInfo {
  font-family: 'Luckiest Guy', cursive !important;
  letter-spacing: .05em !important;
  color: #ffcd40 !important;
  text-shadow: 0 0 8px #ff6b00, 3px 3px 0 #2b1a00;
}
body[data-mode="chat"] #checkInfo {
  background: radial-gradient(circle, rgba(140,70,0,0.9), rgba(30,10,0,0.97)) !important;
  border-color: #ffcd40 !important;
}

/* — DETONATOR / BOMBERMAN : blocky, explosif */
body[data-mode="detonator"] #comboInfo,
body[data-mode="detonator"] #checkInfo,
body[data-mode="bomberman"] #comboInfo,
body[data-mode="bomberman"] #checkInfo {
  font-family: 'Bungee Inline', cursive !important;
  letter-spacing: .10em !important;
  color: #ffb300 !important;
  text-shadow: 0 0 12px #ff3500, 0 0 24px #ffb300, 2px 2px 0 #2b0e00;
}
body[data-mode="detonator"] #checkInfo,
body[data-mode="bomberman"] #checkInfo {
  background: radial-gradient(circle, rgba(255,100,0,0.92), rgba(60,10,0,0.97)) !important;
  border-color: #ffb300 !important;
}

/* — HURRICANE : speed lines, sci-fi */
body[data-mode="hurricane"] #comboInfo,
body[data-mode="hurricane"] #checkInfo {
  font-family: 'Audiowide', cursive !important;
  letter-spacing: .14em !important;
  color: #9befff !important;
  text-shadow: 0 0 12px #1080ff, 0 0 24px #9befff;
}
body[data-mode="hurricane"] #checkInfo {
  background: radial-gradient(circle, rgba(30,90,180,0.9), rgba(5,20,40,0.97)) !important;
  border-color: #9befff !important;
}

/* — MAGNET : sci-fi métal */
body[data-mode="magnet"] #comboInfo,
body[data-mode="magnet"] #checkInfo {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  color: #e4f1ff !important;
  text-shadow: 0 0 10px #4080ff, 0 0 24px #00e0ff;
}
body[data-mode="magnet"] #checkInfo {
  background: linear-gradient(135deg, rgba(30,50,110,0.94), rgba(5,10,30,0.97)) !important;
  border-color: #4080ff !important;
}

/* — AURAGON / ODYSSEY / BOSSFIGHT : fantaisie sacrée */
body[data-mode="auragon"] #comboInfo,
body[data-mode="auragon"] #checkInfo,
body[data-mode="odyssey"] #comboInfo,
body[data-mode="odyssey"] #checkInfo,
body[data-mode="bossfight"] #comboInfo,
body[data-mode="bossfight"] #checkInfo {
  font-family: 'Cinzel Decorative', serif !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  color: #ffe28a !important;
  text-shadow: 0 0 10px #d4a500, 0 0 24px #ffce3a, 2px 2px 0 #2b1a00;
}
body[data-mode="auragon"] #checkInfo,
body[data-mode="odyssey"] #checkInfo,
body[data-mode="bossfight"] #checkInfo {
  background: radial-gradient(circle, rgba(120,70,0,0.92), rgba(30,15,0,0.97)) !important;
  border-color: #ffce3a !important;
}

/* — TOWER / CASTLE / DONJON : médiéval */
body[data-mode="tower"] #comboInfo,
body[data-mode="tower"] #checkInfo,
body[data-mode="castle"] #comboInfo,
body[data-mode="castle"] #checkInfo,
body[data-mode="donjon"] #comboInfo,
body[data-mode="donjon"] #checkInfo {
  font-family: 'MedievalSharp', cursive !important;
  letter-spacing: .06em !important;
  color: #ffe4b0 !important;
  text-shadow: 0 0 8px #5a1a00, 2px 2px 0 #1a0a00;
}
body[data-mode="tower"] #checkInfo,
body[data-mode="castle"] #checkInfo,
body[data-mode="donjon"] #checkInfo {
  background: radial-gradient(circle, rgba(90,40,10,0.92), rgba(25,8,0,0.97)) !important;
  border-color: #ffa84a !important;
}

/* — COMMANDER / DOMINATION / SURVIVAL : militaire */
body[data-mode="commander"] #comboInfo,
body[data-mode="commander"] #checkInfo,
body[data-mode="domination"] #comboInfo,
body[data-mode="domination"] #checkInfo,
body[data-mode="survival"] #comboInfo,
body[data-mode="survival"] #checkInfo {
  font-family: 'Black Ops One', cursive !important;
  letter-spacing: .10em !important;
  color: #c5ff5c !important;
  text-shadow: 0 0 8px #3a6a00, 2px 2px 0 #0d1a00;
}
body[data-mode="commander"] #checkInfo,
body[data-mode="domination"] #checkInfo,
body[data-mode="survival"] #checkInfo {
  background: linear-gradient(135deg, rgba(45,70,20,0.94), rgba(10,18,5,0.97)) !important;
  border-color: #c5ff5c !important;
}

/* — MANOIR : gothique sanglant */
body[data-mode="manoir"] #comboInfo,
body[data-mode="manoir"] #checkInfo {
  font-family: 'Nosifer', cursive !important;
  letter-spacing: .04em !important;
  color: #ff6363 !important;
  text-shadow: 0 0 10px #a01000, 3px 3px 0 #1a0000;
}
body[data-mode="manoir"] #checkInfo {
  background: radial-gradient(circle, rgba(90,0,0,0.94), rgba(20,0,0,0.97)) !important;
  border-color: #ff6363 !important;
}

/* — TOTEM : tribal ombré */
body[data-mode="totem"] #comboInfo,
body[data-mode="totem"] #checkInfo {
  font-family: 'Bungee Shade', cursive !important;
  letter-spacing: .08em !important;
  color: #ff9a42 !important;
  text-shadow: 0 0 10px #7a2800, 2px 2px 0 #2b0e00;
}
body[data-mode="totem"] #checkInfo {
  background: radial-gradient(circle, rgba(130,50,0,0.92), rgba(30,10,0,0.97)) !important;
  border-color: #ff9a42 !important;
}

/* — JACKPOT : néon casino */
body[data-mode="jackpot"] #comboInfo,
body[data-mode="jackpot"] #checkInfo {
  font-family: 'Monoton', cursive !important;
  letter-spacing: .14em !important;
  color: #ff4de8 !important;
  text-shadow: 0 0 12px #ff00c8, 0 0 24px #7effff;
}
body[data-mode="jackpot"] #checkInfo {
  background: linear-gradient(135deg, rgba(120,0,100,0.92), rgba(20,0,20,0.97)) !important;
  border-color: #ff4de8 !important;
}

/* — PURECHESS / CLASSIC : élégant serif */
body[data-mode="purechess"] #comboInfo,
body[data-mode="purechess"] #checkInfo,
body[data-mode="classic"] #comboInfo,
body[data-mode="classic"] #checkInfo {
  font-family: 'Playfair Display', serif !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  color: #fff3c0 !important;
  text-shadow: 0 0 8px #000, 2px 2px 0 #2a1a00;
}

/* — PUZZLE / PUZZLE_CARDS : rétro pixel */
body[data-mode="puzzle"] #comboInfo,
body[data-mode="puzzle"] #checkInfo,
body[data-mode="puzzle_cards"] #comboInfo,
body[data-mode="puzzle_cards"] #checkInfo {
  font-family: 'Press Start 2P', cursive !important;
  letter-spacing: .02em !important;
  font-size: 24px !important;
  color: #7dffae !important;
  text-shadow: 0 0 6px #003c00, 2px 2px 0 #000;
}
body[data-mode="puzzle"] #checkInfo,
body[data-mode="puzzle_cards"] #checkInfo {
  background: rgba(5,15,5,0.95) !important;
  border: 2px solid #7dffae !important;
  border-radius: 0 !important;
}

/* ============================================================
   FX de screen-check plein écran (overlay par mode)
   Activé par .mode-check-fx .mode-<mode>  (JS toggle)
   ============================================================ */

.mode-check-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  opacity: 0;
  transition: opacity .12s ease-out;
}
.mode-check-fx.active { opacity: 1; }

/* Zombie : morsure (2 arcs de crocs rouges + spray vert) */
.mode-check-fx.mode-zombie::before,
.mode-check-fx.mode-zombie::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 50vmin; height: 50vmin;
  border: 8px solid transparent;
  border-top-color: rgba(180,30,30,0.85);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(0deg);
  filter: drop-shadow(0 0 20px #1eff60);
  animation: zombie-bite 0.6s ease-out forwards;
}
.mode-check-fx.mode-zombie::after {
  animation: zombie-bite-bottom 0.6s ease-out forwards;
  border-top-color: transparent;
  border-bottom-color: rgba(180,30,30,0.85);
}
@keyframes zombie-bite {
  0% { transform: translate(-50%,-50%) scale(0.4) rotate(-5deg); opacity: 0; }
  40% { transform: translate(-50%,-50%) scale(1) rotate(-10deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.3) rotate(-10deg); opacity: 0; }
}
@keyframes zombie-bite-bottom {
  0% { transform: translate(-50%,-50%) scale(0.4) rotate(5deg); opacity: 0; }
  40% { transform: translate(-50%,-50%) scale(1) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.3) rotate(10deg); opacity: 0; }
}

/* Chat : 3 griffures diagonales */
.mode-check-fx.mode-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 20%, rgba(255,60,60,0.85) 22%, transparent 24%) 0 0/100% 100%,
    linear-gradient(112deg, transparent 40%, rgba(255,60,60,0.85) 42%, transparent 44%) 0 0/100% 100%,
    linear-gradient(112deg, transparent 60%, rgba(255,60,60,0.85) 62%, transparent 64%) 0 0/100% 100%;
  filter: blur(1px) drop-shadow(0 0 12px #ff3030);
  animation: chat-claw 0.5s ease-out forwards;
}
@keyframes chat-claw {
  0% { transform: translateX(-20%); opacity: 0; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(20%); opacity: 0; }
}

/* Detonator / Bomberman : onde de choc orange + blanche */
.mode-check-fx.mode-detonator::before,
.mode-check-fx.mode-bomberman::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 30vmin; height: 30vmin;
  border: 10px solid #ffb300;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 40px 20px rgba(255,120,0,0.8);
  transform: translate(-50%,-50%) scale(0.3);
  animation: det-shockwave 0.55s ease-out forwards;
}
@keyframes det-shockwave {
  0% { transform: translate(-50%,-50%) scale(0.2); opacity: 1; border-width: 18px; }
  60% { opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; border-width: 2px; }
}

/* Hurricane : stries diagonales bleu */
.mode-check-fx.mode-hurricane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 40px,
    rgba(155,239,255,0.45) 40px 46px,
    transparent 46px 80px
  );
  filter: drop-shadow(0 0 8px #3fc9ff);
  animation: hurricane-lines 0.5s ease-out forwards;
}
@keyframes hurricane-lines {
  0% { transform: translateX(-40%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}

/* Magnet : grille sci-fi + arcs cyan */
.mode-check-fx.mode-magnet::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60vmin; height: 60vmin;
  border: 4px solid #4080ff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #00e0ff, inset 0 0 40px 10px rgba(64,128,255,0.5);
  transform: translate(-50%,-50%) scale(0.4);
  animation: magnet-pulse 0.55s ease-out forwards;
}
@keyframes magnet-pulse {
  0% { transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}

/* Auragon / Odyssey / Bossfight : flash doré + cercle runique */
.mode-check-fx.mode-auragon::before,
.mode-check-fx.mode-odyssey::before,
.mode-check-fx.mode-bossfight::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 70vmin; height: 70vmin;
  background: radial-gradient(circle, rgba(255,215,100,0.45) 0%, transparent 60%);
  border: 3px solid #ffce3a;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0.3);
  animation: aura-burst 0.6s ease-out forwards;
}
@keyframes aura-burst {
  0% { transform: translate(-50%,-50%) scale(0.3); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%,-50%) scale(2) rotate(30deg); opacity: 0; filter: blur(4px); }
}

/* Tower / Castle / Donjon : impact de pierre */
.mode-check-fx.mode-tower::before,
.mode-check-fx.mode-castle::before,
.mode-check-fx.mode-donjon::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 45vmin; height: 45vmin;
  background: radial-gradient(circle, rgba(200,120,40,0.6) 0%, transparent 60%);
  transform: translate(-50%,-50%);
  filter: blur(2px);
  animation: stone-smash 0.5s ease-out forwards;
}
@keyframes stone-smash {
  0% { transform: translate(-50%,-50%) scale(0.1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

/* Commander / Domination / Survival : flash vert militaire */
.mode-check-fx.mode-commander::before,
.mode-check-fx.mode-domination::before,
.mode-check-fx.mode-survival::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(197,255,92,0.35) 50%, transparent 100%);
  animation: mil-flash 0.35s ease-out forwards;
}
@keyframes mil-flash {
  0% { opacity: 0; transform: scale(1.05); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* Manoir : voile sanglant */
.mode-check-fx.mode-manoir::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(180,0,0,0.4) 0%, rgba(60,0,0,0.15) 50%, transparent 100%);
  animation: blood-wash 0.55s ease-out forwards;
}
@keyframes blood-wash {
  0% { opacity: 0; filter: blur(15px); }
  50% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(10px); }
}

/* Totem : poussière + runes */
.mode-check-fx.mode-totem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,154,66,0.35) 0%, transparent 50%);
  animation: totem-dust 0.5s ease-out forwards;
}
@keyframes totem-dust {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Jackpot : flash rose/cyan casino */
.mode-check-fx.mode-jackpot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,77,232,0.35) 50%, transparent 100%),
              linear-gradient(0deg, transparent 0%, rgba(126,255,255,0.3) 50%, transparent 100%);
  animation: jackpot-neon 0.5s ease-out forwards;
}
@keyframes jackpot-neon {
  0%,100% { opacity: 0; }
  20%,80% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Puzzle : glitch pixel vert */
.mode-check-fx.mode-puzzle::before,
.mode-check-fx.mode-puzzle_cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(125,255,174,0.12) 0 2px,
    transparent 2px 6px
  );
  animation: pix-glitch 0.45s steps(4) forwards;
}
@keyframes pix-glitch {
  0% { opacity: 0; transform: translateX(-10px); }
  25% { opacity: 1; transform: translateX(10px); }
  50% { opacity: 1; transform: translateX(-6px); }
  75% { opacity: 0.8; transform: translateX(4px); }
  100% { opacity: 0; transform: translateX(0); }
}