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

:root {
  --bg-1: #0a0e27;
  --bg-2: #1a1a3e;
  --bg-3: #2d1b4e;
  --gold: #ffd700;
  --gold-dim: #b8860b;
  --green: #00ff88;
  --red: #ff4757;
  --blue: #00d9ff;
  --purple: #a855f7;
  --card: rgba(255, 255, 255, 0.04);
  --card-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.4);
}

html, body {
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(168, 85, 247, 0.15), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.12), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ---------- HEADER ---------- */
.app-header {
  padding: 20px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 39, 0.75);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

/* ---------- MAIN NAV (tabs) ---------- */
.main-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-tab.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.25);
}

.nav-icon {
  font-size: 14px;
  line-height: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(220, 20, 50, 0.25);
  border: 1px solid rgba(220, 20, 50, 0.2);
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(220, 20, 50, 0.4));
}

.brand-text h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.brand-text p {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.phase-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.5);
}

.btn-secondary {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--card-hover);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-success {
  background: linear-gradient(135deg, var(--green), #00cc6a);
  color: #0a0e27;
  font-weight: 700;
}
.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 12px;
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 14px;
}

/* ---------- MAIN ---------- */
.main {
  padding: 40px 48px 80px;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- PLACEHOLDER SCREEN (Bolão) ---------- */
.placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 20px;
  padding: 40px 20px;
}

.placeholder-icon {
  font-size: 96px;
  filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.4));
  animation: float 3s ease-in-out infinite;
}

.placeholder-screen h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #fff, var(--purple), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.placeholder-screen p {
  color: var(--text-dim);
  font-size: 15px;
  max-width: 500px;
  line-height: 1.6;
}

.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dot-warn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 12px var(--purple);
  animation: pulse 2s infinite;
}

/* ---------- SETUP SCREEN ---------- */
.setup-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 32px;
}

.setup-screen .trophy {
  font-size: 96px;
  filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.5));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.setup-screen h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--gold), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.setup-screen p {
  color: var(--text-dim);
  font-size: 16px;
  max-width: 540px;
  line-height: 1.6;
}

.teams-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 800px;
  margin-bottom: 8px;
}

.teams-preview .flag {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  opacity: 0.7;
  transition: all 0.3s;
}
.teams-preview .flag:hover {
  opacity: 1;
  transform: scale(1.2);
}
.teams-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- SETUP GROUPS PREVIEW ---------- */
.setup-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.setup-group {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  backdrop-filter: blur(20px);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.setup-group::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}

.setup-group:hover {
  border-color: rgba(255, 215, 0, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.setup-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.setup-group-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 1px;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.setup-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-faint);
  font-weight: 600;
}

.setup-group-teams {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-team {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  transition: all 0.2s;
}

.setup-team:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.setup-team .flag-lg {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.setup-team-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setup-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-team-meta {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

/* ---------- GROUPS ---------- */
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.section-subtitle {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 28px;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.group-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(20px);
  transition: all 0.3s;
}
.group-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.group-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--gold);
}

.group-progress {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.standings-table {
  width: 100%;
  font-size: 13px;
  margin-bottom: 16px;
}

.standings-table th {
  text-align: center;
  padding: 6px 4px;
  color: var(--text-faint);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}

.standings-table th:first-child,
.standings-table td:first-child {
  text-align: left;
}

.standings-table td {
  padding: 8px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.standings-table tr.qualified td:first-child {
  position: relative;
}
.standings-table tr.qualified td:first-child::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--green);
  border-radius: 2px;
}

.standings-table tr.third td:first-child::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--blue);
  border-radius: 2px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flag {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: #333;
}
.flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.flag-lg { width: 40px; height: 28px; border-radius: 4px; }
.flag-xl { width: 56px; height: 40px; border-radius: 6px; }

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- MATCH CARD ---------- */
.match-wrap {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
  overflow: hidden;
}

.match-wrap.approved {
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.04);
}

.match-wrap.played:not(.approved) {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.04);
}

