/* Home landing page (responsive, UI-kit driven). */

.page-home .content {
    padding: clamp(1.25rem, 3vw, 2.25rem) 0 3.25rem;
}

.page-home .home {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* ==== UI Kit Asset Wiring (expects generated crops under static/images/ui/kit/) ==== */
:root {
    --ui-panel-hero: url("/static/images/ui/kit/panel_hero.png");
    --ui-panel-note: url("/static/images/ui/kit/panel_note.png");
    --ui-card-tool: url("/static/images/ui/kit/card_tool.png");
    --ui-card-guide: url("/static/images/ui/kit/card_guide.png");
    --ui-btn-primary: url("/static/images/ui/kit/button_primary.png");
    --ui-btn-secondary: url("/static/images/ui/kit/button_secondary.png");
    --ui-divider: url("/static/images/ui/kit/divider.png");
    --ui-bg-charcoal: url("/static/images/bg/5.jpg");
    --ui-bg-patch-a: url("/static/images/ui/kit/crop_066.png");
    --ui-bg-patch-b: url("/static/images/ui/kit/crop_067.png");
    --ui-bg-mark: url("/static/images/icons/asterisk.png");
    --ui-tools-art-main: url("/static/images/icons/crockpot.png");
    --ui-tools-art-side: url("/static/images/ingredients/fruitsandveggies.png");
    --ui-tools-art-cold: url("/static/images/ingredients/ice.png");
    --ui-guides-art-main: url("/static/modules/wiki/images/backpack.webp");
    --ui-guides-art-side: url("/static/modules/wiki/images/campfire.webp");
    --ui-guides-art-enemy: url("/static/modules/wiki/images/deerclops.webp");
}

.page-home {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: #090705;
    background-image:
        linear-gradient(180deg, rgba(8, 6, 4, 0.96) 0%, rgba(8, 6, 4, 0.76) 22%, rgba(8, 6, 4, 0.94) 100%),
        radial-gradient(circle at 18% 12%, rgba(212, 161, 104, 0.18) 0%, rgba(212, 161, 104, 0) 45%),
        radial-gradient(circle at 85% 18%, rgba(245, 233, 207, 0.06) 0%, rgba(245, 233, 207, 0) 40%);
}

.page-home::before,
.page-home::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.page-home::before {
    z-index: -2;
    opacity: 0.32;
    background-image:
        linear-gradient(180deg, rgba(8, 6, 4, 0.12) 0%, rgba(8, 6, 4, 0.55) 100%),
        url("/static/images/bg/3.png"),
        var(--ui-bg-charcoal);
    background-size: cover, 1800px auto, cover;
    background-position: center top, center top, center top;
    background-repeat: no-repeat, no-repeat, no-repeat;
    filter: saturate(0.75) contrast(1.02);
}

.page-home::after {
    z-index: -1;
    opacity: 0.18;
    background-image:
        var(--ui-bg-patch-a),
        var(--ui-bg-patch-b),
        var(--ui-bg-mark),
        var(--ui-bg-mark),
        repeating-linear-gradient(125deg, rgba(245, 233, 207, 0.025) 0 2px, transparent 2px 28px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 7px);
    background-size:
        300px auto,
        260px auto,
        54px 58px,
        42px 46px,
        auto,
        auto;
    background-position:
        calc(100% + 88px) 18%,
        -78px 72%,
        12% 30%,
        88% 66%,
        center top,
        center top;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat;
    mix-blend-mode: screen;
}

/* ==== Shared primitives ==== */
.ui-panel,
.ui-card,
.ui-btn {
    font-family: var(--font-body, inherit);
}

.ui-panel {
    --ui-slice: 24;
    border: calc(var(--ui-slice) * 1px) solid transparent;
    border-image-slice: var(--ui-slice) fill;
    border-image-width: calc(var(--ui-slice) * 1px);
    border-image-repeat: stretch;
    background: rgba(10, 7, 4, 0.78);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55);
}

.ui-panel--hero {
    border-image-source: var(--ui-panel-hero);
}

