/* EWC 2026 CS2 Playoff Pickem
   Tokens lifted from cs2skin.com computed styles, not eyeballed.
   Font: Chakra Petch. Ground: #060b15. Accent: #7d2efa, used only for state. */

:root {
  /* Surfaces, darkest to lightest */
  --bg: #060b15;
  --bg-raised: #0c111c;
  --panel: #121925;
  --panel-2: #171e2f;
  --panel-3: #222d3b;

  /* Lines */
  --line: #222d3b;
  --line-soft: #171e2f;
  --line-strong: #252e3a;

  /* Text */
  --text: #ededed;
  --text-dim: #9dabbd;
  --text-sub: #7f8d9f;
  --text-mute: #49525d;
  --white: #fff;

  /* Accent. One colour, ours, state only. */
  --accent: #7d2efa;
  --accent-hi: #9658fb;
  --accent-lo: #6b25d6;
  --accent-bg: #1a0933;
  --accent-bg-2: #2d1554;

  /* State */
  --good: #15d77c;
  --good-lo: #0e8f52;
  --good-bg: #063d23;
  --bad: #ed4438;
  --bad-lo: #be372d;
  --bad-bg: #2f0e0b;
  --warn: #f8a605;
  --warn-bg: #322101;

  /* Spacing, their 4px scale */
  --s-50: 2px;
  --s-100: 4px;
  --s-150: 6px;
  --s-200: 8px;
  --s-300: 12px;
  --s-400: 16px;
  --s-600: 24px;
  --s-800: 32px;
  --s-1200: 48px;
  --s-1600: 64px;

  /* Radius */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 10px;
  --r-pill: 100px;

  --header-h: 60px;
  --font: "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  /* Nothing on this site is wide enough to justify sideways movement. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 1.1; }
h2 { font-size: 19px; line-height: 1.2; }
h3 { font-size: 15px; line-height: 1.25; }

p { margin: 0 0 var(--s-300); color: var(--text-dim); }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-400);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(6, 11, 21, 0.92);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-400);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
  text-decoration: none;
}

/* The real cs2skin mark, the same animated file the main site uses. Sized by
   height so the video and the poster still frame land identically. */
.wordmark-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}
@media (min-width: 900px) {
  .wordmark-logo { height: 32px; }
}

/* Nobody needs a spinning logo when they have asked the system to calm down. */
@media (prefers-reduced-motion: reduce) {
  .wordmark-logo { animation: none; }
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-100);
}

.site-nav a {
  padding: var(--s-200) var(--s-300);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--white); }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--s-1600);
  padding: var(--s-800) 0 var(--s-1200);
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--s-600);
}

.footer-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-300) var(--s-600);
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-links a {
  font-size: 14px;
  color: var(--text-sub);
  text-decoration: none;
}
.footer-links a:hover { color: var(--text); }

.footer-legal {
  margin: var(--s-600) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 60ch;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-200);
  padding: var(--s-300) var(--s-600);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: var(--panel-3);
  color: var(--text);
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}

.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); }
.btn-primary:active:not(:disabled) { background: var(--accent-lo); }

.btn-quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-dim);
}
.btn-quiet:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }

.btn:disabled {
  background: var(--panel-2);
  color: var(--text-mute);
  border-color: var(--line);
  cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn:focus-visible,
.field input:focus-visible,
.team:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* ---------- Page furniture ---------- */

.page-head {
  padding: var(--s-800) 0 var(--s-600);
}

/* ---------- Deposit bonus promo ---------- */

/* The promo is last in the markup, which is the order a phone gets: heading
   first, advert after. Grid placement is what lifts it into a second column
   level with the heading on a wide screen, without moving it in the source. */
@media (min-width: 900px) {
  .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-1200);
  }
  .page-head > *:not(.promo) { grid-column: 1; }
  /* Row 2 is the h1. Sitting it there is what puts the banner on the same
     line as the heading rather than level with the kicker above it. */
  .promo { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
}

/* Colours, radius and the gold gradient are the live values from the
   DepositBonusBanner on cs2skin.com/deposit, read off the computed styles
   rather than matched by eye. */
.promo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-300);
  width: 100%;
  max-width: 520px;
  min-height: 100px;
  /* Room above for the coins, which are drawn past the top edge. */
  margin-top: 40px;
  padding: 14px var(--s-600);
  border-radius: 12px;
  background: radial-gradient(285px 185px, #5f36a1 0%, #4b2a81 50%, #371d61 100%);
  text-decoration: none;
  /* visible, not hidden. The illustration breaking out of the panel is the
     whole look, and clipping it was what made this read as a flat bar. */
  overflow: visible;
  transition: filter 120ms linear;
}
.promo:hover { filter: brightness(1.08); }

.promo-copy { display: grid; gap: 3px; min-width: 0; }

.promo-title {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.1;
  color: #e6d5ff;
  white-space: nowrap;
}

.promo-cap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 300;
  color: #e6d5ff;
}
.promo-cap img { display: block; width: 16px; height: 16px; }

/* The gold on the site is a gradient clipped to the glyphs, not a flat fill,
   which is why these carry no colour of their own. */
.promo b {
  font-weight: 700;
  background: linear-gradient(#ffda5d 22.62%, #f88705 76.19%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-title b { font-size: 23px; }
.promo-cap b { font-size: 14px; }

/* Holds a narrow slot in the flex row while the images inside are drawn far
   larger and centred on it, so they overlap the copy and the code tile
   instead of pushing them apart. */
.promo-illo {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 124px;
}

.promo-illo img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* The lift behind the coins. A gradient rather than the second illustration
   cs2skin ships, which is a whole duplicate coin and would draw everything
   twice. Sits under the artwork and never catches a click. */
.promo-illo::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 230px;
  height: 130px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.55), rgba(168, 85, 247, 0) 100%);
  pointer-events: none;
}

/* Tall enough to clear the top edge. The podium keeps its feet inside the
   panel, as on the real banner, and only the coin rises above it: letting the
   base hang below made the panel look like it was sliding off the artwork. */
.promo-coin {
  width: 158px;
  height: auto;
  bottom: 6px;
}

/* Narrow screens run the banner full width, where there is no room for the
   illustration between the copy and the code. The offer and the code are the
   message, so the decoration is what goes. */
@media (max-width: 560px) {
  .promo { min-height: 0; margin-top: var(--s-600); padding: 14px var(--s-400); }
  .promo-illo { display: none; }
}

/* Where the countdown sits on the real banner. Same weight, so the promo code
   is the thing the eye lands on after the offer itself. */
.promo-code {
  flex: none;
  margin-left: auto;
  padding: 5px 11px 4px;
  border-radius: 8px;
  background: linear-gradient(#ffda5d, #f8a005);
  text-align: center;
  line-height: 1;
}
/* Label above, code below, so it reads "code: PROMO". The other way round
   the eye takes the big word first and it reads "PROMO code", which is the
   two words in the wrong order. */
.promo-code span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b3fa8;
}
.promo-code b {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Overrides the gradient fill above: on the gold tile the code has to be
     dark to be readable. */
  background: none;
  color: #35195e;
}
.page-head .kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 var(--s-200);
}
.page-head .lede {
  margin: var(--s-300) 0 0;
  color: var(--text-dim);
  max-width: 56ch;
}
.page-head .lock-line { margin: var(--s-300) 0 0; }

/* Sits above the bracket so it is read before anyone starts picking, but
   styled down so it does not shout. The accent is a 2px edge, not a fill.
   Only the requirement itself is on screen. The reasoning and the get out
   clause live behind the trigger. */
.requirement {
  position: relative;
  display: inline-block;
  margin: var(--s-400) 0 0;
  padding: var(--s-300) var(--s-400);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  /* One line, never wrapped. Scales with the viewport so it still fits on a
     narrow phone rather than pushing the page sideways. */
  white-space: nowrap;
  font-size: clamp(11px, 3.3vw, 13.5px);
  line-height: 1.5;
  color: var(--text);
  cursor: help;
}
.requirement:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.requirement-main { font-weight: 600; }

