/* ==========================================================
   Mobile synopsis layout
   Source: synopsis-mobile.css
   ========================================================== */
.synopsis-mobile-frame {
    display: none;
}

@media (max-width: 768px) {
    .ema-synopsis-container {
        width: min(100%, 480px);
        max-width: 480px;
        margin: 0 auto;
        padding: 0;
        color: #5f4a46;
        overflow: hidden;
        background: transparent;
    }

    .ema-text,
    .ema-decoration,
    .ema-synopsis-container::before,
    .ema-synopsis-container::after {
        display: none;
    }

    .synopsis-mobile-frame {
        position: relative;
        display: block;
        min-height: 1040px;
        padding: 1px 0 126px;
        isolation: isolate;
    }

    .synopsis-mobile-frame::before {
        display: none;
    }

    .synopsis-mobile-glow {
        position: absolute;
        z-index: -2;
        top: 260px;
        left: 50%;
        width: 78%;
        height: 520px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: rgba(255, 213, 236, 0.45);
        filter: blur(18px);
    }

    .synopsis-mobile-ornament {
        position: absolute;
        z-index: 1;
        max-width: 100%;
        height: auto;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        transform-origin: center;
    }

    .synopsis-mobile-sakura {
        top: 42px;
        left: 50%;
        width: 46%;
        transform: translateX(-50%);
    }

    .synopsis-mobile-bow {
        top: 154px;
        left: 50%;
        width: 38%;
        transform: translateX(-50%);
    }

    .synopsis-mobile-rice-top {
        top: 198px;
        width: 35%;
    }

    .synopsis-mobile-rice-top-left {
        left: -2%;
    }

    .synopsis-mobile-rice-top-right {
        right: -2%;
    }

    .synopsis-mobile-rope {
        top: 246px;
        width: 22%;
    }

    .synopsis-mobile-rope-left {
        left: 1.5%;
    }

    .synopsis-mobile-rope-right {
        right: 1.5%;
    }

    .synopsis-mobile-card {
        position: relative;
        z-index: 2;
        width: 72%;
        margin: 278px auto 0;
        padding: 28px 18px 34px;
        text-align: center;
        border: 1px solid rgba(217, 189, 143, 0.45);
        border-radius: 999px 999px 44px 44px / 88px 88px 44px 44px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 238, 255, 0.72));
        box-shadow:
            0 18px 50px rgba(122, 89, 68, 0.06),
            inset 0 0 30px rgba(255, 245, 228, 0.55);
    }

    .synopsis-mobile-eyebrow {
        margin: 0 0 5px;
        color: #c09f79;
        font-family: Georgia, serif;
        font-size: 10px;
        letter-spacing: 0.28em;
    }

    .synopsis-mobile-card h2 {
        margin: 0;
        color: #725752;
        font-size: clamp(27px, 8vw, 36px);
        font-weight: 500;
        letter-spacing: 0.2em;
        line-height: 1.25;
        text-indent: 0.2em;
        text-shadow: none;
    }

    .synopsis-mobile-work-title {
        margin: 10px 0 0;
        color: #8c6d67;
        font-size: clamp(13px, 3.6vw, 16px);
        font-weight: 700;
        line-height: 1.65;
        letter-spacing: 0.05em;
        text-align: center;
        text-shadow: none;
    }

    .synopsis-mobile-title-mark {
        display: block;
        width: 40px;
        height: 1px;
        margin: 14px auto 22px;
        background: linear-gradient(90deg, transparent, #e77d79, transparent);
    }

    .synopsis-mobile-text {
        color: #7f6964;
        font-size: clamp(12px, 3.45vw, 15px);
        line-height: 1.9;
        letter-spacing: 0.045em;
        text-align: left;
        text-shadow: none;
    }

    .synopsis-mobile-text p {
        margin: 0 0 1.15em;
    }

    .synopsis-mobile-text p:last-child {
        margin-bottom: 0;
    }

    .synopsis-mobile-rice-bottom {
        z-index: 1;
        bottom: 78px;
        width: 31%;
    }

    .synopsis-mobile-rice-bottom-left {
        left: -1%;
    }

    .synopsis-mobile-rice-bottom-right {
        right: -1%;
    }

    .synopsis-mobile-fox {
        z-index: 2;
        left: 50%;
        bottom: 12px;
        width: 54%;
        transform: translateX(-50%);
    }
}

@media (max-width: 370px) {
    .synopsis-mobile-frame {
        min-height: 1010px;
        padding-bottom: 116px;
    }

    .synopsis-mobile-card {
        width: 74%;
        margin-top: 266px;
        padding-inline: 15px;
    }

    .synopsis-mobile-rice-bottom {
        bottom: 72px;
    }

    .synopsis-mobile-fox {
        bottom: 8px;
    }
}