:root {
  --bg: #0b1020;
  --panel: #141a2e;
  --panel-2: #1b2238;
  --line: #2a3350;
  --text: #e7ecf6;
  --muted: #9aa6c2;
  --accent: #38bdf8;
  --gold: #f5c451;
  --live: #ff5d5d;
  --win: #34d399;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #16203c 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.title h1 { margin: 0; font-size: 1.3rem; }
.subtitle { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

.status { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.dot.live { background: var(--live); box-shadow: 0 0 0 0 rgba(255,93,93,.6); animation: pulse 1.6s infinite; }
.dot.ok { background: var(--win); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,93,93,.5); }
  70% { box-shadow: 0 0 0 8px rgba(255,93,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,93,93,0); }
}

.tabs { display: flex; gap: .5rem; padding: 1rem 1.5rem 0; flex-wrap: wrap; }
.tab {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  padding: .5rem .9rem; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .9rem;
}
.tab.active { background: var(--panel-2); color: var(--text); border-bottom-color: transparent; }

main { padding: 1rem 1.5rem 3rem; }
.view { display: none; }
.view.active { display: block; }
.hint { color: var(--muted); font-size: .85rem; margin-top: 0; }
code { background: #0d1226; padding: .1rem .4rem; border-radius: 4px; color: var(--gold); }

/* Groups */
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.group-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.group-card h3 { margin: 0; padding: .6rem .9rem; background: var(--panel-2); font-size: 1rem; display: flex; align-items: center; justify-content: space-between; }
.gtag { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .35rem; font-weight: 600; }
.gtag.live { color: var(--live); border-color: var(--live); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .4rem .55rem; text-align: right; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
tbody tr { border-bottom: 1px solid rgba(42,51,80,.5); }
tbody tr:last-child { border-bottom: none; }
.pos { color: var(--muted); width: 1.4rem; }
.qual-1 td.pos, .qual-2 td.pos { color: var(--win); font-weight: 700; }
.qual-3 td.pos { color: var(--gold); font-weight: 700; }
.team-name { font-weight: 600; white-space: nowrap; }
/* Truncate long names to a fixed width with an ellipsis (keeps the live badge visible). */
.tname { display: inline-block; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
.live-badge { font-size: .66rem; font-weight: 700; padding: .05rem .32rem; border-radius: 4px; margin-left: .4rem; vertical-align: middle; font-variant-numeric: tabular-nums; }
.live-badge.win { background: var(--win); color: #052012; }
.live-badge.lose { background: var(--live); color: #2a0606; }
.live-badge.draw { background: var(--muted); color: #10131f; }
.pts { font-weight: 700; }

/* Fixed column layout: every group lays out identically at any window width, and
   long names ellipsize inside the Team column instead of stretching the card /
   wrapping the W-D-L header. */
.group-card table { table-layout: fixed; }
.group-card th, .group-card td { padding: .4rem .4rem; }
.group-card thead th { white-space: nowrap; }
.group-card td.team-name { overflow: hidden; }
.group-card .tcell { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.group-card .tcell .tname { max-width: 100%; min-width: 0; }
.group-card .tcell .live-badge { margin-left: 0; flex: none; }
.group-card th:nth-child(1), .group-card td:nth-child(1) { width: 1.5rem; }  /* rank */
.group-card th:nth-child(3), .group-card td:nth-child(3) { width: 1.6rem; }  /* P */
.group-card th:nth-child(4), .group-card td:nth-child(4) { width: 3.8rem; }  /* W-D-L */
.group-card th:nth-child(5), .group-card td:nth-child(5) { width: 3rem; }    /* GF:GA */
.group-card th:nth-child(6), .group-card td:nth-child(6) { width: 2.1rem; }  /* GD */
.group-card th:nth-child(7), .group-card td:nth-child(7) { width: 2.3rem; }  /* Pts */

/* Best thirds */
#thirds table { max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.third-qualified { background: rgba(245,196,81,.08); }
.badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 6px; background: var(--gold); color: #20170a; font-weight: 700; }

/* Bracket */
.bracket { overflow-x: auto; padding-bottom: 1rem; }
.bracket-tree { display: flex; align-items: stretch; min-width: max-content; }
.round { display: flex; flex-direction: column; width: 272px; }
.round + .round { margin-left: 34px; }
.round-title {
  position: sticky; top: 0; z-index: 2;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: .4rem .1rem .6rem; background: var(--bg);
}
.round-body { flex: 1; display: flex; flex-direction: column; }
/* min-height must fit a full 2-side card so flex:1 never squashes it below that
   (otherwise the second side overflows and hides behind the next seat). */
.seat { flex: 1 1 0; display: flex; align-items: center; position: relative; min-height: 120px; }
.seat .tie { width: 100%; position: relative; }
.tie-empty { visibility: hidden; }

/* Connector lines (geometry holds for any seat height):
   feeder centers sit at 25%/75% of the downstream seat, so a vertical bar
   spanning 25%-75% bridges the pair, with stubs to each card's centre. */
.round:not(.is-final) .tie::after {              /* outgoing stub from each card */
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 17px; height: 2px; background: var(--line);
}
.round:not(.is-first) .tie::before {             /* incoming stub into each card */
  content: ""; position: absolute; right: 100%; top: 50%;
  width: 17px; height: 2px; background: var(--line);
}
.round:not(.is-first) .seat::before {            /* vertical bar joining the pair */
  content: ""; position: absolute; right: 100%; width: 17px;
  top: 25%; height: 50%; border-left: 2px solid var(--line);
}

.third-place { margin-top: 1.4rem; width: 232px; }

.tie {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem;
}
.tie .mno { color: var(--muted); font-size: .72rem; letter-spacing: .03em; }
.side { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; }
.side + .side { border-top: 1px dashed var(--line); }
.slot-team { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-label { color: var(--muted); font-size: .82rem; }
.slot-unresolved .slot-team { color: var(--muted); font-style: italic; font-weight: 500; }
.score { color: var(--text); font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: right; flex: none; }

footer { padding: 1rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

.error { color: var(--live); }