/* Responsive root font-size — defines what 1rem equals and scales it at MudBlazor's
   breakpoints (sm 600 / md 960 / lg 1280 / xl 1920). Base is 14px (87.5% of the browser
   default, so it still honors user zoom / accessibility settings). All component CSS is
   authored in rem/em, and MudBlazor is itself rem-based, so the whole UI scales in lockstep.
   Keep this rule in app.css (NOT a scoped *.razor.css) — `html` is outside every component scope. */
html {
    font-size: 87.5%;             /* 14px — base (md / laptop default) */
}
@media (max-width: 599.98px) {    /* xs — phones */
    html { font-size: 81.25%; }   /* 13px */
}
@media (min-width: 1280px) {      /* lg */
    html { font-size: 93.75%; }   /* 15px */
}
@media (min-width: 1920px) {      /* xl */
    html { font-size: 100%; }     /* 16px */
}

/* Site-wide background — matched to the ObbLandZ ObbLingZ Roster page (#080c14 base
   with a purple radial glow anchored to the top, fixed so it stays put on scroll).
   The base color also comes through MudBlazor via the theme's Background palette. */
html body {
    height: 100%;
}
body {
    background-color: #080c14;
    background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Safety net while the mobile reflow lands: nothing should ever push the page wider than the viewport
       and cause a sideways scroll. The real scroll container is the MudContainer (overflow-y:auto), not the
       body, so clipping horizontal overflow here has no effect on normal vertical scrolling. */
    overflow-x: hidden;
}

.mud-main-content{
    height:100%
}

.qlogin-btn-logout {
    display: block !important;
}

h1:focus {
    outline: none;
}

.mud-dialog {
    background:var(--qi-modal-content-background);
}
.mud-list-item {
    background-color:var(--mud-palette-background);;
}
/* ── Find Hunts page (/finds) ────────────────────────────────────────────────────────────
   Global (not scoped): the page uses MudCard/MudExpansionPanels (rendered with MudBlazor's own
   classes) and a child component (FhItemStrip), so scoped .razor.css wouldn't reach them. Mirrors
   the roster pages' dark look (Cinzel/Inter, per-collection accents). Stamps are sliced from each
   collection's atlas PNG in wwwroot/findhunt/ via background-position (see FhView.Stamp). */
.fh-root {
    --fh-surface: #0f1520;
    --fh-border:  rgba(255, 255, 255, 0.07);
    --fh-text:    #e8edf5;
    --fh-muted:   #6a7a90;
    --fh-live:    #6bd968;
    --fh-beta:    #f4a261;
    --fh-soon:    #7c8aa0;
    font-family: 'Inter', sans-serif;
    color: var(--fh-text);
}

/* HEADER */
.fh-header { text-align: center; padding: 3.43rem 1.71rem 2rem; position: relative; overflow: hidden; }
.fh-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.fh-eyebrow {
    font-family: 'Cinzel', serif; font-size: 0.79rem; letter-spacing: .25em;
    color: #b070ff; text-transform: uppercase; margin-bottom: 1.14rem; opacity: .85;
}
.fh-title {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3.71rem); font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1.15; margin: 0 0 0.71rem;
}
.fh-sub { font-size: 1rem; color: var(--fh-muted); letter-spacing: .04em; margin: 0 0 1rem; }
.fh-sub span { color: var(--fh-text); font-weight: 500; }
.fh-lede { font-size: 0.93rem; color: rgba(232, 237, 245, 0.72); line-height: 1.6; max-width: 46rem; margin: 0 auto; }

/* STACK of full-width cards */
/* Top-level entries are MudExpansionPanels styled as full-width cards (collapsed by default). */
.fh-tops.mud-expansion-panels {
    display: flex; flex-direction: column; gap: 1.14rem;
    max-width: 72rem; margin: 0 auto; padding: 0 1.71rem; background: transparent;
}
.fh-card.mud-expand-panel {
    background: var(--fh-surface) !important; border: 1px solid var(--fh-border);
    border-radius: 1.14rem !important; overflow: hidden;
}
.fh-card.mud-expand-panel::before, .fh-card.mud-expand-panel::after { display: none; }
/* the panel header hosts our custom head row (title + description + meta chips + chevron) */
.fh-card > .mud-expand-panel-header { padding: 1.14rem 1.43rem; align-items: center; }
.fh-card-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 0.86rem; width: 100%;
}
.fh-card-titles { display: flex; align-items: center; gap: 0.86rem; min-width: 0; }
.fh-card-title { font-family: 'Cinzel', serif; font-size: 1.29rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 0.21rem; }
.fh-card-desc { font-size: 0.86rem; color: rgba(232, 237, 245, 0.66); line-height: 1.45; margin: 0; max-width: 42rem; }
.fh-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; }
.fh-count {
    font-size: 0.71rem; font-weight: 700; letter-spacing: .05em; color: var(--fh-muted);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--fh-border);
    border-radius: 7.14rem; padding: 0.21rem 0.71rem; white-space: nowrap;
}
/* body only shows when the top card is expanded — divider + faint recess separate it from the header */
.fh-card-body {
    padding: 1.14rem 1.43rem 1.43rem; border-top: 1px solid var(--fh-border);
    background: rgba(0, 0, 0, 0.12);
}

/* Logo stamp (atlas cell 0,0) */
.fh-logo, .fh-stamp {
    display: inline-block; background-repeat: no-repeat; background-size: 400% 400%;
    background-color: rgba(255, 255, 255, 0.04); border-radius: 0.5rem; flex-shrink: 0;
}
.fh-logo    { width: 2.29rem; height: 2.29rem; }
.fh-logo-lg { width: 3.14rem; height: 3.14rem; border-radius: 0.71rem; }

