body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Stat number font in ranking tables (PPG/AST/REB + algos).
   Only the numeric value uses this font — unit ("PTS") stays default. */
.stats-card-body .stats-container li.pred-mobile-row .pred-value {
  font-family: var(--font-stat);
  letter-spacing: 0.5px;
}

/* ————————————————————————————————————
   Variables CSS (conservez dans base.html si déjà définies)
   ———————————————————————————————————— */
:root {
  --bg-header: #161616;
  --bg-row: #111111;
  --bg-panel: #131313;
  --bg-hover: #1a1a1a;
  --border: #1e1e1e;
  --accent: #00d6b4;
  --text-main: #e0e0e0;
  --text-gray: #a0a0a0;
  --loss-red: #ff5b5b;

  /* ── Glass Card tokens ── */
  --glass-bg: rgba(255,255,255,0.025);
  --glass-border: rgba(255,255,255,0.06);
  --glass-hover: rgba(255,255,255,0.04);
  --glass-blur: 20px;
}

/* Style du modal Boxscore */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  overflow: auto; /* Permet un scroll global si le contenu dépasse */
}

.modal-dialog {
  max-width: 90vw; /* Ne jamais dépasser 90% de la largeur de la fenêtre */
  max-height: 90vh; /* Ne jamais dépasser 90% de la hauteur de la fenêtre */
  margin: 1rem auto; /* Centrage vertical si le contenu est plus petit */
}

/* Ajustements spécifiques pour mobile */
@media screen and (max-width: 1023px) {
  .modal-dialog {
    max-height: calc(100vh - 70px - 16px); /* viewport minus navbar minus bottom gap */
    margin: 62px auto 8px; /* 50px navbar + 12px gap on top, 8px bottom */
    width: 94%;
  }
  .modal-content {
    max-height: calc(100vh - 70px - 16px);
  }
}

.modal-content {
  background: rgba(20,20,20,0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

/* NOTE: stale rules that targeted the old .modal-body box score table were
   removed — the new design uses .sm-boxscore-table (see playoffs.css). Old
   rules were forcing `display: block/inline-block !important` on the cell
   contents, breaking flex alignment (photo + name shifted above stats). */

/* Keep list-style ellipsis for other modals that still use .modal-body li */
.modal-body li span:not(.player-ranking) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block;
  max-width: calc(100% - 40px);
}

@media screen and (max-width: 1023px) {
  .modal-body li {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .modal-body li img,
  .modal-body li .avatar-placeholder {
    flex-shrink: 0;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.modal-title {
  margin: 0;
  font-size: 0.9rem !important; /* Réduit de 1.25rem à 0.9rem */
  color: var(--text-gray) !important; /* Gris au lieu de vert */
}

.close {
  background: none;
  border: none;
  font-size: 1rem !important; /* Réduit de 1.5rem à 1rem */
  color: var(--text-gray);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.modal-body {
  padding: 1rem;
  color: var(--text-main);
  overflow-y: auto; /* Scroll vertical si le contenu dépasse */
  max-height: calc(90vh - 3.5rem);
  /* 3.5rem ≃ hauteur du header + marge interne ; ajuste si nécessaire */
}

.modal-body::-webkit-scrollbar {
  width: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px;
}
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.stats-mobile-selector-container {
  display: none;
}

/* Masquer les boutons de stats injectés par JS quand on est sur desktop.
   CSS s'applique instantanément — pas de flash visible lors d'un resize. */
#mobile-stat-buttons-container,
.stat-buttons-container {
  display: none;
}

/* === Mobile View Toggle (Games / Rankings) === */
.mobile-view-toggle {
  display: none; /* Hidden on desktop */
}

/* === Conteneur global === */
.content-wrapper {
  color: #fff;
}
.row-wrapper {
  display: flex; /* 2 colonnes côte à côte */
  gap: 30px; /* espace entre gauche et droite */
  overflow-x: hidden; /* never let columns overflow page width */
  align-items: stretch; /* columns always match the tallest sibling */
  min-height: calc(100vh - 280px); /* fill remaining viewport — 80px top pad + ~120px selectors + 80px bottom pad */
}

/* Inner cards fill the full column height when content is short */
.left-column > .card,
.left-column > .custom-card-left-aligned {
  flex: 1;
}
.right-column > .card,
.right-column > .custom-card-right-aligned {
  flex: 1;
}
/* Par défaut (desktop) : on affiche le nom complet, on masque les initiales */
.team-name-initials {
  display: none;
}
.team-name-full {
  display: inline;
  white-space: nowrap;
  max-width: none; /* Pas de limitation sur PC */
  color: var(--text-gray); /* Utilise la couleur grise définie dans les variables */
  text-transform: none; /* Suppression des majuscules */
}

/* Style pour les équipes gagnantes - applicable sur toutes les tailles d'écran */
.team-win {
  font-weight: 700;
  color: #BABABA;
}

/* Sur mobile : afficher les noms courts des équipes au lieu des noms complets */
@media screen and (max-width: 1023px) {
  .team-name-full {
    display: none !important;
  }
  .team-name-initials {
    display: inline !important;
    font-size: 0.9rem;
    font-weight: normal; /* Sans gras par défaut */
    color: var(--text-gray);
    max-width: none; /* Pas de troncature */
    white-space: nowrap;
    text-transform: none; /* Pas de majuscules */
  }
  
  /* Style pour les équipes gagnantes - doit être après .team-name-initials pour override */
  .team-win,
  .team-name-initials.team-win,
  .team-name-full.team-win {
    font-weight: 700 !important;
    color: #BABABA !important;
  }
  
  /* Sur mobile, on veut le contenu (Q2 / 7:39' / 03:00) centré pile sous
     l'étoile. L'étoile est position:absolute à left=6 avec un SVG 22×22
     → centre visuel à x=17 depuis le bord gauche de la carte.
     Pour aligner le centre du contenu de match-time à x=17:
     - flex-basis: 34px  (→ centre de la boîte à 17 si margin-left=0)
     - margin-left: 0
     - align-items: center (contenu centré dans la boîte)
     - padding-top pousse le contenu en-dessous de l'étoile (gap vertical) */
  .match-time {
    font-size: 0.78rem !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    padding: 8px 0 0 0 !important;
    margin-left: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }
  
  /* Étoile de favori plus petite sur mobile, positionnée au-dessus de l'heure */
  .favorite-star {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    flex: none !important;
    /* ZONE CLIQUABLE AGRANDIE sur mobile (critique) */
    padding: 12px !important;
    margin: -12px !important;
    /* Empêcher l'ouverture de la vue des joueurs */
    z-index: 100 !important;
  }
  
  .favorite-star svg {
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
  }
  .team-line {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: visible; /* Assurer que le contenu est visible */
    padding: 0 5px 0 0 !important; /* Uniquement padding à droite, rien ailleurs */
    margin: 0 !important; /* Supprimer toutes les marges */
    min-height: auto !important; /* Hauteur minimale automatique */
    height: auto !important; /* Hauteur automatique */
  }
  
  /* Ajuster le bloc des équipes sur mobile */
  .match-teams {
    gap: 5px !important; /* Espacement plus important entre les équipes */
    margin: 0 !important; /* Supprimer toutes les marges */
    padding-top: 2px !important; /* Léger espacement en haut */
    padding-bottom: 2px !important; /* Léger espacement en bas */
  }
  
  /* Assurer que la ligne de match n'a pas d'espace supplémentaire sur mobile */
  .match-compact-row {
    padding: 4px 0 0 !important; /* Ajout d'espace en haut */
    min-height: auto !important;
  }
  
  /* Ajuster la hauteur des lignes de score sur mobile */
  .score-line {
    min-height: auto !important;
    height: auto !important;
  }
}
/* --------------------------------------------------------
   Styles pour la nouvelle structure compacte des matchs du jour
   -------------------------------------------------------- */
.match-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--glass-border);
}

.match-container {
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.match-compact-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent; /* Fond transparent car géré par le container parent */
  margin: 0;
  padding: 0px 0px 0px 0px; /* Suppression de l'espacement en bas */
  position: relative;
  min-height: 65px;
  border: none;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.13s;
  overflow: visible; /* Permet au contenu de s'étendre */
}
.match-container:hover {
  background: var(--glass-hover);
}

/* Témoin de pari - petite étoile avec couleurs selon statut */
.bet-indicator {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  vertical-align: middle;
  line-height: 1;
}

/* Pari en attente - gris */
.bet-indicator.bet-pending {
  color: #9ca3af;
  text-shadow: 0 0 4px rgba(156, 163, 175, 0.3);
  animation: starTwinkle 3s ease-in-out infinite;
}

/* Pari gagné - vert turquoise */
.bet-indicator.bet-won {
  color: #00d6b4;
  text-shadow: 0 0 4px rgba(0, 214, 180, 0.5);
  animation: starPulse 2s ease-in-out infinite;
}

/* Pari perdu - rouge */
.bet-indicator.bet-lost {
  color: #ef4444;
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

/* Pari annulé - orange/gris */
.bet-indicator.bet-cancelled {
  color: #ffa500;
  text-shadow: 0 0 4px rgba(255, 165, 0, 0.5);
  opacity: 0.7;
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

@keyframes starPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.15);
  }
}


.match-time {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-gray);
  padding: 0 8px;
  min-width: 48px;
  height: 100%;
}

/* Container pour info match en cours */
.match-live-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
}

/* Statut du match en cours (Q1, Q2, Halftime, etc.) et temps restant */
.match-status-live {
  color: #ff4444;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Clignotement lent pour les statuts live (hors HT) */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.live-blink {
  animation: live-pulse 2.8s ease-in-out infinite;
}

