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

.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;
}

.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 -- same reasoning as ResultPanel's .comp-badges. */
    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;
}

.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/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;
}

.tier-dropdown[b-kfesdr7k8s] {
    position: relative;
    min-width: 8rem;
}

.tier-dropdown summary[b-kfesdr7k8s] {
    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-kfesdr7k8s]::-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-kfesdr7k8s] {
    outline: none;
}

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

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

.tier-dropdown-box[b-kfesdr7k8s] {
    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-kfesdr7k8s]::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-kfesdr7k8s],
.tier-dropdown[open] .tier-dropdown-box[b-kfesdr7k8s] {
    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-kfesdr7k8s] {
    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 ul[b-kfesdr7k8s] {
    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 ul a[b-kfesdr7k8s] {
    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 ul a:hover[b-kfesdr7k8s] {
    background: var(--panel);
    color: var(--gold);
}

.tier-dropdown ul a[aria-current="true"][b-kfesdr7k8s] {
    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-kfesdr7k8s]  .rank-emblem {
    height: 1.25rem;
}

.tier-dropdown img[b-kfesdr7k8s] {
    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-kfesdr7k8s] {
        position: static;
    }

    .tier-dropdown ul[b-kfesdr7k8s] {
        right: 0;
    }
}

.role-buttons[b-kfesdr7k8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.role-button[b-kfesdr7k8s] {
    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-kfesdr7k8s] {
    border-color: var(--gold-dark);
}

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

/* 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] {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    text-align: center;
    color: var(--text-dim);
}

/* The wrapper, not the page, scrolls sideways on a narrow screen. A sticky header needs a bounded
   height to stick against, hence max-height + vertical scroll here too. */
.tier-scroll[b-kfesdr7k8s] {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

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;
}

/* 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-kfesdr7k8s] {
    display: inline-flex;
    vertical-align: middle;
}

.tier-badge[b-kfesdr7k8s] {
    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-kfesdr7k8s] { filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.75)); }
.tier-op .tier-badge[b-kfesdr7k8s] {
    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-kfesdr7k8s] {
    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-kfesdr7k8s] {
    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-kfesdr7k8s] {
    color: var(--text);
    background: color-mix(in srgb, var(--text-dim) 30%, var(--panel));
    clip-path: circle(50%);
}

.tier-4 .tier-badge[b-kfesdr7k8s] {
    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-kfesdr7k8s] {
    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-kfesdr7k8s] {
    color: var(--text-dim);
    border: 1px dashed var(--text-dim);
    border-radius: 50%;
}

.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);
    }
}

.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;
    }
}
/* /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/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/DraftLuckSummary.razor.rz.scp.css */
/* Visual language borrowed from LiveMatchAnnouncement (teal border + left rule, teal gradient over
   --panel, glow, solid "New" pill) so the two read as the same family of "look here" element --
   but this one is a link, so it adds hover/focus states and no dismiss button. */
/* No flex-wrap: the pill and the arrow must stay 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
   .draft-luck-summary-body's min-width: 0 below), never pushing the arrow onto a line of its own. */
.draft-luck-summary[b-kz9g15mpym] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1rem 0 0;
    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);
    color: var(--text);
    /* A whole-card link: underlining the copy would read as a raw hyperlink, not a call to action. */
    text-decoration: none;
    animation: draft-luck-summary-fade-in-b-kz9g15mpym 0.2s ease-out;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.draft-luck-summary:hover[b-kz9g15mpym],
.draft-luck-summary:focus-visible[b-kz9g15mpym] {
    background: linear-gradient(135deg, rgba(10, 200, 185, 0.34), rgba(10, 200, 185, 0.18)), var(--panel);
    box-shadow: 0 0 20px rgba(10, 200, 185, 0.4);
}

.draft-luck-summary:focus-visible[b-kz9g15mpym] {
    outline: 2px solid #96f5e6;
    outline-offset: 2px;
}

@keyframes draft-luck-summary-fade-in-b-kz9g15mpym {
    from { opacity: 0; }
    to { opacity: 1; }
}

.draft-luck-summary-pill[b-kz9g15mpym] {
    flex-shrink: 0;
    /* Lines the pill up with the text's first line -- its 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 with min-width: 0 (not a fixed basis): flex items default to min-width: auto and refuse
   to shrink below their content width, which is what would force the row wide on a narrow phone. */
.draft-luck-summary-body[b-kz9g15mpym] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* The bright teal of the notice's <strong> -- 9.2:1 against the lightest end of the tint, well past
   the 4.5:1 floor. */
.draft-luck-summary-text[b-kz9g15mpym] {
    color: #96f5e6;
    font-weight: 700;
}

/* The figure line sits in --text, not the bright teal, so the headline stays the single accent and
   the figure keeps >= 4.5:1 over the teal tint. */
.draft-luck-summary-figure[b-kz9g15mpym] {
    color: var(--text);
}

/* The CTA sub-line sits in --text, not --text-dim, so it keeps >= 4.5:1 over the teal tint. */
.draft-luck-summary-cta[b-kz9g15mpym] {
    color: var(--text);
}

.draft-luck-summary-arrow[b-kz9g15mpym] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #96f5e6;
    font-weight: 700;
    transition: transform 0.15s ease;
}

.draft-luck-summary:hover .draft-luck-summary-arrow[b-kz9g15mpym],
.draft-luck-summary:focus-visible .draft-luck-summary-arrow[b-kz9g15mpym] {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .draft-luck-summary[b-kz9g15mpym] {
        animation: none;
        transition: none;
    }

    .draft-luck-summary-arrow[b-kz9g15mpym] {
        transition: none;
    }
}
/* /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/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-display);
    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;
    }

        .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 LiveMatchAnnouncement.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;
}

.app-nav-search-form[b-yyo02n32e9] {
    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));
}

    .app-nav-search-form select[b-yyo02n32e9],
    .app-nav-search-form input[type="text"][b-yyo02n32e9] {
        padding: 0.4rem 0.5rem;
        background: var(--panel-alt);
        border: 1px solid var(--gold-deep);
        color: var(--text);
        font-family: inherit;
        font-size: 0.8rem;
    }

        /* Display only -- the <option> value stays the exact lowercase slug PlatformSlugs.TryParse
           expects (see MainLayout.razor). Uppercasing that value instead of just its rendering would
           break the parse the moment someone "simplified" the two apart, so the transform belongs
           here, not in the markup. */
        .app-nav-search-form select[b-yyo02n32e9] {
            text-transform: uppercase;
        }

    .app-nav-search-form button[b-yyo02n32e9] {
        padding: 0.4rem 0.5rem;
        background: var(--gold-deep);
        border: 1px solid var(--gold-dark);
        color: var(--gold-bright);
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

        .app-nav-search-form button:hover[b-yyo02n32e9] {
            background: var(--gold-dark);
        }

/* 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: hidden, 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: hidden. Absolute positioning removes the open panel from that flow
               entirely, so it overlays the page instead of ever changing the bar's own width. */
            .app-nav-search-form[b-yyo02n32e9] {
                position: absolute;
                top: 100%;
                right: 0;
                z-index: 1;
                width: max-content;
                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/LiveMatchAnnouncement.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-c9gp2g4utp] {
    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-c9gp2g4utp 0.2s ease-out;
}

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

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

.feature-note-pill[b-c9gp2g4utp] {
    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-c9gp2g4utp] {
    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-c9gp2g4utp] {
    color: #96f5e6;
}

.feature-note-dismiss[b-c9gp2g4utp] {
    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-c9gp2g4utp] {
    color: var(--teal);
}

.feature-note-dismiss:focus-visible[b-c9gp2g4utp] {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(10, 200, 185, 0.4);
}
/* /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;
    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);
}

.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/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/Pages/Beta/DraftLuckLanding.razor.rz.scp.css */
.draft-luck-landing[b-30gm0212g4] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck-landing p[b-30gm0212g4] {
    margin: 0;
}

.draft-luck-landing h1[b-30gm0212g4] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gold-bright);
}

.dll-form[b-30gm0212g4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dll-form input[type="text"][b-30gm0212g4] {
    flex: 1 1 12rem;
    min-width: 0;
}

.dll-caveats h2[b-30gm0212g4] {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--gold);
}

.dll-caveats ul[b-30gm0212g4] {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}
/* /Components/Pages/Beta/DraftLuckPage.razor.rz.scp.css */
.draft-luck[b-zvl7zaeg9f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck p[b-zvl7zaeg9f] {
    margin: 0;
}

/* Scoped under .draft-luck so it outranks `.draft-luck p { margin: 0 }` above. */
.draft-luck .dl-chart-note[b-zvl7zaeg9f] {
    margin-bottom: 0.5rem;
}

.draft-luck h2[b-zvl7zaeg9f] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--gold);
}

