/**
 * The rank panel, and the path across it — the block under `.boards`.
 *
 * Its own file since 0.58.0 (cut 3): it was the tail of the game's
 * stylesheet, and it is the platform's, not the game's — the boards live
 * outside the widget on every arena page. Loaded by every page that has
 * boards, after `tokens.css`.
 */

/* ==================================================================== *
 * THE RANK PANEL, AND THE PATH ACROSS IT                       0.40.0
 *
 * READ THIS BEFORE ADDING A RULE HERE.
 *
 * Everything else in this file is scoped under `.ax-game`, which is the
 * game widget. This block is not, and cannot be: the boards live outside
 * the widget, in the page. Every rule below is scoped under
 * `.boards [data-rank]` instead — the panel's own root — so it still
 * cannot leak into anything else. A rule added here without that prefix
 * escapes into the whole document, and the failure is silent.
 *
 * It lives in this stylesheet rather than in the two arena pages because
 * it was in both of them, in full, and two copies of one design is one
 * copy that quietly stops matching. This file is loaded by exactly the
 * pages that have boards.
 *
 * THE TOKENS ARE THE BLOCK'S OWN. `--oro` and friends are declared on
 * `.ax-game` and are not in scope out here, and the arena page's `:root`
 * names are a different set again. Declaring them on the panel keeps this
 * block readable on its own and stops it breaking if a page's palette is
 * renamed. (The old copy referenced `--cream`, which no page defined; the
 * multiplier badge has been printing gold-on-black ever since.)
 * ==================================================================== */

.boards [data-rank]{
  --rk-paper:#F6F4EE; --rk-surface:#FFFFFF; --rk-ink:#080808;
  --rk-read:#1C1C1A; --rk-note:#4A4A46;
  --rk-ink-50:rgba(8,8,8,.50); --rk-ink-40:rgba(8,8,8,.40);
  --rk-line:rgba(8,8,8,.10); --rk-line-soft:rgba(8,8,8,.06);
  --rk-gold:#C9A84C; --rk-gold-deep:#8A6A22; --rk-gold-high:#D4A840;
  --rk-cream:#FFF8DC; --rk-low:#C4452F;
  --rk-sans:'Jost',system-ui,sans-serif;
  --rk-mono:'JetBrains Mono','Courier New',monospace;
  --rk-serif:'Cormorant Garamond',Georgia,serif;
  --rk-ease:cubic-bezier(.25,.46,.45,.94);

  border:1px solid var(--rk-line);border-radius:16px;
  background:var(--rk-surface);padding:26px 28px 24px;
}
/* The rank panel is always a row of its own. */
.boards > [data-rank]{flex:1 1 100%}

/* ---------------- who they are, and the two figures ---------------- */
.boards [data-rank] .rk-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.boards [data-rank] .rk-who{display:flex;align-items:center;gap:18px;min-width:0}
/* `width:max-content` and no stretching: the frame below rings this element,
   and a flex item stretched to its line drew an oval instead of a circle. */
.boards [data-rank] .rk-badge{
  display:inline-flex;flex:none;width:max-content;color:var(--rk-gold);
}
.boards [data-rank] .rk-badge[data-age="1"]{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-badge[data-age="4"]{color:var(--rk-gold-high)}
.boards [data-rank] .rk-emblem{display:block}
.boards [data-rank] .rk-kicker{
  font-family:var(--rk-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rk-ink-40);
}
.boards [data-rank] .rk-name{
  font-family:var(--rk-serif);font-size:40px;font-weight:300;
  line-height:1.05;margin-top:2px;color:var(--rk-ink);
}
.boards [data-rank] .rk-desc{
  font-size:15px;line-height:1.5;color:var(--rk-note);margin:4px 0 0;max-width:52ch;
}
.boards [data-rank] .rk-figures{display:flex;gap:34px;align-items:flex-start}
.boards [data-rank] .rk-fig .n{
  font-family:var(--rk-serif);font-size:38px;font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--rk-ink);
}
.boards [data-rank] .rk-fig .ax-et{
  font-family:var(--rk-sans);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rk-ink-40);margin-top:4px;
}

