html, body {
    font-family: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

a, .btn-link {
    color: #E8B84B;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

/* ===========================================================================
   IdleRPG fantasy theme  —  "tavern ledger by candlelight"
   Re-skins MudBlazor (dark) to match branding/generate_branding.py:
   deep slate-indigo -> near-black, gold + steel, the sword-in-clock emblem.
   These target global .mud-* classes (scoped .razor.css can't reach them).
   =========================================================================== */
:root {
    color-scheme: dark;
    --idle-gold: #E8B84B;
    --idle-gold-dim: rgba(232, 184, 75, 0.22);
    --idle-ink-top: #222B40;   /* BG_TOP   in the emblem */
    --idle-ink-bot: #0B0E16;   /* BG_BOT   */
    --idle-glow: rgba(124, 132, 224, 0.18);
}

/* Layered ground: a cool glow up top (like the emblem's radial glow) over a
   slate-indigo -> near-black wash. Fixed so it doesn't scroll like a backdrop. */
body {
    background-color: var(--idle-ink-bot);
    background-image:
        radial-gradient(120% 90% at 50% -10%, var(--idle-glow) 0%, transparent 55%),
        linear-gradient(180deg, var(--idle-ink-top) 0%, var(--idle-ink-bot) 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Faint clock-ring watermark in the lower-right — the "idle / time" half of the
   emblem, echoing the Discord banner. Pure CSS SVG, sits behind everything. */
body::before {
    content: "";
    position: fixed;
    right: -8vmin;
    bottom: -10vmin;
    /* Scales with the viewport but capped so it isn't gigantic on large/fullscreen displays. */
    width: min(70vmin, 540px);
    height: min(70vmin, 540px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='620'%20height='620'%20viewBox='0%200%20620%20620'%3E%3Cg%20fill='none'%20stroke='%23e8b84b'%20stroke-opacity='0.5'%3E%3Ccircle%20cx='310'%20cy='310'%20r='286'%20stroke-width='8'/%3E%3Ccircle%20cx='310'%20cy='310'%20r='262'%20stroke-width='26'%20stroke-dasharray='7%20130.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Let the body texture show through Mud's own surfaces. */
.mud-layout, .mud-main-content, .mud-appbar.idlerpg-appbar { background-color: transparent; }

/* Sticky footer: make the content area a full-height column so the footer is pushed to the bottom
   on short pages (margin-top:auto) but still flows below tall content. */
.mud-main-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.idlerpg-footer { margin-top: auto; }

/* Whole game tile is a link (the title and card body are clickable, not just a button). */
.tile-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.tile-link:hover { text-decoration: none; }

/* Commands reference: each command block gets a faint gold left rule so the long list scans easily. */
.cmd {
    border-left: 2px solid var(--idle-gold-dim);
    padding-left: 0.85rem;
    margin-bottom: 0.4rem;
}
.cmd code { color: var(--idle-gold); }

/* "Chronicle of the Realms" — portal-wide stat strip on the landing page. A row of gold figures
   that wraps on narrow screens; reads like an engraved tavern ledger above the realm tiles. */
/* Landing hero: the "what even is this?" preview for newcomers. Same parchment wash as the
   chronicle, a touch warmer, with a gold hairline so it reads as the page's headline plate. */
.portal-hero {
    background-image: linear-gradient(150deg, rgba(232, 184, 75, 0.10), transparent 70%);
    border: 1px solid var(--idle-gold-dim);
}
.portal-hero .hero-title {
    color: var(--idle-gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(232, 184, 75, 0.14);
}
.portal-hero .hero-lede {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

/* Sample feed: a peek at what the bot actually narrates in a realm's channel, so newcomers
   see the flavor before joining. Lines are verbatim bot message formats with placeholder data. */
.realm-log {
    height: 100%;
    border: 1px solid var(--idle-gold-dim);
    border-radius: 6px;
    background: rgba(11, 14, 22, 0.55);
    padding: 0.6rem 0.9rem 0.9rem;
    font-size: 0.86rem;
    line-height: 1.45;
}
.realm-log-head {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    color: var(--idle-gold);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--idle-gold-dim);
}
.realm-log .log-line {
    color: var(--mud-palette-text-secondary);
    padding: 0.32rem 0;
}
.realm-log .log-line + .log-line { border-top: 1px solid rgba(232, 184, 75, 0.07); }
.realm-log .log-line b { color: var(--mud-palette-text-primary); font-weight: 600; }

.portal-chronicle { background-image: linear-gradient(160deg, rgba(232, 184, 75, 0.06), transparent 65%); }
.portal-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
}
.portal-stats .stat { display: flex; flex-direction: column; min-width: 0; }
.portal-stats .stat-num {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--idle-gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(232, 184, 75, 0.12);
}
/* Hero names aren't numbers — let them shrink and ellipsize rather than blow out the row. */
.portal-stats .stat-name {
    font-size: 1.35rem;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-stats .stat-lbl {
    font-size: .78rem;
    letter-spacing: .4px;
    color: var(--mud-palette-text-secondary);
    margin-top: .15rem;
}
.portal-note { opacity: .75; }

/* App bar: keep the indigo gradient, add a gold hairline + soft shadow underneath. */
.idlerpg-appbar {
    border-bottom: 1px solid var(--idle-gold-dim);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
}
.brand-wordmark {
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

/* Cards & papers: a faint top-lit gradient, a gold border, and a real shadow so
   they read as carved plaques rather than flat Material cards. */
.mud-paper, .mud-card {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 60%);
    border: 1px solid var(--idle-gold-dim);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
}
.mud-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mud-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 184, 75, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Page titles in gold with a subtle engraved glow. */
.mud-typography.mud-typography-h4,
.mud-typography.mud-typography-h5 {
    color: var(--idle-gold);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(232, 184, 75, 0.12);
}

/* Tables (MudSimpleTable + MudDataGrid): parchment-style header in Cinzel small-caps,
   gold-tinted rules, tabular figures, indigo row hover. */
.mud-table-root, .mud-table-cell { font-variant-numeric: tabular-nums; }
.mud-table-head .mud-table-cell,
.mud-table-head th,
.mud-table-cell.mud-table-cell-hide + .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--idle-gold);
    border-bottom: 1px solid var(--idle-gold-dim) !important;
}
/* Data grids carry a lot of narrow numeric columns, and MudBlazor's default 20px of padding per side
   added up to more than a quarter of the table's width: 392px of the challenges grid's 1335px. That
   pushed its rightmost column outside the 1232px container and out of sight entirely, on every screen
   width, because the grid scrolls inside its own box and nothing hints that it does. Measured: 8px
   brings both the leaderboard (1284px) and the challenges grid inside the container. Scoped to data
   grids, so the roomier padding of the detail tables (character sheet, fingerprint) is untouched. */
.mud-data-grid .mud-table-cell {
    /* MudBlazor's own dense rule is `.mud-table-dense * .mud-table-row .mud-table-cell` and it sets the
       logical properties, so it beats a plain padding-left/right override on both specificity and
       property. Matching it exactly (and !important, as elsewhere in this file) is what actually lands. */
    padding-inline-start: 8px !important;
    padding-inline-end: 8px !important;
}

.mud-table-row:hover > .mud-table-cell {
    background-color: rgba(124, 132, 224, 0.10) !important;
}
.mud-table-row .mud-table-cell { border-color: rgba(232, 184, 75, 0.10); }

/* Idle (offline) leaderboard rows are frozen — they make no progress — so dim them to read at a
   glance as "resting". The status chip keeps its own colour; hover still brightens the row. */
.mud-table-row.idle-row > .mud-table-cell { opacity: .5; }
.mud-table-row.idle-row:hover > .mud-table-cell { opacity: .8; }

/* Row headers inside a table body (the fingerprint trait names) are labels, not values: gold-tinted
   and in the display face so the eye separates "what is measured" from "what it measures". Deliberately
   NOT the all-caps treatment of the column headers, which would compete with them for attention. */
.idle-row-label {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    color: var(--idle-gold);
    white-space: nowrap;
    text-align: left;
}

/* A view setting's own name, inside the settings panel on the relations page (#111). Same gold display
   face as the row labels in the detail tables, so "what is being set" separates from "what it is set to"
   without another heading level. Fixed minimum so the rows line up under each other. */
.idle-setting-label {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    font-size: .82rem;
    color: var(--idle-gold);
    min-width: 12rem;
    white-space: nowrap;
}

/* Dividers and outlined elements pick up the gold rule. */
.mud-divider { border-color: var(--idle-gold-dim) !important; }

/* "online" chip glows like a lit lantern; outlined chips get a gold edge. */
.mud-chip.mud-chip-text.mud-chip-color-success,
.mud-chip.mud-chip-filled.mud-chip-color-success {
    box-shadow: 0 0 10px rgba(95, 194, 126, 0.35);
}

/* The unique-artifact equipment cell (Player page): gold frame + inner glow. */
.idle-artifact {
    border: 1px solid var(--idle-gold) !important;
    box-shadow: inset 0 0 14px rgba(232, 184, 75, 0.45), 0 0 12px rgba(232, 184, 75, 0.25) !important;
}

/* Active nav tab (GameHeader filled buttons) reads as gold-leaf. */
.mud-button-filled.mud-button-filled-primary {
    background-color: rgba(232, 184, 75, 0.16);
    color: var(--idle-gold);
    border: 1px solid var(--idle-gold-dim);
}

/* Footer links + general links: gold, underline on hover. */
.mud-link:hover { text-decoration: underline; text-decoration-color: var(--idle-gold-dim); }

/* Themed scrollbar to finish the dark-and-gold look. */
* { scrollbar-color: rgba(232, 184, 75, 0.35) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
    background: rgba(232, 184, 75, 0.30);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(232, 184, 75, 0.5); background-clip: content-box; }