:root {
    --bg: #0b0810;
    --panel: #151019;
    --panel-2: #0b0810;
    --alt: #1c1c24;
    --line: rgba(255, 255, 255, 0.07);
    --line-light: rgba(255, 255, 255, 0.2);
    --text: #e9e6ef;
    --muted: #b9b2c6;
    --dim: #8a8399;
    --faint: #7c7590;
    --brand: #e2542f;
    --brand-lt: #f2896b;
    --gold: var(--grade-yellow);
    --teal: var(--grade-green);
    --blue: var(--grade-teal);
    --purple: #7a6cfb;
    --red: var(--grade-red);
    --grade-green: #22c55e;
    --grade-teal: #3cb4cc;
    --grade-yellow: #eab308;
    --grade-orange: #f97316;
    --grade-red: #f42746;
    --trend-up: var(--grade-green);
    --trend-down: var(--grade-red);
    --trend-info: var(--grade-teal);
    --arc-win: var(--grade-green);
    --arc-kill: var(--grade-orange);
    --arc-assist: var(--grade-teal);
    --arc-dim: #2a2333;
    --arc-dim2: #7d7789;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px
}

button,
input,
select,
textarea {
    font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif
}

/* height, font size and weight match the shared header's .cta-button */
.btn {
    font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    height: 32px;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: transform .15s, filter .15s, background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap
}

.logo-img {
    height: 14px;
}

.btn:active {
    transform: scale(.97)
}

.btn-primary {
    background: linear-gradient(213.3deg, #cd28e2, #c423e6 10%, #a410f3 20%, #8609fe 30%, #7727fb 40%, #6649f8 50%, #556cf5 60%, #4291f2 70%, #45a9ed 80%, #48c0e7 90%, #4bd1e4);
    color: white;
}

.btn-primary:hover {
    filter: brightness(1.1)
}

.btn-ghost {
    background: transparent;
    border: 1px solid white;
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14)
}

a.plain {
    text-decoration: none
}

section.blk {
    padding: 60px 0
}

.alt {
    background: var(--alt)
}

.eyebrow {
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--dim);
    margin-bottom: 6px
}

.sec-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px
}

.sec-sub {
    text-align: center;
    font-size: 15px;
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto 34px
}

.fsplit {
    display: flex;
    gap: 44px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.fsplit.rev {
    flex-direction: row-reverse
}

/* At 1120px and below the side-by-side split starts squeezing the widgets
   (they are built for ~580px) and cuts their content off, so stack instead:
   copy on top, widget under it, sharing one 780px column so their left edges line up. Applies
   to every game page; .rev sections stack the same way, copy first. */
@media(max-width:1120px) {
    .fsplit,
    .fsplit.rev {
        flex-direction: column;
        align-items: center;
        gap: 32px
    }

    .fsplit > .fcopy {
        flex: none;
        width: 100%;
        max-width: 780px;
        position: static
    }

    .fsplit > .fdemo {
        flex: none;
        width: 100%;
        max-width: 780px;
        min-width: 0;
        /* the scroll parallax (inline translateY from each page's onScroll) would
           slide the widget up into the copy above it once they're stacked */
        transform: none !important
    }
}

.fcopy {
    flex: 1;
    min-width: 260px;
    position: sticky;
    /* clears the fixed header plus the sticky game switcher bar under it */
    top: 156px
}

.fcopy .fi {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 22px;
    margin-bottom: 14px;
    overflow: hidden
}

.fcopy .fi img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    flex: none;
    object-fit: contain;
    display: block
}

.fcopy h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px
}

.fcopy p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px
}

.fcopy .tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.tg {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: capitalize;
}

/* tags cycle through the accent palette so a row reads as a set of distinct
   facets instead of one grey block. Rows run 3–5 tags, so the cycle length
   matches the longest row and every row starts on the same colour. */
.tags .tg:nth-child(5n+1) {
    color: var(--blue);
    background: rgba(60, 180, 204, .13);
    border-color: rgba(60, 180, 204, .34)
}

.tags .tg:nth-child(5n+2) {
    color: var(--teal);
    background: rgba(34, 197, 94, .13);
    border-color: rgba(34, 197, 94, .34)
}

.tags .tg:nth-child(5n+3) {
    color: var(--purple);
    background: rgba(154, 146, 230, .13);
    border-color: rgba(154, 146, 230, .34)
}

.tags .tg:nth-child(5n+4) {
    color: var(--gold);
    background: rgba(234, 179, 8, .13);
    border-color: rgba(234, 179, 8, .34)
}

.tags .tg:nth-child(5n+5) {
    color: var(--brand-lt);
    background: rgba(242, 137, 107, .13);
    border-color: rgba(242, 137, 107, .34)
}

.fdemo {
    flex: 1.4;
    min-width: 300px
}

.subtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.sub {
    font-size: 13px;
    color: var(--muted);
    background: #292a32;
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
    line-height: 1.2;
    text-transform: capitalize;
}

.sub:hover {
    border-color: rgba(255, 255, 255, .24);
    color: #fff
}

.sub.on {
    background: transparent;
    color: white;
    font-weight: 600;
    border-color: #fff;
}

/*
  Hidden panes keep their box rather than being removed from the layout, so a
  tab group is always as tall as its tallest pane and switching tabs doesn't
  resize the section. visibility still takes them out of hit-testing, the tab
  order and the accessibility tree — it just leaves the height behind.
  The stacking that makes this work is in the .subpanes-stack block below.
*/
.subpane {
    visibility: hidden
}

/*
  `inherit`, not `visible`: visibility cascades, so a nested group's active pane
  would otherwise un-hide itself inside a hidden ancestor — the Dota hero
  ability tabs live inside the Hero stats pane and leaked over Hero use.
  Inheriting means a pane shows only when everything above it is showing too.
*/
.subpane.on {
    visibility: inherit;
    animation: fade .35s ease
}

/*
  Every pane in a group is pinned to the same grid cell of its container, so
  they overlap instead of stacking. The row is one past the group's non-pane
  siblings:
    .fdemo         .subtabs, then the panes
    .card.tabcard  two .subtabs rows, then the panes (Diablo III leaderboard)
    .card.hprof    .hphead, .abtabs, then the .abpanes (Dota abilities tab)
  align-content keeps the rows at their natural height — .fdemo is a flex item
  and would otherwise stretch them to fill the section.
*/
.fdemo,
.card.tabcard,
.card.hprof {
    display: grid;
    grid-template-columns: 100%;
    align-content: start;
    align-items: center;
}

.fdemo>.subpane {
    grid-area: 2 / 1
}

.card.tabcard>.subpane {
    grid-area: 3 / 1
}

/* Phones: let each tab group take the height of the pane that's showing
   instead of its tallest pane — the hidden panes leave the layout entirely.
   (Above 620px they keep their box so switching tabs doesn't resize.) */
@media(max-width:620px) {
    .subpane:not(.on),
    .abpane:not(.on) {
        display: none
    }
}

/*
  Dota's hero pool only: the Hero use table is much taller than the other three
  panes, so the short ones sit centred in the shared cell rather than hugging the
  tabs. Everywhere else panes stay top-aligned, which reads better when the
  heights are close. Page-scoped because #s-heroes is "Build a better Guardian"
  on the Destiny page, which is a different section entirely.
*/
body.dt #s-heroes .fdemo {
    align-items: center
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.card {
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 10px;
    padding: 13px 14px 12px;
}

/* game switcher bar — sits directly beneath the shared fixed site header.
   Sticky at top: 0 so it follows the page like the header does: its 74px top
   padding stays tucked under the fixed header (z-index 99999), leaving just
   the switcher row showing below the nav. */
.gswitch-bar {
    display: flex;
    justify-content: center;
    padding: 74px 24px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1000
}

/* phones: the switcher wraps to several rows there and would eat the screen,
   so it stays put at the top and only the site header follows the scroll */
@media(max-width:620px) {
    .gswitch-bar {
        position: relative
    }
}

.logo {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px
}

.logo-img {
    height: 14px;
    width: auto;
    display: block
}

.game {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px
}

/* top-menu game switcher */
.gswitch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px
}

/* two rows of pills: java/loader.js sizes the box to the widest row; a
   softer radius than the single-row capsule */
.gswitch.is-wrapped {
    border-radius: 22px
}

.gs {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--dim);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color .15s, background .15s
}

/* the name is wrapped in a span for the markup's sake; it plays no layout part */
.gs-lbl {
    display: contents
}

.gs-ico {
    height: 16px;
    width: auto;
    display: block;
    flex: none;
    opacity: .65;
    transition: opacity .15s
}

/* the Diablo and TFT marks are visually lighter than the rest, so they carry
   a little more height to sit level with them */
.gs-ico[src*="Diablo_Logo_Small"],
.gs-ico[src*="TFT_Logo_Small"] {
    height: 19px
}

.gs:hover {
    color: #fff
}

.gs:hover .gs-ico,
.gs.on .gs-ico {
    opacity: 1
}

.gs.on {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .12)
}

/* a game we haven't shipped yet — dimmed tab with a SOON marker */
.gs.soon {
    color: var(--faint)
}

.gs.soon:hover {
    color: var(--muted)
}

