/* --- Lignée Nyragh petit rond cyan affiché à gauche de l'icône d'élément.
 Indique qu'un dragon est issu d'un œuf pur (origine Nyragh). N'affecte
 PAS les stats du dragon, juste l'héritage en accouplement (cf. breeding).
 Utilisé dans : sanctuary card, breeding pen picker. ----------------- */
.dragon-pur-badge {
 display: inline-block;
 width: 10px;
 min-width: 10px;
 height: 10px;
 min-height: 10px;
 border-radius: 50%;
 background: var(--rarity-primordial_pur);
 border: 1px solid rgba(255, 255, 255, 0.3);
 box-shadow: 0 0 8px rgba(var(--rarity-primordial_pur-rgb), 0.9), 0 0 2px rgba(var(--rarity-primordial_pur-rgb), 1);
 flex-shrink: 0;
 vertical-align: middle;
 cursor: help;
}

/* --- Sanctuaire Grid --- */
/* 4 colonnes x 2 lignes = 8 dragons / page. Les cards sont en taille naturelle
   (auto rows) pour eviter le bug d'etirement initial qui rendait l'arrivee
   sur la page "moche" tant que le layout n'avait pas reflow. align-content:
   start colle les cards en haut, le pager + toolbar gardent leur place fixe. */
.sanctuary-grid {
 display: grid;
 /* Auto-fill + fixed row height + overflow:hidden : meme pattern que la Banque
    (.inv-grid). Permet a la grille de clipper proprement les cards qui ne
    rentrent plus pendant les transitions de sidebar (au lieu de provoquer
    une reflow / re-layout brutal). */
 grid-template-columns: repeat(auto-fill, 280px);
 grid-auto-rows: 260px;
 justify-content: center;
 align-content: start;
 gap: 18px;
 padding: 8px 4px;
 flex: 1;
 min-height: 0;
 overflow: hidden;
}
.sanctuary-grid .sanctuary-card {
 height: 100%;
 min-height: 0;
 overflow: hidden;
}
@media (max-width: 900px) {
 .sanctuary-grid {
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 grid-auto-rows: auto;
 flex: none;
 overflow: visible;
 }
}

/* ============================================
   PAGE DETAIL DRAGON (refonte 2026-05-14 v2)
   ============================================
   Layout :
     1. topbar (back + badges)
     2. hero : sprite "sortant" du cadre + info compacte a droite (tags, PWR, XP, stats)
     3. cols 50/50 : Competences (icons only) + Equipement (slots visibles)
     4. panel Actions dedie (boutons stylises)
*/
/* Overlay backdrop : fullscreen, blur + dim. Apparait au showDragonDetail. */
.sanct-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--black-rgb), 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.sanct-detail-overlay.visible { opacity: 1; }

/* Modal box : carde centree, ombre + bordure gold, scroll interne si content > viewport */
.sanct-detail-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 22px;
    width: min(1100px, 100%);
    max-height: calc(100vh - 48px);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.08) 0%, transparent 70%),
        linear-gradient(180deg, rgba(var(--bg-body-rgb), 0.96), rgba(var(--black-rgb), 0.92));
    border: 1px solid var(--element-color, rgba(var(--gold-rgb), 0.5));
    border-radius: 14px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(var(--element-rgb, var(--gold-rgb)), 0.2) inset,
        0 0 36px rgba(var(--element-rgb, 0,0,0), 0.25);
    overflow-y: auto;
    transform: translateY(10px);
    transition: transform 0.22s ease;
}
.sanct-detail-overlay.visible .sanct-detail-view { transform: translateY(0); }
/* Scrollbar custom matching DA */
.sanct-detail-view::-webkit-scrollbar { width: 8px; }
.sanct-detail-view::-webkit-scrollbar-track { background: rgba(var(--black-rgb), 0.2); }
.sanct-detail-view::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.4); border-radius: 4px; }
.sanct-detail-view::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.7); }
.dd-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    position: relative;
    min-height: 40px;
}
.dd-species-title {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(var(--element-rgb, var(--gold-rgb)), 0.5);
    white-space: nowrap;
    pointer-events: none;
}
/* Bouton fermer : croix circulaire en haut a droite (mirror modale encyclopedie) */
.dd-close-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: rgba(var(--black-rgb), 0.6);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
}
.dd-close-btn:hover {
    background: rgba(var(--gold-rgb), 0.22);
    border-color: var(--gold);
    color: var(--gold-light, var(--gold));
    transform: rotate(90deg);
}
/* Boutons favori + partager : alignés à gauche dans le topbar (flex-end).
   margin-right: auto sur le DERNIER item du groupe gauche (share) pour
   pousser le reste (titre absolute + close) à droite. */
.dd-fav-btn,
.dd-share-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: rgba(var(--black-rgb), 0.6);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    color: rgba(var(--gold-rgb), 0.55);
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s, box-shadow 0.15s;
}
.dd-share-btn { margin-right: auto; }
.dd-fav-btn:hover,
.dd-share-btn:hover:not(.is-loading) {
    background: rgba(var(--gold-rgb), 0.22);
    border-color: var(--gold);
    color: var(--gold);
    transform: scale(1.08);
}
.dd-fav-btn.is-fav {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), 0.18);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
}
.dd-fav-btn.is-fav:hover {
    background: rgba(var(--gold-rgb), 0.28);
    transform: scale(1.08);
}
.dd-share-btn.is-loading {
    cursor: progress;
    opacity: 0.7;
}
.dd-share-btn.is-loading svg {
    animation: dd-share-spin 0.9s linear infinite;
}
@keyframes dd-share-spin {
    to { transform: rotate(360deg); }
}
.dd-header-badges {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}
.dd-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    position: relative;
    backdrop-filter: blur(6px);
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dd-pill:hover { transform: translateY(-1px); }
.dd-pill-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    background: rgba(var(--black-rgb), 0.25);
    box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.18) inset;
}
.dd-pill-label { line-height: 1; }
.dd-pill-active {
    background:
        radial-gradient(ellipse at top right, rgba(255, 215, 90, 0.12), transparent 65%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 70%),
        linear-gradient(135deg, #1a1408 0%, #261c0a 50%, #1a1408 100%);
    color: #ffe9a8;
    border-color: rgba(255, 200, 80, 0.4);
    box-shadow:
        0 2px 10px rgba(180, 130, 20, 0.35),
        0 0 0 1px rgba(255, 200, 80, 0.25) inset;
}
.dd-pill-active .dd-pill-ico {
    background: rgba(255, 200, 80, 0.18);
    color: #ffe2a0;
    text-shadow: 0 0 6px rgba(255, 200, 80, 0.7);
}
.dd-pill-defense {
    background:
        radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.10), transparent 65%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.06), transparent 70%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    color: #ffd5cc;
    border-color: rgba(255, 90, 60, 0.4);
    box-shadow:
        0 2px 10px rgba(180, 30, 20, 0.35),
        0 0 0 1px rgba(255, 90, 60, 0.25) inset;
}
.dd-pill-defense .dd-pill-ico {
    background: rgba(255, 90, 60, 0.18);
    color: #ffbfae;
    text-shadow: 0 0 6px rgba(255, 90, 60, 0.7);
}

/* Hero : sprite "sortant" du cadre + info. Largeur bornee, centre.
   Toutes les dimensions clés utilisent clamp(min, vh, max) pour scale avec
   la hauteur du viewport - sur 768p le sprite se reduit, sur 1080p+ il est max. */
