@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cinzel:wght@500;600;700&display=swap");:root {
    --font-game-text:
        "Alegreya",
        Georgia,
        "Times New Roman",
        serif;

    --font-game-title:
        "Cinzel",
        Georgia,
        "Times New Roman",
        serif;
}

/* =======================================================
   1. STYLE GLOBAL & FOND
   ======================================================= */
body {
    background: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560') no-repeat center center fixed;
    background-size: cover;
    margin: 0; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; height: 100vh;
    font-family: var(--font-game-text);
    font-weight: 600;
    color: white;
}
/* L'effet de flou global */
body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); z-index: -1; 
}
.hidden { display: none !important; }

/* =======================================================
   TYPOGRAPHIE FANTASY GLOBALE
   ======================================================= */

/*
 * Les textes ordinaires héritent de Cormorant Garamond
 * depuis le body.
 */
p,
span,
div,
label,
li,
td,
option,
textarea,
input,
select {
    font-family: inherit;
}

/*
 * Les grands titres et les titres HTML utilisent Cinzel.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Navigation principale.
 */
#nav-links a,
#header-current-username,
#header-logout-button {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Tous les boutons HTML utilisent la police fantasy.
 */
button {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Boutons représentés par des liens ou des divs.
 */
.btn-action,
.btn-choice,
.btn-play,
.btn-plus,
.btn-rank-filter,
.btn-faction-filter,
.profile-action-btn,
.building-tab-btn,
.building-action-btn,
.trade-tab,
.inventory-small-choice {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Titres généraux des interfaces.
 *
 * Ces sélecteurs couvrent notamment :
 * armory-title, class-title, job-title, race-title,
 * events-title, messages-title, quests-title, etc.
 */
[class$="-title"],
[class*="-section-title"],
[class*="-panel-title"],
[class*="-header-title"],
[class*="-family-name"] {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Onglets et boutons de navigation internes.
 */
[class$="-tab-btn"],
[class$="-view-btn"],
[class$="-sub-btn"],
[class$="-path-btn"],
[class$="-group-btn"],
[class$="-variant-btn"] {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Titres des encadrés latéraux :
 * Actualités, Encyclopédies, État du serveur...
 */
.stat-box h3,
.sidebar-event-item h4,
.acc-header {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Liens importants des menus latéraux.
 */
.sidebar-link-list a,
.sidebar-log-journal-link {
    font-family: var(--font-game-title);
    font-weight: 700;
}

/*
 * Les champs de saisie restent dans la police de texte,
 * plus lisible que Cinzel pour les emails et mots de passe.
 */
input,
select,
textarea {
    font-family: var(--font-game-text);
    font-weight: 600;
}

/*
 * Les nombres techniques et les dates déjà configurés
 * en monospace conservent leur comportement.
 */
#server-clock,
code {
    font-family: monospace;
}

/* =======================================================
   CORRECTION DE LISIBILITÉ DES PETITS TEXTES (reprendre les valeurs du bas une a une avec les bonnes valeurs)
   ======================================================= */


/* =======================================================
   2. MISE EN PAGE PRINCIPALE (HEADER & 3 COLONNES)
   ======================================================= */
 
/* BANDEAU SUPÉRIEUR */
#top-menu {
    width: 100%; height: 60px; background: #1a1a1a;
    border-bottom: 2px solid #333; 
    display: flex; 
    justify-content: center; /* Centre tout le menu */
    gap: 20px; /* Le même espacement que tes colonnes de jeu ! */
}

.header-block.left, .header-block.right {
    width: 280px; /* Exactement la largeur de tes encadrés "Statut" et "Actions" */
    display: flex;
    justify-content: center; /* Centre le texte à l'intérieur */
    align-items: center;
}

#server-clock { color: #00ff00; font-family: monospace; font-weight: bold; font-size: 1.1em; }

#nav-links { 
    width: 850px; /* Exactement la largeur de ta carte de jeu */
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 40px; 
}

#nav-links a { color: #bbb; text-decoration: none; font-weight: bold; transition: 0.3s; }
#nav-links a:hover { color: gold; }

/* --- MISE EN PAGE PRINCIPALE (3 COLONNES) --- */
#main-layout {
    display: flex;
    justify-content: center;
    padding: 15px 20px;
    gap: 20px;
    height: calc(100vh - 90px);
}

/* --- COLONNES LATÉRALES DE LA PAGE JEU --- */
#sidebar-left,
#sidebar-right {
    width: 280px;
    height: 900px;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* --- COLONNE CENTRALE DES PAGES CLASSIQUES --- */
.main-column {
    flex: 1;
    max-width: 850px;
    background: rgba(17, 17, 17, 0.85);
    border: 2px solid #333;
    border-radius: 8px;
    position: relative;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =======================================================
   SIDEBARS ACCUEIL / MENUS GÉNÉRAUX
   ======================================================= */

#sidebar-left-content,
#sidebar-right-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#sidebar-left-content .stat-box,
#sidebar-right-content .stat-box {
    box-sizing: border-box;
}

/* Actualités = même hauteur que État du Serveur */
.sidebar-news-box,
.sidebar-server-box {
    flex: 0 0 175px;
}

/* Evènements = même hauteur que Derniers Combats */
.sidebar-events-box,
.sidebar-combat-box {
    flex: 0 0 250px;
}

/* Les deux grands blocs du bas prennent toute la hauteur restante */
.sidebar-encyclopedia-box,
.sidebar-player-menu-box {
    flex: 1;
    min-height: 0;
}

/* Evènements */
.sidebar-event-item {
    margin-bottom: 8px;
    padding-left: 6px;
    border-left: 3px solid gold;
}

.sidebar-event-item h4 {
    margin: 0 0 3px 0;
    color: gold;
    font-size: 0.82em;
    text-transform: uppercase;
}

.sidebar-event-item p {
    margin: 0 0 3px 0;
    color: #aaa;
    font-size: 0.74em;
    line-height: 1.25;
}

.sidebar-event-item a {
    color: #3498db;
    font-size: 0.74em;
    font-weight: bold;
    text-decoration: none;
}

.sidebar-event-item a:hover {
    color: gold;
    text-decoration: underline;
}

/* Derniers combats : 5 lignes maximum visibles proprement */
.sidebar-combat-log {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 188px;
    overflow: hidden;
    font-size: 0.72em;
    color: #aaa;
    line-height: 1.18;
}

.combat-feed-line {
    margin: 0;
    padding-left: 6px;
    border-left: 3px solid gold;
}

.combat-feed-line.death {
    border-left-color: #e74c3c;
}

.combat-feed-line.event {
    border-left-color: #2ecc71;
}

.combat-feed-line.boss {
    border-left-color: #e67e22;
}

.combat-feed-line.master {
    border-left-color: #9b59b6;
}

/* Liens plus visibles et plus faciles à cliquer */
.sidebar-link-list.encyclopedia,
.sidebar-link-list.player {
    font-size: 1em;
    gap: 9px;
}

.sidebar-link-list.encyclopedia a,
.sidebar-link-list.player a {
    display: block;
    padding: 2px 0;
    line-height: 1.2;
}

.sidebar-muted {
    font-size: 0.85em;
    color: #bbb;
    line-height: 1.35;
    margin: 0;
}

.sidebar-small-note {
    font-size: 0.76em;
    color: #888;
    font-style: italic;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

.sidebar-mini-hr {
    border: none;
    border-top: 1px solid #333;
    margin: 8px 0;
}

/* Liens */
.sidebar-link-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.86em;
}

.sidebar-link-list a {
    color: gold;
    text-decoration: none;
    font-weight: bold;
    line-height: 1.15;
}

.sidebar-link-list a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Serveur */
.server-online {
    color: #2ecc71;
    font-size: 0.84em;
    font-weight: bold;
    margin: 0 0 6px 0;
}

.server-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78em;
    color: #aaa;
    margin: 4px 0;
}

.server-stat-row strong {
    color: #2ecc71;
}

.server-last-register {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75em;
}

.server-last-register span {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
}

.server-last-register strong {
    color: #ccc;
    font-weight: normal;
}

.combat-feed-line strong {
    color: gold;
}

.combat-feed-line span {
    color: #888;
    font-size: 0.92em;
}

.combat-feed-line.rank {
    border-left-color: #3498db;
}

.combat-feed-line.profession {
    border-left-color: #f1c40f;
}

.combat-feed-line.craft {
    border-left-color: #9b59b6;
}

.combat-feed-line.blood {
    border-left-color: #c0392b;
}

/* =======================================================
   PAGE ACCUEIL — IMAGE CENTRALE ET ÉVÈNEMENTS
   ======================================================= */

/*
 * La colonne centrale de l’accueil ne possède plus
 * les 20 px de marge intérieure de .main-column.
 *
 * Les autres pages ne sont pas affectées.
 */
.home-main {
    padding: 0;

    align-items: stretch;

    gap: 12px;

    background:
        rgba(17, 17, 17, 0.90);
}

/*
 * Partie supérieure de la colonne centrale.
 *
 * À la largeur maximale de la colonne centrale :
 * 850 px de largeur pour 560 px de hauteur.
 */
.home-hero {
    position: relative;

    flex: 0 0 auto;

    width: 100%;
    min-height: 560px;

    box-sizing: border-box;

    padding:
        42px
        34px
        30px
        34px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.28)
        ),
        url("assets/UI/icons/index.png");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    /*
     * Avec une image au ratio 850 × 560,
     * aucun recadrage ne sera nécessaire.
     */
    background-size:
        cover;

    overflow:
        hidden;
}

/* Titre placé devant l’image */
.home-title {
    position: relative;
    z-index: 1;

    margin:
        0
        0
        22px
        0;

    color:
        gold;

    text-align:
        center;

    text-transform:
        uppercase;

    font-size:
        2em;

    line-height:
        1.15;

    text-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.95);
}

.home-title-separator {
    position: relative;
    z-index: 1;

    width:
        50%;

    margin:
        0
        0
        28px
        0;

    border:
        none;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.35);
}

/*
 * Tous les formulaires et messages doivent apparaître
 * devant l’image de fond.
 */
.home-hero .view-step,
.home-hero #signup-container {
    position: relative;
    z-index: 1;
}

/* Emplacement inférieur réservé aux évènements */
.home-events-slot {
    width: 100%;

    box-sizing:
        border-box;

    padding:
        0
        12px
        12px
        12px;
}

/*
 * L’ancien encadré de la colonne gauche est transformé
 * en encadré horizontal à deux colonnes.
 */
.home-events-box {
    width: 100%;

    min-height:
        230px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        14px
        18px
        16px
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap:
        28px;

    row-gap:
        8px;

    flex:
        none;
}

/*
 * Le titre Évènements occupe toute la largeur.
 */
.home-events-box > h3 {
    grid-column:
        1 / -1;

    margin-bottom:
        8px;
}

/*
 * En cours et À venir apparaissent côte à côte.
 */
.home-events-box .sidebar-event-item {
    margin:
        0;

    padding:
        4px
        14px;

    min-width:
        0;

    box-sizing:
        border-box;
}

.home-events-box .sidebar-event-item h4 {
    font-size:
        1em;

    margin-bottom:
        7px;
}

.home-events-box .sidebar-event-item p {
    font-size:
        0.86em;

    line-height:
        1.4;

    margin-bottom:
        9px;
}

.home-events-box .sidebar-event-item a {
    font-size:
        0.84em;
}

/*
 * Sécurité pour les écrans plus étroits :
 * les deux évènements repassent l’un sous l’autre.
 */
@media (max-width: 900px) {
    .home-hero {
        min-height:
            500px;

        padding:
            32px
            20px;
    }

    .home-events-box {
        grid-template-columns:
            1fr;
    }

    .home-events-box > h3 {
        grid-column:
            1;
    }
}