/* the active pill still reads as active on a coming-soon page */
.gs.soon.on {
    color: #fff
}

.gs.soon .gs-ico {
    opacity: .45
}

.gs.soon:hover .gs-ico,
.gs.soon.on .gs-ico {
    opacity: .9
}

.gs-soon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(234, 179, 8, .45);
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.6
}

.dot-mark {
    width: 20px;
    height: 20px;
    background: var(--brand);
    border-radius: 4px;
    position: relative
}

.dot-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2px solid var(--bg);
    border-radius: 2px
}

.hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero .art {
    position: absolute;
    inset: -40px;
    background: #0b0810 url('https://files.supernova-analytics.com/supernova-app-assets/Dota%202/Realm/Dota_Realm_Image.png') center 20% / cover no-repeat;
    transition: transform .3s ease-out;
    will-change: transform;
    animation: slowzoom 18s ease-in-out infinite alternate
}

.hero .art-d2 {
    background-image: url('https://files.supernova-analytics.com/supernova-app-assets/Destiny%202/Realm/Destiny_Realm_Image.png')
}

@keyframes slowzoom {
    from {
        transform: scale(1.04)
    }

    to {
        transform: scale(1.12)
    }
}

.hero .veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 62% 70% at 50% 34%, rgba(11, 8, 16, 0) 0%, rgba(11, 8, 16, .45) 55%, rgba(11, 8, 16, .92) 100%), linear-gradient(180deg, rgba(11, 8, 16, .35), rgba(11, 8, 16, .15) 30%, rgba(11, 8, 16, .9))
}

.hero canvas.em {
    position: absolute;
    inset: 0;
    z-index: 2
}

.hero-inner {
    position: relative;
    z-index: 3;
    padding: 96px 24px 116px;
    opacity: 0;
    transform: translateY(16px);
    animation: rise 1s .2s ease-out forwards
}

@keyframes rise {
    to {
        opacity: 1;
        transform: none
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: .5px;
    color: #dbecff;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
    background: linear-gradient(213.3deg, #cd28e2, #c423e6 10%, #a410f3 20%, #8609fe 30%, #7727fb 40%, #6649f8 50%, #556cf5 60%, #4291f2 70%, #45a9ed 80%, #48c0e7 90%, #4bd1e4);
}

/* hero tag for a game that isn't live yet */
.badge.badge-soon {
    background: rgba(234, 179, 8, .12);
    border: 1px solid rgba(234, 179, 8, .5);
    color: var(--gold)
}

/* smaller in-section tag for a feature that isn't live yet */
.badge.badge-soon.badge-sm {
    font-size: 12px;
    padding: 4px 12px;
    margin-bottom: 12px
}

/* sits on its own line under the feature icon */
.fcopy .badge-sm {
    display: flex;
    width: fit-content
}

.soon-row {
    text-align: center
}

.wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 38px
}

.wordmark .game-logo {
    height: 100px;
    width: auto;
    max-width: 100%;
    /* the height is fixed, so once max-width narrows a wide wordmark it would
       squash; contain scales the art down inside the box instead */
    object-fit: contain;
    filter: drop-shadow(0 2px 28px rgba(0, 0, 0, .6))
}

.wordmark .logo-d2 {
    height: 58px;
    padding: 22px 0;
    box-sizing: content-box
}

.wordmark span {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 10px;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .6)
}

h1 {
    font-size: 38px;
    font-weight: 700;
    margin: 20px 0 14px;
    line-height: 1.2;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .7)
}

.sub-h {
    font-size: 17px;
    color: var(--muted);
    max-width: 540px;
    margin: 0 auto 30px
}

.cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

.fine {
    font-size: 13px;
    color: var(--faint);
    margin-top: 18px
}

.trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-light);
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light)
}

.tcell {
    background: var(--alt);
    text-align: center;
    padding: 26px 12px
}

.tcell .n {
    font-size: 38px;
    font-weight: 700
}

.tcell .l {
    font-size: 13px;
    color: var(--dim);
}

.cs-head {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px
}

/* performance summary — a banner per verdict, then the findings under it */
.pshd {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.psico {
    width: 19px;
    height: 19px;
    flex: none;
    object-fit: contain
}

/* widget heading title: one line, ending in an ellipsis when the card runs out
   of room; the pill on the right (.rp) keeps its full width */
.pshd {
    min-width: 0
}

.pshd .pst {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pshd .rp {
    flex: none;
    white-space: nowrap
}

.psban {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 7px
}

.psbi {
    width: 14px;
    height: 14px;
    flex: none
}

.psban.good {
    color: var(--trend-up);
    background: rgba(34, 197, 94, .13)
}

.psban.bad {
    color: var(--trend-down);
    background: rgba(244, 39, 70, .13)
}

.pslist {
    list-style: none;
    margin: 10px 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.pslist li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text)
}

.pslist b {
    font-size: 14px;
    line-height: 1;
    width: 14px;
    text-align: center;
    flex: none
}

.pslist.good b {
    color: var(--trend-up)
}

.pslist.bad b {
    color: var(--trend-down)
}

.psnote {
    font-size: 12px;
    color: var(--dim);
    margin: 0
}

/* competitive profile — the identity Supernova has built: rank, archetype and
   the heroes that define the account */
.pcard-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line)
}

.pcard-rank {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: contain
}

.pcard-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2
}

.pcard-meta {
    font-size: 13px;
    color: var(--muted)
}

.pcard-since {
    margin-left: auto;
    align-self: flex-start;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--faint);
}

.pcard-lbl {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 5px;
}

.pcard-style {
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.pcard-arch {
    font-size: 20px;
    font-weight: 700;
    color: var(--grade-teal);
    line-height: 1.2;
    margin-bottom: 5px
}

.pcard-style p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0
}

.pcard-sig {
    padding: 14px 0
}

.sigrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.sighero {
    border-radius: 6px;
    padding: 9px 10px;
    background: #24252C;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sighero img {
    width: 100%;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin-bottom: 7px
}

.shn {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff
}

.shg {
    display: block;
    font-size: 12px;
    color: var(--dim)
}

.pcard-kpi {
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.pkrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 10px
}

.pkl {
    display: block;
    font-size: 11.5px;
    color: var(--muted)
}

.pkv {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 2px 0 6px;
    font-variant-numeric: tabular-nums
}

.pkd {
    font-size: 11px;
    font-weight: 600;
    color: var(--grade-green)
}

/* the marker is the bracket benchmark, so the bar reads as versus, not just a value */
.pkb {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08)
}

.pkb>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--grade-green);
    transition: width .9s ease
}

.pkb .avg {
    position: absolute;
    top: -3px;
    height: 12px
}

.pkn {
    font-size: 13px;
    color: var(--faint);
    margin: 0
}

@media(max-width:480px) {
    .pkrow {
        grid-template-columns: 1fr
    }
}

/* competitive profile — one real figure from each of the app's cards */
.pfacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 16px
}

.pfact {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px
}

.pfl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--muted)
}

.pfi {
    width: 14px;
    height: 14px;
    flex: none;
    object-fit: contain;
    opacity: .85
}

.pfv {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 5px 0 2px;
    font-variant-numeric: tabular-nums
}

.pfv.t-teal {
    color: var(--grade-teal)
}

.pfv.t-green {
    color: var(--grade-green)
}

.pfs {
    display: block;
    font-size: 11px;
    color: var(--dim)
}

/* the two read-outs sit side by side rather than stacked */
.pcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px
}

.pcol .pslist {
    margin: 8px 0 0
}

@media(max-width:480px) {

    .pfacts,
    .pcols {
        grid-template-columns: 1fr
    }
}

/* KPI matrix — two metrics that should move together, joined and then judged */
.cintro {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px
}

.cblk {
    --ct: var(--trend-up);
    --ct-line: rgba(34, 197, 94, .5);
    --ct-bg: rgba(34, 197, 94, .14);
    margin-bottom: 12px
}

.cblk.miss {
    --ct: var(--grade-yellow);
    --ct-line: rgba(234, 179, 8, .5);
    --ct-bg: rgba(234, 179, 8, .14)
}

.cblk:last-child {
    margin-bottom: 0
}

.cpair {
    display: grid;
    grid-template-columns: 1fr 22px 1fr;
    align-items: center
}

.cmet {
    border: 1px solid var(--ct-line);
    border-radius: 8px;
    padding: 11px 13px;
    background: #24252C;
}

.cml {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    min-width: 0;
    text-transform: capitalize;
}

.cmi {
    width: 15px;
    height: 15px;
    flex: none;
    object-fit: contain;
    opacity: .85
}

.cmv {
    display: block;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    margin: 5px 0 8px;
    font-variant-numeric: tabular-nums;
}

.cmb {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden
}

.cmb>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--ct);
    transition: width .9s ease
}

/* the tie between the pair: a rule capped with a dot at each end */
.clink {
    position: relative;
    height: 2px;
    background: var(--ct)
}

.clink::before,
.clink::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ct);
    transform: translateY(-50%)
}

.clink::before {
    left: -3px
}

.clink::after {
    right: -3px
}

/* Narrow (each correlation block 360px or less): stack the pair the way the
   demo account's Insights correlation tiles do — one tile above the other,
   the link turned vertical between them with its dots top and bottom */
