/* ===========================================================================
   The championship page.
   ===========================================================================

   Companion to js/tournaments-page.js. Only tournaments.html loads this sheet.

   WHAT THIS IS
   An event page, not a listing. There is one tournament, it is the reason the
   page exists, and the page is built to sell it: a poster at the top with the
   trophy, the date and a clock counting down to it; the sign-up directly under
   that; then the bracket, the money, the shape of the day, and the four things
   a player can do between now and then to arrive better than they are.

   WHAT IT REPLACED
   A single 560px card with an emoji in the heading and a <details> that hid
   everything worth reading. Everything that disclosure used to hide is now on
   the page, because somebody deciding whether to enter a tournament wants the
   prize split and the format, and asking them to click for it is asking them
   to want it first.

   NO EMOJI ANYWHERE
   The target emoji in the old heading is now .tourney-crest - a drawn trophy
   whose bowl is a board with a wall across it. Every other mark on the page is
   a hand-drawn SVG in the same language as the rail's icons (24px box, 1.6
   stroke, round caps, a fill-opacity wash for weight). An emoji is a font the
   OS picks, and it renders as somebody else's artwork on every platform.

   WHY ITS OWN FILE
   The argument ranks-journey.css makes at its top, and it applies harder here:
   styles.css is 6,500 lines, is edited constantly and from more than one
   session at once, and this is a page's worth of new rules. Here it is no
   conflict surface at all. The .tourney-* rules that used to live in
   styles.css moved here whole - this sheet is now the only place they are.

   THE APP SHOWS NONE OF IT
   The app runs no event of its own. css/home-app.css hides .tourney-list and
   puts "No tournaments yet" in its place; this sheet does the same for the
   rest of the page, which did not exist when that rule was written. Both are
   CSS rather than script so the app never paints an event and then takes it
   away, and js/tournaments-page.js carries the matching Net.isNative() guard
   so it never asks the server about a sign-up it is not offering.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   0. The page
   ------------------------------------------------------------------------ */

/* .profile-page is 560px, which is a measure for a form. The bracket needs
   four columns and the poster needs room beside the trophy. Same departure
   .ranks-page makes, for the same reason. */
.tourney-page { max-width: 1000px; }

/* Everything below the top bar that is about the event. One wrapper, so the
   app can be given the whole page in one rule - see the note at the top.
   .tourney-none is deliberately NOT inside it: that block is what stands in
   for all of this in the app, so hiding it here would leave the app blank. */
.tourney-event { display: flex; flex-direction: column; gap: 22px; }
body.has-tabbar .tourney-event { display: none; }

/* Section furniture. Every block below the sign-up is one of these. */
/* The bracket block carries a link in its top-right corner, so it needs to be
   the positioning context. Scoped to the one block rather than put on every
   .tourney-block, because making a shared container `relative` for the benefit
   of a single child is how a stacking context appears somewhere nobody looks
   for it later. */
.tourney-bracket-block { position: relative; }
.tourney-gobracket {
  position: absolute; top: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
  color: var(--color-text-primary); font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.tourney-gobracket:hover {
  border-color: var(--color-accent); color: var(--color-accent);
}
.tourney-gobracket svg { flex: none; transition: transform .15s ease; }
.tourney-gobracket:hover svg { transform: translateX(2px); }
/* On a phone the heading would run under an absolutely-positioned link, so it
   stops being absolute and sits above the heading instead. */
@media (max-width: 560px) {
  .tourney-gobracket {
    position: static; margin-bottom: 12px;
  }
}

.tourney-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 26px 28px;
}
.tourney-h {
  margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  color: var(--color-text-primary);
}
.tourney-lede {
  margin: 0 0 20px; color: var(--color-text-muted); font-size: 14px; line-height: 1.55;
  max-width: 64ch;
}
.tourney-lede:last-child { margin-bottom: 0; }
/* Most sections have no lede any more, so the heading carries the gap itself.
   The steps get more: their numbers sit 11px above the cards. */
.tourney-h + .tourney-podium, .tourney-h + .tourney-train,
.tourney-h + .tourney-qa { margin-top: 16px; }
.tourney-h + .tourney-steps { margin-top: 26px; }

/* ---------------------------------------------------------------------------
   1. The poster
   ------------------------------------------------------------------------ */

.tourney-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-gold) 26%, var(--color-border));
  border-radius: var(--radius-lg);
  padding: 40px 40px 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* The floor the poster stands on: the board, dimmed until it is a texture
   rather than a picture, with the gold falling across the top-left corner.
   Five layers, bottom to top - the ground, the gold, the checker, and a
   lit/shaded edge per axis, which is what makes the cells read as tiles
   instead of as a drawn grid. Same construction as the rank ladder's floor,
   at a quarter of its contrast, because here there is type on top of it. */
.tourney-hero-floor {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .018) 0 6%, rgba(255, 255, 255, 0) 6% 94%, rgba(0, 0, 0, .06) 94% 100%),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .024) 0 6%, rgba(255, 255, 255, 0) 6% 94%, rgba(0, 0, 0, .07) 94% 100%),
    conic-gradient(
      rgba(0, 0, 0, .085) 0 25%, rgba(255, 255, 255, .016) 0 50%,
      rgba(0, 0, 0, .085) 0 75%, rgba(255, 255, 255, .016) 0),
    radial-gradient(115% 130% at 10% -15%,
      color-mix(in srgb, var(--color-gold) 20%, transparent), transparent 62%),
    linear-gradient(155deg, #2b2924 0%, #232220 55%, #1c1b19 100%);
  background-size: 46px 46px, 46px 46px, 92px 92px, 100% 100%, 100% 100%;
}

