/* =====================================================================
   ClanWar — Tournaments (single-elimination bracket UI)
   Goes in: /cw/assets/feat-tournaments.css
   Loaded from cups.php + cup.php (a <link> right after cw_page_start()).

   Reuses the global design tokens from cw-redesign.css (--cw-bg-*,
   --cw-fg-*, --cw-accent, --cw-shadow, --cw-radius, …) and the per-cup
   accent --cw-cup-c that cup.php sets on the hero. Everything here is
   scoped under .cw-tourney so it can't leak into other pages.

   Minimal/flat: panels use one hairline border + var(--cw-shadow); no
   gradients or glows. The per-cup colour var(--cw-cup-c) is the single
   accent (winners, icons, fill); crimson is the default fallback.
   ===================================================================== */

.cw-tourney {
  /* Fall back to the brand accent when a page hasn't set a cup colour. */
  --cw-cup-c: var(--cw-accent);
}

/* ---------------------------------------------------------------------
   CUPS INDEX — section blocks + cup cards grid
   --------------------------------------------------------------------- */
.cw-cup-section { margin-bottom: 26px; }
.cw-cup-section-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding: 0 2px;
}
.cw-cup-section-h h2 {
  margin: 0; font-size: 15px; font-weight: 800;
  letter-spacing: -0.2px; color: var(--cw-fg);
}
.cw-cup-section-h .cw-cup-count {
  font-size: 12px; font-weight: 700; color: var(--cw-fg-dim);
  background: var(--cw-bg-3); border: 1px solid var(--cw-border);
  border-radius: 999px; padding: 1px 9px;
}

.cw-cup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

.cw-cup-card {
  --cw-cup-c: var(--cw-accent);
  position: relative; display: flex; flex-direction: column;
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
  padding: 16px 16px 14px;
  text-decoration: none !important; color: inherit;
  transition: border-color .16s;
  overflow: hidden;
}
.cw-cup-card:hover {
  border-color: var(--cw-border-2);
}

.cw-cup-card-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.cw-cup-card-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--cw-radius-sm);
  display: grid; place-items: center;
  background: var(--cw-bg-3);
  border: 1px solid var(--cw-border);
}
.cw-cup-card-ico .cw-ico {
  width: 22px; height: 22px;
  background-color: var(--cw-cup-c);
}
.cw-cup-card-title { min-width: 0; flex: 1; }
.cw-cup-card-title h3 {
  margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.2px;
  color: var(--cw-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-cup-card-title .cw-cup-card-sub {
  font-size: 12px; color: var(--cw-fg-2); margin-top: 2px;
}

.cw-cup-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.cw-cup-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 13px; padding-top: 12px;
  border-top: 1px solid var(--cw-border);
  font-size: 12px; color: var(--cw-fg-2);
}
.cw-cup-card-champ {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-weight: 700; color: var(--cw-fg);
}
.cw-cup-card-champ .cw-ico {
  width: 15px; height: 15px; flex: 0 0 auto;
  background-color: var(--cw-warn);
}
.cw-cup-card-champ span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Progress (teams filled) bar on open cups */
.cw-cup-fill {
  height: 5px; border-radius: 999px; margin-top: 12px;
  background: var(--cw-bg-4); overflow: hidden;
}
.cw-cup-fill > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--cw-cup-c);
}

/* ---------------------------------------------------------------------
   Shared empty state (scoped to tournaments)
   --------------------------------------------------------------------- */
.cw-cup-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 38px 20px; color: var(--cw-fg-2);
}
.cw-cup-empty .cw-ico {
  width: 34px; height: 34px; background-color: var(--cw-fg-dim);
}
.cw-cup-empty strong { color: var(--cw-fg); font-size: 15px; font-weight: 700; }
.cw-cup-empty p { margin: 0; max-width: 44ch; font-size: 13px; }

/* ---------------------------------------------------------------------
   CUP HEADER add-ons (the hero itself is themed in cw.css)
   --------------------------------------------------------------------- */
.cw-cup-champ-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; margin-bottom: 16px;
  border-radius: var(--cw-radius);
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-border);
  box-shadow: var(--cw-shadow);
}
.cw-cup-champ-banner .cw-cup-champ-ico {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--cw-radius-sm);
  display: grid; place-items: center;
  background: var(--cw-bg-3);
  border: 1px solid var(--cw-border);
}
.cw-cup-champ-banner .cw-cup-champ-ico .cw-ico {
  width: 26px; height: 26px; background-color: var(--cw-warn);
}
.cw-cup-champ-banner .cw-cup-champ-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--cw-warn);
}
.cw-cup-champ-banner .cw-cup-champ-name {
  font-size: 20px; font-weight: 900; letter-spacing: -0.3px;
  color: var(--cw-fg); margin-top: 1px;
}