.dd-hero {
    display: grid;
    grid-template-columns: clamp(240px, 32vh, 340px) 1fr;
    gap: clamp(16px, 2.5vh, 28px);
    padding: clamp(14px, 2vh, 22px) clamp(18px, 3vw, 32px);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--element-rgb, var(--bg-body-rgb)), 0.12) 0%, transparent 60%),
        linear-gradient(165deg, rgba(var(--bg-body-rgb),0.92) 0%, rgba(18,18,36,0.92) 100%);
    border: 1px solid rgba(var(--element-rgb, var(--gold-rgb)), 0.3);
    border-radius: 14px;
    position: relative;
    overflow: visible;
    margin-top: clamp(28px, 5vh, 50px);
    box-shadow: 0 0 14px rgba(var(--element-rgb, 0,0,0), 0.12) inset;
}
.dd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 60%, var(--rarity-color, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 75% 40%, rgba(var(--element-rgb, 0,0,0), 0.5) 0%, transparent 55%);
    opacity: 0.15;
    pointer-events: none;
    border-radius: inherit;
}
/* Stage : container du sprite, permet au sprite de "sortir" en haut.
   pointer-events: none : le sprite déborde sur la zone du topbar (margin-top
   négatif + hauteur sprite > stage) et interceptait les clics sur les
   boutons favori / partage. Le stage et ses enfants n'ont aucune interaction
   propre, donc safe de tout désactiver. */
.dd-hero-stage {
    position: relative;
    width: clamp(240px, 32vh, 340px);
    height: clamp(200px, 28vh, 290px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: clamp(-70px, -7vh, -40px);
    pointer-events: none;
}
.dd-hero-glow { display: none; }
.dd-hero-rays { display: none; }
.dd-hero-sprite {
    position: relative;
    z-index: 2;
    width: clamp(240px, 32vh, 340px);
    height: clamp(240px, 32vh, 340px);
}
.dd-hero-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.dd-hero-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dd-hero-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--gold);
    text-shadow: 0 2px 6px rgba(var(--black-rgb), 0.6);
}
.dd-rename-btn {
    background: rgba(var(--gold-rgb), 0.15);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    color: var(--gold);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.dd-rename-btn:hover {
    background: rgba(var(--gold-rgb), 0.3);
    border-color: var(--gold);
}
.dd-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dd-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(var(--black-rgb), 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    color: var(--text-main);
    letter-spacing: 0.5px;
}
.dd-tag-rarity { font-family: 'Cinzel', serif; }
.dd-tag-level { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.5); }
.dd-tag-adult { color: var(--gold-light, var(--gold)); border-color: var(--gold); }
.dd-tag-pur {
    color: #e6d6ff;
    border-color: rgba(230, 214, 255, 0.5);
    background: rgba(230, 214, 255, 0.08);
}
/* Refonte 2026-05-15 : barre XP epaissie (10 → 18px) avec le texte
   directement a l'interieur (overlay absolute), miroir du pattern
   .sidebar-xp utilise dans la sidebar du jeu. */
.dd-hero-xp {
    position: relative;
}
.dd-hero-xp-bar {
    height: 18px;
    background: rgba(var(--black-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 6px;
    overflow: hidden;
}
.dd-hero-xp.is-max .dd-hero-xp-bar {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}
.dd-hero-xp.is-max .dd-hero-xp-fill {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}
/* Note : on conserve le texte blanc + outline noir meme en is-max
   (la version anterieure passait en bleu sur fond bleu → invisible). */
.dd-hero-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    transition: width 0.3s ease;
}
.dd-hero-xp-text {
    /* Position absolute centree dans la barre (mirror .sidebar-xp-text).
       Blanc + outline noir (text-stroke) pour rester lisible sur le fond
       dore de la barre d'XP. z-index pour passer devant .dd-hero-xp-fill. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    -webkit-text-stroke: 1px var(--black);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--black),
         1px -1px 0 var(--black),
        -1px  1px 0 var(--black),
         1px  1px 0 var(--black);
    pointer-events: none;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.dd-hero-pwr {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}
.dd-hero-pwr span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-left: 4px;
}

/* Stats inline : pills compactes en ligne (icone + valeur seulement). Tooltip
   natif title="..." pour le label. Tout tient sur une ligne meme petit. */
.dd-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.dd-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(var(--black-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 20px;
    transition: border-color 0.12s;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
.dd-stat:hover { border-color: var(--gold); }
.dd-stat-icon {
    width: 18px;
    height: 18px;
    opacity: 0.95;
    flex-shrink: 0;
}
.dd-stat-val {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    text-shadow: -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black), 0 0 4px rgba(var(--black-rgb),0.9);
}

/* Bouton "Détail des stats" sous la grille (ouvre la modale breakdown). */
.dd-stats-detail-btn {
    margin-top: 10px;
    padding: 6px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 8px;
    color: var(--gold);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dd-stats-detail-btn:hover { background: rgba(var(--gold-rgb), 0.16); border-color: var(--gold); }

/* ---- Modale Stats détaillées (breakdown par source) ---- */
.statbd-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.7);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.statbd-modal {
    width: 100%; max-width: 560px;
    max-height: 92vh; overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-input) 0%, var(--bg-body) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.statbd-modal-wide { max-width: 980px; }
/* 2 colonnes symétriques (même encart, même hauteur) : stats à gauche,
   situationnel à droite. align-items: stretch => colonnes "carrées". */
.statbd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    align-items: stretch;
}
.statbd-col {
    background: rgba(var(--gold-rgb), 0.04);
    border: 1px solid rgba(var(--gold-rgb), 0.14);
    border-radius: 10px;
    padding: 0.8rem;
}
/* Titre commun aux 2 colonnes : alignés à la même hauteur. */
.statbd-col-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.6rem;
}
.statbd-combat-item {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.45rem;
}
.statbd-combat-item:last-child { margin-bottom: 0; }
.statbd-combat-item.is-inactive { opacity: 0.55; }
.statbd-combat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.statbd-combat-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text-secondary); }
.statbd-exped-badge {
    display: inline-flex; align-items: center; gap: 3px;
    flex-shrink: 0;
    font-size: 0.6rem;
    color: var(--text-dim);
    background: rgba(var(--gold-rgb), 0.1);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}
.statbd-exped-icon { width: 12px; height: 12px; }
.statbd-combat-eff { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.92rem; margin: 0.15rem 0; }
/* Conditions = contexte discret (gris). Le vert est réservé aux valeurs/bonus.
   Seul l'inactif passe en rouge (alerte). */
.statbd-combat-cond { font-size: 0.72rem; color: var(--text-secondary); }
.statbd-combat-cond.is-off { color: var(--error); }
.statbd-combat-empty { font-size: 0.8rem; color: var(--text-dim); font-style: italic; }
/* Bonus combat positifs en vert, mots-clés de status colorés (couleur inline). */
.statbd-pos { color: #4ade80; }
.statbd-kw { font-weight: 700; }
.statbd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.statbd-title { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; color: var(--gold); }
.statbd-close { background: none; border: none; color: var(--text-dim); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.statbd-close:hover { color: var(--text-main); }
.statbd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.statbd-stat {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
}
.statbd-stat-head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.4rem; padding-bottom: 0.35rem;
    /* Séparateur en dégradé doux plutôt qu'une barre nette. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(var(--gold-rgb), 0.35), transparent) 1;
}
.statbd-icon { width: 18px; height: 18px; }
.statbd-label { font-family: 'Cinzel', serif; font-size: 0.82rem; color: var(--text-secondary); flex: 1; }
.statbd-total { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--gold); text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); }
.statbd-sub { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--text-secondary); padding: 1px 0; }
.statbd-sub span:last-child { color: var(--text-main); font-variant-numeric: tabular-nums; }
/* Contributions de bonus (écailles / maîtrise / infusions) en vert. */
.statbd-sub-bonus span:last-child { color: #4ade80; font-weight: 600; }
.statbd-adv { margin-top: 0.9rem; }
.statbd-adv-title { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold); margin-bottom: 0.45rem; }
/* Effets avancés en 3 zones côte à côte (Offensif | Défensif | Utilitaire). */
.statbd-adv-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; align-items: start; }
.statbd-adv-zone {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
}
.statbd-adv-zone-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--element-color, var(--gold));
    margin-bottom: 0.35rem;
}
/* 2 colonnes par zone : label (large, wrap) + total (à droite). Détail des
   sources écailles/maîtrise en infobulle (title) sur la ligne. */
