.recent-matches {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(20, 11, 13, .75);
}
.recent-matches__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recent-matches__list > li { min-width: 0; }
.recent-matches__list[hidden], .recent-matches__status[hidden] { display: none; }
.recent-matches__match {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 6px var(--panel-gutter);
  border-top: 1px solid rgba(221, 177, 107, .3);
  border-bottom: 0;
  background: rgba(13, 10, 13, .53);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
  touch-action: manipulation;
}
.recent-matches__match:hover,
.recent-matches__match:focus-visible {
  border-color: var(--gold-hi);
  background: rgba(95, 56, 37, .32);
}
.recent-matches__match:focus-visible,
.recent-matches__all:focus-visible,
.recent-matches__retry:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}
.recent-matches__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.recent-matches__team-block {
  display: block;
  min-width: 0;
}
.recent-matches__avatars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 1px; width: 100%; min-height: 13px; }
.recent-matches__team-block--dire .recent-matches__avatars {
  justify-items: end;
}
.recent-matches__avatar {
  display: block;
  width: 100%;
  max-width: 18px;
  aspect-ratio: 1;
  height: auto;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #392526;
  object-fit: cover;
}
.recent-matches__team-block.is-winner .recent-matches__avatar {
  border-color: #ffe1a0;
  box-shadow: 0 0 7px 1px rgba(255, 195, 87, .85);
  filter: brightness(1.12);
}
.recent-matches__score.is-winner { color: var(--gold-hi); }
.recent-matches__scoreboard { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.recent-matches__scoreboard time { color: var(--muted); font: 600 .6rem/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recent-matches__scoreline { display: flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.recent-matches__score {
  color: var(--ink);
  font: 800 1rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.recent-matches__versus { color: var(--muted); font: 700 .8rem/1 var(--font-display); }
.recent-matches__pending { color: #f8dca5; font: 700 .55rem/1.15 var(--font-ui); white-space: nowrap; }
.recent-matches__status {
  margin: 0;
  padding: 9px;
  border: 1px solid rgba(221, 177, 107, .3);
  background: rgba(13, 10, 13, .53);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}
.recent-matches__retry {
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  background: #2b1b1a;
  color: var(--gold-hi);
  font: 800 .82rem var(--font-display);
  cursor: pointer;
}
.recent-matches__retry:hover { background: #4b2b24; }
.recent-matches__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  padding: 7px 10px;
  border: 1px solid var(--gold);
  border-inline: 0;
  border-bottom: 0;
  background: rgba(80, 43, 28, .35);
  color: var(--ink);
  font: 800 .82rem/1.1 var(--font-display);
  letter-spacing: .025em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .18s ease, background-color .18s ease;
  touch-action: manipulation;
}
.recent-matches__all:hover,
.recent-matches__all:focus-visible {
  border-color: var(--gold-hi);
  background: rgba(120, 71, 37, .48);
}
.recent-matches__all span { font-size: 1rem; line-height: 1; }
.match-preview { width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid var(--gold); background: #130f11; color: var(--ink); box-shadow: 0 24px 80px #000; }
.match-preview::backdrop { background: rgba(6, 3, 4, .83); backdrop-filter: blur(5px); }
.match-preview__panel { position: relative; }
.match-preview__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; background: #211517; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.match-preview__hero { min-height: 235px; padding: 30px 32px 25px; background: linear-gradient(90deg, rgba(19,12,14,.94), rgba(19,12,14,.66)), url('./assets/pride-ancient-tapestry.webp') center/cover; text-align: center; }
.match-preview__eyebrow { margin: 0; color: var(--gold-hi); font: 800 .7rem var(--font-display); letter-spacing: .12em; }
.match-preview__title { margin: 5px 0 0; color: var(--ink); font: 800 1.55rem var(--font-display); }
.match-preview__date { margin: 3px 0 16px; color: var(--gold-hi); font: 700 .85rem var(--font-display); }
.match-preview__pending { display: inline-block; margin: 14px 0 0; padding: 5px 9px; border: 1px solid rgba(217,173,104,.65); border-radius: 3px; background: rgba(35,23,17,.9); color: #f8dca5; font: 700 .78rem/1.2 var(--font-ui); }
.match-preview__pending[hidden] { display: none; }
.match-preview__result { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; }
.match-preview__team { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid rgba(217,173,104,.3); background: rgba(8,10,9,.42); text-align: left; }
.match-preview__team--dire { text-align: right; }
.match-preview__team.is-winner { border-color: rgba(255,213,123,.65); box-shadow: 0 0 22px #e5aa552a, inset 0 0 20px #e5aa5517; }
.match-preview__team small { color: var(--gold); font: 800 .7rem var(--font-display); letter-spacing: .12em; }
.match-preview__team strong { overflow-wrap: anywhere; color: var(--ink); font: 800 clamp(1rem,2.5vw,1.45rem)/1.1 var(--font-display); }
.match-preview__team.is-winner strong { color: #ffe4a5; text-shadow: 0 0 11px #ffc25a; }
.match-preview__scores { display: flex; align-items: center; gap: 13px; color: var(--ink); font: 800 clamp(1.8rem,4vw,3rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.match-preview__scores span { color: var(--muted); font-size: .55em; }
.match-preview__roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.match-preview__roster-team { min-width: 0; background: #1b1315; }
.match-preview__roster-team h3 { margin: 0; padding: 12px 14px; color: var(--gold-hi); font: 800 .95rem var(--font-display); }
.match-preview__player { display: grid; grid-template-columns: 46px 27px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 52px; padding: 4px 12px; border-top: 1px solid rgba(217,173,104,.22); }
.match-preview__hero-image { width: 46px; height: 31px; object-fit: cover; }
.match-preview__avatar { width: 27px; height: 27px; border: 1px solid var(--gold); border-radius: 50%; object-fit: cover; }
.match-preview__identity { display: grid; min-width: 0; gap: 1px; }
.match-preview__identity strong { overflow: hidden; color: var(--ink); font: 800 .8rem var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.match-preview__identity span { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.match-preview__kda { color: var(--gold-hi); font: 800 .78rem var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-preview__loading { grid-column: 1/-1; margin: 0; padding: 24px; background: #1b1315; color: var(--muted); text-align: center; }
.match-preview__go { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px; border-top: 1px solid var(--gold); background: rgba(80,43,28,.5); color: var(--ink); font: 800 .9rem var(--font-display); text-decoration: none; text-transform: uppercase; }
.match-preview__go:hover, .match-preview__go:focus-visible { background: rgba(120,71,37,.55); color: var(--gold-hi); }
.match-preview__close:focus-visible, .match-preview__go:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -3px; }
@media (max-width: 650px) {
  .match-preview__hero { min-height: 0; padding: 22px 12px 16px; }
  .match-preview__title { font-size: 1.2rem; }
  .match-preview__result { gap: 4px; }
  .match-preview__team { min-height: 66px; padding: 7px; }
  .match-preview__team strong { font-size: .88rem; }
  .match-preview__scores { gap: 5px; font-size: 1.45rem; }
  .match-preview__roster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .recent-matches__match, .recent-matches__all { transition: none; }
}