.cblk {
    container: cblk / inline-size
}

@container cblk (max-width: 360px) {
    .cpair {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 22px auto
    }

    .clink {
        justify-self: center;
        width: 2px;
        height: 100%
    }

    .clink::before,
    .clink::after {
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%)
    }

    .clink::before {
        top: -3px
    }

    .clink::after {
        bottom: -3px
    }
}

.cverd {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
    margin: 8px 0 4px
}

.cpill {
    color: var(--ct);
    background: var(--ct-bg);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600
}

.cnote {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dim);
    margin: 0
}

/* KPI tracker — a tile per metric, green once it clears its target */
.kpigrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* KPI tracker: one tile per row on a 460px screen */
@media(max-width:460px) {
    .kpigrid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.kpit {
    --kt: var(--trend-up);
    border-radius: 8px;
    padding: 12px;
    background: #24252c;
    border: 1px solid #454857;
}

.kpit.under {
    --kt: var(--grade-yellow)
}

.kpit:last-child:nth-child(odd) {
    grid-column: 1 / -1
}

.kpil {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #fff
}

.kpii {
    width: 15px;
    height: 15px;
    flex: none;
    object-fit: contain;
    opacity: .85
}

.kpiv {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    margin: 6px 0 4px;
    font-variant-numeric: tabular-nums
}

.kpid {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid currentColor
}

.kpid.pos {
    color: var(--trend-up);
    background: rgb(34 197 94 / 13%);
}

.kpid.neg {
    color: var(--trend-down);
    background: rgba(244, 39, 70, .08);
}

.kpitg {
    display: block;
    font-size: 12px;
    color: #b2adbc;
    margin-bottom: 8px;
}

.kpib {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden
}

.kpib>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--kt);
    transition: width .9s ease
}

/* scorecard — one graded row per dimension */
.sccard {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.scrow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #24252C;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.scrow span {
    flex: 1
}

.scrow.on {
    border-color: var(--grade-teal);
    background: rgba(60, 180, 204, .07)
}

.scv {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sc)
}

/* score bands, with the icon tinted to match — the filters are the app's own,
   since these are flat SVGs recoloured rather than per-colour assets */
.scrow.t-green {
    --sc: var(--grade-green)
}

.scrow.t-green .kpii {
    filter: invert(40%) sepia(23%) saturate(782%) hue-rotate(78deg) brightness(91%) contrast(89%)
}

.scrow.t-cyan {
    --sc: var(--grade-teal)
}

.scrow.t-cyan .kpii {
    filter: invert(51%) sepia(41%) saturate(456%) hue-rotate(166deg) brightness(105%) contrast(100%)
}

.scrow.t-red {
    --sc: var(--grade-red)
}

.scrow.t-red .kpii {
    filter: invert(53%) sepia(73%) saturate(5906%) hue-rotate(338deg) brightness(94%) contrast(92%)
}

/* the tint replaces the shared icon dimming */
.scrow .kpii {
    opacity: 1
}

/* teamfights — every fight on a match timeline, then the selected one broken
   down per player and who walked out of it */
.tfline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 30px
}

.tftime {
    font-size: 12px;
    color: var(--faint);
    flex: none
}

.tfbar {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, .1);
    border-radius: 2px
}

.tfdot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--grade-red);
    opacity: .55;
    cursor: pointer;
    transition: opacity .25s, transform .25s, width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), margin .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s
}

/* the hit area is bigger than the dot, so an 8px target is still easy to hit */
.tfdot::after {
    content: "";
    position: absolute;
    inset: -9px
}

.tfdot:hover,
.tfdot:focus-visible {
    opacity: 1;
    transform: scale(1.25);
    outline: none
}

.tfdot:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 39, 70, .35)
}

.tfdot.on {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(244, 39, 70, .18)
}

/* only the selected fight is labelled, so the strip stays readable */
.tfdot i {
    opacity: 0;
    transition: opacity .3s;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
    pointer-events: none
}

.tfdot.on i {
    opacity: 1
}

/* new figures fade up as they land, so a swap reads as movement */
@keyframes tfin {
    from {
        opacity: .25;
        transform: translateY(3px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tfin {
    animation: tfin .45s cubic-bezier(.2, .8, .2, 1) both
}

.tfhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.tfhead b {
    font-size: 15px;
    color: #fff
}

.tfk {
    font-size: 12px;
    color: var(--grade-red)
}

.tfw {
    font-size: 12px;
    color: var(--grade-green);
    margin-left: auto
}

.tftbl {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.tfhr,
.tfrow {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center
}

.tfhr {
    font-size: 11px;
    letter-spacing: .6px;
    color: var(--dim);
    padding: 0 6px 6px
}

.tfhr span:not(:first-child) {
    text-align: right
}

.tfrow {
    padding: 8px 6px;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.tfp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fff;
    min-width: 0
}

.tfp img {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex: none
}

.tfd {
    font-size: 10px;
    font-style: normal;
    color: var(--grade-red);
    flex: none
}

.tfm {
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums
}

.tfm b {
    display: block;
    font-weight: 500
}

.tfb {
    display: block;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden
}

.tfb>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--tfc, var(--muted));
    transition: width .7s cubic-bezier(.2, .8, .2, 1)
}

.tfm.dmg {
    --tfc: var(--grade-orange)
}

.tfm.heal {
    --tfc: var(--grade-teal)
}

.tfm.gold {
    --tfc: var(--grade-green)
}

.tfm.xp {
    --tfc: var(--purple)
}

.tfm.gold b {
    color: var(--grade-green)
}

.tfsurv {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 16px
}

.tfl {
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 3px
}

/* a ring per hero: green walked out, red went down */
.tfh {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid;
    object-fit: cover;
    transition: border-color .35s ease, opacity .35s ease
}

.tfh.ok {
    border-color: var(--grade-green)
}

.tfh.out {
    border-color: var(--grade-red);
    opacity: .5
}

/* insight logic — a numbered chain: what we saw, what it came from, what it means.
   Capped so the pane matches its sibling tabs; the rest scrolls. */
.ilog {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent
}

.ilog::-webkit-scrollbar {
    width: 6px
}

.ilog::-webkit-scrollbar-track {
    background: transparent
}

.ilog::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px
}

.ilc {
    border-radius: 10px;
    padding: 11px 13px;
    background: #24252C;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ilo {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0
}

.ilk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 8px 0
}

.ilm {
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #edeaf4;
    margin-right: 2px;
}

.ilt {
    font-size: 11px;
    color: var(--muted);
    background: rgb(0 0 0 / 32%);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 5px;
}

/* the interpretation reads as the payoff, so it gets an accent edge */
.ili {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid rgba(60, 180, 204, .5)
}

.cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.cs-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 10px 4px
}

.cs-col+.cs-col {
    border-left: 1px solid var(--line)
}

.dial {
    display: block
}

.dial .seg {
    transition: stroke-dasharray 1.2s cubic-bezier(.2, .8, .2, 1)
}

/* the label + value stack sits low against the ring's centre — the big value's
   baseline is the block's bottom edge, so lift both to optically centre it */
.dial .dlab,
.dial .dval {
    transform: translateY(-5px)
}

.dial .dlab {
    font-size: 11px;
    fill: var(--dim)
}

.dial .dval {
    font-size: 25px;
    font-weight: 700;
    fill: #fff
}

.lgd {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 16px
}

.lg {
    text-align: center;
    min-width: 56px
}

.lg .bar {
    display: block;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 8px
}

.lg .l {
    font-size: 12px;
    color: var(--dim)
}

.lg .n {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3
}

.cs-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    border-top: 1px solid #454857;
    margin-top: 18px;
    padding-top: 14px
}

.cs-foot .cf:nth-child(2) {
    text-align: left
}

.cs-foot .cf:last-child {
    text-align: right
}

.cf .l {
    font-size: 12px;
    color: var(--dim)
}

.cf .n {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px
}

.cs-foot .cf:nth-child(2) .n {
    justify-content: center
}

.cs-foot .cf:last-child .n {
    justify-content: flex-end
}

.rank-mk {
    width: 14px;
    height: 14px;
    background: var(--arc-dim2);
    border-radius: 3px;
    transform: rotate(45deg);
    opacity: .7
}

/* a real rank medal in place of the generic diamond marker */
img.rank-mk {
    width: 22px;
    height: 22px;
    flex: none;
    background: none;
    border-radius: 0;
    transform: none;
    opacity: 1;
    object-fit: contain
}

.kpis4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px
}

.kc {
    background: var(--panel-2);
    border-radius: 10px;
    padding: 12px
}

.kc .l {
    font-size: 10px;
    color: var(--dim)
}

.kc .n {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px
}

/* playstyle radar */
.ps-card {
    padding: 20px 24px 24px
}

.ps-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px
}

.ps-ttl {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700
}

.ps-ttl img {
    width: 20px;
    height: 20px;
    object-fit: contain
}

.ps-link {
    font-size: 14px;
    color: var(--arc-assist);
    white-space: nowrap
}

.ps-link:hover {
    filter: brightness(1.2)
}

.ps-body {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 26px;
    align-items: center
}

