/* Should I Dodge? — Hextech theme, styled after the League of Legends client. Plain CSS, no framework. */

/* Self-hosted so the app stays fully functional offline (see wwwroot/fonts/*/OFL.txt for licensing).
   Inter (wght axis 100-900) covers body text and headings alike; Cinzel is kept for the site header
   title alone. Each is one variable font, and the browser renders the exact weight from the
   font-weight range declared here, so the range must reach the heaviest weight any rule asks for
   (headings use up to 900). */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url('fonts/cinzel/Cinzel-Variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/inter/Inter-Variable.woff2') format('woff2');
}

:root {
    color-scheme: dark;

    /* Base — the client's deep navy void */
    --bg: #010a13;
    --bg-glow: #0a1428;
    --panel: #0b1725;
    --panel-alt: #10202f;
    --border: #1e3040;

    /* Hextech gold */
    --gold: #c8aa6e;
    --gold-bright: #f0e6d2;
    --gold-dark: #785a28;
    --gold-deep: #463714;

    /* Hextech blue/teal */
    --teal: #0ac8b9;
    --blue: #0596aa;

    --text: #f0e6d2;
    --text-dim: #a09b8c;

    --win: #0ac8b9;
    --lose: #e84057;
    --accent: var(--gold);
    --danger: #e84057;
    --warn: #d9a441;
    /* --win is the teal that marks a winning number; the badge row needs a colour
       that reads as green next to that teal, not as another shade of it. */
    --good: #3fb950;

    /* Verdict bands — a diverging ramp built from colours already in this palette.
       --warn is deliberately excluded: it already means "degraded row" elsewhere. */
    --band-really-low: #ff4655;
    --band-low: #e07a6b;
    --band-neutral: #a09b8c;
    --band-high: #4fc3d9;
    --band-really-high: #0ac8b9;

    /* Scoreboard damage bars -- dark, not pale: the value text paints directly on the fill with no
       scrim behind it (see SummonerProfilePage.razor.css's own remarks), so the fill has to hold
       --text (#f0e6d2) at 4.5:1 on its own, which caps its luminance well below a "neutral pale"
       measurement colour. Both tokens sit at ~0.099 relative luminance, putting --text at ~5.7:1 on
       either -- deliberately equal so neither bar reads as heavier, differing by hue alone (warm
       bronze for dealt, cool teal for taken, the app's own gold/teal families). Any replacement for
       either token must keep --text at >=4.5:1, which caps luminance at ~0.138 -- see the .razor.css
       remarks for the full contrast math. */
    --bar-dealt: #6d5436;   /* deep bronze */
    --bar-taken: #2b5f70;   /* deep teal   */

    --font-display: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
    --font-title: 'Cinzel', 'Trajan Pro', 'Georgia', serif;   /* header title only */
    --font-body: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(5, 150, 170, 0.16), transparent 70%),
        radial-gradient(ellipse 60% 45% at 50% 105%, rgba(120, 90, 40, 0.14), transparent 70%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    /* clip, not hidden: hidden on both html and body makes body its own (never-scrolling) scroll
       container, and every position: sticky header then sticks to that instead of the viewport. */
    overflow-x: clip;
}

a {
    color: var(--gold);
}

button {
    font-family: inherit;
}

h1:focus {
    outline: none;
}

/* Gold-rail scrollbar, like the client's panels. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-glow);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-deep);
    border: 1px solid var(--gold-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
}

/* Standard clip-rect hiding: content stays in the accessibility tree (screen readers still
   announce it) and in the tab order, it just isn't painted. display: none would pull it out of
   the accessible name entirely, which defeats the point of using this instead of `title` alone. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-danger {
    color: var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.85rem;
}

.invalid {
    outline: 1px solid var(--danger);
}

/* The Riot ID search pill: region chip | name input (+ ghost tag) | submit, with a suggestion
   dropdown beneath. Global rather than scoped because the same markup renders from
   RiotIdSearchField (nav, Draft Luck landing, shared lane verdict) AND directly from Home, and a
   scoped sheet would have to be copied into each. Behaviour lives in js/riot-id-input.js. */