.statbd-adv-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.statbd-adv-table td { padding: 0.16rem 0; font-variant-numeric: tabular-nums; }
.statbd-adv-table tbody tr { cursor: default; }
.statbd-adv-table tbody tr:hover { background: rgba(var(--gold-rgb), 0.05); }
.statbd-adv-label { text-align: left; color: var(--text-secondary); line-height: 1.15; padding-right: 0.4rem; }
.statbd-adv-totalcell { text-align: right; white-space: nowrap; }
.statbd-adv-total { color: #4ade80; font-weight: 700; }
.statbd-na { color: var(--text-dim); opacity: 0.4; }
.statbd-adv-total.is-zero { color: var(--text-dim); opacity: 0.55; font-weight: 400; }
@media (max-width: 860px) {
    .statbd-adv-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .statbd-cols { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .statbd-grid { grid-template-columns: 1fr; } }

/* Sections */
.dd-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(var(--element-rgb, var(--black-rgb)), 0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(var(--element-rgb, var(--black-rgb)), 0.10) 0%, transparent 55%),
        rgba(var(--black-rgb), 0.4);
    border: 1px solid rgba(var(--element-rgb, var(--gold-rgb)), 0.3);
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(var(--element-rgb, 0,0,0), 0.12) inset;
}
.dd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dd-section-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
}

/* Skills : slots facon page profil (96x96, subtle bg, icone 64x64). Le label
   "kind" (Cac/Ulti/Passif) est en pill discrete sous l'icone. Nom + description
   en tooltip JS au hover. */
.dd-skills-row {
    display: flex;
    gap: clamp(8px, 1.5vh, 16px);
    justify-content: center;
}
.dd-skill {
    width: clamp(72px, 9vh, 96px);
    height: clamp(72px, 9vh, 96px);
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.03);
    border: 2px solid rgba(var(--white-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: border-color 0.15s, transform 0.1s;
    position: relative;
}
.dd-skill:hover {
    border-color: rgba(var(--gold-rgb), 0.5);
    transform: translateY(-2px);
}
.dd-skill-passive {
    background: rgba(var(--gold-rgb), 0.06);
    border-color: rgba(var(--gold-rgb), 0.3);
}
.dd-skill-icon {
    width: clamp(48px, 6vh, 64px);
    height: clamp(48px, 6vh, 64px);
    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.6));
}
.dd-skill-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--gold-rgb), 0.2);
    border-radius: 50%;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.3rem;
    width: clamp(48px, 6vh, 64px);
    height: clamp(48px, 6vh, 64px);
}
.dd-skill-kind {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(var(--black-rgb), 0.8);
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid rgba(var(--gold-rgb), 0.4);
}

/* Equipement : 5 slots façon profil (96x96, fond subtle, aura par tier) + cristal.
   flex-wrap: nowrap → les 6 slots + divider tiennent toujours sur une ligne.
   Les slots shrinkent uniformément (flex: 0 1 basis) avec un plancher
   min-width pour rester lisibles, et aspect-ratio:1 pour garder le carré. */
.dd-equip-row {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 14px);
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
}
.dd-equip-slot {
    flex: 0 1 clamp(72px, 9vh, 96px);
    width: auto;
    height: auto;
    min-width: 40px;
    aspect-ratio: 1;
    border-radius: 14px;
    background: rgba(var(--white-rgb), 0.03);
    border: 2px solid rgba(var(--white-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.1s, border-color 0.15s;
}
.dd-equip-slot:hover { transform: translateY(-2px); border-color: rgba(var(--gold-rgb), 0.5); }
.dd-equip-slot.is-empty {
    background: rgba(var(--white-rgb), 0.02);
}
.dd-equip-slot.is-empty:hover {
    border-color: rgba(var(--gold-rgb), 0.5);
    background: rgba(var(--gold-rgb), 0.05);
}
.dd-equip-slot.is-filled {
    background: linear-gradient(135deg, var(--bg-profile, rgba(20, 20, 36, 0.85)) 0%, var(--bg-profile-end, rgba(10, 10, 22, 0.85)) 100%);
}
.dd-equip-slot.is-filled.inv-tier-1 { border-color: var(--rarity-fragile); box-shadow: 0 0 10px rgba(var(--rarity-fragile-rgb), 0.25) inset; }
.dd-equip-slot.is-filled.inv-tier-2 { border-color: var(--rarity-robuste); box-shadow: 0 0 10px rgba(var(--rarity-robuste-rgb), 0.3) inset, 0 0 8px rgba(var(--rarity-robuste-rgb), 0.4); }
.dd-equip-slot.is-filled.inv-tier-3 { border-color: var(--rarity-alpha); box-shadow: 0 0 12px rgba(var(--rarity-alpha-rgb), 0.35) inset, 0 0 10px rgba(var(--rarity-alpha-rgb), 0.5); }
.dd-equip-slot.is-filled.inv-tier-4 { border-color: var(--rarity-ancien); box-shadow: 0 0 14px rgba(var(--rarity-ancien-rgb), 0.4) inset, 0 0 12px rgba(var(--rarity-ancien-rgb), 0.6); }
.dd-equip-slot.is-filled.inv-tier-5 { border-color: var(--rarity-primordial); box-shadow: 0 0 16px rgba(var(--rarity-primordial-rgb), 0.45) inset, 0 0 16px rgba(var(--rarity-primordial-rgb), 0.7); }
.dd-equip-slot.is-filled.inv-tier-6 { border-color: var(--rarity-primordial_pur, #22d3ee); box-shadow: 0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.5) inset, 0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7); }
.dd-equip-slot img {
    width: 70%;
    height: 70%;
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.6));
}
.dd-equip-slot-num {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--rarity-color, #fff);
    background: rgba(var(--black-rgb), 0.85);
    padding: 1px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 6px var(--rarity-color, transparent),
        0 0 2px rgba(0, 0, 0, 0.9);
}
/* Badge % bonus en haut-gauche (mirror profile-slot .equip-bonus-badge) */
.dd-equip-slot .dd-equip-bonus-badge {
    position: absolute;
    top: 3px;
    left: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--stat-positive, #7dff7d);
    background: rgba(0, 30, 0, 0.82);
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid rgba(125, 255, 125, 0.35);
    text-shadow: 0 0 4px rgba(125, 255, 125, 0.5);
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.dd-equip-slot.equip-duplicate .dd-equip-bonus-badge {
    color: var(--stat-negative, #ff7050);
    border-color: rgba(255, 120, 80, 0.4);
    background: rgba(40, 0, 0, 0.85);
    text-shadow: 0 0 4px rgba(255, 120, 80, 0.5);
}
/* Petit "!" rouge en coin si doublon (mirror profil) */
.dd-equip-slot.equip-duplicate::after {
    content: '!';
    position: absolute;
    top: 2px;
    right: 28px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 12px;
    color: var(--stat-negative, #ff7050);
    text-shadow: 0 0 4px rgba(255, 120, 80, 0.6);
    pointer-events: none;
}
.dd-equip-slot.is-empty .dd-equip-slot-num,
.dd-equip-slot.is-empty > span {
    position: static;
    background: none;
    color: var(--gray-900, rgba(255, 255, 255, 0.2));
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0;
}
.dd-equip-divider {
    flex-shrink: 0;
    width: 2px;
    height: clamp(30px, 6vh, 60px);
    background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
    margin: 0 clamp(2px, 0.4vw, 6px);
}
.dd-equip-crystal { /* meme taille que les autres */ }

/* Cols 2 (Competences | Equipement) - equip un peu plus large car 5+1 slots */
.dd-cols {
    display: grid;
    grid-template-columns: clamp(280px, 26vw, 360px) 1fr;
    gap: clamp(10px, 1.5vh, 16px);
    align-items: stretch;
}
.dd-cols .dd-section { padding: clamp(10px, 2vh, 18px) clamp(14px, 2vw, 22px) clamp(14px, 2.5vh, 24px); }
@media (max-width: 900px) {
    .dd-cols { grid-template-columns: 1fr; }
}

/* Panel Actions : pilules capsules avec badge icône rond à gauche et label
   uppercase à droite. Couleur sémantique par variant via --action-color /
   --action-color-rgb (border, badge, glow, shimmer). Hover : lift + glow +
   reflet diagonal. */
.dd-actions-section .dd-section-title { margin-bottom: 8px; }
.dd-actions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.dd-action-btn {
    --action-color: var(--gold);
    --action-color-rgb: var(--gold-rgb);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    background:
        linear-gradient(180deg, rgba(var(--action-color-rgb), 0.14), transparent 70%),
        linear-gradient(180deg, rgba(var(--bg-card-rgb, 20, 18, 30), 0.85), rgba(var(--black-rgb), 0.55));
    border: 1px solid rgba(var(--action-color-rgb), 0.40);
    border-radius: 999px;
    color: var(--text-main);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.dd-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.13), transparent);
    pointer-events: none;
    transition: left 0.55s ease;
}
.dd-action-btn:hover:not(:disabled) {
    border-color: var(--action-color);
    transform: translateY(-2px);
    box-shadow:
        0 5px 16px rgba(var(--action-color-rgb), 0.35),
        inset 0 0 0 1px rgba(var(--action-color-rgb), 0.20);
}
.dd-action-btn:hover:not(:disabled)::before { left: 130%; }
.dd-action-btn:active:not(:disabled) { transform: translateY(0); }
.dd-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.45);
}

.dd-action-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--action-color);
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--action-color-rgb), 0.45), transparent 70%),
        rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--action-color-rgb), 0.55);
    font-size: 0.95rem;
    line-height: 1;
    text-shadow: 0 0 8px rgba(var(--action-color-rgb), 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 10px rgba(var(--action-color-rgb), 0.22);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.dd-action-btn:hover:not(:disabled) .dd-action-ico {
    transform: scale(1.10);
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--action-color-rgb), 0.60), transparent 70%),
        rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 16px rgba(var(--action-color-rgb), 0.45);
}

