@media (max-width: 767px) {
    html {
        touch-action: none;
        overscroll-behavior-y: contain;
    }

    body {
        scrollbar-gutter: auto;
    }

    input, textarea {
        touch-action: auto !important;
    }

    #content-wrapper {
        min-height: 400dvh;
    }

    #main-content {
        display: block !important;
        max-width: none !important;
        min-height: 300dvh;
        padding: 0 !important;
    }

    #cards-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        max-width: none !important;
        width: 100%;
    }

    .mobile-snap-page,
    #contact-section {
        min-height: 100dvh !important;
    }

    .glass-card.mobile-snap-page {
        width: 100%;
        height: 100dvh;
        aspect-ratio: auto;
        padding: 4.7rem 1.65rem 5.5rem !important;
        border-radius: 0 !important;
        justify-content: center;
        overflow: hidden;
    }

    .glass-card > div:first-child {
        justify-content: center;
        transform: translateY(-36px);
    }

    .glass-card > div:first-child > div:first-child {
        opacity: 1;
        transform: translateY(0);
    }

    .glass-card > div:first-child > div:nth-child(2) {
        transform: translateY(-16px);
    }

    .glass-card > div:first-child > p {
        max-height: 46dvh;
        margin-top: 3.5rem !important;
        margin-bottom: 4rem !important;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        overflow: visible;
        font-size: clamp(1.125rem, 5vw, 1.3rem) !important;
        line-height: 1.5 !important;
        white-space: pre-wrap;
    }

    .glass-card > div:last-child,
    .glass-card.is-active > div:last-child {
        transform: translateY(-92px);
    }

    .glass-card.is-active > div:first-child > div:nth-child(2) {
        transform: translateY(-16px);
    }

    .glass-card.is-active > div:first-child > p {
        max-height: 46dvh;
        margin-top: 3.5rem !important;
        margin-bottom: 4rem !important;
    }

    #cards-grid.cards-hovering .glass-card:not(.is-active) .book-title-main,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .book-title-main *,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .year-label,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .year-label *,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .ui-type,
    #cards-grid.cards-hovering .glass-card:not(.is-active) .title-location {
        color: inherit !important;
        text-shadow: inherit !important;
    }

    #contact-section {
        max-width: none !important;
        padding: 4.4rem 1.2rem 3.8rem !important;
    }

    #contact-form-container {
        max-width: 410px;
    }

    .contact-card {
        padding: 1.05rem !important;
        gap: 0.75rem !important;
    }

    .contact-card > .text-center {
        margin-bottom: 0.15rem !important;
    }

    #contact-form {
        gap: 0.7rem !important;
    }

    #contact-form > div > label {
        display: none !important;
    }

    #contact-form input,
    #contact-form textarea,
    #contact-form label[for="notify-updates"],
    #contact-form button {
        padding-top: 0.68rem !important;
        padding-bottom: 0.68rem !important;
    }

    #contact-message {
        min-height: 5rem;
    }

    .page-switcher {
        position: fixed !important;
        left: 50% !important;
        top: auto !important;
        bottom: calc(1.15rem + env(safe-area-inset-bottom)) !important;
        z-index: 80;
        height: 2.75rem !important;
        width: 10.5rem !important;
        color: rgba(255,255,255,0.48) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-page-up {
        position: fixed;
        top: calc(1.15rem + env(safe-area-inset-top));
        left: 50%;
        z-index: 80;
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -12px);
        transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }

    .mobile-page-up.is-visible {
        opacity: 0.2;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .mobile-page-up.is-visible:hover {
        opacity: 0.4;
    }

    body[data-mobile-snap-page="4"] .mobile-page-up {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-page-down {
        position: fixed;
        bottom: calc(1.15rem + env(safe-area-inset-bottom));
        left: 50%;
        z-index: 80;
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 12px);
        transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
    }

    body[data-mobile-snap-page="1"] .mobile-page-down,
    body[data-mobile-snap-page="2"] .mobile-page-down {
        opacity: 0.2;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    body[data-mobile-snap-page="1"] .mobile-page-down:hover,
    body[data-mobile-snap-page="2"] .mobile-page-down:hover {
        opacity: 0.4;
    }

    .page-switcher.is-pinned {
        top: auto !important;
        bottom: calc(1.15rem + env(safe-area-inset-bottom)) !important;
    }

    body[data-mobile-snap-page="3"] #contact-btn,
    body[data-mobile-snap-page="4"] #contact-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body[data-mobile-snap-page="4"] #contact-btn {
        top: calc(1.15rem + env(safe-area-inset-top)) !important;
        bottom: auto !important;
    }

    .page-switcher .switcher-label {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

    .page-switcher .switcher-down,
    .page-switcher .switcher-up {
        opacity: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    body[data-mobile-snap-page="3"] .page-switcher:hover .switcher-label {
        opacity: 0 !important;
        transform: translate(-50%, -50%) translateY(-12px) !important;
    }

    body[data-mobile-snap-page="3"] .page-switcher:hover .switcher-down {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

    body[data-mobile-snap-page="4"] .page-switcher:hover .switcher-label {
        opacity: 0 !important;
        transform: translate(-50%, -50%) translateY(12px) !important;
    }

    body[data-mobile-snap-page="4"] .page-switcher:hover .switcher-up {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

    #footer-global {
        display: flex !important;
        position: absolute;
        left: 0;
        bottom: calc(0.65rem + env(safe-area-inset-bottom));
        z-index: 79;
        width: 100%;
        padding: 0 1.35rem !important;
        opacity: 0;
        pointer-events: none;
    }

    body[data-mobile-snap-page="4"] #footer-global {
        opacity: 1 !important;
    }

    #footer-global .deefunct-mark {
        right: 1.35rem;
    }

    #intro-logo {
        will-change: transform, opacity;
        transform-origin: center center;
        transform: translate(-50%, -50%) scale(1);
    }

    #intro-logo.nav-visible {
        opacity: 1 !important;
        transition: all 0.8s ease !important;
    }

    #intro-logo.nav-hidden {
        opacity: 0 !important;
        transform: translate(-50%, calc(-50% - 45vh)) scale(0.24) !important;
        pointer-events: none !important;
        transition: all 0.8s ease !important;
    }

    #intro-logo-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #intro-subtitle {
        margin-top: 1.25rem !important;
    }

    /* 滑动期间隐藏上下三角箭头 */
    body.is-scrolling .mobile-page-up,
    body.is-scrolling .mobile-page-down {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }

    /* 移动端默认全部显示地名与发光年份 */
    .glass-card .title-location {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .glass-card .year-label {
        color: rgb(255, 255, 255) !important;
    }

    .glass-card:nth-child(1) .year-label {
        text-shadow: 0 0 20px rgba(255,255,255,0.85), 0 0 44px rgba(255,255,255,0.55), 0 0 70px rgba(255,255,255,0.35) !important;
    }

    .glass-card:nth-child(2) .year-label {
        text-shadow: 0 0 22px rgba(255,255,255,0.85), 0 0 52px rgba(255,255,255,0.55) !important;
    }

    .glass-card:nth-child(3) .year-label {
        text-shadow: 0 0 24px rgba(255,255,255,0.85), 0 0 56px rgba(255,255,255,0.55) !important;
    }

    /* ========================================================
       FULL-PAGE READER MODE (MOBILE)
    ======================================================== */
    #reader-overlay {
        background: rgba(5, 5, 8, 0.98);
        align-items: flex-start;
        padding-top: calc(3rem + env(safe-area-inset-top));
    }

    #reader-content-container {
        padding: 0 1.5rem;
        height: auto;
        justify-content: flex-start;
        transform: translateY(16px);
        margin-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }
}