/* Match Centre Page Styles: Commentary feed, scorecards, wagon wheel, analytics */
.scorecards-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.innings-scorecard-card {
  background-color: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}
.scorecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-700);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
  gap: var(--space-12);
}
.scorecard-title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.scorecard-title .title-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper-50);
}
.scorecard-total {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--paper-50);
}
.scorecard-total small {
  font-family: var(--font-stats);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper-500);
}
.not-out-tag {
  color: var(--ok);
  font-weight: 700;
}
.big-r {
  font-weight: 800;
  color: var(--paper-50);
}
.big-w {
  font-weight: 800;
  color: var(--crimson-400);
}
.scorecard-footer-info {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--ink-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: 13px;
  color: var(--paper-300);
}
.wagon-wheel-card, .chart-container-card {
  background-color: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}
.wagon-wheel-header, .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
  gap: var(--space-12);
}
.card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--paper-50);
}
.wheel-player-select {
  background-color: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--paper-50);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.wagon-wheel-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.wagon-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}
.anim-shot-line {
  stroke-dashoffset: 200;
  animation: drawShotLine 0.7s ease-out forwards;
}
.wheel-legend {
  display: flex;
  gap: var(--space-16);
  font-size: 12px;
  color: var(--paper-300);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot-sample {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-six { background-color: var(--ev-six); }
.dot-four { background-color: var(--ev-four); }
.dot-runs { background-color: #FFFFFF; }
.dot-wkt { background-color: var(--ev-wicket); }
.wheel-tooltip, .chart-tooltip-bar {
  font-size: 13px;
  color: var(--paper-500);
  text-align: center;
  min-height: 20px;
}
.charts-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-24);
}
.chart-svg-box {
  width: 100%;
  overflow-x: auto;
}
.custom-chart-svg {
  width: 100%;
  height: auto;
  min-height: 200px;
}
.chart-draw-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawChartPath 1.2s ease-out forwards;
}
.chart-legend {
  display: flex;
  gap: var(--space-12);
}
.legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--paper-300);
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: var(--c);
}
@media (max-width: 600px) {
.charts-view-grid {
    grid-template-columns: 1fr;
  }
}
@keyframes drawShotLine {
  to { stroke-dashoffset: 0; }
}
@keyframes drawChartPath {
  to { stroke-dashoffset: 0; }
}