/* Status chips */
.fh-chip {
    font-size: 0.62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 7.14rem; padding: 0.14rem 0.57rem; white-space: nowrap; border: 1px solid transparent;
}
.fh-chip.live { color: var(--fh-live); background: rgba(107, 217, 104, 0.14); border-color: rgba(107, 217, 104, 0.4); }
.fh-chip.beta { color: var(--fh-beta); background: rgba(244, 162, 97, 0.14);  border-color: rgba(244, 162, 97, 0.4); }
.fh-chip.soon { color: var(--fh-soon); background: rgba(124, 138, 160, 0.12); border-color: rgba(124, 138, 160, 0.35); }

/* Sub-series heading (Find the Themes → Wilds / Wonders / Delights) */
.fh-sub-head { display: flex; align-items: baseline; gap: 0.71rem; flex-wrap: wrap; margin: 1rem 0 0.57rem; }
.fh-sub-head:first-child { margin-top: 0; }
.fh-sub-name { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; letter-spacing: .1em; color: #b070ff; text-transform: uppercase; }
.fh-sub-desc { font-size: 0.82rem; color: var(--fh-muted); }

/* All find-hunt panels (outer cards + inner collections) control their own padding: kill
   MudBlazor's content padding + the inter-panel divider (we use full borders + gap instead). */
.fh-tops .mud-expand-panel-content { padding: 0 !important; }
.fh-tops .mud-expand-panel-border { border-bottom: none !important; }

/* Expansion panels (collections) */
.fh-panels.mud-expansion-panels { background: transparent; display: flex; flex-direction: column; gap: 0.57rem; }
.fh-panel.mud-expand-panel {
    background: rgba(255, 255, 255, 0.02) !important; border: 1px solid var(--fh-border);
    border-radius: 0.71rem !important;
}
.fh-panel.mud-expand-panel::before, .fh-panel.mud-expand-panel::after { display: none; }
.fh-panel .mud-expand-panel-header { padding: 0.71rem 1rem; }
.fh-panel-body { padding: 0 1rem 1rem; }
.fh-panel-title { display: flex; align-items: center; gap: 0.71rem; flex-wrap: wrap; }
.fh-panel-name { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600; letter-spacing: .04em; color: var(--fh-text); }
.fh-panel-count {
    margin-left: auto; font-size: 0.68rem; font-weight: 700; color: var(--fh-muted);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--fh-border);
    border-radius: 7.14rem; padding: 0.14rem 0.5rem;
}
.fh-panel-desc { font-size: 0.82rem; color: rgba(232, 237, 245, 0.66); line-height: 1.45; margin: 0 0 0.86rem; }

/* Item strip — real atlas stamps */
.fh-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.71rem; }
.fh-item {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.29rem;
    padding: 0.71rem 0.5rem; border: 1px solid var(--fh-border); border-radius: 0.71rem;
    background: rgba(255, 255, 255, 0.015);
}
.fh-item.cap { border-color: rgba(255, 207, 77, 0.35); background: rgba(255, 207, 77, 0.05); }
.fh-stamp { width: 3.43rem; height: 3.43rem; }
.fh-item-name { font-size: 0.78rem; font-weight: 600; color: var(--fh-text); line-height: 1.2; }
.fh-cap-tag { color: #ffcf4d; font-size: 0.72rem; margin-left: 0.14rem; }
.fh-item-clue { font-size: 0.72rem; color: rgba(120, 200, 140, 0.9); line-height: 1.35; font-style: italic; }
.fh-item-clue.muted { color: var(--fh-muted); font-style: normal; opacity: .8; }
.fh-clue-note { font-size: 0.78rem; color: var(--fh-muted); margin-top: 0.86rem; font-style: italic; }

.fh-footer {
    text-align: center; padding: 2.86rem 1.71rem 0; font-size: 0.78rem;
    color: var(--fh-muted); letter-spacing: .03em;
}

/* Rendered markdown inside the LegalDialog modal (Privacy Policy / Terms of Service).
   Global (not scoped) because the content is injected as a MarkupString and so does not
   receive Blazor's component scope attribute. Mirrors the standalone legal HTML template. */
.legal-doc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    color: #cdd6e4;
}

.legal-doc h2 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 1.8rem 0 0.6rem;
}

.legal-doc h2:first-child {
    margin-top: 0.25rem;
}

.legal-doc h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    color: #f4a261;
    margin: 1.3rem 0 0.4rem;
}

.legal-doc p,
.legal-doc li {
    color: #cdd6e4;
}

.legal-doc a {
    color: #f4a261;
    text-decoration: none;
    border-bottom: 1px solid rgba(244, 162, 97, 0.35);
}

.legal-doc a:hover {
    color: #ffba7a;
    border-bottom-color: #ffba7a;
}

.legal-doc strong {
    color: #fff;
    font-weight: 600;
}

.legal-doc ul,
.legal-doc ol {
    padding-left: 1.4em;
}

.legal-doc li {
    margin: 0.35rem 0;
}

.legal-doc blockquote {
    margin: 1.3rem 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid #b070ff;
    border-radius: 0.43rem;
    background: rgba(176, 112, 255, 0.08);
    color: #dfe6f2;
}

.legal-doc blockquote p {
    margin: 0;
}

.legal-doc hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2rem 0;
}

.legal-doc code {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.07rem 0.43rem;
    border-radius: 0.29rem;
    font-size: 0.9em;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}