/* <!-- check-allow: ranked --> */
/* Ranked: the landing (/ranked/), its latest sets (/ranked/sets/) and player pages (/player/Name-1234, drawn
   from 404.html), and Home's rows. The site's type scale (13, 15, 17, 24 and 44 px), sections and panels
   (site.css). Bars, lamps, chips, the pill and links stay neutral; gold marks only selection, #1, the current tab
   and your own row. Results never rely on colour alone: W and L letters, filled dots for wins, hollow for losses. */
.rk {
  container: rk / inline-size;
  color: var(--text-1);
  font-size: var(--fs-3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.rk a { color: inherit; }
.rk img { display: block; }
.rk [hidden] { display: none !important; }

.rk-h { margin: 0; color: var(--text-1); font: 400 var(--fs-3)/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.rk-panel { border: 1px solid var(--panel-edge); border-radius: 4px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(233, 238, 237, 0.06); }
.rk-cap { color: var(--text-3); font-weight: 700; font-size: var(--fs-1); line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.rk .rk-link { color: var(--text-1); font-weight: 600; font-size: var(--fs-2); text-decoration: underline; text-decoration-color: rgba(233, 238, 237, 0.35); text-underline-offset: 3px; }
.rk .rk-link:hover { text-decoration-color: currentColor; }
.rk-faint { color: var(--text-3); }
.rk .rk-win { color: var(--good); }
.rk .rk-loss { color: var(--bad); }
.rk-note { margin: 10px 0 0; color: var(--text-3); font-size: var(--fs-1); }
.rk-foot { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: var(--fs-2); }
.rk-foot .rk-link { font-size: inherit; }

/* "?" after an MMR that is still settling. */
.rk-unsure { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border: 1px solid rgba(233, 238, 237, 0.45); border-radius: 50%; color: var(--text-2); font: 700 var(--fs-1)/1 var(--font-ui); vertical-align: 2px; cursor: help; }

.rk-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1.5px solid #8A9C9C; border-radius: 4px; background: transparent; color: var(--text-1); font: 600 var(--fs-2)/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; }
.rk-btn:hover { border-color: var(--text-1); }
.rk-btn svg { width: 16px; height: 16px; flex: none; }
.rk-btn[aria-pressed="true"] { border-color: rgba(244, 182, 63, 0.6); color: var(--gold); }

.rk-lamps { display: inline-flex; gap: 6px; }
.rk-lamps i { width: 12px; height: 12px; border: 1.5px solid rgba(233, 238, 237, 0.45); border-radius: 50%; }
.rk-lamps i.on { background: var(--text-1); border-color: var(--text-1); }
.rk-bar { position: relative; display: block; height: 4px; background: var(--rail); }
.rk-bar i { position: absolute; inset: 0 auto 0 0; background: var(--text-2); }

/* Games as letters: filled for a win, outlined for a loss, a dash for a drawn game. */
.rk-wl { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rk-wl i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; font: 700 var(--fs-1)/1 var(--font-ui); }
.rk-wl i.w { background: rgba(60, 196, 126, 0.22); color: #BFF0D5; }
.rk-wl i.l { border: 1.5px solid rgba(255, 148, 112, 0.6); color: var(--bad); }
.rk-wl i.d { border: 1.5px solid rgba(233, 238, 237, 0.3); color: var(--text-2); }

.rk-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rk-chips::-webkit-scrollbar { display: none; }
.rk-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; padding: 0 12px; border: 1px solid rgba(233, 238, 237, 0.16); border-radius: 3px; background: transparent; color: var(--text-2); font: 600 var(--fs-1)/1 var(--font-ui); white-space: nowrap; text-decoration: none; cursor: pointer; }
.rk-chip:has(> .rk-face) { padding-left: 4px; font-size: var(--fs-2); }
.rk-chip:hover { border-color: rgba(233, 238, 237, 0.4); color: var(--text-1); }
.rk-chip[aria-pressed="true"] { border-color: rgba(233, 238, 237, 0.55); background: rgba(233, 238, 237, 0.06); color: var(--text-1); }

/* The loader is the logo's input, key by key: back, neutral, back, down-back (lit). */
.rk-loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 120px; color: var(--text-3); font-size: var(--fs-2); }
.rk-input { display: inline-flex; gap: 8px; color: #5A4549; }
.rk-input svg { width: 16px; height: 16px; fill: currentColor; animation: rk-key 1.2s steps(1) infinite; }
.rk-input svg:nth-child(2) { animation-delay: 0.3s; }
.rk-input svg:nth-child(3) { animation-delay: 0.6s; }
.rk-input svg:nth-child(4) { animation-delay: 0.9s; animation-name: rk-key-lit; }
@keyframes rk-key { 0% { fill: #E9EEED; } 25%, 100% { fill: #5A4549; } }
@keyframes rk-key-lit { 0% { fill: #E3304F; } 25%, 100% { fill: #5A4549; } }
@media (prefers-reduced-motion: reduce) {
  .rk-input svg { animation: none; fill: #AEBDBD; }
  .rk-input svg:nth-child(4) { fill: #E3304F; }
}

.nf-player { display: none; }
.is-player .nf-player { display: block; }
/* The board, the sets and a player's page fill at least the first screen, so the footer waits under it while they
   load instead of showing and then being pushed away. */
.rk[data-board], .is-player .rk-player { min-height: 100vh; }
@media (scripting: none) { .rk[data-board] { min-height: 0; } }
.is-player .nf-inner { display: none; }

.rk-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; color: var(--text-2); font-size: var(--fs-2); text-align: center; }
.rk-empty b { color: var(--text-1); font-weight: 600; font-size: var(--fs-3); }
.rk-retry { margin-top: 6px; }
.rk-missing { margin: 0; color: var(--text-1); font: 600 var(--fs-3)/1.3 var(--font-ui); }
.rk-missing-note { margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-2); }
.rk-missing-note .rk-link { font-size: inherit; }

/* ---- Landing ---------------------------------------------------------------------------------------------- */
.rk-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: end; }
/* A player page is in Ranked: the bar marks it from the first paint (404.html marks the address as it loads). */
.is-player .bar-links a[href="/ranked/"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.rk-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 22px; margin: 0; color: var(--text-2); font-size: var(--fs-2); }
.rk-live b { color: var(--text-1); font-weight: 600; }
.rk-live .rk-updated { margin-left: auto; color: var(--text-3); font-size: var(--fs-1); }
.rk-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--good); vertical-align: 1px; }

.rk-board { position: relative; margin-top: 16px; }
/* Until its rows are in, the board is as tall as the first screen, so the sections under it wait below it instead of
   showing and then being pushed away. */
.rk-landing .rk-board:is(:not(:has(.rk-rows)), :has(.rk-rows > .rk-loading)) { min-height: 100vh; }
@media (scripting: none) { .rk-landing .rk-board:is(:not(:has(.rk-rows)), :has(.rk-rows > .rk-loading)) { min-height: 0; } }
.rk-board-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(233, 238, 237, 0.08); }
.rk-char-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; height: 34px; padding: 0 10px 0 12px; border: 1px solid rgba(233, 238, 237, 0.3); border-radius: 3px; background: transparent; color: var(--text-2); font: 600 var(--fs-1)/1 var(--font-ui); white-space: nowrap; cursor: pointer; }
.rk-char-btn b { color: var(--text-1); font-weight: 600; }
.rk-char-btn svg { width: 14px; height: 14px; }
.rk-char-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rk-cols { display: grid; grid-template-columns: 40px minmax(0, 1fr) 56px 176px 92px 64px 52px; align-items: center; column-gap: 12px; padding: 0 18px 0 10px; }
.rk-bh { height: 40px; border-bottom: 1px solid rgba(233, 238, 237, 0.08); white-space: nowrap; }
.rk-bh > span { color: inherit; font-size: inherit; }
.rk-r { text-align: right; }
.rk-row { position: relative; height: 54px; border-bottom: 1px solid var(--hairline); color: var(--text-1); text-decoration: none; }
.rk-rows > .rk-row:nth-child(even) { background: var(--row-alt); }
.rk-row:hover, .rk-row:focus-visible { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold); outline-offset: -2px; }
.rk-pos { color: var(--text-3); font-weight: 600; font-size: var(--fs-2); text-align: right; }
.rk-row[data-pos="1"] .rk-pos { color: var(--gold); }
.rk-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-who .rk-n { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rk-who b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rk-who .rk-tag { flex: none; color: var(--text-3); font-size: var(--fs-1); }
.rk-who .rk-sub { display: none; }
.rk-reg { color: var(--text-2); font-weight: 600; font-size: var(--fs-1); letter-spacing: 0.08em; }
.rk-badge { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); font-size: var(--fs-2); white-space: nowrap; }
.rk-badge img { width: 64px; height: 32px; flex: none; }
.rk-badge .rk-bn { overflow: hidden; text-overflow: ellipsis; }
.rk-mmr { font-weight: 600; font-size: var(--fs-3); white-space: nowrap; }
.rk-has-unsure .rk-mmrc { position: relative; padding-right: 24px; }
.rk-mmrc .rk-unsure { position: absolute; top: 50%; right: 0; margin: -9px 0 0; }
.rk-wlc, .rk-wr { color: var(--text-2); font-size: var(--fs-2); }
.rk-row.is-you::after { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(244, 182, 63, 0.6); border-radius: 2px; pointer-events: none; }
.rk-you { flex: none; padding: 3px 6px; border-radius: 2px; background: rgba(244, 182, 63, 0.16); color: var(--gold); font: 700 13px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.rk-board-foot { margin: 0; padding: 12px 18px; color: var(--text-3); font-size: var(--fs-1); }
.rk-more { display: flex; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.rk-more-bare { margin: 0; border: 0; }


/* The Character button opens the select screen's grid: All first; fighters nobody has placed with are dimmed. */
.rk-pop { position: absolute; top: 100%; right: 12px; z-index: 30; width: min(620px, calc(100% - 24px)); padding: 14px 16px; background: #0B0304; }
.rk-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rk-pop-head .rk-faint { font-size: var(--fs-1); }
.rk-pgrid { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; }
.rk-pgrid button { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(233, 238, 237, 0.18); background: #1D0609; cursor: pointer; }
.rk-pgrid button .rk-face { width: 100%; height: 100%; border: 0; }
.rk-pgrid .rk-all { color: var(--text-1); background: #0B0304; font: 700 13px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.rk-pgrid button[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 1px; }
.rk-pgrid button:hover { border-color: var(--text-1); }
.rk-pgrid .is-none .rk-face { opacity: 0.35; }

/* Where everyone is: below about 100 placed players, the badges that have players; from there, one bar per badge. */
.rk-dist { padding: 8px 18px 14px; }
.rk-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 32px; }
.rk-dr { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px 96px 24px; align-items: center; gap: 12px; height: 44px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-2); }
.rk-dr img { width: 64px; height: 32px; }
.rk-dr .rk-from { color: var(--text-3); font-size: var(--fs-1); text-align: right; white-space: nowrap; }
.rk-dr .rk-cnt { font-weight: 600; text-align: right; }
.rk-dr.is-you::after { content: ""; position: absolute; inset: 2px -8px; border: 1px solid rgba(244, 182, 63, 0.6); border-radius: 2px; pointer-events: none; }
.rk-dl.no-lines .rk-dr { grid-template-columns: 64px minmax(0, 1fr) 96px 24px; }
.rk-distc { padding: 16px 20px 14px; }
.rk-distc .rk-readout { display: grid; grid-template-columns: 88px repeat(4, auto) 1fr; align-items: center; gap: 22px; min-height: 58px; margin: 0; }
.rk-distc .rk-readout img { width: 88px; height: 44px; }
.rk-distc .rk-v { font-weight: 600; font-size: var(--fs-3); }
.rk-distc .rk-readout .rk-faint { justify-self: end; font-size: var(--fs-1); }
.rk-bars, .rk-groups { display: grid; grid-template-columns: repeat(9, 1fr) 12px repeat(7, 1fr) 12px repeat(16, 1fr); gap: 3px; }
.rk-bars { align-items: end; height: 170px; margin-top: 22px; border-bottom: 1px solid rgba(233, 238, 237, 0.2); }
.rk-bars i { position: relative; display: block; min-height: 2px; background: rgba(174, 189, 189, 0.45); cursor: crosshair; }
.rk-bars i.on { background: #AEBDBD; }
.rk-bars i.is-you { background: var(--gold); }
.rk-bars i.is-you::before { content: "You"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); color: var(--gold); font: 700 13px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.rk-groups { margin-top: 6px; }
.rk-groups div { display: flex; justify-content: space-between; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(233, 238, 237, 0.2); color: var(--text-3); font-size: var(--fs-1); }
.rk-groups div:nth-child(1) { grid-column: 1 / 10; }
.rk-groups div:nth-child(2) { grid-column: 11 / 18; }
.rk-groups div:nth-child(3) { grid-column: 19 / 35; }
.rk-groups b { color: var(--text-2); font-weight: 600; }

/* Latest sets: left-aligned rows, winner then loser, each a link to its set page. */
.rk-feed { overflow: hidden; }
.rk-feed-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px 64px 40px minmax(0, 1fr) 44px 84px; align-items: center; column-gap: 12px; min-height: 60px; padding: 0 16px; border-bottom: 1px solid var(--hairline); color: var(--text-1); text-decoration: none; font-size: var(--fs-2); }
.rk-feed-row:last-child { border-bottom: 0; }
a.rk-feed-row:hover, a.rk-feed-row:focus-visible { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold); outline-offset: -2px; }
.rk-feed-row .rk-nm { min-width: 0; line-height: 1.25; }
.rk-feed-row .rk-nm b { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rk-feed-row .rk-nm span { display: block; color: var(--text-3); font-size: var(--fs-1); }
.rk-sc { font: 400 var(--fs-4)/1 var(--font-display); font-feature-settings: "ss02"; white-space: nowrap; }
.rk-feed-row .rk-ch { font-weight: 600; text-align: right; white-space: nowrap; }
.rk-feed-row .rk-t { color: var(--text-3); font-size: var(--fs-1); text-align: right; }

/* ---- Player ----------------------------------------------------------------------------------------------- */
.rk-hero { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 24px 28px; }
.rk-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rk-hero-top .rk-place { font-weight: 600; font-size: var(--fs-2); }
.rk-hero-name { display: flex; align-items: baseline; gap: 14px; min-width: 0; margin: 10px 0 6px; font: 400 var(--fs-5)/1 var(--font-display); font-stretch: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.rk-hero-name.is-wrapped { flex-wrap: wrap; row-gap: 6px; }
.rk-hero-text { min-width: 0; overflow: hidden; white-space: nowrap; padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* Too long for a line of its own even at the smallest size: the name wraps at its natural breaks, and a part still
   too wide breaks anywhere (player-name.mjs). */
.rk-hero-name.is-broken .rk-hero-text { flex: 1 1 100%; overflow: visible; white-space: normal; line-height: 1.1; }
.rk-hero-name.is-broken .rk-hero-text.is-tight { overflow-wrap: anywhere; }
.rk-hero-tag { flex: none; color: var(--text-3); font: 600 var(--fs-4)/1 var(--font-ui); letter-spacing: 0; }
.rk-hero-meta { margin: 0; color: var(--text-2); font-size: var(--fs-2); }
.rk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rk-hero-rank { display: grid; justify-items: end; gap: 2px; min-width: 260px; padding-left: 28px; border-left: 1px solid var(--hairline); text-align: right; }
.rk-hero-rank > img { width: 128px; height: 64px; margin: -6px -6px 4px 0; }
.rk-hero-mmr { font: 400 var(--fs-5)/1 var(--font-display); font-feature-settings: "ss02"; letter-spacing: 0.02em; white-space: nowrap; }
.rk-rd { margin-left: 8px; color: var(--text-3); font: 600 var(--fs-3)/1 var(--font-ui); letter-spacing: 0; }
.rk-hero-sub { color: var(--text-2); font-size: var(--fs-2); }
.rk-hero-prog { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; color: var(--text-2); font-size: var(--fs-1); white-space: nowrap; }
.rk-hero-prog .rk-bar { flex: 1 1 auto; }
.rk-hero-placing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; font-size: var(--fs-2); }
/* The main character's render stands at the header's left edge in a column 272 px wide and as tall as the header,
   its cut side, top and bottom on the header's edges and its corners rounded with the panel's. A short header crops
   it from the bottom and a tall one from its far side, so it never reaches the text. Where the badge block moves
   under the name, the header is too tall for it and the portrait stays; on a phone the render's upper half heads
   the header instead, cut by a hairline above the name. */
.rk-hero { position: relative; }
.rk-hero > .rk-hero-art { display: none; }
@container rk (min-width: 900px) {
  .rk-hero:has(> .rk-hero-art) { grid-template-columns: minmax(0, 1fr) auto; padding-left: 300px; }
  .rk-hero:has(> .rk-hero-art) > .rk-face { display: none; }
  .rk-hero > .rk-hero-art { display: block; position: absolute; top: 0; left: 0; width: 272px; height: 100%; border-radius: 3px 0 0 3px; object-fit: cover; object-position: right top; }
}
.rk-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid var(--hairline); }
.rk-stats dd { margin: 4px 0 0; font-weight: 600; font-size: var(--fs-4); line-height: 1.1; }
.rk-stats dd small { margin-left: 6px; color: var(--text-3); font-weight: 400; font-size: var(--fs-2); }

/* Rating graph: a readout strip over the chart (no floating tooltip), one dot per set. */
.rk-graph { padding: 18px 22px 14px; }
.rk-graph-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rk-graph-head .rk-h { margin-right: 8px; }
.rk-seg { display: inline-flex; margin-left: auto; border: 1px solid rgba(233, 238, 237, 0.16); border-radius: 3px; }
.rk-seg button { padding: 6px 12px; border: 0; background: transparent; color: var(--text-3); font: 600 var(--fs-1)/1.2 var(--font-ui); cursor: pointer; }
.rk-seg button[aria-pressed="true"] { color: var(--text-1); background: rgba(233, 238, 237, 0.08); }
.rk-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 40px; margin: 14px 0 6px; padding: 8px 12px; border-left: 2px solid rgba(233, 238, 237, 0.4); background: rgba(233, 238, 237, 0.035); font-size: var(--fs-2); }
.rk-readout .rk-res { font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; }
.rk-readout .rk-delta { margin-left: auto; font-weight: 700; }
.rk-chart { display: block; width: 100%; height: auto; outline-offset: 2px; }
.rk-chart text { font-family: var(--font-ui); }
.rk-graph-sum { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 0; color: var(--text-2); font-size: var(--fs-2); }
.rk-graph-sum b { color: var(--text-1); font-weight: 600; }
.rk-key { display: inline-flex; align-items: center; gap: 6px; }
.rk-key i { width: 10px; height: 10px; border-radius: 50%; }
.rk-key .kw { background: var(--good); }
.rk-key .kl { border: 2px solid var(--bad); }
.rk-key .kn { width: 8px; height: 8px; margin: 1px; background: #AEBDBD; }
.rk-graph-empty { display: grid; place-items: center; min-height: 160px; margin-top: 12px; padding: 16px; border: 1px dashed rgba(233, 238, 237, 0.16); border-radius: 4px; color: var(--text-2); font-size: var(--fs-2); text-align: center; }

/* Characters: one card each. */
.rk-chars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rk-char { padding: 16px; }
.rk-char-top { display: flex; align-items: center; gap: 12px; }
.rk-char-name { font-weight: 600; font-size: var(--fs-3); line-height: 1.2; }
.rk-char-sets { color: var(--text-3); font-size: var(--fs-1); }
.rk-char-badge { display: flex; align-items: center; gap: 10px; height: 40px; margin: 14px 0 6px; color: var(--text-2); font-weight: 600; font-size: var(--fs-2); }
.rk-char-badge img { width: 80px; height: 40px; margin-left: -4px; }
.rk-char-mmr { font-weight: 600; font-size: var(--fs-4); line-height: 1.1; }
.rk-char-mmr .rk-rd { margin-left: 6px; font-weight: 400; font-size: var(--fs-2); }
.rk-char-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--text-2); font-size: var(--fs-2); }
.rk-char .rk-bar { margin-top: 14px; }
.rk-char-next { margin-top: 6px; color: var(--text-3); font-size: var(--fs-1); }
.rk-char-placing { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 14px 0 6px; font-weight: 600; font-size: var(--fs-2); }

/* Sets: one row per set; it opens to show the rounds, both players' before and after, and the set page. */
.rk-sets { overflow: hidden; }
.rk-set-cols { display: grid; grid-template-columns: 104px 24px minmax(0, 1fr) 112px 92px 36px; align-items: center; column-gap: 14px; padding: 0 12px 0 16px; }
.rk-set-head { height: 38px; border-bottom: 1px solid rgba(233, 238, 237, 0.08); white-space: nowrap; }
.rk-set { width: 100%; min-height: 64px; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.rk-set:hover { background: rgba(233, 238, 237, 0.03); }
.rk-sets > .rk-set:last-child { border-bottom: 0; }
.rk-s-res { display: flex; align-items: baseline; gap: 8px; }
.rk-s-res .rk-res { width: 48px; white-space: nowrap; font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; }
.rk-s-res .rk-sc { font-size: var(--fs-4); }
.rk-s-opp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-s-opp .rk-n { min-width: 0; line-height: 1.3; }
.rk-s-opp b { font-weight: 600; }
.rk-s-opp .rk-sub { display: block; color: var(--text-3); font-size: var(--fs-1); }
.rk-s-delta { text-align: right; line-height: 1.25; }
.rk-s-delta b { display: block; font-weight: 700; font-size: var(--fs-3); }
.rk-s-delta span { color: var(--text-3); font-size: var(--fs-1); }
.rk-s-when { display: none; }
.rk-s-more { display: inline-flex; justify-content: center; color: var(--text-3); }
.rk-s-more svg { width: 16px; height: 16px; }
.rk-set[aria-expanded="true"] { background: rgba(233, 238, 237, 0.03); border-bottom: 0; }
.rk-set[aria-expanded="true"] .rk-s-more svg { transform: rotate(180deg); }
.rk-set-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 4px 16px 16px 172px; border-bottom: 1px solid var(--hairline); background: rgba(233, 238, 237, 0.03); color: var(--text-2); font-size: var(--fs-2); }
.rk-set-detail b { color: var(--text-1); font-weight: 600; }

/* Matchups and head to head, side by side under the sets. */
.rk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rk-two .rk-panel, .rk-tab-panel { padding: 16px 18px; }
.rk-bw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rk-bw div { padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 3px; }
.rk-bw b { display: block; margin-top: 2px; font-weight: 600; font-size: var(--fs-2); }
.rk-bw .rk-faint { font-size: var(--fs-1); }
.rk-mu { display: grid; grid-template-columns: 24px minmax(0, 1fr) 120px 44px; align-items: center; gap: 10px; height: 40px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-2); }
.rk-mu .rk-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-mu .rk-n small { margin-left: 6px; color: var(--text-3); font-size: var(--fs-1); }
/* The bar grows right of the middle when the matchup is won, left when lost; the number says the same in words. */
.rk-dv { position: relative; height: 8px; background: rgba(233, 238, 237, 0.06); }
.rk-dv::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: rgba(233, 238, 237, 0.4); }
.rk-dv i { position: absolute; top: 0; bottom: 0; background: var(--text-2); }
.rk-mu .rk-p { font-weight: 600; text-align: right; }
.rk-mu.is-few { color: var(--text-3); }
.rk-mu.is-few .rk-dv i { opacity: 0.4; }
.rk-rival { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); color: var(--text-1); text-decoration: none; }
.rk-rival:hover { background: var(--gold-wash); }
.rk-rival b { font-weight: 600; }
.rk-rival .rk-faint { font-size: var(--fs-1); }
.rk-more-link { display: inline-block; margin-top: 12px; }

