/* Palette taken from the event poster: cream ground, vermilion display serif, warm grey
   supporting text. The display face is Fraunces rather than the poster's didone - a didone's
   hairlines vanish at UI sizes, and this page has a lot of small type. Deliberately
   single-theme: it's a printed-poster look, not an OS-following UI. */
:root {
  --cream: #e9dcc6;       /* page ground - toned down from the poster's brightest cream */
  --cream-2: #e2d3b9;     /* panels */
  --paper: #f3ebdd;       /* tiles - still the lightest surface, just not glaring */
  --raised: #d5c4a6;      /* hover / meter track */
  --ink: #3a352f;         /* primary text - deeper than the poster grey, for weight */
  --ink-soft: #6f685c;    /* secondary text */
  --ink-faint: #938a79;   /* captions, kickers */
  --vermilion: #cf3f19;   /* the poster's hero color, a shade deeper so small type holds */
  --hair: rgba(58, 53, 47, 0.2);

  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 22px 64px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--vermilion);
  padding-bottom: 16px;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin: 0 0 8px;
}

h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.02;
  margin: 0;
  color: var(--vermilion);
  text-wrap: balance;
}

.masthead .sub { color: var(--ink-soft); font-size: 0.85rem; font-weight: 500; margin: 0; max-width: 42ch; }

/* ---------- standings ---------- */
.standings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.standing {
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-left: 5px solid var(--team);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.standing .rank {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-faint);
}

.standing .who { min-width: 0; }

.standing .name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--team);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standing .detail { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); margin-top: 3px; }

.standing .score {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}

/* ---------- team tabs ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.tab {
  flex: 1 1 190px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--ink-soft);
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 700;
  font-size: 0.91rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tab:hover { background: var(--raised); }
.tab:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

.tab .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--team); flex: none; }

.tab .tab-score {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--ink-faint);
}

.tab[aria-selected="true"] {
  background: var(--team);
  border-color: var(--team);
  color: var(--cream);
}
.tab[aria-selected="true"] .dot { background: var(--cream); }
.tab[aria-selected="true"] .tab-score { color: var(--cream); opacity: 0.85; }

/* ---------- board panel ---------- */
.board-panel {
  background: var(--cream-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.board-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  color: var(--board-team, var(--ink));
}

.board-sub { font-size: 0.79rem; font-weight: 500; color: var(--ink-soft); margin: 5px 0 0; }

.meter { display: flex; align-items: center; gap: 10px; }
.meter-bar { width: 170px; height: 7px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.meter-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--board-team, var(--vermilion));
  transition: width 260ms ease;
}
.meter-text { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 0.77rem; color: var(--ink-soft); }

.board-scroll { overflow-x: auto; }
.board { display: grid; gap: 6px; min-width: 760px; }

/* ---------- tiles ---------- */
.tile {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 9px;
  padding: 9px 10px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.tile .kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tile .name { font-size: 0.8rem; font-weight: 700; line-height: 1.28; }

.tile .foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.63rem;
  color: var(--ink-faint);
}

.count { font-weight: 600; color: var(--ink-soft); }

/* the outer ring reads as its own class of tile */
.tile.outer { border-color: var(--vermilion); }
.tile.outer .kicker { color: var(--vermilion); }

/* an X/Y tile fills left-to-right as the count climbs - the progress IS the fill,
   so it needs no extra color of its own */
.tile.progressing .count { color: var(--team); }

/* nobody has picked this tile's content yet */
.tile.awaiting {
  border-style: dashed;
  border-color: var(--ink-faint);
  background: transparent;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tile.awaiting .name { color: var(--ink-soft); font-weight: 500; font-style: italic; }
.tile.awaiting .theme {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vermilion);
}

/* done - the tile inverts into the team's color, like the poster's type on cream */
.tile.done { background: var(--team); border-color: var(--team); }
.tile.done .name { color: var(--cream); }
.tile.done .kicker,
.tile.done .foot,
.tile.done .count { color: var(--cream); opacity: 0.82; }

.tile .check {
  position: absolute;
  top: 7px;
  right: 9px;
  font-size: 0.72rem;
  color: var(--cream);
}

/* ---------- legend ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.legend span { display: flex; align-items: center; gap: 7px; }
.key {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--hair);
  background: var(--paper);
  flex: none;
}
.key.done { background: var(--team, var(--vermilion)); border-color: var(--team, var(--vermilion)); }
.key.progressing { background: linear-gradient(to right, var(--team, var(--vermilion)) 50%, var(--paper) 50%); }
.key.awaiting { border-style: dashed; border-color: var(--ink-faint); background: transparent; }
.key.outer { border-color: var(--vermilion); }
.legend .rule { color: var(--ink-faint); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 620px) {
  .page { padding: 26px 14px 48px; }
  .board-head { align-items: flex-start; }
}

/* Roster, folded away under the board. Players open it to confirm their RSN is registered. */
.roster {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.roster summary {
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.roster summary:hover { color: var(--team); }
.roster-count { text-transform: none; letter-spacing: 0.02em; }
.roster-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.roster-names .rsn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.setup-link {
  margin: 16px 2px 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.setup-link a {
  color: var(--vermilion);
  font-weight: 600;
  text-decoration: none;
  margin-right: 6px;
}
.setup-link a:hover { text-decoration: underline; }

/* Pre-reveal countdown. body.locked hides everything the board would otherwise show. */
.countdown { display: none; }
body.locked .countdown {
  display: block;
  text-align: center;
  padding: 52px 20px 58px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 18px;
}
body.locked .standings,
body.locked .tabs,
body.locked .board-panel { display: none; }
.count-kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--vermilion);
}
.count-clock {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(2.4rem, 9vw, 4.4rem);
  font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink); margin: 10px 0 4px;
}
.count-when { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 18px; }
.count-note { max-width: 460px; margin: 0 auto; color: var(--ink-soft); font-size: 0.9rem; }
.count-note a { color: var(--vermilion); font-weight: 600; }