/* ================================================================
   UI_FIXES.CSS — TAO3C V50-TEST
   Correctifs UI/CSS chargés EN DERNIER (après tous les autres CSS)
   ================================================================ */

/* ----------------------------------------------------------------
   0. REDESIGN UI — TRANSPARENCE + BOUTONS AUTO (session 2026-03-11)
   ---------------------------------------------------------------- */

/* Bandeau HUD en haut → transparent */
#v35ProHUD {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* fxTopMenu pill → transparent */
#fxTopMenu {
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
#fxTopMenu label,
#fxTopMenu select {
  background: transparent !important;
}
#fxTopMenu select {
  border-color: rgba(255,255,255,0.12) !important;
}

/* Description carte → transparent */
#cardDesc {
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* Main du joueur → transparent */
#hands {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.handPanel {
  background: transparent !important;
  border-color: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Mode indicator en haut à gauche → masqué */
#modeIndicator {
  display: none !important;
}

/* Boutons auto → droite, transparent */
#autoControls3H {
  right: 12px !important;
  left: auto !important;
  bottom: 14px !important;
  transform: none !important;
}
#autoControls3H button {
  padding: 5px 15px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: transparent !important;
  color: rgba(220,230,255,0.9) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
  opacity: 0.85 !important;
  transition: all 0.18s ease !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
  line-height: 1.6 !important;
}
#autoControls3H button:hover {
  opacity: 1 !important;
  border-color: rgba(100,200,255,0.55) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}
#autoControls3H button:disabled {
  opacity: 0.28 !important;
  cursor: default !important;
  transform: none !important;
}
/* Bouton smart actif (vert) */
#autoControls3H button[style*="2ecc71"] {
  border-color: rgba(46,204,113,0.5) !important;
  background: transparent !important;
  color: rgba(180,255,210,0.9) !important;
}
/* Status auto → discret */
#autoStatus3H {
  background: transparent !important;
  border: none !important;
  color: rgba(160,190,230,0.6) !important;
  font-size: 10px !important;
  min-width: unset !important;
  padding: 0 4px !important;
}

/* ----------------------------------------------------------------
   1. HIÉRARCHIE Z-INDEX UNIFIÉE
   Niveaux :
     10-50   → canvas, plateaux
     100-500 → panels UI (mains, desc, logs)
     1000    → HUD bar
     2000    → modals, auragon, manoir
     5000    → overlays FX (kamehameha, etc.)
     9000    → popups urgents
     10000   → score screen, fin de partie
   ---------------------------------------------------------------- */

/* HUD principal — ramené à 1000 (était 100000) */
#v35ProHUD {
  z-index: 1000 !important;
}

/* Score screen */
#v35ScoreScreen {
  z-index: 10000 !important;
}

/* Tower mini UI */
#v35TowerMiniUI {
  z-index: 2000 !important;
}

/* Auragon counter — passe sous le HUD, décalé pour ne pas se superposer */
.auragon-card-counter {
  z-index: 900 !important;
  top: 56px !important;   /* sous le HUD de 48px */
  right: 20px !important;
}

/* Manoir HUD — passe sous le v35ProHUD */
#v38ManoirHUD {
  z-index: 900 !important;
  top: 56px !important;   /* sous le HUD */
}

/* v38 key/door notifications — décalées aussi */
.v38-key-notif,
.v38-door-notif {
  top: 64px !important;
  z-index: 1100 !important;
}

/* AI thinking indicator — au-dessus du canvas, sous les modals */
.ai-thinking {
  z-index: 900 !important;
  bottom: 80px !important; /* au-dessus de la main de cartes */
}

/* Mode FX top menu */
#fxTopMenu {
  z-index: 500 !important;
}

/* cardDesc et cardActions */
#cardDesc {
  z-index: 400 !important;
}

/* ----------------------------------------------------------------
   2. CORRECTION VISIBILITY ANIMATION — #v35TowerMiniUI
   display:none → display:block ne supporte pas les transitions CSS.
   On utilise visibility + opacity à la place.
   ---------------------------------------------------------------- */
#v35TowerMiniUI {
  display: block !important;        /* toujours dans le DOM */
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

#v35TowerMiniUI.visible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ----------------------------------------------------------------
   3. MAIN DE CARTES — overflow-x scrollable sur petits écrans
   ---------------------------------------------------------------- */
#hands {
  max-width: min(90vw, 700px) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 4px !important;
}

#hands .handGrid {
  flex-wrap: nowrap !important;
  overflow-x: visible;
  min-width: min-content;
}

#hands .cardItem {
  flex-shrink: 0 !important; /* ne pas compresser les cartes */
}

/* Scrollbar fine sur la main */
#hands::-webkit-scrollbar {
  height: 3px;
}
#hands::-webkit-scrollbar-track {
  background: transparent;
}
#hands::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

/* ----------------------------------------------------------------
   4. STATUS — contraste et position stable
   ---------------------------------------------------------------- */
#status {
  background: transparent !important;
  color: #e4f0ff !important;
  font-weight: 500 !important;
  border: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.5);
  /* Position : bas-gauche définie par v41, on la stabilise */
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important;
  transform: none !important;
  max-width: 300px !important;
  z-index: 200 !important;
}

/* ----------------------------------------------------------------
   5. CORRECTION ANIMATION aiDots
   content: ne fonctionne pas dans @keyframes ordinaires.
   On remplace par une animation width + overflow.
   ---------------------------------------------------------------- */
@keyframes aiDots {
  0%   { width: 6px; }
  33%  { width: 12px; }
  66%  { width: 18px; }
  100% { width: 6px; }
}

.ai-thinking::after {
  content: '...';          /* fixe, pas d'animation de content */
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  animation: aiDots 1.2s steps(3) infinite;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   6. #cardActions — rendu visible quand une carte est sélectionnée
   v41 le cache complètement mais les boutons Jouer/Annuler sont
   nécessaires. On les re-active via une classe .card-selected
   posée par le JS sur body ou #cardActions.
   ---------------------------------------------------------------- */
#cardActions.active {
  display: grid !important;
  z-index: 410 !important;
}

