/* --- VARIABLES & FONTS --- */
:root {
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-title: 'Orbitron', sans-serif;

    --bg-main: #1a1a1a;
    --bg-content: #242424;
    --bg-card: #2f2f2f;
    --bg-card-secondary: #20232a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-input: #1a1a1a;
    --border-color: #444;
    --border-strong: #666;
    --text-main: #e0e0e0;
    --text-secondary: #a0a0a0;
    --button-text-color: #ffffff;
    
    --accent-orange: #ff6b05;
    --accent-blue: #00e5ff;
    --accent-yellow: #ffc400;
    --accent-red: #ff1744;
    --accent-success: #00e676;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* --- BASE STYLES --- */
body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20px;
}

/* --- GAME STRUCTURE --- */
#game-wrapper {
    display: none;
    width: 100%;
    max-width: 1600px;
    min-height: calc(100vh - 40px); /* (100vh moins le padding du body) */
    height: auto; /* <-- SOLUTION */
    gap: 20px;
}
#game-wrapper.active { display: flex; }

#sidebar { width: 280px; flex-shrink: 0; background-color: var(--bg-content); border: 1px solid var(--border-color); border-radius: 10px; padding: 15px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
#main-content-area { flex-grow: 1; display: flex; min-width: 0; }
#game-container { width: 100%; background-color: var(--bg-content); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }

/* --- SIDEBAR --- */
.sidebar-section h2 { font-family: var(--font-title); font-size: 1.2em; color: var(--accent-blue); margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; }
#username-display { color: var(--text-main); font-family: var(--font-main); font-size: 0.9em; }
#sidebar-resources, #sidebar-queues-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sidebar-resource { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 0.95em; }
.sidebar-resource > .fas { font-size: 1.2em; color: var(--accent-orange); width: 20px; text-align: center; }
.sidebar-resource .value { font-weight: bold; font-family: var(--font-title); }
.production-rate { font-size: 0.8em; color: var(--accent-success); display: none; }
.resource-bar { width: 100%; height: 8px; background-color: var(--bg-main); border-radius: 4px; overflow: hidden; margin-top: 4px; border: 1px solid var(--border-color); }
.resource-fill { height: 100%; background-color: var(--accent-orange); border-radius: 4px; transition: width 0.3s ease; }
#sidebar-queues-list li { background-color: var(--bg-card-secondary); padding: 8px; border-radius: 4px; font-size: 0.9em; }

/* --- MAIN NAVIGATION --- */
#main-tabs { display: flex; background-color: var(--bg-main); padding: 0 10px; border-bottom: 2px solid var(--accent-orange); }
.main-tab-button { position: relative; background-color: transparent; color: var(--text-secondary); border: none; padding: 15px 20px; cursor: pointer; font-size: 1em; font-family: var(--font-title); transition: all 0.2s ease-in-out; border-bottom: 3px solid transparent; }
.main-tab-button:hover { color: var(--text-main); background-color: var(--bg-hover); }
.main-tab-button.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.main-tab-button .fas { margin-right: 8px; }

/* --- TAB CONTENT --- */
#tab-content-container { padding: 20px; flex-grow: 1; }
.tab-content {
    display: none;
    flex-direction: column;
    height: auto; /* <-- SOLUTION */
}
.tab-content.active { display: flex; }
.sub-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.sub-tab-button { position: relative; background-color: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 5px; padding: 8px 12px; cursor: pointer; transition: all 0.2s ease; }
.sub-tab-button:hover { background-color: var(--bg-hover); color: var(--text-main); border-color: var(--border-strong); }
.sub-tab-button.active { background-color: var(--accent-orange); color: var(--button-text-color); font-weight: bold; border-color: var(--accent-orange); }
#gestion-sub-tab-content, #communaute-sub-tab-content, #alliance-sub-tab-content, #evenement-sub-tab-content {
    flex-grow: 1;
    position: relative;
    min-height: 0; /* Prevents flex container from overflowing */
}
.sub-tab-content { display: none; height: auto; }
.sub-tab-content.active { display: flex; flex-direction: column; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.notification-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-red);
    border-radius: 50%;
    border: 1px solid var(--bg-content);
}

.content-title {
    margin-top: 0;
}

.content-subtitle {
    font-family: var(--font-title);
    color: var(--accent-blue);
    margin: 20px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.2em;
}

.section-divider {
    border: none;
    height: 1px;
    background-color: var(--border-strong);
    margin: 30px 0;
}

/* --- NEW HORIZONTAL CARD STYLES --- */
.section-container.horizontal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.item-card.horizontal {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 20px;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    min-height: 130px;
}

.item-card.horizontal .item-image {
    width: 130px;
    height: 130px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
}

.item-card.horizontal .item-details {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.item-card.horizontal .item-details h3 {
    margin: 0 0 10px 0;
    font-family: var(--font-title);
    font-size: 1.3em;
}

.item-card.horizontal .item-details h3 span {
    font-size: 0.8em;
    color: var(--accent-blue);
    margin-left: 10px;
}

.item-card.horizontal .item-details p {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0;
    flex-grow: 1;
    line-height: 1.5;
}

.item-card.horizontal .item-actions {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: flex-end;
}

.item-card.horizontal .costs {
    display: flex;
    gap: 10px; /* Réduit légèrement l'espace (était 15px) */
    flex-wrap: wrap; /* INDISPENSABLE : Autorise le retour à la ligne */
    justify-content: flex-end; /* Aligne les coûts vers la droite (côté actions) */
    max-width: 100%; /* Empêche de dépasser le parent */
}

/* Ajout optionnel pour réduire la taille de la police des coûts très longs */
.item-card.horizontal .cost-item {
    font-size: 0.9em; /* Légèrement plus petit */
    white-space: nowrap; /* Garde l'icône et le nombre ensemble */
}
.cost-item.not-enough { color: var(--accent-red); }

.item-card.horizontal .time {
    font-size: 1em;
    color: var(--text-secondary);
    text-align: right;
}

.requirement-warning { 
    font-size: 0.8em; 
    color: var(--accent-yellow); 
}
.max-level-text {
    font-style: italic;
    color: var(--accent-success);
}

/* --- BUTTONS --- */
.primary-button, .danger-button, .secondary-button { padding: 10px 15px; color: var(--button-text-color); border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 1em; text-transform: uppercase; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary-button { background-color: var(--accent-orange); }
.danger-button { background-color: var(--accent-red); }
.secondary-button { background-color: #4a4a4a; }
.full-width { width: 100%; }
.small-btn { padding: 5px 10px; font-size: 0.8em; }
button:disabled { background-color: #555 !important; color: #999 !important; cursor: not-allowed !important; }
button:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-2px); }

/* --- QUEUE ITEMS --- */
.queue-info-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.queue-title {
    font-size: 1em;
    color: var(--text-secondary);
}
.queue-info-card .time-left { font-family: var(--font-title); font-size: 1.2em; color: var(--accent-yellow); }
.cancel-action-btn { background: var(--accent-red); color: white; }

/* --- CASERNE --- */
.unit-stats { display: flex; gap: 20px; margin-top: auto; padding-top: 10px; }
.stat-item { display: flex; align-items: center; gap: 6px; }
.stat-item .fas { color: var(--accent-blue); }

.train-controls { display: flex; gap: 10px; }
.train-controls input { width: 100%; padding: 10px; text-align: center; background-color: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); border-radius: 4px; }

/* --- ARMÉE --- */
.armee-layout { display: flex; flex-direction: column; gap: 20px; }
.location-card { background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color); padding: 20px; }
.location-card h4 { margin: 0 0 15px 0; font-family: var(--font-title); color: var(--text-main); }
.unit-in-location { display: flex; align-items: center; gap: 10px; background: var(--bg-card-secondary); padding: 8px; border-radius: 4px; }
.unit-count { margin-left: auto; font-weight: bold; }
.no-units { font-style: italic; color: var(--text-secondary); text-align: center; padding: 10px; }
.armee-layout { display: grid; grid-template-columns: 1fr 350px; gap: 20px; align-items: flex-start; }
.armee-garrisons-panel, .armee-actions-panel { display: flex; flex-direction: column; gap: 20px; }
.movement-panel { background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color); padding: 20px; }
.movement-panel h3 { margin: 0 0 15px 0; font-family: var(--font-title); color: var(--text-main); }
.movement-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.movement-locations { display: flex; flex-direction: column; gap: 8px; }
.radio-group { display: flex; flex-direction: column; gap: 5px; }
.movement-arrow { font-size: 1.5em; color: var(--accent-orange); }
.movement-selection { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 15px; }
.styled-select { width: 100%; padding: 8px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); border-radius: 4px; }
.input-with-max { display: flex; gap: 5px; }
#move-quantity-input { width: 80px; }
.max-qty-btn-small { padding: 8px 12px; background: var(--bg-card-secondary); border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 4px; cursor: pointer; }

