/* Désactiver le double tap zoom et la sélection de texte globalement */
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            touch-action: manipulation;
        }
        
        /* Permettre la sélection uniquement dans les champs de saisie */
        input, textarea {
            -webkit-user-select: text;
            -khtml-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }

        /* Menu contextuel des bâtiments */
        .building-context-menu {
            position: absolute;
            z-index: 9999;
            background-color: #1f2937;
            border: 1px solid #00FF00;
            border-radius: 4px;
            padding: 4px 0;
            min-width: 150px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
            color: #e5e7eb;
            font-family: 'Courier New', Courier, monospace; /* Style terminal */
        }
        
        .building-context-menu-item {
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s;
        }
        
        .building-context-menu-item:hover {
            background-color: #374151;
            color: #00FF00;
        }
        
        .building-context-menu-item span {
            font-size: 1.2em;
        }
        
        .building-context-menu-separator {
            height: 1px;
            background-color: #374151;
            margin: 4px 0;
        }
        
        .building-context-menu-item.danger {
            color: #ef4444;
        }
        
        .building-context-menu-item.danger:hover {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ff0000;
        }
        
        .bg-white.text-gray-800 {
            background-color: #1f2937 !important;
            color: #00FF00 !important;
            border: 1px solid #00FF00 !important;
        }
        /* .bg-blue-600 {
            background-color: #00FF00 !important;
        }
        .hover\:bg-blue-700:hover {
            background-color: #00FF00 !important;
        } */
        .bg-yellow-600 {
            background-color: #00FF00 !important;
        }
        .hover\:bg-yellow-700:hover {
            background-color: #00FF00 !important;
        }
        .bg-yellow-500 {
            background-color: #00FF00 !important;
            color: black !important;
        }
        .text-yellow-400 {
            color: #00FF00 !important;
        }
        .text-cyan-400 {
            color: #00FF00 !important;
        }
        .border-green-400 {
             border-color: #00FF00 !important;
        }
        .other-owned-church-icon-glow {
            filter: drop-shadow(0 0 5px #00FF00) drop-shadow(0 0 10px #00FF00) !important;
        }
        .reward-toast {
            color: #00FF00 !important;
            border: 2px solid #00FF00 !important;
        }
        .border-yellow-500 {
            border-color: #00FF00 !important;
        }
        
        #combat-preview-full-combat-btn {
            background-color: #00FF00 !important;
        }
        #combat-preview-full-combat-btn:hover {
            background-color: #00FF00 !important;
        }

        /* === COULEURS VERTES FORCÉES À #00FF00 === */
        .text-green-500, .text-green-400, .text-green-600 {
            color: #00FF00 !important;
        }
        .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900 {
            background-color: #00FF00 !important;
        }
        /* Text noir sur fond vert pour la lisibilité */
        .bg-green-500:not(.text-white), 
        .bg-green-600:not(.text-white), 
        .bg-green-700:not(.text-white), 
        .bg-green-800:not(.text-white), 
        .bg-green-900:not(.text-white) {
            color: black !important;
        }
        .hover\:bg-green-500:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-green-800:hover {
            background-color: #00FF00 !important;
        }
        /* Text noir sur fond vert en hover */
        .hover\:bg-green-500:hover:not(.text-white),
        .hover\:bg-green-600:hover:not(.text-white),
        .hover\:bg-green-700:hover:not(.text-white),
        .hover\:bg-green-800:hover:not(.text-white) {
            color: black !important;
        }
        .hover\:text-green-500:hover {
            color: #00FF00 !important;
        }
        .border-green-500, .border-green-600, .border-green-700 {
            border-color: #00FF00 !important;
        }
        .ring-green-500 {
            --tw-ring-color: #00FF00 !important;
        }
        
        *{
            font-family: monospace;
        }
        .leaflet-container { outline: 0; }
        .leaflet-popup-content-wrapper { background-color: #1f2937; color: #d1d5db; border-radius: 0.5rem; }
        .leaflet-popup-content { margin: 1rem; }
        .leaflet-popup-tip { background: #1f2937; }
        .leaflet-popup-close-button { color: #d1d5db !important; }

        /* Filtres jour/nuit pour la carte */
        #map {
            transition: filter 1s ease-in-out;
        }
        
        #map.day-mode {
            filter: brightness(1.1) contrast(1.05) saturate(1.2);
        }
        
        #map.night-mode {
            filter: brightness(0.6) contrast(1.3) saturate(0.8) grayscale(0.3);
        }

        /* Mode fantaisie héroïque pour un rendu plus immersif */
        #map.fantasy-mode {
            filter: brightness(1.15) contrast(1.2) saturate(1.4) sepia(0.15) hue-rotate(10deg);
        }

        /* Effet de texture supplémentaire pour le mode fantaisie */
        #map.fantasy-mode .leaflet-tile-pane {
            mix-blend-mode: multiply;
        }

        /* Rendu magique pour les tuiles */
        #map.fantasy-mode .leaflet-tile {
            border-radius: 2px;
            box-shadow: inset 0 0 3px rgba(139, 69, 19, 0.2);
        }
        
        /* Mode automatique géré dynamiquement par JavaScript via --item-size / --item-cols (max 6) */
        #inventory-grid {
            grid-template-columns: repeat(var(--item-cols, 4), var(--item-size, 80px));
            justify-content: center;
        }

        /* Grilles de magasin avec même taille que l'inventaire (max 6 colonnes) */
        #shopSellGrid,
        #shopBuyGrid {
            grid-template-columns: repeat(var(--item-cols, 4), var(--item-size, 80px));
            justify-content: center;
        }

        /* Codex / bestiaire : max 6 colonnes, cases carrées, image entière (pas de crop) */
        #bestiary-cards-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }
        @media (min-width: 640px) {
            #bestiary-cards-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }
        @media (min-width: 768px) {
            #bestiary-cards-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }
        }
        .bestiary-monster-card {
            width: 100%;
            min-width: 0;
        }
        .bestiary-monster-frame {
            width: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .bestiary-monster-img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        .inventory-item {
            border: 2px solid #3b82f6;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s;
            position: relative;
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            user-select: none;
            max-block-size: fit-content;
        }
        .inventory-item:hover { transform: scale(1.1); }
        
        /* ✅ Désactiver complètement les interactions par défaut du navigateur sur les images d'inventaire */
        .inventory-item img {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
            pointer-events: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        /* ✅ Règle globale pour désactiver le menu contextuel sur toutes les images d'objets du jeu */
        .inventory-item img,
        .floating-text img,
        .sucked-item-animation img,
        .reward-item img,
        .context-menu img,
        [class*="item"] img {
            -webkit-touch-callout: none !important;
            -webkit-user-select: none !important;
            -khtml-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-user-drag: none !important;
            user-drag: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        
        /* ✅ Désactivation globale du touch callout sur tout le document pour éviter les menus contextuels indésirables */
        * {
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        /* ✅ Réactiver la sélection pour le texte important seulement */
        input, textarea, .selectable-text {
            -webkit-touch-callout: initial !important;
            -webkit-user-select: text !important;
            user-select: text !important;
        }
        
        /* Style pour griser les items non utilisables dans le biome actuel */
        .inventory-item.grayscale {
            filter: grayscale(100%) opacity(0.5);
            cursor: not-allowed;
        }
        .inventory-item.grayscale:hover { transform: none; }
        
        /* Styles pour les halos de rareté des objets */
        .rarity-rare {
            position: relative;
        }
        .rarity-epic {
            position: relative;
        }
        .rarity-exotic {
            position: relative;
        }
        .rarity-legendary {
            position: relative;
        }
        .rarity-mythic {
            position: relative;
        }
        .rarity-mythic-glow {
            animation: mythic-glow 1.5s ease-in-out infinite alternate;
        }
        
        .rarity-mythic-glow-reduced {
            animation: mythic-glow-reduced 1.5s ease-in-out infinite alternate;
        }
        
        @keyframes mythic-glow {
            0% {
                filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 12px #ffffff);
            }
            100% {
                filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 18px #ffffff);
            }
        }
        
        @keyframes mythic-glow-reduced {
            0% {
                filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #ffffff);
            }
            100% {
                filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #ffffff);
            }
        }
        
        .item-icon { font-size: 1.5rem; }
        .item-quantity {
            position: absolute; top: 2px; right: 4px; font-size: 0.75rem; font-weight: bold;
            background-color: rgba(0,0,0,0.5); padding: 0 4px; border-radius: 4px;
        }
        .trade-grid-container { display: grid; grid-template-rows: auto 1fr; gap: 0.5rem; }
        .map-item-icon {
            font-size: 24px;
            text-shadow: 0 0 5px black;
            cursor: pointer;
        }
        .church-icon {
            font-size: 28px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        .rc-marker-desaturated img,
        .church-icon.rc-marker-desaturated img {
            filter: grayscale(1) brightness(0.78) contrast(0.95);
            opacity: 0.88;
            transition: filter 0.35s ease, opacity 0.35s ease;
        }
        .owned-church-icon-glow {
             filter: drop-shadow(0 0 3px gold) drop-shadow(0 0 8px rgb(34 197 94 / var(--tw-bg-opacity, 1))) drop-shadow(0 0 15px rgb(34 197 94 / var(--tw-bg-opacity, 1)));
        }
        .other-owned-church-icon-glow {
            filter: drop-shadow(0 0 5px #f97316) drop-shadow(0 0 10px #f97316);
        }

        /* Centres de recherche H4 — modale réservoir moderne */
        .rc-modal-box {
            width: 100%;
            max-width: 22rem;
            margin: 0 1rem;
            padding: 1.25rem 1.25rem 1rem;
            border-radius: 1rem;
            color: #e2e8f0;
            background:
                radial-gradient(ellipse at top, rgba(34, 211, 238, 0.12), transparent 55%),
                linear-gradient(165deg, #0b1220 0%, #020617 100%);
            border: 1px solid rgba(103, 232, 249, 0.28);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.8);
        }
        .rc-modal-kicker {
            margin: 0;
            font-size: 0.7rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #67e8f9;
            opacity: 0.85;
        }
        .rc-modal-place {
            margin: 0.2rem 0 0;
            font-size: 1.05rem;
            font-weight: 700;
            color: #f8fafc;
            line-height: 1.25;
        }
        .rc-reservoir-panel {
            --rc-accent: #22d3ee;
            --rc-accent-glow: rgba(34, 211, 238, 0.45);
            margin: 1.1rem 0 0.85rem;
            padding: 1rem 0.85rem 0.9rem;
            border-radius: 0.9rem;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(148, 163, 184, 0.18);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.85rem;
        }
        .rc-dose-title {
            margin: 0;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1.35;
        }
        .rc-dose-title.rc-dose-ready {
            text-shadow: 0 0 12px var(--rc-accent-glow);
        }
        .rc-tank {
            position: relative;
            width: 78px;
            height: 168px;
            border-radius: 999px;
            border: 2px solid #67e8f9;
            background:
                linear-gradient(180deg, rgba(2, 6, 23, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%);
            overflow: hidden;
            box-shadow:
                inset 0 0 18px rgba(0, 0, 0, 0.55),
                0 0 18px var(--rc-accent-glow);
        }
        .rc-tank-marks {
            position: absolute;
            inset: 12px 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            pointer-events: none;
            z-index: 2;
            opacity: 0.35;
        }
        .rc-tank-marks span {
            display: block;
            height: 1px;
            width: 18px;
            background: #cbd5e1;
            margin-left: auto;
        }
        .rc-liquid {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 0%;
            transition: height 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            border-radius: 0 0 999px 999px;
            z-index: 1;
        }
        .rc-liquid-surface {
            position: absolute;
            top: -2px;
            left: -8%;
            right: -8%;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.35);
            animation: rc-wave 2.4s ease-in-out infinite;
        }
        .rc-liquid.rc-liquid-ready .rc-liquid-surface {
            animation-duration: 1.4s;
            background: rgba(255, 255, 255, 0.5);
        }
        .rc-tank-gloss {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.16) 0%,
                transparent 28%,
                transparent 72%,
                rgba(255, 255, 255, 0.08) 100%
            );
        }
        .rc-pct-badge {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
            min-width: 3.1rem;
            padding: 0.2rem 0.45rem;
            text-align: center;
            font-size: 0.78rem;
            font-weight: 700;
            border-radius: 999px;
            border: 1px solid #67e8f9;
            color: #67e8f9;
            background: rgba(2, 6, 23, 0.72);
            backdrop-filter: blur(4px);
            pointer-events: none;
        }
        .rc-time-remaining {
            margin: 0;
            text-align: center;
            font-size: 0.82rem;
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
        }
        .rc-time-remaining.rc-time-ready {
            color: #67e8f9;
        }
        .rc-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        .rc-btn {
            padding: 0.55rem 0.95rem;
            border-radius: 0.65rem;
            font-size: 0.875rem;
            font-weight: 600;
            border: 1px solid transparent;
            cursor: pointer;
            transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
        }
        .rc-btn:active:not(:disabled) {
            transform: scale(0.98);
        }
        .rc-btn-ghost {
            background: rgba(51, 65, 85, 0.85);
            color: #e2e8f0;
            border-color: rgba(148, 163, 184, 0.25);
        }
        .rc-btn-ghost:hover {
            background: rgba(71, 85, 105, 0.95);
        }
        .rc-btn-primary {
            background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
            color: #0f172a;
            border-color: rgba(103, 232, 249, 0.5);
        }
        .rc-btn-primary:hover {
            filter: brightness(1.06);
        }
        .rc-btn-danger {
            background: rgba(153, 27, 27, 0.9);
            color: #fee2e2;
            border-color: rgba(248, 113, 113, 0.35);
        }
        .rc-btn-disabled,
        .rc-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            filter: none;
        }
        @keyframes rc-wave {
            0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.85; }
            50% { transform: translateY(2px) scaleX(1.04); opacity: 1; }
        }

        @keyframes float-up {
            0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -60px) scale(0.8); }
        }
        .floating-text {
            position: absolute;
            bottom: 140px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 1.1rem;
            font-weight: bold;
            text-shadow: 1px 1px 3px black;
            padding: 4px 10px;
            border-radius: 12px;
            pointer-events: none;
            z-index: 1000;
            animation: float-up 2s ease-out forwards;
        }

        @keyframes shockwave-animation {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 1;
            }
            80% {
                opacity: 0.5;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0;
            }
        }

        .shockwave-effect-faith {
            position: absolute;
            border-radius: 50%;
            width: 1000px;
            height: 1000px;
            background-color: white;
            box-shadow: 0 0 20px #facc15, inset 0 0 15px #fde047;
            pointer-events: none;
            z-index: 450;
            animation: shockwave-animation 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        .shockwave-effect-radar {
            position: absolute;
            border-radius: 50%;
            width: 2000px;
            height: 2000px;
            background-color: rgba(45, 212, 191, 0.5);
            box-shadow: 0 0 20px rgba(45, 212, 191, 1), inset 0 0 15px rgba(255, 255, 255, 0.5);
            pointer-events: none;
            z-index: 450;
            animation: shockwave-animation 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        @keyframes shrink-animation {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0.3;
            }
        }

        .shockwave-effect-magnet {
            position: absolute;
            border-radius: 50%;
            width: 4000px;
            height: 4000px;
            background-color: black;
            box-shadow: 0 0 20px black, black;
            pointer-events: none;
            z-index: 450;
            animation: shrink-animation 1s cubic-bezier(0.75, 0, 0.25, 1) forwards;
        }

        .shockwave-effect-bomb {
            position: absolute;
            border-radius: 50%;
            width: 1000px; /* Diamètre cible de 4km */
            height: 1000px;
            background-color: orange;
            box-shadow: 0 0 20px orangered, inset 0 0 15px orangered;
            pointer-events: none;
            z-index: 450;
            animation: shockwave-animation 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        @keyframes screen-shake-animation {
          0% { transform: translate(3px, 3px); filter:brightness(1.0); }
          10% { transform: translate(-3px, -6px);filter:brightness(1.05); }
          20% { transform: translate(-9px, 0px);filter:brightness(1.1); }
          30% { transform: translate(9px, 6px);filter:brightness(1.15); }
          40% { transform: translate(3px, -3px);filter:brightness(1.2); }
          50% { transform: translate(-3px, 6px);filter:brightness(1.25); }
          60% { transform: translate(-9px, 3px);filter:brightness(1.2); }
          70% { transform: translate(9px, 3px);filter:brightness(1.15); }
          80% { transform: translate(-3px, -3px);filter:brightness(1.1); }
          90% { transform: translate(3px, 6px);filter:brightness(1.05); }
          100% { transform: translate(0, 0); filter:brightness(1.0);}
      }

        .screen-shake {
            animation: screen-shake-animation 0.5s;
        }

        .sucked-item-animation {
            position: absolute;
            font-size: 24px;
            z-index: 1001;
            pointer-events: none;
            text-shadow: 0 0 5px black;
            transform-origin: center center;
            transition: top 1s ease-in,
                        left 1s ease-in,
                        transform 1s ease-in,
                        opacity 1s ease-in;
        }

        .shop-icon-glow {
            filter: drop-shadow(0 0 1px var(--shop-color)) drop-shadow(0 0 1px var(--shop-color)) drop-shadow(0 0 1px var(--shop-color));
        }
        .quest-item {
          background-color: #1f2937; padding: 1rem; border-radius: 0.5rem;
          border-left: 4px solid #4b5563; /* Gris par défaut */
      }
      .quest-item.completed {
          border-left-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); /* green pour les quêtes terminées */
      }
      .quest-progress-bg {
          background-color: #374151; border-radius: 9999px; height: 0.75rem; overflow: hidden;
      }
      .quest-progress-bar {
          background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); height: 100%; border-radius: 9999px;
          transition: width 0.5s ease-in-out;
      }
      @keyframes reward-float-up {
          0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
          100% { opacity: 0; transform: translate(-50%, -150px) scale(1.2); }
      }
      .reward-toast {
          position: fixed; /* Fixé par rapport à la fenêtre */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #facc15; /* Jaune/Or pour les récompenses */
          font-size: 1.5rem; /* Plus grand */
          font-weight: bold;
          text-shadow: 2px 2px 4px black;
          padding: 8px 16px;
          border-radius: 16px;
          pointer-events: none;
          z-index: 60;
          animation: reward-float-up 2s ease-out forwards;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          background-color: rgba(23, 37, 51, 0.7);
          border: 2px solid #facc15;
      }

      /* === ANIMATIONS MIRADOR AMÉLIORÉES === */
      @keyframes miradorEnhancedFlash {
          0% { 
              transform: scale(0.5); 
              opacity: 0.7;
              filter: brightness(1.5) blur(2px);
          }
          50% { 
              transform: scale(1.2); 
              opacity: 1;
              filter: brightness(1.3) blur(0px);
          }
          100% { 
              transform: scale(0.8); 
              opacity: 0;
              filter: brightness(1) blur(1px);
          }
      }

      @keyframes projectileEnhancedShoot {
          0% {
              transform: scale(0.3) rotate(0deg);
              opacity: 0.8;
              filter: brightness(2);
          }
          15% {
              transform: scale(1.1) rotate(45deg);
              opacity: 1;
              filter: brightness(1.5);
          }
          85% {
              transform: scale(0.9) rotate(315deg);
              opacity: 1;
              filter: brightness(1.2);
          }
          100% {
              transform: scale(0.4) rotate(360deg);
              opacity: 0;
              filter: brightness(0.8);
          }
      }

      /* Styles pour les projectiles améliorés */
      .enhanced-projectile-level-1 {
          background: radial-gradient(circle, #ffff00 0%, #ff6600 60%, #ff0000 100%);
          box-shadow: 0 0 8px #ffff00, 0 0 16px #ff6600;
      }
      
      .enhanced-projectile-level-2 {
          background: radial-gradient(circle, #ffaa00 0%, #ff4400 50%, #cc0000 100%);
          box-shadow: 0 0 12px #ffaa00, 0 0 24px #ff4400;
      }
      
      .enhanced-projectile-level-3 {
          background: radial-gradient(circle, #ff6600 0%, #ff0044 40%, #880088 100%);
          box-shadow: 0 0 16px #ff6600, 0 0 32px #ff0044;
      }
      
      .enhanced-projectile-level-4 {
          background: radial-gradient(circle, #ff0066 0%, #aa0088 30%, #4400aa 100%);
          box-shadow: 0 0 20px #ff0066, 0 0 40px #aa0088, 0 0 60px #4400aa;
      }
      
      .enhanced-projectile-level-5 {
          background: radial-gradient(circle, #ffffff 0%, #ff0088 20%, #8800ff 60%, #000088 100%);
          box-shadow: 0 0 25px #ffffff, 0 0 50px #ff0088, 0 0 75px #8800ff;
          border: 1px solid #ffffff;
      }

      /* Styles pour le mode de sélection mirador */
      .leaflet-crosshair {
          cursor: crosshair !important;
      }

      .leaflet-crosshair * {
          cursor: crosshair !important;
      }

      /* Styles pour l'aperçu du mirador */
      .mirador-preview-marker, .machine-preview-marker {
          background: transparent !important;
          border: none !important;
      }

      .mirador-placement-popup .leaflet-popup-content-wrapper {
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      }

      .mirador-placement-popup .leaflet-popup-content {
          margin: 8px;
          min-width: 200px;
      }
      .xp-bar-container {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 16px;
          background-color: #000000; /* Fond sombre pour la barre */
          pointer-events: auto; /* Permet les clics si jamais vous ajoutez des infos dessus */
      }
      .xp-bar-text {
          position: absolute;
          width: 100%;
          text-align: center;
          line-height: 16px;
          color: white;
          font-size: 0.8rem;
          font-weight: bold;
          text-shadow: 1px 1px 2px black;
          z-index: 1; /* Pour être au-dessus de la barre de progression */
          transition: opacity 0.4s ease;
      }
      @keyframes skillPointPulse {
          0%, 100% { transform: scale(1); text-shadow: 0 0 8px rgba(0,255,0,0.6), 1px 1px 2px black; }
          50% { transform: scale(1.05); text-shadow: 0 0 14px rgba(0,255,0,0.9), 0 0 28px rgba(0,255,0,0.4), 1px 1px 2px black; }
      }
      .xp-bar-skill-msg {
          color: #00ff00 !important;
          animation: skillPointPulse 1.5s ease-in-out infinite;
      }
      #combat-roll-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.75);
            z-index: 100;
            pointer-events: none;
            /*backdrop-filter: blur(2px);*/
        }

                .roll-display {
            /* Style de fenêtre de terminal pour l'animation d'initiative */
            width: 50vw;
            max-width: 300px;
            height: 50vw;
            max-height: 300px;
            overflow: hidden;
            font-size: 150px;

            padding: 0;
            text-align: center;
            border: 4px solid rgb(0,255,0);
            color: white;
            background: black;
            font-weight: bold;
            text-shadow: 0 0 15px black;
            transform: scale(0);
            opacity: 0;
            transition: color 0.3s, border-color 0.3s;
            
            /* Centrage parfait du contenu */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* (NOUVEAU) La colonne de chiffres qui va défiler */
        .roll-scroller {
            display: flex;
            flex-direction: column;
            /* L'animation se fera sur la propriété 'transform' */
            transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* (NOUVEAU) Style pour le curseur clignotant */
        .blinking-cursor-roll::after {
            content: '█';
            font-family: monospace;
            animation: blinking-cursor-anim 1s infinite;
            margin-left: 0.5rem;
        }


        /* Nouvelles classes de couleur pour le résultat */
        .roll-win {
            color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); /* green */
            border-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
        }
        .roll-lose {
            color: #f87171; /* Rouge */
            border-color: #f87171;
        }
        .roll-critical {
            color: rgb(0,255,0); /* Vert vif */
            border-color: rgb(0,255,0);
            /* Un halo lumineux et vert pour un effet puissant */
            filter: drop-shadow(0 0 5px rgb(0,255,0)) drop-shadow(0 0 15px rgb(0,255,0)); 
        }

        @keyframes monster-image-reveal {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .animate-monster-reveal {
            animation: monster-image-reveal 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* Animation de tremblement pour Ultra Boss - 17 secondes */
        @keyframes ultra-boss-shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
            20%, 40%, 60%, 80% { transform: translateX(2px); }
        }
        
        .ultra-boss-shake {
            animation: ultra-boss-shake 0.5s ease-in-out infinite;
        }

        /* Animation d'apparition */
        .animate-roll-reveal {
            animation: roll-reveal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* NOUVELLE animation de rebond */
        .animate-rebound {
            animation: roll-rebound 0.5s ease-out;
        }
        .animate-disappear {
            animation: roll-disappear 0.3s ease-in forwards;
        }

        /* NOUVEAU : Keyframes pour l'animation de disparition */
        @keyframes roll-disappear {
            from {
                transform: scale(1);
                opacity: 1;
            }
            to {
                transform: scale(0.5);
                opacity: 0;
            }
        }

        @keyframes roll-reveal-pop {
            0% { transform: scale(0.5); opacity: 0.5; }
            80% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes roll-rebound {
            0% { transform: scale(1); }
            50% { transform: scale(1.4); }
            100% { transform: scale(1); }
        }

        @keyframes roll-reveal {
            0% { transform: scale(0.5); opacity: 0.5; }
            80% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes monster-idle-animation {
            0% { transform: translate(0, 0); }
            25% { transform: translate(0.2px, -0.3px); }
            50% { transform: translate(0, -0.5px); }
            75% { transform: translate(-0.2px, -0.3px); }
            100% { transform: translate(0, 0); }
        }

        /* On applique l'animation au conteneur de l'icône du monstre */
        /* Le animation-delay est défini en JS pour désynchroniser chaque monstre */
        .monster-icon-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 15px;
            animation: monster-idle-animation 4s ease-in-out infinite;
            /* animation-delay est défini inline par createMonsterMarker() pour chaque monstre */
        }
        /* Overlay quête focus_quest : taille fixe (Tailwind preflight img{max-width:100%} la plaquait sur la largeur du sprite) */
        .monster-icon-container img.monster-quest-focus-overlay {
            max-width: none !important;
            width: var(--quest-focus-size, 80px) !important;
            height: var(--quest-focus-size, 80px) !important;
            min-width: var(--quest-focus-size, 80px);
            min-height: var(--quest-focus-size, 80px);
            object-fit: contain;
            box-sizing: border-box;
        }
        .monster-hp-bar-bg {
            width: 40px;
            height: 6px;
            background-color: #4b5563; /* Fond gris sombre */
            border: 1px solid black;
            border-radius: 3px;
            margin-bottom: 2px;
        }
        .monster-hp-bar {
            height: 100%;
            background-color: #44ff44; /* Vert par défaut ; JS pose rouge/orange selon % */
            border-radius: 2px;
            transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
        }

        /* NOUVEAU : Style pour le texte du niveau */
        .monster-level-text {
            position: absolute;
            top: 2px;
            color: #000000;
            font-size: 12px;
            font-weight: bold;
            border-radius: 3px;
            line-height: 1.2;
            white-space: nowrap;
            text-shadow: 0 0px white;     
        }

        .monster-level-text-night {
            color: white;
            text-shadow: 1px 1px 2px black; /* Améliore la lisibilité sur la carte sombre */
        }
        .enraged-monster-glow {
            filter: drop-shadow(0 0 4px #ef4444) drop-shadow(0 0 8px #ef4444); /* Double halo rouge */
        }
        .ultra-boss-glow {
            filter: drop-shadow(0 0 8px #fbbf24) drop-shadow(0 0 16px #f59e0b) drop-shadow(0 0 24px #d97706); /* Triple halo doré */
            animation: ultra-boss-pulse 0.8s infinite;
        }
        @keyframes ultra-boss-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.9; }
        }
        .flipped {
            transform: scaleX(-1);
        }
        .equipment-slot {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            color: #9ca3af;
            border: 2px solid green;
            max-width: min(25vw, 120px);
            width: min(25vw, 120px);
            height: min(25vw, 120px);
            max-height: 120px;
            align-items: center;
            justify-content: center;
            padding: 0.25rem;
        }
        .equipment-slot > span {
            font-size: 0.7rem;
            line-height: 1;
            margin-bottom: 0;
            flex-shrink: 0;
            max-height: 1.2rem;
            overflow: hidden;
        }
        .slot-placeholder {
            flex: 1;
            width: 100%;
            border-radius: 0.375rem;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .slot-placeholder img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .stat-plus-btn {
            background-color: #10b981; /* Vert */
            color: white;
            border-radius: 9999px;
            width: 1.5rem; height: 1.5rem;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }

        /* @keyframes pulse (scale 1.1 + opacity .8) supprimé — audit 2026-08-30.
           Voir la note « COLLISION @keyframes pulse » en fin de fichier. */

        .stat-plus-btn:hover {
            transform: scale(1.1);
        }

        /* (NOUVEAU) Style pour le spinner de chargement */
        .loader-spinner {
            border: 6px solid #1f2937; /* Couleur de fond du cercle */
            border-top: 6px solid rgb(34 197 94 / var(--tw-bg-opacity, 1)); /* Couleur de l'animation (green) */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .spawn-indicator {
            position: absolute;
            border-radius: 50%;
            border: 2px solid white;
            background-color: rgba(255, 255, 255, 0.3);
            pointer-events: none; /* L'animation ne sera pas cliquable */
            z-index: 600; /* S'assure qu'elle est visible */
            transform: translate(-50%, -50%); /* Centre parfaitement l'animation */

            /* On lie l'élément à notre animation keyframes */
            animation: shrink-and-fade 500ms ease-out forwards;
        }

        #inventory-context-menu, #map-context-menu {
            position: fixed; /* Fixé par rapport à la vue */
            z-index: 999999; /* Doit être au-dessus de tout (inventaire, quantité, etc) */
            background-color: #1f2937; /* Fond sombre */
            border: 1px solid #4b5563;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            min-width: 180px;
            max-width: 250px; /* Largeur maximum pour éviter des descriptions trop larges */
            padding: 0.5rem;
        }
        #context-menu-description {
            line-height: 1.4; /* Meilleure lisibilité pour les descriptions */
            word-wrap: break-word; /* Retour à la ligne automatique */
        }
        .context-menu-item {
            display: block;
            width: 100%;
            padding: 0.5rem 1rem;
            text-align: left;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .context-menu-item:hover {
            background-color: #374151; /* Gris plus clair au survol */
        }
        .context-menu-divider {
            height: 1px;
            margin: 0.5rem 0;
            background-color: #4b5563;
        }
        .context-menu-stats {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            color: #9ca3af; /* Texte gris clair */
        }

        .custom-div-icon {
            transition: opacity 0.5s ease-in-out;
        }

        @keyframes shrink-and-fade {
            from {
                width: 1000px;
                height: 1000px;
                opacity: 1;
            }
            to {
                width: 0;
                height: 0;
                opacity: 0.3;
            }
        }

        @keyframes combat-title-anim {
            0% { transform: scale(0.8); opacity: 0; }
            20% { transform:scale(1.1); opacity: 1; }
            80% { transform:scale(1); opacity: 1; }
            100% { transform:scale(0.9); opacity: 0; }
        }

        /* Le conteneur principal ne fait que positionner */
        #combat-title-overlay {
            position: fixed;
            top: 40%;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 1600;
            pointer-events: none;
            flex-direction: column;
            align-items: center;
            padding: 50px;
        }

        /* C'est le titre LUI-MÊME qui a le style et l'animation */
        .combat-title-instance {
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 0 0 15px black, 0 0 5px black;
            animation: combat-title-anim 1.5s ease-in-out forwards;
        }

        @keyframes terminal-boot-anim {
            0% { opacity: 0.6; filter: brightness(2.5); }
            10% { opacity: 0.8; filter: brightness(0.7); }
            20% { opacity: 1; filter: brightness(1.5); }
            100% { opacity: 1; filter: brightness(1); }
        }

        @keyframes scanline-anim {
            0% { top: 0; opacity: 1; }
            90% { opacity: 0.5; }
            100% { top: 98%; opacity: 0; }
        }

        @keyframes blinking-cursor-anim {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        /* LOADER ANIMÉ - STYLES */
        .loading-spinner-overlay {
            position: relative;
            height: 3px;
            margin-top: 8px;
            margin-bottom: 8px;
            width: 100%;
            z-index: 50;
            pointer-events: none;
            background: rgba(0, 255, 0, 0.1);
            overflow: hidden;
        }
        
        .loading-spinner-container {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 40%;
            background: linear-gradient(90deg, transparent 0%, #00FF00 50%, transparent 100%);
            animation: horizontal-slide 1.5s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
        }
        
        .loading-spinner {
            width: 100%;
            height: 100%;
            animation: spin 2s linear infinite;
        }
        
        .spinner-arc {
            animation: spin 2s linear infinite;
            transform-origin: 25px 25px;
        }
        
        @keyframes horizontal-slide {
            0% {
                left: -40%;
            }
            50% {
                left: 100%;
            }
            100% {
                left: 100%;
            }
        }

        /* === ANIMATION 2 PHASES : OVERLAY FADE + CONTAINER GROW === */

        /* Phase 1 : Fade-in du fond overlay (plein écran dès le départ) */
        @keyframes modal-overlay-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Phase 2 : Le conteneur intérieur grandit en hauteur */
        @keyframes modal-container-grow {
            from {
                max-height: 0;
                opacity: 0;
            }
            to {
                max-height: calc(100dvh - 40px);
                opacity: 1;
            }
        }

        /* Réinitialiser la modale quand elle est cachée */
        .hidden {
            display: none !important;
        }

        /* Classe appliquée sur l'overlay lors de l'ouverture */
        .modal-opening {
            animation: modal-overlay-fade 0.15s ease forwards !important;
        }

        /* Variante plus rapide */
        .modal-opening-fast {
            animation: modal-overlay-fade 0.15s ease forwards !important;
        }

        /* Variante plus lente */
        .modal-opening-slow {
            animation: modal-overlay-fade 0.5s ease forwards !important;
        }

        /* Classe appliquée sur le conteneur intérieur (phase 2) */
        .modal-container-opening {
            animation: modal-container-grow 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
            overflow: hidden !important;
        }
        .modal-container-opening-fast {
            animation: modal-container-grow 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
            overflow: hidden !important;
        }
        .modal-container-opening-slow {
            animation: modal-container-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
            overflow: hidden !important;
        }

        /* État initial caché du conteneur avant animation */
        .modal-container-hidden {
            max-height: 0 !important;
            opacity: 0 !important;
            overflow: hidden !important;
        }

        /* CSS spécifique pour notification-modal avec animation */
        #notification-modal.modal-opening,
        #notification-modal.modal-opening-fast,
        #notification-modal.modal-opening-slow {
            display: flex !important;
        }
        
        /* CSS spécifique pour combat-preview-modal avec animation */
        #combat-preview-modal.modal-opening,
        #combat-preview-modal.modal-opening-fast,
        #combat-preview-modal.modal-opening-slow {
            display: flex !important;
        }

        /* Modale installation PWA écran titre (même famille visuelle que notification-modal) */
        #title-pwa-install-modal.modal-opening,
        #title-pwa-install-modal.modal-opening-fast,
        #title-pwa-install-modal.modal-opening-slow {
            display: flex !important;
        }

        #title-pwa-install-modal.title-pwa-install-overlay {
            background-color: rgba(0, 0, 0, 0.4);
            --notification-slot-green: rgba(34, 197, 94, 0.35);
            --notification-slot-green-strong: rgba(34, 197, 94, 0.85);
            --notification-slot-green-soft: rgba(34, 197, 94, 0.2);
        }

        #title-pwa-install-modal .terminal-container {
            border-color: var(--notification-slot-green) !important;
        }

        .notification-slot-box.notification-slot-box--title-pwa {
            min-height: 0;
        }
        
        /* Assurez-vous que le fond semi-transparent couvre tout l'écran */
        #notification-modal {
            background-color: rgba(0, 0, 0, 0.4);
            --notification-slot-green: rgba(34, 197, 94, 0.35);
            --notification-slot-green-strong: rgba(34, 197, 94, 0.85);
            --notification-slot-green-soft: rgba(34, 197, 94, 0.2);
        }

        /* Aligne la bordure externe avec le vert de la case interne */
        #notification-modal .terminal-container {
            border-color: var(--notification-slot-green) !important;
        }

        .terminal-container.is-opening {
            animation: terminal-boot-anim 0.4s ease-in-out;
        }

        .terminal-screen-content::before {
            content: '';
            position: absolute;
            left: 0;
            top: -100%; /* Position initiale hors de l'écran */
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #34d399, transparent);
            box-shadow: 0 0 10px #34d399;
            opacity: 0;
        }
        
        .terminal-container.is-opening .terminal-screen-content::before {
            animation: scanline-anim 0.7s 0.3s cubic-bezier(0.25, 1, 0.5, 1) alternate ;
        }

        .notification-slot-header {
            color: var(--notification-slot-green-strong);
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-bottom: 8px;
            text-align: center;
            border-top: 1px solid var(--notification-slot-green);
            border-bottom: 1px solid var(--notification-slot-green-soft);
            padding: 6px 8px;
        }

        .notification-slot-box {
            position: relative;
            border: 1px solid var(--notification-slot-green);
            border-radius: 2px;
            background: rgba(5, 12, 5, 0.72);
            box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(34, 197, 94, 0.08);
            min-height: 180px;
            overflow: hidden;
        }

        .notification-slot-scanline {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 3px;
            background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.08), transparent);
            animation: terminalScanline 3s linear infinite;
            pointer-events: none;
            z-index: 2;
        }

        .notification-slot-crt {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 0, 0, 0.15) 2px,
                rgba(0, 0, 0, 0.15) 4px
            );
            pointer-events: none;
            z-index: 1;
        }

        .notification-slot-text {
            position: relative;
            z-index: 3;
            max-height: 320px;
            overflow-y: auto;
            padding: 10px 12px;
            font-size: 0.86rem;
            line-height: 1.45;
            color: #86efac;
            text-shadow: 0 0 4px rgba(34, 197, 94, 0.25);
        }

        .notification-slot-text b,
        .notification-slot-text strong {
            font-weight: 700;
            color: #bbf7d0;
            text-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
        }

        .notification-log-line {
            margin-bottom: 4px;
            word-break: break-word;
        }

        .notification-log-line:last-child {
            margin-bottom: 0;
        }

        .notification-log-info {
            color: #86efac;
        }

        .notification-log-success {
            color: #4ade80;
        }

        .notification-log-warning {
            color: #facc15;
        }

        .notification-log-error {
            color: #f87171;
        }
        
        #notification-message.blinking-cursor::after {
            content: '█';
            font-family: monospace;
            animation: blinking-cursor-anim 1s infinite;
        }
        /* (NOUVEAU) Animation pour l'apparition des objets dans l'inventaire */
        @keyframes item-pop-in {
          0% { opacity: 0; transform: scale(0.7); }
          80% { transform: scale(1.05); }
          100% { opacity: 1; transform: scale(1); }
        }

        .item-pop-in-animation {
          opacity: 0; /* L'objet est invisible avant que l'animation ne commence */
          animation: item-pop-in 0.15s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }
        .trade-item-highlight {
            transition: all 0.2s ease-in-out;
            animation: item-pop-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        #trade-lock-btn.is-locked {
            background-color: #00FF00; /* Vert */
            color: black;
            filter: drop-shadow(0 0 5px #00FF00);
        }
        @keyframes projectile-travel {
        from { transform: scale(0.8); opacity: 1; }
        to { transform: scale(0.2); opacity: 0.5; }
    }
    .projectile-animation {
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: skyblue; /* Jaune */
        border-radius: 50%;
        box-shadow: 0 0 8px #facc15, 0 0 4px white;
        z-index: 50; /* Au-dessus de la carte, en dessous des modales (z-60+) */
        pointer-events: none;
        transition: top 0.3s linear, left 0.3s linear; /* La durée de la transition doit être courte */
        animation: projectile-travel 0.3s linear forwards;
    }
    .terminal-button {
    background-color: #333;
    border: 1px solid #00ff00;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    padding: 8px 16px;
    margin-top: 15px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s;
}

.terminal-button:hover {
    background-color: #00ff00;
    color: #111;
}

.terminal-button:disabled {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
    background-color: #222;
}
        .avatar-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 1rem;
            max-height: 70vh;
            overflow-y: auto;
        }
        .avatar-item {
            cursor: pointer;
            transition: transform 0.2s, border-color 0.2s;
            border: 3px solid transparent;
            border-radius: 0.5rem;
            aspect-ratio: 1 / 1;
        }
        .avatar-item:hover {
            transform: scale(1.05);
            border-color: #00FF00; /* Vert */
        }
        .avatar-item.selected {
            border-color: #2dd4bf; /* Cyan */
            transform: scale(1.05);
            box-shadow: 0 0 15px #2dd4bf;
        }
                /* (NOUVEAU) Animation de la bannière de quête terminée */
        @keyframes quest-complete-anim {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }
            20% {
                opacity: 1;
                transform: translateY(0) scale(1.05);
            }
            80% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
        }

        /* (NOUVEAU) Conteneur pour positionner la bannière au centre */
        .quest-complete-container {
            position: fixed;
            top: 25%;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 2500;
            pointer-events: none; /* Pour ne pas bloquer les clics */
        }

        /* (NOUVEAU) Style de la bannière elle-même */
        .quest-complete-banner {
            padding: 1rem 2rem;
            background-color: rgba(10, 5, 0, 0.7);
            border: 2px solid #fde047;
            border-radius: 0.5rem;
            color: #fde047; /* Jaune/Or */
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            text-shadow: 0 0 8px #facc15, 0 0 15px black;
            box-shadow: 0 0 20px rgba(250, 204, 21, 0.5); /* Halo lumineux */
            backdrop-filter: blur(4px);
            animation: quest-complete-anim 3s ease-in-out forwards;
        }
        
        
         .terminal-toast { 
            font-family: monospace;
            font-size: 14px; /* Taille de police réduite */
            color: #00ff00; /* text-green-400 */
            /* background-color: #000000; */ /* Fond noir retiré */
            padding: 4px 8px;
            
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ombre subtile pour lisibilité sur fonds clairs */
            max-width: 90vw;
            width: fit-content;
            pointer-events: none;
            /* Animation d'apparition/disparition */
            transition: opacity 0.4s ease-out, transform 0.2s ease-out;
            opacity: 0.9;
            margin-top:0;
            margin-bottom:0;
        }
        /* Classe ajoutée par JS pour déclencher l'animation d'apparition */
        .terminal-toast.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Forcer les images dans les toasts à être alignées sur la même ligne */
        .terminal-toast img {
            display: inline !important;
            vertical-align: middle !important;
            width: auto !important;
            height: auto !important;
            max-width: 20px !important;
            max-height: 20px !important; /* Limite raisonnable pour ne pas casser le layout */
            object-fit: contain !important;
        }

        /* === STYLES POUR LE MODAL DE MISE À JOUR === */
        #version-update-modal {
            display: none !important;
            z-index: 50000;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            align-items: center;
            justify-content: center;
        }

        #version-update-modal.visible {
            display: flex !important;
        }

        .update-terminal-container {
            background-color: #000000;
            border: 2px solid #00ff00;
            font-family: monospace;
            color: #00ff00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            width: 100%;
            max-width: 100%;
            height: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: terminal-boot-anim 0.4s ease-in-out;
        }

        .update-terminal-header {
            border-bottom: 2px solid #00ff00;
            padding: 12px 16px;
            background: linear-gradient(90deg, rgba(0, 255, 0, 0.1), transparent);
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .update-terminal-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 14px;
            line-height: 1.6;
        }

        .update-terminal-line {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .update-terminal-line::before {
            content: "→";
            color: #00ff00;
            font-weight: bold;
            min-width: 12px;
        }

        .update-file-item {
            display: flex;
            flex-direction: column;
            padding: 0 !important;
            background: transparent !important;
            border-left: none !important;
            margin: 0 !important;
            font-size: 0;
            gap: 0;
            width: 16px;
            height: 16px;
            align-items: center;
            justify-content: center;
            scroll-margin: 20px; /* Espace autour de l'élément lors du scroll */
        }

        .update-file-name {
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .update-file-path {
            font-size: 10px;
            color: #888;
            margin-left: 20px;
        }

        .update-file-status {
            text-align: right;
            font-weight: bold;
            align-self: flex-end;
        }

        .update-file-status.pending {
            color: #ffff00;
        }

        .update-file-status.downloading {
            color: #00ffff;
            animation: pulse-opacity 0.8s infinite;
            font-size: 13px; /* Légèrement plus grand pour attirer l'attention */
        }

        .update-file-status.completed {
            color: #00ff00;
        }

        .update-terminal-footer {
            border-top: 2px solid #00ff00;
            padding: 16px;
            background: linear-gradient(90deg, rgba(0, 255, 0, 0.1), transparent);
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .update-terminal-button {
            background-color: rgba(0, 255, 0, 0.1);
            border: 2px solid #00ff00;
            color: #00ff00;
            padding: 10px 20px;
            font-family: monospace;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.3s ease;
            min-width: 150px;
        }

        .update-terminal-button:hover:not(:disabled) {
            background-color: rgba(0, 255, 0, 0.2);
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
            transform: scale(1.05);
        }

        .update-terminal-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .update-progress-container {
            width: 100%;
            padding: 12px;
            background: rgba(0, 255, 0, 0.05);
            border: 1px solid #00ff00;
        }

        .update-progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 4px;
        }

        .update-progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(0, 255, 0, 0.2);
            border: 1px solid #00ff00;
            overflow: hidden;
        }

        .update-progress-fill {
            height: 100%;
            background: #00ff00;
            width: 0%;
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
        }

        /* Renommé depuis « pulse » — audit 2026-08-30. Ce nom générique entrait
           en collision avec le @keyframes pulse de Tailwind ; voir la note
           « COLLISION @keyframes pulse » en fin de fichier. */
        @keyframes pulse-opacity {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* Styles pour l'historique de combat */
        .combat-history-entry {
            font-family: monospace;
            font-size: 11px;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 2px 6px;
            border-radius: 4px;
            border-left: 3px solid #00ff00;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            width: 100%;
            pointer-events: auto;
            transition: opacity 0.3s ease-out;
            opacity: 0.9;
            margin: 0;
            white-space: wrap;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .combat-history-entry.player-action {
            border-left-color: #00ff00;
        }

        .combat-history-entry.monster-action {
            border-left-color: #ff4444;
        }

        .combat-history-entry.status-effect {
            border-left-color: #ffff00;
        }

        .combat-history-entry.system {
            border-left-color: #888888;
        }

        /* Animation de rebond pour la récompense quotidienne */
        @keyframes bounce-reward {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-8px) scale(1.05); }
        }

        .bounce-reward {
            animation: bounce-reward 1s ease-in-out infinite;
            animation-play-state: paused; /* Désactivée par défaut */
        }

        .bounce-reward.active {
            animation-play-state: running; /* Activée quand nécessaire */
        }

        /* === ANIMATIONS DE COMBAT === */
        
        /* Flash d'attaque normale */
        @keyframes attack-flash {
            0% { 
                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
                background-color: rgba(255, 255, 255, 0);
            }
            50% { 
                box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.9);
                background-color: rgba(255, 255, 255, 0.1);
            }
            100% { 
                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
                background-color: rgba(255, 255, 255, 0);
            }
        }

        /* Flash de coup critique */
        @keyframes critical-flash {
            0% { 
                box-shadow: 0 0 0 rgba(255, 215, 0, 0);
                background-color: rgba(255, 215, 0, 0);
                transform: scale(1);
                filter: brightness(1);
            }
            25% { 
                box-shadow: 0 0 60px 25px rgba(255, 215, 0, 0.9);
                background-color: rgba(255, 215, 0, 0.2);
                transform: scale(1.03);
                filter: brightness(1.2);
            }
            50% { 
                box-shadow: 0 0 80px 30px rgba(255, 69, 0, 0.9);
                background-color: rgba(255, 69, 0, 0.15);
                transform: scale(1.05);
                filter: brightness(1.3);
            }
            75% { 
                box-shadow: 0 0 60px 25px rgba(255, 215, 0, 0.9);
                background-color: rgba(255, 215, 0, 0.2);
                transform: scale(1.03);
                filter: brightness(1.2);
            }
            100% { 
                box-shadow: 0 0 0 rgba(255, 215, 0, 0);
                background-color: rgba(255, 215, 0, 0);
                transform: scale(1);
                filter: brightness(1);
            }
        }

        /* Flash de dégâts reçus */
        @keyframes damage-flash {
            0% { 
                background-color: transparent;
                box-shadow: 0 0 0 rgba(255, 0, 0, 0);
                filter: brightness(1);
            }
            50% { 
                background-color: rgba(255, 0, 0, 0.4);
                box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.6);
                filter: brightness(0.8);
            }
            100% { 
                background-color: transparent;
                box-shadow: 0 0 0 rgba(255, 0, 0, 0);
                filter: brightness(1);
            }
        }

        /* Classe pour déclencher les animations */
        .combat-attack-flash {
            animation: attack-flash 0.8s ease-out;
        }

        .combat-critical-flash {
            animation: critical-flash 1.2s ease-out;
        }

        .combat-damage-flash {
            animation: damage-flash 0.6s ease-out;
        }

        /* Overlay pour les effets de combat plein écran */
        .combat-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 9999;
        }

        /* Effets de particules pour les coups critiques */
        @keyframes critical-particle {
            0% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(0) rotate(0deg); 
            }
            50% { 
                opacity: 1; 
                transform: translate(-50%, -50%) scale(1.2) rotate(180deg); 
            }
            100% { 
                opacity: 0; 
                transform: translate(-50%, -50%) scale(0.5) rotate(360deg); 
            }
        }

        .critical-particle {
            position: absolute;
            font-size: 2rem;
            pointer-events: none;
            z-index: 10000;
            animation: critical-particle 1s ease-out forwards;
        }

        /* Effet de texte critique amélioré */
        @keyframes critical-text-bounce {
            0% { transform: translateX(-50%); opacity: 0; }
            100% { transform: translateX(0%); opacity: 1; }
        }

        .critical-text-effect {
            animation: critical-text-bounce 0.3s ease-out;
            color: #fbff00;
            text-shadow: 0 0 10px #FF4500, 0 0 20px #FF4500;
            font-weight: bold;
            font-size: 1.2em;
        }

                /* Effet de texte critique amélioré */
        @keyframes dodge-text-bounce {
            0% { transform: translateX(-50%); opacity: 0; }
            100% { transform: translateX(0%); opacity: 1; }
        }

        .dodge-text-effect {
            animation: dodge-text-bounce 0.3s ease-out;
            color: #0066ff;
            text-shadow: 0 0 10px #0066ff, 0 0 20px #0066ff;
            font-weight: bold;
            font-size: 1.2em;
        }

        /* Effets de nombres de dégâts flottants */
        @keyframes floating-damage {
            0% { 
                opacity: 1; 
                transform: translateY(0) scale(0.8); 
            }
            20% { 
                transform: translateY(-10px) scale(1.2); 
            }
            80% { 
                opacity: 1; 
                transform: translateY(-40px) scale(1); 
            }
            100% { 
                opacity: 0; 
                transform: translateY(-60px) scale(0.8); 
            }
        }

        /* Animation pour les nombres de dégâts flottants */
        @keyframes floating-damage {
            0% { 
                opacity: 1;
                transform: translateY(0) scale(1.2);
            }
            20% {
                opacity: 1;
                transform: translateY(-20px) scale(1);
            }
            80% {
                opacity: 0.7;
                transform: translateY(-80px) scale(0.9);
            }
            100% { 
                opacity: 0;
                transform: translateY(-120px) scale(0.6);
            }
        }

        /* Animation spéciale pour les mitrailleuses */
        @keyframes machinegun-impact {
            0% { 
                opacity: 1;
                transform: translateY(0) scale(1.1);
                color: #FFA500;
                text-shadow: 0 0 8px #FF4500;
            }
            30% {
                opacity: 1;
                transform: translateY(-15px) scale(1);
                color: #FF8C00;
            }
            80% {
                opacity: 0.6;
                transform: translateY(-50px) scale(0.8);
                color: #FF6347;
            }
            100% { 
                opacity: 0;
                transform: translateY(-70px) scale(0.5);
            }
        }

        .floating-damage-number.machinegun-bullet {
            animation: machinegun-impact 1.2s ease-out forwards;
            color: #FFA500;
            text-shadow: 0 0 5px #FF4500;
            font-size: 1.5em;
            font-weight: bold;
        }

        .floating-damage-number {
            position: absolute;
            font-weight: bold;
            font-size: 1.8rem;
            pointer-events: none;
            z-index: 10001;
            animation: floating-damage 1.5s ease-out forwards;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .floating-damage-number.critical {
            font-size: 2.4rem;
            color: #FFD700;
            text-shadow: 0 0 8px #FF4500, 2px 2px 4px rgba(0,0,0,0.8);
        }

        .floating-damage-number.normal {
            color: #FF6B6B;
        }

        .floating-damage-number.heal {
            color: #4ECDC4;
        }

        .floating-damage-number.machinegun-bullet {
            font-size: 1.8rem;
            animation: machinegun-impact 1.2s ease-out forwards;
            color: #FFA500;
            text-shadow: 0 0 6px #FF4500, 1px 1px 3px rgba(0,0,0,0.9);
        }

        @keyframes machinegun-impact {
            0% {
                opacity: 1;
                transform: translateY(0px) scale(1.2);
            }
            20% {
                opacity: 0.9;
                transform: translateY(-20px) scale(1.1);
            }
            60% {
                opacity: 0.6;
                transform: translateY(-60px) scale(0.9);
            }
            100% { 
                opacity: 0;
                transform: translateY(-90px) scale(0.7);
            }
        }

        /* Active Boosts Display Styles */
        .boost-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: rgba(31, 41, 55, 0.8);
            border: 1px solid rgba(75, 85, 99, 0.5);
            border-radius: 0.375rem;
            padding: 0.375rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: #e5e7eb;
            min-width: 120px;
            backdrop-filter: blur(4px);
        }

        .boost-icon {
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .boost-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0.125rem;
        }

        .boost-text {
            flex: 1;
            text-align: center;
            font-size: 0.7rem;
            line-height: 1.2;
        }

        .boost-timer {
            font-weight: bold;
            color: #10b981;
            font-variant-numeric: tabular-nums;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .boost-expiring-soon .boost-timer {
            color: #f59e0b;
            animation: pulse-warning 1s infinite;
        }

        .boost-expiring-critical .boost-timer {
            color: #ef4444;
            animation: pulse-critical 0.5s infinite;
        }

        /* Responsive design for mobile */
        @media (max-width: 768px) {
            .boost-item {
                min-width: 80px;
                padding: 0.25rem 0.375rem;
                gap: 0.25rem;
            }
            
            .boost-text {
                display: none;
            }
            
            .boost-icon {
                width: 1.25rem;
                height: 1.25rem;
            }
            
            .boost-timer {
                font-size: 0.7rem;
            }
        }

        @keyframes pulse-warning {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        @keyframes pulse-critical {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Animations Idle pour le combat */
        @keyframes idle-bob {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes idle-sway {
            0%, 100% { transform: translateY(0px); }
            25% { transform: translateY(-4px); }
            50% { transform: translateY(0px); }
            75% { transform: translateY(-2px); }
        }

        @keyframes idle-breathe {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.95; }
        }

        /* Bond latéral vers la gauche */
        @keyframes hop-left {
            0% { transform: translateX(0px); }
            50% { transform: translateX(-12px); }
            100% { transform: translateX(0px); }
        }

        /* Bond latéral vers la droite */
        @keyframes hop-right {
            0% { transform: translateX(0px); }
            50% { transform: translateX(12px); }
            100% { transform: translateX(0px); }
        }

/* === EFFETS VISUELS DE COMBAT === */
.floating-damage {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translateY(0) scale(1);
    transition: all 0.3s ease-out;
    animation: float-up 1s ease-out forwards;
}

.floating-damage.critical {
    font-size: 32px;
    color: #ffaa00;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
    animation: float-up-critical 1.2s ease-out forwards;
}

.floating-damage.player-damage {
    color: #ff6666;
}

.floating-damage.monster-damage {
    color: #ff4444;
}

@keyframes float-up {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.9);
    }
}

@keyframes float-up-critical {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    20% {
        opacity: 1;
        transform: translateY(-30px) scale(1.3);
    }
    50% {
        transform: translateY(-50px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.8);
    }
}

/* === ANIMATIONS DE DÉGÂTS SIMPLIFIÉES === */

/* Les animations de dégâts utilisant maintenant juste le recul et les couleurs via filter */
/* Le recul et les couleurs sont appliqués directement par JavaScript via transition CSS */

/* Classe pour animation idle - ressaut léger */
.idle-bob {
    animation: idle-bob 3s ease-in-out infinite !important;
}

/* Classe pour animation idle - balancement */
.idle-sway {
    animation: idle-sway 2.5s ease-in-out infinite !important;
    transform-origin: center bottom;
}

/* Classe pour animation idle - respiration */
.idle-breathe {
    animation: idle-breathe 3.5s ease-in-out infinite !important;
}

/* === ANIMATIONS D'EFFETS DE COMBAT TOUR PAR TOUR === */

/* Animation d'explosion */
.explosion-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.explosion-circle {
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ff4444;
    animation: explosion-expand 0.8s ease-out forwards;
}

.explosion-circle-1 {
    width: 20px;
    height: 20px;
    top: 40px;
    left: 40px;
    border-color: #ff4444;
    animation-delay: 0s;
}

.explosion-circle-2 {
    width: 35px;
    height: 35px;
    top: 32px;
    left: 32px;
    border-color: #ff8844;
    animation-delay: 0.1s;
}

.explosion-circle-3 {
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    border-color: #ffaa44;
    animation-delay: 0.2s;
}

.explosion-spark {
    position: absolute;
    font-size: 16px;
    animation: spark-fly 1s ease-out forwards;
}

.spark-1 {
    top: 20px;
    left: 20px;
    animation-delay: 0.1s;
}

.spark-2 {
    top: 60px;
    left: 60px;
    animation-delay: 0.2s;
}

.spark-3 {
    top: 40px;
    left: 10px;
    animation-delay: 0.3s;
}

@keyframes explosion-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes spark-fly {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg) translate(30px, -30px);
        opacity: 0;
    }
}