/* Match terminé */
.match-status-ended {
  color: var(--text-gray);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Étoile de favori */
.favorite-star {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
  /* Zone cliquable élargie sans changer la taille visuelle */
  padding: 8px;
  margin: -8px;
  position: relative;
}

.favorite-star:hover {
  transform: scale(1.15);
}

.favorite-star svg {
  transition: fill 0.2s ease, stroke 0.2s ease;
  /* Garantir que le SVG reste à sa taille d'origine */
  pointer-events: none;
}

.favorite-star:hover svg {
  stroke: #00f0c8;
  filter: drop-shadow(0 0 4px rgba(0, 214, 180, 0.4));
}

.favorite-star.favorite-active svg {
  fill: #00d6b4;
  filter: drop-shadow(0 0 6px rgba(0, 214, 180, 0.5));
}

.match-teams {
  flex: 2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Plus d'espace entre les équipes */
  justify-content: center;
  min-width: 160px;
  max-width: 100%;
  padding-left: 12px; /* Plus de marge à gauche */
  margin-top: 3px; /* Légère marge en haut */
  margin-bottom: 3px; /* Légère marge en bas */
}
.team-line {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
}
.team-logo-mini {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.match-scores {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 36px;
  padding-right: 6px;
  position: relative;
}
.match-boxscore {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 100%;
  margin-left: 8px;
  cursor: pointer;
}
.match-boxscore .boxscore-icon {
  margin: 0 auto;
}
.score-line {
  font-size: 0.95rem; /* Taille réduite */
  font-weight: normal; /* Sans gras */
  color: var(--text-main);
  min-height: 22px; /* Hauteur réduite */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.score-win {
  color: #BABABA;
  font-weight: 700;
}
.score-loss {
  color: var(--text-gray);
}
.boxscore-icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  margin-top: 2px;
}
.boxscore-icon {
  cursor: pointer;
  margin-left: 2px;
  vertical-align: middle;
  fill: #9ca3af;
  transition: fill 0.2s;
}
.boxscore-icon:hover {
  fill: var(--accent);
}
.location-row {
  text-align: center;
  font-size: 0.72rem;
  color: #b8b8b8;
  padding: 0 0 5px;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: transparent;
}

.playoff-series {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  color: #b8b8b8;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.playoff-series .playoff-label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

.playoff-series .playoff-sep,
.playoff-series .playoff-dash {
  color: rgba(184, 184, 184, 0.5);
}

.playoff-series .playoff-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.playoff-series .playoff-team,
.playoff-series .playoff-win {
  color: inherit;
}

.playoff-series .playoff-win-lead {
  color: #00d6b4;
  font-weight: 700;
}

/* Facing-elimination tag — shown next to .playoff-series on the location row
   when one team has reached 3 wins in a still-live series. */
.elimination-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  color: #ef4444;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.25);
}
.elimination-tag .elimination-label {
  font-weight: 800;
}
.elimination-tag .elimination-sep {
  color: rgba(239, 68, 68, 0.5);
  font-weight: 500;
}
.elimination-tag .elimination-sub {
  font-weight: 600;
}

/* Ajustement du texte de localisation sur mobile pour éviter le chevauchement */
@media screen and (max-width: 1023px) {
  .location-row {
    padding: 3px 0 4px !important; /* Espacement plus confortable */
    font-size: 0.7rem; /* Légèrement plus petit sur mobile */
    line-height: 1.2 !important; /* Hauteur de ligne légèrement augmentée */
    margin-top: 3px !important; /* Marge supérieure plus importante */
  }
}

/* Marquee: on narrow screens, when the location row content is wider than
   the container, JS duplicates the content and we animate it in a seamless
   horizontal loop (ad-ticker style). Applied only when .location-marquee
   is added by JS — otherwise the row behaves normally.
   We enforce the SAME vertical footprint whether or not the marquee is
   active, so the cards below keep consistent spacing. */
@media (max-width: 700px) {
  .location-row {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .location-row.location-nowrap {
    white-space: nowrap;
    overflow: hidden;
    justify-content: flex-start;
    /* Soft fade at both edges for a professional ticker look */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }
  .location-marquee-track {
    display: inline-block;
    flex-shrink: 0;
    padding-right: 3rem;
    animation: location-marquee-scroll 25s linear infinite;
    will-change: transform;
  }
  .location-row.location-marquee:hover .location-marquee-track,
  .location-row.location-marquee:focus-within .location-marquee-track {
    animation-play-state: paused;
  }
  @keyframes location-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
  }
}
/* --------------------------------------------------------
   1) Structure des colonnes
   -------------------------------------------------------- */
.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;        /* allow flex items to shrink below content size */
}
.left-column {
  flex: 7 1 0;         /* ~70% of available space, shrinkable */
}
.right-column {
  flex: 3 1 0;         /* ~30% of available space, shrinkable */
  overflow: hidden;    /* clip long names — content scrolls inside .rank-scroll-content */
}

/* --------------------------------------------------------
   Combo-drop “statsCategory” : flat & vert accent
   -------------------------------------------------------- */
.stats-category-selector-container {
  position: relative;
  margin-left: 10px;
  display: inline-block;
}

/* Cache l’UI native et impose notre style */
.stats-category-selector-container .stats-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Fond & texte */
  background-color: rgba(255,255,255,0.04);
  color: var(--text-gray);
  font-size: 0.85rem;

  /* Bordure & rayon */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;

  /* Dimensions & padding */
  height: 60px;
  padding: 0 2.5em 0 0.75em;
  box-sizing: border-box;

  /* Flèche SVG verte intégrée à droite */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%2300d6b4' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.6em auto;

  /* Pour forcer le vert sur la flèche et la sélection au clavier */
  accent-color: var(--accent);

  /* Transition focus */
  transition: border-color 0.2s;
}

.stats-category-selector-container .stats-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Cache l’expand bouton IE/Edge */
.stats-category-selector-container .stats-select::-ms-expand {
  display: none;
}

/* Options par défaut */
.stats-category-selector-container .stats-select option {
  background-color: #161616;
  color: var(--text-gray);
}

