/* =============================================================================
   LOST GENESIS — RANKINGS (field records).  Archive-skin presentation of the
   framework boards reader (/api/boards). 2026-08-12.

   GRAMMAR: Arkadia's ranking page (the look Ishaq named) re-expressed in the
   SPECIMEN ARCHIVE system — podium for the flagship board, a board tab rail, a
   period rail, two-column rank tails, a your-row mark. NOTHING here invents a
   number: every score/rank/name arrives from /api/boards and rankings.js
   renders words for every degraded state (same law as webcore boards.js).

   PRIVACY CONTRACT (differs from Arkadia's own page ON PURPOSE): no Steam
   avatars. An avatar is keyed on a SteamID64 and the boards API deliberately
   never sends one (`NO IDS EVER RENDER`, webcore/frontend/js/boards.js). The
   podium draws LETTER MEDALLIONS from the display name instead.

   Tokens consumed from lg.css: --void --surface --surface-2 --surface-3
   --line --line-2 --line-lit --cyan --cyan-lit --cyan-dim --cyan-deep
   --ink --ink-2 --ink-3 --green --amber --red --glow --font-display
   --font-body --font-data --r.  All rk- custom props re-alias those, so a
   future re-skin edits FOUR lines at the top of this sheet.
   ========================================================================= */

.rk{ --rk-hot: var(--cyan-lit); --rk-val: var(--cyan); --rk-dim: var(--cyan-dim);
     --rk-line: var(--line); }

/* ------------------------------------------------------------ the rails ---- */
.rk-rails{ display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin-bottom:clamp(16px,2.6vh,26px); }
.rk-wins, .rk-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.rk-wins:empty, .rk-tabs:empty{ display:none; }
.rk-win, .rk-tab{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:.68rem;
  letter-spacing:.14em; color:var(--ink-2); padding:8px 12px;
  border:1px solid var(--rk-line); border-radius:var(--r);
  background:rgba(255,255,255,.012); cursor:pointer; white-space:nowrap;
  transition:border-color .16s, color .16s, background .16s; }
.rk-win:hover, .rk-tab:hover{ color:var(--rk-hot); border-color:var(--line-lit);
  background:rgba(47,201,230,.06); }
.rk-win[aria-selected="true"], .rk-tab[aria-selected="true"]{
  color:var(--rk-hot); border-color:var(--cyan);
  background:rgba(47,201,230,.1); box-shadow:0 0 10px rgba(47,201,230,.12) inset; }
.rk-rails .rk-sep{ width:1px; align-self:stretch; background:var(--line-2); }

/* the signed-out note line — empty is INVISIBLE, not a blank row */
#rk-note{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  color:var(--ink-3); font-size:.9rem; margin-bottom:18px; }
#rk-note:empty{ display:none; }

/* every nothing-to-show state is a dressed card, not a floating sentence */
#rk-status{ padding:22px; border:1px solid var(--rk-line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  color:var(--ink-2); }

/* ------------------------------------------------------------- the podium -- */
.rk-podium-card{ position:relative; border:1px solid var(--rk-line);
  border-radius:var(--r); padding:clamp(18px,2.6vw,28px);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  margin-bottom:clamp(14px,2vh,20px); overflow:hidden; }
.rk-podium-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 220px at 50% -60px, rgba(47,201,230,.12), transparent 70%); }
.rk-podium-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:18px; }
.rk-podium-head h3{ font-family:var(--font-display); font-weight:700;
  font-size:1.02rem; letter-spacing:.04em; color:var(--ink); }
.rk-podium-head .rk-recid{ font-family:var(--font-data); font-size:.62rem;
  letter-spacing:.14em; color:var(--rk-dim); }
.rk-podium-head .rk-winpill{ margin-left:auto; }

.rk-podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px;
  align-items:end; margin-bottom:6px; }
.rk-seat{ display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 10px 14px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(255,255,255,.012); min-width:0; }
.rk-seat.s1{ padding-top:26px; border-color:var(--line-lit);
  background:linear-gradient(180deg, rgba(47,201,230,.09), rgba(47,201,230,.02)); }
.rk-med{ position:relative; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  color:var(--ink); background:var(--surface-3);
  border:2px solid var(--rk-ring, var(--line-lit)); }
