:root {
  --bg0:#0c1117; --bg1:#141a24; --bg2:#1c2330;
  --line:#283244;
  --ink:#e9eef5;
  --ink-dim:#9aa6b8;
  --accent:#ff7a1a;
  --accent2:#3ec1ff;
  --good:#2ecc71;
  --bad:#ff4d6a;
  --warn:#ffd43b;
  --gold:#ff7a1a;
  --shadow: 0 10px 28px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 400px at 50% -120px, rgba(255,122,26,.12) 0%, transparent 70%),
    linear-gradient(180deg, #0a0e14 0%, #0c1117 50%, #0a0e14 100%);
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 60px;
}

header.top { text-align:center; padding: 28px 14px 12px; position: relative; z-index: 2; }
.brand { display:inline-flex; align-items:baseline; gap: 14px; }
.brand .mark {
  font-family: "Anton", sans-serif;
  font-size: clamp(34px, 5.5vw, 60px);
  letter-spacing: .04em;
  color: var(--accent);
  line-height: 1;
}
h1 {
  font-family: "Anton", sans-serif;
  font-size: clamp(34px, 5.5vw, 60px);
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}
.subtitle {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.subtitle .dot { color: var(--accent); }
.accent-bar { width: 56px; height: 3px; background: var(--accent); margin: 18px auto 0; border-radius: 2px; }

.scoreboard {
  margin: 20px auto 18px;
  max-width: 1100px;
  background: #0a0f1a;
  color: #ffd84d;
  border: 4px solid #2a3447;
  border-radius: 14px;
  padding: 12px 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  display:flex; flex-wrap:wrap; gap: 14px 28px; justify-content: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 0 2px #000;
  position: relative; z-index: 2;
}
.scoreboard .label { color:#6ee1ff; font-size:10px; }
.scoreboard .val { font-size: 18px; font-weight: 700; }
.scoreboard .row { display:flex; flex-direction:column; align-items:center; line-height:1.1; }

nav.tabs {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto 18px; padding: 0 14px;
  display:flex; flex-wrap:wrap; gap: 8px; justify-content:center;
}
.tab {
  font-family: "Anton", sans-serif; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 16px; cursor:pointer; text-decoration:none; display:inline-block;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover { background: #232c3d; border-color: #3a4761; }
.tab.active { background: var(--accent); color: #0c1117; border-color: var(--accent); }
.tab.back { background: #2a3245; }
@media (max-width: 700px) {
  nav.tabs { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
  .tab { font-size: 11.5px; padding: 9px 6px; text-align:center; }
}

main { position: relative; z-index: 2; max-width: 1450px; margin: 0 auto; padding: 0 14px; }
.panel {
  background: var(--bg1);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.panel.grand {
  background: linear-gradient(180deg, var(--bg1) 0%, #16202e 100%);
  border-left: 3px solid var(--accent);
}
.panel h2 {
  font-family: "Anton", sans-serif;
  color: var(--ink);
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: .5px;
}
.panel .sub {
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: "JetBrains Mono", monospace;
}

/* ---------- Seeds list (above the tree) ---------- */
.seeds {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.seed-row {
  display:flex; align-items:center; gap:10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
}
.seed-row .num {
  font-family: "Anton", sans-serif;
  font-size: 18px;
  color: var(--accent);
  width: 26px; text-align:center;
}
.seed-row.eliminated .num { color: var(--ink-dim); }
.seed-row .nm { font-weight: 700; color: var(--ink); font-size: 14px; }
.seed-row.eliminated .nm { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(255,77,106,.6); }
.seed-row .rec { margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; color: var(--ink-dim); }
.seed-row .tag { font-size: 10px; font-family: "JetBrains Mono", monospace; color: var(--ink-dim); letter-spacing:.08em; }
.seed-row.eliminated .tag { color: var(--bad); }
.seed-row.alive .tag { color: var(--good); }

/* ---------- Bracket tree (absolute positioning, softball-standings approach) ---------- */

/* Outer scrollable wrapper — bracket has fixed pixel dimensions. */
.bracket-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  background: var(--bg2);
}
.bracket-wrap::-webkit-scrollbar { height: 10px; }
.bracket-wrap::-webkit-scrollbar-track { background: var(--bg0); }
.bracket-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

/* The actual bracket canvas. JS sets width + height via inline style. */
.bracket-tree {
  position: relative;
  margin: 0 auto;
  /* WB/LB section banding is rendered as a layered linear-gradient by JS so
     it adapts to whatever LB top offset the bracket needs. */
}

/* Section labels (WINNER'S BRACKET / LOSER'S BRACKET pills) */
.bsection-label {
  position: absolute;
  font-family: "Anton", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 14px;
  z-index: 3;
}
.bsection-label.wb { background: var(--accent); color: #0c1117; }
.bsection-label.lb { background: var(--accent2); color: #0c1117; }

/* Column headers (PLAY-IN, QF, SF, WB FINAL, LB R1...) */
.bcol-header {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 8px;
  background: var(--bg0);
  color: var(--ink);
  border-radius: 4px;
  text-align: center;
  z-index: 2;
  white-space: nowrap;
  border: 1px solid var(--line);
}
.bcol-header.wbh { border-color: rgba(255,122,26,.5); }
.bcol-header.lbh { border-color: rgba(62,193,255,.5); color: var(--accent2); }
.bcol-header.gfh {
  background: var(--accent);
  color: #0c1117;
  border-color: var(--accent);
}
.bcol-header.ifnh {
  background: transparent;
  color: var(--bad);
  border: 1px dashed var(--bad);
}

/* Trophy box — far right of double-elim layout, name etched into the cup */
.trophy-box {
  position: absolute;
  width: 240px;
  text-align: center;
  filter: drop-shadow(0 6px 16px rgba(184,134,11,.45));
  z-index: 4;
}
.trophy-svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.trophy-box.decided .trophy-svg { animation: trophy-float 4s ease-in-out infinite; }
@keyframes trophy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.trophy-caption {
  margin-top: -6px;
  font-family: "Anton", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink);
}
.trophy-caption .ch-rec  { color: var(--accent); font-weight: 700; }
.trophy-caption .ch-tbd  { color: var(--ink-dim); font-style: italic; }

/* Game card */
.abs-matchup {
  position: absolute;
  background: #fffaf0;
  border: 1px solid #e9d5ad;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  overflow: visible;
}
/* LB cards get a pinker tint */
.abs-matchup.lb-card { background: #fff0f3; border-color: #e9b9c1; }
/* Championship card — gold trim */
.abs-matchup.gf-style {
  border: 2px solid #b8860b;
  background: linear-gradient(180deg, #fff8e0 0%, #fff 100%);
  box-shadow: 0 6px 16px rgba(184,134,11,.32);
}
/* If-necessary card — dashed red */
.abs-matchup.ifn-style {
  border: 2px dashed var(--bad);
  background: repeating-linear-gradient(135deg, #fffafa 0, #fffafa 8px, #fff 8px, #fff 16px);
}
/* Played / today indicators */
.abs-matchup.played { box-shadow: 0 0 0 2px var(--good), 0 4px 10px rgba(0,0,0,.35); }
.abs-matchup.today  { box-shadow: 0 0 0 2px var(--accent), 0 4px 10px rgba(0,0,0,.35); }

.abs-gid {
  position: absolute; top: -9px; left: 8px;
  background: #1c1f3a;
  color: #ffd84d;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
  z-index: 5;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.gf-style .abs-gid { background: #b8860b; color:#fff; }
.ifn-style .abs-gid { background: var(--bad); color:#fff; }

/* Slot rows inside a card */
.br-slot {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px dashed #e9d5ad;
}
.lb-card .br-slot { border-bottom-color: #e9b9c1; }
.gf-style .br-slot { border-bottom-color: rgba(184,134,11,.3); }
.ifn-style .br-slot { border-bottom-color: rgba(255,77,106,.3); }
.br-slot:last-of-type { border-bottom: none; }
.br-slot .sd {
  width: 22px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 700;
  background: #1c1f3a; color: #fff;
}
.br-slot.top-seed .sd { background: #ffd84d; color: #1c1f3a; }
.br-slot.tbd { background: rgba(0,0,0,.03); }
.br-slot.tbd .sd { background: #d8dde6; color:#8a93a3; }
.br-slot.tbd .tm { color:#8a93a3; font-style: italic; font-weight: 500; }
.lb-card .br-slot.tbd { background: rgba(255,77,106,.04); }
.lb-card .br-slot.tbd .sd { background: #e9c0c8; color:#9a6770; }
.lb-card .br-slot.tbd .tm { color:#9a6770; }
.br-slot.lbl { background: rgba(255,77,106,.06); }
.br-slot.lbl .sd { background: var(--bad); color:#fff; font-size: 12px; }
.br-slot.lbl .tm { color: #7a0e1e; font-weight: 700; font-style: italic; }
.br-slot .tm {
  font-weight: 700; color: #1a1f2e; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-slot .rec {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 700; color: #5b6675;
  white-space: nowrap;
}
.br-slot.winner .tm, .br-slot.winner .rec { color: #1a6b34; }
.br-slot.winner .sd { background: var(--good); color:#fff; }
.br-slot.loser .tm, .br-slot.loser .rec { color:#8a93a3; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }
.br-slot.loser .sd { opacity: .6; }
.br-slot .score {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 800;
  margin-left: 4px; min-width: 22px; text-align: right;
  color: #1a1f2e;
}
.br-slot.winner .score { color: #0a4318; }
.br-slot.loser  .score { color: #6b7380; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }

.abs-vs {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #8a93a3;
  padding: 1px 0;
  letter-spacing: .1em;
}

.abs-foot {
  display:flex; justify-content: space-between; align-items:center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  padding: 4px 10px 6px;
  color: #5b6675;
  border-top: 1px dotted #e9d5ad;
  letter-spacing: .04em;
  gap: 6px;
}
.lb-card .abs-foot { border-top-color: #e9b9c1; }
.gf-style .abs-foot { border-top-color: rgba(184,134,11,.3); }
.ifn-style .abs-foot { border-top-color: rgba(255,77,106,.3); }
.abs-foot .when { color:#1a1f2e; font-weight: 700; }
.abs-foot .where { color:#5b6675; }

footer { text-align:center; color: var(--ink-dim); font-size: 12px; margin-top: 30px; padding: 0 14px; }
footer a { color: var(--accent2); }