/* Zomblers Roadmap art direction — scoped so it cannot affect other pages. */
body.zomblers-roadmap-page {
    --zr-neon: #a0f912;
    --zr-pink: #ff2571;
    --zr-ink: #03070c;
    --zr-panel: #071017;
    --zr-line: rgba(160, 249, 18, .2);
    background: var(--zr-ink);
}

body.zomblers-roadmap-page .zr-native-hero-host {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #050a10;
}

body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone {
    position: relative;
    min-height: clamp(500px, 62vh, 650px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(3, 7, 12, .98) 0%, rgba(3, 7, 12, .9) 37%, rgba(3, 7, 12, .28) 74%, rgba(3, 7, 12, .2) 100%),
        linear-gradient(0deg, rgba(3, 7, 12, .86), transparent 45%),
        url('roadmap-graffiti-hero.png') center right / cover no-repeat;
    border-bottom: 1px solid rgba(160, 249, 18, .26);
}

body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 139px, rgba(255, 255, 255, .025) 140px),
        linear-gradient(105deg, transparent 0 64%, rgba(255, 37, 113, .14) 64.1% 64.35%, transparent 64.5%);
    mix-blend-mode: screen;
}

body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone::after {
    content: "ROADMAP / THE LONG GAME";
    position: absolute;
    right: clamp(22px, 5vw, 78px);
    top: 70px;
    color: rgba(255, 255, 255, .5);
    font: 800 10px/1.2 var(--wp--preset--font-family--body, sans-serif);
    letter-spacing: .28em;
    writing-mode: vertical-rl;
    text-transform: uppercase;
}

body.zomblers-roadmap-page .zch-teams-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 64px, 1320px);
    margin-inline: auto;
    min-height: inherit;
    padding-block: clamp(56px, 8vh, 78px) clamp(44px, 6vh, 62px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    align-items: end;
    gap: clamp(40px, 7vw, 110px);
}

body.zomblers-roadmap-page .zch-teams-hero__copy {
    max-width: 780px;
}

@media (min-width: 981px) {
    body.zomblers-roadmap-page .zch-teams-hero__copy {
        transform: translateY(-36px);
    }
}

body.zomblers-roadmap-page .zch-teams-hero__copy .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--zr-neon);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
}

body.zomblers-roadmap-page .zch-teams-hero__copy .eyebrow::before {
    content: "";
    width: 34px;
    height: 3px;
    background: var(--zr-pink);
    transform: skewX(-25deg);
    box-shadow: 8px 0 0 rgba(255, 37, 113, .3);
}

body.zomblers-roadmap-page .zch-teams-hero__copy h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(82px, 9.6vw, 164px);
    line-height: .74;
    letter-spacing: -.075em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 15px 50px rgba(0, 0, 0, .55);
    filter: drop-shadow(6px 6px 0 rgba(255, 37, 113, .08));
}

body.zomblers-roadmap-page .zch-teams-hero__copy > p:last-child {
    max-width: 680px;
    margin: clamp(36px, 4vw, 54px) 0 0;
    color: rgba(226, 235, 245, .75);
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.7;
    font-weight: 650;
}

body.zomblers-roadmap-page .zch-teams-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-self: end;
    background: rgba(2, 7, 12, .66);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(16px);
}

body.zomblers-roadmap-page .zch-teams-stats::before {
    content: "";
    position: absolute;
    left: -1px;
    right: 36%;
    top: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--zr-neon), var(--zr-pink));
}

body.zomblers-roadmap-page .zch-teams-stats > div {
    min-width: 0;
    padding: clamp(24px, 3vw, 36px) clamp(14px, 2vw, 24px);
    border-right: 1px solid rgba(255, 255, 255, .12);
}

body.zomblers-roadmap-page .zch-teams-stats > div:last-child { border-right: 0; }

body.zomblers-roadmap-page .zch-teams-stats strong {
    color: var(--zr-neon);
    font-size: clamp(44px, 4vw, 64px);
    line-height: .9;
    letter-spacing: -.06em;
    text-shadow: 0 0 24px rgba(160, 249, 18, .18);
}

