/* Elaris — classement : puce « Toi », bandeau de saison, podium à socles, tableau.
   Structure du design Claude Design (templates/, 2026-09-14) dans les tokens Afterglow. Or / argent /
   bronze restent réservés au podium : ce sont des médailles, pas des couleurs de thème. */

.lb-podium { --medal-gold: #ffc266; --medal-silver: #c9d8f2; --medal-bronze: #d69a5c; }

.lb-head h1 { margin: var(--s2) 0 var(--s5); }
/* Onglets Général / Saison à gauche, puce « Toi » à droite (design). Même pastille que le marché. */
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.lb-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(5, 7, 13, 0.7); box-shadow: inset 0 0 0 1px var(--border); }
.lb-tabs a { padding: 9px 16px; border-radius: 9px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: var(--ink-dim); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.lb-tabs a:hover { color: var(--ink); }
.lb-tabs a.is-on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.lb-you {
  display: inline-flex; align-items: center; gap: var(--s3); padding: 9px 15px; border-radius: 11px;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--border-strong); font-variant-numeric: tabular-nums;
}
.lb-you-label { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-faint); }
.lb-you strong { font-size: 0.95rem; color: var(--ink); }
.lb-you-score { font-size: 0.82rem; color: var(--ink-soft); }
.lb-move { font-size: 0.74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-move.is-up { color: var(--success); }
.lb-move.is-down { color: var(--danger); }

/* ── Bandeau de saison ── */
.lb-season {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--border);
  background: linear-gradient(150deg, rgba(58, 92, 150, 0.28), rgba(8, 12, 22, 0.7));
}
.lb-season-desc { margin-top: 6px; font-size: 0.85rem; color: var(--ink-dim); }
.lb-last { margin-top: 6px; font-size: 0.78rem; color: var(--accent); }
.lb-countdown { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.lb-countdown strong { font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Podium ── */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--s4); margin: var(--s6) 0 var(--s5); }
.lb-step { --c: var(--medal-gold); --glow: rgba(255, 194, 102, 0.35); --h: 104px; --sz: 94px;
  flex: 1 1 190px; max-width: 250px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); order: 2; }
.lb-step.is-silver { --c: var(--medal-silver); --glow: rgba(201, 216, 242, 0.26); --h: 76px; --sz: 74px; order: 1; }
.lb-step.is-bronze { --c: var(--medal-bronze); --glow: rgba(214, 154, 92, 0.26); --h: 62px; --sz: 74px; order: 3; }
.lb-avatar {
  position: relative; width: var(--sz); height: var(--sz); border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card); box-shadow: inset 0 0 0 3px var(--c), 0 0 34px var(--glow); text-decoration: none;
}
.lb-avatar-clip { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; }
.lb-avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lb-avatar { flex: none; }
.lb-initial { font-size: 1.6rem; color: var(--c); }
.lb-badge {
  z-index: 1; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #06101f; font-size: 0.8rem; font-weight: 700;
}
.lb-step-info { width: 100%; min-width: 0; text-align: center; }
.lb-step-name { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-step.is-gold .lb-step-name { font-size: 1.2rem; }
.lb-step-name:hover { color: #fff; }
.lb-step-score { margin-top: 5px; font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lb-step-cards { margin-top: 3px; font-size: 0.68rem; color: var(--ink-faint); }
.lb-pedestal {
  width: 100%; height: var(--h); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 11px;
  border-radius: 14px 14px 0 0; background: linear-gradient(180deg, rgba(20, 31, 54, 0.85), rgba(8, 12, 22, 0.35));
  box-shadow: inset 0 2px 0 0 var(--c), inset 0 0 0 1px var(--border);
}
.lb-prize { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--c); font-variant-numeric: tabular-nums; }
.lb-prize-label { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--ink-faint); text-align: center; }

/* ── Tableau ── */
.lb-table { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: rgba(8, 12, 22, 0.6); }
.lb-row {
  display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s5); border-bottom: 1px solid rgba(188, 215, 255, 0.07);
  transition: background var(--t-fast);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:not(.lb-row-head):hover { background: rgba(188, 215, 255, 0.05); }
.lb-row.is-me { background: rgba(188, 215, 255, 0.09); box-shadow: inset 2px 0 0 0 var(--accent); }
.lb-row-head { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding-top: 13px; padding-bottom: 13px; }
.lb-row-head > span { font-size: inherit; font-weight: 400; color: inherit; white-space: nowrap; }
.lb-c-rank { flex: 0 0 44px; font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.lb-c-player { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink-soft); }
.lb-c-player .avatar-sm { width: 30px; height: 30px; border-radius: 50%; }
.lb-row.is-me .lb-c-player { color: var(--ink); }
.lb-name { min-width: 0; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-c-player:hover .lb-name { color: #fff; }
.lb-c-num { flex: 0 0 112px; text-align: right; font-variant-numeric: tabular-nums; }
.lb-value { font-size: 0.82rem; color: var(--ink); }
/* 112 px : « VALEUR GAGNÉE » / « CARTES GAGNÉES » de l'onglet Saison tiennent sur une ligne. */
.lb-c-cards { flex-basis: 112px; font-size: 0.76rem; color: var(--ink-dim); }
.lb-c-move { flex-basis: 76px; }
.lb-c-reward { flex-basis: 96px; font-size: 0.74rem; color: var(--ink-faint); }

@media (max-width: 720px) {
  .lb-c-cards, .lb-c-reward { display: none; }
  .lb-row { padding-left: var(--s3); padding-right: var(--s3); }
  .lb-c-rank { flex-basis: 32px; }
  .lb-c-num { flex-basis: 80px; }
  .lb-c-move { flex-basis: 56px; }
}
@media (max-width: 480px) {
  .lb-podium { gap: var(--s2); }
  .lb-step.is-silver, .lb-step.is-bronze { --sz: 58px; } .lb-step.is-gold { --sz: 72px; }
  .lb-prize-label { display: none; }
  .lb-countdown { text-align: left; }
}