/* Animation de tonnerre */
.thunder-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.thunder-bolt {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    animation: thunder-strike 0.6s ease-in-out forwards;
}

.thunder-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: thunder-flash 0.6s ease-out forwards;
}

@keyframes thunder-strike {
    0% {
        transform: translateX(-50%) scale(0) rotate(-45deg);
        opacity: 0;
    }
    20% {
        transform: translateX(-50%) scale(1.2) rotate(-45deg);
        opacity: 1;
    }
    40% {
        transform: translateX(-50%) scale(0.9) rotate(-45deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes thunder-flash {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
    }
}

/* Animation de soin */
.heal-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.heal-sparkle {
    position: absolute;
    font-size: 20px;
    animation: heal-sparkle 1.2s ease-in-out forwards;
}

.sparkle-1 {
    top: 10px;
    left: 20px;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 30px;
    right: 15px;
    animation-delay: 0.3s;
}

.sparkle-3 {
    bottom: 15px;
    left: 25px;
    animation-delay: 0.6s;
}

.heal-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: heal-pulse 1s ease-in-out forwards;
}

@keyframes heal-sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    30% {
        transform: scale(1.2) rotate(120deg);
        opacity: 1;
    }
    70% {
        transform: scale(1) rotate(240deg);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes heal-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* === EFFETS GIF DE COMBAT === */

.combat-gif-effect {
    animation: combat-gif-appear 0.3s ease-out, combat-gif-fade 1.2s ease-in-out 0.3s forwards;
}

.combat-gif-effect img {
    animation: combat-gif-scale 1.5s ease-in-out;
}

@keyframes combat-gif-appear {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes combat-gif-scale {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes combat-gif-fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* === ANIMATION DE LANCER D'OBJET === */

.thrown-item {
    position: absolute;
    font-size: 32px;
    z-index: 60;
    pointer-events: none;
    transform-origin: center;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

.thrown-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Styles des boutons de fermeture de modales */
.modal-close-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* text-2xl */
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ==========================================
   SYSTÈME DE PNJ - CSS
   ========================================== */

/* Overlay de fermeture du dialogue */
.npc-dialogue-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.npc-dialogue-overlay.active {
    background: rgba(0, 0, 0, 0.8);
    opacity: 1;
    pointer-events: auto;
}

/* Conteneur principal du dialogue PNJ */
.npc-dialogue-box {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 500px;
    z-index: 9999;
    transition: bottom 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 0;
}

.npc-dialogue-box.active {
    bottom: 20vh;
}

/* Conteneur du dialogue */
.npc-dialogue-container {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

/* Bouton de fermeture */
.npc-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(255, 215, 0, 0.8);
    border: none;
    border-radius: 50%;
    color: #1a1a2e;
    font-size: 24px;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.npc-close-button:hover {
    background: rgba(255, 215, 0, 1);
    transform: scale(1.1);
}

/* En-tête avec portrait */
.npc-dialogue-header {
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}

.npc-portrait-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 20px;
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

.npc-portrait {
    width: 50vw;
    max-width: 180px;
    max-height: 230px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.npc-name-title {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 0;
    flex: 1;
    padding-bottom: 10px;
    position:absolute;
    bottom:0px;
    left:20px;
}

.npc-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: rgb(0, 255, 0);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.npc-faction {
    font-size: 0.85rem;
    color: #00FF00;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Corps du dialogue */
.npc-dialogue-body {
    padding: 0px 20px;
    flex: 1;
    /* overflow-y: auto; */
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.npc-dialogue-text {
    color: #00ff00;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    font-family: 'Arial', sans-serif;
    background: rgb(0, 0, 0);
    padding: 12px;
    border-left: 3px solid rgb(0,255,0);
    border-radius: 5px;
    transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Conteneur des réponses */
.npc-responses-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

.npc-response-button {
    border: 2px solid #00FF00;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Réponses non utilisées - VERT avec texte NOIR */
.npc-response-button.unused {
    background: linear-gradient(135deg, #00aa00 0%, #00FF00 100%);
    color: black;
}

.npc-response-button.unused:hover {
    background: linear-gradient(135deg, #00aa00 0%, #00FF00 100%);
    border-color: #00FF00;
    color: black;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    transform: translateX(5px);
}

/* Réponses utilisées - BLANC */
.npc-response-button.used {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #f5f5f5;
    border-color: #f5f5f5;
}

.npc-response-button.used:hover {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.npc-response-button:active {
    transform: translateX(5px) scale(0.98);
}

/* Modal de quête */
.npc-quest-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.npc-quest-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #FFD700;
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
    animation: slideUp 0.3s ease;
}

.npc-quest-content h3 {
    color: #FFD700;
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.npc-quest-content p {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.npc-quest-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.npc-quest-buttons button {
    flex: 1;
    padding: 12px;
    border: 2px solid #00FF00;
    background: linear-gradient(135deg, #00aa00 0%, #00FF00 100%);
    color: black;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.npc-quest-buttons button:hover {
    background: linear-gradient(135deg, #00aa00 0%, #00FF00 100%);
    border-color: #00FF00;
    color: black;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

.npc-quest-buttons button:first-child {
    border-color: #FFD700;
    background: linear-gradient(135deg, #663c00 0%, #8b5a00 100%);
    color: #FFD700;
}

.npc-quest-buttons button:first-child:hover {
    background: linear-gradient(135deg, #8b5a00 0%, #cc8800 100%);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}



/* ============================================================
   COLLISION @keyframes pulse — résolue le 2026-08-30
   ------------------------------------------------------------
   Ce fichier définissait TROIS @keyframes nommés « pulse », et Tailwind en
   définit un quatrième (`50% { opacity: .5 }`) pour sa classe .animate-pulse.
   Un seul gagne : le dernier chargé.

   Tant que Tailwind arrivait par le Play CDN, il injectait son <style> APRÈS
   cette feuille et c'est lui qui l'emportait. En remplaçant le CDN par un CSS
   statique placé à l'emplacement exact de sa balise — donc AVANT cette
   feuille — le dernier « pulse » d'ici a pris la main, et avec lui son
   box-shadow doré :

       0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
       50%      { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }

   Résultat visible : un halo doré pulsant est apparu sur tout ce qui utilise
   « pulse » — les 16 .animate-pulse du jeu et les quatre appels JS, dont
   `inventoryBtn.style.animation = 'pulse …'` en fin de flyToInventory
   (index.php:27583). Aucun de ces appelants ne demandait un halo : ils
   attendaient le fondu de Tailwind.

   Les trois définitions locales étaient orphelines, sauf une seule règle —
   .update-file-status.downloading — qui voulait un simple clignotement et
   pointe maintenant vers `pulse-opacity`, nommé explicitement.

   À retenir : ne jamais nommer un @keyframes « pulse », « spin », « ping » ou
   « bounce » ici. Tailwind possède ces quatre noms.

   Cas déjà présent, mais sans conséquence : ce fichier définit aussi
   @keyframes spin (l. 1140). Il est fonctionnellement identique à celui de
   Tailwind — rotate(0→360deg) contre rotate(1turn) — donc peu importe lequel
   l'emporte. Il est conservé parce que trois règles d'ici en dépendent
   (l. 1137, 1288, 1292) et qu'elles doivent continuer de tourner même si
   Tailwind venait à être retiré.
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar personnalisée pour le dialogue */
.npc-dialogue-body::-webkit-scrollbar {
    width: 6px;
}

.npc-dialogue-body::-webkit-scrollbar-track {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 3px;
}

.npc-dialogue-body::-webkit-scrollbar-thumb {
    background: #FFD700;
    border-radius: 3px;
}

.npc-dialogue-body::-webkit-scrollbar-thumb:hover {
    background: #00FF00;
}

/* ============================================
   STYLES MODAL DE RÉCOMPENSE POST-COMBAT - v0.112
   ============================================ */

/* Container principal */
#monster-defeat-reward-modal {
    animation: fadeIn 0.3s ease-out;
}

#monster-defeat-reward-modal.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Barre XP - Glow effect pour level up */
#reward-xp-glow {
    box-shadow: 0 0 20px #ffff00, inset 0 0 20px rgba(255, 255, 0, 0.5);
    animation: levelUpGlow 0.5s ease-in-out;
}

@keyframes levelUpGlow {
    0% { opacity: 1; box-shadow: 0 0 5px #ffff00; }
    50% { opacity: 0.8; box-shadow: 0 0 30px #ffff00; }
    100% { opacity: 0; box-shadow: 0 0 5px #ffff00; }
}

/* Texte niveau gagné */
#reward-level-up-text {
    animation: popScale 0.5s ease-out forwards;
}

@keyframes popScale {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Catégories de récompenses */
.reward-category {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 0;
    animation: itemPop 0.3s ease-out forwards;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-category:nth-child(1) { animation-delay: 0ms; }
.reward-category:nth-child(2) { animation-delay: 50ms; }
.reward-category:nth-child(3) { animation-delay: 100ms; }
.reward-category:nth-child(4) { animation-delay: 150ms; }
.reward-category:nth-child(5) { animation-delay: 200ms; }
.reward-category:nth-child(6) { animation-delay: 250ms; }

@keyframes itemPop {
    0% { 
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.reward-category-title {
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 12px;
    font-size: 16px;
    text-transform: uppercase;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: #90ee90;
    font-size: 16px;
}

.reward-item-icon {
    font-size: 24px;
    min-width: 32px;
}

.reward-item-image {
    flex-shrink: 0;
}

.reward-item-name {
    flex: 1;
}

.reward-item-rarity {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}

.reward-item-quantity {
    background: rgba(0, 255, 0, 0.2);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: bold;
    color: #ffff00;
    white-space: nowrap;
}

/* Animation pour l'icône de collecte des miradors */
@keyframes miradorFloat {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -10px); }
}

.mirador-collection-icon {
    animation: miradorFloat 2s ease-in-out infinite;
}


/* ============================================
   VICTORY BANNER ANIMATIONS
   ============================================ */
            @keyframes victorySlide {
                from {
                    transform: translateY(-150%);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            
            @keyframes victoryPulse {
                0%, 100% {
                    transform: scale(1) rotate(0deg);
                }
                50% {
                    transform: scale(1.05) rotate(2deg);
                }
            }
            
            #victory-banner {
                animation: victorySlide 0.6s ease-out, victoryPulse 1s infinite;
            }
            
            #victory-banner.hidden {
                animation: none;
            }


/* ============================================
   VICTORY BANNER ANIMATIONS
   ============================================ */
            @keyframes victorySlide {
                from {
                    transform: translateY(-150%);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
            
            @keyframes victoryPulse {
                0%, 100% {
                    transform: scale(1) rotate(0deg);
                }
                50% {
                    transform: scale(1.05) rotate(2deg);
                }
            }
            
            #victory-banner {
                animation: victorySlide 0.6s ease-out, victoryPulse 1s infinite;
            }
            
            #victory-banner.hidden {
                animation: none;
            }

/* ========== SYSTEME METEO DYNAMIQUE ========== */
#weather-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 399;
    overflow: hidden;
}

/* PLUIE */
.weather-raindrop {
    position: absolute;
    top: -20px;
    width: 2px;
    background: linear-gradient(transparent, rgba(174, 194, 224, 0.6));
    animation: rainFall linear infinite;
}
@keyframes rainFall {
    0% { transform: translateY(-20px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(105vh); opacity: 0.3; }
}

/* NEIGE */
.weather-snowflake {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    opacity: 0.7;
    animation: snowFall linear infinite;
}
@keyframes snowFall {
    0% { transform: translateY(-10px) translateX(0px); opacity: 0; }
    10% { opacity: 0.7; }
    50% { transform: translateY(50vh) translateX(30px); }
    100% { transform: translateY(105vh) translateX(-20px); opacity: 0; }
}

/* BROUILLARD */
.weather-fog {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, rgba(200,200,200,0.25) 100%);
    opacity: 0;
    transition: opacity 5000ms ease;
}
.weather-fog.active {
    opacity: 1;
}

/* ORAGE - ECLAIR */
.weather-lightning {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    transition: opacity 0.05s;
}
.weather-lightning.flash {
    animation: lightningFlash 0.15s ease-out;
}
@keyframes lightningFlash {
    0% { opacity: 0; }
    20% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* ========== COFFRES / TRÉSORS ========== */
.treasure-marker { display: flex; align-items: center; justify-content: center; }
.treasure-glow-common { animation: treasurePulse 3s ease-in-out infinite; }
.treasure-glow-rare { animation: treasurePulseRare 2s ease-in-out infinite; }
.treasure-glow-legendary { animation: treasurePulseLegendary 1.5s ease-in-out infinite; }

@keyframes treasurePulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(156,163,175,0.4)); }
    50% { filter: drop-shadow(0 0 10px rgba(156,163,175,0.8)); }
}
@keyframes treasurePulseRare {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)); }
    50% { filter: drop-shadow(0 0 14px rgba(59,130,246,1)); }
}
@keyframes treasurePulseLegendary {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(245,158,11,0.6)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 18px rgba(245,158,11,1)); transform: scale(1.12); }
}
.treasure-tooltip {
    background: rgba(0,0,0,0.8) !important;
    border: 1px solid #00FF00 !important;
    color: #00FF00 !important;
}

/* Safari iOS uniquement (classe posée par index.php <head> selon l'UA) :
   compense le statusbar translucide iOS qui recouvre le HUD et les modales plein écran. */
html.ios-safari-fullpad #player-hud,
html.ios-safari-fullpad #inventory-modal,
html.ios-safari-fullpad #settings-modal,
html.ios-safari-fullpad #quests-modal,
html.ios-safari-fullpad #friends-modal,
html.ios-safari-fullpad #profile-modal,
html.ios-safari-fullpad #bestiary-modal {
    padding-top: 50px !important;
}

/* ============================================================
   ANIMATIONS DE COMBAT — machine à sous et terminal CRT  (audit 2026-08-30)
   ------------------------------------------------------------
   Ces dix @keyframes étaient injectés dans le <head> à l'exécution, par TROIS
   blocs de code distincts :
     index.php (bloc « slot-machine-keyframes »)            — les 10
     systems/battle_system/turn_based_combat.js:1390        — les 10, à l'identique
     systems/battle_system/turn_based_combat.js:1007        — 4 d'entre eux
   Les deux premiers étaient rigoureusement identiques, jusqu'à l'id du <style>
   — si bien que la garde `if (!document.getElementById(...))` rendait le second
   inopérant : 50 lignes maintenues en double pour rien.
   Ils vivent ici désormais, chargés une fois avec la feuille du jeu.
   ============================================================ */
@keyframes slotResultPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes slotResultGlow {
    0%   { text-shadow: 0 0 8px currentColor, 0 0 15px currentColor; }
    50%  { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 0 70px currentColor; }
    100% { text-shadow: 0 0 8px currentColor, 0 0 15px currentColor; }
}
@keyframes slotOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slotContainerEntry {
    from { opacity: 0; transform: scale(0.85) translateY(15px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slotBorderPulse {
    0%   { border-color: rgba(34,197,94,0.25); box-shadow: 0 0 10px rgba(34,197,94,0.05), inset 0 0 30px rgba(0,0,0,0.7); }
    50%  { border-color: rgba(34,197,94,0.6);  box-shadow: 0 0 25px rgba(34,197,94,0.15), inset 0 0 30px rgba(0,0,0,0.7); }
    100% { border-color: rgba(34,197,94,0.25); box-shadow: 0 0 10px rgba(34,197,94,0.05), inset 0 0 30px rgba(0,0,0,0.7); }
}
@keyframes slotTickFlash {
    0%   { opacity: 0.3; }
    50%  { opacity: 1; }
    100% { opacity: 0.3; }
}
@keyframes terminalScanline {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
@keyframes terminalFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
}
@keyframes terminalBootText {
    from { opacity: 0; filter: blur(2px); }
    to   { opacity: 1; filter: blur(0); }
}
@keyframes terminalCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================================
   OUVERTURE DES MODALES DE STRUCTURE  (audit 2026-08-30)
   ------------------------------------------------------------
   Quatre modules injectaient chacun ce même @keyframes dans le <head>, sous
   quatre noms différents et avec un corps rigoureusement identique :
   mirador-modal-grow (modules/mirador/info_modal.js),
   machine-modal-grow (modules/machines/modal.js),
   mairie-modal-grow (modules/city_control/mairie_modal.js),
   city-capture-modal-grow (modules/city_control/city_capture_modal.js).
   Ils pointent désormais tous ici.
   ============================================================ */
@keyframes modal-container-grow {
    from { max-height: 0; opacity: 0; }
    to   { max-height: calc(100dvh - 40px); opacity: 1; }
}

/* EOF: systems/game_styles.css - INTEGRITY_CHECK_OK */