/* Tournament bracket CSS adapted from cuptree.html */
:root{
  --track: 2rem;        /* 1 grid-row = ½ card height */
  --card-w: 13rem;
  --gap-x: 4rem;        /* horizontal gap */
  --zoom: 1;           /* slider / pinch */
  --win-color: #0d6efd;     /* blue */
  --los-color: #dc3545;     /* red  */
  --match-height: 4rem; /* FIXED height for all match cards */
}

/* ───── scroll shell ───── */
.bracket-shell {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px); /* Account for header height */
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: grab;
}

.bracket-shell.grabbing {
  cursor: grabbing;
}

/* ───── zoom layer ───── */
.zoom-layer {
  position: relative;
  transform-origin: 0 0;
  transform: scale(var(--zoom));
  min-width: 100%;
  min-height: 100%;
}

/* ───── SVG overlay ───── */
#wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-width: 2px;
}

/* ───── grid + cards ───── */
.bracket {
  display: grid;
  grid-auto-flow: dense; /* Allow items to fill in gaps */
  grid-auto-columns: var(--card-w);
  grid-auto-rows: var(--track);
  column-gap: var(--gap-x);
  row-gap: 0;
  padding: 1rem;
  box-sizing: border-box;
  min-height: 100%;
  /* Ensure grid expands to accommodate all positioned items */
  position: relative;
}

.match {
  /* CRITICAL: Fixed height regardless of grid-row span */
  height: var(--match-height);
  min-height: var(--match-height);
  max-height: var(--match-height);
  
  position: relative;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .8rem;
  font: 600 .9rem/1.2 "Segoe UI", sans-serif;
  background: #0d6efd11;
  border: 2px solid var(--win-color);
  border-radius: .5rem;
  box-sizing: border-box;
  overflow: hidden; /* Prevent content from spilling out */
}

/* Grid row spans control positioning, NOT height */
.match {
  grid-row: span 2;
}

.match[data-r="0"] {
  grid-row: span 2;
}

.match[data-r="1"] {
  grid-row: span 4;
}

.match[data-r="2"] {
  grid-row: span 8;
}

.match[data-r="3"] {
  grid-row: span 16;
}

.match[data-r="4"] {
  grid-row: span 32;
}

.match-label {
  font-weight: bold;
  text-align: center;
  font-size: 0.7rem;
  margin-bottom: 0.15rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.match-players {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  flex-shrink: 1;
}

.player-slot {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.player-slot:not(:disabled):hover {
  background: #f0f8ff;
  border-color: var(--win-color);
  cursor: pointer;
}

.player-slot:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f8f9fa;
}

.vs-text {
  font-size: 0.65rem;
  color: #666;
  font-weight: normal;
  line-height: 1;
}

.source-labels {
  font-size: 0.6rem;
  color: #999;
  margin-top: 0.15rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.match-winner {
  font-size: 0.7rem;
  color: #28a745;
  margin-top: 0.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

@media(max-width: 600px) {
  :root {
    --track: 1.4rem;
    --card-w: 9rem;
    --gap-x: 2rem;
    --match-height: 3.5rem;
  }
  
  .match-label {
    font-size: 0.65rem;
  }
  
  .player-slot {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
  }
}

/* ───── zoom slider (desktop helper) ───── */
.zoom-ui {
  position: fixed;
  top: .5rem;
  right: .5rem;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: .3rem;
  box-shadow: 0 2px 6px rgb(0 0 0/.1);
  font: 14px/1 sans-serif;
  padding: .25rem .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.zoom-ui input {
  width: 7rem;
}

.zoom-ui span {
  min-width: 3ch;
  text-align: right;
}