/* The other tabs. */
.rk-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rk-day { margin: 14px 0 6px; color: var(--text-3); font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.14em; text-transform: uppercase; }
.rk-mini { display: grid; grid-template-columns: 96px 24px minmax(0, 1fr) auto 48px 64px; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--hairline); color: var(--text-1); font-size: var(--fs-2); text-decoration: none; }
a.rk-mini:hover { background: var(--gold-wash); box-shadow: inset 2px 0 0 var(--gold); }
.rk-mini .rk-sc { font-size: var(--fs-3); }
.rk-mini > :first-child { white-space: nowrap; }
.rk-mini > :nth-child(5), .rk-mini > :nth-child(6) { text-align: right; }
.rk-mini > :nth-child(6) { font-size: var(--fs-1); }
.rk-mini .rk-res { font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; }
.rk-mini > :nth-child(3) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-mtab { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.rk-mtab th, .rk-mtab td { height: 40px; padding: 0 8px; border-bottom: 1px solid var(--hairline); text-align: left; }
.rk-mtab th { color: var(--text-3); font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.rk-mtab .rk-short { display: none; }
.rk-mtab td.rk-mtab-who { width: 100%; max-width: 0; }
.rk-mtab .rk-cn { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-mtab th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.rk-mtab th[aria-sort] button { color: var(--text-1); }
.rk-mtab .rk-r { text-align: right; white-space: nowrap; }
.rk-mtab tr.is-few td { color: var(--text-3); }
.rk-mtab .rk-who { gap: 10px; }
.rk-h2h-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rk-h2h-pick .rk-search { flex: 1 1 auto; max-width: 420px; }
.rk-h2h-pick .rk-search-box { height: 38px; }
.rk-h2h-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 0 16px; border-bottom: 1px solid var(--hairline); }
.rk-h2h-vs .rk-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-h2h-vs .rk-side.rk-r { flex-direction: row-reverse; }
.rk-h2h-vs .rk-side > div { min-width: 0; }
.rk-h2h-vs .rk-side :is(b, a) { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rk-h2h-vs .rk-side .rk-faint { font-size: var(--fs-1); }
.rk-h2h-score { display: grid; justify-items: center; gap: 6px; }
.rk-big { font: 400 var(--fs-5)/1 var(--font-display); font-feature-settings: "ss02"; text-align: center; white-space: nowrap; }
.rk-h2h-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 12px 0 4px; color: var(--text-2); font-size: var(--fs-2); }
.rk-h2h-facts b { color: var(--text-1); font-weight: 600; }

/* A set page: both players, the score, what the set did to each rating, and every game. */
.rk-setpage { padding: 24px 28px; }
.rk-setpage-side a { font-weight: 600; }
.rk-setpage-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.rk-setpage-side { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; min-width: 0; }
.rk-setpage-side.rk-r { justify-items: end; text-align: right; }
.rk-setpage-side .rk-face { width: 80px; height: 80px; }
.rk-setpage-side b { font-weight: 600; font-size: var(--fs-3); }
.rk-setpage-side .pbd-name { max-width: 100%; font-weight: 600; font-size: var(--fs-3); line-height: 1.25; }
.rk-setpage-side .pbd-name.is-small { font-size: var(--fs-2); }
.rk-setpage-side .pbd-name.is-tight { overflow-wrap: anywhere; }
.rk-setpage-side .rk-sub { color: var(--text-2); font-size: var(--fs-2); }
.rk-setpage-side img.rk-plate { width: 80px; height: 40px; }
.rk-setpage-games { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.rk-game { display: grid; grid-template-columns: 80px 22px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; padding-block: 4px; border-bottom: 1px solid var(--hairline); color: var(--text-2); font-size: var(--fs-2); }
.rk-game b { color: var(--text-1); font-weight: 600; }

/* The page lays out from its own column's width (the container's, 1192 px at most), in three steps: under
   900 px the board shows plates without their names and no region, and the player's badge block moves under the
   name; under 760 px rows take the phone layout and cards go two to a row; under 600 px the header stacks, the
   four numbers go 2 by 2, cards go to one column, and tabs and region chips scroll in one row. */
@container rk (max-width: 899.98px) {
  .rk-cols { grid-template-columns: 40px minmax(0, 1fr) 64px 92px 64px 52px; }
  .rk-cols > .rk-reg, .rk-badge .rk-bn { display: none; }
  .rk-board-top { flex-wrap: wrap; }
  .rk-board-top .rk-chips { flex: 1 1 100%; margin: 0 -16px; padding: 0 16px; }
  .rk-char-btn { margin-left: 0; }
  .rk-dl { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none !important; }

  .rk-hero { grid-template-columns: 120px minmax(0, 1fr); }
  .rk-hero-rank { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 18px; min-width: 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--hairline); text-align: left; }
  .rk-hero-rank:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
  .rk-hero-rank > img { grid-row: 1 / 4; margin: 0; }
  .rk-hero-prog { max-width: 420px; }
}

@container rk (max-width: 759.98px) {
  .rk-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rk-live .rk-updated { margin-left: 0; }
  .rk-board-top { padding: 10px 12px; }
  .rk-board-top .rk-chips { margin: 0 -12px; padding: 0 12px; }
  .rk-cols { grid-template-columns: 26px minmax(0, 1fr) auto 40px; column-gap: 10px; padding: 0 12px 0 6px; }
  .rk-cols > .rk-badge, .rk-cols > .rk-wlc { display: none; }
  .rk-row { height: 58px; }
  .rk-who .rk-sub { display: block; color: var(--text-3); font-size: var(--fs-1); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-who .rk-tag { display: none; }
  .rk-who .rk-n { display: block; overflow: hidden; }
  .rk-who b { display: block; }
  .rk-distc .rk-readout { grid-template-columns: 64px repeat(2, auto); gap: 10px 16px; }
  .rk-distc .rk-readout img { width: 64px; height: 32px; }
  .rk-feed-row { grid-template-columns: 40px minmax(0, 1fr) auto 40px; grid-template-areas: "wf wn sc wc" "lf ln t lc"; row-gap: 8px; padding: 12px 14px; }
  .rk-feed-row .rk-wf { grid-area: wf; } .rk-feed-row .rk-wn { grid-area: wn; } .rk-feed-row .rk-sc { grid-area: sc; } .rk-feed-row .rk-ch.rk-win { grid-area: wc; }
  .rk-feed-row .rk-lf { grid-area: lf; } .rk-feed-row .rk-ln { grid-area: ln; } .rk-feed-row .rk-t { grid-area: t; } .rk-feed-row .rk-ch.rk-loss { grid-area: lc; }

  .rk-chars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-set-head { display: none; }
  .rk-set.rk-set-cols { grid-template-columns: 24px auto minmax(0, 1fr) auto; grid-template-areas: "opp opp opp delta" "mine res games when"; column-gap: 10px; row-gap: 8px; padding: 12px 14px; }
  .rk-set .rk-s-res { grid-area: res; }
  .rk-set .rk-s-mine { grid-area: mine; }
  .rk-set .rk-s-opp { grid-area: opp; }
  .rk-set .rk-s-games { grid-area: games; }
  .rk-set .rk-s-res .rk-res { width: auto; }
  .rk-set .rk-s-delta { grid-area: delta; }
  .rk-set .rk-s-delta span { display: none; }
  .rk-set .rk-s-when { grid-area: when; display: block; color: var(--text-3); font-size: var(--fs-1); text-align: right; }
  .rk-set .rk-s-more { display: none; }
  .rk-set-detail { padding: 0 14px 14px; gap: 6px 18px; }
  .rk-two { grid-template-columns: minmax(0, 1fr); }
  .rk-mini { grid-template-columns: auto 24px minmax(0, 1fr) auto; grid-template-areas: "res face opp delta" "games games games when"; row-gap: 6px; padding: 8px 0; }
  .rk-mini > :nth-child(1) { grid-area: res; } .rk-mini > :nth-child(2) { grid-area: face; } .rk-mini > :nth-child(3) { grid-area: opp; }
  .rk-mini > :nth-child(4) { grid-area: games; } .rk-mini > :nth-child(5) { grid-area: delta; } .rk-mini > :nth-child(6) { grid-area: when; }
  .rk-mini > :nth-child(4):empty { display: none; }
  .rk-games .rk-mini { grid-template-areas: "res face opp delta" "res face when delta"; row-gap: 2px; }
  .rk-games .rk-mini > :nth-child(6) { text-align: left; }
}

@container rk (max-width: 599.98px) {
  .rk-pop { right: 8px; left: 8px; width: auto; }
  .rk-dr, .rk-dl.no-lines .rk-dr { grid-template-columns: 64px minmax(0, 1fr) auto 24px; }
  .rk-dr .rk-bar { display: none; }

  .rk-hero { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; padding: 16px; }
  .rk-hero > .rk-face { width: 72px; height: 72px; align-self: start; }
  .rk-hero-main { display: contents; }
  .rk-hero-top { grid-column: 2; align-self: center; }
  .rk-hero-name, .rk-hero-meta { grid-column: 1 / -1; }
  .rk-hero-name { margin: 2px 0 0; font-size: 34px; }
  .rk-hero-actions { grid-column: 1 / -1; margin-top: 0; }
  .rk-hero-actions .rk-btn { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .rk-hero-rank { column-gap: 14px; padding-top: 14px; }
  .rk-hero-rank > img { width: 96px; height: 48px; }
  /* The MMR row fits a 390 px phone on one line; narrower, the ± and its mark move under the number. */
  .rk-hero-mmr { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 36px; }
  .rk-hero-mmr .rk-rd { white-space: nowrap; }
  .rk-hero-prog { grid-column: 1 / -1; max-width: none; }
  .rk-hero:has(> .rk-hero-art) { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .rk-hero:has(> .rk-hero-art) > .rk-face { display: none; }
  .rk-hero:has(> .rk-hero-art) .rk-hero-top { grid-column: 1 / -1; }
  .rk-hero > .rk-hero-art { display: block; grid-row: 1; grid-column: 1 / -1; width: calc(100% + 32px); max-width: none; height: 176px; margin: 0 -16px 2px; border-bottom: 1px solid var(--hairline); border-radius: 3px 3px 0 0; object-fit: cover; object-position: 50% 0; }
  .rk-graph { padding: 14px 14px 12px; }
  .rk-graph-head .rk-chip .rk-cn { display: none; }
  .rk-seg { margin-left: 0; }
  .rk-readout .rk-delta { margin-left: 0; }
  .rk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .rk-chars { grid-template-columns: minmax(0, 1fr); }
  .rk-mu { grid-template-columns: 24px minmax(0, 1fr) 72px 40px; }
  .rk-mtab th { letter-spacing: 0.06em; }
  .rk-mtab th, .rk-mtab td { padding: 0 5px; }
  .rk-mtab .rk-long { display: none; }
  .rk-mtab .rk-short { display: inline; }
  .rk-h2h-vs { gap: 10px; }
  .rk-h2h-vs .rk-side { flex-direction: column; align-items: flex-start; }
  .rk-h2h-vs .rk-side.rk-r { flex-direction: column; align-items: flex-end; text-align: right; }
  .rk-h2h-vs .rk-side > div { align-self: stretch; }
  .rk-big { font-size: 34px; }
  .rk-setpage { padding: 16px; }
  .rk-setpage-vs { gap: 10px; }
  .rk-setpage-side .rk-face { width: 56px; height: 56px; }
}
/* A phone: the score heads the set, and the two players share the row under it, so each name has half the width. */
@container rk (max-width: 449.98px) {
  .rk-setpage-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: 14px; }
  .rk-setpage-vs > .rk-big { grid-area: 1 / 1 / 2 / -1; }
}

/* Share: the player card's dialog. The card's preview sits beside its options with the buttons along the bottom;
   under 900 px it fills the screen with the preview held at the top while the options scroll under it, and the
   buttons always in view. A chosen option is gold, as every selection on these pages. */
html:has(.rk-share[open]) { overflow: hidden; }
.rk-share { width: min(1180px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--panel-edge); border-radius: 6px; background: var(--band); color: var(--text-1); font: 400 var(--fs-3)/1.4 var(--font-ui); }
.rk-share::backdrop { background: rgba(5, 1, 2, 0.8); }
.rk-share [hidden] { display: none !important; }
.rk-share-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.rk-share-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--hairline); }
.rk-share-head h2 { margin: 0; font: 400 var(--fs-3)/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.rk-share-close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); cursor: pointer; }
.rk-share-close:hover { background: rgba(233, 238, 237, 0.08); color: var(--text-1); }
.rk-share-close svg { width: 18px; height: 18px; }
.rk-share-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.rk-share-stage { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 24px; background: var(--bg); }
.rk-share-frame { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; }
.rk-share-frame canvas { display: block; outline: 1px solid var(--panel-edge); }
.rk-share-frame .rk-loading { position: absolute; inset: 0; }
.rk-share-size { margin: 0; color: var(--text-3); font-size: var(--fs-1); text-align: center; }
.rk-share-opts { min-height: 0; overflow-y: auto; padding: 4px 20px 24px; border-left: 1px solid var(--hairline); overscroll-behavior: contain; }
.rk-share-group { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; }
.rk-share-group legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; color: var(--text-3); font: 700 var(--fs-1)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.rk-share-group legend small { font-size: inherit; font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.rk-share-group legend + * { clear: both; }
.rk-share-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-share-list { display: grid; }
.rk-share-opt, .rk-share-check, .rk-share-swatch { position: relative; cursor: pointer; }
.rk-share-opt input, .rk-share-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rk-share-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(233, 238, 237, 0.16); border-radius: 3px; color: var(--text-2); font: 600 var(--fs-2)/1.1 var(--font-ui); white-space: nowrap; }
.rk-share-opt:has(> .rk-face) { padding-left: 5px; }
.rk-share-opt small { color: var(--text-3); font-size: var(--fs-1); font-weight: 600; }
.rk-share-opt:hover { border-color: rgba(233, 238, 237, 0.4); color: var(--text-1); }
.rk-share-opt:has(input:checked) { border-color: rgba(244, 182, 63, 0.6); background: var(--gold-wash); color: var(--text-1); }
.rk-share-opt:has(input:focus-visible), .rk-share-swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rk-share-shape { display: block; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; }
.rk-share-swatches { gap: 10px; }
.rk-share-swatch { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(233, 238, 237, 0.2); border-radius: 50%; }
.rk-share-swatch::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); }
.rk-share-swatch:hover { border-color: rgba(233, 238, 237, 0.55); }
.rk-share-swatch:has(input:checked) { border: 2px solid var(--gold); }
.rk-share-check { display: flex; align-items: center; gap: 12px; min-height: 38px; color: var(--text-1); font-size: var(--fs-2); font-weight: 500; }
.rk-share-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: inherit; }
.rk-share-scopes { padding: 0 0 8px 30px; }
.rk-share-row + .rk-share-check { margin-top: 6px; }
.rk-share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hairline); }
/* The main button is set as the site's .btn-primary: crimson with dark text reads at 4.05:1, enough only for large
   bold type, so its label is 20 px. */
