:root {
    /* 🖤 Fonds */
    --bg-main: #1e1c1a;        /* fond général sombre */
    --bg-alt: #25211d;         /* menus, entêtes */
    --bg-panel: #3a2f28;       /* panneaux, blocs */
    --bg-panel-rgb: 58, 47, 40; /* couleur sans alpha */
    --bg-opacity: 0.85;

    /* 🧱 Surfaces et bordures */
    --metal-dark: #2c2c2c;     /* techno sombre */
    --metal-rust: #703d24;     /* rouille, accents */
    --border: #3d3024;         /* séparateurs */

    /* 🟠 Couleurs d’accent */
    --accent-orange: #ff7a00;  /* titres, liens */
    --accent-glow: #ff4500;    /* hover ou actif */

    /* 📄 Texte */
    --text-main: #d8c8b0;      /* principal */
    --text-muted: #9a8c7c;     /* secondaire, inactif */

    /* 🚨 États */
    --success: #34472e;        /* validation */
    --danger: #5e2d2d;         /* erreur */
    --warning: #efa75f;        /* attention */
    --info: #efa75f;           /* informatif */

    /* ✨ Spéciaux */
    --highlight: #6ea86e;      /* surbrillance IA */
    --glow-shadow: 0 0 10px var(--accent-glow);
}

@media (min-width: 768px) {
    body {
        background-image: url('../img/background-dust.png');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #000 !important;
    }
}

body {
    font-family: 'Share Tech Mono', monospace;
    color: var(--text-main);
    background-color: var(--bg-main);
}

h1, h2 {
    color: var(--accent-orange);
}

a {
    color: var(--accent-orange);
}

a:hover {
    color: var(--accent-glow);
}

.help a, .player-link {
    color: var(--info);
}

header, main {
    box-shadow: -8px 0 12px -4px #00000080, 8px 0 12px -4px #00000080;
}

.site-header {
    background-color: var(--bg-alt);
    border: 1px solid var(--bg-alt);
    color: var(--text-muted);
}

.unread {
    background-color: var(--text-muted);
    color: var(--bg-alt);
}

.site-nav ul {
    background: var(--bg-alt);
}

.site-nav ul.open li {
    border-bottom-color: var(--metal-dark);
}

.site-nav a {
    color: var(--text-muted);
}

.site-nav a:hover {
    color: var(--accent-orange);
}

.site-nav a.active {
    color: var(--accent-glow);
}

main {
    border: 1px solid var(--border);
    background-color: rgba(var(--bg-panel-rgb), var(--bg-opacity));
}

input, select {
    border: 1px solid var(--accent-orange);
    background-color: var(--text-main);
}

input:focus, select:focus {
    border: 1px solid var(--accent-glow);
}

.button, button {
    background-color: var(--metal-rust);
    border: 1px solid var(--accent-orange);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
}

.card.upgraded{
    border-color: var(--accent-orange);
}

.button:hover, button:hover {
    background-color: var(--bg-panel);
    color: var(--info);
}

.button:disabled, button:disabled {
    border: 1px solid var(--danger);
    color: var(--text-muted);
}

.stats-bar {
    border-top: 1px solid var(--border);
}

.table {
    font-family: 'Share Tech Mono', monospace;
    color: var(--text-main);
}

.table thead th {
    background-color: var(--border);
    color: var(--accent-orange);
}

.table td {
    border-bottom-color: #3b3b3b;
}

.table td a:not(.button):not(.btn):not(.button-link):hover {
    color: var(--accent-glow);
}

tr.top1, tr.you {
    background-color: var(--border);
}

.bloc {
    background: rgba(75, 85, 99, 0.15);
    border: 1px dashed #4b5563;
}

.duel-container .vs {
    background: rgba(0, 0, 0, 0.5);
}

.flash.info {
    background-color: var(--border);
    color: var(--text-muted);
}

.flash.success,
.alert.success {
    background-color: var(--success);      /* vert sobre */
    color: var(--text-main);               /* texte clair */
}

.flash.error,
.alert.error {
    background-color: var(--danger);
    color: var(--text-main);
}

hr {
    background-color: var(--text-muted);
}

.quote-ia {
    color: var(--text-muted);
    border-right: 4px solid var(--bg-panel);
}

.card {
    border: 1px solid var(--border);
}

.error.requirement,
.stats-bar .energy.error {
    color: var(--accent-glow);
}

ul.list-messages > li:not(:last-child) {
    border-bottom-color: var(--metal-dark);
}

ul.list-messages li.log {
    border-left-color: var(--bg-main);
}

ul.list-messages li.you a,
ul.list-messages li .gold,
.gold {
    color: var(--accent-glow);
}

ul.list-messages li.log.log-attack {
    border-left-color: var(--metal-rust);
}

ul.list-messages li.log.log-spy {
    border-left-color: var(--border);
}

ul.list-messages li.log.log-bonus,
ul.list-messages li.log.log-maluses,
ul.list-messages li.log.log-build,
ul.list-messages li.log.log-recruit {
    border-left-color: var(--success);
}

ul.list-messages li.log.log-connect {
    border-left-color: var(--highlight);
}

ul.list-messages li.log.log-trade,
ul.list-messages li.log.log-donation {
    border-left-color: var(--text-muted);
}

ul.list-messages li.log.log-system,
ul.list-messages li.log.log-warning {
    border-left-color: var(--danger);
}

ul.list-messages li.log.log-info {
    border-left-color: var(--metal-dark);
}

.image-wrapper .card-title .qty {
    color: white;
}

.player-link:not(strong .player-link),
.link,
.colored,
h3 {
    color: var(--info);
}

.nav-tabs a {
    color: var(--text-main);
    background-color: var(--bg-panel);
    border-color: var(--metal-rust);
}

.nav-tabs a:hover {
    border-bottom-color: var(--metal-rust);
}

.nav-tabs a.active {
    background-color: var(--metal-rust);
    border-color: var(--accent-orange);
    color: var(--info);
}

@media (min-width: 768px) {
    .menu-toggle {
        color: white;
    }

    .nav-tabs {
        border-bottom-color: var(--metal-rust);
    }
}