body:has(.match-history-page-shell) {
  --history-bg: var(--ranking-bg, var(--home-bg));
  --history-panel: var(--ranking-panel, var(--home-panel));
  --history-panel-2: var(--ranking-panel-2, var(--home-panel-2));
  --history-border: var(--ranking-border, var(--home-border));
  --history-muted: var(--ranking-muted, var(--home-muted));
  --history-text: var(--ranking-text, var(--home-text));
  --history-soft-text: var(--ranking-soft-text, var(--home-soft-text));
  --history-control: var(--ranking-control, var(--home-control));
  --history-control-border: var(--ranking-control-border, var(--home-control-border));
  --history-cta: var(--ranking-cta, var(--home-cta));
  --history-green: #99e550;
  --history-red: #e85a5f;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--history-text);
  background: var(--history-bg) !important;
}

.container-index:has(.match-history-page-shell) {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
}

.container-index:has(.match-history-page-shell) > .row {
  display: none;
}

.container-index:has(.match-history-page-shell) .match-history-page-shell.ranking-page-shell.home-shell {
  height: auto;
  min-height: calc(100dvh - clamp(2rem, 6dvh, 3.6rem));
  overflow: visible;
}

.container-index:has(.match-history-page-shell) .ranking-main.match-history-main {
  gap: 1rem;
  max-height: none;
  overflow: visible;
}

/* ranking.css sizes the sidebar card's row as 1fr so it stretches to fill the
   sidebar height. The match-history card (heading/title/copy/stats/nav) rarely
   has enough content to fill that on a tall viewport, so the stretch just
   spreads its rows apart. Size both rows to their content instead and let
   align-content push the footer to the bottom edge, so the card hugs its
   content while "Gérer les cookies" etc. still sit at the foot of the sidebar.
   (matchHistory.css loads before ranking.css, so this needs the extra
   .ranking-sidebar class to out-specificity ranking.css's own rule.) */
.ranking-sidebar.match-history-sidebar.home-panel {
  grid-template-rows: auto auto;
  align-content: space-between;
}

@media (max-width: 991px) {
  .ranking-sidebar.match-history-sidebar.home-panel {
    grid-template-rows: none;
    align-content: normal;
  }
}

.match-history-side-panel .ranking-season-status strong {
  color: var(--history-green);
  font-family: 'Numbers', monospace;
}

.match-history-days {
  display: grid;
  gap: 0.8rem;
  overflow: visible;
  padding-right: 0;
}

.match-day-group {
  overflow: hidden;
  border: 1px solid var(--history-border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--history-panel) 94%, #ffffff 6%), var(--history-panel));
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.25),
    0 18px 36px rgba(0, 0, 0, 0.14);
}

.match-day-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 4.4rem;
  padding: 0.75rem 0.9rem;
  color: var(--history-text);
  text-align: left;
  border: 0;
  background: transparent;
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
}

.match-day-toggle:hover {
  background: color-mix(in srgb, var(--history-control) 42%, transparent);
}

