/* game-2d.html 页面样式（自 HTML 内联抽取，P0整改） */
/* ===== 绢本行旅图 · 青绿山水七色体系 ===== */
        :root {
            --ink: #2c2418;      /* 墨 */
            --ink-soft: #4a3520; /* 淡墨 */
            --zhu: #C41E3A;      /* 朱砂 */
            --qing: #1E5F8E;     /* 石青 */
            --lv: #4a7c59;       /* 石绿 */
            --zhe: #8B4513;      /* 赭石 */
            --jin: #DAA520;      /* 金粉 */
            --xuan: #f5e6c8;     /* 宣纸 */
            --xuan-deep: #e8dcc8;/* 宣纸沉 */
            --hui: #8b7355;      /* 灰墨 */
            /* 三级书法字体层级（全系统字体栈，零网络字体） */
            --font-title: 'STXingkai','STKaiti','KaiTi',serif;  /* 题字 */
            --font-poem: 'KaiTi','STKaiti','STSong',serif;      /* 诗文 */
            --font-ui: 'STSong','SimSun',serif;                 /* 界面 */
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { overflow-x: hidden; }

        body {
            font-family: var(--font-ui);
            background: var(--ink);
            overflow: hidden;
            color: var(--xuan);
        }

        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            height: 100dvh; /* 动态视口高（移动浏览器地址栏伸缩自适应），老浏览器降级回 100vh */
            overflow: hidden;
        }

        #canvas-2d {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            display: block;
            background: #6b8e23;
        }

        /* 加载界面（卷轴双开式） */
        #loading-screen {
            position: absolute;
            inset: 0;
            z-index: 100;
        }
        .roll-half {
            position: absolute;
            top: 0; bottom: 0;
            width: 50.5%;
            background: linear-gradient(135deg, #2c2418, #4a3520);
            transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1);
            z-index: 0;
        }
        .roll-l { left: 0; border-right: 5px solid #6b4a2a; box-shadow: 6px 0 14px rgba(0,0,0,0.45); }
        .roll-r { right: 0; border-left: 5px solid #6b4a2a; box-shadow: -6px 0 14px rgba(0,0,0,0.45); }
        #loading-screen.unroll .roll-l { transform: translateX(-102%); }
        #loading-screen.unroll .roll-r { transform: translateX(102%); }
        .loading-content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: opacity 0.3s;
        }
        #loading-screen.unroll .loading-content { opacity: 0; }
        .loading-logo {
            font-family: var(--font-title);
            font-size: 40px;
            color: var(--jin);
            margin-bottom: 20px;
            letter-spacing: 10px;
            text-shadow: 0 0 20px rgba(218, 165, 32, 0.5);
        }
        .loading-progress-bar {
            width: 280px;
            height: 8px;
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        .loading-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #DAA520, #ffeb99);
            width: 0%;
            transition: width 0.2s;
        }
        .loading-text {
            margin-top: 14px;
            color: #c8b896;
            font-size: 14px;
        }

        /* 顶部状态栏 */
        #top-bar {
            position: absolute;
            top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px;
            z-index: 10;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            pointer-events: none;
        }
        .stat-chip {
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid var(--jin);
            color: var(--xuan);
            padding: 6px 12px;
            border-radius: 18px;
            font-size: 13px;
            backdrop-filter: blur(6px);
            pointer-events: auto;
            font-variant-numeric: tabular-nums;
        }
        .stat-chip .label { color: #c8b896; margin-right: 4px; }
        .stat-chip .value { color: var(--jin); font-weight: bold; }
        #season-indicator { color: var(--jin); font-weight: bold; letter-spacing: 2px; }
        #progress-ring {
            width: 40px; height: 40px;
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid #8B4513;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(6px);
            pointer-events: auto;
        }
        #progress-ring svg { display: block; }
        #progress-ring-fill { transition: stroke-dashoffset 0.6s ease; }

        /* 工具栏 */
        #toolbar {
            position: absolute;
            top: calc(10px + env(safe-area-inset-top));
            right: 10px;
            z-index: 11;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
            max-width: 60%;
        }
        .tool-btn {
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid #8B4513;
            color: #f5e6c8;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            backdrop-filter: blur(6px);
            transition: all 0.2s;
            font-family: inherit;
        }
        .tool-btn:hover {
            background: rgba(139, 69, 19, 0.85);
            border-color: #DAA520;
            color: #DAA520;
        }

        /* 地图缩放控件 */
        #map-controls {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 11;
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }
        .map-btn {
            width: 38px;
            height: 38px;
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid #8B4513;
            color: #f5e6c8;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(6px);
            transition: all 0.2s;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .map-btn:hover {
            background: rgba(139, 69, 19, 0.85);
            border-color: #DAA520;
            color: #DAA520;
        }
        #zoom-indicator {
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid #8B4513;
            color: #DAA520;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
            backdrop-filter: blur(6px);
            margin-top: 4px;
            min-width: 38px;
        }

        /* 选择面板 */
        .selection-panel {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, rgba(245, 230, 200, 0.97), rgba(232, 220, 200, 0.97));
            border: 3px solid #DAA520;
            border-radius: 16px;
            padding: 28px 32px;
            max-width: 720px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
            z-index: 20;
            display: none;
            color: #4a3520;
        }
        .selection-panel.active {
            display: block;
            animation: panelIn 0.3s ease-out;
        }
        @keyframes panelIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        .panel-title {
            font-family: var(--font-title);
            font-size: 26px;
            color: var(--zhe);
            text-align: center;
            margin-bottom: 6px;
            letter-spacing: 6px;
        }
        .panel-sub {
            text-align: center;
            color: #6b5b3b;
            font-size: 13px;
            margin-bottom: 20px;
        }
        .choice-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
        }
        .choice-card {
            position: relative;
            background: #fff8e7;
            border: 2px solid #c8b896;
            border-radius: 10px;
            padding: 14px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            animation: cardIn 0.35s ease-out backwards;
        }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .choice-thumb {
            width: 56px;
            height: 56px;
            display: block;
            margin: 0 auto 6px;
            pointer-events: none;
        }
        .card-seal {
            position: absolute;
            top: 6px;
            right: 6px;
            min-width: 20px;
            height: 20px;
            line-height: 18px;
            padding: 0 3px;
            border: 1.5px solid var(--zhu);
            border-radius: 3px;
            color: var(--zhu);
            font-size: 12px;
            font-family: var(--font-title);
            background: rgba(255,248,231,0.85);
            transform: rotate(-6deg);
            pointer-events: none;
            box-sizing: border-box;
            text-align: center;
        }
        .choice-card:hover {
            border-color: #DAA520;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3);
        }
        .choice-card.selected {
            border-color: #8B4513;
            background: #fff;
            box-shadow: 0 4px 16px rgba(139, 69, 19, 0.4);
        }
        .choice-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 8px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            pointer-events: none;
        }
        .choice-name {
            font-size: 15px;
            color: #4a3520;
            font-weight: bold;
            margin-bottom: 2px;
            pointer-events: none;
        }
        .choice-desc {
            font-size: 12px;
            color: #8b7355;
            pointer-events: none;
        }
        .panel-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 22px;
        }
        .btn {
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.2s;
        }
        .btn-primary {
            background: linear-gradient(135deg, #8B4513, #a0522d);
            color: #fff;
        }
        .btn-primary:hover { background: linear-gradient(135deg, #a0522d, #c68642); }
        .btn-primary:disabled {
            background: #c8b896;
            color: #8b7355;
            cursor: not-allowed;
        }
        .btn-ghost {
            background: transparent;
            color: #6b5b3b;
            border: 1px solid #c8b896;
        }
        .btn-ghost:hover { background: #f5e6c8; }

        /* 诗词弹窗 */
        #poem-popup {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(245, 230, 200, 0.97), rgba(232, 220, 200, 0.97));
            border: 2px solid #8B4513;
            border-radius: 12px;
            padding: 18px 26px;
            max-width: 460px;
            text-align: center;
            color: #4a3520;
            z-index: 15;
            display: none;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        #poem-popup.show {
            display: block;
            animation: poemIn 0.5s ease-out;
        }
        @keyframes poemIn {
            0% { clip-path: inset(0 0 94% 0); opacity: 0.5; }
            100% { clip-path: inset(0 0 0 0); opacity: 1; }
        }
        #poem-popup::before {
            content: '';
            position: absolute;
            top: 0; left: -7px; right: -7px;
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(180deg, #6b4a2a, #3d2a16);
            box-shadow: 0 2px 4px rgba(0,0,0,0.35);
        }
        #poem-popup.show .poem-title {
            animation: titleSealIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s backwards;
        }
        @keyframes titleSealIn {
            0% { opacity: 0; transform: scale(1.5) rotate(-6deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }
        .poem-title {
            font-family: var(--font-title);
            font-size: 20px;
            color: var(--zhe);
            margin-bottom: 4px;
            letter-spacing: 3px;
        }
        .poem-author {
            font-size: 12px;
            color: var(--hui);
            margin-bottom: 10px;
        }
        .poem-content {
            font-family: var(--font-poem);
            font-size: 15px;
            line-height: 2;
            color: var(--ink-soft);
            white-space: pre-line;
        }
        .poem-content .pc {
            display: inline-block;
            opacity: 0;
            animation: charIn 0.18s ease-out forwards;
        }
        @keyframes charIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .poem-scene {
            margin-top: 8px;
            font-size: 12px;
            color: #a0522d;
            font-style: italic;
        }

        /* 控制提示 */
        #controls-hint {
            position: absolute;
            bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px;
            pointer-events: none;
            background: rgba(44, 36, 24, 0.85);
            border: 1px solid #8B4513;
            color: #c8b896;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            z-index: 10;
            backdrop-filter: blur(6px);
        }
        #controls-hint kbd {
            display: inline-block;
            background: #4a3520;
            color: #DAA520;
            padding: 1px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin: 0 1px;
            border: 1px solid #6b5b3b;
        }

        /* 地点提示 */
        #location-toast {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(139, 69, 19, 0.92);
            color: #fff;
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 12;
            opacity: 0;
            transition: opacity 0.4s;
            border: 1px solid #DAA520;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            pointer-events: none;  /* 纯提示，避免隐形遮挡工具栏点击 */
            max-width: 92vw;
            text-align: center;
        }
        #location-toast.show { opacity: 1; }

        /* 成就提示（基础定位，匾额样式见下方"成就匾额"块） */
        #achievement-toast {
            position: absolute;
            padding: 10px 16px;
            font-size: 13px;
            z-index: 13;
            opacity: 0;
            font-weight: bold;
            pointer-events: none;  /* 纯提示，不参与命中 */
        }

        /* 场景题字（竖排：入XX境） */
        #scene-toast {
            position: absolute;
            top: 50%;
            right: 56px;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            font-family: var(--font-title);
            font-size: 30px;
            letter-spacing: 10px;
            color: var(--zhu);
            text-shadow: 0 1px 0 rgba(255,248,231,0.6), 0 0 18px rgba(196,30,58,0.35);
            z-index: 14;
            opacity: 0;
            pointer-events: none;
            padding: 14px 8px;
            border-left: 1.5px solid rgba(196,30,58,0.5);
            border-right: 1.5px solid rgba(196,30,58,0.5);
            background: linear-gradient(90deg, rgba(245,230,200,0), rgba(245,230,200,0.55), rgba(245,230,200,0));
            transition: opacity 0.5s;
        }
        #scene-toast.show { opacity: 1; }
        #scene-toast span {
            display: inline-block;
            opacity: 0;
            animation: sceneCharIn 0.4s ease-out forwards;
        }
        @keyframes sceneCharIn {
            from { opacity: 0; transform: translateX(14px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* 入诗境宣纸幕 */
        #enter-veil {
            position: absolute;
            inset: 0;
            background: var(--xuan);
            z-index: 18;
            opacity: 0;
            pointer-events: none;
            display: none;
        }
        #enter-veil.fade { opacity: 0; transition: opacity 0.7s ease-out; }
        #enter-veil.hold { opacity: 1; }

        /* 选择确认盖印 */
        .stamp-seal {
            position: absolute;
            top: 50%; left: 50%;
            width: 46px; height: 46px;
            margin: -23px 0 0 -23px;
            border: 2.5px solid var(--zhu);
            border-radius: 6px;
            color: var(--zhu);
            font-family: var(--font-title);
            font-size: 25px;
            line-height: 42px;
            text-align: center;
            background: rgba(255, 248, 231, 0.65);
            pointer-events: none;
            z-index: 3;
            animation: stampIn 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
        }
        .stamp-seal::after {
            content: '';
            position: absolute;
            inset: -2.5px;
            border-radius: 6px;
            box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.45);
            animation: inkSpread 0.55s ease-out forwards;
        }
        @keyframes stampIn {
            0% { opacity: 0; transform: scale(1.7) rotate(-9deg); }
            60% { opacity: 1; transform: scale(0.94) rotate(2deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }
        @keyframes inkSpread {
            to { box-shadow: 0 0 0 13px rgba(196, 30, 58, 0); }
        }

        /* 成就匾额（木底金字·挂耳·自顶降下） */
        #achievement-toast {
            top: 56px;
            left: 50%;
            right: auto;
            background: linear-gradient(180deg, #4a3520, #2c2418);
            border: 2px solid var(--jin);
            border-radius: 5px;
            color: #f2c14e;
            text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 12px rgba(218,165,32,0.35);
            box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 0 18px rgba(218,165,32,0.12);
            transform: translate(-50%, -180%);
            transition: transform 0.55s cubic-bezier(0.25, 1.35, 0.45, 1), opacity 0.4s;
        }
        #achievement-toast::before,
        #achievement-toast::after {
            content: '';
            position: absolute;
            top: -9px;
            width: 5px;
            height: 13px;
            background: linear-gradient(180deg, #DAA520, #8B6914);
            border-radius: 2px;
        }
        #achievement-toast::before { left: 12px; }
        #achievement-toast::after { right: 12px; }
        #achievement-toast.show {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        /* 微交互：工具按钮墨线描边 */
        .tool-btn { position: relative; }
        .tool-btn::after {
            content: '';
            position: absolute;
            left: 8px; right: 8px; bottom: 3px;
            height: 1.5px;
            background: var(--jin);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s ease-out;
            pointer-events: none;
        }
        .tool-btn:hover::after { transform: scaleX(1); }

        /* 微交互：按钮点击涟漪 */
        .btn { position: relative; overflow: hidden; }
        .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.4);
            pointer-events: none;
        }
        .btn:active::after { animation: btnRipple 0.4s ease-out; }
        @keyframes btnRipple {
            from { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.4); }
            to { box-shadow: inset 0 0 0 26px rgba(255, 255, 255, 0); }
        }

        /* 进度环圆满金光 */
        #progress-ring.ring-full { animation: ringGlow 1.1s ease-out 2; }
        @keyframes ringGlow {
            0% { box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75); }
            100% { box-shadow: 0 0 0 16px rgba(218, 165, 32, 0); }
        }

        /* 减弱动效偏好：全量降级为透明度过渡 */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.15s !important;
            }
            #poem-popup.show { clip-path: none; }
        }

        .hint-mobile { display: none; }

        @media (max-width: 600px) {
            .selection-panel { padding: 20px 16px; }
            .choice-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
            .choice-card { padding: 10px 6px; }
            .choice-icon { width: 40px; height: 40px; font-size: 20px; }
            #controls-hint { font-size: 12px; padding: 6px 8px; max-width: 70vw; }
            .stat-chip { font-size: 12px; padding: 4px 8px; }

            /* 移动端防横向溢出：顶部栏/工具栏限宽换行 */
            #top-bar { max-width: calc(100vw - 20px); gap: 6px; }
            #toolbar { max-width: 96vw; }

            /* 备案栏小屏允许折行，避免 nowrap 撑出 543px 横向滚动 */
            #site-beian {
                white-space: normal;
                max-width: 96vw;
                text-align: center;
                line-height: 1.7;
                font-size: 10px;
                padding: 4px 10px;
            }
            .beian-sep { margin: 0 4px; }

            /* C1 触控目标 ≥44px（动态元素内联样式需 !important 覆盖） */
            .tool-btn { padding: 10px 12px; font-size: 13px; min-height: 44px; }
            .map-btn { width: 44px; height: 44px; font-size: 22px; }
            #challenge-popup .btn { min-height: 44px !important; padding: 10px 14px !important; }
            #tab-poemlist, #tab-timeline { min-height: 44px !important; padding: 10px 18px !important; }

            /* C2 触摸专用提示文案切换 */
            .hint-desktop { display: none; }
            .hint-mobile { display: inline; }

            /* C3 顶部布局让位 */
            #top-bar { right: 120px; }
            #toolbar { max-width: 48%; }

            /* C5 弹窗窄屏微调 */
            #poem-popup { bottom: 120px; max-width: 92vw; }
            #challenge-popup { padding: 16px 18px !important; max-width: 92vw !important; }
            #poem-list-panel { max-height: 70vh; }
        }

        /* 备案信息栏（国家标准） */
        #site-beian {
            position: absolute;
            bottom: calc(6px + env(safe-area-inset-bottom));
            left: 50%;
            transform: translateX(-50%);
            z-index: 8;
            font-size: 12px;
            color: #c8b896;
            background: rgba(44, 36, 24, 0.75);
            padding: 4px 14px;
            border-radius: 16px;
            backdrop-filter: blur(4px);
            white-space: nowrap;
            pointer-events: none;
        }
        #site-beian a {
            pointer-events: auto;
            color: #d4c2a0;
            text-decoration: none;
            transition: color 0.2s;
        }
        #site-beian a:hover { color: #DAA520; }
        .beian-sep {
            margin: 0 8px;
            color: #6b5b3b;
        }

        /* 行程总结面板（自动巡游完成） */
        #journey-summary {
            position: absolute;
            inset: 0;
            z-index: 30;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(20, 15, 8, 0.55);
            backdrop-filter: blur(3px);
        }
        #journey-summary.show { display: flex; }
        .summary-card {
            background: linear-gradient(135deg, rgba(245, 230, 200, 0.98), rgba(232, 220, 200, 0.98));
            border: 3px solid #DAA520;
            border-radius: 16px;
            padding: 26px 30px;
            max-width: 420px;
            width: 88%;
            text-align: center;
            color: #4a3520;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
            animation: summaryIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }
        @keyframes summaryIn {
            from { transform: translateY(24px) scale(0.94); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        .summary-title {
            font-family: var(--font-title);
            font-size: 30px;
            letter-spacing: 8px;
            color: #8B4513;
            margin-bottom: 6px;
        }
        .summary-sub { font-size: 13px; color: #6b5b3b; margin-bottom: 16px; }
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 18px;
        }
        .summary-item { display: flex; flex-direction: column; gap: 2px; }
        .summary-item .num {
            font-size: 22px;
            font-weight: bold;
            color: #C41E3A;
            font-variant-numeric: tabular-nums;
        }
        .summary-item .lbl { font-size: 11px; color: #6b5b3b; }
        .summary-actions { display: flex; gap: 10px; justify-content: center; }
        @media (max-width: 600px) {
            .summary-card { padding: 20px 16px; }
            .summary-title { font-size: 24px; letter-spacing: 5px; }
            .summary-grid { grid-template-columns: repeat(2, 1fr); }
        }

/* ===== P0整改追加 ===== */
/* 屏幕阅读器专用 h1（视觉隐藏，语义保留） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* 画布手势完全交由 JS 控制（遥感/双指缩放），避免浏览器默认手势竞争 */
#canvas-2d{touch-action:none;}

/* 游戏页无底部导航，抵消 mobile-optimization.css 的导航留白 */
@media (max-width: 768px){
    body{padding-bottom:0 !important;}
}

/* ===== m5 移动端修复追加（须置于基础规则之后以生效） ===== */
@media (max-width: 600px){
    /* 备案栏：全宽折行并上移至操作提示条之上，消除横向溢出与遮挡 */
    #site-beian{
        left: 10px;
        right: 10px;
        transform: none;
        bottom: calc(64px + env(safe-area-inset-bottom));
        z-index: 11;
        white-space: normal;
        text-align: center;
        line-height: 1.7;
        font-size: 10px;
        padding: 4px 10px;
    }
    /* 工具栏下移，避免与换行后的顶部状态栏重叠 */
    #toolbar{ top: calc(76px + env(safe-area-inset-top)); }
}