/*
 * ══════════════════════════════════════════════════════════════
 * GolD — refonte visuelle (version B)
 * Chargée APRÈS styles.css et nevo-styles.css : elle redéfinit les jetons du
 * design system NEVO (or au lieu du teal, polices Chakra Petch / IBM Plex Sans)
 * puis remonte les composants partagés — barre du haut, onglets, panneaux,
 * tableaux, cartes. Les composants propres aux pages refaites portent le
 * préfixe `gb-`.
 * ══════════════════════════════════════════════════════════════ */

/* ─── JETONS ─────────────────────────────────────────────────── */
:root {
  --bg:            #0A0D13;
  --bg-surface:    #121722;
  --bg-raised:     #0E131C;
  --bg-overlay:    #1B2230;
  --bg-hover:      rgba(255,255,255,0.035);

  --border:        #1F2836;
  --border-strong: #2A3140;

  --accent:        #F5B942;
  --accent-soft:   rgba(245,185,66,0.12);
  --accent-glow:   none;
  --accent-deep:   #1A1608;
  --accent-line:   #4A3B14;
  --on-accent:     #15110A;

  --eco:           #4FD1E8;
  --limited:       #A8DC5C;
  --eco-soft:      rgba(79,209,232,0.12);
  --eco-deep:      #0D1F26;
  --eco-line:      #1C4250;

  --positive:      #6EE7A8;
  --positive-soft: #10291E;

  --danger:        #FF8F7D;
  --danger-strong: #FF7A66;
  --danger-soft:   #2A1714;
  --danger-glow:   none;

  --warning:       #F6CD72;
  --warning-soft:  rgba(246,205,114,0.12);

  --text-1:        #F2F4F8;
  --text-2:        #9BA6B7;
  --text-3:        #6F7B8E;
  --text-soft:     #C9D0DB;

  --font-display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
  --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 8px;  --r: 12px;  --r-lg: 20px;  --r-xl: 28px;

  /* Jetons de l'ancien styles.css (rose / cyan / or pâle), encore lus par les
     pages non refaites : on les rabat sur la palette B pour qu'aucune page
     ne garde l'ancien look. */
  --font-display-legacy: var(--font-display);
  --bg-ink:          var(--bg);
  --bg-steel:        var(--bg-surface);
  --bg-panel:        var(--bg-surface);
  --bg-panel-strong: var(--bg-raised);
  --bg-card:         var(--bg-raised);
  --line-soft:       var(--border);
  --line-strong:     var(--border-strong);
  --line-cyan:       var(--border-strong);
  --line-pink:       var(--border-strong);
  --text-main:       var(--text-1);
  --text-muted:      var(--text-2);
  --text-accent:     var(--accent);
  --text-olive:      var(--positive);
  --text-pink:       var(--accent);
  --text-cyan:       var(--text-1);
  --success:         var(--positive);
  --shadow-lg:       none;
  --shadow-md:       none;
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--text-1); }
a:hover { color: var(--accent); opacity: 1; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; }

.metric-note, .muted-text { color: var(--text-2); }

.font-mono, .pts, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pts--pos { color: var(--positive); }
.pts--neg { color: var(--danger); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── MISE EN PAGE ───────────────────────────────────────────── */
.nevo-layout { display: block; min-height: 0; }
.nevo-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6) 72px;
}
@media (max-width: 768px) {
  .nevo-main { padding: var(--sp-3) var(--sp-4) 48px; }
}

/* ─── BARRE DU HAUT ──────────────────────────────────────────── */
.nav-top {
  position: static;
  height: auto;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--sp-6);
  background: transparent;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.nav-top__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-1);
  text-transform: uppercase;
  gap: 12px;
  margin-right: 0;
}
.nav-top__brand:hover { color: var(--text-1); }
.nav-top__brand-mark { width: 34px; height: 34px; flex: none; }
.nav-top__brand-server { color: var(--text-3); font-weight: 500; font-size: 16px; }

.nav-top__links {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  margin: 0 auto;
}
.nav-top__link {
  padding: 9px 16px;
  border-radius: 10px;
  color: #B4BDCB;
  font-size: 15px;
  font-weight: 500;
}
.nav-top__link:hover { color: var(--text-1); background: var(--bg-overlay); }
.nav-top__link--active,
.nav-top__link--active:hover { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.nav-top__right { margin-left: 0; gap: var(--sp-2); }
.nav-top__right .nav-top__link.nav-top__action {
  border: 1px solid var(--border-strong);
  font-size: 14px;
  padding: 8px 14px;
}
.nav-top__right .nav-top__link.nav-top__action.nav-top__link--active { border-color: var(--accent); }

.tracked-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 8px 6px 6px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.tracked-player-chip.is-hidden { display: none; }
.tracked-player-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-deep);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.tracked-player-link { color: var(--text-1); font-weight: 600; font-size: 14px; }
.tracked-player-edit {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-2);
}
.tracked-player-edit:hover { color: var(--accent); background: var(--bg-overlay); }
.tracked-player-edit-icon { width: 15px; height: 15px; fill: currentColor; }

