/* ======================= HÉROS =======================
   La fiche à gauche — le héros en pied, son équipement autour de lui, son
   deck dessous et le départ — et le codex à droite, qui range tout ce qu'il
   possède. Une seule question par bloc : qui il est, ce qu'il a.

   1. Scène            5. Codex : onglets, sac, filtres
   2. Fiche : en-tête  6. Caractéristiques, apport, panoplies
   3. Poupée           7. Forge, tenues, défis, vitrine
   3b. Ornements       8. Outils de test
   4. Deck et départ
   ===================================================================== */

/* ---------- 1. Scène ----------
   Le profil se tient dans une salle. Le décor passe SOUS des voiles sombres :
   il donne un lieu, et se tait. */
#main-menu {
    background:
        radial-gradient(ellipse 45% 60% at 30% 58%, rgba(194, 232, 0, 0.07), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 171, 69, 0.1), transparent 70%),
        linear-gradient(90deg, rgba(11, 11, 8, 0.55) 0%, rgba(11, 11, 8, 0.35) 40%, rgba(11, 11, 8, 0.88) 70%),
        linear-gradient(180deg, rgba(11, 11, 8, 0.6), rgba(11, 11, 8, 0.92)),
        url('../assets/backdrops/bg_profile.webp') center / cover no-repeat,
        var(--ink);
}

.hub-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 580px);
    gap: 28px;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}

/* Récompenses en attente : un bandeau cliquable, en tête de l'écran. */
.hub-notice {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -6px 0 14px;
    padding: 6px 7px 6px 16px;
    border: 1px solid color-mix(in srgb, var(--arcane-lit) 50%, transparent);
    border-radius: 40px;
    background: linear-gradient(90deg, rgba(123, 92, 255, 0.28), rgba(17, 17, 14, 0.8));
    color: var(--text-soft);
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(166, 139, 255, 0.18);
    transition: border-color var(--speed), box-shadow var(--speed);
}

.hub-notice:hover { border-color: var(--arcane-lit); box-shadow: 0 0 30px rgba(166, 139, 255, 0.34); }
.notice-icon { color: var(--arcane-lit); font-size: 1rem; line-height: 1; }
.notice-text b { color: #fff; }

.notice-cta {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--arcane-lit);
    color: #181815;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- 2. Fiche : en-tête ---------- */
.hero-sheet {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    min-height: 0;
}

/* Trois colonnes égales : le rond de niveau, la plaque de nom au centre exact
   (donc au-dessus du héros, centré lui aussi), le bouton Apparence. */
.sheet-head {
    display: grid;
    grid-template-columns: 1fr minmax(0, 370px) 1fr;
    align-items: center;
    gap: 16px;
    padding: 4px 4px 0;
}
.sheet-head .level-ring { justify-self: start; }
.sheet-head .skin-link { justify-self: end; }

.level-ring {
    --ring: 0;
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* L'anneau doré matérialise l'XP : le regard le capte sans lire un chiffre. */
    background: conic-gradient(var(--gold-lit) calc(var(--ring) * 360deg), rgba(255, 255, 255, 0.08) 0);
    padding: 3px;
    box-shadow: 0 0 22px rgba(201, 171, 69, 0.25);
}

.level-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #2f2f2c, #0f0f0c);
}

.level-number {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--gold-lit);
    text-shadow: 0 0 14px rgba(201, 171, 69, 0.5);
}

.sheet-id { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/*
 * LA PLAQUE DE NOM, comme dans Dofus : « Goultard », son titre dessous, et
 * l'ornement gagné aux défis tout autour. La boîte a les proportions de
 * l'ornement entier (--ratio) : rien ne déborde sur ses voisins. Le nom se
 * pose dans la bande libre entre les pièces de l'ornement (--px, --py, --pw,
 * --ph, posés par renderHeroFrame depuis ornement-plaques.js).
 */
.hero-nameplate {
    position: relative;
    width: 100%;
    aspect-ratio: calc(1 / var(--ratio, 0.45));
}

.hero-ornament { position: absolute; inset: 0; pointer-events: none; }

.hero-plaque {
    position: absolute;
    left: calc(var(--px, 0.05) * 100%);
    top: calc(var(--py, 0.25) * 100%);
    width: calc(var(--pw, 0.9) * 100%);
    height: calc(var(--ph, 0.5) * 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    z-index: 1;
    /* Les bandes n'ont pas toutes la même largeur : le texte suit la sienne. */
    container-type: inline-size;
}

.hero-name {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(0.85rem, 11cqi, 1.3rem);
    line-height: 1.1;
    white-space: nowrap;
    color: var(--text);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}

/* Le titre gagné aux défis, sous le nom : toujours sur une ligne. */
.hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(0.5rem, 5.6cqi, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--gold-lit);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.xp-block { display: flex; align-items: center; gap: 12px; width: min(320px, 100%); }
.xp-block small { flex-shrink: 0; font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.xp-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #5a3fc0, var(--arcane-lit));
    box-shadow: 0 0 10px rgba(166, 139, 255, 0.55);
    transition: width 0.4s ease;
}

/* Un seul accès vers l'onglet des tenues, discret. */
.skin-link {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-soft);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color var(--speed), color var(--speed);
}

.skin-link:hover { border-color: var(--gold); color: var(--gold-lit); }

/* ---------- 3. Poupée ----------
   Le héros en pied au centre, sur un cercle de runes ; ses sept emplacements
   l'encadrent en deux colonnes. La poupée se pose PAR-DESSUS la scène : seuls
   les emplacements attrapent la souris. */
.sheet-stage {
    position: relative;
    min-height: 260px;
    margin: 6px 0 4px;
}

.hero-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Le sol : un disque de lumière dorée et un anneau de runes turquoise. */
.hero-glow {
    position: absolute;
    left: 50%;
    bottom: 1%;
    width: min(460px, 70%);
    aspect-ratio: 3.4;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(201, 171, 69, 0.28), rgba(201, 171, 69, 0.08) 45%, transparent 70%);
    box-shadow: 0 0 0 1px rgba(194, 232, 0, 0.25), 0 0 40px rgba(194, 232, 0, 0.12), inset 0 0 30px rgba(194, 232, 0, 0.15);
    pointer-events: none;
}

