/* /Components/ArticlePage.razor.rz.scp.css */
.article-page[b-yhk5w71vmd] {
    max-width: 68ch;
    margin: 0 auto;
}

/* No width of its own: the layout column (MainLayout, 60rem) is the cap, so a wide page still
   cannot outgrow the viewport or the site chrome. */
.article-page--wide[b-yhk5w71vmd] {
    max-width: none;
}

.article-page h1[b-yhk5w71vmd] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.article-byline[b-yhk5w71vmd] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.article-body[b-yhk5w71vmd] {
    margin-top: 1rem;
}

/* The answer-first lead paragraph every guide opens with, ahead of its first h3 — set apart from
   an ordinary ::deep p (above) so it visually reads as the direct answer rather than another body
   paragraph. */
.article-body[b-yhk5w71vmd]  .article-lead {
    font-size: 1.05rem;
    color: var(--text);
    border-left: 3px solid var(--gold);
    padding-left: 0.75rem;
}

/* Scoped to .article-body, not .article-page: ::deep compiles to a plain descendant selector, so
   scoping it to the wrapper around ChildContent keeps these rules from also matching this
   component's own h2/article-byline markup above. */
.article-body[b-yhk5w71vmd]  h3 {
    margin: 1.25rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gold);
}

.article-body[b-yhk5w71vmd]  h3:first-child {
    margin-top: 0;
}

/* A sub-group under an h3, used by the /guides index for its per-role lists of mechanic guides. */
.article-body[b-yhk5w71vmd]  h4 {
    margin: 1rem 0 0.3rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gold-bright);
}

.article-body[b-yhk5w71vmd]  p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    color: var(--text);
}

.article-body[b-yhk5w71vmd]  p:last-child {
    margin-bottom: 0;
}

.article-body[b-yhk5w71vmd]  ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    line-height: 1.6;
    color: var(--text);
}

.article-body[b-yhk5w71vmd]  li {
    margin-bottom: 0.35rem;
}

/* Wraps a wide <table> so it scrolls horizontally within its own box, rather than forcing
   .article-page (max-width: 68ch) to overflow the viewport sideways on a narrow screen. */
.article-body[b-yhk5w71vmd]  .table-scroll {
    margin: 0 0 0.75rem;
    overflow-x: auto;
}

/* Centers a standalone formula line (e.g. a break-even equation) — the one presentational need
   an inline style would otherwise cover, kept here instead so no article reaches for style="". */
.article-body[b-yhk5w71vmd]  .equation {
    text-align: center;
}

