/* ============================================================================
   1v1.LOL RELOADED — shared stylesheet for the redesigned site.
   ----------------------------------------------------------------------------
   Every redesigned surface loads design-tokens.css then this file, and nothing
   else. Page-specific CSS is a smell: if two pages need the same thing, it is a
   component and belongs here; if only one page needs it, it usually means the
   page is inventing a pattern the system already has under another name.

   Section order: base -> page frame -> chrome (masthead, rail, colophon) ->
   components -> responsive. Components are alphabetical inside their group so
   a name can be found without a search.
   ========================================================================== */

  @font-face { font-family: 'Blinker'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/blinker/blinker-400.woff2') format('woff2'); }
@font-face { font-family: 'Blinker'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/blinker/blinker-600.woff2') format('woff2'); }
@font-face { font-family: 'Blinker'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/blinker/blinker-700.woff2') format('woff2'); }
@font-face { font-family: 'Blinker'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/blinker/blinker-800.woff2') format('woff2'); }

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

/* The [hidden] attribute is styled by the UA at the element level, so ANY class
   rule with a display wins over it: a component declared display:flex or :grid
   stays visible while the markup says it is hidden. Every deferred block on this
   site (empty rail panels, the announcement band, tables before their first
   response) relies on the attribute, so it is enforced once, here. */
[hidden] { display: none !important; }
html { scrollbar-color: var(--rule-strong) var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The surfaces we did not draw still belong to the design: selection, caret, scrollbar
   and focus all ship with browser defaults that match no system. */
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }

.label {
  display: block;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.figure { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); line-height: 1; }
.muted { color: var(--text-muted); }
.placeholder { color: var(--text-faint); }

/* --- page frame -----------------------------------------------------------
   Everything lives inside one bounded column that centres on wide displays. The
   side rules keep the edge intentional instead of leaving the layout floating. */
.page { max-width: var(--measure); margin-inline: auto; border-inline: 1px solid var(--rule); }
@media (max-width: 1660px) { .page { border-inline: 0; } }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.masthead__logo { display: block; height: 42px; width: auto; }
.menu { display: flex; gap: var(--space-8); margin-inline: auto; }
.menu a {
  font-size: var(--step-0); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu a:hover { border-bottom-color: var(--accent); }
.menu a[aria-current="page"] { border-bottom-color: var(--accent); }
.signin {
  font: inherit; font-weight: 800; font-size: var(--step-0);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  background: var(--accent-fill); color: var(--text);
  border: 0; border-radius: var(--radius-1); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.signin {
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.signin:hover { background: var(--accent-fill-hover); }
.signin:disabled { background: var(--rule-strong); color: var(--text-faint); cursor: default; }

.masthead__brand { flex: none; }
.masthead__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }

/* Square, quiet buttons for the things that are not the primary action: Discord,
   the embed menu. They read as chrome until pointed at. */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; min-width: 40px; padding-inline: var(--space-3);
  color: var(--text-muted);
  border: 1px solid var(--rule); border-radius: var(--radius-1);
  background: none; font: inherit; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.iconbtn:hover { color: var(--text); border-color: var(--rule-strong); }

/* --- embed menu -----------------------------------------------------------
   Markup ids, .embed-share-copied and the data-attributes are addressed by the
   existing embed-share.js, which is shared with the old pages -- renaming them
   here would silently break "Add to site" on both designs. The utility classes
   at the end of this block exist for the same reason: that script toggles
   Tailwind class names it was written against. */
.embed { position: relative; }
.embed__label { font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.embed__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 19rem; padding: var(--space-1) 0;
  background: var(--ink-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-2);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}
.embed__item {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: var(--space-3) var(--space-4);
  text-align: left; font: inherit; font-weight: 700;
  background: none; border: 0; color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.embed__item .muted { font-weight: 400; font-size: var(--step--1); }
.embed__item:hover { background: var(--ink-inset); }
.embed__item.embed-share-copied { background: color-mix(in srgb, var(--positive) 16%, transparent); }
.embed__item.embed-share-copied [data-label] { color: var(--positive); }

.hidden { display: none !important; }
.opacity-40 { opacity: 0.4; }
.pointer-events-none { pointer-events: none; }

/* --- account widget -------------------------------------------------------
   The signed-out state is the primary action (.signin). Signed in, it becomes a
   quiet identity chip that opens a panel -- the panel is the account summary,
   not a menu, so it is laid out as data rather than as a list of links. */
.acc { position: relative; }
.acc__button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding-inline: var(--space-3);
  font: inherit; font-weight: 700; color: var(--text);
  background: none; border: 1px solid var(--rule); border-radius: var(--radius-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.acc__button:hover { border-color: var(--rule-strong); }
.acc__button--warn { color: var(--trophy); border-color: color-mix(in srgb, var(--trophy) 40%, transparent); }
.acc__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__caret { flex: none; color: var(--text-muted); }
.acc__mini, .acc__avatar {
  display: grid; place-items: center; overflow: hidden; flex: none;
  background: var(--ink-inset); border: 1px solid var(--rule);
  font-weight: 800; color: var(--text-muted);
}
.acc__mini { width: 26px; height: 26px; border-radius: var(--radius-1); font-size: var(--step--1); }
.acc__avatar { width: 48px; height: 48px; border-radius: var(--radius-1); }
/* Skins are full-body renders: fit to width and clip below, or the crop lands on
   the belt instead of the face. Same treatment as the leaderboard avatars. */
.acc__mini img, .acc__avatar img { width: 150%; height: auto; display: block; margin-left: -25%; margin-top: -6%; }

.acc__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 22rem; max-width: calc(100vw - 2rem);
  padding: var(--space-5);
  background: var(--ink-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-2);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}
.acc__panel.is-hidden { display: none; }
.acc__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.acc__ident { min-width: 0; flex: 1; }
.acc__title { font-size: var(--step-1); font-weight: 800; letter-spacing: var(--tracking-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__since { font-size: var(--step--1); color: var(--text-muted); }
.acc__close { background: none; border: 0; color: var(--text-faint); cursor: pointer; padding: 4px; }
.acc__close:hover { color: var(--text); }
.acc__section { margin-bottom: var(--space-2); }
.acc__section + .acc__stats { margin-bottom: var(--space-5); }
.acc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); margin: 0; }
.acc__stats div { min-width: 0; }
.acc__stats dt { font-size: var(--step--1); color: var(--text-muted); }
.acc__stats dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.acc__trophy { color: var(--trophy); }
.acc__pass { margin-bottom: var(--space-5); }
.acc__passhead { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 700; margin-bottom: var(--space-2); }
.acc__passhint { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.acc__copy { margin: 0 0 var(--space-4); font-size: var(--step-0); }
.acc__cta {
  display: block; text-align: center; padding: var(--space-3);
  background: var(--accent-fill); color: var(--text);
  font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-radius: var(--radius-1);
}
.acc__cta:hover { background: var(--accent-fill-hover); }
.acc__link { display: block; padding-block: var(--space-2); color: var(--accent); font-weight: 700; }
.acc__link:hover { color: var(--accent-strong); }
.acc__signout {
  display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-2);
  font: inherit; font-weight: 700; color: var(--text-muted);
  background: none; border: 1px solid var(--rule); border-radius: var(--radius-1); cursor: pointer;
}
.acc__signout:hover { color: var(--text); border-color: var(--rule-strong); }

/* --- split ----------------------------------------------------------------
   The rail is a full-height column so its surface runs to the bottom of the
   page; the sticky part is the content inside it. Making the rail itself sticky
   with a min-height forces the grid to that height, which leaves a dead band
   under short pages. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; align-items: stretch; }
.stage { min-width: 0; }

/* Split with a lead block (the game plate, the platform row). Stacked, the rail
   has to land straight after that lead block: pushed to the very bottom it sits
   below several screens of copy, and the live figures are the reason the rail
   exists. Named areas rather than order, because the DOM already runs
   lead -> rail -> body, which is the correct stacked reading order. */
.split--lead { grid-template-areas: "lead rail" "body rail"; grid-template-rows: auto 1fr; }
.split--lead .stage--lead { grid-area: lead; }
.split--lead .rail { grid-area: rail; }
.split--lead .stage--body { grid-area: body; }
.rail {
  border-left: 1px solid var(--rule);
  background: var(--ink-raised);
}
.rail__inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.rail__more { display: inline-block; margin-top: var(--space-3); color: var(--accent); font-size: var(--step--1); font-weight: 700; }
.rail__more:hover { color: var(--accent-strong); }
.rail__split { font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* --- play plate ----------------------------------------------------------- */
.plate { position: relative; aspect-ratio: 16 / 9; background: var(--ink-inset); overflow: hidden; }
.plate iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.poster__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 4%, color-mix(in srgb, var(--ink) 74%, transparent) 44%, transparent 72%); }
.poster__body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding-inline: clamp(var(--space-6), 4vw, var(--space-12));
  max-width: 32rem;
}
.poster__mark { height: clamp(60px, 6.5vw, 96px); width: auto; align-self: flex-start; }
.poster__tagline { font-size: var(--step-1); font-weight: 700; }
.poster__cta {
  align-self: flex-start;
  font-size: var(--step-2); font-weight: 800;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  background: var(--accent-fill); color: var(--text); border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease);
}
.poster:hover .poster__cta, .poster:focus-visible .poster__cta { background: var(--accent-fill-hover); }
.poster__note { color: var(--text-muted); font-size: var(--step--1); }

.platforms {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.platform {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-1);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
}
.platform:hover { border-color: var(--accent); }
.platform svg { width: 15px; height: 15px; }
.platform__sub { color: var(--text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Escape hatch to the standalone game page, as on the live poster. */
.poster__fs { color: var(--text-muted); font-size: var(--step--1); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.poster__fs:hover { color: var(--text); text-decoration-style: solid; }

/* --- rating ----------------------------------------------------------------
   A vote, not a read-out: the stars are buttons, hovering previews the score
   and the state line says what happened. Locked once this visitor has voted or
   cannot vote, which is why the cursor and the colour both change. */
.rate { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rate__stars { display: inline-flex; }
.rate__star {
  font: inherit; font-size: 22px; line-height: 1;
  padding: 0 1px; background: none; border: 0; cursor: pointer;
  color: var(--rule-strong);
  transition: color var(--dur-fast) var(--ease);
}
.rate__star.is-on { color: var(--trophy); }
.rate__stars.is-locked .rate__star { cursor: default; }
.rate__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate__state { color: var(--text-faint); font-size: var(--step--1); white-space: nowrap; }

/* --- editorial ------------------------------------------------------------ */
.chapters { padding: var(--space-8) var(--gutter) var(--space-12); }
.chapter + .chapter { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--rule); }
.chapter__title { font-size: var(--step-2); font-weight: 800; letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 var(--space-4); color: var(--text-muted); }
.prose p:last-child { margin-bottom: 0; }
.prose.lede p:first-child { font-size: var(--step-1); color: var(--text); }
.prose strong { color: var(--text); font-weight: 700; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-strong); }

.modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.modes li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6) var(--space-4) 0; }
.modes li + li { border-left: 1px solid var(--rule); padding-left: var(--space-6); }
.modes__tag { font-size: var(--step-2); font-weight: 800; color: var(--accent); letter-spacing: var(--tracking-tight); line-height: 1; }
.modes__name { font-weight: 700; }

.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 700;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--text-muted); font-weight: 400; }
.faq__item[open] summary::after { content: '\2212'; }
.faq__item p { margin: 0 0 var(--space-4); color: var(--text-muted); max-width: 68ch; }
.faq__item a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq__item a:hover { color: var(--accent-strong); }

/* --- rail ----------------------------------------------------------------- */
.rail__block { padding: var(--space-6); }
.rail__block + .rail__block { border-top: 1px solid var(--rule); }
.rail__figure { font-size: var(--step-3); margin-top: var(--space-3); }

/* Cup and name share a baseline, not a box centre: centring puts the cup half a
   descender high, because the name's box includes the descender of a "y" while
   the cup glyph does not. The cup is sized in em so the pair stays locked as the
   name's step changes between the full block and the empty state. */
.winner { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-2); min-width: 0; font-size: var(--step-3); }
.winner__cup { width: 0.72em; height: 0.72em; flex: none; color: var(--trophy); align-self: baseline; }
.winner__name { font-size: 1em; font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner--empty { font-size: var(--step-0); }
.winner--empty .winner__name { color: var(--text-muted); }
.winner--empty .winner__cup { color: var(--text-faint); }

.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--positive); margin-right: var(--space-3); vertical-align: middle; }
.dot--live { animation: pulse 2s var(--ease) infinite; }
.dot--stale { background: var(--text-faint); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } }

.top { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.top li { display: grid; grid-template-columns: 1.6rem auto 1fr auto; gap: var(--space-3); align-items: center; padding-block: var(--space-3); }
.top li + li { border-top: 1px solid var(--rule); }
.top__rank { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.top__skin { width: 30px; height: 30px; border-radius: var(--radius-1); background: var(--ink-inset); border: 1px solid var(--rule); overflow: hidden; }
.top__skin img {
  /* Full-body render: width-fit puts the head at the top of the box and the crop takes the
     rest. 150% zooms past the shoulders so the face reads at 30px instead of a torso. */
  width: 150%; height: auto; display: block; margin-left: -25%; margin-top: -6%;
}
.top__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.top__trophies { display: inline-flex; align-items: center; gap: 5px; color: var(--trophy); font-variant-numeric: tabular-nums; font-weight: 700; }
.top__trophies svg { width: 13px; height: 13px; flex: none; }

.pass { margin-top: var(--space-3); }
.pass__track { height: 8px; background: var(--ink-inset); border: 1px solid var(--rule); border-radius: var(--radius-1); overflow: hidden; }
/* scaleX rather than width: animating width relayouts the track every frame, and this
   audience feels that on a school Chromebook. */
.pass__fill { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); }
.pass__ends { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.colophon { padding: var(--space-8) var(--gutter) var(--space-12); border-top: 1px solid var(--rule); color: var(--text-faint); font-size: var(--step--1); }
.colophon p { margin: 0; max-width: 68ch; }
.colophon__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
.colophon__nav a { font-weight: 700; }
.colophon a { color: var(--text-muted); }
.colophon a:hover { color: var(--text); }

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .split--lead { grid-template-areas: "lead" "rail" "body"; grid-template-rows: auto auto auto; }
  .rail { border-left: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .rail__inner { position: static; max-height: none; overflow: visible; }
  .modes { grid-template-columns: 1fr; }
  .modes li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
}

/* Below the desktop masthead width the nav wraps onto its own line and scrolls
   sideways rather than disappearing: hiding it leaves a phone with no way to
   reach the leaderboard, tournaments or the guides at all. */
@media (max-width: 900px) {
  .masthead { flex-wrap: wrap; gap: var(--space-4); }
  .masthead__logo { height: 34px; }
  .masthead__actions { margin-left: auto; }
  .menu {
    order: 3; width: 100%; margin-inline: 0;
    gap: var(--space-6); overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; font-size: var(--step--1); }
  .embed__label { display: none; }
  .acc__name { display: none; }
}
/* ============================================================================
   Page components
   ========================================================================== */

/* --- page head -------------------------------------------------------------
   The title band every inner page opens with. It replaces the old centred hero:
   a left-aligned title on a rule reads as a section of a site, where a centred
   one reads as a landing page that happens to be about tournaments. */
.pagehead { padding: var(--space-8) var(--gutter) var(--space-6); border-bottom: 1px solid var(--rule); }
.pagehead h1 {
  margin: 0; font-size: var(--step-3); font-weight: 800;
  letter-spacing: var(--tracking-tight); line-height: 1;
}
.pagehead p { margin: var(--space-3) 0 0; color: var(--text-muted); max-width: 68ch; }
.pagehead__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }

/* --- filters ---------------------------------------------------------------
   Segmented controls, not dropdowns: there are four modes and two periods, and
   a visitor comparing them should see all the options without a click. */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4) var(--gutter); border-bottom: 1px solid var(--rule); }
