.knockout-stage {
  height: 100%;
  overflow: auto;
  padding: 20px;
}

.ko-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ko-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--grn);
}

.ko-status {
  font-size: 12px;
  color: var(--muted);
}

.ko-warning {
  background: rgba(255,212,0,0.1);
  border: 1px solid var(--gld);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gld);
  margin-bottom: 20px;
}

.bracket {
  display: flex;
  gap: 20px;
  min-width: fit-content;
  align-items: flex-start;
}

.bracket-round {
  min-width: 180px;
}

.brd-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gld);
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.brd-match {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}

.brd-match:hover { border-color: var(--accent); }
.brd-match.expanded { border-color: var(--accent); }

.brd-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}

.brd-team:first-child { border-bottom: 1px solid var(--brd); }
.brd-team.tbd { color: var(--muted); font-style: italic; }
.brd-team.winner { background: rgba(0,230,118,0.1); color: var(--grn); font-weight: 700; }
.brd-team.loser { opacity: 0.5; }

.brd-flag { font-size: 14px; margin-right: 5px; }

.brd-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--muted);
}

.brd-score.set { color: var(--txt); }
.brd-score.win { color: var(--grn); }

.ko-entry {
  display: none;
  border-top: 1px solid var(--brd);
  background: var(--surf2);
  padding: 8px 10px;
}

.ko-entry.open { display: block; }

.ko-preset-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ko-psc {
  padding: 4px 7px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: 4px;
  color: var(--txt);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.ko-psc:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.ko-psc.sel { background: var(--accent); border-color: var(--accent); color: #000; }

.ko-pens {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.ko-pens label {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.ko-clear {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  margin-top: 4px;
}

.ko-clear:hover { background: var(--red); color: #fff; }

.pen-badge {
  font-size: 8px;
  background: var(--gld);
  color: #000;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 3px;
  vertical-align: middle;
}

.brd-match.final-match {
  border: 1px solid var(--gld);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
}

.champion-crown {
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--gld);
  background: rgba(255,215,0,0.05);
}

.champion-crown-ico { font-size: 24px; }

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

.ko-datetime {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  padding: 4px;
  background: var(--surf2);
  border-bottom: 1px solid var(--brd);
}

/* Knockout Section */
.knockout-section {
  background: var(--surf);
  border-top: 2px solid var(--accent);
  padding: 12px 16px;
  max-height: 50vh;
  overflow-y: auto;
}

.ko-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px;
  font-size: 13px;
}

/* Round Selector */
.ko-round-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brd);
}

.ko-round-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 60px;
}

.ko-round-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ko-round-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.ko-round-btn .kr-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ko-round-btn .kr-count {
  font-size: 8px;
  margin-top: 2px;
  opacity: 0.7;
}

/* Match List */
.ko-match-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.ko-match {
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.ko-match:hover {
  border-color: var(--accent);
}

.ko-match.expanded {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(0,230,118,0.15);
}

.ko-match.final-match {
  border-color: var(--gld);
  background: linear-gradient(135deg, var(--surf2) 0%, rgba(255,215,0,0.05) 100%);
}

.ko-teams {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 8px;
}

.ko-team {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surf);
  border-radius: 6px;
  transition: all 0.2s;
}

.ko-team.tbd {
  opacity: 0.5;
}

.ko-team.winner {
  background: rgba(0,230,118,0.15);
  border: 1px solid var(--grn);
}

.ko-team.loser {
  opacity: 0.45;
}

.ko-team .ko-flag {
  font-size: 16px;
}

.ko-team .ko-name {
  font-size: 11px;
  font-weight: 600;
}

.ko-score {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  justify-content: center;
}

.ko-score-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--muted);
  min-width: 20px;
  text-align: center;
}

.ko-score-val.set {
  color: var(--txt);
}

.ko-score-val.win {
  color: var(--grn);
}

.ko-score-sep {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--brd);
}

.ko-venue {
  font-size: 8px;
  color: var(--muted);
  text-align: center;
  padding: 3px 8px;
  background: rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}

/* KO Entry (score selection) */
.ko-entry {
  display: none;
  padding: 10px;
  background: var(--surf);
  border-top: 1px solid var(--brd);
}

.ko-entry.open {
  display: block;
}

.ko-preset-section {
  margin-bottom: 8px;
}

.ko-preset-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ko-preset-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Champion Crown */
.champion-crown {
  text-align: center;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.05) 100%);
  border-top: 1px solid var(--gld);
}

.champion-crown-ico {
  font-size: 28px;
  animation: pulse 1s infinite;
}

.champion-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--gld);
  margin-top: 4px;
}

/* Group Completion Animation */
@keyframes groupCompleteCelebration {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.group-complete-animation {
  animation: groupCompleteCelebration 1s ease-in-out 3;
}

.group-complete-animation::before {
  content: '🎉';
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 60px;
  transform: translate(-50%, -50%);
  animation: confettiFall 3s ease-out forwards;
  z-index: 9999;
}

@keyframes confettiFall {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, 100%) rotate(720deg); }
}