/* Page de guilde : bandeau repris de la fiche perso (character.css), liste des membres ici */

.roster-band { padding-top: 40px; }

.roster-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.roster-tools input, .roster-tools select {
  font: 15px/1.2 var(--modern); color: var(--text);
  background: rgba(3, 16, 26, .7); border: 1px solid rgba(198, 175, 141, .35); border-radius: 3px;
  padding: 11px 13px; box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}
.roster-tools input { flex: 1 1 260px; min-width: 0; }
.roster-tools input:focus, .roster-tools select:focus {
  outline: none; border-color: var(--sand); box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 3px rgba(198,175,141,.25);
}
.roster-tools select option { color: var(--text); background: #0a1a26; }

/* Une ligne par membre, entièrement cliquable ; mêmes colonnes pour l'en-tête */
.roster { border: 1px solid rgba(198, 175, 141, .18); border-radius: 12px; background: rgba(3, 20, 32, .45); }
/* Coins arrondis portés par l'en-tête et la dernière ligne (pas d'overflow: hidden, qui couperait les bulles « Succès ») */
.roster-head { border-radius: 12px 12px 0 0; }
.member:last-child { border-radius: 0 0 12px 12px; }
.roster-head, .member {
  display: grid; align-items: center; gap: 12px; padding: 0 16px;
  grid-template-columns: minmax(0, 2fr) 70px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 64px;
}
.roster-head { background: rgba(0, 0, 0, .25); border-bottom: 1px solid rgba(198, 175, 141, .18); }
.roster-head button {
  display: flex; align-items: center; gap: 6px; padding: 12px 0; text-align: left; cursor: pointer;
  font: 600 11px/1 var(--modern); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0;
}
.roster-head button:hover { color: #fff; }
.roster-head button[aria-sort="ascending"], .roster-head button[aria-sort="descending"] { color: var(--ivory); }
.roster-head button[aria-sort="ascending"]::after { content: "▲"; font-size: 8px; }
.roster-head button[aria-sort="descending"]::after { content: "▼"; font-size: 8px; }

.member { min-height: 46px; border-bottom: 1px solid rgba(198, 175, 141, .1); font-size: 14px; color: #dce6ec; transition: background .12s ease; }
.member:last-child { border-bottom: 0; }
.member:hover { background: rgba(95, 208, 224, .08); }
.member .c-name { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .c-name img { flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.member .c-level, .member .c-gs, .roster-head .c-level, .roster-head .c-gs { font-variant-numeric: tabular-nums; }
.member .c-gs { font-weight: 700; color: #fff; }
.member .c-race, .member .c-class, .member .c-rank { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster .empty { margin: 0; padding: 22px 16px; color: var(--muted); }

/* Colonne « Succès » (WoW Forever) : rond avec le meilleur rang de la course au 60, détail au survol — views.js achievementCell */
.roster.with-ach .roster-head, .roster.with-ach .member {
  grid-template-columns: minmax(0, 2fr) 104px 70px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 64px;
}
.roster-head .c-ach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-head .c-ach svg { display: none; flex: none; width: 14px; height: 14px; }
/* Jusqu'à trois médailles : côte à côte, légèrement superposées ; celle survolée passe devant (avec sa bulle) */
.member .c-ach { display: flex; align-items: center; min-width: 0; }
.ach { position: relative; display: inline-block; line-height: 0; flex: none; }
.ach + .ach { margin-left: -5px; }
.ach:hover { z-index: 3; }
/* Ombre et halo dessinés dans le SVG : pas de filter (drop-shadow), lourd pour les téléphones d'entrée de gamme */
.medal { display: block; overflow: visible; }
.medal .shadow { fill: rgba(0, 0, 0, .45); }
.medal .glow { fill: none; }
.medal .rib-l { fill: var(--rib-a); }
.medal .rib-r { fill: var(--rib-b); }
.medal .rib-line { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.1; }
.medal .edge { fill: var(--rim); }
.medal .face { fill: var(--face); }
.medal .ring { fill: none; stroke: var(--hi); stroke-width: .9; opacity: .8; }
.medal .shine { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; opacity: .5; }
.medal text {
  fill: var(--ink); font-family: var(--modern); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
  text-anchor: middle; dominant-baseline: central;
}
.medal text.long { font-size: 7.5px; letter-spacing: -.02em; }
/* World First (étoile) : couleurs des badges de la fiche perso (character.css .race-badge) — or pour le 1er (ruban rouge,
   halo), argent jusqu'au 10e (ruban bleu), sable au-delà */
.ach.wf.gold { --rim: #b07a12; --face: #f0b429; --hi: #ffe28a; --ink: #3b2700; --rib-a: #b3261e; --rib-b: #8c1c16; }
.ach.wf.gold .medal .glow { fill: rgba(240, 180, 41, .16); }
.ach.wf.silver { --rim: #7f8d97; --face: #cdd8df; --hi: #f6fafc; --ink: #1f2c35; --rib-a: #2f6296; --rib-b: #234a72; }
.ach.wf.sand { --rim: #8a7556; --face: #c6af8d; --hi: #ece0c8; --ink: #2a2014; --rib-a: #6b5a42; --rib-b: #54462f; }
/* PvE (violet épique) et PvP (rouge sang) : même aspect quel que soit le rang */
.ach.pve { --rim: #4f2380; --face: #9b5de5; --hi: #d7b8ff; --ink: #fff; --rib-a: #5b2a91; --rib-b: #3f1d66; }
.ach.pvp { --rim: #6e1610; --face: #c8372b; --hi: #ff9d8f; --ink: #fff; --rib-a: #2b3a47; --rib-b: #1c2731; }
.ach-tip {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 5;
  display: none; flex-direction: column; gap: 3px; white-space: nowrap; text-align: left;
  padding: 9px 11px; border-radius: 6px; background: #0a1a26; border: 1px solid rgba(198, 175, 141, .45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55); font: 500 12.5px/1.35 var(--modern); color: #dce6ec;
}
.ach-tip strong { display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #f0b429; }
.ach-tip b { color: #fff; }
.ach:hover .ach-tip { display: flex; }
.roster-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 760px) {
  .roster-head, .member { grid-template-columns: minmax(0, 1fr) 52px minmax(0, .9fr) 52px; gap: 10px; padding: 0 12px; }
  .roster-head .c-race, .roster-head .c-rank, .member .c-race, .member .c-rank { display: none; }
  /* Avec la colonne « Succès » : la classe se lit déjà à l'icône et à la couleur du nom, sa colonne laisse la place */
  .roster.with-ach .roster-head, .roster.with-ach .member { grid-template-columns: minmax(0, 1fr) 62px 46px 42px; gap: 8px; }
  .roster.with-ach .c-class { display: none; }
  /* Les trois médailles tiennent en se chevauchant davantage */
  .ach + .ach { margin-left: -14px; }
  /* Colonne étroite : la coupe à la place du mot « Succès » */
  .roster-head .c-ach svg { display: block; }
  .roster-head .c-ach span { display: none; }
}