/* ============================================
   Bestiary / Encyclopédie
   ============================================ */
.bestiary-counter {
    text-align: center;
    margin-bottom: 1.2rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    color: var(--gold);
    letter-spacing: 0.5px;
}
.bestiary-counter span { color: var(--gold-light); }

/* Bestiary tabs */
.bestiary-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(var(--gold-rgb),0.15);
    padding-bottom: 0;
}
.bestiary-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
}
.bestiary-tab:hover { color: var(--gold); }
.bestiary-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.bestiary-tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.bestiary-tab-content { display: none; }
.bestiary-tab-content.active { display: block; }

/* Dragons grid (same sizing as sanctuary-grid) */
.bestiary-dragons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 8px 4px;
}

.bestiary-zones { display: flex; flex-direction: column; gap: 1.5rem; }

.bestiary-zone {
    /* Palette parchemin du registre du Gardien (au lieu du bleu nuit). */
    background: linear-gradient(135deg, #14100a 0%, #1c140d 100%);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.22);
    border-radius: 12px;
    overflow: hidden;
}
.bestiary-zone-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.08);
    border-bottom: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.18);
    cursor: pointer;
    transition: background 0.2s;
}
.bestiary-zone-header:hover { background: rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.14); }
.bestiary-zone-icon { width: 28px; height: 28px; object-fit: contain; }
.bestiary-zone-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    flex: 1;
}
.bestiary-zone-count {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.bestiary-zone-chevron {
    color: var(--text-secondary);
    transition: transform 0.3s;
    font-size: 0.8rem;
}
.bestiary-zone.open .bestiary-zone-chevron { transform: rotate(90deg); }

.bestiary-zone-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    padding: 1rem;
}
.bestiary-zone.open .bestiary-zone-grid { display: grid; }
/* Quand la zone est fermée, masquer aussi les sous-blocs de rareté
   (Équipement Gardien) sinon les titres "Fragile / Robuste / ..." restent visibles. */
.bestiary-zone:not(.open) .bestiary-rarity-block { display: none; }

.bestiary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.4rem;
    /* Palette parchemin du registre du Gardien (au lieu du bleu nuit). */
    background: linear-gradient(135deg, rgba(28, 22, 14, 0.8) 0%, rgba(18, 14, 9, 0.92) 100%);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.14);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.bestiary-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(var(--gold-rgb),0.05) 0%, transparent 70%);
    pointer-events: none;
}
.bestiary-card:hover {
    border-color: rgba(var(--gold-rgb),0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--black-rgb),0.3);
}
.bestiary-card.is-boss {
    border-color: rgba(var(--gold-rgb),0.3);
    background: linear-gradient(135deg, rgba(40,30,20,0.8) 0%, rgba(25,20,15,0.95) 100%);
}
.bestiary-card.is-boss::after {
    content: 'BOSS';
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(var(--gold-rgb),0.15);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.bestiary-card-sprite {
    width: 80px;
    height: 80px;
    image-rendering: auto;
}
.bestiary-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bestiary-card-element {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.65rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}
.bestiary-card-element img { width: 14px; height: 14px; }
.bestiary-card-tags {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    gap: 3px;
    z-index: 1;
}
.bestiary-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.bestiary-tag-owned {
    color: var(--bestiary-strength);
    background: rgba(68, 204, 136,0.15);
}
.bestiary-tag-killed {
    color: var(--error-warm);
    background: rgba(255, 102, 68,0.15);
}
.bestiary-tag-adult {
    color: var(--gold);
    background: rgba(var(--gold-rgb),0.15);
}

/* Bestiary section titles */
/* Dragon form label */
.bestiary-card-form {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: -2px;
}
.bestiary-card.is-adult .bestiary-card-form {
    color: var(--gold);
}
/* Dragon cards - same look as sanctuary cards */
.bestiary-card.is-dragon,
.bestiary-card.is-creature {
    padding: 0;
    border-radius: 14px;
    /* Bordure bronze chaude pour matcher le registre du Gardien (au lieu d'un blanc translucide qui tirait sur le bleu). */
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.18);
    /* Palette parchemin sombre, même base que .bestiary-dragon-card (modale). */
    background: linear-gradient(165deg, #14100a 0%, #1c140d 50%, #100c08 100%);
    gap: 0;
}
.bestiary-card.is-dragon::before,
.bestiary-card.is-creature::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),0.1) 0%, transparent 60%);
    opacity: 0.55;
}

.bestiary-card.is-dragon:hover,
.bestiary-card.is-creature:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.55);
    box-shadow: 0 8px 28px rgba(var(--black-rgb),0.5), 0 0 22px rgba(var(--gold-rgb),0.18);
}
.bestiary-card.is-dragon .bestiary-card-visual,
.bestiary-card.is-creature .bestiary-card-visual {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 8px;
}
.bestiary-card.is-dragon .bestiary-card-sprite {
    width: 140px;
    height: 140px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 10px rgba(var(--black-rgb),0.6));
    transition: transform 0.25s ease;
}
.bestiary-card.is-creature .bestiary-card-sprite {
    width: 110px;
    height: 110px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 10px rgba(var(--black-rgb),0.6));
    transition: transform 0.25s ease;
}
.bestiary-card.is-dragon:hover .bestiary-card-sprite,
.bestiary-card.is-creature:hover .bestiary-card-sprite {
    transform: scale(1.08);
}
.bestiary-card.is-dragon .bestiary-card-name,
.bestiary-card.is-creature .bestiary-card-name {
    font-size: 1.05rem;
    text-shadow: 0 1px 4px rgba(var(--black-rgb),0.5);
    padding: 0 14px;
}
/* Créatures : pas d'élément en dessous, on rajoute du padding-bottom au name. */
.bestiary-card.is-creature .bestiary-card-name {
    padding-bottom: 14px;
}
.bestiary-card.is-dragon .bestiary-card-form {
    font-size: 0.65rem;
    margin-top: 2px;
}
.bestiary-card.is-dragon .bestiary-card-element {
    font-size: 0.75rem;
    margin-top: 2px;
    padding: 0 14px 6px;
}
.bestiary-card.is-dragon .bestiary-card-element img { width: 14px; height: 14px; }
.bestiary-card.is-dragon .bestiary-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    background: rgba(var(--black-rgb),0.25);
    
    z-index: 1;
}
.bestiary-card.is-dragon .bestiary-card-stats .bstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-lb-alt);
    padding: 3px 0;
    border-radius: 6px;
    transition: background 0.15s;
}
.bestiary-card.is-dragon .bestiary-card-stats .bstat:hover {
    background: rgba(var(--white-rgb),0.04);
}
.bestiary-card.is-dragon .bestiary-card-stats .bstat img {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}
.bestiary-card.is-dragon .bestiary-card-tags {
    top: 10px;
    left: 10px;
}

/* Adulte variant */
.bestiary-card.is-adult {
    border-color: rgba(var(--gold-rgb),0.25);
    background: linear-gradient(165deg, rgba(25,22,15,0.95) 0%, rgba(18,16,12,0.95) 50%, rgba(10,10,8,0.95) 100%);
}
.bestiary-card.is-adult::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),0.15) 0%, transparent 60%);
    opacity: 0.15;
}
.bestiary-card.is-adult::after {
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.5) 30%, rgba(var(--gold-rgb),0.5) 70%, transparent);
}

/* Bestiary undiscovered card */
.bestiary-undiscovered {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
}
.bestiary-undiscovered .bestiary-card-name,
.bestiary-undiscovered .bestiary-card-element,
.bestiary-undiscovered .bestiary-card-form {
    color: var(--gray-700) !important;
}
.bestiary-sprite-unknown {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-800);
    font-size: 2rem;
    font-family: 'Cinzel', serif;
}

