*{margin:0;padding:0;box-sizing:border-box;}
        :root{
            --primary:#87CEEB;
            --primary-dark:#4682B4;
            --bg:#f0f4f8;
            --card:#FFFFFF;
            --text:#333;
            --gray:#666;
            --gap-sm:8px;--gap-md:16px;--gap-lg:24px;
            --padding-sm:12px;--padding-md:20px;--padding-lg:30px;
            --card-shadow:0 8px 24px rgba(135,206,235,0.4);
            --radius:16px;
            --elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1);
            --elastic-soft: cubic-bezier(0.22, 1, 0.36, 1);
            /* 以下为原内联样式中散落的硬编码值统一提取，取值与改造前完全一致 */
            --tint-primary-10: var(--tint-primary-10);   /* 背景装饰光斑 1 */
            --tint-primary-dark-06: var(--tint-primary-dark-06); /* 背景装饰光斑 2 */
            --tint-primary-15: var(--tint-primary-15);   /* hover 底色 */
            --tint-primary-20: rgba(135,206,235,0.20);   /* 返回链接 hover 底色 */
            --tint-primary-30: rgba(135,206,235,0.30);   /* 描边 */
            --tint-primary-50: rgba(135,206,235,0.50);   /* 卡片 hover 阴影 */
            --tint-dark-30: rgba(70,130,180,0.30);       /* 按钮阴影 */
            --shadow-nav: 0 2px 10px var(--shadow-nav);    /* 导航条投影 */
            --on-accent: #fff;      /* 主色按钮上的文字色 */
            --accent-deep: #3a6f9c; /* 按钮按下态底色 */
        }
        /* 背景装饰 */
        body::before {
            content:'';position:fixed;top:0;left:0;
            width:100%;height:100%;
            background:
                radial-gradient(ellipse at 20% 50%, var(--tint-primary-10), transparent 60%),
                radial-gradient(ellipse at 80% 20%, var(--tint-primary-dark-06), transparent 50%);
            z-index:0;
            animation:bgDrift 14s ease-in-out infinite alternate;
            pointer-events:none;
        }
        @keyframes bgDrift{0%{transform:scale(1);opacity:0.7}100%{transform:scale(1.04);opacity:1}}
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
            background:var(--bg);color:var(--text);
            min-height:100vh;display:flex;flex-direction:column;position:relative;
        }
        /* 导航栏 */
        .navbar{
            background:var(--primary);padding:12px 0;
            box-shadow:0 2px 10px var(--shadow-nav);
            position:sticky;top:0;z-index:100;width:100%;
            opacity:0;transform:translateY(-100%);
            animation:navSlideIn 0.7s var(--elastic-soft) 0.1s forwards;
        }
        @keyframes navSlideIn{to{opacity:1;transform:translateY(0);}}
        .nav-container{
            max-width:1200px;margin:0 auto;
            display:flex;justify-content:space-between;align-items:center;
            padding:0 var(--padding-sm);
        }
        .logo{
            font-size:clamp(1.1rem,4vw,1.4rem);
            font-weight:bold;color:var(--primary-dark);
            text-decoration:none;
            transition:transform 0.35s var(--elastic-out);
        }
        .logo:hover{transform:scale(1.06);}
        .nav-links{display:flex;gap:clamp(10px,3vw,18px);}
        .nav-links a{
            color:var(--primary-dark);font-weight:500;
            text-decoration:none;
            font-size:clamp(0.85rem,3vw,0.95rem);
            position:relative;padding-bottom:4px;
            transition:color 0.3s ease;
        }
        .nav-links a::after{
            content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
            background:var(--primary-dark);border-radius:2px;
            transition:width 0.35s var(--elastic-out);
        }
        .nav-links a:hover::after,
        .nav-links a.active::after{width:100%;}
        .nav-links a:hover{font-weight:600;}
        /* 页面容器 */
        .page-wrapper{
            flex:1;display:flex;flex-direction:column;
            align-items:center;padding:var(--padding-lg) var(--padding-sm);
            position:relative;z-index:1;
        }
        .container{
            max-width:700px;width:100%;
            display:flex;flex-direction:column;gap:var(--gap-lg);
        }
        /* 返回链接 */
        .back-link{
            color:var(--primary-dark);text-decoration:none;
            font-size:0.95rem;display:inline-flex;align-items:center;
            align-self:flex-start;
            padding:6px 10px;border-radius:6px;
            transition:all 0.3s var(--elastic-soft);
            opacity:0;transform:translateX(-12px);
            animation:fadeSlideIn 0.5s var(--elastic-soft) 0.2s forwards;
        }
        .back-link::before{
            content:'';display:inline-block;
            width:8px;height:8px;
            border-left:2px solid var(--primary-dark);
            border-bottom:2px solid var(--primary-dark);
            transform:rotate(45deg);margin-right:6px;flex-shrink:0;
        }
        .back-link:hover{background:var(--tint-primary-20);transform:translateX(0);}
        @keyframes fadeSlideIn{to{opacity:1;transform:translateX(0);}}
        /* 标题 */
        .page-title{
            color:var(--primary-dark);text-align:center;
            font-size:clamp(1.5rem,5vw,2rem);
            margin-bottom:4px;
            opacity:0;transform:translateY(16px);
            animation:headingIn 0.7s var(--elastic-soft) 0.25s forwards;
        }
        @keyframes headingIn{to{opacity:1;transform:translateY(0);}}
        /* 游戏卡片 */
        .game-card{
            background:var(--card);border-radius:var(--radius);
            box-shadow:var(--card-shadow);
            padding:clamp(var(--padding-md),4vw,var(--padding-lg));
            transition:transform 0.35s var(--elastic-out),
                        box-shadow 0.35s ease;
            opacity:0;transform:translateY(24px) scale(0.98);
        }
        .game-card.visible{
            animation:cardIn 0.7s var(--elastic-out) forwards;
        }
        @keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1);}}
        .game-card:hover{
            transform:translateY(-4px);
            box-shadow:0 16px 40px var(--tint-primary-50);
        }
        .game-card h2{
            color:var(--primary-dark);
            font-size:clamp(1.1rem,4vw,1.3rem);
            margin-bottom:8px;
        }
        .game-desc{
            color:var(--gray);
            font-size:0.95rem;margin-bottom:14px;
            line-height:1.6;
        }
        .play-btn{
            display:inline-block;
            background:var(--primary-dark);color:var(--on-accent);
            padding:10px 22px;text-decoration:none;
            border-radius:8px;font-weight:500;font-size:14px;
            transition:transform 0.25s var(--elastic-out),
                        box-shadow 0.25s,background 0.25s;
        }
        .play-btn:hover{
            background:var(--accent-deep);
            transform:translateY(-2px);
            box-shadow:0 4px 12px var(--tint-dark-30);
        }
        .play-btn:active{transform:scale(0.97);}
        /* 提示 */
        .tip{
            padding:16px 20px;
            background:var(--tint-primary-15);
            color:var(--primary-dark);
            font-size:0.9rem;text-align:center;
            border-radius:12px;line-height:1.6;
            border:1px solid var(--tint-primary-30);
            opacity:0;animation:fadeInUp 0.6s ease 0.8s forwards;
        }
        .tip a{color:var(--primary-dark);font-weight:600;}
        @keyframes fadeInUp{to{opacity:1;transform:translateY(0);}}
        /* 页脚 */
        footer{
            text-align:center;padding:var(--padding-md);
            background:var(--primary);color:var(--primary-dark);
            font-size:14px;width:100%;
            opacity:0;animation:footerIn 0.8s ease 0.6s forwards;
        }
        @keyframes footerIn{to{opacity:1;}}
        /* 响应式 */
        @media(max-width:640px){
            .page-wrapper{padding:var(--padding-md) var(--padding-sm);}
            .game-card{padding:18px;}
            .game-card h2{font-size:1.15rem;}
        }
        @media(max-width:480px){
            .nav-container{flex-wrap:wrap;justify-content:center;gap:var(--gap-sm);}
            .nav-links{margin-top:6px;gap:14px;justify-content:center;}
            .logo{font-size:1.2rem;}
        }