.article-body[b-yhk5w71vmd]  table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.article-body[b-yhk5w71vmd]  th,
.article-body[b-yhk5w71vmd]  td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.article-body[b-yhk5w71vmd]  th {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* /Components/BadgeChipRow.razor.rz.scp.css */
/* Own tokens (not LiveMatchPanel's --live-badge-positive/neutral/negative and --live-panel) so
   this component renders identically inside LiveMatchPanel's dark scoreboard and on the profile
   page -- same values as LiveMatchPanel.razor.css's own .live-match block used to define, just
   scoped here instead so this component doesn't depend on an ancestor that may not exist. */
.badge-chips[b-m4b75745j4],
.badge-list[b-m4b75745j4] {
    --badge-positive: #3ddc97;
    --badge-neutral: #9fb3c8;
    --badge-negative: #ff3b5c;
    --badge-tip-bg: #071018;
}

.badge-chips[b-m4b75745j4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    /* Anchors .badge-chip-tip below (see its comment) so the tooltip spans the whole row width
       rather than just the hovered chip -- the same trick ResultPanel's .champ-badges uses. */
    position: relative;
}

.badge-chip[b-m4b75745j4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
    transition: background-color 0.15s ease;
}

/* Not `help`: the wrapping HoverCard owns the cursor, and a chip with no tooltip of its own promises none. */
.badge-chip.no-tip[b-m4b75745j4] {
    cursor: default;
}

.badge-chip:focus-visible[b-m4b75745j4] {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

/* Translucent tone-coloured backgrounds (rather than a solid fill) so the chip text/border stay
   legible against both the icon's own colours and this component's dark background. */
.badge-chip.positive[b-m4b75745j4] {
    color: var(--badge-positive);
    background: rgba(61, 220, 151, 0.14);
    border-color: var(--badge-positive);
}

.badge-chip.neutral[b-m4b75745j4] {
    color: var(--badge-neutral);
    background: rgba(159, 179, 200, 0.14);
    border-color: var(--badge-neutral);
}

.badge-chip.negative[b-m4b75745j4] {
    color: var(--badge-negative);
    background: rgba(255, 59, 92, 0.14);
    border-color: var(--badge-negative);
}

/* Not `filter` for the hover/focus brighten: a `filter` other than `none` makes the chip a
   containing block for absolutely positioned descendants, which would anchor .badge-chip-tip to
   the chip instead of .badge-chips and reintroduce the edge clipping the full-width tip is there
   to avoid -- same trap ResultPanel's .comp-badge-good:hover comment documents. */
.badge-chip.positive:hover[b-m4b75745j4],
.badge-chip.positive:focus-visible[b-m4b75745j4] {
    background: rgba(61, 220, 151, 0.26);
}

.badge-chip.neutral:hover[b-m4b75745j4],
.badge-chip.neutral:focus-visible[b-m4b75745j4] {
    background: rgba(159, 179, 200, 0.26);
}

.badge-chip.negative:hover[b-m4b75745j4],
.badge-chip.negative:focus-visible[b-m4b75745j4] {
    background: rgba(255, 59, 92, 0.26);
}

/* Standout chips (PlayerBadges.IsStandout for a player chip, TeamBadges.IsStandout for a team one)
   get a solid fill and a glow instead of the translucent treatment above, so the one or two chips
   that most change how you play this game read as heavier than the rest of the row at a glance,
   not just first in it. The whole app is deliberately dark-only (see app.css's `color-scheme:
   dark`, which nothing here ever overrides for light mode), so unlike a themed component there's
   no light variant to keep in step here -- just enough contrast against --badge-tip-bg in the one
   palette this component ever renders. */
.badge-chip.positive.standout[b-m4b75745j4] {
    color: #241a02;
    background: linear-gradient(135deg, #ffd876, #d9a441);
    border-color: #ffe9a8;
    box-shadow: 0 0 10px 1px rgba(255, 216, 118, 0.55);
}

.badge-chip.positive.standout:hover[b-m4b75745j4],
.badge-chip.positive.standout:focus-visible[b-m4b75745j4] {
    background: linear-gradient(135deg, #ffe08c, #e0ac4c);
}

/* #b3122c/#7a0d20, not this component's usual --badge-negative (#ff3b5c) -- that bright a red
   under near-white text falls below 4.5:1 at the gradient's lighter end, so the fill is a deeper,
   more saturated crimson chosen to hold contrast across the whole gradient instead. */
.badge-chip.negative.standout[b-m4b75745j4] {
    color: #fff2f4;
    background: linear-gradient(135deg, #b3122c, #7a0d20);
    border-color: #ff8fa1;
    box-shadow: 0 0 10px 1px rgba(255, 59, 92, 0.55);
}

.badge-chip.negative.standout:hover[b-m4b75745j4],
.badge-chip.negative.standout:focus-visible[b-m4b75745j4] {
    background: linear-gradient(135deg, #c41732, #8c1226);
}

.badge-chip-tip[b-m4b75745j4] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.4rem);
    z-index: 2;
    padding: 0.5rem 0.6rem;
    background: var(--badge-tip-bg);
    border: 1px solid;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    text-align: left;
    /* The chip's own nowrap/weight would otherwise leak into the tooltip copy below it. */
    white-space: normal;
    font-weight: 400;
}

.badge-chip.positive .badge-chip-tip[b-m4b75745j4] {
    border-color: var(--badge-positive);
}

.badge-chip.neutral .badge-chip-tip[b-m4b75745j4] {
    border-color: var(--badge-neutral);
}

.badge-chip.negative .badge-chip-tip[b-m4b75745j4] {
    border-color: var(--badge-negative);
}

.badge-chip:hover .badge-chip-tip[b-m4b75745j4],
.badge-chip:focus-visible .badge-chip-tip[b-m4b75745j4] {
    opacity: 1;
    visibility: visible;
}

.badge-chip-tip-title[b-m4b75745j4] {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
}

.badge-chip-tip-detail[b-m4b75745j4] {
    display: block;
    font-size: 0.72rem;
    font-weight: 300;
    color: var(--text);
}

.badge-chip-tip-rule[b-m4b75745j4] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* The Described variant: chip on the left, its description beside it. */
.badge-list[b-m4b75745j4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.55rem 0.9rem;
}

/* subgrid rather than `display: contents` keeps the <li>'s list semantics (some browsers drop
   them from an element with `display: contents`) while the chip column still lines up across rows. */
.badge-list-item[b-m4b75745j4] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
}

/* Not `help`: that cursor promises a tooltip, and this variant has none. */
.badge-list .badge-chip[b-m4b75745j4] {
    justify-self: start;
    cursor: default;
}

.badge-list-detail[b-m4b75745j4] {
    font-size: 0.9rem;
    color: var(--text);
}

.badge-list-rule[b-m4b75745j4] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
}

@media (max-width: 40rem) {
    .badge-list[b-m4b75745j4],
    .badge-list-item[b-m4b75745j4] {
        grid-template-columns: 1fr;
    }

    .badge-list-item[b-m4b75745j4] {
        gap: 0.25rem;
    }
}
/* /Components/Breadcrumbs.razor.rz.scp.css */
.breadcrumbs[b-8fyj7asenm] {
    margin-bottom: 0.6rem;
}

.breadcrumbs ol[b-8fyj7asenm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li[b-8fyj7asenm] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

/* A trailing separator would need a :not(:last-child) guard anyway, so the "/" is drawn on every
   item but the last rather than as a separate list entry. */
.breadcrumbs li:not(:last-child)[b-8fyj7asenm]::after {
    content: "/";
    color: var(--text-dim);
}

.breadcrumbs a[b-8fyj7asenm] {
    color: var(--text-dim);
    text-decoration: none;
}

.breadcrumbs a:hover[b-8fyj7asenm] {
    color: var(--gold);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"][b-8fyj7asenm] {
    color: var(--gold-bright);
    font-family: var(--font-display);
}
/* /Components/Build/BuildItems.razor.rz.scp.css */
.item-group[b-0rvsyewtu8] {
    min-width: 0;
}

.item-pair[b-0rvsyewtu8],
.item-core[b-0rvsyewtu8],
.item-later[b-0rvsyewtu8] {
    margin-bottom: 1rem;
}

.item-pair[b-0rvsyewtu8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.core-list[b-0rvsyewtu8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rows share one icon column (via subgrid) so the stat lines start at the same x even when one
   starter has two icons and the next has one. */
.item-rows[b-0rvsyewtu8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-row[b-0rvsyewtu8] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.item-icons[b-0rvsyewtu8] {
    display: flex;
    gap: 0.4rem;
}

.item[b-0rvsyewtu8] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.item img[b-0rvsyewtu8] {
    display: block;
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
}

.item-count[b-0rvsyewtu8] {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    padding: 0 0.25rem;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    background: var(--bg);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gold-bright);
}

/* One line per core: the three icons, then the whole core's figures in fixed-width cells that sit
   under the header's labels. The cells wrap below the icons when the column is too narrow. */
.core-row[b-0rvsyewtu8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.core-items[b-0rvsyewtu8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.item-arrow[b-0rvsyewtu8] {
    flex: 0 0 auto;
    color: var(--text-dim);
}

.core-header[b-0rvsyewtu8] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.3rem;
    color: var(--text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.core-header span[b-0rvsyewtu8],
.core-row[b-0rvsyewtu8]  .stat-line > .stat-pick,
.core-row[b-0rvsyewtu8]  .stat-line > .stat-wr,
.core-row[b-0rvsyewtu8]  .stat-line > .stat-games {
    box-sizing: border-box;
    text-align: right;
}

.core-header span:nth-child(1)[b-0rvsyewtu8],
.core-row[b-0rvsyewtu8]  .stat-line > .stat-pick,
.core-header span:nth-child(2)[b-0rvsyewtu8],
.core-row[b-0rvsyewtu8]  .stat-line > .stat-wr {
    width: 3.5rem;
}

.core-header span:nth-child(3)[b-0rvsyewtu8],
.core-row[b-0rvsyewtu8]  .stat-line > .stat-games {
    width: 4rem;
}

.core-row[b-0rvsyewtu8]  .stat-line {
    flex-wrap: nowrap;
    gap: 0;
}

/* The header labels already name each column, so the unit words only show once the header is hidden. */
.core-row[b-0rvsyewtu8]  .stat-unit {
    display: none;
}

/* Sits left of the first cell so the right-aligned cells stay under the header labels. */
.core-row[b-0rvsyewtu8]  .stat-overall {
    order: -1;
    margin-right: 0.4rem;
}

.item-later[b-0rvsyewtu8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.item-options[b-0rvsyewtu8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-option[b-0rvsyewtu8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.item-option-text[b-0rvsyewtu8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.item-name[b-0rvsyewtu8] {
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 36rem) {
    .item-pair[b-0rvsyewtu8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: the three core icons and their two arrows must share one row, so the arrows shrink and the
   figures drop below the icons as plain text (the labels in the header no longer line up). Below
   360px the arrows go rather than letting the third icon wrap onto its own line. */
@media (max-width: 30rem) {
    .core-header[b-0rvsyewtu8] {
        display: none;
    }

    .core-items[b-0rvsyewtu8] {
        flex-wrap: nowrap;
        gap: 0.2rem;
    }

    .item-arrow[b-0rvsyewtu8] {
        width: 10px;
        height: 10px;
    }

    .core-row[b-0rvsyewtu8] {
        justify-content: flex-start;
    }

    .core-row[b-0rvsyewtu8]  .stat-line {
        flex-wrap: wrap;
        gap: 0.1rem 0.5rem;
    }

    .core-row[b-0rvsyewtu8]  .stat-line > .stat-pick,
    .core-row[b-0rvsyewtu8]  .stat-line > .stat-wr,
    .core-row[b-0rvsyewtu8]  .stat-line > .stat-games {
        width: auto;
    }

    .core-row[b-0rvsyewtu8]  .stat-unit {
        display: inline;
    }

    .core-row[b-0rvsyewtu8]  .stat-overall {
        order: 0;
        margin-right: 0;
    }
}

@media (max-width: 22.5rem) {
    .item-arrow[b-0rvsyewtu8] {
        display: none;
    }
}
/* /Components/Build/BuildRunes.razor.rz.scp.css */
/* The card is the size container, so spacing follows the card's width rather than the viewport's:
   the same card is half the page on a desktop grid and the whole page on a phone. */
.build-runes[b-kew2okd98u] {
    container-type: inline-size;
}

.rune-tabs[b-kew2okd98u] {
    position: relative;
}

/* Visually hidden but still focusable: arrow keys move between radios natively, and the focus ring
   is painted on the matching head label below. */
.rune-radio[b-kew2okd98u] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.rune-heads[b-kew2okd98u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.rune-head[b-kew2okd98u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-alt);
    cursor: pointer;
}

.rune-head:hover[b-kew2okd98u] {
    border-color: var(--gold-dark);
}

.rune-head-icons[b-kew2okd98u] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rune-head-icons img[b-kew2okd98u] {
    border-radius: 50%;
}

.rune-head-secondary[b-kew2okd98u] {
    opacity: 0.85;
}

/* One block under the other: primary tree, secondary tree, stat shards. */
.rune-panel[b-kew2okd98u] {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

/* Two tabs at most, so one rule pair per tab is simpler than generating selectors. */
.rune-radio:nth-of-type(1):checked ~ .rune-heads .rune-head:nth-child(1)[b-kew2okd98u],
.rune-radio:nth-of-type(2):checked ~ .rune-heads .rune-head:nth-child(2)[b-kew2okd98u] {
    border-color: var(--gold);
    background: var(--gold-deep);
}

.rune-radio:nth-of-type(1):focus-visible ~ .rune-heads .rune-head:nth-child(1)[b-kew2okd98u],
.rune-radio:nth-of-type(2):focus-visible ~ .rune-heads .rune-head:nth-child(2)[b-kew2okd98u] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.rune-radio:nth-of-type(1):checked ~ .rune-panels .rune-panel:nth-child(1)[b-kew2okd98u],
.rune-radio:nth-of-type(2):checked ~ .rune-panels .rune-panel:nth-child(2)[b-kew2okd98u] {
    display: flex;
}

.rune-tree[b-kew2okd98u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* The tree's gap already spaces it from the rows, so the page's shared h3 margin is dropped. */
.rune-tree > .rune-tree-name[b-kew2okd98u] {
    margin: 0;
}

.rune-row[b-kew2okd98u] {
    display: flex;
}

.rune[b-kew2okd98u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    /* Each rune takes an equal share of its row, so tree and shard rows both span the card's full
       width; min-width 0 lets the shares shrink on a phone instead of overflowing. */
    flex: 1 1 0;
    min-width: 0;
}

.rune-icon[b-kew2okd98u] {
    display: block;
    border-radius: 50%;
}

.rune-chosen .rune-icon[b-kew2okd98u] {
    box-shadow: 0 0 0 2px var(--gold);
}

.rune-dim .rune-icon[b-kew2okd98u] {
    opacity: 0.4;
    filter: grayscale(1);
}

.rune-wr[b-kew2okd98u] {
    font-size: 0.68rem;
    color: var(--text-dim);
}

.rune-chosen .rune-wr[b-kew2okd98u] {
    color: var(--text);
}

/* Roomier as the card widens: the trees and the three blocks breathe more vertically. */
@container (min-width: 26rem) {
    .rune-panel[b-kew2okd98u] {
        gap: 1.5rem;
    }

    .rune-tree[b-kew2okd98u] {
        gap: 0.8rem;
    }
}

@container (min-width: 36rem) {
    .rune-panel[b-kew2okd98u] {
        gap: 2rem;
    }

    .rune-tree[b-kew2okd98u] {
        gap: 1.1rem;
    }
}
/* /Components/Build/BuildSkills.razor.rz.scp.css */
/* Stacked at every width: beside the priority the path table lost its last three levels to a scroll
   at desktop widths, and all 18 levels should fit whenever the page is two-column. */
.skills-columns[b-u25fzc1bou] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.skill-priority-row[b-u25fzc1bou] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.skill-order[b-u25fzc1bou] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skill-order li[b-u25fzc1bou] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.skill-chevron[b-u25fzc1bou] {
    flex: 0 0 auto;
    color: var(--text-dim);
}

/* One colour per ability, shared by the table rows and the icons. R is a warm red-orange kept clear
   of E's amber; --lose is avoided because it already means "losing" on this site. */
.skill-q[b-u25fzc1bou], .ability-q[b-u25fzc1bou] { --ability: var(--band-high); }
.skill-w[b-u25fzc1bou], .ability-w[b-u25fzc1bou] { --ability: var(--good); }
.skill-e[b-u25fzc1bou], .ability-e[b-u25fzc1bou] { --ability: var(--warn); }
.skill-r[b-u25fzc1bou], .ability-r[b-u25fzc1bou] { --ability: #e86a4a; }

.ability[b-u25fzc1bou] {
    position: relative;
    display: inline-flex;
}

.ability img[b-u25fzc1bou],
.ability-missing[b-u25fzc1bou] {
    display: block;
    border: 2px solid var(--ability, var(--gold-dark));
    border-radius: 6px;
}

.ability-missing[b-u25fzc1bou] {
    background: var(--panel-alt);
}

.ability-size-40[b-u25fzc1bou] {
    width: 40px;
    height: 40px;
}

.ability-size-28[b-u25fzc1bou] {
    width: 28px;
    height: 28px;
}

/* Q/W/E badge pinned to the icon's corner, like the client's skill bar. */
.ability-key[b-u25fzc1bou] {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    min-width: 1rem;
    padding: 0 0.2rem;
    border: 1px solid var(--ability, var(--gold-dark));
    border-radius: 4px;
    background: var(--bg);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--ability, var(--gold-bright));
}

.skill-priority-stat[b-u25fzc1bou] {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 0.85rem;
}

.skill-priority-wr[b-u25fzc1bou] {
    font-weight: 700;
}

/* Same muted treatment as BuildStatLine's games count (5.1:1 on --panel). */
.skill-priority-games[b-u25fzc1bou] {
    color: #8c887b;
    font-size: 0.72rem;
}

.skill-path-head[b-u25fzc1bou] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

/* Grows so the title's rule runs up to the figures on the same line. */
.skill-path-head h3[b-u25fzc1bou] {
    flex: 1 1 auto;
    margin: 0;
}

.skill-scroll[b-u25fzc1bou] {
    overflow-x: auto;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-alt);
}

.skill-table[b-u25fzc1bou] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 0.75rem;
}

.skill-table th[b-u25fzc1bou],
.skill-table td[b-u25fzc1bou] {
    padding: 0;
    text-align: center;
    white-space: nowrap;
}

.skill-table thead th[b-u25fzc1bou] {
    color: var(--text-dim);
    font-size: 0.65rem;
    font-weight: 400;
}

/* R ranks up at 6, 11 and 16, so those level numbers are flagged in gold. */
.skill-table thead th.skill-level-ult[b-u25fzc1bou] {
    color: var(--gold);
    font-weight: 700;
}

/* Pinned so the ability icons stay visible while the 18 levels scroll sideways on a phone. The
   shadow covers the 3px spacing so tiles do not show through the gap beside it. */
.skill-table tbody th[b-u25fzc1bou],
.skill-table thead th:first-child[b-u25fzc1bou] {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 0.25rem;
    background: var(--panel-alt);
    box-shadow: 3px 0 0 var(--panel-alt);
    text-align: left;
}

.skill-cell[b-u25fzc1bou] {
    min-width: 1.25rem;
    height: 1.6rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    color: transparent;
    font-weight: 700;
}

.skill-on[b-u25fzc1bou] {
    background: var(--ability);
    color: var(--bg);
}

/* Completed from the priority rather than seen in games: outlined, not filled. */
.skill-on.skill-recommended[b-u25fzc1bou] {
    background: transparent;
    outline: 1.5px dashed var(--ability);
    outline-offset: -1.5px;
    color: var(--ability);
}

.skill-legend[b-u25fzc1bou] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.legend-swatch[b-u25fzc1bou] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
}

.legend-observed[b-u25fzc1bou] {
    background: var(--text-dim);
}

/* A swatch always stays with its own label when the legend wraps on a phone. */
.legend-item[b-u25fzc1bou] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
}

.legend-swatch[b-u25fzc1bou] {
    flex: 0 0 auto;
}

.legend-recommended[b-u25fzc1bou] {
    outline: 1.5px dashed var(--text-dim);
    outline-offset: -1.5px;
}

.skill-overall[b-u25fzc1bou] {
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0 0.35rem;
    border: 1px dashed var(--text-dim);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: help;
}
/* /Components/Build/BuildSpells.razor.rz.scp.css */
.spell-rows[b-d8wb35vxfa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spell-row[b-d8wb35vxfa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
}

.spell-icons[b-d8wb35vxfa] {
    display: inline-flex;
    gap: 0.3rem;
}

.spell-icon[b-d8wb35vxfa] {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
}

.spell-missing[b-d8wb35vxfa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--text-dim);
}

.spell-pill[b-d8wb35vxfa] {
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.pill-mainstream[b-d8wb35vxfa] {
    border-color: var(--gold-dark);
    background: var(--gold-deep);
    color: var(--gold-bright);
}
/* /Components/Build/BuildStatLine.razor.rz.scp.css */
.stat-line[b-aayxl30d7t] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
    font-size: 0.85rem;
}

/* Muted like the games count: the win rate is the one figure meant to stand out. #8c887b holds
   5.1:1 on --panel (#0b1725) and 4.7:1 on --panel-alt (#10202f), so it stays above AA. */
.stat-pick[b-aayxl30d7t] {
    color: #8c887b;
    font-size: 0.8rem;
}

.stat-wr[b-aayxl30d7t] {
    font-weight: 700;
}

.rate-win[b-aayxl30d7t] { color: var(--win); }
.rate-lose[b-aayxl30d7t] { color: var(--lose); }

/* Quieter than the win rate and pick share: it is context for them, not a figure to compare.
   #7a766b holds 4.0:1 on --panel and 3.7:1 on --panel-alt: below AA for small text, a deliberate
   trade for a tertiary figure, kept above 3:1 so it stays legible. */
.stat-games[b-aayxl30d7t] {
    color: #7a766b;
    font-size: 0.72rem;
}

.stat-overall[b-aayxl30d7t] {
    padding: 0 0.35rem;
    border: 1px dashed var(--text-dim);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: help;
}
/* /Components/Build/BuildTip.razor.rz.scp.css */
/* Not a `title` attribute on the trigger: the browser would paint its own tooltip over this one.
   And no `filter` on the trigger either: it would make the trigger the containing block of the
   fixed-position tip below and pin it to the icon instead of the viewport. */
.build-tip[b-g5aorb0vli] {
    display: inline-flex;
    /* Each tip anchors to its own trigger, not to the last `--build-tip` on the page. */
    anchor-scope: --build-tip;
    anchor-name: --build-tip;
}

.build-tip:focus[b-g5aorb0vli] {
    outline: none;
}

.build-tip:focus-visible[b-g5aorb0vli] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}

.build-tip-pop[b-g5aorb0vli] {
    position: absolute;
    /* Fallback for browsers without anchor positioning: the trigger is static, so the tip is placed
       against the card (.build-section is positioned) at its left edge, where it can neither spill
       off the screen nor be clipped by the skill table's scroller. top is auto so it starts at the
       icon's top, and the translate lifts it above the icon. */
    left: 0.5rem;
    z-index: 30;
    box-sizing: border-box;
    width: max-content;
    max-width: min(20rem, calc(100% - 1rem));
    padding: 0.5rem 0.6rem;
    background: #071018;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-100% - 0.4rem));
    transition: opacity 0.15s ease;
    pointer-events: none;
    text-align: left;
    /* The trigger sits inside tables, labels and nowrap rows whose settings would otherwise leak in. */
    white-space: normal;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

/* The skill table's scroller would clip a tip opened from a row heading, and these four abilities
   are already shown, with the same tips, in Skill Priority above it. */
.skill-table .build-tip-pop[b-g5aorb0vli] {
    display: none;
}

/* Anchored to the icon but laid out against the viewport (fixed), so a card's overflow can't clip
   it and a tip for an icon at the screen edge slides inward instead of spilling off. Every feature
   the block uses is tested, so a browser with only some of them keeps the fallback above. */
@supports (position-area: top) and (anchor-scope: --build-tip) and (justify-self: anchor-center) {
    .skill-table .build-tip-pop[b-g5aorb0vli] {
        display: block;
    }

    .build-tip-pop[b-g5aorb0vli] {
        position: fixed;
        position-anchor: --build-tip;
        position-area: top;
        justify-self: anchor-center;
        inset: auto;
        margin: 0 0 0.4rem;
        max-width: min(20rem, calc(100vw - 1rem));
        transform: none;
        position-try-fallbacks: flip-block;
    }
}

.build-tip:hover .build-tip-pop[b-g5aorb0vli],
.build-tip:focus .build-tip-pop[b-g5aorb0vli],
.build-tip:focus-visible .build-tip-pop[b-g5aorb0vli] {
    opacity: 1;
    visibility: visible;
}

.build-tip-title[b-g5aorb0vli] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.build-tip-desc[b-g5aorb0vli] {
    display: block;
    margin-top: 0.3rem;
    white-space: pre-line;
    color: var(--text);
}
/* /Components/Build/BuildVsFilter.razor.rz.scp.css */
/* The search row stays visible while the long champion list scrolls under it. */
.vs-search[b-xgts8ym1ti] {
    position: sticky;
    top: -0.25rem;
    z-index: 1;
    margin: -0.25rem -0.25rem 0.25rem;
    padding: 0.35rem 0.25rem;
    background: var(--panel-alt);
}

.vs-search input[type="text"][b-xgts8ym1ti] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.vs-search input[type="text"]:focus-visible[b-xgts8ym1ti] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.vs-panel[b-xgts8ym1ti] {
    min-width: 14rem;
}

.vs-panel img[b-xgts8ym1ti] {
    border-radius: 4px;
}
/* /Components/Build/ChampionBuildSummary.razor.rz.scp.css */
.champion-build-summary[b-rfvoz1dbjb] {
    margin-top: 1.5rem;
}

.summary-prose[b-rfvoz1dbjb] {
    margin: 0.5rem 0 0;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

.summary-rows[b-rfvoz1dbjb] {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

/* Label, choice and figures on one line while there is room, stacked on a phone. */
.summary-row[b-rfvoz1dbjb] {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.summary-label[b-rfvoz1dbjb] {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.summary-choice[b-rfvoz1dbjb] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.summary-icon[b-rfvoz1dbjb] {
    border-radius: 4px;
}

.summary-link[b-rfvoz1dbjb] {
    margin-top: 0.75rem;
}

@media (max-width: 40rem) {
    .summary-row[b-rfvoz1dbjb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Build/LearningCurveCard.razor.rz.scp.css */
.learning-curve[b-stp5mznc9e] {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.learning-curve h2[b-stp5mznc9e] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dim);
}

.learning-curve-headline[b-stp5mznc9e] {
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.learning-curve-figure[b-stp5mznc9e] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.learning-curve-sub[b-stp5mznc9e],
.learning-curve-axis-title[b-stp5mznc9e],
.learning-curve-foot[b-stp5mznc9e],
.learning-curve-empty[b-stp5mznc9e] {
    color: var(--text-dim);
}

.learning-curve-range[b-stp5mznc9e] {
    margin: 0.25rem 0 0;
}

.learning-curve-chart[b-stp5mznc9e] {
    margin: 0.75rem 0 0;
    max-width: 560px;
}

.learning-curve-chart svg[b-stp5mznc9e] {
    display: block;
    width: 100%;
    height: auto;
}

.learning-curve-axis-title[b-stp5mznc9e] {
    margin-top: 0.15rem;
    text-align: center;
    font-size: 0.75rem;
}

.learning-curve-foot[b-stp5mznc9e] {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.learning-curve-empty[b-stp5mznc9e] {
    margin: 0.5rem 0 0;
}

.lc-plateau[b-stp5mznc9e] {
    stroke: var(--text-dim);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.lc-line[b-stp5mznc9e] {
    stroke: var(--gold-bright);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.lc-point[b-stp5mznc9e] {
    fill: var(--gold-bright);
    stroke: var(--panel);
    stroke-width: 1.5;
}

.lc-competent[b-stp5mznc9e] {
    fill: var(--win);
}

/* Font sizes are in SVG user units (the viewBox is 360 wide), so they are stepped up as the chart
   shrinks to keep the rendered text at about 11-13px. */
.lc-axis[b-stp5mznc9e],
.lc-plateau-label[b-stp5mznc9e],
.lc-first-label[b-stp5mznc9e] {
    fill: var(--text-dim);
    font-size: 7.4px;
}

.lc-show-narrow[b-stp5mznc9e] {
    display: none;
}

.lc-axis-competent[b-stp5mznc9e] {
    fill: var(--win);
    font-weight: 700;
}

@media (max-width: 40rem) {
    .lc-axis[b-stp5mznc9e],
    .lc-plateau-label[b-stp5mznc9e],
    .lc-first-label[b-stp5mznc9e] { font-size: 8.8px; }
}

@media (max-width: 32rem) {
    .lc-axis[b-stp5mznc9e],
    .lc-plateau-label[b-stp5mznc9e],
    .lc-first-label[b-stp5mznc9e] { font-size: 11px; }

    .lc-axis-minor[b-stp5mznc9e],
    .lc-show-wide[b-stp5mznc9e] { display: none; }

    .lc-show-narrow[b-stp5mznc9e] { display: inline; }

    .lc-axis-low[b-stp5mznc9e] { transform: translateY(1.2em); }
}

@media (max-width: 26rem) {
    .lc-axis[b-stp5mznc9e],
    .lc-plateau-label[b-stp5mznc9e],
    .lc-first-label[b-stp5mznc9e] { font-size: 14px; }
}

@media (max-width: 22.5rem) {
    .lc-axis[b-stp5mznc9e],
    .lc-plateau-label[b-stp5mznc9e],
    .lc-first-label[b-stp5mznc9e] { font-size: 17px; }
}

/* Two columns (text left, chart right) once the build page itself goes wide, so the card stays short. */
@media (min-width: 68rem) {
    .learning-curve[b-stp5mznc9e] {
        display: grid;
        grid-template-columns: 1fr 560px;
        gap: 0 2rem;
        align-items: center;
    }

    .learning-curve > h2[b-stp5mznc9e],
    .learning-curve > .learning-curve-headline[b-stp5mznc9e],
    .learning-curve > .learning-curve-range[b-stp5mznc9e],
    .learning-curve > .learning-curve-foot[b-stp5mznc9e],
    .learning-curve > .learning-curve-empty[b-stp5mznc9e] {
        grid-column: 1;
    }

    .learning-curve > .learning-curve-chart[b-stp5mznc9e] {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0;
    }
}
/* /Components/ChampionCombobox.razor.rz.scp.css */
.champion-combobox[b-2q7qmvdym6] {
    position: relative;
}

.champion-combobox-input[b-2q7qmvdym6] {
    width: 100%;
    padding: 0.65rem 2rem 0.65rem 0.85rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.95rem;
}

.champion-combobox-input[b-2q7qmvdym6]::placeholder {
    color: #5c6773;
    font-style: normal;
}

.champion-combobox-input:focus[b-2q7qmvdym6] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.4);
}

.champion-combobox-caret[b-2q7qmvdym6] {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    color: var(--gold);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.champion-combobox:focus-within .champion-combobox-caret[b-2q7qmvdym6] {
    transform: translateY(-50%) rotate(180deg);
}

/* The rows the over-full message is actually about: without this the message names a side while
   six-plus identical dropdowns sit above it, and picking which to empty is guesswork. :focus is
   listed explicitly because .champion-combobox-input:focus is (0,2,0) and would otherwise outrank
   this and turn the border gold on the very row the user was just told to click. */
.champion-combobox-blocked .champion-combobox-input[b-2q7qmvdym6],
.champion-combobox-blocked .champion-combobox-input:focus[b-2q7qmvdym6] {
    border-color: var(--danger);
}

.champion-combobox-list[b-2q7qmvdym6] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.95), rgba(11, 23, 37, 0.95));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.champion-combobox:focus-within .champion-combobox-list[b-2q7qmvdym6] {
    display: block;
}

.champion-combobox-option[b-2q7qmvdym6] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    /* Explicit, not font: inherit, so the dropdown text matches the 0.95rem input above it
       instead of the page's 16px base. */
    font-size: 0.95rem;
    cursor: pointer;
}

.champion-combobox-option:hover[b-2q7qmvdym6],
.champion-combobox-option:focus[b-2q7qmvdym6] {
    background: rgba(200, 170, 110, 0.15);
}
/* /Components/ChampionRow.razor.rz.scp.css */
.champ-row[b-vdtdu857xn] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.5rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid transparent;
    min-width: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.champ-row:hover[b-vdtdu857xn] {
    background: rgba(200, 170, 110, 0.08);
    border-left-color: var(--gold);
}

.champ-row.degraded[b-vdtdu857xn] {
    box-shadow: inset 0 0 0 1px var(--warn);
}

.champ-row-empty[b-vdtdu857xn] {
    justify-content: center;
    background: transparent;
    border-left-color: transparent;
}

.champ-row-empty:hover[b-vdtdu857xn] {
    background: transparent;
    border-left-color: transparent;
}

.champ-empty-label[b-vdtdu857xn] {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.champ-icon[b-vdtdu857xn] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-dark);
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.champ-name[b-vdtdu857xn] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
}

.badge-inferred[b-vdtdu857xn] {
    display: inline-block;
    margin-left: 0.2rem;
    color: var(--warn);
    font-style: italic;
    cursor: help;
}

.champ-role[b-vdtdu857xn] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    width: 3rem;
}

.champ-winrate[b-vdtdu857xn] {
    flex-shrink: 0;
    width: 3.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 700;
}

.champ-winrate.win[b-vdtdu857xn] {
    color: var(--win);
}

.champ-winrate.lose[b-vdtdu857xn] {
    color: var(--lose);
}

.champ-winrate.pending[b-vdtdu857xn] {
    color: var(--text-dim);
}
/* /Components/ChampionTierTable.razor.rz.scp.css */
.tier-table[b-kfesdr7k8s] {
    margin-top: 1.5rem;
    /* Lets the scroll wrapper below shrink inside a flex/grid parent instead of widening the page. */
    min-width: 0;
}

.tier-filters[b-kfesdr7k8s] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

/* The Champion dropdown mirrors the build page's opponent picker (BuildVsFilter.razor.css). */
/* The search row stays visible while the long champion list scrolls under it. */
.champion-search[b-kfesdr7k8s] {
    position: sticky;
    top: -0.25rem;
    z-index: 1;
    margin: -0.25rem -0.25rem 0.25rem;
    padding: 0.35rem 0.25rem;
    background: var(--panel-alt);
}

.champion-search input[type="text"][b-kfesdr7k8s] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.champion-search input[type="text"]:focus-visible[b-kfesdr7k8s] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.champion-panel[b-kfesdr7k8s] {
    min-width: 14rem;
}

.champion-panel img[b-kfesdr7k8s] {
    border-radius: 4px;
}

/* Small print under the table, mirroring MainLayout's .app-footer-disclaimer: provenance, not content. */
.tier-summary[b-kfesdr7k8s] {
    margin: 0.6rem 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-dim);
    opacity: 0.6;
}

.tier-empty[b-kfesdr7k8s] {
    margin-top: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    text-align: center;
    color: var(--text-dim);
}

/* Full length, so the page scrolls rather than the table. overflow: clip (unlike hidden) creates no
   scroll container, which keeps the sticky header pinned to the viewport while still rounding the
   corners. Phones fall back to a sideways-scrolling wrapper, whose header scrolls with the page. */
.tier-scroll[b-kfesdr7k8s] {
    margin-top: 1rem;
    overflow: clip;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

@media (max-width: 760px) {
    .tier-scroll[b-kfesdr7k8s] {
        overflow-x: auto;
    }
}

table[b-kfesdr7k8s] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th[b-kfesdr7k8s], td[b-kfesdr7k8s] {
    padding: 0.4rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

/* Left-aligned so the champion icons line up down the column. This also covers the skeleton's first
   bar; the loading row's single cell centres its own content. */
th:first-child[b-kfesdr7k8s],
td:first-child[b-kfesdr7k8s] {
    text-align: left;
}

th[b-kfesdr7k8s] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel-alt);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

th a[b-kfesdr7k8s] {
    color: var(--gold);
    text-decoration: none;
}

th[aria-sort] a[b-kfesdr7k8s] {
    color: var(--gold-bright);
}

.sort-arrow[b-kfesdr7k8s] {
    margin-left: 0.3rem;
    font-size: 0.7rem;
}

.champion-link[b-kfesdr7k8s] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    text-decoration: none;
}

.champion-link img[b-kfesdr7k8s] {
    border-radius: 4px;
}

.role-icon[b-kfesdr7k8s] {
    display: block;
    margin: 0 auto;
}

.rate-win[b-kfesdr7k8s] { color: var(--win); }
.rate-lose[b-kfesdr7k8s] { color: var(--lose); }

.counters-cell img[b-kfesdr7k8s] {
    margin-right: 0.25rem;
    border-radius: 4px;
    vertical-align: middle;
}

.counter-unknown[b-kfesdr7k8s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 0.25rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    vertical-align: middle;
    color: var(--text-dim);
}


.tier-loader[b-kfesdr7k8s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 0;
    color: var(--text-dim);
}

/* The site's gold rule-gem (MainLayout.razor.css) at spinner size. Not shared as one class: .razor.css
   is scoped per component, so each keeps its own copy. */
.tier-loader-gem[b-kfesdr7k8s] {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    transform: rotate(45deg);
    background: var(--gold);
    box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
    animation: tier-loader-spin-b-kfesdr7k8s 1.2s linear infinite;
}

@keyframes tier-loader-spin-b-kfesdr7k8s {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

/* Set by tier-table-loading.js while an enhanced-navigation fetch is in flight. Both effects are
   delayed so a fast response never visibly flickers. data-pending, not aria-busy: the streamed first
   load already uses aria-busy and must not be dimmed. */
.tier-table[data-pending] tbody[b-kfesdr7k8s] {
    opacity: 0.45;
    transition: opacity 0.15s ease 0.15s;
}

.tier-table[data-pending][b-kfesdr7k8s]::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin: -0.4rem 0 0 -0.4rem;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
    pointer-events: none;
    opacity: 0;
    animation: tier-loader-spin-b-kfesdr7k8s 1.2s linear infinite, tier-pending-fade-b-kfesdr7k8s 0.2s ease 0.25s forwards;
}

@keyframes tier-pending-fade-b-kfesdr7k8s {
    to {
        opacity: 1;
    }
}

.tier-skeleton-bar[b-kfesdr7k8s] {
    display: block;
    height: 0.9rem;
    min-width: 4rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--border) 25%, var(--panel-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: tier-skeleton-shimmer-b-kfesdr7k8s 1.4s ease-in-out infinite;
}

@keyframes tier-skeleton-shimmer-b-kfesdr7k8s {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tier-loader-gem[b-kfesdr7k8s],
    .tier-skeleton-bar[b-kfesdr7k8s] {
        animation: none;
    }

    .tier-table[data-pending] tbody[b-kfesdr7k8s] {
        transition: none;
    }

    .tier-table[data-pending][b-kfesdr7k8s]::after {
        animation: none;
        opacity: 1;
        transform: rotate(45deg);
    }
}
/* /Components/ChanceCurveChart.razor.rz.scp.css */
.chance-curve[b-canlofti1a] {
    margin: 0.75rem 0 0;
}

.chance-curve svg[b-canlofti1a] {
    display: block;
    width: 100%;
    height: auto;
}

.chance-curve-band[b-canlofti1a] {
    fill: var(--text-dim);
    fill-opacity: 0.22;
}

.chance-curve-line[b-canlofti1a] {
    stroke: var(--gold-bright);
    stroke-width: 2;
    stroke-linejoin: round;
}

.chance-curve-axis-line[b-canlofti1a] {
    stroke: var(--border);
    stroke-width: 1;
}

/* The same two colours as the hero's answer: the YOU side and the TEAM side. */
.chance-curve-you[b-canlofti1a] {
    --marker: var(--lose);
}

.chance-curve-team[b-canlofti1a] {
    --marker: var(--win);
}

.chance-curve-marker[b-canlofti1a] {
    stroke: var(--marker);
    stroke-width: 2.5;
}

.chance-curve-marker-label[b-canlofti1a] {
    fill: var(--marker);
    font-size: 13px;
    font-weight: 700;
}

.chance-curve-axis[b-canlofti1a],
.chance-curve-band-label[b-canlofti1a] {
    fill: var(--text-dim);
    font-size: 11px;
}
/* /Components/CoachTipsAnnouncement.razor.rz.scp.css */
/* No flex-wrap: the pill and the dismiss button must stay put on either end of a single row at
   every width down to a 320px phone -- only the text in the middle wraps, inside its own column
   (see .feature-note-text's min-width: 0 below), never spilling the × onto a line of its own. */
/* Teal (--teal / --win) is this app's existing positive/"win" colour, so the notice borrows it
   rather than a generic green. It deliberately reads differently from the dark panels around it --
   the whole point of the notice is to be noticed, not to blend in. */
.feature-note[b-6z6zgqb416] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(10, 200, 185, 0.55);
    border-left: 3px solid var(--teal);
    background: linear-gradient(135deg, rgba(10, 200, 185, 0.22), rgba(10, 200, 185, 0.10)), var(--panel);
    box-shadow: 0 0 14px rgba(10, 200, 185, 0.25);
    animation: feature-note-fade-in-b-6z6zgqb416 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .feature-note[b-6z6zgqb416] {
        animation: none;
    }
}

@keyframes feature-note-fade-in-b-6z6zgqb416 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feature-note-pill[b-6z6zgqb416] {
    flex-shrink: 0;
    /* Nudges the pill down to line up with the text's first line -- the pill's own border/padding
       box sits a little short of the text's line-height otherwise. */
    margin-top: 0.15rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--teal);
    background: var(--teal);
    color: var(--panel);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* flex: 1 (not 1 1 20rem): a fixed basis wider than the space left beside the pill and the ×
   button is what forced the whole row to wrap on a narrow phone. min-width: 0 overrides flex
   items' default min-width: auto, which otherwise refuses to shrink a text item below its content
   width and forces the row wide regardless of flex-basis. */
.feature-note-text[b-6z6zgqb416] {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* A distinct bright teal, not --gold-bright, so the feature name reads as its own colour rather
   than blending into the body text -- 9.2:1 against the lightest end of the tint, well past the
   4.5:1 floor. */
.feature-note-text strong[b-6z6zgqb416] {
    color: #96f5e6;
}

/* nowrap keeps "See my matches →" together: the arrow alone on a new line reads as a stray glyph. */
.feature-note-link[b-6z6zgqb416] {
    color: #96f5e6;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.feature-note-link:hover[b-6z6zgqb416] {
    text-decoration: underline;
}

.feature-note-link:focus-visible[b-6z6zgqb416] {
    outline: none;
    text-decoration: underline;
    box-shadow: 0 0 0 1px rgba(10, 200, 185, 0.4);
}

.feature-note-dismiss[b-6z6zgqb416] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.feature-note-dismiss:hover[b-6z6zgqb416] {
    color: var(--teal);
}

.feature-note-dismiss:focus-visible[b-6z6zgqb416] {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(10, 200, 185, 0.4);
}
/* /Components/CorrectionForm.razor.rz.scp.css */
/* Panel chrome lives on the <details>, not display: flex — flex on the element itself breaks
   summary/marker layout in some browsers, which is why .correction-form keeps the inner flex
   column below instead. */
.lobby-builder[b-znyao9upju] {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--gold-deep);
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* Amber only when recognition actually needs fixing — the rest of the time this disclosure is
   open, amber on a neutral simulator would read as an error. */
.lobby-builder-attention[b-znyao9upju] {
    border-color: var(--warn);
}

.lobby-builder-summary[b-znyao9upju] {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    cursor: pointer;
}

.lobby-builder-summary:hover[b-znyao9upju] {
    color: var(--gold-bright);
}

.correction-form[b-znyao9upju] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.correction-hint[b-znyao9upju] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.correction-columns[b-znyao9upju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
}

.correction-team[b-znyao9upju] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.correction-team h3[b-znyao9upju] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.correction-error[b-znyao9upju] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--danger);
}

/* Not an error: nothing is blocked, so this must not read as one — amber like
   .lobby-builder-attention, not the --danger red .correction-error uses. */
.correction-notice[b-znyao9upju] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--warn);
}

.btn-rescore[b-znyao9upju] {
    align-self: flex-start;
    padding: 0.6rem 2rem;
    border: 2px solid var(--gold);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.04));
    color: var(--gold-bright);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-rescore:hover:not(:disabled)[b-znyao9upju] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.35), rgba(200, 170, 110, 0.12));
    box-shadow: 0 0 14px rgba(200, 170, 110, 0.35);
    color: #fff;
}

.btn-rescore:disabled[b-znyao9upju] {
    border-color: var(--gold-deep);
    color: var(--text-dim);
    background: rgba(1, 10, 19, 0.4);
    cursor: not-allowed;
}

@media (max-width: 500px) {
    .correction-columns[b-znyao9upju] {
        grid-template-columns: 1fr;
    }
}
/* /Components/CounterBuildBox.razor.rz.scp.css */
.counter-build[b-6hqyw0fr9q] {
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-top: 1px solid var(--gold-deep);
    border-radius: 0;
    background: rgba(1, 10, 19, 0.55);
}

.counter-build-header[b-6hqyw0fr9q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin-bottom: 0.45rem;
}

.counter-build-title[b-6hqyw0fr9q] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.counter-build-sub[b-6hqyw0fr9q] {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.8;
}

.counter-build-empty[b-6hqyw0fr9q] {
    margin: 0;
    padding: 0.2rem 0;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
}

.counter-build-row[b-6hqyw0fr9q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    min-width: 0;
}

.counter-build-row + .counter-build-row[b-6hqyw0fr9q] {
    border-top: 1px solid var(--border);
}

.counter-build-icon[b-6hqyw0fr9q] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gold-dark);
    flex-shrink: 0;
    background: var(--bg);
    object-fit: cover;
}

.counter-build-slot[b-6hqyw0fr9q] {
    flex-shrink: 0;
    /* Slot labels range from "RUNE" to "SUMMONER" (77px measured), so without a fixed
       width each row's name/reason starts at a different x — this pins the badge
       width to the longest label and centres shorter ones, keeping that column aligned. */
    min-width: 80px;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    color: var(--gold);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.counter-build-info[b-6hqyw0fr9q] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.counter-build-name[b-6hqyw0fr9q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.counter-build-reason[b-6hqyw0fr9q] {
    font-size: 0.68rem;
    color: var(--text-dim);
    line-height: 1.4;
}

@media (max-width: 760px) {
    .counter-build-row[b-6hqyw0fr9q] {
        flex-wrap: wrap;
    }

    .counter-build-info[b-6hqyw0fr9q] {
        flex-basis: 100%;
    }
}
/* /Components/DeferredSection.razor.rz.scp.css */
.deferred-section-loading[b-ppld6yphgy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Same CSS-only ring spinner as LiveMatchSection's own .live-match-spinner -- gold/teal from this
   app's own hextech tokens rather than a generic grey, so a deferred section reads as part of the
   same panel rather than a bolted-on loading widget. Not shared as one class across both files:
   .razor.css is scoped per component, so each spinner keeps its own copy. */
.deferred-section-spinner[b-ppld6yphgy] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-right-color: var(--teal);
    animation: deferred-section-spin-b-ppld6yphgy 0.8s linear infinite;
}

@keyframes deferred-section-spin-b-ppld6yphgy {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .deferred-section-spinner[b-ppld6yphgy] {
        animation: none;
    }
}
/* /Components/Filters/FilterDropdown.razor.rz.scp.css */
.tier-dropdown[b-j7g7yyd5z3] {
    position: relative;
    min-width: 8rem;
}

.tier-dropdown summary[b-j7g7yyd5z3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/* list-style: none covers Firefox and current Chrome; Safari still draws its own marker. */
.tier-dropdown summary[b-j7g7yyd5z3]::-webkit-details-marker {
    display: none;
}

/* The tap highlight paints a blue rectangle over the whole caption and box on mobile, so it is
   turned off and keyboard users get an explicit focus ring on the box instead, replacing the
   browser's default outline around the whole summary. */
.tier-dropdown summary:focus-visible[b-j7g7yyd5z3] {
    outline: none;
}

.tier-dropdown summary:focus-visible .tier-dropdown-box[b-j7g7yyd5z3] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.tier-dropdown-caption[b-j7g7yyd5z3] {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.tier-dropdown-box[b-j7g7yyd5z3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
}

.tier-dropdown-box[b-j7g7yyd5z3]::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: translateY(-25%) rotate(45deg);
}

.tier-dropdown summary:hover .tier-dropdown-box[b-j7g7yyd5z3],
.tier-dropdown[open] .tier-dropdown-box[b-j7g7yyd5z3] {
    border-color: var(--gold-dark);
}

/* The inert loading boxes are plain divs, not summaries: no pointer and no hover state, and the
   caption needs the gap a summary's flex column would have given it. */
.tier-dropdown[aria-disabled="true"][b-j7g7yyd5z3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    opacity: 0.6;
}

/* z-index sits above the sticky table header (1), which this panel overlays. Capped height because
   the tier list has 16 brackets. */
.tier-dropdown[b-j7g7yyd5z3]  ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 100%;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-alt);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.tier-dropdown[b-j7g7yyd5z3]  ul a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.tier-dropdown[b-j7g7yyd5z3]  ul a:hover {
    background: var(--panel);
    color: var(--gold);
}

.tier-dropdown[b-j7g7yyd5z3]  ul a[aria-current="true"] {
    background: var(--gold-deep);
    color: var(--gold-bright);
}

/* The emblem renders inside RankEmblem's own scope, hence ::deep; its stock size suits the profile
   header, not a dropdown row. */
.tier-dropdown[b-j7g7yyd5z3]  .rank-emblem {
    height: 1.25rem;
}

.tier-dropdown[b-j7g7yyd5z3]  img {
    flex: 0 0 auto;
}

/* On a phone the panel anchors to the whole filter row instead of its own (possibly rightmost)
   dropdown, so it can never push past the viewport edge and cause horizontal page scroll. */
@media (max-width: 40rem) {
    .tier-dropdown[b-j7g7yyd5z3] {
        position: static;
    }

    .tier-dropdown[b-j7g7yyd5z3]  ul {
        right: 0;
    }
}
/* /Components/Filters/RoleButtons.razor.rz.scp.css */
.role-buttons[b-1t6ym31fgs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.role-button[b-1t6ym31fgs] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
}

.role-button:hover[b-1t6ym31fgs] {
    border-color: var(--gold-dark);
}

.role-button[aria-current="page"][b-1t6ym31fgs] {
    border-color: var(--gold);
    background: var(--gold-deep);
    color: var(--gold-bright);
}

/* No games for this role under the current filters: still a link, but visibly a weaker choice. */
.role-empty[b-1t6ym31fgs] {
    opacity: 0.45;
}
/* /Components/HoverCard.razor.rz.scp.css */
/* No filter or transform on the wrapper itself: either makes it the containing block for the
   absolutely positioned panel, which would re-anchor the panel to the wrapper's box and
   undo the placement below. Only the panel animates. */
.hover-card[b-2yvhgo0ero] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: inherit;
    cursor: help;
}

.hover-card:focus-visible[b-2yvhgo0ero] {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

.hover-card-panel[b-2yvhgo0ero] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: 17rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 0.8rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--panel-alt), var(--bg));
    border: 1px solid var(--gold-dark);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    /* Inherited nowrap, weight and alignment from the trigger's cell would otherwise leak into the copy. */
    white-space: normal;
    text-align: left;
    font-weight: 400;
    cursor: default;
    /* The card is read-only, so it must never steal the hover that keeps it open. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Diamond pointing at the trigger, drawn as a rotated square that continues the panel's border. */
.hover-card-panel[b-2yvhgo0ero]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: var(--bg);
    border-right: 1px solid var(--gold-dark);
    border-bottom: 1px solid var(--gold-dark);
    transform: translateX(-50%) rotate(45deg);
}

.hover-card:hover > .hover-card-panel[b-2yvhgo0ero],
.hover-card:focus-visible > .hover-card-panel[b-2yvhgo0ero],
.hover-card:focus-within > .hover-card-panel[b-2yvhgo0ero] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.hover-card-down > .hover-card-panel[b-2yvhgo0ero] {
    bottom: auto;
    top: calc(100% + 8px);
    border-top: 1px solid var(--gold-dark);
    border-bottom: 2px solid var(--gold);
    transform: translate(-50%, -4px);
}

.hover-card-down:hover > .hover-card-panel[b-2yvhgo0ero],
.hover-card-down:focus-visible > .hover-card-panel[b-2yvhgo0ero],
.hover-card-down:focus-within > .hover-card-panel[b-2yvhgo0ero] {
    transform: translate(-50%, 0);
}

.hover-card-down > .hover-card-panel[b-2yvhgo0ero]::after {
    bottom: auto;
    top: -5px;
    background: var(--panel-alt);
    border: 0;
    border-left: 1px solid var(--gold-dark);
    border-top: 1px solid var(--gold-dark);
}

/* Every card is a fixed panel anchored to its own trigger, not an absolute child of it. An absolute
   panel is clipped by any scroll container above it (overflow-x: auto forces overflow-y to auto, so the
   scoreboard's table scroller cut it off) and ran off the viewport edge on a phone. A fixed one is neither.
   Prefers opening above, and the fallbacks are tried in order until the panel fits the viewport:
   left- then right-aligned to the trigger when centring would overflow a side, then the same below when
   there is no room above. Without anchor positioning support none of this applies and the card keeps the
   absolute placement above. */
@supports (position-area: top) {
    .hover-card[b-2yvhgo0ero] {
        anchor-name: --hover-card;
        /* Scoped so each card anchors to its own trigger instead of the last one sharing the name. */
        anchor-scope: --hover-card;
    }

    .hover-card > .hover-card-panel[b-2yvhgo0ero] {
        position: fixed;
        position-anchor: --hover-card;
        position-area: top;
        position-try-fallbacks: --hover-card-top-start, --hover-card-top-end, --hover-card-bottom, --hover-card-bottom-start, --hover-card-bottom-end;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        max-width: calc(100vw - 16px);
        margin: 8px 0;
        transform: translateY(4px);
    }

    .hover-card:hover > .hover-card-panel[b-2yvhgo0ero],
    .hover-card:focus-visible > .hover-card-panel[b-2yvhgo0ero],
    .hover-card:focus-within > .hover-card-panel[b-2yvhgo0ero] {
        transform: none;
    }

    /* The diamond is drawn for a panel opening upward and centred; it would point the wrong way once
       the panel flips or shifts. */
    .hover-card > .hover-card-panel[b-2yvhgo0ero]::after {
        display: none;
    }

    .hover-card-down > .hover-card-panel[b-2yvhgo0ero] {
        position-area: bottom;
    }

    @position-try --hover-card-top-start {
        position-area: top span-right;
    }

    @position-try --hover-card-top-end {
        position-area: top span-left;
    }

    @position-try --hover-card-bottom {
        position-area: bottom;
    }

    @position-try --hover-card-bottom-start {
        position-area: bottom span-right;
    }

    @position-try --hover-card-bottom-end {
        position-area: bottom span-left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-card-panel[b-2yvhgo0ero] {
        transition: none;
    }
}
/* /Components/LaneClassLadder.razor.rz.scp.css */
.lane-ladder[b-9ionh6vjbr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.lane-ladder-head[b-9ionh6vjbr] {
    margin-bottom: 0.1rem;
}

.lane-ladder-rung[b-9ionh6vjbr] {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.lane-ladder-marker[b-9ionh6vjbr] {
    width: 0.7rem;
}

.lane-ladder-word[b-9ionh6vjbr] {
    width: 2.2rem;
    letter-spacing: 0.06em;
}

.lane-ladder-name[b-9ionh6vjbr] {
    flex: 1;
}

.lane-ladder-range[b-9ionh6vjbr] {
    font-variant-numeric: tabular-nums;
}

.lane-ladder-rung.current[b-9ionh6vjbr] {
    font-weight: 700;
}

.lane-ladder-rung.current.won[b-9ionh6vjbr] { color: var(--teal); }
.lane-ladder-rung.current.lost[b-9ionh6vjbr] { color: var(--lose); }
.lane-ladder-rung.current.even[b-9ionh6vjbr] { color: var(--gold); }
/* /Components/LaneMatchupPanel.razor.rz.scp.css */
.lane-matchups[b-mm6wmlrsqg] {
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-top: 1px solid var(--gold-deep);
    border-radius: 0;
    background: rgba(1, 10, 19, 0.55);
}

.lane-matchups-header[b-mm6wmlrsqg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin-bottom: 0.45rem;
}

.lane-matchups-title[b-mm6wmlrsqg] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.lane-matchups-sub[b-mm6wmlrsqg] {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.8;
}

.lane-row[b-mm6wmlrsqg] {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    min-width: 0;
}

.lane-row + .lane-row[b-mm6wmlrsqg] {
    border-top: 1px solid var(--border);
}

/* Mirrors .champ-box-own in ResultPanel.razor.css: an outline rather than a border/background
   change, so it reads as a distinct whole-row mark instead of competing with the verdict colours
   already inside the row. */
.lane-row-own[b-mm6wmlrsqg] {
    outline: 1px solid var(--win);
    outline-offset: 2px;
}

.lane-role[b-mm6wmlrsqg] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
}

.lane-side[b-mm6wmlrsqg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.lane-side-enemy[b-mm6wmlrsqg] {
    flex-direction: row-reverse;
    text-align: right;
}

.lane-icon[b-mm6wmlrsqg] {
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold-dark);
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.lane-name[b-mm6wmlrsqg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.lane-name-empty[b-mm6wmlrsqg] {
    color: var(--text-dim);
    font-weight: 400;
    font-style: italic;
}

.lane-verdict[b-mm6wmlrsqg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 6rem;
    text-align: center;
}

.lane-verdict-text[b-mm6wmlrsqg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lane-verdict-good[b-mm6wmlrsqg] {
    color: var(--good);
}

.lane-verdict-warn[b-mm6wmlrsqg] {
    color: var(--warn);
}

.lane-verdict-bad[b-mm6wmlrsqg] {
    color: var(--lose);
}

.lane-confidence[b-mm6wmlrsqg] {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* An exact head-to-head is real op.gg-sourced matchup data, same as the "Check counter picks"
   dropdown's gold theme elsewhere in this panel — the colour is what marks it as a stronger read
   than the plain-text Comparison label above. */
.lane-confidence-exact[b-mm6wmlrsqg] {
    color: var(--gold);
}

.lane-numbers[b-mm6wmlrsqg] {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

@media (max-width: 760px) {
    .lane-row[b-mm6wmlrsqg] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 0.3rem;
    }

    .lane-side-enemy[b-mm6wmlrsqg] {
        flex-direction: row;
    }
}
/* /Components/LanePairCard.razor.rz.scp.css */
.pair-card[b-neng6abs4m] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pair-card-head[b-neng6abs4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pair-card-title[b-neng6abs4m] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Same hexagon as the other score cards: an outer gold shape with a dark one inset by the border width. */
.pair-card-gem[b-neng6abs4m] {
    flex: none;
    display: inline-flex;
    width: 3rem;
    height: 3.4rem;
    padding: 2px;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dark));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.pair-card-gem-inner[b-neng6abs4m] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, var(--panel-alt), var(--bg));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
}

.pair-card-sub[b-neng6abs4m] {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.pair-card-lines[b-neng6abs4m] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.6rem;
    margin-top: 0.15rem;
}

.pair-card-label[b-neng6abs4m] {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.pair-card-value[b-neng6abs4m] {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
}

.pair-card-value.ahead[b-neng6abs4m] { color: var(--teal); }
.pair-card-value.behind[b-neng6abs4m] { color: var(--lose); }

.pair-card-foot[b-neng6abs4m] {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    color: var(--text-dim);
    opacity: 0.8;
}
/* /Components/LaneStamp.razor.rz.scp.css */
/* The tilt is safe only because it sits on the trigger itself: the hover panel is its sibling, so it never
   gets a transformed ancestor (which would become the containing block of the fixed panel). */
.lane-stamp[b-3rm6qglqlj] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 2px solid currentColor;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-3deg);
}

/* The colour is whose lane it was, so a GAP the viewer's team won reads as good news. */
.lane-stamp.won[b-3rm6qglqlj] { --stamp: var(--teal); }
.lane-stamp.lost[b-3rm6qglqlj] { --stamp: var(--lose); }
.lane-stamp.diff[b-3rm6qglqlj] { color: var(--stamp); }

/* A blowout is a solid fill with a soft glow; a DIFF stays an outline. */
.lane-stamp.gap[b-3rm6qglqlj] {
    background: var(--stamp);
    border-color: var(--stamp);
    color: var(--bg);
    box-shadow: 0 0 10px color-mix(in srgb, var(--stamp) 55%, transparent);
}
/* /Components/LaneVerdictCard.razor.rz.scp.css */
.lane-card[b-4v8ievhaa0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lane-card-head[b-4v8ievhaa0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lane-card-title[b-4v8ievhaa0] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lane-card-title.plain[b-4v8ievhaa0] { color: var(--gold); }
.lane-card-title.won[b-4v8ievhaa0] { color: var(--teal); }
.lane-card-title.lost[b-4v8ievhaa0] { color: var(--lose); }
.lane-card-title.plain[b-4v8ievhaa0] { font-size: 0.72rem; }

/* A hexagon is an outer gold one with a dark one inset by the border width: clip-path cuts away any
   real border, so the "border" is the outer shape showing around the inner one. */
.lane-card-gem[b-4v8ievhaa0] {
    flex: none;
    display: inline-flex;
    width: 3rem;
    height: 3.4rem;
    padding: 2px;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dark));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.lane-card-gem-inner[b-4v8ievhaa0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, var(--panel-alt), var(--bg));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
}

.lane-card-sub[b-4v8ievhaa0] {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.lane-card-lines[b-4v8ievhaa0] {
    display: grid;
    grid-template-columns: auto 1fr 4rem;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-top: 0.15rem;
}

.lane-card-label[b-4v8ievhaa0] {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.lane-card-value[b-4v8ievhaa0] {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
}

.lane-card-label.mine[b-4v8ievhaa0],
.lane-card-value.mine[b-4v8ievhaa0] {
    color: var(--gold-bright);
    font-weight: 700;
}

/* Diverging bar: the centre tick is "even" (5), the fill grows left or right from it. */
.lane-card-bar[b-4v8ievhaa0] {
    position: relative;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.lane-card-bar[b-4v8ievhaa0]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--text-dim);
}

.lane-card-fill[b-4v8ievhaa0] {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--gold);
}

.lane-card-fill.high[b-4v8ievhaa0] { background: var(--teal); }
.lane-card-fill.low[b-4v8ievhaa0] { background: var(--lose); }

.lane-card-foot[b-4v8ievhaa0] {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    color: var(--text-dim);
    opacity: 0.8;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-yyo02n32e9] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header[b-yyo02n32e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.25rem 1.25rem 1.75rem;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(5, 150, 170, 0.18), transparent 70%),
        linear-gradient(180deg, #0a1428 0%, rgba(1, 10, 19, 0) 100%);
    border-bottom: 1px solid var(--gold-deep);
    box-shadow: 0 1px 0 rgba(200, 170, 110, 0.15);
}

/* Wraps the logo + h1 so the whole lockup is one link to home, without the anchor's default
   underline/colour leaking onto either child. */
.app-header-brand[b-yyo02n32e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.app-header-title[b-yyo02n32e9] {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 7vw, 4.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(180deg, #f0e6d2 0%, #c8aa6e 55%, #785a28 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(200, 170, 110, 0.25));
}

.app-header-mark[b-yyo02n32e9] {
    color: var(--teal);
    -webkit-text-fill-color: var(--teal);
}

.app-header-rule[b-yyo02n32e9],
.app-footer-rule[b-yyo02n32e9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(30rem, 80%);
    margin-top: 0.35rem;
}

.rule-line[b-yyo02n32e9] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

.rule-gem[b-yyo02n32e9] {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    transform: rotate(45deg);
    background: var(--gold);
    box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
}

.app-header-tagline[b-yyo02n32e9] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Centres the disclosure panel and gives it room to sit apart from the tagline above it. The panel
   itself (not this wrapper) carries the bordered "menu bar" look — see .app-nav-disclosure. */
.app-nav[b-yyo02n32e9] {
    display: flex;
    justify-content: center;
    margin-top: 0.9rem;
    width: 100%;
}

/* Same gradient/border/shadow recipe as .hero in Home.razor.css (copied deliberately, not
   factored out): the nav is meant to read as one more panel in that same visual family, not a
   bar that belongs to a different system. */
.app-nav-disclosure[b-yyo02n32e9] {
    width: 100%;
    max-width: min(60rem, 100%);
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Mobile-first default: a collapsible menu. This is also, deliberately, the fallback for any
   browser without ::details-content support (Chrome <131, Safari <18.4, Firefox <139) — confirmed
   by simulating one: forcing content-visibility: hidden on ::details-content at desktop width
   rendered an empty bordered strip, no links, no toggle, no navigation at all, because without that
   pseudo-element the "always force the list open" rule further down can never run, and a closed
   <details> hides everything but its <summary>. Making the working, clickable toggle the default —
   rather than something a width-gated override reveals — means an unsupporting browser always gets
   a functioning menu instead of silently getting nothing. */
.app-nav-toggle[b-yyo02n32e9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    list-style: none;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

    .app-nav-toggle[b-yyo02n32e9]::-webkit-details-marker {
        display: none;
    }

    .app-nav-toggle[b-yyo02n32e9]::after {
        content: '\25BE';
        transition: transform 0.15s ease;
    }

    .app-nav-disclosure[open] .app-nav-toggle[b-yyo02n32e9]::after {
        transform: rotate(180deg);
    }

    /* Gated on [open], not a permanent border: .app-nav-list li:first-child removes its own
       top border, and the summary has none of its own, so with the list showing there is nothing
       between MENU and HOME and MENU reads as a ninth link rather than the control that owns the
       list below it. Adding the border unconditionally would double it up with the closed
       control's own bottom edge (the panel border), so it only belongs here, while open. */
    .app-nav-disclosure[open] .app-nav-toggle[b-yyo02n32e9] {
        border-bottom: 1px solid var(--gold-deep);
    }

.app-nav-list[b-yyo02n32e9] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Gold dividers between cells rather than gaps, so the bar reads as one continuous panel. */
    .app-nav-list li[b-yyo02n32e9] {
        border-top: 1px solid var(--gold-deep);
    }

        .app-nav-list li:first-child[b-yyo02n32e9] {
            border-top: none;
        }

    /* ::deep: the <a> here is rendered by NavLink, a child component, so it never receives this
       stylesheet's own scope attribute -- an unqualified ".app-nav-list a" silently never matches
       it. ::deep drops the scope requirement past this point so the rule reaches into NavLink's
       output instead of only the <li> wrapper this component actually authors. */
    .app-nav-list[b-yyo02n32e9]  a {
        display: block;
        padding: 0.65rem 0.9rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text-dim);
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

        /* The longest label stays on one line so the bar does not grow a second text row for it; the other,
           shorter labels may still wrap in a narrow bar. */
        .app-nav-list[b-yyo02n32e9]  a.app-nav-link-single-line {
            white-space: nowrap;
        }

        .app-nav-list[b-yyo02n32e9]  a:hover,
        .app-nav-list[b-yyo02n32e9]  a:focus-visible {
            background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
            color: var(--gold-bright);
        }

        /* box-shadow, not a border, for the active rule: a border would add its own width and shift
           the cell by that amount the moment a link becomes active. */
        .app-nav-list[b-yyo02n32e9]  a.app-nav-link-active {
            background: linear-gradient(180deg, rgba(200, 170, 110, 0.28), rgba(200, 170, 110, 0.1));
            color: var(--gold-bright);
            box-shadow: inset 0 2px 0 var(--teal);
        }

/* Nested disclosure inside the list for the Riot ID search (see MainLayout.razor). The
   <summary> matches the other list cells' own treatment (uppercase 0.72rem, gold-bright on hover)
   since it reads as one more menu item; the ::after chevron matches .app-nav-toggle's own idiom
   above, since it's a second, independent disclosure control. position: relative is the anchor the
   desktop override below positions the panel against. */
.app-nav-search[b-yyo02n32e9] {
    position: relative;
}

    .app-nav-search-toggle[b-yyo02n32e9] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.65rem 0.9rem;
        list-style: none;
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-dim);
        transition: background 0.15s ease, color 0.15s ease;
    }

        .app-nav-search-toggle[b-yyo02n32e9]::-webkit-details-marker {
            display: none;
        }

        .app-nav-search-toggle:hover[b-yyo02n32e9],
        .app-nav-search-toggle:focus-visible[b-yyo02n32e9] {
            background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
            color: var(--gold-bright);
        }

        .app-nav-search-toggle[b-yyo02n32e9]::after {
            content: '\25BE';
            color: var(--gold);
            transition: transform 0.15s ease;
        }

        .app-nav-search[open] .app-nav-search-toggle[b-yyo02n32e9]::after {
            transform: rotate(180deg);
        }

/* Same look as .feature-note-pill in CoachTipsAnnouncement.razor.css, scaled down to sit inline with
   the 0.72rem nav label. It is a flex item of the summary (which already has a gap), so the label
   keeps its own space; flex-shrink/nowrap stop a long label wrapping the pill itself onto two lines
   in a narrow mobile menu -- the label text wraps instead. Colour is set explicitly because the
   toggle's hover state recolours its text, and the pill must stay legible on its teal fill. */
.app-nav-new-pill[b-yyo02n32e9] {
    flex-shrink: 0;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--teal);
    background: var(--teal);
    color: var(--panel);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ::deep, because the form is RiotIdSearchField's root element, which this layout's scope
   attribute does NOT reach -- a plain .app-nav-search-form selector silently matches nothing. */
.app-nav-search[b-yyo02n32e9]  .app-nav-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--gold-deep);
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.95), rgba(11, 23, 37, 0.95));
}

/* The always-open desktop row, gated on BOTH a wide-enough viewport and ::details-content support.
   Nesting @supports inside @media — rather than a second, separately-maintained ruleset — means
   there is exactly one place that decides "show the flex row instead of the collapsible default"
   above, so a narrow viewport and an unsupporting browser both fall through to that same default
   with nothing to keep in sync. "not all and (max-width: 760px)" is the literal complement of the
   max-width: 760px this component's mobile styling is keyed off of by being the *unconditional*
   default; a min-width: 761px pairing would leave fractional widths like 760.4px — routine under
   display scaling or browser zoom — matching neither, which by the ::details-content reasoning
   above means no navigation at all in that sliver. */
@media not all and (max-width: 760px) {
    @supports selector(::details-content) {
        /* Hugs its 737px of cells instead of stretching to the 960px cap and leaving a couple
           hundred pixels of visibly empty panel to the right of the last cell. */
        .app-nav-disclosure[b-yyo02n32e9] {
            width: fit-content;
            max-width: 100%;
        }

        /* A closed <details> hides everything but its <summary> through the UA's own shadow tree
           (the ::details-content pseudo-element), not through a rule this stylesheet can
           out-specificity — display: flex below isn't enough on its own. The list must always read
           as open here, so force the shadow tree's own visibility rather than rely on the [open]
           attribute. */
        .app-nav-disclosure[b-yyo02n32e9]::details-content {
            content-visibility: visible;
        }

        .app-nav-toggle[b-yyo02n32e9] {
            display: none;
        }

        .app-nav-list[b-yyo02n32e9] {
            flex-direction: row;
        }

            .app-nav-list li[b-yyo02n32e9] {
                border-top: none;
                border-left: 1px solid var(--gold-deep);
            }

                .app-nav-list li:first-child[b-yyo02n32e9] {
                    border-left: none;
                }

            /* Horizontal padding is fluid only here, on the one-row bar: the 8 labels' intrinsic
               width (~737px) plus the header's own padding needs ~779px before a fixed 0.9rem/side
               fits without clipping — and body has overflow-x: clip, so anything narrower than
               that clips silently rather than scrolling. Shrinking padding as the viewport
               approaches the 760px breakpoint buys back exactly the room the fixed value couldn't
               spare; it bottoms out at 0.45rem and is back at today's 0.9rem by ~1310px, so nothing
               changes at normal desktop widths. The stacked mobile layout below the breakpoint has
               no such width pressure — every row is full width regardless of label length — so it
               keeps the fixed 0.9rem there and stays aligned with the toggle above it instead of
               drifting a few px left as the viewport narrows. */
            .app-nav-list[b-yyo02n32e9]  a {
                padding-left: clamp(0.45rem, 1.1vw, 0.9rem);
                padding-right: clamp(0.45rem, 1.1vw, 0.9rem);
            }

            /* Overlay, not in-flow: the desktop bar hugs its cells' intrinsic width (see
               .app-nav-disclosure's own width: fit-content above), so an in-flow panel here would
               widen the ninth cell by however wide the form is -- worsening the ~779px clipping this
               stylesheet's own comment already documents, and silently, since body has
               overflow-x: clip. Absolute positioning removes the open panel from that flow
               entirely, so it overlays the page instead of ever changing the bar's own width. The width is
               fixed rather than max-content because the search pill's input is flexible, so a
               max-content panel would collapse to the input's tiny intrinsic size; the z-index sits
               above page content because the pill's suggestion dropdown (a descendant) has to overlay
               whatever is beneath the bar, and it can never escape this form's stacking context. */
            .app-nav-search[b-yyo02n32e9]  .app-nav-search-form {
                position: absolute;
                top: 100%;
                right: 0;
                z-index: 30;
                width: min(22rem, 90vw);
                border-top: none;
                border: 1px solid var(--gold-deep);
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
            }
    }
}

main[b-yyo02n32e9] {
    flex: 1;
    padding: 2rem 1.25rem 3rem;
}

.app-footer[b-yyo02n32e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem 2.5rem;
    text-align: center;
    /* Mirrors the header's fade, flipped: the glow rises out of the bottom edge. */
    background: linear-gradient(0deg, #0a1428 0%, rgba(1, 10, 19, 0) 100%);
}

.app-footer-title[b-yyo02n32e9] {
    margin: 0.75rem 0 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.app-footer-text[b-yyo02n32e9] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.app-footer-links[b-yyo02n32e9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
}

.app-footer-links-sep[b-yyo02n32e9] {
    color: var(--text-dim);
    opacity: 0.6;
}

/* Resets button chrome so #cookie-settings reads as a link, matching the Privacy/Terms anchors
   either side of it in the same nav. */
.app-footer-link-button[b-yyo02n32e9] {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

    .app-footer-link-button:hover[b-yyo02n32e9] {
        color: var(--gold-bright);
    }

.app-footer-disclaimer[b-yyo02n32e9] {
    max-width: 34rem;
    margin: 0.6rem 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-dim);
    opacity: 0.6;
}

/* Sits last, after the small-print disclaimer, so it needs more headroom than its old
   0.35rem (tuned for following app-footer-text directly) to still read as a distinct closing line. */
.app-footer-copy[b-yyo02n32e9] {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    opacity: 0.75;
}

/* app.css only sets anchor colour; without an underline the address reads as plain
   gold text and nothing signals it is clickable. */
.app-footer a[b-yyo02n32e9] {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

    .app-footer a:hover[b-yyo02n32e9] {
        color: var(--gold-bright);
    }

#blazor-error-ui[b-yyo02n32e9] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-yyo02n32e9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zp2h795xdy],
.components-reconnect-repeated-attempt-visible[b-zp2h795xdy],
.components-reconnect-failed-visible[b-zp2h795xdy],
.components-pause-visible[b-zp2h795xdy],
.components-resume-failed-visible[b-zp2h795xdy],
.components-rejoining-animation[b-zp2h795xdy] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-retrying[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-failed[b-zp2h795xdy],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zp2h795xdy] {
    display: block;
}


#components-reconnect-modal[b-zp2h795xdy] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zp2h795xdy 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zp2h795xdy 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zp2h795xdy 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zp2h795xdy]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-zp2h795xdy 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zp2h795xdy {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zp2h795xdy {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zp2h795xdy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zp2h795xdy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zp2h795xdy] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zp2h795xdy] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zp2h795xdy] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-zp2h795xdy] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-zp2h795xdy] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zp2h795xdy] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zp2h795xdy 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zp2h795xdy] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zp2h795xdy {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/LedgerMethod.razor.rz.scp.css */
.lm summary[b-o1afmy8bjk] {
    cursor: pointer;
    color: var(--gold);
    font-size: 0.9rem;
}

.lm ol[b-o1afmy8bjk] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.6rem 0 0;
    padding-left: 1.4rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.lm strong[b-o1afmy8bjk] {
    color: var(--gold-bright);
}

/* Long formulas must wrap rather than widen the page on a phone. */
.lm code[b-o1afmy8bjk] {
    display: block;
    margin-top: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: var(--panel-alt);
    color: var(--gold-bright);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.lm .lm-caption[b-o1afmy8bjk] {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
}
/* /Components/LegalPage.razor.rz.scp.css */
.legal-page[b-e375bfx7cb] {
    max-width: 68ch;
    margin: 0 auto;
}

.legal-page h1[b-e375bfx7cb] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.legal-updated[b-e375bfx7cb] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.legal-body[b-e375bfx7cb] {
    margin-top: 1rem;
}

/* Scoped to .legal-body, not .legal-page: ::deep compiles to a plain descendant selector, so
   scoping it to the wrapper around ChildContent keeps these rules from also matching this
   component's own h2/legal-updated markup above (they did, before this wrapper existed). */
.legal-body[b-e375bfx7cb]  h3 {
    margin: 1.25rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gold);
}

.legal-body[b-e375bfx7cb]  h3:first-child {
    margin-top: 0;
}

.legal-body[b-e375bfx7cb]  p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
    color: var(--text);
}

.legal-body[b-e375bfx7cb]  p:last-child {
    margin-bottom: 0;
}

.legal-body[b-e375bfx7cb]  ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    line-height: 1.6;
    color: var(--text);
}

.legal-body[b-e375bfx7cb]  li {
    margin-bottom: 0.35rem;
}
/* /Components/LiveGameFinder.razor.rz.scp.css */
.live-finder[b-fvbm1ksb7m],
.live-finder-status[b-fvbm1ksb7m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

/* Button first, hint under it: the group is a narrow column, not a row. The status line stays a
   wrapping row so spinner, text and Stop fold instead of overflowing it. */
.live-finder[b-fvbm1ksb7m] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.live-finder-hint[b-fvbm1ksb7m],
.live-finder-status[b-fvbm1ksb7m] {
    color: var(--text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* The status text shares the spinner's line instead of wrapping beneath it, which left the spinner
   alone on its own row; Stop/Check again still wrap below when the column is narrow. */
.live-finder-status > span:not(.live-finder-spinner)[b-fvbm1ksb7m] {
    flex: 1 1 10rem;
    min-width: 0;
}

.live-finder-hint[b-fvbm1ksb7m] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.live-finder-error[b-fvbm1ksb7m] {
    color: var(--warn);
    font-size: 0.8rem;
    margin: 0;
}

/* Matches Home's .btn-capture (same weight and 2.75rem height): Live game and Capture are peer
   entry points side by side, so neither should read as the lesser one. */
.live-finder-btn[b-fvbm1ksb7m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 0.45rem;
    height: 2.75rem;
    padding: 0.6rem 1.4rem;
    border: 2px solid var(--gold);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.04));
    color: var(--gold-bright);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.live-finder-btn:hover:not(:disabled)[b-fvbm1ksb7m] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.35), rgba(200, 170, 110, 0.12));
    box-shadow: 0 0 14px rgba(200, 170, 110, 0.35);
    color: #fff;
}

.live-finder-btn:disabled[b-fvbm1ksb7m] {
    border-color: var(--gold-deep);
    color: var(--text-dim);
    background: rgba(1, 10, 19, 0.4);
    cursor: not-allowed;
}

.live-finder-dot[b-fvbm1ksb7m] {
    color: var(--danger);
}

/* Same ring spinner as LiveMatchSection (its rules are scoped to that component). */
.live-finder-spinner[b-fvbm1ksb7m] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-right-color: var(--teal);
    animation: live-finder-spin-b-fvbm1ksb7m 0.8s linear infinite;
}

@keyframes live-finder-spin-b-fvbm1ksb7m {
    to {
        transform: rotate(360deg);
    }
}

/* flex-wrap so the strip folds onto two rows at 375 px instead of scrolling sideways. */
.live-finder-found[b-fvbm1ksb7m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--danger);
    border-left: 3px solid var(--danger);
    background: linear-gradient(135deg, rgba(232, 64, 87, 0.18), rgba(232, 64, 87, 0.06)), var(--panel);
}

.live-finder-pulse[b-fvbm1ksb7m] {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--danger);
    animation: live-finder-pulse-b-fvbm1ksb7m 1.4s ease-in-out infinite;
}

@keyframes live-finder-pulse-b-fvbm1ksb7m {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 64, 87, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(232, 64, 87, 0);
    }
}

