/* BATTLE MVP - assets/challenges.css
 *
 * /challenges.php was written against a stylesheet that never shipped: the
 * page markup uses two whole class families - site* (page skeleton) and ui*
 * (cards, buttons) - plus sectionTitle and sideInfo*, and none of the
 * fourteen stylesheets on this platform define any of them. The page had
 * therefore never been styled below the shell, which is why the two-column
 * grid collapsed, the quick-action buttons rendered as run-together text and
 * the panel headings came out smaller than their own body copy.
 *
 * This file supplies only the missing families. The page keeps its own inline
 * <style> for the ch* / lb* families, and because a <style> in <body> comes
 * after a <link> in <head>, those rules still win wherever they overlap -
 * this layer sits underneath and never fights them.
 *
 * Colours come from /assets/logo/brand.css tokens with literal fallbacks, so
 * the page degrades sanely if that file is ever loaded out of order.
 */

/* ── page skeleton ───────────────────────────────────────── */
.sitePage {
    width: 100%;
    padding: 4px 0 36px;
    font-family: 'Inter', system-ui, sans-serif;
}

.siteHero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.siteHero__left  { min-width: 0; flex: 1 1 420px; }
.siteHero__right { flex: 0 0 auto; }

.siteBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border:1px solid var(--bm-border, var(--bm-l2));
    border-radius:999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:var(--bm-text-dim, var(--bm-mu));
}
.siteBadge__dot {
    width: 6px;
    height: 6px;
    border-radius:50%;
    background:var(--bm-brand, #00FFA6);
    box-shadow: 0 0 8px var(--bm-brand-glow, rgba(0,255,166,.35));
}

.siteTitle {
    margin: 10px 0 6px;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .01em;
    color:var(--bm-text, var(--bm-tx));
}
.siteSub {
    max-width: 64ch;
    font-size: 13px;
    line-height: 1.6;
    color:var(--bm-text-muted, var(--bm-mu));
}

.siteSupportCard {
    padding: 12px 14px;
    border:1px solid var(--bm-border, var(--bm-l2));
    border-radius:12px;
    background:var(--bm-surface, var(--bm-card));
    font-size: 12px;
    color:var(--bm-text, var(--bm-tx));
}
.siteSupportCard__sub {
    margin-top: 3px;
    font-size: 11px;
    color:var(--bm-text-dim, var(--bm-mu));
}

/* ── two-column grid ─────────────────────────────────────── */
.siteGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
.siteMain { min-width: 0; }
.siteSide { min-width: 0; }

@media (max-width: 1100px) {
    .siteGrid { grid-template-columns: 1fr; }
}

/* ── cards ───────────────────────────────────────────────── */
.uiCard {
    margin-bottom: 14px;
    border:1px solid var(--bm-border, var(--bm-l2));
    border-radius:14px;
    background:var(--bm-surface, var(--bm-card));
    overflow: hidden;
}
.uiCard:last-child { margin-bottom: 0; }

.uiCard__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-bottom:1px solid var(--bm-border, var(--bm-l2));
}
.uiCard__bd { padding: 14px 16px; }

/* Panel heading. Was rendering at browser default, i.e. smaller than the body
   copy underneath it - the reason "Prizes" and "Player tips" read as captions. */
.sectionTitle {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:var(--bm-text, var(--bm-tx));
}

/* ── buttons ─────────────────────────────────────────────── */
.uiBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border:1px solid var(--bm-border-strong, var(--bm-l2));
    border-radius:10px;
    background:var(--bm-surface-2, var(--bm-elev));
    color:var(--bm-text, var(--bm-tx));
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.uiBtn:hover {
    border-color:var(--bm-brand-line, rgba(0,255,166,.35));
    background:var(--bm-surface-3, var(--bm-elev));
}
.uiBtn:disabled,
.uiBtn[disabled] {
    opacity: .42;
    cursor: not-allowed;
    border-color:var(--bm-border, var(--bm-l2));
    background:var(--bm-surface, var(--bm-card));
}
.uiBtn:disabled:hover { border-color:var(--bm-border, var(--bm-l2)); }