.draft-luck h3[b-zvl7zaeg9f] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gold-bright);
}

.dl-header[b-zvl7zaeg9f] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dl-riotid[b-zvl7zaeg9f] {
    color: var(--gold);
    font-weight: 700;
}

.dl-rank[b-zvl7zaeg9f],
.dl-status[b-zvl7zaeg9f],
.dl-note-small[b-zvl7zaeg9f],
.dl-chart-note[b-zvl7zaeg9f] {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.dl-note[b-zvl7zaeg9f] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.dl-partial[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    color: var(--gold-bright);
}

.dl-tiles[b-zvl7zaeg9f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dl-tile[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dl-tile-value[b-zvl7zaeg9f] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.dl-tile-caption[b-zvl7zaeg9f] {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.dl-games-scroll[b-zvl7zaeg9f] {
    min-width: 0;
    overflow-x: auto;
}

.dl-games-table[b-zvl7zaeg9f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dl-games-table th[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    padding: 0.3rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.dl-games-table tbody tr:nth-child(even)[b-zvl7zaeg9f] {
    background: var(--panel);
}

.dl-games-table tbody tr:hover[b-zvl7zaeg9f] {
    background: var(--panel-alt);
}

.dl-champion[b-zvl7zaeg9f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dl-champion img[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    border-color: var(--win);
    color: var(--win);
    background: color-mix(in srgb, var(--win) 10%, transparent);
}

.dl-result-lost[b-zvl7zaeg9f] {
    border-color: var(--lose);
    color: var(--lose);
    background: color-mix(in srgb, var(--lose) 10%, transparent);
}

.dl-odds[b-zvl7zaeg9f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dl-odds-bar[b-zvl7zaeg9f] {
    width: 5rem;
    height: 0.35rem;
    background: var(--border);
}

.dl-odds-fill[b-zvl7zaeg9f] {
    display: block;
    height: 100%;
}

/* Favoured is strictly above 50%, the rule the Favoured games tile counts by. */
.dl-odds-favoured .dl-odds-fill[b-zvl7zaeg9f] {
    background: var(--win);
}

.dl-odds-underdog .dl-odds-fill[b-zvl7zaeg9f] {
    background: var(--lose);
}

.dl-odds-value[b-zvl7zaeg9f] {
    min-width: 3.2rem;
    font-variant-numeric: tabular-nums;
}

.dl-share form[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    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-zvl7zaeg9f],
.dl-share button:focus-visible[b-zvl7zaeg9f] {
    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-zvl7zaeg9f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
}

.dl-share-result input[b-zvl7zaeg9f] {
    flex: 1 1 18rem;
    min-width: 0;
}

.dl-footer[b-zvl7zaeg9f] {
    color: var(--text-dim);
    font-size: 0.75rem;
}

@media (max-width: 40rem) {
    .dl-tiles[b-zvl7zaeg9f] {
        gap: 0.5rem;
    }

    .dl-tile-value[b-zvl7zaeg9f] {
        font-size: 1.15rem;
    }

    /* The table's least essential column; hiding it, not scrolling, keeps the rest in view. */
    .dl-col-kda[b-zvl7zaeg9f] {
        display: none;
    }

    .dl-odds-bar[b-zvl7zaeg9f] {
        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-zvl7zaeg9f] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .dl-games-table th[b-zvl7zaeg9f],
    .dl-games-table td[b-zvl7zaeg9f] {
        padding-inline: 0.4rem;
    }
}
/* /Components/Pages/Beta/DraftLuckShared.razor.rz.scp.css */
.draft-luck-shared[b-n8ssxogbb4] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.6;
}

.draft-luck-shared p[b-n8ssxogbb4] {
    margin: 0;
}

.dls-name[b-n8ssxogbb4] {
    color: var(--gold);
    font-weight: 700;
    text-align: center;
}

.dls-tiles[b-n8ssxogbb4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dls-tile[b-n8ssxogbb4] {
    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-n8ssxogbb4] {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dls-tile-value[b-n8ssxogbb4] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.dls-tile-caption[b-n8ssxogbb4] {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.dls-cta[b-n8ssxogbb4] {
    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-n8ssxogbb4] {
    background: rgba(200, 170, 110, 0.2);
    color: #fff;
}

@media (max-width: 40rem) {
    .dls-tiles[b-n8ssxogbb4] {
        gap: 0.5rem;
    }

    .dls-tile-value[b-n8ssxogbb4] {
        font-size: 1.15rem;
    }
}
/* /Components/Pages/Beta/SummonerProfilePage.razor.rz.scp.css */
.summoner-profile[b-vur44voz8v] {
    max-width: 62rem;
    margin: 0 auto;
}

.summoner-profile h1[b-vur44voz8v] {
    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-vur44voz8v] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
    line-height: 1.6;
}

.summoner-profile-header[b-vur44voz8v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.summoner-profile-header img[b-vur44voz8v] {
    border-radius: 6px;
}

.summoner-profile-riotid[b-vur44voz8v] {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-level[b-vur44voz8v] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.summoner-profile-queues[b-vur44voz8v] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.summoner-profile-queue-card[b-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.summoner-profile-lp[b-vur44voz8v] {
    margin: 0.15rem 0;
    color: var(--text);
    font-size: 0.85rem;
}

.summoner-profile-record[b-vur44voz8v] {
    margin: 0.15rem 0 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.summoner-profile-unranked[b-vur44voz8v] {
    margin: 0;
    color: var(--text-dim);
}

@media (max-width: 560px) {
    .summoner-profile-queues[b-vur44voz8v] {
        grid-template-columns: 1fr;
    }
}

/* Sits above the match list, inside the same DeferredSection -- see the .razor file's own comment
   on why this only renders once BuildBadges' PlayerBadges.Compute call has actually returned
   something. A bordered card, matching .summoner-profile-queue-card, so it reads as a summary box
   of its own rather than loose chips floating above the list. */
.summoner-profile-badges[b-vur44voz8v] {
    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-vur44voz8v]  .badge-chips {
    gap: 0.5rem;
}

.summoner-profile-badges[b-vur44voz8v]  .badge-chip {
    font-size: 0.85rem;
    padding: 0.25rem 0.7rem;
}

.summoner-profile-badges-heading[b-vur44voz8v] {
    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-vur44voz8v] {
    margin: 0.15rem 0 0.6rem;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.summoner-profile-matches-heading[b-vur44voz8v] {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
}

/* Scoped to this page rather than put in DeferredSection.razor.css: that component is shared, and
   only here does the spinner sit directly under other content. Matches the heading's own top margin
   so the loading row and the heading it is standing in for start at the same height. */
.summoner-profile[b-vur44voz8v]  .deferred-section-loading {
    margin-top: 1.5rem;
}

.summoner-profile-matches-note[b-vur44voz8v] {
    color: var(--text-dim);
}

.summoner-profile-match-list[b-vur44voz8v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summoner-profile-match[b-vur44voz8v] {
    padding: 0;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
}

/* 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-vur44voz8v] {
    border-left-color: var(--win);
    background: color-mix(in srgb, var(--win) 6%, transparent);
}

.summoner-profile-match-loss[b-vur44voz8v] {
    border-left-color: var(--lose);
    background: color-mix(in srgb, var(--lose) 6%, transparent);
}

/* Rows are deliberately taller than a single wrapping flex line now -- seven content columns of
   unequal weight (see the .razor file's own column comment), plus an eighth 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 eight-track row only holds above
   1000px, and the 1000px breakpoint below regroups the cells into rows instead of shrinking
   them further. */
.summoner-profile-match summary[b-vur44voz8v] {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.2fr 0.9fr 1fr 1.3fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.summoner-profile-match summary > *[b-vur44voz8v] {
    min-width: 0;
}

.summoner-profile-match summary[b-vur44voz8v]::-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
   eighth grid item automatically -- see the eighth `auto` track above. */
.summoner-profile-match summary[b-vur44voz8v]::after {
    content: '\25BE';
    color: var(--gold);
    transition: transform 0.15s ease;
}

.summoner-profile-match details[open] summary[b-vur44voz8v]::after {
    transform: rotate(180deg);
}

/* A second grid row under the eight tracks, spanning all but the caret column. Only this item has
   an explicit grid-row, so it is placed first; the ::after caret is auto-placed afterwards into
   the first free cell, which is still row 1's eighth track, so the caret stays beside the row's
   content instead of dropping below the badges. */
.summoner-profile-match-badges[b-vur44voz8v] {
    grid-row: 2;
    grid-column: 1 / -2;
}

.summoner-profile-match-result[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.summoner-profile-match-queue[b-vur44voz8v] {
    font-weight: 700;
    color: var(--gold);
}

.summoner-profile-match-outcome[b-vur44voz8v] {
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-match-champion[b-vur44voz8v] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.summoner-profile-match-champion-icon[b-vur44voz8v] {
    border-radius: 6px;
}

.summoner-profile-match-champion-extras[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summoner-profile-match-kda[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.summoner-profile-match-kda-numbers[b-vur44voz8v] {
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-match-kda-ratio[b-vur44voz8v],
.summoner-profile-match-kp[b-vur44voz8v] {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.summoner-profile-match-placement[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Mirrors .summoner-profile-scoreboard-sid-rank: 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-vur44voz8v] {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.summoner-profile-match-cs-stats[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* 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-vur44voz8v] {
    display: grid;
    grid-template-columns: repeat(4, 24px);
    gap: 2px;
}

.summoner-profile-match-items > :nth-child(7)[b-vur44voz8v] {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
}

.summoner-profile-match-items img[b-vur44voz8v] {
    border-radius: 3px;
}

.summoner-profile-match-item-empty[b-vur44voz8v] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.summoner-profile-match-spells[b-vur44voz8v],
.summoner-profile-match-runes[b-vur44voz8v] {
    display: flex;
    gap: 2px;
}

.summoner-profile-match-spells img[b-vur44voz8v],
.summoner-profile-match-runes img[b-vur44voz8v] {
    border-radius: 3px;
}

.summoner-profile-match-teams[b-vur44voz8v] {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.summoner-profile-match-team[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.summoner-profile-match-team-player[b-vur44voz8v] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    min-width: 0;
}

.summoner-profile-match-team-player img[b-vur44voz8v] {
    border-radius: 2px;
    flex-shrink: 0;
}

.summoner-profile-match-team-name[b-vur44voz8v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summoner-profile-match-team-subject[b-vur44voz8v] {
    color: var(--text);
    font-weight: 700;
}

.summoner-profile-match-team-noicon[b-vur44voz8v] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 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-vur44voz8v] {
    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: hidden }
   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-vur44voz8v] {
    position: relative;
    /* Lets the SID chip tooltip size itself to this container (100cqw) instead of the viewport. */
    container-type: inline-size;
    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-vur44voz8v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-weight: 400;
}

.summoner-profile-scoreboard-table caption[b-vur44voz8v] {
    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-vur44voz8v],
.summoner-profile-scoreboard-table td[b-vur44voz8v] {
    padding: 0.3rem 0.4rem;
    text-align: left;
    color: var(--text-dim);
    white-space: nowrap;
}

.summoner-profile-scoreboard-table th[b-vur44voz8v] {
    border-bottom: 2px solid var(--team-accent, var(--border));
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-player[b-vur44voz8v] {
    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-vur44voz8v] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.summoner-profile-scoreboard-portrait img[b-vur44voz8v] {
    border-radius: 50%;
    flex-shrink: 0;
}

/* Absent entirely for a null ChampionLevel (see the .razor file's own comment) -- never a
   fabricated badge showing level 0. */
.summoner-profile-scoreboard-level[b-vur44voz8v] {
    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);
    line-height: 0.95rem;
    text-align: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.summoner-profile-scoreboard-spells[b-vur44voz8v],
.summoner-profile-scoreboard-runes[b-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.summoner-profile-scoreboard-spells img[b-vur44voz8v],
.summoner-profile-scoreboard-runes img[b-vur44voz8v] {
    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-vur44voz8v] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.summoner-profile-scoreboard-name[b-vur44voz8v] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.summoner-profile-scoreboard-rank[b-vur44voz8v] {
    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-vur44voz8v]  .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-vur44voz8v] {
    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-vur44voz8v] {
    min-width: 5.5rem;
}

.summoner-profile-scoreboard-sid-score[b-vur44voz8v] {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-sid-rank[b-vur44voz8v] {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* The chip tooltip is normally anchored to its own .badge-chips row, which here is one narrow table
   cell -- a sliver of text, and one that would also run past the scroll container's right edge on
   a phone. So both anchors are lifted: .badge-chips stops being positioned, and the row (tr) becomes
   the containing block instead, which puts the tooltip's left edge at the table's left edge and its
   vertical position relative to its own row. ::deep is required because the tooltip belongs to
   BadgeChipRow's own scoped markup. The width is capped by the scroll container's own width (a
   container query unit, so no guess at the page gutters) so it fits at phone width too. */
.summoner-profile-scoreboard-table tbody tr[b-vur44voz8v] {
    position: relative;
}

.summoner-profile-scoreboard-sid[b-vur44voz8v]  .badge-chips {
    position: static;
}

/* Opens upward by default, like every other chip row. */
.summoner-profile-scoreboard-sid[b-vur44voz8v]  .badge-chip-tip {
    right: auto;
    width: min(28rem, 100cqw);
}

/* The first two rows open DOWNWARD instead: this scroll container's overflow-x: auto forces
   overflow-y to auto as well, so a tooltip opening upward from the top rows would have its top
   lines clipped by the container. Rows 3-5 have enough rows above them to open upward in full. */
.summoner-profile-scoreboard-table tbody tr:nth-child(-n+2) .summoner-profile-scoreboard-sid[b-vur44voz8v]  .badge-chip-tip {
    top: calc(100% + 0.4rem);
    bottom: auto;
}

/* Smaller chip than the summary row's so the cell stays compact, same ::deep reasoning as above. */
.summoner-profile-scoreboard-sid[b-vur44voz8v]  .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-vur44voz8v] {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-dim);
}

.summoner-profile-scoreboard-kda-ratio[b-vur44voz8v] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

.summoner-profile-scoreboard-kda-high[b-vur44voz8v] {
    color: var(--good);
    font-weight: 700;
}

.summoner-profile-scoreboard-cs-count[b-vur44voz8v] {
    display: block;
    font-size: 0.72rem;
}

.summoner-profile-scoreboard-cs-rate[b-vur44voz8v] {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim);
}

.summoner-profile-scoreboard-vision[b-vur44voz8v],
.summoner-profile-scoreboard-wards[b-vur44voz8v] {
    font-size: 0.68rem;
}

.summoner-profile-scoreboard-items[b-vur44voz8v] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.summoner-profile-scoreboard-items img[b-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    display: flex;
    gap: 0.3rem;
    min-width: 8rem;
}

.summoner-profile-damage-bar[b-vur44voz8v] {
    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-vur44voz8v] {
    position: absolute;
    inset: 0;
    height: 100%;
    background: var(--bar-dealt);
}

.summoner-profile-damage-bar-taken .summoner-profile-damage-bar-fill[b-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summoner-profile-team-compare-value[b-vur44voz8v] {
    flex-shrink: 0;
    min-width: 2.25rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.summoner-profile-team-compare-value-blue[b-vur44voz8v] {
    text-align: right;
    color: var(--blue);
}

.summoner-profile-team-compare-value-red[b-vur44voz8v] {
    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-vur44voz8v] {
    flex: 1;
    min-width: 0;
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    background: var(--border);
}

.summoner-profile-team-compare-fill-blue[b-vur44voz8v] {
    background: var(--blue);
}

.summoner-profile-team-compare-fill-red[b-vur44voz8v] {
    background: var(--lose);
}

.summoner-profile-team-compare-label[b-vur44voz8v] {
    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-vur44voz8v] {
    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-vur44voz8v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.summoner-profile-team-compare-objective[b-vur44voz8v] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--text-dim);
}

/* 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 teams on row 3 and the achievement chips on row 4. 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-vur44voz8v] {
        grid-template-columns: repeat(3, minmax(min-content, 1fr)) auto;
    }

    .summoner-profile-match-result[b-vur44voz8v] {
        grid-row: 1;
        grid-column: 1;
    }

    .summoner-profile-match-champion[b-vur44voz8v] {
        grid-row: 1;
        grid-column: 2;
    }

    .summoner-profile-match-kda[b-vur44voz8v] {
        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-vur44voz8v]::after {
        grid-row: 1;
        grid-column: 4;
    }

    .summoner-profile-match-placement[b-vur44voz8v] {
        grid-row: 2;
        grid-column: 1;
    }

    .summoner-profile-match-cs-stats[b-vur44voz8v] {
        grid-row: 2;
        grid-column: 2;
    }

    .summoner-profile-match-items[b-vur44voz8v] {
        grid-row: 2;
        grid-column: 3;
    }

    .summoner-profile-match-teams[b-vur44voz8v] {
        grid-row: 3;
        grid-column: 1 / -2;
    }

    .summoner-profile-match-badges[b-vur44voz8v] {
        grid-row: 4;
        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: hidden } 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-vur44voz8v] {
        display: none;
    }
}

@media (max-width: 420px) {
    .summoner-profile-match summary[b-vur44voz8v] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .summoner-profile-match-teams[b-vur44voz8v] {
        flex-direction: column;
    }

    /* The single column has no caret column to leave out, and the badges must come after the other
       stacked items (but before the caret row) -- reset to auto placement so the DOM order, which
       already puts them last, decides. */
    .summoner-profile-match-badges[b-vur44voz8v] {
        grid-row: auto;
        grid-column: 1;
    }

    /* The single-column stack turns the chevron into its own full-width row -- left-aligned (the
       grid default) it reads as a stray character stranded at the edge, disconnected from the
       content above it. Centered, it reads as a distinct "tap to expand" affordance closing off
       the stacked row, the same role it plays at the end of the row on wider viewports. */
    .summoner-profile-match summary[b-vur44voz8v]::after {
        justify-self: center;
    }
}
/* /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-note[b-1we05ot7cm] {
    margin-top: 0.35rem;
    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],
.champion-scaling[b-1we05ot7cm],
.champion-threat[b-1we05ot7cm] {
    margin-top: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.9rem;
}

.champion-cta[b-1we05ot7cm],
.champion-guides[b-1we05ot7cm] {
    margin-top: 1.5rem;
    color: var(--text-dim);
    line-height: 1.6;
}
/* /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;
}
/* /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/Home.razor.rz.scp.css */
.home[b-i4cnx18z4j] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 62rem;
    margin: 0 auto;
}

/* ::deep because the two boxes' root divs are styled by their own components' scoped CSS, so
   Home's scope attribute never lands on them. Equal flex basis gives equal columns, and a lone
   box still fills the row. */
.pick-columns[b-i4cnx18z4j] {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.pick-columns[b-i4cnx18z4j] >  .pool-picks,
.pick-columns[b-i4cnx18z4j] >  .pick-suggestions {
    flex: 1 1 0;
    min-width: 0;
}

/* 760px is the site's existing breakpoint; below it two columns are too narrow, so the boxes
   stack with the pool box on top. */
@media (max-width: 760px) {
    .pick-columns[b-i4cnx18z4j] {
        flex-direction: column;
    }
}

.hero[b-i4cnx18z4j] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    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);
}

.hero h1[b-i4cnx18z4j] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.2vw, 1.85rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--gold-bright);
}

.hero h2[b-i4cnx18z4j] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: var(--gold-bright);
}

.hero p[b-i4cnx18z4j] {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

.hero-more[b-i4cnx18z4j] {
    font-size: 0.82rem;
}

.hero-simulate strong[b-i4cnx18z4j] {
    color: var(--gold);
}

.hero-steps[b-i4cnx18z4j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-steps li[b-i4cnx18z4j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 14rem;
    padding: 0.6rem 0.8rem;
    background: rgba(1, 10, 19, 0.55);
    border-left: 2px solid var(--teal);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.hero-step-num[b-i4cnx18z4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--gold-dark);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
}

.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);
}

.riot-id-row[b-i4cnx18z4j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.riot-id-row label[b-i4cnx18z4j] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.riot-id-row input[b-i4cnx18z4j] {
    flex: 1;
    min-width: 10rem;
    max-width: 18rem;
    padding: 0.55rem 0.75rem;
    background: rgba(1, 10, 19, 0.75);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.riot-id-row input[b-i4cnx18z4j]::placeholder {
    color: #5c6773;
}

.riot-id-row input:focus[b-i4cnx18z4j] {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.4);
}

.riot-id-row input.invalid[b-i4cnx18z4j] {
    outline: none;
    border-color: var(--danger);
}

.riot-id-row select[b-i4cnx18z4j] {
    padding: 0.55rem 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.85rem;
}

.profile-tier[b-i4cnx18z4j] {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.capture-row[b-i4cnx18z4j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.btn-capture[b-i4cnx18z4j] {
    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-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;
}

.capture-note[b-i4cnx18z4j] {
    font-size: 0.8rem;
    color: var(--warn);
}

.upload-label[b-i4cnx18z4j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.upload-label[b-i4cnx18z4j]  input[type="file"] {
    max-width: 14rem;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-dim);
}

.upload-label[b-i4cnx18z4j]  input[type="file"]::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--gold-dark);
    background: rgba(200, 170, 110, 0.08);
    color: var(--gold);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.upload-label[b-i4cnx18z4j]  input[type="file"]::file-selector-button:hover {
    background: rgba(200, 170, 110, 0.2);
    color: var(--gold-bright);
}

.paste-hint[b-i4cnx18z4j] {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.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/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/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-note'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/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-badges[b-eamoebiyw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    /* Anchors .comp-tip below (see its comment) so the tooltip spans the whole strip rather than
       just the hovered badge. */
    position: relative;
}

.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 .comp-badges 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) reuse .comp-badge/.comp-tip verbatim
   rather than factoring a shared badge component out of them and the team-level .comp-badges
   block above: Blazor scoped CSS is per-component, so a shared component would mean relocating
   this whole .comp-badge/.comp-tip block (and its anchoring/z-index reasoning) out of here, 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 the same way .comp-badges does above, 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] {
    /* Team badges open upward (see .comp-tip's 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;
}

.comp-unavailable[b-eamoebiyw2] {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
    opacity: 0.7;
}

.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/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/champion-scaling 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/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;
}

.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-note'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;
}