/* ===========================================================
       Theme: WoW Race Name — Horde red / Alliance blue auto-toggle
       Activated by body.pk-page--wow
       The body gains either .is-horde or .is-alliance via JS to
       swing the accent palette. No Blizzard trademarks or assets.
       =========================================================== */
    body.pk-page--wow {
        --wow-ink:        #0b0a08;
        --wow-ink-2:      #14110d;
        --wow-fg:         #e9dec4;
        --wow-fg-mut:     #b3a586;
        --wow-fg-dim:     #75694e;

        /* Default = neutral gold (before a race is picked) */
        --wow-acc:        #c9a84a;
        --wow-acc-hi:     #f3d978;
        --wow-acc-lo:     #7a6320;
        --wow-acc-rgb:    201, 168, 74;

        background: var(--wow-ink);
        color: var(--wow-fg);
        font-family: 'IM Fell English', 'EB Garamond', 'Times New Roman', serif;
        min-height: 100vh;
        position: relative;
    }
    /* HORDE — blood red */
    body.pk-page--wow.is-horde {
        --wow-acc:        #b22a1f;
        --wow-acc-hi:     #e85a44;
        --wow-acc-lo:     #5e1209;
        --wow-acc-rgb:    178, 42, 31;
    }
    /* ALLIANCE — royal blue */
    body.pk-page--wow.is-alliance {
        --wow-acc:        #2b6db8;
        --wow-acc-hi:     #5b9ce0;
        --wow-acc-lo:     #103458;
        --wow-acc-rgb:    43, 109, 184;
    }

    body.pk-page--wow::before,
    body.pk-page--wow::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        transition: background .5s ease;
    }
    body.pk-page--wow::before {
        background:
            radial-gradient(720px 540px at 50% 0%, rgba(var(--wow-acc-rgb), 0.18), transparent 65%),
            radial-gradient(540px 440px at 95% 100%, rgba(var(--wow-acc-rgb), 0.10), transparent 60%),
            linear-gradient(180deg, var(--wow-ink) 0%, var(--wow-ink-2) 100%);
    }
    body.pk-page--wow::after {
        /* faint banner-cloth weave */
        background-image:
            repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
            repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 6px);
        opacity: 0.7;
    }

    body.pk-page--wow > *:not(.pk-nav):not(.pk-mnav) { position: relative; z-index: 1; }
    body.pk-page--wow > .pk-nav { z-index: 50; }

    body.pk-page--wow .pk-nav {
        background: rgba(11,10,8,0.92) !important;
        border-bottom: 1px solid rgba(var(--wow-acc-rgb), 0.30) !important;
    }
    body.pk-page--wow .pk-nav__links a { color: var(--wow-fg) !important; }
    body.pk-page--wow .pk-nav__links a:hover { color: var(--wow-acc-hi) !important; }
    body.pk-page--wow .pk-nav__lang a.is-active {
        background: linear-gradient(135deg, var(--wow-acc-lo), var(--wow-acc)) !important;
        color: #0b0a08 !important;
    }

    /* HERO */
    .wow-hero {
        text-align: center;
        padding: 64px 24px 28px;
        max-width: 980px;
        margin: 0 auto;
    }
    .wow-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: 'Cinzel', serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--wow-acc);
        padding: 8px 16px;
        border: 1px solid rgba(var(--wow-acc-rgb), 0.40);
        background: rgba(var(--wow-acc-rgb), 0.06);
        transition: color .4s ease, border-color .4s ease, background .4s ease;
    }
    .wow-hero__h1 {
        font-family: 'Cinzel', serif;
        font-weight: 900;
        font-size: clamp(2.4rem, 6.5vw, 4.6rem);
        letter-spacing: 0.02em;
        margin: 24px 0 18px;
        background: linear-gradient(180deg, var(--wow-acc-hi) 0%, var(--wow-acc) 55%, var(--wow-acc-lo) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 40px rgba(var(--wow-acc-rgb), 0.18);
        transition: background .4s ease;
    }
    .wow-hero__sub {
        max-width: 720px;
        margin: 0 auto;
        font-size: clamp(1rem, 1.4vw, 1.13rem);
        line-height: 1.7;
        color: var(--wow-fg-mut);
    }
    .wow-hero__sub strong { color: var(--wow-acc); font-weight: 700; }

    /* RACE CHIPS */
    .wow-races {
        max-width: 880px;
        margin: 28px auto 0;
        padding: 0 16px;
    }
    .wow-races__label {
        font-family: 'Cinzel', serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--wow-acc);
        text-align: center;
        margin: 0 0 12px;
    }
    .wow-races__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }
    .wow-race-chip {
        appearance: none;
        cursor: pointer;
        background: rgba(11,10,8,0.55);
        border: 1px solid rgba(var(--wow-acc-rgb), 0.28);
        color: var(--wow-fg);
        padding: 12px 8px;
        border-radius: 3px;
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        transition: background .15s, border-color .15s, color .15s, transform .15s;
    }
    .wow-race-chip[data-faction="horde"] {
        border-color: rgba(178, 42, 31, 0.42);
    }
    .wow-race-chip[data-faction="alliance"] {
        border-color: rgba(43, 109, 184, 0.42);
    }
    .wow-race-chip:hover {
        background: rgba(var(--wow-acc-rgb), 0.10);
        color: var(--wow-acc-hi);
        transform: translateY(-1px);
    }
    .wow-race-chip.is-active {
        background: linear-gradient(180deg, var(--wow-acc) 0%, var(--wow-acc-lo) 100%);
        color: #0b0a08 !important;
        border-color: var(--wow-acc-hi);
        box-shadow: 0 0 22px -6px rgba(var(--wow-acc-rgb), 0.55);
    }

    /* ACTIONS */
    .wow-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 24px;
    }
    .wow-btn {
        appearance: none;
        cursor: pointer;
        font-family: 'Cinzel', serif;
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--wow-fg);
        padding: 13px 22px;
        background: rgba(var(--wow-acc-rgb), 0.05);
        border: 1px solid rgba(var(--wow-acc-rgb), 0.40);
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background .15s, border-color .15s, color .15s;
    }
    .wow-btn:hover {
        background: rgba(var(--wow-acc-rgb), 0.14);
        border-color: var(--wow-acc);
        color: var(--wow-acc-hi);
    }
    .wow-btn--primary {
        background: linear-gradient(180deg, var(--wow-acc) 0%, var(--wow-acc-lo) 100%);
        color: #0b0a08 !important;
        border-color: var(--wow-acc);
        box-shadow: 0 0 30px -8px rgba(var(--wow-acc-rgb), 0.55);
    }
    .wow-btn--primary:hover {
        background: linear-gradient(180deg, var(--wow-acc-hi) 0%, var(--wow-acc) 100%);
        color: #0b0a08 !important;
    }
    .wow-btn.is-success {
        background: rgba(var(--wow-acc-rgb), 0.20) !important;
        border-color: var(--wow-acc) !important;
        color: var(--wow-acc-hi) !important;
    }

    /* CARD — character portrait card */
    .wow-card {
        max-width: 760px;
        margin: 28px auto 0;
        padding: 32px 30px;
        background: rgba(11,10,8,0.78);
        border: 1px solid rgba(var(--wow-acc-rgb), 0.34);
        border-radius: 4px;
        position: relative;
        min-height: 220px;
        transition: border-color .4s ease;
    }
    .wow-card.is-empty {
        text-align: center;
        font-style: italic;
        color: var(--wow-fg-dim);
        padding: 60px 30px;
    }
    .wow-card__crest {
        text-align: center;
        margin-bottom: 8px;
    }
    .wow-card__crest svg {
        width: 56px; height: 56px;
        filter: drop-shadow(0 0 20px rgba(var(--wow-acc-rgb), 0.40));
    }
    .wow-card__name {
        font-family: 'Cinzel', serif;
        font-weight: 900;
        font-size: clamp(1.8rem, 4.5vw, 2.8rem);
        letter-spacing: 0.04em;
        text-align: center;
        margin: 0 0 4px;
        background: linear-gradient(180deg, var(--wow-acc-hi) 0%, var(--wow-acc) 60%, var(--wow-acc-lo) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .wow-card__line {
        font-family: 'Cinzel', serif;
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--wow-acc);
        margin: 0 0 18px;
    }
    .wow-card__sep {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--wow-acc-rgb), 0.46), transparent);
        margin: 16px 0;
    }
    .wow-card__bio {
        font-family: 'IM Fell English', serif;
        font-style: italic;
        font-size: 1.06rem;
        line-height: 1.78;
        color: var(--wow-fg);
        text-align: center;
    }

    /* SECTIONS */
    .wow-section {
        max-width: 880px;
        margin: 64px auto 0;
        padding: 0 24px;
    }
    .wow-section__title {
        font-family: 'Cinzel', serif;
        font-size: clamp(1.4rem, 3vw, 1.95rem);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--wow-acc);
        margin: 0 0 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(var(--wow-acc-rgb), 0.30);
    }
    .wow-section__body {
        font-size: 1.02rem;
        line-height: 1.78;
        color: var(--wow-fg-mut);
    }
    .wow-section__body strong { color: var(--wow-acc); font-weight: 700; }
    .wow-section__body em { color: var(--wow-acc-hi); font-style: italic; }

    /* FAQ */
    .wow-faq { display: grid; gap: 8px; }
    .wow-faq__item {
        background: rgba(11,10,8,0.55);
        border: 1px solid rgba(var(--wow-acc-rgb), 0.22);
        border-radius: 3px;
    }
    .wow-faq__q {
        padding: 14px 18px;
        font-family: 'Cinzel', serif;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
        font-size: 0.92rem;
        letter-spacing: 0.04em;
        color: var(--wow-fg);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wow-faq__q::-webkit-details-marker { display: none; }
    .wow-faq__q::after {
        content: '+';
        color: var(--wow-acc);
        font-size: 1.4rem;
        line-height: 1;
        transition: transform .2s ease;
    }
    .wow-faq__item[open] .wow-faq__q::after { transform: rotate(45deg); }
    .wow-faq__a {
        padding: 0 18px 16px;
        color: var(--wow-fg-mut);
        line-height: 1.7;
        font-size: 0.96rem;
    }

    /* RELATED — banner-style on dark */
    body.pk-page--wow .pk-related {
        max-width: 880px;
        margin: 64px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--wow .pk-related h2 {
        font-family: 'Cinzel', serif;
        font-size: clamp(1.4rem, 3vw, 1.95rem);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--wow-acc);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(var(--wow-acc-rgb), 0.34);
    }
    body.pk-page--wow .pk-related .pk-calc-related a {
        background: rgba(var(--wow-acc-rgb), 0.04);
        border: 1px solid rgba(var(--wow-acc-rgb), 0.34);
        border-radius: 3px;
        color: var(--wow-fg);
        font-family: 'Cinzel', serif;
        font-weight: 700;
        letter-spacing: 0.04em;
        font-size: 0.85rem;
        text-transform: uppercase;
    }
    body.pk-page--wow .pk-related .pk-calc-related a:hover {
        background: rgba(var(--wow-acc-rgb), 0.16);
        border-color: var(--wow-acc);
        color: var(--wow-acc-hi);
        transform: translateY(-1px);
    }
    body.pk-page--wow .pk-related .pk-calc-related a i { color: var(--wow-acc); }