/* Tournament page (/tournament/): the livery home's world (liveries.css + home.css: header, photograph band,
   pills, open sections) plus what a tournament needs: the facts row, the entrant table and the bracket.
   Colour only where it means something: red = live, orange = called to the start, gold = the champion.
   Sentence case throughout: no uppercase tracked labels (DESIGN.md). */

/* Kept to the dark left side of the photograph, off the cars. */
.tn-facts { display: flex; flex-wrap: wrap; gap: 14px 0; max-width: 860px; margin-top: 28px; border-top: 1px solid var(--hair); padding-top: 16px; }
.tn-facts .tn-dot { color: var(--ink-3); }
.tn-facts > span { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--hair); }
.tn-facts > span:last-child { border-right: 0; }
.tn-facts strong { display: block; color: var(--ink); font: 600 16px/1.3 var(--font-sans); }
.tn-facts small { display: block; margin-top: 4px; color: var(--ink-3); font: 500 13px/1.3 var(--font-sans); }
.tn-sub { margin-top: 10px; }

.tn-name { margin-top: 26px; max-width: 520px; }
.tn-name label { display: block; margin-bottom: 8px; color: var(--ink); font: 600 14px/1.3 var(--font-sans); }
.tn-name-row { display: flex; gap: 12px; }
.tn-name-row input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; color: var(--ink); font: 500 16px/1.3 var(--font-sans); border: 1px solid var(--hair); }

/* ── Entrants / qualifying ─────────────────────────────────────────────────────────────────── */

