/* Rosters et staff : cartes compactes, carte ouverte au clic. Chargé par Velkra E-Sport et par Communauté. */

.roster-block + .roster-block {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
}

.roster-name {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.roster-name::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--vio);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--vio);
}

.roster-name::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(158, 15, 24, 0.8), transparent);
}

.player-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.pl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.7rem;
}

.pl-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
  background: #221112;
}

.pl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}

.glow:hover .pl-media img {
  transform: scale(1.05);
}

.pl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(23, 11, 12, 0.96));
  pointer-events: none;
}

/* sans photo : initiale du pseudo sur fond violet */
.pl-media-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(158, 15, 24, 0.55), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #33191b, #160a0b);
}

.pl-media-empty > span:not(.pl-ranks) {
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 7.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 34px rgba(158, 15, 24, 0.95);
}

.pl-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: 0.95rem 0.5rem 0.5rem;
}

.pl-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pl-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}

.pl-age {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.pl-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.pl-socials {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.2rem;
}

.pl-socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #ffb3b8;
  border: 1px solid rgba(158, 15, 24, 0.55);
  background: rgba(158, 15, 24, 0.12);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.pl-socials a:hover,
.pl-socials a:focus-visible {
  color: #180c0d;
  background: var(--mag);
}

/* ---------- Carte joueur compacte, ouverte au clic ---------- */

button.pl-card {
  width: 100%;
  /* sans ça, le gris par défaut des boutons dépasse dans les coins coupés du cadre */
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.pl-card:hover,
button.pl-card:focus-visible {
  border-image-source: url("../../img/ui/frame-card-on.svg");
}

.pl-media {
  display: block;
}

.pl-media-empty {
  display: grid;
}

.pl-name,
.pl-body {
  display: flex;
}

.pl-name {
  display: block;
}

.pl-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mag-hi);
}

.pl-more .icon {
  transition: transform 0.2s ease;
}

button.pl-card:hover .pl-more .icon {
  transform: translateX(4px);
}

body.pl-open {
  overflow: hidden;
}

.pl-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(9, 4, 5, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.pl-focus {
  position: fixed;
  inset: 0;
  z-index: 81;
  margin: auto;
  width: min(100% - 2rem, 54rem);
  height: fit-content;
  max-height: calc(100svh - 2rem);
  /* en colonne simple sur mobile : une grille à hauteur plafonnée écrasait la photo sous le texte */
  display: block;
  padding: 0.9rem;
  overflow-y: auto;
  transform-origin: top left;
  filter: drop-shadow(0 0 40px rgba(158, 15, 24, 0.45)) drop-shadow(0 24px 50px rgba(0, 0, 0, 0.7));
}

.pl-focus .pl-media {
  aspect-ratio: 16 / 11;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}

.pl-focus .pl-media::after {
  background: linear-gradient(180deg, transparent 60%, rgba(20, 10, 11, 0.9));
}

.pl-focus-body {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 1.4rem 1rem 1rem;
}

.pl-focus-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pl-focus-desc {
  white-space: pre-line;
  line-height: 1.7;
  color: #e2dcdd;
  overflow-wrap: anywhere;
}

.pl-focus .pl-socials {
  margin-top: 0.4rem;
}

.pl-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 31, 45, 0.6);
  background: rgba(12, 6, 6, 0.85);
  color: #fff;
  font: 400 1.5rem/1 var(--font-ui);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.pl-close:hover {
  background: var(--mag);
  color: #180c0d;
}

@media (min-width: 760px) {
  .pl-focus {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    padding: 1.1rem;
  }

  /* la photo prend toute la hauteur de la carte, quel que soit le volume de texte à côté */
  .pl-focus .pl-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: min(30rem, calc(100svh - 4.2rem));
  }

  .pl-focus-body {
    padding: 2rem 2.4rem 2rem 2.2rem;
  }
}
@media (max-width: 759px) {
  .pl-close {
    position: sticky;
    top: 0.3rem;
    float: right;
    z-index: 2;
    margin: 0.3rem 0.3rem -2.9rem 0;
  }
}

/* barre de défilement de la carte ouverte, dans les couleurs du site */
.nw-focus,
.pl-focus {
  scrollbar-width: thin;
  scrollbar-color: var(--mag) transparent;
}

/* ---------- Pastille de rang sur la photo (staff) ---------- */

/* Cinq rangs, dans les couleurs du site (ni rouge ni vert) : argent pour le Helpeur, violet pour le Modérateur,
   magenta pour l'Admin, chrome plein pour le RespAdmin, contour magenta pour le Coach. */
.pl-ranks {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.pl-rank {
  padding: 0.32rem 0.6rem 0.3rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 8, 8, 0.82);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.pl-rank-helpeur {
  color: #eae7e7;
  box-shadow: inset 0 0 0 1px rgba(234, 231, 231, 0.75);
}

.pl-rank-moderateur {
  color: #fff;
  background: linear-gradient(100deg, #e05058, var(--vio));
}

.pl-rank-admin {
  color: #180c0d;
  background: linear-gradient(100deg, #ff4a55, var(--mag));
}

.pl-rank-respadmin {
  color: #1f1011;
  background: var(--chrome);
}

.pl-rank-coach {
  color: var(--mag-hi);
  box-shadow: inset 0 0 0 1px var(--mag);
}

.pl-focus .pl-ranks {
  top: 1rem;
  right: auto;
  left: 1rem;
  align-items: flex-start;
}

.pl-focus .pl-rank {
  font-size: 0.74rem;
}

/* ---------- Plusieurs groupes sur une page (roster + staff) ---------- */

/* Une rangée de boutons choisit le groupe affiché, un seul à la fois, le premier d'abord (même principe que la page
   joueurs du site GSX, demandé par le client). Sur mobile, les cartes passent sur deux colonnes et un groupe de plus
   de quatre cartes est replié : la page reste courte. */
.roster-tabs {
  margin-bottom: 1.4rem;
}

.has-tabs .roster-block.is-off {
  display: none;
}

.has-tabs .roster-block + .roster-block {
  margin-top: 0;
}

/* le nom du groupe est déjà sur son bouton */
.has-tabs .roster-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.roster-more {
  display: none;
}

[data-rosters="communaute"] .empty:not(:has(a))::before {
  content: "Le staff n'est pas encore publié.";
}

@media (max-width: 759px) {
  .roster-tabs {
    margin-bottom: 1.1rem;
  }

  .player-grid {
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-grid .pl-card {
    padding: 0.45rem;
  }

  .player-grid .pl-body {
    gap: 0.45rem;
    padding: 0.6rem 0.25rem 0.3rem;
  }

  .player-grid .pl-name {
    font-size: 0.98rem;
  }

  .player-grid .pl-tags {
    gap: 0.3rem 0.5rem;
  }

  .player-grid .pl-tags .badge {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding-inline: 0.45rem;
  }

  .player-grid .pl-more {
    display: none;
  }

  .player-grid .pl-media-empty > span:not(.pl-ranks) {
    font-size: 3.6rem;
  }

  .player-grid .pl-ranks {
    top: 0.4rem;
    right: 0.4rem;
    gap: 0.2rem;
  }

  .player-grid .pl-rank {
    padding: 0.26rem 0.42rem 0.24rem;
    font-size: 0.54rem;
    letter-spacing: 0.08em;
  }

  .player-grid.is-folded > li:nth-child(n + 5) {
    display: none;
  }

  .roster-more {
    display: flex;
    margin: 1rem auto 0;
  }

  .player-grid:not(.is-folded) + .roster-more {
    display: none;
  }
}