.ui-panel--note {
    border-image-source: var(--ui-panel-note);
}

.ui-panel--hero,
.ui-panel--note {
    /* If crops are missing, keep it presentable. */
    border-color: rgba(212, 161, 104, 0.22);
}

.ui-btn {
    --ui-slice: 14;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    border: calc(var(--ui-slice) * 1px) solid transparent;
    border-color: rgba(212, 161, 104, 0.32);
    border-image-slice: var(--ui-slice) fill;
    border-image-width: calc(var(--ui-slice) * 1px);
    border-image-repeat: stretch;
    padding: 0.55rem 0.9rem;
    font-family: var(--font-ui, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 1;
    color: #1b1108;
    background: linear-gradient(180deg, rgba(230, 211, 174, 0.98) 0%, rgba(183, 139, 85, 0.98) 100%);
    box-shadow: 0 14px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.ui-btn--primary {
    border-image-source: var(--ui-btn-primary);
}

.ui-btn--secondary {
    border-image-source: var(--ui-btn-secondary);
    color: rgba(245, 233, 207, 0.95);
    background: linear-gradient(180deg, rgba(36, 25, 15, 0.86) 0%, rgba(14, 10, 7, 0.92) 100%);
    border-color: rgba(245, 233, 207, 0.18);
}

.ui-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ui-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.ui-btn:focus-visible {
    outline: 2px solid rgba(212, 161, 104, 0.82);
    outline-offset: 2px;
}

.ui-card {
    --ui-slice: 18;
    position: relative;
    overflow: hidden;
    border: calc(var(--ui-slice) * 1px) solid transparent;
    border-color: rgba(212, 161, 104, 0.25);
    border-image-slice: var(--ui-slice) fill;
    border-image-width: calc(var(--ui-slice) * 1px);
    border-image-repeat: stretch;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.05rem 1.05rem 1.1rem;
    min-height: 7.5rem;
    background: linear-gradient(180deg, rgba(245, 233, 207, 0.88) 0%, rgba(230, 211, 174, 0.78) 100%);
    color: rgba(20, 14, 9, 0.92);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.ui-card--tool {
    border-image-source: var(--ui-card-tool);
}

.ui-card--guide {
    border-image-source: var(--ui-card-guide);
    background: linear-gradient(180deg, rgba(32, 22, 14, 0.9) 0%, rgba(12, 9, 6, 0.92) 100%);
    color: rgba(245, 233, 207, 0.94);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}

.ui-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}

.ui-card:active {
    transform: translateY(-1px);
    filter: brightness(0.99);
}

.ui-card:focus-visible {
    outline: 2px solid rgba(212, 161, 104, 0.82);
    outline-offset: 3px;
}

.ui-card-title {
    font-family: var(--font-title, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.02rem;
    line-height: 1.12;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ui-card-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

.ui-card--guide .ui-card-icon {
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}

.ui-card-desc {
    font-size: 0.9rem;
    line-height: 1.35;
    opacity: 0.86;
    max-width: 46ch;
    position: relative;
    z-index: 1;
}

.ui-card--artful {
    min-height: 8.6rem;
    padding-right: clamp(5.6rem, 11vw, 7.6rem);
}

.ui-card--artful::before {
    content: "";
    position: absolute;
    right: 0.8rem;
    bottom: 0.4rem;
    width: clamp(84px, 11vw, 140px);
    height: clamp(84px, 11vw, 140px);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 161, 104, 0.18) 0%, rgba(212, 161, 104, 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.ui-card-art {
    position: absolute;
    right: -0.45rem;
    bottom: -0.7rem;
    width: clamp(90px, 11vw, 132px);
    height: auto;
    object-fit: contain;
    opacity: 0.84;
    pointer-events: none;
    z-index: 0;
    transform-origin: center;
    filter: saturate(0.94) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.38));
}

.ui-card--tool .ui-card-art {
    opacity: 0.72;
}

.ui-card--guide .ui-card-art {
    opacity: 0.9;
    filter: saturate(0.98) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.56));
}

.ui-card--artful .ui-card-title {
    max-width: 18ch;
}

.ui-card--artful .ui-card-desc {
    max-width: 23ch;
}

.ui-card-art--damage {
    width: clamp(94px, 11vw, 134px);
    right: -0.15rem;
    bottom: -0.65rem;
    transform: rotate(8deg);
}

.ui-card-art--plants {
    width: clamp(94px, 11vw, 130px);
    right: -0.2rem;
    bottom: -0.45rem;
    transform: rotate(7deg);
}

.ui-card-art--speed {
    width: clamp(78px, 8vw, 104px);
    right: 0.25rem;
    bottom: -0.35rem;
    transform: rotate(18deg);
}

.ui-card-art--temperature {
    width: clamp(104px, 12vw, 138px);
    right: -0.2rem;
    bottom: -0.45rem;
    transform: rotate(5deg);
}

.ui-card-art--wiki {
    width: clamp(112px, 13vw, 156px);
    right: -0.45rem;
    bottom: -0.35rem;
    transform: rotate(4deg);
}

.ui-card-art--mods {
    width: clamp(90px, 10vw, 118px);
    right: 0.1rem;
    bottom: -0.1rem;
    transform: rotate(6deg);
}

.ui-card-art--guide-index {
    width: clamp(104px, 12vw, 140px);
    right: -0.15rem;
    bottom: -0.45rem;
    transform: rotate(6deg);
}

.ui-card-art--characters {
    width: clamp(88px, 10vw, 118px);
    right: 0.2rem;
    bottom: -0.15rem;
    transform: rotate(4deg);
}

.ui-card-art--seasons {
    width: clamp(100px, 11vw, 134px);
    right: -0.1rem;
    bottom: -0.35rem;
    transform: rotate(8deg);
}

/* ==== Layout ==== */
.home-hero {
    padding: clamp(1.15rem, 2.6vw, 2rem);
    position: relative;
    overflow: hidden;
}

.home-hero-inner {
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.home-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(0.9rem, 2vw, 1.4rem);
    align-items: center;
}

.home-hero-copy {
    max-width: 56ch;
}

.home-hero-art {
    position: relative;
    padding: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(12, 9, 6, 0.92);
    isolation: isolate;
}

.home-hero-art::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(10, 7, 4, 0.06) 0%, rgba(10, 7, 4, 0.92) 100%),
        url("/static/images/bg/3.png");
    background-size: cover;
    background-position: center 30%;
    filter: saturate(0.9) contrast(1.05);
    transform: scale(1.03);
    z-index: 0;
}