/* --- EXPÉDITION --- */
.expedition-layout { display: grid; grid-template-columns: minmax(400px, 1.2fr) 2fr; gap: 20px; align-items: flex-start; }
.expedition-planner, .expedition-army-selector { display: flex; flex-direction: column; gap: 20px; }
.info-card { background: var(--bg-card); padding: 20px; border-radius: 8px; border-left: 4px solid var(--accent-orange); }
.territory-input-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#hunt-amount-input, #multi-hunt-amount-input, #multi-expedition-count-input { width: 120px; text-align: right; background-color: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); border-radius: 4px; padding: 8px; }
#hunt-amount-slider { width: 100%; }
.power-display { display: flex; justify-content: space-between; font-size: 1.1em; margin-bottom: 5px; }
.player-power { color: var(--accent-blue); }
.enemy-power { color: var(--accent-red); }
.power-ratio-bar-container { width: 100%; height: 10px; background-color: var(--accent-red); border-radius: 5px; overflow: hidden; }
.power-ratio-bar-fill { height: 100%; background-color: var(--accent-blue); border-radius: 5px; transition: width 0.3s ease-in-out; }
.estimation-details { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.estimation-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); }
.estimation-item strong { color: var(--text-main); text-align: right; }
#enemy-preview-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.enemy-chip { background-color: rgba(255, 23, 68, 0.2); color: var(--accent-red); padding: 4px 8px; border-radius: 12px; font-size: 0.8em; border: 1px solid var(--accent-red); }
.unit-selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.unit-select-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; padding: 10px; gap: 10px; }
.unit-card-name { font-weight: bold; display: block; }
.unit-card-count { font-size: 0.8em; color: var(--text-secondary); display: block; margin-bottom: 5px; }
.unit-card-info input { width: 100%; padding: 8px; background-color: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); border-radius: 4px; }

.expeditions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.expedition-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid var(--accent-blue);
}

.expedition-status.cancellable {
    border-left-color: var(--accent-yellow);
}


/* --- RAPPORTS --- */
.report-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.reports-list { display: flex; flex-direction: column; gap: 15px; }
.report-item { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.report-item.victory { border-left: 4px solid var(--accent-success); }
.report-item.defeat { border-left: 4px solid var(--accent-red); }
.report-item.unread { background-color: #3a3a3a; border-left-width: 8px; }
.report-info { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.report-info .outcome { font-weight: bold; font-size: 1.1em; }
.report-info .outcome.victory { color: var(--accent-success); }
.report-info .outcome.defeat { color: var(--accent-red); }
.report-info .date { font-size: 0.85em; color: var(--text-secondary); }
.report-rewards { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.report-rewards span { display: inline-flex; align-items: center; gap: 5px; }
.report-actions { display: flex; gap: 10px; }
.report-key-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* --- MODAL DE RAPPORT & CONFIRMATION --- */
.modal-overlay, .confirmation-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content, .confirmation-modal-content { background-color: var(--bg-content); padding: 25px; border-radius: 10px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-content { max-width: 800px; }
.confirmation-modal-content { max-width: 400px; border: 1px solid var(--border-strong); }
.modal-close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5em; color: var(--text-secondary); cursor: pointer; }
.modal-content h3, .confirmation-modal-content h4 { margin-top: 0; color: var(--accent-orange); }
.confirmation-modal-content h4 { color: var(--accent-yellow); }
.confirmation-modal-content p { margin: 15px 0; line-height: 1.6; }
.confirmation-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.army-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.army-box { background-color: var(--bg-card); padding: 15px; border-radius: 8px; }
.army-box h4 { margin-top: 0; }
.unit-line { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; font-size: 0.9em; padding: 4px 0; border-bottom: 1px solid var(--border-color); }
.unit-line.header { font-weight: bold; color: var(--text-secondary); }
.unit-line span:not(:first-child) { text-align: right; }
.losses { color: var(--accent-red); }

.battle-log-container { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.battle-log-container h4 { margin-top: 0; margin-bottom: 10px; }
.battle-log { background-color: var(--bg-main); border-radius: 6px; padding: 15px; max-height: 250px; overflow-y: auto; font-family: monospace; font-size: 0.9em; line-height: 1.6; }
.log-entry { margin-bottom: 5px; }
.log-entry.round-divider { font-weight: bold; color: var(--accent-yellow); text-align: center; margin: 10px 0; background-color: var(--bg-card-secondary); padding: 4px; border-radius: 4px; }
.log-entry .player { color: var(--accent-blue); }
.log-entry .enemy { color: var(--accent-red); }

.key-found-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
.key-found-image {
    width: 64px;
    height: 64px;
}
.key-found-details h4 {
    margin: 0 0 5px 0;
    color: var(--accent-yellow);
}
.key-found-details p {
    margin: 0;
    font-weight: bold;
}


/* --- TERRITOIRE --- */
.territoire-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.territoire-stats-panel, .territoire-assignment-panel { display: flex; flex-direction: column; gap: 20px; }
.territoire-assignment-panel { background: var(--bg-card); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
.production-cycle-timer { text-align: center; font-size: 1.1em; margin-bottom: 20px; padding: 10px; background: var(--bg-card-secondary); border-radius: 5px; }
.production-cycle-timer span { font-family: var(--font-title); color: var(--accent-yellow); font-weight: bold; }
.stat-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stat-line:last-child { margin-bottom: 0; }
.stat-value { font-weight: bold; font-family: var(--font-title); }
.stat-icon { margin-right: 10px; font-size: 1.2em; }
.success-text { color: var(--accent-success); }
.worker-assignment-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.worker-assignment-row input { width: 100px; padding: 8px; text-align: right; background-color: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-main); border-radius: 4px; }
.quick-assign-buttons {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}
.quick-assign-buttons > button {
    flex: 1;
}

/* --- CHAT (GÉNÉRAL & ALLIANCE) --- */
#chat-general-sub-tab.sub-tab-content.active,
#chat-alliance-sub-tab.sub-tab-content.active {
    display: flex;
    flex-direction: column;
}

.chat-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Prevents flexbox overflow */
    gap: 10px;
}
#chat-messages,
#alliance-chat-messages {
    /* flex-grow: 1; <-- SUPPRIMÉ */
    /* min-height: 50vh; <-- SUPPRIMÉ */
    height: 80vh; /* <-- SOLUTION: Hauteur fixe */
    overflow-y: auto; /* <-- SOLUTION: Active la barre de défilement */
    padding: 15px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-message {
    padding: 10px 12px;
    background-color: var(--bg-card);
    border-radius: 6px;
    max-width: 80%;
    align-self: flex-start;
    border-left: 3px solid var(--accent-orange);
}
.chat-message.current-user {
    align-self: flex-end;
    background-color: #2a3a5e;
    border-left: none;
    border-right: 3px solid var(--accent-blue);
}
.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.message-user-info {
    display: flex;
    align-items: center;
    gap: 5px;
}
.message-username {
    font-weight: bold;
    color: var(--accent-blue);
}
.message-username[data-uid] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s;
}
.message-username[data-uid]:hover {
    text-decoration-color: var(--accent-blue);
}
.chat-message.current-user .message-username {
    color: var(--accent-orange);
}
.message-timestamp {
    font-size: 0.75em;
    color: var(--text-secondary);
}
.message-content {
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap; /* Allows line breaks to be displayed */
}
.chat-input-area {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    gap: 10px;
    position: relative;
    /* La ligne 'align-items' est supprimée pour que les éléments s'étirent sur toute la largeur */
}

#emoji-picker-container,
#alliance-emoji-picker-container,
#mp-emoji-picker-container {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    display: none;
    z-index: 10;
    width: 352px; /* Fixed width */
    height: 435px; /* Fixed height */
}

.chat-input {
    flex-grow: 1;
    padding: 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    font-size: 1em;
    font-family: inherit;
    resize: vertical; /* Allows vertical resizing */
    min-height: 42px; /* Sets a minimum height */
}
#emoji-picker-btn,
#alliance-emoji-picker-btn {
    flex-shrink: 0;
    font-size: 1.2em;
    padding: 0 15px;
}

.chat-message.system-message {
    align-self: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    background-color: var(--bg-card-secondary);
    border-left: 3px solid var(--accent-yellow);
    border-right: 3px solid var(--accent-yellow);
    font-style: italic;
    color: var(--accent-yellow);
    padding: 8px 12px;
}

.system-message .message-content {
    font-weight: bold;
}

/* --- PROFIL --- */
.profile-container {
    padding: 10px;
}
.profile-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 20px;
}
.profile-header h1 {
    font-family: var(--font-title);
    color: var(--accent-blue);
    margin: 0 0 5px 0;
}
.profile-header h2 {
    font-size: 1.8em;
    color: var(--text-main);
    margin: 0;
}
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.stat-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border-left: 4px solid var(--accent-orange);
}
.stat-card h3 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.stat-card p {
    margin: 0;
    font-size: 2em;
    font-family: var(--font-title);
    font-weight: bold;
    color: var(--accent-yellow);
}

.profile-description-section {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    border-left: 4px solid var(--accent-blue);
}

.profile-description-section .content-subtitle {
    margin: 0 0 15px 0;
    padding: 0;
    border: none;
    color: var(--accent-blue);
}

.profile-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    padding: 10px;
    font-family: inherit;
    font-size: 0.95em;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.profile-description-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.feedback-message {
    font-size: 0.9em;
    font-style: italic;
}

.profile-description-section.view-only {
    background-color: transparent;
    padding: 0;
    border-left: none;
}
.profile-description-section.view-only .content-subtitle {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.profile-description-text {
    background-color: var(--bg-card);
    padding: 15px;
    border-radius: 8px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
}


/* --- MESSAGES PRIVÉS --- */
.mp-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: minmax(0, 1fr); /* CONTRAINT LA HAUTEUR DE LA GRILLE */
    gap: 20px;
    flex-grow: 1; /* PERMET AU LAYOUT DE PRENDRE L'ESPACE RESTANT */
    min-height: 0; /* CORRIGE UN BUG D'AFFICHAGE FLEXBOX */
}

.mp-sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.mp-sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex child */
}
.mp-sidebar-section:first-child {
    border-bottom: 1px solid var(--border-color);
}


.mp-sidebar-header {
    padding: 10px 15px;
    margin: 0;
    background-color: var(--bg-card-secondary);
    color: var(--text-secondary);
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
}

.mp-search-container {
    padding: 15px;
    position: relative;
}

