:root {
  --red: #fa1624;
  --red-ink: #fd8b92;
  --black: #000000;
  --white: #fbf7f5;
  --ink: var(--white);
  --paper: #2c2c2c;
  --card: #3a3a3a;
  --raised: #404040;
  --muted: #c8c6c4;
  --accent: var(--red);
  --line: #9a9896;
  color: var(--ink);
  background: var(--paper);
  color-scheme: dark;
  font-family: "Segoe UI", "Avenir Next", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
nav a, .brand, .club, .bug, .tick, .signin, .skip { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
#app:focus { outline: none; }
.skip {
  position: absolute; left: 16px; top: 12px; z-index: 20;
  background: var(--white); color: var(--black); padding: 8px 12px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

#shell { margin: 0; padding: 0 24px 64px; min-width: 0; max-width: 100%; }
#top {
  display: flex; align-items: center; gap: 18px;
  margin: 0 -24px; padding: 14px 24px;
  background: var(--card); color: var(--white);
  border-bottom: 2px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.mark { width: 64px; height: 64px; display: block; object-fit: contain; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.brand strong { font-size: 20px; }
nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
nav a { color: var(--white); padding: 4px 0; border-bottom: 3px solid transparent; }
nav a.active, nav a:hover { border-bottom-color: var(--red-ink); }
.who { display: flex; align-items: center; gap: 8px; color: var(--white); }
.who a { color: var(--white); }
.who img { width: 28px; height: 28px; object-fit: cover; }
.role { background: var(--red); color: var(--black); padding: 2px 6px; font-size: 12px; font-weight: 700; }
.signin, button.solid {
  border: 0; background: var(--red); color: var(--black);
  padding: 8px 12px; cursor: pointer; font-weight: 700;
}
button.ghost { background: transparent; color: var(--white); border: 2px solid var(--white); padding: 8px 12px; cursor: pointer; min-width: 2.75rem; }
#top button.ghost { color: var(--white); border-color: var(--white); }
button.danger { background: transparent; color: var(--red-ink); border: 2px solid var(--red-ink); padding: 8px 12px; cursor: pointer; }
button.ghost.on { background: var(--white); color: var(--black); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.score-wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  margin: 0 -24px; background: #242424; border-bottom: 2px solid var(--line);
}
.score-wrap button {
  width: 40px; border: 0; background: transparent; color: var(--white);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.score-wrap:not(.can-scroll) button { visibility: hidden; }
#scoreboard {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#scoreboard::-webkit-scrollbar { display: none; }
.tick {
  flex: 0 0 176px; scroll-snap-align: start;
  display: grid; gap: 3px; padding: 8px 12px;
  border-right: 1px solid var(--line); color: var(--white);
}
.tick:hover { background: var(--raised); }
.tick-status { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tick-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; }
.tick-row b { font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.tick-row.loser { color: var(--muted); font-weight: 500; }
.tick-empty { margin: 0; padding: 12px 4px; color: var(--muted); }
#banner { margin-top: 0; }
#banner:empty { display: none; }
#banner p {
  margin: 0 -24px; padding: 10px 24px;
  background: var(--red); color: var(--black);
}

.hero { padding: 20px 0 8px; min-width: 0; }
.hero > * { min-width: 0; }
.kicker { margin: 0 0 8px; color: var(--red-ink); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
h1 { font-size: 56px; line-height: 0.95; margin: 0 0 12px; }
.lede { font-size: 18px; max-width: 36em; margin-top: 0; }
.pathway, .points { max-width: 40em; color: var(--muted); }
.points { color: var(--white); }

.bug {
  display: grid; gap: 8px; text-decoration: none;
  background: var(--card); color: var(--white); padding: 16px;
  border: 2px solid var(--line); border-top: 3px solid var(--red-ink);
}
.bug-team { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.bug b { font-size: 36px; line-height: 1; color: var(--red-ink); }
.swatch { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }
.bug-meta { color: var(--muted); font-size: 13px; }

.grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; }
.grid > * { min-width: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card, .panel, .club, .table-wrap, form.stack {
  background: var(--card); border: 2px solid var(--line);
}
.card, .panel, .club, form.stack { padding: 14px; }
.card h3, .panel h3 { margin: 0 0 8px; }
.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 24px 0 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 40px; margin: 0; }
.identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portrait { width: 64px; height: 64px; object-fit: cover; flex: none; }
h2 { font-size: 22px; margin: 22px 0 8px; }
.muted, .note { color: var(--muted); }
.clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.club { display: block; }
.club:hover { background: var(--raised); }
.club .record { font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; }
table.sheet { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; background: var(--card); }
table.sheet th, table.sheet td { padding: 8px; border-bottom: 1px solid var(--raised); text-align: right; white-space: nowrap; }
table.sheet th:first-child, table.sheet td:first-child,
table.sheet th.left, table.sheet td.left { text-align: left; }
table.sheet th {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
  color: var(--white); background: var(--raised); cursor: pointer; position: sticky; top: 0;
}
table.sheet tr:hover td { background: var(--raised); }
table.sheet a:hover { text-decoration: underline; }
table.sheet td strong { color: var(--red-ink); }
table.sheet th button {
  display: block; width: 100%; min-height: 24px;
  border: 0; background: transparent; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  padding: 0; cursor: pointer;
}
.pos { font-size: 12px; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 12px; }
.filters [role="group"] { display: flex; flex-wrap: wrap; gap: 8px; }
.filters label { display: grid; gap: 4px; color: var(--muted); font-size: 14px; font-weight: 700; }
.filters input, .filters select, form.stack input, form.stack select, form.stack textarea, .row-form input {
  border: 2px solid var(--line); background: var(--card); color: var(--white); padding: 7px 8px;
}
::placeholder { color: var(--muted); }
form.stack { display: grid; gap: 8px; max-width: 520px; }
form.stack label { display: grid; gap: 4px; font-size: 14px; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.leaders ol { margin: 0; padding-left: 1.2em; }
.leaders li { margin: 4px 0; }
.error { color: var(--red-ink); }
.wait { padding: 24px 0; color: var(--muted); }
pre.schema { background: var(--card); color: var(--white); padding: 12px; overflow: auto; font-size: 12px; border: 2px solid var(--line); }
code { background: var(--raised); padding: 1px 4px; }
#foot { margin-top: 36px; padding-top: 12px; border-top: 2px solid var(--line); color: var(--muted); font-size: 14px; }
.danger-zone { border: 2px solid var(--red); padding: 12px; margin-top: 22px; }
.staff { list-style: none; padding: 0; }
.staff li { margin: 6px 0; }
.staff .role { margin-right: 6px; }
.clock { border: 2px solid var(--red); background: var(--black); color: var(--white); padding: 12px 16px; margin: 0 0 16px; }
.clock b { color: var(--red-ink); }
.draft-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 18px; }
.draft-row, .offer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.draft-row .taken { color: var(--muted); text-decoration: line-through; }
.offer { display: block; }
.pick-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pick-checks label { display: flex; gap: 6px; align-items: center; }

@media (max-width: 1099px) {
  .hero, .grid, .grid-3, .split, .draft-grid { grid-template-columns: 1fr; }
  h1 { font-size: 36px; }
  .page-head h1 { font-size: 32px; }
  #top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .brand { min-width: 0; }
  .brand strong { font-size: 18px; }
  .brand small { overflow-wrap: anywhere; }
  nav { grid-column: 1 / -1; margin: 0; padding-top: 8px; }
  .signin, .who { grid-column: 2; grid-row: 1; margin: 0; }
  body { overflow-x: hidden; }
}