/* 🆕 2026-08-24 Phase1: 品牌字体本地化 (v6.09 预留方案落地) —
           woff2 存 /assets/fonts/, font-display:swap, 国内无 Google Fonts 依赖 */
        @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
        @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
        @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

        /* 🆕 2026-08-24 Phase1: SVG sprite 图标基类 — currentColor 上色, 随字号缩放 */
        .np-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .np-icon.np-fill { fill: currentColor; stroke: none; }

        /* 🖱️ 全局滚动条：半隐藏式（细条+半透明，不裸露浏览器默认条） */
        *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
        *::-webkit-scrollbar{width:6px;height:6px}
        *::-webkit-scrollbar-track{background:transparent}
        *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:4px}
        *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.30)}
        *::-webkit-scrollbar-corner{background:transparent}

        :root {
            /* 🆕 v6.28: 窄视口自适应 — body padding 随屏幕收窄 (≤480px 用 8px, 原 20px 在小屏吃掉可用宽度) */
            --body-pad: 20px;
            --event-card-min: 320px;
            /* 卡片列最小宽, 窄视口由 minmax(min(...,100%)) 收敛 */

            /* 🆕 v6.10: 亮色模式用深色版本 — 原 #00E676/#FF5252/#FACC15 在白底上对比度 1.5~3.2:1
               不达 WCAG AA (4.5:1)。dark-mode 中重定义为亮色版本 (on #0f172a 均 ≥5.5:1)。 */
            /* 🚑 2026-08-24 Phase0 修复: v6.29 把 @media 移出 :root 时, 以下 13 个基础变量
               被遗留在选择器之外 (无效 CSS, 浏览器整体丢弃), 亮色调色板静默失效;
               现已并回 :root 块内, 并由 scripts/check-css-vars.js 守护防复发 */
            --home-yes: #008050;
            /* Bright Emerald for Yes/Home (AA: 白底 5.00:1) */
            --away-no: #D32F2F;
            /* Bright Orange Red for No/Away (AA: 白底 4.98:1) */
            --draw-tie: #A16207;
            /* Yellow (AA: 白底 4.92:1) */
            --bg-light: #F4F5F7;
            --card-light: #FFFFFF;
            --border-light: rgba(0, 0, 0, 0.06);
            --text-main: #0F172A;
            --text-muted: #64748B;
            --success: #008050;
            --home-red: #D32F2F;
            --away-blue: #008050;
            --bg: var(--bg-light);

            /* ══ 2026-08-24 Phase1: 语义令牌层 (additive, 旧变量保留不动) ══
               新样式一律只用语义令牌; 别名引用旧变量 → dark/fun 换肤自动跟随,
               新增常量 (--surface-2/--accent/--hot) 在 body.dark-mode 有对应覆写 */
            --surface-0: var(--bg-light);
            --surface-1: var(--card-light);
            --surface-2: #EDEFF3;
            --surface-3: #E2E5EA;
            --line-1: var(--border-light);
            --line-2: rgba(0, 0, 0, 0.12);
            --ink-1: var(--text-main);
            --ink-2: var(--text-muted);
            --ink-3: #94A3B8;
            /* 语义色: 一个含义只对应一个色 */
            --up: var(--home-yes);
            --down: var(--away-no);
            --flat: var(--draw-tie);
            --accent: #2F6BFF;
            --hot: #EA580C;
            /* 字体比例: 1.2 模度 6 级, 替代 254+ 处任意 em */
            --text-xs: 11px; --text-sm: 12.5px; --text-md: 14px;
            --text-lg: 17px; --text-xl: 20px; --text-2xl: 25px;
            /* 间距: 4px 基网格 */
            --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
            --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
            --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
            /* 动效预算: hover/press 120ms, 展开/切换 240ms */
            --ease-out: cubic-bezier(.2,.8,.2,1);
            --dur-fast: 120ms;
            --dur-med: 240ms;
            /* 全局字体: 主字体 + 等宽数字字体 (原独立 :root 块, 2026-08-29 合并防分裂;
               html[lang] 覆写在下方, 级联顺序不变) */
            --font-sans: 'Inter',
            Arial,
            -apple-system,
            BlinkMacSystemFont,
            "PingFang SC",
            "Microsoft YaHei",
            sans-serif;
            --font-mono: 'JetBrains Mono',
            'SF Mono',
            Consolas,
            monospace;
        }
        /* 🆕 v6.29: @media 移出 :root 顶层 (不依赖 CSS Nesting, 跨浏览器兼容) */
        @media (max-width: 480px) {
            :root { --body-pad: 8px; }
        }

            /* 🆕 v6.10: 全局动效降级 — WCAG 2.3.3 (动画触发障碍):
               用户开启系统"减少动效"时关闭所有持续/过渡动画。
               fun-mode 此前已有局部覆盖, 此处补齐普通模式的 100+ 个 @keyframes。
               关键状态指示 (赔率涨跌 flash 等) 仍可通过文字/颜色表达, 动画仅作辅助。 */
            @media (prefers-reduced-motion: reduce) {
                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms;
                    animation-iteration-count: 1;
                    transition-duration: 0.01ms;
                    scroll-behavior: auto;
                }
            }

            /* 🏆 全网真金抽奖计数器样式 */
            .global-real-spins-container {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(0, 0, 0, 0.5);
                border: 1px solid rgba(250, 204, 21, 0.2);
                padding: 6px 16px;
                border-radius: 20px;
                font-size: 0.85rem;
                color: #cbd5e1;
                box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(4px);
                margin-top: 12px;
            }

            #global-real-spins-val {
                color: #facc15;
                font-weight: 900;
                font-size: 1.15em;
                letter-spacing: 1px;
                text-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
                min-width: 1em;
                display: inline-block;
                text-align: right;
            }

            /* 🆕 加载中: 脉动省略号 (最低亮度 0.7, 加微弱 glow 防止在深色背景中隐形) */
            #global-real-spins-val[data-state="loading"] {
                color: #cbd5e1;
                text-shadow: 0 0 8px rgba(203, 213, 225, 0.4);
                animation: globalSpinsLoading 1.2s ease-in-out infinite;
            }

            @keyframes globalSpinsLoading {

                0%,
                100% {
                    opacity: 0.7;
                }

                50% {
                    opacity: 1;
                }
            }

            /* 🆕 错误态: 红色破折号 + 点击重试 */
            #global-real-spins-val[data-state="error"] {
                color: #ef4444;
                text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
                cursor: pointer;
                transition: transform 0.15s;
            }

            #global-real-spins-val[data-state="error"]:hover {
                transform: scale(1.05);
            }

            #global-real-spins-val[data-state="error"]:active {
                transform: scale(0.95);
            }

            .pulse-dot {
                width: 6px;
                height: 6px;
                background: #10b981;
                border-radius: 50%;
                box-shadow: 0 0 6px #10b981;
                animation: pulseDotAnim 1s infinite alternate;
            }

            /* 🆕 加载中脉动点变灰 */
            .global-real-spins-container[data-state="loading"] .pulse-dot {
                background: #94a3b8;
                box-shadow: 0 0 4px #94a3b8;
                animation: pulseDotLoading 1.5s ease-in-out infinite;
            }

            @keyframes pulseDotLoading {

                0%,
                100% {
                    opacity: 0.3;
                    transform: scale(0.9);
                }

                50% {
                    opacity: 1;
                    transform: scale(1.15);
                }
            }

            /* 🆕 v5.29: 错误态 — 服务器 5s+ 没推数据 / 数据异常时, dot 变红 + value 变红 + 点击 reload */
            .global-real-spins-container[data-state="error"] .pulse-dot {
                background: #ef4444;
                box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
                animation: pulseDotError 0.8s ease-in-out infinite alternate;
            }

            @keyframes pulseDotError {
                0% {
                    opacity: 0.4;
                }

                100% {
                    opacity: 1;
                }
            }

            #global-real-spins-val[data-state="error"] {
                cursor: pointer;
            }

            #global-real-spins-val[data-state="error"]:hover {
                transform: scale(1.08);
                transition: transform 0.15s;
            }

            @keyframes pulseDotAnim {
                0% {
                    opacity: 0.4;
                    box-shadow: 0 0 2px #10b981;
                }

                100% {
                    opacity: 1;
                    box-shadow: 0 0 8px #10b981;
                    transform: scale(1.2);
                }
            }

            @media (max-width: 768px) {
                .global-real-spins-container {
                    font-size: 0.75rem;
                    padding: 4px 12px;
                }
            }

        /* 🚀 全局字体优化：--font-sans/--font-mono 已并入首个 :root (2026-08-29 合并) */

        /* 🇰🇷 韩语专属系统级原生字体栈 */
        html[lang="ko"] {
            --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        }

        /* 🇯🇵 日语专属系统级原生字体栈 */
        html[lang="ja"] {
            --font-sans: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', 'Yu Gothic', sans-serif;
        }

        html,
        body {
            overflow-x: hidden;
            width: 100%;
        }

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

        body {
            font-family: var(--font-sans);
            background: var(--bg);
            margin: 0;
            padding: var(--body-pad);
            color: var(--text-main);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            line-height: 1.6;
            letter-spacing: 0.02em;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 700;
            letter-spacing: 0.04em;
        }

        .mono {
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            transition: 0.3s;
        }

        /* 防止有赛事数据时，内部 Grid 的最小内容宽度撑破桌面视口 */
        .app-container > *,
        #left-column,
        #view-list,
        #event-list {
            min-width: 0;
        }

        #event-list {
            width: 100%;
            box-sizing: border-box;
        }

        .app-container.is-detail {
            grid-template-columns: 7fr 3fr;
        }

        /* 🌟 高级渐变色数字文本特效 */
        .text-gradient-gold {
            background: linear-gradient(135deg, #fff7c2 0%, #facc15 50%, #d4af37 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-silver {
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-red {
            background: linear-gradient(135deg, #fca5a5 0%, #ef4444 50%, #b91c1c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-green {
            background: linear-gradient(135deg, #6ee7b7 0%, #10b981 50%, #047857 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-blue {
            background: linear-gradient(135deg, #93c5fd 0%, #38bdf8 50%, #0284c7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-purple {
            background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 50%, #7e22ce 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-btc {
            background: linear-gradient(135deg, #fde047 0%, #f7931a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-eth {
            background: linear-gradient(135deg, #c7d2fe 0%, #627eea 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-bnb {
            background: linear-gradient(135deg, #fef08a 0%, #f3ba2f 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-sol {
            background: linear-gradient(135deg, #a7f3d0 0%, #14f195 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .text-gradient-xrp {
            background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .portfolio-tabs {
            display: flex;
            gap: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
            margin-bottom: 10px;
        }

        .ptab {
            cursor: pointer;
            color: #999;
            font-size: 0.9em;
            font-weight: bold;
            position: relative;
        }

        .ptab.active {
            color: var(--home-red);
        }

        .ptab.active::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 100%;
            height: 3px;
            background: var(--home-red);
            border-radius: 2px;
        }

        .star-icon {
            color: #ddd;
            cursor: pointer;
            font-size: 1.3em;
            transition: 0.2s;
            user-select: none;
        }

        .star-icon:hover {
            transform: scale(1.2);
        }

        .star-icon.favorited {
            color: #fadb14;
        }

        .payout-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #fafafa;
        }

        /* 🪙 迷你硬币徽章 (虚拟钱包替代品) */
        .mini-coin {
            display: flex;
            align-items: center;
            gap: 3px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            padding: 3px 6px;
            font-size: 0.65rem;
            font-family: var(--font-mono);
            font-weight: bold;
            transition: all 0.2s;
        }

        .mini-coin img {
            width: 12px;
            height: 12px;
            filter: drop-shadow(0 0 2px currentColor);
        }

        .mini-coin span.label {
            opacity: 0.8;
            margin-left: 2px;
        }

        .mini-coin .val {
            opacity: 1;
            margin-left: 2px;
            color: #fff;
            display: inline-block;
            min-width: 10px;
            text-align: right;
        }

        .payout-item:last-child {
            border-bottom: none;
        }

        .btn-claim {
            background: var(--success);
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8em;
            cursor: pointer;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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

        @keyframes skeletonFadeIn {
            0% {
                opacity: 0;
                transform: translateY(12px);
                filter: blur(4px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        /* 🚀 现代高级骨架屏加载动画与过渡 (Skeleton Shimmer) */
        .skeleton {
            background-color: #e2e8f0;
            background-image: linear-gradient(110deg, transparent 8%, rgba(255, 255, 255, 0.75) 18%, transparent 33%);
            background-size: 400% 100%;
            animation: shimmer 1.8s infinite linear;
            border-radius: 6px;
        }

        body.dark-mode .skeleton {
            background-color: #1e293b;
            background-image: linear-gradient(110deg, transparent 8%, rgba(255, 255, 255, 0.08) 18%, transparent 33%);
        }

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

            100% {
                background-position: -100% 0;
            }
        }

        @keyframes uiSkeletonBreathe {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }
        }

        /* ✅ 闪兑 v1.1 专属动画 */
        @keyframes fsPulseGlow {

            0%,
            100% {
                box-shadow: 0 0 18px rgba(239, 68, 68, 0.35), inset 0 0 12px rgba(239, 68, 68, 0.15);
            }

            50% {
                box-shadow: 0 0 32px rgba(239, 68, 68, 0.6), inset 0 0 20px rgba(239, 68, 68, 0.25);
            }
        }

        @keyframes fsBannerPulse {

            0%,
            100% {
                opacity: 0.9;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.04);
            }
        }

        @keyframes fsCountdownTick {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.06);
            }

            100% {
                transform: scale(1);
            }
        }

        .fs-banner {
            animation: fsPulseGlow 2.4s ease-in-out infinite;
        }

        .fs-banner-pulse {
            animation: fsBannerPulse 1.6s ease-in-out infinite;
        }

        .fs-tab-btn {
            transition: all 0.2s ease;
            cursor: pointer;
            user-select: none;
        }

        .fs-tab-btn:hover {
            transform: translateY(-1px);
        }

        .fs-tab-btn.active {
            background: rgba(250, 204, 21, 0.18) !important;
            color: #facc15 !important;
            border-color: rgba(250, 204, 21, 0.5) !important;
        }

        .fs-history-card {
            transition: transform 0.15s ease, border-color 0.15s ease;
        }

        .fs-history-card:hover {
            transform: translateY(-2px);
            border-color: rgba(250, 204, 21, 0.4);
        }

        .fs-amount-btn {
            transition: all 0.15s ease;
        }

        .fs-amount-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(250, 204, 21, 0.6);
        }

        /* ===========================================================
       🆕 v4.73: 飞入动效混合架构 - CSS 弹出 + CSS 悬停 + GSAP 贝塞尔
       阶段 1: 飞元素从转盘中心弹出 (CSS class .fly-stage-pop, 0.4s back.out)
       阶段 2: 悬停 yoyo 上下起伏 (CSS class .fly-stage-hover, 0.4s 两次)
       阶段 3: 沿贝塞尔曲线飞向目标 (GSAP motionPath, 0.5s power3.in)
       =========================================================== */
        .fly-stage-pop {
            animation: flyPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            will-change: transform, opacity;
        }

        @keyframes flyPop {
            0% {
                transform: scale(0.1) translateY(0px);
                opacity: 0;
            }

            100% {
                transform: scale(1.2) translateY(0px);
                opacity: 1;
            }
        }

        .fly-stage-hover {
            animation: flyHover 0.8s cubic-bezier(0.45, 0, 0.55, 1) 2 alternate forwards;
            will-change: transform;
        }

        @keyframes flyHover {
            0% {
                transform: translateY(0px) scale(1.2);
            }

            100% {
                transform: translateY(-15px) scale(1.2);
            }
        }

        /* 🟡 中心面板滚动条 - 高对比度金色 (Chrome/Safari/Edge) */
        .ref-modal-content::-webkit-scrollbar {
            width: 8px;
        }

        .ref-modal-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.35);
            border-radius: 4px;
            margin: 4px 0;
        }

        .ref-modal-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #facc15 0%, #f59e0b 100%);
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
        }

        .ref-modal-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fde047 0%, #fbbf24 100%);
            box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
        }

        /* 📱 手机端: 贴边全高, 让滚动更明显 */
        @media (max-width: 768px) {
            .ref-modal-content {
                max-height: 92vh;
                max-height: 92dvh;
                /* 动态 vh, 避开地址栏塌缩 */
                width: 95%;
                border-radius: 18px;
            }
        }

        /* 闪兑卡片内嵌滚动条 - WebKit (Chrome / Edge / Safari) - 高对比度版本 */
        #fs-panel-current::-webkit-scrollbar,
        #fs-history-list::-webkit-scrollbar {
            width: 8px;
        }

        #fs-panel-current::-webkit-scrollbar-track,
        #fs-history-list::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            margin: 2px 0;
        }

        #fs-panel-current::-webkit-scrollbar-thumb,
        #fs-history-list::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #facc15, #ef4444);
            border-radius: 4px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
        }

        #fs-panel-current::-webkit-scrollbar-thumb:hover,
        #fs-history-list::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fde047, #f87171);
            box-shadow: 0 0 12px rgba(250, 204, 21, 0.8);
        }

        .fs-mock-btn {
            transition: all 0.15s ease;
        }

        .fs-mock-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.15);
        }

        .fs-countdown-digit {
            animation: fsCountdownTick 1s ease-in-out infinite;
            display: inline-block;
        }

        @media (max-width: 480px) {
            .fs-banner-title {
                font-size: 1em;
            }

            .fs-banner-sub {
                font-size: 0.7em;
            }
        }

        /* 🚀 性能优化：启用 GPU 硬件加速层，防止不断重绘导致掉帧 */
        #luck-progress-bar,
        #burst-progress-bar,
        #arena-progress-bar {
            will-change: width, height;
        }

        .lucky-wheel-inner {
            will-change: transform;
        }

        .skeleton-card {
            margin: 0;
            padding: 20px;
            /* 🆕 2026-08-24 Phase3b: min-height 对齐真实事件卡实测高度 (桌面 262px),
               消除骨架→真实卡替换时的 CLS 跳动 */
            min-height: 262px;
            display: flex;
            flex-direction: column;
            border-radius: 16px;
            background: var(--card-light);
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            opacity: 0;
            animation: skeletonFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 8px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid transparent;
        }

        .skeleton-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }

        .skeleton-card:nth-child(1) {
            animation-delay: 0.05s;
        }

        .skeleton-card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .skeleton-card:nth-child(3) {
            animation-delay: 0.15s;
        }

        .skeleton-card:nth-child(4) {
            animation-delay: 0.2s;
        }

        .skeleton-card:nth-child(5) {
            animation-delay: 0.25s;
        }

        .skeleton-card:nth-child(6) {
            animation-delay: 0.3s;
        }

        body.dark-mode .skeleton-card {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .skeleton-card::before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
        }

        /* ✅ 顶部控制区专属骨架屏覆盖样式 (利用透明字保留宽度) */
        .ui-skeleton {
            background-color: #f0f9ff;
            background-image: linear-gradient(110deg, transparent 8%, rgba(56, 189, 248, 0.4) 18%, transparent 33%);
            background-size: 400% 100%;
            animation: skeletonFadeIn 0.3s ease-out forwards, shimmer 1.5s infinite linear, uiSkeletonBreathe 2s 0.3s infinite ease-in-out;
            color: transparent;
            pointer-events: none;
            border: 1px solid rgba(56, 189, 248, 0.2);
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
            opacity: 0;
            transition: background-color 0.3s, color 0.3s ease;
        }

        body.dark-mode .ui-skeleton {
            background-color: #1e293b;
            background-image: linear-gradient(110deg, transparent 8%, rgba(255, 255, 255, 0.08) 18%, transparent 33%);
        }

        .ui-skeleton * {
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .search-wrapper *,
        .btn-connect,
        .nav-item * {
            transition: opacity 0.4s ease, color 0.2s, background 0.2s;
        }

        /* 🌟 Minimalist Cyber Borders & Inner Depth for Event Cards */
        .card {
            background: var(--card-light);
            border-radius: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 8px 30px rgba(0, 0, 0, 0.03);
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .card:not(.header)::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }

        .header {
            position: sticky;
            top: 10px;
            z-index: 100;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.75) !important;
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1);
            padding: 12px 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            grid-column: span 2;
            flex-wrap: wrap;
        }

        .header-right {
            align-self: flex-start;
            margin-top: 8px;
        }

        .header-left {
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-width: 60%;
            overflow: hidden;
        }

        .wallet-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .addr-tag {
            font-family: var(--font-mono);
            background: #f5f5f5;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.9em;
        }

        .btn-connect {
            background: var(--text-main);
            color: var(--bg-light);
            border: none;
            box-shadow: none;
            padding: 10px 24px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
            transition: 0.2s;
            text-shadow: none;
        }

        .btn-connect:hover {
            opacity: 0.85;
            transform: translateY(-1px);
        }

        .btn-mini {
            background: transparent;
            border: 1px solid var(--border-light);
            padding: 5px 12px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 0.8em;
            transition: 0.2s;
            color: var(--text-main);
        }

        .btn-mini:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        /* 新增：顶部导航菜单样式 */
        .top-nav-menu {
            display: flex;
            gap: 8px;
            align-items: center;
            overflow-x: auto;
            white-space: nowrap;
            width: 100%;
            padding-bottom: 4px;
        }

        /* ✅ 恢复并美化滚动条，给出可以横向滑动的视觉暗示 */
        .top-nav-menu::-webkit-scrollbar {
            height: 4px;
            display: block;
        }

        .top-nav-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .top-nav-menu::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .nav-item {
            text-decoration: none;
            color: #666;
            font-weight: 600;
            font-size: 0.95em;
            padding: 8px 16px;
            border-radius: 20px;
            transition: all 0.2s;
            border: none;
            flex-shrink: 0;
        }

        .nav-item:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #111;
        }

        .nav-item.active {
            background: #111;
            color: #fff;
            font-weight: 700;
            border-bottom: none;
        }

        /* ⚽ 动态足球循环特效 */
        @keyframes spinFootball {
            100% {
                transform: rotate(360deg);
            }
        }

        .anim-football {
            display: inline-block;
            animation: spinFootball 2.5s linear infinite;
            margin-right: 4px;
            transform-origin: center;
        }

        .nav-item:hover .anim-football {
            animation: spinFootball 0.8s linear infinite;
        }

        /* 悬停时加速运转 */

        /* ₿ 比特币上下浮动特效 */
        @keyframes floatBitcoin {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }
        }

        .anim-bitcoin {
            display: inline-block;
            /* 2026-08-24 Phase0: 摘除 floatBitcoin 无限浮动 (动效预算: 大厅无永动装饰) */
            margin-right: 4px;
            color: #f7931a;
            font-weight: bold;
        }

        /* 🌟 专属霓虹 S 图标呼吸光晕特效 */
        @keyframes neonBreathe {
            0% {
                filter: drop-shadow(0 0 2px rgba(255, 16, 83, 0.5)) brightness(1);
            }

            50% {
                filter: drop-shadow(0 0 18px rgba(162, 0, 255, 1)) brightness(1.3);
            }

            100% {
                filter: drop-shadow(0 0 2px rgba(255, 16, 83, 0.5)) brightness(1);
            }
        }

        .super-lucky-icon {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            /* 2026-08-24 Phase0: 摘除 neonBreathe 无限呼吸 (动效预算); hover 光晕保留为静态交互反馈 */
            transition: all 0.2s ease;
        }

        .super-lucky-icon:hover {
            filter: drop-shadow(0 0 22px rgba(255, 16, 83, 1)) brightness(1.4);
        }

        /* 🍀 Super Lucky 响应式显示控制 (电脑端默认) */
        .mobile-only-lucky {
            display: none !important;
        }

        .desktop-only-lucky {
            display: flex !important;
            align-items: center;
        }

        /* 🕹️ 模拟盘切换按钮响应式控制 */
        .mobile-only-test-mode {
            display: none;
        }

        .desktop-only-test-mode {
            display: inline-block;
        }

        @media screen and (max-width: 768px) {
            .mobile-only-test-mode {
                display: inline-block;
            }

            .desktop-only-test-mode {
                display: none;
            }
        }

        /* 模拟盘专属按钮控制 */
        .test-only-btn {
            display: none !important;
        }

        body.test-mode-active .test-only-btn {
            display: flex;
        }

        /* 钱包下拉菜单与滑块 */
        .wallet-dropdown {
            position: relative;
        }

        .wallet-info-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f0f2f5;
            padding: 8px 14px;
            border-radius: 24px;
            cursor: pointer;
            transition: 0.2s;
            border: 1px solid transparent;
        }

        .wallet-info-pill:hover {
            border-color: #ddd;
            background: #e4e6e9;
        }

        .pill-divider {
            width: 1px;
            height: 14px;
            background: #ccc;
        }

        /* 🌟 钱包连接成功后的金光闪烁特效 */
        @keyframes goldenWalletFlash {

            0%,
            100% {
                box-shadow: 0 0 0 rgba(250, 204, 21, 0);
                border-color: transparent;
            }

            50% {
                box-shadow: 0 0 25px rgba(250, 204, 21, 0.8), inset 0 0 10px rgba(250, 204, 21, 0.3);
                border-color: #facc15;
                background-color: rgba(250, 204, 21, 0.1);
            }
        }

        .golden-wallet-flash {
            animation: goldenWalletFlash 1.5s ease-in-out 3;
        }

        body.dark-mode .golden-wallet-flash {
            background-color: rgba(250, 204, 21, 0.15);
        }

        .wallet-dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            min-width: 160px;
            padding: 8px;
            z-index: 1000;
            border: 1px solid #eee;
        }

        .wallet-dropdown-menu.show {
            display: block;
            animation: fadeIn 0.2s ease;
        }

        .wallet-menu-item {
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            font-size: 0.95em;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
        }

        .wallet-menu-item:hover {
            background: #f5f5f5;
        }

        /* ✅ 全新快捷金额胶囊按钮 */
        .pct-btn-new {
            background: transparent;
            border: 1px solid var(--border-light);
            color: var(--text-muted);
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
            font-family: var(--font-mono);
        }

        .pct-btn-new:hover {
            background: rgba(0, 0, 0, 0.03);
            color: var(--text-main);
            border-color: var(--text-muted);
        }

        body.dark-mode .pct-btn-new:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
        }

        /* 🔍 搜索框样式 */
        .search-wrapper {
            position: relative;
            /* 🐛 修复：为 #search-clear-btn 提供定位上下文，否则 × 会相对整个 header 定位、跑到钱包胶囊下方 */
            margin-left: 15px;
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: transparent;
            height: 34px;
            overflow: hidden;
            transition: 0.2s;
            flex-shrink: 0;
            min-width: 190px;
        }

        .search-wrapper:focus-within {
            border-color: #999;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
        }

        .search-input {
            flex: 1;
            width: 100%;
            padding: 6px 10px;
            font-size: 0.85em;
            border: none;
            background: transparent;
            outline: none;
            color: inherit;
            min-width: 80px;
        }

        .search-btn {
            border: none;
            background: rgba(0, 0, 0, 0.04);
            padding: 0 14px;
            height: 100%;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: bold;
            color: #666;
            border-left: 1px solid #ddd;
            transition: 0.2s;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .search-btn:hover {
            background: rgba(0, 0, 0, 0.08);
            color: #111;
        }

        @keyframes agentPlaneRotate {
            0% {
                transform: rotate(0deg);
            }

            20% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes colorFlow {
            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        .trade-box {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .side-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .side-btn {
            padding: 12px;
            border: 1px solid var(--border-light);
            background: transparent;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            transition: 0.2s;
            color: var(--text-main);
        }

        .side-btn:hover {
            background: rgba(0, 0, 0, 0.03);
        }

        .side-btn.home.active {
            border-color: var(--home-yes);
            color: var(--home-yes);
            background: rgba(0, 230, 118, 0.1);
            box-shadow: inset 0 0 0 1px var(--home-yes);
        }

        .side-btn.away.active {
            border-color: var(--away-no);
            color: var(--away-no);
            background: rgba(255, 82, 82, 0.1);
            box-shadow: inset 0 0 0 1px var(--away-no);
        }

        .side-btn.draw.active {
            border-color: var(--draw-tie);
            color: var(--draw-tie);
            background: rgba(250, 204, 21, 0.1);
            box-shadow: inset 0 0 0 1px var(--draw-tie);
        }

        input {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-light);
            background: transparent;
            box-shadow: none;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 1.1em;
            outline: none;
            font-family: var(--font-sans);
            transition: 0.2s;
            color: var(--text-main);
        }

        input:focus {
            border-color: var(--text-muted);
            box-shadow: none;
        }

        .submit-btn {
            background: var(--text-main);
            color: var(--bg-light);
            border: none;
            box-shadow: none;
            padding: 15px;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            text-shadow: none;
        }

        .submit-btn:hover:not(:disabled) {
            opacity: 0.85;
            transform: translateY(-1px);
        }

        .submit-btn:disabled {
            background: var(--border-light);
            color: var(--text-muted);
            cursor: not-allowed;
        }

        .event-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: 0.2s;
            border-left: 4px solid transparent;
        }

        .event-item:hover {
            background: #fafafa;
        }

        .event-item.active {
            border-left-color: var(--home-red);
            background: #fff7f7;
        }

        /* 🚀 全息反光扫光特效 (Holo Glare) */
        .event-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            transition: 0s;
            z-index: 10;
            pointer-events: none;
        }

        body.dark-mode .event-item::after {
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(56, 189, 248, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
        }

        .event-item:hover::after {
            left: 200%;
            transition: 0.6s ease-in-out;
        }

        /* 🚨 临近锁盘心跳警告动效 */
        @keyframes urgencyHeartbeat {

            0%,
            100% {
                transform: scale(1);
                background: rgba(239, 68, 68, 0.1);
                color: #ef4444;
                border-color: rgba(239, 68, 68, 0.3);
                box-shadow: 0 0 5px rgba(239, 68, 68, 0.2);
            }

            50% {
                transform: scale(1.05);
                background: #ef4444;
                color: #fff;
                border-color: #ef4444;
                box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
            }
        }

        .time-urgent {
            animation: urgencyHeartbeat 1.2s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 1px solid transparent;
        }

        /* 🚀 专属优化：私有盘与坐庄盘的高级赛博朋克 UI 覆盖 */
        div[id^="event-FIXED_"],
        div[id^="event-PRIV_"] {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        }

        div[id^="event-FIXED_"] {
            background-color: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(250, 204, 21, 0.4);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(250, 204, 21, 0.05);
        }

        div[id^="event-FIXED_"]:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(250, 204, 21, 0.15);
            border-color: rgba(250, 204, 21, 0.8);
            z-index: 10;
        }

        div[id^="event-FIXED_"]::after {
            content: '🎲 坐庄盘 (Agent)';
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(135deg, #facc15, #d97706);
            color: #000;
            padding: 4px 12px;
            font-weight: 900;
            font-size: 0.75rem;
            border-bottom-left-radius: 12px;
            z-index: 10;
            box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
        }

        div[id^="event-PRIV_"] {
            background-color: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(56, 189, 248, 0.4);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(56, 189, 248, 0.05);
        }

        div[id^="event-PRIV_"]:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(56, 189, 248, 0.15);
            border-color: rgba(56, 189, 248, 0.8);
            z-index: 10;
        }

        div[id^="event-PRIV_"]::after {
            content: '🔒 私有盘 (Private)';
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(135deg, #38bdf8, #0284c7);
            color: #fff;
            padding: 4px 12px;
            font-weight: 900;
            font-size: 0.75rem;
            border-bottom-left-radius: 12px;
            z-index: 10;
            box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
        }

        /* 绝对隐藏这些特殊赛事卡片中可能破损的国旗或硬币图标 */
        div[id^="event-FIXED_"] img.team-logo,
        div[id^="event-PRIV_"] img.team-logo,
        div[id^="event-FIXED_"] img[src*="flags"],
        div[id^="event-PRIV_"] img[src*="flags"],
        div[id^="event-FIXED_"] img[src*="crypto-icons"],
        div[id^="event-PRIV_"] img[src*="crypto-icons"] {
            display: none;
        }

        /* 强制使这些高级卡片内的文本在深色半透明遮罩背景下清晰可见 */
        div[id^="event-FIXED_"] *,
        div[id^="event-PRIV_"] * {
            color: #f8fafc;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
        }

        /* 剥离胜率/赔率数字的高亮颜色不受影响，保留纯粹的数值发光 */
        div[id^="event-FIXED_"] .text-gradient-green,
        div[id^="event-PRIV_"] .text-gradient-green,
        div[id^="event-FIXED_"] .text-gradient-red,
        div[id^="event-PRIV_"] .text-gradient-red {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
        }

        /* 🚀 赛博朋克风全局 Toast 提示框（彻底修复白屏透明问题） */
        #toast-container {
            position: fixed;
            top: max(20px, env(safe-area-inset-top));
            right: 20px;
            z-index: 100002;
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: none;
        }

        .toast {
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: saturate(150%) blur(20px);
            -webkit-backdrop-filter: saturate(150%) blur(20px);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-left: 2px solid #38bdf8;
            color: #f8fafc;
            padding: 10px 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.15);
            border-radius: 8px;
            margin-bottom: 0;
            animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: var(--font-sans);
            font-size: 0.85rem;
            font-weight: normal;
            pointer-events: auto;
            transition: all 0.3s ease;
            max-width: 300px;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(100%) scale(0.9);
            }

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

        /* 💬 弹幕冒泡样式 */
        .danmaku-item {
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            white-space: nowrap;
            pointer-events: auto;
            cursor: pointer;
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s;
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.dark-mode .danmaku-item {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.05);
        }

        .danmaku-item:hover {
            border-color: var(--success);
            z-index: 20;
        }

        .danmaku-item.pinned {
            border-color: #fadb14;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10;
            animation: floatPinned 4s ease-in-out infinite alternate;
        }

        @keyframes floatPinned {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(5px);
            }
        }

        #danmaku-container {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 10;
            overflow: hidden;
            border-radius: 12px;
        }

        #comment-modal-text {
            max-height: 50vh;
            overflow-y: auto;
            padding: 10px;
            font-size: 1rem;
            line-height: 1.6;
            word-break: break-all;
            background: #f9f9f9;
            border-radius: 8px;
            border: 1px solid #eee;
            margin-top: 10px;
        }

        body.dark-mode #comment-modal-text {
            background: var(--bg-light);
            border-color: var(--border-light);
            color: var(--text-main);
        }

        /* ✅ 修复：让移动端遮罩层脱离文档流，防止其强行霸占桌面端 Grid 的列空间 */
        #bs-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            backdrop-filter: blur(4px);
            transition: opacity 0.3s;
            opacity: 0;
        }

        /* 视图路由切换 */
        #view-detail {
            display: none;
            animation: detailSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 🆕 v6.21: 详情视图入场 — 上滑 + 淡入 (替代旧纯 fadeIn, 增强页面转场感) */
        @keyframes detailSlideUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: none; }
        }

        .app-container.is-detail #view-list {
            display: none;
        }

        .app-container.is-detail #view-detail {
            display: block;
        }

        /* 右侧面板吸顶滚动 */
        #right-column {
            display: none;
            position: sticky;
            top: 100px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            align-self: start;
            /* ✅ 核心修复：阻止Grid子元素默认等高拉伸，使 Sticky 生效 */
        }

        .app-container.is-detail #right-column {
            display: block;
            animation: detailSlideRight 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 🆕 v6.21: 右侧面板入场 — 右侧滑入 + 淡入 (与详情视图转场呼应) */
        @keyframes detailSlideRight {
            from { opacity: 0; transform: translateX(28px); }
            to { opacity: 1; transform: none; }
        }

        #right-column::-webkit-scrollbar {
            display: none;
        }

        /* 黑夜模式补充 */
        body.dark-mode {
            --bg-light: #020617;
            --card-light: #0f172a;
            --border-light: rgba(255, 255, 255, 0.1);
            --text-main: #F1F5F9;
            --text-muted: #94A3B8;
            /* 🆕 v6.10: 暗色模式重定义为亮色版本 — on #0f172a 对比度 10.69/5.59/11.66:1 均达标,
               亮色模式已用深色版本 (见 :root 注释) */
            --home-yes: #00E676;
            --away-no: #FF5252;
            --draw-tie: #FACC15;
            --success: #00E676;
            --home-red: #FF5252;
            --away-blue: #00E676;
            --bg: radial-gradient(circle at 50% -20%, #1e1b4b 0%, #0f172a 40%, #020617 100%);
            background-attachment: fixed;
            /* 🆕 2026-08-24 Phase1: 语义令牌层暗色覆写 (仅新增常量; --up/--down 等别名自动跟随上面旧变量) */
            --surface-2: #181D27;
            --surface-3: #1F2530;
            --line-2: rgba(255, 255, 255, 0.14);
            --ink-3: #5C6672;
            --accent: #4F7CFF;
            --hot: #FB923C;
        }

        /* 🚀 转盘页 (lucky) 强制深色主题变量 — 2026-08-29 从 ui.js 运行时注入迁入;
           位于 body.dark-mode 块之后, 同特异性后来者胜, 与原注入块压过 dark-mode 的关系等价;
           fun-mode.css 晚于本文件加载, fun+lucky 并存时仍是 fun 值胜出 (与昔日注入内顺序一致) */
        body.is-lucky-mode {
            --bg: #020617;
            --bg-light: #000000;
            --card-light: #0f172a;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-light: rgba(255,255,255,0.06);
        }

        body.dark-mode .card {
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
            border-color: transparent;
        }

        body.dark-mode .card:not(.header)::before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
        }

        body.dark-mode .header {
            background: rgba(11, 14, 20, 0.85) !important;
            border-color: var(--border-light);
            box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        }

        body.dark-mode .nav-item {
            color: #aaa;
        }

        body.dark-mode .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        body.dark-mode .nav-item.active {
            background: #fff;
            color: #111;
        }

        body.dark-mode .top-nav-menu::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
        }

        body.dark-mode .wallet-info-pill {
            background: #2a2a2a;
            border-color: #444;
        }

        body.dark-mode .wallet-info-pill:hover {
            background: #333;
        }

        body.dark-mode .pill-divider {
            background: #555;
        }

        body.dark-mode .wallet-dropdown-menu {
            background: #1e1e1e;
            border-color: #333;
        }

        body.dark-mode .wallet-menu-item {
            color: #eee;
        }

        body.dark-mode .wallet-menu-item:hover {
            background: #2a2a2a;
        }

        body.dark-mode .search-wrapper {
            border-color: #444;
        }

        body.dark-mode .search-wrapper:focus-within {
            border-color: #777;
        }

        body.dark-mode .search-btn {
            background: rgba(255, 255, 255, 0.05);
            border-color: #444;
            color: #aaa;
        }

        body.dark-mode .search-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        body.dark-mode #mobile-back-btn {
            color: #aaa;
        }

        body.dark-mode .dtab.active {
            border-bottom-color: #fff;
            color: #fff !important;
        }

        /* 📈 图表雷达深邃背景 (加入 !important 强行覆盖卡片默认底色) */
        body.dark-mode .chart-container {
            background: radial-gradient(circle at top right, rgba(30, 41, 59, 0.4), transparent 70%), radial-gradient(circle at bottom left, rgba(15, 23, 42, 0.6), transparent 70%), #0F172A !important;
        }

        /* 隐藏折叠面板自带的默认小三角 */
        details.lucky-ref-card summary::-webkit-details-marker {
            display: none;
        }

        details.lucky-ref-card summary {
            list-style: none;
        }

        details.lucky-ref-card[open] summary .ref-expand-icon {
            transform: rotate(180deg);
        }

        /* 📅 赛博风签到按钮动效 */
        .checkin-btn-cyber {
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(148, 163, 184, 0.15);
            border: 1px solid rgba(148, 163, 184, 0.3);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            color: #e2e8f0;
        }

        .checkin-btn-cyber:hover {
            transform: scale(1.15);
            background: rgba(56, 189, 248, 0.15);
            border-color: rgba(56, 189, 248, 0.5);
            box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
            color: #38bdf8;
        }

        .checkin-btn-cyber svg {
            width: 20px;
            height: 20px;
            transition: color 0.3s;
        }

        .checkin-btn-cyber:hover svg {
            animation: calendarBreathe 1s infinite alternate;
        }

        @keyframes calendarBreathe {
            0% {
                filter: drop-shadow(0 0 2px #38bdf8);
                transform: translateY(0);
            }

            100% {
                filter: drop-shadow(0 0 8px #38bdf8);
                transform: translateY(-1.5px);
            }
        }

        /* 修正暗黑模式下弹窗与悬浮菜单的白色背景 */
        body.dark-mode .modal-content,
        body.is-lucky-mode .modal-content {
            background: var(--card-light);
            color: var(--text-main);
            border: 1px solid var(--border-light);
        }

        body.dark-mode .modal-header h3,
        body.is-lucky-mode .modal-header h3 {
            color: var(--text-main);
        }

        body.dark-mode .close-btn,
        body.is-lucky-mode .close-btn {
            background: var(--bg-light);
            color: var(--text-muted);
        }

        body.dark-mode .close-btn:hover,
        body.is-lucky-mode .close-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-main);
        }

        body.dark-mode .network-card,
        body.is-lucky-mode .network-card {
            background: var(--bg-light);
            border-color: var(--border-light);
        }

        body.dark-mode .network-card:hover,
        body.is-lucky-mode .network-card:hover {
            border-color: var(--text-muted);
            background: var(--card-light);
        }

        body.dark-mode .net-info h4,
        body.is-lucky-mode .net-info h4 {
            color: var(--text-main);
        }

        body.dark-mode .net-info p,
        body.is-lucky-mode .net-info p {
            color: var(--text-muted);
        }

        body.dark-mode .back-nav,
        body.is-lucky-mode .back-nav {
            color: var(--text-muted);
        }

        body.dark-mode .back-nav:hover,
        body.is-lucky-mode .back-nav:hover {
            color: var(--text-main);
        }

        body.dark-mode .amount-input-wrapper input,
        body.is-lucky-mode .amount-input-wrapper input {
            background: var(--bg-light);
            border-color: var(--border-light);
            color: var(--text-main);
        }

        body.dark-mode .amount-input-wrapper input:focus,
        body.is-lucky-mode .amount-input-wrapper input:focus {
            border-color: var(--text-main);
        }

        body.dark-mode .currency-tag,
        body.is-lucky-mode .currency-tag {
            color: var(--text-muted);
        }

        body.dark-mode .modal-submit-btn,
        body.is-lucky-mode .modal-submit-btn {
            background: var(--text-main);
            color: var(--bg-light);
        }

        body.dark-mode .modal-submit-btn:hover,
        body.is-lucky-mode .modal-submit-btn:hover {
            opacity: 0.85;
        }

        body.dark-mode .modal-subtitle,
        body.is-lucky-mode .modal-subtitle {
            color: var(--text-muted);
        }

        /* 🚀 定制化现代表单组件 (针对坐庄盘/私有盘) */
        .custom-form-group {
            margin-bottom: 20px;
        }

        .custom-form-label {
            font-size: 0.85rem;
            color: #94a3b8;
            font-weight: 700;
            margin-bottom: 8px;
            display: block;
            letter-spacing: 0.5px;
        }

        .custom-form-input {
            width: 100%;
            box-sizing: border-box;
            padding: 14px 16px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f8fafc;
            border-radius: 12px;
            outline: none;
            font-size: 0.95rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            font-family: var(--font-sans);
        }

        .custom-form-input:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
            background: rgba(15, 23, 42, 0.8);
        }

        .custom-form-input::placeholder {
            color: rgba(148, 163, 184, 0.5);
        }

        .custom-form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        /* 🚀 侧边菜单美化 (自动适配深浅色主题) */
        .side-lang-btn {
            width: 100%;
            text-align: left;
            padding: 14px 20px;
            border-radius: 12px;
            background: var(--bg);
            border: 1px solid var(--border-light);
            cursor: pointer;
            font-weight: 600;
            color: var(--text-main);
            font-size: 0.95em;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: var(--font-sans);
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .side-lang-btn:hover {
            background: rgba(0, 0, 0, 0.04);
            border-color: var(--text-muted);
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        body.dark-mode .side-lang-btn {
            background: rgba(255, 255, 255, 0.02);
            border-color: rgba(255, 255, 255, 0.05);
        }

        body.dark-mode .side-lang-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* ✅ 资产组合面板的暗黑模式适配 */
        body.dark-mode #payout-popover .modal-content {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #f8fafc !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
        }

        body.dark-mode .payout-item {
            border-bottom-color: rgba(255, 255, 255, 0.05);
        }

        body.dark-mode .ptab {
            color: #94a3b8;
        }

        body.dark-mode .ptab.active {
            color: #38bdf8 !important;
        }

        body.dark-mode .ptab.active::after {
            background: #38bdf8 !important;
        }

        /* ✅ 修复转盘模式下打开资产面板白屏看不清：精准拦截真正的白色卡片容器并赋予沉浸式暗色 */
        body.is-lucky-mode .modal-content {
            background: rgba(15, 23, 42, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
            color: #f8fafc !important;
        }

        body.is-lucky-mode .modal-header h3 {
            color: #f8fafc !important;
        }

        body.is-lucky-mode .close-btn {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #f8fafc !important;
        }

        body.is-lucky-mode .close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        body.is-lucky-mode select {
            background: #0f172a !important;
            color: #f8fafc !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        body.is-lucky-mode .payout-item {
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        body.is-lucky-mode .ptab {
            color: #94a3b8;
        }

        body.is-lucky-mode .ptab.active {
            color: #38bdf8 !important;
        }

        body.is-lucky-mode .ptab.active::after {
            background: #38bdf8 !important;
        }

        @keyframes needleWobble {

            0%,
            100% {
                transform: translateX(-50%) rotate(0deg);
            }

            50% {
                transform: translateX(-50%) rotate(15deg);
            }
        }

        .wobbling {
            animation: needleWobble 0.1s ease-in-out infinite;
        }

        /* 🎰 Super Lucky Arcade UI */
        #view-lucky {
            position: relative;
            isolation: isolate;
            padding: 30px;
            border-radius: 24px;
            border: 1px solid transparent;
            overflow-x: hidden;
            box-sizing: border-box;
            width: 100%;
            max-width: 100vw;
            background: radial-gradient(circle at 50% 0%, #1e2235, #0b0f19);
            color: #fff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.4);
        }

        #view-lucky::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 10;
        }

        #view-lucky::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: 0.3;
            background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
            background-size: 30px 30px;
            mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
        }

        .lucky-panel {
            position: relative;
            padding: 0 0 20px 0;
            text-align: center;
            background: transparent;
            border: none;
        }

        .lucky-panel h2 {
            font-family: var(--font-mono);
            color: #ffd700;
            text-transform: uppercase;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
            letter-spacing: 0.05em;
            margin: 0 0 8px 0;
            font-size: 2.8rem;
            font-weight: 800;
        }

        .lucky-panel p {
            margin: 0 !important;
            color: #94a3b8 !important;
            font-size: 1rem;
        }

        .lucky-stage {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
            align-items: stretch;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }

        .lucky-glass-card {
            position: relative;
            color: #fff;
            border-radius: 20px;
            border: 1px solid transparent;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.2);
            padding: 24px;
            flex: 1 1 350px;
            box-sizing: border-box;
        }

        .lucky-glass-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }

        .lucky-machine-card {
            max-width: 550px;
            margin: 0 auto;
        }

        .lucky-machine-card>* {
            position: relative;
            z-index: 1;
        }

        .lucky-balance-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid transparent;
            border-radius: 16px;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .lucky-balance-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        #luck-progress-bar {
            width: 100% !important;
            background: linear-gradient(0deg, #38bdf8, #818cf8, #a855f7) !important;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
            border-radius: 8px;
        }

        /* ⚡ 幸运值满格闪电脉冲发光特效 */
        @keyframes lightningGlow {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(255, 61, 90, 0.6);
                filter: brightness(1);
            }

            5% {
                box-shadow: 0 0 30px rgba(255, 209, 102, 1), inset 0 0 15px rgba(255, 255, 255, 0.8);
                filter: brightness(1.5);
            }

            10% {
                box-shadow: 0 0 10px rgba(255, 61, 90, 0.6);
                filter: brightness(1);
            }

            12% {
                box-shadow: 0 0 40px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 138, 61, 1), inset 0 0 20px rgba(255, 255, 255, 1);
                filter: brightness(2);
            }

            16% {
                box-shadow: 0 0 10px rgba(255, 61, 90, 0.6);
                filter: brightness(1);
            }
        }

        .luck-bar-lightning {
            animation: lightningGlow 2.5s infinite;
            background: linear-gradient(0deg, #ff3d5a, #ff8a3d, #ffffff);
        }

        #burst-progress-bar {
            width: 100% !important;
            background: linear-gradient(0deg, #ef4444, #facc15) !important;
            border-radius: 4px;
        }

        /* 🏆 总奖池跳动时的高亮脉冲特效 */
        @keyframes jackpotFlash {
            0% {
                filter: drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #ffffff) brightness(1.5);
                transform: scale(1.05);
            }

            30% {
                filter: drop-shadow(0 0 20px #facc15) drop-shadow(0 0 40px #f59e0b) brightness(1.2);
                transform: scale(1.15);
            }

            100% {
                filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5)) brightness(1);
                transform: scale(1);
            }
        }

        .jackpot-flash {
            animation: jackpotFlash 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
        }

        /* ✨ 集齐提醒文字的急促呼吸闪烁特效 */
        @keyframes collectedBlink {

            0%,
            100% {
                opacity: 1;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(16, 185, 129, 1);
                transform: scale(1.15);
            }

            50% {
                opacity: 0.8;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 5px rgba(16, 185, 129, 0.5);
                transform: scale(0.95);
            }
        }

        /* 🫧 持续悬浮气泡特效 (带呼吸辉光与跳动) */
        @keyframes breathGlowBubble {

            0%,
            100% {
                transform: translateX(-50%) scale(0.98);
                opacity: 0.9;
                filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.2));
            }

            50% {
                transform: translateX(-50%) scale(1.02);
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.8));
            }
        }

        .jackpot-next-bubble {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(251, 191, 36, 0.5);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.85rem;
            color: #f8fafc;
            font-weight: bold;
            pointer-events: none;
            opacity: 1;
            animation: breathGlowBubble 3s infinite ease-in-out;
            display: none;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(251, 191, 36, 0.2);
            white-space: nowrap;
            width: max-content;
            z-index: 50;
        }

        .jackpot-next-bubble .bubble-row {
            display: flex;
            align-items: baseline;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .jackpot-next-bubble {
                flex-direction: column;
                gap: 2px;
                padding: 6px 12px;
                font-size: 0.75rem;
                bottom: calc(100% + 5px);
            }
        }

        .jackpot-next-bubble::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px 6px 0;
            border-style: solid;
            border-color: rgba(30, 41, 59, 0.95) transparent transparent transparent;
        }

        .jackpot-next-bubble::before {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 7px 7px 0;
            border-style: solid;
            border-color: rgba(251, 191, 36, 0.4) transparent transparent transparent;
            z-index: -1;
        }

        /* 🔥 爆盘模式整个进度条容器剧烈震动与闪烁 */
        @keyframes meterShake {

            0%,
            100% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(-1px, 1px);
            }

            50% {
                transform: translate(1px, -1px);
            }

            75% {
                transform: translate(-1px, -1px);
            }
        }

        .burst-mode-shake {
            animation: meterShake 0.4s ease-in-out infinite, lightningGlow 2.5s infinite;
            border-color: rgba(239, 68, 68, 0.8);
        }

        /* 🫀 爆盘倒计时文字急促呼吸跳动特效 */
        @keyframes burstTextPulse {

            0%,
            100% {
                transform: scale(1);
                text-shadow: 0 0 10px #facc15;
            }

            50% {
                transform: scale(1.15);
                text-shadow: 0 0 20px #facc15, 0 0 40px #ef4444;
                color: #fff;
            }
        }

        .burst-text-anim {
            animation: burstTextPulse 0.8s infinite ease-in-out;
            display: inline-block;
        }

        /* ✨ 飞出物品的金光闪闪长拖尾特效 */
        .golden-trail-effect {
            filter: drop-shadow(0 20px 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 45px 20px rgba(255, 69, 0, 0.6));
        }

        /* ⚔️ 擂台降临全屏压迫感震动与红光预警 */
        @keyframes arenaShake {

            0%,
            100% {
                transform: translate(0, 0) rotate(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translate(-6px, -6px) rotate(-1.5deg);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translate(6px, 6px) rotate(1.5deg);
            }
        }

        .arena-shake {
            animation: arenaShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }

        body.arena-mode-active #view-lucky {
            box-shadow: inset 0 0 150px var(--arena-glow, rgba(239, 68, 68, 0.4)), 0 20px 50px rgba(0, 0, 0, 0.6);
            border-color: var(--arena-glow, rgba(239, 68, 68, 0.6));
        }

        /* 🚨 爆能倒计时最后5秒全屏脉冲红光预警 */
        @keyframes burstWarningPulse {

            0%,
            100% {
                box-shadow: inset 0 0 50px rgba(239, 68, 68, 0.2), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
                border-color: rgba(239, 68, 68, 0.3) !important;
            }

            50% {
                box-shadow: inset 0 0 150px rgba(239, 68, 68, 0.8), 0 0 50px rgba(239, 68, 68, 0.5) !important;
                border-color: rgba(239, 68, 68, 1) !important;
            }
        }

        body.burst-warning-active #view-lucky {
            animation: burstWarningPulse 0.5s infinite ease-in-out;
        }

        /* 👑 擂主易位时名字高亮爆发动画 */
        @keyframes arenaLordUsurp {
            0% {
                transform: scale(1);
                text-shadow: none;
                color: #38bdf8;
            }

            10% {
                transform: scale(1.4);
                text-shadow: 0 0 20px #facc15, 0 0 40px #ef4444;
                color: #fff;
                background: rgba(239, 68, 68, 0.4);
                border-radius: 8px;
                padding: 4px 10px;
                box-shadow: 0 0 15px #ef4444;
                margin-right: -4px;
            }

            80% {
                transform: scale(1.1);
                text-shadow: 0 0 10px #facc15;
                color: #facc15;
                background: rgba(239, 68, 68, 0.1);
                border-radius: 8px;
                padding: 2px 6px;
                box-shadow: 0 0 5px #ef4444;
                margin-right: -2px;
            }

            100% {
                transform: scale(1);
                text-shadow: none;
                color: #38bdf8;
                background: transparent;
                padding: 0;
                box-shadow: none;
                margin-right: 0;
            }
        }

        .arena-lord-usurp-anim {
            animation: arenaLordUsurp 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            display: inline-flex;
            align-items: center;
            transform-origin: right center;
        }

        /* ⚔️ 飞火轮盘特效 (擂台模式专属) */
        .lucky-wheel-container.arena-fire-ring::before {
            content: '';
            position: absolute;
            inset: -25px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #ff4500, #facc15, #ef4444, #ff8c00, #ff4500);
            z-index: -1;
            filter: blur(15px);
            animation: arenaFireSpin 1.5s linear infinite;
            display: block;
        }

        .lucky-wheel-container.arena-fire-ring::after {
            content: '';
            position: absolute;
            inset: -15px;
            border-radius: 50%;
            background: conic-gradient(from 180deg, #ff0000, #ff8c00, #ffd700, #ff0000);
            z-index: -1;
            filter: blur(8px);
            animation: arenaFireSpin 1s linear infinite reverse;
            display: block;
        }

        @keyframes arenaFireSpin {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 0.8;
            }

            50% {
                transform: rotate(180deg) scale(1.05);
                opacity: 1;
            }

            100% {
                transform: rotate(360deg) scale(1);
                opacity: 0.8;
            }
        }

        /* 🌟 爆能状态悬浮标签的漂浮特效 */
        @keyframes floatBurst {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-8px) scale(1.05);
                filter: brightness(1.2) drop-shadow(0 0 15px #facc15);
            }
        }

        /* ✨ 技能激活抛物线蹦字特效 */
        @keyframes skillPopBounce {
            0% {
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 0;
            }

            15% {
                transform: translate(calc(-50% + var(--tx, 0px) * 0.15), calc(-50% - 100px)) scale(1.2);
                opacity: 1;
            }

            50% {
                transform: translate(calc(-50% + var(--tx, 0px) * 0.5), calc(-50% - 140px)) scale(1.1);
                opacity: 1;
            }

            100% {
                transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% - 30px)) scale(0.8);
                opacity: 0;
            }
        }

        /* ✨ 技能激活全屏字幕动效 */
        @keyframes skillSubtitleAnim {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
                filter: blur(10px);
                letter-spacing: -2px;
            }

            15% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.1);
                filter: blur(0);
                letter-spacing: 2px;
            }

            30% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
                letter-spacing: normal;
            }

            80% {
                opacity: 1;
                transform: translate(-50%, -60%) scale(1);
                filter: blur(0);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -80%) scale(1.2);
                filter: blur(5px);
            }
        }

        /* ✨ 小字播报动画 */
        @keyframes dropBroadcastAnim {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }

            10% {
                opacity: 1;
                transform: translateY(0);
            }

            80% {
                opacity: 1;
                transform: translateY(0);
            }

            100% {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        /* ⚡ 闪电劈落与全屏震爆闪光特效 */
        @keyframes thunderStrikeAnim {
            0% {
                opacity: 0;
                transform: translateX(-50%) scaleX(0.5);
                filter: brightness(1);
            }

            10% {
                opacity: 1;
                transform: translateX(-50%) scaleX(1.5);
                filter: brightness(2);
            }

            20% {
                opacity: 0;
                transform: translateX(-50%) scaleX(0.5);
            }

            30% {
                opacity: 1;
                transform: translateX(-50%) scaleX(2.5);
                filter: brightness(3);
            }

            100% {
                opacity: 0;
                transform: translateX(-50%) scaleX(1);
            }
        }

        @keyframes screenFlashAnim {
            0% {
                opacity: 0;
            }

            10% {
                opacity: 0.6;
            }

            20% {
                opacity: 0;
            }

            30% {
                opacity: 0.4;
            }

            100% {
                opacity: 0;
            }
        }

        /* ✨ 技能悬浮介绍面板 */
        .passive-skill-item {
            cursor: pointer;
            pointer-events: auto;
            position: relative;
        }

        .passive-skill-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid var(--border-light);
            color: #f8fafc;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 0.85rem;
            white-space: nowrap;
            z-index: 100000;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
            line-height: 1.4;
            font-family: var(--font-sans);
            animation: passiveTooltipBreathe 12s infinite;
        }

        @keyframes passiveTooltipBreathe {

            /* 🆕 v5.47: 触屏自动呼吸展开 1.2s → 4s
                 · 旧: 0%-80% hidden (9.6s) / 80%-85% 淡入 (0.6s) / 85%-95% 可见 (1.2s) / 95%-100% 淡出 (0.6s)
                 · 新: 0%-58% hidden (7s) / 58%-62% 淡入 (0.5s) / 62%-96% 可见 (4s) / 96%-100% 淡出 (0.5s)
                 · 总周期保持 12s 不变 (避免动到其它依赖此动画的元素)
                 · 体感: 触屏按一下技能 logo,面板自动展开并停留 4s 让你读完说明 */
            0%,
            58%,
            100% {
                opacity: 0;
                visibility: hidden;
                transform: translateX(-50%) translateY(10px);
            }

            62%,
            96% {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(0);
            }
        }

        .passive-skill-item:hover .passive-skill-tooltip,
        .passive-skill-item:active .passive-skill-tooltip {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            animation: none;
        }

        /* ✨ 技能激活转盘中心淡金色光晕扩散特效 */
        @keyframes goldenRipple {
            0% {
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 1;
                border-width: 6px;
            }

            100% {
                transform: translate(-50%, -50%) scale(4);
                opacity: 0;
                border-width: 0px;
            }
        }

        /* 🆕 v6.00: 技能触发动效 — 全新华丽升级 (GSAP 精良版)
           ───────────────────────────────────────────────────────
           设计目标:
             · 视觉: 前置能量飞入 → 中心炸裂 → 分支专属动效 → 后置粒子爆发
             · 音效: 多音效时序叠加,形成"短-中-长"史诗递进
             · 主题: 4 技能颜色统一协调 (discount 紫 / double 红 / SOL 紫绿 / ETH 蓝)
           ─────────────────────────────────────────────────────── */

        /* 屏幕强烈震动 (技能击中转盘中心瞬间) */
        @keyframes skillScreenShake {

            0%,
            100% {
                transform: translate(0, 0);
            }

            15% {
                transform: translate(-8px, 6px) rotate(-0.4deg);
            }

            30% {
                transform: translate(7px, -5px) rotate(0.3deg);
            }

            45% {
                transform: translate(-5px, 4px) rotate(-0.2deg);
            }

            60% {
                transform: translate(4px, -3px) rotate(0.15deg);
            }

            80% {
                transform: translate(-2px, 1px);
            }
        }

        /* 转盘中心圆环 3 层同步波纹 (cool down 后, 强化"激活中") */
        @keyframes skillRingExpand {
            0% {
                transform: translate(-50%, -50%) scale(0.3);
                opacity: 1;
                border-width: 8px;
            }

            70% {
                opacity: 0.4;
            }

            100% {
                transform: translate(-50%, -50%) scale(6);
                opacity: 0;
                border-width: 1px;
            }
        }

        /* 全屏霓虹辐射 (紫/红/绿/蓝 任意主题色可换) */
        @keyframes skillFullRadiate {
            0% {
                opacity: 0;
                transform: scale(0.2);
            }

            20% {
                opacity: 0.45;
            }

            100% {
                opacity: 0;
                transform: scale(2.5);
            }
        }

        /* X 双刀斜切 — discount 专属 */
        @keyframes cyberSlashSlash1 {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(-25deg) scaleX(0);
            }

            20% {
                opacity: 1;
                transform: translate(-50%, -50%) rotate(-25deg) scaleX(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(-25deg) scaleX(2.4) scaleY(0.06);
            }
        }

        @keyframes cyberSlashSlash2 {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(25deg) scaleX(0);
            }

            30% {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(25deg) scaleX(0);
            }

            50% {
                opacity: 1;
                transform: translate(-50%, -50%) rotate(25deg) scaleX(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) rotate(25deg) scaleX(2.4) scaleY(0.06);
            }
        }

        /* 紫色霓虹扫描线 (discount 辅助) */
        @keyframes cyberScanSweep {
            0% {
                opacity: 0;
                transform: translateX(-100vw);
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: translateX(100vw);
            }
        }

        /* 同心圆能量潮 — double 专属 (3 层环依次脉冲) */
        @keyframes doubleEnergyPulse {
            0% {
                transform: translate(-50%, -50%) scale(0.1);
                opacity: 1;
                border-width: 24px;
            }

            100% {
                transform: translate(-50%, -50%) scale(2.6);
                opacity: 0;
                border-width: 1px;
            }
        }

        /* 中心圆环旋转环带 — double/sol 装饰 */
        @keyframes skillRingRotate {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* 全息数据网格扫描 — sol 专属 */
        @keyframes solHoloGrid {
            0% {
                opacity: 0;
                clip-path: inset(50% 0 50% 0);
            }

            20% {
                opacity: 0.8;
                clip-path: inset(0 0 0 0);
            }

            80% {
                opacity: 0.5;
                clip-path: inset(0 0 0 0);
            }

            100% {
                opacity: 0;
                clip-path: inset(50% 0 50% 0);
            }
        }

        /* SOL 解构粒子爆裂 */
        @keyframes solShardBurst {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 1;
            }

            50% {
                transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.4) rotate(180deg);
                opacity: 0.85;
            }

            100% {
                transform: translate(calc(-50% + var(--dx2, 0px)), calc(-50% + var(--dy2, 0px))) scale(0.3) rotate(360deg);
                opacity: 0;
            }
        }

        /* 神经节点连线 — eth 专属 */
        @keyframes ethNeuralLink {
            0% {
                stroke-dashoffset: 200;
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            100% {
                stroke-dashoffset: 0;
                opacity: 0.3;
            }
        }

        /* ETH 中心脉冲增强 */
        @keyframes ethCoreBurst {
            0% {
                transform: translate(-50%, -50%) scale(0.3);
                opacity: 1;
                box-shadow: 0 0 30px #627eea, inset 0 0 20px #627eea;
            }

            50% {
                transform: translate(-50%, -50%) scale(1.4);
                opacity: 1;
                box-shadow: 0 0 80px #627eea, 0 0 120px #8a9eff, inset 0 0 40px #627eea;
            }

            100% {
                transform: translate(-50%, -50%) scale(3);
                opacity: 0;
                box-shadow: 0 0 200px #627eea;
            }
        }

        /* 金色粒子飞散 — 后置爆炸 */
        @keyframes skillParticleFly {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }

            100% {
                transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0);
                opacity: 0;
            }
        }

        /* 字幕 3D 翻转入场 */
        @keyframes skillSubtitle3DFlip {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) perspective(800px) rotateX(-90deg) scale(0.4);
                filter: blur(12px);
            }

            20% {
                opacity: 1;
                transform: translate(-50%, -50%) perspective(800px) rotateX(20deg) scale(1.15);
                filter: blur(0);
            }

            35% {
                transform: translate(-50%, -50%) perspective(800px) rotateX(0deg) scale(1);
                filter: blur(0);
            }

            75% {
                opacity: 1;
                transform: translate(-50%, -60%) perspective(800px) rotateX(0deg) scale(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -85%) perspective(800px) rotateX(8deg) scale(1.2);
                filter: blur(6px);
            }
        }

        /* 拖尾粒子 (技能图标飞向转盘中心沿途) */
        @keyframes skillTrailFade {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.3);
            }
        }

        /* 中心能量吞噬 (技能命中瞬间的高光向内吸) */
        @keyframes skillCenterInhale {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }

            30% {
                transform: translate(-50%, -50%) scale(0.6);
                opacity: 0.9;
            }

            100% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
        }

        /* 高频反色扫描 — 多技能通用的"激活中"高光 */
        @keyframes skillAuraFlash {

            0%,
            100% {
                opacity: 0.4;
            }

            50% {
                opacity: 0.9;
            }
        }


        .lucky-wheel-container {
            position: relative;
            width: clamp(240px, 32vw, 320px);
            /* 🌟 转盘等比缩小 */
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
            flex-shrink: 0;
            /* 🆕 v4.99: container query 启用 — 让 .lucky-wheel-core 用 cqw 计算
               圆圈 = 14% × 转盘直径, 任何屏宽/方向下都跟转盘等比缩放
               解决: 之前 vw 计算 + 转盘 min(vw, 270px) 独立计算, 跨设备比例不一致
                     PC 24% / 移动 14% → 现在统一 14% */
            container-type: inline-size;
        }

        .lucky-wheel-container::before {
            display: none;
        }

        .lucky-wheel-container::after {
            display: none;
        }

        .lucky-wheel-outer {
            position: absolute;
            inset: -16px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #d4af37, #fff7c2, #aa8022, #5c4000, #d4af37, #fff7c2, #aa8022, #d4af37);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.8), inset 0 -4px 10px rgba(0, 0, 0, 0.6);
            z-index: 0;
            border: 2px solid #332200;
        }

        .lucky-wheel-outer::after {
            content: '';
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1e293b, #0f172a);
            box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(255, 255, 255, 0.2);
        }

        .lucky-wheel-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            z-index: 1;
            border: 3px solid #d4af37;
            background: conic-gradient(from -25.71deg, #233045 0 51.43deg, #131d33 51.43deg 102.86deg, #233045 102.86deg 154.29deg, #131d33 154.29deg 205.71deg, #233045 205.71deg 257.14deg, #131d33 257.14deg 308.57deg, #1a2538 308.57deg 360deg);
            transition: transform 5s cubic-bezier(0.08, 0.82, 0.12, 1);
            box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.1);
        }

        /* 🚀 新增 2：精准的指针物理回弹特效 */
        @keyframes pointerTickAnim {
            0% {
                transform: translateX(-50%) rotate(0deg);
            }

            30% {
                transform: translateX(-50%) rotate(18deg);
            }

            100% {
                transform: translateX(-50%) rotate(0deg);
            }
        }

        .pointer-tick {
            animation: pointerTickAnim 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .lucky-wheel-inner::before {
            display: none;
        }

        .wheel-label-neon {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 76px;
            height: 80px;
            margin-left: -38px;
            margin-top: -40px;
            text-align: center;
            transform-origin: 50% 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* keep it centered in its slice */
            justify-content: flex-start;
            padding-top: 8px;
            box-sizing: border-box;
            color: #f8fafc;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            font-family: var(--font-mono);
            font-weight: bold;
            z-index: 2;
            /* Ensure it stays above the wheel background */
            transform: rotate(var(--rot)) translateY(calc(clamp(240px, 32vw, 320px) * -0.32));
        }

        .wheel-label-neon img {
            width: 32px !important;
            height: 32px !important;
            margin-bottom: 4px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        .wheel-label-neon b {
            font-size: 0.9em;
            /* Increased font size for prize names */
        }

        /* ============================================================
           🆕 v5.21: 转盘内部走马灯效果
              · 每个格子包一层 .marquee-cell,内部做 3 层叠加循环动画
              · 配色从 inline color 提取到 --glow CSS 变量,自动匹配背景
              · 速度由 JS 根据抽奖频率动态调整 (CSS 变量 --marquee-dur)
              · 转盘启动旋转时 pause,停止时 resume
           ============================================================ */

        /* ============================================================
           🆕 v5.23: 转盘内"走马灯"轮流闪动 - LED 灯带式 sweep
              设计: 7 个格子轮流"亮" (opacity + filter + box-shadow)
                    一个接一个,形成循环转圈效果
                    类似待机状态指示灯,每个格子短暂亮一下然后暗下去
              总周期: 默认 3.5s (一个完整循环,7 个格子各亮一次)
              每格亮持续: ~14% 周期 (≈0.5s) — 短暂但视觉清晰
              频率调速: WheelMarquee.updateSpeed() 更新 --marquee-dur CSS 变量
                        0 次/60s → 3.5s | 1-3 → 2.8s | 4-10 → 2.0s | 11+ → 1.2s
           ============================================================ */

        /* 走马灯主容器 - 填充父元素,做 opacity/filter sweep (不动 transform,免冲突) */
        .marquee-cell {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform-origin: center center;
            pointer-events: none;
            border-radius: 14px;
            animation: wheelLightSweep var(--marquee-dur, 3.5s) linear infinite;
        }

        /* 走马灯光晕底圈 (高亮时跟随奖品主色脉动) */
        .marquee-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--glow, #facc15) 0%, transparent 65%);
            transform: translate(-50%, -50%);
            opacity: 0;
            pointer-events: none;
            animation: wheelLightGlow var(--marquee-dur, 3.5s) linear infinite;
            z-index: -1;
        }

        /* 核心: 亮 → 暗 的 keyframes (用 opacity + filter + box-shadow 表现"亮起来") */
        @keyframes wheelLightSweep {

            0%,
            100% {
                opacity: 0.55;
                filter: brightness(0.7);
                box-shadow: none;
            }

            7% {
                opacity: 1;
                filter: brightness(1.5) drop-shadow(0 0 8px var(--glow, #facc15));
                box-shadow: 0 0 18px 2px var(--glow, #facc15), inset 0 0 8px var(--glow, #facc15);
            }

            18% {
                opacity: 0.55;
                filter: brightness(0.7);
                box-shadow: none;
            }
        }

        /* 光晕同步: 高亮时段 opacity 短暂冲到 0.7,其他时段 0 */
        @keyframes wheelLightGlow {

            0%,
            100% {
                opacity: 0;
            }

            7% {
                opacity: 0.85;
                transform: translate(-50%, -50%) scale(1.4);
            }

            18% {
                opacity: 0;
            }
        }

        /* 7 个格子每个相位错开 (3.5s 周期 / 7 = 0.5s 步长) — 形成接力转圈 */
        .wheel-label-neon:nth-child(1) .marquee-cell,
        .wheel-label-neon:nth-child(1) .marquee-glow {
            animation-delay: 0s;
        }

        .wheel-label-neon:nth-child(2) .marquee-cell,
        .wheel-label-neon:nth-child(2) .marquee-glow {
            animation-delay: -0.5s;
        }

        .wheel-label-neon:nth-child(3) .marquee-cell,
        .wheel-label-neon:nth-child(3) .marquee-glow {
            animation-delay: -1.0s;
        }

        .wheel-label-neon:nth-child(4) .marquee-cell,
        .wheel-label-neon:nth-child(4) .marquee-glow {
            animation-delay: -1.5s;
        }

        .wheel-label-neon:nth-child(5) .marquee-cell,
        .wheel-label-neon:nth-child(5) .marquee-glow {
            animation-delay: -2.0s;
        }

        .wheel-label-neon:nth-child(6) .marquee-cell,
        .wheel-label-neon:nth-child(6) .marquee-glow {
            animation-delay: -2.5s;
        }

        .wheel-label-neon:nth-child(7) .marquee-cell,
        .wheel-label-neon:nth-child(7) .marquee-glow {
            animation-delay: -3.0s;
        }

        /* 转盘转动期间走马灯暂停 (避免视觉冲突) */
        .lucky-wheel-inner.is-spinning .marquee-cell,
        .lucky-wheel-inner.is-spinning .marquee-glow {
            animation-play-state: paused;
        }

        /* ============================================================
           🆕 v5.22: 移动端转盘全方位渲染优化
              目标: 降 paint/composite 开销,尽量不损失视觉效果
              策略:
                1. conic-gradient 7 色 → 3 色 radial-gradient (paint -60%)
                2. 走马灯 swing 关闭 + glow 直接 display:none (动画 3层→1层)
                3. img drop-shadow / text-shadow 全部关闭 (filter -100%)
                4. 装饰元素 pointer-events:none (hit-test 跳过)
                5. .lucky-wheel-container 加 contain: paint (重绘范围收窄)
                6. will-change 精简化,只保留真正需要 GPU 加速的元素
                7. .marquee-cell 强制 transform: translateZ(0) 开 GPU 层
                8. img 加 content-visibility:auto (移出视口跳过渲染)
                9. 外圈 ::after 渐变隐藏 (避免每帧重新合成)
               10. lucky-wheel-inner 内阴影半径 40→15 (paint 减少)
           ============================================================ */
        @media (max-width: 768px) {

            /* 走马灯 light sweep: 移动端加快节奏 (0.8x duration)
               🆕 v5.27.2: 改用单独属性, 避免 `animation` 简写重置 nth-child 设的 animation-delay (导致 7 格子同步)
               🆕 v5.47: mobile 显式覆盖 animation-delay 为 0.4s 步长 (2.8s/7)
                 · 根因: PC 的 nth-child delay 是按 3.5s 周期 + 0.5s 步长设的 (-0.5/-1.0/-1.5/...)
                 · mobile duration 改成 2.8s (=3.5*0.8) 后, 但 nth-child delay 仍是 0.5s 步长
                 · 0.5s/2.8s = 17.86% 相位 ≠ 正确 14.29% 相位 (2.8s/7)
                 · 结果: 7 个格子步长错位 → 视觉上不依次循环, 像乱跳
                 · 修法: mobile 显式设 animation-delay 为 0/-0.4/-0.8/-1.2/-1.6/-2.0/-2.4s (步长 0.4s)
                 · !important 是为了在 @media 内部 specificity 战胜 nth-child */
            .marquee-cell {
                animation-name: wheelLightSweep;
                animation-duration: calc(var(--marquee-dur, 3.5s) * 0.8);
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }

            .marquee-glow {
                animation-name: wheelLightGlow;
                animation-duration: calc(var(--marquee-dur, 3.5s) * 0.8);
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                width: 60px;
                /* mobile 略小 */
                height: 60px;
            }

            /* 🆕 v5.47: mobile 显式重设 7 步延迟 (0/-0.4/-0.8/-1.2/-1.6/-2.0/-2.4s) — 走马灯依次循环旋转 */
            .wheel-label-neon:nth-child(1) .marquee-cell,
            .wheel-label-neon:nth-child(1) .marquee-glow {
                animation-delay: 0s;
            }

            .wheel-label-neon:nth-child(2) .marquee-cell,
            .wheel-label-neon:nth-child(2) .marquee-glow {
                animation-delay: -0.4s;
            }

            .wheel-label-neon:nth-child(3) .marquee-cell,
            .wheel-label-neon:nth-child(3) .marquee-glow {
                animation-delay: -0.8s;
            }

            .wheel-label-neon:nth-child(4) .marquee-cell,
            .wheel-label-neon:nth-child(4) .marquee-glow {
                animation-delay: -1.2s;
            }

            .wheel-label-neon:nth-child(5) .marquee-cell,
            .wheel-label-neon:nth-child(5) .marquee-glow {
                animation-delay: -1.6s;
            }

            .wheel-label-neon:nth-child(6) .marquee-cell,
            .wheel-label-neon:nth-child(6) .marquee-glow {
                animation-delay: -2.0s;
            }

            .wheel-label-neon:nth-child(7) .marquee-cell,
            .wheel-label-neon:nth-child(7) .marquee-glow {
                animation-delay: -2.4s;
            }

            /* 转盘内部背景: 7 色 conic → 6 色 conic (5 单 + 1 双, 每块 51.43deg)
               🆕 v5.48: 重排色块宽度让 logo 中心对齐色块中心
                 · v5.47 用了 60deg 等宽 → 7 个 logo 严重错位 (最大 47deg 偏差, 半扇区宽)
                 · 7 个 logo 中心角度 (0/51.43/102.86/154.29/205.71/257.14/308.57) 在 360deg 圆周上
                 · 6 个 51.43deg 色块正好覆盖 5 个单 logo + 最后 1 块跨 2 个 logo (XRP+Last)
                 · 每个色块中心 = 一个 logo 的中心 (前 5 块完美对齐, 第 6 块两个 logo 对称分布)
                 · 配色: 浅/深/浅/深/浅/收尾, 跟 PC 7 块同色系
                 · paint 开销仍低于 PC 7 色 */
            .lucky-wheel-inner {
                background: conic-gradient(from -25.71deg,
                        #233045 0 51.43deg,
                        /* -25.71→25.71:   logo1 NewCoin 中心 0 */
                        #131d33 51.43deg 102.86deg,
                        /* 25.71→77.14:    logo2 BTC    中心 51.43 */
                        #233045 102.86deg 154.29deg,
                        /* 77.14→128.57:   logo3 ETH    中心 102.86 */
                        #131d33 154.29deg 205.71deg,
                        /* 128.57→180:     logo4 BNB    中心 154.29 */
                        #233045 205.71deg 257.14deg,
                        /* 180→231.43:     logo5 SOL    中心 205.71 */
                        #1a2538 257.14deg 360deg
                        /* 231.43→334.29:  logo6 XRP + logo7 Last 共用 */
                    );
                box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
                /* 40px → 15px 内阴影 */
                contain: paint;
                /* 重绘范围限制在转盘内,不影响外部 */
            }

            /* 转盘外圈 ::after 渐变直接隐藏 (line 1944 已经处理,这里加 CSS layer 优先级) */
            .lucky-wheel-outer::after {
                display: none;
            }

            /* 外圈 box-shadow 简化 (line 1943 已经 none,这里不再叠加) */

            /* 格子图片 drop-shadow 关闭 (paint -100%) */
            .wheel-label-neon img {
                filter: none;
            }

            /* 格子文字 text-shadow 关闭 */
            .wheel-label-neon {
                text-shadow: none;
            }

            /* 转盘容器加 contain,转盘内重绘不波及外部
               🆕 v5.27c: 去掉 paint — pointer 用 top 负值露在 container 外, contain: paint 会把它裁掉 */
            .lucky-wheel-container {
                contain: layout;
            }

            /* 转盘中心按钮: 简化 inset box-shadow */
            .lucky-wheel-core {
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.9);
            }

            /* 装饰元素全部 pointer-events:none,跳过 hit-test */
            .marquee-cell,
            .marquee-glow,
            .wheel-label-neon,
            .wheel-label-neon img,
            .wheel-label-neon b {
                pointer-events: none;
            }

            /* 奖品图标 content-visibility:auto: 移出视口时跳过渲染 (虽然转盘内可见,但浏览器优化内部布局) */
            .wheel-label-neon img {
                content-visibility: auto;
            }

            /* 🆕 v5.27: 移动端欢乐盘 (micro-mode-toggle) fun-mode fallback
               根因: v4.83 用 :has() 修,部分移动浏览器或 app 内嵌浏览器 :has() 失效
               兜底: 直接选 .skip-anim-wrapper.mobile-only 里的 label (强覆写) */
            body.fun-mode .skip-anim-wrapper.mobile-only label {
                background: linear-gradient(135deg, #FFFCF5 0%, #FFF0D6 100%);
                border: 2px solid rgba(212, 165, 116, 0.5);
                color: #6B4423;
            }

            body.fun-mode .skip-anim-wrapper.mobile-only label:has(input.micro-mode-toggle:checked),
            body.fun-mode .skip-anim-wrapper.mobile-only label.checked {
                background: linear-gradient(135deg, #D4A574 0%, #B8860B 100%);
                border: 2px solid #B8860B;
                color: #FFF8E7;
                box-shadow: 0 4px 14px rgba(184, 134, 11, 0.4);
            }

            body.fun-mode .skip-anim-wrapper.mobile-only label .skip-anim-text {
                color: inherit;
            }
        }

        .lucky-wheel-core {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 3;
            /* 🆕 v5.01: 改用 cqw (container query width) — 圆圈 = 24% × 转盘直径
               父链 .lucky-wheel-container 已设 container-type: inline-size
               任何屏宽/方向下, 圆圈与转盘保持 24% 固定比例 (恢复 76/320 ≈ 23.75% 原始 PC 比例)
               跨设备完全等比缩放 */
            width: 24cqw;
            height: 24cqw;
            font-size: 3.5cqw;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #332200;
            font-weight: 1000;
            background: radial-gradient(circle at 30% 30%, #fff7c2, #d4af37 60%, #8b6508);
            border: 0.5cqw solid #fff7c2;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -3px 8px rgba(0, 0, 0, 0.4), inset 0 3px 8px rgba(255, 255, 255, 0.9);
            font-family: var(--font-sans);
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
            overflow: hidden;
            animation: spinBtnBreathe 2s infinite ease-in-out;
        }

        @keyframes spinBtnBreathe {

            0%,
            100% {
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -3px 8px rgba(0, 0, 0, 0.4), inset 0 3px 8px rgba(255, 255, 255, 0.9), 0 0 0px rgba(255, 215, 0, 0);
            }

            50% {
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), inset 0 -3px 8px rgba(0, 0, 0, 0.4), inset 0 3px 12px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 215, 0, 0.5);
            }
        }

        .lucky-wheel-core::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -150%;
            width: 150%;
            height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: rotate(30deg);
            animation: spinBtnReflection 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes spinBtnReflection {

            0%,
            20% {
                left: -150%;
            }

            80%,
            100% {
                left: 150%;
            }
        }

        #lucky-pointer {
            top: -28px !important;
            width: 44px !important;
            height: 58px !important;
        }

        @keyframes pointerGlow {

            0%,
            100% {
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
            }

            50% {
                filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 61, 90, 1));
            }
        }

        #lucky-pointer svg {
            width: 100%;
            height: 100%;
            animation: pointerGlow 1.5s infinite ease-in-out;
            display: block;
        }


        .lucky-btn-neon {
            border: 1px solid transparent;
            font-weight: 900;
            border-radius: 8px !important;
            cursor: pointer;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: var(--font-mono);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        @keyframes cyberWobble {

            0%,
            100% {
                transform: translateY(0) rotate(-3deg);
            }

            50% {
                transform: translateY(-3px) rotate(3deg);
            }
        }

        .discount-tag {
            position: absolute;
            top: -12px;
            right: -10px;
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(0, 0, 0, 0.9));
            color: #facc15;
            font-size: 0.8em;
            padding: 4px 10px;
            font-weight: 900;
            border-radius: 4px;
            border: 1px solid rgba(250, 204, 21, 0.5);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(250, 204, 21, 0.2), inset 0 0 6px rgba(250, 204, 21, 0.2);
            transform-origin: center;
            animation: cyberWobble 2.5s infinite ease-in-out;
            font-family: var(--font-mono);
            letter-spacing: 1px;
            line-height: 1;
            z-index: 10;
            pointer-events: none;
            text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
            text-transform: uppercase;
            overflow: hidden;
        }

        .discount-tag::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.6), transparent);
            transform: skewX(-20deg);
            animation: discountShine 3s infinite;
        }

        @keyframes discountShine {

            0%,
            80% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        .lucky-btn-neon::before {
            display: none;
        }

        .lucky-btn-neon::after {
            display: none;
        }

        .lucky-btn-neon:hover {
            transform: translateY(-2px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .lucky-btn-neon:active {
            transform: translateY(1px) scale(0.99);
        }

        .btn-spin-1 {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8)) !important;
            color: #38bdf8 !important;
            border: 1px solid rgba(56, 189, 248, 0.2) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 15px rgba(56, 189, 248, 0.05) !important;
        }

        .btn-spin-1:hover {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
            color: #fff;
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: rgba(56, 189, 248, 0.6);
        }

        .btn-spin-10 {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(59, 7, 100, 0.8)) !important;
            color: #f59e0b !important;
            border: 1px solid rgba(245, 158, 11, 0.2) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 15px rgba(245, 158, 11, 0.05) !important;
            text-shadow: none;
        }

        .btn-spin-10:hover {
            background: linear-gradient(135deg, rgba(59, 7, 100, 0.9), rgba(30, 41, 59, 0.9));
            color: #fff;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: rgba(245, 158, 11, 0.6);
        }

        .btn-spin-100 {
            background: linear-gradient(135deg, rgba(69, 10, 10, 0.8), rgba(127, 29, 29, 0.8)) !important;
            color: #fca5a5 !important;
            border: 1px solid rgba(239, 68, 68, 0.2) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 15px rgba(239, 68, 68, 0.05) !important;
            text-shadow: none;
        }

        .btn-spin-100:hover {
            background: linear-gradient(135deg, rgba(127, 29, 29, 0.9), rgba(69, 10, 10, 0.9));
            color: #fff;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: rgba(239, 68, 68, 0.6);
        }

        @keyframes goldenFlashPulse {

            0%,
            100% {
                background: linear-gradient(135deg, #d97706, #b45309) !important;
                box-shadow: 0 0 15px rgba(245, 158, 11, 0.5), inset 0 0 10px rgba(251, 191, 36, 0.3) !important;
                border-color: #f59e0b !important;
                color: #fff !important;
                transform: scale(1);
            }

            50% {
                background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
                box-shadow: 0 0 35px rgba(251, 191, 36, 1), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
                border-color: #fff !important;
                color: #78350f !important;
                transform: scale(1.03);
            }
        }

        .golden-flash-btn {
            animation: goldenFlashPulse 1.2s infinite ease-in-out;
            text-shadow: none;
            z-index: 10;
        }

        /* PC端 操作区 */
        #lucky-desktop-actions {
            display: block;
        }

        #lucky-mobile-actions {
            display: none;
        }

        /* 手机端操作区独有样式 */
        .lucky-mobile-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .lucky-mobile-row {
            display: flex;
            gap: 8px;
            width: 100%;
        }

        .skill-badge-mobile {
            min-height: 44px;
            width: 44px;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .skill-badge-mobile span {
            font-size: 2.2em;
            margin: 0;
            line-height: 1;
            display: block;
        }

        .skill-badge-mobile img {
            width: 34px;
            height: 34px;
            margin: 0;
            display: block;
            filter: drop-shadow(0 0 4px currentColor);
        }

        .skill-badge-mobile .skill-count {
            top: -2px;
            right: -6px;
            width: 20px;
            height: 20px;
            min-width: 20px;
            font-size: 0.75rem;
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .cyber-btn {
            flex: 1;
            position: relative;
            padding: 12px 0;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--cyber-color);
            font-family: var(--font-mono);
            font-size: 0.9em;
            font-weight: 900;
            letter-spacing: 0.5px;
            cursor: pointer;
            outline: none;
            border-radius: 8px;
            transition: all 0.2s;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .cyber-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, var(--cyber-color) 0%, transparent 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0.5;
            transition: 0.2s;
        }

        .cyber-btn:hover::before {
            opacity: 1;
        }

        .cyber-btn.transfer {
            --cyber-color: #38bdf8;
            background: rgba(56, 189, 248, 0.05);
        }

        .cyber-btn.deposit {
            --cyber-color: #10b981;
            background: rgba(16, 185, 129, 0.05);
        }

        .cyber-btn:active {
            transform: scale(0.96);
            background: var(--cyber-color);
            color: #000;
            box-shadow: 0 0 15px var(--cyber-color);
        }

        .lucky-btn-neon-mobile {
            flex: 1;
            padding: 10px 0 !important;
            font-size: 0.85em !important;
            min-height: auto !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px !important;
        }

        .lucky-btn-neon-mobile small {
            margin-top: 4px;
            opacity: 0.9;
            font-size: 0.75rem;
            background: rgba(0, 0, 0, 0.2);
            padding: 2px 6px;
            border-radius: 8px;
        }

        .lucky-action-row {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .lucky-spin-row {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-bottom: 16px;
        }

        .lucky-spin-row .lucky-btn-neon {
            flex: 1;
            min-height: 80px;
            padding: 14px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .lucky-spin-row small {
            display: inline-block;
            margin-top: 6px;
            opacity: 0.9;
            font-size: 0.85rem;
            background: rgba(0, 0, 0, 0.2);
            padding: 2px 8px;
            border-radius: 10px;
        }

        .lucky-input-dark {
            background: rgba(0, 0, 0, 0.3) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #fff !important;
            font-family: var(--font-mono);
            border-radius: 10px !important;
            transition: all 0.2s;
        }

        .lucky-input-dark:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
        }

        #lucky-spin-result {
            min-height: 42px;
            color: #38bdf8 !important;
            text-shadow: 0 2px 6px rgba(56, 189, 248, 0.4);
            font-family: var(--font-mono);
        }

        .lucky-section-title {
            color: #f8fafc;
            font-size: 1.1rem;
            margin-bottom: 16px;
            text-align: left;
            font-weight: 900;
            font-family: var(--font-sans);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .lucky-skill-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .skill-badge {
            min-height: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 12px 8px;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0.6;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .skill-badge::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        .skill-badge:hover {
            transform: translateY(-3px);
            background: rgba(30, 41, 59, 0.8);
            opacity: 0.8;
        }

        .skill-badge b {
            font-size: 0.75rem;
            line-height: 1.2;
            font-family: var(--font-sans);
            color: #cbd5e1;
        }

        .skill-badge .skill-count {
            position: absolute;
            top: -4px;
            right: -4px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 0.55rem;
            font-weight: 900;
            min-width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0 4px;
            box-sizing: border-box;
            font-family: var(--font-mono);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 50;
        }

        .lucky-ref-card h3 {
            margin-top: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 16px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            font-family: var(--font-sans);
        }

        .lucky-vip-pill {
            background: linear-gradient(90deg, #ffd700, #f59e0b);
            color: #000;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 1000;
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
            white-space: nowrap;
        }

        .lucky-earn-card {
            background: rgba(0, 0, 0, 0.2);
            padding: 24px;
            border-radius: 16px;
            margin-bottom: 18px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .lucky-earn-card #lucky-ref-earned {
            font-size: 3.2rem;
            color: #38bdf8;
            text-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
        }

        .lucky-ref-rules {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: #cbd5e1;
            background: rgba(0, 0, 0, 0.3);
            padding: 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            font-family: var(--font-sans);
        }

        @keyframes checkinDotPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 5px #ef4444;
            }

            100% {
                transform: scale(1.2);
                box-shadow: 0 0 15px #ef4444, 0 0 30px #ef4444;
            }
        }

        /* 📅 日历签到组件样式 */
        .checkin-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            text-align: center;
            margin-bottom: 20px;
        }

        .checkin-day-header {
            font-weight: bold;
            color: #94a3b8;
            font-size: 0.85em;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .checkin-day-cell {
            position: relative;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            font-size: 0.9em;
            color: #cbd5e1;
            transition: 0.2s;
            overflow: visible;
        }

        .checkin-day-cell.empty {
            background: transparent;
            border: none;
            pointer-events: none;
        }

        .checkin-day-cell.past {
            background: rgba(0, 0, 0, 0.6);
            color: #475569;
            border-color: transparent;
        }

        .checkin-day-cell.checked {
            background: rgba(56, 189, 248, 0.15);
            border-color: rgba(56, 189, 248, 0.4);
            color: #38bdf8;
            font-weight: bold;
            box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.1);
        }

        .checkin-day-cell.today:not(.checked) {
            border-color: #facc15;
            box-shadow: 0 0 10px rgba(250, 204, 21, 0.3), inset 0 0 10px rgba(250, 204, 21, 0.1);
            color: #facc15;
            font-weight: bold;
        }

        /* ✨ 未签到方格悬停互动光效 */
        .checkin-day-cell:not(.empty):not(.past):not(.checked):hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
            z-index: 5;
        }

        /* ✨ 赛博闪光动效 */
        .checkin-day-cell.reward-shine {
            border-color: #facc15;
            color: #facc15;
            font-weight: bold;
            animation: cyberRewardShine 1.5s infinite alternate;
        }

        @keyframes cyberRewardShine {
            0% {
                box-shadow: 0 0 5px rgba(250, 204, 21, 0.2), inset 0 0 5px rgba(250, 204, 21, 0.1);
            }

            100% {
                box-shadow: 0 0 20px rgba(250, 204, 21, 0.8), inset 0 0 15px rgba(250, 204, 21, 0.4);
                text-shadow: 0 0 10px #facc15;
            }
        }

        .checkin-reward-icon {
            position: absolute;
            top: -14px;
            right: -14px;
            font-size: 2.5em;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
            z-index: 10;
            pointer-events: none;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 4px 10px rgba(0, 0, 0, 0.5);
        }

        .checkin-overlay-text {
            position: absolute;
            bottom: 2px;
            right: 4px;
            font-size: 0.55em;
            color: #38bdf8;
            font-weight: 900;
            letter-spacing: 0.5px;
            opacity: 0.9;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        }

        .checkin-overlay-text.claimed {
            color: #facc15;
        }

        /* 🆕 v5.03: 签到日历 - UI 升级 (精美 SVG 替代 emoji + 动效)
           整体设计原则:
             - 单色 SVG + currentColor + 白色高光 = 扁平精致
             - 赛博风: 粉/金/橘 + 霓虹 drop-shadow
             - fun-mode: 玫红/玫瑰金/古铜金 + 暖色 drop-shadow
             - 三层动效: 翻牌入场 (0.6s) → 持续呼吸 (2s) → 翻牌时再次触发 */

        /* SVG 容器: 替代原来 emoji 的 2.5em 大小 */
        .checkin-reward-svg {
            position: absolute;
            top: -16px;
            right: -16px;
            width: 36px;
            height: 36px;
            z-index: 10;
            pointer-events: none;
            /* 默认赛博风颜色 + 霓虹光晕 */
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* 三种图标配色 + 霓虹光晕 (赛博风默认) */
        .checkin-svg-gift {
            color: #E91E63;
            filter: drop-shadow(0 0 8px rgba(233, 30, 99, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        }

        .checkin-svg-star {
            color: #FFD700;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.65)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        }

        .checkin-svg-trophy {
            color: #FFA000;
            filter: drop-shadow(0 0 12px rgba(255, 160, 0, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        }

        /* 🆕 v5.43: check 默认绿色 √ (替代蓝色 + "Checked" 文字) */
        .checkin-svg-check {
            color: #10b981;
            filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.55));
        }

        /* 🆕 v5.43: claim 红色 √ (替代奖励图标 + "Claimed" 文字) */
        .checkin-svg-check.is-claim {
            color: #ef4444;
            filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
        }

        /* 🆕 v5.43: claim 状态覆盖 claimed 灰度 — 红色 √ 不灰度 */
        .checkin-reward-svg.is-claim-check {
            filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
            animation: none;
        }

        /* fun-mode 配色: 玫红/玫瑰金/古铜金 + 暖色 drop-shadow */
        body.fun-mode .checkin-svg-gift {
            color: #C2185B;
            filter: drop-shadow(0 2px 4px rgba(194, 24, 91, 0.35)) drop-shadow(0 0 6px rgba(255, 200, 220, 0.4));
        }

        body.fun-mode .checkin-svg-star {
            color: #D4A574;
            filter: drop-shadow(0 2px 4px rgba(212, 165, 116, 0.5)) drop-shadow(0 0 8px rgba(255, 220, 180, 0.5));
        }

        body.fun-mode .checkin-svg-trophy {
            color: #B8860B;
            filter: drop-shadow(0 2px 6px rgba(184, 134, 11, 0.6)) drop-shadow(0 0 10px rgba(255, 215, 100, 0.45));
        }

        /* 🆕 v5.43: fun-mode 下 check 仍是绿色, claim 仍是红色 */
        body.fun-mode .checkin-svg-check {
            color: #10b981;
            filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
        }

        body.fun-mode .checkin-svg-check.is-claim {
            color: #ef4444;
            filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55));
        }

        /* 已领取 (claimed) 状态: 灰度 + 透明度 */
        .checkin-reward-svg.claimed {
            color: #94a3b8;
            filter: grayscale(1) opacity(0.6);
            animation: none;
        }

        body.fun-mode .checkin-reward-svg.claimed {
            color: #BDB5A5;
            filter: grayscale(1) opacity(0.5);
        }

        /* 动效 1: 礼品盒 上下浮动 (彩色版 2s 持续) */
        @keyframes checkinFloatGift {

            0%,
            100% {
                transform: translateY(0) rotate(0);
            }

            50% {
                transform: translateY(-3px) rotate(-3deg);
            }
        }

        /* 动效 2: 星星 闪烁 (1.2s) */
        @keyframes checkinTwinkleStar {

            0%,
            100% {
                transform: scale(1) rotate(0);
                filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.65)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
            }

            50% {
                transform: scale(1.15) rotate(10deg);
                filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
            }
        }

        /* 动效 3: 奖杯 闪光扫过 (3s) */
        @keyframes checkinShineTrophy {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            25% {
                transform: translateY(-2px) scale(1.05);
            }

            50% {
                transform: translateY(0) scale(1);
            }

            75% {
                transform: translateY(-1px) scale(1.02);
            }
        }

        /* 动效 4: 入场 翻牌 + 弹跳 (0.6s) */
        @keyframes checkinRewardEnter {
            0% {
                opacity: 0;
                transform: scale(0.3) rotateY(180deg);
            }

            60% {
                opacity: 1;
                transform: scale(1.2) rotateY(0deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotateY(0deg);
            }
        }

        /* 动效 5: 勾选 stroke-dasharray 描线 (0.5s) */
        @keyframes checkinCheckDraw {
            0% {
                stroke-dashoffset: 24;
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                stroke-dashoffset: 0;
                opacity: 1;
            }
        }

        /* 应用动效 */
        .checkin-svg-gift:not(.claimed) {
            animation: checkinFloatGift 2s ease-in-out infinite, checkinRewardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        }

        .checkin-svg-star:not(.claimed) {
            animation: checkinTwinkleStar 1.2s ease-in-out infinite, checkinRewardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        }

        .checkin-svg-trophy:not(.claimed) {
            animation: checkinShineTrophy 3s ease-in-out infinite, checkinRewardEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
        }

        .checkin-svg-check {
            animation: checkinCheckDraw 0.5s ease-out backwards;
            stroke-dasharray: 24;
        }

        /* 已领取奖励 cell 弱化: 暗色底 + 移除 reward-shine 动画 (避免和 claimed 动效冲突) */
        .checkin-day-cell.checked.reward-shine {
            animation: none;
        }

        /* 签到按钮 (lucky-btn-neon.btn-spin-1 在 #checkin-modal) — 今日未打卡时加重呼吸光晕 */
        #checkin-modal #btn-do-checkin:not([style*="pointer-events: none"]) {
            animation: checkinBtnBreathe 2s ease-in-out infinite;
        }

        @keyframes checkinBtnBreathe {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.03);
            }
        }

        body.fun-mode #checkin-modal #btn-do-checkin:not([style*="pointer-events: none"]) {
            animation: checkinBtnBreathe 2s ease-in-out infinite;
        }

        /* 弹窗入场动画 */
        #checkin-modal .modal-content {
            animation: checkinModalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
        }

        @keyframes checkinModalEnter {
            0% {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 📱 移动端专门缩小打卡弹窗尺寸，防止超出屏幕边界 */
        @media screen and (max-width: 768px) {
            #checkin-modal .modal-content {
                padding: 16px 12px;
                width: 85%;
                border-radius: 16px;
            }

            #checkin-modal .modal-header {
                padding-bottom: 10px;
                margin-bottom: 12px;
            }

            #checkin-modal h3 {
                font-size: 1.15rem;
            }

            #checkin-days-display {
                font-size: 1.3em;
            }

            .checkin-calendar {
                gap: 3px;
                margin-bottom: 12px;
                max-height: 200px;
                overflow-y: auto;
                padding-right: 2px;
            }

            .checkin-calendar::-webkit-scrollbar {
                width: 3px;
            }

            .checkin-calendar::-webkit-scrollbar-track {
                background: transparent;
            }

            .checkin-calendar::-webkit-scrollbar-thumb {
                background: rgba(56, 189, 248, 0.4);
                border-radius: 3px;
            }

            .checkin-day-cell {
                font-size: 0.75em;
                border-radius: 6px;
            }

            .checkin-day-header {
                font-size: 0.75em;
                padding-bottom: 4px;
                position: sticky;
                top: 0;
                background: rgba(15, 23, 42, 0.95);
                backdrop-filter: blur(4px);
                z-index: 10;
                padding-top: 4px;
                margin-top: -4px;
            }

            .checkin-reward-icon {
                font-size: 2.5em;
                top: -14px;
                right: -14px;
                filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
                z-index: 20;
                pointer-events: none;
            }

            .checkin-overlay-text {
                font-size: 0.45em;
                right: 2px;
                bottom: 1px;
            }

            #checkin-calendar-grid+div {
                font-size: 0.65em;
                padding: 8px;
                gap: 4px;
                flex-wrap: wrap;
                margin-bottom: 12px;
            }

            #btn-do-checkin {
                padding: 12px;
                font-size: 1em;
            }
        }

        @keyframes luckyAuraSpin {
            100% {
                transform: rotate(360deg);
            }
        }

        /* 🌈 顶级大奖狂欢派对特效 */
        @keyframes cyberRainbowBg {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        body.jackpot-rainbow-active {
            background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e513, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
            background-size: 1800% 1800%;
            animation: cyberRainbowBg 3s ease infinite;
        }

        body.jackpot-rainbow-active .lucky-glass-card,
        body.jackpot-rainbow-active .card,
        body.jackpot-rainbow-active .modal-content {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* 🎰 Super Lucky 全局无缝页面模式：保留顶部导航并对齐背景颜色 */
        body.is-lucky-mode {
            background: radial-gradient(circle at 50% -20%, #2e1065 0%, #1e1b4b 30%, #0f172a 70%, #020617 100%);
            background-attachment: fixed;
            color: #fff;
        }

        body.is-lucky-mode .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 15, 25, 0.4) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-color: transparent !important;
            box-shadow: none !important;
            z-index: 1000;
        }

        body.is-lucky-mode .header * {
            color: #f8fafc;
        }

        body:not(.dark-mode).is-lucky-mode .logo-svg {
            filter: brightness(0) invert(1);
        }

        body.is-lucky-mode .search-input {
            color: #f8fafc !important;
        }

        body.is-lucky-mode .search-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        body.is-lucky-mode .search-btn {
            color: #f8fafc;
            background: rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.2);
        }

        body.is-lucky-mode .search-wrapper {
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        body.is-lucky-mode .nav-item {
            color: #94a3b8 !important;
        }

        body.is-lucky-mode .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        body.is-lucky-mode .nav-item.active {
            background: #fff;
            color: #0f172a !important;
        }

        body.is-lucky-mode .wallet-info-pill {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.is-lucky-mode .pill-divider {
            background: rgba(255, 255, 255, 0.2);
        }

        body.is-lucky-mode .btn-connect {
            background: #fff;
            color: #0f172a;
        }

        body.is-lucky-mode .lang-menu {
            background-color: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }

        body.is-lucky-mode .lang-menu div {
            color: #f8fafc;
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        body.is-lucky-mode .lang-menu div:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #38bdf8;
        }

        body.is-lucky-mode .wallet-dropdown-menu {
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }

        body.is-lucky-mode .wallet-menu-item {
            color: #f8fafc !important;
        }

        body.is-lucky-mode .wallet-menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #38bdf8;
        }

        body.is-lucky-mode .wallet-dropdown-menu>div[style*="height: 1px"] {
            background: rgba(255, 255, 255, 0.1) !important;
        }

        body.is-lucky-mode #view-lucky {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding-top: 60px !important;
        }

        body.is-lucky-mode #view-lucky::before {
            display: none;
        }

        body.is-lucky-mode #left-column,
        body.is-lucky-mode #right-column {
            display: none;
        }

        body.is-lucky-mode .app-container {
            display: block;
        }

        @media (max-width: 768px) {

            body.is-lucky-mode .search-container,
            body.is-lucky-mode .top-nav-menu {
                display: none;
            }

            body.is-lucky-mode .header {
                padding-bottom: 14px;
                margin-bottom: 0;
                background: rgba(11, 15, 25, 0.75) !important;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-color: transparent !important;
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
            }
        }

        /* 🚀 30连抽全网公告：从左下到左上漂移弹幕 */
        @keyframes floatUpLeft {
            0% {
                bottom: -80px;
                left: 20px;
                opacity: 0;
                transform: scale(0.5);
            }

            8% {
                bottom: 15vh;
                opacity: 1;
                transform: scale(1.05);
                filter: brightness(1.2);
            }

            12% {
                bottom: 18vh;
                opacity: 1;
                transform: scale(1);
                filter: brightness(1);
            }

            85% {
                bottom: 75vh;
                left: 20px;
                opacity: 1;
                transform: scale(1);
            }

            100% {
                bottom: 85vh;
                left: 20px;
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .big-spin-danmaku {
            position: fixed;
            z-index: 100005;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(250, 204, 21, 0.9));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #fff;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 900;
            font-size: 1.1em;
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 25px rgba(239, 68, 68, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.6);
            pointer-events: none;
            animation: floatUpLeft 6s ease-in-out forwards;
            display: flex;
            align-items: center;
            gap: 10px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .big-spin-danmaku {
            background: linear-gradient(135deg, rgba(185, 28, 28, 0.9), rgba(180, 83, 9, 0.9));
            border-color: rgba(250, 204, 21, 0.4);
        }

        @media (max-width: 768px) {
            .big-spin-danmaku {
                font-size: 0.85em;
                left: 10px;
                padding: 10px 16px;
            }

            @keyframes floatUpLeft {
                0% {
                    bottom: -80px;
                    left: 10px;
                    opacity: 0;
                    transform: scale(0.5);
                }

                8% {
                    bottom: 15vh;
                    opacity: 1;
                    transform: scale(1.05);
                }

                12% {
                    bottom: 18vh;
                    opacity: 1;
                    transform: scale(1);
                }

                85% {
                    bottom: 75vh;
                    left: 10px;
                    opacity: 1;
                    transform: scale(1);
                }

                100% {
                    bottom: 85vh;
                    left: 10px;
                    opacity: 0;
                    transform: scale(0.8);
                }
            }
        }

        /* 🏆 擂台结束全网居中播报专属动画 (静止停留更久以便点击) */
        @keyframes slideDownCenter {
            0% {
                top: -100px;
                left: 50%;
                transform: translateX(-50%) scale(0.8);
                opacity: 0;
            }

            10% {
                top: 15vh;
                opacity: 1;
                transform: translateX(-50%) scale(1.05);
                filter: brightness(1.2);
            }

            15% {
                top: 12vh;
                opacity: 1;
                transform: translateX(-50%) scale(1);
                filter: brightness(1);
            }

            85% {
                top: 12vh;
                opacity: 1;
                transform: translateX(-50%) scale(1);
            }

            100% {
                top: -100px;
                opacity: 0;
                transform: translateX(-50%) scale(0.8);
            }
        }

        .arena-end-danmaku {
            position: fixed;
            z-index: 100005;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(250, 204, 21, 0.95));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #fff;
            padding: 16px 32px;
            border-radius: 40px;
            font-weight: 900;
            font-size: 1.2em;
            border: 2px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 15px 35px rgba(239, 68, 68, 0.6), inset 0 2px 10px rgba(255, 255, 255, 0.8);
            pointer-events: auto;
            cursor: pointer;
            animation: slideDownCenter 10s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            display: flex;
            align-items: center;
            gap: 12px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
            left: 50%;
            transform: translateX(-50%);
        }

        body.dark-mode .arena-end-danmaku {
            background: linear-gradient(135deg, rgba(185, 28, 28, 0.95), rgba(180, 83, 9, 0.95));
            border-color: rgba(250, 204, 21, 0.6);
        }

        @media (max-width: 768px) {
            .arena-end-danmaku {
                font-size: 0.95em;
                padding: 12px 20px;
                width: 90%;
                justify-content: center;
            }

            @keyframes slideDownCenter {
                0% {
                    top: -100px;
                    left: 50%;
                    transform: translateX(-50%) scale(0.8);
                    opacity: 0;
                }

                10% {
                    top: 12vh;
                    opacity: 1;
                    transform: translateX(-50%) scale(1.05);
                }

                15% {
                    top: 10vh;
                    opacity: 1;
                    transform: translateX(-50%) scale(1);
                }

                85% {
                    top: 10vh;
                    opacity: 1;
                    transform: translateX(-50%) scale(1);
                }

                100% {
                    top: -100px;
                    opacity: 0;
                    transform: translateX(-50%) scale(0.8);
                }
            }
        }

        .meter-wrapper {
            width: 56px;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: stretch;
            align-self: stretch;
        }

        @media (max-width: 980px) {
            .lucky-stage {
                flex-direction: column;
                align-items: center;
            }

            .lucky-glass-card {
                width: 100%;
                max-width: 600px;
            }
        }

        @media (max-width: 640px) {

            /* 📱 完美融入：保留顶部导航并对齐深色背景 */
            #view-lucky {
                position: relative;
                inset: auto;
                z-index: 1;
                margin: 0;
                padding: 140px 5px 10px 5px;
                border-radius: 0;
                border: none;
                min-height: auto;
                background: transparent;
                overflow-x: hidden;
                max-width: 100vw;
                box-shadow: none;
            }

            .mobile-lucky-back {
                display: none;
            }

            .lucky-panel {
                padding: 0;
                margin-bottom: 20px;
                margin-top: 20px;
            }

            .lucky-panel>div {
                margin-bottom: 12px;
            }

            .lucky-hero-logo {
                height: 80px;
                margin-top: 10px;
            }

            .lucky-panel p {
                font-size: 0.75rem;
                line-height: 1.3;
                max-width: 280px;
                opacity: 0.7;
                margin: 0 auto !important;
                text-align: center;
            }

            .lucky-glass-card {
                padding: 12px;
                border-radius: 16px;
                margin-bottom: 12px;
            }

            .meter-wrapper {
                width: 28px;
            }

            /* 📱 强制擂台和奖池左右并排，优化内部字体适配单屏 */
            #lucky-arena-jackpot-container {
                flex-direction: row;
                gap: 8px;
                align-items: stretch;
                width: 100%;
                box-sizing: border-box;
            }

            #lucky-jackpot-ui {
                padding: 8px 6px;
                flex: 3.5;
            }

            #lucky-arena-ui,
            #lucky-rules-ui {
                padding: 8px;
                flex: 6.5;
            }

            #lucky-jackpot-ui>div:nth-child(2)>div:first-child {
                font-size: 0.6rem;
                flex-direction: column;
                gap: 3px;
                text-align: center;
                line-height: 1.1;
                margin-bottom: 6px;
                align-items: center;
            }

            #lucky-jackpot-level {
                margin-left: 0;
                font-size: 0.9em;
                display: inline-block;
            }

            #lucky-jackpot-amount {
                font-size: 1.3rem;
            }

            #lucky-jackpot-token {
                font-size: 0.5rem;
            }

            #lucky-jackpot-usd {
                font-size: 0.7rem;
                margin-top: 2px;
            }

            #lucky-jackpot-ui .mono {
                font-size: 0.7rem;
            }

            #lucky-arena-ui>div:nth-child(2) {
                font-size: 0.85rem;
                margin-bottom: 6px;
            }

            #arena-progress-bar+div {
                font-size: 0.75rem;
                left: 6px;
            }

            #lucky-arena-ui>div:last-child {
                padding: 6px 8px;
                gap: 6px;
            }

            #arena-target-icon {
                font-size: 1.2rem;
            }

            #arena-target-name {
                font-size: 0.95rem;
            }

            #arena-lord-address {
                font-size: 0.8rem;
            }

            #lucky-rules-ui {
                padding: 12px 10px;
            }

            #lucky-rules-ui h3 {
                font-size: 0.95rem;
                margin-bottom: 8px;
            }

            #lucky-rules-ui ul {
                font-size: 0.75rem;
                gap: 5px;
                padding-left: 14px;
            }

            /* 🚀 移动端性能极致优化：降低高耗能的毛玻璃与阴影渲染，提升转盘界面的帧率与开启速度 */
            .lucky-glass-card {
                backdrop-filter: blur(8px) saturate(120%);
                -webkit-backdrop-filter: blur(8px) saturate(120%);
                box-shadow: none;
                border: 1px solid rgba(255, 255, 255, 0.08);
            }

            .lucky-wheel-inner {
                will-change: transform;
                box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
            }

            .lucky-wheel-outer {
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
            }

            #checkin-modal .modal-content {
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            }

            #lucky-jackpot-next-bubble {
                left: 10px;
                transform: translateX(0);
                max-width: calc(100% - 20px);
            }

            /* 🚀 移动端极致性能与功耗优化：全面降级重度渲染特效，防止手机发烫与卡顿 */
            .lucky-glass-card,
            #view-lucky,
            .lucky-balance-card,
            .skill-badge,
            .ai-chat-btn,
            .ai-chat-window,
            .modal-content,
            .toast,
            .big-spin-danmaku,
            .luck-meter-vertical,
            .lucky-balance-card,
            .skill-badge,
            .lucky-earn-card,
            .checkin-day-cell,
            .danmaku-item,
            .modal-overlay,
            #comment-modal-wrapper,
            #bs-overlay {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 为失去毛玻璃的容器提供更深的不透明底色，保障文字清晰度与对比度 */
            .lucky-glass-card {
                background: #1e2235;
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: none;
            }

            .lucky-balance-card,
            .luck-meter-vertical {
                background: #0f172a;
            }

            .skill-badge {
                background: #1e293b;
            }

            .modal-overlay,
            #comment-modal-wrapper,
            #bs-overlay {
                background: rgba(0, 0, 0, 0.85);
            }

            .lucky-wheel-outer {
                box-shadow: none;
                animation: none;
                border: 4px solid #d4af37;
            }

            .lucky-wheel-outer::after {
                display: none;
            }

            .luck-bar-lightning,
            .burst-mode-shake {
                animation: none;
                box-shadow: none;
            }

            .lucky-wheel-container.arena-fire-ring::before,
            .lucky-wheel-container.arena-fire-ring::after {
                display: none;
            }

            .super-lucky-icon,
            .ai-chat-btn svg {
                animation: none;
                filter: none;
            }

            .golden-trail-effect {
                filter: none;
                text-shadow: none;
            }

            .golden-flash-btn {
                animation: none;
                background: linear-gradient(135deg, #fcd34d, #f59e0b);
                color: #78350f;
                box-shadow: none;
                border: none;
            }

            .discount-tag {
                animation: none;
            }

            .discount-tag::after {
                display: none;
            }

            #checkin-dot,
            .anim-football,
            .anim-bitcoin {
                animation: none;
            }

            body.arena-mode-active #view-lucky {
                box-shadow: none;
                animation: none;
                background: radial-gradient(circle at 50% 0%, var(--arena-bg, #450a0a), #0b0f19);
            }

            body.burst-warning-active #view-lucky {
                animation: none;
                background: radial-gradient(circle at 50% 0%, #450a0a, #0b0f19);
                box-shadow: none;
            }

            .header-filters::-webkit-scrollbar {
                display: none;
            }

            /* 🌟 在白色背景下给 Super Lucky Logo 加一层黑色描边以提升对比度 */
            body:not(.dark-mode) .super-lucky-icon img {
                filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.8)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.8)) drop-shadow(1px -1px 0 rgba(0, 0, 0, 0.8)) drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.8));
            }

            /* 🚀 修复背景边缘渐变被吞没的问题：提高层级，不被 body 自身底色覆盖 */
            body::before {
                content: '';
                position: fixed;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                background: radial-gradient(circle at 0% 0%, rgba(0, 230, 118, 0.08) 0%, transparent 40%),
                    radial-gradient(circle at 100% 100%, rgba(0, 230, 118, 0.08) 0%, transparent 40%);
            }

            body.dark-mode::before {
                background: radial-gradient(circle at 0% 0%, rgba(0, 230, 118, 0.05) 0%, transparent 40%),
                    radial-gradient(circle at 100% 100%, rgba(0, 230, 118, 0.05) 0%, transparent 40%);
            }

            /* 彻底干掉剩余的所有后台无限循环动画 (这些动画在手机屏幕上极度耗费 GPU 并导致发热) */
            #lucky-jackpot-ui>div:first-child {
                display: none;
                animation: none;
            }

            #lucky-pointer svg {
                animation: none;
                filter: none;
            }

            .lucky-wheel-core {
                animation: none;
                box-shadow: none;
                text-shadow: none;
            }

            .lucky-wheel-core::after {
                display: none;
                animation: none;
            }

            #arena-progress-bar,
            .skeleton,
            .ui-skeleton,
            #burst-progress-bar {
                animation: none;
                background-size: 100% 100%;
            }

            .wheel-label-neon,
            #lucky-floating-burst,
            .jackpot-flash,
            .pity-badge {
                animation: none;
                filter: none;
                text-shadow: none;
            }

            .passive-skill-item {
                animation: none;
                box-shadow: none;
            }

            #arena-shimmer-line {
                display: none;
                animation: none;
            }

            .pity-badge {
                animation: none;
            }

            .jackpot-flash {
                animation: none;
            }

            .burst-text-anim {
                animation: none;
            }

            /* 移动端专属操作区切换 */
            #lucky-desktop-actions {
                display: none;
            }

            #lucky-mobile-actions {
                display: block;
            }

            .desktop-only-skill {
                display: none;
            }

            .lucky-skill-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            /* 📱 重组转盘与边缘进度条布局 (大幅放大转盘至 62vw) */
            .lucky-wheel-wrapper {
                justify-content: center;
                align-items: center;
                gap: clamp(10px, 3vw, 20px);
                margin-top: 20px;
                margin-bottom: 24px;
                min-height: auto;
                padding: 0 1vw;
                width: 100%;
                box-sizing: border-box;
            }

            .lucky-wheel-container {
                width: min(62vw, 270px);
                height: min(62vw, 270px);
                align-self: center;
            }

            .lucky-wheel-outer {
                inset: -8px;
                border-width: 1px;
            }

            .lucky-wheel-outer::after {
                inset: 4px;
            }

            .lucky-wheel-inner {
                border-width: 2px;
            }

            .luck-meter-vertical {
                width: 100%;
                min-width: 34px;
                max-width: 36px;
                padding: 12px 0;
                border-radius: 8px;
                overflow: visible;
                justify-content: space-between;
            }

            .luck-tracks-container {
                gap: 2px;
            }

            .luck-track,
            #burst-track-wrapper {
                max-width: 8px;
                border-radius: 4px;
                flex: 1;
            }

            #luck-progress-bar,
            #burst-progress-bar {
                border-radius: 2px;
            }

            .luck-text-label {
                font-size: 10px;
                line-height: 1.1;
                transform: scale(0.9);
            }

            .luck-meter-vertical .mono {
                font-size: 9px;
                transform: scale(0.85);
                margin-top: 2px;
            }

            /* 🎯 精确匹配放大后的转盘半径，推移图标避免被切割 */
            .wheel-label-neon {
                width: 50px;
                margin-left: -25px;
                height: 60px;
                margin-top: -30px;
                font-size: 0.7em;
                transform: rotate(var(--rot)) translateY(calc(min(62vw, 270px) * -0.32));
            }

            .wheel-label-neon img {
                width: 20px !important;
                height: 20px !important;
                margin-bottom: 2px;
            }

            /* v4.99: .lucky-wheel-core 改用 cqw 跟转盘等比, 不再用 vw 单独算 */
            /* 🆕 v5.27: 指针 z-index 提到 50, 避免被 .lucky-wheel-inner 的 transform stacking context 压住 */
            /* 🆕 v5.27b: top -18 → -34, 让指针圆顶部分完整露出 (之前只露 18px ≈ 42% 高度, 视觉像被遮) */
            /* 🆕 v5.27.2: 回滚 top -34 → -18, 保持和 v5.25 桌面端 (露 28px ≈ 40% 高度) 一致 (用户要求: 不要完全露出) */
            #lucky-pointer {
                top: -18px !important;
                width: 30px !important;
                height: 42px !important;
                z-index: 50;
            }

            .lucky-balance-card {
                margin-bottom: 16px;
                padding: 12px 14px;
                flex-wrap: wrap;
            }

            .lucky-balance-card strong {
                font-size: 1.2rem;
            }

            .mini-coin {
                font-size: 0.55rem;
                padding: 2px 4px;
            }

            .mini-coin img {
                width: 9px;
                height: 9px;
            }

            .skill-badge-mobile {
                min-height: 32px;
                width: 32px;
            }

            .skill-badge-mobile span {
                font-size: 1.5em;
            }

            .skill-badge-mobile img {
                width: 20px;
                height: 20px;
            }

            .skill-badge-mobile .skill-count {
                top: -4px;
                right: -4px;
                width: 14px;
                height: 14px;
                min-width: 14px;
                font-size: 0.6rem;
                border-width: 1px;
            }

            .lucky-skills-vertical .skill-badge {
                padding: 2px 0;
            }

            .cyber-btn {
                padding: 8px 0;
                font-size: 0.75em;
            }

            .lucky-btn-neon-mobile {
                padding: 6px 0 !important;
                font-size: 0.7em !important;
            }

            .lucky-btn-neon-mobile small {
                font-size: 0.6rem;
                padding: 1px 4px;
            }

            .divine-text {
                font-size: 1.8em;
                letter-spacing: 4px;
            }

            .divine-subtext {
                font-size: 0.85em;
                letter-spacing: 1px;
                padding: 0 10px;
            }
        }

        /* 暗黑模式下快速下单按钮适配 */
        body.dark-mode .side-btn {
            background: transparent;
            border-color: var(--border-light);
            color: var(--text-main);
        }

        body.dark-mode .side-btn:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        body.dark-mode .side-btn.home.active {
            border-color: var(--home-yes);
            color: var(--home-yes);
            background: rgba(0, 230, 118, 0.1);
            box-shadow: inset 0 0 0 1px var(--home-yes);
        }

        body.dark-mode .side-btn.away.active {
            border-color: var(--away-no);
            color: var(--away-no);
            background: rgba(255, 82, 82, 0.1);
            box-shadow: inset 0 0 0 1px var(--away-no);
        }

        body.dark-mode .side-btn.draw.active {
            border-color: var(--draw-tie);
            color: var(--draw-tie);
            background: rgba(250, 204, 21, 0.1);
            box-shadow: inset 0 0 0 1px var(--draw-tie);
        }

        .logo-svg {
            transition: 0.2s;
        }

        @media (max-width: 900px) {
            .app-container {
                grid-template-columns: 1fr;
            }

            .header {
                grid-column: span 1;
            }

            img.emoji {
                height: 1em;
                width: 1em;
                margin: 0 .05em 0 .1em;
                vertical-align: -0.1em;
            }
        }

        /* ✅ 致命修复：补全这里缺失的括号，防止样式泄漏！ */

        /* 📱 PWA 桌面独立模式 (Standalone) 沉浸式全屏适配 */
        @media (display-mode: standalone) {
            body {
                /* 完美适配苹果/安卓刘海屏、动感岛与底部小白条 (Safe Area 安全防遮挡) */
                padding-top: env(safe-area-inset-top);
                padding-bottom: env(safe-area-inset-bottom);
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
            }
        }

        /* =========================================
       移动端响应式布局 (屏幕宽度小于 768px 时生效)
       ========================================= */
        @media screen and (max-width: 768px) {

            /* 移动端 Bottom Sheet 交易面板 */
            .bs-handle {
                display: block;
                width: 40px;
                height: 5px;
                background: var(--border-light);
                border-radius: 3px;
                margin: 0 auto 15px auto;
                cursor: pointer;
            }

            #left-column {
                margin-bottom: 80px;
            }

            .app-container,
            .app-container.is-detail {
                display: block;
            }

            #right-column,
            .app-container.is-detail #right-column {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                top: auto;
                height: auto;
                max-height: 85vh;
                background: var(--card-light);
                border-top: 1px solid var(--border-light);
                border-radius: 20px 20px 0 0;
                padding: 15px 15px 30px 15px;
                z-index: 10000;
                box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
                transform: translateY(calc(100% - 64px));
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .app-container:not(.is-detail) #right-column {
                display: none;
            }

            .app-container.is-detail #right-column {
                display: block;
            }

            #right-column.expanded {
                transform: translateY(0);
            }

            body {
                font-size: 13px;
                padding: 10px;
            }

            /* 整体缩小两号 */
            .app-container {
                display: block;
            }

            @keyframes walletBreathe {
                0% {
                    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
                    transform: scale(1);
                }

                70% {
                    box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
                    transform: scale(1.05);
                }

                100% {
                    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
                    transform: scale(1);
                }
            }

            /* ✅ 移动端将 Web3 按钮变成圆形的钱包 Logo，并加上呼吸跳动动画 */
            #connectBtn {
                font-size: 0;
                padding: 0;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--text-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E") no-repeat center center;
                animation: walletBreathe 2s infinite ease-in-out;
            }

            body.dark-mode #connectBtn {
                background: var(--text-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E") no-repeat center center;
            }

            body.is-lucky-mode #connectBtn {
                background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E") no-repeat center center;
            }

            #connectBtn::after {
                content: none;
            }

            .card {
                padding: 14px;
                border-radius: 12px;
            }

            .skeleton-card {
                padding: 14px;
                /* Phase3b: 对齐移动端真实卡实测高度 236px */
                min-height: 236px;
                gap: 12px;
                border-radius: 12px;
            }

            .header {
                display: flex;
                flex-direction: column;
                padding: 14px;
                gap: 12px;
                position: relative;
            }

            /* 🍀 Super Lucky 响应式显示控制 (移动端反转) */
            .mobile-only-lucky {
                display: flex !important;
            }

            .desktop-only-lucky {
                display: none !important;
            }

            @keyframes neonBreatheMobile {
                0% {
                    filter: drop-shadow(0 0 1px rgba(255, 16, 83, 0.5)) brightness(1);
                }

                50% {
                    filter: drop-shadow(0 0 6px rgba(162, 0, 255, 0.8)) brightness(1.15);
                }

                100% {
                    filter: drop-shadow(0 0 1px rgba(255, 16, 83, 0.5)) brightness(1);
                }
            }

            .super-lucky-icon {
                width: 110px;
                height: 34px;
                /* 2026-08-24 Phase0: 摘除 neonBreatheMobile 无限呼吸 (动效预算) */
            }

            .super-lucky-icon:hover {
                animation-play-state: paused;
                filter: drop-shadow(0 0 8px rgba(255, 16, 83, 0.9)) brightness(1.2);
            }

            /* ✅ 全新响应式 Flex 布局，彻底解决重叠与加载错位问题 */
            .header-main-row {
                flex-wrap: wrap;
                gap: 8px;
                align-items: center;
            }

            .logo-wrapper {
                margin-left: 0;
            }

            .logo-svg {
                width: auto;
                height: 44px;
                max-width: 160px;
                margin-top: 0;
            }

            .header-right {
                position: static;
                order: 2;
                margin-left: auto;
                width: auto;
                margin-top: 0;
                align-self: center;
            }

            #wallet-area {
                flex-direction: column;
                align-items: flex-end;
                width: auto;
                gap: 6px;
                margin-right: -4px;
            }

            .top-controls-wrapper {
                gap: 10px;
                margin-right: 0;
                transform: none;
                position: relative;
                z-index: 10000;
            }

            .top-controls-wrapper>* {
                padding: 4px 6px;
                font-size: 1.4em;
            }

            /* 搜索框在移动端独占一行，永远排在底部不被遮挡 */
            .search-container {
                flex: 0 0 100%;
                order: 3;
                margin: 4px 0 0 0;
                max-width: none;
                margin-left: 0;
            }

            .wallet-info-pill {
                padding: 4px 10px;
                border-radius: 16px;
            }

            #addrDisplay,
            .pill-divider {
                display: none;
            }

            #event-list {
                grid-template-columns: 1fr;
                /* 强制单排单列 */
            }

            /* 修复图表压扁，限定包裹器高度而不是暴力拉伸 Canvas */
            #oddsChart {
                height: 100%;
            }

            #chart-wrapper {
                height: 170px;
            }

            /* 移动端胜负平同行 */
            .side-selector {
                display: flex;
                flex-direction: row;
                gap: 6px;
            }

            .side-btn {
                width: auto;
                flex: 1;
                padding: 10px 4px;
                font-size: 0.85em;
            }

            .trade-tabs {
                display: flex;
                gap: 10px;
                margin-bottom: 15px;
            }

            .trade-tab-btn {
                flex: 1;
                padding: 10px;
                border-radius: 8px;
                font-weight: bold;
                cursor: pointer;
                border: 1px solid #ddd;
                background: transparent;
                transition: 0.2s;
            }

            .trade-tab-btn.buy.active {
                background: #000;
                color: #fff;
                border-color: #000;
            }

            .trade-tab-btn.sell.active {
                background: var(--home-red);
                color: #fff;
                border-color: var(--home-red);
            }
        }

        .lang-switcher {
            padding: 5px 10px;
            border-radius: 6px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            outline: none;
            margin-right: 15px;
        }

        /* =========================================
       Vue 充值弹窗 (Deposit Modal) 现代 Web3 样式
       ========================================= */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .modal-content {
            background: #fff;
            width: 90%;
            max-width: 420px;
            border-radius: 24px;
            padding: 28px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
            animation: popIn 0.12s ease-out;
            color: #333;
            text-align: left;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.3rem;
            font-weight: 800;
            color: #111;
        }

        .close-btn {
            background: #f5f5f5;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: #666;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.2s;
        }

        .close-btn:hover {
            background: #eee;
            color: #111;
            transform: scale(1.05);
        }

        .modal-subtitle {
            color: #666;
            font-size: 0.95rem;
            margin-bottom: 16px;
            font-weight: 500;
        }

        .network-options {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .network-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px;
            border: 1px solid #eaeaea;
            border-radius: 16px;
            background: #fafafa;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .network-card:hover {
            border-color: #000;
            background: #fff;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
            transform: translateY(-2px);
        }

        .network-card.bsc:hover {
            border-color: #f3ba2f;
        }

        .network-card.tron:hover {
            border-color: #eb0029;
        }

        .net-icon-img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #fff;
            padding: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .net-info h4 {
            margin: 0 0 6px 0;
            font-size: 1.05rem;
            color: #222;
            font-weight: bold;
        }

        .net-info p {
            margin: 0;
            font-size: 0.85rem;
            color: #888;
        }

        .back-nav {
            color: #666;
            font-size: 0.95rem;
            cursor: pointer;
            margin-bottom: 24px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: 0.2s;
            font-weight: 600;
        }

        .back-nav:hover {
            color: #000;
            transform: translateX(-4px);
        }

        .amount-input-wrapper {
            position: relative;
            margin-bottom: 28px;
        }

        .amount-input-wrapper input {
            width: 100%;
            box-sizing: border-box;
            padding: 18px;
            padding-right: 80px;
            border: 2px solid #eaeaea;
            border-radius: 16px;
            font-size: 1.8rem;
            font-weight: 800;
            outline: none;
            transition: 0.2s;
            color: #111;
        }

        .amount-input-wrapper input:focus {
            border-color: #000;
        }

        .currency-tag {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            color: #666;
            font-size: 1.2rem;
        }

        .modal-submit-btn {
            width: 100%;
            padding: 18px;
            background: #000;
            color: #fff;
            border: none;
            border-radius: 16px;
            font-size: 1.15rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
        }

        .modal-submit-btn:hover {
            background: #222;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        @keyframes popIn {
            from {
                opacity: 0;
                transform: scale(0.98) translateY(8px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 🤖 AI 客服悬浮窗样式 */
        .ai-chat-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 42px;
            height: 42px;
            z-index: 10000;
            cursor: pointer;
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(0, 245, 127, 0.5);
            border-radius: 12px;
            color: #00f57f;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            box-shadow: 0 0 15px rgba(0, 245, 127, 0.2), inset 0 0 10px rgba(0, 245, 127, 0.1);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            clip-path: polygon(30% 0%, 100% 0%, 100% 70%, 70% 100%, 0% 100%, 0% 30%);
        }

        .ai-chat-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, transparent 40%, rgba(0, 245, 127, 0.2) 50%, transparent 60%);
            background-size: 200% 200%;
            animation: aiScanline 3s linear infinite;
            pointer-events: none;
        }

        @keyframes aiScanline {
            0% {
                background-position: 200% 200%;
            }

            100% {
                background-position: -50% -50%;
            }
        }

        .ai-chat-btn:hover {
            transform: scale(1.1);
            opacity: 1;
            background: rgba(15, 23, 42, 0.8);
            box-shadow: 0 0 25px rgba(0, 245, 127, 0.5), inset 0 0 15px rgba(0, 245, 127, 0.3);
            border-color: #00f57f;
            color: #fff;
        }

        .ai-chat-btn svg {
            filter: drop-shadow(0 0 5px currentColor);
            animation: pulseNeon 2s infinite alternate;
        }

        @keyframes pulseNeon {
            from {
                filter: drop-shadow(0 0 2px currentColor);
            }

            to {
                filter: drop-shadow(0 0 8px currentColor);
            }
        }

        /* 🆕 v5.46: 充值弹窗 method-card (方式一/方式二) + 链颜色按钮 */
        /* 🆕 v5.49: 改为纵向布局 — 方式一/方式二 tag 放到卡片上方 (各单起一行) */
        .lucky-method-card {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            padding: 14px 16px;
            border-radius: 12px;
            margin-bottom: 16px;
            background: var(--bg-light);
            border: 1px solid var(--border-light);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .lucky-method-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .lucky-method-card-bsc {
            border-left: 4px solid #facc15;
        }

        .lucky-method-card-bsc:hover {
            border-color: var(--border-light);
            border-left-color: #eab308;
            background: rgba(250, 204, 21, 0.06);
        }

        .lucky-method-card-tron {
            border-left: 4px solid #ef4444;
        }

        .lucky-method-card-tron:hover {
            border-color: var(--border-light);
            border-left-color: #b91c1c;
            background: rgba(239, 68, 68, 0.06);
        }

        .lucky-method-card-tag {
            align-self: flex-start;
            display: inline-block;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: bold;
            background: rgba(250, 204, 21, 0.18);
            color: #ca8a04;
        }

        body.dark-mode .lucky-method-card-tag {
            background: rgba(250, 204, 21, 0.22);
            color: #fde047;
        }

        body.fun-mode .lucky-method-card-tag {
            background: rgba(250, 204, 21, 0.25);
            color: #b45309;
        }

        .lucky-method-card-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .lucky-method-card-icon {
            font-size: 1.8rem;
            flex-shrink: 0;
        }

        .lucky-method-card-info {
            flex: 1;
            min-width: 0;
        }

        .lucky-method-card-title {
            font-weight: bold;
            color: var(--text-main);
            font-size: 1.0rem;
        }

        .lucky-method-card-desc {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.5;
        }

        .lucky-method-card-arrow {
            color: var(--text-muted);
            font-weight: bold;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .lucky-method-input {
            flex: 1;
            padding: 10px;
            font-size: 0.85rem;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background: var(--bg);
            color: var(--text-main);
            outline: none;
        }

        .lucky-method-copy {
            padding: 10px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            background: var(--bg-light);
            color: var(--text-main);
            border: 1px solid var(--border-light);
        }

        .lucky-max-btn {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.4);
            color: #facc15;
        }

        .lucky-max-btn:hover {
            background: rgba(245, 158, 11, 0.25);
        }

        /* 🆕 v5.46: 链颜色按钮 - BSC 黄色 / TRON 红色 */
        .lucky-submit-bsc {
            background: linear-gradient(135deg, #facc15, #eab308) !important;
            color: #1a1a2e !important;
            border: none !important;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.35) !important;
        }

        .lucky-submit-bsc:hover {
            filter: brightness(1.08);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.5);
        }

        .lucky-submit-tron {
            background: linear-gradient(135deg, #ef4444, #b91c1c);
            color: #fff;
            border: none;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
        }

        .lucky-submit-tron:hover {
            filter: brightness(1.08);
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
        }

        /* 🆕 v5.46: 提现弹窗主题适配 */
        .lucky-withdraw-modal {
            background: var(--card-light) !important;
            color: var(--text-main) !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
        }

        body.dark-mode .lucky-withdraw-modal {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
        }

        .lucky-withdraw-input {
            background: var(--bg-light) !important;
            background-image: none !important;
            border: 1px solid var(--border-light) !important;
            color: var(--text-main) !important;
        }

        .lucky-withdraw-input::placeholder {
            color: var(--text-muted);
        }

        .lucky-withdraw-avail {
            background: var(--bg-light) !important;
            border: 1px solid var(--border-light) !important;
        }

        .lucky-withdraw-records {
            background: var(--bg-light) !important;
            border: 1px solid var(--border-light) !important;
        }

        .lucky-withdraw-modal .close-btn {
            color: var(--text-main) !important;
        }

        .lucky-withdraw-modal .close-btn:hover {
            background: var(--bg-light);
        }

        .ai-chat-window {
            position: fixed;
            bottom: 90px;
            right: 30px;
            width: 320px;
            height: 460px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
            border: 1px solid var(--border-light);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            transform-origin: bottom right;
            animation: chatPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes chatPopIn {
            from {
                opacity: 0;
                transform: scale(0.5);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .ai-chat-header {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            cursor: move;
        }

        .ai-chat-header .close-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 22px;
            cursor: pointer;
            opacity: 0.8;
            transition: 0.2s;
        }

        .ai-chat-header .close-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .ai-chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background: transparent;
        }

        .chat-msg {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 0.9em;
            line-height: 1.5;
            word-wrap: break-word;
        }

        .chat-msg.user {
            align-self: flex-end;
            background: #38bdf8;
            color: white;
            border-bottom-right-radius: 2px;
            box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
        }

        .chat-msg.ai {
            align-self: flex-start;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0.05);
            color: var(--text-main);
            border-bottom-left-radius: 2px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        }

        .ai-chat-input-area {
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.3);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .ai-chat-input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.6);
            color: var(--text-main);
            outline: none;
            font-family: var(--font-sans);
            transition: 0.2s;
        }

        .ai-chat-input:focus {
            border-color: #38bdf8;
            background: #fff;
        }

        .ai-chat-send {
            background: #38bdf8;
            color: white;
            border: none;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
            flex-shrink: 0;
        }

        .ai-chat-send:hover {
            background: #0284c7;
            transform: scale(1.05);
        }

        /* 侧边菜单样式 */
        .side-lang-btn {
            width: 100%;
            text-align: left;
            padding: 12px 16px;
            border-radius: 12px;
            background: var(--bg);
            border: 1px solid var(--border-light);
            cursor: pointer;
            font-weight: 600;
            color: var(--text-main);
            font-size: 1em;
            transition: 0.2s;
            font-family: var(--font-sans);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .side-lang-btn:hover {
            background: var(--border-light);
            transform: translateY(-1px);
        }

        .theme-btn-active {
            background: var(--card-light) !important;
            color: var(--text-main) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border-light);
        }

        body.dark-mode .theme-btn-active {
            background: var(--card-light) !important;
            color: var(--text-main) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 5px;
        }

        .typing-indicator span {
            width: 6px;
            height: 6px;
            background: #94a3b8;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out both;
        }

        .typing-indicator span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typing {

            0%,
            80%,
            100% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }
        }

        /* AI 聊天框暗黑模式适配 */
        body.dark-mode .ai-chat-window {
            background: rgba(15, 23, 42, 0.8);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        }

        body.dark-mode .chat-msg.ai {
            background: rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.08);
            color: #e2e8f0;
        }

        body.dark-mode .ai-chat-input-area {
            background: rgba(0, 0, 0, 0.2);
            border-top-color: rgba(255, 255, 255, 0.08);
        }

        body.dark-mode .ai-chat-input {
            background: rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
            color: #f8fafc;
        }

        body.dark-mode .ai-chat-input:focus {
            border-color: #38bdf8;
            background: rgba(0, 0, 0, 0.6);
        }

        /* 🆕 v4.89: 侧边栏主题外观按钮 dark-mode 适配 (赛博深色背景)
          痛点: .lucky-cream-btn-group 强制 #FAF5EA 米色 + 金边, dark-mode 下没深色覆写
                → 赛博风用户看到的"主题按钮组"是米色块, 与整体赛博风不协调
          修复: dark-mode 下用深色玻璃 + 蓝色品牌色 (赛博风一致) */
        body.dark-mode .lucky-cream-btn-group {
            background: rgba(15, 23, 42, 0.6) !important;
            border: 1px solid rgba(56, 189, 248, 0.2) !important;
        }

        body.dark-mode .lucky-cream-btn {
            color: #94a3b8 !important;
        }

        body.dark-mode .lucky-cream-btn:not(.active):hover {
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
        }

        /* dark-mode 下激活态: 用蓝色 (赛博风品牌色, 而非 fun-mode 的金色) */
        body.dark-mode .lucky-cream-btn.active,
        body.dark-mode .lucky-cream-btn.is-active {
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
            color: #FFFFFF;
            box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
        }

        /* 手机端适配 */
        @media (max-width: 480px) {
            .ai-chat-btn {
                bottom: 20px;
                right: 20px;
                width: 36px;
                height: 36px;
                font-size: 18px;
                border-radius: 10px;
            }

            .ai-chat-window {
                width: calc(100vw - 40px);
                right: 20px;
                bottom: 70px;
                height: 60vh;
            }

            /* v4.99: .lucky-wheel-core 改用 cqw 跟转盘等比, 不再用 vw 单独算 */
        }
    

        /* 🆕 2026-08-24 Phase3c: Hero 轮播箭头默认隐藏 — 常显时压住首卡标题文字;
           hover/focus 浮现保持可用性, 触屏设备隐藏 (有滑动+圆点兜底) */
        #hero-prev,
        #hero-next {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease-out;
        }

        #hero-featured:hover #hero-prev,
        #hero-featured:hover #hero-next,
        #hero-prev:focus-visible,
        #hero-next:focus-visible {
            opacity: 1;
            pointer-events: auto;
        }

        @media (hover: none) {
            #hero-prev,
            #hero-next {
                display: none;
            }
        }

        /* 🆕 2026-08-24 Phase2b: 继续关注 chip hover — 与工具行按钮同一交互语言 */
        .cw-chip:hover {
            border-color: var(--line-2);
            background: var(--surface-2);
        }