.dd-action-label {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.78rem;
    color: var(--text-main);
    white-space: nowrap;
}

.dd-action-activate {
    --action-color: var(--gold);
    --action-color-rgb: var(--gold-rgb);
}
.dd-action-defense-btn {
    --action-color: #88c0ff;
    --action-color-rgb: 136, 192, 255;
}
.dd-action-ascend-btn {
    --action-color: #c084fc;
    --action-color-rgb: 192, 132, 252;
}
.dd-action-release-btn {
    --action-color: var(--error-warm, #ff7050);
    --action-color-rgb: var(--error-rgb, 220, 70, 70);
}

/* ============================================
   FLOW ASCENSION : popover flottant au-dessus de la modale Detail
   ============================================ */
.dd-ascend-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--black-rgb), 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1500; /* au-dessus de .sanct-detail-overlay (1400) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.dd-ascend-overlay.visible { opacity: 1; }
.dd-ascend-popover {
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    background: linear-gradient(180deg, rgba(var(--bg-body-rgb), 0.97), rgba(var(--black-rgb), 0.94));
    border: 1px solid rgba(var(--gold-rgb), 0.55);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--gold-rgb), 0.18) inset;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transform: translateY(8px);
    transition: transform 0.18s ease;
}
.dd-ascend-overlay.visible .dd-ascend-popover { transform: translateY(0); }

.dd-ascend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.dd-ascend-cancel {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--black-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    color: var(--gold);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.dd-ascend-cancel:hover {
    background: rgba(var(--gold-rgb), 0.2);
    border-color: var(--gold);
    transform: rotate(90deg);
}
.dd-ascend-hint {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 8px 12px;
    background: rgba(var(--gold-rgb), 0.06);
    border-left: 3px solid rgba(var(--gold-rgb), 0.5);
    border-radius: 4px;
    margin-bottom: 8px;
}
.dd-ascend-hint strong { color: var(--gold); }
.dd-ascend-warning {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
    color: var(--error-warm, #ff9070);
    line-height: 1.4;
    padding: 8px 12px;
    background: rgba(var(--error-rgb), 0.1);
    border-left: 3px solid var(--error);
    border-radius: 4px;
    margin-bottom: 8px;
}
.dd-ascend-warning strong { color: var(--error-warm, #ff9070); }
/* La liste réutilise le composant .rbp-list / .reserve-bank-picker-item du
   picker réserve (cf. reserve.css). On ajoute juste les modificateurs propres
   à l'ascension : sélection multiple + badge "RÉSERVE". */
.dd-ascend-scales-list {
    max-height: 320px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    background: rgba(var(--black-rgb), 0.25);
    border-radius: 6px;
}

/* Sélection multiple (5 écailles max). */
.reserve-bank-picker-item.dd-ascend-scale.is-selected {
    background: rgba(var(--gold-rgb), 0.18);
    border-color: rgba(var(--gold-rgb), 0.85);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.35);
}
.reserve-bank-picker-item.dd-ascend-scale.is-selected::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 36px;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Badge "Surnom · Espèce" sur écailles en réserve d'un dragon. Positionné
   en haut à droite, au-dessus du badge tier (qui reste visible plus bas).
   max-width + ellipsis pour ne jamais déborder. */
.dd-ascend-reserve-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    max-width: calc(100% - 50px);
    padding: 2px 6px;
    background: rgba(170, 130, 255, 0.92);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Quand le badge réserve est présent, on remonte légèrement le badge tier
   pour ne pas se chevaucher. */
.reserve-bank-picker-item.dd-ascend-scale.is-in-reserve .rbp-item-tier {
    margin-top: 14px;
}
.reserve-bank-picker-item.dd-ascend-scale.is-in-reserve {
    border-color: rgba(170, 130, 255, 0.45);
}
.reserve-bank-picker-item.dd-ascend-scale.is-in-reserve:hover {
    border-color: rgba(170, 130, 255, 0.8);
}