/* --- LES BLOCS DE STATISTIQUES (ENCADRÉS) --- */
.stat-box { background: rgba(24, 24, 24, 0.9); border: 1px solid #333; padding: 12px; border-radius: 4px; }
.stat-box h3 { margin: 0 0 10px 0; font-size: 13px; text-transform: uppercase; color: gold; text-align: center; border-bottom: 1px solid #333; padding-bottom: 5px; }

/* N°2 : Position petite, centrée et italique */
.char-pos-styled {
    font-size: 0.75em;
    text-align: center;
    font-style: italic;
    color: #888;
    margin: 5px 0;
}

/* Harmonisation des lignes de stats (N°5) */
.stat-row-ui {
    font-size: 0.9em; 
    display: flex; 
    justify-content: space-between; 
    margin: 4px 0;
    font-family: var(--font-game-text);
}

.target-box {
    min-height: 220px; /* Force la hauteur même vide */
    display: flex;
    flex-direction: column;
}

.placeholder-text {
    color: #555;
    text-align: center;
    font-size: 0.9em;
    margin-top: 40px;
    font-style: italic;
}

/*couleur orange pour l'honneur partout */
:root {
    --honor-color: #e67e22;
}

.honor-value {
    color: var(--honor-color) !important;
    font-weight: bold;
}
/* =======================================================
   3. BOUTONS ET UI
   ======================================================= */
.btn-action { width: 100%; padding: 10px; background-color: #2c3e50; color: white; border: 1px solid #34495e; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px; transition: 0.2s; }
.btn-action:hover { background-color: #3e5871; }
.btn-action.gray {
    background-color: #222;
    color: #555;
    border-color: #333;
    cursor: not-allowed;
}
.action-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.action-item label {
    display: block;
    font-size: 0.75em;
    color: #ffcc00;
    margin-bottom: 5px;
    font-weight: bold;
}

.action-item select {
    width: 100%;
    padding: 6px;
    background-color: #000;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
}

.btn-choice { background: #333; color: white; border: 1px solid #555; padding: 10px 20px; cursor: pointer; border-radius: 3px; font-weight: bold; transition: 0.2s; text-transform: uppercase; }
.btn-choice.selected-green { background: #27ae60 !important; border-color: #2ecc71 !important; color: white; }

/* --- Correction Centrage Boutons --- */
.btn-group { 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    flex-wrap: wrap; 
    width: 100%; 
    margin-top: 15px;
}

/* --- Correction Sprites Personnages (Jeu) --- */
.player-token {
    position: absolute; 
    top: 50%; 
    left: 50%;
    width: 90px;  /* Mets 180, 200, ou même 250 ! */
    height: 90px;
    
    /* LA MAGIE EST ICI : 
       -100% remonte toute l'image pour que son BAS touche le centre de l'écran.
       +47px la redescend exactement sur la pointe basse de l'hexagone ! */
    transform: translate(-50%, calc(-100% + 47px)); 
    
    z-index: 100; 
    pointer-events: none; 
    background-size: contain !important; 
    background-position: center bottom !important; 
    background-repeat: no-repeat !important;
    background-color: transparent !important; 
    border: none !important; 
    border-radius: 0 !important;
}

/* =======================================================
   4. CRÉATION DE PERSONNAGE (ACCORDÉONS & RECTANGLES)
   ======================================================= */
.creation-accordion { background: rgba(0,0,0,0.6); border: 1px solid #444; margin-bottom: 10px; border-radius: 5px; width: 100%; overflow: hidden; }
.acc-header { background: #222; padding: 10px; color: gold; font-weight: bold; cursor: pointer; border-bottom: 1px solid #333; text-align: left; }
.acc-content { padding: 20px; transition: max-height 0.3s ease; }
.collapsed .acc-content { display: none; }

.char-rect { background: rgba(0, 0, 0, 0.6); border: 1px solid #ffd700; padding: 20px; margin: 15px auto; width: 100%; max-width: 600px; height: 280px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; border-radius: 5px; }
.char-info-box { width: 60%; height: 100%; text-align: left; display: flex; flex-direction: column; overflow-y: auto; }
.char-btns-box { width: 35%; height: 100%; display: flex; flex-direction: column; gap: 8px; justify-content: center; }

.stat-plus { color: #2ecc71; font-weight: bold; }
.stat-minus { color: #e74c3c; font-weight: bold; }

/* =======================================================
   5. ZONE DE CARTE (VIEWPORT) ET TUILES
   ======================================================= */
#game-viewport {
    width: 850px; 
    height: 900px;
    /* L'astuce : Un filtre noir à 75% d'opacité superposé à l'image */
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url('assets/fog.jpeg') #000;
    background-size: cover;
    background-position: center;
    border: 2px solid #333;
    position: relative; 
    overflow: hidden; 
    /* Garde à 0 si tu veux un rectangle, ou remets 8px si tu veux des coins arrondis */
    border-radius: 8px; 
}

/* --- HEXAGONES (Retour à la version simple) --- */
.hex {
    position: absolute; 
    width: 108px; 
    height: 94px;
    background-color: #234d20; 
    background-size: cover;    
    background-position: center;
    background-repeat: no-repeat;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s; 
}

.hex:hover {
    filter: brightness(1.3);   
    transform: scale(1.05);    
    z-index: 10;
}

.unit-marker { 
    width: 30px; height: 30px; background: red; 
    border: 2px solid white; border-radius: 50%; box-shadow: 0 0 8px red; 
}

.unit-name { 
    color: white; font-size: 10px; font-weight: bold; 
    position: absolute; bottom: 15px; 
}

/* =======================================================
   TUILES DYNAMIQUES (10 TYPES x 4 VARIANTES)
   ======================================================= */

/* 1. COULEURS DE SECOURS (Fonds unis) */
.foret1, .foret2, .foret3, .foret4             { background-color: #0F4A1C; }
.prairie1, .prairie2, .prairie3, .prairie4     { background-color: #94B82E; }
.route_herbe1, .route_herbe2, .route_herbe3, .route_herbe4 { background-color: #D6D56A; }
.route_sable1, .route_sable2, .route_sable3, .route_sable4 { background-color: #E9A43A; }
.marais1, .marais2, .marais3, .marais4         { background-color: #6F7740; }
.lac1, .lac2, .lac3, .lac4                     { background-color: #0879B8; }
.ocean1, .ocean2, .ocean3, .ocean4             { background-color: #06406F; }
.montagne1, .montagne2, .montagne3, .montagne4 { background-color: #8C8C8C; }
.roche1, .roche2, .roche3, .roche4             { background-color: #8A4F24; }
.desert1, .desert2, .desert3, .desert4         { background-color: #D49A45; }

/* 2. IMAGES DES TUILES (Dossier assets/tiles/) */

/* Forêt */
.foret1 { background-image: url('assets/tiles/foret1.png'); }
.foret2 { background-image: url('assets/tiles/foret2.png'); }
.foret3 { background-image: url('assets/tiles/foret3.png'); }
.foret4 { background-image: url('assets/tiles/foret4.png'); }

/* Prairie */
.prairie1 { background-image: url('assets/tiles/prairie1.png'); }
.prairie2 { background-image: url('assets/tiles/prairie2.png'); }
.prairie3 { background-image: url('assets/tiles/prairie3.png'); }
.prairie4 { background-image: url('assets/tiles/prairie4.png'); }

/* Route Herbe */
.route_herbe1 { background-image: url('assets/tiles/route_herbe1.png'); }
.route_herbe2 { background-image: url('assets/tiles/route_herbe2.png'); }
.route_herbe3 { background-image: url('assets/tiles/route_herbe3.png'); }
.route_herbe4 { background-image: url('assets/tiles/route_herbe4.png'); }

/* Route Sable */
.route_sable1 { background-image: url('assets/tiles/route_sable1.png'); }
.route_sable2 { background-image: url('assets/tiles/route_sable2.png'); }
.route_sable3 { background-image: url('assets/tiles/route_sable3.png'); }
.route_sable4 { background-image: url('assets/tiles/route_sable4.png'); }

/* Marais */
.marais1 { background-image: url('assets/tiles/marais1.png'); }
.marais2 { background-image: url('assets/tiles/marais2.png'); }
.marais3 { background-image: url('assets/tiles/marais3.png'); }
.marais4 { background-image: url('assets/tiles/marais4.png'); }

/* Lac */
.lac1 { background-image: url('assets/tiles/lac1.png'); }
.lac2 { background-image: url('assets/tiles/lac2.png'); }
.lac3 { background-image: url('assets/tiles/lac3.png'); }
.lac4 { background-image: url('assets/tiles/lac4.png'); }

/* Océan */
.ocean1 { background-image: url('assets/tiles/ocean1.png'); }
.ocean2 { background-image: url('assets/tiles/ocean2.png'); }
.ocean3 { background-image: url('assets/tiles/ocean3.png'); }
.ocean4 { background-image: url('assets/tiles/ocean4.png'); }

/* Montagne */
.montagne1 { background-image: url('assets/tiles/montagne1.png'); }
.montagne2 { background-image: url('assets/tiles/montagne2.png'); }
.montagne3 { background-image: url('assets/tiles/montagne3.png'); }
.montagne4 { background-image: url('assets/tiles/montagne4.png'); }

/* Roche */
.roche1 { background-image: url('assets/tiles/roche1.png'); }
.roche2 { background-image: url('assets/tiles/roche2.png'); }
.roche3 { background-image: url('assets/tiles/roche3.png'); }
.roche4 { background-image: url('assets/tiles/roche4.png'); }

/* Désert */
.desert1 { background-image: url('assets/tiles/desert1.png'); }
.desert2 { background-image: url('assets/tiles/desert2.png'); }
.desert3 { background-image: url('assets/tiles/desert3.png'); }
.desert4 { background-image: url('assets/tiles/desert4.png'); }

/* =======================================================
   6. PAGE PERSONNAGES — LISTE COMPACTE
   ======================================================= */

#characters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    width: 100%;
    margin-top: 15px;
}

/*
 * Une seule carte par ligne.
 * La partie droite possède la même largeur
 * pour chaque personnage.
 */
.char-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        220px;

    gap: 16px;
    align-items: stretch;

    width: 100%;
    box-sizing: border-box;

    padding: 12px 14px;

    background:
        rgba(24, 24, 24, 0.95);

    border:
        1px solid #666;

    border-radius:
        8px;

    box-shadow:
        0 4px 8px
        rgba(0, 0, 0, 0.6);
}

/* Partie gauche */
.character-card-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

/*
 * Nom, race, classe et position
 * sur une seule ligne.
 */
.character-identity {
    min-width: 0;

    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 16px;

    white-space: nowrap;
}

.character-name {
    margin: 0;

    color: gold;

    font-size: 1.18em;
    line-height: 1.1;

    text-transform: uppercase;
}

.character-type {
    margin: 0;

    color: #aaa;

    font-size: 0.88em;
}

.character-position {
    margin: 0;

    color: #888;

    font-size: 0.80em;
    font-style: italic;
}

.character-summon-note {
    margin-left: 8px;

    color: #bdc3c7;

    font-size: 0.9em;
    font-style: italic;
}

/*
 * Encadré noir commun :
 * ressources en haut,
 * PV/Malus/PA/PM en dessous.
 */
.character-summary-box {
    width: 100%;
    box-sizing: border-box;

    padding: 7px 10px;

    background:
        rgba(0, 0, 0, 0.55);

    border:
        1px solid #333;

    border-radius:
        3px;
}

/* Or, Honneur, XP et Investissement */
.character-resources {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    align-items: center;

    padding-bottom: 7px;

    font-size: 0.88em;
    font-weight: bold;

    text-align: center;
}

.character-resource {
    min-width: 0;

    white-space: nowrap;
}

.character-resource.is-gold {
    color: gold;
}

.character-resource.is-honor {
    color: var(--honor-color);
}

.character-resource.is-xp {
    color: #3498db;
}

.character-resource.is-investment {
    color: #9b59b6;
}

/* PV, Malus, PA et PM sur une seule ligne */
.character-status-row {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    align-items: center;

    padding-top: 7px;

    border-top:
        1px solid #333;

    font-size: 0.88em;
    text-align: center;
}

.character-status-row span {
    min-width: 0;

    white-space: nowrap;
}

.character-status-row strong {
    color: white;
}

.character-status-row strong.is-negative {
    color: #e74c3c;
}

/*
 * Colonne de droite :
 * prochain tour et bouton.
 */
.character-card-side {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-left: 16px;

    border-left:
        1px solid #444;
}

.character-turn-box {
    padding: 9px 8px;

    background:
        rgba(0, 0, 0, 0.6);

    border:
        1px solid #444;

    border-radius:
        4px;

    text-align: center;
}

.character-turn-label,
.character-turn-date {
    display: block;
}

.character-turn-label {
    color: #aaa;

    font-size: 0.74em;
    font-weight: bold;

    text-transform: uppercase;
}

.character-turn-date {
    margin-top: 3px;

    color: white;

    font-size: 0.95em;
    font-weight: bold;

    white-space: nowrap;
}

/* Bouton commun */
.btn-play {
    display: block;

    margin-top: 10px;
    padding: 9px 8px;

    color: white;

    border:
        1px solid transparent;

    border-radius:
        4px;

    text-align: center;
    text-decoration: none;

    font-size: 0.80em;
    font-weight: bold;
    line-height: 1.15;

    transition: 0.2s;
}

/* Nouveau tour disponible */
.btn-play.is-ready {
    background: #27ae60;
    border-color: #2ecc71;
}

.btn-play.is-ready:hover {
    background: #2ecc71;
}

/*
 * Tour actuel encore actif.
 * Le bouton reste cliquable.
 */
.btn-play.is-waiting {
    background: #555;
    border-color: #666;

    color: #ddd;
}

.btn-play.is-waiting:hover {
    background: #666;
}

/* Personnage mort */
.btn-play.is-dead {
    background: #c0392b;
    border-color: #e74c3c;
}

.btn-play.is-dead:hover {
    background: #e74c3c;
}

/* Invocation non jouable */
.btn-play.is-static {
    background: #555;
    border-color: #666;

    color: #ddd;

    cursor: default;
    pointer-events: none;
}

/* Adaptation pour une fenêtre étroite */
@media (max-width: 720px) {
    .char-card {
        grid-template-columns: 1fr;
    }

    .character-identity {
        flex-wrap: wrap;

        gap: 5px 12px;

        white-space: normal;
    }

    .character-resources,
    .character-status-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 7px;
    }

    .character-card-side {
        padding-top: 10px;
        padding-left: 0;

        border-top:
            1px solid #444;

        border-left:
            none;
    }
}

/* =======================================================
   7. PAGE ÉQUIPEMENT & INVENTAIRE
   ======================================================= */
.inv-grid {
    display: grid;
    /* POUR CHANGER LA TAILLE DES CASES DU SAC, C'EST ICI (ex: 46px) */
    grid-template-columns: repeat(6, 46px);
    justify-content: center;
    /* POUR CHANGER L'ESPACE ENTRE LES CASES DU SAC, C'EST ICI */
    gap: 6px; 
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #333;
}

.inv-slot {
    /* DOIT ÊTRE IDENTIQUE À LA VALEUR GRID-TEMPLATE CI-DESSUS */
    width: 46px;
    height: 46px;
    background: #111;
    border: 1px solid #444;
    border-radius: 4px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; cursor: pointer; transition: 0.2s; position: relative;
}

.inv-slot:hover { border-color: gold; background: #222; }
.inv-slot.empty { opacity: 0.5; }
.inv-slot.empty:hover { border-color: #555; cursor: default; }

/* Confirmation intégrée de la validation d'équipement */
.inv-grid.equipment-confirmation-grid {
    min-height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.equipment-confirmation-panel {
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    padding: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid gold;
    border-radius: 6px;
}

.equipment-confirmation-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.equipment-confirmation-text {
    color: #ddd;
    font-size: 0.82em;
    line-height: 1.35;
    max-width: 300px;
}

.equipment-confirmation-warning {
    color: #e74c3c;
    font-size: 0.78em;
    font-weight: bold;
    margin-top: 6px;
}

.equipment-confirmation-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.equipment-confirmation-actions .btn-action {
    margin-top: 0;
    padding: 8px 6px;
    font-size: 0.70em;
}

.equipment-confirmation-cancel {
    background: #444 !important;
    border-color: #666 !important;
}

.eq-layout {
    position: relative;
    height: 478px;
    width: 100%;
    overflow: hidden;

    background: rgba(0,0,0,0.35);
    border-radius: 6px;

    padding-top: 20px;
    box-sizing: border-box;
}

#eq-sprite {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);

    width: 220px;
    height: 270px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.eq-slot {
    position: absolute;
    /* TAILLE DES CASES AUTOUR DU PERSONNAGE */
    width: 46px; height: 46px;
    background: #0a0a0a; border: 1px solid #333; border-radius: 4px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; cursor: pointer; transition: 0.2s;
}

.eq-slot:hover {
    border-color: gold;
    background: #111;
    filter: brightness(1.15);
}

.eq-slot:active {
    filter: brightness(0.95);
}
.eq-slot.empty { opacity: 0.4; filter: grayscale(1); }

/* POSITIONS ÉQUIPEMENT SIMPLIFIÉES */
/* Colonne gauche : Tête, Torse, Jambes, Pieds */
.pos-l1 { top: 25px; left: 20px; }
.pos-l2 { top: 105px; left: 20px; }
.pos-l3 { top: 185px; left: 20px; }
.pos-l4 { top: 265px; left: 20px; }

/* Colonne droite : Cape, Collier, Bague, Sac */
.pos-r1 { top: 25px; right: 20px; }
.pos-r2 { top: 105px; right: 20px; }
.pos-r3 { top: 185px; right: 20px; }
.pos-r4 { top: 265px; right: 20px; }

/* Bas : Arme Principale + Arme Secondaire */
.pos-b1 {
    top: 315px;
    left: calc(50% - 65px);
    transform: none;
}

.pos-b2 {
    top: 315px;
    left: calc(50% + 19px);
    transform: none;
}

/* encadré SET sous caracs */
.selected-set-box {
    margin: 18px auto 0 auto;
    width: calc(100% - 30px);
    min-height: 74px;

    border-radius: 6px;
    padding: 10px;

    text-align: center;
    font-size: 0.85em;

    border: 1px solid gold;
    background: rgba(255,215,0,0.10);
    color: gold;
    box-sizing: border-box;
}

.selected-set-box.inactive {
    border: 1px solid #444;
    background: rgba(40,40,40,0.75);
    color: #777;
}

.selected-set-items {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* bloc de SET sous persos*/
#equipment-set-container {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 16px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.set-box {
    min-height: 74px;

    border-radius: 6px;
    padding: 8px;

    text-align: center;
    font-size: 0.8em;

    border: 1px solid #444;

    background: rgba(40,40,40,0.75);
    color: #777;
}

.set-box.active {
    background: rgba(255,215,0,0.12);
    border: 1px solid gold;
    color: gold;
}

.set-bonus {
    color: #2ecc71;
    font-weight: bold;
    margin-top: 4px;
}

.set-missing {
    color: #888;
    font-size: 0.9em;
}

/* bloc de détails de l'objet  */ 
.equipment-bottom-box {
    height: 263px;
    max-height: 263px;
    overflow: hidden;
}

.item-detail-card {
    position: relative;
    width: 100%;
    height: 218px;
    box-sizing: border-box;

    border: 1px solid var(--rarity-color);
    border-radius: 6px;

    padding: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--rarity-color) 18%, transparent),
            rgba(0,0,0,0.35) 45%,
            rgba(0,0,0,0.15)
        );

    box-shadow:
        inset 0 0 18px color-mix(in srgb, var(--rarity-color) 25%, transparent),
        0 0 10px color-mix(in srgb, var(--rarity-color) 45%, transparent);
}

.item-detail-text {
    position: relative;
    z-index: 2;
    width: 58%;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* bloc de taille de l'objet en transparence */
.item-detail-image {
    position: absolute;
    z-index: 1;

    width: 180px;
    height: 180px;

    right: -10px;
    top: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    opacity: 0.95;
}

/* bloc de position fixe bouton s'équiper */
.item-detail-action {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 5;
}

.item-detail-action .btn-action {
    width: 180px;
    height: 35px;
}
/* =======================================================
   8. PAGE ATTRIBUTS (STYLE RESTAURÉ ET AGRANDI)
   ======================================================= */
.attr-section-title {
    color: gold; 
    margin: 15px 0 15px 0; 
    border-bottom: 1px solid #333; 
    text-align: center; 
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.attr-upgrade-row {
    display: flex;
    align-items: center;
    gap:15px;
    margin-bottom: 10px; 
    background: rgba(255,255,255,0.04);
    padding: 8px 8px; /* Légèrement réduit pour respirer */
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    
    /* LA SÉCURITÉ ANTI-DÉBORDEMENT */
    width: 100%;
    box-sizing: border-box; 
}

.attr-info { width: 190px; }
.attr-label { font-weight: bold; color: gold; font-size: 1.1em; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.attr-sub-info { font-size: 0.85em; color: #bbb; font-family: monospace; margin-top: 5px; }

.gauge-container { flex: 1; margin: 0 15px; }
.gauge-bg { height: 14px; background: #000; border: 1px solid #444; border-radius: 8px; overflow: hidden; position: relative; }

.gauge-fill { 
    height: 100%; position: absolute; left: 0; top: 0;
    background: linear-gradient(90deg, #f1c40f, #e67e22); 
    transition: width 0.3s;
}

.gauge-fill-pending {
    height: 100%; position: absolute; top: 0;
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}

/* RETOUR DES BOUTONS "+" VERTS D'ORIGINE */
.btn-plus {
    width: 34px; height: 34px;
    background: #27ae60; color: white;
    border: none; border-radius: 50%;
    cursor: pointer; font-weight: bold; font-size: 1.4em;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.btn-plus:hover:not(:disabled) { background: #2ecc71; transform: scale(1.15); }
.btn-plus:disabled { background: #333; color: #666; cursor: not-allowed; box-shadow: none; }

.attr-actions { width: 130px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.next-cost { font-size: 0.95em; font-weight: bold; font-family: monospace; }

/* =======================================================
   9. PAGE COMPÉTENCES (SKILLS)
   ======================================================= */
.skill-section-title {
    color: gold; 
    margin: 10px 0 15px 0; 
    border-bottom: 1px solid #333; 
    text-align: center; 
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.skill-container {
    margin-bottom: 20px;
}

.skill-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px 20px;
    gap: 20px;
    transition: transform 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.skill-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
    border-color: rgba(255, 215, 0, 0.3);
}

.skill-icon {
    font-size: 2.5em;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 50%;
    flex-shrink: 0;
}

.skill-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skill-name {
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.skill-desc {
    font-size: 0.95em;
    color: #bbb;
    font-style: italic;
    line-height: 1.4;
    white-space: pre-line;
}

.skill-long-desc {
    color: #aaa;
    font-style: italic;
    font-size: 0.95em;
    line-height: 1.45;
    white-space: pre-line;
}

.skill-preview-desc {
    font-size: 0.9em;
}

/* =======================================================
   10. PAGE CLASSEMENT (RANKING)
   ======================================================= */
.btn-rank-filter, .btn-faction-filter {
    background: #111; color: #888; border: 1px solid #444;
    padding: 8px 15px; border-radius: 4px; cursor: pointer;
    font-size: 0.85em; font-weight: bold; transition: 0.2s;
}
.btn-rank-filter:hover, .btn-faction-filter:hover { border-color: gold; color: gold; }
.btn-rank-filter.active, .btn-faction-filter.active { background: gold; color: black; border-color: gold; }

.rank-table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.2); }
.rank-table th { background: #222; color: gold; padding: 12px; text-align: left; font-size: 0.9em; text-transform: uppercase; border-bottom: 2px solid #333; }
.rank-table td { padding: 12px; border-bottom: 1px solid #222; }
.rank-table tr:hover { background: rgba(255,215,0,0.05); }

.rank-name-link { color: gold; text-decoration: none; font-weight: bold; }
.rank-name-link:hover { text-decoration: underline; }

/* MÉDAILLES */
.medal {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
    align-items: center; justify-content: center; font-weight: bold; color: black;
    font-size: 0.8em; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.medal-gold   { background: linear-gradient(135deg, #ffd700, #b8860b); border: 1px solid #fff; }
.medal-silver { background: linear-gradient(135deg, #c0c0c0, #808080); border: 1px solid #fff; }
.medal-copper { background: linear-gradient(135deg, #cd7f32, #8b4513); border: 1px solid #fff; }
.medal-iron   { background: linear-gradient(135deg, #444, #111); color: #ccc; border: 1px solid #555; }

/*Nouvelle pagination */
.ranking-main {
    width:
        100%;

    max-width:
        848px;

    padding:
        10px
        20px;

    box-sizing:
        border-box;

    overflow-x:
        hidden;

    align-items:
        center;
}

.ranking-title {
    margin:
        0
        0
        6px
        0;

    color:
        gold;

    text-align:
        center;

    text-transform:
        uppercase;
}

.ranking-separator {
    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0
        0
        10px
        0;

    border-color:
        #333;
}

.ranking-controls-box {
    width:
        96%;

    margin:
        0
        auto
        10px
        auto;

    padding:
        10px;

    box-sizing:
        border-box;
}

.ranking-controls-layout {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    align-items:
        center;
}

/*
 * Les huit critères sont placés automatiquement
 * sur deux lignes de quatre boutons.
 */
.ranking-criteria-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        6px;

    width:
        100%;
}

.ranking-criteria-grid
.btn-rank-filter {
    width:
        100%;

    min-width:
        0;

    height:
        32px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        5px
        6px;

    font-size:
        0.72em;

    white-space:
        nowrap;
}

/*
 * Factions et personnages du joueur :
 * une ligne unique de cinq boutons.
 */
.ranking-faction-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        6px;

    width:
        100%;

    box-sizing:
        border-box;

    padding-top:
        7px;

    border-top:
        1px solid #333;
}

.ranking-faction-row
.btn-faction-filter {
    width:
        100%;

    min-width:
        0;

    height:
        32px;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        5px
        6px;

    font-size:
        0.72em;

    white-space:
        nowrap;
}

.ranking-my-characters-btn {
    color:
        #2ecc71;
}

/* Encadré de la table */
.ranking-table-box {
    width:
        96%;

    margin:
        0
        auto;

    padding:
        0;

    box-sizing:
        border-box;

    overflow:
        hidden;
}

/*
 * Les dix lignes sont légèrement compactées afin que
 * la page tienne entièrement en 1920 × 1080.
 */
.page-ranking
.rank-table th {
    padding:
        8px
        10px;

    line-height:
        1.1;
}

.page-ranking
.rank-table td {
    padding:
        7px
        10px;

    line-height:
        1.15;
}

.page-ranking
.ranking-pagination {
    padding:
        7px
        8px;
}

/*
 * Personnage appartenant au joueur et présent
 * dans le Top 10 du classement actif.
 */
.page-ranking
.rank-table
tr.ranking-own-top10 td {
    background:
        rgba(
            39,
            174,
            96,
            0.28
        );

    border-bottom-color:
        rgba(
            46,
            204,
            113,
            0.58
        );

    box-shadow:
        inset
        0
        0
        12px
        rgba(
            46,
            204,
            113,
            0.16
        );
}

.page-ranking
.rank-table
tr.ranking-own-top10:hover td {
    background:
        rgba(
            46,
            204,
            113,
            0.40
        );
}

.page-ranking
.rank-table
tr.ranking-own-top10
.rank-name-link {
    color:
        #ffffff;

    text-shadow:
        0
        0
        7px
        rgba(
            46,
            204,
            113,
            0.85
        );
}

.ranking-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid #333;
}

.ranking-pagination .btn-rank-filter {
    width: 100px;
    padding: 5px;
}

.ranking-pages {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 1.1em;
    font-family: monospace;
}

.ranking-page-number {
    color: #888;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.ranking-page-number:hover {
    color: white;
}

.ranking-page-number.active {
    color: gold;
    font-weight: bold;
    border-bottom: 2px solid gold;
    cursor: default;
}

/* =======================================================
   🏰 BÂTIMENTS GÉANTS (TOUS LES BIOMES)
   ======================================================= */

/* 1. Structure de base pour tous les bâtiments géants */
.mega-building {
    position: absolute;
    z-index: 50; /* Très important : affiche le bâtiment au-dessus des hexagones du sol */
    pointer-events: none; /* Le clic traverse l'image pour toucher les hexagones/obstacles en dessous */
    transform: translate(-50%, -100%); /* Aligne le bas de l'image (la porte) sur la case cliquée */
    margin-top: 47px; /* Décale l'image pour qu'elle tombe pile au centre de l'hexagone */ 
}

/* --- ⛰️ MONTAGNE --- */
.mega-building.bastion_montagne { width: 1600px; height: 1026px; background-image: url('assets/houses/bastion-nain2.png'); background-size: 100% 100%; }
.mega-building.forge_montagne   { width: 427px; height: 371px; background-image: url('assets/houses/forge-nain2.png'); background-size: 100% 100%; }
.mega-building.maison_montagne  { width: 358px; height: 307px; background-image: url('assets/houses/maison-nain2.png'); background-size: 100% 100%; }
.mega-building.marche_montagne  { width: 431px; height: 284px; background-image: url('assets/houses/marche-nain2.png'); background-size: 100% 100%; }
.mega-building.mine_montagne    { width: 476px; height: 354px; background-image: url('assets/houses/mine-nain2.png'); background-size: 100% 100%; }
.mega-building.taverne_montagne { width: 448px; height: 379px; background-image: url('assets/houses/taverne-nain2.png'); background-size: 100% 100%; }
.mega-building.tour_montagne    { width: 308px; height: 543px; background-image: url('assets/houses/tour-nain2.png'); background-size: 100% 100%; }
.mega-building.camp_montagne    { width: 400px; height: 350px; background-image: url('assets/houses/camp-nain2.png'); background-size: 100% 100%; }
/*.mega-building.tannerie_montagne  { width: 450px; height: 400px; background-image: url('assets/houses/tannerie-nain2.png'); background-size: 100% 100%; }
.mega-building.carriere_montagne  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-nain2.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_montagne  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-nain2.png'); background-size: 100% 100%; }
.mega-building.arcanium_montagne  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-nain2.png'); background-size: 100% 100%; }*/

/* --- 🌲 FORÊT --- */
.mega-building.bastion_foret { width: 762px; height: 780px; background-image: url('assets/houses/bastion-humain2.png'); background-size: 100% 100%; }
.mega-building.maison_foret  { width: 308px; height: 543px; background-image: url('assets/houses/maison-humain2.png'); background-size: 100% 100%; }
.mega-building.marche_foret  { width: 416px; height: 367px; background-image: url('assets/houses/marche-humain2.png'); background-size: 100% 100%; }
.mega-building.taverne_foret { width: 550px; height: 343px; background-image: url('assets/houses/taverne-humain2.png'); background-size: 100% 100%; }
.mega-building.tour_foret    { width: 308px; height: 543px; background-image: url('assets/houses/tour-humain2.png'); background-size: 100% 100%; }
.mega-building.tannerie_foret  { width: 450px; height: 400px; background-image: url('assets/houses/tannerie-humain2.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_foret  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-humain2.png'); background-size: 100% 100%; }
.mega-building.arcanium_foret  { width: 385px; height: 315px; background-image: url('assets/houses/arcanium-humain2.png'); background-size: 100% 100%; }
/*.mega-building.carriere_foret  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-humain2.png'); background-size: 100% 100%; }
.mega-building.forge_foret   { width: 537px; height: 383px; background-image: url('assets/houses/forge-humain2.png'); background-size: 100% 100%; }
.mega-building.mine_foret    { width: 432px; height: 295px; background-image: url('assets/houses/mine-humain2.png'); background-size: 100% 100%; }
.mega-building.camp_foret    { width: 400px; height: 350px; background-image: url('assets/houses/camp-humain2.png'); background-size: 100% 100%; }*/

/* --- 💧 LAC --- */
.mega-building.bastion_lac { width: 642px; height: 514px; background-image: url('assets/houses/bastion-troll.png'); background-size: 100% 100%; }
.mega-building.maison_lac  { width: 358px; height: 307px; background-image: url('assets/houses/maison-troll.png'); background-size: 100% 100%; }
.mega-building.marche_lac  { width: 325px; height: 319px; background-image: url('assets/houses/marche-troll.png'); background-size: 100% 100%; }
.mega-building.taverne_lac { width: 550px; height: 343px; background-image: url('assets/houses/taverne-troll.png'); background-size: 100% 100%; }
.mega-building.tour_lac    { width: 308px; height: 543px; background-image: url('assets/houses/tour-troll.png'); background-size: 100% 100%; }
.mega-building.camp_lac     { width: 400px; height: 350px; background-image: url('assets/houses/camp-troll.png'); background-size: 100% 100%; }
.mega-building.tannerie_lac  { width: 450px; height: 400px; background-image: url('assets/houses/tannerie-troll.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_lac  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-troll.png'); background-size: 100% 100%; }
.mega-building.arcanium_lac  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-troll.png'); background-size: 100% 100%; }
/*.mega-building.carriere_lac  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-troll.png'); background-size: 100% 100%; }
.mega-building.forge_lac   { width: 537px; height: 383px; background-image: url('assets/houses/forge-troll.png'); background-size: 100% 100%; }
.mega-building.mine_lac    { width: 432px; height: 295px; background-image: url('assets/houses/mine-troll.png'); background-size: 100% 100%; }*/

/* --- ⛰️ COLLINE --- */
.mega-building.bastion_colline { width: 642px; height: 514px; background-image: url('assets/houses/bastion-orc.png'); background-size: 100% 100%; }
.mega-building.forge_colline   { width: 537px; height: 383px; background-image: url('assets/houses/forge-orc.png'); background-size: 100% 100%; }
.mega-building.maison_colline  { width: 358px; height: 307px; background-image: url('assets/houses/maison-orc.png'); background-size: 100% 100%; }
.mega-building.marche_colline  { width: 325px; height: 319px; background-image: url('assets/houses/marche-orc.png'); background-size: 100% 100%; }
.mega-building.mine_colline    { width: 432px; height: 295px; background-image: url('assets/houses/mine-orc.png'); background-size: 100% 100%; }
.mega-building.taverne_colline { width: 550px; height: 343px; background-image: url('assets/houses/taverne-orc.png'); background-size: 100% 100%; }
.mega-building.tour_colline    { width: 308px; height: 543px; background-image: url('assets/houses/tour-orc.png'); background-size: 100% 100%; }
.mega-building.tannerie_colline  { width: 450px; height: 400px; background-image: url('assets/houses/tannerie-orc.png'); background-size: 100% 100%; }
.mega-building.carriere_colline  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-orc.png'); background-size: 100% 100%; }
/*.mega-building.camp_colline { width: 400px; height: 350px; background-image: url('assets/houses/camp-orc.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_colline  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-orc.png'); background-size: 100% 100%; }
.mega-building.arcanium_colline  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-orc.png'); background-size: 100% 100%; }*/

/* --- 🐸 MARAIS --- */
.mega-building.bastion_marais { width: 645px; height: 435px; background-image: url('assets/houses/bastion-troll2.png'); background-size: 100% 100%; }
.mega-building.maison_marais  { width: 358px; height: 307px; background-image: url('assets/houses/maison-troll2.png'); background-size: 100% 100%; }
.mega-building.marche_marais  { width: 325px; height: 319px; background-image: url('assets/houses/marche-troll2.png'); background-size: 100% 100%; }
.mega-building.taverne_marais { width: 550px; height: 343px; background-image: url('assets/houses/taverne-troll2.png'); background-size: 100% 100%; }
.mega-building.tour_marais    { width: 308px; height: 543px; background-image: url('assets/houses/tour-troll2.png'); background-size: 100% 100%; }
.mega-building.camp_marais { width: 400px; height: 350px; background-image: url('assets/houses/camp-troll2.png'); background-size: 100% 100%; }
.mega-building.tannerie_marais  { width: 1130px; height: 1187px; background-image: url('assets/houses/tannerie-troll2.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_marais  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-troll2.png'); background-size: 100% 100%; }
/*.mega-building.arcanium_marais  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-marais.png'); background-size: 100% 100%; }
.mega-building.carriere_marais  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-marais.png'); background-size: 100% 100%; }
.mega-building.mine_marais    { width: 432px; height: 295px; background-image: url('assets/houses/mine-marais.png'); background-size: 100% 100%; }
.mega-building.forge_marais   { width: 537px; height: 383px; background-image: url('assets/houses/forge-marais.png'); background-size: 100% 100%; }*/

/* --- 🦇 CAVERNE --- */
.mega-building.bastion_caverne { width: 1405px; height: 1119px; background-image: url('assets/houses/bastion-nain.png'); background-size: 100% 100%; }
.mega-building.forge_caverne   { width: 427px; height: 361px; background-image: url('assets/houses/forge-nain.png'); background-size: 100% 100%; }
.mega-building.maison_caverne  { width: 358px; height: 307px; background-image: url('assets/houses/maison-nain.png'); background-size: 100% 100%; }
.mega-building.marche_caverne  { width: 481px; height: 356px; background-image: url('assets/houses/marche-nain.png'); background-size: 100% 100%; }
.mega-building.taverne_caverne { width: 448px; height: 379px; background-image: url('assets/houses/taverne-nain.png'); background-size: 100% 100%; }
.mega-building.tour_caverne    { width: 982px; height: 1125px; background-image: url('assets/houses/tour-nain.png'); background-size: 100% 100%; }
.mega-building.camp_caverne { width: 470px; height: 372px; background-image: url('assets/houses/camp-nain.png'); background-size: 100% 100%; }
.mega-building.tannerie_caverne  { width: 479px; height: 344px; background-image: url('assets/houses/tannerie-nain.png'); background-size: 100% 100%; }
.mega-building.carriere_caverne  { width: 476px; height: 354px; background-image: url('assets/houses/carriere-nain.png'); background-size: 100% 100%; }
/*.mega-building.poissonnerie_caverne  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-nain.png'); background-size: 100% 100%; }
.mega-building.arcanium_caverne  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-nain.png'); background-size: 100% 100%; }
.mega-building.mine_caverne    { width: 432px; height: 295px; background-image: url('assets/houses/mine-nain.png'); background-size: 100% 100%; }*/

/* --- 🏜️ DÉSERT --- */
.mega-building.bastion_desert { width: 642px; height: 514px; background-image: url('assets/houses/bastion-orc2.png'); background-size: 100% 100%; }
.mega-building.forge_desert   { width: 537px; height: 383px; background-image: url('assets/houses/forge-orc2.png'); background-size: 100% 100%; }
.mega-building.maison_desert  { width: 358px; height: 307px; background-image: url('assets/houses/maison-orc2.png'); background-size: 100% 100%; }
.mega-building.marche_desert  { width: 325px; height: 319px; background-image: url('assets/houses/marche-orc2.png'); background-size: 100% 100%; }
.mega-building.taverne_desert { width: 550px; height: 343px; background-image: url('assets/houses/taverne-orc2.png'); background-size: 100% 100%; }
.mega-building.tour_desert    { width: 308px; height: 543px; background-image: url('assets/houses/tour-orc2.png'); background-size: 100% 100%; }
.mega-building.camp_desert { width: 400px; height: 350px; background-image: url('assets/houses/camp-orc2.png'); background-size: 100% 100%; }
.mega-building.arcanium_desert  { width: 300px; height: 250px; background-image: url('assets/houses/arcanium-orc2.png'); background-size: 100% 100%; }
/*.mega-building.tannerie_desert  { width: 450px; height: 400px; background-image: url('assets/houses/tannerie-orc2.png'); background-size: 100% 100%; }
.mega-building.carriere_desert  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-orc2.png'); background-size: 100% 100%; }
.mega-building.mine_desert    { width: 432px; height: 295px; background-image: url('assets/houses/mine-orc2.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_desert  { width: 450px; height: 400px; background-image: url('assets/houses/poissonnerie-orc2.png'); background-size: 100% 100%; }*/

/* --- 🌾 PLAINE --- */
.mega-building.bastion_plaine { width: 1086px; height: 1448px; background-image: url('assets/houses/bastion-humain.png'); background-size: 100% 100%; }
.mega-building.maison_plaine  { width: 301px; height: 498px; background-image: url('assets/houses/maison-humain.png'); background-size: 100% 100%; }
.mega-building.marche_plaine  { width: 416px; height: 367px; background-image: url('assets/houses/marche-humain.png'); background-size: 100% 100%; }
.mega-building.taverne_plaine { width: 400px; height: 316px; background-image: url('assets/houses/taverne-humain.png'); background-size: 100% 100%; }
.mega-building.tour_plaine    { width: 308px; height: 543px; background-image: url('assets/houses/tour-humain.png'); background-size: 100% 100%; }
.mega-building.camp_plaine { width: 470px; height: 372px; background-image: url('assets/houses/camp-humain.png'); background-size: 100% 100%; }
.mega-building.tannerie_plaine  { width: 324px; height: 276px; background-image: url('assets/houses/tannerie-humain.png'); background-size: 100% 100%; }
.mega-building.poissonnerie_plaine  { width: 399px; height: 327px; background-image: url('assets/houses/poissonnerie-humain.png'); background-size: 100% 100%; }
.mega-building.arcanium_plaine  { width: 385px; height: 317px; background-image: url('assets/houses/arcanium-humain.png'); background-size: 100% 100%; }
/*.mega-building.carriere_plaine  { width: 300px; height: 250px; background-image: url('assets/houses/carriere-humain.png'); background-size: 100% 100%; }
.mega-building.forge_plaine   { width: 399px; height: 337px; background-image: url('assets/houses/forge-humain.png'); background-size: 100% 100%; }
.mega-building.mine_plaine    { width: 432px; height: 295px; background-image: url('assets/houses/mine-humain.png'); background-size: 100% 100%; }*/

/* --- 🕵️ AUTRES / CONTREBANDE --- */
.mega-building.marche_autre1 { width: 325px; height: 319px; background-image: url('assets/houses/marche-autre1.png'); background-size: 100% 100%; }
.mega-building.marche_autre2 { width: 325px; height: 319px; background-image: url('assets/houses/marche-autre2.png'); background-size: 100% 100%; }
.mega-building.marche_autre3 { width: 325px; height: 319px; background-image: url('assets/houses/marche-autre3.png'); background-size: 100% 100%; }
.mega-building.marche_autre4 { width: 325px; height: 319px; background-image: url('assets/houses/marche-autre4.png'); background-size: 100% 100%; }

/* =======================================================
   🛣️ ROUTES (TOUS LES BIOMES)
   ======================================================= */
.hex.route_montagne_1 { background-image: url('assets/roads/route-montagne1.png'); background-size: cover; }
.hex.route_montagne_2 { background-image: url('assets/roads/route-montagne2.png'); background-size: cover; }
.hex.route_montagne_3 { background-image: url('assets/roads/route-montagne3.png'); background-size: cover; }
.hex.route_montagne_4 { background-image: url('assets/roads/route-montagne4.png'); background-size: cover; }

.hex.route_foret_1 { background-image: url('assets/roads/route-foret1.png'); background-size: cover; }
.hex.route_foret_2 { background-image: url('assets/roads/route-foret2.png'); background-size: cover; }
.hex.route_foret_3 { background-image: url('assets/roads/route-foret3.png'); background-size: cover; }
.hex.route_foret_4 { background-image: url('assets/roads/route-foret4.png'); background-size: cover; }

.hex.route_lac_1 { background-image: url('assets/roads/route-lac1.png'); background-size: cover; }
.hex.route_lac_2 { background-image: url('assets/roads/route-lac2.png'); background-size: cover; }
.hex.route_lac_3 { background-image: url('assets/roads/route-lac3.png'); background-size: cover; }
.hex.route_lac_4 { background-image: url('assets/roads/route-lac4.png'); background-size: cover; }

.hex.route_colline_1 { background-image: url('assets/roads/route-colline1.png'); background-size: cover; }
.hex.route_colline_2 { background-image: url('assets/roads/route-colline2.png'); background-size: cover; }
.hex.route_colline_3 { background-image: url('assets/roads/route-colline3.png'); background-size: cover; }
.hex.route_colline_4 { background-image: url('assets/roads/route-colline4.png'); background-size: cover; }

.hex.route_marais_1 { background-image: url('assets/roads/route-marais1.png'); background-size: cover; }
.hex.route_marais_2 { background-image: url('assets/roads/route-marais2.png'); background-size: cover; }
.hex.route_marais_3 { background-image: url('assets/roads/route-marais3.png'); background-size: cover; }
.hex.route_marais_4 { background-image: url('assets/roads/route-marais4.png'); background-size: cover; }

.hex.route_caverne_1 { background-image: url('assets/roads/route-caverne1.png'); background-size: cover; }
.hex.route_caverne_2 { background-image: url('assets/roads/route-caverne2.png'); background-size: cover; }
.hex.route_caverne_3 { background-image: url('assets/roads/route-caverne3.png'); background-size: cover; }
.hex.route_caverne_4 { background-image: url('assets/roads/route-caverne4.png'); background-size: cover; }

.hex.route_desert_1 { background-image: url('assets/roads/route-desert1.png'); background-size: cover; }
.hex.route_desert_2 { background-image: url('assets/roads/route-desert2.png'); background-size: cover; }
.hex.route_desert_3 { background-image: url('assets/roads/route-desert3.png'); background-size: cover; }
.hex.route_desert_4 { background-image: url('assets/roads/route-desert4.png'); background-size: cover; }

.hex.route_plaine_1 { background-image: url('assets/roads/route-plaine1.png'); background-size: cover; }
.hex.route_plaine_2 { background-image: url('assets/roads/route-plaine2.png'); background-size: cover; }
.hex.route_plaine_3 { background-image: url('assets/roads/route-plaine3.png'); background-size: cover; }
.hex.route_plaine_4 { background-image: url('assets/roads/route-plaine4.png'); background-size: cover; }

/* =======================================================
   🧱 MURS (OBJETS VERTICAUX 3D POUR TOUS LES BIOMES)
   ======================================================= */

/* Règle de base pour TOUS les murs : Ils se tiennent debout ! */
.mega-building[class*="mur_"] {
    width: 440px;  /* Ajuste la largeur globale ici si besoin */
    height: 660px; /* Ajuste la hauteur globale ici si besoin */
    background-size: contain; 
    background-position: bottom center; 
    background-repeat: no-repeat;
}


/* --- Murs Montagne --- */
.mega-building.mur_v_montagne { background-image: url('assets/walls/v-montagne.png'); }
.mega-building.mur_h_montagne { background-image: url('assets/walls/h-montagne.png'); }
.mega-building.mur_g_montagne { background-image: url('assets/walls/g-montagne.png'); }
.mega-building.mur_d_montagne { background-image: url('assets/walls/d-montagne.png'); }

/* --- Murs Forêt --- */
.mega-building.mur_v_foret { background-image: url('assets/walls/v-foret.png'); }
.mega-building.mur_h_foret { background-image: url('assets/walls/h-foret.png'); }
.mega-building.mur_g_foret { background-image: url('assets/walls/g-foret.png'); }
.mega-building.mur_d_foret { background-image: url('assets/walls/d-foret.png'); }

/* --- Murs Lac --- */
.mega-building.mur_v_lac { background-image: url('assets/walls/v-lac.png'); }
.mega-building.mur_h_lac { background-image: url('assets/walls/h-lac.png'); }
.mega-building.mur_g_lac { background-image: url('assets/walls/g-lac.png'); }
.mega-building.mur_d_lac { background-image: url('assets/walls/d-lac.png'); }

/* --- Murs Colline --- */
.mega-building.mur_v_colline { background-image: url('assets/walls/v-colline.png'); }
.mega-building.mur_h_colline { background-image: url('assets/walls/h-colline.png'); }
.mega-building.mur_g_colline { background-image: url('assets/walls/g-colline.png'); }
.mega-building.mur_d_colline { background-image: url('assets/walls/d-colline.png'); }

.mega-building.mur_v_colline {
    width: 140px;
    height: 550px;
    transform: translate(-50%, -90%);
}

.mega-building.mur_h_colline,
.mega-building.mur_g_colline,
.mega-building.mur_d_colline {
    width: 514px;
    height: 140px;
    transform: translate(-50%, -90%);
}

/* --- Murs Marais --- */
.mega-building.mur_v_marais { background-image: url('assets/walls/v-marais.png'); }
.mega-building.mur_h_marais { background-image: url('assets/walls/h-marais.png'); }
.mega-building.mur_g_marais { background-image: url('assets/walls/g-marais.png'); }
.mega-building.mur_d_marais { background-image: url('assets/walls/d-marais.png'); }

/* --- Murs Caverne --- */
.mega-building.mur_v_caverne { background-image: url('assets/walls/v-caverne.png'); }
.mega-building.mur_h_caverne { background-image: url('assets/walls/h-caverne.png'); }
.mega-building.mur_g_caverne { background-image: url('assets/walls/g-caverne.png'); }
.mega-building.mur_d_caverne { background-image: url('assets/walls/d-caverne.png'); }

/* --- Murs Désert --- */
.mega-building.mur_v_desert { background-image: url('assets/walls/v-desert.png'); }
.mega-building.mur_h_desert { background-image: url('assets/walls/h-desert.png'); }
.mega-building.mur_g_desert { background-image: url('assets/walls/g-desert.png'); }
.mega-building.mur_d_desert { background-image: url('assets/walls/d-desert.png'); }

/* Taille XL */
.mega-building.mur_v_desert {
    width: 130px;
    height: 450px;
    transform: translate(-50%, -90%);
}
.mega-building.mur_g_desert,
.mega-building.mur_d_desert {
    width: 800px;
    height: 800px;
    transform: translate(-50%, -90%);
}

/* --- Murs Plaine --- */
.mega-building.mur_v_plaine { background-image: url('assets/walls/v-plaine.png'); }
.mega-building.mur_h_plaine { background-image: url('assets/walls/h-plaine.png'); }
.mega-building.mur_g_plaine { background-image: url('assets/walls/g-plaine.png'); }
.mega-building.mur_d_plaine { background-image: url('assets/walls/d-plaine.png'); }

.mega-building.mur_g_plaine,
.mega-building.mur_d_plaine {
    width: 400px;
    height: 321px;
    transform: translate(-50%, -90%);
}

/* =======================================================
   🚪 ENTRÉES DE BÂTIMENTS (TAPIS JAUNES INTERACTIFS)
   ======================================================= */
/* Regroupe TOUTES les classes de bâtiments pour leur appliquer l'effet d'entrée */
.hex.bastion_montagne, .hex.forge_montagne, .hex.maison_montagne, .hex.marche_montagne, .hex.mine_montagne, .hex.taverne_montagne, .hex.tour_montagne, .hex.camp_montagne, .hex.tannerie_montagne, .hex.poissonnerie_montagne, .hex.arcanium_montagne, .hex.carriere_montagne,
.hex.bastion_foret, .hex.forge_foret, .hex.maison_foret, .hex.marche_foret, .hex.mine_foret, .hex.taverne_foret, .hex.tour_foret, .hex.camp_foret, .hex.tannerie_foret, .hex.poissonnerie_foret, .hex.arcanium_foret, .hex.carriere_foret,
.hex.bastion_lac, .hex.forge_lac, .hex.maison_lac, .hex.marche_lac, .hex.mine_lac, .hex.taverne_lac, .hex.tour_lac, .hex.camp_lac, .hex.tannerie_lac, .hex.poissonnerie_lac, .hex.arcanium_lac, .hex.carriere_lac,
.hex.bastion_colline, .hex.forge_colline, .hex.maison_colline, .hex.marche_colline, .hex.mine_colline, .hex.taverne_colline, .hex.tour_colline, .hex.camp_colline, .hex.tannerie_colline, .hex.poissonnerie_colline, .hex.arcanium_colline, .hex.carriere_colline,
.hex.bastion_marais, .hex.forge_marais, .hex.maison_marais, .hex.marche_marais, .hex.mine_marais, .hex.taverne_marais, .hex.tour_marais, .hex.camp_marais, .hex.tannerie_marais, .hex.poissonnerie_marais, .hex.arcanium_marais, .hex.carriere_marais,
.hex.bastion_caverne, .hex.forge_caverne, .hex.maison_caverne, .hex.marche_caverne, .hex.mine_caverne, .hex.taverne_caverne, .hex.tour_caverne, .hex.camp_caverne, .hex.tannerie_caverne, .hex.poissonnerie_caverne, .hex.arcanium_caverne, .hex.carriere_caverne,
.hex.bastion_desert, .hex.forge_desert, .hex.maison_desert, .hex.marche_desert, .hex.mine_desert, .hex.taverne_desert, .hex.tour_desert, .hex.camp_desert, .hex.tannerie_desert, .hex.poissonnerie_desert, .hex.arcanium_desert, .hex.carriere_desert,
.hex.bastion_plaine, .hex.forge_plaine, .hex.maison_plaine, .hex.marche_plaine, .hex.mine_plaine, .hex.taverne_plaine, .hex.tour_plaine, .hex.camp_plaine, .hex.tannerie_plaine, .hex.poissonnerie_plaine, .hex.arcanium_plaine, .hex.carriere_plaine {
    background-color: rgba(255, 215, 0, 0.5); 
    border: 2px solid gold;
    box-shadow: inset 0 0 15px gold;
    background-image: none;
    animation: pulse-entree 2s infinite alternate;
}

@keyframes pulse-entree {
    from { box-shadow: inset 0 0 5px gold; }
    to { box-shadow: inset 0 0 25px gold; }
}

/* ==========================================
   BROUILLARD DE BORD DE CARTE (Vignette)
   ========================================== */
#game-viewport {
    position: relative; /* Nécessaire pour placer le masque */
    overflow: hidden;   /* Empêche le jeu de déborder */
}

/* Le masque d'ombre qui se place au-dessus de tout */
#game-viewport::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Cercle transparent au centre, qui devient fond noir (#0a0a0a) sur les bords */
    background: radial-gradient(circle at center, transparent 40%, #0a0a0a 75%);
    
    /* TRÈS IMPORTANT : permet au joueur de cliquer à travers l'ombre ! */
    pointer-events: none; 
    
    /* S'affiche au-dessus des sols (z-index 0) et bâtiments (z-index 50) */
    z-index: 200; 
}

/* icone profile js */
.log-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

/* DECORS infranchissables pour la map mode architecht à rajouter dans SQL */
/* DECORS infranchissables pour la map mode architecte */

/* Taille S */
.mega-building.decor-montagne-s,
.mega-building.decor-montagne2-s {
    width: 375px;
    height: 308px;
    transform: translate(-50%, -80%);
}

/* Taille M */
.mega-building.decor-montagne-m,
.mega-building.decor-montagne2-m, 
.mega-building.decor-colline-m, 
.mega-building.decor-colline2-m {
    width: 597px;
    height: 474px;
    transform: translate(-50%, -85%);
}

/* Taille ML */
.mega-building.decor-colline-ml, 
.mega-building.decor-colline2-ml {
    width: 583px;
    height: 525px;
    transform: translate(-50%, -85%);
}

/* Taille L */
.mega-building.decor-montagne-l,
.mega-building.decor-colline-l,
.mega-building.decor-colline2-l,
.mega-building.decor-colline3-l
 {
    width: 1254px;
    height: 997px;
    transform: translate(-50%, -90%);
}

.mega-building.decor-arbre-aigle,
.mega-building.decor-arbre-corbeau
 {
    width: 1406px;
    height: 1119px;
    transform: translate(-50%, -90%);
}

.mega-building.decor-humain-ferme
 {
    width: 1254px;
    height: 1254px;
    transform: translate(-50%, -90%);
}

/* Taille XL */
.mega-building.decor-montagne2-l {
    width: 1881px;
    height: 1496px;
    transform: translate(-50%, -90%);
}

/* ponts */
.mega-building.decor-pont-humain,
.mega-building.decor-pont-nain,
.mega-building.decor-pont-orc,
.mega-building.decor-pont-troll {
    width: 1774px;
    height: 887px;
    transform: translate(-50%, -90%);
}

/* Images individuelles */
.mega-building.decor-montagne-s {    background-image: url("assets/decors/montagne-S.png");}
.mega-building.decor-montagne-m {    background-image: url("assets/decors/montagne-M.png");}
.mega-building.decor-montagne-l {    background-image: url("assets/decors/montagne-L.png");}
.mega-building.decor-montagne2-s {    background-image: url("assets/decors/montagne2-S.png");}
.mega-building.decor-montagne2-m {    background-image: url("assets/decors/montagne2-M.png");}
.mega-building.decor-montagne2-l {    background-image: url("assets/decors/montagne2-L.png");}
.mega-building.decor-colline-m {    background-image: url("assets/decors/colline-M.png");}
.mega-building.decor-colline2-m {    background-image: url("assets/decors/colline2-M.png");}
.mega-building.decor-colline-ml {    background-image: url("assets/decors/colline-ML.png");}
.mega-building.decor-colline2-ml {    background-image: url("assets/decors/colline2-ML.png");}
.mega-building.decor-colline-l {    background-image: url("assets/decors/colline-L.png");}
.mega-building.decor-colline2-l {    background-image: url("assets/decors/colline2-L.png");}
.mega-building.decor-colline3-l {    background-image: url("assets/decors/colline3-L.png");}

.mega-building.decor-pont-humain {    background-image: url("assets/decors/pont-humain.png");}
.mega-building.decor-pont-nain {    background-image: url("assets/decors/pont-nain.png");}
.mega-building.decor-pont-orc {    background-image: url("assets/decors/pont-orc.png");}
.mega-building.decor-pont-troll {    background-image: url("assets/decors/pont-troll.png");}
.mega-building.decor-arbre-aigle {    background-image: url("assets/decors/arbre-aigle.png");}
.mega-building.decor-arbre-corbeau {    background-image: url("assets/decors/arbre-corbeau.png");}

.mega-building.decor-humain-ferme {    background-image: url("assets/decors/humain-ferme.png");}

/* =======================================================
   INVENTAIRE GÉNÉRAL
   ======================================================= */

.inventory-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.inventory-main-panel {
    background: rgba(0,0,0,0.72);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px 16px;
    box-sizing: border-box;
}

.inventory-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ddd;
    padding: 0 6px 10px 6px;
    border-bottom: 1px solid #222;
    margin-bottom: 10px;
    font-size: 1.05em;
}

.inventory-grid-main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 58px;
    gap: 7px;
    background: rgba(0,0,0,0.45);
    padding: 8px;
    border: 1px solid #111;
    max-height: 405px;
    overflow: hidden;
}

.inventory-slot {
    position: relative;
    background: rgba(15,15,15,0.95);
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.inventory-slot.empty {
    opacity: 0.55;
}

.inventory-slot:hover {
    border-color: gold;
    filter: brightness(1.15);
}

.inventory-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-slot-qty {
    position: absolute;
    right: 3px;
    bottom: 2px;
    min-width: 24px;
    max-width: 42px;
    text-align: right;
    background: rgba(0,0,0,0.9);
    color: #2ecc71;
    font-size: 0.72em;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #2ecc71;
    overflow: hidden;
    white-space: nowrap;
}

.inventory-slot-qty.gold-qty {
    color: gold;
    border-color: gold;
    font-size: 0.68em;
    max-width: 46px;
}

.inventory-bottom-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    min-height: 270px;
}

.inventory-details-box,
.inventory-action-box {
    background: rgba(24,24,24,0.9);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
}

.inventory-details-box h3,
.inventory-action-box h3 {
    margin: 0 0 10px 0;
    color: gold;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    font-size: 0.9em;
}

.inventory-detail-panel {
    color: #aaa;
    min-height: 190px;
}

.inventory-action-panel {
    background: #050505;
    border: 1px solid #111;
    min-height: 155px;
    padding: 8px;
    box-sizing: border-box;
}

.inventory-detail-card {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--inventory-rarity);
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inventory-rarity) 10%, transparent), rgba(0,0,0,0.4));
    box-shadow: 0 0 12px color-mix(in srgb, var(--inventory-rarity) 45%, transparent);
}

.inventory-detail-text {
    text-align: left;
}

.inventory-detail-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-character-select-zone {
    width: 332.36px;
    height: 32.8px;
    display: flex;
    align-items: center;
}

.inventory-character-select {
    width: 332.36px;
    height: 32.8px;
    background: #111;
    color: gold;
    border: 1px solid gold;
    padding: 5px 8px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

/* =======================================================
   Résultats des 3 boutons actions de l'inventaire
   ======================================================= */

   .inventory-small-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px 0;
}

.inventory-small-choice {
    background: #111;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 10px;
    font-weight: bold;
    cursor: pointer;
    min-width: 54px;
}

.inventory-small-choice:hover {
    border-color: gold;
    color: gold;
}

.inventory-small-choice.selected {
    border-color: gold;
    color: gold;
    background: rgba(255, 215, 0, 0.08);
}

.inventory-small-choice.selected.red {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.16);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.55);
}

.inventory-small-choice.selected.gray {
    border-color: #95a5a6;
    color: #ffffff;
    background: rgba(149, 165, 166, 0.22);
    box-shadow: 0 0 8px rgba(149, 165, 166, 0.55);
}

.inventory-small-choice:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* =======================================================
   COMMERCE
   ======================================================= */

.trade-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.trade-main-panel {
    background: rgba(0,0,0,0.72);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px 16px;
    box-sizing: border-box;
}

.trade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.trade-tab {
    background: #111;
    color: gold;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

.trade-tab:hover {
    border-color: gold;
    filter: brightness(1.15);
}

.trade-tab.selected {
    border-color: gold;
    background: rgba(255, 215, 0, 0.08);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.trade-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ddd;
    padding: 0 6px 10px 6px;
    border-bottom: 1px solid #222;
    margin-bottom: 10px;
    font-size: 1em;
    min-height: 38px;
}

.trade-exit-inline {
    width: auto !important;
    min-width: 170px;
    margin-top: 0 !important;
    padding: 8px 16px !important;
    background: #2c3e50;
}

.trade-detail-image-adjusted {
    transform: translateY(-25px);
}

/* =======================================================
   TUTORIEL / RP VISUEL
   ======================================================= */

.tutorial-main {
    height: calc(100vh - 82px);
    max-height: calc(100vh - 82px);
    overflow: hidden;
}

.tutorial-tabs-row {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0 auto 14px auto;
}

.tutorial-tabs-row .btn-rank-filter {
    padding: 8px 6px;
    font-size: 1em;
    text-align: center;
    white-space: nowrap;
}

.tutorial-faction-card {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;

    max-height: none;
    overflow: visible;
}

.tutorial-faction-head {
    display: grid;
    grid-template-columns: 367px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}

.tutorial-faction-img {
    width: 367px;
    height: 212px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    border: 2px solid #444;
    background: #050505;
    box-shadow: 0 0 14px rgba(0,0,0,0.75);
    display: block;
}

.tutorial-faction-title {
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-size: 1.28em;
    letter-spacing: 0.6px;
    line-height: 1.15;
}

.tutorial-faction-subtitle {
    color: #f0f0f0;
    font-weight: bold;
    font-size: 1.08em;
    margin-bottom: 8px;
    line-height: 1.25;
}

.tutorial-faction-intro {
    color: #cfcfcf;
    font-style: italic;
    line-height: 1.5;
    font-size: 1em;
    margin: 0;
}

.tutorial-faction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tutorial-race-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 7px;
    padding: 12px;
    min-height: 250px;
    box-sizing: border-box;
}

.tutorial-race-box h4 {
    margin: 0 0 8px 0;
    color: gold;
    font-size: 1.12em;
    text-transform: uppercase;
    line-height: 1.15;
}

.tutorial-race-mode {
    color: #2ecc71;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 8px;
}

.tutorial-race-box p {
    color: #d0d0d0;
    font-size: 1em;
    line-height: 1.45;
    margin: 0 0 8px 0;
}

.tutorial-race-box ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
    color: #c8c8c8;
    font-size: 1em;
    line-height: 1.45;
}

.tutorial-race-box li {
    margin-bottom: 6px;
}

.tutorial-keyword {
    color: #2ecc71;
    font-weight: bold;
}

.tutorial-warning {
    color: #e67e22;
    font-weight: bold;
}

.tutorial-premium-note {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(155,89,182,0.55);
    border-radius: 6px;
    background: rgba(155,89,182,0.08);
    color: #bbb;
    font-size: 1em;
    line-height: 1.3;
}

.tutorial-classes {
    color: #f1c40f;
    font-weight: bold;
}

/* =======================================================
   WIKI / LEXIQUE — VERSION PROPRE
   ======================================================= */

.wiki-tabs-row {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 0 auto 14px auto;
}

.wiki-tabs-row .btn-rank-filter {
    padding: 8px 5px;
    font-size: 0.82em;
    text-align: center;
    white-space: nowrap;
}

/* Bloc principal de chaque onglet */
.wiki-content-box {
    width: 96%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;

    /* IMPORTANT : ne coupe plus le contenu */
    max-height: none;
    overflow: visible;
}

/* Introduction principale */
.wiki-hero-box {
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    color: #ccc;
    font-size: 0.86em;
    line-height: 1.35;
}

/* Titres internes : LES 4 CARACTÉRISTIQUES, INVESTIR, ETC. */
.wiki-section-title {
    margin: 10px 0 7px 0;
    padding: 4px 8px;
    text-align: center;
    color: gold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: rgba(255,215,0,0.06);
}

/* Grilles de cartes */
.wiki-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wiki-card-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

/* Cartes de règles */
.wiki-rule-card {
    background: rgba(0,0,0,0.44);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px;
    color: #ccc;
    font-size: 0.78em;
    line-height: 1.28;
}

.wiki-rule-card h4 {
    margin: 0 0 5px 0;
    color: gold;
    font-size: 1em;
    text-transform: uppercase;
}

/* Couleurs de bordure */
.wiki-blue { border-left: 4px solid #3498db; }
.wiki-red { border-left: 4px solid #e74c3c; }
.wiki-green { border-left: 4px solid #2ecc71; }
.wiki-purple { border-left: 4px solid #9b59b6; }
.wiki-orange { border-left: 4px solid #e67e22; }

/* Mots importants */
.wiki-keyword { color: gold; font-weight: bold; }
.wiki-def { color: #3498db; font-weight: bold; }
.wiki-off { color: #e74c3c; font-weight: bold; }
.wiki-good { color: #2ecc71; font-weight: bold; }
.wiki-warning { color: #e67e22; font-weight: bold; }

/* Tableaux */
.wiki-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76em;
    margin-top: 7px;
}

.wiki-mini-table th {
    color: gold;
    background: #111;
    border: 1px solid #333;
    padding: 4px;
}

.wiki-mini-table td {
    border: 1px solid #333;
    padding: 4px;
    color: #ccc;
    text-align: center;
}

/* Notes en bas de section */
.wiki-note {
    margin-top: 7px;
    padding: 7px;
    border-radius: 5px;
    background: rgba(255,215,0,0.07);
    border: 1px solid rgba(255,215,0,0.25);
    color: #bbb;
    font-size: 0.76em;
    line-height: 1.28;
}

/* =======================================================
   ARMURERIE
   ======================================================= */

.armory-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.armory-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.armory-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.armory-slot-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin: 0 auto 12px auto;
}

.armory-slot-btn {
    height: 46px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.68em;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 5px;
    box-sizing: border-box;
    transition: 0.2s;
    line-height: 1.05;
    text-align: center;
}

.armory-slot-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.armory-slot-btn:hover {
    color: gold;
    border-color: gold;
    filter: brightness(1.15);
}

.armory-slot-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.armory-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.armory-header-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.armory-header-title {
    color: gold;
    text-transform: uppercase;
    font-size: 1.05em;
    font-weight: bold;
    margin-bottom: 4px;
}

.armory-header-desc {
    color: #ccc;
    line-height: 1.35;
    font-size: 0.82em;
    white-space: pre-line;
}

.armory-table-wrap {
    border: 1px solid #222;
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    overflow: hidden;
}

.armory-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.72em;
}

.armory-table th {
    color: gold;
    background: #111;
    border: 1px solid #333;
    padding: 5px 4px;
    text-transform: uppercase;
    font-size: 0.86em;
}

.armory-table td {
    border: 1px solid #222;
    padding: 3px;
    color: #ccc;
    vertical-align: middle;
    height: 64px;
}

.armory-family-cell {
    width: 118px;
}

.armory-family-name {
    color: #f1c40f;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95em;
    line-height: 1.15;
}

.armory-rank-cell {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 3px;
    align-items: center;
    min-height: 54px;
    border-radius: 5px;
    background: rgba(0,0,0,0.35);
    padding: 4px 3px;
    box-sizing: border-box;
    border: 1px solid var(--rank-color);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--rank-color) 30%, transparent);
}

.armory-rank-cell img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.armory-rank-name {
    font-weight: bold;
    color: var(--rank-color);
    line-height: 1.1;
    margin-bottom: 3px;
}

.armory-bonus-line {
    color: #d7d7d7;
    line-height: 1.08;
    font-size: 0.88em;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.armory-bonus-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    column-gap: 2px;
    line-height: 1.08;
}

.armory-bonus-row.empty {
    display: block;
    color: #777;
    font-style: italic;
}

.armory-bonus-sign {
    color: #2ecc71;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.armory-bonus-label {
    color: #d7d7d7;
    text-align: left;
}

.armory-empty-cell {
    color: #555;
    text-align: center;
    font-style: italic;
}

.armory-empty-panel {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.armory-section-spacer {
    margin-top: 12px;
}

.armory-set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.armory-set-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    align-items: center;
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-left: 4px solid #9b59b6;
    border-radius: 6px;
    padding: 8px;
    box-sizing: border-box;
}

.armory-set-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.86em;
    margin-bottom: 2px;
}

.armory-set-power {
    color: #9b59b6;
    font-weight: bold;
    font-size: 0.82em;
    margin-bottom: 2px;
}

.armory-set-desc {
    color: #aaa;
    font-size: 0.76em;
    line-height: 1.22;
}

/* =======================================================
   LIVRE DES CLASSES
   ======================================================= */

.class-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.class-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.class-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.class-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0 auto 10px auto;
}

.class-tab-btn {
    height: 42px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.class-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.class-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.class-path-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto 12px auto;
}

.class-path-btn {
    min-height: 46px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.86em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.class-path-btn span {
    color: #777;
    font-size: 0.78em;
    font-weight: normal;
}

.class-path-btn:hover {
    color: gold;
    border-color: gold;
}

.class-path-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.class-path-btn.active span {
    color: #222;
}

.class-book-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.class-empty-panel {
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-style: italic;
}

.class-book-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 10px;
}

.class-book-header h3 {
    color: gold;
    margin: 0 0 3px 0;
    text-transform: uppercase;
    font-size: 1.05em;
}

.class-book-header p {
    margin: 0;
    color: #ccc;
    font-size: 0.84em;
}

.class-book-ranks {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 6px;
    font-size: 0.72em;
}

.class-book-ranks span {
    border: 1px solid #333;
    background: #090909;
    border-radius: 4px;
    padding: 3px 6px;
    color: gold;
    font-weight: bold;
}

.class-skill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.class-skill-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    background: #151515;
    border: 1px solid #333;
    border-left: 4px solid var(--skill-color);
    border-radius: 6px;
    padding: 11px;
    box-sizing: border-box;
}

.class-skill-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--skill-color) 50%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.class-skill-body {
    min-width: 0;
}

.class-skill-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 7px;
}

.class-skill-head h3 {
    margin: 0;
    font-size: 1.08em;
    text-transform: uppercase;
}

.class-skill-path {
    color: #888;
    font-size: 0.78em;
    font-style: italic;
    margin-top: 2px;
}

.class-skill-meta {
    text-align: right;
    color: #888;
    font-size: 0.78em;
    min-width: 190px;
    line-height: 1.25;
}

.class-skill-meta span {
    display: block;
    font-style: italic;
    margin-top: 3px;
}

.class-skill-meta strong {
    color: gold;
}

.class-skill-desc {
    color: #aaa;
    font-style: italic;
    font-size: 0.88em;
    line-height: 1.35;
    margin-bottom: 7px;
}

.class-scale-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 7px;
}

.class-scale-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.76em;
    margin-bottom: 5px;
}

.class-scale-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 0.78em;
    margin-bottom: 4px;
}

.class-scale-row span {
    color: #ccc;
}

.class-scale-row code {
    color: #2ecc71;
    background: #050505;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 3px 6px;
    font-family: monospace;
}

.class-rank-helper {
    color: #777;
    font-size: 0.72em;
    margin-top: 4px;
    font-style: italic;
}

.class-skill-title-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.class-skill-action-type {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
    font-weight: normal;
    white-space: nowrap;
}

/* =======================================================
   LIVRE DES MÉTIERS
   ======================================================= */

.job-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.job-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.job-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.job-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    margin: 0 auto 12px auto;
}

.job-tab-btn {
    height: 48px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.72em;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    transition: 0.2s;
    line-height: 1.15;
    text-align: center;
    white-space: pre-line;
}

.job-tab-btn:hover {
    color: gold;
    border-color: gold;
    filter: brightness(1.15);
}

.job-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.job-book-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.job-empty-panel {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.job-kind-banner {
    color: var(--job-kind-color);
    border: 1px solid #333;
    border-left: 4px solid var(--job-kind-color);
    background: rgba(0,0,0,0.42);
    border-radius: 6px;
    padding: 7px 10px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.88em;
    font-weight: bold;
    letter-spacing: 0.8px;
}

.job-header-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid var(--job-color);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.job-header-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.job-header-title {
    text-transform: uppercase;
    font-size: 1.08em;
    font-weight: bold;
    margin-bottom: 4px;
}

.job-header-desc {
    color: #ccc;
    line-height: 1.35;
    font-size: 0.86em;
    white-space: pre-line;
}

.job-section-title {
    margin: 10px 0 8px 0;
    padding: 5px 8px;
    text-align: center;
    color: gold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: rgba(255,215,0,0.06);
}

.job-sub-tabs {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.job-sub-btn {
    height: 38px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.job-sub-btn:hover {
    color: gold;
    border-color: gold;
}

.job-sub-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.job-resource-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.job-resource-row {
    min-height: 62px;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    box-sizing: border-box;
}

.job-resource-icon {
    width: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-resource-name {
    color: gold;
    font-weight: bold;
    font-size: 0.98em;
    margin-bottom: 2px;
}

.job-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #2ecc71;
    font-size: 0.82em;
    line-height: 1.25;
}

.job-resource-transform {
    color: #888;
    font-size: 0.78em;
    line-height: 1.25;
    margin-top: 2px;
}

.job-resource-transform.muted {
    color: #666;
    font-style: italic;
}

.job-craft-table-wrap {
    border: 1px solid #222;
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    overflow: hidden;
}

.job-craft-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.72em;
}

.job-craft-table th {
    color: gold;
    background: #111;
    border: 1px solid #333;
    padding: 5px 4px;
    text-transform: uppercase;
    font-size: 0.86em;
}

.job-craft-table td {
    border: 1px solid #222;
    padding: 3px;
    color: #ccc;
    vertical-align: middle;
    height: 66px;
}

.job-craft-family-cell {
    width: 118px;
}

.job-craft-family-name {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95em;
    line-height: 1.15;
}

.job-craft-slot {
    color: #888;
    font-size: 0.82em;
    margin-top: 3px;
}

.job-craft-rank-cell {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 5px;
    align-items: center;
    min-height: 56px;
    border-radius: 5px;
    background: rgba(0,0,0,0.35);
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid var(--rank-color);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--rank-color) 30%, transparent);
}

.job-craft-rank-cell img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.job-craft-rank-name {
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 2px;
}

.job-craft-item-name {
    color: #d7d7d7;
    line-height: 1.15;
    font-size: 0.9em;
}

/* =======================================================
   BESTIAIRE
   ======================================================= */

.bestiary-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.bestiary-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bestiary-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.bestiary-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin: 0 auto 10px auto;
}

.bestiary-tab-btn {
    height: 42px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.72em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: center;
}

.bestiary-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.bestiary-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.bestiary-view-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto 12px auto;
}

.bestiary-view-btn {
    min-height: 44px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.88em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.bestiary-view-btn:hover {
    color: gold;
    border-color: gold;
}

.bestiary-view-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.bestiary-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.bestiary-empty-panel {
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.bestiary-empty-panel.small {
    min-height: 260px;
    background: rgba(0,0,0,0.35);
    border: 1px dashed #333;
    border-radius: 6px;
}

.bestiary-header-card {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 14px;
    align-items: start;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid var(--bestiary-color);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.bestiary-header-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 120px;
    padding-top: 2px;
    box-sizing: border-box;
}

.bestiary-header-image {
    width: 120px;
    height: 120px;
    background: linear-gradient(180deg, #f1e7c6 0%, #d4bd79 100%);
    border-radius: 8px;
    border: 1px solid #5a4a1d;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.25);
}

.bestiary-header-image img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
}

.bestiary-header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 8px;
    min-height: 30px;
}

.bestiary-header-title {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
}

.bestiary-header-desc {
    color: #ccc;
    line-height: 1.35;
    font-size: 0.9em;
    white-space: pre-line;
}

.bestiary-subscription-badge {
    display: inline-block;
    color: gold;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.45);
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 0.82em;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.1;
    margin: 0;
    flex-shrink: 0;
}

.bestiary-section-title {
    margin: 10px 0 8px 0;
    padding: 5px 8px;
    text-align: center;
    color: gold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: rgba(255,215,0,0.06);
}

.bestiary-skill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bestiary-skill-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    background: #151515;
    border: 1px solid #333;
    border-left: 4px solid var(--skill-color);
    border-radius: 6px;
    padding: 11px;
    box-sizing: border-box;
}

.bestiary-skill-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--skill-color) 50%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bestiary-skill-body {
    min-width: 0;
}

.bestiary-skill-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 7px;
    min-height: 0;
}

.bestiary-skill-title-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bestiary-skill-title-line h3 {
    margin: 0;
    font-size: 1.08em;
    text-transform: uppercase;
}

.bestiary-skill-action-type {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
    font-weight: normal;
    white-space: nowrap;
}

.bestiary-skill-meta {
    text-align: right;
    color: #888;
    font-size: 0.78em;
    min-width: 190px;
    line-height: 1.25;
}

.bestiary-skill-meta span {
    display: block;
    font-style: italic;
    margin-top: 1px;
}

.bestiary-skill-meta strong {
    color: gold;
}

.bestiary-skill-desc {
    color: #aaa;
    font-style: italic;
    font-size: 0.88em;
    line-height: 1.35;
    margin-bottom: 7px;
    white-space: pre-line;
}

.bestiary-scale-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 7px;
}

.bestiary-scale-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.76em;
    margin-bottom: 5px;
}

.bestiary-scale-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 0.78em;
    margin-bottom: 4px;
}

.bestiary-scale-row span {
    color: #ccc;
}

.bestiary-scale-row code {
    color: #2ecc71;
    background: #050505;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 3px 6px;
    font-family: monospace;
}

.bestiary-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.bestiary-stat-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px;
}

.bestiary-stat-box h4 {
    color: gold;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.bestiary-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9em;
}

.bestiary-stat-row span {
    color: #aaa;
}

.bestiary-stat-row strong {
    color: #2ecc71;
}

.bestiary-combat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.bestiary-combat-row-single {
    grid-template-columns: 1fr;
}

.bestiary-combat-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #aaa;
    font-size: 0.9em;
}

.bestiary-combat-cell strong {
    color: #2ecc71;
    font-weight: bold;
}

.bestiary-book-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid var(--bestiary-color);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 10px;
}

.bestiary-book-header h3 {
    color: gold;
    margin: 0 0 3px 0;
    text-transform: uppercase;
    font-size: 1.05em;
}

.bestiary-book-header p {
    margin: 0;
    color: #ccc;
    font-size: 0.84em;
}

.bestiary-book-ranks {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 6px;
    font-size: 0.72em;
}

.bestiary-book-ranks span {
    border: 1px solid #333;
    background: #090909;
    border-radius: 4px;
    padding: 3px 6px;
    color: gold;
    font-weight: bold;
}

/* =======================================================
   LIVRE DES RACES
   ======================================================= */

.race-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.race-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.race-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.race-group-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0 auto 10px auto;
}

.race-group-btn {
    height: 42px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.race-group-btn:hover {
    color: gold;
    border-color: gold;
}

.race-group-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.race-variant-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 auto 12px auto;
}

.race-variant-btn {
    min-height: 44px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.84em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: center;
}

.race-variant-btn:hover {
    color: gold;
    border-color: gold;
}

.race-variant-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.race-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.race-empty-panel {
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.race-region-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid var(--race-color);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.race-region-image {
    width: 237px;
    height: 156px;
    background: linear-gradient(180deg, #f1e7c6 0%, #d4bd79 100%);
    border-radius: 8px;
    border: 1px solid #5a4a1d;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.race-region-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.race-region-content {
    min-width: 0;
}

.race-region-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.race-region-title {
    text-transform: uppercase;
    font-size: 1.18em;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
}

.race-region-subtitle {
    color: #bbb;
    font-size: 0.82em;
    font-style: italic;
    margin-top: 2px;
}

.race-region-desc {
    color: #ccc;
    line-height: 1.32;
    font-size: 0.86em;
    margin-top: 0;
}

.race-availability-badge {
    display: inline-block;
    color: gold;
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.45);
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 0.78em;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.1;
    flex-shrink: 0;
}

.race-skill-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: center;
    background: #151515;
    border: 1px solid #333;
    border-left: 4px solid var(--skill-color);
    border-radius: 6px;
    padding: 11px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.race-skill-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--skill-color) 50%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.race-skill-body {
    min-width: 0;
}

.race-skill-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid #222;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.race-skill-title-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.race-skill-title-line h3 {
    margin: 0;
    font-size: 1.08em;
    text-transform: uppercase;
}

.race-skill-action-type {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
    font-weight: normal;
    white-space: nowrap;
}

.race-skill-meta {
    text-align: right;
    color: #888;
    font-size: 0.78em;
    min-width: 170px;
    line-height: 1.15;
}

.race-skill-meta span {
    display: block;
    font-style: italic;
    margin-top: 1px;
}

.race-skill-meta strong {
    color: gold;
}

.race-skill-desc {
    color: #aaa;
    font-style: italic;
    font-size: 0.88em;
    line-height: 1.35;
    margin-bottom: 7px;
    white-space: pre-line;
}

.race-scale-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 7px;
}

.race-scale-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.76em;
    margin-bottom: 5px;
}

.race-scale-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 0.78em;
    margin-bottom: 4px;
}

.race-scale-row span {
    color: #ccc;
}

.race-scale-row code {
    color: #2ecc71;
    background: #050505;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 3px 6px;
    font-family: monospace;
}

.race-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.race-stat-box {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px;
}

.race-stat-box h4 {
    color: gold;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.race-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9em;
}

.race-stat-row span {
    color: #aaa;
}

.race-stat-row strong {
    color: #2ecc71;
}

.race-combat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.race-combat-row-single {
    grid-template-columns: 1fr;
}

.race-combat-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #aaa;
    font-size: 0.9em;
}

.race-combat-cell strong {
    color: #2ecc71;
    font-weight: bold;
}

/* =======================================================
   CHRONIQUES DU MONDE / EVENTS
   ======================================================= */

.events-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.events-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.events-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.events-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 0 auto 12px auto;
}

.events-tab-btn {
    height: 42px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.events-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.events-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.events-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 650px;
    max-height: 650px;
    overflow: hidden;
    padding-right: 0;
}

.events-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid #333;
    margin-top: 10px;
    flex-shrink: 0;
}