/* Bestiary detail modal overlay */
.bestiary-detail {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--black-rgb),0.7);
    backdrop-filter: blur(4px);
}
.bestiary-detail-card {
    /* Palette parchemin du registre du Gardien (alignée sur .bestiary-dragon-card). */
    background:
        radial-gradient(ellipse at top right, rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.12), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.06), transparent 65%),
        linear-gradient(135deg, #14100a 0%, #211810 50%, #14100a 100%);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.35);
    box-shadow: 0 12px 36px rgba(var(--black-rgb), 0.6), 0 0 0 1px rgba(var(--gold-rgb), 0.08) inset;
    border-radius: 14px;
    padding: 1.5rem;
    /* Largeur unifiée pour TOUTES les modales du bestiaire (monstre, écaille,
       essence, bosspart, cristal, gants, bottes, harpon, œuf, potion, dragon).
       Alignée sur la modale dragon qui est la plus large. La hauteur s'adapte
       au contenu (pas de min-height pour éviter le vide vertical sur les
       petites modales). */
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
}
.bestiary-detail-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
}
.bestiary-detail-close:hover { color: var(--gold); }
.bestiary-detail-sprite {
    width: 128px;
    height: 128px;
    margin: 0 auto 0.8rem;
    image-rendering: auto;
}
.bestiary-detail-name {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.3rem;
}
.bestiary-detail-elem {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.bestiary-detail-elem img { width: 16px; height: 16px; }
.bestiary-detail-desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.82rem;
    color: var(--text-tower);
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.bestiary-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
.bestiary-detail-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: var(--text-main);
}
.bestiary-detail-stat img { width: 18px; height: 18px; }
.bestiary-detail-stat span { color: var(--text-secondary); font-size: 0.75rem; font-family: 'Roboto Condensed', sans-serif; }

/* Scale cards (Encyclopedie → onglet Écailles) */
.bestiary-card.is-scale {
    border-color: rgba(var(--gold-rgb), 0.2);
}
.bestiary-card.is-scale:not(.bestiary-undiscovered) {
    border-color: var(--scale-tier-color, rgba(var(--gold-rgb), 0.5));
    box-shadow: 0 0 0 1px var(--scale-tier-color, transparent) inset;
}
.bestiary-card.is-scale:not(.bestiary-undiscovered):hover {
    box-shadow: 0 0 12px var(--scale-tier-color, rgba(var(--gold-rgb), 0.4)),
                0 0 0 1px var(--scale-tier-color, transparent) inset;
    transform: translateY(-2px);
}
.bestiary-card-scale-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    image-rendering: auto;
    margin: 0.2rem auto;
    display: block;
}
.bestiary-card.is-scale .bestiary-card-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Scale detail modal */
.bestiary-detail-card.bestiary-detail-scale {
    border-color: var(--scale-tier-color, rgba(var(--gold-rgb), 0.3));
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--scale-tier-color, transparent) inset;
}
.bestiary-detail-scale-img {
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--scale-tier-color, transparent));
}
.bestiary-detail-scale-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    margin: 0.3rem 0 0.8rem;
    background: rgba(var(--gold-rgb), 0.06);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
}
.bestiary-detail-scale-stat img { width: 22px; height: 22px; }
.bestiary-detail-scale-stat .bstat-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex: 1;
    text-align: left;
}
.bestiary-detail-scale-stat .bstat-range {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--scale-tier-color, var(--text-main));
    font-weight: 600;
}
.bestiary-detail-scale-proc {
    padding: 0.7rem 0.9rem;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px dashed rgba(var(--gold-rgb), 0.28);
    border-radius: 8px;
    text-align: left;
}
.bestiary-proc-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--gold);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bestiary-proc-title span {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--scale-tier-color, var(--gold));
    font-weight: 600;
}
.bestiary-proc-desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.8rem;
    color: var(--text-main);
    line-height: 1.35;
}
.bestiary-detail-scale-proc--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.8rem;
    flex-wrap: wrap;
}
.bestiary-detail-scale-proc--row .bestiary-proc-title {
    margin-bottom: 0;
    justify-content: flex-start;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}
.bestiary-detail-scale-proc--row .bestiary-proc-desc {
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================================
   MODALE UNIFIÉE BESTIAIRE
   Layout 2 colonnes : sprite à gauche (220x220), infos à droite (nom + meta
   + description + sections). Réutilise les classes .bestiary-dragon-*.
   ============================================================================ */
/* Border + glow teintés par la rareté courante, pour TOUS les types (dragon,
   monstre, écaille, essence…). La couleur est portée par la CSS var
   --scale-tier-color injectée au render. */
.bestiary-detail-card.bestiary-detail-uni {
    border-color: var(--scale-tier-color, rgba(var(--gold-rgb), 0.3));
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.55),
                0 0 0 1px var(--scale-tier-color, transparent) inset;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Canvas animé (sprites monstre / dragon / œuf) : pixelated comme la modale
   dragon, taille pleine du sprite-wrap. */
.bestiary-detail-uni canvas.bestiary-uni-sprite {
    width: 220px;
    height: 220px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}
/* Image statique (écaille / essence / bosspart / cristal / gardien) : contain
   + drop-shadow teintée par la couleur tier. */
.bestiary-detail-uni img.bestiary-uni-sprite {
    width: 200px;
    height: 200px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 14px var(--scale-tier-color, rgba(0, 0, 0, 0.5)));
}
.bestiary-detail-uni .bestiary-sprite-unknown {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
}
/* Description (lore BDD en blanc) + utility (gameplay en italique gris) */
.bestiary-detail-uni .bestiary-uni-desc {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.bestiary-detail-uni .bestiary-uni-desc-lore {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.9rem;
    color: var(--text-main);
    font-style: italic;
    line-height: 1.45;
}
.bestiary-detail-uni .bestiary-uni-desc-utility {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
    opacity: 0.85;
}

/* Ligne sélecteurs (rareté) — placée sous le header avant les slots */
.bestiary-detail-uni .bestiary-uni-selector-row {
    margin-top: 0;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(var(--gold-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.12);
}

/* Slot stats : grid 4 cols (PV/ATQ/DEF/VIT) OU contenu adaptatif */
.bestiary-detail-uni .bestiary-uni-stats-slot:empty,
.bestiary-detail-uni .bestiary-uni-effects-slot:empty {
    display: none;
}
.bestiary-detail-uni .bestiary-uni-stats-slot {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}
.bestiary-detail-uni .bestiary-uni-stats-slot .bestiary-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.bestiary-detail-uni .bestiary-uni-stats-slot .bestiary-detail-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 8px;
}
.bestiary-detail-uni .bestiary-uni-stats-slot .bestiary-detail-stat img {
    width: 22px; height: 22px; flex-shrink: 0;
}
.bestiary-detail-uni .bestiary-uni-stats-slot .bestiary-detail-stat span {
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.bestiary-detail-uni .bestiary-uni-stats-slot .bestiary-detail-stat b {
    margin-left: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--gold-text-warm);
}

/* Slot effet (proc / phases / compétences / etc.) */
.bestiary-detail-uni .bestiary-uni-effects-slot {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Pool de stats (Équipement Gardien : modale gants/bottes) */
.bestiary-detail-pool {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0.6rem 0 0.4rem;
}

/* --- Stat principale : encart teinté tier, plus grand, mis en avant --- */
.bestiary-pool-primary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.85rem 1rem;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--scale-tier-color, var(--gold)) 18%, transparent), transparent 70%),
        color-mix(in srgb, var(--scale-tier-color, var(--gold)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--scale-tier-color, var(--gold)) 55%, transparent);
    border-radius: 10px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--scale-tier-color, var(--gold)) 18%, transparent);
}
.bestiary-pool-primary-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bestiary-pool-primary-row img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--scale-tier-color, var(--gold)) 60%, transparent));
}
.bestiary-pool-primary-label {
    flex: 1;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-main);
}
.bestiary-pool-primary-range {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--scale-tier-color, var(--gold));
    text-shadow: 0 0 6px color-mix(in srgb, var(--scale-tier-color, var(--gold)) 40%, transparent);
}
/* Hint d'activation conditionnelle (bottes : actif si dragon de l'élément). */
.bestiary-pool-primary-hint {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-secondary);
    text-align: left;
    line-height: 1.3;
    margin-top: 4px;
    padding-left: 40px; /* aligné sous le label, après l'icône 28px + gap 12px */
}

