/* ===========================================================
       Theme: Pokemon Nickname — type-color palette switcher
       Activated by body.pk-page--pkm
       Body class .pkm-type-{type} switches the accent CSS variables.
       Original execution; no Nintendo / Game Freak / Creatures assets.

       Site-wide rule: PKSystems is a dark site. The pokemon hotsite stays
       on the canonical dark base (var(--pk-bg, #0a0a14)); type colors are
       used as ACCENTS only — chip fills, glows, button highlights, borders.
       =========================================================== */
    body.pk-page--pkm {
        /* Canonical dark page tokens (fallbacks match brand-styles defaults) */
        --pkm-bg:        var(--pk-bg, #0a0a14);
        --pkm-bg-elev:   var(--pk-bg-elev, #131322);
        --pkm-bg-card:   rgba(255,255,255,0.04);
        --pkm-fg:        var(--pk-fg, #e8edfb);
        --pkm-fg-mut:    var(--pk-fg-mut, #aab2cc);
        --pkm-fg-dim:    rgba(232,237,251,0.55);
        --pkm-border:    rgba(255,255,255,0.10);

        /* Accent — defaults to "normal" until a type is chosen */
        --pkm-acc:       #a8a878;
        --pkm-acc-hi:    #c6c68a;
        --pkm-acc-lo:    #6d6d4e;
        --pkm-acc-rgb:   168, 168, 120;
        /* Foreground used on top of solid --pkm-acc fills (CTAs, copied cards).
           Most types are saturated mid-tones where white reads best; pale
           types (electric, ice, steel, fairy, ground, rock, bug, normal)
           override below to dark ink so contrast stays AA. */
        --pkm-acc-fg:    #fff;

        background: var(--pkm-bg);
        color: var(--pkm-fg);
        font-family: 'Nunito', system-ui, sans-serif;
        min-height: 100vh;
        position: relative;
        transition: background .4s ease;
    }

    /* ============= Type palettes — official-canon-aesthetic colors ============= */
    body.pk-page--pkm.pkm-type-fire     { --pkm-acc: #f08030; --pkm-acc-hi: #f7a865; --pkm-acc-lo: #98401c; --pkm-acc-rgb: 240,128,48; }
    body.pk-page--pkm.pkm-type-water    { --pkm-acc: #6890f0; --pkm-acc-hi: #8eb1f7; --pkm-acc-lo: #2e5fbf; --pkm-acc-rgb: 104,144,240; }
    body.pk-page--pkm.pkm-type-grass    { --pkm-acc: #78c850; --pkm-acc-hi: #9fdb7a; --pkm-acc-lo: #3f7626; --pkm-acc-rgb: 120,200,80; }
    body.pk-page--pkm.pkm-type-electric { --pkm-acc: #f8d030; --pkm-acc-hi: #fbe066; --pkm-acc-lo: #b39200; --pkm-acc-rgb: 248,208,48; }
    body.pk-page--pkm.pkm-type-psychic  { --pkm-acc: #f85888; --pkm-acc-hi: #fa83a7; --pkm-acc-lo: #b32c5c; --pkm-acc-rgb: 248,88,136; }
    body.pk-page--pkm.pkm-type-dark     { --pkm-acc: #a08372; --pkm-acc-hi: #c2a896; --pkm-acc-lo: #705848; --pkm-acc-rgb: 160,131,114; }
    body.pk-page--pkm.pkm-type-dragon   { --pkm-acc: #9a6cfa; --pkm-acc-hi: #b89cfb; --pkm-acc-lo: #5a28d8; --pkm-acc-rgb: 154,108,250; }
    body.pk-page--pkm.pkm-type-ghost    { --pkm-acc: #9a83b8; --pkm-acc-hi: #b8a5d0; --pkm-acc-lo: #6a5292; --pkm-acc-rgb: 154,131,184; }
    body.pk-page--pkm.pkm-type-ice      { --pkm-acc: #98d8d8; --pkm-acc-hi: #c2eaea; --pkm-acc-lo: #4a8e8e; --pkm-acc-rgb: 152,216,216; }
    body.pk-page--pkm.pkm-type-fighting { --pkm-acc: #de5a52; --pkm-acc-hi: #ed837c; --pkm-acc-lo: #9a2620; --pkm-acc-rgb: 222,90,82; }
    body.pk-page--pkm.pkm-type-steel    { --pkm-acc: #b8b8d0; --pkm-acc-hi: #d4d4e6; --pkm-acc-lo: #71718a; --pkm-acc-rgb: 184,184,208; }
    body.pk-page--pkm.pkm-type-fairy    { --pkm-acc: #ee99ac; --pkm-acc-hi: #f5bcca; --pkm-acc-lo: #b35d72; --pkm-acc-rgb: 238,153,172; }
    body.pk-page--pkm.pkm-type-bug      { --pkm-acc: #c6d549; --pkm-acc-hi: #dde66e; --pkm-acc-lo: #7a8717; --pkm-acc-rgb: 198,213,73; }
    body.pk-page--pkm.pkm-type-flying   { --pkm-acc: #a890f0; --pkm-acc-hi: #c5b3f7; --pkm-acc-lo: #6a55b8; --pkm-acc-rgb: 168,144,240; }
    body.pk-page--pkm.pkm-type-rock     { --pkm-acc: #d4be63; --pkm-acc-hi: #e6d589; --pkm-acc-lo: #88712a; --pkm-acc-rgb: 212,190,99; }
    body.pk-page--pkm.pkm-type-ground   { --pkm-acc: #e0c068; --pkm-acc-hi: #ecd58e; --pkm-acc-lo: #a07e2b; --pkm-acc-rgb: 224,192,104; }
    body.pk-page--pkm.pkm-type-poison   { --pkm-acc: #c062c0; --pkm-acc-hi: #d68fd6; --pkm-acc-lo: #7a2a7a; --pkm-acc-rgb: 192,98,192; }
    body.pk-page--pkm.pkm-type-normal   { --pkm-acc: #c6c68a; --pkm-acc-hi: #dcdca8; --pkm-acc-lo: #6d6d4e; --pkm-acc-rgb: 198,198,138; }

    /* Pale type accents need dark ink on the solid-fill (button/copied-card).
       Saturated types (fire/water/grass/psychic/dragon/ghost/fighting/poison/
       flying/dark) keep the default white --pkm-acc-fg so contrast stays AA. */
    body.pk-page--pkm.pkm-type-electric { --pkm-acc-fg: #2a2200; }
    body.pk-page--pkm.pkm-type-ice      { --pkm-acc-fg: #0e2a2a; }
    body.pk-page--pkm.pkm-type-steel    { --pkm-acc-fg: #15192a; }
    body.pk-page--pkm.pkm-type-fairy    { --pkm-acc-fg: #3a121f; }
    body.pk-page--pkm.pkm-type-ground   { --pkm-acc-fg: #2c1f08; }
    body.pk-page--pkm.pkm-type-rock     { --pkm-acc-fg: #261d05; }
    body.pk-page--pkm.pkm-type-bug      { --pkm-acc-fg: #1f2305; }
    body.pk-page--pkm.pkm-type-normal   { --pkm-acc-fg: #1c2237; }

    /* Page tints with the type accent — soft glow on the dark base. */
    body.pk-page--pkm::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(900px 640px at 50% -10%, rgba(var(--pkm-acc-rgb), 0.18), transparent 70%),
            radial-gradient(700px 540px at 100% 110%, rgba(var(--pkm-acc-rgb), 0.10), transparent 65%);
        transition: background .5s ease;
    }

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

    /* Navbar inherits the global dark style. We only tint the bottom border
       with the active type accent so the chrome breathes a little. */
    body.pk-page--pkm .pk-nav {
        border-bottom: 1px solid rgba(var(--pkm-acc-rgb), 0.30) !important;
    }

    /* HERO */
    .pkm-hero {
        text-align: center;
        padding: 56px 24px 24px;
        max-width: 980px;
        margin: 0 auto;
    }
    .pkm-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: 'Fredoka', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--pkm-acc-hi);
        padding: 7px 16px;
        border-radius: 999px;
        background: rgba(var(--pkm-acc-rgb), 0.16);
        border: 1px solid rgba(var(--pkm-acc-rgb), 0.32);
        transition: all .4s ease;
    }
    .pkm-hero__h1 {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: clamp(2.2rem, 6vw, 4rem);
        letter-spacing: -0.01em;
        margin: 22px 0 16px;
        color: var(--pkm-fg);
        line-height: 1.05;
    }
    .pkm-hero__sub {
        max-width: 680px;
        margin: 0 auto;
        font-size: clamp(1rem, 1.4vw, 1.13rem);
        line-height: 1.7;
        color: var(--pkm-fg-mut);
    }
    .pkm-hero__sub strong { color: var(--pkm-acc-hi); font-weight: 800; }

    /* TYPE CHIPS */
    .pkm-types {
        max-width: 980px;
        margin: 28px auto 0;
        padding: 0 16px;
    }
    .pkm-types__label {
        font-family: 'Fredoka', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: var(--pkm-fg-mut);
        text-align: center;
        margin: 0 0 12px;
    }
    .pkm-types__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .pkm-type-chip {
        appearance: none;
        cursor: pointer;
        background: var(--chip-bg, #ddd);
        color: #fff;
        border: 2px solid transparent;
        padding: 10px 18px;
        border-radius: 999px;
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.86rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: transform .15s, box-shadow .15s, border-color .15s;
        text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    }
    .pkm-type-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -6px rgba(0,0,0,0.55);
    }
    .pkm-type-chip.is-active {
        border-color: rgba(255,255,255,0.55);
        box-shadow: 0 0 0 2px rgba(0,0,0,0.45),
                    0 8px 24px -4px rgba(var(--pkm-acc-rgb), 0.55);
        transform: translateY(-2px);
    }

    /* type-color chip backgrounds. Pale types use dark ink for AA contrast. */
    .pkm-type-chip[data-type="fire"]     { background: #f08030; }
    .pkm-type-chip[data-type="water"]    { background: #6890f0; }
    .pkm-type-chip[data-type="grass"]    { background: #78c850; }
    .pkm-type-chip[data-type="electric"] { background: #f8d030; color: #2a2200; text-shadow: none; }
    .pkm-type-chip[data-type="psychic"]  { background: #f85888; }
    .pkm-type-chip[data-type="dark"]     { background: #705848; }
    .pkm-type-chip[data-type="dragon"]   { background: #7038f8; }
    .pkm-type-chip[data-type="ghost"]    { background: #705898; }
    .pkm-type-chip[data-type="ice"]      { background: #98d8d8; color: #0e2a2a; text-shadow: none; }
    .pkm-type-chip[data-type="fighting"] { background: #c03028; }
    .pkm-type-chip[data-type="steel"]    { background: #b8b8d0; color: #15192a; text-shadow: none; }
    .pkm-type-chip[data-type="fairy"]    { background: #ee99ac; color: #3a121f; text-shadow: none; }
    .pkm-type-chip[data-type="bug"]      { background: #a8b820; color: #1f2305; text-shadow: none; }
    .pkm-type-chip[data-type="flying"]   { background: #a890f0; }
    .pkm-type-chip[data-type="rock"]     { background: #b8a038; color: #261d05; text-shadow: none; }
    .pkm-type-chip[data-type="ground"]   { background: #e0c068; color: #2c1f08; text-shadow: none; }
    .pkm-type-chip[data-type="poison"]   { background: #a040a0; }
    .pkm-type-chip[data-type="normal"]   { background: #a8a878; color: #1c2237; text-shadow: none; }

    /* ACTIONS */
    .pkm-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 24px;
    }
    .pkm-btn {
        appearance: none;
        cursor: pointer;
        font-family: 'Fredoka', sans-serif;
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--pkm-fg);
        padding: 12px 22px;
        background: rgba(255,255,255,0.04);
        border: 2px solid rgba(var(--pkm-acc-rgb), 0.55);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all .15s ease;
    }
    .pkm-btn:hover {
        background: rgba(var(--pkm-acc-rgb), 0.14);
        border-color: var(--pkm-acc-hi);
        color: var(--pkm-acc-hi);
    }
    .pkm-btn--primary {
        background: var(--pkm-acc);
        color: var(--pkm-acc-fg) !important;
        border-color: var(--pkm-acc);
        box-shadow: 0 8px 26px -8px rgba(var(--pkm-acc-rgb), 0.65);
    }
    .pkm-btn--primary:hover {
        /* Brighter --pkm-acc-hi on hover. --pkm-acc-fg already encodes the
           per-type readable foreground (dark ink for pale types, white for
           saturated types), so this stays AA across all 18 palettes. */
        background: var(--pkm-acc-hi);
        border-color: var(--pkm-acc-hi);
        color: var(--pkm-acc-fg) !important;
    }

    /* RESULT GRID — six cards */
    .pkm-result {
        max-width: 880px;
        margin: 28px auto 0;
        padding: 0 16px;
    }
    .pkm-result__hint {
        font-family: 'Fredoka', sans-serif;
        font-size: 0.88rem;
        text-align: center;
        color: var(--pkm-fg-mut);
        margin: 0 0 14px;
    }
    .pkm-result__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    .pkm-name-card {
        appearance: none;
        cursor: pointer;
        background: var(--pkm-bg-card);
        border: 2px solid rgba(var(--pkm-acc-rgb), 0.55);
        border-radius: 16px;
        padding: 22px 14px;
        text-align: center;
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: 0.02em;
        color: var(--pkm-fg);
        box-shadow: 0 4px 18px -8px rgba(var(--pkm-acc-rgb), 0.45);
        transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
        position: relative;
        overflow: hidden;
    }
    .pkm-name-card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 30%;
        background: linear-gradient(180deg, rgba(var(--pkm-acc-rgb), 0.18), transparent);
        pointer-events: none;
    }
    .pkm-name-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px -10px rgba(var(--pkm-acc-rgb), 0.65);
        background: rgba(var(--pkm-acc-rgb), 0.10);
        border-color: var(--pkm-acc);
    }
    .pkm-name-card.is-copied {
        background: var(--pkm-acc) !important;
        color: var(--pkm-acc-fg) !important;
        border-color: var(--pkm-acc) !important;
    }
    .pkm-name-card.is-copied::after {
        content: '✓';
        position: absolute;
        top: 8px; right: 12px;
        font-size: 1rem;
        color: var(--pkm-acc-fg);
    }
    .pkm-name-card__len {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        color: var(--pkm-fg-dim);
        text-transform: uppercase;
        margin-top: 6px;
    }
    /* Match copied-card text color regardless of palette; opacity works for
       both white and dark ink. */
    .pkm-name-card.is-copied .pkm-name-card__len { color: var(--pkm-acc-fg); opacity: 0.78; }

    .pkm-result.is-empty {
        text-align: center;
        font-family: 'Fredoka', sans-serif;
        color: var(--pkm-fg-dim);
        font-style: italic;
        padding: 40px 20px;
    }

    /* SECTIONS */
    .pkm-section {
        max-width: 840px;
        margin: 56px auto 0;
        padding: 0 24px;
    }
    .pkm-section__title {
        font-family: 'Fredoka', sans-serif;
        font-size: clamp(1.4rem, 3vw, 1.95rem);
        font-weight: 700;
        letter-spacing: -0.005em;
        color: var(--pkm-fg);
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(var(--pkm-acc-rgb), 0.50);
        transition: border-color .4s ease;
    }
    .pkm-section__body {
        font-size: 1.02rem;
        line-height: 1.78;
        color: var(--pkm-fg-mut);
    }
    .pkm-section__body strong { color: var(--pkm-acc-hi); font-weight: 800; }
    .pkm-section__body em { color: var(--pkm-acc); font-style: italic; font-weight: 700; }
    .pkm-section__body ul { padding-left: 1.4em; }
    .pkm-section__body li { margin: 6px 0; }

    /* FAQ */
    .pkm-faq { display: grid; gap: 8px; }
    .pkm-faq__item {
        background: var(--pkm-bg-card);
        border: 1px solid rgba(var(--pkm-acc-rgb), 0.30);
        border-radius: 12px;
        transition: border-color .4s ease, background .4s ease;
    }
    .pkm-faq__item[open] {
        border-color: rgba(var(--pkm-acc-rgb), 0.55);
        background: rgba(var(--pkm-acc-rgb), 0.06);
    }
    .pkm-faq__q {
        padding: 14px 18px;
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
        font-size: 0.96rem;
        color: var(--pkm-fg);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pkm-faq__q::-webkit-details-marker { display: none; }
    .pkm-faq__q::after {
        content: '+';
        color: var(--pkm-acc-hi);
        font-size: 1.4rem;
        line-height: 1;
        transition: transform .2s ease;
    }
    .pkm-faq__item[open] .pkm-faq__q::after { transform: rotate(45deg); }
    .pkm-faq__a {
        padding: 0 18px 16px;
        color: var(--pkm-fg-mut);
        line-height: 1.7;
        font-size: 0.96rem;
    }

    /* RELATED */
    body.pk-page--pkm .pk-related {
        max-width: 880px;
        margin: 56px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--pkm .pk-related h2 {
        font-family: 'Fredoka', sans-serif;
        font-size: clamp(1.4rem, 3vw, 1.95rem);
        color: var(--pkm-fg);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(var(--pkm-acc-rgb), 0.50);
        transition: border-color .4s ease;
    }
    body.pk-page--pkm .pk-related .pk-calc-related a {
        background: var(--pkm-bg-card);
        border: 2px solid rgba(var(--pkm-acc-rgb), 0.40);
        border-radius: 999px;
        color: var(--pkm-fg);
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.86rem;
    }
    body.pk-page--pkm .pk-related .pk-calc-related a:hover {
        background: rgba(var(--pkm-acc-rgb), 0.12);
        border-color: var(--pkm-acc);
        color: var(--pkm-acc-hi);
        transform: translateY(-1px);
    }
    body.pk-page--pkm .pk-related .pk-calc-related a i { color: var(--pkm-acc-hi); }

    /* Dark-mode-friendly fallback for ad slot panel */
    body.pk-page--pkm .pk-panel--ad { background: transparent; }