.mp-search-container .fa-search {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.mp-search-container input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    box-sizing: border-box;
}

.mp-conversations-list,
.mp-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

.mp-user-list li,
.conversation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
    position: relative;
}
.mp-user-list li:last-child,
.mp-conversations-list .conversation-item:last-child {
    border-bottom: none;
}
.mp-user-list li:hover,
.conversation-item:hover {
    background-color: var(--bg-hover);
}
.mp-user-list li.active,
.conversation-item.active {
    background-color: var(--accent-orange);
    color: var(--button-text-color);
    font-weight: bold;
}

.conversation-item.unread .conversation-username {
    font-weight: bold;
    color: var(--text-main);
}

.conversation-item.unread::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--accent-red);
    border-radius: 50%;
}

.conversation-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden; /* Pour l'ellipse */
}

.conversation-username {
    font-weight: bold;
}

.conversation-last-message {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conversation-item.active .conversation-last-message {
    color: rgba(255,255,255,0.8);
}

.mp-user-list li .fas,
.conversation-username .fas {
    margin-right: 10px;
    color: var(--accent-blue);
}
.mp-user-list li.active .fas,
.conversation-item.active .fas {
    color: var(--button-text-color);
}

.delete-conversation-btn {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 5px 8px; /* Plus petit */
}
.delete-conversation-btn .fas {
    margin: 0;
}


.mp-chat-area {
    background-color: var(--bg-main);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* EMPÊCHE LE CONTENU DE DÉBORDER */
}

.mp-chat-area .placeholder-text {
    margin: auto;
    text-align: center;
    color: var(--text-secondary);
}
.mp-chat-area .placeholder-text .fas {
    font-size: 3em;
    margin-bottom: 15px;
}
.mp-chat-area .placeholder-text h3 {
    margin: 0 0 10px 0;
    color: var(--text-main);
}

.mp-chat-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-card);
}
.mp-chat-header h3 {
    margin: 0;
    font-family: var(--font-title);
}

.mp-chat-messages {
    /* flex-grow: 1; <-- SUPPRIMÉ */
    height: 75vh; /* <-- SOLUTION: Hauteur fixe (un peu moins pour la sidebar) */
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-chat-input-area {
    position: relative;
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    padding: 15px;
    border-top: 1px solid var(--border-color);
    gap: 10px;
}

#mp-chat-input {
    flex-grow: 1;
    resize: none;
    padding: 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    font-family: inherit;
}

#mp-send-btn {
    padding: 0 15px;
    min-height: 50px; /* Définit une hauteur minimale plus grande */
}

/* --- CLASSEMENT --- */
.ranking-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.ranking-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-card);
}
.ranking-table th, .ranking-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.ranking-table thead {
    background-color: var(--bg-card-secondary);
}
.ranking-table th {
    font-family: var(--font-title);
    color: var(--accent-blue);
    font-size: 0.9em;
    text-transform: uppercase;
}
.ranking-table tbody tr:hover {
    background-color: var(--bg-hover);
}
.ranking-table td:nth-child(1), .ranking-table td:nth-child(3),
.ranking-table td:nth-child(4), .ranking-table td:nth-child(5), .ranking-table td:nth-child(6) {
    text-align: center;
    font-family: var(--font-title);
}
.ranking-table .username-cell {
    font-weight: bold;
    color: var(--text-main);
}
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}
.pagination-controls span {
    font-family: var(--font-title);
}
.ranking-table th.sortable {
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.ranking-table th.sortable:hover {
    color: var(--accent-orange);
}
.ranking-table th.sortable::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    border: 4px solid transparent;
    opacity: 0.5;
}
.ranking-table th.sortable.sort-asc::after {
    transform: translateY(-70%);
    border-bottom-color: var(--text-main);
    opacity: 1;
}
.ranking-table th.sortable.sort-desc::after {
    transform: translateY(-30%);
    border-top-color: var(--text-main);
    opacity: 1;
}

/* --- ATTAQUER --- */
#attaquer-sub-tab.sub-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.attack-layout {
    display: grid;
    grid-template-columns: minmax(400px, 1.2fr) 2fr;
    gap: 20px;
    align-items: flex-start;
}
.attack-planner, .attack-army-selector {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.target-search-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#player-search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 0 0 5px 5px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover {
    background-color: var(--accent-orange);
    color: var(--button-text-color);
}
.suggestion-item-none {
    padding: 10px 15px;
    color: var(--text-secondary);
    font-style: italic;
}
#player-search-input {
    width: 100%;
    padding: 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    box-sizing: border-box;
}
.target-info-hidden {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#target-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
#target-info p {
    margin: 5px 0;
}
#attack-unit-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

#active-missions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}
.mission-status-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid;
}
.mission-status-card.mission-attack { border-color: var(--accent-red); }
.mission-status-card.mission-return { border-color: var(--accent-success); }
.mission-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mission-header h5 { margin: 0; font-size: 1.1em; }
.mission-units { font-size: 0.9em; color: var(--text-secondary); margin-bottom: 10px; }
.mission-timer { display: flex; justify-content: space-between; align-items: baseline; }
.mission-timer strong { font-family: var(--font-title); font-size: 1.2em; color: var(--accent-yellow); }

/* --- STYLES FORUM --- */
.forum-controls { margin-bottom: 20px; display: flex; gap: 10px; }
.forum-home { display: flex; flex-direction: column; gap: 20px; }
.forum-category { background-color: var(--bg-card); border-radius: 8px; overflow: hidden; }
.category-header { background-color: var(--bg-card-secondary); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
.category-header h3 { margin: 0; font-family: var(--font-title); color: var(--accent-blue); }
.admin-icons { display: flex; gap: 15px; }
.admin-icons i { cursor: pointer; color: var(--text-secondary); transition: color 0.2s; }
.admin-icons i:hover { color: var(--accent-orange); }
.forum-table { width: 100%; border-collapse: collapse; }
.forum-table th { background-color: var(--bg-main); padding: 10px 15px; text-align: left; font-size: 0.9em; color: var(--text-secondary); }
.forum-table td { padding: 12px 15px; border-top: 1px solid var(--border-color); }
.forum-table tbody tr:hover { background-color: var(--bg-hover); }
.forum-row, .topic-row { cursor: pointer; }
.forum-row td, .topic-row td { display: table-cell; vertical-align: middle; }
.forum-row td:nth-child(1), .topic-row td:nth-child(1) { display: flex; align-items: center; gap: 15px; }
.forum-icon, .topic-icon { font-size: 1.5em; color: var(--accent-orange); width: 30px; text-align: center; }
.forum-info, .topic-info { display: flex; flex-direction: column; }
.forum-title, .topic-title { font-weight: bold; color: var(--text-main); }
.forum-description, .topic-author, .forum-last-post { font-size: 0.85em; color: var(--text-secondary); }
.forum-stats, .topic-stats { text-align: center; font-family: var(--font-title); }
.forum-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-strong); }
#posts-list { display: flex; flex-direction: column; gap: 15px; flex-grow: 1; overflow-y: auto; background-color: var(--bg-main); padding: 15px; border-radius: 8px; }
.post-container { display: flex; gap: 15px; }
.post-author-info { flex-shrink: 0; width: 150px; text-align: center; }
.post-author-name { font-weight: bold; color: var(--accent-blue); }
.post-content { flex-grow: 1; background-color: var(--bg-card); padding: 15px; border-radius: 6px; }
.post-body { line-height: 1.6; }
.post-body p { margin-top: 0; }
.post-timestamp { font-size: 0.8em; color: var(--text-secondary); margin-top: 10px; text-align: right; }
.post-container.own-post .post-author-name { color: var(--accent-orange); }
.reply-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-strong); display: flex; flex-direction: column; gap: 10px; }
.moderation-tools { display: flex; gap: 10px; }
.info-text { text-align: center; margin: 20px; color: var(--text-secondary); font-style: italic; }

/* NOUVEAU : Le conteneur qui va empiler les toasts */
/* Il se positionne en HAUT A DROITE */
#toast-container {
    position: fixed;
    top: 20px;           /* Positionne le conteneur en HAUT */
    right: 20px;          /* Positionne le conteneur à DROITE */
    /* Les lignes 'bottom' et 'left' sont supprimées */
    
    display: flex;
    flex-direction: column; /* Empile les toasts vers LE BAS */
    gap: 10px;              /* Espace entre les toasts */
    z-index: 10000;         /* Au-dessus de tout */
    width: auto;            /* S'adapte au contenu */
    max-width: 90%;         /* Évite d'être trop large */
    align-items: flex-end; /* Aligne les toasts à droite */
}

/* MODIFIÉ : Le toast individuel */
.toast-notification { 
    /* SUPPRIMÉ: position: fixed; */
    /* SUPPRIMÉ: bottom: 20px; */
    /* SUPPRIMÉ: left: 50%; */
    /* SUPPRIMÉ: transform: translateX(-50%); */
    
    position: relative; /* AJOUTÉ: Devient un élément normal dans le conteneur flex */
    
    padding: 12px 20px; 
    background-color: var(--accent-blue); 
    color: var(--bg-main); 
    border-radius: 5px; 
    z-index: 1; /* z-index local au conteneur */
    font-weight: bold; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu du toast */
    gap: 10px;
    
    /* MODIFIÉ: Animation d'apparition */
    opacity: 0;
    transform: translateX(10px); /* Part de la droite */
    animation: toastFadeInRight 0.3s ease-out forwards;
}

