:root {
  --bg: #0d0f12;
  --surface: #14171c;
  --text: #e6e9ee;
  --muted: #8a919c;
  --line: #262b33;
  --in: #e6e9ee;
  --in-accent: #46b878;
  --out: #ff5c5c;
  --elim: #2e3238;      /* greyed nearly to black */
  --live: #ffb02e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 1.5rem 1rem 3rem;
  max-width: 1100px;
  margin-inline: auto;
}

header h1 { margin: 0 0 .25rem; font-size: 1.4rem; letter-spacing: .01em; }
.sub { color: var(--muted); margin: 0 0 1.25rem; font-size: .85rem; }

.legend { display: block; margin-top: .3rem; }
.key { margin-right: .9rem; white-space: nowrap; }
.key::before { content: "■ "; font-size: .7em; vertical-align: middle; }
.key-in::before { color: var(--in-accent); }
.key-out::before { color: var(--out); }
.key-elim::before { color: var(--elim); }
.key .dot { margin-right: .25rem; }
.key:has(.dot)::before { content: ""; }

#tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem;
}

h2 { margin: 0 0 .6rem; font-size: 1.05rem; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .32rem .4rem; }
th {
  text-align: left; color: var(--muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}
.num { text-align: right; width: 2.2rem; }
td.num { font-variant-numeric: tabular-nums; }
.team { text-align: left; width: auto; }
td.team { display: flex; align-items: center; gap: .5rem; min-height: 26px; }
td.team img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.team-lines { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.name { white-space: nowrap; }
td.num { white-space: nowrap; }
.pts { font-weight: 650; }
.max, tr .max { color: var(--muted); }
.prov { color: var(--live); margin-right: .1rem; }

.lock {
  font-size: .6rem; margin-right: .25rem; vertical-align: middle;
  filter: grayscale(1); opacity: .55;
}
tr.eliminated .lock { opacity: .25; }
.key-lock::before { content: ""; }
.key-lock { filter: grayscale(1); }

/* status colors */
tr.in td.team .name { color: var(--in); }
tr.in td.num:first-child { color: var(--in-accent); font-weight: 650; }
tr.out td { color: var(--out); }
tr.out td.max { color: color-mix(in srgb, var(--out) 55%, var(--bg)); }
tr.eliminated td { color: var(--elim); }
tr.eliminated img { opacity: .18; }

tr.expandable { cursor: pointer; }
tr.expandable:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }

.scenario-panel td { padding: 0 .4rem .5rem 2.6rem; }
.scenario-box {
  border-left: 2px solid var(--line);
  padding: .35rem 0 .35rem .7rem;
  font-size: .78rem;
}
.s-head { color: var(--muted); margin-bottom: .3rem; }
.s-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .12rem 0; }
.s-label { min-width: 8.5rem; color: var(--text); }
.s-pts { color: var(--muted); font-variant-numeric: tabular-nums; }
.s-result { font-weight: 700; letter-spacing: .05em; font-size: .68rem; }
.s-result.in { color: var(--in-accent); }
.s-result.out { color: var(--muted); }
.s-result.depends { color: var(--live); }
.s-detail { color: var(--muted); flex-basis: 100%; padding-left: 1rem; }
tr.eliminated + tr.scenario-panel .scenario-box { opacity: .7; }

.divider td { padding: .15rem .4rem; }
.divider span {
  display: block; text-align: center;
  color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  border-top: 1px dashed var(--muted);
  margin-top: .35rem; padding-top: .15rem;
}

.live-note {
  color: var(--live); font-size: .78rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
tr.eliminated .live-note { color: color-mix(in srgb, var(--live) 40%, var(--bg)); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

/* Narrow screens: stack the live score under the team name so every row's
   stat columns stay on a single line. */
@media (max-width: 640px) {
  body { padding: 1rem .5rem 2rem; }
  section { padding: .75rem .5rem .9rem; }
  th, td { padding: .32rem .3rem; }
  .team-lines { flex-direction: column; align-items: flex-start; gap: 0; }
  .live-note { font-size: .7rem; }
  .scenario-panel td { padding-left: 1rem; }
  .s-label { min-width: 7rem; }
}

footer { margin-top: 1.5rem; color: var(--muted); font-size: .8rem; }
footer p { margin: .2rem 0; }
.loading { color: var(--muted); }