.mobile-app-nav, .mobile-page-label, .vase-option-name { display: none; }
#share-card-image { display: none; }
#native-share-card[hidden] { display: none; }
@media (max-width: 850px) {
    :root { --mobile-header: 64px; --mobile-nav: 68px; }
    html { -webkit-text-size-adjust: 100%; scroll-padding-top: 78px; }
    body { width: 100%; min-width: 0; margin: 0; padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); overflow-x: clip; }
    button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
    input:not([type="range"]), textarea { font-size: 16px !important; }
    button { touch-action: manipulation; }
    .site-header { padding: 0; background: #faf7ef; }
    .site-header .container { height: calc(var(--mobile-header) - 1px); min-height: 0; padding: 8px max(16px, env(safe-area-inset-left)); gap: 12px; }
    .site-header .logo { margin: 0 !important; align-items: flex-start; text-align: left !important; }
    .site-header .logo h1 { font-size: 18px; letter-spacing: .03em; }
    .site-header .logo .subtitle { font-size: 9px; letter-spacing: .12em; }
    .site-header .main-nav { display: none; }
    .mobile-page-label { display: block; color: #9e634f; font: 13px/1.5 var(--album-font); white-space: nowrap; }
    .mobile-app-nav {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed; inset: auto 0 0; z-index: 300;
        padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        min-height: var(--mobile-nav); background: #faf7ef;
        border-top: 1px solid #d5cbb7; box-shadow: 0 -3px 16px #5b503912;
    }
    .mobile-app-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 55px; color: #827664; font: 11px/1.3 'Microsoft YaHei', sans-serif; text-decoration: none; border-radius: 8px; }
    .mobile-app-nav svg { width: 22px; height: 22px; }
    .mobile-app-nav a[aria-current="page"] { color: #9e634f; background: #eee4d5; }
    .mobile-app-nav a:focus-visible { outline: 2px solid #496054; outline-offset: -2px; }
    .site-footer { padding: 24px 0 18px; background: #faf7ef; }
    .site-footer .footer-content { flex-direction: column; gap: 14px; text-align: center; }
    .site-footer .footer-info h3 { font-size: 16px; }
    .site-footer .footer-info p, .site-footer .footer-links a { font-size: 12px; }
    .site-footer .footer-links { justify-content: center; gap: 16px; }
    .site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .site-footer .copyright { font-size: 11px; padding-top: 14px; }
    .work-session-notice { top: 76px; right: 16px; }
    .new-artwork-button { min-height: 44px; font-size: 13px; padding: 8px 12px; }

    /* Home and illustrated introduction become a readable vertical journey. */
    .content-container, .page { min-height: 0; }
    #home .main-content.home-hero { height: auto; min-height: max(580px, calc(100svh - 132px)); }
    #home .home-background { background-position: 66% center; }
    #home .home-copy { display: flex; flex-direction: column; height: auto; padding: 34px 24px 38px; background: linear-gradient(90deg, #f5eddfed, #f5eddfb8 65%, #f5eddf38); }
    #home .chinese-text { position: static; font-size: clamp(36px, 10vw, 48px); line-height: 1.3; white-space: normal; }
    #home .english-text { position: static; width: 100%; max-width: 460px; margin-top: 30px; }
    #home .english-text p { font-size: 15px; line-height: 1.95; color: #705648; }
    #home .button-container { margin: 28px 0 0; }
    #home .button { width: 100%; max-width: 340px; min-height: 50px; font-size: 17px; }
    #understand.page { height: auto; min-height: 0; padding: 64px 20px 30px; overflow: visible; }
    #understand .understand-content { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 22px; height: auto; }
    #understand .understand-left { display: contents !important; }
    #understand .album-intro { order: 0; }
    #understand .understand-title { font-size: 28px !important; line-height: 1.5 !important; margin: 0; }
    #understand .understand-title br { display: none; }
    #understand .understand-right { order: 1; width: 100% !important; max-width: 540px; height: auto !important; min-height: 0 !important; margin: 0 !important; align-self: center; }
    #understand .album-description { order: 2; width: 100%; }
    #understand .album-description .scene-info { width: 100%; padding: 0 !important; }
    #understand .album-description .scene-title { font-size: 26px !important; white-space: normal; }
    #understand .album-description .scene-text { font-size: 15px !important; line-height: 1.9 !important; }
    #understand .album-description .flower-options { gap: 16px; flex-wrap: wrap; }
    #understand .album-description .flower-image { width: 112px; height: 120px; }
    #understand .album-description .artist-info { white-space: normal; font-size: 12px !important; }
    #understand .open-chapter { order: 3; position: static !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 50px !important; min-height: 50px !important; }
    #understand .back-button { top: 14px; left: 18px; width: 44px; height: 44px; }
    #understand .album-index { position: static !important; width: 100% !important; height: auto !important; margin: 12px 0 0 !important; transform: none !important; gap: 6px; }
    #understand .album-index .scene-button,
    #understand .album-index .scene-button:first-child { min-height: 44px !important; margin: 0 !important; font-size: 15px !important; background: #f7f0e3 !important; border: 1px solid #c7bca5 !important; border-radius: 4px; }
    #understand .album-index .scene-button span { color: #675a4c !important; }
    #understand .album-index .scene-button.active { background: #eee2ce !important; border-color: #9e634f !important; }

    /* Single scene image, short description and a full-width action. */
    .scene-chapter .scene-container { min-height: 0 !important; padding: 24px 24px 58px !important; }
    .scene-chapter .scene-content { display: flex !important; flex-direction: column; gap: 24px; padding: 0; width: 100%; }
    .scene-chapter .content-right { order: 0; width: 100%; }
    .scene-chapter .content-left { order: 1; width: 100%; text-align: left; padding: 0; }
    .scene-chapter .gallery-container { padding: 0; touch-action: pan-y; }
    .scene-chapter .gallery-item { flex: 0 0 100%; height: clamp(260px, 75vw, 410px); transform: none !important; }
    .scene-chapter .gallery-item.featured-item { transform: none !important; }
    .scene-chapter .name { font-size: 27px !important; margin: 0 0 14px; }
    .scene-chapter .des { font-size: 15px; line-height: 1.8; margin: 0 0 12px; }
    .scene-chapter .des-en { font-size: 11px; line-height: 1.6; margin: 0 0 20px; }
    .scene-chapter .see-more { width: 100%; min-height: 48px; margin: 0; }
    .scene-chapter .scene-nav-btn { top: calc(24px + clamp(260px, 75vw, 410px) / 2); width: 44px; height: 44px; }
    .scene-chapter .scene-nav-left { left: 4px; }
    .scene-chapter .scene-nav-right { right: 4px; }

    /* On a phone the desktop painted mounts are replaced by selectable cards. */
    .vase-chapter > main {
        display: flex !important; flex-direction: column !important; align-items: stretch !important;
        height: auto !important; min-height: 0 !important; padding: 20px 16px 28px !important;
        gap: 24px !important; overflow: visible !important; flex: 1 0 auto;
        background: #f5eddf var(--album-paper) repeat !important;
    }
    .vase-chapter .selector-container { order: 0; display: flex; flex-direction: column; width: 100% !important; height: auto !important; margin: 0 !important; }
    .vase-chapter .inner-circle { order: 0; position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; height: 200px !important; margin: 0 0 18px; border-radius: 8px; background: #e5e7d94d !important; }
    .vase-chapter .current-vase { width: 100% !important; height: 180px !important; }
    .vase-chapter .current-vase img { max-width: 170px; max-height: 170px; margin: auto; }
    .vase-chapter .outer-circle { order: 1; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; position: static !important; width: 100% !important; height: auto !important; flex: none !important; transform: none !important; }
    .vase-chapter .vase-button, .vase-chapter .vase-button:hover {
        position: static !important; inset: auto !important; transform: none !important;
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 100% !important; height: 92px !important; min-width: 0; margin: 0 !important; padding: 6px 3px;
        border: 1px solid #c7bca5; border-radius: 6px; background: #faf5e9; box-shadow: none !important;
    }
    .vase-chapter .vase-button.active { border: 2px solid #9e634f; background: #eee2ce; }
    .vase-chapter .vase-button img { width: 100%; height: 52px; object-fit: contain; }
    .vase-option-name { display: block; color: #675a4c; font: 11px/1.3 var(--album-font); text-align: center; }
    .vase-chapter .right-info { order: 1; position: static !important; display: flex !important; flex-direction: column; gap: 22px; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
    .vase-chapter .confirm-button-container { order: -1; position: static !important; inset: auto !important; width: 100% !important; height: 48px !important; margin: 0 !important; }
    .vase-chapter .confirm-button, .vase-chapter .confirm-button:hover, .vase-chapter .confirm-button.active:hover { min-height: 48px !important; border: 0 !important; border-radius: 4px !important; background: #496054 !important; color: #fffaf0 !important; font-size: 16px !important; }
    .vase-chapter .right-info .vase-info { margin: 0 !important; padding: 0 0 20px !important; }
    .vase-chapter .right-info .vase-info h2 { transform: none; min-height: 0 !important; margin: 0 0 14px !important; padding: 0 0 12px !important; border-bottom: 1px solid #c7bca5 !important; font-size: 26px !important; }
    .vase-chapter .vase-details { overflow: visible; padding: 0; }
    .vase-chapter .vase-details p, .vase-chapter .vase-taboos p { font-size: 14px !important; line-height: 1.9; }
    .vase-chapter .vase-taboos h3 { font-size: 22px; }
    .vase-chapter .left-info { order: 2; width: 100% !important; }
    .vase-chapter .left-info #seasonal-info { position: static !important; width: 100% !important; padding: 20px !important; border: 1px solid #c7bca5 !important; }
    .vase-chapter .left-info #seasonal-info h3 { position: static !important; margin-left: 0 !important; font-size: 22px !important; }
    .vase-chapter .left-info .seasonal-details p { font-size: 13px !important; }

    /* A stable touch workbench with three tabs and independently scrolling lists. */
    .flower-chapter > main.workbench { display: flex; flex-direction: column; width: 100%; height: calc(100svh - var(--mobile-header) - var(--mobile-nav) - env(safe-area-inset-bottom)) !important; min-height: 540px !important; margin: 0; flex: none; overflow: hidden; }
    .flower-chapter .mobile-sections { display: flex; position: static; flex: 0 0 48px; }
    .flower-chapter .mobile-tab { min-height: 48px; font-size: 15px; }
    .flower-chapter .bench-panel { display: none; min-height: 0; overflow: hidden; }
    .flower-chapter .bench-panel.mobile-active { display: flex; flex: 1; height: 0; min-height: 0; }
    .flower-chapter .panel-heading, .flower-chapter .stage-heading, .flower-chapter .summary-heading { min-height: 60px; padding: 10px 16px; flex-shrink: 0; align-items: center; }
    .flower-chapter .stage-heading h2 { font-size: 22px; }
    .flower-chapter .catalog-tools { padding: 12px 16px 0; flex-shrink: 0; }
    .flower-chapter .grade-list { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; gap: 4px; }
    .flower-chapter .grade-list button { min-height: 44px; padding: 8px 10px; flex: 0 0 auto; font-size: 13px; }
    .flower-chapter .search-wrap input, .flower-chapter .search-wrap button { min-height: 44px; }
    .flower-chapter .flower-grid { flex: 1; min-height: 0; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 18px 14px; overflow-y: auto; }
    .flower-chapter .flower-name-row { font-size: 15px; }
    .flower-chapter .flower-card summary { min-height: 36px; padding-top: 6px; font-size: 12px; }
    .flower-chapter .stage-surface { flex: 1; min-height: 0; container-type: size; }
    .flower-chapter .arrangement { width: min(94%, 94cqh); height: auto; aspect-ratio: 1; }
    .flower-chapter .refine-controls { flex-shrink: 0; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; min-height: 116px; }
    .flower-chapter #active-flower-name { flex: 1 0 100%; text-align: center; }
    .flower-chapter .refine-controls label { flex: 1 1 40%; min-height: 32px; justify-content: center; }
    .flower-chapter .refine-controls input { width: min(90px, 22vw); min-height: 32px; }
    .flower-chapter .refine-controls button { width: 44px; height: 36px; }
    .flower-chapter .summary-panel { padding: 0 16px 14px; }
    .flower-chapter .summary-scroll { flex: 1; min-height: 0; overflow-y: auto; }
    .flower-chapter .selected-list { min-height: 100px; overflow: visible; }
    .flower-chapter #finish-button { flex-shrink: 0; min-height: 48px; margin-top: 12px; }
    .flower-chapter .selected-row button { min-width: 44px; min-height: 44px; }
    .save-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); margin: auto; overflow: auto; padding: 24px; border-radius: 8px; }
    .save-dialog .dialog-close { min-width: 44px; min-height: 44px; right: -12px; top: -18px; }
    .save-dialog .finish-button { min-height: 48px; }

    .showcase-chapter > main.container { height: auto !important; min-height: 0 !important; padding: 20px 16px 30px; overflow: visible; flex: 1 0 auto; }
    .showcase-chapter .showcase-layout { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 26px; }
    .showcase-chapter .artwork-display { width: 100%; height: auto; margin: 0; }
    .showcase-chapter .artwork-image, .showcase-chapter .vase-container { height: clamp(340px, 108vw, 560px); }
    .showcase-chapter .saved-arrangement { width: 94%; }
    .showcase-chapter .review-section { height: auto; max-height: none; overflow: visible; }
    .showcase-chapter .review-container { padding: 20px 4px 0; min-height: 0; }
    .showcase-chapter .review-title { flex-wrap: wrap; font-size: 22px; }
    .showcase-chapter .review-text { font-size: 15px; }
    .showcase-chapter .interaction-buttons { justify-content: flex-start; }
    .showcase-chapter #comment-text { min-height: 90px; max-height: none; }
    .showcase-chapter .submit-btn { min-height: 44px; }
    .share-actions > button { flex: 1 1 auto; }
    .share-card-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 20px; border-radius: 8px; }
    .share-dialog-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .share-card-preview { width: min(100%, 280px); margin: auto; }
    .share-card-preview canvas { display: none; }
    #share-card-image:not([hidden]) { display: block; width: 100%; height: auto; }
    .share-card-settings label { font-size: 15px; }
    .share-card-settings input { min-height: 48px; margin-bottom: 18px; }
    #download-share-card { min-height: 48px; }
    .share-card-settings .share-hint { font-size: 12px; }
    #native-share-card { margin-top: 10px; }
}
@media (max-width: 359px) {
    .vase-chapter .outer-circle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flower-chapter .stage-heading { padding-inline: 10px; }
    .flower-chapter .stage-heading h2 { font-size: 19px; }
}