.filterset { display: flex; align-items: center; gap: var(--space-3); }
.filterset > .label { flex: none; }
.tabs { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-1); overflow: hidden; }
.tabs button {
  font: inherit; font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabs button + button { border-left: 1px solid var(--rule); }
.tabs button:hover { color: var(--text); }
.tabs button[aria-pressed="true"] { background: var(--accent-fill); color: var(--text); }
/* A muted counter inside a pressed tab sits on the accent fill, where --text-muted
   loses too much contrast; lift it instead of leaving it grey-on-blue. */
.tabs button[aria-pressed="true"] .muted { color: color-mix(in srgb, var(--text) 78%, transparent); }

/* --- data table ------------------------------------------------------------
   Rules instead of zebra striping or cards: the leaderboard is read across a
   row, and a striped background fights the eye doing that. Numeric columns are
   tabular and right-aligned so ranks and trophies stack into readable columns. */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap; }
.table th {
  font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
  position: sticky; top: 0; background: var(--ink); z-index: 1;
}
.table td { border-bottom: 1px solid var(--rule); }
.table tbody tr:hover td { background: var(--ink-raised); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .rank { width: 4rem; color: var(--text-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.table .trophies { color: var(--trophy); font-weight: 800; }
.table tr[data-you="1"] td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.table tr[data-you="1"] .rank, .table tr[data-you="1"] .player__name { color: var(--accent); }

/* A player cell: avatar + name, used by the leaderboard and the bracket. */
.player { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.player__skin {
  width: 30px; height: 30px; flex: none; overflow: hidden;
  background: var(--ink-inset); border: 1px solid var(--rule); border-radius: var(--radius-1);
}
/* Full-body renders: fit to width and clip, or the crop shows a belt. */
.player__skin img { width: 150%; height: auto; display: block; margin-left: -25%; margin-top: -6%; }
.player__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.player__name a:hover { color: var(--accent); }

/* --- states ----------------------------------------------------------------
   One empty/loading/error treatment for the whole site. Pages that invent their
   own end up with three different ways of saying "nothing here yet". */
.state { padding: var(--space-12) var(--gutter); color: var(--text-muted); text-align: center; }
.state strong { display: block; color: var(--text); font-size: var(--step-1); margin-bottom: var(--space-2); }

/* --- cards -----------------------------------------------------------------
   Used for tournaments and downloads. A card here is a bordered plate, not a
   floating panel: no shadow, no blur, no lift on hover -- the border and the
   heading do the work, which keeps a grid of them calm at a dozen items. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.card { display: block; padding: var(--space-6); background: var(--ink); transition: background var(--dur-fast) var(--ease); }
a.card:hover { background: var(--ink-raised); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.card__title { margin: 0; font-size: var(--step-1); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.card__meta { font-size: var(--step--1); color: var(--text-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card__note { font-size: var(--step--1); color: var(--accent); font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.card__stats dt { font-size: var(--step--1); color: var(--text-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.card__stats dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.card__stats .trophy { color: var(--trophy); }

/* --- badge -----------------------------------------------------------------
   State, not decoration: live, open, finished. Square-ish and hairline, like
   everything else -- a pill with a glow would be the loudest thing on a page
   whose subject is a bracket. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  padding: 2px var(--space-2);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--radius-1);
}
.badge--live { color: var(--accent); }
.badge--open { color: var(--positive); }
.badge--done { color: var(--text-faint); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Floating deep-link to a bracket with unread opponent messages. Fixed rather
   than in the rail because it is an interruption, not a statistic. */
.chatchip {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 80;
  padding: var(--space-3) var(--space-5);
  font-weight: 700; color: var(--text);
  background: var(--accent-fill); border-radius: var(--radius-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.chatchip:hover { background: var(--accent-fill-hover); }

/* --- buttons ---------------------------------------------------------------
   Two weights only: the action a page exists for, and everything else. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 800; font-size: var(--step-0);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-1);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--accent-fill); color: var(--text); }
.btn--primary:hover { background: var(--accent-fill-hover); }
.btn--ghost { background: none; color: var(--text-muted); border-color: var(--rule); }
.btn--ghost:hover { color: var(--text); border-color: var(--rule-strong); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- headline figures ------------------------------------------------------
   The four numbers that describe a tournament, or any similar set. Separated by
   rules rather than boxed into cards, so they read as one row of facts. */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.statgrid > div { padding: var(--space-5) var(--gutter); background: var(--ink); }
.statgrid dt { font-size: var(--step--1); color: var(--text-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.statgrid dd { margin: var(--space-2) 0 0; font-size: var(--step-2); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.statgrid .trophy { color: var(--trophy); }

/* --- section ---------------------------------------------------------------
   A titled band of content inside a page. */
.band { padding: var(--space-8) var(--gutter); border-bottom: 1px solid var(--rule); }
.band__title { margin: 0 0 var(--space-5); font-size: var(--step-1); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.band__title--sub { font-size: var(--step-0); color: var(--text-muted); }

/* --- your-match panel ------------------------------------------------------
   The one place on a bracket page that speaks to the visitor personally, so it
   is the one place carrying the accent edge. */
.panel { padding: var(--space-6) var(--gutter); border-bottom: 1px solid var(--rule); border-left: 2px solid var(--accent); background: var(--ink-raised); }
.panel__kicker { display: block; margin-bottom: var(--space-2); color: var(--accent); }
.panel__title { margin: 0 0 var(--space-2); font-size: var(--step-2); font-weight: 800; letter-spacing: var(--tracking-tight); }
.panel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.panel__series { font-size: var(--step-1); font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: var(--space-3); }
.panel__series b { color: var(--accent); }
.panel p { margin: 0 0 var(--space-3); max-width: 68ch; }
.panel__warn { padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--trophy) 45%, transparent); color: var(--trophy); border-radius: var(--radius-1); font-size: var(--step--1); }
.panel__sub { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.code { font-weight: 800; letter-spacing: 0.3em; color: var(--accent); user-select: all; }

/* --- bracket ---------------------------------------------------------------
   A round selector plus that round's matches: a 32-player bracket does not fit
   a screen horizontally, and a page that scrolls sideways is a page nobody
   reads on a phone. */
.matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-4); }
.match { border: 1px solid var(--rule); border-radius: var(--radius-1); }
.match__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.match__row + .match__row { border-top: 1px solid var(--rule); }
.match__row--win { background: color-mix(in srgb, var(--positive) 9%, transparent); }
.match__row--win .match__name { color: var(--text); }
.match__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.match__name a:hover { color: var(--accent); }
.match__seed { color: var(--text-faint); margin-right: var(--space-2); font-variant-numeric: tabular-nums; }
.match__tbd { color: var(--text-faint); font-weight: 400; }
.match__score { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.match__stat { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--text-muted); background: var(--ink-inset); }
.match__label { grid-column: 1 / -1; color: var(--trophy); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* --- standings -------------------------------------------------------------
   Final places. Grouped rows for tied places, which is the normal outcome for
   3rd–4th when a bracket has no bronze match. */
.standings { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.standings__row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4); padding: var(--space-3) var(--gutter); background: var(--ink); align-items: baseline; }
.standings__place { font-weight: 800; font-variant-numeric: tabular-nums; }
.standings__row--first .standings__place { color: var(--trophy); }
.standings__row--active { color: var(--text-muted); }
.standings__names a:hover { color: var(--accent); }

/* --- match chat ------------------------------------------------------------
   Private, two-person, and short-lived: styled as a transcript rather than as a
   messenger, because it exists to line up one match. */
.chat__log { display: flex; flex-direction: column; gap: var(--space-2); max-height: 15rem; overflow-y: auto; margin-bottom: var(--space-3); }
.chat__msg { display: flex; flex-direction: column; max-width: 85%; }
.chat__msg--mine { align-self: flex-end; align-items: flex-end; }
.chat__who { font-size: var(--step--1); color: var(--text-faint); margin: 0 4px 1px; }
.chat__bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: var(--ink-inset); border: 1px solid var(--rule); }
.chat__msg--mine .chat__bubble { background: color-mix(in srgb, var(--accent) 18%, var(--ink-inset)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.chat__form { display: flex; gap: var(--space-2); }
.chat__form input {
  flex: 1; min-width: 0; font: inherit; color: var(--text);
  background: var(--ink-inset); border: 1px solid var(--rule); border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
}
.chat__form input:focus-visible { border-color: var(--accent); }
.chat__note { font-size: var(--step--1); color: var(--text-faint); margin-top: var(--space-2); }
.chat__jump { align-self: center; margin-bottom: var(--space-2); }

/* --- profile ---------------------------------------------------------------
   Profiles carry no live rail: the page is already one player's standing, and a
   second column of everyone else's numbers competes with it. The identity block
   therefore runs the full width, with the figures directly under it. */
.profile { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--gutter); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.profile__avatar {
  width: 96px; height: 96px; flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: var(--ink-inset); border: 1px solid var(--rule); border-radius: var(--radius-2);
  font-size: var(--step-3); font-weight: 800; color: var(--text-faint);
}
/* Full-body render: fit to width, clip below, so the face is what shows. */
.profile__avatar img { width: 150%; height: auto; display: block; margin-left: -25%; margin-top: -6%; }
.profile__ident { min-width: 0; flex: 1; }
.profile__name { margin: 0; font-size: var(--step-3); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1; overflow-wrap: anywhere; }
.profile__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); color: var(--text-muted); }
.profile__rank { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- achievements ----------------------------------------------------------
   The tier is the information, so it owns the border and the label colour; the
   plate itself stays the same ink as everything else. No glow: a wall of glowing
   tiles turns a shelf of achievements into a slot machine. */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-4); }
.badge-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4); text-align: center;
  border: 1px solid var(--tier, var(--rule)); border-radius: var(--radius-2);
  background: var(--ink);
}
.badge-card__icon { width: 64px; height: 64px; display: grid; place-items: center; font-size: 34px; }
.badge-card__icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.badge-card__name { font-weight: 800; line-height: 1.2; }
.badge-card__tier { font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tier, var(--text-muted)); }

/* --- match history ---------------------------------------------------------
   A log, read top to bottom: outcome first because that is what the eye looks
   for, then mode, opponent, and when. */
.matchlist { border-block: 1px solid var(--rule); }
.matchrow {
  display: grid; grid-template-columns: 2.5rem 1fr 1fr auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--gutter);
}
.matchrow + .matchrow { border-top: 1px solid var(--rule); }
.matchrow__result { font-weight: 800; font-size: var(--step-1); line-height: 1; }
.matchrow__result--w { color: var(--positive); }
.matchrow__result--l { color: var(--negative); }
.matchrow__mode { font-weight: 700; }
.matchrow__comp { color: var(--trophy); margin-left: 4px; }
.matchrow__opp, .matchrow__when { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchrow__when { font-variant-numeric: tabular-nums; text-align: right; }

/* An achievement the player has not earned: dimmed, still legible, still says
   what it takes. Hiding them would remove the reason to chase any of them. */
.badge-card--locked { opacity: 0.55; }
.badge-card--locked .badge-card__icon img { filter: grayscale(1) brightness(0.6); }
.badge-card__desc { font-size: var(--step--1); color: var(--text-muted); line-height: 1.35; }
.badge-card__date { font-size: var(--step--1); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* --- share row -------------------------------------------------------------
   Only shown once a player has a public id to share. */
.share { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --- my tournaments --------------------------------------------------------
   Same plate as the tournament cards, but each row leads with what this player
   has to do next rather than with the prize pool. */
.mine { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.mine__row { display: block; padding: var(--space-4) var(--gutter); background: var(--ink); }
a.mine__row:hover { background: var(--ink-raised); }
.mine__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.mine__name { font-weight: 800; font-size: var(--step-1); letter-spacing: var(--tracking-tight); }
.mine__line { color: var(--text-muted); margin-top: var(--space-1); }
.mine__line b { color: var(--accent); font-weight: 700; }

/* --- numbered steps --------------------------------------------------------
   Install instructions: the number is the anchor, so it hangs in the margin and
   the text keeps one left edge however long a step runs.

   The marker is absolutely positioned rather than a grid column on purpose: in
   a grid, every inline child of the item (a <b>, a link) becomes its own grid
   item and breaks onto a new row. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: var(--space-3) 0 var(--space-3) 2.5rem; }
.steps li + li { border-top: 1px solid var(--rule); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: var(--space-3);
  font-weight: 800; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.steps b { color: var(--text); }

/* Feature ticks inside a platform card. Same hanging-marker reason as above. */
.ticks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ticks li { position: relative; padding-left: 1.5rem; color: var(--text-muted); }
.ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--positive); font-weight: 800; }

/* A tick list laid out as one row, for a short set of reassurances under a
   call to action. Falls back to the stacked list on narrow screens. */
.ticks--row { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--space-6); }
@media (max-width: 720px) { .ticks--row { grid-auto-flow: row; gap: var(--space-2); } }

/* Inline link inside prose and panels. */
.link { color: var(--accent); font-weight: 700; }
.link:hover { color: var(--accent-strong); }

/* --- article ---------------------------------------------------------------
   Guides are the one place on the site where reading, not scanning, is the job.
   The measure is capped near 68 characters and the vertical rhythm is looser
   than anywhere else; everything else in the system stays as it is. */
.article { max-width: 46rem; padding: var(--space-8) var(--gutter) var(--space-12); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); color: var(--text-faint); font-size: var(--step--1); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.article__title { margin: 0 0 var(--space-6); font-size: var(--step-3); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); color: var(--text-muted); font-size: var(--step--1); }

.article__body { font-size: var(--step-0); }
.article__body h2 { margin: var(--space-12) 0 var(--space-4); font-size: var(--step-2); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.article__body h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--step-1); font-weight: 700; }
.article__body p { margin: 0 0 var(--space-5); color: var(--text-muted); line-height: 1.75; }
.article__body strong { color: var(--text); font-weight: 700; }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--accent-strong); }
.article__body ul, .article__body ol { margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.article__body ul li, .article__body ol li { position: relative; padding: var(--space-2) 0 var(--space-2) 1.5rem; color: var(--text-muted); line-height: 1.7; }
.article__body ul li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.article__body ol { counter-reset: item; }
.article__body ol li { padding-left: 2rem; }
.article__body ol li::before { counter-increment: item; content: counter(item) '.'; position: absolute; left: 0; color: var(--text-faint); font-weight: 800; font-variant-numeric: tabular-nums; }
.article__body blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border-left: 2px solid var(--accent); background: var(--ink-raised); color: var(--text); }
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body code { padding: 1px 6px; background: var(--ink-inset); border: 1px solid var(--rule); border-radius: var(--radius-1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--text); }