/* Position : sous cardDesc, à droite */
#cardActions {
  position: fixed !important;
  right: 12px !important;
  bottom: 100px !important;
  top: auto !important;
  left: auto !important;
  width: 200px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 8px !important;
  background: transparent !important;
  border-radius: 12px !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* ----------------------------------------------------------------
   7. RESPONSIVE MOBILE (< 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  #v35ProHUD {
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .v35-mode-name {
    display: none; /* trop long sur mobile */
  }

  #cardDesc {
    width: min(85vw, 260px) !important;
    right: 8px !important;
    bottom: 120px !important;
    max-height: 35vh !important;
  }

  #cardActions {
    width: min(85vw, 260px) !important;
    right: 8px !important;
    bottom: 85px !important;
  }

  .auragon-card-counter {
    font-size: 13px !important;
    padding: 8px 14px !important;
    right: 8px !important;
  }

  #v35TowerMiniUI {
    right: 8px !important;
    bottom: 120px !important;
    width: min(200px, 85vw) !important;
  }

  #status {
    max-width: calc(100vw - 24px) !important;
    font-size: 11px !important;
  }

  .ai-thinking {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }
}

/* ----------------------------------------------------------------
   8. ANIMATIONS — GPU acceleration
   ---------------------------------------------------------------- */
.v35-score-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: v35ScoreSlideIn 0.5s ease-out forwards !important;
}

@keyframes v35ScoreSlideIn {
  from {
    transform: translate3d(0, 40px, 0) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

/* ----------------------------------------------------------------
   9. #board3d — s'assure que les clics passent bien
      sur les zones sans canvas (ne devrait pas intercepter l'UI)
   ---------------------------------------------------------------- */
#board3d {
  pointer-events: none !important;
}

#canvas {
  pointer-events: auto !important;
}

/* ----------------------------------------------------------------
   10. SCROLLBAR GLOBALE pour les panels
   ---------------------------------------------------------------- */
#cardDesc .descBody::-webkit-scrollbar,
#logs::-webkit-scrollbar {
  width: 4px;
}
#cardDesc .descBody::-webkit-scrollbar-thumb,
#logs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}
#cardDesc .descBody::-webkit-scrollbar-track,
#logs::-webkit-scrollbar-track {
  background: transparent;
}

/* ----------------------------------------------------------------
   11. MISSILE TOUR FX — Styles par type d'attaque
   ---------------------------------------------------------------- */
/* Base missile (overridden par tower_fx.js inline styles) */
.tower-missile-fx {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60002;
  transform: translate(-50%, -50%);
}
/* Neutralize: electric yellow */
.tower-missile-neutralize {
  filter: brightness(1.3);
}
/* Anthrax: toxic green */
.tower-missile-anthrax {
  filter: brightness(1.1) hue-rotate(0deg);
}
/* Seeker: aggressive red */
.tower-missile-seeker {
  filter: brightness(1.4) contrast(1.2);
}

/* Particules de traînée */
.tower-missile-particle {
  pointer-events: none;
  z-index: 60001;
}

/* Explosion */
.tower-missile-explosion {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60003;
}
@keyframes towerExplosion {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  50%  { transform: translate(-50%,-50%) scale(1.2); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(2.0); opacity: 0; }
}
/* Onde de choc */
.tower-shockwave {
  pointer-events: none;
}
@keyframes towerShockwave {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(6); opacity: 0; }
}
/* Éclats */
@keyframes towerShard {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--shard-x)), calc(-50% + var(--shard-y))) scale(0.3); opacity: 0; }
}

/* Legacy compat */
.tower-missile-trail {
  position: fixed;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(transparent, rgba(255,150,0,0.6));
  pointer-events: none;
  z-index: 59999;
  transform-origin: top center;
}

/* ----------------------------------------------------------------
   12. HURRICANE TORNADO FX
   ---------------------------------------------------------------- */
.hurricane-tornado {
  position: fixed;
  width: 80px;
  height: 160px;
  pointer-events: none;
  z-index: 6000;
  transform: translate(-50%, -50%);
}
.hurricane-tornado-core {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%,
      rgba(180,230,255,0.8) 0%,
      rgba(100,180,240,0.6) 20%,
      rgba(60,140,220,0.4) 40%,
      rgba(30,100,200,0.2) 65%,
      transparent 80%);
  animation: tornadoSpin 0.3s linear infinite;
  border-radius: 40% 40% 50% 50%;
  box-shadow: 0 0 30px rgba(100,200,255,0.5), 0 0 60px rgba(80,180,240,0.3);
}
@keyframes tornadoSpin {
  0% { transform: skewX(0deg) scaleX(1); }
  25% { transform: skewX(5deg) scaleX(1.05); }
  50% { transform: skewX(0deg) scaleX(0.95); }
  75% { transform: skewX(-5deg) scaleX(1.05); }
  100% { transform: skewX(0deg) scaleX(1); }
}
.hurricane-debris {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(200,230,255,0.7);
  border-radius: 1px;
  animation: debrisSpin var(--duration, 0.8s) linear infinite;
}
@keyframes debrisSpin {
  0% { transform: rotate(0deg) translateX(var(--radius, 30px)) rotate(0deg); opacity: 0.8; }
  100% { transform: rotate(360deg) translateX(var(--radius, 30px)) rotate(-360deg); opacity: 0.4; }
}
.piece-wind-pushed {
  animation: windPush 0.4s ease-out forwards;
}
@keyframes windPush {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.2) rotate(15deg) translateY(-10px); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ----------------------------------------------------------------
   13. COMMANDER HUD
   ---------------------------------------------------------------- */
#commanderHUD {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 20px;
  background: rgba(10,14,28,0.6);
  border: 1px solid rgba(255,200,100,0.3);
  border-radius: 20px;
  color: rgba(255,220,150,0.9);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
  z-index: 500;
  display: none;
}
#commanderHUD.active { display: block; }

/* ----------------------------------------------------------------
   14. PAUSE MENU
   ---------------------------------------------------------------- */
