/* ============================================================
   05 - RECENT GAMES
   Compact 4v4 match cards. Winning squad = green (--safe) accent
   + trophy; losing squad dimmed. VS divider between teams; teams
   stack on mobile. Frost/ice tokens only. Prefix: .rg-
   ============================================================ */

.rg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* head CTA */
.rg-head-cta { margin-top: 24px; }

/* live pulse dot in the eyebrow */
.rg-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--safe);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(87,217,163,.55);
  animation: rgPing 2.2s var(--e-in-out) infinite;
}
@keyframes rgPing {
  0%   { box-shadow: 0 0 0 0 rgba(87,217,163,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(87,217,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(87,217,163,0); }
}

/* ============================================================
   Match list
   ============================================================ */
.rg-list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 18px);
  max-width: 880px;
  margin: 0 auto;
}
.rg-match { padding: clamp(16px, 2.1vw, 22px); }

/* top row: map + meta */
.rg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.rg-map {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: clamp(15px, 1.9vw, 18px);
  letter-spacing: -.01em;
  color: var(--text);
}
.rg-map svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

.rg-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.rg-mode {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.rg-mode svg { width: 14px; height: 14px; }
.rg-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
}
.rg-time svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* teams grid: team | VS | team */
.rg-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 16px);
}

.rg-team {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 13px 14px;
  transition: border-color var(--t), background var(--t);
}
.rg-win {
  border-color: rgba(87,217,163,.38);
  background: rgba(87,217,163,.07);
}
.rg-lose { opacity: .66; }
.rg-match:hover .rg-win { border-color: rgba(87,217,163,.55); }

.rg-team-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 11px;
}
.rg-team-head svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rg-win .rg-team-head { color: var(--safe); }

.rg-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  list-style: none;
}
.rg-player {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.rg-player svg { width: 13px; height: 13px; color: var(--text-faint); flex: 0 0 auto; }
.rg-player span { min-width: 0; overflow-wrap: anywhere; }
.rg-win .rg-player { color: var(--text); }
.rg-win .rg-player svg { color: rgba(87,217,163,.85); }

/* VS divider */
.rg-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-price);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* ============================================================
   Responsive: stack the two teams, center the VS badge
   ============================================================ */
@media (max-width: 640px) {
  .rg-teams { grid-template-columns: 1fr; }
  .rg-vs {
    justify-self: center;
    width: 38px; height: 38px;
    margin: 3px 0;
  }
}
@media (max-width: 380px) {
  .rg-players { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rg-live { animation: none; }
}

/* player heads */
.rg-head { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }