html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.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;
}
/* ============================================================
   Wizards Tavern theme - Solarized (dark is the default look).
   Palette: base03 #002b36, base02 #073642, base01 #586e75,
   base00 #657b83, base0 #839496, base1 #93a1a1, base2 #eee8d5,
   base3 #fdf6e3; accents: yellow #b58900, orange #cb4b16,
   red #dc322f, magenta #d33682, violet #6c71c4, blue #268bd2,
   cyan #2aa198, green #859900.
   Every color below goes through these variables. The light
   Solarized variant hangs off [data-theme="light"]: Solarized is
   symmetric, so light mode is the dark palette with the monotone
   roles swapped in pairs (base03<->base3, base02<->base2,
   base01<->base1, base00<->base0); the accents are unchanged.
   ============================================================ */
:root {
    --wt-base03: #002b36;
    --wt-base02: #073642;
    --wt-base01: #586e75;
    --wt-base00: #657b83;
    --wt-base0: #839496;
    --wt-base1: #93a1a1;
    --wt-base2: #eee8d5;
    --wt-base3: #fdf6e3;
    --wt-yellow: #b58900;
    --wt-orange: #cb4b16;
    --wt-red: #dc322f;
    --wt-magenta: #d33682;
    --wt-violet: #6c71c4;
    --wt-blue: #268bd2;
    --wt-cyan: #2aa198;
    --wt-green: #859900;
}

/* Light Solarized: only the monotones swap roles (see header note). */
[data-theme="light"] {
    --wt-base03: #fdf6e3;
    --wt-base3: #002b36;
    --wt-base02: #eee8d5;
    --wt-base2: #073642;
    --wt-base01: #93a1a1;
    --wt-base1: #586e75;
    --wt-base00: #839496;
    --wt-base0: #657b83;
}

/* Top-bar light/dark toggle (Components/Layout/ThemeToggle). */
.wt-theme-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid var(--wt-base01);
    border-radius: 6px;
    color: var(--wt-base2);
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

    .wt-theme-toggle:hover {
        border-color: var(--wt-base1);
        color: var(--wt-base3);
    }

body {
    margin: 0;
    background-color: var(--wt-base03);
    color: var(--wt-base2);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
    color: var(--wt-base3);
}

a {
    color: var(--wt-blue);
}

    a:hover {
        color: var(--wt-cyan);
    }

.btn-primary {
    background-color: var(--wt-blue);
    border-color: var(--wt-blue);
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--wt-cyan);
        border-color: var(--wt-cyan);
    }

.btn-secondary {
    background-color: var(--wt-base01);
    border-color: var(--wt-base01);
    color: var(--wt-base3);
}

.form-control {
    background-color: var(--wt-base02);
    border-color: var(--wt-base01);
    color: var(--wt-base2);
}

    .form-control:focus {
        background-color: var(--wt-base02);
        border-color: var(--wt-blue);
        color: var(--wt-base2);
        box-shadow: 0 0 0 0.2rem rgba(38, 139, 210, 0.35);
    }

.wt-panel {
    background-color: var(--wt-base02);
    border: 1px solid var(--wt-base01);
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
}

.wt-room-card {
    background-color: var(--wt-base03);
    border: 1px solid var(--wt-base01);
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
}

.wt-user-list {
    list-style: none;
    padding-left: 0;
}

    .wt-user-list li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.3rem 0;
    }

.wt-chat-name {
    font-weight: 600;
}

.wt-you {
    color: var(--wt-base1);
    font-size: 0.9rem;
}

.wt-chat-log {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.wt-color-input {
    width: 3.5rem;
    height: 2.4rem;
    padding: 0.15rem;
    background-color: var(--wt-base02);
    border: 1px solid var(--wt-base01);
    border-radius: 6px;
    cursor: pointer;
}

.wt-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wt-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--wt-base01);
    border-radius: 50%;
    cursor: pointer;
}

    .wt-swatch:hover {
        border-color: var(--wt-base1);
    }

    .wt-swatch.selected {
        border-color: var(--wt-base3);
        box-shadow: 0 0 0 0.15rem rgba(253, 246, 227, 0.35);
    }

