/* ======================================================== */
/* VIEW 5: Live Matchday View                               */
/* ======================================================== */
.live-hero-card,
.live-view {
  width: 100%;
  height: 100%;
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 4px clamp(10px, 1.8vw, 16px) clamp(6px, 1.2vh, 10px) clamp(10px, 1.8vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(4px, 1vh, 10px);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.live-scoreboard-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  padding: clamp(4px, 1vh, 8px) 0;
  flex-shrink: 0;
  width: 100%;
}

.live-team {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  cursor: pointer;
  min-width: 0;
}

.live-team.live-away {
  justify-content: flex-end;
}

.live-crest {
  width: clamp(48px, 11vh, 80px);
  height: clamp(48px, 11vh, 80px);
  object-fit: contain;
  flex-shrink: 0;
}

.live-team-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.live-team-meta.text-right {
  text-align: right;
}

.live-name {
  font-size: calc(var(--text-scale, 1) * clamp(0.95rem, 2.6vh, 1.3rem));
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-side-sub {
  font-size: calc(var(--text-scale, 1) * max(0.75rem, clamp(0.65rem, 1.6vh, 0.74rem)));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.live-score {
  font-size: calc(var(--text-scale, 1) * clamp(2.4rem, 7.5vh, 4.2rem));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  padding: 0 6px;
  flex-shrink: 0;
}

.live-clock-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  contain: layout;
}

.live-pulsing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
  font-size: calc(var(--text-scale, 1) * max(0.75rem, clamp(0.68rem, 1.7vh, 0.78rem)));
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 999px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
}

.live-clock {
  font-size: calc(var(--text-scale, 1) * clamp(1.6rem, 4.8vh, 2.6rem));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  contain: layout;
}

.live-events-feed {
  max-height: clamp(34px, 6vh, 52px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: clamp(4px, 0.8vh, 8px);
  overflow-y: auto;
  flex-shrink: 0;
}

.events-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: calc(var(--text-scale, 1) * clamp(0.76rem, 1.9vh, 0.88rem));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  border-radius: 6px;
}

.event-min {
  font-weight: 800;
  color: var(--gold-accent);
  flex-shrink: 0;
  font-size: calc(var(--text-scale, 1) * 0.78rem);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.event-min.badge-red {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.event-min.badge-yellow {
  color: #eab308;
  background: rgba(234, 179, 8, 0.18);
}

.event-min.badge-goal {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.18);
}

.event-min.badge-sub {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.18);
}

.event-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.event-headline {
  font-weight: 800;
  color: #ffffff;
  font-size: calc(var(--text-scale, 1) * 0.82rem);
  line-height: 1.25;
}

.event-sub {
  font-size: calc(var(--text-scale, 1) * max(0.75rem, 0.74rem));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}

.event-empty {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  padding: 6px 10px;
}

.live-stats-container {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: clamp(8px, 1.5vh, 14px) clamp(12px, 2vw, 18px);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.live-stats-container::-webkit-scrollbar {
  width: 4px;
}

.live-stats-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* ======================================================== */
/* L & XL Live Right Companion: Match Incidents Feed        */
/* ======================================================== */
.live-incidents-companion {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.live-incidents-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  padding: 6px 4px;
}

.live-incidents-stream::-webkit-scrollbar {
  width: 4px;
}

.live-incidents-stream::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.incident-stream-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
}

.incident-stream-card.incident-card-goal {
  border-left: 4px solid #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.incident-stream-card.incident-card-red {
  border-left: 4px solid #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

.incident-stream-card.incident-card-yellow {
  border-left: 4px solid #eab308;
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.3);
}

.incident-stream-card.incident-card-sub {
  border-left: 4px solid #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

.incident-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--text-scale, 1) * 0.88rem);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}

.incident-badge-pill.badge-goal {
  background: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

.incident-badge-pill.badge-red {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.incident-badge-pill.badge-yellow {
  background: rgba(234, 179, 8, 0.25);
  color: #eab308;
}

.incident-badge-pill.badge-sub {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.incident-badge-pill.badge-var,
.incident-badge-pill.badge-alert,
.incident-badge-pill.badge-general {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.incident-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.incident-card-headline {
  font-size: calc(var(--text-scale, 1) * 1.02rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.incident-card-sub {
  font-size: calc(var(--text-scale, 1) * 0.88rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

/* ======================================================== */
/* XL Live Left Companion: Detailed Match Statistics        */
/* ======================================================== */
.live-stats-companion {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.companion-live-stats-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  padding: 6px 4px;
}

.companion-live-stats-body::-webkit-scrollbar {
  width: 4px;
}

.companion-live-stats-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.companion-possession-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
}

.companion-possession-block .possession-labels {
  font-size: calc(var(--text-scale, 1) * 1.05rem);
  font-weight: 800;
}

.companion-possession-block .possession-bar-track {
  height: 10px;
}

.companion-stats-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.companion-stat-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px 14px;
}

.companion-stat-val {
  font-size: calc(var(--text-scale, 1) * 1.35rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.companion-stat-val.val-home {
  text-align: left;
}

.companion-stat-val.val-away {
  text-align: right;
}

.companion-stat-lbl {
  font-size: calc(var(--text-scale, 1) * 0.88rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}