/* Three columns while they fit: the trophy, the type, and the clock. The
   clock earns the right-hand side because the poster is otherwise a block of
   text with a wide empty margin, and because the number of days left is the
   one fact on this page that changes. When it stops fitting it wraps to its
   own row and goes back to being four boxes across. */
.tourney-hero-inner {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 26px 34px;
}
.tourney-hero-main { min-width: 0; flex: 1 1 360px; }

/* ---- the trophy ---- */
.tourney-crest {
  position: relative; flex: 0 0 auto;
  width: 136px; height: 136px;
  display: grid; place-items: center;
}
/* The light it stands in. Behind the drawing, not on it - a glow applied to
   the trophy itself would bloom the outlines and lose the board in the bowl. */
.tourney-crest::before {
  content: ""; position: absolute; inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-gold) 30%, transparent) 0%,
    color-mix(in srgb, var(--color-gold) 9%, transparent) 42%,
    transparent 68%);
}
.tourney-crest svg {
  position: relative; width: 100%; height: 100%;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55));
}

/* ---- the type ---- */
.tourney-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tourney-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(90, 158, 63, .15);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}
/* Cash tag: marks the event as playing for money. */
.tourney-cashtag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
  color: var(--color-gold); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}
.tourney-cashtag::before { content: "$"; font-size: 12px; line-height: 1; }

/* The device requirement, third in the row and styled as a WARNING rather than
   a feature - it is the one tag that tells somebody they might not be able to
   play. Amber rather than the accent green for exactly that reason: a
   requirement dressed as a badge reads as a perk and gets skimmed past. */
.tourney-reqtag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, #e0a33a 16%, transparent);
  border: 1px solid color-mix(in srgb, #e0a33a 50%, transparent);
  color: #e0a33a; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}
.tourney-reqtag::before {
  content: ""; width: 11px; height: 9px; flex: none;
  border: 1.6px solid currentColor; border-radius: 1.5px;
}

.tourney-title {
  margin: 0; font-weight: 800; letter-spacing: -.028em; line-height: 1.02;
  font-size: clamp(30px, 4.2vw, 46px);
}
/* The event's own name, in the metal. The -webkit- prefix is load-bearing:
   background-clip on text is still prefixed in Safari, and this page ships
   inside an iOS app. */
.tourney-title em {
  display: block; font-style: normal;
  background: linear-gradient(100deg, #f7e3a8 0%, var(--color-gold) 52%, #a9781a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tourney-when {
  margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--color-text-primary); font-size: 14.5px; font-weight: 600;
}
.tourney-when .sep { color: var(--color-text-muted); }
.tourney-pitch {
  margin: 12px 0 0; max-width: 56ch;
  color: var(--color-text-muted); font-size: 14.5px; line-height: 1.6;
}

/* ---- the clock ---- */
/* Four units, and the seconds tick. A date is a fact; a clock counting toward
   it is the reason to register today rather than in October. */
.tourney-clock {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(80px, auto)); gap: 10px;
}
.tourney-clock-unit {
  min-width: 78px; padding: 11px 10px 9px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, .34);
  border: 1px solid color-mix(in srgb, var(--color-gold) 18%, var(--color-border));
  text-align: center;
}
.tourney-clock-n {
  display: block; font-size: 28px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.tourney-clock-l {
  display: block; margin-top: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted);
}
/* Once the day arrives the clock has nothing left to count, and the four boxes
   become one line. */
.tourney-clock.is-here { grid-template-columns: 1fr; }
.tourney-clock.is-here .tourney-clock-unit {
  min-width: 0; padding: 12px 18px;
  color: var(--color-gold); font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------------------------------------------------------------------------
   2. The sign-up
   ------------------------------------------------------------------------ */

.tourney-list { display: flex; flex-direction: column; gap: 16px; }
/* Gold-edged: it is the one thing on the page that is meant to be clicked. */
.tourney-card {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--color-gold) 34%, var(--color-border));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--color-gold) 9%, transparent),
      transparent 46%),
    var(--color-surface);
  padding: 22px 28px;
}
.tourney-card-main { flex: 1 1 320px; min-width: 0; }
/* The bottom CTA is an in-page jump to this card. Without the margin the card
   lands hard against the top of the viewport with the poster cropped above it
   and no sense of where you arrived. */
.tourney-card { scroll-margin-top: 24px; }

/* Prize-pool badge. */
.tourney-pool {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  padding: 14px 20px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-gold) 16%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent);
  color: var(--color-gold); font-size: 30px; font-weight: 800; line-height: 1;
}
.tourney-pool-label {
  margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted);
}