.home-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 18%, rgba(245, 233, 207, 0.18) 0%, rgba(245, 233, 207, 0) 52%),
        radial-gradient(circle at 78% 62%, rgba(212, 161, 104, 0.14) 0%, rgba(212, 161, 104, 0) 56%);
    opacity: 0.75;
    z-index: 1;
}

.home-hero-art.ui-card:hover {
    transform: none;
    filter: none;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

.home-hero-dish {
    position: absolute;
    width: clamp(78px, 8vw, 118px);
    height: auto;
    image-rendering: auto;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
    opacity: 0.95;
    transform-origin: center;
    z-index: 2;
}

.home-hero-dish--a {
    left: 10%;
    bottom: 10%;
    transform: rotate(-8deg);
}

.home-hero-dish--b {
    left: 46%;
    top: 44%;
    transform: translate(-50%, -50%) rotate(6deg);
}

.home-hero-dish--c {
    right: 12%;
    top: 14%;
    transform: rotate(12deg);
    opacity: 0.88;
}

.home-hero::before,
.home-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.home-hero::before {
    width: clamp(120px, 18vw, 190px);
    height: clamp(120px, 18vw, 190px);
    right: clamp(-22px, -2vw, -8px);
    top: clamp(-50px, -6vw, -26px);
    background: url("/static/images/icons/crockpot.png") center / contain no-repeat;
    opacity: 0.18;
    transform: rotate(7deg);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45));
}

