* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #14161a;
  color: #e2e2e2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #1c1f24;
  border-bottom: 1px solid #2a2e35;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  color: #f0f0f0;
}

.topbar-controls {
  display: flex;
  gap: 8px;
}

select, input[type="text"] {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid #33383f;
  border-radius: 8px;
  background: #22262c;
  color: #e2e2e2;
}

select:focus, input[type="text"]:focus {
  outline: none;
  border-color: #4a7fd6;
}

input[type="text"] {
  width: 200px;
}

/* ---------- Layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  padding: 16px 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.stats-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-box {
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 12px;
  padding: 12px 16px;
}

.stat-label {
  font-size: 11px;
  color: #8a8f98;
  text-transform: uppercase;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #f0f0f0;
}

/* ---------- Board ---------- */

.board-wrap {
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 12px;
  overflow: hidden;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2e35;
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab {
  background: #22262c;
  border: 1px solid #33383f;
  color: #ccc;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.tab.active {
  background: #4a7fd6;
  border-color: #4a7fd6;
  color: #fff;
}

.board-count {
  color: #8a8f98;
  font-size: 12.5px;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: #8a8f98;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2e35;
}

.board-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #23262c;
  vertical-align: middle;
}

.board-table tbody tr:hover {
  background: #22262c;
  cursor: pointer;
}

.board-table tbody tr:last-child td {
  border-bottom: none;
}

.board-empty {
  text-align: center;
  color: #8a8f98;
  padding: 30px !important;
}

.rank-badge {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

.player-name {
  font-weight: bold;
  color: #f0f0f0;
}

.player-rank {
  display: block;
  font-size: 11px;
  color: #8a8f98;
}

.progress-bar {
  width: 120px;
  height: 8px;
  background: #2a2e35;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #4a7fd6;
  border-radius: 999px;
}

.xp-value {
  font-weight: bold;
  text-align: right;
  color: #f0f0f0;
}

/* ---------- Évolution du classement (idée 1) ---------- */

.rank-change {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.rank-change.up {
  color: #3fae5c;
  background: rgba(63, 174, 92, 0.12);
}

.rank-change.down {
  color: #d65c5c;
  background: rgba(214, 92, 92, 0.12);
}

.rank-change.neutral {
  color: #8a8f98;
  background: rgba(138, 143, 152, 0.12);
}

.rank-arrow {
  font-size: 9px;
  line-height: 1;
}

/* ---------- Classement des séries (idée 2) ---------- */

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 140, 26, 0.14);
  color: #ff9736;
  vertical-align: middle;
}

/* ---------- Podium top 3 ---------- */

.podium {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px 10px;
}

.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 130px;
  padding: 14px 10px 12px;
  border-radius: 12px;
  background: #22262c;
  border: 1px solid #33383f;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.podium-card:hover { transform: translateY(-3px); }

.podium-card.place-1 {
  order: 2;
  padding-top: 20px;
  padding-bottom: 18px;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.16), #22262c 65%);
  border-color: #c9a227;
  transform: scale(1.08);
}