.tourney-signup { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tourney-signup .btn.big { min-width: 180px; }
/* Signed-out: the CTA is visible but clearly not usable until you sign in. */
.tourney-signup .btn:disabled:not(.is-registered) {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}
.tourney-signup .btn.is-registered {
  background: transparent; color: var(--color-accent);
  border: 1px solid var(--color-accent); box-shadow: none; opacity: 1; cursor: default;
}
.tourney-count { color: var(--color-text-muted); font-size: 13.5px; font-weight: 600; }
/* Opt-out: deliberately quiet next to the primary CTA, so leaving the bracket
   is always available but never the thing you click by accident. */
.tourney-optout {
  padding: 6px 2px; border-radius: var(--radius-md);
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 13px; font-weight: 600;
  font-family: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.tourney-optout:hover:not(:disabled) { color: #e0796b; }  /* matches .btn.danger */
.tourney-optout:disabled { opacity: .55; cursor: default; }
.tourney-optout[hidden] { display: none; }
/* The button row swaps Register / Join for a link to the bracket once there is
   one. Both are .btn, whose display beats the UA's [hidden], so it is restated. */
.tourney-signup > .btn[hidden] { display: none; }
.tourney-note { margin-top: 10px; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.tourney-note a { color: var(--color-accent); font-weight: 600; }

/* The touch-device heads-up. Amber, like the hero tag and the Device tile, so
   a phone visitor meets the same one message a third time rather than a new
   one. [hidden] needs spelling out because the rule sets display. */
.tourney-touchnote {
  display: block; margin-top: 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #e0a33a 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #e0a33a 9%, transparent);
  color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5;
}
.tourney-touchnote[hidden] { display: none; }
.tourney-touchnote b { font-weight: 700; color: #e0a33a; }
.tourney-touchnote a { color: var(--color-accent); font-weight: 600; }

/* The agreement line under the Register button. Quiet by design: it states
   what the click means, and a notice that shouts competes with the button it
   is explaining. [hidden] is spelled out because the rule sets display. */
.tourney-agree {
  display: block; margin-top: 10px; max-width: 60ch;
  color: var(--color-text-muted); font-size: 12px; line-height: 1.5;
}
.tourney-agree[hidden] { display: none; }
.tourney-agree a { color: var(--color-accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   3. The bracket
   ------------------------------------------------------------------------ */

/* The drawing is one SVG with a fixed viewBox. On a phone it does not shrink
   to illegibility - it keeps a minimum width and the block scrolls sideways,
   which is how a bracket is read on paper too. */
.tourney-bracket-wrap { overflow-x: auto; padding-bottom: 4px; }
.tourney-bracket { display: block; width: 100%; min-width: 640px; height: auto; }
.tourney-bracket .slot {
  fill: var(--color-surface-raised);
  stroke: var(--color-border);
  stroke-width: 1;
}
.tourney-bracket .link { stroke: var(--color-border); stroke-width: 1.4; fill: none; }
/* A bar where a name will go. An empty draw reads as a diagram that failed to
   load; this reads as a draw that has not been made yet, which is what it is. */
.tourney-bracket .ghost { fill: rgba(255, 255, 255, .10); }
.tourney-bracket .round {
  fill: var(--color-text-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
}
/* The lower bracket's label is lit because it is what a first-time reader has
   not seen before: the half of the draw that makes a first loss survivable. */
.tourney-bracket .round.is-lower { fill: var(--color-accent); }
/* A match is two rows; the rule between them is quieter than the box. */
.tourney-bracket .div { stroke: var(--color-border); stroke-width: 1; fill: none; }
/* One path through the draw, lit. It is the thing the picture is for: a loss
   in the first round, the drop, and every lower-bracket win back to the cup. */
.tourney-bracket .you-row {
  fill: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface-raised));
}
.tourney-bracket .link.is-you {
  stroke: color-mix(in srgb, var(--color-accent) 70%, transparent); stroke-width: 2;
}
/* The drop itself. Dashed, so it reads as a move between brackets rather than
   one more line of the tree. */
.tourney-bracket .drop {
  fill: none; stroke: var(--color-accent); stroke-width: 2;
  stroke-dasharray: 5 4; stroke-linejoin: round;
}
.tourney-bracket .slot.is-final {
  fill: color-mix(in srgb, var(--color-gold) 20%, var(--color-surface-raised));
  stroke: color-mix(in srgb, var(--color-gold) 65%, transparent);
  stroke-width: 1.4;
}
.tourney-bracket .you-label { fill: var(--color-accent); font-size: 11.5px; font-weight: 800; }
.tourney-bracket .cup-label { fill: var(--color-gold); font-size: 12.5px; font-weight: 800; }
/* The line under it is prose, not a round name - .round would upper-case it
   into "AND $175". */
.tourney-bracket .cup-sub { fill: var(--color-text-muted); font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   4. The money
   ------------------------------------------------------------------------ */

/* A podium, not four equal boxes: first place is taller and gold because that
   is the shape of the thing being described. align-items:end does the whole
   podium - each step sets its own min-height and they hang off one baseline. */
.tourney-podium {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tourney-prize {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; border-radius: var(--radius-md);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  min-height: 102px; justify-content: flex-end;
}
.tourney-prize.is-first {
  min-height: 152px;
  border-color: color-mix(in srgb, var(--color-gold) 55%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-gold) 18%, var(--color-surface-raised)),
    var(--color-surface-raised));
}
.tourney-prize.is-second { min-height: 132px; }
.tourney-prize.is-third { min-height: 116px; }
.tourney-prize .ic { width: 26px; height: 26px; color: var(--color-gold); margin-bottom: 4px; }
.tourney-place {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted);
}
.tourney-amount { font-size: 22px; font-weight: 800; color: var(--color-text-primary); }
.tourney-prize.is-first .tourney-amount { color: var(--color-gold); font-size: 30px; }
.tourney-facts {
  margin: 20px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px;
  color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55;
}
.tourney-facts b { font-weight: 700; color: var(--color-text-primary); }

/* ---- the rules ---- */
/* The rules, as a numbered list rather than prose. The numbering is the
   point: a rule you can cite by number reads as a regulation, and a player
   disputing one has something to name. `start` on the second list continues the
   sequence across the heading break, so the two headings are sections of one
   set of rules rather than two lists that both begin at 1. */
.tourney-rules-list {
  margin: 0; padding-left: 20px; max-width: 68ch;
  color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6;
}
/* Spacing via the items, NOT flex + gap on the list. A flex container
   blockifies its children, and the marker goes with them - a numbered list
   whose numbers vanish is worse than no numbering at all, and there is no
   browser here to catch it. */
.tourney-rules-list li { margin: 0 0 9px; }
.tourney-rules-list li:last-child { margin-bottom: 0; }
.tourney-rules-list b { font-weight: 700; color: var(--color-text-primary); }
.tourney-rules-list a { color: var(--color-accent); font-weight: 600; }
/* The second heading inside one rules block. Sections normally carry their own
   top margin from .tourney-block; these two share a block, so the break between
   Fair play and Proctoring has to be put back by hand. */
.tourney-rules-next { margin-top: 26px; }

/* ---------------------------------------------------------------------------
   5. How the day runs
   ------------------------------------------------------------------------ */

.tourney-steps {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  counter-reset: step;
}
.tourney-step {
  position: relative;
  padding: 26px 18px 18px; border-radius: var(--radius-md);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
}
/* The number is generated, so the steps cannot be renumbered wrong by an edit
   that reorders them. */
.tourney-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -11px; left: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: #fff;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 0 0 4px var(--color-surface);
}
.tourney-step .ic {
  width: 22px; height: 22px; color: var(--color-accent); display: block; margin-bottom: 10px;
}
.tourney-step-t { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.tourney-step-c { margin: 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   6. The field
   ------------------------------------------------------------------------ */

/* Built by script from /api/leaderboard, and hidden outright if that comes
   back locked or empty - a "who to beat" list with nobody in it is worse than
   no list at all. */
.tourney-field[hidden] { display: none; }
.tourney-seeds { display: flex; flex-direction: column; gap: 8px; }
.tourney-seed {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-md);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
}
.tourney-seed.is-top {
  border-color: color-mix(in srgb, var(--color-gold) 45%, transparent);
  background: color-mix(in srgb, var(--color-gold) 8%, var(--color-surface-raised));
}
.tourney-seed-n {
  flex: 0 0 auto; width: 22px;
  color: var(--color-text-muted); font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tourney-seed.is-top .tourney-seed-n { color: var(--color-gold); }
.tourney-seed-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; background: var(--color-surface);
  border: 1px solid var(--color-border);
}
/* Standing in for a missing avatar: the player's initial, on the plain
   surface. The leaderboard does the same. */
.tourney-seed-in {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 13px; font-weight: 800; color: var(--color-text-muted);
}
.tourney-seed-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tourney-seed-tier {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.tourney-seed-elo {
  flex: 0 0 auto; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.tourney-field-foot {
  margin: 16px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.55;
}
.tourney-field-foot a { color: var(--color-accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   7. Between now and then
   ------------------------------------------------------------------------ */

/* The reason this section is on an event page at all: the gap between wanting
   to enter and being ready to is where a player either practises or forgets.
   Each card is a real destination on the site, and the copy says what it does
   for their bracket specifically. */
.tourney-train {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
}
.tourney-drill {
  display: block; padding: 20px 18px;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.tourney-drill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised));
}
.tourney-drill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tourney-drill .ic { width: 24px; height: 24px; display: block; margin-bottom: 12px; }
.tourney-drill-t {
  margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 800; color: var(--color-text-primary);
}
.tourney-drill-c { margin: 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }
/* The arrow leans in on hover. Small, but it is the difference between a box
   and a thing that goes somewhere. */
.tourney-drill-go { color: var(--color-accent); transition: transform .15s ease; }
.tourney-drill:hover .tourney-drill-go { transform: translateX(3px); }
/* One icon colour per destination, matching the rail's, so a player who knows
   the site recognises where each card goes before reading it. */
.tourney-drill.to-play .ic     { color: var(--color-accent); }
.tourney-drill.to-puzzles .ic  { color: #b07cc6; }
.tourney-drill.to-daily .ic    { color: #5ab6a6; }
.tourney-drill.to-bots .ic     { color: var(--color-blue); }

/* ---------------------------------------------------------------------------
   8. Questions
   ------------------------------------------------------------------------ */

.tourney-qa { display: flex; flex-direction: column; gap: 8px; }
.tourney-q {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.tourney-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: var(--color-text-primary);
}
.tourney-q summary::-webkit-details-marker { display: none; }
.tourney-q summary:hover { color: var(--color-accent); }
.tourney-q summary:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md);
}
.tourney-chev { flex: 0 0 auto; transition: transform .18s ease; color: var(--color-text-muted); }
.tourney-q[open] .tourney-chev { transform: rotate(180deg); }
.tourney-q-a {
  margin: 0; padding: 0 16px 16px;
  color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6;
}
.tourney-q-a a { color: var(--color-accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   9. The last word
   ------------------------------------------------------------------------ */

/* The page is long, and somebody who has read to the bottom has decided. This
   is the sign-up again where they are, rather than a scroll back to find it. */
.tourney-close {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding: 28px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-gold) 26%, var(--color-border));
  background:
    radial-gradient(90% 160% at 100% 0%,
      color-mix(in srgb, var(--color-gold) 13%, transparent), transparent 60%),
    var(--color-surface);
}
.tourney-close-t { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }

/* ---------------------------------------------------------------------------
   10. Narrow screens
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
  /* The trophy goes above the type rather than beside it, and shrinks: at this
     width a 136px crest next to a wrapping title leaves the title three words
     wide. */
  .tourney-hero { padding: 30px 24px 26px; }
  .tourney-hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tourney-crest { width: 92px; height: 92px; }
  .tourney-hero-main { flex: 1 1 auto; }
  /* Under the type rather than beside it, and back to one row of four. */
  .tourney-clock { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tourney-block { padding: 22px 20px; }
}

@media (max-width: 560px) {
  .tourney-hero { padding: 26px 18px 22px; }
  /* The date line wraps at this width, and a flex row of facts separated by
     middots leaves one stranded at the end of a line. Three short lines and no
     separators at all. */
  .tourney-when { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tourney-when .sep { display: none; }
  .tourney-clock { gap: 8px; }
  .tourney-clock-unit { min-width: 0; padding: 10px 4px 8px; }
  .tourney-clock-n { font-size: 22px; }
  .tourney-clock-l { font-size: 9px; letter-spacing: .06em; }
  .tourney-card { padding: 18px; gap: 16px; }
  /* The pool badge goes flat and full width above the button rather than
     stealing half the row from it. */
  .tourney-pool {
    order: -1; width: 100%; box-sizing: border-box;
    flex-direction: row; align-items: baseline; justify-content: center; gap: 8px;
    font-size: 24px; padding: 10px 14px;
  }
  .tourney-pool-label { margin-top: 0; }
  .tourney-signup { gap: 10px; }
  .tourney-signup .btn.big { width: 100%; }
  .tourney-prize,
  .tourney-prize.is-first,
  .tourney-prize.is-second,
  .tourney-prize.is-third { min-height: 0; padding: 14px 8px; }
  .tourney-amount { font-size: 19px; }
  .tourney-prize.is-first .tourney-amount { font-size: 24px; }
  /* The tier chip goes: it costs the username half its width and the rating
     beside it already says the same thing. */
  .tourney-seed-tier { display: none; }
  .tourney-close { padding: 22px 18px; }
  .tourney-close .btn.big { width: 100%; }
}

/* The drills are the only things on the page that move on hover, and the move
   is decoration. */
@media (prefers-reduced-motion: reduce) {
  .tourney-drill, .tourney-drill-go { transition: none; }
  .tourney-drill:hover { transform: none; }
  .tourney-drill:hover .tourney-drill-go { transform: none; }
}

/* ---------------------------------------------------------------------------
   11. The live bracket (/bracket)
   ---------------------------------------------------------------------------
   Same sheet as the poster page deliberately: they are two views of one event
   and should not drift apart. Everything here is prefixed .brk- so the two sets
   cannot collide, and so deleting the event later is two greps rather than a
   careful read.
   ------------------------------------------------------------------------ */

.brk-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0 48px; }

.brk-head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  margin: 8px 0 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
.brk-title {
  margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800;
  letter-spacing: -.025em; color: var(--color-text-primary);
}
.brk-sub { margin: 6px 0 0; color: var(--color-text-muted); font-size: 14px; }

/* The next deadline, whichever it is. Tabular figures so the seconds do not
   jog the layout sideways once a second as the digits change width. */
.brk-clock {
  display: flex; flex-direction: column; align-items: flex-end; flex: none;
  padding: 10px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
}
.brk-clock[hidden] { display: none; }
/* The clock and the Share button, side by side at the right of the header. */
.brk-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brk-share { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.brk-share[hidden] { display: none; }
.brk-share svg { flex: none; }
.brk-clock-n {
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.brk-clock-l {
  margin-top: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted);
}

/* ---- your match ---- */
/* The accent border is the point of this block: on a page that is otherwise a
   wall of other people's names, the one part that is about YOU has to be
   findable at a glance by somebody who just alt-tabbed back. */
.brk-you {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  margin: 0 0 26px; padding: 18px 20px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-raised));
}
.brk-you[hidden] { display: none; }

/* ---- the screen recorder panel ---- */
/* Green while the recorder is sending, red while it should be and is not. The
   red is .btn.danger's, the one the site already uses for "this is wrong". */
.brk-proctor {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between;
  margin: 0 0 16px; padding: 14px 18px; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.brk-proctor[hidden], .brk-proctor .btn[hidden] { display: none; }
.brk-proctor.is-on {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}
.brk-proctor.is-off { border-color: rgba(224, 121, 107, .6); background: rgba(192, 57, 43, .12); }
.brk-proctor-main { min-width: 0; }
.brk-proctor-k {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted);
}
.brk-proctor.is-off .brk-proctor-k { color: #e0796b; }
.brk-proctor-v { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.brk-proctor-v::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; vertical-align: 1px; background: #e0796b;
}
.brk-proctor.is-on .brk-proctor-v::before { background: #e0483a; }
.brk-proctor-note {
  margin: 4px 0 0; max-width: 62ch;
  color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5;
}
.brk-you-main { min-width: 0; }
.brk-you-k {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-accent);
}
.brk-you-v {
  margin: 6px 0 0; font-size: 18px; font-weight: 700;
  color: var(--color-text-primary); line-height: 1.3;
}
.brk-you-note {
  margin: 6px 0 0; max-width: 60ch;
  color: var(--color-text-muted); font-size: 13px; line-height: 1.5;
}
.brk-you-act { flex: none; }
.brk-you-act [hidden] { display: none; }
/* The best-of-three line: "Best of 3 · you lead 1–0". Accent and tabular, so
   the score is the second thing the eye lands on after the sentence above it. */
.brk-score {
  margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--color-accent);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.brk-score[hidden], .brk-agree[hidden] { display: none; }
.brk-agree {
  margin: 10px 0 0; max-width: 60ch;
  color: var(--color-text-muted); font-size: 12px; line-height: 1.5;
}
.brk-agree a { color: var(--color-accent); font-weight: 600; }

/* ---- the tree ---- */
.brk-block { margin-top: 8px; }
.brk-h {
  margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  color: var(--color-text-primary);
}
.brk-lede { margin: 0 0 18px; color: var(--color-text-muted); font-size: 14px; }
/* Three trees stacked: upper, lower, grand final. Each heading gets its own
   colour so a player scrolling between them always knows which one they are in;
   the lower bracket's is the accent because it is the new half of the draw. */
.brk-bracket + .brk-bracket { margin-top: 30px; }
.brk-bracket[hidden] { display: none; }
.brk-bracket .brk-h { margin-bottom: 12px; }
.brk-bracket .brk-h + .brk-lede { margin-top: -8px; margin-bottom: 14px; }
.brk-bracket.is-lower .brk-h { color: var(--color-accent); }
.brk-bracket.is-final .brk-h { color: var(--color-gold); }
/* Room for the note that hangs under the reset (.brk-m-note). The tree scrolls
   sideways, and a scroll box clips whatever overflows it in either direction. */
.brk-bracket.is-final .brk-tree { padding-bottom: 44px; }
.brk-lede[hidden], .brk-empty[hidden] { display: none; }
.brk-empty {
  margin: 0; padding: 26px 20px; border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font-size: 13.5px; line-height: 1.6;
}
.brk-empty a { color: var(--color-accent); font-weight: 600; }

/* Scrolls sideways rather than shrinking, the same call the poster page's SVG
   bracket makes: a draw is read ACROSS, and five rounds squeezed into a phone
   is five columns of nothing anybody can read. */
.brk-tree-wrap { overflow-x: auto; padding-bottom: 6px; }
.brk-tree { display: flex; gap: 14px; align-items: stretch; min-width: min-content; }

/* 150px holds a seed and a name, and lets the six lower rounds of a 16-player
   draw sit side by side without scrolling. Capped, so the grand final's two
   columns do not stretch into two boxes the width of the page. */
.brk-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 150px; max-width: 260px; flex: 1 0 150px;
}
.brk-col-h {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--color-border);
}
/* Each round has half the matches of the one before (or the same number, in
   the lower bracket), so spreading them evenly is what makes a column line up
   with the pair that feeds it - the cheap version of drawing connector lines,
   and it survives any bracket size. An auto margin on EVERY match shares the
   free height equally round each one. It used to be :first-of-type and
   :last-of-type, which never spread anything: the column heading is a div too,
   so no match was ever the first of its type. */
.brk-col > .brk-m, .brk-col > .brk-mwrap { margin: auto 0; }
/* The note hangs below its match rather than taking height in the column,
   so the reset stays level with the grand final beside it. */
.brk-mwrap { position: relative; }

.brk-m {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-raised); overflow: hidden;
}
.brk-m.is-live { border-color: var(--color-accent); }
/* A match with a board to watch is a link to it. It has to look like the box
   it was, not like a text link - and say, on hover, that it can be opened. */
a.brk-m { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.brk-m:hover, a.brk-m:focus-visible {
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
  outline: none;
}
a.brk-m.is-live .brk-side:first-child::after {
  content: "watch"; margin-left: 6px; flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent);
}
.brk-m.is-bye { opacity: .6; }

.brk-side {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; font-size: 13px;
  color: var(--color-text-primary);
}
.brk-side + .brk-side { border-top: 1px solid var(--color-border); }
.brk-side.is-won { font-weight: 700; }
/* A loser is dimmed, never removed. The bracket is the record of what happened,
   and a name that disappears on defeat makes the draw impossible to read back. */
.brk-side.is-out { color: var(--color-text-muted); opacity: .65; }

.brk-seed {
  flex: none; min-width: 18px;
  font-size: 10.5px; font-weight: 700; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.brk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Games won in the series, flush right. Tabular so a 2 and a 1 line up. */
.brk-wins {
  flex: none; margin-left: auto; min-width: 14px; text-align: right;
  font-size: 12px; font-weight: 800; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.brk-side.is-won .brk-wins { color: var(--color-text-primary); }
.brk-name.is-tbd { color: var(--color-text-muted); font-style: italic; }
/* Your own name, wherever it is in the draw. With two brackets a player can be
   in either, and hunting for yourself in three trees is the wrong job to give
   somebody with five minutes to check in. */
.brk-side.is-you {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
/* The rounds being played right now. Two at once in most of the event - an
   upper round and a lower one - so it is marked on the columns, not in the
   header. */
.brk-col.is-now .brk-col-h {
  color: var(--color-accent);
  border-bottom-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.brk-col.is-now .brk-col-h::after { content: " · now"; }
.brk-m-note {
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 6px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45;
}

@media (max-width: 640px) {
  .brk-head { align-items: flex-start; }
  .brk-you { padding: 16px; }
  .brk-you-act, .brk-you-act .btn { width: 100%; }
}

/* ---- the leaderboard ---- */
/* Every player in finishing order, the full width of the page. The top four
   are cards of their own, each in its metal with the player's picture; the rest of the
   field sits in one panel under them. One column template for both, so the
   figures run down the page in straight lines from 1st to 16th. */
.brk-lbs {
  --pod-gold: #ebc55a; --pod-silver: #ccd5de; --pod-bronze: #e09d66; --pod-jade: #84d66a;
  /* The site's muted grey is under 4.5:1 on a raised card; this one is not. */
  --pod-muted: #a9a9a1;
  --lb-cols: 196px minmax(0, 1fr) 84px 74px 64px;
  margin: 0 0 40px;
}
.brk-lbs[hidden] { display: none; }
.brk-lbs.is-after { margin: 40px 0 0; }
.brk-lbs .brk-lede { margin-bottom: 18px; }

.brk-lb-cols {
  display: grid; grid-template-columns: var(--lb-cols); column-gap: 16px;
  padding: 0 22px 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pod-muted);
}
.brk-lb-cols .num, .brk-lb-n { text-align: right; }

.brk-lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.brk-lb-row {
  --metal: var(--color-text-muted);
  display: grid; grid-template-columns: var(--lb-cols); column-gap: 16px; align-items: center;
  padding: 12px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-top: 0;
  transition: background-color .15s ease;
}
.brk-lb-row:not(.is-top):hover { background: var(--color-surface-raised); }
.brk-lb-row.is-first-rest {
  margin-top: 8px; border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.brk-lb-row:not(.is-top):last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.brk-lb-row.is-first-rest:last-child { border-radius: var(--radius-lg); }

/* The top four. */
.brk-lb-row.is-top {
  margin-bottom: 10px; padding: 16px 22px;
  border: 1px solid color-mix(in srgb, var(--metal) 32%, var(--color-border));
  border-left: 4px solid var(--metal);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--metal) 17%, transparent) 0%, transparent 55%),
    var(--color-surface-raised);
  box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .8);
}
.brk-lb-row.is-1 { --metal: var(--pod-gold); padding: 20px 22px; }
.brk-lb-row.is-2 { --metal: var(--pod-silver); }
.brk-lb-row.is-3 { --metal: var(--pod-bronze); }
.brk-lb-row.is-4 { --metal: var(--pod-jade); }
.brk-lb-row.is-1 {
  border-color: color-mix(in srgb, var(--metal) 55%, var(--color-border));
  background:
    radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--metal) 24%, transparent), transparent 70%),
    var(--color-surface-raised);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--metal) 45%, transparent),
              0 14px 28px -20px rgba(0, 0, 0, .8);
}