.radar {
    position: relative;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    aspect-ratio: 1
}

.radar .grid polygon,
.radar .grid path {
    stroke-width: 1
}

/* the plotted shape carries the brand gradient (defined in the radar's <defs>) */
.radar .shape {
    fill: url(#radarGrad);
    fill-opacity: .22;
    stroke: url(#radarGrad);
    stroke-width: 2;
    transform-origin: 150px 150px;
    transform: scale(.2);
    opacity: 0
}

.ps-card.in .radar .shape {
    animation: radarIn .9s cubic-bezier(.2, .9, .2, 1) both
}

@keyframes radarIn {
    from {
        transform: scale(.2);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.radar .vdot {
    fill: #fff;
    stroke: var(--arc-assist);
    stroke-width: 3;
    opacity: 0;
    transition: opacity .18s
}

.radar .vdot.on {
    opacity: 1
}

.ax {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--dim);
    transition: color .18s, transform .18s
}

.ax:hover {
    color: #fff;
    cursor: default
}

.axi {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* the axis icons are white PNGs, so opacity stands in for the dim -> white
   colour shift the inline SVGs got from currentColor */
img.axi {
    object-fit: contain;
    opacity: .55;
    transition: opacity .18s
}

.ax:hover img.axi,
.tiph img.axi {
    opacity: 1
}

.tip {
    position: absolute;
    width: 216px;
    background: #1c1826;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, visibility .18s;
    pointer-events: none;
    z-index: 6;
    text-align: left
}

.ax:hover .tip {
    opacity: 1;
    visibility: visible
}

.ax.t .tip {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%)
}

.ax.l .tip {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%)
}

.ax.r .tip {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%)
}

.tiph {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    margin-bottom: 6px
}

.tiph b {
    font-size: 15px;
    font-weight: 700
}

.tiph .tv {
    margin-left: auto;
    font-size: 15px;
    font-weight: 700
}

.tip p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted)
}

.ps-left {
    display: flex;
    flex-direction: column;
    align-items: center
}

.ps-pips {
    display: flex;
    gap: 8px;
    margin-top: 10px
}

.pip {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    cursor: pointer;
    transition: background .25s, width .25s
}

.pip:hover {
    background: rgba(255, 255, 255, .38)
}

.pip.on {
    width: 20px;
    border-radius: 4px;
    background: var(--arc-assist)
}

.ps-panel {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 24px
}

.ps-lab {
    font-size: 12px;
    letter-spacing: 1.4px;
    color: var(--dim);
    margin-bottom: 4px
}

.ps-name {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px
}

.ps-panel p {
    font-size: 14px;
    color: var(--muted)
}

.ps-name,
.ps-panel p {
    transition: opacity .14s ease
}

.ps-panel.swap .ps-name,
.ps-panel.swap p {
    opacity: 0
}

.ps-panel {
    min-height: 218px
}

/* the trend tiles carry their own panel and border, so the usual .card wrapper
   behind them reads as a box inside a box */
.card.bare {
    background: none;
    border: 0;
    padding: 0
}

.trend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

/* phones: one trend card per row */
@media(max-width:540px) {
    .trend {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px
    }
}

.tcard {
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 8px;
    padding: 12px 16px;
}

/* trend tone drives the line, fill, end dot, delta pill and headline value */
.tcard.pos {
    --tone: var(--trend-up);
    --tone-fill: rgba(34, 197, 94, .17)
}

.tcard.neg {
    --tone: var(--trend-down);
    --tone-fill: rgba(244, 39, 70, .17)
}

/* a third, non-judgemental tone for metrics that are just moving, not good or bad */
.tcard.info {
    --tone: var(--trend-info);
    --tone-fill: rgba(60, 180, 204, .17)
}

.tcard .th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px
}

.tcard .th .tt {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* outlined pill, matching the app's trend tiles — colour follows the card tone
   so it never disagrees with the line beneath it */
.tcard .up,
.tcard .down {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 5px;
    color: var(--tone);
    background: transparent;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.up {
    color: var(--teal);
    font-size: 11px;
    background: rgba(34, 197, 94, .14);
    padding: 2px 7px;
    border-radius: 5px
}

.down {
    color: var(--red);
    font-size: 11px;
    background: rgba(244, 39, 70, .14);
    padding: 2px 7px;
    border-radius: 5px
}

.tcard .v {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    text-align: right;
    color: var(--tone, #fff)
}

.tcard .tfoot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    color: var(--dim)
}

.tcard .tg2 {
    font-size: 14px;
    color: var(--dim)
}

.tcard .tfoot b {
    font-weight: 500;
    color: #fff
}

/* the viewBox is inset 4 units all round so the end dot and round caps never
   clip against the edge */
.spark {
    display: block;
    width: 100%;
    height: auto;
    /* wider cards (stacked layout) would otherwise grow the chart past 90px
       tall; cap it at its desktop height and let it stretch sideways instead
       (preserveAspectRatio="none" on the svg) */
    max-height: 62px;
    margin: 6px 0 6px
}

/* dashed guides sit on the series' own low and high points */
.spark .sgl {
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
    stroke-dasharray: 2 2
}

.spark .sline {
    fill: none;
    stroke: var(--tone);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1)
}

/* closing the series back to its first point leaves the wedge between the
   line and its overall trend */
.spark .sfill {
    fill: var(--tone-fill);
    stroke: none
}

.spark .sdot {
    fill: var(--tone)
}

/* the line draws itself on when its pane opens, then the fill and the end dot
   arrive behind it. .play is set by the page script — see sparkGo() */
.spark .sfill,
.spark .sdot {
    opacity: 0
}

.spark .sfill {
    transition: opacity .6s ease
}

.spark .sdot {
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, 1.5, .4, 1)
}

.spark.play .sfill {
    opacity: 1;
    transition-delay: .45s
}

.spark.play .sdot {
    opacity: 1;
    transform: none;
    transition-delay: .95s
}

table.sb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px
}

table.sb th {
    text-align: left;
    color: var(--dim);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .5px;
    padding: 0 8px 8px
}

table.sb td {
    padding: 9px 8px;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.side {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px
}

/* damage table: a right-aligned figure over a bar scaled to the column's best */
.dmg th.dh {
    text-align: right
}

.dmg td.dm {
    text-align: right;
    vertical-align: bottom
}

.dmg .dv {
    display: block;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-bottom: 5px
}

.dmg .dv.dash {
    color: var(--faint)
}

.dmg .db {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden
}

.dmg .db>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--bar, var(--muted));
    transition: width .9s ease
}

.dmg .dm-hero {
    --bar: var(--grade-orange)
}

.dmg .dm-tower {
    --bar: var(--grade-yellow)
}

.dmg .dm-heal {
    --bar: var(--grade-teal)
}

.dmg .dm-taken {
    --bar: var(--grade-red)
}

.rad {
    color: var(--red);
    background: rgba(244, 39, 70, .14)
}

.dire {
    color: var(--teal);
    background: rgba(34, 197, 94, .14)
}

.pl {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff
}

.pi {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    flex-shrink: 0
}

/* hero icons are transparent PNGs — a faint plate keeps them legible on the
   dark row and matches the height of the swatch they replaced */
img.pi {
    object-fit: contain;
    display: block
}

.kd .g {
    color: var(--teal)
}

.kd .r {
    color: var(--red)
}

/* each of the three figures is wrapped, so the slashes get even breathing room
   on both sides without the row growing wider at the edges */
.kd span {
    padding: 0 5px
}

.kd span:first-child {
    padding-left: 0
}

.kd span:last-child {
    padding-right: 0
}

.lane {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.lrow {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel-2);
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 13px;
    background: #24252C;
    border: 1px solid #454857;
}

.lrow .nm {
    flex: 1;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px
}

.lstat {
    color: var(--muted)
}

.lstat b {
    color: #fff;
    font-weight: 600
}

.lane10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px
}

.l10 {
    border-radius: 6px;
    padding: 12px;
    background: #24252C;
    border: 1px solid #454857;
}

.l10 .top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dim);
    margin-bottom: 6px
}

.l10 .top b {
    color: #fff
}

.l10 .bar {
    height: 6px;
    background: #2a2333;
    border-radius: 3px;
    overflow: hidden
}

.l10 .bar>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--teal);
    transition: width .9s ease
}

.items {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.iline {
    display: flex;
    align-items: center;
    gap: 10px
}

.islot {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    flex-shrink: 0;
}

/* item icons are 4:3, so they fill the slot and crop rather than letterbox */
.islot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    display: block
}

.islot:hover {
    border-color: rgba(255, 255, 255, .28)
}

.itip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s;
    z-index: 5;
    pointer-events: none
}

.islot:hover .itip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%)
}

.itip b {
    font-size: 12px;
    color: #fff
}

.itip i {
    font-size: 11px;
    font-style: normal;
    color: var(--grade-yellow)
}

.itime {
    font-size: 11px;
    color: var(--dim);
    width: 52px
}

.score {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.srow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px
}

.srow .nm {
    width: 110px;
    color: var(--muted)
}

.srow .bx {
    flex: 1;
    height: 8px;
    background: #2a2333;
    border-radius: 4px;
    overflow: hidden
}