/* ---------------------------------------------------------------------
   ROSTER (used in team list + matchup popovers)
   --------------------------------------------------------------------- */
.cw-roster-line {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; min-width: 0;
}
.cw-roster-line .cw-avatar {
  flex: 0 0 auto; border-radius: 5px;
  border: 1px solid var(--cw-border);
}
.cw-roster-line .cw-roster-name {
  font-size: 13px; color: var(--cw-fg); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-roster-line .cw-cap { margin-left: auto; flex: 0 0 auto; }
.cw-roster-line.is-empty .cw-roster-name { color: var(--cw-fg-dim); font-weight: 500; }

/* Team list card */
.cw-teamlist { display: grid; gap: 0; }
.cw-team-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px; align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cw-border);
}
.cw-team-row:last-child { border-bottom: none; }
.cw-team-seed {
  font-size: 13px; font-weight: 800; color: var(--cw-fg-dim);
  font-variant-numeric: tabular-nums; text-align: center;
}
.cw-team-row.is-champ .cw-team-seed { color: var(--cw-warn); }
.cw-team-main { min-width: 0; }
.cw-team-name {
  font-size: 14px; font-weight: 800; color: var(--cw-fg);
  letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cw-team-tag { color: var(--cw-cup-c); }
.cw-team-avatars { display: flex; align-items: center; margin-top: 7px; }
.cw-team-avatars .cw-avatar {
  border-radius: 50%;
  border: 2px solid var(--cw-bg-2);
  margin-left: -7px;
  background: var(--cw-bg-3);
}
.cw-team-avatars .cw-avatar:first-child { margin-left: 0; }
.cw-team-avatars .cw-team-more {
  margin-left: -7px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cw-bg-4); border: 2px solid var(--cw-bg-2);
  font-size: 10px; font-weight: 800; color: var(--cw-fg-2);
}

/* ---------------------------------------------------------------------
   THE BRACKET
   --------------------------------------------------------------------- */
.cw-bracket-scroll {
  overflow-x: auto; padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.cw-bracket {
  display: flex; gap: 0; min-width: fit-content;
  align-items: stretch;
}

.cw-bracket-round {
  display: flex; flex-direction: column;
  min-width: 232px; flex: 1 0 232px;
}
.cw-bracket-round-h {
  text-align: center; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cw-fg-2); padding-bottom: 14px;
}
.cw-bracket-round.is-final .cw-bracket-round-h {
  color: var(--cw-cup-c);
}

/* Each round is a column of evenly-spaced matchups. Spacing grows per
   round via the inline --gap we set in PHP so feeders line up with the
   next round's single node. */
.cw-bracket-col {
  display: flex; flex-direction: column;
  justify-content: space-around;
  flex: 1; gap: var(--gap, 16px);
}

/* Matchup card + the connector elbows drawn with pseudo-elements */
.cw-bout-wrap {
  position: relative; display: flex; align-items: center;
  /* leave room on the right for the connector to the next round */
  padding-right: 26px;
}
.cw-bracket-round:last-child .cw-bout-wrap { padding-right: 0; }

.cw-bout {
  position: relative; flex: 1; min-width: 0;
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  overflow: hidden;
  transition: border-color .16s;
}
.cw-bout:hover { border-color: var(--cw-border-2); }
/* Live / done bouts are signalled with a quiet border tint only — no glow. */
.cw-bout.is-live {
  border-color: color-mix(in srgb, var(--cw-accent) 45%, var(--cw-border));
}
.cw-bout.is-done {
  border-color: var(--cw-border-2);
}

.cw-bout-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 10px;
  background: var(--cw-bg-3);
  border-bottom: 1px solid var(--cw-border);
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--cw-fg-dim);
}
.cw-bout-state.is-live   { color: var(--cw-accent); }
.cw-bout-state.is-done   { color: var(--cw-good); }
.cw-bout-state.is-bye    { color: var(--cw-fg-dim); }
.cw-bout-head a { color: var(--cw-ct); font-weight: 700; }
.cw-bout-head a:hover { text-decoration: underline; }

/* One competitor line inside a matchup */
.cw-bout-side {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; min-width: 0;
  border-bottom: 1px solid var(--cw-border);
  position: relative;
}
.cw-bout-side:last-child { border-bottom: none; }