.live-finder-tag[b-fvbm1ksb7m] {
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.live-finder-found-text[b-fvbm1ksb7m] {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--text);
    font-size: 0.85rem;
}

/* Queue label, separator and clock wrap as one unit, so a narrow strip never strands the clock alone on a line. */
.live-finder-nowrap[b-fvbm1ksb7m] {
    white-space: nowrap;
}

.live-finder-open[b-fvbm1ksb7m] {
    padding: 0.45rem 1.1rem;
    border: 2px solid var(--gold);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.04));
    color: var(--gold-bright);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.live-finder-open:disabled[b-fvbm1ksb7m] {
    border-color: var(--gold-deep);
    color: var(--text-dim);
    cursor: not-allowed;
}

.live-finder-dismiss[b-fvbm1ksb7m] {
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.live-finder-dismiss:hover:not(:disabled)[b-fvbm1ksb7m] {
    color: var(--gold-bright);
}

@media (prefers-reduced-motion: reduce) {
    .live-finder-spinner[b-fvbm1ksb7m],
    .live-finder-pulse[b-fvbm1ksb7m] {
        animation: none;
    }
}
/* /Components/LiveInsights/EnemyJungleCard.razor.rz.scp.css */
.jungle-card[b-42p3chk9ge] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.jungle-card-head[b-42p3chk9ge] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.jungle-card-head h3[b-42p3chk9ge] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gold-bright);
}

.jungle-card-icon[b-42p3chk9ge] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gold-dark);
}

.jungle-card-basis[b-42p3chk9ge] {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.jungle-card-start[b-42p3chk9ge] {
    margin: 0;
    font-weight: 600;
    color: var(--text);
}

/* The first clear as text, so the order reads without the picture. Wraps on a phone. */
.clear-route[b-42p3chk9ge] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text);
}

.clear-route li + li[b-42p3chk9ge]::before {
    content: "→";
    margin-right: 0.5rem;
    color: var(--text-dim);
}

.clear-route li.estimated[b-42p3chk9ge] {
    font-style: italic;
    color: var(--text-dim);
}

.clear-later[b-42p3chk9ge] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text);
}

.clear-later .later-item.estimated[b-42p3chk9ge] {
    font-style: italic;
    color: var(--text-dim);
}

.clear-route-note[b-42p3chk9ge] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.gank-timers-title[b-42p3chk9ge] {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--gold-bright);
}

.gank-timers-title span[b-42p3chk9ge] {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.gank-timers[b-42p3chk9ge] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gank-row[b-42p3chk9ge] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text);
}

.gank-row.rare[b-42p3chk9ge] {
    color: var(--text-dim);
}

/* The user's own lane: this is the row they are reading the card for, so it gets the accent bar and a tinted
   background rather than relying on text weight alone (which a skim misses). */
.gank-row.mine[b-42p3chk9ge] {
    border-left-color: var(--lose);
    background: rgba(232, 64, 87, 0.14);
    font-weight: 700;
}

.gank-row-you[b-42p3chk9ge] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lose);
}
/* /Components/LiveInsights/LiveBuildCard.razor.rz.scp.css */
/* Sits below the live panel, so it borrows the build page's tile look rather than the panel's
   louder blue/crimson mode-change styling; only the panel's surface and edge colours carry over. */
.live-build[b-1cfciqsfju] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--border);
}

.live-build-title[b-1cfciqsfju] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.live-build-group[b-1cfciqsfju] {
    min-width: 0;
}

.live-build-group h4[b-1cfciqsfju] {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.live-build-pair[b-1cfciqsfju] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.5rem;
}

.live-build-tiles[b-1cfciqsfju] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.live-build-tile[b-1cfciqsfju] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.live-build-tile img[b-1cfciqsfju] {
    display: block;
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
}

/* A ring plus the badge below: the ring alone would be the only cue and is colour-only. */
.live-build-tile-key img[b-1cfciqsfju] {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), 0 0 10px 1px rgba(200, 170, 110, 0.55);
}

.live-build-key[b-1cfciqsfju] {
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    transform: translateX(-50%);
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--gold);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bg);
}

.live-build-count[b-1cfciqsfju] {
    position: absolute;
    right: -0.2rem;
    top: -0.2rem;
    padding: 0 0.25rem;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    background: var(--bg);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.live-build-arrow[b-1cfciqsfju] {
    flex: 0 0 auto;
    color: var(--text-dim);
}

.live-build-swaps[b-1cfciqsfju] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-build-swap[b-1cfciqsfju] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.live-build-swap-text[b-1cfciqsfju] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.live-build-swap-name[b-1cfciqsfju] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.live-build-swap-reason[b-1cfciqsfju] {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-dim);
}

.live-build-note[b-1cfciqsfju] {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-dim);
    opacity: 0.6;
}

.live-build-link[b-1cfciqsfju] {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
}

@media (max-width: 480px) {
    .live-build[b-1cfciqsfju] {
        padding: 0.85rem 0.8rem 1rem;
    }

    .live-build-pair[b-1cfciqsfju] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/LiveInsights/LiveGamePlaceholder.razor.rz.scp.css */
.live-placeholder[b-rca63eu6zk] {
    margin-top: 1.25rem;
}

/* Same heading as the real section's (LiveMatchInsights.razor.css); scoped CSS cannot be shared. */
.live-placeholder-title[b-rca63eu6zk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

/* Same as ResultPanel's .placeholder-hint. */
.live-placeholder-hint[b-rca63eu6zk] {
    margin: 0 auto 0.75rem;
    max-width: 34rem;
    color: var(--text-dim);
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* Same grid as .live-insights-grid; min() keeps one column from overflowing a phone narrower than the card minimum. */
.live-placeholder-grid[b-rca63eu6zk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    align-items: start;
    opacity: 0.5;
    pointer-events: none;
}
/* /Components/LiveInsights/LiveMatchInsights.razor.rz.scp.css */
.live-insights[b-hih9w0x47v] {
    margin-top: 1.25rem;
}

.live-insights-title[b-hih9w0x47v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

/* min() keeps a single column from overflowing a phone narrower than the minimum card width. */
.live-insights-grid[b-hih9w0x47v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
    align-items: start;
}

/* Wide screens, three cards: the build takes the first row and lays its groups out left to right instead of
   becoming a tall narrow column. ::deep because the card is a child component with its own scoped styles. */
@media (min-width: 56rem) {
    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v] {
        grid-column: 1 / -1;
    }

    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.9rem 2.5rem;
    }

    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build-title,
    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build-note,
    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build-link {
        flex: 0 0 100%;
    }

    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build-keys,
    .live-insights-grid-plan .live-insights-build[b-hih9w0x47v]  .live-build-consider {
        flex: 1 1 18rem;
    }
}

/* Same shimmer as the build page's skeleton blocks (those styles are scoped to that page). */
.live-insights-skeleton[b-hih9w0x47v] {
    height: 14rem;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--border) 25%, var(--panel-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: live-insights-shimmer-b-hih9w0x47v 1.4s ease-in-out infinite;
}

@keyframes live-insights-shimmer-b-hih9w0x47v {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-insights-skeleton[b-hih9w0x47v] {
        animation: none;
    }
}
/* /Components/LiveInsights/RiftMapView.razor.rz.scp.css */
/* The custom properties live on the wrapper so the legend under the map shares them with the lines. */
.rift-map-wrap[b-drri1lrnen] {
    --rm-yours: #ffe14d;
    --rm-enemy: #ff5c7a;
    --rm-halo: #04090f;

    width: 100%;
    max-width: 360px;
}

/* Square, capped at 360px on a desktop and full width on a phone. */
.rift-map[b-drri1lrnen] {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    /* The texture's jungle is transparent (colour-keyed), so this is the jungle: dark enough that the lane
       and river bands read as the map and the overlay colours pop, in either of the site's palettes. */
    background: #0b1a17;
}

.rift-map-texture[b-drri1lrnen] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

.rift-map-overlay[b-drri1lrnen] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rm-path.yours[b-drri1lrnen] { --rm-colour: var(--rm-yours); }
.rm-path.enemy[b-drri1lrnen] { --rm-colour: var(--rm-enemy); }

/* A dark halo line under every path (and a dark stroke around every dot and label) so the same two colours
   stay legible whether they cross the olive lanes, the blue river or the dark jungle. Enemy lines are also
   dashed, so the two are told apart by more than hue. Widths are in map units (~41 per px at 360px). */
.rm-halo[b-drri1lrnen],
.rm-line[b-drri1lrnen] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rm-halo[b-drri1lrnen] {
    stroke: var(--rm-halo);
    stroke-width: 300;
}

.rm-line[b-drri1lrnen] {
    stroke: var(--rm-colour);
    stroke-width: 160;
}

.rm-path.enemy .rm-line[b-drri1lrnen] {
    stroke-dasharray: 380 260;
}

.rm-arrow[b-drri1lrnen] {
    fill: var(--rm-colour);
    stroke: var(--rm-halo);
    stroke-width: 60;
    stroke-linejoin: round;
}

.rm-dot[b-drri1lrnen] {
    fill: var(--rm-colour);
    stroke: var(--rm-halo);
    stroke-width: 70;
}

/* Clear mode: an inferred stop is a hollow dashed ring, so it differs from an observed (filled) one by shape and
   not only by hue; later-minute dots are the same pair, smaller and fainter, with no line between them. */
.rm-dot.inferred[b-drri1lrnen] {
    fill: rgba(4, 9, 15, 0.55);
    stroke: var(--rm-colour);
    stroke-width: 80;
    stroke-dasharray: 150 100;
}

.rm-dot.rm-later[b-drri1lrnen] {
    opacity: 0.65;
}

.rm-minute.later[b-drri1lrnen] {
    font-size: 500px;
    opacity: 0.85;
}

.rm-minute[b-drri1lrnen],
.rm-gank-label[b-drri1lrnen] {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 560px;
    fill: #fff;
    stroke: var(--rm-halo);
    stroke-width: 150;
    paint-order: stroke;
    stroke-linejoin: round;
}

.rm-gank-ring[b-drri1lrnen] {
    fill: rgba(255, 255, 255, 0.18);
    stroke: #fff;
    stroke-width: 90;
    stroke-dasharray: 160 110;
}

.rm-gank-label[b-drri1lrnen] {
    font-size: 600px;
    dominant-baseline: central;
}

.rift-map-legend[b-drri1lrnen] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.rift-map-legend li[b-drri1lrnen] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-line[b-drri1lrnen] {
    stroke: var(--rm-colour);
    stroke-width: 3;
    stroke-linecap: round;
}

.rm-path.enemy .legend-line[b-drri1lrnen] {
    stroke-dasharray: 5 3.5;
}

/* Ring around a camp to take (invade): green rather than a path colour so it never reads as a path. */
.rm-highlight[b-drri1lrnen] {
    fill: rgba(61, 220, 151, 0.22);
    stroke: #3ddc97;
    stroke-width: 100;
}

/* One compact line keying the dot styles of a clear-mode path; the swatches use px-scale strokes because they are
   not drawn in map units. */
.rift-map-caption[b-drri1lrnen] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.rift-map-caption li[b-drri1lrnen] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.swatch-seen[b-drri1lrnen] {
    fill: var(--rm-colour);
    stroke: var(--rm-halo);
    stroke-width: 1;
}

.swatch-estimated[b-drri1lrnen] {
    fill: rgba(4, 9, 15, 0.55);
    stroke: var(--rm-colour);
    stroke-width: 1.5;
    stroke-dasharray: 2.4 1.6;
}

.swatch-later[b-drri1lrnen] {
    fill: var(--rm-colour);
    opacity: 0.65;
}
/* /Components/LiveInsights/YourJungleCard.razor.rz.scp.css */
.jungle-card[b-wvg60c1w8f] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.jungle-card-head[b-wvg60c1w8f] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.jungle-card-head h3[b-wvg60c1w8f] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--gold-bright);
}

.jungle-card-icon[b-wvg60c1w8f] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gold-dark);
}

.jungle-card-basis[b-wvg60c1w8f] {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--text);
}

.invade-verdict[b-wvg60c1w8f] {
    margin-top: 0.1rem;
}

/* Always stacked: the chip on its own line and the reason full width beneath it. BadgeChipRow's two-column list
   squeezes the reason into a narrow column beside the chip on a wide card. The tones still come from BadgeChipRow. */
.invade-verdict[b-wvg60c1w8f]  .badge-list,
.invade-verdict[b-wvg60c1w8f]  .badge-list-item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
/* /Components/LiveMatchPanel.razor.rz.scp.css */
/* Deliberately louder than the rest of the site: this panel replaces a pre-game estimate with a
   real scoreboard the instant the game is found, and it should read as a mode change, not another
   ResultPanel skin. Electric blue vs crimson (not this app's usual teal/gold hextech palette),
   angled card edges, and a header sheen do that work. Custom properties are scoped to this
   component (::deep-free) so they can't leak into or collide with app.css's own --blue/--lose,
   which stay in play everywhere else on the page. */
.live-match[b-hrw03cohdn] {
    --live-blue-1: #2f9bff;
    --live-blue-2: #0a3d66;
    --live-crimson-1: #ff3b5c;
    --live-crimson-2: #5c0f1f;
    --live-panel: #071018;
    --live-edge: 10px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1.4rem;
    background: var(--live-panel);
    border: 1px solid #1b2e3f;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

.live-match-header[b-hrw03cohdn] {
    position: relative;
    display: flex;
    align-items: center;
    /* Wraps so the meta line drops below the title on a narrow phone instead of overflowing. */
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    overflow: hidden;
    background: linear-gradient(120deg, var(--live-blue-2), #10202f 45%, var(--live-crimson-2));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 1.1rem 100%, 0 calc(100% - 1.1rem));
}

/* The sheen: a soft diagonal highlight sweeping across the header on a slow loop -- purely
   decorative, so it's the first thing prefers-reduced-motion below turns off. */
.live-match-header[b-hrw03cohdn]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 48%, transparent 66%);
    background-size: 220% 100%;
    animation: live-sheen-b-hrw03cohdn 5s linear infinite;
    pointer-events: none;
}

@keyframes live-sheen-b-hrw03cohdn {
    0% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

.live-match-header h2[b-hrw03cohdn] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

/* Subtle on purpose: the title stays the loudest thing in the header. tabular-nums keeps the
   ticking clock from jittering the line as digits change width. */
.live-match-meta[b-hrw03cohdn] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.live-roles-note[b-hrw03cohdn] {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.live-dot[b-hrw03cohdn] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--live-crimson-1);
    box-shadow: 0 0 8px 2px rgba(255, 59, 92, 0.7);
    animation: live-pulse-b-hrw03cohdn 1.4s ease-in-out infinite;
}

@keyframes live-pulse-b-hrw03cohdn {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.75); }
}

.live-match-teams[b-hrw03cohdn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    /* Also the gap between cards inside each team: .live-team below is a subgrid, which inherits
       this row-gap rather than declaring its own. */
    row-gap: 0.5rem;
}

/* A subgrid over .live-match-teams' rows, not its own flex column: both teams then share the same
   row tracks, so row k holds each team's k-th card and is as tall as the taller of the two. That
   is what lines up each lane across the columns even though cards differ in height (optional
   badge row, rank bar, detail line). The DOM stays grouped by team so the mobile stack still reads
   your team, then the enemy team. --live-rows is set inline by LiveMatchPanel because the number
   of rows depends on the roster, which CSS can't count. */
.live-team[b-hrw03cohdn] {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--live-rows);
    min-width: 0;
    padding: 0.15rem;
    /* The angled top edge that reads as this team's "side" -- gold for yours, none needed on the
       enemy column, whose crimson comes from the cards themselves. */
    border-top: 2px solid var(--live-blue-1);
}

.live-team-enemy[b-hrw03cohdn] {
    border-top-color: var(--live-crimson-1);
}

.live-team-title[b-hrw03cohdn] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--live-blue-1);
}

.live-team-enemy .live-team-title[b-hrw03cohdn] {
    color: var(--live-crimson-1);
}

/* Dissolves the wrapper so each card becomes a direct item of .live-team's subgrid -- a real box
   here would occupy a single row and stack every card inside it, defeating the shared tracks. */
.live-player-list[b-hrw03cohdn] {
    display: contents;
}

.live-player-card[b-hrw03cohdn] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    /* A card stretched to its row's height (the taller neighbour in the other team) keeps its
       content at the top. Centring floated a short card's portrait and name down into the middle,
       so the two teams' portraits for a lane were no longer level; with start, each lane's portrait
       and name row line up across both teams and the spare height falls to the bottom. */
    align-content: start;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem 0.55rem 0.7rem;
    /* Own stacking context so ::before below (z-index: -1) paints behind this card's own content
       instead of behind the whole .live-player-list -- without isolation, a negative z-index
       escapes to the nearest ancestor stacking context instead of staying local to this card. */
    isolation: isolate;
    transition: transform 0.12s ease;
}

/* The card's visual box (background/border/clipped corner) lives on ::before rather than directly
   on .live-player-card: a clip-path also clips any absolutely-positioned descendant, which would
   cut off a badge tooltip taller than the space above the badge row -- true for most cards here.
   Moving the clip to a layer behind the card's real content leaves the tooltip free to paint past
   the card's edges while the card still reads as clipped underneath it. */
.live-player-card[b-hrw03cohdn]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(47, 155, 255, 0.10), rgba(7, 16, 24, 0.9) 55%);
    border: 1px solid rgba(47, 155, 255, 0.35);
    /* The clipped corner is this panel's signature shape -- an angled cut on the leading top
       corner, mirrored (trailing) for the enemy column below, so the two sides visually face
       each other rather than reading as two copies of the same card. */
    clip-path: polygon(var(--live-edge) 0, 100% 0, 100% 100%, 0 100%, 0 var(--live-edge));
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.live-team-enemy .live-player-card[b-hrw03cohdn]::before {
    background: linear-gradient(260deg, rgba(255, 59, 92, 0.10), rgba(7, 16, 24, 0.9) 55%);
    border-color: rgba(255, 59, 92, 0.35);
    clip-path: polygon(0 0, calc(100% - var(--live-edge)) 0, 100% var(--live-edge), 100% 100%, 0 100%);
}

.live-player-card:hover[b-hrw03cohdn] {
    transform: translateY(-1px);
}

.live-player-card:hover[b-hrw03cohdn]::before {
    border-color: var(--live-blue-1);
    box-shadow: 0 0 18px rgba(47, 155, 255, 0.35);
}

.live-team-enemy .live-player-card:hover[b-hrw03cohdn]::before {
    border-color: var(--live-crimson-1);
    box-shadow: 0 0 18px rgba(255, 59, 92, 0.35);
}

/* Transparent to the desktop grid above: the four real pieces (icon, main, rank, form) are placed
   directly onto .live-player-card's own grid-template-columns as if these two wrappers didn't
   exist. They only start doing anything at the mobile breakpoint below, where .live-player-card
   stops being a grid at all. */
.live-player-top[b-hrw03cohdn],
.live-player-bottom[b-hrw03cohdn] {
    display: contents;
}

.live-champ-icon[b-hrw03cohdn],
.live-champ-icon-empty[b-hrw03cohdn] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--panel-alt);
    object-fit: cover;
}

.live-player-main[b-hrw03cohdn] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.live-player-name[b-hrw03cohdn] {
    overflow: hidden;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-player-role[b-hrw03cohdn] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.live-role-badge[b-hrw03cohdn] {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}

.live-player-rank[b-hrw03cohdn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.live-player-rank[b-hrw03cohdn]  .rank-emblem {
    width: 1.9rem;
    height: 1.9rem;
}

.live-rank-text[b-hrw03cohdn] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 5rem;
}

.live-rank-tier[b-hrw03cohdn] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.live-winrate-bar[b-hrw03cohdn] {
    width: 100%;
    height: 4px;
    background: rgba(1, 10, 19, 0.8);
    border-radius: 2px;
    overflow: hidden;
}

.live-winrate-fill[b-hrw03cohdn] {
    height: 100%;
    background: linear-gradient(90deg, var(--live-crimson-1), var(--gold), var(--win));
}

.live-rank-detail[b-hrw03cohdn] {
    font-size: 0.65rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.live-player-form[b-hrw03cohdn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
}

.live-kda-avg[b-hrw03cohdn] {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.live-form-caption[b-hrw03cohdn] {
    font-size: 0.62rem;
    color: var(--text-dim);
    opacity: 0.75;
    white-space: nowrap;
}

.live-kda-ratio[b-hrw03cohdn] {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.live-kda-ratio.high[b-hrw03cohdn] {
    color: var(--win);
}

/* A real grid item (unlike .live-player-top/-bottom above, which are display:contents), so it
   needs an explicit span to cross all four of .live-player-card's desktop columns rather than
   being auto-placed into just the first one. At the mobile breakpoint below, .live-player-card
   stops being a grid at all, so this row falls into place as the column flex container's third
   stacked child with no extra rule needed. Wraps PlayerBadgeChips rather than folding this rule
   into that component's own CSS: grid placement is this card's layout concern, not something a
   component meant to also render standalone on the profile page should know about. */
.live-badges[b-hrw03cohdn] {
    grid-column: 1 / -1;
}

/* The draft-level counterpart to a player card, subtle enough not to compete with the cards above
   it, but still its own box (not a bare list of chips) so it visually reads as one verdict about
   the whole team rather than a sixth card. Pinned to the subgrid's last row (negative lines count
   from the end of .live-team's own --live-rows span) so both teams' boxes line up and match in
   height even when one roster is shorter; ignored at the mobile breakpoint, where .live-team is
   flex rather than a grid. */
.live-team-badges[b-hrw03cohdn] {
    grid-row: -2 / -1;
    padding: 0.55rem 0.7rem;
    background: rgba(47, 155, 255, 0.05);
    border: 1px solid rgba(47, 155, 255, 0.25);
    border-radius: 4px;
}

.live-team-enemy .live-team-badges[b-hrw03cohdn] {
    background: rgba(255, 59, 92, 0.05);
    border-color: rgba(255, 59, 92, 0.25);
}

/* .live-team-title's own styling, scaled down slightly (0.8rem vs 0.85rem) -- this is a
   sub-heading inside the column, so it stays just below the column heading rather than matching it. */
.live-team-badges-title[b-hrw03cohdn] {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--live-blue-1);
}

.live-team-enemy .live-team-badges-title[b-hrw03cohdn] {
    color: var(--live-crimson-1);
}

@media (prefers-reduced-motion: reduce) {
    .live-match-header[b-hrw03cohdn]::after,
    .live-dot[b-hrw03cohdn] {
        animation: none;
    }
}

/* Single column, 16px gutters, no horizontal scroll -- the app-wide rule for this component only,
   since .home elsewhere relies on flex-wrap rather than an explicit breakpoint. */
@media (max-width: 700px) {
    .live-match[b-hrw03cohdn] {
        padding: 1rem 1rem 1.25rem;
    }

    .live-match-teams[b-hrw03cohdn] {
        grid-template-columns: 1fr;
        /* The base row-gap is sized for the gap between cards; here it is also the space between
           the two stacked teams, so restore the original 1rem. */
        row-gap: 1rem;
    }

    /* Back to the pre-subgrid stacked spacing exactly (0.6rem after the title and before the
       badges box, 0.5rem between cards below): one column has nothing to line up across. */
    .live-team[b-hrw03cohdn] {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        grid-row: auto;
    }

    .live-player-list[b-hrw03cohdn] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Grid drops out entirely here in favour of two stacked flex rows -- .live-player-top and
       .live-player-bottom stop being display:contents (see their base rule above) and become the
       actual row containers, which is what lets row 2 (rank/form) size itself independently of
       row 1's narrow icon column. A shared grid-template-columns for both rows (the previous
       approach) forced column 1 to fit both the 2.4rem icon AND the much wider rank block
       (.live-rank-text alone has a 5rem min-width), which is exactly what read as "wraps under the
       icon, cramped and misaligned". */
    .live-player-card[b-hrw03cohdn] {
        display: flex;
        flex-direction: column;
        /* Overrides the base rule's align-items: center (meant for the desktop grid's row-axis
           centering). Left as center here, a column flex container reads it as the CROSS axis --
           horizontal -- which shrink-wrapped and centred .live-player-top instead of letting it
           stretch full width, so its icon sat away from the card's left edge instead of lining up
           with the rank emblem in the row below. */
        align-items: stretch;
        row-gap: 0.5rem;
    }

    .live-player-top[b-hrw03cohdn] {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    .live-player-bottom[b-hrw03cohdn] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.7rem;
    }

    .live-player-main[b-hrw03cohdn] {
        min-width: 0;
        flex: 1 1 auto;
    }
}
/* /Components/LiveMatchSection.razor.rz.scp.css */
.live-match-countdown[b-dfe8q8dsen] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
}

.countdown-head[b-dfe8q8dsen] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.countdown-stage[b-dfe8q8dsen] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.countdown-remaining[b-dfe8q8dsen] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
}

.countdown-track[b-dfe8q8dsen] {
    height: 6px;
    background: rgba(1, 10, 19, 0.75);
    border: 1px solid var(--border);
    overflow: hidden;
}

.countdown-fill[b-dfe8q8dsen] {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transition: width 1s linear;
}

.countdown-estimate-note[b-dfe8q8dsen] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.live-match-note[b-dfe8q8dsen] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* The lighter "Looking up name#tag..." line shown while a just-typed Riot ID is still debouncing
   or resolving -- dimmer than .live-match-note's other uses so it doesn't compete with an error
   or the searching state that follows it. */
.live-match-note-dim[b-dfe8q8dsen] {
    opacity: 0.7;
}

.live-match-searching[b-dfe8q8dsen] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* CSS-only ring spinner, coloured from this app's own hextech tokens rather than a generic
   grey -- gold and teal are the same two accents .countdown-fill already draws its gradient
   from, so this reads as part of the same panel rather than a bolted-on loading widget. */
.live-match-spinner[b-dfe8q8dsen] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-right-color: var(--teal);
    animation: live-match-spin-b-dfe8q8dsen 0.8s linear infinite;
}

@keyframes live-match-spin-b-dfe8q8dsen {
    to {
        transform: rotate(360deg);
    }
}

.live-match-searching-text[b-dfe8q8dsen] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.live-match-searching-sub[b-dfe8q8dsen] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.68rem;
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .live-match-spinner[b-dfe8q8dsen] {
        animation: none;
    }
}
/* /Components/Logo.razor.rz.scp.css */
.logo[b-aq6k0wiwrc] {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    filter: drop-shadow(0 0 10px rgba(10, 200, 185, 0.35)) drop-shadow(0 0 3px rgba(200, 170, 110, 0.5));
}

@media (max-width: 600px) {
    .logo[b-aq6k0wiwrc] {
        width: 3.25rem;
        height: 3.25rem;
    }
}
/* /Components/LuckWalkChart.razor.rz.scp.css */
.luck-walk[b-3ya040v6cc] {
    margin: 0;
}

.luck-walk svg[b-3ya040v6cc] {
    display: block;
    width: 100%;
    height: auto;
}

.luck-walk-band[b-3ya040v6cc] {
    fill: var(--text-dim);
    fill-opacity: 0.18;
}

.luck-walk-zero[b-3ya040v6cc] {
    stroke: var(--border);
    stroke-width: 1;
}

.luck-walk-line[b-3ya040v6cc] {
    stroke: var(--gold-bright);
    stroke-width: 2;
    stroke-linejoin: round;
}

.luck-walk-end[b-3ya040v6cc] {
    fill: var(--gold);
}

.luck-walk-axis[b-3ya040v6cc] {
    fill: var(--text-dim);
    font-size: 11px;
}
/* /Components/MatchCoachPanel.razor.rz.scp.css */
/* Existing tokens only (app.css). The site has a single dark theme -- app.css sets color-scheme: dark and
   defines no light palette -- so there is no second set of values to keep in step; every colour below
   is a token, so a future light theme re-colours this panel along with the rest of the site. */
.match-coach[b-glaxzg9ow1] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    line-height: 1.5;
}

.match-coach-graph[b-glaxzg9ow1] {
    margin: 0;
    /* Capped because the viewBox is only 400 units wide: stretched across a full-width desktop card the
       text would scale to ~20 px and the chart to several hundred px tall. At 480 px the scale is 1.2, so
       the 12-unit text reads ~14 px, while a 343 px phone column still gets ~10 px (343 / 400 * 12). */
    max-width: 480px;
}

/* width: 100% plus the viewBox is what lets the chart shrink to a 375 px phone with no horizontal scroll;
   the aspect ratio then keeps its height proportional. */
.match-coach-chart[b-glaxzg9ow1] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.match-coach-chart text[b-glaxzg9ow1] {
    font-family: var(--font-body);
    font-size: 12px;
    fill: var(--text-dim);
}

.match-coach-band[b-glaxzg9ow1] {
    fill: var(--text);
    opacity: 0.05;
}

.match-coach-band-label[b-glaxzg9ow1] {
    font-size: 12px;
    text-transform: uppercase;
}

/* Recessive grid: it must never compete with the two lines. */
.match-coach-grid[b-glaxzg9ow1] {
    stroke: var(--border);
    stroke-width: 0.6;
}

.match-coach-axis-y[b-glaxzg9ow1] {
    text-anchor: end;
}

.match-coach-axis-x[b-glaxzg9ow1] {
    text-anchor: middle;
}

.match-coach-line[b-glaxzg9ow1] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.match-coach-line-you[b-glaxzg9ow1] {
    stroke: var(--accent);
    stroke-width: 2.5;
}

/* A plain low-opacity fill rather than a gradient: a gradient needs a unique id per SVG, and several Coach
   panels can be open on one page. */
.match-coach-area[b-glaxzg9ow1] {
    fill: var(--accent);
    fill-opacity: 0.12;
    stroke: none;
}

/* Dashed and dim: the lane opponent is context for the player's line, and the dash keeps it distinguishable
   from the player's line without relying on colour. */