.rk-btn-main { border-color: var(--verm-500); background: var(--verm-500); color: var(--on-verm); font: 800 1.25rem/1.1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rk-btn-main:hover { border-color: var(--verm-400); background: var(--verm-400); }
.rk-share-status { flex: 1 1 200px; margin: 0; color: var(--text-2); font-size: var(--fs-2); text-align: right; }
.rk-share-status:empty { display: none; }
@media (max-width: 899.98px) {
  .rk-share { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .rk-share-head { min-height: 52px; padding-left: 16px; }
  .rk-share-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .rk-share-stage { position: sticky; top: 0; z-index: 1; height: max(220px, 40vh); height: max(220px, 40dvh); padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  .rk-share-opts { overflow: visible; padding: 0 16px 20px; border-left: 0; border-top: 1px solid var(--hairline); }
  .rk-share-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rk-share-actions .rk-btn { flex: 1 1 0; justify-content: center; }
  .rk-share-status { flex-basis: 100%; text-align: center; }
}

@media (forced-colors: active) {
  .rk-row.is-you::after, .rk-dr.is-you::after { border-color: Highlight; }
  .rk-bar i, .rk-dv i, .rk-bars i { background: CanvasText; }
  .rk-share-opt:has(input:checked), .rk-share-swatch:has(input:checked) { border-color: Highlight; }
}

/* The player's tabs sit under the header's panel. */
.rk-hero + .tabs { margin-top: 28px; }
@container rk (max-width: 599.98px) {
  .rk-hero + .tabs { margin-top: 20px; }
}