/* Barre de recherche + chips de filtres (alignés sur le picker réserve). */
.dd-ascend-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    background: rgba(var(--black-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 6px;
    color: var(--text-main);
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.dd-ascend-search:focus {
    border-color: rgba(var(--gold-rgb), 0.7);
    background: rgba(var(--black-rgb), 0.7);
}
.dd-ascend-search::placeholder {
    color: var(--text-secondary);
    opacity: 0.65;
}
.dd-ascend-filters {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dd-ascend-reserve-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    transition: color 0.12s;
}
.dd-ascend-reserve-toggle:hover {
    color: var(--gold-text-warm);
}
.dd-ascend-reserve-toggle input {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    margin: 0;
    flex: none;
    border-radius: 10px;
    background: rgba(var(--black-rgb), 0.6);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    position: relative;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.dd-ascend-reserve-toggle input::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.15s, background 0.15s;
}
.dd-ascend-reserve-toggle input:checked {
    background: rgba(var(--gold-rgb), 0.3);
    border-color: rgba(var(--gold-rgb), 0.8);
}
.dd-ascend-reserve-toggle input:checked::after {
    transform: translateX(14px);
    background: var(--gold);
}
.dd-ascend-popover .rbp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(var(--black-rgb), 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 14px;
    color: var(--text-secondary);
    font-family: 'Oswald', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
    text-transform: uppercase;
}
.dd-ascend-popover .rbp-chip:hover {
    background: rgba(var(--gold-rgb), 0.12);
    border-color: rgba(var(--gold-rgb), 0.45);
    color: var(--gold-text-warm);
}
.dd-ascend-popover .rbp-chip.is-active {
    background: rgba(var(--gold-rgb), 0.22);
    border-color: rgba(var(--gold-rgb), 0.8);
    color: var(--gold);
}
.dd-ascend-popover .rbp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.dd-ascend-popover .rbp-chip-tier.inv-tier-1,
.dd-ascend-popover .rbp-chip-tier.inv-tier-2,
.dd-ascend-popover .rbp-chip-tier.inv-tier-3,
.dd-ascend-popover .rbp-chip-tier.inv-tier-4,
.dd-ascend-popover .rbp-chip-tier.inv-tier-5,
.dd-ascend-popover .rbp-chip-tier.inv-tier-6 {
    color: var(--rarity-color);
    border-color: var(--rarity-color, rgba(var(--gold-rgb), 0.25));
    opacity: 0.65;
}
.dd-ascend-popover .rbp-chip-tier.inv-tier-1.is-active,
.dd-ascend-popover .rbp-chip-tier.inv-tier-2.is-active,
.dd-ascend-popover .rbp-chip-tier.inv-tier-3.is-active,
.dd-ascend-popover .rbp-chip-tier.inv-tier-4.is-active,
.dd-ascend-popover .rbp-chip-tier.inv-tier-5.is-active,
.dd-ascend-popover .rbp-chip-tier.inv-tier-6.is-active {
    opacity: 1;
    background: color-mix(in srgb, var(--rarity-color) 22%, transparent);
}

/* Tooltip rich content shared (.tt-* classes consumed by Tooltip.attach). */
.tt-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--rarity-color, var(--gold));
}
.tt-sub {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.tt-bonus {
    font-family: 'Oswald', sans-serif;
    font-size: 0.88rem;
    color: var(--stat-positive, #7dff7d);
    font-weight: 600;
    margin-bottom: 4px;
}
.tt-desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 4px;
}
.tt-warn {
    margin-top: 6px;
    padding: 4px 6px;
    background: rgba(170, 130, 255, 0.12);
    border-left: 2px solid rgba(170, 130, 255, 0.8);
    color: rgb(220, 200, 255);
    font-family: 'Oswald', sans-serif;
    font-size: 0.76rem;
    border-radius: 3px;
}
.dd-ascend-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--gold-rgb), 0.18);
}
.dd-ascend-counter {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}
.dd-ascend-confirm { min-width: 200px; }

/* Responsive : sur petit ecran, le hero passe en colonne */
@media (max-width: 900px) {
    .dd-hero { grid-template-columns: 1fr; margin-top: 50px; }
    .dd-hero-stage { width: 100%; margin: -60px auto 0; }
}

/* ============================================
   CARDS SANCTUAIRE — REFONTE 2026-05-14
   ============================================
   Plus d'actions inline : toute la card est cliquable -> page detail.
   Layout aere, hover expressif, hint "Detail" en bas qui apparait au survol.
*/
.sanctuary-grid .sanctuary-card {
 padding: 28px 10px 14px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 6px;
 position: relative;
}

/* Hover : lift + bordure rarete + glow (sans texte "Voir le detail"). */
.sanctuary-grid .sanctuary-card:hover {
 transform: translateY(-3px);
 border-color: var(--rarity-color, var(--gold));
 box-shadow: 0 10px 28px rgba(var(--black-rgb), 0.5),
             0 0 0 1px var(--rarity-color, var(--gold));
}

/* Visual : sprite compact */
.sanctuary-grid .sanctuary-card .sanctuary-card-visual {
 padding: 6px 0;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-glow {
 width: 108px;
 height: 108px;
 filter: blur(15px);
}
.sanctuary-grid .sanctuary-card .sanctuary-card-sprite {
 width: 108px;
 height: 108px;
}

/* Main : nom + element + level + PWR */
.sanctuary-grid .sanctuary-card .sanctuary-card-main {
 padding: 0 4px;
 text-align: center;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-name {
 font-size: 1.05rem;
 line-height: 1.1;
 margin-bottom: 2px;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-sub {
 margin-top: 2px;
 gap: 7px;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-element {
 font-size: 0.78rem;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-level {
 font-size: 0.74rem;
 padding: 2px 8px;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-pwr {
 margin-top: 3px;
 font-size: 0.8rem;
 color: var(--gold);
 letter-spacing: 0.8px;
}

/* Stats : 4 colonnes, contrast subtil */
.sanctuary-grid .sanctuary-card .sanctuary-card-stats {
 margin-top: auto;
 padding: 6px;
 gap: 3px;
 background: rgba(var(--black-rgb), 0.35);
 border-top: 1px solid rgba(var(--gold-rgb), 0.12);
 border-bottom: 1px solid rgba(var(--gold-rgb), 0.12);
 border-radius: 6px;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-stats .sstat {
 font-size: 0.78rem;
 padding: 2px 0;
 gap: 3px;
 color: var(--text-main);
}
.sanctuary-grid .sanctuary-card .sanctuary-card-stats .sstat img {
 width: 16px;
 height: 16px;
 opacity: 0.85;
}

/* Rarity badge & ACTIF/DEFENSE en haut (decales pour laisser de la place
   au hint "Detail" en bas) */
.sanctuary-grid .sanctuary-card .sanctuary-card-rarity {
 font-size: 0.65rem;
 padding: 2px 8px;
 top: 8px;
}
.sanctuary-grid .sanctuary-card .sanctuary-card-badge {
 font-size: 0.58rem;
 padding: 2px 8px;
 top: 8px;
 left: 8px;
}
.sanctuary-grid .sanctuary-card .sanctuary-badge-defense {
 top: 26px;
}

/* Card active : bordure gold permanente + petit pulse */
.sanctuary-grid .sanctuary-card.sanctuary-card-active {
 border-color: var(--gold);
 box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.5) inset,
             0 4px 18px rgba(var(--gold-rgb), 0.25);
}
.sanctuary-grid .sanctuary-card.sanctuary-card-active:hover {
 transform: translateY(-3px);
}

/* .panel-sanctuary + onglet Dragons en flex column pour que .sanctuary-grid
   (flex: 1) absorbe la hauteur dispo dans .game-main. Tous les autres
   onglets gardent display: block (legacy). */
.panel-sanctuary.panel.active {
 display: flex;
 flex-direction: column;
 height: 100%;
 min-height: 0;
}
#stab-dragons.sanctuary-tab-content.active {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-height: 0;
}

/* --- Sanctuary Card --- */
.sanctuary-card {
 position: relative;
 background: linear-gradient(165deg, rgba(var(--bg-body-rgb),0.95) 0%, rgba(18,18,36,0.95) 50%, rgba(10,10,22,0.95) 100%);
 border: 1px solid rgba(var(--white-rgb),0.06);
 border-radius: 14px;
 padding: 0;
 cursor: pointer;
 transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
 display: flex;
 flex-direction: column;
 align-items: center;
 /* overflow visible pour que les tooltips (data-tooltip) puissent dépasser
 la card sans être clippés. Le radial glow ::before est clippé via son
 propre border-radius + overflow. */
}
.sanctuary-card::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse at 50% 0%, var(--rarity-color, transparent) 0%, transparent 60%);
 opacity: 0.1;
 pointer-events: none;
 transition: opacity 0.22s;
 border-radius: inherit;
 overflow: hidden;
}

.sanctuary-card:hover {
 transform: translateY(-4px);
 border-color: var(--rarity-color, var(--gold));
 box-shadow: 0 8px 28px rgba(var(--black-rgb),0.4), 0 0 20px color-mix(in srgb, var(--rarity-color, var(--gold)) 25%, transparent);
}
.sanctuary-card:hover::before {
 opacity: 0.18;
}

/* Active card */
.sanctuary-card-active {
 border-color: var(--gold);
 box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.2) inset, 0 4px 20px rgba(var(--gold-rgb),0.18);
 cursor: default;
}
.sanctuary-card-active:hover { transform: none; }

/* Badges */
.sanctuary-card-badge {
 position: absolute;
 top: 10px;
 left: 10px;
 background:
     radial-gradient(ellipse at top right, rgba(255, 215, 90, 0.12), transparent 65%),
     radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 70%),
     linear-gradient(135deg, #1a1408 0%, #261c0a 50%, #1a1408 100%);
 color: #ffe9a8;
 font-family: 'Cinzel', serif;
 font-weight: 700;
 font-size: 0.6rem;
 padding: 4px 12px;
 border-radius: 999px;
 text-transform: uppercase;
 letter-spacing: 1.5px;
 z-index: 3;
 border: 1px solid rgba(255, 200, 80, 0.4);
 box-shadow:
     0 2px 10px rgba(180, 130, 20, 0.35),
     0 0 0 1px rgba(255, 200, 80, 0.25) inset;
}
.sanctuary-badge-defense {
 background:
     radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.10), transparent 65%),
     radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.06), transparent 70%),
     linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
 color: #ffd5cc;
 border-color: rgba(255, 90, 60, 0.4);
 box-shadow:
     0 2px 10px rgba(180, 30, 20, 0.35),
     0 0 0 1px rgba(255, 90, 60, 0.25) inset;
 top: 36px;
}
/* Badge "EN CHASSE" : dragon engage dans une chasse biome (teinte verte nature).
   N'apparait jamais avec ACTIF/DEFENSE (un dragon en chasse ne peut etre ni l'un
   ni l'autre, cf. getBiomeDragonExclusion), donc il occupe le coin haut-gauche. */
