/* Stats hub (Classements / Index / Marché / Héros) — premium charcoal-gold polish.
   Reuses site.css tokens; loaded only by stats.html. Class names match stats.js exactly. */

/* subhero KPI ornament — a small gold rule between the lede and the numbers */
.subhero .kpis{position:relative}
.subhero .kpis::before{content:"";position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:64px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(231,182,88,.8),transparent)}

.stats-hub{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start;margin-top:8px}
@media(max-width:760px){.stats-hub{grid-template-columns:1fr}}

/* ── rail: premium pills with an active gold fill + left indicator ── */
.alm-rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:90px}
@media(max-width:760px){.alm-rail{flex-direction:row;flex-wrap:wrap;position:static}}
.alm-rail .rl{position:relative;display:block;text-align:left;padding:12px 16px;border-radius:11px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(24,32,55,.5),rgba(11,16,30,.52));
  color:var(--parch-dim);font-weight:700;font-size:.96rem;cursor:pointer;font-family:var(--font-body);
  transition:color .18s,border-color .18s,background .18s,transform .18s;overflow:hidden}
.alm-rail .rl::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:0 3px 3px 0;background:var(--gold);transition:height .2s}
.alm-rail .rl:hover{color:var(--parch);border-color:var(--line-strong);transform:translateX(2px)}
.alm-rail .rl:hover::before{height:46%}
.alm-rail .rl.on{color:var(--ink-900);background:linear-gradient(180deg,var(--gold-200),var(--gold));
  border-color:var(--gold-600);box-shadow:0 12px 26px -14px var(--glow-gold)}
.alm-rail .rl.on::before{height:0}

/* ── content panel ── */
.alm-content{padding:26px 26px 30px;min-height:420px}
.alm-content h2{font-size:1.6rem;margin:0 0 5px;font-family:var(--font-display);color:var(--gold-100)}
.alm-content .sub{color:var(--parch-faint);font-size:.92rem;margin:0 0 18px}

/* ── tabs + chips ── */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.015);
  color:var(--parch-dim);font-weight:700;font-size:.82rem;cursor:pointer;transition:.15s;font-family:var(--font-body)}
.tab-ic{width:17px;height:17px;object-fit:contain;flex:none}
.tab-ar{color:var(--gold);font-weight:800;font-size:.95em;line-height:1}
.tab:hover{color:var(--parch);border-color:var(--line-strong)}
.tab.on{color:var(--gold-100);border-color:var(--gold-600);background:rgba(231,182,88,.12);
  box-shadow:inset 0 0 0 1px rgba(231,182,88,.12)}

/* ── KPI strip (Pouls du Royaume): gold-accented cards that lift on hover ── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:34px}
@media(max-width:880px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{position:relative;overflow:hidden;padding:18px 16px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(24,32,55,.66),rgba(11,16,30,.7));
  box-shadow:0 20px 44px -30px rgba(0,0,0,.85);transition:transform .25s,border-color .25s}
.kpi::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,182,88,.55),transparent)}
.kpi:hover{transform:translateY(-3px);border-color:rgba(231,182,88,.3)}
.kpi .v{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--parch);line-height:1.05}
.kpi .k{color:var(--parch-faint);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-top:7px}
.kpi .v.gold{color:var(--gold-200)}
.kpi .v.live{color:var(--ok)}
/* icon-tile variant: real game icon + value + label (Pouls strip + hero/item detail grids) */
.kpiq{display:flex;align-items:center;gap:13px;text-align:left}
.kpiq .kpi-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(231,182,88,.16),rgba(231,182,88,.04));border:1px solid rgba(231,182,88,.26)}
.kpiq .kpi-ic img{width:24px;height:24px;object-fit:contain}
.kpiq .kpi-tx{min-width:0}
.kpiq .v{font-size:1.5rem}
.kpiq .k{margin-top:4px}

/* ── tables — leaderboard feel: medal top-3, zebra, row hover ──
   Unified LEFT alignment (owner pref): every header + cell lines up at the same left edge per column,
   so nothing floats and each value clearly belongs under its labelled header. */