/* ---------------- one bar: how far through this rank ---------------- */
.boards [data-rank] .rk-progress{
  display:flex;align-items:center;gap:18px;margin-top:26px;
}
.boards [data-rank] .rk-bar{
  flex:1;height:6px;border-radius:999px;background:rgba(8,8,8,.10);overflow:hidden;
}
.boards [data-rank] .rk-bar i{
  display:block;height:100%;background:var(--rk-gold);
  transition:width 620ms var(--rk-ease);
}
.boards [data-rank] .rk-missing{
  font-size:14px;color:var(--rk-note);white-space:nowrap;
}

/* ---------------- the four ages ----------------
   Each block grows with the number of ranks it holds, so the header lines
   up with the nodes below it instead of cutting across them in quarters. */
.boards [data-rank] .rk-ages{
  display:flex;margin-top:24px;border-bottom:1px solid var(--rk-line);padding-bottom:8px;
}
.boards [data-rank] .rk-age{
  flex-basis:0;min-width:0;padding-left:12px;
  border-left:1px solid var(--rk-line);color:var(--rk-ink-50);
}
.boards [data-rank] .rk-age.is-here{color:var(--rk-ink);border-left-color:var(--rk-gold)}
.boards [data-rank] .rk-age .t{
  display:block;font-family:var(--rk-sans);font-weight:500;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.boards [data-rank] .rk-age .t-short{display:none}
.boards [data-rank] .rk-age .r{
  display:block;font-family:var(--rk-mono);font-size:10px;
  color:var(--rk-ink-40);margin-top:3px;white-space:nowrap;
}

/* ---------------- the fifteen, in a line ---------------- */
.boards [data-rank] .rk-path{position:relative;margin-top:18px}
/* The line sits behind the row of nodes, inset by half a node so it starts
   and ends under the first and last emblem rather than at the panel edge. */
.boards [data-rank] .rk-line,
.boards [data-rank] .rk-line-done{
  position:absolute;top:23px;left:10px;height:2px;
}
.boards [data-rank] .rk-line{right:10px;background:rgba(8,8,8,.10)}
.boards [data-rank] .rk-line-done{
  background:var(--rk-gold);max-width:calc(100% - 20px);
  transition:width 620ms var(--rk-ease);
}
.boards [data-rank] .rk-scroll{overflow:visible}
.boards [data-rank] .rk-track{position:relative;min-width:0}
.boards [data-rank] .rk-nodes{position:relative;display:flex;align-items:flex-start}
.boards [data-rank] .rk-node{
  flex:1;min-width:0;padding:0 2px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:none;
}
.boards [data-rank] .rk-node .dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--rk-surface);border:1px solid rgba(8,8,8,.08);
  color:rgba(8,8,8,.30);
  /* A 48px lane whatever the size of the circle inside it, so the current
     node growing to 46px does not shove its neighbours' names down. */
  margin:9px 0;
}
.boards [data-rank] .rk-node.is-done .dot{
  background:rgba(201,168,76,.10);border-color:rgba(201,168,76,.35);
}
.boards [data-rank] .rk-node.is-done[data-age="1"] .dot{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-node.is-done[data-age="2"] .dot,
.boards [data-rank] .rk-node.is-done[data-age="3"] .dot{color:var(--rk-gold)}
.boards [data-rank] .rk-node.is-done[data-age="4"] .dot{color:var(--rk-gold-high)}
.boards [data-rank] .rk-node.is-here .dot{
  width:46px;height:46px;margin:1px 0;
  background:rgba(201,168,76,.20);border:2px solid var(--rk-gold);
}
/* Beyond the horizon: the same shape, fainter still. The name is withheld
   by `visibleScale()`, not by this rule — see src/ui/boards.js. */
.boards [data-rank] .rk-node.is-locked .dot{color:rgba(8,8,8,.16)}
.boards [data-rank] .rk-node .lbl{
  font-family:var(--rk-sans);font-weight:400;font-size:10px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--rk-ink-50);line-height:1.3;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.boards [data-rank] .rk-node.is-done .lbl{color:var(--rk-note)}
.boards [data-rank] .rk-node.is-here .lbl{color:var(--rk-ink);font-weight:500}
.boards [data-rank] .rk-node.is-locked .lbl{
  color:rgba(8,8,8,.28);font-family:var(--rk-mono);text-transform:none;
}
.boards [data-rank] a.rk-node:hover .lbl{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-node:focus-visible{outline:2px solid var(--rk-gold);outline-offset:3px;border-radius:8px}

/* ---------------- the window over a node ---------------- */
.boards [data-rank] .rk-tip{
  position:absolute;top:calc(100% + 12px);z-index:6;width:250px;
  /* Set by the script as percentages of the path. They are custom
     properties rather than inline styles so the narrow-screen rule below
     can ignore them: once the path scrolls sideways, a percentage of the
     path is no longer where the node is on screen. */
  left:var(--rk-tip-left,50%);
  transform:translateX(var(--rk-tip-tx,-50%));
  background:var(--rk-surface);border:1px solid rgba(201,168,76,.45);
  border-radius:12px;padding:14px 16px;
  box-shadow:0 8px 24px rgba(8,8,8,.10);
  /* Nothing in it is a target: it follows the pointer's node, and a pointer
     crossing it would take the focus off the node that opened it. */
  pointer-events:none;
}
.boards [data-rank] .rk-tip-head{display:flex;align-items:center;gap:11px}
.boards [data-rank] .rk-tip-head .rk-emblem{color:var(--rk-gold)}
.boards [data-rank] .rk-tip[data-age="1"] .rk-tip-head .rk-emblem{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-tip[data-age="4"] .rk-tip-head .rk-emblem{color:var(--rk-gold-high)}
.boards [data-rank] .rk-tip.is-hidden-rank .rk-tip-head .rk-emblem{color:rgba(8,8,8,.22)}
.boards [data-rank] .rk-tip .w{min-width:0}
.boards [data-rank] .rk-tip .nm{
  display:block;font-family:var(--rk-sans);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rk-ink);line-height:1.2;
}
.boards [data-rank] .rk-tip .meta{
  display:block;font-family:var(--rk-mono);font-size:10px;
  color:var(--rk-ink-40);margin-top:3px;
}
.boards [data-rank] .rk-tip-desc{
  font-size:13px;line-height:1.5;color:var(--rk-note);margin:10px 0 0;
}
.boards [data-rank] .rk-tip-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--rk-line);margin-top:10px;padding-top:9px;
}
.boards [data-rank] .rk-tip-foot .l{
  font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--rk-gold-deep);
}
.boards [data-rank] .rk-tip-foot .v{
  font-family:var(--rk-mono);font-size:12px;color:var(--rk-ink);
}
@media (prefers-reduced-motion: no-preference){
  .boards [data-rank] .rk-tip{animation:rk-tip-in 160ms var(--rk-ease) both}
}
@keyframes rk-tip-in{from{opacity:0;transform-origin:top center}to{opacity:1}}

