/* ============================================
   DOFUS RETRO IDLE — UI Style authentique
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

:root {
  --bg-main:    #cbc4b4;
  --bg-panel:   #dbd4c4;
  --bg-card:    #e8e0d0;
  --bg-slot:    #b8b0a0;
  --bg-dark:    #6a6058;
  --bg-header:  #3a3028;
  --border:     #9a9080;
  --border-dark:#6a6050;
  --border-light:#f0ece0;
  --text:       #1e1810;
  --text-light: #4a4038;
  --text-muted: #7a7068;
  --gold:       #b87808;
  --gold-light: #e0a020;
  --red:        #cc2200;
  --green:      #3a8a2a;
  --blue:       #2a5a9a;
  --orange:     #e87820;
  --shadow:     2px 2px 0 #4e4438, 4px 4px 8px rgba(0,0,0,0.4);
  --inset:      inset 1px 1px 3px rgba(0,0,0,0.3), inset -1px -1px 2px rgba(255,255,255,0.1);
  --radius:     4px;
  --font-main:  'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-ui:    'Segoe UI', Tahoma, sans-serif;
  --left-nav-w: 240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg-main);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(180,170,150,0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(160,150,130,0.15) 0%, transparent 50%);
}

/* ============================================
   LOADING
   ============================================ */
#loading-screen {
  position: fixed; inset: 0;
  background: var(--bg-header);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  background-image: radial-gradient(ellipse at center, #5e5448 0%, #1e1c18 100%);
}
.loading-logo { font-size: 64px; margin-bottom: 16px; }
.loading-title {
  font-family: var(--font-main);
  font-size: 32px; font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(200,148,10,0.5);
  letter-spacing: 3px; margin-bottom: 8px;
}
.loading-text { color: #d8d0c0; margin-top: 16px; font-size: 15px; }
.loading-bar {
  width: 300px; height: 6px;
  background: #1e1c18; border: 1px solid var(--border);
  border-radius: 3px; margin-top: 12px; overflow: hidden;
}
.loading-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light));
  animation: loadpulse 1.5s ease-in-out infinite;
}
@keyframes loadpulse { 0%,100%{width:20%} 50%{width:85%} }

/* ============================================
   APP LAYOUT
   ============================================ */
#app { display: none; height: 100vh; flex-direction: column; }

/* ============================================
   COMBAT DASHBOARD (always visible top section)
   ============================================ */
.combat-dashboard {
  flex-shrink: 0;
  background: linear-gradient(180deg, #1e1810 0%, #352e24 60%, #2a2418 100%);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 3px 12px rgba(0,0,0,0.6);
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.combat-dashboard.collapsed { max-height: 38px; }

/* Title bar */
.dash-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px;
  border-bottom: 1px solid #3a3020;
  height: 36px;
}
.dash-game-title {
  font-family: var(--font-main);
  font-size: 16px; font-weight: 700;
  color: var(--gold-light); letter-spacing: 1px;
  white-space: nowrap;
}
.dash-kamas {
  font-family: var(--font-main);
  font-size: 13px; font-weight: bold;
  color: var(--gold-light); white-space: nowrap;
}
.banner-save-btn {
  padding: 4px 10px;
  background: linear-gradient(180deg, var(--gold), #6a6030);
  border: 1px solid #4a4028; border-radius: var(--radius);
  color: #1e1c18; font-weight: bold; font-size: 11px;
  cursor: pointer; white-space: nowrap; margin-left: auto;
}
.banner-save-btn:hover { opacity: 0.85; }
.dash-toggle-btn {
  background: transparent; border: 1px solid #5a5040;
  color: var(--gold); font-size: 12px; cursor: pointer;
  border-radius: 3px; padding: 2px 6px; line-height: 1;
}

/* Main combat row — hauteur FIXE pour éviter le saut au fin de combat */
.dash-combat-row {
  display: flex; gap: 8px; padding: 0;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: stretch;
}
/* v126.5 — Raids guilde + Anti-perco + Invitation modale */
.mg-raid-card {
  background: linear-gradient(135deg, #2a1808 0%, #1a0e08 100%);
  border: 2px solid #c83030;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 0 20px rgba(200,48,48,0.3), inset 0 1px 0 rgba(255,80,80,0.15);
}
.mg-raid-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mg-raid-ic { font-size: 48px; filter: drop-shadow(0 0 12px rgba(255,80,80,0.6)); }
.mg-raid-name { font-size: 18px; font-weight: 900; color: #ff8060; text-shadow: 0 1px 0 #000; }
.mg-raid-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #f0e4b8; margin-top: 4px; }
.mg-raid-stats b { color: #ffe890; }
.mg-raid-locked, .mg-raid-done {
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3a1a;
  padding: 12px 16px; border-radius: 8px;
  color: #d8c898; text-align: center; font-weight: 700;
}
.mg-raid-done { border-color: #80f898; color: #80f898; }
.mg-raid-team { background: rgba(0,0,0,0.4); padding: 12px; border-radius: 8px; margin-top: 8px; }
.mg-raid-team-title { font-size: 12px; font-weight: 800; color: #ffd060; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.mg-raid-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-bottom: 12px; }
.mg-raid-char { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0,0,0,0.4); border: 1px solid #4a3a1a; border-radius: 6px; cursor: pointer; }
.mg-raid-char:hover { background: rgba(255,208,96,0.1); }
.mg-raid-go {
  width: 100%;
  background: linear-gradient(180deg, #ff4040, #c02020);
  color: #fff; border: 2px solid #ff8060;
  padding: 12px; border-radius: 8px;
  font-size: 14px; font-weight: 900; cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(200,48,48,0.5);
}
.mg-raid-go:hover:not([disabled]) { transform: translateY(-2px); }
.mg-raid-go:disabled { opacity: 0.5; cursor: not-allowed; }

.mg-attack-block { background: rgba(0,0,0,0.4); padding: 14px; border: 1px solid #6a4818; border-radius: 8px; margin-top: 12px; }
.mg-attack-help { font-size: 12px; color: #d8c898; margin-bottom: 10px; }
.mg-attack-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.mg-attack-btn {
  background: linear-gradient(180deg, #c83030, #802020);
  color: #fff; border: 1px solid #ff6060;
  padding: 8px 12px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  text-align: left; transition: all 0.12s;
}
.mg-attack-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(200,48,48,0.4); }

/* Modale invitation guilde cross-account */
.gi-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.gi-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
}
.gi-row:hover { background: rgba(255,208,96,0.1); border-color: #ffd060; transform: translateX(3px); }
.gi-emblem { font-size: 28px; }
.gi-info { flex: 1; display: flex; flex-direction: column; }
.gi-name { font-size: 14px; font-weight: 800; color: #ffe890; }
.gi-meta { font-size: 11px; color: #d8c898; }
.gi-go { font-size: 18px; color: #ffd060; font-weight: 900; }
.pc-btn-guild { background: linear-gradient(135deg, #c060ff, #8030c0) !important; color: #fff !important; border-color: #ffa0ff !important; }

/* v126.4 — Invitation persos dans guilde (page Membres) */
.mg-invite-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  background: rgba(0,0,0,0.4);
  padding: 12px;
  border: 1px solid #4a3a1a;
  border-radius: 10px;
}
.mg-invite-row {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(60,42,20,0.5), rgba(20,14,8,0.5));
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  padding: 10px;
}
.mg-invite-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mg-invite-name { font-size: 13px; font-weight: 800; }
.mg-invite-class { font-size: 10.5px; color: #a89878; font-weight: 600; }
.mg-invite-btn {
  background: linear-gradient(180deg, #80c850, #408020);
  color: #fff; border: 1px solid #408020;
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.mg-invite-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(80,200,80,0.4); }
.mgm-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.4); flex-shrink: 0; }
.mgm-kick {
  background: rgba(200,48,48,0.3); border: 1px solid #c83030;
  color: #ff8060; font-size: 12px; font-weight: 900;
  width: 24px; height: 24px; padding: 0; border-radius: 4px;
  cursor: pointer; margin-left: auto;
}
.mgm-kick:hover { background: #c83030; color: #fff; }

/* v126.16 — Bonus panoplie : bandeau "actif" + ligne courante */
.ied-set-current-banner {
  background: linear-gradient(90deg, rgba(80,200,120,0.25), rgba(40,120,60,0.15));
  border: 1.5px solid #80c850;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px; color: #f0f8e0; font-weight: 600;
  margin: 6px 0;
}
.ied-set-current-banner b { color: #80f898; }
.ied-set-current-banner.pending {
  background: linear-gradient(90deg, rgba(184,120,8,0.2), rgba(60,40,16,0.15));
  border-color: #c89030;
  color: #f0e4b8;
}
.ied-set-current-banner.preview {
  background: linear-gradient(90deg, rgba(120,140,200,0.2), rgba(40,60,100,0.15));
  border-color: #6080c0;
  color: #d8e0f0;
}
.ied-set-current-banner.preview b { color: #a0c0ff; }
.ied-set-line.is-current {
  background: rgba(80,200,120,0.15) !important;
  border-left: 4px solid #80c850 !important;
  padding-left: 10px;
}
.ied-set-line.is-current .ied-set-bonus b { color: #80f898; }

/* v126.13 — Mobile responsive ajustements */
@media (max-width: 720px) {
  /* v174 — Toasts mobile : sur le container, plein largeur */
  #toast-stack { top: 60px !important; right: 8px !important; left: 8px !important; }
  .toast { max-width: none !important; font-size: 13px !important; padding: 10px 14px !important; }
  /* Forge picker plein écran */
  #forge-picker .rename-modal, #sell-pnj-modal .rename-modal { max-width: 96vw !important; max-height: 92vh !important; overflow-y: auto; }
  /* Farm tabs scrollables horizontalement */
  .farm-area-tabs { overflow-x: auto; flex-wrap: nowrap; padding: 8px 12px !important; }
  .farm-area-tab { white-space: nowrap; flex-shrink: 0; font-size: 12px !important; padding: 7px 10px !important; }
  .farm-zones-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; padding: 12px !important; gap: 8px !important; }
  .farm-zone-card { padding: 10px !important; }
  .farm-zone-card-name { font-size: 13.5px !important; }
  /* Bank grid plus de colonnes */
  .bank-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; gap: 4px !important; padding: 8px !important; }
  /* Sanctuaire selector scroll horizontal */
  .frq-cs-tabs, .gcs-tabs { overflow-x: auto; flex-wrap: nowrap !important; }
  .frq-cs-tab, .gcs-tab { flex-shrink: 0; min-width: 150px !important; }
  /* Forge fusion + raid stats : compact */
  .mg-perso-pct-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .mg-perso-pct-control { min-width: 0 !important; width: 100%; }
  /* Activity feed plus discret */
  .dash-activity-feed { flex: 0 0 240px !important; }
  /* Combat dashboard hauteur réduite */
  .dash-combat-row { height: 260px !important; min-height: 260px !important; max-height: 260px !important; }
}
@media (max-width: 480px) {
  .farm-zones-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .dash-activity-feed { flex: 0 0 200px !important; }
  .toast { font-size: 12px !important; }
}

/* v126.13 — FARM REFONTE ERGONOMIE : navigation par AREA tabs en haut + grille zones large */
.farm-layout {
  display: flex !important;
  flex-direction: column !important;
  background: radial-gradient(ellipse at top, rgba(184,120,8,0.08), transparent 70%), #07050a !important;
  min-height: 0 !important;     /* v126.16 — laisse couler le contenu, pas d'espace forcé */
  height: auto;
}
#panel-farm { min-height: 0 !important; }
.farm-detail-col { flex: 0 0 auto !important; min-height: 0; }
/* Cache l'ancienne nav-col verticale */
.farm-nav-col { display: none !important; }
.farm-detail-col { width: 100%; flex: 1; }
/* Pour pas casser : si écran large, garder nav-col en haut horizontale */
.farm-area-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1a1208, #0d0805);
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 10;
}
.farm-area-tab {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid #6a4818;
  color: #d8c898;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.5px;
}
.farm-area-tab:hover { background: rgba(255,208,96,0.15); color: #ffe890; transform: translateY(-1px); }
.farm-area-tab.active { background: linear-gradient(180deg, #ffd060, #c89030); color: #1a1208; border-color: #ffe890; box-shadow: 0 4px 12px rgba(255,208,96,0.4); }
.farm-area-tab small { opacity: 0.75; margin-left: 4px; font-size: 10px; }
/* v126.23 — Bandeau "EN FARM" sticky en haut, repérage instantané des persos */
.farm-active-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(80,200,120,0.18), rgba(40,120,60,0.08));
  border-bottom: 2px solid #40c060;
  position: sticky; top: 0; z-index: 12;
  box-shadow: 0 2px 10px rgba(64,224,96,0.15);
}
.fab-label {
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
  color: #80f898; text-transform: uppercase;
  background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 6px;
  border: 1px solid #40c060;
  flex-shrink: 0;
  text-shadow: 0 1px 0 #000;
}
.fab-zone {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(80,200,120,0.2), rgba(20,40,20,0.5));
  border: 1.5px solid #40c060;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #f0f8e0;
  font-weight: 700;
  transition: all 0.15s;
}
.fab-zone:hover { background: linear-gradient(135deg, rgba(80,200,120,0.35), rgba(20,40,20,0.6)); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(64,224,96,0.4); }
.fab-zone-name { white-space: nowrap; }
.fab-zone-chars { display: inline-flex; gap: -8px; }
.fab-char-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid #ffd060;
  margin-left: -6px;
}
.fab-char-avatar:first-child { margin-left: 0; }
.fab-zone-count {
  background: #40c060; color: #fff;
  font-weight: 900; font-size: 11px;
  padding: 2px 7px; border-radius: 10px;
  min-width: 20px; text-align: center;
}

/* v126.21 — REFONTE : ancienne grille → cachée. Pills horizontales à la place */
.farm-zones-grid { display: none !important; }
.farm-zone-card { display: none !important; }
.farm-zones-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(20,14,8,0.6), rgba(10,6,4,0.4));
  border-bottom: 2px solid rgba(184,120,8,0.4);
  max-height: 140px;
  overflow-y: auto;
}
.fz-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #2a1d10 0%, #14100a 100%);
  border: 1.5px solid #5a4a2a;
  color: #f0e4b8;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 700;
  transition: all 0.15s;
  white-space: nowrap;
  height: 36px;
  box-sizing: border-box;
}
.fz-pill:hover:not([disabled]) {
  background: linear-gradient(135deg, #3a2818, #1f1810);
  border-color: #ffd060;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255,208,96,0.25);
}
.fz-pill.sel {
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a1208;
  border-color: #ffe890;
  box-shadow: 0 4px 14px rgba(255,208,96,0.5);
  font-weight: 900;
}
.fz-pill.dungeon { border-left: 4px solid #c060ff; }
.fz-pill.dungeon.sel { border-color: #c060ff; background: linear-gradient(135deg, #c060ff, #8030c0); color: #fff; }
.fz-pill.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.fz-pill-icon { font-size: 14px; flex-shrink: 0; }
.fz-pill-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.fz-pill-lv {
  font-size: 10px; font-weight: 900;
  background: rgba(0,0,0,0.45);
  color: #ffe890;
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.fz-pill.sel .fz-pill-lv { background: rgba(0,0,0,0.4); color: #ffe890; }
.fz-pill-active {
  font-size: 10px; font-weight: 900;
  background: linear-gradient(135deg, #80c850, #408020);
  color: #fff;
  padding: 2px 6px; border-radius: 4px;
  animation: zone-active-pulse 1.6s ease-in-out infinite;
}
.fz-pill-lock { font-size: 11px; color: #c87060; }

/* Détail de zone collé immédiatement sous les pills */
.farm-detail-col {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: 0;
  overflow: visible;
}
.farm-layout { gap: 0 !important; }
.farm-zone-card {
  background: linear-gradient(135deg, #2a1808 0%, #14100a 100%);
  border: 2px solid #5a4a2a;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
  height: auto;             /* v126.15 — hauteur naturelle, pas étirée */
}
.farm-zone-card:hover { transform: translateY(-3px); border-color: #ffd060; box-shadow: 0 8px 20px rgba(255,208,96,0.3); }
.farm-zone-card.selected { border-color: #ffd060; background: linear-gradient(135deg, #4a3010 0%, #2a1808 100%); box-shadow: 0 0 18px rgba(255,208,96,0.4); }
.farm-zone-card.dungeon { border-left: 5px solid #c060ff; }
.farm-zone-card.dungeon.selected { border-color: #c060ff; box-shadow: 0 0 18px rgba(192,96,255,0.5); }
.farm-zone-card.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); }
.farm-zone-card-name {
  font-size: 15px; font-weight: 800;
  color: #ffe890; line-height: 1.25;
  text-shadow: 0 1px 0 #000;
}
.farm-zone-card-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: #d8c898; font-weight: 600;
}
.farm-zone-card-tag {
  background: rgba(0,0,0,0.5); padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.farm-zone-card-tag.lvl { color: #ffd060; border: 1px solid #6a4818; }
.farm-zone-card-tag.dungeon { color: #c060ff; border: 1px solid #c060ff; background: rgba(192,96,255,0.12); }
.farm-zone-card-tag.active { color: #80f898; background: rgba(60,160,80,0.25); border: 1px solid #40c060; animation: zone-active-pulse 1.6s ease-in-out infinite; }
@keyframes zone-active-pulse { 0%,100% { box-shadow: 0 0 0 rgba(64,224,80,0); } 50% { box-shadow: 0 0 10px rgba(64,224,80,0.6); } }

/* v126.8 — FARM PAGE REFONTE PREMIUM COMPLÈTE */
#panel-farm {
  background: radial-gradient(ellipse at top, rgba(184,120,8,0.08) 0%, transparent 60%), #07050a !important;
}
.farm-layout {
  display: flex !important;
  background: transparent !important;
  min-height: calc(100vh - 220px);
}
.farm-nav-col {
  width: 260px !important;
  background: linear-gradient(180deg, #1a1208 0%, #0d0805 100%) !important;
  border-right: 3px solid var(--gold) !important;
  box-shadow: 4px 0 18px rgba(0,0,0,0.6), inset -2px 0 12px rgba(0,0,0,0.5) !important;
  padding-top: 4px;
}
.farm-area-group { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(74,58,26,0.5); }
.farm-area-label {
  font-size: 12px !important;
  background: linear-gradient(90deg, rgba(184,120,8,0.4), rgba(184,120,8,0.05)) !important;
  border-bottom: 1px solid #6a4818 !important;
  padding: 12px 16px 8px !important;
  letter-spacing: 2.5px !important;
  font-weight: 900 !important;
  color: #ffe890 !important;
  text-shadow: 0 1px 0 #000;
  margin: 0 0 6px !important;
}
.farm-zone-nav-item {
  padding: 11px 14px 11px 16px !important;
  font-size: 13.5px !important;
  border-left: 4px solid transparent !important;
  transition: all 0.18s !important;
}
.farm-zone-nav-item:hover { background: rgba(255,208,96,0.14) !important; transform: translateX(3px); }
.farm-zone-nav-item.selected {
  background: linear-gradient(90deg, rgba(255,208,96,0.35), rgba(184,120,8,0.1)) !important;
  border-left-color: #ffd060 !important;
  color: #ffe890 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 16px rgba(255,208,96,0.18) !important;
}
.farm-detail-col {
  flex: 1;
  background: linear-gradient(180deg, rgba(20,14,8,0.7), rgba(10,6,4,0.85));
  overflow-y: auto;
}
.fzd-header {
  padding: 22px 27px !important;
  background: linear-gradient(135deg, #2a1808 0%, #1a1208 50%, #0c0805 100%) !important;
  border-bottom: 4px double var(--gold) !important;
}
.fzd-title {
  font-size: 30px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffe890, #ffd060) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6) !important;
}
.fzd-sub { font-size: 14px !important; color: #f0e4b8 !important; font-weight: 600; }
.fzd-body { padding: 20px 26px !important; gap: 18px; }
.farm-section-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #ffe890 !important;
  letter-spacing: 2.5px !important;
  background: linear-gradient(90deg, rgba(184,120,8,0.4), transparent) !important;
  padding: 12px 16px !important;
  border-left: 5px solid var(--gold) !important;
  border-radius: 0 6px 6px 0;
  margin: 18px 0 12px !important;
}
.fmd-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; }
.fmd-card {
  background: linear-gradient(180deg, #2a1d12 0%, #14100a 100%) !important;
  border: 2px solid #5a4a2a !important;
  border-radius: 12px !important;
  padding: 14px 10px 10px !important;
  transition: all 0.2s !important;
  position: relative;
  overflow: visible;
}
.fmd-card:hover {
  transform: translateY(-4px);
  border-color: #ffd060 !important;
  box-shadow: 0 8px 22px rgba(255,208,96,0.35), 0 0 14px rgba(255,208,96,0.25) inset !important;
}
.fmd-card.is-boss {
  background: linear-gradient(180deg, #4a1010 0%, #1a0808 100%) !important;
  border-color: #ff4040 !important;
  box-shadow: 0 0 20px rgba(255,80,80,0.4), inset 0 0 18px rgba(255,80,80,0.15) !important;
  animation: boss-glow 2.6s ease-in-out infinite;
}
@keyframes boss-glow { 0%,100% { box-shadow: 0 0 20px rgba(255,80,80,0.4), inset 0 0 18px rgba(255,80,80,0.15); } 50% { box-shadow: 0 0 32px rgba(255,80,80,0.7), inset 0 0 22px rgba(255,80,80,0.25); } }
.fmd-img-wrap { position: relative; padding-top: 6px; }
.fmd-img { width: 64px !important; height: 64px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.fmd-name { font-size: 13px !important; font-weight: 900 !important; color: #ffe890 !important; text-shadow: 0 1px 0 #000; line-height: 1.2; }
.fmd-bname { font-size: 10.5px !important; color: #ff8060 !important; font-weight: 800 !important; }
.fmd-lvl {
  font-size: 11px !important; font-weight: 800 !important;
  color: #1a1208 !important;
  background: linear-gradient(135deg, #ffd060, #c89030) !important;
  padding: 2px 8px !important; border-radius: 6px !important;
  display: inline-block; margin-top: 5px !important;
}
.farm-drops-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; gap: 7px !important; }
.fdrop-slot {
  background: linear-gradient(180deg, #1a1208, #0c0805) !important;
  border: 2px solid #5a4a2a !important;
  border-radius: 8px !important;
  padding: 6px !important;
  position: relative;
  transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fdrop-slot:hover { border-color: var(--gold) !important; transform: scale(1.1); z-index: 2; box-shadow: 0 4px 12px rgba(255,208,96,0.4); }
.fdrop-slot.is-equip { border-color: #c060ff !important; box-shadow: 0 0 8px rgba(192,96,255,0.3); }
.fdrop-slot.ecaille { border-color: #c060ff !important; box-shadow: 0 0 12px rgba(192,96,255,0.5); }
.fdrop-img { width: 42px !important; height: 42px !important; object-fit: contain; }
.fdrop-rate {
  /* v126.10 — petit badge en bas-droite, ne cache plus l'image */
  position: absolute !important;
  bottom: -4px !important; right: -4px !important;
  font-size: 9px !important; font-weight: 900 !important;
  padding: 1px 4px !important; border-radius: 6px;
  background: rgba(0,0,0,0.85) !important;
  border: 1px solid currentColor;
  z-index: 4;
  line-height: 1.2;
}
.fdrop-rate.rate-high { color: #80f898 !important; border: 1px solid #40c060; }
.fdrop-rate.rate-mid  { color: #ffe890 !important; border: 1px solid #c89030; }
.fdrop-rate.rate-low  { color: #ff8060 !important; border: 1px solid #c83030; }
.fdrop-owned {
  position: absolute; top: -6px; right: -6px;
  background: linear-gradient(135deg, #80c850, #408020);
  color: #fff; font-size: 10px; font-weight: 900;
  padding: 2px 6px; border-radius: 8px;
  border: 1.5px solid #1a1208;
  z-index: 3;
}

/* v126.12 — Modale vente PNJ */
.sell-pnj-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3a1a;
  border-radius: 8px;
  padding: 10px;
  margin: 12px 0;
}
.sell-pnj-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: rgba(20,14,8,0.6);
  border: 1px solid #4a3a1a;
  border-radius: 6px;
}
.sell-pnj-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.sell-pnj-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sell-pnj-name { font-size: 13px; font-weight: 800; color: #ffe890; }
.sell-pnj-meta { font-size: 11px; color: #d8c898; }
.sell-pnj-total { font-weight: 900; color: #ffd060; flex-shrink: 0; font-size: 14px; }

/* v126.11 — Forge fusion d'objets + aura blanche/dorée */
.forge-protected-notice {
  background: rgba(200,48,48,0.15);
  border: 2px solid #c83030;
  border-radius: 8px;
  padding: 14px 18px;
  color: #ff8060;
  font-weight: 700;
  text-align: center;
  margin: 10px 0;
}
.forge-fusion-section {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(20,14,8,0.5));
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
}
.ffs-explain { font-size: 13px; color: #f0e4b8; margin-bottom: 8px; line-height: 1.5; }
.ffs-explain b { color: #ffe890; }
.ffs-status { font-size: 13px; color: #d8c898; margin-bottom: 10px; font-weight: 700; }
.ffs-btn {
  width: 100%;
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a1208;
  border: 2px solid #ffe890;
  padding: 12px; border-radius: 8px;
  font-size: 14px; font-weight: 900; cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255,208,96,0.4);
}
.ffs-btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,208,96,0.6); }
.ffs-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }

/* v126.15 — AURA sur l'IMAGE de l'objet (filter drop-shadow), pas sur l'encadrement */
.aura-white img, [data-aura="white"] img {
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(255,255,255,0.85)) drop-shadow(0 0 14px rgba(255,255,255,0.5)) !important;
  animation: aura-white-img 2s ease-in-out infinite;
}
.aura-gold img, [data-aura="gold"] img {
  filter: drop-shadow(0 0 4px #ffd060) drop-shadow(0 0 10px rgba(255,208,96,0.9)) drop-shadow(0 0 18px rgba(255,208,96,0.6)) !important;
  animation: aura-gold-img 1.8s ease-in-out infinite;
}
@keyframes aura-white-img {
  0%,100% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(255,255,255,0.85)) drop-shadow(0 0 14px rgba(255,255,255,0.5)); }
  50%     { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255,255,255,1))   drop-shadow(0 0 22px rgba(255,255,255,0.7)); }
}
@keyframes aura-gold-img {
  0%,100% { filter: drop-shadow(0 0 4px #ffd060) drop-shadow(0 0 10px rgba(255,208,96,0.9)) drop-shadow(0 0 18px rgba(255,208,96,0.6)); }
  50%     { filter: drop-shadow(0 0 8px #ffe890) drop-shadow(0 0 18px rgba(255,208,96,1))   drop-shadow(0 0 28px rgba(255,208,96,0.85)); }
}

/* Forge picker : protected disabled */
.forge-pick-row.protected { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.6); }
.forge-pick-row.protected:hover { transform: none; background: rgba(0,0,0,0.4); }
.fpr-effets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fpr-eff-tag { font-size: 9.5px; color: #80c850; background: rgba(80,200,120,0.15); padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(80,200,120,0.3); }

/* v126.10 — XP guilde par perso (slider individuel) */
.mg-perso-pct-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mg-perso-pct-row {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, rgba(60,42,20,0.4), rgba(20,14,8,0.5));
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  padding: 10px 14px;
}
.mg-perso-pct-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-perso-pct-name { font-size: 13.5px; font-weight: 800; }
.mg-perso-pct-stats { font-size: 11px; color: #d8c898; font-weight: 600; }
.mg-perso-pct-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 200px; }
.mg-perso-pct-control input[type=range] { flex: 1; min-width: 120px; accent-color: #ffd060; }
.mg-perso-pct-val { font-size: 14px; font-weight: 900; color: #ffe890; min-width: 48px; text-align: right; text-shadow: 0 1px 0 #000; }

/* Invitation extern */
.mg-invite-extern { display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.4); padding: 12px; border: 1px solid #6a4818; border-radius: 8px; }
.mg-invite-extern .rm-input { background: rgba(20,14,8,0.6); border: 1.5px solid #6a4818; color: #ffe890; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.mg-invite-extern .mg-invite-btn { width: 100%; padding: 10px; font-size: 13px; }

/* v126.9 — Bank toolbar (filtres + tri) */
.bank-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(20,12,4,0.95), rgba(8,4,2,0.95));
  border: 1px solid #4a3a1a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  /* v239 — Sticky toolbar : reste visible quand on scrolle dans la banque */
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
/* v239 — Vue groupée par catégorie */
.bank-cat-section { margin-top: 14px; }
.bank-cat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(74,58,26,0.6), rgba(40,30,12,0.4));
  border: 1px solid #6a5230; border-radius: 6px;
  font-weight: 900; font-size: 13px; color: #ffd890;
  user-select: none;
}
.bank-cat-head:hover { background: linear-gradient(180deg, rgba(94,74,30,0.7), rgba(60,42,18,0.5)); color: #ffe890; }
.bank-cat-head .bch-arrow { font-size: 11px; color: #c89030; transition: transform 0.15s; }
.bank-cat-section.open .bank-cat-head .bch-arrow { transform: rotate(90deg); }
.bank-cat-head .bch-stats { margin-left: auto; font-size: 11px; color: #c8b888; font-weight: 700; }
.bank-cat-body { display: none; padding: 8px 4px 0; }
.bank-cat-section.open .bank-cat-body { display: block; }
.bank-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bank-toolbar-label { font-size: 11px; font-weight: 900; color: #ffd060; letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0; }

/* v126.9 — Forge picker (modale) */
.forge-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; padding: 4px; }
.forge-pick-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
}
.forge-pick-row:hover { background: rgba(255,208,96,0.12); border-color: #ffd060; transform: translateX(3px); }
.fpr-img { width: 36px; height: 36px; object-fit: contain; background: rgba(0,0,0,0.4); border-radius: 5px; padding: 2px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.fpr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fpr-name { font-size: 13.5px; font-weight: 800; color: #ffe890; }
.fpr-meta { font-size: 11px; color: #d8c898; }
.fpr-go { font-size: 18px; color: #ffd060; font-weight: 900; }

/* v126.7 — Boutique : bandeau cible perso */
.shop-target-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(200,48,48,0.2) 0%, rgba(60,20,20,0.4) 100%);
  border: 2px solid #ff6060;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 12px 0;
  box-shadow: 0 0 12px rgba(200,48,48,0.2);
}
.shop-target-label { font-size: 12px; font-weight: 800; color: #ffd060; letter-spacing: 0.5px; }
.shop-target-pick {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #6a4818;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.shop-target-pick:hover { background: rgba(255,208,96,0.1); border-color: #ffd060; }
.shop-target-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.4); }
.shop-target-name { font-size: 14px; font-weight: 900; }
.shop-target-lv { font-size: 11px; color: #d8c898; font-weight: 700; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; }
.shop-target-arrow { font-size: 11px; color: #ffd060; font-weight: 800; margin-left: 4px; }

/* v126.7 — Top loot fallback (📦 si pas d'image) */
.dash-hist-loot-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  font-size: 12px;
  cursor: help;
}
/* v182 — Chips loot dans dash-history-strip : image + qty À CÔTÉ (pas dessus) */
.dash-loot-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 5px;
  padding: 2px 5px;
  cursor: pointer;
  margin: 0 1px;
  height: 28px;
}
.dash-loot-chip:hover { border-color: #ffd060; transform: scale(1.05); z-index: 2; }
.dash-loot-img-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  flex-shrink: 0;
}
.dash-loot-chip img { width: 22px; height: 22px; object-fit: contain; display: block; }
.dash-loot-fallback { font-size: 14px; }
.dash-loot-qty-side {
  font-size: 11px; font-weight: 900; color: #ffd060;
  padding: 0 2px;
}
.dash-hist-loot { display: inline-flex; gap: 4px; align-items: center; }

/* v126.9 — Boss badge premium : ruban incliné en haut-droite */
.fmd-boss-badge {
  position: absolute !important;
  top: -8px !important; right: -8px !important;
  bottom: auto !important; left: auto !important;
  transform: rotate(8deg) !important;
  background: linear-gradient(135deg, #ff5050 0%, #b01818 100%) !important;
  color: #fff !important;
  font-size: 9.5px !important; font-weight: 900 !important;
  letter-spacing: 2px !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  border: 2px solid #1a0808 !important;
  box-shadow:
    0 0 0 1px #ff8060 inset,
    0 4px 12px rgba(0,0,0,0.7),
    0 0 18px rgba(255,80,80,0.5) !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(255,180,180,0.6);
  z-index: 5;
  text-transform: uppercase;
  white-space: nowrap;
}
.farm-drops-header, .farm-ecailles-header {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #ffe890 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(184,120,8,0.4), transparent) !important;
  padding: 10px 14px !important;
  border-left: 4px solid var(--gold) !important;
  margin: 16px 0 10px !important;
  text-shadow: 0 1px 0 #000;
  display: flex; align-items: center; gap: 10px;
}
.farm-drops-count, .farm-ecailles-count {
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.5);
  padding: 3px 8px; border-radius: 5px;
  color: #d8c898;
  border: 1px solid #6a4818;
}
.farm-ecailles-section {
  background: linear-gradient(135deg, rgba(192,96,255,0.1), rgba(20,14,8,0.4));
  border-left: 4px solid #c060ff !important;
  margin-top: 14px;
  border-radius: 0 8px 8px 0;
  padding-bottom: 12px;
}
.farm-ecailles-header {
  background: linear-gradient(90deg, rgba(192,96,255,0.4), transparent) !important;
  border-left-color: #c060ff !important;
  color: #f0e4ff !important;
}
.farm-ecailles-count { background: rgba(192,96,255,0.2); border-color: #c060ff; color: #e0c8ff; }
.fdrop-slot.ecaille { border-color: #c060ff !important; box-shadow: 0 0 10px rgba(192,96,255,0.4); }

/* v126.5 — Farm page polish v2 (premium moderne) */
.farm-layout {
  background: radial-gradient(ellipse at top, rgba(184,120,8,0.06), transparent 60%), #0a0604;
}
.farm-zone-nav-item {
  position: relative;
}
.farm-zone-nav-item.dungeon::before {
  content: '🏰';
  position: absolute; top: 6px; right: 6px; font-size: 10px; opacity: 0.6;
}
.fzd-body {
  background: linear-gradient(180deg, rgba(20,14,8,0.4), transparent);
  padding: 16px 22px;
}
.fzd-monsters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.fmd-info { width: 100%; text-align: center; padding-top: 6px; border-top: 1px solid rgba(255,208,96,0.15); margin-top: 6px; }
.zone-drops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}
.zone-drop-rate {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 8.5px; font-weight: 900; color: #ffd060;
  background: rgba(0,0,0,0.7); padding: 1px 3px; border-radius: 3px;
}
/* v126.4 — Page Farm refonte premium */
.fzd-header {
  background: linear-gradient(135deg, #2a1808 0%, #1a1208 60%, #0c0805 100%);
  padding: 20px 26px;
  border-bottom: 3px solid var(--gold);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.fzd-title {
  font-size: 26px; font-weight: 900;
  color: #ffe890;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,208,96,0.4);
  margin-bottom: 6px;
}
.fzd-sub { font-size: 13px; color: #f0e4b8; font-weight: 600; }
.farm-section-title {
  font-size: 14px; font-weight: 900;
  color: #ffd060; text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, rgba(184,120,8,0.3), transparent);
  padding: 10px 14px;
  border-left: 4px solid var(--gold);
  margin: 14px 0 10px;
  text-shadow: 0 1px 0 #000;
}
.fmd-card {
  background: linear-gradient(180deg, rgba(40,28,18,0.95), rgba(20,14,8,0.95));
  border: 2px solid #4a3a1a;
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.fmd-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 18px rgba(255,208,96,0.3); }
.fmd-card.is-boss {
  border-color: #c83030;
  background: linear-gradient(180deg, rgba(80,30,30,0.95), rgba(40,14,14,0.95));
  box-shadow: 0 0 14px rgba(200,48,48,0.4);
}
.fmd-img { width: 56px; height: 56px; object-fit: contain; }
.fmd-boss-badge {
  position: absolute; top: 4px; right: 4px;
  background: linear-gradient(135deg, #ff4040, #c02020);
  color: #fff; font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 1px;
}
.fmd-name { font-size: 12px; color: #ffe890; font-weight: 800; text-align: center; margin-top: 6px; }
.fmd-bname { font-size: 10px; color: #f08060; font-weight: 700; }
.fmd-lvl { font-size: 10.5px; color: #d8c898; font-weight: 700; margin-top: 3px; }

/* Carte de drop loot par monstre */
.zone-drop-slot {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid #4a3a1a;
  border-radius: 6px;
  padding: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
  transition: all 0.15s;
}
.zone-drop-slot:hover { border-color: var(--gold); transform: scale(1.05); }
.zone-drop-slot.is-equip { border-color: #c060ff; box-shadow: 0 0 8px rgba(192,96,255,0.3); }
.zone-drop-slot img { width: 38px; height: 38px; object-fit: contain; }

/* v126.3 — Carte spécialité de classe (page Stats) */
.dr-class-spec {
  background: linear-gradient(180deg, rgba(20,14,8,0.92), rgba(10,6,4,0.95));
  border: 2px solid var(--cc, #ffd060);
  border-radius: 14px;
  margin: 12px 0;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dr-cs-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}
.dr-cs-emblem {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px currentColor);
  animation: cs-pulse 2.4s ease-in-out infinite;
}
@keyframes cs-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.dr-cs-titles { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dr-cs-tag { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; opacity: 0.85; text-transform: uppercase; }
.dr-cs-name { font-size: 22px; font-weight: 900; text-shadow: 0 1px 0 #000, 0 0 12px currentColor; letter-spacing: 0.5px; }
.dr-cs-desc { font-size: 12.5px; color: #d8d4cc; font-style: italic; line-height: 1.5; }
.dr-cs-list {
  list-style: none; padding: 14px 20px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
}
.dr-cs-list li {
  font-size: 12.5px; color: #f0e8d0; font-weight: 600;
  background: rgba(0,0,0,0.4);
  border-left: 3px solid rgba(255,255,255,0.15);
  padding: 7px 10px;
  border-radius: 5px;
}
.dr-cs-list li b { color: #ffe890; font-weight: 900; }

/* v126.3 — Item verrouillé (anti auto-transfert) */
.dr-cat-slot.locked {
  border-color: #c83030 !important;
  box-shadow: 0 0 8px rgba(200,48,48,0.5), inset 0 0 8px rgba(200,48,48,0.2) !important;
}
.dr-cat-lock {
  position: absolute; top: 2px; left: 2px;
  font-size: 12px;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}

/* v126.3 — Sélecteur perso sur Sanctuaire */
.frq-char-selector {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #1a0a30 0%, #2a1840 100%);
  border-bottom: 2px solid #c060ff;
  margin-bottom: 12px;
  border-radius: 10px 10px 0 0;
}
.frq-cs-label { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: #c060ff; text-transform: uppercase; flex-shrink: 0; }
.frq-cs-tabs { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.frq-cs-tab {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #4a3a1a;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 180px;
  transition: all 0.15s;
}
.frq-cs-tab:hover { background: rgba(192,96,255,0.15); transform: translateY(-2px); }
.frq-cs-tab.sel { background: linear-gradient(135deg, rgba(192,96,255,0.3), rgba(80,40,140,0.4)); box-shadow: 0 0 14px rgba(192,96,255,0.4); }
.frq-cs-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4); flex-shrink: 0; }
.frq-cs-info { display: flex; flex-direction: column; min-width: 0; }
.frq-cs-name { font-size: 13px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frq-cs-count { font-size: 10.5px; color: #d8c898; font-weight: 700; white-space: nowrap; }
.frq-tier-multi { font-size: 10px; font-weight: 700; color: #c060ff; background: rgba(192,96,255,0.15); padding: 2px 6px; border-radius: 4px; margin-left: 4px; }

/* v126.3 — Animation seal sans clignotement */
.frq-tier { transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.frq-tier.just-sealed {
  animation: frq-seal-flash 1.2s ease-out;
}
@keyframes frq-seal-flash {
  0%   { box-shadow: 0 0 0 rgba(255,208,96,0); transform: scale(1); }
  20%  { box-shadow: 0 0 30px rgba(255,208,96,0.9), 0 0 60px rgba(255,208,96,0.6); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 rgba(255,208,96,0); transform: scale(1); }
}

/* v126.2 — Buffs : affichage des effets dans le détail du sort */
.spx-buff-effects {
  background: linear-gradient(135deg, rgba(144,144,192,0.18), rgba(60,40,90,0.3));
  border: 2px solid #9090c0;
  border-left: 4px solid #b0b0e0;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  color: #f0e8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.spx-buff-title {
  font-size: 12px; font-weight: 900; letter-spacing: 1.2px;
  color: #b0b0e0; text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.spx-buff-list { list-style: none; padding: 0; margin: 0; }
.spx-buff-list li {
  font-size: 13px; color: #f0e8ff; font-weight: 600;
  padding: 5px 8px;
  background: rgba(0,0,0,0.3);
  border-left: 3px solid #9090c0;
  border-radius: 4px;
  margin-bottom: 4px;
}
.spx-buff-fallback { font-size: 12px; color: #d0d0e8; font-style: italic; }
.spx-buff-fallback small { color: #909090; display: block; margin-top: 4px; font-size: 10.5px; }

/* v126.2 — Drag & drop sorts (ordre de lancement) */
.spord-item { cursor: grab; user-select: none; transition: all 0.12s; }
.spord-item:active { cursor: grabbing; }
.spord-item.spord-drag-over {
  border-top: 3px solid #ffd060 !important;
  background: rgba(255,208,96,0.15) !important;
  transform: translateX(4px);
}
.spord-handle { font-size: 18px; color: #c89030; cursor: grab; padding: 0 6px; }

/* v126.2 — Activité live REFONTE : timeline lisible et propre */
.dash-activity-feed * { box-sizing: border-box; }
.dash-activity-feed {
  flex: 0 0 320px !important;
  display: flex; flex-direction: column;
  background: #1a1208 !important;
  border-right: 2px solid #6a4818 !important;
  min-height: 100%;
  font-family: var(--font-body);
}
.dafd-head {
  background: linear-gradient(180deg, #2a1808, #1a1208);
  border-bottom: 2px solid #6a4818;
  padding: 10px 12px 6px;
}
.dafd-title-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dafd-title { font-size: 13px; font-weight: 900; color: #ffd060; letter-spacing: 1.5px; text-transform: uppercase; }
.dafd-expand {
  width: 24px; height: 24px; padding: 0;
  background: rgba(255,208,96,0.15);
  border: 1px solid #ffd060; color: #ffd060;
  border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 700;
}
.dafd-expand:hover { background: #ffd060; color: #1a1208; }
.dafd-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-bottom: 8px;
}
.dafd-kpi {
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3a1a;
  border-radius: 5px;
  padding: 5px 4px;
  text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}
.dafd-kpi b { display: block; font-size: 13px; color: #ffe890; font-weight: 800; line-height: 1; }
.dafd-kpi span { display: block; font-size: 9px; color: #a89878; text-transform: uppercase; letter-spacing: 0.5px; }
.dafd-filters { display: flex; gap: 3px; }
.dafd-filter {
  flex: 1; padding: 5px 0;
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3a1a;
  color: #a89878; font-size: 11px; font-weight: 700;
  border-radius: 4px; cursor: pointer; transition: all 0.1s;
}
.dafd-filter:hover { background: rgba(255,208,96,0.1); color: #ffd060; }
.dafd-filter.on { background: #ffd060; color: #1a1208; border-color: #ffd060; }
.dafd-list { flex: 1; overflow-y: auto; }
.dafd-list::-webkit-scrollbar { width: 6px; }
.dafd-list::-webkit-scrollbar-thumb { background: #4a3a1a; border-radius: 3px; }
.dafd-empty { padding: 20px 12px; color: #6a6050; font-size: 12px; font-style: italic; text-align: center; }
.dafd-row {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(74,58,26,0.5);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}
.dafd-row:hover { background: rgba(255,208,96,0.08); }
.dafd-row.win { border-left-color: #40c060; }
.dafd-row.loss { border-left-color: #c04040; opacity: 0.85; }
.dafd-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: rgba(0,0,0,0.4); border: 1px solid #4a3a1a; }
.dafd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dafd-line1 { display: flex; align-items: center; gap: 6px; }
.dafd-pseudo { font-weight: 800; font-size: 12px; flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dafd-result { font-size: 13px; font-weight: 900; flex-shrink: 0; }
.dafd-row.win .dafd-result { color: #80f898; }
.dafd-row.loss .dafd-result { color: #ff8060; }
.dafd-zone { font-size: 10.5px; color: #a89878; font-style: italic; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dafd-line2 { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dafd-tag {
  font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
}
.dafd-tag.xp { color: #80f898; border-color: rgba(80,200,120,0.3); }
.dafd-tag.kamas { color: #ffd060; border-color: rgba(255,208,96,0.3); }
.dafd-tag.loot { color: #c896ff; border-color: rgba(192,150,255,0.3); }
.dafd-tag.time { color: #a89878; margin-left: auto; font-weight: 700; font-size: 9.5px; }

/* v126 — Mini feed activité premium (zone gauche dashboard) */
.dash-activity-feed {
  flex: 0 0 300px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a120a 0%, #0c0805 100%);
  border-right: 2px solid var(--gold);
  overflow: hidden;
  min-height: 100%;
  box-shadow: inset -2px 0 12px rgba(0,0,0,0.6);
}
.dafeed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(184,120,8,0.4), rgba(60,40,16,0.6));
  border-bottom: 2px solid #6a4818;
}
.dafeed-titles { display: flex; align-items: center; gap: 8px; }
.dafeed-title {
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px;
  color: #ffe890; text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}
.dafeed-winrate {
  font-size: 9.5px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg, #208030, #105020);
  color: #80f898; padding: 2px 6px; border-radius: 4px;
  border: 1px solid #40c060;
}
.dafeed-more {
  background: linear-gradient(180deg, #ffd060, #c89030);
  border: 1px solid #6a4818;
  color: #1a1208; font-weight: 900; font-size: 13px;
  width: 26px; height: 24px; border-radius: 5px; cursor: pointer;
  padding: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.dafeed-more:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(255,208,96,0.5); }
.dafeed-stats {
  display: flex; justify-content: space-around;
  padding: 8px 6px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid #4a3a1a;
  font-size: 10.5px; font-weight: 700;
  color: #d8c898;
}
.dafeed-stats span { white-space: nowrap; }
.dafeed-filters {
  display: flex; gap: 4px; padding: 6px 8px;
  background: rgba(20,14,8,0.6);
  border-bottom: 1px solid #4a3a1a;
}
.dafeed-filter {
  flex: 1; padding: 4px 0;
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3a1a;
  color: #a89878;
  font-size: 11px; font-weight: 700;
  border-radius: 4px;
  cursor: pointer; transition: all 0.12s;
}
.dafeed-filter:hover { background: rgba(255,208,96,0.15); color: #ffd060; }
.dafeed-filter.on {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a1208;
  border-color: #ffd060;
  box-shadow: 0 0 8px rgba(255,208,96,0.4);
}
.dafeed-list { flex: 1; overflow-y: auto; padding: 0; }
.dafeed-list::-webkit-scrollbar { width: 6px; }
.dafeed-list::-webkit-scrollbar-thumb { background: rgba(184,120,8,0.5); border-radius: 3px; }
.dafeed-empty { padding: 22px 14px; color: #6a6050; font-style: italic; font-size: 12px; text-align: center; }
.dafeed-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px;
  font-size: 11px; color: #d4c8b0;
  border-bottom: 1px solid rgba(74,58,26,0.5);
  cursor: pointer; transition: background 0.15s, transform 0.1s;
  border-left: 3px solid transparent;
}
.dafeed-item:hover {
  background: rgba(255,208,96,0.1);
  transform: translateX(2px);
  border-left-color: #ffd060;
}
.dafeed-item.win { border-left-color: rgba(64,180,80,0.6); }
.dafeed-item.loss { border-left-color: rgba(180,60,60,0.6); }
.dafeed-row1 { display: flex; align-items: center; gap: 8px; }
.dafeed-row2 { display: flex; align-items: center; gap: 8px; padding-left: 22px; }
.dafeed-ico { font-size: 14px; flex-shrink: 0; }
.dafeed-char { font-weight: 800; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dafeed-zone { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a89878; font-size: 10.5px; font-style: italic; }
.dafeed-xp { color: #80c850; font-weight: 800; flex-shrink: 0; font-size: 10px; }
.dafeed-kamas { color: #ffd060; font-weight: 800; flex-shrink: 0; font-size: 10px; }
.dafeed-ago { color: #6a6050; font-size: 9.5px; flex-shrink: 0; font-weight: 700; }
.dafeed-loot { display: flex; gap: 3px; padding-left: 22px; flex-wrap: wrap; align-items: center; }
.dafeed-loot-mini { width: 22px; height: 22px; object-fit: contain; background: rgba(0,0,0,0.4); border-radius: 4px; padding: 1px; border: 1px solid rgba(184,120,8,0.4); }
.dafeed-loot-more { font-size: 10px; font-weight: 800; color: #ffd060; padding: 0 4px; }
.dash-empty-msg {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%;
  color: #6a6050; font-size: 13px; font-style: italic; gap: 4px;
}

/* Active character card (left, large) */
.dash-char-main {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(0,0,0,0.4);
  border: 2px solid var(--gold);
  border-radius: 6px; padding: 8px 12px;
  min-width: 240px; flex-shrink: 0;
  cursor: pointer; transition: border-color 0.2s;
}
.dash-char-main:hover { border-color: var(--gold-light); }
.dash-char-main-top {
  display: flex; align-items: center; gap: 8px;
}
.dash-char-main-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold); object-fit: contain;
  background: #2a2018;
}
.dash-char-main-name {
  font-family: var(--font-main); font-size: 15px;
  color: var(--gold-light); font-weight: 700;
}
.dash-char-main-class {
  font-size: 11px; color: #a89868;
}
.dash-bars { display: flex; flex-direction: column; gap: 3px; }
.dash-bar-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
}
.dash-bar-label { color: #c8b888; min-width: 24px; }
.dash-bar-track {
  flex: 1; height: 10px; background: #1a1610;
  border: 1px solid #3a3020; border-radius: 3px; overflow: hidden;
}
.dash-bar-fill { height: 100%; transition: width 0.4s; border-radius: 2px; }
.dash-bar-val { color: #c8b888; min-width: 70px; text-align: right; font-size: 10px; }
.dash-char-main-zone {
  font-size: 11px; color: #8a7a5a;
  border-top: 1px solid #3a3020; padding-top: 4px; margin-top: 2px;
}
.dash-last-combat {
  font-size: 11px; color: #a0906a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Other characters mini cards (right) */
.dash-chars-others {
  display: flex; gap: 6px; align-items: flex-start; flex-wrap: nowrap;
  overflow-x: auto; flex: 1;
}
.dash-char-mini {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #4a4030;
  border-radius: 5px; padding: 6px 8px;
  min-width: 140px; max-width: 160px; flex-shrink: 0;
  cursor: pointer; transition: border-color 0.2s;
}
.dash-char-mini:hover { border-color: var(--gold); }
.dash-mini-top {
  display: flex; align-items: center; gap: 6px;
}
.dash-mini-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #6a5a3a; object-fit: contain;
  background: #2a2018;
}
.dash-mini-name {
  font-size: 12px; color: var(--gold-light); font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-mini-class { font-size: 10px; color: #8a7a5a; }
.dash-mini-bar {
  height: 7px; background: #1a1610;
  border: 1px solid #3a3020; border-radius: 2px; overflow: hidden;
}
.dash-mini-bar-fill { height: 100%; transition: width 0.4s; }
.dash-mini-info { font-size: 10px; color: #8a7a5a; }
.dash-mini-idle {
  font-size: 10px; color: #5a5040; font-style: italic;
}

/* History strip */
.dash-history-strip {
  display: flex; gap: 6px; padding: 0 12px 6px;
  overflow-x: auto; min-height: 32px; align-items: center;
  border-top: 1px solid #2a2418;
}
.dash-history-empty {
  color: #4a4030; font-size: 11px; font-style: italic;
}
.dash-hist-item {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #3a3020; border-radius: 3px;
  padding: 3px 8px; font-size: 11px;
  white-space: nowrap; flex-shrink: 0;
  color: #b0a080;
}
.dash-hist-item.victory { border-color: #3a6030; color: #80c060; }
.dash-hist-item.defeat  { border-color: #602020; color: #c06050; }
.dash-hist-loot {
  display: flex; gap: 3px; align-items: center;
}
.dash-hist-loot img {
  width: 14px; height: 14px; object-fit: contain;
}

/* BODY ROW */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* ── legacy references kept for compat ── */
.banner-kamas { /* alias */ }
.banner-hp-bar, .banner-hp-fill, .banner-hp-text,
.banner-char-name, .banner-combat-card, .banner-combats,
.banner-empty, .banner-status, .banner-title { /* unused, kept */ }

/* ============================================
   LEFT NAVIGATION
   ============================================ */
.left-nav {
  width: var(--left-nav-w);
  background: linear-gradient(180deg, #4e4438 0%, #3e3428 100%);
  border-right: 3px solid var(--border-dark);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}
.left-nav-section {
  padding: 6px;
  border-bottom: 2px solid var(--border-dark);
}
.left-nav-label {
  font-size: 10px; color: #8a8a7a;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 6px 2px;
  font-family: var(--font-main);
}
.nav-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #d8d4c8; cursor: pointer;
  font-size: 14px; text-align: left;
  font-family: var(--font-ui);
  transition: all 0.12s;
  margin-bottom: 2px;
}
.nav-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border);
}
.nav-btn.active {
  background: linear-gradient(135deg, #6e6448, #5a5040);
  border-color: var(--gold);
  color: var(--gold-light);
  font-weight: bold;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.nav-btn .nav-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-btn .nav-label { font-size: 13px; }

/* Character list in left nav */
#char-list { flex: 1; overflow-y: auto; padding: 4px; }
.char-entry {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: all 0.12s;
}
.char-entry:hover { background: rgba(255,255,255,0.08); }
.char-entry.active {
  background: linear-gradient(135deg, #5a5040, #4a4038);
  border-color: var(--gold);
}
.char-avatar {
  width: 32px; height: 32px;
  border: 2px solid var(--border);
  border-radius: 50%; background: var(--bg-dark);
  object-fit: contain; flex-shrink: 0;
}
.char-info { flex: 1; min-width: 0; }
.char-name {
  font-weight: bold; font-size: 12px;
  color: #ece8d8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.char-class { font-size: 11px; }
.char-hp-bar {
  height: 4px; background: #1e1c18;
  border-radius: 2px; margin: 2px 0; overflow: hidden;
}
.hp-fill { height: 100%; transition: width 0.3s, background 0.3s; }
.char-status { font-size: 10px; color: #b8b0a0; }

.sidebar-add-btn {
  padding: 8px 6px;
  border-top: 2px solid var(--border-dark);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Panels */
.panel {
  display: none; flex: 1; overflow-y: auto;
  padding: 14px; gap: 14px;
  flex-direction: column;
}
.panel.active { display: flex; }

/* Farm panel: no padding/scroll — handled internally by farm-layout children */
#panel-farm.active { padding: 0; overflow: hidden; }

/* Panel frame (Dofus window style) */
.dofus-window {
  background: var(--bg-panel);
  border: 3px solid var(--border-dark);
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dofus-window-header {
  background: linear-gradient(180deg, #6e6458 0%, #4e4438 100%);
  padding: 8px 14px;
  border-bottom: 2px solid var(--border-dark);
  display: flex; align-items: center; gap: 10px;
}
.dofus-window-title {
  font-family: var(--font-main);
  font-size: 15px; font-weight: 700;
  color: var(--gold-light);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  flex: 1;
}
.dofus-window-body { padding: 12px; }

/* Panel header (simpler) */
.panel-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.panel-header h2 {
  font-family: var(--font-main);
  font-size: 20px; font-weight: 700;
  color: var(--gold);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  flex: 1;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  padding: 8px 18px;
  background: linear-gradient(180deg, #d4a418 0%, #6a6030 100%);
  color: #1e1c18; font-weight: bold;
  border: 2px solid #4a4028;
  border-radius: var(--radius);
  cursor: pointer; font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: var(--font-ui);
  transition: opacity 0.12s;
}
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  padding: 7px 14px;
  background: linear-gradient(180deg, #d8d0c0 0%, #b8b0a0 100%);
  color: var(--text); font-weight: bold;
  border: 2px solid var(--border-dark);
  border-radius: var(--radius);
  cursor: pointer; font-size: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-family: var(--font-ui);
  transition: opacity 0.12s;
}
.btn-secondary:hover { opacity: 0.85; }

.btn-danger {
  padding: 7px 14px;
  background: linear-gradient(180deg, #e84828 0%, #8a2808 100%);
  color: #fff; font-weight: bold;
  border: 2px solid #5a1808;
  border-radius: var(--radius);
  cursor: pointer; font-size: 13px;
}
.btn-danger:hover { opacity: 0.85; }

.btn-xs {
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text); cursor: pointer; font-size: 12px;
}
.btn-xs:hover { background: var(--bg-slot); }
.btn-xs.danger { border-color: var(--red); color: var(--red); }
.btn-xs.danger:hover { background: var(--red); color: #fff; }

.btn-start {
  padding: 7px 16px;
  background: linear-gradient(180deg, #4aa828 0%, #2a6808 100%);
  border: 2px solid #1a4808; border-radius: var(--radius);
  color: #e8ffe0; font-weight: bold; cursor: pointer; font-size: 13px;
}
.btn-stop {
  padding: 7px 16px;
  background: linear-gradient(180deg, #e84828 0%, #8a2808 100%);
  border: 2px solid #5a1808; border-radius: var(--radius);
  color: #fff; font-weight: bold; cursor: pointer; font-size: 13px;
}

/* ============================================
   INLINE PANELS (no modals)
   ============================================ */
.inline-form {
  background: var(--bg-panel);
  border: 3px solid var(--border-dark);
  border-radius: 6px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.inline-form h3 {
  font-family: var(--font-main);
  font-size: 18px; color: var(--gold);
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; margin-bottom: 4px;
  font-size: 13px; color: var(--text-light);
  font-weight: bold;
}
.input-field {
  width: 100%; padding: 8px 10px;
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text); font-size: 14px;
  box-shadow: var(--inset);
  font-family: var(--font-ui);
}
.input-field:focus { outline: none; border-color: var(--gold); }
select.input-field, select {
  background: var(--bg-card);
  color: var(--text);
  border: 2px solid var(--border-dark);
  padding: 6px 8px; border-radius: var(--radius);
}
.form-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ============================================
   FARM PANEL
   ============================================ */
.farm-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.farm-main { flex: 1; min-width: 0; }
.farm-sidebar { width: 320px; flex-shrink: 0; }

.zone-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.zone-card-header {
  background: linear-gradient(180deg, #6e6458 0%, #4e4438 100%);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--border-dark);
}
.zone-name {
  font-family: var(--font-main);
  font-size: 14px; font-weight: 700;
  color: var(--gold-light); flex: 1;
}
.zone-body { padding: 10px 12px; }
.zone-monsters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.monster-tag {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px; font-size: 12px;
}
.monster-tag img { height: 24px; }
.zone-chars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.char-farming-tag {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid; border-radius: var(--radius);
  font-size: 12px; font-weight: bold;
  background: rgba(0,0,0,0.1);
}
.zone-actions-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Farm form */
.monster-search-results {
  max-height: 200px; overflow-y: auto;
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.monster-result {
  display: flex; align-items: center;
  padding: 7px 10px; cursor: pointer;
  font-size: 13px; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.monster-result:hover { background: var(--bg-slot); }
.monster-result img { height: 28px; margin-right: 8px; }
.lvl-badge {
  margin-left: 8px; padding: 2px 6px;
  background: var(--bg-slot); border-radius: 3px;
  font-size: 11px; color: var(--text-light);
}
.zone-monster-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.zone-monster-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px;
}
.zone-monster-row img { height: 32px; }
.zone-monster-row input[type=number] {
  width: 55px; padding: 4px;
  background: var(--bg-slot); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text); font-size: 13px;
}

/* ============================================
   CHARACTER PANEL
   ============================================ */
.chars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.char-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.char-card:hover { border-color: var(--gold); }
.char-card-header {
  padding: 12px 14px;
  border-bottom: 2px solid var(--border-dark);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #6e6458, #4e4438);
}
.char-card-avatar {
  width: 48px; height: 48px;
  border: 2px solid var(--border);
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg-dark);
}
.char-card-name {
  font-family: var(--font-main);
  font-size: 17px; font-weight: 700;
  color: var(--gold-light);
}
.char-card-class { font-size: 13px; font-weight: bold; }
.char-card-body { padding: 12px 14px; }
.char-card-stat-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.char-card-stat-row:last-child { border-bottom: none; }
.char-card-stat-label { color: var(--text-light); }
.char-card-stat-val { font-weight: bold; }
.char-card-bar-row { margin: 6px 0; }
.char-card-bar-label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 3px;
}
.char-card-bar {
  height: 10px; background: #5e5448;
  border: 1px solid var(--border-dark);
  border-radius: 3px; overflow: hidden;
}
.char-card-bar-fill { height: 100%; border-radius: 2px; }
.char-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-slot);
}
.stat-alert {
  padding: 4px 10px;
  background: var(--gold);
  color: #1e1c18; font-weight: bold;
  font-size: 12px; border-radius: 3px;
}

/* Stat distribution panel */
.stat-distrib-panel {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  margin-top: 12px;
}
.stat-distrib-panel h4 {
  font-family: var(--font-main);
  font-size: 15px; color: var(--gold);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.stat-distrib-grid { display: flex; flex-direction: column; gap: 6px; }
.stat-distrib-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.stat-distrib-row img { width: 22px; height: 22px; }
.stat-distrib-name { flex: 1; font-size: 14px; font-weight: bold; }
.stat-distrib-base { width: 40px; text-align: right; color: var(--text-light); font-size: 13px; }
.stat-distrib-bonus { width: 60px; text-align: right; font-weight: bold; font-size: 14px; color: var(--blue); }
.stat-cost { font-size: 11px; color: var(--text-muted); width: 70px; }
.stat-distrib-btns { display: flex; gap: 4px; }
.stat-pts-display {
  text-align: center; padding: 8px;
  background: var(--gold); color: #1e1c18;
  font-family: var(--font-main);
  font-size: 16px; font-weight: 700;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

/* ============================================
   INVENTORY
   ============================================ */
.inventory-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.inventory-main { flex: 1; min-width: 280px; }
.inventory-side { width: 260px; flex-shrink: 0; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(8, 44px);
  gap: 4px;
  background: #aaa090;
  border: 3px solid var(--border-dark);
  border-radius: 4px;
  padding: 8px;
  box-shadow: var(--inset);
}
.inv-slot {
  width: 55px; height: 55px;
  background: var(--bg-slot);
  border: 2px solid var(--border-dark);
  border-radius: 3px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--inset);
  transition: border-color 0.1s;
}
.inv-slot.filled { border-color: #a89060; background: #c8a870; }
.inv-slot.filled:hover { border-color: var(--gold); }
.inv-slot.empty { cursor: default; opacity: 0.7; }
.inv-slot img { width: 45px; height: 45px; object-fit: contain; image-rendering: pixelated; }
/* CSS tooltip */
.inv-slot .inv-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%; transform: translateX(-50%);
  background: #1a1008; color: var(--gold-light);
  border: 1px solid #5a4a20; border-radius: 4px;
  padding: 3px 6px; font-size: 10px;
  white-space: nowrap; z-index: 200; pointer-events: none;
}
.inv-slot:hover .inv-tooltip { display: block; }
.item-qty {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 10px; font-weight: bold;
  color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.inv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.inv-title {
  font-family: var(--font-main);
  font-size: 15px; color: var(--gold);
}
.inv-count { font-size: 13px; color: var(--text-muted); }
.inv-actions { display: flex; gap: 6px; margin-bottom: 8px; }

/* Item tooltip */
.item-detail-box {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.item-detail-name {
  font-family: var(--font-main);
  font-size: 15px; font-weight: 700;
  color: var(--gold); margin-bottom: 6px;
}
.item-detail-desc { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.item-detail-level { font-size: 12px; color: var(--text-muted); }
.item-effects { margin: 8px 0; }
.item-effect {
  font-size: 13px; padding: 3px 0;
  border-bottom: 1px solid var(--border);
  color: var(--blue);
}
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ============================================
   EQUIPMENT (paperdoll)
   ============================================ */
.equipment-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.paperdoll-wrap {
  display: flex; gap: 12px;
  background: #aaa090;
  border: 3px solid var(--border-dark);
  border-radius: 6px;
  padding: 14px;
  box-shadow: var(--inset);
}
.paperdoll-left { display: flex; flex-direction: column; gap: 6px; width: 70px; }
.paperdoll-center {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  width: 160px;
}
.paperdoll-right { display: flex; flex-direction: column; gap: 6px; width: 70px; }
.paperdoll-bottom { width: 100%; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

/* Silhouette */
.paperdoll-silhouette {
  width: 100px; height: 160px;
  background: url('assets/classes/silhouette.svg') center/contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
}

.equip-slot {
  width: 66px; height: 66px;
  background: var(--bg-slot);
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--inset);
  position: relative;
  transition: border-color 0.1s;
}
.equip-slot.filled { background: #c8a870; border-color: #a89060; }
.equip-slot.filled:hover { border-color: var(--gold); }
.equip-slot-label {
  font-size: 9px; color: var(--text-muted);
  text-align: center; line-height: 1; margin-bottom: 2px;
}
.equip-slot img { width: 48px; height: 48px; object-fit: contain; }
.equip-slot .equip-empty-icon { font-size: 22px; color: var(--border); }
.equip-slot .unequip-btn {
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px;
  background: var(--red); border: 1px solid #5a1808;
  border-radius: 50%; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
  cursor: pointer; display: none;
}
.equip-slot.filled:hover .unequip-btn { display: block; }
.equip-slot.empty.pickable:hover { border-color: var(--gold); background: rgba(200,168,32,0.1); }
.equip-slot.empty.pickable:hover .equip-empty-icon { color: var(--gold); }

.equip-slot-sm {
  width: 50px; height: 50px;
}

/* Equip stats */
.equip-stats-panel {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  padding: 12px; min-width: 200px;
}
.equip-stats-title {
  font-family: var(--font-main);
  font-size: 14px; color: var(--gold);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.stat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.stat-row img { width: 20px; height: 20px; }
.stat-row-label { flex: 1; font-weight: bold; }
.stat-row-base { color: var(--text-light); width: 40px; text-align: right; }
.stat-row-bonus { color: var(--blue); width: 50px; text-align: right; font-size: 12px; }
.stat-row-total { color: var(--text); width: 45px; text-align: right; font-weight: bold; font-size: 15px; }

/* ============================================
   SPELLS
   ============================================ */
.spells-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.spell-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  padding: 10px;
  display: flex; gap: 10px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.spell-card:hover { border-color: var(--border); }
.spell-buff { opacity: 0.65; }
.spell-buff:hover { opacity: 1; }
.spell-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--bg-slot);
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--inset);
  overflow: hidden;
}
.spell-icon img { width: 48px; height: 48px; object-fit: contain; }
.spell-info { flex: 1; }
.spell-name { font-weight: bold; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.spell-level-line { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.spell-element { font-size: 12px; font-weight: bold; margin-bottom: 2px; }
.spell-ap { font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
.spell-dmg { font-size: 13px; font-weight: bold; color: var(--red); margin-bottom: 4px; }
.spell-xp-bar {
  height: 6px; background: var(--bg-slot);
  border: 1px solid var(--border-dark);
  border-radius: 3px; margin: 4px 0; overflow: hidden;
}
.spell-xp-fill { height: 100%; border-radius: 2px; }
.spell-xp-text { font-size: 10px; color: var(--text-muted); }
.spell-maxed { font-size: 12px; color: var(--gold); font-weight: bold; }
.spell-locked { opacity: 0.45; pointer-events: none; border-color: #2a2a1a !important; }
.spell-lock-badge { font-size: 11px; color: #8a7050; margin-top: 4px; font-style: italic; }

/* ============================================
   COMBAT LOG
   ============================================ */
.log-stats-bar {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.log-stat { font-size: 14px; font-weight: bold; }
.log-stat span { color: var(--text-muted); font-weight: normal; }

.combat-log-list { display: flex; flex-direction: column; gap: 8px; }
.combat-entry {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.combat-entry.victory { border-left: 5px solid var(--green); }
.combat-entry.defeat  { border-left: 5px solid var(--red); }
.entry-header {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.entry-result { font-size: 18px; }
.entry-zone { color: var(--gold); font-weight: bold; font-size: 14px; }
.entry-xp { color: var(--orange); font-size: 13px; font-weight: bold; }
.entry-time { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.entry-body { padding: 8px 12px; }
.entry-hp { font-size: 13px; color: var(--text-light); margin-bottom: 4px; }
.entry-loot { font-size: 13px; color: var(--green); font-weight: bold; margin-bottom: 6px; }
.entry-log {
  font-size: 12px; color: var(--text-light);
  background: #aaa090;
  border: 1px solid var(--border-dark);
  border-radius: 4px; padding: 8px;
  max-height: 120px; overflow-y: auto;
  font-family: monospace; line-height: 1.6;
}

/* ============================================
   BANK
   ============================================ */
.bank-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.bank-grid {
  /* v126.10 — Pleine largeur : autofill responsive (slots 56px) au lieu de 10 fixes */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  background: linear-gradient(180deg, #1a1208 0%, #0c0805 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.6);
  width: 100%;
}
.bank-grid .inv-slot {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  background: linear-gradient(180deg, #2a1d12, #14100a) !important;
  border: 1.5px solid #5a4a2a !important;
  border-radius: 6px !important;
}
.bank-grid .inv-slot.filled:hover { border-color: var(--gold) !important; transform: scale(1.08); z-index: 5; box-shadow: 0 4px 12px rgba(255,208,96,0.4); }
.bank-grid .inv-slot.selected { border-color: #ffd060 !important; box-shadow: 0 0 12px rgba(255,208,96,0.6) !important; }
.bank-grid .inv-slot img { width: 75% !important; height: 75% !important; }
.bank-kamas {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.bank-kamas-icon { font-size: 22px; }
.bank-kamas-amount {
  font-family: var(--font-main);
  font-size: 20px; font-weight: 700;
  color: var(--gold);
}
.bank-kamas-label { font-size: 13px; color: var(--text-muted); }

/* ============================================
   CHARACTER CREATION (inline)
   ============================================ */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; max-height: 380px; overflow-y: auto;
}
.class-option {
  padding: 10px 8px;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer; text-align: center;
  transition: all 0.12s;
}
.class-option:hover { border-color: var(--border-dark); background: var(--bg-card); }
.class-option.selected {
  background: #d4b870;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200,148,10,0.3);
}
.class-icon {
  width: 56px; height: 56px;
  border: 2px solid; border-radius: 50%;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-slot); overflow: hidden;
}
.class-name {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 700;
}
.class-elements { font-size: 11px; color: var(--text-muted); margin: 2px 0; }
.class-desc { font-size: 10px; color: var(--text-light); line-height: 1.3; }

/* ============================================
   CONTEXT MENU
   ============================================ */
#context-menu {
  display: none;
  position: fixed; z-index: 2000;
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  overflow: hidden;
  min-width: 160px;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}
.ctx-item {
  padding: 9px 14px;
  cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  color: var(--text);
}
.ctx-item:last-child { border-bottom: none; }
.ctx-item:hover { background: var(--bg-slot); color: var(--gold); }
.ctx-item.danger:hover { background: var(--red); color: #fff; }

/* ============================================
   TOAST
   ============================================ */
/* v174 — Container empile les toasts verticalement (plus de superposition) */
#toast-stack {
  position: fixed; top: 80px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9000;
  pointer-events: none;
  max-height: calc(100vh - 100px);
  overflow: hidden;
}
.toast {
  position: relative;
  background: linear-gradient(135deg, #1a1208 0%, #2a1808 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 12px 20px;
  color: #ffe890 !important;
  font-size: 14px;
  font-weight: bold;
  transform: translateX(20px); opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  box-shadow: 0 6px 22px rgba(0,0,0,0.7), 0 0 14px rgba(255,208,96,0.3);
  max-width: 460px;
  text-shadow: 0 1px 0 #000;
  pointer-events: auto;
}
.toast * { color: inherit !important; }
.toast b, .toast strong { color: #fff !important; }
.toast.show { transform: translateX(0); opacity: 1; }

/* ============================================
   MISC
   ============================================ */
.empty-state {
  text-align: center; color: var(--text-muted);
  padding: 40px; font-size: 15px;
  font-style: italic;
}
.active-char-banner {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.section-title {
  font-family: var(--font-main);
  font-size: 16px; font-weight: 700;
  color: var(--gold); margin-bottom: 10px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 5px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-slot); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
  :root { --left-nav-w: 130px; }
  .inventory-grid { grid-template-columns: repeat(6, 44px); }
  .bank-grid { grid-template-columns: repeat(6, 44px); }
}

/* ============================================
   LOOT MINI (combat log)
   ============================================ */
.entry-loot {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.loot-mini {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 5px;
  font-size: 11px; color: var(--text-light);
}
.loot-mini.loot-equip {
  border-color: var(--gold); color: var(--gold);
  background: #2a2010;
}
.loot-mini-img {
  width: 18px; height: 18px; object-fit: contain;
}

/* ============================================
   ITEM COMPARE
   ============================================ */
.item-compare {
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 8px; margin: 8px 0;
  font-size: 12px;
}
.item-compare-title {
  font-weight: bold; color: var(--text-muted); margin-bottom: 6px;
  font-size: 11px; text-transform: uppercase;
}
.item-compare-row {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
}
.item-compare-row .stat-name { flex: 1; color: var(--text-light); }
.item-compare-row .stat-old { color: var(--text-muted); min-width: 28px; text-align: right; }
.item-compare-row .stat-arrow { color: var(--text-muted); }
.item-compare-row .stat-new { min-width: 28px; text-align: right; }
.item-compare-row .stat-diff { min-width: 36px; text-align: right; font-weight: bold; }
.item-compare-row .stat-diff.better { color: var(--green); }
.item-compare-row .stat-diff.worse  { color: var(--red); }

/* ============================================
   EQUIPMENT CATALOG
   ============================================ */
.equip-catalog-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 3px;
  font-size: 12px; cursor: default;
  border-bottom: 1px solid var(--border);
}
.equip-catalog-row:hover { background: var(--bg-card); }

/* Slot picker (inline item chooser) */
.slot-picker-panel {
  background: var(--bg-panel);
  border: 2px solid var(--gold);
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  max-width: 500px;
}
.slot-picker-title { font-size: 13px; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.slot-picker-empty { font-size: 12px; color: var(--text-muted); font-style: italic; line-height: 1.5; }
.slot-picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.slot-picker-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.slot-picker-item:hover { background: rgba(200,168,32,0.15); border-color: var(--gold); }
.slot-picker-img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; background: var(--bg-slot); border-radius: 3px; }
.slot-picker-info { flex: 1; min-width: 0; }
.slot-picker-name { font-size: 13px; font-weight: 700; color: var(--text); }
.slot-picker-lvl { font-size: 10px; color: var(--text-muted); }
.slot-picker-eff { font-size: 10px; color: #8a9a6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-picker-qty { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* ============================================
   ZONE PROGRESSION
   ============================================ */
.zone-group-title {
  font-family: var(--font-main);
  font-size: 15px; font-weight: 700;
  color: var(--gold); margin: 8px 0 6px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 4px;
}
.zone-area-tag {
  font-size: 11px; color: #8a7a5a;
  background: var(--bg-slot);
  border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 6px;
}
.zone-unlock-tag {
  font-size: 11px; border-radius: 3px; padding: 1px 6px;
}
.zone-unlock-tag.locked { color: #c05040; background: rgba(100,20,20,0.2); border: 1px solid #6a2020; }
.zone-unlock-tag.unlocked { color: #60a040; background: rgba(20,60,20,0.2); border: 1px solid #2a6020; }
.zone-monster-lvl { font-size: 10px; color: var(--text-muted); }
.zone-locked { opacity: 0.6; pointer-events: none; }
.zone-locked-msg {
  font-size: 12px; color: #7a5a4a; font-style: italic;
  padding: 4px 0;
}
.zone-card .grayed { opacity: 0.5; }

/* ============================================
   GROUPS
   ============================================ */
.group-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 6px; margin-bottom: 10px;
  padding: 10px 14px;
  transition: border-color 0.2s;
}
.group-card.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--bg-card), #ece4d4);
}
.group-card-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.group-name {
  font-family: var(--font-main); font-size: 15px;
  font-weight: 700; color: var(--gold);
}
.group-zone-tag {
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-slot);
  border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 8px;
}
.group-members {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.group-member-chip {
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 8px;
  font-size: 12px;
}
.group-member-lvl {
  font-size: 10px; color: var(--text-muted);
}
.group-create-form {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 6px; padding: 14px;
  margin-bottom: 12px;
}
.group-char-select {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px; background: var(--bg-slot);
  border: 1px solid var(--border); border-radius: 4px;
}
.group-char-option {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); font-size: 12px;
}
.group-char-option:hover { border-color: var(--gold); }
.group-char-option input { cursor: pointer; }

/* ============================================
   ZONE DROPS PREVIEW
   ============================================ */
.zone-drops-detail {
  margin: 6px 0; font-size: 12px;
}
.zone-drops-detail summary {
  cursor: pointer; color: var(--text-muted);
  font-size: 12px; user-select: none;
  padding: 2px 0;
}
.zone-drops-detail summary:hover { color: var(--gold); }
.zone-drops-grid {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 5px 0;
}
.zone-drop-slot {
  width: 40px; height: 40px;
  border: 1px solid #3a3020;
  border-radius: 3px;
  background: #1a1208;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  transition: border-color 0.15s;
  position: relative;
}
.zone-drop-slot:hover { border-color: var(--gold); }
.zone-drop-slot.is-equip { border-color: #6a5a20; background: #1e1a08; }
.zone-drop-slot img {
  width: 35px; height: 35px;
  object-fit: contain; image-rendering: pixelated;
}
.zone-drop-no-img {
  width: 35px; height: 35px;
  display: block;
  background: #2a2010;
  border-radius: 2px;
}
/* Tooltip for drop slot names */
.zone-drop-slot .drop-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%; transform: translateX(-50%);
  background: #1a1008;
  color: var(--gold-light);
  border: 1px solid #5a4a20;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
}
.zone-drop-slot:hover .drop-tooltip { display: block; }

/* ============================================
   COMBAT DASHBOARD — MONSTER PANEL
   ============================================ */
.dash-monsters-panel {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; flex: 1;
  padding: 4px 8px;
}
.dash-monster-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  min-width: 52px;
  transition: opacity 0.3s;
}
.dash-monster-card.dead { opacity: 0.35; }
.dash-monster-img {
  width: 44px; height: 44px;
  object-fit: contain; image-rendering: pixelated;
}
.dash-monster-hp-track {
  width: 44px; height: 6px;
  background: #1a1610;
  border: 1px solid #3a3020;
  border-radius: 2px; overflow: hidden;
}
.dash-monster-hp-fill {
  height: 100%;
  transition: width 0.25s ease;
}
.dash-monster-info {
  font-size: 9px; color: #a89868;
  text-align: center; white-space: nowrap;
}
.dash-no-fight {
  flex: 1; display: flex; align-items: center;
  justify-content: center;
  color: #4a3f25; font-size: 13px; font-style: italic;
}

/* ============================================
   INVENTORY FILTER TABS
   ============================================ */
.inv-filter-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.inv-filter-btn {
  background: var(--bg-slot);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted); font-size: 12px;
  padding: 3px 10px; cursor: pointer;
  transition: all 0.15s;
}
.inv-filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.inv-filter-btn.active {
  background: var(--gold); color: #1a1208;
  border-color: var(--gold-light); font-weight: 700;
}
.inv-header {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.item-equip-badge {
  position: absolute; bottom: 1px; left: 2px;
  font-size: 8px; color: #c8a820; line-height: 1;
  pointer-events: none;
}

/* ============================================
   COMBAT ARENA (dashboard)
   ============================================ */
/* ── Cinematic combat arena ── */
.dash-combat-arena {
  display: flex; align-items: stretch;
  gap: 0; width: 100%; min-height: 160px;
  overflow: hidden; transition: background 0.6s;
}

/* LEFT: character sprite + stats */
.arena-char-left {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px;
  min-width: 150px; max-width: 185px; flex-shrink: 0;
  background: rgba(0,0,0,0.3);
  border-right: 1px solid #3a3020;
}
.arena-char-sprite-wrap {
  position: relative; flex-shrink: 0;
}
.arena-char-sprite {
  width: 72px; height: 72px; object-fit: contain;
  image-rendering: crisp-edges;
  transition: filter 0.25s;
  display: block;
}
.arena-char-sprite.in-fight {
  filter: drop-shadow(0 0 4px rgba(200,168,32,0.4));
  transform: scaleX(-1);
}
.arena-char-sprite-glow {
  position: absolute; inset: 0; border-radius: 4px;
  pointer-events: none;
}
.arena-char-details { flex: 1; min-width: 0; }
.arena-char-name {
  font-size: 12px; font-weight: 700; color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 1px;
}
.arena-char-class { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.arena-bar-label {
  display: flex; justify-content: space-between;
  font-size: 9px; color: #7a6a4a; margin-top: 3px;
}
.arena-bar {
  height: 6px; background: #1a1610; border-radius: 3px;
  overflow: hidden; margin-top: 1px;
}
.arena-bar-fill { height: 100%; transition: width 0.3s; border-radius: 3px; }

/* CENTER: zone label + combat log */
.arena-center-col {
  flex: 1; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; border-right: 1px solid #3a3020;
  overflow: hidden;
}
.arena-zone-label {
  font-size: 11px; color: #8a7a4a; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arena-turn-badge {
  font-size: 12px; font-weight: 700; color: #c08020;
}
.arena-combat-log {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  justify-content: flex-end;
}
.arena-log-line {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arena-status-big {
  font-size: 14px; font-weight: 700; color: #c8a820;
  margin: 4px 0;
}
.arena-stats-row {
  display: flex; gap: 12px; font-size: 11px; color: #7a6a4a; margin-top: 4px;
}
.arena-zone-name { font-size: 10px; color: #7a6a4a; text-align: center; }

/* RIGHT: monsters */
.arena-monsters-right {
  display: flex; flex-wrap: wrap; align-content: center;
  gap: 8px; padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  min-width: 180px; max-width: 340px; flex-shrink: 0;
}
.arena-monster-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; width: 64px; position: relative;
  transition: opacity 0.3s;
}
.arena-monster-card.dead { opacity: 0.3; filter: grayscale(1); }
.arena-monster-img {
  width: 56px; height: 56px; object-fit: contain;
  image-rendering: pixelated;
  transition: filter 0.2s;
}
.arena-monster-hp-bar {
  width: 56px; height: 6px; background: #1a1610;
  border-radius: 3px; overflow: hidden;
}
.arena-monster-hp-fill { height: 100%; transition: width 0.3s; }
.arena-monster-name {
  font-size: 8px; color: #8a7a5a; text-align: center;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-monster-vita { font-size: 8px; color: #6a6050; text-align: center; }

/* Others strip (when idle) */
.arena-others {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 6px; padding: 6px 8px;
  min-width: 140px; max-width: 300px; flex-shrink: 0;
  background: rgba(0,0,0,0.15);
}
.arena-no-others { flex: 0 0 0; }

/* ============================================================
   COMBAT ANIMATIONS
   ============================================================ */
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
@keyframes attack-lunge {
  0%{transform:translateX(0) scaleX(1)} 35%{transform:translateX(16px) scaleX(1.1)} 65%{transform:translateX(-5px) scaleX(0.95)} 100%{transform:translateX(0) scaleX(1)}
}
@keyframes spell-flash {
  0%{filter:brightness(1) saturate(1)} 25%{filter:brightness(2.5) saturate(3) drop-shadow(0 0 6px #fff)} 60%{filter:brightness(1.6) saturate(2)} 100%{filter:brightness(1) saturate(1)}
}
@keyframes die-fade {
  0%{opacity:1;transform:scale(1) rotate(0deg)} 40%{opacity:0.8;transform:scale(1.1) rotate(-5deg)} 100%{opacity:0;transform:scale(0.4) rotate(-25deg) translateY(8px)}
}
@keyframes dmg-float {
  0%{opacity:1;transform:translateY(0) scale(1.3)} 30%{opacity:1;transform:translateY(-14px) scale(1)} 100%{opacity:0;transform:translateY(-32px) scale(0.85)}
}
@keyframes crit-float {
  0%{opacity:1;transform:translateY(0) scale(1.8)} 25%{opacity:1;transform:translateY(-10px) scale(1.4)} 100%{opacity:0;transform:translateY(-40px) scale(1)}
}
@keyframes heal-float {
  0%{opacity:1;transform:translateY(0) scale(1.2)} 100%{opacity:0;transform:translateY(-30px) scale(0.9)}
}
@keyframes monster-enter {
  0%{opacity:0;transform:translateX(30px) scale(0.7)} 60%{opacity:1;transform:translateX(-4px) scale(1.05)} 100%{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes victory-flash {
  0%,100%{background:transparent} 20%{background:rgba(100,200,50,0.25)} 40%{background:transparent} 60%{background:rgba(100,200,50,0.15)} 80%{background:transparent}
}
@keyframes defeat-flash {
  0%,100%{background:transparent} 25%{background:rgba(200,40,40,0.3)} 75%{background:rgba(200,40,40,0.15)}
}
@keyframes hp-pulse-low {
  0%,100%{opacity:1} 50%{opacity:0.45}
}
@keyframes crit-ring {
  0%{box-shadow:0 0 0 0 rgba(255,220,0,0.9)} 60%{box-shadow:0 0 0 12px rgba(255,220,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,220,0,0)}
}
@keyframes spell-cast {
  0%{transform:scale(1)} 30%{transform:scale(0.88) rotate(-3deg)} 60%{transform:scale(1.06) rotate(1deg)} 100%{transform:scale(1) rotate(0)}
}

.anim-shake   { animation: shake 0.35s ease; }
.anim-lunge   { animation: attack-lunge 0.32s cubic-bezier(.36,.07,.19,.97); }
.anim-flash   { animation: spell-flash 0.45s ease; }
.anim-cast    { animation: spell-cast 0.35s ease; }
.anim-die     { animation: die-fade 0.55s ease forwards; }
.anim-enter   { animation: monster-enter 0.4s cubic-bezier(.22,1,.36,1); }
.anim-crit    { animation: crit-ring 0.5s ease forwards; }
/* v193 — Échec critique : tremblement + flash gris */
.anim-fumble  { animation: fumble-shake 0.6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes fumble-shake {
  0%, 100% { transform: translateX(0); filter: grayscale(0); }
  20%      { transform: translateX(-10px) rotate(-3deg); filter: grayscale(0.8) brightness(0.7); }
  40%      { transform: translateX(10px)  rotate(3deg);  filter: grayscale(0.8) brightness(0.7); }
  60%      { transform: translateX(-6px) rotate(-2deg); filter: grayscale(0.6) brightness(0.85); }
  80%      { transform: translateX(6px)  rotate(2deg);  filter: grayscale(0.4) brightness(0.95); }
}
.dmg-float.elem-fumble { color: #ff4040; font-size: 22px; text-shadow: 0 0 6px #ff0000, 1px 1px 4px #000; }
.anim-victory { animation: victory-flash 0.8s ease; }
.anim-defeat  { animation: defeat-flash 0.7s ease; }
.hp-low       { animation: hp-pulse-low 1s ease-in-out infinite; }

.dmg-float {
  position: absolute; pointer-events: none; z-index: 99;
  font-size: 15px; font-weight: 900; text-shadow: 1px 1px 4px #000, -1px -1px 4px #000;
  animation: dmg-float 0.75s ease forwards;
  white-space: nowrap;
}
.dmg-float.crit {
  font-size: 20px;
  animation: crit-float 0.9s ease forwards;
}
/* Element color coding */
.dmg-float.elem-feu   { color: #ff7733; }
.dmg-float.elem-eau   { color: #44aaff; }
.dmg-float.elem-air   { color: #aaffaa; }
.dmg-float.elem-terre { color: #cc9944; }
.dmg-float.elem-neutre{ color: #ffdd44; }

/* Monster card — larger, with relative pos for float */
.dash-monster-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; width: 56px;
}
.dash-monster-card.dead { opacity: 0.4; }
.dash-monster-img {
  width: 48px; height: 48px; object-fit: contain;
  image-rendering: pixelated;
  transition: filter 0.2s;
}
.dash-monster-hp-track {
  width: 48px; height: 5px; background: #1a1610;
  border-radius: 2px; overflow: hidden;
}
.dash-monster-hp-fill { height: 100%; transition: width 0.3s; }
.dash-monster-info { font-size: 9px; color: #9a8a6a; text-align: center; }
.dash-monster-name {
  font-size: 8px; color: #7a6a4a; text-align: center;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Arena player sprite — bigger for combat */
.arena-player-avatar {
  width: 52px !important; height: 52px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  image-rendering: crisp-edges;
  transition: filter 0.2s;
  flex-shrink: 0;
}
.arena-player-row.casting .arena-player-avatar { animation: spell-flash 0.4s ease; }
.arena-player-row.attacking .arena-player-avatar { animation: attack-lunge 0.3s ease; }
.arena-player-row.hit .arena-player-avatar { animation: shake 0.35s ease; }

/* ============================================================
   MULTI-SELECT INVENTORY
   ============================================================ */
.inv-slot.selected {
  outline: 2px solid #c8a820 !important;
  outline-offset: -1px;
  background: rgba(200,168,32,0.18) !important;
}
.inv-select-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: rgba(200,168,32,0.12);
  border: 1px solid var(--gold); border-radius: 4px;
  margin-bottom: 6px;
}
.inv-select-count { font-size: 12px; color: var(--gold); font-weight: 700; }
.inv-select-hint  { font-size: 11px; color: var(--text-muted); flex: 1; }

/* ============================================================
   FARM PANEL — Redesign (zone nav + detail)
   ============================================================ */
/* v126.17 — La règle générique force height:100% — on l'override avec auto */
.farm-layout { display:flex; height:auto !important; overflow:visible !important; }
.farm-nav-col { width:240px; flex-shrink:0; background:linear-gradient(180deg,#1a1208,#241a0e); border-right:2px solid var(--gold); display:flex; flex-direction:column; overflow-y:auto; box-shadow:inset -2px 0 8px rgba(0,0,0,0.5); }
.farm-nav-footer { padding:10px; border-top:1px solid var(--border-dark); margin-top:auto; }
.farm-area-group { padding:0 0 6px; }
.farm-area-label {
  padding: 10px 14px 6px;
  font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  color: #ffd060;
  background: linear-gradient(90deg, rgba(184,120,8,0.25), transparent);
  border-bottom: 1px solid #4a3a1a;
  margin-bottom: 4px;
}
.farm-zone-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 14px;
  cursor: pointer; font-size: 13px; color: #d4c8b0;
  border-left: 4px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  position: relative;
}
.farm-zone-nav-item:hover { background: rgba(255,208,96,0.12); color: #fff; transform: translateX(2px); }
.farm-zone-nav-item.selected {
  background: linear-gradient(90deg, rgba(184,120,8,0.4), rgba(184,120,8,0.1));
  border-left-color: var(--gold);
  color: #ffe890; font-weight: 800;
  box-shadow: inset 0 0 12px rgba(255,208,96,0.15);
}
.farm-zone-nav-item.locked { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.farm-zone-nav-item.dungeon { color: #c896ff; }
.farm-zone-nav-item.dungeon.selected { color: #e0b0ff; border-left-color: #c896ff; background: linear-gradient(90deg, rgba(192,96,255,0.3), rgba(192,96,255,0.05)); }
.farm-zone-nav-item .fzn-icon { font-size: 16px; flex-shrink: 0; }
.farm-zone-nav-item .fzn-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-zone-nav-item .fzn-lock { font-size: 10px; color: #c87060; flex-shrink: 0; }
.farm-zone-nav-item .fzn-active { font-size: 10px; color: #80f898; font-weight: 900; flex-shrink: 0; background: rgba(60,160,80,0.25); padding: 2px 5px; border-radius: 4px; }
.fzn-icon { font-size:13px; flex-shrink:0; }
.fzn-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fzn-lock { font-size:10px; color:var(--text-muted); }
.fzn-active { font-size:10px; background:rgba(60,160,40,0.3); color:#80d060; padding:1px 4px; border-radius:3px; }
.farm-detail-col { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }
.farm-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:15px; }

.fzd-header { padding:12px 16px 11px; background:linear-gradient(180deg,#3e3830 0%,#2a2820 100%); border-bottom:2px solid var(--border-dark); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }
.fzd-title { font-family:var(--font-main); font-size:15px; font-weight:700; color:var(--gold-light); letter-spacing:1px; }
.fzd-sub { font-size:11px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:6px; }
.fzd-locked-tag { background:rgba(200,30,30,0.2); border:1px solid #804040; color:#ff8080; padding:4px 10px; border-radius:4px; font-size:12px; font-weight:700; }

.farm-dungeon-banner {
  background: linear-gradient(90deg, rgba(80,30,140,0.55), rgba(50,20,90,0.4));
  border-left: 4px solid #b070ff;
  padding: 12px 16px;
  font-size: 13px;
  color: #ffffff;
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.farm-dungeon-banner b { color: #ffd060; font-weight: 800; }
.farm-dungeon-sub { font-size: 11.5px; color: #d8c8e8; opacity: 1; }
.farm-dungeon-rooms-count { color: #1a1408 !important; background: #ffb060 !important; border: none !important; }

.fzd-body { display:flex; gap:0; flex:1; overflow:hidden; }
.fzd-left { flex:1; padding:14px 16px; overflow-y:auto; border-right:1px solid var(--border-dark); min-width:0; }
.fzd-right { width:240px; flex-shrink:0; padding:14px 14px; overflow-y:auto; background:rgba(0,0,0,0.08); }
.fzd-locked-msg { color:var(--text-muted); font-size:13px; padding:20px 0; text-align:center; }

.farm-section-title { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }

.fmd-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.fmd-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:10px; display:flex; flex-direction:column; align-items:center; text-align:center; width:110px; position:relative; transition:border-color 0.15s; }
.fmd-card:hover { border-color:var(--gold); }
.fmd-card.is-boss { border-color:#c896ff; background:rgba(168,96,255,0.08); }
.fmd-img-wrap { position:relative; width:64px; height:64px; margin-bottom:8px; }
.fmd-img { width:64px; height:64px; object-fit:contain; }
.fmd-boss-badge { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background:#8040cc; color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.fmd-name { font-size:12px; font-weight:700; color:var(--text); margin-bottom:2px; }
.fmd-bname { font-size:11px; color:#b090d0; font-style:italic; margin-bottom:2px; }
.fmd-lvl { font-size:11px; background:#3a2808; color:var(--gold); padding:2px 6px; border-radius:10px; border:1px solid var(--gold); display:inline-block; }

.farm-drops-details { margin-top:6px; }
.farm-drops-summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--gold); padding:6px 0; list-style:none; display:flex; align-items:center; gap:6px; }
.farm-drops-summary::-webkit-details-marker { display:none; }
.farm-drops-list { margin-top:4px; }
.farm-drop-row { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:4px; transition:background 0.1s; }
.farm-drop-row:hover { background:rgba(255,255,255,0.05); }
.farm-drop-row.equip-drop { background:rgba(200,168,32,0.05); }
.farm-drop-icon { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.farm-drop-icon img { width:28px; height:28px; object-fit:contain; }
.farm-drop-name { flex:1; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.farm-drop-qty { font-size:11px; color:#60c840; font-weight:700; white-space:nowrap; }
.farm-drop-rate { font-size:11px; color:#60c840; font-weight:700; background:rgba(40,120,30,0.25); padding:2px 6px; border-radius:3px; white-space:nowrap; }
.farm-drop-rate.equip { color:#e0c040; background:rgba(180,140,20,0.2); }

.farm-send-list { display:flex; flex-direction:column; gap:6px; }
.farm-send-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:5px; background:var(--bg-card); border:1px solid var(--border); transition:border-color 0.15s; }
.farm-send-row.here { border-color:#50a030; background:rgba(50,160,30,0.1); }
.farm-send-avatar { width:32px; height:32px; object-fit:contain; background:var(--bg-slot); border-radius:4px; }
.farm-send-info { flex:1; min-width:0; }
.farm-send-name { font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.farm-send-class { font-size:11px; color:var(--text-muted); }
.farm-send-empty { font-size:12px; color:var(--text-muted); padding:8px 0; font-style:italic; }
.farm-btn-send { padding:5px 10px; background:var(--gold); color:#1a1008; font-size:11px; font-weight:700; border:none; border-radius:4px; cursor:pointer; white-space:nowrap; transition:background 0.15s; }
.farm-btn-send:hover { background:var(--gold-light); }
.farm-btn-here { padding:5px 10px; background:transparent; color:#60d040; font-size:11px; font-weight:700; border:1px solid #50a030; border-radius:4px; cursor:pointer; white-space:nowrap; }
.farm-btn-here:hover { background:rgba(60,160,40,0.15); }

.farm-group-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg-card); margin-bottom:6px; }
.farm-group-row.active { border-color:var(--gold); background:rgba(184,120,8,0.08); }
.farm-group-name { font-size:12px; font-weight:700; flex-shrink:0; }
.farm-group-members { flex:1; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   PREMIUM UI — Character Ranking + Dungeon Key + Global Polish
   ============================================================ */

/* Global premium font size bump */
body { font-size: 15px; }

/* ─── Character Ranking ─────────────────────────────────── */
.char-rank-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-dark);
}
.char-rank-label { font-size: 12px; color: var(--text-muted); margin-right: 4px; }
.char-rank-btn {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.char-rank-btn:hover { border-color: var(--gold); color: var(--gold); }
.char-rank-btn.active { background: var(--gold); color: #1a1008; border-color: var(--gold); font-weight: 700; }

.chars-ranking { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; }

.char-rank-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-card) 100%);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.char-rank-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border-dark);
  transition: background 0.15s;
}
.char-rank-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(184,120,8,0.2); transform: translateY(-1px); }
.char-rank-card:hover::before { background: var(--gold); }
.char-rank-card.selected { border-color: var(--gold); }
.char-rank-card.selected::before { background: var(--gold-light); }

.char-rank-badge { font-size: 22px; min-width: 36px; text-align: center; }

.char-rank-avatar-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.char-rank-avatar { width: 52px; height: 52px; object-fit: contain; background: var(--bg-slot); border-radius: 6px; }
.char-rank-active-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #50d030;
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  box-shadow: 0 0 6px #50d030;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green { 0%,100%{box-shadow:0 0 6px #50d030} 50%{box-shadow:0 0 12px #80ff60} }

.char-rank-info { min-width: 140px; }
.char-rank-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.char-rank-pts { display: inline-block; background: var(--gold); color: #1a1008; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.char-rank-class { font-size: 12px; margin-bottom: 2px; }
.char-rank-level { font-size: 13px; color: var(--text-muted); }
.char-rank-level strong { font-size: 18px; color: var(--gold-light); }

.char-rank-bars { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.char-rank-bar-row { display: flex; align-items: center; gap: 8px; }
.char-rank-bar-lbl { font-size: 13px; width: 20px; }
.char-rank-bar { flex: 1; height: 8px; background: var(--bg-slot); border-radius: 4px; overflow: hidden; }
.char-rank-bar div { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.char-rank-bar-val { font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; }

.char-rank-stats { display: flex; gap: 14px; }
.char-rank-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; color: var(--text-muted); }
.char-rank-stat strong { font-size: 14px; color: var(--text); }

.char-rank-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.char-rank-status.farming { background: rgba(60,160,40,0.2); color: #80d060; border: 1px solid #406030; }
.char-rank-status.idle { background: rgba(100,90,70,0.3); color: var(--text-muted); border: 1px solid var(--border-dark); }

.char-rank-actions { display: flex; gap: 4px; }
.char-act-btn {
  width: 32px; height: 32px;
  background: var(--bg-slot);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.char-act-btn:hover { background: var(--bg-dark); border-color: var(--gold); }
.char-act-btn.danger:hover { background: rgba(200,30,30,0.3); border-color: #c02020; }

/* ─── Dungeon Key UI ─────────────────────────────────────── */
.farm-key-count { font-size: 11px; margin-top: 2px; }
.farm-key-count.has-key { color: #80d060; }
.farm-key-count.no-key { color: #c06060; }

.farm-btn-locked {
  padding: 5px 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  cursor: not-allowed;
  white-space: nowrap;
}

/* ─── Left nav premium ───────────────────────────────────── */
.nav-btn {
  font-size: 14px;
  padding: 9px 10px;
}
.nav-icon { font-size: 16px; }
.nav-label { font-size: 13px; }

.char-entry { padding: 8px 10px; gap: 8px; }
.char-name { font-size: 14px; font-weight: 700; }
.char-class { font-size: 12px; }

/* ─── Combat dashboard premium ───────────────────────────── */
.dash-titlebar { padding: 8px 14px; }
.dash-game-title { font-size: 15px; letter-spacing: 1px; }
.arena-char-name { font-size: 16px; font-weight: 700; }
.arena-char-class { font-size: 13px; margin-bottom: 4px; }
.arena-bar-label { font-size: 12px; }
.arena-zone-label { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; }
.arena-turn-badge { font-size: 13px; }
.arena-log-line { font-size: 12px; line-height: 1.5; }

.arena-monster-name { font-size: 11px; font-weight: 700; }
.arena-monster-vita { font-size: 10px; }

/* ─── Farm panel premium ─────────────────────────────────── */
.farm-section-title { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 12px; }
.fzd-title { font-size: 19px; letter-spacing: 1.5px; }
.fmd-name { font-size: 13px; }
.farm-drop-name { font-size: 13px; }
.farm-drop-rate { font-size: 12px; padding: 3px 8px; }

/* ─── Panel headers premium ─────────────────────────────── */
.panel-header h2 { font-size: 22px; }
.panel-header { padding: 16px 20px 14px; }

/* ─── Buttons premium ────────────────────────────────────── */
.btn-primary {
  font-size: 13px;
  padding: 8px 18px;
  letter-spacing: 0.3px;
}
.btn-secondary { font-size: 13px; padding: 7px 14px; }

/* ─── Dungeon banner premium ─────────────────────────────── */
.farm-dungeon-banner {
  font-size: 14px;
  padding: 12px 18px;
}

/* ─── History strip premium ──────────────────────────────── */
.dash-hist-item { font-size: 12px; padding: 5px 10px; }

/* ─── Spell Order UI ─────────────────────────────────────── */
.spell-order-box {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.spell-order-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--gold-light);
  margin-bottom: 8px;
  font-family: var(--font-main);
}
.spell-order-list { display: flex; flex-direction: column; gap: 4px; }
.spell-order-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 13px;
}
.spell-order-num {
  width: 18px; text-align: center;
  font-weight: 700; color: var(--text-muted); font-size: 11px;
}
.spell-order-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.spell-order-name { flex: 1; font-weight: 600; }
.spell-order-ap { font-size: 11px; color: var(--text-muted); }
.spell-order-btns { display: flex; gap: 2px; }
.spell-order-btn {
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  border-radius: 3px; padding: 1px 5px; cursor: pointer;
  font-size: 10px; color: var(--text); line-height: 1.4;
  transition: background 0.1s;
}
.spell-order-btn:hover { background: var(--gold); color: #fff; }
.spell-order-btn.disabled {
  opacity: 0.3; cursor: default; pointer-events: none;
}

/* ─── Farm drops redesign ────────────────────────────────── */
.farm-drops-section { margin-top: 14px; }
.farm-drops-header {
  font-size: 13px; font-weight: 700; color: var(--gold-light);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.farm-drops-count {
  background: var(--gold); color: #fff;
  border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.farm-drops-list {
  display: flex; flex-direction: column; gap: 2px;
}
.farm-drop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.04);
  transition: background 0.1s;
  font-size: 13px;
}
.farm-drop-row:hover { background: rgba(0,0,0,0.10); }
.farm-drop-row.equip-drop { background: rgba(184,120,8,0.08); }
.farm-drop-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.farm-drop-icon img { width: 24px; height: 24px; object-fit: contain; }
.drop-no-img { font-size: 10px; color: var(--text-muted); }
.farm-drop-name { flex: 1; }
.drop-equip-tag {
  font-size: 10px; background: rgba(184,120,8,0.2); color: var(--gold);
  border: 1px solid var(--gold); border-radius: 3px; padding: 0 4px;
  margin-left: 4px; vertical-align: middle;
}
.farm-drop-owned { font-size: 11px; color: #3a9a3a; font-weight: 700; }
.farm-drop-rate { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.farm-drop-rate.rate-high { background: rgba(40,180,40,0.2); color: #30c830; }
.farm-drop-rate.rate-mid  { background: rgba(230,130,20,0.2); color: #e87820; }
.farm-drop-rate.rate-low  { background: rgba(180,40,40,0.2); color: #c84040; }

/* ─── Monster card modal ─────────────────────────────────── */
.mc-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mc-box {
  background: var(--bg-panel);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  width: 100%; max-width: 720px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.mc-close {
  position: absolute; top: 10px; right: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border-dark);
  border-radius: 4px; color: #fff; cursor: pointer;
  width: 28px; height: 28px; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mc-close:hover { background: #c03020; }
.mc-header {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 20px;
  background: linear-gradient(180deg,#3e3830 0%,#2a2820 100%);
  border-bottom: 2px solid var(--border-dark);
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}
.mc-avatar-wrap { width: 80px; height: 80px; flex-shrink: 0; }
.mc-avatar { width: 100%; height: 100%; object-fit: contain; }
.mc-title-block { flex: 1; }
.mc-name { font-family: var(--font-main); font-size: 20px; font-weight: 700; color: var(--gold-light); }
.mc-level { font-size: 13px; color: #a89878; margin-top: 2px; }
.mc-vita-bar-wrap { margin-top: 8px; }
.mc-vita-label { font-size: 12px; color: #e84830; margin-bottom: 3px; }
.mc-vita-bar { height: 8px; background: #3a2a20; border-radius: 4px; overflow: hidden; width: 200px; }
.mc-body {
  display: flex; gap: 0; flex: 1; overflow: hidden;
}
.mc-stats-col {
  width: 220px; flex-shrink: 0; padding: 14px 16px;
  border-right: 1px solid var(--border-dark);
  overflow-y: auto;
}
.mc-drops-col { flex: 1; padding: 14px 16px; overflow-y: auto; }
.mc-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border-dark);
}
.mc-stat-row, .mc-elem-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-size: 13px; color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mc-elem-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 6px; }
.mc-elem-name { flex: 1; font-size: 12px; text-transform: capitalize; }
.mc-drop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mc-drop-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mc-drop-icon img { width: 24px; height: 24px; object-fit: contain; }
.mc-drop-name { flex: 1; }
.fmd-card { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.fmd-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ─── Sort order tags ────────────────────────────────────── */
.so-tag {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; border: 1px solid; flex-shrink: 0;
  text-transform: capitalize;
}
.so-tag.buff { background: rgba(100,100,200,0.15); color: #9090e0; border-color: #6060c055; }
.so-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.so-sub { font-size: 11px; color: var(--text-muted); }
.spell-order-btn-ph { width: 24px; display: inline-block; }

/* ─── Stats premium page ─────────────────────────────────── */
.stats-page {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
}
.stats-hero-card {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(135deg,#3e3830,#2a2820);
  border: 2px solid var(--border-dark);
  border-radius: 8px; padding: 16px 20px;
  flex-wrap: wrap;
}
.shc-avatar { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.shc-avatar img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; border: 2px solid var(--gold); background: #1a1810; }
.shc-farming-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #30c830; border: 2px solid #1a1810;
  animation: pulse-dot 1.5s infinite;
}
.shc-identity { min-width: 120px; }
.shc-name { font-family: var(--font-main); font-size: 20px; font-weight: 700; }
.shc-class { font-size: 13px; color: #a89878; margin-top: 2px; }
.shc-vitals { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.shc-bar-row { display: flex; align-items: center; gap: 8px; }
.shc-bar-label { font-size: 12px; color: #a89878; width: 30px; flex-shrink: 0; }
.shc-bar-track { flex: 1; height: 10px; background: rgba(0,0,0,0.4); border-radius: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.shc-bar-fill { height: 100%; border-radius: 5px; transition: width 0.3s; }
.shc-bar-val { font-size: 11px; color: #c8b888; white-space: nowrap; width: 120px; text-align: right; }
.shc-counters { display: flex; gap: 16px; flex-wrap: wrap; }
.shc-counter { text-align: center; min-width: 70px; }
.shc-counter-val { font-size: 18px; font-weight: 700; color: var(--gold-light); font-family: var(--font-main); }
.shc-counter-label { font-size: 10px; color: #a89878; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }

.stats-combat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.scr-card {
  flex: 1; min-width: 90px;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: 6px; padding: 10px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.scr-icon { font-size: 20px; }
.scr-val { font-size: 22px; font-weight: 700; color: var(--text); font-family: var(--font-main); }
.scr-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.scr-bar { width: 100%; height: 4px; background: var(--bg-slot); border-radius: 2px; overflow: hidden; margin-top: 4px; }

.stats-distrib-card {
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: 8px; overflow: hidden;
}
.sdc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(135deg,#4a4030,#3a3020);
  border-bottom: 1px solid var(--border-dark);
}
.sdc-title { font-family: var(--font-main); font-size: 16px; font-weight: 700; color: var(--gold-light); }
.sdc-pts-badge {
  background: rgba(40,180,40,0.2); color: #60c860;
  border: 1px solid rgba(40,180,40,0.4);
  border-radius: 12px; padding: 3px 12px; font-size: 13px; font-weight: 700;
}
.sdc-pts-badge.spent { background: rgba(0,0,0,0.2); color: var(--text-muted); border-color: transparent; }
.sdc-grid { padding: 8px 0; }
.sdc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.1s;
}
.sdc-row:hover { background: rgba(184,120,8,0.05); }
.sdc-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.sdc-name { width: 100px; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.sdc-vals { display: flex; align-items: center; gap: 6px; width: 90px; flex-shrink: 0; }
.sdc-base { font-size: 16px; font-weight: 700; }
.sdc-eq { font-size: 12px; color: #3a9a3a; font-weight: 700; }
.sdc-total { font-size: 16px; font-weight: 700; }
.sdc-bracket { flex: 1; font-size: 11px; color: var(--text-muted); }
.sdc-btns { display: flex; gap: 4px; flex-shrink: 0; }
.sdb {
  padding: 4px 8px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border-dark); border-radius: 4px;
  cursor: pointer; background: var(--bg-slot); color: var(--text-muted);
  transition: all 0.12s;
}
.sdb.can { background: var(--bg-card); color: var(--text); border-color: var(--gold); }
.sdb.can:hover { background: var(--gold); color: #fff; }
.sdb:disabled { opacity: 0.35; cursor: default; }
.sdb.big.can { background: rgba(184,120,8,0.15); border-color: var(--gold); }
.sdc-hp-setting {
  padding: 14px 18px;
  border-top: 1px solid var(--border-dark);
  background: rgba(0,0,0,0.04);
}
.sdc-setting-label { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.sdc-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.sdc-slider-row input[type=range] { flex: 1; }
.sdc-slider-val { font-weight: 700; font-size: 16px; width: 44px; text-align: right; }
.sdc-setting-hint { font-size: 11px; color: var(--text-muted); }

/* ─── Spellbook ──────────────────────────────────────────── */
.spellbook-page {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.sb-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border-dark);
  background: linear-gradient(135deg,#3e3220,#2a2818);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.sb-title { font-family: var(--font-main); font-size: 18px; font-weight: 700; color: var(--gold-light); }
.sb-pts-badge {
  background: rgba(40,180,40,0.2); color: #60e860;
  border: 1px solid rgba(40,180,40,0.4);
  border-radius: 12px; padding: 3px 12px; font-size: 13px; font-weight: 700;
  margin-left: auto;
}
.sb-body {
  display: flex; flex: 1; overflow: hidden;
}
.sb-left {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column; overflow: hidden;
}
.sb-left-top { padding: 12px; border-bottom: 1px solid var(--border-dark); }
.sb-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.sb-spell-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sb-spell-slot {
  width: 48px; height: 48px;
  border: 2px solid var(--border-dark); border-radius: 6px;
  background: var(--bg-slot); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; transition: all 0.15s;
}
.sb-spell-slot:hover { border-color: var(--gold); transform: scale(1.05); }
.sb-spell-slot.selected { border-color: var(--gold); box-shadow: 0 0 8px rgba(184,120,8,0.5); }
.sb-spell-slot.locked { opacity: 0.35; filter: grayscale(1); cursor: not-allowed; }
.sb-spell-slot.buff { border-color: #6060a0; }
.sb-spell-slot.buff.selected { border-color: #9090e0; box-shadow: 0 0 8px rgba(120,120,220,0.5); }
.sb-spell-slot img { width: 42px; height: 42px; object-fit: contain; }
.sb-spell-lv {
  position: absolute; bottom: 0; right: 0;
  background: rgba(0,0,0,0.75); color: var(--gold-light);
  font-size: 9px; font-weight: 700; padding: 1px 3px; border-radius: 3px 0 0 0;
}
.sb-left-bottom { flex: 1; overflow-y: auto; padding: 12px; }
.sb-order-list { display: flex; flex-direction: column; gap: 4px; }
.sb-order-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px;
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  cursor: pointer; transition: all 0.12s;
}
.sb-order-row:hover { border-color: var(--gold); }
.sb-order-row.active { background: rgba(184,120,8,0.1); border-color: var(--gold); }
.sb-order-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #1a1408; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sb-order-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.sb-order-name { flex: 1; font-size: 13px; font-weight: 600; }
.sb-order-lv { font-size: 11px; color: var(--text-muted); }
.sb-order-move { display: flex; flex-direction: column; gap: 2px; }
.sb-mv-btn {
  background: transparent; border: 1px solid var(--border-dark); border-radius: 3px;
  color: var(--text-muted); cursor: pointer; font-size: 9px;
  padding: 1px 4px; line-height: 1; transition: all 0.1s;
}
.sb-mv-btn:hover { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.sb-right {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.sd-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 14px;
  flex-direction: column; gap: 8px;
}
.sd-spell-header {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg,#3a3020,#2a2018);
  border: 1px solid var(--border-dark); border-radius: 8px; padding: 16px;
}
.sd-spell-img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.sd-spell-info { flex: 1; }
.sd-spell-name { font-family: var(--font-main); font-size: 20px; font-weight: 700; color: var(--gold-light); }
.sd-spell-meta { font-size: 12px; color: #a89878; margin-top: 2px; }
.sd-spell-desc { font-size: 13px; color: var(--text); margin-top: 8px; line-height: 1.5; }
.sd-spell-upgrade { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.sd-spell-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg,#b07808,#7a4a08);
  border: 1px solid var(--gold); border-radius: 6px; cursor: pointer;
  color: #ffe8a0; transition: all 0.15s;
}
.sd-spell-btn:hover { background: linear-gradient(135deg,#d09010,#904808); }
.sd-spell-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sd-spell-btn.locked { background: rgba(60,60,120,0.2); border-color: #6060a0; color: #9090d0; }
.sd-current-lv {
  background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 6px;
  padding: 12px 16px;
}
.sd-lv-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.sd-stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 6px; }
.sd-stat-chip {
  background: var(--bg-slot); border: 1px solid var(--border-dark); border-radius: 5px;
  padding: 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sd-stat-chip-val { font-size: 16px; font-weight: 700; color: var(--text); }
.sd-stat-chip-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.sd-prog-table {
  background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 6px; overflow: hidden;
}
.sd-prog-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); padding: 8px 14px; border-bottom: 1px solid var(--border-dark); }
.sd-prog-row {
  display: flex; align-items: center;
  padding: 6px 14px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 13px;
  transition: background 0.1s;
}
.sd-prog-row:hover { background: rgba(184,120,8,0.04); }
.sd-prog-row.current { background: rgba(184,120,8,0.1); color: var(--gold-light); font-weight: 700; }
.sd-prog-row.locked-row { color: var(--text-muted); }
.sd-prog-lv { width: 50px; font-weight: 700; }
.sd-prog-req { width: 80px; font-size: 12px; color: var(--text-muted); }
.sd-prog-dmg { flex: 1; }
.sd-prog-cost { width: 60px; text-align: right; font-size: 12px; color: #a89878; }

/* ─── Inventory + Equipment merged ──────────────────────── */
.inv-eq-page {
  display: flex; height: 100%; overflow: hidden;
}
.inv-eq-left {
  width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column; overflow-y: auto;
  background: linear-gradient(180deg,#2a2010 0%,#1a1408 100%);
}
.inv-char-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border-dark);
  background: linear-gradient(135deg,#3a3020,#2a2018);
  display: flex; align-items: center; gap: 10px;
}
.inv-char-class-icon { font-size: 24px; }
.inv-char-name { font-family: var(--font-main); font-size: 16px; font-weight: 700; color: var(--gold-light); }
.inv-char-level { font-size: 12px; color: #a89878; }
.paperdoll-new {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 6px; padding: 10px;
  align-items: start;
}
.pd-col {
  display: flex; flex-direction: column; gap: 5px;
}
.pd-center {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  background: radial-gradient(ellipse at center, rgba(184,120,8,0.12) 0%, transparent 70%);
  border-radius: 8px;
}
.pd-char-img { width: 90px; height: auto; object-fit: contain; image-rendering: pixelated; }
.pd-slot {
  width: 52px; height: 52px;
  border: 2px solid var(--border-dark);
  border-radius: 5px;
  background: linear-gradient(135deg,#3a2e1a,#2a2010);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
  transition: all 0.12s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.pd-slot.empty { background: linear-gradient(135deg,#2a2418,#1f1a10); }
.pd-slot.filled { border-color: #8a6028; background: linear-gradient(135deg,#4a3a20,#2a2010); }
.pd-slot:hover { border-color: var(--gold); transform: scale(1.05); z-index: 5; }
.pd-slot img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.pd-label {
  display: none;
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: rgba(10,8,4,0.95); color: var(--gold-light);
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border: 1px solid var(--border-dark); border-radius: 4px;
  white-space: nowrap; pointer-events: none; z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.pd-slot:hover .pd-label { display: block; }
.pd-empty-icon {
  font-size: 22px; color: rgba(184,120,8,0.35); font-weight: 300;
}
.pd-slot:hover .pd-empty-icon { color: var(--gold); }
.pd-unequip {
  display: none;
  position: absolute; top: 1px; right: 2px;
  background: rgba(192,40,30,0.85); color: #fff;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 9px; line-height: 14px; text-align: center;
  font-weight: 700;
}
.pd-slot.filled:hover .pd-unequip { display: block; }
.pd-slot.sm { width: 40px; height: 40px; border-radius: 50%; }
.pd-slot.sm img { width: 32px; height: 32px; }
.pd-dofus-row {
  display: flex; gap: 4px; padding: 0 8px 8px;
  flex-wrap: wrap; justify-content: center;
}
.pd-dofus-slot {
  width: 34px; height: 34px;
  border: 1px solid var(--border-dark); border-radius: 50%;
  background: var(--bg-slot);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; transition: border-color 0.12s;
}
.pd-dofus-slot:hover { border-color: #e8a820; }
.pd-dofus-slot img { width: 28px; height: 28px; object-fit: contain; }
.inv-eq-stats {
  padding: 8px 14px;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
.ies-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ies-label { color: var(--text-muted); }
.ies-val { font-weight: 700; color: var(--text); }
.inv-eq-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.inv-filter-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-dark); flex-wrap: wrap; flex-shrink: 0;
}
.inv-filter-btn {
  padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  color: var(--text-muted); cursor: pointer; transition: all 0.12s;
}
.inv-filter-btn:hover, .inv-filter-btn.active {
  background: rgba(184,120,8,0.15); border-color: var(--gold); color: var(--gold-light);
}
.inv-grid-wrap { flex: 1; overflow-y: auto; padding: 10px 12px; }
.inv-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(52px,1fr)); gap: 5px;
}
.inv-slot {
  aspect-ratio: 1/1; background: var(--bg-slot);
  border: 2px solid var(--border-dark); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.inv-slot:hover { border-color: var(--gold); box-shadow: 0 0 5px rgba(184,120,8,0.3); }
.inv-slot.selected { border-color: #4af; box-shadow: 0 0 5px rgba(60,160,255,0.4); }
.inv-slot img { width: 80%; height: 80%; object-fit: contain; }
.inv-slot-qty {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 9px; font-weight: 700; color: #fff;
  text-shadow: 0 0 3px #000;
}
.inv-item-detail {
  border-top: 1px solid var(--border-dark);
  padding: 10px 14px; background: var(--bg-card);
  flex-shrink: 0; max-height: 180px; overflow-y: auto;
}

/* ─── Farm drops grid ────────────────────────────────────── */
.farm-drops-section { padding: 10px 0; }
.farm-drops-header {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.farm-drops-count {
  background: rgba(184,120,8,0.2); border: 1px solid var(--gold);
  color: var(--gold-light); border-radius: 10px; padding: 0 7px;
  font-size: 11px; font-weight: 700;
}
.farm-drops-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fdrop-slot {
  width: 54px; height: 54px; position: relative;
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  border-radius: 5px; cursor: default; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.12s;
}
.fdrop-slot:hover { border-color: var(--gold); z-index: 10; }
.fdrop-img { width: 36px; height: 36px; object-fit: contain; }
.fdrop-no-img { font-size: 18px; }
.fdrop-owned {
  /* v126.23 — Badge owned compact top-right (force) */
  position: absolute !important;
  top: -6px !important; right: -6px !important;
  left: auto !important; bottom: auto !important;
  background: linear-gradient(135deg, #80c850, #408020) !important;
  color: #fff !important;
  font-size: 10px !important; font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  border: 1.5px solid #1a1208 !important;
  z-index: 5 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-block !important;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  line-height: 1.2;
}
.fdrop-rate {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 9px; font-weight: 700; padding: 1px 3px;
  border-radius: 3px; background: rgba(0,0,0,0.6);
}
.fdrop-rate.rate-high { color: #6fd86f; }
.fdrop-rate.rate-mid  { color: #e8c858; }
.fdrop-rate.rate-low  { color: #e87040; }
.fdrop-tooltip {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  background: rgba(10,8,4,0.95); border: 1px solid var(--border-dark);
  border-radius: 5px; padding: 6px 10px; width: 160px;
  font-size: 12px; color: var(--text); z-index: 200;
  white-space: normal; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.fdrop-slot:hover .fdrop-tooltip { display: block; }
.fdrop-tooltip-name { font-weight: 700; color: var(--gold-light); margin-bottom: 3px; }
.fdrop-tooltip-rate { color: #a89878; }

/* ─── Almanax page ───────────────────────────────────────── */
.almanax-page {
  display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; height: 100%;
  box-sizing: border-box;
}
.almanax-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg,#3e3220,#2a2010);
  border: 1px solid var(--border-dark); border-radius: 8px;
}
.almanax-icon-wrap { font-size: 32px; }
.almanax-icon { font-size: 32px; }
.almanax-title { font-family: var(--font-main); font-size: 22px; font-weight: 700; color: var(--gold-light); letter-spacing: 2px; }
.almanax-date { font-size: 13px; color: #a89878; margin-top: 2px; text-transform: capitalize; }
.almanax-today-card {
  border: 2px solid; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  background: var(--bg-card);
}
.almanax-today-top {
  padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(135deg,#3a3020,#2a2018);
}
.almanax-today-icon {
  font-size: 48px; flex-shrink: 0; width: 70px; height: 70px;
  border: 2px solid; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.almanax-today-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.almanax-today-name { font-family: var(--font-main); font-size: 22px; font-weight: 700; }
.almanax-today-desc { font-size: 13px; color: var(--text); margin-top: 6px; line-height: 1.5; }
.almanax-effect-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border: 1px solid;
  margin: 0 16px 12px;
  border-radius: 6px; margin-top: 12px;
}
.almanax-effect-value { font-size: 20px; font-weight: 700; font-family: var(--font-main); }
.almanax-effect-type { font-size: 13px; color: var(--text-muted); }
.almanax-tribute {
  padding: 10px 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.almanax-tribute-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.almanax-tribute-item { font-size: 14px; font-weight: 600; color: var(--gold-light); }
.almanax-week { }
.almanax-week-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.almanax-week-list { display: flex; flex-direction: column; gap: 4px; }
.almanax-week-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 6px;
  transition: border-color 0.12s;
}
.almanax-week-row.today { border-color: var(--gold); background: rgba(184,120,8,0.08); }
.almanax-week-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.almanax-week-info { flex: 1; }
.almanax-week-date { font-size: 12px; color: var(--text-muted); text-transform: capitalize; display: flex; align-items: center; gap: 6px; }
.almanax-week-name { font-size: 14px; font-weight: 700; margin-top: 2px; }
.almanax-week-effect { font-size: 13px; font-weight: 700; white-space: nowrap; }
.alm-today-tag {
  background: var(--gold); color: #1a1408;
  border-radius: 8px; padding: 0 7px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.almanax-info {
  background: rgba(50,40,20,0.4); border: 1px solid rgba(184,120,8,0.2);
  border-radius: 6px; padding: 12px 16px;
}
.almanax-info-title { font-size: 13px; font-weight: 700; color: var(--gold-light); margin-bottom: 6px; }
.almanax-info-text { font-size: 13px; color: #a89878; line-height: 1.6; }

/* ─── Merged inventory+equipment — missing helpers ───────── */
.inv-eq-char-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border-dark);
  background: linear-gradient(135deg,#3a3020,#2a2018);
  display: flex; align-items: center; gap: 10px;
}
.inv-eq-avatar { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.inv-eq-name { font-family: var(--font-main); font-size: 16px; font-weight: 700; }
.inv-eq-class { font-size: 12px; color: #a89878; }
.inv-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0; flex-wrap: wrap; gap: 6px;
}
.inv-sel-bar {
  padding: 6px 12px; background: rgba(60,120,200,0.12);
  border-bottom: 1px solid rgba(60,120,200,0.25);
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  flex-shrink: 0;
}
/* Override inventory-grid inside merged panel to be fluid */
.inv-eq-right .inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 5px;
  background: transparent;
  border: none; border-radius: 0; padding: 10px 12px;
  box-shadow: none;
}
.inv-eq-right .inv-slot {
  width: auto; height: auto; aspect-ratio: 1/1;
}
.inv-eq-right .inv-slot img {
  width: 80%; height: 80%;
}
.item-detail-hint { font-size: 11px; color: var(--text-muted); text-align: center; }
.btn-xs {
  padding: 3px 8px; font-size: 11px; background: var(--bg-slot);
  border: 1px solid var(--border-dark); border-radius: 4px;
  color: var(--text-muted); cursor: pointer; transition: all 0.12s;
}
.btn-xs:hover { border-color: var(--gold); color: var(--gold-light); }

/* ─── Spellbook PREMIUM rewrite ──────────────────────────── */
.sb-header-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.sb-class-icon { width: 40px; height: 40px; object-fit: contain; }
.sb-char-name { font-family: var(--font-main); font-size: 18px; font-weight: 700; }
.sb-class-name { font-size: 12px; color: #a89878; margin-top: 1px; }
.sb-pts {
  font-size: 12px; font-weight: 700; padding: 6px 14px;
  border-radius: 14px; border: 1px solid var(--border-dark);
  background: var(--bg-slot); color: var(--text-muted);
  margin-left: auto;
}
.sb-pts.has-pts {
  background: linear-gradient(135deg, rgba(40,180,40,0.25), rgba(40,140,40,0.15));
  border-color: #40b840; color: #80e880;
  box-shadow: 0 0 8px rgba(64,184,64,0.3);
}

/* Spell grid — Dofus Retro grimoire feel */
.sb-spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
}
.sb-spell-slot {
  aspect-ratio: 1/1;
  position: relative; cursor: pointer;
  background: linear-gradient(135deg, #3a2e1a, #2a2010);
  border: 2px solid #5a4220; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: all 0.15s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
.sb-spell-slot:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(184,120,8,0.3), inset 0 1px 2px rgba(255,255,255,0.1);
  z-index: 5;
}
.sb-spell-slot.selected {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-light), 0 0 12px rgba(232,184,80,0.5);
}
.sb-spell-slot.locked { opacity: 0.4; filter: grayscale(0.8); cursor: not-allowed; }
.sb-spell-slot.buff { border-color: #5a5290; }
.sb-spell-img { width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.sb-spell-stars {
  position: absolute; bottom: 1px; left: 0; right: 0;
  text-align: center; font-size: 7px; letter-spacing: 0.5px;
  background: rgba(0,0,0,0.7); padding: 1px 0;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.sb-spell-lock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 18px; filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

/* Order list — premium drag-feel rows */
.sb-order-list { display: flex; flex-direction: column; gap: 3px; }
.sb-order-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 5px;
  background: linear-gradient(180deg, var(--bg-slot), #2a2418);
  border: 1px solid var(--border-dark);
  cursor: pointer; transition: all 0.12s;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03);
}
.sb-order-row:hover { border-color: var(--gold); background: linear-gradient(180deg, #3a3020, #2a2418); }
.sb-order-row.active {
  background: linear-gradient(180deg, rgba(184,120,8,0.18), rgba(184,120,8,0.08));
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(184,120,8,0.3);
}
.sb-order-num {
  width: 18px; height: 18px; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), #8a5808);
  color: #1a1408; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}
.sb-order-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; }
.sb-order-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-order-ap {
  font-size: 11px; font-weight: 700; color: #6cf;
  background: rgba(60,160,255,0.15); border: 1px solid rgba(60,160,255,0.3);
  border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}
.sb-order-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 5px; border-radius: 3px; border: 1px solid;
  flex-shrink: 0;
}
.sb-order-tag.dmg { color: #e88848; background: rgba(232,136,72,0.12); border-color: rgba(232,136,72,0.3); }
.sb-order-tag.buff { color: #9090e0; background: rgba(144,144,224,0.12); border-color: rgba(144,144,224,0.3); }
.sb-order-btns { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.sb-order-btn {
  background: var(--bg-slot); border: 1px solid var(--border-dark); border-radius: 3px;
  color: var(--text-muted); cursor: pointer; font-size: 8px;
  width: 18px; height: 11px; line-height: 1; padding: 0;
  transition: all 0.1s;
}
.sb-order-btn:hover { background: var(--gold); color: #1a1408; border-color: var(--gold); }

/* Detail panel */
.sb-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 14px; text-align: center;
}
.sb-pts-hint {
  margin-top: 16px; padding: 8px 16px;
  background: rgba(40,180,40,0.15); border: 1px solid rgba(40,180,40,0.4);
  border-radius: 6px; color: #80e880; font-weight: 700; font-size: 13px;
}

.spell-detail-card {
  display: flex; flex-direction: column; gap: 12px;
}
.sd-top {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #3a3020, #2a2018);
  border: 1px solid var(--border-dark); border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.sd-icon { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.sd-title-block { flex: 1; }
.sd-name { font-family: var(--font-main); font-size: 22px; font-weight: 700; color: var(--gold-light); margin-bottom: 2px; }
.sd-stars { font-size: 14px; letter-spacing: 1px; }
.sd-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sd-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 3px 9px;
  border-radius: 12px; border: 1px solid var(--border-dark);
  background: var(--bg-slot); color: var(--text-muted);
}
.sd-desc {
  background: rgba(40,32,18,0.4);
  border-left: 3px solid var(--gold);
  padding: 10px 14px; border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.5; color: var(--text); font-style: italic;
}
.sd-section {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  margin-top: 4px;
}
.sd-lvl-table {
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: 6px; overflow: hidden;
}
.sd-lvl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: background 0.1s;
}
.sd-lvl-row:last-child { border-bottom: none; }
.sd-lvl-row:hover { background: rgba(184,120,8,0.05); }
.sd-lvl-row.current {
  background: linear-gradient(90deg, rgba(184,120,8,0.18), rgba(184,120,8,0.05));
  font-weight: 700;
}
.sd-lvl-row.locked-row { color: var(--text-muted); opacity: 0.6; }
.sd-lvl-num { width: 70px; letter-spacing: 1px; color: var(--gold); }
.sd-lvl-dmg { flex: 1; font-weight: 700; }
.sd-lvl-ap { width: 60px; color: #6cf; font-size: 12px; }
.sd-lvl-req { width: 50px; font-size: 11px; color: var(--text-muted); }
.sd-cur-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: var(--gold); color: #1a1408;
  padding: 1px 6px; border-radius: 8px; letter-spacing: 0.5px;
}
.sd-upgrade { display: flex; justify-content: flex-end; margin-top: 4px; }
.sd-upgrade-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  background: var(--bg-slot); border: 1px solid var(--border-dark);
  border-radius: 8px; color: var(--text-muted); cursor: not-allowed;
  transition: all 0.15s;
}
.sd-upgrade-btn.can {
  background: linear-gradient(135deg, #b07808, #7a4a08);
  border-color: var(--gold); color: #ffe8a0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(184,120,8,0.4);
}
.sd-upgrade-btn.can:hover {
  background: linear-gradient(135deg, #d09010, #904808);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,120,8,0.5);
}
.sd-upgrade-cost {
  background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 10px;
  font-size: 11px;
}
.sd-locked-msg, .sd-maxed, .sd-blocked {
  text-align: center; padding: 12px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 700;
}
.sd-locked-msg { background: rgba(192,40,40,0.15); border: 1px solid rgba(192,40,40,0.3); color: #e88080; }
.sd-maxed { background: linear-gradient(135deg, rgba(232,184,80,0.2), rgba(184,120,8,0.15)); border: 1px solid var(--gold); color: var(--gold-light); }
.sd-blocked { background: rgba(60,60,120,0.2); border: 1px solid #6060a0; color: #9090d0; }

/* ─── Character Creation Premium ─────────────────────────── */
.char-create-page {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: linear-gradient(180deg, #1f1810 0%, #15100a 100%);
}
.cc-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #3e3220, #2a2010);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.cc-back { flex-shrink: 0; }
.cc-header-title { flex: 1; }
.cc-title-main {
  font-family: var(--font-main);
  font-size: 24px; font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cc-title-sub { font-size: 13px; color: #a89878; margin-top: 2px; font-style: italic; }

.cc-body {
  display: flex; gap: 16px;
  flex: 1; overflow: hidden;
  padding: 16px;
}
.cc-classes-col {
  width: 360px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}
.cc-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  padding-bottom: 6px; border-bottom: 1px solid var(--border-dark);
}
.cc-class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cc-class-card {
  position: relative; cursor: pointer;
  background: linear-gradient(160deg, #2e2418, #1f1812);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.18s;
  overflow: hidden;
}
.cc-class-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, var(--cls-color) 0%, transparent 60%);
  opacity: 0.08; pointer-events: none;
}
.cc-class-card:hover {
  border-color: var(--cls-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--cls-color);
}
.cc-class-card:hover::before { opacity: 0.18; }
.cc-class-card.selected {
  border-color: var(--cls-color);
  background: linear-gradient(160deg, #3a2e20, #2a2018);
  box-shadow: 0 0 0 2px var(--cls-color), 0 4px 16px rgba(0,0,0,0.5);
}
.cc-class-card.selected::before { opacity: 0.25; }
.cc-class-portrait {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.cc-class-portrait img {
  width: 56px; height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.cc-class-name {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.cc-class-elems-mini {
  display: flex; gap: 3px;
  position: relative; z-index: 1;
}
.cc-elem-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 4px currentColor, inset 0 1px 1px rgba(255,255,255,0.2);
  border: 1px solid rgba(0,0,0,0.4);
}

/* Detail column */
.cc-detail-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
}
.cc-detail-card {
  background: linear-gradient(180deg, #2a2018, #1f1810);
  border: 2px solid var(--border-dark);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
.cc-detail-card[style*="--cls-color"] {
  border-color: var(--cls-color, var(--border-dark));
}
.cc-detail-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-dark);
  position: relative;
}
.cc-detail-portrait {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.cc-detail-portrait img {
  width: 96px; height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.cc-detail-titles { flex: 1; }
.cc-detail-name {
  font-family: var(--font-main);
  font-size: 32px; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.cc-detail-role {
  font-size: 13px; color: #c8b888;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 2px; font-weight: 600;
}
.cc-detail-elems {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.cc-elem-badge {
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 14px;
  border: 1px solid;
  letter-spacing: 0.5px;
}

.cc-detail-body {
  padding: 16px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.cc-detail-desc {
  font-size: 14px; color: var(--text);
  line-height: 1.6; font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 12px;
}

.cc-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cc-stat-block {
  background: linear-gradient(180deg, var(--bg-slot), #2a2418);
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  padding: 10px 6px;
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.cc-stat-icon { font-size: 20px; }
.cc-stat-val {
  font-family: var(--font-main);
  font-size: 22px; font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.cc-stat-lbl {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.cc-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cc-info-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(40,32,18,0.3);
  border: 1px solid var(--border-dark);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 12px;
}
.cc-info-lbl {
  font-weight: 700; color: var(--gold);
  white-space: nowrap;
}

.cc-pros-cons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cc-pros, .cc-cons {
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid;
}
.cc-pros { background: rgba(40,180,40,0.08); border-color: rgba(40,180,40,0.3); }
.cc-cons { background: rgba(192,40,40,0.08); border-color: rgba(192,40,40,0.3); }
.cc-pc-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 4px;
}
.cc-pros .cc-pc-title { color: #80e880; }
.cc-cons .cc-pc-title { color: #e88080; }
.cc-pc-text { font-size: 12px; line-height: 1.4; color: var(--text); }

.cc-tip {
  background: linear-gradient(135deg, rgba(184,120,8,0.18), rgba(184,120,8,0.08));
  border: 1px solid rgba(184,120,8,0.4);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px; line-height: 1.5;
  color: #e8d8a8;
}

.cc-detail-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 30px;
  background: linear-gradient(180deg, #2a2018, #1f1810);
  border: 2px dashed var(--border-dark);
  border-radius: 10px;
  text-align: center;
}
.cc-empty-icon { font-size: 56px; opacity: 0.4; margin-bottom: 12px; }
.cc-empty-title {
  font-family: var(--font-main);
  font-size: 22px; font-weight: 700;
  color: var(--gold-light); margin-bottom: 6px;
}
.cc-empty-sub { color: var(--text-muted); font-size: 13px; }

/* Name input section */
.cc-name-section {
  background: linear-gradient(135deg, #3a3020, #2a2018);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(184,120,8,0.3) inset;
}
.cc-name-label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 8px;
}
.cc-name-input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 2px solid var(--border-dark);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 16px; font-weight: 600;
  color: var(--gold-light);
  outline: none;
  transition: all 0.15s;
  box-sizing: border-box;
}
.cc-name-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(184,120,8,0.3);
  background: rgba(0,0,0,0.5);
}
.cc-actions {
  display: flex; gap: 10px; margin-top: 12px;
}
.cc-btn-create {
  flex: 1;
  padding: 12px 20px;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, #d09010, #904808);
  border: 1px solid var(--gold-light);
  border-radius: 6px;
  color: #ffe8a0; cursor: pointer;
  transition: all 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 3px 10px rgba(184,120,8,0.4), inset 0 1px 1px rgba(255,255,255,0.2);
  letter-spacing: 0.5px;
}
.cc-btn-create:hover:not(:disabled) {
  background: linear-gradient(135deg, #f0a818, #b05810);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(184,120,8,0.5);
}
.cc-btn-create:disabled {
  opacity: 0.4; cursor: not-allowed;
  background: var(--bg-slot);
  color: var(--text-muted);
  border-color: var(--border-dark);
  box-shadow: none;
}

@media (max-width: 1100px) {
  .cc-class-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-classes-col { width: 280px; }
}

/* ─── Almanax PREMIUM ──────────────────────────────────────── */
.almx-page {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px; overflow-y: auto; height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg,#1a1208 0%, #0f0a04 100%);
}

/* ─── Hero Banner ─── */
.almx-banner {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  min-height: 90px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.almx-banner-glow {
  position: absolute; inset: 0;
  pointer-events: none;
}
.almx-banner-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
}
.almx-banner-left { flex: 1; }
.almx-banner-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase; margin-bottom: 6px;
}
.almx-banner-date {
  font-family: var(--font-main);
  font-size: 24px; font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 1px; text-transform: capitalize;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.almx-banner-countdown {
  font-size: 13px; color: #c8b888;
  margin-top: 6px;
}
.almx-banner-countdown b { color: var(--gold-light); font-weight: 700; }
.almx-banner-right {
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.almx-banner-icon {
  font-size: 64px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

/* ─── Today's Bonus Card ─── */
.almx-today {
  position: relative;
  background: linear-gradient(180deg, #2a2018, #1f1810);
  border: 2px solid;
  border-radius: 12px;
  overflow: hidden;
}
.almx-today-corner {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 14px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.almx-today-corner span {
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.almx-today-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  padding: 24px 28px;
}
.almx-today-icon-wrap {
  width: 180px; height: 180px;
  border: 3px solid;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}
.almx-today-icon {
  font-size: 90px;
  animation: almx-pulse 3s ease-in-out infinite;
}
@keyframes almx-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.almx-today-info { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.almx-today-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.almx-today-name {
  font-family: var(--font-main);
  font-size: 32px; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1.1;
  margin-top: 2px;
}
.almx-today-desc {
  font-size: 14px; color: var(--text);
  line-height: 1.6; font-style: italic;
  margin-top: 8px;
  border-left: 3px solid var(--gold);
  padding-left: 12px;
}
.almx-today-effects {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.almx-effect-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 2px solid;
  border-radius: 24px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.almx-effect-val {
  font-family: var(--font-main);
  font-size: 18px; font-weight: 800;
  letter-spacing: 0.5px;
}
.almx-effect-type {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600;
  border-left: 1px solid currentColor;
  padding-left: 10px;
  opacity: 0.85;
}

.almx-tribute-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.almx-tribute-block {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 14px;
  flex: 1; min-width: 200px;
}
.almx-tribute-icon { font-size: 20px; }
.almx-tribute-lbl {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}
.almx-tribute-val {
  font-size: 13px; font-weight: 700;
  color: var(--gold-light);
  margin-top: 1px;
}
.almx-status-block {
  display: flex; align-items: center; gap: 8px;
  background: rgba(40,180,40,0.12);
  border: 1px solid rgba(40,180,40,0.4);
  border-radius: 8px;
  padding: 8px 14px;
}
.almx-status-block.active {
  box-shadow: 0 0 12px rgba(40,180,40,0.3) inset;
}
.almx-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #40e840;
  box-shadow: 0 0 8px #40e840;
  animation: almx-blink 1.6s ease-in-out infinite;
}
@keyframes almx-blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.almx-status-text {
  font-size: 12px; font-weight: 700;
  color: #80e880;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ─── Sections ─── */
.almx-section {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 16px 18px;
}
.almx-section-head { margin-bottom: 12px; }
.almx-section-title {
  font-family: var(--font-main);
  font-size: 16px; font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}
.almx-section-sub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Calendar Grid ─── */
.almx-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.almx-cal-day {
  position: relative;
  background: linear-gradient(180deg, #2a2018, #1f1812);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  cursor: default;
  transition: all 0.15s;
  overflow: hidden;
}
.almx-cal-day::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--day-color, transparent) 0%, transparent 50%);
  opacity: 0.08; pointer-events: none;
}
.almx-cal-day:hover {
  transform: translateY(-3px);
  border-color: var(--day-color);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px var(--day-color);
  z-index: 5;
}
.almx-cal-day:hover::before { opacity: 0.18; }

.almx-cal-day.today {
  border-color: var(--gold);
  background: linear-gradient(180deg, #3a2e1a, #2a2018);
  box-shadow: 0 0 0 2px var(--gold-light), 0 0 16px rgba(184,120,8,0.4);
}
.almx-cal-day.rarity-legendary { border-top: 3px solid #ff8030; }
.almx-cal-day.rarity-rare      { border-top: 3px solid #9060e0; }
.almx-cal-day.rarity-common    { border-top: 3px solid #60a060; }

.almx-cal-date {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.almx-cal-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  margin: 2px 0;
}
.almx-cal-name {
  font-size: 11px; font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  min-height: 26px;
}
.almx-cal-effect {
  font-size: 11px; font-weight: 700;
  color: var(--gold-light);
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 2px 4px;
  margin-top: 2px;
}
.almx-cal-today-tag {
  position: absolute; top: 4px; right: 4px;
  background: var(--gold);
  color: #1a1408;
  font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Info cards ─── */
.almx-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.almx-info-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(50,40,20,0.4);
  border: 1px solid rgba(184,120,8,0.2);
  border-radius: 8px;
  padding: 12px 14px;
}
.almx-info-icon { font-size: 26px; flex-shrink: 0; }
.almx-info-title {
  font-size: 13px; font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 3px;
}
.almx-info-text {
  font-size: 12px; color: #a89878;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .almx-today-grid { grid-template-columns: 1fr; }
  .almx-today-icon-wrap { margin: 0 auto; width: 140px; height: 140px; }
  .almx-today-icon { font-size: 72px; }
  .almx-today-name { font-size: 26px; text-align: center; }
  .almx-today-eyebrow { text-align: center; }
  .almx-calendar { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .almx-calendar { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Grimoire (Spellbook) PREMIUM ───────────────────────── */
.grim-page {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: linear-gradient(180deg,#1a1208 0%, #0f0a04 100%);
}

/* Header */
.grim-header {
  position: relative; overflow: hidden;
  border-bottom: 2px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.grim-header-glow {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.grim-header-content {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  position: relative; z-index: 1;
}
.grim-header-portrait {
  width: 70px; height: 70px;
  border: 3px solid;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 16px rgba(0,0,0,0.4);
}
.grim-header-portrait img {
  width: 60px; height: 60px;
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.grim-header-titles { flex: 1; }
.grim-header-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase;
}
.grim-header-name {
  font-family: var(--font-main);
  font-size: 26px; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  line-height: 1.1;
  margin-top: 2px;
}
.grim-header-class {
  font-size: 13px; color: #c8b888;
  margin-top: 3px;
}
.grim-header-stats {
  display: flex; gap: 8px;
}
.grim-stat-pill {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  min-width: 76px;
}
.grim-stat-pill.has-pts {
  background: linear-gradient(135deg, rgba(40,180,40,0.25), rgba(40,140,40,0.15));
  border-color: #40b840;
  box-shadow: 0 0 12px rgba(64,184,64,0.3);
}
.grim-stat-val {
  font-family: var(--font-main);
  font-size: 18px; font-weight: 800;
  color: var(--gold-light);
  line-height: 1;
}
.grim-stat-pill.has-pts .grim-stat-val { color: #80e880; }
.grim-stat-lbl {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 3px;
}

/* Body */
.grim-body {
  display: flex; flex: 1; overflow: hidden;
}

/* Left column: spells + order */
.grim-left {
  width: 56%; flex-shrink: 0;
  border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 14px 16px;
  gap: 12px;
  background: linear-gradient(180deg,#1f1810 0%, #15100a 100%);
}
.grim-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 8px;
}
.grim-tab {
  background: var(--bg-slot);
  border: 1px solid var(--border-dark);
  border-radius: 6px 6px 0 0;
  padding: 6px 14px;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.grim-tab:hover { color: var(--gold-light); border-color: var(--gold); }
.grim-tab.active {
  background: linear-gradient(180deg, rgba(184,120,8,0.2), rgba(184,120,8,0.05));
  color: var(--gold-light);
  border-color: var(--gold);
  box-shadow: 0 -2px 8px rgba(184,120,8,0.2);
}
.grim-section-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
}
.grim-order-help {
  font-size: 11px; color: var(--text-muted);
  margin-top: 4px; font-style: italic;
}

/* Spell grid (book pages) */
.grim-spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.grim-spell {
  position: relative;
  background: linear-gradient(160deg, #3a2e1a, #2a2010);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 6px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: all 0.18s;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.04);
}
.grim-spell::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, var(--elem-color) 0%, transparent 70%);
  opacity: 0.1; pointer-events: none;
}
.grim-spell:hover {
  transform: translateY(-3px);
  border-color: var(--elem-color);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--elem-color);
  z-index: 5;
}
.grim-spell:hover::before { opacity: 0.18; }
.grim-spell.selected {
  border-color: var(--elem-color);
  box-shadow: 0 0 0 2px var(--elem-color), 0 4px 14px rgba(0,0,0,0.5);
  background: linear-gradient(160deg, #4a3820, #2e2218);
}
.grim-spell.selected::before { opacity: 0.25; }
.grim-spell.locked { opacity: 0.4; filter: grayscale(0.7); cursor: not-allowed; }
.grim-spell.maxed {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(184,120,8,0.3);
}
.grim-spell-frame {
  width: 64px; height: 64px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.grim-spell-img {
  width: 56px; height: 56px;
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.grim-spell-lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
}
.grim-spell-crown {
  position: absolute; top: -6px; right: -2px;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.grim-spell-bottom {
  text-align: center; width: 100%;
  position: relative; z-index: 1;
}
.grim-spell-stars {
  font-size: 11px; letter-spacing: 1px;
  color: var(--elem-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.grim-spell-name {
  font-size: 11px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Order list */
.grim-order-section {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.grim-order-list {
  display: flex; flex-direction: column; gap: 6px;
}
.grim-order {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--bg-slot), #2a2418);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--elem-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s;
}
.grim-order:hover {
  background: linear-gradient(180deg, #3a3020, #2a2418);
  border-color: var(--gold);
  border-left-color: var(--elem-color);
  transform: translateX(2px);
}
.grim-order.active {
  background: linear-gradient(180deg, rgba(184,120,8,0.18), rgba(184,120,8,0.06));
  border-color: var(--gold);
  border-left-color: var(--elem-color);
  box-shadow: 0 2px 8px rgba(184,120,8,0.2);
}
.grim-order-rank {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--gold), #8a5808);
  color: #1a1408;
  font-family: var(--font-main);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.4);
}
.grim-order-icon {
  width: 36px; height: 36px;
  object-fit: contain; image-rendering: pixelated;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.grim-order-info { flex: 1; min-width: 0; }
.grim-order-name {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grim-order-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.grim-order-ap {
  font-size: 10px; font-weight: 700;
  color: #6cf;
  background: rgba(60,160,255,0.15);
  border: 1px solid rgba(60,160,255,0.3);
  border-radius: 3px; padding: 1px 5px;
}
.grim-order-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px;
  border: 1px solid;
}
.grim-order-tag.dmg { color: var(--elem-color); background: rgba(255,255,255,0.04); border-color: var(--elem-color); }
.grim-order-tag.buff { color: #9090e0; background: rgba(144,144,224,0.1); border-color: #6060c0; }
.grim-order-lv {
  font-size: 10px; color: var(--text-muted);
  font-weight: 600;
}
.grim-order-pinned { font-size: 11px; }

.grim-order-arrows {
  display: flex; flex-direction: column; gap: 1px;
  flex-shrink: 0;
}
.grim-arrow {
  width: 22px; height: 14px;
  background: var(--bg-slot);
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 9px;
  padding: 0; line-height: 1;
  transition: all 0.1s;
}
.grim-arrow:hover:not(.disabled) {
  background: var(--gold); color: #1a1408; border-color: var(--gold);
}
.grim-arrow.disabled { opacity: 0.25; cursor: not-allowed; }

/* Right detail panel */
.grim-right {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  background: linear-gradient(180deg,#1a1208 0%, #15100a 100%);
}

/* ─── Premium Top Resource Bar ───────────────────────────── */
.dash-titlebar {
  display: flex; align-items: stretch; gap: 12px;
  padding: 6px 14px !important;
  height: auto !important; min-height: 56px;
  background: linear-gradient(180deg, #2a2010 0%, #1a1208 100%);
  border-bottom: 1px solid #3a3020 !important;
}

/* Logo */
.dash-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px;
  border-right: 1px solid var(--border-dark);
  flex-shrink: 0;
}
.dash-logo-crest {
  width: 38px; height: 38px;
  background: radial-gradient(circle, rgba(184,120,8,0.4), rgba(184,120,8,0.1));
  border: 2px solid var(--gold);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(184,120,8,0.3), inset 0 1px 1px rgba(255,255,255,0.15);
}
.dash-logo-text { display: flex; flex-direction: column; line-height: 1; }
.dash-logo-main {
  font-family: var(--font-main);
  font-size: 16px; font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dash-logo-sub {
  font-size: 9px; font-weight: 800;
  letter-spacing: 4px; color: var(--gold);
  margin-top: 3px;
}

/* Resources strip */
.dash-resources {
  display: flex; align-items: center; gap: 4px;
  flex: 1; overflow-x: auto;
  scrollbar-width: none;
}
.dash-resources::-webkit-scrollbar { display: none; }
.dash-res {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  cursor: default;
  transition: all 0.14s;
  flex-shrink: 0;
}
.dash-res:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(40,30,20,0.4), rgba(20,16,8,0.6));
  transform: translateY(-1px);
}
.dash-res-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.dash-res-info { display: flex; flex-direction: column; line-height: 1; }
.dash-res-val {
  font-family: var(--font-main);
  font-size: 14px; font-weight: 800;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dash-res-lbl {
  font-size: 9px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Actions */
.dash-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.dash-almanax-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(184,120,8,0.18), rgba(184,120,8,0.08));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s;
  color: var(--text);
}
.dash-almanax-btn:hover {
  background: linear-gradient(135deg, rgba(184,120,8,0.3), rgba(184,120,8,0.15));
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(184,120,8,0.3);
}
.dash-alm-icon { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.dash-alm-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.dash-alm-name {
  font-size: 11px; font-weight: 700;
  color: var(--gold-light);
  white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}
.dash-alm-effect {
  font-size: 10px; font-weight: 800;
  color: var(--gold);
  margin-top: 2px;
}

/* Hide legacy kamas display */
.dash-kamas { display: none !important; }

/* ════════════════════════════════════════════════════════
   ALMANAX PREMIUM v2 — rareté, lueurs, animations
   ════════════════════════════════════════════════════════ */

.almanax-page {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(184,120,8,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(120,80,184,0.1) 0%, transparent 50%),
    linear-gradient(180deg, #1a1408 0%, #0f0a04 100%);
}

.almanax-header {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4a3a1e 0%, #2a2010 100%);
  border: 1px solid #6a5028;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 4px 18px rgba(0,0,0,0.4);
}
.almanax-header::before {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,200,80,0.08) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: shimmer 8s linear infinite;
  pointer-events: none;
}
@keyframes shimmer { from { background-position: -100% 0; } to { background-position: 200% 0; } }

.almanax-icon, .almanax-icon-wrap {
  font-size: 36px;
  filter: drop-shadow(0 2px 8px rgba(232,200,80,0.5));
  animation: float-icon 4s ease-in-out infinite;
}
@keyframes float-icon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.almanax-title {
  font-size: 26px;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  font-weight: 800;
}

/* Today card — premium gold-framed */
.almanax-today-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(60,46,22,0.95) 0%, rgba(30,22,12,0.95) 100%),
    radial-gradient(ellipse at top, rgba(255,200,80,0.1), transparent);
  border-width: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 8px 28px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.5);
}
.almanax-today-card::before {
  content:''; position: absolute; inset: -2px;
  border-radius: 12px; pointer-events: none;
  background: linear-gradient(135deg, transparent 40%, rgba(255,220,120,0.3) 50%, transparent 60%);
  background-size: 300% 300%;
  animation: card-shine 6s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes card-shine { 0%,100%{background-position:0% 0%} 50%{background-position:100% 100%} }

.almanax-today-top {
  position: relative;
  background: linear-gradient(135deg, #4a3a1e 0%, #2e2418 60%, #1f1810 100%) !important;
  padding: 20px 24px !important;
}
.almanax-today-icon {
  font-size: 56px !important;
  width: 96px !important; height: 96px !important;
  border-width: 3px !important;
  background: radial-gradient(circle, rgba(255,200,80,0.25), rgba(0,0,0,0.4)) !important;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.5),
    0 0 24px currentColor,
    0 4px 12px rgba(0,0,0,0.5);
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px currentColor, 0 4px 12px rgba(0,0,0,0.5); }
  50%     { box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 36px currentColor, 0 4px 12px rgba(0,0,0,0.5); }
}
.almanax-today-name {
  font-size: 26px !important;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px currentColor, 0 1px 2px rgba(0,0,0,0.7);
  font-weight: 800;
}
.almanax-today-label {
  font-size: 10px !important;
  letter-spacing: 3px !important;
}
.almanax-today-desc {
  font-size: 14px !important;
  font-style: italic;
  border-left: 2px solid currentColor;
  padding-left: 10px;
  opacity: 0.92;
  line-height: 1.6;
}

/* Multi-bonus effects bar — chip style */
.almanax-effect-bar {
  display: flex !important; flex-wrap: wrap !important;
  gap: 8px !important; padding: 12px 16px !important; margin: 12px 16px !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 8px !important;
  border-width: 1px !important;
}
.alm-effect-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 13px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}
.alm-effect-chip .chip-icon { font-size: 14px; }

/* Tribute — parchment style */
.almanax-tribute {
  background: linear-gradient(135deg, rgba(60,40,20,0.6), rgba(30,20,10,0.6));
  margin: 0 16px 16px !important;
  border-radius: 8px;
  padding: 12px 16px !important;
  border: 1px solid rgba(184,120,8,0.3);
}
.almanax-tribute-title {
  font-size: 10px !important; letter-spacing: 2px !important;
  color: var(--gold) !important;
}
.almanax-tribute-item {
  font-size: 15px !important;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Rarity badges */
.alm-rarity-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  border: 1px solid;
  z-index: 5;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.alm-rarity-badge.rar-legendary {
  background: linear-gradient(135deg, rgba(255,180,40,0.4), rgba(220,120,20,0.3));
  color: #ffe080; border-color: #ffc040;
  box-shadow: 0 0 14px rgba(255,180,40,0.5), 0 2px 8px rgba(0,0,0,0.4);
  animation: legendary-pulse 2s ease-in-out infinite;
}
@keyframes legendary-pulse {
  0%,100% { box-shadow: 0 0 14px rgba(255,180,40,0.5), 0 2px 8px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 24px rgba(255,180,40,0.8), 0 2px 8px rgba(0,0,0,0.4); }
}
.alm-rarity-badge.rar-rare {
  background: linear-gradient(135deg, rgba(120,140,255,0.3), rgba(80,80,200,0.2));
  color: #b0c8ff; border-color: #80a0e8;
  box-shadow: 0 0 8px rgba(120,140,255,0.3);
}
.alm-rarity-badge.rar-common {
  background: rgba(160,160,160,0.15);
  color: #c8c8c8; border-color: #808080;
}

.almanax-today-card.rar-legendary {
  border-color: #ffc040 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.4),
    0 8px 28px rgba(255,180,40,0.25),
    0 0 60px rgba(255,180,40,0.15);
}
.almanax-today-card.rar-rare {
  border-color: #80a0e8 !important;
  box-shadow:
    inset 0 1px 0 rgba(160,180,255,0.3),
    0 8px 28px rgba(80,100,200,0.2);
}

/* Week list — premium row cards */
.almanax-week-row {
  position: relative;
  background: linear-gradient(180deg, #2a2418, #1f1810) !important;
  transition: all 0.18s;
  padding: 10px 14px !important;
}
.almanax-week-row:hover {
  border-color: var(--gold);
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--gold), 0 4px 12px rgba(0,0,0,0.4);
}
.almanax-week-row.today {
  background: linear-gradient(135deg, rgba(184,120,8,0.18), rgba(184,120,8,0.05)) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 16px rgba(184,120,8,0.25), inset 0 0 0 1px rgba(184,120,8,0.4);
}
.almanax-week-row.rar-legendary { border-left: 3px solid #ffc040 !important; }
.almanax-week-row.rar-rare       { border-left: 3px solid #80a0e8 !important; }
.almanax-week-icon {
  font-size: 28px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.almanax-week-title {
  font-size: 12px !important; letter-spacing: 3px !important;
  display: flex; align-items: center; gap: 10px;
}
.almanax-week-title::before, .almanax-week-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.almanax-info {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(60,40,20,0.5), rgba(30,20,10,0.5)) !important;
  border: 1px solid rgba(184,120,8,0.3) !important;
}
.almanax-info::before {
  content:'📜'; position: absolute; top: -10px; right: 10px;
  font-size: 80px; opacity: 0.06; transform: rotate(-15deg);
}

/* ════════════════════════════════════════════════════════
   SPELLBOOK PREMIUM v2 — grimoire feel
   ════════════════════════════════════════════════════════ */
.spellbook-page {
  background:
    radial-gradient(ellipse at top, rgba(184,120,8,0.08), transparent 60%),
    linear-gradient(180deg, #1f1810 0%, #15100a 100%);
}
.sb-header {
  background: linear-gradient(135deg, #4a3a1e 0%, #2a2010 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 4px 18px rgba(0,0,0,0.4);
  padding: 14px 20px !important;
  border-bottom: 2px solid var(--gold) !important;
}
.sb-class-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
}
.sb-char-name {
  font-size: 20px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.sb-pts {
  font-size: 13px !important;
  padding: 8px 16px !important;
  letter-spacing: 0.5px;
}
.sb-pts.has-pts {
  animation: pts-pulse 2s ease-in-out infinite;
}
@keyframes pts-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(64,184,64,0.3); }
  50%     { box-shadow: 0 0 16px rgba(64,184,64,0.6); }
}

.sb-section-title {
  font-size: 11px !important; letter-spacing: 3px !important;
  display: flex; align-items: center; gap: 8px;
}
.sb-section-title::before {
  content: '◆'; color: var(--gold); font-size: 8px;
}

.sb-spell-slot {
  background: linear-gradient(135deg, #3e3220 0%, #2a2010 100%) !important;
}
.sb-spell-slot::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 4px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.sb-spell-slot.selected {
  background: linear-gradient(135deg, #6a5230 0%, #3a2c18 100%) !important;
  animation: spell-selected 1.5s ease-in-out infinite;
}
@keyframes spell-selected {
  0%,100% { box-shadow: 0 0 0 1px var(--gold-light), 0 0 12px rgba(232,184,80,0.4); }
  50%     { box-shadow: 0 0 0 1px var(--gold-light), 0 0 18px rgba(232,184,80,0.7); }
}

.sb-order-row {
  background: linear-gradient(180deg, #2e2418 0%, #1f1810 100%) !important;
  position: relative; overflow: hidden;
}
.sb-order-row::before {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(184,120,8,0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s;
}
.sb-order-row:hover::before { transform: translateX(100%); }
.sb-order-row.active {
  background: linear-gradient(180deg, rgba(184,120,8,0.22), rgba(184,120,8,0.06)) !important;
  border-left: 3px solid var(--gold) !important;
}

/* Spell detail premium */
.sd-top {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4a3a1e 0%, #2a2018 60%, #1f1810 100%) !important;
  padding: 18px 22px !important;
  border-width: 2px !important;
}
.sd-top::before {
  content:''; position: absolute; top:0; right:0; width:120px; height:120px;
  background: radial-gradient(circle, rgba(255,200,80,0.15), transparent 70%);
  pointer-events: none;
}
.sd-icon {
  width: 72px !important; height: 72px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  border-radius: 12px;
  padding: 4px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.sd-name {
  font-size: 26px !important;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.sd-stars { font-size: 16px !important; }
.sd-tag {
  background: rgba(0,0,0,0.4) !important;
  font-weight: 800 !important;
}
.sd-desc {
  background: linear-gradient(135deg, rgba(60,46,22,0.4), rgba(30,22,12,0.4)) !important;
  border-left-width: 4px !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
}

.sd-lvl-table {
  background: linear-gradient(180deg, #2a2418 0%, #1f1810 100%) !important;
  border-width: 1px !important;
}
.sd-lvl-row.current {
  background: linear-gradient(90deg, rgba(184,120,8,0.25) 0%, rgba(184,120,8,0.08) 100%) !important;
  font-weight: 700;
}
.sd-lvl-row.current::before {
  content: '▸'; color: var(--gold); margin-right: 4px;
  margin-left: -8px; font-weight: 900;
}

.sd-upgrade-btn.can {
  background: linear-gradient(135deg, #d09010 0%, #8a5808 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,220,120,0.4),
    0 4px 14px rgba(184,120,8,0.5);
  text-transform: uppercase; letter-spacing: 1px;
  font-size: 13px !important;
}
.sd-upgrade-btn.can:hover {
  background: linear-gradient(135deg, #f0a818 0%, #a86808 100%) !important;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════
   ARENA / DASHBOARD — combat top polish
   ════════════════════════════════════════════════════════ */
.dash-combat-arena {
  position: relative; overflow: hidden;
  border: 1px solid #4a3a1e;
  border-radius: 8px;
  margin: 0 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.1), 0 2px 8px rgba(0,0,0,0.3);
}
.dash-combat-arena::before {
  content:''; position: absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0%, transparent 49.9%, rgba(184,120,8,0.04) 50%, transparent 50.1%, transparent 100%);
  background-size: 40px 100%;
  pointer-events: none;
  mask: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
.arena-zone-label {
  font-family: var(--font-main, serif);
  font-size: 14px; font-weight: 800; letter-spacing: 2px;
  text-align: center;
  background: linear-gradient(180deg, #ffe89a, #c89030);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  text-transform: uppercase;
}
.arena-turn-badge {
  display: inline-block;
  padding: 3px 12px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(232,80,40,0.25), rgba(184,40,20,0.15));
  border: 1px solid rgba(232,80,40,0.5);
  font-size: 11px; font-weight: 800; color: #ffb088;
  letter-spacing: 1px;
  animation: turn-pulse 1.4s ease-in-out infinite;
}
@keyframes turn-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(232,80,40,0.3); }
  50%     { box-shadow: 0 0 14px rgba(232,80,40,0.6); }
}
.arena-monster-card {
  position: relative;
  background: linear-gradient(180deg, #3a2418, #1f1208);
  border: 1px solid #5a3018;
  border-radius: 6px;
  padding: 4px;
  transition: all 0.2s;
}
.arena-monster-card:not(.dead):hover {
  border-color: #e84030;
  box-shadow: 0 0 12px rgba(232,80,40,0.4);
  transform: translateY(-2px);
}
.arena-monster-card.dead {
  opacity: 0.4; filter: grayscale(0.8);
}
.arena-char-sprite.in-fight {
  animation: char-breathe 2s ease-in-out infinite;
}
@keyframes char-breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}

/* ════════════════════════════════════════════════════════
   ARENA DONJON v2 — match capture (parchment / stone floor)
   ════════════════════════════════════════════════════════ */
.dash-combat-arena {
  position: relative;
  background:
    linear-gradient(180deg, rgba(60,40,20,0.4) 0%, rgba(40,28,14,0.6) 50%, rgba(20,12,6,0.7) 100%),
    radial-gradient(ellipse at 50% 110%, rgba(180,130,60,0.25) 0%, transparent 60%);
  border: 1px solid #6a4818;
  border-radius: 10px;
  margin: 0 8px 8px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.15),
    inset 0 0 60px rgba(0,0,0,0.4),
    0 4px 14px rgba(0,0,0,0.4);
}

/* Header strip — donjon name, level, room counter */
.arena-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px;
  background: linear-gradient(180deg, #d8b070 0%, #b89058 60%, #9a7440 100%);
  border-bottom: 2px solid #6a4818;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.arena-header-left {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-main);
  color: #2a1a08;
}
.arena-header-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  background: rgba(60,40,20,0.85); color: #ffd890;
  padding: 3px 8px; border-radius: 4px;
}
.arena-header-name {
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  color: #5a3010;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.arena-header-lv {
  font-size: 12px; font-weight: 700; color: #6a4818;
}
.arena-room-badge {
  font-size: 11px; font-weight: 800;
  background: #2a1a08; color: #ffd890;
  padding: 3px 10px; border-radius: 12px;
  letter-spacing: 0.5px; margin-left: 6px;
}
.arena-room-badge.active {
  background: linear-gradient(135deg, #208030, #105020);
  color: #80f898; animation: arena-pulse 1.6s ease-in-out infinite;
}
@keyframes arena-pulse {
  0%,100% { box-shadow: 0 0 0 rgba(64,224,80,0.4); }
  50%     { box-shadow: 0 0 12px rgba(64,224,80,0.7); }
}
.arena-header-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.arena-hbtn {
  background: linear-gradient(180deg, #ffe890, #d8a040) !important;
  border: 2px solid #6a4818 !important; border-radius: 8px !important;
  padding: 7px 14px !important; font-size: 12px !important; font-weight: 900 !important;
  color: #2a1a08 !important; cursor: pointer; letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.5) !important;
  transition: transform 0.1s, filter 0.15s;
  white-space: nowrap;
  min-height: 32px;
}
.arena-hbtn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ffe0a0, #d8b070); }

/* Stage = horizontal row of fighters */
.arena-stage {
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 14px 18px 16px;
  min-height: 170px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(232,200,140,0.15) 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(0,0,0,0.06) 19px 20px),
    linear-gradient(180deg, transparent 0%, rgba(80,55,30,0.25) 100%);
}
.arena-stage::after {
  content:''; position: absolute; left: 50%; top: 30%; bottom: 12%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,200,120,0.15), transparent);
}
.arena-side {
  display: flex; gap: 6px; align-items: flex-end;
  flex: 1; min-width: 0;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.arena-side-players { justify-content: flex-start; }
.arena-side-monsters { justify-content: flex-end; }

.arena-divider {
  display: flex; align-items: center; justify-content: center;
  width: 40px; flex-shrink: 0;
}
.arena-vs {
  font-family: var(--font-main);
  font-size: 18px; font-weight: 900;
  color: #c8a060;
  text-shadow: 0 0 12px rgba(232,180,80,0.6), 0 2px 4px rgba(0,0,0,0.7);
  letter-spacing: 2px;
}
.arena-vs.idle { font-size: 24px; opacity: 0.5; }

/* Each fighter (char or monster) — sprite top, card below */
.arena-fighter {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform 0.15s;
  min-width: 95px; max-width: 130px;
  flex: 1 1 95px;
}
/* v215 — Petits écrans : densité plus haute (évite la troncature 1920×1080 avec 6+ chars/côté) */
@media (max-width: 1920px) {
  .arena-fighter { min-width: 88px; max-width: 110px; }
}
@media (max-width: 1600px) {
  .arena-fighter { min-width: 78px; max-width: 95px; }
}
.arena-fighter:hover { transform: translateY(-3px); }
.arena-fighter.dead { opacity: 0.45; filter: grayscale(0.8); cursor: default; }
.arena-fighter.dead:hover { transform: none; }
.arena-fighter.idle-monster { opacity: 0.7; cursor: default; }

.arena-sprite-wrap {
  display: flex; align-items: flex-end; justify-content: center;
  height: 90px; width: 100%;
  position: relative;
}
.arena-sprite {
  height: 88px; width: auto; max-width: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  image-rendering: pixelated;
}
.arena-sprite.breathing { animation: sprite-breathe 2.4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sprite-breathe {
  0%,100% { transform: scale(1) translateY(0); }
  50%     { transform: scale(1.04) translateY(-2px); }
}
.arena-sprite.idle { animation: sprite-idle 3.5s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sprite-idle {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.02); }
}
.arena-sprite.monster-sprite { transform: scaleX(-1); }
.arena-sprite.monster-sprite.breathing { animation-name: sprite-breathe-mon; }
@keyframes sprite-breathe-mon {
  0%,100% { transform: scaleX(-1) scale(1) translateY(0); }
  50%     { transform: scaleX(-1) scale(1.04) translateY(-2px); }
}

/* Card under each fighter — name + level pill + ilvl + HP */
.arena-card {
  background: linear-gradient(180deg, #f0d8a8 0%, #d8b878 100%);
  border: 1.5px solid #8a6028;
  border-radius: 6px;
  padding: 4px 8px 5px;
  width: 100%;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 4px rgba(0,0,0,0.4);
}
.arena-card-name {
  font-family: var(--font-main);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arena-card-badges {
  display: flex; gap: 4px; justify-content: center;
  margin: 2px 0 3px;
}
.arena-pill {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(60,40,20,0.85); color: #ffd890;
  border: 1px solid rgba(0,0,0,0.3);
}
.arena-pill.ilvl {
  background: linear-gradient(135deg, #6a40a0, #4a2880);
  color: #e0c0ff;
  border-color: #8a60c0;
}
.arena-card-hp {
  position: relative;
  height: 12px;
  background: rgba(40,20,10,0.4);
  border: 1px solid #6a4818;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.arena-card-hp-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.arena-card-hp-fill.idle {
  width: 100%;
  background: linear-gradient(180deg, #c04030, #802010);
  opacity: 0.35;
}
.arena-card-hp-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 1px rgba(0,0,0,0.9);
  letter-spacing: 0.3px;
}

.arena-no-targets {
  flex: 1; text-align: center;
  font-style: italic; color: #a89878; font-size: 13px;
  align-self: center;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════
   SPELLS — final fix + design polish
   ════════════════════════════════════════════════════════ */
/* Make sure the spell grid is a proper flex/grid */
.sb-spell-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  max-width: 100%;
}
/* Ensure spellbook fills available height */
#panel-spells.panel.active { display: flex; flex-direction: column; height: 100%; }
.spellbook-page { height: 100%; min-height: 0; }
.sb-body { min-height: 0; flex: 1; }
.sb-left { overflow-y: auto; }
.sb-right { overflow-y: auto; }

/* Order list rows must be readable */
.sb-order-row { padding: 6px 8px; }
.sb-order-name { font-size: 12px; }

/* Spell upgrade button must be clickable & visible */
.sd-upgrade-btn { width: auto; min-width: 200px; }

/* ════════════════════════════════════════════════════════
   FINAL FIXES — char-create contrast, tooltips, farm scroll
   ════════════════════════════════════════════════════════ */

/* — char-create text contrast — */
.cc-pc-text { color: #f0e0c0 !important; font-weight: 500; }
.cc-pros .cc-pc-text { color: #d4f0c8 !important; }
.cc-cons .cc-pc-text { color: #f0d0c8 !important; }
.cc-info-row { color: #e8d8b8 !important; }
.cc-info-row span:not(.cc-info-lbl) { color: #f0e0c0; font-weight: 500; }
.cc-detail-desc { color: #f0e0c0 !important; font-weight: 400; }

/* Stat principale FOR/INT/etc. — make readable */
.cc-stat-block .cc-stat-val { color: #ffe89a !important; }

/* — tooltips: escape parent overflow — */
.inv-tooltip,
.fdrop-tooltip,
.pd-label,
.farm-zone-tooltip,
.zone-tooltip {
  z-index: 9999 !important;
}
/* Sidebar/farm-zone-list must allow tooltip overflow */
.left-nav,
.farm-nav-col,
.farm-zone-list,
.farm-layout {
  overflow: visible !important;
}
/* But still allow internal y-scroll for the list itself */
.farm-zone-list-inner,
.farm-zones-scroll {
  overflow-y: auto;
  overflow-x: visible;
  max-height: calc(100vh - 320px);
}

/* — farm panel: ensure vertical scroll — */
#panel-farm.panel.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.farm-page,
.farm-layout {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.farm-zone-detail,
.farm-detail-col {
  overflow-y: auto;
  max-height: 100%;
}

/* — arena fighter card visibility on tan bg — */
.arena-card-name { color: #2a1a08; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
/* For player class color names on tan bg, darken via mix */
.arena-card[style*="--c"] .arena-card-name { filter: brightness(0.7) saturate(1.3); }

/* ════════════════════════════════════════════════════════
   SPRINT 1 — POLISH (particles, bursts, fixes)
   ════════════════════════════════════════════════════════ */

/* Floating damage numbers (re-skin to be readable on new arena) */
.dmg-float {
  position: absolute;
  font-family: var(--font-main, serif);
  font-size: 18px; font-weight: 900;
  pointer-events: none;
  text-shadow:
    0 0 4px rgba(0,0,0,0.9),
    0 2px 4px rgba(0,0,0,0.7),
    0 0 12px currentColor;
  animation: dmg-rise 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  z-index: 50;
}
.dmg-float.crit {
  font-size: 26px;
  animation: dmg-crit 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  letter-spacing: 1px;
}
@keyframes dmg-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { transform: translateY(-10px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-60px) scale(1); opacity: 0; }
}
@keyframes dmg-crit {
  0%   { transform: translateY(0) scale(0.4) rotate(-8deg); opacity: 0; }
  15%  { transform: translateY(-8px) scale(1.5) rotate(4deg); opacity: 1; }
  35%  { transform: translateY(-16px) scale(1.2) rotate(-2deg); opacity: 1; }
  100% { transform: translateY(-80px) scale(1) rotate(0); opacity: 0; }
}

/* XP particles ✨ */
.xp-particle, .kamas-particle {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  animation: xp-fly 1.4s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,221,68,0.7));
  z-index: 49;
}
.kamas-particle {
  filter: drop-shadow(0 0 6px rgba(240,192,64,0.8));
  animation-duration: 1.5s;
}
@keyframes xp-fly {
  0%   { transform: translateY(20px) scale(0.4); opacity: 0; }
  20%  { transform: translateY(0) scale(1.2); opacity: 1; }
  100% { transform: translateY(-90px) scale(0.6); opacity: 0; }
}

/* Reward float — XP + Kamas summary */
.reward-float {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: reward-rise 1.8s ease-out forwards;
  z-index: 51;
}
@keyframes reward-rise {
  0%   { transform: translate(-50%, 30px) scale(0.6); opacity: 0; }
  15%  { transform: translate(-50%, 10px) scale(1.1); opacity: 1; }
  85%  { transform: translate(-50%, -50px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

/* LEVEL-UP BURST */
.levelup-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.lvb-text {
  position: relative;
  font-family: var(--font-main, serif);
  font-size: 16px; font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff8a0 0%, #ffaa10 50%, #ff7000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 0 12px rgba(255,200,40,0.8),
    0 0 24px rgba(255,150,0,0.6);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  animation: lvb-pop 1.8s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
  white-space: nowrap;
  z-index: 2;
}
.lvb-rays {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(255,200,40,0.45) 0%, rgba(255,200,40,0) 70%),
    repeating-conic-gradient(rgba(255,220,80,0.18) 0deg, transparent 8deg, rgba(255,220,80,0.18) 16deg, transparent 24deg);
  animation: lvb-rays 1.8s linear forwards;
  z-index: 1;
  border-radius: 50%;
}
@keyframes lvb-pop {
  0%   { transform: scale(0.2) rotate(-4deg); opacity: 0; }
  15%  { transform: scale(1.4) rotate(2deg); opacity: 1; }
  35%  { transform: scale(1) rotate(0); opacity: 1; }
  85%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.2) rotate(0); opacity: 0; }
}
@keyframes lvb-rays {
  0%   { transform: scale(0.2) rotate(0); opacity: 0; }
  20%  { transform: scale(2.8) rotate(60deg); opacity: 0.8; }
  100% { transform: scale(4.5) rotate(360deg); opacity: 0; }
}

/* Hit animations on fighters */
.arena-fighter.anim-shake .arena-sprite {
  animation: hit-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes hit-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, 1px) rotate(-1deg); }
  20% { transform: translate(4px, -1px) rotate(1deg); }
  30% { transform: translate(-3px, 0) rotate(-1deg); }
  40% { transform: translate(3px, 0) rotate(1deg); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, 0); }
  70% { transform: translate(-1px, 0); }
  80% { transform: translate(1px, 0); }
  90% { transform: translate(0, 0); }
}
.arena-fighter.anim-crit .arena-card {
  animation: card-crit 0.5s ease-out;
}
@keyframes card-crit {
  0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.4); }
  30% { transform: scale(1.06); box-shadow: 0 0 18px rgba(255,180,40,0.7), inset 0 1px 0 rgba(255,255,255,0.4); }
  100% { transform: scale(1); }
}
.arena-fighter.anim-die .arena-sprite {
  animation: die-fall 0.6s ease-in forwards;
}
@keyframes die-fall {
  0%   { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
  60%  { transform: scale(0.9) translateY(8px) rotate(15deg); opacity: 0.8; }
  100% { transform: scale(0.7) translateY(20px) rotate(45deg); opacity: 0.3; }
}
.arena-fighter.anim-lunge .arena-sprite {
  animation: lunge 0.4s ease-out;
}
@keyframes lunge {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-12px) scale(1.05); }
}
/* Player-side lunge goes the other way */
.arena-side-players .arena-fighter.anim-lunge .arena-sprite {
  animation: lunge-right 0.4s ease-out;
}
@keyframes lunge-right {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(12px) scale(1.05); }
}

/* Spell cast flash */
.arena-sprite.anim-cast {
  animation: cast-flash 0.4s ease-out;
}
@keyframes cast-flash {
  0% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
  40% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 14px #fff); transform: scale(1.08); }
  100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
}

/* HP bar low-warning pulse */
.arena-card-hp-fill.hp-low {
  animation: hp-warn 0.8s ease-in-out infinite;
}
@keyframes hp-warn {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 8px #ff4030; }
}

.arena-fighter.anim-defeat { opacity: 0.4; filter: grayscale(0.8); }

/* ════════════════════════════════════════════════════════
   FIXES — sidebar tooltip, farm scroll, char create contrast
   ════════════════════════════════════════════════════════ */

/* Sidebar — let tooltips overflow if any */
.left-nav { overflow: visible !important; }
.char-entry { position: relative; }

/* Farm panel — proper scrolling */
#panel-farm.panel.active {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.farm-layout, .farm-page {
  flex: 1; min-height: 0;
  overflow-y: auto !important;
}
/* Detail panel shouldn't be cut off */
.fmd-card, .farm-zone-detail {
  max-height: none;
}

/* Char create — fix black text on green/red backgrounds */
.cc-pros { background: rgba(40,180,40,0.12) !important; }
.cc-cons { background: rgba(220,80,60,0.12) !important; }
.cc-pros .cc-pc-text {
  color: #b8f8b8 !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.cc-cons .cc-pc-text {
  color: #ffc8b8 !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.cc-pros .cc-pc-title { color: #a0f0a0 !important; }
.cc-cons .cc-pc-title { color: #ffa898 !important; }
.cc-tip { color: #ffe8a0 !important; }
.cc-tip b { color: #ffd060 !important; }
.cc-info-row {
  color: var(--text) !important;
  background: rgba(40,32,18,0.5) !important;
}
.cc-info-row > span:not(.cc-info-lbl) {
  color: #e8d8a8 !important;
  font-weight: 600;
}
.cc-detail-desc { color: #e8d8a8 !important; }
.cc-stat-block { color: var(--text); }
.cc-stat-lbl { color: #a89878 !important; }

/* Char create — better visible signature/portee values */
.cc-info-row .cc-info-lbl { min-width: 90px; }

/* ════════════════════════════════════════════════════════
   MÉTIERS / JOBS PAGE
   ════════════════════════════════════════════════════════ */
.jobs-page {
  padding: 18px 22px;
  height: 100%;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at top, rgba(184,120,8,0.08), transparent 60%),
    linear-gradient(180deg, #1a1408, #0f0a04);
}
.jobs-header {
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid #4a3a1e;
  border-radius: 10px;
  background: linear-gradient(135deg, #3e3220, #2a2010);
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.15);
}
.jobs-title {
  font-family: var(--font-main);
  font-size: 22px; font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.jobs-sub { font-size: 13px; color: #a89878; margin-top: 4px; font-style: italic; }
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.job-card {
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 2px solid #4a3a1e;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.job-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, var(--c, var(--gold)) 0%, transparent 60%);
  opacity: 0.06; pointer-events: none;
}
.job-card.active {
  border-color: var(--c, var(--gold));
  box-shadow: 0 0 18px rgba(184,120,8,0.3), inset 0 0 0 1px rgba(255,200,80,0.2);
}
.job-card.active::before { opacity: 0.12; }
.job-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.job-icon { font-size: 32px; filter: drop-shadow(0 0 8px currentColor); }
.job-titles { flex: 1; }
.job-name { font-family: var(--font-main); font-size: 17px; font-weight: 800; color: #ffe89a; }
.job-lvl { font-size: 12px; color: #a89878; margin-top: 2px; font-weight: 600; }
.job-toggle {
  padding: 6px 14px; border-radius: 18px; font-size: 12px; font-weight: 800;
  background: rgba(0,0,0,0.4); border: 1px solid var(--c, var(--gold));
  color: var(--c, var(--gold-light)); cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.job-toggle.on {
  background: var(--c, var(--gold));
  color: #1a1408;
  box-shadow: 0 0 12px var(--c, var(--gold));
}
.job-toggle:hover { transform: translateY(-1px); }
.job-desc { font-size: 12px; color: #c8b888; margin-bottom: 10px; font-style: italic; line-height: 1.4; }
.job-xp-bar {
  position: relative;
  height: 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3a1e;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.job-xp-fill {
  height: 100%; border-radius: 7px;
  transition: width 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.job-xp-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.9);
}
.job-resources { background: rgba(0,0,0,0.3); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.job-res-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 5px;
}
.job-res-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
}
.job-res {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 4px;
  font-size: 11px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,120,8,0.2);
  transition: all 0.15s;
}
.job-res.on { color: #e8d8a8; border-color: rgba(184,120,8,0.5); }
.job-res.off { color: #5a4a30; opacity: 0.5; }
.job-res-lv {
  background: var(--c, var(--gold)); color: #1a1408;
  font-size: 9px; font-weight: 800;
  border-radius: 8px; padding: 1px 5px;
  flex-shrink: 0;
}
.job-res.off .job-res-lv { background: #4a3a1e; color: #8a7858; }
.job-res-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.job-res-qty { color: #80f898; font-weight: 700; font-size: 10px; }
.job-res-img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.job-res.off .job-res-img { filter: grayscale(0.8) brightness(0.6); }
.job-next {
  font-size: 11px; color: #a89878; text-align: center; font-style: italic;
}
.job-next b { color: #ffd060; }
.jobs-info {
  background: rgba(60,46,22,0.4);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 6px; padding: 10px 14px;
  font-size: 12px; color: #a89878; line-height: 1.5;
}

/* Group delete button */
.farm-btn-delete {
  background: rgba(192,40,30,0.15);
  border: 1px solid rgba(192,40,30,0.5);
  color: #ff8070;
  padding: 4px 8px; border-radius: 5px;
  cursor: pointer; font-size: 14px;
  margin-left: 4px;
  transition: all 0.15s;
}
.farm-btn-delete:hover { background: rgba(192,40,30,0.4); color: #fff; }

/* Player sprite — face right when in combat (toward monsters) */
.arena-side-players .arena-sprite {
  /* default: facing right is correct for _sprite_r asset */
}
/* When sprite is _sprite (idle) we still want it to face the action.
   Since default sprite faces left, mirror it on player side */
.arena-side-players .arena-fighter:not(.fighting) .arena-sprite:not([src*="_sprite_r"]) {
  transform: scaleX(-1);
}
.arena-side-players .arena-fighter:not(.fighting) .arena-sprite:not([src*="_sprite_r"]).breathing {
  animation-name: sprite-breathe-mirror;
}
@keyframes sprite-breathe-mirror {
  0%,100% { transform: scaleX(-1) scale(1) translateY(0); }
  50%     { transform: scaleX(-1) scale(1.04) translateY(-2px); }
}

/* Spell tabs polish */
.grim-tab { cursor: pointer; transition: all 0.15s; }
.grim-tab:hover { background: rgba(184,120,8,0.15) !important; }
.grim-tab.active {
  background: linear-gradient(135deg, rgba(184,120,8,0.3), rgba(184,120,8,0.1)) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Transfer item modal */
.transfer-modal { padding: 12px 14px; }
.transfer-targets { display: flex; flex-direction: column; gap: 6px; }
.transfer-target {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 1.5px solid #4a3a1e;
  border-radius: 6px;
  cursor: pointer; text-align: left;
  transition: all 0.15s;
}
.transfer-target:hover {
  background: linear-gradient(180deg, #3a3020, #2a2018);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.transfer-avatar {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ════════════════════════════════════════════════════════
   HEADER REDESIGN — clean, no gold framing on left
   ════════════════════════════════════════════════════════ */
.dash-titlebar {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 18px !important;
  height: 52px !important;
  min-height: 52px !important;
  background:
    linear-gradient(180deg, #2a2114 0%, #1a1308 100%) !important;
  border-bottom: 1px solid #4a3a1e !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,200,80,0.08),
    0 2px 8px rgba(0,0,0,0.4);
}

/* === LEFT — clean logo, no gold square === */
.dash-logo {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 0 !important;
  border-right: none !important;
  flex-shrink: 0;
  min-width: 180px;
}
/* Hide the old crest square */
.dash-logo-crest { display: none !important; }
/* New emblem — pure typography, gold gradient */
.dash-logo-emblem {
  font-size: 22px;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  line-height: 1;
}
.dash-logo-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  line-height: 1 !important;
}
.dash-logo-main {
  font-family: var(--font-main, serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
  line-height: 1 !important;
}
.dash-logo-sub {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  color: #b89060 !important;
  margin: 0 !important;
  padding: 2px 6px;
  border: 1px solid #6a4818;
  border-radius: 3px;
  background: rgba(60,40,20,0.4);
  line-height: 1;
}

/* === CENTER — resource pills compact === */
.dash-resources {
  gap: 6px !important;
  align-items: center !important;
}
.dash-res {
  padding: 5px 10px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.3)) !important;
  border: 1px solid #3a2a1a !important;
  border-radius: 6px !important;
  gap: 7px !important;
}
.dash-res:hover {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, rgba(255,200,80,0.08), rgba(60,40,20,0.4)) !important;
}
.dash-res-icon { font-size: 16px !important; }
.dash-res-val {
  font-size: 13px !important;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}
.dash-res-lbl { font-size: 8px !important; }

/* === RIGHT — actions group === */
.dash-actions {
  gap: 8px !important;
  align-items: center !important;
  padding-left: 10px;
  border-left: 1px solid #3a2a1a;
}
.dash-almanax-btn {
  padding: 5px 12px !important;
  background: linear-gradient(135deg, rgba(184,120,8,0.15), rgba(120,60,8,0.1)) !important;
  border: 1px solid #6a4818 !important;
  border-radius: 6px !important;
}
.dash-almanax-btn:hover {
  background: linear-gradient(135deg, rgba(232,180,80,0.25), rgba(160,100,20,0.15)) !important;
  border-color: var(--gold) !important;
}
.dash-alm-icon { font-size: 18px !important; }
.dash-alm-name { font-size: 10px !important; max-width: 110px !important; }
.banner-save-btn {
  background: linear-gradient(135deg, #4a8030 0%, #2a5018 100%) !important;
  border: 1px solid #5a9038 !important;
  color: #c8f8b8 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.banner-save-btn:hover {
  background: linear-gradient(135deg, #5aa038 0%, #3a6020 100%) !important;
  box-shadow: 0 2px 8px rgba(80,160,60,0.3);
}
.dash-toggle-btn {
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid #3a2a1a !important;
  border-radius: 6px !important;
  color: var(--gold) !important;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.dash-toggle-btn:hover {
  background: rgba(184,120,8,0.15) !important;
  border-color: var(--gold) !important;
}

/* ════════════════════════════════════════════════════════
   GROUP CREATION MODAL (improved UX)
   ════════════════════════════════════════════════════════ */
.group-create-modal {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadein 0.18s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.gcm-box {
  width: 100%; max-width: 540px;
  background: linear-gradient(180deg, #2e2418, #1a1408);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden;
}
.gcm-header {
  padding: 14px 20px;
  background: linear-gradient(135deg, #4a3a1e, #2a2010);
  border-bottom: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: space-between;
}
.gcm-title {
  font-family: var(--font-main); font-size: 18px; font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gcm-close {
  width: 28px; height: 28px;
  background: rgba(192,40,30,0.2);
  border: 1px solid rgba(192,40,30,0.5);
  border-radius: 5px; color: #ff8070;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.gcm-close:hover { background: rgba(192,40,30,0.5); color: #fff; }

.gcm-body { padding: 18px 22px; }
.gcm-section { margin-bottom: 14px; }
.gcm-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px;
}
.gcm-name-input {
  width: 100%;
  padding: 10px 14px;
  background: #1a1408;
  border: 2px solid #4a3a1e;
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.15s;
}
.gcm-name-input:focus {
  outline: none;
  border-color: var(--gold);
}

.gcm-zone-info {
  background: rgba(60,40,20,0.4);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #c8b888;
}
.gcm-zone-info b { color: var(--gold-light); }

.gcm-members-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 280px;
  overflow-y: auto;
}
.gcm-member {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 2px solid #3a2a1a;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.gcm-member:hover {
  background: linear-gradient(180deg, #3a3020, #2a2018);
  border-color: #6a4818;
}
.gcm-member.checked {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(184,120,8,0.15), rgba(60,40,20,0.4));
  box-shadow: inset 0 0 0 1px rgba(255,200,80,0.2);
}
.gcm-checkbox {
  width: 22px; height: 22px;
  border: 2px solid #6a4818;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
}
.gcm-member.checked .gcm-checkbox {
  background: var(--gold);
  color: #1a1408;
  border-color: var(--gold-light);
}
.gcm-member-avatar {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.gcm-member-info { flex: 1; min-width: 0; }
.gcm-member-name {
  font-family: var(--font-main); font-weight: 700;
  font-size: 14px;
}
.gcm-member-meta {
  font-size: 11px; color: #a89878;
  display: flex; gap: 6px; margin-top: 2px;
}
.gcm-member-status {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  font-weight: 700;
}
.gcm-member-status.locked {
  background: rgba(192,40,30,0.2);
  color: #ff8070;
  border: 1px solid rgba(192,40,30,0.4);
}
.gcm-member-status.ok {
  background: rgba(40,180,40,0.15);
  color: #80e880;
  border: 1px solid rgba(40,180,40,0.4);
}

.gcm-footer {
  padding: 12px 22px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid #3a2a1a;
  display: flex; gap: 10px; justify-content: flex-end;
}
.gcm-btn {
  padding: 9px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
}
.gcm-btn-cancel {
  background: rgba(0,0,0,0.3);
  border-color: #3a2a1a;
  color: var(--text-muted);
}
.gcm-btn-cancel:hover {
  background: rgba(0,0,0,0.5);
  color: var(--text);
}
.gcm-btn-create {
  background: linear-gradient(135deg, #b07808, #7a4a08);
  border-color: var(--gold);
  color: #ffe8a0;
  box-shadow: 0 2px 8px rgba(184,120,8,0.3);
}
.gcm-btn-create:hover {
  background: linear-gradient(135deg, #d09010, #904808);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184,120,8,0.5);
}
.gcm-btn-create:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   SIDEBAR PREMIUM (right characters list)
   ════════════════════════════════════════════════════════ */

/* Make sure damage floats stay inside arena */
.combat-dashboard {
  position: relative;
  z-index: 50;
  isolation: isolate;
}
.dash-titlebar {
  position: relative;
  z-index: 60;
}
.dash-combat-arena {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.arena-stage {
  position: relative;
  overflow: hidden; /* contain damage floats so they don't leak above header */
}
.arena-fighter { position: relative; overflow: visible; }

.side-section-label {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  padding: 8px 10px 4px;
}

/* Active groups box */
.side-groups-box {
  margin: 4px 8px 8px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(184,120,8,0.1), rgba(60,40,20,0.4));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
}
.side-group-pill {
  background: linear-gradient(180deg, #2e2418, #1a1408);
  border: 1px solid #4a3a1e;
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 4px;
}
.side-group-pill:last-child { margin-bottom: 0; }
.sgp-name { font-size: 12px; font-weight: 800; color: #ffd060; letter-spacing: 0.3px; }
.sgp-zone { font-size: 10px; color: #a89878; margin: 2px 0 4px; font-style: italic; }
.sgp-members { display: flex; gap: 3px; }
.sgp-avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #5a4a20; background: rgba(0,0,0,0.3); padding: 1px; }

/* Premium character card v2 */
.char-entry-v2 {
  position: relative; overflow: hidden;
  display: flex; gap: 10px;
  padding: 9px 10px;
  margin: 0 8px 6px;
  background: linear-gradient(180deg, #25201a 0%, #1a1408 100%);
  border: 1.5px solid #3a2a1a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.char-entry-v2:hover {
  border-color: #6a4818;
  background: linear-gradient(180deg, #322820 0%, #20180e 100%);
  transform: translateX(2px);
}
.char-entry-v2.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(184,120,8,0.18), rgba(20,12,4,0.9));
  box-shadow: inset 0 0 0 1px rgba(255,200,80,0.3), 0 2px 8px rgba(184,120,8,0.2);
}
.cev2-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.char-entry-v2.active .cev2-glow { opacity: 0.9; }

.cev2-avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #6a4818;
  background: radial-gradient(circle, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.cev2-avatar {
  width: 38px; height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.cev2-lvl-badge {
  position: absolute; bottom: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8a020, #b07810);
  color: #1a1408;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #1a1408;
  box-shadow: 0 0 8px rgba(232,160,32,0.5);
}

.cev2-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  z-index: 1;
}
.cev2-top {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 1px;
}
.cev2-name {
  font-family: var(--font-main, serif);
  font-size: 13px; font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.cev2-pt-badge {
  font-size: 9px; font-weight: 800;
  background: rgba(40,180,40,0.25);
  color: #80f898;
  border: 1px solid rgba(40,180,40,0.5);
  border-radius: 8px;
  padding: 1px 5px;
  flex-shrink: 0;
  animation: cev2-pulse 2s ease-in-out infinite;
}
.cev2-pt-badge.sp {
  background: rgba(120,140,255,0.25);
  color: #b0c8ff;
  border-color: rgba(120,140,255,0.5);
}
@keyframes cev2-pulse {
  0%,100% { box-shadow: 0 0 0 currentColor; }
  50%     { box-shadow: 0 0 6px currentColor; }
}
.cev2-class {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cev2-bars {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 4px;
}
.cev2-bar {
  height: 5px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.cev2-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.cev2-status {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.cev2-status.fighting { color: #ff7050; }
.cev2-status.farming  { color: #80e880; }
.cev2-status.dead     { color: #888; }
.cev2-status.idle     { color: #8a7858; }
.cev2-group-tag {
  font-size: 9px; font-weight: 700;
  background: rgba(120,140,255,0.15);
  color: #b0c8ff;
  border: 1px solid rgba(120,140,255,0.4);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 2px;
}

/* Edit group button */
.farm-btn-edit {
  background: rgba(80,140,200,0.15);
  border: 1px solid rgba(80,140,200,0.5);
  color: #80b8e8;
  padding: 4px 8px; border-radius: 5px;
  cursor: pointer; font-size: 12px;
  margin-left: 4px;
  transition: all 0.15s;
}
.farm-btn-edit:hover { background: rgba(80,140,200,0.4); color: #fff; }

/* Disabled gcm member (for transfer when inv full) */
.gcm-member.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Transfer modal extras */
.transfer-item-info {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #2e2418, #1a1408);
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  margin-bottom: 14px;
}
.transfer-item-img {
  width: 48px; height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.transfer-item-name {
  font-family: var(--font-main); font-weight: 800;
  font-size: 16px; color: var(--gold-light);
}
.transfer-item-stock {
  font-size: 12px; color: #a89878;
  margin-top: 3px;
}
.transfer-item-stock b { color: var(--gold-light); }
.transfer-qty-row { display: flex; gap: 6px; align-items: center; }
.transfer-qty-row .gcm-name-input { flex: 1; }
.transfer-qty-btn {
  padding: 8px 12px;
  background: linear-gradient(180deg, #3a2e1a, #25201a);
  border: 1.5px solid #6a4818;
  border-radius: 5px;
  color: var(--gold-light);
  cursor: pointer;
  font-size: 12px; font-weight: 800;
  transition: all 0.15s;
}
.transfer-qty-btn:hover {
  background: linear-gradient(180deg, #4a3a1e, #3a2e1a);
  border-color: var(--gold);
}
.transfer-arrow {
  font-size: 22px; color: var(--gold);
  flex-shrink: 0;
  margin-left: 4px;
  text-shadow: 0 0 6px rgba(184,120,8,0.5);
}

/* Hide old char-entry styles when v2 is in use */
.char-entry { display: none; }

/* ════════════════════════════════════════════════════════
   SIDEBAR v3 — minimaliste, élégant, lisible
   ════════════════════════════════════════════════════════ */
.char-row {
  display: flex;
  gap: 9px;
  padding: 8px 10px;
  margin: 2px 6px;
  background: linear-gradient(180deg, rgba(40,30,20,0.45), rgba(20,14,8,0.4));
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  align-items: center;
}
.char-row:hover {
  background: linear-gradient(180deg, rgba(60,46,22,0.5), rgba(30,22,12,0.5));
  border-color: rgba(184,120,8,0.3);
}
.char-row.active {
  background: linear-gradient(90deg, rgba(184,120,8,0.18), rgba(40,28,14,0.5));
  border-color: var(--gold);
  box-shadow: -2px 0 0 var(--gold);
}

.cr-avatar {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cr-avatar img {
  width: 32px; height: 32px;
  object-fit: contain;
}
.cr-lv {
  position: absolute; bottom: -3px; right: -3px;
  background: linear-gradient(135deg, #ffd060, #c08020);
  color: #1a1408;
  font-size: 10px; font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid #1a1408;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.cr-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}

.cr-line1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.cr-name {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}

.cr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.cr-dot.dead  { background: #888; box-shadow: none; }
.cr-dot.fight { background: #ff6040; animation: cr-pulse 0.9s ease-in-out infinite; }
.cr-dot.farm  { background: #50e870; }
.cr-dot.idle  { background: #5a4a30; box-shadow: none; }
@keyframes cr-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.4); }
}

.cr-bars { display: flex; flex-direction: column; gap: 2px; }
.cr-hp, .cr-xp {
  position: relative;
  height: 7px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.cr-xp { height: 3px; }
.cr-hp i, .cr-xp i {
  display: block; height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.cr-xp i { background: linear-gradient(90deg, #c89030, #ffd060); }
.cr-hp span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.8);
  letter-spacing: 0.2px;
  pointer-events: none;
}

.cr-line2 {
  display: flex; gap: 4px; flex-wrap: wrap;
  min-height: 16px;
}
.cr-chip {
  font-size: 9px; font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid;
}
.cr-chip.pt {
  background: rgba(40,180,40,0.18);
  color: #80f898;
  border-color: rgba(40,180,40,0.5);
}
.cr-chip.sp {
  background: rgba(120,140,255,0.18);
  color: #b0c8ff;
  border-color: rgba(120,140,255,0.5);
}
.cr-chip.group {
  background: rgba(184,120,8,0.12);
  color: #c8a878;
  border-color: rgba(184,120,8,0.4);
}
.cr-chip.group.running {
  background: rgba(80,232,120,0.15);
  color: #80f898;
  border-color: rgba(80,232,120,0.5);
}

/* Override the older .char-entry, .char-entry-v2, .side-groups-box */
.char-entry, .char-entry-v2, .side-groups-box { display: none !important; }

/* DEFINITIVE FIX — players always face right toward monsters */
.arena-side-players .arena-sprite {
  transform: scaleX(-1) !important;
  transform-origin: center !important;
}
.arena-side-players .arena-sprite.breathing {
  animation: sprite-breathe-mirror 2.4s ease-in-out infinite !important;
  transform-origin: bottom center !important;
}
@keyframes sprite-breathe-mirror {
  0%,100% { transform: scaleX(-1) scale(1) translateY(0); }
  50%     { transform: scaleX(-1) scale(1.04) translateY(-2px); }
}
.arena-side-players .arena-fighter.anim-shake .arena-sprite {
  animation: hit-shake-mirror 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}
@keyframes hit-shake-mirror {
  0%, 100% { transform: scaleX(-1) translate(0, 0); }
  20% { transform: scaleX(-1) translate(4px, -1px); }
  40% { transform: scaleX(-1) translate(-4px, 0); }
  60% { transform: scaleX(-1) translate(3px, 0); }
  80% { transform: scaleX(-1) translate(-2px, 0); }
}
.arena-side-players .arena-fighter.anim-die .arena-sprite {
  animation: die-fall-mirror 0.6s ease-in forwards !important;
}
@keyframes die-fall-mirror {
  0%   { transform: scaleX(-1) scale(1) translateY(0) rotate(0); opacity: 1; }
  60%  { transform: scaleX(-1) scale(0.9) translateY(8px) rotate(-15deg); opacity: 0.8; }
  100% { transform: scaleX(-1) scale(0.7) translateY(20px) rotate(-45deg); opacity: 0.3; }
}
.arena-side-players .arena-fighter.anim-lunge .arena-sprite {
  animation: lunge-right-mirror 0.4s ease-out !important;
}
@keyframes lunge-right-mirror {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  40% { transform: scaleX(-1) translateX(-12px) scale(1.05); } /* -12 because mirrored */
}

/* ════════════════════════════════════════════════════════
   SPELL DETAIL v3 — premium, complet
   ════════════════════════════════════════════════════════ */
.spx-detail {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0;
}

/* HERO */
.spx-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  border: 2px solid #4a3a1e;
  border-radius: 10px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.15), 0 4px 14px rgba(0,0,0,0.4);
}
.spx-hero::after {
  content:''; position:absolute; top:0; right:0; width:140px; height:140px;
  background: radial-gradient(circle, rgba(255,200,80,0.1), transparent 70%);
  pointer-events: none;
}
.spx-hero-icon {
  width: 78px; height: 78px;
  object-fit: contain;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
  border-radius: 12px;
  padding: 4px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.spx-hero-info { flex: 1; min-width: 0; }
.spx-hero-name {
  font-family: var(--font-main); font-size: 26px; font-weight: 800;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.spx-hero-meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
}
.spx-stars-row {
  font-size: 18px; letter-spacing: 2px;
  text-shadow: 0 0 4px currentColor;
}
.spx-stars-empty { opacity: 0.25; color: #888 !important; }
.spx-lv-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #6a4818;
  border-radius: 12px;
  padding: 3px 10px;
  color: var(--gold-light);
}

/* TAGS */
.spx-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.spx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4));
  border: 1px solid #4a3a1e;
  border-radius: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text);
}
.spx-tag b { color: var(--gold-light); font-weight: 800; }
.spx-tag.pa { color: #6cf; border-color: rgba(60,180,255,0.4); background: rgba(60,180,255,0.1); }
.spx-tag.pa b { color: #aef; }
.spx-tag.warn {
  background: rgba(232,120,40,0.18);
  color: #ffaa70;
  border-color: rgba(232,120,40,0.5);
}
.spx-tag-ic { font-size: 13px; }

/* DESCRIPTION */
.spx-desc {
  font-size: 14px; font-style: italic;
  background: linear-gradient(135deg, rgba(60,46,22,0.4), rgba(30,22,12,0.4));
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  color: #d8c8a0;
  line-height: 1.6;
}

/* LIVE STATS CARD */
.spx-live {
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.15);
}
.spx-live-title {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}
.spx-live-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
}
.spx-live-stat {
  background: rgba(0,0,0,0.4);
  border: 1px solid #3a2a1a;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.spx-live-val {
  font-family: var(--font-main); font-size: 22px; font-weight: 800;
  color: var(--gold-light);
  line-height: 1;
}
.spx-live-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: #a89878;
  text-transform: uppercase;
  margin-top: 4px;
}
.spx-formula {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #3a2a1a;
  font-size: 11px; color: #8a7858; font-style: italic;
  text-align: center;
}
.spx-formula code {
  background: rgba(0,0,0,0.4);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--gold-light);
  font-family: monospace;
}

/* SECTION HEADER */
.spx-section {
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.spx-section::after {
  content:''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* LEVEL TABLE */
.spx-lvl-table {
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 1px solid #4a3a1e;
  border-radius: 10px;
  overflow: hidden;
}
.spx-lvl-row {
  display: grid;
  grid-template-columns: 100px 1.4fr 70px 90px 80px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  font-size: 13px;
  transition: background 0.15s;
}
.spx-lvl-row:last-child { border-bottom: none; }
.spx-lvl-row:hover { background: rgba(184,120,8,0.06); }
.spx-lvl-row.current {
  background: linear-gradient(90deg, rgba(184,120,8,0.22) 0%, rgba(184,120,8,0.06) 100%);
  font-weight: 700;
}
.spx-lvl-row.locked { opacity: 0.45; }

.spx-lvl-stars { letter-spacing: 1.5px; color: var(--gold); font-size: 14px; }
.spx-lvl-dmg { display: flex; flex-direction: column; gap: 1px; }
.spx-dmg-real { font-size: 17px; font-weight: 800; line-height: 1.1; }
.spx-dmg-base {
  font-size: 10px; color: #6a5a40;
  font-style: italic;
}
.spx-lvl-ap { color: #6cf; font-size: 13px; }
.spx-lvl-ap b { font-size: 14px; }
.spx-lvl-req { font-size: 11px; color: #a89878; }
.spx-lvl-status { text-align: right; }
.spx-tag-cur {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold), #c08020);
  color: #1a1408;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
}

/* UPGRADE BUTTON */
.spx-upgrade-wrap { display: flex; justify-content: center; padding: 4px; }
.spx-upgrade {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 400px;
  padding: 14px 24px;
  background: linear-gradient(180deg, #3a2a1a, #25201a);
  border: 2px solid #4a3a1e;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: not-allowed;
  font-size: 14px; font-weight: 700;
  transition: all 0.18s;
}
.spx-upgrade.can {
  background: linear-gradient(180deg, #d09010 0%, #8a5808 100%);
  border-color: var(--gold-light);
  color: #ffe89a;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(184,120,8,0.5), inset 0 1px 0 rgba(255,220,120,0.5);
  letter-spacing: 0.5px;
}
.spx-upgrade.can:hover {
  background: linear-gradient(180deg, #f0a818 0%, #a86808 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232,180,40,0.7);
}
.spx-upgrade-icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.spx-upgrade-txt { flex: 1; text-align: left; }
.spx-upgrade-cost {
  background: rgba(0,0,0,0.4);
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
}

/* MESSAGES */
.spx-msg {
  text-align: center;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  border: 2px solid;
}
.spx-msg.locked {
  background: rgba(192,40,40,0.12);
  border-color: rgba(192,40,40,0.4);
  color: #ff8060;
}
.spx-msg.maxed {
  background: linear-gradient(135deg, rgba(232,180,40,0.18), rgba(184,120,8,0.1));
  border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: 0 0 20px rgba(232,180,40,0.2);
}
.spx-msg.blocked {
  background: rgba(120,80,200,0.12);
  border-color: rgba(120,80,200,0.4);
  color: #b890e0;
}

/* ════════════════════════════════════════════════════════
   SIDEBAR v4 — wide premium char cards (240px)
   ════════════════════════════════════════════════════════ */
#char-list { padding: 4px; display: flex; flex-direction: column; gap: 6px; }

.char-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2a2014 0%, #15100a 100%);
  border: 1.5px solid #3a2a1a;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.char-card:hover {
  border-color: #6a4818;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.char-card.active {
  border-color: var(--gold);
  box-shadow: -3px 0 0 var(--gold), 0 4px 16px rgba(184,120,8,0.3);
}
.ccd-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.6;
}
.char-card.active .ccd-bg { opacity: 1; }

/* Status strip */
.ccd-status-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  position: relative;
}
.ccd-status-strip.dead  { background: linear-gradient(90deg, rgba(140,30,30,0.6), rgba(60,12,12,0.4)); color: #ff8080; }
.ccd-status-strip.fight { background: linear-gradient(90deg, rgba(220,80,40,0.6), rgba(120,40,20,0.4)); color: #ffd0a0; animation: ccd-fight-pulse 1.4s ease-in-out infinite; }
.ccd-status-strip.farm  { background: linear-gradient(90deg, rgba(60,160,80,0.5), rgba(20,80,40,0.4)); color: #b0f8c0; }
.ccd-status-strip.idle  { background: rgba(40,32,18,0.7); color: #a89878; }
@keyframes ccd-fight-pulse {
  0%,100% { box-shadow: inset 0 -1px 0 rgba(255,200,80,0.2); }
  50%     { box-shadow: inset 0 -1px 0 rgba(255,120,60,0.6); }
}

/* Main row : portrait + name */
.ccd-main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 6px;
  position: relative;
}
.ccd-portrait {
  position: relative; flex-shrink: 0;
  width: 48px; height: 48px;
  border: 2px solid;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0.4));
  display: flex; align-items: center; justify-content: center;
}
.ccd-portrait img {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.ccd-lv {
  position: absolute; bottom: -4px; right: -4px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #ffd060, #c08020);
  border: 2px solid #1a1408;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  color: #1a1408;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.ccd-info { flex: 1; min-width: 0; }
.ccd-name {
  font-family: var(--font-main); font-size: 15px; font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccd-class { font-size: 11px; color: #a89878; font-weight: 600; }
.ccd-zone {
  font-size: 10px; color: #80b8e8;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}

/* Bars */
.ccd-bars {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 12px 6px;
  position: relative;
}
.ccd-bar-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
}
.ccd-bar-ic { font-size: 11px; flex-shrink: 0; }
.ccd-bar {
  flex: 1; height: 9px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.ccd-bar i {
  display: block; height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.ccd-bar-val {
  font-size: 10px; font-weight: 700;
  color: var(--gold-light);
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Foot chips */
.ccd-foot {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 10px 8px;
  border-top: 1px dashed rgba(184,120,8,0.15);
  position: relative;
  min-height: 26px;
}
.ccd-chip {
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  border: 1px solid;
  white-space: nowrap;
}
.ccd-chip.pt { background: rgba(40,180,40,0.18); color: #80f898; border-color: rgba(40,180,40,0.5); animation: ccd-chip-pulse 2s ease-in-out infinite; }
.ccd-chip.sp { background: rgba(120,140,255,0.18); color: #b0c8ff; border-color: rgba(120,140,255,0.5); }
.ccd-chip.grp { background: rgba(184,120,8,0.12); color: #c8a878; border-color: rgba(184,120,8,0.4); }
.ccd-chip.grp.on { background: rgba(80,232,120,0.15); color: #80f898; border-color: rgba(80,232,120,0.5); }
.ccd-chip.stat { background: rgba(255,255,255,0.05); color: #b89860; border-color: rgba(184,120,8,0.3); }
@keyframes ccd-chip-pulse {
  0%,100% { box-shadow: 0 0 0 currentColor; }
  50%     { box-shadow: 0 0 6px currentColor; }
}

/* Hide all old sidebar styles */
.char-entry, .char-entry-v2, .char-row, .side-groups-box { display: none !important; }

/* ════════════════════════════════════════════════════════
   SPELL ORDER v2 — clear, intuitive
   ════════════════════════════════════════════════════════ */
.spord-section {
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(40,32,18,0.4), rgba(20,14,8,0.4));
  border: 1px solid #4a3a1e;
  border-radius: 10px;
  padding: 12px 14px;
}
.spord-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.spord-title {
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold);
}
.spord-reset {
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3a1e;
  color: #c8b888;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.spord-reset:hover { background: rgba(184,120,8,0.2); border-color: var(--gold); color: var(--gold-light); }
.spord-help {
  font-size: 11px; color: #a89878; font-style: italic;
  margin-bottom: 10px;
  line-height: 1.5;
}
.spord-help b { color: var(--gold-light); font-style: normal; }

/* Turn 1 simulation */
.spord-sim {
  background: linear-gradient(135deg, rgba(40,140,80,0.15), rgba(20,80,40,0.1));
  border: 1px solid rgba(80,232,120,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.spord-sim.empty {
  background: rgba(192,80,40,0.1);
  border-color: rgba(232,120,40,0.3);
  color: #ffaa70;
  font-size: 12px;
  text-align: center;
}
.spord-sim-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: #80f898;
  margin-bottom: 8px;
}
.spord-sim-flow {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
}
.spord-sim-step {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 16px;
  font-size: 11px; font-weight: 700;
}
.spord-sim-step.rest {
  background: rgba(0,0,0,0.3);
  border-color: #4a3a1e;
  color: #8a7858;
  font-style: italic;
}
.spord-sim-icon {
  width: 18px; height: 18px;
  object-fit: contain;
}
.spord-sim-name { color: var(--gold-light); }
.spord-sim-ap {
  font-size: 10px; color: #80c8ff;
  background: rgba(60,160,255,0.15);
  padding: 1px 5px;
  border-radius: 6px;
}
.spord-sim-arrow {
  color: var(--gold);
  font-weight: 800;
  font-size: 14px;
}

/* Order list items */
.spord-list {
  display: flex; flex-direction: column; gap: 5px;
}
.spord-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border: 1.5px solid #3a2a1a;
  border-left: 4px solid var(--ec, #6a4818);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.spord-item:hover {
  background: linear-gradient(180deg, #3a3020, #2a2018);
  transform: translateX(2px);
}
.spord-item.active {
  background: linear-gradient(180deg, rgba(184,120,8,0.2), rgba(60,40,20,0.6));
  border-color: var(--gold);
  border-left-color: var(--ec, var(--gold));
  box-shadow: 0 2px 8px rgba(184,120,8,0.2);
}
.spord-handle {
  font-size: 14px; color: #6a5a40;
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
}
.spord-rank {
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #1a1408;
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid #1a1408;
  box-shadow: 0 0 8px var(--ec, transparent), inset 0 1px 0 rgba(255,255,255,0.3);
}
.spord-icon {
  width: 36px; height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid #4a3a1e;
  border-radius: 4px;
  padding: 2px;
}
.spord-info { flex: 1; min-width: 0; }
.spord-name-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.spord-name {
  font-family: var(--font-main); font-size: 13px; font-weight: 800;
  color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spord-pin { font-size: 11px; }
.spord-meta {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.spord-chip {
  font-size: 9px; font-weight: 800;
  padding: 1px 6px;
  border-radius: 7px;
  border: 1px solid;
  letter-spacing: 0.3px;
}
.spord-chip.element { /* color set inline */ }
.spord-chip.pa { color: #80c8ff; background: rgba(60,160,255,0.12); border-color: rgba(60,160,255,0.4); }
.spord-chip.lv { color: #c8b888; background: rgba(184,120,8,0.12); border-color: rgba(184,120,8,0.4); }
.spord-actions {
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.spord-btn {
  width: 24px; height: 18px;
  background: linear-gradient(180deg, #4a3a1e, #2a2014);
  border: 1px solid #5a4828;
  border-radius: 3px;
  color: var(--gold-light);
  cursor: pointer;
  font-size: 10px; font-weight: 800;
  line-height: 1;
  padding: 0;
  transition: all 0.1s;
}
.spord-btn:hover:not([disabled]) {
  background: linear-gradient(180deg, #6a5028, #3a2a18);
  border-color: var(--gold);
  color: #fff;
}
.spord-btn[disabled] { opacity: 0.25; cursor: not-allowed; }
.spord-btn.up:hover:not([disabled])   { box-shadow: 0 -2px 6px rgba(80,232,120,0.4); }
.spord-btn.dn:hover:not([disabled])   { box-shadow: 0  2px 6px rgba(232,120,40,0.4); }

/* Hide old grim-order-* */
.grim-order, .grim-order-section { display: none !important; }

/* ════════════════════════════════════════════════════════
   COMBAT VISUAL EFFECTS — projectiles, rings, labels
   ════════════════════════════════════════════════════════ */
.dash-combat-arena { position: relative; }
.arena-stage { position: relative; }

/* Projectiles */
.arena-projectile {
  will-change: transform, opacity;
}
.arena-projectile.melee { font-size: 20px !important; filter: drop-shadow(0 0 6px #fff) !important; }

/* Impact ring on target */
.arena-impact-ring {
  position: absolute;
  left: 50%; top: 40%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 55;
  animation: impact-ring 0.6s ease-out forwards;
}
.arena-impact-ring.elem-feu     { box-shadow: 0 0 0 4px #ff7733, 0 0 24px 8px #ff5520; }
.arena-impact-ring.elem-eau     { box-shadow: 0 0 0 4px #44aaff, 0 0 24px 8px #2080ff; }
.arena-impact-ring.elem-air     { box-shadow: 0 0 0 4px #80f098, 0 0 24px 8px #50d878; }
.arena-impact-ring.elem-terre   { box-shadow: 0 0 0 4px #c89048, 0 0 24px 8px #a06820; }
.arena-impact-ring.elem-neutre  { box-shadow: 0 0 0 4px #e8d8a0, 0 0 24px 8px #c8a868; }
.arena-impact-ring.crit {
  width: 10px; height: 10px;
  animation: impact-ring-crit 0.7s ease-out forwards;
}
@keyframes impact-ring {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
@keyframes impact-ring-crit {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* Spell label that floats above caster */
.arena-spell-label {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 6px currentColor, 0 2px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  pointer-events: none;
  z-index: 56;
  animation: spell-label 0.9s ease-out forwards;
}
@keyframes spell-label {
  0%   { transform: translate(-50%, 6px) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, -10px) scale(1.15); opacity: 1; }
  80%  { transform: translate(-50%, -28px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -40px) scale(0.95); opacity: 0; }
}

/* Buff aura around caster */
.arena-fighter.anim-buff-aura {
  animation: buff-aura 0.9s ease-out;
}
.arena-fighter.anim-buff-aura .arena-sprite-wrap::before {
  content:''; position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,160,224,0.5) 0%, transparent 70%);
  animation: buff-aura-glow 0.9s ease-out;
  pointer-events: none;
  z-index: 1;
}
@keyframes buff-aura {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-4px); }
}
@keyframes buff-aura-glow {
  0%   { transform: scale(0.4); opacity: 0; }
  40%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Screen shake on critical hit */
.dash-combat-arena.anim-screen-shake {
  animation: screen-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 1px); }
  20% { transform: translate(5px, -2px); }
  30% { transform: translate(-4px, 0); }
  40% { transform: translate(4px, 1px); }
  50% { transform: translate(-3px, 0); }
  60% { transform: translate(3px, 0); }
  70% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  90% { transform: translate(-1px, 0); }
}

/* Dead monster fade-out */
.arena-fighter.anim-die .arena-card {
  animation: card-die-fade 0.6s ease-in forwards;
}
@keyframes card-die-fade {
  0%   { opacity: 1; filter: grayscale(0); }
  100% { opacity: 0.5; filter: grayscale(0.7); }
}

/* Improved critical damage float */
.dmg-float.crit {
  background: linear-gradient(180deg, #fff8a0 0%, #ff7020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════
   PAPERDOLL HOVER TOOLTIP — show item bonuses on hover
   ════════════════════════════════════════════════════════ */
.pd-slot { position: relative; }
.pd-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: linear-gradient(180deg, #2e2418 0%, #1a1408 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 200;
  display: none;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  text-align: left;
}
.pd-slot:hover .pd-tooltip { display: block; }
.pd-tooltip::after {
  content:''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--gold);
}
.pd-tt-name {
  font-family: var(--font-main); font-size: 14px; font-weight: 800;
  color: var(--gold-light);
  margin-bottom: 2px;
  line-height: 1.2;
}
.pd-tt-lvl {
  font-size: 11px; color: #a89878;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #4a3a1e;
}
.pd-tt-effs { display: flex; flex-direction: column; gap: 2px; }
.pd-tt-eff {
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.3);
}
.pd-tt-eff.pos { color: #80f898; border-left: 2px solid #40c060; }
.pd-tt-eff.neg { color: #ff8080; border-left: 2px solid #c04040; }
.pd-tt-noeff { font-size: 11px; color: #6a5a40; font-style: italic; }
.pd-tt-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #4a3a1e;
  font-size: 10px;
  color: #6a5a40;
  font-style: italic;
  text-align: center;
}

/* ════════════════════════════════════════════════════════
   SIDEBAR v5 — full-text, no clipping
   ════════════════════════════════════════════════════════ */
.char-card { overflow: visible !important; }
.ccd-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.15;
  font-size: 14px;
}
.ccd-class { white-space: normal; word-break: break-word; font-size: 10.5px; }
.ccd-zone {
  max-width: none !important;
  white-space: normal !important;
  word-break: break-word;
  font-size: 10px;
  line-height: 1.25;
}
.ccd-info { overflow: visible; min-width: 0; }
.ccd-foot {
  padding-bottom: 10px;
  min-height: 0;
  height: auto !important;
  overflow: visible;
}
.ccd-chip {
  font-size: 9.5px;
  padding: 2px 6px;
  white-space: normal;
  line-height: 1.3;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}
.ccd-bar-val { min-width: 0; font-size: 9.5px; }
.ccd-bg { z-index: 0; }
.ccd-status-strip, .ccd-main, .ccd-bars, .ccd-foot { position: relative; z-index: 1; }
.ccd-chip {
  font-size: 9px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inventory grid — make it more spacious for 100 slots */
.inv-grid-wrap, .inv-eq-right .inv-grid-wrap {
  max-height: none;
}

/* ════════════════════════════════════════════════════════
   ZONE BACKGROUNDS — distinct ambiance per area
   ════════════════════════════════════════════════════════ */
.dash-combat-arena[data-area="Incarnam"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120,200,80,0.25) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 0%, rgba(160,220,255,0.1) 0%, transparent 50%),
    linear-gradient(180deg, rgba(80,140,80,0.15) 0%, rgba(40,80,40,0.3) 100%) !important;
}
.dash-combat-arena[data-area="Astrub"] .arena-stage {
  background:
    radial-gradient(ellipse at 30% 90%, rgba(180,140,60,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 10%, rgba(255,200,120,0.12) 0%, transparent 50%),
    linear-gradient(180deg, rgba(140,120,60,0.18) 0%, rgba(60,46,20,0.4) 100%) !important;
}
.dash-combat-arena[data-area="Amakna"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60,140,80,0.3) 0%, transparent 65%),
    linear-gradient(180deg, rgba(40,80,30,0.2) 0%, rgba(20,40,15,0.4) 100%) !important;
}
.dash-combat-arena[data-area="Cania"] .arena-stage {
  background:
    radial-gradient(ellipse at 40% 90%, rgba(220,140,60,0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(180,100,40,0.18) 0%, rgba(80,40,15,0.4) 100%) !important;
}
.dash-combat-arena[data-area="Abraknydes"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60,180,120,0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(30,80,50,0.3) 0%, rgba(15,40,25,0.5) 100%) !important;
}
.dash-combat-arena[data-area="Pandala"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232,180,40,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,80,80,0.1) 0%, transparent 40%),
    linear-gradient(180deg, rgba(180,140,40,0.2) 0%, rgba(80,40,20,0.4) 100%) !important;
}
.dash-combat-arena[data-area="Otomai"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(80,180,120,0.3) 0%, transparent 65%),
    radial-gradient(ellipse at 30% 30%, rgba(120,80,180,0.15) 0%, transparent 40%),
    linear-gradient(180deg, rgba(20,80,40,0.3) 0%, rgba(10,40,20,0.5) 100%) !important;
}
.dash-combat-arena[data-area="Moon"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60,80,180,0.25) 0%, transparent 65%),
    radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
    linear-gradient(180deg, rgba(20,30,80,0.4) 0%, rgba(10,15,40,0.6) 100%) !important;
}
.dash-combat-arena[data-area="Frigost"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(160,200,255,0.3) 0%, transparent 65%),
    linear-gradient(180deg, rgba(120,160,200,0.2) 0%, rgba(40,60,100,0.4) 100%) !important;
}
.dash-combat-arena[data-area="Porcos"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220,180,140,0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(140,100,60,0.25) 0%, rgba(60,40,20,0.45) 100%) !important;
}
.dash-combat-arena[data-area="Grobe"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120,120,160,0.3) 0%, transparent 65%),
    linear-gradient(180deg, rgba(50,50,80,0.4) 0%, rgba(20,20,40,0.6) 100%) !important;
}
.dash-combat-arena[data-area="QuTan"] .arena-stage,
.dash-combat-arena[data-area="qutan"] .arena-stage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(180,40,60,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(80,0,0,0.3) 0%, transparent 50%),
    linear-gradient(180deg, rgba(80,20,20,0.4) 0%, rgba(40,10,10,0.6) 100%) !important;
}

/* Floating ambient particles per area (pure CSS sparkles) */
.arena-stage::before {
  content:'';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,220,120,0.3) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,220,120,0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,220,120,0.4) 50%, transparent 50%);
  animation: arena-sparkle 6s linear infinite;
  opacity: 0.6;
  z-index: 0;
}
@keyframes arena-sparkle {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 0.8; }
}
/* ════════════════════════════════════════════════════════
   v13 — RICH INVENTORY TOOLTIP
   ════════════════════════════════════════════════════════ */
.inv-slot .inv-tooltip.rich {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: linear-gradient(180deg, #2e2418 0%, #1a1408 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  z-index: 220;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  text-align: left;
  white-space: normal;
}
.inv-slot:hover .inv-tooltip.rich { display: block; }
.inv-tooltip.rich::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--gold);
}
.itip-name {
  font-family: var(--font-main);
  font-size: 13px; font-weight: 800;
  color: var(--gold-light);
  line-height: 1.2;
  display: flex; justify-content: space-between; gap: 6px;
}
.itip-qty { color: #80c060; font-size: 11px; }
.itip-lvl { font-size: 10px; color: #a89878; margin-top: 2px; padding-bottom: 5px; border-bottom: 1px solid #4a3a1e; }
.itip-effs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.itip-eff {
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.3);
  white-space: normal;
}
.itip-eff.pos { color: #80f898; border-left: 2px solid #40c060; }
.itip-eff.neg { color: #ff8080; border-left: 2px solid #c04040; }
.itip-desc { font-size: 10.5px; color: #c8b888; font-style: italic; margin-top: 4px; }
.itip-set {
  font-size: 11px; font-weight: 700;
  margin-top: 6px; padding: 3px 6px;
  border: 1px solid; border-radius: 4px;
  background: rgba(0,0,0,0.3);
}
.itip-foot {
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px dashed #4a3a1e;
  font-size: 9.5px; color: #6a5a40;
  font-style: italic; text-align: center;
}
/* hide the legacy single-line tooltip on filled slots that have a rich tooltip */
.inv-slot.filled .inv-tooltip:not(.rich) { display: none !important; }

/* ════════════════════════════════════════════════════════
   v13 — PANOPLIE PANEL (in item detail)
   ════════════════════════════════════════════════════════ */
.set-panel {
  margin: 10px 0;
  border: 1.5px solid;
  border-radius: 8px;
  padding: 10px 12px;
}
.setp-header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-main); font-size: 14px; font-weight: 800;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(184,120,8,0.3);
}
.setp-icon { font-size: 16px; }
.setp-name { flex: 1; }
.setp-count {
  font-size: 11px; color: var(--gold-light);
  background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 10px;
  border: 1px solid rgba(184,120,8,0.4);
}
.setp-pieces {
  display: flex; flex-direction: column; gap: 3px;
  margin: 8px 0;
}
.setp-piece {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.25);
}
.setp-piece.equipped { background: rgba(80,200,80,0.12); }
.setp-piece.missing { opacity: 0.55; }
.setp-piece-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.setp-piece-name { flex: 1; color: #d8c898; }
.setp-piece.missing .setp-piece-name { text-decoration: line-through; color: #7a6a4a; }
.setp-piece-status { font-size: 10px; color: #a89878; font-weight: 700; }
.setp-piece.equipped .setp-piece-status { color: #80e898; }
.setp-bonuses-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: #a89878; margin: 8px 0 4px;
}
.setp-bonuses { display: flex; flex-direction: column; gap: 3px; }
.setp-tier {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.25);
  opacity: 0.6;
}
.setp-tier.active {
  opacity: 1;
  background: rgba(255,200,80,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,200,80,0.25);
}
.setp-tier-count {
  font-size: 11px; font-weight: 800;
  color: #1a1408;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.setp-tier-bonus { color: #d8c898; font-weight: 600; }
.setp-tier.active .setp-tier-bonus { color: var(--gold-light); }

/* ════════════════════════════════════════════════════════
   v13 — ALMANAX V3 (premium hero + forecast)
   ════════════════════════════════════════════════════════ */
.almx-page.v3 {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px;
}

/* HERO */
.almx-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 200px;
}
.almx-hero-bg {
  position: absolute; inset: 0;
  border: 2px solid;
  border-radius: 14px;
  z-index: 0;
}
.almx-hero-inner {
  position: relative; z-index: 1;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 24px;
  align-items: center;
}
.almx-hero-badge {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 12px;
  border: 1.5px solid;
  border-radius: 14px;
  background: rgba(0,0,0,0.4);
  text-transform: uppercase;
}
.almx-hero-icon {
  grid-column: 1; grid-row: 1 / 3;
  font-size: 96px;
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.5) 70%);
  border: 2px solid var(--c, #888);
  flex-shrink: 0;
  animation: almx-icon-float 4s ease-in-out infinite;
}
@keyframes almx-icon-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-4px) scale(1.04); }
}
.almx-hero-content { grid-column: 2; grid-row: 2; }
.almx-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px;
  color: #a89878; text-transform: uppercase;
  margin-bottom: 4px;
}
.almx-hero-name {
  font-family: var(--font-main);
  font-size: 28px; font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.almx-hero-effect {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 16px; font-weight: 800;
  padding: 6px 14px;
  border: 2px solid;
  border-radius: 8px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.almx-hero-desc {
  font-size: 12.5px;
  color: #d0c0a0;
  font-style: italic;
  line-height: 1.4;
  max-width: 660px;
  margin-bottom: 10px;
}
.almx-hero-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 11px;
  padding-top: 10px;
  border-top: 1px dashed rgba(184,120,8,0.3);
}
.almx-hero-tribute { color: #a89878; }
.almx-hero-tribute b { color: var(--gold-light); }
.almx-hero-time { color: #a89878; margin-left: auto; }
.almx-hero-time b { color: #80c8e8; font-variant-numeric: tabular-nums; }

/* FORECAST */
.almx-forecast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.almx-forecast-card {
  background: linear-gradient(180deg, #1f1810 0%, #15100a 100%);
  border: 1.5px solid #3a2a1a;
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.almx-forecast-card.legendary { border-color: #ff803066; box-shadow: 0 0 18px rgba(255,128,48,0.12); }
.almx-forecast-card.epic      { border-color: #e860c066; box-shadow: 0 0 18px rgba(232,96,192,0.12); }
.almx-forecast-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, var(--c, transparent) 22%, transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}
.almx-fc-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  color: #a89878; text-transform: uppercase;
  margin-bottom: 8px;
}
.almx-forecast-card.legendary .almx-fc-tag { color: #ff8030; }
.almx-forecast-card.epic .almx-fc-tag { color: #e860c0; }
.almx-fc-row { display: flex; align-items: center; gap: 12px; }
.almx-fc-icon { font-size: 36px; flex-shrink: 0; }
.almx-fc-info { flex: 1; }
.almx-fc-date { font-size: 10px; color: #a89878; font-weight: 700; letter-spacing: 1px; }
.almx-fc-name { font-size: 14px; font-weight: 800; line-height: 1.15; margin: 2px 0; }
.almx-fc-eff { font-size: 11px; color: #d8c898; font-weight: 600; }
.almx-fc-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.almx-fc-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,0.3); border-radius: 6px;
  padding: 6px 4px;
  font-size: 10px;
}
.almx-fc-stat b { font-size: 20px; font-weight: 900; line-height: 1; }
.almx-fc-stat span { color: #a89878; margin-top: 2px; letter-spacing: 0.5px; }

/* CALENDAR */
.almx-cal-section {
  background: linear-gradient(180deg, #1c1610 0%, #14100a 100%);
  border: 1px solid #3a2a1a;
  border-radius: 10px;
  padding: 14px;
}
.almx-cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap; gap: 8px;
}
.almx-cal-title {
  font-family: var(--font-main); font-size: 14px; font-weight: 800;
  color: var(--gold-light); letter-spacing: 0.5px;
}
.almx-cal-legend { font-size: 10px; color: #a89878; display: flex; gap: 10px; align-items: center; }
.almx-cal-legend span { font-weight: 700; }
.almx-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.almx-cal-day {
  position: relative;
  background: linear-gradient(180deg, #20180e 0%, #14100a 100%);
  border: 1.5px solid var(--rarity-color, #444);
  border-radius: 8px;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}
.almx-cal-day:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.almx-cal-day.rarity-legendary {
  background: linear-gradient(180deg, #2a1a08 0%, #1a1208 100%);
  box-shadow: 0 0 12px rgba(255,128,48,0.18);
}
.almx-cal-day.rarity-epic {
  background: linear-gradient(180deg, #281030 0%, #1a1018 100%);
  box-shadow: 0 0 10px rgba(232,96,192,0.14);
}
.almx-cal-day.today {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.almx-cal-today-tag {
  position: absolute;
  top: -8px; right: 6px;
  font-size: 8px; font-weight: 800; letter-spacing: 1px;
  background: var(--gold); color: #1a1408;
  padding: 2px 6px; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.almx-cal-date {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  color: #a89878;
}
.almx-cal-icon { font-size: 28px; line-height: 1; margin: 2px 0; }
.almx-cal-name {
  font-size: 11px; font-weight: 800;
  color: #d8c898;
  line-height: 1.1;
  min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
}
.almx-cal-effect { font-size: 9.5px; font-weight: 700; line-height: 1.2; }
.almx-cal-rarity { margin-top: 2px; }
.almx-cal-rarity-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
}

/* INFO CARDS (already exist but tighten) */
.almx-info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.almx-info-card {
  display: flex; gap: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #3a2a1a;
  border-radius: 8px;
  padding: 10px 12px;
}
.almx-info-icon { font-size: 22px; flex-shrink: 0; }
.almx-info-title { font-size: 12px; font-weight: 800; color: var(--gold-light); margin-bottom: 2px; }
.almx-info-text { font-size: 11px; color: #a89878; line-height: 1.35; }

/* ════════════════════════════════════════════════════════
   v13 — GROUP CARDS (farm panel)
   ════════════════════════════════════════════════════════ */
.grp-card {
  background: linear-gradient(180deg, #221810 0%, #14100a 100%);
  border: 1.5px solid #3a2a1a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.grp-card:hover { border-color: #6a4818; }
.grp-card.active {
  border-color: #80e898;
  box-shadow: 0 0 14px rgba(80,232,152,0.2), inset 0 0 0 1px rgba(80,232,152,0.15);
}
.grp-card.all-dead { opacity: 0.7; border-color: #8a3030; }
.grp-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
  flex-wrap: wrap; /* v177 — actions sur ligne suivante si pas la place */
}
.grp-card-name {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  flex: 1 1 200px; min-width: 140px; /* v177 — empêche l'écrasement vertical */
}
.grp-card-title {
  font-family: var(--font-main); font-size: 13px; font-weight: 800;
  color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.grp-card-tag {
  font-size: 10px; color: #a89878;
  background: rgba(0,0,0,0.35);
  padding: 2px 8px; border-radius: 10px;
  border: 1px solid rgba(184,120,8,0.3);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grp-pulse {
  width: 8px; height: 8px;
  background: #80e898;
  border-radius: 50%;
  box-shadow: 0 0 8px #80e898;
  animation: grp-pulse-ani 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes grp-pulse-ani {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.3); }
}
.grp-card-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; }
/* v178 — Chain selector : compact, ne déborde pas */
.grp-card .grp-chain { flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 2px; }
.grp-card .grp-chain-select { font-size: 10px; padding: 2px 4px; max-width: 80px; }
.grp-card .grp-chain-keys { font-size: 10px; padding: 2px 4px; }
.grp-card .grp-btn { width: 24px; height: 24px; font-size: 12px; }
.grp-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: #2a1f10;
  border: 1px solid #4a3a1e;
  color: var(--gold-light);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.grp-btn:hover { transform: translateY(-1px); }
.grp-btn.play { background: #2a4a20; border-color: #60a040; color: #80f898; }
.grp-btn.play:hover { background: #3a6a30; box-shadow: 0 0 8px rgba(80,232,152,0.4); }
.grp-btn.stop { background: #6a2020; border-color: #a04040; color: #ff8888; }
.grp-btn.stop:hover { background: #8a3030; }
.grp-btn.del:hover { background: #6a2020; border-color: #a04040; color: #ff8888; }

.grp-card-members {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.grp-mem {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,120,8,0.25);
  border-radius: 14px;
  padding: 3px 8px 3px 3px;
  font-size: 11px;
}
.grp-mem img {
  width: 22px; height: 22px;
  object-fit: contain;
  border: 1.5px solid;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
}
.grp-mem-lv {
  font-size: 9.5px;
  color: #a89878;
  background: rgba(0,0,0,0.4);
  padding: 1px 5px;
  border-radius: 8px;
}
.grp-mem-warn { font-size: 11px; }
.grp-mem.low { opacity: 0.65; border-color: rgba(232,160,40,0.4); }
.grp-mem.dead { opacity: 0.45; filter: grayscale(0.6); border-color: rgba(200,60,60,0.5); }

.grp-warn {
  margin-top: 6px;
  font-size: 11px;
  color: #ffb060;
  background: rgba(232,128,40,0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid #ffb060;
}

.grp-create-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #3a2a1a 0%, #2a1f10 100%);
  border: 1.5px dashed #6a4818;
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.grp-create-btn:hover {
  background: linear-gradient(180deg, #4a3a2a 0%, #3a2a1a 100%);
  border-color: var(--gold);
  border-style: solid;
}

/* ════════════════════════════════════════════════════════
   v13 — GROUP CREATE MODAL improvements
   ════════════════════════════════════════════════════════ */
.gcm-zone-select {
  width: 100%;
  background: #1a1408;
  border: 1.5px solid #4a3a1e;
  color: var(--gold-light);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gcm-zone-select:focus {
  outline: none;
  border-color: var(--gold);
}
.gcm-zone-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #a89878;
}
.gcm-quick-btn {
  margin-left: 4px;
  background: #2a1f10;
  border: 1px solid #4a3a1e;
  color: var(--gold-light);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.gcm-quick-btn:hover { background: #4a3a1e; }

/* ════════════════════════════════════════════════════════
   v13 — SPELLS POLISH (more compact, less ornate)
   ════════════════════════════════════════════════════════ */
.grim-spell-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  gap: 6px !important;
}
.grim-spell-name {
  font-size: 10.5px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.grim-spell-stars { font-size: 9px !important; letter-spacing: -1px; }
.grim-header { padding: 14px 18px !important; }
.grim-header-name { font-size: 22px !important; }
.grim-header-stats { gap: 8px; }
.grim-stat-pill { padding: 6px 10px !important; }
.grim-stat-val { font-size: 16px !important; }
.grim-stat-lbl { font-size: 9px !important; }
.spord-section { margin-top: 10px; }
.spord-help { font-size: 10.5px; line-height: 1.4; }
.spord-item { padding: 6px 8px !important; }
.spord-name { font-size: 12px !important; }
.spord-meta { gap: 4px !important; flex-wrap: wrap; }
.spord-chip { font-size: 9.5px !important; padding: 1px 5px !important; }

/* ════════════════════════════════════════════════════════
   v13 — Fix paperdoll labels visibility
   ════════════════════════════════════════════════════════ */
.pd-slot { overflow: visible; }
/* ════════════════════════════════════════════════════════
   v14 — DUNGEON ROOMS (multi-room progress)
   ════════════════════════════════════════════════════════ */
.farm-dungeon-rooms-count {
  display: inline-block;
  background: rgba(232,128,40,0.15);
  border: 1px solid rgba(232,128,40,0.4);
  color: #ffb060;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  margin-left: 6px;
}
.farm-dungeon-rooms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px 10px;
  margin: 6px 0 10px;
  background: linear-gradient(180deg, #2a1810 0%, #1a1208 100%);
  border: 1px solid #5a3a1e;
  border-radius: 8px;
}
.fdr-room {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid #4a3a1e;
  border-radius: 14px;
  font-size: 11px;
  color: #a89878;
  transition: all 0.2s;
}
.fdr-room.done {
  background: rgba(80,160,80,0.12);
  border-color: rgba(80,200,80,0.4);
  color: #80c890;
  opacity: 0.75;
}
.fdr-room.current {
  background: rgba(232,160,40,0.18);
  border-color: var(--gold);
  color: var(--gold-light);
  font-weight: 800;
  box-shadow: 0 0 12px rgba(232,160,40,0.35);
}
.fdr-room.boss {
  background: rgba(200,60,80,0.14);
  border-color: #c8405a;
}
.fdr-room.boss.current {
  border-color: #ff6080;
  box-shadow: 0 0 14px rgba(255,80,120,0.4);
  color: #ffb0c0;
}
.fdr-num {
  font-weight: 900;
  font-size: 12px;
}
.fdr-arrow {
  color: #4a3a1e;
  font-size: 14px;
  font-weight: 900;
}
.fdr-pulse {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
  animation: fdr-pulse-ani 1.2s ease-in-out infinite;
}
@keyframes fdr-pulse-ani {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.3); opacity: 0.6; }
}

/* ════════════════════════════════════════════════════════
   v14 — ARENA BG IMAGE HOOK (combat dashboard)
   Place an image at assets/arena-bg.jpg to enable
   ════════════════════════════════════════════════════════ */
.dash-combat-arena {
  background-image:
    linear-gradient(180deg, rgba(15,10,4,0.78) 0%, rgba(15,10,4,0.55) 50%, rgba(15,10,4,0.85) 100%),
    url('../assets/arena-bg.jpg');
  background-size: cover;
  background-position: center;
}
.dash-combat-arena::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 0;
}
/* ════════════════════════════════════════════════════════
   v15 — FLOATING ITEM TOOLTIP (escapes overflow:hidden)
   ════════════════════════════════════════════════════════ */
.floating-item-tooltip {
  position: fixed;
  z-index: 9999;
  width: 260px;
  background: linear-gradient(180deg, #2e2418 0%, #1a1408 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  pointer-events: none;
  box-shadow: 0 10px 32px rgba(0,0,0,0.8);
  text-align: left;
  white-space: normal;
  animation: tt-fade 0.12s ease-out;
}
@keyframes tt-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ════════════════════════════════════════════════════════
   v16 — COMBAT VISUAL POLISH
   ════════════════════════════════════════════════════════ */

/* Active-turn highlight: golden pulse ring around the active fighter */
.arena-fighter.is-active-turn .arena-card {
  box-shadow:
    0 0 0 2px rgba(255, 200, 80, 0.7),
    0 0 22px rgba(255, 200, 80, 0.5),
    0 4px 16px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}
.arena-fighter.is-active-turn .arena-sprite-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,80,0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: turn-spotlight 1.4s ease-in-out infinite;
}
@keyframes turn-spotlight {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Ground ring under caster (telegraph circle) */
.arena-ground-ring {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 70px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: ground-ring-anim 1.1s ease-out forwards;
}
.arena-ground-ring.elem-feu    { background: radial-gradient(ellipse, rgba(255,100,40,0.7) 0%, rgba(255,100,40,0) 70%); box-shadow: 0 0 18px rgba(255,100,40,0.6); }
.arena-ground-ring.elem-eau    { background: radial-gradient(ellipse, rgba(60,160,255,0.7) 0%, rgba(60,160,255,0) 70%); box-shadow: 0 0 18px rgba(60,160,255,0.6); }
.arena-ground-ring.elem-air    { background: radial-gradient(ellipse, rgba(120,240,160,0.7) 0%, rgba(120,240,160,0) 70%); box-shadow: 0 0 18px rgba(120,240,160,0.6); }
.arena-ground-ring.elem-terre  { background: radial-gradient(ellipse, rgba(220,160,80,0.7) 0%, rgba(220,160,80,0) 70%); box-shadow: 0 0 18px rgba(220,160,80,0.6); }
.arena-ground-ring.elem-neutre { background: radial-gradient(ellipse, rgba(232,216,160,0.7) 0%, rgba(232,216,160,0) 70%); box-shadow: 0 0 18px rgba(232,216,160,0.5); }
.arena-ground-ring.elem-buff   { background: radial-gradient(ellipse, rgba(200,160,232,0.7) 0%, rgba(200,160,232,0) 70%); box-shadow: 0 0 18px rgba(200,160,232,0.6); }
@keyframes ground-ring-anim {
  0%   { transform: translateX(-50%) scale(0.4); opacity: 0; }
  20%  { transform: translateX(-50%) scale(1.1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.5); opacity: 0; }
}

/* Sprite wrap relative for stacking */
.arena-sprite-wrap { position: relative; }

/* HP bar segments (notches every 25%) */
.arena-card-hp {
  position: relative;
  background-image: linear-gradient(
    90deg,
    transparent 0%, transparent 24.6%,
    rgba(0,0,0,0.55) 24.6%, rgba(0,0,0,0.55) 25.4%,
    transparent 25.4%, transparent 49.6%,
    rgba(0,0,0,0.55) 49.6%, rgba(0,0,0,0.55) 50.4%,
    transparent 50.4%, transparent 74.6%,
    rgba(0,0,0,0.55) 74.6%, rgba(0,0,0,0.55) 75.4%,
    transparent 75.4%, transparent 100%
  );
  background-repeat: no-repeat;
  z-index: 1;
}
.arena-card-hp-fill {
  transition: width 0.6s cubic-bezier(0.4, 0.05, 0.3, 1), background 0.3s;
  position: relative;
  overflow: hidden;
}
.arena-card-hp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}
.arena-card-hp-fill.hp-low {
  animation: hp-low-pulse 0.8s ease-in-out infinite;
}
@keyframes hp-low-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.5) saturate(1.3); }
}

/* Idle subtle sway — varied by fighter */
.arena-fighter:nth-child(odd) .arena-sprite.breathing  { animation-duration: 2.4s; }
.arena-fighter:nth-child(even) .arena-sprite.breathing { animation-duration: 2.8s; animation-delay: 0.3s; }
.arena-sprite.breathing {
  animation-name: idle-breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: bottom center;
}
@keyframes idle-breathe {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  40%      { transform: scale(1.015, 0.985) translateY(0.5px); }
  60%      { transform: scale(0.99, 1.01) translateY(-0.5px); }
}

/* Cast pose: stretch upward briefly */
.arena-sprite.anim-cast {
  animation: cast-pose 0.55s ease-out !important;
}
@keyframes cast-pose {
  0%   { transform: scale(1, 1) translateY(0); }
  35%  { transform: scale(0.92, 1.12) translateY(-4px); }
  60%  { transform: scale(1.05, 0.96) translateY(2px); }
  100% { transform: scale(1, 1) translateY(0); }
}

/* Improved death animation: tilt + dissolve + smoke */
.arena-fighter.dead .arena-sprite,
.arena-sprite.anim-die {
  animation: death-dissolve 0.9s ease-in forwards !important;
}
@keyframes death-dissolve {
  0%   { transform: rotate(0deg) translateY(0); opacity: 1; filter: brightness(1); }
  30%  { transform: rotate(8deg)  translateY(2px); opacity: 1; filter: brightness(1.4) saturate(0); }
  100% { transform: rotate(60deg) translateY(20px); opacity: 0; filter: brightness(0.4) saturate(0); }
}
.arena-fighter.dead .arena-card {
  opacity: 0.55;
  filter: grayscale(0.7);
  transition: all 0.4s;
}
.arena-fighter.dead .arena-card-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255,80,80,0.6);
}

/* Hurt flinch (more visceral) */
.arena-sprite.anim-shake {
  animation: hurt-flinch 0.4s ease-out !important;
}
@keyframes hurt-flinch {
  0%   { transform: translateX(0)   scale(1); filter: brightness(1) saturate(1); }
  15%  { transform: translateX(-3px) scale(0.97); filter: brightness(2) saturate(0.5) hue-rotate(-15deg); }
  30%  { transform: translateX(3px)  scale(1.02); filter: brightness(1.6) saturate(0.7); }
  50%  { transform: translateX(-2px) scale(0.98); filter: brightness(1.3); }
  100% { transform: translateX(0)    scale(1); filter: brightness(1) saturate(1); }
}

/* Crit zoom: brief scale + chromatic flash */
.arena-fighter.anim-crit {
  animation: crit-zoom 0.6s ease-out;
}
@keyframes crit-zoom {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.18); filter: drop-shadow(0 0 18px gold) saturate(1.5); }
  100% { transform: scale(1); }
}

/* Buff aura: gold pulsing halo around character */
.arena-fighter.anim-buff-aura .arena-sprite-wrap::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,160,232,0.4), transparent 65%);
  pointer-events: none;
  animation: buff-aura 1.1s ease-out forwards;
}
@keyframes buff-aura {
  0%   { transform: scale(0.6); opacity: 0; }
  35%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Damage float numbers — bigger, bolder */
.arena-dmg-float {
  position: absolute;
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 0 6px currentColor, 0 2px 4px rgba(0,0,0,0.9), 0 0 1px #000;
  pointer-events: none;
  z-index: 70;
  animation: dmg-float-anim 1.1s ease-out forwards;
  letter-spacing: 0.5px;
}
.arena-dmg-float.crit {
  font-size: 32px;
  animation: dmg-float-crit 1.3s ease-out forwards;
}
@keyframes dmg-float-anim {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  35%  { opacity: 1; transform: translate(-50%, -22px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55px) scale(0.95); }
}
@keyframes dmg-float-crit {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.5) rotate(-8deg); }
  20%  { opacity: 1; transform: translate(-50%, -16px) scale(1.4) rotate(4deg); }
  40%  { opacity: 1; transform: translate(-50%, -26px) scale(1.15) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -65px) scale(1) rotate(0deg); }
}

/* Stage perspective hint — subtle floor shadow under fighters */
.arena-fighter::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(1px);
  transition: width 0.3s, opacity 0.3s;
}
.arena-fighter.dead::after { opacity: 0.2; width: 30px; }

/* Stage backdrop — subtle vignette + horizon line */
.dash-combat-arena {
  position: relative;
  overflow: hidden;
}
.arena-stage {
  position: relative;
}
.arena-stage::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,120,8,0.18), transparent);
  pointer-events: none;
}
/* ════════════════════════════════════════════════════════
   v17 — PER-ELEMENT SPELL VISUALS + IMPACT VARIATIONS
   ════════════════════════════════════════════════════════ */

/* Water projectile: wavy trajectory */
@keyframes proj-water {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(calc(var(--dx)*0.3), calc(var(--dy)*0.3 + 12px)) scale(1.1); }
  50%  { transform: translate(calc(var(--dx)*0.5), calc(var(--dy)*0.5 - 8px)) scale(1.2); }
  75%  { transform: translate(calc(var(--dx)*0.75), calc(var(--dy)*0.75 + 6px)) scale(1.3); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0.5; }
}

/* Element-specific impact rings */
.arena-impact-ring {
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
}
.arena-impact-ring.elem-feu    { animation: impact-fire 0.55s ease-out forwards; box-shadow: 0 0 0 2px #ff7733, 0 0 20px #ff3010; }
.arena-impact-ring.elem-eau    { animation: impact-water 0.6s ease-out forwards; box-shadow: 0 0 0 2px #44aaff, 0 0 18px #2080e0; }
.arena-impact-ring.elem-air    { animation: impact-air 0.45s ease-out forwards; box-shadow: 0 0 0 2px #80f098, 0 0 16px #40e080; }
.arena-impact-ring.elem-terre  { animation: impact-earth 0.7s cubic-bezier(0.6,0,0.4,1) forwards; box-shadow: 0 0 0 3px #c89048, 0 0 22px #b87808; }
.arena-impact-ring.elem-neutre { animation: impact-neutre 0.55s ease-out forwards; box-shadow: 0 0 0 2px #e8d8a0, 0 0 16px #ffe898; }
.arena-impact-ring.crit { animation-duration: 0.8s; box-shadow: 0 0 0 4px gold, 0 0 30px gold !important; }

@keyframes impact-fire {
  0%   { width: 0; height: 0; transform: translate(-50%,-50%); opacity: 1; }
  50%  { width: 70px; height: 70px; transform: translate(-50%,-50%) rotate(45deg); opacity: 0.8; }
  100% { width: 110px; height: 110px; transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
}
@keyframes impact-water {
  0%   { width: 0; height: 0; transform: translate(-50%,-50%) scale(1, 0.4); opacity: 1; }
  60%  { width: 90px; height: 90px; transform: translate(-50%,-50%) scale(1.2, 0.6); opacity: 0.7; }
  100% { width: 130px; height: 130px; transform: translate(-50%,-50%) scale(1.4, 0.5); opacity: 0; }
}
@keyframes impact-air {
  0%   { width: 0; height: 0; transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
  40%  { width: 80px; height: 80px; transform: translate(-50%,-50%) scale(1.1) rotate(180deg); opacity: 0.9; }
  100% { width: 130px; height: 130px; transform: translate(-50%,-50%) scale(1.4) rotate(360deg); opacity: 0; }
}
@keyframes impact-earth {
  0%   { width: 0; height: 0; transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
  20%  { width: 50px; height: 50px; transform: translate(-50%,-50%) scale(1) rotate(-5deg); opacity: 1; }
  40%  { width: 80px; height: 80px; transform: translate(-50%,-50%) scale(1.05) rotate(5deg); opacity: 0.9; }
  100% { width: 120px; height: 120px; transform: translate(-50%,-50%) scale(1.2); opacity: 0; }
}
@keyframes impact-neutre {
  0%   { width: 0; height: 0; transform: translate(-50%,-50%); opacity: 1; }
  50%  { width: 70px; height: 70px; transform: translate(-50%,-50%); opacity: 0.85; }
  100% { width: 100px; height: 100px; transform: translate(-50%,-50%); opacity: 0; }
}

/* Air streak: skewed motion blur look */
.arena-projectile.streak {
  font-stretch: condensed;
}

/* Earth shake: ground impact triggers rumble */
.arena-fighter.anim-earth-rumble {
  animation: earth-rumble 0.5s ease-out;
}
@keyframes earth-rumble {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-3px) translateX(-2px); }
  40%      { transform: translateY(2px) translateX(2px); }
  60%      { transform: translateY(-1px) translateX(-1px); }
  80%      { transform: translateY(1px); }
}

/* Trail style for fire particles */
.arena-projectile.trail {
  text-shadow: 0 0 10px currentColor;
}
/* ════════════════════════════════════════════════════════
   v18 — LIVE CHAT (Fekah-style floating)
   ════════════════════════════════════════════════════════ */
.live-chat {
  position: fixed;
  bottom: 0;
  left: 12px;
  width: 460px;
  max-width: calc(100vw - 24px);
  z-index: 100;
  background: linear-gradient(180deg, rgba(20,16,12,0.95) 0%, rgba(12,8,4,0.97) 100%);
  border: 1.5px solid #4a3a1e;
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6);
  font-size: 11.5px;
  transition: transform 0.25s ease;
}
.live-chat.collapsed {
  transform: translateY(calc(100% - 36px));
}
.live-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border-bottom: 1px solid #4a3a1e;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
  user-select: none;
  height: 36px;
  box-sizing: border-box;
}
.live-chat-head:hover { background: linear-gradient(180deg, #3a2a18 0%, #2a1f10 100%); }
.lc-tabs { display: flex; gap: 8px; flex: 1; overflow: hidden; }
.lc-tab {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  color: #a89878;
  border: 1px solid transparent;
}
.lc-tab.active {
  color: var(--gold-light);
  background: rgba(184,120,8,0.18);
  border-color: rgba(184,120,8,0.5);
}
.lc-toggle {
  color: var(--gold-light);
  font-size: 14px;
  margin-left: 8px;
}
.live-chat-body {
  height: 220px;
  overflow-y: auto;
  padding: 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: #5a4a20 transparent;
}
.live-chat-body::-webkit-scrollbar { width: 6px; }
.live-chat-body::-webkit-scrollbar-thumb { background: #5a4a20; border-radius: 3px; }
.lc-line {
  margin-bottom: 4px;
  line-height: 1.4;
  word-break: break-word;
  animation: lc-fade-in 0.3s ease-out;
}
@keyframes lc-fade-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lc-time { color: #6a5a40; font-family: monospace; }
.lc-ch { font-weight: 700; margin-left: 4px; }
.lc-pseudo { color: #d8c898; font-weight: 700; margin-left: 4px; }
.lc-msg { color: #c8b888; margin-left: 4px; }

/* Avoid overlap with bottom history strip on small screens */
@media (max-width: 900px) {
  .live-chat { width: calc(100vw - 24px); }
  .live-chat-body { height: 160px; }
}
/* ════════════════════════════════════════════════════════
   v19 — AUTH SCREEN PREMIUM (signup + login)
   ════════════════════════════════════════════════════════ */
.auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  font-family: var(--font-main, sans-serif);
}
.auth-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(232,128,40,0.18), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(120,80,200,0.18), transparent 60%),
    linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
  z-index: -1;
}
.auth-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(-45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 80px);
  pointer-events: none;
}
.auth-card {
  width: 460px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(40,28,16,0.96) 0%, rgba(22,16,10,0.98) 100%);
  border: 2px solid #6a4818;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,200,80,0.08) inset;
  animation: auth-in 0.4s ease-out;
}
@keyframes auth-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-brand {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(184,120,8,0.3);
}
.auth-emblem {
  font-size: 36px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255,200,80,0.18), transparent 60%);
  border: 2px solid #ffd060;
  border-radius: 50%;
  color: #ffd060;
  text-shadow: 0 0 18px #ffd060;
}
.auth-titles { flex: 1; }
.auth-title {
  font-size: 22px; font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ffe898 0%, #c89030 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.auth-subtitle { font-size: 11px; color: #a89878; letter-spacing: 1px; margin-top: 2px; }
.auth-tabs {
  display: flex; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid #4a3a1a;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  background: transparent; border: none;
  color: #a89878; font-weight: 700; font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab:hover { color: var(--gold-light, #ffd060); }
.auth-tab.active { color: var(--gold-light, #ffd060); border-bottom-color: var(--gold-light, #ffd060); }
.auth-error {
  padding: 8px 12px; margin-bottom: 12px;
  background: rgba(200,60,60,0.15);
  border-left: 3px solid #c83030;
  color: #ffb0b0;
  font-size: 12px;
  border-radius: 4px;
}
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font-size: 11px; font-weight: 700; color: #a89878; letter-spacing: 0.5px; margin-top: 6px; }
.auth-input {
  background: #0e0a04;
  border: 1.5px solid #4a3a1a;
  color: #e8d8a0;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--gold, #c89030); box-shadow: 0 0 0 3px rgba(232,160,40,0.2); }
.auth-row2 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; align-items: end; }
.auth-sex { display: flex; gap: 8px; padding-top: 4px; }
.auth-sex label {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  background: #1a1408;
  border: 1.5px solid #4a3a1a;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #a89878;
  transition: all 0.15s;
}
.auth-sex label:has(input:checked) { border-color: var(--gold, #c89030); color: var(--gold-light, #ffd060); background: rgba(232,160,40,0.12); }
.auth-sex input { display: none; }
.auth-servers { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.auth-server {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #1a1408;
  border: 1.5px solid #4a3a1a;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
}
.auth-server.open:hover { border-color: var(--c, #c89030); transform: translateX(2px); }
.auth-server.selected {
  border-color: var(--c);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), color-mix(in srgb, var(--c) 14%, transparent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 30%, transparent);
}
.auth-server.soon { opacity: 0.5; cursor: not-allowed; }
.auth-server-icon { font-size: 28px; flex-shrink: 0; }
.auth-server-info { flex: 1; }
.auth-server-name { font-size: 14px; font-weight: 800; }
.auth-server-desc { font-size: 11px; color: #a89878; }
.auth-server-status { font-size: 14px; color: var(--gold-light, #ffd060); }
.auth-cgu {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 11.5px; color: #c8b888;
  cursor: pointer;
}
.auth-submit {
  margin-top: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 1.5px solid #ffd060;
  border-radius: 8px;
  color: #1a1408;
  font-family: inherit;
  font-size: 14px; font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,200,80,0.3) inset;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 18px rgba(255,200,80,0.4); }
.auth-submit:active { transform: translateY(0); }
.auth-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(184,120,8,0.25);
  font-size: 11px; color: #8a7858; text-align: center;
}

/* ════════════════════════════════════════════════════════
   v19 — RANKING PAGE
   ════════════════════════════════════════════════════════ */
.ranking-page { padding: 16px; }
.ranking-header {
  background: linear-gradient(135deg, rgba(232,128,40,0.1), rgba(40,30,18,0.6));
  border: 1.5px solid #6a4818;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.ranking-title {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #ffe898, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 1.5px;
}
.ranking-sub { font-size: 12px; color: #a89878; margin-top: 4px; }
.ranking-filters {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
  background: #1a1408;
  border: 1px solid #3a2a1a;
  border-radius: 8px;
  padding: 10px 14px;
}
.rk-filter { display: flex; flex-direction: column; gap: 4px; }
.rk-filter label { font-size: 10px; color: #a89878; letter-spacing: 1px; font-weight: 700; }
.rk-filter select {
  background: #0e0a04; color: #e8d8a0;
  border: 1px solid #4a3a1a; border-radius: 4px;
  padding: 5px 8px; font-size: 12px;
}
.ranking-table { display: flex; flex-direction: column; gap: 4px; }
.rk-row {
  display: grid;
  grid-template-columns: 50px 1.5fr 100px 1.5fr 80px 80px 80px;
  gap: 8px;
  padding: 10px 14px;
  background: #14100a;
  border: 1px solid #3a2a1a;
  border-radius: 6px;
  align-items: center;
  font-size: 12.5px;
}
.rk-row.rk-head {
  background: #2a1f10;
  font-size: 10px;
  letter-spacing: 1px;
  color: #a89878;
  font-weight: 800;
  border-color: #4a3a1a;
}
.rk-row.me {
  border-color: var(--gold, #c89030);
  background: linear-gradient(90deg, rgba(232,160,40,0.1), #14100a);
  box-shadow: 0 0 10px rgba(232,160,40,0.15);
}
.rk-rank { font-size: 16px; font-weight: 900; text-align: center; }
.rk-pseudo b { color: var(--gold-light, #ffd060); }
.rk-me-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  background: var(--gold, #c89030); color: #1a1408;
  padding: 1px 6px; border-radius: 6px; margin-left: 4px;
}
.rk-chars { display: flex; flex-wrap: wrap; gap: 3px; }
.rk-mini {
  font-size: 9.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  background: rgba(0,0,0,0.4); color: #d8c898;
  border: 1px solid rgba(184,120,8,0.25);
}
.rk-mini small { color: var(--gold-light, #ffd060); margin-left: 2px; font-size: 9px; }
.rk-maxlvl b, .rk-totlvl b { color: var(--gold-light, #ffd060); font-size: 14px; }
.rk-empty { padding: 30px; text-align: center; color: #6a5a40; font-style: italic; }
.ranking-info {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(80,120,200,0.08);
  border-left: 3px solid #6080c8;
  border-radius: 4px;
  font-size: 11.5px;
  color: #a8b8d8;
}

@media (max-width: 720px) {
  .rk-row { grid-template-columns: 40px 1fr 70px 80px 60px 60px; font-size: 11px; }
  .rk-server { display: none; }
}
/* ════════════════════════════════════════════════════════
   v20 — RANKING CONTRAST FIX + CC POLISH
   ════════════════════════════════════════════════════════ */

/* Ranking — fix faint text over light gradient */
.ranking-page { padding: 16px; }
.ranking-header {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.ranking-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(232,160,40,0.15), transparent 60%);
  pointer-events: none;
}
.ranking-title {
  position: relative;
  font-size: 24px; font-weight: 900;
  background: linear-gradient(135deg, #ffe898 0%, #c89030 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.ranking-sub { position: relative; font-size: 12px; color: #d8c898; margin-top: 4px; font-weight: 600; }

.ranking-filters {
  background: linear-gradient(180deg, #1f1810 0%, #14100a 100%);
  border: 1.5px solid #4a3a1a;
}
.rk-filter label { color: #d8c898 !important; font-weight: 800; }
.rk-filter select {
  background: #0a0604 !important; color: #ffe898 !important;
  border: 1.5px solid #5a4a20 !important;
  font-weight: 700;
}

.ranking-info {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(80,120,200,0.18) 0%, rgba(40,60,120,0.1) 100%);
  border-left: 4px solid #80a8e8;
  border-radius: 6px;
  font-size: 12.5px;
  color: #e0e8f8;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ════════════════════════════════════════════════════════
   v20 — CHAR CREATE — sex selector + tighter layout
   ════════════════════════════════════════════════════════ */
.cc-fields-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}
.cc-field-name { display: flex; flex-direction: column; gap: 6px; }
.cc-field-sex { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.cc-sex-toggle { display: flex; gap: 6px; }
.cc-sex-toggle label {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  background: #1a1408;
  border: 1.5px solid #4a3a1a;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #a89878;
  transition: all 0.15s;
  white-space: nowrap;
}
.cc-sex-toggle label:hover { border-color: #6a4818; color: #d8c898; }
.cc-sex-toggle label:has(input:checked) {
  border-color: var(--gold, #c89030);
  color: var(--gold-light, #ffd060);
  background: linear-gradient(180deg, rgba(232,160,40,0.18), rgba(232,160,40,0.05));
  box-shadow: 0 0 12px rgba(232,160,40,0.25), inset 0 0 0 1px rgba(255,200,80,0.2);
}
.cc-sex-toggle input { display: none; }

/* Make the pros/cons + tip block always visible — fix truncation */
.cc-pros-cons {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.cc-pros, .cc-cons {
  padding: 10px 12px;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 6px;
  border: 1px solid #3a2a1a;
  min-height: 70px;
}
.cc-pros { border-left: 3px solid #60a060; }
.cc-cons { border-left: 3px solid #c84040; }
.cc-pc-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-bottom: 4px; }
.cc-pros .cc-pc-title { color: #80f898; }
.cc-cons .cc-pc-title { color: #ff9090; }
.cc-pc-text { font-size: 11.5px; color: #e8d8a0 !important; line-height: 1.4; }
.cc-tip {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(232,200,80,0.14) 0%, rgba(232,200,80,0.05) 100%);
  border-left: 3px solid #ffd060;
  border-radius: 4px;
  font-size: 12px;
  color: #ffe898 !important;
  line-height: 1.45;
}
.cc-tip b { color: #fff; }

/* Better detail card framing — Dofus Retro vibe */
.cc-detail-card {
  background: linear-gradient(180deg, #1a1408 0%, #0e0a04 100%);
  border: 2px solid var(--cls-color, #6a4818);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,200,80,0.05) inset;
}
.cc-detail-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(184,120,8,0.3);
  position: relative;
}
.cc-detail-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--cls-color) 25%, transparent), transparent 60%);
  pointer-events: none;
}
.cc-detail-portrait {
  position: relative;
  width: 110px; height: 110px;
  border: 3px solid var(--cls-color, #c89030);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.5) 70%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 24px color-mix(in srgb, var(--cls-color, #c89030) 40%, transparent);
}
.cc-detail-portrait img { width: 90px; height: 90px; object-fit: contain; }
.cc-detail-titles { position: relative; flex: 1; }
.cc-detail-name {
  font-size: 32px; font-weight: 900;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  line-height: 1;
}
.cc-detail-role {
  font-size: 12px; color: #d8c898;
  letter-spacing: 1.5px;
  margin: 6px 0 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.cc-detail-elems { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-elem-badge {
  font-size: 11px; font-weight: 800;
  padding: 3px 10px;
  border: 1.5px solid;
  border-radius: 12px;
  letter-spacing: 0.5px;
}
.cc-detail-body { padding: 16px 20px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%); }
.cc-detail-desc {
  font-size: 13px;
  color: #e8d8a0 !important;
  font-style: italic;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 3px solid var(--cls-color, #c89030);
  margin-bottom: 14px;
}

.cc-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.cc-stat-block {
  background: linear-gradient(180deg, #2a1f10 0%, #14100a 100%);
  border: 1.5px solid #4a3a1a;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}
.cc-stat-icon { font-size: 20px; margin-bottom: 2px; }
.cc-stat-val { font-size: 22px; font-weight: 900; color: var(--gold-light, #ffd060); line-height: 1; }
.cc-stat-lbl { font-size: 10px; color: #a89878; letter-spacing: 1px; margin-top: 4px; font-weight: 700; }

.cc-info-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cc-info-row {
  display: flex; gap: 12px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid #3a2a1a;
  border-radius: 4px;
  font-size: 12px;
  color: #e8d8a0;
}
.cc-info-lbl { color: var(--gold-light, #ffd060); font-weight: 700; min-width: 90px; }

.cc-name-section {
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
}
.cc-name-label { display: block; font-size: 11px; font-weight: 800; color: var(--gold-light, #ffd060); letter-spacing: 1.5px; margin-bottom: 6px; }
.cc-name-input {
  width: 100%;
  background: #0a0604;
  border: 1.5px solid #4a3a1a;
  color: #ffe898;
  font-size: 14px; font-weight: 700;
  padding: 11px 14px;
  border-radius: 6px;
  font-family: inherit;
  box-sizing: border-box;
}
.cc-name-input:focus { outline: none; border-color: var(--gold, #c89030); box-shadow: 0 0 0 3px rgba(232,160,40,0.18); }
.cc-actions { display: flex; gap: 8px; margin-top: 12px; }
.cc-btn-create {
  flex: 1;
  padding: 12px;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 1.5px solid #ffd060;
  border-radius: 8px;
  color: #1a1408;
  font-family: inherit;
  font-size: 14px; font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,200,80,0.3) inset;
}
.cc-btn-create:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 18px rgba(255,200,80,0.4); }
.cc-btn-create:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 720px) {
  .cc-fields-row { grid-template-columns: 1fr; }
  .cc-field-sex { min-width: 0; }
}

/* ════════════════════════════════════════════════════════
   v18 — CINEMATIC BATTLEFIELD
   Real arena: sky + perspective floor + bigger sprites
   shadows, reflections, banner name plates, ambient FX
   ════════════════════════════════════════════════════════ */

/* Stage container — taller + layered backdrop */
.dash-combat-arena {
  position: relative;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}
/* SKY/HORIZON layer */
.dash-combat-arena::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,120,0.18) 0%, transparent 70%),
    linear-gradient(180deg,
      #1a1208 0%,
      #2a1c0e 38%,
      #3a2818 60%,
      #1a1004 100%);
  z-index: 0;
}
/* VIGNETTE on top */
.dash-combat-arena::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  z-index: 5;
}

/* Stage = the playable battlefield row */
.arena-stage {
  position: relative;
  min-height: 260px !important;
  padding: 18px 32px 90px !important;     /* room below for banners */
  background: transparent !important;
  z-index: 2;
  overflow: visible;
}

/* PERSPECTIVE FLOOR — tilted grid */
.arena-stage::before {
  content: '';
  position: absolute;
  left: -10%; right: -10%; bottom: 0;
  height: 55%;
  background:
    /* tile lines */
    repeating-linear-gradient(90deg,
      transparent 0 39px,
      rgba(120,80,30,0.22) 39px 40px),
    repeating-linear-gradient(0deg,
      transparent 0 24px,
      rgba(120,80,30,0.18) 24px 25px),
    /* warm floor tone */
    linear-gradient(180deg,
      rgba(80,52,24,0.0) 0%,
      rgba(96,64,28,0.55) 35%,
      rgba(58,38,16,0.85) 100%);
  transform: perspective(420px) rotateX(48deg);
  transform-origin: center top;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 28px 30px -20px rgba(255,180,80,0.12),
    inset 0 -40px 80px -20px rgba(0,0,0,0.6);
}
/* HORIZON GLOW LINE */
.arena-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 55%;
  height: 70px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%,
      rgba(255,200,120,0.22) 0%,
      rgba(255,160,80,0.08) 40%,
      transparent 75%);
  pointer-events: none;
  z-index: 1;
  filter: blur(2px);
}

/* Side rim lights — warm left, cool right */
.arena-side-players::before,
.arena-side-monsters::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 18%;
  pointer-events: none;
  z-index: 0;
}
.arena-side-players  { position: relative; }
.arena-side-monsters { position: relative; }
.arena-side-players::before  { left: 0;  background: linear-gradient(90deg, rgba(255,160,80,0.10), transparent); }
.arena-side-monsters::before { right: 0; background: linear-gradient(270deg, rgba(180,80,40,0.12), transparent); }

/* ── Fighter card override: sprite floats above floor, banner is detached below ── */
.arena-fighter {
  position: relative;
  min-width: 150px !important;
  max-width: 190px !important;
  z-index: 3;
  align-items: center;
  gap: 0;
}
.arena-sprite-wrap {
  height: 150px !important;
  width: 100%;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
}
.arena-sprite {
  height: 138px !important;
  max-width: 150px !important;
  filter:
    drop-shadow(0 14px 6px rgba(0,0,0,0.55))
    drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}

/* Ground shadow — bigger ellipse on the floor under the sprite */
.arena-fighter::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 64px !important;             /* sits on the floor, below sprite, above card */
  transform: translateX(-50%);
  width: 100px !important;
  height: 16px !important;
  background: radial-gradient(ellipse, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, transparent 75%);
  filter: blur(2.5px);
  z-index: 1;
  pointer-events: none;
}
.arena-fighter.fighting::after {
  animation: shadow-bob 2.4s ease-in-out infinite;
}
@keyframes shadow-bob {
  0%,100% { width: 100px; opacity: 0.85; }
  50%     { width: 92px;  opacity: 0.7;  }
}
.arena-fighter.dead::after { width: 60px !important; opacity: 0.3; }

/* Banner name plate — engraved metal, anchored under the floor */
.arena-card {
  position: relative;
  margin-top: 6px;
  background:
    linear-gradient(180deg,
      #f5dca0 0%,
      #d8b878 45%,
      #a87838 100%) !important;
  border: 1.5px solid #6a4818 !important;
  border-radius: 5px !important;
  padding: 5px 9px 6px !important;
  width: 86%;
  max-width: 168px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 6px 14px rgba(0,0,0,0.7),
    0 2px 0 rgba(0,0,0,0.4);
}
/* Banner pin/nail decorations */
.arena-card::before,
.arena-card::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff5c0, #8a5818 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.arena-card::before { left: 4px; }
.arena-card::after  { right: 4px; }

/* Active turn — gold halo upgrade */
.arena-fighter.is-active-turn {
  z-index: 6 !important;
}
.arena-fighter.is-active-turn .arena-sprite-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 110px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,210,90,0.55) 0%, transparent 70%);
  filter: blur(3px);
  animation: halo-pulse 1.2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes halo-pulse {
  0%,100% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  50%     { transform: translateX(-50%) scale(1.15); opacity: 1;   }
}

/* Center divider — crossed swords on the floor */
.arena-divider {
  width: 64px !important;
  position: relative;
  z-index: 2;
}
.arena-vs {
  font-size: 0 !important;
  width: 56px; height: 56px;
  display: block;
  background: radial-gradient(circle, rgba(40,20,10,0.7) 0%, transparent 70%);
  position: relative;
}
.arena-vs::before,
.arena-vs::after {
  content: '⚔';
  font-size: 30px !important;
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #f0c060;
  text-shadow:
    0 0 10px rgba(255,200,80,0.7),
    0 2px 3px rgba(0,0,0,0.9);
  filter: drop-shadow(0 0 4px #000);
}
.arena-vs::after {
  transform: rotate(180deg);
  opacity: 0.45;
  font-size: 38px !important;
  filter: blur(2px);
}
.arena-vs.idle::before { opacity: 0.5; }
.arena-vs.idle::after  { opacity: 0.25; }

/* Ambient floor dust (3 motes, slow drift) */
.dash-combat-arena .arena-stage > .arena-dust {
  position: absolute;
  bottom: 18%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,210,140,0.4);
  box-shadow: 0 0 6px rgba(255,200,120,0.6);
  pointer-events: none;
  z-index: 2;
  animation: dust-drift 12s linear infinite;
}
@keyframes dust-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translate(60px, -40px); opacity: 0; }
}

/* Header tweak — slimmer for more battlefield space */
.arena-header { padding: 5px 14px !important; }

/* Side spacing — more breathing room */
.arena-side {
  gap: 18px !important;
  align-items: flex-end !important;
  z-index: 3;
}

/* Hover lift more pronounced */
.arena-fighter:hover { transform: translateY(-6px) !important; }
.arena-fighter:hover .arena-sprite {
  filter:
    drop-shadow(0 18px 8px rgba(0,0,0,0.6))
    drop-shadow(0 0 12px rgba(255,200,120,0.35));
}

/* No-targets text — recenter in stage */
.arena-no-targets {
  align-self: center !important;
  font-size: 14px !important;
  color: #c8a878 !important;
  opacity: 0.8 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  z-index: 3;
}

/* Mobile guard */
@media (max-width: 720px) {
  .dash-combat-arena { min-height: 260px; }
  .arena-stage { min-height: 220px !important; padding: 12px 12px 80px !important; }
  .arena-sprite-wrap { height: 120px !important; }
  .arena-sprite { height: 110px !important; max-width: 110px !important; }
  .arena-fighter { min-width: 110px !important; max-width: 130px !important; }
}

/* ════════════════════════════════════════════════════════
   v19 — AUTH SCREEN PREMIUM (split layout + arena bg)
   ════════════════════════════════════════════════════════ */

.auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  font-family: var(--font-main, sans-serif);
  overflow: auto;
  padding: 24px;
}

/* Background: floating island arena, fading down + warm sky */
.auth-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    /* dark vignette overlay */
    radial-gradient(ellipse at center, rgba(10,8,4,0.35) 0%, rgba(10,8,4,0.85) 100%),
    /* the arena image, faded */
    linear-gradient(180deg, rgba(10,8,4,0.45) 0%, rgba(10,8,4,0.7) 60%, rgba(10,8,4,0.95) 100%),
    url('../assets/arena-bg.png'),
    /* fallback warm gradient */
    linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center 25%, center;
  background-repeat: no-repeat;
  animation: auth-bg-pan 60s ease-in-out infinite alternate;
}
@keyframes auth-bg-pan {
  0%   { background-position: center, center, center 20%, center; }
  100% { background-position: center, center, center 35%, center; }
}

/* Floating motes / particles overlay */
.auth-stars {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,220,140,0.5) 0, transparent 1.2px),
    radial-gradient(circle at 87% 33%, rgba(255,220,140,0.4) 0, transparent 1.5px),
    radial-gradient(circle at 25% 78%, rgba(255,220,140,0.4) 0, transparent 1.2px),
    radial-gradient(circle at 70% 88%, rgba(255,220,140,0.5) 0, transparent 1.5px),
    radial-gradient(circle at 45% 14%, rgba(255,220,140,0.3) 0, transparent 1px),
    radial-gradient(circle at 60% 50%, rgba(255,220,140,0.4) 0, transparent 1.2px);
  background-size: 100% 100%;
  animation: stars-twinkle 6s ease-in-out infinite alternate;
}
@keyframes stars-twinkle {
  0%   { opacity: 0.6; transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(-3px); }
}

/* Two-column shell */
.auth-shell {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  width: 100%;
  max-width: 1080px;
  align-items: stretch;
  animation: auth-in 0.5s ease-out;
}

/* ── LEFT PITCH ───────────────────────────────── */
.auth-pitch {
  display: flex; flex-direction: column;
  padding: 6px 8px;
  color: #e8d8a0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}

.auth-logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.auth-logo-emblem {
  font-size: 38px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(255,200,80,0.25) 0%, rgba(255,200,80,0.08) 50%, transparent 75%);
  border: 2px solid #ffd060;
  border-radius: 50%;
  color: #ffe898;
  text-shadow: 0 0 20px #ffd060, 0 0 40px rgba(255,200,80,0.5);
  box-shadow:
    inset 0 0 14px rgba(255,200,80,0.3),
    0 0 24px rgba(255,200,80,0.25);
  animation: emblem-glow 2.6s ease-in-out infinite alternate;
}
@keyframes emblem-glow {
  from { box-shadow: inset 0 0 14px rgba(255,200,80,0.3), 0 0 24px rgba(255,200,80,0.25); }
  to   { box-shadow: inset 0 0 22px rgba(255,200,80,0.5), 0 0 36px rgba(255,200,80,0.5); }
}
.auth-logo-main {
  font-size: 26px; font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #fff5c0 0%, #ffd060 50%, #c89030 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.auth-logo-sub {
  font-size: 12px; font-weight: 700;
  letter-spacing: 6px;
  color: #c8a060;
  margin-top: 2px;
}

.auth-hero {
  font-size: 28px; font-weight: 900;
  line-height: 1.18;
  margin: 0 0 14px;
  color: #fff5e0;
  letter-spacing: 0.3px;
}
.auth-hero span {
  background: linear-gradient(135deg, #ffe898 0%, #ff8030 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.auth-tagline {
  font-size: 13.5px; line-height: 1.55;
  color: #d8c898;
  margin: 0 0 22px;
  max-width: 520px;
}
.auth-tagline b { color: #ffd060; }

/* Feature grid */
.auth-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.auth-feat {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(40,28,16,0.7), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.auth-feat:hover {
  transform: translateY(-2px);
  border-color: rgba(255,200,80,0.55);
  background: linear-gradient(135deg, rgba(60,42,22,0.8), rgba(30,20,10,0.9));
}
.aft-ico {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.auth-feat b {
  display: block;
  font-size: 12.5px;
  color: #ffd890;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}
.auth-feat span {
  display: block;
  font-size: 11px;
  color: #b8a888;
  line-height: 1.35;
}

/* Stats counters */
.auth-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(30,20,10,0.7));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  margin-bottom: 18px;
}
.auth-stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.auth-stat b {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.auth-stat span {
  font-size: 10.5px;
  color: #a89878;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

.auth-pitch-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; color: #8a7858;
  letter-spacing: 0.5px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(184,120,8,0.3);
  flex-wrap: wrap;
  gap: 8px;
}
.auth-version {
  background: linear-gradient(135deg, #c83030, #802010);
  color: #ffd0d0;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.auth-disclaimer {
  font-style: italic;
  opacity: 0.8;
}

/* ── RIGHT CARD ───────────────────────────────── */
.auth-card {
  width: auto !important;
  max-width: none !important;
  background:
    linear-gradient(180deg, rgba(40,28,16,0.92) 0%, rgba(22,16,10,0.96) 100%) !important;
  border: 2px solid #6a4818 !important;
  border-radius: 14px !important;
  padding: 26px 30px !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,200,80,0.1) inset,
    0 0 60px rgba(255,160,40,0.12) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-self: center;
}

.auth-card-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(184,120,8,0.3);
}
.auth-card-title {
  font-size: 18px; font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.auth-card-sub {
  font-size: 11.5px; color: #a89878;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* Improve submit button shine */
.auth-submit {
  position: relative;
  overflow: hidden;
}
.auth-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.5s ease-in-out infinite;
}
@keyframes btn-shine {
  0%, 70%  { left: -120%; }
  100%     { left: 130%;  }
}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 540px;
  }
  .auth-pitch { order: 2; }
  .auth-card  { order: 1; }
  .auth-features { grid-template-columns: 1fr; }
  .auth-hero { font-size: 22px; }
}
@media (max-width: 540px) {
  .auth-screen { padding: 12px; }
  .auth-card { padding: 20px 18px !important; }
  .auth-stats { grid-template-columns: repeat(2, 1fr); }
  .auth-logo-main { font-size: 22px; }
  .auth-hero { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════
   v20 — AUTH PITCH POLISH + WIZARD
   ════════════════════════════════════════════════════════ */

/* Live badges row above hero */
.auth-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.auth-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(40,28,16,0.8);
  border: 1px solid rgba(184,120,8,0.5);
  color: #c8a060;
  backdrop-filter: blur(4px);
}
.auth-badge.live {
  border-color: rgba(80,200,80,0.5);
  color: #80f898;
  background: rgba(20,40,20,0.8);
}
.auth-badge.live .bd-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #40e060;
  box-shadow: 0 0 6px #40e060, 0 0 12px rgba(64,224,96,0.6);
  animation: bd-pulse 1.4s ease-in-out infinite;
}
@keyframes bd-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(0.8); }
}

/* Section titles */
.auth-section-title {
  font-size: 11px; font-weight: 800;
  letter-spacing: 3px;
  color: #c8a060;
  margin: 18px 0 10px;
  position: relative;
  padding-left: 22px;
}
.auth-section-title::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, #c8a060);
}

/* HOW IT WORKS — 3 numbered steps with arrows */
.auth-steps {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}
.auth-step {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(40,28,16,0.7), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 8px;
  min-width: 0;
}
.ast-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe898, #c89030);
  color: #2a1a08;
  font-weight: 900; font-size: 14px;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}
.ast-body { min-width: 0; }
.ast-body b {
  display: block;
  font-size: 12.5px;
  color: #ffd890;
  margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ast-body span {
  display: block;
  font-size: 10.5px;
  color: #b8a888;
  line-height: 1.3;
}
.ast-arrow {
  align-self: center;
  color: #c8a060;
  font-size: 16px;
  font-weight: 800;
  opacity: 0.5;
}

/* Stats row → 5 columns now */
.auth-stats {
  grid-template-columns: repeat(5, 1fr) !important;
}
.auth-stats .auth-stat b { font-size: 20px; }

/* Roadmap chips */
.auth-roadmap {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.aro-item {
  font-size: 11.5px; font-weight: 700;
  padding: 5px 10px;
  background: rgba(40,28,16,0.75);
  border: 1px dashed rgba(184,120,8,0.5);
  border-radius: 14px;
  color: #c8b888;
  letter-spacing: 0.3px;
}
.aro-item:hover {
  border-style: solid;
  border-color: rgba(255,200,80,0.6);
  color: #ffd890;
  background: rgba(60,42,20,0.85);
  cursor: default;
}

/* ════════════════════════════════════════════════════════
   SIGNUP WIZARD
   ════════════════════════════════════════════════════════ */

.auth-wizard { gap: 0 !important; }

/* Stepper progress */
.auth-stepper {
  display: flex; align-items: center;
  margin: 4px 0 18px;
  gap: 0;
}
.ast-dot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ast-dot span {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1a1408;
  border: 2px solid #4a3a1a;
  color: #6a5838;
  font-weight: 900; font-size: 13px;
  transition: all 0.25s;
}
.ast-dot i {
  font-size: 10px;
  font-style: normal;
  color: #6a5838;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.ast-dot.active span {
  background: linear-gradient(135deg, #ffe898, #c89030);
  border-color: #ffd060;
  color: #2a1a08;
  box-shadow: 0 0 14px rgba(255,200,80,0.5);
  transform: scale(1.1);
}
.ast-dot.active i { color: #ffd890; }
.ast-dot.done span {
  background: rgba(80,160,80,0.25);
  border-color: #4a8a4a;
  color: #80c080;
}
.ast-dot.done span::before {
  content: '✓';
}
.ast-dot.done span > * { display: none; } /* hide number when done */
.ast-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #4a3a1a, #4a3a1a);
  margin: 0 6px;
  align-self: flex-start;
  margin-top: 14px;
}

/* Step panes */
.auth-step-pane {
  display: none;
  flex-direction: column;
  gap: 6px;
  animation: pane-in 0.25s ease-out;
}
.auth-step-pane.active { display: flex; }
@keyframes pane-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Avatar preview block (step 1) */
.auth-avatar-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(60,42,20,0.5), rgba(30,20,10,0.7));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  margin-bottom: 8px;
}
.aav-circle {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: radial-gradient(circle, rgba(255,200,80,0.25), transparent 70%);
  border: 2px solid #ffd060;
  border-radius: 50%;
  color: #ffe898;
  box-shadow: 0 0 14px rgba(255,200,80,0.3);
  flex-shrink: 0;
}
.aav-info { flex: 1; min-width: 0; }
.aav-label { font-size: 12px; font-weight: 800; color: #ffd890; letter-spacing: 0.5px; }
.aav-hint { font-size: 11px; color: #a89878; line-height: 1.4; margin-top: 2px; }

/* Required marker */
.auth-req { color: #ff8060; margin-left: 2px; }

/* Input wrap (for status icon / eye button) */
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-wrap .auth-input { flex: 1; padding-right: 36px; }
.auth-input-status {
  position: absolute; right: 12px;
  font-size: 16px; font-weight: 900;
  pointer-events: none;
  transition: color 0.15s;
}
.auth-input-status.ok  { color: #50d070; text-shadow: 0 0 6px rgba(80,224,120,0.5); }
.auth-input-status.bad { color: #f06060; text-shadow: 0 0 6px rgba(240,96,96,0.5); }

.auth-eye {
  position: absolute; right: 6px;
  background: transparent; border: none;
  color: #a89878;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.auth-eye:hover { color: #ffd060; }

/* Hint line under inputs */
.auth-hint {
  font-size: 10.5px;
  color: #8a7858;
  margin-top: -2px;
  margin-bottom: 6px;
  line-height: 1.4;
  transition: color 0.15s;
}
.auth-hint.ok  { color: #80c080; }
.auth-hint.bad { color: #e88080; }

/* Password strength meter */
.auth-pw-meter {
  display: flex; align-items: center; gap: 10px;
  margin-top: -2px;
  margin-bottom: 4px;
}
.apm-bar {
  flex: 1;
  height: 6px;
  background: #1a1408;
  border: 1px solid #4a3a1a;
  border-radius: 4px;
  overflow: hidden;
}
.apm-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
}
.apm-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  min-width: 90px;
  text-align: right;
  transition: color 0.2s;
}

/* Step actions row */
.auth-step-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(184,120,8,0.25);
}
.auth-step-actions .auth-btn-back {
  background: transparent;
  border: 1.5px solid #4a3a1a;
  color: #a89878;
  padding: 10px 16px;
  border-radius: 7px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-step-actions .auth-btn-back:hover {
  border-color: #c8a060;
  color: #ffd060;
}
.auth-step-actions .auth-btn-next {
  flex: 1;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  padding: 10px 16px;
  border-radius: 7px;
  font-family: inherit;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,200,80,0.3) inset;
}
.auth-step-actions .auth-btn-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6), 0 0 16px rgba(255,200,80,0.4);
}
.auth-step-actions .auth-submit {
  flex: 1;
  margin-top: 0 !important;
}

/* Recap card on step 3 */
.auth-recap {
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(30,20,10,0.75));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
}
.ar-title {
  font-size: 11px; font-weight: 800;
  color: #ffd890;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.ar-row {
  display: flex; justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(184,120,8,0.15);
}
.ar-row:last-child { border-bottom: none; }
.ar-row span { color: #a89878; }
.ar-row b { color: #ffe0a0; }

/* Responsive for steps row */
@media (max-width: 760px) {
  .auth-steps { flex-direction: column; }
  .ast-arrow { transform: rotate(90deg); }
}

/* ════════════════════════════════════════════════════════
   v21 — AUTH FIT-TO-VIEWPORT + readability + full width
   ════════════════════════════════════════════════════════ */

.auth-screen {
  padding: 18px 28px !important;
  align-items: center !important;
  /* Allow scroll only if absolutely needed (small heights) */
  overflow: auto;
}

/* Full-width shell, asymmetric grid */
.auth-shell {
  max-width: 1500px !important;
  width: 100%;
  gap: 36px !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr) !important;
  align-items: stretch !important;
}

/* PITCH — readable, no truncation, denser layout */
.auth-pitch {
  padding: 0 !important;
}

/* Logo block — slimmer */
.auth-logo { margin-bottom: 14px !important; gap: 12px !important; }
.auth-logo-emblem { width: 56px !important; height: 56px !important; font-size: 32px !important; }
.auth-logo-main   { font-size: 24px !important; letter-spacing: 2.5px !important; }
.auth-logo-sub    { font-size: 11px !important; letter-spacing: 5px !important; }

/* Badges */
.auth-badges { margin-bottom: 12px !important; }
.auth-badge  { font-size: 10px !important; padding: 3px 9px !important; }

/* Hero — tighter, bigger, readable */
.auth-hero {
  font-size: 26px !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
  letter-spacing: 0.2px !important;
}
.auth-tagline {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
  max-width: 720px !important;
  color: #d8c898 !important;
}

/* Section title — less vertical space */
.auth-section-title {
  margin: 12px 0 8px !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  padding-left: 22px !important;
}

/* HOW IT WORKS — fix truncated text + better spacing */
.auth-steps { gap: 10px !important; margin-bottom: 12px !important; }
.auth-step  { padding: 9px 12px !important; }
.ast-num    { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.ast-body b {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
}
.ast-body span { font-size: 11px !important; line-height: 1.35 !important; }

/* FEATURES — 3 columns to reduce height & let text breathe */
.auth-features {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.auth-feat   { padding: 9px 11px !important; gap: 9px !important; }
.aft-ico     { font-size: 22px !important; }
.auth-feat b {
  font-size: 12.5px !important;
  white-space: normal !important;
  margin-bottom: 2px !important;
}
.auth-feat span {
  font-size: 11px !important;
  line-height: 1.35 !important;
  display: block;
}

/* STATS — slimmer */
.auth-stats {
  padding: 10px 8px !important;
  margin-bottom: 12px !important;
  grid-template-columns: repeat(5, 1fr) !important;
}
.auth-stat b    { font-size: 19px !important; }
.auth-stat span { font-size: 10px !important; margin-top: 3px !important; }

/* ROADMAP — slimmer */
.auth-roadmap { gap: 5px !important; margin-bottom: 10px !important; }
.aro-item {
  font-size: 11px !important;
  padding: 4px 9px !important;
}

.auth-pitch-foot {
  margin-top: 6px !important;
  padding-top: 8px !important;
  font-size: 10.5px !important;
}

/* CARD — keep readable, fit height */
.auth-card {
  padding: 22px 26px !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 480px !important;
  justify-self: end;
  /* allow scroll inside the card if super tall content */
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.auth-card-head { padding-bottom: 10px !important; margin-bottom: 6px !important; }
.auth-card-title { font-size: 17px !important; }
.auth-card-sub   { font-size: 11.5px !important; }

.auth-tabs    { margin-bottom: 12px !important; }
.auth-tab     { padding: 8px !important; font-size: 13px !important; }

/* Form spacing tighter */
.auth-form { gap: 4px !important; }
.auth-label { margin-top: 4px !important; }
.auth-input { padding: 8px 11px !important; font-size: 13px !important; }
.auth-submit { padding: 10px !important; margin-top: 10px !important; }
.auth-foot   { margin-top: 10px !important; padding-top: 8px !important; }

/* Wizard — tighter */
.auth-stepper { margin: 2px 0 12px !important; }
.ast-dot span { width: 26px !important; height: 26px !important; font-size: 12px !important; }
.ast-dot i    { font-size: 9px !important; }
.ast-line     { margin-top: 12px !important; }

.auth-step-actions { margin-top: 10px !important; padding-top: 10px !important; }

/* ── RESPONSIVE FALLBACKS ────────────────────────────────── */
/* On narrower screens, stack vertically and allow scroll */
@media (max-width: 1100px) {
  .auth-shell {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    gap: 18px !important;
  }
  .auth-pitch { order: 2; }
  .auth-card  { order: 1; justify-self: stretch; max-width: none !important; }
  .auth-features { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
  .auth-screen { padding: 14px !important; }
  .auth-features { grid-template-columns: 1fr !important; }
  .auth-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .auth-steps  { flex-direction: column !important; }
  .ast-arrow   { transform: rotate(90deg); align-self: center; }
  .auth-hero   { font-size: 22px !important; }
}

/* For very tall content on small heights, allow vertical scroll */
@media (max-height: 760px) and (min-width: 1101px) {
  .auth-screen { align-items: flex-start !important; padding-top: 24px !important; padding-bottom: 24px !important; }
}

/* ════════════════════════════════════════════════════════
   v22 — USER PILL (titlebar)
   ════════════════════════════════════════════════════════ */
.dash-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  margin: 0 6px;
  background: linear-gradient(135deg, rgba(60,42,20,0.85) 0%, rgba(30,20,10,0.92) 100%);
  border: 1.5px solid rgba(184,120,8,0.55);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,200,80,0.15),
    0 2px 8px rgba(0,0,0,0.4);
  transition: all 0.15s;
  cursor: default;
}
.dash-user:hover {
  border-color: rgba(255,200,80,0.7);
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.25), 0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(255,200,80,0.18);
}
.du-avatar {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffe898, #c89030);
  color: #2a1a08;
  font-weight: 900; font-size: 14px;
  border-radius: 50%;
  border: 1.5px solid #ffd060;
  box-shadow: 0 0 8px rgba(255,200,80,0.4);
  flex-shrink: 0;
  text-transform: uppercase;
}
.du-info {
  display: flex; flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.du-pseudo {
  font-size: 12.5px; font-weight: 800;
  color: #ffd890; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.du-server {
  font-size: 9.5px; font-weight: 700;
  color: #c83030; letter-spacing: 1.2px;
  text-transform: uppercase;
}
.du-logout {
  background: transparent; border: none;
  color: #c87060; font-size: 14px; font-weight: 800;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.du-logout:hover { color: #ff8060; background: rgba(200,60,60,0.15); }

@media (max-width: 880px) {
  .du-info { display: none; }
  .dash-user { padding: 5px; }
}

/* ════════════════════════════════════════════════════════
   v23 — CHAR CREATION v2 polish
   ════════════════════════════════════════════════════════ */

/* Hero: dramatic portrait with halo */
.cc-detail-hero {
  position: relative;
  padding: 22px 22px 18px !important;
  overflow: hidden;
}
.cc-detail-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 50%, var(--cls-color, #c89030)1f 0%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px);
  pointer-events: none;
}
.cc-detail-portrait {
  position: relative;
  z-index: 2;
}
.cc-detail-portrait::after {
  content: '';
  position: absolute; inset: -10px;
  background: radial-gradient(circle, var(--cls-color, #c89030)55 0%, transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: cc-halo-pulse 2.6s ease-in-out infinite alternate;
}
@keyframes cc-halo-pulse {
  from { opacity: 0.5; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.08); }
}
.cc-detail-portrait img {
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.6));
}

/* Difficulty stars */
.cc-diff-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: #c8a060;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}
.cc-diff-stars {
  display: inline-flex; gap: 2px;
  font-size: 14px;
  color: #ffd060;
  filter: drop-shadow(0 0 4px rgba(255,200,80,0.5));
  letter-spacing: 1px;
}
.cc-diff-stars .empty { color: #4a3a1a; filter: none; }

/* Section titles inside detail */
.cc-detail-section {
  margin-top: 14px;
  font-size: 10.5px; font-weight: 800;
  color: #c8a060;
  letter-spacing: 2.5px;
  padding-left: 18px;
  position: relative;
  text-transform: uppercase;
}
.cc-detail-section::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, #c8a060);
}

/* Build paths */
.cc-builds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.cc-build {
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 6px;
}
.cc-build-name {
  font-size: 12px; font-weight: 800;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}
.cc-build-desc {
  font-size: 11px; line-height: 1.35;
  color: #b8a888;
}
.cc-build.force .cc-build-name    { color: #f08080; }
.cc-build.intel .cc-build-name    { color: #ff8050; }
.cc-build.agi   .cc-build-name    { color: #80f898; }
.cc-build.cha   .cc-build-name    { color: #ffd060; }
.cc-build.sage  .cc-build-name    { color: #b080f0; }

/* Starting spells preview */
.cc-spells-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.cc-spell-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(60,42,20,0.7), rgba(30,20,10,0.85));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 14px;
  font-size: 11px;
  color: #ffd890;
  font-weight: 700;
}
.cc-spell-chip .ico { font-size: 13px; }

/* "First steps" tip block */
.cc-firststeps {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(60,80,40,0.35), rgba(40,60,20,0.5));
  border: 1px solid rgba(120,200,80,0.4);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #c0e0a0;
}
.cc-firststeps b { color: #80e060; }

/* Make pros-cons more visual: bullet list */
.cc-pros, .cc-cons {
  background: linear-gradient(135deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85)) !important;
}
.cc-pros { border-left: 3px solid #50c060 !important; }
.cc-cons { border-left: 3px solid #c85040 !important; }

/* Class card on the left grid: difficulty dots */
.cc-class-card { position: relative; }
.cc-class-card .cc-diff-mini {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 1px;
  font-size: 9px;
  color: #ffd060;
  filter: drop-shadow(0 0 3px rgba(255,200,80,0.5));
}
.cc-class-card .cc-diff-mini .empty { color: #4a3a1a; filter: none; }

/* ════════════════════════════════════════════════════════
   v24 — LIVE CHAT polish (real-chat ready)
   ════════════════════════════════════════════════════════ */

/* Chat input row */
.lc-input-row {
  display: flex; gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #221a10 0%, #1a1408 100%);
  border-top: 1px solid #4a3a1a;
}
.lc-input {
  flex: 1;
  background: #0e0a04;
  border: 1.5px solid #4a3a1a;
  color: #e8d8a0;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lc-input:focus {
  outline: none;
  border-color: #c89030;
  box-shadow: 0 0 0 2px rgba(232,160,40,0.2);
}
.lc-input:disabled {
  background: #1a1408;
  color: #6a5838;
  cursor: not-allowed;
}
.lc-send {
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.4);
}
.lc-send:hover { transform: translateY(-1px); }
.lc-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Chat status (connection state) */
.lc-status {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #8a7858;
  padding: 0 10px 6px;
  text-align: right;
}
.lc-status.online { color: #80c060; }
.lc-status.offline { color: #c87060; }
.lc-status .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  vertical-align: middle;
  animation: lc-status-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-status-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

/* Messages: distinguish own messages */
.lc-line.own .lc-pseudo { color: #ffd060 !important; font-weight: 800; }
.lc-line.own            { background: rgba(255,200,80,0.06); padding: 2px 4px; border-radius: 3px; }
.lc-line .lc-pseudo.system { color: #80a0e0 !important; }
.lc-line.system .lc-msg    { font-style: italic; color: #a89878; }

/* ════════════════════════════════════════════════════════
   v25 — POLISH BATCH
   - Tooltip z-index + drop rate row
   - Ranking truncation fix
   - Save/backup cluster
   - Almanax extra polish
   - Combat sprite/lighting tweaks
   - Chat admin badge
   ════════════════════════════════════════════════════════ */

/* ─── Floating tooltip — bump z-index above any nav ─────── */
.floating-item-tooltip {
  z-index: 100000 !important;
}
.itip-drop-rate {
  display: block;
  margin: 6px 0 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  background: rgba(0,0,0,0.4);
  border-left: 3px solid currentColor;
}
.itip-drop-rate.rate-high { color: #80f898; }
.itip-drop-rate.rate-mid  { color: #ffd060; }
.itip-drop-rate.rate-low  { color: #c87060; }

/* ─── Ranking — kill text truncation, allow wrap ────────── */
.rk-row {
  align-items: center !important;
}
.rk-pseudo, .rk-name, .rk-server {
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}
.rk-chars {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
.rk-mini {
  white-space: nowrap !important;
}
.rk-row > * { min-width: 0; }

/* ─── Save cluster (replaces solo save button) ──────────── */
.dash-save-cluster {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 4px;
}
.dash-autosave {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(40,80,40,0.4);
  border: 1px solid rgba(80,200,80,0.45);
  border-radius: 14px;
  font-size: 10.5px; font-weight: 800;
  color: #80f898;
  letter-spacing: 0.5px;
  cursor: default;
  transition: all 0.2s;
}
/* v126 — Mode compact : juste le point vert pulsant, pas de texte */
.dash-autosave.compact {
  padding: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  justify-content: center;
}
.dash-autosave.compact .das-dot {
  width: 9px; height: 9px;
  box-shadow: 0 0 8px #40e060, 0 0 14px rgba(64,224,96,0.5);
}
.das-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #40e060;
  box-shadow: 0 0 6px #40e060;
  animation: das-pulse 2s ease-in-out infinite;
}
@keyframes das-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.8); }
}
.dash-autosave.saving {
  background: rgba(60,140,60,0.6);
  border-color: rgba(120,255,120,0.7);
  animation: das-saving-flash 0.6s ease-out;
}
@keyframes das-saving-flash {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.das-btn {
  padding: 6px 10px !important;
  min-width: 36px;
  font-size: 13px !important;
}
.das-restore { font-size: 14px !important; }

@media (max-width: 1100px) {
  .das-text { display: none; }
  .dash-autosave { padding: 5px 8px; }
}

/* ─── Chat — admin badge ────────────────────────────────── */
.lc-admin-badge {
  display: inline-block;
  font-size: 9px; font-weight: 900;
  letter-spacing: 1.2px;
  padding: 1px 6px;
  margin: 0 4px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffd060, #c83030);
  color: #1a0808;
  border: 1px solid rgba(255,200,80,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 0 6px rgba(255,180,40,0.45);
  vertical-align: middle;
}
/* v126 — Badge YT membre devant pseudo chat */
.lc-yt-badge {
  display: inline-block;
  font-size: 12px;
  padding: 0 4px;
  margin: 0 2px;
  border-radius: 4px;
  vertical-align: middle;
  cursor: help;
  filter: drop-shadow(0 0 4px currentColor);
}
.lc-yt-badge.yt-follower  { color: #80c8ff; }
.lc-yt-badge.yt-cawotte   { color: #ff8c42; }
.lc-yt-badge.yt-pourpre   { color: #a855f7; }
.lc-yt-badge.yt-turquoise { color: #06b6d4; }
.lc-yt-badge.yt-vulbis    { color: #10b981; text-shadow: 0 0 8px #10b981; }
.lc-line.admin .lc-pseudo {
  color: #ffd060 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(255,200,80,0.4);
}
.lc-line.admin {
  background: linear-gradient(90deg, rgba(255,200,80,0.08), transparent);
  border-left: 2px solid #ffd060;
  padding-left: 6px;
}

/* ─── Almanax — extra polish ────────────────────────────── */
.almx-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  min-height: 220px;
  border: 2px solid var(--c, #6a4818);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 60px rgba(255,180,40,0.15);
}
.almx-hero-icon {
  font-size: 92px !important;
  animation: almx-float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.7));
}
@keyframes almx-float {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}
.almx-hero-name {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
  text-shadow: 0 0 18px currentColor, 0 4px 8px rgba(0,0,0,0.8);
}
.almx-hero-effect {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  font-size: 16px !important;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 14px !important;
  border: 1.5px solid;
  border-radius: 18px;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.almx-hero-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #d8c898;
  font-style: italic;
  max-width: 560px;
}
.almx-hero-foot {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: #b8a878;
  padding-top: 10px;
  border-top: 1px dashed rgba(184,120,8,0.3);
}
.almx-hero-foot b { color: #ffd890; }
.almx-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #c8a060;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Calendar grid: bigger, prettier cards */
.almx-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
  gap: 8px !important;
}
.almx-cal-day {
  position: relative;
  padding: 12px 10px 10px !important;
  background: linear-gradient(160deg, rgba(40,28,16,0.85), rgba(20,14,8,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.35) !important;
  border-radius: 10px !important;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}
.almx-cal-day:hover {
  transform: translateY(-2px);
  border-color: var(--day-color, #c89030) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 14px var(--day-color, #c89030)55 !important;
}
.almx-cal-day.today {
  border-color: var(--day-color) !important;
  background: linear-gradient(160deg, var(--day-color)25, rgba(20,14,8,0.95)) !important;
  box-shadow: 0 0 18px var(--day-color)55, inset 0 1px 0 rgba(255,200,80,0.2) !important;
}
.almx-cal-day.rarity-legendary {
  border-color: #ff8030 !important;
}
.almx-cal-day.rarity-legendary::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 10px;
  padding: 1.5px;
  background: linear-gradient(90deg, #ff8030, #ffe060, #ff8030);
  background-size: 200% 100%;
  animation: alm-leg-shimmer 2.4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@keyframes alm-leg-shimmer {
  from { background-position: 0 50%; }
  to   { background-position: 200% 50%; }
}
.almx-cal-icon {
  font-size: 26px !important;
  margin: 4px 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.almx-cal-name {
  font-size: 11px !important;
  font-weight: 700;
  color: #ffd890;
  line-height: 1.2;
  margin-bottom: 3px;
  word-break: break-word;
}
.almx-cal-effect {
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.almx-cal-date {
  font-size: 10px;
  color: #a89878;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.almx-cal-rarity {
  position: absolute;
  top: 6px; right: 6px;
}
.almx-cal-rarity-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}
.almx-cal-today-tag {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Forecast row: 3 columns */
.almx-forecast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.almx-forecast-card {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(40,28,16,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.almx-forecast-card.legendary {
  border-color: #ff8030;
  box-shadow: 0 0 14px rgba(255,128,48,0.25);
}
.almx-fc-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #c8a060;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.almx-fc-row { display: flex; align-items: center; gap: 12px; }
.almx-fc-icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.almx-fc-info { flex: 1; min-width: 0; }
.almx-fc-date { font-size: 10px; color: #a89878; letter-spacing: 0.5px; text-transform: uppercase; }
.almx-fc-name { font-size: 14px; font-weight: 800; margin: 2px 0 4px; }
.almx-fc-eff  { font-size: 11.5px; color: #c8b888; }
.almx-fc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.almx-fc-stat {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
}
.almx-fc-stat b { font-size: 18px; font-weight: 900; }
.almx-fc-stat span { font-size: 9.5px; color: #a89878; letter-spacing: 0.5px; text-transform: uppercase; }

/* ─── Combat — tweaks for "more alive" feel ─────────────── */
/* Stronger ground reflection under sprite */
.arena-sprite-wrap::before {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
  filter: blur(3px);
  pointer-events: none;
  z-index: -1;
}
/* Slow camera-shake breathing on the whole arena (idle ambience) */
.dash-combat-arena {
  animation: arena-breathe 8s ease-in-out infinite;
}
@keyframes arena-breathe {
  0%,100% { background-position: center, center, center 25%, center; }
  50%     { background-position: center, center, center 30%, center; }
}
/* During fight, speed up + add subtle red tint */
.dash-combat-arena.fight-active::before {
  animation: arena-fight-tint 3s ease-in-out infinite;
}
@keyframes arena-fight-tint {
  0%,100% { background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,120,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a1208 0%, #2a1c0e 38%, #3a2818 60%, #1a1004 100%); }
  50%     { background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,150,80,0.22) 0%, transparent 70%),
    linear-gradient(180deg, #1a0e08 0%, #3a1d0a 38%, #4a2818 60%, #1a0a04 100%); }
}
/* Stronger drop shadow during a fight */
.arena-fighter.fighting .arena-sprite {
  filter:
    drop-shadow(0 16px 8px rgba(0,0,0,0.65))
    drop-shadow(0 0 10px rgba(255,200,120,0.2));
}
/* Active turn: extra emphasis */
.arena-fighter.is-active-turn {
  z-index: 6 !important;
}
.arena-fighter.is-active-turn .arena-sprite {
  filter:
    drop-shadow(0 18px 8px rgba(0,0,0,0.7))
    drop-shadow(0 0 18px rgba(255,210,100,0.55));
  transform: scale(1.05);
  transition: transform 0.25s, filter 0.25s;
}
/* Cinematic: depth lines on the floor */
.arena-stage::before {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 39px,
      rgba(255,200,120,0.18) 39px 40px),
    repeating-linear-gradient(0deg,
      transparent 0 24px,
      rgba(120,80,30,0.18) 24px 25px),
    linear-gradient(180deg,
      rgba(80,52,24,0) 0%,
      rgba(96,64,28,0.55) 35%,
      rgba(58,38,16,0.85) 100%) !important;
}

/* ─── Char create v2 — extra polish ─────────────────────── */
.cc-class-card {
  position: relative;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.cc-class-card:hover {
  transform: translateY(-3px);
  border-color: var(--cls-color, #c89030) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.6), 0 0 14px var(--cls-color, #c89030)55;
}
.cc-class-card.selected {
  transform: translateY(-3px);
  border-color: var(--cls-color, #c89030) !important;
  box-shadow: 0 0 0 2px var(--cls-color, #c89030)88, 0 12px 24px rgba(0,0,0,0.7);
}
.cc-class-card.selected::before {
  content: '✓';
  position: absolute;
  top: -8px; left: -8px;
  width: 22px; height: 22px;
  background: var(--cls-color, #c89030);
  color: #1a0a04;
  border-radius: 50%;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  z-index: 2;
}

/* ════════════════════════════════════════════════════════
   v26 — OFFLINE RECAP + FARMING COUNTER + CC FIXES
   ════════════════════════════════════════════════════════ */

/* ── Farming counter (active glow) ─────────────────────── */
.dash-res-farming.active {
  border-color: rgba(255,140,40,0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(255,180,80,0.25), 0 0 14px rgba(255,140,40,0.35);
}
.dash-res-farming.active .dash-res-icon {
  filter: drop-shadow(0 0 6px #ff9040);
  animation: dash-farm-pulse 1.4s ease-in-out infinite;
}
.dash-res-farming.active .dash-res-val {
  color: #ffb060 !important;
  text-shadow: 0 0 6px rgba(255,180,80,0.5);
}
@keyframes dash-farm-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* ── Offline recap modal ───────────────────────────────── */
.offline-recap-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 4, 2, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: orec-fade 0.25s ease-out;
}
@keyframes orec-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.orec-modal {
  width: 100%; max-width: 620px;
  background: linear-gradient(180deg, #2e2418 0%, #1a1408 100%);
  border: 2px solid #c89030;
  border-radius: 14px;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,200,80,0.15) inset,
    0 0 60px rgba(255,180,40,0.2);
  padding: 22px 26px;
  animation: orec-pop 0.35s cubic-bezier(0.4, 1.4, 0.5, 1);
}
@keyframes orec-pop {
  from { transform: scale(0.92) translateY(-12px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.orec-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(184,120,8,0.35);
  margin-bottom: 16px;
}
.orec-emblem {
  font-size: 38px;
  filter: drop-shadow(0 0 14px rgba(120,160,255,0.6));
  animation: orec-moon 4s ease-in-out infinite;
}
@keyframes orec-moon {
  0%,100% { transform: rotate(-8deg); }
  50%     { transform: rotate(8deg); }
}
.orec-title {
  font-family: var(--font-main, sans-serif);
  font-size: 22px; font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.orec-sub {
  font-size: 12.5px;
  color: #a89878;
  margin-top: 2px;
}
.orec-close {
  margin-left: auto;
  background: transparent; border: 1px solid #4a3a1a;
  color: #a89878; font-size: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
}
.orec-close:hover { color: #ff8060; border-color: #c87060; transform: rotate(90deg); }

.orec-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.orec-tot {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 6px;
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(30,20,10,0.85));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  text-align: center;
}
.orec-tot-ico { font-size: 22px; margin-bottom: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.orec-tot b {
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.orec-tot span:not(.orec-tot-ico) {
  font-size: 10px; color: #a89878;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 4px;
}

.orec-chars {
  background: linear-gradient(135deg, rgba(40,28,16,0.55), rgba(20,14,8,0.8));
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  max-height: 240px;
  overflow-y: auto;
}
.orec-chars-title {
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px;
  color: #c8a060;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(184,120,8,0.3);
  margin-bottom: 6px;
}
.orec-char {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  flex-wrap: wrap;
  border-bottom: 1px dashed rgba(184,120,8,0.15);
}
.orec-char:last-child { border-bottom: none; }
.orec-char-name { font-weight: 800; min-width: 100px; }
.orec-char-stat { color: #c8b888; }
.orec-char-lvlup {
  margin-left: auto;
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-weight: 900; font-size: 10.5px;
  padding: 2px 7px; border-radius: 8px;
  letter-spacing: 0.5px;
}

.orec-cap {
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(80,60,200,0.12);
  border-left: 3px solid #6080c8;
  border-radius: 4px;
  font-size: 11.5px;
  color: #a8b8d8;
}

.orec-btn-go {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  font-family: inherit;
  font-size: 14px; font-weight: 900;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,200,80,0.3) inset;
}
.orec-btn-go:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 18px rgba(255,200,80,0.4); }

@media (max-width: 600px) {
  .orec-totals { grid-template-columns: repeat(2, 1fr); }
  .orec-char { font-size: 11px; }
  .orec-char-stat { font-size: 10.5px; }
}

/* ── Char Create — Voies recommandées better visibility ── */
.cc-detail-body {
  overflow: visible !important;
  max-height: none !important;
}
.cc-builds {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  margin: 6px 0 12px !important;
}
.cc-build {
  display: block !important;
  padding: 9px 11px !important;
  background: linear-gradient(135deg, rgba(40,28,16,0.7), rgba(20,14,8,0.9)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  border-radius: 7px !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cc-build:hover {
  transform: translateY(-2px);
  border-color: rgba(255,200,80,0.6) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.cc-build-name {
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.3px;
}
.cc-build-desc {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #c8b888 !important;
  display: block;
}
.cc-detail-section {
  display: block !important;
  margin: 14px 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #c8a060 !important;
  letter-spacing: 2.5px !important;
  padding-left: 18px !important;
  position: relative;
  text-transform: uppercase !important;
}
.cc-detail-section::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, #c8a060);
}

/* ════════════════════════════════════════════════════════
   v27 — STATS DR-style + FARM PAUSE BUTTON + SERVER COUNTER
   ════════════════════════════════════════════════════════ */

/* ── Farm pause button (more visible) ─────────────────── */
.farm-btn-stop {
  background: linear-gradient(180deg, #d8504a 0%, #a0301a 100%) !important;
  border: 1.5px solid #ff7860 !important;
  color: #fff !important;
  font-weight: 900 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(200,60,40,0.45),
    0 0 12px rgba(255,120,80,0.35) !important;
  cursor: pointer;
  font-size: 12.5px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  animation: fbs-glow 2s ease-in-out infinite;
}
@keyframes fbs-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(200,60,40,0.45), 0 0 12px rgba(255,120,80,0.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(200,60,40,0.6),   0 0 22px rgba(255,140,80,0.55); }
}
.farm-btn-stop:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ff605a 0%, #b03820 100%) !important;
}

/* ── Server-wide counter pill (sub-line under farming) ── */
.dash-server-counter {
  display: block;
  font-size: 9.5px;
  color: #80c0ff;
  letter-spacing: 0.3px;
  font-weight: 700;
  margin-top: 2px;
  margin-left: 26px;
}
.dash-server-counter b {
  color: #c0e8ff;
  text-shadow: 0 0 4px rgba(140,200,255,0.4);
}

/* ── Stats: dégâts + résistances DR-style ─────────────── */
.stats-dr-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.sdr-col {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}
.sdr-title {
  font-family: var(--font-main, sans-serif);
  font-size: 12px; font-weight: 900;
  letter-spacing: 2.5px;
  color: #c8a060;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(184,120,8,0.35);
  text-transform: uppercase;
}
.sdr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}
.sdr-cell {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px;
  background: linear-gradient(135deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-left: 3px solid var(--c, #c89030);
  border-radius: 5px;
  font-size: 12px;
}
.sdr-cell.sdr-cell-misc { border-left-color: #c8a060; }
.sdr-ic { font-size: 14px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.sdr-lbl {
  flex: 1;
  font-weight: 700;
  color: #c8b888;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.sdr-val {
  font-weight: 900;
  color: #ffd890;
  font-variant-numeric: tabular-nums;
}
.sdr-val small {
  font-size: 10px;
  font-weight: 700;
  color: #c8a060;
  margin-left: 1px;
}
.sdr-val.pos { color: #80f898; }
.sdr-val.neg { color: #ff8060; }
.sdr-bonus {
  font-size: 10px;
  color: #80f898;
  font-weight: 800;
  margin-left: 4px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .stats-dr-row { grid-template-columns: 1fr; }
  .sdr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Bonus : enrichir le hero stats avec un fond armoirie ── */
.stats-hero-card {
  position: relative;
  overflow: hidden;
}
.stats-hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,200,80,0.08) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(-45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 70px);
  pointer-events: none;
}
.shc-name {
  text-shadow: 0 0 12px currentColor, 0 2px 4px rgba(0,0,0,0.7);
}

/* ════════════════════════════════════════════════════════
   v28 — HDV (marketplace) + BOUTIQUE Jetons d'Astrub
   ════════════════════════════════════════════════════════ */

/* Highlight nav buttons */
.nav-hdv { color: #80c0ff !important; }
.nav-shop { color: #ffd060 !important; }
.nav-shop .nav-icon, .nav-hdv .nav-icon { filter: drop-shadow(0 0 4px currentColor); }

/* ── HDV ───────────────────────────────────────────────── */
.hdv-page { padding: 16px; }
.hdv-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #6a4818;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.hdv-header::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(120,180,255,0.1) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.hdv-title { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.hdv-emblem {
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  animation: hdv-emblem-bob 3s ease-in-out infinite;
}
@keyframes hdv-emblem-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}
.hdv-title-main {
  font-family: var(--font-main, sans-serif);
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hdv-title-sub {
  font-size: 11.5px; color: #a89878;
  margin-top: 2px;
}
.hdv-tabs { display: flex; gap: 4px; position: relative; z-index: 1; }
.hdv-tab {
  background: rgba(40,28,16,0.8);
  border: 1.5px solid #4a3a1a;
  color: #c8a060;
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.hdv-tab:hover { color: #ffd060; border-color: #c89030; }
.hdv-tab.active {
  background: linear-gradient(180deg, #d8a040, #a06820);
  color: #1a1408;
  border-color: #ffd060;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}

.hdv-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.hdv-cat {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(40,28,16,0.7);
  border: 1px solid rgba(184,120,8,0.35);
  color: #c8b888;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer; font-size: 11.5px; font-weight: 700;
  transition: all 0.15s;
}
.hdv-cat:hover { border-color: #c89030; color: #ffd060; }
.hdv-cat.active {
  background: linear-gradient(135deg, #c89030, #a06820);
  border-color: #ffd060;
  color: #1a1408;
  box-shadow: 0 0 10px rgba(255,200,80,0.35);
}

.hdv-toolbar {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(40,28,16,0.4);
  border: 1px solid rgba(184,120,8,0.25);
  border-radius: 8px;
}
.hdv-search {
  flex: 1; min-width: 200px;
  background: #0e0a04; color: #e8d8a0;
  border: 1.5px solid #4a3a1a;
  padding: 7px 10px;
  border-radius: 5px; font-size: 12.5px;
  font-family: inherit;
}
.hdv-search:focus { outline: none; border-color: #c89030; box-shadow: 0 0 0 2px rgba(232,160,40,0.2); }
.hdv-sort {
  background: #0e0a04; color: #e8d8a0;
  border: 1.5px solid #4a3a1a;
  padding: 7px 10px;
  border-radius: 5px; font-size: 12px;
  cursor: pointer;
}
.hdv-lvl-filter {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #a89878;
}
.hdv-lvl-input {
  width: 50px;
  background: #0e0a04; color: #e8d8a0;
  border: 1.5px solid #4a3a1a;
  padding: 5px; border-radius: 4px;
  font-size: 12px; text-align: center;
}
.hdv-count {
  font-size: 11px; color: #c8a060;
  font-weight: 700; letter-spacing: 0.5px;
  margin-left: auto;
}

.hdv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.hdv-card {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 1.5px solid #4a3a1a;
  border-radius: 8px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all 0.15s;
}
.hdv-card:hover {
  border-color: #c89030;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 12px rgba(255,200,80,0.2);
}
.hdv-card-img {
  position: relative;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 6px;
  height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.hdv-card-img img {
  /* v163 — width/height fixes pour SVG dont l'intrinsic est tout petit (ex: anneau Bouze 11×11px) */
  width: 70px !important; height: 70px !important;
  max-height: 70px; max-width: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.hdv-no-img {
  font-size: 30px; color: #6a5838;
}
.hdv-card-lvl {
  position: absolute; top: 4px; right: 4px;
  background: rgba(60,42,20,0.9);
  color: #ffd060;
  font-size: 9.5px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,200,80,0.4);
}
.hdv-card-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.hdv-card-name {
  font-size: 13px; font-weight: 800;
  color: #ffd890;
  line-height: 1.2;
}
.hdv-card-seller {
  font-size: 10.5px;
  color: #8a7858;
  font-style: italic;
}
.hdv-card-effs {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 10.5px;
  color: #80c060;
  margin-top: 2px;
}
.hdv-card-effs span:nth-child(n+4) { display: none; }
.hdv-card-panop {
  font-size: 10px; font-weight: 800;
  color: #c060e0;
  letter-spacing: 0.5px;
}
.hdv-card-foot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  border-top: 1px dashed rgba(184,120,8,0.25);
  padding-top: 6px;
}
.hdv-card-price {
  font-size: 14px; font-weight: 900;
  color: #ffd060;
  letter-spacing: 0.3px;
}
.hdv-card-price small {
  font-size: 9px; font-weight: 700; color: #a89878; margin-left: 2px;
}
.hdv-sell-price { color: #80c060; }
.hdv-card-qty {
  font-size: 10px; font-weight: 700;
  color: #c8a060;
  background: rgba(60,42,20,0.6);
  padding: 2px 6px;
  border-radius: 8px;
}
.hdv-buy-btn {
  background: linear-gradient(180deg, #d8a040, #a06820);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  font-weight: 900; font-size: 11px;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.hdv-buy-btn:hover { transform: translateY(-1px); }
.hdv-buy-btn.disabled, .hdv-buy-btn:disabled {
  background: #2a2018;
  border-color: #4a3a1a;
  color: #6a5838;
  cursor: not-allowed;
  transform: none;
}

.hdv-empty {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: #c8b890;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
}
.hdv-foot-note {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(80,120,200,0.15);
  border-left: 3px solid #6080c8;
  border-radius: 4px;
  font-size: 12.5px;
  color: #d8e0f0;
  line-height: 1.6;
}
.hdv-foot-note b { color: #ffd060; }

/* ── BOUTIQUE Jetons ───────────────────────────────────── */
.shop-page { padding: 16px; }
.shop-header {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2a1f10 0%, #1a0a04 100%);
  border: 2px solid #c89030;
  border-radius: 12px;
  padding: 16px 22px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.shop-header::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 100% 50%, rgba(255,200,80,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.shop-emblem {
  font-size: 44px;
  filter: drop-shadow(0 0 14px rgba(255,200,80,0.6));
  animation: shop-emblem-spin 8s linear infinite;
}
@keyframes shop-emblem-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.shop-titles { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.shop-title {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.shop-sub {
  font-size: 12px; color: #c8b888;
  margin-top: 4px;
}
.shop-sub a { color: #ffd060; }
.shop-balance {
  display: flex; flex-direction: column; align-items: flex-end;
  background: linear-gradient(135deg, rgba(60,42,20,0.85), rgba(30,20,10,0.95));
  border: 1.5px solid #ffd060;
  border-radius: 10px;
  padding: 10px 16px;
  position: relative; z-index: 1;
}
.shop-balance > span:first-child { font-size: 10px; color: #c8a060; letter-spacing: 1px; text-transform: uppercase; }
.shop-balance b {
  font-size: 26px; font-weight: 900;
  color: #ffd060;
  text-shadow: 0 0 8px rgba(255,200,80,0.5);
  line-height: 1;
}
.shop-balance small { font-size: 10px; color: #a89878; }

.shop-status {
  background: linear-gradient(135deg, rgba(80,140,200,0.15), rgba(40,80,160,0.1));
  border: 1px solid rgba(120,180,255,0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #c0e0ff;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.shop-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ffd060;
  box-shadow: 0 0 6px #ffd060;
  animation: shop-status-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes shop-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.shop-status b { color: #ffd060; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.shop-offer {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: all 0.15s;
}
.shop-offer:hover {
  border-color: #ffd060;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 16px rgba(255,200,80,0.25);
}
.shop-offer.soon { opacity: 0.65; }
.shop-offer-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: 8.5px; font-weight: 900;
  letter-spacing: 1px;
  background: rgba(60,42,20,0.85);
  color: #c8a060;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
}
.shop-offer-ico {
  font-size: 36px;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.shop-offer-name {
  font-size: 13px; font-weight: 900;
  text-align: center;
  color: #ffd890;
  letter-spacing: 0.3px;
}
.shop-offer-desc {
  font-size: 11px;
  text-align: center;
  color: #c8b888;
  line-height: 1.3;
  flex: 1;
}
.shop-offer-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed rgba(184,120,8,0.3);
  padding-top: 6px;
  gap: 6px;
}
.shop-offer-cost {
  font-size: 14px; font-weight: 900;
  color: #ffd060;
}
.shop-offer-btn {
  background: rgba(40,28,16,0.6);
  border: 1px solid #4a3a1a;
  color: #6a5838;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: not-allowed;
}

.shop-info {
  background: linear-gradient(135deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 8px;
  padding: 14px 18px;
}
.shop-info h3 {
  font-size: 14px;
  color: #ffd890;
  margin: 0 0 8px;
  letter-spacing: 1px;
}
.shop-info ol {
  font-size: 12px;
  color: #c8b888;
  line-height: 1.7;
  padding-left: 22px;
  margin: 0;
}
.shop-info ol b { color: #ffd060; }
.shop-info ol a { color: #80c0ff; }
.shop-info-warn {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(200,140,40,0.12);
  border-left: 3px solid #c89030;
  border-radius: 4px;
  font-size: 11.5px;
  color: #ffd890;
}

/* ════════════════════════════════════════════════════════
   v29 — HDV listings + jeton SVG polish
   ════════════════════════════════════════════════════════ */

/* Jeton SVG default style */
.jeton-svg {
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* HDV tab badge (count of own listings) */
.hdv-tab-badge {
  display: inline-block;
  background: #c83030;
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
}
.hdv-tab.active .hdv-tab-badge { background: #1a1408; color: #ffd060; }

/* Prepare-list panel */
.hdv-prepare {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #ffd060;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 22px rgba(255,200,80,0.18);
}
.hdv-prep-title {
  font-size: 14px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(184,120,8,0.4);
}
.hdv-prep-body {
  display: flex; gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.hdv-prep-img {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  flex-shrink: 0;
}
.hdv-prep-img img { max-width: 80px; max-height: 80px; }
.hdv-prep-fields { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.hdv-prep-row label {
  display: block;
  font-size: 11px; color: #c8a060;
  font-weight: 800; letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.hdv-prep-max { color: #8a7858; font-weight: 700; text-transform: none; }

.hdv-qty-buttons {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.hdv-qty-btn {
  background: rgba(40,28,16,0.7);
  border: 1.5px solid rgba(184,120,8,0.35);
  color: #c8b888;
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: 800; font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.hdv-qty-btn:hover { border-color: #c89030; color: #ffd060; }
.hdv-qty-btn.active {
  background: linear-gradient(180deg, #d8a040, #a06820);
  color: #1a1408;
  border-color: #ffd060;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(255,200,80,0.3);
}
.hdv-qty-custom, .hdv-price-input {
  background: #0e0a04;
  border: 1.5px solid #4a3a1a;
  color: #ffd890;
  padding: 6px 10px;
  border-radius: 5px;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  width: 120px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hdv-qty-custom { width: 90px; }
/* v162 — Retire les flèches spinner sur TOUS les inputs HDV (cross-browser) */
.hdv-qty-custom, .hdv-price-input, .hdv-lvl-input,
#bank-sell-qty, .bank-num-input, input[type="number"].input-field {
  -moz-appearance: textfield; appearance: textfield;
}
#bank-sell-qty::-webkit-outer-spin-button, #bank-sell-qty::-webkit-inner-spin-button,
.bank-num-input::-webkit-outer-spin-button, .bank-num-input::-webkit-inner-spin-button,
input[type="number"].input-field::-webkit-outer-spin-button,
input[type="number"].input-field::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.hdv-qty-custom::-webkit-outer-spin-button,
.hdv-qty-custom::-webkit-inner-spin-button,
.hdv-price-input::-webkit-outer-spin-button,
.hdv-price-input::-webkit-inner-spin-button,
.hdv-lvl-input::-webkit-outer-spin-button,
.hdv-lvl-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.hdv-qty-custom:focus, .hdv-price-input:focus {
  outline: none;
  border-color: #c89030;
  box-shadow: 0 0 0 2px rgba(232,160,40,0.2);
}
.hdv-price-input-wrap {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hdv-price-input { width: 140px; font-size: 13px; }
.hdv-price-unit { color: #c89030; font-weight: 800; font-size: 12px; }
.hdv-price-reset {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1px solid rgba(184,120,8,0.4);
  color: #ffd890; padding: 5px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 800; cursor: pointer;
}
.hdv-price-reset:hover { border-color: #ffd060; background: linear-gradient(180deg, #5a3a20, #2a1808); }
.hdv-prep-row label small {
  font-weight: 700; color: #80c060;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.hdv-prep-summary {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  padding: 8px 12px;
  background: rgba(60,42,20,0.5);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 6px;
  font-size: 12.5px;
}
.hdv-prep-summary b { color: #ffd060; font-size: 14px; }
.hdv-prep-ttl { font-size: 11.5px; color: #c8a060; }

.hdv-prep-actions {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hdv-prep-actions .hdv-buy-btn {
  flex: 1;
  font-size: 13px !important;
  padding: 8px 14px !important;
}
.hdv-buy-btn.alt {
  background: linear-gradient(180deg, #80c060, #608040) !important;
  border-color: #a0e080 !important;
}
.hdv-cancel-btn {
  background: transparent;
  border: 1.5px solid #6a4a2a;
  color: #a89878;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 11.5px; font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  font-family: inherit;
}
.hdv-cancel-btn:hover { color: #ff8060; border-color: #c87060; }

/* Sell card price tags */
.hdv-card-prices {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 4px;
}
.hdv-pricetag {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
}
.hdv-pricetag.npc { background: rgba(80,160,80,0.2); color: #80f898; border: 1px solid rgba(80,200,80,0.4); }
.hdv-pricetag.hdv { background: rgba(255,200,80,0.15); color: #ffd060; border: 1px solid rgba(255,200,80,0.4); }

/* Mine card TTL coloring */
.hdv-mine-ttl {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3px;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.hdv-ttl-ok      { background: rgba(80,160,80,0.18); color: #80c080; }
.hdv-ttl-soon    { background: rgba(232,160,40,0.18); color: #ffd060; }
.hdv-ttl-urgent  { background: rgba(220,60,40,0.22); color: #ff8060; animation: hdv-ttl-blink 1.4s ease-in-out infinite; }
@keyframes hdv-ttl-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Boutique balance row + offer cost with SVG */
.shop-balance-row {
  display: flex; align-items: center; gap: 8px;
}
.shop-balance-row b {
  font-size: 28px;
  line-height: 1;
}
.shop-balance .jeton-svg {
  filter: drop-shadow(0 2px 6px rgba(255,200,80,0.5));
}
.shop-offer-cost {
  display: flex !important; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 900;
  color: #ffd060;
}
.shop-offer-cost b { font-size: 14px; }

/* Replace shop emblem rotation animation since it's now an SVG */
.shop-emblem {
  display: flex; align-items: center; justify-content: center;
}
.shop-emblem .jeton-svg {
  animation: shop-emblem-spin 8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,200,80,0.55));
}

/* Boutique header balance card */
.shop-balance {
  align-items: center !important;
  gap: 4px;
}
.shop-balance > span:first-child {
  font-size: 9.5px;
  letter-spacing: 1.5px;
}
.shop-balance small {
  font-size: 9.5px;
  letter-spacing: 0.5px;
}

@media (max-width: 720px) {
  .hdv-prep-body { gap: 10px; }
  .hdv-prep-img { width: 64px; height: 64px; }
  .hdv-prep-img img { max-width: 56px; max-height: 56px; }
}

/* ════════════════════════════════════════════════════════
   v30 — Sidebar full-height + Dashboard Shop button + Perso Hub
   ════════════════════════════════════════════════════════ */

/* Make #app a row layout: sidebar fixed on left full-height,
   dashboard + main shifted right */
.left-nav {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: var(--left-nav-w, 240px);
  z-index: 200;
  overflow-y: auto !important;
  overflow-x: hidden;
  background: linear-gradient(180deg, #1e1810 0%, #1a1408 100%);
  border-right: 2px solid var(--gold, #c89030);
  box-shadow: 4px 0 12px rgba(0,0,0,0.5);
  padding: 10px 8px 14px;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #5a4828 #1a1408;
}
.left-nav::-webkit-scrollbar { width: 6px; }
.left-nav::-webkit-scrollbar-thumb { background: #5a4828; border-radius: 3px; }
.left-nav::-webkit-scrollbar-track { background: #1a1408; }

/* Push other content right of the sidebar */
.combat-dashboard {
  margin-left: var(--left-nav-w, 240px) !important;
}
.app-body {
  margin-left: var(--left-nav-w, 240px) !important;
  display: block !important;        /* no flex needed since sidebar is fixed */
  flex: 1;
  overflow: auto;
}
.app-body .main-content {
  width: 100%;
}
/* Live-chat sits over sidebar — push it right */
#live-chat, .live-chat {
  left: calc(var(--left-nav-w, 240px) + 12px) !important;
}

/* Make the char-list inside sidebar use the available space */
.left-nav #char-list {
  flex: 1;
  overflow-y: auto;
}

/* Sidebar nav buttons: tighter for 8 char visibility */
.left-nav-section { padding: 0 0 6px; }
.left-nav-label { font-size: 9.5px; padding: 4px 8px; }
.nav-btn {
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

@media (max-width: 720px) {
  .left-nav, .combat-dashboard, .app-body {
    /* On tiny screens, sidebar overlays — kept simple */
    --left-nav-w: 130px;
  }
  #live-chat, .live-chat { left: 8px !important; }
}

/* ── Dashboard Shop button ──────────────────────────────── */
.dash-shop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(60,42,20,0.85) 0%, rgba(30,20,10,0.95) 100%);
  border: 1.5px solid #ffd060;
  border-radius: 10px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0 4px;
  position: relative;
  overflow: hidden;
}
.dash-shop-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: dash-shop-shine 4s ease-in-out infinite;
}
@keyframes dash-shop-shine {
  0%, 70% { left: -100%; }
  100%    { left: 130%; }
}
.dash-shop-btn:hover {
  background: linear-gradient(135deg, rgba(80,56,28,0.9), rgba(40,28,14,1));
  box-shadow: 0 0 16px rgba(255,200,80,0.45);
  transform: translateY(-1px);
}
.dash-shop-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-shop-icon .jeton-svg {
  width: 28px !important; height: 28px !important;
  animation: dash-shop-jeton-spin 6s linear infinite;
}
@keyframes dash-shop-jeton-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.dash-shop-text { display: flex; flex-direction: column; line-height: 1.1; }
.dash-shop-name {
  font-family: var(--font-main, sans-serif);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.dash-shop-bal {
  font-size: 9.5px;
  color: #c8a060;
  letter-spacing: 0.5px;
}

@media (max-width: 1100px) {
  .dash-shop-text { display: none; }
  .dash-shop-btn { padding: 5px 6px; }
}

/* ── Perso Hub sub-tabs ────────────────────────────────── */
.perso-hub-tabs {
  display: flex; gap: 4px;
  padding: 8px 12px 0;
  background: linear-gradient(180deg, transparent, rgba(40,28,16,0.4));
  border-bottom: 1px solid rgba(184,120,8,0.25);
  position: sticky; top: 0;
  z-index: 50;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.phub-tab {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(40,28,16,0.7);
  border: 1.5px solid rgba(184,120,8,0.35);
  border-bottom: none;
  color: #c8b888;
  padding: 8px 14px 8px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-family: inherit;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.phub-tab:hover { color: #ffd060; border-color: #c89030; }
.phub-tab.active {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  color: #ffd060;
  border-color: #c89030;
  border-bottom: 1.5px solid #1a1408;
  box-shadow: 0 -4px 12px rgba(255,200,80,0.15) inset;
}
.phub-ic { font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* ════════════════════════════════════════════════════════
   v31 — Stats DR icons + Spells contrast + HDV list view + Combat polish
   ════════════════════════════════════════════════════════ */

/* ── STATS — Authentic Dofus Retro icons ──────────────── */
.dr-stats-page {
  padding: 16px 18px;
  color: #e8d8a0;
  font-family: var(--font-main, sans-serif);
}
.dr-stat-ic {
  width: 22px; height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  image-rendering: -webkit-optimize-contrast;
}

/* HERO bar */
.dr-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #c89030;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,80,0.1);
}
.dr-hero-portrait {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 16px rgba(255,200,80,0.18);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dr-hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dr-hero-info { flex: 1; min-width: 0; }
.dr-hero-name {
  font-size: 24px; font-weight: 900;
  text-shadow: 0 0 12px currentColor, 0 2px 4px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}
.dr-hero-class { font-size: 12.5px; color: #c8a060; margin-bottom: 6px; }
.dr-hero-class b { color: #ffd060; }
.dr-hero-bars { display: flex; flex-direction: column; gap: 4px; }
.dr-hero-bar {
  display: grid;
  grid-template-columns: 60px 1fr 140px;
  align-items: center; gap: 10px;
  font-size: 11px;
}
.dr-hero-bar > span { display: flex; align-items: center; gap: 4px; color: #c8a060; font-weight: 700; }
.dr-hero-bar > b { font-size: 11px; color: #ffe898; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-bar-track {
  height: 14px; background: #0e0a04;
  border: 1.5px solid #4a3a1a; border-radius: 7px;
  overflow: hidden; position: relative;
}
.dr-bar-fill {
  height: 100%;
  transition: width 0.4s ease, background 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.dr-hero-pts {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 0 0 14px rgba(255,200,80,0.4);
  min-width: 90px;
}
.dr-hero-pts-num { font-size: 28px; font-weight: 900; line-height: 1; }
.dr-hero-pts-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }

/* 3-col grid */
.dr-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dr-col {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 12px 14px;
}
.dr-col-title {
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px;
  color: #c8a060;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(184,120,8,0.4);
  text-transform: uppercase;
}

/* Caractéristique row (col 1) */
.dr-stat-row {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(184,120,8,0.18);
}
.dr-stat-row:last-child { border-bottom: none; }
.dr-stat-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.dr-stat-name {
  flex: 1;
  font-size: 12.5px; font-weight: 800;
  color: #e8d8a0;
  letter-spacing: 0.3px;
}
.dr-stat-total {
  font-size: 16px; font-weight: 900;
  color: #ffd060;
  font-variant-numeric: tabular-nums;
}
.dr-stat-eq {
  font-size: 10px; color: #80c060; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dr-stat-cost {
  font-size: 10px; color: #8a7858;
  margin-bottom: 4px;
  margin-left: 30px;
}
.dr-stat-btns { display: flex; gap: 4px; margin-left: 30px; }
.dr-stat-btn {
  flex: 1;
  background: linear-gradient(180deg, #d8a040, #a06820);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  font-weight: 900; font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all 0.12s;
}
.dr-stat-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(255,200,80,0.3); }
.dr-stat-btn.big { background: linear-gradient(180deg, #f0d060, #c89030); }
.dr-stat-btn:disabled {
  background: #2a2018;
  border-color: #4a3a1a;
  color: #5a4828;
  cursor: not-allowed;
  box-shadow: none;
}

/* Combat & resist line (col 2-3) */
.dr-line {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(184,120,8,0.18);
}
.dr-line:last-child { border-bottom: none; }
.dr-line-lbl {
  font-size: 12px; color: #e8d8a0;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.dr-line-val {
  font-size: 13px; font-weight: 900;
  color: #ffe898;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dr-line-val.pos { color: #80f898; }
.dr-line-val.neg { color: #ff8060; }
.dr-line-extra {
  font-size: 10px; color: #c8a060;
  margin-left: 4px;
}

/* HP threshold setting */
.dr-hp-setting {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 10px;
  flex-wrap: wrap;
}
.dr-hp-setting > span {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #e8d8a0;
}
.dr-hp-setting b { color: #ffd060; }
.dr-hp-slider { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 12px; }
.dr-hp-slider input[type=range] { flex: 1; accent-color: #c89030; }
.dr-hp-val {
  font-weight: 900; font-size: 14px;
  color: #ffd060;
  min-width: 48px; text-align: center;
}

@media (max-width: 1100px) {
  .dr-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .dr-stats-grid { grid-template-columns: 1fr; }
  .dr-hero { flex-direction: column; align-items: stretch; }
  .dr-hero-pts { align-self: center; }
}

/* ── SPELLS — fix dark-on-dark contrast + better level-up + order ── */
.grim-spell-name {
  color: #ffd890 !important;          /* light gold instead of var(--text) */
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.grim-spell.locked .grim-spell-name { color: #6a5a40 !important; }

/* Level-up button: bigger + clearly highlighted when points available */
.sd-upgrade-btn,
.grim-upgrade-btn,
button[class*="upgrade-spell"],
button[onclick*="upgradeSpell"] {
  background: linear-gradient(180deg, #d8a040, #a06820) !important;
  border: 2px solid #ffd060 !important;
  color: #1a1408 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  padding: 9px 16px !important;
  border-radius: 7px !important;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 10px rgba(255,180,40,0.35),
    0 0 0 1px rgba(255,200,80,0.4) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.15s;
}
.sd-upgrade-btn:hover:not(:disabled),
.grim-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 16px rgba(255,180,40,0.5),
    0 0 18px rgba(255,200,80,0.45);
}
.sd-upgrade-btn:disabled,
.grim-upgrade-btn:disabled {
  background: #2a2018 !important;
  border-color: #4a3a1a !important;
  color: #6a5838 !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Spell detail body — all paragraph text needs contrast */
.sb-detail-body, .sd-body, .grim-detail-body,
.spell-detail-body, .spell-detail {
  color: #e8d8a0 !important;
}
.sb-detail-body p, .sd-body p, .grim-detail-body p,
.spell-detail-body p, .spell-detail p {
  color: #d8c898 !important;
}
.sb-detail-body small, .sd-body small {
  color: #c8a060 !important;
}

/* Spell order entries — clearer */
.grim-order, .sd-order-row, .sb-order-row {
  background: linear-gradient(135deg, rgba(60,42,20,0.7), rgba(20,14,8,0.9)) !important;
  border: 1px solid rgba(184,120,8,0.4) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  display: flex !important; align-items: center; gap: 8px;
  color: #ffd890 !important;
  font-weight: 700;
  transition: all 0.15s;
}
.grim-order:hover, .sd-order-row:hover, .sb-order-row:hover {
  border-color: #ffd060 !important;
  background: linear-gradient(135deg, rgba(80,56,28,0.85), rgba(30,20,10,0.95)) !important;
}
.grim-order .order-num, .sd-order-num, .sb-order-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-weight: 900; font-size: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Spell card — ensure contrast on the level-stars/name */
.grim-spell-stars {
  color: #ffd060 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 4px currentColor !important;
  font-weight: 900 !important;
}

/* ── HDV — Compact list view (Dofus Retro style) ──────── */
.hdv-page .hdv-grid:not(.hdv-grid-sell) {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card {
  flex-direction: row !important;
  padding: 6px 10px !important;
  align-items: center;
  gap: 12px !important;
  height: auto;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-img {
  width: 48px; height: 48px;
  flex-shrink: 0;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-img img { max-width: 42px; max-height: 42px; }
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-lvl {
  font-size: 8.5px;
  padding: 1px 4px;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-body {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-name {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-seller {
  font-size: 10px;
  color: #8a7858;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-effs {
  flex-direction: row !important;
  gap: 8px !important;
  font-size: 10px;
  flex-wrap: wrap;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-effs span:nth-child(n+3) { display: none; }
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-panop {
  font-size: 9px;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-foot {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  align-items: center;
  border-top: none !important;
  padding-top: 0 !important;
  flex-shrink: 0;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-price {
  font-size: 14px;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-qty {
  font-size: 10px;
  white-space: nowrap;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-buy-btn {
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 7px 14px !important;
}
.hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card:hover {
  transform: translateX(2px);
  border-color: #c89030;
  box-shadow: 4px 0 12px rgba(0,0,0,0.4);
}

/* Header row hint above the list */
.hdv-list-header {
  display: grid;
  grid-template-columns: 48px 1fr 110px 60px auto;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(60,42,20,0.6);
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #c8a060;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ── COMBAT — simplify (less particle, calmer ambient) ── */
.dash-combat-arena {
  animation: none !important;       /* remove the breathing pan */
}
.dash-combat-arena.fight-active::before {
  animation: none !important;       /* remove the red tint pulse */
}
.arena-stage::before {
  filter: brightness(0.9);
}
/* Reduce active-turn scale jump */
.arena-fighter.is-active-turn .arena-sprite {
  transform: scale(1.02) !important;
}
/* Calmer dust/floor */
.arena-stage::after {
  filter: blur(1px);
  opacity: 0.7;
}
/* Dial down the ambient floor reflection */
.arena-sprite-wrap::before {
  width: 60px !important;
  height: 8px !important;
  filter: blur(2px) !important;
}

/* ════════════════════════════════════════════════════════
   v32 — MOBILE RESPONSIVE OVERHAUL
   ════════════════════════════════════════════════════════ */

/* Mobile-first variables */
:root { --left-nav-w: 240px; }

/* ═══ TABLET (768-1100px) ═══════════════════════════════ */
@media (max-width: 1100px) {
  :root { --left-nav-w: 200px; }
  .nav-btn { font-size: 11.5px !important; padding: 5px 8px !important; }
  .nav-icon { font-size: 14px; }
  .dr-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .auth-features { grid-template-columns: 1fr 1fr !important; }
  .hdv-cats { gap: 4px !important; }
  .hdv-cat { padding: 5px 9px !important; font-size: 11px !important; }
}

/* ═══ MOBILE (≤720px) ═══════════════════════════════════ */
@media (max-width: 720px) {
  :root { --left-nav-w: 0px; }

  /* Sidebar slides in/out via #sidebar-toggle */
  .left-nav {
    width: 240px !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.7);
  }
  .left-nav.is-open,
  body.sidebar-open .left-nav { transform: translateX(0) !important; }

  /* Hamburger floating button (top-left) */
  #sidebar-toggle {
    position: fixed; top: 8px; left: 8px;
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
    border: 2px solid #c89030;
    border-radius: 8px;
    color: #ffd060;
    font-size: 18px;
    cursor: pointer;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
  }
  body.sidebar-open #sidebar-toggle { transform: rotate(90deg); }

  /* Backdrop overlay when sidebar is open */
  body.sidebar-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 150;
    pointer-events: auto;
  }
  body.sidebar-open #sidebar-backdrop { display: block; }

  .combat-dashboard, .app-body {
    margin-left: 0 !important;
  }

  /* Header dashboard: compact resources */
  .dash-titlebar {
    flex-wrap: wrap !important;
    padding: 6px 8px 6px 50px !important;  /* leave space for hamburger */
  }
  .dash-logo-text { display: none !important; }
  .dash-resources {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .dash-resources::-webkit-scrollbar { height: 0; }
  .dash-res {
    flex-shrink: 0;
    padding: 4px 8px !important;
    min-width: auto !important;
  }
  .dash-res-info { display: none !important; }
  .dash-res-icon { font-size: 16px !important; }
  .dash-res-val {
    font-size: 12px !important;
    margin-left: 4px;
    color: #ffd890 !important;
  }
  .dash-res::after {
    content: attr(data-mobile-val);
  }

  /* Almanax / Shop buttons: icon-only */
  .dash-alm-text, .dash-shop-text { display: none !important; }
  .dash-almanax-btn, .dash-shop-btn { padding: 5px 8px !important; }

  /* User pill: avatar only */
  .du-info { display: none !important; }
  .dash-user { padding: 3px !important; }

  /* Save indicator: icon only */
  .das-text { display: none !important; }

  /* Combat arena: tighter */
  .dash-combat-arena {
    min-height: 220px !important;
  }
  .arena-stage {
    min-height: 180px !important;
    padding: 10px 8px 60px !important;
  }
  .arena-side { gap: 8px !important; }
  .arena-fighter {
    min-width: 90px !important;
    max-width: 120px !important;
  }
  .arena-sprite-wrap { height: 90px !important; }
  .arena-sprite { height: 80px !important; max-width: 80px !important; }
  .arena-card {
    padding: 3px 5px !important;
    width: 95% !important;
  }
  .arena-card-name { font-size: 10px !important; }
  .arena-card-hp { height: 9px !important; }
  .arena-card-hp-txt { font-size: 8.5px !important; }
  .arena-pill { font-size: 8px !important; padding: 0 4px !important; }
  .arena-card-badges { gap: 2px !important; margin: 1px 0 2px !important; }
  .arena-divider { width: 28px !important; }
  .arena-vs { width: 36px; height: 36px; }
  .arena-vs::before { font-size: 22px !important; }
  .arena-vs::after { font-size: 28px !important; }
  .arena-header-actions .arena-hbtn { padding: 3px 6px !important; font-size: 9.5px !important; }
  .arena-header-name { font-size: 12px !important; }

  /* Char rank cards: stack */
  .char-rank-card {
    grid-template-columns: 36px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    padding: 8px !important;
    gap: 6px 8px !important;
  }
  .char-rank-avatar-wrap { grid-row: 1 / 3; }
  .char-rank-avatar { width: 36px !important; height: 36px !important; }
  .char-rank-bars { grid-column: 1 / 3 !important; }
  .char-rank-stats {
    grid-column: 1 / 3 !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .char-rank-stat { font-size: 11px !important; }
  .char-rank-status { grid-column: 1 / 3 !important; font-size: 10.5px !important; }
  .char-rank-actions { grid-column: 1 / 3 !important; flex-wrap: wrap; gap: 3px !important; }
  .char-act-btn { padding: 5px 6px !important; font-size: 12px !important; flex: 1; min-width: 38px; }

  /* Stats DR layout: stack columns */
  .dr-stats-grid { grid-template-columns: 1fr !important; }
  .dr-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
  }
  .dr-hero-portrait { align-self: center; }
  .dr-hero-pts { align-self: stretch; padding: 8px !important; }
  .dr-hero-pts-num { font-size: 22px !important; }
  .dr-hero-bar {
    grid-template-columns: 50px 1fr !important;
    grid-template-rows: auto auto;
  }
  .dr-hero-bar > b { grid-column: 1 / 3; text-align: right; font-size: 10px !important; }

  /* Spellbook: stack body */
  .grim-body { grid-template-columns: 1fr !important; }
  .grim-spell-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)) !important; gap: 5px !important; }
  .grim-spell { padding: 4px !important; }
  .grim-spell-frame { width: 48px !important; height: 48px !important; }
  .grim-spell-img { width: 44px !important; height: 44px !important; }
  .grim-spell-name { font-size: 9.5px !important; }
  .grim-header { padding: 10px !important; flex-wrap: wrap; }
  .grim-header-portrait { width: 60px !important; height: 60px !important; }
  .grim-header-name { font-size: 16px !important; }
  .grim-header-stats {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .grim-stat-pill { padding: 4px 8px !important; }
  .grim-stat-val { font-size: 14px !important; }
  .grim-stat-lbl { font-size: 9.5px !important; }

  /* HDV list: hide seller, smaller */
  .hdv-toolbar { padding: 6px !important; }
  .hdv-search { font-size: 12px; min-width: 140px !important; }
  .hdv-cats { padding: 4px 8px !important; }
  .hdv-list-header { display: none !important; }
  .hdv-card-seller { display: none !important; }
  .hdv-card-effs { display: none !important; }
  .hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card {
    padding: 4px 6px !important; gap: 8px !important;
  }
  .hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-img { width: 36px; height: 36px; }
  .hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-img img { max-width: 32px; max-height: 32px; }
  .hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-name { font-size: 12px !important; }
  .hdv-page .hdv-grid:not(.hdv-grid-sell) .hdv-card-price {
    font-size: 11px !important;
    min-width: 70px !important;
  }
  .hdv-buy-btn { font-size: 10.5px !important; padding: 5px 10px !important; }

  /* Boutique: stack */
  .shop-header { flex-direction: column; align-items: stretch !important; padding: 12px !important; }
  .shop-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .shop-offer { padding: 8px !important; }
  .shop-offer-name { font-size: 11.5px !important; }
  .shop-offer-desc { font-size: 10px !important; }
  .shop-offer-ico { font-size: 28px !important; }

  /* Almanax: tighter */
  .almx-hero { min-height: 140px !important; padding: 10px !important; }
  .almx-hero-icon { font-size: 56px !important; }
  .almx-hero-name { font-size: 22px !important; }
  .almx-hero-effect { font-size: 13px !important; padding: 5px 10px !important; }
  .almx-cal-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important; }
  .almx-cal-day { padding: 8px 6px !important; }
  .almx-cal-icon { font-size: 22px !important; }

  /* Inventory: smaller paperdoll */
  .inv-eq-page { grid-template-columns: 1fr !important; }
  .paperdoll-new { gap: 6px !important; }
  .pd-col { gap: 6px !important; }
  .pd-slot, .pd-empty-icon { width: 44px !important; height: 44px !important; }
  .pd-char-img { width: 64px !important; }

  /* Chat: full width bottom */
  #live-chat, .live-chat {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    bottom: 8px !important;
  }
  .live-chat-body { height: 140px !important; }
  .lc-input { font-size: 11px !important; }

  /* Char create: stack */
  .cc-body { grid-template-columns: 1fr !important; }
  .cc-classes-col { max-height: 280px; overflow-y: auto; }
  .cc-class-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important; gap: 5px !important; }
  .cc-builds { grid-template-columns: 1fr !important; }
  .cc-features { grid-template-columns: 1fr !important; }

  /* Auth screen */
  .auth-shell { gap: 12px !important; padding: 4px !important; }
  .auth-features { grid-template-columns: 1fr !important; }
  .auth-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .auth-card { padding: 18px !important; }
  .auth-tagline { font-size: 12.5px !important; }

  /* Misc panels */
  .panel { padding: 8px !important; }
  .panel-header h2 { font-size: 16px !important; }
  .perso-hub-tabs { padding: 6px 4px 0 !important; gap: 2px !important; }
  .phub-tab { padding: 6px 10px !important; font-size: 11.5px !important; }
  .phub-ic { font-size: 12px !important; }

  /* Ranking */
  .rk-row {
    grid-template-columns: 30px 1fr !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  .rk-row.rk-head { display: none !important; }
  .rk-server, .rk-chars, .rk-totlvl, .rk-kills, .rk-maxlvl {
    grid-column: 1 / 3 !important;
    margin-left: 36px;
  }

  /* Floating tooltip: keep readable */
  .floating-item-tooltip {
    width: calc(100vw - 32px) !important;
    max-width: 320px;
  }
}

/* ═══ SMALL MOBILE (≤480px) ═════════════════════════════ */
@media (max-width: 480px) {
  .auth-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .shop-grid { grid-template-columns: 1fr !important; }
  .hdv-tabs { flex-wrap: wrap; }
  .hdv-tab { font-size: 11px !important; padding: 6px 8px !important; }
  .arena-side-players, .arena-side-monsters {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .dash-resources { gap: 4px !important; }
  .dash-res {
    border: 1px solid rgba(184,120,8,0.35);
    border-radius: 6px;
    padding: 3px 6px !important;
  }
}

/* ═══ Touch optimisations ═══════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Bigger tap targets */
  button, .nav-btn, .phub-tab, .hdv-buy-btn, .dr-stat-btn {
    min-height: 36px;
  }
  /* Disable jittery hover transforms on touch — scoped to interactive elements only */
  button:hover, .nav-btn:hover, .hdv-card:hover, .char-rank-card:hover,
  .cc-class-card:hover, .auth-feat:hover, .almx-cal-day:hover,
  .grim-spell:hover { transform: none !important; }
  .arena-fighter:hover .arena-sprite { filter: drop-shadow(0 14px 6px rgba(0,0,0,0.55)) !important; }
}

/* ════════════════════════════════════════════════════════
   v33 — Inventory contrast + tooltip z-index + HDV badges
   ════════════════════════════════════════════════════════ */

/* Inventory equipped stats: force light text */
.inv-eq-stats { background: linear-gradient(180deg, #2a1f10, #1a1408) !important; }
.inv-eq-stats .ies-row { border-bottom-color: rgba(184,120,8,0.25) !important; color: #e8d8a0 !important; }
.inv-eq-stats .ies-label,
.inv-eq-stats .ies-row span:first-child { color: #c8a060 !important; font-weight: 700; }
.inv-eq-stats .ies-val,
.inv-eq-stats .ies-row b { color: #ffd890 !important; font-weight: 800 !important; }

/* Tooltip z-index: ensure above sidebar (z 200) and dashboard */
.floating-item-tooltip { z-index: 100000 !important; position: fixed !important; }

/* HDV: seller badge */
.hdv-seller-badge {
  display: inline-block;
  font-size: 9px; font-weight: 900;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
.hdv-seller-badge.player {
  background: linear-gradient(135deg, #80c060, #50a040);
  color: #0e0a04;
  border: 1px solid #a0e080;
  box-shadow: 0 0 6px rgba(120,200,80,0.4);
}
.hdv-seller-badge.npc {
  background: rgba(60,42,20,0.85);
  color: #c8a060;
  border: 1px solid rgba(184,120,8,0.5);
}

/* HDV empty state: bigger, friendlier */
.hdv-empty {
  padding: 50px 30px !important;
  text-align: center;
  font-style: normal !important;
  color: #c8b888 !important;
  font-size: 13px !important;
  line-height: 1.6;
}
.hdv-empty b { color: #ffd060; font-size: 16px; display: inline-block; margin-bottom: 6px; }

/* Inventory equipped item paperdoll: hover scale */
.pd-slot:hover { transform: translateY(-2px) scale(1.05); }

/* Item effect with stat icon */
.itip-eff-with-ic {
  display: flex; align-items: center; gap: 3px;
}
/* v197 — Icônes stats : 14px uniforme, sans scale (bug : 16px+scale1.5 = 24px ENORME) */
.itip-eff-ic, .pd-tt-eff-ic {
  width: 14px !important; height: 14px !important;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
/* v193 — Meta row (Niveau, Pods, Catégorie) en haut des tooltips */
.itip-meta-row {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 4px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #4a3a1e;
}
.itip-meta-pill {
  font-size: 10.5px;
  color: #ffd890;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.5);
  border-radius: 3px;
  padding: 2px 6px;
  font-weight: 700;
}

/* Pods pill in arena card */
.arena-pill.pods {
  background: linear-gradient(135deg, #4a3018, #2a1808);
  color: #ffc080;
  border-color: #8a6028;
}

/* ════════════════════════════════════════════════════════
   v34 — Send-to-farm card redesign
   ════════════════════════════════════════════════════════ */
.fs-card {
  position: relative;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 1.5px solid var(--cls-color, #6a4818);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 6px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fs-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 12px var(--cls-color, #c89030)55; }
.fs-card.fight  { box-shadow: 0 0 0 2px #50a040, 0 0 14px rgba(80,200,80,0.4); }
.fs-card.busy   { opacity: 0.85; }
.fs-card.dead   { opacity: 0.6; filter: grayscale(0.5); }
.fs-card.locked { opacity: 0.7; }

/* Status strip on top */
.fs-card-strip {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  text-transform: uppercase;
}
.fs-card-strip.fight  { background: linear-gradient(90deg, #50a040, #2a6020); color: #fff; }
.fs-card-strip.busy   { background: linear-gradient(90deg, #c89030, #a06820); color: #1a0a04; }
.fs-card-strip.dead   { background: linear-gradient(90deg, #c83030, #802010); color: #fff; }
.fs-card-strip.locked { background: linear-gradient(90deg, #4a3018, #2a1808); color: #c8a060; }
.fs-card-strip.ready  { background: linear-gradient(90deg, rgba(60,40,20,0.6), rgba(30,20,10,0.85)); color: #c8a060; }

/* Body row */
.fs-card-body {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
}
.fs-portrait {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fs-portrait img { width: 44px; height: 44px; object-fit: contain; }
.fs-lv {
  position: absolute; right: -3px; bottom: -3px;
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-size: 10px; font-weight: 900;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #1a1408;
  box-shadow: 0 0 4px rgba(255,200,80,0.5);
}
.fs-info { flex: 1; min-width: 0; }
.fs-name {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 0 6px currentColor, 0 1px 2px rgba(0,0,0,0.7);
}
.fs-class { font-size: 10.5px; color: #a89878; margin: 1px 0 3px; }
.fs-hpbar {
  position: relative;
  background: #0e0a04;
  border: 1px solid #4a3a1a;
  border-radius: 4px;
  height: 11px;
  overflow: hidden;
}
.fs-hpfill {
  height: 100%;
  transition: width 0.4s, background 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.fs-hpbar > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 1px 1px rgba(0,0,0,0.9);
}
.fs-keys {
  font-size: 10px; font-weight: 700;
  margin-top: 3px;
  color: #c8a060;
}
.fs-keys.has { color: #80c060; }
.fs-keys.no  { color: #c87060; }
.fs-other {
  font-size: 10px;
  color: #c89030;
  margin-top: 2px;
  font-style: italic;
}

/* Action button */
.fs-action {
  padding: 0 10px 8px;
}
.fs-btn {
  width: 100%;
  font-family: inherit;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid;
}
.fs-btn-send {
  background: linear-gradient(180deg, #50a040, #2a7020);
  border-color: #80f060;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 10px rgba(80,200,80,0.35);
}
.fs-btn-send:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 14px rgba(80,200,80,0.5), 0 0 14px rgba(120,240,120,0.4); }
.fs-btn-stop {
  background: linear-gradient(180deg, #d8504a, #a0301a);
  border-color: #ff7860;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 10px rgba(200,60,40,0.4);
  animation: fs-stop-glow 1.6s ease-in-out infinite;
}
@keyframes fs-stop-glow {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 10px rgba(200,60,40,0.4); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 14px rgba(255,120,80,0.6); }
}
.fs-btn-redirect {
  background: linear-gradient(180deg, #d8a040, #a06820);
  border-color: #ffd060;
  color: #1a1408;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(200,160,40,0.4);
}
.fs-btn-redirect:hover { transform: translateY(-1px); }
.fs-btn-locked {
  background: #2a2018;
  border-color: #4a3a1a;
  color: #6a5838;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════
   v35 — Premium ranking podium + active panoplies in stats
   ════════════════════════════════════════════════════════ */

/* PODIUM TOP 3 */
.rk-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 18px 14px 0;
  align-items: end;
}
.rk-podium-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 12px 12px 0 0;
  padding: 14px 10px 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rk-podium-slot:hover { transform: translateY(-3px); }
.rk-podium-slot.empty { opacity: 0; pointer-events: none; }
.rk-podium-slot.is-me {
  border-color: #ffd060;
  box-shadow: 0 0 18px rgba(255,200,80,0.4);
}

/* Heights for visual hierarchy */
.rk-podium-slot.first  { transform: translateY(-10px); border-color: #ffd060; box-shadow: 0 0 22px rgba(255,200,80,0.45); }
.rk-podium-slot.first:hover { transform: translateY(-13px); }
.rk-podium-slot.second { border-color: #c8c8d0; transform: translateY(0); }
.rk-podium-slot.third  { border-color: #d8902a; transform: translateY(8px); }
.rk-podium-slot.third:hover  { transform: translateY(5px); }
.rk-podium-slot.second:hover { transform: translateY(-3px); }

.rk-podium-medal {
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  margin-bottom: 6px;
  animation: rk-medal-bob 3s ease-in-out infinite;
}
.rk-podium-slot.first .rk-podium-medal { animation-duration: 2s; }
@keyframes rk-medal-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}

.rk-podium-portrait {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2.5px solid;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.rk-podium-portrait img { width: 100%; height: 100%; object-fit: cover; }
.rk-podium-pseudo {
  font-size: 13px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  margin-bottom: 6px;
  word-break: break-word;
  max-width: 100%;
}
.rk-podium-stats {
  display: flex; gap: 10px;
}
.rk-podium-stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.rk-podium-stat b {
  font-size: 16px; font-weight: 900;
  color: #ffd060;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rk-podium-stat span {
  font-size: 9px;
  color: #a89878;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* List rows below podium */
.ranking-table { padding: 0 14px; }
.rk-row {
  background: linear-gradient(135deg, rgba(40,28,16,0.55), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.3);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rk-row:hover {
  transform: translateX(3px);
  border-color: #c89030;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.rk-row.me {
  border-color: #ffd060 !important;
  background: linear-gradient(135deg, rgba(255,200,80,0.18), rgba(40,28,16,0.85)) !important;
  box-shadow: 0 0 14px rgba(255,200,80,0.3);
}
.rk-row.rk-head {
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border-color: #6a4818;
}
.rk-rank {
  font-size: 17px; font-weight: 900;
  color: #c8a060;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Ranking header polish */
.ranking-header {
  text-align: center;
  position: relative;
}
.ranking-title {
  font-size: 26px !important;
  font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  letter-spacing: 3px !important;
  text-shadow: none !important;
}
.ranking-sub {
  font-size: 12px;
  color: #c8a060;
  letter-spacing: 0.5px;
}

@media (max-width: 720px) {
  .rk-podium {
    grid-template-columns: 1fr;
    padding: 12px 8px 0;
    gap: 8px;
  }
  .rk-podium-slot.first, .rk-podium-slot.third { transform: none; }
  .rk-podium-slot.first:hover, .rk-podium-slot.third:hover { transform: translateY(-3px); }
}

/* ════════════════════════════════════════════════════════
   v36 — Sidebar accordion + tooltip portal + premium fixes
   ════════════════════════════════════════════════════════ */

/* ── Sidebar char cards: compact accordion mode for 8 chars ── */
.left-nav #char-list .char-card {
  margin-bottom: 4px !important;
  padding: 4px 6px !important;
}
.char-card .ccd-bars { display: none; }
.char-card .ccd-status-strip { font-size: 8.5px !important; padding: 1px 5px !important; }
.char-card.active .ccd-bars,
.char-card.expanded .ccd-bars { display: flex; }
.char-card .ccd-main { gap: 6px; }
.char-card .ccd-portrait { width: 32px !important; height: 32px !important; }
.char-card .ccd-portrait img { width: 30px !important; height: 30px !important; }
.char-card .ccd-lv {
  width: 16px !important; height: 16px !important;
  font-size: 9px !important;
  bottom: -2px !important; right: -2px !important;
}
.char-card .ccd-name { font-size: 11px !important; line-height: 1.2; }
.char-card .ccd-class { font-size: 10px !important; line-height: 1.1; }
.char-card .ccd-zone { font-size: 9.5px !important; line-height: 1.2; margin-top: 1px; }

/* Active card expands */
.char-card.active {
  padding: 7px 8px !important;
  margin-bottom: 6px !important;
}
.char-card.active .ccd-portrait { width: 44px !important; height: 44px !important; }
.char-card.active .ccd-portrait img { width: 42px !important; height: 42px !important; }
.char-card.active .ccd-bars { gap: 3px; margin-top: 4px; }
.char-card.active .ccd-bar-row { font-size: 10px !important; }
.char-card.active .ccd-bar { height: 6px !important; }

/* ── Tooltip: properly portal-stacked above EVERYTHING ── */
body > .floating-item-tooltip {
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none;
  isolation: isolate;
}
.floating-item-tooltip { z-index: 999999 !important; }

/* Force ALL parents to NOT clip when hovering items */
.inv-eq-page, .inv-eq-left, .inv-eq-right, .panel,
.left-nav, .combat-dashboard {
  /* keep overflow but tooltip is portal'd to body */
}
/* v240 — Force la visibilité du floating-item-tooltip (au cas où une règle hérite display:none) */
#floating-item-tooltip.floating-item-tooltip {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── HDV empty state premium ──────────────────────────── */
.hdv-empty-premium {
  padding: 60px 30px !important;
  text-align: center;
  color: #e8d8a0 !important;
  background: linear-gradient(135deg, rgba(60,42,20,0.5), rgba(20,14,8,0.85));
  border: 2px dashed rgba(184,120,8,0.45);
  border-radius: 14px;
  margin: 16px 0;
}
.hdv-empty-icon {
  font-size: 64px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(255,200,80,0.3));
  animation: hdv-empty-bob 4s ease-in-out infinite;
}
@keyframes hdv-empty-bob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-6px) rotate(3deg); }
}
.hdv-empty-title {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 14px;
  letter-spacing: 1.5px;
}
.hdv-empty-msg {
  font-size: 13.5px;
  line-height: 1.6;
  color: #d8c898 !important;
  font-style: normal;
  max-width: 480px;
  margin: 0 auto 16px;
}
.hdv-empty-msg b { color: #ffd060; }
.hdv-empty-soon {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, rgba(120,140,200,0.2), rgba(80,100,180,0.3));
  color: #a8c0ff;
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid rgba(140,160,220,0.4);
}

/* ── Spell tags : light text on dark background ──────── */
.spx-tag {
  background: linear-gradient(135deg, rgba(60,42,20,0.85), rgba(30,20,10,0.95)) !important;
  color: #ffd890 !important;
  border: 1px solid rgba(184,120,8,0.4) !important;
}
.spx-tag b { color: #ffd060 !important; }
.spx-tag span { color: inherit !important; }
.spx-tag-ic { color: #c8a060; }
.spx-tag.warn {
  background: linear-gradient(135deg, rgba(120,80,40,0.5), rgba(60,40,20,0.85)) !important;
  color: #ffd890 !important;
}

/* Spell description visible */
.spx-desc {
  color: #d8c898 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  background: rgba(60,42,20,0.4) !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  border-left: 3px solid #c89030 !important;
}

/* Spell stars in card: now reads "Nv. X/6" — make pretty */
.grim-spell-stars {
  font-family: var(--font-main, sans-serif);
  font-size: 9.5px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #ffd060, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  letter-spacing: 0.5px !important;
  text-shadow: none !important;
}
.grim-spell.locked .grim-spell-stars {
  background: none;
  -webkit-text-fill-color: #6a5838 !important;
  color: #6a5838 !important;
}
.grim-spell.maxed .grim-spell-stars::after {
  content: ' 👑';
  -webkit-text-fill-color: #ffd060 !important;
}

/* ── Caractéristiques (stats) redesign — premium ───── */
.dr-stat-row {
  background: linear-gradient(135deg, rgba(60,42,20,0.3), rgba(20,14,8,0.5));
  border-radius: 8px;
  padding: 8px 10px !important;
  margin-bottom: 4px;
  transition: background 0.15s;
}
.dr-stat-row:hover { background: linear-gradient(135deg, rgba(80,56,28,0.5), rgba(30,20,10,0.7)); }
.dr-stat-head {
  margin-bottom: 6px !important;
}
.dr-stat-ic {
  width: 26px !important; height: 26px !important;
}
.dr-stat-name {
  font-size: 13.5px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dr-stat-total {
  font-size: 18px !important;
  text-shadow: 0 0 6px rgba(255,200,80,0.4);
  background: linear-gradient(135deg, #ffe898, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
.dr-stat-eq {
  font-size: 10.5px !important;
  background: rgba(80,160,80,0.18);
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid rgba(120,200,120,0.35);
}
.dr-stat-cost { font-size: 10.5px !important; color: #a89878 !important; margin-left: 0 !important; }
.dr-stat-btns { margin-left: 0 !important; gap: 4px !important; }
.dr-stat-btn {
  font-size: 12px !important; padding: 5px 8px !important;
  flex: 1 !important;
}

/* ── Premium Ranking Polish ─────────────────────────── */
.ranking-page { padding: 14px 10px; }
.ranking-header {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #c89030;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  text-align: center;
  position: relative; overflow: hidden;
}
.ranking-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,80,0.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(184,120,8,0.04) 0 1px, transparent 1px 80px);
  pointer-events: none;
}
.ranking-title {
  position: relative; z-index: 1;
  font-size: 28px !important;
  letter-spacing: 4px !important;
}
.ranking-sub {
  position: relative; z-index: 1;
  font-size: 13px !important;
  margin-top: 4px;
}

/* Refresh hint */
.rk-refresh-hint {
  text-align: center;
  font-size: 11px;
  color: #8a7858;
  margin-top: 8px;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════
   v37 — Offline progress modal + Boutique polish
   ════════════════════════════════════════════════════════ */

/* ── Offline recap modal ───────────────────────────────── */
.offline-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
  animation: oml-fade 0.3s ease-out;
}
@keyframes oml-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.offline-modal {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1408 100%);
  border: 2px solid #c89030;
  border-radius: 16px;
  padding: 22px 28px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 60px rgba(255,200,80,0.2);
  animation: oml-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes oml-pop {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.offline-head { text-align: center; margin-bottom: 18px; }
.offline-icon {
  font-size: 56px;
  filter: drop-shadow(0 4px 12px rgba(255,200,80,0.4));
  animation: oml-bob 3s ease-in-out infinite;
}
@keyframes oml-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.offline-title {
  font-size: 26px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 2px;
  margin-top: 6px;
}
.offline-sub {
  font-size: 13px;
  color: #c8b888;
  margin-top: 4px;
}
.offline-sub b { color: #ffd060; }

/* Totals row */
.offline-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  padding: 14px;
  background: rgba(60,42,20,0.5);
  border: 1px solid rgba(184,120,8,0.45);
  border-radius: 10px;
}
.ot-cell {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.ot-cell b {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #fff5c0, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.ot-cell span {
  font-size: 10px;
  color: #a89878;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Per-char row */
.offline-chars {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.ol-char {
  display: flex; gap: 12px;
  background: linear-gradient(135deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  align-items: center;
}
.ol-portrait {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid #c89030;
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.ol-info { flex: 1; min-width: 0; }
.ol-name {
  font-size: 14px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.3px;
}
.ol-zone { font-size: 11px; color: #a89878; margin: 1px 0 4px; }
.ol-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700;
  color: #c8b888;
}
.ol-stats span { white-space: nowrap; }
.ol-up {
  color: #ffd060 !important;
  text-shadow: 0 0 4px rgba(255,200,80,0.5);
}
.ol-loots {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 5px;
}
.ol-loot {
  font-size: 10.5px;
  background: rgba(80,160,80,0.18);
  color: #c0e0a0;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(120,200,120,0.4);
  white-space: nowrap;
}
.ol-loot small { color: #80c060; font-weight: 700; }

.offline-close {
  width: 100%;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%);
  border: 2px solid #ffd060;
  color: #1a1408;
  padding: 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px; font-weight: 900;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(255,200,80,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.offline-close:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(255,200,80,0.5); }

@media (max-width: 720px) {
  .offline-modal { padding: 18px; }
  .offline-totals { grid-template-columns: repeat(2, 1fr); }
  .offline-title { font-size: 22px; }
  .ot-cell b { font-size: 18px; }
}

/* ── Boutique : prix + offres remontées en relief ───── */
.shop-offer-cost {
  font-size: 16px !important;
}
.shop-offer-cost b { font-size: 16px !important; }
.shop-offer-tag {
  font-size: 8px !important;
}

/* ════════════════════════════════════════════════════════
   v38 — Ranking refresh button + status badges
   ════════════════════════════════════════════════════════ */
.rk-refresh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(60,42,20,0.7);
  border: 1px solid rgba(184,120,8,0.45);
  border-radius: 50%;
  color: #ffd060;
  cursor: pointer;
  margin-left: 8px;
  font-size: 13px;
  transition: transform 0.3s, background 0.15s;
  vertical-align: middle;
}
.rk-refresh-btn:hover {
  background: rgba(80,56,28,0.9);
  transform: rotate(180deg);
}
.rk-error {
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(200,60,40,0.15);
  border: 1px solid rgba(220,80,60,0.45);
  border-radius: 6px;
  color: #ff8060;
  font-size: 11.5px;
  font-weight: 700;
}
.rk-loading {
  margin-top: 8px;
  font-size: 11.5px;
  color: #ffd060;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════
   v39 — Massive UI overhaul: ranking, arena, combat, sorts, chat mod
   ════════════════════════════════════════════════════════ */

/* ── CHAT mod actions + deleted messages ─────────────── */
.lc-mod-actions {
  display: none;
  margin-left: 6px;
}
.lc-line:hover .lc-mod-actions { display: inline-flex; gap: 2px; }
.lc-mod-btn {
  background: rgba(60,42,20,0.85);
  border: 1px solid rgba(184,120,8,0.45);
  color: #ffd060;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.lc-mod-btn:hover { background: rgba(80,56,28,0.95); border-color: #ffd060; }
.lc-line.deleted .lc-msg {
  font-style: italic;
  color: #6a5a40 !important;
  text-decoration: line-through;
}
.lc-line.deleted { opacity: 0.55; }

/* ── PAPERDOLL bigger (Dofus Retro feel) ─────────────── */
.inv-eq-page { grid-template-columns: 360px 1fr !important; gap: 14px !important; }
.paperdoll-new {
  gap: 10px !important;
  padding: 14px 8px !important;
}
.pd-col { gap: 8px !important; }
.pd-slot, .pd-empty-icon {
  width: 68px !important; height: 68px !important;
  border-width: 2px !important;
  border-radius: 8px !important;
  font-size: 28px !important;
}
.pd-slot img { max-width: 60px !important; max-height: 60px !important; }
.pd-char-img {
  width: 130px !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
}
.pd-center {
  position: relative;
  background: radial-gradient(ellipse at center 70%, rgba(255,200,80,0.1) 0%, transparent 60%);
  padding: 0 4px;
}
.pd-label {
  font-size: 10px !important;
  color: #c8a060 !important;
  font-weight: 700 !important;
}
.pd-dofus-row { gap: 6px !important; padding: 8px 0 !important; }
.pd-dofus-slot { width: 44px !important; height: 44px !important; }

/* ── INVENTORY GRID bigger Dofus Retro vibe ──────────── */
.inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
  gap: 4px !important;
}
.inv-slot {
  width: auto !important;
  aspect-ratio: 1 !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  position: relative;
  transition: transform 0.1s, border-color 0.15s;
}
.inv-slot:hover {
  transform: scale(1.05);
  border-color: #ffd060 !important;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
  z-index: 5;
}
.inv-slot img { max-width: 80% !important; max-height: 80% !important; }
.inv-qty {
  position: absolute;
  bottom: 1px; right: 2px;
  background: rgba(0,0,0,0.85);
  color: #ffd060;
  font-size: 9.5px; font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(184,120,8,0.5);
}

/* Force tooltip portal everywhere */
.inv-slot, .pd-slot { overflow: visible !important; }

/* ── ARENA 8v8 LAYOUT ─────────────────────────────────── */
.arena-stage {
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-height: 280px !important;
}
.arena-side {
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  flex: 1 1 45%;
  min-width: 0;
}
.arena-fighter {
  min-width: 80px !important;
  max-width: 110px !important;
  flex: 0 0 auto;
}
.arena-sprite-wrap { height: 96px !important; }
.arena-sprite { height: 84px !important; max-width: 84px !important; }
.arena-card {
  width: 100% !important;
  padding: 3px 6px !important;
}
.arena-card-name { font-size: 10px !important; }
.arena-card-hp { height: 10px !important; }
.arena-card-hp-txt { font-size: 8.5px !important; }
.arena-pill { font-size: 8px !important; padding: 0 4px !important; line-height: 1.5 !important; }
.arena-card-badges { gap: 2px !important; margin: 1px 0 2px !important; }
.arena-divider { width: 32px !important; flex-shrink: 0; }
.arena-vs { width: 40px; height: 40px; }
.arena-vs::before { font-size: 22px !important; }
.arena-vs::after { font-size: 28px !important; }

/* ── RANKING PREMIUM (full redesign) ──────────────────── */
.ranking-page {
  padding: 20px 22px !important;
}
.ranking-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,80,0.22) 0%, transparent 60%),
    linear-gradient(135deg, #2a1f10 0%, #1a0a04 100%);
  border: 2px solid #c89030;
  border-radius: 18px !important;
  padding: 26px 24px !important;
  margin-bottom: 18px !important;
  position: relative; overflow: hidden;
}
.ranking-header::before {
  content: '🏆';
  position: absolute;
  font-size: 200px;
  top: -40px; right: -30px;
  opacity: 0.06;
  filter: drop-shadow(0 0 30px gold);
  pointer-events: none;
}
.ranking-title {
  font-size: 36px !important;
  letter-spacing: 6px !important;
  text-shadow: 0 0 30px rgba(255,200,80,0.4);
  position: relative; z-index: 1;
}
.ranking-sub {
  font-size: 14px !important;
  color: #c8b888 !important;
  position: relative; z-index: 1;
  margin-top: 6px;
}

/* PODIUM bigger and more dramatic */
.rk-podium {
  padding: 30px 20px 0 !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  position: relative;
}
.rk-podium-slot {
  border-radius: 14px !important;
  padding: 20px 14px 18px !important;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%) !important;
  border-width: 2.5px !important;
}
.rk-podium-slot.first {
  transform: translateY(-16px) scale(1.05) !important;
  border-color: #ffd060 !important;
  box-shadow:
    0 0 30px rgba(255,200,80,0.55),
    inset 0 1px 0 rgba(255,200,80,0.25),
    0 12px 30px rgba(0,0,0,0.6) !important;
}
.rk-podium-slot.first:hover { transform: translateY(-19px) scale(1.05) !important; }
.rk-podium-slot.first::before {
  content: '👑';
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  animation: rk-crown-glow 2.5s ease-in-out infinite;
}
@keyframes rk-crown-glow {
  0%,100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(255,200,80,0.3)); }
  50%     { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(255,200,80,0.8)); }
}
.rk-podium-medal { font-size: 50px !important; }
.rk-podium-portrait {
  width: 84px !important; height: 84px !important;
  border-width: 3px !important;
  margin-bottom: 10px !important;
}
.rk-podium-pseudo {
  font-size: 16px !important;
  margin-bottom: 10px !important;
}
.rk-podium-stats {
  background: rgba(0,0,0,0.4);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(184,120,8,0.4);
  width: 100%;
  justify-content: space-around;
}
.rk-podium-stat b { font-size: 18px !important; }
.rk-podium-stat span { font-size: 10px !important; }

/* List rows: cleaner */
.ranking-table { padding: 0 !important; gap: 6px !important; }
.rk-row {
  background: linear-gradient(135deg, rgba(40,28,16,0.7), rgba(20,14,8,0.92)) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  border: 1.5px solid rgba(184,120,8,0.35) !important;
}
.rk-row:hover { transform: translateX(4px); border-color: #c89030 !important; }
.rk-row.me {
  border-color: #ffd060 !important;
  background: linear-gradient(135deg, rgba(255,200,80,0.22), rgba(40,28,16,0.92)) !important;
  box-shadow: 0 0 18px rgba(255,200,80,0.4) !important;
}
.rk-rank {
  font-size: 18px !important;
  background: linear-gradient(135deg, #ffd060, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

/* ── CARACTÉRISTIQUES — premium redesign ──────────────── */
.dr-stat-row {
  background: linear-gradient(135deg, rgba(60,42,20,0.55), rgba(20,14,8,0.85)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 6px !important;
  position: relative;
  overflow: hidden;
}
.dr-stat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ffd060, #c89030);
  opacity: 0.6;
}
.dr-stat-head { gap: 12px !important; margin-bottom: 8px !important; }
.dr-stat-ic { width: 30px !important; height: 30px !important; }
.dr-stat-name {
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  color: #ffd890 !important;
}
.dr-stat-total {
  font-size: 22px !important;
  text-shadow: 0 0 12px rgba(255,200,80,0.5);
  font-weight: 900 !important;
}
.dr-stat-cost {
  font-size: 11px !important;
  color: #a89878 !important;
  margin-bottom: 6px !important;
  background: rgba(0,0,0,0.3);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.dr-stat-btns { gap: 5px !important; }
.dr-stat-btn {
  font-size: 12.5px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}

/* ── SPELLS UI — cleaner ──────────────────────────────── */
.grim-spell {
  border-radius: 10px !important;
  padding: 6px 4px !important;
}
.grim-spell-frame {
  background: radial-gradient(circle, rgba(255,200,80,0.15) 0%, transparent 70%) !important;
}
.grim-spell-name {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #ffd890 !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.grim-spell-stars {
  font-size: 10px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #ffd060, #c89030) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  margin-bottom: 2px;
}
.grim-spell.locked .grim-spell-stars {
  background: none !important;
  color: #6a5838 !important;
  -webkit-text-fill-color: #6a5838 !important;
}

/* Spell upgrade button : richer */
.spx-upgrade {
  width: 100%;
  background: linear-gradient(180deg, #d8a040 0%, #a06820 100%) !important;
  border: 2px solid #ffd060 !important;
  color: #1a1408 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  display: flex !important; align-items: center; justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(255,200,80,0.4);
  transition: all 0.15s;
}
.spx-upgrade.can:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(255,200,80,0.55); }
.spx-upgrade:disabled, .spx-upgrade:not(.can) {
  background: linear-gradient(180deg, #4a3a1a, #2a2018) !important;
  border-color: #5a4828 !important;
  color: #6a5838 !important;
  cursor: not-allowed;
  box-shadow: none;
}
.spx-upgrade-icon { font-size: 20px; }
.spx-upgrade-cost {
  background: rgba(0,0,0,0.4);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
}

/* Spell order: more readable */
.spord-section {
  background: linear-gradient(180deg, rgba(40,28,16,0.6), rgba(20,14,8,0.85));
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 12px 14px;
}
.spord-header {
  font-size: 13px !important;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.spord-list, .grim-order-list { gap: 4px !important; }
.spord-item, .grim-order, .sb-order-row {
  background: linear-gradient(90deg, rgba(60,42,20,0.85), rgba(30,20,10,0.95)) !important;
  border: 1px solid rgba(184,120,8,0.45) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: #ffd890 !important;
  font-weight: 700;
}
.spord-pos, .order-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-weight: 900; font-size: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── COMBAT LOG — show participants ──────────────────── */
.combat-entry {
  background: linear-gradient(135deg, rgba(40,28,16,0.7), rgba(20,14,8,0.92)) !important;
  border: 1.5px solid rgba(184,120,8,0.35) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
}
.combat-entry.victory { border-color: rgba(80,200,80,0.5) !important; }
.combat-entry.defeat  { border-color: rgba(220,80,60,0.5) !important; opacity: 0.85; }
.entry-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.entry-result { font-size: 18px; }
.entry-zone {
  font-size: 12.5px; font-weight: 800;
  color: #ffd890;
  flex: 1;
  letter-spacing: 0.3px;
}
.entry-time { font-size: 10.5px; color: #8a7858; }
.entry-xp {
  background: rgba(232,120,32,0.18);
  color: #ffaa50;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 800;
}
.entry-body { font-size: 11.5px; color: #c8b888; }
.entry-hp { margin-bottom: 4px; }
.entry-loot {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.entry-loot > span {
  background: rgba(60,42,20,0.6);
  border: 1px solid rgba(184,120,8,0.35);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  color: #ffd890;
}

/* ── HDV refresh hint ────────────────────────────────── */
.hdv-empty-premium { color: #e8d8a0 !important; }
.hdv-empty-msg { color: #d8c898 !important; }

/* ════════════════════════════════════════════════════════
   v40 — Inventaire Dofus Retro authentique (paperdoll + catalog)
   ════════════════════════════════════════════════════════ */

.dr-inv-page {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
}

/* Title bar */
.dr-inv-titlebar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, #6a4818 0%, #4a3018 100%);
  border: 2px solid #8a6028;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
}
.dr-inv-title {
  font-family: var(--font-main, sans-serif);
  font-size: 16px; font-weight: 900;
  color: #ffd890;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}
.dr-inv-count {
  font-size: 12px; font-weight: 700;
  color: #ffd890;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(184,120,8,0.5);
}

/* Body 2-column */
.dr-inv-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(360px, 1fr);
  gap: 12px;
  background: #3a2a18;
  border: 2px solid #8a6028;
  border-radius: 0 0 8px 8px;
  padding: 12px;
}

/* ─── PAPERDOLL PANEL ─────────────────────────────────── */
.dr-pd-panel {
  background: linear-gradient(180deg, #4a3a1e 0%, #2a1f10 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}

.dr-pd-stage {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  padding: 10px;
  min-height: 320px;
}
.dr-pd-col {
  display: flex; flex-direction: column;
  gap: 4px;
  align-items: center;
}
.dr-pd-col .pd-slot {
  width: 50px !important;
  height: 50px !important;
}

/* Mannequin = silhouette + slots positioned anatomically */
.dr-pd-mannequin {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dr-pd-silhouette {
  width: 130px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
  opacity: 0.85;
}
.dr-pd-anatomy {
  position: absolute; inset: 0;
  pointer-events: none;
}
.dr-anat {
  position: absolute;
  pointer-events: auto;
}
.dr-anat-slot {
  width: 52px !important;
  height: 52px !important;
}
.dr-anat-chapeau   { top: 0;       left: 50%; transform: translateX(-50%); }
.dr-anat-amulette  { top: 22%;     left: 50%; transform: translateX(-50%); }
.dr-anat-arme      { top: 25%;     right: -5px; }
.dr-anat-anneau1   { top: 50%;     left: -8px; }
.dr-anat-anneau2   { top: 50%;     right: -8px; }
.dr-anat-ceinture  { top: 60%;     left: 50%; transform: translateX(-50%); }
.dr-anat-bottes    { bottom: 0;    left: 50%; transform: translateX(-50%); }

/* ─── PODS BAR (Dofus orange) ─────────────────────────── */
.dr-pd-bottom {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #5a3a1a 0%, #3a2410 100%);
  border: 2px solid #8a6028;
  border-radius: 8px;
}
.dr-pd-kamas {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 900;
  color: #ffd060;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.dr-kamas-ic { font-size: 18px; filter: drop-shadow(0 0 4px rgba(255,200,80,0.5)); }
.dr-pd-pods {
  flex: 1; display: flex; align-items: center; gap: 8px;
}
.dr-pods-label {
  font-size: 11px; font-weight: 800;
  color: #ffd890;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dr-pods-bar {
  flex: 1;
  height: 14px;
  background: #1a1408;
  border: 1.5px solid #6a4818;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.dr-pods-fill {
  height: 100%;
  transition: width 0.4s, background 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.dr-pods-val {
  font-size: 11px; font-weight: 800;
  color: #ffd890;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
}

/* Item detail */
.dr-pd-detail {
  flex: 1;
  background: linear-gradient(180deg, #1a1408 0%, #0e0a04 100%);
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 80px;
  overflow: auto;
}
.dr-pd-detail-empty {
  text-align: center;
  color: #8a7858;
  font-style: italic;
  font-size: 12.5px;
  padding: 16px 0;
}

/* Stats mini-bar at bottom of paperdoll */
.dr-pd-stats {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 6px;
  font-size: 11.5px;
}
.dr-pd-stats-row {
  display: flex; justify-content: space-around;
  gap: 6px;
  flex-wrap: wrap;
}
.dr-pd-stats-row span {
  display: inline-flex; align-items: center; gap: 4px;
  color: #ffd890;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dr-stat-mini-ic { width: 16px; height: 16px; vertical-align: middle; }

/* ─── CATALOG PANEL ──────────────────────────────────── */
.dr-cat-panel {
  background: linear-gradient(180deg, #4a3a1e 0%, #2a1f10 100%);
  border: 2px solid #6a4818;
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.dr-cat-header {
  font-family: var(--font-main, sans-serif);
  font-size: 14px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 1.5px;
  padding: 4px 6px 8px;
  border-bottom: 1px dashed rgba(184,120,8,0.4);
  text-transform: uppercase;
}
.dr-cat-filters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.dr-cat-btn {
  background: linear-gradient(180deg, #d8a040, #a06820);
  border: 1.5px solid #ffd060;
  color: #1a1408;
  font-size: 16px;
  padding: 7px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.1s, box-shadow 0.15s;
  font-family: inherit;
}
.dr-cat-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 10px rgba(255,200,80,0.4); }
.dr-cat-btn.active {
  background: linear-gradient(180deg, #ffd060, #d8a040);
  box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255,200,80,0.6);
}

.dr-cat-search-input {
  width: 100%;
  background: linear-gradient(180deg, #ffe9a8 0%, #f4c16b 100%);
  border: 2px solid #6a4818;
  color: #1a1408;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.dr-cat-search-input::placeholder { color: rgba(60,40,20,0.6); }
.dr-cat-search-input:focus { outline: none; border-color: #ffd060; }

.dr-cat-grid {
  flex: 1; min-height: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 4px;
  padding: 6px;
  background: linear-gradient(180deg, #1a1408 0%, #0e0a04 100%);
  border: 2px solid #6a4818;
  border-radius: 8px;
  overflow-y: auto;
  align-content: start;
}
.dr-cat-grid::-webkit-scrollbar { width: 8px; }
.dr-cat-grid::-webkit-scrollbar-thumb { background: #6a4818; border-radius: 4px; }
.dr-cat-grid::-webkit-scrollbar-track { background: #1a1408; }

.dr-cat-slot {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #2a1f10 0%, #1a1408 100%);
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 6px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  overflow: visible;
}
.dr-cat-slot.empty {
  background: rgba(40,28,16,0.4);
  border-style: dashed;
  border-color: rgba(184,120,8,0.2);
  cursor: default;
}
.dr-cat-slot.filled:hover {
  transform: scale(1.08);
  border-color: #ffd060;
  box-shadow: 0 0 14px rgba(255,200,80,0.5);
  z-index: 5;
}
.dr-cat-slot.selected {
  border-color: #ff8030;
  box-shadow: 0 0 0 2px #ff8030, 0 0 14px rgba(255,128,48,0.5);
}
.dr-cat-slot img {
  max-width: 80%;
  max-height: 80%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.dr-cat-qty {
  position: absolute;
  bottom: 2px; right: 2px;
  background: rgba(0,0,0,0.9);
  color: #ffd060;
  font-size: 9.5px; font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(184,120,8,0.6);
}
.dr-cat-equip {
  position: absolute;
  top: 2px; left: 2px;
  background: rgba(184,120,8,0.85);
  color: #1a1408;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 900;
}

.dr-cat-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* Mobile */
@media (max-width: 980px) {
  .dr-inv-body { grid-template-columns: 1fr !important; }
  .dr-pd-stage { grid-template-columns: 50px 1fr 50px; min-height: 280px; }
  .dr-pd-silhouette { width: 110px; }
  .dr-cat-filters { grid-template-columns: repeat(5, 1fr); }
}

/* ════════════════════════════════════════════════════════
   v41 — Combat-log + Sorts + Header + Ranking list + Stats + Inv polish
   ════════════════════════════════════════════════════════ */

/* ── Header combat dashboard : -15% height ─────────────── */
.combat-dashboard { font-size: 92%; }
.dash-titlebar { padding-top: 4px !important; padding-bottom: 4px !important; }
.dash-resources { padding: 4px 8px !important; }
.dash-res { padding: 3px 8px !important; }
.dash-res-icon { font-size: 18px !important; }
.dash-combat-arena { min-height: 240px !important; }
.arena-stage { min-height: 220px !important; padding: 12px 24px 60px !important; }

/* ── COMBAT LOG : readable + participants ─────────────── */
#panel-combat-log {
  background: linear-gradient(180deg, #1a1408 0%, #0e0a04 100%);
  color: #e8d8a0;
  padding: 12px 16px;
}
.log-stats-bar {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px; font-weight: 700;
}
.log-stat {
  display: flex; align-items: center; gap: 5px;
  color: #ffd890;
}
.log-stat span:first-child { color: #c8a060; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; }
.combat-log-list { display: flex; flex-direction: column; gap: 8px; }

.combat-entry {
  background: linear-gradient(135deg, rgba(40,28,16,0.85), rgba(20,14,8,0.95)) !important;
  color: #e8d8a0 !important;
}
.combat-entry .entry-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(184,120,8,0.3);
}
.combat-entry .entry-zone {
  color: #ffd890 !important;
  font-weight: 800;
  font-size: 13px;
  flex: 1;
}
.combat-entry .entry-time {
  color: #a89878 !important;
  font-size: 10.5px;
  font-style: italic;
}
.combat-entry .entry-xp {
  color: #ffaa50 !important;
  background: rgba(232,120,32,0.15);
  border: 1px solid rgba(232,120,32,0.35);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
}
.combat-entry .entry-body {
  color: #c8b888 !important;
  font-size: 12px;
}
.combat-entry .entry-hp {
  color: #d8c898 !important;
  margin: 4px 0;
}

/* Participants pills */
.entry-participants, .entry-monsters {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 6px 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  align-items: center;
}
.ep-label {
  font-size: 10.5px; font-weight: 800;
  color: #c8a060;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: 4px;
}
.ep-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 3px;
  background: linear-gradient(90deg, rgba(60,42,20,0.7), rgba(30,20,10,0.9));
  border: 1.5px solid;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
}
.ep-pill img {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
}
.ep-pill small { color: #c8a060; font-weight: 800; font-size: 9.5px; }
.em-pill {
  background: rgba(60,30,30,0.6);
  border: 1px solid rgba(200,80,60,0.4);
  color: #ffaa90;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.em-pill small { color: #c89060; font-size: 9.5px; }

/* Loot with attribution */
.entry-loot {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
}
.entry-loot::before {
  content: '🎁 LOOT';
  font-size: 10.5px; font-weight: 800;
  color: #c8a060;
  letter-spacing: 1px;
  margin-right: 4px;
}
.loot-mini {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(60,42,20,0.7);
  border: 1px solid rgba(184,120,8,0.4);
  padding: 3px 7px;
  border-radius: 12px;
  font-size: 11px;
  color: #ffd890 !important;
  font-weight: 700;
}
.loot-mini-img { width: 18px; height: 18px; image-rendering: pixelated; }
.loot-mini.loot-equip {
  background: rgba(120,80,40,0.6);
  border-color: rgba(255,200,80,0.5);
  color: #fff5c0 !important;
}

.entry-log-details {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
}
.entry-log-details summary {
  color: #c8a060 !important;
  cursor: pointer;
  font-weight: 700;
}
.entry-log {
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 10.5px;
  color: #c8b888 !important;
  background: #0e0a04;
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(184,120,8,0.25);
}

/* ── SPORTS / SPELL detail : no truncation ───────────── */
.spx-detail { color: #e8d8a0 !important; }
.spx-hero-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  word-break: break-word;
}
.spx-desc {
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word;
  hyphens: auto;
}
.grim-spell-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}
.spx-tag {
  white-space: normal !important;
  word-break: break-word;
}
.spx-tag span {
  white-space: normal !important;
}
.sb-detail-body p, .sd-body p {
  word-break: break-word;
  white-space: normal !important;
}

/* ── RANKING : LIST view (no podium) ──────────────────── */
.rk-podium { display: none !important; }
.ranking-table {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0;
}
.rk-row {
  display: grid !important;
  grid-template-columns: 50px 1fr auto auto auto auto !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  align-items: center;
  border-radius: 8px !important;
}
.rk-row.rk-head {
  display: grid !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  padding: 8px 16px !important;
  background: rgba(0,0,0,0.4) !important;
}
.rk-pseudo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  color: #ffd890;
}
.rk-pseudo b { color: #ffd060 !important; }
.rk-rank {
  font-size: 17px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rk-totlvl, .rk-maxlvl, .rk-kills {
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: #ffd890;
}
.rk-totlvl b, .rk-maxlvl b { color: #ffd060 !important; font-size: 16px !important; }
.rk-server {
  display: none; /* simplifie sur le tableau */
}
.rk-chars { display: none !important; }

/* Show top 3 with subtle medal in rank cell */
.rk-row:nth-child(2) .rk-rank::before { content: '🥇 '; }
.rk-row:nth-child(3) .rk-rank::before { content: '🥈 '; }
.rk-row:nth-child(4) .rk-rank::before { content: '🥉 '; }

.ranking-page { padding: 20px !important; }
.ranking-header {
  margin-bottom: 16px !important;
  padding: 18px 22px !important;
}
.ranking-title { font-size: 26px !important; letter-spacing: 4px !important; }

@media (max-width: 720px) {
  .rk-row { grid-template-columns: 36px 1fr auto auto !important; gap: 6px !important; }
  .rk-kills, .rk-row.rk-head .rk-kills { display: none !important; }
}

/* ── STATS PREMIUM (caractéristiques cleaner) ─────────── */
.dr-stats-page { padding: 18px 22px !important; }
.dr-hero {
  border-radius: 14px !important;
  padding: 18px 22px !important;
  border-width: 2.5px !important;
}
.dr-hero-name {
  font-size: 26px !important;
  letter-spacing: 1px !important;
}
.dr-hero-portrait {
  width: 90px !important; height: 90px !important;
  border-width: 3.5px !important;
}
.dr-hero-pts {
  border-radius: 12px !important;
  padding: 12px 18px !important;
}
.dr-hero-pts-num { font-size: 32px !important; }
.dr-hero-pts-lbl { font-size: 10px !important; }

.dr-col {
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.dr-col-title {
  font-size: 12px !important;
  background: linear-gradient(135deg, #ffd060, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  letter-spacing: 3px !important;
  margin-bottom: 12px !important;
}
.dr-stat-row {
  border-width: 1.5px !important;
  padding: 12px 14px !important;
  position: relative;
}
.dr-stat-row::before {
  width: 5px !important;
  border-radius: 2px;
  top: 8px; bottom: 8px;
}
.dr-stat-name {
  font-size: 13px !important;
  letter-spacing: 1px !important;
  color: #ffe898 !important;
}
.dr-stat-total {
  font-size: 24px !important;
  text-shadow: 0 0 14px rgba(255,200,80,0.5) !important;
}
.dr-stat-eq {
  background: rgba(80,160,80,0.22) !important;
  border-radius: 10px !important;
  padding: 2px 8px !important;
}
.dr-stat-cost {
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px !important;
  display: inline-block;
}
.dr-stat-btn {
  font-weight: 900 !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
}

.dr-line { padding: 7px 0 !important; }
.dr-line-lbl { font-size: 12.5px !important; color: #e8d8a0 !important; }
.dr-line-val { font-size: 14px !important; }

.dr-hp-setting {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, rgba(60,42,20,0.7), rgba(20,14,8,0.9)) !important;
  border-width: 1.5px !important;
}

/* ── INVENTORY : ring images bigger + better positioning ── */
.dr-pd-mannequin { min-height: 280px; }
.dr-pd-silhouette { width: 150px !important; }

/* Anneau slots: bigger to match other slots */
.dr-anat-anneau1, .dr-anat-anneau2 {
  z-index: 2;
}
.dr-anat-anneau1 .pd-slot,
.dr-anat-anneau2 .pd-slot {
  width: 56px !important;
  height: 56px !important;
}
.dr-anat-anneau1 .pd-slot img,
.dr-anat-anneau2 .pd-slot img {
  max-width: 48px !important;
  max-height: 48px !important;
}

/* All paperdoll slots: ensure images fill nicely */
.dr-anat-slot {
  width: 56px !important;
  height: 56px !important;
}
.dr-anat-slot img {
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain;
}
.dr-pd-col .pd-slot {
  width: 54px !important;
  height: 54px !important;
}
.dr-pd-col .pd-slot img {
  max-width: 46px !important;
  max-height: 46px !important;
}

/* Reposition for cleaner visual */
.dr-anat-chapeau   { top: -8px;  }
.dr-anat-amulette  { top: 28%;   }
.dr-anat-arme      { top: 30%;   right: -10px; }
.dr-anat-anneau1   { top: 55%;   left: -12px; }
.dr-anat-anneau2   { top: 55%;   right: -12px; }
.dr-anat-ceinture  { top: 65%;   }
.dr-anat-bottes    { bottom: -8px; }

/* Pods bar : utiliser format propre du screenshot */
.dr-pd-bottom {
  border-radius: 8px !important;
  padding: 10px 14px !important;
}
.dr-pd-pods {
  flex: 1;
}
.dr-pods-bar {
  height: 16px !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}
.dr-pods-fill {
  background: linear-gradient(180deg, #ff8030, #c83020) !important;
}

/* HDV — afficher annonces mock pour démo (en attendant backend joueur) */
.hdv-empty-premium {
  padding: 40px 30px !important;
}

/* ════════════════════════════════════════════════════════
   v42 — Polish: anneaux uniformes, ranking premium liste, sorts/log
   ════════════════════════════════════════════════════════ */

/* ── ANNEAUX et tous slots paperdoll : MÊME taille ────── */
.dr-anat-slot,
.dr-anat-slot.pd-slot,
.dr-pd-col .pd-slot,
.dr-pd-mannequin .pd-slot {
  width: 60px !important;
  height: 60px !important;
  background: linear-gradient(180deg, #3a2a18 0%, #1a1408 100%);
  border: 1.5px solid #6a4818;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
}
.dr-anat-slot img,
.dr-pd-col .pd-slot img,
.dr-pd-mannequin .pd-slot img {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.dr-anat-slot.empty .pd-empty-icon,
.dr-pd-col .pd-slot.empty .pd-empty-icon {
  font-size: 24px !important;
  color: rgba(184,120,8,0.5) !important;
}
.dr-anat-slot:hover,
.dr-pd-col .pd-slot:hover {
  border-color: #ffd060 !important;
  box-shadow: 0 0 14px rgba(255,200,80,0.4);
}
.dr-anat-slot.filled,
.dr-pd-col .pd-slot.filled {
  border-color: #c89030 !important;
  background: linear-gradient(180deg, #4a3018, #2a1808) !important;
}

/* Mannequin proportions */
.dr-pd-mannequin { min-height: 320px; padding: 10px 0; }
.dr-pd-silhouette { width: 160px !important; }

/* Anneau positions clearer (no overlap with body) */
.dr-anat-anneau1 { top: 50%; left: -20px !important; transform: translateY(-50%) !important; }
.dr-anat-anneau2 { top: 50%; right: -20px !important; transform: translateY(-50%) !important; }
.dr-anat-arme    { top: 25%; right: -20px !important; }
.dr-anat-chapeau   { top: -10px !important; left: 50%; transform: translateX(-50%); }
.dr-anat-amulette  { top: 24%; left: 50%; transform: translateX(-50%); }
.dr-anat-ceinture  { top: 64%; left: 50%; transform: translateX(-50%); }
.dr-anat-bottes    { bottom: -10px !important; left: 50%; transform: translateX(-50%); }

/* Hide pd-label on anatomical slots (cleaner) */
.dr-anat-slot .pd-label,
.dr-pd-col .pd-slot .pd-label {
  display: none !important;
}

/* ── RANKING premium : chaque ligne = card profile ───── */
.ranking-page { padding: 18px 16px !important; }
.ranking-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,80,0.28) 0%, transparent 60%),
    linear-gradient(135deg, #2a1f10 0%, #1a0a04 100%) !important;
  border: 2.5px solid #c89030 !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin-bottom: 14px !important;
  text-align: center;
}
.ranking-table {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.rk-row.rk-head { display: none !important; }
.rk-row {
  display: grid !important;
  grid-template-columns: 56px 60px 1fr auto !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  background: linear-gradient(135deg, rgba(40,28,16,0.85), rgba(20,14,8,0.95)) !important;
  border: 2px solid rgba(184,120,8,0.4) !important;
  border-radius: 12px !important;
  align-items: center;
  position: relative;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.rk-row:nth-child(2) { /* 1er (after head if visible, otherwise first) */
  border-color: #ffd060 !important;
  background: linear-gradient(135deg, rgba(255,200,80,0.18), rgba(40,28,16,0.92)) !important;
  box-shadow: 0 0 22px rgba(255,200,80,0.35);
}
.rk-row:nth-child(2) .rk-rank::before { content: '🥇 '; }
.rk-row:nth-child(3) {
  border-color: #d8d8e0 !important;
  background: linear-gradient(135deg, rgba(200,200,220,0.12), rgba(40,28,16,0.92)) !important;
}
.rk-row:nth-child(3) .rk-rank::before { content: '🥈 '; }
.rk-row:nth-child(4) {
  border-color: #d8902a !important;
  background: linear-gradient(135deg, rgba(216,144,42,0.14), rgba(40,28,16,0.92)) !important;
}
.rk-row:nth-child(4) .rk-rank::before { content: '🥉 '; }

.rk-row:hover {
  transform: translateX(4px);
  border-color: #c89030 !important;
}
.rk-row.me {
  border-color: #ffd060 !important;
  box-shadow: 0 0 20px rgba(255,200,80,0.5) !important;
}

.rk-rank {
  font-size: 20px !important;
  font-weight: 900 !important;
  text-align: center;
  letter-spacing: 0.5px;
  color: #ffd060 !important;
  background: rgba(0,0,0,0.4);
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid rgba(184,120,8,0.4);
}
.rk-pseudo {
  font-size: 14px;
  color: #ffd890;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rk-pseudo b {
  font-size: 16px !important;
  color: #ffe898 !important;
}
.rk-server, .rk-chars { display: none !important; }
.rk-totlvl, .rk-maxlvl, .rk-kills {
  text-align: right !important;
  font-size: 12.5px;
  color: #c8b888;
}
.rk-totlvl {
  background: rgba(255,200,80,0.1);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,200,80,0.3);
  white-space: nowrap;
}
.rk-totlvl b { color: #ffd060 !important; font-size: 17px !important; }
.rk-maxlvl, .rk-kills { display: none !important; }

/* Avatar in ranking (use first char) */
.rk-row::before {
  content: '';
  position: absolute;
  left: -2px; top: -2px; bottom: -2px;
  width: 4px;
  background: linear-gradient(180deg, #ffd060, #c89030);
  opacity: 0.5;
  border-radius: 4px 0 0 4px;
}

/* ── SORTS UI cleaner ─────────────────────────────────── */
.spx-detail {
  padding: 14px 18px !important;
  color: #e8d8a0 !important;
}
.spx-hero {
  display: flex !important;
  gap: 14px !important;
  align-items: center;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  margin-bottom: 14px;
}
.spx-hero-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  padding: 6px;
}
.spx-hero-info { flex: 1; min-width: 0; }
.spx-hero-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #ffd890 !important;
  text-shadow: 0 0 10px currentColor;
  margin-bottom: 4px;
}
.spx-hero-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 12.5px;
}
.spx-stars-row { font-size: 16px !important; }
.spx-lv-badge {
  background: rgba(0,0,0,0.4);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(184,120,8,0.4);
  color: #ffd060;
  font-weight: 800;
  font-size: 11.5px;
}

.spx-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.spx-tag {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.spx-desc {
  margin-bottom: 14px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* Spell levels comparison table */
.spx-lvl-table {
  background: linear-gradient(180deg, #2a1f10, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.spx-lvl-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px 80px 90px;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px dashed rgba(184,120,8,0.25);
  align-items: center;
  color: #c8b888 !important;
  font-size: 12px !important;
}
.spx-lvl-row.current {
  background: rgba(255,200,80,0.12);
  color: #ffd890 !important;
  font-weight: 700;
}
.spx-lvl-row.locked { opacity: 0.4; }
.spx-lvl-stars { color: #ffd060; font-size: 14px; }
.spx-stars-empty { color: #4a3a1a; }
.spx-dmg-real { color: inherit; font-weight: 800; }
.spx-dmg-base { font-size: 10px; color: #8a7858; }
.spx-tag-cur {
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Live damage card */
.spx-live {
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.spx-live-title {
  font-size: 11px; font-weight: 800;
  color: #c8a060;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.spx-live-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.spx-live-stat {
  text-align: center;
  background: rgba(0,0,0,0.3);
  padding: 8px;
  border-radius: 6px;
}
.spx-live-val {
  font-size: 18px; font-weight: 900;
  color: #ffd890;
}
.spx-live-lbl {
  font-size: 9.5px;
  color: #8a7858;
  letter-spacing: 0.5px;
  margin-top: 2px;
  text-transform: uppercase;
}

/* ── COMBAT-LOG : ensure CSS applied ─────────────────── */
.combat-entry, .combat-entry * { color: #e8d8a0; }
.combat-entry .entry-zone { color: #ffd890 !important; }
.combat-entry .entry-time { color: #a89878 !important; }
.combat-entry .entry-xp { color: #ffaa50 !important; }

/* ════════════════════════════════════════════════════════
   v64 — HDV live, classement clean, anneaux uniformes,
         polish stats / sorts / combats / inventaire
   ════════════════════════════════════════════════════════ */

/* ── ANNEAUX : forcer même taille que les autres slots ─ */
/* Override des règles v40 anciennes (specificité 0,2,0/0,2,1) */
.dr-pd-mannequin .dr-anat-anneau1 .pd-slot,
.dr-pd-mannequin .dr-anat-anneau2 .pd-slot,
.dr-anat-anneau1.dr-anat .pd-slot,
.dr-anat-anneau2.dr-anat .pd-slot {
  width: 60px !important;
  height: 60px !important;
}
.dr-pd-mannequin .dr-anat-anneau1 .pd-slot img,
.dr-pd-mannequin .dr-anat-anneau2 .pd-slot img,
.dr-anat-anneau1.dr-anat .pd-slot img,
.dr-anat-anneau2.dr-anat .pd-slot img {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
}

/* ── CLASSEMENT : layout net, plus de doublons médailles ─ */
.ranking-page {
  background: linear-gradient(180deg, rgba(28,18,8,0.4), rgba(14,8,4,0.6));
}
.ranking-table { padding: 4px !important; gap: 6px !important; }
.rk-row {
  display: grid !important;
  grid-template-columns: 56px minmax(160px, 1fr) 90px 110px 90px !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  align-items: center !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(46,32,18,0.78), rgba(20,14,8,0.94)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  transition: all 0.15s ease;
}
.rk-row:hover {
  border-color: #ffd060 !important;
  box-shadow: 0 0 14px rgba(255,200,80,0.25);
  transform: translateX(3px);
}
.rk-row.rk-head {
  display: grid !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)) !important;
  border-color: rgba(184,120,8,0.55) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: #c8a060 !important;
  padding: 9px 18px !important;
}
.rk-row.me {
  border-color: #ffd060 !important;
  background: linear-gradient(135deg, rgba(255,200,80,0.22), rgba(46,32,18,0.92)) !important;
  box-shadow: 0 0 18px rgba(255,200,80,0.45) !important;
}
.rk-rank {
  font-size: 17px !important;
  font-weight: 900;
  text-align: center !important;
  background: linear-gradient(135deg, #ffe080, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-variant-numeric: tabular-nums;
}
.rk-row.rk-head .rk-rank {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #c8a060 !important;
}
.rk-pseudo {
  display: flex !important; align-items: center; gap: 8px;
  font-weight: 700; color: #ffd890 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.rk-pseudo b { color: #ffd060 !important; }
.rk-me-tag {
  background: linear-gradient(135deg, #ffd060, #c89030);
  color: #1a0a04 !important;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.rk-server, .rk-chars { display: none !important; }
.rk-maxlvl, .rk-totlvl, .rk-kills {
  text-align: center !important;
  font-weight: 800;
  font-size: 13px;
  color: #ffd890 !important;
}
.rk-maxlvl b, .rk-totlvl b {
  color: #ffd060 !important;
  font-size: 16px !important;
  font-weight: 900;
}
/* KILL le doublon médailles ::before (le JS écrit déjà 🥇🥈🥉) */
.rk-row .rk-rank::before { content: '' !important; }

@media (max-width: 720px) {
  .rk-row {
    grid-template-columns: 40px 1fr 60px 70px !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .rk-kills { display: none !important; }
}

/* ── CARACTÉRISTIQUES (stats) : finition premium ──────── */
.dr-stats-page {
  background: linear-gradient(180deg, rgba(28,18,8,0.45), rgba(14,8,4,0.6));
  padding: 18px !important;
  border-radius: 14px;
}
.dr-stat-row {
  background: linear-gradient(135deg, rgba(60,42,20,0.7), rgba(20,14,8,0.92)) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.dr-stat-row:hover {
  border-color: #ffd060 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.dr-stat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ffe080, #c89030);
  opacity: 0.85;
}
.dr-stat-ic {
  width: 34px !important; height: 34px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.dr-stat-name {
  font-size: 14px !important;
  letter-spacing: 1.8px !important;
  color: #ffd890 !important;
  text-transform: uppercase;
  font-weight: 800;
}
.dr-stat-total {
  font-size: 24px !important;
  text-shadow: 0 0 14px rgba(255,200,80,0.55);
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
.dr-stat-cost {
  font-size: 11px !important;
  color: #c8a060 !important;
  background: rgba(0,0,0,0.45) !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(184,120,8,0.3);
}
.dr-stat-btn {
  font-size: 12.5px !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #4a3018, #2a1808) !important;
  border: 1.5px solid #6a4818 !important;
  color: #ffd890 !important;
  transition: all 0.12s;
}
.dr-stat-btn:hover:not(:disabled) {
  border-color: #ffd060 !important;
  background: linear-gradient(180deg, #6a4828, #3a2010) !important;
  box-shadow: 0 0 10px rgba(255,200,80,0.35);
}
.dr-stat-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── SORTS : grimoire premium ─────────────────────────── */
.grim-spell {
  border-radius: 12px !important;
  padding: 8px 6px !important;
  background: linear-gradient(135deg, rgba(46,32,18,0.78), rgba(20,14,8,0.94)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  transition: all 0.15s;
}
.grim-spell:hover {
  border-color: #ffd060 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 12px rgba(255,200,80,0.25);
}
.grim-spell-frame {
  background: radial-gradient(circle, rgba(255,200,80,0.2) 0%, transparent 70%) !important;
  border-radius: 8px;
  padding: 4px;
}
.grim-spell-frame img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.grim-spell-name {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #ffd890 !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
  margin-top: 4px;
}
.grim-spell-tags, .spx-tag {
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 4px;
  color: #ffd890;
}

/* ── COMBATS / log : carte premium ────────────────────── */
.combat-entry {
  background: linear-gradient(135deg, rgba(46,32,18,0.78), rgba(20,14,8,0.94)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.combat-entry::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #ffaa50, #c86020);
  opacity: 0.8;
}
.combat-entry:hover {
  border-color: #ffd060 !important;
  transform: translateX(3px);
  box-shadow: 0 0 14px rgba(255,200,80,0.2);
}
.combat-entry .entry-zone {
  font-weight: 800;
  letter-spacing: 0.5px;
}
.combat-entry .entry-xp {
  background: rgba(255,170,80,0.15);
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 800;
}
.spx-live {
  background: linear-gradient(135deg, rgba(60,42,20,0.7), rgba(20,14,8,0.92)) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.spx-live-stat {
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)) !important;
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 8px !important;
  padding: 10px 6px !important;
}
.spx-live-val {
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 900 !important;
}

/* ── INVENTAIRE : paperdoll plus harmonieux ───────────── */
.dr-inv-page {
  background: linear-gradient(180deg, rgba(28,18,8,0.5), rgba(14,8,4,0.65));
  padding: 16px !important;
  border-radius: 14px;
}
.dr-inv-titlebar {
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85)) !important;
  border: 1.5px solid rgba(184,120,8,0.45) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  margin-bottom: 14px !important;
}
.dr-inv-title { font-size: 16px !important; letter-spacing: 1px; }
.dr-pd-panel {
  background: linear-gradient(160deg, rgba(40,28,16,0.85), rgba(20,14,8,0.96)) !important;
  border: 2px solid rgba(184,120,8,0.5) !important;
  border-radius: 14px !important;
  padding: 18px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.08), 0 6px 18px rgba(0,0,0,0.55);
}
.dr-pd-stage {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  position: relative;
}
.dr-pd-mannequin {
  flex: 1;
  position: relative;
  min-height: 340px !important;
  display: flex; justify-content: center; align-items: center;
  background: radial-gradient(ellipse at center, rgba(255,200,80,0.08), transparent 70%);
  border-radius: 12px;
}
.dr-pd-silhouette {
  width: 170px !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
}
.dr-pd-anatomy { position: absolute; inset: 0; pointer-events: none; }
.dr-pd-anatomy > .dr-anat { pointer-events: auto; position: absolute; }

/* tous les slots paperdoll : finition uniforme */
.pd-slot, .dr-anat-slot, .dr-pd-col .pd-slot {
  background: linear-gradient(180deg, #3a2a18 0%, #1a1408 100%) !important;
  border: 1.5px solid #6a4818 !important;
  border-radius: 8px !important;
  position: relative;
  transition: all 0.15s;
}
.pd-slot.filled, .dr-anat-slot.filled, .dr-pd-col .pd-slot.filled {
  border-color: #c89030 !important;
  background: linear-gradient(180deg, #4a3018, #2a1808) !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.15);
}
.pd-slot:hover, .dr-anat-slot:hover, .dr-pd-col .pd-slot:hover {
  border-color: #ffd060 !important;
  box-shadow: 0 0 14px rgba(255,200,80,0.45) !important;
  transform: scale(1.05);
  z-index: 10;
}
.pd-empty-icon {
  font-size: 26px !important;
  color: rgba(184,120,8,0.45) !important;
  font-weight: 300;
}
.pd-label {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  color: #a89878;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.dr-pd-col {
  display: flex; flex-direction: column;
  gap: 10px !important;
  padding-top: 6px;
}
.dr-pd-bottom {
  margin-top: 16px !important;
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85)) !important;
  border: 1.5px solid rgba(184,120,8,0.45) !important;
  border-radius: 10px !important;
}
.dr-pd-kamas {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 8px;
}
.dr-kamas-val {
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 900;
  font-size: 15px;
}

/* ════════════════════════════════════════════════════════
   v65 — Vendre source étendue, anneaux catalog uniformes,
         noms d'items visibles, refonte sorts/stats/combats,
         layout inventaire pro, CSS guilde
   ════════════════════════════════════════════════════════ */

/* ── INVENTAIRE catalog : taille image FORCÉE + nom visible ─ */
.dr-cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(20,14,8,0.92), rgba(8,4,2,0.96)) !important;
  border-radius: 10px !important;
}
.dr-cat-slot {
  aspect-ratio: auto !important;
  height: 104px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 4px 4px 0 4px !important;
  background: linear-gradient(180deg, #2a1f10 0%, #15100a 100%) !important;
  border: 1.5px solid rgba(184,120,8,0.45) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.dr-cat-slot.empty {
  background: rgba(40,28,16,0.35) !important;
  border-style: dashed !important;
  border-color: rgba(184,120,8,0.18) !important;
  height: 104px !important;
}
.dr-cat-slot.filled:hover {
  transform: translateY(-3px) !important;
  border-color: #ffd060 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 14px rgba(255,200,80,0.5) !important;
  z-index: 5;
}
.dr-cat-img {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(255,200,80,0.12), transparent 70%);
  border-radius: 6px;
  min-height: 0;
  overflow: hidden;
}
.dr-cat-slot .dr-cat-img img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  display: block;
}
.dr-cat-name {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  color: #ffd890;
  text-align: center;
  margin-top: 3px;
  padding: 2px 1px;
  line-height: 1.15;
  background: rgba(0,0,0,0.55);
  border-radius: 4px;
  border-top: 1px solid rgba(184,120,8,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

/* ── INVENTAIRE BODY : layout deux colonnes propres ─────── */
.dr-inv-body {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.5fr) !important;
  gap: 18px !important;
  align-items: stretch;
}
@media (max-width: 980px) {
  .dr-inv-body { grid-template-columns: 1fr !important; }
}

/* ── PAPERDOLL plus aéré ───────────────────────────────── */
.dr-pd-mannequin {
  min-height: 360px !important;
  padding: 18px 10px !important;
}
.dr-pd-silhouette { width: 180px !important; }

/* Rééquilibrer positions slots anatomiques (plus d'espace) */
.dr-anat-chapeau   { top: -14px !important;  left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-amulette  { top: 22% !important;    left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-arme      { top: 28% !important;    right: -28px !important; transform: none !important; }
.dr-anat-anneau1   { top: 50% !important;    left: -28px !important; transform: translateY(-50%) !important; }
.dr-anat-anneau2   { top: 50% !important;    right: -28px !important; transform: translateY(-50%) !important; }
.dr-anat-ceinture  { top: 65% !important;    left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-bottes    { bottom: -14px !important; left: 50% !important; transform: translateX(-50%) !important; }

/* ── Override final dr-cat-slot img (catch-all) ─────────── */
.dr-cat-slot img:not(.dr-cat-img img) {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
}

/* ── STATS : layout vraiment refait ─────────────────────── */
.dr-stats-page { display: flex; flex-direction: column; gap: 16px; }
.dr-hero {
  display: grid !important;
  grid-template-columns: 110px 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px 22px !important;
  background: linear-gradient(135deg, rgba(60,42,20,0.92), rgba(20,14,8,0.96)) !important;
  border: 2px solid rgba(184,120,8,0.55) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.12), 0 6px 16px rgba(0,0,0,0.6);
}
.dr-hero-portrait {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid;
  background: radial-gradient(circle, rgba(255,200,80,0.25), rgba(20,14,8,0.85));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(255,200,80,0.3), inset 0 0 12px rgba(0,0,0,0.6);
}
.dr-hero-portrait img { width: 90%; height: 90%; object-fit: contain; }
.dr-hero-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px;
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.dr-hero-class { font-size: 12px; color: #c8a060; letter-spacing: 1px; margin-bottom: 8px; }
.dr-hero-bars { display: flex; flex-direction: column; gap: 6px; }
.dr-hero-bar {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 10px;
  align-items: center; font-size: 11.5px;
}
.dr-hero-bar > span { color: #c8a060; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.dr-hero-bar > span img { width: 14px; height: 14px; }
.dr-hero-bar b { color: #ffd890; font-size: 12px; font-variant-numeric: tabular-nums; }
.dr-bar-track {
  height: 14px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 7px;
  overflow: hidden;
}
.dr-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.dr-hero-pts {
  text-align: center;
  background: linear-gradient(135deg, #ffd060, #c89030);
  padding: 12px 18px;
  border-radius: 10px;
  color: #1a0a04;
  min-width: 90px;
  box-shadow: 0 0 18px rgba(255,200,80,0.45);
}
.dr-hero-pts-num { font-size: 28px; font-weight: 900; line-height: 1; }
.dr-hero-pts-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

.dr-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 14px !important;
}
.dr-col {
  background: linear-gradient(180deg, rgba(28,18,8,0.6), rgba(14,8,4,0.78));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 12px;
  padding: 14px;
}
.dr-col-title {
  font-size: 12px;
  font-weight: 900;
  color: #ffd060;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
}
.dr-stat-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.dr-stat-head .dr-stat-name { flex: 1; }
.dr-stat-eq {
  font-size: 10px;
  color: #c8a060;
  font-weight: 700;
}
.dr-stat-btns { display: flex; gap: 5px; margin-top: 8px; }

/* ── SORTS : refonte vraie ─────────────────────────────── */
.grim-spell {
  background: linear-gradient(160deg, #3a2a18, #15100a) !important;
  border: 2px solid rgba(184,120,8,0.5) !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  position: relative;
  overflow: hidden;
}
.grim-spell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(255,200,80,0.18), transparent 60%);
  pointer-events: none;
}
.grim-spell:hover {
  border-color: #ffd060 !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), 0 0 16px rgba(255,200,80,0.45);
  z-index: 4;
}
.grim-spell-frame {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
  background: radial-gradient(circle, rgba(255,200,80,0.35) 0%, rgba(40,28,16,0.85) 70%) !important;
  border: 2px solid #6a4818 !important;
  border-radius: 12px !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 10px rgba(255,200,80,0.2);
}
.grim-spell-frame img {
  width: 48px !important;
  height: 48px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.grim-spell-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ffd890 !important;
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
}
.grim-spell-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 5px;
}
.spx-tag {
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)) !important;
  border: 1px solid rgba(184,120,8,0.45) !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
  font-size: 9.5px !important;
  font-weight: 700;
  color: #ffd890 !important;
}

/* ── COMBATS : carte plus claire avec sections distinctes ─ */
.combat-entry {
  padding: 14px 16px !important;
}
.entry-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1.5px solid rgba(184,120,8,0.3);
}
.entry-result { font-size: 18px; }
.entry-zone { font-weight: 900 !important; font-size: 13px; }
.entry-time { margin-left: auto; font-size: 10.5px; }

.entry-participants, .entry-monsters {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px 0 !important;
  margin-bottom: 4px !important;
}
.ep-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #c8a060 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: 4px;
}
.ep-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(180deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 14px !important;
  padding: 3px 9px 3px 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.ep-pill img {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.4);
  padding: 1px;
}
.em-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, rgba(80,30,30,0.7), rgba(30,12,8,0.9));
  border: 1.5px solid rgba(200,80,40,0.5);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd0a0;
}
.entry-loot {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  background: rgba(40,80,30,0.18) !important;
  border: 1.5px solid rgba(80,200,80,0.3) !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
}
.entry-loot::before {
  content: '🎁 LOOT';
  font-size: 10px;
  font-weight: 900;
  color: #80d860;
  letter-spacing: 1.5px;
  margin-right: 4px;
}
.loot-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(184,120,8,0.4) !important;
  border-radius: 5px !important;
  padding: 3px 7px 3px 3px !important;
  font-size: 10.5px !important;
  color: #ffd890 !important;
}
.loot-mini.loot-equip {
  border-color: #ffd060 !important;
  background: rgba(255,200,80,0.15) !important;
}
.loot-mini-img {
  width: 22px !important; height: 22px !important;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.entry-hp {
  font-size: 12px;
  color: #e8d8a0;
  background: rgba(0,0,0,0.3);
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
}
.log-stats-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  margin-bottom: 12px;
}
.log-stat {
  background: rgba(0,0,0,0.45);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #ffd890;
  font-weight: 800;
  border: 1px solid rgba(184,120,8,0.35);
}
.log-stat span { color: #c8a060; font-weight: 700; }

/* ── GUILDE : CSS propre ───────────────────────────────── */
.guild-page {
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, rgba(28,18,8,0.5), rgba(14,8,4,0.65));
}
.guild-header {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(60,42,20,0.92), rgba(20,14,8,0.96));
  border: 2px solid rgba(184,120,8,0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.12), 0 6px 16px rgba(0,0,0,0.6);
}
.guild-emblem {
  font-size: 50px;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  background: radial-gradient(circle, rgba(255,200,80,0.25), transparent 70%);
  border-radius: 50%;
  padding: 5px;
}
.guild-titles { min-width: 0; }
.guild-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.guild-sub {
  font-size: 12px;
  color: #c8a060;
  line-height: 1.4;
}
.guild-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  color: #ffd890;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.guild-status-dot {
  width: 8px; height: 8px;
  background: #ffaa30;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffaa30;
  animation: gpulse 1.6s ease-in-out infinite;
}
@keyframes gpulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.guild-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.guild-feat {
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.guild-feat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ffd060, #c89030);
  opacity: 0.85;
}
.guild-feat:hover {
  transform: translateY(-3px);
  border-color: #ffd060;
  box-shadow: 0 8px 20px rgba(0,0,0,0.55), 0 0 14px rgba(255,200,80,0.3);
}
.gf-ico {
  font-size: 28px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.gf-name {
  font-size: 15px;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.gf-desc {
  font-size: 11.5px;
  color: #c8b890;
  line-height: 1.4;
  margin-bottom: 10px;
}
.gf-cost {
  font-size: 10.5px;
  color: #ffaa50;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 5px;
  padding: 5px 8px;
  display: inline-block;
}
.gf-cost b { color: #ffd060; font-weight: 900; }

.guild-roadmap {
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 16px 22px;
}
.guild-roadmap h3 {
  font-size: 14px;
  color: #ffd060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
}
.guild-roadmap ol {
  margin: 0;
  padding-left: 20px;
  color: #c8b890;
  font-size: 12px;
  line-height: 1.8;
}
.guild-roadmap ol li b { color: #ffd890; font-weight: 800; }

/* ════════════════════════════════════════════════════════
   v67 — Inv slots -25% + qty TR + poids click,
         paperdoll non-superposés, stats redesign,
         loot dropper, guilde +, vendre = ressources
   ════════════════════════════════════════════════════════ */

/* ── INVENTAIRE : cases plus petites (~25%) ─────────────── */
.dr-cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
  gap: 6px !important;
  padding: 10px !important;
}
.dr-cat-slot, .dr-cat-slot.empty {
  height: 80px !important;
  padding: 3px 3px 0 3px !important;
}
.dr-cat-slot .dr-cat-img img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}
.dr-cat-name {
  font-size: 8.5px !important;
  padding: 1px 1px !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
}
/* Qté en haut à droite (pas en bas pour ne pas masquer le nom) */
.dr-cat-qty {
  top: 2px !important;
  right: 2px !important;
  bottom: auto !important;
  background: rgba(0,0,0,0.92) !important;
  color: #ffd060 !important;
  font-size: 9px !important;
  padding: 1px 4px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(184,120,8,0.7) !important;
  z-index: 3;
  pointer-events: none;
}
.dr-cat-equip {
  top: 2px !important;
  left: 2px !important;
  font-size: 8px !important;
  padding: 1px 3px !important;
}

/* ── PAPERDOLL : élargir mannequin, slots ne se superposent plus ─ */
.dr-pd-stage {
  display: grid !important;
  grid-template-columns: 78px 1fr 78px !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.dr-pd-mannequin {
  min-height: 380px !important;
  padding: 24px 38px !important;
}
.dr-pd-silhouette { width: 170px !important; }

/* Slots paperdoll : taille uniforme + positionnement aéré */
.dr-anat-slot,
.dr-pd-mannequin .pd-slot {
  width: 56px !important;
  height: 56px !important;
}
.dr-anat-slot img,
.dr-pd-mannequin .pd-slot img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
}
/* Positions : étirer pour éviter les chevauchements */
.dr-anat-chapeau   { top: -6px !important;  left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-amulette  { top: 18% !important;   left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-arme      { top: 30% !important;   right: -38px !important; left: auto !important; transform: none !important; }
.dr-anat-anneau1   { top: 48% !important;   left: -38px !important; transform: translateY(-50%) !important; }
.dr-anat-anneau2   { top: 48% !important;   right: -38px !important; left: auto !important; transform: translateY(-50%) !important; }
.dr-anat-ceinture  { top: 62% !important;   left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-bottes    { bottom: -6px !important; left: 50% !important; transform: translateX(-50%) !important; }

/* ── ITEM DETAIL : poids + meta en pills ─────────────── */
.item-detail-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}
.idm-pill {
  background: linear-gradient(180deg, rgba(60,42,20,0.7), rgba(20,14,8,0.92));
  border: 1px solid rgba(184,120,8,0.5);
  border-radius: 14px;
  padding: 4px 11px;
  font-size: 11px;
  color: #c8b890;
  font-weight: 700;
}
.idm-pill b { color: #ffd890; font-weight: 900; }
.idm-pill.idm-gold { border-color: rgba(255,200,80,0.6); }
.idm-pill.idm-gold b { color: #ffd060; }
.idm-pill.idm-purple { border-color: rgba(160,80,200,0.55); }
.idm-pill.idm-purple b { color: #d090f0; }

/* ── COMBAT LOG : pastille "qui drop" + pas de doublons ─── */
.loot-mini {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
}
.loot-mini-name { white-space: nowrap; }
.loot-mini-name b { color: #ffd060; font-weight: 900; }
.loot-mini-by {
  font-size: 9.5px !important;
  color: #c8a060 !important;
  background: rgba(0,0,0,0.45);
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid rgba(184,120,8,0.35);
  margin-left: 2px;
  font-weight: 700;
}

/* ── STATS : refonte UX progression + fix icônes overlap ── */
.dr-line {
  display: grid !important;
  grid-template-columns: 28px 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 4px !important;
  border-bottom: 1px solid rgba(184,120,8,0.18);
  min-height: 36px;
}
.dr-line:last-child { border-bottom: none; }
.dr-line .dr-stat-ic, .dr-line img {
  width: 22px !important;
  height: 22px !important;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(0,0,0,0.35);
  border-radius: 5px;
  padding: 2px;
  border: 1px solid rgba(184,120,8,0.3);
}
.dr-line-lbl {
  font-size: 12.5px !important;
  color: #e8d8a0 !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dr-line-val {
  font-size: 13px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 45px;
}
.dr-line-val.pos { color: #80f898 !important; }
.dr-line-val.neg { color: #ff8060 !important; }

/* Caractéristique principale : layout en card propre */
.dr-stat-row {
  display: grid !important;
  grid-template-columns: 38px 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "icon head head"
    "icon cost btns" !important;
  gap: 4px 12px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(60,42,20,0.78), rgba(20,14,8,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.dr-stat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #ffd060, #c89030);
  opacity: 0.85;
}
.dr-stat-row:hover {
  border-color: #ffd060 !important;
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.dr-stat-row .dr-stat-ic {
  grid-area: icon;
  width: 32px !important;
  height: 32px !important;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  padding: 3px;
  border: 1px solid rgba(184,120,8,0.4);
}
.dr-stat-head {
  grid-area: head;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}
.dr-stat-head .dr-stat-ic { display: none !important; } /* dédoublonne */
.dr-stat-name {
  flex: 1;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffd890 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}
.dr-stat-total {
  font-size: 22px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}
.dr-stat-eq {
  font-size: 10.5px !important;
  color: #c8a060 !important;
  font-weight: 700;
}
.dr-stat-cost {
  grid-area: cost;
  font-size: 10.5px !important;
  color: #c8a060 !important;
  background: rgba(0,0,0,0.45) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  display: inline-block;
  width: fit-content;
  margin: 0 !important;
  border: 1px solid rgba(184,120,8,0.3);
}
.dr-stat-btns {
  grid-area: btns;
  display: flex !important;
  gap: 4px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}
.dr-stat-btn {
  font-size: 12px !important;
  padding: 6px 11px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #4a3018, #2a1808) !important;
  border: 1.5px solid #6a4818 !important;
  color: #ffd890 !important;
  cursor: pointer;
  transition: all 0.12s;
  min-width: 36px;
}
.dr-stat-btn.big { background: linear-gradient(180deg, #6a3818, #3a1808) !important; border-color: #8a4818 !important; }
.dr-stat-btn:hover:not(:disabled) {
  border-color: #ffd060 !important;
  background: linear-gradient(180deg, #6a4828, #3a2010) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255,200,80,0.4);
}
.dr-stat-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Hero block plus contrasté */
.dr-hero {
  background: linear-gradient(135deg, rgba(70,48,22,0.95), rgba(24,16,8,0.97)) !important;
}

/* ── GUILDE : amélioration finale ──────────────────────── */
.guild-page {
  padding: 22px !important;
  max-width: 1200px;
  margin: 0 auto;
}
.guild-header {
  padding: 22px 28px !important;
}
.guild-emblem { font-size: 60px !important; }
.guild-title {
  font-size: 26px !important;
  letter-spacing: 2px !important;
}

/* Stats overview (faux chiffres pour montrer le potentiel) */
.guild-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.guild-stat-card {
  background: linear-gradient(160deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  transition: all 0.15s;
}
.guild-stat-card:hover {
  border-color: #ffd060;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.gsc-num {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.gsc-lbl {
  font-size: 10px;
  color: #c8a060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 800;
}
.gsc-sub { font-size: 10px; color: #8a7858; margin-top: 3px; }

.guild-feat .gf-locked {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(184,120,8,0.85);
  color: #1a1408;
  font-size: 9px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 1px;
}
.guild-cta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 14px;
}
/* v126 — Sélecteur perso pour gestion multi-guildes */
.guild-char-selector {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #1a1208 0%, #2a1808 100%);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.gcs-label {
  font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
  color: #ffd060; text-transform: uppercase; flex-shrink: 0;
}
.gcs-tabs {
  display: flex; gap: 8px; flex: 1; overflow-x: auto;
  padding-bottom: 2px;
}
.gcs-tab {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #4a3a1a;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 180px;
  transition: all 0.15s;
}
.gcs-tab:hover { background: rgba(255,208,96,0.1); transform: translateY(-2px); }
.gcs-tab.sel {
  background: linear-gradient(135deg, rgba(184,120,8,0.4), rgba(60,40,16,0.6));
  box-shadow: 0 0 14px rgba(255,208,96,0.4);
}
.gcs-tab.in-guild { border-left-width: 4px; border-left-color: #c060ff; }
.gcs-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.gcs-info { display: flex; flex-direction: column; min-width: 0; }
.gcs-name { font-size: 13px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcs-status { font-size: 10.5px; color: #d8c898; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v126 — Création de guilde : grille emblèmes + chars picker */
.gc-emblem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  background: rgba(0,0,0,0.4);
  padding: 8px;
  border: 1px solid #4a3a1a;
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
}
.gc-emblem-btn {
  width: 40px; height: 40px;
  font-size: 22px;
  background: rgba(20,14,8,0.8);
  border: 2px solid #4a3a1a;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.gc-emblem-btn:hover { background: rgba(255,208,96,0.2); border-color: #ffd060; transform: scale(1.1); }
.gc-emblem-btn.sel {
  background: linear-gradient(135deg, #ffd060, #c89030);
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255,208,96,0.6);
}
.gc-chars-list {
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3a1a;
  border-radius: 8px;
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.gc-char-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(74,58,26,0.4);
  cursor: pointer;
  transition: background 0.12s;
}
.gc-char-row:hover { background: rgba(255,208,96,0.1); }
.gc-char-row input[disabled] { cursor: not-allowed; }
.gc-char-chk { width: 16px; height: 16px; cursor: pointer; }
.gc-char-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.4); }
.gc-char-name { flex: 1; font-weight: 800; font-size: 13px; }
.gc-char-lv { font-size: 11px; color: #d8c898; font-weight: 700; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; }
.gc-char-tag { font-size: 10px; color: #c87060; font-weight: 700; }

.guild-cta-btn {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd890;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 1px;
  opacity: 1;
  transition: transform .12s, box-shadow .15s;
}
.guild-cta-btn[disabled] { cursor: not-allowed; opacity: 0.45; filter: grayscale(0.6); }
.guild-cta-btn.primary {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255,208,96,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.guild-cta-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,208,96,0.5); }

/* Mockup membres / arborescence */
.guild-mockup {
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 18px 22px;
}
.guild-mockup-title {
  font-size: 13px;
  color: #ffd060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
  font-weight: 900;
}
.guild-rank-row {
  display: grid;
  grid-template-columns: 30px 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(184,120,8,0.18);
}
.guild-rank-row:last-child { border-bottom: none; }
.guild-rank-row .grr-icon { font-size: 18px; text-align: center; }
.guild-rank-row .grr-rank { color: #ffd060; font-weight: 900; letter-spacing: 0.5px; }
.guild-rank-row .grr-perms { color: #c8b890; font-size: 11px; }
.guild-rank-row .grr-count {
  background: rgba(0,0,0,0.4);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(184,120,8,0.35);
  color: #c8a060;
  font-size: 10.5px;
  font-weight: 800;
}

/* HDV : grille vendre = même style que buy */
.hdv-grid-sell {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}
.hdv-sell-card {
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.45) !important;
  border-radius: 10px !important;
}
.hdv-pricetag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}
.hdv-pricetag.npc { background: rgba(80,140,80,0.25); color: #80d860; border: 1px solid rgba(80,200,80,0.4); }
.hdv-pricetag.hdv { background: rgba(255,200,80,0.2); color: #ffd060; border: 1px solid rgba(255,200,80,0.5); }

/* ════════════════════════════════════════════════════════
   v68 — Inv name removed, stat badges, paperdoll spaced,
         combat-log refonte, classement premium, guilde tabs,
         bank slots system
   ════════════════════════════════════════════════════════ */

/* ── INV : retire complètement le nom des cases ────────── */
.dr-cat-name, .dr-cat-img { display: none !important; }
.dr-cat-slot {
  /* Image directement enfant : on remet aspect carré, pas de colonne nom */
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
}
.dr-cat-slot.empty { height: 64px !important; }
.dr-cat-slot > img {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.dr-cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
}

/* ── PAPERDOLL : positions ESPACÉES, plus de superposition ─ */
.dr-pd-stage {
  display: grid !important;
  grid-template-columns: 84px 1fr 84px !important;
  gap: 30px !important;
  position: relative;
  padding: 10px;
}
.dr-pd-mannequin {
  min-height: 420px !important;
  padding: 30px 60px !important;  /* + d'espace latéral pour anneaux */
  position: relative;
}
.dr-pd-silhouette { width: 160px !important; opacity: 0.85; }

/* Slots bien séparés */
.dr-anat-slot, .dr-pd-mannequin .pd-slot {
  width: 54px !important;
  height: 54px !important;
}
.dr-anat-slot img, .dr-pd-mannequin .pd-slot img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
}
.dr-anat-chapeau   { top: -6px !important;   left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-amulette  { top: 84px !important;   left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-arme      { top: 158px !important;  right: -10px !important; left: auto !important; transform: none !important; }
.dr-anat-anneau1   { top: 162px !important;  left: -10px !important; transform: none !important; }
.dr-anat-anneau2   { bottom: 90px !important; top: auto !important; right: -10px !important; left: auto !important; transform: none !important; }
.dr-anat-ceinture  { bottom: 70px !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; }
.dr-anat-bottes    { bottom: -6px !important; left: 50% !important; transform: translateX(-50%) !important; }

/* ── BADGE stat sur item équipé ────────────────────────── */
.pd-slot { position: relative; }
.pd-stat-badge {
  position: absolute !important;
  bottom: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: rgba(0,0,0,0.85) !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffd060 !important;
  padding: 1px !important;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255,200,80,0.5);
}
.pd-unequip {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 16px !important; height: 16px !important;
  background: rgba(200,40,40,0.9) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.pd-slot:hover .pd-unequip { opacity: 1; }
.pd-unequip:hover { transform: scale(1.2); background: #ff4040 !important; }

/* ── COMBAT LOG (cl-*) refonte ──────────────────────────── */
.cl-page {
  padding: 16px !important;
  background: linear-gradient(180deg, rgba(28,18,8,0.5), rgba(14,8,4,0.65));
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.cl-header {
  background: linear-gradient(135deg, rgba(60,42,20,0.92), rgba(20,14,8,0.96));
  border: 2px solid rgba(184,120,8,0.55);
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.1), 0 4px 12px rgba(0,0,0,0.5);
}
.cl-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cl-sub { font-size: 12px; color: #c8a060; margin-top: 4px; letter-spacing: 0.5px; }

.cl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cl-stat-card {
  background: linear-gradient(160deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cl-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
}
.cl-stat-xp::before    { background: linear-gradient(180deg, #ff8030, #c86020); }
.cl-stat-kamas::before { background: linear-gradient(180deg, #ffd060, #c89030); }
.cl-stat-kills::before { background: linear-gradient(180deg, #c8404a, #8a2030); }
.cl-stat-total::before { background: linear-gradient(180deg, #80a8e8, #4068b0); }
.cl-stat-num {
  font-size: 22px;
  font-weight: 900;
  color: #ffd890;
  font-variant-numeric: tabular-nums;
}
.cl-stat-lbl {
  font-size: 10px;
  color: #c8a060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 800;
}

.cl-toploot {
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  padding: 14px 16px;
}
.cl-toploot-title {
  font-size: 12px;
  color: #ffd060;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
}
.cl-toploot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.cl-loot-tile {
  background: linear-gradient(180deg, rgba(40,28,16,0.9), rgba(16,10,6,0.95));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  transition: all 0.15s;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cl-loot-tile:hover {
  border-color: #ffd060;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.cl-loot-tile.equip { border-color: rgba(255,200,80,0.6); background: linear-gradient(180deg, rgba(60,46,20,0.9), rgba(20,14,8,0.95)); }
/* v126.14 — Image SEULE si dispo, qty en badge top-right de la carte (pas wrapper) */
.cl-loot-tile { position: relative !important; }
.cl-loot-tile img {
  width: 44px; height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  margin: 0 auto;
}
.cl-loot-tile-name {
  font-size: 10.5px;
  color: #ffd890;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-weight: 700;
  width: 100%;
  max-width: 100%;
  display: block;
}
/* v126.24 — Top loot tile : qty ABSOLU top-right, image centrée, nom dessous */
.cl-loot-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 22px 8px 10px !important;     /* padding-top 22 pour laisser place au badge */
  position: relative !important;
  min-height: 100px;
}
.cl-loot-tile-img-area {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 55px;
}
.cl-loot-tile-img-area img {
  width: 51px !important; height: 51px !important;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.cl-loot-tile-noimg { font-size: 28px; line-height: 1; }
/* Badge qty TOP-RIGHT absolu de la carte (pas du header) */
.cl-loot-tile > .cl-loot-tile-qty {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important; left: auto !important;
  display: inline-block !important;
  font-size: 11px !important;
  color: #1a1208 !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #ffd060, #c89030) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  border: 1.5px solid #1a1208 !important;
  min-width: 26px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 10 !important;
  pointer-events: none;
}
.cl-loot-tile-name {
  display: block !important;
  width: 100% !important;
  text-align: center;
  font-size: 11px !important;
  color: #ffd890;
  font-weight: 700;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.25;
  padding: 0 !important;
  margin: 0 !important;
}

.cl-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0;
}
.cl-filter {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.12s;
}
.cl-filter:hover { border-color: #ffd060; color: #ffd890; }
.cl-filter.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 10px rgba(255,200,80,0.4);
}

.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-empty { padding: 40px; text-align: center; color: #8a7858; font-size: 13px; }
.cl-row {
  display: grid;
  grid-template-columns: 110px 1fr minmax(220px, 1.2fr);
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.cl-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
}
.cl-row.win::before  { background: linear-gradient(180deg, #80f898, #40c860); }
.cl-row.loss::before { background: linear-gradient(180deg, #ff8060, #c84030); }
.cl-row:hover {
  border-color: #ffd060;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.cl-row-status {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid rgba(184,120,8,0.25);
  padding-right: 12px;
}
.cl-row-icon { font-size: 26px; }
.cl-row-time { font-size: 10px; color: #a89878; letter-spacing: 0.5px; }

.cl-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-row-zone {
  font-size: 14px;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
}
.cl-row-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10.5px; }
.cl-row-meta > span {
  background: rgba(0,0,0,0.4);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(184,120,8,0.3);
  color: #c8b890;
  font-weight: 700;
}
.cl-row-meta .cl-mres { color: #ffd890; }
.cl-row-meta .cl-mlvl {
  background: linear-gradient(135deg, #ffd060, #c89030) !important;
  color: #1a0a04 !important;
  border-color: #c89030 !important;
  font-weight: 900;
}
.cl-row-monsters { display: flex; flex-wrap: wrap; gap: 4px; }
.cl-mon-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, rgba(80,30,30,0.7), rgba(30,12,8,0.9));
  border: 1px solid rgba(200,80,40,0.45);
  color: #ffd0a0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
}
.cl-mon-pill small { color: #c89060; font-size: 9px; }
.cl-mon-pill .cl-mon-img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.cl-mon-pill .cl-mon-name { font-weight: 700; }
.cl-mon-more {
  font-size: 10px;
  color: #c8a060;
  background: rgba(0,0,0,0.4);
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(184,120,8,0.3);
}

.cl-row-rewards {
  display: flex; flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(184,120,8,0.25);
  padding-left: 14px;
  min-width: 0;
}
.cl-rew-line {
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.4);
  padding: 3px 9px;
  border-radius: 5px;
  display: inline-block;
  width: fit-content;
}
.cl-rew-xp { color: #ffaa50; border: 1px solid rgba(255,170,80,0.4); }
.cl-rew-k  { color: #ffd060; border: 1px solid rgba(255,200,80,0.4); }
.cl-rew-loot { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-loot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  color: #c8b890;
  max-width: 100%;
  position: relative;
}
.cl-loot-chip.equip { border-color: #ff4040 !important; background: rgba(255,60,60,0.12); color: #ffb0a0; box-shadow: 0 0 0 1px rgba(255,80,80,0.4) inset; }
.cl-loot-chip.equip .cl-chip-img-wrap { border: 2px solid #ff4040 !important; box-shadow: 0 0 6px rgba(255,80,80,0.6); }
.cl-loot-chip img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
/* v126.17 — Qty À CÔTÉ de l'image (pas dessus) — chip = image + ×N text */
.cl-loot-chip .cl-chip-qty {
  position: static !important;
  background: transparent !important;
  color: #ffd060 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  padding: 0 6px 0 2px !important;
  border: none !important;
  min-width: 0; height: auto; line-height: 1;
  text-shadow: 0 1px 2px #000;
  flex-shrink: 0;
}
.cl-loot-chip { padding: 4px 6px !important; min-width: 0; min-height: 36px; cursor: pointer; gap: 4px !important; }
.cl-loot-chip img { width: 32px !important; height: 32px !important; object-fit: contain; }
.cl-chip-textname {
  font-size: 10px; color: #ffd890; font-weight: 700;
  padding: 0 6px; line-height: 26px;
  white-space: nowrap;
}
.cl-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.cl-chip-qty { color: #ffd060; font-weight: 900; font-size: 10px; }
.cl-chip-by {
  font-size: 9px;
  color: #c89030;
  background: rgba(0,0,0,0.4);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 2px;
}

@media (max-width: 720px) {
  .cl-row { grid-template-columns: 1fr; }
  .cl-row-status, .cl-row-rewards { border: none; padding: 0; }
}

/* ── CLASSEMENT premium v68 ─────────────────────────────── */
.ranking-page { background: linear-gradient(180deg, rgba(28,18,8,0.55), rgba(14,8,4,0.7)); }
.ranking-header {
  background: linear-gradient(135deg, rgba(60,42,20,0.95), rgba(20,14,8,0.97)) !important;
  border: 2px solid rgba(184,120,8,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.1), 0 6px 16px rgba(0,0,0,0.55) !important;
}
.ranking-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  color: #ffe890 !important;
  background: none !important;
  -webkit-text-fill-color: #ffe890 !important;
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,208,96,0.5) !important;
}

/* Top 3 highlight */
.rk-row:nth-child(2) {
  background: linear-gradient(135deg, rgba(255,200,80,0.18), rgba(46,32,18,0.95)) !important;
  border-color: #ffd060 !important;
  box-shadow: 0 0 18px rgba(255,200,80,0.3);
}
.rk-row:nth-child(3) {
  background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(40,30,20,0.95)) !important;
  border-color: #c0c0c0 !important;
}
.rk-row:nth-child(4) {
  background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(40,28,16,0.95)) !important;
  border-color: #cd7f32 !important;
}
.rk-row.me {
  animation: rkMePulse 2s ease-in-out infinite;
}
@keyframes rkMePulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,200,80,0.45); }
  50%     { box-shadow: 0 0 28px rgba(255,200,80,0.7); }
}

/* ── BANK SLOTS BAR ─────────────────────────────────────── */
.bank-slots-bar {
  background: linear-gradient(135deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bsb-info {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 240px;
}
.bsb-icon { font-size: 28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); }
.bsb-text { flex: 1; }
.bsb-main { font-size: 13px; color: #c8b890; margin-bottom: 6px; }
.bsb-main b { color: #ffd060; font-weight: 900; }
.bsb-main small { color: #8a7858; font-size: 10.5px; margin-left: 4px; }
.bsb-track {
  height: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(184,120,8,0.5);
  border-radius: 5px;
  overflow: hidden;
}
.bsb-fill {
  height: 100%;
  background: linear-gradient(90deg, #80c860, #ffd060 60%, #ff8030);
  border-radius: 4px;
  transition: width 0.4s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.bsb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bsb-btn {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd890;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.12s;
}
.bsb-btn:hover:not(:disabled) {
  border-color: #ffd060;
  background: linear-gradient(180deg, #6a4828, #3a2010);
  transform: translateY(-1px);
}
.bsb-btn.primary {
  background: linear-gradient(180deg, #ffd060, #c89030) !important;
  color: #1a0a04 !important;
  border-color: #c89030 !important;
}
.bsb-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── GUILDE refonte v68 ─────────────────────────────────── */
.guild-page { padding: 22px !important; max-width: none !important; width: 100% !important; }
.guild-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(184,120,8,0.6);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
}
.gh-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(255,200,80,0.25), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(184,120,8,0.2), transparent 70%),
    linear-gradient(135deg, rgba(60,42,20,0.95), rgba(20,14,8,0.97));
}
.gh-content {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 26px 30px;
}
.gh-emblem {
  font-size: 70px;
  text-align: center;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.8));
  background: radial-gradient(circle, rgba(255,200,80,0.3), transparent 70%);
  border-radius: 50%;
  padding: 10px;
}
.gh-title-block { min-width: 0; }
.gh-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}
.gh-sub { font-size: 13px; color: #c8b890; line-height: 1.5; margin-bottom: 10px; }
.gh-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gh-tag {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.45);
  color: #ffd890;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}
.gh-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(184,120,8,0.55);
  padding: 8px 14px;
  border-radius: 22px;
  color: #ffd890;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.gh-pulse {
  width: 10px; height: 10px;
  background: #ffaa30;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffaa30;
  animation: gpulse 1.6s ease-in-out infinite;
}

.guild-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 14px;
}
.guild-tab {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.12s;
}
.guild-tab:hover { border-color: #ffd060; color: #ffd890; }
.guild-tab.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.45);
}

.guild-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.guild-perms-table { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.guild-perm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(184,120,8,0.18);
  font-size: 11.5px;
}
.guild-perm-row:last-child { border-bottom: none; }
.gpr-name { color: #c8b890; font-weight: 700; }
.gpr-marks { display: flex; gap: 18px; font-weight: 900; font-size: 13px; }
.gpr-y { color: #80f898; }
.gpr-n { color: #6a4818; }

/* Roadmap timeline */
.grm-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-left: 30px;
}
.grm-timeline::before {
  content: '';
  position: absolute;
  left: 14px; top: 18px; bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, #ffd060, rgba(184,120,8,0.4));
}
.grm-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}
.grm-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 2px solid #6a4818;
  color: #c8a060;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 12px;
  margin-left: -16px;
  position: relative;
  z-index: 2;
}
.grm-step.done .grm-dot {
  background: linear-gradient(180deg, #80f898, #40c860);
  border-color: #40c860;
  color: #0a2010;
}
.grm-step.current .grm-dot {
  background: linear-gradient(180deg, #ffd060, #c89030);
  border-color: #c89030;
  color: #1a0a04;
  box-shadow: 0 0 14px rgba(255,200,80,0.6);
  animation: gpulse 2s ease-in-out infinite;
}
.grm-phase {
  font-size: 14px;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.grm-desc { font-size: 12px; color: #c8b890; line-height: 1.4; }
.grm-desc b { color: #ffd060; }

/* ── DONJON : sélecteur d'enchaînement de runs ───────── */
.fs-chain {
  display: flex;
  gap: 4px;
  align-items: stretch;
  width: 100%;
}
.fs-chain .fs-btn-send { flex: 1; }
.fs-chain-select {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd060;
  font-size: 12px;
  font-weight: 900;
  padding: 0 8px;
  border-radius: 7px;
  cursor: pointer;
  min-width: 56px;
  transition: border-color 0.12s;
}
.fs-chain-select:hover {
  border-color: #ffd060;
  background: linear-gradient(180deg, #6a4828, #3a2010);
}
.fs-chain-select option {
  background: #1a1408;
  color: #ffd890;
}

/* ════════════════════════════════════════════════════════
   v70 — Quêtes journalières/hebdo + Bureau aventuriers
   ════════════════════════════════════════════════════════ */

.quests-page, .bureau-page {
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, rgba(28,18,8,0.5), rgba(14,8,4,0.65));
}
.quests-header, .bureau-header {
  display: flex; align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(60,42,20,0.95), rgba(20,14,8,0.97));
  border: 2px solid rgba(184,120,8,0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.1), 0 4px 12px rgba(0,0,0,0.5);
}
.qh-title, .bh-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.qh-sub, .bh-sub { font-size: 12px; color: #c8a060; margin-top: 4px; line-height: 1.4; }
.bh-emblem { font-size: 50px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)); }

.quests-section { background: linear-gradient(180deg, rgba(40,28,16,0.5), rgba(14,8,4,0.7)); border:1.5px solid rgba(184,120,8,0.3); border-radius: 12px; padding: 14px; }
.qs-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 900; color: #ffd060;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
}
.qs-reset { font-size: 10.5px; color: #8a7858; letter-spacing: 0.5px; text-transform: none; font-weight: 700; }

.quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.quest-card {
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.quest-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, rgba(184,120,8,0.5), rgba(100,68,8,0.5));
}
.quest-card:hover { border-color: #ffd060; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.quest-card.done::before  { background: linear-gradient(180deg, #ffd060, #c89030); }
.quest-card.done {
  border-color: #ffd060;
  box-shadow: 0 0 14px rgba(255,200,80,0.35);
  animation: questPulse 2s ease-in-out infinite;
}
.quest-card.claimed { opacity: 0.55; }
.quest-card.claimed::before { background: linear-gradient(180deg, #80f898, #40c860); }
@keyframes questPulse {
  0%,100% { box-shadow: 0 0 14px rgba(255,200,80,0.35); }
  50%     { box-shadow: 0 0 22px rgba(255,200,80,0.6); }
}

.quest-head { display: flex; align-items: center; gap: 8px; }
.quest-type-pill {
  font-size: 9.5px; font-weight: 900;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(184,120,8,0.4);
  color: #c8a060;
  white-space: nowrap;
}
.quest-type-pill.kill    { color: #ff8060; border-color: rgba(255,128,96,0.5); }
.quest-type-pill.drop    { color: #80d8ff; border-color: rgba(128,216,255,0.5); }
.quest-type-pill.combats { color: #ffaa50; border-color: rgba(255,170,80,0.5); }
.quest-type-pill.dungeon { color: #d090ff; border-color: rgba(208,144,255,0.5); }
.quest-type-pill.kamas   { color: #ffd060; border-color: rgba(255,200,80,0.5); }
.quest-type-pill.jobxp   { color: #80f898; border-color: rgba(128,248,152,0.5); }

.quest-label { font-size: 12.5px; font-weight: 800; color: #ffd890; flex: 1; }
.quest-progress { display: flex; align-items: center; gap: 8px; }
.qp-bar {
  flex: 1;
  height: 9px;
  background: rgba(0,0,0,0.55);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(184,120,8,0.35);
}
.qp-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89030, #ffd060);
  border-radius: 4px;
  transition: width 0.4s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.qp-text { font-size: 10.5px; color: #c8a060; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }

.quest-rewards { display: flex; gap: 6px; flex-wrap: wrap; }
.qrw {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.3);
}
.qrw.kamas  { color: #ffd060; border-color: rgba(255,200,80,0.45); }
.qrw.xp     { color: #ffaa50; border-color: rgba(255,170,80,0.45); }
.qrw.jetons { color: #80d8ff; border-color: rgba(128,216,255,0.45); }

.quest-action { margin-top: 4px; }
.qa-btn {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd890;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.5px;
}
.qa-btn.primary {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}
.qa-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,200,80,0.6); }
.qa-claimed { font-size: 11px; color: #80f898; font-weight: 800; }
.qa-status { font-size: 11px; color: #8a7858; font-weight: 700; }

/* ── Bureau des Aventuriers ──────────────────────────── */
.bureau-list { display: flex; flex-direction: column; gap: 10px; }
.bur-char {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.bur-char::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, rgba(184,120,8,0.4), rgba(100,68,8,0.4));
}
.bur-char.busy::before { background: linear-gradient(180deg, #80a8e8, #4068b0); }
.bur-char.done::before { background: linear-gradient(180deg, #80f898, #40c860); }
.bur-char.done { border-color: #80f898; animation: questPulse 2s ease-in-out infinite; }
.bur-char.busy { border-color: rgba(128,168,232,0.6); }

.bur-portrait {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2.5px solid;
  background: radial-gradient(circle, rgba(255,200,80,0.2), rgba(20,14,8,0.85));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255,200,80,0.25), inset 0 0 8px rgba(0,0,0,0.6);
}
.bur-portrait img { width: 90%; height: 90%; object-fit: contain; }

.bur-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bur-name { font-size: 15px; font-weight: 900; letter-spacing: 0.5px; }
.bur-name small { font-size: 11px; color: #c8a060; font-weight: 700; margin-left: 6px; }
.bur-mission-name { font-size: 12.5px; color: #ffd890; font-weight: 700; }
.bur-mission-name small { color: #8a7858; font-weight: 700; }

.bur-track {
  height: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 5px;
  overflow: hidden;
}
.bur-fill {
  height: 100%;
  background: linear-gradient(90deg, #80a8e8, #80f898);
  border-radius: 4px;
  transition: width 0.4s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.bur-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bur-rewpill {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,200,80,0.4);
  color: #ffd060;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
}
.bur-time { font-size: 11.5px; color: #c8b890; font-weight: 700; }
.bur-loot-hint { font-size: 10.5px; color: #c8a060; }

.bur-mission-picker, .bur-dur-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.bur-pick, .bur-dur {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.3px;
}
.bur-pick:hover, .bur-dur:hover:not(:disabled) {
  border-color: #ffd060;
  color: #ffd890;
  background: linear-gradient(180deg, #5a3a20, #2a1808);
}
.bur-pick.active, .bur-dur.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
}
.bur-dur.locked { opacity: 0.4; cursor: not-allowed; }

.bur-actions { display: flex; flex-direction: column; gap: 6px; }
.bur-btn {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd890;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-width: 120px;
}
.bur-btn.primary {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}
.bur-btn.alt {
  background: linear-gradient(180deg, #5a3018, #2a1808);
  color: #c87060;
  border-color: #6a3018;
}
.bur-btn:hover:not(:disabled) { transform: translateY(-1px); }
.bur-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 720px) {
  .bur-char { grid-template-columns: 1fr; }
  .bur-actions { flex-direction: row; }
}

/* ════════════════════════════════════════════════════════
   v71 — Archimonstre visual + Larme du Forgeur
   ════════════════════════════════════════════════════════ */

/* Archimonstre : aura colorée animée sur les pills monstres */
.cl-mon-pill[title*="★"], .em-pill[title*="★"],
.cl-mon-pill:has(*:contains("★")) {
  background: linear-gradient(135deg, rgba(180,40,200,0.45), rgba(40,12,60,0.95)) !important;
  border-color: #d040ff !important;
  color: #ffd0ff !important;
  animation: archiPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(208,64,255,0.5), inset 0 0 4px rgba(255,200,255,0.2);
}
@keyframes archiPulse {
  0%,100% { box-shadow: 0 0 10px rgba(208,64,255,0.5); }
  50%     { box-shadow: 0 0 18px rgba(208,64,255,0.85), 0 0 28px rgba(255,128,255,0.4); }
}
/* Fallback : tout texte commençant par ★ devient violet doré */
.cl-mon-pill, .em-pill { transition: all 0.2s; }

/* Larme du Forgeur : style spécial dans l'inventaire (catalogue + cards loot) */
.dr-cat-slot[title^="Larme du Forgeur"], .cl-loot-chip[title^="Larme du Forgeur"] {
  background: linear-gradient(135deg, rgba(80,200,255,0.25), rgba(20,40,60,0.95)) !important;
  border-color: #80d8ff !important;
  box-shadow: 0 0 14px rgba(128,216,255,0.55) !important;
  animation: larmePulse 2s ease-in-out infinite;
}
@keyframes larmePulse {
  0%,100% { box-shadow: 0 0 14px rgba(128,216,255,0.5); }
  50%     { box-shadow: 0 0 22px rgba(128,216,255,0.85), 0 0 30px rgba(180,240,255,0.4); }
}

/* ── ULTIME : carte premium sur la page Stats ──────────── */
.dr-ultimate {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background:
    radial-gradient(ellipse at top right, rgba(208,64,255,0.18), transparent 60%),
    linear-gradient(135deg, rgba(60,28,80,0.92), rgba(20,10,30,0.97));
  border: 2px solid rgba(208,144,255,0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,200,255,0.12), 0 6px 18px rgba(80,30,120,0.45);
  position: relative;
  overflow: hidden;
}
.dr-ultimate::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(208,144,255,0.08), transparent 70%);
  pointer-events: none;
}
.dr-ult-ic {
  font-size: 44px;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(208,64,255,0.5));
  background: radial-gradient(circle, rgba(208,144,255,0.3), transparent 70%);
  border-radius: 50%;
  padding: 8px;
}
.dr-ult-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.dr-ult-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dr-ult-tag {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #d090ff, #a040d0);
  color: #1a0a30;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
}
.dr-ult-name {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #f0c0ff, #d080ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
}
.dr-ult-desc {
  font-size: 12.5px;
  color: #e8d0ff;
  line-height: 1.5;
}
.dr-ult-charge { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dr-ult-charge-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.55);
  border-radius: 4px;
  border: 1px solid rgba(208,144,255,0.45);
  overflow: hidden;
}
.dr-ult-charge-fill {
  height: 100%;
  background: linear-gradient(90deg, #a040d0, #d080ff);
  transition: width 0.4s ease;
}
.dr-ult-charge-text {
  font-size: 10.5px;
  color: #c8a0ff;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.dr-ult-soon {
  font-size: 10px;
  color: #a060d0;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(208,144,255,0.35);
  padding: 3px 8px;
  border-radius: 5px;
  align-self: flex-start;
  margin-top: 4px;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════
   v73 — Métiers craft (Atelier) + recipes HD
   ════════════════════════════════════════════════════════ */
.jobs-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.jobs-tab {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.jobs-tab.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.45);
}

.craft-job-tabs {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.craft-job-tab {
  display: flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #2a1f10, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.craft-job-tab small { color: #8a7858; font-size: 10px; font-weight: 700; }
.craft-job-tab:hover { border-color: #ffd060; color: var(--c, #ffd890); }
.craft-job-tab.active {
  background: linear-gradient(180deg, var(--c, #c89030) 0%, rgba(0,0,0,0.4) 100%);
  border-color: var(--c, #ffd060);
  color: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c, #ffd060) 40%, transparent);
}
.craft-job-tab.active small { color: rgba(255,255,255,0.85); }

.craft-job-card {
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 2px solid rgba(184,120,8,0.5);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.craft-job-head {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid rgba(184,120,8,0.3);
}
.craft-job-icon {
  font-size: 36px;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.craft-job-name {
  font-size: 18px;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
}
.craft-job-desc { font-size: 11.5px; color: #c8a060; margin-top: 3px; }
.craft-job-lvl { text-align: right; min-width: 180px; }
.cjl-num {
  font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cjl-num small { color: #8a7858; font-size: 11px; -webkit-text-fill-color: #8a7858; }
.cjl-bar {
  height: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(184,120,8,0.4);
  border-radius: 4px;
  margin: 4px 0 3px;
  overflow: hidden;
}
.cjl-fill { height: 100%; transition: width 0.3s; }
.cjl-xp { font-size: 10px; color: #c8a060; font-weight: 700; }

.craft-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.cf-btn {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.cf-btn.active { background: linear-gradient(180deg, #ffd060, #c89030); color: #1a0a04; border-color: #c89030; }

.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.recipe-card {
  background: linear-gradient(160deg, rgba(40,28,16,0.85), rgba(15,10,6,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.recipe-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, rgba(184,120,8,0.5), rgba(100,68,8,0.5));
}
.recipe-card.ready::before   { background: linear-gradient(180deg, #80f898, #40c860); }
.recipe-card.missing::before { background: linear-gradient(180deg, #ff8060, #c84030); }
.recipe-card.locked::before  { background: linear-gradient(180deg, #6a4818, #3a2010); }
.recipe-card.ready:hover {
  border-color: #80f898;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.recipe-card.locked { opacity: 0.55; }

.rc-head { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.rc-img {
  width: 48px; height: 48px;
  background: rgba(255,200,80,0.08);
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rc-img img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.rc-img span { color: #6a4818; font-size: 18px; font-weight: 900; }
.rc-name { font-size: 13px; font-weight: 900; color: #ffd890; letter-spacing: 0.3px; }
.rc-meta { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.rc-lvl, .rc-xp {
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.3);
  color: #c8a060;
}
.rc-xp { color: #ffaa50; border-color: rgba(255,170,80,0.35); }

.rc-ings { display: flex; flex-wrap: wrap; gap: 4px; }
.ri-pill {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(184,120,8,0.3);
  color: #c8b890;
}
.ri-pill.ok   { color: #a0e8a0; border-color: rgba(128,248,128,0.4); }
.ri-pill.miss { color: #ff9080; border-color: rgba(255,128,96,0.45); }
.ri-pill b { color: #ffd060; font-weight: 900; }
.ri-pill.miss b { color: #ff8060; }

.rc-btn {
  background: linear-gradient(180deg, #4a3018, #2a1808);
  border: 1.5px solid #6a4818;
  color: #ffd890;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.3px;
}
.rc-btn.go {
  background: linear-gradient(180deg, #80c860, #408030);
  color: #fff;
  border-color: #408030;
  box-shadow: 0 0 12px rgba(128,200,96,0.4);
}
.rc-btn.go:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(128,200,96,0.6); }
.rc-btn.miss { opacity: 0.6; cursor: not-allowed; }
.rc-btn.locked { opacity: 0.4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════
   v75 — Bureau UX clarifié + recettes JSON
   ════════════════════════════════════════════════════════ */
.bureau-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 8px;
  padding: 10px 14px;
}
.brule {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: #c8b890;
}
.brule span { font-size: 16px; }
.brule b { color: #ffd060; font-weight: 900; }

.bur-section-title {
  font-size: 10px;
  font-weight: 900;
  color: #c8a060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 4px;
}
.bur-mission-info {
  background: linear-gradient(135deg, rgba(28,18,8,0.7), rgba(14,8,4,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bmi-desc {
  font-size: 12px;
  color: #ffd890;
  line-height: 1.4;
}
.bmi-desc b { color: #ffd060; }
.bmi-loots-label {
  font-size: 10px;
  font-weight: 800;
  color: #80d860;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.bmi-loots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.bmi-loot-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(80,200,80,0.4);
  color: #c8e8b0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px 3px 3px;
  border-radius: 5px;
}
.bmi-loot-pill img {
  width: 18px; height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.bur-dur small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #8a7858;
  margin-top: 1px;
}
.bur-dur.active small { color: rgba(26,10,4,0.7); }

.bur-rewards-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(60,42,20,0.5), rgba(20,14,8,0.7));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 8px;
}
.brp-pill {
  font-size: 11px;
  font-weight: 700;
  color: #c8b890;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.3);
}
.brp-pill b { color: #ffd060; font-weight: 900; }

/* ════════════════════════════════════════════════════════
   v76 — Modale renommage + mini-footer
   ════════════════════════════════════════════════════════ */

/* ── MINI FOOTER ──────────────────────────────────────── */
.app-mini-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 22px 56px; /* 56px bas pour ne pas être masqué par le chat fixed */
  margin-top: 24px;
  background: linear-gradient(180deg, transparent, rgba(14,8,4,0.7));
  border-top: 1px solid rgba(184,120,8,0.25);
  font-size: 11px;
  color: #8a7858;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.amf-left, .amf-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amf-sep { color: #4a3a1e; }
.amf-version {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.35);
  color: #ffd060;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.app-mini-footer a {
  color: #c8a060;
  text-decoration: none;
  font-weight: 800;
}
.app-mini-footer a:hover { color: #ffd060; text-decoration: underline; }

/* ── MODALE RENOMMAGE ─────────────────────────────────── */
.rename-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,4,2,0.78);
  backdrop-filter: blur(4px);
  z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rmFadeIn 0.18s ease;
}
@keyframes rmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rename-modal {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(160deg, rgba(60,42,20,0.96), rgba(20,14,8,0.98));
  border: 2px solid rgba(184,120,8,0.65);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,80,0.12);
  padding: 22px 24px;
  animation: rmSlide 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes rmSlide { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } }

.rm-head {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid rgba(184,120,8,0.3);
}
.rm-portrait {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2.5px solid;
  background: radial-gradient(circle, rgba(255,200,80,0.2), rgba(20,14,8,0.85));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255,200,80,0.25);
}
.rm-portrait img { width: 90%; height: 90%; object-fit: contain; }
.rm-title {
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
}
.rm-sub { font-size: 11.5px; color: #c8a060; margin-top: 4px; }
.rm-sub b { color: #ffd890; }

.rm-label {
  display: block;
  font-size: 11px;
  color: #c8a060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 6px;
}
.rm-input {
  width: 100%;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(184,120,8,0.5);
  border-radius: 8px;
  color: #ffd890;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 14px;
  outline: none;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rm-input:focus {
  border-color: #ffd060;
  box-shadow: 0 0 14px rgba(255,200,80,0.35);
}
.rm-hint {
  font-size: 11px;
  color: #8a7858;
  margin-top: 6px;
  min-height: 16px;
}
.rm-hint.ok  { color: #80f898; }
.rm-hint.err { color: #ff8060; }

.rm-actions {
  display: flex; gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}
.rm-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
  border: 1.5px solid;
  transition: all 0.12s;
}
.rm-btn-cancel {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border-color: #6a4818;
  color: #c8a060;
}
.rm-btn-cancel:hover { border-color: #ffd060; color: #ffd890; }
.rm-btn-ok {
  background: linear-gradient(180deg, #ffd060, #c89030);
  border-color: #c89030;
  color: #1a0a04;
  box-shadow: 0 0 12px rgba(255,200,80,0.45);
}
.rm-btn-ok:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,200,80,0.65); }
.rm-btn-ok:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ════════════════════════════════════════════════════════
   v77 — Fix paperdoll badge, labels visibles, tooltip icons,
         bank fee, HDV prix fixe, boutique active, update banner
   ════════════════════════════════════════════════════════ */

/* ── Fix paperdoll : stat badge ne couvre PLUS l'image objet ── */
.dr-pd-mannequin .pd-slot img.pd-stat-badge,
.dr-pd-col .pd-slot img.pd-stat-badge,
.pd-slot img.pd-stat-badge,
.pd-stat-badge {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  position: absolute !important;
  bottom: 1px !important;
  left: 1px !important;
  background: rgba(0,0,0,0.9) !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffd060 !important;
  padding: 1px !important;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255,200,80,0.5);
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px #000);
}

/* ── Labels paperdoll TOUJOURS visibles ────────────────── */
.pd-label {
  position: absolute !important;
  bottom: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 8.5px !important;
  color: #c8a060 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none;
  display: block !important;
  opacity: 0.85;
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid rgba(184,120,8,0.25);
  font-weight: 700;
}
.pd-slot:hover .pd-label { opacity: 1; color: #ffd060; }

/* ── Tooltip equip : icône stat devant chaque ligne ────── */
.pd-tt-eff {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 3px 6px;
}
.pd-tt-eff-ic {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.pd-tt-eff-ic.ph {
  background: rgba(184,120,8,0.15);
  border-radius: 3px;
}

/* ── Bank fee pill ─────────────────────────────────────── */
.bsb-fee {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, rgba(80,30,30,0.6), rgba(40,12,12,0.85));
  border: 1.5px solid rgba(255,128,80,0.45);
  color: #ffd0a0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.bsb-fee b { color: #ff8060; font-weight: 900; }

/* ── HDV : prix fixe par serveur ───────────────────────── */
.hdv-price-fixed {
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  color: #ffd060;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.hdv-price-fixed small {
  display: block;
  font-size: 10.5px;
  color: #8a7858;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.hdv-price-fixed b { color: #ffd060; }

/* ── Boutique : actif + ready button ──────────────────── */
.shop-active {
  background: linear-gradient(135deg, rgba(60,42,20,0.8), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.shop-active-title {
  font-size: 11px;
  color: #ffd060;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.shop-active-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  margin-right: 6px;
}
.shop-active-pill small { color: rgba(26,10,4,0.7); font-size: 10px; }
.shop-offer-btn.ready {
  background: linear-gradient(180deg, #80c860, #408030) !important;
  color: #fff !important;
  border-color: #408030 !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.shop-offer-btn.ready:hover { box-shadow: 0 0 12px rgba(128,200,96,0.5); transform: translateY(-1px); }

/* ── Update notification banner ────────────────────────── */
.update-banner {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 7000;
  max-width: 380px;
  background: linear-gradient(135deg, rgba(40,80,30,0.97), rgba(14,28,8,0.99));
  border: 2px solid #80f898;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 22px rgba(128,248,152,0.5);
  animation: ubSlide 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes ubSlide { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.ub-content {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
}
.ub-icon { font-size: 26px; animation: ubSpin 2.5s linear infinite; }
@keyframes ubSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ub-title { font-size: 13px; font-weight: 900; color: #80f898; letter-spacing: 0.5px; }
.ub-sub { font-size: 11px; color: #c8e8b0; margin-top: 2px; line-height: 1.3; }
.ub-btn-reload {
  background: linear-gradient(180deg, #80f898, #40c860);
  color: #0a2010;
  border: 1.5px solid #40c860;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.ub-btn-reload:hover { background: linear-gradient(180deg, #a0ffa8, #60e088); }
.ub-btn-dismiss {
  background: transparent;
  border: 1px solid rgba(128,248,152,0.4);
  color: #80f898;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}
.ub-btn-dismiss:hover { background: rgba(128,248,152,0.15); }

/* ════════════════════════════════════════════════════════
   v78 — Bureau fallback img, history compact, modale shop,
         stat icons tooltip réduites 50%
   ════════════════════════════════════════════════════════ */

/* Bureau : pastille fallback quand pas d'image */
.bmi-loot-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #6a4818, #3a2010);
  color: #ffd060;
  font-size: 10px;
  font-weight: 900;
  border-radius: 50%;
  border: 1px solid rgba(255,200,80,0.45);
  flex-shrink: 0;
}

/* Combat history : loot chips compacts (image+qty seulement) */
/* v126.24 — Chip : image-wrap + qty séparés, jamais superposés */
.cl-loot-chip.compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px 4px 4px !important;
  min-width: 0 !important;
  position: relative;
  background: rgba(0,0,0,0.5) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  vertical-align: middle;
}
.cl-loot-chip.compact .cl-chip-img-wrap {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 39px !important; height: 39px !important;
  flex: 0 0 39px !important;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.cl-loot-chip.compact .cl-chip-img-wrap img {
  width: 35px !important; height: 35px !important;
  object-fit: contain;
}
.cl-loot-chip.compact .cl-chip-img-wrap .cl-chip-textname {
  font-size: 9px !important; padding: 0 2px;
  text-align: center; line-height: 1.1;
  color: #ffd890;
  font-weight: 700;
  white-space: normal;
  overflow: hidden;
  max-width: 30px;
  max-height: 30px;
}
.cl-loot-chip.compact > .cl-chip-qty {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  background: linear-gradient(135deg, #ffd060, #c89030) !important;
  color: #1a1208 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border: 1px solid #1a1208 !important;
  border-radius: 4px !important;
  min-width: 22px !important;
  height: auto !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: none !important;
  bottom: auto !important; right: auto !important; top: auto !important;
}
.cl-loot-chip.compact-deprecated {
  padding: 3px 6px 3px 3px !important;
  gap: 5px !important;
}
.cl-loot-chip.compact .cl-chip-name,
.cl-loot-chip.compact .cl-chip-by { display: none !important; }
.cl-loot-chip.compact img { width: 22px !important; height: 22px !important; }
.cl-chip-noimg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(184,120,8,0.2);
  border-radius: 4px;
  color: #c8a060;
  font-weight: 900;
  font-size: 11px;
}

/* v198 — Tooltip stat icons équipé : 11px (-50% par rapport à v197 à 14px×scale 1.5 effective) */
.pd-tooltip .pd-tt-eff-ic {
  width: 11px !important;
  height: 11px !important;
}
.pd-tooltip .pd-tt-eff { padding: 1px 3px; gap: 3px; font-size: 11px; }

/* ── Modale confirmation achat boutique ───────────────── */
.shop-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(8,4,2,0.78);
  backdrop-filter: blur(4px);
  z-index: 6500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rmFadeIn 0.18s ease;
}
.shop-confirm {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, rgba(60,42,20,0.97), rgba(20,14,8,0.99));
  border: 2px solid rgba(184,120,8,0.7);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,200,80,0.15);
  padding: 0;
  overflow: hidden;
  animation: rmSlide 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.sc-head {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(184,120,8,0.25), rgba(20,14,8,0.5));
  border-bottom: 1.5px solid rgba(184,120,8,0.45);
}
.sc-ico {
  width: 60px; height: 60px;
  font-size: 38px;
  text-align: center;
  background: radial-gradient(circle, rgba(255,200,80,0.3), rgba(20,14,8,0.85));
  border-radius: 50%;
  border: 2px solid rgba(255,200,80,0.55);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.sc-title {
  font-size: 11.5px;
  color: #c8a060;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sc-name {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.sc-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.sc-desc {
  font-size: 13px;
  color: #ffd890;
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 8px;
  margin-bottom: 4px;
}
.sc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
  color: #c8a060;
  border-bottom: 1px solid rgba(184,120,8,0.18);
}
.sc-row:last-of-type { border-bottom: none; }
.sc-row-lbl { font-weight: 700; }
.sc-row-val {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 900;
  color: #ffd890;
}
.sc-row-val b { color: #ffd060; }
.sc-cost b { color: #ffaa50; }
.sc-after-ok b { color: #80f898 !important; }
.sc-after-ko b { color: #ff8060 !important; }

.sc-warn {
  background: rgba(255,128,80,0.12);
  border: 1px solid rgba(255,128,80,0.4);
  color: #ffd0a0;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 6px;
}
.sc-warn a { color: #ffd060; font-weight: 900; }

.sc-actions {
  display: flex; gap: 10px;
  padding: 14px 22px 18px;
  justify-content: flex-end;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(184,120,8,0.25);
}
.sc-btn {
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
  border: 1.5px solid;
  transition: all 0.12s;
}
.sc-btn-cancel {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border-color: #6a4818;
  color: #c8a060;
}
.sc-btn-cancel:hover { border-color: #ffd060; color: #ffd890; }
.sc-btn-confirm {
  background: linear-gradient(180deg, #80c860, #408030);
  border-color: #408030;
  color: #fff;
  box-shadow: 0 0 14px rgba(128,200,96,0.45);
}
.sc-btn-confirm:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 22px rgba(128,200,96,0.7); }
.sc-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ════════════════════════════════════════════════════════
   v79 — Friends panel + premium guild banner/leaderboard
   ════════════════════════════════════════════════════════ */

/* ── FRIENDS ─────────────────────────────────────────── */
.friends-page {
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(28,18,8,0.5), rgba(14,8,4,0.65));
}
.friends-header {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(60,42,20,0.95), rgba(20,14,8,0.97));
  border: 2px solid rgba(184,120,8,0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.1), 0 4px 12px rgba(0,0,0,0.5);
}
.fh-emblem { font-size: 50px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)); }
.fh-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fh-sub { font-size: 12px; color: #c8a060; margin-top: 4px; line-height: 1.4; }
.fh-stats { display: flex; flex-direction: column; gap: 4px; }
.fh-stat-row { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.fh-stat-row b { font-size: 18px; color: #ffd890; font-weight: 900; }
.fh-stat-online { color: #80f898 !important; }
.fh-stat-row small { font-size: 10px; color: #8a7858; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

.friends-add {
  display: flex; gap: 8px;
  background: linear-gradient(180deg, rgba(40,28,16,0.7), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 10px 14px;
}
.friend-add-input {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #ffd890;
  padding: 9px 13px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  font-family: inherit;
}
.friend-add-input:focus { border-color: #ffd060; box-shadow: 0 0 10px rgba(255,200,80,0.3); }
.friend-add-btn {
  background: linear-gradient(180deg, #80c860, #408030);
  border: 1.5px solid #408030;
  color: #fff;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.friend-add-btn:hover { box-shadow: 0 0 14px rgba(128,200,96,0.5); }

.friends-empty {
  text-align: center;
  padding: 50px 20px;
  background: linear-gradient(180deg, rgba(40,28,16,0.5), rgba(14,8,4,0.7));
  border: 1.5px dashed rgba(184,120,8,0.35);
  border-radius: 12px;
  color: #8a7858;
}
.fe-ico { font-size: 50px; margin-bottom: 12px; opacity: 0.5; }
.fe-title { font-size: 16px; color: #ffd890; font-weight: 900; margin-bottom: 6px; }
.fe-sub { font-size: 12px; color: #c8a060; }

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.friend-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.15s;
}
.friend-card.online::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #80f898, #40c860);
  border-radius: 3px 0 0 3px;
}
.friend-card.offline { opacity: 0.6; }
.friend-card:hover {
  border-color: #ffd060;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.fc-status-dot {
  position: absolute;
  bottom: 8px; left: 38px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #1a1408;
  z-index: 2;
}
.fc-status-dot.on  { background: #80f898; box-shadow: 0 0 6px #80f898; }
.fc-status-dot.off { background: #6a4818; }
.fc-avatar {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #6a4818, #3a2010);
  border: 2px solid rgba(255,200,80,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffd060;
  font-size: 22px;
  font-weight: 900;
}
.fc-pseudo { font-size: 14px; font-weight: 900; color: #ffd890; letter-spacing: 0.3px; }
.fc-activity { font-size: 11.5px; color: #c8a060; margin-top: 2px; font-weight: 700; }
.friend-card.offline .fc-activity { color: #6a4818; }
.fc-zone { font-size: 10.5px; color: #8a7858; margin-top: 2px; }
.fc-note { font-size: 10px; color: #c8b890; font-style: italic; margin-top: 3px; }
.fc-actions { display: flex; flex-direction: column; gap: 4px; }
.fc-btn-msg, .fc-btn-rm {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.4);
  color: #c8a060;
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.fc-btn-msg:hover { border-color: #80a8e8; color: #80a8e8; }
.fc-btn-rm:hover { border-color: #c87060; color: #c87060; }

.friends-info {
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(184,120,8,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #8a7858;
}
.friends-info b { color: #ffd060; font-weight: 800; }

/* ── GUILD PREMIUM BANNER + LEADERBOARD ─────────────── */
.guild-spotlight { margin-top: 12px; }
.gsl-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255,200,80,0.65);
  box-shadow: 0 12px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,80,0.15);
  min-height: 180px;
}
.gsl-banner-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,200,80,0.4), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(208,64,255,0.3), transparent 50%),
    linear-gradient(135deg, #2a1810, #1a0a04 60%, #0a0402);
}
.gsl-banner-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,200,80,0.04) 6px 7px);
  pointer-events: none;
}
.gsl-banner-content {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px 32px;
}
.gsl-banner-emblem {
  font-size: 80px;
  text-align: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8));
  background: radial-gradient(circle, rgba(255,200,80,0.35), transparent 70%);
  border-radius: 50%;
  padding: 10px;
  animation: gslPulse 3s ease-in-out infinite;
}
@keyframes gslPulse {
  0%,100% { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8)) drop-shadow(0 0 6px rgba(255,200,80,0.3)); }
  50%     { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8)) drop-shadow(0 0 18px rgba(255,200,80,0.7)); }
}
.gsl-banner-pre {
  font-size: 11px;
  font-weight: 900;
  color: #ffd060;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gsl-banner-h1 {
  font-size: 38px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060 50%, #c89030);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(255,200,80,0.3);
}
.gsl-banner-h2 {
  font-size: 18px;
  color: #c8b890;
  font-style: italic;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.gsl-banner-perks {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-self: end;
  grid-column: 2;
  margin-top: 12px;
}
.gsl-banner-perks span {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,200,80,0.45);
  color: #ffd890;
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

@media (max-width: 720px) {
  .gsl-banner-content { grid-template-columns: 1fr; padding: 22px; text-align: center; }
  .gsl-banner-h1 { font-size: 28px; }
}

/* Leaderboard guildes mockup */
.guild-leaderboard {
  background: linear-gradient(180deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 16px 22px;
}
.glb-title {
  font-size: 13px;
  color: #ffd060;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
  font-weight: 900;
}
.glb-list { display: flex; flex-direction: column; gap: 6px; }
.glb-row {
  display: grid;
  grid-template-columns: 36px 30px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.35);
  border-left-width: 4px !important;
  border-radius: 8px;
  transition: all 0.15s;
}
.glb-row:hover { transform: translateX(3px); border-color: #ffd060; }
.glb-rank {
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-align: center;
}
.glb-emblem { font-size: 22px; text-align: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.glb-name { font-size: 13.5px; font-weight: 900; color: #ffd890; letter-spacing: 0.3px; }
.glb-stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.glb-stat b { color: #ffd060; font-size: 13px; font-weight: 900; }
.glb-stat small { color: #8a7858; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

@media (max-width: 720px) {
  .glb-row { grid-template-columns: 30px 1fr auto; gap: 6px; }
  .glb-emblem, .glb-stat:nth-of-type(2), .glb-stat:nth-of-type(3) { display: none; }
}
.guild-leaderboard.empty .glb-empty {
  text-align: center;
  padding: 40px 20px;
  background: rgba(0,0,0,0.3);
  border: 1.5px dashed rgba(184,120,8,0.3);
  border-radius: 10px;
  color: #8a7858;
}
.glb-empty-ic { font-size: 40px; margin-bottom: 10px; opacity: 0.6; }
.glb-empty-text { font-size: 12.5px; line-height: 1.5; }
.glb-empty-text b { color: #ffd060; font-weight: 800; }

/* ════════════════════════════════════════════════════════
   v80 — Combat history rew-pills + Friend card overlay
   ════════════════════════════════════════════════════════ */

.cl-rew-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 6px;
}
.cl-rew-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.4);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.cl-rew-pill.xp   { color: #ffaa50; border-color: rgba(255,170,80,0.55); }
.cl-rew-pill.k    { color: #ffd060; border-color: rgba(255,200,80,0.55); }
.cl-rew-pill.loot { color: #80f898; border-color: rgba(128,248,152,0.5); }

/* Tooltip natif HTML : pre-line pour les retours à la ligne dans title */
.cl-loot-chip[title], .cl-loot-tile[title] { cursor: pointer; }

/* ── FRIENDS autocomplete dropdown ─────────────────── */
.friend-add { position: relative; }
.friend-ac-list {
  position: absolute;
  left: 14px; right: 14px;
  top: calc(100% - 5px);
  background: linear-gradient(180deg, #2a1f10, #1a1408);
  border: 1.5px solid rgba(255,200,80,0.55);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}
.friend-ac-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #ffd890;
  cursor: pointer;
  border-bottom: 1px solid rgba(184,120,8,0.2);
}
.friend-ac-row:last-child { border-bottom: none; }
.friend-ac-row:hover { background: rgba(255,200,80,0.12); color: #ffd060; }
.friend-ac-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a4818, #3a2010);
  border: 1.5px solid rgba(255,200,80,0.4);
  color: #ffd060;
  font-weight: 900;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.friend-ac-meta { font-size: 10px; color: #8a7858; margin-left: auto; }

/* ── PLAYER CARD overlay (clic pseudo dans le chat) ─ */
.player-card-overlay {
  position: fixed; inset: 0;
  background: rgba(8,4,2,0.78);
  backdrop-filter: blur(4px);
  z-index: 6500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rmFadeIn 0.18s ease;
}
.player-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(160deg, rgba(60,42,20,0.97), rgba(20,14,8,0.99));
  border: 2px solid rgba(184,120,8,0.7);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.75);
  padding: 0;
  overflow: hidden;
  animation: rmSlide 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pc-head {
  position: relative;
  padding: 28px 24px 18px;
  background: radial-gradient(ellipse at top, rgba(255,200,80,0.25), transparent 60%);
  text-align: center;
}
.pc-status-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #1a1408;
}
.pc-status-dot.on  { background: #80f898; box-shadow: 0 0 8px #80f898; }
.pc-status-dot.off { background: #6a4818; }
.pc-avatar {
  width: 80px; height: 80px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a4818, #3a2010);
  border: 3px solid rgba(255,200,80,0.6);
  display: flex; align-items: center; justify-content: center;
  color: #ffd060;
  font-size: 36px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255,200,80,0.4);
}
.pc-pseudo {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}
.pc-activity {
  font-size: 12px;
  color: #c8a060;
  font-weight: 700;
  margin-top: 4px;
}

.pc-body { padding: 14px 24px 18px; display: flex; flex-direction: column; gap: 8px; }
.pc-row {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: #c8b890;
  padding: 6px 0;
  border-bottom: 1px solid rgba(184,120,8,0.18);
}
.pc-row:last-child { border-bottom: none; }
.pc-row b { color: #ffd890; font-weight: 800; }

.pc-actions {
  display: flex; gap: 8px;
  padding: 14px 24px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(184,120,8,0.25);
}
.pc-btn {
  flex: 1;
  padding: 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.4px;
  border: 1.5px solid;
}
.pc-btn-add {
  background: linear-gradient(180deg, #80c860, #408030);
  color: #fff; border-color: #408030;
}
.pc-btn-add:hover { box-shadow: 0 0 14px rgba(128,200,96,0.5); }
.pc-btn-add:disabled { opacity: 0.5; cursor: not-allowed; }
.pc-btn-mention {
  background: linear-gradient(180deg, #4a3a8a, #2a204a);
  color: #c8c0ff; border-color: #4a3a8a;
}
.pc-btn-close {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  color: #c8a060; border-color: #6a4818;
}

/* Pseudo cliquable dans le chat */
.lc-pseudo, .live-chat .pseudo, .lc-msg-pseudo {
  cursor: pointer;
  transition: color 0.12s, text-decoration 0.12s;
}
.lc-pseudo:hover, .live-chat .pseudo:hover, .lc-msg-pseudo:hover {
  color: #ffd060 !important;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   v81 — Guilde MVP : Mon guilde, donations, percepteurs
   ════════════════════════════════════════════════════════ */
.mg-page { display: flex; flex-direction: column; gap: 14px; }
.mg-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255,200,80,0.65);
  box-shadow: 0 12px 32px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,80,0.15);
}
.mg-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,200,80,0.35), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(208,64,255,0.25), transparent 55%),
    linear-gradient(135deg, #2a1810, #1a0a04 60%, #0a0402);
}
.mg-hero-content {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr 220px;
  gap: 22px;
  align-items: center;
  padding: 22px 28px;
}
.mg-emblem {
  font-size: 64px;
  text-align: center;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7));
  background: radial-gradient(circle, rgba(255,200,80,0.3), transparent 70%);
  border-radius: 50%;
  padding: 8px;
}
.mg-name {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}
.mg-motto { font-size: 12px; color: #c8b890; font-style: italic; margin-top: 4px; }
.mg-header-text-wrap { position:relative; margin:10px 14px 0; padding:10px 38px 10px 14px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,212,96,0.25); border-radius:6px; }
.mg-header-text { font-size:13px; color:#e8d8a8; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.mg-header-text-empty { font-size:12px; }
.mg-header-text-edit { position:absolute; top:6px; right:6px; background:rgba(255,212,96,0.15); border:1px solid #c89030; color:#ffd060; width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:13px; }
.mg-header-text-edit:hover { background:rgba(255,212,96,0.30); }
.mg-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mg-tags span {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,120,8,0.4);
  color: #ffd890;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
}
.mg-level { text-align: right; min-width: 200px; }
.mg-level-num {
  font-size: 16px;
  color: #c8a060;
  font-weight: 900;
}
.mg-level-num b {
  font-size: 28px;
  background: linear-gradient(135deg, #fff0a0, #ffd060);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 0 4px;
}
.mg-level-num small { color: #8a7858; font-size: 12px; }
.mg-xp-bar {
  height: 10px;
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 5px;
  margin: 6px 0 4px;
  overflow: hidden;
}
.mg-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89030, #ffd060);
  transition: width 0.4s;
}
.mg-xp-text { font-size: 10.5px; color: #c8a060; font-weight: 700; }

.mg-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-tab {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mg-tab.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}

.mg-section-title {
  font-size: 13px;
  color: #ffd060;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 6px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
}

.mg-bonuses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.mg-bonus-card {
  background: linear-gradient(160deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.mgb-num {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #80f898, #40c860);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.mgb-lbl { font-size: 10.5px; color: #c8a060; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; font-weight: 700; }

.mg-info {
  /* v177 — Lisibilité : texte clair sur fond sombre */
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #ffe890;
  line-height: 1.55;
}
.mg-info b, .mg-info strong { color: #ffd060; }
.mg-info ul { color: #d8c898; }
.mg-info small { color: #b8a878; }
.mg-info ul li { margin: 2px 0; }

/* v177 — Icône Kama (assets/stats/Kama.webp) — utilisable inline partout */
.ic-kama {
  width: 16px; height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.ic-kama-lg { width: 22px; height: 22px; vertical-align: -5px; }
.bank-char-btn { padding: 4px 10px !important; }

/* v178 — Historique des ventes HDV */
.hdv-sales-history {
  margin: 12px 18px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
}
.hsh-title { font-size: 14px; font-weight: 900; color: #ffd060; margin-bottom: 10px; }
.hsh-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.hsh-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px 130px;
  gap: 12px; align-items: center;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border-left: 3px solid #80c850;
  border-radius: 4px;
  font-size: 12px; color: #d8c898;
}
.hsh-time { color: #a89878; font-size: 11px; }
.hsh-name { color: #ffe890; font-weight: 700; }
.hsh-qty { color: #ffd060; font-weight: 800; text-align: right; }
.hsh-kamas { color: #80f8a0; font-weight: 900; text-align: right; }

/* v178 — Bank item detail panel : sticky top, ne se cache pas sous la grille */
.bank-item-detail-top {
  position: sticky;
  top: 8px;
  z-index: 10;
  margin: 0 0 14px;
}
.bank-item-detail-top:empty { display: none; }

/* v179 — Récap chaîne de donjons */
.dcr-modal { background: linear-gradient(160deg, #2a1808 0%, #14080a 100%); }
.dcr-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 12px 0 16px;
}
.dcr-stat {
  text-align: center; padding: 14px 10px;
  background: linear-gradient(160deg, rgba(46,32,18,0.9), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 10px;
}
.dcr-stat-ic { font-size: 28px; margin-bottom: 4px; }
.dcr-stat-val { font-size: 22px; font-weight: 900; color: #ffe890; line-height: 1.1; }
.dcr-stat-lbl { font-size: 11px; color: #a89878; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.dcr-stat.dcr-xp .dcr-stat-val { color: #80c8ff; }
.dcr-stat.dcr-kamas .dcr-stat-val { color: #ffd060; }
.dcr-stat.dcr-bosses .dcr-stat-val { color: #ff8080; }
.dcr-stat.dcr-levels .dcr-stat-val { color: #80f8a0; }
.dcr-loot-title { font-size: 14px; font-weight: 900; color: #ffd060; margin: 14px 0 8px; }
.dcr-loot-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px; max-height: 320px; overflow-y: auto;
}
.dcr-loot-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.4);
  border-left: 3px solid #80c850;
  border-radius: 4px;
  font-size: 12px;
}
.dcr-loot-item.equip { border-left-color: #ff4040; }
.dcr-loot-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.dcr-loot-noimg { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.dcr-loot-name { flex: 1; color: #ffe890; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcr-loot-name small { color: #a89878; font-weight: 600; }
.dcr-loot-qty { color: #ffd060; font-weight: 900; flex-shrink: 0; }

/* v181 — Ligne transfert custom par perso (banque) */
.bank-char-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 6px;
}
.bank-char-row input.bank-num-input {
  -moz-appearance: textfield; appearance: textfield;
}
.bank-char-row input.bank-num-input::-webkit-outer-spin-button,
.bank-char-row input.bank-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* v182 — Modale percepteur compacte (refonte) */
.pcb-modal-v2 {
  max-width: 720px !important;
  width: 92vw !important;
  max-height: 88vh;
  display: flex; flex-direction: column;
  padding: 0 !important;
  background: linear-gradient(160deg, #1a1408 0%, #0c0805 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
}
.pcb-head-v2 {
  position: relative;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2a1c10, #14080a);
  border-bottom: 2px solid var(--gold);
}
.pcb-head-title { font-size: 16px; font-weight: 900; color: #ffd060; letter-spacing: 0.5px; }
.pcb-head-sub { font-size: 11px; color: #a89878; margin-top: 2px; }
.pcb-close-x {
  position: absolute; top: 8px; right: 10px;
  background: rgba(0,0,0,0.4); color: #ffd060;
  border: 1px solid #4a3a1a; border-radius: 4px;
  width: 28px; height: 28px; cursor: pointer; font-size: 14px;
}
.pcb-close-x:hover { background: rgba(200,80,80,0.4); color: #ff8080; border-color: #ff8080; }

.pcb-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 14px; background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(184,120,8,0.3);
}
.pcb-sum-cell {
  text-align: center;
  padding: 6px 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
}
.pcb-sum-lbl { font-size: 10px; color: #a89878; text-transform: uppercase; letter-spacing: 0.4px; }
.pcb-sum-val { font-size: 16px; font-weight: 900; color: #ffe890; margin-top: 2px; }
.pcb-sum-val small { font-size: 10px; color: #a89878; font-weight: 600; margin-left: 2px; }
.pcb-sum-bar { height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.pcb-sum-bar-fill { height: 100%; background: linear-gradient(90deg, #80f8a0, #40c860); transition: width 0.3s; }

.pcb-cost-hint {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 14px;
  font-size: 11px; color: #c8a060;
  background: rgba(255,200,80,0.06);
  border-bottom: 1px solid rgba(184,120,8,0.2);
}
.pcb-cost-hint b { color: #ffd060; }

.pcb-grid-v2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}
.pcb-col { display: flex; flex-direction: column; gap: 4px; }
.pcb-col-title {
  font-size: 12px; font-weight: 900; color: #ffd060;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 4px;
  border-bottom: 1px solid rgba(184,120,8,0.3);
  margin-bottom: 4px;
}
.pcb-reset-btn-mini {
  margin-left: auto;
  background: rgba(0,0,0,0.4); color: #c89060;
  border: 1px solid #4a3a1a; border-radius: 3px;
  width: 22px; height: 22px;
  cursor: pointer; font-size: 11px;
}
.pcb-reset-btn-mini:hover { color: #ffd060; border-color: #ffd060; }
.pcb-reset-btn-mini:disabled { opacity: 0.3; cursor: not-allowed; }

.pcb-row-v2 {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(90deg, rgba(60,42,20,0.4), rgba(20,14,8,0.6));
  border-left: 3px solid var(--sc, #c89030);
  border-radius: 4px;
}
.pcb-row-v2.spell { border-left-color: #c080ff; }
.pcb-row-ic { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.pcb-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pcb-row-name { font-size: 12px; font-weight: 800; color: #ffe890; }
.pcb-row-name small { color: #a89878; font-weight: 600; font-size: 10px; }
.pcb-row-val { font-size: 11px; color: #ffd060; }
.pcb-row-val b { font-size: 14px; font-weight: 900; color: #ffe890; margin-right: 2px; }
.pcb-row-val small { font-size: 9.5px; color: #a89878; }
.pcb-spell-stars-mini { font-size: 13px; color: #ffd060; line-height: 1; }
.pcb-spell-stars-mini small { font-size: 9.5px; color: #a89878; margin-left: 4px; }
.pcb-add-mini {
  flex-shrink: 0;
  background: linear-gradient(180deg, #406818, #1c4010);
  border: 1.5px solid #80c850;
  color: #fff; font-weight: 900;
  width: 28px; height: 28px;
  border-radius: 5px; cursor: pointer; font-size: 14px;
}
.pcb-add-mini:hover:not(:disabled) { background: linear-gradient(180deg, #58883c, #2a5a18); }
.pcb-add-mini:disabled { opacity: 0.3; cursor: not-allowed; background: #2a1f10; border-color: #4a3a1e; color: #6a5a40; }

.pcb-buy-slot-v2 {
  padding: 8px 12px;
  background: linear-gradient(180deg, #6040a0, #2c1c54);
  border: 1.5px solid #c080ff;
  color: #f0d0ff;
  border-radius: 6px; font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.pcb-buy-slot-v2:hover:not(:disabled) { background: linear-gradient(180deg, #7050b8, #3c2068); }
.pcb-buy-slot-v2:disabled { opacity: 0.4; cursor: not-allowed; }
.pcb-buy-slot-v2 small { color: #a888c8; font-weight: 600; }

.pcb-foot-v2 {
  padding: 10px 14px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(184,120,8,0.3);
  text-align: right;
}

@media (max-width: 720px) {
  .pcb-summary { grid-template-columns: repeat(2, 1fr); }
  .pcb-grid-v2 { grid-template-columns: 1fr; }
  /* v184 — Mobile fixes */
  .farm-dungeon-rooms { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .fdr-room { flex-shrink: 0; }
  .glb-row { grid-template-columns: 30px 1fr 60px; gap: 6px; font-size: 11px; }
  .glb-row .glb-mem, .glb-row .glb-perc, .glb-row .glb-xp { display: none; }
  .glb-row.glb-head { grid-template-columns: 30px 1fr 60px; }
  .dcr-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dcr-loot-list { grid-template-columns: 1fr; }
  .hsh-row { grid-template-columns: 50px 1fr 110px; gap: 8px; }
  .hsh-row .hsh-qty { display: none; }
  .pcb-cost-hint { font-size: 10px; }
  .pcb-row-v2 { padding: 5px 6px; gap: 4px; }
  .pcb-row-name { font-size: 11px; }
  .pcb-row-val { font-size: 10px; }
  .bank-char-row { flex-wrap: wrap; }
  .grp-card-actions { width: 100%; justify-content: flex-end; }
  #floating-tooltip.floating-tt { max-width: 90vw; font-size: 11px; }
}

/* v179 — Tooltip maison pour barre historique combat (dafeed) */
#floating-tooltip.floating-tt {
  position: fixed; z-index: 99999;
  background: linear-gradient(160deg, #2a1808 0%, #14080a 100%);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 10px 14px;
  color: #ffe890;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 18px rgba(255,200,80,0.3);
  pointer-events: none;
  display: none;
  max-height: 70vh;
  overflow-y: auto;
}
.ftt-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid rgba(184,120,8,0.4);
  font-weight: 900; font-size: 13px;
}
.ftt-head.win { color: #80f8a0; }
.ftt-head.loss { color: #ff8080; }
.ftt-body { display: flex; flex-direction: column; gap: 4px; }
.ftt-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #d8c898; }
.ftt-row b { color: #ffe890; font-weight: 800; }
.ftt-section { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(184,120,8,0.25); }
.ftt-section-title { font-size: 11px; color: #ffd060; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.ftt-mons { display: flex; flex-wrap: wrap; gap: 4px; }
.ftt-mon {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(80,30,30,0.6); border: 1px solid rgba(200,80,80,0.4);
  padding: 3px 7px; border-radius: 10px; font-size: 11px; color: #ffb0a0; font-weight: 700;
}
.ftt-mon small { color: #c89060; font-size: 9px; }
.ftt-loots { display: flex; flex-direction: column; gap: 2px; }
.ftt-loot { font-size: 11.5px; color: #d8f0c0; padding: 2px 4px; }
.ftt-loot b { color: #ffe890; font-weight: 800; }
.ftt-loot small { color: #a89878; }
.ftt-loot-more { color: #a89878; font-size: 11px; padding: 4px 4px 0; font-style: italic; }
.bank-item-detail-top .item-detail-box.premium {
  max-width: 100% !important;
  width: 100%;
}
.mg-info b { color: #ffd060; font-weight: 800; }

.mg-donate-block, .mg-chest, .mg-perceptors-list, .mg-deploy-list, .mg-members-list, .mg-settings, .mg-danger-zone {
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 12px;
  padding: 16px 18px;
}
.mg-pct-slider {
  width: 100%;
  margin: 8px 0 4px;
  accent-color: #ffd060;
}
.mg-pct-row { display: flex; justify-content: space-between; font-size: 12px; color: #ffd060; font-weight: 800; margin-top: 4px; }
/* v126.4 — Guilde : labels lisibles */
.mg-donate-pct label { color: #f0e4b8 !important; font-size: 14px; font-weight: 700; display: block; margin-bottom: 8px; }
.mg-donate-pct label b { color: #ffe890 !important; font-size: 16px; font-weight: 900; }
/* Retire les flèches sur les inputs number guildes */
.mg-page input[type="number"]::-webkit-outer-spin-button,
.mg-page input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mg-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* v190 — Retire les flèches sur tous les inputs de chaîne donjon (solo + groupe) */
.fs-chain input[type="number"]::-webkit-outer-spin-button,
.fs-chain input[type="number"]::-webkit-inner-spin-button,
.grp-chain input[type="number"]::-webkit-outer-spin-button,
.grp-chain input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fs-chain input[type="number"], .grp-chain input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
#mg-pct-disp { color: #ffd060; font-weight: 900; }
.mg-pct-hint { font-size: 11.5px; color: #c8b890; margin-top: 8px; line-height: 1.5; }

.mg-chest-balance { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mg-chest-icon { font-size: 36px; }
.mg-chest-num b { color: #ffe890; font-size: 24px; font-weight: 900; text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,208,96,0.4); }
.mg-chest-num { font-size: 16px; color: #f0e4b8; font-weight: 700; }
.mg-chest-sub { font-size: 12px; color: #d8c898; margin-top: 4px; font-weight: 600; }
.mg-chest-actions { display: flex; gap: 8px; align-items: stretch; }
.mg-donate-input {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #ffd890;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
.mg-chest-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mg-preset-btn {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(184,120,8,0.4);
  color: #c8a060;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.mg-preset-btn:hover { border-color: #ffd060; color: #ffd890; }

.mg-btn {
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  border: 1.5px solid;
  letter-spacing: 0.4px;
}
.mg-btn-donate    { background: linear-gradient(180deg, #80c860, #408030); color: #fff; border-color: #408030; }
.mg-btn-withdraw  { background: linear-gradient(180deg, #4a3a8a, #2a204a); color: #c8c0ff; border-color: #4a3a8a; }
.mg-btn-collect   { background: linear-gradient(180deg, #ffd060, #c89030); color: #1a0a04; border-color: #c89030; }
.mg-btn-remove    { background: linear-gradient(180deg, #5a3018, #2a1808); color: #c87060; border-color: #6a3018; }
.mg-btn-leave     { background: linear-gradient(180deg, #c83030, #802020); color: #fff; border-color: #802020; margin-top: 12px; }

.mg-perceptor {
  background: linear-gradient(135deg, rgba(60,42,20,0.6), rgba(20,14,8,0.85));
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.mgp-header { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.mgp-ic { font-size: 22px; }
.mgp-zone { font-size: 14px; font-weight: 900; color: #ffd890; }
.mgp-meta { font-size: 10px; color: #8a7858; }
.mgp-hp b { color: #80f898; font-weight: 900; }
.mgp-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mgp-acc span { font-size: 11.5px; color: #c8b890; }
.mgp-acc b { color: #ffd060; }
.mgp-acc .mg-btn { margin-left: auto; }

.mg-deploy-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.mg-deploy-btn {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  color: #ffd890;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column;
}
.mg-deploy-btn:hover:not(:disabled) {
  border-color: #ffd060;
  background: linear-gradient(180deg, #5a3a20, #2a1808);
}
.mg-deploy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mg-deploy-btn small { color: #8a7858; font-size: 10px; font-weight: 700; }
/* v163 — Bouton percepteur sur la zone de farm */
.fzd-perc-btn {
  background: linear-gradient(180deg, #6040a0, #2c1c54);
  border: 1.5px solid #c080ff;
  color: #f0d0ff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(160,80,255,0.25);
}
.fzd-perc-btn:hover { border-color: #ffd060; background: linear-gradient(180deg, #7050b8, #3c2068); }
/* v163 — Liste publique des guildes (mode "demander à rejoindre") */
.guild-list-section {
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 10px;
}
.gls-title { font-size: 14px; font-weight: 900; color: #ffd060; margin-bottom: 10px; }
.gls-list { display: flex; flex-direction: column; gap: 6px; }
.gls-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(60,42,20,0.4), rgba(20,14,8,0.6));
  border: 1px solid rgba(184,120,8,0.3);
  border-radius: 8px;
}
.gls-emblem { font-size: 24px; flex: 0 0 32px; text-align: center; }
.gls-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gls-name { font-weight: 900; color: #ffe890; font-size: 13.5px; }
.gls-info small { font-size: 11px; color: #a89878; }
.gls-req-btn {
  background: linear-gradient(180deg, #80c850, #406818);
  border: 1.5px solid #80f898;
  color: #fff;
  padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.gls-req-btn:hover:not(:disabled) { background: linear-gradient(180deg, #98e870, #58883c); border-color: #b0ffb0; }
.gls-req-btn.pending { background: linear-gradient(180deg, #806820, #403410); border-color: #ffd060; color: #ffe890; }
.gls-req-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* v163 — Item detail panel premium (sous le paperdoll) */
.item-detail-box.premium {
  background: linear-gradient(160deg, rgba(48,32,16,0.95), rgba(20,12,6,0.98));
  border: 2px solid rgba(255,200,80,0.5);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,80,0.15);
}
.item-detail-box.premium .idb-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid rgba(184,120,8,0.35);
  margin-bottom: 10px;
}
.idb-img-wrap {
  width: 72px; height: 72px;
  background: radial-gradient(circle at 30% 30%, #6a4a20, #2a1808);
  border: 2.5px solid #c89030;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(255,200,80,0.25);
}
.idb-img { width: 56px !important; height: 56px !important; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); }
.idb-titles { flex: 1; min-width: 0; }
.idb-name { font-size: 16px; font-weight: 900; color: #ffe890; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.idb-level { font-size: 12px; color: #ffd060; font-weight: 800; margin-top: 2px; }
.idb-cat { font-size: 10.5px; color: #a89878; text-transform: uppercase; letter-spacing: 1px; margin-top: 1px; }
.idb-desc {
  font-size: 12px; color: #c8a878; font-style: italic;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  margin-bottom: 10px; line-height: 1.4;
}
.idb-effs-title { font-size: 11px; color: #ffd060; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.idb-effs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.idb-eff {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  background: linear-gradient(90deg, rgba(80,160,60,0.12), rgba(20,40,16,0.4));
  border-left: 3px solid #80c850;
  border-radius: 4px;
  font-size: 12.5px; font-weight: 700;
  color: #d8f0c0;
}
.idb-eff.neg { background: linear-gradient(90deg, rgba(180,40,40,0.15), rgba(40,12,12,0.4)); border-left-color: #ff6060; color: #ffb0a0; }
/* v229 — Aligné sur les icônes des infobulles catalogue (itip-eff-ic = 14px) */
.idb-eff-ic { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); transform: none !important; }
.idb-eff-bullet { font-size: 12px; color: #ffd060; flex-shrink: 0; width: 14px; text-align: center; }
/* Force aussi toute img imbriquée dans .ied-eff/.idb-eff (tooltips équipement) à 14px max */
.ied-eff img, .idb-eff img { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; transform: none !important; flex-shrink: 0; }
/* v231 — Catch-all : toute image dans n'importe quelle tooltip (pd-tooltip, ied, idb, itip) ≤ 14px.
   Override les anciennes règles 16/18/22px qui régressaient avec spécificité plus haute. */
.pd-tooltip img, .pd-tooltip .pd-tt-eff-ic,
.pd-tt-effs img, .pd-tt-eff img,
.ied-effs img, .ied-effs .idb-eff-ic,
.idb-effs img, .itip-effs img {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  transform: none !important;
  object-fit: contain !important;
}

/* v235 — NUCLEAR : toute <img> pointant sur assets/stats/ est cappée à 16px partout.
   Exceptions explicites : badges spécifiques (dr-stat-mini-ic = 16px ok, ic-kama = inline). */
img[src*="assets/stats/"]:not(.dr-stat-mini-ic):not(.ic-kama):not(.ic-kama-lg):not(.cc-stat-icon):not(.amf-stat-ic) {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  transform: none !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* v164 — Légende auras de fusion (collapsible) */
.aura-legend {
  margin-top: 12px;
  background: linear-gradient(160deg, rgba(40,30,50,0.85), rgba(20,14,24,0.95));
  border: 1.5px solid rgba(180,140,220,0.4);
  border-radius: 10px;
  padding: 10px 14px;
}
.aura-legend summary {
  cursor: pointer; font-weight: 900; color: #e8c8ff;
  font-size: 13px;
  padding: 4px 0;
  list-style: none;
}
.aura-legend summary::-webkit-details-marker { display: none; }
.aura-legend summary::before { content: '▶ '; color: #c08aff; font-size: 10px; margin-right: 4px; transition: transform 0.2s; display: inline-block; }
.aura-legend[open] summary::before { transform: rotate(90deg); }
.aura-legend-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(180,140,220,0.25); margin-top: 6px; }
.aura-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #d8c8e8; line-height: 1.4; }
.aura-row b { color: #ffd060; }
.aura-chip {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 5px;
  font-weight: 900; font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.aura-white-chip { background: linear-gradient(180deg, #f0f0f0, #b8b8b8); color: #1a1408; box-shadow: 0 0 8px rgba(255,255,255,0.4); }
.aura-gold-chip { background: linear-gradient(180deg, #ffd060, #c89030); color: #1a1408; box-shadow: 0 0 10px rgba(255,200,80,0.5); }

/* v175 — Badge pods/unité sur chaque item (inventaire + banque) */
.item-pods, .dr-cat-pods {
  position: absolute;
  bottom: 2px; left: 2px;
  font-size: 9px; font-weight: 800;
  color: #c8a060;
  background: rgba(0,0,0,0.7);
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1;
}

/* v172 — Classement des guildes */
.guild-leaderboard { padding: 16px; }
.guild-leaderboard .glb-title {
  font-size: 16px; font-weight: 900; color: #ffd060;
  margin-bottom: 10px; letter-spacing: 0.5px;
}
.glb-list { display: flex; flex-direction: column; gap: 4px; }
.glb-row {
  display: grid;
  grid-template-columns: 50px 1fr 90px 90px 110px 110px;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(60,42,20,0.5), rgba(20,14,8,0.7));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 6px;
  font-size: 12.5px; color: #d8c898;
}
.glb-row.glb-head {
  background: rgba(255,200,80,0.12);
  font-size: 11px; font-weight: 900; color: #ffd060; text-transform: uppercase; letter-spacing: 0.6px;
}
.glb-row .glb-rk { font-weight: 900; font-size: 16px; color: #ffd060; text-align: center; }
.glb-row .glb-name b { color: #ffe890; font-size: 13px; }
.glb-row .glb-lvl b { color: #80f8a0; }
.glb-row:not(.glb-head):hover { background: linear-gradient(90deg, rgba(80,60,30,0.7), rgba(30,20,12,0.9)); border-color: #c89030; }
/* v170 — Bonus stats dans la fiche détail d'un sort de buff */
.spx-buff-ic { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.spx-buff-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
.spx-buff-list li { padding: 5px 8px; background: rgba(0,0,0,0.3); border-radius: 4px; font-size: 12px; color: #d8c898; }
.fzd-perc-btn.placed { background: linear-gradient(180deg, #408060, #1c4030); border-color: #80f8a0; color: #d8ffd8; }
.fzd-perc-btn.placed:hover { background: linear-gradient(180deg, #c04030, #601810); border-color: #ff8080; }
/* v163 — Bandeau points de boost percepteur */
.pcb-boost-bar {
  background: linear-gradient(135deg, rgba(60,180,120,0.18), rgba(20,60,40,0.4));
  border: 1.5px solid rgba(80,200,160,0.5);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0 4px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; font-weight: 800;
  color: #d8f0e0;
}
.pcb-slots-row { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; flex-wrap: wrap; }
.pcb-buy-slot { background: linear-gradient(180deg, #6040a0, #2c1c54) !important; border-color: #c080ff !important; color: #f0d0ff !important; padding: 8px 14px !important; }
.pcb-buy-slot:disabled { opacity: 0.4; cursor: not-allowed; }
/* v160 — Donjons : carte avec liste des salles (chaque salle = un spot percepteur) */
.mg-deploy-dungeon {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(60,32,80,0.35), rgba(20,12,30,0.55));
  border: 1.5px solid rgba(180,120,200,0.45);
  border-radius: 8px;
  padding: 8px 10px;
}
.mg-deploy-dungeon .mgdd-head { font-weight: 900; color: #e0a8ff; font-size: 13px; margin-bottom: 6px; }
.mg-deploy-dungeon .mgdd-head small { color: #a888c8; margin-left: 6px; font-size: 10.5px; }
.mg-deploy-dungeon .mgdd-rooms {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px;
}
.mg-deploy-btn.dungeon-room {
  background: linear-gradient(180deg, #2a1838, #14081f);
  border-color: rgba(180,120,200,0.35);
  color: #e8c0ff;
  padding: 6px 9px;
  font-size: 11.5px;
}
.mg-deploy-btn.dungeon-room:hover:not(:disabled) {
  border-color: #e0a8ff;
  background: linear-gradient(180deg, #4a2858, #28184a);
}

.mg-empty {
  text-align: center;
  padding: 30px 20px;
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(184,120,8,0.3);
  border-radius: 10px;
  color: #8a7858;
}
.mge-ic { font-size: 40px; margin-bottom: 10px; opacity: 0.6; }

/* v126.24 — Modale Améliorer Percepteur (Dofus Retro) */
.pcb-section-title {
  font-size: 13px; font-weight: 900; letter-spacing: 1.5px;
  color: #ffd060; text-transform: uppercase;
  margin: 14px 0 8px;
  background: linear-gradient(90deg, rgba(184,120,8,0.3), transparent);
  padding: 8px 12px;
  border-left: 4px solid #ffd060;
  display: flex; align-items: center; gap: 10px;
}
.pcb-section-title b { color: #ffe890; font-size: 14px; }
.pcb-reset-btn {
  margin-left: auto;
  background: rgba(0,0,0,0.4); border: 1px solid #6a4818;
  color: #c87060; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.pcb-reset-btn:hover { background: rgba(200,48,48,0.2); color: #fff; }
.pcb-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px; margin-bottom: 10px;
}
.pcb-stat-row {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(20,14,8,0.3));
  border: 1.5px solid #4a3a1a;
  border-left: 4px solid var(--sc, #ffd060);
  border-radius: 6px;
  padding: 8px 12px;
}
.pcb-stat-ic { font-size: 18px; flex-shrink: 0; }
.pcb-stat-info { flex: 1; display: flex; flex-direction: column; }
.pcb-stat-name { font-size: 12px; font-weight: 800; color: var(--sc, #ffe890); }
.pcb-stat-val { font-size: 11px; color: #d8c898; font-weight: 700; }
.pcb-stat-val b { color: #ffe890; font-size: 14px; }
.pcb-stat-val small { color: #a89878; font-weight: 600; font-size: 10px; }
.pcb-add-btn {
  background: linear-gradient(180deg, #80c850, #408020);
  color: #fff; border: 1px solid #40c060;
  padding: 6px 12px; border-radius: 5px;
  font-weight: 900; font-size: 12px; cursor: pointer;
}
.pcb-add-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(64,224,96,0.4); }
.pcb-add-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.pcb-spells-list { display: flex; flex-direction: column; gap: 6px; }
.pcb-spell-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid #4a3a1a;
  border-radius: 6px;
  padding: 10px 14px;
}
.pcb-spell-name { flex: 1; font-size: 13px; color: #f0e4b8; }
.pcb-spell-name b { color: #ffe890; font-weight: 900; }
.pcb-spell-name small { color: #a89878; font-weight: 600; font-size: 11px; }
.pcb-spell-lv { font-size: 12px; font-weight: 800; color: #ffd060; }

/* v126.24 — Membres guilde refonte flex propre */
.mg-member {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(184,120,8,0.2) !important;
  background: linear-gradient(90deg, rgba(60,42,20,0.3), rgba(20,14,8,0.4));
  border-radius: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
/* v158 — Panneau réglages membre (déplié) */
.mg-member-settings {
  flex: 1 1 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20,14,8,0.7), rgba(10,6,4,0.85));
  border: 1px solid rgba(184,120,8,0.35);
  border-radius: 6px;
}
.mg-member-settings .mgms-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.mg-member-settings .mgms-label { font-size: 12px; color: #d8c898; min-width: 180px; }
.mg-member-settings .mgms-slider { flex: 1 1 auto; max-width: 320px; accent-color: #ffd060; }
/* v161 — Input numérique XP sans flèches (cross-browser) */
.mg-member-settings .mgms-xp-input {
  width: 90px; padding: 6px 10px;
  background: linear-gradient(180deg, #2a1c10, #14080a);
  border: 1.5px solid rgba(184,120,8,0.5);
  border-radius: 6px;
  color: #ffd890;
  font-size: 14px; font-weight: 900;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mg-member-settings .mgms-xp-input::-webkit-outer-spin-button,
.mg-member-settings .mgms-xp-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mg-member-settings .mgms-xp-input:focus { border-color: #ffd060; outline: none; }
.mg-member-settings .mgms-perm {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #ffe890; cursor: pointer;
}
.mg-member-settings .mgms-perm input { accent-color: #80c850; }
.mg-member:last-child { border-bottom: none; }
.mgm-rank {
  font-size: 18px; text-align: center;
  flex: 0 0 32px; min-width: 32px;
}
.mgm-avatar {
  flex: 0 0 32px;
  width: 32px !important; height: 32px !important;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid #6a4818;
}
.mgm-pseudo {
  flex: 1 1 auto;
  font-weight: 900;
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgm-stats {
  display: flex; gap: 10px;
  font-size: 11px; color: #c8a060; font-weight: 700;
  flex: 0 0 auto;
}
.mgm-kick {
  flex: 0 0 auto;
}

.mg-set-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(184,120,8,0.18);
}
.mg-set-row:last-child { border-bottom: none; }
.mg-set-label { color: #c8a060; font-weight: 800; letter-spacing: 0.3px; }
.mg-set-val   { color: #ffd890; font-weight: 700; }
.mg-danger-zone h3 { color: #c87060; font-size: 14px; margin: 0 0 12px; letter-spacing: 1px; }
.mg-set-warn { font-size: 11px; color: #8a7858; margin-top: 8px; font-style: italic; }

/* ── Bureau pools tier ─────────────────────────────── */
.bmi-pool {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(184,120,8,0.2);
}
.bmi-pool:last-child { border-bottom: none; }
.bmi-pool-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-right: 6px;
  width: 100%;
  margin-bottom: 4px;
}
.bmi-pool.common .bmi-pool-label  { color: #80d860; }
.bmi-pool.rare   .bmi-pool-label  { color: #80a8e8; }
.bmi-pool.epic   .bmi-pool-label  { color: #d090ff; }
.bmi-loot-pill.common { border-color: rgba(128,200,96,0.5) !important; }
.bmi-loot-pill.rare   { border-color: rgba(128,168,232,0.55) !important; color: #c0d8ff; }
.bmi-loot-pill.epic   { border-color: rgba(208,144,255,0.6) !important; color: #e8c8ff; box-shadow: 0 0 8px rgba(208,144,255,0.3); }
.bmi-bonus-line {
  margin-top: 8px;
  font-size: 11.5px;
  color: #ffd060;
  font-weight: 800;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,200,80,0.4);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-block;
}
.bmi-loot-pill small {
  font-size: 9px;
  color: #c89030;
  margin-left: 4px;
  font-weight: 700;
}
.bmi-pool-label small { color: #8a7858; font-weight: 600; font-size: 9.5px; letter-spacing: 0; text-transform: none; }
.bmi-more {
  font-size: 10.5px;
  color: #8a7858;
  font-style: italic;
  align-self: center;
}

/* ════════════════════════════════════════════════════════
   v85 — Header lisibilité forte
   ════════════════════════════════════════════════════════ */
.dash-res {
  padding: 7px 14px !important;
  background: linear-gradient(180deg, rgba(40,28,16,0.85), rgba(20,14,8,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.5) !important;
  border-radius: 8px !important;
  gap: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,200,80,0.08);
}
.dash-res-icon {
  font-size: 18px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)) !important;
}
.dash-res-val {
  font-size: 15px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #fff0a0 0%, #ffd060 60%, #c89030 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.dash-res-lbl {
  font-size: 9.5px !important;
  color: #c8a060 !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}
/* Pseudo / portrait header */
.dash-pseudo { font-size: 14px !important; color: #ffd890 !important; font-weight: 900 !important; letter-spacing: 0.5px; }
.dash-server-name { font-size: 11px !important; color: #c8a060 !important; font-weight: 700 !important; }
.dash-logo-main { font-size: 16px !important; letter-spacing: 2px !important; font-weight: 900 !important; }

/* ════════════════════════════════════════════════════════
   v84 — Multi-select lasso + boucle donjon visuel
   ════════════════════════════════════════════════════════ */

.bank-multi-bar, .inv-select-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(60,42,20,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid #ffd060;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 0 14px rgba(255,200,80,0.3);
}
.bank-multi-bar b { color: #ffd060; font-weight: 900; font-size: 14px; }
.bank-multi-bar small { color: #8a7858; font-size: 10.5px; margin-left: auto; font-style: italic; }
.bank-multi-hint {
  font-size: 13px;
  color: #f0e4b8;
  background: linear-gradient(135deg, rgba(184,120,8,0.25), rgba(60,40,16,0.4));
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 4px solid #ffd060;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bank-multi-hint b { color: #ffe890; font-weight: 900; }

/* Visuel slot sélectionné renforcé */
.dr-cat-slot.selected, .inv-slot.selected {
  border-color: #ffd060 !important;
  box-shadow: 0 0 14px rgba(255,200,80,0.6), inset 0 0 8px rgba(255,200,80,0.2) !important;
  background: linear-gradient(135deg, rgba(255,200,80,0.18), rgba(60,42,20,0.92)) !important;
  animation: selPulse 1.2s ease-in-out infinite;
}
@keyframes selPulse {
  0%,100% { box-shadow: 0 0 14px rgba(255,200,80,0.5); }
  50%     { box-shadow: 0 0 20px rgba(255,200,80,0.8); }
}

/* Sélecteur chain donjon : meilleur visuel */
.fs-chain-select option[value="-1"] {
  color: #d090ff;
  font-weight: 900;
}

/* Bureau : icons pool ─────────────────────────────────── */
.bmi-loot-icons { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.bmi-icon-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  background: linear-gradient(135deg, rgba(46,32,18,0.85), rgba(20,14,8,0.95));
  border: 1.5px solid rgba(184,120,8,0.45);
  border-radius: 6px;
  cursor: default;
  transition: transform 0.12s, border-color 0.12s;
  overflow: visible;
}
/* Tooltip CSS instantanée (utilise data-tip au lieu de title) */
.bmi-icon-pill::after { content: none !important; }
.bmi-icon-pill::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(180deg, #2a1f10, #1a1408);
  border: 1.5px solid #ffd060;
  color: #ffd890;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
  z-index: 100;
}
.bmi-icon-pill:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bmi-icon-pill:hover {
  transform: scale(1.18);
  border-color: #ffd060;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
.bmi-icon-pill img { width: 38px; height: 38px; object-fit: contain; }
.bmi-icon-pill.common { border-color: rgba(128,200,96,0.5); }
.bmi-icon-pill.rare   { border-color: rgba(128,168,232,0.55); }
.bmi-icon-pill.epic   { border-color: rgba(208,144,255,0.6); box-shadow: 0 0 6px rgba(208,144,255,0.25); }
.bmi-icon-pill .bmi-loot-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; background: rgba(184,120,8,0.2); border-radius: 4px;
  color: #ffd060; font-weight: 900; font-size: 12px;
}

/* Inventaire : aide paperdoll ──────────────────────────── */
.dr-pd-help {
  background: linear-gradient(135deg, rgba(60,42,20,0.55), rgba(20,14,8,0.85));
  border: 1px dashed rgba(255,200,80,0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: #c8b890;
  margin-bottom: 12px;
  line-height: 1.5;
}
.dr-pd-help b { color: #ffd060; font-weight: 800; }

/* ════════════════════════════════════════════════════════
   v86 — Aura portrait (buff cosmétique)
   ════════════════════════════════════════════════════════ */
body.has-aura .ccd-portrait,
body.has-aura .dr-hero-portrait,
body.has-aura .pc-avatar,
body.has-aura .fs-portrait,
body.has-aura .bur-portrait {
  position: relative;
  animation: auraPulse 2.5s ease-in-out infinite;
}
body.has-aura .ccd-portrait::after,
body.has-aura .dr-hero-portrait::after,
body.has-aura .fs-portrait::after,
body.has-aura .bur-portrait::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd060, #d090ff, #80a8e8, #80f898, #ffd060);
  -webkit-mask: radial-gradient(circle, transparent 56%, black 60%);
          mask: radial-gradient(circle, transparent 56%, black 60%);
  animation: auraSpin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes auraPulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,200,80,0.5)); }
  50%     { filter: drop-shadow(0 0 18px rgba(208,144,255,0.7)); }
}
@keyframes auraSpin { to { transform: rotate(360deg); } }

/* Overload card (pods 300%+) */
.fs-card.overloaded { border-color: #c83030 !important; box-shadow: 0 0 14px rgba(200,48,48,0.4); }
.fs-overload {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(200,48,48,0.18);
  border: 1px solid rgba(200,48,48,0.5);
  border-radius: 6px;
  font-size: 11px;
  color: #ffb0a0;
  font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fs-overload b { color: #ff8060; }
.fs-overload-btn {
  margin-left: auto;
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border: 1.5px solid #c89030;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.fs-overload-btn:hover { box-shadow: 0 0 10px rgba(255,200,80,0.6); }

/* Sidebar overload chip — pulse rouge */
.ccd-chip.overload {
  background: linear-gradient(180deg, #c83030, #802020) !important;
  color: #fff !important;
  border: 1.5px solid #ff5050 !important;
  font-weight: 900;
  cursor: pointer;
  animation: chipOverloadPulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(200,48,48,0.6);
}
.ccd-chip.overload:hover { background: linear-gradient(180deg, #ff5050, #c83030) !important; }
@keyframes chipOverloadPulse {
  0%,100% { box-shadow: 0 0 12px rgba(200,48,48,0.5); }
  50%     { box-shadow: 0 0 20px rgba(255,80,80,0.85); }
}

/* ════════════════════════════════════════════════════════
   v88 — Bureau visual polish (loots tiers cards)
   ════════════════════════════════════════════════════════ */
.bmi-pool {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border-bottom: 1px solid rgba(184,120,8,0.18) !important;
  margin-bottom: 6px;
}
.bmi-pool.common {
  background: linear-gradient(135deg, rgba(40,80,30,0.35), rgba(20,40,15,0.6));
  border: 1.5px solid rgba(128,200,96,0.4) !important;
}
.bmi-pool.rare {
  background: linear-gradient(135deg, rgba(40,60,100,0.35), rgba(15,30,60,0.6));
  border: 1.5px solid rgba(128,168,232,0.45) !important;
}
.bmi-pool.epic {
  background: linear-gradient(135deg, rgba(80,40,120,0.35), rgba(40,20,60,0.6));
  border: 1.5px solid rgba(208,144,255,0.5) !important;
  box-shadow: 0 0 12px rgba(208,144,255,0.2);
}
.bmi-pool-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}
.bmi-pool.common .bmi-pool-label { color: #80f898; }
.bmi-pool.rare   .bmi-pool-label { color: #80a8e8; }
.bmi-pool.epic   .bmi-pool-label { color: #d090ff; }
.bmi-pool-label small {
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  opacity: 0.7;
  margin-left: 4px;
}
.bmi-loot-icons { gap: 6px !important; }

/* ════════════════════════════════════════════════════════
   v90 — Bank gap + qty visible + inventaire overload
   ════════════════════════════════════════════════════════ */
.bank-grid {
  gap: 4px !important;
  padding: 4px !important;
}
.bank-grid .inv-slot {
  margin: 0 !important;
}
/* Qty pill plus lisible : background semi-opaque, padding clair */
.bank-grid .inv-slot .item-qty,
.dr-cat-qty {
  bottom: 2px !important;
  right: 2px !important;
  background: rgba(0,0,0,0.92) !important;
  color: #ffd060 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,200,80,0.7) !important;
  text-shadow: none !important;
  line-height: 1 !important;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* Overload bandeau dans la page inventaire */
.inv-overload-banner {
  background: linear-gradient(135deg, rgba(200,48,48,0.25), rgba(80,20,20,0.6));
  border: 2px solid #c83030;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 14px 0;
  color: #ffd0a0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 0 16px rgba(200,48,48,0.4);
  animation: overloadPulse 1.6s ease-in-out infinite;
}
@keyframes overloadPulse {
  0%,100% { box-shadow: 0 0 16px rgba(200,48,48,0.4); }
  50%     { box-shadow: 0 0 28px rgba(255,80,80,0.7); }
}
.inv-overload-banner b { color: #ff8060; font-weight: 900; }
.inv-overload-banner small { width:100%; color: #c8a060; font-size: 11px; font-style: italic; }
.inv-overload-btn {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border: 1.5px solid #c89030;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.inv-overload-btn:hover { box-shadow: 0 0 14px rgba(255,200,80,0.6); }

/* Boutique : badge "Acheté" grisé + scope label */
.shop-offer.owned {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.shop-offer.owned::after {
  content: '✓ ACHETÉ';
  position: absolute;
  top: 6px; right: 6px;
  background: linear-gradient(180deg, #80f898, #40c860);
  color: #0a2010;
  font-size: 9px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 1px;
  z-index: 2;
}
.shop-offer-scope {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(184,120,8,0.5);
}
.shop-offer-scope.compte { color: #80a8e8; border-color: rgba(128,168,232,0.6); }
.shop-offer-scope.perso  { color: #ffd060; border-color: rgba(255,200,80,0.6); }
.shop-offer-scope.tempo  { color: #d090ff; border-color: rgba(208,144,255,0.6); }
.shop-offer-scope.oneshot{ color: #80f898; border-color: rgba(128,248,152,0.6); }

/* ════════════════════════════════════════════════════════
   v91 — Chat clignote sur unread + kamas label "partagés"
   ════════════════════════════════════════════════════════ */

/* Chat collapsé + nouveaux messages → border et background pulse */
.live-chat.has-unread.collapsed {
  animation: chatUnreadPulse 1.2s ease-in-out infinite;
  border-color: #ffd060 !important;
}
@keyframes chatUnreadPulse {
  0%,100% { box-shadow: 0 -4px 20px rgba(0,0,0,0.6), 0 0 14px rgba(255,200,80,0.45); }
  50%     { box-shadow: 0 -4px 20px rgba(0,0,0,0.6), 0 0 28px rgba(255,200,80,0.85); }
}
.live-chat.has-unread.collapsed .live-chat-head {
  background: linear-gradient(180deg, #5a3a18 0%, #2a1f10 100%) !important;
  color: #ffd060;
  font-weight: 900;
}
/* Badge unread count */
.lc-unread-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 8px;
  background: linear-gradient(180deg, #ff5050, #c83030);
  color: #fff;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
  border: 1.5px solid #fff;
  box-shadow: 0 0 8px rgba(255,80,80,0.7);
  animation: badgePulse 1s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}

/* Label kamas/runes partagés */
.dash-res-shared {
  font-size: 8px !important;
  color: #80a8e8 !important;
  letter-spacing: 0.5px !important;
  margin-left: 4px;
  text-transform: none !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════
   v92 — Inventaire qty plus petit + bureau/quests/donjons polish
   ════════════════════════════════════════════════════════ */

/* Pill qty inventaire/banque : compact, sans masquer la case */
.dr-cat-qty,
.bank-grid .inv-slot .item-qty {
  bottom: 1px !important;
  right: 1px !important;
  background: rgba(0,0,0,0.92) !important;
  color: #ffd060 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255,200,80,0.6) !important;
  text-shadow: none !important;
  line-height: 1 !important;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  max-width: 80% !important;
  overflow: hidden;
}

/* ── Bureau missions cards : visuel premium ───────────── */
.bur-char {
  border-radius: 14px !important;
  padding: 16px 18px !important;
  background: linear-gradient(160deg, rgba(60,42,20,0.85), rgba(20,14,8,0.96)) !important;
  border-width: 2px !important;
}
.bur-section-title {
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 4px;
  border-left: 2px solid #ffd060;
  display: inline-block;
}
.bur-mission-info {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(28,18,8,0.85), rgba(14,8,4,0.95)) !important;
  border: 1.5px solid rgba(184,120,8,0.4) !important;
}

/* ── Quests cards visual polish ───────────────────────── */
.quest-card {
  background: linear-gradient(160deg, rgba(50,36,20,0.88), rgba(20,14,8,0.96)) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  border-width: 2px !important;
}
.quest-card.done {
  background: linear-gradient(160deg, rgba(70,52,20,0.95), rgba(30,20,8,0.98)) !important;
  border-color: #ffd060 !important;
}
.quest-card.claimed {
  background: linear-gradient(160deg, rgba(40,60,30,0.6), rgba(20,30,15,0.85)) !important;
  border-color: rgba(128,200,96,0.5) !important;
}
.quest-head {
  margin-bottom: 4px !important;
}
.quest-type-pill {
  font-size: 10px !important;
  padding: 4px 9px !important;
  border-radius: 12px !important;
  letter-spacing: 0.8px !important;
}
.quest-label {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #ffd890 !important;
  letter-spacing: 0.3px;
}
.quest-progress { gap: 10px !important; }
.qp-bar {
  height: 11px !important;
  border-width: 1.5px !important;
}
.qp-text {
  font-size: 11px !important;
  letter-spacing: 0.3px;
}
.quest-rewards {
  margin-top: 4px !important;
  padding-top: 8px;
  border-top: 1px solid rgba(184,120,8,0.2);
}
.qrw {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-weight: 800;
}
.qa-btn.primary {
  font-size: 13px !important;
  padding: 9px 18px !important;
  letter-spacing: 0.5px;
}

/* ── Donjons : plus complet + premium ─────────────────── */
.fzd-title {
  font-size: 18px !important;
  letter-spacing: 1.5px !important;
  background: linear-gradient(135deg, #fff0a0, #ffd060) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.fz-dungeon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #c83030, #802020);
  color: #fff;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  border: 1.5px solid #ff5050;
  box-shadow: 0 0 10px rgba(200,48,48,0.4);
}
/* Cartes des salles (rooms) — affichage prévue */
.fzd-rooms-list {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: rgba(0,0,0,0.35);
  padding: 12px 14px;
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 10px;
  margin: 12px 0;
}
.fzd-rooms-title {
  width: 100%;
  font-size: 11px; color: #ffd060;
  font-weight: 900; letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(184,120,8,0.3);
}
.fzd-room {
  background: linear-gradient(180deg, #3a2a18, #1a1408);
  border: 1.5px solid rgba(184,120,8,0.4);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #ffd890;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 80px;
}
.fzd-room.boss {
  background: linear-gradient(180deg, #6a2018, #2a0808);
  border-color: #ff5050;
  color: #ffd0a0;
  box-shadow: 0 0 10px rgba(255,80,80,0.3);
}
.fzd-room small {
  font-size: 9px;
  color: #c8a060;
  font-weight: 700;
  margin-left: auto;
}
.fzd-room.boss small { color: #ffaa50; }

/* Info-bullet style sur l'almanax offrande */
.almx-hero-tribute {
  cursor: help;
  position: relative;
}
.almx-hero-tribute::after {
  content: 'ℹ';
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,200,80,0.5);
  color: #ffd060;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  margin-left: 4px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════
   v93 — Perks header indicator + kamas shared emphasis
   ════════════════════════════════════════════════════════ */
.dash-res-perks {
  background: linear-gradient(180deg, rgba(208,144,255,0.18), rgba(40,20,60,0.85)) !important;
  border-color: rgba(208,144,255,0.55) !important;
  cursor: help;
}
.dash-res-perks .dash-res-val {
  background: linear-gradient(180deg, #f0c0ff 0%, #d090ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dash-res-perks:hover {
  border-color: #d090ff !important;
  box-shadow: 0 0 12px rgba(208,144,255,0.4);
}

/* Kamas/Runes : effet "shared" plus visible */
.dash-res[title*="partagés"] {
  position: relative;
}
.dash-res[title*="partagés"]::before {
  content: '🌐';
  position: absolute;
  top: -2px; right: -2px;
  font-size: 9px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(128,168,232,0.6);
  border-radius: 50%;
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ════ v95 — Selection outline renforcé + Slider seuil PV in-card ════ */
.char-card.active {
  border-color: #ffcc44 !important;
  border-width: 2.5px !important;
  box-shadow:
    -4px 0 0 #ffcc44,
    0 0 0 1px rgba(255,204,68,0.6),
    0 0 22px rgba(255,180,30,0.45),
    0 4px 18px rgba(184,120,8,0.4) !important;
  background: linear-gradient(180deg, #3a2a18 0%, #1d1408 100%) !important;
}
.char-card.active::before {
  content: '▶';
  position: absolute;
  top: 50%; left: -14px;
  transform: translateY(-50%);
  color: #ffcc44;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255,204,68,0.9);
  z-index: 5;
  pointer-events: none;
  animation: char-active-pulse 1.6s ease-in-out infinite;
}
@keyframes char-active-pulse {
  0%, 100% { opacity: 0.7; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;   transform: translateY(-50%) translateX(2px); }
}

/* Slider seuil PV intégré à la carte perso active */
.ccd-thresh {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 8px;
  border-top: 1px dashed rgba(255,204,68,0.25);
  background: rgba(255,204,68,0.06);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: #f0c870;
}
.ccd-thresh-lbl { white-space: nowrap; opacity: 0.85; }
.ccd-thresh-slider {
  flex: 1; height: 4px; cursor: pointer;
  accent-color: #ffcc44;
}
.ccd-thresh-val {
  min-width: 36px; text-align: right;
  color: #ffd870; font-weight: 800;
  background: rgba(0,0,0,0.3);
  padding: 1px 6px; border-radius: 3px;
}

/* Group — seuil PV groupe (panneau création/édition) */
.grp-thresh-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 10px;
  background: rgba(255,204,68,0.08);
  border: 1px dashed rgba(255,204,68,0.3);
  border-radius: 4px;
  font-size: 11px; color: #f0c870;
}
.grp-thresh-row input[type=range] { flex: 1; accent-color: #ffcc44; }
.grp-thresh-row .grp-thresh-val {
  min-width: 40px; text-align: right; font-weight: 800; color: #ffd870;
}

/* ════ v96 — Better "no image" fallback (au lieu d'un "?" moche) ════ */
.fdrop-no-img,
.hdv-no-img,
.cl-loot-noimg,
.cl-chip-noimg {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4a3818 0%, #2a1f0e 100%);
  color: #d4a050;
  font-weight: 700;
  border: 1px solid #5a4218;
  border-radius: 4px;
  width: 100%; height: 100%;
  min-width: 24px; min-height: 24px;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ════════════════════════════════════════════════════════
   v98 — Inventaire & masquage arène + modale détail équipé
   ════════════════════════════════════════════════════════ */

/* 1. Cacher l'arène combat sur les pages où on a besoin de place */
body.panel-inventory .dash-combat-row,
body.panel-equipment .dash-combat-row,
body.panel-spells .dash-combat-row,
body.panel-stats .dash-combat-row,
body.panel-bank .dash-combat-row,
body.panel-jobs .dash-combat-row {
  display: none !important;
}
body.panel-inventory .dash-history-strip,
body.panel-spells .dash-history-strip {
  display: none !important;
}

/* 2. Badge quantité — forcer un chip discret en bas-droite */
.inv-slot .item-qty,
.inv-slot .inv-qty,
.inv-slot [class*="qty"] {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important; top: auto !important;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border: none;
  border-top-left-radius: 5px;
  border-radius: 0 0 4px 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
  min-width: 0; min-height: 0;
  width: auto !important; height: auto !important;
  max-height: 16px;
  align-self: flex-end !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  letter-spacing: 0.2px;
}

/* 3. Modale détail objet équipé */
.ied-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: ied-fade 0.18s ease;
}
@keyframes ied-fade { from { opacity: 0; } to { opacity: 1; } }
.ied-box {
  background: linear-gradient(180deg, #2a2014 0%, #15100a 100%);
  border: 2px solid #c89030;
  border-radius: 10px;
  padding: 16px 20px;
  min-width: 380px; max-width: 560px; width: 90%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(255,180,30,0.15);
  color: #f0d8a8;
}
.ied-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(200,144,48,0.3); }
.ied-img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; background: rgba(0,0,0,0.3); border-radius: 6px; padding: 4px; }
.ied-titles { flex: 1; }
.ied-name { font-size: 16px; font-weight: 800; color: #ffd870; }
.ied-meta { font-size: 11px; color: #9a8a6a; margin-top: 2px; }
.ied-close { background: transparent; border: 1px solid #4a3a1a; color: #c89030; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.ied-close:hover { background: rgba(200,80,80,0.15); border-color: #c83030; color: #ff9090; }
.ied-body { padding: 4px 0; }
.ied-effs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ied-eff { font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.ied-eff.pos { background: rgba(80,200,80,0.1); color: #80e090; }
.ied-eff.neg { background: rgba(200,80,80,0.1); color: #ff9090; }
.ied-empty { color: #6a5a3a; font-style: italic; font-size: 12px; }
/* v126.18 — Modale bonus panoplie/runes refonte premium */
.ied-set {
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,208,96,0.08) 0%, rgba(20,14,8,0.6) 100%);
  border: 2px solid; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.ied-set-head {
  font-size: 14px; font-weight: 900; letter-spacing: 0.5px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-shadow: 0 1px 0 #000;
}
.ied-set-head small { font-weight: 600; opacity: 0.75; font-size: 11.5px; margin-left: 4px; }
.ied-set-pieces-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 12px; font-size: 11.5px;
}
.ied-set-piece {
  padding: 4px 9px; border-radius: 5px;
  background: rgba(0,0,0,0.4);
  color: #8a7858; font-weight: 600;
  border: 1px solid rgba(74,58,26,0.6);
}
.ied-set-piece.owned {
  background: linear-gradient(135deg, rgba(80,200,120,0.25), rgba(40,120,60,0.15));
  color: #80f898;
  border-color: #40c060;
  font-weight: 700;
}
.ied-set-bonuses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px; margin-top: 10px;
}
.ied-set-line {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 8px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
}
.ied-set-line.active {
  background: rgba(80,200,120,0.12);
  color: #c0f0d0;
  border-color: rgba(64,192,96,0.4);
}
.ied-set-line.pending { color: #8a7858; }
.ied-set-line.is-current {
  background: linear-gradient(90deg, rgba(80,200,120,0.3), rgba(40,120,60,0.15)) !important;
  border: 1.5px solid #40c060 !important;
  border-left: 5px solid #80f898 !important;
  box-shadow: 0 0 12px rgba(80,200,120,0.3);
}
.ied-set-line.is-current .ied-set-bonus b { color: #80f898; }
.ied-set-pieces {
  font-weight: 800; min-width: 70px;
  background: rgba(0,0,0,0.4);
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px;
  text-align: center;
}
.ied-set-bonus { flex: 1; }
.ied-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(200,144,48,0.3); }
.ied-btn { flex: 1; padding: 10px; border-radius: 5px; border: 1px solid #5a4218; background: linear-gradient(180deg, #4a3818, #2a2010); color: #f0d8a8; cursor: pointer; font-weight: 700; font-size: 13px; }
.ied-btn:hover { background: linear-gradient(180deg, #5a4818, #3a2810); border-color: #c89030; }
.ied-btn-unequip { background: linear-gradient(180deg, #803020, #501810); border-color: #a04020; color: #ffc0a0; }
.ied-btn-unequip:hover { background: linear-gradient(180deg, #a04030, #602820); border-color: #c05030; }

/* 4. Modale transfert vers perso */
.ied-tx-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.ied-tx-target {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: linear-gradient(180deg, #2a2014, #15100a);
  border: 1px solid #4a3818; border-radius: 6px; padding: 8px 12px;
  color: #f0d8a8; cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.ied-tx-target:hover { border-color: #ffcc44; transform: translateX(3px); background: linear-gradient(180deg, #3a2818, #1a1408); }
.ied-tx-target img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.ied-tx-info { flex: 1; }
.ied-tx-name { font-size: 13px; font-weight: 700; }
.ied-tx-meta { font-size: 11px; color: #9a8a6a; }
.ied-tx-arrow { font-size: 18px; color: #ffcc44; font-weight: 800; }

/* ════════════════════════════════════════════════════════
   v99 — LANDING PREMIUM (auth-screen .auth-v99)
   ════════════════════════════════════════════════════════ */
.auth-screen.auth-v99 {
  position: fixed; inset: 0;
  background: #0a0806;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #f0d8a8;
  overflow-y: auto;
  z-index: 9000;
}
.auth-v99 .auth-bg-img {
  position: fixed; inset: 0;
  background: url('assets/login/bg-village.png') center/cover no-repeat;
  filter: blur(2px) saturate(0.85) brightness(0.55);
  transform: scale(1.06);
  z-index: 0;
}
.auth-v99 .auth-bg-gradient {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,180,30,0.10), transparent 70%),
    linear-gradient(180deg, rgba(10,8,6,0.50) 0%, rgba(10,8,6,0.85) 60%, rgba(10,8,6,0.95) 100%);
  z-index: 0;
}
.auth-v99 .auth-shell {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

.av99-pitch { padding: 8px 0; }
.av99-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.av99-emblem {
  font-size: 38px;
  background: linear-gradient(180deg, #ffd870, #c89030);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255,200,80,0.4));
}
.av99-brand-main {
  font-size: 22px; font-weight: 900; letter-spacing: 4px;
  color: #ffd870;
  text-shadow: 0 2px 12px rgba(255,180,30,0.3);
}
.av99-brand-sub { font-size: 11px; letter-spacing: 6px; color: #9a8a6a; margin-top: 2px; }

.av99-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.av99-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 11px; border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,200,80,0.18);
  color: #d8c898;
}
.av99-badge.live { background: rgba(64,200,80,0.10); border-color: rgba(64,200,80,0.35); color: #80e090; }
.av99-badge.gold { background: linear-gradient(180deg, rgba(255,200,80,0.14), rgba(255,200,80,0.06)); border-color: rgba(255,200,80,0.35); color: #ffd870; }
.av99-badge .bd-dot { width: 7px; height: 7px; border-radius: 50%; background: #40d060; box-shadow: 0 0 8px #40d060; animation: bd-pulse 1.6s infinite; }
@keyframes bd-pulse { 50% { opacity: 0.4; transform: scale(0.85); } }

.av99-hero {
  font-size: 44px; line-height: 1.1; font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.av99-hero span {
  background: linear-gradient(180deg, #ffd870 30%, #c89030 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.av99-tagline {
  font-size: 16px; line-height: 1.65; color: #c8b898;
  max-width: 580px; margin: 0 0 28px;
}
.av99-tagline b { color: #ffd870; font-weight: 700; }

.av99-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 32px;
}
.av99-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,200,80,0.15);
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  transition: all 0.2s;
}
.av99-stat:hover { border-color: rgba(255,200,80,0.4); transform: translateY(-2px); }
.av99-stat b {
  display: block; font-size: 22px; font-weight: 900; color: #ffd870;
  font-variant-numeric: tabular-nums;
}
.av99-stat span { font-size: 10.5px; color: #9a8a6a; letter-spacing: 1px; text-transform: uppercase; }

.av99-section {
  font-size: 11px; letter-spacing: 3px; color: #9a8a6a;
  font-weight: 800;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,200,80,0.15);
}

.av99-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.av99-feat {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,200,80,0.10);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.2s;
}
.av99-feat:hover { border-color: rgba(255,200,80,0.32); background: rgba(255,200,80,0.05); }
.av99-feat-ico { font-size: 22px; flex-shrink: 0; line-height: 1; }
.av99-feat b { display: block; font-size: 13px; color: #ffd870; font-weight: 700; margin-bottom: 2px; }
.av99-feat span { font-size: 11.5px; color: #a89878; line-height: 1.45; }

.av99-roadmap { display: flex; flex-wrap: wrap; gap: 6px; }
.av99-roadmap-item {
  font-size: 12px; padding: 5px 10px;
  background: rgba(255,200,80,0.06);
  border: 1px dashed rgba(255,200,80,0.3);
  border-radius: 4px;
  color: #d8c898;
}

.av99-foot {
  margin-top: 26px;
  display: flex; gap: 10px; align-items: center;
  font-size: 10.5px; color: #6a5a3a;
}
.av99-version { color: #c89030; font-weight: 700; }
.av99-discl::before { content: '·'; margin-right: 8px; opacity: 0.5; }

.av99-card {
  position: sticky; top: 32px;
  background: linear-gradient(180deg, rgba(28,22,14,0.92) 0%, rgba(15,12,8,0.94) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,200,80,0.25);
  border-radius: 14px;
  padding: 32px 28px 24px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,200,80,0.05),
    inset 0 1px 0 rgba(255,200,80,0.1);
  overflow: hidden;
}
.av99-card-glow {
  position: absolute; top: -50%; left: -20%;
  width: 140%; height: 200%;
  background: radial-gradient(circle, rgba(255,180,30,0.10) 0%, transparent 50%);
  pointer-events: none;
  animation: glow-rotate 12s linear infinite;
}
@keyframes glow-rotate { to { transform: rotate(360deg); } }

.av99-card-head { position: relative; margin-bottom: 22px; }
.av99-card-eyebrow {
  display: inline-block;
  font-size: 10px; letter-spacing: 2.5px; font-weight: 800;
  color: #c89030;
  padding: 4px 10px; border-radius: 3px;
  background: rgba(255,200,80,0.10);
  border: 1px solid rgba(255,200,80,0.25);
  margin-bottom: 12px;
}
.av99-card-title {
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 8px;
}
.av99-card-sub { font-size: 13px; line-height: 1.55; color: #b8a888; margin: 0; }
.av99-card-sub b { color: #ffd870; font-weight: 700; }

.av99-cta-primary {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #ffd870 0%, #c89030 100%);
  color: #1a0a04;
  padding: 16px 18px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #c89030;
  margin: 14px 0 6px;
  box-shadow:
    0 8px 28px rgba(255,180,30,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.18s;
  position: relative; overflow: hidden;
}
.av99-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,180,30,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.av99-cta-primary::after {
  content: ''; position: absolute; top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: cta-shine 3.2s ease-in-out infinite;
}
@keyframes cta-shine { to { left: 120%; } }
.av99-cta-primary .av99-cta-ico { font-size: 26px; }
.av99-cta-primary .av99-cta-txt b { display: block; font-size: 16px; font-weight: 900; letter-spacing: 0.3px; }
.av99-cta-primary .av99-cta-txt small { display: block; font-size: 11px; opacity: 0.75; margin-top: 1px; font-weight: 600; }
.av99-cta-primary .av99-cta-arrow { margin-left: auto; font-size: 22px; font-weight: 900; }

.av99-or { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; }
.av99-or::before, .av99-or::after { content:''; flex: 1; height: 1px; background: rgba(255,200,80,0.18); }
.av99-or span { font-size: 9.5px; letter-spacing: 2.5px; color: #8a7858; font-weight: 800; }

.av99-cta-secondary {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04);
  color: #ffd870;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255,200,80,0.3);
  transition: all 0.18s;
}
.av99-cta-secondary:hover { background: rgba(255,200,80,0.10); border-color: rgba(255,200,80,0.55); transform: translateY(-1px); }
.av99-cta-secondary .av99-cta-ico { font-size: 22px; }
.av99-cta-secondary .av99-cta-txt b { display: block; font-size: 14px; font-weight: 700; }
.av99-cta-secondary .av99-cta-txt small { display: block; font-size: 11px; color: #a89878; margin-top: 1px; }
.av99-cta-secondary .av99-cta-arrow { margin-left: auto; font-size: 18px; }

.av99-perks {
  list-style: none; padding: 0; margin: 22px 0 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.av99-perks li {
  display: flex; gap: 9px; align-items: center;
  font-size: 12.5px; color: #c8b898; line-height: 1.4;
}
.av99-perks li > span:first-child {
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: rgba(64,200,80,0.15);
  border: 1px solid rgba(64,200,80,0.4);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #80e090;
}

.av99-secure {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(64,200,80,0.05);
  border: 1px solid rgba(64,200,80,0.18);
  border-radius: 6px;
  margin-bottom: 14px;
}
.av99-secure span { font-size: 14px; }
.av99-secure small { font-size: 10.5px; color: #9ab898; line-height: 1.4; }

.av99-server-line {
  text-align: center;
  font-size: 11px; color: #8a7858;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,200,80,0.15);
}
.av99-server-line b { color: #ffae60; }

@media (max-width: 980px) {
  .auth-v99 .auth-shell { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px; }
  .av99-card { position: static; }
  .av99-hero { font-size: 32px; }
  .av99-stats { grid-template-columns: repeat(2, 1fr); }
  .av99-feats { grid-template-columns: 1fr; }
}

/* v207 — Mobile (< 720px) : carte de connexion EN PREMIER, pitch en dessous + ergonomie touch */
@media (max-width: 720px) {
  .auth-v99 .auth-shell { grid-template-columns: 1fr !important; gap: 18px !important; padding: 16px 12px !important; }
  .av99-card { order: 1 !important; padding: 24px 18px !important; border-radius: 14px !important; }
  .av99-pitch { order: 2 !important; padding: 0 !important; }
  .av99-card-title { font-size: 22px !important; }
  .av99-card-sub { font-size: 12.5px !important; line-height: 1.5 !important; }
  .av99-cta-primary, .av99-cta-secondary {
    padding: 16px 14px !important; min-height: 60px !important;
    font-size: 14px !important; border-radius: 10px !important;
  }
  .av99-cta-txt b { font-size: 15px !important; }
  .av99-cta-txt small { font-size: 11px !important; display: block; margin-top: 2px; }
  .av99-cta-arrow { font-size: 22px !important; }
  .av99-hero { font-size: 22px !important; line-height: 1.3 !important; }
  .av99-tagline { font-size: 13px !important; line-height: 1.55 !important; }
  .av99-badges { gap: 6px !important; }
  .av99-badge { font-size: 10.5px !important; padding: 4px 8px !important; }
  .av99-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .av99-stat b { font-size: 18px !important; }
  .av99-stat span { font-size: 10.5px !important; }
  .av99-feat { padding: 10px !important; }
  .av99-feat-ico { font-size: 22px !important; }
  .av99-feat b { font-size: 13px !important; }
  .av99-feat span { font-size: 11.5px !important; line-height: 1.45 !important; }
  .av99-section { font-size: 11px !important; margin: 12px 0 8px !important; }
  .av99-roadmap { gap: 5px !important; }
  .av99-roadmap-item { font-size: 11px !important; padding: 4px 8px !important; }
  .av99-foot { flex-direction: column; gap: 4px; align-items: flex-start; font-size: 10.5px !important; }
  .av99-brand-main { font-size: 18px !important; }
  .av99-brand-sub { font-size: 11px !important; }
  .av99-emblem { font-size: 28px !important; }
  /* Empêche le débordement horizontal lié aux 2 colonnes du pitch */
  .auth-v99 { overflow-x: hidden !important; }
}

body.panel-boutique .dash-combat-row,
body.panel-guilde .dash-combat-row,
body.panel-quests .dash-combat-row,
body.panel-bureau .dash-combat-row,
body.panel-friends .dash-combat-row,
body.panel-hdv .dash-combat-row,
body.panel-almanax .dash-combat-row,
body.panel-ranking .dash-combat-row {
  display: none !important;
}

/* v99 — Boutique sections */
.shop-section-title {
  font-size: 12px; letter-spacing: 3px; font-weight: 800;
  margin: 24px 0 12px; padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255,200,80,0.12), transparent);
  border-left: 4px solid #c89030;
  color: #ffd870;
  border-radius: 4px;
}
.shop-section-title small { font-weight: 500; color: #a89878; letter-spacing: 1px; margin-left: 8px; font-size: 11px; }
.shop-section-title.tempo  { border-left-color: #4090e0; color: #80b8ff; background: linear-gradient(90deg, rgba(64,144,224,0.12), transparent); }
.shop-section-title.oneshot{ border-left-color: #c060c0; color: #e090e0; background: linear-gradient(90deg, rgba(192,96,192,0.12), transparent); }
.shop-section-title.compte { border-left-color: #ffd060; color: #ffd870; background: linear-gradient(90deg, rgba(255,208,96,0.18), transparent); }
.shop-section-title.perso  { border-left-color: #80e060; color: #b0e890; background: linear-gradient(90deg, rgba(128,224,96,0.12), transparent); }
.shop-offer-target {
  margin-top: 6px;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(0,0,0,0.35); border: 1px dashed rgba(255,200,80,0.3);
  color: #ffd870;
  display: inline-block;
}
.shop-offer-target.global { background: rgba(64,200,80,0.1); border-color: rgba(64,200,80,0.35); color: #80e090; }
.shop-offer-target.active { background: rgba(255,200,80,0.1); border-color: rgba(255,200,80,0.4); color: #ffd870; }

/* v100 — détail équipé : récap panoplies actives */
.ied-allactive-head {
  margin: 14px 0 8px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: #ffae60;
  background: rgba(255,174,96,0.08);
  border-left: 3px solid #ffae60;
  border-radius: 3px;
}
.ied-set-mini { padding: 6px 10px; margin-top: 6px; }
.ied-set-mini .ied-set-head { font-size: 12px; margin-bottom: 4px; }

/* v100 — Pastille YouTube tier sur la carte perso et au header */
.yt-tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 10px;
  background: linear-gradient(180deg, #ff4040, #c01818);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 0 8px rgba(255,80,80,0.4);
}
.yt-tier-badge.gold   { background: linear-gradient(180deg, #ffd060, #c89030); color:#1a0a04; box-shadow: 0 0 8px rgba(255,200,80,0.5); }
.yt-tier-badge.silver { background: linear-gradient(180deg, #d8d8e0, #909098); color:#1a1a20; }
.yt-tier-badge.bronze { background: linear-gradient(180deg, #d49060, #804020); }

/* ════ v101 — fixes visibilité ════ */

/* 1) Hide history strip partout où on masque le header combat */
body.panel-inventory .dash-history-strip,
body.panel-equipment .dash-history-strip,
body.panel-spells .dash-history-strip,
body.panel-stats .dash-history-strip,
body.panel-bank .dash-history-strip,
body.panel-jobs .dash-history-strip,
body.panel-boutique .dash-history-strip,
body.panel-guilde .dash-history-strip,
body.panel-quests .dash-history-strip,
body.panel-bureau .dash-history-strip,
body.panel-friends .dash-history-strip,
body.panel-hdv .dash-history-strip,
body.panel-almanax .dash-history-strip,
body.panel-ranking .dash-history-strip { display: none !important; }

/* 2) Boutique : titres de section forcés en couleurs lisibles + fond opaque */
.shop-section-title {
  background: linear-gradient(90deg, rgba(255,200,80,0.22), rgba(255,200,80,0.04)) !important;
  color: #ffe890 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  border-left-width: 5px !important;
  margin: 26px 0 14px !important;
}
.shop-section-title small { color: #d8c898 !important; opacity: 0.95; }
.shop-section-title.tempo   { background: linear-gradient(90deg, rgba(64,144,224,0.28), rgba(64,144,224,0.05)) !important; color: #b0d8ff !important; }
.shop-section-title.oneshot { background: linear-gradient(90deg, rgba(192,96,192,0.28), rgba(192,96,192,0.05)) !important; color: #f0b8f0 !important; }
.shop-section-title.compte  { background: linear-gradient(90deg, rgba(255,208,96,0.30), rgba(255,208,96,0.05)) !important; color: #ffe890 !important; }
.shop-section-title.perso   { background: linear-gradient(90deg, rgba(128,224,96,0.25), rgba(128,224,96,0.05)) !important; color: #c8f0a0 !important; }

/* 3) Carte perso active : feedback de clic + zone clic propre */
.char-card { cursor: pointer; }
.char-card .ccd-bg,
.char-card .ccd-status-strip,
.char-card .ccd-portrait,
.char-card .ccd-info,
.char-card .ccd-bars,
.char-card .ccd-foot { pointer-events: none; }
/* …mais on ré-active l'interaction sur les éléments cliquables internes */
.char-card .ccd-chip.overload,
.char-card .ccd-thresh,
.char-card .ccd-thresh * { pointer-events: auto; }

.char-card.active {
  /* renforce encore plus pour qu'on voit clairement le perso sélectionné */
  outline: 3px solid #ffcc44 !important;
  outline-offset: -2px;
}
.char-card:active { transform: translateX(1px) scale(0.985); transition: transform 0.08s; }
.char-card:not(.active):hover {
  background: linear-gradient(180deg, #352510 0%, #1a1208 100%) !important;
  border-color: #8a5818 !important;
}

/* ════ v102 — Drag & drop équipement + Cast strategies ════ */

/* DnD : highlight des slots compatibles + zone d'accueil */
body.dnd-equipping .pd-slot {
  transition: all 0.15s;
}
body.dnd-equipping .pd-slot:not(.dnd-compatible) {
  opacity: 0.35;
  filter: grayscale(0.8);
}
.pd-slot.dnd-compatible {
  outline: 2px dashed #ffcc44;
  outline-offset: 2px;
  background: rgba(255,204,68,0.10) !important;
  animation: dnd-pulse 1.4s ease-in-out infinite;
}
@keyframes dnd-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,204,68,0.4); }
  50%     { box-shadow: 0 0 0 8px rgba(255,204,68,0); }
}
.pd-slot.dnd-hover {
  outline: 3px solid #ffd870 !important;
  background: rgba(255,216,112,0.25) !important;
  transform: scale(1.04);
  box-shadow: 0 0 24px rgba(255,200,80,0.6);
}
.dr-cat-slot[draggable="true"] { cursor: grab; }
.dr-cat-slot[draggable="true"]:active { cursor: grabbing; }

/* Cast strategy bar */
.cast-strat-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 18px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(40,30,16,0.7), rgba(20,16,8,0.6));
  border: 1px solid rgba(255,200,80,0.2);
  border-radius: 8px;
  flex-wrap: wrap;
}
.cast-strat-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: #ffd870;
  margin-right: 6px;
}
.cast-strat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #4a3818;
  border-radius: 5px;
  color: #c8b898;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.cast-strat-btn:hover {
  border-color: #c89030;
  background: rgba(255,200,80,0.1);
  color: #ffd870;
}
.cast-strat-btn.active {
  background: linear-gradient(180deg, #ffd060, #c89030);
  color: #1a0a04;
  border-color: #c89030;
  box-shadow: 0 0 12px rgba(255,200,80,0.4);
}
.cast-strat-ic { font-size: 14px; }
.cast-strat-name { letter-spacing: 0.3px; }

/* ════ v104 — YouTube Members ════ */
.dash-yt-btn {
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, #c4302b 0%, #8b1f1c 100%);
  border: 1px solid #ff5050;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(196,48,43,.3);
}
.dash-yt-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(196,48,43,.5); }
.dash-yt-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px;
  background: #fff; color: #c4302b;
  border-radius: 6px;
  font-size: 16px; font-weight: 900;
  padding-left: 3px;
}
.dash-yt-text { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.dash-yt-name { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.dash-yt-bal  { font-size: 10px; opacity: .85; }

.yt-page { padding: 24px 28px; max-width: 1200px; margin: 0 auto; }
.yt-header { display:flex; align-items:center; gap:18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,80,80,.25); }
.yt-emblem {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #c4302b 0%, #8b1f1c 100%);
  color: #fff; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-size: 32px; font-weight: 900; padding-left: 6px;
  box-shadow: 0 4px 16px rgba(196,48,43,.4);
}
.yt-title { font-size: 22px; font-weight: 800; color: #ffe4a0; letter-spacing: .3px; }
.yt-sub   { color: #c8b888; font-size: 13px; margin-top: 4px; max-width: 720px; }
.yt-sub a { color: #ff8060; }

.yt-current {
  display:flex; align-items:center; gap:18px;
  background: linear-gradient(135deg, rgba(196,48,43,.15) 0%, rgba(0,0,0,.3) 100%);
  border: 1px solid var(--tc, #555);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 22px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--tc, #555) 25%, transparent);
}
.yt-current-ico { font-size: 38px; }
.yt-current-info { flex: 1; }
.yt-current-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #c8b888; opacity: .8; }
.yt-current-tier { font-size: 22px; font-weight: 800; color: var(--tc, #ffe4a0); margin-top: 2px; }
.yt-current-perks { display:flex; gap: 10px; flex-wrap: wrap; }
.yt-current-perks span {
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1);
  padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #ffe4a0;
}
.yt-not-member .yt-current-ico { color: #c4302b; opacity: .6; }
.yt-not-member { border-color: #4a3a1a; }

.yt-section-title {
  font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #ffd060; margin: 18px 0 12px;
}
.yt-tiers-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; }
.yt-tier-card {
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 100%);
  border: 1px solid color-mix(in srgb, var(--tc, #555) 40%, #4a3a1a);
  border-radius: 12px; padding: 16px;
  position: relative;
  transition: transform .15s, box-shadow .2s;
}
.yt-tier-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--tc, #555) 30%, transparent); }
.yt-tier-card.active { border-color: var(--tc, #555); box-shadow: 0 0 24px color-mix(in srgb, var(--tc, #555) 35%, transparent); }
.yt-tier-head { display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.yt-tier-ico { font-size: 28px; }
.yt-tier-name { font-size: 18px; font-weight: 800; color: var(--tc, #ffe4a0); letter-spacing: .5px; }
.yt-tier-badge { margin-left: auto; background: var(--tc, #555); color: #1a1a1a; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.yt-tier-perks { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 7px; }
.yt-tier-perks li { font-size: 13px; color: #d8c8a8; padding: 6px 8px; background: rgba(0,0,0,.3); border-radius: 6px; }
.yt-tier-perks b { color: var(--tc, #ffe4a0); }

.yt-jetons-claim {
  background: linear-gradient(135deg, rgba(255,200,0,.08) 0%, rgba(0,0,0,.4) 100%);
  border: 1px solid #c8a020; border-radius: 12px;
  padding: 18px 22px; margin: 22px 0;
}
.yt-jc-head { display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.yt-jc-ico { display:flex; align-items:center; justify-content:center; width: 40px; height: 40px; background: rgba(255,200,0,.15); border-radius: 10px; }
.yt-jc-title { font-size: 17px; font-weight: 800; color: #ffd060; }
.yt-jc-sub   { font-size: 12px; color: #c8b888; }
.yt-jc-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.yt-jc-stat  { background: rgba(0,0,0,.4); padding: 10px; border-radius: 8px; text-align:center; border: 1px solid rgba(255,255,255,.05); }
.yt-jc-stat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #888; display:block; margin-bottom: 4px; }
.yt-jc-stat-val { font-size: 22px; color: #ffd060; font-weight: 800; }
.yt-jc-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #d4a040 0%, #a07020 100%);
  border: 1px solid #ffd060; color: #1a1a1a;
  font-size: 15px; font-weight: 800; border-radius: 10px; cursor: pointer;
  transition: transform .1s, box-shadow .15s;
}
.yt-jc-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,200,0,.4); }
.yt-jc-btn:disabled { opacity: .4; cursor: not-allowed; }
.yt-jc-note { display:block; margin-top: 8px; font-size: 11px; color: #888; text-align:center; }

.yt-cta-block { display:flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.yt-cta-primary, .yt-cta-secondary {
  display:flex; align-items:center; gap: 14px; padding: 14px 18px;
  border-radius: 12px; text-decoration: none;
  transition: transform .12s, box-shadow .15s;
}
.yt-cta-primary {
  background: linear-gradient(135deg, #c4302b 0%, #8b1f1c 100%);
  border: 1px solid #ff5050; color: #fff;
  box-shadow: 0 4px 16px rgba(196,48,43,.3);
}
.yt-cta-secondary {
  background: rgba(0,0,0,.4);
  border: 1px solid #4a3a1a; color: #d8c8a8;
}
.yt-cta-primary:hover, .yt-cta-secondary:hover { transform: translateY(-1px); }
.yt-cta-ico { font-size: 24px; min-width: 32px; text-align:center; }
.yt-cta-txt { flex: 1; }
.yt-cta-txt b { display:block; font-size: 15px; }
.yt-cta-txt small { display:block; font-size: 11px; opacity: .8; }
.yt-cta-arrow { font-size: 22px; opacity: .6; }
.yt-cta-note { background: rgba(0,0,0,.3); border: 1px dashed #4a3a1a; padding: 12px; border-radius: 8px; color: #c8b888; font-size: 13px; text-align: center; }

.yt-info { background: rgba(0,0,0,.3); border: 1px solid #4a3a1a; border-radius: 10px; padding: 16px 20px; margin-top: 20px; }
.yt-info h3 { color: #ffd060; margin: 0 0 10px; font-size: 15px; }
.yt-info ol { padding-left: 20px; color: #d8c8a8; font-size: 13px; line-height: 1.6; margin: 0; }
.yt-info ol li { margin-bottom: 4px; }
.yt-info-foot { color: #c8b888; font-size: 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #4a3a1a; }

/* ════ v105 — Fixes lisibilité + UX ════ */

/* 1) Boutique : titres de section LARGEMENT plus contrastés */
.shop-section-title {
  background: linear-gradient(90deg, rgba(255,200,80,0.35) 0%, rgba(255,200,80,0.08) 100%) !important;
  color: #fff5c0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(255,200,80,0.4);
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 14px 18px !important;
  border-left: 6px solid #ffd060 !important;
  border-radius: 8px !important;
  margin: 28px 0 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.shop-section-title small { color: #ffe8b0 !important; font-weight: 600 !important; opacity: 1 !important; font-size: 12px !important; }
.shop-section-title.tempo   { background: linear-gradient(90deg, rgba(80,160,240,0.42), rgba(80,160,240,0.06)) !important; color: #d8edff !important; border-left-color: #4090e0 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(64,144,224,0.45) !important; }
.shop-section-title.tempo small  { color: #b8dcff !important; }
.shop-section-title.oneshot { background: linear-gradient(90deg, rgba(220,120,220,0.42), rgba(220,120,220,0.06)) !important; color: #ffd8ff !important; border-left-color: #c060c0 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(192,96,192,0.45) !important; }
.shop-section-title.oneshot small{ color: #f0c0f0 !important; }
.shop-section-title.compte  { background: linear-gradient(90deg, rgba(255,210,100,0.42), rgba(255,210,100,0.06)) !important; color: #fff5c0 !important; border-left-color: #ffd060 !important; }
.shop-section-title.compte small { color: #ffe8b0 !important; }
.shop-section-title.perso   { background: linear-gradient(90deg, rgba(140,232,110,0.42), rgba(140,232,110,0.06)) !important; color: #e0ffd0 !important; border-left-color: #80e060 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(128,224,96,0.45) !important; }
.shop-section-title.perso small  { color: #c8f0a0 !important; }

/* 2) Inventaire : badge de quantité compact */
.item-qty {
  position: absolute;
  bottom: 2px; right: 2px;
  background: rgba(0,0,0,0.85);
  color: #ffd060;
  font-size: 11px !important;
  font-weight: 800;
  padding: 1px 5px !important;
  border-radius: 4px;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid rgba(255,200,80,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* 3) Personnage actif dans le menu de gauche */
.left-nav .nav-char,
.left-nav .nav-btn-char,
.left-nav [data-char-id] {
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.left-nav .nav-char.active,
.left-nav .nav-btn-char.active,
.left-nav [data-char-id].active {
  border: 2px solid #ffd060 !important;
  background: linear-gradient(90deg, rgba(255,208,96,0.18), rgba(255,208,96,0.04)) !important;
  box-shadow: 0 0 14px rgba(255,208,96,0.45), inset 0 0 0 1px rgba(255,208,96,0.3) !important;
  position: relative;
}
.left-nav .nav-char.active::before,
.left-nav .nav-btn-char.active::before,
.left-nav [data-char-id].active::before {
  content: "▶";
  position: absolute;
  left: -2px; top: 50%;
  transform: translateY(-50%);
  color: #ffd060;
  font-size: 14px;
  text-shadow: 0 0 6px rgba(255,208,96,0.8);
}

/* 4) Page YouTube : lisibilité + masquer combat header */
body.panel-youtube .combat-dashboard,
body.panel-youtube .dash-history-strip { display: none !important; }
body.panel-youtube .main-content { padding-top: 10px; }
.yt-page { color: #f0e8d0; }
.yt-title { color: #fff !important; text-shadow: 0 0 14px rgba(255,80,80,0.5); }
.yt-sub   { color: #e0d0a8 !important; }
.yt-current-lbl  { color: #fff !important; opacity: 0.9 !important; }
.yt-current-tier { color: #fff !important; text-shadow: 0 0 12px var(--tc, #fff); }
.yt-current-perks span { background: rgba(0,0,0,0.55) !important; color: #fff !important; border-color: var(--tc, #ffd060) !important; }
.yt-section-title { color: #ffe890 !important; font-size: 16px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.yt-tier-card { background: linear-gradient(180deg, rgba(20,15,10,0.75) 0%, rgba(0,0,0,0.85) 100%) !important; }
.yt-tier-perks li { color: #f0e8d0 !important; font-weight: 500; }
.yt-tier-perks b   { color: #fff !important; text-shadow: 0 0 6px var(--tc, #fff); }
.yt-tier-name      { text-shadow: 0 0 12px var(--tc, #fff); }
.yt-jc-title       { color: #ffe890 !important; }
.yt-jc-sub         { color: #e0d0a8 !important; }
.yt-jc-stat-lbl    { color: #c0b090 !important; }
.yt-jc-stat-val    { color: #fff !important; text-shadow: 0 0 10px rgba(255,208,96,0.7); }
.yt-info h3        { color: #ffe890 !important; }
.yt-info ol        { color: #f0e8d0 !important; }
.yt-info-foot      { color: #d0c090 !important; }
.yt-cta-primary    { background: linear-gradient(135deg, #e03830 0%, #a01515 100%) !important; box-shadow: 0 4px 22px rgba(224,56,48,0.5) !important; }
.yt-cta-primary b  { font-size: 16px; }

/* 5) Bell de notifications */
.dash-bell-btn {
  position: relative;
  width: 38px; height: 38px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3a1a;
  border-radius: 9px;
  color: #ffd060;
  font-size: 18px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dash-bell-btn:hover { background: rgba(255,208,96,0.15); border-color: #ffd060; }
.dash-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #e03030;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #1a1a1a;
  box-shadow: 0 0 8px rgba(224,48,48,0.6);
  animation: notifPulse 2s infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.notif-dropdown {
  position: fixed;
  top: 70px; right: 14px;
  width: 380px; max-height: 500px;
  background: linear-gradient(180deg, #1a1410 0%, #0f0a08 100%);
  border: 1px solid #4a3a1a;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 30px rgba(255,208,96,0.15);
  z-index: 9999;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: notifSlide 0.2s ease-out;
}
@keyframes notifSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,208,96,0.08);
  border-bottom: 1px solid #4a3a1a;
}
.notif-title { color: #ffd060; font-weight: 800; letter-spacing: 0.5px; }
.notif-actions { display: flex; gap: 6px; }
.notif-action-btn {
  background: rgba(0,0,0,0.5);
  border: 1px solid #4a3a1a;
  color: #d8c8a8;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}
.notif-action-btn:hover { background: rgba(255,208,96,0.15); color: #ffd060; }
.notif-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.notif-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(74,58,26,0.5);
  cursor: pointer;
  transition: background .12s;
}
.notif-item:hover { background: rgba(255,208,96,0.06); }
.notif-item.unread { background: rgba(80,160,240,0.06); border-left: 3px solid #4090e0; }
.notif-item.admin  { background: rgba(224,48,48,0.10); border-left: 3px solid #e03030; }
.notif-icon {
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text { color: #f0e8d0; font-size: 13px; line-height: 1.4; }
.notif-text b { color: #ffd060; }
.notif-meta { color: #888; font-size: 11px; margin-top: 4px; display: flex; gap: 10px; }
.notif-meta .notif-from { color: #80b8e0; }
.notif-meta .notif-from.admin { color: #ff8060; font-weight: 700; }
.notif-actions-inline { display: flex; gap: 6px; margin-top: 8px; }
.notif-btn {
  background: linear-gradient(135deg, #4080d0, #2050a0);
  border: 1px solid #60a0f0;
  color: #fff;
  padding: 4px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.notif-btn.deny { background: linear-gradient(135deg, #a04040, #602020); border-color: #d06060; }
.notif-empty { padding: 40px 20px; text-align: center; color: #888; font-style: italic; }
.notif-admin-push {
  border-top: 1px solid #4a3a1a;
  background: rgba(224,48,48,0.06);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.notif-admin-push-title { color: #ff8060; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.notif-admin-push textarea {
  width: 100%; min-height: 60px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #4a3a1a;
  color: #f0e8d0;
  padding: 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.notif-admin-push button {
  background: linear-gradient(135deg, #e03030, #a01515);
  border: 1px solid #ff5050;
  color: #fff;
  padding: 8px;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
}
.ied-set-bonus-item { display: inline-block; background: rgba(255,208,96,0.12); border: 1px solid rgba(255,208,96,0.25); color: #ffe890; padding: 1px 7px; border-radius: 4px; font-size: 12px; margin: 1px 3px 1px 0; }
.ied-set-line.pending .ied-set-bonus-item { opacity: 0.45; background: rgba(160,160,160,0.08); border-color: rgba(160,160,160,0.2); color: #888; }
.notif-admin-push .notif-input { background: rgba(0,0,0,0.6); border: 1px solid #4a3a1a; color: #f0e8d0; padding: 6px 8px; border-radius: 6px; font-family: inherit; font-size: 12px; width: 100%; }
.notif-text a { color: #80b8ff; text-decoration: underline; word-break: break-all; }
.notif-text a:hover { color: #b0d8ff; }
.notif-link-row { margin-top: 6px; }
.notif-link { display: inline-block; background: linear-gradient(135deg, #4080d0, #2050a0); color: #fff !important; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; text-decoration: none !important; border: 1px solid #60a0f0; }
.notif-link:hover { background: linear-gradient(135deg, #60a0f0, #4080d0); }

/* ════ v106 — YT moderne + sidebar accordéon + perso modern ════ */

/* ─── PAGE YOUTUBE MODERNE ──────────────────────────────────── */
.yt-modern { padding: 24px; max-width: 1200px; margin: 0 auto; color: #e8e6e3; font-family: inherit; }

.ytm-hero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #1a0f0d 0%, #2a1814 100%);
  border: 1px solid rgba(255,80,80,0.2);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ytm-hero-emblem {
  width: 64px; height: 64px;
  background: #ff0000;
  color: #fff; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; padding-left: 5px;
  box-shadow: 0 4px 16px rgba(255,0,0,0.4);
}
.ytm-hero-text { flex: 1; }
.ytm-hero-title { font-size: 26px; font-weight: 800; color: #ffffff; margin: 0 0 4px; letter-spacing: -0.3px; }
.ytm-hero-sub { font-size: 14px; color: #b8b2a8; margin: 0; }
.ytm-hero-sub a { color: #ff8888; text-decoration: none; font-weight: 600; }
.ytm-hero-sub a:hover { text-decoration: underline; }
.ytm-hero-cta {
  background: #ff0000; color: #fff !important;
  padding: 12px 22px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(255,0,0,0.35);
}
.ytm-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,0,0,0.5); }
.ytm-arrow { font-size: 18px; }

/* Status */
.ytm-status {
  display: flex; align-items: center; gap: 18px;
  background: rgba(30,28,25,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.ytm-status.active {
  border-color: var(--tc, #ffd060);
  box-shadow: 0 0 24px color-mix(in srgb, var(--tc, #ffd060) 25%, transparent);
}
.ytm-status-ico { font-size: 36px; }
.ytm-status-info { flex: 1; }
.ytm-status-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #908a80; margin-bottom: 4px; }
.ytm-status-tier { font-size: 22px; font-weight: 800; color: #ffffff; }
.ytm-status-tier small { font-size: 13px; color: #908a80; font-weight: 500; margin-left: 6px; }
.ytm-status-perks { display: flex; gap: 8px; }
.ytm-perk-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 12px;
  border-radius: 8px;
  min-width: 60px;
}
.ytm-perk-pill span { font-size: 16px; font-weight: 800; color: #ffffff; }
.ytm-perk-pill small { font-size: 10px; color: #908a80; text-transform: uppercase; letter-spacing: 0.5px; }
.ytm-link-btn {
  background: rgba(255,255,255,0.08);
  color: #e8e6e3 !important;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 18px; border-radius: 8px;
  text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.ytm-link-btn:hover { background: rgba(255,255,255,0.12); }

/* Section title */
.ytm-section-title {
  font-size: 20px; font-weight: 700; color: #ffffff;
  margin: 28px 0 16px; padding: 0;
  letter-spacing: -0.3px;
}

/* Tiers grid */
.ytm-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.ytm-tier {
  background: linear-gradient(180deg, rgba(40,35,30,0.6) 0%, rgba(20,18,15,0.8) 100%);
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ytm-tier:hover { transform: translateY(-3px); border-color: var(--tc); box-shadow: 0 8px 24px color-mix(in srgb, var(--tc) 30%, transparent); }
.ytm-tier.is-active { border-color: var(--tc); box-shadow: 0 0 28px color-mix(in srgb, var(--tc) 40%, transparent); }
.ytm-tier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ytm-tier-ico { font-size: 28px; }
.ytm-tier-name { flex: 1; font-size: 18px; font-weight: 800; color: var(--tc); letter-spacing: 0.3px; }
.ytm-tier-price { font-size: 16px; font-weight: 700; color: #ffffff; }
.ytm-tier-price small { font-size: 11px; color: #908a80; font-weight: 500; }
.ytm-tier-perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ytm-tier-perks li { font-size: 13px; color: #d8d4cc; padding: 7px 10px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.ytm-tier-perks li span:first-child { font-size: 14px; }
.ytm-tier-perks em { font-style: normal; color: #908a80; font-size: 11px; margin-left: auto; }
.ytm-tier-perks b { color: #ffffff; }
.ytm-tier-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--tc); color: #1a1a1a;
  padding: 4px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}

/* Cards (gold/blue/dark) */
.ytm-card {
  background: linear-gradient(180deg, rgba(30,28,25,0.7) 0%, rgba(15,13,10,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}
.ytm-card-gold { border-color: rgba(255,200,80,0.3); background: linear-gradient(135deg, rgba(60,40,15,0.5) 0%, rgba(15,13,10,0.9) 100%); }
.ytm-card-blue { border-color: rgba(80,160,240,0.3); background: linear-gradient(135deg, rgba(15,30,55,0.6) 0%, rgba(10,15,25,0.9) 100%); }
.ytm-card-dark { background: linear-gradient(180deg, rgba(20,18,15,0.7) 0%, rgba(10,8,6,0.9) 100%); }
.ytm-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ytm-card-ico { width: 48px; height: 48px; background: rgba(255,255,255,0.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ytm-card-title { font-size: 18px; font-weight: 700; color: #ffffff; margin: 0 0 12px; }
.ytm-card-head .ytm-card-title { margin: 0; }
.ytm-card-sub { font-size: 13px; color: #b8b2a8; margin: 4px 0 0; }
.ytm-card-stats, .ytm-share-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ytm-stat { background: rgba(0,0,0,0.4); padding: 12px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.ytm-stat span { display: block; font-size: 22px; font-weight: 800; color: #ffffff; }
.ytm-stat small { display: block; font-size: 11px; color: #908a80; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.ytm-btn {
  width: 100%; padding: 12px;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform .1s, box-shadow .15s;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none;
}
.ytm-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ytm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ytm-btn-gold { background: linear-gradient(135deg, #d4a040, #a07020); color: #1a1410; border: 1px solid #ffd060; box-shadow: 0 3px 12px rgba(212,160,64,0.3); }
.ytm-btn-blue { background: linear-gradient(135deg, #4080d0, #2050a0); color: #ffffff; border: 1px solid #60a0f0; box-shadow: 0 3px 12px rgba(64,128,208,0.3); }
.ytm-btn-sm { width: auto; padding: 12px 14px; }

.ytm-share-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: stretch; }
.ytm-share-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e8e6e3;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 13px;
}
.ytm-active-buff {
  background: linear-gradient(90deg, rgba(80,160,240,0.2), rgba(80,160,240,0.05));
  border: 1px solid rgba(80,160,240,0.4);
  color: #b0d8ff;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
}

/* Money grid */
.ytm-money-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.ytm-money-item {
  display: flex; gap: 14px;
  padding: 14px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ytm-money-ico { font-size: 26px; min-width: 36px; text-align: center; }
.ytm-money-text b { display: block; color: #ffffff; font-size: 14px; margin-bottom: 4px; }
.ytm-money-text small { font-size: 12px; color: #b8b2a8; line-height: 1.4; }

.ytm-steps { padding-left: 20px; color: #d8d4cc; line-height: 1.7; margin: 0; font-size: 14px; }
.ytm-steps li { margin-bottom: 6px; }
.ytm-steps b { color: #ffffff; }
.ytm-foot-note { color: #908a80; font-size: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }

/* ─── SIDEBAR ACCORDÉON ─────────────────────────────────────── */
.char-card-acc {
  background: rgba(20,18,15,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  overflow: hidden;
}
.char-card-acc:hover { background: rgba(35,30,22,0.8); }
.char-card-acc.active { background: linear-gradient(90deg, rgba(255,208,96,0.15), rgba(255,208,96,0.03)); border-color: #ffd060; box-shadow: 0 0 12px rgba(255,208,96,0.3); }
.char-card-acc.expanded { background: rgba(35,30,22,0.6); }

.cca-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid transparent;
}
.cca-portrait {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cca-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cca-meta { flex: 1; min-width: 0; }
.cca-line1 { display: flex; align-items: center; gap: 6px; }
.cca-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cca-lv { font-size: 11px; color: #ffd060; font-weight: 700; background: rgba(255,208,96,0.15); padding: 1px 6px; border-radius: 4px; }
.cca-line2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.cca-status { font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.3px; }
.cca-status.dead  { background: rgba(180,40,40,0.25); color: #ff8080; }
.cca-status.fight { background: rgba(255,180,40,0.2); color: #ffd060; }
.cca-status.farm  { background: rgba(80,200,120,0.2); color: #80e090; }
.cca-status.idle  { background: rgba(140,140,140,0.15); color: #a0a0a0; }
.cca-pods { font-size: 10px; padding: 1px 5px; background: rgba(255,180,40,0.15); color: #ffc060; border-radius: 4px; font-weight: 700; }
.cca-pods.crit { background: rgba(255,60,60,0.25); color: #ff8080; animation: cca-pulse 1.5s infinite; }
@keyframes cca-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.cca-pts { font-size: 10px; padding: 1px 5px; background: rgba(255,208,96,0.2); color: #ffd060; border-radius: 4px; font-weight: 700; }

.cca-toggle {
  background: transparent; border: none;
  color: #c0b090; font-size: 11px;
  cursor: pointer; padding: 4px 6px;
  flex-shrink: 0;
}
.cca-toggle:hover { color: #ffd060; }

.cca-details {
  padding: 8px 10px 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
}
.cca-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cca-bar-ic { font-size: 11px; width: 14px; text-align: center; }
.cca-bar { flex: 1; height: 8px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.cca-bar i { display: block; height: 100%; transition: width .3s; }
.cca-bar-val { font-size: 10px; color: #c0b090; min-width: 56px; text-align: right; font-weight: 600; }
.cca-zone { font-size: 11px; color: #c0b090; padding: 4px 6px; background: rgba(0,0,0,0.3); border-radius: 4px; margin-top: 4px; }
.cca-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cca-chip { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.cca-chip.grp { background: rgba(120,200,255,0.15); color: #80c0ff; }
.cca-chip.grp.on { background: rgba(120,255,160,0.2); color: #80ff80; }
.cca-chip.stat { background: rgba(255,255,255,0.06); color: #c0b090; }
.cca-chip.overload { background: rgba(255,60,60,0.25); color: #ff8080; cursor: pointer; animation: cca-pulse 1.5s infinite; }

.cca-thresh { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; background: rgba(0,0,0,0.4); border-radius: 6px; }
.cca-thresh-lbl { font-size: 10px; color: #c0b090; }
.cca-thresh-slider { flex: 1; height: 4px; }
.cca-thresh-val { font-size: 11px; color: #ffd060; font-weight: 700; min-width: 32px; text-align: right; }

/* ─── PAGE PERSONNAGES MODERNE ──────────────────────────────── */
.chars-modern-page { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }

.chm-hero {
  background: linear-gradient(135deg, rgba(40,30,20,0.8) 0%, rgba(20,18,15,0.95) 100%);
  border: 1px solid rgba(255,208,96,0.2);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.chm-hero-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.chm-hero-title { font-size: 26px; font-weight: 800; color: #ffffff; margin: 0; letter-spacing: -0.3px; }
.chm-hero-actions { display: flex; align-items: center; gap: 10px; }
.chm-cap { background: rgba(255,255,255,0.08); color: #c0b090; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.chm-cap.full { background: rgba(255,128,80,0.2); color: #ff8060; }
.chm-btn { padding: 10px 18px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform .1s, box-shadow .15s; font-size: 13px; }
.chm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chm-btn-primary { background: linear-gradient(135deg, #d4a040, #a07020); color: #1a1410; border: 1px solid #ffd060; box-shadow: 0 3px 12px rgba(212,160,64,0.3); }
.chm-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(212,160,64,0.45); }

.chm-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.chm-hs { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.4); padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.chm-hs-ic { font-size: 24px; }
.chm-hs-info b { display: block; font-size: 18px; color: #ffffff; font-weight: 800; }
.chm-hs-info small { font-size: 11px; color: #908a80; text-transform: uppercase; letter-spacing: 0.5px; }

.chm-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chm-toolbar-lbl { color: #908a80; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-right: 4px; }
.chm-sort {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c0b090;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.chm-sort:hover { background: rgba(255,208,96,0.1); color: #ffd060; }
.chm-sort.active { background: linear-gradient(135deg, rgba(255,208,96,0.25), rgba(255,208,96,0.1)); border-color: #ffd060; color: #ffe890; }

.chm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.chm-card {
  position: relative;
  background: linear-gradient(180deg, rgba(35,30,22,0.7) 0%, rgba(15,13,10,0.9) 100%);
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .2s;
  overflow: hidden;
}
.chm-card:hover { transform: translateY(-3px); border-color: var(--cc); box-shadow: 0 10px 28px color-mix(in srgb, var(--cc) 30%, transparent); }
.chm-card.selected { border-color: var(--cc); box-shadow: 0 0 28px color-mix(in srgb, var(--cc) 40%, transparent); }
.chm-card-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--cc) 20%, transparent), transparent 60%);
  pointer-events: none;
}
.chm-card > * { position: relative; z-index: 1; }

.chm-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.chm-portrait-wrap { position: relative; }
.chm-portrait {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid var(--cc);
  background: rgba(0,0,0,0.4);
  object-fit: cover;
}
.chm-level-badge {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--cc); color: #1a1410;
  font-weight: 800; font-size: 12px;
  padding: 2px 6px; border-radius: 6px;
  border: 2px solid #1a1410;
  min-width: 22px; text-align: center;
}
.chm-card-meta { flex: 1; min-width: 0; }
.chm-card-name { font-size: 17px; font-weight: 800; color: #ffffff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chm-card-class { font-size: 12px; color: var(--cc); font-weight: 600; margin-bottom: 6px; }
.chm-status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 5px; font-weight: 700; }
.chm-status-pill.dead  { background: rgba(180,40,40,0.25); color: #ff8080; }
.chm-status-pill.fight { background: rgba(255,180,40,0.2); color: #ffd060; }
.chm-status-pill.farm  { background: rgba(80,200,120,0.2); color: #80e090; }
.chm-status-pill.idle  { background: rgba(140,140,140,0.15); color: #a0a0a0; }
.chm-card-pts { background: linear-gradient(135deg, #ffd060, #c89030); color: #1a1410; font-weight: 800; padding: 4px 8px; border-radius: 6px; font-size: 11px; align-self: flex-start; }

.chm-card-bars { margin-bottom: 12px; }
.chm-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.chm-bar-ic { font-size: 12px; width: 16px; text-align: center; }
.chm-bar { flex: 1; height: 9px; background: rgba(0,0,0,0.5); border-radius: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.chm-bar i { display: block; height: 100%; transition: width .3s; }
.chm-bar-val { font-size: 11px; color: #b8b2a8; min-width: 70px; text-align: right; font-weight: 600; }

.chm-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.chm-stat { background: rgba(0,0,0,0.4); padding: 8px 4px; border-radius: 6px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.chm-stat span { display: block; font-size: 14px; }
.chm-stat b { display: block; font-size: 13px; color: #ffffff; font-weight: 800; margin-top: 2px; }
.chm-stat small { display: block; font-size: 9px; color: #908a80; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px; }
.chm-stat.warn b { color: #ffc060; }
.chm-stat.crit { background: rgba(255,60,60,0.15); border-color: rgba(255,60,60,0.3); }
.chm-stat.crit b { color: #ff8080; }

.chm-card-actions { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.chm-act {
  flex: 1; min-width: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c0b090;
  padding: 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: all .12s;
  font-family: inherit;
}
.chm-act:hover { background: rgba(255,208,96,0.15); border-color: #ffd060; color: #ffd060; }
.chm-act.danger:hover { background: rgba(255,80,80,0.15); border-color: #ff5050; color: #ff8080; }

/* v185 — Bouton blacklist sort (🚫) */
.spord-btn.ban {
  background: rgba(80,30,30,0.4);
  border: 1px solid rgba(180,80,80,0.4);
  color: #c89060;
  font-size: 11px;
  opacity: 0.5;
}
.spord-btn.ban:hover { opacity: 1; border-color: #ff6080; color: #ff8080; }
.spord-btn.ban.banned { opacity: 1; background: linear-gradient(135deg,#a02020,#600000); border-color: #ff4040; color: #ffb0b0; }
.spord-item.spord-banned { opacity: 0.45; filter: grayscale(0.6); }

/* v185 — Champ qty personnalisée pour chain de donjons */
.fs-chain-custom { -moz-appearance: textfield; appearance: textfield; }
.fs-chain-custom::-webkit-outer-spin-button, .fs-chain-custom::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* v107 — Group dungeon chain selector */
.grp-chain { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.4); border:1px solid #4a3a1a; border-radius:6px; padding:2px 4px; }
.grp-chain-keys { font-size:11px; color:#ffd060; font-weight:700; padding:2px 4px; background:rgba(255,208,96,0.12); border-radius:4px; }
.grp-chain-select { background:rgba(0,0,0,0.6); color:#f0e8d0; border:1px solid #4a3a1a; padding:3px 6px; border-radius:4px; font-size:11px; font-family:inherit; }

/* ════ v109 — Polish UX ════ */

/* 1) FORCE — qty badge compact partout (override tous les modes) */
.item-qty,
.dr-cat-qty,
.inv-slot .item-qty,
.bank-grid .inv-slot .item-qty,
.dr-cat-slot .dr-cat-qty,
[class*="qty"]:not(input):not(select):not(.hdv-qty-buttons):not(.hdv-qty-btn):not(.transfer-qty-row) {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  top: auto !important; left: auto !important;
  background: rgba(0,0,0,0.85) !important;
  color: #ffd060 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,200,80,0.5) !important;
  height: auto !important;
  max-height: 18px !important;
  width: auto !important;
  max-width: 70% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
  text-shadow: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* 2) Portraits classes : -10% taille image dans cercle */
.cca-portrait img,
.chm-portrait,
.ccd-portrait img,
.dr-pd-portrait img,
.bur-portrait img,
.grp-mem img,
.char-rank-avatar {
  transform: scale(0.9);
  transform-origin: center;
}

/* 3) Sidebar — accordéon REDESIGN compact + perf */
.char-card-acc { transition: background .12s; will-change: background; }
.char-card-acc:hover { background: rgba(40,32,20,0.5); }
.char-card-acc.active { background: linear-gradient(90deg, rgba(255,208,96,0.18), rgba(255,208,96,0.04)) !important; border-color: #ffd060; }
.cca-row { padding: 6px 8px; min-height: 44px; }
.cca-portrait { width: 32px; height: 32px; }
.cca-portrait img { transform: scale(0.9); }
.cca-name { font-size: 12px; }
.cca-lv { font-size: 10px; padding: 1px 4px; }
.cca-line2 { gap: 4px; margin-top: 1px; }
.cca-status { font-size: 9px; padding: 1px 4px; }
.cca-toggle { padding: 2px 4px; font-size: 10px; opacity: 0.7; }
.cca-toggle:hover { opacity: 1; }
.cca-details { padding: 6px 8px 8px; }

/* 4) Page personnages — grille 2-3 colonnes desktop */
.chm-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}
@media (min-width: 1100px) { .chm-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1400px) { .chm-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.chm-card { padding: 14px; }
.chm-portrait { width: 52px; height: 52px; transform: scale(0.9); }
.chm-card-name { font-size: 16px; }
.chm-card-class { font-size: 11px; }
.chm-card-stats { gap: 4px; }
.chm-stat { padding: 6px 4px; }
.chm-stat b { font-size: 12px; }
.chm-stat small { font-size: 8px; }
.chm-card-actions { gap: 3px; padding-top: 8px; }
.chm-act { padding: 5px; font-size: 12px; }

/* 5) Dash history strip — REDESIGN moderne */
.dash-history-strip {
  background: linear-gradient(180deg, rgba(20,15,10,0.85) 0%, rgba(15,10,8,0.95) 100%) !important;
  border-top: 1px solid rgba(255,208,96,0.2) !important;
  padding: 6px 12px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}
.dash-history-strip::-webkit-scrollbar { height: 6px; }
.dash-history-strip::-webkit-scrollbar-thumb { background: rgba(255,208,96,0.3); border-radius: 3px; }
.dash-history-empty {
  color: #888 !important;
  font-style: italic;
  font-size: 11px !important;
  padding: 0 !important;
  background: none !important;
}
.dash-history-strip .dash-hist-entry,
.dash-history-strip > div:not(.dash-history-empty) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: #d8c8a8 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-history-strip .dash-hist-victory { border-color: rgba(80,200,120,0.4) !important; color: #c0ffc0 !important; }
.dash-history-strip .dash-hist-defeat  { border-color: rgba(220,80,80,0.4) !important; color: #ffc0c0 !important; }

/* 6) Page YouTube — utilise toute la largeur */
.yt-modern { max-width: none !important; padding: 24px 36px !important; }
.ytm-tiers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
@media (min-width: 1200px) { .ytm-tiers { grid-template-columns: repeat(4, 1fr) !important; } }
.ytm-money-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
@media (min-width: 1200px) { .ytm-money-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* 7) Modale bonus de panoplie — icônes + couleurs élémentaires */
.ied-set { padding: 12px 14px; margin-bottom: 12px; background: linear-gradient(180deg, rgba(40,30,20,0.6) 0%, rgba(15,12,10,0.9) 100%); border-radius: 10px; border-width: 2px; }
.ied-set-head { font-size: 14px; font-weight: 800; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 8px; }
.ied-set-head small { font-weight: 500; color: #c0b090; opacity: 0.85; font-size: 11px; }
.ied-set-pieces-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.ied-set-piece { font-size: 11px; padding: 3px 8px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; color: #888; }
.ied-set-piece.owned { background: rgba(80,200,120,0.15); border-color: rgba(80,200,120,0.4); color: #b0e8b0; }
.ied-set-bonuses { display: flex; flex-direction: column; gap: 6px; }
.ied-set-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0,0,0,0.35); border-radius: 6px; transition: opacity .15s; }
.ied-set-line.pending { opacity: 0.4; filter: grayscale(0.5); }
.ied-set-line.active { background: linear-gradient(90deg, rgba(80,200,120,0.12), rgba(0,0,0,0.35)); border-left: 3px solid #80c060; }
.ied-set-pieces { font-size: 12px; font-weight: 700; color: #ffd060; min-width: 80px; }
.ied-set-bonus { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ied-set-bonus-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: rgba(255,208,96,0.12);
  border: 1px solid rgba(255,208,96,0.3);
  border-radius: 5px;
  font-size: 12px; font-weight: 600;
  color: #ffe890;
}
.ied-set-bonus-item.elem-feu     { background: rgba(255,80,40,0.15); border-color: rgba(255,80,40,0.4); color: #ffb088; }
.ied-set-bonus-item.elem-eau     { background: rgba(80,160,255,0.15); border-color: rgba(80,160,255,0.4); color: #88c8ff; }
.ied-set-bonus-item.elem-terre   { background: rgba(180,140,60,0.15); border-color: rgba(180,140,60,0.4); color: #d8b878; }
.ied-set-bonus-item.elem-air     { background: rgba(120,255,180,0.15); border-color: rgba(120,255,180,0.4); color: #b0f0c8; }
.ied-set-bonus-item.elem-neutre  { background: rgba(200,200,200,0.12); border-color: rgba(200,200,200,0.3); color: #d8d8d8; }
.ied-set-bonus-item.elem-vita    { background: rgba(255,100,100,0.15); border-color: rgba(255,100,100,0.4); color: #ffb0b0; }
.ied-set-bonus-item.elem-sagesse { background: rgba(180,255,140,0.12); border-color: rgba(180,255,140,0.35); color: #d0f0a8; }
.ied-set-bonus-item.elem-pa      { background: rgba(255,200,80,0.18); border-color: rgba(255,200,80,0.45); color: #fff0b0; font-weight: 800; }
.ied-set-bonus-item.elem-pm      { background: rgba(80,255,200,0.18); border-color: rgba(80,255,200,0.45); color: #b0fff0; font-weight: 800; }
.ied-set-bonus-item .ied-bonus-ic { width: 14px; height: 14px; vertical-align: middle; }

/* 8) Archimonster — rendu visuel dans le combat */
.archi-glow {
  filter: drop-shadow(0 0 8px gold) drop-shadow(0 0 16px gold);
  animation: archi-pulse 1.6s infinite;
}
@keyframes archi-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px gold) drop-shadow(0 0 16px gold); }
  50% { filter: drop-shadow(0 0 14px #ffd060) drop-shadow(0 0 28px #ffa030); }
}

/* v110 — Spell card "Nv. X/6" lisibilité forcée */
.grim-spell-stars {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: rgba(0,0,0,0.65) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 3px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
  border: 1px solid rgba(255,208,96,0.4) !important;
}
.grim-spell.maxed .grim-spell-stars { color: #1a1410 !important; background: linear-gradient(135deg, #ffd060, #c89030) !important; border-color: #ffe890 !important; }
.grim-spell.locked .grim-spell-stars { color: #888 !important; background: rgba(0,0,0,0.5) !important; border-color: rgba(120,120,120,0.3) !important; }

/* ════ v110 — Sidebar ultra compact ════ */
.char-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  margin-bottom: 3px;
  background: rgba(20,18,15,0.5);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background .08s, border-color .08s;
  user-select: none;
}
.char-row:hover { background: rgba(40,32,20,0.6); }
.char-row.active {
  background: linear-gradient(90deg, rgba(255,208,96,0.18), rgba(255,208,96,0.04));
  border-color: #ffd060;
  box-shadow: 0 0 10px rgba(255,208,96,0.35);
}
.cr-portrait {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cr-portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(0.65); }
.cr-lv {
  position: absolute; bottom: -2px; right: -2px;
  background: #1a1410; color: #ffd060;
  font-size: 9px; font-weight: 800;
  padding: 1px 4px;
  border-radius: 5px;
  border: 1px solid #ffd060;
  line-height: 1;
}
.cr-meta { flex: 1; min-width: 0; }
.cr-name {
  font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.cr-row2 { display: flex; align-items: center; gap: 5px; }
.cr-status { font-size: 11px; flex-shrink: 0; }
.cr-status.dead  { filter: grayscale(0.8); opacity: 0.7; }
.cr-status.fight { animation: cr-pulse 1.5s infinite; }
@keyframes cr-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.cr-hp {
  flex: 1; height: 5px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
}
.cr-hp i { display: block; height: 100%; transition: width .25s; }
.cr-chips { display: flex; gap: 3px; flex-shrink: 0; }
.cr-chip {
  font-size: 9px; font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.1;
}
.cr-chip.pods { background: rgba(255,180,40,0.15); color: #ffc060; }
.cr-chip.pods.crit { background: rgba(255,60,60,0.25); color: #ff8080; animation: cr-pulse 1s infinite; }
.cr-chip.pts  { background: rgba(255,208,96,0.18); color: #ffe890; }

/* ════ v110 — Page personnages 4 colonnes + slider HP ════ */
.chm-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
@media (min-width: 1100px) { .chm-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1400px) { .chm-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1700px) { .chm-grid { grid-template-columns: repeat(4, 1fr) !important; } }
.chm-card { padding: 16px; }
.chm-card-name { font-size: 17px; }
.chm-card-stats { gap: 5px; }
.chm-stat b { font-size: 13px; }

.chm-thresh {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,100,100,0.08);
  border: 1px solid rgba(255,100,100,0.2);
  padding: 6px 10px;
  border-radius: 6px;
  margin: 10px 0 8px;
}
.chm-thresh-lbl { font-size: 11px; color: #d8a8a8; flex-shrink: 0; }
.chm-thresh-slider {
  flex: 1; height: 4px; min-width: 60px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.1); border-radius: 2px;
}
.chm-thresh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #ff8080, #c04040);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255,80,80,0.6);
}
.chm-thresh-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #ff8080, #c04040);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.chm-thresh-val { font-size: 12px; font-weight: 700; color: #ffb0b0; min-width: 32px; text-align: right; }

/* ════ v110 — YT page enrichie + scrollbar combat history ════ */

/* Hero amélioré */
.ytm-hero { padding: 28px 32px; }
.ytm-hero-emblem { background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.ytm-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #ff5050; margin-bottom: 6px; }
.ytm-hero-title { font-size: 32px; line-height: 1.1; }
.ytm-hero-cta-block { display: flex; flex-direction: column; gap: 8px; }
.ytm-hero-secondary { background: rgba(255,255,255,0.08) !important; box-shadow: none !important; font-weight: 600; }
.ytm-hero-secondary:hover { background: rgba(255,255,255,0.15) !important; }

/* KPIs bar */
.ytm-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.ytm-kpi {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1a1208 0%, #2a1a08 100%) !important;
  border: 2px solid #ffd060 !important;
  padding: 16px 20px; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,208,96,0.15);
}
.ytm-kpi-ic { font-size: 32px !important; display: flex; flex-shrink: 0; color: #ffd060; }
.ytm-kpi-info { flex: 1; min-width: 0; }
.ytm-kpi-info b {
  display: block !important;
  font-size: 22px !important;
  color: #ffe890 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255,208,96,0.4);
  line-height: 1.1;
}
.ytm-kpi-info small {
  display: block !important;
  font-size: 12px !important;
  color: #f0e4b8 !important;
  font-weight: 600 !important;
  margin-top: 4px;
  text-shadow: 0 1px 0 #000;
}

/* Next tier upsell */
.ytm-next-tier {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nt) 18%, transparent), rgba(0,0,0,0.6));
  border: 2px dashed var(--nt);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.ytm-next-ico { font-size: 36px; }
.ytm-next-text { flex: 1; }
.ytm-next-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--nt); margin-bottom: 4px; }
.ytm-next-title { font-size: 16px; color: #fff; margin-bottom: 6px; }
.ytm-next-title b { color: var(--nt); }
.ytm-next-gains { display: flex; flex-wrap: wrap; gap: 6px; }
.ytm-next-gains span { background: rgba(0,0,0,0.5); border: 1px solid var(--nt); color: #fff; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.ytm-next-btn {
  background: var(--nt); color: #1a1410;
  padding: 10px 16px; border-radius: 8px;
  font-weight: 800; text-decoration: none; flex-shrink: 0;
  transition: transform .12s, box-shadow .15s;
}
.ytm-next-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--nt) 50%, transparent); }

.ytm-section-sub { color: #b8b2a8; font-size: 13px; margin: -8px 0 16px; }

/* FAQ */
.ytm-faq { display: flex; flex-direction: column; gap: 8px; }
.ytm-faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 0;
  transition: background .15s;
}
.ytm-faq-item:hover { background: rgba(255,255,255,0.07); }
.ytm-faq-item summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700; color: #ffe890;
  font-size: 14px;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.ytm-faq-item summary::before { content: '▶'; font-size: 10px; color: #ffd060; transition: transform .15s; }
.ytm-faq-item[open] summary::before { transform: rotate(90deg); }
.ytm-faq-item summary::-webkit-details-marker { display: none; }
.ytm-faq-item p {
  margin: 0; padding: 0 16px 14px 36px;
  color: #d8d4cc; font-size: 13px; line-height: 1.6;
}
.ytm-faq-item p b { color: #fff; }

.ytm-back-bar { display: flex; justify-content: center; padding: 20px 0; }
.ytm-back-bar .ytm-btn { width: auto !important; padding: 12px 24px; }

/* Combat history scrollbar moderne */
.cl-list,
.cl-page,
.combat-log-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,208,96,0.4) rgba(0,0,0,0.3);
}
.cl-list::-webkit-scrollbar,
.cl-page::-webkit-scrollbar { width: 8px; height: 8px; }
.cl-list::-webkit-scrollbar-track,
.cl-page::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 4px; }
.cl-list::-webkit-scrollbar-thumb,
.cl-page::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,208,96,0.5), rgba(200,144,48,0.5));
  border-radius: 4px;
  border: 1px solid rgba(255,208,96,0.3);
}
.cl-list::-webkit-scrollbar-thumb:hover,
.cl-page::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255,208,96,0.8), rgba(200,144,48,0.8));
}

/* v110.1 — Banner d'erreur YouTube persistant */
.ytm-err-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, rgba(220,40,40,0.18) 0%, rgba(40,15,15,0.85) 100%);
  border: 2px solid #e04040;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 6px 24px rgba(220,40,40,0.25);
  position: relative;
  animation: ytErrSlide .25s ease-out;
}
.ytm-err-banner.quota {
  background: linear-gradient(135deg, rgba(255,160,40,0.18) 0%, rgba(50,30,10,0.85) 100%);
  border-color: #e8a040;
  box-shadow: 0 6px 24px rgba(232,160,64,0.25);
}
@keyframes ytErrSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.ytm-err-ico { font-size: 28px; line-height: 1; flex-shrink: 0; padding-top: 2px; }
.ytm-err-body { flex: 1; min-width: 0; }
.ytm-err-title { font-size: 16px; font-weight: 800; color: #ffb0b0; margin-bottom: 6px; }
.ytm-err-banner.quota .ytm-err-title { color: #ffd060; }
.ytm-err-code {
  display: inline-block; background: rgba(0,0,0,0.5);
  border: 1px solid currentColor; padding: 1px 6px;
  border-radius: 4px; font-size: 10px; font-weight: 700;
  margin-left: 6px; vertical-align: middle;
}
.ytm-err-detail {
  font-size: 12px; color: #f0d8d8;
  background: rgba(0,0,0,0.4);
  padding: 8px 10px; border-radius: 6px;
  margin-bottom: 8px;
  font-family: monospace;
  word-break: break-word;
}
.ytm-err-detail b { color: #ff8888; font-family: inherit; }
.ytm-err-fix {
  font-size: 13px; color: #d8d4cc;
  line-height: 1.5;
  padding: 6px 0;
}
.ytm-err-fix b { color: #fff; }
.ytm-err-fix a { color: #80b8ff; text-decoration: underline; }
.ytm-err-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  font-size: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ytm-err-close:hover { background: rgba(255,255,255,0.15); }

/* ════ v111 — Polish UX final ════ */

/* 1) Force visibilité des chars dans la sidebar (safety net) */
.left-nav #char-list { display: flex !important; flex-direction: column; gap: 4px; padding: 6px; min-height: 100px; }
.left-nav #char-list .char-row { display: flex !important; }
.left-nav #char-list:empty::before {
  content: 'Aucun personnage';
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 16px;
  display: block;
}

/* 2) Logo Jeton SVG — taille forcée pour s'afficher dans les listes */
.ytm-tier-perks .ytm-jeton-ico {
  display: inline-flex !important;
  align-items: center;
  width: 16px; height: 16px;
  margin-right: 2px;
  vertical-align: middle;
}
.ytm-tier-perks .ytm-jeton-ico svg { width: 16px !important; height: 16px !important; display: block; }
.ytm-tier-perks li span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
}

/* 3) Page YouTube : contraste forcé partout (pas de gris sur beige) */
.yt-modern, .yt-modern * { /* base reset */ }
.ytm-card, .ytm-card-dark { background: linear-gradient(180deg, rgba(20,18,15,0.92) 0%, rgba(10,8,6,0.96) 100%) !important; border-color: rgba(255,255,255,0.12) !important; }
.ytm-tier-perks li {
  color: #ffffff !important;
  background: rgba(0,0,0,0.55) !important;
  border-left: 3px solid var(--tc, #ffd060);
}
.ytm-tier-perks li em { color: #b8b2a8 !important; }
.ytm-tier-perks li b { color: var(--tc, #ffd060) !important; font-weight: 800; }
.ytm-card-sub { color: #d8d4cc !important; }
.ytm-money-text small, .ytm-card-sub, .ytm-section-sub { color: #d8d4cc !important; }
.ytm-stat small, .ytm-jc-stat-lbl, .ytm-perk-pill small { color: #ffd8a0 !important; }
.ytm-money-text b, .ytm-stat span, .ytm-jc-stat-val, .ytm-perk-pill span { color: #ffffff !important; }
.ytm-faq-item summary { color: #ffe890 !important; }
.ytm-faq-item p { color: #f0e8d0 !important; }
.ytm-steps li { color: #f0e8d0 !important; }
.ytm-steps li b { color: #ffe890 !important; }
.ytm-foot-note { color: #d0c090 !important; }
.ytm-tier-name { color: var(--tc) !important; text-shadow: 0 0 12px var(--tc); }
.ytm-tier-price { color: #ffffff !important; }
.ytm-tier-price small { color: #b8b2a8 !important; }

/* 4) Combat history — REDESIGN moderne, propre */
.dash-history-strip {
  background: linear-gradient(180deg, rgba(15,12,10,0.95) 0%, rgba(10,8,6,1) 100%) !important;
  border-top: 1px solid rgba(255,208,96,0.25) !important;
  padding: 8px 14px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,208,96,0.4) transparent;
}
.dash-history-strip::-webkit-scrollbar { height: 4px; }
.dash-history-strip::-webkit-scrollbar-thumb { background: rgba(255,208,96,0.4); border-radius: 2px; }
.dash-history-strip::-webkit-scrollbar-thumb:hover { background: rgba(255,208,96,0.7); }
.dash-history-empty {
  color: #888 !important;
  font-style: italic;
  font-size: 12px !important;
  margin: 0 auto;
  padding: 4px;
  background: none !important;
  border: none !important;
}

.dash-hist-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: linear-gradient(135deg, rgba(40,32,20,0.6), rgba(20,15,10,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: transform .12s, border-color .12s, box-shadow .12s !important;
  cursor: pointer !important;
  height: 32px;
  box-sizing: border-box;
}
.dash-hist-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255,208,96,0.5) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.dash-hist-item.victory {
  border-left: 3px solid #80c060 !important;
}
.dash-hist-item.defeat {
  border-left: 3px solid #c06060 !important;
  opacity: 0.75;
}
.dash-hist-item > span {
  font-weight: 600;
  color: #d8d4cc;
}
.dash-hist-loot {
  display: inline-flex !important;
  gap: 2px;
  margin-left: 2px;
  padding: 2px 4px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
}
.dash-hist-loot img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
}

/* 5) Encadrement zone : moins lourd (le contour est repassé en accent latéral) */
.farm-zone-nav-item {
  border: none !important;
  border-left: 3px solid transparent !important;
  background: rgba(20,18,15,0.4) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
}
.farm-zone-nav-item.selected {
  border-left-color: #ffd060 !important;
  background: linear-gradient(90deg, rgba(255,208,96,0.18), rgba(255,208,96,0.04)) !important;
  box-shadow: none !important;
}

/* v215 — Force la taille uniforme des icônes stats dans tooltips (14px max, pas de scale) */
.pd-tt-eff img,
.itip-eff img,
.pd-tt-stat-ic,
.itip-stat-ic,
.itip-eff-ic,
.pd-tt-eff-ic {
  transform: none !important;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  transform-origin: center;
  flex-shrink: 0;
}
.pd-tt-eff,
.itip-eff {
  font-size: 12px !important;
}

/* 7) Barre de defilement combat-log historique — plus visible */
.cl-list, .cl-page {
  scrollbar-width: thin;
  scrollbar-color: #ffd060 rgba(0,0,0,0.4);
}
.cl-list::-webkit-scrollbar { width: 10px; }
.cl-list::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(20,15,10,0.6));
  border-radius: 5px;
}
.cl-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffd060, #c89030);
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.4);
}
.cl-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe890, #ffd060);
}

/* ════ v113 — Polish UX ════ */

/* v197 — Icônes stats : taille uniforme (pas de scale) entre catalogue et équipé */
.pd-tt-eff img,
.itip-eff img,
.pd-tt-stat-ic,
.itip-stat-ic,
.itip-eff .stat-ic,
.pd-tt-eff .stat-ic {
  transform: none !important;
}
.pd-tt-eff, .itip-eff { font-size: 12.5px !important; line-height: 1.4; }

/* 2) Textes invisibles forcés en lisible */
.grim-tab,
.grim-tab.active,
.cl-filter,
.cl-filter.active,
.itip-name, .itip-lvl, .itip-foot {
  color: #ffe890 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.grim-tab small, .cl-filter small { color: #c0b090 !important; }

/* "offensifs" / "buffs" tab labels */
.grim-tab[onclick*="dmg"], .grim-tab[onclick*="buff"] {
  color: #ffd060 !important;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,208,96,0.3);
}
.grim-tab.active {
  background: linear-gradient(135deg, rgba(255,208,96,0.3), rgba(200,144,48,0.2)) !important;
  color: #fff !important;
  border-color: #ffd060 !important;
}

/* YT page : "Choisis ton niveau d'engagement" + "Aucune chaîne YouTube liée" */
.ytm-section-sub {
  color: #ffe8b0 !important;
  background: rgba(0,0,0,0.35);
  padding: 8px 14px;
  border-radius: 8px;
  border-left: 3px solid #ffd060;
  display: inline-block;
}
.ytm-status .ytm-status-lbl,
.ytm-status .ytm-status-tier { color: #ffffff !important; }
.ytm-status:not(.active) { background: linear-gradient(135deg, rgba(60,30,20,0.7), rgba(20,15,10,0.9)) !important; border-color: #c87060 !important; }
.ytm-status:not(.active) .ytm-status-lbl { color: #ffd0a0 !important; font-weight: 700; }
.ytm-status:not(.active) .ytm-status-tier { color: #ffe890 !important; }

/* 3) Archimonstre — contour violet visible */
.arena-fighter.is-archi {
  outline: 3px solid #c060ff !important;
  outline-offset: 2px;
  box-shadow: 0 0 24px rgba(192,96,255,0.7), 0 0 48px rgba(192,96,255,0.4) !important;
  animation: archiPulse 1.6s infinite ease-in-out !important;
}
.arena-fighter.is-archi::before {
  content: '★ ARCHI';
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c060ff, #8030c0);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #fff;
  box-shadow: 0 0 12px rgba(192,96,255,0.8);
  z-index: 10;
}
@keyframes archiPulse {
  0%, 100% { outline-color: #c060ff; box-shadow: 0 0 24px rgba(192,96,255,0.7), 0 0 48px rgba(192,96,255,0.4); }
  50%      { outline-color: #ff60ff; box-shadow: 0 0 36px rgba(255,96,255,0.9), 0 0 64px rgba(255,96,255,0.5); }
}

/* 4) Combat dashboard : utiliser l'espace gauche/droite */
.dash-combat-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 10px 14px !important;
}
.dash-combat-arena {
  flex: 1 1 auto;
  min-width: 0;
}
/* Colonnes latérales utiles : stats live ou résumé */
.dash-combat-side {
  flex: 0 0 200px;
  background: linear-gradient(180deg, rgba(20,15,10,0.7), rgba(10,8,6,0.9));
  border: 1px solid rgba(255,208,96,0.15);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.dash-combat-side h4 {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: #ffd060; margin: 0; text-transform: uppercase;
}
.dash-combat-side .dcs-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.3);
  padding: 5px 8px; border-radius: 5px;
  font-size: 11px; color: #f0e8d0;
}
.dash-combat-side .dcs-row b { color: #ffe890; }

/* ════ v114 — Runes / Forge / Combat sides / Tooltips fix ════ */

/* Encart runes dans la fiche objet équipé */
.ied-runes-block {
  margin-top: 12px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(160,80,255,0.08), rgba(20,15,30,0.6));
  border: 1px solid rgba(160,80,255,0.3);
  border-radius: 8px;
}
.ied-runes-head { font-size: 12px; font-weight: 800; color: #c0a0ff; margin-bottom: 6px; letter-spacing: 0.5px; }
.ied-runes-row { display: flex; gap: 6px; }
.ied-rune-slot {
  width: 60px; height: 50px;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--rc, #4a3a1a);
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px;
}
.ied-rune-slot.empty { border-style: dashed; color: #555; font-size: 18px; }
.ied-rune-slot.filled { box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 35%, transparent); }
.ied-rune-ico { font-size: 20px; }
.ied-rune-val { color: var(--rc, #ffd060); font-weight: 800; font-size: 11px; }

.ied-btn-forge {
  background: linear-gradient(135deg, #8040d0, #4020a0) !important;
  color: #fff !important; border: 1px solid #c060ff !important;
}
.ied-btn-forge:hover { box-shadow: 0 4px 14px rgba(160,80,255,0.5); }

/* Forge modal */
.forge-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 20px;
}
.forge-box {
  background: linear-gradient(180deg, #1a1410 0%, #0d0a08 100%);
  border: 2px solid #8060c0;
  border-radius: 14px;
  width: 100%; max-width: 600px; max-height: 85vh;
  overflow-y: auto; padding: 20px;
  box-shadow: 0 8px 40px rgba(160,80,255,0.4);
}
.forge-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.forge-head h3 { margin: 0; color: #c0a0ff; font-size: 20px; }
.forge-item-name { color: #d8d4cc; font-size: 13px; flex: 1; }
.forge-close {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
}
.forge-close:hover { background: rgba(255,80,80,0.3); }

.forge-section-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #ffd060;
  margin: 14px 0 8px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.forge-equipped-list, .forge-stash-list, .forge-fuse-list { display: flex; flex-direction: column; gap: 6px; }
.forge-empty { color: #888; font-style: italic; padding: 12px; text-align: center; background: rgba(0,0,0,0.3); border-radius: 6px; font-size: 12px; }

.forge-equipped, .forge-stash-item, .forge-fuse-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,15,10,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--rc, #4a3a1a);
  padding: 8px 10px; border-radius: 6px;
  transition: background .12s, border-color .12s;
}
.forge-stash-item { cursor: pointer; }
.forge-stash-item:hover { background: rgba(40,30,20,0.8); border-color: var(--rc); }
.forge-stash-item.common    { box-shadow: 0 0 4px rgba(200,200,200,0.2); }
.forge-stash-item.rare      { box-shadow: 0 0 8px rgba(80,160,240,0.3); }
.forge-stash-item.epic      { box-shadow: 0 0 12px rgba(160,80,255,0.4); }
.forge-stash-item.legendary { box-shadow: 0 0 18px rgba(255,200,80,0.5); border-color: #ffd060; }

.forge-ico { font-size: 22px; min-width: 28px; text-align: center; }
.forge-eq-info, .forge-stash-info, .forge-fuse-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.forge-eq-info b, .forge-stash-info b, .forge-fuse-info b { color: #fff; font-size: 13px; }
.forge-eq-info small, .forge-stash-info small, .forge-fuse-info small { color: #b8b2a8; font-size: 11px; }
.forge-rarity { text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.forge-stash-item.common    .forge-rarity { color: #c8c8c8; }
.forge-stash-item.rare      .forge-rarity { color: #80c0ff; }
.forge-stash-item.epic      .forge-rarity { color: #c080ff; }
.forge-stash-item.legendary .forge-rarity { color: #ffd060; }
.forge-preview { color: #80e090; font-weight: 700; font-size: 11px; }

.forge-btn-mini, .forge-btn-apply, .forge-btn-fusion-do {
  background: linear-gradient(135deg, #c89030, #8a6010);
  border: 1px solid #ffd060; color: #1a1410;
  padding: 5px 10px; border-radius: 5px;
  font-weight: 700; font-size: 11px; cursor: pointer;
}
.forge-btn-mini:hover, .forge-btn-apply:hover, .forge-btn-fusion-do:hover { transform: translateY(-1px); }
.forge-btn-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.forge-btn-fusion {
  background: linear-gradient(135deg, #6040a0, #4020a0);
  border: 1px solid #a060e0; color: #fff;
  padding: 4px 10px; border-radius: 5px;
  font-weight: 700; font-size: 11px; cursor: pointer;
  margin-left: auto;
}
.forge-fuse-help { color: #c0b090; font-size: 12px; padding: 8px 0; font-style: italic; }

/* ── Tooltips combat history (page char/historique combats) ── */
.cl-loot-tile { position: relative; cursor: pointer; }
.cl-loot-tile[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  background: rgba(20,15,10,0.95);
  border: 1px solid #ffd060;
  color: #f0e8d0;
  padding: 8px 12px; border-radius: 6px;
  font-size: 11px;
  white-space: pre-wrap;
  min-width: 180px; max-width: 260px;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ── Combat dashboard side blocks (utiles, pas vides) ── */
.dash-combat-row { gap: 10px !important; }

/* ════ v114 — Mur des Cristaux + Multi-craft ════ */

/* Multi-craft buttons row */
.rc-craft-row { display: flex; gap: 4px; flex-wrap: wrap; }
.rc-craft-row .rc-btn { flex: 1; min-width: 50px; padding: 4px 6px; font-size: 11px; }
.rc-btn.max { background: linear-gradient(135deg, #d04080, #8020a0); border-color: #ff60c0; color: #fff; }
.rc-btn.max:hover { box-shadow: 0 4px 12px rgba(208,64,128,0.5); }

/* Fresque page */
.frq-page { padding: 24px 32px; max-width: 1400px; margin: 0 auto; color: #f0e8d0; }
.frq-hero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, rgba(160,80,255,0.18), rgba(20,15,30,0.9));
  border: 2px solid rgba(160,80,255,0.4);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(160,80,255,0.25);
}
.frq-hero-emblem {
  font-size: 48px;
  filter: drop-shadow(0 0 12px rgba(160,80,255,0.7));
}
.frq-hero-text { flex: 1; }
.frq-hero-title { margin: 0 0 6px; font-size: 26px; color: #fff; text-shadow: 0 0 12px rgba(160,80,255,0.5); }
.frq-hero-sub { color: #d8d4cc; font-size: 13px; margin: 0; line-height: 1.5; }
.frq-hero-progress { text-align: center; flex-shrink: 0; min-width: 180px; }
.frq-progress-num { font-size: 28px; font-weight: 800; color: #c0a0ff; }
.frq-progress-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #908a80; margin-bottom: 8px; }
.frq-progress-bar { height: 6px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; border: 1px solid rgba(160,80,255,0.3); }
.frq-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8060c0, #c060ff); transition: width .3s; }

.frq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.frq-tier {
  background: linear-gradient(180deg, rgba(30,25,35,0.85) 0%, rgba(15,10,20,0.95) 100%);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.frq-tier:hover { transform: translateY(-2px); border-color: var(--fc); box-shadow: 0 8px 24px color-mix(in srgb, var(--fc) 30%, transparent); }
.frq-tier.ready  { border-color: var(--fc); box-shadow: 0 0 18px color-mix(in srgb, var(--fc) 40%, transparent); animation: frqReady 2s infinite; }
.frq-tier.sealed { border-color: var(--fc); background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 12%, rgba(15,10,20,0.95)) 0%, rgba(10,8,12,1) 100%); }
@keyframes frqReady { 0%,100% { box-shadow: 0 0 18px color-mix(in srgb, var(--fc) 40%, transparent); } 50% { box-shadow: 0 0 30px color-mix(in srgb, var(--fc) 65%, transparent); } }

.frq-tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.frq-tier-ico { font-size: 32px; filter: drop-shadow(0 0 6px var(--fc)); }
.frq-tier-info { flex: 1; min-width: 0; }
.frq-tier-title { font-size: 14px; font-weight: 800; color: var(--fc); }
.frq-tier-name { font-size: 11px; color: #b8b2a8; }
.frq-tier-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  padding: 4px 8px; border-radius: 5px;
  background: var(--fc); color: #1a1410;
}
.frq-tier-badge.sealed { background: linear-gradient(135deg, var(--fc), #fff); }
.frq-tier-badge.ready  { background: linear-gradient(135deg, #80e060, #40c020); color: #fff; }

.frq-tier-lore {
  font-size: 11px; font-style: italic; color: #c0b090;
  padding: 8px 10px; background: rgba(0,0,0,0.4); border-radius: 6px;
  border-left: 2px solid var(--fc);
  margin-bottom: 12px;
}
.frq-tier-reqs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.frq-req {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 5px;
  font-size: 11px;
  border-left: 2px solid #c04040;
}
.frq-req.met { border-left-color: #80c060; background: rgba(80,200,120,0.1); }
.frq-check { font-size: 12px; font-weight: 800; color: #ff6060; min-width: 14px; text-align: center; }
.frq-req.met .frq-check { color: #80e060; }
.frq-req-lbl { flex: 1; color: #d8d4cc; }
.frq-req.met .frq-req-lbl { color: #f0e8d0; }
.frq-req-val { color: #ffd060; font-weight: 700; font-size: 10px; white-space: nowrap; }
.frq-req.met .frq-req-val { color: #80e090; }

.frq-tier-btn {
  width: 100%; padding: 10px; border-radius: 6px;
  font-weight: 700; font-size: 13px; cursor: pointer; border: none;
  transition: transform .12s;
  font-family: inherit;
}
.frq-tier-btn.locked { background: rgba(0,0,0,0.5); color: #888; cursor: not-allowed; border: 1px solid #333; }
.frq-tier-btn.go { background: linear-gradient(135deg, var(--fc), color-mix(in srgb, var(--fc) 60%, #000)); color: #1a1410; box-shadow: 0 4px 14px color-mix(in srgb, var(--fc) 50%, transparent); }
.frq-tier-btn.go:hover { transform: translateY(-2px); }
.frq-tier-btn.done { background: rgba(80,200,120,0.15); color: #80e090; cursor: default; border: 1px solid #80c060; }

/* v115 — Bouton reconnect chat */
.lc-reconnect {
  background: linear-gradient(135deg, #d4a040, #a07020);
  color: #1a1410;
  border: 1px solid #ffd060;
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.lc-reconnect:hover { box-shadow: 0 4px 10px rgba(255,208,96,0.4); }

/* v115 — Pods badge couleurs selon état */
.arena-pill.pods.warn { background: rgba(255,180,40,0.25); color: #ffd060; border-color: #ffd060; }
.arena-pill.pods.crit { background: rgba(255,60,60,0.3); color: #ff8080; border-color: #ff5050; animation: arena-pods-crit 1.2s infinite; }
@keyframes arena-pods-crit { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* v115 — chip "+N pts" plus clair */
.cr-chip.pts { background: linear-gradient(135deg, #ffd060, #c89030); color: #1a1410; padding: 2px 6px; font-size: 9px; font-weight: 800; }

/* ════ v115 — Polish UX + Fresque + Mobile ════ */

/* 1) "Trier par" + boutons sort visibles */
.chm-toolbar { background: rgba(20,15,10,0.5); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.chm-toolbar-lbl {
  color: #ffe890 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.chm-sort {
  background: rgba(40,30,20,0.7) !important;
  border: 1px solid #4a3a1a !important;
  color: #f0e8d0 !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}
.chm-sort:hover { background: rgba(255,208,96,0.18) !important; color: #fff !important; border-color: #ffd060 !important; }
.chm-sort.active { background: linear-gradient(135deg, #c89030, #8a6010) !important; color: #1a1410 !important; border-color: #ffd060 !important; box-shadow: 0 2px 8px rgba(255,208,96,0.4); }

/* 2) Stats hero "Mes héros" — texte centré dans rectangles */
.chm-hs {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
}
.chm-hs-ic { font-size: 28px !important; }
.chm-hs-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chm-hs-info b { display: block; text-align: center; font-size: 18px; }
.chm-hs-info small { display: block; text-align: center; }

/* 3) Fresque — full width + cacher combat header */
body.panel-fresque .combat-dashboard,
body.panel-fresque .dash-history-strip { display: none !important; }
body.panel-fresque .main-content { padding-top: 10px; }
.frq-page { max-width: none !important; padding: 24px 28px; }
.frq-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; gap: 16px; }
@media (min-width: 1400px) { .frq-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1800px) { .frq-grid { grid-template-columns: repeat(4, 1fr) !important; } }

/* Visuel image écaille dans la fresque */
.frq-tier-img-wrap {
  position: relative;
  width: 64px; height: 64px;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 30%, transparent), transparent 70%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--fc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fc) 40%, transparent);
}
.frq-tier-img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.frq-tier.locked .frq-tier-img { filter: grayscale(0.8) brightness(0.5); }
.frq-tier-img-overlay {
  position: absolute; inset: 0;
  background: rgba(80,200,120,0.55);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.frq-tier-img-lock {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.frq-tier-bonus {
  margin-top: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--fc);
  background: rgba(0,0,0,0.4);
  padding: 3px 8px; border-radius: 5px;
  display: inline-block;
}

/* 4) Mobile responsive global */
@media (max-width: 768px) {
  /* Sidebar : drawer plein écran */
  .left-nav {
    position: fixed; top: 0; left: -100%; bottom: 0;
    width: 80vw; max-width: 320px;
    z-index: 9999;
    background: linear-gradient(180deg, #1a1410, #0f0a08);
    overflow-y: auto;
    transition: left .25s;
    box-shadow: 4px 0 20px rgba(0,0,0,0.6);
  }
  .left-nav.is-open { left: 0; }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 9998;
  }
  #sidebar-toggle {
    display: block !important;
    position: fixed; top: 8px; left: 8px;
    z-index: 10000;
    background: rgba(20,15,10,0.9); border: 1px solid #ffd060;
    color: #ffd060; font-size: 22px;
    width: 40px; height: 40px; border-radius: 8px;
  }
  /* Combat dashboard plus compact */
  .dash-titlebar { flex-wrap: wrap !important; padding: 6px 8px !important; gap: 4px !important; }
  .dash-resources { display: none !important; }
  .dash-actions { gap: 4px !important; }
  .dash-shop-btn, .dash-yt-btn, .dash-almanax-btn {
    padding: 4px 8px !important;
  }
  .dash-shop-text, .dash-yt-text, .dash-alm-text { display: none; }
  .dash-combat-row { padding: 6px !important; flex-direction: column !important; gap: 6px !important; }
  /* Page Personnages */
  .chm-grid { grid-template-columns: 1fr !important; }
  .chm-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .chm-hero-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
  /* Page YouTube */
  .ytm-tiers { grid-template-columns: 1fr !important; }
  .ytm-money-grid { grid-template-columns: 1fr !important; }
  .ytm-hero { flex-direction: column !important; text-align: center; }
  .ytm-hero-cta-block { width: 100%; }
  /* Page Fresque */
  .frq-grid { grid-template-columns: 1fr !important; }
  .frq-tier-head { flex-direction: column !important; text-align: center; }
  /* Modales : utiliser tout l'écran */
  .forge-overlay, .ied-overlay, .frq-page { padding: 8px !important; }
  .forge-box, .ied-box {
    max-width: 100% !important;
    max-height: 92vh !important;
    width: 100%;
  }
  /* Notifications dropdown */
  .notif-dropdown {
    width: 95vw !important;
    right: 2vw !important;
    max-height: 85vh;
  }
  /* Chat */
  .live-chat { width: calc(100% - 16px) !important; left: 8px; right: 8px; }
  /* Tabs perso hub : scroll horizontal */
  .perso-hub-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }
  .phub-tab { flex-shrink: 0; }
}

/* 5) Tooltip rune avec preview détaillé */
.forge-stash-info .forge-preview {
  font-size: 11px !important; color: #b8b2a8 !important;
  margin-top: 2px;
}
.forge-stash-item { padding: 10px 12px !important; }
.forge-stash-item .forge-ico { font-size: 28px !important; }

/* ════ v116 — Catalogue Runes ════ */
body.panel-runes .combat-dashboard,
body.panel-runes .dash-history-strip { display: none !important; }
body.panel-runes .main-content { padding-top: 10px; }
.rcat-page { padding: 24px 28px; max-width: none; color: #f0e8d0; }
.rcat-hero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, rgba(160,80,255,0.18), rgba(20,15,30,0.9));
  border: 2px solid rgba(160,80,255,0.4);
  border-radius: 16px; padding: 24px 28px; margin-bottom: 20px;
}
.rcat-hero-emblem { font-size: 52px; filter: drop-shadow(0 0 12px rgba(160,80,255,0.7)); }
.rcat-hero-text { flex: 1; }
.rcat-hero-title { margin: 0 0 6px; font-size: 26px; color: #fff; }
.rcat-hero-sub { color: #d8d4cc; font-size: 13px; line-height: 1.5; margin: 0; }
.rcat-hero-stash { text-align: center; min-width: 140px; }
.rcat-stash-num { font-size: 32px; font-weight: 800; color: #c0a0ff; }
.rcat-stash-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #908a80; }

.rcat-explain {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
.rcat-step {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(20,15,10,0.6);
  border: 1px solid rgba(255,208,96,0.2);
  padding: 12px 14px; border-radius: 10px;
}
.rcat-step-num {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #c89030, #8a6010);
  color: #1a1410; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rcat-step-text { font-size: 12px; color: #d8d4cc; }
.rcat-step-text b { color: #ffe890; }

.rcat-section-title {
  font-size: 18px; font-weight: 800; color: #ffe890;
  margin: 24px 0 12px;
  border-bottom: 2px solid rgba(255,208,96,0.3); padding-bottom: 6px;
}
.rcat-section-title small { font-size: 11px; color: #b8b2a8; font-weight: 500; margin-left: 8px; }

.rcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.rcat-rune {
  background: linear-gradient(180deg, rgba(40,30,22,0.92), rgba(15,10,8,0.98));
  border: 2px solid var(--rc, #888);
  border-radius: 14px; padding: 16px;
  position: relative;
  transition: transform .18s, box-shadow .25s, filter .25s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rc, #888) 30%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.05);
  opacity: 0.55;
  filter: grayscale(0.6);
}
.rcat-rune.owned, .rcat-rune:hover { opacity: 1; filter: none; }
.rcat-rune:hover { transform: translateY(-3px); box-shadow: 0 10px 26px color-mix(in srgb, var(--rc, #888) 55%, transparent); }
.rcat-rune.legendary { box-shadow: 0 0 22px color-mix(in srgb, var(--rc, #888) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
.rcat-rune.owned::before {
  content: '✓ EN STOCK'; position: absolute; top: -10px; right: 10px;
  background: var(--rc); color: #1a1208; font-size: 9px; font-weight: 900;
  padding: 3px 8px; border-radius: 6px; letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.rcat-rune-count { transition: all .2s; }
.rcat-rune.owned .rcat-rune-count {
  background: var(--rc) !important;
  color: #1a1208 !important;
  border-color: #fff !important;
  font-size: 15px;
}

.rcat-rune-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rcat-rune-icon { font-size: 32px; filter: drop-shadow(0 0 6px var(--rc)); }
.rcat-rune-titles { flex: 1; min-width: 0; }
.rcat-rune-name { font-size: 16px; font-weight: 800; color: var(--rc); }
.rcat-rune-rarity { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #908a80; text-transform: uppercase; }
.rcat-rune-count {
  background: rgba(0,0,0,0.5); border: 1px solid var(--rc);
  color: #fff; padding: 4px 10px; border-radius: 6px;
  font-weight: 800; font-size: 13px;
}
.rcat-rune-desc {
  font-size: 12px; color: #d8d4cc; line-height: 1.4;
  background: rgba(0,0,0,0.4); padding: 8px 10px; border-radius: 6px;
  margin-bottom: 10px;
}
.rcat-rune-effects {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.rcat-rune-effects li {
  font-size: 12px; color: #f0e8d0;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--rc) 12%, transparent);
  border-left: 3px solid var(--rc);
  border-radius: 4px;
}
.rcat-rune-effects li b { color: #fff; }
.rcat-rune-info {
  font-size: 10.5px; color: #908a80;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 3px;
}

/* v126 — Bandeau Sanctuaire premium contrasté */
.frq-source-note {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, #1a0a30 0%, #2a1840 100%);
  border: 2px solid #c060ff;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 18px 0;
  color: #ffffff;
  box-shadow: 0 0 22px rgba(192,96,255,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.frq-source-ico { font-size: 36px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(192,96,255,0.7)); }
.frq-source-text { font-size: 14px; line-height: 1.7; color: #f8f0ff; font-weight: 500; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.frq-source-text b { color: #ffd060; font-weight: 900; }
/* Hero du Sanctuaire — meilleur contraste */
.frq-page .frq-hero {
  background: linear-gradient(135deg, #1a1208 0%, #2a1808 60%, #0c0805 100%) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 14px;
  padding: 24px 28px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,208,96,0.15);
}
.frq-page .frq-hero-emblem { font-size: 56px !important; filter: drop-shadow(0 0 16px rgba(255,208,96,0.6)) !important; }
.frq-page .frq-hero-title {
  font-size: 28px !important; font-weight: 900 !important;
  color: #ffe890 !important;
  -webkit-text-fill-color: #ffe890 !important;
  background: none !important;
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,208,96,0.4) !important;
  letter-spacing: 1px;
}
.frq-page .frq-hero-sub {
  font-size: 14px !important;
  color: #f0e4b8 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 0 #000;
}
.frq-page .frq-hero-progress {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid #ffd060;
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}
.frq-page .frq-progress-num {
  font-size: 24px !important; font-weight: 900 !important;
  color: #ffe890 !important;
  text-shadow: 0 2px 0 #000;
}
.frq-page .frq-progress-lbl {
  font-size: 11px !important;
  color: #f0e4b8 !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ════ v117 — Polish portraits + archi + monstres morts ════ */

/* v126 — Niveau retiré du cercle, déplacé à côté du nom (.cr-name-lv) */
.cr-lv { display: none !important; }
.cr-name-lv {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #ffd060;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,208,96,0.5);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.chm-level-badge {
  position: absolute !important;
  bottom: 2px !important;
  right: 50% !important;
  transform: translateX(50%) !important;
  z-index: 5;
  background: rgba(0,0,0,0.85) !important;
  padding: 1px 7px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #ffd060 !important;
  border: 1px solid rgba(255,208,96,0.6) !important;
  white-space: nowrap;
  line-height: 1.2;
}
.chm-portrait-wrap, .cr-portrait, .cr-circle { overflow: visible !important; }

/* 2) Image perso 15% trop grande dans cercle "Mes héros" — on touche pas le cercle */
.chm-portrait-wrap {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid var(--cc);
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chm-portrait {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(0.85) !important;
  transform-origin: center;
  border: none !important;
  border-radius: 0 !important;
}

/* 3) Archimonstre — contour violet beaucoup plus visible */
.arena-fighter.is-archi {
  outline: none !important;
  position: relative;
}
.arena-fighter.is-archi .arena-sprite-wrap {
  border: 3px solid #c060ff !important;
  border-radius: 12px;
  padding: 4px;
  background: radial-gradient(circle, rgba(192,96,255,0.25) 0%, transparent 70%);
  box-shadow:
    0 0 16px rgba(192,96,255,0.7),
    0 0 32px rgba(192,96,255,0.5),
    inset 0 0 14px rgba(192,96,255,0.3);
  animation: archiSpriteGlow 1.8s infinite ease-in-out;
}
@keyframes archiSpriteGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(192,96,255,0.7), 0 0 32px rgba(192,96,255,0.5), inset 0 0 14px rgba(192,96,255,0.3); border-color: #c060ff; }
  50%      { box-shadow: 0 0 24px rgba(255,96,255,0.9), 0 0 48px rgba(255,96,255,0.6), inset 0 0 20px rgba(255,96,255,0.4); border-color: #ff60ff; }
}
.arena-fighter.is-archi .arena-sprite {
  filter: drop-shadow(0 0 8px #c060ff) !important;
}
.arena-fighter.is-archi::before {
  content: '★ ARCHIMONSTRE';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c060ff, #8030c0);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid #fff;
  box-shadow: 0 0 14px rgba(192,96,255,0.9);
  z-index: 10;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.arena-fighter.is-archi .arena-card {
  border-color: #c060ff !important;
  box-shadow: 0 0 12px rgba(192,96,255,0.4);
}

/* 4) Monstres morts — désactive TOUTES animations */
.arena-fighter.dead .arena-sprite,
.arena-fighter.dead .arena-sprite-wrap {
  animation: none !important;
  filter: grayscale(0.8) brightness(0.4) !important;
  opacity: 0.5 !important;
  transform: none !important;
}
.arena-fighter.dead {
  animation: none !important;
  pointer-events: none;
}
.arena-fighter.dead.anim-shake,
.arena-fighter.dead.anim-lunge,
.arena-fighter.dead.anim-crit,
.arena-fighter.dead.anim-buff-aura {
  animation: none !important;
}
.arena-fighter.dead .arena-card-name {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ════ v118 — Arène no-fight grid + visuel runes ════ */

/* Hauteur FIXE absolue : empêche tout saut visuel du header dashboard
   quel que soit l'état (combat / no-fight / mort) — v126. */
.arena-stage, .arena-stage.no-fight {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto;
  box-sizing: border-box;
}
.arena-stage.no-fight {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 16px 18px !important;
}
.dash-combat-arena { height: 100%; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dash-combat-arena .arena-header { flex-shrink: 0; }
.dash-combat-arena .arena-stage { flex: 1; min-height: 0; }
.arena-stage.no-fight .arena-side-players.solo-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  padding: 0 !important;
}
.arena-stage.no-fight .arena-fighter {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 130px !important;
  max-width: 170px !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .arena-stage.no-fight .arena-fighter {
    min-width: 100px !important;
    max-width: 130px !important;
  }
}
.arena-stage.no-fight .arena-divider,
.arena-stage.no-fight .arena-side-monsters { display: none !important; }
@media (max-width: 600px) {
  .arena-stage.no-fight .arena-side-players.solo-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  }
}

/* Visuel : objets équipés avec runes — bordure colorée selon meilleur métal */
.pd-slot.has-runes {
  position: relative;
  border-color: #c060ff !important;
  box-shadow: 0 0 12px rgba(192,96,255,0.45);
}
.pd-slot.has-runes::after {
  content: attr(data-rune-count);
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #c060ff, #8030c0);
  color: #fff; font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 6px;
  border: 1px solid #1a1410;
  z-index: 5;
}
.pd-slot.has-runes-legendary { border-color: #ffd060 !important; box-shadow: 0 0 16px rgba(255,208,96,0.6); }
.pd-slot.has-runes-rare      { border-color: #80b8ff !important; box-shadow: 0 0 14px rgba(128,184,255,0.5); }
.pd-slot.has-runes-common    { border-color: #b87333 !important; box-shadow: 0 0 10px rgba(184,115,51,0.4); }

/* Inventory slot avec runes */
.dr-cat-slot.has-runes,
.inv-slot.has-runes {
  border-color: #c060ff !important;
  box-shadow: inset 0 0 8px rgba(192,96,255,0.3);
}

/* Page Runes : ajouter section "Tes runes appliquées" */
.rcat-applied {
  background: rgba(160,80,255,0.06);
  border: 1px solid rgba(160,80,255,0.3);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.rcat-applied-title { color: #c0a0ff; font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.rcat-applied-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.rcat-applied-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.4); border-radius: 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--rc, #888);
}
.rcat-applied-row img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.rcat-applied-info { flex: 1; min-width: 0; font-size: 11px; }
.rcat-applied-info b { color: #ffe890; display: block; }
.rcat-applied-info small { color: #b8b2a8; }
.rcat-applied-row button {
  background: rgba(255,80,80,0.15); border: 1px solid #c04040;
  color: #ff8080; padding: 4px 8px; border-radius: 4px;
  font-size: 10px; cursor: pointer;
}
.rcat-applied-row button:hover { background: rgba(255,80,80,0.3); }

/* ════ v119 — Page Runes premium redesign ════ */
.dash-runes-btn {
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, #6040a0 0%, #3a2070 100%);
  border: 1px solid #a060e0;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(96,64,160,.4);
}
.dash-runes-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(160,96,255,.6); }
.dash-runes-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.4); color: #c0a0ff;
  border-radius: 6px;
  font-size: 16px;
}
.dash-runes-text { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.dash-runes-name { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.dash-runes-bal { font-size: 10px; opacity: .85; }

/* Page Runes premium */
.rcat-page { padding: 0 !important; max-width: none !important; }
.rcat-hero {
  background: linear-gradient(135deg, #2a1840 0%, #1a0a30 60%, #0a0518 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 36px 40px !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
.rcat-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(160,80,255,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(80,160,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.rcat-hero > * { position: relative; z-index: 1; }
.rcat-hero-emblem {
  font-size: 64px !important;
  filter: drop-shadow(0 0 20px rgba(192,96,255,0.8)) drop-shadow(0 0 40px rgba(192,96,255,0.4)) !important;
  animation: rcat-emblem-float 4s infinite ease-in-out;
}
@keyframes rcat-emblem-float {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-6px) rotate(3deg); }
}
.rcat-hero-title { font-size: 32px !important; letter-spacing: -0.5px; }
.rcat-hero-sub { font-size: 14px !important; max-width: 700px; }
.rcat-hero-stash {
  background: linear-gradient(135deg, rgba(160,80,255,0.25), rgba(80,40,140,0.4));
  border: 2px solid rgba(192,96,255,0.5);
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(160,80,255,0.3);
}
.rcat-stash-num { font-size: 38px !important; }
.rcat-fusion-btn {
  margin-top: 10px;
  background: linear-gradient(135deg, #c060ff, #8030c0) !important;
  color: #fff;
  border: 1px solid #ffa0ff;
  padding: 8px 14px; border-radius: 8px;
  font-weight: 800; font-size: 12px; cursor: pointer;
  width: 100%;
  transition: transform .12s, box-shadow .15s;
}
.rcat-fusion-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(192,96,255,0.5); }

.rcat-explain {
  margin: 24px 28px !important;
  background: linear-gradient(180deg, rgba(20,15,30,0.85), rgba(10,8,15,0.95));
  border: 1px solid rgba(160,80,255,0.2);
  border-radius: 12px;
  padding: 18px !important;
}
.rcat-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: linear-gradient(90deg, rgba(160,80,255,0.08), rgba(0,0,0,0.4)) !important;
  border: 1px solid rgba(160,80,255,0.2) !important;
  border-left: 4px solid #c060ff !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  transition: all .2s;
}
.rcat-step:hover {
  background: linear-gradient(90deg, rgba(160,80,255,0.18), rgba(0,0,0,0.5)) !important;
  border-color: rgba(192,96,255,0.6) !important;
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(160,80,255,0.3);
}
.rcat-step-num {
  flex-shrink: 0 !important;
  width: 32px !important; height: 32px !important;
  background: linear-gradient(135deg, #c060ff, #8030c0) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 900 !important; font-size: 16px !important;
  box-shadow: 0 0 12px rgba(192,96,255,0.5);
}
.rcat-step-text { font-size: 13px !important; color: #f0e8d0 !important; line-height: 1.55 !important; }
.rcat-step-text b { color: #ffe890 !important; }

.rcat-section-title {
  margin: 32px 28px 14px !important;
  font-size: 20px !important;
  border-bottom: 2px solid rgba(192,96,255,0.4) !important;
  padding-bottom: 10px !important;
}

.rcat-grid {
  margin: 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 16px !important;
}

.rcat-rune {
  background: linear-gradient(160deg, rgba(40,30,55,0.95) 0%, rgba(15,10,20,0.98) 100%) !important;
  border-width: 2px !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}
.rcat-rune::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--rc), transparent);
  z-index: 1;
}
.rcat-rune::after {
  content: '';
  position: absolute; top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 12%, transparent) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.rcat-rune > * { position: relative; z-index: 1; }
.rcat-rune.legendary {
  background: linear-gradient(160deg, rgba(60,45,15,0.95) 0%, rgba(15,10,5,0.98) 100%) !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--rc) 50%, transparent), inset 0 0 18px color-mix(in srgb, var(--rc) 8%, transparent) !important;
  animation: rcat-legendary-glow 2.5s infinite ease-in-out;
}
@keyframes rcat-legendary-glow {
  0%,100% { box-shadow: 0 0 24px color-mix(in srgb, var(--rc) 50%, transparent), inset 0 0 18px color-mix(in srgb, var(--rc) 8%, transparent); }
  50%     { box-shadow: 0 0 38px color-mix(in srgb, var(--rc) 75%, transparent), inset 0 0 26px color-mix(in srgb, var(--rc) 14%, transparent); }
}

.rcat-rune-icon {
  font-size: 42px !important;
  width: 56px; height: 56px;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.rcat-rune-name { font-size: 18px !important; }
.rcat-rune-rarity {
  background: color-mix(in srgb, var(--rc) 20%, rgba(0,0,0,0.5));
  color: var(--rc) !important;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px !important;
  display: inline-block;
}
.rcat-rune-count {
  background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 50%, #000)) !important;
  color: #fff !important;
  border: none !important;
  font-size: 16px !important;
  padding: 6px 12px !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rc) 50%, transparent);
}

.rcat-rune-desc {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 8%, rgba(0,0,0,0.5)), rgba(0,0,0,0.5)) !important;
  border-left: 3px solid var(--rc);
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-style: italic;
}

.rcat-rune-effects li {
  background: rgba(0,0,0,0.45) !important;
  border-left: 3px solid var(--rc) !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  border-radius: 5px;
}
.rcat-rune-effects li b { color: var(--rc) !important; }

.rcat-rune-info {
  font-size: 11px !important;
  background: rgba(0,0,0,0.4);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.08);
}

.rcat-applied {
  margin: 0 28px 24px !important;
  background: linear-gradient(135deg, rgba(160,80,255,0.1), rgba(40,20,80,0.4)) !important;
  border: 1px solid rgba(160,80,255,0.4) !important;
  padding: 18px 22px !important;
  border-radius: 14px;
}
.rcat-applied-title {
  font-size: 16px !important;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(160,80,255,0.25);
  margin-bottom: 12px !important;
}
.rcat-applied-row {
  background: linear-gradient(135deg, rgba(20,15,30,0.85), rgba(10,5,15,0.95)) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border-left-width: 4px !important;
  transition: transform .1s;
}
.rcat-applied-row:hover { transform: translateX(2px); }

@media (max-width: 768px) {
  .rcat-hero { flex-direction: column; padding: 20px !important; gap: 14px; text-align: center; }
  .rcat-hero-stash { width: 100%; }
  .rcat-grid, .rcat-applied, .rcat-explain { margin-left: 12px !important; margin-right: 12px !important; }
  .rcat-section-title { margin-left: 12px !important; margin-right: 12px !important; }
}

body.panel-runes .combat-dashboard,
body.panel-runes .dash-history-strip { display: none !important; }

/* ════ v240 — Patchnotes panel : layout 2-col, contraste MAX (texte clair sur fond noir) ════ */
.pn-page { max-width: 1400px; margin: 0 auto; padding: 16px 22px 40px; color: #fff8e0; background: #0a0604; min-height: 100vh; }
.pn-current-card {
  background: linear-gradient(135deg, rgba(255,212,96,0.20), rgba(180,120,40,0.12));
  border: 2px solid #ffd060; border-radius: 12px;
  padding: 18px 26px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 20px;
  box-shadow: 0 2px 14px rgba(255,212,96,0.15);
}
.pn-cur-version { font-size: 36px; font-weight: 900; color: #ffe890; text-shadow: 0 1px 4px rgba(0,0,0,0.7); letter-spacing: 1px; }
.pn-cur-label { color: #ffe0b8; font-size: 14px; font-weight: 600; }
/* Grille 2 colonnes sur grand écran */
.pn-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1100px) { .pn-grid { grid-template-columns: 400px 1fr; align-items: start; } }
.pn-roadmap {
  background: linear-gradient(180deg, rgba(140,80,220,0.20), rgba(60,30,100,0.12));
  border: 2px solid #a060ff; border-radius: 10px; padding: 12px 18px; margin: 0;
}
@media (min-width: 1100px) { .pn-roadmap { position: sticky; top: 8px; max-height: calc(100vh - 100px); overflow-y: auto; } }
.pn-roadmap[open] { padding-bottom: 18px; }
.pn-summary { cursor: pointer; font-weight: 900; font-size: 16px; padding: 6px 0; outline: none; user-select: none; color: #ffe890; }
.pn-summary:hover { color: #ffffff; }
.pn-summary::-webkit-details-marker { color: #ffd060; }
.pn-summary-ic { display: inline-block; margin-right: 8px; font-size: 18px; }
.pn-roadmap-tier { margin-top: 14px; }
.pn-roadmap-title {
  font-weight: 900; font-size: 13.5px; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.7px;
  padding-bottom: 5px; border-bottom: 1px solid currentColor;
}
.pn-roadmap-list { list-style: none; padding: 0; margin: 0; }
.pn-roadmap-list li {
  padding: 10px 13px; background: #0e0a04;
  border-left: 3px solid currentColor; border-radius: 4px;
  margin-bottom: 7px; font-size: 13.5px; line-height: 1.55; color: #fff8e0;
}
.pn-roadmap-list li b {
  color: #ffffff !important; font-weight: 900; display: block;
  margin-bottom: 4px; font-size: 14px;
}
.pn-roadmap-list li small {
  color: #f0e0b8 !important; font-size: 12px; line-height: 1.5;
}
.pn-history-col { min-width: 0; }
.pn-history-title {
  font-size: 18px; font-weight: 900; color: #ffe890;
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid #6a5230;
}
.pn-entry {
  background: linear-gradient(180deg, rgba(40,28,14,0.85), rgba(20,14,8,0.85));
  border: 1.5px solid #5a4a28; border-radius: 8px;
  margin-bottom: 10px; padding: 10px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pn-entry:hover { border-color: #8a6b3a; }
.pn-entry[open] {
  background: linear-gradient(180deg, rgba(50,36,18,0.95), rgba(30,22,12,0.95));
  border-color: #c89030; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.pn-version {
  display: inline-block;
  background: linear-gradient(180deg, #ffe890, #c89030);
  color: #1a1408; padding: 3px 10px; border-radius: 5px;
  font-weight: 900; font-size: 13px; margin-right: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pn-date { color: #d8c8a8; font-size: 12.5px; margin-right: 12px; font-weight: 600; }
.pn-title { color: #ffe8c0; font-weight: 700; font-size: 14.5px; }
.pn-body { padding: 12px 0 4px 4px; }
.pn-section {
  margin-top: 10px; padding: 12px 16px;
  background: #0e0a04; border-radius: 6px;
  border-left: 4px solid currentColor;
}
.pn-section-title {
  font-weight: 900; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 9px;
}
.pn-section-list {
  margin: 0; padding-left: 24px; line-height: 1.75;
  font-size: 14px; color: #fff8e0;
}
.pn-section-list li { margin-bottom: 6px; }
.pn-section-list li b, .pn-section-list li code {
  color: #ffe890; font-weight: 800;
}
.pn-footer { margin-top: 28px; text-align: center; color: #f0e0b8; font-size: 13px; }

/* ════ v253 — Animations combat améliorées ════ */
/* Crit ring plus dramatique (rouge-orange + double pulse) */
@keyframes crit-ring-mega {
  0% { transform: scale(0.4); opacity: 1; box-shadow: 0 0 0 0 rgba(255,80,40,0.95), inset 0 0 0 4px rgba(255,200,80,0.9); }
  50% { transform: scale(1.3); opacity: 0.85; box-shadow: 0 0 30px 10px rgba(255,80,40,0.6), inset 0 0 0 6px rgba(255,200,80,0.7); }
  100% { transform: scale(2.2); opacity: 0; box-shadow: 0 0 60px 20px rgba(255,80,40,0), inset 0 0 0 2px rgba(255,200,80,0); }
}
.anim-crit { animation: anim-crit-pulse 0.45s ease-out !important; }
@keyframes anim-crit-pulse {
  0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
  /* v255 — SANS rotation (retire le retournement gênant des cartes) */
  30% { transform: scale(1.15); filter: brightness(1.5) drop-shadow(0 0 14px rgba(255,80,40,0.95)); }
  60% { transform: scale(1.08); filter: brightness(1.3) drop-shadow(0 0 20px rgba(255,200,80,0.8)); }
  100% { transform: scale(1); filter: brightness(1); }
}
/* v255 — Shake SANS rotation */
@keyframes anim-shake-v2 {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-6px); }
  20%  { transform: translateX(6px); }
  30%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.anim-shake { animation: anim-shake-v2 0.45s ease-out !important; }
/* Cast flash : aura colorée selon élément (override couleur via --el-color sur le caster) */
@keyframes anim-cast-v2 {
  0% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: scale(1); }
  40% { filter: brightness(1.6) drop-shadow(0 0 20px var(--el-color, #ffd060)); transform: scale(1.1); }
  100% { filter: brightness(1); transform: scale(1); }
}
.anim-cast { animation: anim-cast-v2 0.5s ease-out !important; }
/* Projectile : trail + glow plus intense */
.combat-projectile {
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
}
/* Impact ring : effet ondes concentriques */
.impact-ring {
  border-width: 3px !important;
  box-shadow: 0 0 20px currentColor, inset 0 0 12px currentColor !important;
}
/* v255 — Buff aura : pulse + glow doré (sans rotation continue qui retournait les cartes) */
.anim-buff-aura {
  animation: buff-aura-pulse 1.0s ease-out !important;
}
@keyframes buff-aura-pulse {
  0%   { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
  40%  { transform: scale(1.10); filter: brightness(1.4) drop-shadow(0 0 18px rgba(255,212,96,0.9)); }
  100% { transform: scale(1); filter: brightness(1); }
}
/* v255 — Death : sink + fade (sans rotation 45°) */
.anim-die {
  animation: anim-die-v2 0.7s ease-in forwards !important;
}
@keyframes anim-die-v2 {
  0%   { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1) saturate(1); }
  40%  { transform: scale(1.05); opacity: 0.85; filter: brightness(1.4) saturate(0.6); }
  100% { transform: scale(0.85) translateY(18px); opacity: 0; filter: brightness(0.4) saturate(0); }
}

/* ════ v254 — Live combat feed (style chat Dofus) ════ */
.live-combat-feed {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 380px;
  background: linear-gradient(180deg, rgba(20,12,4,0.95), rgba(8,4,2,0.97));
  border: 1.5px solid #6a4818;
  border-radius: 8px;
  font-size: 12px;
  z-index: 9000;
  box-shadow: 0 4px 18px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  transition: max-height 0.2s ease;
}
.live-combat-feed.collapsed { max-height: 36px; overflow: hidden; }
.live-combat-feed .lcf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(180deg, #5a3818, #3a2010);
  border-bottom: 1px solid #6a4818;
  border-radius: 7px 7px 0 0;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.live-combat-feed .lcf-title { color: #ffd060; font-weight: 800; font-size: 12px; letter-spacing: 0.4px; }
.live-combat-feed .lcf-toggle {
  background: rgba(0,0,0,0.4); color: #ffd060; border: 1px solid #6a4818;
  border-radius: 3px; cursor: pointer; padding: 0 8px; font-size: 14px;
  font-weight: 900; line-height: 1.2;
}
.live-combat-feed.collapsed .lcf-toggle { transform: rotate(180deg); }
.live-combat-feed .lcf-body {
  padding: 8px 12px;
  overflow-y: auto;
  flex: 1;
  font-size: 11.5px;
  line-height: 1.5;
  color: #fff8e0;
  scrollbar-width: thin;
  scrollbar-color: #6a4818 rgba(0,0,0,0.3);
}
.lcf-body::-webkit-scrollbar { width: 6px; }
.lcf-body::-webkit-scrollbar-thumb { background: #6a4818; border-radius: 3px; }
.lcf-row {
  padding: 3px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  word-wrap: break-word;
}
.lcf-row.lcf-dmg { background: rgba(40,20,10,0.4); border-left-color: #ff8060; }
.lcf-row.lcf-crit { background: rgba(80,30,10,0.6); border-left-color: #ff5050; animation: lcf-flash 0.6s ease-out; }
.lcf-row.lcf-kill { background: rgba(60,20,10,0.5); border-left-color: #ff3030; }
.lcf-row.lcf-monster-attack { background: rgba(20,30,40,0.4); border-left-color: #80c8ff; }
.lcf-row.lcf-buff { background: rgba(60,40,80,0.3); border-left-color: #c890ff; }
.lcf-row.lcf-heal { background: rgba(20,60,30,0.4); border-left-color: #80f8a0; }
.lcf-row.lcf-victory { background: linear-gradient(90deg, rgba(80,200,80,0.20), rgba(40,80,30,0.15)); border-left-color: #80f8a0; font-weight: 700; padding: 5px 8px; }
.lcf-row.lcf-defeat { background: linear-gradient(90deg, rgba(200,80,80,0.20), rgba(80,30,30,0.15)); border-left-color: #ff5050; font-weight: 700; padding: 5px 8px; }
@keyframes lcf-flash { 0% { background: rgba(255,80,40,0.6); } 100% { background: rgba(80,30,10,0.6); } }
@media (max-width: 768px) {
  .live-combat-feed { width: calc(100vw - 24px); right: 12px; bottom: 60px; max-height: 280px; }
}

/* ════ v256 — Chat tabs cliquables + onglet Combat ════ */
.lc-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lc-tab {
  cursor: pointer !important; user-select: none;
  padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,0.3); color: #a89878; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.12s ease;
}
.lc-tab:hover { background: rgba(255,212,96,0.15); color: #ffd060; }
.lc-tab.active { background: linear-gradient(180deg, #5a3818, #3a2010); color: #ffd060; border-color: #6a4818; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.lc-tab-badge {
  background: #c84020; color: #fff; border-radius: 8px; padding: 0 5px;
  font-size: 9.5px; font-weight: 900; line-height: 1.4; min-width: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Header chat : empêcher le clic sur les tabs de toggler le chat */
.live-chat-head { padding: 6px 10px !important; gap: 8px; }
.lc-toggle { cursor: pointer; padding: 0 8px; user-select: none; }
/* v256 — Désactive l'overlay flottant live-combat-feed (intégré dans le chat tab) */
#live-combat-feed { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   v259 — Responsive mobile : login + header + banque + dashboard
   Breakpoint principal : ≤768px (tablette/mobile)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Login (auth-screen v99) ── */
  .auth-shell {
    flex-direction: column !important;
    padding: 8px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    height: 100vh !important;
  }
  .av99-pitch, .av99-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px !important;
    box-sizing: border-box;
  }
  .av99-hero { font-size: 22px !important; line-height: 1.3 !important; }
  .av99-tagline { font-size: 13px !important; }
  .av99-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .av99-feats { grid-template-columns: 1fr !important; }
  .av99-feat { padding: 8px !important; }
  .av99-cta-primary, .av99-cta-secondary { padding: 10px 12px !important; font-size: 13px !important; }
  .av99-card-title { font-size: 18px !important; }
  .av99-card-sub { font-size: 12px !important; }
  .av99-roadmap { gap: 6px !important; }
  .av99-roadmap-item { font-size: 10.5px !important; padding: 4px 8px !important; }

  /* ── Dashboard header / barre titre ── */
  .dash-titlebar {
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .dash-logo { flex-shrink: 0; }
  .dash-logo-main { font-size: 14px !important; }
  .dash-logo-sub { font-size: 9px !important; }
  .dash-resources {
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100%;
    justify-content: flex-start !important;
  }
  .dash-resources > * { font-size: 11px !important; }

  /* ── Banque ── */
  .bank-page, .bank-grid {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .bank-list, .bank-item-detail {
    width: 100% !important;
    min-width: 0 !important;
  }
  .bank-search-bar {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .bank-filter-btn { font-size: 11px !important; padding: 5px 8px !important; }
  .bsb-main { font-size: 13px !important; }
  /* Liste items en banque : portrait + texte plus compacts */
  .bank-row { padding: 6px !important; gap: 6px !important; }
  .bank-row-img { width: 36px !important; height: 36px !important; }
  .bank-row-name { font-size: 12px !important; }
  .bank-row-stack { font-size: 11px !important; }

  /* Modals : pleine largeur sur mobile */
  .rename-modal, .pnj-sell-modal, #pnj-sell-modal > div {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 10px auto !important;
  }

  /* Sidebar : drawer overlay sur mobile */
  .left-nav { z-index: 1000; }
  #sidebar-toggle { display: block !important; z-index: 1001; }
}

@media (max-width: 480px) {
  /* Smartphones étroits */
  .av99-hero { font-size: 18px !important; }
  .av99-stats { grid-template-columns: 1fr 1fr !important; }
  .av99-stat b { font-size: 16px !important; }
  .dash-logo-text { display: none; }
  .dash-resources > * { font-size: 10px !important; padding: 2px 6px !important; }
  /* Chat live : occupe presque toute la largeur sous 480px */
  .live-chat { left: 4px !important; right: 4px !important; bottom: 4px !important; width: auto !important; max-width: none !important; }
  .lc-tab { font-size: 10px !important; padding: 3px 6px !important; }
}

/* v259 — Empêche la sélection de texte quand on clique sur les boutons d'ordre des sorts */
.spord-list, .spord-row, .spord-actions, .spord-name-row, .spord-name, .spord-chip, .spord-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ════════════════════════════════════════════════════════
   OFFLINE RECAP MODAL
   ════════════════════════════════════════════════════════ */
.offline-hero {
  text-align: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(184,120,8,0.2), rgba(60,40,20,0.4));
  border: 2px solid var(--gold);
  border-radius: 10px;
  margin-bottom: 14px;
}
.offline-hero-time {
  font-family: var(--font-main); font-size: 28px; font-weight: 800;
  background: linear-gradient(180deg, #ffe89a 0%, #c89030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
}
.offline-hero-sub {
  font-size: 12px; color: #c8b888; margin-top: 6px;
  font-style: italic;
}
.offline-totals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.offline-total {
  background: linear-gradient(180deg, #2e2418, #1a1408);
  border: 1px solid #4a3a1e;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}
.ot-val {
  font-family: var(--font-main);
  font-size: 18px; font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.3px;
}
.ot-lbl {
  font-size: 10px; font-weight: 700;
  color: #a89878;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.offline-list { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; }
.offline-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a2418, #1a1408);
  border-radius: 6px;
}
.offline-name { font-family: var(--font-main); font-weight: 800; font-size: 14px; }
.offline-stats {
  display: flex; gap: 10px;
  font-size: 11px; color: #c8b888;
  font-weight: 700;
}