/* --- Cartes de Ressources --- */
.res-group { 
    background: rgba(30, 30, 30, 0.9); border: 1px solid #444; border-radius: 8px;
    padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative; touch-action: pan-y; min-height: auto; gap: 4px;
}
.res-group:hover { transform: translateY(-3px); border-color: var(--theme-accent); background: rgba(40, 40, 40, 1); box-shadow: 0 6px 12px rgba(0,0,0,0.4), 0 0 10px var(--theme-glow); }

.res-group.needs-resource-highlight {
    border-color: var(--theme-danger) !important;
    box-shadow: 0 0 20px var(--theme-danger), inset 0 0 10px var(--theme-danger) !important;
    animation: pulse-border-red 1s infinite alternate;
}

/* Animation Feedback Clic */
@keyframes card-pulse { 0% { transform: scale(1); } 50% { transform: scale(0.98); border-color: var(--theme-accent); box-shadow: inset 0 0 15px var(--theme-accent); } 100% { transform: scale(1); } }
.res-group.action-pulse { animation: card-pulse 0.15s ease-out; }

/* Bouton Toggle Mobile (Caché sur Desktop) */
.mobile-toggle-btn { display: none; }

/* Mode Édition */
.display-panel.edit-mode .res-group { border: 1px dashed var(--theme-tech); cursor: grab; animation: pulse-border 2s infinite; }
.display-panel.edit-mode .res-group:active { cursor: grabbing; }
.res-group.dragging { opacity: 0.4; border: 2px dashed #fff; transform: scale(0.95); }
@keyframes pulse-border { 0% { border-color: #444; } 50% { border-color: var(--theme-tech); } 100% { border-color: #444; } }

.res-info { width: 100%; display: flex; flex-direction: column; align-items: center; }
.res-group h2 { margin: 2px 0; font-size: 1.3em; color: var(--theme-accent); white-space: normal; word-break: break-word; line-height: 1.1; }

/* Couleurs Ressources */
#data-display { color: var(--theme-tech); }
#plasma-display { color: var(--theme-special-1); }
#adamantium-display { color: var(--theme-metal-1); }
#plasteel-display { color: var(--theme-metal-2); }
#warp-display { color: var(--theme-special-2); }
#faith-display, #influence-display { color: var(--theme-secondary); }

/* Masquage infos redondantes */
.res-group .res-info h2 { display: none; }
.res-group .res-info [id$='-rate'] { font-size: 0.8em; color: #999; margin-bottom: 5px; }

/* --- Planètes --- */
.planet-system {
    position: relative; width: 70px; min-height: 70px; display: flex; justify-content: center; align-items: center;
    flex-direction: column; margin-bottom: 2px; flex-shrink: 0;
}
.planet {
    width: 50px; height: 50px; border-radius: 50%; z-index: 2; cursor: pointer; position: relative; overflow: hidden;
    background: transparent; transition: transform 0.1s; flex-shrink: 0; aspect-ratio: 1 / 1;
}
.planet:active { transform: scale(0.95); }

/* Icônes Planètes */
.planet::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.8em; color: rgba(255, 255, 255, 0.7); text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    z-index: 3; pointer-events: none; opacity: 0.8; transition: opacity 0.3s, transform 0.3s;
}
.planet:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.planet.promethium::after { content: '🔥'; }
.planet.data::after { content: '💾'; }
.planet.plasma::after { content: '⚡'; }
.planet.adamantium::after { content: '🧱'; }
.planet.plasteel::after { content: '🏗️'; }
.planet.warp::after { content: '🌀'; }
.planet.biomass::after { content: '🧬'; }

/* Texture Planète (Rotation) */
.planet::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1;
    animation: planet-spin 60s linear infinite;
}
@keyframes planet-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Styles Spécifiques Planètes */
.planet.promethium { box-shadow: inset -15px -15px 30px rgba(0,0,0,0.9), 0 0 20px rgba(197, 160, 89, 0.3); }
.planet.promethium::before { background: radial-gradient(circle at 50% 50%, #c5a059, #5d4037, #222); background-size: 200% 200%; }

.planet.data { box-shadow: inset -10px -10px 30px rgba(0,0,0,0.8), 0 0 25px rgba(0, 188, 212, 0.6), inset 0 0 10px #00bcd4; border: 1px solid rgba(0, 188, 212, 0.5); }
.planet.data::before { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 188, 212, 0.2) 5px, rgba(0, 188, 212, 0.2) 6px), radial-gradient(circle at 50% 50%, #4dd0e1, #006064, #000); animation-duration: 20s; }

.planet.plasma { box-shadow: inset -5px -5px 20px rgba(0,0,0,0.5), 0 0 30px var(--theme-special-1), 0 0 60px var(--theme-special-1); animation: pulse-plasma 3s infinite alternate; }
.planet.plasma::before { background: radial-gradient(circle at 50% 50%, #fff, #f06292, #880e4f, #330000); }
@keyframes pulse-plasma { from { box-shadow: 0 0 25px var(--theme-special-1); } to { box-shadow: 0 0 45px var(--theme-special-1); } }

.planet.adamantium { box-shadow: inset -15px -15px 30px rgba(0,0,0,0.9), 0 0 20px var(--theme-metal-1); }
.planet.adamantium::before { background: radial-gradient(circle at 50% 50%, #fff, #cfd8dc, #546e7a, #263238); }

.planet.plasteel { box-shadow: inset -15px -15px 30px rgba(0,0,0,0.9), 0 0 15px var(--theme-metal-2); }
.planet.plasteel::before { background: linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.3) 50%), radial-gradient(circle at 50% 50%, #b0bec5, #455a64, #1c2326); background-size: 20px 20px, 100% 100%; }

.planet.warp { box-shadow: inset 0 0 40px #000, 0 0 30px var(--theme-special-2); border: 1px solid var(--theme-special-2); }
.planet.warp::before { background: radial-gradient(circle at 60% 40%, #e1bee7, #9c27b0, #4a148c, #000); animation-duration: 10s; animation-direction: reverse; }

.planet.biomass { box-shadow: inset 0 0 30px #000, 0 0 25px #8e44ad; animation: pulse-plasma 2s infinite alternate; }
.planet.biomass::before { background: radial-gradient(circle at 50% 50%, #d2b4de, #8e44ad, #4a235a, #1a001a); animation-duration: 15s; }

.planet-system.locked .planet { box-shadow: inset 0 0 20px #000; background: #333; }
.planet-system.locked .planet::after, .planet-system.locked .planet::before { display: none; }
.planet-label { margin-top: 10px; font-size: 0.6em; text-align: center; color: #888; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }

/* Mineurs en orbite */
.miner-orbit { position: absolute; width: 100%; height: 100%; animation: spin linear infinite; pointer-events: none; }
.miner-dot { position: absolute; top: 0; left: 50%; width: 6px; height: 6px; background: var(--theme-accent); border-radius: 50%; box-shadow: 0 0 5px var(--theme-accent); transform: translateX(-50%); }
.miner-dot.data { background: var(--theme-tech); box-shadow: 0 0 5px var(--theme-tech); }
.miner-dot.plasma { background: var(--theme-special-1); box-shadow: 0 0 5px var(--theme-special-1); }
.miner-dot.adamantium { background: var(--theme-metal-1); box-shadow: 0 0 5px var(--theme-metal-1); }
.miner-dot.plasteel { background: var(--theme-metal-2); box-shadow: 0 0 5px var(--theme-metal-2); }
.miner-dot.warp { background: var(--theme-special-2); box-shadow: 0 0 5px var(--theme-special-2); }

/* --- Contrôles d'Assignation --- */
.card-controls { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 5px 0; width: 100%; }
.card-controls button {
    background: linear-gradient(to bottom, #333, #222); color: var(--theme-accent); border: 1px solid var(--theme-accent);
    width: auto; flex: 1; max-width: 32px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 0.9em;
    font-weight: bold; font-family: 'Orbitron', sans-serif; transition: all 0.2s; display: flex; justify-content: center; align-items: center; padding: 0; line-height: 1;
}
.card-controls button:active { transform: scale(0.95); }
.card-controls button[data-dir="-1"]:hover { border-color: var(--theme-danger); color: var(--theme-danger); box-shadow: 0 0 8px var(--theme-danger); }
.card-controls button[data-dir="1"]:hover { border-color: var(--theme-success); color: var(--theme-success); box-shadow: 0 0 8px var(--theme-success); }
.card-controls span { display: inline-block; width: auto; min-width: 20px; text-align: center; font-size: 0.9em; font-weight: bold; }

/* Overdrive */
.res-group > .overdrive-btn { margin-top: 5px; background: #222; border: 1px solid #555; color: #666; width: 100%; border-radius: 4px; }
.res-group > .overdrive-btn:hover { color: #fff; border-color: #fff; }
.overdrive-active { background: var(--theme-danger) !important; color: #fff !important; border-color: var(--theme-danger) !important; box-shadow: 0 0 10px var(--theme-danger); animation: pulse-button 0.5s infinite; }
.res-group:has(.overdrive-active) { box-shadow: 0 0 25px var(--theme-danger); border-color: var(--theme-danger); animation: pulse-border-red 1s infinite alternate; }
@keyframes pulse-border-red { from { box-shadow: 0 0 15px var(--theme-danger); } to { box-shadow: 0 0 35px var(--theme-danger); } }

/* --- Panneau Travailleurs --- */
.worker-panel {
    background: #222; border: 1px solid #444; padding: 10px; width: 100%; box-sizing: border-box;
    margin-bottom: 20px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch;
}
.worker-panel h3 { margin-top: 0; font-size: 1em; color: #fff; border-bottom: 1px solid #444; grid-column: 1 / -1; text-align: center; padding-bottom: 5px; margin-bottom: 5px; }
.worker-panel p {
    grid-column: 1 / -1; background: #151515; border: 1px solid #333; padding: 8px; border-radius: 4px;
    text-align: center; font-family: 'Orbitron', sans-serif; font-size: 1.1em; color: var(--theme-accent); margin: 0; box-shadow: inset 0 0 10px #000;
}
.worker-panel .btn-buy { width: 100%; margin-bottom: 0; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.85em; padding: 10px 5px; }
#btn-buy-servitor { grid-column: 1 / 2; }
#btn-buy-max-servitor { grid-column: 2 / 3; background: linear-gradient(to bottom, #333, #222); border-color: #666; color: #aaa; }
#btn-buy-max-servitor:hover { border-color: #fff; color: #fff; }
#btn-favor, #btn-waaagh { grid-column: 1 / -1; margin-top: 5px; font-size: 1em; padding: 12px; }
#btn-favor { background: linear-gradient(45deg, #222, #3a2a1a, #222); border: 1px solid var(--theme-accent); color: var(--theme-accent); }
#btn-waaagh { background: linear-gradient(to bottom, #1a331a, #0f220f); border-color: #2ecc71; color: #2ecc71; }
#btn-rebalance { grid-column: 1 / -1; margin-top: 5px; }

/* --- Événements & Minigames --- */
.event-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(10, 0, 0, 0.95); border: 4px solid var(--theme-danger); padding: 40px;
    z-index: 2000; text-align: center; box-shadow: 0 0 100px var(--theme-danger);
    width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
}
.event-stage {
    width: 100%; height: 150px; background: #000; border: 1px solid #333; 
    position: relative; overflow: hidden; margin-bottom: 10px;
    background-image: radial-gradient(circle, #1a1a1a 0%, #000 100%);
}
.enemy-sprite {
    width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 4em; display: flex; justify-content: center; align-items: center; animation: floatEnemy 2s infinite ease-in-out;
}
@keyframes floatEnemy { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -60%) scale(1.1); } }
.enemy-sprite.hit { animation: shake 0.2s; filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5); }
.enemy-sprite.ork::after { content: '👹'; filter: drop-shadow(0 0 10px #0f0); }
.enemy-sprite.eldar::after { content: '👽'; filter: drop-shadow(0 0 10px var(--theme-tech)); }
.enemy-sprite.tyranid::after { content: '🦂'; filter: drop-shadow(0 0 10px var(--theme-danger)); }
.enemy-sprite.chaos::after { content: '👁️'; filter: drop-shadow(0 0 20px var(--theme-special-2)); animation: pulse-chaos 1s infinite; }
.enemy-sprite.human::after { content: '🆘'; }
@keyframes pulse-chaos { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 30px var(--theme-special-2));} 100% { transform: scale(1); opacity: 0.8; } }

.event-timer-bar { width: 100%; height: 10px; background: #333; margin-top: 10px; }
#event-progress { height: 100%; background: var(--theme-danger); transition: width 0.1s linear; }
.btn-event { background: var(--theme-danger); color: white; font-size: 1.5em; font-weight: bold; border: 2px solid #500; padding: 15px; cursor: pointer; width: 100%; }
.btn-event:active { transform: scale(0.95); }

/* Minigames */
.minigame-area { width: 100%; height: 200px; background: #111; border: 1px solid #444; position: relative; overflow: hidden; cursor: crosshair; }
.mg-bar-container { width: 80%; height: 20px; background: #333; margin: 90px auto; border: 2px solid #fff; }
.mg-bar-fill { height: 100%; background: var(--theme-success); width: 0%; transition: width 0.05s; }
.mg-timing-zone { width: 100%; height: 40px; background: #222; position: absolute; top: 80px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.mg-target-zone { width: 40px; height: 100%; background: rgba(0, 255, 255, 0.3); margin: 0 auto; border-left: 1px solid var(--theme-tech); border-right: 1px solid var(--theme-tech); }
.mg-cursor { width: 4px; height: 100%; background: #f0f; position: absolute; left: 0; top: 0; }
.mg-target { position: absolute; width: 30px; height: 30px; background: radial-gradient(circle, var(--theme-danger), #500); border-radius: 50%; cursor: pointer; border: 2px solid #fff; }

/* Boss Event */
.event-overlay.boss-event {
    top: 20px; bottom: auto; transform: translateX(-50%); border-color: #8a2be2;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5); background: rgba(20, 10, 30, 0.9);
    width: 600px; max-width: 95%; padding: 15px;
}
.event-overlay.boss-event h2 { color: #8a2be2 !important; text-shadow: 0 0 10px #8a2be2 !important; font-size: 1.5em !important; margin-bottom: 5px; }
.event-overlay.boss-event .btn-event { padding: 8px; font-size: 1.2em; margin-top: 5px; }
.event-overlay.boss-event #event-progress { background: #8a2be2; }

/* --- Factions --- */
.faction-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; }
#faction-modal { max-width: 900px; }
.faction-card { background: #222; border: 2px solid #444; padding: 20px; width: 200px; cursor: pointer; transition: all 0.3s; text-align: left; }
.faction-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.faction-card h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 10px; }
.faction-bonus { color: var(--theme-success); font-size: 0.9em; margin: 10px 0; }
.faction-ship { color: #00bcd4; font-size: 0.9em; font-style: italic; }
.faction-mechanic { color: #ccc; font-size: 0.85em; font-style: italic; margin-top: 10px; }
.faction-desc { color: #888; font-size: 0.8em; margin-bottom: 15px; }
@media (max-width: 768px) {
    .faction-container { flex-direction: column; align-items: center; }
    .faction-card { width: 100%; box-sizing: border-box; }
}

/* --- Artefacts & Traits --- */
.artifact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; padding: 10px; background: #151515; border: 1px solid #333; }
.artifact-slot { width: 60px; height: 60px; background: #222; border: 1px solid #444; display: flex; justify-content: center; align-items: center; font-size: 1.5em; cursor: help; transition: all 0.2s; }
.artifact-slot:hover { border-color: #9b59b6; background: #2a2a2a; }
.artifact-slot.empty { opacity: 0.3; border-style: dashed; }
.artifact-slot.common { border-color: #b0bec5; box-shadow: inset 0 0 5px #b0bec5; }
.artifact-slot.rare { border-color: #ffd700; box-shadow: inset 0 0 10px #ffd700; }
.artifact-slot.legendary { border-color: #ff4500; box-shadow: inset 0 0 15px #ff4500; animation: pulse-legendary 2s infinite; }
@keyframes pulse-legendary { 0% { box-shadow: inset 0 0 10px #ff4500; } 50% { box-shadow: inset 0 0 25px #ff4500; } 100% { box-shadow: inset 0 0 10px #ff4500; } }

.trait-container { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.trait-card { background: #222; border: 1px solid #fff; padding: 15px; width: 150px; cursor: pointer; transition: transform 0.2s; text-align: center; }
.trait-card:hover { transform: scale(1.05); background: #333; }
.trait-name { color: var(--theme-accent); font-weight: bold; margin-bottom: 5px; }
.trait-desc { font-size: 0.8em; color: #ccc; }

/* --- Effets Visuels --- */
.particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: explode 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes explode { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }
.floating-text { position: absolute; font-weight: 900; font-size: 1em; pointer-events: none; z-index: 100; animation: floatUp 1.2s ease-out forwards; text-shadow: 0 0 3px #000; white-space: nowrap; }
@keyframes floatUp { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 20% { transform: translateY(-5px) scale(1.1); opacity: 1; } 100% { transform: translateY(-40px) scale(1); opacity: 0; } }

/* --- Mobile Optimizations (Mode Compact) --- */
@media (max-width: 768px) {
    /* Transformation en grille compacte avec accordéon */
    .res-group {
        display: grid;
        grid-template-columns: 40px 1fr 30px; /* Planète/Overdrive | Infos | Toggle */
        gap: 2px 8px;
        padding: 4px;
        min-height: auto;
        align-items: center;
    }

    .planet-system { grid-column: 1; grid-row: 1 / 3; width: 40px; min-height: 40px; margin: 0; }
    .planet { width: 36px; height: 36px; }
    .planet::after { font-size: 1.2em; }
    .planet-label { display: none; }
    
    /* Astuce : display: contents permet de placer les enfants de res-info directement dans la grille parente */
    .res-info { display: contents; }

    .res-group p { 
        display: block; /* On réaffiche le nom pour combler le vide en haut */
        grid-column: 2 / 4; grid-row: 1; 
        margin: 0; font-size: 0.8em; color: #aaa; text-align: left; line-height: 1.2; align-self: end;
    }
    .res-group small { /* Rate */
        grid-column: 2 / 4; grid-row: 2;
        font-size: 0.75em; text-align: left; margin: 0; opacity: 0.8; align-self: start;
    }
    
    /* Bouton Overdrive (Colonne 1, Ligne 3) */
    .res-group .overdrive-btn {
        grid-column: 1; grid-row: 3;
        margin-top: 4px; height: 28px; line-height: 28px; font-size: 0.8em; padding: 0; width: 100%;
    }

    /* Montant (Colonne 2, Ligne 3) - Entre Overdrive et Toggle */
    .res-group .res-info h2 { 
        display: block; /* Force l'affichage (écrase le display:none du desktop) */
        grid-column: 2; grid-row: 3; 
        margin: 4px 0 0 0; font-size: 1.1em; text-align: center; line-height: 28px;
    }

    /* Bouton Toggle (+) (Colonne 3, Ligne 3) */
    .mobile-toggle-btn {
        display: flex;
        grid-column: 3; grid-row: 3;
        width: 100%; height: 28px; margin-top: 4px;
        background: rgba(255,255,255,0.05); border: 1px solid #444; color: #aaa;
        border-radius: 4px; align-items: center; justify-content: center;
        cursor: pointer; font-size: 1.2em; line-height: 1; padding: 0;
    }
    .res-group.expanded .mobile-toggle-btn { background: var(--theme-accent); color: #000; border-color: var(--theme-accent); }

    /* Contrôles (Masqués par défaut) */
    .card-controls {
        grid-column: 1 / -1; grid-row: 4;
        display: none; /* Caché */
        flex-direction: row; width: 100%; gap: 5px; margin-top: 5px;
        padding-top: 5px; border-top: 1px solid #333;
    }
    .res-group.expanded .card-controls { display: flex; }
    
    .card-controls button { height: 30px; font-size: 1em; flex: 1; max-width: none; width: auto; }
    .card-controls span { font-size: 0.9em; min-width: 30px; }

    /* Ajustement panneau travailleurs */
    .worker-panel { padding: 5px; gap: 5px; margin-bottom: 10px; }
    }

    /* Ajustement panneau travailleurs */
    .worker-panel { padding: 5px; gap: 5px; margin-bottom: 10px; }
    .worker-panel p { font-size: 0.9em; padding: 4px; }
    #btn-favor, #btn-waaagh { padding: 8px; font-size: 0.9em; }


/* --- Fix Mobile Crusade Map --- */
#crusade-container, #crusade-map {
    touch-action: none; /* Indispensable pour le pinch-to-zoom JS */
}