.match {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

/* ---------- PROBABILITY BAR ---------- */
.prob-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 12px 14px;
  font-size: 11px;
  cursor: help;
}

.prob-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.prob-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.prob-stat-1 {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.prob-stat-d {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  font-weight: 600;
}
.prob-stat-2 {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.prob-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.prob-seg {
  height: 100%;
  transition: width 0.4s ease;
  position: relative;
}
.prob-seg.prob-1 {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prob-seg.prob-d {
  background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prob-seg.prob-2 {
  background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---------- PEN NOTE (vencedor por pênaltis em jogo de grupo) ---------- */
.pen-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--gold);
  background: rgba(255, 215, 0, 0.06);
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}
.pen-note strong {
  color: var(--text);
  font-weight: 600;
}
.pen-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold);
  background: rgba(255, 215, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* ---------- TITLE BADGE ---------- */
.title-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  cursor: help;
}

.title-badge .trophy-mini {
  font-size: 9px;
  line-height: 1;
}

.match-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
}

.match-team.right {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.match-team .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-team.winner .name { color: var(--green); font-weight: 700; }
.match-team.loser .name { color: var(--text-dim); }

.match-score {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-input {
  width: 36px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
.score-input:focus {
  outline: none;
  border-color: var(--gold);
}

.score-input:disabled {
  opacity: 0.7;
  cursor: default;
}

.score-x {
  color: var(--text-faint);
  font-size: 11px;
}

.match-actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  font-family: inherit;
}
.icon-btn:hover {
  background: var(--card-hover);
  color: var(--text);
}
.icon-btn.approve {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
  color: var(--green);
}
.icon-btn.approve:hover {
  background: var(--green);
  color: #0a0e27;
}
.icon-btn.dice {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: var(--purple);
}
.icon-btn.dice:hover {
  background: var(--purple);
  color: #fff;
}

.match-pens {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

/* ---------- TOOLBAR ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(20px);
}

.toolbar-info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
}
.stat-value {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Bebas Neue';
  letter-spacing: 1px;
  color: var(--gold);
}

.toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   BRACKET HORIZONTAL — chaveamento da esquerda pra direita
   ============================================================ */
:root {
  --bk-line: rgba(255, 215, 0, 0.25);
  --bk-line-active: rgba(168, 85, 247, 0.5);
  --bk-gap: 56px;             /* espaço entre colunas (precisa ser >= 2 × tail) */
  --bk-tail: 26px;            /* tamanho do "rabicho" horizontal de cada lado */
  --bk-slot-h-r32: 110px;     /* altura mínima de cada slot na R32 */
}

.bracket-h-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 32px;
}

.bracket-h {
  display: flex;
  align-items: stretch;
  gap: var(--bk-gap);
  min-width: max-content;
  padding: 8px;
}

.bk-col {
  display: flex;
  flex-direction: column;
  min-width: 230px;
}

.bk-col-F {
  min-width: 260px;
}

.bk-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}

.bk-col.is-current .bk-col-header {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.04));
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.18);
}

.bk-col.is-future .bk-col-header {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.bk-col-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2.5px;
  color: var(--gold);
  line-height: 1;
}

.bk-col.is-current .bk-col-name { color: #c084fc; }
.bk-col.is-future .bk-col-name { color: var(--text-dim); }

.bk-col-sim {
  width: 100%;
  padding: 7px 10px;
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bk-col-sim:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.32);
  transform: translateY(-1px);
}
.bk-col-sim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.bk-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.bk-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: var(--bk-slot-h-r32);
  padding: 4px 0;
}

/* ============================================================
   LINHAS CONECTORAS (entre colunas)
   ─ Cada slot tem um "tail" pra direita (até a Final) e um da
     esquerda (a partir das oitavas). Slots ímpares também
     traçam a linha vertical descendo até o slot par seguinte,
     formando o "fork" do chaveamento.
   ============================================================ */

/* Rabicho à esquerda (vem da coluna anterior) — todos menos R32 */
.bk-col:not(.bk-col-R32) .bk-slot::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: var(--bk-tail);
  height: 2px;
  background: var(--bk-line);
  transform: translate(0, -1px);
}