/* --- Bonus secondaires : un seul cadre compact avec 3 lignes discrètes --- */
.bestiary-pool-secondary {
    padding: 0.65rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.18);
    border-radius: 8px;
}
.bestiary-pool-secondary-title {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--reg-bronze, #cd7f32);
    margin-bottom: 6px;
    text-align: left;
    opacity: 0.85;
}
.bestiary-pool-secondary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.bestiary-pool-secondary-row img {
    width: 16px;
    height: 16px;
    opacity: 0.75;
}
.bestiary-pool-secondary-label {
    flex: 1;
    text-align: left;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.bestiary-pool-secondary-range {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    color: var(--text-main);
    font-weight: 600;
}

/* Phases de charge du Cristal (Brut / Affiné / Pur) sous la stat primaire. */
.bestiary-crystal-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}
.bestiary-crystal-phase {
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.18);
    border-radius: 8px;
    text-align: center;
}
.bestiary-crystal-phase-name {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--scale-tier-color, var(--gold));
    margin-bottom: 2px;
}
.bestiary-crystal-phase-range {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .market-tabs { gap: 2px; }
    .market-tab { padding: 8px 12px; font-size: 0.78rem; }
    .sanctuary-tabs { gap: 2px; }
    .sanctuary-tab { padding: 8px 12px; font-size: 0.78rem; }
    .pvp-tabs { gap: 2px; }
    .pvp-tab { padding: 8px 12px; font-size: 0.78rem; }
    .mkt-col-seller, .mkt-col-bonus, .mkt-col-other { display: none; }
    .mkt-col-item { flex: 2; }
    .mkt-col-elem { flex: 0.6; }
    .mkt-row { padding: 0.45rem 0.5rem; }
    .mkt-th { font-size: 0.6rem; }
    .mkt-icon { width: 22px; height: 22px; }
    .mkt-icon.egg-sprite-frame > i { transform: scale(0.171875); } /* 22/128 */
    .bestiary-zone-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.4rem; padding: 0.6rem; }
    .bestiary-dragons-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
    .bestiary-card.is-dragon .bestiary-card-sprite { width: 110px; height: 110px; }
    .bestiary-card-sprite { width: 64px; height: 64px; }
    .bestiary-card-name { font-size: 0.65rem; }
    .bestiary-tab { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
}

/* ============================================
   MASTERY - Arbre de maitrise d'espece
   ============================================ */

.panel-mastery {
    padding: 1.5rem;
}
.mastery-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1.2rem;
}
.mastery-subtitle {
    color: var(--text-tower);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    margin: 0;
    text-align: left;
    flex: 1;
}
.mastery-filter-toggle {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Quand le filtre est actif, on cache les especes verrouillees du carrousel. */
.mastery-species-scroll.filter-owned .mastery-card-locked {
    display: none;
}
@media (max-width: 768px) {
    .mastery-subtitle-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .mastery-subtitle {
        text-align: center;
    }
    .mastery-filter-toggle {
        align-self: center;
    }
}

/* --- Carrousel especes --- */
.mastery-species-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 12px 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gold-rgb), 0.45) transparent;
    /* `safe center` : centre quand le contenu rentre, bascule en flex-start
       sinon -> evite que la 1re carte soit coupee et inaccessible au scroll
       sur ecran etroit (PC portable ~1280-1366px avec 10+ especes). */
    justify-content: safe center;
}
.mastery-species-scroll::-webkit-scrollbar { height: 6px; }
.mastery-species-scroll::-webkit-scrollbar-track { background: transparent; }
.mastery-species-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.35);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.mastery-species-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--gold-rgb), 0.55);
    background-clip: padding-box;
}

.mastery-species-card {
    flex: 0 0 140px;
    scroll-snap-align: center;
    background: linear-gradient(180deg, rgba(var(--gold-rgb),0.06), rgba(var(--bg-body-rgb),0.9));
    border: 1px solid rgba(var(--gold-rgb),0.15);
    border-radius: 12px;
    padding: 12px 8px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mastery-species-card:hover {
    border-color: rgba(var(--gold-rgb),0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--gold-rgb),0.15);
}
.mastery-species-card.mastery-card-active {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(var(--gold-rgb),0.3), inset 0 0 30px rgba(var(--gold-rgb),0.05);
}

/* Locked species - silhouette noire + cadenas */
.mastery-species-card.mastery-card-locked {
    cursor: not-allowed;
}
.mastery-species-card.mastery-card-locked .mastery-card-sprite {
    filter: brightness(0) saturate(0);
}
.mastery-species-card.mastery-card-locked .mastery-card-portrait {
    border-color: rgba(60,60,80,0.4) !important;
}
.mastery-species-card.mastery-card-locked .mastery-card-glow {
    display: none;
}
.mastery-card-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--black-rgb),0.35);
    border-radius: 50%;
}
.mastery-card-lock img {
    width: 28px;
    height: 28px;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px rgba(var(--black-rgb),0.6));
}
.mastery-species-card.mastery-card-locked:hover {
    transform: none;
    border-color: rgba(var(--gold-rgb),0.15);
    box-shadow: none;
}

.mastery-card-portrait {
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 2px solid;
    overflow: hidden;
    position: relative;
    background: rgba(var(--black-rgb),0.3);
}
.mastery-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.mastery-card-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    image-rendering: auto;
}
.mastery-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mastery-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 600;
}
.mastery-card-elem {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mastery-card-level {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--gold);
}
.mastery-card-xp-bar {
    height: 3px;
    background: rgba(var(--white-rgb),0.05);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.mastery-card-xp-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.mastery-card-xp-text {
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 2px;
    display: block;
    text-align: center;
}

/* --- Header mastery (XP + points) --- */
.mastery-header {
    margin: 12px 0;
}
.mastery-header {
    display: flex;
    justify-content: center;
}
.mastery-points-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--gold-rgb),0.06);
    border: 1px solid rgba(var(--gold-rgb),0.15);
    border-radius: 8px;
    padding: 8px 18px;
}
.mastery-points-icon {
    font-size: 1.3rem;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb),0.5);
}
.mastery-points-value {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    color: var(--gold-text-warm);
    font-weight: 700;
    transition: all 0.3s ease;
}
.mastery-points-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: var(--text-brown);
    letter-spacing: 0.3px;
}
.mastery-points-glow {
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(var(--gold-rgb),0.6);
}

/* --- Arbre V2 (refonte 2026-05-20) : grille 5x5 + set selector --- */
.mastery-tree-wrap {
    margin-top: 12px;
}

/* Set selector : 3 boutons cote a cote (Set 1/2/3). Le set actif est
   highlight, les sets verrouilles affichent leur cout en cendres. */
/* Set selector : place en colonne centrale du grid header (cf
   .mastery-modal-header). Centre absolument dans la modale grace a la
   structure 1fr auto 1fr. */
.mastery-set-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    justify-self: center;
}
.mastery-set-btn {
    position: relative;
    flex: 0 0 140px;
    background: rgba(var(--black-rgb),0.25);
    border: 1px solid rgba(var(--gold-rgb),0.2);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Cinzel', serif;
}
.mastery-set-btn:hover {
    background: rgba(var(--gold-rgb),0.08);
    border-color: rgba(var(--gold-rgb),0.45);
}
.mastery-set-btn.mastery-set-active {
    background: rgba(var(--gold-rgb),0.15);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb),0.25);
}
.mastery-set-btn.mastery-set-locked {
    opacity: 0.85;
}
/* Row label : prend toute la largeur du bouton de set pour que justify-center
   place le nom au centre exact du cadre. Le bouton crayon en absolute
   top-right est hors flow, donc ne decentre pas. */
.mastery-set-label-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.mastery-set-label {
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Bouton crayon : position absolute top-right du bouton de set, sort du
   flow pour preserver le centrage du label. Cache par defaut, apparait au
   hover du bouton de set parent (ou au focus clavier pour a11y). */
.mastery-set-rename-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: linear-gradient(160deg, rgba(var(--bg-body-rgb), 0.65), rgba(var(--bg-body-rgb), 0.4));
    color: var(--text-secondary-blue);
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    font-size: 0.7rem;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.mastery-set-btn:hover .mastery-set-rename-btn,
.mastery-set-rename-btn:focus-visible {
    opacity: 0.85;
    pointer-events: auto;
}
.mastery-set-rename-btn:hover {
    opacity: 1;
    color: var(--gold-light, var(--gold));
    border-color: rgba(var(--gold-rgb), 0.7);
    background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.16), rgba(var(--bg-body-rgb), 0.5));
    transform: translateY(-1px);
}
.mastery-set-rename-btn:active { transform: translateY(0); }
.mastery-set-sublabel {
    font-size: 0.7rem;
    color: var(--text-tower);
}
.mastery-set-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-main);
}
.mastery-set-cost img {
    width: 12px;
    height: 12px;
}
.mastery-set-status-active {
    color: var(--gold-light);
    font-weight: 600;
}