/* NOUVEAU: Animation d'apparition (depuis la droite) */
@keyframes toastFadeInRight {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* NOUVEAU: Classe pour l'animation de disparition (vers la droite) */
.toast-notification.fading-out {
    opacity: 0 !important;
    transform: translateX(10px) !important;
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}
.toast-notification.toast-error { background-color: var(--accent-red); color: white; }
.toast-notification.toast-success { background-color: var(--accent-success); color: var(--bg-main); }


/* --- WORLD BOSS STYLES (SECTION CORRIGÉE) --- */
#world-boss-sub-tab.sub-tab-content.active {
    gap: 0;
}

.wb-sub-tabs-bar {
    display: flex;
    background-color: var(--bg-card-secondary);
    border-bottom: 1px solid var(--border-strong);
    margin-bottom: 20px;
}

.wb-sub-tab-button {
    flex-grow: 1;
    padding: 12px 15px;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-title);
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid transparent;
}

.wb-sub-tab-button:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
}

.wb-sub-tab-button.active {
    color: #fff;
    font-weight: bold;
    background: linear-gradient(to top, rgba(255, 107, 5, 0.3), transparent);
    border-bottom-color: var(--accent-orange);
}

.wb-content-area {
    padding: 0 5px; /* Ajoute un peu de padding au contenu */
}

.wb-boss-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wb-boss-title {
    text-align: center;
    font-size: 1.8em;
    color: var(--accent-orange);
    margin: 0;
    text-shadow: 0 0 8px var(--accent-orange);
}
.wb-boss-display-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.world-boss-image { 
    width: 100%; 
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px; 
    border: 2px solid var(--border-strong); 
    background-color: var(--bg-main);
}
.world-boss-hp-bar-container { 
    width: 100%; 
    height: 30px; 
    background-color: var(--bg-main); 
    border-radius: 15px; 
    position: relative; 
    border: 1px solid var(--border-color); 
    overflow: hidden;
}
.world-boss-hp-bar-fill { 
    height: 100%; 
    background: linear-gradient(to right, var(--accent-red), #ff79b0); 
    border-radius: 15px; 
    transition: width 0.5s ease; 
}
.world-boss-hp-text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
    font-weight: bold; 
    text-shadow: 1px 1px 2px black; 
}
.world-boss-attack-log { 
    background-color: var(--bg-card); 
    padding: 15px; 
    border-radius: 8px; 
    max-height: 200px; 
    overflow-y: auto; 
}
.world-boss-attack-log h4 { 
    margin: 0 0 10px 0; 
}
.attack-log-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 4px 0; 
    border-bottom: 1px solid var(--border-color); 
    font-size: 0.9em; 
}
.attack-log-item:last-child { border-bottom: none; }
.attack-log-item .fa-fire-alt { color: var(--accent-red); }

.wb-attack-panel {
    background-color: var(--bg-card-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
}

.attack-controls-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px;
}
.attack-controls-header h3 {
    margin: 0;
}

.unit-selection-grid-wb { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px; 
    max-height: 40vh; 
    overflow-y: auto; 
    padding: 5px; 
    margin-bottom: 15px;
}

.unit-select-card { 
    background-color: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 10px; 
    transition: background-color 0.2s;
}
.unit-select-card:hover {
    background-color: var(--bg-hover);
}

.unit-card-info { 
    flex-grow: 1; 
}
.unit-card-name { 
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    text-align: center;
}
.world-boss-qty-input { 
    width: 100%;
    box-sizing: border-box;
    padding: 8px; 
    background-color: var(--bg-input); 
    border: 1px solid var(--border-strong); 
    color: var(--text-main); 
    border-radius: 4px; 
}

/* Styles pour Classement, Dernier Rapport (V4) */
.wb-ranking-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-card);
}
.wb-ranking-table th, .wb-ranking-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.wb-ranking-table thead {
    background-color: var(--bg-card-secondary);
}
.wb-ranking-table th {
    font-family: var(--font-title);
    color: var(--accent-blue);
}
.wb-ranking-table tbody tr:hover {
    background-color: var(--bg-hover);
}
.wb-ranking-table td:nth-child(2) { /* Username column */
    text-align: left;
    font-weight: bold;
}
.wb-rewards-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.wb-reward-chip {
    background-color: var(--bg-card-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wb-reward-chip .fas {
    color: var(--accent-yellow);
}

/* Styles pour Récompenses (V4) */
.wb-reward-info {
    text-align: center; 
    margin-bottom: 20px; 
    color: var(--text-secondary);
}
.wb-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wb-reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    padding: 15px;
    border-radius: 6px;
    border-left: 3px solid var(--accent-orange);
}
.wb-reward-description {
    font-weight: bold;
}
.wb-reward-values {
    display: flex;
    gap: 15px;
}

/* NOUVEAU: STYLES POUR LES MISSIONS */
.missions-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.missions-header {
    text-align: center;
    padding: 10px;
    background-color: var(--bg-card-secondary);
    border-radius: 8px;
}
.missions-header h2 {
    font-family: var(--font-title);
    color: var(--accent-orange);
    margin: 0 0 5px 0;
}
.missions-header p {
    margin: 0;
    color: var(--text-secondary);
}
.missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mission-item, .chapter-reward-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 15px;
    align-items: center;
    background-color: var(--bg-card);
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}
.mission-item.claimable {
    border-left-color: var(--accent-yellow);
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.2);
}
.mission-item.claimed {
    border-left-color: var(--accent-success);
    opacity: 0.7;
}
.mission-icon {
    font-size: 1.5em;
    text-align: center;
    color: var(--text-secondary);
}
.mission-item.claimable .mission-icon { color: var(--accent-yellow); }
.mission-item.claimed .mission-icon { color: var(--accent-success); }
.mission-description {
    margin: 0 0 8px 0;
}
.mission-progress-bar-container {
    height: 20px;
    background-color: var(--bg-main);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid #555;
}
.mission-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--accent-blue), #69e0ff);
    border-radius: 10px;
    transition: width 0.3s ease-in-out;
}
.mission-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
}
.mission-rewards {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.reward-chip {
    background-color: var(--bg-card-secondary);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
}
.reward-chip .fas {
    color: var(--accent-yellow);
}
.mission-action {
    width: 120px;
    text-align: center;
}

.missions-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-strong);
}
.chapter-reward-item {
    grid-template-columns: 1fr auto auto;
    background-color: var(--bg-card-secondary);
    border-color: var(--border-color);
}
.chapter-reward-item.claimable {
    border-color: var(--accent-orange);
    box-shadow: 0 0 15px rgba(255, 107, 5, 0.3);
}
.chapter-reward-item.claimed {
    border-color: var(--accent-success);
    opacity: 0.8;
}

/* --- COFFRE AU TRÉSOR --- */
.treasure-chests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.chest-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.chest-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.chest-image {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
}

.chest-title {
    font-family: var(--font-title);
    font-size: 1.3em;
    margin: 0 0 10px 0;
    color: var(--text-main);
}