.match-day-chevron {
  --fa-display: inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #15151d !important;
  border-radius: 8px;
  background: var(--history-cta);
  box-shadow: 0 3px 0 var(--home-cta-dark, #c29c24);
  font-size: 1.05rem;
  line-height: 1;
}

.match-day-chevron.fa-solid {
  display: inline-flex;
}

.match-day-chevron::before {
  display: block;
  line-height: 1;
  transform: translateX(1px);
  transition: transform 160ms ease;
}

.match-day-group.is-open .match-day-chevron::before {
  transform: rotate(90deg) translateY(-1px);
}

.match-day-title {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.match-day-title strong {
  overflow: hidden;
  color: var(--history-text);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  text-transform: capitalize;
}

.match-day-title small {
  color: var(--history-muted);
  font-size: 1rem;
  line-height: 1;
}

.match-day-panel {
  display: none;
  padding: 0 0.75rem 0.8rem;
}

.match-day-group.is-open .match-day-panel {
  display: block;
}

.match-day-group.is-loading .match-day-toggle {
  opacity: 0.72;
  pointer-events: none;
}

.match-history-list {
  display: grid;
  gap: 0.85rem;
}

.match-card {
  display: grid;
  grid-template-columns: minmax(6.6rem, 0.62fr) minmax(0, 1.2fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 6.8rem;
  padding: 0.8rem 0.95rem;
  color: var(--history-text);
  border: 1px solid var(--history-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--history-panel) 94%, #ffffff 6%);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.12);
}

.match-card-result {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  align-content: center;
}

.match-card-result .fa-solid {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: #15151d !important;
  border-radius: 8px;
  background: var(--history-cta);
  box-shadow: 0 3px 0 var(--home-cta-dark, #c29c24);
  font-size: 1rem;
}

.match-card.is-victory .match-card-result .fa-solid {
  background: var(--history-green);
}

.match-card.is-defeat .match-card-result .fa-solid {
  color: white !important;
  background: var(--history-red);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--history-red) 52%, #000000 48%);
}

.match-card-result strong {
  color: var(--history-text);
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  line-height: 1;
  font-weight: 400;
}

.match-card-result small,
.match-player-copy span {
  color: var(--history-muted);
  font-size: 1.02rem;
  line-height: 1;
}

.match-card-player {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  min-height: 5.15rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.match-team {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.match-team-member {
  display: grid;
  grid-template-columns: 4.3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* Two stacked players need smaller avatars to keep the card height in check. */
.match-card.is-2v2 .match-team-member {
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.5rem;
}

.match-card.is-2v2 .match-team-member img.blobbyImg {
  width: 2.9rem;
  height: 2.9rem;
}

.match-card.is-2v2 .match-player-copy strong {
  font-size: 1.12rem;
}

.match-card.is-2v2 .match-player-copy span {
  font-size: 0.9rem;
}

.match-card-player.is-you {
  background: transparent;
  box-shadow: none;
}

.match-card-player.is-you .match-player-copy strong {
  color: var(--history-cta);
}

.match-card-player img.blobbyImg {
  display: block;
  width: 4.15rem;
  height: 4.15rem;
  margin: auto;
  object-fit: contain;
  transform: translateY(-16.666%);
  image-rendering: pixelated;
}

.match-player-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.match-player-copy strong {
  overflow: hidden;
  color: var(--history-text);
  font-size: 1.35rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.match-score {
  min-width: 2.55rem;
  color: var(--history-text);
  font-family: 'Numbers', monospace;
  font-size: 2.55rem;
  line-height: 1;
  text-align: center;
}

.match-score.score-win {
  color: var(--history-green);
}

.match-score.score-loss {
  color: var(--history-red);
}

.match-card-versus {
  display: grid;
  place-items: center;
  width: 1.8rem;
  color: var(--history-muted);
  font-family: 'Numbers', monospace;
  font-size: 2rem;
  line-height: 1;
}

.match-history-empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  min-height: 24rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  text-align: center;
  border: 1px solid var(--history-border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--history-panel) 92%, #ffffff 8%), var(--history-panel));
}

.match-history-empty > .fa-solid {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: #15151d !important;
  border-radius: 12px;
  background: var(--history-cta);
  box-shadow: 0 5px 0 var(--home-cta-dark, #c29c24);
  font-size: 1.5rem;
}

.match-history-empty h3 {
  margin: 0.35rem 0 0;
  color: var(--history-text);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 0.95;
  font-weight: 400;
}

.match-history-empty p {
  max-width: 28rem;
  margin: 0;
  color: var(--history-soft-text);
  font-size: 1.2rem;
  line-height: 1.12;
}

.match-history-empty a,
.match-history-empty button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.95rem;
  color: #15151d;
  text-decoration: none;
  border: 0;
  border-radius: 9px;
  background: var(--history-cta);
  box-shadow: 0 5px 0 var(--home-cta-dark, #c29c24);
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  font-size: 1.25rem;
}

.match-history-loading {
  display: none;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0 0.1rem;
  color: var(--history-muted);
  font-size: 1rem;
}

.match-history-loading.is-visible {
  display: flex;
}

.match-history-loading .fa-spinner {
  color: var(--history-cta) !important;
  animation: historySpin 0.8s linear infinite;
}

@keyframes historySpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1200px) {
  .match-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-card-result {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .match-card-versus {
    display: none;
  }
}

@media (max-width: 991px) {
  .match-history-days {
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .match-card {
    min-height: 0;
    padding: 0.7rem;
  }

  .match-card-result {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .match-card-result small {
    grid-column: 1 / -1;
  }

  .match-card-player {
    grid-template-columns: 3.85rem minmax(0, 1fr) auto;
    min-height: 4.7rem;
    padding: 0.35rem 0.5rem;
  }

  .match-card-player img.blobbyImg {
    width: 3.75rem;
    height: 3.75rem;
  }

  .match-player-copy strong {
    font-size: 1.18rem;
  }

  .match-score {
    min-width: 2rem;
    font-size: 2rem;
  }
}