.hero-glow::after {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dashed rgba(194, 232, 0, 0.35);
}

/*
 * Le portrait s'inscrit en entier dans la scène, les bottes sur le sol. Les
 * marges tiennent le héros DANS son ornement de défis, dont le bord le plus
 * épais fait environ 35 px. La boîte du héros garde les proportions de la
 * toile (2:3) : c'est sur elle que se lisent les ancrages de l'arme et du
 * bouclier.
 */
.hero-skin {
    position: absolute;
    inset: 0;
    padding: 18px 40px 3%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    container-type: size;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8));
}
.hero-skin .pd { height: min(100cqh, 150cqw); }

/* ---------- Le héros habillé (js/ui/paperdoll.js) ----------
   Repris par la figurine du plateau. Chaque pièce se pose par son point de
   prise (--gx, --gy) sur l'ancrage de la main (--x, --y), pivote autour de
   lui et se retourne au besoin (--m). */
.pd { position: relative; display: block; aspect-ratio: 2 / 3; }
.pd-corps, .pd-porte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pd-piece {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    transform: translate(calc(-1 * var(--gx)), calc(-1 * var(--gy))) rotate(var(--r)) scaleX(var(--m));
    transform-origin: var(--gx) var(--gy);
    pointer-events: none;
}

.hero-glow { z-index: 0; }
.hero-skin { z-index: 1; }

/* Le familier compagnon, au pied de Goultard et un peu devant lui, du côté
   où il ne regarde pas : comme le familier d'un personnage de Dofus. */
.hero-stage { container-type: size; }
.hero-familier {
    position: absolute;
    z-index: 2;
    left: calc(50% - 30cqh);
    bottom: 2%;
    width: 24cqh;
    height: 24cqh;
    pointer-events: none;
}
.hero-familier-art { display: grid; place-items: end center; width: 100%; height: 100%; }
.hero-familier-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: 50% 100%;
    animation: penIdle 2.6s ease-in-out infinite;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7));
}
.hero-familier-art > span { font-size: 12cqh; }
/* Le modèle de Dofus : ancré par ses pattes au sol, à côté et un peu devant
   Goultard. `--fam-u` est un pixel de carte de Dofus à l'échelle du portrait. */
.hero-familier.modele { --fam-u: 0.62cqh; width: 0; height: 0; left: calc(50% - 15cqh); bottom: 6%; }
.hero-familier-pied { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hero-familier[data-rarity="legendary"] .hero-familier-img { filter: drop-shadow(0 0 10px rgba(240, 180, 41, 0.75)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); }
.hero-familier[data-rarity="mythic"] .hero-familier-img { filter: drop-shadow(0 0 12px rgba(255, 59, 92, 0.8)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); }
@media (prefers-reduced-motion: reduce) { .hero-familier-img { animation: none; } }

/*
 * Largeurs de la poupée : une colonne d'emplacements occupe exactement
 * `--rail` (case, écart, libellé), quelle que soit la longueur d'un libellé.
 */
.sheet-stage {
    --slot: 64px;
    --slot-gap: 12px;
    --slot-label: 60px;
    --rail: calc(var(--slot) + var(--slot-gap) + var(--slot-label));
}

.paperdoll {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    justify-content: space-between;
    width: min(100%, 640px);
    margin: 0 auto;
    pointer-events: none;
}

.doll-figure { display: none; }

.doll-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    pointer-events: auto;
}

/* Les deux colonnes se calent sur le bas : les bagues ferment chacune à la même hauteur. */
.doll-col { justify-content: flex-end; padding-bottom: 5%; }