.events-pagination .btn-rank-filter {
    width: 100px;
    padding: 5px;
}

.events-pages {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 1.1em;
    font-family: monospace;
}

.event-page-number {
    color: #888;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.event-page-number:hover {
    color: white;
}

.event-page-number.active {
    color: gold;
    font-weight: bold;
    border-bottom: 2px solid gold;
    cursor: default;
}

.events-empty {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.event-feed-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    background: #151515;
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 8px 10px;
    box-sizing: border-box;
    min-height: 58px;
}

.event-feed-card.death {
    border-left-color: #e74c3c;
}

.event-feed-card.event {
    border-left-color: #2ecc71;
}

.event-feed-card.boss {
    border-left-color: #e67e22;
}

.event-feed-card.rank {
    border-left-color: #3498db;
}

.event-feed-card.master {
    border-left-color: #9b59b6;
}

.event-feed-card.profession {
    border-left-color: #f1c40f;
}

.event-feed-card.craft {
    border-left-color: #9b59b6;
}

.event-feed-card.blood {
    border-left-color: #c0392b;
}

.event-feed-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    box-shadow: inset 0 0 10px rgba(255,215,0,0.25);
}

.event-feed-content {
    min-width: 0;
}

.event-feed-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #222;
    padding-bottom: 4px;
    margin-bottom: 5px;
}