.srow .bx>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .9s ease
}

.srow .vl {
    width: 32px;
    text-align: right;
    color: #fff;
    font-weight: 600
}

/* video-backed section */
.vidbg {
    position: relative;
    overflow: hidden
}

.secvid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none
}

.secveil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--alt) 0%, rgb(28 28 36 / 3%) 22%, rgb(28 28 36 / 45%) 78%, #1c1c24f0 100%);
}

.vidbg>.wrap {
    position: relative;
    z-index: 2
}

@media(prefers-reduced-motion: reduce) {
    .secvid {
        display: none
    }
}

/* narrative intro */
.narr {
    max-width: 780px;
    margin: 0 auto
}

.narr .np {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 22px
}

.narr .nq {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    padding-left: 18px;
    border-left: 2px solid var(--arc-assist);
    margin-bottom: 22px
}

.fcopy p.lede {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px
}

/* benchmark + profile bars */
.score.wide .nm {
    width: 132px
}

.score.wide .vl {
    width: 52px
}

.srow .bx {
    position: relative
}

.avg {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: #fff;
    opacity: .75;
    border-radius: 1px
}

.srow .bx .avg {
    position: absolute;
    top: -2px
}

.avg.static {
    vertical-align: -2px;
    margin-right: 6px
}

.vl.up {
    color: var(--arc-win)
}

.vl.down {
    color: var(--red)
}

.repbadge {
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 5px 10px;
    margin-left: 8px;
    white-space: nowrap;
}

.cknote {
    font-size: 13px;
    color: #a8aaaf;
    margin-top: 14px;
    line-height: 1.5;
}

/* insight logic breakdown */
.logic {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.lstep {
    display: flex;
    gap: 14px;
    padding: 10px 0
}

.lstep .ln {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--arc-assist);
    background: rgba(60, 180, 204, .14);
    border: 1px solid rgba(60, 180, 204, .35);
    position: relative
}

.lstep:not(:last-child) .ln::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 50%;
    width: 1px;
    height: calc(100% + 6px);
    background: var(--line)
}

.lstep b {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--dim);
    text-transform: uppercase
}

.lstep p {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5
}

/* hero pool */
/* hero pool diversity — coverage ring beside the raw count, then the balance
   score, mirroring the app's card */
.hdiv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 18px 0
}

.hdstat .l {
    display: block;
    font-size: 12px;
    color: var(--muted)
}

.hdstat .n {
    font-size: 30px;
    font-weight: 700;
    color: #fff
}

.hdstat .of {
    font-size: 17px;
    font-weight: 400;
    color: var(--dim)
}

.hbal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.hbal .l {
    display: block;
    font-size: 12px;

    color: var(--muted)
}

.hbal .n {
    font-size: 17px;
    font-weight: 700;
    color: #fff
}

.hbal .of {
    font-size: 13px;
    font-weight: 400;
    color: var(--dim)
}

/* the pool tag: colour and icon both swap with the tag, as in the app */
.hbpill-ico {
    /* Icon_Flexible.png is cropped tight to its artwork — content runs to the
       top, bottom and right edges of the canvas — so the glyph is inset with
       padding to stop it reading as clipped. 16x19 content box keeps the
       source 34:40 ratio. */
    width: 22px;
    height: 25px;
    padding: 3px;
    box-sizing: border-box;
    flex: none;
    background: var(--pill-icon) center / contain no-repeat;
    background-origin: content-box;
    filter: brightness(0) invert(1)
}

.hbpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--grade-teal);
    background: rgba(60, 180, 204, .1);
    border: 1px solid rgba(60, 180, 204, .5);
    border-radius: 5px;
    padding: 5px 11px;
}

/* a second heading inside the same card */
.pshd-sub {
    margin-top: 16px
}


/* the top role, called out beside the heading */
.rp {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--grade-teal);
    background: rgba(60, 180, 204, .1);
    border-radius: 5px;
    padding: 4px 10px;
    text-transform: capitalize;
}

/* top heroes — ranked, with the columns the app lists */
.thead,
.thr {
    display: grid;
    grid-template-columns: 18px 1fr 56px 56px 56px;
    gap: 8px;
    align-items: center
}

/* four numeric columns — Destiny's Top Playlist lists Games, Kills, K/D and WR */
.thead.c4,
.thr.c4 {
    grid-template-columns: 18px 1fr 48px 48px 48px 48px;
    gap: 6px
}

.thead {
    font-size: 12px;
    color: var(--dim);
    padding: 0 4px 8px
}

.thead span {
    text-align: right
}

/* Hero spans the rank column too, so the label starts at the table edge */
.thead .thl {
    grid-column: 1 / 3;
    text-align: left
}

.thr {
    padding: 7px 4px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    transition: background .15s
}

.thr:hover {
    background: rgba(255, 255, 255, .03)
}

.thn {
    font-size: 12px;
    color: var(--dim);
    text-align: center
}

.thh {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    min-width: 0
}

.thh img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.thv {
    font-size: 13px;
    text-align: right;
    color: white;
    font-variant-numeric: tabular-nums
}

.thv.t-up {
    color: var(--grade-green);
    font-weight: 600
}

.thv.t-dn {
    color: var(--grade-red);
    font-weight: 600
}

/* hero profile: one block per stat group, as the app splits them */
.hpgrp {
    margin-bottom: 10px
}

.hpgrp:last-child {
    margin-bottom: 0
}

.hpgrp .h {
    font-size: 11px;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 3px;
}

.pool-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.pstat .l {
    font-size: 10px;
    letter-spacing: .8px;
    color: var(--dim)
}

.pstat .n {
    font-size: 20px;
    font-weight: 700
}

.pstat .of {
    font-size: 13px;
    font-weight: 400;
    color: var(--dim)
}

.hpool {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px
}

.hpx {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border-radius: 10px;
    padding: 8px 12px 8px 8px
}

.hpx img {
    width: 46px;
    height: 26px;
    object-fit: cover;
    border-radius: 5px;
    flex: none
}

.wico {
    width: 46px;
    height: 26px;
    border-radius: 5px;
    flex: none;
    display: block;
    position: relative;
    overflow: hidden
}

.wico::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%)
}

.hpav-sq {
    width: 48px
}

.hpx .hn {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2
}

.hpx .hs {
    font-size: 11px;
    color: var(--dim)
}

.hpx .hw {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted)
}

.hpx .hw.g {
    color: var(--arc-win)
}

.hpx .hw.r {
    color: var(--red)
}

/* profile growth timeline */
.growl {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.gl {
    display: flex;
    gap: 14px;
    padding: 7px 0
}

.gl .gd {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--arc-dim);
    position: relative
}

.gl .gd.on {
    background: var(--arc-dim2)
}

.gl .gd.now {
    background: var(--arc-assist);
    box-shadow: 0 0 0 4px rgba(60, 180, 204, .18)
}

.gl:not(:last-child) .gd::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 1px;
    height: calc(100% + 12px);
    background: var(--line)
}

.gl b {
    font-size: 13px;
    font-weight: 700
}

.gl p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45
}

.cklist {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.ck {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: center
}

.ck b {
    width: 16px;
    text-align: center
}

.ck.g b {
    color: var(--teal)
}

.ck.r b {
    color: var(--red)
}

.pltag {
    display: inline-block;
    font-size: 12px;
    color: var(--gold);
    background: rgba(234, 179, 8, .14);
    padding: 4px 12px;
    border-radius: 7px
}

.roles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.hprof .hphead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px
}

.hpav {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: #3a2a52;
    flex-shrink: 0;
    overflow: hidden
}

.hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hpname {
    font-size: 17px;
    font-weight: 600;
    color: #fff
}

.hprole {
    font-size: 13px;
    color: var(--dim)
}

/* four stat groups, two per row */
.hpcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 22px;
    margin-bottom: 14px
}

@media(max-width:480px) {
    .hpcols {
        grid-template-columns: 1fr
    }
}

.hpstat {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.hpstat .k {
    color: var(--muted)
}

.hpstat .v {
    color: #fff;
    font-weight: 600
}

/* two per row, each filling its half — steadier than letting four pills wrap */
.abtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px
}

@media(max-width:480px) {
    .abtabs {
        grid-template-columns: 1fr
    }
}

.ab {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--line);
    padding: 7px 11px;
    border-radius: 6px;
    cursor: pointer
}

.ab.on {
    border-color: var(--blue);
    color: #fff
}

.abico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: none;
    overflow: hidden;
    display: inline-block
}

.abico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* same stacking as .subpane — see the note there */
.abpane {
    visibility: hidden
}

.abpane.on {
    visibility: inherit;
    animation: fade .3s ease
}

/* the abilities card is .hphead, .abtabs, then the panes */
.card.hprof>.abpane {
    grid-area: 3 / 1
}

.abdesc {
    font-size: 13px;
    color: var(--muted);
    background: var(--panel-2);
    border-radius: 10px;
    padding: 14px
}