.key-count {
    font-size: 1em;
    color: var(--text-secondary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.key-count .fas.fa-key {
    color: var(--accent-yellow);
}


/* Styles for toast notifications rewards */
.toast-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding-top: 10px;
}

.toast-notification .reward-chip {
    background-color: rgba(0,0,0,0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
}

.toast-notification .reward-chip .fas {
    opacity: 0.8;
}

.armee-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* --- LA FOSSE --- */
.fosse-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

.fosse-main-panel, .fosse-leaderboard-panel {
    background-color: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fosse-main-panel:hover, .fosse-leaderboard-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.fosse-main-panel h2 {
    font-family: var(--font-title);
    color: var(--accent-orange);
    margin-top: 0;
    text-shadow: 0 0 8px var(--accent-orange);
    font-size: 1.8em;
}

#fosse-action-area {
    text-align: center;
    padding: 30px;
    margin: 20px 0;
    background: linear-gradient(145deg, var(--bg-card-secondary), #2a2a2a);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
}

.fosse-progression-info {
    text-align: center;
    color: var(--text-secondary);
    margin-top: 15px;
    background-color: var(--bg-main);
    padding: 10px;
    border-radius: 6px;
    border-top: 2px solid var(--accent-blue);
}

.fosse-progression-info h4 {
    margin: 0 0 5px 0;
    color: var(--text-main);
    font-family: var(--font-title);
    font-size: 1.2em;
}

.fosse-unit-selection h2 {
    text-align: center;
    color: var(--accent-blue);
    margin-bottom: 20px;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* NOUVEAU: Panneau d'histoire */
.fosse-story-panel {
    background-color: var(--bg-card-secondary);
    border-left: 4px solid var(--accent-blue);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    font-style: italic;
    color: var(--text-secondary);
    animation: fadeInStory 0.8s ease-in-out;
    position: relative;
    padding-left: 45px;
    line-height: 1.6;
}

.fosse-story-panel::before {
    content: '\f10d'; /* FontAwesome quote-left */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 15px;
    color: var(--accent-blue);
    font-size: 1.5em;
    opacity: 0.8;
}

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

.fosse-room-view h2, .fosse-travel-view h2 {
    text-align: center;
    font-family: var(--font-title);
    color: var(--accent-blue);
    margin-bottom: 15px;
}

.fosse-room-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.fosse-player-units, .fosse-enemies {
    background-color: var(--bg-card-secondary);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    min-height: 150px;
}

.fosse-player-units h3, .fosse-enemies h3 {
    margin: 0 0 15px 0;
    text-align: center;
    font-family: var(--font-title);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.fosse-player-units h3 { color: var(--accent-blue); }
.fosse-enemies h3 { color: var(--accent-red); }

.fosse-vs-icon {
    font-size: 4em;
    color: var(--accent-red);
    text-shadow: 0 0 10px var(--accent-red);
    animation: pulse-red 2s infinite ease-in-out;
}

@keyframes pulse-red {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.fosse-enemy-display {
    background-color: var(--bg-main);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 0.95em;
    border-left: 3px solid var(--accent-red);
}

.fosse-enemy-display.boss {
    border: 1px solid var(--accent-red);
    font-weight: bold;
    color: var(--accent-red);
}

.fosse-travel-view {
    text-align: center;
    padding: 50px 20px;
}

.fosse-travel-view h2 {
    animation: pulse-orange 2s infinite ease-in-out;
}

.fosse-travel-view p {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1em;
}

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

.fosse-travel-view .loader {
    width: 60px;
    height: 60px;
    border: 5px solid var(--border-strong);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 25px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gains {
    color: var(--accent-success);
    font-weight: bold;
}

/* --- STYLES POUR LE PILLAGE --- */
.pillage-sub-tab-content {
    display: none;
}
.pillage-sub-tab-content.active {
    display: block;
}
.convoys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}
.convoy-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-yellow);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.convoy-title {
    font-family: var(--font-title);
    color: var(--text-main);
    margin: 0;
}
.convoy-description {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0;
    flex-grow: 1;
}
.convoy-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.9em;
}
    .convoy-details .detail-item {
        display: flex;
        flex-direction: row;
    }
.convoy-details .detail-item > strong {
    color: var(--accent-blue);
}
.convoy-details .detail-item > .fas {
    margin-right: 8px;
}
.enemy-list, .reward-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 10px;
}


/* RESPONSIVE */
@media (max-width: 1200px) {
    .expedition-layout, .army-comparison, .territoire-layout, .armee-layout, .item-card.horizontal, .mp-layout, .attack-layout, .fosse-layout { grid-template-columns: 1fr; }
    .item-card.horizontal { grid-template-columns: 1fr; gap: 15px; text-align: center; }
    .item-card.horizontal .item-image { margin: 0 auto; }
    .item-card.horizontal .item-actions { width: 100%; max-width: 300px; margin: 0 auto; }
}
@media (max-width: 1024px) {
    body { padding: 10px; height: auto; }
    #game-wrapper, #game-wrapper.active { flex-direction: column; height: auto; max-height: none; }
    #sidebar { width: auto; order: 1; }
    #main-content-area { order: 2; }
    .mission-item, .chapter-reward-item { grid-template-columns: 1fr; text-align: center; }
    .mission-icon { display: none; }
    .mission-rewards, .mission-action { justify-content: center; width: auto; }
    .chapter-reward-item { grid-template-columns: 1fr; }

}

/* --- MARCHÉ NOIR --- */
.marche-noir-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.corvus-banner {
    text-align: center;
    padding: 15px;
    background-color: var(--bg-card-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--accent-yellow);
}

.corvus-banner h3 {
    margin: 0 0 5px 0;
    font-family: var(--font-title);
    color: var(--accent-yellow);
}

.corvus-banner p {
    margin: 0;
    color: var(--text-secondary);
}

#corvus-timer {
    font-weight: bold;
}

/* MODIFIED: Unification des grilles et réduction de la taille des cartes */
.corvus-items-grid, .inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

/* MODIFIED: Réduction de la taille générale des cartes */
.item-card-mn {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* MODIFIED: Image de la carte plus petite */
.item-card-mn .item-image {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 10px auto;
}

/* MODIFIED: Titre de la carte ajusté */
.item-card-mn h4 {
    font-family: var(--font-title);
    margin: 0 0 8px 0;
    flex-grow: 1;
    font-size: 1em;
}

/* MODIFIED: Paragraphe de description (pour Corvus) plus compact */
.item-card-mn p {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin: 0 0 10px 0;
    min-height: 3.5em; /* Hauteur relative à la police */
    flex-grow: 1;
}

/* NEW: Style spécifique pour la quantité dans l'inventaire pour être plus compact */
.item-card-mn p.item-quantity {
    min-height: auto;
    flex-grow: 0;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* MODIFIED: Coût de l'objet ajusté */
.item-card-mn .item-cost-mn {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.item-cost-mn .fa-coins {
    color: var(--accent-yellow);
}

/* Styles pour la Bourse (placeholder) */
.bourse-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 992px) {
    .bourse-layout {
        grid-template-columns: 1fr 1fr;
    }
}


.bourse-section h3 {
    text-align: center;
    font-family: var(--font-title);
    color: var(--accent-blue);
}

.bourse-table {
    width: 100%;
    border-collapse: collapse;
}

.bourse-table th, .bourse-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.bourse-table thead {
    background-color: var(--bg-card-secondary);
}

.bourse-table .price-cell {
    font-weight: bold;
    color: var(--accent-yellow);
    text-align: right;
}

.bourse-table .action-cell {
    text-align: right;
}

/* --- NOUVEAUX STYLES POUR LA BOURSE --- */
.bourse-actions-panel {
    background-color: var(--bg-card-secondary);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.bourse-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 15px;
    align-items: center;
}
.bourse-form input {
    padding: 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-main);
    font-size: 1em;
}
.bourse-table .bourse-placeholder {
    text-align: center; 
    padding: 20px; 
    color: var(--text-secondary);
    font-style: italic;
}
.bourse-layout {
    grid-template-columns: 1fr; /* S'assure que sur mobile, il n'y a qu'une colonne */
}

/* --- NOUVEAU: STYLE POUR L'AFFICHAGE DES BOOSTS ACTIFS --- */
.boost-active-info {
    background-color: rgba(255, 196, 0, 0.1); /* Fond jaune transparent */
    border: 1px solid var(--accent-yellow);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 15px; /* Ajout d'une marge en bas pour l'espacement */
    font-size: 0.9em; /* Légèrement plus grand pour une meilleure lisibilité */
    color: var(--accent-yellow);
    text-align: center; /* Centrer le texte */
}

.boost-active-info .boost-timer {
    font-weight: bold;
}

.boost-active-info .fas {
    margin-right: 8px; /* Espace pour l'icône */
}


/* --- NOUVEAU: STYLES POUR LE RAPPORT D'ESPIONNAGE --- */
.spy-report {
    margin-top: 20px;
    background-color: var(--bg-card-secondary);
    border-left-color: var(--accent-blue);
}
.spy-report-location {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.spy-report-location:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.spy-report-location h4 {
    margin: 0 0 8px 0;
    color: var(--text-main);
}
.spy-report-location p {
    margin: 4px 0;
    padding-left: 15px;
    font-size: 0.9em;
}

/* ============================================= /
/ --- STYLES POUR LE CERCLE DES PARIEURS --- /
/ ============================================= */

.cercle-parieurs-container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 10px;
}

/* Onglets locaux spécifiques au module */
.sub-tabs-local {
display: flex;
gap: 5px;
border-bottom: 2px solid var(--border-color);
margin-bottom: 10px;
}

.sub-tab-button-local {
padding: 10px 15px;
border: none;
background-color: transparent;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s ease-in-out;
font-size: 1em;
}

.sub-tab-button-local:hover {
background-color: var(--background-light);
color: var(--text-primary);
}

.sub-tab-button-local.active {
color: var(--accent-yellow);
border-bottom-color: var(--accent-yellow);
font-weight: bold;
}

/* Bannière de statut du combat */
.fight-status-banner {
padding: 12px 18px;
margin-bottom: 20px;
border-radius: 6px;
text-align: center;
font-size: 1.1em;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.fight-status-banner.betting-open {
background-color: rgba(46, 204, 113, 0.15);
border: 1px solid #2ecc71;
color: #2ecc71;
}

.fight-status-banner.betting-locked {
background-color: rgba(243, 156, 18, 0.15);
border: 1px solid #f39c12;
color: #f39c12;
}

.fight-status-banner.in-progress {
background-color: rgba(231, 76, 60, 0.15);
border: 1px solid #e74c3c;
color: #e74c3c;
}

.fight-status-banner.finished {
background-color: rgba(52, 152, 219, 0.15);
border: 1px solid #3498db;
color: #3498db;
}

/* Cartes des combattants */
.fight-card-container {
display: flex;
justify-content: space-around;
align-items: stretch;
gap: 20px;
margin-bottom: 20px;
}

.fighter-card {
background-color: var(--background-light);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 15px;
width: 45%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}

.fighter-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.fighter-card.bet-on {
border-color: var(--accent-yellow);
box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
}

.fighter-card img {
width: 230px;
height: 230px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--border-color-dark);
margin-bottom: 10px;
}

.fighter-card h3 {
margin: 5px 0;
color: var(--text-primary);
}

.fighter-card .fighter-desc {
font-size: 0.9em;
color: var(--text-secondary);
min-height: 40px;
margin-bottom: 10px;
}

.fighter-stats {
display: flex;
gap: 15px;
margin-bottom: 10px;
font-size: 0.9em;
}

.injured-status {
color: var(--accent-red);
font-weight: bold;
}
.injured-status-table {
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.1);
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}

.fighter-odds {
background-color: var(--background-dark);
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 15px;
font-size: 1.1em;
}

.vs-separator {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
font-weight: bold;
color: var(--accent-yellow);
}

/* Formulaire de pari */
.betting-form-container {
background-color: var(--background-dark);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border-color);
}

.betting-form-container h3 {
text-align: center;
margin-top: 0;
margin-bottom: 15px;
}

.betting-form-container > p {
text-align: center;
color: var(--text-secondary);
}

.bet-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}

.bet-inputs .input-group {
display: flex;
flex-direction: column;
}

.bet-inputs .input-group label {
margin-bottom: 5px;
}

.bet-inputs .input-group input {
width: auto;
}

.max-bet-btn {
margin-top: 5px;
padding: 5px 10px;
font-size: 0.8em;
background-color: var(--background-light);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.resource-totals {
text-align: center;
font-size: 0.9em;
color: #999;
margin-bottom: 15px;
}

/* Tableau des combattants et classement */
.table-container {
overflow-x: auto;
}

.table-container table {
width: 100%;
border-collapse: collapse;
}

.table-container th, .table-container td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}