.sanctuary-badge-biome {
 background:
     radial-gradient(ellipse at top right, rgba(80, 200, 120, 0.12), transparent 65%),
     radial-gradient(ellipse at bottom left, rgba(60, 170, 100, 0.07), transparent 70%),
     linear-gradient(135deg, #0c1a10 0%, #102616 50%, #0c1a10 100%);
 color: #b8f0cc;
 border-color: rgba(80, 200, 120, 0.4);
 box-shadow:
     0 2px 10px rgba(20, 120, 60, 0.35),
     0 0 0 1px rgba(80, 200, 120, 0.25) inset;
}
/* Card "occupee" (en chasse) : on grise le contenu (sprite, infos, stats) pour
   signaler l'indisponibilite, mais le badge EN CHASSE reste net par-dessus. */
.sanctuary-card-busy .sanctuary-card-visual,
.sanctuary-card-busy .sanctuary-card-main,
.sanctuary-card-busy .sanctuary-card-stats {
 opacity: 0.45;
 filter: grayscale(0.65);
}
.sanctuary-defense-btn {
 background: linear-gradient(135deg, var(--blue)22, rgba(34, 68, 170, 0.13));
 color: var(--btn-discord-blue-light);
 border: 1px solid var(--blue)44;
 font-size: 0.7rem;
 padding: 4px 12px;
 border-radius: 6px;
 cursor: pointer;
 transition: background 0.2s, color 0.2s;
}
.sanctuary-defense-btn:hover {
 background: linear-gradient(135deg, var(--blue)44, rgba(34, 68, 170, 0.27));
 color: var(--white);
}
.sanctuary-card-rarity {
 position: absolute;
 top: 10px;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: fit-content;
 font-family: 'Cinzel', serif;
 font-weight: 700;
 font-size: 0.65rem;
 padding: 3px 8px;
 border-radius: 4px;
 background: rgba(var(--black-rgb),0.6);
 backdrop-filter: blur(4px);
 border: 1px solid var(--rarity-color, var(--gray-600));
 color: var(--rarity-color, var(--gray-400));
 letter-spacing: 0.8px;
 z-index: 3;
}

/* Etoile favori : coin haut-droit de la card, miroir du badge ACTIF a gauche.
   Visible en permanence (gris muted) pour rester decouvrable, doree quand actif. */
.sanctuary-card-fav {
 position: absolute;
 top: 8px;
 right: 8px;
 width: 28px;
 height: 28px;
 padding: 0;
 border-radius: 50%;
 background: rgba(var(--black-rgb), 0.55);
 border: 1px solid rgba(var(--gold-rgb), 0.35);
 color: rgba(var(--gold-rgb), 0.45);
 font-family: 'Cinzel', serif;
 font-size: 1rem;
 line-height: 1;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 z-index: 4;
 transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s, box-shadow 0.15s;
}
.sanctuary-card-fav:hover {
 background: rgba(var(--gold-rgb), 0.22);
 border-color: var(--gold);
 color: var(--gold);
 transform: scale(1.1);
}
.sanctuary-card-fav.is-fav {
 color: var(--gold);
 border-color: var(--gold);
 background: rgba(var(--gold-rgb), 0.2);
 box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5);
}
.sanctuary-card-fav.is-fav:hover {
 background: rgba(var(--gold-rgb), 0.3);
 transform: scale(1.1);
}

/* Release button - top right corner */
/* Icone "relacher" dans le coin - trop compact pour la DA danger full,
 mais on aligne ses tokens de couleur sur la famille danger. */
.sanctuary-release-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 width: 26px;
 height: 26px;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.75rem;
 line-height: 1;
 border-radius: 8px;
 background: rgba(var(--error-rgb), 0.1);
 border: 1px solid rgba(var(--error-rgb), 0.35);
 color: var(--error-text);
 z-index: 4;
 opacity: 0;
 transition:
 opacity 0.2s ease,
 background 0.15s ease,
 border-color 0.15s ease,
 color 0.15s ease;
 pointer-events: auto;
}
.sanctuary-card:hover .sanctuary-release-btn {
 opacity: 1;
}
.sanctuary-release-btn:hover {
 background: rgba(var(--error-rgb), 0.25);
 border-color: rgba(var(--error-rgb), 0.7);
 color: var(--error-warm);
}

/* Dragon visual area */
.sanctuary-card-visual {
 position: relative;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px 0 8px;
}
.sanctuary-card-glow {
 position: absolute;
 width: 140px;
 height: 140px;
 border-radius: 50%;
 filter: blur(25px);
 opacity: 0.5;
 animation: glowPulse 3s ease-in-out infinite;
}
.sanctuary-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;
}
.sanctuary-card:hover .sanctuary-card-sprite {
 transform: scale(1.08);
}

/* Card info */
.sanctuary-card-main {
 text-align: center;
 width: 100%;
 padding: 0 8px 6px;
 z-index: 1;
}
.sanctuary-card-name {
 font-family: 'Cinzel', serif;
 font-weight: 700;
 font-size: 1.05rem;
 color: var(--text-main);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 text-shadow: 0 1px 4px rgba(var(--black-rgb),0.5);
}
.sanctuary-card-sub {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 4px;
}
.sanctuary-card-element {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--text-secondary);
 font-size: 0.75rem;
}
.sanctuary-card-sub .icon-btn-sm { width: 14px; height: 14px; }
.sanctuary-card-level {
 display: inline-block;
 color: var(--gold);
 background: rgba(var(--gold-rgb),0.08);
 border: 1px solid rgba(var(--gold-rgb),0.2);
 border-radius: 8px;
 font-family: 'Cinzel', serif;
 font-size: 0.7rem;
 font-weight: 700;
 padding: 1px 10px;
 letter-spacing: 0.5px;
}
.sanctuary-card-pwr {
 margin-top: 4px;
 font-family: 'Oswald', sans-serif;
 font-size: 0.7rem;
 font-weight: 600;
 color: rgba(var(--gold-rgb),0.6);
 letter-spacing: 1px;
}