/* Survol & option sélectionnée en vert */
.stats-category-selector-container .stats-select option:hover,
.stats-category-selector-container .stats-select option:checked {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* --------------------------------------------------------
   Custom dropdown “statsCategory” – green only
   -------------------------------------------------------- */
.stats-category-selector-container .dropdown {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 0.85rem;
}

.dropdown__toggle {
  background: rgba(255,255,255,0.04);
  color: var(--text-gray);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0.5em 1em;
  height: 60px;
  line-height: 1.2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
  transition: all 0.2s;
}

.dropdown__toggle:hover,
.dropdown__toggle:focus {
  border-color: rgba(0,214,180,0.3);
  color: var(--text-main);
  background: rgba(255,255,255,0.06);
}

.dropdown__arrow {
  margin-left: 0.5em;
  transition: transform 0.2s;
}

.dropdown.open .dropdown__arrow {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(14,14,14,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-top: 4px;
  list-style: none;
  padding: 4px 0;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: none;
  z-index: 10;
}

.dropdown.open .dropdown__menu {
  display: block;
}

.dropdown__menu li {
  padding: 0.5em 1em;
  color: var(--text-gray);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.dropdown__menu li:hover {
  background: rgba(0,214,180,0.1);
  color: var(--text-main);
}
.dropdown__menu li.selected {
  color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------
   3) Carte de classement (“table‐like”)
   -------------------------------------------------------- */
/* La classe .with-table-style (remplace .with-table‐style) applique un fond identique au header du tableau de matchs.
   On utilise var(--bg-header) pour le header (= même nuance de bleu) et var(--bg-panel) pour le corps. */
.with-table-style {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* On isole le contenu des classements pour qu’il puisse défiler indépendamment */
.stats-card-body {
  background: transparent;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-gray);
  font-size: 0.85rem;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}

.stats-hint {
  font-size: 0.72rem;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin: 0;
}

/* Overlay “Chargement…” */
.stats-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  z-index: 10;
}

/* --------------------------------------------------------
   4) Listes de stats (PPG, ASS, REB, etc.) : même nuance de bleu en fond des lignes (bg-row)
   -------------------------------------------------------- */
.stats-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-container li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 6px 8px;
  border-bottom: 1px solid var(--glass-border);
}
.stats-container li:last-child {
  border-bottom: none;
}
.stats-container li img {
  border-radius: 50%;
  object-fit: contain;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  padding: 2px;
  background: rgba(255, 255, 255, 0.05);
}
/* --------------------------------------------------------
   Forcer la case « calendrier » à 60×60 comme les .btn-day
   -------------------------------------------------------- */
.cash-calendar-wrapper .calendar-btn {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background-color: rgba(255,255,255,0.04);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.days-and-calendar {
  display: flex;
  align-items: center;
  gap: 5px; /* vous aviez déjà 5px entre les jours, mais on veut aussi ce gap ici */
}
/* Au survol, on garde la même logique qu’avec .btn-day */
.cash-calendar-wrapper .calendar-btn:hover {
  background-color: var(--accent);
  color: #fff;
}

/* On s’assure que l’icône soit centrée */
.cash-calendar-wrapper .calendar-btn i {
  font-size: 1rem;
}
.top-row {
  display: flex;
  align-items: center; /* centre verticalement la ligne “jours + calendrier” et le select */
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
/* On part du principe que .stats-card-body a déjà overflow-y: auto et une hauteur max fixée */
.stats-card-body::-webkit-scrollbar {
  width: 4px;
}
.stats-card-body::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px;
}
.stats-card-body::-webkit-scrollbar-track {
  background: transparent;
}
/* --------------------------------------------------------
   5) Responsive (<768px)
   -------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* Supprimer TOUTES les marges et paddings Bootstrap */
  .container,
  .container-fluid,
  .col-md-6,
  .col-md-3,
  .col-12,
  .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Body sans padding */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Main content */
  main,
  .main-content,
  .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override du padding de base.css - gap minimal avec la navbar (50px navbar + 8px) */
  .content {
    padding: 58px 5px 20px 5px !important;
  }

  /* Flatten match cards: remove nested rectangles, keep single container + thin separators */
  .custom-card-left-aligned {
    background: transparent !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
  }
  .gameday-table-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* Padding gauche + bords arrondis en haut pour les deux tableaux mobile */
  .match-list,
  .stats-container ul {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .match-list {
    border-top: none !important;
  }
  .match-container {
    background: transparent !important;
    border-bottom: 1px solid #1a1a1a !important;
  }
  .match-container:last-child {
    border-bottom: none !important;
  }
  .location-row {
    background: transparent !important;
    border-bottom: none !important;
  }

  /* Flatten rankings cards: same transparent treatment as match cards */
  .custom-card-right-aligned {
    background: transparent !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
  }
  .with-table-style {
    background: transparent !important;
  }
  .stats-card-body {
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .stats-container {
    overflow: visible;
  }
  .stats-container li {
    border-bottom: 1px solid #1a1a1a !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }
  .stats-container li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Reduce gap between day selector row and match table */
  .top-row.mb-4 {
    margin-bottom: 8px !important;
  }
  
  /* 1) Masquer le sélecteur d'origine dans la top-row */
  .stats-category-selector-container {
    display: none;
  }

  /* 2) Afficher la copie mobile du sélecteur (à insérer sous left-column) */
  .stats-mobile-selector-container {
    display: block;
    margin: 0;
  }

  /* === Mobile View Toggle (Games / Rankings) === */
  .mobile-view-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
  }
  .mobile-view-opt {
    flex: 1;
    padding: 5px 16px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .mobile-view-opt:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  .mobile-view-opt.active {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
  }

  /* When rankings view is active: hide match table, show rankings + stat selector */
  .mobile-view-rankings .left-column {
    display: none !important;
  }
  .mobile-view-rankings .stats-mobile-selector-container {
    display: block !important;
  }
  .mobile-view-rankings .right-column {
    display: flex !important;
  }

  /* When games view is active (default): show match table, hide rankings */
  .mobile-view-games .right-column {
    display: none !important;
  }
  .mobile-view-games .stats-mobile-selector-container {
    display: none !important;
  }
  .mobile-view-games .left-column {
    display: flex !important;
  }

  /* 4) Faire prendre 100% de largeur à left-column et right-column */
  .left-column,
  .right-column {
    flex: 0 0 100%;
  }

  /* 5) Adapter la colonne de droite (classement) */
  .right-column {
    flex: 0 0 100%; /* déjà à 100% mais on le conserve pour clarté */
  }

  /* 6) Ajuster l’apparence du select mobile (optionnel / déjà stylé ailleurs) */
  .stats-mobile-selector-container .stats-select,
  .stats-category-selector-container .stats-select {
    font-size: 0.8rem;
  }

  /* 7) Adapter le corps de la carte de stats */
  .stats-card-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    max-height: calc(100vh - 200px);
  }

  /* 8) Ajuster les lignes de la liste de stats */
  .stats-container li {
    font-size: 0.8rem;
  }
  .stats-container li img {
    width: 36px;
    height: 36px;
  }

  /* 9) Réduire le border-radius sur la carte droite */
  .with-table-style {
    border-radius: 6px;
  }
}

/* ===========================================
   1) Style des cases “jours” (inchangé)
   =========================================== */
.btn-day {
  background: rgba(255,255,255,0.03);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  padding: 8px 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border-radius: 8px;
}
.btn-day:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.selected-day {
  background-color: #00d6b4 !important;
  color: #fff !important;
}

/* ===========================================
   2) Adaptation du bouton “Calendrier” (inchangé)
   =========================================== */
.calendar-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  box-sizing: content-box;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px;
}
.calendar-btn:hover {
  background: rgba(0,214,180,0.1);
  border-color: rgba(0,214,180,0.3);
  color: #fff;
}
.calendar-btn i {
  font-size: 1rem;
}

/* ===========================================
   3) Alignement « jours + calendrier »
   =========================================== */
.days-range-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* === Cartes (left & right) — Glass Card === */
.custom-card-left-aligned,
.custom-card-right-aligned {
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  width: 100%;
}
.custom-card-right-aligned {
  overflow: hidden; /* prevent long names from pushing card wider than column */
}

/* === Sélecteur “stats” droite === */
.stats-select {
  background-color: #111111;
  border: 1px solid var(--accent);
  color: #fff;
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.stats-select option {
  background-color: #111111;
  color: #fff;
}

.stats-container {
  color: #fff;
  overflow-x: hidden;
}
.stats-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.stats-container li {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.85rem;
  padding: 4px 0;
}
.stats-container li img {
  border-radius: 6px;
  object-fit: contain;
  margin-right: 4px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  padding: 2px;
  background: rgba(255, 255, 255, 0.05);
}
.player-ranking {
  font-weight: bold;
  margin-right: 2px;
}
.rank-line1 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.rank-line2 {
  line-height: 1;
}
.opp-vs {
  color: #6b7280;
  font-size: 0.72em;
}

/* ————————————————————————————————————
   Gamday Table (compact & harmonisé)
   ———————————————————————————————————— */

/* Wrapper scroll — transparent (glass applied on outer .custom-card) */
.gameday-table-wrapper {
  background: transparent;
  border-radius: 10px;
  border: none;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.gameday-table-wrapper::-webkit-scrollbar {
  width: 4px;
}
.gameday-table-wrapper::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 2px;
}
.gameday-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* Table principale */
.gameday-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: transparent;
  color: var(--text-gray); /* texte en gris clair */
  font-size: 0.85rem; /* plus compact */
}

/* Header sticky — Glass Card */
.gameday-table thead th {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.015);
  color: var(--text-gray);
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--glass-border);
  padding: 0.5rem 0.75rem;
  text-align: center;
  z-index: 2;
}

/* Zebra striping — subtle */
.gameday-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.01);
}

/* Lignes et hover */
.gameday-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background-color 0.15s;
}
.gameday-table tbody tr:hover {
  background-color: var(--glass-hover);
  cursor: pointer;
}

/* Cellules */
.gameday-table td {
  padding: 0.5rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  font-size: 0.85rem;
  color: var(--text-gray);
}
.gameday-table th[style*="visibility: hidden"],
.gameday-table td[style*="visibility: hidden"] {
  padding: 0;
  border: none;
  width: 0;
  overflow: hidden;
}

/* Team-cell : logo + nom */
.gameday-table .team-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 100%;
  vertical-align: middle;
}
.gameday-table .team-cell img.team-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
/* — Team-cell : on laisse le texte s’afficher entièrement — */
.gameday-table .team-text-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  max-width: none;
  overflow: visible;
  height: 32px;
}
.gameday-table .team-text-container .team-name {
  /* On supprime white-space: nowrap et text-overflow. Le texte peut aller à la ligne ou s’étendre. */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-gray);
  margin-bottom: 1px;
}

/* Heure (plus petite) */
.gameday-table .game-time span {
  font-size: 0.75rem;
  color: var(--text-gray);
}

/* Scores colorés */
.gameday-table .boxscore-icon {
  fill: var(--text-gray) !important;
  color: var(--text-gray) !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.gameday-table .score-win {
  color: #BABABA;
  font-weight: 700;
  font-size: 0.9rem;
}
.gameday-table .score-loss {
  color: var(--loss-red);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Location-cell */
.gameday-table .location-cell .arena {
  font-weight: bold;
  font-size: 0.85rem;
  display: block;
  color: #c0c0c0;
  margin-bottom: -2px;
  line-height: 1.02;
}
.gameday-table .location-cell .city {
  font-size: 0.7rem;
  color: #b8b8b8;
  display: block;
  margin-top: -2px;
  line-height: 1.02;
}

/* —————————————————————————————————————————————
   1) FORCER LE DÉFILEMENT HORIZONTAL SUR “PHABLETS/TELEPHONES”
      ET GARDER LE DÉFILEMENT VERTICAL NORMAL
   ————————————————————————————————————————————— */
.gameday-table-wrapper {
  overflow-y: auto; /* scroll vertical normal */
  overflow-x: auto; /* ajouter un scroll horizontal sous 768px */
}

/* On veille à ce que la table occupe sa largeur naturelle */
.gameday-table {
  table-layout: auto;
  width: 100%;
}

/* ———————————————————————————————————————————————————
   MEDIA QUERY POUR ÉCRANS ≤ 768px (iPhone Plus/Max, Galaxy S, etc.)
   ——————————————————————————————————————————————————— */
@media screen and (max-width: 1024px) {
  .days-and-calendar .btn-day.selected-day,
  .days-and-calendar .selected-day {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 0 8px 2px rgba(0, 214, 180, 0.3) !important;
  }
  /* 1) MASQUER LA COLONNE “LOCATION” (en‐tête + cellules) */
  .gameday-table thead th:nth-child(6),
  .gameday-table tbody td.location-cell {
    display: none !important;
  }

  /* 2) RÉDUIRE LES ESPACE­MENTS ET TAILLE DE POLICE DANS LE TABLEAU */
  .gameday-table thead th,
  .gameday-table td {
    padding: 0;
    font-size: 0.7rem;
  }

  /* 3) DIMINUER LA TAILLE DES LOGOS D’ÉQUIPE */
  .gameday-table .team-cell img.team-logo {
    width: 32px;
    height: 32px;
  }

  /* 4) TRANSFORMER LE SÉLECTEUR EN BOUTONS SUR MOBILE */
  /* Masquer tous les sélecteurs existants sur mobile */
  select,
  .custom-select,
  .form-select,
  [class*="dropdown"]:not(.cash-cal-cell),
  [id*="dropdown"],
  [class*="select"]:not(.cash-cal-cell),
  [id*="select"] {
    display: none !important;
  }
  
  /* Container spécifique pour nos boutons de statistiques */
  .stat-buttons-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 4px 0;
  }
  
  /* Stat category pill switch — same style as Games/Rankings toggle */
  .mobile-stat-buttons {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    gap: 0;
    margin: 0 auto;
    max-width: max-content;
  }
  .mobile-stat-buttons::-webkit-scrollbar {
    display: none;
  }

  .mobile-stat-buttons button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
  }

  .mobile-stat-buttons button.active {
    background: transparent !important;
    color: #00d6b4 !important;
    font-weight: 600;
    border-bottom: 2px solid #00d6b4 !important;
  }

  /* 4) NOM D’ÉQUIPE PLUS COMPACT */
  .gameday-table .team-text-container .team-name {
    font-size: 0.75rem;
  }

  /* 5) HEURE (HOUR) MOINS “GRANDE” */
  .gameday-table .game-time span {
    font-size: 0.65rem;
  }

  /* 6) MASQUER LE TEXTE DE “LOCATION-CELL” SI BESOIN */
  .gameday-table .location-cell .arena,
  .gameday-table .location-cell .city {
    display: none;
  }

  /* 7) SUR LES NOMS D’ÉQUIPE : PASSER DES NOMS COMPLETS AUX INITIALES */
  .team-name-full {
    display: none;
  }
  .team-name-initials {
    display: inline;
    font-weight: 600; /* pour que les initiales soient bien visibles */
    font-size: 0.75rem; /* ajustez si besoin */
    text-transform: uppercase;
  }

  /* 8) ADAPTER LE CONTENEUR “JOURS + CALENDRIER”
       POUR QU’IL FASSE EXACTEMENT LA MÊME LARGEUR QUE LE TABLEAU */
  .top-row {
    flex-wrap: wrap; /* on autorise les éléments à passer à la ligne si nécessaire */
  }

  /* Jours scrollables + calendrier fixe à côté */
  .days-and-calendar {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    gap: 4px;
    box-sizing: border-box;
  }

  /* Réduire un peu la taille des cases « jours » pour en faire tenir plus */
  .days-and-calendar .btn-day {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 0.6rem;
    line-height: 1.2;
    margin-right: 4px;
    box-sizing: border-box;
  }

  /* Bouton calendrier — maintenant à côté du scroll container */
  .cash-calendar-wrapper {
    flex: 0 0 auto;
  }
  .cash-calendar-wrapper .calendar-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 0.9rem;
    box-sizing: border-box;
  }

  /* 9) « Carte des classements » (colonne de droite) à 100% */
  .right-column {
    flex: 0 0 100%; /* s'étend en largeur sur mobile, sous le tableau des matchs */
    margin-top: 0; /* même espacement que le tableau Games */
  }

  /* 10) Ajustements pour le sélecteur de stats */
  .stats-category-selector-container .stats-select {
    font-size: 0.8rem;
    height: 48px; /* réduire la hauteur pour que tout reste cohérent */
  }

  /* 11) Ajustements pour le contenu des stats (PPG, ASS, etc.) */
  .stats-card-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    max-height: calc(100vh - 200px);
  }

  /* Conteneur scrollable avec espace pour boutons */
  .stats-card-body {
    position: static;
    padding: 0 !important;
  }
  
  /* Stat category pill switch container */
  .sticky-stat-buttons,
  #mobile-stat-buttons-container,
  .stat-buttons-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    background: transparent;
    position: static !important;
    width: 100%;
  }
  .stats-container li {
    font-size: 0.8rem;
    gap: 4px;
    align-items: center !important;
  }
  .stats-container li img {
    width: 32px;
    height: 32px;
    border-radius: 6px !important;
    object-fit: contain !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    padding: 2px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .stats-container li .player-ranking {
    flex: 0 0 22px !important;
    min-width: 22px !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    text-align: right;
  }
  .with-table-style {
    border-radius: 6px;
  }

  /* 12) ÉTENDRE L’INPUT “date” POUR COUVRIR LE BOUTON CALENDRIER */
  /*    Le bouton fait 48×48 px en mobile, donc on applique la même taille à l’input */
  #game_day {
    width: 48px !important;
    height: 48px !important;
  }
  /* --- FORCE JOUR SÉLECTIONNÉ MOBILE --- */
  .days-and-calendar a.btn-day.selected-day {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0,214,180,0.10) !important;
    border: 1px solid rgba(0,214,180,0.4) !important;
  }
}