#pauseMenu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,5,0.75);
  backdrop-filter: blur(12px);
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#pauseMenu.visible {
  opacity: 1;
  pointer-events: auto;
}
#pauseMenuPanel {
  background: rgba(8,12,24,0.92);
  border: 1px solid rgba(120,180,255,0.2);
  border-radius: 20px;
  padding: 28px 36px;
  min-width: 340px;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  color: rgba(200,220,255,0.9);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(80,140,255,0.1);
}
#pauseMenuPanel::-webkit-scrollbar { width: 4px; }
#pauseMenuPanel::-webkit-scrollbar-thumb { background: rgba(100,180,255,0.3); border-radius: 2px; }
#pauseMenuPanel h2 {
  margin: 0 0 20px;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #fff;
}
.pause-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(120,180,255,0.25);
  background: rgba(15,20,40,0.6);
  color: rgba(190,215,255,0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pause-btn:hover {
  background: rgba(25,35,65,0.8);
  border-color: rgba(100,180,255,0.5);
}
.pause-music-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.pause-music-row .pause-btn { flex: 1; }
#pauseVolumeSlider {
  width: 100%;
  margin: 10px 0;
  accent-color: rgba(100,180,255,0.8);
}
#pauseTrackName {
  font-size: 11px;
  color: rgba(150,180,220,0.6);
  margin: 6px 0 12px;
  font-style: italic;
}

/* Sections du menu pause */
.pause-section {
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid rgba(120,180,255,0.1);
}
.pause-section:first-child { border-top: none; margin-top: 0; }
.pause-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(100,180,255,0.7);
  margin-bottom: 10px;
}
.pause-actions { border-top: 1px solid rgba(120,180,255,0.2); padding-top: 14px; }

/* Grille de voix */
.pause-voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.pause-voice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(120,180,255,0.15);
  background: rgba(15,20,40,0.5);
  color: rgba(190,215,255,0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
}
.pause-voice-btn:hover {
  background: rgba(25,35,65,0.7);
  border-color: rgba(100,180,255,0.4);
}
.pause-voice-btn.active {
  background: rgba(40,60,120,0.6);
  border-color: rgba(100,180,255,0.6);
  color: #fff;
  box-shadow: 0 0 12px rgba(80,140,255,0.2);
}
.voice-icon { font-size: 20px; }
.voice-label { font-size: 10px; font-weight: 600; }

/* Slider row */
.pause-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.pause-slider-label {
  font-size: 10px;
  color: rgba(150,180,220,0.6);
  white-space: nowrap;
  min-width: 80px;
  text-align: left;
}
.pause-slider-row input[type="range"] {
  flex: 1;
  accent-color: rgba(100,180,255,0.8);
}

/* Select mode */
.pause-select {
  width: 100%;
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,180,255,0.2);
  background: rgba(15,20,40,0.7);
  color: rgba(200,220,255,0.9);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236ab4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.pause-select:focus { outline: none; border-color: rgba(100,180,255,0.5); }

.pause-btn-small {
  font-size: 11px;
  padding: 6px 10px;
  margin: 4px auto;
  width: auto;
  display: inline-block;
}
.pause-btn-close {
  background: rgba(80,20,20,0.4);
  border-color: rgba(255,100,100,0.2);
}
.pause-btn-close:hover {
  background: rgba(120,30,30,0.5);
  border-color: rgba(255,100,100,0.4);
}

/* ----------------------------------------------------------------
   15. AURAGON CARD COUNTER
   ---------------------------------------------------------------- */
#auragonCardCount {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 900;
  padding: 5px 14px;
  background: rgba(8,12,24,0.7);
  border: 1px solid rgba(255,100,200,0.3);
  border-radius: 14px;
  color: rgba(255,180,230,0.9);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  display: none;
}
#auragonCardCount.active { display: block; }

/* ----------------------------------------------------------------
   16. MAGNETO — Champ magnétique (Carte 3)
   ---------------------------------------------------------------- */
.magnet-field {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(80,150,255,0.7);
  box-shadow: 0 0 20px rgba(80,150,255,0.5), inset 0 0 30px rgba(80,150,255,0.2);
  pointer-events: none;
  z-index: 200;
  animation: magnetPulse 1.5s ease-in-out infinite;
}
@keyframes magnetPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(80,150,255,0.5), inset 0 0 30px rgba(80,150,255,0.2); }
  50% { box-shadow: 0 0 40px rgba(80,150,255,0.8), inset 0 0 50px rgba(80,150,255,0.3); }
}
.magnet-beam {
  position: fixed;
  height: 2px;
  background: linear-gradient(90deg, rgba(80,150,255,0.8), transparent);
  pointer-events: none;
  z-index: 199;
  animation: beamPulse 0.5s ease-in-out infinite;
}
@keyframes beamPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

/* ----------------------------------------------------------------
   17. COUNTER GHOST — Invisibilité (Carte 8)
   ---------------------------------------------------------------- */
.piece-invisible {
  opacity: 0.15;
  filter: blur(1px);
}
.piece-invisible-own {
  opacity: 0.35;
  filter: blur(0.5px) drop-shadow(0 0 6px rgba(100,200,255,0.5));
}

/* ----------------------------------------------------------------
   18. TOWER — Modes d'attaque (3 boutons)
   ---------------------------------------------------------------- */
/* Tower UI masquée par défaut si non débloquée */
#v35TowerMiniUI:not(.tower-active) {
  /* géré via visibility/opacity dans ui_fixes.css section 2 */
}
.tower-attack-modes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.tower-attack-btn {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(140,80,255,0.3);
  background: rgba(20,10,40,0.6);
  color: rgba(220,200,255,0.9);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}
.tower-attack-btn:hover:not(:disabled) {
  border-color: rgba(180,100,255,0.6);
  background: rgba(40,20,70,0.8);
}
.tower-attack-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.tower-missile-cost {
  font-size: 10px;
  opacity: 0.7;
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ----------------------------------------------------------------
   19. PIÈCE PARALYSÉE PAR MISSILE TOUR
   ---------------------------------------------------------------- */
.piece-paralyzed-tower {
  filter: grayscale(0.7) brightness(0.8) drop-shadow(0 0 8px rgba(255,220,0,0.8));
  animation: paralyzeShake 0.3s ease-in-out infinite;
}
@keyframes paralyzeShake {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
}

/* ----------------------------------------------------------------
   20. PIÈCE EMPOISONNÉE ANTHRAX
   ---------------------------------------------------------------- */
.piece-anthrax {
  filter: drop-shadow(0 0 8px rgba(80,255,80,0.7));
  animation: anthraxPulse 1s ease-in-out infinite;
}
@keyframes anthraxPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(80,255,80,0.7)); }
  50% { filter: drop-shadow(0 0 16px rgba(80,255,80,1)); }
}