.cw-bout-side .cw-avatar {
  flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 6px; border: 1px solid var(--cw-border);
  background: var(--cw-bg-3);
}
.cw-side-id { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cw-side-name {
  font-size: 13px; font-weight: 700; color: var(--cw-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-side-name .cw-team-tag { font-weight: 800; }
.cw-side-seed {
  font-size: 10px; color: var(--cw-fg-dim); font-weight: 700;
  letter-spacing: .4px;
}
.cw-side-score {
  flex: 0 0 auto; font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--cw-fg-2);
  min-width: 18px; text-align: center;
}

/* Winner / loser states */
.cw-bout-side.is-winner {
  background: color-mix(in srgb, var(--cw-cup-c) 13%, transparent);
}
.cw-bout-side.is-winner::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cw-cup-c);
}
.cw-bout-side.is-winner .cw-side-name { color: #fff; }
.cw-bout-side.is-winner .cw-side-score { color: var(--cw-cup-c); }
.cw-bout-side.is-loser { opacity: .55; }
.cw-bout-side.is-loser .cw-side-name { font-weight: 600; }

/* TBD / BYE placeholder slot */
.cw-bout-side.is-empty .cw-side-ph {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 6px;
  border: 1px dashed var(--cw-border-2); background: var(--cw-bg-3);
}
.cw-bout-side.is-empty .cw-side-name {
  color: var(--cw-fg-dim); font-weight: 600; font-style: italic;
}

/* Admin "start" action inside a bout */
.cw-bout-act {
  padding: 7px 10px; border-top: 1px solid var(--cw-border);
  text-align: right; background: var(--cw-bg-3);
}

/* Roster reveal on hover/focus of a bout (desktop nicety) */
.cw-bout-rosters {
  display: none;
  grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--cw-border);
  background: var(--cw-bg);
}
.cw-bout:hover .cw-bout-rosters,
.cw-bout:focus-within .cw-bout-rosters { display: grid; }
.cw-bout-roster {
  padding: 8px 10px; min-width: 0;
}
.cw-bout-roster + .cw-bout-roster { border-left: 1px solid var(--cw-border); }
.cw-bout-roster .cw-bout-roster-h {
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--cw-fg-dim);
  margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-bout-roster .cw-roster-line { padding: 2px 0; }
.cw-bout-roster .cw-roster-line .cw-avatar { width: 18px; height: 18px; }
.cw-bout-roster .cw-roster-line .cw-roster-name { font-size: 11px; font-weight: 600; }

/* Connectors: a horizontal stub out of every bout, plus a vertical
   bracket joining each pair into the next round. Pure CSS, no SVG. */
.cw-bout-wrap::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 26px; height: 2px; background: var(--cw-border-2);
}
.cw-bracket-round:last-child .cw-bout-wrap::after { display: none; }

/* The vertical join is drawn on the first of each pair, reaching down to
   its sibling. We tag pairs in PHP with data-pair and use nth markers. */
.cw-bout-wrap.pair-top::before {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 2px; background: var(--cw-border-2);
  height: calc(50% + (var(--gap, 16px) / 2) + 1px);
}

/* Champion call-out at the end of the bracket */
.cw-bracket-champ {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 8px;
  min-width: 200px; padding: 0 18px;
}
.cw-bracket-champ .cw-bracket-champ-ico {
  width: 54px; height: 54px; border-radius: var(--cw-radius); display: grid;
  place-items: center;
  background: var(--cw-bg-3);
  border: 1px solid var(--cw-border);
}
.cw-bracket-champ .cw-bracket-champ-ico .cw-ico {
  width: 30px; height: 30px; background-color: var(--cw-warn);
}
.cw-bracket-champ .cw-bracket-champ-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--cw-warn);
}
.cw-bracket-champ .cw-bracket-champ-name {
  font-size: 15px; font-weight: 900; text-align: center; color: var(--cw-fg);
  letter-spacing: -0.2px;
}

/* ---------------------------------------------------------------------
   Inline form fields used on the cup page (register / roster) —
   styled here so the PHP can stay free of inline styles.
   --------------------------------------------------------------------- */
.cw-tourney .cw-inline-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cw-tourney .cw-input {
  background: var(--cw-bg-2); border: 1px solid var(--cw-border);
  color: var(--cw-fg); border-radius: var(--cw-radius-sm);
  padding: 9px 12px; font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.cw-tourney .cw-input:focus {
  outline: none; border-color: var(--cw-cup-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-cup-c) 25%, transparent);
}
.cw-tourney .cw-input.grow  { flex: 2; min-width: 220px; }
.cw-tourney .cw-input.grow1 { flex: 1; min-width: 120px; }
.cw-tourney .cw-form-hint { color: var(--cw-fg-dim); font-size: 12px; margin: 10px 0 0; }
.cw-tourney .cw-mono { font-family: var(--cw-font-mono); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cw-bracket-round { min-width: 200px; flex-basis: 200px; }
  .cw-team-row { grid-template-columns: 36px 1fr; }
  .cw-team-row .cw-team-status { grid-column: 2; justify-self: start; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-cup-card, .cw-bout, .cw-bout-side { transition: none; }
  .cw-cup-card:hover { transform: none; }
}