.match-coach-line-opponent[b-glaxzg9ow1] {
    stroke: var(--text-dim);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.match-coach-death[b-glaxzg9ow1] {
    fill: none;
    stroke: var(--danger);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.match-coach-objective[b-glaxzg9ow1] {
    stroke-width: 2.5;
}

/* --win / --lose (your team / the enemy), not --blue / --lose: on this page --blue and --lose name the blue and
   red SIDE (scoreboard captions), so --blue for "your team" would mislead a red-side player. */
.match-coach-objective-own[b-glaxzg9ow1] {
    stroke: var(--win);
}

.match-coach-objective-enemy[b-glaxzg9ow1] {
    stroke: var(--lose);
}

/* A surface-coloured ring so the dot stays legible where it overlaps the line. */
.match-coach-end-dot[b-glaxzg9ow1] {
    fill: var(--accent);
    stroke: var(--panel);
    stroke-width: 1.5;
}

/* Text wears a text token, never the series colour; the dot beside it carries the identity. */
.match-coach-chart text.match-coach-end-label[b-glaxzg9ow1] {
    fill: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.match-coach-legend[b-glaxzg9ow1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-dim);
    font-size: 0.75rem;
}

/* Chips, so each entry reads as one unit and the legend wraps cleanly on a phone. */
.match-coach-legend li[b-glaxzg9ow1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.1rem 0.55rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow-wrap: anywhere;
}

.match-coach-swatch[b-glaxzg9ow1] {
    display: inline-block;
    width: 1.1rem;
    border-top: 2px solid;
}

.match-coach-swatch-you[b-glaxzg9ow1] {
    border-top-color: var(--accent);
}

.match-coach-swatch-opponent[b-glaxzg9ow1] {
    border-top-color: var(--text-dim);
    border-top-style: dashed;
}

.match-coach-swatch-death[b-glaxzg9ow1] {
    color: var(--danger);
    font-weight: 700;
}

.match-coach-swatch-tick[b-glaxzg9ow1] {
    display: inline-block;
    width: 0.2rem;
    height: 0.8rem;
}

.match-coach-swatch-tick-own[b-glaxzg9ow1] {
    background: var(--win);
}

.match-coach-swatch-tick-enemy[b-glaxzg9ow1] {
    background: var(--lose);
}

.match-coach-caption[b-glaxzg9ow1] {
    margin: 0.5rem 0 0;
    color: var(--text-dim);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* The stat tiles: a row above the chart on a phone, a column above the legend on desktop (below). auto-fit
   lets 3-4 tiles share a phone row and wrap on a narrower one; min-width: 0 on the tiles keeps a long
   champion name from widening the grid. */
.match-coach-summary[b-glaxzg9ow1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.match-coach-stat[b-glaxzg9ow1] {
    min-width: 0;
    padding: 0.4rem 0.6rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.match-coach-stat dt[b-glaxzg9ow1] {
    color: var(--text-dim);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.match-coach-stat dd[b-glaxzg9ow1] {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The final score is the headline number, so it alone is large and wears the series colour. */
.match-coach-stat-main dd[b-glaxzg9ow1] {
    color: var(--accent);
    font-size: 1.6rem;
    line-height: 1.2;
}

.match-coach-stat-note[b-glaxzg9ow1] {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 500;
}

/* The sign carries the meaning; the colour only reinforces it. */
.match-coach-stat-delta[b-glaxzg9ow1] {
    margin-left: 0.25rem;
    font-size: 0.78rem;
}

.match-coach-stat-delta-up[b-glaxzg9ow1] {
    color: var(--good);
}

.match-coach-stat-delta-down[b-glaxzg9ow1] {
    color: var(--danger);
}

.match-coach-groups[b-glaxzg9ow1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* Desktop: chart on the left; summary tiles, legend and caption in a column beside it. The 480 px cap above
   leaves the rest of a wide card empty, and stacking these underneath only pushes the insights further
   down. 761px is the site's own phone breakpoint (the other .razor.css files use max-width: 760px for
   "phone"), so this panel switches layout at the same width as the profile page around it; below it nothing
   here applies and the stacked layout is untouched. A container query would track the card rather than the
   viewport, but the one container on this page (the scoreboard's scroll box) is not an ancestor of this
   panel, so a media query is the smaller change.

   The figure is a grid rather than a wrapper div around the side items because a <figcaption> must stay a
   direct child of its <figure>. The svg spans all four rows so the flexible last row absorbs its height and
   the side items keep their natural height, top-aligned. The 480 px cap moves from the figure to the
   chart's grid column, so the figure can be as wide as the chart plus the side column. The groups grid
   puts "What to improve" and "What went well" side by side; minmax(0, 1fr) lets a long title wrap
   instead of stretching its column. */
@media (min-width: 761px) {
    .match-coach-graph[b-glaxzg9ow1] {
        display: grid;
        grid-template-columns: minmax(0, 480px) minmax(10rem, 1fr);
        grid-template-rows: auto auto auto 1fr;
        column-gap: 1.5rem;
        max-width: none;
    }

    .match-coach-summary[b-glaxzg9ow1] {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .match-coach-chart[b-glaxzg9ow1] {
        grid-column: 1;
        grid-row: 1 / span 4;
    }

    .match-coach-legend[b-glaxzg9ow1] {
        grid-column: 2;
        grid-row: 2;
        margin: 0.75rem 0 0;
    }

    .match-coach-caption[b-glaxzg9ow1] {
        grid-column: 2;
        grid-row: 3;
        margin: 0.75rem 0 0;
    }

    .match-coach-groups[b-glaxzg9ow1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.match-coach-group[b-glaxzg9ow1] {
    min-width: 0;
}

.match-coach-group-heading[b-glaxzg9ow1] {
    margin: 0 0 0.6rem;
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Count of the group's rows, so the heading says how many without a separate tile. */
.match-coach-group-count[b-glaxzg9ow1] {
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.68rem;
    letter-spacing: normal;
}

.match-coach-empty[b-glaxzg9ow1] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.match-coach-cards[b-glaxzg9ow1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The left rule carries the tone (warn vs good); the group heading above already says it in words, so the
   colour is reinforcement rather than the only cue. */
.match-coach-card[b-glaxzg9ow1] {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 6px;
}

.match-coach-card-improve[b-glaxzg9ow1] {
    border-left-color: var(--warn);
}

.match-coach-card-highlight[b-glaxzg9ow1] {
    border-left-color: var(--good);
}

/* The whole row is the click target. list-style: none plus the WebKit pseudo-element hides the native
   marker in every engine; the chevron below replaces it (the tip path's Later rows reuse it too). */
.match-coach-card > details > summary[b-glaxzg9ow1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
}

.match-coach-card > details > summary[b-glaxzg9ow1]::-webkit-details-marker {
    display: none;
}

.match-coach-card > details > summary:hover[b-glaxzg9ow1] {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.match-coach-card > details > summary:focus-visible[b-glaxzg9ow1] {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

/* Drawn with borders so there is no glyph to load or mis-align; margin-left: auto pins it to the row's
   right edge, and the 45deg turn points it down, 225deg up once open. */
.match-coach-card > details > summary[b-glaxzg9ow1]::after,
.match-coach-later-subject > summary[b-glaxzg9ow1]::after {
    content: "";
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    margin: 0 0.2rem 0.2rem auto;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.match-coach-card > details[open] > summary[b-glaxzg9ow1]::after,
.match-coach-later-subject[open] > summary[b-glaxzg9ow1]::after {
    margin-bottom: 0;
    transform: rotate(225deg);
}

/* A round badge tinted by tone, so the icon reads as a status chip rather than a loose emoji. */
.match-coach-card-icon[b-glaxzg9ow1] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-size: 1rem;
}

.match-coach-card-improve .match-coach-card-icon[b-glaxzg9ow1] {
    background: color-mix(in srgb, var(--warn) 22%, transparent);
}

.match-coach-card-highlight .match-coach-card-icon[b-glaxzg9ow1] {
    background: color-mix(in srgb, var(--good) 22%, transparent);
}

.match-coach-card-title[b-glaxzg9ow1] {
    min-width: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.match-coach-card-phase[b-glaxzg9ow1] {
    flex-shrink: 0;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Indented to line up under the title (padding + 1.8rem badge + gap) so the detail reads as belonging to
   the row above it. */
.match-coach-card-body[b-glaxzg9ow1] {
    min-width: 0;
    padding: 0 0.65rem 0.65rem calc(0.65rem + 1.8rem + 0.6rem);
}

/* overflow-wrap: body { overflow-x: clip } silently crops anything that does not shrink, so a long
   unbroken word in a detail sentence has to wrap rather than widen the card. */
.match-coach-card-detail[b-glaxzg9ow1] {
    max-width: 70ch;
    margin: 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* The curated tip under a card's detail, set apart as a callout: the gold rule says "advice", and the
   panel-alt fill separates it from the card's --panel surface. */
.match-coach-card-tip[b-glaxzg9ow1] {
    max-width: 70ch;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    background: var(--panel-alt);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.match-coach-card-tip-icon[b-glaxzg9ow1] {
    margin-right: 0.4rem;
}

.match-coach-card-tip strong[b-glaxzg9ow1] {
    color: var(--text);
    font-weight: 600;
}

.match-coach-tips[b-glaxzg9ow1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.match-coach-tips .match-coach-group-heading[b-glaxzg9ow1] {
    margin-bottom: 0;
}

/* Pills are radio inputs, so they only mean something when CSS can switch the panels with :has() (see the
   @supports block). Without it every panel shows stacked and the pills are hidden, because pills that
   switch nothing would mislead. */
.match-coach-tip-pills[b-glaxzg9ow1] {
    display: none;
}

.match-coach-tip-pill[b-glaxzg9ow1] {
    position: relative;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.78rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* The standard visually-hidden clip, not display: none, so the radio stays focusable and arrow keys move
   between pills natively. */
.match-coach-tip-pill input[b-glaxzg9ow1] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.match-coach-tip-group[b-glaxzg9ow1] {
    min-width: 0;
    padding: 0.65rem 0.8rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.match-coach-tips-heading[b-glaxzg9ow1] {
    margin: 0 0 0.4rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.match-coach-tip-list[b-glaxzg9ow1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-coach-more > .match-coach-tip-list[b-glaxzg9ow1] {
    margin-top: 0.5rem;
}

/* A small gold dot instead of the default disc. */
.match-coach-tip-line[b-glaxzg9ow1] {
    position: relative;
    max-width: 70ch;
    padding-left: 1rem;
    color: var(--text-dim);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.match-coach-tip-line[b-glaxzg9ow1]::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.2rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--gold);
}

/* A panel spans the whole card on a wide screen, but lines cap at 70ch, which leaves the right half empty
   and makes a long "Show N more" a very tall single column. Two columns use the width; the column width
   then does the capping, so the 70ch limit is dropped. Multi-column flow rather than a grid because a grid
   aligns rows: a tall tip beside a short one would leave a hole under the short one, whereas columns just
   fill top to bottom. break-inside keeps a tip whole; the margin replaces the flex gap, which does not
   apply to a block.
   Scoped to lists that are direct children of the group (the flat layout). Lists inside a path card are
   already half the panel wide, because the cards sit in two columns from 700px, so splitting them again
   would leave columns a few words wide; they keep the single-column flex list above. The key tip's list is
   a single line inside a wrapper, so it is excluded the same way. */
@media (min-width: 1100px) {
    .match-coach-tip-group > .match-coach-tip-list[b-glaxzg9ow1],
    .match-coach-tip-group > .match-coach-more > .match-coach-tip-list[b-glaxzg9ow1] {
        display: block;
        columns: 2;
        column-gap: 1.5rem;
    }

    .match-coach-tip-group > .match-coach-tip-list > .match-coach-tip-line[b-glaxzg9ow1],
    .match-coach-tip-group > .match-coach-more > .match-coach-tip-list > .match-coach-tip-line[b-glaxzg9ow1] {
        max-width: none;
        margin-bottom: 0.5rem;
        break-inside: avoid;
    }

    .match-coach-tip-group > .match-coach-tip-list > .match-coach-tip-line:last-child[b-glaxzg9ow1],
    .match-coach-tip-group > .match-coach-more > .match-coach-tip-list > .match-coach-tip-line:last-child[b-glaxzg9ow1] {
        margin-bottom: 0;
    }
}

/* The "How to" link after a tip. ::deep because the card tip's body is a MarkupString, whose elements carry
   no scope attribute. Gold on the dark panel clears 4.5:1; underlined so it is not colour alone. */
.match-coach-tip-line[b-glaxzg9ow1]  .match-coach-tip-guide,
.match-coach-card-tip[b-glaxzg9ow1]  .match-coach-tip-guide {
    margin-left: 0.3rem;
    color: var(--gold);
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.match-coach-tip-line[b-glaxzg9ow1]  .match-coach-tip-guide:hover,
.match-coach-tip-line[b-glaxzg9ow1]  .match-coach-tip-guide:focus-visible,
.match-coach-card-tip[b-glaxzg9ow1]  .match-coach-tip-guide:hover,
.match-coach-card-tip[b-glaxzg9ow1]  .match-coach-tip-guide:focus-visible {
    color: var(--gold-bright);
}

/* This game's numbers, as a small caption above the advice they motivate. */
.match-coach-tip-reason[b-glaxzg9ow1] {
    display: block;
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.match-coach-more[b-glaxzg9ow1] {
    margin-top: 0.4rem;
}

/* "From this game": a tip whose trigger fired. A pill in the accent colour, plus brighter text on the line
   itself, so the important tips stand out wherever they sit in the list. */
.match-coach-tip-badge[b-glaxzg9ow1] {
    display: inline-block;
    margin-bottom: 0.15rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.match-coach-tip-line-triggered[b-glaxzg9ow1] {
    color: var(--text);
}

/* The key tip: the first line of a list, set in a tinted block with an accent rule. The gold dot that marks
   an ordinary line is dropped because the star takes its place. */
.match-coach-key-tip[b-glaxzg9ow1] {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
}

.match-coach-key-star[b-glaxzg9ow1] {
    flex: none;
    color: var(--gold);
    font-size: 0.82rem;
    line-height: 1.5;
}

.match-coach-key-tip .match-coach-tip-list[b-glaxzg9ow1] {
    flex: 1;
    min-width: 0;
}

.match-coach-key-tip .match-coach-tip-line[b-glaxzg9ow1] {
    padding-left: 0;
    color: var(--text);
}

.match-coach-key-tip .match-coach-tip-line[b-glaxzg9ow1]::before {
    display: none;
}

/* In the path only step 1 is "important": its cards get a gold-tinted border and keep the gold key-tip block.
   Later steps keep the star but swap the tint for a neutral rule, so their key tip reads as "first of this
   subject". Scoped by step class so the flat list (5 lines or fewer) keeps the gold key tip. */
.match-coach-step-1 .match-coach-subject[b-glaxzg9ow1] {
    border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
}

.match-coach-step:not(.match-coach-step-1) .match-coach-key-tip[b-glaxzg9ow1] {
    background: none;
    border-left-color: var(--border);
}

/* A flat group's key tip sits right under the heading, so it needs no extra top margin there. */
.match-coach-tips-heading + .match-coach-key-tip[b-glaxzg9ow1] {
    margin-top: 0;
}

.match-coach-tip-group > .match-coach-key-tip + .match-coach-tip-list[b-glaxzg9ow1] {
    margin-top: 0.5rem;
}

.match-coach-count[b-glaxzg9ow1] {
    flex: none;
    margin-left: 0.25rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 600;
}

/* The path: numbered badges in a left gutter, joined by a 2px line drawn from each badge down to the next. */
.match-coach-path[b-glaxzg9ow1] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-coach-step[b-glaxzg9ow1] {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-bottom: 1rem;
}

.match-coach-step:last-child[b-glaxzg9ow1] {
    padding-bottom: 0;
}

/* Absolutely positioned, so the grid does not give it a cell. The z-index keeps the badge above the line. */
.match-coach-step:not(:last-child)[b-glaxzg9ow1]::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 0;
    left: calc(0.875rem - 1px);
    width: 2px;
    background: var(--border);
}

.match-coach-step-num[b-glaxzg9ow1] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--gold-dark);
    border-radius: 50%;
    background: var(--panel);
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Step 1 is where to begin, so it is the only filled badge and its line is accent-tinted. */
.match-coach-step-1 > .match-coach-step-num[b-glaxzg9ow1] {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--bg);
}

.match-coach-step-1:not(:last-child)[b-glaxzg9ow1]::before {
    background: color-mix(in srgb, var(--gold) 45%, var(--border));
}

/* Later is optional reading, so it recedes. */
.match-coach-step-later > .match-coach-step-num[b-glaxzg9ow1] {
    border-color: var(--border);
    color: var(--text-dim);
}

.match-coach-step-body[b-glaxzg9ow1] {
    min-width: 0;
}

.match-coach-step-title[b-glaxzg9ow1] {
    margin: 0.2rem 0 0.5rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.match-coach-step-later .match-coach-step-title[b-glaxzg9ow1] {
    color: var(--text-dim);
}

.match-coach-subjects[b-glaxzg9ow1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .match-coach-subjects[b-glaxzg9ow1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.match-coach-subject[b-glaxzg9ow1] {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.match-coach-subject-head[b-glaxzg9ow1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
}

.match-coach-subject-name[b-glaxzg9ow1] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.match-coach-subject-head .match-coach-count[b-glaxzg9ow1] {
    margin-left: auto;
}

/* flex: none so a long subject name wraps instead of squeezing the emoji. */
.match-coach-subject-icon[b-glaxzg9ow1] {
    flex: none;
}

/* Below 700px the gutter, card padding and key-tip padding all eat into a ~307px panel, so each shrinks to
   leave the tip text more width. The connector's left offset is half the badge (0.75rem) so it stays centred. */
@media (max-width: 699px) {
    .match-coach-step[b-glaxzg9ow1] {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        column-gap: 0.5rem;
    }

    .match-coach-step:not(:last-child)[b-glaxzg9ow1]::before {
        top: 1.5rem;
        left: calc(0.75rem - 1px);
    }

    .match-coach-step-num[b-glaxzg9ow1] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .match-coach-subject[b-glaxzg9ow1] {
        padding: 0.5rem 0.55rem;
    }

    .match-coach-key-tip[b-glaxzg9ow1] {
        padding: 0.35rem 0.45rem;
    }
}

/* Later subjects are compact rows that open, not cards. They share the cards' two-column grid; start
   alignment stops an opened row from stretching its neighbour to the same height. The summary's chevron
   (above) pins right, so the count chip sits next to the name here. */
.match-coach-later-subjects[b-glaxzg9ow1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    align-items: start;
}

@media (min-width: 700px) {
    .match-coach-later-subjects[b-glaxzg9ow1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.match-coach-later-subject[b-glaxzg9ow1] {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.match-coach-later-subject > summary[b-glaxzg9ow1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    list-style: none;
}

.match-coach-later-subject > summary[b-glaxzg9ow1]::-webkit-details-marker {
    display: none;
}

.match-coach-later-subject > summary:focus-visible[b-glaxzg9ow1] {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
}

.match-coach-later-subject > .match-coach-tip-list[b-glaxzg9ow1] {
    padding: 0.2rem 0.7rem 0.6rem;
}

.match-coach-more > summary[b-glaxzg9ow1] {
    cursor: pointer;
    color: var(--gold);
    font-size: 0.82rem;
}

/* With :has() the pills drive the panels: all panels hide and the one whose radio is checked shows. The
   four values are the fixed set of group keys. Engines without :has() skip this block and keep the
   stacked layout above. */
@supports selector(:has(*)) {
    .match-coach-tip-pills[b-glaxzg9ow1] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .match-coach-tip-pill:hover[b-glaxzg9ow1] {
        color: var(--text);
        border-color: var(--gold-dark);
    }

    .match-coach-tip-pill:has(input:checked)[b-glaxzg9ow1] {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--bg);
        font-weight: 600;
    }

    .match-coach-tip-pill:has(input:focus-visible)[b-glaxzg9ow1] {
        outline: 2px solid var(--gold-bright);
        outline-offset: 2px;
    }

    .match-coach-tip-group[b-glaxzg9ow1] {
        display: none;
    }

    .match-coach-tips:has(input[value="as"]:checked) .match-coach-tip-group[data-tips="as"][b-glaxzg9ow1],
    .match-coach-tips:has(input[value="opponent"]:checked) .match-coach-tip-group[data-tips="opponent"][b-glaxzg9ow1],
    .match-coach-tips:has(input[value="killer"]:checked) .match-coach-tip-group[data-tips="killer"][b-glaxzg9ow1],
    .match-coach-tips:has(input[value="role"]:checked) .match-coach-tip-group[data-tips="role"][b-glaxzg9ow1] {
        display: block;
    }
}

.match-coach-unavailable p[b-glaxzg9ow1] {
    margin: 0 0 0.5rem;
    color: var(--warn);
    font-size: 0.85rem;
}

.match-coach-retry[b-glaxzg9ow1] {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    background: none;
    color: var(--gold);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.match-coach-retry:hover[b-glaxzg9ow1] {
    color: var(--gold-bright);
    border-color: var(--gold);
}
/* /Components/MatchScoreboard.razor.rz.scp.css */
/* The expanded match scoreboard (MatchScoreboard.razor), split out of SummonerProfilePage.razor.css when
   the scoreboards stopped being rendered inside the page. Scoped CSS carries the scope attribute of the
   component that renders an element, so every rule that styles the scoreboard's markup has to live here.

   The champion-link and player-link rules below are copies of the page's: the summary row and the
   scoreboard both link champion portraits and player names, and each file styles the elements its own
   component renders. */

/* Wraps a champion icon in its build-page link. The icon already carries the visual; the link must
   not add an underline, a link colour or a line-height box around it, and needs its own focus ring
   because the summary's focus ring is drawn around the whole row, not around the icon a keyboard
   user has tabbed to. */
.summoner-profile-champion-link[b-ico7w9bcka] {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 3px;
}

.summoner-profile-champion-link:focus-visible[b-ico7w9bcka] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.summoner-profile-scoreboard-portrait .summoner-profile-champion-link[b-ico7w9bcka] {
    border-radius: 50%;
}

/* Inherits the name's colour and weight so a linked name looks like a plain one until hovered. */
.summoner-profile-player-link[b-ico7w9bcka] {
    color: inherit;
    text-decoration: none;
}

.summoner-profile-player-link:hover[b-ico7w9bcka],
.summoner-profile-player-link:focus-visible[b-ico7w9bcka] {
    text-decoration: underline;
}

/* Absent entirely for a null ChampionLevel (see the .razor file's own comment) -- never a
   fabricated badge showing level 0. The same badge box as the profile page's
   .summoner-profile-match-level (the summary row's, scaled up for its 40px portrait), repeated here
   because the two live in different scoped files; the wrapper it pins to is .summoner-profile-scoreboard-portrait. */
.summoner-profile-scoreboard-level[b-ico7w9bcka] {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.15rem;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--gold-dark);
    text-align: center;
    line-height: 0.95rem;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold-bright);
}

/* An inset surface rather than a bare top border -- the expanded scoreboard reads as a panel set
   into the row, not just a rule with a table stacked under it. */
.summoner-profile-scoreboard[b-ico7w9bcka] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 10px rgba(1, 10, 19, 0.5);
}

/* Permanent scroll container, not a breakpoint-gated one -- overflow-x on a display: table box is
   ignored (it computes to visible), which is why the table itself can never own its own scrolling.
   A fixed pixel breakpoint here would only be correct for the row width this pass shipped with; the
   next column that grows re-opens the exact silent-clipping trap body { overflow-x: clip }
   creates (measured, not screenshotted: a clipped table has no scrollbar and no visible symptom).
   Wrapping every table in its own scroll container, always, removes the breakpoint as a variable
   entirely -- the table renders at its natural width at every viewport, and this div scrolls
   whenever that width doesn't fit, full stop.

   position: relative makes this the containing block for absolutely positioned descendants. Without
   it a visually-hidden header span (the Wards header's .visually-hidden is position: absolute) fell
   through to <body> as its offsetParent, so it escaped this scroll container's clipping and
   stretched the whole page sideways -- measured at 390px, and the SID column pushed it further. */
.summoner-profile-scoreboard-table-scroll[b-ico7w9bcka] {
    position: relative;
    overflow-x: auto;
    min-width: 0;
}

/* This table sets no accent of its own -- --team-accent (set per table by the .razor file: --blue
   for team 100, --lose for team 200) is consumed below, by the caption and the header rule only.
   Accents only, no background wash, so the win/loss tint on the collapsed row above stays the one
   background signal on this card. */
.summoner-profile-scoreboard-table[b-ico7w9bcka] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-weight: 400;
}

.summoner-profile-scoreboard-table caption[b-ico7w9bcka] {
    text-align: left;
    padding: 0.5rem 0 0.25rem 0.5rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--team-accent, var(--gold));
}

.summoner-profile-scoreboard-table th[b-ico7w9bcka],
.summoner-profile-scoreboard-table td[b-ico7w9bcka] {
    padding: 0.3rem 0.4rem;
    text-align: left;
    color: var(--text-dim);
    white-space: nowrap;
}

.summoner-profile-scoreboard-table th[b-ico7w9bcka] {
    border-bottom: 2px solid var(--team-accent, var(--border));
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-player[b-ico7w9bcka] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: normal;
}

/* Wraps the portrait so the level badge below can pin itself to a corner of exactly this element,
   not the whole (much wider) player cell. */
.summoner-profile-scoreboard-portrait[b-ico7w9bcka] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.summoner-profile-scoreboard-portrait img[b-ico7w9bcka] {
    border-radius: 50%;
    flex-shrink: 0;
}

.summoner-profile-scoreboard-spells[b-ico7w9bcka],
.summoner-profile-scoreboard-runes[b-ico7w9bcka] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.summoner-profile-scoreboard-spells img[b-ico7w9bcka],
.summoner-profile-scoreboard-runes img[b-ico7w9bcka] {
    border-radius: 3px;
}

/* Wraps the name and rank line as a stacked block -- see the .razor file's own comment on this
   span for why HEIGHT, not width, is what this cell is allowed to grow by. min-width: 0 is
   required because this is a flex ITEM inside .summoner-profile-scoreboard-player's own flex row:
   a flex item's default min-width is its content's min-content, which would silently push the row
   wider instead of letting the name/rank text wrap -- the exact trap
   .summoner-profile-match summary > *'s own min-width: 0 rule already guards against elsewhere on
   this page. */
.summoner-profile-scoreboard-name-rank[b-ico7w9bcka] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.summoner-profile-scoreboard-name[b-ico7w9bcka] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.summoner-profile-scoreboard-rank[b-ico7w9bcka] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    color: var(--text-dim);
}

/* ::deep to reach inside RankEmblem: it's a child component, so this stylesheet's own scope
   attribute never lands on its rendered <img> -- an unqualified ".rank-emblem" rule here would
   silently do nothing (this exact mistake already shipped a production bug in the nav). Sized down
   from RankEmblem's own 2.75rem default to fit a table row instead of the queue cards it was
   originally built for -- bumped from the previous hex badge's 0.85rem (13.6px) to 1.25rem (20px):
   at the old size the winged crest was a coloured smudge and Iron vs Bronze were indistinguishable,
   and width: auto (not a second fixed dimension) keeps the art's 1.356:1 aspect from being squashed,
   same reasoning as RankEmblem.razor.css's own default. */
.summoner-profile-scoreboard-rank[b-ico7w9bcka]  .rank-emblem {
    height: 1.25rem;
    width: auto;
}

/* Dim on top of the already-dim .summoner-profile-scoreboard-rank text colour -- "genuinely
   unranked" must read as visibly less prominent than a real tier, never mistaken for one. */
.summoner-profile-scoreboard-rank-unranked[b-ico7w9bcka] {
    opacity: 0.7;
}

/* The SID cell stacks the score over the rank chip (or the muted ordinal). Like the table's
   other data cells it inherits nowrap (only the player cell opts out), so its width is the chip's
   natural width and the table scroll container above absorbs any overflow at phone width, rather
   than the chip wrapping and growing the row. */
.summoner-profile-scoreboard-sid[b-ico7w9bcka] {
    min-width: 5.5rem;
}

.summoner-profile-scoreboard-sid-score[b-ico7w9bcka] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-sid-rank[b-ico7w9bcka] {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim);
}

.summoner-profile-scoreboard-lane[b-ico7w9bcka] {
    min-width: 5.5rem;
}

/* nowrap so "10.0 – 0.0" never breaks across lines at the widest score pair. */
.summoner-profile-scoreboard-lane-score[b-ico7w9bcka] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text);
}

/* The lane's word (GAP / DIFF / EVEN) under the score; colour is the outcome for THIS player, the word is the
   same for both sides of the lane. */
/* The chip is a direct flex item of .hover-card, which is a column inline-flex with align-items: inherit (the
   cell's default, stretch), so it would be stretched to the score's width. align-self hugs it to its word. */
.summoner-profile-scoreboard-lane-chip[b-ico7w9bcka] {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0 0.3rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}

.summoner-profile-scoreboard-lane-chip-won[b-ico7w9bcka] { color: var(--teal); }
.summoner-profile-scoreboard-lane-chip-even[b-ico7w9bcka] { color: var(--gold); }
.summoner-profile-scoreboard-lane-chip-lost[b-ico7w9bcka] { color: var(--lose); }

/* A blowout is filled like the expanded-match stamp. Only a won or lost lane can be one, never an EVEN. */
.summoner-profile-scoreboard-lane-chip-gap[b-ico7w9bcka] { color: var(--bg); }
.summoner-profile-scoreboard-lane-chip-gap.summoner-profile-scoreboard-lane-chip-won[b-ico7w9bcka] {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 0 8px color-mix(in srgb, var(--teal) 55%, transparent);
}
.summoner-profile-scoreboard-lane-chip-gap.summoner-profile-scoreboard-lane-chip-lost[b-ico7w9bcka] {
    background: var(--lose);
    border-color: var(--lose);
    box-shadow: 0 0 8px color-mix(in srgb, var(--lose) 55%, transparent);
}

/* The SID hover card is anchored (see HoverCard.razor.css) so the scroll container above cannot clip it.
   Only a browser without anchor positioning falls back to the absolute panel, which this scroller's
   overflow-x: auto clips; there the first two rows open DOWNWARD so at least their tops are not lost.
   ::deep because the panel belongs to HoverCard's own scoped markup. */
@supports not (position-area: top) {
    .summoner-profile-scoreboard-table tbody tr:nth-child(-n+2) .summoner-profile-scoreboard-sid[b-ico7w9bcka]  .hover-card-panel,
    .summoner-profile-scoreboard-table tbody tr:nth-child(-n+2) .summoner-profile-scoreboard-lane[b-ico7w9bcka]  .hover-card-panel {
        bottom: auto;
        top: calc(100% + 8px);
    }
}

/* Smaller chip than the summary row's so the cell stays compact, same ::deep reasoning as above. */
.summoner-profile-scoreboard-sid[b-ico7w9bcka]  .badge-chip {
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
}

/* Emphasis deliberately flips from the collapsed summary row: the calculated KDA ratio is now the
   prominent number (readers judge a game by that ratio, not the raw kill count) and the raw K/D/A
   recedes to a dim subtext -- the opposite of .summoner-profile-match-kda-numbers/-ratio above. */
.summoner-profile-scoreboard-kda-numbers[b-ico7w9bcka] {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-dim);
}

.summoner-profile-scoreboard-kda-ratio[b-ico7w9bcka] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-kda-high[b-ico7w9bcka] {
    color: var(--good);
    font-weight: 700;
}

.summoner-profile-scoreboard-cs-count[b-ico7w9bcka] {
    display: block;
    font-size: 0.72rem;
}

.summoner-profile-scoreboard-cs-rate[b-ico7w9bcka] {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim);
}

.summoner-profile-scoreboard-vision[b-ico7w9bcka],
.summoner-profile-scoreboard-wards[b-ico7w9bcka] {
    font-size: 0.68rem;
}

/* The cell stays a table cell; the layout lives on the inner .summoner-profile-scoreboard-build. The six items
   are an explicit 3x2 grid with the trinket in its own column beside them, never a wrapping flow: the table is
   wider than its scroller at phone width, so a wrapping cell would shrink to one icon and stack them, making
   every row ~160px tall. */
.summoner-profile-scoreboard-build[b-ico7w9bcka] {
    display: inline-grid;
    grid-template-columns: repeat(3, 20px) 20px;
    grid-template-rows: 20px 20px;
    gap: 2px;
}

/* Slots 0-5 auto-place row by row into the first three columns; the trinket (slot 6) spans both rows. */
.summoner-profile-scoreboard-trinket[b-ico7w9bcka] {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    margin-left: 4px;
}

.summoner-profile-scoreboard-items img[b-ico7w9bcka] {
    display: block;
    border-radius: 3px;
}

/* Own class rather than reusing .summoner-profile-match-item-empty -- that placeholder is sized for
   the 24px summary row, this table's slots are smaller (20px). A null entry must still render this
   placeholder, never nothing: MatchParticipant.ItemIds is exactly seven slots (six items + trinket)
   where 0 is a real empty slot, and dropping it would shift every later slot left and move the
   trinket into an item slot. */
.summoner-profile-scoreboard-item-empty[b-ico7w9bcka] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* Two bars side by side, not stacked -- the Damage column stays one column, just wider content.
   Fill width is set inline per row (see the .razor file), the same idiom ResultPanel.razor uses
   for its own band segments. */
.summoner-profile-damage-bars[b-ico7w9bcka] {
    display: flex;
    gap: 0.3rem;
    min-width: 8rem;
}

.summoner-profile-damage-bar[b-ico7w9bcka] {
    position: relative;
    flex: 1;
    min-width: 3.5rem;
    height: 1.1rem;
    background: color-mix(in srgb, var(--border) 70%, transparent);
    overflow: hidden;
}

/* Dealt and taken are told apart by fill colour again (--bar-dealt / --bar-taken, defined in
   app.css) -- one hue per bar, warm bronze vs cool teal, restoring the at-a-glance distinction the
   old shared pale fill gave up. Both tokens are dark by design (see app.css's own remarks): that's
   what lets the value text below paint straight onto the fill with nothing layered behind it. */
.summoner-profile-damage-bar-dealt .summoner-profile-damage-bar-fill[b-ico7w9bcka] {
    position: absolute;
    inset: 0;
    height: 100%;
    background: var(--bar-dealt);
}

.summoner-profile-damage-bar-taken .summoner-profile-damage-bar-fill[b-ico7w9bcka] {
    position: absolute;
    inset: 0;
    height: 100%;
    background: var(--bar-taken);
}

/* No scrim behind this text -- both fills are dark enough to carry it directly: --text over
   --bar-dealt and over --bar-taken each measure ~5.7:1, and the unfilled track is darker still, so
   the number stays readable in both regions with nothing layered behind it. That's a hard
   constraint on any future bar colour, not just these two: --text stays >=4.5:1 only up to about
   0.138 relative luminance, so a bar fill lighter than that will make this text unreadable again --
   see app.css's own remarks on the two tokens before changing either. */
.summoner-profile-damage-bar-value[b-ico7w9bcka] {
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.1rem;
    color: var(--text);
    white-space: nowrap;
}

/* A null damage taken (not yet backfilled) renders this dash with no fill at all, never a
   zero-width bar -- a zero-width bar would read as "took no damage", which is a different,
   fabricated claim (see MatchParticipant.DamageTaken's own doc). */
.summoner-profile-damage-bar-empty[b-ico7w9bcka] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.75rem;
}

/* The subject is identified by the ROW now -- a stronger gold tint plus a gold left edge -- not by
   bolder text: every player name is already var(--text) at weight 600 (see
   .summoner-profile-scoreboard-name), so bolding the subject's text on top of that would be the
   only thing left to distinguish it, which is exactly what this replaces. box-shadow, not
   border-left, because border-collapse on the table would otherwise swallow a plain border on tr. */
.summoner-profile-scoreboard-subject[b-ico7w9bcka] {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    box-shadow: inset 3px 0 0 var(--gold);
}

/* Sits between the two tables (see the .razor file's own placement comment). Both bars split one
   track proportionally rather than stacking two independent gauges, so the two teams read as
   directly opposed, the way the reference scoreboard's own comparison bar does. */
.summoner-profile-team-compare[b-ico7w9bcka] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border: 1px solid var(--border);
}

.summoner-profile-team-compare-row[b-ico7w9bcka] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summoner-profile-team-compare-value[b-ico7w9bcka] {
    flex-shrink: 0;
    min-width: 2.25rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.summoner-profile-team-compare-value-blue[b-ico7w9bcka] {
    text-align: right;
    color: var(--blue);
}

.summoner-profile-team-compare-value-red[b-ico7w9bcka] {
    text-align: left;
    color: var(--lose);
}

/* One track, two fills whose widths always sum to exactly 100% by construction -- the .razor file
   rounds blue's TeamSharePercent share once and gives red the exact complement, rather than
   rounding both sides independently (which can disagree by a point, e.g. a 101/99 split is
   50.5%/49.5%, and independent rounding gives 51%/50%). Blue and red meet wherever the split
   falls, rather than two bars measured against independent scales. */
.summoner-profile-team-compare-track[b-ico7w9bcka] {
    flex: 1;
    min-width: 0;
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    background: var(--border);
}

.summoner-profile-team-compare-fill-blue[b-ico7w9bcka] {
    background: var(--blue);
}

.summoner-profile-team-compare-fill-red[b-ico7w9bcka] {
    background: var(--lose);
}

.summoner-profile-team-compare-label[b-ico7w9bcka] {
    margin: 0 0 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--text-dim);
}

.summoner-profile-team-compare-objectives[b-ico7w9bcka] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

.summoner-profile-team-compare-objectives-side[b-ico7w9bcka] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.summoner-profile-team-compare-objective[b-ico7w9bcka] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* The "couldn't load" answer (Match is null). The slot's own surface only shows until the fragment
   loads (MatchTabs.razor.css), so the error brings its own. The message and retry button reuse the
   .match-tabs-error / .match-tabs-retry rules, which reach it through the slot with ::deep. */
.match-scoreboard-unavailable[b-ico7w9bcka] {
    padding: 0.65rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border-top: 1px solid var(--border);
}
/* /Components/MatchTabs.razor.rz.scp.css */
/* The tab strip sits directly under the match summary, so it takes over the inset scoreboard's top rule
   and surface (MatchScoreboard.razor.css's .summoner-profile-scoreboard): the strip reads as the
   head of that same panel, and the Teams panel below it keeps the scoreboard's own styling untouched. */
.match-tabs-list[b-lw061y0kyy] {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border-top: 1px solid var(--border);
}

.match-tabs-tab[b-lw061y0kyy] {
    appearance: none;
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.match-tabs-tab:hover[b-lw061y0kyy] {
    color: var(--text);
}

/* Gold even when unselected: Coach is the new tab, and the dim text other tabs use let it disappear
   beside Teams. These must stay ABOVE the [aria-selected="true"] rule below: `.a:hover` and `.a[attr]`
   have equal specificity, so source order is what keeps a selected, hovered Coach tab gold-bright. */
.match-tabs-tab-coach[b-lw061y0kyy] {
    color: var(--gold);
}

.match-tabs-tab-coach:hover[b-lw061y0kyy] {
    color: var(--gold-bright);
}

/* Same look as .app-nav-new-pill in Layout/MainLayout.razor.css, sized to sit beside the tab label.
   Colour is set explicitly because the tab's own colour (gold, gold-bright on hover or selected) would
   otherwise bleed into the pill text, which must stay legible on its teal fill. */
.match-tabs-new-pill[b-lw061y0kyy] {
    flex-shrink: 0;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--teal);
    background: var(--teal);
    color: var(--panel);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The selected state is read from aria-selected rather than a second class, so the visual state and the
   state a screen reader announces can never drift apart. */
.match-tabs-tab[aria-selected="true"][b-lw061y0kyy] {
    color: var(--gold-bright);
    border-bottom-color: var(--accent);
}

.match-tabs-tab:focus-visible[b-lw061y0kyy] {
    outline: 2px solid var(--gold-bright);
    outline-offset: -2px;
}

/* `hidden` is overridden by any author display rule; restating it here keeps a future display: flex on
   a panel from silently un-hiding the inactive tab. */
.match-tabs-panel[hidden][b-lw061y0kyy] {
    display: none;
}

/* The Coach panel gets the same inset surface the scoreboard has, so switching tabs does not change the
   shape of the box. */
.match-tabs-coach[b-lw061y0kyy] {
    padding: 0.65rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    box-shadow: inset 0 1px 10px rgba(1, 10, 19, 0.5);
}

.match-tabs-loading[b-lw061y0kyy] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Until the scoreboard fragment lands, the slot wears the same inset surface the scoreboard brings with it
   (MatchScoreboard.razor.css), so expanding a row does not flash an unstyled line before the panel
   appears. match-tabs.js sets data-fragment-loaded once the fragment is in; from then on the fragment's
   own root supplies the surface, and a second one here would double the padding. */
.match-scoreboard-slot:not([data-fragment-loaded])[b-lw061y0kyy] {
    padding: 0.65rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 10px rgba(1, 10, 19, 0.5);
}

/* ::deep because match-tabs.js creates this message with createElement, so it carries no scope
   attribute of its own; the panel or slot (which does) is the scoped ancestor. The scoreboard
   fragment's own "unavailable" answer reuses these classes for the same reason. */
.match-tabs-coach[b-lw061y0kyy]  .match-tabs-error,
.match-scoreboard-slot[b-lw061y0kyy]  .match-tabs-error {
    margin: 0 0 0.5rem;
    color: var(--warn);
    font-size: 0.85rem;
}

.match-tabs-coach[b-lw061y0kyy]  .match-tabs-retry,
.match-scoreboard-slot[b-lw061y0kyy]  .match-tabs-retry {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    background: none;
    color: var(--gold);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.match-tabs-coach[b-lw061y0kyy]  .match-tabs-retry:hover,
.match-scoreboard-slot[b-lw061y0kyy]  .match-tabs-retry:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
}
/* /Components/MeOrTeamVerdict.razor.rz.scp.css */
.mot[b-b7bq2vjybg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem 1.25rem;
    border: 1px solid var(--gold-deep);
    background: radial-gradient(ellipse at 50% 0%, var(--bg-glow), var(--panel) 75%);
    text-align: center;
}

.mot p[b-b7bq2vjybg] {
    margin: 0;
}

.mot-kicker[b-b7bq2vjybg] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
}

.mot-answer[b-b7bq2vjybg] {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.02em;
    /* A forged name can be 64 characters with no space to break at; wrap it rather than scroll. */
    overflow-wrap: anywhere;
}

/* A third of the answer's size, in the TEAM colour: "it's their team" under "It's NOT <name>". */
.mot-subline[b-b7bq2vjybg] {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2.7vw, 1.5rem);
    font-weight: 700;
    color: var(--win);
}

.mot-you[b-b7bq2vjybg] {
    color: var(--lose);
    text-shadow: 0 0 24px rgba(232, 64, 87, 0.5);
}

.mot-team[b-b7bq2vjybg] {
    color: var(--win);
    text-shadow: 0 0 24px rgba(10, 200, 185, 0.5);
}

.mot-pill[b-b7bq2vjybg] {
    padding: 0.15rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-dim);
}

.mot-pill-clear[b-b7bq2vjybg] {
    border-color: var(--gold);
    color: var(--gold-bright);
}

.mot-line[b-b7bq2vjybg] {
    color: var(--gold-bright);
}

.mot-meter[b-b7bq2vjybg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 26rem;
    margin-top: 0.5rem;
}

.mot-end[b-b7bq2vjybg] {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}

/* The left end can hold a player's name; the full name is in its title. */
.mot-end-left[b-b7bq2vjybg] {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mot-strip[b-b7bq2vjybg] {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 0.55rem;
    border: 1px solid var(--gold-deep);
}

/* What chance alone explains, centred on zero: a marker inside it means the gap could be luck. */
.mot-zone[b-b7bq2vjybg] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--gold-deep);
}

.mot-marker[b-b7bq2vjybg] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(240, 230, 210, 0.8);
    transform: translateX(-50%);
}
/* /Components/MetaPicksBand.razor.rz.scp.css */
.meta-picks-band[b-i0myrc9nfa] {
    padding: 1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.meta-picks-header[b-i0myrc9nfa] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.meta-picks-title[b-i0myrc9nfa] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-align: center;
}

.meta-picks-tier[b-i0myrc9nfa] {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

.meta-picks-empty[b-i0myrc9nfa] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.meta-picks-columns[b-i0myrc9nfa] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

.meta-picks-column[b-i0myrc9nfa] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    border-radius: 0;
}

.meta-picks-role[b-i0myrc9nfa] {
    margin: 0 0 0.15rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    text-align: center;
}

.meta-picks-section[b-i0myrc9nfa] {
    margin: 0 0 0.5rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold);
}

/* Only the bans title follows a grid, so this sibling selector alone draws the boundary between
   the picks list and the bans list without adding a rule between the header and the first grid. */
.meta-picks-columns + .meta-picks-section[b-i0myrc9nfa] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.meta-pick-row[b-i0myrc9nfa] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.25rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid transparent;
    border-radius: 0;
    min-width: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.meta-pick-row:hover[b-i0myrc9nfa] {
    background: rgba(200, 170, 110, 0.08);
    border-left-color: var(--gold);
}

.meta-pick-icon[b-i0myrc9nfa] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gold-dark);
    border-radius: 0;
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.meta-pick-icon-placeholder[b-i0myrc9nfa] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(200, 170, 110, 0.08);
    border: 1px solid var(--border);
}

.meta-pick-text-placeholder[b-i0myrc9nfa] {
    flex: 1;
    height: 0.6rem;
    background: rgba(200, 170, 110, 0.08);
}

.meta-pick-info[b-i0myrc9nfa] {
    display: flex;
    flex-direction: column;
    /* flex:1 claims the row's whole remaining width; without it the box sizes to the champion
       name and the longer rate line spills over it. */
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.meta-pick-name[b-i0myrc9nfa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
}

.meta-pick-rates[b-i0myrc9nfa] {
    display: flex;
    gap: 0.35rem;
    /* At a legible size the two spelled-out rates no longer fit one 136px column, so they wrap to
       a second line at five columns and share one at the two-column breakpoint. nowrap still
       applies per rate, keeping the break between them rather than inside "17.5% pick rate". */
    flex-wrap: wrap;
    font-size: 0.7rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

.meta-pick-winrate.win[b-i0myrc9nfa] {
    color: var(--win);
}

.meta-pick-winrate.lose[b-i0myrc9nfa] {
    color: var(--lose);
}

.meta-pick-banrate[b-i0myrc9nfa] {
    color: var(--lose);
}

/* A muted left border (versus the plain transparent one on a pick row) is the only structural
   difference from a pick row — enough to read as a "deny" entry without a heavier treatment. */
.meta-ban-row[b-i0myrc9nfa] {
    border-left-color: rgba(232, 64, 87, 0.35);
}

.meta-ban-row:hover[b-i0myrc9nfa] {
    border-left-color: var(--lose);
}

@media (max-width: 760px) {
    .meta-picks-columns[b-i0myrc9nfa] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/ObjectiveIcon.razor.rz.scp.css */
/* Colour now comes from the vendored art itself (see ObjectiveIcon.razor.cs's AssetPath), not a
   per-kind CSS class -- only sizing is left here. Bumped from the previous inline SVG's 16px to
   18px: Riot's art carries more detail than a flat glyph and reads better with the extra room. */
.objective-icon[b-muiepykbo9] {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}
/* /Components/OwnDataAttribution.razor.rz.scp.css */
/* Body copy rather than a footnote, like the source line it replaces: where the figures come from
   is part of what the page tells the reader. */
.own-data-attribution[b-k5unte7yaa] {
    margin-top: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}
/* /Components/Pages/ChampionBuildPage.razor.rz.scp.css */
.champion-build[b-ezk3ghgkal] {
    max-width: 72rem;
    margin: 0 auto;
    /* Lets the grid columns shrink inside their parent instead of widening the page. */
    min-width: 0;
}

/* One row: the champion (portrait, h1, headline figures) on the left, the filters on the right. The
   filters wrap under the identity block when the row runs out of room. */
.build-header[b-ezk3ghgkal] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 0.75rem;
}

.build-identity[b-ezk3ghgkal] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.build-title[b-ezk3ghgkal] {
    min-width: 0;
}

.build-header img[b-ezk3ghgkal] {
    flex: 0 0 auto;
    border: 1px solid var(--gold-dark);
    border-radius: 8px;
}

.champion-build h1[b-ezk3ghgkal] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

/* Right-aligned beside the champion; the stacked layout below puts them back on the left. */
.build-filters[b-ezk3ghgkal],
.build-filters-skeleton[b-ezk3ghgkal] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    min-width: 0;
}

/* The role buttons' own top margin is for the tier table, where nothing else spaces them. */
.build-filters[b-ezk3ghgkal]  .role-buttons {
    margin-top: 0;
    justify-content: flex-end;
}

.build-dropdowns[b-ezk3ghgkal] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

@media (max-width: 52rem) {
    .build-filters[b-ezk3ghgkal],
    .build-filters-skeleton[b-ezk3ghgkal] {
        align-items: flex-start;
    }

    .build-filters[b-ezk3ghgkal]  .role-buttons,
    .build-dropdowns[b-ezk3ghgkal] {
        justify-content: flex-start;
    }
}

.build-note[b-ezk3ghgkal] {
    margin: 1rem 0 0;
    color: var(--text-dim);
}

.build-previous-patch[b-ezk3ghgkal] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    background: var(--gold-deep);
    color: var(--gold-bright);
}

.build-empty[b-ezk3ghgkal] {
    margin-top: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    text-align: center;
    color: var(--text-dim);
}

.build-empty h2[b-ezk3ghgkal] {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold-bright);
}

.build-empty a[b-ezk3ghgkal] {
    margin: 0 0.4rem;
}

/* Headline figures under the h1, deliberately smaller than it. The tier badge is the shared TierBadge,
   sized as in the table. */
.build-rating[b-ezk3ghgkal] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.2rem 0 0;
    color: var(--text-dim);
}

.build-rating-wr[b-ezk3ghgkal] {
    font-size: 0.95rem;
    font-weight: 800;
}

.rate-win[b-ezk3ghgkal] { color: var(--win); }
.rate-lose[b-ezk3ghgkal] { color: var(--lose); }

.build-rating-label[b-ezk3ghgkal] {
    font-size: 0.8rem;
}

.build-rating-sep[b-ezk3ghgkal] {
    margin: 0 0.15rem;
}

/* 68rem because the 18-level skill table needs a half column of about 502px (viewport 1060px measured)
   plus room for a classic scrollbar; narrower and it would scroll sideways in the half-width card.
   One column on a phone; from 68rem up two equal columns in DOM order, so runes and items share
   the first row and skills sit under runes with spells beside them. */
.build-grid[b-ezk3ghgkal] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 68rem) {
    .build-grid[b-ezk3ghgkal] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }
}

/* The section components render the cards' contents; the page owns how a card looks, so the four stay alike.
   The cards are the grid items themselves, so stretching the item stretches the card. */
.build-grid[b-ezk3ghgkal]  .build-section {
    /* The containing block for BuildTip's fallback tips. */
    position: relative;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

.build-grid[b-ezk3ghgkal]  .build-section > h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.build-grid[b-ezk3ghgkal]  .build-section > h2::before {
    content: "";
    flex: 0 0 auto;
    align-self: stretch;
    width: 3px;
    border-radius: 2px;
    background: var(--gold);
}

/* :where() keeps this at the lowest specificity, so a section can still adjust its own h3's margin
   or flex (the Skill Path title sharing a row with its figures) without a fight. */
.build-grid[b-ezk3ghgkal]  :where(.build-section h3) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.build-grid[b-ezk3ghgkal]  :where(.build-section h3)::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--gold-dark);
}

/* Small print under the build, mirroring the tier table's .tier-summary. */
.build-summary[b-ezk3ghgkal] {
    margin: 0.75rem 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-dim);
    opacity: 0.6;
}

.build-loading[b-ezk3ghgkal] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 0 0.75rem;
    color: var(--text-dim);
}

/* The site's gold rule-gem (MainLayout.razor.css) at spinner size. Not shared as one class: .razor.css
   is scoped per component, so each keeps its own copy. */
.build-loader-gem[b-ezk3ghgkal] {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    transform: rotate(45deg);
    background: var(--gold);
    box-shadow: 0 0 8px rgba(200, 170, 110, 0.6);
    animation: build-loader-spin-b-ezk3ghgkal 1.2s linear infinite;
}

@keyframes build-loader-spin-b-ezk3ghgkal {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

/* Mirrors the real layout: the 2x2 grid of cards. */
.build-skeleton[b-ezk3ghgkal] {
    display: grid;
    gap: 1rem;
}

.build-skeleton-grid[b-ezk3ghgkal] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 68rem) {
    .build-skeleton-grid[b-ezk3ghgkal] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* The bars standing in for the filters in the header. */
.build-skeleton-line[b-ezk3ghgkal] {
    display: block;
    height: 1.5rem;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--border) 25%, var(--panel-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: build-skeleton-shimmer-b-ezk3ghgkal 1.4s ease-in-out infinite;
}

.build-skeleton-box[b-ezk3ghgkal] {
    width: 7rem;
    height: 2.4rem;
}

.build-skeleton-pills[b-ezk3ghgkal] {
    width: 18rem;
    max-width: 100%;
    height: 1.9rem;
    border-radius: 999px;
}

.build-skeleton-block[b-ezk3ghgkal] {
    display: block;
    height: 9rem;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--border) 25%, var(--panel-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: build-skeleton-shimmer-b-ezk3ghgkal 1.4s ease-in-out infinite;
}

@keyframes build-skeleton-shimmer-b-ezk3ghgkal {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .build-loader-gem[b-ezk3ghgkal],
    .build-skeleton-line[b-ezk3ghgkal],
    .build-skeleton-block[b-ezk3ghgkal] {
        animation: none;
    }
}
/* /Components/Pages/ChampionPage.razor.rz.scp.css */
.champion-page[b-1we05ot7cm] {
    max-width: 62rem;
    margin: 0 auto;
}

.champion-page h1[b-1we05ot7cm] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.champion-header[b-1we05ot7cm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.champion-header img[b-1we05ot7cm] {
    border-radius: 6px;
}

.champion-tags[b-1we05ot7cm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.champion-tags li[b-1we05ot7cm] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.champion-ratings[b-1we05ot7cm] {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.25rem 1rem;
    margin: 1rem 0 0;
}

.champion-ratings dt[b-1we05ot7cm] {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.champion-ratings dd[b-1we05ot7cm] {
    margin: 0;
    color: var(--text);
}

.champion-ratings-label[b-1we05ot7cm] {
    margin: 1rem 0 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.champion-empty[b-1we05ot7cm] {
    margin-top: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.champion-role-table[b-1we05ot7cm] {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.champion-role-table th[b-1we05ot7cm],
.champion-role-table td[b-1we05ot7cm] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.champion-role-table th[b-1we05ot7cm] {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.champion-context[b-1we05ot7cm] {
    margin-top: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Same dim/small treatment the scaling and threat paragraphs had, now as a two-column list. */
.champion-curated-reads[b-1we05ot7cm] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.champion-curated-reads dt[b-1we05ot7cm] {
    color: var(--text-dim);
}

.champion-curated-reads dd[b-1we05ot7cm] {
    margin: 0;
    color: var(--text);
}

.champion-commentary[b-1we05ot7cm] {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.champion-commentary h2[b-1we05ot7cm] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--gold-bright);
}

.champion-commentary h3[b-1we05ot7cm] {
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
    color: var(--text);
}

.champion-commentary p[b-1we05ot7cm] {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

.champion-commentary p.champion-commentary-reviewed[b-1we05ot7cm] {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.champion-cta[b-1we05ot7cm] {
    margin-top: 1.5rem;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Icon and name of a listed counter are one link to that champion's page. */
.champion-counters-champion a[b-1we05ot7cm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.champion-counters-champion img[b-1we05ot7cm] {
    border-radius: 4px;
}
/* /Components/Pages/ChampionsIndex.razor.rz.scp.css */
.champions-index[b-l9oz9sv21l] {
    max-width: 62rem;
    margin: 0 auto;
}

.champions-index h1[b-l9oz9sv21l] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.champions-index > p[b-l9oz9sv21l] {
    margin-top: 0.75rem;
    line-height: 1.6;
    color: var(--text);
}

.champions-grid[b-l9oz9sv21l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.champions-grid a[b-l9oz9sv21l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}

.champions-grid img[b-l9oz9sv21l] {
    border-radius: 4px;
}

.champions-all-heading[b-l9oz9sv21l] {
    margin: 2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold-bright);
}
/* /Components/Pages/DraftLuckLanding.razor.rz.scp.css */
.draft-luck-landing[b-zedrxrbg6b] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck-landing p[b-zedrxrbg6b] {
    margin: 0;
}

.draft-luck-landing h1[b-zedrxrbg6b] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

/* ::deep: the form is RiotIdSearchField's root, outside this page's scope attribute. */
.draft-luck-landing[b-zedrxrbg6b]  .dll-form {
    max-width: 32rem;
}

.dll-caveats h2[b-zedrxrbg6b] {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--gold);
}

.dll-caveats ul[b-zedrxrbg6b] {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}
/* /Components/Pages/DraftLuckPage.razor.rz.scp.css */
.draft-luck[b-du921mon9c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck p[b-du921mon9c] {
    margin: 0;
}

/* Scoped under .draft-luck so it outranks `.draft-luck p { margin: 0 }` above. */
.draft-luck .dl-chart-note[b-du921mon9c] {
    margin-bottom: 0.5rem;
}

.draft-luck h2[b-du921mon9c] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--gold);
}

.draft-luck h3[b-du921mon9c] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gold-bright);
}

.dl-header[b-du921mon9c] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dl-riotid[b-du921mon9c] {
    color: var(--gold);
    font-weight: 700;
}

.dl-rank[b-du921mon9c],
.dl-status[b-du921mon9c],
.dl-note-small[b-du921mon9c],
.dl-chart-note[b-du921mon9c] {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.dl-note[b-du921mon9c] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.dl-partial[b-du921mon9c] {
    border-color: var(--warn);
}

/* The under-minimum hero: MeOrTeamVerdict's panel, kicker and answer-line styles copied rather than
   shared, so that component's contract stays the answer's. Gold, not the you/team colours, because
   there is no answer yet. */
.dl-hero[b-du921mon9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem 1.25rem;
    border: 1px solid var(--gold-deep);
    background: radial-gradient(ellipse at 50% 0%, var(--bg-glow), var(--panel) 75%);
    text-align: center;
}

.dl-hero-kicker[b-du921mon9c] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
}

/* A step down from the verdict's 4.5rem: this is a sentence, not "It's YOU". */
.dl-hero-answer[b-du921mon9c] {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--gold-bright);
    text-shadow: 0 0 24px rgba(200, 170, 110, 0.4);
}

.dl-hero-line[b-du921mon9c] {
    color: var(--gold-bright);
}

.dl-tiles[b-du921mon9c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dl-tile[b-du921mon9c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border);
    background: var(--panel);
    text-align: center;
}

.dl-tile-label[b-du921mon9c] {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dl-tile-value[b-du921mon9c] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.dl-tile-caption[b-du921mon9c] {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.dl-games-scroll[b-du921mon9c] {
    min-width: 0;
    overflow-x: auto;
}

.dl-games-table[b-du921mon9c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dl-games-table th[b-du921mon9c] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Explicit rather than inherited, so the cells always agree with the left-aligned headers. */
.dl-games-table td[b-du921mon9c] {
    padding: 0.3rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.dl-games-table tbody tr:nth-child(even)[b-du921mon9c] {
    background: var(--panel);
}

.dl-games-table tbody tr:hover[b-du921mon9c] {
    background: var(--panel-alt);
}

.dl-champion[b-du921mon9c] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dl-champion img[b-du921mon9c] {
    border-radius: 6px;
}

/* The same --win/--lose tokens as the profile page's match rows; the word is in the pill, so the
   outcome never rests on colour alone. */
.dl-result[b-du921mon9c] {
    display: inline-block;
    padding: 0.05rem 0.6rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.dl-result-won[b-du921mon9c] {
    border-color: var(--win);
    color: var(--win);
    background: color-mix(in srgb, var(--win) 10%, transparent);
}

.dl-result-lost[b-du921mon9c] {
    border-color: var(--lose);
    color: var(--lose);
    background: color-mix(in srgb, var(--lose) 10%, transparent);
}

.dl-odds[b-du921mon9c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dl-odds-bar[b-du921mon9c] {
    width: 5rem;
    height: 0.35rem;
    background: var(--border);
}

.dl-odds-fill[b-du921mon9c] {
    display: block;
    height: 100%;
}

/* Favoured is strictly above 50%, the rule the Favoured games tile counts by. */
.dl-odds-favoured .dl-odds-fill[b-du921mon9c] {
    background: var(--win);
}

.dl-odds-underdog .dl-odds-fill[b-du921mon9c] {
    background: var(--lose);
}

.dl-odds-value[b-du921mon9c] {
    min-width: 3.2rem;
    font-variant-numeric: tabular-nums;
}

.dl-share form[b-du921mon9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Values copied from ResultPanel's share button so the app's two share buttons match; scoped CSS
   can't share them. */
.dl-share button[b-du921mon9c] {
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.dl-share button:hover[b-du921mon9c],
.dl-share button:focus-visible[b-du921mon9c] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
    color: var(--gold-bright);
}

.dl-share-result[b-du921mon9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.dl-share-result input[b-du921mon9c] {
    flex: 1 1 18rem;
    min-width: 0;
}

.dl-footer[b-du921mon9c] {
    color: var(--text-dim);
    font-size: 0.75rem;
}

@media (max-width: 40rem) {
    .dl-tiles[b-du921mon9c] {
        gap: 0.5rem;
    }

    .dl-tile-value[b-du921mon9c] {
        font-size: 1.15rem;
    }

    /* The table's least essential column; hiding it, not scrolling, keeps the rest in view. */
    .dl-col-kda[b-du921mon9c] {
        display: none;
    }

    .dl-odds-bar[b-du921mon9c] {
        width: 3rem;
    }

    /* The icon carries the champion on a phone, where the name would push the odds off-screen. The
       img alt still names it for screen readers, so the text is clipped rather than display:none;
       without an icon the name is the only identifier and stays visible. */
    .dl-champion-has-icon .dl-champion-name[b-du921mon9c] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .dl-games-table th[b-du921mon9c],
    .dl-games-table td[b-du921mon9c] {
        padding-inline: 0.4rem;
    }
}
/* /Components/Pages/DraftLuckShared.razor.rz.scp.css */
.draft-luck-shared[b-7e4h14cy18] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck-shared p[b-7e4h14cy18] {
    margin: 0;
}

.dls-name[b-7e4h14cy18] {
    color: var(--gold);
    font-weight: 700;
    text-align: center;
}

.dls-tiles[b-7e4h14cy18] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dls-tile[b-7e4h14cy18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border);
    background: var(--panel);
    text-align: center;
}

.dls-tile-label[b-7e4h14cy18] {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dls-tile-value[b-7e4h14cy18] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.dls-tile-caption[b-7e4h14cy18] {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.dls-cta[b-7e4h14cy18] {
    align-self: center;
    padding: 0.6rem 2rem;
    border: 2px solid var(--gold);
    color: var(--gold-bright);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
}

.dls-cta:hover[b-7e4h14cy18] {
    background: rgba(200, 170, 110, 0.2);
    color: #fff;
}

@media (max-width: 40rem) {
    .dls-tiles[b-7e4h14cy18] {
        gap: 0.5rem;
    }

    .dls-tile-value[b-7e4h14cy18] {
        font-size: 1.15rem;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-daios6jp1z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--danger);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.error-page h1[b-daios6jp1z] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger);
}

.error-page p[b-daios6jp1z] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.error-request-id code[b-daios6jp1z] {
    color: var(--text);
}
/* /Components/Pages/Guides/MechanicGuidePage.razor.rz.scp.css */
/* The lead paragraph, h3s, p and ul come from ArticlePage.razor.css (its ::deep rules reach this markup);
   only what ArticlePage has no rule for lives here: the role chips, the ordered steps and the video frame. */

.mechanic-roles[b-vznu9tlnpv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.mechanic-role[b-vznu9tlnpv] {
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--gold-dark);
    border-radius: 999px;
    background: var(--gold-deep);
    color: var(--gold-bright);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.mechanic-steps[b-vznu9tlnpv] {
    margin: 0 0 0.75rem;
    padding-left: 1.4rem;
    line-height: 1.6;
}

.mechanic-steps > li[b-vznu9tlnpv] {
    margin-bottom: 0.6rem;
}

.mechanic-steps > li[b-vznu9tlnpv]::marker {
    color: var(--gold);
    font-weight: 700;
}

.mechanic-steps strong[b-vznu9tlnpv] {
    color: var(--gold-bright);
}

.mechanic-steps p[b-vznu9tlnpv] {
    margin: 0.15rem 0 0;
}

/* 16:9 by aspect-ratio rather than the padding hack; width 100% of the article column, so it can never
   be wider than a 375px phone viewport. */
.mechanic-video[b-vznu9tlnpv] {
    width: 100%;
    margin: 0 0 0.75rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    background: var(--panel);
}

.mechanic-video iframe[b-vznu9tlnpv] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.mechanic-video-caption[b-vznu9tlnpv] {
    font-size: 0.8rem;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.mechanic-back[b-vznu9tlnpv] {
    margin-top: 1.5rem;
}
/* /Components/Pages/GuidesIndex.razor.rz.scp.css */
/* Every selector is prefixed with .guides-index on purpose. ArticlePage.razor.css styles the markup it
   wraps through ::deep rules (.article-body ::deep ul/p/li/h3/h4, specificity 0,2,1), and those match
   this page's elements too. A lone scoped class is only 0,2,0 and would lose, so each rule here carries
   the prefix (0,3,0 or more) and resets the padding, margin, list-style and colour it needs. */

.guides-index[b-rvzi4yt0pp] {
    --guides-gold-glow: color-mix(in srgb, var(--gold) 28%, transparent);
    --guides-gold-wash: color-mix(in srgb, var(--gold) 9%, transparent);
    display: grid;
    gap: 2.75rem;
    min-width: 0;
}

.guides-index .guides-heading[b-rvzi4yt0pp] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--gold-bright);
    scroll-margin-top: 1rem;
}

/* The hairline that runs out from every section heading: gold fading to nothing. */
.guides-index .guides-heading[b-rvzi4yt0pp]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-dark), transparent);
}

.guides-index .guides-intro[b-rvzi4yt0pp] {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    color: var(--text-dim);
    line-height: 1.6;
}

/* ---------- Hero ---------- */

.guides-index .guides-hero[b-rvzi4yt0pp] {
    position: relative;
    padding: 1.5rem 1.4rem 1.3rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, var(--guides-gold-wash), transparent 70%),
        linear-gradient(180deg, var(--panel-alt), var(--panel));
    /* A stacking context of its own, so the decorative hexagon below can sit at z-index -1: above the
       hero background, beneath its text. */
    isolation: isolate;
    overflow: hidden;
}

/* Hextech flourish: a large hexagon outline in the top-right corner. One clip-path polygon traces the
   outer hexagon, then an inner one 3% smaller; evenodd cuts the inside out, leaving a thin ring. The
   seam between the two subpaths is walked twice, so it cancels. Faint on purpose: it must never
   compete with the text for contrast. */
.guides-index .guides-hero[b-rvzi4yt0pp]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.5rem;
    right: -2rem;
    width: 13rem;
    height: 15rem;
    background: linear-gradient(135deg, var(--gold), transparent 75%);
    clip-path: polygon(
        evenodd,
        50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0,
        50% 2.5%, 97% 26.5%, 97% 73.5%, 50% 97.5%, 3% 73.5%, 3% 26.5%, 50% 2.5%);
    opacity: 0.4;
    pointer-events: none;
}

/* A second, smaller hexagon nested in the first, filled rather than outlined, for a little depth. */
.guides-index .guides-hero[b-rvzi4yt0pp]::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.5rem;
    right: 1.25rem;
    width: 7.5rem;
    height: 8.66rem;
    background: color-mix(in srgb, var(--gold) 7%, transparent);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    pointer-events: none;
}

.guides-index .guides-hero-title[b-rvzi4yt0pp] {
    max-width: 22ch;
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.guides-index .guides-hero p.article-lead[b-rvzi4yt0pp] {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    padding-left: 0;
    border-left: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
}

.guides-index .guides-stats[b-rvzi4yt0pp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    line-height: 1.4;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.guides-index .guides-stats li[b-rvzi4yt0pp] {
    margin: 0;
}

/* Thin gold hairlines between the items. On a wrapped row the first item of the new line would keep a
   dangling divider, so the phone layout (below) drops them. */
.guides-index .guides-stats li + li[b-rvzi4yt0pp] {
    padding-left: 1.5rem;
    border-left: 1px solid var(--gold-dark);
}

.guides-index .guides-stats strong[b-rvzi4yt0pp] {
    margin-right: 0.3rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
}

.guides-index .guides-jump[b-rvzi4yt0pp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.guides-index .guides-jump a[b-rvzi4yt0pp] {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--gold-dark);
    border-radius: 999px;
    background: var(--gold-deep);
    color: var(--gold-bright);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.guides-index .guides-jump a:hover[b-rvzi4yt0pp] {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold-deep) 70%, var(--gold));
    box-shadow: 0 0 0.75rem var(--guides-gold-glow);
}

/* ---------- Start here ---------- */

/* The section is a size container so the path can switch between a vertical stack (narrow) and a
   three-across row (wide) on the section's own width, not the viewport's. */
.guides-index .guides-start[b-rvzi4yt0pp] {
    container-type: inline-size;
}

.guides-index .guides-start-list[b-rvzi4yt0pp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guides-index .guides-start-list li[b-rvzi4yt0pp] {
    position: relative;
    display: flex;
    margin: 0;
}

/* Stacked layout: from each badge straight down into the next card's badge. It starts under the badge
   (1rem + 2.7rem + a small gap), runs to the bottom of the card and across the 1rem gap, then 1rem
   into the next card to meet that badge's top. It sits in the 4.1rem left padding column, clear of the
   text. z-index lifts it over the next card's background. */
.guides-index .guides-start-list li:not(:last-child)[b-rvzi4yt0pp]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 3.8rem;
    bottom: -2rem;
    left: 2.2rem;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, var(--gold-dark), var(--gold));
    pointer-events: none;
}

/* Three across: a short horizontal segment per gap, at badge-centre height. It runs from the previous
   card's edge across the gap and the next card's 1rem padding to meet the badge. Drawing it from the
   card edges rather than across the cards keeps it off the title text. */
@container (width >= 48rem) {
    .guides-index .guides-start-list[b-rvzi4yt0pp] {
        grid-template-columns: repeat(3, 1fr);
    }

    .guides-index .guides-start-list li:not(:last-child)[b-rvzi4yt0pp]::after {
        top: 2.35rem;
        bottom: auto;
        left: 100%;
        width: 2rem;
        height: 2px;
        margin-left: 0;
        background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    }
}

.guides-index .guides-start-card[b-rvzi4yt0pp] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.1rem 1.2rem 4.1rem;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(135deg, var(--panel-alt), var(--panel));
    color: var(--text);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The step number sits in a hexagon, the Hextech motif, cut with clip-path so it needs no image. */
.guides-index .guides-start-number[b-rvzi4yt0pp] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.7rem;
    background: var(--gold);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    color: var(--bg);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 900;
}

.guides-index .guides-start-kicker[b-rvzi4yt0pp] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}

.guides-index .guides-start-title[b-rvzi4yt0pp] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gold-bright);
}

.guides-index .guides-start-why[b-rvzi4yt0pp] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.guides-index .guides-start-card:hover[b-rvzi4yt0pp] {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 0.5rem 1.5rem var(--guides-gold-glow);
}

/* ---------- Mechanics ---------- */

.guides-index .guides-mechanics[b-rvzi4yt0pp] {
    scroll-margin-top: 1rem;
}

.guides-index .guides-picker[b-rvzi4yt0pp] {
    margin: 0 0 1.75rem;
}

.guides-index .guides-picker-label[b-rvzi4yt0pp] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* The groups share one column grid, the same tracks the cards use. A group of three or more takes the
   whole row; a one- or two-guide group takes that many columns, so small groups sit side by side.
   Each group (and its card list) is a subgrid on those tracks, so cards line up across groups. No
   dense flow: visual order stays DOM order. */
.guides-index .guides-groups[b-rvzi4yt0pp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 2rem 0.9rem;
}

.guides-index .guides-group[b-rvzi4yt0pp] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    row-gap: 0.85rem;
    align-content: start;
    min-width: 0;
}

.guides-index .guides-group.guides-group--span-1[b-rvzi4yt0pp] {
    grid-column: span 1;
}

.guides-index .guides-group.guides-group--span-2[b-rvzi4yt0pp] {
    grid-column: span 2;
}

/* Two 15rem tracks plus the 0.9rem gap is 30.9rem. Narrower than that the grid has one column, and a
   span-2 group would otherwise conjure a second, implicit one, so every group takes the full row. */
@container (width < 31rem) {
    .guides-index .guides-mechanics .guides-group[b-rvzi4yt0pp] {
        grid-column: 1 / -1;
    }
}

.guides-index .guides-group-head[b-rvzi4yt0pp] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.guides-index .guides-group-title[b-rvzi4yt0pp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold);
    min-width: 0;
}

.guides-index .guides-group-icons[b-rvzi4yt0pp] {
    display: inline-flex;
    gap: 0.2rem;
}

.guides-index .guides-group-icons img[b-rvzi4yt0pp] {
    display: block;
}

.guides-index .guides-group-count[b-rvzi4yt0pp] {
    order: 2;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Between the title and the count: fills the row so the count hugs the right edge. */
.guides-index .guides-group-head[b-rvzi4yt0pp]::after {
    content: "";
    order: 1;
    flex: 1;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.guides-index .guides-grid[b-rvzi4yt0pp] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    /* Row gap only: a subgrid takes its column gap from the parent, keeping cards on the page tracks. */
    row-gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guides-index .guides-grid li[b-rvzi4yt0pp] {
    display: flex;
    margin: 0;
}

.guides-index .guides-card[b-rvzi4yt0pp] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem 1rem 0.85rem;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* A gold bar along the top edge that grows from the left on hover. */
.guides-index .guides-card[b-rvzi4yt0pp]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.guides-index .guides-card-title[b-rvzi4yt0pp] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--gold-bright);
    overflow-wrap: anywhere;
}

.guides-index .guides-card-blurb[b-rvzi4yt0pp] {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.guides-index .guides-card-meta[b-rvzi4yt0pp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--blue);
}

.guides-index .guides-card-meta span + span[b-rvzi4yt0pp]::before {
    content: "\00b7";
    margin-right: 0.35rem;
    color: var(--gold-dark);
}

.guides-index .guides-card:hover[b-rvzi4yt0pp] {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 0.5rem 1.5rem var(--guides-gold-glow);
}

.guides-index .guides-card:hover[b-rvzi4yt0pp]::before {
    transform: scaleX(1);
}

/* Faint gold wash from the top edge on hover, to go with the bar. A pseudo-element so its fade can be
   transitioned (gradients cannot), and click-through so it never gets in the way. */
.guides-index .guides-card[b-rvzi4yt0pp]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.guides-index .guides-card:hover[b-rvzi4yt0pp]::after {
    opacity: 1;
}

.guides-index .guides-filter-note[b-rvzi4yt0pp] {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.guides-index .guides-filter-note a[b-rvzi4yt0pp] {
    color: var(--gold);
}

.guides-index .guides-empty[b-rvzi4yt0pp] {
    padding: 1rem;
    border: 1px dashed var(--border);
    color: var(--text-dim);
}

/* ---------- Deep-dive tracks ---------- */

.guides-index .guides-deep[b-rvzi4yt0pp] {
    display: grid;
    gap: 1.25rem;
}

.guides-index .guides-deep > .guides-intro[b-rvzi4yt0pp] {
    margin-bottom: 0;
}

.guides-index .guides-track[b-rvzi4yt0pp] {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dark);
    background: linear-gradient(180deg, var(--panel-alt), var(--panel));
    overflow: hidden;
    scroll-margin-top: 1rem;
}

/* Decorative only: sits behind the text, takes no clicks, and is aria-hidden in the markup. */
.guides-index .guides-track-numeral[b-rvzi4yt0pp] {
    position: absolute;
    top: -0.6rem;
    right: 0.75rem;
    font-family: var(--font-display);
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    color: color-mix(in srgb, var(--gold) 12%, transparent);
    pointer-events: none;
    user-select: none;
}

.guides-index .guides-track-title[b-rvzi4yt0pp] {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold);
}

.guides-index .guides-track-tagline[b-rvzi4yt0pp] {
    position: relative;
    max-width: 48ch;
    margin: 0.25rem 0 1.1rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.guides-index .guides-rows[b-rvzi4yt0pp] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guides-index .guides-rows li[b-rvzi4yt0pp] {
    display: flex;
    margin: 0;
}

.guides-index .guides-row[b-rvzi4yt0pp] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.8rem 2.4rem 0.8rem 0.9rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 55%, var(--panel));
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.guides-index .guides-row-title[b-rvzi4yt0pp] {
    font-weight: 700;
    line-height: 1.35;
    color: var(--gold-bright);
    overflow-wrap: anywhere;
}

.guides-index .guides-row-blurb[b-rvzi4yt0pp] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.guides-index .guides-row-arrow[b-rvzi4yt0pp] {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    color: var(--gold-dark);
    font-size: 1.1rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.guides-index .guides-row:hover[b-rvzi4yt0pp] {
    border-color: var(--gold);
    background: var(--guides-gold-wash);
}

.guides-index .guides-row:hover .guides-row-arrow[b-rvzi4yt0pp] {
    transform: translateX(4px);
    color: var(--gold);
}

/* ---------- Focus and motion ---------- */

.guides-index .guides-jump a:focus-visible[b-rvzi4yt0pp],
.guides-index .guides-start-card:focus-visible[b-rvzi4yt0pp],
.guides-index .guides-card:focus-visible[b-rvzi4yt0pp],
.guides-index .guides-row:focus-visible[b-rvzi4yt0pp] {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .guides-index[b-rvzi4yt0pp] {
        gap: 1.75rem;
    }

    .guides-index .guides-hero[b-rvzi4yt0pp],
    .guides-index .guides-track[b-rvzi4yt0pp] {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    /* The hexagon would sit behind the headline on a phone. */
    .guides-index .guides-hero[b-rvzi4yt0pp]::before,
    .guides-index .guides-hero[b-rvzi4yt0pp]::after {
        display: none;
    }

    .guides-index .guides-stats li + li[b-rvzi4yt0pp] {
        padding-left: 0;
        border-left: 0;
    }

    /* Tap targets of at least 44px. */
    .guides-index .guides-jump a[b-rvzi4yt0pp],
    .guides-index .guides-picker[b-rvzi4yt0pp]  .role-button {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .guides-index .guides-filter-note a[b-rvzi4yt0pp] {
        display: inline-block;
        padding: 0.7rem 0.25rem;
    }

    .guides-index .guides-groups[b-rvzi4yt0pp] {
        gap: 1.5rem 0.7rem;
    }

    .guides-index .guides-group[b-rvzi4yt0pp] {
        row-gap: 0.65rem;
    }

    .guides-index .guides-grid[b-rvzi4yt0pp] {
        row-gap: 0.7rem;
    }

    .guides-index .guides-card[b-rvzi4yt0pp] {
        gap: 0.35rem;
        padding: 0.85rem 0.9rem 0.7rem;
    }

    /* Clamped on phones only, where the page is otherwise very long. flex: none, not flex: 1: a clamped
       box that is stretched taller than its clamp renders the lines past the ellipsis. The meta line
       takes the slack instead (margin-top: auto), so the footers still align. Descriptions are capped
       at 170 characters, so tablet and desktop show them in full. */
    .guides-index .guides-card-blurb[b-rvzi4yt0pp] {
        flex: none;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .guides-index .guides-card-meta[b-rvzi4yt0pp] {
        margin-top: auto;
        padding-top: 0.5rem;
    }

    .guides-index .guides-track-numeral[b-rvzi4yt0pp] {
        font-size: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guides-index .guides-jump a[b-rvzi4yt0pp],
    .guides-index .guides-start-card[b-rvzi4yt0pp],
    .guides-index .guides-card[b-rvzi4yt0pp],
    .guides-index .guides-card[b-rvzi4yt0pp]::before,
    .guides-index .guides-card[b-rvzi4yt0pp]::after,
    .guides-index .guides-row[b-rvzi4yt0pp],
    .guides-index .guides-row-arrow[b-rvzi4yt0pp] {
        transition: none;
    }

    .guides-index .guides-start-card:hover[b-rvzi4yt0pp],
    .guides-index .guides-card:hover[b-rvzi4yt0pp],
    .guides-index .guides-row:hover .guides-row-arrow[b-rvzi4yt0pp] {
        transform: none;
    }

    /* The top bar still shows its hover state, just without growing into it. */
    .guides-index .guides-card:hover[b-rvzi4yt0pp]::before {
        transform: scaleX(1);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-i4cnx18z4j] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 62rem;
    margin: 0 auto;
}

.controls[b-i4cnx18z4j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* One card, three labelled groups on a row, split by thin rules. The last column is
   fit-content(17rem): the Live group hugs its button, and a long finder status wraps instead of
   widening the column and squeezing Capture (the flexible middle) past the card edge. */
.home-actions[b-i4cnx18z4j] {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) fit-content(17rem);
    gap: 1.1rem 0;
}

/* No live group (Riot not configured, or the live panel owns the game): two columns, no empty gap. */
.home-actions.no-live[b-i4cnx18z4j] {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
}

/* min-width: 0 lets a group shrink below its content instead of pushing the card past the viewport. */
.home-group[b-i4cnx18z4j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1.4rem;
    min-width: 0;
}

.riot-group[b-i4cnx18z4j] {
    padding-left: 0;
}

/* Whichever group is last (Live, or Capture when Live is not rendered) sits flush with the card edge. */
.home-group:last-child[b-i4cnx18z4j] {
    padding-right: 0;
}

.live-group[b-i4cnx18z4j],
.capture-group[b-i4cnx18z4j] {
    border-left: 1px solid var(--border);
}

.home-group-title[b-i4cnx18z4j] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.home-group-actions[b-i4cnx18z4j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.home-group-caption[b-i4cnx18z4j],
.capture-note[b-i4cnx18z4j] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-dim);
}

/* The search pill itself is global (app.css) since RiotIdSearchField shares it; this only sizes the
   field to its column. ::deep is not needed -- the field sits directly in this page's own markup, so
   it carries this page's scope attribute. */
.riot-id-field[b-i4cnx18z4j] {
    max-width: none;
}

.profile-tier[b-i4cnx18z4j] {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.btn-capture[b-i4cnx18z4j],
.btn-upload[b-i4cnx18z4j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 2.75rem;
    padding: 0.6rem 1.4rem;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-capture[b-i4cnx18z4j] {
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.04));
    color: var(--gold-bright);
}

.btn-capture:hover:not(:disabled)[b-i4cnx18z4j] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.35), rgba(200, 170, 110, 0.12));
    box-shadow: 0 0 14px rgba(200, 170, 110, 0.35);
    color: #fff;
}

.btn-capture:disabled[b-i4cnx18z4j] {
    border-color: var(--gold-deep);
    color: var(--text-dim);
    background: rgba(1, 10, 19, 0.4);
    cursor: not-allowed;
}

/* Upload is the quieter sibling of Capture (outline only) but keeps its geometry so the row lines up. */
.btn-upload[b-i4cnx18z4j] {
    border: 1px solid var(--gold-dark);
    background: transparent;
    color: var(--gold);
}

.btn-upload:hover[b-i4cnx18z4j] {
    background: rgba(200, 170, 110, 0.16);
    color: var(--gold-bright);
}

/* Focus lands on the visually hidden input inside the label, so the label draws the ring. */
.btn-upload:focus-within[b-i4cnx18z4j] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.btn-upload:has(input:disabled)[b-i4cnx18z4j] {
    border-color: var(--gold-deep);
    color: var(--text-dim);
    background: rgba(1, 10, 19, 0.4);
    cursor: not-allowed;
}

.capture-note[b-i4cnx18z4j] {
    color: var(--warn);
}

/* A found game becomes a full-width strip under the other two groups. :has() keeps this in CSS
   because the strip is rendered by LiveGameFinder, which Home cannot otherwise observe from here.
   The strip's own look lives in LiveGameFinder.razor.css. */
.home-actions:has(.live-finder-found)[b-i4cnx18z4j] {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
}

.home-actions:has(.live-finder-found) .live-group[b-i4cnx18z4j] {
    grid-column: 1 / -1;
    order: 9;
    border-left: none;
    padding: 0;
}

/* Below ~900px three columns no longer fit: Riot ID takes its own row and Capture/Live game share
   the one under it. */
@media (max-width: 56rem) {
    .home-actions[b-i4cnx18z4j] {
        grid-template-columns: minmax(0, 1fr) fit-content(17rem);
    }

    .riot-group[b-i4cnx18z4j] {
        grid-column: 1 / -1;
    }

    .riot-id-field[b-i4cnx18z4j] {
        max-width: 24rem;
    }

    /* Capture starts the second row, so it has no neighbour on its left; Live keeps its rule. */
    .capture-group[b-i4cnx18z4j] {
        border-left: none;
        padding-left: 0;
    }

    .home-actions:has(.live-finder-found)[b-i4cnx18z4j] {
        grid-template-columns: 1fr;
    }
}

/* Phone width: a single stacked column, each group separated by a top rule instead of a side rule,
   and the buttons stretch so they are easy thumb targets. */
@media (max-width: 40rem) {
    .home-actions[b-i4cnx18z4j] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .home-group[b-i4cnx18z4j] {
        padding: 0;
        border-left: none;
    }

    .live-group[b-i4cnx18z4j],
    .capture-group[b-i4cnx18z4j] {
        border-top: 1px solid var(--border);
        padding-top: 1rem;
    }

    /* The found strip's padding reset above is more specific than the rule just before, so the
       stacked layout's gap under its top rule has to be restated. */
    .home-actions:has(.live-finder-found) .live-group[b-i4cnx18z4j] {
        padding-top: 1rem;
    }

    .riot-id-field[b-i4cnx18z4j] {
        max-width: none;
    }

    .home-group-actions > *[b-i4cnx18z4j] {
        flex: 1;
    }

    .live-group[b-i4cnx18z4j]  .live-finder-btn {
        align-self: stretch;
    }
}

.status-line[b-i4cnx18z4j] {
    margin: 0;
    padding: 0.7rem 1rem;
    border-left: 2px solid var(--teal);
    background: rgba(10, 200, 185, 0.06);
    color: var(--text-dim);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.error-line[b-i4cnx18z4j] {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--danger);
    border-left-width: 3px;
    background: rgba(232, 64, 87, 0.1);
    color: var(--danger);
    font-size: 0.88rem;
}

.disclaimer[b-i4cnx18z4j] {
    margin: 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    background: rgba(11, 23, 37, 0.75);
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.6;
}

.disclaimer strong[b-i4cnx18z4j] {
    color: var(--gold);
}

.explainer[b-i4cnx18z4j] {
    padding: 1.4rem 1.5rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.explainer h2[b-i4cnx18z4j] {
    margin: 0 0 0.9rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: var(--gold-bright);
}

.explainer h3[b-i4cnx18z4j] {
    margin: 1.25rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gold);
}

/* The h2's own bottom margin already separates it from the first h3 below it. */
.explainer h2 + h3[b-i4cnx18z4j] {
    margin-top: 0;
}

.explainer p[b-i4cnx18z4j] {
    margin: 0 0 0.75rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

.explainer p:last-child[b-i4cnx18z4j] {
    margin-bottom: 0;
}

.explainer strong[b-i4cnx18z4j] {
    color: var(--gold);
}
/* /Components/Pages/LaneVerdictShared.razor.rz.scp.css */
.lane-verdict-shared[b-lbm5u2qu0r] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.6;
}

.lane-verdict-shared p[b-lbm5u2qu0r] {
    margin: 0;
}

.lvs-stamp[b-lbm5u2qu0r] {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3.6rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
}

.lvs-stamp-won[b-lbm5u2qu0r] {
    color: #0ac8b9;
}

.lvs-stamp-lost[b-lbm5u2qu0r] {
    color: #e84057;
}

.lvs-stamp-none[b-lbm5u2qu0r] {
    color: var(--text-dim);
}

.lvs-matchup[b-lbm5u2qu0r] {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
}

.lvs-matchup-dim[b-lbm5u2qu0r] {
    color: var(--text-dim);
}

.lvs-rows[b-lbm5u2qu0r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One grid per row so the bars line up whatever the names' lengths; min-width 0 lets the names
   truncate instead of stretching their column. */
.lvs-row[b-lbm5u2qu0r] {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(5rem, 9rem) 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
}

.lvs-row-you[b-lbm5u2qu0r] {
    border-color: var(--gold);
    background: var(--panel);
}

.lvs-role[b-lbm5u2qu0r] {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.lvs-row-you .lvs-role[b-lbm5u2qu0r] {
    color: var(--gold);
}

.lvs-own[b-lbm5u2qu0r],
.lvs-opponent[b-lbm5u2qu0r] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lvs-own[b-lbm5u2qu0r] {
    text-align: right;
}

.lvs-opponent[b-lbm5u2qu0r] {
    color: var(--text-dim);
}

.lvs-bar[b-lbm5u2qu0r] {
    position: relative;
    height: 0.8rem;
    background: var(--border);
}

.lvs-bar[b-lbm5u2qu0r]::after {
    content: "";
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    left: 50%;
    width: 2px;
    background: var(--text);
}

.lvs-fill[b-lbm5u2qu0r] {
    position: absolute;
    top: 0;
    bottom: 0;
}

.lvs-fill-high[b-lbm5u2qu0r] {
    background: #0ac8b9;
}

.lvs-fill-even[b-lbm5u2qu0r] {
    background: var(--gold);
}

.lvs-fill-low[b-lbm5u2qu0r] {
    background: #e84057;
}

.lvs-score-high[b-lbm5u2qu0r] {
    color: #0ac8b9;
}

.lvs-score-even[b-lbm5u2qu0r] {
    color: var(--gold);
}

.lvs-score-low[b-lbm5u2qu0r] {
    color: #e84057;
}

.lvs-score[b-lbm5u2qu0r] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lvs-caption[b-lbm5u2qu0r] {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-align: center;
}

.lvs-share input[b-lbm5u2qu0r] {
    width: 100%;
    min-width: 0;
}

/* ::deep: the form is RiotIdSearchField's root, outside this page's scope attribute. */
.lane-verdict-shared[b-lbm5u2qu0r]  .lvs-cta {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

@media (max-width: 40rem) {
    /* Drop the role column's width and let the two names share the line above the bar. */
    .lvs-row[b-lbm5u2qu0r] {
        grid-template-columns: 3.2rem minmax(0, 1fr) 4.5rem;
        grid-template-areas:
            "role own score"
            "role bar bar"
            "role opp opp";
        row-gap: 0.15rem;
    }

    .lvs-role[b-lbm5u2qu0r] { grid-area: role; }
    .lvs-own[b-lbm5u2qu0r] { grid-area: own; text-align: left; }
    .lvs-bar[b-lbm5u2qu0r] { grid-area: bar; }
    .lvs-score[b-lbm5u2qu0r] { grid-area: score; text-align: right; }
    .lvs-opponent[b-lbm5u2qu0r] { grid-area: opp; }
}
/* /Components/Pages/SharedResult.razor.rz.scp.css */
/* Deliberately mirrors Home.razor.css's .home box (max-width + auto margins) rather than letting
   main's full-width padding stretch it further, so the panel renders at the identical width on
   both / and /r/{code}. align-items must stay at its stretch default: SharedLobbyPanel's root is
   ResultPanel's .result-panel, which has no width of its own, so a centred (shrink-to-fit) flex
   child would collapse the 1fr auto 1fr lobby-grid's 1fr columns to max-content instead of
   filling — only .shared-cta below should be centred. */
.shared-result[b-2v8dlrvcod] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 62rem;
    margin: 0 auto;
}

.shared-result h1[b-2v8dlrvcod] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: var(--gold-bright);
}

.shared-cta[b-2v8dlrvcod] {
    align-self: center;
    padding: 0.6rem 2rem;
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.16), rgba(200, 170, 110, 0.04));
    color: var(--gold-bright);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.shared-cta:hover[b-2v8dlrvcod] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.35), rgba(200, 170, 110, 0.12));
    box-shadow: 0 0 14px rgba(200, 170, 110, 0.35);
    color: #fff;
}
/* /Components/Pages/SummonerProfilePage.razor.rz.scp.css */
.summoner-profile[b-94a9mxyemg] {
    max-width: 62rem;
    margin: 0 auto;
}

.summoner-profile h1[b-94a9mxyemg] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.summoner-profile-unavailable[b-94a9mxyemg] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
    line-height: 1.6;
}

.summoner-profile-header[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.summoner-profile-header img[b-94a9mxyemg] {
    border-radius: 6px;
}

.summoner-profile-riotid[b-94a9mxyemg] {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-level[b-94a9mxyemg] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.summoner-profile-queues[b-94a9mxyemg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.summoner-profile-queue-card[b-94a9mxyemg] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
}

.summoner-profile-queue-title[b-94a9mxyemg] {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

.summoner-profile-tier[b-94a9mxyemg] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.summoner-profile-lp[b-94a9mxyemg] {
    margin: 0.15rem 0;
    color: var(--text);
    font-size: 0.85rem;
}

.summoner-profile-record[b-94a9mxyemg] {
    margin: 0.15rem 0 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.summoner-profile-unranked[b-94a9mxyemg] {
    margin: 0;
    color: var(--text-dim);
}

@media (max-width: 560px) {
    .summoner-profile-queues[b-94a9mxyemg] {
        grid-template-columns: 1fr;
    }
}

/* The overview row under the rank cards: Past seasons, Roles, and a third card (Playstyle).
   A flex row rather than a grid so that a card with nothing to show, which renders no element at
   all, leaves no empty track: the cards that are there just share the width. The cards carry their
   own top margin (below) instead of the row, so a row with no cards at all adds no gap either.
   Wide: one row of equal-width cards (flex-basis 0 with min-width 0, so a long line inside one card
   can never widen it). Tablet: two per line, an odd last card growing to fill its line. Phone: one
   per line. The default stretch alignment gives the cards of a line equal heights. */
.summoner-profile-overview[b-94a9mxyemg] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.75rem;
}

.summoner-profile-overview > .summoner-profile-seasons[b-94a9mxyemg],
.summoner-profile-overview > .summoner-profile-roles[b-94a9mxyemg],
.summoner-profile-overview > .summoner-profile-badges[b-94a9mxyemg] {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 900px) {
    .summoner-profile-overview > .summoner-profile-seasons[b-94a9mxyemg],
    .summoner-profile-overview > .summoner-profile-roles[b-94a9mxyemg],
    .summoner-profile-overview > .summoner-profile-badges[b-94a9mxyemg] {
        flex-basis: calc(50% - 0.4rem);
    }
}

@media (max-width: 640px) {
    .summoner-profile-overview > .summoner-profile-seasons[b-94a9mxyemg],
    .summoner-profile-overview > .summoner-profile-roles[b-94a9mxyemg],
    .summoner-profile-overview > .summoner-profile-badges[b-94a9mxyemg] {
        flex-basis: 100%;
    }
}

/* A bordered card, matching .summoner-profile-queue-card, so each reads as a summary box of its own
   rather than loose content. */
.summoner-profile-badges[b-94a9mxyemg],
.summoner-profile-roles[b-94a9mxyemg],
.summoner-profile-seasons[b-94a9mxyemg] {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
}

/* Chips are bigger here only: this is the page's headline playstyle read, while the per-game chips
   on each match row stay at BadgeChipRow's default small size. ::deep is required because the
   chips are rendered by the child BadgeChipRow component, whose elements don't carry this page's
   scope attribute. The tooltip sizes itself in its own rem units (.badge-chip-tip*), so it is
   not inflated by the font-size bump. */
.summoner-profile-badges[b-94a9mxyemg]  .badge-chips {
    gap: 0.5rem;
}

.summoner-profile-badges[b-94a9mxyemg]  .badge-chip {
    font-size: 0.85rem;
    padding: 0.25rem 0.7rem;
}

.summoner-profile-badges-heading[b-94a9mxyemg],
.summoner-profile-roles-heading[b-94a9mxyemg],
.summoner-profile-seasons-heading[b-94a9mxyemg] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.summoner-profile-badges-caption[b-94a9mxyemg],
.summoner-profile-roles-caption[b-94a9mxyemg] {
    margin: 0.15rem 0 0.6rem;
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* The Roles card's spread scale: always all three of Single / Dual / Multi, the player's one lit. Equal
   thirds so the row fills the card whatever its width; the symbol sits over the label so the segments
   stay narrow enough for a third-width card. */
.summoner-profile-roles-spreads[b-94a9mxyemg] {
    display: flex;
    gap: 0.4rem;
    margin: 0.15rem 0 0.75rem;
}

.summoner-profile-roles-spread[b-94a9mxyemg] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    opacity: 0.7;
}

.summoner-profile-roles-spread-lit[b-94a9mxyemg] {
    border-color: var(--gold);
    color: var(--gold-bright);
    opacity: 1;
    background: rgba(200, 170, 110, 0.08);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.35);
}

/* Wraps so the smaller roles drop under the main one on a narrow card instead of squeezing it. */
.summoner-profile-roles-body[b-94a9mxyemg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
}

.summoner-profile-roles-main[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.summoner-profile-roles-main img[b-94a9mxyemg] {
    flex-shrink: 0;
}

.summoner-profile-roles-main-name[b-94a9mxyemg] {
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-roles-main-share[b-94a9mxyemg] {
    color: var(--text);
}

.summoner-profile-roles-main-tag[b-94a9mxyemg] {
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--gold-dark);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-bright);
}

.summoner-profile-roles-others[b-94a9mxyemg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.summoner-profile-roles-others li[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Past seasons is a bordered card like Roles and Playstyle (the shared box above); a plain list under
   the rank cards used to be enough, but it now shares a row with those cards and would look like loose
   text beside them. Rows have a fixed height so the skeleton can match them exactly. */
.summoner-profile-seasons-list[b-94a9mxyemg] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summoner-profile-season[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 1.75rem;
    font-size: 0.85rem;
}

/* Fixed width so the emblems form one column whatever the label ("S2025" vs "S2024 S3"). */
.summoner-profile-season-label[b-94a9mxyemg] {
    flex: 0 0 5.5rem;
    color: var(--text-dim);
}

.summoner-profile-season-tier[b-94a9mxyemg] {
    font-weight: 700;
    color: var(--gold-bright);
}

.summoner-profile-season-lp[b-94a9mxyemg] {
    color: var(--text-dim);
}

/* ::deep for the same reason as the scoreboard's emblem (.summoner-profile-scoreboard-rank in
   MatchScoreboard.razor.css). */
.summoner-profile-season[b-94a9mxyemg]  .rank-emblem {
    height: 1.25rem;
    width: auto;
}

.summoner-profile-matches-heading[b-94a9mxyemg] {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
}

.summoner-profile-matches-note[b-94a9mxyemg] {
    color: var(--text-dim);
}

.summoner-profile-match-list[b-94a9mxyemg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.summoner-profile-match[b-94a9mxyemg] {
    padding: 0;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 6px;
    /* No transform or filter on the row (or anything above a HoverCard): either makes it the containing
       block for the fixed-position cards inside it and pins them to the row. The hover "lift" is a
       border and shadow only. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Whole-row tint from the same --win/--lose tokens the left rail below uses -- two signals for the
   same outcome, not one recoloured into the other, so the distinction never rests on colour alone
   (the left rail survives a colour-blind or grayscale view; the tint just reinforces it). */
.summoner-profile-match-win[b-94a9mxyemg] {
    border-left-color: var(--win);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--win) 16%, transparent), transparent 40%),
        color-mix(in srgb, var(--panel) 70%, transparent);
}

.summoner-profile-match-loss[b-94a9mxyemg] {
    border-left-color: var(--lose);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--lose) 16%, transparent), transparent 40%),
        color-mix(in srgb, var(--panel) 70%, transparent);
}

/* Brighter gold border and a faint glow on hover and while expanded. Only the top, right and bottom
   edges change: the left rail keeps its win/loss colour so the outcome never rests on the tint alone. */
.summoner-profile-match:hover[b-94a9mxyemg],
.summoner-profile-match:has(details[open])[b-94a9mxyemg] {
    border-top-color: var(--gold-dark);
    border-right-color: var(--gold-dark);
    border-bottom-color: var(--gold-dark);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 10%, transparent);
}

/* Rows are deliberately taller than a single wrapping flex line now -- eight content columns of
   unequal weight (see the .razor file's own column comment), plus a ninth auto-sized track for
   the chevron below, not a list of same-size fields. `fr` tracks,
   not fixed rem/auto ones: a fixed-width column never shrinks below that width no matter how
   narrow the viewport gets. Proportional tracks plus `min-width: 0` on every direct child (grid's
   default min-width is the content's own min-content, which would defeat this the same way) let
   every column actually shrink -- text already wraps at its own spaces/slashes. The exception is
   the items grid (a fixed ~102px of icons that cannot wrap) and the placement chip: squeezed into
   a shrunken `fr` track they spill over their neighbours, so this nine-track row only holds above
   1000px, and the 1000px breakpoint below regroups the cells into rows instead of shrinking
   them further. Two tracks are not plain `fr`, for the same reason. The team-quality track is a
   fixed 9rem, not `auto`: every row is its own grid, so content-sized tracks would size each row
   differently and misalign the columns between rows; 9rem fits the widest chip, "Wood Division
   Team" (~143px), without spilling over the teams. The placement track has a 7rem floor for the
   widest rank chip ("The Final Boss", ~112px), and the items track a 6.4rem floor for the
   non-wrapping 24px icons. */
.summoner-profile-match summary[b-94a9mxyemg] {
    display: grid;
    grid-template-columns: 0.93fr 0.9fr 0.74fr minmax(7rem, 1.12fr) 0.8fr minmax(6.4rem, 1.02fr) 9rem 1.52fr auto;
    align-items: center;
    /* Tight rows: the collapsed list is scanned, not read, so a screenful should hold many games. */
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    list-style: none;
}

.summoner-profile-match summary > *[b-94a9mxyemg] {
    min-width: 0;
}

.summoner-profile-match summary[b-94a9mxyemg]::-webkit-details-marker {
    display: none;
}

/* Mirrors .app-nav-toggle::after (MainLayout.razor.css) so the two disclosures feel like the same
   control. No markup change needed: summary is display: grid, so this pseudo-element becomes a
   ninth grid item automatically -- see the ninth `auto` track above. */
.summoner-profile-match summary[b-94a9mxyemg]::after {
    content: '\25BE';
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--gold-dark);
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--gold);
    transition: transform 0.15s ease, border-color 0.15s ease;
    grid-row: 1 / span 2;
    grid-column: 9;
}