/* ————————————————————————————————————
   Star Players (compactés)
   ———————————————————————————————————— */

.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 18px;
  min-width: 40px;
  width: 48px;
}
.vs-line {
  width: 2px;
  height: 28px;
  background: #7a7a7a;
  margin: 0;
}
.vs-text {
  color: #7a7a7a;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 6px 0 6px 0;
  letter-spacing: 1px;
  text-align: center;
}

@media (max-width: 900px) {
  .vs-divider {
    min-width: 28px;
    width: 32px;
    margin: 0 8px;
  }
  .vs-line {
    height: 20px;
  }
  .vs-text {
    font-size: 0.97rem;
    margin: 4px 0 4px 0;
  }
}
@media (max-width: 1023px) {
  .star-players-container {
    flex-direction: column;
  }
  .vs-divider {
    flex-direction: row;
    min-width: unset;
    width: 100%;
    margin: 10px 0;
    align-items: center;
    justify-content: center;
    height: 32px;
  }
  .vs-line {
    width: 28px;
    height: 2px;
    margin: 0 8px;
  }
  .vs-text {
    margin: 0 8px;
    font-size: 1rem;
  }
}

.extra-row {
  background-color: transparent; /* Suppression du fond */
  border-top: none; /* Suppression de la bordure */
  padding: 0;
  width: 100%;
  display: block;
}

.star-players-container {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  padding: 0;
  color: var(--text-gray);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.extra-row > td {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: visible !important;
}


.team-star {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  background: transparent; /* Suppression du fond */
  padding: 12px 18px;
  border-radius: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: none;
}

/* Conteneur pour le nom d'équipe + indicateur */
.team-header-with-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  width: 100%;
  flex-wrap: wrap;
}

/* Conteneur nom d'équipe + rankings */
.team-name-rankings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.team-star h5 {
  text-align: left;
  margin: 0;
  font-size: 1rem;
}

.team-name-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.team-name-link:hover,
.team-name-link:active {
  color: #00d6b4;
  text-decoration: none;
}

.view-team-link {
  color: #ffffff;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  transition: color 0.15s ease;
  cursor: pointer;
}

@media (min-width: 769px) {
  .view-team-link {
    font-size: 0.8em;
  }
}

.view-team-link:hover,
.view-team-link:active {
  color: #00d6b4;
  text-decoration: none;
}

/* Badges de classement (Offense / Defense) */
.team-rankings-badges {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.4vw, 8px);
  flex-wrap: nowrap;
}

.ranking-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.55rem, 0.65vw, 0.7rem);
  font-weight: 500;
  padding: 2px clamp(3px, 0.4vw, 6px);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ranking-badge .rank-label {
  font-weight: 600;
  opacity: 0.7;
}

.ranking-badge.rank-good {
  background: rgba(0, 214, 180, 0.1);
  color: #00d6b4;
  border: 1px solid rgba(0, 214, 180, 0.3);
}

.ranking-badge.rank-medium {
  background: rgba(255, 165, 0, 0.1);
  color: #ffa500;
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.ranking-badge.rank-bad {
  background: rgba(255, 91, 91, 0.1);
  color: #ff5b5b;
  border: 1px solid rgba(255, 91, 91, 0.3);
}

/* Badge différence de points */
.point-diff-badge {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.55rem, 0.65vw, 0.7rem);
  font-weight: 600;
  padding: 2px clamp(3px, 0.4vw, 6px);
  border-radius: 3px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.point-diff-badge.positive {
  background: rgba(0, 214, 180, 0.15);
  color: var(--accent);
  border: 1px solid rgba(0, 214, 180, 0.4);
}

.point-diff-badge.negative {
  background: rgba(255, 91, 91, 0.15);
  color: var(--loss-red);
  border: 1px solid rgba(255, 91, 91, 0.4);
}

/* Indicateur discret (Real Stats / Averages) */
.stats-indicator {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.55rem, 0.65vw, 0.7rem);
  font-weight: 600;
  padding: 2px clamp(3px, 0.4vw, 6px);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.stats-indicator.real-stats {
  background: rgba(0, 214, 180, 0.15);
  color: var(--accent);
  border: 1px solid rgba(0, 214, 180, 0.4);
}

.stats-indicator.avg-stats {
  background: rgba(0, 214, 180, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 214, 180, 0.3);
}
.star-players-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: flex-start;
}
.star-player {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: transparent;
  border-radius: 4px;
}
.star-player:hover {
  background: transparent;
}
.star-player .player-photo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  margin-right: 8px;
}
.star-player .player-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  width: 100%;
}
.star-player .player-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 2px;
  text-align: left;
  width: 100%;
}
.star-player .player-stats {
  font-size: 0.8rem;
  color: var(--text-gray);
  line-height: 1.2;
  text-align: left;
  width: 100%;
}

