.prematch-movement-card {
  display: grid;
  gap: 14px;
  margin: 0 18px 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
  border-radius: 12px;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--green) 8%, transparent),
      color-mix(in srgb, var(--green) 2%, transparent)
    ),
    var(--panel);
}

.prematch-movement-card[hidden] {
  display: none;
}

.prematch-movement-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
}

.prematch-movement-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.prematch-movement-head strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.prematch-movement-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--soft);
  cursor: pointer;
}

.prematch-movement-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.prematch-movement-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prematch-movement-summary div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
}

.prematch-movement-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.prematch-movement-summary strong {
  font-size: 13px;
}

.prematch-movement-summary b,
.prematch-movement-row b {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 7px;
  background: var(--panel);
  font-size: 12px;
}

.prematch-movement-card .positive {
  color: var(--green);
}

.prematch-movement-card .negative {
  color: var(--red);
}

.prematch-movement-chart {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.prematch-movement-chart svg {
  width: 100%;
  height: 84px;
}

.prematch-movement-chart polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.prematch-movement-chart .home {
  stroke: #4266ff;
  color: #4266ff;
}

.prematch-movement-chart .draw {
  stroke: #9aa3b2;
  color: #9aa3b2;
}

.prematch-movement-chart .away {
  stroke: #ff4057;
  color: #ff4057;
}

.prematch-movement-chart div {
  display: flex;
  gap: 12px;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.prematch-movement-table {
  display: grid;
  gap: 6px;
}

.prematch-movement-head-row,
.prematch-movement-row {
  display: grid;
  grid-template-columns: 94px repeat(6, minmax(38px, 1fr));
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.prematch-movement-head-row {
  color: var(--muted);
  font-weight: 800;
}