/* ---------------- what comes next ---------------- */
.boards [data-rank] .rk-next{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;
  border-top:1px solid var(--rk-line);padding-top:16px;
}
.boards [data-rank] .rk-next > .ax-et{
  font-family:var(--rk-sans);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rk-gold-deep);margin-right:6px;
}
.boards [data-rank] .rk-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--rk-line);background:var(--rk-surface);
  border-radius:999px;padding:7px 14px 7px 9px;text-decoration:none;
  color:var(--rk-gold);
  transition:border-color 240ms var(--rk-ease),background 240ms var(--rk-ease);
}
.boards [data-rank] .rk-pill[data-age="1"]{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-pill[data-age="4"]{color:var(--rk-gold-high)}
.boards [data-rank] .rk-pill.is-now{
  border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.10);
}
.boards [data-rank] .rk-pill:hover{border-color:rgba(201,168,76,.45)}
.boards [data-rank] .rk-pill:focus-visible{outline:2px solid var(--rk-gold);outline-offset:2px}
.boards [data-rank] .rk-pill .nm{
  font-family:var(--rk-sans);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rk-read);
}
.boards [data-rank] .rk-pill .pt{
  font-family:var(--rk-mono);font-size:11px;color:rgba(8,8,8,.45);
  font-variant-numeric:tabular-nums;
}

.boards [data-rank] .board-note{
  font-size:13px;line-height:1.55;color:rgba(8,8,8,.55);margin:12px 0 0;
}
/* The way out to the public page, inside the note rather than beside it,
   so it reads as part of the sentence about the horizon. */
