/* ============================================================
   ladd.au — Finals Bracket (layout pass v1)
   Reuses tokens/reset/header/logo styles from style.css.
   ============================================================ */

.finals-subheader {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

/* Line/divider colour used across the finals page. --border is tuned for
   dark mode (subtle on near-black) but nearly disappears against the
   light palette's beige background, so light mode uses full --text-primary
   contrast instead. */
:root { --fx-line: #383838; }
[data-theme="light"] { --fx-line: var(--text-primary); }

/* --- Bracket view (line-connected diagram, not a table) --- */
/* Desktop: the tree diagram. Mobile (≤768px, see bottom of file): a plain
   chronological list instead — the tree just doesn't fit a narrow screen. */
#bracket-view { padding: 18px 12px 60px; }

/* Desktop-only vertical centering (mobile has its own, on #mobile-bracket
   below, tuned separately — don't merge these). Scoped to min-width so it
   never applies while #mobile-bracket's rule is also active. */
@media (min-width: 769px) {
  #bracket-view {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-h, 130px));
  }
}

#mobile-bracket { display: none; }

.bracket-scroll {
  max-width: 100%;
  width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 0 8px;
}

.bracket-stage {
  position: relative;
}

.bracket-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.bracket-lines path {
  fill: none;
  stroke: var(--fx-line);
  stroke-width: 1;
}
/* Bye lines keep a dashed pattern (the visual "skips a round" cue) but
   take their colour from the round-* classes below, same as every other
   line — colour is now assigned per round, not per decided/undecided
   status. */
.bracket-lines path.bye {
  stroke-dasharray: 4 4;
  opacity: 0.85;
}
/* Light mode: the dashes were asked to go a tiny bit darker specifically
   (not the solid lines) — opacity nudged up just slightly from the base
   0.85, since less background shows through at higher opacity. */
[data-theme="light"] .bracket-lines path.bye {
  opacity: 0.92;
}
.bracket-lines path.round-pink { stroke: var(--tier-pink); }
.bracket-lines path.round-green { stroke: var(--tier-green); }
.bracket-lines path.round-blue { stroke: var(--tier-blue); }
.bracket-lines path.round-orange { stroke: var(--tier-orange); }
.bracket-lines path.round-yellow { stroke: var(--tier-yellow); }

/* Light mode: colour keeps bisecting between the last two rejected
   bounds rather than guessing a new arbitrary point each time: --fx-line/
   --text-secondary too dark, plain --border too light, the 50/50 mix of
   those two still too dark — so now 75% --border / 25% --text-secondary,
   the midpoint between --border and the previous (too dark) 50/50 mix.
   Width is no longer overridden here — both themes now share the base
   rule's width of 1 above. Higher specificity than the round-* rules
   above so it still wins on colour for both the "not yet played" default
   line and every neutralised round colour (see the round-colour
   neutralisation further down). */
[data-theme="light"] .bracket-lines path {
  stroke: color-mix(in srgb, var(--border) 75%, var(--text-secondary) 25%);
}

.match-node {
  position: absolute;
  display: block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.match-node:disabled { cursor: default; }

.mn-inner {
  background: var(--row-bg);
  border-radius: 5px;
  overflow: hidden;
  transition: background 0.12s;
}
.match-node:not(:disabled):hover .mn-inner { background: var(--row-hover); }

.mn-team {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 6px;
  font-size: 11.5px;
}
.mn-team + .mn-team { border-top: 1px solid var(--fx-line); }

.mn-logo {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mn-logo img { width: 100%; height: 100%; object-fit: contain; }
.mn-logo.tbd-slot {
  border: 1.5px dashed var(--text-secondary);
  border-radius: 50%;
  opacity: 0.5;
}

.mn-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-name.tbd { color: var(--text-secondary); font-style: italic; }
.mn-name.loser { color: var(--text-secondary); }

.mn-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 16px;
  text-align: right;
  color: var(--text-secondary);
}
.mn-trophy { margin-left: 1px; font-size: 9px; }

.mn-tag {
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.mn-tag .live { color: var(--tier-red); }
/* Light mode: the new .live-dot-badge carries the "this is live" red
   cue now, so the text itself can just read normally instead of also
   competing for attention in red. Dark mode keeps its red text. */
[data-theme="light"] .mn-tag .live { color: var(--text-secondary); }
.mn-round { font-weight: 700; }
/* Each colour is also paired with .mn-score/.mv-score explicitly so it
   wins on specificity regardless of stylesheet order — a bare single
   class here happened to lose to .mv-score's own colour rule, which is
   declared later in this file (equal specificity, last-declared wins),
   silently overriding the winning score's colour back to grey on mobile
   while desktop's .mn-score (declared earlier) was unaffected. */
.mn-round-pink,
.mn-score.mn-round-pink,
.mv-score.mn-round-pink { color: var(--tier-pink); }
.mn-round-green,
.mn-score.mn-round-green,
.mv-score.mn-round-green { color: var(--tier-green); }
.mn-round-orange,
.mn-score.mn-round-orange,
.mv-score.mn-round-orange { color: var(--tier-orange); }
.mn-round-blue,
.mn-score.mn-round-blue,
.mv-score.mn-round-blue { color: var(--tier-blue); }
.mn-round-red { color: var(--tier-red); }
.mn-round-yellow,
.mn-score.mn-round-yellow,
.mv-score.mn-round-yellow { color: var(--tier-yellow); }

/* Light mode: the round colours (pink/green/blue/orange/yellow) don't
   read well against the light palette — neutralised here the same way
   the main ladder page already neutralises its own tier colours (see
   style.css's [data-theme="light"] block). Red is left alone everywhere
   below — it's the live-game status colour, not a decorative round
   colour, same distinction the main page already draws. */
[data-theme="light"] .bracket-lines path.round-pink,
[data-theme="light"] .bracket-lines path.round-green,
[data-theme="light"] .bracket-lines path.round-blue,
[data-theme="light"] .bracket-lines path.round-orange,
[data-theme="light"] .bracket-lines path.round-yellow {
  stroke: color-mix(in srgb, var(--border) 75%, var(--text-secondary) 25%);
}
[data-theme="light"] .mn-round-pink,
[data-theme="light"] .mn-score.mn-round-pink,
[data-theme="light"] .mv-score.mn-round-pink,
[data-theme="light"] .mn-round-green,
[data-theme="light"] .mn-score.mn-round-green,
[data-theme="light"] .mv-score.mn-round-green,
[data-theme="light"] .mn-round-orange,
[data-theme="light"] .mn-score.mn-round-orange,
[data-theme="light"] .mv-score.mn-round-orange,
[data-theme="light"] .mn-round-blue,
[data-theme="light"] .mn-score.mn-round-blue,
[data-theme="light"] .mv-score.mn-round-blue,
[data-theme="light"] .mn-round-yellow,
[data-theme="light"] .mn-score.mn-round-yellow,
[data-theme="light"] .mv-score.mn-round-yellow {
  color: var(--text-secondary);
}
[data-theme="light"] .status-pill.final {
  background: var(--row-hover);
  color: var(--text-primary);
}
[data-theme="light"] .status-pill.scheduled {
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="light"] .gd-score.win {
  color: var(--text-primary);
}

/* --- Game detail view --- */
/* Same centering approach as #mobile-bracket below: flex both axes,
   min-height accounts for the header so the card centres in the
   remaining viewport rather than the full page. */
#game-view {
  padding: 24px 16px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-h, 130px));
}

