/* Tournament brackets page. */

.brackets-page { --page-w: 1200px; }

.bracket-card { padding: clamp(20px, 3vw, 36px); }
.players-card { margin-top: 20px; }

.bracket-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.bracket-top h2,
.players-card h2 { font-size: clamp(22px, 2.6vw, 28px); }

.bracket-find input {
  width: min(260px, 70vw);
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--ink);
  font: inherit;
}

.bracket-find input:focus { border-color: var(--blue); background: #fff; outline: none; }

.bracket-status { margin: 10px 0 0; color: var(--gray); font-size: 14px; }

/* The bracket scrolls sideways inside the card, never the page. */
.bracket-scroll {
  margin: 20px calc(-1 * clamp(20px, 3vw, 36px)) 0;
  padding: 0 clamp(20px, 3vw, 36px) 12px;
  overflow-x: auto;
}

.bracket,
.bracket-group,
.bracket-slots,
.players { margin: 0; padding: 0; list-style: none; }

/* Every round column is as tall as the first; groups split that height evenly, so
   each match sits exactly between the two matches that feed it. */
.bracket { display: flex; gap: 28px; width: max-content; }

.bracket-round { display: flex; flex: none; flex-direction: column; width: 200px; }

.bracket-round-name {
  margin-bottom: 12px;
  color: var(--gray);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.bracket-round-body { display: flex; flex: 1; flex-direction: column; justify-content: space-around; }

.bracket-group {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}

/* Joins a pair of matches and leads to the next round. */
.bracket-group:not(.is-final)::after {
  position: absolute;
  top: 25%;
  right: -14px;
  bottom: 25%;
  width: 14px;
  border: 2px solid #c9d3e1;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  content: "";
}

.bracket-match { position: relative; margin: 6px 0; }

.bracket-round:not(:first-child) .bracket-match::before {
  position: absolute;
  top: 50%;
  left: -14px;
  width: 14px;
  border-top: 2px solid #c9d3e1;
  content: "";
}

.bracket-slots {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px -14px rgba(15, 31, 58, .5);
}

.bracket-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.bracket-slot + .bracket-slot { border-top: 1px solid var(--line); }

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

.bracket-slot.is-winner { background: #fff8d6; color: var(--navy); font-weight: 800; }
.bracket-slot.is-out { color: #9aa3b2; }
.bracket-slot.is-empty { color: #9aa3b2; font-style: italic; font-weight: 500; }
.bracket-slot.is-match { box-shadow: inset 4px 0 0 var(--blue); background: #e7f1fc; }

.bracket-tick {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

.bracket-champion-name {
  margin: 0;
  padding: 18px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe066, var(--yellow));
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12);
}

.players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.player-name { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.player-team { flex: none; color: var(--blue); font-size: 14px; font-weight: 800; }
.player.is-match { border-color: var(--blue); background: #e7f1fc; }