.boards [data-rank] .rk-more{
  color:var(--rk-gold-deep);text-decoration:none;
  border-bottom:1px solid rgba(138,106,34,.35);white-space:nowrap;
}
.boards [data-rank] .rk-more:hover{color:var(--rk-ink);border-color:var(--rk-ink)}

/* ---------------- the cabinet and the marks, side by side ---------------- */
.boards [data-rank] .rk-cols{display:flex;flex-wrap:wrap;gap:20px;margin-top:18px}
.boards [data-rank] .rk-col{
  flex:1 1 420px;min-width:0;
  border-top:1px solid var(--rk-line);padding-top:18px;
}
.boards [data-rank] .rk-scale-t,
.boards [data-rank] .rk-marks-t{
  display:block;font-family:var(--rk-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rk-gold-deep);margin:0 0 12px;
}

/* Three places, won or waiting. A dashed outline says what the cabinet is
   for; an empty space says nothing, and the difference matters most to
   somebody who has none yet. */
.boards [data-rank] .rk-cab{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* Grid rather than a flex row: `drawCabinet()` appends the art, the name and
   the date as three siblings, and in a row they sat side by side and the name
   wrapped to three lines. The art spans both rows; the two lines stack. */
.boards [data-rank] .rk-medal{
  flex:1 1 140px;min-width:0;
  display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;
  border:1px solid rgba(201,168,76,.45);background:rgba(201,168,76,.06);
  border-radius:12px;padding:12px;color:var(--rk-gold);
}
.boards [data-rank] .rk-medal .art{grid-row:1 / span 2;grid-column:1}
.boards [data-rank] .rk-medal .nm{grid-column:2;align-self:end}
.boards [data-rank] .rk-medal .dd{grid-column:2;align-self:start}
.boards [data-rank] .rk-medal[data-place="3"]{color:var(--rk-gold-deep)}
.boards [data-rank] .rk-medal.is-empty{
  border-color:var(--rk-line);background:var(--rk-surface);
  color:var(--rk-ink-50);opacity:.65;
}
.boards [data-rank] .rk-medal.is-empty .rk-emblem{stroke-dasharray:7 6}
.boards [data-rank] .rk-medal .art{position:relative;width:44px;height:44px;flex:none}
.boards [data-rank] .rk-medal .art .rk-emblem{width:44px;height:44px}
/* The multiplier rides on the medal, so a row of three reads as three
   places and not as six things. */
.boards [data-rank] .rk-medal .mult{
  position:absolute;right:-6px;bottom:-2px;
  background:var(--rk-ink);color:var(--rk-cream);
  font-family:var(--rk-mono);font-size:9px;font-weight:400;line-height:1;
  padding:4px 5px;border-radius:999px;
}
.boards [data-rank] .rk-medal .nm{font-size:13px;line-height:1.3;color:var(--rk-ink)}
.boards [data-rank] .rk-medal.is-empty .nm{color:var(--rk-ink-50)}
.boards [data-rank] .rk-medal .dd{
  font-family:var(--rk-mono);font-size:10px;color:var(--rk-ink-40);margin-top:3px;
}

/* Last month's podium, worn for this month only. There is no avatar in the
   product yet, so it rings the rank emblem — where a face would go when
   there is one. */
.boards [data-rank] .rk-badge[data-frame]{
  border-radius:50%;padding:6px;
  box-shadow:0 0 0 2px var(--rk-gold),0 0 0 7px var(--rk-surface),0 0 0 8px rgba(201,168,76,.35);
}
.boards [data-rank] .rk-badge[data-frame="3"]{
  box-shadow:0 0 0 2px var(--rk-gold-deep),0 0 0 7px var(--rk-surface),0 0 0 8px rgba(138,106,34,.35);
}
.boards [data-rank] .rk-frame-note{color:var(--rk-gold-deep)}

/*
  A HEIGHT THIS LIST CANNOT EXCEED.
  One mark per scenario ever completed, and a scenario is published every
  week: at 52 a year this column alone would be four screens, and the whole
  point of 0.40.0 is that the panel is one. Four marks are shown and the
  rest scroll — the note underneath stays outside the scroll, where it can
  still be read.
*/
.boards [data-rank] .rk-marks{max-height:186px;overflow-y:auto}
.boards [data-rank] .rk-mark{padding:11px 0;border-top:1px solid var(--rk-line-soft)}
.boards [data-rank] .rk-mark:first-child{border-top:0}
.boards [data-rank] .rk-mark .top{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
}
.boards [data-rank] .rk-mark .nm{font-size:15px;color:var(--rk-read)}
.boards [data-rank] .rk-mark .fg{
  font-family:var(--rk-mono);font-size:13px;font-variant-numeric:tabular-nums;
}
.boards [data-rank] .rk-mark .fg b{font-weight:500;color:var(--rk-ink)}
.boards [data-rank] .rk-mark .fg i{font-style:normal;color:var(--rk-ink-40)}
.boards [data-rank] .rk-bar.sm{height:5px;margin-top:8px}
/* Under half of what the scenario is worth. The figure beside it already
   says so; a colour is read before a figure is. */
.boards [data-rank] .rk-bar.sm.is-low i{background:var(--rk-low)}

/* ---------------- narrow screens ----------------
   The path is the thing that cannot shrink indefinitely: fifteen names in a
   row stop being words somewhere around 700px. Below that the names go and
   the nodes stay — the shape of the journey survives, and the window that
   opens on a node still says everything. */
@media (max-width: 760px){
  .boards [data-rank]{padding:20px 16px}
  .boards [data-rank] .rk-node .lbl{display:none}
  .boards [data-rank] .rk-node .dot{margin:6px 0}
  .boards [data-rank] .rk-ages .r{display:none}
  /* "EDAD II · ELEGIDOS" does not fit a sixty-pixel column and truncates to
     an ellipsis. The half before the separator does fit, and is the half
     that names the age. */
  .boards [data-rank] .rk-age .t{display:none}
  .boards [data-rank] .rk-age .t-short{
    display:block;font-family:var(--rk-sans);font-weight:500;font-size:10px;
    letter-spacing:.13em;text-transform:uppercase;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /*
    FIFTEEN EMBLEMS DO NOT FIT ON A PHONE, AND SHRINKING THEM IS NOT THE
    ANSWER. At 360px each node would get twenty pixels, which is below the
    size the emblems were drawn to be read at — they become fifteen grey
    smudges. The path keeps its size and scrolls inside its own box
    instead, which is what wide content does on a narrow screen.

    The window has to stay outside that box: `overflow-x` forces the other
    axis to scroll too, and the window hangs below the path.
  */
  .boards [data-rank] .rk-scroll{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .boards [data-rank] .rk-track{min-width:480px}
  .boards [data-rank] .rk-tip{
    width:min(250px,calc(100% - 8px));
    left:50%;transform:translateX(-50%);
  }
  .boards [data-rank] .rk-name{font-size:30px}
  .boards [data-rank] .rk-figures{gap:22px}
  .boards [data-rank] .rk-fig .n{font-size:30px}
}
@media (max-width: 519.98px){
  .boards [data-rank] .rk-who{gap:12px}
  .boards [data-rank] .rk-progress{flex-wrap:wrap;gap:8px}
  .boards [data-rank] .rk-missing{white-space:normal}
  .boards [data-rank] .rk-medal{min-width:100%}
}
@media (prefers-reduced-motion: reduce){
  .boards [data-rank] .rk-bar i,
  .boards [data-rank] .rk-line-done,
  .boards [data-rank] .rk-pill{transition:none}
}

/* ==================================================================== *
 * THE RANKINGS BLOCK                                           0.41.0
 *
 * The league, the scenario's ten best and the player's own marks. Same
 * scoping rule as the rank panel above: these live in the page, outside
 * `.ax-game`, so every selector is under `.boards` and the tokens are the
 * ones the panel declares — one palette for the whole boards area.
 *
 * §7 OF THE BRIEF, AND IT IS A FLOOR, NOT A PREFERENCE.
 * Nothing that carries information goes below `rgba(8,8,8,.55)`, and below
 * 12px it is `#4A4A46`. The small labels were at .40 and .45, which is
 * 2.7:1 and 3.1:1 on white — under the readable line, and they were
 * carrying the new data. Light grey is for separators.
 * ==================================================================== */

.boards [data-leaderboard],
.boards [data-personal],
.boards [data-rankings]{
  --rk-paper:#F6F4EE; --rk-surface:#FFFFFF; --rk-ink:#080808;
  --rk-read:#1C1C1A; --rk-note:#4A4A46;
  --rk-ink-58:rgba(8,8,8,.58);
  --rk-line:rgba(8,8,8,.10); --rk-line-soft:rgba(8,8,8,.08);
  --rk-gold:#C9A84C; --rk-gold-deep:#8A6A22; --rk-gold-high:#D4A840;
  --rk-cream:#FFF8DC; --rk-low:#C4452F; --rk-good:#17836F;
  --rk-sans:'Jost',system-ui,sans-serif;
  --rk-mono:'JetBrains Mono','Courier New',monospace;
  --rk-serif:'Cormorant Garamond',Georgia,serif;
  --rk-ease:cubic-bezier(.25,.46,.45,.94);

  border:1px solid var(--rk-line);border-radius:16px;
  background:var(--rk-surface);padding:24px 26px 22px;
}

/*
  ONE TABLE MANDA. The league takes two thirds, the scenario a third, and
  the marks a row of their own underneath. Three equal columns said all
  three mattered equally, which is the opposite of the 0.9.1 decision that
  the monthly table comes first.
*/
.boards [data-rankings]{flex:1 1 600px;min-width:0}
.boards [data-leaderboard]{flex:1 1 380px;min-width:0}
.boards [data-personal]{flex:1 1 100%;min-width:0}

/* ---------------- the head each block shares ---------------- */
.boards .bd-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.boards .bd-kicker{
  font-family:var(--rk-mono);font-size:11px;letter-spacing:.08em;
  color:var(--rk-gold-deep);margin:0;
}
.boards .bd-title{
  font-family:var(--rk-serif);font-size:clamp(26px,3vw,34px);font-weight:300;
  line-height:1.1;margin:6px 0 0;color:var(--rk-ink);
}
.boards .bd-lede{font-size:15px;color:var(--rk-note);margin:4px 0 0}
.boards .bd-side{font-size:14px;line-height:1.5;color:var(--rk-note);margin:0;max-width:46ch}

/* The switch. Obsidian for the one you are reading — a state that exists
   only as a colour does not exist for a screen reader, so it is also
   `aria-pressed`. */
.boards .bd-tabs{display:flex;border:1px solid rgba(8,8,8,.14);border-radius:999px;overflow:hidden}
.boards .bd-tab{
  border:0;background:none;cursor:pointer;
  padding:8px 18px;font-family:var(--rk-mono);font-size:11px;color:var(--rk-note);
}
.boards .bd-tab[aria-pressed="true"]{background:var(--rk-ink);color:var(--rk-cream)}
.boards .bd-tab:focus-visible{outline:2px solid var(--rk-gold);outline-offset:-2px}

/* ---------------- the podium ---------------- */
/**
 * Three columns whether or not there are three players.
 *
 * A flex row would let a single card stretch the full width of the league,
 * which reads as a banner rather than as first place — and a league with one
 * player would look grander than one with three. The columns are fixed; the
 * cards that exist take theirs and the rest of the row stays empty, which is
 * what "draw the cards there are, not the gaps" means.
 */
.boards .bd-podium{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:22px;
}
@media (max-width:620px){
  .boards .bd-podium{grid-template-columns:minmax(0,1fr)}
}
.boards .bd-place{
  min-width:0;
  border:1px solid var(--rk-line);border-radius:14px;padding:14px 16px 12px;
  background:var(--rk-surface);
}
.boards .bd-place.is-you{border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.10)}
.boards .bd-place .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.boards .bd-place .roman{font-family:var(--rk-serif);font-size:24px;color:var(--rk-gold)}
.boards .bd-place[data-place="3"] .roman{color:var(--rk-gold-deep)}
.boards .bd-place .medal{
  font-family:var(--rk-mono);font-size:10px;letter-spacing:.06em;
  color:var(--rk-gold-deep);text-align:right;
}
.boards .bd-place .nm{
  font-size:17px;color:var(--rk-ink);margin-top:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.boards .bd-place .lvl{
  display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--rk-gold);
}
.boards .bd-place .lvl[data-age="1"]{color:var(--rk-gold-deep)}
.boards .bd-place .lvl[data-age="4"]{color:var(--rk-gold-high)}
.boards .bd-place .lvl span{
  font-family:var(--rk-mono);font-size:11px;color:var(--rk-note);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.boards .bd-place .pts{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.boards .bd-place .pts b{
  font-family:var(--rk-serif);font-size:32px;font-weight:300;color:var(--rk-ink);
}
.boards .bd-place .pts .ax-et{
  font-family:var(--rk-sans);font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--rk-ink-58);
}

/* ---------------- the league table ---------------- */
.boards .bd-league{margin-top:22px}
.boards .bd-lrow{
  display:grid;grid-template-columns:34px 1fr 96px 92px;gap:14px;
  align-items:center;padding:11px 4px;border-bottom:1px solid var(--rk-line-soft);
}
.boards .bd-lrow.is-head{
  padding:0 4px 10px;border-bottom:1px solid var(--rk-line);
  font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--rk-ink-58);
}
.boards .bd-lrow.is-you{background:rgba(201,168,76,.10)}
.boards .bd-lrow.is-you .pos{color:var(--rk-gold-deep)}
.boards .bd-lrow.is-you .nm{font-weight:500}
.boards .bd-lrow .pos{font-family:var(--rk-mono);font-size:13px;color:var(--rk-note)}
.boards .bd-lrow .who{display:flex;align-items:center;gap:10px;min-width:0}
.boards .bd-lrow .emb{display:flex;flex:none;color:var(--rk-gold)}
.boards .bd-lrow .emb[data-age="1"]{color:var(--rk-gold-deep)}
.boards .bd-lrow .emb[data-age="4"]{color:var(--rk-gold-high)}
.boards .bd-lrow .nm{
  /* It takes the room the cell has and gives it up last: `overflow:hidden`
     sets its minimum to nothing, so without `flex:1 1 auto` the pieces
     beside it — a rank name, a medal pill, neither of which wraps — pushed
     it to zero width and the row lost the name it exists to show. */
  flex:1 1 auto;
  font-size:15px;color:var(--rk-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 11px and #4A4A46: it was 10px at .40, which is the size and the contrast
   the brief singled out. */
.boards .bd-lrow .lvl{
  font-family:var(--rk-mono);font-size:11px;color:var(--rk-note);white-space:nowrap;
}
.boards .bd-lrow .laurel{
  font-family:var(--rk-mono);font-size:9px;border:1px solid rgba(201,168,76,.45);
  border-radius:999px;padding:2px 7px;color:var(--rk-gold-deep);white-space:nowrap;
}
.boards .bd-lrow .num{text-align:right;font-family:var(--rk-mono);font-size:13px;color:var(--rk-note)}
.boards .bd-lrow .pts{
  font-family:var(--rk-serif);font-size:24px;color:var(--rk-ink);
}
.boards .bd-lrow.is-head .num{font-family:inherit;font-size:inherit;color:inherit}

/* ---------------- the rules, one sentence each ---------------- */
.boards .bd-rules{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.boards .bd-rule{
  flex:1 1 200px;margin:0;font-size:13px;line-height:1.5;color:var(--rk-note);
  border-left:2px solid rgba(201,168,76,.45);padding-left:12px;
}
.boards [data-leaderboard] .bd-rule{margin-top:18px}

/* ---------------- the scenario's ten best ---------------- */
.boards .bd-ten{margin-top:20px}
.boards .bd-row{
  display:flex;align-items:center;gap:12px;padding:12px 4px;
  border-top:1px solid var(--rk-line-soft);
}
.boards .bd-row.is-you{background:rgba(201,168,76,.10)}
.boards .bd-row .pos{
  font-family:var(--rk-mono);font-size:12px;color:var(--rk-note);width:16px;flex:none;
}
.boards .bd-row .who{flex:1;min-width:0}
.boards .bd-row .nm{
  display:block;font-size:15px;color:var(--rk-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.boards .bd-row .who.is-anon .nm{color:var(--rk-note)}
.boards .bd-row .fig{text-align:right;flex:none}
.boards .bd-row .fig .a{
  display:block;font-family:var(--rk-mono);font-size:13px;color:var(--rk-ink);
}
/* 12px, not 11 at .45: the spend is a figure somebody compares. */
.boards .bd-row .fig .b{
  display:block;font-family:var(--rk-mono);font-size:12px;color:var(--rk-note);margin-top:4px;
}

/* Ten shields, drawn. The best reading in the table: "nobody lost one" is a
   shape, not a number to compare. */
.boards .sh-row{display:flex;gap:3px;margin-top:6px}
.boards .sh-row i{
  display:block;width:7px;height:10px;border-radius:2px 2px 4px 4px;
  background:rgba(8,8,8,.12);
}
.boards .sh-row i.up{background:var(--rk-gold)}

/* ---------------- your marks, as cards ---------------- */
.boards .bd-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;margin-top:22px;
}
.boards .bd-card{
  border:1px solid var(--rk-line);border-radius:14px;padding:18px 20px;
  transition:border-color 240ms var(--rk-ease);
}
.boards .bd-card:hover{border-color:rgba(201,168,76,.45)}
.boards .bd-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.boards .bd-card .who{min-width:0}
.boards .bd-card .nm{font-size:17px;color:var(--rk-ink);line-height:1.25}
.boards .bd-card .meta{
  font-family:var(--rk-mono);font-size:11px;letter-spacing:.06em;
  color:var(--rk-note);margin-top:4px;text-transform:uppercase;
}
/* The grade as a stamp. The colour is decided here, from the letter, so a
   grade nobody has seen before lands on the neutral case rather than on
   none. */
.boards .bd-card .grade{
  width:42px;height:42px;flex:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--rk-serif);font-size:24px;font-weight:400;
  background:rgba(8,8,8,.04);border:1px solid rgba(8,8,8,.12);color:var(--rk-note);
}
.boards .bd-card .grade[data-grade="S"]{
  background:rgba(23,131,111,.10);border-color:rgba(23,131,111,.40);color:var(--rk-good);
}
.boards .bd-card .grade[data-grade="A"]{
  background:rgba(201,168,76,.16);border-color:rgba(201,168,76,.45);color:var(--rk-gold-deep);
}
.boards .bd-card .grade[data-grade="C"],
.boards .bd-card .grade[data-grade="D"]{
  background:rgba(196,69,47,.08);border-color:rgba(196,69,47,.35);color:var(--rk-low);
}
.boards .bd-card .score{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.boards .bd-card .score b{
  font-family:var(--rk-serif);font-size:34px;font-weight:300;color:var(--rk-ink);
}
.boards .bd-card .score i{
  font-style:normal;font-family:var(--rk-mono);font-size:13px;color:var(--rk-ink-58);
}
.boards .bd-bar{
  height:6px;border-radius:999px;background:rgba(8,8,8,.08);
  margin-top:10px;overflow:hidden;
}
.boards .bd-bar i{display:block;height:100%;background:var(--rk-gold)}
.boards .bd-bar.is-low i{background:var(--rk-low)}
.boards .bd-card .foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:14px;border-top:1px solid var(--rk-line-soft);padding-top:12px;
}
.boards .bd-card .when{text-align:right}
.boards .bd-card .when .a{
  display:block;font-family:var(--rk-mono);font-size:13px;color:var(--rk-ink);
}
.boards .bd-card .ax-et{
  display:block;font-family:var(--rk-sans);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rk-note);margin-top:6px;
}

.boards .board-empty{font-size:14px;color:var(--rk-note);margin:18px 0 0}

@media (max-width: 519.98px){
  .boards [data-leaderboard],
  .boards [data-personal],
  .boards [data-rankings]{padding:18px 16px}
  .boards .bd-lrow{grid-template-columns:26px 1fr 54px 70px;gap:8px}
  /**
   * The rank name and the medal pill go, the player's name stays.
   *
   * Measured at 360px before this rule existed: the row read
   * "1 · [emblem] · ×2 Laurel of Nike · 3 · 262" with no name at all. Both
   * of those sit on one line and neither wraps, so the only thing left to
   * give was the name — which is the one thing the row is for. Nothing is
   * lost: the rank is on the emblem beside it, and the medals are in the
   * cabinet in the panel above.
   */
  .boards .bd-lrow .lvl,
  .boards .bd-lrow .laurel{display:none}
}
@media (prefers-reduced-motion: reduce){
  .boards .bd-card{transition:none}
}