/* ----------------------------------------------------------------
   21. BOMBERMAN — Thermomètre HUD
   ---------------------------------------------------------------- */
#bombThermoHUD {
  position: fixed; top: 60px; right: 14px; z-index: 600;
  width: 44px; display: none; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 6px;
  background: rgba(8,12,24,0.7); border: 1px solid rgba(255,80,50,0.3);
  border-radius: 12px; backdrop-filter: blur(8px); color: rgba(255,200,180,0.9);
  font-size: 10px; font-weight: 700;
}
#bombThermoHUD.active { display: flex; }
.thermo-bar { width: 12px; height: 80px; background: rgba(255,255,255,0.1);
  border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,100,50,0.4); }
.thermo-fill { width: 100%; background: linear-gradient(0deg,#ff2200,#ff8800,#ffcc00);
  transition: height 0.5s ease; border-radius: 6px; }
.thermo-label { font-size: 9px; text-align: center; }
.bomb-drop {
  position: fixed; width: 20px; height: 20px; font-size: 18px;
  pointer-events: none; z-index: 7000; animation: bombFall 0.8s ease-in forwards;
}
@keyframes bombFall { 0%{transform:translateY(-60px) rotate(0deg);opacity:1}
  100%{transform:translateY(0) rotate(180deg);opacity:0.8} }
.bomb-explode {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 7001;
  background: radial-gradient(circle,rgba(255,255,200,0.9) 0%,rgba(255,150,0,0.7) 30%,rgba(255,50,0,0.3) 70%,transparent 90%);
  animation: bombExplodeAnim 0.6s ease-out forwards;
}
.bomb-preview,
.bomb-blast-cell,
.bomb-crater-mark {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
}
.bomb-preview {
  width: 34px; height: 34px; z-index: 7002;
  display: flex; align-items: center; justify-content: center;
  color: #fff3d6; font-size: 20px; font-weight: 700;
  background: radial-gradient(circle, rgba(255,120,40,0.95) 0%, rgba(180,30,0,0.65) 58%, rgba(0,0,0,0) 78%);
  box-shadow: 0 0 18px rgba(255,90,20,0.85), 0 0 38px rgba(255,60,10,0.45);
  animation: bombPreviewPulse 0.75s ease-in-out infinite;
}
.bomb-blast-cell {
  width: 44px; height: 44px; z-index: 7000;
  background: radial-gradient(circle, rgba(255,180,70,0.34) 0%, rgba(255,80,0,0.22) 55%, rgba(255,40,0,0.06) 75%, transparent 100%);
  border: 1px solid rgba(255,150,70,0.42);
  box-shadow: 0 0 12px rgba(255,100,40,0.45);
  animation: bombBlastWarn 0.7s ease-in-out infinite;
}
.bomb-crater-mark {
  width: 52px; height: 52px; z-index: 6998;
  background: radial-gradient(circle, rgba(30,6,0,0.72) 0%, rgba(70,18,0,0.58) 38%, rgba(255,88,0,0.20) 62%, rgba(255,130,0,0.05) 80%, transparent 100%);
  box-shadow: inset 0 0 10px rgba(255,120,20,0.22), 0 0 16px rgba(255,70,10,0.18);
  animation: craterFade 5s ease-out forwards;
}
@keyframes bombExplodeAnim {
  0%{width:0;height:0;transform:translate(-50%,-50%) scale(0);opacity:1}
  50%{width:80px;height:80px;opacity:0.9}
  100%{width:120px;height:120px;transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes bombPreviewPulse {
  0%,100% { transform: translate(-50%,-50%) scale(0.92); filter: saturate(1); }
  50% { transform: translate(-50%,-50%) scale(1.08); filter: saturate(1.3); }
}
@keyframes bombBlastWarn {
  0%,100% { opacity: 0.45; transform: translate(-50%,-50%) scale(0.92); }
  50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.05); }
}
@keyframes craterFade {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------------------
   22. HURRICANE — Boussole HUD
   ---------------------------------------------------------------- */
#hurricaneCompass {
  position: fixed; top: 60px; right: 14px; z-index: 600;
  width: 72px; height: 72px; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,12,24,0.78); border: 1px solid rgba(100,180,255,0.3);
  border-radius: 50%; backdrop-filter: blur(8px); font-size: 28px;
  animation: compassPulse 2s ease-in-out infinite;
}
#hurricaneCompass.active { display: flex; }
@keyframes compassPulse {
  0%,100%{box-shadow:0 0 10px rgba(100,180,255,0.3)}
  50%{box-shadow:0 0 25px rgba(100,180,255,0.7)}
}
.hurricane-arrow {
  position: fixed; font-size: 24px; pointer-events: none; z-index: 5999;
  animation: arrowFade 1.5s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(100,200,255,0.8);
}
@keyframes arrowFade { 0%,100%{opacity:0.3} 50%{opacity:1} }
.hurricane-compass-arrow { font-size: 30px; line-height: 1; }
.hurricane-compass-label { font-size: 9px; letter-spacing: .08em; color: rgba(210,240,255,0.92); margin-top: 3px; }
.hurricane-lane-cell {
  position: fixed;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5997;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(140,220,255,0.30), rgba(70,150,255,0.10));
  border: 1px solid rgba(180,235,255,0.35);
  box-shadow: 0 0 18px rgba(130,210,255,0.24), inset 0 0 14px rgba(220,245,255,0.12);
  animation: hurricaneLanePulse 0.9s ease-in-out infinite;
}
@keyframes hurricaneLanePulse {
  0%,100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.02); }
}
/* Hurricane tornado overlays — subtle glow hints, 3D GLB models are the main visual */
.hurricane-tornado-mega {
  position: fixed; pointer-events: none; z-index: 6000;
  transform: translate(-50%, -50%) scale(0.5);
  filter: drop-shadow(0 0 14px rgba(140,215,255,0.35));
  opacity: 0.12;
}
.hurricane-tornado-mega.secondary {
  z-index: 5998;
  opacity: 0.08;
  transform: translate(-50%, -50%) scale(0.4);
  filter: drop-shadow(0 0 10px rgba(140,215,255,0.2));
}
.tornado-mega-core {
  width: 80px; height: 160px;
  background:
    radial-gradient(ellipse 38% 100% at 50% 50%, rgba(245,252,255,0.4) 0%, rgba(180,228,255,0.2) 20%, transparent 60%);
  animation: tornadoMegaSpin 0.09s linear infinite;
  border-radius: 24% 24% 50% 50%;
  box-shadow: 0 0 16px rgba(130,220,255,0.2);
}
@keyframes tornadoMegaSpin {
  0%{transform:skewX(-15deg) scaleX(1.30) rotate(-4deg)}
  25%{transform:skewX(10deg) scaleX(0.84) rotate(3deg)}
  50%{transform:skewX(15deg) scaleX(1.22) rotate(-2deg)}
  75%{transform:skewX(-10deg) scaleX(0.88) rotate(4deg)}
  100%{transform:skewX(-15deg) scaleX(1.30) rotate(-4deg)}
}
.hurricane-tornado-mega.titan {
  z-index: 6002;
  opacity: 0.10;
  transform: translate(-50%, -50%) scale(0.45);
  filter: drop-shadow(0 0 10px rgba(180,230,255,0.25));
}
.hurricane-tornado-mega.titan.giga {
  z-index: 6004;
  opacity: 0.06;
  transform: translate(-50%, -50%) scale(0.3);
  filter: drop-shadow(0 0 4px rgba(210,245,255,0.08));
}
.tornado-mega-core.titan {
  width: 60px; height: 120px;
  box-shadow: 0 0 10px rgba(180,230,255,0.12);
}
.tornado-mega-core.titan.giga {
  width: 40px; height: 80px;
  box-shadow: 0 0 6px rgba(210,245,255,0.06);
}
.hurricane-wind-veil {
  position: fixed;
  height: 120px;
  pointer-events: none;
  z-index: 5996;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(210,245,255,0.10) 20%, rgba(130,210,255,0.14) 50%, rgba(210,245,255,0.10) 80%, rgba(255,255,255,0.0) 100%),
    radial-gradient(circle at 50% 50%, rgba(180,235,255,0.08), rgba(80,160,255,0.03) 65%, transparent 100%);
  box-shadow: 0 0 22px rgba(140,215,255,0.12), inset 0 0 12px rgba(255,255,255,0.08);
  animation: hurricaneVeilPulse 0.52s ease-in-out infinite alternate;
}
@keyframes hurricaneVeilPulse {
  0% { opacity: 0.10; filter: blur(8px); }
  100% { opacity: 0.24; filter: blur(2px); }
}
.hurricane-wind-veil.core {
  height: 160px;
  opacity: 0.28;
  box-shadow: 0 0 36px rgba(140,215,255,0.16), inset 0 0 18px rgba(255,255,255,0.08);
}
.hurricane-wind-veil.core.giga {
  height: 120px;
  opacity: 0.12;
  box-shadow: 0 0 18px rgba(180,235,255,0.10), inset 0 0 8px rgba(255,255,255,0.05);
}
.hurricane-apoc-flash {
  animation: hurricaneApocFlash 0.42s ease-out forwards;
}
.hurricane-titan-center {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100080;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(210,245,255,0.08));
}
.hurricane-titan-center-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(245,252,255,0.10) 0%, rgba(170,225,255,0.06) 18%, rgba(90,170,255,0.03) 42%, rgba(40,110,210,0.01) 64%, rgba(255,255,255,0) 76%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.0) 0deg 24deg, rgba(220,245,255,0.03) 24deg 28deg, rgba(255,255,255,0.0) 28deg 56deg);
  animation: hurricaneTitanCenterSpin 0.78s linear infinite;
  box-shadow: 0 0 10px rgba(210,245,255,0.06), inset 0 0 8px rgba(255,255,255,0.04);
}
@keyframes hurricaneTitanCenterSpin {
  0% { transform: rotate(0deg) scale(0.94); }
  50% { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(0.94); }
}
@keyframes hurricaneApocFlash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
.hurricane-tornado-mega,
.hurricane-wind-veil {
  animation-name: hurricaneMegaPresence;
  animation-duration: 0.16s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes hurricaneMegaPresence {
  0% { margin-left: -2px; margin-top: 1px; }
  100% { margin-left: 2px; margin-top: -1px; }
}

/* ----------------------------------------------------------------
   23. ZOMBIE — Contagion HUD
   ---------------------------------------------------------------- */
#zombieContagionHUD {
  position: fixed; top: 60px; right: 14px; z-index: 600; display: none;
  align-items: center; gap: 6px; padding: 6px 12px;
  background: rgba(8,12,24,0.7); border: 1px solid rgba(80,255,100,0.3);
  border-radius: 12px; backdrop-filter: blur(8px);
  color: rgba(150,255,180,0.9); font-size: 11px; font-weight: 700;
}
#zombieContagionHUD.active { display: flex; }