/* Place: picture and title for the top four, the bare place for the rest. */
.brk-lb-place { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Profile pictures: the site's own avatar circle (js/avatar.js), the photo
   when there is one, otherwise the initial on the accent green. The top four
   wear a ring in their metal. */
.brk-av {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--color-accent); color: #16210d;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.brk-lb-row.is-top .brk-av {
  width: 60px; height: 60px; font-size: 24px;
  box-shadow: 0 0 0 3px var(--metal), 0 6px 14px rgba(0, 0, 0, .4);
}
.brk-lb-row.is-1 .brk-av { width: 72px; height: 72px; font-size: 29px; }
.brk-lb-rank { display: flex; flex-direction: column; min-width: 0; }
.brk-lb-k {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--metal); white-space: nowrap;
}
.brk-lb-ord {
  font-size: 14px; font-weight: 800; color: var(--pod-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.brk-lb-row.is-top .brk-lb-ord {
  margin-top: 1px; font-size: 32px; line-height: 1; letter-spacing: -.03em; color: var(--metal);
}
.brk-lb-row.is-1 .brk-lb-ord { font-size: 40px; }

/* Who, and how it ended. */
.brk-lb-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brk-lb-text { min-width: 0; }
.brk-lb-name {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0;
  font-size: 14.5px; font-weight: 700; color: var(--color-text-primary);
}
/* A long name keeps all its letters: the tag drops to the next line instead. */
.brk-lb-row.is-top .brk-lb-name { flex-wrap: wrap; row-gap: 4px; font-size: 19px; font-weight: 800; }
.brk-lb-row.is-1 .brk-lb-name { font-size: 23px; }
.brk-player {
  color: inherit; text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 4px; transition: color .15s ease;
}
.brk-player:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.brk-lb-row.is-top .brk-player:hover { color: var(--metal); }
.brk-player:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }
.brk-lb-tag {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--metal);
  border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent);
  background: color-mix(in srgb, var(--metal) 10%, transparent);
}
.brk-lb-tag.is-you {
  color: #10210a; background: var(--color-accent-hover); border-color: transparent;
  font-weight: 800; text-transform: uppercase;
}
.brk-lb-how { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pod-muted); }
.brk-lb-row.is-top .brk-lb-how { margin-top: 5px; font-size: 13.5px; color: #c9c9c1; }
.brk-lb-beat { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pod-muted); }