.summoner-profile-match summary:hover[b-94a9mxyemg]::after {
    border-color: var(--gold);
}

.summoner-profile-match details[open] summary[b-94a9mxyemg]::after {
    transform: rotate(180deg);
}

/* The achievement chips take a second grid row under the first seven tracks only, and the teams
   column (the tallest cell: five stacked players) spans both rows beside them. Putting the chips
   under the stats, instead of on a full-width row of their own beneath the teams, is what saves a
   whole chip-row of height. Every one of these items is placed explicitly: with the teams
   spanning two rows, auto-placement would no longer land the caret in the ninth track. */
.summoner-profile-match-badges[b-94a9mxyemg] {
    grid-row: 2;
    grid-column: 1 / 8;
}

.summoner-profile-match-team-quality[b-94a9mxyemg] {
    grid-row: 1 / span 2;
    grid-column: 7;
}

/* Flex with a gap so the stamp and the link read as one line whether or not a stamp arrived. No ancestor
   of the HoverCard may take transform or filter: its fixed, anchor-positioned panel would then be placed
   against that ancestor instead of the viewport. The stamp rotates itself, which is fine. */
.summoner-profile-lane-share[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0.4rem 0.9rem 0;
    font-size: 0.8rem;
}

/* A compact version of the site's .share-button look (ResultPanel), as a plain link. */
.summoner-profile-lane-share-link[b-94a9mxyemg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.summoner-profile-lane-share-link:hover[b-94a9mxyemg],
.summoner-profile-lane-share-link:focus-visible[b-94a9mxyemg] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
    color: var(--gold-bright);
    text-decoration: none;
}