/* ----------------------------------------------------------------
   24. AURAGON — Energy HUD
   ---------------------------------------------------------------- */
#auragonEnergyHUD {
  position: fixed; bottom: 60px; right: 14px; z-index: 600; display: none;
  flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px; background: rgba(8,12,24,0.7);
  border: 1px solid rgba(255,200,0,0.4); border-radius: 12px;
  backdrop-filter: blur(8px); color: rgba(255,220,100,0.9); font-size: 11px; font-weight: 700;
}
#auragonEnergyHUD.active { display: flex; }
.auragon-energy-bar { width: 80px; height: 10px; background: rgba(255,255,255,0.1);
  border-radius: 5px; overflow: hidden; }
.auragon-energy-fill { height: 100%;
  background: linear-gradient(90deg, #ff6600, #ffcc00, #ffffff);
  transition: width 0.4s ease; border-radius: 5px;
  box-shadow: 0 0 8px rgba(255,200,0,0.6); }

/* ----------------------------------------------------------------
   25. TOWER DEFENSE — Radio HUD
   ---------------------------------------------------------------- */
#towerRadioHUD {
  position: fixed; top: 10px; right: 10px; z-index: 600; display: none;
  align-items: center; gap: 10px; padding: 8px 14px;
  background: rgba(8,18,8,0.8); border: 1px solid rgba(100,200,50,0.4);
  border-radius: 12px; backdrop-filter: blur(8px);
  color: rgba(200,240,150,0.9); font-size: 13px; font-weight: 700; cursor: pointer;
}
#towerRadioHUD .radio-icon { flex-shrink: 0; }
#towerRadioHUD.active { display: flex; }
#towerRadioHUD:hover { border-color: rgba(100,255,50,0.8);
  box-shadow: 0 0 14px rgba(100,200,50,0.4); }