/* Rabicho à direita PARES (parte inferior do par) — todos menos Final */
.bk-col:not(.bk-col-F) .bk-slot:nth-child(even)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--bk-tail);
  height: 2px;
  background: var(--bk-line);
  transform: translate(0, -1px);
}

/* Rabicho à direita ÍMPARES + linha vertical até o par par seguinte */
.bk-col:not(.bk-col-F) .bk-slot:nth-child(odd)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--bk-tail);
  height: 100%;
  border-top: 2px solid var(--bk-line);
  border-right: 2px solid var(--bk-line);
}

/* Cores ativas: highlight quando a coluna atual recebe foco */
.bk-col.is-current:not(.bk-col-R32) .bk-slot::before,
.bk-col + .bk-col.is-current .bk-slot::before {
  background: var(--bk-line-active);
}

/* ============================================================
   CARDS COMPACTOS (BracketMatch e PendingCard)
   ============================================================ */
.bk {
  width: 230px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  position: relative;
  transition: all 0.2s;
  backdrop-filter: blur(20px);
}

.bk:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.bk.bk-approved {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
}

.bk.bk-final {
  width: 260px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.02));
  box-shadow: 0 12px 32px rgba(255, 215, 0, 0.18), 0 0 0 1px rgba(255, 215, 0, 0.1);
  padding: 12px;
}

.bk-pens-badge {
  position: absolute;
  top: -8px; right: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.bk-team {
  display: grid;
  grid-template-columns: 22px 1fr 32px;
  align-items: center;
  gap: 7px;
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 3px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.18);
}

.bk-team .flag {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bk-team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-team.bk-winner {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.bk-team.bk-loser {
  opacity: 0.5;
  color: var(--text-dim);
}

.bk-score {
  width: 30px;
  height: 22px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
}
.bk-score:focus {
  outline: none;
  border-color: var(--gold);
}
.bk-score:disabled {
  opacity: 0.85;
  cursor: default;
}

.bk-probs {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
  margin: 6px 2px 4px;
  font-size: 10px;
  font-weight: 700;
}

.bk-prob-1 { color: #34d399; text-align: right; }
.bk-prob-2 { color: #f87171; text-align: left; }

.bk-prob-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bk-prob-seg-1 { background: linear-gradient(90deg, #10b981, #059669); }
.bk-prob-seg-2 { background: linear-gradient(90deg, #ef4444, #b91c1c); }

.bk-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.bk-act {
  width: 26px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: grid;
  place-items: center;
}
.bk-act:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.bk-act-sim {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.3);
}
.bk-act-sim:hover:not(:disabled) { background: rgba(168, 85, 247, 0.3); }
.bk-act-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.bk-act-ok:hover:not(:disabled) { background: rgba(16, 185, 129, 0.3); }
.bk-act-undo {
  color: var(--text-dim);
  border-color: var(--border);
}
.bk-act-undo:hover { color: var(--text); }

/* ============================================================
   PENDING CARDS (Aguardando)
   ============================================================ */
.bk.bk-pending {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: center;
  height: 96px;
}

.bk-pending-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 700;
}

.bk-pending-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.bk-pending-label {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-faint);
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.6;
}

.bk-final-trophy {
  font-size: 56px;
  text-align: center;
  margin-top: 12px;
  filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.55));
  animation: float 3s ease-in-out infinite;
}

/* ============================================================
   LEGADO PIRÂMIDE — desativando pra não conflitar
   ============================================================ */
.pyramid {
  display: none;
}

/* ---------- KNOCKOUT PYRAMID (top-down) — legado ---------- */
.pyramid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0;
}

.pyramid-row {
  position: relative;
  padding-bottom: 4px;
}

.pyramid-row.is-current {
  --row-glow: rgba(168, 85, 247, 0.35);
}

.pyramid-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.06), transparent 60%);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pyramid-row.is-current .pyramid-row-header {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.12), transparent 60%);
  border-color: rgba(168, 85, 247, 0.35);
  border-left-color: var(--purple);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.12);
}