.doll-slot {
    display: flex;
    align-items: center;
    gap: var(--slot-gap);
}

.doll-col.right .doll-slot { flex-direction: row-reverse; }
.doll-col.right .doll-slot small { text-align: right; }

.doll-slot small {
    width: var(--slot-label);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 4px #000;
}

.equip-slot {
    --rar: rgba(201, 171, 69, 0.22);
    position: relative;
    width: var(--slot, 64px);
    height: var(--slot, 64px);
    border-radius: 6px;
    border: 1px solid var(--rar);
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7)), rgba(15, 15, 12, 0.88);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8), 0 8px 18px rgba(0, 0, 0, 0.45);
    transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}

.equip-slot:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8), 0 0 22px color-mix(in srgb, var(--rar) 60%, transparent);
}

.equip-slot.filled { box-shadow: inset 0 0 18px color-mix(in srgb, var(--rar) 28%, rgba(0, 0, 0, 0.85)), 0 8px 18px rgba(0, 0, 0, 0.45); }
.equip-slot.drag-over { border-color: var(--gold); box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8), 0 0 20px rgba(201, 171, 69, 0.5); }
/* Posée dans sa case, pas dans la grille : une icône plus haute que large
   (un bouclier) faisait grandir la rangée et se voyait rognée par le bas. */
.equip-slot .item-art { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.slot-ghost { font-size: 1.4rem; opacity: 0.4; filter: grayscale(1) brightness(1.3); }
/* Silhouette de la pièce attendue : assez grande pour se reconnaître, assez
   pâle pour ne jamais passer pour un objet porté. */
.ghost-art { display: block; width: 2.3rem; height: 2.3rem; object-fit: contain; }

.slot-sheen, .item-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 45%);
}

/* ---------- Les six Dofus ----------
   Sous la poupée, comme la rangée des Dofus de l'inventaire de Dofus : un
   Dofus éveillé s'y pose, un Dofus endormi laisse sa case en creux. */
.sheet-dofus { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 0; }
.dofus-row { display: flex; gap: 8px; }
.equip-slot.dofus-slot { width: 46px; height: 46px; border-radius: 50%; padding: 0; color: inherit; font: inherit; }
.dofus-slot-art { display: grid; place-items: center; width: 100%; height: 100%; }
.equip-slot.dofus-slot.filled { --rar: var(--gold); }
.equip-slot.dofus-slot.empty { border-style: dashed; }
.equip-slot.dofus-slot.empty .item-art { opacity: 0.22; filter: grayscale(1) brightness(0.8); }
.dofus-slot-niv {
    position: absolute; right: 2px; bottom: 2px;
    min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
    font-size: 0.62rem; font-weight: 700; line-height: 15px; text-align: center;
    color: #14140f; background: var(--gold-lit);
}

/* ---------- 4. Deck et départ ---------- */
.sheet-deck {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 0 12px;
}

.deck-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}

.active-spells-container { display: flex; gap: 8px; }
.equip-slot.spell { width: 54px; height: 54px; font-size: 1.35rem; }
.equip-slot.spell.empty { border-style: dashed; }
.deck-rule { margin: 0; font-size: 0.74rem; color: var(--text-dim); font-style: italic; }

/* Le départ : où l'on ira, et le seul aplat doré de l'écran. */
.sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 14px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(15, 15, 12, 0.9), rgba(15, 15, 12, 0.6));
    box-shadow: var(--lift);
}

.hub-world {
    margin: 0;
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

.hub-world.done { color: var(--verdant); }

/* ---------- 5. Codex ---------- */
.codex {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/*
 * Onglets : l'icône peinte au-dessus du mot, six parts égales. L'onglet ouvert
 * s'éclaire et se souligne d'or ; les autres restent en retrait.
 */
.tabs-nav {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tab-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 2px 9px;
    border: 0;
    background: none;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--speed), background var(--speed);
}

.tab-icon { display: block; width: 28px; height: 28px; flex-shrink: 0; filter: saturate(0.6) brightness(0.75); transition: filter var(--speed), transform var(--speed); }
.tab-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.025); }
.tab-btn:hover .tab-icon { filter: none; }

.tab-btn::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 2px;
    background: var(--gold-lit);
    box-shadow: 0 0 10px var(--gold);
    transform: scaleX(0);
    transition: transform var(--speed) var(--ease-out);
}

.tab-btn.active { color: var(--gold-lit); background: linear-gradient(180deg, transparent, rgba(201, 171, 69, 0.08)); }
.tab-btn.active .tab-icon { filter: none; transform: translateY(-1px); }
.tab-btn.active::after { transform: scaleX(1); }

/* La pastille (points à placer, défis prêts) se pose dans l'angle de l'onglet. */
.tabs-nav .tab-btn .tab-badge { position: absolute; top: 5px; right: 14%; margin: 0; }

.tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tab-foot { padding: 12px 16px 16px; flex-shrink: 0; border-top: 1px solid var(--line-soft); }
.tab-foot .btn.wide { margin-top: 0; }

.inv-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; flex-wrap: wrap; }
.inv-hint { flex: 1; color: var(--text-dim); font-size: 0.8rem; min-width: 110px; }
.inv-count { font-size: 0.86rem; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.inv-count.full { color: var(--blood-lit); font-weight: 700; }

/* ---------- Les parties du sac : équipement, consommables, ressources ---------- */
.sac-parties { display: flex; gap: 4px; padding: 0 16px 10px; }
.sac-partie {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--well);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.sac-partie small { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sac-partie:hover { border-color: var(--line-strong); color: var(--text); }
.sac-partie.active { border-color: var(--lime); color: var(--lime-lit); background: color-mix(in srgb, var(--lime) 8%, var(--well)); }

.ressources { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.ressource {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}
.ressource.vide { opacity: 0.5; }
.ressource-art { display: grid; place-items: center; width: 42px; height: 42px; }
.ressource-img { max-width: 100%; max-height: 100%; }
.ressource-nom { display: flex; flex-direction: column; font-size: 0.86rem; line-height: 1.3; }
.ressource-nom small { font-size: 0.72rem; color: var(--text-dim); }
.ressource-qte { font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Les objets rares : ce qu'on a, à la couleur de l'or ; ce qui manque, en
   creux, l'icône éteinte et l'endroit où le chercher. */
.rares { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.rare {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    background: var(--well);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line-soft));
    border-radius: 6px;
}
.rare.manque { border-style: dashed; border-color: var(--line-soft); }
.rare-art { display: grid; place-items: center; width: 48px; height: 48px; }
.rare-img { max-width: 100%; max-height: 100%; }
.rare.manque .rare-img { filter: grayscale(1) brightness(0.35); }
.rare-corps { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; line-height: 1.35; }
.rare-corps b { color: var(--gold-lit); }
.rare.manque .rare-corps b { color: var(--text-dim); font-style: italic; }
.rare-corps small { font-size: 0.74rem; color: var(--text-soft); }
.rare-corps .rare-source { color: var(--text-dim); }

/* ---------- Filtres et tris : sac, grimoire, boutique ---------- */
.inv-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0 16px 10px; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--speed), background var(--speed), color var(--speed);
}

.filter-chip small { font-size: 0.74rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Marque du filtre : une illustration quand elle existe, sinon le signe. */
.chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    font-size: 0.78rem;
    line-height: 1;
}

.chip-mark-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.filter-chip.empty .chip-mark { filter: grayscale(0.8); }
.filter-chip:hover { border-color: var(--line-strong); color: #fff; }
.filter-chip:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.filter-chip.active { border-color: var(--gold); background: rgba(201, 171, 69, 0.14); color: var(--gold-lit); }
.filter-chip.active small { color: var(--gold); }
.filter-chip.empty:not(.active) { opacity: 0.45; }

.sort-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}

.sort-pick select {
    padding: 4px 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--stone-900);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.sort-pick select:focus-visible { outline: 1px solid var(--gold); }

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    /* Une case carrée masque son débordement : sa taille minimale tombe à zéro,
       et dans une grille de hauteur fixée les rangées se tassaient jusqu'à faire
       chevaucher les cases d'un sac bien rempli. La rangée suit la case. */
    grid-auto-rows: max-content;
    gap: 8px;
    padding: 12px 16px 18px;
    background: var(--well);
    box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.35);
    flex: 1;
    overflow-y: auto;
    align-content: start;
    min-height: 0;
}

.empty-hint {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-lore);
    font-style: italic;
    font-size: 1.05rem;
    padding: 30px 10px;
    line-height: 1.6;
}

.inv-item {
    position: relative;
    aspect-ratio: 1;
    --rar: var(--stone-500);
    background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.72)), rgba(17, 17, 14, 0.9);
    border: 1px solid var(--rar);
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    cursor: grab;
    overflow: hidden;
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--rar) 20%, rgba(0, 0, 0, 0.85));
    transition: transform 0.13s ease;
}

/* Au survol, la case monte et s'allume. On n'anime que `transform` et
   l'opacité d'une lueur posée dessus : animer l'ombre portée faisait
   repeindre tout le sac à chaque case survolée, et un sac plein ramait. */
.inv-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 40%, color-mix(in srgb, var(--rar) 50%, transparent));
    opacity: 0;
    transition: opacity 0.13s ease;
}
.inv-item:hover { transform: translateY(-3px) scale(1.05); z-index: 5; }
.inv-item:hover::after { opacity: 1; }

.inv-item:active { cursor: grabbing; }
.inv-item.locked { filter: saturate(0.7); }
.inv-item .item-art { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }

/* Repli emoji quand un objet n'a pas encore d'illustration peinte. */
.item-icon { font-size: 1.35rem; line-height: 1; }

.lock-badge, .rarity-pip { position: absolute; pointer-events: none; }
.lock-badge { top: 2px; right: 2px; font-size: 0.6rem; line-height: 1; }

.rarity-pip {
    bottom: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rar);
    box-shadow: 0 0 7px var(--rar);
}

/* Pièce qui ferait mieux que l'équipement porté : une flèche verte, dans le coin libre. */
.upgrade-badge {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 0.62rem;
    line-height: 1;
    color: var(--verdant);
    text-shadow: 0 0 6px rgba(82, 209, 138, 0.8);
    pointer-events: none;
}

/* Un consommable dans le sac : cerclé de pointillés, pour ne pas le
   confondre avec une pièce d'équipement. */
.inv-item.consumable {
    border-style: dashed;
    background: radial-gradient(circle at 50% 30%, rgba(82, 209, 138, 0.1), rgba(0, 0, 0, 0.72));
}

/* Élixir déjà actif : l'objet reste là, mais il n'a plus rien à donner. */
.inv-item.spent { filter: grayscale(0.85) brightness(0.72); }

.spent-badge {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--verdant);
    text-shadow: 0 1px 3px #000;
}

/*
 * Élément d'un parchemin, en bas à droite : le seul angle libre de la case —
 * la rareté occupe l'autre bas, le cadenas et la flèche d'amélioration le haut.
 */
.elem-pip {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--elem) 38%, #171714), #0a0a07);
    border: 1px solid color-mix(in srgb, var(--elem) 85%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--elem) 55%, transparent);
    line-height: 1;
    pointer-events: none;
}

.elem-art { display: block; width: 16px; height: 16px; object-fit: contain; }
/* Repli : l'emoji se recadre à la main, sa chasse dépend de la police. */
.elem-emoji { display: block; font-size: 0.62rem; line-height: 1; }

.inv-item.elem-terre, .equip-slot.spell.elem-terre { --elem: var(--elem-terre); }
.inv-item.elem-feu, .equip-slot.spell.elem-feu { --elem: var(--elem-feu); }
.inv-item.elem-eau, .equip-slot.spell.elem-eau { --elem: var(--elem-eau); }
.inv-item.elem-air, .equip-slot.spell.elem-air { --elem: var(--elem-air); }

/*
 * PANOPLIE D'UNE CASE : un fond léger de la teinte de l'ensemble, et une
 * bande à son pied. Deux pièces du même ensemble se retrouvent d'un coup
 * d'œil, dans le sac comme sur la poupée.
 */
.inv-item.set-piece,
.equip-slot.set-piece {
    background:
        linear-gradient(0deg, var(--set) 0 4px, transparent 4px),
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--set) 44%, transparent), color-mix(in srgb, var(--set) 20%, transparent) 75%),
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.72)),
        rgba(17, 17, 14, 0.9);
}

/* En-tête de section dans le sac : toute la largeur, jamais comptée comme une case. */
.inv-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 6px 0 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.inv-section span {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.inv-section small { font-size: 0.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.inv-section:first-child { margin-top: 0; }

/* Bloc d'une panoplie dans le sac rangé par ensemble. */
.inv-section.set-head {
    align-items: center;
    margin-top: 10px;
    padding: 4px 8px 4px 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--set) 28%, transparent), transparent 85%);
    border-bottom: 0;
    border-left: 3px solid var(--set);
    border-radius: 4px;
}

.set-head-emblem {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 2px var(--set);
    /* Sans illustration, l'emoji de la créature tient le centre. */
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
}

.set-head-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-section .set-head-name { font-size: 0.74rem; letter-spacing: 0.08em; color: color-mix(in srgb, var(--set) 55%, #f4ecdc); }

/* --- Raretés --- */
.rarity-common { --rar: var(--common); }
.rarity-rare { --rar: var(--rare); }
.rarity-epic { --rar: var(--epic); }
.rarity-legendary { --rar: var(--legendary); }
.rarity-mythic { --rar: var(--mythic); }

/*
 * L'éclat des hautes raretés respire sur un calque à part, dont on n'anime que
 * l'opacité. Animer `box-shadow` sur l'objet lui-même repeignait tout un sac
 * de légendaires à chaque image.
 */
.rarity-legendary, .rarity-mythic { position: relative; }

.rarity-legendary::after, .rarity-mythic::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: rarGlow 2.6s ease-in-out infinite;
    will-change: opacity;
}

.rarity-legendary::after { box-shadow: inset 0 0 20px rgba(240, 180, 41, 0.5), 0 0 14px rgba(240, 180, 41, 0.3); }
.rarity-mythic::after { box-shadow: inset 0 0 20px rgba(255, 59, 92, 0.6), 0 0 18px rgba(255, 59, 92, 0.5); animation-duration: 1.8s; }

@keyframes rarGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ---------- 6. Caractéristiques, apport, panoplies ---------- */
.stats-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 0 16px 16px; }