.riot-id-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    /* Reset because the nav's list cells set uppercase/tracked label text that would otherwise
       leak into the hint and suggestions through inheritance. */
    text-transform: none;
    letter-spacing: normal;
}

.riot-pill {
    display: flex;
    align-items: stretch;
    min-height: 2.75rem;
    background: rgba(1, 10, 19, 0.75);
    border: 1px solid var(--border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.riot-pill:hover {
    border-color: var(--gold-dark);
}

/* The ring is on the pill, not the input: the controls inside have no outline of their own, so one
   continuous ring reads as a single field, and it lights for the select and button too. */
.riot-pill:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(200, 170, 110, 0.4);
}

/* Home flags a bad ID by class on the input; the global .invalid outline would draw a box inside
   the pill, so the pill's own border carries the signal instead. */
.riot-pill:has(input.invalid) {
    border-color: var(--danger);
}

.riot-pill input.invalid {
    outline: none;
}

.riot-pill-region {
    flex: none;
    min-width: 4.5rem;
    padding: 0 1.7rem 0 0.8rem;
    background-color: var(--panel-alt);
    /* A CSS-only chevron (two angled gradients) instead of a data: URI image, so it takes the
       gold token and needs no extra request or img-src allowance. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gold) 50%),
        linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 0;
    border-right: 1px solid var(--gold-deep);
    border-radius: 0;
    color: var(--gold);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    appearance: none;
    outline: none;
}

.riot-pill-region:hover {
    background-color: var(--border);
}

.riot-pill-text {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

/* 1rem, not smaller: iOS Safari zooms the page on focus of any input under 16px. */
.riot-pill-text input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
}

.riot-pill-text input::placeholder {
    color: #5c6773;
}

/* Sits over the input's empty tail, never over its text: the script positions it after the typed
   text and clears it when it would not fit. pointer-events none so a click lands in the input. */
.riot-ghost {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    white-space: pre;
    color: var(--text-dim);
    opacity: 0.6;
    pointer-events: none;
}

.riot-ghost:empty {
    display: none;
}

.riot-pill-submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 2.75rem;
    padding: 0 0.8rem;
    background: var(--gold-deep);
    border: 0;
    border-left: 1px solid var(--gold-dark);
    border-radius: 0;
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.riot-pill-submit:hover {
    background: var(--gold-dark);
}

.riot-pill-submit:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: -3px;
}

/* The label is the accessible name at every width (aria-label) but only drawn when the pill has
   room: next to the chip and magnifier it would squeeze the input at phone widths. */
.riot-pill-submit-text {
    display: none;
    white-space: nowrap;
}

@media (min-width: 30rem) {
    .riot-pill-submit-text {
        display: inline;
    }
}

/* The anchor for the dropdown: it has to be the pill's own box, because the field also holds the hint
   line, so anchoring to the field would drop the list below the hint (or, as a flex item's static
   position, on top of the pill). */
.riot-pill-wrap {
    position: relative;
}

/* Absolute so it overlays whatever is below the pill instead of pushing it down. Above page content,
   and inside the nav's dropdown it is layered by that form's own stacking context (see MainLayout). */
.riot-suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--panel-alt);
    border: 1px solid var(--gold-deep);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Home renders the list without the hidden attribute (so Blazor never owns it); empty means closed. */
.riot-suggest:empty {
    display: none;
}

.riot-suggest li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.riot-suggest li:hover,
.riot-suggest li.riot-suggest-active {
    background: rgba(200, 170, 110, 0.14);
}

.riot-suggest li.riot-suggest-active {
    box-shadow: inset 2px 0 0 var(--teal);
}

.riot-suggest-icon {
    flex: none;
    width: 1rem;
    text-align: center;
    color: var(--gold);
}

.riot-suggest-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.riot-suggest-tag {
    flex: none;
    color: var(--text-dim);
}

.riot-suggest-badge {
    flex: none;
    margin-left: auto;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.riot-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-dim);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }