/* ============================================================
   exploits.css — titres, sceaux des boss et profil d'un joueur (3.1)
   Partagé par Moi et le Classement. Toujours sur un fond sombre (la carte du profil, la feuille du classement).
   Hiérarchie : ORIGINE (mythe) > légendaire > rare > ordinaire — chaque niveau se reconnaît au premier coup d'œil.
   ============================================================ */

/* ---------- Les titres ---------- */
.ex-titre { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; min-width: 0; font: italic 600 .78rem/1.25 var(--f-vers, Georgia, serif); color: var(--rc); vertical-align: middle; }
.ex-titre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-titre .ex-et { flex: none; font-style: normal; font-size: .8em; }
.ex-titre .ex-ver { flex: none; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #2bbf86; color: #04150d; font: 800 .62rem/1 var(--f-ui, system-ui); font-style: normal; box-shadow: 0 0 0 1.5px rgba(4, 21, 13, .55); }
/* ordinaire : simple, discret */
.ex-titre.n-ordinaire { color: color-mix(in srgb, var(--rc) 70%, #e6f8ff); font-weight: 500; }
/* rare : la couleur de sa rareté, un fil lumineux */
.ex-titre.n-rare { color: var(--rc); text-shadow: 0 0 10px color-mix(in srgb, var(--rc) 40%, transparent); }
/* légendaire : or et nacre, un reflet qui passe (une fois, lentement) */
.ex-titre.n-legendaire > span { background: linear-gradient(100deg, #fff3c4 0%, #ffcf5c 30%, #fff8e6 46%, var(--rc) 62%, #ffcf5c 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255, 207, 92, .35)); animation: ex-reflet 5.5s ease-in-out 1s 2 both; font-weight: 700; }
.ex-titre.n-legendaire .ex-et { color: #ffcf5c; }
/* ORIGINE (les deux derniers boss) : or sur noir, des braises */
.ex-titre.n-mythe > span { background: linear-gradient(100deg, #ffe7a6 0%, #ffcf5c 28%, #fff6dc 44%, #ff9a3c 64%, #ffcf5c 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .01em; animation: ex-reflet 5.5s ease-in-out 1s 2 both; }
.ex-titre.n-mythe .ex-et { color: #ff9a3c; }
@keyframes ex-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* le grand ruban (profil, haut de Moi) */
.ex-titre.grand { padding: .22rem .7rem .24rem; border-radius: 999px; font-size: .95rem; background: color-mix(in srgb, var(--rc2) 32%, rgba(8, 24, 30, .55)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }
.ex-titre.grand.n-ordinaire { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ex-titre.grand.n-legendaire { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 207, 92, .26), rgba(40, 18, 60, .7) 70%); box-shadow: inset 0 0 0 1px rgba(255, 207, 92, .7), 0 0 18px -4px rgba(255, 207, 92, .55); }
.ex-titre.grand.n-mythe { background: radial-gradient(120% 160% at 0% 100%, rgba(255, 122, 42, .32), #0a0604 70%); box-shadow: inset 0 0 0 1.5px #ffcf5c, 0 0 0 3px rgba(10, 6, 4, .6), 0 0 22px -2px rgba(255, 154, 60, .65); }
@media (prefers-reduced-motion: reduce) { .ex-titre.n-legendaire > span, .ex-titre.n-mythe > span { animation: none; background-position: 40% 0; } }
html.mvt-reduit .ex-titre.n-legendaire > span, html.mvt-reduit .ex-titre.n-mythe > span { animation: none; background-position: 40% 0; }

/* ---------- Les sceaux des boss ---------- */
.ex-sceau { --s: 34px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; color: #fff; }
.ex-sceau svg { width: 72%; height: 72%; }
/* vaincu : un médaillon plein, de plus en plus précieux */
.ex-sceau.vaincu.t-rare { background: radial-gradient(circle at 35% 28%, #c9d6ff, #4a5fd8 62%, #1b1f6a); box-shadow: 0 0 0 1.5px rgba(201, 214, 255, .7), 0 4px 10px -4px rgba(74, 95, 216, .9); }
.ex-sceau.vaincu.t-legendaire { color: #2a1606; background: radial-gradient(circle at 35% 28%, #fff6d6, #ffcf5c 55%, #b47a10); box-shadow: 0 0 0 1.5px #fff1b8, 0 0 14px -2px rgba(255, 207, 92, .8); }
.ex-sceau.vaincu.t-mythe { color: #ffcf5c; background: radial-gradient(circle at 50% 120%, #ff7a2a, #3a0a06 58%, #0a0604); box-shadow: 0 0 0 1.5px #ffcf5c, 0 0 16px -2px rgba(255, 122, 42, .85); }
/* croisé, pas encore vaincu : le dessin en creux */
.ex-sceau.vu { color: rgba(216, 244, 255, .55); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(216, 244, 255, .28); }
/* jamais croisé : une ombre, rien de plus */
.ex-sceau.ombre { color: rgba(216, 244, 255, .35); background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1.5px rgba(216, 244, 255, .16); }
.ex-sceau.ombre svg { width: 62%; height: 62%; }
/* vérifié par le serveur : une petite coche verte */
.ex-sceau > i { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 38%; height: 38%; min-width: 12px; min-height: 12px; border-radius: 50%; background: #2bbf86; color: #04150d; font: 800 9px/1 var(--f-ui, system-ui); font-style: normal; box-shadow: 0 0 0 1.5px #0a1f24; }

/* ---------- Le profil d'un joueur (classement : la feuille ; Moi : « Mon profil ») ---------- */
.pf-tete { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .6rem; }
.pf-tete > div { min-width: 0; }
.pf-nom { font: 700 1.2rem/1.2 var(--f-ui); color: #fff; }
.pf-tete .ex-titre.grand { margin: .2rem 0 .25rem; }
.pf-changer { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .2rem; color: #ffb3cf; font: 700 .8rem var(--f-ui); text-decoration: none; }
.pf-decl { display: block; font: 500 .7rem var(--f-ui); color: #a6c1ca; margin: -.1rem 0 .2rem .4rem; }
.pf-chiffres { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font: 500 .85rem var(--f-ui); color: #cbe7f2; }
.pf-chiffres b { color: #fff; }
.pf-prestige { display: grid; gap: .4rem; margin: .5rem 0; }
.pf-exp { display: block; padding: .55rem .75rem; border-radius: 14px; background: rgba(255, 255, 255, .06); font: 700 .92rem/1.3 var(--f-ui); color: #fff; }
.pf-exp small { display: block; font-weight: 500; font-size: .76rem; color: #cbe7f2; }
.pf-exp.rare { background: linear-gradient(135deg, rgba(255, 207, 92, .2), rgba(120, 20, 40, .25)); box-shadow: inset 0 0 0 1px rgba(255, 207, 92, .45); color: #ffe7a6; }
.pf-exp.valide { background: linear-gradient(135deg, color-mix(in srgb, var(--c2) 45%, transparent), color-mix(in srgb, var(--c1) 12%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 55%, transparent); }
.pf-exps { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: .5rem 0; }
.pf-exps .pf-exp { padding: .45rem .6rem; font-size: .8rem; }
.pf-exps .pf-exp small { font-size: .68rem; }
.pf-ligne { font: 700 1rem var(--f-ui); color: #fff; }
.pf-sceaux { display: flex; justify-content: space-between; gap: .3rem; margin: .55rem 0 .4rem; padding: .55rem .6rem; border-radius: 18px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pf-sceaux .ex-sceau { --s: min(38px, 11vw); }
.pf-loin { display: flex; align-items: center; gap: .75rem; margin: .6rem 0; padding: .7rem .85rem; border-radius: 16px; background: linear-gradient(135deg, rgba(95, 240, 255, .14), rgba(85, 182, 207, .2)); box-shadow: inset 0 0 0 1px rgba(95, 240, 255, .3); }
.pf-loin .pf-ic { flex: none; display: grid; place-items: center; min-width: 2.75rem; font-size: 1.8rem; }
.pf-loin small { display: block; font: 800 .66rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #9ff5ff; }
.pf-loin b { display: block; font: 400 1.25rem/1.15 var(--f-titre); color: #fff; }
.pf-loin div > span { font: 600 .82rem var(--f-ui); color: #cfe9ff; }
.pf-boss li { gap: .55rem; }
.pf-boss li > span:not(.ex-sceau) { min-width: 0; }
.pf-boss li small { display: block; font: 600 .7rem var(--f-ui); color: #a6c1ca; }
.pf-boss li small.ok { color: #8fe3c0; }
.pf-barres li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.pf-barres li i { display: block; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, #5ff0ff var(--v), rgba(255, 255, 255, .08) var(--v)); }
.pf-tro li svg { flex: none; width: 26px; height: 26px; }
.pf-tro li.sec { opacity: .7; }
.pf-charge { font: 600 .85rem var(--f-ui); color: #a6c1ca; }
/* (dans Moi : les listes du profil, comme dans la feuille du classement) */
.ex-profil { color: #d9ecf4; font: 400 .95rem/1.5 var(--f-ui); }
.ex-profil h3 { margin: 1.1rem 0 .45rem; font: 800 .72rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #ff7ba4; }
.ex-profil h3 small { font-weight: 600; letter-spacing: 0; text-transform: none; color: #a6c1ca; }
.ex-profil ul { margin: .3rem 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.ex-profil li { display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.ex-profil li > b { margin-left: auto; color: #ffcf5c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-profil .mt-liste li { padding: 0; background: none; }
.ex-profil .pf-barres li { display: grid; grid-template-columns: 7.5rem 1fr 1.6rem; gap: .5rem; align-items: center; }
.ex-profil .pf-barres li b { margin-left: 0; text-align: right; }
.ex-profil b.or { margin-left: 0; color: #ffcf5c; }
.ex-profil .honnete { margin-top: 1rem; padding: .7rem .8rem; border-radius: 14px; background: rgba(163, 245, 255, .1); font-size: .88rem; color: #cbe7f2; }
.ex-profil .cl-hl { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: rgba(255, 207, 92, .14); color: #ffe7a6; font: 700 .72rem var(--f-ui); }
/* 3.1 — accessibilité : aucun texte sous 12 px (.75rem) dans les profils (feuille du classement et « Mon profil » dans Moi) */
.pf-loin small { font-size: .75rem; letter-spacing: .08em; }
.pf-boss li small, .ex-profil h3, .ex-profil h3 small, .cl-feuille h3 small, .ex-profil .cl-hl { font-size: .75rem; }