body.zomblers-roadmap-page .zch-teams-stats span {
    margin-top: 12px;
    color: rgba(222, 232, 240, .6);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.zomblers-roadmap-page .zr-page {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 12%, rgba(160, 249, 18, .05), transparent 25%),
        radial-gradient(circle at 92% 46%, rgba(255, 37, 113, .055), transparent 28%),
        #03070c;
}

body.zomblers-roadmap-page .zr-section {
    position: relative;
}

body.zomblers-roadmap-page .zr-section-line::before {
    opacity: .75;
}

body.zomblers-roadmap-page .zr-intro-section::after,
body.zomblers-roadmap-page .zr-build-section::after,
body.zomblers-roadmap-page .zr-roadmap-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: clamp(180px, 24vw, 360px);
    aspect-ratio: 2.8 / 1;
    opacity: .22;
    background:
        linear-gradient(168deg, transparent 0 42%, var(--zr-pink) 43% 47%, transparent 48%),
        linear-gradient(173deg, transparent 0 57%, var(--zr-neon) 58% 61%, transparent 62%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 9px);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    transform: rotate(-8deg);
}

body.zomblers-roadmap-page .zr-intro-section::after { right: -35px; top: 28px; }
body.zomblers-roadmap-page .zr-build-section::after { left: -45px; top: 210px; transform: rotate(8deg); }
body.zomblers-roadmap-page .zr-roadmap-section::after { right: -60px; top: 150px; }

body.zomblers-roadmap-page .zr-section-head h2,
body.zomblers-roadmap-page .zr-cta-copy h2 {
    text-wrap: balance;
    text-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

body.zomblers-roadmap-page .zr-crest-stage {
    background:
        linear-gradient(145deg, rgba(12, 23, 29, .95), rgba(3, 8, 13, .92)),
        repeating-linear-gradient(135deg, transparent 0 20px, rgba(255,255,255,.025) 20px 21px);
    border-color: rgba(160, 249, 18, .28);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .42), inset 0 0 70px rgba(160, 249, 18, .035);
}

body.zomblers-roadmap-page .zr-manifesto {
    box-shadow: 0 30px 80px rgba(0, 0, 0, .33);
}

body.zomblers-roadmap-page .zr-focus-card {
    --zr-card-accent: var(--zr-neon);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, rgba(10, 19, 25, .98), rgba(4, 9, 14, .98));
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .22);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

body.zomblers-roadmap-page .zr-focus-card-community,
body.zomblers-roadmap-page .zr-focus-card-brand,
body.zomblers-roadmap-page .zr-focus-card-experience {
    --zr-card-accent: var(--zr-pink);
}

body.zomblers-roadmap-page .zr-focus-card::before {
    content: "Horde approved-ish";
    position: absolute;
    z-index: 3;
    top: 18px;
    right: -7px;
    max-width: 175px;
    padding: 8px 14px 7px;
    color: #020608;
    background: var(--zr-card-accent);
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .34);
    font: 900 9px/1.15 "IBM Plex Mono", Consolas, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(2deg);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

body.zomblers-roadmap-page .zr-focus-card-competition::before { content: "Overtime builds character"; }
body.zomblers-roadmap-page .zr-focus-card-community::before { content: "Lurkers still count"; }
body.zomblers-roadmap-page .zr-focus-card-content::before { content: "Clip it or it didn't happen"; }
body.zomblers-roadmap-page .zr-focus-card-brand::before { content: "Yes, the hoodie matters"; }
body.zomblers-roadmap-page .zr-focus-card-development::before { content: "Future menaces welcome"; }
body.zomblers-roadmap-page .zr-focus-card-experience::before { content: "Pack the good mouse"; }

body.zomblers-roadmap-page .zr-focus-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -54% 30%;
    height: 70%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(160, 249, 18, .08), transparent 68%);
    transform: rotate(-8deg);
}

body.zomblers-roadmap-page .zr-focus-card:nth-child(even)::after {
    background: radial-gradient(ellipse, rgba(255, 37, 113, .09), transparent 68%);
}