.event-feed-top strong {
    color: gold;
    text-transform: uppercase;
    font-size: 0.85em;
}

.event-feed-top span {
    color: #888;
    font-size: 0.78em;
    white-space: nowrap;
}

.event-feed-message {
    color: #ccc;
    font-size: 0.86em;
    line-height: 1.22;
}

.sidebar-log-journal-link {
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #333;
    color: gold;
    font-size: 0.78em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.sidebar-log-journal-link:hover {
    color: white;
    text-decoration: underline;
}

/* =======================================================
   PROFIL PERSONNAGE — HEADER + DÉTAILS
   ======================================================= */

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 35px;
    align-items: center;
    width: 100%;
}

.profile-identity-zone {
    min-width: 0;
}

#char-name {
    margin: 0;
    color: gold;
    font-size: 1.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#char-details {
    margin: 5px 0;
    color: #aaa;
    font-style: italic;
}

#char-faction {
    margin: 5px 0;
    font-weight: bold;
    text-transform: uppercase;
}

.profile-action-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.profile-action-btn {
    width: 100%;
    padding: 10px;
    background: #111;
    color: gold;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.82em;
    transition: 0.2s;
}

.profile-action-btn:hover {
    border-color: gold;
    color: white;
    background: rgba(255,215,0,0.08);
}