.tbl th,.tbl td{text-align:left;vertical-align:middle}
.tbl td.r,.tbl th.r{text-align:left}
.tbl th{white-space:nowrap}
.tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.014)}
.tbl tbody tr:hover td{background:rgba(231,182,88,.07)}
.tbl .rk{color:var(--gold);font-weight:800;width:56px;font-family:var(--font-display);font-size:1rem}
.tbl tbody tr:nth-child(1) .rk{color:#ffd86b;text-shadow:0 0 12px rgba(255,216,107,.45)}
.tbl tbody tr:nth-child(2) .rk{color:#d4dae2}
.tbl tbody tr:nth-child(3) .rk{color:#e0954a}
.tbl tbody tr:nth-child(1) .nm{color:var(--gold-100)}
.tbl .nm{color:var(--parch);font-weight:700}
.ico-it{width:26px;height:26px;vertical-align:-7px;margin-right:9px}
.emoji-it{display:inline-block;width:26px;margin-right:9px;text-align:center;vertical-align:-2px}

/* pills + tier badges */
.tier{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.74rem;font-weight:800;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03)}
.pill-gold{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 11px;border-radius:999px;color:var(--gold-100);font-weight:700;font-size:.86rem;
  background:rgba(231,182,88,.12);border:1px solid rgba(231,182,88,.3)}
.pill-tok{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 11px;border-radius:999px;color:var(--violet);font-weight:700;font-size:.86rem;
  background:rgba(155,108,255,.12);border:1px solid rgba(155,108,255,.32)}
.usd{color:var(--parch-faint);font-size:.85em;margin-left:5px}
.ccy-ic{width:14px;height:14px;object-fit:contain}
.ccy-bar{margin:2px 0 12px}
.rar-common{color:var(--parch-dim)}
.rar-uncommon{color:var(--ok)}
.rar-rare{color:var(--azure)}
.rar-epic{color:var(--violet)}
.rar-mythic{color:var(--warn)}
.bientot{color:var(--gold-200);font-weight:700}

.loadmore{margin:20px auto 0;display:block;padding:11px 24px;border-radius:11px;border:1px solid var(--line-strong);
  background:rgba(231,182,88,.08);color:var(--gold-100);font-weight:800;cursor:pointer;font-family:var(--font-body);transition:.16s}
.loadmore:hover{background:rgba(231,182,88,.18);border-color:var(--gold-600)}
.linkcell{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.linkcell:hover .nm{color:var(--gold-100);text-decoration:underline}
/* affordance: a gold chevron fades in on hover so it reads as "open the item page" */
.linkcell .nm::after{content:"›";margin-left:7px;color:var(--gold);font-weight:800;opacity:0;transition:opacity .15s}
.linkcell:hover .nm::after{opacity:.95}

/* ── drill-down detail header (item / hero page): icon tile + title + rarity, clear of the back button ── */
.alm-content .back{margin-bottom:24px}
.dhead{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.dhead-ic{flex:none;width:64px;height:64px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(24,32,55,.92),rgba(10,15,28,.96));border:1px solid rgba(231,182,88,.42);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.dhead-ic img{width:42px;height:42px;display:block}
.dhead-emoji{font-size:36px;line-height:1}
.dhead-tx{min-width:0}
.dhead-tx h2{margin:0;line-height:1.12}
.dhead-tx .sub{margin:6px 0 0}
.empty{padding:50px 10px;text-align:center;color:var(--parch-faint)}
.err{padding:32px 10px;text-align:center;color:var(--blood)}

/* Taverne cards: five STACKED tiles — icon on top, pill value, label in full (wraps, never truncated) */
.tav-kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.tav-kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.tav-kpis .kpiq{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:9px;padding:16px 10px 14px}
.tav-kpis .kpi-ic{width:40px;height:40px}
.tav-kpis .kpi-tx{min-width:0;display:flex;flex-direction:column;align-items:center}
.tav-kpis .kpi-tx .v{white-space:nowrap;font-size:1.05rem}
.tav-kpis .kpi-tx .k{margin-top:5px;line-height:1.3;white-space:normal;overflow:visible;letter-spacing:.08em}
.tav-kpis .tav-holder{color:var(--gold,#e8c15a);font-weight:800;margin-top:2px;white-space:nowrap}
.tav-mult{font-weight:800;color:#8fe3a4}