/* --- Modale Maitrise (refonte 2026-05-20) : fullscreen overlay ouvert au
   clic sur une carte d'espece. Reuse les classes mastery-tree, mastery-set-*
   et mastery-respec-* a l'interieur du body de la modale. --- */
.mastery-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(var(--black-rgb),0.65);
    display: none;
    align-items: center;
    justify-content: center;
    animation: masteryFadeIn 0.2s ease;
}
@keyframes masteryFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mastery-modal {
    /* Theme par element : background gradients radiaux teintes + bordure
       coloree par l'element de l'espece (mirror du pattern sanct-detail-view).
       Fallback or si pas de theme applique. */
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(var(--bg-body-rgb), 0.96), rgba(var(--black-rgb), 0.93));
    border: 1px solid var(--element-color, rgba(var(--gold-rgb), 0.5));
    border-radius: 14px;
    width: min(1200px, 95vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--element-rgb, var(--gold-rgb)), 0.18) inset,
        0 0 32px rgba(var(--element-rgb, 0, 0, 0), 0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Titre dans le header : leger glow teinte par l'element pour ressortir. */
.mastery-modal.element-theme-fire .mastery-modal-title,
.mastery-modal.element-theme-water .mastery-modal-title,
.mastery-modal.element-theme-eau .mastery-modal-title,
.mastery-modal.element-theme-earth .mastery-modal-title,
.mastery-modal.element-theme-lightning .mastery-modal-title,
.mastery-modal.element-theme-wind .mastery-modal-title,
.mastery-modal.element-theme-tenebres .mastery-modal-title,
.mastery-modal.element-theme-glace .mastery-modal-title,
.mastery-modal.element-theme-plante .mastery-modal-title,
.mastery-modal.element-theme-explosion .mastery-modal-title,
.mastery-modal.element-theme-boue .mastery-modal-title {
    text-shadow: 0 0 12px rgba(var(--element-rgb, var(--gold-rgb)), 0.4);
}
/* Header unifie : 3 colonnes grid pour que les sets restent CENTRES
   absolument peu importe la largeur des groupes gauche (sprite+titre)
   et droite (points+respec+close). 1fr | auto | 1fr garantit que le
   centre est aligne au centre de la modale. */
.mastery-modal-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
}
.mastery-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    min-width: 0;
}
.mastery-modal-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    min-width: 0;
}
/* Sprite header : portrait anime de l'espece, position top-left de la
   modale. Bordure colore par l'element (copie depuis la mastery-card
   selectionnee). Glow radial derriere le canvas pour ressortir. */
.mastery-modal-sprite-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.mastery-modal-sprite-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.mastery-modal-sprite {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(var(--gold-rgb), 0.5);
    background: rgba(var(--black-rgb), 0.35);
    display: block;
}
/* Bloc identite : nom de l'espece + compteur de points dispo empile sous
   le titre. Place a droite du sprite, allege la zone droite du header. */
.mastery-modal-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.mastery-modal-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.1;
}
.mastery-modal-identity .mastery-points-display {
    font-size: 0.8rem;
    padding: 3px 10px;
    gap: 6px;
}
.mastery-modal-close {
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb),0.3);
    color: var(--gold);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s;
}
.mastery-modal-close:hover {
    background: rgba(var(--gold-rgb),0.15);
    border-color: var(--gold);
}
.mastery-modal-body {
    /* padding-bottom 80px reserve la place de la barre pending flottante
       (cf. .mastery-pending-actions en position absolute). Constant pour
       eviter tout decalage de l'arbre a l'apparition/disparition de la
       barre. Quand barre cachee, simple espace blanc en bas (acceptable). */
    padding: 16px 20px 80px;
    overflow-y: auto;
    flex: 1;
    position: relative;
}

/* Layout unifie : 1 seul conteneur CSS Grid (6 colonnes : labels + 5 arbres).
   - 6 colonnes : col 1 = labels L1..L5, col 2..6 = arbres dans l'ordre
     hp / atk / def / spd / crit.
   - 6 lignes : row 1 = titres des arbres, row 2..6 = tiers 1..5.
   - Chaque element (label, titre, noeud) est positionne EXPLICITEMENT via
     style.gridRow + style.gridColumn injecte par renderTree (mastery.js).
     Plus fiable que l'auto-flow avec display:contents qui produisait des
     placements ambigus pour les labels (cadenas decales).
   - grid-template-rows: auto + repeat(5, 1fr) synchronise toutes les rangees
     a la meme hauteur (= max contenu de la rangee, fini les decalages quand
     une description fait 2 lignes).
   - Les .mastery-row-overlay (1 par tier) couvrent toute la largeur (grid-
     column 1 / -1), restent en arriere-plan z-index 0, fournissent le fond
     des rangees debloquees et les separateurs horizontaux dashed entre tiers. */
.mastery-tree {
    display: grid;
    grid-template-columns: 56px repeat(5, minmax(0, 1fr));
    grid-template-rows: auto repeat(5, minmax(0, 1fr));
    column-gap: 6px;
    background: linear-gradient(180deg, rgba(var(--white-rgb),0.02), rgba(var(--black-rgb),0.18));
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-radius: 12px;
    padding: 14px 12px;
    isolation: isolate;
}
/* Overlay de rangee : juste un fond subtil pour distinguer les rangees
   debloquees, pas de separateur horizontal (visuel epure). Place
   explicitement via grid-column 1 / -1 et grid-row par data-tier. */
.mastery-row-overlay {
    grid-column: 1 / -1;
    pointer-events: none;
    z-index: 0;
    transition: background-color 0.25s ease;
    border-radius: 6px;
}
.mastery-row-overlay[data-tier="1"] { grid-row: 2; }
.mastery-row-overlay[data-tier="2"] { grid-row: 3; }
.mastery-row-overlay[data-tier="3"] { grid-row: 4; }
.mastery-row-overlay[data-tier="4"] { grid-row: 5; }
.mastery-row-overlay[data-tier="5"] { grid-row: 6; }
.mastery-row-overlay[data-unlocked="true"] {
    background: rgba(var(--gold-rgb), 0.045);
}
.mastery-branch-title {
    grid-row: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: var(--tree-color, var(--gold));
    text-align: center;
    margin: 0 4px 10px;
    padding: 4px 2px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
    /* Contour noir multi-direction + leger glow de la couleur d'arbre pour
       faire ressortir le titre sans alourdir : effet "estampille" subtil. */
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.75),
         1px -1px 0 rgba(0, 0, 0, 0.75),
        -1px  1px 0 rgba(0, 0, 0, 0.75),
         1px  1px 0 rgba(0, 0, 0, 0.75),
         0 0 10px color-mix(in srgb, var(--tree-color, var(--gold)) 35%, transparent);
}

/* Colonne labels (col 1 de la grille) : spacer en tete + 5 labels L1..L5.
   La hauteur de chaque label est synchronisee avec la rangee correspondante
   par la grille parent (rows : auto + 5 x 1fr). Plus de min-height fige. */
.mastery-tier-spacer {
    grid-row: 1;
}
.mastery-tier-label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
}
.mastery-tier-label.mastery-tier-locked {
    opacity: 0.6;
}
.mastery-tier-lock {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    opacity: 0.85;
}
.mastery-tier-label.mastery-tier-locked .mastery-tier-lock {
    color: var(--text-tower);
}
.mastery-tier-gating {
    font-size: 0.7rem;
    color: var(--gold);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600;
}
.mastery-tier-label.mastery-tier-locked .mastery-tier-gating {
    color: var(--text-tower);
    font-weight: 400;
}

/* mastery-node-lock-hint retire (info portee par la colonne L1..L5 a gauche) */
.mastery-node-lock-hint { display: none; }

/* --- Node : layout horizontal classique (icone gauche + info droite).
   Plus de min-height ici : c'est la grille parent (5 rows 1fr) qui
   synchronise toutes les hauteurs de la meme rangee horizontale. */
.mastery-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 3px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    background: rgba(var(--black-rgb),0.18);
    text-align: left;
}
.mastery-node:hover {
    background: rgba(var(--gold-rgb),0.08);
    border-color: rgba(var(--gold-rgb),0.2);
}

