*{margin:0;padding:0;box-sizing:border-box}
        :root{
            --bg:#06080f;
            --glass:rgba(14,18,42,0.72);
            --border:rgba(255,255,255,0.06);
            --cyan:#00e5ff;
            --purple:#a855f7;
            --amber:#f59e0b;
            --hot:#ef4444;
            --text:#e8eaf6;
            --dim:#64748b;
            --r:14px;
        }

        html{
            scroll-behavior:smooth;
            -webkit-text-size-adjust:100%;
            -webkit-tap-highlight-color:transparent;
        }

        body{
            font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
            background:var(--bg);
            color:var(--text);
            min-height:100vh;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
            -webkit-transform:translateZ(0);
            transform:translateZ(0);
        }

        *{-webkit-backface-visibility:hidden;backface-visibility:hidden}

        /* ====== 背景 ====== */
        .bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
        .bg i{
            position:absolute;border-radius:50%;
            will-change:transform;
            animation:bg-drift 20s ease-in-out infinite alternate;
        }
        .bg .a{width:45vmax;height:45vmax;background:rgba(0,229,255,0.06);top:-15%;left:-10%;filter:blur(80px)}
        .bg .b{width:40vmax;height:40vmax;background:rgba(168,85,247,0.05);bottom:-10%;right:-8%;filter:blur(80px);animation-delay:-10s}
        @keyframes bg-drift{
            0%{transform:translate(0,0) scale(1)}
            100%{transform:translate(30px,20px) scale(1.05)}
        }

        /* ====== 页面 ====== */
        .page{
            position:relative;z-index:1;
            max-width:960px;
            margin:0 auto;
            padding:12px 10px 40px;
        }

        /* ====== 赛事卡 ====== */
        .hero{
            background:linear-gradient(135deg,rgba(0,229,255,0.07),rgba(168,85,247,0.07));
            border:1px solid rgba(0,229,255,0.12);
            border-radius:18px;
            padding:18px;
            position:relative;
            overflow:hidden;
            will-change:transform;
        }
        .hero::after{
            content:'';position:absolute;
            top:-60px;right:-60px;width:180px;height:180px;
            background:radial-gradient(circle,rgba(0,229,255,0.1),transparent 70%);
            pointer-events:none;
        }
        .hero-row{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
        .hero-icon{
            width:44px;height:44px;flex-shrink:0;
            background:linear-gradient(135deg,var(--cyan),var(--purple));
            border-radius:14px;
            display:flex;align-items:center;justify-content:center;
            font-size:22px;
            box-shadow:0 0 20px rgba(0,229,255,0.25);
        }
        .hero-txt h1{
            font-size:clamp(15px,3.8vw,22px);font-weight:800;
            background:linear-gradient(90deg,var(--cyan),var(--purple));
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
            background-clip:text;line-height:1.35;
        }
        .hero-txt p{font-size:clamp(11px,2.5vw,13px);color:var(--dim);margin-top:2px}

        .hero-meta{
            display:flex;align-items:center;gap:8px;flex-wrap:wrap;
            margin-top:14px;position:relative;z-index:1;
        }
        .flags{display:flex;gap:4px;font-size:clamp(17px,4vw,22px)}
        .htag{
            display:inline-flex;align-items:center;gap:4px;
            padding:4px 12px;border-radius:20px;
            font-size:clamp(10px,2.2vw,12px);font-weight:700;
        }
        .htag-d{background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.2);color:var(--cyan)}
        .htag-d b{color:#fff}
        .htag-b{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.2);color:var(--purple);margin-left:auto}

        /* ====== 公告 ====== */
        .marquee{
            margin-top:10px;padding:8px 0;overflow:hidden;
            border-bottom:1px solid var(--border);
            -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
        }
        .marquee-inner{
            display:flex;gap:40px;white-space:nowrap;
            will-change:transform;
            animation:mq 28s linear infinite;
        }
        .marquee-inner span{font-size:12px;color:var(--dim)}
        .marquee-inner b{color:var(--amber)}
        .marquee-inner em{font-style:normal;color:var(--cyan)}
        @keyframes mq{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

        /* ====== 区块头 ====== */
        .sec-hd{display:flex;align-items:center;gap:8px;margin:18px 0 12px}
        .sec-hd h2{font-size:clamp(14px,3vw,16px);font-weight:800}
        .sec-hd em{
            font-style:normal;font-size:11px;padding:3px 10px;border-radius:8px;
            background:rgba(0,229,255,0.06);border:1px solid rgba(0,229,255,0.12);color:var(--cyan);
        }

        /* ====== 网格 - 5卡布局 ====== */
        .grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:clamp(6px,1.5vw,14px);
        }
        /* 第一张卡片占满整行 */
        .grid .card:first-child{
            grid-column:1/-1;
        }

        /* ====== 第一张卡片横向布局 ====== */
        .card-row{
            display:flex;
            flex-direction:row;
            gap:clamp(8px,2vw,20px);
            align-items:center;
            flex-wrap:nowrap;
        }
        .card-row .card-left{
            flex:0 0 30%;
            max-width:30%;
            min-width:0;
        }
        .card-row .card-right{
            flex:1;
            min-width:0;
        }
        @media(max-width:400px){
            .card-row{flex-direction:row;gap:8px}
            .card-row .card-left{flex:0 0 35%;max-width:35%}
        }

        /* ====== 卡片 ====== */
        .card{
            background:var(--glass);
            backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
            border:1px solid var(--border);
            border-radius:var(--r);
            padding:clamp(10px,2.5vw,24px);
            display:flex;flex-direction:column;
            position:relative;overflow:hidden;
            will-change:transform,box-shadow;
            transform:translate3d(0,0,0);
            transition:transform 0.28s cubic-bezier(.25,.46,.45,.94),
                        box-shadow 0.28s cubic-bezier(.25,.46,.45,.94),
                        border-color 0.28s ease;
        }
        .card::before{
            content:'';position:absolute;inset:0;
            background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,229,255,0.06),transparent 60%);
            opacity:0;transition:opacity 0.3s;pointer-events:none;
            border-radius:var(--r);
        }
        .card:hover{
            transform:translate3d(0,-4px,0);
            border-color:rgba(0,229,255,0.18);
            box-shadow:0 12px 36px rgba(0,0,0,0.25);
        }
        .card:hover::before{opacity:1}
        .card:active{
            transform:translate3d(0,0,0) scale(0.98);
            transition-duration:0.1s;
        }

        /* 第一张卡片特殊边框 */
        .grid .card:first-child{
            border-color:rgba(0,229,255,0.15);
            background:linear-gradient(135deg,rgba(0,229,255,0.04),rgba(168,85,247,0.04)),var(--glass);
        }

        /* 卡片头 */
        .c-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(6px,1.5vw,12px);position:relative;z-index:1}
        .rank{font-weight:900;font-size:clamp(15px,3.5vw,22px);font-style:italic;display:flex;align-items:center;gap:4px}
        .rank em{
            font-style:normal;font-size:clamp(7px,1.6vw,10px);font-weight:600;
            padding:1px 5px;border-radius:4px;
            background:rgba(255,255,255,0.04);color:var(--dim);
        }
        .r1{color:var(--cyan)}.r2{color:var(--purple)}.r3{color:var(--amber)}.rn{color:var(--dim)}

        .fire{
            font-size:clamp(8px,1.8vw,10px);font-weight:700;
            padding:clamp(2px,0.5vw,4px) clamp(5px,1.2vw,10px);
            border-radius:6px;
            background:linear-gradient(135deg,#ef4444,#dc2626);
            color:#fff;
            box-shadow:0 2px 8px rgba(239,68,68,0.3);
        }
        .fire-gold{
            background:linear-gradient(135deg,var(--amber),#d97706);
            box-shadow:0 2px 8px rgba(245,158,11,0.3);
        }

        /* Logo */
        .c-logo{
            width:100%;
            height:clamp(44px,10vw,78px);
            display:flex;align-items:center;justify-content:center;
            background:linear-gradient(135deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01));
            border:1px solid rgba(255,255,255,0.04);
            border-radius:clamp(8px,1.5vw,12px);
            margin-bottom:clamp(6px,1.5vw,12px);
            padding:clamp(4px,1vw,10px);
            position:relative;z-index:1;
        }
        .c-logo img{
            max-height:clamp(28px,7vw,54px);
            max-width:100%;
            object-fit:contain;
            filter:brightness(1.1);
            will-change:transform;
            transition:transform 0.3s cubic-bezier(.25,.46,.45,.94);
        }
        .card:hover .c-logo img{transform:scale(1.06)}

        .c-logo .txt-logo{
            font-size:clamp(16px,4vw,24px);
            font-weight:900;
            text-align:center;
            line-height:1.2;
        }

        /* 第一张卡片logo更大 */
        .grid .card:first-child .c-logo{
            height:clamp(56px,12vw,96px);
            margin-bottom:0;
        }
        .grid .card:first-child .c-logo img{
            max-height:clamp(36px,9vw,68px);
        }
        .grid .card:first-child .c-logo .txt-logo{
            font-size:clamp(20px,5vw,30px);
        }

        /* 评分 */
        .c-rate{
            display:flex;align-items:center;gap:clamp(4px,1vw,8px);
            margin-bottom:clamp(4px,1vw,8px);
            position:relative;z-index:1;
        }
        .stars{display:flex;gap:1px}
        .st{
            width:clamp(10px,2.4vw,16px);
            height:clamp(10px,2.4vw,16px);
            background:linear-gradient(135deg,var(--amber),#fbbf24);
            clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
        }
        .sc{
            font-size:clamp(14px,3.2vw,20px);font-weight:900;
            background:linear-gradient(90deg,var(--amber),#fbbf24);
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
        }

        /* 标签 */
        .c-tags{
            display:flex;gap:clamp(3px,0.7vw,6px);flex-wrap:wrap;
            margin-bottom:clamp(8px,2vw,16px);
            position:relative;z-index:1;
        }
        .tg{
            font-size:clamp(8px,1.8vw,11px);
            padding:clamp(1px,0.4vw,3px) clamp(5px,1.2vw,10px);
            border-radius:clamp(4px,0.8vw,8px);
            font-weight:600;white-space:nowrap;
        }
        .tg-a{background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.2);color:var(--cyan)}
        .tg-n{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);color:var(--dim)}

        /* ====== 按钮 ====== */
        .c-btns{
            display:flex;gap:clamp(4px,1vw,8px);
            margin-top:auto;
            position:relative;z-index:1;
        }

        .cb{
            flex:1;
            display:flex;align-items:center;justify-content:center;gap:clamp(3px,0.6vw,6px);
            padding:clamp(8px,2vw,12px) 4px;
            border:none;border-radius:clamp(8px,1.5vw,12px);
            font-size:clamp(11px,2.4vw,14px);
            font-weight:700;
            cursor:pointer;
            font-family:inherit;
            text-decoration:none;
            position:relative;overflow:hidden;
            will-change:transform,box-shadow;
            transform:translate3d(0,0,0);
            transition:transform 0.22s cubic-bezier(.25,.46,.45,.94),
                        box-shadow 0.22s cubic-bezier(.25,.46,.45,.94);
            -webkit-tap-highlight-color:transparent;
            user-select:none;
            -webkit-user-select:none;
        }

        .cb-r{
            background:linear-gradient(135deg,#00e5ff,#00b8d4);
            color:#000;
            box-shadow:0 3px 12px rgba(0,229,255,0.2);
        }
        .cb-r::after{
            content:'';position:absolute;
            top:0;left:-110%;
            width:50%;height:100%;
            background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
            will-change:transform;
            transition:none;
        }
        .cb-r:hover::after{
            animation:sweep 0.6s ease forwards;
        }
        @keyframes sweep{0%{left:-110%}100%{left:110%}}
        .cb-r:hover{
            transform:translate3d(0,-2px,0);
            box-shadow:0 6px 24px rgba(0,229,255,0.35);
        }
        .cb-r:active{
            transform:translate3d(0,1px,0) scale(0.96);
            box-shadow:0 1px 6px rgba(0,229,255,0.2);
            transition-duration:0.08s;
        }

        .cb-d{
            background:rgba(255,255,255,0.04);
            border:1.5px solid rgba(255,255,255,0.1);
            color:var(--text);
            box-shadow:0 2px 8px rgba(0,0,0,0.1);
        }
        .cb-d::after{
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,#a855f7,#7c3aed);
            border-radius:inherit;
            opacity:0;
            will-change:opacity;
            transition:opacity 0.25s ease;
            z-index:-1;
        }
        .cb-d:hover{
            border-color:transparent;
            color:#fff;
            transform:translate3d(0,-2px,0);
            box-shadow:0 6px 20px rgba(168,85,247,0.25);
        }
        .cb-d:hover::after{opacity:1}
        .cb-d:active{
            transform:translate3d(0,1px,0) scale(0.96);
            transition-duration:0.08s;
        }

        .cb svg{
            width:clamp(13px,2.8vw,17px);
            height:clamp(13px,2.8vw,17px);
            flex-shrink:0;
        }
        .cb-r svg{fill:#000}
        .cb-d svg{fill:currentColor}

        /* ====== 底部 ====== */
        .foot{
            text-align:center;margin-top:24px;
            padding:16px 0;border-top:1px solid var(--border);
        }
        .foot p{font-size:clamp(10px,2.2vw,12px);color:var(--dim);line-height:1.8}
        .foot .sub{color:rgba(255,255,255,0.15);margin-top:2px}

        /* ====== 滚动入场动画 ====== */
        .card{
            opacity:0;
            transform:translate3d(0,20px,0);
        }
        .card.show{
            opacity:1;
            transform:translate3d(0,0,0);
        }

        /* ====== PC端优化 ====== */
        @media(min-width:641px){
            .page{padding:20px 20px 50px}
            .hero{padding:24px}
            .grid{gap:14px}
            .card{padding:22px}
            .c-logo{height:78px}
            .grid .card:first-child .c-logo{height:96px}
        }
        @media(min-width:960px){
            .page{max-width:1000px;padding:28px 28px 60px}
            .hero{padding:28px}
            .grid{gap:16px}
            .card{padding:26px}
            .c-logo{height:84px}
            .grid .card:first-child .c-logo{height:100px}
        }
        
        /* ====== iframe内部触摸滚动修复 ====== */
        html {
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }
        
        body {
            min-height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            /* 防止300ms点击延迟 */
            touch-action: manipulation;
        }
        
        /* 所有可交互元素不拦截垂直滑动 */
        .card,
        .hero,
        .cb,
        .marquee,
        .c-logo,
        .c-btns,
        a,
        button {
            touch-action: pan-y;
        }
        
        /* 防止长按弹出菜单干扰滑动 */
        * {
            -webkit-touch-callout: none;
        }
        a, .cb {
            -webkit-touch-callout: default;
        }
        
        /* 第一张卡片内元素紧凑排列 */
        .grid .card:first-child .c-tags{
            flex-wrap:nowrap;
            overflow:hidden;
        }
        .grid .card:first-child .c-btns{
            flex-wrap:nowrap;
        }
        .grid .card:first-child .c-logo{
            margin-bottom:0;
        }