.summoner-profile-match-teams[b-94a9mxyemg] {
    grid-row: 1 / span 2;
    grid-column: 8;
}

.summoner-profile-match-result[b-94a9mxyemg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-dim);
}

.summoner-profile-match-queue[b-94a9mxyemg] {
    order: 2;
    flex: 0 0 100%;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
}

.summoner-profile-match-outcome[b-94a9mxyemg] {
    order: 1;
    flex: 0 0 100%;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
}

.summoner-profile-match-win .summoner-profile-match-outcome[b-94a9mxyemg] {
    color: var(--win);
}

/* --lose itself is only ~3.8:1 on the loss row's red wash, below the 4.5:1 text needs; lightened for text. */
.summoner-profile-match-loss .summoner-profile-match-outcome[b-94a9mxyemg] {
    color: color-mix(in srgb, var(--lose) 75%, white);
}

/* Duration over age, two short lines rather than one long one: that is what lets the result track stay
   narrow and hand its width to the team names. */
.summoner-profile-match-when[b-94a9mxyemg] {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    font-size: 0.68rem;
    white-space: nowrap;
}

.summoner-profile-match-champion[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.summoner-profile-match-champion-icon[b-94a9mxyemg] {
    border-radius: 50%;
    /* A ring drawn as a shadow so the portrait keeps its 40px box and the grid does not shift. */
    box-shadow: 0 0 0 2px var(--gold-dark);
    transition: box-shadow 0.15s ease;
}

.summoner-profile-match summary:hover .summoner-profile-match-champion-icon[b-94a9mxyemg] {
    box-shadow: 0 0 0 2px var(--gold);
}

/* Wraps a champion icon in its build-page link. The icon already carries the visual; the link must
   not add an underline, a link colour or a line-height box around it, and needs its own focus ring
   because the summary's focus ring is drawn around the whole row, not around the icon a keyboard
   user has tabbed to. */
.summoner-profile-champion-link[b-94a9mxyemg] {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 3px;
}

.summoner-profile-champion-link:focus-visible[b-94a9mxyemg] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.summoner-profile-match-champion-portrait .summoner-profile-champion-link[b-94a9mxyemg] {
    border-radius: 6px;
}

.summoner-profile-match-champion-extras[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Centred in its cell, with the CS column: the two are short stacks of figures, and left-aligned
   they hug the neighbouring column's edge. Not applied in the single-column stack below. */
.summoner-profile-match-kda[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    line-height: 1.25;
}

.summoner-profile-match-kda-numbers[b-94a9mxyemg] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-match-deaths[b-94a9mxyemg] {
    color: var(--lose);
}

.summoner-profile-match-kda-ratio[b-94a9mxyemg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
}

/* Ratio tiers, the same "good game" idea as the scoreboard's high-KDA colour but with two steps. */
.summoner-profile-match-kda-good[b-94a9mxyemg] {
    color: var(--teal);
}

.summoner-profile-match-kda-elite[b-94a9mxyemg] {
    color: var(--gold-bright);
}

.summoner-profile-match-kp[b-94a9mxyemg] {
    margin-top: 0.15rem;
    padding: 0 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-alt);
    font-size: 0.7rem;
    color: var(--text-dim);
}

.summoner-profile-match-placement[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

/* The lane the viewer played, small and dim above the placement chip: context for the rating, not a
   figure of its own. */
.summoner-profile-match-role[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem 0.1rem 0.3rem;
    border: 1px solid var(--gold-deep);
    border-radius: 999px;
    background: var(--panel-alt);
    font-size: 0.7rem;
    color: var(--text-dim);
}

.summoner-profile-match-role img[b-94a9mxyemg] {
    width: 14px;
    height: 14px;
}

/* Mirrors .summoner-profile-scoreboard-sid-rank (MatchScoreboard.razor.css): the ordinal is a
   secondary figure, so it recedes to a dim, small subtext rather than competing with the KDA beside it. */
.summoner-profile-match-placement-rank[b-94a9mxyemg] {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    background: var(--panel-alt);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-match-cs-stats[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-dim);
}

.summoner-profile-match-stat-value[b-94a9mxyemg] {
    font-weight: 700;
    color: var(--text);
}

/* The average-tier line above the CS figures. ::deep for the same reason as the scoreboard's rank
   emblem: RankEmblem is a child component and never carries this page's scope attribute. */
.summoner-profile-match-avg-rank[b-94a9mxyemg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text);
}

.summoner-profile-match-avg-rank[b-94a9mxyemg]  .rank-emblem {
    height: 1rem;
    width: auto;
}

/* Three item slots per row over two rows, with the trinket (the 7th child, see
   MatchParticipant.ItemIds) in its own fourth column spanning both rows, so it reads as a separate
   slot beside the items as on op.gg. A flex-wrap row could not pin the trinket there: where it
   wraps depends on the available width. The 24px tracks are fixed because the slots are fixed-size
   icons; the summary's own `fr` tracks above are what absorb narrow viewports. */
.summoner-profile-match-items[b-94a9mxyemg] {
    display: grid;
    grid-template-columns: repeat(4, 24px);
    gap: 2px;
}

/* ::deep because the slot is now BuildTip's root span, and the trinket must still be pinned by position. */
.summoner-profile-match-items[b-94a9mxyemg]  > :nth-child(7) {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
}

/* Dark bevelled slots: a gold-deep ring plus a black rim drawn inside the icon's edge. The trinket
   (7th child, possibly inside a tip wrapper) is round like in-game. */
.summoner-profile-match-items img[b-94a9mxyemg] {
    border-radius: 4px;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--gold-deep);
    outline: 1px solid rgba(0, 0, 0, 0.55);
    outline-offset: -1px;
}

.summoner-profile-match-items[b-94a9mxyemg]  > :nth-child(7) img,
.summoner-profile-match-items > img:nth-child(7)[b-94a9mxyemg] {
    border-radius: 50%;
}

.summoner-profile-match-item-empty[b-94a9mxyemg] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--gold-deep);
    border-radius: 4px;
    background: var(--bg);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.8);
}

.summoner-profile-match-items > .summoner-profile-match-item-empty:nth-child(7)[b-94a9mxyemg] {
    border-radius: 50%;
}

.summoner-profile-match-spells[b-94a9mxyemg],
.summoner-profile-match-runes[b-94a9mxyemg] {
    display: flex;
    gap: 2px;
}

/* Dark framed slots: a gold-deep ring, and a black inset rim drawn as an outline over the icon's own edge. */
.summoner-profile-match-spells img[b-94a9mxyemg],
.summoner-profile-match-runes img[b-94a9mxyemg] {
    border-radius: 4px;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--gold-deep);
    outline: 1px solid rgba(0, 0, 0, 0.55);
    outline-offset: -1px;
}