.wt-chat-log-preview {
    background-color: var(--wt-base03);
    border: 1px solid var(--wt-base01);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.game-canvas {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 800 / 480;
    background-color: var(--wt-base02);
    border: 1px solid var(--wt-base01);
    border-radius: 10px;
    overflow: hidden;
}

    .game-canvas canvas {
        max-width: 100%;
    }

/* ============================================================
   Fluent UI Blazor v5 - Solarized mapping.
   Fluent components read their colors from --color* design
   tokens. The library applies its own theme values at runtime
   on the root element; custom properties inherit from the
   NEAREST ancestor that sets them, so defining the tokens on
   body (an ancestor of everything the app renders, including
   the FluentProviders hosts in MainLayout) makes the Solarized
   values win for the whole subtree regardless of how the
   library's values were applied.
   Every value goes through the --wt-* tokens above, so light
   mode needs no separate Fluent block: the [data-theme="light"]
   pair-swap carries these along automatically. Brand follows
   the same pattern as .btn-primary (blue, cyan on hover).
   Dialog and toast surfaces ride on the neutral background
   tokens, so they are covered by the surface mapping.
   ============================================================ */
body {
    /* Neutral surfaces: base03 is the page, base02 the panels/cards. */
    --colorNeutralBackground1: var(--wt-base03);
    --colorNeutralBackground1Hover: var(--wt-base02);
    --colorNeutralBackground1Pressed: var(--wt-base02);
    --colorNeutralBackground1Selected: var(--wt-base02);
    --colorNeutralBackground2: var(--wt-base02);
    --colorNeutralBackground2Hover: var(--wt-base01);
    --colorNeutralBackground2Pressed: var(--wt-base02);
    --colorNeutralBackground2Selected: var(--wt-base01);
    --colorNeutralBackground3: var(--wt-base02);
    --colorNeutralBackground3Hover: var(--wt-base01);
    --colorNeutralBackground3Pressed: var(--wt-base02);
    --colorNeutralBackground3Selected: var(--wt-base01);
    --colorNeutralBackground4: var(--wt-base03);
    --colorNeutralBackground4Hover: var(--wt-base02);
    --colorNeutralBackground4Pressed: var(--wt-base03);
    --colorNeutralBackground4Selected: var(--wt-base02);
    --colorNeutralBackground5: var(--wt-base03);
    --colorNeutralBackground5Hover: var(--wt-base02);
    --colorNeutralBackground5Pressed: var(--wt-base03);
    --colorNeutralBackground5Selected: var(--wt-base02);
    --colorNeutralBackground6: var(--wt-base02);
    --colorNeutralBackgroundDisabled: var(--wt-base02);

    /* Neutral text. */
    --colorNeutralForeground1: var(--wt-base2);
    --colorNeutralForeground1Hover: var(--wt-base3);
    --colorNeutralForeground1Pressed: var(--wt-base2);
    --colorNeutralForeground1Selected: var(--wt-base3);
    --colorNeutralForeground1Static: var(--wt-base2);
    --colorNeutralForeground2: var(--wt-base1);
    --colorNeutralForeground2Hover: var(--wt-base2);
    --colorNeutralForeground2Pressed: var(--wt-base1);
    --colorNeutralForeground2Selected: var(--wt-base2);
    --colorNeutralForeground3: var(--wt-base0);
    --colorNeutralForeground4: var(--wt-base0);
    --colorNeutralForegroundDisabled: var(--wt-base01);
    --colorNeutralForegroundInverted: var(--wt-base03);
    --colorNeutralForegroundOnBrand: #ffffff;

    /* Brand: Solarized blue, cyan on hover/selected. */
    --colorBrandBackground: var(--wt-blue);
    --colorBrandBackgroundHover: var(--wt-cyan);
    --colorBrandBackgroundPressed: var(--wt-blue);
    --colorBrandBackgroundSelected: var(--wt-cyan);
    --colorBrandBackground2: var(--wt-base02);
    --colorBrandBackground2Hover: var(--wt-base01);
    --colorBrandBackground2Pressed: var(--wt-base02);
    --colorBrandBackgroundInvertedSelected: var(--wt-cyan);
    --colorBrandForeground1: var(--wt-blue);
    --colorBrandForeground2: var(--wt-cyan);
    --colorBrandForegroundLink: var(--wt-blue);
    --colorBrandForegroundLinkHover: var(--wt-cyan);
    --colorBrandForegroundLinkPressed: var(--wt-blue);
    --colorBrandForegroundLinkSelected: var(--wt-cyan);
    --colorCompoundBrandForeground1: var(--wt-blue);
    --colorCompoundBrandForeground1Hover: var(--wt-cyan);
    --colorCompoundBrandForeground1Pressed: var(--wt-blue);
    --colorBrandStroke1: var(--wt-blue);
    --colorBrandStroke2: var(--wt-blue);

    /* Strokes / borders and focus. */
    --colorNeutralStroke1: var(--wt-base01);
    --colorNeutralStroke1Hover: var(--wt-base1);
    --colorNeutralStroke1Pressed: var(--wt-base01);
    --colorNeutralStroke1Selected: var(--wt-base1);
    --colorNeutralStroke2: var(--wt-base01);
    --colorNeutralStrokeAccessible: var(--wt-base1);
    --colorNeutralStrokeAccessibleHover: var(--wt-base2);
    --colorNeutralStrokeAccessiblePressed: var(--wt-base1);
    --colorNeutralStrokeAccessibleSelected: var(--wt-base2);
    --colorStrokeFocus1: var(--wt-base3);
    --colorStrokeFocus2: var(--wt-base03);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentBackground: transparent;

    /* Subtle (ghost) surfaces. */
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: var(--wt-base02);
    --colorSubtleBackgroundPressed: var(--wt-base02);
    --colorSubtleBackgroundSelected: var(--wt-base02);

    /* Status palette accents (toast / message-bar intent chips). */
    --colorPaletteRedBackground3: var(--wt-red);
    --colorPaletteRedForeground1: var(--wt-red);
    --colorPaletteRedBorder2: var(--wt-red);
    --colorPaletteGreenBackground3: var(--wt-green);
    --colorPaletteYellowBackground3: var(--wt-yellow);
    --colorPaletteDarkOrangeBackground3: var(--wt-orange);
}