/* ── Global ──────────────────────────────────────────────── */
body {
  background-color: #f5f6fa;
}

/* ── Navbar brand ──────────────────────────────────────────── */
.navbar-brand {
  letter-spacing: 0.04em;
}

/* ── Target scoring buttons ─────────────────────────────────── */
.target-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid #adb5bd;
  background: #f8f9fa;
  color: #6c757d;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  touch-action: manipulation;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.target-btn:active {
  transform: scale(0.92);
}

.target-btn:focus {
  outline: 3px solid rgba(13, 110, 253, 0.4);
  outline-offset: 2px;
}

.target-btn.hit {
  background: #198754;
  border-color: #146c43;
  color: #fff;
}

.target-btn.miss {
  background: #dc3545;
  border-color: #b02a37;
  color: #fff;
}

.target-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* ── Target grid: 5 columns × 2 rows ───────────────────────── */
.target-grid {
  display: grid;
  grid-template-columns: repeat(5, 52px);
  gap: 8px;
  justify-content: start;
}

/* ── Score badge on cards ────────────────────────────────────── */
.set-score-badge {
  font-size: 1rem;
  min-width: 3rem;
  text-align: center;
}

/* ── Toast container ─────────────────────────────────────────── */
#toast-container .toast {
  min-width: 220px;
}

/* ── Leaderboard table ───────────────────────────────────────── */
.leaderboard-rank-1 td { background: #fff9c4; }

/* ── Responsive adjustments ─────────────────────────────────── */
@media (max-width: 480px) {
  .target-btn {
    width: 48px;
    height: 48px;
  }
  .target-grid {
    grid-template-columns: repeat(5, 48px);
    gap: 6px;
  }
}