#towerRadioHUD.active .radio-icon svg circle[fill="#ff4444"] {
  animation: radioLED 1s ease-in-out infinite alternate;
}
@keyframes radioLED { 0%{fill:#ff4444;opacity:0.6} 100%{fill:#ff6666;opacity:1} }

/* ----------------------------------------------------------------
   26. CHAT — Tranche HUD
   ---------------------------------------------------------------- */
#chatAttackHUD {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 600; display: none; align-items: center; gap: 10px;
  padding: 6px 16px; background: rgba(8,12,24,0.7);
  border: 1px solid rgba(255,100,200,0.3); border-radius: 20px;
  backdrop-filter: blur(8px); color: rgba(255,180,220,0.9); font-size: 12px;
}
#chatAttackHUD.active { display: flex; }
#chatTrancheBtn {
  padding: 4px 14px; border-radius: 12px; border: 1px solid rgba(255,100,200,0.5);
  background: rgba(80,20,60,0.6); color: rgba(255,180,220,0.9);
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all 0.2s ease;
}
#chatTrancheBtn.ready { border-color: rgba(255,50,150,0.8);
  background: rgba(120,20,80,0.8); color: #fff;
  box-shadow: 0 0 16px rgba(255,50,150,0.5), 0 0 32px rgba(255,100,200,0.2); }

/* ----------------------------------------------------------------
   27. MANOIR — Inventory HUD
   ---------------------------------------------------------------- */
#manoirInventoryHUD {
  position: fixed; top: 60px; left: 14px; z-index: 600; display: none;
  align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(8,12,24,0.7); border: 1px solid rgba(180,140,60,0.4);
  border-radius: 12px; backdrop-filter: blur(8px);
  color: rgba(220,190,120,0.9); font-size: 13px;
}
#manoirInventoryHUD.active { display: flex; }
.manoir-key-slot { width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(180,140,60,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.manoir-key-slot.has-key { background: rgba(200,160,20,0.2);
  border-color: rgba(200,160,20,0.7); box-shadow: 0 0 8px rgba(200,160,20,0.4); }

/* ----------------------------------------------------------------
   28. WIND ARROW (Hurricane direction)
   ---------------------------------------------------------------- */
.windArrow {
  position: fixed; font-size: 20px; pointer-events: none; z-index: 5999;
  animation: windArrowFade 1.2s ease-out forwards;
  text-shadow: 0 0 8px rgba(100,200,255,0.8);
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------
   29. V41 LAYOUT — UI positioning and debug cleanup
   ---------------------------------------------------------------- */

/* Hide debug/unnecessary elements */
#debugDropdown,
#debugOverlay,
#cameraStatus,
#comboInfo,
#cinematicToggle,
#logs,
#towerCard8,
#towerGauge,
#towerHud,
.dropdown:has(#debugOverlay) {
  display: none !important;
}

#cardActions:not(.active) {
  display: none !important;
}

/* UI panel — bottom left */
#ui {
  position: fixed !important;
  left: 12px !important;
  bottom: 60px !important;
  top: auto !important;
  z-index: 15;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color: #fff;
  max-width: 200px !important;
  border: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.5);
  font-size: 12px;
}

#ui .card:first-child,
#ui .dropdown,
#ui #cancelCardBtn {
  display: none !important;
}

/* Player hand — bottom-left flush with slight margin */
#hands {
  position: fixed !important;
  bottom: 6px !important;
  left: 6px !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 70vw !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
  border: none !important;
  padding: 4px 6px !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  overflow: visible !important;
}

#hands .handPanel { width: 100%; }
#hands .handTitle { font-size: 10px; color: rgba(255,255,255,0.55); text-align: left; margin-bottom: 3px; padding-left: 2px; }
#hands .handGrid { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; justify-content: flex-start !important; }
#hands .cardItem {
  width: 50px !important; height: 72px !important; border-radius: 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important; cursor: pointer;
}
#hands .cardItem:hover {
  transform: translateY(-12px) scale(1.12) !important;
  box-shadow: 0 12px 30px rgba(100,120,255,0.35) !important;
  z-index: 200 !important;
}

/* Card description — right side */
#cardDesc {
  position: fixed !important; right: 12px !important; bottom: 100px !important;
  top: auto !important; left: auto !important; width: 200px !important;
  height: auto !important; max-height: 180px !important;
  background: transparent !important; backdrop-filter: none !important;
  border-radius: 14px !important; border: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.5);
  padding: 10px 12px !important; z-index: 20 !important; overflow-y: auto !important;
}

/* ----------------------------------------------------------------
   30. V41 TOWER BUTTON — collapsible
   ---------------------------------------------------------------- */
