/* =========================================================
   Thème « Le Codex » (v0.8) : parchemin, encre bleu nuit, or.
   Chargé après style.css et game.css : il ne fait que repeindre.
   - La page est un parchemin (texte à l'encre).
   - Panneaux, boutons, fenêtres : encre bleu nuit à filets d'or (texte clair).
   - Le combat garde son décor HD-2D sombre.
   ========================================================= */
:root {
  --c-navy: #21347a; --c-ink: #101a3a; --c-ink2: #182552; --c-paper: #f4ecd8; --c-paper2: #eadfc4;
  --c-gold: #c8a04a; --c-gold2: #e2bd5f; --c-text: #1b2144; --c-mute: #5d5a4c; --c-red: #d8452e;
  /* valeurs « sur encre » (panneaux, boutons) */
  --panel: rgba(16, 26, 58, .94);
  --panel-2: rgba(24, 37, 82, .96);
  --gold: #e2bd5f;
  --gold-soft: rgba(200, 160, 74, .55);
  --teal: #e2bd5f;            /* l'accent turquoise devient l'or du Codex */
  --teal-dark: #9a7428;
  --text: #f4ecd8;
  --muted: #b9b3a0;
  --font-title: "Cinzel", Georgia, serif;
}

/* ---------- Page : parchemin et fond d'écran estompé ---------- */
body {
  background: var(--c-paper) url(../img/wallpaper.jpg) 18% 0 / cover no-repeat fixed;
  color: var(--c-text);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 236, 216, .80) 0%, rgba(244, 236, 216, .93) 40%, rgba(244, 236, 216, .97) 100%);
}
/* Sur la page, l'encre ; dans les panneaux et les boutons, le clair */
.screen { --text: #1b2144; --muted: #5d5a4c; --gold: #7a5a1c; --gold-soft: rgba(154, 116, 40, .45); color: var(--c-text); }
.panel, .panel-btn, button, .modal-box, .topbar, .tip, .toast, .card, .party-card, .gather-row, .recipe, .raid-box,
.boss-card, .gem, .gem-card, .skill-line, .pick-row, .team-preset, .guild-body .panel, input, select, .exp-log, .side-panel,
.hero-tab, .map-node, .inv-row, .gear-list > *, .chat-log, .stage-log, .turn-box, .banner {
  --text: #f4ecd8; --muted: #b9b3a0; --gold: #e2bd5f; --gold-soft: rgba(200, 160, 74, .55);
  color: var(--text);
}
.hint, .empty { color: var(--muted); }
.warn { color: #b3261e; }
.panel .warn, .modal-box .warn { color: #ff8a7a; }
label { color: var(--muted); }

/* ---------- Barre du haut : bande d'encre déchirée ---------- */
.topbar {
  background: var(--c-ink); border-bottom: 0; min-height: 58px; padding: 8px 14px 14px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 93% 88%, 86% 80%, 77% 90%, 68% 82%, 58% 92%, 48% 83%, 38% 91%, 28% 81%, 19% 90%, 10% 82%, 0 90%);
  box-shadow: none;
}
.zone-name { font-family: var(--font-title); color: #f7e3a8; font-size: 18px; letter-spacing: .06em; }
.topbar .gold { color: var(--c-gold2); }
.topbar .back {
  background: var(--c-paper); color: var(--c-navy); --text: var(--c-navy); border: 2px solid var(--c-gold); border-radius: 18px;
  font-family: var(--font-title); font-weight: 700; padding: 5px 14px;
}

/* ---------- Titres de section sur le parchemin ---------- */
.section-h { color: var(--c-navy); font-weight: 700; }
.section-h::after { background: linear-gradient(90deg, var(--c-gold), transparent); }
.panel .section-h, .modal-box .section-h { color: var(--c-gold2); }
.panel .section-h::after { background: linear-gradient(90deg, rgba(200, 160, 74, .6), transparent); }

/* ---------- Panneaux ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(16, 26, 58, .28);
}
.panel::before, .panel::after { background: var(--c-gold2); box-shadow: none; }
.panel-btn { background: var(--panel-2); border: 1px solid var(--c-gold); border-radius: 2px; box-shadow: 0 6px 14px rgba(16, 26, 58, .25); }

/* ---------- Boutons ---------- */
button {
  background: var(--c-navy); border: 1px solid var(--c-gold); border-radius: 3px; color: var(--text);
}
button:hover:not(:disabled) { filter: brightness(1.12); border-color: var(--c-gold2); }
.btn-small { background: var(--c-navy); }
.btn-small.on { background: var(--c-gold2); border-color: #fff1c4; color: var(--c-ink); --text: var(--c-ink); }
.btn-primary {
  background: linear-gradient(180deg, #2c43a0, var(--c-navy) 55%, #16235a);
  color: #f7efd9; border: 0; text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--c-gold);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.btn-primary:not(:disabled) { animation: none; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.18); }
.link-btn { background: none; border: 0; color: var(--c-navy); }

/* Onglets / filtres posés sur le parchemin */
.filter-tabs button { background: var(--c-paper2); color: var(--c-text); --text: var(--c-text); border-color: rgba(154, 116, 40, .55); }
.filter-tabs button.active { background: var(--c-navy); color: #f7efd9; --text: #f7efd9; border-color: var(--c-gold); }
.filter-tabs .fc-label, .filter-tabs label { color: var(--c-mute); }

/* Champs de saisie */
input, select { background: #fffaf0; color: var(--c-text); border: 1px solid rgba(154, 116, 40, .6); }
.panel input, .panel select, .modal-box input { background: rgba(255, 250, 240, .95); color: var(--c-text); }
input:focus, select:focus { border-color: var(--c-navy); }
input[type="checkbox"] { accent-color: var(--c-navy); }

/* ---------- Fenêtres, bulles, notifications ---------- */
.modal { background: rgba(16, 26, 58, .55); }
.modal-box { background: var(--c-ink); border: 2px solid var(--c-gold); }
.modal-box h2, .modal-box h3 { color: #f7e3a8; text-shadow: none; font-family: var(--font-title); }
.tip { background: rgba(16, 26, 58, .97); border: 1px solid var(--c-gold); }
.toast { background: var(--c-ink); border: 1px solid var(--c-gold); color: var(--c-paper); }

/* Barres */
.fill.xp, .fill.wave { background: linear-gradient(90deg, #6f86d6, #b8c8ff); }
.screen > .bar, .hero-tab .bar, .party-card .bar { background: rgba(33, 52, 122, .2); }

/* ---------- Onglets de héros (Équipement, Autel) ---------- */
.hero-tabs.grouped .tab-group { background: rgba(16, 26, 58, .9); border: 1px solid var(--c-gold); border-radius: 2px; }
.tab-group-h { color: var(--c-gold2); }
.hero-tab { background: var(--c-navy); border-color: rgba(200, 160, 74, .5); }
.hero-tab.active { background: #2c43a0; border-color: var(--c-gold2); box-shadow: 0 0 0 2px var(--c-gold2); }
.hero-tab.gathering { opacity: .8; }

/* Cartes de héros (Équipes) */
.party-card { opacity: 1; background: #1a2550; border-color: rgba(200, 160, 74, .5); }
.party-card.on { border-color: var(--c-gold2); box-shadow: 0 0 0 2px var(--c-gold2); background: #2c43a0; }
.party-card.busy { opacity: 1; background: #3a3a48; filter: saturate(.6); }
.pool-h { color: var(--c-navy); }

/* ---------- Pastille « En récolte » ---------- */
.gather-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; overflow: hidden;
  padding: 2px 8px 3px 6px; border-radius: 10px; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: #2f5a34; color: #e8f5d0; border: 1px solid #8fc27a; margin-top: 3px;
}
.gather-chip i { position: absolute; left: 0; bottom: 0; height: 2px; background: #b6ff8a; }
.gather-chip.full { background: #7a5a1c; border-color: var(--c-gold2); color: #fff3c4; animation: chipPulse 1.6s infinite alternate; }
.gather-chip.full i { background: var(--c-gold2); }
.gather-chip.mini { font-size: 9px; padding: 1px 5px; }
.gather-chip.mini span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.gather-chip.big { font-size: 13px; padding: 5px 12px; margin: 4px 0 8px; }
.gather-chip .gi, .gf-tool .gi { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@keyframes chipPulse { from { box-shadow: 0 0 0 rgba(226, 189, 95, 0); } to { box-shadow: 0 0 10px rgba(226, 189, 95, .8); } }

/* Récolte (Métiers) : le héros « travaille » */
.gather-row { background: rgba(24, 37, 82, .7); border: 1px solid rgba(200, 160, 74, .45); border-radius: 3px; padding: 8px; }
.gather-row.full { border-color: var(--c-gold2); box-shadow: 0 0 12px rgba(226, 189, 95, .35); }
.gf.gathering-anim { position: relative; display: inline-block; }
.gf.gathering-anim .px { animation: gatherWork 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.gf-tool { position: absolute; right: -6px; top: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #2f5a34; color: #e8f5d0; border: 1px solid #8fc27a; animation: toolSwing 1.1s ease-in-out infinite; }
.gather-row.full .gf-tool { background: #7a5a1c; border-color: var(--c-gold2); animation: none; }
.gather-row.full .gf .px { animation: none; }
@keyframes gatherWork { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(-4deg); } }
@keyframes toolSwing { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(25deg); } }

/* Camp : liste des héros en récolte */
.cc-gather:empty { display: none; }
.cc-gh { margin-top: 8px; font-family: var(--font-title); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: #b6d8a0; }
.cc-glist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#hub .cc-gone { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left;
  padding: 4px 8px 4px 4px; background: rgba(47, 90, 52, .35); border: 1px solid #5f8f58; border-radius: 4px; }
#hub .cc-gone .cc-face { grid-row: span 2; }
#hub .cc-gone b { font-size: 12px; }
#hub .cc-gone .gather-chip { margin: 0; font-size: 10px; padding: 0 6px; }
#hub .cs-sub { display: block; margin-top: -2px; font-size: 11px; font-weight: 800; color: #e8f5d0; text-shadow: 0 0 3px #101a3a, 0 0 2px #101a3a; }
@media (max-width: 760px) { #hub .cs-sub { color: #2f5a34; text-shadow: none; } }

/* ---------- Invocation ---------- */
.sum-banner {
  position: relative; height: clamp(230px, 36vw, 340px); margin: 6px 12px 0; overflow: hidden;
  background: url(../img/wallpaper.jpg) 88% 30% / cover no-repeat;
  border: 3px solid var(--c-paper); outline: 1px solid var(--c-gold); box-shadow: 0 10px 24px rgba(16, 26, 58, .35);
}
.sum-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 26, 58, .88) 0%, rgba(16, 26, 58, .55) 45%, rgba(16, 26, 58, 0) 75%); }
.sum-banner-text { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; max-width: 60%; color: var(--c-paper); }
.sum-kicker { font-family: var(--font-title); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--c-gold2); }
.sum-title { font-family: var(--font-title); font-weight: 900; font-size: clamp(30px, 5vw, 48px); color: #f7e3a8; line-height: 1.05; margin: 2px 0 6px; }
.sum-info { font-size: 14px; line-height: 1.4; color: #efe6cf; }
.sum-banner .summon-circle { position: absolute; right: 18%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: 1; opacity: 0;
  border-radius: 50%; border: 3px solid rgba(255, 230, 150, .9); box-shadow: 0 0 30px #ffe070, inset 0 0 30px #ffe070; animation: none; }
.sum-banner.casting .summon-circle { opacity: 1; animation: summonCast .45s infinite alternate; }
.sum-banner.lb-flash { animation: flash .7s; }
.sum-pity { margin: 12px 12px 0; padding: 10px 14px; }
.sum-pity-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.sum-pity-row span { font-family: var(--font-title); font-weight: 700; color: var(--c-gold2); }
.summon-btns { display: flex; gap: 14px; justify-content: center; padding: 16px 12px 4px; flex-wrap: wrap; }
.sum-btn {
  position: relative; min-width: 230px; padding: 14px 26px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--c-paper); color: var(--c-navy); --text: var(--c-navy);
  border: 2px solid var(--c-gold); border-radius: 3px; box-shadow: 0 4px 0 #9a7428, 0 8px 18px rgba(16, 26, 58, .25);
}
.sum-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #9a7428; }
.sum-btn .sb-title { font-family: var(--font-title); font-weight: 900; font-size: 20px; letter-spacing: .04em; }
.sum-btn .sb-cost { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 3px; background: var(--c-navy); color: var(--c-paper); font-weight: 800; font-size: 14px; }
.sum-btn .sb-ic { width: 16px; height: 16px; fill: none; stroke: #9fc4ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sum-btn.main { min-width: 270px; background: linear-gradient(180deg, #2c43a0, var(--c-navy) 60%, #16235a); color: #f7e3a8; --text: #f7e3a8;
  border-color: var(--c-gold2); box-shadow: 0 4px 0 #0b1230, 0 0 0 3px rgba(226, 189, 95, .35), 0 10px 24px rgba(16, 26, 58, .35); }
.sum-btn.main .sb-cost { background: var(--c-gold2); color: var(--c-ink); }
.sum-btn.main .sb-ic { stroke: var(--c-ink); }
.sum-btn .sb-ribbon { position: absolute; top: -11px; right: -8px; padding: 2px 10px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 900;
  border-radius: 3px; transform: rotate(4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.sum-btn:disabled { opacity: .5; }
.sum-card { background: var(--c-ink); border: 1px solid var(--c-gold); }
@media (max-width: 760px) {
  .sum-banner-text { left: 14px; max-width: 80%; }
  .sum-btn, .sum-btn.main { min-width: 0; flex: 1 1 140px; padding: 12px 10px 10px; }
  .sum-btn .sb-title { font-size: 16px; }
}

/* ---------- Écrans divers ---------- */
.login-box { background: var(--c-ink); }
.map-node { background: var(--c-navy); }
.map-node.current { background: var(--c-gold2); color: var(--c-ink); --text: var(--c-ink); }
.exp-box-h, .tab-group-h { font-family: var(--font-title); }

/* ---------- Combat : décor et HUD restent sombres ---------- */
#battle, #expBattle, .field, .battle-layout {
  --text: #eef2ff; --muted: #98a3c2; --gold: #d6bd83; --gold-soft: rgba(214, 189, 131, .35);
}
#battle { color: #eef2ff; }
#battle .battle-layout, #expBattle .battle-layout { background: rgba(16, 26, 58, .92); border: 1px solid var(--c-gold); padding: 6px; }
/* Cartes du vivier (Équipes) : toutes lisibles, la sélection est dorée */
.party-pick { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.party-card:not(.on) .pc-face { filter: grayscale(.35); }
.party-card .gather-chip { grid-column: 1 / -1; max-width: 100%; justify-self: start; }
.party-card .gather-chip span { overflow: hidden; text-overflow: ellipsis; }
.pc-face { background: #0d1530; }
/* Correctifs de la tournée d'écrans */
#battle, #expBattle, .field, .battle-layout { color: var(--text); }
.mode-tabs button.active { border-color: var(--c-gold2); background: linear-gradient(180deg, #7a5a1c, #5a4214); box-shadow: 0 0 0 1px var(--c-gold2), 0 0 10px rgba(226, 189, 95, .35); }
.mode-tabs button.active small { color: #f3dfae; }
.tab-group.others summary { color: var(--c-gold2); }
.tab-group.others[open] summary { color: #f7e3a8; }
.filter-tabs .gem-dot { box-shadow: 0 0 0 1px rgba(16, 26, 58, .55); }
/* Connexion : le fond d'écran en bannière */
#loginStage { background: url(../img/wallpaper.jpg) 30% 25% / cover no-repeat; border-bottom: 3px solid var(--c-gold); height: clamp(320px, 44vw, 460px); }
#loginStage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 58, .55) 0%, rgba(16, 26, 58, 0) 40%, rgba(16, 26, 58, .5) 100%); }
#loginStage .hub-title { z-index: 2; }
.login-box { border: 2px solid var(--c-gold); }
#hub .cc-gone, #hub .cc-gone b { color: #f4ecd8; }
.gather-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
@media (max-width: 760px) {
  .gather-row { grid-template-columns: 48px 1fr; }
  .gather-row > button { grid-column: 1 / -1; }
  .team-bar { flex-wrap: wrap; }
  .team-bar .tp-current { flex: 1 1 100%; order: 3; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; min-width: 0; }
  .team-bar .tp-edit { margin-left: auto; }
}
.sum-card { --text: #f4ecd8; --muted: #b9b3a0; color: var(--text); }
.sum-card b { color: #f7e3a8; }
/* Camp : boutons de la compagnie lisibles */
#hub .camp-company { color: #f4ecd8; }
#hub .camp-company .team-bar button { color: #f4ecd8; background: #21347a; border: 1px solid #c8a04a; font-weight: 800; }
#hub .camp-company .team-bar button:disabled { color: #b9b3a0; background: #1a2550; border-color: rgba(200, 160, 74, .4); opacity: .75; }
#hub .camp-company .tp-label { color: #e2bd5f; }
#hub .cc-head small { color: #cfc6ae; }
/* Raid : code et partage */
.raid-code-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.raid-share { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }

/* ---------- Écran Héros (renforcer / éveiller) ---------- */
.hr-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; padding: 0 12px; margin-top: 10px; }
.hr-card { padding: 14px; display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; }
.hr-portrait { height: 200px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 70%, #2c43a0, #0d1530 70%); border: 1px solid var(--c-gold); }
.hr-id h2 { font-family: var(--font-title); color: #f7e3a8; font-size: 24px; }
.hr-stars { color: var(--c-gold2); font-size: 18px; letter-spacing: 2px; }
.hr-stars .dim { opacity: .2; }
.hr-lvl { margin: 8px 0 4px; font-size: 15px; } .hr-lvl span { color: var(--muted); }
.hr-max { display: inline-block; padding: 0 6px; background: var(--c-gold2); color: var(--c-ink); font-weight: 900; font-size: 11px; border-radius: 3px; }
.hr-stats { margin-top: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-modes { grid-column: 1 / -1; justify-content: flex-start; }
.hr-modes button { background: #1a2550; color: #f4ecd8; --text: #f4ecd8; border-color: rgba(200, 160, 74, .5); padding: 8px 16px; font-weight: 800; }
.hr-modes button.active { background: var(--c-gold2); color: var(--c-ink); --text: var(--c-ink); }
.hr-work { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hr-work .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.hr-work .btn-primary { margin-left: auto; }
.hr-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hr-preview > div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(200, 160, 74, .35); padding: 6px 8px; display: flex; flex-direction: column; }
.hr-preview span { font-size: 11px; color: var(--muted); } .hr-preview b { font-size: 16px; }
.warn-soft { color: #ffcf8a; font-size: 13px; }
.hr-reqs { list-style: none; display: grid; gap: 6px; }
.hr-reqs li { padding: 7px 10px; border: 1px solid rgba(200, 160, 74, .35); background: rgba(255, 255, 255, .04); font-size: 14px; }
.hr-reqs li.yes { border-color: #5f8f58; background: rgba(47, 90, 52, .35); }
.hr-reqs li.yes::before { content: "✓ "; color: #b6ff8a; font-weight: 900; }
.hr-reqs li.no::before { content: "• "; color: var(--c-gold2); font-weight: 900; }
.hr-filter { align-items: center; flex-wrap: wrap; }
.hr-filter .grow { flex: 1; }
.hr-filter .fuse-btn { background: var(--c-navy); color: #f4ecd8; --text: #f4ecd8; border-color: var(--c-gold); }
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 0 12px 40px; }
.food-card { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; background: #1a2550; border: 1px solid rgba(200, 160, 74, .45); border-radius: 3px; text-align: center; }
.food-card b { font-size: 12px; } .food-card small { font-size: 10px; color: var(--muted); }
.food-card.s2 { background: #1f3060; } .food-card.s3 { background: #2a2f6e; } .food-card.s4, .food-card.s5 { background: #3a2a6e; }
.food-card.precious { border-color: var(--c-gold2); box-shadow: inset 0 0 0 1px rgba(226, 189, 95, .5); }
.food-card.on { background: #7a5a1c; border-color: #fff1c4; box-shadow: 0 0 0 2px var(--c-gold2); }
.food-card:disabled { opacity: .35; }
.rar-6 { color: #ff9a3c; text-shadow: 0 0 6px rgba(255, 154, 60, .6); }
.xpbar.maxed .fill { background: linear-gradient(90deg, #c8a04a, #f7e3a8); }
/* Difficultés des boss */
.tier-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.tier-pill { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px 2px; background: #1a2550; border-color: rgba(200, 160, 74, .45); }
.tier-pill b { font-family: var(--font-title); font-size: 15px; } .tier-pill small { font-size: 10px; color: var(--muted); }
.tier-pill.done { background: #2f4a34; }
.tier-pill.on { background: var(--c-gold2); color: var(--c-ink); --text: var(--c-ink); --muted: #4a3a14; box-shadow: 0 0 0 2px #fff1c4; }
.tier-pill i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 10px; }
.tier-info { font-size: 12px !important; }
.crypt-floors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.crypt-floor { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; text-align: left; }
.crypt-floor small { font-size: 11px; color: var(--muted); }
.crypt-floor.done { background: #2f4a34; }
.crypt-floor i { position: absolute; top: 4px; right: 6px; font-style: normal; }
@media (max-width: 860px) {
  .hr-main { grid-template-columns: 1fr; }
  .hr-card { grid-template-columns: 110px 1fr; }
  .hr-portrait { height: 140px; }
  .hr-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-pill small { display: none; }
}
.food-card .fc-face { height: 62px; width: 100%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.food-card .fc-face img, .food-card .fc-face canvas { flex: none; }
.hr-lvl span.hr-max { color: var(--c-ink); }
@media (max-width: 760px) { .food-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }
.food-card.owned { background: #2a2f5a; border-style: dashed; }
.food-card.owned.on { background: #7a5a1c; border-style: solid; }
/* Chef d'équipe */
.team-slot { position: relative; }
.team-slot.is-leader { border-color: var(--c-gold2); box-shadow: 0 0 0 2px var(--c-gold2), 0 0 14px rgba(226, 189, 95, .35); }
.lead-badge { position: absolute; top: 4px; left: 6px; padding: 1px 7px; border-radius: 3px; background: var(--c-gold2); color: var(--c-ink); font-size: 10px; font-weight: 900; }
.lead-desc { color: #f3dfae !important; font-weight: 800; text-align: center; }
.lead-set { position: absolute; top: 3px; left: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; opacity: .45; background: rgba(0, 0, 0, .25); }
.lead-set:hover { opacity: 1; background: var(--c-gold2); }
.lead-line { border-left-color: var(--c-gold2) !important; }

/* ---------- Cadeaux du jour ---------- */
.daily-box { max-width: 640px; }
.daily-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.daily-head h2 { margin: 0; }
.daily-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 3px; text-align: center; border: 1px solid rgba(200, 160, 74, .4); border-radius: 3px; background: #1a2550; min-height: 86px; }
.cal-day b { font-size: 11px; line-height: 1.25; }
.cal-day small { font-size: 10px; color: var(--c-gold2); font-weight: 800; }
.cal-n { font-family: var(--font-title); font-size: 11px; color: var(--muted); }
.cal-day.past { opacity: .45; }
.cal-day.today { background: #7a5a1c; border-color: #fff1c4; box-shadow: 0 0 12px rgba(226, 189, 95, .45); }
.cal-day.claimed { background: #2f4a34; border-color: #8fc27a; box-shadow: none; }
.cal-day.big:not(.today) { border-color: var(--c-gold2); }
.cal-claim { grid-column: 1 / -1; margin-top: 6px; }
.daily-missions { display: grid; gap: 5px; }
.mission { display: grid; grid-template-columns: 22px 1fr auto 90px auto; gap: 8px; align-items: center; padding: 6px 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(200, 160, 74, .3); border-radius: 3px; font-size: 13px; }
.mission.done { border-color: #5f8f58; background: rgba(47, 90, 52, .35); }
.m-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--c-gold); display: grid; place-items: center; color: #b6ff8a; font-weight: 900; }
.m-prog { font-weight: 800; } .m-pts { font-size: 11px; color: var(--muted); }
.daily-chest .chest { margin-top: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; border: 1px solid var(--c-gold); background: #1a2550; }
.daily-chest .chest .bar { grid-column: 1 / 2; }
.daily-chest .chest button { grid-row: 1 / span 3; grid-column: 2; }
.daily-chest .chest.ready { background: #7a5a1c; box-shadow: 0 0 14px rgba(226, 189, 95, .45); }
.daily-chest .chest small { color: var(--muted); }
.daily-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .daily-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mission { grid-template-columns: 22px 1fr auto; }
  .mission .bar, .mission .m-pts { display: none; }
}
/* Équipement : mieux disponible */
.better-chip { position: absolute; top: 2px; right: 3px; padding: 0 5px; border-radius: 8px; background: #2f5a34; color: #b6ff8a; font-size: 10px; font-weight: 900; border: 1px solid #8fc27a; }
.hero-tab { position: relative; }
.card-lead { margin-right: 3px; }
.reforge-btns { display: inline-flex; gap: 6px; }
.recipe.capped{opacity:.6}

/* Notes de mise à jour */
#btnNotes { position: relative; }
#btnNotes.has-new::after { content: ""; position: absolute; top: 4px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #e0453a; box-shadow: 0 0 6px #e0453a; }
.patch-notes details { border: 1px solid rgba(201, 162, 74, .35); border-radius: 6px; margin-bottom: 8px; padding: 6px 10px; background: rgba(0, 0, 0, .15); }
.patch-notes summary { cursor: pointer; font-size: 14px; }
.patch-notes ul { margin: 8px 0 2px; padding-left: 18px; }
.patch-notes li { margin: 5px 0; font-size: 13px; line-height: 1.45; }

/* Balayage de la Crypte */
.sweep { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(201, 162, 74, .35); }
.sweep h4 { margin: 0 0 4px; } .sweep h4 small { font-weight: 600; color: var(--muted); margin-left: 6px; }
.sweep-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sweep-row label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.sweep-row input { width: 64px; } .sweep-row select, .sweep-row input { padding: 4px 6px; }

/* ---------- v0.14 : paliers de doublons ---------- */
.hr-prest { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-gold2); font-weight: 700; margin: 2px 0; }
.pr-pips { display: inline-flex; gap: 3px; }
.pr-pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--c-gold2); background: transparent; }
.pr-pips i.big { width: 10px; height: 10px; }
.pr-pips i.on { background: var(--c-gold2); box-shadow: 0 0 5px rgba(240, 200, 100, .7); }
.hr-modes .dot-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff7a4a; vertical-align: middle; margin-left: 3px; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.pr-table td { padding: 5px 7px; border-bottom: 1px solid rgba(200, 160, 74, .2); vertical-align: top; }
.pr-table td:first-child { width: 22px; text-align: center; font-weight: 900; color: var(--c-gold2); }
.pr-table td:nth-child(2), .pr-table td:nth-child(3) { white-space: nowrap; }
.pr-table td:nth-child(3) { opacity: .85; }
@media (max-width: 600px) { .pr-table { font-size: 12px; } .pr-table td { padding: 4px 4px; } }
.pr-table tr.done { opacity: .6; }
.pr-table tr.done td:first-child { color: #b6ff8a; }
.pr-table tr.locked { opacity: .45; }
.st-pr { color: #e0413a; text-shadow: 0 0 6px rgba(224, 65, 58, .55); }
.pr-table tr.next { background: rgba(200, 160, 74, .12); }
.pr-lim2 { display: grid; gap: 3px; padding: 8px 10px; margin: 8px 0; border: 1px solid rgba(200, 160, 74, .35); background: rgba(255, 255, 255, .04); }
.pr-lim2 small { opacity: .85; }
.pr-lim2 .ok, .hr-work .ok { color: #b6ff8a; }
.sk-tag { white-space: nowrap; }
.pr-lim2 .sk-tag { justify-self: start; }
.food-card.static { cursor: default; pointer-events: none; }

.prest-dot { position: absolute; top: 3px; left: 4px; width: 9px; height: 9px; border-radius: 50%; background: #e0413a; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 6px rgba(224,65,58,.8); }
.gear-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------- v0.14.3 : icônes ---------- */
svg.ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.15em; flex: none; }
.slot-box.ico-r, .slot-box.ico-l { display: flex; align-items: stretch; gap: 0; padding: 0; }
.slot-box .sl-txt { display: grid; gap: 2px; align-content: center; padding: 6px 8px; min-width: 0; flex: 1; }
.slot-box .sl-ico { flex: none; width: 58px; display: flex; align-items: center; justify-content: center; color: var(--c-gold2, #e8c46a); opacity: .9; }
.slot-box .sl-ico svg.ico { width: 44px; height: 44px; }
.slot-box.ico-r .sl-ico { order: 2; border-left: 1px solid rgba(200, 160, 74, .45); }
.slot-box.ico-l .sl-ico { border-right: 1px solid rgba(200, 160, 74, .45); }
.slot-box.empty .sl-ico { opacity: .35; }
.slot-box.active-slot .sl-ico { color: var(--teal, #45dcd2); opacity: 1; }
.elem svg.el-ico { width: 1.45em; height: 1.45em; margin: -2px 2px -2px -2px; vertical-align: -0.3em; }
.role-ic { display: inline-flex; margin-right: 3px; vertical-align: -0.2em; }
.role-ic svg.ico { width: 1.3em; height: 1.3em; }
.role-ic.role-tank { color: #c98b52; }
.role-ic.role-heal { color: #f3efe2; }
.role-ic.role-dps { color: #e0625a; }
@media (max-width: 600px) { .slot-box .sl-ico { width: 40px; } .slot-box .sl-ico svg.ico { width: 30px; height: 30px; } }
.card-id .role-ic svg.ico { width: 1.6em; height: 1.6em; }
@media (max-width: 600px) {
  .slot-box .sl-ico { width: 26px; }
  .slot-box .sl-ico svg.ico { width: 22px; height: 22px; }
  .slot-box .sl-txt { padding: 5px 5px; }
}

/* ---------- v0.15 : écran Héros (liste, verrous, fourrage regroupé) ---------- */
.hr-list { margin: 10px 12px 0; padding: 10px 12px; }
.hl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.hl-bar input[type=search] { flex: 1 1 200px; max-width: 320px; padding: 7px 10px; background: #0f1731; color: #f4ecd8; border: 1px solid rgba(200, 160, 74, .6); border-radius: 3px; font: inherit; }
.hl-kind button { padding: 5px 12px; }
.hl-legend { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.hl-legend .hl-co { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--c-gold2); border-radius: 2px; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.hl-role { grid-column: 1 / -1; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--c-gold2); padding: 4px 2px 0; border-bottom: 1px solid rgba(200, 160, 74, .25); }
.hl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 4px; background: #1a2550; border: 1px solid rgba(200, 160, 74, .35); border-radius: 3px; color: #f4ecd8; min-width: 0; }
.hl-item img, .hl-item canvas { height: 40px; width: auto; }
.hl-item.company { border: 2px solid var(--c-gold2); box-shadow: inset 0 0 8px rgba(226, 189, 95, .25); }
.hl-item.dupe { background: #20234a; border-style: dashed; }
.hl-item.active { background: #33408a; box-shadow: 0 0 0 2px #fff1c4; }
.hl-name { font-size: 11px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-stars { font-size: 10px; color: var(--c-gold2); letter-spacing: 0; line-height: 1; }
.hl-lvl { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; }
.hl-lvl .role-ic svg.ico { width: 1.2em; height: 1.2em; }
.hl-tag { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; border-radius: 2px; background: #3b3f6e; color: #cfd3ff; }
.hl-tag.co { background: var(--c-gold2); color: var(--c-ink); }
.hl-lock { position: absolute; top: 3px; right: 4px; color: var(--c-gold2); font-size: 12px; }
.hr-lockbtn { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px; padding: 3px 9px; font-size: 12px; font-weight: 800; border: 1px solid rgba(200, 160, 74, .5); background: transparent; color: var(--muted); border-radius: 3px; cursor: pointer; }
.hr-lockbtn.on { background: rgba(226, 189, 95, .18); color: var(--c-gold2); border-color: var(--c-gold2); }
.hr-lockbtn.co { cursor: default; color: var(--c-gold2); }
.hr-portrait.dupe { background: radial-gradient(ellipse at 50% 70%, #3a3a78, #0d1530 70%); border-style: dashed; }
.hr-dupe-hint { margin-top: 6px; }
.food-card.blocked { opacity: .45; }
.food-card .fc-why { color: var(--c-gold2); display: inline-flex; align-items: center; gap: 3px; }
.food-grid.grouped { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.spirit-group { cursor: pointer; }
.spirit-group.off { opacity: .5; cursor: default; }
.spirit-group .sg-count { font-size: 20px; font-weight: 900; color: #f7e3a8; line-height: 1.1; }
.sg-qty { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.sg-qty button { min-width: 28px; padding: 2px 6px; font-weight: 900; background: #0f1731; color: #f4ecd8; border: 1px solid rgba(200, 160, 74, .6); border-radius: 3px; }
.sg-qty button:disabled { opacity: .35; }
.sg-qty b { min-width: 26px; text-align: center; font-size: 14px; }
@media (max-width: 600px) { .hl-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); max-height: 240px; } .hl-legend { margin-left: 0; } }
.spirit-group { color: #f4ecd8; }
.spirit-group small { color: #b9bfd8; }
.sg-qty b { color: #f7e3a8; }
.food-card.blocked:disabled { opacity: .6; filter: saturate(.4); }
/* v0.16 : main secondaire occupée par une arme à deux mains */
.slot-box.occupied { opacity: .55; border-style: dashed; }
.slot-box.occupied .sl-item { color: #9aa0bd; font-weight: 700; }
.off-head { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(200, 160, 74, .3); }
.weapon-name.off { font-size: 14px; }
/* v0.16.1 : armes face à face, sous les colonnes d'armure */
.slot-box.weapon-slot { margin-top: 8px; border-color: var(--c-gold2, #e2bd5f); box-shadow: inset 0 0 10px rgba(226, 189, 95, .12); }
.slot-box.weapon-slot .sl-ico { color: #f1cf78; }

/* ---------- v0.17 : métiers ---------- */
.prof-head { grid-template-columns: 56px 1fr auto; align-items: center; }
.prof-head .ph-ico, .prof-card .ph-ico { color: var(--c-gold2, #e2bd5f); display: grid; place-items: center; }
.prof-head .ph-ico svg.ico { width: 48px; height: 48px; }
.prof-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.prof-card { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 8px; background: #1a2550; border: 1px solid rgba(200, 160, 74, .5); border-radius: 4px; color: #f4ecd8; }
.prof-card .ph-ico svg.ico { width: 44px; height: 44px; }
.prof-card small { color: #b9bfd8; font-size: 12px; }
.prof-card:hover { border-color: var(--c-gold2); background: #22306a; }
.rec-group { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--c-gold2); margin-top: 6px; border-bottom: 1px solid rgba(200, 160, 74, .25); padding-bottom: 2px; }
.rec-group small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.rec-meta { color: #b9bfd8 !important; }
.mast { font-weight: 800; }
.mast.m1 { color: #8fd3ff; } .mast.m2 { color: #c79bff; } .mast.m3 { color: #ffcf6e; }
.queue-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: center; padding: 6px 8px; background: rgba(255, 255, 255, .04); border-radius: 4px; }
.queue-row .bar { grid-column: 1 / -1; }
.queue-row button { padding: 1px 8px; }
.prov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prov-active { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--c-gold2); border-radius: 4px; background: rgba(226, 189, 95, .08); }
.prov-active small { color: #b9bfd8; } .prov-active span { font-weight: 800; color: #b6ff8a; font-size: 12px; }
.mat.zero { opacity: .45; }
@media (max-width: 600px) { .prof-head { grid-template-columns: 40px 1fr; } .prof-head #cChange { grid-column: 1 / -1; } .prov-grid { grid-template-columns: 1fr; } }
.gem-rar { font-weight: 800; }
.gem-rar.r-commun { color: #c9cfe0; } .gem-rar.r-rare { color: #6fb8ff; } .gem-rar.r-epique { color: #c68bff; }

/* ---------- v0.19 : saison d'expédition ---------- */
.se-roster { display: grid; grid-template-columns: 1fr 1fr 3fr; gap: 10px; }
.se-heroes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.se-hero { display: grid; justify-items: center; gap: 1px; width: 84px; padding: 5px 3px; background: #1a2550; border: 1px solid rgba(200, 160, 74, .4); border-radius: 3px; color: #f4ecd8; }
.se-hero b { font-size: 11px; } .se-hero small { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; }
.se-hero.on { background: #7a5a1c; border-color: #fff1c4; box-shadow: 0 0 0 2px var(--c-gold2); }
.se-hero.taken { opacity: .45; }
.se-hero:disabled { cursor: default; }
.se-face { height: 40px; display: flex; align-items: flex-end; justify-content: center; }
.se-join { display: flex; gap: 8px; flex-wrap: wrap; }
.se-join input { flex: 1 1 200px; padding: 8px 10px; background: #0f1731; color: #f4ecd8; border: 1px solid rgba(200, 160, 74, .6); border-radius: 3px; font: inherit; }
.se-code { font-family: monospace; font-size: 15px; letter-spacing: .15em; color: #ffe08a; }
.se-members { display: grid; gap: 4px; }
.se-member { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.se-member .dot { width: 8px; height: 8px; border-radius: 50%; background: #555c78; } .se-member .dot.on { background: #6fe07a; }
.se-member small { color: var(--muted); }
.se-zone { display: grid; gap: 4px; }
/* v0.21 — saison v2 */
.se-check input { width: auto !important; margin: 0; flex: none; }
.btns .se-check, .se-check { display: inline-flex; width: auto; white-space: nowrap; flex: none; align-items: center; gap: 6px; font-size: 13px; color: #d9dcee; cursor: pointer; }
.se-fightrow { margin: 4px 0 8px; align-items: center; }
.se-manage { margin-top: 10px; padding: 8px; border: 1px solid #3a3a52; border-radius: 8px; background: #1a1a26; }
.se-slots { display: grid; gap: 4px; }
.se-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.se-sl { width: 120px; color: #aab; flex: none; }
.se-slot select, .se-sock select, .se-transfer select { max-width: 260px; }
.se-wsock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0; font-size: 13px; }
.se-sock { display: inline-flex; align-items: center; gap: 4px; }
.se-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.se-prov { display: grid; gap: 2px; padding: 6px 8px; border-radius: 6px; background: #22222e; font-size: 13px; }
.se-prov small { color: #aab; } .se-prov button { justify-self: start; }
.se-gems { display: flex; flex-wrap: wrap; gap: 4px; }
.se-gem { font-size: 12px; padding: 2px 7px; border-radius: 10px; background: #2a2a3a; color: #cfd2e6; }
.se-gem.on { background: #3a3460; color: #d8ccff; }
.se-transfer { display: grid; gap: 6px; }
.se-transfer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.se-transfer input[type=number] { width: 90px; }
@media (max-width: 600px) { .se-sl { width: 100%; } }
/* v0.20 — vue de région */
/* v0.23.1 — vue animée persistante */
.se-arena { position: absolute; inset: 0; }
.se-arena > .scene { position: absolute; inset: 0; }
.se-view-top, .se-view-bot { z-index: 4; }
.se-foes, .se-allies { z-index: 2; }
.se-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.se-foebar { position: absolute; left: 4%; bottom: 30px; width: 30%; height: 5px; z-index: 3; background: #0008; border-radius: 3px; overflow: hidden; }
.se-foebar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #d8443a, #f08a4a); transition: width .9s linear; }
.se-actor { transition: opacity .5s, transform .5s; }
.se-actor.se-atk { animation: seAtkR .45s ease-out; }
.se-actor.foe.se-atk { animation: seAtkL .45s ease-out; }
.se-actor.se-hurt { animation: seHurt .35s; }
.se-actor.se-die { opacity: 0; transform: translateY(12px) scale(.8); filter: brightness(2) saturate(0); }
.se-actor.se-spawn { animation: seSpawn .6s ease-out; }
@keyframes seAtkR { 40% { transform: translateX(-22px); } }
@keyframes seAtkL { 40% { transform: translateX(22px); } }
@keyframes seHurt { 30% { transform: translateX(4px); filter: brightness(2.2) sepia(1) hue-rotate(-50deg) saturate(5); } }
@keyframes seSpawn { from { opacity: 0; transform: translateX(-30px); } }
.se-float { position: absolute; transform: translateX(-50%); font-weight: 800; font-size: 15px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; animation: seFloat 1.5s ease-out forwards; }
.se-float.crit { color: #ffcf40; font-size: 19px; }
.se-float.win { color: #9ff09f; font-size: 22px; }
.se-float.loot { color: #c7a4ff; font-size: 13px; }
.se-float.lvl { color: #7fe3ff; font-size: 18px; }
@keyframes seFloat { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -42px; } }
.se-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 8px; text-align: center; font-weight: 800; font-size: 18px; color: #fff; background: #000c; border: 2px solid #ffcf40; animation: seBanner 2.6s ease-out forwards; white-space: nowrap; }
.se-banner small { display: block; font-size: 12px; font-weight: 600; color: #e8dcc0; margin-top: 2px; }
.se-banner.red { border-color: #e0524a; background: #3a0e0ecc; }
@keyframes seBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.se-shake { animation: seShake .45s; }
@keyframes seShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.se-next { color: #cfd2e6; font-size: 12px; }
.se-locked { margin: 6px 0 2px; }
@media (max-width: 600px) { .se-foebar { width: 40%; bottom: 44px; } .se-banner { font-size: 15px; white-space: normal; width: 80%; } }

.hl-tag.bot { background: #3a3a52; color: #b8c0ff; border-color: #5a5a80; }
.se-view { position: relative; height: 230px; border-radius: 8px; overflow: hidden; margin: 6px 0 8px; background: #000; }
.se-view > .scene { position: absolute; inset: 0; }
.se-view-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 6px 10px; background: linear-gradient(#000b, transparent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.se-view-top b { font-size: 15px; color: #fff; text-shadow: 0 1px 2px #000; }
.se-view-top small { color: #e8dcc0; text-shadow: 0 1px 2px #000; }
.se-dots { display: flex; gap: 3px; margin-left: auto; }
.se-dots i { width: 9px; height: 9px; border-radius: 50%; background: #0008; border: 1px solid #fff6; }
.se-dots i.done { background: #7cd67c; border-color: #bff0bf; }
.se-dots i.cur { background: #ffcf40; border-color: #fff; box-shadow: 0 0 6px #ffcf40; }
.se-dots i.boss { border-radius: 2px; transform: rotate(45deg); }
.se-view-bot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 6px 10px; font-size: 13px; color: #eee; background: linear-gradient(transparent, #000c); }
.se-foes, .se-allies { position: absolute; bottom: 34px; z-index: 2; display: flex; align-items: flex-end; gap: 2px; }
.se-foes { left: 4%; } .se-allies { right: 3%; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 48%; }
.se-allies .se-actor { margin-left: -14px; }
.se-map { display: grid; gap: 3px; }
.se-stage { display: flex; align-items: center; gap: 3px; }
.se-stage small { width: 52px; flex: none; color: #aab; font-size: 11px; }
.se-stage i { flex: 1; height: 14px; max-width: 34px; border-radius: 3px; background: #2a2a3a; border: 1px solid #3a3a4e; font-style: normal; font-size: 9px; line-height: 12px; text-align: center; }
.se-stage i.done { background: #3c6a44; border-color: #5a9a64; }
.se-stage i.cur { background: #ffcf40; border-color: #fff; box-shadow: 0 0 6px #ffcf4088; }
.se-stage i.big { background: #5a2a2a; border-color: #a04a4a; }
.se-stage i.big.done { background: #3c6a44; }
.se-regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.se-reg { display: flex; align-items: center; gap: 6px; text-align: left; font-size: 12px; padding: 5px 7px; border-radius: 6px; background: #22222e; border: 1px solid #34344a; color: #cfd2e6; }
.se-reg span { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #0006; }
.se-reg.done { border-color: #4a7a52; color: #bfe6c4; }
.se-reg.done span { background: #3c6a44; }
.se-reg.cur { border-color: #ffcf40; color: #fff; box-shadow: 0 0 0 1px #ffcf4066 inset; }
.se-reg.cur span { background: #b8902a; }
.se-reg.lock { opacity: .55; }
.se-reg.arena { border-color: #8a6a2a; }
.se-stage small { white-space: nowrap; }
@media (max-width: 600px) { .se-view { height: 200px; } .se-stage small { width: 44px; font-size: 10px; } .se-regs { grid-template-columns: 1fr 1fr; }
  .se-foes { transform: scale(.62); transform-origin: bottom left; left: 2%; } .se-allies { transform: scale(.62); transform-origin: bottom right; display: grid; grid-template-columns: repeat(3, auto); row-gap: 0; max-width: none; right: 2%; }
  .se-allies .se-actor:nth-child(n+4) { transform: translateX(-24px); margin-top: -40px; } }
.se-loot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #d9dcee; }
.se-bonus button:disabled { opacity: .6; }
.se-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.se-th { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px; background: rgba(255, 255, 255, .04); border-radius: 4px; }
.se-th small { display: block; color: #b9bfd8; font-size: 11px; }
.se-gear span { white-space: nowrap; }
.se-log { font-size: 13px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); } .se-log small { color: var(--muted); margin-right: 6px; }
.se-rank { width: 100%; border-collapse: collapse; font-size: 13px; } .se-rank td { padding: 5px 6px; border-bottom: 1px solid rgba(200, 160, 74, .2); }
.se-rank tr.me { background: rgba(226, 189, 95, .12); } .se-rank td:first-child { font-weight: 900; color: var(--c-gold2); width: 24px; }
@media (max-width: 700px) { .se-roster { grid-template-columns: 1fr; } }

/* v0.21 — sets */
.t-set { margin-top: 4px; padding: 4px 6px; border-left: 2px solid #5ad0a0; background: #0003; font-size: 12px; color: #9aa; }
.t-set b { color: #7ff0c0; }
.t-set div.on { color: #bff5d8; }
.set-box { margin: 6px 0; padding: 6px 8px; border: 1px solid #2e5a4a; border-radius: 6px; background: #1a2a26; }
.set-head b { color: #7ff0c0; }
.set-bonus { display: block; color: #b8d8cc; margin: 2px 0 4px; }
.gp-icons { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.gp-icons .gi { width: 22px; height: 22px; }

/* v0.23.1 — carte Saison du Camp */
.camp-season { position: relative; flex: none; display: flex; min-height: 74px; cursor: pointer; overflow: hidden; border: 1px solid var(--c-gold, #c9a24a); box-shadow: 0 6px 16px rgba(0,0,0,.2); background: #101428; }
.camp-season .csn-scene { position: absolute; inset: 0; opacity: .75; }
.camp-season .csn-scene > .scene { position: absolute; inset: 0; }
.camp-season .csn-body { position: relative; z-index: 2; flex: 1; display: grid; gap: 4px; padding: 10px 14px; background: linear-gradient(90deg, #000c, #0006 70%, transparent); color: #fff; }
.camp-season .csn-body b { font-size: 15px; text-shadow: 0 1px 2px #000; }
.camp-season .csn-body small { color: #e8dcc0; text-shadow: 0 1px 2px #000; }
.camp-season .cg-bar { max-width: 260px; }
.camp-season.blocked { border-color: #e0524a; }
.camp-season:hover { filter: brightness(1.08); }
.camp-season .cg-bar { background: #fff3; } .camp-season .cg-bar > div { background: #ffcf40; }

/* ---------- v0.24 — écran Saison en colonnes ---------- */
#season .craft-body { max-width: 1120px; margin: 0 auto; width: 100%; }
#season .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.se-bar { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.se-teamchip { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; }
.se-tname { font-family: var(--font-title); font-size: 18px; color: #f7e3a8; }
.se-teamchip > small { color: var(--muted); flex: 1 1 160px; }
.se-codebox { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border: 1px dashed var(--c-gold); border-radius: 4px; }
.se-codebox small { color: var(--muted); }
.se-code { user-select: all; -webkit-user-select: all; cursor: text; }
.se-infobtn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 8px 16px; background: var(--c-ink); }
.se-infobtn .ic { width: 18px; height: 18px; stroke: var(--c-gold2); fill: none; stroke-width: 2; }
.se-infomodal { max-height: 60vh; overflow: auto; text-align: left; }
.se-infomodal .se-roster { grid-template-columns: 1fr; }
/* Grille principale : arène 8/12, colonne droite 4/12 */
.se-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.se-colL, .se-colR { display: grid; gap: 10px; min-width: 0; }
.se-main .se-view { height: 330px; margin: 0; border: 1px solid var(--c-gold); }
.se-main .se-fightrow { margin: 0; }
.se-view-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.se-bchip { margin-left: auto; padding: 2px 8px; border-radius: 10px; background: #3a2e14; border: 1px solid var(--c-gold); font-size: 12px; color: #f3d68a; }
.se-card { padding: 10px 12px; gap: 6px; }
.se-card h4 .link-btn, #seJournal h4 .btn-small { font-family: var(--font-ui, sans-serif); font-size: 12px; }
.se-card .link-btn, .se-a-ev .link-btn { color: var(--c-gold2); padding: 0; justify-self: start; font-size: 12px; text-decoration: underline; }
.se-rk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 3px; }
.se-rk > b { color: var(--c-gold2); }
.se-rk > span { display: grid; min-width: 0; } .se-rk > span > b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-rk > span > small { font-size: 11px; color: var(--muted); }
.se-rk.me { background: rgba(106, 90, 160, .45); box-shadow: inset 0 0 0 1px #8a7ad0; }
.se-tag { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #2a3470; color: #c7ccf0; white-space: nowrap; }
.se-ap { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .se-ap b { color: #f3d68a; font-size: 12px; text-align: right; }
.se-a-prov .btn-small { justify-self: stretch; }
/* Bandeau des héros */
.se-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.se-mini, .se-cmp { display: grid; gap: 3px; align-content: start; text-align: left; padding: 6px 7px; background: var(--c-ink); border: 1px solid #3a4478; border-radius: 4px; min-width: 0; }
.se-mini.on, .se-cmp.on { border-color: var(--c-gold2); box-shadow: 0 0 0 1px var(--c-gold2); }
.se-mini small, .se-cmp small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-mini-h { display: flex; align-items: center; gap: 5px; min-width: 0; } .se-mini-h b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-face.sm { width: 26px; height: 26px; flex: none; overflow: hidden; align-items: flex-end; }
.se-face.xs { width: 18px; height: 18px; flex: none; overflow: hidden; display: inline-flex; align-items: flex-end; justify-content: center; }
.se-face.sm img, .se-face.xs img, .se-face.sm canvas, .se-face.xs canvas { max-height: 100%; }
.se-buffs { display: flex; flex-wrap: wrap; gap: 3px; min-height: 16px; }
.se-buffs i { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 8px; background: #3a2e14; color: #f3d68a; border: 1px solid var(--c-gold); white-space: nowrap; }
/* Parcours */
.se-trail { padding: 0; overflow: hidden; }
.se-trail-map { position: relative; }
.se-trail-map svg { display: block; width: 100%; height: auto; }
.se-trail-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0008, #0002 40%, #0006); pointer-events: none; }
.se-trail-map svg { position: relative; z-index: 1; }
.se-trail-h { position: absolute; left: 12px; top: 8px; z-index: 2; display: grid; pointer-events: none; }
.se-trail-h b { font-family: var(--font-title); font-size: 17px; color: #f3e6c2; text-shadow: 0 2px 4px #000; }
.se-trail-h small { font-size: 12px; color: #e8dcc0; text-shadow: 0 1px 2px #000; }
.se-tdot { cursor: help; }
.se-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 12px; font-size: 12px; color: #d9dcee; }
.se-legend span { display: inline-flex; align-items: center; gap: 5px; }
.se-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .se-legend i.big { width: 13px; height: 13px; }
/* Journal */
.se-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.se-chip { padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: transparent; border: 1px solid #3a4478; }
.se-chip.on { background: var(--c-gold2); color: var(--c-ink); border-color: var(--c-gold2); }
.se-loglist { max-height: 310px; overflow-y: auto; border: 1px solid #3a4478; border-radius: 4px; background: #0e1430; padding: 0 8px; }
.se-log.lk-prog { color: #ffe08a; } .se-log.lk-loot { color: #d4bcff; } .se-log.lk-tr { color: #a8c4ff; }
/* Héros : liste compacte + fiche */
.se-hgrid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 12px; align-items: start; }
.se-hlist { display: grid; gap: 5px; }
.se-hrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; background: #1a2550; border: 1px solid #3a4478; }
.se-hrow.on { background: #2e3566; border-color: var(--c-gold2); }
.se-hrow .se-face { width: 36px; height: 36px; overflow: hidden; }
.se-hrow-t { display: grid; min-width: 0; } .se-hrow-t b { font-size: 14px; } .se-hrow-t b small { font-weight: 400; color: var(--muted); font-size: 12px; }
.se-hrow-t > small { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; }
.se-pw { display: grid; justify-items: end; line-height: 1.1; } .se-pw b { color: var(--c-gold2); font-size: 14px; } .se-pw small { font-size: 10px; color: var(--muted); }
.se-sheet { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; padding: 10px; border: 1px solid #3a4478; border-radius: 4px; background: #141c3c; min-width: 0; }
.se-sheet-main, .se-sheet-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.se-sheet-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.se-sheet-h .se-face { width: 44px; height: 44px; overflow: hidden; }
.se-sheet-h small { display: block; color: var(--muted); font-size: 12px; }
.se-sname { font-family: var(--font-title); font-size: 19px; color: #f3e6c2; }
.se-sl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.se-wpn { display: grid; gap: 6px; padding: 8px 10px; border-radius: 4px; background: #22284f; border: 1px solid var(--c-gold); }
.se-wpn.off { border-color: #3a4478; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.se-wpn-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.se-wpn-h small { color: #c9cce0; font-size: 12px; }
.se-wpn-h select, .se-slot-c select { max-width: 220px; font-size: 12px; }
.se-socks { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.se-sk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 12px; font-size: 12px; background: #1a1f3a; border: 1px dashed var(--gc, #9aa0b8); color: #d9dcee; }
.se-sk.full { border-style: solid; background: color-mix(in srgb, var(--gc, #9aa0b8) 22%, #1a1f3a); color: #fff; }
.se-sk select { font-size: 12px; padding: 1px 2px; max-width: 170px; }
.se-sk .gem-dot { margin: 0 2px; }
.se-lk { display: inline-block; width: 14px; height: 3px; background: #4a5078; margin: 0 2px; }
.se-lk.on { background: var(--c-gold2); box-shadow: 0 0 6px rgba(226, 189, 95, .7); height: 4px; }
.se-x { padding: 0 6px; font-size: 12px; line-height: 16px; border-radius: 8px; }
.se-slots2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.se-slot2 { display: grid; gap: 2px; padding: 6px 9px; border-radius: 4px; background: #22284f; border: 1px solid #3a4478; min-width: 0; }
.se-slot2 > div:first-child { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .se-slot2 b { font-size: 13px; }
.se-slot2 small { color: #c9cce0; font-size: 12px; } .se-slot2.empty { border-color: #4a5078; } .se-slot2.avail { border-color: #4a7a52; }
.se-slot2 .se-sl { width: 68px; flex: none; }
.se-slot-c { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.se-slot-c .btn-small { font-size: 11px; padding: 2px 8px; }
.se-stats, .se-provbox { display: grid; gap: 4px; padding: 10px; border-radius: 4px; background: #0e1430; border: 1px solid #3a4478; font-size: 13px; }
.se-provbox { background: #2a2414; border-color: var(--c-gold); }
.se-stats > div, .se-pv { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .se-stats span, .se-pv > span { color: var(--muted); }
.se-pv b { color: #f3d68a; font-size: 12px; text-align: right; } .se-pv .btn-small { font-size: 11px; padding: 2px 8px; }
.se-st-h { font-family: var(--font-title); color: #f3e6c2; margin-bottom: 2px; }
/* Régions et farm */
.se-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.se-regrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 4px; background: #22284f; border: 1px solid #4a7a52; }
.se-regrow.cur { border: 2px solid #ffcf40; background: #2a2a1c; } .se-regrow.farm { border: 2px solid #7fcf8a; background: #1c3a26; }
.se-regrow.unknown { background: #181c38; border: 1px dashed #4a5078; color: #8a90b8; }
.se-thumb { width: 56px; height: 36px; border-radius: 3px; display: grid; place-items: center; font-size: 18px; font-weight: 900; background: #11152c; color: #6a7098; }
.se-regt { display: grid; min-width: 0; } .se-regt b { font-size: 14px; } .se-regt small { font-size: 12px; color: var(--muted); }
.se-here { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #ffcf40; color: #1d2346; font-weight: 800; }
.se-farmhelp { font-size: 12px; padding: 8px 10px; border-radius: 4px; background: #0e1430; border: 1px solid #3a4478; }
.se-lootchips { display: flex; flex-wrap: wrap; gap: 6px; }
.se-mat { display: inline-flex; gap: 6px; align-items: center; padding: 4px 9px; border-radius: 4px; background: #22284f; border: 1px solid #3a4478; font-size: 13px; }
.se-mat b { color: var(--c-gold2); }
.se-gem { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--gc, #9aa0b8) 70%, transparent); cursor: help; }
.se-gem .gem-dot { width: 7px; height: 7px; margin: 0 5px 0 1px; }
.se-bonus2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.se-bonus2 button { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; background: #22284f; border-color: #3a4478; }
.se-bonus2 button small { font-size: 11px; color: var(--muted); text-align: center; }
.se-bonus2 button.active { border: 2px solid #ffcf40; background: #3a2e14; } .se-bonus2 button.active small { color: #f3d68a; }
.se-bonus2 button:disabled { opacity: .55; } .se-bonus2 button.active:disabled { opacity: .9; }
/* Parts de transfert */
.se-shares summary { cursor: pointer; font-size: 13px; color: #f3e6c2; } .se-shares summary small { color: var(--muted); font-size: 11px; }
.se-sgrid { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; font-size: 13px; margin: 6px 0; max-height: 260px; overflow-y: auto; }
.se-sgrid small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.se-sbar { position: relative; height: 10px; border-radius: 5px; background: #0006; display: flex; overflow: hidden; }
.se-sbar .mine { background: var(--c-gold2); } .se-sbar .oth { background: #8fb0ff; }
.se-sbar .cap { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; margin-left: -1px; }
/* Classement complet */
#seRanking h4 { flex-wrap: wrap; gap: 6px; }
.se-rcols, .se-rhead { display: grid; grid-template-columns: 40px minmax(0, 1fr) 300px 100px 80px 18px; gap: 10px; align-items: center; }
.se-rcols { padding: 0 10px; font-size: 11px; color: var(--muted); }
.se-rrow { border-radius: 4px; background: #1a2550; border: 1px solid #3a4478; margin-bottom: 5px; }
.se-rrow.me { background: #3a3460; border-color: #6a5aa0; } .se-rrow.open { border-color: var(--c-gold2); }
.se-rhead { width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; }
.se-rpos { font-size: 18px; }
.se-rname { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .se-rname > b { font-size: 14px; }
.se-faces { display: inline-flex; gap: 2px; }
.se-rwhere { font-size: 13px; } .se-rwhere small { color: #9ff09f; }
.se-rprog { margin: 0; }
/* v0.31 : « #1 — Équipe — Zone 37 — Nom de la zone » */
.se-dash { color: var(--muted); font-weight: 400; }
.se-rname > b .se-dash { margin-right: 2px; }
.se-zno { font-weight: 700; color: #e8e2ff; white-space: nowrap; }
.se-rwhere .se-zname { white-space: nowrap; }
.se-rwhere .se-rk-f { display: block; color: var(--muted); }
.se-rk > span > small > .se-dash:first-child { display: none; }   /* widget : 2e ligne sans tiret initial */
.se-rk .se-zno { color: #d8ccff; }
.se-rk-final { font-size: 15px; margin: 2px 0 6px; }
.se-chev { color: var(--muted); }
.se-rbody { padding: 0 10px 10px 54px; display: grid; gap: 8px; }
.se-comp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.se-cgems { color: #c7a4ff !important; white-space: normal !important; }
@media (max-width: 860px) {
  /* Mobile : les colonnes s'empilent dans l'ordre arène, héros, classement, parcours… */
  .se-main { display: flex; flex-direction: column; }
  .se-colL, .se-colR { display: contents; }
  .se-a-arena { order: 1; } .se-a-act { order: 2; } .se-a-strip { order: 3; } .se-a-rank { order: 4; } .se-a-map { order: 5; } .se-a-prov { order: 6; } .se-a-ev { order: 7; }
  .se-main .se-view { height: 230px; }
  .se-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .se-hgrid, .se-sheet, .se-2col { grid-template-columns: minmax(0, 1fr); }
  .se-comp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .se-rcols { display: none; }
  .se-rhead { grid-template-columns: 32px minmax(0, 1fr) 64px; row-gap: 4px; }
  .se-rwhere .se-zname { white-space: normal; }
  .se-rwhere { grid-column: 2 / 3; font-size: 12px; } .se-rprog { grid-column: 2 / 3; } .se-rhead .se-pw { grid-row: 1; grid-column: 3; } .se-chev { display: none; }
  .se-rbody { padding: 0 8px 8px; }
}
@media (max-width: 520px) {
  .se-slots2 { grid-template-columns: minmax(0, 1fr); }
  .se-bonus2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-sgrid { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; }
  .se-teamchip { flex-basis: 100%; }
  .se-infobtn { flex: 1; justify-content: center; }
}
/* v0.24 — ajustements */
.se-trail-h { position: static; padding: 8px 12px 0; position: relative; z-index: 2; }
.se-pv { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; }
.se-pv b { text-align: left; }
.se-prov { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.se-prov > span, .se-prov > small { grid-column: 1; }
.se-prov button { grid-column: 2; grid-row: 1 / span 2; }
.se-ap span { min-width: 0; }
@media (max-width: 860px) { .se-main { align-items: stretch; } }

/* ---------- v0.25 — actions de l'équipe (Prière, Brasier, Vœu, Reliques), vote, fonte et forge, murs ---------- */
.se-actions { display: grid; gap: 10px; padding: 12px; border-radius: 6px; background: #1d2346; border: 2px solid #b8923f; color: #e8e4d8; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.se-actions-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.se-actions-h b { font-family: var(--font-title); font-size: 18px; color: #f3e6c2; }
.se-actions-h small { color: #a9adc6; font-size: 12px; }
.se-actgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.se-act { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 6px; background: #22284f; border: 1px solid #3a4478; min-width: 0; font-size: 13px; }
.se-act > small { color: #d8d2bf; font-size: 12px; } .se-act > small.hint { color: #a9adc6; }
.se-act-h { display: flex; align-items: center; gap: 7px; } .se-act-h b { font-family: var(--font-title); font-size: 15px; color: #f3e6c2; }
.se-act-big { display: flex; align-items: baseline; gap: 6px; } .se-act-big b { font-size: 26px; line-height: 1; color: #ffcf40; }
.se-act-big small { color: #a9adc6; font-size: 12px; }
.se-act-big b.fire { color: #ffcf40; text-shadow: 0 0 14px #f08a4a; } .se-act-big b.wish { color: #c7a4ff; }
.se-act .se-actbtn { margin-top: auto; }
.se-act-pray { background: radial-gradient(circle at 85% 30%, #5a2a10 0%, #22284f 55%); }
.se-act-bra { background: radial-gradient(circle at 50% 110%, #7a2a14 0%, #2a1408 45%, #22284f 90%); }
.se-act-wish { background: linear-gradient(180deg, #2a2456, #22284f); }
.se-actbtn { min-height: 38px; padding: 4px 10px; border-radius: 6px; border: 1px solid #b8923f; background: #2a3470; color: #f3e6c2; font-weight: 700; font-size: 13px; }
.se-slots .se-upall { width: 100%; margin: 8px 0 4px; }
.se-slots .se-upall:not(:disabled) { border: 2px solid #ffcf40; background: #3a2e14; color: #ffcf40; }
.se-actbtn.gold { border: 2px solid #ffcf40; background: #3a2e14; color: #ffcf40; font-weight: 800; }
.se-actbtn.wish { border: 2px solid #c7a4ff; background: #3a3460; color: #efe4ff; }
.se-actbtn.on { background: #3a3460; border-color: #c7a4ff; }
.se-actbtn:disabled { opacity: .55; cursor: default; }
.se-abar { display: block; height: 8px; border-radius: 4px; background: #0006; overflow: hidden; }
.se-abar i { display: block; height: 100%; border-radius: 4px; background: #7fcf8a; }
.se-abar.fire i { background: linear-gradient(90deg, #f08a4a, #ffcf40); } .se-abar.wish i { background: linear-gradient(90deg, #6a4aa0, #c7a4ff); } .se-abar.gold i { background: linear-gradient(90deg, #b8923f, #ffcf40); }
.se-flame { display: inline-block; width: 14px; height: 18px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #ffcf40, #f08a4a 60%, #7a2a14); box-shadow: 0 0 10px #f08a4a; flex: none; }
.se-star { display: inline-block; width: 16px; height: 16px; flex: none; background: #c7a4ff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); box-shadow: 0 0 8px #c7a4ff; }
.se-gemico { display: inline-block; width: 14px; height: 14px; flex: none; background: linear-gradient(135deg, #ffcf40, #e0685f); transform: rotate(45deg); border-radius: 2px; }
.se-dotbadge { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 9px; background: #e0685f; color: #fff; margin-left: auto; animation: seBlink 1.6s ease-in-out infinite; }
@keyframes seBlink { 50% { opacity: .55; } }
.se-relics { display: flex; flex-wrap: wrap; gap: 4px; max-height: 88px; overflow-y: auto; }
.se-relic { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #14182f; border: 1px solid #3a4478; cursor: help; white-space: nowrap; }
.se-relic.r-off, .se-vcard.r-off { border-color: #e0685f; } .se-relic.r-def, .se-vcard.r-def { border-color: #8fb0ff; } .se-relic.r-util, .se-vcard.r-util { border-color: #7fcf8a; }
.se-relic.q-legendaire { color: #ffcf40; box-shadow: 0 0 6px rgba(255, 207, 64, .4); } .se-relic.q-rare { color: #a9d0ff; }
/* Vote de relique */
.se-vote { display: grid; gap: 10px; padding: 12px 14px; border-radius: 8px; background: #1a1f40; border: 2px solid #ffcf40; box-shadow: 0 0 18px rgba(255, 207, 64, .25); }
.se-vote-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .se-vote-h b { font-family: var(--font-title); font-size: 18px; color: #ffcf40; flex: 1 1 260px; }
.se-vote-h small { color: #f3d68a; font-size: 13px; }
.se-vote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.se-vcard { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 8px; background: #22284f; border: 2px solid #3a4478; min-width: 0; }
.se-vcard.q-legendaire { box-shadow: 0 0 0 1px #ffcf40, 0 0 14px rgba(255, 207, 64, .35); }
.se-vcat { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #a9adc6; }
.se-vcard.r-off .se-vcat { color: #ff9a8a; } .se-vcard.r-def .se-vcat { color: #a9c4ff; } .se-vcard.r-util .se-vcat { color: #9ff09f; }
.se-vcard > b { font-size: 16px; color: #f3e6c2; } .se-vcard.q-legendaire > b { color: #ffcf40; }
.se-vtext { font-size: 13px; line-height: 1.4; flex: 1; }
.se-voters { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; } .se-voters i { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #3a3460; }
.se-vote-f { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .se-vote-f small { font-size: 12px; color: #a9adc6; flex: 1 1 300px; }
/* Brasier déplié */
.se-brapanel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 6px; background: #14182f; border: 1px solid #3a4478; }
.se-brapanel .rec-group { color: #f3e6c2; } .se-brapanel .rec-group small { color: #a9adc6; }
.se-foods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
.se-food { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; background: #22284f; border: 1px solid #3a4478; font-size: 13px; min-width: 0; }
.se-food small { color: #a9adc6; font-size: 12px; } .se-food-b { display: flex; flex-wrap: wrap; gap: 4px; } .se-food-b .btn-small { font-size: 12px; padding: 2px 8px; }
.se-blvs { display: grid; gap: 4px; }
.se-blv { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 9px; border-radius: 4px; background: #14182f; border: 1px solid #2a3060; font-size: 13px; color: #8a90b8; }
.se-blv.on { background: #2a2414; border-color: #b8923f; color: #e8e4d8; } .se-blv b { color: #6a7098; } .se-blv.on b, .se-blv.on small { color: #ffcf40; } .se-blv small { font-size: 11px; }
/* Fonte et forge */
.se-forge { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.se-meltlist { display: grid; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 2px; }
.se-meltrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 9px; border-radius: 4px; background: #22284f; border: 1px solid #3a4478; font-size: 13px; color: #e8e4d8; cursor: pointer; }
.se-meltrow input { width: 17px; height: 17px; margin: 0; } .se-meltrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-meltrow small { color: #a9adc6; font-size: 11px; white-space: nowrap; } .se-meltrow b { color: #f3d68a; }
.se-forge-side { display: grid; gap: 8px; padding: 10px; border-radius: 6px; background: #14182f; border: 1px solid #3a4478; }
.se-forge-n { display: flex; justify-content: space-between; font-size: 13px; } .se-forge-n b { color: #ffcf40; }
/* Murs */
.se-murtag { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; background: #5a1e1e; border: 1px solid #e0685f; color: #ffd0c8; cursor: help; }
.se-legend i.sq { border-radius: 2px; }
/* Carte du Camp : pastilles */
.csn-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.csn-b { font-style: normal; font-family: var(--font-ui, sans-serif); letter-spacing: 0; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 9px; color: #1d2346; background: #ffcf40; }
.csn-b.vote { background: #e0685f; color: #fff; animation: seBlink 1.6s ease-in-out infinite; } .csn-b.wish { background: #c7a4ff; }
@media (max-width: 860px) {
  .se-actgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-vote-grid, .se-brapanel, .se-forge { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .se-actions { padding: 10px 8px; }
  .se-actgrid { gap: 6px; } .se-act { padding: 8px; } .se-act-big b { font-size: 22px; }
  .se-meltrow { grid-template-columns: 20px minmax(0, 1fr) auto; } .se-meltrow small { display: none; }
}
.se-act .link-btn { display: inline; padding: 0; min-height: 0; background: none; border: 0; color: #ffcf40; text-decoration: underline; font-size: 12px; font-weight: 600; }
.se-brapanel .hint, .se-forge-side .hint, .se-vote .hint { color: #a9adc6; }
.se-vcard.q-commune, .se-vcard.q-rare, .se-vcard.q-legendaire { color: #e8e4d8; }
.se-act-big b { white-space: nowrap; }
@media (max-width: 420px) { .se-act-big { flex-wrap: wrap; row-gap: 0; } .se-act-big b.wish { font-size: 20px; } .se-vcard { padding: 10px; } .se-vtext { flex: none; } }

/* ---------- Carte de l'étape (un trait par combat), détail du butin des régions, Éclats regroupés ---------- */
.se-trail-svg { position: relative; z-index: 1; padding: 0 0 4px; }
.se-trail-svg svg { display: block; width: 100%; height: auto; }
.se-thit { cursor: help; }
.se-stages { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 6px 10px 0; }
.se-stage { position: relative; overflow: hidden; display: grid; gap: 0; padding: 4px 6px 6px; min-height: 40px; text-align: left; border-radius: 5px; background: #0e1430cc; border: 1px solid #3a4478; color: #d9dcee; }
.se-stage b { font-size: 12px; white-space: nowrap; } .se-stage small { font-size: 11px; color: #a9adc6; white-space: nowrap; }
.se-stage i { position: absolute; left: 0; bottom: 0; height: 3px; background: #7fcf8a; }
.se-stage.done { border-color: #4a7a52; } .se-stage.done small { color: #9fe0a8; }
.se-stage.cur { border-color: #ffcf40; } .se-stage.cur small { color: #ffe08a; } .se-stage.cur i { background: #ffcf40; }
.se-stage.on { box-shadow: 0 0 0 2px #f3e6c2 inset; background: #1d2346ee; }
.se-legend i.tk { width: 4px; height: 12px; border-radius: 2px; }
@media (max-width: 520px) { .se-stages { gap: 3px; padding: 6px 6px 0; } .se-stage { padding: 3px 4px 5px; } .se-stage b { font-size: 11px; } .se-stage small { font-size: 10px; } }
/* Régions : ligne dépliable, détail du butin */
.se-regwrap { display: grid; border-radius: 4px; }
button.se-regrow { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.se-regrow:hover { border-color: #7fcf8a; background: #283064; }
.se-regrow.open { border-color: var(--c-gold2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.se-regchev { font-size: 12px; font-weight: 700; color: var(--c-gold2); white-space: nowrap; }
.se-regdetail { display: grid; gap: 8px; padding: 10px; background: #161b3a; border: 1px solid var(--c-gold2); border-top: 0; border-radius: 0 0 4px 4px; }
.se-regdesc { display: grid; gap: 2px; } .se-regdesc small { font-size: 12px; color: #a9adc6; }
.se-regbtns { align-items: center; } .se-regbtns small { flex: 1 1 160px; }
.se-farmgo { min-height: 36px; }
.se-lootbox { display: grid; gap: 6px; }
.se-lrow { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: start; }
.se-lkey { font-size: 12px; font-weight: 800; color: #f3d68a; padding-top: 6px; }
.se-lbx { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 8px; background: #3a2e14; color: #ffcf40; border: 1px solid #b8923f; white-space: nowrap; }
.se-lval { display: grid; font-size: 13px; padding-top: 4px; } .se-lval b { color: #f3e6c2; } .se-lval small { font-size: 11px; color: #a9adc6; }
.se-lmat { gap: 7px; padding: 4px 9px 4px 6px; cursor: help; }
.se-lmat > span { display: grid; line-height: 1.15; } .se-lname { font-size: 13px; color: #f3e6c2 !important; font-weight: 700; } .se-lmat small { font-size: 11px; color: #a9adc6; }
.se-mk { width: 16px; height: 16px; flex: none; display: inline-block; border-radius: 4px; background: #9aa0b8; box-shadow: inset 0 -3px 0 #0004, 0 0 0 1px #0006; }
.se-mk.k-viande { background: #d0605a; border-radius: 8px 8px 4px 8px; } .se-mk.k-poisson { background: #6ab0e0; border-radius: 8px 2px 8px 2px; }
.se-mk.k-plante { background: #7fcf6a; border-radius: 0 10px 0 10px; } .se-mk.k-minerai { background: #b8a890; clip-path: polygon(20% 0, 80% 0, 100% 55%, 70% 100%, 15% 100%, 0 45%); border-radius: 0; }
.se-mk.k-cuir { background: #a8744a; } .se-mk.k-fibre { background: #e0d0a0; border-radius: 50%; box-shadow: inset 0 0 0 3px #b8a060; }
.se-mk.k-gemme { background: #c7a4ff; clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); border-radius: 0; }
.se-mk.k-eclat { width: 11px; height: 11px; margin: 0 3px; background: var(--gc, #9aa0b8); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 6px var(--gc, transparent), 0 0 0 1px #0008; }
@media (max-width: 520px) { .se-lrow { grid-template-columns: minmax(0, 1fr); gap: 3px; } .se-lkey { padding-top: 0; } }
/* Éclats regroupés */
.se-ggroups { gap: 6px; }
.se-ggrp { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 2px; border-radius: 12px; background: #161b3a; border: 1px solid #2e3666; }
.se-ggrp.allon { opacity: .8; }
.se-gn { font-size: 13px; color: var(--c-gold2); font-weight: 800; }
.se-gon { font-size: 11px; color: #c7a4ff; }
.se-gsock { min-height: 26px; padding: 1px 8px; font-size: 12px; }
/* v0.31 : aperçu d'un Éclat avant de le sertir / transférer (fenêtre de choix, lisible au doigt) */
.se-gview { background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; }
.se-gview .se-gem { cursor: pointer; }
.se-gprev { text-align: left; display: grid; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.se-gprev-gem { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 6px; background: #161b3a; border: 1px solid color-mix(in srgb, var(--gc, #9aa0b8) 70%, transparent); }
.se-gprev-gem > .gem-dot { width: 11px; height: 11px; margin: 5px 0 0 3px; }
.se-gprev-gem b { font-size: 15px; color: var(--c-gold2, #ffd36e); }
.se-gprev-gem small { display: block; color: var(--muted); }
.se-gprev-gem p { margin: 5px 0 0; line-height: 1.35; }
.se-gprev-to { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: 0; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.se-gprev-to dt { color: var(--muted); font-size: 12px; } .se-gprev-to dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.se-gprev-to dd small { color: var(--muted); }
.se-gprev-notes { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; }
.se-gprev-notes li.ok { color: #9ff09f; } .se-gprev-notes li.warn { color: #ffcf7a; } .se-gprev-notes li.bad { color: #ff8f8f; font-weight: 600; }
.pick-row.se-gok:not(:disabled) { border-color: var(--c-gold2, #ffd36e); }
#seTrGemQty { width: 64px; }
/* Prière : état de chaque membre */
.se-prms { display: grid; gap: 3px; margin-top: 4px; padding-top: 5px; border-top: 1px solid #3a4478; }
.se-prms-h { font-size: 11px; color: #a9adc6; text-transform: uppercase; letter-spacing: .5px; }
.se-prm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 8px; font-size: 12px; }
.se-prm > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .se-prm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-prm .btn-small { min-height: 30px; padding: 2px 8px; font-size: 12px; }
.se-qm { font-style: normal; font-size: 11px; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #3a4478; color: #d9dcee; margin-left: auto; cursor: help; }
.se-trail-h { pointer-events: auto; } .se-trail-h .link-btn { display: inline; padding: 0; margin: 0; min-height: 0; vertical-align: baseline; font-size: 12px; color: #ffe08a; text-shadow: 0 1px 2px #000; }

/* ---------- Renforcement de saison : monnaies, boss errants, emplacements, trempe, Éveil, grimoire ---------- */
.se-curs { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.se-cur { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 12px; font-size: 12px; background: #14182f; border: 1px solid #3a4478; color: #d9dcee; cursor: help; white-space: nowrap; }
.se-cur b { color: #ffcf40; font-size: 13px; }
.se-curico { width: 12px; height: 12px; flex: none; display: inline-block; }
.se-cur.c-braises .se-curico, .se-curico.c-braises { border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ffcf40, #f08a4a 60%, #7a2a14); box-shadow: 0 0 6px #f08a4a; }
.se-cur.c-ames .se-curico, .se-curico.c-ames { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0, #ff9a8a 35%, #a02a2a 100%); box-shadow: 0 0 6px #e0685f; }
.se-cur.c-pages .se-curico, .se-curico.c-pages { border-radius: 1px; background: linear-gradient(90deg, #d8ccff 0 45%, #9a7aff 45% 55%, #d8ccff 55%); box-shadow: 0 0 5px #9a7aff; }
.se-cur small { color: #a9adc6; font-size: 11px; margin-left: -3px; }
.se-curs-h { color: #a9adc6; font-size: 11px; align-self: center; }
/* Bourses des héros (v0.28) : or de saison, Braises, Âmes, Pages par héros */
.se-coin { width: 12px; height: 12px; flex: none; display: inline-block; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff6c8 0, #ffcf40 38%, #b07a14 100%); box-shadow: inset 0 0 0 1px #7a5410; }
.se-goldchip { flex: 0 1 auto; display: flex; align-items: stretch; gap: 0; padding: 0; background: linear-gradient(180deg, #2e2814, #221d10); border: 1px solid var(--c-gold); cursor: help; }
.se-gc { display: grid; align-content: center; gap: 1px; padding: 6px 14px; min-width: 0; }
.se-gc + .se-gc { border-left: 1px solid #5a4a24; }
.se-gc > small { color: #cbbd92; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-gc > b { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; line-height: 1.1; color: #ffcf40; font-variant-numeric: tabular-nums; }
.se-gc.team > b { font-size: 16px; color: #f3e6c2; }
.se-purse { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #d9dcee; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.se-purse b { color: #ffcf40; font-size: 12px; margin-right: 5px; }
.se-purse .se-coin, .se-purse .se-curico { width: 9px; height: 9px; box-shadow: none; }
.se-purse .se-curico { margin-left: 3px; }
.se-hrow-t .se-purse { margin-top: 1px; }
.se-pursebox { display: grid; gap: 4px; padding: 10px; border-radius: 4px; background: #2a2414; border: 1px solid var(--c-gold); font-size: 13px; cursor: help; }
.se-pb { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.se-pb > span { display: inline-flex; align-items: center; gap: 6px; color: #d8cfae; }
.se-pb > b { color: #ffcf40; font-variant-numeric: tabular-nums; }
.se-slbtn.short { opacity: .75; }
.se-emb { width: 11px; height: 13px; flex: none; display: inline-block; margin-right: 5px; vertical-align: -2px; clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%); background: linear-gradient(180deg, #ffe08a, #c7902a); }
.se-reroll small { color: #a9adc6; }
/* Boss errants */
.se-errant { display: grid; gap: 8px; padding: 12px 14px; border-radius: 8px; background: linear-gradient(180deg, #22284f, #1d2346); border: 1px solid #b8923f; font-size: 13px; }
.se-errant .se-act-h { flex-wrap: wrap; } .se-ebonus { color: #f3d68a; font-size: 12px; }
.se-skull { width: 16px; height: 16px; flex: none; display: inline-block; border-radius: 8px 8px 5px 5px; background: radial-gradient(circle at 32% 45%, #1d2346 0 18%, transparent 20%), radial-gradient(circle at 68% 45%, #1d2346 0 18%, transparent 20%), #e8e4d8; box-shadow: 0 0 8px #e0685f; }
.se-etl { position: relative; height: 30px; border-radius: 6px; background: #14182f; border: 1px solid #3a4478; overflow: hidden; }
.se-ew { position: absolute; top: 0; bottom: 0; background: #22284f; border-left: 2px solid #6a7098; border-right: 2px solid #6a7098; display: flex; align-items: center; padding-left: 6px; font-style: normal; font-size: 12px; color: #a9adc6; white-space: nowrap; overflow: hidden; }
.se-ew.on { background: #3a2e14; border-color: #ffcf40; color: #f3d68a; font-weight: 700; }
.se-enight { position: absolute; left: 8px; top: 7px; font-size: 12px; color: #6a7098; }
.se-enow { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: #7fcf8a; box-shadow: 0 0 6px #7fcf8a; }
.se-eboss { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: #2a1414; border: 1px solid #e0685f; }
.se-eboss.done { background: #1c2a22; border-color: #4a7a52; } .se-eboss.none { grid-template-columns: minmax(0, 1fr); background: #14182f; border-color: #3a4478; }
.se-eface { width: 72px; height: 72px; border-radius: 8px; background: radial-gradient(circle, #6a7898 0%, #2a2438 60%, #14182f 100%); display: grid; place-items: center; overflow: hidden; }
.se-eface img, .se-eface canvas { max-width: 100%; max-height: 100%; }
.se-ebt { display: grid; gap: 3px; min-width: 0; } .se-ebt b { font-size: 17px; color: #f3e6c2; font-family: var(--font-title); } .se-ebt small { font-size: 12px; color: #d8d2bf; }
.se-ebt .se-eloot { color: #f3d68a; }
.se-ebtns { display: flex; flex-wrap: wrap; gap: 8px; } .se-ebtns .se-actbtn { flex: 1 1 200px; min-height: 44px; }
.se-errant > .hint { font-size: 12px; color: #a9adc6; }
/* Fiche : renforcement */
.se-reinf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.se-rpanel { display: grid; gap: 8px; padding: 12px; border-radius: 8px; background: #1d2346; border: 2px solid #b8923f; color: #e8e4d8; min-width: 0; font-size: 13px; }
.se-rpanel > .hint { font-size: 12px; color: #a9adc6; }
.se-rph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.se-rph b { font-family: var(--font-title); font-size: 17px; color: #f3e6c2; } .se-rph small { font-size: 12px; color: #a9adc6; }
.se-rph .se-qm { align-self: center; } .se-rph .se-x { margin-left: auto; }
.se-slv { display: grid; grid-template-columns: 96px 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 5px; background: #22284f; border: 1px solid #3a4478; }
.se-slv.empty { opacity: .8; } .se-slv > b { font-size: 15px; color: #ffcf40; }
.se-slv .se-sl { width: auto; }
.se-slbar { display: grid; gap: 2px; min-width: 0; } .se-slbar small { font-size: 11px; color: #a9adc6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-slbtn { font-size: 12px; padding: 3px 9px; min-height: 30px; border-color: #b8923f; white-space: nowrap; }
.se-rstars { display: flex; gap: 6px; font-size: 30px; line-height: 1; } .se-rstars i { font-style: normal; color: #4a5078; } .se-rstars i.on { color: #e0685f; text-shadow: 0 0 10px rgba(224, 104, 95, .6); }
.se-evbox { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: #22284f; border: 1px solid #3a4478; } .se-evbox b { color: #f3e6c2; } .se-evbox span { font-size: 12px; }
.se-evbox.on { background: #2a1414; border-color: #e0685f; } .se-evbox.on b { color: #ff9a8a; }
.se-evcost { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; } .se-evcost b { color: #f3d68a; }
.se-actbtn.red { min-height: 44px; border: 2px solid #e0685f; background: #3a1a14; color: #ffb0a0; font-weight: 800; }
.se-redst { color: #e0685f; letter-spacing: -1px; font-size: 12px; }
.se-grim { grid-column: 1 / -1; }
.se-spells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.se-spell { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; background: #14182f; border: 1px dashed #6a7098; min-width: 0; cursor: default; }
.se-spell[data-act] { cursor: pointer; } .se-spell[data-act]:hover { border-color: #c7a4ff; }
.se-spell > b { font-size: 14px; color: #f3e6c2; } .se-splv { font-size: 12px; color: #a9adc6; }
.se-spell.act { min-height: 150px; background: linear-gradient(180deg, #3a3460, #22284f); border: 2px solid #9a7aff; } .se-spell.act .se-splv { color: #d8ccff; }
.se-spd { font-size: 12px; line-height: 1.35; flex: 1; }
.se-spup { margin-top: auto; font-size: 12px; min-height: 30px; border-color: #b8923f; }
.se-spell.sel { box-shadow: 0 0 0 2px #ffcf40, 0 0 14px rgba(255, 207, 64, .4); border-color: #ffcf40; }
.se-spell.target { border-style: solid; border-color: #ffcf40; } .se-sphere { font-style: normal; font-size: 11px; font-weight: 800; color: #1d2346; background: #ffcf40; border-radius: 9px; padding: 1px 8px; align-self: flex-start; }
.se-spell.locked { opacity: .55; }
.se-rsub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 12px; color: #a9adc6; }
.se-rsub .link-btn { padding: 0; min-height: 0; background: none; border: 0; color: #ffcf40; text-decoration: underline; font-size: 12px; }
.se-reserve { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
/* Trempe */
.se-pips { display: inline-flex; gap: 3px; align-items: center; margin-left: 4px; vertical-align: middle; } .se-pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #b8923f; }
.se-pips i.on { background: #ffcf40; border-color: #ffcf40; box-shadow: 0 0 4px #f08a4a; }
.se-tbtn { font-size: 11px; padding: 2px 8px; border-color: #b8923f; } .se-tbtn.on { background: #3a2e14; color: #ffcf40; }
.se-slot2.tmp { border-color: #ffcf40; }
.se-temper { display: grid; gap: 10px; padding: 12px; border-radius: 8px; background: #1d2346; border: 2px solid #b8923f; }
.se-temper > .hint { font-size: 12px; color: #a9adc6; }
.se-topts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.se-topt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 8px; border: 1px solid #3a4478; background: #22284f; color: #f3e6c2; text-align: left; }
.se-topt span { font-size: 12px; color: #a9adc6; } .se-topt b { font-size: 17px; } .se-topt small { font-size: 11px; color: #a9adc6; }
.se-topt.nw { background: #22284f; border-style: dashed; } .se-topt.on { border: 2px solid #ffcf40; background: #3a2e14; } .se-topt.on small { color: #f3d68a; }
.se-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; } .se-tfoot > small { color: #a9adc6; font-size: 12px; }
.se-tfoot .se-pips i { width: 14px; height: 14px; } .se-tcost { margin-left: auto; color: #f3d68a; }
.se-tgo { min-height: 46px; font-size: 15px; }
/* Journal, Camp */
.se-log.lk-rf { color: #ffc38a; } .se-log.lk-er { color: #ff9a8a; }
.csn-b.errant { background: #e0685f; color: #fff; }
@media (max-width: 860px) {
  .se-goldchip { flex: 1 1 100%; }
  .se-gc { flex: 1 1 50%; }
  .se-reinf { grid-template-columns: minmax(0, 1fr); }
  .se-spells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-curs { margin-left: 0; }
}
@media (max-width: 520px) {
  .se-slv { grid-template-columns: minmax(0, 1fr) 30px auto; row-gap: 3px; } .se-slv .se-slbar { grid-column: 1 / -1; grid-row: 2; } .se-slbtn { min-height: 32px; }
  .se-eboss { grid-template-columns: 56px minmax(0, 1fr); } .se-eface { width: 56px; height: 56px; }
  .se-spell.act { min-height: 0; }
  .se-ew span { font-size: 10px; }
}
.se-tgo, .se-ebtns .se-actbtn, .se-actbtn.red { text-align: center; justify-content: center; }
/* Doublons jouables : cartes d'équipe, onglets, bilan hors ligne (style minimal, écrans existants) */
.party-card.dupe, .team-slot.dupe, .hero-tab.dupe, .preset-hero.dupe { border-style: dashed; }
.party-card.dupe .pc-name, .hero-tab.dupe span { font-size: .92em; }
.team-slot .hl-tag { align-self: center; }
.food-card.guarded { border-style: dashed; }
.hr-gear-btns { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.off-units { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .92em; }
.off-unit.dupe b { font-weight: 700; }

/* =========================================================
   MENU HÉROS (liste + onglets Détails / Aptitudes / Équipement / Éclats)
   Remplace les écrans Héros, Équipement et Autel. Encre et or du Codex ;
   raretés d'objet en cases pleines (Commun gris, Rare bleu, Épique violet, Fantastique or).
   ========================================================= */
.hero-menu {
  --hm-panel: #1d2346; --hm-deep: #14182f; --hm-tile: #22284f; --hm-line: #3a4478; --hm-mute: #a9adc6; --hm-ink: #e8e4d8;
  --hm-sel: #ffcf40; --hm-selbg: #3a3460; --hm-dupe: #6a7098; --hm-title: #f3e6c2;
}
.screen.hero-menu { max-width: 1440px; }
.hero-menu .hm-layout { display: grid; grid-template-columns: 300px 104px minmax(0, 1fr); gap: 14px; padding: 10px 16px 40px; align-items: start; }
.hero-menu .hm-layout.hm-empty { grid-template-columns: 1fr; }
.hero-menu .hm-layout.hm-empty .hm-list, .hero-menu .hm-layout.hm-empty .hm-tabs { display: none; }

/* Liste */
.hero-menu .hm-list { position: sticky; top: 66px; margin: 0; padding: 12px; max-height: calc(100vh - 80px); min-height: 360px; display: flex; flex-direction: column; gap: 8px;
  background: var(--hm-panel); border: 2px solid var(--c-gold); border-radius: 8px; }
.hero-menu .hl-bar { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.hero-menu .hl-bar input[type=search] { max-width: none; flex: none; height: 32px; }
.hero-menu .hl-kind { padding: 0; gap: 4px; }
.hero-menu .hl-kind button { flex: 1; padding: 5px 4px; background: var(--hm-tile); border: 1px solid var(--hm-line); color: var(--hm-mute); }
.hero-menu .hl-kind button.active { background: var(--hm-selbg); border-color: var(--c-gold); color: var(--hm-title); }
.hero-menu .hl-grid { flex: 1 1 auto; min-height: 120px; max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; overflow-y: auto; padding: 2px 4px 2px 2px; }
.hero-menu .hl-role { padding: 4px 2px 0; }
.hero-menu .hl-item { background: var(--hm-tile); border: 2px solid var(--hm-line); border-radius: 6px; min-height: 84px; justify-content: flex-end; }
.hero-menu .hl-item.company { border-color: var(--hm-line); box-shadow: none; }
.hero-menu .hl-item.dupe { border-style: dashed; border-color: var(--hm-dupe); background: #1f2448; }
.hero-menu .hl-item.active { background: var(--hm-selbg); border-color: var(--hm-sel); box-shadow: 0 0 0 1px var(--hm-sel), 0 0 10px rgba(255, 207, 64, .35); }
.hero-menu .hl-item:hover { filter: brightness(1.12); }
.hero-menu .hl-item > * { flex-shrink: 0; }
.hero-menu .hl-item .hl-name { line-height: 1.25; }
.hero-menu .hl-item .hl-tag { font-size: 8px; }
.hero-menu .hl-item .better-chip { top: 2px; right: 18px; font-size: 8.5px; line-height: 1.3; padding: 0 3px; }
.hero-menu .hl-item:not(.hl-lk) .better-chip { right: 3px; }
.hero-menu .hl-item .prest-dot { top: 4px; left: 4px; }
.hero-menu .hl-legend { margin: 0; flex-wrap: wrap; font-size: 10.5px; color: var(--hm-mute); }
.hero-menu .hl-legend .hl-dash, .hero-menu .hl-legend .hl-sel { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px dashed var(--hm-dupe); }
.hero-menu .hl-legend .hl-sel { border: 2px solid var(--hm-sel); }
.hero-menu .hl-legend .hl-tag { font-size: 8px; }

/* Onglets verticaux */
.hm-tabs { position: sticky; top: 66px; display: flex; flex-direction: column; gap: 8px; }
.hm-tabs button { position: relative; height: 76px; border-radius: 8px; border: 1px solid var(--hm-line); background: var(--hm-tile); color: var(--hm-mute); --text: var(--hm-mute);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 800; font-size: 13px; }
.hm-tabs button svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.hm-tabs button:hover { color: var(--hm-title); border-color: var(--c-gold); }
.hm-tabs button.active { border: 2px solid var(--hm-sel); background: #3a2e14; color: var(--hm-sel); --text: var(--hm-sel); }
.hm-tabs button.badge-on::after { content: ""; position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-red); border: 2px solid var(--hm-tile); }

/* Contenu */
.hero-menu .hm-content { min-width: 0; display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.hero-menu .hm-pane { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hm-strip { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 6px 12px; border-radius: 6px; background: var(--hm-deep); border: 1px solid var(--hm-line); color: var(--hm-ink); }
.hm-strip-face { width: 34px; height: 34px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.hm-strip-face img, .hm-strip-face canvas { height: 34px; width: auto; }
.hm-strip-name { font-family: var(--font-title); font-size: 18px; color: var(--hm-title); }
.hm-strip-meta { font-size: 13px; color: var(--hm-mute); display: inline-flex; align-items: center; }
.hm-strip-stars { font-size: 15px; letter-spacing: 1px; color: var(--c-gold2); }
.hm-strip-stars .dim, .hero-menu .hr-stars .dim { color: rgba(255, 255, 255, .14); }
.hm-strip-pow { margin-left: auto; white-space: nowrap; } .hm-strip-pow small { color: var(--hm-mute); font-size: 12px; } .hm-strip-pow b { color: var(--c-gold2); font-size: 16px; }
.hm-rar { font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 10px; background: #2a3470; color: #cfe4ff; white-space: nowrap; }
.hm-rar.r-mythic { background: #5a1e1e; color: #ffb0a0; }
.hm-rar.r-5 { background: #4a3a10; color: #ffe08a; } .hm-rar.r-4 { background: #3e2466; color: #e0c8ff; } .hm-rar.r-3 { background: #1b3d70; color: #cfe4ff; }
.hm-rar.r-2, .hm-rar.r-1 { background: #3a3f52; color: #dde0ea; }

/* Détails */
.hero-menu .hm-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 14px; background: var(--hm-panel); border: 2px solid var(--c-gold); border-radius: 8px; }
.hm-visual { position: relative; height: 440px; border-radius: 8px; border: 2px solid var(--c-gold); overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2e3566 0%, #14182f 70%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.hm-visual::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(3px); }
.hm-visual .hm-sprite { position: relative; z-index: 1; }
.hm-visual .hm-sprite .px, .hm-visual .hm-sprite img, .hm-visual .hm-sprite canvas { filter: drop-shadow(0 0 14px rgba(255, 220, 140, .35)); }
.hm-visual.dupe { border-style: dashed; background: radial-gradient(circle at 50% 35%, #3a3a78 0%, #14182f 70%); }
.hm-visual.sm { height: 360px; }
.hm-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--hm-ink); }
.hm-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-badges .grow { flex: 1; }
.hm-role { font-size: 13px; padding: 2px 10px; border-radius: 10px; background: #1c3a26; color: #9ff09f; border: 1px solid #4a7a52; display: inline-flex; align-items: center; }
.hero-menu .hr-lockbtn { margin: 0; height: 32px; padding: 0 12px; border-radius: 6px; }
.hero-menu .hr-lockbtn.on { background: #3a2e14; color: var(--hm-sel); border-color: var(--c-gold); }
.hm-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hm-name h2 { font-family: var(--font-title); font-size: 30px; color: var(--hm-title); line-height: 1.1; }
.hm-lvl { font-size: 15px; color: var(--hm-mute); } .hm-lvl b { color: var(--hm-ink); } .hm-lvl .hr-max { color: var(--c-ink); }
.hm-xp { display: grid; gap: 3px; } .hm-xp .hint { font-size: 12px; color: var(--hm-mute); }
.hm-stars { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hm-stars .hr-stars { font-size: 26px; letter-spacing: 2px; }
.hm-stars .hint, .hm-power .hint { font-size: 12px; color: var(--hm-mute); }
.hm-power { display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap; padding: 8px 14px; border-radius: 6px; background: #2a2414; border: 1px solid var(--c-gold); }
.hm-power > span { font-size: 13px; color: var(--hm-mute); } .hm-power > b { font-size: 24px; color: var(--hm-sel); font-variant-numeric: tabular-nums; }
.hm-power .hint { margin-left: auto; }
.hm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-stats > div { padding: 7px 10px; border-radius: 6px; background: var(--hm-tile); border: 1px solid var(--hm-line); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-stats span { font-size: 11px; color: var(--hm-mute); } .hm-stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hm-info .hr-dupe-hint { color: var(--hm-mute); font-size: 12px; margin: 0; }
.hm-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.hm-act { position: relative; min-height: 52px; border-radius: 8px; border: 2px solid var(--hm-sel); background: #3a2e14; color: var(--hm-sel); --text: var(--hm-sel);
  font-weight: 900; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.hm-act small { font-size: 11px; font-weight: 700; color: #f3d68a; }
.hm-act.a-evo { border-color: #e0685f; background: #3a1a14; color: #ffb0a0; --text: #ffb0a0; } .hm-act.a-evo small { color: #ffcfc4; }
.hm-act.a-pr { border-color: #9a7aff; background: #241a3a; color: #d8ccff; --text: #d8ccff; } .hm-act.a-pr small { color: #e4dcff; }
.hm-act:hover { filter: brightness(1.18); }
.hm-act.on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 14px currentColor; filter: brightness(1.15); }
.hm-act.on::after { content: ""; position: absolute; bottom: -9px; left: calc(50% - 7px); border: 7px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.hm-act.off { opacity: .55; border-style: dashed; }
.hm-act .dot-new { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff7a4a; }
.hero-menu .hm-flow { display: flex; flex-direction: column; gap: 8px; }
.hero-menu .hm-flow .hr-work { border: 2px solid var(--c-gold); border-radius: 8px; }
.hero-menu .hm-flow .section-h { margin: 6px 0 0; padding: 0; }
.hero-menu .hm-flow .hr-filter, .hero-menu .hm-flow .food-grid { padding-left: 0; padding-right: 0; }
.hero-menu .hm-flow .food-grid { padding-bottom: 8px; }

/* Aptitudes */
.hm-skills { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; }
.hm-skills .hm-visual { position: sticky; top: 66px; }
.hero-menu .hm-sk-list { padding: 12px 14px; background: var(--hm-panel); border: 2px solid var(--c-gold); border-radius: 8px; display: grid; gap: 6px; }
.hero-menu .hm-sk-list .section-h.small { margin: 8px 0 2px; color: var(--c-gold2); }
.hero-menu .hm-sk-list .section-h.small:first-of-type { margin-top: 2px; }
.hero-menu .hm-sk-list .skill-line { background: var(--hm-tile); border: 1px solid var(--hm-line); border-left-width: 3px; border-radius: 6px; padding: 8px 12px; }
.hero-menu .hm-sk-list .skill-line b { font-size: 14px; }
.hero-menu .hm-sk-list .skill-line small { font-size: 12px; color: #c9cce0; line-height: 1.35; }
.hero-menu .hm-sk-list .skill-line em { color: var(--c-gold2); font-style: normal; }
.hero-menu .hm-sk-list .skill-line.lb { border-color: #e0685f; }
.hero-menu .hm-sk-list .skill-line.locked { opacity: .6; }
.hero-menu .hm-sk-list > .hint { font-size: 12px; color: var(--hm-mute); padding: 6px 10px; border: 1px dashed var(--hm-line); border-radius: 6px; background: var(--hm-deep); }

/* Équipement */
.hero-menu .gear-main { padding: 0; }
.hero-menu .gear-doll, .hero-menu .gear-inv { background: var(--hm-panel); border: 2px solid var(--c-gold); border-radius: 8px; }
.hero-menu .doll { grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr) 180px; }
.hero-menu .doll-stage { height: 250px; border: 2px solid var(--c-gold); background: radial-gradient(circle at 50% 35%, #2e3566 0%, #14182f 70%); }
.hero-menu .hub-foot { padding: 0; }
.hm-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hm-legend .armor-tag { margin-left: 6px; font-size: 11px; }
.rq-chip { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px; color: #fff8e8; border: 1px solid; }
/* Couleurs de rareté (cases pleines) : clés D.QUALITIES, teintes de la maquette */
.rq-commun { --rq-bg: linear-gradient(135deg, #565b6e, #363a4c); --rq-ring: #b8bccb; --rq-sub: #d8dbe6; }
.rq-rare { --rq-bg: linear-gradient(135deg, #2c62a8, #1b3d70); --rq-ring: #8cc4ff; --rq-sub: #cfe4ff; }
.rq-epique { --rq-bg: linear-gradient(135deg, #6a3fa0, #40246a); --rq-ring: #d2b0ff; --rq-sub: #e8d8ff; }
.rq-fantastique { --rq-bg: linear-gradient(135deg, #9a7418, #5e460c); --rq-ring: #ffd760; --rq-sub: #ffecb0; }
.rq-chip, .hero-menu .slot-box[class*="rq-"], .hero-menu .gear-row[class*="rq-"] { background: var(--rq-bg); border-color: var(--rq-ring); }
.hero-menu .slot-box { border-radius: 6px; border: 2px solid var(--hm-line); background: var(--hm-deep); }
.hero-menu .slot-box.empty { border-style: dashed; border-color: #4a5078; background: var(--hm-deep); }
.hero-menu .slot-box[class*="rq-"] .sl-item { color: #fff8e8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.hero-menu .slot-box[class*="rq-"] .sl-name, .hero-menu .slot-box[class*="rq-"] small { color: var(--rq-sub); }
.hero-menu .slot-box[class*="rq-"] .sl-ico { color: var(--rq-ring); border-color: color-mix(in srgb, var(--rq-ring) 45%, transparent); }
.hero-menu .slot-box.weapon-slot[class*="rq-"] { box-shadow: inset 0 0 12px rgba(0, 0, 0, .25); }
.hero-menu .slot-box.active-slot { outline: 3px solid var(--hm-sel); outline-offset: 1px; box-shadow: 0 0 12px rgba(255, 207, 64, .45); }
.hero-menu .slot-box.broken { border-color: var(--danger); border-style: solid; }
.hero-menu .slot-box .dura { background: rgba(0, 0, 0, .45); padding: 0 4px; border-radius: 3px; }
.hero-menu .gear-row { border: 1px solid var(--hm-line); border-radius: 5px; }
.hero-menu .gear-row[class*="rq-"] b[class*="q-"] { color: #fff8e8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.hero-menu .gear-row[class*="rq-"] small, .hero-menu .gear-row[class*="rq-"] .armor-tag { color: var(--rq-sub); }
.hero-menu .gear-row .gr-score:empty { display: none; }
.hero-menu .gear-row .gr-score { padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); }
.hero-menu .gear-row.worn { box-shadow: inset 0 0 0 2px var(--hm-sel); }
.hero-menu .gear-row.worn .gr-score { color: #ffd760; }
.hero-menu .gear-row:hover { filter: brightness(1.12); }
.hero-menu .gear-row.cant { opacity: .5; }
.hero-menu .gear-list { max-height: none; }

/* Éclats */
.hm-gems { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.hero-menu .altar-panel { background: var(--hm-panel); border: 2px solid var(--c-gold); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.hero-menu .altar-panel .weapon-head { padding: 8px 10px; border-radius: 6px; background: var(--hm-tile); border: 1px solid var(--c-gold); }
.hero-menu .altar-panel .off-head { border-color: var(--hm-line); }
.hero-menu .altar-panel .socket-row { padding: 8px 0 2px; }
.hero-menu .altar-panel > .hint { font-size: 12px; }
.hero-menu #altarSkills .section-h.small { color: var(--c-gold2); }
.hero-menu .hm-bag { position: sticky; top: 66px; max-height: calc(100vh - 76px); display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--hm-deep); border: 1px solid var(--hm-line); border-radius: 8px; }
.hero-menu .hm-bag .section-h { margin: 0; color: var(--c-gold2); } .hero-menu .hm-bag .section-h small { color: var(--hm-mute); font-family: var(--font-ui); font-weight: 700; }
.hero-menu .hm-bag-f { padding: 0; flex-wrap: wrap; gap: 4px; }
.hero-menu .hm-bag-f button { padding: 3px 8px; font-size: 11px; }
.hero-menu .hm-bag-f.gem-colors button { padding: 3px 6px; min-width: 26px; }
.hm-bag-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.hm-bag-tools label { color: var(--hm-mute); font-size: 11px; } .hm-bag-tools select { font-size: 11px; padding: 2px 4px; }
.hm-bag-hint { font-size: 11px; margin: 0; }
.hm-bag-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 80px; flex: 1 1 auto; padding-right: 2px; }
.hm-gem { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: help;
  background: var(--hm-tile); border: 1px solid var(--hm-line); color: var(--hm-ink); --text: var(--hm-ink); }
.hm-gem:hover, .hm-gem:focus-visible { border-color: var(--c-gold2); filter: brightness(1.1); outline: none; }
.hm-gem.allon { opacity: .7; }
.hm-gem .gem { width: 20px; height: 20px; }
.hg-body { display: flex; flex-direction: column; min-width: 0; }
.hg-body b { font-size: 12px; } .hg-body b small { color: var(--lb); font-weight: 900; font-size: 10px; }
.hg-body small { font-size: 10px; color: var(--hm-mute); }
.hg-body small em { color: var(--c-gold2); font-style: normal; }
.hg-cnt { display: flex; gap: 6px; } .hg-cnt .gc-free { color: #7fe0c8; } .hg-cnt .gc-on { color: #c9b6ff; }
.hg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hg-n { color: #f3d68a; font-size: 14px; font-weight: 900; }
.hg-side .gc-sock { padding: 2px 8px; font-size: 11px; }

/* Largeur moyenne : colonnes plus étroites */
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-menu .hm-layout { grid-template-columns: 224px 84px minmax(0, 1fr); gap: 10px; padding: 10px 10px 40px; }
  .hero-menu .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-tabs button { height: 68px; font-size: 12px; }
}
/* Contenu étroit (tablette, téléphone) */
@container (max-width: 760px) {
  .hero-menu .hm-card { grid-template-columns: 190px minmax(0, 1fr); }
  .hm-visual { height: 340px; }
  .hero-menu .doll { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); grid-template-areas: "left center right" "stats stats stats"; }
  .hm-gems { grid-template-columns: 1fr; }
  .hero-menu .hm-bag { position: static; max-height: none; }
  .hero-menu .hm-bag-list { max-height: 60vh; }
}
@container (max-width: 560px) {
  .hero-menu .hm-card { grid-template-columns: 1fr; }
  .hm-visual { height: 230px; }
  .hm-skills { grid-template-columns: 1fr; }
  .hm-skills .hm-visual { display: none; }
  .hm-power .hint { margin-left: 0; }
  .hm-stats { gap: 6px; } .hm-stats > div { padding: 5px 7px; } .hm-stats b { font-size: 15px; }
  .hm-acts { gap: 6px; } .hm-act { font-size: 14px; } .hm-act small { font-size: 10px; }
  .hm-name h2 { font-size: 24px; }
}
/* Téléphone : liste en bandeau horizontal en haut, onglets en ligne */
@media (max-width: 760px) {
  .hero-menu .hm-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 6px 8px 40px; }
  .hero-menu .hm-list { position: static; max-height: none; min-height: 0; padding: 8px; gap: 6px; }
  .hero-menu .hl-grid { flex: none; }
  .hero-menu .hl-bar { flex-direction: row; flex-wrap: wrap; }
  .hero-menu .hl-bar input[type=search] { flex: 1 1 120px; min-width: 0; }
  .hero-menu .hl-kind { flex: 1 1 200px; }
  .hero-menu .hl-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76px; grid-template-rows: auto; overflow-x: auto; overflow-y: hidden; min-height: 0; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .hero-menu .hl-grid .hl-item { scroll-snap-align: start; }
  .hero-menu .hl-role, .hero-menu .hl-legend { display: none; }
  .hm-tabs { position: sticky; top: 50px; z-index: 5; flex-direction: row; gap: 4px; padding: 4px; margin: 0 -4px; background: var(--c-paper); }
  .hm-tabs button { flex: 1; height: 48px; font-size: 11px; gap: 2px; min-width: 0; }
  .hm-tabs button svg.ic { width: 18px; height: 18px; }
  .hm-strip { gap: 6px 10px; } .hm-strip-name { font-size: 16px; } .hm-strip-pow { margin-left: 0; }
  .hero-menu .hm-card { padding: 10px; }
  .hero-menu .gear-doll, .hero-menu .gear-inv { padding: 8px; }
}
.hero-menu .hm-bag-f button { background: var(--hm-tile); border: 1px solid var(--hm-line); color: var(--hm-mute); --text: var(--hm-mute); }
.hero-menu .hm-bag-f button.active { background: var(--hm-selbg); border-color: var(--c-gold); color: var(--hm-title); --text: var(--hm-title); }
.hero-menu .hm-flow { scroll-margin-top: 120px; }
.sock-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; }
.sock-pick b { font-size: 14px; } .sock-pick small { font-size: 12px; opacity: .9; }
.pick-row.info-row .sock-pick .sk-line { display: flex; align-items: center; gap: 8px; }

/* ---------- v0.29 : énergie de la Crypte, orifices verrouillés, doublons d'Éclats, compagnons PNJ ---------- */
.crypt-energy { margin: 8px 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(20, 30, 70, .55); border: 1px solid rgba(120, 190, 255, .35); }
.crypt-energy.empty { border-color: rgba(255, 110, 90, .6); }
.crypt-energy .ce-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crypt-energy .ce-ico { font-size: 16px; }
.crypt-energy .ce-n { font-size: 15px; }
.crypt-energy .ce-timer { color: var(--muted); font-weight: 700; margin-left: auto; }
.crypt-energy .ce-bar { position: relative; height: 10px; margin: 6px 0; }
.crypt-energy .ce-fill { background: linear-gradient(180deg, #c8f0ff, #58b8ff 45%, #2366c0); }
.crypt-energy .ce-over { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(180deg, #ffe6ff, #d58cff 45%, #8a3cc0); opacity: .85; }
.crypt-energy .ce-vial { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.crypt-energy .ce-vial button { margin-left: auto; }
.crypt-energy.empty .ce-n { color: #ff9c8c; }
#hub .combat-menu .cm-main small .hub-energy { color: #9fd8ff; font-weight: 800; }
#hub .combat-menu .cm-main small .hub-energy.empty { color: #ff9c8c; }
#hub .combat-menu .cm-main small .hub-en-t { color: var(--muted); }
#hub .combat-menu .cm-main small .hub-en-bar { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(0, 0, 0, .35); overflow: hidden; }
#hub .combat-menu .cm-main small .hub-en-bar i { display: block; height: 100%; background: linear-gradient(90deg, #58b8ff, #c8f0ff); }
.boss-cr { color: #bfe3ff; }
.boss-cr.off { color: var(--muted); }
.socket.locked { border-style: dotted; filter: grayscale(.85) brightness(.7); position: relative; }
.socket.locked .sock-lock { position: absolute; transform: rotate(-45deg); font-style: normal; font-size: 13px; filter: none; }
.socket.locked.filled .sock-lock { right: -6px; top: -6px; font-size: 12px; }
.socket.dupe { filter: grayscale(.9) brightness(.65); position: relative; }
.socket.dupe::after, .socket.locked.filled::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: #ff7a6a; transform: rotate(-90deg); box-shadow: 0 0 3px #000; }
.link.locked { opacity: .35; }
.weapon-row .socket.locked .sock-lock { font-size: 8px; }
.skill-line.inactive-gem { opacity: .75; }
.skill-line.inactive-gem s { color: #ff9c8c; }
.t-fier > div { padding-left: 6px; color: var(--muted); }
.t-fier > div.on { color: #b8f5c0; }
.npc-tag { display: inline-block; padding: 0 5px; margin-right: 4px; border-radius: 4px; background: #5a4a1e; color: #ffe6a8; font-weight: 800; font-size: 10px; letter-spacing: .5px; }
.sup-card.npc .sup-txt > span:first-child small, .sup-card.npc .sup-txt > span:first-child .rar { display: inline; margin-left: 4px; }
#hub .combat-menu #btnCrypt { height: auto; min-height: 52px; padding: 6px 12px; }
#hub .combat-menu #btnCrypt small { text-align: right; line-height: 1.35; min-width: 84px; }
#hub .combat-menu button small span { flex: none; }
.lock-note { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #ffb4a8; line-height: 1.35; }
/* v0.29 : 6 orifices (Fierbois, armes Fantastiques) sur un écran de téléphone : orifices plus petits, pas de défilement horizontal */
@media (max-width: 460px) {
  .socket-row .socket { width: 34px; height: 34px; margin: 0 3px; }
  .socket-row .link { width: 10px; }
  .socket-row .socket .gem { transform: rotate(-45deg) scale(.85); }
}

/* « Trier : par rôle / tous » (menu Héros, choix de l'écran Équipes) */
.hsort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--c-mute); }
.hsort .filter-tabs { display: inline-flex; gap: 4px; padding: 0; margin: 0; }
.hsort .filter-tabs button { padding: 3px 10px; font-size: 11.5px; }
.hsort small { font-weight: 600; opacity: .85; }
#teamPool > .hsort { padding: 0 12px; margin: 2px 0 4px; }
.hero-menu .hsort { color: var(--hm-mute); }
.hero-menu .hsort .filter-tabs button { background: var(--hm-tile); border: 1px solid var(--hm-line); color: var(--hm-mute); }
.hero-menu .hsort .filter-tabs button.active { background: var(--hm-selbg); border-color: var(--c-gold); color: var(--hm-title); }

/* ---------- v0.31 : Équipe Idle, filtres de l'écran Équipes, coffre du jour verrouillé, rappel de récolte ---------- */
.idle-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #45dcd2; box-shadow: 0 0 6px rgba(69, 220, 210, .8); vertical-align: middle; flex: none; }
.team-target { grid-template-columns: repeat(2, 1fr); margin: 10px 12px 0; }
.team-target button b { display: inline-flex; align-items: center; justify-content: center; }
.team-target button .idle-dot { justify-self: center; margin: 0 0 1px; }
#teams.t-idle .team-current-box { border-color: #45dcd2; box-shadow: 0 0 0 1px rgba(69, 220, 210, .55), 0 0 14px rgba(69, 220, 210, .18); }
.team-slot.busy { filter: saturate(.55); opacity: .8; }
/* Filtres de la liste des héros (écran Équipes) */
.team-pool-bar { padding: 0 12px; margin: 2px 0 6px; display: grid; gap: 6px; }
.hf-bar { margin: 0; }
.hf-bar .filter-tabs { padding: 0; margin: 0; flex-wrap: wrap; gap: 4px; }
.hf-bar .filter-tabs button { padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; }
.hf-role button svg, .hf-role button .ic { width: 14px; height: 14px; }
.hf-idle button.active { background: #13595a; border-color: #45dcd2; color: #eafffd; }
@media (max-width: 460px) {
  .hf-bar { gap: 6px; }
  .hf-bar input[type=search] { flex: 1 1 100%; max-width: none; }
  .hf-bar .filter-tabs button { padding: 4px 8px; font-size: 11.5px; }
  .hf-bar .hf-role { gap: 3px; }
  .hf-bar .hf-role button { padding: 3px 6px; font-size: 11px; gap: 3px; }
  .hf-bar .hf-role .hf-lbl { display: none; }
}
.pc-tags { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.pc-tag { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 0 5px; border-radius: 2px; display: inline-flex; align-items: center; line-height: 1.6; }
.pc-tag.idle { background: #13595a; color: #c9fffa; }
.pc-tag.idle .idle-dot { width: 6px; height: 6px; margin-right: 3px; }
.pc-tag.co { background: var(--c-gold2); color: var(--c-ink); }
/* Carte « Équipe Idle » parmi les équipes enregistrées */
.team-presets > .preset { min-width: 0; }
.preset-faces { flex-wrap: wrap; row-gap: 4px; }
.preset-idle { border-color: #45dcd2; background: linear-gradient(180deg, #123f4a, #1a2550); color: #eafffd; }
.preset-idle.current { box-shadow: 0 0 0 2px #45dcd2; }
.preset-idle .idle-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--font-title, inherit); font-size: 16px; color: #eafffd; }
.preset-idle .hint { color: #b7e9e5; }
.preset-idle .hint b { color: #fff; }
@media (min-width: 760px) {
  .preset-idle { grid-column: 1 / -1; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px 18px; }
  .preset-idle .preset-faces { min-height: 0; }
}
/* Bandeau Équipe Idle (Expédition) */
.idle-bar { border-color: rgba(69, 220, 210, .6); }
.idle-bar.idle-on { box-shadow: 0 0 0 1px #45dcd2, 0 0 12px rgba(69, 220, 210, .25); }
.idle-bar .tp-label { display: inline-flex; align-items: center; }
.idle-bar .tp-face.off { opacity: .45; filter: grayscale(1); }
.idle-xph { display: grid; justify-items: end; line-height: 1.15; cursor: help; padding: 2px 6px; border-radius: 3px; background: rgba(19, 89, 90, .45); border: 1px solid rgba(69, 220, 210, .5); }
.idle-xph small { font-size: 10px; color: #b7e9e5; }
.idle-xph b { font-size: 14px; color: #eafffd; }
.idle-xph-inline { border-bottom: 1px dotted currentColor; cursor: help; }
.ci-text .ci-xph { color: #b7e9e5; }
@media (max-width: 760px) {
  .idle-bar { flex-wrap: wrap; }
  .idle-bar .tp-current { flex: 1 1 100%; order: 3; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; min-width: 0; }
  .idle-bar .tp-edit { margin-left: auto; }
}
/* Coffre du jour verrouillé tant que les quêtes ne sont pas accomplies */
.daily-chest .chest.locked { opacity: .9; }
.daily-chest .chest .chest-need { grid-column: 1 / 2; color: #f3dfae; font-weight: 700; }
.daily-chest .chest.ready .chest-need { color: #fff2c8; }
.mission.done .m-pts { color: #9fe7a8; }
/* Récolte : rappel désactivé avant 2 h */
.gather-row .g-recall:disabled { opacity: .85; white-space: nowrap; font-size: 12px; }
.hf-lbl { align-self: center; font-size: 11.5px; font-weight: 800; color: var(--c-mute); margin-right: 2px; }

/* ---------- v0.31 : châsses de gemmes visibles, « Améliorer tout (+1) » ---------- */
.ch-pips { display: inline-flex; gap: 1px; letter-spacing: 0; font-size: 11px; line-height: 1; vertical-align: 0; }
.ch-pips i { font-style: normal; color: #9aa3c4; text-shadow: 0 0 2px #000; }
.ch-pips i.on { color: #7fe3ff; text-shadow: 0 0 4px rgba(127, 227, 255, .8), 0 0 1px #000; }
.ch-pips i.st-rubis { color: #ff6b6b; } .ch-pips i.st-onyx { color: #d6d9e6; } .ch-pips i.st-saphir { color: #6fa8ff; }
.ch-pips i.st-ambre { color: #ffb347; } .ch-pips i.st-perle { color: #f3eaff; } .ch-pips i.st-emeraude { color: #5fe08a; } .ch-pips i.st-topaze { color: #ffe066; }
.t-gem { color: #7fe3ff; font-weight: 700; }
.gear-btns .btn-upall:not(:disabled) { border-color: var(--teal, #45dcd2); box-shadow: 0 0 8px rgba(69, 220, 210, .35); }
.up-all-hint { font-size: 11px; color: var(--muted, #9aa0bd); margin: 4px 0 2px; min-height: 14px; text-align: right; }
.up-all-hint.off { opacity: .95; }
.up-all-hint b { color: var(--teal, #45dcd2); }
.pick-row.warn-row { border-color: var(--danger, #ff6b6b); background: rgba(120, 20, 20, .25); opacity: 1; }
@media (max-width: 600px) { .up-all-hint { text-align: left; } }

/* v0.31.1 : légende de maîtrise, recyclage de masse */
.mast-legend { margin: 4px 0 8px; font-size: 12px; }
.mast-legend summary { cursor: pointer; color: var(--gold, #e2bd5f); font-weight: 700; padding: 4px 0; }
.mast-tbl { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 12px; }
.mast-tbl th, .mast-tbl td { padding: 3px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.mast-tbl th:first-child, .mast-tbl td:first-child { text-align: left; }
.recy-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0; font-size: 12px; }
.recy-filters label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recy-filters input[type=number] { width: 56px; }
.recy-seg { display: inline-flex; gap: 2px; }
.recy-seg .btn-small.on { outline: 2px solid var(--teal, #45dcd2); }
.recy-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; margin: 6px 0; border-radius: 6px; background: rgba(0,0,0,.18); font-size: 13px; }
.recy-box .recy-row { grid-template-columns: minmax(0, 1fr) auto auto; padding: 5px 10px; margin-top: 4px; }
.recy-box .recy-row b { font-size: 13px; }
.recy-box .recy-row > small.cost { grid-column: auto; text-align: right; white-space: nowrap; }
.recy-box .recy-row .btn-small { width: auto; }
.recy-filters .chk { flex-wrap: nowrap; }
.recy-filters .chk input { width: auto; margin: 0; flex: none; }
.recy-filters .link-btn { padding: 0; margin: 0; min-height: 0; color: var(--c-gold2, #e2bd5f); text-decoration: underline; font-size: 12px; }
.recy-box > h4 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
@media (max-width: 600px) { .recy-box .recy-row { grid-template-columns: minmax(0, 1fr) auto; } .recy-box .recy-row > small.cost { grid-column: 1; text-align: left; white-space: normal; } }
@media (max-width: 600px) { #craftTabs { flex-wrap: wrap; justify-content: center; } }

/* v0.31.2 : sort transmissible bien visible dans Héros → Aptitudes (le thème codex masquait le cadre arc-en-ciel) */
.hero-menu .hm-sk-list .skill-line.inf { border-color: rgba(255, 255, 255, .45); border-left-color: #fff; }
.hero-menu .hm-sk-list .skill-line.inf .sk-tag { color: #fff; background: linear-gradient(90deg, #ff5a4e, #ffd35a, #45dcd2, #a07bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-menu .hm-sk-list .skill-line.rainbow { border: 2px solid transparent; border-left-width: 4px; box-shadow: 0 0 10px rgba(160, 123, 255, .35);
  background: linear-gradient(var(--hm-tile, #22284f), var(--hm-tile, #22284f)) padding-box,
              linear-gradient(90deg, #ff5a4e, #ffd35a, #45dcd2, #a07bff, #ff5a4e) border-box;
  background-size: 100% 100%, 300% 100%; animation: rainbowShift 4s linear infinite; }

/* v0.31.2 : Écho imprégné : halo tournant + pulsation (doré pour la version +) */
.gem.imbued { position: relative; }
.gem.imbued::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 255, 255, .9) 70%, var(--gc) 82%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 54%, #000 68%, transparent 71%); mask: radial-gradient(circle, transparent 50%, #000 54%, #000 68%, transparent 71%);
  animation: echoSpin 2.4s linear infinite; }
.gem.imbued.plus::before { background: conic-gradient(from 0deg, transparent 0 45%, #fff3b0 62%, #ffcf40 78%, var(--gc) 90%, transparent 100%); animation-duration: 1.8s; }
.gem.imbued i { position: relative; z-index: 1; animation: echoPulse 1.8s ease-in-out infinite; }
.se-gem.echo .gem-dot, .se-sk.echo .gem-dot { animation: echoPulse 1.8s ease-in-out infinite; }
.se-gem.echo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 8px color-mix(in srgb, var(--gc, #9aa0b8) 60%, transparent); }
@keyframes echoSpin { to { transform: rotate(360deg); } }
@keyframes echoPulse { 50% { box-shadow: 0 0 16px var(--gc), 0 0 5px #fff; filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .gem.imbued::before, .gem.imbued i, .se-gem.echo .gem-dot, .se-sk.echo .gem-dot, .hero-menu .hm-sk-list .skill-line.rainbow { animation: none; } }

/* v0.32.1 : mot de passe oublié / changer son mot de passe */
.login-forgot { display: block; margin: 10px auto 0; font-size: 13px; text-decoration: underline; }
.pw-form { display: grid; gap: 8px; text-align: left; margin: 8px 0 4px; }
.pw-form label { display: grid; gap: 3px; font-size: 13px; font-weight: 700; }
.pw-form input { padding: 8px 10px; font-size: 15px; border-radius: 6px; }
#pwCancel { display: block; margin: 4px auto 8px; text-decoration: underline; }
#pwModal { z-index: 1000; }