/* Stats row */
.sanctuary-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;
}
.sanctuary-card-stats .sstat {
 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;
}
.sanctuary-card-stats .sstat:hover {
 background: rgba(var(--white-rgb),0.04);
}
.sanctuary-card-stats .sstat img { width: 18px; height: 18px; opacity: 0.8; }

/* Action buttons */
.sanctuary-card-actions {
 display: flex;
 gap: 4px;
 width: 100%;
 padding: 6px 10px 10px;
}
/* Bouton "Équiper" - layout uniquement. La DA (fond, liseré, texte, shadows,
 hover) est pilotée par .btn-gold dans components.css (DA unifiée). */
.btn.sanctuary-equip-btn {
 flex: 1;
 z-index: 1;
}

/* Rarity colors + border tint */
.sanctuary-rarity-fragile { color: var(--rarity-fragile); }
.sanctuary-rarity-robuste { color: var(--rarity-robuste); }
.sanctuary-rarity-alpha { color: var(--rarity-alpha); }
.sanctuary-rarity-ancien { color: var(--rarity-ancien); }
.sanctuary-rarity-primordial { color: var(--rarity-primordial); }
.sanctuary-rarity-primordial_pur { color: var(--rarity-primordial_pur); }
/* Theme d'element : tint subtil sur toute la modal detail */
.sanct-detail-view.element-theme-fire,
.mastery-modal.element-theme-fire            { --element-color: var(--elem-fire);      --element-rgb: var(--elem-fire-rgb); }
.sanct-detail-view.element-theme-eau,
.sanct-detail-view.element-theme-water,
.mastery-modal.element-theme-eau,
.mastery-modal.element-theme-water            { --element-color: var(--blue);            --element-rgb: var(--blue-rgb); }
.sanct-detail-view.element-theme-earth,
.mastery-modal.element-theme-earth           { --element-color: var(--elem-earth);     --element-rgb: var(--elem-earth-rgb); }
.sanct-detail-view.element-theme-lightning,
.mastery-modal.element-theme-lightning       { --element-color: var(--elem-lightning); --element-rgb: var(--elem-lightning-rgb); }
.sanct-detail-view.element-theme-wind,
.mastery-modal.element-theme-wind            { --element-color: var(--elem-wind);      --element-rgb: var(--elem-wind-rgb); }
.sanct-detail-view.element-theme-tenebres,
.mastery-modal.element-theme-tenebres        { --element-color: var(--elem-tenebres);  --element-rgb: var(--elem-tenebres-rgb); }
.sanct-detail-view.element-theme-glace,
.mastery-modal.element-theme-glace           { --element-color: var(--elem-glace);     --element-rgb: var(--elem-glace-rgb); }
.sanct-detail-view.element-theme-plante,
.mastery-modal.element-theme-plante          { --element-color: var(--elem-plante);    --element-rgb: var(--elem-plante-rgb); }
.sanct-detail-view.element-theme-explosion,
.mastery-modal.element-theme-explosion       { --element-color: var(--elem-explosion); --element-rgb: var(--elem-explosion-rgb); }
.sanct-detail-view.element-theme-boue,
.mastery-modal.element-theme-boue            { --element-color: var(--elem-boue);      --element-rgb: var(--elem-boue-rgb); }

.sanctuary-card.rarity-border-fragile,
.dd-hero.rarity-border-fragile { --rarity-color: var(--rarity-fragile); }
.sanctuary-card.rarity-border-robuste,
.dd-hero.rarity-border-robuste { --rarity-color: var(--rarity-robuste); }
.sanctuary-card.rarity-border-alpha,
.dd-hero.rarity-border-alpha { --rarity-color: var(--rarity-alpha); }
.sanctuary-card.rarity-border-ancien,
.dd-hero.rarity-border-ancien { --rarity-color: var(--rarity-ancien); }
.sanctuary-card.rarity-border-primordial,
.dd-hero.rarity-border-primordial { --rarity-color: var(--rarity-primordial); }
.sanctuary-card.rarity-border-primordial_pur,
.dd-hero.rarity-border-primordial_pur { --rarity-color: var(--rarity-primordial_pur); }
/* Les badges de rarete affichent le label tel qu'il est passé par le code (déjà
 capitalisé depuis GAME_DATA.rarities[].label / GC.RARITY_LABELS). Pas de
 text-transform global : "Primordial pur" doit rester "Primordial pur" et
 non pas "Primordial Pur" (capitalize de chaque mot). */

/* Rarity colors */
.inv-rarity-fragile { --rarity-color: var(--rarity-fragile); }
.inv-rarity-robuste { --rarity-color: var(--rarity-robuste); }
.inv-rarity-alpha { --rarity-color: var(--rarity-alpha); }
.inv-rarity-ancien { --rarity-color: var(--rarity-ancien); }
.inv-rarity-primordial { --rarity-color: var(--rarity-primordial); }
.inv-tier-1 { --rarity-color: var(--rarity-fragile); }
.inv-tier-2 { --rarity-color: var(--rarity-robuste); }
.inv-tier-3 { --rarity-color: var(--rarity-alpha); }
.inv-tier-4 { --rarity-color: var(--rarity-ancien); }
.inv-tier-5 { --rarity-color: var(--rarity-primordial); }
/* T6 Primordial pur : cyan mythique. Couleur de texte/bordure statique (cyan),
 et seule l'aura (box-shadow / drop-shadow) pulse en intensité. Pattern aligné
 sur T5 (gentle breathing) - pas de cycle de teintes qui faisait effet strobe. */
.inv-tier-6 {
 --rarity-color: var(--rarity-primordial_pur, #22d3ee);
}

/* Aura glow par tier - inventaire (sur l'icone) */
.inv-item.inv-tier-2 .inv-item-icon { filter: drop-shadow(0 0 8px rgba(var(--rarity-robuste-rgb), 0.4)); }
.inv-item.inv-tier-3 .inv-item-icon { filter: drop-shadow(0 0 10px rgba(var(--rarity-alpha-rgb), 0.5)); }
.inv-item.inv-tier-4 .inv-item-icon { filter: drop-shadow(0 0 12px rgba(var(--rarity-ancien-rgb), 0.6)); }
.inv-item.inv-tier-5 .inv-item-icon { filter: drop-shadow(0 0 16px rgba(var(--rarity-primordial-rgb), 0.7)); animation: aura-pulse-t5-icon 2s ease-in-out infinite; }
.inv-item.inv-tier-6 .inv-item-icon { filter: drop-shadow(0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7)); animation: aura-pulse-t6-icon 2.5s ease-in-out infinite; }

/* Aura glow par tier - scale picker */
.scale-picker-item.inv-tier-2 { box-shadow: 0 0 8px rgba(var(--rarity-robuste-rgb), 0.4); }
.scale-picker-item.inv-tier-3 { box-shadow: 0 0 10px rgba(var(--rarity-alpha-rgb), 0.5); }
.scale-picker-item.inv-tier-4 { box-shadow: 0 0 12px rgba(var(--rarity-ancien-rgb), 0.6); }
.scale-picker-item.inv-tier-5 { box-shadow: 0 0 16px rgba(var(--rarity-primordial-rgb), 0.7); animation: aura-pulse-t5 2s ease-in-out infinite; }
.scale-picker-item.inv-tier-6 { box-shadow: 0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7); animation: aura-pulse-t6 2.5s ease-in-out infinite; }