.language-flags {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.language-flags .language-flag-link {
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  filter: none;
  opacity: 1;
}
.language-flags .language-flag-link:hover { color: var(--text-1); background: var(--bg-overlay); }
.language-flags .language-flag-link.active { background: var(--text-1); color: var(--bg); }

.god-mode-shell .god-mode-summary,
.god-mode-shell .god-mode-icon-button {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}

@media (max-width: 768px) {
  .nav-top { padding: 14px var(--sp-4); gap: var(--sp-3); }
  .nav-top__brand { flex: 1; height: auto; }
  .nav-top__right { height: auto; }
  .nav-top__links {
    order: 10;
    flex-basis: 100%;
    margin: 0;
    padding: 4px;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .nav-top__link { font-size: 14px; padding: 8px 12px; }
  .language-flags { padding: 2px; border-radius: 10px; }
  .language-flags .language-flag-link { min-width: 28px; height: 28px; padding: 0 4px; font-size: 11px; }
}

/* ─── ONGLETS SECONDAIRES ────────────────────────────────────── */
.secondary-nav,
.secondary-nav.panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.secondary-nav .secondary-nav-link {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: #B4BDCB;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  white-space: nowrap;
}
.secondary-nav .secondary-nav-link::after { display: none; content: none; }
.secondary-nav .secondary-nav-link:hover { color: var(--text-1); border-color: var(--border-strong); }
.secondary-nav .secondary-nav-link.active {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--bg);
  font-weight: 600;
}
@media (max-width: 768px) {
  .secondary-nav, .secondary-nav.panel { padding: 0 var(--sp-4) var(--sp-2); flex-wrap: nowrap; overflow-x: auto; }
}

/* ─── TYPO DE SECTION ────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--danger { color: var(--danger); }

/* ─── PANNEAUX ───────────────────────────────────────────────── */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.panel + .panel { margin-top: var(--sp-6); }
.panel--accent { border-color: var(--accent-line); box-shadow: none; }
.panel--danger { border-color: #4A2723; box-shadow: none; }
.panel__header {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.panel--danger .panel__header { background: rgba(255,122,102,0.05); border-bottom-color: #3A201C; }
.panel__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel--accent .panel__title { color: var(--accent); }
.panel__subtitle, .panel__footer { color: var(--text-2); font-size: 13px; }
.panel__pill { border-radius: 999px; background: var(--bg-raised); color: var(--text-soft); }

.panel-success { border-color: #1E4A36; background: var(--positive-soft); color: var(--positive); padding: var(--sp-4) var(--sp-5); }
.panel-error   { border-color: #4A2723; background: var(--danger-soft); color: var(--danger); padding: var(--sp-4) var(--sp-5); }

/* ─── CARTES CHIFFRES ────────────────────────────────────────── */
.metric-card,
.metric-card:nth-child(n) {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.metric-card__value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.metric-card__label { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; font-weight: 700; }
.metric-card__sub   { color: var(--text-2); font-size: 12px; }
.metric-card--accent { border-color: var(--accent-line); background: var(--accent-deep); }
.metric-card--danger { border-color: #4A2723; background: var(--danger-soft); }

/* ─── BADGES ─────────────────────────────────────────────────── */
.badge { border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.badge--ok      { background: var(--positive-soft); color: var(--positive); border-color: #1E4A36; }
.badge--alert   { background: var(--danger-soft); color: var(--danger); border-color: #4A2723; }
.badge--neutral { background: var(--bg-overlay); color: var(--text-soft); }

/* ─── TABLEAUX ───────────────────────────────────────────────── */
.data-table { font-size: 14px; }
.data-table thead th {
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border);
  padding: 12px;
}
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover td { background: var(--bg-overlay); }
.data-table td { padding: 12px; }
.data-table__rank { color: var(--text-2); font-size: 13px; width: auto; }
.data-table__sort--asc::after,
.data-table__sort--desc::after { color: var(--accent); }

/* ─── BOUTONS ────────────────────────────────────────────────── */
/* La règle `button {}` de styles.css pose un dégradé rose, une ombre et des
   majuscules sur tout bouton sans classe. Base neutre B pour tous ; les
   classes de chaque page (plus spécifiques) gardent la main. */
button,
input[type="submit"],
input[type="button"] {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-ui);
  border-radius: 10px;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--bg-overlay);
  border-color: #3A4558;
  transform: none;
  filter: none;
  box-shadow: none;
}
button[type="submit"]:not([class]),
button.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
input, select, textarea { accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline-color: var(--accent); border-color: var(--accent); box-shadow: none; }
.btn { border-radius: 10px; min-height: 40px; padding: 8px 16px; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: #FFC85C; border-color: #FFC85C; }

/* ─── PIED DE PAGE ───────────────────────────────────────────── */
.site-credit { color: var(--text-3); border-top: 0; }

/* ══════════════════════════════════════════════════════════════
 * COMPOSANTS DES PAGES REFAITES (gb-)
 * ══════════════════════════════════════════════════════════════ */

.gb-page { display: flex; flex-direction: column; gap: var(--sp-6); }
/* Pages dont le contenu n'est pas enveloppé dans .gb-page : même rythme
   entre tous les blocs de premier niveau, anciens comme nouveaux. */
.nevo-main > * + * { margin-top: var(--sp-6); }
.nevo-main > .gb-card + .gb-card,
.nevo-main > .panel + .panel { margin-top: var(--sp-6); }

/* Pages non refaites : leurs titres de contexte prennent la typo B. */
.members-event-context h2,
.members-vs-context h2,
.members-squad-context h2,
.members-activity-context h2,
.panel-heading h2,
.hero-panel h2 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.members-event-context p,
.panel-heading p { color: var(--text-2); }

.gb-card {
  border-radius: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.gb-card--hero { border-radius: var(--r-xl); padding: 40px; position: relative; overflow: hidden; }
.gb-card--gold { background: var(--accent-deep); border-color: var(--accent-line); }
.gb-card--eco  { background: var(--eco-deep); border-color: var(--eco-line); }
.gb-card--danger { border-color: #4A2723; }
.gb-card--flat { background: var(--bg-raised); border-radius: 18px; padding: 18px; }

.gb-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
.gb-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
}
.gb-title--xl { font-size: 52px; line-height: 1; text-transform: none; letter-spacing: 0.01em; }
.gb-kicker {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gb-note { margin: 0; font-size: 13px; color: var(--text-2); }
.gb-lead { margin: 0; font-size: 17px; color: var(--text-soft); }
.gb-link { font-size: 14px; color: var(--accent); }
.gb-link:hover { color: #FFC85C; }

.gb-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.gb-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.gb-grid--tiles { gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Puces de contexte */
.gb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-overlay);
  color: #DDE3EC;
}
.gb-chip--gold { background: var(--accent); color: var(--on-accent); }
.gb-chip--eco  { background: var(--eco); color: #06222A; }
/* Limited push : entre l'or du push et le cyan de la save week. */
.gb-chip--limited { background: #A8DC5C; color: #142008; }
.gb-big--eco { color: var(--eco); }
.gb-big--limited { color: #A8DC5C; }
.gb-card--eco { border-color: var(--eco-line); }
.gb-card--limited { border-color: rgba(168,220,92,0.35); }
.gb-bar__fill--cap { background: var(--eco); }
.gb-card--limited .gb-bar__fill--cap { background: #A8DC5C; }
.gb-chip--win  { background: var(--positive-soft); color: var(--positive); }
.gb-chip--loss { background: var(--danger-soft); color: var(--danger); }
.gb-chip--ghost { background: transparent; border: 1px dashed #3A4558; color: var(--text-2); }
.gb-chip--link:hover { color: var(--accent); }

/* Gros chiffres */
.gb-big {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 88px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.gb-big small { font-size: 0.45em; color: var(--text-2); letter-spacing: 0; }
@media (max-width: 640px) { .gb-big { font-size: 56px; } .gb-title--xl { font-size: 36px; } .gb-card--hero { padding: 24px; } .gb-card { padding: 20px; } }

.gb-stat {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gb-stat__label { font-size: 12px; color: var(--text-2); }
.gb-stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.gb-stat__value--gold { color: var(--accent); }
.gb-stat__value--danger { color: var(--danger); }
.gb-stat__value--positive { color: var(--positive); }
.gb-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Héro : copie + figure */
.gb-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.gb-hero__copy { position: relative; display: flex; flex-direction: column; gap: 18px; flex: 1 1 520px; min-width: 0; }
.gb-hero__radar { position: absolute; right: -120px; top: -140px; opacity: 0.5; pointer-events: none; }
.gb-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gb-figure figcaption { font-size: 13px; color: var(--text-2); text-align: center; max-width: 240px; }

/* Anneau (SVG) */
.gb-ring__track { fill: none; stroke: var(--border); }
.gb-ring__value { fill: none; stroke: var(--accent); stroke-linecap: round; }
.gb-ring__label { fill: var(--text-1); font-family: var(--font-mono); font-weight: 600; }
.gb-ring__sub { fill: var(--text-2); font-family: var(--font-ui); }

/* Podium */
.gb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.gb-podium__step { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.gb-podium__step, .gb-podium__step:hover { color: var(--text-1); }
.gb-podium__name { font-weight: 600; overflow-wrap: anywhere; color: var(--text-1); }
.gb-podium__step:hover .gb-podium__name { color: var(--accent); }
.gb-podium__points { font-family: var(--font-mono); font-size: 14px; color: var(--text-soft); }
.gb-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  border: 2px solid currentColor;
  color: #C9D0DB;
  background: #2A3140;
}
.gb-avatar--sm { width: 44px; height: 44px; font-size: 15px; border-width: 0; }
.gb-podium__block {
  width: 100%;
  border-radius: 14px 14px 4px 4px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: #C9D0DB;
  background: #2A3140;
  height: 110px;
}
.gb-podium__step--1 .gb-avatar { width: 72px; height: 72px; font-size: 24px; color: var(--accent); background: #2A2310; }
.gb-podium__step--1 .gb-podium__block { height: 150px; color: var(--accent); background: #2A2310; }
.gb-podium__step--3 .gb-avatar { color: #E0A27A; background: #2C1D14; }
.gb-podium__step--3 .gb-podium__block { height: 80px; color: #E0A27A; background: #2C1D14; }

/* Colonnes (histogramme vertical) */
.gb-columns { display: grid; gap: 14px; align-items: end; height: 220px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.gb-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; min-width: 0; }
.gb-column__value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #DDE3EC; white-space: nowrap; }
.gb-column__bar { display: block; width: 100%; max-width: 96px; border-radius: 10px 10px 3px 3px; background: var(--accent); min-height: 6px; }
.gb-column__bar--eco { background: var(--eco); }
.gb-column__bar--limited { background: #A8DC5C; }
.gb-column__bar--muted { background: #3A4558; }
.gb-column__bar--danger { background: var(--danger-strong); }
.gb-column__bar--ghost { background: transparent; border: 1px dashed #3A4558; }
.gb-column__label { text-align: center; font-size: 12px; line-height: 1.3; color: var(--text-2); }
.gb-column__label strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--text-1); }
.gb-column-labels { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: -6px; }

/* Barres horizontales */
.gb-bar { display: block; height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; }
.gb-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.gb-bar__fill--danger { background: var(--danger-strong); }
.gb-bar__fill--positive { background: var(--positive); }
.gb-bar__fill--eco { background: var(--eco); }
.gb-bar__fill--muted { background: #8A96A8; }

/* Lignes de classement */
.gb-rows { display: flex; flex-direction: column; gap: 10px; }
.gb-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 44px;
  color: var(--text-1);
}
.gb-row:hover { color: var(--text-1); }
.gb-row:hover .gb-row__name { color: var(--accent); }
.gb-row--boxed { padding: 10px 12px; border-radius: 14px; background: var(--bg-raised); }
.gb-row--me { background: var(--accent-deep); outline: 1px solid var(--accent-line); }
.gb-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gb-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-row__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.gb-medal {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--bg-overlay);
  color: var(--text-soft);
}
.gb-medal--1 { background: var(--accent); color: var(--on-accent); }
.gb-medal--2 { background: #C9D0DB; color: var(--on-accent); }
.gb-medal--3 { background: #E0A27A; color: var(--on-accent); }

/* Petites cartes joueurs */
.gb-mini-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.gb-mini-card {
  padding: 16px 12px;
  border-radius: 16px;
  background: var(--bg-raised);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  color: var(--text-1);
  min-width: 0;
}
.gb-mini-card__name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.gb-mini-card .gb-avatar { background: var(--danger-soft); color: var(--danger); }

/* Train : locomotive + wagons */
.gb-train { display: flex; align-items: center; overflow-x: auto; padding-bottom: 6px; }
.gb-train__loco {
  flex: none;
  width: 88px; height: 104px;
  border-radius: 40px 14px 14px 14px;
  background: var(--accent);
  display: grid; place-items: center;
}
.gb-train__link { flex: none; width: 14px; height: 4px; background: #3A4558; }
.gb-wagon {
  flex: 1 1 0; /* shortcut: les 7 wagons se partagent la largeur ; en dessous de 110px, scroll horizontal */
  min-width: 110px;
  min-height: 104px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.gb-wagon--today { background: var(--accent-deep); border: 2px solid var(--accent); }
.gb-wagon--empty { background: transparent; border: 2px dashed #3A4558; }
.gb-wagon__day { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.gb-wagon--empty .gb-wagon__day { color: var(--text-2); }
.gb-wagon__name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-wagon__rule { font-size: 12px; color: var(--text-2); }
.gb-wagon__vip { font-size: 12px; color: var(--warning); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grille de cases (1 case = 1 joueur) */
.gb-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-dot { width: 16px; height: 16px; border-radius: 4px; background: #2A3140; }
.gb-dot--gold { background: var(--accent); }
.gb-dot--danger { background: var(--danger-strong); }
.gb-dot--ghost { background: transparent; border: 1px dashed var(--text-3); box-sizing: border-box; }

/* Légende */
.gb-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #B4BDCB; }
.gb-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.gb-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.gb-legend__swatch--eco { background: var(--eco); }
.gb-legend__swatch--limited { background: #A8DC5C; }
.gb-legend__swatch--muted { background: #3A4558; }
.gb-legend__swatch--danger { background: var(--danger-strong); }

/* Sellette, version B */
.gb-flags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Variantes complémentaires */
.gb-column__bar--soft { background: rgba(245,185,66,0.45); }
.gb-column__bar--danger-soft { background: #4A2E2A; }
.gb-dot--dim { background: #3A3218; }
.gb-avatar--gold { color: var(--accent); background: #2A2310; }
.gb-avatar--sm.gb-avatar--gold { border: 2px solid var(--accent); }

/* Pastilles de navigation dans une page (jours, filtres) */
.gb-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  font-size: 14px;
  white-space: nowrap;
}
.gb-pill:hover { color: var(--text-1); border-color: #3A4558; }
.gb-pill.is-active { background: var(--accent-deep); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gb-pill.is-empty { border-style: dashed; color: var(--text-3); }

/* Fiche joueur : en-tête façon carte de jeu */
.gb-player-head { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; flex: 1 1 560px; min-width: 0; }
.gb-hexbadge { position: relative; width: 150px; height: 168px; flex: none; }
.gb-hexbadge svg { display: block; }
.gb-hexbadge__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 54px; font-weight: 700;
  color: var(--accent);
}
.gb-hexbadge__rank {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  white-space: nowrap;
}
.gb-player-record { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(160px, 1fr)); flex: 0 1 420px; }
.gb-trophy {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
}
.gb-trophy__icon { width: 34px; height: 34px; border-radius: 10px; background: #2A2310; display: grid; place-items: center; font-size: 17px; }
.gb-trophy__text { display: flex; flex-direction: column; line-height: 1.2; }
.gb-trophy__name { font-size: 13px; font-weight: 600; }
.gb-trophy__value { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.gb-godmode-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px; position: relative; }
.gb-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gb-inline-form input {
  width: auto; min-height: 36px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-raised); color: var(--text-1); font: inherit; font-size: 13px;
}

/* Tuiles de chiffres */
.gb-tile {
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.gb-tile__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.gb-tile__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.gb-tile__sub { font-size: 13px; color: var(--text-2); }

/* Semaine jour par jour */
.gb-daystrip { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.gb-day {
  min-height: 104px;
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #3A3218;
  color: var(--text-1);
}
.gb-day__label { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #DDE3EC; }
.gb-day__value { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.gb-day--best { background: var(--accent); }
.gb-day--best .gb-day__label, .gb-day--best .gb-day__value { color: var(--on-accent); }
.gb-day--zero { background: var(--danger-soft); border: 1px solid #4A2723; }
.gb-day--zero .gb-day__value { color: var(--danger); }
.gb-day--unmeasured { background: transparent; border: 1px dashed var(--border-strong); }
.gb-day--unmeasured .gb-day__value, .gb-day--unmeasured .gb-day__label { color: var(--text-3); }
.gb-regularity { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 16px; border-radius: 16px; background: var(--bg-raised); }

/* Graphiques SVG existants (fiche joueur) : or au lieu du teal */
.chart-line { stroke: var(--accent); stroke-width: 3; }
.chart-area { fill: rgba(245,185,66,0.14); }
.chart-dot { fill: var(--bg-surface); stroke: var(--accent); stroke-width: 3; }
.chart-dot-partial { stroke-dasharray: 3 2; }
.chart-grid-line { stroke: var(--border); }
.chart-grid-label, .chart-x-label, .chart-month-label { fill: var(--text-2); font-family: var(--font-ui); }
.chart-shell { padding: 8px 20px 20px; }
.content-grid.detail-content-grid { gap: var(--sp-6); margin-top: var(--sp-6); }
.storm-meter__fill { background: var(--accent); }
.record-badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; }
.week-chip { border-radius: 999px; }

/* Règlement */
.gb-rule-week { gap: 22px; }
.gb-rule-week__head { display: flex; align-items: center; gap: 14px; }
.gb-rule-week__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.gb-rule-week__icon--gold { background: var(--accent); }
.gb-rule-week__icon--eco { background: var(--eco); }
.gb-rule-week__icon--limited { background: var(--limited); }
.gb-rule-week__goal { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-1); }
/* Trois encarts côte à côte sur ordinateur, empilés sur mobile. */
.gb-grid--weeks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gb-rule-week.gb-card--limited { background: #16200E; }
.gb-rule-week.gb-card--limited .gb-rule-week__body { color: #D6EDB8; }
.gb-seats--limited .gb-seat { background: var(--limited); color: #142008; }
.gb-seats--limited .gb-seat--r4 { background: transparent; color: var(--limited); border-color: var(--limited); }
.gb-rule-week__block { display: flex; flex-direction: column; gap: 8px; }
.gb-rule-week__threshold { font-size: 22px; font-weight: 600; }
.gb-rule-week__body { margin: 0; font-size: 14px; color: #E6D7B5; }
.gb-card--eco .gb-rule-week__body { color: #BFE6EF; }
.gb-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-seat {
  min-width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box;
  border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  background: var(--accent); color: var(--on-accent);
}
.gb-seat--r4 { background: transparent; color: var(--accent); border: 2px dashed var(--accent); }
.gb-seats--eco .gb-seat { background: var(--eco); color: #06222A; }
.gb-seats--eco .gb-seat--r4 { background: transparent; color: var(--eco); border-color: var(--eco); }
.gb-chests { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chest { width: 34px; height: 30px; border-radius: 6px; background: var(--eco); display: grid; place-items: center; }
.gb-ticket { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; background: var(--bg-raised); }
.gb-avatar--xs { width: 26px; height: 26px; font-size: 10px; border-width: 0; color: var(--accent); background: #2A2310; margin-left: -6px; }
.gb-rule { gap: 10px; padding: 22px; border-radius: 20px; }
.gb-rule__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #2A2310; }
.gb-rule__icon--danger { background: var(--danger-soft); }
.gb-rule__list { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* Palmarès : nuage VS / kills */
.gb-scatter {
  position: relative;
  height: 420px;
  margin: 8px 8px 28px 28px;
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.gb-scatter__zone { position: absolute; left: 0; top: 0; width: 50%; height: 50%; background: rgba(245,185,66,0.06); border-radius: 0 0 12px 0; }
.gb-scatter__q { position: absolute; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gb-scatter__q--tl { left: 10px; top: 8px; color: var(--accent); }
.gb-scatter__q--tr { right: 8px; top: 8px; color: var(--danger); }
.gb-scatter__q--bl { left: 10px; bottom: 8px; color: var(--eco); }
.gb-scatter__dot {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  transform: translate(-7px, -50%);
  color: #DDE3EC;
  white-space: nowrap;
}
.gb-scatter__dot.is-right { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.gb-scatter__mark { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #8A96A8; }
.gb-scatter__dot.is-top .gb-scatter__mark { background: var(--accent); }
.gb-scatter__name { font-size: 12px; font-weight: 600; }
.gb-scatter__dot:hover .gb-scatter__name { color: var(--accent); }
.gb-scatter__axis { position: absolute; font-size: 12px; color: var(--text-3); }
.gb-scatter__axis--x0 { left: 0; bottom: -24px; }
.gb-scatter__axis--x1 { right: 0; bottom: -24px; }
.gb-scatter__axis--y0 { left: -26px; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.gb-sellette { gap: 8px; color: var(--text-1); }
.gb-sellette:hover { border-color: #4A2723; }
.score-comp { margin-bottom: var(--sp-6); }

/* Storm : la semaine en cartes B */
.storm-week { gap: var(--sp-6); }
.storm-hero { display: flex; flex-direction: column; gap: 8px; }
.storm-weekbar { border-radius: 20px; padding: 14px 18px; }
.storm-weekbar__arrow { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-raised); }
.storm-weekbar__form select { min-height: 44px; border-radius: 12px; background: var(--bg-raised); color: var(--text-1); border: 1px solid var(--border-strong); font-family: var(--font-display); }
.storm-pill {
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  border-radius: 10px;
}
.storm-pill--win  { border-color: #1E4A36; background: var(--positive-soft); color: var(--positive); }
.storm-pill--win strong { color: var(--positive); }
.storm-pill--loss { border-color: #4A2723; background: var(--danger-soft); color: var(--danger); }
.storm-exclusions { border-radius: 16px; border-color: #4A2723; }
.storm-section { padding: 0; border: 0; background: transparent; }
.storm-section__title h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 0.04em; }
.storm-section__meta a { color: var(--accent); }
.storm-section__cards { gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.storm-section .storm-card {
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.storm-section .storm-card--win { border-color: #1E4A36; }
.storm-card__team strong { font-family: var(--font-display); font-size: 18px; }
.storm-card .storm-result {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 10px;
}
.storm-card .storm-result--win { background: var(--positive); color: #06210F; }
.storm-card .storm-result--loss { background: var(--danger-soft); color: var(--danger); }
.storm-tug__bar { height: 22px; border-radius: 8px; gap: 3px; }
.storm-card--win .storm-tug__us { background: var(--positive); }
.storm-tug__them { background: #3A4558; }
.storm-tug__values { font-size: 16px; font-weight: 600; color: var(--text-1); }
.storm-card__facts-line > span { padding: 8px 12px; border-radius: 12px; background: var(--bg-raised); }
.storm-card__mvp {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px;
  background: var(--accent-deep); border: 1px solid var(--accent-line);
}
.storm-card__mvp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.storm-card__mvp-label { font-size: 12px; font-weight: 400; color: #E6D7B5; }
.storm-card__mvp-score { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.storm-card__link { color: var(--accent); }

/* Champs : recherche et liste déroulante */
.gb-search,
.gb-select {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  flex-direction: row;
}
.gb-search input,
.gb-select select {
  flex: 1;
  min-height: 0;
  height: 42px;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 15px;
  box-shadow: none;
}
.gb-select select option { background: var(--bg-surface); color: var(--text-1); }
.gb-search:focus-within,
.gb-select:focus-within { border-color: var(--accent); }

/* Étiquettes de joueurs (listes longues) */
.gb-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.gb-name-chip .num { color: var(--text-2); font-weight: 500; }
.gb-name-chip--danger { border-color: #4A2723; background: var(--danger-soft); }
.gb-name-chip--danger .num { color: var(--danger); }
.gb-name-chip--ghost { border-style: dashed; color: var(--text-2); background: transparent; }
.gb-name-chip--gold { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Tableaux des pages membres : même cadre que les cartes */
.gb-page ~ .panel,
.nevo-main > .panel.ds-table-stage,
.nevo-main .members-vs-table-section,
.nevo-main .members-squads-table-section,
.nevo-main .members-activity-table-section {
  border-radius: 24px;
  margin-top: var(--sp-6);
}
.players-table .player-row.is-top3 td { background: var(--accent-deep); }
.players-table .player-row.is-top1 td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.points-cell-positive { color: var(--positive) !important; }
.points-cell-negative { color: var(--danger) !important; }

/* ─── STATS : revue d octobre 2026 ──────────────────────────── */
/* Colonne « Rangs » : paliers podium / top 10 / top 30 / reste, semaines éco
   en pointillé cyan pour qu on ne compare pas un rang éco à un rang push. */
.vs-music-mark.is-top    { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.vs-music-mark.is-top10  { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.vs-music-mark.is-rank   { border-color: var(--border-strong); background: var(--bg-raised); color: var(--text-1); }
.vs-music-mark.is-low    { border-color: var(--border); background: transparent; color: var(--text-3); }
.vs-music-mark.is-missing { border-color: #4A2723; background: var(--danger-soft); color: var(--danger); }
.vs-music-mark.is-eco    { border-style: dashed; border-color: var(--eco-line); }
/* Colonne « Jours » : six cases sur une ligne, plus serrées que les rangs sur 4 semaines. */
.vs-days-strip { gap: 3px; }
.members-vs-table-section .vs-music-cell { min-width: 0; }
.members-vs-table-section .vs-music-strip { flex-wrap: nowrap; }
.vs-days-strip .vs-music-mark { min-width: 22px; padding: 0 3px; }
.vs-music-mark.is-unknown,
.vs-music-mark.is-muted  { border-style: dashed; border-color: var(--border); background: transparent; color: var(--text-3); }

/* Bilan d'alliance (Tendances) : trois cartes côte à côte, en colonne sur mobile. */
.gb-grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: var(--sp-6); }

/* Bande des semaines VS : barre du total, pastille du résultat, numéro. */
.gb-weekstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; }
.gb-weekstrip__item { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.gb-weekstrip__bar { width: 100%; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--accent); }
.gb-weekstrip__item.is-eco .gb-weekstrip__bar { background: var(--eco); }
.gb-weekstrip__item.is-live .gb-weekstrip__bar { background: transparent; border: 1px dashed var(--border-strong); }
.gb-weekstrip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.gb-weekstrip__dot.is-win { background: var(--positive); }
.gb-weekstrip__dot.is-loss { background: var(--danger); }
.gb-weekstrip__label { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }

/* Mouvements d'effectif : arrivées au-dessus de l'axe, départs en dessous. */
.gb-flowstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.gb-flowstrip__item { display: grid; grid-template-rows: 40px 1px 40px auto; justify-items: center; min-width: 0; }
.gb-flowstrip__up { align-self: end; width: 100%; max-width: 16px; border-radius: 3px 3px 0 0; background: var(--positive); }
.gb-flowstrip__axis { width: 100%; height: 1px; background: var(--border-strong); }
.gb-flowstrip__down { align-self: start; width: 100%; max-width: 16px; border-radius: 0 0 3px 3px; background: var(--danger); }

/* Page Kills : paliers du waffle, forme, sparkline 5 semaines. */
.kills-tier--500k { background: var(--danger-strong); }
.kills-tier--100k { background: color-mix(in srgb, var(--danger-strong) 70%, transparent); }
.kills-tier--10k { background: color-mix(in srgb, var(--danger-strong) 42%, transparent); }
.kills-tier--low { background: color-mix(in srgb, var(--danger-strong) 18%, transparent); }
.kills-tier--zero { background: #2A3140; }
.kills-form { margin-left: 4px; font-weight: 700; }
.kills-form--up { color: var(--positive); }
.kills-form--down { color: var(--danger); }
.kills-form--flat { color: var(--text-3); }
.kills-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; vertical-align: middle; }
.kills-spark__bar { width: 6px; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--danger-strong); }
.kills-spark__bar.is-eco { background: var(--eco); }
.kills-spark__bar.is-missing { background: transparent; border-top: 1px dashed var(--text-3); }

/* ─── SQUAD UPDATE ───────────────────────────────────────────── */
/* `label {}` et `input {}` de styles.css empilent et imposent une hauteur :
   chaque bloc ci-dessous redéfinit display, fond et hauteur. */
.gb-squad .is-hidden { display: none !important; }
.gb-squad__intro { display: flex; flex-direction: column; gap: 8px; }
.gb-squad__intro .gb-title--xl { font-size: 48px; }
.gb-squad__layout { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
.gb-squad__form { flex: 999 1 620px; gap: var(--sp-6); }
.gb-squad__history { flex: 1 1 340px; }
.gb-squad__rule { height: 1px; background: var(--border); }
.gb-squad-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.gb-squad-picker { display: flex; flex-direction: column; gap: 12px; }
.gb-squad-picker__current { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gb-squad-picker__who { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gb-squad-picker__who strong { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.gb-squad-picker__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.gb-squad-picker__toggle { background: var(--bg-raised); min-height: 44px; }
.gb-squad-picker.is-collapsed .gb-squad-picker__chooser { display: none; }
.gb-squad-picker__chooser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
}
.gb-squad-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}
.gb-squad-search:focus-within { border-color: var(--accent); }
.gb-squad-search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-1);
  font-size: 16px; /* 16 px : iOS ne zoome pas au focus */
}
.gb-squad-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  max-height: 248px;
  overflow-y: auto;
}
.gb-squad-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
.gb-squad-player[hidden] { display: none; }
.gb-squad-player.is-active { background: var(--accent-deep); border-color: var(--accent); }
.gb-squad-player__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-3); }
.gb-squad-player[data-status="fresh"] .gb-squad-player__dot { background: var(--positive); }
.gb-squad-player[data-status="outdated"] .gb-squad-player__dot { background: var(--warning); }
.gb-squad-player__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gb-squad-player__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-squad-player__date { font-size: 12px; color: var(--text-2); }

.gb-squad-status { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-overlay); color: var(--text-2); }
.gb-squad-status.is-fresh { background: var(--positive-soft); color: var(--positive); }
.gb-squad-status.is-outdated { background: var(--warning-soft); color: var(--warning); }

.gb-squad-date { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gb-squad-date .gb-pill { flex: none; width: auto; min-width: 0; background: transparent; font-weight: 600; }
.gb-squad-date .gb-pill.is-active { background: var(--accent-deep); border-color: var(--accent); color: var(--accent); }
.gb-squad-date input[type="date"] {
  flex: none;
  width: auto;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  font-family: var(--font-mono);
  color-scheme: dark;
}

.gb-squad-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.gb-squad-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.gb-squad-field__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-1);
}
.gb-squad-field__icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-deep); color: var(--accent); }
.gb-squad-field__box { position: relative; display: block; }
.gb-squad-field__box input {
  width: 100%;
  box-sizing: border-box;
  height: 64px;
  padding: 0 44px 0 16px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  font: 600 28px var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gb-squad-field__box input.is-changed { border-color: var(--accent-line); }
.gb-squad-field__box input.is-invalid { border-color: var(--danger-strong); }
.gb-squad-field__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 600 18px var(--font-mono); color: var(--text-2); pointer-events: none; }
.gb-squad-field__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.gb-squad-field__meta .num { color: var(--text-soft); }
.gb-squad-delta { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-overlay); color: var(--text-2); }
.gb-squad-delta:empty { display: none; }
.gb-squad-delta.is-positive { background: var(--positive-soft); color: var(--positive); }
.gb-squad-delta.is-negative { background: var(--danger-soft); color: var(--danger); }
.gb-squad-field__error { font-size: 13px; color: var(--danger); }
.gb-squad-field__error:empty { display: none; }

.gb-squad-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--accent-deep);
  border: 1px solid var(--accent-line);
}
.gb-squad-footer__sums { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; }
.gb-squad-footer__sums > div { display: flex; flex-direction: column; }
.gb-squad-footer__sums .gb-squad-label { color: var(--text-soft); }
.gb-squad-footer__total { font-size: 34px; color: var(--accent); }
.gb-squad-footer__delta { font-size: 22px; color: var(--text-2); }
.gb-squad-footer__delta.is-positive { color: var(--positive); }
.gb-squad-footer__delta.is-negative { color: var(--danger); }
.gb-squad-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font: 700 17px var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gb-squad-save:hover { background: #FFC85C; border-color: #FFC85C; }
.gb-squad-save:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--text-2); cursor: not-allowed; }

.gb-squad-history { overflow-x: auto; }
.gb-squad-history table { width: 100%; min-width: 300px; border-collapse: collapse; font-size: 13px; }
.gb-squad-history th,
.gb-squad-history td { padding: 10px 0 10px 8px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-soft); }
.gb-squad-history thead th { padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.gb-squad-history th:first-child { padding-left: 0; text-align: left; }
.gb-squad-history tbody th { font-weight: 500; color: var(--text-1); }
.gb-squad-history__total { display: block; color: var(--text-1); }
.gb-squad-history__delta { display: block; font-size: 11px; color: var(--text-2); }
.gb-squad-history__empty { margin: 0; padding: 24px 16px; border-radius: 14px; border: 1px dashed var(--border-strong); color: var(--text-2); text-align: center; }

@media (max-width: 768px) {
  .gb-squad__intro .gb-title--xl { font-size: 30px; }
  .gb-squad__form { padding: 18px; }
  .gb-squad-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gb-squad-field { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 4px 12px; padding: 14px; }
  .gb-squad-field__box { grid-row: span 2; grid-column: 2; grid-row-start: 1; }
  .gb-squad-field__box input { height: 56px; font-size: 24px; padding-right: 36px; }
  .gb-squad-field__unit { right: 12px; font-size: 16px; }
  .gb-squad-field__meta { justify-content: flex-start; font-size: 12px; }
  .gb-squad-field__error { grid-column: 1 / -1; }
  /* La barre d'enregistrement reste sous le pouce pendant la saisie. */
  .gb-squad-footer { position: sticky; bottom: 0; z-index: 5; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px 12px; border-radius: 14px; }
  .gb-squad-footer__sums { flex: none; flex-wrap: nowrap; align-items: baseline; gap: 12px; }
  .gb-squad-footer__sums > div + div .gb-squad-label { display: none; }
  .gb-squad-footer__sums .gb-squad-label { font-size: 11px; }
  .gb-squad-footer__total { font-size: 22px; }
  .gb-squad-footer__delta { font-size: 15px; }
  .gb-squad-save { min-height: 48px; padding: 0 16px; font-size: 15px; }
}

/* Don au développeur : une pastille en bas à gauche, présente sans insister.
   Sous la barre squad (z-index 5) ; la grenouille tient le coin droit. */
.donate-chip {
  position: fixed; left: 16px; bottom: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(18, 23, 34, 0.85);
  color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: color .15s ease, border-color .15s ease;
}
.donate-chip:hover, .donate-chip:focus-visible { color: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
  .donate-chip { left: 12px; bottom: 12px; padding: 6px 8px; }
  .donate-chip__label { display: none; }
}