/* ===========================================================
       Theme: Warrior Cat Name — forest greens, moss, paw-prints
       Activated by body.pk-page--wcn
       Original execution; no Erin Hunter / Warriors trademarks.
       =========================================================== */
    body.pk-page--wcn {
        --wcn-deep:      #1a2f1a;
        --wcn-forest:    #2d4a2b;
        --wcn-moss:      #5a7a4a;
        --wcn-leaf:      #88a85f;
        --wcn-bark:      #4a3a24;
        --wcn-bark-2:    #6b5638;
        --wcn-cream:     #efe7d3;
        --wcn-cream-2:   #d6cdb5;
        --wcn-amber:     #c8a55a;
        --wcn-claw:      #c9bfa8;
        --wcn-fg:        #efe7d3;
        --wcn-fg-mut:    #b8b09a;
        --wcn-fg-dim:    #847a64;

        background:
            radial-gradient(ellipse at 20% 10%, rgba(136,168,95,0.10) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 80%, rgba(45,74,43,0.55) 0%, transparent 60%),
            linear-gradient(180deg, var(--wcn-deep) 0%, #0e1a0e 100%);
        background-attachment: fixed;
        color: var(--wcn-fg);
        font-family: 'Lora', 'Georgia', serif;
        min-height: 100vh;
        position: relative;
    }

    /* Moss/paw texture overlay */
    body.pk-page--wcn::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image:
            radial-gradient(2px 3px at 12% 22%, rgba(136,168,95,0.20) 99%, transparent 100%),
            radial-gradient(2px 2px at 33% 51%, rgba(90,122,74,0.18) 99%, transparent 100%),
            radial-gradient(3px 2px at 67% 19%, rgba(136,168,95,0.16) 99%, transparent 100%),
            radial-gradient(2px 3px at 82% 73%, rgba(90,122,74,0.20) 99%, transparent 100%),
            radial-gradient(2px 2px at 49% 84%, rgba(136,168,95,0.18) 99%, transparent 100%),
            radial-gradient(3px 2px at 8% 64%, rgba(90,122,74,0.15) 99%, transparent 100%);
        opacity: 0.85;
    }

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

    body.pk-page--wcn .pk-nav {
        background: rgba(14,26,14,0.92) !important;
        border-bottom: 1px solid rgba(136,168,95,0.22) !important;
    }
    body.pk-page--wcn .pk-nav__links a { color: var(--wcn-fg) !important; }
    body.pk-page--wcn .pk-nav__links a:hover { color: var(--wcn-leaf) !important; }
    body.pk-page--wcn .pk-nav__lang a.is-active {
        background: var(--wcn-moss) !important;
        color: var(--wcn-deep) !important;
    }

    /* HERO */
    .wcn-hero {
        text-align: center;
        padding: 60px 24px 24px;
        max-width: 980px;
        margin: 0 auto;
    }
    .wcn-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: 'Caveat', cursive;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.10em;
        color: var(--wcn-leaf);
        padding: 6px 18px;
        border: 1px solid rgba(136,168,95,0.40);
        background: rgba(136,168,95,0.06);
        border-radius: 999px;
    }
    .wcn-hero__h1 {
        font-family: 'Caveat', cursive;
        font-weight: 700;
        font-size: clamp(2.6rem, 7vw, 5rem);
        letter-spacing: 0.01em;
        margin: 22px 0 16px;
        color: var(--wcn-cream);
        text-shadow:
            1px 1px 0 var(--wcn-bark),
            2px 2px 0 var(--wcn-deep),
            0 0 32px rgba(136,168,95,0.25);
        /* Slightly scratched look via outline */
    }
    .wcn-hero__sub {
        max-width: 720px;
        margin: 0 auto;
        font-size: clamp(1rem, 1.4vw, 1.13rem);
        line-height: 1.7;
        color: var(--wcn-fg-mut);
    }
    .wcn-hero__sub strong { color: var(--wcn-leaf); font-weight: 600; }

    .wcn-divider {
        margin: 22px auto 0;
        display: flex;
        gap: 14px;
        justify-content: center;
        font-size: 1.2rem;
        opacity: 0.7;
    }
    .wcn-divider__paw {
        display: inline-block;
        transform: rotate(-12deg);
    }
    .wcn-divider__paw:nth-child(2) { transform: rotate(8deg) translateY(4px); }
    .wcn-divider__paw:nth-child(3) { transform: rotate(-4deg) translateY(-2px); }

    /* FORM PANEL */
    .wcn-panel {
        max-width: 760px;
        margin: 36px auto 0;
        padding: 30px 26px;
        background:
            linear-gradient(180deg, rgba(45,74,43,0.40), rgba(26,47,26,0.55));
        border: 1px solid rgba(136,168,95,0.30);
        border-radius: 14px;
        box-shadow: 0 10px 30px -16px rgba(0,0,0,0.55);
    }
    .wcn-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
    }
    @media (max-width: 640px) { .wcn-form { grid-template-columns: 1fr; } }
    .wcn-field { display: flex; flex-direction: column; gap: 6px; }
    .wcn-field label {
        font-family: 'Caveat', cursive;
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--wcn-leaf);
    }
    .wcn-field select {
        appearance: none;
        background: rgba(14,26,14,0.7);
        border: 1px solid rgba(136,168,95,0.30);
        border-radius: 8px;
        color: var(--wcn-fg);
        padding: 11px 32px 11px 14px;
        font-family: 'Lora', serif;
        font-size: 1rem;
        cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2388a85f' d='M6 8L0 0h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 10px;
    }
    .wcn-field select:focus {
        outline: none;
        border-color: var(--wcn-leaf);
        box-shadow: 0 0 0 3px rgba(136,168,95,0.20);
    }
    /* Lock dropdown options to the forest palette so the OS doesn't render
       them light-on-light when the user's system theme is light. */
    .wcn-field select option {
        background: var(--wcn-deep);
        color: var(--wcn-fg);
    }

    .wcn-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
    }
    .wcn-btn {
        appearance: none;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--wcn-fg);
        padding: 12px 22px;
        background: rgba(136,168,95,0.06);
        border: 1px solid rgba(136,168,95,0.32);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }
    .wcn-btn:hover {
        background: rgba(136,168,95,0.14);
        border-color: var(--wcn-leaf);
        color: var(--wcn-cream);
        transform: translateY(-1px);
    }
    .wcn-btn--primary {
        background: linear-gradient(180deg, var(--wcn-moss) 0%, var(--wcn-forest) 100%);
        color: var(--wcn-cream) !important;
        border-color: var(--wcn-leaf);
        box-shadow: 0 0 30px -8px rgba(136,168,95,0.40);
    }
    .wcn-btn--primary:hover {
        background: linear-gradient(180deg, var(--wcn-leaf) 0%, var(--wcn-moss) 100%);
        color: var(--wcn-deep) !important;
    }
    .wcn-btn.is-success {
        background: rgba(136,168,95,0.20) !important;
        border-color: var(--wcn-leaf) !important;
        color: var(--wcn-leaf) !important;
    }

    /* RESULT CARD */
    .wcn-card {
        max-width: 760px;
        margin: 28px auto 0;
        padding: 32px 30px;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(136,168,95,0.10) 0%, transparent 60%),
            rgba(14,26,14,0.78);
        border: 1px solid rgba(136,168,95,0.28);
        border-radius: 14px;
        box-shadow: 0 12px 40px -18px rgba(0,0,0,0.65);
        text-align: center;
    }
    .wcn-card.is-empty {
        font-style: italic;
        color: var(--wcn-fg-dim);
        padding: 56px 30px;
    }
    .wcn-card__crest {
        font-size: 3.4rem;
        line-height: 1;
        margin-bottom: 8px;
        filter: drop-shadow(0 4px 14px rgba(136,168,95,0.35));
    }
    .wcn-card__name {
        font-family: 'Caveat', cursive;
        font-weight: 700;
        font-size: clamp(2rem, 6vw, 3.4rem);
        margin: 0;
        color: var(--wcn-cream);
        letter-spacing: 0.01em;
        text-shadow: 1px 1px 0 var(--wcn-bark);
    }
    .wcn-card__sub {
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--wcn-leaf);
        margin: 6px 0 0;
    }
    .wcn-card__divider {
        margin: 18px auto;
        font-size: 1rem;
        letter-spacing: 0.4em;
        color: var(--wcn-claw);
        opacity: 0.55;
    }
    .wcn-card__omen {
        font-family: 'Lora', serif;
        font-size: 1rem;
        line-height: 1.7;
        color: var(--wcn-fg-mut);
        margin: 0 0 14px;
    }
    .wcn-card__omen b { color: var(--wcn-leaf); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; }
    .wcn-card__omen em { font-style: italic; color: var(--wcn-cream); }
    .wcn-card__bio {
        font-family: 'Lora', serif;
        font-size: 1.02rem;
        line-height: 1.75;
        color: var(--wcn-fg);
        margin: 0;
    }

    /* SECTIONS */
    .wcn-section {
        max-width: 880px;
        margin: 64px auto 0;
        padding: 0 24px;
    }
    .wcn-section__title {
        font-family: 'Caveat', cursive;
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        font-weight: 700;
        color: var(--wcn-leaf);
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px dashed rgba(136,168,95,0.30);
    }
    .wcn-section__body {
        font-size: 1.02rem;
        line-height: 1.78;
        color: var(--wcn-fg-mut);
    }
    .wcn-section__body strong { color: var(--wcn-leaf); font-weight: 600; }

    /* FAQ */
    .wcn-faq { display: grid; gap: 8px; }
    .wcn-faq__item {
        background: rgba(14,26,14,0.55);
        border: 1px solid rgba(136,168,95,0.22);
        border-radius: 10px;
    }
    .wcn-faq__q {
        padding: 14px 18px;
        font-family: 'Lora', serif;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        font-size: 1rem;
        color: var(--wcn-cream);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wcn-faq__q::-webkit-details-marker { display: none; }
    .wcn-faq__q::after {
        content: '🐾';
        color: var(--wcn-leaf);
        font-size: 0.95rem;
        line-height: 1;
        transition: transform .2s ease;
    }
    .wcn-faq__item[open] .wcn-faq__q::after { transform: rotate(45deg); }
    .wcn-faq__a {
        padding: 0 18px 16px;
        color: var(--wcn-fg-mut);
        line-height: 1.7;
        font-size: 0.96rem;
    }

    /* RELATED — green forest palette */
    body.pk-page--wcn .pk-related {
        max-width: 880px;
        margin: 64px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--wcn .pk-related h2 {
        font-family: 'Caveat', cursive;
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        color: var(--wcn-leaf);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px dashed rgba(136,168,95,0.30);
    }
    body.pk-page--wcn .pk-related .pk-calc-related a {
        background: rgba(136,168,95,0.06);
        border: 1px solid rgba(136,168,95,0.30);
        border-radius: 10px;
        color: var(--wcn-fg);
        font-family: 'Lora', serif;
        font-weight: 600;
    }
    body.pk-page--wcn .pk-related .pk-calc-related a:hover {
        background: rgba(136,168,95,0.16);
        border-color: var(--wcn-leaf);
        color: var(--wcn-cream);
        transform: translateY(-1px);
    }
    body.pk-page--wcn .pk-related .pk-calc-related a i { color: var(--wcn-leaf); }