/* LOOK Sports Card — live layer (Round G).
   Mounts INSIDE the existing 128×140 services card (ServicesRow.tsx); the
   stage box (72px) is reserved by the React side, so this layer only paints
   content — it never changes the card/rail geometry (zero layout shift).

   Palette: app design tokens ONLY (hsl(var(--…)) from frontend-kimi/src/
   index.css), plus the fixed soft red hsl(0 84% 60%) already approved for
   both themes by the group-call layer. NO purple. RTL mirrors automatically
   through logical properties + flex direction. */

.slc-root {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Round H: tightened so crest+name | score | crest+name fits the 72px
     stage exactly (12 + 32 team row + 2 + 11 sub + 2 + 11 chip + 2 = 72). */
  padding: 12px 6px 2px;
  background: hsl(var(--card));
  overflow: hidden;
}

/* LIVE badge — top-start corner, pulses only while a live match is shown. */
.slc-badge {
  position: absolute;
  top: 5px;
  inset-inline-start: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: hsl(var(--success));
  color: hsl(var(--primary-foreground));
  font-size: 8px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
}
.slc-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--primary-foreground));
  animation: slc-pulse 2s ease-in-out infinite;
}
@keyframes slc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* H2: stale payload — honest "old data" badge: dimmed, never pulses. */
.slc-badge-stale {
  background: hsl(var(--muted-foreground, 215 16% 47%) / 0.85);
}
.slc-badge-stale .slc-badge-dot {
  animation: none;
  opacity: 0.6;
}

/* Match dots — top-end corner, only when >1 match. */
.slc-dots {
  position: absolute;
  top: 8px;
  inset-inline-end: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.slc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground));
  /* G8: 0.4 read as dirt specks on the light card; 0.55 stays clearly
     secondary to the active dot while remaining legible. */
  opacity: 0.55;
}
.slc-dot-on {
  background: hsl(var(--primary));
  opacity: 1;
}

/* Match body — [home crest+name] | score | [away crest+name], centered in
   the reserved stage. DOM order is identical in both directions; flex + the
   root's dir attribute mirrors the whole row in RTL, so each team's number
   always lands beside its OWN crest, never the opponent's. */
.slc-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.slc-swap {
  animation: slc-fadein 0.35s ease-out;
}
@keyframes slc-fadein {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.slc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* Team block: crest over name, grouped so mirroring moves them together. */
.slc-team {
  flex: none;
  width: 36px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.slc-name {
  max-width: 100%;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slc-crest {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary-light));
  border: 1px solid hsl(var(--border));
  overflow: hidden;
}
.slc-crest-mono {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: hsl(var(--primary-dark));
}
.slc-crest-img {
  position: absolute;
  inset: 2px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  background: transparent;
}
.slc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.slc-score {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slc-score-sep {
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}
/* Leader soft green / loser soft red / draw neutral — tokens + the fixed
   soft red the group-call layer already ships in both themes. */
.slc-lead { color: hsl(var(--success)); }
.slc-trail { color: hsl(0 84% 60%); }
.slc-even { color: hsl(var(--foreground)); }
.slc-vs {
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
}
.slc-sub {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

/* Tiny status chip. */
.slc-chip {
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.slc-chip-live {
  background: hsl(var(--success) / 0.14);
  color: hsl(var(--success));
}
.slc-chip-scheduled {
  /* G8: "upcoming" is actionable and now reads differently from "finished"
     (both were identical muted grey). Same token pair + dark override the
     group-call layer already ships for its pending chip. */
  background: hsl(var(--primary-light));
  color: hsl(var(--primary-dark));
}
.dark .slc-chip-scheduled { color: #50b5ff; }
.slc-chip-finished {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* prefers-reduced-motion: static first match — no rotation (JS side), no
   pulse, no swap animation (CSS side). .slc-reduced is the scripted twin
   for environments where the media query cannot be evaluated. */
@media (prefers-reduced-motion: reduce) {
  .slc-root .slc-badge-dot { animation: none; }
  .slc-root .slc-swap { animation: none; }
}
.slc-reduced .slc-badge-dot { animation: none; }
.slc-reduced .slc-swap { animation: none; }