.table-container th {
background-color: var(--background-dark);
color: var(--accent-yellow);
}

.table-container tbody tr:nth-child(even) {
background-color: var(--background-light);
}

.fighter-table-info {
display: flex;
align-items: center;
gap: 10px;
}

.fighter-table-info img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}

.text-success { color: #2ecc71; }
.text-danger { color: #e74c3c; }

/* Simulation de combat */
.simulation-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.sim-fighters {
display: flex;
justify-content: space-around;
align-items: center;
}
.sim-fighter-display {
text-align: center;
}
.sim-fighter-display img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #444;
}

.simulation-log {
background-color: #1a1a1e;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 15px;
}

#simulation-log-content {
height: 350px;
overflow-y: auto;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
color: #ccc;
}
#simulation-log-content p {
margin: 0 0 5px 0;
padding-bottom: 5px;
border-bottom: 1px dashed #333;
}

/* Récapitulatif du pari */
.user-bet-recap {
background: var(--background-dark);
padding: 20px;
margin-top: 20px;
border-radius: 8px;
text-align: center;
}
.user-bet-recap ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.user-bet-recap li {
font-size: 1.1em;
}

/* ============================================= */
/* STYLES POUR LE CERCLE DES PARIEURS AMÉLIORÉ  */
/* ============================================= */

/* --- Cartes de combat --- */
.fighter-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 0.85em;
    margin: 10px 0;
    text-align: left;
    padding: 0 10px;
    color: #ccc;
}
.fighter-stats-grid span {
    display: flex;
    align-items: center;
}
.fighter-stats-grid .injured-status {
    color: #ffc107;
}

/* --- Simulation de combat --- */
.simulation-container {
    padding: 15px;
}
.sim-fighters {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 15px;
}
.sim-fighter-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #282a36;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #44475a;
}
.sim-fighter-display img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #6272a4;
    margin-bottom: 10px;
}
.health-bar-container {
    width: 90%;
    background-color: #1e1f29;
    border-radius: 5px;
    border: 1px solid #44475a;
    height: 24px;
    position: relative;
    overflow: hidden;
}
.health-bar {
    height: 100%;
    background: linear-gradient(to right, #50fa7b, #2f9e4d);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}
.health-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f8f8f2;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
}

.simulation-log {
    margin-top: 20px;
    background-color: #21222c;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #44475a;
}
#simulation-log-content {
    max-height: 350px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: #f8f8f2;
}
#simulation-log-content p {
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px dashed #3a3c4a;
}
#simulation-log-content p:last-child {
    border-bottom: none;
}

/* Effets de victoire / défaite sur les cartes */
.fighter-card.winner {
    border-color: #50fa7b;
    box-shadow: 0 0 15px rgba(80, 250, 123, 0.5);
}
.fighter-card.loser {
    opacity: 0.6;
    filter: grayscale(50%);
}

/* --- Onglet Combattants --- */
.fighters-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.fighter-profile-card {
    display: flex;
    background-color: #282a36;
    border: 1px solid #44475a;
    border-radius: 8px;
    padding: 15px;
    gap: 15px;
    align-items: flex-start;
}
.fighter-profile-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #6272a4;
}
.fighter-profile-info {
    flex: 1;
}
.fighter-profile-info h3 {
    margin: 0 0 5px 0;
    color: #bd93f9;
}
.fighter-profile-info p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: #ccc;
}
.fighter-profile-info .profile-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    padding: 0;
}
.fighter-status {
    margin-top: 10px;
    font-size: 0.9em;
    color: #ccc;
    background-color: #21222c;
    padding: 8px;
    border-radius: 5px;
}
.fighter-status p {
    margin: 0;
}
.injured-status-table {
    color: #ffb86c;
    font-weight: bold;
}
.text-success {
    color: #50fa7b;
}
.text-danger {
    color: #ff5555;
}

/* NOUVEAU: Style pour les en-têtes de garnison cliquables */
    .location-card h4.clickable-header {
        cursor: pointer;
        transition: color 0.2s, background-color 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px; /* Ajout d'un peu de padding */
        margin: -8px -10px 8px -10px; /* Compensation du padding */
        border-radius: 4px 4px 0 0;
    }
    .location-card h4.clickable-header:hover {
        color: var(--accent-yellow);
        background-color: rgba(255, 255, 255, 0.05);
    }
    /* Icône optionnelle pour indiquer l'action */
    .location-card h4.clickable-header .move-all-icon {
        font-size: 0.8em;
        opacity: 0.6;
        transition: opacity 0.2s, transform 0.2s;
    }
    .location-card h4.clickable-header:hover .move-all-icon {
        opacity: 1;
        transform: translateX(3px);
    }

/* --- CSS pour la file d'attente de la Caserne --- */

    /* Conteneur principal de la file d'attente */
    .queue-container {
        /* S'affiche via JS s'il y a des jobs */
        display: none; 
        width: 100%;
        margin-bottom: 20px;
        padding: 15px;
        background-color: var(--background-color-dark);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        box-sizing: border-box; /* S'assure que le padding ne casse pas la mise en page */
    }

    /* Carte du job en cours */
    .queue-item-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background-color: rgba(0,0,0,0.2);
        border-radius: 6px;
        border-left: 4px solid var(--accent-yellow); /* Indique le job en cours */
    }

    .queue-item-card .queue-item-title {
        font-size: 1.2em;
        font-weight: 700;
        color: var(--accent-yellow);
        margin-bottom: 5px; /* Ajoute un peu d'espace */
    }

    .queue-item-card .queue-timers {
        display: flex;
        flex-wrap: wrap; /* Permet aux timers de passer à la ligne sur mobile */
        gap: 15px;
    }

    /* Style pour les minuteurs (déjà défini, mais on ajuste) */
    .queue-item-card .timer-display {
        min-width: 150px; /* Donne une largeur minimale */
        max-width: 170px;
        font-size: 0.95em;
    }
    .queue-item-card .timer-label {
        color: #b0bec5;
        margin-right: 10px;
    }
    .queue-item-card .time-left, .queue-item-card .total-time-left {
        font-weight: bold;
        color: #fff;
    }

    /* Conteneur pour les boutons "Passer" et "Annuler tout" */
    .queue-item-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0; /* Empêche les boutons de rétrécir */
        margin-left: 15px; /* Espace entre les timers et les boutons */
    }
    
    /* Style pour les boutons (utilise vos classes .small-btn existantes) */
    .queue-item-actions .small-btn {
        font-size: 0.9em;
        padding: 6px 10px;
    }
    
    /* Style spécifique pour le bouton "Passer" (non-danger) */
    .queue-item-actions .cancel-current-job-btn {
        background-color: var(--secondary-button-bg, #4a4a4a);
        color: var(--text-secondary, #ccc);
    }
    .queue-item-actions .cancel-current-job-btn:hover {
        background-color: var(--accent-yellow, #ffc107);
        color: #000;
    }

    /* Titre "En attente :" */
    .queue-next-title {
        font-size: 1em;
        color: var(--text-secondary);
        margin-top: 20px; /* Plus d'espace après la carte principale */
        margin-bottom: 8px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-color-light);
    }

    /* Liste des jobs en attente */
    .queue-next-list {
        list-style-type: none;
        padding-left: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .queue-next-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        background-color: rgba(0,0,0,0.1);
        border-radius: 4px;
        font-size: 0.9em;
    }

    .queue-next-list li i.fa-clock {
        margin-right: 8px;
        color: var(--text-secondary);
    }

    /* Temps total estimé pour le job en attente */
    .queue-next-list li span {
        color: var(--text-secondary);
        font-size: 0.95em;
        margin-left: 5px;
    }

    /* Bouton d'annulation spécifique sur les jobs en attente */
    .queue-next-list li .cancel-specific-job-btn {
        font-size: 0.8em;
        padding: 4px 8px;
        flex-shrink: 0; /* Empêche le bouton de rétrécir */
    }


/* --- NOUVEAUX STYLES POUR LES ACTIONS DE CONVOI --- */
        .convoy-list li {
            display: grid;
            grid-template-columns: 30px 1fr auto;
            align-items: center;
            gap: 10px;
        }
        .convoy-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .convoy-list .convoy-actions .small-btn {
            padding: 4px 8px;
            font-size: 0.8em;
            line-height: 1;
            min-width: auto;
        }

/* --- AMÉLIORATIONS CHAT (proposées par un joueur) --- */
:root {
    --main-font: Lato;
    --font-title: Lato;
}

/* Improving chat lisibility */
#chat-messages {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
}

.chat-message.system-message .giveaway-win,
.chat-message.system-message .giveaway-announcement {
    padding: 0;
    margin: 0;
}

.message-content {
    line-height: 1;
}

.chat-message.system-message {
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

.chat-message.system-message .fa-bullhorn {
    font-size: 0;
}

.chat-message.system-message .message-content {
    font-size: 0; /* Remove unecessary spaces */
}

.chat-message.system-message .message-content span {
    font-size: 15px;
    margin: 15px 0px 15px 0px;
}

.message-timestamp {
    margin-left: 15px;
}

/* Buttons */
.primary-button {
    padding: 7px 10px;
    font-size: 0.9em;
    margin: 0;
    border-radius: 5px;
}

/* Units */
.unit-stats {
    margin-top: 0;
}

.unit-equipment-grid {
    padding: 0;
    margin: 0;
}

/* Items */
.item-card.horizontal {
    min-height: 0;
}

.item-card.horizontal .item-image {
    width: 100px;
    height: 100px;
}
/* --- FIN DES AMÉLIORATIONS CHAT --- */


.bulk-buy-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.bulk-buy-input {
    width: 60px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #222;
    color: #fff;
    text-align: center;
    -moz-appearance: textfield;
}

.bulk-buy-input::-webkit-outer-spin-button,
.bulk-buy-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bulk-buy-form .primary-button {
    flex-grow: 1;
    margin: 0;
}

/* ================================================= */
/* --- STYLE SPÉCIFIQUE COFFRE MYTHIQUE (BLOOD) --- */
/* ================================================= */

/* 1. Animation de pulsation (Calquée sur le Légendaire mais en Rouge) */
@keyframes pulse-mythic {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.4); /* Lueur douce */
        border-color: #8b0000; /* Bordure rouge sang */
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.9); /* Gros éclat rouge vif */
        border-color: #ff0000; /* Bordure rouge néon */
        transform: scale(1.02); /* Légère augmentation de taille (optionnel, comme une respiration) */
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
        border-color: #8b0000;
        transform: scale(1);
    }
}

