:root {
  --primary: #1a56a0;
  --primary-dark: #123d78;
  --primary-light: #e8f0fb;
  --accent: #f0a500;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --bg: #f5f7fb;
  --card-bg: #ffffff;
  --border: #d1d5db;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --radius: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── Header ─── */
header {
  background: var(--primary);
  color: #fff;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

header .logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

header nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

header nav a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  transition: background 0.15s;
}

header nav a:hover,
header nav a.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
}

/* ─── Layout ─── */
main {
  width: min(100%, 860px);
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
}

/* ─── Cards ─── */
.card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.card-compact {
  padding: 0.9rem 1rem;
}

.card h2 {
  font-size: 1.02rem;
  color: var(--primary);
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--primary-light);
  padding-bottom: 0.4rem;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #c0392b; }

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { background: #059669; }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }

.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

.btn-warning {
  background: var(--warning);
  color: #fff;
}

/* ─── Forms ─── */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
  color: var(--text);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
}

/* ─── Alert ─── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 7px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.alert-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
}
.alert-info {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid #bfdbfe;
}

/* ─── Match list ─── */
.match-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.match-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 0.15s;
}

.match-item.my-match {
  border-color: var(--primary);
  background: var(--primary-light);
}

.match-item.locked {
  border-color: var(--success);
}

.match-teams {
  flex: 1;
}

.match-teams strong {
  font-size: 1rem;
}