/* The figures. Tabular, so a column of 2-2s and 10-5s lines up. */
.brk-lb-n {
  font-size: 14px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.brk-lb-row.is-top .brk-lb-n { font-size: 18px; font-weight: 800; }
.brk-lb-row.is-1 .brk-lb-n { font-size: 20px; }
.brk-lb-row:not(.is-top) .brk-lb-n.c-w { color: var(--pod-muted); }

.brk-lb-row.is-you:not(.is-top) {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.brk-lb-row.is-top.is-you { outline: 2px solid var(--color-accent-hover); outline-offset: 3px; }

/* ---- disqualified ---- */
/* A red stamp laid across the name, in the draw and on the leaderboard alike.
   The name stays readable under it: the draw is still the record of what was
   played. Slightly tilted, like a stamp, and never in the way of a click. */
.brk-dq-stamp {
  position: absolute; left: -4px; top: 50%; z-index: 1;
  transform: translateY(-50%) rotate(-6deg); transform-origin: left center;
  padding: 1px 7px; border: 1.5px solid #e5534b; border-radius: 4px;
  background: rgba(24, 24, 24, .3); color: #ff7469;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap; pointer-events: none;
}
/* The stamp starts where the name starts and runs across it. */
.brk-dq-on { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.brk-side.is-dq .brk-name, .brk-side.is-dq .brk-wins, .brk-dq-on .brk-player { opacity: .55; }
.brk-lb-name .brk-dq-on .brk-dq-stamp { font-size: 10.5px; padding: 1px 8px; }
.brk-lb-row.is-dq .brk-lb-ord { color: #ff7469; }
.brk-lb-row.is-dq .brk-lb-how { color: #ff8f86; }
.brk-lb-row.is-dq .brk-lb-n, .brk-lb-row.is-dq .brk-av { opacity: .5; }

/* ---- the leaderboard's one entrance ---- */
/* The rows rise once, 40 ms apart, top to bottom. That is all the motion
   there is, and none of it under reduced motion. */
@keyframes brk-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.brk-lb.is-reveal .brk-lb-row {
  animation: brk-rise .42s cubic-bezier(.34, 1.3, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .brk-lb.is-reveal .brk-lb-row { animation: none; }
  .brk-lb-row, .brk-player { transition: none; }
}

/* A tablet: the win rate goes, the rest stays in columns. */
@media (max-width: 900px) {
  .brk-lbs { --lb-cols: 180px minmax(0, 1fr) 70px 64px; }
  .brk-lb-cols .c-w, .brk-lb-n.c-w { display: none; }
  .brk-lb-row, .brk-lb-row.is-top, .brk-lb-cols { column-gap: 14px; padding-left: 16px; padding-right: 16px; }
  .brk-lb-row.is-top .brk-av { width: 52px; height: 52px; font-size: 21px; }
  .brk-lb-row.is-1 .brk-av { width: 62px; height: 62px; font-size: 25px; }
  .brk-lb-row.is-top .brk-lb-ord { font-size: 26px; }
  .brk-lb-row.is-1 .brk-lb-ord { font-size: 32px; }
}

/* A phone: place, player, matches. The top four keep their picture, stacked
   over the place. */
@media (max-width: 640px) {
  .brk-lbs { --lb-cols: 66px minmax(0, 1fr) 50px; }
  .brk-lb-cols .c-g, .brk-lb-cols .c-w, .brk-lb-n.c-g, .brk-lb-n.c-w { display: none; }
  .brk-lb-row, .brk-lb-row.is-top, .brk-lb-cols { column-gap: 12px; padding-left: 12px; padding-right: 14px; }
  .brk-lb-row { grid-template-areas: "place who m"; }
  .brk-lb-row.is-top { padding-top: 14px; padding-bottom: 14px; }
  .brk-lb-place { grid-area: place; flex-direction: column; gap: 4px; align-items: center; }
  .brk-lb-who { grid-area: who; }
  .brk-lb-n.c-m { grid-area: m; }
  .brk-lb-row:not(.is-top) .brk-lb-place { align-items: flex-start; }
  .brk-lb-k { display: none; }
  .brk-av { width: 28px; height: 28px; font-size: 12px; }
  .brk-lb-who { gap: 10px; }
  .brk-lb-row.is-top .brk-av { width: 44px; height: 44px; font-size: 18px; }
  .brk-lb-row.is-1 .brk-av { width: 50px; height: 50px; font-size: 20px; }
  .brk-lb-rank { align-items: center; }
  .brk-lb-row:not(.is-top) .brk-lb-rank { align-items: flex-start; }
  .brk-lb-ord { font-size: 12.5px; }
  .brk-lb-row.is-top .brk-lb-ord, .brk-lb-row.is-1 .brk-lb-ord { font-size: 20px; }
  .brk-lb-row.is-top .brk-lb-name { font-size: 17px; }
  .brk-lb-row.is-1 .brk-lb-name { font-size: 19px; }
  .brk-lb-name { flex-wrap: wrap; row-gap: 4px; }
  .brk-lb-row.is-top .brk-lb-how { font-size: 12.5px; }
  .brk-lb-row.is-top .brk-lb-n, .brk-lb-row.is-1 .brk-lb-n { font-size: 16px; }
}