#towerBtn {
  position: fixed; right: 12px; bottom: 12px; z-index: 99999;
  cursor: pointer; user-select: none; transition: all 0.3s ease;
}
#towerBtn .tower-toggle {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: rgba(20,15,30,0.92); border: 2px solid rgba(140,80,255,0.3);
  border-radius: 14px; color: #ccc; font-weight: 700; font-size: 14px;
  letter-spacing: 0.06em; backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4); transition: all 0.3s ease;
}
#towerBtn.active .tower-toggle {
  background: rgba(10,40,20,0.92) !important; border-color: #00ff66 !important;
  color: #00ff88 !important;
  box-shadow: 0 0 20px rgba(0,255,100,0.25), 0 6px 20px rgba(0,0,0,0.4) !important;
}
#towerBtn .tower-toggle:hover { border-color: rgba(140,80,255,0.6); transform: scale(1.03); }
#towerBtn.active .tower-toggle:hover { border-color: #00ff88 !important; }
#towerBtn .tower-icon { font-size: 20px; }
#towerBtn .tower-ammo { font-size: 11px; color: #ffcf5a; margin-left: 4px; }
#towerBtn .tower-panel {
  display: none; margin-top: 8px; background: rgba(15,12,25,0.95);
  border: 1px solid rgba(140,80,255,0.25); border-radius: 12px;
  padding: 12px; backdrop-filter: blur(10px);
}
#towerBtn.expanded .tower-panel { display: block; animation: v41SlideUp 0.25s ease; }
@keyframes v41SlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#towerBtn .tower-panel button {
  display: block; width: 100%; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  background: rgba(255,255,255,0.05); color: #ddd; font-size: 12px;
  cursor: pointer; transition: all 0.15s; text-align: left;
}
#towerBtn .tower-panel button:hover { background: rgba(255,200,100,0.15); border-color: rgba(255,200,100,0.4); }
#towerBtn .tower-panel button:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   31. V41 GIANT TORNADO FX
   ---------------------------------------------------------------- */
.v41-giant-tornado {
  position: fixed; pointer-events: none; z-index: 99998;
  width: 1400px; height: 2000px; animation: v41TornadoTraverse 3s ease-in-out forwards;
}
.v41-giant-tornado-inner {
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at 50% 60%, rgba(120,210,255,0.7) 0%, rgba(80,180,240,0.5) 15%, rgba(60,150,220,0.35) 30%, rgba(40,120,200,0.2) 50%, transparent 70%);
  animation: v41TornadoSpin 0.4s linear infinite; border-radius: 40% 40% 20% 20%;
  filter: blur(2px);
  box-shadow: 0 0 200px rgba(100,200,255,0.6), 0 0 400px rgba(80,180,230,0.4), inset 0 0 200px rgba(255,255,255,0.25);
}
.v41-tornado-debris {
  position: absolute; width: 24px; height: 24px; background: rgba(200,230,255,0.8);
  border-radius: 50%; animation: v41DebrisSpin 0.6s linear infinite;
}
@keyframes v41TornadoSpin { 0%{transform:rotate(0deg) scaleX(1)} 25%{transform:rotate(90deg) scaleX(0.85)} 50%{transform:rotate(180deg) scaleX(0.9)} 75%{transform:rotate(270deg) scaleX(0.85)} 100%{transform:rotate(360deg) scaleX(1)} }
@keyframes v41TornadoTraverse { 0%{opacity:0;transform:scale(0.5) translateY(100px)} 15%{opacity:1;transform:scale(1) translateY(0)} 85%{opacity:1;transform:scale(1.1) translateY(-20px)} 100%{opacity:0;transform:scale(0.8) translateY(-80px)} }
@keyframes v41DebrisSpin { 0%{transform:rotate(0deg) translateX(160px);opacity:1} 50%{transform:rotate(180deg) translateX(320px);opacity:0.6} 100%{transform:rotate(360deg) translateX(160px);opacity:1} }

/* ----------------------------------------------------------------
   32. V41 COMMANDER HUD
   ---------------------------------------------------------------- */
#v41CommanderHUD {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(10,12,20,0.85); backdrop-filter: blur(10px);
  padding: 6px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 13px; font-weight: 600; z-index: 99999;
  display: flex; gap: 16px; align-items: center; pointer-events: none;
}
#v41CommanderHUD .cmd-stat { display: flex; align-items: center; gap: 4px; }
#v41CommanderHUD .cmd-w { color: #aaccff; }
#v41CommanderHUD .cmd-b { color: #ffaacc; }
#v41CommanderHUD .cmd-kills { color: #ff6666; }

/* ----------------------------------------------------------------
   33. V41 TARGET UI (missile targeting modal)
   ---------------------------------------------------------------- */
#v41TargetUI {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(15,12,25,0.98); border: 2px solid rgba(255,100,100,0.5);
  border-radius: 16px; padding: 20px; z-index: 100002;
  backdrop-filter: blur(12px); box-shadow: 0 0 40px rgba(0,0,0,0.6); display: none;
}

/* ----------------------------------------------------------------
   34. DONJON HUD
   ---------------------------------------------------------------- */
#donjonHUD {
  position: fixed; top: 12px; right: 12px; z-index: 10000;
  background: rgba(8,12,24,0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  padding: 10px 16px; color: #fff; font-family: monospace; font-size: 14px;
  min-width: 180px;
}

/* ----------------------------------------------------------------
   35. SPECTATOR MODE HUD
   ---------------------------------------------------------------- */
#spectatorHUD {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: rgba(5,8,18,0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 10px 24px;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-align: center;
  pointer-events: auto;
  min-width: 260px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 60px rgba(80,120,255,0.08);
}
#spectatorHUD .spec-top {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(180,200,255,0.7);
  margin-bottom: 6px;
}
#spectatorHUD .spec-info {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
#spectatorHUD .spec-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
#spectatorHUD .spec-w { color: #bbddff; }
#spectatorHUD .spec-b { color: #ffbbcc; }
#spectatorHUD .spec-vs { color: rgba(255,255,255,0.3); font-size: 12px; font-weight: 400; }
#spectatorHUD .spec-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#spectatorHUD .spec-controls button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
#spectatorHUD .spec-controls button:hover {
  background: rgba(255,255,255,0.18);
}
#spectatorHUD .spec-controls #specSpeed {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  min-width: 32px;
}

/* ================================================================
   36. LAYOUT PROFESSIONNEL — Harmonisation globale
   Zones:
   ┌─────────────────────────────────────────────┐
   │  v35ProHUD (barre pleine, h=48px)           │  z:1000
   ├──────────┬──────────────────────┬────────────┤
   │ status   │   spectatorHUD /     │  modeHUD   │  z:600-800
   │ top-left │   modeBadge center   │  top-right │
   │          │                      │            │
   │          │                      │  cardDesc  │
   │          │     BOARD 3D         │  cardAct.  │
   │          │                      │            │
   │          │                      │  towerBtn  │
   ├──────────┴──────────────────────┴────────────┤
   │  hands (cartes) — bottom center              │  z:50
   └─────────────────────────────────────────────┘
   ================================================================ */