.profile-action-btn.secondary {
    color: #ccc;
}

.profile-action-btn.secondary:hover {
    color: gold;
}

/* Bloc principal du profil */
.profile-main-panel {
    width: 96%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 610px;
    min-height: 610px;
}

.profile-content-view {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.profile-panel-title {
    padding: 10px;
    margin: 0;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #333;
    color: gold;
    text-transform: uppercase;
    text-align: center;
    font-size: 13px;
}

.profile-log-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: block;
}

.profile-log-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px;
    background: rgba(0,0,0,0.4);
    border-top: 1px solid #333;
    margin-top: auto;
    flex-shrink: 0;
}

/* Vue détails */
.profile-details-content {
    flex: 1;
    min-height: 0;
    padding: 22px;
    box-sizing: border-box;
    overflow: hidden;
}

.profile-public-message {
    min-height: 90px;
    max-height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #ddd;
    font-size: 1.05em;
    line-height: 1.45;
    font-style: italic;

    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 18px;
    box-sizing: border-box;
    margin-bottom: 22px;
}

.profile-details-palmares-title {
    color: gold;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-size: 1.15em;
    margin-bottom: 16px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 8px;
    background: rgba(255,215,0,0.06);
}

.profile-details-medals {
    display: grid;
    grid-template-columns: repeat(5, 136px);
    grid-auto-rows: 136px;
    justify-content: center;
    gap: 12px;
    min-height: 284px;
}

.profile-detail-medal-img {
    width: 136px;
    height: 136px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.45));
}

.profile-no-detail-medal {
    grid-column: 1 / -1;
    color: #777;
    font-style: italic;
    text-align: center;
    padding: 30px 0;
}

.profile-medal-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px 0 8px;
    margin-top: 12px;
    border-top: 1px solid #333;
}

.profile-medal-pagination .btn-rank-filter {
    width: 100px;
    padding: 5px;
}

.profile-medal-pages {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 1.1em;
    font-family: monospace;
}

.profile-medal-page-number {
    color: #888;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.profile-medal-page-number:hover {
    color: white;
}

.profile-medal-page-number.active {
    color: gold;
    font-weight: bold;
    border-bottom: 2px solid gold;
    cursor: default;
}

/* =======================================================
   MESSAGERIE
   ======================================================= */

.messages-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.messages-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.messages-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.messages-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 auto 12px auto;
}

.messages-tab-btn {
    height: 44px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.86em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
}

.messages-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.messages-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.messages-panel {
    width: 96%;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
    min-height: 710px;
}

.messages-empty {
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

/* Composition */
.message-compose-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 680px;
    overflow: hidden;
}

.message-sender-line {
    color: #aaa;
    font-size: 0.86em;
    text-align: center;
    font-style: italic;
}

.message-sender-line strong {
    color: gold;
    font-style: normal;
}

.message-compose-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: center;
}

.message-compose-row label {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
    text-align: right;
}

.message-compose-row input {
    background: #050505;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 9px 10px;
    font-size: 0.95em;
    box-sizing: border-box;
}

.message-compose-row input::placeholder {
    color: #666;
    font-style: italic;
}

.message-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 7px;
}

.message-toolbar button,
.message-toolbar input[type="color"] {
    min-height: 30px;
    background: #111;
    color: gold;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
}

.message-toolbar button {
    padding: 5px 8px;
}

.message-toolbar button:hover {
    border-color: gold;
    color: white;
}

.message-toolbar input[type="color"] {
    width: 42px;
    padding: 2px;
}

.message-body-editor {
    flex: 1;
    min-height: 0;
    background: #050505;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1.45;
    text-align: left;
}

.message-body-editor:empty::before {
    content: attr(data-placeholder);
    color: #666;
    font-style: italic;
}

.message-send-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.message-send-btn {
    width: 160px !important;
    margin-top: 0 !important;
}

.message-send-status {
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

.message-send-status.success {
    color: #2ecc71;
    font-weight: bold;
}

.message-send-status.error {
    color: #e74c3c;
    font-weight: bold;
}

/* Table messages */
.messages-table-wrap {
    height: 625px;
    max-height: 625px;
    overflow: hidden;
    border: 1px solid #222;
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
}

.messages-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.84em;
}

.messages-table th {
    color: gold;
    background: #111;
    border-bottom: 1px solid #333;
    padding: 9px;
    text-transform: uppercase;
}

.messages-table th:nth-child(1) {
    width: 150px;
}

.messages-table th:nth-child(3) {
    width: 115px;
}

.messages-table td {
    border-bottom: 1px solid #222;
    color: #ccc;
    padding: 8px;
    vertical-align: top;
}

.message-character-cell a {
    color: gold;
    text-decoration: none;
    font-weight: bold;
}

.message-character-cell a:hover {
    text-decoration: underline;
}

.message-content-cell {
    cursor: pointer;
}

.message-content-cell strong {
    color: #ddd;
    display: block;
    margin-bottom: 3px;
}

.message-content-cell span {
    color: #888;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-date-cell {
    text-align: right;
    color: #888 !important;
    font-family: monospace;
    font-size: 0.86em;
}

.message-unread .message-content-cell strong {
    color: gold;
}

.message-expanded-row td {
    background: rgba(0,0,0,0.55);
    padding: 0;
}

.message-expanded-box {
    padding: 12px 14px;
    border-left: 4px solid gold;
}

.message-expanded-subject {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-bottom: 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.message-expanded-content {
    color: #ddd;
    line-height: 1.45;
    font-size: 0.95em;
    max-height: 220px;
    overflow: hidden;
}

.message-expanded-content a {
    color: #3498db;
    font-weight: bold;
}

.message-expanded-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.message-expanded-actions .btn-rank-filter {
    padding: 6px 12px;
}

.message-delete-btn {
    color: #e74c3c !important;
    border-color: #7a2a22 !important;
}

/* Pagination */
.messages-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px 0 8px;
    margin-top: 10px;
    border-top: 1px solid #333;
}

.messages-pagination .btn-rank-filter {
    width: 100px;
    padding: 5px;
}

.messages-pages {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 1.1em;
    font-family: monospace;
}

.message-page-number {
    color: #888;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.message-page-number:hover {
    color: white;
}

.message-page-number.active {
    color: gold;
    font-weight: bold;
    border-bottom: 2px solid gold;
    cursor: default;
}

/* =======================================================
   NOTIFICATIONS MESSAGERIE
   ======================================================= */

.header-message-link {
    position: relative;
    color: #e74c3c !important;
    text-decoration: none;
    font-size: 1.25em;
    margin-left: 35px;
    animation: messageBlink 0.9s infinite alternate;
}

.header-message-link:hover {
    color: white !important;
}

#header-message-count {
    position: absolute;
    top: -9px;
    right: -15px;
    min-width: 16px;
    height: 16px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #e74c3c;
    color: white;
    border: 1px solid white;
    font-size: 0.56em;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
}

@keyframes messageBlink {
    from {
        opacity: 0.35;
        filter: drop-shadow(0 0 1px #e74c3c);
    }

    to {
        opacity: 1;
        filter: drop-shadow(0 0 8px #e74c3c);
    }
}

.sidebar-message-unread {
    color: #e74c3c !important;
    animation: messageSidebarPulse 0.9s infinite alternate;
}

.sidebar-message-unread:hover {
    color: white !important;
}

.sidebar-message-count {
    color: #e74c3c;
    font-weight: bold;
    margin-left: 4px;
}

@keyframes messageSidebarPulse {
    from {
        filter: brightness(0.85);
    }

    to {
        filter: brightness(1.4);
    }
}

/* Sélecteur d'expéditeur dans Nouveau Message */
.message-sender-select {
    background: #050505;
    color: gold;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 9px 10px;
    font-size: 0.95em;
    box-sizing: border-box;
    cursor: pointer;
}

.message-sender-select:hover {
    border-color: gold;
}

/* Message incompréhensible */
.message-language-warning {
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #7a2a22;
    border-left: 4px solid #e74c3c;
    border-radius: 5px;
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    font-weight: bold;
    font-size: 0.86em;
    text-align: center;
}

.messages-table tr.message-unread td {
    background: rgba(255, 215, 0, 0.13);
    box-shadow:
        inset 0 0 12px rgba(255, 215, 0, 0.22),
        inset 4px 0 0 rgba(255, 215, 0, 0.85);
}

.messages-table tr.message-unread:hover td {
    background: rgba(255, 215, 0, 0.20);
    box-shadow:
        inset 0 0 16px rgba(255, 215, 0, 0.32),
        inset 4px 0 0 gold;
}

.messages-table tr.message-unread .message-character-cell a,
.messages-table tr.message-unread .message-date-cell {
    color: gold !important;
}

.messages-table tr.message-unread .message-content-cell span {
    color: #ddd;
}

/* =======================================================
   PAGE CHEF DE GUERRE
   ======================================================= */

.chief-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.chief-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.chief-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.chief-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 0 auto 12px auto;
}

.chief-tab-btn {
    height: 42px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.72em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: center;
}

.chief-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.chief-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.chief-view-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 auto 12px auto;
}

.chief-view-btn {
    min-height: 48px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px;
}

.chief-view-btn span {
    color: #777;
    font-size: 0.78em;
    font-weight: normal;
    text-transform: none;
}

.chief-view-btn:hover {
    color: gold;
    border-color: gold;
}

.chief-view-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.chief-view-btn.active span {
    color: #222;
}

.chief-view-off.active {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
}

.chief-view-def.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
}

/* =======================================================
   BADGES D'ABONNEMENT : BRONZE / ARGENT / OR / PLATINE
   Utilisé par Bestiaire, Races et Chef de Guerre
   ======================================================= */

.bestiary-subscription-badge.subscription-tier-badge,
.race-availability-badge.subscription-tier-badge {
    position: relative;
    overflow: hidden;
    color: var(--sub-tier-text, gold);
    background: var(--sub-tier-bg, rgba(255,215,0,0.08));
    border: 1px solid var(--sub-tier-border, rgba(255,215,0,0.45));
    box-shadow:
        inset 0 0 10px var(--sub-tier-inner, rgba(255,215,0,0.18)),
        0 0 10px var(--sub-tier-glow, rgba(255,215,0,0.22));
    text-shadow: 0 0 6px var(--sub-tier-text-glow, rgba(255,215,0,0.55));
}

.bestiary-subscription-badge.subscription-tier-badge::after,
.race-availability-badge.subscription-tier-badge::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -35%;
    width: 55%;
    height: 220%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.26),
        transparent
    );
    transform: rotate(18deg);
    opacity: 0.35;
    pointer-events: none;
}

/* Bronze : marron / bronze brillant */
.subscription-tier-bronze {
    --sub-tier-text: #ffd2a3;
    --sub-tier-bg:
        linear-gradient(
            135deg,
            rgba(58, 29, 10, 0.95) 0%,
            rgba(122, 65, 24, 0.92) 35%,
            rgba(205, 127, 50, 0.35) 55%,
            rgba(75, 36, 12, 0.95) 100%
        );
    --sub-tier-border: rgba(205,127,50,0.95);
    --sub-tier-inner: rgba(205,127,50,0.35);
    --sub-tier-glow: rgba(205,127,50,0.45);
    --sub-tier-text-glow: rgba(255,180,95,0.75);
}

/* Argent : gris / argent métallisé */
.subscription-tier-argent {
    --sub-tier-text: #f2f6f8;
    --sub-tier-bg:
        linear-gradient(
            135deg,
            rgba(48, 54, 58, 0.95) 0%,
            rgba(132, 143, 148, 0.88) 36%,
            rgba(235, 240, 242, 0.38) 52%,
            rgba(70, 78, 82, 0.95) 100%
        );
    --sub-tier-border: rgba(210,220,225,0.92);
    --sub-tier-inner: rgba(210,220,225,0.32);
    --sub-tier-glow: rgba(210,220,225,0.38);
    --sub-tier-text-glow: rgba(235,245,250,0.85);
}

/* Or : garde ton style actuel, mais légèrement renforcé */
.subscription-tier-or {
    --sub-tier-text: gold;
    --sub-tier-bg:
        linear-gradient(
            135deg,
            rgba(70, 48, 0, 0.95) 0%,
            rgba(180, 126, 0, 0.82) 40%,
            rgba(255, 215, 0, 0.35) 55%,
            rgba(75, 52, 0, 0.95) 100%
        );
    --sub-tier-border: rgba(255,215,0,0.95);
    --sub-tier-inner: rgba(255,215,0,0.32);
    --sub-tier-glow: rgba(255,215,0,0.42);
    --sub-tier-text-glow: rgba(255,215,0,0.85);
}

/* Platine : bleu-vert brillant */
.subscription-tier-platine,
.subscription-tier-platinium {
    --sub-tier-text: #d9fff8;
    --sub-tier-bg:
        linear-gradient(
            135deg,
            rgba(6, 45, 54, 0.95) 0%,
            rgba(28, 151, 166, 0.82) 36%,
            rgba(185, 255, 244, 0.38) 54%,
            rgba(26, 84, 112, 0.95) 100%
        );
    --sub-tier-border: rgba(120,255,235,0.92);
    --sub-tier-inner: rgba(120,255,235,0.30);
    --sub-tier-glow: rgba(75,235,215,0.48);
    --sub-tier-text-glow: rgba(180,255,245,0.9);
}

/* Event : orange brillant / indisponible hors Event */
.subscription-tier-event {
    --sub-tier-text: #ffd2a3;
    --sub-tier-bg:
        linear-gradient(
            135deg,
            rgba(62, 27, 0, 0.95) 0%,
            rgba(184, 82, 12, 0.88) 35%,
            rgba(255, 167, 66, 0.42) 55%,
            rgba(91, 39, 0, 0.95) 100%
        );
    --sub-tier-border: rgba(255,145,45,0.95);
    --sub-tier-inner: rgba(255,145,45,0.35);
    --sub-tier-glow: rgba(255,120,30,0.55);
    --sub-tier-text-glow: rgba(255,180,95,0.9);
}

/* Boutons des détails d'abonnement */
.subscription-tier-button.btn-action {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    padding: 12px !important;

    background: var(--sub-tier-bg) !important;
    color: var(--sub-tier-text) !important;
    border: 1px solid var(--sub-tier-border) !important;

    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    box-shadow:
        inset 0 0 10px var(--sub-tier-inner),
        0 0 8px var(--sub-tier-glow);

    text-shadow: 0 0 6px var(--sub-tier-text-glow);
    transition: 0.2s;
}

.subscription-tier-button.btn-action::after {
    content: "";
    position: absolute;
    top: -70%;
    left: -45%;
    width: 55%;
    height: 240%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.28),
        transparent
    );
    transform: rotate(18deg);
    opacity: 0.35;
    pointer-events: none;
}

.subscription-tier-button.btn-action:not(.active) {
    opacity: 0.68;
    filter: brightness(0.82) saturate(0.85);
}

.subscription-tier-button.btn-action.active {
    opacity: 1;
    filter: brightness(1.15) saturate(1.15);
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 14px var(--sub-tier-inner),
        0 0 16px var(--sub-tier-glow);
}

/* =======================================================
   AURA DU GÉNÉRAL HUMAIN
   ======================================================= */

.general-authority-aura-hex {
    position: absolute;
    width: 108px;
    height: 94px;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    background: radial-gradient(
        circle,
        rgba(241, 196, 15, 0.28) 0%,
        rgba(241, 196, 15, 0.16) 55%,
        rgba(241, 196, 15, 0.06) 100%
    );
    box-shadow:
        inset 0 0 36px rgba(241, 196, 15, 0.42),
        0 0 16px rgba(241, 196, 15, 0.38);
    pointer-events: none;
    z-index: 44;
}

/* =======================================================
   AURA DU SAGE HUMAIN
   ======================================================= */

.sage-wisdom-aura-hex {
    position: absolute;
    width: 108px;
    height: 94px;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    background: radial-gradient(
        circle,
        rgba(52, 152, 219, 0.25) 0%,
        rgba(52, 152, 219, 0.14) 55%,
        rgba(52, 152, 219, 0.05) 100%
    );
    box-shadow:
        inset 0 0 50px rgba(52, 152, 219, 0.45),
        0 0 18px rgba(52, 152, 219, 0.35);
    pointer-events: none;
    z-index: 43;
}

/* =======================================================
   AURAS ORCS D'ABONNEMENT
   ======================================================= */

.seigneur-war-chief-aura-hex {
    position: absolute;
    width: 108px;
    height: 94px;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    background: radial-gradient(
        circle,
        rgba(231, 76, 60, 0.24) 0%,
        rgba(231, 76, 60, 0.12) 55%,
        rgba(231, 76, 60, 0.04) 100%
    );
    box-shadow:
        inset 0 0 50px rgba(231, 76, 60, 0.38),
        0 0 16px rgba(231, 76, 60, 0.28);
    pointer-events: none;
    z-index: 42;
}

.orc-banner-aura-hex {
    position: absolute;
    width: 108px;
    height: 94px;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    background: radial-gradient(
        circle,
        rgba(241, 196, 15, 0.26) 0%,
        rgba(241, 196, 15, 0.13) 55%,
        rgba(241, 196, 15, 0.04) 100%
    );
    box-shadow:
        inset 0 0 50px rgba(241, 196, 15, 0.42),
        0 0 18px rgba(241, 196, 15, 0.35);
    pointer-events: none;
    z-index: 41;
}

/* =======================================================
   FUMÉE NOIRE — ASSASSIN
   ======================================================= */

.smoke-blind-overlay {
    position: absolute;
    inset: 0;
    z-index: 104;

    /* Important : les clics traversent vers les hexagones.
       Le JS bloque seulement l'affichage des informations. */
    pointer-events: none;

    background-color: rgba(0, 0, 0, 0.94);
    background-image: url('assets/tiles/fumee_noire.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1200px 1200px;

    opacity: 0.96;
    box-shadow: none !important;
}

.smoke-blind-overlay .smoke-text {
    display: none !important;
}

.black-smoke-area {
    display: none !important;
}

/* =======================================================
   FLÈCHES DE CONFIRMATION DE DÉPLACEMENT
   ======================================================= */

.movement-confirm-layer {
    position: absolute;
    inset: 0;
    z-index: 130;
    pointer-events: none;
}

.movement-confirm-arrow {
    position: absolute;
    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: 2px solid gold;

    background: rgba(0, 0, 0, 0.82);
    color: gold;

    font-size: 1.45em;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    pointer-events: auto;

    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.65),
        inset 0 0 10px rgba(255, 215, 0, 0.25);

    transition: transform 0.12s, background 0.12s, color 0.12s;
}

.movement-confirm-arrow:hover {
    transform: scale(1.18);
    background: gold;
    color: black;
}

/* =======================================================
   AURA IMPIE — ROI SQUELETTE
   ======================================================= */

.skeleton-king-unholy-aura-hex {
    position: absolute;
    width: 108px;
    height: 94px;
    z-index: 34;
    pointer-events: none;

    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

    background:
        radial-gradient(circle,
            rgba(80, 255, 80, 0.38) 0%,
            rgba(35, 220, 70, 0.30) 46%,
            rgba(45, 0, 75, 0.25) 68%,
            rgba(0, 0, 0, 0) 82%);

    box-shadow:
        inset 0 0 42px rgba(60, 255, 90, 0.58),
        0 0 20px rgba(30, 255, 80, 0.42),
        0 0 10px rgba(90, 0, 120, 0.55);

    animation: skeletonKingUnholyPulse 2.8s infinite ease-in-out;
}