.rk-seat.s1 .rk-med{ width:72px; height:72px; font-size:1.6rem;
  --rk-ring:#e7c975; box-shadow:0 0 18px rgba(231,201,117,.25); }
.rk-seat.s2 .rk-med{ --rk-ring:#c8d3dc; }
.rk-seat.s3 .rk-med{ --rk-ring:#c9946a; }
.rk-med i{ position:absolute; right:-6px; top:-6px; width:22px; height:22px;
  border-radius:50%; font-style:normal; font-family:var(--font-data);
  font-size:.62rem; display:flex; align-items:center; justify-content:center;
  color:var(--void); background:var(--rk-ring, var(--cyan)); font-weight:700; }
.rk-seat .rk-name{ max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600; color:var(--ink); font-size:.92rem; }
.rk-seat .rk-score{ font-family:var(--font-data); color:var(--rk-val);
  font-variant-numeric:tabular-nums; font-size:.95rem; }
.rk-seat.s1 .rk-score{ color:var(--rk-hot); font-size:1.08rem; }
.rk-seat .rk-you{ margin-top:2px; }

/* ranks 4..N under the podium: column-major so ranks read DOWN each column */
.rk-tail{ list-style:none; margin:14px 0 0; padding:0; }
@media (min-width: 720px){ .rk-tail{ columns:2; column-gap:28px; } }

/* ------------------------------------------------------------- board cards - */
.rk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
@media (max-width: 860px){ .rk-grid{ grid-template-columns:1fr; }
  .rk-podium{ grid-template-columns:1fr 1.1fr 1fr; } }
.rk-card{ position:relative; border:1px solid var(--rk-line); border-radius:var(--r);
  padding:18px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.rk-card::before{ content:""; position:absolute; top:8px; left:8px; width:10px;
  height:10px; border-top:1px solid var(--cyan-deep); border-left:1px solid var(--cyan-deep);
  opacity:.6; pointer-events:none; }
.rk-bhead{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.rk-bhead h3{ font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.05em; color:var(--ink); }
.rk-bhead .rk-recid{ font-family:var(--font-data); font-size:.58rem;
  letter-spacing:.14em; color:var(--rk-dim); }
.rk-bhead .rk-winpill{ margin-left:auto; }
.rk-winpill{ font-family:var(--font-data); font-size:.6rem; letter-spacing:.14em;
  color:var(--ink-3); border:1px solid var(--line-2); border-radius:999px;
  padding:3px 9px; white-space:nowrap; }
.rk-note-line{ color:var(--ink-3); font-size:.82rem; margin-top:9px; }

/* ranked rows — shared by tails and cards. The magnitude bar draws only when
   a row carries --rk-fill (set from the data by rankings.js, never from rank). */
.rk-rows{ list-style:none; margin:8px 0 0; padding:0; }
.rk-rows li, .rk-tail li{ position:relative; display:flex; align-items:baseline;
  gap:11px; justify-content:space-between; padding:7px 0 8px;
  border-bottom:1px solid var(--line-2);
  break-inside:avoid; -webkit-column-break-inside:avoid; }
.rk-rows li:last-child{ border-bottom:0; }
.rk-rows li::after, .rk-tail li::after{ content:""; position:absolute; left:0;
  bottom:-1px; height:2px; width:var(--rk-fill, 0%); border-radius:1px;
  background:linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  box-shadow:0 0 8px var(--glow); pointer-events:none; }
.rk-who{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.rk-rank{ font-family:var(--font-data); color:var(--ink-3);
  font-variant-numeric:tabular-nums; font-size:.78rem; min-width:2ch; }
.rk-rows li:nth-child(-n+3) .rk-nm{ color:var(--ink); font-weight:600; }
.rk-rows li:first-child .rk-rank{ color:var(--rk-hot); font-weight:700; }
.rk-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-2); font-size:.92rem; }
.rk-val{ font-family:var(--font-data); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--rk-val); font-weight:600; font-size:.9rem; }
.rk-youpill{ display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-data); font-size:.56rem; letter-spacing:.16em;
  color:var(--green); border:1px solid rgba(70,217,143,.4); border-radius:999px;
  padding:2px 8px; background:rgba(70,217,143,.07); white-space:nowrap; }

/* board-tab filtering: one board on stage when a tab is chosen */
.rk[data-tab]:not([data-tab=""]) .rk-card,
.rk[data-tab]:not([data-tab=""]) .rk-podium-card{ display:none; }
.rk[data-tab]:not([data-tab=""]) [data-board].rk-on{ display:block; }

@media (max-width: 560px){
  .rk-podium{ gap:6px; }
  .rk-med{ width:48px; height:48px; font-size:1.05rem; }
  .rk-seat.s1 .rk-med{ width:58px; height:58px; font-size:1.25rem; }
  .rk-seat .rk-name{ font-size:.8rem; }
}