@keyframes aura-pulse-t5 {
 0%, 100% { box-shadow: 0 0 16px rgba(var(--rarity-primordial-rgb), 0.7); }
 50% { box-shadow: 0 0 24px rgba(var(--rarity-primordial-rgb), 0.9), 0 0 40px rgba(var(--rarity-primordial-rgb), 0.3); }
}
@keyframes aura-pulse-t5-icon {
 0%, 100% { filter: drop-shadow(0 0 16px rgba(var(--rarity-primordial-rgb), 0.7)); }
 50% { filter: drop-shadow(0 0 24px rgba(var(--rarity-primordial-rgb), 0.9)) drop-shadow(0 0 40px rgba(var(--rarity-primordial-rgb), 0.3)); }
}
/* Cyan mythique T6 (Primordial pur) : pulse simple monochrome (intensité qui
 respire), aligné sur le pattern T5. Pas de cycle de teintes (effet strobe),
 pas de variation de taille agressive. 2 keyframes seulement, 2.5s smooth. */
@keyframes aura-pulse-t6 {
 0%, 100% { box-shadow: 0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7); }
 50% { box-shadow: 0 0 28px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.9), 0 0 48px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.35); }
}
@keyframes aura-pulse-t6-icon {
 0%, 100% { filter: drop-shadow(0 0 18px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.7)); }
 50% { filter: drop-shadow(0 0 28px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.9)) drop-shadow(0 0 48px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.3)); }
}
/* Helper class : couleur cyan statique + glow cyan subtil. Pas d'animation
 sur la couleur (le strobe arc-en-ciel d'avant rendait le texte illisible). */
.rarity-primordial-pur,
.rarity-primordial_pur {
 color: var(--rarity-primordial_pur, #22d3ee);
 text-shadow: 0 0 8px rgba(var(--rarity-primordial_pur-rgb, 34, 211, 238), 0.5);
}

/* Tooltip générique (composant réutilisable) */
.tooltip {
 position: fixed;
 pointer-events: none;
 /* z-index: 100000 — strictement au-dessus de toutes les modales (overlays a 9999),
    sinon le tooltip passe derrière selon l'ordre DOM. */
 z-index: 100000;
 background: linear-gradient(160deg, var(--bg-input), var(--bg-deep));
 border: 1px solid var(--gold);
 border-radius: 6px;
 padding: 12px 14px;
 min-width: 220px;
 max-width: 280px;
 box-shadow: 0 8px 24px rgba(var(--black-rgb),0.7), 0 0 0 1px rgba(var(--gold-rgb),0.2);
 font-family: 'Roboto Condensed', sans-serif;
 color: var(--text-main);
 font-size: 0.78rem;
 line-height: 1.4;
}
.tooltip-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding-bottom: 8px;
 margin-bottom: 8px;
 border-bottom: 1px solid rgba(var(--gold-rgb),0.25);
}
.tooltip-icon {
 width: 32px;
 height: 32px;
 }
.tooltip-title {
 font-family: 'Cinzel', serif;
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--white);
 flex: 1;
}
.tooltip-rarity {
 font-family: 'Oswald', sans-serif;
 font-size: 0.7rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 padding: 2px 8px;
 border-radius: 3px;
 background: rgba(var(--black-rgb),0.4);
}
.tooltip-row {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 margin: 3px 0;
}
.tooltip-key {
 color: var(--text-secondary);
 text-transform: uppercase;
 font-size: 0.7rem;
 letter-spacing: 0.5px;
}
.tooltip-val {
 color: var(--text-main);
 font-weight: 600;
 text-align: right;
}

/* Tooltip equipement Sanctuaire : liste des slots ecailles + cristal du dragon */
.tooltip-equip-list {
 display: flex;
 flex-direction: column;
 gap: 4px;
 min-width: 240px;
}
.tooltip-equip-row {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 3px 4px;
 border-radius: 4px;
 background: rgba(var(--black-rgb), 0.25);
}
.tooltip-equip-row.tooltip-equip-empty {
 opacity: 0.45;
}
.tooltip-equip-row.tooltip-equip-crystal {
 border-top: 1px solid rgba(var(--gold-rgb), 0.2);
 margin-top: 4px;
 padding-top: 5px;
}
.tooltip-equip-slot {
 font-family: 'Oswald', sans-serif;
 font-size: 0.7rem;
 color: var(--gold);
 width: 18px;
 text-align: center;
 flex-shrink: 0;
}
.tooltip-equip-icon {
 width: 20px;
 height: 20px;
 object-fit: contain;
 flex-shrink: 0;
}
.tooltip-equip-name {
 flex: 1;
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 0.78rem;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.tooltip-equip-bonus {
 font-family: 'Oswald', sans-serif;
 font-size: 0.78rem;
 color: var(--success);
 font-weight: 600;
 white-space: nowrap;
}
.tooltip-desc {
 margin-top: 8px;
 padding-top: 8px;
 color: var(--text-card);
 font-style: italic;
 font-size: 0.75rem;
}
.tooltip-lore {
 margin-top: 8px;
 color: var(--text-main);
 font-size: 0.78rem;
 line-height: 1.4;
 /* Force la NON-italique meme si un parent applique font-style:italic
    (ex: rendu inline d'un container qui force italic). Le pattern unifie
    aux skill tooltips veut que le lore soit en blanc normal lisible. */
 font-style: normal !important;
}
/* Mots-clés de status (Gel, Brûlure, Marque d'Ombre, etc.) - couleur inline
 par span via wrapStatusKeywords (PHP). Le font-weight ressort sans surcharger
 la lecture du reste de la phrase. */
.kw-status {
 font-weight: 600;
}

/* Mini-blocs explicatifs des keywords status reference dans une description
 de sort (panel profil, tooltip cac/ulti/passif). Generes par
 gamedata.php::_resolveStatusKeyword + injection côté inventory.js.
 Ex Verath cac : "Sève toxique" -> bloc "Empêche la cible de se soigner". */
.tooltip-keywords {
 margin-top: 8px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.tooltip-kw-block {
 /* Pas de bordure ni de fond : juste un bloc texte sobre qui suit la
 description principale, en cohérence avec la DA "Plaque d'obsidienne
 tiède". Le seul accent visuel est le nom coloré (élément du status). */
}
.tooltip-kw-name {
 color: inherit; /* prend la couleur element du block parent (style inline) */
 font-weight: 600;
 font-size: 0.74rem;
}
.tooltip-kw-desc {
 color: var(--text-card);
 font-size: 0.72rem;
 line-height: 1.35;
}

.tooltip-hint {
 margin-top: 8px;
 padding-top: 8px;
 color: var(--gold);
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

/* Tooltip forge : sections verticales (stat principale + stats secondaires)
 pour accueillir des valeurs longues sans wrap bancal. */
.tooltip-forge-section {
 margin-top: 8px;
 padding-top: 6px;
 
}
.tooltip-forge-section-title {
 color: var(--text-secondary);
 text-transform: uppercase;
 font-size: 0.68rem;
 letter-spacing: 0.6px;
 margin-bottom: 4px;
}
.tooltip-forge-primary {
 color: var(--gold);
 font-weight: 700;
 font-size: 0.95rem;
 line-height: 1.25;
}
.tooltip-forge-tag {
 color: var(--text-dim);
 font-style: italic;
 font-size: 0.75rem;
 margin-top: 2px;
}
.tooltip-forge-secondary {
 color: var(--text-main);
 font-weight: 500;
 font-size: 0.85rem;
 line-height: 1.3;
 margin-top: 2px;
}
.tooltip-forge-secondary + .tooltip-forge-secondary {
 margin-top: 1px;
}