/* Rivalry pages (/vs/). Loaded after lc-stats.css. The duel stays two columns on phones, so
   both live numbers sit on the first screen, like the Twitch compare. Numbers use tabular
   digits at a calmer weight, so a rolling number never changes width. */
.vs-duel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.vs-count { font-weight: 600; letter-spacing: 0; min-height: 1.15em; }
.vs-gap-num { font-weight: 700; }
.vs-card.is-ahead .vs-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px currentColor; }
.vs-a .vs-dot { color: #3987e5; }
.vs-b .vs-dot { color: #e0622d; }

@media (max-width: 719px) {
    .vs-duel { gap: 8px; }
    .vs-sep { font-size: 0.8125rem; }
    .vs-card { padding: 14px 8px; }
    /* two lines of room for every name, so both counts sit on one line when only one name wraps */
    .vs-name { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
    .vs-count { font-size: clamp(1.05rem, 5.3vw, 1.9rem); }
    .vs-sub { font-size: 0.75rem; line-height: 1.35; }
    .vs-card a { font-size: 0.8125rem; line-height: 1.35; }
}

/* Face-off rows (hub and "More rivalries"): both pictures, a bar split by each side's share of
   the two counts with the one ahead in the platform's colour, and hairlines instead of cards. */
.vs-h { display: flex; align-items: center; gap: 8px; }
.vs-h .ic { width: 20px; height: 20px; }
.vs-list.vs-faceoff { gap: 0 36px; margin-top: 6px; }
.vs-list.vs-faceoff li.vs-row { position: relative; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 0; }
.vs-row > a { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); grid-template-areas: "a bar b" ". gap ."; align-items: center; column-gap: 12px; row-gap: 3px; padding: 12px 0 10px; color: var(--text); font-weight: 600; text-decoration: none; }
.vs-row > a:hover .vs-n { text-decoration: underline; }
.vs-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vs-sa { grid-area: a; }
.vs-sb { grid-area: b; justify-content: flex-end; text-align: end; }
.vs-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-av { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.vs-av-txt { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.875rem; font-weight: 700; }
.vs-bar { grid-area: bar; position: relative; display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--line); }
.vs-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--a, 50%); background: var(--line-strong); box-shadow: 1px 0 0 var(--surface); }
.vs-row.a-lead .vs-bar i { background: var(--plat); }
.vs-row.b-lead .vs-bar { background: var(--plat); }
.vs-rgap { grid-area: gap; justify-self: center; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.vs-p-youtube { --plat: #ff0033; }
.vs-p-instagram { --plat: #e4405f; }
.vs-p-tiktok { --plat: #16171a; }
.vs-p-twitch { --plat: #9146ff; }
.vs-p-kick { --plat: #1f9d00; }
.vs-p-roblox { --plat: #6b7280; }
[data-theme="dark"] .vs-p-tiktok { --plat: #ececef; }
[data-theme="dark"] .vs-p-kick { --plat: #53fc18; }
@media (max-width: 420px) {
    .vs-row > a { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); column-gap: 8px; }
    .vs-av { width: 30px; height: 30px; }
}