.score-settings {
  display: grid;
  grid-template-columns: 1fr .8fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.team-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.team-panel label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--type-help);
  font-weight: 700;
}

.team-panel input[type="color"] {
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c1417;
}

.team-panel strong {
  font: 800 var(--type-score)/1 var(--font-mono);
  letter-spacing: -.08em;
}

.right-team { text-align: right; }

.target-panel {
  display: grid;
  align-content: center;
  gap: 7px;
  text-align: center;
}

.target-panel label {
  font-size: var(--type-help);
  font-weight: 700;
}

.target-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-help);
}

.score-number {
  width: 82px;
  height: 44px;
  margin: auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0c1417;
  text-align: center;
}

.score-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0 16px;
}

.score-heading h2 {
  margin: 7px 0 0;
  font-size: var(--type-subsection-title);
}

.score-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.reset-score { color: var(--muted); }

.score-board {
  background:
    radial-gradient(circle at 24% 50%, rgba(52, 211, 153, .09), transparent 30%),
    radial-gradient(circle at 76% 50%, rgba(96, 165, 250, .09), transparent 30%),
    linear-gradient(145deg, #263237, #131a22 55%, #1d292d);
}

@media (max-width: 700px) {
  .score-settings { grid-template-columns: 1fr; }
  .right-team { text-align: left; }
  .score-heading { align-items: flex-start; flex-direction: column; }
  .score-actions { width: 100%; }
  .score-actions .button { flex: 1; }
}