.game-wrap { max-width: 480px; margin: 0 auto; width: 100%; }

.game-card {
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 18px 18px;
  transform-origin: center top;
  animation: game-card-in 0.18s ease-out;
  cursor: pointer;
  transition: background 0.12s;
}
.game-card:hover,
.game-card:focus-visible {
  background: var(--row-hover);
  outline: none;
}
@keyframes game-card-in {
  from { opacity: 0; transform: perspective(600px) rotateX(-12deg) scale(0.97); }
  to { opacity: 1; transform: perspective(600px) rotateX(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .game-card { animation: none; }
}

.game-head { text-align: center; margin-bottom: 16px; }
.game-round { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.game-venue { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 10px;
}
.status-pill.final { background: rgba(77, 216, 138, 0.15); color: var(--tier-green); }
.status-pill.scheduled { border: 1px solid var(--tier-blue); color: var(--tier-blue); }
.status-pill.tbd { color: var(--text-secondary); border: 1px solid var(--border); }
.status-pill.live { background: var(--tier-red); color: #fff; }

.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Small red dot, both themes — the only live cue on the bracket now (the
   pulsing card border was removed on request; both themes relied on it,
   both now rely on the dot alone). Reuses .live-dot's own pulse
   animation. Desktop: inline, sitting right before the "LIVE" text in
   .mn-tag. Mobile: no text to sit before (icon-only cards), so it's a
   corner badge on the card itself — needs .mv-node's own
   position: absolute (already set) to anchor correctly. */
.live-dot-inline {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tier-red);
  margin-right: 3px;
  vertical-align: middle;
  box-shadow: 0 0 4px 1px var(--tier-red);
  animation: live-pulse 2s ease-in-out infinite;
}
.live-dot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tier-red);
  box-shadow: 0 0 5px 1px var(--tier-red);
  animation: live-pulse 2s ease-in-out infinite;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 2px 4px;
}
.gd-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gd-logo { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.gd-logo img { width: 100%; height: 100%; object-fit: contain; }
.gd-logo.tbd-slot { border: 2px dashed var(--text-secondary); border-radius: 50%; opacity: 0.5; }

.gd-name { font-size: 12px; font-weight: 700; text-align: center; max-width: 110px; }
.gd-name.tbd { color: var(--text-secondary); font-style: italic; font-weight: 400; }
.gd-score { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-score.win { color: var(--tier-green); }
.gd-gb {
  display: block;
  margin-top: -3px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.vs-mid { text-align: center; color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.gd-trophy {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

.detail-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .mn-team { font-size: 11px; }
}

/* --- Mobile bracket: the desktop tree rotated 90° — rounds run as
   COLUMNS left-to-right (Wildcard → Grand Final) instead of rows
   bottom-to-top, so the whole diagram is only ~262px wide and needs no
   horizontal scroll. Icon-only nodes (no team name) are what make that
   width possible. Every position/line here is the exact numeric transpose
   of desktop's already-verified linePath() geometry (X and Y roles
   swapped) — re-verified for this specific layout in Python: zero line
   crosses any node's box, and the two bye lanes are exactly mirror-
   symmetric about vertical centre (97/127, ±15 either side of 112). */
.mv-stage {
  position: relative;
  margin: 0 auto;
}

.mv-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.mv-node {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.mv-node:disabled { opacity: 0.55; cursor: default; }

.mv-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  padding: 0 5px;
}
.mv-team + .mv-team { border-top: 1px solid var(--fx-line); }

.mv-logo {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-logo img { width: 100%; height: 100%; object-fit: contain; }
.mv-logo.tbd-slot {
  border: 1.5px dashed var(--text-secondary);
  border-radius: 50%;
  opacity: 0.5;
}

.mv-score {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.mv-tbd { font-size: 10px; font-style: italic; color: var(--text-secondary); }

@media (max-width: 768px) {
  .bracket-scroll { display: none; }
  /* Flex-centres the whole bracket as one block, both axes at once,
     rather than margin/text-align tricks on a block child — "centered"
     meant the entire diagram as a unit, not just horizontal alignment
     inside its wrapper. min-height accounts for the header above it so
     the bracket centres in the remaining viewport, not the full page. */
  #mobile-bracket {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-h, 130px));
    padding: 6px 10px 50px;
    overflow-x: auto;
  }
}