/* score.css — Score Counter page styles */

.score-tool {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 2px 20px var(--color-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  transition: background-color var(--dur-slow) ease;
}

.score-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

/* Scoreboard: two teams + divider */
.score-board {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  justify-content: center;
}

.team-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 200px;
}

/* Team name input */
.team-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  width: 100%;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.team-name:hover { border-bottom-color: var(--color-border); }
.team-name:focus { border-bottom-color: var(--color-accent); color: var(--color-text); outline: none; }

/* Score number */
.team-score {
  font-size: clamp(56px, 16vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  cursor: pointer;
  color: var(--color-text);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) ease;
}
.team-score:hover { background-color: var(--color-surface-2); }

/* +1 +2 +3 quick buttons */
.score-quick-btns {
  display: flex;
  gap: var(--space-xs);
}

.quick-btn {
  height: 44px;
  min-width: 50px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 700;
  background-color: var(--color-accent);
  color: white;
  transition: filter var(--dur-fast) ease, transform var(--dur-fast) ease;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.25);
}
.quick-btn:hover { filter: brightness(1.08); }
.quick-btn:active { transform: scale(0.93); }

/* −1 button */
.team-minus {
  height: 36px;
  padding: 0 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  background-color: rgba(255, 59, 48, 0.1);
  color: var(--color-decrement);
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.team-minus:hover { background-color: rgba(255, 59, 48, 0.18); }
.team-minus:active { transform: scale(0.94); }

/* Colon divider */
.score-divider {
  font-size: clamp(40px, 10vw, 72px);
  font-weight: 300;
  color: var(--color-text-tertiary);
  line-height: 1;
  padding-bottom: 32px; /* align with numbers */
  user-select: none;
}

/* Controls row */
.score-controls {
  display: flex;
  gap: var(--space-sm);
}

/* Related tools section */
.related-tools {
  margin-top: var(--space-lg);
}
.related-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}
.related-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 8px var(--color-shadow);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  text-decoration: none;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--color-shadow-md);
  text-decoration: none;
}
.related-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.related-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
}

@media (min-width: 480px) {
  .score-tool { padding: var(--space-xl); }
  .quick-btn { min-width: 58px; height: 48px; font-size: 17px; }
}