.home-hero::after {
    inset: 0;
    background-image:
        url("/static/images/icons/health.png"),
        url("/static/images/icons/hunger.png"),
        url("/static/images/icons/sanity.png");
    background-repeat: no-repeat;
    background-size: 42px 42px, 42px 42px, 42px 42px;
    background-position:
        90% 76%,
        82% 64%,
        74% 78%;
    opacity: 0.16;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}

.home-title {
    margin: 0;
    font-family: var(--font-title, inherit);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.home-title-icon {
    width: clamp(44px, 6vw, 64px);
    height: auto;
    flex: 0 0 auto;
    opacity: 0.95;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42));
}

.home-subtitle {
    margin: 0.9rem 0 0;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.55;
    opacity: 0.92;
}

.home-hero-actions {
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-divider {
    height: 21px;
    opacity: 0.9;
    background-image:
        var(--ui-divider),
        linear-gradient(90deg, transparent 0%, rgba(212, 161, 104, 0.75) 50%, transparent 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 21px, 100% 2px;
    background-position: center, center;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}

.home-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.home-section--tools,
.home-section--guides {
    position: relative;
    isolation: isolate;
}

.home-section--tools > *,
.home-section--guides > * {
    position: relative;
    z-index: 1;
}

.home-section--tools::before,
.home-section--tools::after,
.home-section--guides::before,
.home-section--guides::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42));
}

.home-section--tools::before {
    width: clamp(118px, 15vw, 178px);
    height: clamp(118px, 15vw, 178px);
    right: clamp(-18px, -1vw, -8px);
    top: -1.4rem;
    background: var(--ui-tools-art-main) center / contain no-repeat;
    opacity: 0.16;
    transform: rotate(8deg);
}

.home-section--tools::after {
    width: clamp(160px, 21vw, 240px);
    height: clamp(132px, 19vw, 188px);
    left: -1.4rem;
    bottom: -0.8rem;
    background-image: var(--ui-tools-art-side), var(--ui-tools-art-cold);
    background-size: 132px auto, 86px auto;
    background-position: left bottom, 82% 10%;
    opacity: 0.16;
    transform: rotate(-7deg);
}

.home-section--guides::before {
    width: clamp(150px, 17vw, 216px);
    height: clamp(150px, 17vw, 216px);
    right: -1.3rem;
    top: -1.6rem;
    background: var(--ui-guides-art-main) center / contain no-repeat;
    opacity: 0.15;
    transform: rotate(9deg);
}

.home-section--guides::after {
    width: clamp(138px, 16vw, 188px);
    height: clamp(138px, 16vw, 188px);
    left: -1.1rem;
    bottom: -1.1rem;
    background: var(--ui-guides-art-side) center / contain no-repeat;
    opacity: 0.17;
    transform: rotate(-9deg);
}