/* 2. La Carte elle-même (C'est ici qu'on applique l'animation) */
.chest-card.rarity-mythic {
    background: linear-gradient(to bottom, #1a0505, #350000); /* Fond noir vers rouge très sombre */
    border: 2px solid #8b0000;
    /* L'animation s'applique ici sur toute la carte */
    animation: pulse-mythic 2.0s infinite ease-in-out; 
    transition: all 0.3s ease;
}

/* 3. Textes en Rouge (Titre, Description, Compteurs) */
.chest-card.rarity-mythic .chest-title {
    color: #ff0000 !important; /* Rouge Vif */
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.8); /* Ombre rouge derrière le texte */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chest-card.rarity-mythic p,
.chest-card.rarity-mythic .key-count,
.chest-card.rarity-mythic .chest-rewards {
    color: #ff6666 !important; /* Rouge plus clair pour la lisibilité */
    text-shadow: none;
}

/* Icônes */
.chest-card.rarity-mythic i {
    color: #ff0000 !important;
}

/* 4. Boutons ACTIFS (Si vous avez des clés) */
.chest-card.rarity-mythic .primary-button {
    background-color: #990000 !important; 
    border: 1px solid #ff0000 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
    font-weight: bold;
}
.chest-card.rarity-mythic .primary-button:hover {
    background-color: #cc0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

/* 5. Boutons DÉSACTIVÉS (0 clés) : Aspect "Sang Séché" */
.chest-card.rarity-mythic button:disabled {
    background-color: #2a0505 !important; /* Fond presque noir */
    color: #5c1010 !important; /* Texte rouge très sombre */
    border: 1px solid #4a0a0a !important;
    box-shadow: none;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Rendre le pseudo et l'image de la sidebar interactifs */
#sidebar-profile-pic, 
#username-display {
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#sidebar-profile-pic:hover, 
#username-display:hover {
    opacity: 0.8;
    transform: scale(1.02); /* Petit effet de zoom */
}

/* Style de la citation dans la sidebar */
.sidebar-quote-container {
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--accent-yellow);
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.85em;
    text-align: center;
    position: relative;
    line-height: 1.4;
}

.quote-icon {
    font-size: 0.7em;
    color: #666;
    margin: 0 3px;
    vertical-align: super;
}

.edit-quote-icon {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 0.9em;
    color: var(--accent-yellow);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    font-style: normal;
}

.edit-quote-icon:hover {
    opacity: 1;
}

/* Bouton de sauvegarde (Étoile) */
.toggle-save-btn {
    color: #666;
    transition: color 0.2s, transform 0.2s;
}
.toggle-save-btn:hover {
    color: #aaa;
}
/* Quand le rapport est sauvegardé */
.toggle-save-btn.active {
    color: #ffd700; /* Or */
}
.toggle-save-btn.active:hover {
    color: #ffed4a;
    transform: scale(1.1);
}
.alliance-desc-image {
    max-width: 100%;       /* L'image ne dépassera jamais la largeur du conteneur */
    height: auto;          /* Garde les proportions */
    display: block;        /* Force l'image à prendre sa propre ligne */
    margin: 10px auto;     /* Centre l'image et ajoute de l'espace */
    border-radius: 8px;    /* Arrondit les coins pour faire joli */
    border: 1px solid #444; /* Petite bordure subtile */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Ombre légère */
}

/* ============================================== */
/* --- STYLE DU SIMULATEUR DE COMBAT (ARMÉE) --- */
/* ============================================== */

.army-sim-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* S'assure que la modale ne dépasse pas de l'écran */
    max-height: 150vh; 
    overflow-y: auto;
    padding-right: 5px; /* Pour la scrollbar */
}

.army-sim-columns-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

.army-sim-col {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.army-sim-col h3 {
    text-align: center;
    color: var(--accent-yellow);
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    font-size: 1.1rem;
}

.army-sim-col h3 i {
    margin-right: 8px;
}

.army-sim-bonuses-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 4px;
}

.army-sim-bonuses-section h4, .army-sim-units-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.army-sim-bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: var(--text-main);
}

.army-sim-bonus-row input {
    width: 60px;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    text-align: center;
    border-radius: 4px;
}

.army-sim-units-list {
    max-height: 250px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.army-sim-unit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #333;
    font-size: 0.95em;
}

.army-sim-unit-row label {
    color: #ddd;
}

.army-sim-unit-row input {
    width: 150px;
    padding: 4px;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    text-align: right;
    border-radius: 4px;
}

.army-sim-actions {
    text-align: center;
    margin-top: 10px;
}

.army-sim-log-box {
    background-color: #000;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 4px;
    height: 1000px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    line-height: 1.5;
    color: #ccc;
    margin-top: 10px;
}

.army-sim-log-entry {
    margin-bottom: 4px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 2px;
}

.army-sim-outcome {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

.army-sim-victory { 
    color: var(--accent-success); 
    background: rgba(0, 230, 118, 0.1); 
    border: 1px solid var(--accent-success);
}
.army-sim-defeat { 
    color: var(--accent-red); 
    background: rgba(255, 23, 68, 0.1); 
    border: 1px solid var(--accent-red);
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .army-sim-columns-wrapper {
        flex-direction: column;
    }
    
    .army-sim-units-list {
        max-height: 200px; 
    }

    .army-sim-log-box {
        /* On force une hauteur fixe confortable sur mobile */
        height: 400px !important; 
        /* On s'assure qu'il ne puisse pas être écrasé par le flexbox */
        min-height: 400px; 
        flex-shrink: 0; 
    }
}

/* Amélioration de la zone de texte (Chat & Forum) */
.chat-input, 
.chat-edit-input,
.classic-textarea {
    width: 100%;               /* Force la largeur totale */
    box-sizing: border-box;    /* Inclut le padding dans la largeur (évite que ça dépasse) */
    font-family: inherit;
    line-height: 1.5;
}

/* S'assure que la modale forum utilise bien toute la largeur */
#forum-modal-content {
    max-width: 800px; /* Élargit un peu la modale d'édition */
    width: 95%;
}

/* =========================================
   COSMÉTIQUES CHAT - CORRECTIF FINAL (AUTO-HEIGHT)
   ========================================= */

/* --- 1. CONFIGURATION MÈRE (S'applique à TOUS les skins) --- */
.chat-message.chat-bubble-krampus,
.chat-message.chat-bubble-santa,
.chat-message.chat-bubble-ice,
.chat-message.chat-bubble-gold {
    /* MOTEUR FLEXBOX VERTICAL */
    display: flex !important;
    flex-direction: column !important;
    
    /* DIMENSIONS */
    width: fit-content !important;
    min-width: 260px !important;
    max-width: 85% !important;
    
    /* GESTION HAUTEUR : On force 'auto' strictement */
    min-height: 85px !important;
    height: auto !important; 
    
    /* ESTHÉTIQUE */
    padding: 0 !important;
    margin-bottom: 12px !important;
    position: relative;
    overflow: hidden !important; 
    flex-shrink: 0 !important; /* CRUCIAL : Empêche la bulle d'être écrasée par la liste des messages */
    z-index: 1;
    background-color: transparent !important;
    transition: transform 0.2s ease;
}

/* --- 2. HEADER (Pseudo/Date) --- */
.chat-message.chat-bubble-krampus .message-header,
.chat-message.chat-bubble-santa .message-header,
.chat-message.chat-bubble-ice .message-header,
.chat-message.chat-bubble-gold .message-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 15px 5px 15px !important;
    background: transparent !important;
    flex-shrink: 0; /* Empêche le header de s'écraser */
}

/* --- 3. CONTENU (Texte) --- */
.chat-message.chat-bubble-krampus .message-content,
.chat-message.chat-bubble-santa .message-content,
.chat-message.chat-bubble-ice .message-content,
.chat-message.chat-bubble-gold .message-content {
    /* --- LE FIX EST ICI --- */
    /* On désactive l'agrandissement automatique (grow) */
    /* On dit : Ne grossis pas, ne rétrécis pas, sois juste toi-même (auto) */
    flex: 0 0 auto !important; 
    
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px 15px 15px 15px !important;
    background: transparent !important;
    
    /* Force le retour à la ligne */
    white-space: pre-wrap !important; 
    word-wrap: break-word !important; 
    word-break: break-word !important; /* Sécurité supplémentaire pour les mots très longs */
    overflow-wrap: break-word !important;
    font-weight: 600;
}

/* =========================================
   👹 SKIN KRAMPUS (MAGMA)
   ========================================= */