body.zomblers-roadmap-page .zr-focus-art img {
    filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .35));
    transition: transform .35s ease, filter .35s ease;
}

@media (hover: hover) {
    body.zomblers-roadmap-page .zr-focus-card:hover {
        transform: translateY(-7px);
        border-color: rgba(160, 249, 18, .38);
        box-shadow: 0 34px 76px rgba(0, 0, 0, .36), 0 0 0 1px rgba(160, 249, 18, .08);
    }

    body.zomblers-roadmap-page .zr-focus-card:hover .zr-focus-art img {
        transform: scale(1.045) rotate(-1deg);
        filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .42)) saturate(1.12);
    }
}

body.zomblers-roadmap-page .zr-stage {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(125deg, rgba(11, 21, 28, .98), rgba(4, 9, 14, .98));
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 28px 68px rgba(0, 0, 0, .24);
}

body.zomblers-roadmap-page .zr-stage::after {
    position: absolute;
    top: 18px;
    right: 20px;
    padding: 6px 9px;
    color: rgba(226, 235, 245, .62);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(2, 7, 12, .72);
    font: 800 8px/1.2 "IBM Plex Mono", Consolas, monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    transform: rotate(1deg);
}

body.zomblers-roadmap-page .zr-stage-current::after { content: "Patch notes: ongoing"; }
body.zomblers-roadmap-page .zr-stage-next::after { content: "ETA: when it's good"; }
body.zomblers-roadmap-page .zr-stage-then::after { content: "Bigger rooms, same chaos"; }
body.zomblers-roadmap-page .zr-stage-goal::after { content: "Still undead"; }

body.zomblers-roadmap-page .zr-stage-current::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 44%;
    height: 3px;
    background: linear-gradient(90deg, var(--zr-neon), var(--zr-pink));
    box-shadow: 0 0 20px rgba(160, 249, 18, .4);
    animation: zr-roadmap-pulse 2.8s ease-in-out infinite alternate;
}

body.zomblers-roadmap-page .zr-build-section .zr-section-head,
body.zomblers-roadmap-page .zr-roadmap-section .zr-section-head {
    position: relative;
}

body.zomblers-roadmap-page .zr-build-section .zr-section-head::after {
    content: "LIVE BUILD // PLEASE DO NOT UNPLUG";
    position: absolute;
    right: 0;
    top: 2px;
    padding: 9px 13px;
    color: var(--zr-neon);
    border: 1px dashed rgba(160, 249, 18, .48);
    background: rgba(4, 10, 14, .75);
    font: 800 9px/1.2 "IBM Plex Mono", Consolas, monospace;
    letter-spacing: .1em;
    transform: rotate(-1.5deg);
}

body.zomblers-roadmap-page .zr-roadmap-section .zr-section-head::after {
    content: "Forecast: 100% chance of overtime";
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--zr-pink);
    font: 800 9px/1.2 "IBM Plex Mono", Consolas, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(1deg);
}

@keyframes zr-roadmap-pulse {
    from { opacity: .55; transform: scaleX(.78); transform-origin: left; }
    to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

body.zomblers-roadmap-page .zr-stage-current {
    border-color: rgba(160, 249, 18, .38);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .3), inset 4px 0 0 var(--zr-neon);
}

body.zomblers-roadmap-page .zr-stage-next {
    box-shadow: 0 28px 68px rgba(0, 0, 0, .24), inset 4px 0 0 var(--zr-pink);
}

body.zomblers-roadmap-page .zr-stage-copy li {
    position: relative;
    padding-left: 3px;
}

body.zomblers-roadmap-page .zr-stage-copy li::marker { color: var(--zr-neon); }

