/* ============================================================================
 * coa-db-exiles.css — exil.es Warcraft skin overlay
 * ----------------------------------------------------------------------------
 * Loads AFTER coa-db.css/tooltip.css/spell-page.css. Layers a gold-on-dark
 * Cinzel theme + biome backdrop on top, keeping the structural CSS intact so
 * listing tables, tooltips, and quality colors keep working.
 *
 * The backdrop divs (#layerSky, #layerCastle) and .biome-switcher are only
 * rendered when layout::Page.backdrop_scene is Some(_) (currently: home).
 * ========================================================================== */

/* ============ FONTS ============ */
@font-face {
    font-family: 'Inter';
    src: url('https://i.sub-net.at/fonts/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap");

/* ============ PALETTE OVERRIDES (exil.es warcraft) ============
 * Tunes the existing tokens to gold-on-dark, preserves quality/spell-school
 * colors (those are class-based, not token-based, so they pass through). */
:root {
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Cinzel', 'Inter', serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Background ladder — slightly warmer, near-black */
    --bg-page:        #0c0d10;
    --bg-shell:       rgba(12, 13, 16, 0.78);
    --bg-panel:       rgba(20, 22, 27, 0.78);
    --bg-panel-alt:   rgba(28, 31, 37, 0.78);
    --bg-elevated:    rgba(36, 40, 48, 0.82);

    /* Text */
    --fg-primary:     #d6d3c9;
    --fg-muted:       #9c9890;
    --fg-faint:       #6e6a62;
    --fg-disabled:    #4a4640;

    /* Accent (warm gold instead of #ffd100) */
    --accent:         #c89058;
    --accent-soft:    #a07238;
    --accent-hover:   #e6b074;
    --link:           #c89058;
    --link-hover:     #e6b074;

    /* Borders pick up the warm gold rim */
    --border-subtle:  rgba(140, 100, 60, 0.30);
    --border-strong:  rgba(200, 144, 88, 0.55);
    --border-accent:  #c89058;

    /* Custom exiles tokens */
    --gold:        #c89058;
    --gold-bright: #e6b074;
    --gold-dim:    #6b4f2e;
    --gold-deep:   #3e2c18;
    --divider:     rgba(140, 100, 60, 0.30);
    --panel-bg:    rgba(20, 22, 27, 0.78);
    --panel-border:    rgba(140, 100, 60, 0.42);
    --panel-border-hi: rgba(200, 144, 88, 0.65);
}

body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--fg-primary);
    position: relative;
    min-height: 100vh;
}

/* ============ BACKDROP (only present on pages that ship the divs) ============ */
#layerSky, #layerCastle {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #050606;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: opacity, background-image, background-position;
    transition: opacity 0.6s ease, background-image 0.6s ease;
}
#layerSky {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(5,6,6,0.94) 100%),
        url('https://i.exil.es/exiles-landing/scenes/felsky.webp');
    /* Slow horizontal pan — same pacing as the exil.es landing
     * (28% → 72% over 28s, ease-in-out alternating) — gives clearly
     * visible cloud drift without seasickness. */
    animation: skyDrift 28s ease-in-out infinite alternate;
}
#layerCastle {
    background-image: url('https://i.exil.es/exiles-landing/scenes/felcastle-mask.webp');
    z-index: 1;
    opacity: 0.95;
    filter: brightness(0.62) contrast(1.06) saturate(0.92);
}

/* Overgrown forest is a still scene on the landing — kill the sky pan
 * here too so the biome reads consistently across exil.es and db.exil.es. */
body.biome-overgrownkeep #layerSky { animation: none; }

@keyframes skyDrift {
    0%   { background-position: 28% 30%; }
    100% { background-position: 72% 30%; }
}

/* Candle flicker canvas — pinned above #layerCastle so the flame glow
 * sits on top of the painted candles. JS sizes the canvas to viewport
 * and feeds requestAnimationFrame ticks. */
#candleCanvas {
    position: fixed;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: contents;
}
/* Content layers sit above the backdrop. Scoped to the page chrome so
 * .biome-switcher (position: fixed) and the layer divs keep their own
 * stacking — a universal `body.has-backdrop > *` rule would override
 * those with position: relative. */
body.has-backdrop > .site-header,
body.has-backdrop > .site-footer,
body.has-backdrop > main.site-main,
body.has-backdrop > nav.breadcrumb {
    position: relative;
    z-index: 5;
}

/* ============ HEADER REFRESH ============ */
.site-header {
    background: rgba(12, 13, 16, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--divider);
}
.site-header__brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.site-header__brand-mark { color: var(--gold-bright); }
.site-header__brand-dot  { color: var(--gold-dim); }
.site-header__brand-name { color: var(--fg-primary); }
.site-header__brand:hover .site-header__brand-mark {
    text-shadow: 0 0 12px rgba(230, 176, 116, 0.55);
}

.site-search {
    background: rgba(20, 22, 27, 0.85);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
}
.site-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(200, 144, 88, 0.25), 0 0 24px rgba(200, 144, 88, 0.18);
}
.site-search__submit {
    color: var(--gold);
    border-left: 1px solid var(--divider);
    font-family: var(--font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
}
.site-search__submit:hover { color: var(--gold-bright); }

.site-nav__link {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 0.35rem 0.75rem;
    border-radius: 3px;
    transition: color 0.25s ease, background 0.25s ease;
}
.site-nav__link:hover {
    color: var(--gold-bright);
    background: rgba(200, 144, 88, 0.08);
}

/* ============ BIOME SWITCHER ============ */
.biome-switcher {
    position: fixed;
    bottom: 0.8rem;
    right: 0.8rem;
    z-index: 30;
    display: flex;
    gap: 0.3rem;
    background: rgba(12, 13, 16, 0.78);
    border: 1px solid var(--panel-border);
    padding: 0.3rem;
    border-radius: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.biome-switcher button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.biome-switcher button:hover {
    color: var(--gold-bright);
    border-color: var(--gold-dim);
}
.biome-switcher button.is-active {
    color: var(--gold);
    background: rgba(200, 144, 88, 0.12);
    border-color: var(--gold-dim);
}

/* ============ HOME HERO ============ */
.hero-eyebrow {
    text-align: center;
    font-family: var(--font-display);
    color: var(--gold-dim);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-size: 0.72rem;
    margin: 1.4rem 0 0.4rem;
    text-shadow: 0 0 12px rgba(200,144,88,0.25);
}
.hero-title {
    text-align: center;
    font-family: var(--font-display);
    color: var(--gold-bright);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 1.6rem;
    text-shadow: 0 0 22px rgba(230, 176, 116, 0.45),
                 0 0 60px rgba(200, 144, 88, 0.20);
}

/* ============ HOME SEARCH (big) ============ */
.home-search {
    background: rgba(12, 13, 16, 0.78);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, box-shadow 0.4s ease;
    max-width: 720px;
    margin: 0 auto 2rem;
}
.home-search:focus-within {
    border-color: var(--gold);
    box-shadow:
        0 0 0 1px rgba(200, 144, 88, 0.30),
        0 0 28px rgba(200, 144, 88, 0.22),
        0 0 60px rgba(200, 144, 88, 0.08);
}
.home-search__submit {
    color: var(--gold-bright);
    border-left: 1px solid var(--divider);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 0 1.4rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    background: transparent;
}

/* ============ HOME CATEGORY CARDS (ASCII flag-style) ============ */
.home-cats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin: 0 0 2.5rem;
    padding: 0;
}
.home-cats > li { list-style: none; }
.home-cat {
    position: relative;
    background: rgba(12, 13, 16, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 0.7rem 1rem 0.85rem;
    font-family: var(--font-mono);
    text-decoration: none;
    display: block;
    overflow: hidden;
    color: var(--fg-muted);
    transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.5s ease;
}
.home-cat:hover, .home-cat:focus-visible {
    border-color: var(--gold);
    background: rgba(20, 22, 27, 0.92);
    box-shadow:
        0 0 22px rgba(212, 168, 94, 0.22),
        0 0 48px rgba(212, 168, 94, 0.08),
        inset 0 0 28px rgba(212, 168, 94, 0.05);
}
.home-cat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    opacity: 0.4;
    border-radius: 4px;
    z-index: 1;
}
.home-cat__ascii-top,
.home-cat__ascii-bot {
    color: var(--gold-deep);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: -0.04em;
    transition: color 0.35s ease;
    position: relative;
    z-index: 2;
    white-space: pre;
}
.home-cat:hover .home-cat__ascii-top,
.home-cat:hover .home-cat__ascii-bot { color: var(--gold-dim); }

.home-cat__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem 0.1rem 0.35rem;
    position: relative;
    z-index: 2;
}
.home-cat__name {
    font-family: var(--font-display);
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.95rem;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}
.home-cat:hover .home-cat__name {
    color: var(--gold-bright);
    text-shadow: 0 0 10px rgba(230, 176, 116, 0.45);
}
.home-cat__count {
    font-family: var(--font-mono);
    color: var(--fg-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.home-cat__hint {
    color: var(--fg-faint);
    font-size: 0.72rem;
    padding: 0 0.1rem;
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
}

/* ============ HOME SECTIONS (Quick searches, About) ============ */
.home-section {
    background: var(--panel-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    padding: 1.2rem 1.4rem 1.4rem;
    margin-bottom: 1.4rem;
}
.home-section h2 {
    font-family: var(--font-display);
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.86rem;
    padding-bottom: 0.45rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--divider);
}
.home-chip {
    background: rgba(20, 22, 27, 0.85);
    border: 1px solid var(--panel-border);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 0.32rem 0.7rem;
    border-radius: 3px;
}
.home-chip:hover, .home-chip:focus-visible {
    color: var(--gold-bright);
    border-color: var(--gold);
    background: rgba(20, 22, 27, 0.85);
}
.home-about { color: var(--fg-muted); }
.home-about em {
    color: var(--gold-bright);
    font-style: normal;
    font-weight: 600;
}
.home-about a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dotted var(--gold-dim);
}
.home-about a:hover {
    color: var(--gold-bright);
    border-bottom-color: var(--gold);
}

/* ============ FOOTER REFRESH ============ */
.site-footer {
    border-top: 1px solid var(--divider);
    background: rgba(12, 13, 16, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fg-muted);
    font-size: 0.82rem;
}
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: var(--gold-bright); }

/* ============ LISTING TABLES — make them readable on translucent bg ============ */
.listview {
    background: rgba(15, 18, 23, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
}

/* ============ BREADCRUMB ============ */
.breadcrumb { background: rgba(12, 13, 16, 0.62); }
.breadcrumb__link { color: var(--fg-muted); }
.breadcrumb__link:hover { color: var(--gold-bright); }

@media (max-width: 640px) {
    .biome-switcher { bottom: 0.6rem; right: 0.6rem; }
    .hero-title { font-size: 1.2rem; }
}