/* AlexBrush：票根标题右侧“城市 + 省份”拼音使用的手写英文字体 */
        @font-face {
            font-family: "AlexBrush";
            src: local("AlexBrush"), local("Alex Brush"),
                 url("../font/AlexBrush-Regular.ttf") format("truetype");
            font-style: normal;
            font-weight: 400;
            font-display: swap;
        }

        /* 2. 设置地球容器的样式，使其占满全屏（仅 3D 模式生效，避免污染 2D 高德页面） */
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body.mode-3d,
        body.mode-3d #view-3d,
        body.mode-3d #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        /* 光标反馈：地球可以拖着转（开手），按住时是「抓取中」；
           悬停到标记上时由 JS 覆盖成 pointer（手型），提示这里能点。
           内联样式优先级更高，所以 JS 只在标记 / 拖拽状态下覆盖这里的默认值。 */
        body.mode-3d #cesiumContainer canvas {
            cursor: grab;
        }
        body.mode-3d #cesiumContainer canvas:active {
            cursor: grabbing;
        }

        /* 视图层级：3D 在上（交叉淡化时覆盖下方的高德页），2D 在下 */
        #view-3d {
            position: relative;
            z-index: 2;
        }
        #view-2d {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
        }
        /* 2D 模式：隐藏顶部导航栏，切换按钮改到高德页底部控制栏（#back3dBtn） */
        body.mode-2d #topNav {
            display: none;
        }

        /* ============ 顶部导航栏（报头式极简） ============
           结构：左侧双语字标（行楷中文 + 字距拉宽的英文），
           右侧按“主操作 + 探索工具”分组；探索工具在放大/窄屏时
           收进“工具”菜单，底图选项收进自身下拉。
           状态用白色文字 + 细下划线表达；导航本身无卡片容器。 */
        #topNav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            height: 64px;
            padding: 0 28px;
            box-sizing: border-box;
            background: linear-gradient(180deg, rgba(5, 7, 12, 0.85), rgba(5, 7, 12, 0.45) 72%, transparent);
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            user-select: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.6s ease, visibility 0.6s;
        }
        #topNav.visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .nav-brand {
            display: flex;
            align-items: center;
            gap: 14px;
            white-space: nowrap;
        }
        .nav-brand-zh {
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-size: 22px;
            letter-spacing: 0.1em;
            color: #f7f5f1;
            text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
        }
        .nav-brand-sep {
            width: 1px;
            height: 18px;
            background: rgba(247, 245, 241, 0.18);
        }
        .nav-brand-en {
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: rgba(247, 245, 241, 0.5);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-wrap: wrap;
        }
        .nav-sep {
            width: 1px;
            height: 16px;
            margin: 0 10px;
            background: rgba(247, 245, 241, 0.16);
        }

        /* 导航按钮：无底色，白色 + 细下划线表示状态 */
        #topNav button {
            appearance: none;
            border: 0;
            background: transparent;
            padding: 9px 14px;
            font: 13px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            white-space: nowrap;
            color: rgba(247, 245, 241, 0.78);
            cursor: pointer;
            position: relative;
            transition: color 0.18s ease;
        }
        #topNav button::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 5px;
            height: 1px;
            background: currentColor;
            opacity: 0;
            transform: scaleX(0.5);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        #topNav button:hover:not(:disabled) {
            color: #ffffff;
        }
        #topNav button:hover:not(:disabled)::after {
            opacity: 0.8;
            transform: scaleX(1);
        }
        #topNav button.active {
            color: #ffffff;
        }
        #topNav button.active::after {
            opacity: 1;
            transform: scaleX(1);
        }
        #topNav button:disabled {
            opacity: 0.32;
            cursor: default;
        }
        #topNav button:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }

        /* 视角按钮：当前模式指示，始终加亮 */
        #topNav #sceneModeBtn {
            color: #ffffff;
            font-weight: 600;
        }

        /* 底图下拉菜单 */
        .nav-menu {
            position: relative;
        }
        .nav-menu > button {
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .nav-chev {
            opacity: 0.7;
            transition: transform 0.2s ease;
        }
        .nav-menu.open .nav-chev {
            transform: rotate(180deg);
        }
        #layerButtons.nav-menu-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 212px;
            padding: 6px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(8, 10, 16, 0.9);
            backdrop-filter: blur(18px) saturate(140%);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            gap: 2px;
            animation: navPanelIn 0.18s ease;
        }
        #layerButtons.nav-menu-panel[hidden] {
            display: none;
        }
        @keyframes navPanelIn {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        #layerButtons.nav-menu-panel button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            padding: 9px 12px;
            border-radius: 8px;
            letter-spacing: 0.02em;
        }
        #layerButtons.nav-menu-panel button::after {
            content: none;
            position: static;
            transform: none;
            background: none;
            opacity: 1;
            margin-left: 12px;
            font-size: 12px;
            line-height: 1;
        }
        #layerButtons.nav-menu-panel button:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.08);
        }
        #layerButtons.nav-menu-panel button.active {
            background: rgba(255, 255, 255, 0.06);
        }
        #layerButtons.nav-menu-panel button.active::after {
            content: "✓";
        }

        @media (prefers-reduced-motion: reduce) {
            #topNav {
                transition: none;
            }
            #topNav button,
            #topNav button::after,
            .nav-chev {
                transition: none;
            }
            #layerButtons.nav-menu-panel {
                animation: none;
            }
        }

        /* 窄屏：报头自动换行，英文小字隐藏 */
        @media (max-width: 820px) {
            #topNav {
                flex-wrap: wrap;
                height: auto;
                padding: 10px 16px;
                gap: 8px;
            }
            .nav-brand-zh {
                font-size: 18px;
            }
            .nav-brand-sep,
            .nav-brand-en {
                display: none;
            }
        }

        /* ============ 顶部导航（分组 + 紧凑模式） ============
           主操作（2D 地图 / 票根 / 回到整球）常驻；探索类工具在整球
           视图平铺展示，放大进入紧凑模式或窄屏时收进“工具”弹出菜单。 */
        #topNav .nav-actions {
            position: relative;
            flex-wrap: nowrap;
        }
        #topNav .nav-group {
            display: flex;
            align-items: center;
            gap: 2px;
            min-width: 0;
        }
        #navMoreBtn,
        #navBackGlobeBtn {
            display: none;
            align-items: center;
            gap: 6px;
        }
        .nav-sep-back {
            display: none;
        }
        #terrainBtn[hidden] ~ .nav-sep-tools { display: none; }

        /* 放大模式（3D 看不到整球）：导航保持可见，追加“回到整球”入口；
           PC 端工具仍平铺展示，窄屏才收进“工具”菜单 */
        body.nav-zoom #navBackGlobeBtn { display: inline-flex; }
        body.nav-zoom .nav-sep-back { display: inline-block; }
        body.nav-zoom #backGlobeBtn.show,
        body.nav-zoom #cityFillFloatBtn.show { display: none; }

        /* “工具”弹出菜单 */
        #topNav.tools-open .nav-group-more {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 200px;
            max-width: calc(100vw - 32px);
            padding: 7px;
            gap: 2px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
            background: rgba(7, 13, 25, 0.94);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            z-index: 10001;
            animation: navPanelIn 0.18s ease;
        }
        #topNav.tools-open #navMoreBtn .nav-chev {
            transform: rotate(180deg);
        }
        #topNav.tools-open .nav-group-more > button {
            width: 100%;
            justify-content: flex-start;
            text-align: left;
            border-radius: 8px;
            padding: 9px 12px;
        }
        #topNav.tools-open .nav-group-more > button::after,
        #topNav.tools-open .nav-group-more .nav-sep { display: none; }
        #topNav.tools-open .nav-group-more > button:hover:not(:disabled),
        #topNav.tools-open .nav-group-more > button[aria-pressed="true"] {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }
        #topNav.tools-open .nav-group-more .nav-menu { width: 100%; }
        #topNav.tools-open #layerButtons.nav-menu-panel {
            position: static;
            min-width: 0;
            width: 100%;
            margin: 2px 0 0;
            padding: 2px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            animation: none;
        }
        #topNav.tools-open #layerButtons.nav-menu-panel button { width: 100%; }

        /* 窄屏：无论是否放大，都收成 主入口 + 工具 的紧凑布局 */
        @media (max-width: 820px) {
            #topNav .nav-brand { display: none; }
            #topNav .nav-actions {
                max-width: 100%;
                gap: 6px;
                margin-left: auto;
            }
            #topNav .nav-group-more { display: none; }
            #navMoreBtn { display: inline-flex; }
            .nav-sep-back { display: none; }
        }
        @media (max-width: 520px) {
            #topNav .nav-group-primary button,
            #topNav #navMoreBtn {
                padding: 8px 8px;
                font-size: 12px;
                letter-spacing: 0.02em;
            }
            #topNav .nav-group-primary { gap: 0; }
        }

        /* 左下角状态/版权提示 */
        #status {
            position: fixed;
            left: 12px;
            bottom: 12px;
            z-index: 9999;
            padding: 6px 12px;
            font: 13px/1.6 "Microsoft YaHei", sans-serif;
            color: #fff;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 6px;
            pointer-events: none;
            max-width: 70vw;
        }
        #statusRetry {
            pointer-events: auto;
            margin-left: 10px;
            padding: 3px 12px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 999px;
            background: transparent;
            color: #ffffff;
            font: 12px/1.4 "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        #statusRetry:hover {
            background: rgba(255, 255, 255, 0.18);
        }
        #statusRetry:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }

        /* 右下角浮动按钮：纯图标、圆形、单色极简，3D 放大后显示 */
        #backGlobeBtn,
        #cityFillFloatBtn {
            position: fixed;
            right: 24px;
            z-index: 9998;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(247, 245, 241, 0.28);
            background: rgba(5, 7, 12, 0.5);
            color: rgba(247, 245, 241, 0.82);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: opacity 0.35s ease, visibility 0.35s, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #backGlobeBtn {
            bottom: 24px;
        }
        #cityFillFloatBtn {
            bottom: 70px;
        }
        #backGlobeBtn svg,
        #cityFillFloatBtn svg {
            width: 17px;
            height: 17px;
        }
        #backGlobeBtn.show,
        #cityFillFloatBtn.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        #cityFillFloatBtn.active {
            background: #f7f5f1;
            border-color: #f7f5f1;
            color: #0b0e14;
        }
        #backGlobeBtn:hover,
        #cityFillFloatBtn:hover {
            background: #f7f5f1;
            border-color: #f7f5f1;
            color: #0b0e14;
        }
        #backGlobeBtn:focus-visible,
        #cityFillFloatBtn:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }

        /* 详情卡打开时，右下角浮动按钮让位，避免遮挡卡片 */
        body.card-open #backGlobeBtn.show,
        body.card-open #cityFillFloatBtn.show {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* 标记键盘按钮：默认屏幕外，聚焦时在左下角显示 */
        .marker-focus-btn {
            position: fixed;
            left: -10000px;
            top: 0;
        }
        .marker-focus-btn:focus-visible {
            left: 12px;
            top: auto;
            bottom: 48px;
            padding: 8px 14px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.92);
            color: #f7f5f1;
            font: 13px "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            z-index: 9999;
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }

        /* 照片环打开期间，标记键盘按钮继续"屏幕外待命"：
           它被程序化聚焦过（键盘开卡 → 关卡的焦点还原）时，只要用户再按一个键
           （比如照片环里翻图的 ← / →），:focus-visible 就会生效，
           左下角会冒出一个"查看xx足迹详情"盖在照片上。 */
        body.photo-ring-open .marker-focus-btn:focus-visible {
            left: -10000px;
            top: 0;
            bottom: auto;
        }

        /* 悬停名称：标注式引导线（名称在标记右侧，细线连接），无背景 */
        #markerTip {
            position: fixed;
            z-index: 9997;
            pointer-events: none;
            display: flex;
            align-items: center;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 13px;
            letter-spacing: 0.12em;
            color: rgba(255, 255, 255, 0.98);
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.8),
                0 0 10px rgba(0, 0, 0, 0.45),
                0 0 2px rgba(0, 0, 0, 0.9);
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-50%);
            transition: opacity 0.15s ease, visibility 0.15s;
        }
        #markerTip.show {
            opacity: 1;
            visibility: visible;
        }
        .marker-tip-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: scale(0);
            transition: opacity 0.18s ease 0.1s, transform 0.18s ease 0.1s;
        }
        #markerTip.show .marker-tip-dot {
            opacity: 1;
            transform: scale(1);
        }
        .marker-tip-line {
            width: 16px;
            height: 1px;
            background: rgba(247, 245, 241, 0.55);
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
            transform-origin: left center;
            transform: scaleX(0);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #markerTip.show .marker-tip-line {
            transform: scaleX(1);
        }
        .marker-tip-name {
            padding-left: 7px;
            opacity: 0;
            transform: translateX(-3px);
            transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
        }
        #markerTip.show .marker-tip-name {
            opacity: 1;
            transform: translateX(0);
        }

        /* 靠近屏幕右缘时镜像到标记左侧 */
        #markerTip.left {
            flex-direction: row-reverse;
        }
        #markerTip.left .marker-tip-line {
            transform-origin: right center;
        }
        #markerTip.left .marker-tip-name {
            padding-left: 0;
            padding-right: 7px;
            transform: translateX(3px);
        }
        #markerTip.left.show .marker-tip-name {
            transform: translateX(0);
        }

        @media (prefers-reduced-motion: reduce) {
            #backGlobeBtn {
                transition: none;
            }
            #cityFillFloatBtn {
                transition: none;
            }
            #markerTip {
                transition: none;
            }
            #markerTip .marker-tip-line,
            #markerTip .marker-tip-name,
            #markerTip .marker-tip-dot {
                transition: none;
            }
        }

        /* ============ 左侧标题卡（整合自 left-intro） ============
           仅 3D 整球视图显示；深色锁定、单色系、行楷标题；
           入场动画只在 .visible 时播放，每次显示都会重放 */
        #pageIntro {
            position: fixed;
            left: 7%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9998;
            width: min(520px, 42vw);
            color: #f7f5f1;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 32px rgba(0, 0, 0, 0.45);
            pointer-events: none;          /* 不挡地图交互 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.7s ease, visibility 0.7s;
        }
        #pageIntro.visible {
            opacity: 1;
            visibility: visible;
        }

        /* 入场动画：元素默认隐藏，仅在本卡 visible 时播放 */
        #pageIntro .intro-eyebrow,
        #pageIntro .intro-title,
        #pageIntro .intro-desc,
        #pageIntro .intro-stat,
        #pageIntro .intro-hint {
            opacity: 0;
        }
        #pageIntro.visible .intro-eyebrow {
            animation: introFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
        }
        #pageIntro.visible .intro-title {
            animation: introRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
        }
        #pageIntro.visible .intro-desc {
            animation: introFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
        }
        #pageIntro.visible .intro-stat {
            animation: statRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
        }
        #pageIntro.visible .intro-stat + .intro-stat {
            animation-delay: 1.42s;          /* 两个数字错峰入场 */
        }
        #pageIntro.visible .intro-hint {
            animation: introFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.55s forwards,
                       hintBreathe 4s ease-in-out 2.4s infinite;
        }

        /* 英文小标题 */
        #pageIntro .intro-eyebrow {
            margin: 0;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.55em;
            text-indent: 0.55em;             /* 抵消末字字距，视觉对齐 */
            color: rgba(244, 240, 230, 0.62);
        }
        /* 主标题：行楷书法体 */
        #pageIntro .intro-title {
            margin: 24px 0 0;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", "FangSong", "仿宋", serif;
            font-weight: 400;                /* 行楷无粗体，避免合成假粗体 */
            font-size: clamp(70px, 8vw, 88px);
            letter-spacing: 0.06em;
            line-height: 1.15;
        }
        /* 描述文字 */
        #pageIntro .intro-desc {
            margin: 40px 0 0;
            max-width: 26em;
            font-size: 17px;
            line-height: 1.8;
            color: rgba(247, 245, 241, 0.72);
        }
        /* 数据统计：顶部一条稀疏分隔线 */
        #pageIntro .intro-stats {
            display: flex;
            gap: 64px;
            width: fit-content;
            margin-top: 44px;
            padding-top: 24px;
            border-top: 1px solid rgba(247, 245, 241, 0.14);
        }
        #pageIntro .intro-stat {
            display: flex;
            flex-direction: column;
        }
        #pageIntro .intro-num {
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", "FangSong", "仿宋", serif;
            font-weight: 400;                /* 行楷无粗体 */
            font-size: 52px;
            line-height: 1;
            letter-spacing: 0.02em;
        }
        #pageIntro .intro-label {
            margin-top: 10px;
            font-size: 13px;
            letter-spacing: 0.18em;
            color: rgba(247, 245, 241, 0.5);
        }
        /* 底部提示 */
        #pageIntro .intro-hint {
            margin: 48px 0 0;
            font-size: 13px;
            letter-spacing: 0.12em;
            color: rgba(247, 245, 241, 0.5);
        }

        /* 移动端：标题卡收拢到左上角并缩小字号，避免遮挡地球主体 */
        @media (max-width: 820px) {
            #pageIntro {
                left: 18px;
                top: 112px;
                transform: none;
                width: min(320px, calc(100vw - 36px));
            }
            #pageIntro .intro-eyebrow {
                font-size: 10px;
                letter-spacing: 0.42em;
                text-indent: 0.42em;
            }
            #pageIntro .intro-title {
                margin-top: 14px;
                font-size: clamp(36px, 11vw, 52px);
                letter-spacing: 0.05em;
            }
            #pageIntro .intro-desc {
                margin-top: 18px;
                max-width: 24em;
                font-size: 14px;
                line-height: 1.7;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            #pageIntro .intro-stats {
                gap: 26px;
                margin-top: 22px;
                padding-top: 16px;
            }
            #pageIntro .intro-num { font-size: 32px; }
            #pageIntro .intro-label { margin-top: 6px; font-size: 12px; }
            #pageIntro .intro-hint { margin-top: 22px; font-size: 12px; }
        }

        @keyframes introFade {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes introRise {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes statRise {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes hintBreathe {
            0%, 100% { opacity: 0.5; }
            50%      { opacity: 0.92; }
        }

        @media (prefers-reduced-motion: reduce) {
            #pageIntro {
                transition: none;
            }
            #pageIntro .intro-eyebrow,
            #pageIntro .intro-title,
            #pageIntro .intro-desc,
            #pageIntro .intro-stat,
            #pageIntro .intro-hint {
                opacity: 1;
                animation: none;
            }
        }

        /* ============ 足迹详情卡（右侧，点击标记后显示） ============ */
        /* ============ 地图浮层卡：共同骨架 ============
           足迹卡（单条记录）与城市卡（聚合容器）共用定位、圆角、入场过渡与操作语言，
           层级差异交给各自的版式与材质表达：城市卡是深色玻璃「容器」，足迹卡是纸面「凭证」。
           尺寸与材质只在这里和各自的分节里改，避免两张卡各写一份、慢慢漂移。 */
        #markerCard,
        #cityCard {
            /* 入场方向：--card-enter-* 是起点偏移，--card-origin-* 是缩放原点。
               默认「从右侧滑入」是容器卡的侧边语义；足迹卡开卡前由 JS 按被点标记的位置覆盖这组变量。 */
            --card-enter-x: 28px;
            --card-enter-y: 0px;
            --card-enter-scale: 0.97;
            --card-origin-x: 50%;
            --card-origin-y: 50%;
            position: fixed;
            right: 4.5%;
            top: 50%;
            z-index: 9997;
            overflow: hidden;
            border-radius: 16px;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform-origin: var(--card-origin-x) var(--card-origin-y);
            transform: translateY(-50%) translate(var(--card-enter-x), var(--card-enter-y)) scale(var(--card-enter-scale));
            transition: opacity 0.45s ease, visibility 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #markerCard.visible,
        #cityCard.visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(-50%) translate(0, 0) scale(1);
        }
        /* 标题统一行楷；城市名（容器）比足迹名（条目）大一档，层级一眼可辨 */
        #markerCard h2,
        #cityCard h2 {
            margin: 0;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-weight: 400;
            line-height: 1.15;
        }
        /* 操作语言统一：主操作实心胶囊、次要操作描边胶囊；材质不同但操作一致。
           颜色全部走 --btn-* 变量，由每张卡注入，基类不再和具体按钮抢优先级。 */
        #markerCard .marker-card-actions button,
        #cityCard .city-card-actions button {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 32px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid var(--btn-border, transparent);
            background: var(--btn-bg, transparent);
            color: var(--btn-fg, inherit);
            font: 12px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #markerCard .marker-card-actions button:hover,
        #cityCard .city-card-actions button:hover {
            background: var(--btn-bg-hover, transparent);
            border-color: var(--btn-border-hover, transparent);
            color: var(--btn-fg-hover, inherit);
        }
        #markerCard .marker-card-actions button.is-primary,
        #cityCard .city-card-actions button.is-primary {
            background: var(--btn-primary-bg);
            border-color: var(--btn-primary-bg);
            color: var(--btn-primary-fg);
        }
        #markerCard .marker-card-actions button.is-primary:hover,
        #cityCard .city-card-actions button.is-primary:hover {
            background: var(--btn-primary-bg-hover);
            border-color: var(--btn-primary-bg-hover);
            color: var(--btn-primary-fg);
        }

        /* ============ 足迹卡：条目层 = 深色卡纸票据 ============
           底色走中性深色（和城市卡的玻璃同一个明度家族），区分交给版式与细节：
           横向统计 / 纵向票据、半透明玻璃 / 不透明卡纸、印章撕口 / 数字三联。
           琥珀只做点缀（印章、撕口、主操作），不再用来染整块底 ——
           同色系叠同色系（琥珀压暖棕）会糊成一片，而且暖棕放在深蓝黑的地球上会发闷。 */
        #markerCard {
            /* 卡纸材质与墨色层级（对比度按 WCAG 相对亮度算，见注释） */
            --paper-bg: #15161a;                           /* 中性深色卡纸 */
            --paper-media: #0d0e12;
            --paper-ink: #f4ece0;                          /* 与全站奶油墨同族：标题 15.4:1 */
            --paper-ink-soft: rgba(244, 236, 224, 0.8);    /* 正文 约 10:1 */
            --paper-ink-faint: rgba(244, 236, 224, 0.62);  /* 次级信息 / 眉标 约 6.6:1 */
            --paper-line: rgba(247, 245, 241, 0.14);       /* 分隔线：中性 */
            --paper-line-strong: rgba(216, 174, 120, 0.3); /* 撕口虚线：留一点暖，当票据线索 */
            --paper-accent: #d8ae78;
            --btn-fg: rgba(244, 236, 224, 0.76);
            --btn-border: rgba(216, 174, 120, 0.3);
            --btn-bg-hover: rgba(216, 174, 120, 0.12);
            --btn-border-hover: rgba(216, 174, 120, 0.52);
            --btn-fg-hover: #f4ece0;
            /* 主操作沿用琥珀（和标记、引导线同色）；城市卡的主操作是奶油实底 */
            --btn-primary-bg: #d8ae78;
            --btn-primary-bg-hover: #e2bc8c;
            --btn-primary-fg: #241d14;
            width: min(336px, 30vw);
            color: var(--paper-ink);
            /* 不透明卡纸：读起来是一件实体物件，也顺带省掉一层毛玻璃开销 */
            background: var(--paper-bg);
            border: 1px solid rgba(247, 245, 241, 0.16);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52);
        }
        .marker-card-media {
            position: relative;
            height: auto;
            aspect-ratio: 3 / 2;   /* 主图比例：比 16:9 更饱满，不再扁长 */
            background-color: var(--paper-media);   /* 图片未就绪时的卡纸底，避免闪一下 */
            background-size: cover;
            background-position: center;
        }
        .marker-card-media.no-image {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            background: linear-gradient(160deg, rgba(247, 245, 241, 0.06), rgba(247, 245, 241, 0)), var(--paper-media);
        }
        .marker-card-monogram {
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-size: 76px;
            line-height: 1;
            color: rgba(244, 236, 224, 0.34);   /* 76px 大字也要过 3:1，同时保持是「底纹」 */
        }
        .marker-card-retry {
            padding: 5px 14px;
            border: 1px solid var(--paper-line-strong);
            border-radius: 999px;
            background: transparent;
            color: var(--paper-ink-soft);
            font: 12px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .marker-card-retry:hover {
            background: var(--paper-accent);
            border-color: var(--paper-accent);
            color: var(--btn-primary-fg);
        }
        .marker-card-body {
            position: relative;
            padding: 15px 18px 17px;
            /* 纸票据的撕口：图片与票面之间一条虚线 */
            border-top: 1px dashed var(--paper-line-strong);
        }
        .marker-card-eyebrow {
            margin: 0;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--paper-ink-faint);   /* 深色卡纸上 10px 小字也能过 AA（约 6:1） */
        }
        .marker-card-title {
            margin: 8px 0 0;
            font-size: 26px;
            letter-spacing: 0.05em;
        }
        .marker-card-addr {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 9px 0 0;
            font-size: 12px;
            letter-spacing: 0.06em;
            color: var(--paper-ink-faint);
        }
        /* 地址前的定位图标：跟随文字颜色与基线，不参与缩放 */
        .marker-card-addr-icon {
            flex: none;
            opacity: 0.9;
        }
        /* display:flex 会压过 UA 的 [hidden]{display:none}，没有地址时这里兜底 */
        .marker-card-addr[hidden] {
            display: none;
        }
        .marker-card-desc {
            margin: 12px 0 0;
            max-width: 30em;
            font-size: 14px;
            line-height: 1.8;
            color: var(--paper-ink-soft);
        }
        .marker-card-meta {
            margin: 10px 0 0;
            font-size: 11px;
            letter-spacing: 0.08em;
            color: var(--paper-ink-faint);
        }
        .marker-card-actions {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 14px;
            padding-top: 13px;
            border-top: 1px solid var(--paper-line);
        }
        .marker-card-actions[hidden] { display: none; }
        #markerCardTicket[hidden],
        #markerCardGallery[hidden] {
            display: none !important;
        }
        #markerCardGallery svg {
            width: 13px;
            height: 13px;
            flex: none;
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }
        #markerCardGallery:hover svg {
            opacity: 1;
        }
        #markerCardTicket:focus-visible,
        #markerCardGallery:focus-visible {
            outline: 2px solid var(--paper-accent);
            outline-offset: 2px;
        }
        #markerCard .marker-card-actions button.is-primary svg { opacity: 0.85; }

        /* 眉标与日期印章同一行：印章是「纸票据」最直接的识别符号，也是城市卡没有的元素 */
        .marker-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .marker-card-stamp {
            flex: none;
            padding: 3px 8px 2px;
            border: 1px solid rgba(216, 174, 120, 0.55);
            border-radius: 3px;
            background: rgba(216, 174, 120, 0.12);
            color: var(--paper-accent);   /* 琥珀墨 8:1 */
            font: 11px/1.35 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.12em;
            white-space: nowrap;
            transform: rotate(-3deg);
        }
        .marker-card-stamp[hidden] { display: none; }

        /* 详情卡内容分段入场：图片 → 标题 → 信息 → 正文 → 操作 */
        .marker-card-media,
        .marker-card-eyebrow,
        .marker-card-title,
        .marker-card-meta,
        .marker-card-addr,
        .marker-card-desc,
        .marker-card-actions {
            opacity: 1;               /* 基础可见：关闭淡出时内容跟随容器 */
        }
        #markerCard.visible .marker-card-media {
            animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
        }
        #markerCard.visible .marker-card-eyebrow {
            animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
        }
        #markerCard.visible .marker-card-title {
            animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
        }
        #markerCard.visible .marker-card-meta {
            animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
        }
        #markerCard.visible .marker-card-addr {
            animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
        }
        #markerCard.visible .marker-card-desc {
            animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
        }
        #markerCard.visible .marker-card-actions {
            animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
        }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        #markerCardClose {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 关闭按钮压在照片上：加一层柔和底衬，任何明暗的照片上都看得清 */
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 999px;
            background: rgba(28, 21, 12, 0.44);
            color: rgba(255, 252, 246, 0.94);
            font: 300 20px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }
        #markerCardClose:hover {
            background: rgba(28, 21, 12, 0.72);
            color: #fffdf7;
        }
        #markerCardClose:focus-visible {
            outline: 2px solid var(--paper-accent);
            outline-offset: 2px;
        }
        @media (prefers-reduced-motion: reduce) {
            #markerCard {
                transition: none;
            }
            #markerCard .marker-card-media,
            #markerCard .marker-card-eyebrow,
            #markerCard .marker-card-title,
            #markerCard .marker-card-meta,
            #markerCard .marker-card-addr,
            #markerCard .marker-card-desc,
            #markerCard .marker-card-actions {
                animation: none;
            }
        }
        @media (max-width: 820px) {
            #markerCard {
                right: 12px;
                left: 12px;
                width: auto;
                top: auto;
                bottom: 12px;
                /* 窄屏是底部抽屉：保留向上的位移，水平方向仍交给标记方向 */
                transform: translateY(16px) translateX(var(--card-enter-x)) scale(var(--card-enter-scale));
            }
            #markerCard.visible {
                transform: translateY(0) translateX(0) scale(1);
            }
            .marker-card-media {
                aspect-ratio: 16 / 10;   /* 窄屏底部抽屉保持紧凑 */
            }
        }

        /* ============ 城市卡：容器层 = 深色玻璃统计面板 ============
           横向版式 + 数字统计，和纵向的足迹卡形成「容器 / 条目」的层级对比：
           这个城市里有多少足迹、多少照片，一眼可读。
           玻璃后面可能是纯黑太空，也可能是亮色底图 —— 底色不透明度和小字 alpha
           都按「最亮底图」兜底，保证两种极端下小字仍过 AA（实测最差约 5:1）。 */
        #cityCard {
            --glass-bg: rgba(6, 8, 14, 0.72);
            --glass-ink-soft: rgba(247, 245, 241, 0.8);    /* 次级信息 */
            --glass-ink-faint: rgba(247, 245, 241, 0.74);  /* 眉标 / 统计标签 */
            --btn-fg: rgba(247, 245, 241, 0.76);
            --btn-border: rgba(247, 245, 241, 0.26);
            --btn-bg-hover: rgba(247, 245, 241, 0.1);
            --btn-border-hover: rgba(247, 245, 241, 0.5);
            --btn-fg-hover: #f7f5f1;
            /* 主操作「进入城市」：亮底深字，和次要操作拉开一档 */
            --btn-primary-bg: rgba(247, 245, 241, 0.94);
            --btn-primary-bg-hover: #f7f5f1;
            --btn-primary-fg: #0b0e14;
            display: grid;
            grid-template-columns: 38% minmax(0, 1fr);   /* 图片带再宽一点，纵向裁切不那么狠 */
            width: min(410px, 37vw);
            color: #f7f5f1;
            background: var(--glass-bg);
            border: 1px solid rgba(247, 245, 241, 0.14);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .city-card-media {
            grid-area: 1 / 1 / 2 / 2;
            position: relative;
            min-height: 100%;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(8, 10, 16, 0.8));
            background-size: cover;
            background-position: center;
            /* 图和信息的交界给一条很淡的分隔，横向版式才立得住 */
            border-right: 1px solid rgba(247, 245, 241, 0.08);
        }
        /* ============ 卡片封面：首字常驻做底，图片加载成功后淡入盖上去 ============
           加载慢或加载失败都只是"还没盖上"，所以永远不会出现空白，
           也不会有"先空着再突然出现"的跳动。小城市卡与城市卡共用这套结构。 */
        .card-cover-monogram {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(247, 245, 241, 0.8);
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            line-height: 1;
            pointer-events: none;
        }
        #cityCard .card-cover-monogram { font-size: 44px; }
        .prop-card-media .card-cover-monogram { font-size: 30px; }
        .card-cover-photo {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }
        .card-cover-photo.is-loaded { opacity: 1; }
        .city-card-body {
            grid-area: 1 / 2 / 2 / 3;
            padding: 15px 17px 16px;
        }
        .city-card-eyebrow {
            margin: 0;
            color: var(--glass-ink-faint);
            font-size: 10px;
            letter-spacing: 0.36em;
            text-transform: uppercase;
        }
        /* 城市名比足迹名大一档：容器 > 条目 */
        .city-card-title {
            margin: 8px 0 0;
            font-size: 30px;
            letter-spacing: 0.03em;
        }
        /* 数字统计：等宽数字保证不同城市之间纵向对齐 */
        .city-card-stats {
            display: grid;
            grid-template-columns: auto auto;
            justify-content: start;
            align-items: flex-end;
            gap: 4px 26px;
            margin-top: 11px;
            padding-top: 10px;
            border-top: 1px solid rgba(247, 245, 241, 0.13);
        }
        .city-card-stat {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .city-card-stat b {
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.02em;
            font-variant-numeric: tabular-nums;
        }
        .city-card-stat span {
            font-size: 10px;
            letter-spacing: 0.18em;
            color: var(--glass-ink-faint);
        }
        .city-card-desc {
            margin: 10px 0 0;
            color: var(--glass-ink-soft);
            font-size: 12px;
            line-height: 1.6;
        }
        .city-card-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 13px;
            padding-top: 12px;
            border-top: 1px solid rgba(247, 245, 241, 0.13);
        }
        #cityCardGallery svg {
            width: 13px;
            height: 13px;
            flex: none;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }
        #cityCardGallery:hover svg { opacity: 1; }
        #cityCardGallery:focus-visible,
        #cityCardLocate:focus-visible {
            outline: 1px solid rgba(247, 245, 241, 0.66);
            outline-offset: 2px;
        }
        #cityCardClose {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(247, 245, 241, 0.2);
            border-radius: 999px;
            background: rgba(5, 7, 12, 0.42);
            color: rgba(247, 245, 241, 0.85);
            font: 300 20px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        #cityCardClose:hover { background: rgba(5, 7, 12, 0.72); color: #f7f5f1; }
        #cityCardClose:focus-visible { outline: 1px solid rgba(247, 245, 241, 0.66); outline-offset: 2px; }
        @media (prefers-reduced-motion: reduce) {
            #cityCard { transition: none; }
        }
        /* 窄屏：横向容器改回纵向，统计仍然保留 */
        @media (max-width: 820px) {
            #cityCard {
                display: block;
                right: 12px;
                left: 12px;
                width: auto;
                top: auto;
                bottom: 12px;
                transform: translateY(16px) translateX(var(--card-enter-x)) scale(var(--card-enter-scale));
            }
            #cityCard.visible { transform: translateY(0) translateX(0) scale(1); }
            .city-card-media { aspect-ratio: 16 / 10; min-height: 0; }
            .city-card-body { padding: 14px 16px 15px; }
        }
        /* 足迹点展开后，移动端把城市卡收成紧凑条，避免遮挡城市点位 */
        @media (max-width: 820px) {
            #cityCard.is-revealed .city-card-media,
            #cityCard.is-revealed .city-card-eyebrow,
            #cityCard.is-revealed .city-card-desc {
                display: none;
            }
            #cityCard.is-revealed .city-card-body { padding: 12px 14px 13px; }
            #cityCard.is-revealed .city-card-title { font-size: 25px; margin-top: 2px; }
            #cityCard.is-revealed .city-card-stats { margin-top: 8px; }
            #cityCard.is-revealed .city-card-actions { margin-top: 11px; }
        }

        /* ============ 省份城市卡片（点击 3D 地球上的省份后展示） ============
           每个有足迹的城市一张小卡片，从该城市的聚合标记拉一条青蓝抛物线连到卡片。
           连线画在屏幕空间的 SVG 覆盖层上（卡片是 DOM，三维折线够不到卡片边缘），
           层级：地球 canvas < 连线 < 省名标签 < 卡片 < 导航栏。
           仅桌面端生效，窄屏由 JS 与下方媒体查询一起关闭。 */
        #leaderOverlay {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: visible;
            pointer-events: none;
        }
        .prop-leader {
            fill: none;
            stroke-width: 1.6;
            stroke-linecap: round;
            transition: stroke-width 0.15s ease;
        }
        .prop-leader-base {
            fill: none;
            /* 只作为浅色底图上的保底：压到 0.42 就没有"铅笔描边"的脏感了 */
            stroke: rgba(8, 12, 20, 0.42);
            stroke-width: 2.8;
            stroke-linecap: round;
            transition: stroke-width 0.15s ease;
        }
        .prop-leader-group {
            /* 默认就接近全亮：线是"引线"，太淡就失去意义；
               靠深色底描边和悬停时的对比来避免糊，而不是靠整体压暗 */
            opacity: 0.92;
            transition: opacity 0.25s ease;
        }
        .prop-leader-dot {
            fill: #fff7e8;
            stroke: rgba(8, 12, 20, 0.45);
            stroke-width: 1.1;
            transition: opacity 0.25s ease;
        }
        /* 悬停某张卡片：自己那条整组拉满（更粗、更亮、线头在流动），其余整条压暗一档。
           对比才是"显眼"的关键 —— 只加粗 0.4px，人眼基本看不出来。 */
        #leaderOverlay.has-focus .prop-leader-group {
            opacity: 0.30;
        }
        #leaderOverlay.has-focus .prop-leader-group.is-active {
            opacity: 1;
        }
        #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader {
            stroke-width: 2.4;
        }
        #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader-base {
            stroke-width: 3.8;
        }
        #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader,
        #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader-base {
            stroke-dasharray: 10 7;
            animation: propLeaderFlow 1.1s linear infinite;
        }
        #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader-dot {
            animation: propLeaderPulse 1.6s ease-in-out infinite;
        }
        /* 隐藏规则必须排在最后：转到地球背面 / 收起过程中的线不能被 hover 状态点亮 */
        #leaderOverlay .prop-leader-group.is-active.is-hidden,
        #leaderOverlay .prop-leader-group.is-hidden,
        #leaderOverlay .prop-leader.is-hidden,
        #leaderOverlay .prop-leader-base.is-hidden,
        #leaderOverlay .prop-leader-dot.is-hidden {
            opacity: 0;
        }
        /* 线头从标记端流向卡片端：dash 周期 18px，位移一个周期正好无缝循环 */
        @keyframes propLeaderFlow {
            to { stroke-dashoffset: -17; }
        }
        @keyframes propLeaderPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        #provinceCardLayer {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
        }
        /* 省名标注：贴在省份轮廓中心的屏幕位置上方，随地球转动移动 */
        #provinceLabel {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            transform: translate(-50%, -100%);
            color: rgba(255, 255, 255, 0.94);
            font: 13px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.14em;
            white-space: nowrap;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.8),
                0 0 10px rgba(0, 0, 0, 0.45),
                0 0 2px rgba(0, 0, 0, 0.9);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s;
        }
        #provinceLabel.show {
            opacity: 1;
            visibility: visible;
        }
        /* 一次性提示：只在第一次放大到国内范围时出现几秒，位置放在底部居中
           （此时右下角的浮动按钮已被 nav-zoom 隐藏，不会打架） */
        #provinceHint {
            position: absolute;
            left: 50%;
            bottom: 92px;
            z-index: 3;
            padding: 7px 14px;
            border-radius: 999px;
            background: rgba(8, 12, 20, 0.62);
            border: 1px solid rgba(247, 245, 241, 0.16);
            color: rgba(247, 245, 241, 0.92);
            font: 13px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.1em;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(6px);
            transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease;
        }
        #provinceHint.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        /* 小城市卡：cityCard 的缩小横版（左图右文），
           只有封面 + 城市名 + 数量 + 最近到访，没有任何按钮 */
        .prop-city-card {
            position: absolute;
            left: 0;
            top: 0;
            display: grid;
            grid-template-columns: 40% minmax(0, 1fr);
            width: 244px;
            border-radius: 12px;
            overflow: hidden;
            background: rgba(6, 8, 14, 0.74);
            border: 1px solid rgba(247, 245, 241, 0.14);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #f7f5f1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            pointer-events: auto;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            opacity: 0;
            transition: opacity 0.32s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .prop-city-card.show { opacity: 1; }
        /* 入场飞行态：只有展开那一小段时间启用 transform 过渡。
           常驻的话，相机转动时的逐帧重排会被过渡拖成"追着跑"，拖拽也会发黏。 */
        .prop-city-card.is-flying {
            /* 只在动的时候独占合成层：常驻会让卡片动画结束后仍保留按 0.82 倍栅格化的位图，
               表现就是"有的卡文字一直有点糊" */
            will-change: transform;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.42s ease,
                        border-color 0.25s ease,
                        box-shadow 0.25s ease;
        }
        .prop-city-card.is-hidden {
            opacity: 0;
            pointer-events: none;
        }
        .prop-city-card.is-dragging {
            cursor: grabbing;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
            /* 拖拽必须立刻跟手：入场飞行态残留的 transform 过渡不能把拖动拖成"黏手" */
            transition: none;
            will-change: transform;
        }
        .prop-city-card:hover,
        .prop-city-card:focus-visible {
            outline: none;
            /* 悬停描边跟连线同为象牙白 */
            border-color: rgba(255, 243, 224, 0.5);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 243, 224, 0.22);
        }
        .prop-card-media {
            grid-area: 1 / 1 / 2 / 2;
            position: relative;
            min-height: 96px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(8, 10, 16, 0.85));
            background-size: cover;
            background-position: center;
            border-right: 1px solid rgba(247, 245, 241, 0.08);
        }
        /* 卡片可点的提示：只在悬停/键盘聚焦时浮在封面区（那一片没有文字，不会挡内容） */
        .prop-card-hint {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 0 4px;
            text-align: center;
            background: linear-gradient(180deg, rgba(6, 8, 14, 0.3), rgba(6, 8, 14, 0.62));
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .prop-card-hint em {
            font-style: normal;
            font-size: 12px;
            letter-spacing: 0.08em;
            color: #f7f5f1;
        }
        .prop-card-hint small {
            font-size: 10px;
            letter-spacing: 0.06em;
            color: rgba(247, 245, 241, 0.74);
        }
        .prop-city-card:hover .prop-card-hint,
        .prop-city-card:focus-visible .prop-card-hint {
            opacity: 1;
        }
        .prop-card-body {
            grid-area: 1 / 2 / 2 / 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            padding: 12px 14px;
        }
        .prop-card-title {
            margin: 0;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-weight: 400;
            font-size: 21px;
            line-height: 1.15;
            letter-spacing: 0.03em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .prop-card-stats {
            margin: 7px 0 0;
            font-size: 11px;
            letter-spacing: 0.06em;
            color: rgba(247, 245, 241, 0.82);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .prop-card-stats b {
            font-size: 13.5px;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }
        .prop-card-date {
            margin: 4px 0 0;
            font-size: 11px;
            letter-spacing: 0.06em;
            color: rgba(247, 245, 241, 0.66);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (prefers-reduced-motion: reduce) {
            .prop-city-card,
            .prop-card-hint,
            #provinceLabel,
            #provinceHint,
            .prop-leader,
            .prop-leader-group,
            .prop-leader-dot { transition: none; }
            #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader,
            #leaderOverlay.has-focus .prop-leader-group.is-active .prop-leader-dot { animation: none; }
            .card-cover-photo { transition: none; }
        }
        /* 窄屏不生效（与 JS 门控 > 820px 一致） */
        @media (max-width: 820px) {
            #leaderOverlay,
            #provinceLabel,
            #provinceCardLayer { display: none; }
            #provinceAllBtn { display: none; }
        }

        /* ============ 照片环：点足迹标记后围绕标记铺开的多图预览 ============
           不取代足迹卡（卡片照旧从右侧滑入），环另外浮在标记周围：
           整圈 360° 排布固定 5 张缩略图，第 6 个角度位是「全部 N 张 ›」入口。
           点某张 → 原地放大成窗口化查看器（不全屏），←/→ 切换。 */
        #photoRing {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9997;          /* 与 #markerTip 同级：卡片在根层，天然压在环上方 */
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s;
        }
        #photoRing.show {
            /* --photo-ring-fade 由 JS 按"锚点出屏深度"写入：足迹点滑出视口时整环淡出 */
            opacity: var(--photo-ring-fade, 1);
            visibility: visible;
        }
        /* 查看模式：放大图是屏幕焦点，要压在右侧足迹卡（z-index 9997）之上 ——
           否则大图铺到右半屏时会被卡片切掉一块。环的缩略图这时都是 is-dim（opacity 0），
           跟着整层抬起来不会有别的观感变化；根节点是 pointer-events:none，
           卡片在没被大图盖住的部分照样能点。 */
        #photoRing.is-viewing {
            z-index: 9998;
        }
        #photoRing.is-hidden {
            opacity: 0;              /* 标记转到地球背面：淡出但保留状态 */
        }
        #photoRing.is-hidden .photo-ring-item,
        #photoRing.is-hidden .photo-ring-nav,
        #photoRing.is-hidden .photo-ring-close,
        #photoRing.is-edge-faded .photo-ring-item,
        #photoRing.is-edge-faded .photo-ring-nav,
        #photoRing.is-edge-faded .photo-ring-close {
            pointer-events: none;
        }
        .photo-ring-item,
        .photo-ring-nav,
        .photo-ring-close {
            position: absolute;
            left: 0;
            top: 0;
            appearance: none;
            pointer-events: auto;
            border: 1px solid rgba(247, 245, 241, 0.18);
            background: rgba(6, 8, 14, 0.74);
            color: #f7f5f1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }
        .photo-ring-item {
            /* 尺寸由 JS 按每张图片的实际宽高比设置；这里只是尚未测量时的兜底 */
            width: 160px;
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.2s ease,
                        border-color 0.2s ease,
                        box-shadow 0.2s ease;
        }
        /* 图片单独一层：加载成功才淡入，骨架/失败时不会让方块变形 */
        .photo-ring-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            /* contain：极端比例（被上下限夹过）时也不会裁掉画面，最多两侧留一点底色 */
            background-size: contain;
            background-repeat: no-repeat;
            object-fit: contain;   /* <img> 走这条：同样保持比例、不裁切 */
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }
        .photo-ring-photo.is-loaded { opacity: 1; }
        .photo-ring-item.is-loading {
            background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.06),
                rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
        }
        /* 加载失败：压暗 + 一个"⚠"提示，和"还在加载"区分开（自动重试两次，点进查看模式也会重取） */
        .photo-ring-item.is-error { background-image: none; background-color: rgba(30, 34, 42, 0.78); }
        .photo-ring-item.is-error::after {
            content: "⚠";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            opacity: 0.55;
            pointer-events: none;
        }
        /* 减量档：不参与这一环的那几张直接不显示（仍可由「全部 ›」看到） */
        .photo-ring-item.is-slot-hidden { display: none; }
        /* 悬停 / 聚焦某张时连回标记的细线（画在最底层，照片压在它上面） */
        .photo-ring-guide {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            overflow: visible;
            pointer-events: none;
        }
        .photo-ring-guide-line {
            stroke: rgba(247, 245, 241, 0.5);
            stroke-width: 1;
            opacity: 0;
            transition: opacity 0.15s ease;
        }
        .photo-ring-guide-dot {
            fill: rgba(247, 245, 241, 0.85);
            opacity: 0;
            transition: opacity 0.15s ease;
        }
        .photo-ring-guide-line.show,
        .photo-ring-guide-dot.show { opacity: 1; }
        .photo-ring-item:hover:not(.is-viewer),
        .photo-ring-item:focus-visible {
            outline: none;
            border-color: rgba(247, 245, 241, 0.5);
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
        }
        .photo-ring-item.is-dim {
            opacity: 0;
            pointer-events: none;
        }
        /* 查看模式：被点的这张原地放大（尺寸与 JS 里的 PHOTO_RING_VIEW_* 保持一致）。
           选择器必须带 #photoRing：紧凑档那条规则带 ID，权重更高，否则降级时大图会被压成 64×46。 */
        #photoRing .photo-ring-item.is-viewer {
            /* 实际宽高由 JS 按图片比例写在内联样式上，这里只是兜底 */
            width: 480px;
            height: 340px;
            border-radius: 12px;
            cursor: zoom-out;
            border-color: rgba(247, 245, 241, 0.24);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        }
        /* 查看模式的控件：平时隐藏，进入查看模式才出现 */
        .photo-ring-nav {
            display: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            padding-bottom: 2px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        }
        .photo-ring-counter {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            align-items: center;
            justify-content: center;
            height: 22px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(6, 8, 14, 0.72);
            border: 1px solid rgba(247, 245, 241, 0.16);
            color: rgba(247, 245, 241, 0.92);
            font: 11px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.12em;
            pointer-events: none;
            white-space: nowrap;
        }
        /* 放大视图的位置指示点带：全量 N 个点，环上那几张亮一档，当前这张点亮。
           （进查看模式时环上其余缩略图是 opacity:0，位置感只能由这条点带承担。） */
        .photo-ring-dots {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            align-items: center;
            gap: 6px;
            pointer-events: none;
        }
        .photo-ring-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(247, 245, 241, 0.24);
            transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }
        .photo-ring-dots span.is-in-ring { background: rgba(247, 245, 241, 0.58); }
        .photo-ring-dots span.is-current {
            background: #e2bc8c;
            box-shadow: 0 0 0 3px rgba(226, 188, 140, 0.18);
            transform: scale(1.2);
        }
        /* 一行说明：环上只是均匀采样出的几张，全量在「图片墙」（环上已是全量时不显示） */
        .photo-ring-viewhint {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            color: rgba(247, 245, 241, 0.62);
            font: 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.1em;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
            pointer-events: none;
            white-space: nowrap;
        }
        #photoRing.is-viewing .photo-ring-dots { display: flex; }
        #photoRing.is-viewing .photo-ring-viewhint.has-hint { display: block; }
        .photo-ring-close {
            display: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            line-height: 1;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        }
        #photoRing.is-viewing .photo-ring-nav,
        #photoRing.is-viewing .photo-ring-close { display: inline-flex; }
        #photoRing.is-viewing .photo-ring-counter { display: flex; }
        #photoRing.is-viewing .photo-ring-nav:hover,
        #photoRing.is-viewing .photo-ring-close:hover {
            border-color: rgba(247, 245, 241, 0.5);
        }
        @media (max-width: 820px) {
            #photoRing { display: none; }   /* 手机端不做照片环，沿用底部足迹卡 */
        }
        @media (prefers-reduced-motion: reduce) {
            #photoRing,
            .photo-ring-item,
            .photo-ring-dots span { transition: none; }
        }

        /* ============ 城市足迹全屏视图（左侧足迹 Tab 卡片 + 右侧详情） ============ */
        #cityView {
            position: fixed;
            inset: 0;
            z-index: 10015;   /* 相册之上、灯箱之下 */
            display: flex;
            flex-direction: column;
            background:
                radial-gradient(1100px 640px at 50% 18%, rgba(38, 48, 70, 0.30), transparent 62%),
                rgba(4, 6, 10, 0.96);
            backdrop-filter: blur(18px) saturate(120%);
            -webkit-backdrop-filter: blur(18px) saturate(120%);
            color: #f7f5f1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;
        }
        #cityView.show {
            opacity: 1;
            visibility: visible;
        }

        .city-view-top {
            width: 100%;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 28px 8px;
            box-sizing: border-box;
            z-index: 4;
        }
        #cityViewBack {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: 1px solid rgba(247, 245, 241, 0.22);
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.42);
            color: rgba(247, 245, 241, 0.85);
            font: 13px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #cityViewBack svg {
            width: 16px;
            height: 16px;
        }
        #cityViewBack:hover {
            background: #f7f5f1;
            border-color: #f7f5f1;
            color: #0b0e14;
        }
        .city-view-head {
            text-align: center;
            min-width: 0;
        }
        .city-view-eyebrow {
            margin: 0;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: rgba(247, 245, 241, 0.5);
        }
        #cityViewTitle {
            margin: 6px 0 0;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-weight: 400;
            font-size: 32px;
            line-height: 1.15;
            letter-spacing: 0.08em;
        }
        #cityViewStats {
            margin: 7px 0 0;
            font-size: 12px;
            letter-spacing: 0.12em;
            color: rgba(247, 245, 241, 0.55);
        }
        /* 到访时间线：第几次来、隔了多少天；点一下切到那一站
           （cityView 最终是浅色皮肤，配色按 #e8e0d2 / #6e5945 走）
           它由 .city-view-meta 居中；内容超过 max-width 时横向滚动，
           所以这里用 flex-start 而不是 center —— center 会把左侧内容滚出可视区且拉不回来 */
        .city-view-timeline {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            max-width: min(100%, 62vw);
            overflow-x: auto;
            scrollbar-width: thin;
        }
        .city-view-timeline[hidden] {
            display: none;
        }
        .city-view-timeline-label {
            flex: none;
            color: #a08c76;
            font: 500 10px/1 ui-monospace, Consolas, monospace;
            letter-spacing: 0.24em;
        }
        .city-view-timeline-list {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .city-view-timeline-list li {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        /* 两站之间的连接线 */
        .city-view-timeline-list li + li::before {
            content: "";
            flex: none;
            width: 10px;
            height: 1px;
            background: rgba(118, 92, 61, 0.3);
        }
        .city-view-timeline-item {
            display: flex;
            align-items: baseline;
            gap: 7px;
            flex: none;
            min-height: 34px;
            padding: 6px 13px;
            border: 1px solid rgba(118, 92, 61, 0.24);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.62);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .city-view-timeline-item b {
            color: #35423d;
            font-weight: 600;
        }
        .city-view-timeline-item span {
            font: 500 11px/1.2 ui-monospace, Consolas, monospace;
            letter-spacing: 0.04em;
            font-variant-numeric: tabular-nums;
        }
        .city-view-timeline-item em {
            font-style: normal;
            color: #a08c76;
            font-size: 11px;
            letter-spacing: 0.04em;
        }
        .city-view-timeline-item:hover,
        .city-view-timeline-item:focus-visible {
            background: rgba(255, 253, 247, 0.92);
            border-color: #6e5945;
            color: #35423d;
            outline: none;
        }
        .city-view-timeline-item:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        .city-view-timeline-item.is-active {
            border-color: #d8ae78;
            background: rgba(216, 174, 120, 0.22);
            color: #5b4a38;
        }
        /* 城市视图里的票根入口（键盘也能到） */
        .city-view-tickets {
            margin-top: 10px;
            min-height: 34px;
            padding: 7px 16px;
            border: 1px solid rgba(118, 92, 61, 0.3);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.62);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .city-view-tickets:hover,
        .city-view-tickets:focus-visible {
            border-color: #6e5945;
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .city-view-tickets:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        .city-view-tickets[hidden] {
            display: none;
        }
        .city-view-nav {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .city-view-nav button {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(247, 245, 241, 0.2);
            border-radius: 50%;
            background: rgba(8, 10, 16, 0.42);
            color: rgba(247, 245, 241, 0.9);
            font-size: 19px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .city-view-nav button:hover {
            background: #f7f5f1;
            color: #0b0e14;
        }
        #cityViewBack:focus-visible,
        .city-view-nav button:focus-visible,
        .city-tab:focus-visible,
        .city-wall-tile:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }

        /* 两栏布局：左侧 Tab 列表 + 右侧详情 */
        .city-view-body {
            flex: 1;
            width: 100%;
            min-height: 0;
            display: flex;
            gap: 24px;
            padding: 8px 28px 40px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .city-tabs {
            width: 288px;
            flex: none;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 4px;
        }
        .city-tab {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(247, 245, 241, 0.12);
            border-radius: 14px;
            background: rgba(8, 10, 16, 0.35);
            color: rgba(247, 245, 241, 0.75);
            text-align: left;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .city-tab:hover {
            background: rgba(247, 245, 241, 0.08);
            color: #ffffff;
        }
        .city-tab.active {
            background: rgba(247, 245, 241, 0.1);
            border-color: rgba(247, 245, 241, 0.4);
            color: #ffffff;
        }
        .city-tab-thumb {
            width: 52px;
            height: 52px;
            flex: none;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
        }
        .city-tab-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .city-tab-info {
            min-width: 0;
        }
        .city-tab-name {
            display: block;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-weight: 400;
            font-size: 17px;
            letter-spacing: 0.04em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .city-tab-meta {
            display: block;
            margin-top: 4px;
            font-size: 10.5px;
            letter-spacing: 0.06em;
            color: rgba(247, 245, 241, 0.45);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .city-stage {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .city-stage-content {
            animation: cityStageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes cityStageIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* 右侧详情：大图 + 描述 + 图片墙 */
        .city-fp-hero {
            position: relative;
            height: min(42vh, 430px);
            border-radius: 18px;
            overflow: hidden;
            background:
                linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
                rgba(10, 13, 20, 0.92);
            background-size: cover;
            background-position: center;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
        }
        .city-fp-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(4, 6, 10, 0.94) 0%, rgba(4, 6, 10, 0.26) 46%, transparent 72%);
            pointer-events: none;
        }
        .city-fp-hero-body {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            padding: 22px 24px;
        }
        .city-fp-eyebrow {
            margin: 0;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: rgba(247, 245, 241, 0.66);
        }
        .city-fp-name {
            margin: 9px 0 0;
            font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
            font-weight: 400;
            font-size: 34px;
            line-height: 1.15;
            letter-spacing: 0.06em;
        }
        .city-fp-meta {
            margin: 8px 0 0;
            font-size: 12px;
            letter-spacing: 0.08em;
            color: rgba(247, 245, 241, 0.62);
        }
        .city-fp-desc {
            margin: 18px 24px 0;
            max-width: 58ch;
            font-size: 14px;
            line-height: 1.85;
            color: rgba(247, 245, 241, 0.78);
        }
        /* 图片墙：错落瀑布，首图与第 3n+1 张为竖版，其余横版 */
        .city-fp-wall {
            margin: 20px 24px 8px;
            columns: 3;
            column-gap: 10px;
        }
        .city-wall-tile {
            position: relative;
            display: block;
            width: 100%;
            margin: 0 0 10px;
            padding: 0;
            border: 0;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.06);
            break-inside: avoid;
            transition: transform 0.3s ease, filter 0.3s ease;
        }
        .city-wall-tile img {
            width: 100%;
            display: block;
            object-fit: cover;
        }
        .city-wall-tile:first-child img,
        .city-wall-tile:nth-child(3n+1) img {
            aspect-ratio: 3 / 4;
        }
        .city-wall-tile:not(:first-child):not(:nth-child(3n+1)) img {
            aspect-ratio: 4 / 3;
        }
        .city-wall-tile:hover {
            transform: translateY(-3px) scale(1.02);
            filter: brightness(1.08);
        }
        .city-wall-empty {
            padding: 34px 0;
            text-align: center;
            font-size: 12px;
            letter-spacing: 0.1em;
            color: rgba(247, 245, 241, 0.45);
        }

        @media (max-width: 820px) {
            .city-view-top {
                padding: 14px 14px 6px;
                gap: 10px;
            }
            #cityViewBack span {
                display: none;
            }
            #cityViewBack {
                padding: 8px;
            }
            #cityViewTitle {
                font-size: 24px;
            }
            .city-view-nav button {
                width: 34px;
                height: 34px;
            }
            .city-view-body {
                flex-direction: column;
                gap: 12px;
                padding: 8px 14px 30px;
            }
            .city-tabs {
                width: 100%;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                gap: 8px;
                padding: 2px 2px 6px;
            }
            .city-tab {
                flex: none;
                width: 190px;
            }
            .city-fp-hero {
                height: 38vh;
            }
            .city-fp-desc {
                margin: 16px 14px 0;
            }
            .city-fp-wall {
                columns: 2;
                margin: 16px 14px 8px;
                column-gap: 8px;
            }
            .city-fp-hero-body {
                padding: 16px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #cityView,
            .city-tab,
            .city-wall-tile,
            .city-stage-content {
                transition: none;
                animation: none;
            }
        }

        /* ============ 城市图片墙重设计：旅行杂志式浏览 ============ */
        #cityView {
            --city-ink: #f4efe6;
            --city-muted: rgba(244, 239, 230, 0.58);
            --city-faint: rgba(244, 239, 230, 0.34);
            --city-line: rgba(244, 239, 230, 0.14);
            --city-accent: #d9a86c;
            background:
                radial-gradient(900px 520px at 72% 5%, rgba(97, 75, 50, 0.22), transparent 66%),
                linear-gradient(135deg, #0d1117 0%, #10151c 50%, #0b0e13 100%);
        }
        .city-view-top {
            max-width: 1440px;
            margin: 0 auto;
            padding: 28px 48px 18px;
        }
        #cityViewBack {
            border-color: var(--city-line);
            background: rgba(255, 255, 255, 0.035);
            color: var(--city-muted);
            letter-spacing: 0.05em;
        }
        #cityViewBack:hover,
        .city-view-nav button:hover {
            background: var(--city-ink);
            border-color: var(--city-ink);
            color: #10151c;
        }
        .city-view-head {
            transform: translateX(2.5%);
        }
        .city-view-eyebrow {
            color: var(--city-accent);
            letter-spacing: 0.28em;
        }
        #cityViewTitle {
            color: var(--city-ink);
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: clamp(28px, 3vw, 42px);
            letter-spacing: 0.04em;
        }
        #cityViewStats {
            color: var(--city-muted);
            letter-spacing: 0.08em;
        }
        .city-view-nav {
            gap: 6px;
        }
        .city-view-nav button {
            width: 40px;
            height: 40px;
            border-color: var(--city-line);
            background: rgba(255, 255, 255, 0.035);
            color: var(--city-muted);
        }
        .city-view-body {
            max-width: 1440px;
            margin: 0 auto;
            gap: 42px;
            padding: 18px 48px 54px;
        }
        .city-tabs {
            width: 246px;
            gap: 5px;
            padding: 10px 0;
            border-top: 1px solid var(--city-line);
        }
        .city-tabs::before {
            content: "这座城市的足迹";
            display: block;
            margin: 0 12px 12px;
            color: var(--city-faint);
            font-size: 10px;
            letter-spacing: 0.18em;
        }
        .city-tab {
            position: relative;
            gap: 14px;
            padding: 12px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--city-muted);
        }
        .city-tab::after {
            content: "";
            position: absolute;
            right: 12px;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: transparent;
            transform: translateY(-50%);
        }
        .city-tab:hover {
            background: rgba(255, 255, 255, 0.045);
            color: var(--city-ink);
        }
        .city-tab.active {
            background: rgba(217, 168, 108, 0.11);
            color: var(--city-ink);
        }
        .city-tab.active::after {
            background: var(--city-accent);
        }
        .city-tab-thumb {
            width: 58px;
            height: 58px;
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.06);
        }
        .city-tab-name {
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: 16px;
            letter-spacing: 0.02em;
        }
        .city-tab-meta {
            margin-top: 5px;
            color: var(--city-faint);
        }
        .city-stage {
            padding-right: 6px;
        }
        .city-stage-content {
            max-width: 920px;
            margin: 0 auto;
        }
        .city-fp-hero {
            height: min(48vh, 480px);
            min-height: 330px;
            border-radius: 3px;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
        }
        .city-fp-hero::after {
            background: linear-gradient(to top, rgba(8, 11, 16, 0.9) 0%, rgba(8, 11, 16, 0.14) 62%, transparent 84%);
        }
        .city-fp-hero-body {
            padding: 30px 32px;
        }
        .city-fp-eyebrow {
            color: var(--city-accent);
            letter-spacing: 0.22em;
        }
        .city-fp-name {
            margin-top: 10px;
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: clamp(32px, 4vw, 52px);
            letter-spacing: 0.025em;
        }
        .city-fp-meta {
            color: rgba(244, 239, 230, 0.64);
            letter-spacing: 0.05em;
        }
        .city-fp-desc {
            margin: 24px 0 0;
            padding: 0 0 22px;
            max-width: 60ch;
            border-bottom: 1px solid var(--city-line);
            color: var(--city-muted);
            font-size: 14px;
            line-height: 1.9;
        }
        .city-fp-wall {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin: 26px 0 8px;
        }
        .city-fp-wall::before {
            content: "照片记录";
            grid-column: 1 / -1;
            margin-bottom: 2px;
            color: var(--city-faint);
            font-size: 10px;
            letter-spacing: 0.22em;
        }
        .city-wall-tile {
            aspect-ratio: 1 / 1;
            margin: 0;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.05);
            transition: transform 0.28s ease, filter 0.28s ease;
        }
        .city-wall-tile:first-of-type {
            grid-column: span 2;
            grid-row: span 2;
            aspect-ratio: 1 / 1;
        }
        .city-wall-tile:nth-of-type(4n + 2) {
            aspect-ratio: 4 / 5;
        }
        .city-wall-tile:nth-of-type(4n + 3) {
            aspect-ratio: 5 / 4;
        }
        .city-wall-tile:nth-of-type(4n + 4) {
            aspect-ratio: 4 / 5;
        }
        .city-wall-tile:hover {
            transform: translateY(-4px);
            filter: brightness(1.12) saturate(1.05);
        }
        .city-wall-empty {
            grid-column: 1 / -1;
            padding: 48px 0;
            border-top: 1px solid var(--city-line);
            color: var(--city-faint);
        }
        @media (max-width: 1020px) {
            .city-view-top,
            .city-view-body { padding-left: 28px; padding-right: 28px; }
            .city-view-body { gap: 26px; }
            .city-tabs { width: 216px; }
        }
        @media (max-width: 820px) {
            .city-view-top { padding: 16px 16px 10px; }
            .city-view-head { transform: none; }
            .city-view-body { gap: 16px; padding: 10px 16px 34px; }
            .city-tabs { border-top: 0; padding: 0; }
            .city-tabs::before { display: none; }
            .city-tab { width: 184px; padding: 9px; }
            .city-tab-thumb { width: 50px; height: 50px; }
            .city-fp-hero { height: 42vh; min-height: 270px; }
            .city-fp-hero-body { padding: 20px; }
            .city-fp-desc { margin-top: 18px; }
            .city-fp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
            .city-wall-tile:first-of-type { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
        }

        /* ============ 中央展陈二稿：电影分镜式画廊 ============ */
        .city-stage-content {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.75fr);
            align-items: stretch;
            gap: 0 28px;
            max-width: 1060px;
        }
        .city-fp-hero {
            grid-column: 1;
            grid-row: 1;
            height: auto;
            min-height: 520px;
            border-radius: 0;
            box-shadow: 14px 18px 0 rgba(217, 168, 108, 0.12), 0 26px 70px rgba(0, 0, 0, 0.34);
        }
        .city-fp-hero::before {
            content: "";
            position: absolute;
            inset: 16px;
            z-index: 1;
            border: 1px solid rgba(244, 239, 230, 0.32);
            pointer-events: none;
        }
        .city-fp-hero::after {
            background: linear-gradient(to top, rgba(8, 11, 16, 0.72), transparent 50%);
        }
        .city-fp-hero-body {
            padding: 28px 30px;
        }
        .city-fp-eyebrow,
        .city-fp-name,
        .city-fp-meta {
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.68);
        }
        .city-fp-desc {
            grid-column: 2;
            grid-row: 1;
            align-self: center;
            margin: 0;
            padding: 30px 0 30px 28px;
            border-top: 1px solid var(--city-line);
            border-bottom: 1px solid var(--city-line);
            color: var(--city-muted);
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: 16px;
            line-height: 2;
        }
        .city-fp-wall {
            grid-column: 1 / -1;
            grid-row: 2;
            display: flex;
            gap: 10px;
            overflow-x: auto;
            margin: 32px 0 8px;
            padding: 0 0 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(244, 239, 230, 0.24) transparent;
        }
        .city-fp-wall::before {
            content: "FILM STRIP / 照片记录";
            flex: 0 0 128px;
            align-self: center;
            margin: 0 8px 0 0;
            color: var(--city-faint);
            font-size: 10px;
            line-height: 1.7;
            letter-spacing: 0.16em;
            writing-mode: vertical-rl;
        }
        .city-wall-tile,
        .city-wall-tile:first-of-type,
        .city-wall-tile:nth-of-type(4n + 2),
        .city-wall-tile:nth-of-type(4n + 3),
        .city-wall-tile:nth-of-type(4n + 4) {
            flex: 0 0 154px;
            width: 154px;
            aspect-ratio: 4 / 5;
            border-radius: 0;
            box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.08);
        }
        .city-wall-tile:nth-of-type(3n + 2) {
            aspect-ratio: 1 / 1;
            margin-top: 18px;
        }
        .city-wall-tile:nth-of-type(3n + 3) {
            aspect-ratio: 5 / 4;
            margin-top: 7px;
        }
        .city-wall-empty {
            flex: 1 0 auto;
            border-top: 1px solid var(--city-line);
            border-bottom: 1px solid var(--city-line);
        }
        @media (max-width: 820px) {
            .city-stage-content {
                display: block;
            }
            .city-fp-hero {
                min-height: 360px;
                height: 54vh;
            }
            .city-fp-hero::before { inset: 10px; }
            .city-fp-desc {
                margin: 22px 0 0;
                padding: 20px 0;
                font-size: 14px;
                line-height: 1.85;
            }
            .city-fp-wall {
                margin-top: 22px;
            }
            .city-fp-wall::before {
                flex-basis: 76px;
            }
            .city-wall-tile,
            .city-wall-tile:first-of-type,
            .city-wall-tile:nth-of-type(4n + 2),
            .city-wall-tile:nth-of-type(4n + 3),
            .city-wall-tile:nth-of-type(4n + 4) {
                flex-basis: 126px;
                width: 126px;
            }
        }

        /* ============ 中央展陈三稿：摄影作品集网格 ============ */
        .city-stage-content {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 12px;
            max-width: 1080px;
        }
        .city-fp-hero {
            grid-column: span 7;
            grid-row: span 2;
            height: auto;
            min-height: 570px;
            border: 0;
            border-radius: 0;
            padding: 0;
            color: inherit;
            text-align: left;
            cursor: zoom-in;
            background-color: #1a2028;
            box-shadow: none;
            transition: filter 0.35s ease, transform 0.35s ease;
        }
        .city-fp-hero:hover {
            transform: translateY(-3px);
            filter: brightness(1.08) saturate(1.05);
        }
        .city-fp-hero:focus-visible {
            outline: 2px solid var(--city-accent);
            outline-offset: 4px;
        }
        .city-fp-hero::before {
            display: none;
        }
        .city-fp-hero::after {
            background: linear-gradient(to top, rgba(7, 10, 15, 0.86), transparent 54%);
        }
        .city-fp-hero-body {
            padding: 30px;
        }
        .city-fp-desc {
            grid-column: span 5;
            grid-row: span 2;
            align-self: stretch;
            display: flex;
            align-items: flex-end;
            min-height: 190px;
            margin: 0;
            padding: 24px 20px 24px 24px;
            border: 1px solid var(--city-line);
            border-left: 3px solid var(--city-accent);
            color: var(--city-muted);
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: 16px;
            line-height: 1.95;
        }
        .city-fp-wall {
            grid-column: 1 / -1;
            grid-row: 3;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
            overflow: visible;
            margin: 0;
            padding: 0;
        }
        .city-fp-wall::before {
            content: "";
            display: none;
        }
        .city-wall-tile,
        .city-wall-tile:first-of-type,
        .city-wall-tile:nth-of-type(3n + 2),
        .city-wall-tile:nth-of-type(3n + 3),
        .city-wall-tile:nth-of-type(4n + 2),
        .city-wall-tile:nth-of-type(4n + 3),
        .city-wall-tile:nth-of-type(4n + 4) {
            width: 100%;
            min-width: 0;
            height: auto;
            aspect-ratio: 1 / 1;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
        }
        .city-wall-tile:first-of-type {
            grid-column: span 2;
            grid-row: span 2;
            aspect-ratio: 1 / 1;
        }
        .city-wall-tile:nth-of-type(3n + 2) { aspect-ratio: 4 / 5; }
        .city-wall-tile:nth-of-type(3n + 3) { aspect-ratio: 5 / 4; }
        .city-wall-tile:nth-of-type(4n + 4) { grid-column: span 2; aspect-ratio: 5 / 3; }
        .city-wall-tile img {
            filter: saturate(0.9);
            transition: filter 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .city-wall-tile:hover img {
            filter: saturate(1.08) brightness(1.08);
            transform: scale(1.045);
        }
        .city-wall-empty {
            grid-column: 1 / -1;
            padding: 56px 0;
            border-top: 1px solid var(--city-line);
            border-bottom: 1px solid var(--city-line);
        }
        @media (max-width: 820px) {
            .city-stage-content { display: block; }
            .city-fp-hero { min-height: 360px; height: 54vh; }
            .city-fp-desc { min-height: 0; margin-top: 12px; }
            .city-fp-wall {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                margin-top: 12px;
            }
        }
        /* ============ 图片灯箱 ============ */
        #lightbox {
            position: fixed;
            inset: 0;
            z-index: 10020;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(4, 6, 10, 0.92);
            color: #f7f5f1;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s;
        }
        #lightbox.show {
            opacity: 1;
            visibility: visible;
        }
        .lightbox-stage {
            position: relative;
            width: min(88vw, 1100px);
            height: min(72vh, 780px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #lightboxImg {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        }
        .lightbox-skeleton {
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 60%);
            background-size: 200% 100%;
            animation: skeletonShimmer 1.2s ease infinite;
        }
        @keyframes skeletonShimmer {
            from { background-position: 120% 0; }
            to   { background-position: -80% 0; }
        }
        .lightbox-error {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 13px;
            letter-spacing: 0.08em;
            color: rgba(247, 245, 241, 0.6);
        }
        .lightbox-error button {
            padding: 6px 16px;
            border: 1px solid rgba(247, 245, 241, 0.35);
            border-radius: 999px;
            background: transparent;
            color: #f7f5f1;
            font: 12px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .lightbox-error button:hover {
            background: #f7f5f1;
            color: #0b0e14;
        }
        #lightboxClose {
            position: fixed;
            top: 20px;
            right: 22px;
            z-index: 2;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 50%;
            background: rgba(8, 10, 16, 0.45);
            color: rgba(247, 245, 241, 0.9);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        #lightboxClose:hover {
            background: #f7f5f1;
            color: #0b0e14;
        }
        #lightboxPrev,
        #lightboxNext {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            background: rgba(8, 10, 16, 0.45);
            color: rgba(247, 245, 241, 0.9);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        #lightboxPrev { left: 22px; }
        #lightboxNext { right: 22px; }
        #lightboxPrev:hover,
        #lightboxNext:hover {
            background: #f7f5f1;
            color: #0b0e14;
        }
        #lightboxPrev[hidden],
        #lightboxNext[hidden],
        #lightboxError[hidden],
        #lightboxSkeleton[hidden] {
            display: none;
        }
        #lightboxClose:focus-visible,
        #lightboxPrev:focus-visible,
        #lightboxNext:focus-visible,
        #lightboxRetry:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 2px;
        }
        .lightbox-meta {
            position: fixed;
            left: 50%;
            bottom: 26px;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 18px;
            font-size: 12px;
            letter-spacing: 0.08em;
            color: rgba(247, 245, 241, 0.78);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            white-space: nowrap;
        }
        #lightboxCount {
            color: rgba(247, 245, 241, 0.5);
        }

        @media (prefers-reduced-motion: reduce) {
            #lightbox {
                transition: none;
            }
            .lightbox-skeleton {
                animation: none;
            }
        }
        @media (max-width: 820px) {
            .lightbox-stage {
                width: 94vw;
                height: 62vh;
            }
            #lightboxPrev { left: 8px; }
            #lightboxNext { right: 8px; }
            .lightbox-meta {
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                width: 92vw;
                text-align: center;
            }
        }
        /* ============ 左侧足迹目录优化：展览目录式导航 ============ */
        @media (min-width: 821px) {
            .city-tabs {
                position: relative;
                width: 300px;
                flex: 0 0 300px;
                box-sizing: border-box;
                gap: 8px;
                padding: 14px 0 14px 18px;
                border-top: 0;
                border-left: 1px solid var(--city-line);
                overflow-x: hidden;
                overflow-y: auto;
            }
            .city-tabs::before {
                margin: 0 12px 14px;
                color: var(--city-accent);
                content: "THIS CITY / 足迹目录";
                font-size: 10px;
                letter-spacing: 0.16em;
            }
            .city-tab {
                display: grid;
                grid-template-columns: 24px 68px minmax(0, 1fr);
                align-items: center;
                gap: 12px;
                min-height: 84px;
                box-sizing: border-box;
                width: 100%;
                max-width: 100%;
                padding: 10px 14px 10px 10px;
                border: 1px solid transparent;
                border-radius: 0;
                color: var(--city-muted);
                transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
            }
            .city-tab:hover {
                background: rgba(255, 255, 255, 0.045);
                border-color: var(--city-line);
                color: var(--city-ink);
                transform: translateX(3px);
            }
            .city-tab.active {
                background: linear-gradient(90deg, rgba(217, 168, 108, 0.14), rgba(217, 168, 108, 0.035));
                border-color: rgba(217, 168, 108, 0.28);
                color: var(--city-ink);
                transform: translateX(6px);
            }
            .city-tab.active::before {
                content: "";
                position: absolute;
                left: -2px;
                width: 3px;
                height: 46px;
                background: var(--city-accent);
            }
            .city-tab-index {
                align-self: start;
                padding-top: 5px;
                color: var(--city-faint);
                font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
                letter-spacing: 0.04em;
            }
            .city-tab.active .city-tab-index { color: var(--city-accent); }
            .city-tab-thumb {
                width: 68px;
                height: 68px;
                border: 1px solid rgba(244, 239, 230, 0.13);
                border-radius: 2px;
                background: rgba(255, 255, 255, 0.06);
                box-shadow: 0 7px 16px rgba(0, 0, 0, 0.16);
            }
            .city-tab.active .city-tab-thumb {
                border-color: rgba(217, 168, 108, 0.65);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
            }
            .city-tab-info {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }
            .city-tab-name {
                font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
                font-size: 17px;
                line-height: 1.35;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                overflow-wrap: anywhere;
            }
            .city-tab-meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 5px 9px;
                margin-top: 7px;
                color: var(--city-faint);
                font-size: 10px;
                line-height: 1.35;
                letter-spacing: 0.03em;
                white-space: normal;
            }
            .city-tab-date {
                color: var(--city-accent);
                font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
                letter-spacing: 0.03em;
            }
            .city-tab-photos {
                color: var(--city-faint);
            }
            .city-stage {
                min-width: 0;
            }
        }
        .city-map-wall {
            display: none;
            width: 100%;
            overflow: hidden;
            background: #151b22;
            border: 1px solid rgba(244, 239, 230, 0.14);
            box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
        }
        .city-map-canvas {
            position: relative;
            min-height: 900px;
            overflow: hidden;
            background:
                linear-gradient(rgba(244, 239, 230, 0.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(244, 239, 230, 0.055) 1px, transparent 1px),
                radial-gradient(ellipse at 50% 42%, rgba(91, 119, 106, 0.28), transparent 42%),
                #151b22;
            background-size: 42px 42px, 42px 42px, auto, auto;
        }
        .city-map-canvas::before,
        .city-map-canvas::after {
            content: "";
            position: absolute;
            pointer-events: none;
            border: 1px solid rgba(155, 183, 157, 0.16);
            border-radius: 48% 52% 44% 56%;
        }
        .city-map-canvas::before {
            top: 13%;
            left: 30%;
            width: 40%;
            height: 54%;
            transform: rotate(18deg);
        }
        .city-map-canvas::after {
            top: 20%;
            left: 35%;
            width: 30%;
            height: 41%;
            transform: rotate(-12deg);
        }
        .city-map-route {
            position: absolute;
            top: 9%;
            left: 20%;
            width: 60%;
            height: 62%;
            border: 1px dashed rgba(217, 168, 108, 0.45);
            border-radius: 47% 53% 61% 39%;
            transform: rotate(-12deg);
            pointer-events: none;
        }
        .city-map-route::after {
            content: "";
            position: absolute;
            top: 48%;
            left: 49%;
            width: 9px;
            height: 9px;
            border: 2px solid #151b22;
            border-radius: 50%;
            background: var(--city-accent);
            box-shadow: 0 0 0 8px rgba(217, 168, 108, 0.12);
        }
        .city-map-core {
            position: absolute;
            z-index: 3;
            top: 278px;
            left: 50%;
            display: flex;
            width: 300px;
            min-height: 210px;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 24px;
            border: 1px solid rgba(217, 168, 108, 0.48);
            border-radius: 50%;
            background: rgba(20, 28, 29, 0.82);
            box-shadow: 0 0 0 12px rgba(217, 168, 108, 0.045), 0 20px 50px rgba(0, 0, 0, 0.34);
            transform: translateX(-50%);
            text-align: center;
        }
        .city-map-core::before,
        .city-map-core::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(155, 183, 157, 0.22);
            border-radius: 50%;
        }
        .city-map-core::before { inset: -28px; }
        .city-map-core::after { inset: -54px; border-style: dashed; opacity: 0.55; }
        .city-map-core-kicker {
            position: relative;
            z-index: 1;
            color: var(--city-accent);
            font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.22em;
        }
        .city-map-core strong {
            position: relative;
            z-index: 1;
            color: var(--city-ink);
            font: 400 24px/1.35 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-map-core small {
            position: relative;
            z-index: 1;
            color: var(--city-faint);
            font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.08em;
        }
        .city-map-photo {
            position: absolute;
            z-index: 4;
            width: 150px;
            height: 184px;
            padding: 7px 7px 24px;
            border: 1px solid rgba(39, 43, 39, 0.22);
            border-radius: 1px;
            background: #fffef9;
            box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.24);
            cursor: zoom-in;
            transform: rotate(var(--map-rotation, 0deg));
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }
        .city-map-photo:nth-of-type(3n) { --map-rotation: -2deg; }
        .city-map-photo:nth-of-type(4n) { --map-rotation: 2deg; }
        .city-map-photo:hover,
        .city-map-photo:focus-visible {
            z-index: 8;
            outline: none;
            box-shadow: 9px 15px 28px rgba(0, 0, 0, 0.35);
            transform: translateY(-7px) rotate(0) scale(1.06);
        }
        .city-map-photo img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #e6e3db;
        }
        .city-map-photo::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 50%;
            left: 50%;
            width: 180px;
            height: 1px;
            background: linear-gradient(90deg, rgba(217, 168, 108, 0.7), rgba(217, 168, 108, 0.05));
            transform-origin: left center;
            transform: rotate(var(--line-angle, 0deg));
        }
        .city-map-pin {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            border: 2px solid #151b22;
            border-radius: 50%;
            background: var(--city-accent);
            box-shadow: 0 0 0 5px rgba(217, 168, 108, 0.14);
            transform: translate(-50%, -50%);
        }

        /* 聚焦与经典方案的安全卡位：避免照片过多时绝对定位互相覆盖 */
        .city-wall-overflow-note {
            display: none;
        }

        /* ============ 城市图片墙整体收敛：统一信息层级与画布 ============ */
        #cityView {
            background:
                radial-gradient(720px 460px at 68% 12%, rgba(113, 83, 48, 0.16), transparent 70%),
                #0d1117;
        }
        .city-view-top {
            border-bottom: 1px solid rgba(244, 239, 230, 0.1);
        }
        .city-view-body {
            gap: 44px;
            padding-top: 30px;
        }
        .city-tabs {
            scrollbar-width: thin;
            scrollbar-color: rgba(244, 239, 230, 0.22) transparent;
        }
        .city-stage {
            padding-right: 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(244, 239, 230, 0.22) transparent;
        }
        .city-stage-content {
            width: 100%;
            box-sizing: border-box;
        }
        .city-fp-hero,
        .city-wall-tile,
        .city-tab-thumb {
            background-color: #1a2028;
        }
        .city-fp-desc {
            position: relative;
            color: rgba(244, 239, 230, 0.68);
        }
        .city-fp-desc::before {
            content: "故事";
            display: block;
            margin-bottom: 8px;
            color: var(--city-accent);
            font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.18em;
        }
        .city-fp-wall {
            align-items: start;
        }
        .city-wall-tile {
            overflow: hidden;
        }
        .city-wall-empty {
            display: flex;
            min-height: 140px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border: 1px dashed rgba(244, 239, 230, 0.18);
        }
        @media (min-width: 821px) {
            .city-view-head {
                min-width: 220px;
            }
            .city-stage-content {
                margin-left: 0;
                margin-right: 0;
            }
            .city-tab {
                transform-origin: left center;
            }
            .city-tab.active {
                transform: translateX(4px);
            }
        }
        /* ============ 最终统一方案：米白手账照片墙 ============ */
        #cityView {
            background: #202825;
            color: #3d4038;
        }
        .city-view-top {
            border-bottom: 1px solid rgba(248, 246, 239, 0.12);
        }
        .city-view-eyebrow { color: #d8ae78; }
        #cityViewTitle { color: #f4efe6; }
        #cityViewStats { color: rgba(244, 239, 230, 0.62); }
        .city-view-nav { gap: 7px; }
        .city-view-body {
            align-items: flex-start;
            gap: 34px;
            overflow: hidden;
        }
        .city-stage {
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 8px 28px 0;
        }
        .city-stage-content {
            display: block;
            width: 100%;
            max-width: 980px;
            margin: 0 auto;
        }
        .city-fp-hero,
        .city-fp-desc,
        .city-fp-wall,
        .city-map-wall {
            display: none !important;
        }
        .city-journal-wall {
            position: relative;
            padding: 34px 38px 36px;
            background:
                linear-gradient(rgba(118, 92, 61, 0.035) 1px, transparent 1px),
                #f3eee2;
            background-size: 100% 34px;
            color: #3d4038;
            box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25);
        }
        .city-journal-wall::before {
            content: "";
            position: absolute;
            inset: 12px;
            border: 1px solid rgba(118, 92, 61, 0.18);
            pointer-events: none;
        }
        .city-journal-head {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 8px 18px;
            padding: 0 0 18px;
            border-bottom: 1px solid rgba(118, 92, 61, 0.22);
        }
        .city-journal-kicker {
            grid-column: 1 / -1;
            color: #8b6e52;
            font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.2em;
        }
        .city-journal-head h3 {
            margin: 0;
            color: #35423d;
            font: 400 32px/1.2 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-journal-head time {
            color: #9b704e;
            font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.05em;
        }
        .city-journal-count {
            grid-column: 1 / -1;
            color: #9b8874;
            font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.08em;
        }
        .city-journal-description {
            position: relative;
            z-index: 1;
            max-width: 680px;
            margin: 18px 0 20px;
            color: #766049;
            font: 15px/1.9 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-journal-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px 18px;
            padding: 8px 4px 18px;
        }
        .city-journal-card {
            position: relative;
            display: block;
            min-width: 0;
            min-height: 210px;
            padding: 7px 7px 28px;
            border: 1px solid rgba(87, 66, 46, 0.19);
            background: #fffdf7;
            box-shadow: 3px 6px 11px rgba(87, 66, 46, 0.17);
            cursor: zoom-in;
            transform: rotate(var(--journal-rotation, 0deg));
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }
        .city-journal-card:nth-child(3n + 1) { --journal-rotation: -1.6deg; }
        .city-journal-card:nth-child(3n + 2) { --journal-rotation: 1.1deg; }
        .city-journal-card:nth-child(3n) { --journal-rotation: -0.6deg; }
        .city-journal-card:hover,
        .city-journal-card:focus-visible {
            z-index: 3;
            outline: none;
            box-shadow: 8px 14px 22px rgba(87, 66, 46, 0.25);
            transform: translateY(-6px) rotate(0) scale(1.025);
        }
        .city-journal-card img {
            display: block;
            width: 100%;
            height: 220px;
            object-fit: cover;
            background: #e6e3db;
        }
        .city-journal-card:nth-child(4n + 1) img { height: 260px; }
        .city-journal-caption {
            position: absolute;
            right: 9px;
            bottom: 8px;
            left: 9px;
            overflow: hidden;
            color: #766049;
            font: 11px/1.2 "Noto Serif SC", "Songti SC", "STSong", serif;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .city-journal-empty {
            grid-column: 1 / -1;
            padding: 74px 0;
            color: #8b6e52;
            text-align: center;
            font: 14px/1.6 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-journal-more {
            position: relative;
            z-index: 1;
            display: block;
            margin: 12px auto 0;
            padding: 10px 22px;
            border: 1px solid rgba(118, 92, 61, 0.34);
            border-radius: 2px;
            background: rgba(255, 253, 247, 0.72);
            color: #6e5945;
            font: 12px/1 "Noto Serif SC", "Songti SC", "STSong", serif;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }
        .city-journal-more:hover,
        .city-journal-more:focus-visible {
            outline: none;
            background: #6e5945;
            color: #fffdf7;
            transform: translateY(-2px);
        }
        @media (min-width: 821px) {
            .city-tabs {
                width: 260px;
                flex-basis: 260px;
                padding: 16px 10px 16px 0;
                border-left: 0;
                border-right: 1px solid rgba(248, 246, 239, 0.14);
                box-sizing: border-box;
            }
            .city-tabs::before {
                margin: 0 12px 14px;
                color: #d8ae78;
                content: "THIS CITY / 足迹目录";
            }
            .city-tab {
                grid-template-columns: 20px 6px 62px 16px minmax(0, 1fr);
                min-height: 82px;
                gap: 0;
                margin: 0;
                padding: 9px 10px;
                border: 1px solid transparent;
                background: transparent;
                color: #655a4d;
                transform-origin: right center;
            }
            .city-tab:hover {
                background: rgba(255, 253, 247, 0.68);
                border-color: rgba(118, 92, 61, 0.16);
                color: #35423d;
                transform: translateX(-3px);
            }
            .city-tab.active {
                background: #f3eee2;
                border-color: rgba(118, 92, 61, 0.2);
                color: #35423d;
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
                transform: translateX(-4px);
            }
            .city-tab.active::before {
                right: -1px;
                left: auto;
                width: 3px;
                height: 44px;
                background: #b36b4e;
            }
            .city-tab-index { grid-column: 1; color: #a08c76; }
            .city-tab.active .city-tab-index { color: #b36b4e; }
            .city-tab-thumb {
                grid-column: 3;
                width: 62px;
                height: 62px;
                box-sizing: border-box;
                border: 4px solid #fffdf7;
                box-shadow: 0 4px 10px rgba(87, 66, 46, 0.18);
            }
            .city-tab.active .city-tab-thumb {
                border-color: #fffdf7;
                box-shadow: 0 5px 12px rgba(87, 66, 46, 0.24);
            }
            .city-tab-info { grid-column: 5; }
            .city-tab-name {
                color: inherit;
                font-size: 16px;
            }
            .city-tab-meta { color: #a08c76; }
            .city-tab-date { color: #9b704e; }
            .city-tab-photos { color: #a08c76; }
        }

        /* ============ 城市图片墙滚动模型：右侧独立滚动，边界传递到外层 ============ */
        #cityView {
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior-y: auto;
        }
        .city-view-top {
            position: sticky;
            top: 0;
            background: rgba(32, 40, 37, 0.94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .city-view-body {
            flex: 0 0 auto;
            min-height: 0;
            height: calc(100dvh - 108px);
            overflow: visible;
        }
        .city-tabs {
            position: sticky;
            top: 112px;
            align-self: flex-start;
            max-height: calc(100dvh - 150px);
            overflow-x: hidden;
            overflow-y: auto;
        }
        .city-stage {
            height: calc(100dvh - 150px);
            min-height: 420px;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior-y: auto;
            scrollbar-gutter: stable;
        }
        .city-stage-content {
            padding-bottom: 54px;
        }
        .city-journal-wall {
            margin-bottom: 28px;
        }
        /* ============ cityView 最终浅色统一 ============ */
        #cityView {
            background: #e8e0d2;
            color: #3d4038;
            overflow: hidden;
        }
        .city-view-top {
            background: rgba(243, 238, 226, 0.96);
            border-bottom: 1px solid rgba(118, 92, 61, 0.18);
            box-shadow: 0 4px 18px rgba(87, 66, 46, 0.08);
        }
        .city-view-eyebrow { color: #9b704e; }
        #cityViewTitle { color: #35423d; }
        #cityViewStats { color: #8b7865; }
        #cityViewBack,
        .city-view-nav button {
            border-color: rgba(118, 92, 61, 0.25);
            background: rgba(255, 253, 247, 0.58);
            color: #6e5945;
        }
        #cityViewBack:hover,
        .city-view-nav button:hover {
            border-color: #6e5945;
            background: #6e5945;
            color: #fffdf7;
        }
        .city-view-body {
            min-height: 0;
            height: calc(100dvh - 108px);
            background: #e8e0d2;
            overflow: hidden !important;
        }
        .city-tabs {
            scrollbar-color: rgba(118, 92, 61, 0.28) transparent;
        }
        .city-stage {
            scrollbar-color: rgba(118, 92, 61, 0.28) transparent;
        }
        .city-stage-content {
            padding-bottom: 44px;
        }
        /* ============ 自然比例手账瀑布流 ============ */
        .city-journal-grid {
            display: block;
            columns: 3;
            column-gap: 18px;
            padding: 12px 4px 24px;
        }
        .city-journal-card {
            display: block;
            width: 100%;
            min-height: 0;
            height: auto;
            margin: 0 0 22px;
            box-sizing: border-box;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            transform: rotate(var(--journal-rotation, 0deg));
        }
        .city-journal-card img,
        .city-journal-card:nth-child(4n + 1) img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 620px;
            min-height: 0;
            object-fit: contain;
        }
        .city-journal-card .city-journal-caption {
            position: static;
            display: block;
            margin-top: 8px;
            overflow: hidden;
            color: #766049;
            font: 11px/1.45 "Noto Serif SC", "Songti SC", "STSong", serif;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .city-journal-empty {
            display: block;
            break-inside: avoid;
        }
        .city-journal-more {
            clear: both;
        }

        /* 城市图片墙顶部：将三排信息收敛为一行紧凑标题栏 */
        .city-view-top {
            padding-top: 14px;
            padding-bottom: 12px;
        }
        .city-view-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 0;
            text-align: center;
            transform: none;
        }
        /* 标题行：足迹 / 城市名 / 统计。到访条和票根入口都在它下面另起一行，
           否则到访一多就会把这行撑宽，把城市名顶到一边（旧版就是这个问题） */
        .city-view-headline {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 14px;
            max-width: 100%;
        }
        /* 操作行：到访条 +「看这座城市的 N 张票根」，整行居中 */
        .city-view-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            max-width: 100%;
        }
        .city-view-meta[hidden],
        .city-view-timeline[hidden] {
            display: none;
        }
        .city-view-meta > * {
            margin-top: 0;
        }
        /* 手机端折叠「到访」用的胶囊：桌面端不显示 */
        .city-view-timeline-toggle {
            display: none;
            align-items: center;
            gap: 4px;
            min-height: 32px;
            padding: 5px 12px;
            border: 1px solid rgba(118, 92, 61, 0.3);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.62);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .city-view-timeline-toggle b {
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .city-view-timeline-toggle:hover,
        .city-view-timeline-toggle:focus-visible {
            border-color: #6e5945;
            background: rgba(255, 253, 247, 0.92);
            color: #35423d;
            outline: none;
        }
        .city-view-timeline-chevron {
            font-style: normal;
            font-size: 10px;
            opacity: 0.6;
            transition: transform 0.18s ease;
        }
        .city-view-timeline.is-expanded .city-view-timeline-chevron {
            transform: rotate(180deg);
        }
        .city-view-eyebrow {
            margin: 0;
            white-space: nowrap;
            font-size: 10px;
            letter-spacing: 0.16em;
        }
        #cityViewTitle {
            margin: 0;
            font-family: "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", cursive;
            font-size: clamp(24px, 2.4vw, 32px);
            font-weight: 400;
            line-height: 1;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }
        #cityViewStats {
            margin: 0;
            color: #8b7865;
            font-size: 11px;
            line-height: 1;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }

        /* 图片加载状态：先给目录缩略图和照片卡片保留稳定的视觉占位 */
        .city-tab-thumb,
        .city-journal-card {
            position: relative;
            overflow: hidden;
        }
        .city-tab-thumb.is-loading::before,
        .city-journal-card.is-loading::before {
            content: "";
            position: absolute;
            z-index: 2;
            inset: 0;
            background: linear-gradient(105deg, #e8dfd1 20%, #f7f0e5 42%, #e8dfd1 64%);
            background-size: 220% 100%;
            animation: cityImageSkeleton 1.25s ease-in-out infinite;
        }
        .city-tab-thumb.is-loading::after,
        .city-journal-card.is-loading::after {
            content: "加载中";
            position: absolute;
            z-index: 3;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9f8c77;
            font: 10px/1 "Noto Serif SC", "Songti SC", serif;
            letter-spacing: 0.08em;
        }
        .city-journal-card.is-loading {
            min-height: 220px;
        }
        .city-tab-thumb.is-loading img,
        .city-journal-card.is-loading img,
        .city-tab-thumb.is-error img,
        .city-journal-card.is-error img {
            opacity: 0;
        }
        .city-tab-thumb.is-error::before,
        .city-journal-card.is-error::before,
        .city-tab-thumb.is-empty::before {
            content: "";
            position: absolute;
            inset: 0;
            background: #e8dfd1;
        }
        .city-tab-thumb.is-error::after,
        .city-journal-card.is-error::after,
        .city-tab-thumb.is-empty::after {
            content: "暂无图片";
            position: absolute;
            z-index: 2;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a18e7a;
            font: 10px/1.2 "Noto Serif SC", "Songti SC", serif;
            letter-spacing: 0.04em;
        }
        @keyframes cityImageSkeleton {
            from { background-position: 100% 0; }
            to { background-position: -100% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .city-tab-thumb.is-loading::before,
            .city-journal-card.is-loading::before {
                animation: none;
            }
        }

        /* ============ 票根档案墙 ============ */
        body.ticket-gallery-open #topNav {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.18s ease, visibility 0.18s;
        }
        body.ticket-gallery-open #cesiumContainer,
        body.ticket-gallery-open #view-2d {
            pointer-events: none;
        }
        /* 票根页透明背景会透出左下角的地图版权信息，打开时一并隐藏 */
        body.ticket-gallery-open #status,
        body.ticket-gallery-open #cesiumContainer .cesium-viewer-bottom,
        body.ticket-gallery-open #cesiumContainer .cesium-widget-credits {
            display: none !important;
        }
        /* 从卡片墙 / 城市图片墙进票根页时，先把底下那层不透明浮层收起来：
           票根页是透明底、要透出 3D 地球，不收起来背景就一直是那张卡片墙。
           这里只改显隐，.show 和滚动位置都保留，关掉票根页时原样放回。 */
        body.ticket-underlay-hidden #cityWall,
        body.ticket-underlay-hidden #cityView {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        #ticketGallery,
        #ticketLightbox {
            position: fixed;
            inset: 0;
            z-index: 11000;
            display: none;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        #ticketGallery.show,
        #ticketLightbox.show {
            display: block;
        }
        #ticketGallery {
            overflow-y: auto;
            overflow-x: hidden;
            color: #f4efe6;
            /* 背景透明：票根页直接透出背后的 3D 地球 */
            /* 时间有色：只改文字强调色，不动任何背景（默认中性暖金，无日期时用这套） */
            --season-accent: #d8ae78;
        }
        .ticket-gallery-top {
            position: sticky;
            top: 0;
            z-index: 5;
            display: grid;
            grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
            align-items: center;
            gap: 20px;
            min-height: 72px;
            padding: max(16px, env(safe-area-inset-top)) 34px 14px;
            /* 与主页面顶部导航一致的轻渐变，不再使用深色面板 */
            background: linear-gradient(180deg, rgba(5, 7, 12, 0.62), rgba(5, 7, 12, 0.28) 72%, transparent);
        }
        .ticket-gallery-heading {
            text-align: center;
        }
        .ticket-gallery-eyebrow,
        .ticket-meta-kicker {
            margin: 0 0 8px;
            color: var(--season-accent);
            font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.2em;
            transition: color 0.8s ease;
        }
        .ticket-gallery-heading h2 {
            margin: 0;
            color: #f4efe6;
            font: 400 clamp(26px, 3vw, 38px)/1.15 "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", cursive;
            letter-spacing: 0.08em;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
        }
        .ticket-gallery-heading p:last-child {
            margin: 8px 0 0;
            color: rgba(244, 239, 230, 0.58);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
        }
        #ticketGalleryBack,
        #ticketLightboxClose,
        #ticketLightboxPrev,
        #ticketLightboxNext {
            appearance: none;
            border: 0;
            background: transparent;
            color: rgba(244, 239, 230, 0.88);
            cursor: pointer;
            transition: color 0.18s ease, background 0.18s ease;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
        }
        #ticketGalleryBack {
            display: inline-flex;
            align-items: center;
            justify-self: start;
            gap: 8px;
            min-height: 44px;
            padding: 9px 14px;
            border-radius: 999px;
            font-size: 12px;
            letter-spacing: 0.08em;
        }
        #ticketGalleryBack svg { width: 17px; height: 17px; }
        #ticketGalleryBack:hover,
        #ticketLightboxClose:hover,
        #ticketLightboxPrev:hover,
        #ticketLightboxNext:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
        }
        #ticketGalleryBack:focus-visible,
        #ticketLightboxClose:focus-visible,
        #ticketLightboxPrev:focus-visible,
        #ticketLightboxNext:focus-visible,
        .ticket-card:focus-visible,
        #ticketLightboxRetry:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.65);
            outline-offset: 3px;
        }
        .ticket-gallery-content {
            width: min(1420px, calc(100% - 68px));
            margin: 0 auto;
            padding: 42px 0 70px;
        }
        .ticket-gallery-grid {
            columns: 3;
            column-gap: 24px;
        }
        .ticket-card {
            display: block;
            width: 100%;
            margin: 0 0 26px;
            padding: 8px 8px 32px;
            break-inside: avoid;
            border: 1px solid rgba(102, 76, 48, 0.28);
            background: #fffdf7;
            box-shadow: 6px 12px 24px rgba(0, 0, 0, 0.25);
            color: #35423d;
            cursor: zoom-in;
            text-align: left;
            transform: rotate(var(--ticket-rotation, 0deg));
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }
        .ticket-card:nth-child(3n + 1) { --ticket-rotation: -1.2deg; }
        .ticket-card:nth-child(3n + 2) { --ticket-rotation: 0.8deg; }
        .ticket-card:nth-child(3n) { --ticket-rotation: -0.45deg; }
        .ticket-card:hover,
        .ticket-card:focus-visible {
            position: relative;
            z-index: 2;
            box-shadow: 12px 20px 32px rgba(0, 0, 0, 0.34);
            transform: translateY(-7px) rotate(0deg) scale(1.018);
        }
        .ticket-card-image {
            position: relative;
            display: block;
            overflow: hidden;
            background: #e8dfd1;
        }
        .ticket-card-image::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.24) 50%, transparent 70%);
            content: "";
            opacity: 0;
            transform: translateX(-100%);
        }
        .ticket-card-image img {
            display: block;
            width: 100%;
            height: auto;
            min-height: 120px;
            object-fit: contain;
        }
        .ticket-card-caption {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 3px 0;
        }
        .ticket-card-caption strong {
            overflow: hidden;
            font: 600 15px/1.3 "Noto Serif SC", "Songti SC", "STSong", serif;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ticket-card-caption span {
            flex: 0 0 auto;
            color: #9b704e;
            font: 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
            white-space: nowrap;
        }
        .ticket-card.is-error .ticket-card-image::before {
            display: flex;
            min-height: 180px;
            align-items: center;
            justify-content: center;
            color: #9b8874;
            content: "票根暂时无法加载";
            font: 12px "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .ticket-card.is-error .ticket-card-image img { display: none; }
        .ticket-gallery-empty {
            padding: 18vh 20px;
            color: rgba(244, 239, 230, 0.72);
            text-align: center;
        }
        .ticket-gallery-empty p {
            margin: 0 0 10px;
            color: #f4efe6;
            font: 400 30px "STXingkai", "华文行楷", cursive;
        }
        .ticket-gallery-empty span { font-size: 13px; letter-spacing: 0.08em; }

        /* 票根灯箱：票根完整展示，右侧补充足迹档案 */
        body.ticket-lightbox-open #ticketGallery { overflow: hidden; }
        #ticketLightbox {
            padding: 7vh 8vw;
            overflow: auto;
            background: rgba(8, 11, 12, 0.94);
            color: #f4efe6;
        }
        .ticket-lightbox-body {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.65fr);
            align-items: center;
            gap: clamp(28px, 6vw, 100px);
            width: min(1300px, 100%);
            min-height: 86vh;
            margin: 0 auto;
        }
        .ticket-lightbox-stage {
            position: relative;
            display: flex;
            min-height: 260px;
            align-items: center;
            justify-content: center;
        }
        #ticketLightboxImage {
            display: block;
            max-width: 100%;
            max-height: 78vh;
            object-fit: contain;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
        }
        .ticket-lightbox-loading,
        .ticket-lightbox-error {
            color: rgba(244, 239, 230, 0.7);
            font-size: 13px;
            letter-spacing: 0.08em;
        }
        .ticket-lightbox-loading[hidden],
        .ticket-lightbox-error[hidden] { display: none; }
        .ticket-lightbox-error {
            display: grid;
            gap: 16px;
            justify-items: center;
        }
        #ticketLightboxRetry {
            min-height: 42px;
            padding: 8px 16px;
            border: 1px solid rgba(244, 239, 230, 0.3);
            background: transparent;
            color: #f4efe6;
            cursor: pointer;
        }
        .ticket-lightbox-meta { max-width: 340px; }
        .ticket-lightbox-meta h2 {
            margin: 0;
            color: #f4efe6;
            font: 400 clamp(30px, 4vw, 56px)/1.15 "STXingkai", "华文行楷", cursive;
            letter-spacing: 0.05em;
        }
        .ticket-meta-subtitle { margin: 8px 0 28px; color: #d8ae78; font-size: 12px; letter-spacing: 0.14em; }
        .ticket-lightbox-meta dl { margin: 0; border-top: 1px solid rgba(244, 239, 230, 0.16); }
        .ticket-lightbox-meta dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(244, 239, 230, 0.11); }
        .ticket-lightbox-meta dt { color: rgba(244, 239, 230, 0.48); font-size: 11px; }
        .ticket-lightbox-meta dd { margin: 0; color: #f4efe6; font-size: 13px; line-height: 1.55; }
        .ticket-meta-description { margin: 24px 0 0; color: rgba(244, 239, 230, 0.68); font: 14px/1.8 "Noto Serif SC", "Songti SC", serif; }
        .ticket-meta-count {
            margin: 28px 0 0;
            color: var(--season-accent);
            font: 11px ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.12em;
            transition: color 0.8s ease;
        }
        #ticketLightboxClose,
        #ticketLightboxPrev,
        #ticketLightboxNext { position: fixed; z-index: 2; border-radius: 50%; }
        #ticketLightboxClose { top: 24px; right: 28px; width: 46px; height: 46px; font-size: 26px; }
        #ticketLightboxPrev,
        #ticketLightboxNext { top: 50%; width: 48px; height: 48px; font-size: 32px; line-height: 1; transform: translateY(-50%); }
        #ticketLightboxPrev { left: 24px; }
        #ticketLightboxNext { right: 24px; }
        #ticketLightboxPrev:hover,
        #ticketLightboxNext:hover { transform: translateY(-50%) scale(1.05); }

        @media (max-width: 1023px) {
            .ticket-gallery-grid { columns: 2; }
            .ticket-lightbox-body { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr); gap: 32px; }
            #ticketLightbox { padding-right: 7vw; padding-left: 7vw; }
        }
        @media (max-width: 700px) {
            .ticket-gallery-top { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px 12px; padding-right: 16px; padding-left: 16px; }
            .ticket-gallery-heading { grid-column: 1; grid-row: 1; }
            #ticketGalleryBack { grid-column: 1; grid-row: 2; justify-self: center; }
            .ticket-gallery-content { width: min(100% - 28px, 560px); padding-top: 24px; }
            .ticket-gallery-grid { columns: 1; }
            .ticket-card { transform: none; }
            .ticket-card:hover,
            .ticket-card:focus-visible { transform: translateY(-3px); }
            #ticketLightbox { padding: 78px 22px 30px; }
            .ticket-lightbox-body { display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: auto; }
            #ticketLightboxImage { max-height: 58vh; }
            .ticket-lightbox-meta { width: min(100%, 430px); }
            #ticketLightboxPrev { left: 10px; }
            #ticketLightboxNext { right: 10px; }
            #ticketLightboxClose { top: 18px; right: 16px; }
        }

        /* 票根页：票夹叠放展示，无左右切换按钮 */
        .ticket-gallery-content {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            min-height: calc(100vh - 120px);
            padding-top: 34px;
            padding-bottom: 64px;
        }
        .ticket-gallery-view {
            display: grid;
            grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.7fr);
            align-items: center;
            gap: clamp(30px, 6vw, 96px);
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
        }
        .ticket-gallery-stage {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            touch-action: pan-y;   /* 横向滑动交给页面处理，用于切换票根 */
        }
        .ticket-wallet {
            position: relative;
            width: 100%;
            margin-bottom: 40px;   /* 给露出的票根边缘留空间 */
            cursor: pointer;
            touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;   /* 移动端点按不出现蓝色高亮框 */
        }
        .ticket-wallet-item {
            display: block;
            width: 100%;
            height: auto;
            /* 不给图片元素加任何背景/圆角：透明票根的透明区域直接透出页面背景，
               避免在图片背后形成一块独立的“盒子” */
            transition: transform 0.32s ease;
            user-select: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: transparent;   /* 点击切换票根时不闪蓝框 */
        }
        .ticket-wallet-item.is-active {
            position: relative;
            z-index: 10;
            cursor: pointer;
        }
        .ticket-wallet-item.is-behind {
            position: absolute;
            left: 0;
            bottom: -16px;   /* 底部对齐并统一露出 16px 边缘 */
            width: 100%;
            height: auto;
            cursor: pointer;
            filter: brightness(0.82) saturate(0.88);
        }
        .ticket-gallery-loading,
        .ticket-gallery-error {
            /* 加载/失败提示按内容紧凑显示，不留任何占位盒 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px 0;
            color: rgba(244, 239, 230, 0.72);
            font-size: 13px;
            letter-spacing: 0.08em;
        }
        .ticket-gallery-loading[hidden],
        .ticket-gallery-error[hidden] { display: none; }
        .ticket-gallery-error {
            flex-direction: column;
            gap: 16px;
        }
        .ticket-gallery-error button {
            min-height: 42px;
            padding: 8px 16px;
            border: 1px solid rgba(244, 239, 230, 0.3);
            background: transparent;
            color: #f4efe6;
            cursor: pointer;
        }
        .ticket-gallery-hint {
            margin: 14px 0 0;
            color: rgba(244, 239, 230, 0.45);
            font-size: 12px;
            letter-spacing: 0.08em;
            text-align: center;
        }
        .ticket-gallery-hint[hidden] { display: none; }
        .ticket-gallery-meta { max-width: 360px; }
        .ticket-gallery-meta h2 {
            margin: 0;
            color: #f4efe6;
            font: 400 clamp(32px, 4vw, 60px)/1.15 "STXingkai", "华文行楷", cursive;
            letter-spacing: 0.05em;
        }
        .ticket-gallery-meta dl { margin: 0; border-top: 1px solid rgba(244, 239, 230, 0.16); }
        .ticket-gallery-meta dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(244, 239, 230, 0.11); }
        .ticket-gallery-meta dt { color: rgba(244, 239, 230, 0.48); font-size: 11px; }
        .ticket-gallery-meta dd { margin: 0; color: #f4efe6; font-size: 13px; line-height: 1.55; }
        /* 图标仅用于横向长串（strip）字幕行；票夹表格里隐藏，避免图标打乱城市/日期行 */
        .ticket-gallery-meta dl > div > svg { display: none; }
        .ticket-gallery-empty { grid-column: 1 / -1; width: 100%; }
        @media (max-width: 900px) {
            /* 移动端：整屏不滚动 —— 顶部栏固定，票根在上、信息在下，共同占满一屏 */
            #ticketGallery.show {
                display: flex;
            }
            #ticketGallery {
                flex-direction: column;
                overflow: hidden;
            }
            .ticket-gallery-top {
                flex: none;
                min-height: 0;
                padding-top: max(8px, env(safe-area-inset-top));
                padding-bottom: 8px;
                gap: 4px 12px;
            }
            .ticket-gallery-eyebrow {
                margin-bottom: 2px;
                font-size: 9px;
                letter-spacing: 0.3em;
                text-indent: 0.3em;
            }
            .ticket-gallery-heading h2 {
                font-size: 24px;
            }
            .ticket-gallery-heading p:last-child {
                margin-top: 2px;
                font-size: 10px;
            }
            .ticket-gallery-content {
                flex: 1 1 auto;
                min-height: 0;
                height: auto;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                width: min(100% - 28px, 700px);
                margin: 0 auto;
                padding-top: 12px;
                padding-bottom: max(14px, env(safe-area-inset-bottom));
            }
            .ticket-gallery-view {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                gap: 12px;
                width: 100%;
                max-width: none;
                margin: 0;
            }
            .ticket-gallery-stage {
                position: relative;
                /* 票夹宽度由内容宽度决定；stage 若保持 flex 列布局，
                   宽高比会被活动票根的内容高度撑破，切到高/方图时整夹会突然变高 */
                display: block;
                width: 100%;
            }
            .ticket-wallet {
                /* 高度由宽度 + 固定宽高比决定，不随屏幕高度变化，
                   切换票根/加载中不跳动，折叠间隙在不同高度手机上保持一致 */
                /* 两侧各留约 32px：后方扇形票根的左右边缘要展开在夹子外，
                   否则第 2 张之后的票根会被屏幕/内容区裁掉，几乎看不到 */
                width: min(100% - 64px, 620px);
                aspect-ratio: 16 / 9;
                height: auto;
                margin: 0 auto 18px;
            }
            .ticket-wallet-item.is-active {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            /* 后面的票根：保持自然比例露出折边；
               仅在超高（会从顶部戳出）时把高度收进展示区，cover 防止被限高后变形 */
            .ticket-wallet-item.is-behind {
                bottom: -14px;
                height: auto;
                max-height: calc(100% + 2px);   /* 顶部留出旋转余量，避免角部戳出 */
                object-fit: cover;
            }
            /* 加载/失败提示浮在票根区中央，不参与布局，避免信息区上下跳动 */
            .ticket-gallery-loading,
            .ticket-gallery-error {
                position: absolute;
                inset: 0;
                z-index: 20;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
            .ticket-gallery-error {
                flex-direction: column;
                gap: 12px;
            }
            /* 移动端：票根下方显示一行小字，提示可左右滑动切换 */
            #ticketGalleryHint:not([hidden]) {
                display: block;
                margin: -8px 0 0;   /* 叠在票夹底部留白上，尽量少占空间 */
                padding: 0;
                font-size: 11px;
                line-height: 1.4;
                letter-spacing: 0.06em;
                color: rgba(244, 239, 230, 0.42);
            }
            .ticket-gallery-meta {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                width: min(100%, 560px);
                max-width: none;
                margin: 0 auto;
            }
            .ticket-meta-kicker { display: none; }
            .ticket-gallery-meta h2 { font-size: 24px; }
            .ticket-meta-subtitle { margin-bottom: 12px; }
            .ticket-gallery-meta dl > div { padding: 8px 0; }
            .ticket-meta-description {
                margin-top: 10px;
                font-size: 13px;
                line-height: 1.6;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .ticket-meta-count { margin-top: 12px; }
        }
        @media (max-width: 520px) {
            .ticket-gallery-content { width: min(100% - 28px, 700px); padding-top: 20px; }
        }
        @media (prefers-reduced-motion: reduce) {
            #ticketGalleryBack,
            #ticketLightboxClose,
            #ticketLightboxPrev,
            #ticketLightboxNext,
            .ticket-wallet-item,
            .ticket-card { transition: none; }
            .ticket-card:hover,
            .ticket-card:focus-visible { transform: none; }
        }

        /* 票根墙使用大图档案布局：页面直接展示可阅读尺寸，不做三列缩略图 */
        .ticket-gallery-content {
            width: min(1500px, calc(100% - 56px));
        }
        .ticket-gallery-grid {
            columns: 2;
            column-gap: 30px;
        }
        .ticket-card {
            padding: 10px 10px 34px;
        }
        .ticket-card-image img {
            min-height: 220px;
        }
        .ticket-card-caption {
            padding: 13px 5px 0;
        }
        .ticket-card-caption strong {
            font-size: 17px;
        }
        @media (max-width: 1023px) {
            .ticket-gallery-grid {
                columns: 1;
                max-width: 920px;
                margin: 0 auto;
            }
        }
        @media (max-width: 700px) {
            .ticket-gallery-content {
                width: min(100% - 28px, 700px);
            }
            .ticket-card-image img {
                min-height: 0;
            }
        }

        /* ================================================================
           票根页：横向长串浏览（strip）＋ 当前票根下方“电影字幕”信息区
           TicketCaption：只作用于 body.ticket-strip-active；票夹样式保持原状。
           ================================================================ */
        .ticket-meta-tagline { display: none; }
        .ticket-meta-pin,
        .ticket-meta-pinyin,
        .ticket-meta-english { display: none; }
        #ticketWallet[hidden],
        #ticketStrip[hidden],
        #ticketStripProgress[hidden],
        #ticketStripHint[hidden] { display: none !important; }
        body.ticket-strip-active #ticketStripHint { display: none; }

        /* —— 纵向容器：主票根在上、字幕信息在下，超高时随页面纵向滚动 —— */
        body.ticket-strip-active .ticket-gallery-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: min(1180px, calc(100% - 48px));
            padding-top: 26px;
            padding-bottom: 64px;
        }
        body.ticket-strip-active .ticket-gallery-view {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0;
            width: 100%;
            max-width: none;
            margin: 0;
        }
        body.ticket-strip-active .ticket-gallery-stage,
        body.ticket-strip-active #ticketStrip {
            display: contents;
        }
        #ticketStrip {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            width: 100%;
        }
        body.ticket-strip-active .ticket-gallery-loading,
        body.ticket-strip-active .ticket-gallery-error {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            /* 这两个提示层铺满整个舞台，会把下面票根串的滚轮 / 拖拽事件一起吃掉
               （表现就是左右切不动票根），所以让事件穿透到票根上 */
            pointer-events: none;
        }
        body.ticket-strip-active .ticket-gallery-error {
            flex-direction: column;
            gap: 12px;
        }
        /* 「重新加载」要能点，单独把按钮的事件收回来 */
        body.ticket-strip-active .ticket-gallery-error button {
            pointer-events: auto;
        }
        body.ticket-strip-active .ticket-gallery-loading[hidden],
        body.ticket-strip-active .ticket-gallery-error[hidden] { display: none; }

        /* —— 横向票根带（滚动 / 拖拽行为保持不变） —— */
        .ticket-strip-scroller {
            position: relative;
            display: flex;
            align-items: center;
            gap: 64px;
            width: 100%;
            max-width: min(1480px, calc(100vw - 48px));
            overflow-x: auto;
            overflow-y: hidden;
            padding: 12px 0 22px;
            cursor: grab;
            touch-action: pan-x pan-y;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            user-select: none;
            -webkit-user-select: none;
        }
        /* 触屏端使用系统原生滚动与惯性，卡片在滚动停止时平滑吸附到中央 */
        @media (hover: none), (pointer: coarse) {
            .ticket-strip-scroller {
                scroll-snap-type: x proximity;
                overscroll-behavior-x: contain;
            }
            .ticket-strip-item {
                scroll-snap-align: center;
            }
        }
        body.ticket-strip-active .ticket-strip-scroller {
            order: 1;
        }
        .ticket-strip-scroller::-webkit-scrollbar { display: none; }
        .ticket-strip-scroller.dragging {
            cursor: grabbing;
            scroll-snap-type: none;
        }
        .ticket-strip-item {
            flex: 0 0 auto;
            display: block;
            width: auto;
            height: auto;
            max-width: min(76vw, 680px);
            max-height: min(68vh, 720px);
            object-fit: contain;
            opacity: 0.32;
            transform: scale(0.88);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: transparent;
        }
        .ticket-strip-item.is-active {
            opacity: 1;
            transform: scale(1);
        }
        .ticket-strip-item.is-error {
            opacity: 0.35;
        }

        /* ================================================================
           TicketCaption：当前票根下方的字幕信息
           无卡片背景，白/浅灰文字悬浮于星空与地球之上。
           ================================================================ */
        body.ticket-strip-active .ticket-caption {
            order: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: min(100%, 680px);
            max-width: 100%;
            margin: 30px auto 0;
            padding: 0 14px;
            box-sizing: border-box;
            color: rgba(250, 249, 245, 0.88);
            text-align: center;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }
        body.ticket-strip-active .ticket-meta-kicker,
        body.ticket-strip-active .ticket-meta-subtitle { display: none; }

        /* 第一行：足迹名称主标题（中文衬线，视觉重点）＋ 右侧城市/省份拼音（AlexBrush 手写体） */
        body.ticket-strip-active .ticket-caption h2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 9px;
            width: 100%;
            margin: 0;
            color: rgba(255, 255, 255, 0.96);
            font: 400 clamp(32px, 4vw, 56px)/1.14 "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", cursive;
            letter-spacing: 0.1em;
            text-indent: 0.1em;
            text-align: center;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
        }
        body.ticket-strip-active .ticket-meta-title-line {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: center;
            column-gap: 0.3em;
            row-gap: 3px;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
        body.ticket-strip-active .ticket-meta-title-text {
            display: inline-block;
            flex: 0 1 auto;
            width: auto;
            max-width: 100%;
            min-width: 0;
            white-space: normal;
            overflow-wrap: break-word;
        }
        body.ticket-strip-active .ticket-meta-pinyin {
            display: inline-block;
            flex: 0 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            color: inherit;
            font-family: "AlexBrush", "Snell Roundhand", "Brush Script MT", cursive;
            font-weight: 400;
            font-size: 0.68em;
            line-height: 1.25;
            letter-spacing: 0.01em;
            word-spacing: 0.14em;
            white-space: nowrap;
            text-indent: 0;
            text-transform: lowercase;
            text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
        }
        body.ticket-strip-active .ticket-meta-pinyin[hidden] { display: none; }
        body.ticket-strip-active .ticket-meta-pin {
            display: inline-block;
            color: rgba(255, 255, 255, 0.72);
            font: 400 0.36em/1 Arial, sans-serif;
            transform: translateY(-0.06em);
        }

        /* 英文辅助行：全大写、宽字距、低对比度，像档案编号 */
        body.ticket-strip-active .ticket-meta-english {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            color: rgba(255, 255, 255, 0.38);
            font: 300 10px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.38em;
            text-indent: 0.38em;
            text-transform: uppercase;
            white-space: normal;
            text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
        }
        body.ticket-strip-active .ticket-meta-english[hidden] { display: none; }

        /* 第二行：地点（城市 · 省份）与日期（细竖线分隔日期，无卡片 / 无标签） */
        body.ticket-strip-active .ticket-caption dl {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0;
            width: auto;
            max-width: 100%;
            margin: 12px 0 0;
            padding: 0;
            border: 0;
            text-align: center;
        }
        body.ticket-strip-active .ticket-caption dl:empty { display: none; }
        body.ticket-strip-active .ticket-caption dl > div {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
            white-space: normal;
            max-width: 100%;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-type,
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-no {
            display: none;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-route { order: 1; }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date {
            order: 2;
            margin-left: 14px;
            padding-left: 14px;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
        }
        body.ticket-strip-active .ticket-caption dl svg { display: none; }
        body.ticket-strip-active .ticket-caption dl dt { display: none; }
        body.ticket-strip-active .ticket-caption dl dd {
            margin: 0;
            color: rgba(255, 255, 255, 0.92);
            font: 300 12.5px/1.55 "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date dd {
            color: rgba(255, 255, 255, 0.92);
            font: 400 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.16em;
        }

        /* 旅行短句：弱化处理，不抢地点标题 */
        body.ticket-strip-active .ticket-meta-description {
            display: block;
            max-width: 560px;
            margin: 14px auto 0;
            padding: 0;
            color: rgba(255, 255, 255, 0.92);
            font: 300 13.5px/1.9 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.05em;
            text-align: center;
        }

        /* 英文辅助句：更小、更淡、宽字距的电影片尾字幕 */
        body.ticket-strip-active .ticket-meta-tagline {
            display: block;
            margin: 10px 0 0;
            padding: 0;
            color: rgba(255, 255, 255, 0.6);
            font: 300 9px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.32em;
            text-indent: 0.32em;
            text-transform: uppercase;
            white-space: normal;
        }
        body.ticket-strip-active .ticket-meta-count { display: none; }

        /* —— 底部指示器：圆角长条分段，当前票根所在段高亮 —— */
        body.ticket-strip-active .ticket-caption-progress {
            order: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0 0;
            color: rgba(255, 255, 255, 0.38);
        }
        body.ticket-strip-active .ticket-progress-side { display: none; }
        body.ticket-strip-active .ticket-progress-rail {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
            width: min(320px, 62vw);
            max-width: calc(100vw - 32px);
        }
        body.ticket-strip-active .ticket-progress-segment {
            appearance: none;
            -webkit-appearance: none;
            flex: 1 1 0;
            min-width: 0;
            height: 3px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.28);
            cursor: pointer;
            transition: background-color 0.25s ease, box-shadow 0.25s ease;
        }
        body.ticket-strip-active .ticket-progress-segment:hover,
        body.ticket-strip-active .ticket-progress-segment:focus-visible {
            outline: none;
            background: rgba(255, 255, 255, 0.58);
        }
        body.ticket-strip-active .ticket-progress-segment.is-current {
            background: #fff;
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.72);
        }

        /* 位置与日期的图标属于信息语义，保持同一套细线风格 */
        body.ticket-strip-active .ticket-caption dl svg {
            display: inline-block;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            color: rgba(255, 255, 255, 0.92);
            vertical-align: -3px;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
                    drop-shadow(0 0 5px rgba(255, 255, 255, 0.16));
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-route,
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province,
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date {
            display: inline-flex;
            align-items: center;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province {
            gap: 0;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province::before {
            content: '·';
            flex: 0 0 auto;
            margin: 0 6px;
            color: rgba(255, 255, 255, 0.92);
            font: 300 12.5px/1 "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date {
            margin-left: 14px;
            padding-left: 14px;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
        }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-route { order: 1; }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province { order: 2; }
        body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date { order: 3; }

        @media (max-width: 520px) {
            body.ticket-strip-active .ticket-progress-rail {
                width: min(260px, 72vw);
            }
            body.ticket-strip-active .ticket-caption dl {
                font-size: 12px;
            }
        }

        /* —— 较小屏幕：允许自然换行与纵向滚动，不挤压主票根 —— */
        @media (max-width: 900px) {
            body.ticket-strip-active #ticketGallery {
                overflow-y: auto;
                overflow-x: hidden;
            }
            body.ticket-strip-active .ticket-gallery-content {
                flex: none;
                min-height: auto;
                height: auto;
                overflow: visible;
                justify-content: flex-start;
                width: min(100% - 28px, 700px);
                padding-top: 10px;
                padding-bottom: max(18px, env(safe-area-inset-bottom));
                gap: 8px;
            }
            body.ticket-strip-active .ticket-gallery-view {
                flex: none;
                justify-content: flex-start;
            }
            body.ticket-strip-active .ticket-strip-scroller {
                gap: 28px;
                max-width: none;
                padding: 6px 0 18px;
            }
            body.ticket-strip-active .ticket-strip-item {
                max-width: min(84vw, 480px);
                max-height: min(38vh, 440px);
            }
            body.ticket-strip-active .ticket-caption {
                width: 100%;
                margin-top: 20px;
                padding: 0 4px;
                overflow: visible;
            }
            body.ticket-strip-active .ticket-caption h2 {
                gap: 7px;
                font-size: clamp(26px, 8vw, 38px);
                letter-spacing: 0.08em;
                text-indent: 0.08em;
            }
            body.ticket-strip-active .ticket-meta-title-line {
                gap: 3px 0.28em;
            }
            body.ticket-strip-active .ticket-meta-pinyin {
                font-size: 0.7em;
                transform: none;
            }
            body.ticket-strip-active .ticket-meta-english {
                font-size: 9px;
                letter-spacing: 0.28em;
                text-indent: 0.28em;
            }
            body.ticket-strip-active .ticket-caption dl {
                margin-top: 10px;
                row-gap: 8px;
            }
            body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date {
                margin-left: 11px;
                padding-left: 11px;
            }
            body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province::before {
                margin: 0 5px;
            }
            body.ticket-strip-active .ticket-caption dl dd {
                font-size: 11.5px;
            }
            body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date dd {
                font-size: 11px;
            }
            body.ticket-strip-active .ticket-meta-description {
                margin-top: 12px;
                font-size: 12.5px;
                line-height: 1.75;
            }
            body.ticket-strip-active .ticket-meta-tagline {
                margin-top: 8px;
                font-size: 8.5px;
                letter-spacing: 0.24em;
                text-indent: 0.24em;
            }
            body.ticket-strip-active .ticket-caption-progress {
                margin-top: 14px;
            }
            body.ticket-strip-active .ticket-progress-rail {
                width: min(190px, 46vw);
            }
        }
        @media (max-width: 420px) {
            body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-date {
                margin-left: 9px;
                padding-left: 9px;
            }
            body.ticket-strip-active .ticket-caption dl > div.ticket-meta-field-province::before {
                margin: 0 4px;
            }
            body.ticket-strip-active .ticket-meta-title-line {
                gap: 2px 0.22em;
            }
            body.ticket-strip-active .ticket-meta-tagline {
                letter-spacing: 0.18em;
                text-indent: 0.18em;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .ticket-strip-item {
                transition: none;
            }
        }

        /* —— 城市图片墙：顶部城市下拉列表（与图片墙同套杂志目录风格） —— */
        .city-view-title-head {
            margin: 6px 0 0;
            font: inherit;
            line-height: inherit;
            text-align: center;
        }
        #cityViewTitle {
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 2px 26px 2px 8px;
            border: 0;
            background: transparent;
            cursor: pointer;
            white-space: nowrap;
        }
        #cityViewTitle::after {
            content: '';
            position: absolute;
            right: 5px;
            top: 50%;
            margin-top: -3px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid currentColor;
            opacity: 0.5;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        #cityViewTitle[aria-expanded="true"]::after {
            transform: rotate(180deg);
            opacity: 0.9;
        }
        #cityViewTitle:focus-visible {
            outline: 2px solid rgba(247, 245, 241, 0.55);
            outline-offset: 4px;
        }
        .city-view-head {
            position: relative;
        }
        #cityViewCityList {
            position: absolute;
            left: 50%;
            top: calc(100% + 12px);
            transform: translateX(-50%);
            z-index: 30;
            box-sizing: border-box;
            width: min(310px, 80vw);
            max-height: min(400px, 48vh);
            overflow-y: auto;
            counter-reset: cityOption;
            padding: 6px 6px 10px;
            border: 1px solid var(--city-line, rgba(244, 239, 230, 0.14));
            border-radius: 8px;
            background: rgba(12, 15, 21, 0.92);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
            color: var(--city-ink, #f4efe6);
            text-align: left;
            scrollbar-width: thin;
            scrollbar-color: rgba(244, 239, 230, 0.18) transparent;
            -webkit-backdrop-filter: blur(22px) saturate(1.1);
            backdrop-filter: blur(22px) saturate(1.1);
        }
        #cityViewCityList[hidden] {
            display: none;
        }
        #cityViewCityList::before {
            content: '选择城市 · CITIES';
            display: block;
            margin: 4px 14px 10px;
            color: var(--city-accent, #d9a86c);
            font-size: 10px;
            letter-spacing: 0.28em;
            text-indent: 0.28em;
        }
        .city-view-city-option {
            appearance: none;
            counter-increment: cityOption;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            box-sizing: border-box;
            padding: 9px 10px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--city-muted, rgba(244, 239, 230, 0.6));
            font: 12.5px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            text-align: left;
            cursor: pointer;
            transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
        }
        .city-view-city-option::before {
            content: counter(cityOption, decimal-leading-zero);
            flex: none;
            width: 22px;
            color: var(--city-faint, rgba(244, 239, 230, 0.34));
            font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.08em;
            opacity: 0.75;
        }
        .city-view-city-option:hover,
        .city-view-city-option:focus-visible {
            outline: none;
            background: rgba(255, 255, 255, 0.05);
            color: var(--city-ink, #f4efe6);
        }
        .city-view-city-option.is-current {
            background: rgba(217, 168, 108, 0.1);
            box-shadow: inset 2px 0 0 var(--city-accent, #d9a86c);
            color: var(--city-ink, #f4efe6);
        }
        .city-view-city-option.is-current::before {
            color: var(--city-accent, #d9a86c);
            opacity: 1;
        }
        .city-view-city-option-name {
            flex: 1 1 auto;
            min-width: 0;
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
            font-size: 15px;
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .city-view-city-option-count {
            flex: none;
            font-size: 10.5px;
            letter-spacing: 0.05em;
            color: var(--city-faint, rgba(244, 239, 230, 0.4));
            white-space: nowrap;
        }

        /* 手账照片墙：滚动到底自动加载的哨兵提示 */
        .city-journal-more-auto {
            display: block;
            width: 100%;
            margin: 4px auto 0;
            padding: 12px 8px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: rgba(244, 239, 230, 0.5);
            font: 11.5px/1.6 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.08em;
            text-align: center;
            cursor: default;
            pointer-events: none;
        }
        .city-journal-more-auto:hover,
        .city-journal-more-auto:focus-visible {
            background: transparent;
            color: rgba(244, 239, 230, 0.5);
            transform: none;
            outline: none;
        }

        /* ============ 城市卡片墙（城市总览目录） ============ */
        /* 打开全屏浮层时顶栏要立刻让位：只写 visibility 会被顶栏自身的 0.6s 过渡拖住，
           结果浮层淡入的这段时间里顶栏一直以 opacity:1 透在下面，约 0.6s 后才突然移除 */
        body.city-view-open #topNav,
        body.city-view-open #pageIntro,
        body.city-wall-open #topNav,
        body.city-wall-open #pageIntro {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.18s ease, visibility 0.18s;
        }
        /* 城市图片墙从卡片墙上方淡入/轻微上移，而不是整页硬切 */
        #cityView {
            transform: translateY(16px);
            transition: opacity 0.26s ease, visibility 0.26s ease,
                transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #cityView.show {
            transform: translateY(0);
        }
        #cityWall {
            position: fixed;
            inset: 0;
            z-index: 10010;   /* 浮层之下、城市图片墙之下（互斥打开，二者不会同屏） */
            display: flex;
            flex-direction: column;
            background: #e8e0d2;
            color: #3d4038;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;
            overflow: hidden;
        }
        #cityWall.show {
            opacity: 1;
            visibility: visible;
        }
        .city-wall-top {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            flex: none;
            display: grid;
            grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
            align-items: center;
            gap: 20px;
            padding: 16px 34px 14px;
            background: rgba(243, 238, 226, 0.96);
            border-bottom: 1px solid rgba(118, 92, 61, 0.18);
            box-shadow: 0 4px 18px rgba(87, 66, 46, 0.08);
            box-sizing: border-box;
        }
        #cityWallBack {
            justify-self: start;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: 1px solid rgba(118, 92, 61, 0.25);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.58);
            color: #6e5945;
            font: 13px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #cityWallBack svg {
            width: 16px;
            height: 16px;
        }
        #cityWallBack:hover {
            border-color: #6e5945;
            background: #6e5945;
            color: #fffdf7;
        }
        #cityWallBack:focus-visible {
            outline: 2px solid #9b704e;
            outline-offset: 2px;
        }
        .city-wall-head {
            text-align: center;
            min-width: 0;
        }
        .city-wall-eyebrow {
            margin: 0 0 5px;
            color: #9b704e;
            font: 600 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.24em;
        }
        #cityWallTitle {
            margin: 0;
            color: #35423d;
            font: 400 clamp(26px, 2.6vw, 38px)/1.15 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.05em;
        }
        #cityWallStats {
            margin: 6px 0 0;
            color: #8b7865;
            font-size: 12px;
            letter-spacing: 0.08em;
        }
        /* 只看某个省：从足迹洞察的省份排行点进来，点掉即恢复全部城市 */
        .city-wall-province-filter {
            display: inline-flex;
            align-items: center;
            margin-top: 8px;
            min-height: 30px;
            padding: 5px 12px;
            border: 1px solid rgba(155, 112, 78, 0.45);
            border-radius: 999px;
            background: rgba(155, 112, 78, 0.14);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease;
        }
        .city-wall-province-filter:hover,
        .city-wall-province-filter:focus-visible {
            background: rgba(155, 112, 78, 0.24);
            border-color: #6e5945;
            outline: none;
        }
        .city-wall-province-filter[hidden] {
            display: none;
        }
        .city-wall-hint {
            justify-self: end;
            margin: 0;
            color: #a39380;
            font-size: 11px;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }
        .city-wall-body {
            flex: 1;
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 36px 44px 64px;
            box-sizing: border-box;
            /* 与城市图片墙一致的细滚动条风格，避免默认滚动条破坏米色杂志版式 */
            scrollbar-width: thin;
            scrollbar-color: rgba(118, 92, 61, 0.28) transparent;
            scrollbar-gutter: stable;
        }
        .city-wall-grid {
            max-width: 1540px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
            gap: 28px;
            align-items: stretch;
        }
        .city-wall-card {
            display: flex;
            flex-direction: column;
            padding: 0;
            border: 1px solid rgba(118, 92, 61, 0.2);
            appearance: none;
            -webkit-appearance: none;
            border-radius: 16px;
            background: #f8f3e8;
            color: #3d4038;
            overflow: hidden;
            cursor: pointer;
            text-align: left;
            font: inherit;
            box-sizing: border-box;
            box-shadow: 0 8px 24px rgba(87, 66, 46, 0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .city-wall-card:hover,
        .city-wall-card:focus-visible {
            transform: translateY(-5px);
            border-color: rgba(118, 92, 61, 0.42);
            box-shadow: 0 16px 34px rgba(87, 66, 46, 0.16);
        }
        .city-wall-card:focus-visible {
            outline: 2px solid #9b704e;
            outline-offset: 2px;
        }
        .city-wall-card-media {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            background: linear-gradient(135deg, #6e5b45 0%, #b09a7d 100%);
            overflow: hidden;
        }
        .city-wall-card-cover {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        .city-wall-card-media.is-loaded .city-wall-card-cover {
            opacity: 1;
        }
        .city-wall-card-media.is-error .city-wall-card-cover {
            display: none;
        }
        .city-wall-card-media::before {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 46%;
            background: linear-gradient(180deg, transparent, rgba(20, 18, 14, 0.42));
            z-index: 1;
            pointer-events: none;
        }
        .city-wall-card.no-cover .city-wall-card-media {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #6e5b45 0%, #b09a7d 100%);
        }
        .city-wall-card.no-cover .city-wall-card-media::before {
            display: none;
        }
        .city-wall-card-monogram {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 253, 247, 0.92);
            font: 400 64px/1 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-wall-card-tickets {
            position: absolute;
            left: 12px;
            bottom: 12px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border: 1px solid rgba(255, 253, 247, 0.3);
            border-radius: 999px;
            background: rgba(24, 21, 16, 0.72);
            color: #f7f1e6;
            font: 500 11px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            /* 它现在是个入口：给出可点的手感（原来只是展示用的徽章） */
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }
        /* 只在悬停/聚焦到徽章本身时高亮（整张卡片悬停不连带点亮）；
           颜色沿用之前的暖金，而不是「明信片」按钮的纸白 */
        .city-wall-card-tickets:hover,
        .city-wall-card-tickets:focus-visible {
            border-color: rgba(231, 178, 119, 0.75);
            background: rgba(24, 21, 16, 0.86);
            color: #f7d6a2;
        }
        .city-wall-card-tickets::after {
            content: "›";
            margin-left: 1px;
            opacity: 0.55;
            transition: transform 0.18s ease, opacity 0.18s ease;
        }
        .city-wall-card-tickets:hover::after,
        .city-wall-card-tickets:focus-visible::after {
            opacity: 1;
            transform: translateX(2px);
        }
        .city-wall-card-body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
            padding: 14px 16px 16px;
            box-sizing: border-box;
        }
        .city-wall-card-eyebrow {
            color: #9b704e;
            font: 600 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.18em;
        }
        .city-wall-card-name {
            color: #35423d;
            font: 400 22px/1.25 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.04em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .city-wall-card-meta {
            color: #6f6253;
            font-size: 12px;
            letter-spacing: 0.04em;
        }
        .city-wall-card-recent {
            margin-top: 6px;
            color: #a39380;
            font-size: 11px;
            letter-spacing: 0.04em;
        }
        .city-wall-empty-view {
            max-width: 560px;
            margin: 12vh auto 0;
            text-align: center;
            color: #8b7865;
            font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .city-wall-empty-view p {
            margin: 0;
            color: #6e5945;
            font-size: 26px;
            letter-spacing: 0.08em;
        }
        .city-wall-empty-view span {
            display: block;
            margin-top: 10px;
            font: 400 12px/1.6 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.08em;
        }
        @media (max-width: 900px) {
            .city-wall-body {
                padding: 24px 22px 48px;
            }
            .city-wall-grid {
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 218px), 1fr));
                gap: 18px;
            }
        }
        @media (max-width: 720px) {
            .city-wall-top {
                grid-template-columns: auto 1fr auto;
                gap: 10px;
                padding: max(10px, env(safe-area-inset-top)) 14px 10px;
            }
            #cityWallBack span,
            .city-wall-hint {
                display: none;
            }
            #cityWallTitle {
                font-size: 22px;
            }
            .city-wall-grid {
                grid-template-columns: repeat(var(--city-wall-mobile-columns, 2), minmax(0, 1fr));
                gap: 12px;
            }
            .city-wall-card-body {
                padding: 10px 12px 12px;
                gap: 3px;
            }
            .city-wall-card-name {
                font-size: 17px;
            }
            .city-wall-card-meta {
                font-size: 11px;
            }
            .city-wall-card-recent {
                margin-top: 3px;
                font-size: 10px;
            }
            /* 每排 2-3 个的紧凑模式：图片为主，次要信息收起，避免图片与文字比例失衡 */
            #cityWall.city-wall-multi .city-wall-card-media {
                aspect-ratio: 4 / 3;
            }
            #cityWall.city-wall-multi .city-wall-card-body {
                padding: 8px 9px 10px;
                gap: 2px;
            }
            #cityWall.city-wall-multi .city-wall-card-eyebrow,
            #cityWall.city-wall-multi .city-wall-card-recent {
                display: none;
            }
            #cityWall.city-wall-multi .city-wall-card-name {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                white-space: normal;
                overflow-wrap: anywhere;
                font-size: 15px;
                line-height: 1.25;
            }
            #cityWall.city-wall-multi .city-wall-card-meta {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 10px;
                color: #8b7865;
            }
            #cityWall.city-wall-multi .city-wall-card-monogram {
                font-size: 40px;
            }
            #cityWall.city-wall-multi .city-wall-card-tickets {
                left: 8px;
                bottom: 8px;
                gap: 4px;
                padding: 3px 7px;
                font-size: 10px;
            }
            .city-wall-card-media {
                aspect-ratio: 16 / 9;
            }
            .city-wall-empty-view {
                margin-top: 18vh;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #cityWall,
            #cityView,
            .city-wall-card {
                transition: none;
            }
            #cityView {
                transform: none;
            }
            .city-wall-card-cover {
                transition: none;
            }
            .city-wall-card:hover,
            .city-wall-card:focus-visible {
                transform: none;
            }
        }

        /* ============ 城市图片墙移动端最终布局：顶部紧凑单行，正文纵向填满 ============ */
        @media (max-width: 820px) {
            /* 顶部栏只保留 返回 / 城市名 / 切换箭头 一行，不再挤压错位 */
            #cityView .city-view-top {
                flex-wrap: nowrap;
                gap: 8px;
                padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
                min-height: 0;
            }
            #cityView .city-view-head {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                min-width: 0;
                flex: 1 1 auto;
            }
            #cityView .city-view-headline {
                gap: 8px;
                min-width: 0;
            }
            #cityView .city-view-meta {
                gap: 8px;
            }
            /* 手机端：到访折成一颗「到访 N 次」胶囊，点开才展开那一排 */
            #cityView .city-view-timeline {
                flex: none;
                max-width: 100%;
            }
            #cityView .city-view-timeline-label {
                display: none;
            }
            #cityView .city-view-timeline-toggle {
                display: inline-flex;
            }
            #cityView .city-view-timeline-list {
                display: none;
                margin: 0;
            }
            #cityView .city-view-timeline.is-expanded {
                flex-direction: column;
                align-items: center;
                gap: 6px;
                width: 100%;
            }
            #cityView .city-view-timeline.is-expanded .city-view-timeline-list {
                display: flex;
                width: 100%;
                max-width: 100%;
                padding: 2px;
                overflow-x: auto;
                scrollbar-width: none;
            }
            #cityView .city-view-eyebrow,
            #cityView #cityViewStats {
                display: none;
            }
            #cityView #cityViewTitle {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 22px;
            }
            #cityView #cityViewBack {
                flex: none;
                padding: 8px;
            }
            #cityView .city-view-nav {
                display: none;
            }

            /* 正文改为纵向填满：足迹目录一行 + 图片墙滚动区，移除旧 sticky 造成的空档 */
            #cityView .city-view-body {
                position: static;
                flex: 1 1 auto;
                height: auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 0;
                overflow: hidden;
            }
            #cityView .city-tabs {
                position: relative;
                top: auto;
                flex: none;
                width: 100%;
                max-width: 100%;
                align-self: stretch;
                box-sizing: border-box;
                height: auto;
                max-height: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 8px 12px 6px;
                touch-action: pan-x pan-y;
                overscroll-behavior-x: contain;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            #cityView .city-tabs::-webkit-scrollbar {
                display: none;
            }
            /* 足迹目录移动端浅色卡片文字：避免旧深色主题的白字残留在米色背景上 */
            #cityView .city-tab {
                flex: none;
                gap: 10px;
                border: 1px solid rgba(118, 92, 61, 0.16);
                border-radius: 12px;
                background: rgba(255, 253, 247, 0.72);
                color: #35423d;
                box-shadow: 0 1px 4px rgba(87, 66, 46, 0.08);
            }
            #cityView .city-tab.active {
                background: #fffdf7;
                border-color: rgba(155, 112, 78, 0.5);
                box-shadow: 0 5px 14px rgba(87, 66, 46, 0.16);
            }
            #cityView .city-tab-name {
                color: #35423d;
                font-size: 15px;
            }
            #cityView .city-tab-meta,
            #cityView .city-tab-photos {
                color: #8b7865;
            }
            #cityView .city-tab-date {
                color: #9b704e;
            }
            #cityView .city-tab-index {
                color: #9b704e;
            }
            /* 目录信息行：移动端不展示照片数量，日期单独成行不再粘连 */
            #cityView .city-tab-photos {
                display: none;
            }
            #cityView .city-tab-meta {
                display: flex;
                align-items: center;
                gap: 6px;
            }
            #cityView .city-stage {
                position: static;
                flex: 1 1 auto;
                height: auto;
                min-height: 0;
                max-height: none;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 0 0 28px;
            }

            /* 手账图片墙：每排 2 张，去掉手机端过大的留白与衬边 */
            #cityView .city-journal-wall {
                padding: 18px 14px 22px;
                box-shadow: none;
            }
            #cityView .city-journal-head {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
                padding: 0 0 12px;
            }
            #cityView .city-journal-kicker {
                margin-bottom: 6px;
            }
            #cityView .city-journal-head h3 {
                margin: 0;
                font-size: 24px;
                line-height: 1.25;
            }
            #cityView .city-journal-head time {
                margin-top: 2px;
                color: #9b704e;
                font-size: 11px;
                letter-spacing: 0.06em;
            }
            #cityView .city-journal-count {
                display: none;
            }
            #cityView .city-journal-description {
                margin: 12px 0 14px;
                font-size: 13px;
                line-height: 1.75;
            }
            #cityView .city-journal-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: start;
                gap: 12px 10px;
                padding: 8px 2px 12px;
            }
            #cityView .city-journal-card {
                margin: 0;
                break-inside: auto;
                -webkit-column-break-inside: auto;
            }
            #cityView .city-journal-card img,
            #cityView .city-journal-card:nth-child(4n + 1) img {
                display: block;
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 3;
                max-height: none;
                min-height: 0;
                object-fit: cover;
            }
        }

        /* ============ 图片灯箱浅色版：与城市图片墙/卡片墙的米色风格统一 ============ */
        #lightbox {
            background: rgba(232, 224, 210, 0.94);
            color: #3d4038;
            backdrop-filter: blur(14px) saturate(110%);
            -webkit-backdrop-filter: blur(14px) saturate(110%);
            transition: opacity 0.24s ease, visibility 0.24s ease;
        }
        /* 图片直接贴在灯箱底上：去掉图片后面那层米白面板、描边和阴影，
           否则竖图 / 小图四周会多出一圈"白底"。
           图片自己的底色也一并设为透明，避免 PNG 透明区透出米白。 */
        .lightbox-stage {
            box-sizing: border-box;
            border: 0;
            background: transparent;
            box-shadow: none;
        }
        #lightboxImg {
            box-shadow: none;
            border-radius: 0;
            background: transparent;
        }
        .lightbox-skeleton {
            background: linear-gradient(110deg, rgba(118, 92, 61, 0.05) 40%, rgba(155, 112, 78, 0.13) 50%, rgba(118, 92, 61, 0.05) 60%);
        }
        .lightbox-error {
            color: #8b7865;
        }
        .lightbox-error button {
            border-color: rgba(118, 92, 61, 0.4);
            color: #6e5945;
        }
        .lightbox-error button:hover {
            background: #6e5945;
            color: #fffdf7;
        }
        #lightboxClose,
        #lightboxPrev,
        #lightboxNext {
            border: 1px solid rgba(118, 92, 61, 0.3);
            background: rgba(255, 253, 247, 0.82);
            color: #6e5945;
            box-shadow: 0 8px 22px rgba(87, 66, 46, 0.12);
        }
        #lightboxClose:hover,
        #lightboxPrev:hover,
        #lightboxNext:hover {
            background: #6e5945;
            color: #fffdf7;
        }
        #lightboxClose:focus-visible,
        #lightboxPrev:focus-visible,
        #lightboxNext:focus-visible,
        #lightboxRetry:focus-visible {
            outline: 2px solid #9b704e;
            outline-offset: 2px;
        }
        .lightbox-meta {
            gap: 14px;
            padding: 9px 18px;
            border: 1px solid rgba(118, 92, 61, 0.18);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.86);
            color: #6e5945;
            text-shadow: none;
            box-shadow: 0 10px 28px rgba(87, 66, 46, 0.14);
        }
        #lightboxCount {
            color: #9b704e;
        }
        @media (prefers-reduced-motion: reduce) {
            #lightbox {
                transition: none;
            }
        }

        /* ============ 创意功能：卡片容器 / 明信片入口 ============ */
        .city-wall-grid {
            align-items: stretch;
        }
        .city-wall-card-wrap {
            position: relative;
            display: flex;
            min-width: 0;
        }
        .city-wall-card-wrap .city-wall-card {
            flex: 1 1 auto;
            width: 100%;
        }
        .city-wall-card-postcard {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 5;
            padding: 5px 10px;
            border: 1px solid rgba(255, 253, 247, 0.36);
            border-radius: 999px;
            background: rgba(30, 26, 20, 0.58);
            color: #f7f1e6;
            font: 500 11px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .city-wall-card-postcard:hover,
        .city-wall-card-postcard:focus-visible {
            background: #fffdf7;
            color: #6e5945;
            outline: none;
        }

        /* ============ 创意功能：PC 悬停轮播 ============ */
        .city-wall-card-preview {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.45s ease;
        }
        .city-wall-card.is-carouseling .city-wall-card-cover,
        .city-wall-card.is-carouseling .city-wall-card-preview {
            opacity: 0;
        }
        .city-wall-card.is-carouseling .city-wall-card-cover.is-active,
        .city-wall-card.is-carouseling .city-wall-card-preview.is-active {
            z-index: 1;
            opacity: 1;
        }
        .city-wall-card-tickets {
            z-index: 4;
        }
        .city-wall-card-postcard {
            z-index: 5;
        }
        @media (prefers-reduced-motion: reduce) {
            .city-wall-card-preview {
                transition: none;
            }
        }

        /* ============ 创意功能：卡片墙顶栏操作区 ============ */
        .city-wall-actions {
            justify-self: end;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            min-width: 0;
        }
        .city-wall-actions button {
            padding: 7px 13px;
            border: 1px solid rgba(118, 92, 61, 0.24);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.58);
            color: #6e5945;
            font: 12px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            white-space: nowrap;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .city-wall-actions button:hover,
        .city-wall-actions button:focus-visible {
            border-color: #6e5945;
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .city-wall-actions button[hidden] {
            display: none;
        }
        @media (max-width: 820px) {
            .city-wall-actions {
                grid-column: 1 / -1;
                grid-row: 2;
                justify-self: center;
                justify-content: center;
                padding-top: 4px;
            }
        }

        /* ============ 创意功能：通用覆盖层（浅色杂志风） ============ */
        .feature-overlay {
            position: fixed;
            inset: 0;
            z-index: 10016;
            display: flex;
            flex-direction: column;
            background: #e8e0d2;
            color: #3d4038;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.26s ease, visibility 0.26s ease;
        }
        .feature-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        .feature-top {
            flex: none;
            display: grid;
            grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
            align-items: center;
            gap: 14px;
            padding: 14px 30px 12px;
            background: rgba(243, 238, 226, 0.96);
            border-bottom: 1px solid rgba(118, 92, 61, 0.18);
            box-shadow: 0 4px 18px rgba(87, 66, 46, 0.08);
            box-sizing: border-box;
        }
        .feature-back {
            justify-self: start;
            padding: 8px 15px;
            border: 1px solid rgba(118, 92, 61, 0.25);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.58);
            color: #6e5945;
            font: 13px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .feature-back:hover,
        .feature-back:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .feature-head {
            text-align: center;
            min-width: 0;
        }
        .feature-eyebrow {
            margin: 0 0 5px;
            color: #9b704e;
            font: 600 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
            letter-spacing: 0.22em;
        }
        .feature-head h2 {
            margin: 0;
            color: #35423d;
            font: 400 clamp(24px, 2.5vw, 36px)/1.2 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.04em;
        }
        .feature-head p:last-child {
            margin: 6px 0 0;
            color: #8b7865;
            font-size: 11px;
            letter-spacing: 0.06em;
        }
        .feature-nav {
            justify-self: end;
            display: flex;
            gap: 6px;
        }
        .feature-nav button {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(118, 92, 61, 0.25);
            border-radius: 50%;
            background: rgba(255, 253, 247, 0.7);
            color: #6e5945;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .feature-nav button:hover,
        .feature-nav button:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .feature-nav button[hidden] {
            display: none;
        }
        .feature-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 34px 40px 60px;
            box-sizing: border-box;
            /* 成就卡有 24 枚徽章，这一屏常常要滚动：滚动条收成细的暖色，
               并且常驻占位，翻页时内容不会跟着滚动条一会出现一会消失而左右跳 */
            scrollbar-width: thin;
            scrollbar-color: rgba(118, 92, 61, 0.3) transparent;
            scrollbar-gutter: stable;
        }
        .feature-body::-webkit-scrollbar {
            width: 12px;
        }
        .feature-body::-webkit-scrollbar-track {
            background: transparent;
        }
        .feature-body::-webkit-scrollbar-thumb {
            border: 4px solid transparent;
            border-radius: 999px;
            background: rgba(118, 92, 61, 0.3);
            background-clip: content-box;
        }
        .feature-body::-webkit-scrollbar-thumb:hover {
            background: rgba(118, 92, 61, 0.44);
            background-clip: content-box;
        }

        /* 去年今天 */
        .capsule-card {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.8fr);
            gap: 38px;
            max-width: 1120px;
            margin: 0 auto;
            align-items: center;
        }
        .capsule-shot {
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border: 1px solid rgba(118, 92, 61, 0.16);
            background: #cdbfa6;
            box-shadow: 0 18px 44px rgba(87, 66, 46, 0.16);
        }
        .capsule-shot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .capsule-shot.no-image {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 253, 247, 0.9);
            font: 400 120px/1 "Noto Serif SC", "Songti SC", serif;
        }
        .capsule-info {
            padding: 10px 4px;
        }
        .capsule-eyebrow {
            margin: 0 0 8px;
            color: #9b704e;
            font: 600 10px/1.3 ui-monospace, Consolas, monospace;
            letter-spacing: 0.18em;
        }
        .capsule-info h3 {
            margin: 0 0 8px;
            color: #35423d;
            font: 400 34px/1.3 "Noto Serif SC", "Songti SC", "STSong", serif;
        }
        .capsule-meta {
            margin: 0 0 12px;
            color: #8b7865;
            font-size: 13px;
            letter-spacing: 0.04em;
        }
        .capsule-desc {
            margin: 0 0 22px;
            color: #6f6253;
            font: 15px/1.9 "Noto Serif SC", "Songti SC", serif;
        }
        .capsule-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .capsule-actions button {
            padding: 8px 16px;
            border: 1px solid rgba(118, 92, 61, 0.32);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.8);
            color: #6e5945;
            font: 12px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .capsule-actions button:hover,
        .capsule-actions button:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .capsule-actions button.is-ticket {
            border-color: rgba(155, 112, 78, 0.55);
        }

        /* 足迹洞察：可左右翻页的洞察卡 */
        .insight-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            /* 这一层是 .feature-overlay 的 flex 子项，而 margin: 0 auto 会让它在交叉轴上
               变成「由内容撑开」——那样徽章区的宽度就跟内容走、跟视口无关了。
               所以宽度必须写死成 100%，再靠 max-width 封顶，徽章区才有稳定的参考宽度。
               其余卡片自带更窄的 max-width（统计表 780 / 月份条 640）且 margin auto，不会被拉宽 */
            width: 100%;
            max-width: min(1500px, 100%);
            margin: 0 auto;
        }
        .insight-deck {
            width: 100%;
        }
        .insight-card {
            display: none;
        }
        .insight-card.is-active {
            display: block;
            animation: insightCardIn 0.28s ease both;
        }
        @keyframes insightCardIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: none; }
        }
        .insight-kicker {
            margin: 3vh 0 12px;
            color: #9b704e;
            text-align: center;
            font: 600 11px/1.3 ui-monospace, Consolas, monospace;
            letter-spacing: 0.24em;
        }
        .insight-headline {
            /* 卡片容器现在会随视口变宽（成就卡要铺列），但正文仍限制在可读行宽内居中，
               免得一句话被拉成一整行超长的横条 */
            max-width: 900px;
            margin: 0 auto 26px;
            color: #35423d;
            text-align: center;
            font: 400 clamp(22px, 2.5vw, 34px)/1.55 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.02em;
        }
        /* 「换一个说法」只让这句话淡入，下面的统计表不动 */
        .insight-headline.is-swapping {
            animation: insightTextIn 0.32s ease both;
        }
        @keyframes insightTextIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: none; }
        }
        /* 成就卡标题下的小字：这一屏的称号进度（已解锁 N / 13 个称号） */
        .insight-card-note {
            margin: -14px 0 16px;
            color: #a39380;
            font-size: 11.5px;
            letter-spacing: 0.06em;
            text-align: center;
        }
        .insight-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin: 0 auto;
            max-width: 780px;
            text-align: left;
        }
        .insight-metric {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 16px 18px;
            box-sizing: border-box;
            border: 1px solid rgba(118, 92, 61, 0.14);
            border-radius: 14px;
            background: rgba(255, 253, 247, 0.68);
            color: inherit;
            font: inherit;
            text-align: left;
        }
        .insight-metric-label {
            color: #9b704e;
            font-size: 11px;
            letter-spacing: 0.08em;
        }
        .insight-metric-value {
            color: #35423d;
            font: 400 19px/1.4 "Noto Serif SC", "Songti SC", serif;
            word-break: break-word;
        }
        .insight-metric-hint {
            color: #a39380;
            font-size: 11px;
            font-style: normal;
            letter-spacing: 0.04em;
        }
        /* 可点的数字：点进去直达对应内容（城市墙 / 票根墙 / 某省 / 某座城市） */
        button.insight-metric {
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }
        button.insight-metric:hover,
        button.insight-metric:focus-visible {
            background: #fffdf7;
            border-color: #6e5945;
            transform: translateY(-1px);
            outline: none;
        }
        button.insight-metric:focus-visible {
            box-shadow: 0 0 0 2px rgba(155, 112, 78, 0.45);
        }
        button.insight-metric .insight-metric-label::after {
            content: " ›";
            color: #9b704e;
        }
        /* 12 个月分布条 */
        .insight-months {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 5px;
            margin: 0 auto 22px;
            max-width: 640px;
        }
        .insight-month {
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .insight-month-bar {
            width: 100%;
            max-width: 30px;
            height: calc(8px + var(--month-ratio, 0) * 52px);
            border-radius: 4px 4px 2px 2px;
            background: rgba(216, 174, 120, 0.5);
        }
        .insight-month.is-top .insight-month-bar {
            background: #d8ae78;
        }
        .insight-month.is-empty .insight-month-bar {
            background: rgba(118, 92, 61, 0.16);
        }
        .insight-month em {
            color: #a39380;
            font-size: 10px;
            font-style: normal;
        }
        /* 年份切换等胶囊 */
        .insight-chips {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 0 auto 22px;
        }
        .insight-chip {
            padding: 6px 14px;
            border: 1px solid rgba(118, 92, 61, 0.24);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.62);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .insight-chip:hover,
        .insight-chip:focus-visible {
            background: rgba(255, 253, 247, 0.92);
            border-color: #6e5945;
            outline: none;
        }
        .insight-chip.is-active {
            border-color: #d8ae78;
            background: rgba(216, 174, 120, 0.22);
            color: #5b4a38;
        }
        /* 轻成就 */
        .insight-badges {
            display: grid;
            /* 列数交给浏览器按视口算：最小列宽本身跟着视口伸缩（手机 140px，宽屏封顶 250px），
               再由 auto-fill 决定这一排能放几个，所以不再写死 3 列 / 2 列的断点 */
            grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 30vw, 250px), 1fr));
            gap: 8px;
            margin: 0 auto;
            max-width: 100%;
            text-align: left;
        }
        .insight-badge {
            display: flex;
            align-items: center;
            gap: 9px;
            /* 24 枚徽章排 8 行，单格压扁一点，整张卡才不至于把翻页条顶到屏幕外 */
            padding: 10px 12px;
            border: 1px solid rgba(118, 92, 61, 0.14);
            border-radius: 12px;
            background: rgba(255, 253, 247, 0.6);
            color: #5b4a38;
            font-size: 12.5px;
            line-height: 1.3;
        }
        .insight-badge.is-locked {
            opacity: 0.55;
        }
        .insight-badge-mark {
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(216, 174, 120, 0.28);
            color: #9b704e;
            font-size: 11px;
        }
        .insight-badge.is-earned .insight-badge-mark {
            background: #d8ae78;
            color: #fffdf7;
        }
        .insight-badge-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .insight-badge-text em {
            color: #a39380;
            font-size: 11px;
            font-style: normal;
        }
        /* 页码：可点区域 44×44，视觉上仍是一排小点（当前项是短条），
           外面加一层淡底衬，让人一眼看出这排页码是可以点的 */
        .insight-pager {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 3px 12px;
            border: 1px solid rgba(118, 92, 61, 0.12);
            border-radius: 999px;
            /* 长卡片（成就）滚动时把「页码 + 左右翻页」钉在底部，
               不用先滚到底才能翻下一张；背景跟着做实一点，免得徽章透上来 */
            position: sticky;
            bottom: 4px;
            z-index: 3;
            background: rgba(243, 238, 226, 0.94);
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 10px rgba(87, 66, 46, 0.06);
        }
        .insight-dots {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .insight-dots[hidden] {
            display: none;
        }
        /* 每个点自己独占 30×44 的热区：不重叠，所以点哪儿都是它自己，
           可见的小圆仍是 8px（当前项 22×8 短条） */
        .insight-dot {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 44px;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        .insight-dot::before {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(118, 92, 61, 0.22);
            transition: width 0.2s ease, background 0.18s ease, box-shadow 0.18s ease;
        }
        .insight-dot:hover::before {
            background: rgba(155, 112, 78, 0.6);
        }
        .insight-dot:focus-visible {
            outline: none;
        }
        .insight-dot:focus-visible::before {
            background: #9b704e;
            box-shadow: 0 0 0 3px rgba(155, 112, 78, 0.35);
        }
        .insight-dot.is-active::before {
            width: 22px;
            background: #9b704e;
        }
        .insight-page-count {
            min-height: 30px;
            padding: 6px 12px;
            border: 0;
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.72);
            color: #6e5945;
            font: 500 12px/1.2 ui-monospace, Consolas, monospace;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }
        .insight-page-count:hover,
        .insight-page-count:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        .insight-page-count[hidden] {
            display: none;
        }
        .insight-note {
            margin: 0;
            color: #a39380;
            font-size: 11px;
            letter-spacing: 0.06em;
            text-align: center;
        }
        #insightTitle {
            color: #9b704e;
            font-size: 12px;
            letter-spacing: 0.08em;
        }

        /* 旅行明信片 */
        .postcard-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            padding: 20px 20px 32px;
        }
        .postcard-actions {
            display: flex;
            gap: 12px;
        }
        .postcard-actions button {
            min-height: 44px;
            padding: 10px 22px;
            border: 1px solid rgba(118, 92, 61, 0.34);
            border-radius: 999px;
            /* 不用纸白底：明信片页与写信页背景都是浅褐，白底按钮太跳 */
            background: transparent;
            color: #6e5945;
            font: 500 13px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
        }
        .postcard-actions button:hover,
        .postcard-actions button:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            border-color: #6e5945;
            outline: none;
        }
        .postcard-actions button:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        .postcard-actions button:active {
            transform: scale(0.97);
        }
        .postcard-actions button[hidden] {
            display: none;
        }

        @media (max-width: 820px) {
            .feature-top {
                grid-template-columns: auto 1fr auto;
                gap: 8px;
                padding: max(8px, env(safe-area-inset-top)) 12px 8px;
            }
            .feature-back span {
                font-size: 12px;
            }
            .feature-eyebrow {
                display: none;
            }
            .feature-head h2 {
                font-size: 20px;
            }
            .feature-body {
                padding: 20px 16px 44px;
            }
            .capsule-card {
                grid-template-columns: minmax(0, 1fr);
                gap: 20px;
            }
            .insight-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                text-align: left;
            }
            /* 列数已经由 auto-fill 按视口自动算，这里不再写死；只把单格收紧，
               手机上一格更窄，长文案不至于占太高 */
            .insight-badge {
                gap: 8px;
                padding: 10px 11px;
                font-size: 12px;
            }
            .insight-badge-text em {
                font-size: 10px;
            }
            .insight-months {
                gap: 3px;
            }
            .insight-month em {
                font-size: 9px;
            }
            /* 手机端：热区尺寸不变（30×44），只把页码条收窄一点，保证整排不换行 */
            .insight-pager {
                gap: 10px;
                padding: 2px 10px;
            }
        }
        @media (max-width: 520px) {
            .city-wall-card-postcard {
                top: 5px;
                right: 5px;
                padding: 3px 7px;
                font-size: 10px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .feature-overlay {
                transition: none;
            }
        }

        /* ============ 票根页创意功能 ============ */
        .ticket-gallery-actions {
            justify-self: end;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            min-width: 0;
        }
        #ticketPassportBtn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 36px;
            padding: 7px 13px;
            border: 1px solid rgba(244, 239, 230, 0.28);
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.35);
            color: rgba(244, 239, 230, 0.9);
            font: 500 12px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #ticketPassportBtn:hover,
        #ticketPassportBtn:focus-visible {
            border-color: rgba(244, 239, 230, 0.55);
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            outline: none;
        }
        #ticketPassportBtn[hidden] {
            display: none;
        }
        #ticketPassportCount {
            min-width: 2.2em;
            padding: 1px 6px;
            border-radius: 999px;
            background: rgba(216, 174, 120, 0.22);
            color: #e3c08a;
            font-size: 10px;
            text-align: center;
        }

        .ticket-gallery-stage {
            position: relative;
        }
        .ticket-stamp-badge {
            position: absolute;
            left: 50%;
            top: 7%;
            z-index: 32;
            pointer-events: none;
            max-width: 46%;
            padding: 8px 16px;
            border: 2px solid rgba(231, 178, 119, 0.9);
            border-radius: 10px;
            background: rgba(8, 10, 16, 0.66);
            color: #f0c68e;
            font: 600 13px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.14em;
            text-align: center;
            transform: translateX(-50%) rotate(-7deg);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0;
        }
        .ticket-stamp-badge:not([hidden]) {
            animation: ticketStampIn 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
        }
        .ticket-stamp-badge.is-stale {
            opacity: 1;
            animation: none;
        }
        @keyframes ticketStampIn {
            from { opacity: 0; transform: translateX(-50%) rotate(-16deg) scale(1.35); }
            to   { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(1); }
        }
        /* 横条模式：stage 在 strip 下是 display: contents（不再生成盒子），
           绝对定位的集章徽标会失去定位基准，一路退到 #ticketGallery，
           结果跑到顶栏附近。这里把基准重新绑到横条视图上，并让章压在主票根上沿。 */
        body.ticket-strip-active .ticket-gallery-view {
            position: relative;
        }
        body.ticket-strip-active .ticket-stamp-badge {
            top: 6px;
        }

        .ticket-passport-overlay {
            z-index: 11500;
        }
        .ticket-passport-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr));
            gap: 16px;
            width: min(1080px, 100%);
            margin: 0 auto 12px;
        }
        .ticket-passport-cell {
            position: relative;
            min-width: 0;
            border: 1px solid rgba(118, 92, 61, 0.2);
            border-radius: 13px;
            background: #fffdf7;
            overflow: hidden;
            box-shadow: 3px 5px 12px rgba(87, 66, 46, 0.1);
        }
        .ticket-passport-cell img {
            display: block;
            width: 100%;
            height: 132px;
            object-fit: cover;
            background: #e8dfd1;
        }
        .ticket-passport-cell.is-missing {
            border-style: dashed;
            background: #f3eee2;
        }
        .ticket-passport-cell.is-missing img {
            opacity: 0.26;
            filter: grayscale(1);
        }
        .ticket-passport-cell-title {
            display: block;
            padding: 9px 10px 11px;
            color: #3d4038;
            font: 500 12px/1.4 "Noto Serif SC", "Songti SC", "STSong", serif;
            letter-spacing: 0.04em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ticket-passport-cell-status {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.68);
            color: #f0c68e;
            font-size: 10px;
            letter-spacing: 0.08em;
        }
        .ticket-passport-cell.is-missing .ticket-passport-cell-status {
            background: rgba(255, 253, 247, 0.82);
            color: #9f8c77;
            border: 1px dashed rgba(118, 92, 61, 0.4);
        }
        .ticket-passport-reset {
            display: block;
            margin: 22px auto 0;
            padding: 8px 18px;
            border: 1px solid rgba(118, 92, 61, 0.34);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.72);
            color: #6e5945;
            font-size: 12px;
            letter-spacing: 0.08em;
            cursor: pointer;
        }
        .ticket-passport-reset:hover,
        .ticket-passport-reset:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }

        /* 时间有色：氛围色随票根月份变化（只改环境强调色，不改票根图） */
        #ticketGallery[data-season='spring'] {
            --season-accent: #a4c28a;
        }
        #ticketGallery[data-season='summer'] {
            --season-accent: #e5b06a;
        }
        #ticketGallery[data-season='autumn'] {
            --season-accent: #d69470;
        }
        #ticketGallery[data-season='winter'] {
            --season-accent: #8fb2d3;
        }

        @media (max-width: 700px) {
            .ticket-gallery-top {
                grid-template-columns: minmax(0, 1fr);
            }
            .ticket-gallery-actions {
                grid-column: 1;
                grid-row: 3;
                justify-self: center;
                justify-content: center;
            }
            #ticketPassportBtn {
                padding: 6px 12px;
                font-size: 11px;
            }
            .ticket-passport-grid {
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 142px), 1fr));
                gap: 10px;
            }
            .ticket-stamp-badge {
                max-width: 60%;
                font-size: 11px;
                padding: 6px 12px;
            }
        }

        /* ============ 票根页阶段 B：命运抽票 / 未寄出的明信片 ============ */
        .ticket-overlay-high {
            z-index: 11500;
        }
        #ticketOracleBtn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 36px;
            padding: 7px 13px;
            border: 1px solid rgba(244, 239, 230, 0.28);
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.35);
            color: rgba(244, 239, 230, 0.9);
            font: 500 12px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #ticketOracleBtn:hover,
        #ticketOracleBtn:focus-visible {
            border-color: rgba(244, 239, 230, 0.55);
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            outline: none;
        }
        #ticketOracleBtn[hidden] {
            display: none;
        }

        .ticket-meta-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 16px;
        }
        #ticketLetterBtn {
            padding: 7px 15px;
            border: 1px solid rgba(216, 174, 120, 0.55);
            border-radius: 999px;
            background: transparent;
            color: #e3c08a;
            font: 500 12px/1.3 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        #ticketLetterBtn:hover,
        #ticketLetterBtn:focus-visible {
            background: #d8ae78;
            color: #202825;
            border-color: #d8ae78;
            outline: none;
        }
        #ticketLetterBtn[hidden] {
            display: none;
        }

        .ticket-oracle-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100%;
        }
        /* 卡片必须落在屏幕正中间：只让卡片参与居中，
           下方“灵感文案 + 按钮”用绝对定位挂在卡片底部。
           否则「卡片 + 文案 + 按钮」整组居中会把卡片顶到画面偏上（实测偏高 10~24px）。 */
        .ticket-oracle-stack {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .ticket-oracle-below {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: max-content;
            max-width: min(560px, 90vw);
        }
        .ticket-oracle-card {
            position: relative;
            width: min(520px, 92vw);
            aspect-ratio: 3 / 4;
            /* 给下方文案与按钮留位置，矮屏时卡片自己缩下来 */
            max-height: min(62vh, calc(100vh - 320px));
            border: 1px solid rgba(118, 92, 61, 0.25);
            border-radius: 18px;
            background: #fffdf7;
            box-shadow: 0 24px 60px rgba(87, 66, 46, 0.2);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ticket-oracle-card img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #e8dfd1;
        }
        .ticket-oracle-card.is-back::before {
            /* 用半角 ? ：全角「？」的字形在字身框里靠左，肉眼看着不居中（实测偏左 46px）
               半角问号在常见字体里都是居中字形，且同一字号下墨迹高度几乎一致 */
            content: "?";
            color: rgba(118, 92, 61, 0.18);
            font: 400 180px/1 "Noto Serif SC", "Songti SC", serif;
            /* 行盒按字体基线排，墨迹实测比卡片中心低约 0.058em，这里抬回来 */
            transform: translateY(-0.058em);
        }
        .ticket-oracle-card.is-back {
            background:
                repeating-linear-gradient(45deg, rgba(118, 92, 61, 0.06) 0 10px, transparent 10px 20px),
                #f3eee2;
        }
        .ticket-oracle-card.is-shuffling {
            animation: ticketOracleShuffle 0.16s linear infinite alternate;
        }
        @keyframes ticketOracleShuffle {
            from { transform: translateX(-3px) rotate(-0.6deg); }
            to   { transform: translateX(3px) rotate(0.6deg); }
        }
        .ticket-oracle-inspiration {
            min-height: 2.2em;
            margin: 24px 0 4px;
            color: #766049;
            font: 15px/1.9 "Noto Serif SC", "Songti SC", "STSong", serif;
            text-align: center;
        }
        .ticket-oracle-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 18px;
        }
        .ticket-oracle-actions button {
            padding: 9px 20px;
            border: 1px solid rgba(118, 92, 61, 0.3);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.78);
            color: #6e5945;
            font: 500 13px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }
        .ticket-oracle-actions button:hover,
        .ticket-oracle-actions button:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            transform: translateY(-2px);
            outline: none;
        }
        .ticket-oracle-actions button[disabled] {
            opacity: 0.45;
            cursor: default;
            transform: none;
        }

        .ticket-letter-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 20px 32px;
        }
        /* 滚动安全的垂直居中：用 auto 外边距分配空白，内容超高时不会把顶部裁掉 */
        .ticket-letter-stage,
        .postcard-stage {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ticket-letter-body > .ticket-letter-note {
            margin-bottom: auto;
        }
        .postcard-body > .postcard-actions {
            margin-bottom: auto;
        }
        /* 每页用自己的画布比例；宽度取「最大宽」和「最大高换算出的宽」里更紧的一边，
           高度永远不会被截，也就不会出现左右留白 */
        .ticket-letter-stage {
            --media-ratio: 0.703125;      /* 写信画布 900 × 1280 */
            --media-aspect: 900 / 1280;
        }
        .postcard-stage {
            --media-ratio: 0.75;          /* 城市明信片画布 1080 × 1440 */
            --media-aspect: 3 / 4;
        }
        .ticket-letter-skeleton,
        .postcard-skeleton,
        #ticketLetterImg,
        #postcardPreviewImg {
            --media-max-w: min(460px, 90vw);
            --media-max-h: min(78vh, 700px);
            width: min(var(--media-max-w), calc(var(--media-max-h) * var(--media-ratio)));
            aspect-ratio: var(--media-aspect);
            border-radius: 14px;
            background: transparent;   /* 预览图不垫白底 */
            box-shadow: 0 24px 58px rgba(87, 66, 46, 0.24);
        }
        .ticket-letter-skeleton,
        .postcard-skeleton {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #e3d8c6, #cdbfa6);
        }
        .ticket-letter-skeleton::after,
        .postcard-skeleton::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.5) 50%, transparent 82%);
            transform: translateX(-100%);
            animation: ticketLetterShimmer 1.6s ease-in-out infinite;
        }
        @keyframes ticketLetterShimmer {
            to { transform: translateX(100%); }
        }
        .ticket-letter-status,
        .postcard-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 16px;
            color: #8b7865;
            font: 12px/1.7 "Noto Serif SC", "Songti SC", serif;
            text-align: center;
            letter-spacing: 0.04em;
        }
        #ticketLetterRetry,
        #postcardRetry {
            min-height: 38px;
            padding: 8px 18px;
            border: 1px solid rgba(118, 92, 61, 0.3);
            border-radius: 999px;
            background: rgba(255, 253, 247, 0.7);
            color: #6e5945;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
        }
        #ticketLetterRetry:hover,
        #ticketLetterRetry:focus-visible,
        #postcardRetry:hover,
        #postcardRetry:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            outline: none;
        }
        #ticketLetterRetry:focus-visible,
        #postcardRetry:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        #ticketLetterRetry:active,
        #postcardRetry:active {
            transform: scale(0.97);
        }
        #ticketLetterImg,
        #postcardPreviewImg {
            /* 宽度由上面的公式给，高度跟着图片自身比例走 —— 这样永远不会有白边 */
            height: auto;
            display: block;
            object-fit: contain;
        }
        .ticket-letter-stage.is-loading #ticketLetterImg,
        .ticket-letter-stage.is-error #ticketLetterImg,
        .postcard-stage.is-loading #postcardPreviewImg,
        .postcard-stage.is-error #postcardPreviewImg {
            visibility: hidden;
        }
        .ticket-letter-stage.is-ready .ticket-letter-skeleton,
        .postcard-stage.is-ready .postcard-skeleton {
            display: none;
        }
        .ticket-letter-stage.is-ready .ticket-letter-status,
        .postcard-stage.is-ready .postcard-status {
            display: none;
        }
        .ticket-letter-caption {
            margin: 12px 0 0;
            max-width: min(430px, 90vw);
            color: #9f8c77;
            font: 12px/1.7 "Noto Serif SC", "Songti SC", serif;
            text-align: center;
            letter-spacing: 0.05em;
        }
        .ticket-letter-caption:empty {
            display: none;
        }
        .ticket-letter-actions {
            margin-top: 18px;
        }
        .ticket-letter-actions button {
            min-height: 44px;
            padding: 10px 22px;
            /* 不再用纸白底（继承来的 #fffdf7 在这页浅褐底色上很跳），跟页面融为一体 */
            border: 1px solid rgba(118, 92, 61, 0.32);
            background: transparent;
            color: #6e5945;
            font-size: 13px;
            letter-spacing: 0.06em;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
        }
        .ticket-letter-actions button:hover,
        .ticket-letter-actions button:focus-visible {
            background: #6e5945;
            color: #fffdf7;
            border-color: #6e5945;
        }
        .ticket-letter-actions button:active {
            transform: scale(0.97);
        }
        .ticket-letter-actions button:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        /* 加载中不可点：不要白底实心按钮，跟纸面融为一体；
           禁用靠"描边变淡 + 文字变浅"表达，不整体降透明度 */
        #ticketLetterDownload[disabled] {
            border-color: rgba(118, 92, 61, 0.2);
            background: transparent;
            color: rgba(110, 89, 69, 0.48);
            opacity: 1;
            cursor: default;
        }
        /* 禁用时悬停也不要有"可点"的反馈（:hover 与 [disabled] 同权重，必须写在后面） */
        #ticketLetterDownload[disabled]:hover,
        #ticketLetterDownload[disabled]:focus-visible {
            border-color: rgba(118, 92, 61, 0.2);
            background: transparent;
            color: rgba(110, 89, 69, 0.48);
            box-shadow: none;
        }
        .ticket-letter-note {
            margin: 18px 0 0;
            color: #9f8c77;
            font: 12px/1.8 "Noto Serif SC", "Songti SC", serif;
            text-align: center;
            letter-spacing: 0.06em;
        }

        @media (max-width: 700px) {
            .ticket-oracle-card {
                width: min(360px, 88vw);
                max-height: min(52vh, calc(100vh - 320px));
            }
            #ticketOracleBtn {
                padding: 6px 12px;
                font-size: 11px;
            }
            .ticket-meta-actions {
                justify-content: center;
            }
        }

        /* ============ 票根页：视图模式切换器（票夹 / 重走） ============ */
        .ticket-view-modes {
            display: inline-flex;
            align-items: center;
            padding: 3px;
            border: 1px solid rgba(244, 239, 230, 0.22);
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.32);
        }
        .ticket-view-modes[hidden] {
            display: none;
        }
        /* 「只看某座城市」筛选：点掉即恢复全部票根 */
        #ticketCityFilter {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 5px 12px;
            border: 1px solid rgba(231, 178, 119, 0.55);
            border-radius: 999px;
            background: rgba(231, 178, 119, 0.16);
            color: #f0c68e;
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }
        #ticketCityFilter:hover,
        #ticketCityFilter:focus-visible {
            background: rgba(231, 178, 119, 0.3);
            color: #fff3df;
            outline: none;
        }
        #ticketCityFilter:focus-visible {
            box-shadow: 0 0 0 2px rgba(231, 178, 119, 0.85);
        }
        #ticketCityFilter[hidden] {
            display: none;
        }
        .ticket-view-modes button {
            min-height: 28px;
            padding: 4px 13px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(244, 239, 230, 0.72);
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .ticket-view-modes button:hover,
        .ticket-view-modes button:focus-visible {
            color: #ffffff;
            outline: none;
        }
        .ticket-view-modes button.is-active {
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
        }

        @media (max-width: 700px) {
            .ticket-view-modes button {
                padding: 3px 10px;
                font-size: 11px;
            }
        }

        /* ============ 票根页阶段 D：重走一遍（旅程放映） ============ */
        #ticketGallery.is-replay-mode .ticket-gallery-content {
            display: none !important;
        }
        .ticket-replay-view {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: none;
            align-items: center;
            justify-content: center;
            padding-top: 72px;
            box-sizing: border-box;
            overflow: hidden;
            pointer-events: none;
        }
        #ticketGallery.is-replay-mode .ticket-replay-view {
            display: flex;
        }
        .ticket-replay-view[hidden] {
            display: none;
        }
        .ticket-replay-stage {
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: min(440px, 84vw);
            text-align: center;
        }
        .ticket-replay-card {
            position: relative;
            width: min(380px, 72vw);
            aspect-ratio: 3 / 4;
            max-height: 54vh;
            border-radius: 18px;
            border: 1px solid rgba(255, 253, 247, 0.5);
            background: #fffdf7;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: 50% 110%;
        }
        .ticket-replay-card.is-arriving {
            animation: ticketReplayArrive 0.6s cubic-bezier(0.18, 1.2, 0.3, 1) both;
        }
        @keyframes ticketReplayArrive {
            from { opacity: 0; transform: translateY(42px) rotate(3deg) scale(0.94); }
            to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
        }
        .ticket-replay-card img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #e8dfd1;
        }
        .ticket-replay-card.is-missing {
            color: #8b7865;
            font: 400 44px/1.4 "Noto Serif SC", "Songti SC", serif;
        }
        .ticket-replay-bar {
            height: 4px;
            border-radius: 999px;
            background: rgba(244, 239, 230, 0.18);
            overflow: hidden;
        }
        #ticketReplayBarInner {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #d8ae78, #f0c68e);
            transform: scaleX(0);
            transform-origin: left center;
            /* 进度条用 transform 而不是 width：同样线性，但不触发重排 */
            transition: transform 0.6s linear;
        }
        .ticket-replay-end {
            position: absolute;
            inset: 0;
            z-index: 9;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            /* 播完后不要整屏压黑：留出周边让地球上的整条航线露出来 */
            background: radial-gradient(58% 58% at 50% 50%, rgba(5, 7, 12, 0.5), rgba(5, 7, 12, 0.16) 72%, transparent);
            color: #f7f0e5;
            text-align: center;
            pointer-events: none;
        }
        .ticket-replay-end-card {
            pointer-events: auto;
            max-width: min(520px, 88vw);
            padding: 30px 34px 26px;
            border: 1px solid rgba(244, 239, 230, 0.16);
            border-radius: 22px;
            background: rgba(10, 13, 20, 0.84);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            animation: ticketReplayEndIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes ticketReplayEndIn {
            from { opacity: 0; transform: translateY(12px) scale(0.985); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* 播完后收起影院条与角落票根，把舞台交给地球上的航线 */
        .ticket-replay-view.is-ended .ticket-replay-cinema,
        .ticket-replay-view.is-ended #ticketReplayCard,
        .ticket-replay-view.is-ended .ticket-replay-flight {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .ticket-replay-end[hidden] {
            display: none;
        }
        .ticket-replay-end-kicker {
            margin: 0 0 12px;
            color: #d8ae78;
            font: 600 11px/1 ui-monospace, Consolas, monospace;
            letter-spacing: 0.3em;
        }
        .ticket-replay-end h3 {
            margin: 0;
            font: 400 42px/1.3 "STXingkai", "华文行楷", "KaiTi", serif;
            letter-spacing: 0.12em;
        }
        .ticket-replay-end-note {
            margin: 10px 0 0;
            color: rgba(244, 239, 230, 0.52);
            font-size: 12px;
            letter-spacing: 0.06em;
            line-height: 1.7;
        }
        .ticket-replay-end-note[hidden] {
            display: none;
        }
        .ticket-replay-end-range {
            margin: 10px 0 0;
            color: rgba(244, 239, 230, 0.5);
            font: 11px/1.4 ui-monospace, Consolas, monospace;
            letter-spacing: 0.14em;
            font-variant-numeric: tabular-nums;
        }
        .ticket-replay-end-range:empty {
            display: none;
        }
        /* 结算单：四个数字一格，数字在上、单位在下 */
        .ticket-replay-end-metrics {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin: 22px 0 0;
            padding: 18px 4px 16px;
            border-top: 1px solid rgba(244, 239, 230, 0.12);
            border-bottom: 1px solid rgba(244, 239, 230, 0.12);
        }
        .ticket-replay-end-metric {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .ticket-replay-end-metric dt {
            color: rgba(244, 239, 230, 0.42);
            font: 500 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.12em;
            white-space: nowrap;
        }
        .ticket-replay-end-metric dd {
            margin: 0;
            color: #f9f4ea;
            font: 500 26px/1.05 ui-monospace, Consolas, monospace;
            letter-spacing: 0.02em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .ticket-replay-end-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }
        .ticket-replay-end-actions button {
            min-height: 44px;
            padding: 11px 22px;
            border: 1px solid rgba(244, 239, 230, 0.28);
            border-radius: 999px;
            background: transparent;
            color: rgba(247, 240, 229, 0.86);
            font: 500 13px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
        }
        .ticket-replay-end-actions button:active {
            transform: scale(0.96);
        }
        /* 主操作（再看一次）与次操作（回到票夹）要能一眼分开 */
        #ticketReplayAgain {
            border-color: rgba(240, 198, 142, 0.5);
            background: rgba(240, 198, 142, 0.16);
            color: #f4d7ab;
        }
        #ticketReplayAgain:hover,
        #ticketReplayAgain:focus-visible {
            background: rgba(240, 198, 142, 0.26);
            color: #fff3df;
        }
        .ticket-replay-end-actions button:hover,
            .ticket-replay-end-actions button:focus-visible {
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            outline: none;
        }
        .ticket-replay-end-actions button:focus-visible {
            box-shadow: 0 0 0 2px rgba(240, 198, 142, 0.9);
        }

        @media (max-width: 700px) {
            .ticket-replay-view {
                padding-top: 104px;
            }
            .ticket-replay-card {
                width: min(320px, 74vw);
            }
            .ticket-replay-end h3 {
                font-size: 34px;
            }
        }

        /* ============ 重走方案 A：地球为主角，票根收进角落与底部影院条 ============ */
        .ticket-replay-view {
            display: none;
            align-items: stretch;
            justify-content: center;
            pointer-events: none;
        }
        #ticketGallery.is-replay-mode .ticket-replay-view {
            display: block;
        }
        #ticketReplayCard {
            --replay-focus-scale: 1.7;
            position: absolute;
            right: 32px;
            bottom: 150px;
            z-index: 6;
            /* 票根图是宽幅的（实测 2:1 上下），卡片跟着图片比例走：
               之前用 3:4 竖框 + object-fit: contain，一张 2:1 的图只占卡片三分之一，看着当然小 */
            width: min(420px, 46vw);
            aspect-ratio: auto;
            max-height: min(46vh, 420px);
            border-radius: 14px;
            border: 1px solid rgba(255, 253, 247, 0.62);
            background: #fffdf7;
            padding: 6px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
            overflow: hidden;
            /* 点票根 = 放大/收起（方案 A：暂停只冻结，放大改成显式操作） */
            pointer-events: auto;
            cursor: zoom-in;
            transform-origin: center center;
            transform: translate(0, 0) rotate(2deg) scale(1);
            /* 只动 transform：位置与大小都靠它，暂停放大才是平滑的，也不会触发重排 */
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
            will-change: transform;
        }
        #ticketReplayCard:hover {
            cursor: zoom-in;
        }
        #ticketReplayCard:focus-visible {
            outline: 2px solid rgba(240, 198, 142, 0.9);
            outline-offset: 3px;
        }
        /* 暂停：原地站住（摆正 + 微微放大），不再搬到画面中间 */
        #ticketReplayView.is-paused #ticketReplayCard {
            transform: translate(0, 0) rotate(0deg) scale(1.02);
        }
        /* 可点性提示：暂停时常驻，平时悬停出现 */
        #ticketReplayCard::after {
            content: "点开放大";
            position: absolute;
            right: 10px;
            bottom: 10px;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(8, 10, 16, 0.62);
            color: rgba(244, 239, 230, 0.88);
            font: 500 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.08em;
            backdrop-filter: blur(6px);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        #ticketReplayCard:hover::after,
        #ticketReplayView.is-paused #ticketReplayCard::after {
            opacity: 1;
        }
        #ticketReplayView.is-focused #ticketReplayCard {
            cursor: zoom-out;
        }
        #ticketReplayView.is-focused #ticketReplayCard::after {
            content: "收起";
            opacity: 1;
        }
        #ticketReplayCard img {
            display: block;
            width: 100%;
            height: auto;
            max-height: min(46vh, 420px);
            border-radius: 9px;
            object-fit: contain;
            background: #e8dfd1;
        }
        #ticketReplayCard.is-missing {
            width: min(360px, 44vw);
            aspect-ratio: 16 / 9;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #ticketReplayView.is-focused #ticketReplayCard {
            /* 从右下角平移 + 放大到画面中间：50% 相对卡片自身尺寸，
               50vw/50vh 是视口，减掉的 32px/150px 是卡片在角落时的 inset */
            transform:
                translate(calc(32px - 50vw + 50%), calc(150px - 50vh + 50% - 3vh))
                rotate(0deg)
                scale(var(--replay-focus-scale));
        }
        #ticketReplayView.is-flying #ticketReplayCard {
            opacity: 0;
            transform: translate(18px, 0) rotate(3deg) scale(0.96);
            pointer-events: none;
        }
        .ticket-replay-card {
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 入场动画挂在图片上：挂在卡片上会覆盖卡片自己的 transform，
           暂停放大时 translate(-50%,-50%) 失效，卡片就会「跳到中间但没真的居中」 */
        .ticket-replay-card.is-arriving {
            animation: none;
        }
        .ticket-replay-card.is-arriving img {
            animation: ticketReplayPhotoIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes ticketReplayPhotoIn {
            from { opacity: 0; transform: translateY(14px) scale(0.985); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .ticket-replay-cinema {
            position: absolute;
            left: 50%;
            bottom: 18px;
            z-index: 7;
            transform: translateX(-50%);
            width: min(1000px, calc(100% - 40px));
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px 22px;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 12px 16px 12px 20px;
            border: 1px solid rgba(244, 239, 230, 0.2);
            border-radius: 18px;
            background: rgba(8, 10, 16, 0.58);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(10px);
            pointer-events: auto;
            color: #f4efe6;
        }
        /* 底部压一层暗角，地球亮部不会顶掉影院条的文字 */
        .ticket-replay-view::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 220px;
            z-index: 5;
            background: linear-gradient(180deg, rgba(5, 7, 12, 0), rgba(5, 7, 12, 0.5) 62%, rgba(5, 7, 12, 0.72));
            pointer-events: none;
        }
        /* 影院条三块各占两行，高度自然对齐：
           左＝站名 + 状态/里程，中＝进度文字 + 进度条，右＝控件组 */
        .ticket-replay-copy {
            flex: 1 1 240px;
            min-width: 0;
            text-align: left;
        }
        /* 标题行 = 站名 + 同城角标，站名可省略号，角标固定不缩 */
        .ticket-replay-title {
            display: flex;
            align-items: baseline;
            gap: 8px;
            min-width: 0;
        }
        #ticketReplaySubtitle {
            flex: 0 1 auto;
            min-width: 0;
            margin: 0;
            color: #fff8ec;
            font: 500 17px/1.45 "Noto Serif SC", "Songti SC", serif;
            letter-spacing: 0.06em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-shadow: none;
        }
        .ticket-replay-city-badge {
            flex: none;
            padding: 2px 9px;
            border: 1px solid rgba(240, 198, 142, 0.28);
            border-radius: 999px;
            background: rgba(240, 198, 142, 0.14);
            color: #f0c68e;
            font: 500 11px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.04em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .ticket-replay-city-badge[hidden] {
            display: none;
        }
        #ticketReplayRoute {
            margin: 0;
            color: rgba(244, 239, 230, 0.7);
            font-size: 12px;
            letter-spacing: 0.12em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-shadow: none;
        }
        /* 状态文字 + 里程数字：数字单独强调，移动中一眼能看到距离；
           「·」分隔符用伪元素，空值直接不占位 */
        .ticket-replay-meta {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin: 5px 0 0;
            min-height: 19px;
            overflow: hidden;
            white-space: nowrap;
        }
        .ticket-replay-distance:not(:empty)::before,
        .ticket-replay-total:not(:empty)::before {
            content: "·";
            margin-right: 8px;
            color: rgba(244, 239, 230, 0.28);
        }
        .ticket-replay-total {
            flex: none;
            color: rgba(244, 239, 230, 0.45);
            font: 500 12px/1.4 ui-monospace, Consolas, monospace;
            letter-spacing: 0.06em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .ticket-replay-total:empty {
            display: none;
        }
        .ticket-replay-distance {
            flex: none;
            color: #f0c68e;
            font: 600 12px/1.4 ui-monospace, Consolas, monospace;
            letter-spacing: 0.06em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .ticket-replay-distance:empty {
            display: none;
        }
        /* 飞行途中：距离轻微呼吸，表示这个数在走 */
        #ticketReplayView.is-flying .ticket-replay-distance {
            animation: ticketReplayKmPulse 1.6s ease-in-out infinite;
        }
        @keyframes ticketReplayKmPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.62; }
        }
        .ticket-replay-progress {
            flex: none;
            width: 190px;
            margin: 0;
            color: rgba(244, 239, 230, 0.72);
        }
        .ticket-replay-progress-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 7px;
        }
        #ticketReplayProgressText {
            font: 11px/1 ui-monospace, Consolas, monospace;
            letter-spacing: 0.14em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        #ticketReplayEta {
            color: rgba(244, 239, 230, 0.45);
            font: 10px/1 ui-monospace, Consolas, monospace;
            letter-spacing: 0.08em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        #ticketReplayEta:empty {
            display: none;
        }
        /* 右边控件分两级：走带（上一站/播放/下一站）做成一段胶囊，
           变速 / 查看这张票 / 退出 做成轻量文字按钮，避免六个按钮一字排开 */
        .ticket-replay-actions {
            flex: none;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-left: 14px;
            border-left: 1px solid rgba(244, 239, 230, 0.12);
        }
        .ticket-replay-transport {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            border: 1px solid rgba(244, 239, 230, 0.16);
            border-radius: 999px;
            background: rgba(244, 239, 230, 0.06);
        }
        .ticket-replay-transport button {
            min-width: 40px;
            height: 32px;
            padding: 0 12px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(244, 239, 230, 0.9);
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
        }
        .ticket-replay-transport button:hover,
        .ticket-replay-transport button:focus-visible {
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
            outline: none;
        }
        .ticket-replay-transport button:focus-visible {
            box-shadow: 0 0 0 2px rgba(240, 198, 142, 0.85);
        }
        .ticket-replay-transport button:active {
            transform: scale(0.95);
        }
        .ticket-replay-extras {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .ticket-replay-extras button {
            height: 32px;
            padding: 0 10px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: rgba(244, 239, 230, 0.62);
            font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }
        .ticket-replay-extras button:hover,
        .ticket-replay-extras button:focus-visible {
            background: rgba(244, 239, 230, 0.12);
            color: #ffffff;
            outline: none;
        }
        .ticket-replay-extras button:focus-visible {
            box-shadow: 0 0 0 2px rgba(240, 198, 142, 0.85);
        }
        #ticketReplaySpeed {
            min-width: 40px;
            font-variant-numeric: tabular-nums;
        }
        #ticketReplaySpeed.is-on {
            color: #f0c68e;
            background: rgba(240, 198, 142, 0.14);
        }
        /* 飞行提示做成一张「航段卡」：起点 → 终点 + 飞行进度，
           和底部条的「距离」分工，不重复报同一件事 */
        .ticket-replay-flight {
            position: absolute;
            left: 50%;
            top: auto;
            bottom: 172px;
            z-index: 8;
            width: min(400px, 84vw);
            padding: 15px 22px 13px;
            box-sizing: border-box;
            border: 1px solid rgba(244, 239, 230, 0.18);
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(14, 18, 27, 0.86), rgba(8, 10, 16, 0.76));
            box-shadow: 0 22px 50px rgba(0, 0, 0, 0.44);
            backdrop-filter: blur(10px);
            text-align: center;
            color: #f4efe6;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, 10px);
            transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
        }
        .ticket-replay-flight.is-on {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0);
        }
        .ticket-replay-flight .ticket-replay-flight-kicker {
            margin: 0 0 9px;
            color: rgba(244, 239, 230, 0.5);
            font: 11px/1 ui-monospace, Consolas, monospace;
            letter-spacing: 0.28em;
        }
        .ticket-replay-flight-route {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: 0;
        }
        .ticket-replay-flight .ticket-replay-flight-from,
        .ticket-replay-flight .ticket-replay-flight-city {
            display: block;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ticket-replay-flight .ticket-replay-flight-from {
            flex: 0 1 auto;
            color: rgba(244, 239, 230, 0.6);
            font: 400 18px/1.25 "Noto Serif SC", "Songti SC", serif;
            letter-spacing: 0.06em;
        }
        .ticket-replay-flight .ticket-replay-flight-city {
            flex: 0 1 auto;
            color: #fff8ec;
            font: 400 27px/1.25 "STXingkai", "华文行楷", "KaiTi", serif;
            letter-spacing: 0.08em;
            text-shadow: 0 4px 22px rgba(0, 0, 0, 0.5);
        }
        .ticket-replay-flight-arrow {
            flex: none;
            position: relative;
            width: 36px;
            height: 1px;
            background: linear-gradient(90deg, rgba(240, 198, 142, 0.1), rgba(240, 198, 142, 0.85));
        }
        .ticket-replay-flight-arrow::after {
            content: "";
            position: absolute;
            right: -1px;
            top: -3px;
            border: 3.5px solid transparent;
            border-left-color: #f0c68e;
        }
        .ticket-replay-flight-track {
            position: relative;
            height: 2px;
            margin: 14px 0 10px;
            border-radius: 999px;
            background: rgba(244, 239, 230, 0.14);
            overflow: hidden;
        }
        .ticket-replay-flight-track > i {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(216, 174, 120, 0.85), #f0c68e);
            transform: scaleX(0);
            transform-origin: left center;
        }
        /* 飞行 2.3s，进度条同步走完，给「正在移动」一个可见的节奏 */
        .ticket-replay-flight.is-on .ticket-replay-flight-track > i {
            animation: ticketReplayFlightTrack var(--flight-duration, 2.3s) linear forwards;
        }
        @keyframes ticketReplayFlightTrack {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
        .ticket-replay-flight .ticket-replay-flight-km {
            display: block;
            margin: 0;
            color: rgba(244, 239, 230, 0.64);
            font: 12px/1.4 ui-monospace, Consolas, monospace;
            letter-spacing: 0.1em;
            font-variant-numeric: tabular-nums;
        }
        .ticket-replay-end {
            z-index: 12;
        }

        @media (max-width: 700px) {
            .ticket-replay-view {
                padding-top: 104px;
            }
            #ticketReplayCard {
                --replay-focus-scale: 1.4;
                right: 14px;
                bottom: 176px;
                width: min(300px, 62vw);
                max-height: min(34vh, 300px);
            }
            #ticketReplayCard img {
                max-height: min(34vh, 300px);
            }
            #ticketReplayView.is-focused #ticketReplayCard {
                transform:
                    translate(calc(14px - 50vw + 50%), calc(176px - 50vh + 50% - 3vh))
                    rotate(0deg)
                    scale(var(--replay-focus-scale));
            }
            #ticketReplayCard.is-missing {
                width: min(280px, 68vw);
            }
            .ticket-replay-cinema {
                bottom: 10px;
                width: calc(100% - 24px);
                padding: 10px 12px;
                gap: 8px;
                border-radius: 16px;
            }
            .ticket-replay-copy {
                flex-basis: 100%;
                text-align: center;
            }
            .ticket-replay-title {
                justify-content: center;
            }
            .ticket-replay-meta {
                justify-content: center;
                flex-wrap: wrap;
                gap: 4px 10px;
            }
            .ticket-replay-progress {
                flex-basis: 100%;
                width: auto;
            }
            .ticket-replay-actions {
                flex-basis: 100%;
                justify-content: center;
                padding-left: 0;
                border-left: none;
            }
            .ticket-replay-transport button,
            .ticket-replay-extras button {
                /* 移动端按 44px 触控目标来 */
                min-width: 44px;
                height: 44px;
                padding: 0 12px;
            }
            .ticket-replay-flight {
                bottom: 216px;
                width: min(340px, 88vw);
                padding: 13px 18px 11px;
            }
            .ticket-replay-end-card {
                padding: 22px 20px 20px;
                border-radius: 18px;
            }
            .ticket-replay-end-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px 10px;
                margin-top: 18px;
                padding: 16px 4px 14px;
            }
            .ticket-replay-end-metric dd {
                font-size: 23px;
            }
            .ticket-replay-flight .ticket-replay-flight-city {
                font-size: 23px;
            }
            .ticket-replay-flight .ticket-replay-flight-from {
                font-size: 16px;
            }
            .ticket-replay-end-actions button {
                min-height: 44px;
            }
        }

        /* 无障碍：系统减弱动效时关闭票根创意功能的复杂动画（方案 §2.6） */
        @media (prefers-reduced-motion: reduce) {
            .ticket-stamp-badge:not([hidden]) {
                animation: none;
                opacity: 1;
            }
            .ticket-oracle-card,
            .ticket-oracle-card.is-back {
                transition: none;
            }
            .ticket-oracle-card.is-shuffling {
                animation: none;
            }
            .ticket-replay-card.is-arriving,
            .ticket-replay-card.is-arriving img,
            .ticket-replay-card {
                animation: none;
            }
            .ticket-wallet-item,
            .ticket-strip-item,
            #ticketReplayCard {
                transition: none;
            }
            #ticketReplayView.is-flying .ticket-replay-distance {
                animation: none;
            }
            /* 减弱动效时不给飞行进度条做动画，直接显示走完的状态 */
            .ticket-replay-flight.is-on .ticket-replay-flight-track > i {
                animation: none;
                transform: scaleX(1);
            }
            .ticket-replay-end-card {
                animation: none;
            }
        }