.pyramid-row-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pyramid-row-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold);
}

.pyramid-row.is-current .pyramid-row-name {
  color: #c084fc;
}

.pyramid-row-count {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pyramid-row-sim {
  padding: 8px 14px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.pyramid-row-sim:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.3);
  transform: translateY(-1px);
}

.pyramid-row-sim:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
}

.pyramid-row-scroll {
  width: 100%;
  overflow-x: auto;
  padding: 6px 0;
  scroll-padding: 24px;
}

.pyramid-row-matches {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-width: max-content;
  padding: 0 12px;
}

/* Quando há muitas partidas (R32/R16), o min-width: max-content
   faz o conteúdo exceder a largura — alinha à esquerda em vez de centrar */
.pyramid-row-R32 .pyramid-row-matches,
.pyramid-row-R16 .pyramid-row-matches {
  justify-content: flex-start;
}

.pyramid-row-placeholder {
  padding: 28px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.4px;
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
}

.pyramid-row.is-future {
  opacity: 0.85;
}

.pyramid-row.is-future .pyramid-row-name {
  color: var(--text-dim);
}

.pyramid-row.is-future .pyramid-row-header {
  border-left-color: var(--border);
  background: transparent;
}

.pyramid-trophy {
  font-size: 72px;
  text-align: center;
  filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.6));
  margin-top: 16px;
  animation: float 3s ease-in-out infinite;
}

/* ---------- legacy keep-alive (caso volte a usar) ---------- */
.bracket-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 8px 24px;
  margin: 0 -12px;
}

.bracket {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 1100px;
  min-width: max-content;
  padding: 12px;
}

.bracket-side {
  display: flex;
  gap: 28px;
}

.bracket-side.bracket-left .bracket-col-label { text-align: right; padding-right: 6px; }
.bracket-side.bracket-right .bracket-col-label { text-align: left;  padding-left: 6px; }

.bracket-col {
  display: flex;
  flex-direction: column;
}

.bracket-col-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.bracket-col-matches {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 6px;
}

.bracket-col-R32 .bracket-col-matches { gap: 6px; }
.bracket-col-R16 .bracket-col-matches { gap: 16px; }
.bracket-col-QF  .bracket-col-matches { gap: 64px; }
.bracket-col-SF  .bracket-col-matches { gap: 200px; }

.bracket-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 240px;
}

.bracket-trophy {
  font-size: 64px;
  text-align: center;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
  margin: 16px 0 12px;
  animation: float 3s ease-in-out infinite;
}

.bracket-placeholder {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  border: 2px dashed var(--border);
  border-radius: 12px;
}

/* ---------- BRACKET MATCH CARD (compacto) ---------- */
.bm {
  width: 230px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  transition: all 0.2s;
}

.bm:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.bm.bm-approved {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.04);
}

.bm.bm-final {
  width: 260px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
  box-shadow: 0 12px 32px rgba(255, 215, 0, 0.15);
}

.bm-header {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.bm-pens {
  color: var(--gold);
  background: rgba(255, 215, 0, 0.15);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-weight: 700;
}

.bm-team {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  border: 1px solid transparent;
}

.bm-team .flag-lg {
  width: 28px;
  height: 20px;
  border-radius: 3px;
}

.bm-team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-team.bm-winner {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05));
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.bm-team.bm-loser {
  opacity: 0.55;
  color: var(--text-dim);
}

.bm-score {
  width: 30px;
  height: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
}
.bm-score:disabled {
  opacity: 0.85;
  cursor: default;
}
.bm-score:focus {
  outline: none;
  border-color: var(--gold);
}

.bm-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.bm-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.bm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bm-btn-sim {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.3);
}
.bm-btn-sim:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.25);
}

.bm-btn-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.bm-btn-ok:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.3);
}

.bm-btn-undo {
  background: var(--card);
  color: var(--text-dim);
  border-color: var(--border);
}
.bm-btn-undo:hover:not(:disabled) {
  color: var(--text);
}