.stats-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
}

.stats-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.alloc-list { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }

.alloc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--stone-500);
    border-radius: var(--radius);
    transition: border-color var(--speed);
}

/* Un liseré doré signale les caractéristiques qu'on peut monter tout de suite. */
.alloc-row.ready { border-left-color: var(--gold); }

.alloc-icon { font-size: 1rem; width: 1.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.alloc-art { display: block; width: 1.6rem; height: 1.6rem; object-fit: contain; }
.alloc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alloc-name { font-weight: 700; font-size: 0.94rem; }
.alloc-body small { font-size: 0.76rem; color: var(--text-dim); }

.alloc-value {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    min-width: 2.5em;
    text-align: right;
}

.alloc-buttons { display: flex; gap: 3px; flex-shrink: 0; }

.alloc-buttons button {
    padding: 4px 8px;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stone-500);
    border-radius: 3px;
    color: var(--text-soft);
    cursor: pointer;
    transition: color var(--speed), border-color var(--speed);
}

.alloc-buttons button:hover:not(:disabled) { color: var(--gold-lit); border-color: var(--gold); }
.alloc-buttons button:disabled { opacity: 0.3; cursor: not-allowed; }

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

.stat-card {
    --tone: var(--stone-500);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.stat-icon { font-size: 1rem; color: var(--tone); flex-shrink: 0; display: flex; align-items: center; }
.stat-art { display: block; width: 1.6rem; height: 1.6rem; object-fit: contain; }
.stat-body { display: flex; flex-direction: column; min-width: 0; }

.stat-body b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.stat-body b small { font-size: 0.72em; font-weight: 500; opacity: 0.75; }

.stat-body small {
    font-size: 0.74rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tone-hp { --tone: var(--blood-lit); }
.tone-atk { --tone: var(--gold); }
.tone-def { --tone: #b8c6e0; }
.tone-mana { --tone: var(--aqua); }
.tone-gold { --tone: var(--gold-lit); }
.tone-xp { --tone: var(--arcane-lit); }
.tone-luck { --tone: var(--verdant); }
.tone-speed { --tone: #8dbaff; }
.tone-shard { --tone: var(--arcane); }
.tone-record { --tone: var(--ember); }
.tone-dofus { --tone: var(--gold-lit); }
.stat-card.tone-dofus b { font-size: 0.86rem; }
.stat-card.tone-elem { --tone: var(--gold); }

.gear-recap, .set-recap { display: flex; flex-direction: column; gap: 2px; }
.recap-empty { color: var(--text-dim); font-size: 0.86rem; font-style: italic; margin: 2px 0; }

.recap-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--line-soft);
}

.recap-line:last-child { border-bottom: 0; }
.recap-line span { color: var(--text-soft); }
.recap-line b { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold-lit); }

.set-block { margin-bottom: 12px; padding-left: 10px; border-left: 3px solid var(--set, var(--stone-500)); }
.set-block:last-child { margin-bottom: 0; }
.set-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.set-emblem-img {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    font-size: 15px;
    line-height: 1;
}
.set-emblem-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-block-name { font-family: var(--font-display); font-size: 0.86rem; color: color-mix(in srgb, var(--set, #fff) 55%, #f0e6d2); flex: 1; min-width: 0; }
.set-block-count { font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.set-tier { border-left: 2px solid var(--verdant); padding-left: 9px; margin: 6px 0; }
.set-tier-head { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verdant); }
.set-next { font-size: 0.82rem; color: var(--text-dim); font-style: italic; margin: 5px 0 0; }
.set-next.done { color: var(--verdant); }

/* ---------- Tenues ---------- */
.look-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 12px; }
.look-genders, .look-grid { display: grid; gap: 10px; }
.look-genders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.look-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); }

.look-card {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 6px 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: radial-gradient(ellipse at 50% 88%, rgba(201, 171, 69, 0.12), transparent 60%), var(--well);
    color: var(--text-dim);
    cursor: pointer;
    transition: transform var(--speed), border-color var(--speed);
}

.look-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--line-strong); color: var(--text-soft); }

.look-card.on {
    border-color: var(--gold);
    color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 18px rgba(201, 171, 69, 0.18);
}

/* Tenue encore à gagner : visible, mais clairement hors de portée. */
.look-card.locked { opacity: 0.45; cursor: default; }
.look-card.locked .look-art { filter: grayscale(1); }

.look-art { display: block; width: 100%; height: 120px; object-fit: contain; object-position: center bottom; }
.look-name { font-size: 0.82rem; font-weight: 700; text-align: center; }
.look-hint { font-size: 0.7rem; color: var(--text-dim); text-align: center; }

/* ---------- Défis ---------- */
.challenge-view { display: flex; gap: 4px; }
.challenge-view .mini-btn.active { border-color: var(--gold); color: var(--gold-lit); background: rgba(201, 171, 69, 0.1); }