/* --- v35ProHUD: barre fixe en haut, pleine largeur, h=48px --- */
#v35ProHUD {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 48px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
}

/* --- Spectator HUD: sous le v35ProHUD, centré --- */
#spectatorHUD {
  top: 56px !important;
  z-index: 800 !important;
}

/* --- fxTopMenu: sous la barre, centré ou droit --- */
#fxTopMenu {
  position: fixed !important;
  top: 56px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
}

/* --- Status: bas-gauche, compact --- */
#status {
  position: fixed !important;
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important; right: auto !important;
  transform: none !important;
  max-width: 340px !important;
  z-index: 200 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
}

/* --- Mains de cartes: bas-centre --- */
#hands {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
}

/* --- Card desc: milieu-droite --- */
#cardDesc {
  position: fixed !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  bottom: auto !important; left: auto !important;
  max-height: 40vh !important;
  width: 220px !important;
  z-index: 400 !important;
  overflow-y: auto !important;
}

/* --- Card actions: juste sous cardDesc --- */
#cardActions {
  position: fixed !important;
  top: calc(50% + 22vh) !important;
  right: 12px !important;
  bottom: auto !important; left: auto !important;
  z-index: 410 !important;
}

/* --- Tower panel: juste en-dessous de la radio --- */
#towerPanel {
  position: fixed !important;
  top: 110px !important;
  bottom: auto !important;
  right: 10px !important;
  left: auto !important;
  z-index: 40000 !important;
}
#towerBtn { display: none !important; }

/* --- MODE HUDS: tous top-right sous v35ProHUD (mutuellement exclusifs) --- */
#bombThermoHUD,
#hurricaneCompass,
#zombieContagionHUD,
#auragonCardCount,
#auragonEnergyHUD,
#towerRadioHUD,
#chatAttackHUD,
#manoirInventoryHUD {
  position: fixed !important;
  top: 56px !important;
  right: 14px !important;
  left: auto !important; bottom: auto !important;
  z-index: 600 !important;
  transform: none !important;
}

/* Auragon energy: en-dessous du auragonCardCount */
#auragonEnergyHUD {
  top: 110px !important;
}

/* Chat HUD: top-right comme les autres modes */

/* Commander HUD: bas-centre au-dessus des mains */
#commanderHUD {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important; right: auto !important;
  z-index: 600 !important;
}

/* v41 Commander HUD: même position */
#v41CommanderHUD {
  top: 56px !important;
  z-index: 700 !important;
}

/* Donjon HUD: top-right sous barre */
#donjonHUD {
  position: fixed !important;
  top: 56px !important;
  right: 14px !important;
  z-index: 700 !important;
}

/* Manoir HUD: top-left sous barre */
#v38ManoirHUD {
  position: fixed !important;
  top: 56px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 700 !important;
}

/* Tower radio: top-right comme les autres modes */

/* Manoir inventory: top-right comme les autres modes */

/* --- AI Thinking: bas-centre, au-dessus du status --- */
.ai-thinking {
  position: fixed !important;
  bottom: 48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important; top: auto !important;
  z-index: 300 !important;
}

/* --- Pause menu: plein écran le plus haut --- */
#pauseMenu { z-index: 50000 !important; }
#v35ScoreScreen { z-index: 50001 !important; }

/* --- FX: au-dessus du board, sous les HUDs --- */
.v41-giant-tornado { z-index: 5000 !important; }
.hurricane-tornado { z-index: 5000 !important; }
.bomb-drop { z-index: 5000 !important; }
.bomb-explode { z-index: 5001 !important; }
.tower-missile-fx { z-index: 60002 !important; }
.tower-missile-explosion { z-index: 60003 !important; }

/* --- Start menu: centré, au-dessus de tout sauf pause --- */
#startMenu {
  z-index: 9000 !important;
}

/* --- Mode badge: sous v35ProHUD, centré --- */
#modeBadge {
  position: fixed !important;
  top: 52px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
}

/* --- Responsive: empêcher les HUDs de sortir de l'écran --- */
@media (max-width: 768px) {
  #spectatorHUD {
    max-width: 90vw !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  #donjonHUD {
    max-width: 45vw !important;
    font-size: 11px !important;
  }
  #cardDesc {
    top: auto !important;
    bottom: 80px !important;
    right: 8px !important;
    transform: none !important;
    max-height: 30vh !important;
    width: min(200px, 45vw) !important;
  }
  #cardActions {
    top: auto !important;
    bottom: 60px !important;
  }
  #towerPanel {
    top: 110px !important;
    right: 8px !important;
  }
}

/* ================================================================
   PANNEAUX TRANSPARENTS — Override final
   Tous les panneaux UI deviennent totalement transparents
   pour une meilleure lisibilité et immersion.
   ================================================================ */
#ui,
#hands,
#cardDesc,
#cardActions,
#logs,
#fxTopMenu,
#status,
#cameraStatus,
#modeIndicator,
#modeBadge,
#uiToggleHint,
#bombCountdown,
#comboGauge,
#commanderHUD,
#jokerMenu,
#stealMenu,
#counter8Menu,
#swapConfirmBox,
.story-content {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Lisibilité texte sur fond transparent */
#ui,
#hands,
#cardDesc,
#cardActions,
#logs,
#status,
#modeIndicator,
#modeBadge,
#commanderHUD,
#comboGauge,
#fxTopMenu {
  text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6) !important;
}

/* Boutons gardent un fond léger pour rester cliquables */
#cardActions .btn,
#cardPlayBtn,
#cardCancelBtn,
#fxTopMenu select,
#fxTopMenu button,
#musicPlayer button {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
}

/* Tous les HUD spéciaux — transparent (sauf towerBtn et towerStrikeUI) */
#v41CommanderHUD,
#v35ProHUD,
#spectatorHUD,
#donjonHUD,
#v41TowerBtn,
#v35TurnBadge,
#autoControls3H,
.handPanel,
.ai-thinking,
.v35-score-overlay,
.v35-tower-minimap,
#pauseMenuPanel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}