/* Tournament brackets (rendered by wppw_web.bracket_html), shared by the site and /admin.
   Each round is a column of equal-height cells, so a match sits level with the
   midpoint of the two it is fed by. Connectors are drawn by the cells: a stub out
   of every match, a half-height bar joining each pair, a stub into the next match.
   Logical properties (inline-start/end) let the right half of a two-sided bracket
   be the left half mirrored with direction: rtl. */
.bracket { --bk-line: #b6a679; --bk-gap: 12px; font-size: 11.5px; color: #2b2620; }
.bk-scroll { overflow-x: auto; padding-bottom: 6px; }
.bk-tree { display: flex; align-items: stretch; width: max-content; min-width: 100%; justify-content: center; }
.bk-half, .bk-final { display: flex; align-items: stretch; }
.bk-right { direction: rtl; }
.bk-round { display: flex; flex-direction: column; }
.bk-rh { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6b6048; padding: 0 0 6px; direction: ltr; }
.bk-col { flex: 1; display: flex; flex-direction: column; }
.bk-cell { flex: 1; display: flex; align-items: center; position: relative; padding-block: 5px;
  padding-inline: var(--bk-gap); }

.bk-match { position: relative; direction: ltr; width: 158px; background: #fbf6e6; border: 2px solid #c2b487;
  box-shadow: 2px 2px 0 rgba(0,0,0,.08); }
.bk-final .bk-match { border-color: #c9a23a; box-shadow: 0 0 0 2px #e8d48f; }

/* out of a match, and the bar joining each pair */
.bk-out .bk-cell::after { content: ''; position: absolute; inset-inline-end: 0; top: 50%;
  width: var(--bk-gap); border-top: 2px solid var(--bk-line); }
.bk-out .bk-cell:not(:only-child)::before { content: ''; position: absolute; inset-inline-end: 0;
  border-inline-end: 2px solid var(--bk-line); }
.bk-out .bk-cell:nth-child(odd):not(:only-child)::before { top: 50%; bottom: 0; }
.bk-out .bk-cell:nth-child(even)::before { top: 0; bottom: 50%; }
/* into a match (both sides of a two-sided final) */
.bk-in .bk-match::before, .bk-two .bk-final .bk-match::after { content: ''; position: absolute; top: 50%;
  width: var(--bk-gap); border-top: 2px solid var(--bk-line); }
.bk-in .bk-match::before { inset-inline-start: calc(-1 * var(--bk-gap) - 2px); }
.bk-right .bk-in .bk-match::before { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--bk-gap) - 2px); }
.bk-two .bk-final .bk-match::after { inset-inline-end: calc(-1 * var(--bk-gap) - 2px); }

.bk-side { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 3px 7px;
  border-top: 1px solid #e4d8b6; }
.bk-side:first-child { border-top: 0; }
.bk-ph { display: flex; flex: none; min-width: 28px; }
.bk-ph img { width: 28px; height: 28px; object-fit: cover; object-position: top; background: #e4d8b6;
  border: 1px solid #c2b487; }
.bk-ph img + img { margin-left: -12px; }
.bk-nm { flex: 1; min-width: 0; font-weight: 600; line-height: 1.15; }
.bk-nm a { color: inherit; text-decoration: none; }
.bk-nm a:hover { text-decoration: underline; }
.bk-won { background: #f1e3b5; }
.bk-won .bk-nm::after { content: ' \2714'; color: #6e7d4e; }
.bk-lost { opacity: .5; }
.bk-tbd .bk-ph { height: 28px; background: #ece2c8; border: 1px dashed #c2b487; }
.bk-tbd .bk-nm { color: #9a8e70; font-style: italic; font-weight: 400; }
.bk-foot { display: flex; justify-content: space-between; gap: 6px; padding: 2px 7px; font-size: 10px;
  background: #e4d8b6; color: #6b6048; }
.bk-foot a { color: inherit; }
.bk-champ { margin: 0 0 10px; padding: 6px 10px; background: #f1e3b5; border: 2px solid #c9a23a;
  font-size: 13px; text-align: center; }