/* /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/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/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/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-select[b-znyao9upju] {
    width: 100%;
    padding: 0.45rem 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;
}

.correction-select:focus[b-znyao9upju] {
    outline: none;
    border-color: var(--gold);
}

/* 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 .correction-select: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. */
.correction-select-blocked[b-znyao9upju],
.correction-select-blocked:focus[b-znyao9upju] {
    border-color: var(--danger);
}

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

/* Wraps so narrow viewports keep every link readable and tappable instead of shrinking text or
   forcing horizontal scroll — this nav has to work on mobile for AdSense review. */
.app-nav[b-yyo02n32e9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.1rem;
    margin-top: 0.9rem;
}

    .app-nav a[b-yyo02n32e9] {
        padding: 0.3rem 0.1rem;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text-dim);
        border-bottom: 2px solid transparent;
    }

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

        .app-nav a.app-nav-link-active[b-yyo02n32e9] {
            color: var(--gold-bright);
            border-bottom-color: var(--teal);
        }

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

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

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