.home-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.home-section-title {
    margin: 0;
    font-family: var(--font-title, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.home-section-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    opacity: 0.9;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

.home-section-link {
    font-family: var(--font-ui, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: rgba(245, 233, 207, 0.9);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.home-section-link:hover {
    opacity: 1;
    color: rgba(212, 161, 104, 1);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem;
}

.home-grid--guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-card--enemy {
    position: relative;
    overflow: hidden;
    min-height: 9rem;
    padding-right: clamp(6.2rem, 14vw, 9rem);
}

.ui-card--enemy::before {
    content: "";
    position: absolute;
    inset: auto auto -2rem 52%;
    width: clamp(110px, 17vw, 178px);
    height: clamp(110px, 17vw, 178px);
    pointer-events: none;
    background: radial-gradient(circle, rgba(212, 161, 104, 0.22) 0%, rgba(212, 161, 104, 0) 70%);
    z-index: 0;
}

.ui-card--enemy::after {
    content: "";
    position: absolute;
    right: -0.9rem;
    bottom: -1rem;
    width: clamp(118px, 17vw, 184px);
    height: clamp(118px, 17vw, 184px);
    pointer-events: none;
    background: var(--ui-guides-art-enemy) center / contain no-repeat;
    opacity: 0.94;
    transform: rotate(10deg);
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.58));
    z-index: 0;
}

.ui-card--enemy .ui-card-title,
.ui-card--enemy .ui-card-desc {
    position: relative;
    z-index: 1;
    max-width: 20ch;
}

.home-final {
    padding: 1rem;
}

.home-final-inner {
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-final-text {
    margin: 0;
    opacity: 0.9;
    max-width: 72ch;
}

@media (max-width: 920px) {
    .ui-card--artful {
        padding-right: 6.4rem;
    }

    .ui-card-art {
        width: 112px;
    }

    .ui-card--artful .ui-card-title {
        max-width: 15ch;
    }

    .ui-card--artful .ui-card-desc {
        max-width: 20ch;
    }

    .home-section--tools::before {
        width: 142px;
        height: 142px;
        top: -1.1rem;
        right: -0.7rem;
    }

    .home-section--tools::after {
        width: 190px;
        height: 150px;
        left: -1rem;
        bottom: -0.55rem;
        background-size: 112px auto, 74px auto;
    }

    .home-section--guides::before {
        width: 170px;
        height: 170px;
        right: -0.8rem;
        top: -1rem;
    }

    .home-section--guides::after {
        width: 148px;
        height: 148px;
        left: -0.7rem;
        bottom: -0.85rem;
    }

    .page-home::before {
        background-size: cover, 1400px auto, cover;
    }

    .page-home::after {
        background-size:
            240px auto,
            220px auto,
            46px 50px,
            38px 42px,
            auto,
            auto;
        background-position:
            calc(100% + 72px) 15%,
            -72px 78%,
            9% 26%,
            91% 70%,
            center top,
            center top;
    }

    .home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-grid--guides {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-hero-layout {
        grid-template-columns: 1fr;
    }

    .home-hero-copy {
        max-width: none;
    }

    .home-hero-art {
        max-width: 520px;
        justify-self: start;
        aspect-ratio: 16 / 9;
    }

    .ui-card--enemy {
        padding-right: 7.4rem;
    }

    .ui-card--enemy::after {
        width: 142px;
        height: 142px;
    }
}

@media (max-width: 620px) {
    .ui-card--artful {
        min-height: 8.2rem;
        padding-right: 5.6rem;
    }

    .ui-card-art {
        width: 96px;
    }

    .ui-card--artful .ui-card-title,
    .ui-card--artful .ui-card-desc {
        max-width: 16ch;
    }

    .home-section--tools::before,
    .home-section--guides::before {
        opacity: 0.1;
    }

    .home-section--tools::after,
    .home-section--guides::after {
        opacity: 0.11;
    }

    .page-home::before {
        opacity: 0.24;
        background-size: cover, 1100px auto, cover;
    }

    .page-home::after {
        opacity: 0.12;
        background-size:
            180px auto,
            170px auto,
            34px 38px,
            30px 34px,
            auto,
            auto;
        background-position:
            calc(100% + 54px) 13%,
            -58px 82%,
            7% 24%,
            93% 74%,
            center top,
            center top;
    }

    .page-home .home {
        padding: 0 0.9rem;
    }

    .home-grid,
    .home-grid--guides {
        grid-template-columns: 1fr;
    }

    .home-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-divider {
        height: 16px;
        background-size: 100% 16px, 100% 2px;
    }

    .home-hero::after {
        background-size: 36px 36px, 36px 36px, 36px 36px;
    }

    .ui-card--enemy {
        min-height: 8.4rem;
        padding-right: 6.2rem;
    }

    .ui-card--enemy::before {
        inset: auto auto -1.8rem 46%;
        width: 104px;
        height: 104px;
    }

    .ui-card--enemy::after {
        right: -0.8rem;
        bottom: -0.6rem;
        width: 118px;
        height: 118px;
    }

    .ui-card--enemy .ui-card-title,
    .ui-card--enemy .ui-card-desc {
        max-width: 16ch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-card,
    .ui-btn,
    .home-section-link {
        transition: none;
    }
}