.abmeta {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.abmeta .m {
    font-size: 12px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 11px
}

.news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.gc {
    border-radius: 9px;
    overflow: hidden;
    transition: transform .2s;
    background: #1c1c24;
    border: 1px solid #454857;
    /* column so the body can stretch and pin the source line to the bottom */
    display: flex;
    flex-direction: column
}

/* guide tiles are links; keep them looking like the cards beside them */
a.gc {
    display: flex;
    text-decoration: none;
    color: inherit
}

.gc:hover {
    transform: translateY(-4px)
}

.gc .th {
    flex: none;
    height: 96px;
    position: relative;
    background: var(--panel)
}

/* real article art, cropped to the card */
.gc .th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.gc .cat {
    position: absolute;
    top: 9px;
    left: 9px;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--gold);
    background: rgba(11, 8, 16, .7);
    padding: 3px 8px;
    border-radius: 5px
}

/* article / guide type: a small all-caps line under the image, above the
   title. .cat stays for the other game pages, whose cards have no artwork. */
.gc .gmeta {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--grade-teal);
    margin-bottom: 4px
}

.gc .bd {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.gc .tt {
    font-size: 13px;
    color: #fff;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.about {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7
}

.cmp {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto
}

table.cmp-t {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 640px
}

table.cmp-t th {
    padding: 14px 12px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid var(--line)
}

table.cmp-t th.feat {
    text-align: left;
    color: var(--dim);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .5px
}

table.cmp-t th.us {
    background: rgba(226, 84, 47, .12);
    border-radius: 10px 10px 0 0
}

table.cmp-t td {
    padding: 13px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

table.cmp-t td.feat {
    text-align: left;
    color: var(--text)
}

table.cmp-t td.us {
    background: rgba(226, 84, 47, .06)
}

.yes {
    color: var(--teal);
    font-size: 16px
}

.no {
    color: var(--faint)
}

.part {
    color: var(--gold)
}

.cmp-note {
    text-align: center;
    font-size: 12px;
    color: var(--faint);
    margin-top: 16px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

/* roadmap — a timeline: stage labels above the rail, nodes on it, work below */
.rlabels,
.roadtrack,
.road {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.rl {
    --rc: var(--purple);
    --rc-soft: rgba(154, 146, 230, .16);
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rc);
    margin-bottom: 16px
}

.rl.now {
    --rc: var(--grade-green);
    --rc-soft: rgba(34, 197, 94, .16)
}

.rl.next {
    --rc: var(--grade-teal);
    --rc-soft: rgba(60, 180, 204, .16)
}

/* the count rides in the label so it carries a fact, not just a heading */
.rl i {
    font-style: normal;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--rc-soft)
}

.roadtrack {
    position: relative;
    margin-bottom: 22px
}

/* dashed rail, drawn only between the first and last node */
/* the rail bleeds past the content on both sides; .rmsec clips the overflow
   so it cannot introduce a horizontal scrollbar */
.roadtrack::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, .16)
}

.rmsec {
    overflow-x: hidden
}

.rnode {
    --rc: var(--purple);
    position: relative;
    justify-self: start;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--rc)
}

.rnode.now {
    --rc: var(--grade-green);
    background: var(--grade-green)
}

/* the live stage keeps a slow pulse, so the eye lands on where we are now */
.rnode.now::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .45);
    animation: rpulse 2.4s cubic-bezier(.3, 0, .2, 1) infinite
}

@keyframes rpulse {
    from {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .45)
    }

    70% {
        box-shadow: 0 0 0 12px rgba(34, 197, 94, 0)
    }

    to {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0)
    }
}

@media(prefers-reduced-motion: reduce) {
    .rnode.now::after {
        animation: none;
        box-shadow: 0 0 0 6px rgba(34, 197, 94, .16)
    }
}

.rnode.next {
    --rc: var(--grade-teal)
}

/* the further out the stage, the further it recedes */
.rcard {
    --rc: var(--purple);
    position: relative;
    text-align: left;
    background: #1c1c24;
    border: 1px solid #454857;
    border-radius: 9px;
    padding: 18px;
    overflow: hidden;
    opacity: .62;
    transition: transform .2s, border-color .2s
}

/* a stage-coloured seam along the top edge */
.rcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rc)
}

.rcard:hover {
    transform: translateY(-3px);
    border-color: var(--rc)
}

.rcard.now {
    --rc: var(--grade-green);
    opacity: 1
}

.rcard.next {
    --rc: var(--grade-teal);
    opacity: .82
}

.rcard ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.rcard li {
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 9px
}

.rcard li b {
    flex: none;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    color: var(--rc);
    border: 1px solid var(--rc)
}

.rcard.now li {
    color: var(--text)
}

/* Stacked roadmap (820px and below): a vertical timeline. The labels and tiles
   live in two separate rows in the markup, so .rlabels and .road dissolve
   (display: contents) and the section's .wrap becomes one grid: a 28px rail
   column on the left, and each stage label directly above its own tile on the
   right (ordered with `order`). The dashed rail is .wrap::before, placed in the
   rail column from the first stage label (row 4, after eyebrow / title / sub)
   to the last; each label carries its stage dot. */
@media(max-width:820px) {
    .rmsec .wrap {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr)
    }

    .rmsec .wrap > * {
        grid-column: 1 / -1
    }

    .rmsec .rlabels,
    .rmsec .road {
        display: contents
    }

    .rmsec .roadtrack {
        display: none
    }

    .rmsec .rl,
    .rmsec .rcard {
        grid-column: 2
    }

    .rmsec .rl.now { order: 1 }
    .rmsec .rcard.now { order: 2 }
    .rmsec .rl.next { order: 3 }
    .rmsec .rcard.next { order: 4 }
    .rmsec .rl.later { order: 5 }
    .rmsec .rcard.later { order: 6 }

    .rmsec .wrap::before {
        content: "";
        grid-column: 1;
        grid-row: 4 / 9;
        justify-self: center;
        margin: 9px 0 19px;
        border-left: 2px dashed rgba(255, 255, 255, .16)
    }

    .rmsec .rl {
        position: relative;
        margin: 0 0 10px
    }

    /* stage dot on the rail, centred in the 28px column */
    .rmsec .rl::before {
        content: "";
        position: absolute;
        left: -21px;
        top: 50%;
        width: 13px;
        height: 13px;
        margin-top: -6.5px;
        box-sizing: border-box;
        border-radius: 50%;
        background: var(--bg);
        border: 2px solid var(--rc)
    }

    .rmsec .rl.now::before {
        background: var(--rc)
    }

    .rmsec .rcard {
        opacity: 1;
        padding: 14px 16px;
        margin-bottom: 22px
    }

    .rmsec .rcard.later {
        margin-bottom: 0
    }
}

.founder {
    max-width: 760px;
    margin: 36px auto 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 30px
}

.founder p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px
}

.fsign {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px
}

.fsav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3a2a52
}

.fsign b {
    color: #fff;
    font-weight: 600;
    display: block;
    font-size: 14px
}

.fsign span {
    font-size: 12px;
    color: var(--dim)
}

.demo {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 12px;
    padding: 32px;
    max-width: 920px;
    margin: 0 auto;
    background: #1c1c24;
    border: 1px solid #454857;
}

.demo .txt {
    flex: 1;
    min-width: 250px;
    max-width: 330px;
}

.demo h3 {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px
}

.demo p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 18px;
    line-height: 1.5;
}

.demoprev {
    flex: 1;
    min-width: 260px;
    background: #24252c;
    border: 1px solid #454857;
    border-radius: 9px;
    overflow: hidden
}

/* 920px and below: the demo card stacks — copy on top across the full width
   (no 330px cap), the dashboard preview full width under it */
@media(max-width:920px) {
    .demo {
        flex-direction: column;
        align-items: stretch
    }

    .demo .txt,
    .demoprev {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0
    }
}

/* the banner mirrors the app's game header: artwork behind, identity in front */
.dpban {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center
}

.dpbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%
}

/* the artwork is busy, so the left side is darkened for the name to sit on */
.dpban::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 8, 16, .92) 0%, rgba(11, 8, 16, .55) 42%, rgba(11, 8, 16, .82) 100%)
}

.dphead {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 14px
}

.dpav {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .22);
    display: block
}

.dpid {
    min-width: 0
}

.dpn {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2
}

.dps {
    font-size: 14px;
    color: var(--muted)
}

.dpright {
    margin-left: auto;
    text-align: right;
    flex: none
}

.dplogo {
    height: 19px;
    width: auto;
    display: block;
    margin-left: auto
}

.dpupd {
    font-size: 12px;
    color: white;
    margin-top: 5px;
    white-space: nowrap;
}

.dpupd b {
    color: white;
    font-weight: 500;
}

.dpg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #454857;
    border-top: 1px solid #454857
}

.dpc {
    background: #24252c;
    padding: 12px;
    text-align: center
}

@media(max-width:480px) {
    .dpright {
        display: none
    }
}

.dpc .n {
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.dpc .l {
    font-size: 10px;
    color: var(--dim)
}

.datastrip {
    position: relative;
    max-width: 920px;
    margin: 28px auto 0;
    border-radius: 9px;
    padding: 22px 24px 24px;
    text-align: center;
    overflow: hidden;
    background: #1c1c24;
    border: 1px solid #454857;
}



.datastrip .lb {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: white;
    margin-bottom: 18px;
}

/* three columns split by hairlines reads more considered than a row of pills */
.dchips {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.dchip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 18px
}

.dchip+.dchip {
    border-left: 1px solid var(--line)
}

.dchip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: .9;
    margin-bottom: 8px
}

