.match-momentum-card {
  margin-top: 12px;
}

.match-momentum-chart {
  min-width: 0;
  overflow-x: auto;
  padding: 0 22px 18px;
}

.match-momentum-surface {
  position: relative;
  min-width: 620px;
}

.match-momentum-tooltip-space {
  position: relative;
  height: 82px;
}

.match-momentum-chart svg {
  display: block;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
}

.match-momentum-chart text {
  fill: var(--muted);
  font-size: 12px;
}

.match-momentum-zero {
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.match-momentum-time-grid line {
  stroke: var(--brand-dfe7e2, #dfe7e2);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.match-momentum-time-grid text {
  fill: #8a9690;
  font-size: 10px;
}

.match-momentum-line {
  fill: none;
  stroke: var(--green-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.match-momentum-shot-lane line {
  stroke: var(--brand-d8e2dc, #d8e2dc);
  stroke-width: 2;
}

.match-momentum-shot-marker {
  stroke: #fff;
  stroke-width: 1;
}

.match-momentum-shot-marker--saved { fill: #70a7d4; }
.match-momentum-shot-marker--off-target { fill: #d3a44c; }
.match-momentum-shot-marker--unknown { fill: #97a39d; }
.match-momentum-event--active .match-momentum-shot-marker,
.match-momentum-event:focus-visible .match-momentum-shot-marker { stroke: var(--green-950); stroke-width: 2; }

.match-momentum-technical-marker { fill: none; stroke: #8a63ad; stroke-linecap: round; stroke-width: 2.5; }
.match-momentum-event--active .match-momentum-technical-marker,
.match-momentum-event:focus-visible .match-momentum-technical-marker { stroke: #60427d; stroke-width: 3.5; }

.match-momentum-point { stroke: #fff; stroke-width: 1.75; }
.match-momentum-point--for { fill: var(--green-700); }
.match-momentum-point--against { fill: #c85555; }
.match-momentum-event { outline: none; cursor: crosshair; }
.match-momentum-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.match-momentum-event--active .match-momentum-hit,
.match-momentum-event:focus-visible .match-momentum-hit { stroke: rgba(7, 95, 60, 0.28); stroke-width: 5; }
.match-momentum-event--active .match-momentum-point { stroke-width: 3; }
.match-momentum-suspension line { stroke-width: 1.5; stroke-dasharray: 3 2; }
.match-momentum-suspension rect { stroke-width: 1.5; }
.match-momentum-suspension text { fill: #fff; font-size: 8px; font-weight: 950; }
.match-momentum-suspension--own line,
.match-momentum-suspension--own rect { stroke: #b56b12; }
.match-momentum-suspension--own rect { fill: #d98a2b; }
.match-momentum-suspension--opponent line,
.match-momentum-suspension--opponent rect { stroke: var(--green-800); }
.match-momentum-suspension--opponent rect { fill: var(--green-700); }

.match-momentum-tooltip {
  position: absolute;
  bottom: 6px;
  z-index: 3;
  width: min(280px, calc(100% - 16px));
  padding: 9px 11px;
  border: 1px solid var(--brand-a8cfb9, #a8cfb9);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 22px rgba(5, 58, 42, 0.14);
  pointer-events: none;
}

.match-momentum-tooltip[hidden] { display: none; }
.match-momentum-tooltip strong,
.match-momentum-tooltip span,
.match-momentum-tooltip small { display: block; }
.match-momentum-tooltip strong { color: var(--green-900); font-size: 0.76rem; }
.match-momentum-tooltip span { margin-top: 2px; font-size: 0.75rem; font-weight: 900; }
.match-momentum-tooltip small { margin-top: 2px; color: var(--muted); font-size: 0.66rem; }

.match-momentum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 6px 0 0;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.match-momentum-legend span { display: inline-flex; align-items: center; gap: 6px; }
.match-momentum-legend span::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-700);
}
.match-momentum-legend-label::before { display: none; }
.match-momentum-legend-label { margin-left: 5px; color: var(--green-900); }
.match-momentum-legend-shot-saved::before { background: #70a7d4 !important; border-radius: 3px !important; }
.match-momentum-legend-shot-off-target::before { background: #d3a44c !important; border-radius: 3px !important; }
.match-momentum-legend-technical::before { background: #8a63ad !important; border-radius: 2px !important; transform: rotate(45deg); }
.match-momentum-legend-goal-against::before { background: #c85555 !important; }
.match-momentum-legend-suspension-own::before,
.match-momentum-legend-suspension-opponent::before { border-radius: 3px !important; }
.match-momentum-legend-suspension-own::before { background: #d98a2b !important; }
.match-momentum-legend-suspension-opponent::before { background: var(--green-700) !important; }

@media (max-width: 720px) {
  .match-momentum-chart {
    overflow-x: hidden;
    padding-left: 14px;
    padding-right: 14px;
  }

  .match-momentum-surface {
    min-width: 100%;
  }
}