/* 🆕 2026-08-24 Phase4b: 事件卡模板内联样式 → 类（值与内联逐一对应，零视觉变化）
   对应 ui.js renderEvents 卡片模板；动态值（宽度/颜色/url）保留内联 */
.ev-card { position: relative; overflow: hidden; padding: 16px; cursor: pointer; display: flex; flex-direction: column; height: 100%; min-height: 190px; box-sizing: border-box; gap: 12px; }
.ev-card--resolved { opacity: 0.45; filter: grayscale(0.6); }
.ev-card-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ev-card-bg-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.15; }
.ev-card-bg-mask { position: absolute; inset: 0; background: linear-gradient(180deg, var(--card-light) 0%, transparent 40%, transparent 60%, var(--card-light) 100%); opacity: 0.9; }

.ev-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; z-index: 1; }
.ev-top-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ev-top-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ev-flag-wrap { display: flex; align-items: center; }
.ev-flag-vs { margin: 0 4px; color: #999; font-size: 0.8em; font-weight: bold; }
.ev-cat { font-size: 0.8em; color: var(--text-muted); }
.ev-time { font-size: 0.8em; color: var(--text-muted); background: var(--border-light); padding: 3px 6px; border-radius: 4px; transition: 0.2s; }
.ev-countdown { font-size: 0.72em; color: var(--text-main); background: var(--border-light); padding: 2px 7px; border-radius: 10px; font-weight: 800; white-space: nowrap; }
.ev-latest { font-size: 0.64em; color: #38bdf8; font-weight: 700; cursor: pointer; white-space: nowrap; border-bottom: 1px dashed rgba(56,189,248,0.4); }
.ev-star { cursor: pointer; font-size: 1.2em; color: #ccc; }
.ev-star.favorited { color: #fadb14; }

.ev-title { font-weight: 700; font-size: 1.02em; line-height: 1.35; color: var(--text-main); width: 100%; position: relative; z-index: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; }

.ev-badge--settled { font-size: 0.64em; color: var(--text-muted); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.ev-badge--locked { font-size: 0.62em; color: rgba(217,119,6,0.85); font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; opacity: 0.9; }
.ev-badge--new { font-size: 0.62em; background: linear-gradient(135deg,#22c55e,#16a34a); color: #fff; padding: 1px 6px; border-radius: 6px; font-weight: 800; white-space: nowrap; }
.ev-badge--agent { font-size: 0.72em; background: rgba(250,204,21,0.15); color: #facc15; border: 1px solid rgba(250,204,21,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.ev-badge--private { font-size: 0.72em; background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.ev-resolved-header { grid-column: 1 / -1; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border-light); text-align: center; color: var(--text-muted); font-size: 0.85em; font-weight: 600; font-family: var(--font-sans); }

.ev-probbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg); position: relative; z-index: 1; }
.ev-seg { opacity: 0.75; transition: width 0.2s; }
.ev-seg-home { background: var(--home-yes); }
.ev-seg-draw { background: var(--draw-tie); }
.ev-seg-away { flex: 1; background: var(--away-no); }

.ev-multibar-wrap { margin-top: 2px; position: relative; z-index: 1; }
.ev-multibar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 1px; border: 1px solid var(--border-light); }
.ev-multiseg { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ev-seg-pct { font-size: 0.68em; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); white-space: nowrap; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; font-size: 0.72em; color: var(--text-muted); font-weight: 600; }
.ev-legend-item { display: inline-flex; align-items: center; gap: 4px; max-width: 48%; min-width: 0; }
.ev-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ev-legend-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ev-cta-grid { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 6px; padding-top: 4px; position: relative; z-index: 1; max-height: 168px; overflow-y: auto; }
.market-opt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.ev-opt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-opt-name { font-weight: 600; color: var(--text-main); font-size: 0.85em; line-height: 1.3; word-break: break-word; }
.ev-opt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.ev-opt-odds { font-size: 0.72em; font-weight: 700; color: #facc15; }
.ev-cta-row { display: flex; gap: 8px; padding-top: 4px; position: relative; z-index: 1; overflow: hidden; flex-wrap: nowrap; }
.ev-btn-label { display: flex; align-items: center; gap: 4px; }

.ev-meta { font-size: 0.85em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 12px; font-weight: 600; position: relative; z-index: 1; margin-top: auto; }

/* 🆕 2026-08-24 Phase4c: 推荐卡模板内联样式 → 类（renderRecommendedEvents；值与内联逐一对应）
   容器用 .event-item.rec-card 双类（0,2,0 且位于文件末尾），确保 background/border 不输给它
   之前内联一直压制的 .event-item:hover 背景（保持 hover 不变色的现状）；--home-pct 等动态值保留内联 */
.event-item.rec-card { position: relative; overflow: hidden; padding: 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; box-sizing: border-box; gap: 12px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--card-light); transition: all 0.2s; }
.rec-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.rec-top-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-badge--agent { font-size: 0.75em; background: rgba(250,204,21,0.15); color: #facc15; border: 1px solid rgba(250,204,21,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.rec-badge--private { font-size: 0.75em; background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.rec-title { font-weight: 800; font-size: 1.05em; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; position: relative; z-index: 1; }
.rec-teambar { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.05em; margin-top: 2px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-light); position: relative; z-index: 1; }
.rec-team { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.rec-team-home { color: var(--home-yes); text-align: left; }
.rec-team-away { color: var(--away-no); text-align: right; justify-content: flex-end; }
.rec-team-vs { font-size: 0.8em; color: #888; font-weight: bold; }
.rec-cta-row { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; position: relative; z-index: 1; overflow: hidden; flex-wrap: nowrap; }

/* 🆕 2026-08-24 Phase4d: 详情页头部 + 结果条(outcome-bars) + 庄家面板 + 时间线 hover 弹卡
   对应 ui.js updateSelectedEventUI / renderOutcomeBars / updateDetLiq / __showRoadmapHover；
   值与原内联逐一对应；动态值（宽度/颜色/box-shadow 色/cursor）保留内联 */
.det-logo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.det-title-txt { vertical-align: middle; }
.det-badge--agent { margin-left: 8px; font-size: 0.85em; background: rgba(250,204,21,0.15); color: #facc15; border: 1px solid rgba(250,204,21,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.det-badge--private { margin-left: 8px; font-size: 0.85em; background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.det-countdown { margin-top: 8px; font-size: 0.95em; font-weight: bold; font-family: var(--font-mono); }
.det-latest-wrap { margin-top: 8px; }
.det-latest { font-size: 0.85em; color: #38bdf8; font-weight: 700; cursor: pointer; border-bottom: 1px dashed rgba(56,189,248,0.4); }
.det-vol-label { font-size: 0.85em; opacity: 0.8; font-family: var(--font-sans); }

.outcome-bar-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-light); cursor: pointer; position: relative; }
.ob-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0.12; z-index: 0; pointer-events: none; }
.ob-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.ob-dot { width: 14px; height: 14px; border-radius: 4px; }
.ob-label { font-weight: 700; color: var(--text-main); font-size: 1.05em; }
.ob-pct { position: relative; z-index: 1; font-weight: 800; font-size: 1.1em; }
.ob-multi-wrap { max-height: 310px; overflow-y: auto; }

.maker-panel { margin-top: 15px; padding: 15px; border-radius: 8px; border: 1px dashed #facc15; background: rgba(250,204,21,0.05); }
.maker-title { color: #facc15; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.maker-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.maker-opt { flex: 1; min-width: 120px; }
.maker-opt-name { font-size: 0.8em; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maker-input { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--bg); color: var(--text-main); font-family: var(--font-mono); }
.maker-btn { background: #facc15; color: #000; border: none; padding: 10px 15px; font-weight: bold; border-radius: 6px; cursor: pointer; align-self: flex-end; margin-bottom: 1px; box-shadow: 0 4px 10px rgba(250,204,21,0.3); }

.rm-hover-title { font-size: 0.82em; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.rm-hover-meta { font-size: 0.72em; color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.rm-hover-odds { font-size: 0.8em; margin-top: 4px; }
.rm-hover-home { color: var(--home-yes); font-weight: 800; }
.rm-hover-odds-label { color: var(--text-muted); font-size: 0.72em; }

/* 🆕 2026-08-24 Phase4e: 首屏三模块（Hero 轮播 / Focus Strip / Roadmap 时间线）内联样式 → 类
   动态值（left%、颜色、box-shadow 色、transition 开关）保留内联；JS 运行时 el.style.* 赋值不受影响 */
/* --- Hero 轮播 --- */
.hero-card { flex-shrink: 0; width: 252px; border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; background: var(--card-light); padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; box-sizing: border-box; border: 1px solid var(--border-light); transition: border-color 0.12s ease-out, opacity 0.12s ease-out; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero-cat { font-size: 0.7em; color: var(--accent); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-time { font-size: 0.7em; color: var(--text-muted); }
.hero-time--cd { color: var(--draw-tie); font-weight: 800; }
.hero-title { font-size: 0.92em; color: var(--text-main); font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-home { color: var(--home-yes); font-weight: 800; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-odds { font-size: 0.68em; color: var(--text-muted); flex-shrink: 0; }
.hero-wrap { position: relative; }
.hero-track-wrap { overflow: hidden; border-radius: 12px; padding: 8px 0; margin: -8px 0; /* 垂直留白容纳 Dock 放大 (视觉高度不变) */ }
.hero-track { display: flex; gap: 10px; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-light); background: var(--card-light); color: var(--text-main); cursor: pointer; font-size: 0.8em; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 2; }
.hero-arrow--prev { left: 0; }
.hero-arrow--next { right: 0; }
.hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.hero-dot { width: 16px; height: 4px; border-radius: 2px; background: var(--line-2); cursor: pointer; transition: background 0.3s; }

/* --- Focus Strip（含原 JS 注入的 focus-strip-styles 块，原样迁入；卡片 background 保留内联以维持 hover 不变底色的现状） --- */
.focus-strip-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.focus-strip-side { display: grid; gap: 12px; align-content: start; }
.focus-card { transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.focus-card:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.focus-cta { border: none; border-radius: var(--radius-md); padding: 10px; cursor: pointer; font-weight: 800; font-size: 0.9em; transition: filter var(--dur-fast) var(--ease-out); }
.focus-cta:hover { filter: brightness(1.15); }
@media (max-width: 768px) { .focus-strip-grid { grid-template-columns: 1fr; } }
.focus-card--big { cursor: pointer; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: row; gap: 16px; align-items: stretch; }
/* 🆕 v6.50: 大卡左右布局 — 左信息列 + 右走势图列 */
.focus-card--big .fs-big-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; }
.focus-card--big .fs-chart-slot { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.focus-card--big .fs-chart-slot .fs-chart { height: 100%; width: 100%; margin-top: 0; }
.focus-card--big .fs-chart-slot .fs-chart-slot--empty { height: 100%; }
.focus-card--small { cursor: pointer; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fs-badge-row { display: flex; align-items: center; gap: 8px; }
.fs-badge { font-size: 0.68em; font-weight: 800; letter-spacing: 0.05em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 8px; border-radius: var(--radius-sm); }
.fs-meta { font-size: 0.72em; color: var(--text-muted); }
.fs-meta--cd { color: var(--draw-tie); font-weight: 800; }
.fs-title { font-size: 1.25em; font-weight: 800; line-height: 1.35; color: var(--text-main); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fs-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.fs-big-pct { font-size: 2.1em; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.fs-pct-sign { font-size: 0.5em; }
.fs-metric { margin-top: 6px; font-size: 0.78em; color: var(--text-muted); }
.fs-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.fs-spark { overflow: visible; flex-shrink: 0; }
.fs-small-l { min-width: 0; }
.fs-small-time { display: flex; align-items: center; gap: 6px; }
.fs-small-title { margin-top: 4px; font-size: 0.92em; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-small-metric { margin-top: 2px; font-size: 0.75em; color: var(--text-muted); }
.fs-small-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.fs-small-pct { font-size: 1em; font-weight: 800; }

/* --- Roadmap 时间线 --- */
.rm-box { border: 1px solid var(--border-light); border-radius: 12px; background: var(--card-light); padding: 10px 12px 8px; }
.rm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; }
.rm-title { font-size: 0.72em; color: var(--text-muted); font-weight: 800; letter-spacing: 0.04em; flex-shrink: 0; }
.rm-btns { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.rm-span-btn { font-size: 0.68em; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-light); background: transparent; color: var(--text-muted); cursor: pointer; }
.rm-canvas { position: relative; height: 96px; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(99,102,241,0.01)); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.rm-grid { position: absolute; inset: 0; z-index: 1; }
.rm-events { position: absolute; inset: 0; z-index: 2; }
.rm-now { position: absolute; top: 0; bottom: 0; width: 1px; background: #ef4444; z-index: 3; pointer-events: none; }
.rm-now-label { position: absolute; top: 2px; font-size: 0.6em; color: #fff; background: #ef4444; padding: 0 5px; border-radius: 4px; font-weight: 800; z-index: 3; pointer-events: none; }
.rm-hover { display: none; position: absolute; z-index: 5; background: var(--card-light); border: 1px solid var(--border-light); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); padding: 8px 10px; min-width: 150px; pointer-events: none; }
.rm-tick { position: absolute; top: 14px; bottom: 0; width: 1px; background: var(--border-light); }
.rm-tick-label { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 0.6em; color: var(--text-muted); white-space: nowrap; }
.rm-item { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; z-index: 2; }
.rm-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rm-label { font-size: 0.66em; font-weight: 700; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: 6px; }

/* 🆕 2026-08-24 Phase4f: 资产组合弹窗 renderPortfolioContent（pnl/balances/history/favorites/private 五 tab）
   动态值（盈亏色/状态色/买卖色）保留内联；按钮覆写 .btn-mini 背景的一律用双类选择器压制 .btn-mini:hover（保持 hover 不变底色的现状） */
/* --- pnl --- */
.pf-range-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; padding-top: 10px; }
.pf-range-btn { padding: 4px 12px; font-size: 0.85em; border-radius: 6px; border: 1px solid var(--border-light); cursor: pointer; transition: 0.2s; font-weight: bold; }
.pf-pnl-summary { text-align: center; padding: 10px 0 20px 0; border-bottom: 1px dashed rgba(0,0,0,0.05); }
.pf-pnl-label { font-size: 0.9em; color: var(--text-muted); margin-bottom: 5px; }
.pf-pnl-value { font-size: 2.2em; font-weight: bold; }
.pf-mt10 { margin-top: 10px; }
.pf-hist-title { font-size: 0.85em; color: var(--text-muted); margin-bottom: 10px; font-weight: bold; }
.pf-hist-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.pf-empty { text-align: center; color: #999; padding: 20px; }
.pf-empty--sm { font-size: 0.9em; }
.pf-rec { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04); }
.pf-rec-l { max-width: 70%; }
.pf-rec-title { font-weight: bold; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.pf-rec-time { font-size: 0.8em; color: var(--text-muted); margin-top: 4px; }
.pf-rec-amt { font-weight: bold; font-size: 1.1em; }
.pf-more { text-align: center; padding: 12px 0; margin-top: 5px; }
.pf-more-btn { width: 100%; border-style: dashed; padding: 8px; }
/* --- balances --- */
.pf-bal-locked { display: flex; justify-content: space-between; align-items: center; padding: 12px 5px; border-bottom: 1px dashed rgba(245,158,11,0.25); background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02)); border-radius: 6px; margin: 4px 0; }
.pf-bal-name--locked { color: #b45309; font-weight: 700; }
.pf-bal-val--locked { font-weight: 900; color: #d97706; font-size: 1.1em; text-shadow: 0 0 6px rgba(245,158,11,0.3); }
.pf-bal-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 5px; border-bottom: 1px dashed rgba(0,0,0,0.05); }
.pf-bal-name { color: var(--text-muted); font-weight: 500; }
.pf-bal-val { font-weight: 700; color: var(--text-main); font-size: 1.1em; }
/* --- history --- */
.pf-filter-row { display: flex; justify-content: space-between; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; padding: 0 5px; }
.pf-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--bg); color: var(--text-main); font-size: 0.9em; outline: none; flex: 1; min-width: 120px; cursor: pointer; }
.pf-h-title { font-weight: bold; margin-bottom: 4px; }
.pf-right { text-align: right; }
.pf-h-value { font-size: 1.15em; font-weight: bold; color: var(--text-main); }
.pf-h-pnl { font-size: 0.85em; font-weight: bold; }
.btn-mini.pf-cashout { margin-top: 6px; color: var(--home-red); border: 1px solid var(--home-red); background: transparent; }
.pf-claim-block { text-align: right; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-light); }
.pf-won { color: var(--success); font-weight: bold; font-size: 1.2em; }
.pf-claim-btn { margin-top: 6px; }
.pf-lost-block { text-align: right; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-light); color: var(--home-red); font-weight: bold; }
.pf-h-row { padding: 12px 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-radius: 8px; transition: background 0.2s; }
.pf-h-side { font-size: 0.85em; color: #666; }
.pf-h-detail { font-size: 0.8em; color: #888; margin-top: 4px; line-height: 1.5; }
/* --- favorites（.event-item.pf-fav-card 双类压制 .event-item:hover，保持 hover 不变底色） --- */
.pf-fav-head { text-align: right; margin-bottom: 10px; }
.btn-mini.pf-clear { color: #ff4d4f; border: 1px solid #ff4d4f; background: transparent; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.pf-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 5px 0; }
.event-item.pf-fav-card { padding: 14px 16px; border: 1px solid #eaeaea; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: #fff; }
.pf-fav-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pf-fav-flags { display: flex; align-items: center; flex-shrink: 0; }
.pf-fav-v { margin: 0 2px; color: #ccc; font-size: 0.75em; }
.pf-fav-title { font-weight: 700; font-size: 1.05em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pf-fav-star { cursor: pointer; font-size: 1.2em; color: #fadb14; margin-left: 12px; flex-shrink: 0; }
/* --- private --- */
.pf-priv-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 1.1em; font-weight: bold; }
.pf-priv-list { display: flex; flex-direction: column; gap: 12px; }
.btn-mini.pf-priv-lock { border-color: var(--home-red); color: var(--home-red); background: transparent; }
.pf-priv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btn-mini.pf-priv-resolve { background: #1890ff; color: #fff; border: none; margin-left: auto; }
.pf-priv-card { padding: 15px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--card-light); box-shadow: 0 2px 10px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.2s; }
.pf-priv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pf-priv-title { font-weight: bold; color: var(--text-main); font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-priv-status { font-weight: bold; font-size: 0.9em; white-space: nowrap; }
.pf-priv-id { font-size: 0.85em; color: var(--text-muted); margin-bottom: 12px; }

/* 🆕 2026-08-24 Phase4g: 评论区 / 订单簿 / 持仓分布 / 弹幕 内联样式 → 类
   JS 运行时赋值（点赞按钮四属性/trade-type 背景色/hover 背景/弹幕位置）不受影响；
   trade-row/holder-row 的"我的"高亮从 cssText 改为修饰类 */
.comment-card { padding: 14px; background: rgba(0,0,0,0.02); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(0,0,0,0.04); }
.cm-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; color: #888; }
.cm-addr { font-weight: bold; color: var(--away-blue, #1890ff); background: rgba(24,144,255,0.1); padding: 2px 6px; border-radius: 4px; }
.cm-text { font-size: 1em; line-height: 1.5; word-break: break-word; font-weight: 500; color: inherit; }
.cm-like { border: none; padding: 6px 14px; border-radius: 20px; font-size: 0.85em; transition: all 0.2s; font-weight: bold; }

.tr-empty { text-align: center; color: #999; font-size: 0.9em; padding: 30px; }
.trade-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; margin: 2px 0; border-radius: 6px; cursor: pointer; }
.trade-row--n { border-bottom: 1px solid rgba(0,0,0,0.04); transition: background 0.2s; }
.trade-row--mine { background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.3); }
.tr-c1 { flex: 1; }
.tr-type { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; margin-right: 6px; }
.tr-side { font-weight: 600; color: var(--text-main); font-size: 0.9em; }
.tr-price { flex: 1; text-align: center; font-weight: bold; color: var(--text-main); }
.tr-shares { flex: 1; text-align: right; font-weight: bold; color: var(--text-main); }
.tr-time { flex: 1; text-align: right; font-size: 0.85em; color: var(--text-muted); }
.my-badge { display: inline-block; padding: 2px 4px; border-radius: 4px; font-size: 0.7em; background: #38bdf8; color: #fff; font-weight: bold; margin-right: 4px; box-shadow: 0 0 5px rgba(56,189,248,0.5); }
.my-badge--mb { margin-right: 0; margin-bottom: 4px; }

.holder-col { flex: 1; min-width: 250px; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; background: var(--bg); }
.holder-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; cursor: pointer; }
.holder-row--n { border-bottom: 1px solid var(--border-light); font-size: 0.85em; transition: background 0.2s; }
.holder-row--mine { margin: 2px 0; border-radius: 6px; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.3); }
.hd-l { display: flex; align-items: center; gap: 10px; }
.hd-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid transparent; }
.hd-avatar-ph { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid transparent; }
.hd-name-col { display: flex; flex-direction: column; gap: 2px; }
.hd-name-row { display: flex; align-items: center; gap: 4px; }
.hd-name { font-weight: bold; color: var(--text-main); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-avg { color: var(--text-muted); font-size: 0.85em; }
.hd-shares { font-weight: bold; font-size: 1.1em; }
.hd-time { font-size: 0.7em; color: var(--text-muted); }
.hd-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 0.85em; }
.hd-col-head { font-weight: 800; text-align: center; padding: 12px; border-bottom: 1px solid var(--border-light); font-size: 1.05em; }
.hd-col-body { max-height: 500px; overflow-y: auto; padding-right: 2px; }

.bb-row { display: flex; align-items: center; gap: 8px; }
.bb-addr { opacity: 0.6; font-size: 0.85em; }
.bb-like { cursor: pointer; }


/* --- Focus Board 看板化 (v6.31 Phase5): 看板头聚合统计 + 全宽渐变面积图 + Δ 变动 chip + count-up/描线动效 --- */
.fs-board { display: flex; flex-direction: column; gap: 10px; }
.fs-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.fs-board-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85em; font-weight: 800; letter-spacing: 0.04em; color: var(--text-main); }
.fs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--home-yes); animation: fsPulse 2.4s var(--ease-out) infinite; }
@keyframes fsPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--home-yes) 45%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.fs-board-stats { font-size: 0.75em; color: var(--text-muted); }
.fs-pct-row { display: flex; align-items: baseline; gap: 10px; }
.fs-delta { font-size: 0.75em; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, currentColor 12%, transparent); }
.fs-delta--up { color: var(--home-yes); }
.fs-delta--down { color: var(--away-no); }
.fs-delta--flat { color: var(--text-muted); }
.fs-small-delta { font-size: 0.72em; font-weight: 800; padding: 0; background: none; }
.fs-small-pctr { display: inline-flex; align-items: baseline; gap: 6px; }
.fs-chart { width: 100%; height: 76px; display: block; margin-top: 2px; }
.fs-grid-line { stroke: var(--border-light); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.fs-axis-text { font-size: 7px; fill: var(--text-muted); font-family: var(--font-mono); }
.fs-chart-slot--empty { height: 76px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: var(--text-muted); }
.fs-area-line { stroke-dasharray: none; }
/* 🆕 v6.62: 描线改实线 + opacity 淡入 (不再依赖 dasharray/pathLength — 部分环境 pathLength 失效导致线只画一半) */
@keyframes fsFade { from { opacity: 0; } to { opacity: 1; } }
.focus-card:hover { box-shadow: 0 10px 28px rgb(0 0 0 / 0.14); }
@media (max-width: 768px) {
    .fs-chart { height: 56px; }
    .fs-board-head { flex-wrap: wrap; }
    /* 🆕 v6.50: 移动端大卡回退上下布局 — 左右在窄屏太挤 */
    .focus-card--big { flex-direction: column; }
    .focus-card--big .fs-chart-slot .fs-chart { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-live-dot { animation: none; }
    .fs-area-line { animation: none; stroke-dashoffset: 0; }
}