/* Responsive (<768px) pour Star Players */
@media screen and (max-width: 1023px) {
  .star-players-container {
    flex-direction: column;
  }
  .team-star {
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 10px;
  }
  
  /* Rankings responsive — clamp() handles sizing automatically, stays on one line */
  .team-rankings-badges {
    max-width: 100%;
  }
  
  .team-star h5 {
    font-size: 0.9rem;
  }
  
  .team-header-with-indicator {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .team-name-rankings {
    width: 100%;
  }
  
  .match-compact-row {
    padding-bottom: 24px;
  }
  .match-location {
    bottom: 4px;
    font-size: 0.65rem;
    background-color: rgba(25, 33, 43, 0.8);
    padding: 1px 0;
    margin-top: 2px;
  }
}


@media screen and (max-width: 1200px) and (min-width: 1025px) {
  .star-players-container {
    gap: 12px;
    padding: 4px 2px 4px 2px;
  }
  .team-star {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 50%;
    padding: 6px 4px;
    margin: 0;
  }
  .star-players-list {
    gap: 7px;
  }
  .star-player {
    padding: 4px 4px;
  }
  .star-player .player-photo {
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }
  .star-player .player-name {
    font-size: 0.92rem;
  }
  .star-player .player-stats {
    font-size: 0.78rem;
  }
}


/* 1) Forcer toutes les cellules (th + td) à 
      s’aligner en haut de la ligne (vertical-align: top) */
.gameday-table th,
.gameday-table td {
  vertical-align: middle !important;
}

/* 2) Empêcher le retour à la ligne dans les noms d’équipes
      pour que toutes les lignes aient la même hauteur */
.gameday-table .team-text-container .team-name-full {
  white-space: nowrap;
  overflow: hidden; /* si ça dépasse, on coupe */
  text-overflow: ellipsis; /* ajoute "…" si trop long */
}

/* 3) Forcer l’alignement à gauche dans la colonne "LOCATION" */
.gameday-table td.location-cell {
  text-align: left;
  /* si besoin, rajoutez un padding-left identique à celui des autres cellules : */
  /* padding-left: 0.75rem; */
}

/* 4) Si vous voulez absolument fixer la colonne "HOUR" au centre 
      (et maintenir une largeur à peu près constante), vous pouvez 
      simplement préciser une largeur sur la 3ᵉ colonne via nth-child : */
.gameday-table th:nth-child(3),
.gameday-table td:nth-child(3) {
  width: 10%; /* par exemple 10%, ajustez selon votre goût */
}

/* 5) Et pour équilibrer les colonnes "AWAY", "HOME" et "LOCATION", 
      si vous n’utilisez pas de <colgroup>, vous pouvez aussi leur 
      donner une largeur approximative par nth-child. Par exemple : */
.gameday-table th:nth-child(1),
.gameday-table td:nth-child(1) {
  width: 20%;
} /* AWAY */
.gameday-table th:nth-child(5),
.gameday-table td:nth-child(5) {
  width: 25%;
} /* HOME */
.gameday-table th:nth-child(6),
.gameday-table td:nth-child(6) {
  width: 25%;
} /* LOCATION */

/* 6) Enfin, si vos en-têtes vides (colonne “score extérieur” et “score domicile”) 
      apparaissent encore de façon gênante, vous pouvez explicitement retirer 
      leur fond et leurs bordures pour qu’elles ne donnent plus l’impression 
      d’un “trou” coloré :
*/
.gameday-table thead th:nth-child(2),
.gameday-table thead th:nth-child(4) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 1) Transforme vos wrappers en conteneurs flex pour qu'ils puissent grandir et centrer leur contenu */
.gameday-table-wrapper,
.stats-table-wrapper {
  flex: 1; /* prend tout l’espace restant dans la carte */
  display: flex; /* on en fait un flex-container */
}

/* ––– Cards “no-data” ––– */
/* ––– Message unique quand aucun match ––– */
.no-data-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* alignement en haut */
  padding-top: 80px; /* pousse le contenu vers le bas de 80px */
  min-height: calc(100vh - 160px); /* ou ajustez cette valeur si besoin */
  color: var(--text-gray);
  text-align: center;
  gap: 1rem;
}

.no-data-full i {
  font-size: 3rem;
}

.no-data-full p {
  font-size: 1.25rem;
  margin: 0;
}

