:root {
    --bg-color: #0c0e12;
    --panel-color: #181c24;
    --grid-player: #1e3228;
    --grid-enemy: #3c1e1e;
    --gold: #e6b93c;
    --text-color: #e6ebf0;
    --health-color: #2ecc71;
    --health-bg: #b42828;
}

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

h1 {
    color: var(--gold);
    margin: 0;
    font-size: 28px;
    text-shadow: 0 0 10px rgba(230, 185, 60, 0.3);
}

#sector-selector {
    background: var(--panel-color);
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}

#help-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

#game-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.top-panel {
    background-color: var(--panel-color);
    border: 1px solid #3c414b;
    border-radius: 8px;
    min-height: 160px;
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.battle-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;
}

.grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

.player-side { background-color: rgba(30, 50, 40, 0.4); }
.enemy-side { background-color: rgba(60, 30, 30, 0.4); }

/* Effet de Bouclier pour le Taunt */
.shield-active {
    box-shadow: 0 0 15px #3498db, inset 0 0 10px #3498db;
    border-color: #3498db !important;
    animation: shieldPulse 1.5s infinite;
}

@keyframes shieldPulse {
    0% { box-shadow: 0 0 10px #3498db; }
    50% { box-shadow: 0 0 25px #3498db; }
    100% { box-shadow: 0 0 10px #3498db; }
}

#center-panel .enemy-side {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #c0392b;
    width: 100%;
}

/* Intentions Ennemies */
.enemy-intent {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 20;
    white-space: nowrap;
}
.intent-icon { font-size: 14px; }
.intent-value { color: var(--gold); font-weight: bold; font-size: 12px; }

.char-portrait {
    width: 100%;
    height: 70px;
    background-color: #1a1e26;
    border: 1px solid #3c414b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4a5160;
    font-size: 10px;
    margin: 4px 0;
    border-radius: 2px;
    text-transform: uppercase;
    position: relative; /* Pour positionner les bonus */
}

.status-bar {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.status-item {
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.2);
}
.status-item.buff-atk { color: #f1c40f; border-color: #f1c40f; }
.status-item.buff-armor { color: #3498db; border-color: #3498db; }
.status-item.debuff-weakness { color: #9b59b6; border-color: #9b59b6; }
.status-item.debuff-vulnerable { color: #e74c3c; border-color: #e74c3c; }

.slot {
    width: 125px;
    height: 175px;
    border: 2px dashed #4a5160;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(0,0,0,0.2);
}

.char-card {
    width: 100%;
    height: 100%;
    background-color: #242b35;
    border: 1px solid #525f75;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: grab;
    transition: transform 0.1s, border-color 0.2s;
}

.char-card:active { cursor: grabbing; }
.char-card.selected { border: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold); }
.char-card.dead { opacity: 0.4; filter: grayscale(100%); }

/* Combos Visuels */
.combo-active {
    box-shadow: inset 0 0 5px rgba(230, 185, 60, 0.4);
    border: 1px solid var(--gold);
}

.combo-container {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 3px;
}

.combo-badge {
    background: var(--gold);
    color: #000;
    font-size: 7px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 3px;
    text-transform: uppercase;
}

.char-quantity {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--gold);
    color: #000;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid #000;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Couleurs par rôle */
.role-tank { border-left: 4px solid #3498db !important; } /* Gardé pour les ennemis */
.role-assassin { border-left: 4px solid #9b59b6 !important; }
.role-healer { border-left: 4px solid #2ecc71 !important; } 
.role-warrior { border-left: 4px solid #e67e22 !important; }
.role-sorcerer { border-left: 4px solid #f1c40f !important; }

.char-name { 
    font-weight: bold; 
    color: #fff; 
    text-align: center; 
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-stats, .char-level { text-align: center; color: #a0aab5; }

.hp-bar-container {
    width: 100%;
    height: 14px;
    background-color: var(--health-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-top: auto; /* Pousse la barre vers le bas */
    position: relative;
    border: 1px solid rgba(0,0,0,0.3);
}

.hp-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px black;
}

.armor-badge { color: #3498db; font-weight: bold; margin-left: 5px; }

.char-role-tag {
    background: rgba(0,0,0,0.4);
    font-size: 8px;
    text-align: center;
    padding: 2px 0;
    border-radius: 2px;
    margin-top: 4px;
}

.equip-line {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-bar {
    height: 100%;
    background-color: var(--health-color);
    transition: width 0.2s ease-out;
}

.bottom-panel {
    background-color: var(--panel-color);
    border: 1px solid #3c414b;
    border-radius: 8px;
    padding: 15px;
}

.sub-panel h2 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.barracks-grid {
    min-height: 100px;
    background-color: rgba(0,0,0,0.15);
    border-radius: 6px;
    border: 1px solid #2d323f;
}

.controls-section {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.btn {
    background-color: var(--gold);
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s, opacity 0.2s;
}

.btn:hover { background-color: #f1c40f; }
.btn.disabled { background-color: #4a5160; color: #7f8c8d; cursor: not-allowed; }

#log-console {
    background-color: #090b0e;
    border: 1px solid #232731;
    border-radius: 4px;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    color: #5df;
    max-height: 150px; /* Ajout d'une hauteur maximale pour l'ascenseur */
    overflow-y: auto;
    box-sizing: border-box;
}

#log-console p { margin: 3px 0; }

.projectile {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: var(--start-x);
    transform: translateX(-50%);
    z-index: 100;
    animation: flyEffect 0.25s linear forwards;
}

@keyframes flyEffect {
    0% { left: var(--start-x); opacity: 1; }
    100% { left: var(--end-x); opacity: 1; }
}

.death-effect {
    position: absolute;
    width: 60px;
    height: 60px;
    left: var(--x);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 99;
    animation: impactExplosion 0.2s ease-out forwards;
}

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

.floating-text {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 4px black;
    top: var(--y); left: var(--x);
    animation: floatUp 0.6s ease-out forwards;
    z-index: 105;
    pointer-events: none;
}

@keyframes floatUp {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -40px); opacity: 0; }
}

.floating-text.damage { color: #ff3333; font-size: 20px; font-weight: 900; }
.floating-text.heal { color: #2ecc71; font-size: 18px; font-weight: bold; }

.char-card.flash-damage { animation: flashRed 0.25s ease-out; }
.char-card.flash-heal { animation: flashGreen 0.25s ease-out; }

/* Overlay Help & Game Over */
.overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.overlay-content {
    background: var(--panel-color);
    border: 2px solid var(--gold);
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.help-item {
    border-bottom: 1px solid #3c414b;
    padding-bottom: 5px;
}

.game-over-screen {
    text-align: center;
}

.game-over-screen h2 {
    color: #e74c3c;
    font-size: 40px;
    margin-bottom: 10px;
}

@keyframes flashRed {
    0% { background-color: rgba(231, 76, 60, 0.6); }
    100% { background-color: #242b35; }
}

@keyframes flashGreen {
    0% { background-color: rgba(46, 204, 113, 0.6); }
    100% { background-color: #242b35; }
}

.item-tooltip {
    position: absolute;
    background-color: #2c3e50; /* Gris-bleu foncé */
    color: #ecf0f1; /* Texte clair */
    border: 1px solid #34495e; /* Bordure légèrement plus foncée */
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
    pointer-events: none; /* Permet d'interagir avec les éléments derrière */
    display: none; /* Caché par défaut */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.map-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
}

#map-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* Laisse cliquer les boutons derrière */
    z-index: 0;
}

.map-row {
    display: flex;
    gap: 40px;
    justify-content: center;
    z-index: 1; /* Par dessus le SVG */
}

.map-node {
    width: 60px;
    height: 60px;
    border: 2px solid #4a5160;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1e26;
    opacity: 0.5;
    transition: 0.3s;
}

.map-node.accessible {
    opacity: 1;
    border-color: var(--gold);
    cursor: pointer;
}

.map-node.current { background: #2c3e50; border-color: #5df; opacity: 1; }
.map-node .node-icon { font-size: 24px; }

.potential-target {
    border: 2px solid #e74c3c !important;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
    cursor: crosshair !important;
    transform: scale(1.05);
    transition: all 0.2s;
}

/* Style pour les cartes et unités améliorées */
.is-upgraded .card-title,
.is-upgraded .char-name,
.upgraded-text {
    color: #2ecc71 !important;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
}

.combat-main-scene {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    margin-bottom: 20px;
}

.player-combat-interface {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--panel-color);
    padding: 15px;
    border-top: 2px solid var(--gold);
    min-height: 250px;
    justify-content: flex-end;
}

.energy-display {
    font-size: 24px;
    color: #f1c40f;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

.deck-status {
    color: #bdc3c7;
    font-size: 14px;
    margin-bottom: 10px;
}

/* --- Système de Cartes --- */
.hand-container {
    display: flex;
    gap: -20px;
    padding: 20px 50px;
    perspective: 1000px;
    height: 180px;
    align-items: flex-end;
}

.upgrade-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px;
    width: 100%;
    max-height: 55vh;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid #3c414b;
}

.upgrade-card-list .hand-card {
    transform: none !important;
    margin: 0 auto;
    width: 120px;
    height: 180px;
    animation: none !important;
}

.upgrade-card-list .hand-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 15px var(--gold);
    z-index: 10;
}

.upgrade-card-list .card-upgrade-preview {
    margin-top: auto;
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.2);
    background: rgba(46, 204, 113, 0.05);
    border-radius: 0 0 8px 8px;
}

.upgrade-arrow {
    font-size: 8px;
    color: var(--gold);
    text-align: center;
    margin-bottom: 3px;
}

.card-status-tag {
    font-size: 9px;
    color: #95a5a6;
    text-align: center;
    margin-top: auto;
    font-style: italic;
}

.hand-card {
    width: 100px;
    height: 140px;
    background: linear-gradient(135deg, #2c3e50, #1a252f);
    border: 2px solid #34495e;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    padding: 8px;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Couleurs de fond par Deck (Source) */
.hand-card.color-neutral { background: linear-gradient(135deg, #34495e, #2c3e50); border-color: #7f8c8d; }
.hand-card.color-red     { background: linear-gradient(135deg, #7b241c, #4a1510); border-color: #c0392b; }
.hand-card.color-blue    { background: linear-gradient(135deg, #1a5276, #0e3146); border-color: #2980b9; }
.hand-card.color-green   { background: linear-gradient(135deg, #1e8449, #114d2a); border-color: #27ae60; }
.hand-card.color-curse   { background: linear-gradient(135deg, #5b2c6f, #3a1d47); border-color: #8e44ad; }

.hand-card:hover {
    transform: translateY(-50px) scale(1.2) rotate(0deg) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
    border-color: var(--gold);
    z-index: 500;
}

.hand-card.new-card {
    animation: cardDraw 0.4s ease-out;
}

@keyframes cardDraw {
    from { transform: translateY(200px) rotate(0deg); opacity: 0; }
    to { opacity: 1; }
}
.stat-bonus {
    color: #2ecc71; /* Vert flash */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
}

.stat-malus {
    color: #e74c3c; /* Rouge flash */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.4);
}

.stat-normal {
    font-weight: bold;
}
.selected-card {
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px var(--gold);
    z-index: 1000 !important;
}

.card-cost {
    position: absolute;
    top: -10px; left: -10px;
    background: #2980b9;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; border: 2px solid white;
}

.card-title { 
    font-size: 10px; 
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 5px; 
    text-align: center; 
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

.type-attack { border-top: 4px solid #c0392b !important; }
.type-skill { border-top: 4px solid #2980b9 !important; }
.type-power { border-top: 4px solid #f1c40f !important; }
.type-status { border-top: 4px solid #95a5a6 !important; background: #2c3e50 !important; }
.type-curse { border-top: 4px solid #8e44ad !important; background: #2f1b3d !important; }
/* --- GESTION DES RARETÉS DES CARTES --- */
.rarity-common {
    border: 2px solid #7f8c8d !important; /* Gris */
    box-shadow: 0 0 4px rgba(127, 140, 141, 0.2);
}
.rarity-uncommon {
    border: 2px solid #2ecc71 !important; /* Vert */
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}
.rarity-rare {
    border: 2px solid #3498db !important; /* Bleu */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
}
.rarity-epic {
    border: 2px solid #9b59b6 !important; /* Violet */
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.8);
}
.rarity-legendary {
    border: 2px solid #f1c40f !important; /* Doré */
    box-shadow: 0 0 15px rgba(241, 196, 15, 1);
    animation: goldCardGlow 2.5s infinite alternate;
}

/* Badge textuel de rareté sous le titre */
.card-rarity-badge {
    font-size: 8px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 4px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}
.rarity-common .card-rarity-badge { color: #bdc3c7; }
.rarity-uncommon .card-rarity-badge { color: #2ecc71; }
.rarity-rare .card-rarity-badge { color: #3498db; }
.rarity-epic .card-rarity-badge { color: #9b59b6; }
.rarity-legendary .card-rarity-badge { color: #f1c40f; }

@keyframes goldCardGlow {
    0% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.6); }
    100% { box-shadow: 0 0 18px rgba(241, 196, 15, 1); }
}
.card-keywords { font-size: 7px; color: var(--gold); text-align: center; margin-top: 3px; font-style: italic; }
.card-desc { font-size: 9px; color: #bdc3c7; flex-grow: 1; }
.card-source { font-size: 8px; color: var(--gold); text-align: right; font-style: italic; }

/* Styles pour les rôles de héros */
.role-guerrier { border-left: 4px solid #c0392b !important; } /* Rouge pour Primaris */
.role-sorcier { border-left: 4px solid #2980b9 !important; }  /* Bleu pour Archiviste */
.role-soigneur { border-left: 4px solid #27ae60 !important; } /* Vert pour Apothicaire */

/* Styles pour les ancres de héros et ennemis */
#hero-anchor {
    width: 150px; /* Taille du héros */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-hero-choice {
    background: var(--panel-color);
    border: 1px solid var(--gold);
    padding: 15px;
    margin: 10px;
    cursor: pointer;
    width: 200px;
    transition: 0.2s;
}

.btn-hero-choice:hover { transform: scale(1.05); border-color: white; }
.mini-deck { font-size: 9px; color: #888; margin-top: 10px; border-top: 1px solid #333; padding-top: 5px; }

#relics-bar { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; }
.relic-icon { font-size: 20px; cursor: help; background: rgba(0,0,0,0.5); border-radius: 50%; padding: 5px; }