/* A keycap inside a guide: the guides name keys constantly, and italic or bold
   does not read as "press this". */
.key {
  display: inline-block; padding: 1px 7px; margin: 0 1px;
  background: var(--ink-inset); border: 1px solid var(--rule-strong); border-bottom-width: 2px;
  border-radius: var(--radius-1);
  font-size: 0.9em; font-weight: 700; color: var(--text);
}

/* Pull-out advice inside a guide. */
.tip { margin: var(--space-6) 0; padding: var(--space-5); border: 1px solid var(--rule-strong); border-left: 2px solid var(--trophy); border-radius: var(--radius-1); background: var(--ink-raised); }
.tip__label { display: block; margin-bottom: var(--space-2); color: var(--trophy); font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.tip p:last-child { margin-bottom: 0; }

/* Post list on the blog index. */
.posts { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.post { display: block; padding: var(--space-6) var(--gutter); background: var(--ink); }
a.post:hover { background: var(--ink-raised); }
.post__title { margin: 0 0 var(--space-2); font-size: var(--step-1); font-weight: 800; letter-spacing: var(--tracking-tight); }
.post__excerpt { margin: 0; color: var(--text-muted); max-width: 68ch; }

/* Podium colours for the first three rows, matching the live leaderboard. The
   glow the old page paired with them is dropped: on an ink page the hue alone
   already separates them, and three glowing rows fight the trophy column. */
.table .rank--1 { color: var(--medal-gold); }
.table .rank--2 { color: var(--medal-silver); }
.table .rank--3 { color: var(--medal-bronze); }

/* --- announcement ----------------------------------------------------------
   Admin-driven banner above the game. Three levels, each carrying its own edge
   colour: info is routine, warn is a heads-up, critical means something is
   broken right now. The band is quiet by default because most of the time it
   says "new season on Friday", not "servers are down". */
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--gutter); border-bottom: 1px solid var(--rule); border-left: 2px solid var(--level, var(--accent)); background: var(--ink-raised); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--level, var(--accent)); }
.notice__text { flex: 1; }
.notice__text a { color: var(--level, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.notice--info { --level: var(--accent); }
.notice--warn { --level: var(--trophy); }
.notice--critical { --level: var(--negative); }

/* Quiet route to the downloads page next to the two direct-download buttons:
   the buttons fetch the files, this leads to install steps and the comparison. */
.platforms__all { font-size: var(--step--1); }