.summoner-profile-match-teams[b-94a9mxyemg] {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.summoner-profile-match-team[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    padding-left: 0.3rem;
    border-left: 2px solid var(--blue);
}

/* The second column is the red side (see the .razor file's 100 = blue / 200 = red split). */
.summoner-profile-match-team + .summoner-profile-match-team[b-94a9mxyemg] {
    border-left-color: var(--lose);
}

.summoner-profile-match-team-player[b-94a9mxyemg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.1;
    color: var(--text-dim);
    min-width: 0;
}

.summoner-profile-match-team-player img[b-94a9mxyemg] {
    border-radius: 2px;
    flex-shrink: 0;
}

.summoner-profile-match-team-name[b-94a9mxyemg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inherits the name's colour and weight so a linked name looks like a plain one until hovered. */
.summoner-profile-player-link[b-94a9mxyemg] {
    color: inherit;
    text-decoration: none;
}

.summoner-profile-player-link:hover[b-94a9mxyemg],
.summoner-profile-player-link:focus-visible[b-94a9mxyemg] {
    text-decoration: underline;
}

.summoner-profile-match-team-subject[b-94a9mxyemg] {
    color: var(--gold-bright);
    font-weight: 700;
}

.summoner-profile-match-team-noicon[b-94a9mxyemg] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Absent entirely for a null ChampionLevel (see the .razor file's own comment) -- never a
   fabricated badge showing level 0. MatchScoreboard.razor.css repeats this box for its own level badge. */
.summoner-profile-match-level[b-94a9mxyemg] {
    position: absolute;
    display: flex;
    padding: 1px;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold) 50%, var(--gold-dark));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    text-align: center;
    font-weight: 700;
    color: var(--gold-bright);
}

/* The same badge scaled up for the summary row's 40px portrait (the scoreboard's is 36px). The
   wrapper below is what it is pinned to. */
.summoner-profile-match-level[b-94a9mxyemg] {
    right: -5px;
    bottom: -5px;
    min-width: 1.25rem;
    height: 1.4rem;
    line-height: 1;
    font-size: 0.6rem;
}

.summoner-profile-match-level > [aria-hidden="true"][b-94a9mxyemg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.summoner-profile-match-champion-portrait[b-94a9mxyemg] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Mid widths: seven single-row tracks no longer leave the items grid (fixed ~102px) and the
   placement chip room, and shrinking `fr` tracks further just makes them overlap their
   neighbours. So the cells regroup into rows over four tracks instead -- three equal columns plus
   the caret -- with the summary's identity cells (result, champion, KDA) on row 1, the
   placement/CS/items cells on row 2, the team-quality badge on row 3, the teams on row 4 and the achievement chips on row 5. The
   three equal tracks are `minmax(min-content, 1fr)` so a column can never be narrower than its own
   content: text and chips wrap inside their column, and nothing can paint over a neighbour. A
   second row for the placement, rather than dropping the teams column, keeps every cell visible.
   Explicit placement is needed because the auto-placed order would no longer match; it stops at
   421px, where the single-column stack below takes over with plain DOM order. */
@media (min-width: 421px) and (max-width: 1000px) {
    .summoner-profile-match summary[b-94a9mxyemg] {
        grid-template-columns: repeat(3, minmax(min-content, 1fr)) auto;
    }

    .summoner-profile-match-result[b-94a9mxyemg] {
        grid-row: 1;
        grid-column: 1;
    }

    .summoner-profile-match-champion[b-94a9mxyemg] {
        grid-row: 1;
        grid-column: 2;
    }

    .summoner-profile-match-kda[b-94a9mxyemg] {
        grid-row: 1;
        grid-column: 3;
    }

    /* Pinned to row 1 so it stays beside the identity cells rather than being auto-placed after the
       last item. */
    .summoner-profile-match summary[b-94a9mxyemg]::after {
        grid-row: 1;
        grid-column: 4;
    }

    .summoner-profile-match-placement[b-94a9mxyemg] {
        grid-row: 2;
        grid-column: 1;
    }

    .summoner-profile-match-cs-stats[b-94a9mxyemg] {
        grid-row: 2;
        grid-column: 2;
    }

    .summoner-profile-match-items[b-94a9mxyemg] {
        grid-row: 2;
        grid-column: 3;
    }

    .summoner-profile-match-team-quality[b-94a9mxyemg] {
        grid-row: 3;
        grid-column: 1 / -2;
    }

    .summoner-profile-match-teams[b-94a9mxyemg] {
        grid-row: 4;
        grid-column: 1 / -2;
    }

    .summoner-profile-match-badges[b-94a9mxyemg] {
        grid-row: 5;
        grid-column: 1 / -2;
    }
}

/* Two-stage degrade for the match summary grid as the viewport narrows, matching the phone-width
   trap the top-of-file body { overflow-x: clip } rule creates for anything that doesn't shrink:
   drop the team player names first (icons alone still show the compositions) before giving up on
   the seven-column grid entirely. */
@media (max-width: 560px) {
    .summoner-profile-match-team-name[b-94a9mxyemg] {
        display: none;
    }

    /* Without the names a team is just five 16px icons: a row of them is 16px tall, a column of
       them 84px, and there is nothing to read down a column. */
    .summoner-profile-match-teams[b-94a9mxyemg] {
        flex-direction: column;
        gap: 4px;
    }

    .summoner-profile-match-team[b-94a9mxyemg] {
        flex-direction: row;
        flex: none;
        gap: 4px;
    }
}

@media (max-width: 420px) {
    /* Two content columns plus the caret, instead of one stacked column: result and champion share
       the first row, KDA and CS the second, placement and items the third, and the team icons and
       chips take full-width rows below. Explicit placement throughout, because the desktop grid's
       own explicit rows (the teams spanning two) must all be reset together. */
    .summoner-profile-match summary[b-94a9mxyemg] {
        grid-template-columns: 1fr 1fr auto;
        gap: 0.4rem 0.5rem;
        padding: 0.5rem 0.65rem;
    }

    .summoner-profile-match-result[b-94a9mxyemg] {
        grid-row: 1;
        grid-column: 1;
    }

    .summoner-profile-match-champion[b-94a9mxyemg] {
        grid-row: 1;
        grid-column: 2;
    }

    .summoner-profile-match summary[b-94a9mxyemg]::after {
        grid-row: 1;
        grid-column: 3;
    }

    .summoner-profile-match-kda[b-94a9mxyemg] {
        grid-row: 2;
        grid-column: 1;
    }

    .summoner-profile-match-cs-stats[b-94a9mxyemg] {
        grid-row: 2;
        grid-column: 2 / -1;
    }

    .summoner-profile-match-placement[b-94a9mxyemg] {
        grid-row: 3;
        grid-column: 1;
    }

    .summoner-profile-match-items[b-94a9mxyemg] {
        grid-row: 3;
        grid-column: 2 / -1;
    }

    .summoner-profile-match-team-quality[b-94a9mxyemg] {
        grid-row: 4;
        grid-column: 1 / -1;
    }

    .summoner-profile-match-teams[b-94a9mxyemg] {
        grid-row: 5;
        grid-column: 1 / -1;
    }

    .summoner-profile-match-badges[b-94a9mxyemg] {
        grid-row: 6;
        grid-column: 1 / -1;
    }

    /* Left-aligned: in this stack every other cell (result, champion, placement) sits on its
       column's left edge, and a centred KDA or CS block reads as misplaced rather than deliberate.
       Centring only helps when the cells sit side by side in one row. */
    .summoner-profile-match-kda[b-94a9mxyemg],
    .summoner-profile-match-cs-stats[b-94a9mxyemg],
    .summoner-profile-match-placement[b-94a9mxyemg] {
        align-items: flex-start;
        text-align: left;
    }
}

/* Loading skeletons for the page's DeferredSections (profile, the overview row's cards, match list). The shimmer and the
   reduced-motion handling are copied from ChampionBuildPage.razor.css's .build-skeleton-block --
   .razor.css is scoped per component, so each page keeps its own copy.

   The header, queue cards and Playstyle box reuse the real classes (.summoner-profile-header,
   .summoner-profile-queue-card, .summoner-profile-badges) so their padding, borders and grid are the
   real ones; only the contents are swapped for shimmer blocks. The block sizes below are tuned to
   the real contents' heights so the page does not jump when the data arrives. Every width is capped
   with max-width: 100% because body { overflow-x: clip } would hide, not scroll, an overflowing bar
   at phone width. */
.summoner-profile-skeleton-block[b-94a9mxyemg] {
    display: block;
    max-width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--border) 25%, var(--panel-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: summoner-profile-skeleton-shimmer-b-94a9mxyemg 1.4s ease-in-out infinite;
}

@keyframes summoner-profile-skeleton-shimmer-b-94a9mxyemg {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .summoner-profile-skeleton-block[b-94a9mxyemg] {
        animation: none;
    }
}

/* Same 64px box as the real profile icon. */
.summoner-profile-skeleton-icon[b-94a9mxyemg] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.summoner-profile-skeleton-lines[b-94a9mxyemg] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.summoner-profile-skeleton-bar-name[b-94a9mxyemg] {
    width: 9rem;
    height: 1.1rem;
}

.summoner-profile-skeleton-bar-level[b-94a9mxyemg] {
    width: 5rem;
    height: 0.85rem;
}

/* RankEmblem's own box: 2.75rem tall at its art's 1.356:1 ratio (see RankEmblem.razor.css). */
.summoner-profile-skeleton-emblem[b-94a9mxyemg] {
    width: 3.73rem;
    height: 2.75rem;
}

.summoner-profile-skeleton-bar-title[b-94a9mxyemg] {
    width: 5rem;
    height: 0.7rem;
}

.summoner-profile-skeleton-bar-tier[b-94a9mxyemg] {
    width: 8rem;
    height: 1.2rem;
}

.summoner-profile-skeleton-bar-stat[b-94a9mxyemg] {
    width: 6rem;
    height: 0.85rem;
}

/* The three overview cards' skeletons were measured against rendered real cards (1000px wide, so a
   312px card): a heading line is 20px, the caption starts 2.4px under it and ends 9.6px above the
   content, which these bars reproduce with their margins so the first content block lands on the
   same y as the real one. */
.summoner-profile-skeleton-bar-badges-heading[b-94a9mxyemg] {
    width: 6rem;
    height: 1.25rem;
}

.summoner-profile-skeleton-bar-badges-caption[b-94a9mxyemg] {
    width: 12rem;
    height: 0.8rem;
    margin: 0.22rem 0 0.67rem;
}

/* Roles card: the heading and caption reuse the Playstyle bars above; the spread row is the real
   segments' 54px; the body is a 4.35rem (69.6px) stand-in for the real one, which is 40px with one
   other role, 69.6px with two or three (they wrap under the main role) and 96px with four. */
.summoner-profile-skeleton-roles-spreads[b-94a9mxyemg] {
    width: 100%;
    height: 3.375rem;
    margin: 0 0 0.75rem;
}

.summoner-profile-skeleton-roles-body[b-94a9mxyemg] {
    width: 14rem;
    height: 4.35rem;
}

/* Past seasons: a 20px heading bar and five rows matching the real list's 1.75rem rows, so the
   skeleton is as tall as the real card with all five seasons (213.2px at 1000px wide). */
.summoner-profile-skeleton-bar-seasons-heading[b-94a9mxyemg] {
    width: 7rem;
    height: 1.25rem;
}

.summoner-profile-skeleton-season[b-94a9mxyemg] {
    width: 14rem;
    height: 1.75rem;
}

.summoner-profile-skeleton-chips[b-94a9mxyemg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summoner-profile-skeleton-chip[b-94a9mxyemg] {
    width: 6rem;
    height: 1.75rem;
    border-radius: 999px;
}

.summoner-profile-skeleton-chip:nth-child(2n)[b-94a9mxyemg] {
    width: 8rem;
}

/* One collapsed match row without game badges, measured against a real row (five-player team
   column plus the summary's vertical padding) at the same three layouts the real summary has: the
   nine-track row above 1000px, the three-column regrouping up to 1000px, and the single column at
   420px and below. The real row is taller than this when it carries game badges (about 2rem more),
   so the placeholder is the floor, not an exact match for every row. Re-measured with the
   average-tier line: it adds nothing above 1000px, about 0.05rem at 800px (left out), and 1.15rem
   in the single column at 400px, which is why that height is the larger one. Nearly every real row
   now also carries the team-quality badge, which is its own grid row below 1000px: it adds about
   1.6rem at 421-1000px (20px cell plus the 0.35rem row gap) and 1.65rem at 420px and below (0.4rem
   gap), and nothing above 1000px, where it sits in row 1 beside the teams. */
.summoner-profile-skeleton-row[b-94a9mxyemg] {
    height: 6.6rem;
    border-radius: 2px;
}

@media (min-width: 421px) and (max-width: 1000px) {
    .summoner-profile-skeleton-row[b-94a9mxyemg] {
        height: 17.4rem;
    }
}

@media (max-width: 420px) {
    .summoner-profile-skeleton-row[b-94a9mxyemg] {
        height: 18.25rem;
    }
}
/* /Components/Pages/TierListIndex.razor.rz.scp.css */
.tier-list-index[b-pmr6k0tu34] {
    max-width: 62rem;
    margin: 0 auto;
}

.tier-list-index h1[b-pmr6k0tu34] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.tier-list-index > p[b-pmr6k0tu34] {
    margin-top: 0.75rem;
    line-height: 1.6;
    color: var(--text);
}

.tier-list-role-links[b-pmr6k0tu34] {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.tier-list-role-links li[b-pmr6k0tu34] {
    margin-top: 0.75rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.tier-list-role-links a[b-pmr6k0tu34] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: var(--gold);
}
/* /Components/Pages/TierListRole.razor.rz.scp.css */
.tier-list-page[b-1vq31x7gmn] {
    max-width: 62rem;
    margin: 0 auto;
}

.tier-list-page h1[b-1vq31x7gmn] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.tier-list-role-tier-nav[b-1vq31x7gmn] {
    margin-top: 1.5rem;
}

.tier-list-role-tier-nav h2[b-1vq31x7gmn] {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--gold);
    margin: 0 0 0.5rem;
}

.tier-list-role-tier-nav ul[b-1vq31x7gmn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tier-list-role-tier-section[b-1vq31x7gmn] {
    margin-top: 2rem;
    scroll-margin-top: 1rem;
}

.tier-list-role-tier-section h2[b-1vq31x7gmn] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: var(--gold);
}
/* /Components/PatchNote.razor.rz.scp.css */
/* A footnote, not body copy -- matches champion-ratings-label's/tier-list-ban-rate-note's identical
   role in their own pages. No specificity workaround needed here even though several hosting pages
   have their own "> p" rules: Blazor CSS isolation only stamps a component's scope attribute onto
   elements that component renders directly, so a parent's scoped selector can never match this
   component's own <p>. */
.patch-note[b-wgo8qg347o] {
    margin: 0.5rem 0;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
}
/* /Components/PickSuggestions.razor.rz.scp.css */
.pick-suggestions[b-q69j1amgtr] {
    padding: 1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.pick-suggestions-header[b-q69j1amgtr] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.pick-suggestions-title[b-q69j1amgtr] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.pick-suggestions-role-select[b-q69j1amgtr] {
    padding: 0.3rem 0.5rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.pick-suggestions-role-select:focus[b-q69j1amgtr] {
    outline: none;
    border-color: var(--gold);
}

.pick-suggestions-prompt[b-q69j1amgtr],
.pick-suggestions-empty[b-q69j1amgtr] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.pick-suggestion-row[b-q69j1amgtr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid transparent;
    border-radius: 0;
    max-width: 28rem;
    margin: 0 auto 0.4rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pick-suggestion-row:last-child[b-q69j1amgtr] {
    margin-bottom: 0;
}

.pick-suggestion-row:hover[b-q69j1amgtr] {
    background: rgba(200, 170, 110, 0.08);
    border-left-color: var(--gold);
}

.pick-suggestion-icon[b-q69j1amgtr] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-dark);
    border-radius: 0;
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.pick-suggestion-icon-placeholder[b-q69j1amgtr] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(200, 170, 110, 0.08);
    border: 1px solid var(--border);
}

.pick-suggestion-text-placeholder[b-q69j1amgtr] {
    flex: 1;
    height: 0.7rem;
    background: rgba(200, 170, 110, 0.08);
}

.pick-suggestion-info[b-q69j1amgtr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.pick-suggestion-name[b-q69j1amgtr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
}

.pick-suggestion-reason[b-q69j1amgtr] {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

.pick-suggestion-winrate[b-q69j1amgtr] {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pick-suggestion-winrate.win[b-q69j1amgtr] {
    color: var(--win);
}

.pick-suggestion-winrate.lose[b-q69j1amgtr] {
    color: var(--lose);
}
/* /Components/PoolPicks.razor.rz.scp.css */
.pool-picks[b-pakcqjfw9y] {
    padding: 1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.pool-picks-header[b-pakcqjfw9y] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.pool-picks-title[b-pakcqjfw9y] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.pool-picks-role-select[b-pakcqjfw9y] {
    padding: 0.3rem 0.5rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.pool-picks-role-select:focus[b-pakcqjfw9y] {
    outline: none;
    border-color: var(--gold);
}

.pool-picks-note[b-pakcqjfw9y] {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.pool-pick-row[b-pakcqjfw9y] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid transparent;
    border-radius: 0;
    max-width: 28rem;
    margin: 0 auto 0.4rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pool-pick-row:last-child[b-pakcqjfw9y] {
    margin-bottom: 0;
}

.pool-pick-row:hover[b-pakcqjfw9y] {
    background: rgba(200, 170, 110, 0.08);
    border-left-color: var(--gold);
}

.pool-pick-icon[b-pakcqjfw9y] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-dark);
    border-radius: 0;
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.pool-pick-icon-placeholder[b-pakcqjfw9y] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(200, 170, 110, 0.08);
    border: 1px solid var(--border);
}

.pool-pick-text-placeholder[b-pakcqjfw9y] {
    flex: 1;
    height: 0.7rem;
    background: rgba(200, 170, 110, 0.08);
}

.pool-pick-info[b-pakcqjfw9y] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.pool-pick-name[b-pakcqjfw9y] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
}

.pool-pick-chips[b-pakcqjfw9y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.pool-pick-chip[b-pakcqjfw9y] {
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    border: 1px solid var(--border);
    background: rgba(1, 10, 19, 0.55);
}

.pool-picks-footnote[b-pakcqjfw9y] {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-dim);
}
/* /Components/PostGame/PostGameReviewPanel.razor.rz.scp.css */
/* Existing tokens only (app.css); the site has a single dark theme. Outcome colours follow the scoreboard's lane
   chip: teal won, gold even, --lose lost. */
.post-game-review[b-irae7g1y3g] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* ---- header ---- */
.pgr-header[b-irae7g1y3g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
}

.pgr-result[b-irae7g1y3g] {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pgr-result-won[b-irae7g1y3g] { color: var(--teal); }
.pgr-result-lost[b-irae7g1y3g] { color: var(--lose); }

.pgr-matchup[b-irae7g1y3g] {
    margin: 0;
    color: var(--text);
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.pgr-meta[b-irae7g1y3g] {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* ---- sections ---- */
.pgr-section[b-irae7g1y3g] {
    min-width: 0;
}

.pgr-heading[b-irae7g1y3g] {
    margin: 0 0 0.5rem;
    color: var(--gold);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Tables scroll inside their own box so the page never spills at 375 px; body { overflow-x: clip } would
   otherwise crop them silently. */
.pgr-scroll[b-irae7g1y3g] {
    max-width: 100%;
    overflow-x: auto;
}

.pgr-table[b-irae7g1y3g] {
    width: 100%;
    /* Capped so the You / Opponent numbers stay near each other on a wide screen; below this width the table is
       still fluid, so the phone layout is unchanged. */
    max-width: 36rem;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.pgr-table th[b-irae7g1y3g],
.pgr-table td[b-irae7g1y3g] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.pgr-table thead th[b-irae7g1y3g] {
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pgr-num[b-irae7g1y3g] {
    text-align: center;
    color: var(--text);
    white-space: nowrap;
}

.pgr-lane-table thead th:first-child[b-irae7g1y3g],
.pgr-lane-table thead th:last-child[b-irae7g1y3g] {
    text-align: center;
}

.pgr-stat[b-irae7g1y3g] {
    color: var(--text-dim);
    font-weight: 500;
    text-align: left;
}

.pgr-lane-table .pgr-stat[b-irae7g1y3g] {
    text-align: center;
}

.pgr-checkpoint[b-irae7g1y3g] {
    margin-left: 0.2rem;
    color: var(--text-dim);
    font-size: 0.72rem;
    opacity: 0.8;
}

/* The leader is marked by weight and a tint, not colour alone. */
.pgr-leader[b-irae7g1y3g] {
    color: var(--teal);
    font-weight: 700;
    background: color-mix(in srgb, var(--teal) 10%, transparent);
}

/* ---- lane chips ---- */
.pgr-chip[b-irae7g1y3g] {
    display: inline-block;
    padding: 0 0.3rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.pgr-chip-won[b-irae7g1y3g] { color: var(--teal); }
.pgr-chip-even[b-irae7g1y3g] { color: var(--gold); }
.pgr-chip-lost[b-irae7g1y3g] { color: var(--lose); }

.pgr-chip-gap[b-irae7g1y3g] { color: var(--bg); }
.pgr-chip-gap.pgr-chip-won[b-irae7g1y3g] {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 0 8px color-mix(in srgb, var(--teal) 55%, transparent);
}
.pgr-chip-gap.pgr-chip-lost[b-irae7g1y3g] {
    background: var(--lose);
    border-color: var(--lose);
    box-shadow: 0 0 8px color-mix(in srgb, var(--lose) 55%, transparent);
}

.pgr-lane-verdict[b-irae7g1y3g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.pgr-lane-score[b-irae7g1y3g] {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.pgr-lane-outcome[b-irae7g1y3g] {
    color: var(--text-dim);
}

.pgr-lanes[b-irae7g1y3g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
}

.pgr-lane-item[b-irae7g1y3g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
}

.pgr-lane-role[b-irae7g1y3g] {
    color: var(--text-dim);
}

.pgr-stamp-line[b-irae7g1y3g] {
    margin: 0 0 0.6rem;
}

/* A neutral gold outline: the stamp text does not say which side took the lane, and the chips above already
   carry the per-lane colour. */
.pgr-stamp[b-irae7g1y3g] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 2px solid var(--gold);
    border-radius: 3px;
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

/* ---- cards (strengths, mistakes, gaps), after MatchCoachPanel's insight cards ---- */
.pgr-cards[b-irae7g1y3g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pgr-card[b-irae7g1y3g] {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 3px;
}

.pgr-card-good[b-irae7g1y3g] { border-left-color: var(--good); flex-direction: column; gap: 0; }
.pgr-card-warn[b-irae7g1y3g] { border-left-color: var(--warn); }

/* Key-gap cards have no icon, so they stack like the strengths. */
.pgr-gaps .pgr-card[b-irae7g1y3g] { flex-direction: column; gap: 0; }

.pgr-card-icon[b-irae7g1y3g] {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.pgr-card-body[b-irae7g1y3g] {
    min-width: 0;
}

.pgr-card-title[b-irae7g1y3g] {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
}

.pgr-phase[b-irae7g1y3g] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}

.pgr-card-detail[b-irae7g1y3g] {
    margin: 0.15rem 0 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---- focus: the centrepiece, so the goal is the largest text in the review ---- */
.pgr-focus[b-irae7g1y3g] {
    padding: 0.8rem 0.9rem;
    background: var(--panel-alt);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
}

.pgr-focus-list[b-irae7g1y3g] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pgr-focus-item[b-irae7g1y3g] {
    padding-left: 0.7rem;
    border-left: 3px solid var(--gold);
}

.pgr-goal[b-irae7g1y3g] {
    margin: 0;
    color: var(--gold-bright);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pgr-focus-title[b-irae7g1y3g] {
    margin: 0.25rem 0 0;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
}

.pgr-recurrence[b-irae7g1y3g] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--warn);
    border-radius: 999px;
    color: var(--warn);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.pgr-focus-detail[b-irae7g1y3g] {
    margin: 0.15rem 0 0;
    color: var(--text-dim);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---- last game's focus ---- */
.pgr-last-list[b-irae7g1y3g] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pgr-last-item[b-irae7g1y3g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    font-size: 0.85rem;
}

.pgr-last-mark[b-irae7g1y3g] {
    font-weight: 700;
    white-space: nowrap;
}

.pgr-last-ok .pgr-last-mark[b-irae7g1y3g] { color: var(--good); }
.pgr-last-repeated .pgr-last-mark[b-irae7g1y3g] { color: var(--warn); }

.pgr-last-title[b-irae7g1y3g] {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ---- coach details ---- */
.pgr-coach > summary[b-irae7g1y3g] {
    color: var(--gold);
    font-size: 0.85rem;
    cursor: pointer;
}

.pgr-coach[open] > summary[b-irae7g1y3g] {
    margin-bottom: 0.75rem;
}
/* /Components/PostGame/PostGameSection.razor.rz.scp.css */
.post-game-section[b-g7cc9qgfc2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.post-game-head[b-g7cc9qgfc2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.post-game-heading[b-g7cc9qgfc2] {
    margin: 0;
    color: var(--gold);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A quiet line, not a panel: while watching it sits under the live panel and must not compete with it. */
.post-game-status[b-g7cc9qgfc2] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.post-game-status p[b-g7cc9qgfc2] {
    margin: 0 0 0.5rem;
}

.post-game-hide[b-g7cc9qgfc2],
.post-game-retry[b-g7cc9qgfc2] {
    padding: 0.3rem 0.8rem;
    background: transparent;
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    color: var(--gold);
    font-size: 0.8rem;
    cursor: pointer;
}

.post-game-hide:hover[b-g7cc9qgfc2],
.post-game-retry:hover[b-g7cc9qgfc2] {
    border-color: var(--gold);
}
/* /Components/RankEmblem.razor.rz.scp.css */
/* Colour now comes from the vendored art itself (see RankEmblem.razor.cs's AssetPath), not a
   per-tier CSS class -- only sizing is left here. The art is 1.356:1 (winged, not square like the
   previous hex badge), so height drives the box and width is left to follow it -- setting both
   would squash the crest. Height matches the old hex badge's 2.75rem so the queue card's grid keeps
   its shape; the scoreboard's own instance is sized down further via ::deep (see
   SummonerProfilePage.razor.css's summoner-profile-scoreboard-rank rule). */
.rank-emblem[b-b7ruiy4w1l] {
    display: block;
    height: 2.75rem;
    width: auto;
    flex-shrink: 0;
}
/* /Components/ReliabilityChart.razor.rz.scp.css */
.reliability[b-odpkdtxw8u] {
    margin: 1rem 0;
}

.reliability-svg[b-odpkdtxw8u] {
    display: block;
    width: 100%;
    max-width: 28rem;
    height: auto;
}

.grid[b-odpkdtxw8u] {
    stroke: var(--border);
    stroke-width: 1;
}

.diagonal[b-odpkdtxw8u] {
    stroke: var(--text-dim);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.dot[b-odpkdtxw8u] {
    fill: var(--teal);
    fill-opacity: 0.75;
    stroke: var(--teal);
}

/* ::deep because the tick labels are emitted as raw markup and so carry no scope attribute. */
.reliability-svg[b-odpkdtxw8u]  .tick,
.axis-label[b-odpkdtxw8u] {
    fill: var(--text-dim);
    font-size: 11px;
}

figcaption[b-odpkdtxw8u] {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Visually hidden but still read by screen readers, which the SVG alone cannot serve. */
.chart-table[b-odpkdtxw8u] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/ResultPanel.razor.rz.scp.css */
.result-panel[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.placeholder-hint[b-eamoebiyw2] {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--text-dim);
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.result-panel-placeholder .lobby-grid[b-eamoebiyw2],
.result-panel-placeholder .result-extras[b-eamoebiyw2] {
    opacity: 0.5;
    pointer-events: none;
}

.lobby-grid[b-eamoebiyw2] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: start;
}

/* auto-fit, not 1fr 1fr: either box can render alone (CounterBuildBox hides with no enemy
   composition, LaneMatchupPanel with no lanes), and auto-fit collapses the empty track so the
   surviving box spans the full width instead of sitting in a half-width column. */
.result-extras[b-eamoebiyw2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.25rem;
}

/* Both children can render nothing at once (no enemy composition and no lanes), and Blazor's
   compile-time whitespace trimming means the wrapper is then genuinely :empty — collapse it
   instead of leaving .result-panel's flex gap around an invisible box. */
.result-extras:empty[b-eamoebiyw2] {
    display: none;
}

.team[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--border);
    padding: 0.9rem;
    min-width: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.team-ally[b-eamoebiyw2] {
    border-top: 2px solid var(--blue);
}

.team-enemy[b-eamoebiyw2] {
    border-top: 2px solid var(--lose);
}

.team-title[b-eamoebiyw2] {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.team-ally .team-title[b-eamoebiyw2] {
    color: #4fc3d9;
}

.team-enemy .team-title[b-eamoebiyw2] {
    color: #e8768a;
}

.champ-box[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The user's own row, set automatically from their Riot ID (see ResultPanel.razor.cs's OwnRole).
   An outline rather than a border/background change: this sits on the same element as
   .champ-badges' background-alpha hover states, so a border color change here would visually
   compete with those instead of reading as a distinct, whole-row mark. */
.champ-box-own[b-eamoebiyw2] {
    outline: 1px solid var(--win);
    outline-offset: 3px;
}

.counter-toggle[b-eamoebiyw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--gold-dark);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.counter-toggle:hover[b-eamoebiyw2],
.counter-toggle:focus-visible[b-eamoebiyw2] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
    color: var(--gold-bright);
}

.counter-toggle-caret[b-eamoebiyw2] {
    display: inline-block;
    letter-spacing: normal;
    transition: transform 0.15s ease;
}

/* Reuse the button's own ARIA state instead of adding a class for the open/closed toggle. */
.counter-toggle[aria-expanded="true"] .counter-toggle-caret[b-eamoebiyw2] {
    transform: rotate(180deg);
}

.counter-panel[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.3rem 0 0.4rem;
    padding: 0.4rem;
    background: rgba(1, 10, 19, 0.55);
    border: 1px solid var(--border);
}

.counter-sublist-heading[b-eamoebiyw2] {
    margin: 0.15rem 0 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.counter-sublist-heading:first-child[b-eamoebiyw2] {
    margin-top: 0;
}

.counter-empty[b-eamoebiyw2] {
    margin: 0;
    padding: 0.2rem 0;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
}

.counter-row[b-eamoebiyw2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.counter-icon[b-eamoebiyw2] {
    width: 22px;
    height: 22px;
    border: 1px solid var(--gold-dark);
    flex-shrink: 0;
    background: #000;
    object-fit: cover;
}

.counter-icon-placeholder[b-eamoebiyw2] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: rgba(200, 170, 110, 0.08);
    border: 1px solid var(--border);
}

.counter-text-placeholder[b-eamoebiyw2] {
    flex: 1;
    height: 0.55rem;
    background: rgba(200, 170, 110, 0.08);
}

.counter-name[b-eamoebiyw2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text);
}

.counter-winrate[b-eamoebiyw2] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 700;
}

.counter-winrate.win[b-eamoebiyw2] {
    color: var(--win);
}

.counter-winrate.lose[b-eamoebiyw2] {
    color: var(--lose);
}

.counter-games[b-eamoebiyw2] {
    flex-shrink: 0;
    width: 3.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.65rem;
    color: var(--text-dim);
}

.comp-strip[b-eamoebiyw2] {
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-top: 1px solid var(--gold-deep);
    border-radius: 0;
    background: rgba(1, 10, 19, 0.55);
}

/* Mirrors .lane-matchups-title so the result panel's boxes share one heading voice. */
.comp-strip-title[b-eamoebiyw2] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.comp-badge[b-eamoebiyw2] {
    padding: 0.2rem 0.45rem;
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: help;
    transition: background-color 0.15s ease;
}

.comp-badge:focus-visible[b-eamoebiyw2] {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.comp-badge-good[b-eamoebiyw2] {
    border-color: var(--good);
    color: var(--good);
    background: rgba(63, 185, 80, 0.12);
}

/* Not `filter` for the hover/focus brighten: a `filter` other than `none` makes the badge a
   containing block for absolutely positioned descendants, which would anchor .comp-tip to the
   badge instead of its row and reintroduce the right-edge clipping the full-width tip is
   there to avoid. A background-alpha bump does the same job safely. */
.comp-badge-good:hover[b-eamoebiyw2],
.comp-badge-good:focus-visible[b-eamoebiyw2] {
    background: rgba(63, 185, 80, 0.24);
}

.comp-badge-warn[b-eamoebiyw2] {
    border-color: var(--warn);
    color: var(--warn);
    background: rgba(217, 164, 65, 0.12);
}

.comp-badge-warn:hover[b-eamoebiyw2],
.comp-badge-warn:focus-visible[b-eamoebiyw2] {
    background: rgba(217, 164, 65, 0.24);
}

.comp-badge-bad[b-eamoebiyw2] {
    border-color: var(--lose);
    color: var(--lose);
    background: rgba(232, 64, 87, 0.12);
}

.comp-badge-bad:hover[b-eamoebiyw2],
.comp-badge-bad:focus-visible[b-eamoebiyw2] {
    background: rgba(232, 64, 87, 0.24);
}

.comp-tip[b-eamoebiyw2] {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0.5rem 0.6rem;
    background: var(--panel-alt);
    border: 1px solid var(--gold-deep);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    /* The badge's uppercase transform and letter-spacing would otherwise leak into the tooltip
       copy below it — same trap the old .comp-info rule had to guard against. */
    text-transform: none;
    letter-spacing: normal;
}

.comp-badge:hover .comp-tip[b-eamoebiyw2],
.comp-badge:focus-visible .comp-tip[b-eamoebiyw2] {
    opacity: 1;
    visibility: visible;
}

.comp-tip-title[b-eamoebiyw2] {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comp-tip-body[b-eamoebiyw2] {
    display: block;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.45;
}

/* Per-champion badges (ResultPanel.razor's champ-box blocks) are the only users of
   .comp-badge/.comp-tip now that the team-level strip renders through TeamBadgeChips; they stay
   here rather than moving into a shared component, because Blazor scoped CSS is per-component and
   that would relocate this whole block (and its anchoring/z-index reasoning) for a refactor this
   feature doesn't need. */
.champ-badges[b-eamoebiyw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.3rem;
    /* Anchors .comp-tip below, so the tooltip spans the whole row rather than just the hovered
       badge. */
    position: relative;
}

.champ-badges .comp-badge[b-eamoebiyw2] {
    /* Smaller than the team-level badges below the row: these sit inside one champion row
       rather than a full-width strip. */
    padding: 0.12rem 0.35rem;
    font-size: 0.56rem;
}

.champ-badges .comp-tip[b-eamoebiyw2] {
    /* .comp-tip opens upward by default (see its own bottom rule above); flipped to open downward
       here because upward would clip against the team title for the first champion row in a
       column. .comp-tip's inherited z-index: 1 already clears the champ-box row below without
       raising it further — .comp-tip is positioned with a positive z-index, so it paints above
       any of the row below's plain (non-positioned) content regardless of DOM order. */
    top: calc(100% + 0.35rem);
    bottom: auto;
}

.gauge[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    min-width: 14rem;
}

.gauge-value[b-eamoebiyw2] {
    font-family: var(--font-display);
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gauge-value.win[b-eamoebiyw2] {
    color: var(--win);
    text-shadow: 0 0 24px rgba(10, 200, 185, 0.5);
}

.gauge-value.lose[b-eamoebiyw2] {
    color: var(--lose);
    text-shadow: 0 0 24px rgba(232, 64, 87, 0.45);
}

.gauge-value.gauge-pending[b-eamoebiyw2] {
    color: var(--text-dim);
}

.gauge-label[b-eamoebiyw2] {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.6;
    max-width: 13rem;
}

.gauge-band[b-eamoebiyw2] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.gauge-band.band-really-low[b-eamoebiyw2],
.band-seg.band-really-low[b-eamoebiyw2] {
    color: var(--band-really-low);
}

.gauge-band.band-low[b-eamoebiyw2],
.band-seg.band-low[b-eamoebiyw2] {
    color: var(--band-low);
}

.gauge-band.band-neutral[b-eamoebiyw2],
.band-seg.band-neutral[b-eamoebiyw2] {
    color: var(--band-neutral);
}

.gauge-band.band-high[b-eamoebiyw2],
.band-seg.band-high[b-eamoebiyw2] {
    color: var(--band-high);
}

.gauge-band.band-really-high[b-eamoebiyw2],
.band-seg.band-really-high[b-eamoebiyw2] {
    color: var(--band-really-high);
}

.gauge-band.band-really-low[b-eamoebiyw2] {
    text-shadow: 0 0 18px rgba(255, 70, 85, 0.5);
}

.gauge-band.band-low[b-eamoebiyw2] {
    text-shadow: 0 0 18px rgba(224, 122, 107, 0.45);
}

.gauge-band.band-neutral[b-eamoebiyw2] {
    text-shadow: none;
}

.gauge-band.band-high[b-eamoebiyw2] {
    text-shadow: 0 0 18px rgba(79, 195, 217, 0.45);
}

.gauge-band.band-really-high[b-eamoebiyw2] {
    text-shadow: 0 0 18px rgba(10, 200, 185, 0.5);
}

.band-strip[b-eamoebiyw2] {
    position: relative;
    display: flex;
    width: 13rem;
    height: 0.55rem;
    border: 1px solid var(--gold-deep);
}

.band-seg[b-eamoebiyw2] {
    height: 100%;
    background: currentColor;
    border-right: 1px solid var(--bg);
}

.band-seg:last-child[b-eamoebiyw2] {
    border-right: none;
}

.band-marker[b-eamoebiyw2] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(240, 230, 210, 0.8);
    transform: translateX(-50%);
    transition: left 0.4s ease;
}

.gauge-percentile[b-eamoebiyw2] {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

.gauge-note[b-eamoebiyw2] {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--warn);
    text-align: center;
}

.dodge-block[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    padding: 0.7rem 0.9rem;
    width: 100%;
    border: 1px solid var(--border);
    border-top: 1px solid var(--gold-deep);
    background: rgba(1, 10, 19, 0.55);
}

/* The verdict is the trustworthy, headline part of this block — styled with the same weight
   as the gauge-band text above it. The dodge-choice toggle sits directly beneath it because
   the dodge cost is the one input that changes the verdict, so it belongs next to what it
   changes. .dodge-compare is the reason for that verdict in pure probability, and is
   deliberately smaller and dimmer than the verdict since it is supporting evidence, not the
   headline. */
.dodge-verdict[b-eamoebiyw2] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
}

.dodge-verdict-dodge[b-eamoebiyw2] {
    color: var(--lose);
}

.dodge-verdict-play[b-eamoebiyw2] {
    color: var(--win);
}

.dodge-compare[b-eamoebiyw2] {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dodge-toggle[b-eamoebiyw2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.dodge-toggle label[b-eamoebiyw2] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.dodge-select[b-eamoebiyw2] {
    padding: 0.2rem 0.4rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.72rem;
}

.dodge-select:focus[b-eamoebiyw2] {
    outline: none;
    border-color: var(--gold);
}

.share-button[b-eamoebiyw2] {
    margin-top: 0.6rem;
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.share-button:hover[b-eamoebiyw2],
.share-button:focus-visible[b-eamoebiyw2] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
    color: var(--gold-bright);
}

.share-fallback[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.share-fallback label[b-eamoebiyw2] {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--warn);
    text-align: center;
}

.share-url-input[b-eamoebiyw2] {
    width: 100%;
    max-width: 16rem;
    padding: 0.35rem 0.5rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.7rem;
    text-align: center;
}

.share-url-input:focus[b-eamoebiyw2] {
    outline: none;
    border-color: var(--gold);
}

.sponsor-nudge[b-eamoebiyw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 15rem;
    margin-top: 0.75rem;
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: center;
    color: var(--text-dim);
}

/* ::deep to reach inside SponsorButton: the gauge column is narrow, so the shared button needs to
   render a size down here without the component growing a variant parameter for one caller. */
.sponsor-nudge[b-eamoebiyw2]  .sponsor-button {
    padding: 0.3rem 1rem;
    font-size: 0.62rem;
}

@media (max-width: 760px) {
    .lobby-grid[b-eamoebiyw2] {
        grid-template-columns: 1fr;
    }

    .gauge[b-eamoebiyw2] {
        order: -1;
    }
}
/* /Components/SidCard.razor.rz.scp.css */
.sid-card[b-d0mklqxblr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    --card-positive: #3ddc97;
    --card-neutral: #9fb3c8;
    --card-negative: #ff3b5c;
}

.sid-card-head[b-d0mklqxblr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sid-card-title[b-d0mklqxblr] {
    font-size: 0.85rem;
    font-weight: 700;
}

.sid-card-title.positive[b-d0mklqxblr] { color: var(--card-positive); }
.sid-card-title.neutral[b-d0mklqxblr] { color: var(--card-neutral); }
.sid-card-title.negative[b-d0mklqxblr] { color: var(--card-negative); }
.sid-card-title.standout[b-d0mklqxblr] { color: var(--gold); }

.sid-card-title-plain[b-d0mklqxblr] {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A hexagon is an outer gold one with a dark one inset by the border width: clip-path cuts away any
   real border, so the "border" is the outer shape showing around the inner one. */
.sid-card-gem[b-d0mklqxblr] {
    flex: none;
    display: inline-flex;
    width: 3rem;
    height: 3.4rem;
    padding: 2px;
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dark));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.sid-card-gem-inner[b-d0mklqxblr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, var(--panel-alt), var(--bg));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
}

.sid-card-sub[b-d0mklqxblr] {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.sid-card-lines[b-d0mklqxblr] {
    display: grid;
    grid-template-columns: auto 1fr 4rem;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-top: 0.15rem;
}

.sid-card-label[b-d0mklqxblr] {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.sid-card-value[b-d0mklqxblr] {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
}

.sid-card-bar[b-d0mklqxblr] {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.sid-card-fill[b-d0mklqxblr] {
    display: block;
    height: 100%;
    background: var(--gold);
}

.sid-card-fill.high[b-d0mklqxblr] { background: var(--teal); }
.sid-card-fill.low[b-d0mklqxblr] { background: var(--lose); }

.sid-card-foot[b-d0mklqxblr] {
    margin-top: 0.15rem;
    font-size: 0.65rem;
    color: var(--text-dim);
    opacity: 0.8;
}
/* /Components/SourceAttribution.razor.rz.scp.css */
/* Body copy, not a footnote -- this is the AdSense-facing attribution/commentary the page needs
   to carry real weight, so it matches the page's other original-analysis paragraphs (e.g.
   champion-context in ChampionPage.razor.css) rather than PatchNote's dimmer,
   smaller footnote styling. */
.source-attribution[b-17z2kon8me] {
    margin-top: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}
/* /Components/SponsorButton.razor.rz.scp.css */
.sponsor-button[b-mckp5h9w1q] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.14), rgba(200, 170, 110, 0.03));
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sponsor-button:hover[b-mckp5h9w1q],
.sponsor-button:focus-visible[b-mckp5h9w1q] {
    background: linear-gradient(180deg, rgba(200, 170, 110, 0.3), rgba(200, 170, 110, 0.1));
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(200, 170, 110, 0.3);
    color: var(--gold-bright);
}

/* Sizes off the label so the icon tracks font-size wherever the button is used (the result panel
   renders it a size down); the svg's width/height attributes stay as the no-CSS fallback. */
.sponsor-button svg[b-mckp5h9w1q] {
    width: 1em;
    height: 1em;
}
/* /Components/TeammatePanel.razor.rz.scp.css */
.teammate-panel[b-o90e07evr2] {
    padding: 1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(16, 32, 47, 0.9), rgba(11, 23, 37, 0.9));
    border: 1px solid var(--gold-deep);
    box-shadow: inset 0 0 0 1px rgba(1, 10, 19, 0.8), 0 6px 24px rgba(0, 0, 0, 0.45);
}

.teammate-panel-header[b-o90e07evr2] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.teammate-panel-title[b-o90e07evr2] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.teammate-check-button[b-o90e07evr2] {
    padding: 0.35rem 0.9rem;
    background: rgba(200, 170, 110, 0.1);
    color: var(--gold);
    border: 1px solid var(--gold-dark);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.teammate-check-button:hover:not(:disabled)[b-o90e07evr2] {
    background: rgba(200, 170, 110, 0.2);
    border-color: var(--gold);
}

.teammate-check-button:disabled[b-o90e07evr2] {
    opacity: 0.5;
    cursor: default;
}

.teammate-panel-empty[b-o90e07evr2],
.teammate-panel-hint[b-o90e07evr2] {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.teammate-panel-error[b-o90e07evr2] {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--lose);
}

.teammate-row[b-o90e07evr2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid transparent;
    max-width: 32rem;
    margin: 0 auto 0.4rem;
}

.teammate-row:last-child[b-o90e07evr2] {
    margin-bottom: 0;
}

.teammate-name[b-o90e07evr2] {
    flex-shrink: 0;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.teammate-tag-sep[b-o90e07evr2] {
    flex-shrink: 0;
    color: var(--text-dim);
}

.teammate-tag-input[b-o90e07evr2] {
    width: 4.5rem;
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.8rem;
}

.teammate-tag-input:focus[b-o90e07evr2] {
    outline: none;
    border-color: var(--gold);
}

.teammate-status[b-o90e07evr2] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.teammate-status-ranked[b-o90e07evr2] {
    color: var(--text);
    font-weight: 600;
}

.teammate-status-unranked[b-o90e07evr2] {
    color: var(--text-dim);
}

.teammate-status-not-found[b-o90e07evr2],
.teammate-status-invalid[b-o90e07evr2] {
    color: var(--lose);
}

.teammate-status-not-checked[b-o90e07evr2] {
    color: var(--text-dim);
}

.teammate-retry-button[b-o90e07evr2] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.teammate-retry-button:hover:not(:disabled)[b-o90e07evr2] {
    border-color: var(--gold);
    color: var(--gold);
}

.teammate-retry-button:disabled[b-o90e07evr2] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/TeamQualityCard.razor.rz.scp.css */
.tq-card[b-17ygfv8j9d] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    --card-positive: #3ddc97;
    --card-neutral: #9fb3c8;
    --card-negative: #ff3b5c;
}

.tq-card-title[b-17ygfv8j9d] {
    font-size: 0.85rem;
    font-weight: 700;
}

.tq-card-title.positive[b-17ygfv8j9d] { color: var(--card-positive); }
.tq-card-title.neutral[b-17ygfv8j9d] { color: var(--card-neutral); }
.tq-card-title.negative[b-17ygfv8j9d] { color: var(--card-negative); }
.tq-card-title.standout[b-17ygfv8j9d] { color: var(--gold); }

.tq-card-big[b-17ygfv8j9d] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.tq-card-list[b-17ygfv8j9d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text);
}

.tq-card-item[b-17ygfv8j9d] {
    display: block;
    position: relative;
    padding-left: 0.9rem;
}

/* A small gold diamond instead of the default disc, to match the hextech frame. */
.tq-card-item[b-17ygfv8j9d]::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.4em;
    width: 0.3rem;
    height: 0.3rem;
    background: var(--gold);
    transform: rotate(45deg);
}

.tq-card-dim[b-17ygfv8j9d],
.tq-card-explain[b-17ygfv8j9d] {
    color: var(--text-dim);
}

.tq-card-explain[b-17ygfv8j9d] {
    font-size: 0.68rem;
}

.tq-card-ladder[b-17ygfv8j9d] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.tq-card-tier[b-17ygfv8j9d] {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

.tq-card-marker[b-17ygfv8j9d] {
    width: 0.7rem;
}

.tq-card-tier-name[b-17ygfv8j9d] {
    flex: 1;
}

.tq-card-tier-range[b-17ygfv8j9d] {
    font-variant-numeric: tabular-nums;
}

.tq-card-tier.current[b-17ygfv8j9d] {
    font-weight: 700;
}

.tq-card-tier.current.positive[b-17ygfv8j9d] { color: var(--card-positive); }
.tq-card-tier.current.neutral[b-17ygfv8j9d] { color: var(--card-neutral); }
.tq-card-tier.current.negative[b-17ygfv8j9d] { color: var(--card-negative); }
/* /Components/TierBadge.razor.rz.scp.css */
/* clip-path also clips an element's own border and box-shadow, so fills come from background and the
   OP glow from a drop-shadow filter on this wrapper, which sits outside the clipped box. */
.tier-badge-wrap[b-wm1ni29e6j] {
    display: inline-flex;
    vertical-align: middle;
}

.tier-badge[b-wm1ni29e6j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    box-sizing: border-box;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.tier-op[b-wm1ni29e6j] { filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.75)); }
.tier-op .tier-badge[b-wm1ni29e6j] {
    color: var(--gold-bright);
    background: var(--gold-dark);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

/* The diamond's inscribed area is small, so its label is smaller to stay inside the edges. */
.tier-1 .tier-badge[b-wm1ni29e6j] {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--teal) 50%, var(--panel));
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    font-size: 0.72rem;
}

/* The point at the bottom leaves the visual mass up top, so the label is lifted off the box centre. */
.tier-2 .tier-badge[b-wm1ni29e6j] {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--blue) 50%, var(--panel));
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    padding-bottom: 0.2rem;
}

.tier-3 .tier-badge[b-wm1ni29e6j] {
    color: var(--text);
    background: color-mix(in srgb, var(--text-dim) 30%, var(--panel));
    clip-path: circle(50%);
}

.tier-4 .tier-badge[b-wm1ni29e6j] {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--warn) 50%, var(--panel));
    clip-path: inset(6% round 3px);
}

/* The triangle's centroid sits about a third of the way down, hence the lift and smaller label. */
.tier-5 .tier-badge[b-wm1ni29e6j] {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--lose) 55%, var(--panel));
    clip-path: polygon(0 5%, 100% 5%, 50% 100%);
    font-size: 0.7rem;
    padding-bottom: 0.28rem;
}

/* A dashed outline needs a border, which clip-path would cut, so this one is shaped with border-radius. */
.tier-none .tier-badge[b-wm1ni29e6j] {
    color: var(--text-dim);
    border: 1px dashed var(--text-dim);
    border-radius: 50%;
}
/* /Components/TierListChampionTable.razor.rz.scp.css */
.tier-list-empty[b-dhrj02qjs0] {
    color: var(--text-dim);
    line-height: 1.6;
}

/* Lets the table scroll horizontally within its own box on a narrow screen, rather than pushing
   the whole page into sideways scroll -- same reasoning as ArticlePage.razor.css's .table-scroll,
   duplicated here because that rule is scoped to ArticlePage and can't be reached across the
   scope boundary. */
.tier-list-table-scroll[b-dhrj02qjs0] {
    overflow-x: auto;
}

.tier-list-table[b-dhrj02qjs0] {
    width: 100%;
    border-collapse: collapse;
}

.tier-list-table th[b-dhrj02qjs0],
.tier-list-table td[b-dhrj02qjs0] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.tier-list-table th[b-dhrj02qjs0] {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tier-list-champion[b-dhrj02qjs0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* The icon and name are one link to the champion's page; it inherits the cell's text colour so the
   table doesn't turn into a column of default-blue links. */
.tier-list-champion a[b-dhrj02qjs0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.tier-list-champion a:hover span[b-dhrj02qjs0] {
    text-decoration: underline;
}

.tier-list-champion img[b-dhrj02qjs0] {
    border-radius: 4px;
}

/* Marks a row's Edge cell when it clears the 0.5σ noise-floor bar -- no separate column, just a
   highlight on the figure that already carries the information. */
.tier-list-edge-clears[b-dhrj02qjs0] {
    color: var(--gold-bright);
    font-weight: 700;
}

/* A footnote, not a paragraph of analysis -- smaller and dimmer than the noise-floor/concentration
   copy below it, matching champion-ratings-label's identical role on the champion page. */
.tier-list-ban-rate-note[b-dhrj02qjs0] {
    margin-top: 1rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
}

.tier-list-noise-floor[b-dhrj02qjs0] {
    margin-top: 0.75rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

.tier-list-dispersion[b-dhrj02qjs0],
.tier-list-concentration[b-dhrj02qjs0],
.tier-list-popularity[b-dhrj02qjs0] {
    margin-top: 0.5rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

.tier-list-other-tiers[b-dhrj02qjs0] {
    margin-top: 1.5rem;
}

.tier-list-other-tiers h2[b-dhrj02qjs0] {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--gold);
    margin: 0 0 0.5rem;
}

.tier-list-other-tiers ul[b-dhrj02qjs0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tier-list-other-tiers [aria-current="page"][b-dhrj02qjs0] {
    color: var(--gold-bright);
    font-weight: 700;
}

.tier-list-guides[b-dhrj02qjs0] {
    margin-top: 1.5rem;
    color: var(--text-dim);
    line-height: 1.6;
}