.match-teams .players {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.match-result {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.match-status {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-locked {
  background: #d1fae5;
  color: #065f46;
}

.phase-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.5rem 0 0.3rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

/* ─── Table ─── */
.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > table {
  min-width: 100%;
}

.schedule-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.schedule-grid th, .schedule-grid td {
  border: 1px solid var(--border);
  vertical-align: top;
}

.schedule-grid thead th {
  background: var(--primary-light, #e8f0fe);
  color: var(--primary-dark);
  font-weight: 600;
}

.schedule-grid tbody tr:nth-child(even) {
  background: var(--bg-alt, #fafafa);
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.standings-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

.standings-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.standings-table tr:last-child td {
  border-bottom: none;
}

.standings-table tr:nth-child(even) td {
  background: #f9fafb;
}

/* ─── Auth forms ─── */
.auth-container {
  max-width: 420px;
  margin: 2rem auto;
}

.auth-container h1 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

/* ─── Score inputs ─── */
.set-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.set-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--primary-light);
  padding: 0.75rem;
  border-radius: 8px;
}

.set-row label {
  font-size: 0.85rem;
  font-weight: 600;
  width: 80px;
  flex-shrink: 0;
}

.set-row input[type="number"] {
  width: 70px;
  text-align: center;
  padding: 0.4rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
}

.set-separator {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* ─── Report status ─── */
.report-card {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.report-card.agreed {
  border-color: var(--success);
  background: #f0fdf4;
}

/* ─── Match detail compact layout ─── */
.match-info-card {
  margin-bottom: 0.75rem;
}

.match-info-header,
.report-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.match-info-meta,
.report-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.match-info-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.match-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.match-team-card {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0;
}

.match-team-name {
  margin-bottom: 0.2rem;
}

.match-team-members {
  line-height: 1.35;
}

.admin-mode-card {
  margin-bottom: 0.75rem;
}

.admin-mode-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.admin-mode-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.admin-mode-help {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ─── Progressive report flow ─── */
.progressive-report {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.progressive-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
}

.progressive-score-team {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.progressive-score-team:last-child {
  text-align: right;
}

.progressive-score-name {
  font-size: 0.78rem;
  opacity: 0.9;
  word-break: break-word;
}

.progressive-score-value {
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 1;
}

.progressive-score-separator {
  font-size: 1.8rem;
  font-weight: 700;
  opacity: 0.9;
}

.progressive-helper-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.progressive-status {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.progressive-status.is-finished {
  color: var(--success);
}

.progressive-helper-copy {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.progressive-starting-team {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
}

.progressive-starting-team.is-first-round {
  background: #e8f0fb;
}

.progressive-round-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.progressive-round-row {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
}

.progressive-round-row.is-mine {
  border-color: #bfdbfe;
}

.progressive-round-row.is-opponent {
  border-color: #fecaca;
}

.progressive-round-row.color-mine {
  border-color: #86efac;
  background: #f0fdf4;
}

.progressive-round-row.color-mine .progressive-point-btn {
  border-color: #16a34a;
  color: #15803d;
  background: #dcfce7;
}

.progressive-round-row.color-mine .progressive-point-btn:hover {
  background: #bbf7d0;
}

.progressive-round-row.color-opponent {
  border-color: #fca5a5;
  background: #fff5f5;
}

.progressive-round-row.color-opponent .progressive-point-btn {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fee2e2;
}

.progressive-round-row.color-opponent .progressive-point-btn:hover {
  background: #fecaca;
}

.progressive-score-team.color-team1 .progressive-score-value,
.progressive-score-team.color-team2 .progressive-score-value {
  color: #fff;
}

.progressive-round-label {
  font-weight: 700;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.progressive-point-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.progressive-point-btn {
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  border-radius: 10px;
  padding: 0.65rem 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.progressive-point-btn:hover {
  background: var(--primary-light);
}

.progressive-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.progressive-history-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfdff;
  padding: 0.55rem 0.65rem;
}

.progressive-history-title {
  font-size: 0.9rem;
  color: var(--primary);
  cursor: pointer;
  font-weight: 700;
}

.progressive-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progressive-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.progressive-history-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.progressive-history-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.progressive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.progressive-actions .btn {
  flex: 1 1 140px;
  justify-content: center;
}

.progressive-action-hint {
  flex: 1 1 100%;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* ─── Admin sections ─── */
.admin-section {
  margin-bottom: 1.5rem;
}

.admin-section h3 {
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.admin-people-summary {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.admin-person-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-person-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-person-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  word-break: break-word;
}

.admin-person-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-word;
}

.admin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-badge-success {
  background: #dcfce7;
  color: #166534;
}

.admin-badge-primary {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.admin-badge-secondary {
  background: #ede9fe;
  color: #6d28d9;
}

.admin-badge-muted,
.admin-badge-neutral {
  background: #e5e7eb;
  color: #374151;
}

.admin-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-person-actions .btn {
  min-width: 0;
}

.team-card {
  background: var(--primary-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.team-card h4 {
  font-size: 0.95rem;
  color: var(--primary-dark);
  margin-bottom: 0.35rem;
}

.team-card .members {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.team-card.drop-target-active {
  border: 2px dashed var(--primary);
  background: #dce9fb;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(26, 86, 160, 0.08);
  border-radius: 8px;
}

.team-member-draggable {
  cursor: grab;
}

.team-member-draggable:active,
.team-member-dragging {
  cursor: grabbing;
  opacity: 0.65;
}

.participant-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.participant-item {
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(26, 86, 160, 0.08);
  border-radius: 12px;
  background: rgba(26, 86, 160, 0.04);
  font-size: 0.95rem;
}

.participant-item-current {
  border-color: rgba(26, 86, 160, 0.35);
  background: linear-gradient(90deg, rgba(26, 86, 160, 0.12), rgba(26, 86, 160, 0.05));
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 600;
}

.participant-team-card-current {
  border: 1px solid rgba(26, 86, 160, 0.22);
  box-shadow: 0 4px 16px rgba(18, 61, 120, 0.08);
}

/* ─── Tournament status badge ─── */
.tournament-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
}

.tournament-status.registration {
  background: #fef3c7;
  color: #92400e;
}

.tournament-status.active {
  background: #d1fae5;
  color: #065f46;
}

.tournament-status.finished {
  background: #f1f5f9;
  color: #475569;
}

/* ─── Loading ─── */
.loading {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
}

/* ─── Page title ─── */
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.page-title h1 {
  font-size: 1.5rem;
  color: var(--primary-dark);
}

/* ─── Empty state ─── */
.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ─── Bracket ─── */
.bracket-wrap {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 0 0.5rem;
  align-items: flex-start;
}

.bracket-round {
  --round-height: 200px;
  --match-height: 132px;
  --connector-width: 22px;
  --connector-stem-offset: calc(var(--connector-width) * 0.6);
  flex: 0 0 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bracket-round-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  text-align: center;
  min-height: 1.4rem;
}

.bracket-round-track {
  position: relative;
  height: var(--round-height);
}

.bracket-match-slot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.bracket-match-card {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  font-size: 0.84rem;
  border: 2px solid var(--border, #ddd);
  background: var(--card-bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.bracket-match-card.my-match {
  border-color: var(--primary);
  background: var(--primary-light);
}

.bracket-match-card.locked {
  border-color: var(--success, #4caf50);
  background: #f0fff4;
}

.bracket-bye-card {
  border-style: dashed;
  background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.bracket-match-label,
.bracket-match-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.bracket-match-label {
  margin-bottom: 0.35rem;
}

.bracket-match-team {
  font-weight: 600;
  line-height: 1.4;
}

.bracket-match-versus {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin: 0.15rem 0;
}

.bracket-match-meta {
  margin-top: 0.35rem;
}

.bracket-match-score {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.35rem;
  text-align: center;
}

.bracket-connector {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--connector-width));
  width: var(--connector-width);
  pointer-events: none;
}

.bracket-connector-vertical,
.bracket-connector-horizontal {
  position: absolute;
  background: rgba(26, 86, 160, 0.38);
}

.bracket-connector-vertical {
  left: calc(var(--connector-stem-offset) - 1px);
  width: 2px;
  min-height: 2px;
  border-radius: 999px;
}

.bracket-connector-horizontal {
  height: 2px;
  border-radius: 999px;
}

.bracket-connector-horizontal.current {
  left: var(--connector-stem-offset);
  right: 0;
}

.bracket-connector-horizontal.source {
  left: 0;
  width: var(--connector-stem-offset);
}

.winner-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240, 165, 0, 0.28);
  background: linear-gradient(135deg, rgba(240,165,0,0.12), rgba(26,86,160,0.08) 55%, #fff 100%);
}

.winner-banner::after {
  content: '';
  position: absolute;
  inset: auto -3rem -3.5rem auto;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,165,0,0.2) 0%, rgba(240,165,0,0) 70%);
  pointer-events: none;
}

.winner-banner-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}

.winner-banner-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.winner-banner-title {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 2.2rem);
  color: var(--primary-dark);
}

.winner-banner-copy {
  margin-top: 0.35rem;
  font-size: 0.98rem;
  color: var(--text);
}

.winner-banner-members {
  margin-top: 0.45rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.winner-banner-trophy {
  flex-shrink: 0;
  font-size: clamp(2rem, 9vw, 3.4rem);
  filter: drop-shadow(0 8px 14px rgba(240, 165, 0, 0.18));
}

.winner-banner-score {
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: var(--primary-dark);
  font-weight: 700;
}

.final-winner-card {
  border-color: rgba(240, 165, 0, 0.8);
  background: linear-gradient(180deg, rgba(255,248,231,0.95) 0%, #fff 100%);
  box-shadow: 0 10px 28px rgba(240,165,0,0.18);
}

.bracket-match-team.is-winner {
  font-weight: 800;
  color: var(--primary-dark);
  background: rgba(240,165,0,0.18);
  border-radius: 8px;
  padding: 0.18rem 0.38rem;
}

.bracket-match-score.is-final {
  font-size: 1rem;
  color: var(--primary-dark);
}

.bracket-match-champion-badge {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(240,165,0,0.16);
  color: var(--primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.confetti-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1200;
}

.confetti-piece {
  position: absolute;
  top: -8vh;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  opacity: 0.92;
  animation-name: confetti-fall;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.92;
  }
  100% {
    transform: translate3d(var(--confetti-drift, 0px), 110vh, 0) rotate(var(--confetti-rotate, 180deg));
    opacity: 0;
  }
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }

  header .logo,
  header nav,
  .page-title > * {
    min-width: 0;
  }

  header .logo {
    max-width: 100%;
    flex: 1 1 auto;
  }

  header nav {
    width: 100%;
    justify-content: flex-start;
  }

  main {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .card {
    padding: 0.9rem;
  }

  .card-compact {
    padding: 0.75rem 0.8rem;
  }

  .match-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .match-item,
  .match-teams,
  .match-info-header,
  .report-card-header,
  .match-info-meta,
  .report-meta-inline,
  .progressive-report,
  .progressive-helper-text,
  .progressive-history-item,
  .admin-person-card,
  .admin-person-actions,
  .admin-match-row,
  .team-card {
    min-width: 0;
  }

  .set-row {
    flex-wrap: wrap;
  }

  .match-teams-grid {
    grid-template-columns: 1fr;
  }

  .progressive-scoreboard {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .progressive-score-team:last-child {
    text-align: center;
  }

  .progressive-score-separator {
    display: none;
  }

  .progressive-point-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .progressive-history-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .progressive-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }

  .table-scroll {
    margin-inline: -0.1rem;
    padding-bottom: 0.15rem;
  }

  .standings-table th,
  .standings-table td {
    padding: 0.45rem 0.55rem;
    font-size: 0.84rem;
  }

  .bracket-wrap {
    gap: 0.75rem;
  }

  .bracket-round {
    flex-basis: 210px;
    min-width: 210px;
  }

  .winner-banner-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .winner-banner-trophy {
    align-self: flex-end;
  }

  .winner-banner-score {
    width: 100%;
    justify-content: center;
  }

  .bracket-match-card {
    font-size: 0.8rem;
    padding: 0.6rem 0.65rem;
  }

  .admin-round-grid,
  .admin-round-grid-header,
  .admin-round-grid-row {
    display: block;
  }

  .admin-round-grid-header {
    display: none;
  }

  .admin-time-cell {
    padding-top: 0;
    border-right: none;
    border-bottom: none;
    background: transparent;
  }

  .admin-time-pill {
    position: static;
    min-width: 72px;
    width: fit-content;
  }

  .admin-round-grid-row {
    border: 1px solid rgba(26, 86, 160, 0.12);
    border-radius: 10px;
    padding: 0.55rem;
    background: rgba(255,255,255,0.65);
  }

  .admin-court-cell {
    padding: 0;
    border: none;
    background: transparent;
  }

  .admin-court-cell + .admin-court-cell {
    margin-top: 0.45rem;
  }

  .admin-court-cell::before {
    content: attr(data-court-label);
    display: block;
    margin: 0 0 0.24rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}


/* ─── Admin schedule ─── */
.admin-schedule-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-round-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  padding: 0.7rem;
}

.admin-schedule-board-card {
  overflow-x: auto;
}

.admin-round-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.admin-round-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.admin-round-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.admin-round-matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-round-grid {
  display: grid;
  grid-template-columns: 84px repeat(var(--admin-court-count, 1), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  min-width: 0;
}

.admin-round-grid > * {
  min-width: 0;
}

.admin-round-grid-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-grid-corner,
.admin-grid-court-header {
  padding: 0.35rem 0.45rem 0.45rem;
  background: #eef4ff;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(26, 86, 160, 0.12);
}

.admin-grid-corner {
  border-right: 1px solid rgba(26, 86, 160, 0.12);
}

.admin-grid-court-header {
  text-align: center;
}

.admin-round-grid-row + .admin-round-grid-row .admin-time-cell,
.admin-round-grid-row + .admin-round-grid-row .admin-court-cell {
  border-top: 1px solid rgba(26, 86, 160, 0.08);
}

.admin-time-cell {
  padding: 0.4rem 0.45rem 0.4rem 0;
  border-right: 1px solid rgba(26, 86, 160, 0.12);
  background: linear-gradient(90deg, rgba(232,240,251,0.9), rgba(232,240,251,0.35));
}

.admin-time-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.admin-court-cell {
  padding: 0.35rem;
  min-width: 0;
  background: rgba(255,255,255,0.45);
}

.admin-court-cell::before {
  content: none;
}

.admin-schedule-match-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.5rem 0.55rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  overflow: hidden;
}

.admin-schedule-match-card.is-locked {
  background: #ecfdf5;
  border-color: #86efac;
}

.admin-schedule-match-body {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.admin-schedule-match-meta {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.admin-schedule-match-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
}

.admin-schedule-match-badge.is-round {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-schedule-match-badge.is-phase {
  background: #e5e7eb;
  color: #374151;
}

.admin-schedule-match-teams {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}

.admin-schedule-match-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.admin-schedule-match-actions .btn.btn-sm {
  padding: 0.28rem 0.45rem;
}

.admin-schedule-match-actions .match-status {
  font-size: 0.72rem;
}

.admin-empty-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  background: rgba(255,255,255,0.55);
}

.admin-unscheduled-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

/* ─── Admin match row ─── */
.admin-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
}

.sets-editor {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sets-editor input[type="number"] {
  width: 52px;
  text-align: center;
  padding: 0.25rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-size: 0.85rem;
}

.toggle-admin {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-schedule-edit-controls,
.admin-schedule-edit-status {
  margin-bottom: 0.75rem;
}

.admin-schedule-edit-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-schedule-validation-summary {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.admin-schedule-edit-help,
.admin-schedule-validation-counts {
  font-size: 0.84rem;
  margin-bottom: 0.35rem;
}

.admin-schedule-validation-item {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.admin-schedule-validation-item.is-hard { color: #b91c1c; }
.admin-schedule-validation-item.is-soft { color: #b45309; }

.admin-court-cell.is-edit-target {
  transition: background 0.12s ease, border-color 0.12s ease, outline-color 0.12s ease;
}
.admin-court-cell.is-select-target {
  background: #eef4ff;
  outline: 2px dashed rgba(26, 86, 160, 0.35);
  outline-offset: -4px;
}
.admin-court-cell.is-drag-over {
  background: #e0ecff;
  outline: 2px dashed var(--primary);
  outline-offset: -4px;
}
.admin-empty-slot.is-editable {
  color: var(--primary-dark);
  border-color: rgba(26,86,160,0.35);
}
.admin-schedule-match-card.is-editable {
  cursor: grab;
  touch-action: manipulation;
}
.admin-schedule-match-card.is-editable.is-selected {
  border-color: var(--primary);
  background: #e8f0fb;
  box-shadow: 0 0 0 2px rgba(26, 86, 160, 0.16);
}
.admin-schedule-match-card.is-editable.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}
.admin-schedule-match-card.has-hard-warning {
  border-color: #ef4444;
  background: #fef2f2;
}
.admin-schedule-match-card.has-soft-warning {
  border-color: #f59e0b;
  background: #fffbeb;
}
.admin-schedule-warning-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
.admin-schedule-warning-pill.is-hard {
  background: #fee2e2;
  color: #b91c1c;
}
.admin-schedule-warning-pill.is-soft {
  background: #fef3c7;
  color: #92400e;
}