@keyframes skeletonKingUnholyPulse {
    0% {
        opacity: 0.46;
    }
    50% {
        opacity: 0.88;
    }
    100% {
        opacity: 0.46;
    }
}

/* =======================================================
   CRÉATION DE PERSONNAGE — GROUPES & DIFFICULTÉS
   ======================================================= */

.creation-faction-layout {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.creation-map-box {
    border: 1px solid #ffd700;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.creation-map-img {
    width: 100%;
    height: 278px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.creation-faction-text-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.creation-faction-text-box h4 {
    color: gold;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.05em;
}

.creation-faction-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px;
}

.creation-faction-row p {
    margin: 0;
    color: #ccc;
    font-size: 0.86em;
    line-height: 1.35;
    font-style: italic;
}

.creation-faction-btn {
    width: 100%;
    padding: 10px 8px;
}

.creation-info-box,
.creation-difficulty-preview,
.creation-class-help {
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 10px 12px;
    color: #ccc;
    font-size: 0.88em;
    line-height: 1.35;
}

.creation-difficulty-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.creation-difficulty-buttons .btn-choice {
    padding: 8px 5px;
    font-size: 0.78em;
    white-space: nowrap;
}

.creation-difficulty-preview h4 {
    color: gold;
    margin: 0 0 8px 0;
    text-align: center;
    text-transform: uppercase;
}

.creation-difficulty-preview p {
    margin: 8px 0 0 0;
    color: #ddd;
    line-height: 1.4;
}

.creation-difficulty-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.creation-mini-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.creation-mini-card strong {
    color: #2ecc71;
    text-transform: uppercase;
    font-size: 0.82em;
}

.creation-validate-btn {
    margin-top: 12px;
    background: #27ae60;
}

.creation-group-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.creation-class-panel {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 14px;
}

.creation-class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
    border-bottom: 1px dashed #555;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.creation-class-header h4 {
    margin: 0 0 4px 0;
    color: gold;
    text-transform: uppercase;
    font-size: 1.05em;
}

.creation-class-header span {
    color: #aaa;
    font-size: 0.82em;
    font-style: italic;
}

.creation-gender-buttons {
    display: flex;
    gap: 6px;
}

.creation-gender-buttons .btn-choice {
    padding: 4px 10px;
    font-size: 0.78em;
    width: auto;
}

.creation-class-body {
    display: grid;
    grid-template-columns: 33% 34% 1fr;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

.creation-preview-left,
.creation-preview-center {
    min-height: 220px;
    background: rgba(0,0,0,0.25);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
}

.creation-preview-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.creation-preview-center {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    text-align: center;
    font-style: italic;
}

.creation-placeholder {
    color: #777;
    font-style: italic;
    text-align: center;
    margin-top: 70px;
}

.creation-class-buttons {
    width: auto !important;
    height: auto !important;
    justify-content: center;
}

.creation-class-buttons .btn-choice {
    padding: 8px 6px;
    font-size: 0.85em;
}

.creation-sprite-preview {
    width: 104px;
    height: 118px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 8px;
}

.creation-passive-text {
    width: 100%;
    color: #ccc;
    font-size: 0.74em;
    line-height: 1.25;
}

.creation-passive-text p {
    margin: 3px 0;
}

.creation-stats-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: monospace;
    font-size: 0.98em;
    color: white;
    font-style: normal;
}

.creation-stats-list div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.creation-stat-separator {
    border-top: 1px dashed #444;
    padding-top: 8px;
    margin-top: 4px;
}

.creation-class-help {
    margin-top: 12px;
    border-left-color: #3498db;
}

.creation-class-help strong {
    color: #3498db;
}

.creation-name-card {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 165px;
    padding: 18px;
}

.creation-name-card h4 {
    color: gold;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    text-align: center;
}

.creation-name-card p {
    margin: 0 0 14px 0;
    color: #aaa;
    font-style: italic;
    text-align: center;
}

.creation-name-grid {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

.creation-name-grid input {
    padding: 10px;
    background: #111;
    color: white;
    border: 1px solid #555;
    width: 100%;
    box-sizing: border-box;
}

.creation-map-open-link {
    display: block;
    width: 100%;
    margin: 7px auto 0 auto;
    background: none;
    border: none;
    color: gold;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.86em;
    text-decoration: underline;
    text-align: center;
}

.creation-map-open-link:hover {
    color: white;
}

.creation-map-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.82);
    display: flex;
    justify-content: center;
    align-items: center;
}

.creation-map-modal-content {
    position: relative;
    width: min(850px, calc(100vw - 40px));
    max-height: calc(100vh - 90px);
    background: rgba(10,10,10,0.96);
    border: 2px solid gold;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 0 25px rgba(255,215,0,0.45);
}

.creation-map-modal-content img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 6px;
}

.creation-map-close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    border: 1px solid white;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
}

.creation-class-header.compact {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 7px;
    margin-bottom: 9px;
}

.creation-class-title-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.creation-class-title-line h4 {
    margin: 0;
    color: gold;
    text-transform: uppercase;
    font-size: 1.02em;
    line-height: 1.1;
}

.creation-class-title-line span {
    color: #aaa;
    font-size: 0.82em;
    font-style: italic;
    white-space: nowrap;
}

.creation-sprite-frame {
    width: 112px;
    height: 122px;
    background: linear-gradient(180deg, #f1e7c6 0%, #d4bd79 100%);
    border-radius: 8px;
    border: 1px solid #5a4a1d;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.25);
    margin-bottom: 8px;
}

.creation-sprite-frame .creation-sprite-preview {
    width: 104px;
    height: 116px;
    margin: 0;
}

.creation-faction-validation {
    text-align: center;
    margin-top: 6px;
}

.creation-faction-validate-btn {
    width: auto;
    min-width: 230px;
    margin-top: 0;
    background: #27ae60;
}

.creation-step-warning {
    color: #e74c3c;
    font-size: 0.82em;
    font-style: italic;
    margin: 8px 0 0 0;
    line-height: 1.25;
}

.creation-difficulty-help {
    margin: 16px 0;
    line-height: 1.55;
}

/* =======================================================
   INTERFACE INTÉRIEURE DES BÂTIMENTS
   ======================================================= */

.building-ui-shell {
    width: 760px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    color: #ddd;
    text-shadow: 1px 1px 2px black;
}

.building-ui-head {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 16px;
    background: rgba(0,0,0,0.48);
    border: 1px solid rgba(255,215,0,0.35);
    border-left: 4px solid gold;
    border-radius: 7px;
    padding: 12px;

    box-shadow: 0 0 10px rgba(255,215,0,0.08);
}

.building-ui-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    border: 1px solid gold;
    border-radius: 50%;
    font-size: 2em;
    flex-shrink: 0;
}

.building-ui-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.15em;
    margin-bottom: 5px;
}

.building-ui-subtitle {
    color: #ccc;
    font-size: 0.85em;
    margin-top: 3px;
    line-height: 1.35;
    font-style: italic;
}

.building-tabs {
    width: 100%;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    margin-bottom: 12px;
}

.building-tab-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;

    background: rgba(20,20,20,0.94);
    border: 1px solid #444;
    color: #ddd;
    border-radius: 6px;

    padding: 9px 6px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.82em;
}

.building-tab-btn:hover {
    border-color: gold;
    color: gold;
}

.building-tab-btn.active {
    border-color: gold;
    background: rgba(255,215,0,0.12);
    color: gold;
    box-shadow: 0 0 10px rgba(255,215,0,0.25);
}

.building-menu-panel {
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;

    background: rgba(0,0,0,0.66);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;

    overflow: hidden;
}

.building-menu-panel h3 {
    color: gold;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    font-size: 1em;
}

.building-status-line {
    color: #aaa;
    text-align: center;
    font-size: 0.9em;
    margin: 0 0 12px 0;
}

.building-card {
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;

    background: rgba(20,20,20,0.86);
    border: 1px solid #444;
    border-radius: 7px;
    padding: 14px;

    line-height: 1.45;
    overflow: hidden;
}

.building-card strong {
    color: gold;
}

.building-small-note {
    color: #888;
    font-size: 0.84em;
    font-style: italic;
    margin-top: 10px;
}

.building-locked-box {
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;

    border: 1px dashed #777;
    background: rgba(0,0,0,0.45);
    color: #aaa;
    border-radius: 6px;
    padding: 14px;

    font-style: italic;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.building-action-btn {
    margin-top: 12px;
    background: #27ae60;
}

.building-action-link {
    display: block;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 12px;
    background: #27ae60;
}

.building-result-box {
    margin-top: 12px;
    background: rgba(0,0,0,0.72);
    border: 1px dashed gold;
    border-radius: 6px;
    padding: 12px;
    color: #aaa;
    min-height: 55px;
}

/* =======================================================
   CHANTIERS COLLECTIFS DES BÂTIMENTS
   ======================================================= */

.building-rp-box {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,0.48);
    border: 1px solid rgba(255,215,0,0.35);
    border-left: 4px solid gold;
    border-radius: 7px;
    padding: 12px 14px;
    margin-bottom: 12px;
    line-height: 1.45;
}

.building-rp-box strong {
    display: block;
    color: gold;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.building-rp-box p {
    color: #ccc;
    font-style: italic;
    margin: 0;
}

.building-contribution-summary {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    background: rgba(15,15,15,0.88);
    border: 1px solid #333;
    border-radius: 7px;
    padding: 10px 12px;
    margin-bottom: 10px;
    color: #aaa;
    font-size: 0.88em;
    text-align: center;
}

.building-progress-wrap {
    position: relative;
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    background: #050505;
    border: 1px solid #333;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 14px 0;
}

.building-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8e6b00, gold);
    transition: width 0.25s ease;
}

.building-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.82em;
    text-shadow: 1px 1px 2px black;
}

.building-resource-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.building-resource-row {
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 205px 160px minmax(280px, 1fr);
    column-gap: 16px;
    align-items: center;

    padding: 4px 0;
}

.building-resource-name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: gold;
    text-align: left;
    min-width: 0;
}

.building-resource-name strong {
    color: gold;
    font-size: 1em;
    line-height: 1.15;
    white-space: nowrap;
}

.building-resource-icon {
    width: 34px;
    min-width: 34px;
    text-align: center;
    font-size: 1.35em;

    display: flex;
    align-items: center;
    justify-content: center;
}

.building-resource-numbers {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #aaa;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.15;
    white-space: nowrap;
}

.building-resource-numbers strong {
    color: gold;
}

.building-donate-btn {
    width: 100% !important;
    height: 42px;
    margin-top: 0 !important;
    padding: 8px 12px !important;

    background: #27ae60;
    font-size: 0.78em;
    line-height: 1;
    white-space: nowrap;

    justify-self: stretch;
}

.building-donate-btn:disabled {
    background: #333 !important;
    color: #666 !important;
    border-color: #444 !important;
    cursor: not-allowed;
}

/* =======================================================
   DESCRIPTION RP DU NIVEAU DU BÂTIMENT
   ======================================================= */

.building-header-rp-box {
    display: block;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;

    margin: 4px auto 12px auto;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;

    text-align: center;
    color: #ccc;
    font-style: italic;
    font-size: 0.95em;
    line-height: 1.35;
}

.building-header-rp-box span {
    display: block;
    color: #ccc;
    font-style: italic;
}

/* =======================================================
   JOURNAL DE QUÊTES
   ======================================================= */

.quests-main {
    width: 100%;
    max-width: 848px;
    padding: 12px 18px;
    box-sizing: border-box;
    overflow: hidden;
}

.quests-title {
    color: gold;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.quests-separator {
    border-color: #333;
    margin: 0 0 12px 0;
    width: 100%;
}

.quests-character-row {
    width: 96%;
    margin: 0 auto 12px auto;
    display: flex;
    justify-content: center;
}

.quests-character-select {
    width: 340px;
    height: 34px;
    background: #111;
    color: gold;
    border: 1px solid gold;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.quests-main-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin: 0 auto 10px auto;
}

.quests-tab-btn {
    height: 44px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.74em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}

.quests-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.quests-tab-btn.active {
    background: gold;
    color: black;
    border-color: gold;
}

.quests-sub-tabs {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin: 0 auto 12px auto;
}

.quests-sub-tab-btn {
    height: 40px;
    background: #111;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.66em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}

.quests-sub-tab-btn:hover {
    color: gold;
    border-color: gold;
}

.quests-sub-tab-btn.active {
    background: rgba(255,215,0,0.12);
    color: gold;
    border-color: gold;
    box-shadow: 0 0 10px rgba(255,215,0,0.25);
}

.quests-panel {
    width: 96%;
    min-height: 620px;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(24,24,24,0.92);
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.quests-empty {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-style: italic;
    text-align: center;
}

.quests-family-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.quests-family-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    border: 1px solid rgba(255,215,0,0.55);
    color: gold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    box-shadow: inset 0 0 10px rgba(255,215,0,0.35);
}

.quests-family-body {
    min-width: 0;
    text-align: left;
}

.quests-family-body h3 {
    color: gold;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    font-size: 1.05em;
}

.quests-family-body p {
    margin: 6px 0 0 0;
    color: #ccc;
    line-height: 1.35;
    font-size: 0.88em;
    font-style: italic;
}

.quests-family-building {
    color: #aaa;
    font-size: 0.84em;
}

.quests-family-building strong {
    color: #2ecc71;
}

.quests-placeholder-box {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed #555;
    border-radius: 5px;
    background: rgba(0,0,0,0.35);
    color: #aaa;
    font-size: 0.82em;
}

.quests-placeholder-box strong {
    display: block;
    color: gold;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.quests-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quests-preview-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    min-height: 130px;
}

.quests-preview-head {
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 7px;
}

.quests-preview-head strong {
    display: block;
    color: gold;
    text-transform: uppercase;
    font-size: 0.86em;
    margin-bottom: 3px;
}

.quests-preview-head span {
    color: #2ecc71;
    font-size: 0.78em;
    font-weight: bold;
}

.quests-preview-card p {
    color: #aaa;
    font-size: 0.82em;
    line-height: 1.3;
    margin: 0;
}

.quests-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quests-column-box {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    min-height: 430px;
    overflow: hidden;
}

.quests-column-box h3 {
    margin: 0 0 10px 0;
    color: gold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.quests-log-line {
    background: #111;
    border: 1px solid #333;
    border-left: 4px solid #2ecc71;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 7px;
    box-sizing: border-box;
    text-align: left;
}

.quests-log-line strong {
    display: block;
    color: gold;
    font-size: 0.86em;
    margin-bottom: 3px;
}

.quests-log-line span {
    color: #aaa;
    font-size: 0.78em;
    line-height: 1.25;
}

.quests-muted-box {
    min-height: 120px;
    color: #777;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed #333;
    border-radius: 5px;
    padding: 10px;
}

/* Progression des quêtes par groupe */
.quest-state-card {
    min-height: 255px;
}

.quests-status-badge {
    display: inline-block;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid #444;
    font-size: 0.74em;
    text-transform: uppercase;
}

.quests-status-badge.active {
    color: #aaa;
    border-color: #555;
    background: rgba(255,255,255,0.04);
}

.quests-status-badge.ready {
    color: #2ecc71;
    border-color: #2ecc71;
    background: rgba(46,204,113,0.12);
}

.quests-status-badge.blocked {
    color: #e67e22;
    border-color: #e67e22;
    background: rgba(230,126,34,0.12);
}

.quests-status-badge.claimed {
    color: gold;
    border-color: gold;
    background: rgba(255,215,0,0.12);
}

.quests-progress-wrap {
    position: relative;
    width: 100%;
    height: 22px;
    box-sizing: border-box;
    background: #050505;
    border: 1px solid #333;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0;
}

.quests-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1f7a3a, #2ecc71);
    transition: width 0.25s ease;
}

.quests-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.78em;
    text-shadow: 1px 1px 2px black;
}

.quests-claim-btn {
    margin-top: 10px !important;
    height: 36px;
    padding: 7px 10px !important;
    background: #27ae60;
    font-size: 0.78em;
}

.quests-claim-btn:disabled {
    background: #333 !important;
    color: #777 !important;
    border-color: #444 !important;
    cursor: not-allowed;
}

.quests-action-result {
    margin-top: 12px;
    background: rgba(0,0,0,0.45);
    border: 1px dashed #444;
    border-radius: 6px;
    padding: 10px;
    color: #aaa;
    text-align: center;
    font-size: 0.86em;
}

.quests-highlight {
    color: #2ecc71;
    font-weight: bold;
}

.quests-rp-text {
    color: #aaa;
    font-style: italic;
    font-size: 0.82em;
    line-height: 1.35;
    margin: 0 0 9px 0;
}

.quests-objective-line {
    color: white !important;
    margin-top: 8px !important;
}

.quests-objective-line strong {
    color: gold !important;
}

.quests-objective-line span {
    color: white !important;
}

.quests-rule-line {
    color: #888 !important;
    font-size: 0.78em !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
}

.quests-rule-line strong {
    color: #3498db !important;
}

.quests-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.quests-preview-head > strong {
    flex: 1;
}

/* =======================================================
   VALIDATION DES QUÊTES DANS LES BÂTIMENTS
   ======================================================= */

.building-validation-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.building-validation-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;

    background: rgba(0,0,0,0.48);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
}

.building-validation-head strong {
    color: gold;
    font-size: 1.05em;
}

.building-validation-head span,
.building-validation-head small {
    display: block;
    color: #bbb;
    margin-top: 4px;
    line-height: 1.25;
}

.building-validation-level {
    color: #aaa;
    text-align: right;
    white-space: nowrap;
}

.building-validation-level strong {
    color: #2ecc71;
}

.building-quest-section {
    background: rgba(0,0,0,0.32);
    border: 1px solid #222;
    border-radius: 8px;
    padding: 10px;
}

.building-quest-section h4 {
    margin: 0 0 10px 0;
    color: gold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.building-quest-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.building-quest-card {
    background: rgba(12,12,12,0.92);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
}

.building-quest-card.ready {
    border-color: #2ecc71;
    box-shadow: 0 0 10px rgba(46,204,113,0.18);
}

.building-quest-card.claimed {
    border-color: #3498db;
    opacity: 0.88;
}

.building-quest-card.locked {
    opacity: 0.72;
}

.building-quest-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.building-quest-head strong {
    color: white;
    font-size: 1.02em;
}

.building-quest-head small {
    display: block;
    color: #888;
    margin-top: 3px;
    font-size: 0.78em;
}

.building-quest-status {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.72em;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid #444;
    background: rgba(0,0,0,0.35);
}

.building-quest-status.ready {
    color: #2ecc71;
    border-color: #2ecc71;
}

.building-quest-status.claimed {
    color: #3498db;
    border-color: #3498db;
}

.building-quest-status.locked {
    color: #e67e22;
    border-color: #e67e22;
}

.building-quest-status.blocked {
    color: #e74c3c;
    border-color: #e74c3c;
}

.building-quest-status.active {
    color: #f1c40f;
    border-color: #f1c40f;
}

.building-quest-rp {
    color: #aaa;
    font-style: italic;
    font-size: 0.82em;
    line-height: 1.35;
    margin-bottom: 8px;
}

.building-quest-objective,
.building-quest-reward {
    color: white;
    font-size: 0.84em;
    line-height: 1.3;
    margin: 7px 0;
}

.building-quest-objective strong {
    color: gold;
}

.building-quest-reward strong {
    color: #2ecc71;
}

.building-quest-progress-wrap {
    height: 20px;
    background: #050505;
    border: 1px solid #333;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin: 8px 0;
}

.building-quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2980b9, #2ecc71);
    transition: width 0.25s;
}

.building-quest-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.74em;
    font-weight: bold;
    text-shadow: 0 1px 2px black;
}

.building-quest-reason {
    color: #888;
    font-size: 0.78em;
    font-style: italic;
    margin-top: 8px;
}

.building-quest-claim-btn {
    margin-top: 8px !important;
}

.building-quest-claim-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =======================================================
   VALIDATION DES QUÊTES — VERSION COMPACTE DÉROULANTE
   ======================================================= */

.building-validation-message {
    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.86em;
}

.building-quest-list {
    gap: 6px;
}

.building-quest-card {
    padding: 0 !important;
    overflow: hidden;
}

.building-quest-line {
    min-height: 42px;
}

.building-quest-summary {
    width: 100%;
    border: none;
    background: rgba(0,0,0,0.36);
    color: white;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;
    text-align: left;
}

.building-quest-summary:hover {
    background: rgba(255,255,255,0.06);
}

.building-quest-summary-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.building-quest-summary-title strong {
    color: white;
    font-size: 0.95em;
    line-height: 1.15;
}

.building-quest-summary-title small {
    color: #888;
    font-size: 0.72em;
}

.building-quest-details {
    padding: 10px 12px 12px 12px;
    border-top: 1px solid #222;
    background: rgba(0,0,0,0.18);
}

.building-quest-expanded.ready .building-quest-summary {
    background: rgba(46,204,113,0.08);
}

.building-quest-expanded.claimed .building-quest-summary,
.building-quest-line.claimed .building-quest-summary {
    background: rgba(52,152,219,0.07);
}

.building-quest-expanded.locked .building-quest-summary,
.building-quest-line.locked .building-quest-summary {
    background: rgba(230,126,34,0.07);
}

.building-quest-expanded.blocked .building-quest-summary,
.building-quest-line.blocked .building-quest-summary {
    background: rgba(231,76,60,0.07);
}

.building-quest-expanded.active .building-quest-summary,
.building-quest-line.active .building-quest-summary {
    background: rgba(241,196,15,0.06);
}

.building-quest-section {
    padding: 8px !important;
}

.building-quest-section h4 {
    margin-bottom: 7px !important;
}

.building-quest-claim-btn {
    text-align: center;
}

/* =======================================================
   VALIDATION BÂTIMENT — EN-TÊTE COMPACT
   ======================================================= */

.building-validation-head-compact {
    align-items: center !important;
    padding: 8px 12px !important;
}

.building-validation-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.building-validation-title-row strong {
    color: gold;
    font-size: 1.05em;
    white-space: nowrap;
}

.building-validation-group-label {
    display: inline-flex !important;
    align-items: center;
    margin-top: 0 !important;
    color: #bbb !important;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.building-validation-head-compact .building-validation-level {
    margin-top: 0 !important;
    line-height: 1.1;
}

/* =======================================================
   CHANTIER COLLECTIF — MESSAGE COMPACT
   ======================================================= */

#building-construction-result {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    line-height: 1.2;
}

#building-construction-result span {
    line-height: 1.2;
}

/* =======================================================
   CONTRATS DE TAVERNE — raretés lumineuses
   ======================================================= */

.tavern-contract-card {
    --contract-rarity: #ffffff;

    border: 1px solid var(--contract-rarity) !important;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--contract-rarity) 12%, transparent),
            rgba(0,0,0,0.48) 45%,
            rgba(0,0,0,0.20)
        ) !important;

    box-shadow:
        0 0 12px color-mix(in srgb, var(--contract-rarity) 42%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--contract-rarity) 18%, transparent);
}

.tavern-contract-card .quests-preview-head strong {
    color: var(--contract-rarity);
}

.tavern-contract-card .quests-objective-line strong,
.tavern-contract-card .tavern-contract-reward strong {
    color: var(--contract-rarity);
}

.tavern-contract-offer-note {
    color: #aaa;
    font-size: 0.86em;
    font-style: italic;
    text-align: center;
    margin: 8px 0 14px 0;
}

