/* Base styles for the whole app. Component-specific styles live in *.razor.css next to the component.
   The look (plans/styling.md 4.1) keeps Warfish's gist, made modern: plain sans-serif text, paper panels on a parchment
   page, darker tabs whose selected tab turns paper and joins its panel, thin borders and no shadows. Every colour is a
   variable here; component sheets use them (with a fallback), never a player colour.
   campaign-theme (plans/branding.md 3): "Banner's Campaign" retunes these tokens (parchment page, paper panels, ink text,
   Cinzel headings). No hex colour outside :root below (a test scans every stylesheet). */

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel-latin-wght.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --page-bg: #F3E3C3;
    --page-fg: #2E1D14;
    --muted-fg: #66503F;
    --heading-fg: #5C3B25;
    --accent: #A8392F;
    --accent-fg: #FFFFFF;
    --bar-bg: #2F4858;
    --bar-fg: #FFF7EA;
    --border: #8F7356;
    --notice-bg: #FBE8B6;
    --error-bg: #F7D9D2;

    /* campaign-theme (plans/branding.md 3.4): the tabs and panels (orders written on paper on a parchment page). */
    --tab-bg: #E6D3AE;
    --tab-active-bg: var(--panel-bg);
    --panel-bg: #FBF4E6;
    --panel-border: #C4A97F;
    --focus-ring: var(--accent);
    /* Faint tints: private messages, what happened since your last turn, the history's turn headers. */
    --muted-bg: #F5E6DF;
    --new-bg: #DDEEF2;
    --surface-muted: #EFE3CC;
    /* profile-page: "You won" / "You lost" text (the words carry the meaning; the colour only reinforces it). */
    --won-fg: #24586A;
    --lost-fg: var(--accent);

    /* Decorative brand tokens: never used for text, markers, swatches, the legend or rings (B18). */
    --brass: #F2C14E;
    --frame: #CF9C60;
    --rule: #DCC7A1;
    --banner-red: #C8453A;
    /* The board's keyboard focus ring, as before the theme (B18). */
    --board-focus: #8B1E1E;
}

html, body {
    margin: 0;
    font-family: var(--font-ui);
    background-color: var(--page-bg);
    color: var(--page-fg);
    line-height: 1.5;
}

/* steady-board (plans/lobby-3.md L18): the vertical scrollbar's space is always reserved, so the page's width (and the
   board's size) doesn't change when the content below the board grows past the window or shrinks back. */
html {
    scrollbar-gutter: stable;
}

h1, h2 {
    font-family: var(--font-display);
    color: var(--heading-fg);
    letter-spacing: 0.02em;
}

h1:focus {
    outline: none;
}

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

.button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--panel-bg);
    color: var(--page-fg);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button.primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.button:not(.primary):not(:disabled):hover {
    border-color: var(--muted-fg);
}

.button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* A button that looks like a link (sign out in the top bar). */
.link-button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.landing {
    text-align: center;
    padding-top: 3rem;
}

.landing .tagline {
    color: var(--muted-fg);
    font-size: 1.125rem;
}

/* The email-first hint under the sign-in button (email-sign-in 4.1). */
.landing .hint {
    color: var(--muted-fg);
    max-width: 32rem;
    margin: 0.75rem auto 0;
}

/* Text for screen readers only (the legend's and home rows' "(out)", the phase bar's "(done)", a hidden label). The one
   copy for the app: Web.Components' sheets don't define their own (styling 4.3). Not display: none, which would hide it
   from screen readers too. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.notice {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: var(--notice-bg);
}

/* Blazor's unhandled-error bar (index.html). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background-color: var(--error-bg);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* fast-load (plans/fast-load.md FL7): the loading screen in index.html, shown until the app renders over it. Static HTML
   and CSS only. The bar looks like MainLayout's top bar (.top-bar, .brand) so nothing jumps when the app replaces it.
   Blazor sets --blazor-load-percentage and --blazor-load-percentage-text on the document while it downloads; without
   them the screen reads "Loading " over an empty track. role="status" in the markup lets screen readers announce it. */
.app-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-loading-bar {
    padding: 0.75rem 1.5rem;
    background-color: var(--bar-bg);
    color: var(--bar-fg);
    box-shadow: inset 0 -3px 0 var(--accent);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-loading-logo {
    display: block;
    width: 1.3em;
    height: 1.3em;
    flex: none;
}

.app-loading-mascot {
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 22vh auto 0;
}

.app-loading-track {
    width: min(20rem, 80%);
    height: 0.5rem;
    margin: 1.25rem auto 0;
    border-radius: 999px;
    background-color: var(--border);
    overflow: hidden;
}

.app-loading-fill {
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    background-color: var(--accent);
    transition: width 0.1s ease-out;
}

.app-loading-text {
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--muted-fg);
}

.app-loading-text::after {
    content: "Loading " var(--blazor-load-percentage-text, "");
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-fill {
        transition: none;
    }
}

/* The same phone padding as the top bar's (MainLayout.razor.css, 480 px). */
@media (max-width: 480px) {
    .app-loading-bar {
        padding: 0.5rem 1rem;
    }
}

/* fast-load (FL14): the Authorizing state (App.razor, Pages/Home.razor) lasts milliseconds; its "Checking sign-in..."
   is visually hidden, for screen readers only, and this keeps a little room so the page doesn't jump. */
.auth-checking {
    min-height: 2rem;
}