.dct {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.35
}

.dcs {
    font-size: 14px;
    color: var(--dim)
}

@media(max-width:720px) {
    .dchips {
        grid-template-columns: 1fr
    }

    .dchip {
        padding: 16px 0
    }

    .dchip+.dchip {
        border-left: 0;
        border-top: 1px solid var(--line)
    }
}

.faq {
    max-width: 680px;
    margin: 0 auto
}

.fq {
    border-bottom: 1px solid var(--line)
}

.fq .qh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 4px;
    cursor: pointer;
    font-size: 16px;
    color: #fff
}

.fq .qh .ic {
    color: var(--dim);
    transition: transform .2s;
    font-size: 20px
}

.fq.open .qh .ic {
    transform: rotate(180deg)
}

.fq .qb {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.fq .qb p {
    font-size: 15px;
    color: var(--muted);
    padding: 0 4px 18px
}

.cta {
    position: relative;
    overflow: hidden;
    margin: 44px 24px 40px;
    text-align: center;
    padding: 62px 24px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background:
        radial-gradient(ellipse 55% 90% at 12% 0%, rgba(60, 180, 204, .12), transparent 62%),
        radial-gradient(ellipse 55% 90% at 88% 0%, rgba(154, 146, 230, .12), transparent 62%),
        radial-gradient(ellipse 80% 120% at 50% 100%, #3a2410 0%, #151019 70%)
}



.cta>* {
    position: relative;
    z-index: 1
}

.cta h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px
}

.cta p {
    color: var(--muted);
    margin-bottom: 26px
}

footer {
    padding: 28px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 60px
}

footer .logo {
    color: var(--dim)
}

footer .note {
    font-size: 13px;
    color: var(--faint)
}

@media(max-width:820px) {
    .kpis4 {
        grid-template-columns: 1fr 1fr
    }

    .cs-grid {
        grid-template-columns: 1fr
    }

    .ps-body {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .tip {
        width: 190px
    }

    .cs-col+.cs-col {
        border-left: none;
        border-top: 1px solid var(--line)
    }

    .news {
        grid-template-columns: repeat(2, 1fr);
    }

    .road {
        grid-template-columns: 1fr
    }

    .cklist {
        grid-template-columns: 1fr
    }

    .fcopy {
        position: static
    }

    .fsplit.rev {
        flex-direction: column
    }
}

@media(max-width:720px) {
    .gswitch-bar {
        padding: 92px 16px 16px
    }

    .gs {
        padding: 6px 11px;
        font-size: 12px;
        gap: 6px
    }

    .gs-ico {
        height: 14px
    }

    .wordmark span {
        font-size: 38px;
        letter-spacing: 6px
    }

    .wordmark .game-logo {
        height: 78px
    }

    h1 {
        font-size: 28px
    }

    .hero {
        min-height: 500px
    }

    .hero-inner {
        padding: 80px 24px 90px
    }
}

@media(max-width:600px) {
    .trust {
        grid-template-columns: repeat(2, 1fr)
    }

    .hpcols {
        grid-template-columns: 1fr
    }
}

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1)
}

.reveal.in {
    opacity: 1;
    transform: none
}

#prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #cd28e2, #c423e6 10%, #a410f3 20%, #8609fe 30%, #7727fb 40%, #6649f8 50%, #556cf5 60%, #4291f2 70%, #45a9ed 80%, #48c0e7 90%, #4bd1e4);
    background-size: 100vw 100%;
    background-repeat: no-repeat;
    /* above the shared site header (z-index 99999) so the scroll bar stays visible */
    z-index: 100000;
    transition: width .12s linear
}

.fdemo {
    will-change: transform
}

@media(prefers-reduced-motion:reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .fdemo {
        transform: none !important
    }
}

/* ============================================================
   Supernova app widgets (Destiny 2) — mirrors the live product
   ============================================================ */

/* product nav cards (replaces the trust strip on the D2 page) */
.navcards {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.navc {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s
}

.navc:hover {
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-2px)
}

.navc.wip {
    border-color: rgba(60, 180, 204, .45)
}

.navc .soon {
    position: absolute;
    top: -10px;
    left: 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    padding: 3px 9px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(90deg, #8609fe, #4bd1e4)
}

.navc .nprev {
    height: 62px;
    border-radius: 10px;
    background: var(--panel-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    overflow: hidden
}

.navc .nt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .7px;
    margin-top: 11px
}

.navc .nd {
    font-size: 11.5px;
    color: var(--dim);
    line-height: 1.4
}

/* app stat tiles: icon + value + label + mini bar */
.dstats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 14px
}

.dst {
    background: var(--panel-2);
    border-radius: 6px;
    padding: 11px 12px;
    border: 1px solid #454857;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dst .dh {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.dst .dv {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    color: white;
}

.dst .dl {
    font-size: 12px;
    color: #a8aaaf;
    line-height: 1.2;
}

.dst .mini {
    height: 6px;
    border-radius: 22px;
    background: #2a2333;
    overflow: hidden
}

.dst .mini>span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .9s ease
}

.csub {
    font-size: 16px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

/* app data tables (top playlist / activities / weapons) */
.atable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-top: 14px
}

.atable th {
    text-align: right;
    font-size: 10px;
    letter-spacing: .7px;
    color: var(--dim);
    font-weight: 600;
    padding: 0 0 8px
}

.atable th:first-child,
.atable td:first-child {
    text-align: left
}

.atable td {
    text-align: right;
    padding: 8px 0;
    border-top: 1px solid var(--line)
}

.atable .nmc {
    display: flex;
    align-items: center;
    gap: 9px
}

.ic-sq {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex: none;
    display: inline-block;
    background: #2a2333
}

/* recent matches */
.tscroll {
    overflow-x: auto
}

.mtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.mtable th {
    text-align: right;
    font-size: 9.5px;
    letter-spacing: .6px;
    color: var(--dim);
    font-weight: 600;
    padding: 0 7px 9px;
    white-space: nowrap
}

.mtable th:first-child,
.mtable td:first-child {
    text-align: left
}

.mtable td {
    text-align: right;
    padding: 9px 7px;
    border-top: 1px solid var(--line);
    white-space: nowrap
}

.mtable tr.win {
    background: rgba(34, 197, 94, .07)
}

.mtable tr.loss {
    background: rgba(244, 39, 70, .04)
}

.mtable .res.w {
    color: var(--arc-win)
}

.mtable .res.l {
    color: var(--muted)
}

.mtable .cellf {
    display: flex;
    align-items: center;
    gap: 7px
}

.mtable .ic-sq {
    width: 17px;
    height: 17px;
    border-radius: 4px
}

/* character / build cards */
.chrs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.chr {
    border-radius: 8px;
    overflow: hidden;
    background: #1c1c24;
    border: 1px solid #454857;
}

.chr .ch {
    padding: 16px 12px;
    display: flex;
    align-items: center;
    gap: 9px
}

.chr .cn {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2
}

.chr .cs {
    font-size: 11px;
    color: var(--dim)
}

.chr .lvl {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    color: var(--gold);
    white-space: nowrap
}

.chr .lvl b {
    display: block;
    color: var(--muted);
    font-weight: 600
}

.chr .cb {
    padding: 0 12px 12px
}

.chips2 {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.chip2 {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
    background: #0E0E10;
}

.chrow {
    margin-top: 9px
}

.chrow .h {
    font-size: 10px;
    letter-spacing: .8px;
    color: #9d96ab;
    margin-bottom: 6px;
}

.icg {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.icg .ic {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #2a2333;
}

.icg .ic.em {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .14)
}

/* weapon library */
.wtool {
    display: flex;
    gap: 8px;
    margin-bottom: 9px
}

.wsearch {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--faint)
}

.wpill {
    background: #2b2c33;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    color: white;
    white-space: nowrap;
}

.wcount {
    font-size: 11px;
    color: var(--dim);
    margin-bottom: 9px
}

.wgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px
}

.wcard {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 9px;
    display: flex;
    gap: 9px
}

.wcard .wi {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    flex: none;
    background: linear-gradient(150deg, #d4a521, #b0810c)
}

.wtags {
    display: flex;
    gap: 4px;
    margin-bottom: 3px
}

.wtag {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #2e2e39;
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
}

.wcard .wn {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25
}

.wcard .wt {
    font-size: 10.5px;
    color: var(--dim)
}

.wcard .wk {
    font-size: 11px;
    margin-top: 3px;
    color: var(--muted)
}

.wcard .wk b {
    color: #fff
}

/* weapon detail */
.wstats {
    grid-template-columns: 1fr !important;
    gap: 9px !important
}

.wstats .bar>span {
    background: var(--purple)
}

.wframe {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px;
    display: flex;
    gap: 11px;
    margin: 12px 0
}

.wframe .fi2 {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    background: #2a2333
}

.wframe b {
    font-size: 13px
}

.wframe p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 9px 0;
    border-top: 1px solid var(--line)
}

.kv .k {
    color: var(--muted)
}

.kv .v {
    font-weight: 600
}

.perf2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px
}

