/* stage.lafter.gg — the bracket builder. */

.stageWrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; }

.stageTop {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.stageTop h1 { margin: 0; font-family: 'Caveat', cursive; font-size: 2rem; color: var(--heading); }

.stageSize { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: var(--text-muted); }
.stageSize input {
    width: 72px; padding: 6px 10px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: inherit; font-size: 0.8rem;
}
.stageSize input:focus { outline: none; border-color: var(--gold-dim); }
.stageSize button {
    padding: 6px 14px;
    background: transparent; border: 1px solid var(--gold-dim); border-radius: 999px;
    color: var(--gold); font-family: inherit; font-size: 0.76rem; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.stageSize button:hover { background: rgba(201,168,76,0.12); border-color: var(--gold); }

.stageSummary { margin: 0 0 22px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-muted); }
.stageSummary strong { color: var(--gold); font-weight: 600; }
.stageNote { margin-top: 22px; font-size: 0.76rem; color: var(--text-muted); line-height: 1.6; }
.stageNote code { font-family: 'JetBrains Mono', monospace; color: var(--gold-dim); }

/* ===== The bracket =====

   Rounds are columns and every column is half as tall as the one before, so
   each match sits between the two it is fed by. That is done with flex
   space-around rather than absolute positioning: the browser already knows
   how to space n things evenly in a column, and the alternative is computing
   pixel offsets that go wrong the moment a name wraps. */
.bracketScroll {
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.bracket { display: flex; gap: 26px; align-items: stretch; min-width: min-content; }
.bracketRound {
    display: flex; flex-direction: column;
    min-width: 190px;
}
.roundName {
    flex: none;
    margin: 0 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold);
}
/* The matches take the rest of the column and space themselves down it, so
   each one sits between the two that feed it. Taking the heading out of flow
   to pin it was the wrong fix -- it then landed in the middle of the bracket,
   on top of a match. */
.roundSeries {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-around;
    gap: 10px;
}

.series {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.slot {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    color: var(--text);
}
.slot + .slot { border-top: 1px solid var(--border); }
.seed {
    flex: none; width: 20px; text-align: right;
    font-size: 0.68rem; font-weight: 600; color: var(--gold);
}
.who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A slot nobody has reached yet says what it is waiting for, quietly. */
.slot.isEmpty .who { color: var(--text-muted); font-size: 0.68rem; font-style: italic; }

/* A walkover is not a match. Drawn as one it invites somebody to schedule it. */
.series.isBye { border-style: dashed; opacity: 0.75; }
.byeTag {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}