.challenge-list { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 16px 16px; }
.challenge-group + .challenge-group { margin-top: 16px; }
/* La vitrine des ornements et titres, sous les costumes de l'onglet Cosmétiques. */
.cosmetic-vitrine { margin-top: 18px; }

.challenge-group h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
    padding: 8px 0 6px;
    margin-bottom: 6px;
}

.challenge-group h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.challenge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--stone-500);
    border-radius: var(--radius);
}

/* Un défi accompli mais non réclamé doit sauter aux yeux. */
.challenge-row.claimable {
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(201, 171, 69, 0.13), var(--well));
}

.challenge-row.claimed { opacity: 0.5; border-left-color: var(--verdant); }
.challenge-info { flex: 1; min-width: 0; }
.challenge-name { font-weight: 700; font-size: 0.94rem; }
.challenge-desc { font-size: 0.8rem; color: var(--text-soft); margin: 1px 0 5px; }

.challenge-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

.challenge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    transition: width 0.4s ease;
}

.challenge-progress { margin-top: 3px; font-size: 0.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.mini-btn.claim {
    border-color: var(--gold);
    color: var(--gold-lit);
    background: linear-gradient(180deg, rgba(201, 171, 69, 0.2), rgba(0, 0, 0, 0.4));
}

.mini-btn.claim:hover { color: #fff; box-shadow: 0 0 14px rgba(201, 171, 69, 0.4); }

.challenge-row.family { align-items: flex-start; }
.challenge-row.family.complete { border-left-color: var(--verdant); }
.challenge-row.family .mini-btn.claim { align-self: center; }

.ch-ico, .ch-family-ico, .ch-shard, .vit-source-ico {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.ch-ico-art { width: 100%; height: 100%; object-fit: contain; }
.ch-family-ico { width: 36px; height: 36px; margin-top: 2px; }
.ch-shard { width: 14px; height: 14px; }

.ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ch-rank { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.challenge-row.family.complete .ch-rank { color: var(--verdant); }
.challenge-row.family .challenge-desc b { color: var(--text); font-weight: 700; }

.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ch-pips { display: flex; gap: 4px; }

.ch-pip {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    transform: rotate(45deg);
    border: 1px solid var(--stone-500);
    background: #090906;
}

.ch-pip.on { background: var(--gold); border-color: var(--gold); }
.ch-pip.ready { border-color: var(--gold); background: rgba(201, 171, 69, 0.35); }

.ch-rewards { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ch-reward-shards { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--arcane-lit); }

.ch-reward-tag {
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.66rem;
    font-weight: 700;
    border: 1px solid var(--stone-500);
    color: var(--text-soft);
    white-space: nowrap;
}

.ch-reward-tag.title { border-color: rgba(201, 171, 69, 0.55); color: var(--gold-lit); }
.ch-reward-tag.ornament { border-color: color-mix(in srgb, var(--orn) 70%, #c9ab45); color: color-mix(in srgb, var(--orn) 45%, #f3e6c8); }
.ch-count { margin-left: 6px; color: var(--gold); letter-spacing: 0.08em; }

/* ---- Vitrine : titres et ornements gagnés ---- */
.vit-ornaments { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.vit-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

.vit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 9px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    color: var(--text-soft);
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.vit-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--line-strong); }
.vit-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vit-card.worn { border-color: var(--gold); background: rgba(201, 171, 69, 0.08); }
.vit-card.locked { cursor: default; }
.vit-card.locked .vit-frame { opacity: 0.6; filter: grayscale(0.6); }
.vit-card.locked .vit-name, .vit-card.locked .vit-title-text { opacity: 0.72; }

/* Le cadre d'un ornement en vitrine : toute la largeur de la carte. */
.vit-frame {
    position: relative;
    width: 100%;
    height: 82px;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 40%, rgba(201, 171, 69, 0.08), rgba(0, 0, 0, 0.3) 70%);
}

.vit-name { font-size: 0.76rem; font-weight: 700; color: var(--text); }
.vit-title-text { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--gold-lit); }
.vit-worn { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.vit-source { display: inline-flex; align-items: center; gap: 4px; font-size: 0.64rem; color: var(--text-dim); }
.vit-source-ico { width: 12px; height: 12px; }
.vit-goal { font-size: 0.64rem; color: var(--text-soft); line-height: 1.3; }
.vit-bar { width: 80%; height: 3px; border-radius: 2px; background: #090906; overflow: hidden; }
.vit-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* ---------- 3b. Ornements ----------
   Les cadres de nom de Dofus (tools/dofus-ornements.py), gagnés aux défis
   (voir ORNAMENTS dans js/config/challenges.js). L'image vit seule dans
   .orn-pic ; le halo et les étincelles sont ses voisins. On n'anime que
   l'opacité et la transformation. */
/* `.orn` est déjà la carte de vitrine : l'ornement dessiné s'appelle `.orn-art`. */
.orn-art { position: absolute; inset: 0; display: block; }
.orn-pic { position: absolute; inset: 0; display: block; }
.orn-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); }

.orn-aura {
    position: absolute;
    inset: 10% 6%;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--glow) 55%, transparent), transparent 70%);
    opacity: 0.5;
    animation: ornAura 4.2s ease-in-out infinite;
}

