/* Match Centre: score header, tabs, live tab (actors, overs, ball-by-ball). */

.mc { padding-top: clamp(24px, 4vw, 48px); padding-bottom: var(--section); }
.mc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.mc-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-size: var(--fs-sm); }
.mc-head__actions { display: flex; gap: var(--s-3); }

/* ---- Score header ---- */
.mc-score {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-6);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--team) 16%, transparent), transparent 70%),
    var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.mc-score::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--team), transparent);
}
.mc-team { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.mc-team--right { flex-direction: row-reverse; text-align: right; }
.mc-team__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-team__name { font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 22px); text-transform: uppercase; letter-spacing: var(--track-display); line-height: 1.2; }
.mc-team__name:hover { color: var(--team); }
.mc-team__score { font-size: 22px; color: var(--text-2); }
.mc-team__score small { font-size: 15px; color: var(--text-3); }
.mc-team__bat { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--team); }
.mc-team .crest { transition: filter var(--t); filter: grayscale(.5) brightness(.75); }
.mc-team.is-batting .crest, .mc-score:not(:has(.is-batting)) .crest { filter: none; }

.mc-score__center { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.mc-score__status { display: flex; gap: var(--s-2); }
.mc-score__big { font-size: clamp(72px, 9vw, 128px); line-height: .95; font-weight: 700; letter-spacing: -.01em; }
.mc-score__slash { color: var(--team); margin-inline: .04em; font-weight: 500; }
.mc-score__rate { color: var(--text-2); font-size: 15px; }
.mc-score__rate .num { color: var(--text); font-size: 18px; }
.mc-chase { margin-top: var(--s-2); padding: 8px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); color: var(--text-2); font-size: 15px; }
.mc-chase b { color: var(--text); font-size: 18px; }
.mc-chase--result { color: var(--accent); font-weight: 700; }

@media (max-width: 760px) {
  .mc-score { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .mc-score__center { grid-column: 1 / -1; grid-row: 1; }
  .mc-team { flex-direction: column; align-items: center; text-align: center; }
  .mc-team--right { flex-direction: column; text-align: center; }
  .mc-team .crest { width: 52px !important; height: 52px !important; }
}

/* ---- Tabs ---- */
.mc-tabs {
  display: flex; gap: var(--s-1); margin-block: var(--s-6) var(--s-6); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
  position: relative; flex: none; min-height: 48px; padding: 0 18px; border: 0; background: none;
  color: var(--text-3); font-weight: 600; font-size: 15px; transition: color var(--t-fast);
}
.mc-tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform 350ms var(--ease-out);
}
.mc-tab:hover { color: var(--text); }
.mc-tab.active { color: var(--text); }
.mc-tab.active::after { transform: scaleX(1); }

/* ---- Live tab ---- */
.mc-live { display: flex; flex-direction: column; gap: var(--s-7); }
.mc-actors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.mc-actor {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s-5);
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card);
}
.mc-actor.is-striker { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(160deg, rgba(var(--accent-rgb), .1), transparent 60%), var(--card); }
.mc-actor__role { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.mc-actor.is-striker .mc-actor__role { color: var(--accent); }
.mc-actor__name { font-size: 19px; font-weight: 700; line-height: 1.25; }
.mc-actor__stat { color: var(--text-2); font-size: 15px; }
.mc-actor__stat b { color: var(--text); font-size: 20px; }
@media (max-width: 900px) { .mc-actors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mc-overs { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mc-over {
  flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card);
}
.mc-over__label { font-size: var(--fs-sm); color: var(--text-3); }
.mc-over__label b { color: var(--text); margin-left: 6px; font-size: 16px; }
.mc-over__balls { display: flex; gap: 6px; }

/* Ball chips (also used by the scorecard) */
.ball-chip {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%;
  font-family: var(--font-num); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06); color: var(--text-2); border: 1px solid transparent;
}
.ball-chip.chip-four { background: rgba(63, 169, 255, .16); color: var(--ev-four); border-color: rgba(63, 169, 255, .4); }
.ball-chip.chip-six { background: rgba(255, 193, 90, .16); color: var(--ev-six); border-color: rgba(255, 193, 90, .45); }
.ball-chip.chip-wicket { background: var(--ev-wicket); color: #fff; }
.ball-chip.chip-extra { background: transparent; color: #FFC53D; border-color: rgba(255, 197, 61, .5); border-radius: 8px; }
.ball-chip.chip-dot { color: var(--text-3); }
.ball-chip.chip-run { color: var(--text); background: rgba(255,255,255,.1); }

.mc-feed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: calc(var(--s-5) * -1); }
.mc-feed { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mc-ball {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--s-5); align-items: start;
  padding: var(--s-5) var(--s-2); border-bottom: 1px solid var(--line);
  position: relative;
}
.mc-ball::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: transparent; }
.mc-ball.is-four::before { background: var(--ev-four); }
.mc-ball.is-six::before { background: var(--ev-six); }
.mc-ball.is-wicket::before { background: var(--ev-wicket); }
.mc-ball.is-wicket { background: linear-gradient(90deg, rgba(224, 35, 78, .07), transparent 60%); }
.mc-ball__idx { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.mc-ball__idx .num { font-size: 17px; min-width: 28px; }
.mc-ball__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-ball__head { font-size: 16px; line-height: 1.4; color: var(--text-2); }
.mc-ball__head strong { color: var(--text); font-weight: 700; }
.mc-ball__shot { margin-left: 10px; font-size: var(--fs-sm); color: var(--text-3); }
.mc-ball__text { color: var(--text-2); line-height: 1.6; max-width: 72ch; }
.mc-feed .empty { margin-top: var(--s-5); }
@media (max-width: 600px) {
  .mc-ball { grid-template-columns: 1fr; gap: var(--s-2); }
  .mc-ball::before { left: -8px; }
}