.requirement-detail {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  z-index: 20;
  /* The note itself is nowrap, the panel under it is not. */
  white-space: normal;
  width: max-content;
  max-width: min(400px, calc(100vw - 44px));
  padding: var(--s-300) var(--s-400);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* Hover on a mouse. Focus covers keyboard, and also a tap on a phone, since
   tapping a focusable element focuses it. There is no visible trigger, so
   with a mouse this is discoverable by hovering and nothing else. */
.requirement:hover .requirement-detail,
.requirement:focus .requirement-detail,
.requirement:focus-within .requirement-detail { display: block; }

/* Top prizes, sat under the heading. Three pills rather than a table: it is
   an advert for the pot, not the payout reference, which is on /rules. */
.prize-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-200);
  margin: var(--s-400) 0 0;
  padding: 0;
  list-style: none;
}
.prize-strip li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-150);
  padding: var(--s-150) var(--s-300);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.prize-strip .place {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.prize-strip .coin { width: 18px; height: 18px; object-fit: contain; }
.prize-strip .amount { font-weight: 700; color: var(--white); }
/* First place is the one worth looking at, so it gets the accent edge. */
.prize-strip li:first-child { border-color: var(--accent); background: var(--accent-bg); }
.prize-strip li:first-child .place { color: var(--accent-hi); }

/* Stacked banners need air between them. */
.notice + .notice { margin-top: var(--s-300); }
#state-holding, #state-locked, #state-done, #state-dupe, #state-error { margin-top: var(--s-600); }

.notice {
  padding: var(--s-400);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-mute);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--panel);
  font-size: 14px;
  color: var(--text-dim);
}
.notice strong { color: var(--text); font-weight: 600; }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice-bad { border-left-color: var(--bad); background: var(--bad-bg); color: #f6c9c5; }
.notice-good { border-left-color: var(--good); background: var(--good-bg); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- Bracket ---------- */

.bracket-shell { position: relative; }

.bracket-conn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.bracket-conn path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.bracket-conn path.live { stroke: var(--accent-lo); }

.bracket {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-800);
}

.round-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-200);
  margin-bottom: var(--s-300);
}
.round-head h2 { font-size: 15px; }
.round-head .meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
}

.round-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
}

.match {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.match.is-locked { opacity: 0.5; }
.match.is-done { border-color: var(--line-strong); }

.team {
  display: flex;
  align-items: center;
  gap: var(--s-300);
  width: 100%;
  padding: var(--s-300) var(--s-400);
  background: none;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  min-height: 52px;
  transition: background 100ms linear, color 100ms linear;
}
.team + .team { border-top: 1px solid var(--line-soft); }
.team:hover:not(:disabled):not(.is-picked) { background: var(--panel-2); color: var(--text); }

.team:disabled { cursor: default; }
.team.is-empty { color: var(--text-mute); font-weight: 500; }

/* The two teams that can still reach an unfilled slot, sat beside the label
   that names them. Faint on purpose, and never as loud as a real pick: this
   row is saying what might arrive, not what has.
   The box keeps its 28px so the names stay on the same left edge as every
   filled row down the column. Two crests at 13px with a 2px gap is exactly
   that, which is why they are that size. */
.team.is-empty .team-logo.is-pair {
  display: flex;
  gap: 2px;
  opacity: .4;
}
.team.is-empty .team-logo.is-pair img { max-width: 13px; max-height: 13px; }
.team.is-empty .team-logo.is-pair .mono {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  font-size: 6px;
}

.team.is-picked {
  background: var(--accent-bg);
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--accent);
}
.team.is-correct {
  background: var(--good-bg);
  color: var(--white);
  box-shadow: inset 3px 0 0 var(--good);
}
.team.is-wrong {
  background: var(--bad-bg);
  color: var(--text-dim);
  box-shadow: inset 3px 0 0 var(--bad);
}

.team-logo {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
/* Optical sizing, not bounding box sizing. Wordmarks get more width than
   roundels do, and neither is allowed to fill the whole box. */
.team-logo img {
  max-width: 28px;
  max-height: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.team-logo .mono {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  background: var(--bg-raised);
}

.team-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-mark {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}
.team.is-picked .team-mark { color: var(--accent-hi); }
.team.is-correct .team-mark { color: var(--good); }
.team.is-wrong .team-mark { color: var(--bad); }

/* ---------- Form ---------- */

.entry-form {
  margin-top: var(--s-800);
  padding: var(--s-600);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.field { margin-bottom: var(--s-400); }
.field label {
  display: block;
  margin-bottom: var(--s-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.field input {
  width: 100%;
  padding: var(--s-300) var(--s-400);
  min-height: 46px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-weight: 500;
}
.field input::placeholder { color: var(--text-mute); font-weight: 400; }
.field input:focus { border-color: var(--accent); outline: none; }
.field .hint {
  margin: var(--s-200) 0 0;
  font-size: 12px;
  color: var(--text-mute);
}
.field .hint.is-bad { color: var(--bad); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-300);
  margin-bottom: var(--s-400);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- Confirmation ---------- */

.confirm { text-align: left; }
.confirm-card {
  padding: var(--s-600);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-400);
  flex-wrap: wrap;
  margin-bottom: var(--s-600);
}
.confirm-head h2 { min-width: 0; word-break: break-word; }

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
  margin-top: var(--s-600);
}
.share-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 675;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
}

/* ---------- Leaderboard ---------- */

.lb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-600);
  padding: var(--s-400) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lb-stat .n {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}
.lb-stat .k {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
}

/* ---------- Leaderboard, while it is still loading ----------

   The standings are one database call, and that call has been measured at
   about a second on a good day and eleven on a bad one. At that length a
   static line of text does not read as waiting, it reads as a page that has
   finished and had nothing to say, which is the thing being fixed here.
   Both pieces below are only about the wait. Nothing here survives the data
   arriving. */

.lb-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -1px;
  border: 2px solid var(--line-strong);
  /* One lit segment on a dim ring. Enough to read as motion at 13px without
     turning into a decorative object. */
  border-top-color: var(--accent-hi);
  border-radius: 50%;
  animation: lb-spin 0.7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* Placeholders in the shape of the numbers that replace them, so the stats
   row holds its height and nothing below it jumps when the data lands. */
.lb-stats[data-loading] .n {
  display: flex;
  align-items: center;
  height: 26px;
}
.lb-stats[data-loading] .n::after {
  content: "";
  display: block;
  width: 42px;
  height: 17px;
  border-radius: 2px;
  background: var(--panel-3);
  animation: lb-pulse 1.5s ease-in-out infinite;
}
@keyframes lb-pulse { 50% { opacity: 0.35; } }

/* Somebody who has asked the system to stop moving things still has to be
   able to tell a page that is working from one that is done, so this fades
   rather than stopping dead. */
@media (prefers-reduced-motion: reduce) {
  .lb-spinner {
    border-color: var(--line-strong);
    border-top-color: var(--accent-hi);
    animation: lb-pulse 1.8s ease-in-out infinite;
  }
  .lb-stats[data-loading] .n::after { animation-duration: 2.4s; }
}

.lb-search { margin: var(--s-600) 0; }

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lb-table th {
  padding: var(--s-200) var(--s-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.lb-table th.num, .lb-table td.num { text-align: right; }
.lb-table td {
  padding: var(--s-300);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.lb-table td.rank { width: 52px; color: var(--text-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-table td.name { color: var(--text); font-weight: 600; word-break: break-all; }
.lb-table td.pts { width: 60px; color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-table th.prize, .lb-table td.prize { text-align: right; }
.lb-table td.prize {
  width: 112px;
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Coin and amount travel together, so the pair wraps as one unit. */
.lb-table td.prize .payout {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--s-100);
}
.lb-table td.prize .coin { width: 18px; height: 18px; object-fit: contain; }
.lb-table tr.is-me td { background: var(--accent-bg); }
.lb-table tr.is-me td.rank { color: var(--accent-hi); }

/* ---------- Picks panel ---------- */

/* A row opens the bracket behind it. The name is a real button so the panel
   is reachable by keyboard, and the whole row is clickable for everyone
   else, which is what people actually try first. */
.lb-table tbody tr { cursor: pointer; }
.lb-table tbody tr:hover td { background: var(--panel); }
.lb-table tbody tr.is-me:hover td { background: var(--accent-bg-2); }

.lb-name {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lb-name:hover, .lb-table tbody tr:hover .lb-name { text-decoration: underline; }
.lb-name:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.picks {
  width: min(920px, calc(100vw - var(--s-600)));
  max-height: calc(100vh - var(--s-800));
  padding: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}
.picks::backdrop { background: rgba(6, 11, 21, 0.78); }

.picks-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-400);
  padding: var(--s-600);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.picks-rank {
  margin: 0 0 var(--s-100);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.picks-who h2 { font-size: 20px; word-break: break-all; }

.picks-close {
  flex: none;
  padding: var(--s-200) var(--s-300);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}
.picks-close:hover { background: var(--panel-2); color: var(--text); }

.picks-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-200);
  padding: var(--s-400) var(--s-600) 0;
}
.picks-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-150);
  padding: var(--s-150) var(--s-300);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.picks-chip b { color: var(--white); font-variant-numeric: tabular-nums; }
.picks-chip.is-total { border-color: var(--accent); background: var(--accent-bg); }
.picks-chip.is-total b { color: var(--accent-hi); }

/* Four rounds side by side, one column each, so the shape reads like the
   bracket on the entry page rather than a flat list of fifteen names. */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-400);
  padding: var(--s-600);
}
.picks-col h3 {
  margin-bottom: var(--s-200);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.picks-col .round-body { gap: var(--s-200); }

/* One row per match: the team they picked, and whether it came in. Reuses
   the entry page's team styles so right and wrong look the same in both. */
.picks-pick {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  padding: var(--s-200) var(--s-300);
  min-height: 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.picks-pick.is-correct {
  background: var(--good-bg);
  color: var(--white);
  border-color: var(--good-lo);
}
.picks-pick.is-wrong {
  background: var(--bad-bg);
  color: var(--text-dim);
  border-color: var(--bad-lo);
}
.picks-pick.is-empty { color: var(--text-mute); font-weight: 500; }
.picks-pick .team-logo { width: 22px; height: 22px; }
.picks-pick .team-logo img { max-width: 22px; max-height: 18px; }
.picks-pick .team-logo .mono { width: 20px; height: 20px; font-size: 8px; }
.picks-pick .team-name { font-size: 13px; }
.picks-pick .team-mark { font-size: 11px; color: var(--text-mute); }
.picks-pick.is-correct .team-mark { color: var(--good); }
.picks-pick.is-wrong .team-mark { color: var(--bad); }

.picks-note {
  margin: 0;
  padding: 0 var(--s-600) var(--s-600);
  font-size: 13px;
  color: var(--text-sub);
}

@media (max-width: 720px) {
  .picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-300); padding: var(--s-400); }
  .picks-head { padding: var(--s-400); }
  .picks-summary { padding: var(--s-300) var(--s-400) 0; }
}

/* ---------- Rules ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin: var(--s-800) 0 var(--s-300); }
.prose h3 { margin: var(--s-600) 0 var(--s-200); color: var(--text); }
.prose ul, .prose ol { margin: 0 0 var(--s-300); padding-left: var(--s-600); color: var(--text-dim); }
.prose li { margin-bottom: var(--s-150); }
.prose li::marker { color: var(--text-mute); }

.table-plain {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: var(--s-400);
}
.table-plain th, .table-plain td {
  padding: var(--s-200) var(--s-300);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.table-plain th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom-color: var(--line);
}
.table-plain td { color: var(--text-dim); }
.table-plain td:last-child { color: var(--text); font-weight: 600; text-align: right; }

.lock-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.lock-line b { color: var(--white); }
.lock-line .utc { color: var(--text-mute); font-weight: 500; }

/* ---------- Desktop bracket ---------- */

@media (min-width: 900px) {
  h1 { font-size: 38px; }

  .bracket {
    flex-direction: row;
    align-items: stretch;
    gap: 56px;
  }

  .round {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .round-body {
    flex: 1;
    justify-content: space-around;
    gap: 0;
  }

  /* Each match sits in an equal share of the column height, so a round with
     half the matches lands exactly between its two feeders. */
  .slot {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
  }
  .slot .match { width: 100%; }

  .round-head { min-height: 34px; }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .bracket { gap: 36px; }
  .team { font-size: 13px; }
}