/* Shared parchment skin for Map city popups and Bounty contract cards. */
    .city-paper-surface.city-paper-surface.city-paper-surface {
        position: relative;
        overflow: hidden;
        color: #3f2818;
        background:
            repeating-linear-gradient(
                0deg,
                rgba(122, 69, 25, 0.028) 0,
                rgba(122, 69, 25, 0.028) 1px,
                transparent 1px,
                transparent 4px
            ),
            radial-gradient(circle at 18% 16%, rgba(234, 216, 192, 0.72), transparent 30%),
            radial-gradient(circle at 82% 74%, rgba(167, 146, 119, 0.18), transparent 36%),
            linear-gradient(90deg, #92775b 0%, #ad9374 5%, #bea789 50%, #ad9374 95%, #92775b 100%);
        border: 0;
        border-radius: 0;
        clip-path: polygon(
            1.3% 2.4%, 5% 1.4%, 9% 2%, 13.5% 1.6%, 14% 5.8%, 14.5% 1.3%,
            20% 2.1%, 25% 1.2%, 29% 1.7%, 31.3% 1.1%,
            37% 2.2%, 43% 1.3%, 48.6% 1.6%, 49.1% 6.1%, 49.6% 1.2%,
            56% 2.1%, 62% 1.2%, 68.6% 1.6%, 69.1% 5%, 69.6% 1%,
            76% 2.2%, 82% 1.3%, 86.6% 1.7%, 87.1% 4.4%, 87.6% 1.2%,
            93% 2.1%, 98.5% 2.3%,
            98.6% 9%, 97.9% 13%, 98.6% 15.5%, 96.1% 16.4%, 98.7% 17.3%,
            98% 23%, 98.7% 28%, 98.4% 34%, 98.6% 36.7%,
            97.9% 42%, 98.7% 47%, 98.5% 52.5%, 95.8% 53.4%, 98.6% 54.4%,
            98% 61%, 98.7% 67%, 98.3% 72%, 98.6% 75%,
            98% 81%, 98.6% 85%, 98.4% 88.3%, 96.2% 89.1%, 98.7% 90.1%,
            98.1% 94%, 98.5% 97.7%,
            93% 98.4%, 88% 98.8%, 87.4% 95%, 86.8% 98.8%,
            80% 98.2%, 74% 98.9%, 68.3% 98.4%, 67.8% 94%, 67.3% 98.7%,
            61% 98.1%, 55% 98.9%, 50% 98.5%, 47.5% 98.8%,
            42% 98.2%, 36% 98.9%, 29.4% 98.4%, 28.8% 93.8%, 28.2% 98.8%,
            22% 98.1%, 16% 98.9%, 11.5% 98.4%, 10.9% 95.2%, 10.3% 98.7%,
            5% 98.2%, 1.2% 97.7%,
            1.5% 92%, 2.1% 87%, 1.5% 83.6%, 3.8% 82.6%, 1.4% 81.6%,
            2.1% 76%, 1.4% 71%, 1.7% 66%, 1.5% 63.2%,
            2.2% 58%, 1.4% 52%, 1.6% 46.6%, 3.9% 45.6%, 1.4% 44.6%,
            2.1% 39%, 1.4% 34%, 1.8% 29%, 1.5% 26.2%,
            2.2% 21%, 1.4% 16%, 1.6% 11.7%, 3.6% 10.8%, 1.4% 9.8%,
            2% 5%
        );
        box-shadow:
            inset 16px 0 22px -22px #7a4519,
            inset -16px 0 22px -22px #7a4519;
    }

    .city-paper-surface::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        pointer-events: none;
        background:
            radial-gradient(ellipse at 0 0, rgba(74, 35, 12, 0.58) 0%, rgba(122, 69, 25, 0.25) 9%, transparent 25%),
            radial-gradient(ellipse at 100% 0, rgba(74, 35, 12, 0.52) 0%, rgba(122, 69, 25, 0.22) 9%, transparent 24%),
            radial-gradient(ellipse at 0 100%, rgba(74, 35, 12, 0.55) 0%, rgba(122, 69, 25, 0.24) 10%, transparent 26%),
            radial-gradient(ellipse at 100% 100%, rgba(74, 35, 12, 0.6) 0%, rgba(122, 69, 25, 0.26) 10%, transparent 26%),
            linear-gradient(90deg, rgba(122, 69, 25, 0.22), transparent 7%, transparent 93%, rgba(122, 69, 25, 0.22)),
            linear-gradient(180deg, rgba(184, 115, 51, 0.16), transparent 8%, transparent 91%, rgba(122, 69, 25, 0.2));
    }

    .city-paper-surface::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        pointer-events: none;
        box-shadow:
            inset 0 0 7px rgba(74, 35, 12, 0.48),
            inset 0 0 26px rgba(122, 69, 25, 0.24);
    }

.city-paper-surface > * {
    position: relative;
    z-index: 1;
}

    .city-scroll-prototype.city-scroll-prototype .app-modal-header,
.city-paper-surface .paper-panel-header {
        padding: 1.35rem 2.45rem 0.9rem;
        color: #3f2818;
        background:
            radial-gradient(ellipse at top left, rgba(74, 35, 12, 0.52), transparent 28%),
            radial-gradient(ellipse at top right, rgba(74, 35, 12, 0.48), transparent 27%),
            linear-gradient(
                180deg,
                rgba(74, 35, 12, 0.42) 0%,
                rgba(122, 69, 25, 0.24) 10%,
                rgba(209, 187, 158, 0.66) 28%,
                rgba(167, 146, 119, 0.2) 100%
            );
        border-bottom: 1px solid rgba(122, 69, 25, 0.46);
    }

    .city-scroll-prototype.city-scroll-prototype .city-info.app-modal-body,
.city-paper-surface .paper-panel-body {
        margin: 0.75rem 2.45rem;
        padding: 0.8rem 0.9rem 0.9rem;
        color: #3f2818;
        background:
            repeating-linear-gradient(
                0deg,
                rgba(122, 69, 25, 0.025) 0,
                rgba(122, 69, 25, 0.025) 1px,
                transparent 1px,
                transparent 4px
            ),
            linear-gradient(135deg, #b59d7d, #a79277);
        border: 1px solid rgba(122, 69, 25, 0.44);
        border-left: 3px solid #b87333;
        box-shadow:
            inset 0 1px 8px rgba(122, 69, 25, 0.1),
            0 1px 0 rgba(234, 216, 192, 0.28);
    }