.tavern-contract-building-row {
    margin-bottom: 8px;
    border: 1px solid var(--contract-rarity, #555);
    border-radius: 6px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--contract-rarity, #555) 10%, transparent),
            rgba(0,0,0,0.38)
        );
    box-shadow: 0 0 8px color-mix(in srgb, var(--contract-rarity, #555) 32%, transparent);
    overflow: hidden;
}

.tavern-contract-building-row summary {
    cursor: pointer;
    padding: 10px;
    color: var(--contract-rarity, gold);
    font-weight: bold;
    text-transform: uppercase;
}

.tavern-contract-building-row-body {
    padding: 0 10px 12px 10px;
    color: #ddd;
    font-size: 0.9em;
    line-height: 1.45;
}

/* =======================================================
   CONTRATS DE TAVERNE — HEADER COMPACT JOURNAL
   ======================================================= */

.tavern-contracts-header-card {
    margin-bottom: 10px !important;
    padding: 8px 10px !important;
}

.tavern-contracts-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.tavern-contracts-title-left {
    min-width: 0;
}

.tavern-contracts-title-left h3 {
    margin: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.tavern-contracts-week-note {
    color: #aaa;
    font-size: 0.78em;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
}

.tavern-contracts-slots {
    color: #ccc;
    font-size: 0.9em;
    white-space: nowrap;
    text-align: right;
}

/* Ancien texte d’offres : désactivé si jamais une ancienne version reste chargée */
.tavern-contract-offer-note {
    display: none !important;
}

/* =======================================================
   CONTRATS DE TAVERNE — STYLE BÂTIMENT SUR BASE VALIDATION
   ======================================================= */

.tavern-building-contract-line,
.tavern-building-contract-expanded {
    border-color: var(--contract-rarity, #ffffff) !important;
    box-shadow:
        0 0 8px color-mix(in srgb, var(--contract-rarity, #ffffff) 35%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--contract-rarity, #ffffff) 12%, transparent);
}

.tavern-building-contract-line .building-quest-summary,
.tavern-building-contract-expanded .building-quest-summary {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--contract-rarity, #ffffff) 14%, transparent),
            rgba(0,0,0,0.42)
        ) !important;
    border-left: 4px solid var(--contract-rarity, #ffffff);
}

.tavern-building-contract-line .building-quest-summary-title strong,
.tavern-building-contract-expanded .building-quest-summary-title strong {
    color: var(--contract-rarity, #ffffff) !important;
}

.tavern-building-contract-expanded .building-quest-details {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--contract-rarity, #ffffff) 8%, transparent),
            rgba(0,0,0,0.24)
        );
}

.tavern-building-contract-section h4 {
    color: gold;
}

/* =======================================================
   MAISON — REPOS + COFFRE PERSONNEL
   ======================================================= */

.house-rest-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-bottom: 12px;
    color: #ddd;
    line-height: 1.45;
}

.house-section-subtitle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.house-section-subtitle span {
    color: #888;
    font-size: 0.95em;
}

.house-storage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(285px, 0.85fr);
    gap: 12px;
    align-items: start;
}

.house-storage-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.house-storage-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.house-storage-block {
    background: rgba(0,0,0,0.34);
    border: 1px solid #222;
    border-radius: 7px;
    padding: 8px;
    box-sizing: border-box;
}

.house-storage-block h4 {
    color: gold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.82em;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.house-storage-grid {
    display: grid;
    gap: 7px;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border: 1px solid #111;
    border-radius: 6px;
    padding: 8px;
    box-sizing: border-box;
}

.house-storage-inventory-grid {
    grid-template-columns: repeat(6, 58px);
    grid-template-rows: repeat(2, 58px);
}

.house-storage-chest-grid {
    grid-template-columns: repeat(5, 58px);
    grid-template-rows: repeat(3, 58px);
}

.house-storage-slot {
    width: 58px;
    height: 58px;
    position: relative;
}

.house-storage-slot.selected {
    outline: 2px solid gold;
    box-shadow:
        0 0 12px rgba(255,215,0,0.85),
        inset 0 0 8px rgba(255,215,0,0.25) !important;
}

.house-storage-slot.locked-level3,
.house-storage-slot.house-storage-locked-level3,
.house-storage-slot.house-storage-locked-season {
    cursor: not-allowed;
    opacity: 0.62;
    background: rgba(5,5,5,0.9);
    border-color: #555;
    overflow: hidden;
}

.house-storage-locked-level3 span,
.house-storage-locked-season span {
    position: relative;
    z-index: 2;
    color: #777;
    font-size: 0.72em;
    font-weight: bold;
}

.house-storage-locked-level3::after {
    content: "";
    position: absolute;
    left: -14px;
    top: 28px;
    width: 86px;
    height: 2px;
    background: #e67e22;
    transform: rotate(-38deg);
    box-shadow: 0 0 6px rgba(230,126,34,0.65);
}

.house-storage-locked-season::before,
.house-storage-locked-season::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 28px;
    width: 84px;
    height: 2px;
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231,76,60,0.65);
}

.house-storage-locked-season::before {
    transform: rotate(38deg);
}

.house-storage-locked-season::after {
    transform: rotate(-38deg);
}

.house-storage-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    border-top: 1px solid #333;
    padding-top: 8px;
}

.house-storage-pagination .btn-rank-filter {
    width: 64px;
    padding: 5px;
    font-size: 0.72em;
}

.house-storage-pages {
    display: flex;
    gap: 7px;
    align-items: center;
    font-family: monospace;
    font-size: 1em;
}

.house-storage-page-label {
    color: #777;
    font-size: 0.85em;
    margin-right: 2px;
}

.house-storage-page-number {
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
}

.house-storage-page-number:hover {
    color: white;
}

.house-storage-page-number.active {
    color: gold;
    font-weight: bold;
    border-bottom: 2px solid gold;
    cursor: default;
}

.house-storage-panel {
    padding: 10px !important;
    min-height: 0;
}

.house-storage-panel h3 {
    margin: 0 0 8px 0;
    color: gold;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    font-size: 0.86em;
}

.house-storage-panel .inventory-detail-panel {
    min-height: 185px;
}

.house-storage-panel .inventory-action-panel {
    min-height: 150px;
}

.house-storage-detail-card {
    grid-template-columns: 1fr 92px !important;
    gap: 10px !important;
    padding: 10px !important;
}

.house-storage-detail-card .inventory-detail-image {
    width: 92px;
    min-width: 92px;
}

.house-storage-detail-card h4 {
    font-size: 0.9em;
    line-height: 1.1;
}

.house-storage-action-message {
    margin-bottom: 8px;
    background: rgba(0,0,0,0.45);
    border: 1px dashed gold;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    color: #aaa;
    font-size: 0.86em;
    line-height: 1.3;
}

/* =======================================================
   BÂTIMENT — HEADER COMPACT TYPE INVENTAIRE/JOURNAL
   ======================================================= */

#building-header {
    width: 100%;
    max-width: 848px;
    margin: 0 auto 8px auto !important;
}

#building-title.building-page-title {
    color: gold !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 1.35em !important;
    line-height: 1.1 !important;
}

#building-desc.building-header-context {
    margin: 0 0 8px 0 !important;
    color: #aaa !important;
    font-size: 0.9em !important;
    font-style: italic !important;
    text-align: center !important;
    line-height: 1.25 !important;
}

.building-header-context-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.building-header-context-line strong {
    color: gold;
    font-style: normal;
}

.building-header-context-line b {
    color: #2ecc71;
}

.building-frame {
    padding: 12px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
}

.building-ui-shell-compact {
    width: 100%;
}

.building-rp-compact-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;

    margin-bottom: 8px;
    padding: 7px 10px;

    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;

    text-align: left;
}

.building-rp-compact-line strong {
    color: gold;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.86em;
}

.building-rp-compact-line span {
    color: #aaa;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.25;
}

.building-menu-panel {
    padding: 10px !important;
}

/* =======================================================
   TOUR DE GUET — OBSERVATION
   ======================================================= */

.watchtower-effect-card {
    min-height: 0 !important;
}

.watchtower-effect-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0;

    color: #ddd;
    font-size: 0.9em;
    text-align: center;
}

.watchtower-effect-summary div {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px;
}

.watchtower-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 8px;
    color: #ddd;
}

.watchtower-result-grid div {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 5px;
    padding: 7px;
    text-align: center;
}

/* =======================================================
   BÂTIMENT — RP COMPACT AVEC ICÔNE
   ======================================================= */

.building-rp-compact-line {
    grid-template-columns: 42px 1fr !important;
}

.building-rp-compact-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.7);
    border: 1px solid gold;
    border-radius: 50%;

    color: gold;
    font-size: 1.35em;
    box-shadow: inset 0 0 8px rgba(255,215,0,0.25);
}

.building-rp-compact-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* =======================================================
   BÂTIMENTS DE MÉTIERS
   ======================================================= */

.profession-building-effect-card {
    min-height: 0 !important;
}

.profession-building-effect-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}

.profession-building-effect-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
}

.profession-building-effect-row.unlocked {
    border-color: rgba(46,204,113,0.55);
    box-shadow: inset 0 0 8px rgba(46,204,113,0.12);
}

.profession-building-effect-row.locked {
    opacity: 0.72;
}

.profession-building-effect-row strong {
    color: gold;
    display: block;
    font-size: 0.9em;
    text-transform: uppercase;
}

.profession-building-effect-row span {
    color: #aaa;
    font-size: 0.82em;
}

/* =======================================================
   BASTION — CLASSEMENT + ARMURERIE D'HONNEUR
   ======================================================= */

.bastion-effect-card {
    min-height: 0 !important;
}

.bastion-effect-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.bastion-effect-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;

    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 9px 10px;
}

/* Ligne avec bouton : texte | bouton | badge */
.bastion-effect-row.has-action {
    grid-template-columns: minmax(0, 1fr) 180px auto;
}

/* Lignes sans bouton : texte | badge à droite */
.bastion-effect-row.no-action {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bastion-effect-row .building-quest-status {
    justify-self: end;
    align-self: center;
    text-align: center;
    white-space: nowrap;
}

.bastion-effect-row.has-action .bastion-effect-action {
    justify-self: stretch;
}

.bastion-effect-row.unlocked {
    border-color: rgba(46,204,113,0.55);
    box-shadow: inset 0 0 8px rgba(46,204,113,0.12);
}

.bastion-effect-row.locked {
    opacity: 0.72;
}

.bastion-effect-row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    min-width: 0;
}

.bastion-effect-row-main strong {
    color: gold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.bastion-effect-row-main span {
    color: #aaa;
    font-size: 0.82em;
    line-height: 1.25;
}

.bastion-effect-action {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 8px 10px !important;
    font-size: 0.78em !important;
    box-sizing: border-box;
    text-align: center;
}

/* =======================================================
   BASTION — SETS D'HONNEUR
   ======================================================= */

.bastion-honor-card {
    min-height: 0 !important;
}

.bastion-honor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    color: gold;
    margin-bottom: 8px;
}

.bastion-honor-head span {
    color: #aaa;
    font-size: 0.9em;
}

.bastion-honor-head b {
    color: var(--honor-color);
}

.bastion-honor-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 10px;
}

.bastion-honor-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;

    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 7px;
    padding: 9px;
}

.bastion-honor-slot {
    min-height: 74px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--bastion-item-color, #555) 18%, transparent),
            rgba(0,0,0,0.55)
        );

    border: 1px solid var(--bastion-item-color, #444);
    border-radius: 6px;

    color: #ccc;
    cursor: pointer;

    box-shadow:
        0 0 7px color-mix(in srgb, var(--bastion-item-color, #555) 40%, transparent),
        inset 0 0 8px color-mix(in srgb, var(--bastion-item-color, #555) 18%, transparent);
}

.bastion-honor-slot span {
    font-size: 0.72em;
    color: #aaa;
    line-height: 1.1;
    text-align: center;
}

.bastion-honor-slot.empty {
    opacity: 0.55;
    box-shadow: none;
}

.bastion-honor-slot.selected {
    outline: 2px solid gold;
    box-shadow:
        0 0 12px rgba(255,215,0,0.85),
        inset 0 0 8px rgba(255,215,0,0.25);
}

.bastion-honor-slot.honor {
    border-color: #e74c3c !important;
    box-shadow:
        0 0 11px rgba(231,76,60,0.8),
        inset 0 0 10px rgba(231,76,60,0.22);
}

.bastion-honor-right {
    min-width: 0;
}

.bastion-honor-detail-card {
    position: relative;

    min-height: 170px;

    border: 1px solid var(--bastion-item-color, #555);
    border-radius: 7px;

    padding: 12px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--bastion-item-color, #555) 16%, transparent),
            rgba(0,0,0,0.55) 48%,
            rgba(0,0,0,0.25)
        );

    box-shadow:
        inset 0 0 14px color-mix(in srgb, var(--bastion-item-color, #555) 22%, transparent),
        0 0 9px color-mix(in srgb, var(--bastion-item-color, #555) 38%, transparent);
}

.bastion-honor-detail-text {
    position: relative;
    z-index: 2;
    width: 64%;
}

.bastion-honor-detail-text h4 {
    margin: 0 0 7px 0;
    text-transform: uppercase;
    font-size: 0.95em;
    line-height: 1.15;
}

.bastion-honor-detail-meta {
    color: #bbb;
    font-size: 0.86em;
    font-style: italic;
    margin-bottom: 8px;
}

.bastion-honor-bonus-list {
    line-height: 1.38;
    font-size: 0.88em;
}

.bastion-honor-bound-note {
    margin-top: 8px;
    color: #e74c3c;
    font-size: 0.82em;
    font-weight: bold;
}

.bastion-honor-detail-icon {
    position: absolute;
    right: 8px;
    top: 20px;
    width: 115px;
    height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.96;
    pointer-events: none;
}

.bastion-honor-detail-empty {
    padding: 18px;
    color: #888;
    font-style: italic;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border: 1px dashed #444;
    border-radius: 6px;
    line-height: 1.4;
}

.bastion-honor-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.bastion-honor-upgrade-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
    align-items: center;

    padding: 9px;
    border-radius: 6px;
    border: 1px solid #333;
    background: rgba(0,0,0,0.34);
}

.bastion-honor-upgrade-row.available {
    border-color: rgba(46,204,113,0.55);
}

.bastion-honor-upgrade-row.locked {
    opacity: 0.68;
}

.bastion-honor-upgrade-row strong {
    display: block;
    color: gold;
    text-transform: uppercase;
    font-size: 0.86em;
}

.bastion-honor-upgrade-row span {
    display: block;
    color: #aaa;
    font-size: 0.8em;
    margin-top: 2px;
}

.bastion-honor-upgrade-row small {
    display: block;
    color: #e74c3c;
    font-size: 0.76em;
    margin-top: 3px;
}

.bastion-honor-upgrade-row .btn-action {
    margin: 0 !important;
    padding: 7px !important;
    font-size: 0.78em !important;
}

/* =======================================================
   ARMURERIE — SET D'HONNEUR LISIBLE
   ======================================================= */

.armory-honor-rule-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 14px;
    align-items: center;

    background: rgba(0,0,0,0.45);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;

    padding: 10px 12px;
    margin-bottom: 12px;

    color: #aaa;
    font-size: 0.86em;
    font-style: normal;
    text-align: left;
}

.armory-honor-rule-card strong {
    color: gold;
    text-transform: uppercase;
    grid-row: span 3;
}

.armory-honor-rule-card div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.25;
}

.armory-honor-rule-card b {
    color: #2ecc71;
    white-space: nowrap;
}

.armory-honor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.armory-honor-class-card {
    background: rgba(0,0,0,0.42);
    border: 1px solid #333;
    border-left: 4px solid #9b59b6;
    border-radius: 6px;
    padding: 10px;
}

.armory-honor-class-title {
    color: gold;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95em;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    margin-bottom: 9px;
}

.armory-honor-path-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.armory-honor-path-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
}

.armory-honor-path-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;

    background: #111;
    border-bottom: 1px solid #333;
    padding: 7px 9px;
}

.armory-honor-path-title strong {
    color: #9b59b6;
    text-transform: uppercase;
    font-size: 0.82em;
}

.armory-honor-path-title span {
    color: gold;
    font-weight: bold;
    font-size: 0.82em;
}

.armory-honor-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.78em;
}

.armory-honor-table th {
    background: rgba(0,0,0,0.55);
    color: gold;
    border: 1px solid #333;
    padding: 6px;
    text-transform: uppercase;
}

.armory-honor-table td {
    border: 1px solid #222;
    padding: 7px;
    vertical-align: top;
    height: auto;
    min-height: 0;
    color: #ccc;
}

.armory-honor-slot-cell {
    width: 92px;
    color: #f1c40f !important;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.armory-honor-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.18;
}

.armory-honor-bonus-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 4px;
    align-items: start;
}

.armory-honor-bonus-value {
    color: #2ecc71;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.armory-honor-bonus-text {
    color: #d7d7d7;
    text-align: left;
}

.armory-honor-empty {
    color: #777;
    font-style: italic;
    text-align: center;
}

/* =======================================================
   BASTION — MESSAGE COMPACT
   ======================================================= */

.bastion-honor-result {
    min-height: 0 !important;
    padding: 6px 10px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* =======================================================
   BÂTIMENTS DE RESSOURCES — MINE / CAMP / CARRIÈRE
   ======================================================= */

.resource-building-info-card,
.resource-building-effect-card {
    min-height: 0 !important;
}

.resource-building-intro-box {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-left: 4px solid gold;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    text-align: left;
}

.resource-building-intro-box strong {
    display: block;
    color: gold;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.resource-building-intro-box p {
    margin: 0;
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.35;
    font-style: italic;
}

.resource-building-progress-wrap {
    position: relative;
    width: 100%;
    height: 22px;
    box-sizing: border-box;
    background: #050505;
    border: 1px solid #333;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 12px 0;
}

.resource-building-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7a5b00, gold);
    transition: width 0.25s ease;
}

.resource-building-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.78em;
    text-shadow: 1px 1px 2px black;
}

.resource-building-yield-box {
    background: rgba(0,0,0,0.35);
    border: 1px solid #333;
    border-radius: 7px;
    padding: 10px;
    margin-top: 10px;
}

.resource-building-yield-box h4 {
    margin: 0 0 8px 0;
    color: gold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.86em;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.resource-building-yield-row {
    display: grid;
    grid-template-columns: 34px 70px 1fr;
    gap: 8px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #ddd;
}

.resource-building-yield-row:last-child {
    border-bottom: none;
}

.resource-building-yield-row span {
    text-align: center;
    font-size: 1.2em;
}

.resource-building-yield-row strong {
    color: #2ecc71;
    text-align: right;
    white-space: nowrap;
}

.resource-building-yield-row em {
    color: #ddd;
    font-style: normal;
}

.resource-building-warning-note {
    line-height: 1.35;
    text-align: center;
}

.resource-building-action-btn {
    background: #27ae60 !important;
}

.resource-building-action-btn:disabled {
    background: #333 !important;
    color: #666 !important;
    border-color: #444 !important;
    cursor: not-allowed;
}

.resource-building-result {
    min-height: 0 !important;
    padding: 9px 10px !important;
    line-height: 1.25;
}

.resource-building-result-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    margin-top: 8px;
}

.resource-building-result-list div {
    color: #ddd;
    font-size: 0.9em;
}

.resource-building-result-list span {
    margin-right: 4px;
}

.resource-building-result-list strong {
    color: #2ecc71;
    margin-right: 4px;
}

.resource-building-empty {
    color: #777;
    font-style: italic;
    text-align: center;
    padding: 8px;
}

/* =======================================================
   INVENTAIRE — STATUT ENCOMBRÉ
   ======================================================= */

.inventory-encumbrance-badge {
    position: relative;
    overflow: hidden;

    color: #ffb3b3;
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.65);
    border-radius: 5px;

    padding: 5px 9px;
    font-size: 0.82em;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.1;

    box-shadow:
        inset 0 0 10px rgba(231, 76, 60, 0.25),
        0 0 12px rgba(231, 76, 60, 0.35);

    text-shadow: 0 0 7px rgba(231, 76, 60, 0.85);
}

.inventory-encumbrance-badge::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -35%;
    width: 55%;
    height: 220%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.28),
        transparent
    );
    transform: rotate(18deg);
    opacity: 0.35;
    pointer-events: none;
}

.inventory-encumbrance-badge.active {
    color: #ffffff;
    background: rgba(231, 76, 60, 0.28);
    border-color: #e74c3c;
    box-shadow:
        inset 0 0 14px rgba(231, 76, 60, 0.45),
        0 0 18px rgba(231, 76, 60, 0.65);
}

/* =======================================================
   🧝 VILLAGES ELFES / 💀 VILLAGES SQUELETTES / CIMETIÈRES
   ======================================================= */

.mega-building.bastion_elfe {
    width: 820px;
    height: 820px;
    background-image: url('assets/houses/bastion-elfe.png');
    background-size: 100% 100%;
}

.mega-building.maison_elfe {
    width: 360px;
    height: 286px;
    background-image: url('assets/houses/maison-elfe.png');
    background-size: 100% 100%;
}

.mega-building.autel_elfe {
    width: 470px;
    height: 470px;
    background-image: url('assets/houses/autel-elfe.png');
    background-size: 100% 100%;
}

.mega-building.bastion_skull {
    width: 820px;
    height: 820px;
    background-image: url('assets/houses/bastion-skull.png');
    background-size: 100% 100%;
}

.mega-building.maison_skull {
    width: 360px;
    height: 360px;
    background-image: url('assets/houses/maison-skull.png');
    background-size: 100% 100%;
}

.mega-building.autel_skull {
    width: 470px;
    height: 470px;
    background-image: url('assets/houses/autel-skull.png');
    background-size: 100% 100%;
}

/* Marchés de contrebande : même image pour les 4 emplacements */
.mega-building.marche_autre1,
.mega-building.marche_autre2,
.mega-building.marche_autre3,
.mega-building.marche_autre4 {
    width: 355px;
    height: 332px;
    background-image: url('assets/houses/marche-neutre.png');
    background-size: 100% 100%;
}

/* Cimetières visuels : pas d'entrée bâtiment */
.mega-building.cimetiere_coalition {
    width: 520px;
    height: 520px;
    background-image: url('assets/decors/cimetiere-coalition.png');
    background-size: 100% 100%;
}

.mega-building.cimetiere_pacte {
    width: 520px;
    height: 520px;
    background-image: url('assets/decors/cimetiere-pacte.png');
    background-size: 100% 100%;
}

/* ========================================================
   PERSONNAGE INACTIF — APPARENCE STATUE DE PIERRE
   Aucun asset supplémentaire n'est téléchargé.
   ======================================================== */

.player-token.inactive-unit-token {
    filter:
        grayscale(100%)
        saturate(0%)
        brightness(78%)
        contrast(100%)
        drop-shadow(0 0 7px rgba(210, 210, 210, 0.9))
        !important;

    border-radius: 45%;
}

.player-token.inactive-unit-token::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 125;
    pointer-events: none;
    border-radius: 45%;

    background:
        repeating-radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.10) 0,
            rgba(255, 255, 255, 0.10) 1px,
            rgba(25, 25, 25, 0.12) 2px,
            rgba(25, 25, 25, 0.12) 4px
        );

    mix-blend-mode: multiply;
    opacity: 0.35;
}

.inactive-unit-badge {
    position: absolute;
    left: 50%;
    bottom: -17px;
    transform: translateX(-50%);
    z-index: 135;

    padding: 2px 6px;

    color: #e0e0e0;
    background: rgba(20, 20, 20, 0.94);

    border: 1px solid #a0a0a0;
    border-radius: 3px;

    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.7px;
    line-height: 1.2;

    white-space: nowrap;
    pointer-events: none;

    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.25);
}