/* Bouton pour aller au prochain jour avec des matchs */
.btn-next-game-day {
  margin-top: 1.5rem;
  padding: 0.5rem 1.2rem;  /* Plus fin */
  background-color: #484f58;  /* Gris clair */
  color: #9ca3af;  /* Texte blanc */
  border: 1px solid #6e7681;
  border-radius: 4px;  /* Moins arrondi pour effet épuré */
  font-size: 0.875rem;  /* Texte plus petit */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-next-game-day:hover {
  background-color: #6e7681;  /* Gris plus clair au survol */
  border-color: #9ca3af;
}

.btn-next-game-day:active {
  background-color: #00d6b4;  /* Turquoise au clic */
  border-color: #00d6b4;
  color: #9ca3af;
  transform: scale(0.98);
}

.btn-next-game-day:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ———————————————————————————————————
   Override couleur des textes de stats
   ——————————————————————————————————— */
.stats-card-body,
.stats-card-body .stats-container,
.stats-card-body .stats-container li,
.stats-card-body .stats-container li span,
.stats-card-body .stats-container li .player-ranking,
.stats-card-body .stats-container li .team-ranking {
  color: var(--text-gray) !important;
}

/* Couleurs des prédictions algo (won/lost/pending) — override du gris */
.stats-card-body .stats-container li span.pred-won {
  color: #00d6b4 !important;
  font-weight: 600;
}
.stats-card-body .stats-container li span.pred-lost {
  color: #ef4444 !important;
  font-weight: 600;
}
.stats-card-body .stats-container li span.pred-pending {
  color: #9ca3af !important;
  font-weight: 600;
}

/* ———————————————————————————————————
   Barre stats victoire algo (won/lost/pending + win rate)
   ——————————————————————————————————— */
.algo-win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #6b7280;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f0f0f;
}
.algo-win-won  { color: #00d6b4; font-weight: 600; }
.algo-win-lost { color: #ef4444; font-weight: 600; }
.algo-win-pending { color: #9ca3af; }
.algo-win-sep  { color: #374151; }
.algo-win-rate {
  margin-left: auto;
  font-weight: 700;
  font-size: 12px;
  color: #e5e7eb;
}
.algo-win-rate.rate-good { color: #00d6b4 !important; }
.algo-win-rate.rate-mid  { color: #ffa500 !important; }
.algo-win-rate.rate-bad  { color: #ef4444 !important; }

/* ———————————————————————————————————
   Curseur pointer pour les joueurs cliquables dans les classements
   ——————————————————————————————————— */
.clickable-stat-player,
.clickable-stat-player *,
.clickable-stat-player span,
.clickable-stat-player img {
  cursor: pointer !important;
}

.clickable-stat-player:hover {
  background-color: rgba(0, 214, 180, 0.1) !important;
  transition: background-color 0.2s ease;
}

/* Mobile: améliorer la zone de toucher */
.clickable-stat-player {
  -webkit-tap-highlight-color: rgba(0, 214, 180, 0.2);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.clickable-star-player {
  -webkit-tap-highlight-color: rgba(0, 214, 180, 0.2);
  user-select: none;
  -webkit-user-select: none;
}

.clickable-boxscore-player {
  -webkit-tap-highlight-color: rgba(0, 214, 180, 0.2);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer !important;
}

.clickable-boxscore-player > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}

.clickable-boxscore-player:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.2s ease;
}

.clickable-boxscore-player * {
  cursor: pointer !important;
}

/* ———————————————————————————————————
   Override couleur des textes Star Players
   ——————————————————————————————————— */
.star-players-container,
.star-player,
.star-player .player-name,
.star-player .player-stats,
.team-star h5 {
  color: var(--text-gray) !important;
}

/* 1) Jour + calendrier en gris secondaire */
.days-and-calendar .btn-day,
.cash-calendar-wrapper .calendar-btn i {
  color: var(--text-gray) !important;
}

/* Texte blanc au survol des boutons jour */
.days-and-calendar .btn-day:hover {
  color: #fff !important;
}

/* Conserver le fond vert sur le jour sélectionné,
   mais en gris pour le texte */

/* 2) Texte du sélecteur de stats en gris */
.stats-category-selector-container .stats-select,
.stats-category-selector-container .stats-select option {
  color: var(--text-gray) !important;
}

@media screen and (max-width: 1024px) {
  /* 0) Supprimez tout padding horizontal dans le wrapper global */
  .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1) Faites également touche à la top-bar si elle a un padding interne : */
  .top-row {
    padding-left: 0;
    padding-right: 0;
  }

  /* 2) Et pour que la barre des jours aille vraiment d’un bord à l’autre : */
  .days-and-calendar {
    margin-left: 0;
    margin-right: 0;
    gap: 4px; /* gardez un petit écart entre les cases */
  }

  /* 3) Enfin, si votre table ou vos cartes ont un container avec padding, on l’annule aussi : */
  .row-wrapper {
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
    gap: 0;
    min-height: unset; /* colonnes empilées sur mobile — pas de min-height global */
    align-items: unset;
  }
  .left-column > .card,
  .left-column > .custom-card-left-aligned,
  .right-column > .card,
  .right-column > .custom-card-right-aligned {
    flex: unset;
    min-height: calc(100vh - 170px);   /* fallback navigateurs anciens */
    min-height: calc(100svh - 170px);  /* svh = viewport réel après barre navigateur (Safari/Chrome mobile) */
  }
  .days-and-calendar {
    gap: 4px; /* même espacement réduit */
  }
  .days-and-calendar .btn-day {
    width: 48px; /* tes dimensions mobile */
    height: 48px;
    margin: 0; /* on enlève margin-right:4px si présent */
  }
  .cash-calendar-wrapper .calendar-btn {
    margin: 0;
  }
  .right-column {
    margin-top: 0 !important;
    padding-top: 0;
  }
}
/* override du gris imposé précédemment */
.days-and-calendar .btn-day.selected-day {
  background-color: var(--accent) !important;
  color: #fff !important; /* texte blanc */
}

/* ========== Unified Boxscore Scoreboard Header ========== */

.boxscore-period-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Safari: prevent auto font-size enlargement on small text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.boxscore-period-tabs::-webkit-scrollbar {
  display: none;
}

/* "Boxscore" label */
.qs-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main, #e8eaed);
  margin-right: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Each clickable column (All, Q1, Q2…) */
.qs-col {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  padding: 6px 14px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
  gap: 1px;
  flex-shrink: 0;
}
.qs-col:hover { border-bottom-color: rgba(0, 214, 180, 0.35); }
.qs-col.qs-active { border-bottom-color: #00d6b4; }

/* "All" column — separator on the right */
.qs-col-all {
  border-right: 1px solid rgba(255,255,255,0.07);
  margin-right: 4px;
  padding-right: 16px;
}

/* Quarter label */
.qs-head {
  font-size: 11px;
  font-weight: 600;
  color: rgba(180, 195, 210, 0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: block;
  text-align: center;
  width: 100%;
}
.qs-col.qs-active .qs-head { color: #00d6b4; }

/* Team name */
.qs-tn {
  font-size: 10px;
  font-weight: 400;
  color: rgba(180, 195, 210, 0.55);
  white-space: nowrap;
  line-height: 1.5;
}
.qs-col.qs-active .qs-tn { color: rgba(180, 195, 210, 0.75); }

/* Score value */
.qs-sv {
  font-size: 10px;
  font-weight: 600;
  color: rgba(220, 230, 240, 0.85);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qs-col.qs-active .qs-sv { color: #fff; }

/* ---- DESKTOP (≥768px): name+score grid in every quarter column ---- */
/* Shared 2-col grid: name (left, auto) | score (right, auto) — both rows share the same grid */
.qs-scores {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 5px;
  font-variant-numeric: tabular-nums;
}
.qs-scores .qs-tn { text-align: left; }
.qs-scores .qs-sv { text-align: right; }
.qs-col.qs-active .qs-scores .qs-sv { color: #fff; }

/* Quarter columns: scores only (no team names), stacked vertically */
.qs-score-only {
  grid-template-columns: auto;
  justify-items: center;
}
.qs-score-only .qs-sv { text-align: center; }

/* Mobile-only elements hidden on desktop */
.qs-name-mobile { display: none; }
.qs-mobile-sv   { display: none; }

/* ---- MOBILE (<768px): names once in "All", scores only in quarters ---- */
@media (max-width: 767px) {
  /* Hide desktop grids in quarter columns */
  .qs-desktop-scores { display: none !important; }

  /* Show score-only values */
  .qs-mobile-sv {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 22px;
    color: rgba(220, 230, 240, 0.85);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .qs-col.qs-active .qs-mobile-sv { color: #fff; }

  /* Show team names in "All" column, left-aligned */
  .qs-name-mobile {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(180, 195, 210, 0.55);
    white-space: nowrap;
    line-height: 1.5;
    text-align: left;
  }
  .qs-col.qs-active .qs-name-mobile { color: rgba(180, 195, 210, 0.75); }

  /* "All" column: align names to the left */
  .qs-col-all {
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  /* Quarter columns: compact padding */
  .qs-col {
    padding: 5px 10px 7px;
  }
}

/* ========== Boxscore Modal ========== */

.table-boxscore {
  border-collapse: separate !important;
  border-spacing: 0 0.5rem;
  width: 100%;
}

/* Header du tableau avec la même couleur que page filtre */
.table-boxscore thead th {
  background: var(--bg-header) !important; /* #22303f - même que page filtre */
  color: var(--accent) !important; /* Turquoise */
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 400;
  text-align: left;
}

/* Texte gris pour toutes les cellules */
.table-boxscore td {
  padding: 0.5rem 0.75rem; /* Padding par défaut */
  vertical-align: middle;
  color: var(--text-gray) !important;
  white-space: nowrap;
}

/* Padding légèrement augmenté sur PC uniquement */
@media (min-width: 769px) {
  .table-boxscore td {
    padding: 0.6rem 0.8rem; /* Padding modérément augmenté pour PC */
  }
}

/* Nuances de bleu pour PC - Lignes alternées (mêmes que page filtre) */
.table-boxscore tbody tr:nth-child(odd) td {
  background-color: var(--bg-row) !important; /* #19212b - même que page filtre */
}

.table-boxscore tbody tr:nth-child(even) td {
  background-color: var(--bg-panel) !important; /* #1b2530 - même que page filtre */
}

/* Bordures entre les lignes (même que page filtre) */
.table-boxscore tbody tr {
  border-bottom: 1px solid var(--border); /* #2c3a4a */
}

/* ========== MOBILE UNIQUEMENT : Colonnes figées (sticky) ========== */
@media (max-width: 1024px) {
  /* Réduction globale des tailles pour mobile */
  .table-boxscore th,
  .table-boxscore td {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Colonne #1 : Numéro */
  .table-boxscore th:nth-child(1),
  .table-boxscore td:nth-child(1) {
    position: -webkit-sticky;
    position: sticky;
    left: 0 !important;
    z-index: 10 !important;
    background-color: #1a1f2e !important;
    min-width: 35px !important;
    max-width: 35px !important;
    width: 35px !important;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Colonne #2 : Player (Photo + Nom) */
  .table-boxscore th:nth-child(2),
  .table-boxscore td:nth-child(2) {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 35px !important; /* Collé à la colonne # */
    z-index: 10 !important;
    background-color: #1a1f2e !important;
    min-width: 130px !important;
    max-width: 160px !important;
    width: 130px !important;
    padding: 0 !important;
    will-change: transform;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible !important;
  }

  /* Header sticky : fond turquoise pour les colonnes figées */
  .table-boxscore thead th:nth-child(1),
  .table-boxscore thead th:nth-child(2) {
    background-color: var(--accent) !important;
    z-index: 20 !important;
  }

  /* Ligne active/scrollée : fond opaque */
  .table-boxscore tbody tr:active td:nth-child(1),
  .table-boxscore tbody tr:active td:nth-child(2),
  .table-boxscore tbody tr:focus td:nth-child(1),
  .table-boxscore tbody tr:focus td:nth-child(2) {
    background-color: #232c3a !important;
    opacity: 1 !important;
  }

  /* Désactiver les effets de tap highlight sur mobile */
  .table-boxscore tbody tr {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Forcer l'opacité sur les colonnes sticky */
  .table-boxscore tbody tr td:nth-child(1),
  .table-boxscore tbody tr td:nth-child(2) {
    opacity: 1 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Dégradé doux à droite de la colonne Player (au lieu d'une ligne brutale) */
  .table-boxscore td:nth-child(2)::after,
  .table-boxscore th:nth-child(2)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 15px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15));
    pointer-events: none;
  }
  
  .table-boxscore td:nth-child(2),
  .table-boxscore th:nth-child(2) {
    position: relative;
  }
  
  /* Photos des joueurs réduites sur mobile */
  .boxscore-player-photo {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Taille normale pour les images inline sur mobile */
  .table-boxscore tbody td img {
    width: 1.4rem !important;
    height: 1.4rem !important;
    min-width: 1.4rem !important;
    min-height: 1.4rem !important;
  }
  
  /* Taille normale pour les noms sur mobile */
  .table-boxscore tbody td span {
    font-size: 0.75rem !important;
    font-weight: normal;
  }
  
  /* Colonne Player — limitée pour laisser ~50% aux stats (sticky # + Player ≈ 50%) */
  .table-boxscore tbody td:nth-child(2),
  .table-boxscore thead th:nth-child(2) {
    width: 33vw !important;
    min-width: 90px !important;
    max-width: 33vw !important;
    padding: 0 4px !important;
    overflow: hidden;
  }

  /* Photo joueur plus petite pour libérer de la place */
  .table-boxscore tbody td:nth-child(2) img {
    width: 1.2rem !important;
    height: 1.2rem !important;
    min-width: 1.2rem !important;
  }

  /* Truncate player names qui ne rentrent pas */
  .table-boxscore tbody td:nth-child(2) span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
  }
  
  /* Espacement normal entre photo et nom sur mobile */
  .table-boxscore tbody td:nth-child(2) > div {
    gap: 6px !important;
  }
}

/* ========== Team Totals Row ========== */
.table-boxscore tbody tr.team-totals-row td {
  background-color: var(--bg-row) !important;
  font-weight: 600 !important;
  color: var(--text-gray) !important;
  border-bottom: 2px solid var(--accent) !important;
}

.table-boxscore tbody tr.team-totals-row:hover td {
  background-color: var(--bg-hover) !important;
}

/* Team name should not be truncated - auto width */
.table-boxscore tbody tr.team-totals-row td:nth-child(2) {
  white-space: nowrap;
  overflow: visible !important;
}

@media (max-width: 1024px) {
  /* Mobile sticky background for team totals row */
  .table-boxscore tbody tr.team-totals-row td:nth-child(1),
  .table-boxscore tbody tr.team-totals-row td:nth-child(2) {
    background-color: var(--bg-row) !important;
    z-index: 10 !important;
  }
  
  .table-boxscore tbody tr.team-totals-row td:nth-child(2) span {
    font-weight: 600 !important;
  }
}

/* Scrollbar horizontal personnalisée */
.modal-body > div {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 214, 180, 0.3) rgba(255, 255, 255, 0.05);
  /* Optimisations pour mobile */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth scrolling iOS */
  overscroll-behavior-x: contain; /* Empêche le rebond */
  position: relative;
  z-index: 1;
  /* Important : ne pas ajouter de padding car les colonnes sticky utilisent left absolu */
  margin: 0;
  padding: 0;
}

.modal-body > div::-webkit-scrollbar {
  height: 8px;
}

.modal-body > div::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.modal-body > div::-webkit-scrollbar-thumb {
  background: rgba(0, 214, 180, 0.3);
  border-radius: 4px;
}

.modal-body > div::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 214, 180, 0.5);
}

/* Optimisation tableau pour sticky mobile */
.table-boxscore {
  position: relative;
  isolation: isolate; /* Crée un nouveau contexte de stack pour sticky */
  border-collapse: separate !important;
  border-spacing: 0;
}

/* S'assurer que le modal-body permet le scroll vertical */
#boxscoreModal .modal-body {
  padding: 0 !important;
  overflow-y: auto !important; /* Permettre le scroll vertical */
  overflow-x: hidden !important; /* Cacher le scroll horizontal global */
  max-height: calc(100vh - 200px) !important; /* Hauteur maximale du modal */
}

#boxscoreModal .modal-body > div {
  padding: 5px 0 !important; /* Padding vertical réduit */
}

/* En-tête collante en vert avec texte blanc */
.table-boxscore thead th {
  position: -webkit-sticky; /* Safari/iOS */
  position: sticky;
  top: 0;
  background-color: var(--accent) !important; /* vert accent */
  color: #fff !important; /* texte blanc */
  z-index: 2;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Lignes alternées pour la lisibilité */
.table-boxscore tbody tr:nth-child(odd) {
  background-color: var(--bg-alt);
}
/* — Hover horizontal (même couleur que page filtre) — */
.table-boxscore tbody tr:hover td {
  background-color: var(--bg-hover) !important; /* #263447 - même que page filtre */
  transition: background-color 0.2s;
  cursor: pointer;
}
.boxscore-player-photo {
  width: 40px; /* Taille par défaut (mobile) */
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
}

/* Agrandissement modéré sur PC uniquement */
@media (min-width: 769px) {
  .boxscore-player-photo {
    width: 55px;
    height: 55px;
  }
}

/* Agrandissement modéré des images inline dans le boxscore sur PC */
@media (min-width: 769px) {
  .table-boxscore tbody td img {
    width: 2.2rem !important; /* ~35px - agrandissement modéré */
    height: 2.2rem !important;
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
  }

  /* Agrandissement modéré des noms de joueurs dans le boxscore sur PC */
  .table-boxscore tbody td span {
    font-size: 0.88rem !important; /* Agrandissement modéré */
    font-weight: 500;
  }
}

/* Largeur augmentée et espacement pour la colonne Player sur PC uniquement */
@media (min-width: 769px) {
  .table-boxscore tbody td:nth-child(2),
  .table-boxscore thead th:nth-child(2) {
    min-width: 180px; /* Plus large pour accommoder photos + noms (réduit à 180px) */
    padding: 0.65rem 0.85rem !important; /* Padding modéré */
  }

  /* Espacement entre photo et nom du joueur sur PC */
  .table-boxscore tbody td:nth-child(2) > div {
    gap: 10px !important; /* Espacement modéré entre photo et nom */
  }
}
.calendar-btn .calendar-icon {
  /* Toujours s’assurer que l’image est en niveau de gris d’origine,
     puis inverser pour obtenir du blanc */
  filter: invert(100%) brightness(200%);
}
/* === Icone calendrier : gris par défaut, blanc on hover/active === */
.cash-calendar-wrapper .calendar-btn .calendar-icon {
  /* gris secondaire */
  filter: brightness(0) saturate(100%) invert(68%) sepia(3%) saturate(112%)
    hue-rotate(175deg) brightness(94%) contrast(90%);
  transition: filter 0.2s;
}

.cash-calendar-wrapper .calendar-btn:hover .calendar-icon {
  /* blanc pur */
  filter: invert(100%);
}
.gameday-table img.team-logo {
  width: 32px;
  height: 32px;
}

/* Marges fines sur mobile (comme Betsmaker) */
@media (max-width: 480px) {
  .gameday-container,
  .main-content,
  .days-and-calendar,
  .left-column,
  .right-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Padding interne pour le tableau */
  .gameday-table-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  .card.custom-card-right-aligned {
    padding: 0 !important;
  }
  
  /* Stats card à droite */
  .stats-card-body {
    padding: 0 !important;
  }
}

/* ================================================================
   CASH CALENDAR POPUP — calendrier custom avec cagnotte quotidienne
   ================================================================ */
.cash-calendar-wrapper {
  position: relative;
  z-index: auto; /* pas de stacking context → le bouton reste derrière le menu user (z-index:999), mais le popup (z-index:10001) passe devant */
}

@keyframes cashCalSlideIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cashCalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cash-calendar-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: rgba(14,14,14,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 10001;
  padding: 14px;
  font-family: inherit;
  animation: cashCalSlideIn 0.18s ease both;
}

/* Header : navigation mois */
.cash-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 6px;
}

/* Toggle switch cash/bets */
.cash-cal-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.cash-cal-toggle-label {
  font-size: 0.6rem;
  color: #9ca3af;
  letter-spacing: 0.02em;
  user-select: none;
}
.cash-cal-toggle input:checked ~ .cash-cal-toggle-label {
  color: #00d6b4;
}
.cash-cal-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cash-cal-toggle-slider {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 14px;
  background: #2a2a2a;
  border-radius: 7px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cash-cal-toggle-slider::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
  background: #9ca3af;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.cash-cal-toggle input:checked + .cash-cal-toggle-slider {
  background: rgba(0, 214, 180, 0.25);
}
.cash-cal-toggle input:checked + .cash-cal-toggle-slider::before {
  transform: translateX(14px);
  background: #00d6b4;
}

/* Mode sans cagnotte : masquer balances, indicateurs, légende */
.cash-calendar-popup.cash-hidden .cash-cal-balance,
.cash-calendar-popup.cash-hidden .cash-cal-indicators,
.cash-calendar-popup.cash-hidden .cash-cal-legend {
  display: none !important;
}
.cash-calendar-popup.cash-hidden .cash-cal-cell.bet-won .cash-cal-day,
.cash-calendar-popup.cash-hidden .cash-cal-cell.bet-lost .cash-cal-day,
.cash-calendar-popup.cash-hidden .cash-cal-cell.bet-pending .cash-cal-day,
.cash-calendar-popup.cash-hidden .cash-cal-cell.balance-positive .cash-cal-day,
.cash-calendar-popup.cash-hidden .cash-cal-cell.balance-negative .cash-cal-day,
.cash-calendar-popup.cash-hidden .cash-cal-cell.balance-zero .cash-cal-day {
  color: #e0e0e0;
  font-weight: 500;
}
.cash-calendar-popup.cash-hidden .cash-cal-cell {
  min-height: 36px;
}
.cash-cal-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e0e0e0;
  text-transform: capitalize;
  cursor: default;
}
.cash-cal-monthly-balance {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.02em;
}
.cash-calendar-popup.cash-hidden .cash-cal-monthly-balance {
  display: none !important;
}
.cash-cal-nav {
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 1.4rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}
.cash-cal-nav:hover {
  background: rgba(0,214,180,0.15);
  color: #00d6b4;
}

/* Jours de la semaine */
.cash-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}
.cash-cal-weekdays span {
  font-size: 0.7rem;
  color: #00d6b4;
  font-weight: 600;
  text-transform: lowercase;
  padding: 4px 0;
}

/* Grille des jours */
.cash-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Cellule d'un jour */
.cash-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px;
  min-height: 48px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.cash-cal-cell:hover {
  background: rgba(255,255,255,0.06);
}
.cash-cal-cell.other-month {
  opacity: 0.3;
}
.cash-cal-cell.is-future {
  opacity: 0.4;
  cursor: pointer;
}
.cash-cal-cell.is-today .cash-cal-day {
  background: #00d6b4;
  color: #0a0a0a;
  font-weight: 700;
}
.cash-cal-cell.is-selected {
  background: rgba(0,214,180,0.12);
  border: 1px solid rgba(0,214,180,0.4);
}

/* Numéro du jour */
.cash-cal-day {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e0e0e0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}

/* Couleur du jour selon le statut des paris (prioritaire) */
.cash-cal-cell.bet-won .cash-cal-day {
  color: #00d6b4;
  font-weight: 700;
}
.cash-cal-cell.bet-lost .cash-cal-day {
  color: #ef4444;
  font-weight: 700;
}
.cash-cal-cell.bet-pending .cash-cal-day {
  color: #9ca3af;
  font-weight: 600;
}

/* Couleur du jour selon la balance (si pas de paris) */
.cash-cal-cell.balance-positive .cash-cal-day {
  color: #00d6b4;
  font-weight: 700;
}
.cash-cal-cell.balance-negative .cash-cal-day {
  color: #ef4444;
  font-weight: 700;
}
.cash-cal-cell.balance-zero .cash-cal-day {
  color: #9ca3af;
}

/* Override pour le jour actuel (fond turquoise, texte sombre) */
.cash-cal-cell.is-today.bet-won .cash-cal-day,
.cash-cal-cell.is-today.bet-lost .cash-cal-day,
.cash-cal-cell.is-today.bet-pending .cash-cal-day,
.cash-cal-cell.is-today.balance-positive .cash-cal-day,
.cash-cal-cell.is-today.balance-negative .cash-cal-day,
.cash-cal-cell.is-today.balance-zero .cash-cal-day {
  color: #0a0a0a;
}

/* Solde en petit sous le jour */
.cash-cal-balance {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.cash-cal-balance.positive {
  color: #00d6b4;
}
.cash-cal-balance.negative {
  color: #ef4444;
}
.cash-cal-balance.zero {
  color: #9ca3af;
}

/* Indicateurs dépôt / retrait */
.cash-cal-indicators {
  display: flex;
  gap: 2px;
  margin-top: 1px;
}
.cash-cal-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cash-cal-indicator.deposit {
  background: #3b82f6;
}
.cash-cal-indicator.withdraw {
  background: #f59e0b;
}
.cash-cal-indicator.bet-won-dot {
  background: #00d6b4;
}
.cash-cal-indicator.bet-lost-dot {
  background: #ef4444;
}
.cash-cal-indicator.bet-pending-dot {
  background: #9ca3af;
}

/* Footer : Effacer / Aujourd'hui */
.cash-cal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1e1e1e;
}
.cash-cal-footer-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.cash-cal-footer-btn:hover {
  color: #e0e0e0;
  background: rgba(255,255,255,0.06);
}
.cash-cal-today-btn {
  color: #00d6b4;
  font-weight: 600;
}
.cash-cal-today-btn:hover {
  background: rgba(0,214,180,0.12);
}

/* Légende dépôt / retrait */
.cash-cal-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
  padding-top: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #9ca3af;
}
.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.legend-bet-won {
  background: #00d6b4;
}
.legend-bet-lost {
  background: #ef4444;
}
.legend-bet-pending {
  background: #9ca3af;
}
.legend-deposit {
  background: #3b82f6;
}
.legend-withdraw {
  background: #f59e0b;
}

/* Responsive mobile */
@media (max-width: 1024px) {
  .cash-calendar-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    width: 92vw;
    max-width: 360px;
    /* Remove GPU-heavy blur on mobile — causes freeze/flash on open */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(14,14,14,0.97);
    /* Simple fade-in only (transform already used for centering, can't animate it) */
    animation: cashCalFadeIn 0.18s ease both;
  }
  .cash-cal-cell {
    min-height: 44px;
  }
}

/* Overlay backdrop sur mobile */
/* Tooltip au survol (desktop) */
.cash-cal-tooltip {
  display: none;
  position: fixed;
  z-index: 10002;
  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  padding: 10px 12px;
  width: 220px;
  font-size: 0.72rem;
  color: #e0e0e0;
  pointer-events: none;
}
.tt-date {
  font-weight: 700;
  font-size: 0.8rem;
  color: #00d6b4;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #1e1e1e;
}
.tt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.tt-label {
  color: #9ca3af;
  font-size: 0.68rem;
}
.tt-group-header {
  font-weight: 600;
  font-size: 0.7rem;
  color: #00d6b4;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid #1e1e1e;
}
.tt-bet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
  font-size: 0.66rem;
}
.tt-stat {
  color: #9ca3af;
  font-size: 0.62rem;
}

/* ========== Injury Dot Inline (Rankings) ========== */
.injury-dot-inline {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 3px;
  animation: injuryPulseInline 1.8s ease-in-out infinite;
}
.injury-dot-inline.injury-green {
  background: #008348;
  box-shadow: 0 0 4px rgba(0, 131, 72, 0.5);
}
.injury-dot-inline.injury-orange {
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}
.injury-dot-inline.injury-red {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}
@keyframes injuryPulseInline {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Injury popup (matches playerstat.css style exactly) ──── */
.injury-popup {
  position: fixed;
  min-width: 220px;
  max-width: 300px;
  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px 16px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.injury-popup--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.injury-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.injury-popup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.injury-popup-status {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.injury-popup-desc {
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0 0 6px;
}
.injury-popup-return {
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  margin: 0;
  display: none;
}

/* ─── Injury badge (rankings + expanded row) ───────────────── */
.gd-inj-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.9;
}
.gd-inj-badge:hover { opacity: 0.7; }

.gd-inj-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Colors — no border, no background */
.gd-inj-green  { color: #008348; }
.gd-inj-green  .gd-inj-dot { background: #008348; }
.gd-inj-orange { color: #f59e0b; }
.gd-inj-orange .gd-inj-dot { background: #f59e0b; }
.gd-inj-red    { color: #ef4444; }
.gd-inj-red    .gd-inj-dot { background: #ef4444; }

/* ── Ranking list: fixed rank+photo, scrollable content area ── */
#ppg-list li, #ass-list li, #reb-list li,
#algo5-list li, #algosmart-list li, #algosecure-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: hidden;
  text-align: left;
}

/* Rank number: fixed width, never shrinks, never wraps */
#ppg-list   .player-ranking,
#ass-list   .player-ranking,
#reb-list   .player-ranking,
#algo5-list .player-ranking,
#algosmart-list .player-ranking,
#algosecure-list .player-ranking {
  flex: 0 0 24px;
  min-width: 24px;
  white-space: nowrap;
  text-align: left;
  padding-right: 4px;
}

/* Photo: fixed size, never shrinks */
#ppg-list   li img, #ass-list   li img, #reb-list   li img,
#algo5-list li img, #algosmart-list li img, #algosecure-list li img {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* ── Mobile-style rows (name / inj+vs / value+unit) ── */
#ppg-list li.pred-mobile-row,
#ass-list li.pred-mobile-row,
#reb-list li.pred-mobile-row,
#algo5-list li.pred-mobile-row,
#algosmart-list li.pred-mobile-row,
#algosecure-list li.pred-mobile-row {
  gap: 8px;
  padding: 6px 8px;
  align-items: center;
}
.pred-mobile-row .pred-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.pred-mobile-row .pred-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e5e7eb !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.pred-mobile-row .pred-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.pred-mobile-row .pred-inj-badge {
  margin-left: 0;
  font-size: 0.7rem;
}
.pred-mobile-row .pred-opp {
  color: #6b7280 !important;
  font-size: 0.7rem;
}
.pred-mobile-row .pred-value-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  line-height: 1;
  padding-left: 6px;
}
.pred-mobile-row .pred-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff !important;
}
.pred-mobile-row .pred-unit {
  font-size: 0.6rem;
  color: #ffffff !important;
  letter-spacing: 0.4px;
  margin-top: 1px;
  opacity: 0.75;
}
/* Value number stays white regardless of won/lost/pending — colour lives on the delta */
.stats-card-body .stats-container li.pred-mobile-row .pred-value,
.stats-card-body .stats-container li.pred-mobile-row .pred-value.pred-won,
.stats-card-body .stats-container li.pred-mobile-row .pred-value.pred-lost,
.stats-card-body .stats-container li.pred-mobile-row .pred-value.pred-pending {
  color: #ffffff !important;
}

/* Delta badge (±N) next to prediction value when the game is finished */
.pred-mobile-row .pred-delta {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  vertical-align: middle;
}
.stats-card-body .stats-container li.pred-mobile-row .pred-value .pred-delta-up {
  color: #00d6b4 !important;
}
.stats-card-body .stats-container li.pred-mobile-row .pred-value .pred-delta-down {
  color: #ef4444 !important;
}

/* Empty state for prediction containers */
.pred-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* Scrollable content wrapper (name + stat + badge + opp-vs) */
.rank-scroll-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rank-scroll-content > span {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Expanded row: player name + badge on same line */
.player-name-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 2px;
  overflow: hidden;
}
.player-name-row .player-name {
  width: auto !important;   /* override the global width:100% so badge fits inline */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.player-name-row .gd-inj-badge {
  flex-shrink: 0;
}

/* ─── Score Odds (replaces dash for upcoming matches) ──────── */
.score-odd {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.3px;
}

/* ─── Score Odds inline separator (pipe between score and odds) ─── */
.score-odd-sep {
  font-size: 0.6rem;
  color: #444;
  margin: 0 4px;
  font-weight: 300;
  user-select: none;
}

/* ─── Score Odds inline (shown next to score for live/finished matches) ─── */
.score-odd-inline {
  font-size: 0.62rem;
  color: #666;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* ─── Spread badge (inline next to each team's odds) ──────── */
.spread-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #8a9bb0;
  margin-left: 6px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ─── H2H Bookmaker badges in expanded team header ──────────── */
.gd-h2h-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 5px;
}
.gd-h2h-bookie {
  font-size: 0.68rem;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: #bbb;
  white-space: nowrap;
  line-height: 1.4;
}
.gd-h2h-odd {
  color: #facc15;
  font-weight: 700;
}
@media (max-width: 1023px) {
  .gd-h2h-badges { gap: 3px 5px; }
  .gd-h2h-bookie { font-size: 0.62rem; padding: 2px 5px; }
}

/* ─── Match Props Strip ──────────────────────────────────────── */
.gd-props-strip {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 214, 180, 0.15);
  border-radius: 4px;
  background: rgba(0, 214, 180, 0.03);
  font-size: 0.65rem;
  color: var(--text-gray);
  width: 100%;
  box-sizing: border-box;
}
.gd-props-header {
  font-size: 0.6rem;
  font-weight: 700;
  color: #00d6b4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gd-props-updated {
  font-weight: 400;
  color: #555;
  text-transform: none;
  letter-spacing: 0;
}
.gd-props-h2h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  font-size: 0.62rem;
}
.gd-props-label {
  color: #00d6b4;
  font-weight: 600;
  font-size: 0.58rem;
  text-transform: uppercase;
}
.gd-props-team {
  color: #ccc;
}
.gd-props-odd {
  color: #facc15;
  font-weight: 600;
}
.gd-props-sep {
  color: #444;
}
.gd-props-players {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.gd-player-prop {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.gd-prop-pname {
  color: #aaa;
  font-weight: 600;
  font-size: 0.6rem;
  min-width: 40px;
}
.gd-prop-line {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.58rem;
  color: #888;
}
.gd-prop-over {
  color: #4ade80;
  font-weight: 600;
}
.gd-prop-fr {
  color: #facc15;
  font-size: 0.55rem;
}
@media (max-width: 1023px) {
  .gd-props-strip { padding: 6px 8px; font-size: 0.6rem; }
  .gd-props-players { gap: 4px 8px; }
}

/* ── Fix: selected day rounded corners on mobile ── */
@media screen and (max-width: 1024px) {
  .days-and-calendar a.btn-day.selected-day {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,214,180,0.4) !important;
  }
}

/* ── Box Score modal: title row + team section headers ── */
.bs-modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 3px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.bs-modal-title {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gray);
  opacity: 0.5;
}
/* Push modal below navbar on all screen sizes */
.modal {
  align-items: flex-start !important;
  padding-top: 66px;
}
@media screen and (max-width: 1023px) {
  .modal {
    padding-top: 0;
  }
  /* .modal-dialog already has margin: 62px auto 8px on mobile */
}

/* ── Toast: sign-in required to favorite a game ── */
.fav-login-toast {
  position: fixed;
  bottom: 88px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #e0e0e0;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(0, 214, 180, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transform: translateX(120%);
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}
.fav-login-toast.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Resserre l'espace entre la colonne # et la photo du joueur dans le boxscore.
   Scopé desktop (>1024px) pour ne pas perturber le sticky mobile qui repose
   sur des largeurs fixes de la colonne # et Player. */
@media (min-width: 1025px) {
  .table-boxscore th:nth-child(1),
  .table-boxscore td:nth-child(1) {
    width: 1%;                   /* se rétracte à la taille du contenu */
    white-space: nowrap;
    padding-right: 2px !important;
  }
  .table-boxscore th:nth-child(2),
  .table-boxscore td:nth-child(2) {
    padding-left: 6px !important;
  }
}

/* Sur la vue mobile responsive, rétrécit la colonne # (de 35px → 24px),
   aligne son contenu à droite, et recale la position sticky du Player column
   en conséquence pour qu'il reste collé juste après. */
@media (max-width: 1024px) {
  .table-boxscore td:nth-child(1),
  .table-boxscore th:nth-child(1) {
    min-width: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
    padding: 0.3rem 0.1rem !important;
    text-align: right !important;
  }
  .table-boxscore td:nth-child(2),
  .table-boxscore th:nth-child(2) {
    left: 24px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Box Score — retrait du classement (#) et photos joueurs sur mobile.
   Pour revert: supprime simplement ce bloc.
   ───────────────────────────────────────────────────────────────────── */

/* 1) Cache la colonne de classement (#) sur TOUS les écrans — pas
   d'information utile dans ce contexte. */
.table-boxscore th:nth-child(1),
.table-boxscore td:nth-child(1) {
  display: none !important;
}

/* Sans colonne #, le Player column sticky doit coller à gauche (0) sur mobile */
@media (max-width: 1024px) {
  .table-boxscore td:nth-child(2),
  .table-boxscore th:nth-child(2) {
    left: 0 !important;
  }
  /* 2) Cache les photos des joueurs sur responsive mobile — le nom suffit.
     Ne touche pas au logo d'équipe (team-totals-row n'a pas cette classe). */
  .clickable-boxscore-player img {
    display: none !important;
  }
}