/* 1. Animation du fond (FLUIDE) */
@keyframes dark-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. Animation du contour (PULSATION) */
@keyframes magma-pulse {
    0% {
        border-color: #5c0000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    }
    50% {
        border-color: #ff4500;
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.8); 
    }
    100% {
        border-color: #5c0000;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    }
}

.chat-message.chat-bubble-krampus {
    /* CHANGEMENT ICI : 
       J'ai ajouté du rouge vif (#b71c1c) et de l'orange (#ff4500) au centre.
       Le contraste avec le noir (#000000) rendra le mouvement très visible.
    */
    background: linear-gradient(270deg, 
        #000000, 
        #5c0000, 
        #b71c1c, 
        #ff4500, /* Cœur de magma très visible */
        #b71c1c, 
        #5c0000, 
        #000000
    ) !important;
    
    background-size: 600% 600% !important; /* J'ai augmenté la taille pour que le passage soit plus fluide */
    
    /* Animation accélérée à 10s (au lieu de 12s) pour qu'on voie mieux le mouvement */
    animation: 
        dark-flow 5s ease infinite, 
        magma-pulse 3s ease-in-out infinite !important;
    
    border: 1px solid #5c0000 !important;
    border-bottom: 2px solid #3d0000 !important;
    border-left: 4px solid #ffd700 !important;
}

/* Le reste reste identique */
.chat-message.chat-bubble-krampus .message-header { border-bottom: 1px solid rgba(255, 215, 0, 0.1); }
.chat-message.chat-bubble-krampus .message-username { color: #ffd700 !important; font-family: 'Orbitron', sans-serif; font-size: 1.1em; text-shadow: 0 2px 2px #000; }
.chat-message.chat-bubble-krampus .message-timestamp { color: rgba(224, 192, 151, 0.7) !important; font-size: 0.8em; }
.chat-message.chat-bubble-krampus .message-content {
    /* Couleur : #d4af37 (Or Métallique) 
       C'est un doré riche mais pas agressif pour les yeux.
    */
    color: #d4af37 !important; 
    
    /* On garde une ombre noire forte pour que le texte reste lisible sur le magma */
    text-shadow: 1px 1px 2px #000000 !important; 
}

/* =========================================
   🎅 SKIN PÈRE NOËL (ROUGE)
   ========================================= */
.chat-message.chat-bubble-santa {
    background: radial-gradient(circle at top left, #ff5252, #b71c1c) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.chat-message.chat-bubble-santa .message-header { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.chat-message.chat-bubble-santa .message-username { color: #ffffff !important; font-weight: bold; }
.chat-message.chat-bubble-santa .message-timestamp { color: rgba(255, 255, 255, 0.8) !important; }
.chat-message.chat-bubble-santa .message-content { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }


/* =========================================
   ❄️ SKIN GLACÉ (BLEU)
   ========================================= */
.chat-message.chat-bubble-ice {
    background: linear-gradient(135deg, #4fc3f7, #0277bd) !important;
    border: 1px solid #b3e5fc !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 4px 12px rgba(3, 169, 244, 0.4);
}
.chat-message.chat-bubble-ice::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.chat-message.chat-bubble-ice .message-header { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.chat-message.chat-bubble-ice .message-username { color: #ffffff !important; font-weight: bold; text-shadow: 0 0 3px #0277bd; }
.chat-message.chat-bubble-ice .message-timestamp { color: rgba(240, 250, 255, 0.9) !important; }
.chat-message.chat-bubble-ice .message-content { color: #f0faff !important; text-shadow: 0 0 2px rgba(0, 50, 100, 0.3); }


/* =========================================
   👑 SKIN OR (DORÉ)
   ========================================= */
.chat-message.chat-bubble-gold {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    border: 1px solid #fcf6ba !important;
    border-bottom: 2px solid #8a6218 !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.6);
}
.chat-message.chat-bubble-gold::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
    transform: skewX(-25deg);
    animation: goldShine 6s infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes goldShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.chat-message.chat-bubble-gold .message-header { border-bottom: 1px solid rgba(90, 63, 12, 0.2); }
.chat-message.chat-bubble-gold .message-username { color: #3e2b08 !important; font-weight: 900; }
.chat-message.chat-bubble-gold .message-timestamp { color: rgba(90, 63, 12, 0.8) !important; }
.chat-message.chat-bubble-gold .message-content { color: #5a3f0c !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }

.user-badge {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); /* Lueur dorée */
    transition: transform 0.2s;
}
.user-badge:hover {
    transform: scale(1.2); /* Grossit au survol */
}


/* =========================================
   ANIMATIONS GACHA (Adapté à ton code)
   ========================================= */

/* La carte Gacha pendant qu'elle s'anime */
.shop-card.gacha.animating {
    position: relative;
    overflow: visible !important; /* Important pour que le flash dépasse */
    z-index: 10;
}

/* L'icône qui tremble pendant le chargement */
.shop-card.gacha.animating .card-icon {
    animation: violent-shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.8)); /* Lueur rouge */
    color: #ff5252 !important; /* Force le rouge pendant l'animation */
}

@keyframes violent-shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-2deg); }
  20%, 80% { transform: translate3d(3px, -2px, 0) rotate(3deg); }
  30%, 50%, 70% { transform: translate3d(-5px, 3px, 0) rotate(-5deg) scale(1.1); }
  40%, 60% { transform: translate3d(5px, -3px, 0) rotate(5deg) scale(1.1); }
}

/* L'effet "Flash/Boum" final */
.gacha-explosion-flash {
    position: absolute;
    top: 40%; /* Centré sur l'icône environ */
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 20%, #ffeb3b 50%, rgba(255, 87, 34, 0) 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    animation: explosion-boom 0.6s ease-out forwards;
    z-index: 100;
    pointer-events: none;
}

@keyframes explosion-boom {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    50% { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(30); opacity: 0; }
}

/* À ajouter dans ton fichier CSS */
.log-round-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 10px 0;
    color: var(--accent-yellow); /* ou une couleur dorée */
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    position: relative;
}

/* Les petits tirets avant et après le texte "Tour X" */
.log-round-divider::before,
.log-round-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 15px;
}

.expedition-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-info-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-title {
    font-weight: bold;
    color: #ffd700; /* Une couleur dorée pour le titre */
}

.exp-details {
    font-size: 0.9em;
    color: #ccc;
}

.exp-details strong {
    color: #fff;
}

/* Container principal de la ligne */
.expedition-status-row {
    display: flex;
    justify-content: space-between; /* Espace entre les infos et le bouton */
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    border-left: 3px solid #ffd700; /* Petite barre dorée décorative */
}

/* Groupe d'informations à gauche */
.exp-main-info {
    display: flex;
    flex-direction: row; /* Aligne les éléments horizontalement */
    align-items: center;
    gap: 20px; /* Espace entre le titre, l'objectif et le timer */
    flex-grow: 1;
}

.exp-tag {
    font-weight: bold;
    color: #ffd700;
    min-width: 30px;
}

.exp-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre l'icône et le texte */
    white-space: nowrap; /* Empêche le retour à la ligne du texte */
}

.exp-timer {
    font-family: monospace;
    color: #00ffcc; /* Couleur distincte pour le chrono */
}

/* Ajustement du bouton pour qu'il ne prenne pas trop de place */
.cancel-expedition-btn {
    margin-left: 10px;
    padding: 4px 10px !important;
    font-size: 11px !important;
}

/* =========================================
   📱 CORRECTIF MOBILE (DATE ABSOLUE & PSEUDO LIGNE 2)
   ========================================= */
@media screen and (max-width: 600px) {

    /* 1. LE HEADER : Sert de repère pour la date absolue */
    .chat-message .message-header {
        position: relative !important;
        padding-right: 60px !important; /* Place pour la date */
        align-items: flex-start !important; /* Alignement en haut */
        padding-bottom: 5px !important;
    }

    /* 2. LE CONTENEUR INFO (C'est lui la clé du problème !) */
    /* Il contient Pseudo + Badges. On le passe en Flex pour contrôler l'ordre. */
    .chat-message .message-user-info {
        display: flex !important;
        flex-wrap: wrap !important; /* AUTORISE le retour à la ligne */
        width: 100% !important;
        align-items: center !important;
    }

    /* 3. LES BADGES & TAGS (Passent en PREMIER : Ligne 1) */
    /* On cible tout sauf le pseudo dans le conteneur info */
    .chat-message .message-user-info > span:not(.message-username) {
        order: 1 !important;
        margin-right: 5px !important;
        display: inline-block !important;
    }

    /* 4. LE PSEUDO (Passe en DEUXIÈME : Ligne 2) */
    .chat-message .message-username {
        order: 2 !important; /* Force l'affichage APRES les badges */
        
        flex-basis: 100% !important; /* Force à prendre toute la largeur */
        width: 100% !important;      /* Force le retour à la ligne */
        
        display: block !important;
        margin-top: 2px !important;
        margin-left: 0 !important;
    }

    /* 5. LA DATE (Position Absolue en haut à droite) */
    .chat-message .message-timestamp {
        position: absolute !important;
        top: 8px !important;
        right: 10px !important;
        width: auto !important;
        font-size: 0.7em !important;
        margin: 0 !important;
    }
}

/* --- BADGE VIP CONTRIBUTEUR --- */
.badge-vip-shine {
    display: inline-block;
    filter: drop-shadow(0 0 5px #00e5ff); /* Lueur Bleue */
    animation: vipPulse 2s infinite ease-in-out;
}

@keyframes vipPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px #00e5ff); }
    50% { transform: scale(1.25); filter: drop-shadow(0 0 8px #00e5ff); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px #00e5ff); }
}

@keyframes highlightPost {
    0% { background-color: rgba(255, 255, 255, 0.2); border: 1px solid var(--accent-yellow); }
    100% { background-color: transparent; border: 1px solid transparent; }
}