.aura-legend .orn-aura { animation-duration: 2.8s; }

@keyframes ornAura {
    0%, 100% { opacity: 0.3; transform: scale(0.96); }
    50% { opacity: 0.75; transform: scale(1.04); }
}

.orn-motes { position: absolute; inset: 0; pointer-events: none; }

.orn-motes i {
    position: absolute;
    bottom: 20%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 6px var(--glow);
    opacity: 0;
    animation: ornMote 4.4s linear infinite;
}

.orn-motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.orn-motes i:nth-child(2) { left: 82%; animation-delay: -0.6s; animation-duration: 5s; }
.orn-motes i:nth-child(3) { left: 34%; animation-delay: -1.3s; }
.orn-motes i:nth-child(4) { left: 64%; animation-delay: -2s; animation-duration: 4.8s; }
.orn-motes i:nth-child(5) { left: 22%; animation-delay: -2.7s; animation-duration: 3.8s; }
.orn-motes i:nth-child(6) { left: 90%; animation-delay: -3.3s; }
.orn-motes i:nth-child(7) { left: 50%; animation-delay: -3.9s; animation-duration: 5.4s; }

@keyframes ornMote {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* ---- En vitrine : l'ornement seul, immobile ---- */
.vit-frame .orn-aura { animation: none; opacity: 0.45; }
.vit-frame .orn-motes { display: none; }

.vit-aura {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.vit-aura.legend { color: #d6c3ff; text-shadow: 0 0 8px rgba(166, 139, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
    .orn-aura { animation: none; }
    .orn-motes { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vit-card { transition: none; }
    .vit-card:hover:not(:disabled) { transform: none; }
}

/* ---------- 8. Outils de test ---------- */
#btn-toggle-dev {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 9000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--stone-800);
    border: 1px solid var(--stone-600);
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0.3;
    transition: opacity var(--speed);
}

#btn-toggle-dev:hover { opacity: 1; }

.dev-tools {
    position: fixed;
    bottom: 56px;
    right: 12px;
    z-index: 9000;
    width: 224px;
    /* Une vingtaine d'outils : sur un écran de portable, la liste défile. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: rgba(15, 15, 12, 0.98);
    border: 1px solid var(--stone-500);
    border-radius: var(--radius-lg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--lift);
}

.dev-tools h3 { color: var(--verdant); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 5px; }
.dev-tools hr { border: 0; border-top: 1px solid var(--stone-700); width: 100%; margin: 4px 0; }

/* Le retour de playtest (js/ui/retour.js) : à gauche de la clé, partout. */
#btn-retour {
    position: fixed;
    bottom: 12px;
    right: 56px;
    z-index: 9000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--stone-800);
    border: 1px solid var(--stone-600);
    color: var(--lime);
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.35;
    transition: opacity var(--speed);
}
#btn-retour:hover { opacity: 1; }
.retour-boite {
    position: fixed;
    right: 12px;
    bottom: 56px;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: rgba(15, 15, 12, 0.98);
    box-shadow: var(--lift);
}
.retour-boite b { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.retour-boite small { color: var(--text-dim); font-size: 0.74rem; line-height: 1.4; }
.retour-boite textarea { resize: vertical; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--well); color: var(--text); font: inherit; font-size: 0.86rem; }
.retour-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Écrans étroits ----------
   Sous 1180 px, la fiche passe au-dessus du codex et l'écran défile : chaque
   bloc garde sa hauteur de contenu au lieu d'être écrasé par la fenêtre. */
@media (max-width: 1180px) {
    #main-menu { overflow-y: auto; }
    .hub-layout { grid-template-columns: 1fr; flex: none; }
    .hero-sheet { min-height: 640px; }
    .codex { min-height: 560px; }
}

@media (max-width: 700px) {
    .sac-parties { flex-wrap: wrap; }
    .sac-partie { flex: 1 1 calc(50% - 4px); }
    .meta-screen { padding-left: 12px; padding-right: 12px; }
    .sheet-stage { --slot: 54px; --slot-label: 0px; --slot-gap: 0px; }
    .doll-slot small { display: none; }
    .sheet-deck { flex-wrap: wrap; }
    .sheet-dofus { flex-wrap: wrap; }
    .equip-slot.dofus-slot { width: 40px; height: 40px; }
    .deck-rule { display: none; }
    .sheet-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .stats-grid { grid-template-columns: 1fr; }
    .hero-skin { padding: 18px 70px 3%; }
}