.uiBtn--green {
    border-color:transparent;
    background:var(--bm-brand-grad, linear-gradient(135deg,#1EE0AC 0%,#08D6E8 100%));
    color:var(--bm-on-acc);
    font-weight: 800;
}
.uiBtn--green:hover { filter: brightness(1.06); background:var(--bm-brand-grad, linear-gradient(135deg,#1EE0AC 0%,#08D6E8 100%)); }

.uiBtn--ghost {
    background:transparent;
    color:var(--bm-text-muted, var(--bm-mu));
}
.uiBtn--ghost:hover { color:var(--bm-text, var(--bm-tx)); background:transparent; }

/* ── side info lists ─────────────────────────────────────── */
.sideInfoList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
/* <b> is the item label. Inline it ran into the sentence after it, which is how
   "Player tips Profile & nickname are tied to Steam" ended up as one line. */
.sideInfoItem {
    font-size: 12px;
    line-height: 1.55;
    color:var(--bm-text-muted, var(--bm-mu));
}
.sideInfoItem b {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color:var(--bm-text, var(--bm-tx));
}

/* ==========================================================================
   LAYER v2 -- "LIVE" VISUAL PASS                              (append-only)
   --------------------------------------------------------------------------
   Everything above this line is the original v1 skeleton layer and is left
   byte-for-byte intact. This layer only adds depth, motion and brand colour.

   SPECIFICITY NOTE. The page carries its own <style> block inside <body>,
   which therefore wins over this <link> in <head> at equal specificity. Every
   rule below that has to beat an inline ch* / lb* rule is scoped under
   .sitePage (0,2,0 vs 0,1,0), so the cascade resolves in our favour without a
   single !important.

   HONESTY NOTE. No rule here encodes a state the server has not confirmed.
   Status pills stay colour-neutral because the page has no per-status class
   to hook on to; the only semantic colours used are on the prize ladder
   (gold/silver/bronze = positions, static data) and on .lbTag--ok, which the
   API itself computes.
   ========================================================================== */

/* -- shared motion ----------------------------------------- */
@keyframes bmchSweep   { 0% { background-position:0% 50%; }  100% { background-position:200% 50%; } }
@keyframes bmchPulse   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes bmchHalo    { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bmchShine   { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes bmchFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bmchRise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* -- page: ambient light ----------------------------------- */
.sitePage {
    position: relative;
    isolation: isolate;
    /* v1 declared this too, but its opening comment contained a stray "*" plus
       "/" pair which closed the comment early and made the CSS parser swallow
       the whole first rule. Restated here so the page keeps its bottom gutter
       even if that comment is left alone. */
    width: 100%;
    padding: 4px 0 36px;
    font-family: 'Inter', system-ui, sans-serif;
}
.sitePage::before {
    content: "";
    position: absolute;
    inset: -40px -60px auto;
    height: 520px;
    pointer-events: none;
    background:radial-gradient(680px 300px at 12% 0%,   rgba(0,255,166,.10), transparent 70%),
        radial-gradient(520px 260px at 88% 6%,   rgba(8,214,232,.08), transparent 72%);
}

/* -- hero: a panel, not a paragraph ------------------------ */
.sitePage .siteHero {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 26px 26px 24px;
    border:1px solid var(--bm-border, var(--bm-l2));
    border-radius:18px;
    background:radial-gradient(760px 260px at 4% 0%, rgba(0,255,166,.09), transparent 66%),
        linear-gradient(180deg, var(--bm-card2) 0%, var(--bm-card) 100%);
    box-shadow: 0 20px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
    animation: bmchRise .45s ease both;
}
/* running accent line -- the same device the footer uses */
.sitePage .siteHero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background:linear-gradient(90deg, transparent, rgba(0,255,166,.65) 25%, rgba(8,214,232,.65) 60%, transparent);
    background-size:200% 100%;
    animation: bmchSweep 7s linear infinite;
}
/* brand art, watermarked into the right edge */
.sitePage .siteHero::after {
    content: "";
    position: absolute;
    right: -30px; top: 50%;
    width: 320px; height: 320px;
    transform: translateY(-50%);
    background: url("/assets/brand/bm_hero_glow.png") center/contain no-repeat;
    opacity: .13;
    filter: saturate(1.2);
    pointer-events: none;
    animation: bmchFloat 9s ease-in-out infinite;
}
.sitePage .siteHero__left,
.sitePage .siteHero__right { position: relative; z-index: 1; }

.sitePage .siteBadge {
    background:rgba(0,255,166,.07);
    border-color:rgba(0,255,166,.26);
    color:var(--bm-brand-300, #6BFFCF);
}
.sitePage .siteBadge__dot { animation: bmchPulse 1.9s ease-in-out infinite; }

.sitePage .siteTitle {
    font-size: 40px;
    letter-spacing: -.005em;
    background:linear-gradient(105deg, #FFFFFF 0%, #EAF1FF 34%, #6BFFCF 78%, #08D6E8 100%);
    -webkit-background-clip: text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 42px rgba(0,255,166,.16);
}
.sitePage .siteSub { color:var(--bm-text-muted, var(--bm-mu)); }

.sitePage .siteSupportCard {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-weight: 700;
    border-color:rgba(255,90,120,.24);
    background:linear-gradient(180deg, rgba(255,80,110,.10), rgba(12,18,24,.9));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sitePage .siteSupportCard:hover {
    transform: translateY(-2px);
    border-color:rgba(255,90,120,.5);
    box-shadow: 0 14px 30px rgba(255,60,90,.16);
}

/* -- cards: depth + hairline ------------------------------- */
.sitePage .uiCard {
    position: relative;
    background:linear-gradient(180deg, var(--bm-card2) 0%, var(--bm-card) 100%);
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sitePage .uiCard::before {
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: 0;
    height: 1px;
    background:linear-gradient(90deg, transparent, rgba(0,255,166,.32), transparent);
    pointer-events: none;
}
.sitePage .siteSide .uiCard:hover {
    transform: translateY(-2px);
    border-color:rgba(0,255,166,.24);
    box-shadow: 0 18px 40px rgba(0,0,0,.44), 0 0 0 1px rgba(0,255,166,.06);
}

/* the main challenge card carries the running border, it is the page subject */
.sitePage .chMainCard::before {
    left: 0; right: 0;
    height: 2px;
    background:linear-gradient(90deg, transparent, rgba(0,255,166,.55) 30%, rgba(8,214,232,.55) 62%, transparent);
    background-size:200% 100%;
    animation: bmchSweep 9s linear infinite;
}

.sitePage .uiCard__hd {
    background:linear-gradient(180deg, var(--bm-w2), transparent);
    border-bottom-color:var(--bm-l2);
}

/* -- section titles get an accent tick --------------------- */
.sitePage .sectionTitle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color:var(--bm-text, var(--bm-tx));
}
.sitePage .sectionTitle::before {
    content: "";
    width: 3px;
    height: 13px;
    border-radius:2px;
    background:linear-gradient(180deg, #1EE0AC, #08D6E8);
    box-shadow: 0 0 10px rgba(0,255,166,.5);
    flex: 0 0 3px;
}

/* -- badges ------------------------------------------------ */
.sitePage .chBadge {
    border-color:var(--bm-l3);
    background:linear-gradient(180deg, var(--bm-w3), var(--bm-w1));
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
    transition: border-color .18s ease, color .18s ease;
}
.sitePage .chBadge:hover { border-color:rgba(0,255,166,.30); }

/* countdown -- the single most time-critical number on the page */
.sitePage .chBadge:has(#chTimer),
.sitePage #chTimer {
    font-family: 'Rajdhani', 'Inter', sans-serif;
}
.sitePage #chTimer {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color:var(--bm-brand-300, #6BFFCF);
    text-shadow: 0 0 14px rgba(0,255,166,.45);
}
.sitePage .chBadge:has(#chTimer) {
    padding: 5px 12px;
    border-color:rgba(0,255,166,.28);
    background:linear-gradient(180deg, rgba(0,255,166,.12), rgba(0,255,166,.04));
}

/* my rank -- personal, server-computed, so it may shout */
.sitePage #myRankPill {
    border-color:rgba(0,255,166,.35);
    background:linear-gradient(180deg, rgba(0,255,166,.16), rgba(0,255,166,.05));
    color:var(--bm-tx);
    box-shadow: 0 0 18px rgba(0,255,166,.14);
}

/* prize-pool figures read as money */
.sitePage .chBadge b { color:#FFE08A; }
.sitePage #chTimer   { color:var(--bm-brand-300, #6BFFCF); }

/* challenge title */
.sitePage #chTitle {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 22px;
    letter-spacing: .01em;
    color:var(--bm-tx);
}

/* -- rule blocks ------------------------------------------- */
.sitePage .chRule {
    position: relative;
    overflow: hidden;
    padding-left: 16px;
    background:linear-gradient(180deg, var(--bm-w1), rgba(0,0,0,.16));
    border-color:var(--bm-l2);
}
.sitePage .chRule::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 2px;
    border-radius:2px;
    background:linear-gradient(180deg, rgba(0,255,166,.7), rgba(8,214,232,.25));
}
.sitePage .chRule ul { list-style: none; margin-left: 2px; }
.sitePage .chRule ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 5px;
}
.sitePage .chRule ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: 7px;
    width: 5px; height: 5px;
    border-radius:1px;
    transform: rotate(45deg);
    background:var(--bm-brand, #00FFA6);
    box-shadow: 0 0 8px rgba(0,255,166,.55);
}

/* -- buttons: shine sweep on the primary action ------------ */
.sitePage .uiBtn {
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease,
                color .16s ease, box-shadow .16s ease;
}
.sitePage .uiBtn:hover  { transform: translateY(-1px); }
.sitePage .uiBtn:active { transform: translateY(0); }
.sitePage .uiBtn:focus-visible { outline:0; box-shadow: var(--bm-focus); }

.sitePage .uiBtn--green {
    box-shadow: 0 10px 26px rgba(0,255,166,.18);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.sitePage .uiBtn--green::after {
    content: "";
    position: absolute;
    top: -50%; left: 0;
    width: 40%; height: 200%;
    background:linear-gradient(90deg, transparent, var(--bm-w4), transparent);
    opacity: 0;
    pointer-events: none;
}
.sitePage .uiBtn--green:hover {
    box-shadow: 0 14px 32px rgba(0,255,166,.30);
}
.sitePage .uiBtn--green:hover::after {
    opacity: 1;
    animation: bmchShine .75s ease forwards;
}

.sitePage .uiBtn--ghost {
    border-color:var(--bm-l3);
    background:var(--bm-w1);
}
.sitePage .uiBtn--ghost:hover {
    border-color:rgba(0,255,166,.30);
    background:rgba(0,255,166,.06);
    color:var(--bm-text, var(--bm-tx));
}

/* join CTA keeps its inline red identity, we only add the attention halo */
.sitePage .chJoinCta:not([disabled])::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius:inherit;
    box-shadow: 0 0 0 0 rgba(255,70,70,.45);
    animation: bmchHalo 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* side quick actions read as a menu: label left, chevron right */
.sitePage .siteSide .sideInfoList .uiBtn {
    justify-content: space-between;
    padding: 11px 14px;
}
.sitePage .siteSide .sideInfoList .uiBtn::before {
    content: "\2192";
    order: 2;
    opacity: .45;
    transition: transform .16s ease, opacity .16s ease;
}
.sitePage .siteSide .sideInfoList .uiBtn:hover::before {
    opacity: 1;
    transform: translateX(3px);
}

/* -- prize ladder: gold / silver / bronze ------------------ */
.sitePage .chPrizeRow {
    position: relative;
    overflow: hidden;
    padding: 11px 12px 11px 10px;
    border-color:var(--bm-l2);
    background:linear-gradient(180deg, var(--bm-w1), rgba(0,0,0,.16));
    transition: transform .18s ease, border-color .18s ease;
}
.sitePage .chPrizeRow:hover { transform: translateX(2px); }

/* the "#1" cell becomes a medal disc */
.sitePage .chPrizeRow .chStrong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius:9px;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 15px;
    letter-spacing: .01em;
    color:var(--bm-on-acc);
}
.sitePage .chPrizeRow .chBadge {
    border:0;
    background:none;
    font-size: 14px;
    padding: 0;
}
.sitePage .chPrizeRow .chBadge b { font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 17px; }

.sitePage .chPrizeRow:nth-of-type(1) {
    border-color:rgba(255,197,61,.34);
    background:linear-gradient(100deg, rgba(255,197,61,.16), rgba(0,0,0,.16) 62%);
}
.sitePage .chPrizeRow:nth-of-type(1) .chStrong {
    background:linear-gradient(160deg, #FFE9A8, #FFC53D 55%, #C88A12);
    box-shadow: 0 6px 18px rgba(255,197,61,.28);
}
.sitePage .chPrizeRow:nth-of-type(1) .chBadge b { color:#FFD86B; }
.sitePage .chPrizeRow:nth-of-type(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    background:linear-gradient(90deg, transparent, rgba(255,214,120,.16), transparent);
    background-size:220% 100%;
    animation: bmchSweep 6s linear infinite;
    pointer-events: none;
}

.sitePage .chPrizeRow:nth-of-type(2) {
    border-color:rgba(198,214,232,.26);
    background:linear-gradient(100deg, rgba(198,214,232,.10), rgba(0,0,0,.16) 62%);
}
.sitePage .chPrizeRow:nth-of-type(2) .chStrong {
    background:linear-gradient(160deg, #F2F7FF, #C6D6E8 55%, #8A9AAC);
}
.sitePage .chPrizeRow:nth-of-type(2) .chBadge b { color:var(--bm-tx); }

.sitePage .chPrizeRow:nth-of-type(3) {
    border-color:rgba(205,127,50,.28);
    background:linear-gradient(100deg, rgba(205,127,50,.12), rgba(0,0,0,.16) 62%);
}
.sitePage .chPrizeRow:nth-of-type(3) .chStrong {
    background:linear-gradient(160deg, #F0BE8E, #CD7F32 55%, #8A5320);
    color:var(--bm-on-acc);
}
.sitePage .chPrizeRow:nth-of-type(3) .chBadge b { color:#EBA96B; }

/* -- leaderboard ------------------------------------------- */
.sitePage .chTable th {
    background:linear-gradient(180deg, var(--bm-w3), var(--bm-w1));
    border-bottom-color:var(--bm-l3);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:var(--bm-text-dim, var(--bm-mu));
}
.sitePage .chTable tbody tr {
    position: relative;
    transition: background-color .16s ease, box-shadow .16s ease;
}
.sitePage .chTable tbody tr:hover {
    background:linear-gradient(90deg, rgba(0,255,166,.07), rgba(0,255,166,.015) 55%, transparent);
    box-shadow: inset 3px 0 0 rgba(0,255,166,.65);
}

/* rank cell -> medal disc for the podium, plain number below it.
   :not([colspan]) keeps the empty / loading / error row out of this. */
.sitePage .chTable tbody td:first-child:not([colspan]) {
    text-align: center;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color:var(--bm-text-muted, var(--bm-mu));
}
.sitePage .chTable tbody tr:nth-child(1) td:first-child:not([colspan]),
.sitePage .chTable tbody tr:nth-child(2) td:first-child:not([colspan]),
.sitePage .chTable tbody tr:nth-child(3) td:first-child:not([colspan]) {
    color:var(--bm-on-acc);
    text-shadow: none;
}
.sitePage .chTable tbody tr:nth-child(1) td:first-child:not([colspan]) {
    background:radial-gradient(circle 13px at 50% 50%, #FFE9A8 0%, #FFC53D 62%, #C88A12 100%);
    background-repeat:no-repeat;
}
.sitePage .chTable tbody tr:nth-child(2) td:first-child:not([colspan]) {
    background:radial-gradient(circle 13px at 50% 50%, #F2F7FF 0%, #C6D6E8 62%, #8A9AAC 100%);
    background-repeat:no-repeat;
}
.sitePage .chTable tbody tr:nth-child(3) td:first-child:not([colspan]) {
    background:radial-gradient(circle 13px at 50% 50%, #F0BE8E 0%, #CD7F32 62%, #8A5320 100%);
    background-repeat:no-repeat;
}
.sitePage .chTable tbody tr:nth-child(1) { background:linear-gradient(90deg, rgba(255,197,61,.09), transparent 46%); }
.sitePage .chTable tbody tr:nth-child(2) { background:linear-gradient(90deg, rgba(198,214,232,.06), transparent 46%); }
.sitePage .chTable tbody tr:nth-child(3) { background:linear-gradient(90deg, rgba(205,127,50,.06), transparent 46%); }

/* points column */
.sitePage .chTable tbody td:nth-child(3) b {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 16px;
    color:var(--bm-brand-300, #6BFFCF);
}
.sitePage .chTable tbody td:nth-child(6) b { font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 14px; }

.sitePage .chAva {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-color:rgba(0,255,166,.16);
    transition: transform .16s ease, border-color .16s ease;
}
.sitePage .chTable tbody tr:hover .chAva {
    transform: scale(1.06);
    border-color:rgba(0,255,166,.45);
}
.sitePage .chNick { font-size: 13px; }
.sitePage .chTable tbody tr:hover .chNick { color:var(--bm-brand-300, #6BFFCF); }

.sitePage .lbTag {
    border-color:var(--bm-l3);
    background:var(--bm-w2);
}
.sitePage .lbTag--ok {
    box-shadow: 0 0 12px rgba(0,255,166,.14);
}

/* honest empty state: a framed message instead of a bare grey line */
.sitePage .chTable tbody td[colspan] {
    padding: 30px 14px;
    text-align: center;
    font-size: 13px;
    border-bottom:0;
}
.sitePage .chTable tbody td[colspan]::before {
    content: "";
    display: block;
    width: 42px; height: 42px;
    margin: 0 auto 12px;
    border-radius:12px;
    border:1px dashed rgba(0,255,166,.28);
    background:
        radial-gradient(circle at 50% 50%, rgba(0,255,166,.14), transparent 68%),
        url("/assets/brand/ic_leaderboard.png") center/22px no-repeat;
    opacity: .8;
}

/* -- responsive -------------------------------------------- */
@media (max-width: 900px) {
    .sitePage .siteHero { padding: 20px 18px; }
    .sitePage .siteHero::after { opacity: .07; right: -80px; }
    .sitePage .siteTitle { font-size: 30px; }
    .sitePage .uiCard__hd { padding: 12px 13px; }
    .sitePage .chTable th,
    .sitePage .chTable td { padding: 9px 8px; }
}

/* -- accessibility ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sitePage *,
    .sitePage *::before,
    .sitePage *::after {
        animation: none !important;
        transition: none !important;
    }
}
