/**
 * Sava theme — "Drow Grimoire": Baldur's Gate II carved-stone/bronze chrome
 * over a Book of Vile Darkness blood-and-ink mood. Single source of truth for
 * fonts, design tokens, page base, and shared ornate primitives.
 * All assets self-hosted / original (fonts under SIL OFL).
 *
 * NOTE: --sava-parchment / --sava-ink keep their aged-paper values on purpose —
 * scrolls and sheets are genuinely parchment with dark ink in this theme.
 */

@font-face {
    font-family: "Unifraktur Maguntia";
    src: url("/static/fonts/unifrakturmaguntia-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel";
    src: url("/static/fonts/cinzel-var.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "EB Garamond";
    src: url("/static/fonts/eb-garamond-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "EB Garamond";
    src: url("/static/fonts/eb-garamond-italic-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Stone / void base */
    --sava-stone-0: #080605;
    --sava-stone-1: #0c0908;
    --sava-stone-2: #15100d;
    --sava-stone-3: #1f1813;
    --sava-bg-void: #0c0908;
    --sava-top-bar-height: 3.25rem;

    /* Parchment (light surfaces: scrolls, sheets, panels) — values pinned */
    --sava-parchment: #efe8dc;
    --sava-parchment-mid: #e1d6c2;
    --sava-parchment-dark: #cabfa8;

    /* Ink on parchment */
    --sava-ink: #1a1610;
    --sava-ink-muted: #4a4036;

    /* Bone: text on dark stone */
    --sava-bone: #e9ddc6;
    --sava-bone-dim: #b3a280;
    --sava-bone-faint: #8a7c63;

    /* Metal: tarnished bronze / pewter */
    --sava-bronze: #b08534;
    --sava-bronze-lt: #e8c882;
    --sava-bronze-dk: #6e4d1e;
    --sava-pewter: #8e8576;

    /* Blood / arcane accents */
    --sava-blood: #8b1a1a;
    --sava-blood-lt: #c0392b;
    --sava-blood-dk: #4a0e0e;

    /* Player factions (blue = icy arcane teal, never violet) */
    --sava-red: #b3261e;
    --sava-red-deep: #5e120f;
    --sava-red-soft: #efd3cb;
    --sava-red-glow: rgba(206, 64, 48, 0.55);
    --sava-blue: #2f8f99;
    --sava-blue-deep: #123a40;
    --sava-blue-soft: #cfe6e6;
    --sava-blue-glow: rgba(70, 206, 196, 0.5);

    /* Borders / edges */
    --sava-border-ink: #060403;
    --sava-edge: rgba(176, 133, 52, 0.38);
    --sava-edge-bright: rgba(232, 200, 130, 0.6);
    --sava-border-soft: rgba(176, 133, 52, 0.24);

    /* Status (dark wax-seal badges: dark bg + light fg) */
    --sava-ok-fg: #8fd39a;
    --sava-ok-bg: #14301c;
    --sava-warn-fg: #e6bb55;
    --sava-warn-bg: #38290e;
    --sava-danger: #c0392b;
    --sava-danger-bg: #371110;
    --sava-muted-fg: #b3a280;
    --sava-muted-bg: #221b14;

    /* Accent aliases used across pages */
    --sava-accent-warm: #c79a47;
    --sava-accent-cool: #4fb3bd;

    /* Gradients */
    --sava-gradient-bronze: linear-gradient(180deg, #e8c882 0%, #b08534 44%, #6e4d1e 100%);
    --sava-gradient-bronze-soft: linear-gradient(180deg, #c9a558 0%, #8a6526 100%);
    --sava-gradient-blood: linear-gradient(180deg, #a32a23 0%, #6e1411 52%, #3a0b0a 100%);
    --sava-gradient-banner: linear-gradient(180deg, #221912 0%, #140d0a 100%);
    --sava-gradient-banner-mirror: linear-gradient(180deg, #2c2017 0%, #1a120d 100%);
    --sava-gradient-stone-panel: linear-gradient(180deg, #1d1712 0%, #120d0a 100%);
    --sava-gradient-parchment: linear-gradient(178deg, #f4eee2 0%, var(--sava-parchment) 46%, var(--sava-parchment-mid) 100%);
    --sava-gradient-cta: var(--sava-gradient-bronze);
    --sava-gradient-cta-alt: var(--sava-gradient-blood);

    /* Textures — display-sized WebP (not the multi-MB source PNGs).
       Revealed only after branding-decode.js marks <html.sava-branding-ready>
       so slow networks never flash top-down progressive paint. */
    --sava-tex-stone: url("/static/img/bg-stone.webp");
    --sava-tex-parchment: url("/static/img/parchment.webp");
    --sava-icon-crest: url("/static/img/lolth-rune-seal.webp");
    --sava-bg-sigil: url("/static/img/lolth-spider-crest.webp");
    --sava-bg-sacrifice-sigil: url("/static/img/lolth-priestess-mask.webp");
    --sava-branding-fade: 0.55s;

    /* Fonts */
    --sava-font-display: "Unifraktur Maguntia", "Cinzel", Georgia, "Times New Roman", serif;
    --sava-font-head: "Cinzel", Georgia, "Times New Roman", serif;
    --sava-font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --sava-font-mono: ui-monospace, "Consolas", "Andale Mono", "Courier New", Courier, monospace;

    /* Shadows */
    --sava-shadow-panel: 0 0 0 1px var(--sava-edge), 0 18px 44px rgba(0, 0, 0, 0.66),
        inset 0 1px 0 rgba(232, 200, 130, 0.14);
    --sava-shadow-float: 0 10px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(232, 200, 130, 0.12);
    --sava-shadow-inset: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(232, 200, 130, 0.12);
    --sava-text-emboss: 0 1px 0 #000, 0 -1px 0 rgba(232, 200, 130, 0.18);

    --sava-focus: #e8c882;
    --sava-focus-ring: rgba(232, 200, 130, 0.5);

    --sava-duration: 0.22s;
    --sava-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --sava-tap-press: 1px;
    --sava-tap-lift: -2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sava-duration: 0.01ms;
        --sava-ease: linear;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

:is(a, button, input, textarea, select, summary, [tabindex]):focus {
    outline: none;
}
:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sava-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--sava-focus-ring);
}

/* ============================ Shared ornate primitives ============================ */

/* The crest emblem (drow spider sigil) */
.crest {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--crest-src, var(--sava-icon-crest)) center / contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

/* Horizontal medallion divider; tint via color */
.sava-divider {
    width: min(28rem, 90%);
    height: 2.4rem;
    margin: 1.1rem auto;
    color: var(--sava-bronze);
    -webkit-mask: url("/static/img/divider.svg") center / contain no-repeat;
    mask: url("/static/img/divider.svg") center / contain no-repeat;
    background: currentColor;
    opacity: 0.85;
}

/* Bronze-edged stone/parchment frame. Add .ornate for filigree corners. */
.frame {
    position: relative;
    border: 2px solid transparent;
    border-image: var(--sava-gradient-bronze) 1;
    box-shadow: var(--sava-shadow-panel);
}
.frame.ornate::before,
.frame.ornate::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    background: var(--sava-bronze-lt);
    -webkit-mask: url("/static/img/corner.svg") center / contain no-repeat;
    mask: url("/static/img/corner.svg") center / contain no-repeat;
    opacity: 0.9;
    pointer-events: none;
}
.frame.ornate::before {
    top: -2px;
    left: -2px;
}
.frame.ornate::after {
    bottom: -2px;
    right: -2px;
    transform: rotate(180deg);
}

/* Inline UI icon: sized to text, inherits color via stroke=currentColor SVGs */
.ui-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
    flex: 0 0 auto;
}
.ui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Custom scrollbars across themed panels */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sava-bronze-dk) transparent;
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
*::-webkit-scrollbar-thumb {
    background: var(--sava-bronze-dk);
    border-radius: 0;
    border: 2px solid rgba(0, 0, 0, 0.4);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--sava-bronze);
}

::selection {
    background: var(--sava-blood);
    color: var(--sava-bone);
}

/* ============================ Branding decode gate ============================
 * Large crest/sigil/stone bitmaps decode top-down on slow links and look unfinished.
 * Crests stay opacity:0 until branding-decode.js adds .sava-branding-ready after
 * Image.decode(). Atmosphere (sigil + stone) is omitted from body background-image
 * until that same class — do NOT use body::after { z-index: -1 } for this; that
 * paints behind the body fill and makes the splash disappear entirely.
 * =========================================================================== */

.crest,
.site-hero .logo,
.site-sheet-header .logo,
.site-timeselect-header .logo,
.site-error-icon,
body.site-chrome #sidebar .sidebar-logo,
.lobby-sidebar .lobby-header .logo {
    opacity: 0;
    transition: opacity var(--sava-branding-fade) var(--sava-ease);
}

html.sava-branding-ready .crest,
html.sava-branding-ready .site-hero .logo,
html.sava-branding-ready .site-sheet-header .logo,
html.sava-branding-ready .site-timeselect-header .logo,
html.sava-branding-ready .site-error-icon,
html.sava-branding-ready body.site-chrome #sidebar .sidebar-logo,
html.sava-branding-ready .lobby-sidebar .lobby-header .logo {
    opacity: 1;
}

/* Splash atmosphere: attach decoded bitmaps to body (same stack as pre-gate design). */
html.sava-branding-ready body.site-chrome {
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(120, 70, 30, 0.22), transparent 55%),
        radial-gradient(ellipse 90% 60% at 50% 120%, rgba(90, 20, 20, 0.2), transparent 55%),
        linear-gradient(180deg, rgba(8, 6, 5, 0.72), rgba(8, 6, 5, 0.92)),
        var(--sava-bg-sigil),
        var(--sava-tex-stone);
    background-size: cover, cover, cover, min(72vw, 42rem), 760px;
    background-position: center, center, center, center 12vh, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

html.sava-branding-ready body.game-lobby,
html.sava-branding-ready body.watch-page {
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(120, 70, 30, 0.18), transparent 55%),
        radial-gradient(ellipse 90% 60% at 50% 120%, rgba(90, 20, 20, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(8, 6, 5, 0.8), rgba(8, 6, 5, 0.94)),
        var(--sava-bg-sigil),
        var(--sava-tex-stone);
    background-size: cover, cover, cover, min(72vw, 42rem), 760px;
    background-position: center, center, center, center 12vh, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

/* Nav + lobby sidebars: stone tile only after decode (gradient paints first). */
html.sava-branding-ready body.site-chrome #sidebar {
    background-image:
        linear-gradient(180deg, rgba(20, 14, 10, 0.92), rgba(8, 6, 5, 0.96)),
        var(--sava-tex-stone);
    background-size: cover, 520px;
}

html.sava-branding-ready .lobby-sidebar {
    background-image:
        linear-gradient(180deg, rgba(22, 16, 11, 0.92), rgba(8, 6, 5, 0.96)),
        var(--sava-tex-stone);
    background-size: cover, 520px;
}

/* In-board / overlay sigils keep their designed opacity only after decode. */
.game-board::before,
.dice-result::before {
    transition: opacity var(--sava-branding-fade) var(--sava-ease);
}

html:not(.sava-branding-ready) .game-board::before,
html:not(.sava-branding-ready) .dice-result::before {
    opacity: 0 !important;
}