.match-card {
    margin: 0 auto;
    background: #282832;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}
/* =========================
   PITCH BASE
========================= */
.pitch {
	width: 100%;
	aspect-ratio: 540 / 220;
	background: url("soccer_pitch_livekoora.svg") no-repeat center;
	background-size: cover;
	position: relative;
	color: #fff;
}
/* =========================
   LEAGUE (TOP CENTER)
========================= */
.pitch-league {
	width: 100%;
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	color: #FF3743;
	pointer-events: none;
	padding: 15px 5px;
}
/* =========================
   BOTTOM INFO (NO BG)
========================= */
.pitch-info {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 14px;
	padding: 0 0 15px;
}
/* TEAM BLOCK */
.team-block {
  width: 40%;
  display: flex;
  flex-direction: column;   /* 🔥 STACK ITEMS */
}

/* TOP ROW (LOGO + NAME) */
.team-block .team-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* LEFT TEAM */
.team-block.left {
  align-items: flex-start;
}

/* RIGHT TEAM */
.team-block.right {
  align-items: flex-end;
  text-align: right;
}

/* NAME */
.team-block .team-name {
  font-size: 13px;
  font-weight: 600;
}

/* LOGO */
.team-block img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
}

/* STATS UNDER */
.team-stats {
  font-size: 12px;
  color: #cbd5f5;
  margin-top: 3px;
}
.team-stats img {
  width: 14px;
  height: 14px;
  margin: 0 3px;
  vertical-align: middle;
}

/* TEAM STATS */
#homeStats, #awayStats {
	font-size: 12px;
	color: #d1d5db;
}
/* CENTER SCORE */
.center-info {
	text-align: center;
}
#score {
	font-size: 20px;
	font-weight: bold;
}
#time {
	font-size: 13px;
	color: #d1d5db;
}
/* =========================
   BALL
========================= */
#ball {
	width: 4%;
	max-width: 22px;
	min-width: 14px;
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 10;
	z-index: 5;
	transition: left 1.2s ease, top 1.2s ease !important;
}
/* =========================
   POPUP (CENTER)
========================= */
#eventPopup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.6);
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 14px;
	opacity: 0;
	display: none;
	transition: opacity 0.3s ease;
	z-index: 20;
}
#eventPopup.show {
	display: block;
	opacity: 1;
}
/* =========================
   TIMELINE
========================= */
#timeline {
	margin: 20px auto;
	border-radius: 10px;
	border: 1px solid #333;
	overflow: hidden;
}
/* ROW */
.timeline-row {
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: center;
	padding: 10px;
	font-size: 14px;
}

/* STRIPES */
.timeline-row:nth-child(odd) {
 background: #020617;
}
.timeline-row:nth-child(even) {
 background: #282832;
}
/* ALIGN */
.timeline-left {
	text-align: left;
}
.timeline-right {
	text-align: right;
}
.timeline-time {
	text-align: center;
	font-size: 12px;
	color: #9ca3af;
}
/* PLAYER */
.player {
	font-weight: 600;
}
/* ASSIST */
.assist {
	font-size: 12px;
	color: #9ca3af;
}
.event-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}
/* =========================
   SCROLLBAR (OPTIONAL NICE)
========================= */
#timeline::-webkit-scrollbar {
 width: 6px;
}
 #timeline::-webkit-scrollbar-thumb {
 background: #334155;
 border-radius: 6px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 600px) {
.pitch-info {
	padding: 5px 0 10px;
}
 .pitch-top {
 font-size: 12px;
 padding: 6px;
}
 .league-inside {
 font-size: 12px;
}
 .team img {
 width: 16px;
}
 #score {
 font-size: 18px;
}
 #time {
 font-size: 12px;
}
 .timeline-row {
 grid-template-columns: 1fr 40px 1fr;
 font-size: 12px;
 padding: 8px;
}
}