/* States */
.mastery-node-locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}
.mastery-node-locked:hover {
    background: rgba(var(--black-rgb),0.15);
    border-color: transparent;
}
/* Ligne entiere verrouillee (gating cumulatif pas atteint) */
.mastery-node-line-locked {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.8);
}
.mastery-node-line-locked:hover {
    background: rgba(var(--black-rgb),0.15);
    border-color: transparent;
}
.mastery-node-available {
    border-color: color-mix(in srgb, var(--tree-color, var(--gold)) 40%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tree-color, var(--gold)) 12%, transparent);
}
.mastery-node-available:hover {
    border-color: var(--tree-color, var(--gold));
    box-shadow: 0 0 15px color-mix(in srgb, var(--tree-color, var(--gold)) 25%, transparent);
}
.mastery-node-partial {
    border-color: color-mix(in srgb, var(--tree-color, var(--gold)) 20%, transparent);
}
.mastery-node-maxed {
    border-color: var(--tree-color, var(--gold));
    box-shadow: 0 0 12px color-mix(in srgb, var(--tree-color, var(--gold)) 30%, transparent),
                inset 0 0 20px color-mix(in srgb, var(--tree-color, var(--gold)) 8%, transparent);
}

/* Icon */
.mastery-node-icon-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--tree-color, var(--gold)) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: rgba(var(--black-rgb),0.3);
    transition: border-color 0.3s ease;
}
.mastery-node-maxed .mastery-node-icon-wrap {
    border-color: var(--tree-color, var(--gold));
}
.mastery-node-icon {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
}
.mastery-node-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tree-color, var(--gold)) 25%, transparent);
}

/* Info : empile a droite de l'icone (texte aligne a gauche). */
.mastery-node-info {
    flex: 1;
    min-width: 0;
}
.mastery-node-name {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.15;
}
.mastery-node-desc {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.62rem;
    color: var(--text-tower);
    line-height: 1.25;
    margin-top: 2px;
}

/* Rank dots */
.mastery-rank-dots {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.mastery-rank-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb),0.12);
    border: 1px solid rgba(var(--gold-rgb),0.2);
    transition: all 0.3s ease;
}
.mastery-rank-filled {
    background: var(--dot-color, var(--gold));
    border-color: var(--dot-color, var(--gold));
    box-shadow: 0 0 6px color-mix(in srgb, var(--dot-color, var(--gold)) 50%, transparent);
}

/* Pulse animation on upgrade */
.mastery-node-pulse {
    animation: masteryPulse 0.6s ease;
}
@keyframes masteryPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); box-shadow: 0 0 25px rgba(var(--gold-rgb),0.4); }
    100% { transform: scale(1); }
}

/* --- Pending allocation : node "investi" en brouillon (pas encore valide
   en BDD). Aura jaune pulsante pour signaler clairement le statut temporaire.
   Pose via JS dans applyPendingAndRender (classe .mastery-node-pending). */
.mastery-node-pending {
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.35);
    animation: masteryPendingGlow 1.8s ease-in-out infinite;
}
@keyframes masteryPendingGlow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.45),
            0 0 14px rgba(255, 215, 0, 0.28);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.75),
            0 0 24px rgba(255, 215, 0, 0.55);
    }
}

/* --- Pending actions : barre flottante en bas de la modale Maitrise.
   Position absolute pour ne PAS pousser l'arbre vers le haut quand
   elle apparait/disparait. Reste dans le flow visuel (par-dessus le bas
   de l'arbre) mais sans decaler l'UI. Apparait/masquee via data-visible. */
.mastery-pending-actions {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(35, 28, 12, 0.96), rgba(20, 16, 8, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 10px;
    box-shadow:
        0 -4px 18px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 215, 0, 0.18);
    backdrop-filter: blur(4px);
    z-index: 10;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mastery-pending-actions[data-visible="false"] {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}
.mastery-pending-info {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    color: #ffd700;
    letter-spacing: 0.5px;
}
.mastery-pending-info > span {
    font-weight: 700;
    margin-right: 4px;
}
.mastery-pending-buttons {
    display: inline-flex;
    gap: 10px;
}
.mastery-pending-validate,
.mastery-pending-cancel {
    padding: 8px 18px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mastery-pending-validate {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.20), rgba(255, 215, 0, 0.06));
    border: 1px solid rgba(255, 215, 0, 0.6);
    color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.28);
}
.mastery-pending-validate:hover:not(:disabled) {
    border-color: rgba(255, 215, 0, 0.95);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.30), rgba(255, 215, 0, 0.10));
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.50);
}
.mastery-pending-validate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mastery-pending-cancel {
    background: transparent;
    border: 1px solid rgba(var(--white-rgb), 0.25);
    color: var(--text-secondary);
}
.mastery-pending-cancel:hover {
    border-color: rgba(var(--error-rgb), 0.55);
    color: var(--error);
    background: rgba(var(--error-rgb), 0.08);
}

/* --- Respec : place dans .mastery-modal-header-right (a cote des points
   et du close). visibility: hidden via dataset.applicable (cf JS
   renderRespec) tant qu'aucun point n'a ete pose : le bouton garde sa
   place dans le flex mais reste invisible. */
.mastery-respec-row {
    display: inline-flex;
    align-items: center;
}
.mastery-respec-row[data-applicable="false"] .mastery-respec-btn {
    visibility: hidden;
}
.mastery-respec-btn {
    font-size: 0.8rem;
    padding: 8px 20px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

/* --- Responsive --- */
/* Laptop / petit desktop : reduit la taille des cartes pour que le carrousel
   reste lisible sans scroll horizontal force. 10 cartes x 140px depassait
   les 1280-1366px courants. */
@media (max-width: 1400px) {
    .mastery-species-card {
        flex: 0 0 124px;
        padding: 10px 6px 8px;
    }
    .mastery-card-portrait {
        width: 70px;
        height: 70px;
    }
    .mastery-card-name {
        font-size: 0.82rem;
    }
    .mastery-card-elem {
        font-size: 0.62rem;
        letter-spacing: 0.6px;
    }
    .mastery-card-level {
        font-size: 0.7rem;
    }
}
@media (max-width: 1100px) {
    .mastery-species-card {
        flex: 0 0 108px;
    }
    .mastery-card-portrait {
        width: 60px;
        height: 60px;
    }
}
@media (max-width: 768px) {
    /* Sur mobile : 5 colonnes ne tiennent pas, on bascule en stack vertical.
       Annule le display:contents + grid auto-flow pour empiler les branches
       en flex column comme avant. Les overlays de rangee ne sont plus
       pertinents en mode mobile (rangees brisees), on les masque. */
    .mastery-tree {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;
        grid-template-rows: none;
    }
    .mastery-tier-labels {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 8px 0;
    }
    .mastery-tier-spacer { display: none; }
    .mastery-branch {
        display: flex;
        flex-direction: column;
        background: rgba(var(--black-rgb), 0.15);
        border: 1px solid color-mix(in srgb, var(--tree-color, var(--gold)) 22%, transparent);
        border-radius: 10px;
        padding: 8px;
        margin-bottom: 8px;
        max-width: 100%;
        width: 100%;
    }
    .mastery-row-overlay { display: none; }
    .mastery-branch-title { border-bottom: none; margin-bottom: 8px; }
    .mastery-set-btn {
        flex: 0 0 100px;
        padding: 6px 8px;
    }
    .mastery-set-label {
        font-size: 0.75rem;
    }
    .mastery-species-card {
        flex: 0 0 96px;
        padding: 8px 4px 6px;
    }
    .mastery-card-portrait {
        width: 52px;
        height: 52px;
    }
    .mastery-card-name {
        font-size: 0.75rem;
    }
    .mastery-card-xp-text {
        font-size: 0.6rem;
    }
}

/* ============================================
   Settings Modal
   ============================================ */
.header-settings-btn {
    position: relative;
    cursor: pointer;
    background: rgba(var(--gold-rgb),0.15);
    border: 1px solid rgba(var(--gold-rgb),0.3);
    border-radius: 6px;
    color: var(--gold);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.header-settings-btn:hover { background: rgba(var(--gold-rgb),0.3); }
.header-settings-btn svg { pointer-events: none; }

.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(var(--black-rgb),0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: settingsFadeIn 0.2s ease;
}
@keyframes settingsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.settings-modal {
    background: rgba(var(--bg-body-rgb),0.97);
    border: 1.5px solid var(--gold);
    border-radius: 14px;
    width: 380px;
    max-width: 92vw;
    box-shadow: 0 8px 40px rgba(var(--black-rgb),0.6), 0 0 20px rgba(var(--gold-rgb),0.12);
    animation: settingsSlideIn 0.25s ease;
}
@keyframes settingsSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.2);
}
.settings-header h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: var(--gold);
    letter-spacing: 0.5px;
}
.settings-close {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.settings-close:hover { opacity: 1; }

.settings-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.settings-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-group label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.92rem;
    color: var(--text-main);
    min-width: 120px;
    flex-shrink: 0;
}
.settings-vol-val {
    font-family: 'Oswald', sans-serif;
    font-size: 0.88rem;
    color: var(--gold);
    min-width: 40px;
    text-align: right;
}

/* Custom range slider */
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--gold-rgb),0.18);
    outline: none;
    cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg-body);
    box-shadow: 0 0 6px rgba(var(--gold-rgb),0.4);
    cursor: pointer;
    transition: transform 0.15s;
}
.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg-body);
    box-shadow: 0 0 6px rgba(var(--gold-rgb),0.4);
    cursor: pointer;
}
.settings-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--gold-rgb),0.18);
}

/* ============================================
   Corbak - boutique secondaire, modal 6 slots
   ============================================ */

/* Vider le cache : layout column (label + bouton + hint), separateur en haut
   pour le demarquer des sliders volume au-dessus. */
.settings-group-cache {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--gold-rgb), 0.18);
}
.settings-group-cache label {
    min-width: 0;
}
.settings-group-cache .btn {
    align-self: flex-start;
}
.settings-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-card);
    line-height: 1.4;
}

.brigand-overlay {
    z-index: 9100;
}

.brigand-modal {
    max-width: 780px;
    width: 94%;
    max-height: 88vh;
}

.brigand-header {
    gap: 0.8rem;
    padding: 0.8rem 1rem;
}

.brigand-header-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    flex: 1;
}

.brigand-header-portrait {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    background: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.brigand-header-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.brigand-header-line {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brigand-timer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: rgba(var(--gold-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.brigand-timer-value {
    color: var(--gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

/* Bouton "Rafraichir" : compact pour s'integrer dans la row du timer.
   Cout exponentiel par refresh, paye en cendres (non corrompues). */
.brigand-refresh-btn {
    margin-left: 0.8rem;
    padding: 4px 12px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0.02em;
}
.brigand-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.brigand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    overflow-y: auto;
    min-height: 120px;
}

.brig-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(30, 22, 12, 0.85) 0%, rgba(16, 12, 8, 0.92) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 6px;
    padding: 0.75rem 0.7rem;
    min-height: 180px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.brig-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--gold-rgb), 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.brig-card-sold {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.brig-card-sold:hover {
    transform: none;
    border-color: rgba(var(--gold-rgb), 0.25);
    box-shadow: none;
}

.brig-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

/* Wrapper rond avec glow radial (mirror .inv-item-icon-wrap de la banque). */
.brig-slot-icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(var(--white-rgb), 0.05) 0%, transparent 70%);
    border-radius: 50%;
}
.brig-slot-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Convention egg-sprite-frame (admin.css) : enfant 128x128 avec bg-position 0 0
   montre la 1re frame du spritesheet. On scale pour matcher le container 56x56. */
.brig-slot-icon.egg-sprite-frame > i { transform: scale(0.4375); } /* 56/128 */

/* Aura glow par tier (mirror sanctuary.css banque). T1 reste neutre, T2+ */
/* applique le drop-shadow rareté correspondant. */
.brig-card.inv-tier-2 .brig-slot-icon { filter: drop-shadow(0 0 8px rgba(var(--rarity-robuste-rgb), 0.4)); }
.brig-card.inv-tier-3 .brig-slot-icon { filter: drop-shadow(0 0 10px rgba(var(--rarity-alpha-rgb), 0.5)); }
.brig-card.inv-tier-4 .brig-slot-icon { filter: drop-shadow(0 0 12px rgba(var(--rarity-ancien-rgb), 0.6)); }
.brig-card.inv-tier-5 .brig-slot-icon { filter: drop-shadow(0 0 16px rgba(var(--rarity-primordial-rgb), 0.7)); }
.brig-card.inv-tier-6 .brig-slot-icon { filter: drop-shadow(0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7)); }

/* Bordure card hover : suit la rareté (mirror banque). */
.brig-card.inv-tier-1:hover,
.brig-card.inv-tier-2:hover,
.brig-card.inv-tier-3:hover,
.brig-card.inv-tier-4:hover,
.brig-card.inv-tier-5:hover,
.brig-card.inv-tier-6:hover {
    border-color: var(--rarity-color, var(--gold));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rarity-color, var(--gold));
}

.brig-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: var(--text-main);
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brig-card-meta {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.72rem;
}

.brig-elem {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.brig-tier {
    color: var(--gold);
    font-weight: 600;
    background: rgba(var(--gold-rgb), 0.1);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 3px;
    padding: 0 5px;
    line-height: 1.4;
}

.brig-tier-egg {
    color: #ff88ee;
    border-color: rgba(255, 136, 238, 0.45);
    background: rgba(255, 136, 238, 0.08);
}
/* Partie de boss : teinte rouge-orangee pour distinguer du commun. */
.brig-tier-trophy {
    color: #ff9e5c;
    border-color: rgba(255, 158, 92, 0.45);
    background: rgba(255, 158, 92, 0.08);
}

/* ============================================
   Pastille Tier en coin haut-droite de la carte
   Couleur par tier (mirror raretes : gris/bleu/violet/rouge)
   ============================================ */
.brig-card { position: relative; }
/* Badge tier : style banque (mirror .inv-item-badge). Fond noir transparent,
   texte de couleur rareté, bordure de couleur rareté. --rarity-color est posé
   par .inv-tier-tN (sanctuary.css). */
.brig-tier-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
    background: rgba(var(--black-rgb), 0.7);
    color: var(--rarity-color, var(--gold));
    border: 1px solid var(--rarity-color, var(--gold));
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
/* Les classes -tN restent presentes (compat HTML) mais n'imposent plus de
   gradient ; la couleur vient de --rarity-color hérité de .inv-tier-tN. */
.brig-tier-badge-t1,
.brig-tier-badge-t2,
.brig-tier-badge-t3,
.brig-tier-badge-t4,
.brig-tier-badge-t5,
.brig-tier-badge-t6 {
    /* hook vide volontaire (selecteurs conserves pour selectivite future) */
}

.brig-bonus {
    color: #8aff8a;
    font-weight: 600;
}

.brig-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.brig-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-family: 'Oswald', sans-serif;
    color: var(--gold);
    font-weight: 600;
    font-size: 0.95rem;
}

.brig-ash-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* Placeholder "cendre corrompue" : filtre agressif pour forcer la teinte
   violette sur Cendre.webp, independamment de la couleur de base. */
.brig-ash-icon.brig-ash-icon-corrupted {
    filter: sepia(1) hue-rotate(230deg) saturate(3.2);
}

.brig-buy-btn {
    width: 100%;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
}

.brig-buy-btn:disabled {
    cursor: not-allowed;
}

.brig-loading,
.brig-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    padding: 2rem;
    font-style: italic;
}

/* ---- Onglet Boutique de Corbak : sous-onglets Acheter / Vendre ---- */
/* Largeur contrôlée + centrée : pas d'étirement sur grand écran. Compact
   pour tenir sans scroll de page. */
.corbak-shop {
    max-width: 920px;
    margin: 0 auto;
}
/* Buy inline : on neutralise l'overflow/min-height hérités de la version
   modale (sinon le grid pousse la page) et on compacte fortement les cartes
   pour que Acheter tienne sans scroll. */