body.zomblers-roadmap-page .zr-roadmap-endcap {
    background: linear-gradient(90deg, rgba(160, 249, 18, .1), rgba(255, 37, 113, .07));
    border-color: rgba(160, 249, 18, .3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

body.zomblers-roadmap-page .zr-community-pulse {
    border-block: 1px solid rgba(255, 255, 255, .1);
    background:
        repeating-linear-gradient(-10deg, transparent 0 14px, rgba(255,255,255,.018) 14px 15px),
        linear-gradient(90deg, #101902, #080d10 45%, #1b0710);
}

body.zomblers-roadmap-page .zr-cta {
    isolation: isolate;
    background:
        radial-gradient(circle at 22% 45%, rgba(160, 249, 18, .12), transparent 33%),
        radial-gradient(circle at 83% 12%, rgba(255, 37, 113, .12), transparent 28%),
        #03070c;
}

body.zomblers-roadmap-page .zr-button {
    box-shadow: 0 15px 42px rgba(160, 249, 18, .14);
}

@media (max-width: 980px) {
    body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone {
        min-height: auto;
        background-position: 64% center;
    }

    body.zomblers-roadmap-page .zch-teams-hero__inner {
        width: min(100% - 40px, 760px);
        grid-template-columns: 1fr;
        gap: 44px;
        padding-block: 52px 44px;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy {
        max-width: 650px;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy h1 {
        font-size: clamp(78px, 15vw, 126px);
    }

    body.zomblers-roadmap-page .zch-teams-stats {
        width: min(100%, 580px);
        transform: none;
    }
}

@media (max-width: 620px) {
    body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone {
        background:
            linear-gradient(0deg, rgba(3, 7, 12, .98) 0%, rgba(3, 7, 12, .72) 55%, rgba(3, 7, 12, .34) 100%),
            linear-gradient(90deg, rgba(3, 7, 12, .72), rgba(3, 7, 12, .16)),
            url('roadmap-graffiti-hero.png') 67% center / cover no-repeat;
    }

    body.zomblers-roadmap-page .zch-teams-hero.zr-live-teams-hero-clone::after {
        display: none;
    }

    body.zomblers-roadmap-page .zch-teams-hero__inner {
        width: min(100% - 32px, 520px);
        gap: 34px;
        padding-block: 30px 34px;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy .eyebrow {
        font-size: 10px;
        letter-spacing: .16em;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy h1 {
        max-width: 390px;
        font-size: clamp(64px, 24vw, 92px);
        line-height: .78;
    }

    body.zomblers-roadmap-page .zch-teams-hero__copy > p:last-child {
        margin-top: 28px;
        font-size: 15px;
        line-height: 1.65;
    }

    body.zomblers-roadmap-page .zch-teams-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    body.zomblers-roadmap-page .zch-teams-stats > div {
        padding: 20px 9px;
    }

    body.zomblers-roadmap-page .zch-teams-stats strong {
        font-size: clamp(34px, 11vw, 48px);
    }

    body.zomblers-roadmap-page .zch-teams-stats span {
        font-size: 7px;
        letter-spacing: .07em;
    }

    body.zomblers-roadmap-page .zr-intro-section::after,
    body.zomblers-roadmap-page .zr-build-section::after,
    body.zomblers-roadmap-page .zr-roadmap-section::after {
        width: 190px;
        opacity: .12;
    }

    body.zomblers-roadmap-page .zr-focus-card,
    body.zomblers-roadmap-page .zr-stage,
    body.zomblers-roadmap-page .zr-manifesto,
    body.zomblers-roadmap-page .zr-roadmap-endcap {
        box-shadow: 0 20px 42px rgba(0, 0, 0, .25);
    }

    body.zomblers-roadmap-page .zr-focus-card::before {
        top: 12px;
        right: -5px;
        max-width: 145px;
        padding: 6px 10px;
        font-size: 7px;
    }

    body.zomblers-roadmap-page .zr-stage::after,
    body.zomblers-roadmap-page .zr-build-section .zr-section-head::after,
    body.zomblers-roadmap-page .zr-roadmap-section .zr-section-head::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.zomblers-roadmap-page .zr-focus-card,
    body.zomblers-roadmap-page .zr-focus-art img {
        transition: none;
    }

    body.zomblers-roadmap-page .zr-stage-current::before {
        animation: none;
    }
}