/* Fiche de personnage façon « World of Warcraft ». Tailles en em : règle font-size sur .sheet. */
.sheet { --frame: #6b5233; --gold: #ffcf3f; --c: #b6bcc8; position: relative; width: 30em; color: #f3e9d8; text-align: left;
  font-family: Fredoka, "Segoe UI", sans-serif; border-radius: .9em; overflow: hidden;
  background: linear-gradient(180deg, #2b211a, #15100c); border: .3em solid var(--frame);
  box-shadow: 0 0 0 .15em #1a120c, inset 0 0 0 .15em #3d2e20, 0 1em 3em rgba(0, 0, 0, .7), 0 0 2.4em var(--c); }
.sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sheet .sh-head { position: relative; display: flex; align-items: center; gap: .9em; padding: .7em 1em; background: linear-gradient(180deg, #3a2c20, #221911); border-bottom: .2em solid var(--frame); }
.sheet .sh-portrait { width: 3.6em; height: 3.6em; flex: none; padding: .35em; border-radius: 50%; background: radial-gradient(circle, #3a2c20, #120c08); border: .25em solid var(--gold); box-shadow: 0 0 1em rgba(255, 207, 63, .4); }
.sheet .sh-id { display: flex; flex-direction: column; min-width: 0; }
.sheet .sh-name { font-size: 1.5em; color: #fff; text-shadow: 0 .1em 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .sh-class { color: var(--gold); font-size: .95em; }
/* La flèche verte de WoW : une amélioration est payable */
.sheet .sh-arrow { position: absolute; right: .8em; top: .6em; width: 1.9em; height: 1.9em; display: grid; place-items: center; font-size: 1.2em; color: #fff;
  border-radius: .3em; background: linear-gradient(180deg, #4cd964, #1f8f35); border: .12em solid #b7ffbf; box-shadow: 0 0 1em #4cd964; animation: sh-bounce .7s ease-in-out infinite alternate; }

.sheet .sh-body { display: grid; grid-template-columns: 4.6em 1fr 4.6em; gap: .5em; padding: .8em; background: radial-gradient(ellipse at 50% 60%, #3b2a1e, #120c08 75%); }
.sheet .sh-col { display: flex; flex-direction: column; gap: .7em; justify-content: center; }
.sheet .sh-slot { position: relative; width: 4.2em; height: 4.2em; padding: .35em; box-sizing: border-box; border-radius: .4em; background: #120c08;
  border: .15em solid #4d3a26; box-shadow: inset 0 0 .6em #000; }
.sheet .sh-slot.on { border-color: var(--gold); box-shadow: inset 0 0 .6em #000, 0 0 .6em rgba(255, 207, 63, .35); }
.sheet .sh-slot small { position: absolute; left: 50%; bottom: -1.25em; transform: translateX(-50%); font-size: .62em; white-space: nowrap; color: #c9b8a0; }
.sheet .sh-slot.off small { top: 50%; bottom: auto; transform: translate(-50%, -50%); color: #6e5c48; font-size: .7em; }
.sheet .sh-doll { position: relative; height: 15em; }
.sheet .sh-doll svg { position: absolute; left: 50%; top: 4%; width: 74%; height: 92%; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 .4em .6em rgba(0, 0, 0, .7)); }
.sheet .sh-gear { position: absolute; aspect-ratio: 1; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .7)); }

.sheet .sh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: 0 .8em .6em; }
.sheet .sh-box { display: grid; grid-template-columns: 1fr auto; gap: .15em .6em; margin: 0; padding: .5em .7em; font-size: .82em; border-radius: .4em; background: #120c08; border: .12em solid #4d3a26; }
.sheet .sh-box dt { color: #e8c766; }
.sheet .sh-box dd { margin: 0; text-align: right; font-weight: 700; }
.sheet .sh-box dd.good { color: #6ee07a; }
.sheet .sh-weapon { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .6em; padding: .3em .8em .6em; }
.sheet .sh-weapon .big { width: 4.2em; height: 4.2em; border-color: var(--c); box-shadow: inset 0 0 .6em #000, 0 0 1em var(--c); }
.sheet .sh-weapon .sh-petslot.off { border-color: #4d3a26; box-shadow: inset 0 0 .6em #000; }
.sheet .sh-wtxt { min-width: 0; }
.sheet .sh-weapon b { display: block; font-size: 1em; line-height: 1.15; }
.sheet .sh-weapon span { display: block; color: #c9b8a0; font-size: .78em; line-height: 1.2; }
.sheet .sh-weapon span.good { color: #6ee07a; }
.sheet .sh-buddy { left: -6%; top: 62%; width: 36%; z-index: 4; animation: sh-hop 1.6s ease-in-out infinite; }
.sheet .commun { --c: #b6bcc8 } .sheet .rare { --c: #4f9bff } .sheet .epique { --c: #b86bff } .sheet .legendaire { --c: #ffb820 } .sheet .mythique { --c: #ff4d6d }
@keyframes sh-hop { 50% { transform: translateY(-.35em); } }
.sheet .sh-next { margin: 0 .8em .6em; padding: .5em .7em; border-radius: .4em; font-size: .82em; text-align: center; color: #bba98f; background: #120c08; border: .12em solid #4d3a26; }
.sheet .sh-next.ready { color: #fff; background: linear-gradient(180deg, #1f6b2c, #12401a); border-color: #4cd964; box-shadow: 0 0 .8em rgba(76, 217, 100, .5); }
.sheet .sh-tabs { display: flex; gap: .3em; padding: 0 .8em .7em; }
.sheet .sh-tabs span { flex: 1; padding: .35em .4em; font-size: .72em; text-align: center; border-radius: 0 0 .4em .4em; background: #221911; border: .12em solid #4d3a26; border-top: 0; color: #a8967c; }
.sheet .sh-tabs .on { color: #fff; background: #3a2c20; }
@keyframes sh-bounce { to { transform: translateY(-.25em); } }

/* ===== Cosmétiques (partagés par la fiche, le site et l'overlay) — aucun effet sur le jeu, seulement du style ===== */
.sheet .sh-pack { display: none; }
.sheet .sh-cart { left: 60%; top: 60%; width: 36%; z-index: 3; }
.sheet .sh-companion { left: 64%; top: 64%; width: 32%; z-index: 4; animation: sh-hop 1.9s ease-in-out infinite; }
.sheet .sh-companion.in-cart { left: 64%; top: 52%; width: 28%; } /* le chat se promène dans son wagonnet */
.cos-title { color: #e9c2ff; font-style: italic; text-shadow: 0 0 .5em #b86bff; }
/* Tenue du mineur : couleurs du set porté (équipement à bonus), puis apparences achetées, qui passent devant */
.sheet .sh-ears, .sheet .sh-goggles, .sheet .sh-visor { display: none; }
.gear-casque-prospecteur { --o-hat: #c9a24a; } .gear-casque-prospecteur .sh-goggles { display: inline; }
.gear-veste-prospecteur { --o-suit: #6b5a3a; --o-bib: #8a7448; --o-strap: #4a3c24; --o-sleeve: #a08a5a; }
.gear-gants-prospecteur { --o-glove: #8a6a3a; } .gear-bottes-prospecteur { --o-boot: #5a3a1f; }
.gear-casque-gemmologue { --o-hat: #8a4fe0; --o-lamp: #e2b3ff; }
.gear-veste-gemmologue { --o-suit: #4a2f7a; --o-bib: #6b45b0; --o-strap: #2a1a4a; --o-sleeve: #9a7ad0; }
.gear-gants-gemmologue { --o-glove: #e2b3ff; } .gear-bottes-gemmologue { --o-boot: #2a1a4a; }
.gear-casque-briseur { --o-hat: #6b7480; --o-lamp: #ff6a3a; }
.gear-veste-briseur { --o-suit: #4a5260; --o-bib: #5d6878; --o-strap: #ff6a3a; --o-sleeve: #8a95a6; }
.gear-gants-briseur { --o-glove: #3a3f48; } .gear-bottes-briseur { --o-boot: #2a2f38; }
.gear-casque-contremaitre { --o-hat: #ffcf3f; --o-lamp: #fff6c0; }
.gear-veste-contremaitre { --o-suit: #ff7a1a; --o-bib: #ff9d2e; --o-strap: #e8eef8; --o-sleeve: #ff9d2e; }
.gear-gants-contremaitre { --o-glove: #c9a24a; } .gear-bottes-contremaitre { --o-boot: #3a2a1a; }
.cos-helmet-cristal { --o-hat: #e2b3ff; --o-lamp: #c77dff; }
.cos-jacket-cristal { --o-suit: #7b2ff7; --o-bib: #b86bff; --o-strap: #4a1a9a; --o-sleeve: #c99aff; }
.cos-gloves-cristal { --o-glove: #f3d6ff; } .cos-boots-cristal { --o-boot: #3c0f8a; }
.cos-helmet-volcan { --o-hat: #3a3a42; --o-lamp: #ff9d2e; }
.cos-jacket-volcan { --o-suit: #5a2e1a; --o-bib: #7a3b1e; --o-strap: #2a1610; --o-sleeve: #c84a1a; --o-pack: #2a1a1e; --o-glow: #ff9d2e; }
.cos-jacket-volcan .sh-pack { display: inline; }
.cos-gloves-volcan { --o-glove: #2a1610; } .cos-boots-volcan { --o-boot: #1c1418; }
.cos-helmet-cyber { --o-hat: #1a1a2e; --o-lamp: #00e5ff; } .cos-helmet-cyber .sh-visor { display: inline; }
.cos-jacket-cyber { --o-suit: #14172a; --o-bib: #1f2440; --o-strap: #00e5ff; --o-sleeve: #2a2f4a; }
.cos-gloves-cyber { --o-glove: #ff2bd6; } .cos-boots-cyber { --o-boot: #1a1a2e; }
.cos-helmet-kawaii { --o-hat: #ffb3d1; --o-lamp: #fff; } .cos-helmet-kawaii .sh-ears { display: inline; }
.cos-jacket-kawaii { --o-suit: #ffc2e0; --o-bib: #fff0f7; --o-strap: #ff7aae; --o-sleeve: #ffd6e8; }
.cos-gloves-kawaii { --o-glove: #ffffff; } .cos-boots-kawaii { --o-boot: #ff7aae; }
.cos-jacket-volcan .sh-doll svg, .cos-jacket-cyber .sh-doll svg { filter: drop-shadow(0 .4em .6em rgba(0, 0, 0, .7)) drop-shadow(0 0 .8em var(--o-glow, #00e5ff)); }
/* Niveau de mineur et rangée « Tenue » (équipement à bonus) */
.sheet .sh-xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4em; margin-top: .3em; font-size: .72em; color: #9fd0ff; }
.sheet .sh-xp i { position: relative; height: .55em; border-radius: 9em; overflow: hidden; background: #120c08; border: .1em solid #4d3a26; }
.sheet .sh-xp i::after { content: ''; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, #4f9bff, #b86bff); }
.sheet .sh-xp small { color: #c9b8a0; }
.sheet .sh-gearrow { margin: 0 .8em .6em; padding: .5em .6em; border-radius: .4em; background: #120c08; border: .12em solid #4d3a26; }
.sheet .sh-gtitle { display: block; margin-bottom: .35em; font-size: .8em; color: #e8c766; }
.sheet .sh-gslots { display: flex; justify-content: space-around; gap: .4em; margin-bottom: 1.1em; }
.sheet .sh-gslot { width: 3.4em; height: 3.4em; display: grid; place-items: center; }
.sheet .sh-gicon { font-size: 1.5em; line-height: 1; }
.sheet .sh-gslot.off .sh-gicon { opacity: .3; filter: grayscale(1); }
.sheet .sh-gset { position: absolute; right: -.35em; top: -.35em; font-size: .9em; }
.sheet .sh-tier { position: absolute; left: .25em; top: .05em; font-size: .6em; color: #ffcf3f; letter-spacing: -.1em; }
.sheet .sh-bonus { display: flex; flex-wrap: wrap; gap: .2em .8em; font-size: .75em; }
.sheet .sh-bonus .good { color: #6ee07a; } .sheet .sh-bonus .bad { color: #ff8a8a; } .sheet .sh-bonus .muted { color: #8a7a64; }
/* Cadres d'avatar */
.cos-frame-cristal { border-color: #d9a6ff !important; box-shadow: 0 0 0 .12em #3c0f8a, 0 0 1em #b86bff, 0 0 2.2em rgba(184, 107, 255, .65) !important; animation: cos-glow 2.2s ease-in-out infinite alternate; }
/* Bannières de profil */
.cos-banner-aurore { background: linear-gradient(110deg, #0f2a4a, #1f7a6b, #5b3b8a, #1f4f8a, #0f2a4a) 0 0 / 400% 100% !important; animation: cos-slide 12s linear infinite; }
.cos-banner-braise { background: radial-gradient(circle at 15% 130%, rgba(255, 157, 46, .75), transparent 45%), radial-gradient(circle at 70% 140%, rgba(255, 61, 31, .65), transparent 45%), linear-gradient(180deg, #3a1610, #1a0a08) !important; animation: cos-flicker 1.8s ease-in-out infinite; }
.cos-banner-sakura { background: radial-gradient(circle, #ffe3ef 0 .14em, transparent .2em) 0 0 / 2.6em 2.6em, radial-gradient(circle, #fff 0 .1em, transparent .16em) 1.3em 1.3em / 2.6em 2.6em, linear-gradient(135deg, #ff8fbf, #b86bff) !important; animation: cos-fall 7s linear infinite; }
/* Cartes de mineur : le thème de toute la fiche */
.sheet.cos-card-aurore { --frame: #3fc7a0; background: linear-gradient(160deg, #0f2a4a, #1f5a5a 35%, #3b2a6b 70%, #0f2a4a) 0 0 / 200% 200%; animation: cos-slide2 9s ease-in-out infinite alternate; }
.sheet.cos-card-or { --frame: #ffcf3f; background: linear-gradient(160deg, #5a4214, #2a1c08); }
.sheet.cos-card-or::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 160, .28) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: cos-shine 3.2s ease-in-out infinite; }
.sheet.cos-card-nuit { --frame: #4f9bff; background: radial-gradient(circle, #fff 0 .06em, transparent .1em) 0 0 / 2.3em 2.1em, radial-gradient(circle, #bcd4ff 0 .05em, transparent .09em) 1.1em .9em / 3.1em 2.7em, linear-gradient(180deg, #0a0f2a, #1a1040); animation: cos-twinkle 4s ease-in-out infinite alternate; }
@keyframes cos-glow { to { filter: brightness(1.2) drop-shadow(0 0 .4em #e2b3ff); } }
@keyframes cos-slide { to { background-position: 400% 0; } }
@keyframes cos-slide2 { to { background-position: 100% 100%; } }
@keyframes cos-flicker { 50% { filter: brightness(1.25); } }
@keyframes cos-fall { to { background-position: 1.3em 7.8em, 2.6em 9.1em, 0 0; } }
@keyframes cos-shine { to { background-position: 150% 0; } }
@keyframes cos-twinkle { to { filter: brightness(1.25) saturate(1.2); } }

/* Nouvelles collections : pièces séparées, utilisables aussi en mélange. */
.cos-helmet-givre { --o-hat:#91eaff; --o-lamp:#fff; } .cos-jacket-givre { --o-suit:#184a68; --o-bib:#428aa6; --o-sleeve:#91eaff; --o-strap:#e0f8ff; }
.cos-gloves-givre { --o-glove:#d8f8ff; } .cos-boots-givre { --o-boot:#184a68; }
.cos-helmet-sylvestre { --o-hat:#6ee7a3; --o-lamp:#dbffe9; } .cos-jacket-sylvestre { --o-suit:#174a36; --o-bib:#328460; --o-sleeve:#6ee7a3; --o-strap:#b8ddb0; }
.cos-gloves-sylvestre { --o-glove:#a2f3b4; } .cos-boots-sylvestre { --o-boot:#174a36; }
.cos-helmet-royal { --o-hat:#ffe27a; --o-lamp:#fff6db; } .cos-jacket-royal { --o-suit:#654219; --o-bib:#ad8436; --o-sleeve:#ffe27a; --o-strap:#f7d370; }
.cos-gloves-royal { --o-glove:#ffeec0; } .cos-boots-royal { --o-boot:#654219; }
.cos-helmet-cosmique { --o-hat:#d6a4ff; --o-lamp:#fff; } .cos-jacket-cosmique { --o-suit:#36205d; --o-bib:#7856a8; --o-sleeve:#d6a4ff; --o-strap:#a5cbff; }
.cos-gloves-cosmique { --o-glove:#e9cfff; } .cos-boots-cosmique { --o-boot:#36205d; }
.cos-frame-givre,.cos-banner-givre { --style:#91eaff; --style-dark:#184a68; }
.cos-frame-sylvestre,.cos-banner-sylvestre { --style:#6ee7a3; --style-dark:#174a36; }
.cos-frame-royal,.cos-banner-royal { --style:#ffe27a; --style-dark:#654219; }
.cos-frame-cosmique,.cos-banner-cosmique { --style:#d6a4ff; --style-dark:#36205d; }
.cos-frame-givre,.cos-frame-sylvestre,.cos-frame-royal,.cos-frame-cosmique { border-color:var(--style) !important; box-shadow:0 0 .9em var(--style), inset 0 0 .4em var(--style-dark) !important; }
.cos-banner-givre,.cos-banner-sylvestre,.cos-banner-royal,.cos-banner-cosmique { background:radial-gradient(circle at 20% 50%,var(--style),transparent 60%),linear-gradient(110deg,var(--style-dark),#15100c,var(--style-dark)) !important; }