.corbak-shop .brigand-grid {
    overflow: visible;
    min-height: 0;
    padding: 0.5rem 0;
    gap: 0.5rem;
}
.corbak-shop .brig-card {
    min-height: 0;
    padding: 0.5rem 0.5rem;
}
.corbak-shop .brig-card-top { gap: 0.25rem; }
.corbak-shop .brig-slot-icon-wrap,
.corbak-shop .brig-slot-icon { width: 40px; height: 40px; }
.corbak-shop .brig-slot-icon.egg-sprite-frame > i { transform: scale(0.3125); } /* 40/128 */
.corbak-shop .brig-card-name {
    font-size: 0.74rem;
    min-height: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.corbak-shop .brig-card-bottom { margin-top: 0.4rem; }
.corbak-subtabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.corbak-subtab {
    flex: 0 0 auto;
    padding: 0.5rem 1.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.corbak-subtab:hover { border-color: rgba(var(--gold-rgb), 0.5); color: var(--text-main); }
.corbak-subtab.active {
    background: rgba(var(--gold-rgb), 0.12);
    border-color: var(--gold);
    color: var(--gold);
}

/* ---- Panier de vente ---- */
.corbak-sell-intro {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}
.corbak-sell-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.45rem;
}
.corbak-sell-cell {
    position: relative;
    min-height: 84px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.3rem;
}
.corbak-sell-cell.is-empty {
    cursor: pointer;
    border-style: dashed;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.corbak-sell-cell.is-empty:hover {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), 0.08);
}
.corbak-sell-plus { font-size: 1.8rem; color: var(--text-dim); line-height: 1; }
.corbak-sell-cell.is-filled {
    border-color: var(--rarity-color, rgba(var(--gold-rgb), 0.4));
}
.corbak-sell-remove {
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.corbak-sell-remove:hover { color: var(--error); }
.corbak-sell-cell-icon img,
.corbak-sell-cell-icon .corbak-pick-img { width: 28px; height: 28px; object-fit: contain; }
.corbak-sell-cell-name {
    font-size: 0.62rem;
    text-align: center;
    color: var(--text-main);
    line-height: 1.05;
    max-height: 2.1em;
    overflow: hidden;
}
/* Stepper quantité (vente Corbak) : remplace l'input number natif moche. */
.corbak-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    height: 24px;
}
.corbak-qty-btn {
    width: 22px;
    border: none;
    background: rgba(var(--gold-rgb), 0.08);
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}
.corbak-qty-btn:hover { background: rgba(var(--gold-rgb), 0.22); color: #ffe9a8; }
.corbak-qty-btn:active { background: rgba(var(--gold-rgb), 0.32); }
.corbak-qty-val {
    width: 34px;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(var(--gold-rgb), 0.22);
    border-right: 1px solid rgba(var(--gold-rgb), 0.22);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0;
    -moz-appearance: textfield;
}
.corbak-qty-val:focus { outline: none; background: rgba(var(--gold-rgb), 0.06); }
/* Supprime les fleches natives (au cas ou type=number serait reintroduit). */
.corbak-qty-val::-webkit-outer-spin-button,
.corbak-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.corbak-sell-qty-fixed { font-size: 0.72rem; color: var(--text-dim); }
.corbak-sell-cell-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
}
.corbak-sell-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(var(--gold-rgb), 0.2);
}
.corbak-sell-total { display: flex; flex-direction: column; gap: 0.15rem; }
.corbak-sell-total span { font-size: 0.78rem; color: var(--text-secondary); }
.corbak-sell-total strong {
    font-size: 1.1rem;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* ---- Picker banque miniature (vente Corbak) ---- */
.corbak-pick-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    border-left: 3px solid var(--rarity-color, rgba(var(--gold-rgb), 0.4));
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-bottom: 0.4rem;
    transition: background 0.12s ease;
}
.corbak-pick-row:hover { background: rgba(var(--gold-rgb), 0.08); }
.corbak-pick-img { width: 30px; height: 30px; object-fit: contain; }
.corbak-pick-name { font-size: 0.82rem; color: var(--text-main); }
.corbak-pick-unit { font-size: 0.72rem; color: var(--text-secondary); }

@media (max-width: 680px) {
    .corbak-sell-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 460px) {
    .corbak-sell-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .brigand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .brigand-grid {
        grid-template-columns: 1fr;
    }
    .brigand-header-line {
        display: none;
    }
}

/* ============================================================================
   ENCYCLOPÉDIE — Refonte 2026-05-11 ("Registre du Gardien")
   Parchemin sombre + or chaud + accents bronze. Étend le fond jusqu'aux bords
   (margin négatif). Override les anciens .bestiary-counter / .bestiary-tabs.
   ============================================================================ */
.panel-bestiary {
    --reg-bg-deep: #14100a;
    --reg-card-from: #211810;
    --reg-card-to: #14100a;
    --reg-bronze: #cd7f32;
    --reg-bronze-rgb: 205, 127, 50;
    --reg-bronze-soft: #8a5a28;
    margin: -1.5rem;
    padding: 1.5rem;
    min-height: calc(100vh - var(--header-h));
    background:
        radial-gradient(ellipse at top, rgba(var(--reg-bronze-rgb), 0.08), transparent 65%),
        radial-gradient(ellipse at bottom right, rgba(var(--gold-rgb), 0.05), transparent 70%),
        var(--reg-bg-deep);
}

/* Header de l'encyclopédie : titre + sous-titre + barre de progression */
.panel-bestiary .bestiary-header {
    margin-bottom: 1.4rem;
    padding: 0.4rem 0 0.8rem;
}
.panel-bestiary .bestiary-header-top {
    margin-bottom: 1rem;
}
.panel-bestiary .panel-title {
    color: var(--gold-text-warm);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.panel-bestiary .panel-subtitle {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
}

/* Barre de progression globale */
.bestiary-progress {
    background:
        radial-gradient(ellipse at top right, rgba(var(--reg-bronze-rgb), 0.1), transparent 60%),
        linear-gradient(135deg, var(--reg-card-from) 0%, var(--reg-card-to) 50%, var(--reg-card-from) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--gold-rgb), 0.15);
}
.bestiary-progress-track {
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    margin-bottom: 0.7rem;
}
.bestiary-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--reg-bronze-soft) 0%,
        var(--reg-bronze) 40%,
        var(--gold) 70%,
        var(--gold-text-warm) 100%);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    transition: width 0.6s cubic-bezier(0.2, 0.85, 0.3, 1);
    position: relative;
}
.bestiary-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
    border-radius: 7px 7px 0 0;
    pointer-events: none;
}
.bestiary-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between; /* % à gauche, fraction à droite (label retiré) */
    gap: 12px;
}
.bestiary-progress-percent {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1.5px;
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.4);
}
.bestiary-progress-label {
    flex: 1;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.bestiary-progress-fraction {
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    color: var(--text-main);
    letter-spacing: 0.5px;
}
.bestiary-progress-fraction b { color: var(--gold-text-warm); font-weight: 700; }

/* Tabs : reset des anciens styles + nouvelle DA */
.panel-bestiary .bestiary-tabs {
    display: flex;
    flex-wrap: nowrap; /* tous les onglets sur 1 seule ligne, même fenêtre étroite */
    gap: 4px;
    margin: 0 0 1.4rem;
    padding: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 12px;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.18); /* override l'ancienne ligne or */
    overflow-x: auto; /* fallback scroll horizontal si vraiment trop étroit */
}
.panel-bestiary .bestiary-tab {
    flex: 1 1 0; /* partage équitable de la largeur, chaque tab se compacte */
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.55rem 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.panel-bestiary .bestiary-tab:hover {
    color: var(--gold-text-warm);
    background: rgba(var(--reg-bronze-rgb), 0.08);
}
.panel-bestiary .bestiary-tab.active {
    background:
        radial-gradient(ellipse at top, rgba(var(--reg-bronze-rgb), 0.18), transparent 70%),
        linear-gradient(135deg, var(--reg-card-from) 0%, var(--reg-card-to) 100%);
    border-color: rgba(var(--gold-rgb), 0.4);
    color: var(--gold-text-warm);
    box-shadow: inset 0 0 10px rgba(var(--reg-bronze-rgb), 0.1), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.bestiary-tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}
.panel-bestiary .bestiary-tab.active .bestiary-tab-icon {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.3));
}
.bestiary-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bestiary-tab-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(var(--reg-bronze-rgb), 0.15);
    border: 1px solid rgba(var(--reg-bronze-rgb), 0.4);
    color: var(--reg-bronze);
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: none;
}
.panel-bestiary .bestiary-tab.active .bestiary-tab-count {
    background: rgba(var(--gold-rgb), 0.18);
    border-color: rgba(var(--gold-rgb), 0.5);
    color: var(--gold-text-warm);
}
.bestiary-tab-count.complete {
    background: rgba(var(--gold-rgb), 0.25);
    border-color: var(--gold);
    color: var(--gold-text-warm);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}

