:root {
            --bg: #0d0d1a;
            --surface: #1a1a2e;
            --surface-hover: #22223a;
            --surface-active: #2a2a42;
            --gold: #c9a96e;
            --gold-dim: #a68b5b;
            --text: #e8e0d0;
            --text-secondary: #8a8578;
            --link: #7eb8da;
            --border: #2a2a3a;
            --highlight: #f0c060;
            --green: #3d8b3d;
            --green-bg: #1a2a1a;
            --green-border: #1a4a1a;
            --green-bright: #5cba5c;
            --radius: 6px;
        }

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

        html {
            font-size: 15px;
        }

        body {
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.5;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        header {
            flex-shrink: 0;
            text-align: center;
            padding: 8px 12px 4px;
            border-bottom: 1px solid var(--border);
        }

            header h1 {
                font-size: 1.1rem;
                color: var(--gold);
                letter-spacing: 0.04em;
                font-weight: 700;
            }

            header .subtitle {
                font-size: 0.75rem;
                color: var(--text-secondary);
            }

        .nav-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            min-height: 32px;
        }

        .btn-back {
            flex-shrink: 0;
            padding: 3px 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--gold);
            font-size: 0.8rem;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s, opacity 0.2s;
        }

            .btn-back:hover {
                background: var(--surface-hover);
            }

            .btn-back.hidden {
                opacity: 0;
                pointer-events: none;
            }

        .breadcrumb {
            font-size: 0.78rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
            flex: 1;
            min-width: 0;
        }

            .breadcrumb a {
                color: var(--link);
                text-decoration: none;
                cursor: pointer;
            }

                .breadcrumb a:hover {
                    text-decoration: underline;
                    color: var(--gold);
                }

            .breadcrumb .sep {
                color: var(--text-secondary);
                margin: 0 3px;
            }

            .breadcrumb .current {
                color: var(--gold);
                font-weight: 600;
            }

        .search-wrap {
            flex-shrink: 0;
        }

        .search-input {
            width: 140px;
            padding: 3px 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--bg);
            color: var(--text);
            font-size: 0.78rem;
            outline: none;
            transition: border-color 0.2s, width 0.2s;
        }

            .search-input:focus {
                border-color: var(--gold-dim);
                width: 180px;
            }

            .search-input::placeholder {
                color: var(--text-secondary);
            }

        .view-container {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .view-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            padding: 10px 12px 14px;
            animation-duration: 0.25s;
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-fill-mode: both;
        }

            .view-content.anim-forward {
                animation-name: slideInRight;
            }

            .view-content.anim-back {
                animation-name: slideInLeft;
            }

        @keyframes slideInRight {
            from {
                transform: translateX(36px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideInLeft {
            from {
                transform: translateX(-36px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .item-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
            padding: 4px 0;
        }

        .item-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 14px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            user-select: none;
        }

            .item-card:hover {
                background: var(--surface-hover);
                border-color: var(--gold-dim);
                transform: translateY(-1px);
            }

            .item-card:active {
                background: var(--surface-active);
            }

            .item-card .card-title {
                font-size: 1rem;
                font-weight: 600;
                color: var(--text);
                margin-bottom: 3px;
            }

            .item-card .card-meta {
                font-size: 0.75rem;
                color: var(--text-secondary);
            }

        .item-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .list-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 11px 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.15s;
            user-select: none;
        }

            .list-item:hover {
                background: var(--surface-hover);
                border-color: var(--gold-dim);
            }

            .list-item:active {
                background: var(--surface-active);
            }

            .list-item .item-text {
                flex: 1;
                font-size: 0.9rem;
                min-width: 0;
            }

            .list-item .item-badge {
                font-size: 0.75rem;
                color: var(--text-secondary);
                background: var(--bg);
                padding: 2px 9px;
                border-radius: 10px;
                flex-shrink: 0;
            }

        .phase-header {
            padding: 7px 12px 4px;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gold-dim);
            border-left: 2px solid var(--gold-dim);
            margin: 10px 0 2px;
        }

            .phase-header:first-child {
                margin-top: 0;
            }

        .sub-group-label {
            padding: 4px 12px;
            font-size: 0.78rem;
            color: var(--text-secondary);
            font-style: italic;
            margin: 4px 0 0;
        }

        .chest-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 10px;
            margin: 1px 0;
            border-radius: var(--radius);
            background: var(--surface);
            border: 1px solid transparent;
            transition: opacity 0.2s;
        }

            .chest-row:hover {
                border-color: var(--border);
            }

            .chest-row.collected {
                opacity: 0.4;
            }

        .chest-location {
            flex: 1;
            font-size: 0.85rem;
            color: var(--text);
            min-width: 0;
        }

        .btn-video {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 5px 12px;
            border: 1px solid var(--gold);
            border-radius: var(--radius);
            background: transparent;
            color: var(--gold);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.2s;
        }

            .btn-video:hover {
                background: var(--gold);
                color: var(--bg);
            }

        .btn-bigwindow {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 5px 12px;
            border: 1px solid var(--link);
            border-radius: var(--radius);
            background: transparent;
            color: var(--link);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.2s;
        }

            .btn-bigwindow:hover {
                background: var(--link);
                color: var(--bg);
            }

        .btn-mark {
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--text-secondary);
            font-size: 0.78rem;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.15s;
            min-width: 60px;
            text-align: center;
            user-select: none;
        }

            .btn-mark:hover {
                background: var(--surface-hover);
            }

            .btn-mark.marked {
                background: #1a3a1a;
                border-color: #2d6a2d;
                color: var(--green-bright);
            }

            .btn-mark.locked {
                background: var(--green-bg);
                border-color: var(--green-border);
                color: var(--green);
                cursor: default;
                opacity: 0.7;
            }

        .player-panel {
            flex-shrink: 0;
            background: var(--surface);
            border-top: 2px solid var(--gold-dim);
            display: none;
        }

            .player-panel.open {
                display: block;
            }

        .player-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 10px;
            background: var(--surface-active);
        }

        .player-title {
            font-size: 0.8rem;
            color: var(--gold);
        }

        .btn-player-close {
            padding: 1px 7px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.85rem;
            line-height: 1.4;
        }

            .btn-player-close:hover {
                color: var(--text);
                background: var(--surface-hover);
            }

        .player-iframe-wrap {
            position: relative;
            width: 100%;
            padding-top: 40%;
            max-height: 32vh;
        }

            .player-iframe-wrap iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }

        /* ---- video-active 模式：隐藏导航栏，扩展播放器 ---- */
        body.video-active .nav-header {
            display: none;
        }

        body.video-active .player-iframe-wrap {
            max-height: 58vh;
        }

        footer {
            flex-shrink: 0;
            text-align: center;
            padding: 6px 10px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            border-top: 1px solid var(--border);
            background: var(--bg);
        }

            footer a {
                color: var(--link);
                text-decoration: none;
            }

                footer a:hover {
                    text-decoration: underline;
                }

        .hidden {
            display: none !important;
        }

        .no-results {
            text-align: center;
            padding: 32px 16px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        @media (max-width: 360px) {
            html {
                font-size: 13px;
            }

            .item-grid {
                grid-template-columns: 1fr;
                gap: 6px;
            }

            .item-card {
                padding: 12px 10px;
            }

            .chest-row {
                flex-wrap: wrap;
            }

            .btn-video, .btn-bigwindow, .btn-mark {
                font-size: 0.72rem;
                padding: 4px 8px;
            }

            .search-input {
                width: 100px;
            }

                .search-input:focus {
                    width: 130px;
                }
        }
        /* ===== 骨架屏 ===== */
        .skeleton {
            padding: 12px 4px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .skeleton-block {
            background: var(--surface);
            border-radius: var(--radius);
            animation: skeleton-shimmer 1.6s ease-in-out infinite;
            background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
            background-size: 200% 100%;
        }

        .skeleton-block.card {
            height: 64px;
        }

        .skeleton-block.line {
            height: 18px;
            width: 60%;
        }

        .skeleton-block.line-short {
            height: 18px;
            width: 35%;
        }

        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* ===== 错误重试按钮 ===== */
        .btn-retry {
            display: block;
            margin: 16px auto 0;
            padding: 8px 24px;
            border: 1px solid var(--gold);
            border-radius: var(--radius);
            background: transparent;
            color: var(--gold);
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }

            .btn-retry:hover {
                background: var(--gold);
                color: var(--bg);
            }

        /* ===== 视频按钮禁用态 ===== */
        .btn-video.disabled {
            border-color: var(--border);
            color: var(--text-secondary);
            cursor: not-allowed;
            opacity: 0.5;
        }

            .btn-video.disabled:hover {
                background: transparent;
                color: var(--text-secondary);
            }

        .btn-bigwindow.disabled {
            border-color: var(--border);
            color: var(--text-secondary);
            cursor: not-allowed;
            opacity: 0.5;
        }

            .btn-bigwindow.disabled:hover {
                background: transparent;
                color: var(--text-secondary);
            }

        /* ===== 视频失效占位 ===== */
        .video-fallback {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 0.85rem;
            background: var(--surface);
            border-radius: var(--radius);
        }

        /* ===== 全局错误提示条 ===== */
        .error-toast {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            padding: 10px 16px;
            background: #2a1015;
            border-bottom: 1px solid #6b2a2a;
            color: #e8b0b0;
            font-size: 0.85rem;
            text-align: center;
            animation: toastIn 0.3s ease-out;
            cursor: pointer;
        }

        .error-toast.fade-out {
            animation: toastOut 0.3s ease-out forwards;
        }

        @keyframes toastIn {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes toastOut {
            from { transform: translateY(0); opacity: 1; }
            to { transform: translateY(-100%); opacity: 0; }
        }