/* ---------- ROUND BUTTONS (toolbar do mata-mata) ---------- */
.round-buttons {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
}

.round-btn {
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.round-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.round-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.1));
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.15);
}

.round-btn.active:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.18));
}

/* ---------- KO LEGADO (compatibilidade) ---------- */
.bracket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

/* ---------- CHAMPION ---------- */
.champion-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 70vh;
  gap: 24px;
  position: relative;
}

.confetti {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti span {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--gold);
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-100vh) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.champion-trophy {
  font-size: 120px;
  filter: drop-shadow(0 0 60px rgba(255, 215, 0, 0.8));
  animation: float 3s ease-in-out infinite;
}

.champion-label {
  font-size: 14px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.champion-flag {
  width: 200px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--gold);
}
.champion-flag img { width: 100%; height: 100%; object-fit: cover; }

.champion-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 96px;
  letter-spacing: 4px;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold), #fff, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.champion-subtitle {
  color: var(--text-dim);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.podium {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  align-items: flex-end;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 160px;
}
.podium-place.gold { border-color: var(--gold); padding-bottom: 30px; }
.podium-place.silver { border-color: rgba(192, 192, 192, 0.5); }
.podium-place.bronze { border-color: rgba(205, 127, 50, 0.5); }
.podium-place .medal { font-size: 32px; }
.podium-place .name { font-weight: 700; font-size: 16px; }
.podium-place .pos { font-size: 10px; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }

/* ---------- LOGIN SCREEN ---------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.login-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 4px;
  filter: drop-shadow(0 4px 12px rgba(220, 20, 50, 0.4));
}

.login-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-subtitle {
  font-size: 12px;
  text-align: center;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  font-weight: 600;
}

.login-field input {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.45);
}

.login-error {
  padding: 10px 14px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  color: var(--red);
  font-size: 13px;
}

.login-submit {
  margin-top: 8px;
  justify-content: center;
}

/* ---------- AUTH CHECKING (loading) ---------- */
.auth-checking {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 215, 0, 0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- USER CHIP (header) ---------- */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #1a1a1a;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding-right: 4px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-logout {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 71, 87, 0.12);
  color: var(--red);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.user-logout:hover {
  background: var(--red);
  color: #fff;
}

/* ---------- DISCORD SHARE ---------- */
.discord-share {
  margin-top: 40px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.08), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 560px;
  width: 100%;
  backdrop-filter: blur(20px);
  text-align: left;
}

.discord-share-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.discord-icon {
  font-size: 28px;
  background: linear-gradient(135deg, #5865F2, #7289DA);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.4);
  flex-shrink: 0;
}

.discord-share-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.discord-share-header p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  max-width: none;
}

.discord-share-btn {
  width: 100%;
  justify-content: center;
}

.btn-discord {
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.35);
}
.btn-discord:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5);
}

.discord-feedback {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.discord-error {
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  color: var(--red);
}
.discord-success {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--green);
}

/* ============================================================
   BOLÃO
   ============================================================ */
.bolao {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bolao-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 217, 255, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 16px;
}

.bolao-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff, var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bolao-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 6px;
  max-width: 600px;
}
.bolao-sub-lock {
  color: var(--green);
}

.bolao-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bolao-saved {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}

.bolao-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
}
.bolao-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s;
}
.bolao-tab:hover:not(:disabled) { color: var(--text); }
.bolao-tab.active {
  background: linear-gradient(135deg, var(--purple), #7e22ce);
  color: #fff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}
.bolao-tab:disabled { opacity: 0.4; cursor: not-allowed; }

.bolao-deadline-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: 18px;
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.06), rgba(0,0,0,0.2));
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 16px;
}
.bolao-deadline-closed h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: 3px;
  color: var(--red);
}
.bolao-deadline-closed p {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 500px;
  line-height: 1.6;
}

.bolao-error {
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  color: var(--red);
  font-size: 13px;
}