@media (max-width: 1100px) {
    /* Compacte la typo + cache la pastille count avant d'avoir à cacher le label. */
    .panel-bestiary .bestiary-tab { font-size: 0.72rem; padding: 0.5rem 0.3rem; letter-spacing: 0.8px; }
}
@media (max-width: 900px) {
    /* En dernier recours : on masque les labels, on garde icône + pastille count. */
    .bestiary-tab-label { display: none; }
}

/* Sous-groupement par rareté (Équipement Gardien notamment) */
.bestiary-rarity-block {
    margin-top: 0.9rem;
}
.bestiary-rarity-block:first-child { margin-top: 0; }
.bestiary-rarity-title {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0.4rem 0 0.6rem 0.5rem;
}

/* Card Gardien teintée par rareté */
.bestiary-card.is-gardien:not(.bestiary-undiscovered) {
    border-color: var(--card-rarity-color, rgba(var(--gold-rgb), 0.25));
    box-shadow: 0 0 12px color-mix(in srgb, var(--card-rarity-color, rgba(var(--gold-rgb), 0.5)) 25%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--card-rarity-color, rgba(var(--gold-rgb), 0.3)) 8%, transparent);
}
.bestiary-card.is-gardien:not(.bestiary-undiscovered):hover {
    border-color: var(--card-rarity-color, var(--gold));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--card-rarity-color, rgba(var(--gold-rgb), 0.5)) 35%, transparent);
}

/* Tag "Bébé" / "Adulte" sur la carte Dragon */
.bestiary-tag-form {
    background: rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.15);
    border: 1px solid rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.45);
    color: var(--reg-bronze, #cd7f32);
}

/* ============================================================================
   MODALE DRAGON RICHE (Phase 3, Encyclopédie)
   ============================================================================ */
.bestiary-dragon-modal {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bestiary-dragon-card {
    width: 100%;
    max-width: 880px; /* override du .bestiary-detail-card { max-width: 360px } legacy */
    max-height: 92vh;
    overflow-y: auto;
    text-align: left; /* override du text-align: center du parent */
    border-radius: 16px;
    background:
        radial-gradient(ellipse at top right, rgba(205, 127, 50, 0.15), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 65%),
        linear-gradient(135deg, #14100a 0%, #211810 50%, #14100a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(var(--gold-rgb), 0.2);
    padding: 2rem 2.2rem;
    position: relative;
    display: flex; flex-direction: column; gap: 1.6rem;
}

/* Header : sprite à gauche, infos à droite */
.bestiary-dragon-head {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.8rem;
    margin-bottom: 0;
}
.bestiary-dragon-sprite-wrap {
    width: 220px; height: 220px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, rgba(205, 127, 50, 0.18) 0%, transparent 70%);
}
.bestiary-dragon-sprite {
    width: 220px; height: 220px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}
.bestiary-dragon-info {
    display: flex; flex-direction: column; gap: 0.6rem;
    min-width: 0;
}
.bestiary-dragon-tags {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.bestiary-dragon-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1.5px;
    line-height: 1.1;
}
.bestiary-dragon-elem {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Oswald', sans-serif;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.bestiary-dragon-elem img { width: 22px; height: 22px; }
.bestiary-dragon-desc {
    margin: 0.3rem 0 0;
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--text-main);
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
}

/* Selecteur de forme (Bébé/Adulte) */
.bestiary-form-selector {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 8px;
    margin-top: 0.4rem;
    width: fit-content;
}
.bestiary-form-pill {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bestiary-form-pill:hover { color: var(--gold-text-warm); }
.bestiary-form-pill.is-active {
    background: rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.25);
    color: var(--gold-text-warm);
    box-shadow: inset 0 0 8px rgba(var(--reg-bronze-rgb, 205, 127, 50), 0.2);
}
.bestiary-form-pill.is-locked,
.bestiary-form-pill[disabled] {
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    cursor: not-allowed;
    opacity: 0.55;
}
.bestiary-form-pill.is-locked:hover,
.bestiary-form-pill[disabled]:hover {
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    background: transparent;
    box-shadow: none;
}

/* Section stats + selecteur rareté */
.bestiary-dragon-stats-section {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    margin-bottom: 0;
}
/* Le selecteur rareté passe sous le titre (sa propre ligne) — sinon trop dense */
.bestiary-dragon-stats-header {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}

/* Selecteur de rareté : pills par couleur */
.bestiary-rarity-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bestiary-rarity-selector-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 4px;
}
.bestiary-rarity-pill {
    position: relative; /* ancrage du badge "obtenu" */
    padding: 7px 14px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--pill-color, var(--gold)) 50%, transparent);
    border-radius: 6px;
    color: var(--pill-color, var(--text-secondary));
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bestiary-rarity-pill:hover {
    background: color-mix(in srgb, var(--pill-color, var(--gold)) 15%, transparent);
    border-color: var(--pill-color, var(--gold));
}
.bestiary-rarity-pill.is-active {
    background: color-mix(in srgb, var(--pill-color, var(--gold)) 22%, transparent);
    border-color: var(--pill-color, var(--gold));
    color: #fff;
    box-shadow: 0 0 10px color-mix(in srgb, var(--pill-color, var(--gold)) 40%, transparent);
}
/* Stats grid en 4 cols */
.bestiary-dragon-stats-section .bestiary-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 0;
}
.bestiary-dragon-stats-section .bestiary-detail-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 8px;
}
.bestiary-dragon-stats-section .bestiary-detail-stat img { width: 22px; height: 22px; flex-shrink: 0; }
.bestiary-dragon-stats-section .bestiary-detail-stat span {
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.bestiary-dragon-stats-section .bestiary-detail-stat b {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    margin-left: auto;
    letter-spacing: 0.3px;
}

/* Section Compétences */
.bestiary-dragon-skills-section {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
}
.bestiary-dragon-skills-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--gold-text-warm);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.bestiary-skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.bestiary-skill-slot {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 1.1rem 0.7rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 9px;
    cursor: help;
    transition: all 0.2s ease;
}
.bestiary-skill-slot:hover {
    border-color: rgba(var(--gold-rgb), 0.55);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.2);
}
.bestiary-skill-slot.comp-slot-passive {
    border-color: rgba(192, 132, 252, 0.45); /* violet (passive) */
}
.bestiary-skill-slot .comp-slot-icon {
    width: 56px; height: 56px;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.bestiary-skill-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-text-warm);
    text-align: center;
    line-height: 1.1;
}
.bestiary-skill-type {
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    color: var(--text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.bestiary-skill-slot.bestiary-skill-empty,
.bestiary-skill-slot.bestiary-skill-locked {
    color: var(--text-secondary);
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    font-style: italic;
    border-style: dashed;
    border-color: rgba(var(--gold-rgb), 0.18);
    cursor: default;
    opacity: 0.6;
}

/* "Compétences masquées" si pas obtenu — min-height calé sur la hauteur d'une
   rangée de .bestiary-skill-slot remplis pour éviter que la modale saute en
   verticalement quand on switch Bébé/Adulte sans posséder l'autre forme. */
.bestiary-skills-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1.5rem;
    min-height: 136px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(var(--gold-rgb), 0.3);
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}
.bestiary-skills-locked svg {
    color: var(--reg-bronze, #cd7f32);
    flex-shrink: 0;
}

/* Bouton close de la modale */
.bestiary-dragon-card .bestiary-detail-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bestiary-dragon-card .bestiary-detail-close:hover {
    background: rgba(var(--stat-red-rgb), 0.15);
    border-color: rgba(var(--stat-red-rgb), 0.5);
    color: var(--stat-red-light);
}

/* Responsive : pile sur mobile */
@media (max-width: 720px) {
    .bestiary-dragon-head { grid-template-columns: 1fr; }
    .bestiary-dragon-sprite-wrap { margin: 0 auto; }
    .bestiary-skills-grid { grid-template-columns: 1fr; }
    .bestiary-dragon-stats-section .bestiary-detail-stats { grid-template-columns: repeat(2, 1fr); }
}