.perf2 .p2 {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 14px;
    text-align: center
}

.perf2 .p2 .n {
    font-size: 23px;
    font-weight: 700
}

.perf2 .p2 .l {
    font-size: 10px;
    letter-spacing: .8px;
    color: var(--dim)
}

.quote2 {
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
    border-left: 2px solid var(--line);
    padding-left: 12px;
    margin-top: 12px
}

/* news cards with source line */
.gc .src {
    font-size: 13px;
    color: var(--dim);
    /* sits on the card's bottom edge whatever the title length; 9px minimum gap */
    margin-top: auto;
    padding-top: 9px;
    display: flex;
    align-items: center;
    gap: 7px
}

.gc .src .sname {
    color: var(--muted)
}

.gc .src .sfav {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex: none;
    object-fit: contain
}

.gc .src .sb2 {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #2a2333;
    flex: none
}

@media(max-width:900px) {
    .navcards {
        grid-template-columns: repeat(2, 1fr)
    }

    .chrs,
    .wgrid {
        grid-template-columns: 1fr
    }

    .dstats {
        grid-template-columns: 1fr 1fr
    }
}

/* ---- Guardian archetype marquee ---- */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 7px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
}

.mtrack {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: marq 64s linear infinite;
    will-change: transform
}

.marquee.rev .mtrack {
    animation-duration: 76s;
    animation-direction: reverse
}

.marquee:hover .mtrack {
    animation-play-state: paused
}

@keyframes marq {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-50% - 7px))
    }
}

.gcard {
    width: 262px;
    flex: none;
    transition: transform .25s, border-color .25s
}

.gcard:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .2)
}

.atag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.3px;
    margin: 10px 0 7px
}

@media(prefers-reduced-motion:reduce) {
    .mtrack {
        animation: none
    }

    .marquee {
        overflow-x: auto
    }
}

/* ---- Diablo III page ---- */
.hero .art-d3 {
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(226, 84, 47, .30), rgba(11, 8, 16, 0) 70%),
        radial-gradient(ellipse 90% 70% at 50% 110%, rgba(122, 59, 46, .35), rgba(11, 8, 16, 0) 70%),
        linear-gradient(180deg, #1a0e0c, #0b0810 70%)
}

.wordmark .logo-d3 {
    height: 84px;
    padding: 14px 0;
    box-sizing: content-box
}

.hpx .hn .wtag {
    margin-left: 6px;
    vertical-align: 1px
}

/* ---- Diablo III app widgets ---- */
.hstrip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 8px
}

/* Mirrors the in-app hero rail (.hero-selector-rail / .hero-card). The app's own
   class names can't be reused here: .hero-card is a different component in
   game-page.css and .badge is the "coming soon" pill in this file. */
.hcard {
    flex: none;
    width: 130px;
    background: #24252C;
    border: 1px solid #454857;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    position: relative;
    user-select: none;
    transition: border-color .15s, transform .15s ease
}

/* Resting cards sit back at 40% as they do in the app; hover and the
   selected card bring the portrait and text forward. */
.hcard .hport,
.hcard .hbody {
    opacity: .4;
    transition: opacity .15s ease
}

.hcard:hover .hport,
.hcard:hover .hbody,
.hcard.on .hport,
.hcard.on .hbody {
    opacity: 1
}

.hcard:hover {
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-1px)
}

.hcard.on {
    border-color: var(--arc-assist);
    box-shadow: 0 0 0 1px rgba(79, 209, 218, .22) inset
}

/* Hardcore heroes that died — the Graveyard state */
.hcard.hgone {
    border-color: rgba(180, 50, 50, .5)
}

.hcard.hgone:hover {
    border-color: rgba(220, 70, 70, .7)
}

.hcard.hgone.on {
    border-color: rgba(220, 70, 70, .9);
    box-shadow: 0 0 0 1px rgba(200, 50, 50, .25) inset
}

/* Circular class portrait centred above the text body */
.hcard .hport {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 2px solid var(--line);
    margin: 14px auto 0;
}

.hcard.on .hport {
    border-color: var(--arc-assist)
}

.hcard.hgone.on .hport {
    border-color: rgba(220, 70, 70, .9)
}

.hcard .hport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block
}

.hcard .hbody {
    padding: 9px 10px 11px
}

.hcard .hnm {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.hcard .hcl {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a8aaaf;
    margin-bottom: 4px;
}

.hcard .hlv {
    font-size: 12px;
    color: white;
}

/* Hero badges — HC / SC / S / Dead, matching the app palette */
.hbgs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap
}

.hbg {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 3px;
}

.hbg-hc {
    background: rgba(231, 76, 60, .2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, .35)
}

.hbg-sc {
    background: rgba(52, 152, 219, .18);
    color: #5dade2;
    border: 1px solid rgba(52, 152, 219, .28)
}

.hbg-s {
    background: rgba(155, 89, 182, .18);
    color: #a569bd;
    border: 1px solid rgba(155, 89, 182, .28)
}

.hbg-dead {
    background: rgba(127, 140, 141, .18);
    color: #909090;
    border: 1px solid rgba(127, 140, 141, .28)
}


/* ---- Hardcore Hero Roster (mirrors the in-app .widget-hero-roster) ---- */
.rhead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px
}

.rhead img {
    width: 16px;
    height: 16px;
    opacity: .85;
    flex: none
}

/* Toggle on the left, alive/deceased counts on the right */
.rtog {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px
}

.rtab {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid transparent;
    color: var(--dim);
    background: none;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s
}

.rtab:hover {
    color: #fff
}

.rtab.on {
    color: #fff;
    background: var(--panel-2);
    border-color: var(--line)
}

.rkpi {
    display: flex;
    gap: 6px;
    margin-left: auto
}

.rkv {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap
}

.rkv b {
    font-weight: 700
}

.rkv span {
    color: var(--dim);
    font-weight: 500
}

.rkv.alive {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .22)
}

.rkv.alive b {
    color: var(--grade-green)
}

.rkv.gone {
    background: rgba(244, 39, 70, .1);
    border: 1px solid rgba(244, 39, 70, .22)
}

.rkv.gone b {
    color: var(--grade-red)
}

/* Table — one grid shared by the header row and every hero row */
.rhr,
.rrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 42px 42px;
    align-items: center;
    gap: 8px
}

.rhr {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 0 10px 7px;
    border-bottom: 1px solid var(--line);
}

.rrow {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    transition: background .15s
}

.rrow:hover {
    background: rgba(255, 255, 255, .03)
}

/* Only the selected tab's rows are in flow */
.rtbl .rrow {
    display: none
}

.rtbl[data-show="active"] .rrow[data-r="active"],
.rtbl[data-show="gone"] .rrow[data-r="gone"] {
    display: grid
}

/* Class, level and GR sit right-aligned; the name column stays left */
.rhr> :not(.rcnm),
.rrow> :not(.rcnm) {
    text-align: right
}

/* The header reuses .rcnm for column alignment but not its row typography */
.rhr .rcnm {
    font-size: inherit;
    font-weight: inherit;
    gap: 0
}

.rcnm {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500
}

.rcnm span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ric {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    flex: none
}

.rccl {
    font-size: 13px;
    color: var(--muted)
}

.rclv {
    font-size: 13px;
    font-weight: 700
}

.rcgr {
    font-size: 13px;
    font-weight: 600
}

/* Graveyard rows read back a shade, as the app dims fallen heroes */
.rrow.gone .rcnm,
.rrow.gone .rccl,
.rrow.gone .rclv {
    opacity: .62
}

/* equipment / skills lists */
.eqgrid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    margin-top: 14px
}

.eqbox {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 13px
}

.eqbox+.eqbox {
    margin-top: 10px
}

.eqh {
    font-size: 12px;
    letter-spacing: .9px;
    color: white;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.eqr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line)
}

.eqr .eic {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    flex: none
}

.eqr .esl {
    font-size: 11px;
    letter-spacing: .8px;
    color: #a8aaaf;
}

.eqr .enm {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.sk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0
}

.sk .sic {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    flex: none
}

.sk b {
    font-size: 12.5px;
    display: block;
    line-height: 1.25
}

.sk i {
    font-size: 11px;
    color: var(--dim);
    font-style: normal
}

.skh {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--dim);
    margin: 12px 0 2px
}

/* stat list */
.slist .kv:first-child {
    border-top: none
}

/* leaderboard medals + meta */
.lbmeta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    padding: 10px 0 4px
}

.lbmeta .dimmed {
    color: var(--faint)
}

.mrank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #1a1520
}

/* donut legend */
.dleg {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 10px
}

.dlrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    padding: 3px 0
}

.dsw {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
    background: #2a2333
}

.dpct {
    margin-left: auto;
    color: var(--muted)
}

/* gear quality */
.gq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px
}

.gq .l2 {
    font-size: 10px;
    letter-spacing: .9px;
    color: var(--dim)
}

.gq .v2 {
    font-size: 23px;
    font-weight: 700
}

.gq .v2 small {
    font-size: 12px;
    color: var(--dim);
    font-weight: 600
}

.gq .k2 {
    font-size: 10.5px;
    margin-top: 3px
}

.gems .bar>span {
    background: var(--arc-win)
}