/* =======================================================
   CORRECTION DE LISIBILITÉ DES PETITS TEXTES (reprendre les valeurs du bas une a une avec les bonnes valeurs)
   ======================================================= */

/* Titres des petits encadrés latéraux */
.stat-box h3 {
    font-size: 14px;
}

/* Évènements des colonnes latérales */
.sidebar-event-item h4 {
    font-size: 0.86em;
}

.sidebar-event-item p,
.sidebar-event-item a {
    font-size: 0.78em;
    line-height: 1.30;
}

/* Journal des derniers évènements */
.sidebar-combat-log {
    font-size: 0.75em;
    line-height: 1.22;
}

/* Petites informations générales des colonnes */
.sidebar-small-note {
    font-size: 0.80em;
    line-height: 1.35;
}

.server-stat-row {
    font-size: 0.82em;
}

.server-last-register {
    font-size: 0.80em;
}

/* Position du personnage et labels d’actions */
.char-pos-styled,
.action-item label {
    font-size: 0.80em;
}

/* Fenêtres de confirmation d’équipement */
.equipment-confirmation-text {
    font-size: 0.86em;
}

.equipment-confirmation-warning {
    font-size: 0.82em;
}

.equipment-confirmation-actions .btn-action {
    font-size: 0.74em;
}

/* Petits boutons du classement */
.ranking-criteria-grid .btn-rank-filter,
.ranking-faction-row .btn-faction-filter {
    font-size: 0.74em;
}

/* Wiki */
.wiki-rule-card {
    font-size: 0.82em;
}

.wiki-mini-table,
.wiki-note {
    font-size: 0.80em;
}

/* Armurerie */
.armory-table {
    font-size: 0.76em;
}

.armory-header-desc,
.armory-set-desc {
    font-size: 0.82em;
}

/* Journal de quêtes */
.quests-placeholder-box {
    font-size: 0.86em;
}

.quests-preview-head span {
    font-size: 0.82em;
}

.quests-preview-card p {
    font-size: 0.86em;
}

/* =======================================================
   ACCUEIL — CONSIGNES DE L’ALPHA RESTREINTE
   ======================================================= */

/*
 * Annule la grille initiale du bloc Évènements.
 * Le contenu Alpha possède sa propre organisation.
 */
.home-events-box.alpha-test-events-box {
    display: block;

    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;

    box-sizing: border-box;

    margin: 0;
    padding: 12px 16px 14px 16px;

    overflow: visible;
}

.alpha-test-events-box > h3 {
    margin:
        0
        0
        8px
        0;
}

/* Bandeau d’introduction */
.alpha-test-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 15px;
    align-items: center;

    padding: 7px 10px;

    background:
        rgba(255, 215, 0, 0.07);

    border:
        1px solid
        rgba(255, 215, 0, 0.24);

    border-radius:
        5px;
}

.alpha-test-intro strong {
    color: gold;

    font-family:
        var(--font-game-title);

    font-size: 0.88em;
    line-height: 1.2;
}

.alpha-test-intro span {
    color: #e74c3c;

    font-size: 0.86em;
    font-weight: 700;

    white-space: nowrap;
}

/* Quatre consignes sur deux colonnes */
.alpha-test-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 8px;
}

/* Une consigne individuelle */
.alpha-test-rule {
    min-width: 0;
    box-sizing: border-box;

    padding: 8px 10px;

    background:
        rgba(0, 0, 0, 0.42);

    border:
        1px solid #333;

    border-left:
        3px solid gold;

    border-radius:
        4px;
}

.alpha-test-rule h4 {
    margin:
        0
        0
        4px
        0;

    color: gold;

    font-size: 0.82em;
    line-height: 1.15;

    text-transform: uppercase;
}

.alpha-test-rule p {
    margin: 0;

    color: #ccc;

    font-size: 0.84em;
    line-height: 1.24;
}

.alpha-test-rule p + p {
    margin-top: 5px;
}

/* Encadrés PVE et PVP */
.alpha-test-playstyles {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin-top: 6px;
}

.alpha-test-playstyles span {
    display: block;

    min-width: 0;
    box-sizing: border-box;

    padding: 5px 6px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid #333;

    border-radius:
        3px;

    color: #bbb;

    font-size: 0.78em;
    line-height: 1.18;
}

.alpha-test-pve {
    display: block;

    color: #2ecc71;

    margin-bottom: 2px;
}

.alpha-test-pvp {
    display: block;

    color: #e74c3c;

    margin-bottom: 2px;
}

/* Exemples de noms de personnages */
.alpha-test-names {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-top: 5px;
}

.alpha-test-names code {
    display: block;

    box-sizing: border-box;

    padding: 3px 5px;

    background: #050505;

    border:
        1px solid #333;

    border-radius:
        3px;

    color: #ddd;

    font-family:
        monospace;

    font-size: 0.72em;
    line-height: 1.2;

    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mises en valeur */
.alpha-test-code {
    color: #9b59b6;
}

.alpha-test-xp {
    color: #3498db;
}

/* Message final */
.alpha-test-footer {
    margin-top: 8px;
    padding-top: 7px;

    border-top:
        1px solid #444;

    color: gold;

    font-family:
        var(--font-game-title);

    font-size: 0.95em;
    font-weight: 700;

    text-align: center;
    letter-spacing: 0.06em;
}

/* Adaptation si la fenêtre devient étroite */
@media (max-width: 900px) {
    .alpha-test-intro {
        grid-template-columns:
            1fr;

        gap: 3px;

        text-align: center;
    }

    .alpha-test-intro span {
        white-space: normal;
    }

    .alpha-test-grid {
        grid-template-columns:
            1fr;
    }

    .alpha-test-playstyles {
        grid-template-columns:
            1fr;
    }
}

/* =======================================================
   PAGES CLASSIQUES — ADAPTATION PC ET PORTABLES

   Pages actuellement prises en charge :
    - Accueil
    - Personnages
    - Jeu
    - Carte du Monde
    - Équipement
    - Inventaire

   Résolutions ciblées :
   - 1920 × 1080
   - 1600 × 900
   - 1536 × 864
   - 1366 × 768
   ======================================================= */

/* =======================================================
   VARIABLES COMMUNES
   ======================================================= */

body.desktop-responsive-page {
    --desktop-sidebar-width: 280px;
    --desktop-layout-gap: 20px;
    --desktop-layout-padding-x: 20px;

    min-width: 0;
}

/* =======================================================
   STRUCTURE VERTICALE
   ======================================================= */

.desktop-responsive-page #global-header {
    flex: 0 0 60px;

    min-height: 60px;
}

.desktop-responsive-page #top-menu {
    width: 100%;
    height: 60px;
    min-height: 60px;

    box-sizing: border-box;

    padding:
        0
        var(--desktop-layout-padding-x);

    gap:
        var(--desktop-layout-gap);
}

.desktop-responsive-page #main-layout {
    flex: 1 1 auto;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    padding:
        15px
        var(--desktop-layout-padding-x);

    gap:
        var(--desktop-layout-gap);

    overflow: hidden;
}

/* =======================================================
   BANDEAU SUPÉRIEUR
   ======================================================= */

.desktop-responsive-page .header-block.left,
.desktop-responsive-page .header-block.right {
    flex:
        0
        0
        var(--desktop-sidebar-width);

    width:
        var(--desktop-sidebar-width);

    min-width: 0;
}

.desktop-responsive-page #nav-links {
    flex:
        0
        1
        850px;

    width: auto;
    max-width: 850px;
    min-width: 0;
}

.desktop-responsive-page #nav-links a {
    white-space: nowrap;
}

.desktop-responsive-page #header-auth-zone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
}

.desktop-responsive-page #header-auth-zone > span {
    display: block;

    min-width: 0;
    max-width: 130px;

    margin-right: 10px !important;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-responsive-page #header-auth-zone > button {
    flex-shrink: 0;
}

/* =======================================================
   TROIS COLONNES
   ======================================================= */

.desktop-responsive-page #sidebar-left-content,
.desktop-responsive-page #sidebar-right-content {
    flex:
        0
        0
        var(--desktop-sidebar-width);

    width:
        var(--desktop-sidebar-width);

    min-width: 0;

    height: 100%;
    max-height: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    gap: 15px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
}

.desktop-responsive-page .main-column {
    min-width: 0;
    min-height: 0;

    height: 100%;
    max-height: 100%;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
}

/*
 * Les éléments intérieurs gardent leur hauteur réelle.
 * Si leur contenu dépasse, c'est la colonne centrale
 * qui défile au lieu de comprimer et couper les panneaux.
 */
.desktop-responsive-page .main-column > * {
    flex-shrink: 0;
}

.desktop-responsive-page #sidebar-left-content .stat-box,
.desktop-responsive-page #sidebar-right-content .stat-box {
    min-width: 0;

    overflow-wrap: anywhere;
}

/* =======================================================
   ACCUEIL
   ======================================================= */

.page-home .home-main {
    min-width: 0;
    min-height: 0;

    max-height: 100%;
}

/* =======================================================
   PAGE PERSONNAGES
   ======================================================= */

.page-characters .characters-main {
    width: 100%;
    max-width: 850px;

    align-items: stretch;
}

.page-characters .characters-title {
    margin:
        0
        0
        18px
        0;

    color: gold;

    text-align: center;
    text-transform: uppercase;

    font-size: 1.45em;
    line-height: 1.15;
}

.page-characters #characters-grid {
    min-width: 0;

    margin-top: 0;
}

/*
 * Sécurité pour les noms très longs.
 * Le nom est raccourci visuellement sans modifier
 * sa valeur enregistrée dans Supabase.
 */
.page-characters .character-name {
    min-width: 0;
    max-width: 250px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =======================================================
   ÉCRANS INTERMÉDIAIRES
   1440 à 1599 px
   ======================================================= */

@media (max-width: 1599px) {
    body.desktop-responsive-page {
        --desktop-sidebar-width: 245px;
        --desktop-layout-gap: 14px;
        --desktop-layout-padding-x: 16px;
    }

    .desktop-responsive-page #nav-links {
        gap: 24px;
    }

    .desktop-responsive-page
    #header-auth-zone > span {
        max-width: 105px;

        margin-right: 8px !important;
    }

    .desktop-responsive-page
    #header-auth-zone > button {
        padding:
            5px
            10px !important;

        font-size: 0.76em;
    }
}

/* =======================================================
   PETITS ORDINATEURS PORTABLES
   1366 à 1439 px
   ======================================================= */

@media (max-width: 1439px) {
    body.desktop-responsive-page {
        --desktop-sidebar-width: 210px;
        --desktop-layout-gap: 10px;
        --desktop-layout-padding-x: 10px;
    }

    .desktop-responsive-page #nav-links {
        gap: 18px;
    }

    .desktop-responsive-page #nav-links a {
        font-size: 0.88em;
    }

    .desktop-responsive-page
    #header-auth-zone > span {
        max-width: 82px;

        margin-right: 6px !important;

        font-size: 0.82em;
    }

    .desktop-responsive-page
    #header-auth-zone > button {
        padding:
            5px
            7px !important;

        font-size: 0.68em;
    }

    .desktop-responsive-page
    #sidebar-left-content .stat-box,
    .desktop-responsive-page
    #sidebar-right-content .stat-box {
        padding: 10px;
    }

    .desktop-responsive-page
    .server-stat-row {
        gap: 6px;
    }

    /* -----------------------------------------------
       Accueil uniquement
       ----------------------------------------------- */

    .page-home .home-hero {
        padding:
            34px
            28px
            26px
            28px;
    }

    .page-home .home-title {
        margin-bottom: 16px;

        font-size: 1.82em;
    }

    .page-home .home-title-separator {
        margin-bottom: 20px;
    }

    .page-home .home-events-slot {
        padding:
            0
            8px
            10px
            8px;
    }

    .page-home
    .home-events-box.alpha-test-events-box {
        padding:
            9px
            11px
            11px
            11px;
    }

    /* -----------------------------------------------
       Personnages uniquement
       ----------------------------------------------- */

    .page-characters .characters-main {
        padding:
            16px
            14px;
    }

    .page-characters .characters-title {
        margin-bottom: 14px;

        font-size: 1.32em;
    }

    .page-characters .char-card {
        grid-template-columns:
            minmax(0, 1fr)
            205px;

        gap: 12px;

        padding:
            10px
            12px;
    }

    .page-characters .character-identity {
        gap: 10px;
    }

    .page-characters .character-card-side {
        padding-left: 12px;
    }

    .page-characters .character-resources,
    .page-characters .character-status-row {
        gap: 6px;
    }

    .page-characters .character-name {
        max-width: 220px;
    }
}

/* =======================================================
   ÉCRANS PEU HAUTS
   Exemple principal : 1366 × 768
   ======================================================= */

@media (max-height: 820px) {
    .desktop-responsive-page #main-layout {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .desktop-responsive-page
    #sidebar-left-content,
    .desktop-responsive-page
    #sidebar-right-content {
        gap: 10px;
    }

    .desktop-responsive-page
    .sidebar-server-box {
        flex-basis: 145px;
    }

    .desktop-responsive-page
    .sidebar-combat-box {
        flex-basis: 205px;
    }

    .desktop-responsive-page
    .sidebar-combat-log {
        max-height: 132px;
    }

    .desktop-responsive-page
    .sidebar-encyclopedia-box {
        flex:
            0
            0
            auto;

        min-height: 250px;
    }

    .desktop-responsive-page
    .sidebar-player-menu-box {
        flex:
            0
            0
            auto;

        min-height: 285px;
    }

    .desktop-responsive-page
    .sidebar-link-list.encyclopedia {
        gap: 6px;

        font-size: 0.94em;
    }

    .desktop-responsive-page
    .sidebar-link-list.player {
        gap: 5px;

        font-size: 0.92em;
    }

    /* -----------------------------------------------
       Accueil uniquement
       ----------------------------------------------- */

    .page-home .home-hero {
        min-height: 470px;

        padding-top: 26px;
        padding-bottom: 22px;
    }

    .page-home .home-title {
        margin-bottom: 13px;

        font-size: 1.68em;
    }

    .page-home .home-title-separator {
        margin-bottom: 17px;
    }

    /* -----------------------------------------------
       Personnages uniquement
       ----------------------------------------------- */

    .page-characters .characters-main {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .page-characters .characters-title {
        margin-bottom: 10px;

        font-size: 1.25em;
    }

    .page-characters #characters-grid {
        gap: 8px;
    }

    .page-characters .char-card {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .page-characters .character-summary-box {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .page-characters .character-turn-box {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .page-characters .btn-play {
        margin-top: 8px;

        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* =======================================================
   PAGE JEU — ADAPTATION PC ET ORDINATEURS PORTABLES

   Résolutions ciblées :
   - 1920 × 1080
   - 1600 × 900
   - 1536 × 864
   - 1366 × 768

   La carte conserve :
   - 850 px de largeur ;
   - les hexagones de 108 × 94 px ;
   - toutes les coordonnées internes existantes.
   ======================================================= */

body.page-game {
    --game-viewport-width: 850px;
}

/* =======================================================
   TROIS COLONNES PRINCIPALES
   ======================================================= */

.page-game #main-layout {
    align-items: stretch;
}

/*
 * Les deux colonnes suivent les mêmes largeurs
 * responsives que le bandeau supérieur :
 *
 * 280 px sur grand écran ;
 * 245 px sous 1600 px ;
 * 210 px sous 1440 px.
 */
.page-game #sidebar-left,
.page-game #sidebar-right {
    flex:
        0
        0
        var(--desktop-sidebar-width);

    width:
        var(--desktop-sidebar-width);

    min-width: 0;
    min-height: 0;

    height:
        min(
            900px,
            calc(100vh - 90px)
        );

    max-height:
        900px;

    box-sizing:
        border-box;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-gutter:
        stable;
}

/*
 * Les encadrés ne sont plus écrasés lorsque
 * la hauteur de l’écran devient insuffisante.
 * La colonne elle-même peut défiler.
 */
.page-game
#sidebar-left > .stat-box,
.page-game
#sidebar-right > .stat-box {
    flex:
        0
        0
        auto;

    min-width: 0;

    box-sizing:
        border-box;
}

/* =======================================================
   CARTE CENTRALE
   ======================================================= */

/*
 * La largeur reste exactement à 850 px.
 *
 * Seule la hauteur diminue selon l’écran.
 * Les hexagones et personnages ne sont pas redimensionnés.
 */
.page-game #game-viewport {
    flex:
        0
        0
        var(--game-viewport-width);

    width:
        var(--game-viewport-width);

    min-width:
        var(--game-viewport-width);

    max-width:
        var(--game-viewport-width);

    height:
        min(
            900px,
            calc(100vh - 90px)
        );

    min-height:
        0;

    max-height:
        900px;

    box-sizing:
        border-box;
}

/* =======================================================
   COLONNE GAUCHE
   ======================================================= */

.page-game #sidebar-left {
    gap: 12px;
}

.page-game #sidebar-left .stat-row-ui {
    gap: 8px;
}

.page-game #sidebar-left .stat-row-ui > span:first-child {
    min-width: 0;
}

.page-game #sidebar-left .stat-row-ui > span:last-child {
    flex-shrink: 0;
}

/* =======================================================
   COLONNE DROITE
   ======================================================= */

.page-game #sidebar-right {
    gap: 12px;
}

/* Informations de la cible */
.page-game .game-target-panel {
    flex:
        0
        0
        180px !important;

    width: 100%;

    height:
        180px !important;

    min-height:
        110px !important;

    max-height:
        180px !important;

    display:
        flex !important;

    flex-direction:
        column;

    overflow:
        hidden !important;
}

.page-game #target-info-content {
    min-height: 0;

    overflow-x:
        hidden;

    overflow-y:
        auto;
}

/* Panneau des actions */
.page-game .game-actions-panel {
    flex:
        1
        1
        auto !important;

    width: 100%;

    height:
        auto !important;

    min-height:
        0;

    max-height:
        none !important;

    display:
        flex !important;

    flex-direction:
        column;

    overflow:
        hidden !important;
}

.page-game .game-action-list {
    flex:
        1
        1
        auto;

    min-height:
        0;

    gap:
        10px;
}

/* Journal de combat */
.page-game .game-combat-log {
    flex:
        1
        1
        0;

    width: 100%;

    height:
        auto;

    min-height:
        110px;

    max-height:
        none;

    box-sizing:
        border-box;

    margin-top:
        5px;

    padding:
        10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        #000;

    border:
        1px solid #444;

    border-radius:
        4px;

    font-size:
        0.9em;

    line-height:
        1.5;

    text-align:
        center;
}

/* =======================================================
   MODE CRÉATEUR ADMINISTRATEUR
   ======================================================= */

/*
 * Le bouton est totalement absent pour les comptes normaux.
 * game.js retire la classe hidden uniquement pour l’admin.
 */
.page-game .creator-sidebar-toggle {
    position:
        fixed;

    top:
        68px;

    left:
        10px;

    z-index:
        5100;

    padding:
        8px
        12px;

    color:
        white;

    background:
        #8e44ad;

    border:
        1px solid #bb8fce;

    border-radius:
        5px;

    cursor:
        pointer;

    font-size:
        0.78em;

    box-shadow:
        0 0 12px
        rgba(142, 68, 173, 0.55);
}

/*
 * Le panneau est retiré de la grille principale.
 * Il ne réduit donc plus la largeur de la carte.
 */
.page-game .creator-sidebar {
    position:
        fixed;

    top:
        108px;

    bottom:
        10px;

    left:
        10px;

    z-index:
        5000;

    width:
        250px !important;

    height:
        auto !important;

    max-height:
        none;

    box-sizing:
        border-box;

    padding:
        15px;

    display:
        none !important;

    flex-direction:
        column;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        #0f0f0f;

    border:
        2px solid #8e44ad;

    border-radius:
        7px;

    box-shadow:
        0 0 22px
        rgba(0, 0, 0, 0.9);
}

.page-game .creator-sidebar.is-open {
    display:
        flex !important;
}

.page-game .creator-sidebar-close {
    width:
        100%;

    margin:
        0
        0
        12px
        0;

    padding:
        7px;

    color:
        white;

    background:
        #7a2a22;

    border:
        1px solid #e74c3c;

    border-radius:
        4px;

    cursor:
        pointer;
}

/* =======================================================
   PETITS ORDINATEURS PORTABLES
   Largeur maximale : 1439 px
   ======================================================= */

@media (max-width: 1439px) {
    .page-game #sidebar-left,
    .page-game #sidebar-right {
        gap: 9px;
    }

    .page-game
    #sidebar-left > .stat-box,
    .page-game
    #sidebar-right > .stat-box {
        padding:
            10px;
    }

    .page-game #sidebar-left .stat-row-ui {
        gap:
            5px;

        font-size:
            0.82em;
    }

    .page-game #next-turn-date {
        font-size:
            0.92em !important;
    }

    .page-game .action-item label {
        font-size:
            0.76em !important;
    }

    .page-game .creator-sidebar {
        width:
            230px !important;
    }
}

/* =======================================================
   ÉCRANS PEU HAUTS
   Exemple : 1366 × 768
   ======================================================= */

@media (max-height: 820px) {
    /*
     * Le bandeau fait 60 px et le conteneur principal
     * possède 8 px de marge en haut et en bas.
     */
    .page-game #sidebar-left,
    .page-game #sidebar-right,
    .page-game #game-viewport {
        height:
            calc(100vh - 76px);

        max-height:
            900px;
    }

    .page-game #sidebar-left,
    .page-game #sidebar-right {
        gap:
            8px;
    }

    /* Colonne gauche compacte */
    .page-game
    #sidebar-left > .stat-box {
        padding:
            9px;
    }

    .page-game
    #sidebar-left .stat-box h3 {
        margin-bottom:
            6px;

        padding-bottom:
            4px;
    }

    .page-game #character-selector-container {
        margin-bottom:
            8px !important;
    }

    .page-game #turn-display {
        margin-top:
            5px !important;

        padding:
            6px !important;
    }

    .page-game #sidebar-left hr {
        margin:
            8px
            0 !important;
    }

    .page-game #my-message-text {
        min-height:
            38px !important;

        max-height:
            48px;

        margin-bottom:
            4px !important;

        padding:
            5px 7px !important;

        overflow-y:
            auto;
    }

    .page-game #sidebar-left .stat-row-ui {
        margin:
            2px
            0;

        font-size:
            0.80em;
    }

    /* Informations cible plus compactes */
    .page-game .game-target-panel {
        flex-basis:
            125px !important;

        height:
            125px !important;

        min-height:
            110px !important;

        max-height:
            125px !important;

        padding:
            9px;
    }

    /* Actions compactes */
    .page-game .game-actions-panel {
        padding:
            9px;
    }

    .page-game
    .game-actions-panel > h3 {
        margin-bottom:
            6px;
    }

    .page-game .game-action-list {
        gap:
            6px;
    }

    .page-game
    .game-actions-panel .btn-action {
        margin-top:
            4px;

        padding:
            7px
            6px;
    }

    .page-game
    .game-actions-panel hr {
        margin:
            1px
            0 !important;
    }

    .page-game
    .game-actions-panel select {
        padding:
            3px !important;
    }

    .page-game .game-combat-log {
        flex:
            1
            1
            0;

        min-height:
            90px;

        max-height:
            none;

        padding:
            8px;

        font-size:
            0.82em;

        line-height:
            1.3;
    }

    .page-game .creator-sidebar-toggle {
        top:
            65px;
    }

    .page-game .creator-sidebar {
        top:
            101px;
    }
}