.bolao-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bolao-group-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  backdrop-filter: blur(20px);
}

.bolao-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.bolao-group-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold);
}

.bolao-group-count {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bolao-standings {
  width: 100%;
  font-size: 12px;
  margin-bottom: 12px;
}
.bolao-standings th {
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  padding: 4px;
  border-bottom: 1px solid var(--border);
}
.bolao-standings th:nth-child(2), .bolao-standings th:nth-child(3) { text-align: center; }
.bolao-standings td {
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.bolao-standings td:nth-child(2), .bolao-standings td:nth-child(3) { text-align: center; }
.bolao-standings tr.top td { color: var(--green); font-weight: 600; }
.bolao-standings tr.third td { color: var(--blue); }
.bolao-standings .flag { display: inline-block; vertical-align: middle; margin-right: 6px; }

.bolao-matches {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bolao-group-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.bolao-group-save {
  flex: 1;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.08));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}
.bolao-group-save:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.15));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.18);
}
.bolao-group-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bolao-group-reset {
  padding: 10px 14px;
  background: rgba(255, 71, 87, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 71, 87, 0.35);
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bolao-group-reset:hover:not(:disabled) {
  background: rgba(255, 71, 87, 0.22);
  transform: translateY(-1px);
}
.bolao-group-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bolao-row {
  display: grid;
  grid-template-columns: 1fr 36px 14px 36px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.bolao-row-pending {
  opacity: 0.5;
  border-style: dashed;
  /* Modo aguardando renderiza só 3 elementos (time × time, sem inputs).
     Sobrescreve o grid de 5 colunas pra não cortar o segundo time. */
  grid-template-columns: 1fr auto 1fr;
}

.bolao-row-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bolao-row-team-r { justify-content: flex-end; }

.bolao-row-vs {
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
}

.bolao-score {
  width: 36px;
  height: 26px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
}
.bolao-score:focus { outline: none; border-color: var(--purple); }
.bolao-score:disabled { opacity: 0.8; }

.bolao-bracket {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bolao-bracket-round {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.bolao-bracket-round-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.bolao-bracket-round-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold);
}

.bolao-bracket-count {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* Linha de pen winner no palpite */
.bolao-pen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-top: -2px;
  background: rgba(255, 215, 0, 0.06);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  font-size: 11px;
  flex-wrap: wrap;
}
.bolao-pen-label {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bolao-pen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.bolao-pen-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--text);
}
.bolao-pen-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  border-color: var(--gold);
  color: #1a1a1a;
  font-weight: 800;
}
.bolao-pen-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Pen winner em Resultados (admin) */
.res-pen-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin: -2px 0 6px 36px;
  font-size: 11px;
  background: rgba(255, 215, 0, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.res-pen-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-dim);
  font-weight: 600;
}
.res-pen-row label:hover { color: var(--text); }
.res-pen-row input[type=radio] { accent-color: var(--gold); }
.res-pen-row span { color: var(--gold); font-weight: 700; letter-spacing: 0.5px; }

.bolao-bracket-matches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bolao-bracket-locked {
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: 12px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 100;
}
.modal {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 28px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.modal h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}
.modal p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ============================================================
   RANKING
   ============================================================ */
.ranking {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 14px;
}

.ranking-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--gold), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ranking-sub {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.6px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ranking-sub .sub-sep {
  color: rgba(255, 255, 255, 0.15);
  font-weight: 400;
}
.ranking-sub .sub-premio {
  color: var(--gold);
}
.ranking-sub .sub-premio strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--gold), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 4px;
}

.ranking-table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
}

.ranking-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.ranking-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ranking-table tr.me {
  background: rgba(255, 215, 0, 0.06);
}

.rank-pos {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  width: 60px;
  color: var(--gold);
}

.rank-name {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.rank-me-tag {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
}

.rank-pts {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 1px;
}

.dim { color: var(--text-faint); }

.rank-pending-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}

.bisbilhotar-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bisbilhotar-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(168, 85, 247, 0.12));
  transform: translateY(-1px);
}
.bisbilhotar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-faint);
  border-color: var(--border);
}