.podium-card.place-2 {
  order: 1;
  background: linear-gradient(180deg, rgba(159, 168, 176, 0.16), #22262c 65%);
  border-color: #9fa8b0;
}

.podium-card.place-3 {
  order: 3;
  background: linear-gradient(180deg, rgba(169, 112, 47, 0.16), #22262c 65%);
  border-color: #a9702f;
}

.podium-card.me {
  box-shadow: 0 0 0 2px #4a7fd6;
}

.podium-medal {
  font-size: 22px;
  line-height: 1;
}

.podium-rank-badge {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.podium-name {
  font-weight: bold;
  color: #f0f0f0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.podium-value {
  font-size: 12px;
  color: #8a8f98;
}

@media (max-width: 500px) {
  .podium-card { width: 90px; padding: 10px 6px; }
  .podium-card.place-1 { transform: scale(1.04); }
}

/* ---------- Skeleton loading ---------- */

.skel {
  background: linear-gradient(90deg, #22262c 25%, #2c3138 37%, #22262c 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
  border-radius: 6px;
  display: inline-block;
}

@keyframes skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.skel-text { height: 12px; }
.skel-circle { width: 26px; height: 26px; border-radius: 50%; }
.skel-bar { width: 120px; height: 8px; border-radius: 999px; }

.stat-value.skeleton {
  color: transparent !important;
  background: linear-gradient(90deg, #22262c 25%, #2c3138 37%, #22262c 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
  border-radius: 6px;
  display: inline-block;
  min-width: 70px;
  height: 22px;
}

/* ---------- Highlight "c'est toi" ---------- */

.board-table tbody tr.row-me {
  background: rgba(74, 127, 214, 0.14);
  box-shadow: inset 3px 0 0 #4a7fd6;
}

.board-table tbody tr.row-me:hover {
  background: rgba(74, 127, 214, 0.22);
}

.me-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #20242b;
  border-top: 1px solid #2a2e35;
  font-size: 13px;
  cursor: pointer;
}

.me-bar:hover { background: #24282f; }

.me-bar-position {
  font-weight: bold;
  color: #4a7fd6;
  min-width: 34px;
}

.me-bar-name {
  flex: 1;
  color: #f0f0f0;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-bar-value {
  color: #8a8f98;
  white-space: nowrap;
}

/* ---------- Side panel ---------- */

.side-panel {
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 12px;
  padding: 16px;
  height: fit-content;
}

.panel-title {
  font-size: 12px;
  text-transform: uppercase;
  color: #8a8f98;
  margin-bottom: 12px;
}

/* ---------- Drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.drawer.open { display: flex; }

.drawer-panel {
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 14px;
  width: min(420px, 90vw);
  padding: 22px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.drawer-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #8a8f98;
  font-size: 20px;
  cursor: pointer;
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #2a2e35;
  padding-bottom: 14px;
}

.drawer-head img { width: 44px; height: 44px; }

.drawer-name {
  font-size: 17px;
  font-weight: bold;
  color: #f0f0f0;
}

.drawer-rank { font-size: 12.5px; color: #8a8f98; }

.drawer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.drawer-stat {
  background: #22262c;
  border: 1px solid #2a2e35;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.drawer-stat .v {
  font-weight: bold;
  font-size: 15px;
  display: block;
  color: #f0f0f0;
}

.drawer-stat .l {
  font-size: 10px;
  color: #8a8f98;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .progress-bar { width: 70px; }
}

/* ---------- Mobile (téléphone) ---------- */

@media (max-width: 640px) {
  body { font-size: 13.5px; }

  /* Barre du haut : titre puis contrôles en pleine largeur, plus de
     débordement horizontal du select + de la recherche côte à côte. */
  .topbar {
    padding: 12px 14px;
  }

  .topbar-controls {
    width: 100%;
    flex-direction: column;
  }

  #chatSelect,
  #searchInput {
    width: 100%;
  }

  .layout {
    padding: 12px 12px 28px;
    gap: 12px;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-box { padding: 10px 12px; }
  .stat-value { font-size: 17px; }

  .board-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .tabs { width: 100%; }
  .tab { flex: 1; text-align: center; padding: 7px 4px; }

  /* Le tableau devient une liste de vraies cartes : chaque <tr> est une
     grille à 3 colonnes (numéro / icône de rang / nom) sur sa première
     ligne, puis la barre de progression et l'XP occupent chacune une ligne
     pleine largeur en dessous. Fini le positionnement absolu qui
     désalignait le numéro et l'icône selon la hauteur du contenu. */
  .board-table thead { display: none; }

  .board-table,
  .board-table tbody {
    display: block;
    width: 100%;
  }

  .board-table tr {
    display: grid;
    grid-template-columns: 20px 32px 1fr;
    grid-template-areas:
      "pos rank name"
      "prog prog prog"
      "xp xp xp";
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    background: #1c1f24;
    border: 1px solid #2a2e35;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }

  .board-table tbody tr.row-me {
    box-shadow: none;
    border-color: #4a7fd6;
    background: rgba(74, 127, 214, 0.1);
  }

  .board-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  .board-table td[data-label="#"] {
    grid-area: pos;
    justify-self: center;
    align-self: flex-start;
    margin-top: 2px;
    color: #8a8f98;
    font-weight: bold;
    font-size: 12px;
  }

  .board-table td[data-label="Rang"] {
    grid-area: rank;
    align-self: flex-start;
  }

  .board-table td[data-label="Rang"] .rank-badge {
    margin-right: 0;
    width: 30px;
    height: 30px;
  }

  .board-table td.cell-player {
    grid-area: name;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 3px;
  }

  .board-table td.cell-player .player-rank {
    width: 100%;
    order: 99;
  }

  /* Ligne progression : petit libellé au-dessus d'une barre pleine largeur. */
  .board-table td[data-label="Progression"] {
    grid-area: prog;
  }

  .board-table td[data-label="Progression"]::before {
    content: "Progression";
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #8a8f98;
    margin-bottom: 4px;
  }

  .board-table .progress-bar {
    width: 100%;
  }

  /* Ligne XP : libellé à gauche, valeur à droite, séparées par une fine
     ligne pour marquer la fin de la carte. */
  .board-table td[data-label="XP"] {
    grid-area: xp;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid #23262c;
  }

  .board-table td[data-label="XP"]::before {
    content: "XP";
    font-size: 10px;
    text-transform: uppercase;
    color: #8a8f98;
  }

  .xp-value { text-align: right; }

  /* Podium top 3 : cartes plus compactes pour tenir sur un écran étroit. */
  .podium { gap: 8px; padding: 16px 8px 6px; flex-wrap: wrap; }
  .podium-card { width: 30%; min-width: 92px; padding: 10px 6px; }
  .podium-name { max-width: 100%; font-size: 11.5px; }

  .drawer-panel { padding: 18px 16px; width: 94vw; }
  .drawer-stats { grid-template-columns: repeat(2, 1fr); }
}