.tn-table { margin-top: 28px; border-top: 1px solid var(--hair); }
.tn-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 120px 90px; align-items: center; gap: 16px; padding: 12px; border-bottom: 1px solid var(--hair); font: 500 15px/1.4 var(--font-sans); }
.tn-row-head { color: var(--ink-3); font: 500 13px/1.3 var(--font-sans); }
.tn-row .tn-pos { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.tn-row .tn-time { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.tn-row .tn-time.tn-none { color: var(--ink-3); }
.tn-row .tn-status { text-align: right; color: var(--ink-3); font-size: 13px; }
.tn-row a { color: var(--ink); text-decoration: none; }
.tn-row a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tn-row.tn-me { background: rgba(243, 245, 248, .05); }
.tn-row.tn-out { opacity: .5; }
.tn-empty { padding: 28px 12px; color: var(--ink-3); }

/* ── Bracket: columns of rounds, match cards placed by slot, elbow connectors ──────────────── */

.tn-bracket-scroll { margin-top: 28px; overflow-x: auto; padding-bottom: 12px; }
.tn-bracket { position: relative; }
.tn-round-title { position: absolute; top: 0; color: var(--ink-2); font: 600 14px/1.3 var(--font-sans); }
.tn-match { position: absolute; width: 236px; border: 1px solid var(--hair); border-radius: 8px; background: rgba(243, 245, 248, .03); }
.tn-match.tn-live { border-color: #ff5a64; }
.tn-match.tn-called { border-color: #e69919; }
.tn-match-no { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); padding: 3px 2px; background: var(--night); color: var(--ink-3); font: 700 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.tn-side { display: grid; grid-template-columns: 22px minmax(0, 1fr) 24px; align-items: center; gap: 6px; height: 30px; padding: 0 10px; color: var(--ink); font: 600 14px/1.2 var(--font-sans); }
.tn-side + .tn-side { border-top: 1px solid var(--hair); }
.tn-side .tn-seed { color: var(--ink-3); font: 700 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.tn-side .tn-who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tn-side .tn-who a { color: inherit; text-decoration: none; }
.tn-side .tn-who a:hover { text-decoration: underline; }
.tn-side .tn-wins { text-align: right; font-variant-numeric: tabular-nums; }
/* The winner reads at a glance: a lit row, the loser dimmed; the final's winner in gold. */
.tn-side.tn-lost { color: var(--ink-3); font-weight: 400; }
.tn-side.tn-lost .tn-seed { opacity: .6; }
.tn-side.tn-won { font-weight: 800; background: rgba(243, 245, 248, .1); }
.tn-side.tn-champ { color: #e6cc1a; background: rgba(230, 204, 26, .1); }
.tn-match-no + .tn-side { border-radius: 7px 7px 0 0; }
.tn-side:last-child { border-radius: 0 0 7px 7px; }
.tn-side.tn-tbd { color: var(--ink-3); font-weight: 500; font-style: italic; }
.tn-line { position: absolute; background: var(--hair); }
.tn-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-2); font: 600 12px/1.3 var(--font-sans); vertical-align: 1px; }

.tn-podium { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 0; margin-top: 22px; }
.tn-place { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--hair); }
.tn-place:last-child { border-right: 0; }
.tn-place strong { display: block; color: var(--ink); font: 700 22px/1.2 var(--font-sans); }
.tn-place strong a { color: inherit; text-decoration: none; }
.tn-place strong a:hover { text-decoration: underline; text-underline-offset: 5px; }
.tn-place small { display: block; margin-top: 6px; color: var(--ink-3); font: 500 14px/1.3 var(--font-sans); }
.tn-place .tn-dot { color: var(--ink-3); }
.tn-place.tn-first strong { color: #e6cc1a; font: 800 clamp(34px, 5vw, 48px)/1.05 var(--font-sans); letter-spacing: -.01em; }
.tn-place.tn-first small { color: var(--ink-2); }
.tn-champion { margin-top: 18px; color: #e6cc1a; font: 700 18px/1.3 var(--font-sans); }
.lv-btn.tn-armed { border-color: rgba(255, 51, 64, .7); background: rgba(255, 51, 64, .16); }

/* ── Replays: every battle, latest match first ─────────────────────────────────────────────── */

.tn-replays { margin-top: 28px; border-top: 1px solid var(--hair); }
.tn-rep-match { padding: 14px 12px; border-bottom: 1px solid var(--hair); }
.tn-rep-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 6px; }
.tn-rep-head strong { color: var(--ink); font: 700 15px/1.4 var(--font-sans); }
.tn-rep-head span { color: var(--ink-2); font: 500 15px/1.4 var(--font-sans); }
.tn-rep-battle { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 36px; font: 500 14px/1.4 var(--font-sans); color: var(--ink-2); }
.tn-rep-name { color: var(--ink-3); }
.tn-rep-who { min-width: 0; }
.tn-rep-note { margin-left: 10px; color: var(--ink-3); font-size: 13px; }
.tn-rep-note.tn-rep-review { color: #e69919; }
.tn-rep-void .tn-rep-who { color: var(--ink-3); text-decoration: line-through; }
.tn-rep-void .tn-rep-note { text-decoration: none; }
.tn-rep-dl { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink); font: 600 13px/1 var(--font-sans); text-decoration: none; }
.tn-rep-dl:hover { background: rgba(243, 245, 248, .06); }
.tn-rep-none { color: var(--ink-3); font-size: 13px; }

/* ── Your next step (hero) and How it works: the step the tournament is at, lit ───────────── */

.tn-next { max-width: 640px; margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(230, 153, 25, .45); border-radius: 8px; background: rgba(230, 153, 25, .08); color: var(--ink); font: 500 16px/1.5 var(--font-sans); }
.tn-next strong { color: #e69919; font-weight: 700; }

.tn-steps { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.tn-steps > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 22px 16px; border-bottom: 1px solid var(--hair); }
.tn-step-n { color: var(--ink-3); font: 700 22px/1.3 var(--font-sans); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.tn-steps h3 { margin: 0; color: var(--ink); font: 700 19px/1.3 var(--font-sans); font-stretch: 105%; }
.tn-step-when { margin-left: 10px; color: var(--ink-3); font: 500 14px/1.3 var(--font-sans); font-stretch: 100%; }
.tn-steps p { max-width: 70ch; margin: 8px 0 0; color: var(--ink-2); font: 400 15px/1.55 var(--font-sans); }
.tn-do { max-width: 70ch; margin: 10px 0 0; padding-left: 18px; color: var(--ink); font: 500 15px/1.55 var(--font-sans); }
.tn-do li + li { margin-top: 4px; }
.tn-do a { color: inherit; text-underline-offset: 3px; }
.tn-steps > li.tn-step-done { opacity: .55; }
.tn-steps > li.tn-step-now { background: rgba(230, 153, 25, .06); }
.tn-steps > li.tn-step-now .tn-step-n { color: #e69919; }
.tn-steps > li.tn-step-now h3::after { content: 'Now'; display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid #e69919; color: #e69919; font: 600 12px/1.3 var(--font-sans); vertical-align: 2px; }

/* ── Past tournaments ──────────────────────────────────────────────────────────────────────── */

.tn-past { margin-top: 28px; border-top: 1px solid var(--hair); }
.tn-past a { display: grid; grid-template-columns: minmax(0, 1fr) 200px 140px; gap: 16px; padding: 14px 12px; border-bottom: 1px solid var(--hair); color: var(--ink-2); text-decoration: none; font: 500 15px/1.4 var(--font-sans); }
.tn-past a:hover { color: var(--ink); background: rgba(243, 245, 248, .03); }
.tn-past a b { color: var(--ink); }

@media (max-width: 760px) {
  .tn-rep-battle { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .tn-rep-note { display: block; margin-left: 0; }
  .tn-facts > span { padding-right: 18px; margin-right: 18px; }
  .tn-place { padding-right: 18px; margin-right: 18px; }
  .tn-place.tn-first { flex-basis: 100%; border-right: 0; }
  .tn-row { grid-template-columns: 36px minmax(0, 1fr) 96px; }
  .tn-row .tn-status { display: none; }
  .tn-past a { grid-template-columns: minmax(0, 1fr) 110px; }
  .tn-past a span:last-child { display: none; }
  .tn-name-row { flex-direction: column; }
  .tn-steps > li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 18px 12px; }
  .tn-step-when { display: block; margin: 4px 0 0; }
}