/* ============================================================
   BISBILHOTAR VIEW
   ============================================================ */
.bisbilhotar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bisbilhotar-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 217, 255, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
}

.bisbilhotar-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bisbilhotar-eye {
  font-size: 38px;
  animation: float 3s ease-in-out infinite;
}

.bisbilhotar-title h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bisbilhotar-title strong {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

.bisbilhotar-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}

.bisbilhotar-section h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 14px;
}

.ranking-legend {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ranking-legend h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  padding-bottom: 10px;
}

.legend-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0;
}
.legend-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.legend-points .legend-icon { font-size: 20px; line-height: 1; }
.legend-points .legend-value {
  margin-left: auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
}
.legend-points .legend-dim {
  font-weight: 500;
  opacity: 0.7;
  font-size: 10px;
}

.legend-hit-exact {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}
.legend-hit-winner {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.16), rgba(0, 217, 255, 0.04));
  border-color: rgba(0, 217, 255, 0.4);
  color: #38bdf8;
}
.legend-miss {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.15), rgba(255, 71, 87, 0.04));
  border-color: rgba(255, 71, 87, 0.4);
  color: #f87171;
}

.legend-mult-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.legend-mult-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--text-dim);
}
.legend-mult-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.legend-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 400;
  border: 1px solid;
}
.legend-pill-1 {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text-dim);
}
.legend-pill-2 {
  background: rgba(0, 217, 255, 0.12);
  border-color: rgba(0, 217, 255, 0.4);
  color: #38bdf8;
}
.legend-pill-3 {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}
.legend-pill-4 {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.legend-pill-5 {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  border-color: var(--gold);
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.3);
}

.legend-note {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid;
}
.legend-note-mata {
  background: rgba(251, 191, 36, 0.08);
  border-color: var(--gold);
  color: #fbbf24;
}
.legend-note-bisb {
  background: rgba(168, 85, 247, 0.08);
  border-color: var(--purple);
  color: #c084fc;
}
.legend-highlight {
  color: var(--gold);
  font-weight: 800;
  text-decoration: underline;
}
.legend-highlight-2 {
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .legend-points { grid-template-columns: 1fr; }
}

/* ============================================================
   RESULTADOS (admin)
   ============================================================ */
.resultados {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.resultados-header {
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.06), transparent);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 14px;
}

.resultados-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--blue);
}

.resultados-header p {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
}

.resultados-groups h3, .resultados-knockout h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 14px;
}

.resultados-group {
  margin-bottom: 18px;
}
.resultados-group h4 {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.resultados-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-row {
  display: grid;
  grid-template-columns: 70px 1fr 50px 14px 50px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.res-row-saved {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}

.res-row-id {
  font-family: monospace;
  color: var(--text-faint);
  font-size: 11px;
}

.res-row-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-row-team-r { justify-content: flex-end; }

.res-score {
  width: 44px;
  height: 28px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  font-size: 14px;
}
.res-score:focus { outline: none; border-color: var(--blue); }

.res-manual {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 217, 255, 0.06);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.res-manual select, .res-manual input {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

@media (max-width: 768px) {
  .bolao-groups { grid-template-columns: 1fr; }
  .bolao-bracket-matches { grid-template-columns: 1fr; }
}

/* ============================================================
   Inputs numéricos — sem setas (spin buttons)
   ============================================================ */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--card-hover); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .app-header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 24px;
  }
  .main-nav { justify-self: center; }
  .header-right { justify-content: center; }
}

@media (max-width: 768px) {
  .brand-text h1 { font-size: 22px; }
  .main { padding: 24px 16px; }
  .setup-screen h2 { font-size: 40px; }
  .champion-name { font-size: 56px; }
  .groups-grid { grid-template-columns: 1fr; }
  .setup-groups { grid-template-columns: 1fr; }
  .nav-tab { padding: 8px 12px; font-size: 11px; }
  .placeholder-screen h2 { font-size: 40px; }
}