@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Roboto:wght@400;700&display=swap');

        :root {
            --primary-bg-start: #F0F5FF; /* 冰川白 背景起始色 */
            --primary-bg-end: #E6F7FF;   /* 霓虹青蓝 背景结束色 */
            --accent-neon-blue: #00E0FF; /* 主要强调色 - 霓虹青蓝 */
            --accent-text: #007B8A;      /* 用于文本的较深青色，在浅色背景上对比度良好 */
            --text-primary: #1f2937;     /* 浅色背景下的深色文本 */
            --text-secondary: #4b5563;   /* 次要文本颜色 */


            --glass-bg: rgba(255, 255, 255, 0.65); /* 毛玻璃背景色 */
            --glass-blur: 8px;                    /* 毛玻璃模糊度 */
            --border-glow: rgba(0, 224, 255, 0.5); /* 边框辉光色 - 霓虹青蓝 */
            --border-light: rgba(255, 255, 255, 0.8); /* 亮色边框 */


            --shadow-color: rgba(0, 224, 255, 0.1);     /* 阴影基础色 */
            --shadow-color-hover: rgba(0, 224, 255, 0.2);/* 悬停时阴影色 */
            --shadow-sm: 0 2px 10px var(--shadow-color); /* 小阴影 */
            --shadow-md: 0 6px 20px var(--shadow-color); /* 中阴影 */
            --shadow-lg: 0 10px 35px rgba(0, 224, 255, 0.15); /* 大阴影 */


            
            --radius-sm: 8px;  /* 小圆角 */
            --radius-md: 16px; /* 中圆角 */
            --radius-lg: 20px; /* 大圆角 */

            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 过渡效果 */



            /* Fonts */
            /* 标题字体栈*/
            --font-heading: 'Orbitron', 'Russo One', 'Audiowide', 'Space Grotesk',  'Exo 2', 'Bahnschrift', 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    
            /* 正文字体栈*/
            --font-body: 'Roboto', 'Montserrat', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 

        }





        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }




        a {
            text-decoration: none;
        }


        p {
            text-align: left; /* 确保文本靠左对齐（虽然通常是默认值，但明确写出更保险） */
            text-indent: 2em; /* 设置首行缩进，2em 表示缩进2个字符的宽度，你也可以用像素值，如 30px */

        }






        /* 基础页面布局和背景 */
        body {
            background: linear-gradient(135deg, var(--primary-bg-start) 0%, var(--primary-bg-end) 100%);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.6;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            font-family: var(--font-body);
        }


        /* 浮动代码雨效果 (来自详情页) */
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: -1;
            background-image: 
                repeating-linear-gradient(0deg, transparent, transparent 1.5em, rgba(75, 85, 99, 0.03) 1.5em, rgba(75, 85, 99, 0.03) 3em), /* Horizontal lines */
                repeating-linear-gradient(90deg, transparent, transparent 1.5em, rgba(75, 85, 99, 0.03) 1.5em, rgba(75, 85, 99, 0.03) 3em); /* Vertical lines */
            background-size: 3em 3em;
            opacity: 0.5;
            animation: codeRainAnim 60s linear infinite; /* Slower for subtlety */
        }


        /* 代码雨动画 */
        @keyframes codeRainAnim { /* Simple background scroll for illusion */
            0% { background-position: 0 0; }
            100% { background-position: -300px 600px; }
        }
        
        
        /* Header Styles - Light Sci-Fi */
        .site-header {
            background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            box-shadow: var(--shadow-md);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border-glow); /* 1px发光边框 */
        }
        
        .top-bar {
            display: flex;
            flex-wrap: wrap;

            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1600px;
            margin: 0 auto;
        }
        



/* === 全新升级的 Logo 样式 === */


/* ===  终极方案：3D挤压金属字 + 倒影  === */

.logo {
    /* position: relative;  为倒影伪元素提供定位上下文 */
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 2rem; /* 稍稍增大字体，让3D效果更明显 */
    font-family: var(--font-heading);
    transition: all 0.2s ease-out; /* 使用更快的过渡效果 */

    /* 1. 金属质感表面 (光的运用) */
    background: linear-gradient(180deg, 
        #ffffff 0%, 
        #E6F7FF 30%, 
        var(--accent-text) 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* 2. 清晰的3D挤压效果 (立体感) */
    /* 通过叠加多个无模糊的阴影，模拟出厚度 */
    text-shadow: 
        /* 顶部高光，模拟光照，制造斜面感 */
        -1px -1px 1px rgba(255, 255, 255, 0.5),
        /* 挤压出的厚度阴影，逐层向下向右偏移 */
        1px 1px 0px #005f6b, /* #005f6b 是一个比 accent-text 更深的颜色 */
        2px 2px 0px #005f6b,
        3px 3px 0px #005f6b,
        /* 最底层一个略微模糊的阴影，让Logo和背景融合得更好 */
        4px 4px 5px rgba(0, 0, 0, 0.2);
}

/* 3. 倒影效果 
.logo::after {
    content: attr(data-text);  获取HTML中 data-text 的内容 
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    
     垂直翻转，创建镜像 
    transform: scaleY(-1);

     倒影也需要同样的金属质感 
    background: linear-gradient(180deg, #ffffff 0%, #E6F7FF 30%, var(--accent-text) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    倒影也需要同样的3D效果 
    text-shadow: 
        -1px -1px 1px rgba(255, 255, 255, 0.5),
        1px 1px 0px #005f6b,
        2px 2px 0px #005f6b,
        3px 3px 0px #005f6b,
        4px 4px 5px rgba(0, 0, 0, 0.2);
    
     关键：使用遮罩让倒影从上到下逐渐消失 
    mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,0.6) 0%,   倒影顶部60%不透明 
        transparent 70%      到底部70%时完全透明 
    );
} */




.logo:hover {
    /* 悬停时轻微上浮 */
    transform: translateY(-4px);

    /* 悬停时增强表面光泽 */
    background: linear-gradient(180deg, 
        var(--accent-neon-blue) 0%, 
        #ffffff 50%, 
        var(--accent-text) 95%
    );
    -webkit-background-clip: text;
    background-clip: text;
}





        
        .language-selector-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .globe-icon {
            width: 24px;
            height: 24px;
            stroke: var(--accent-text); /* Changed from purple */
        }
        
        

        .language-selector {
        /* 这部分是正确的 */
            background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007B8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") right 0.7rem center / 1rem no-repeat;
            border: 1px solid var(--border-glow);
            color: var(--accent-text);
            padding: 0.6rem 1.2rem 0.6rem 0.8rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            appearance: none;
        } /* <--- 修正1：添加了缺失的闭合括号 */

        .language-selector:hover {
            /* 修正2：使用 background-color 而不是 background */
            /* 这样就不会覆盖掉原来的 background-image 设置 */
            background-color: #f5f5f5; /* 使用一个浅灰色让hover效果更明显，也可以用 #ffffff */
    
            border-color: var(--accent-neon-blue);
            box-shadow: 0 0 10px var(--accent-neon-blue);
        }



        .nav-container {
            border-top: 1px solid rgba(0, 224, 255, 0.1);
        }
        
        .nav-menu {
            display: flex;
            justify-content: center;
            padding: 0.5rem 0;
            max-width: 1600px;
            margin: 0 auto;
            gap: 1rem;
            flex-wrap: wrap;
            list-style: none; /* Added for ul */
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 600;
            padding: 0.7rem 1.2rem;
            border-radius: var(--radius-sm);
            transition: var(--transition);
            position: relative;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            font-family: var(--font-heading);
            overflow: hidden; /* For ripple */
        }
        
        .nav-link::before { /* Particle diffusion / Ripple effect */
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--accent-neon-blue);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
            z-index: -1;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--accent-text); /* Darker accent for text */
        }
        
        .nav-link:hover::before, .nav-link.active::before {
            width: 100%; 
            height: 100%;
            opacity: 0.2;
        }
        
        main.game-container {
            flex: 1;
            max-width: 1600px;
            width: 100%;
            margin: 2rem auto;
            padding: 0 5%;
        }
        
        .game-presentation-area {
            display: flex;
            flex-direction: column;
  
            margin-bottom: 3rem;
        }
        
        .game-featured-player {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            height: 70vh;
            max-height: 700px;
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border: 1px solid var(--border-glow);
        }
        
        .game-iframe-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.05);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .game-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }




        .game-player-overlay {
            margin-top: 0.5rem;      /* <-- 添加：与上方游戏区域的微小间距 */
            margin-bottom: 1.5rem;   /* <-- 添加：与下方分享按钮的间距 */

            display: flex;
            flex-direction: row;
            /* justify-content: space-between;*/
            justify-content: center; /* <-- 修改这里 */
            align-items: center; /* 修改为 center 使内容垂直居中 */
            flex-wrap: nowrap;
            gap: 1.5rem;
        }



        .game-player-overlay > :last-child {
            flex-grow: 1;
            display: flex;          /* 将按钮本身也变成一个flex容器 */
            justify-content: center;/* 让按钮内的内容居中 */
        }



        
/* 
    .game-player-overlay > :first-child {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        }

    .game-player-overlay > :last-child {
        flex-shrink: 0;
        white-space: nowrap;
        }
        如果不想使用标签，可以使用结构选择器。通过设置第一个子元素可缩小并且文本截断，第二个子元素不缩小，
        来实现在小屏幕上第二个元素完整显示，第一个元素可以缩放（截断显示）。 
        左侧元素：flex: 1 1 auto; 并且 min-width: 0;（允许内容被压缩）和 overflow: hidden;（防止溢出），
        同时内部文本设置white-space: nowrap; text-overflow: ellipsis;，这样当空间不足时，左侧文本会显示省略号。
        右侧元素：flex-shrink: 0; 不缩小，并且设置white-space: nowrap;确保其内容不换行。*/
    


        
        .game-primary-info-card { /* This wraps H1 and description */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg);
            margin-top: 2rem; /* <-- 添加此行 */
            padding: 2rem;
            box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
            border: 1px solid transparent;
            transition: var(--transition);
        }
        .game-primary-info-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-light);
            border-color: var(--border-glow);
        }

        .game-title-main {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
            color: var(--accent-text); /* Changed from purple */
            font-family: var(--font-heading);
            /* text-shadow: 0 1px 3px rgba(0,0,0,0.1); */
        }
        
        .game-short-description {
            font-size: 1.1rem;
            color: var(--text-secondary);
            
        }
        
        .rating-container {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            background: rgba(255, 255, 255, 0.5);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            backdrop-filter: blur(5px);
            border: 1px solid var(--border-glow);
            box-shadow: var(--shadow-sm);
        }
        

        .rating-value {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-primary);
            font-family: var(--font-heading);
        }
        
        .rating-count {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }



        .rating-stars {
        /* 使用一个醒目的黄色，#facc15 是一个不错的选择 */
            color: #facc15; 
            font-size: 1rem; /* 和你其它图标大小保持一致 */
            letter-spacing: 2px;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;

        }

        .rating-stars i {
            /* 给星星之间增加一点点间距，防止挤在一起 */
            margin-right: 2px;
 
        }



        .rating-line {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            padding-left: 9%;
            padding-right: 9%;
        }


        
        .btn {
            background: transparent;
            color: var(--accent-text); /* Changed from purple */
            border: 2px solid var(--accent-neon-blue);
            padding: 0.8rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            font-family: var(--font-heading);
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            text-decoration: none;
            font-size: 1rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 224, 255, 0.3);
        }

        .btn::before { /* Energy charge effect */
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;


            width: 0;
            height: 0;
            background-color: var(--accent-neon-blue);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.3;
            transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
            z-index: -1;
        }

        .btn:hover, .btn:focus {
            color: var(--primary-bg-start); /* Light text on hover */
            background-color: var(--accent-neon-blue); /* Fill with neon blue */
            box-shadow: 0 0 20px var(--accent-neon-blue), 0 0 10px var(--accent-neon-blue);
            transform: translateY(-2px);
        }
        
        .btn:hover::before {
            width: 250%;
            height: 250%;
            opacity: 0.1; /* Make ripple subtler if background is filled */
        }
        .btn:active::before {
            width: 300%;
            height: 300%;
            opacity: 0.2;
        }
        
        .btn-accent { /* For primary call to actions */
            background: var(--accent-neon-blue); /* Was --highlight (orange) */
            color: var(--text-primary); /* Dark text on neon blue */
            border-color: var(--accent-neon-blue);
            box-shadow: 0 0 15px rgba(0, 224, 255, 0.5);
        }
        .btn-accent:hover, .btn-accent:focus {
            background: var(--accent-text); /* Darker cyan on hover */
            color: white;
            border-color: var(--accent-text);
            box-shadow: 0 0 20px var(--accent-text), 0 0 10px var(--accent-text);
        }
        .btn-accent:hover::before {
            background-color: var(--accent-neon-blue); /* Ripple with lighter blue */
        }











        .game-details-section { 
             margin-bottom: 3rem;
        }

        .game-info-card { /* General Glassmorphism Card for sections */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
            border: 1px solid transparent;
            box-shadow: 
                var(--shadow-md),
                inset 0 0 0 1px var(--border-light); 
        }
        
        .game-info-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-lg),
                        inset 0 0 0 1px var(--border-light);
            border-color: var(--border-glow);
        }
        
        .content-header {
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .section-title {
            font-size: 2.2rem;
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            color: var(--accent-text); /* Changed from purple */
            font-family: var(--font-heading);
            /* text-shadow: 0 0 8px var(--accent-neon-blue); */
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-neon-blue), var(--accent-text)); /* Gradient from light to dark cyan */
            border-radius: 2px;
            box-shadow: 0 0 10px var(--accent-neon-blue);
        }
        .content-header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }
        
        .game-info-content {
            font-size: 1.05rem;
            line-height: 1.7;
            max-height: 200px; /* Initial folded height */
            overflow: hidden;
            position: relative;
            transition: max-height 0.5s ease-in-out; /* Smoother transition */
            color: var(--text-primary);
        }
        
        /* .game-info-content.expanded {
            max-height: 2000px;  Large enough for most content 
        }*/
        
        .info-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(to top, var(--primary-bg-end) 20%, transparent);
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .game-info-content.expanded + .info-gradient {
            opacity: 0;
        }
        
        .toggle-content {
            text-align: center;
            margin-top: 2rem;
        }
        
        /* .toggle-btn uses .btn styles, specific adjustments if needed */
        .toggle-btn {
           border-color: var(--accent-text); 
        }
        




        /* 游戏卡片网格容器 - 使用Flexbox布局 */
        .games-grid {
            display: flex; /* 启用Flexbox */
            flex-wrap: wrap; /* 允许项目换行 */
            gap: 2rem; /* 项目之间的间隙 */
            justify-content: center; /* 水平靠左对齐项目 */
            margin-bottom: 3rem; /* 与分页的间距 */
            width: 100%;
        }




        
        .share {
            display: flex;
            justify-content: space-between;

            gap: 1rem; 
            margin-top: 2rem; 
    
            /* flex-wrap: nowrap; */

            color: var(--text-secondary);
            font-size: 1.5rem;

            min-height: 1.5rem;
    
            
        }



        .share a {
            color: inherit; /* 关键！让 a 标签继承父元素的颜色 */
            text-decoration: none; /* 可选：去掉链接默认的下划线 */
        }





        #copy-link-btn {
            background: none; 
            border: none; 
            cursor: pointer; 
            padding: 0;

            /* --- 新增代码开始 --- */
            /* 1. 继承父容器(.share)的颜色，确保它和其它图标颜色一致 */
            color: inherit; 

            /* 2. 确保字体大小(即图标大小)也一致 */
            font-size: inherit; 
            /* --- 新增代码结束 --- */
        }

        /* (可选，但推荐) 为按钮也加上悬停效果，保持交互一致性 */
        #copy-link-btn:hover {
            opacity: 0.7; /* 和其它 a 标签的悬停效果一样 */
        }






                /* 卡片图片容器 */
        .card-image-wrapper {
            width: 100%;
            /* 使用 padding-top 技巧创建响应式宽高比容器 (例如 4:3 -> 75%) */
            aspect-ratio: 4 / 3; 
            position: relative; /* 用于绝对定位内部的img或placeholder */
            overflow: hidden; /* 裁剪图片放大效果 */
            background-color: var(--accent-text); /* 图片加载失败时的背景色 */
        }



        /* Holographic Tag */
        .card-image-wrapper.hot::after {
            content: 'HOT';
            position: absolute;
            top: 10px;
            right: -30px; 
            background: linear-gradient(135deg, #ff00ff, #00e0ff, #ffdd00, #ff007f); /* Rainbow gradient */
            color: white;
            font-family: var(--font-heading);
            padding: 4px 30px;
            font-size: 0.8rem;
            font-weight: bold;
            transform: rotate(45deg);
            transform-origin: top right;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 3;
            opacity: 0.9;
        }



    


         /* 卡片图片 */
        .card-image-wrapper img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片覆盖整个容器，可能会裁剪 */
            transition: transform 0.3s ease; /* 图片放大过渡效果 */
        }




        .game-card:hover {
            transform: scale(1.05); /* 悬停时图片轻微放大 */
        }


        
   
        
        .card-content {
            padding: 0.5em;

            display: flex;
            align-items: center;  /* 垂直居中 */
            justify-content: center;  /* 水平居中（可选） */
            
 



        }



        
        /* 卡片标题 */
        .card-title {
            font-size: 1.1rem; /* 列表页标题略小 */
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--accent-text);
            font-family: var(--font-heading);
            line-height: 1.3; /* 行高 */
            /* 防止过长标题破坏布局，使用省略号截断 */
            overflow: hidden;
            text-overflow: ellipsis;
           /* min-height: 2.6em;  确保至少有两行的高度，避免单行标题时高度不一致 */

        }
        









        




        /* 游戏列表页主内容容器 */
        main.games_list_page_main_section-container {
            flex: 1; /* 占据剩余垂直空间 */
            max-width: 1600px; /* 最大宽度限制 */
            width: 100%;
            margin: 2rem auto; /* 上下边距2rem，左右自动居中 */
            padding: 0 5%;   /* 左右内边距 */
        }

        /* 页面头部 (例如 "浏览我们的游戏" 标题区域) */
        .page-header {
            text-align: center; /* 文本居中 */
            margin-bottom: 3rem; /* 与下方内容的间距 */
            padding: 1.5rem; /* 内边距 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-glow);
        }

        /* 页面主标题 H1 */
        .page-title {
            font-size: 2.8rem; /* 标题字号 */
            color: var(--accent-text);
            font-family: var(--font-heading);
            /* text-shadow: 0 0 10px var(--accent-neon-blue);  文字辉光效果 */
            margin: 0; /* 移除默认外边距 */
        }
        





        /* 游戏卡片样式 */
        .game-card {
            text-decoration: none; /* 移除链接下划线 */
            color: inherit; /* 继承父元素文本颜色 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-md);
            overflow: hidden; /* 裁剪超出边界的内容 (例如图片放大效果) */
            transition: var(--transition);
            display: flex;
            flex-direction: column; /* 内容垂直排列 */
            height: 100%; /* 如果卡片内容高度不一，确保视觉上对齐 (通常与flex父容器配合) */
            position: relative;
            border: 1px solid transparent; /* 准备用于悬停时的边框辉光 */
            box-shadow: 
                var(--shadow-md), /* 主要阴影 */
                inset 0 0 0 1px var(--border-light), /* 内部亮边框，增加玻璃质感 */
                0 3px 0 0 var(--accent-neon-blue); /* 底部3px厚度高光 */
            
            /* Flex项目宽度控制: */
            width: 19%; 
            min-width: 123px; /* 卡片最小宽度，小于此宽度则换行,这个效果很大，甚至会忽视掉百分比的作用 */
            max-width: 400px; /* 卡片最大宽度 */
        }



        
        .game-card:hover {
            transform: translateY(-8px) scale(1.02); /* 向上浮动并轻微放大 */
            box-shadow: 
                var(--shadow-lg), /* 悬停时增强阴影 */
                inset 0 0 0 1px var(--border-light),
                0 5px 0 0 var(--accent-text); /* 底部厚度高光增强 */
            border-color: var(--border-glow); /* 边框显示辉光 */
        }
        




        


        /* 分页容器样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem 0;
            margin-top: 2rem;
            border-top: 1px solid var(--border-glow); /* 顶部加一条辉光分隔线 */
        }
        /* 分页列表 */
        .pagination {
            list-style: none; /* 移除默认列表样式 */
            padding: 0;
            margin: 0;
            display: flex; /* 水平排列 */
            gap: 0.5rem; /* 页码之间的间隙 */
        }
        /* 分页链接和当前页/禁用项的span */
        .pagination li a, .pagination li span {
            display: inline-block;
            padding: 0.6rem 1rem; /* 内边距 */
            border: 1px solid var(--border-glow);
            background-color: var(--glass-bg);
            backdrop-filter: blur(3px); /* 轻微模糊背景 */
            color: var(--accent-text);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: var(--transition);
            font-family: var(--font-heading);
            font-size: 0.9rem;
        }
        /* 分页链接悬停效果 */
        .pagination li a:hover {
            background-color: var(--accent-neon-blue);
            color: var(--text-primary);
            border-color: var(--accent-neon-blue);
            box-shadow: var(--shadow-sm);
        }
        /* 当前激活页码和禁用项的样式 */
        .pagination li.active span, .pagination li.disabled span {
            background-color: var(--accent-text);
            color: var(--primary-bg-start);
            border-color: var(--accent-text);
        }
        /* 禁用项的额外样式 */
        .pagination li.disabled span {
            opacity: 0.6; /* 半透明 */
            pointer-events: none; /* 不可点击 */
        }
        
        









        
        .site-footer {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(var(--glass-blur));
            color: var(--text-primary);
            padding: 4rem 2rem 2rem;
            margin-top: 5rem;
            border-top: 1px solid var(--border-glow);
        }
        
        .footer-content {
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
            color: var(--accent-text); /* Changed from purple */
            font-family: var(--font-heading);
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent-neon-blue);
            box-shadow: 0 0 8px var(--accent-neon-blue);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition);
            display: block;
            position: relative;
            padding-left: 0;
        }
        
        .footer-links a::before {
            content: '›';
            position: absolute;
            left: -15px;
            opacity: 0;
            transition: var(--transition);
            color: var(--accent-neon-blue);
        }
        
        .footer-links a:hover {
            color: var(--accent-text); /* Darker accent */
            transform: translateX(5px);
        }
        
        .footer-links a:hover::before {
            opacity: 1;
            left: -12px;
        }
        
        .copyright {
            text-align: center;
            padding-top: 3rem;
            opacity: 0.7;
            font-size: 0.9rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(0, 224, 255, 0.2);
        }


        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes subtleFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; /* 'both' to retain end state */
            opacity: 0; /* Start transparent for animation */
        }
        .animate-float {
            animation: subtleFloat 4s ease-in-out infinite;
        }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }

        /* Styles for Markdown generated content (from reference, adjusted colors) */
        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
            font-family: var(--font-heading);
            color: var(--accent-text);
            margin-top: 1.5em;
            margin-bottom: 0.5em;
        }
        .markdown-content h1 { font-size: 1.8em; }
        .markdown-content h2 { font-size: 1.5em; }
        .markdown-content h3 { font-size: 1.2em; }
        .markdown-content p { margin-bottom: 1em; }
        .markdown-content ul, .markdown-content ol { margin-left: 2em; margin-bottom: 1em; }
        .markdown-content code {
            background-color: rgba(0, 224, 255, 0.1);
            padding: 0.2em 0.4em;
            border-radius: var(--radius-sm);
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9em;
            border: 1px solid rgba(0, 224, 255, 0.2);
            color: var(--accent-text);
        }
        .markdown-content pre {
            background-color: rgba(10, 20, 40, 0.03);
            border: 1px solid rgba(0, 224, 255, 0.2);
            padding: 1em;
            border-radius: var(--radius-md);
            overflow-x: auto;
            margin-bottom: 1em;
        }
        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
            border: none;
            font-size: 0.95em;
            color: var(--text-primary); /* Text color for code inside pre */
        }
        .markdown-content blockquote {
            border-left: 4px solid var(--accent-neon-blue);
            padding-left: 1em;
            margin-left: 0;
            margin-bottom: 1em;
            font-style: italic;
            color: var(--text-secondary);
        }
        .markdown-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1em;
            box-shadow: var(--shadow-sm);
        }
        .markdown-content th, .markdown-content td {
            border: 1px solid rgba(0, 224, 255, 0.2);
            padding: 0.5em 0.8em;
            text-align: left;
        }
        .markdown-content th {
            background-color: rgba(0, 224, 255, 0.05);
            font-family: var(--font-heading);
            font-weight: 600;
        }
        









        
        /* --- 文章详情页主内容区 --- */
        main.article-page-main-container {
            flex: 1; max-width: 1200px; /* 文章内容区可以窄一些 */
            width: 100%; margin: 2rem auto; padding: 0 3%;
        }

        .article-header-card { /* 文章标题和简短描述的卡片 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
            margin-bottom: 2.5rem;
            border: 1px solid transparent;
            transition: var(--transition);
        }
        .article-header-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-light);
            border-color: var(--border-glow);
        }

        .article-title-main { /* H1 标题 */
            font-size: 2.8rem; font-weight: 700; margin: 0 0 1rem 0;
            color: var(--accent-text); font-family: var(--font-heading);
            /* text-shadow: 0 1px 3px rgba(0,0,0,0.1); */
        }

        .article-short-description { /* 简短描述 */
            font-size: 1.2rem; color: var(--text-secondary);
            max-width: 800px; margin-bottom: 1.5rem;
        }
        
        .article-meta-info { /* 文章元信息：发布日期、评分等 */
            display: flex; flex-wrap: wrap; gap: 1.5rem;
            align-items: center; color: var(--text-secondary);
            font-size: 0.9rem; margin-bottom: 2rem;
            padding-bottom: 1rem; border-bottom: 1px solid var(--border-glow);
        }
        .article-meta-info span { display: flex; align-items: center; gap: 0.5rem; }
        .article-meta-info i { color: var(--accent-neon-blue); }

        .article-content-card { /* 文章正文的卡片 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
        }
        
        /* Markdown 内容样式 (与game页面一致，但针对文章调整) */
        .markdown-content-article-detail { font-size: 1.1rem; line-height: 1.8; color: var(--text-primary); }
        .markdown-content-article-detail h1, .markdown-content-article-detail h2, .markdown-content-article-detail h3, 
        .markdown-content-article-detail h4, .markdown-content-article-detail h5, .markdown-content-article-detail h6 {
            font-family: var(--font-heading); color: var(--accent-text);
            margin-top: 1.8em; margin-bottom: 0.8em; line-height: 1.3;
        }
        .markdown-content-article-detail h1 { font-size: 2em; } /* 通常页面只有一个H1，即 .article-title-main */
        .markdown-content-article-detail h2 { font-size: 1.7em; border-bottom: 1px solid var(--border-glow); padding-bottom: 0.3em; }
        .markdown-content-article-detail h3 { font-size: 1.4em; }
        .markdown-content-article-detail h4 { font-size: 1.2em; }
        .markdown-content-article-detail p { margin-bottom: 1.2em; }
        .markdown-content-article-detail ul, .markdown-content-article-detail ol { margin-left: 2em; margin-bottom: 1.2em; }
        .markdown-content-article-detail li { margin-bottom: 0.5em; }
        .markdown-content-article-detail a { color: var(--accent-neon-blue); text-decoration: none; transition: var(--transition); }
        .markdown-content-article-detail a:hover { color: var(--accent-text); text-decoration: underline; }
    
        .markdown-content-article-detail img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1em 0; box-shadow: var(--shadow-sm); }

        .markdown-content-article-detail code { background-color: rgba(0, 224, 255, 0.1); padding: 0.2em 0.4em; border-radius: var(--radius-sm); font-family: 'Courier New', Courier, monospace; font-size: 0.9em; border: 1px solid rgba(0, 224, 255, 0.2); color: var(--accent-text); }
        .markdown-content-article-detail pre { background-color: rgba(10, 20, 40, 0.03); border: 1px solid rgba(0, 224, 255, 0.2); padding: 1em; border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 1em; }
        .markdown-content-article-detail pre code { background-color: transparent; padding: 0; border: none; font-size: 0.95em; color: var(--text-primary); }
        .markdown-content-article-detail blockquote { border-left: 4px solid var(--accent-neon-blue); padding-left: 1em; margin-left: 0; margin-bottom: 1em; font-style: italic; color: var(--text-secondary); }
        .markdown-content-article-detail table { width: 100%; border-collapse: collapse; margin-bottom: 1em; box-shadow: var(--shadow-sm); }
        .markdown-content-article-detail th, .markdown-content-article-detail td { border: 1px solid rgba(0, 224, 255, 0.2); padding: 0.5em 0.8em; text-align: left; }
        .markdown-content-article-detail th { background-color: rgba(0, 224, 255, 0.05); font-family: var(--font-heading); font-weight: 600; }















        /* 文章列表容器 */
        .articles-list-container {
            display: flex;
            flex-direction: column; /* 垂直排列文章项 */
            gap: 2rem; /* 文章项之间的间隙 */
            margin-bottom: 3rem;
  
        }

        .article-list-item { /* 单个文章项的卡片 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg); /* 更大的圆角 */
            padding: 2rem; /* 内边距 */
            box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
            border: 1px solid transparent;
            transition: var(--transition);
            text-decoration: none; /* 移除链接的下划线 */
            color: inherit; /* 继承文本颜色 */
            display: block; /* 使整个卡片可点击 */
        }
        .article-list-item:hover {
            transform: translateY(-6px) scale(1.01); /* 悬停效果 */
            box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-light);
            border-color: var(--border-glow);
        }
        .article-item-title { /* 文章项标题 (H2) */
            font-family: var(--font-heading);
            font-size: 1.8rem;
            color: var(--accent-text);
            margin: 0 0 0.75rem 0;
            line-height: 1.3;
        }
        .article-item-description { /* 文章项简短描述 */
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.6;
            /* 限制描述显示行数 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 最多显示3行 */
            -webkit-box-orient: vertical;
            margin-bottom: 1rem;
        }
        .article-item-meta { /* 文章项元信息 (日期, 评分等) */
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1.5rem; /* 行间隙 列间隙 */
            align-items: center;
            border-top: 1px solid rgba(0, 224, 255, 0.2);
            padding-top: 1rem;
            margin-top: auto; /* 将元信息推到底部 */
        }
        .article-item-meta span { display: flex; align-items: center; gap: 0.4rem; }
        .article-item-meta i { color: var(--accent-neon-blue); font-size: 0.9em; }

        /* 分页样式 (与game页面一致) */
        
        .pagination-container { display: flex; justify-content: center; align-items: center; padding: 2rem 0; margin-top: 2rem; border-top: 1px solid var(--border-glow); }
        .pagination { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; }
        .pagination li a, .pagination li span { display: inline-block; padding: 0.6rem 1rem; border: 1px solid var(--border-glow); background-color: var(--glass-bg); backdrop-filter: blur(3px); color: var(--accent-text); text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition); font-family: var(--font-heading); font-size: 0.9rem; }
        .pagination li a:hover { background-color: var(--accent-neon-blue); color: var(--text-primary); border-color: var(--accent-neon-blue); box-shadow: var(--shadow-sm); }
        .pagination li.active span, .pagination li.disabled span { background-color: var(--accent-text); color: var(--primary-bg-start); border-color: var(--accent-text); }
        .pagination li.disabled span { opacity: 0.6; pointer-events: none; }





    .list-item-visual-image{
        float:left;
        width:23%;
        border-radius:50%;
        border:2px solid var(--accent-neon-blue);

    }







        .page-card { /* 页面标题和内容的统一卡片 */
            background: var(--glass-bg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light);
            margin-bottom: 2.5rem;
            border: 1px solid transparent;
            transition: var(--transition);
        }
         .page-card:hover { /* 可选的悬停效果 */
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-light);
            border-color: var(--border-glow);
        }







        /* 响应式调整 - 根据屏幕宽度调整卡片每行数量 */
        @media (max-width: 1200px) { /* 大屏幕，例如一行5个卡片 */

            .game-featured-player { height: 60vh; }
            .game-container { padding: 0 4%; }


            /* 游戏卡片样式一行5个  .game-card 保持和桌面版一样不变*/

        }


        @media (max-width: 992px) { /* 平板，例如一行4个卡片 */

            .game-player-overlay { flex-direction:row; align-items: flex-start; }
            .game-title-main { font-size: 2rem; }
            .game-container { padding: 0 3%; }


            /* 游戏卡片样式 */
            .game-card {

            /* Flex项目宽度控制:，这里控制一行排列几个*/
            /* 最大最小尺寸不用改，已经在桌面版定义过了，通用。: */
                width: 23%; 
            }

            /* .game-card { width: calc(33.333% - 1.33rem); 2rem gap * 2 / 3 = 1.33rem }*/ 
            .page-title {font-size: 2.4rem;} /* 调整页面标题大小 */



            .article-title-main { font-size: 2.2rem; }
            main.container { padding: 0 2%; max-width: 95%;}
        }


        @media (max-width: 768px) { /* 小平板/大手机，例如一行3个卡片 */

            .game-presentation-area { margin-bottom: 2rem; }
            .game-featured-player { height: 50vh; }
            .game-info-card, .game-primary-info-card { padding: 1.8rem; }

            .section-title { font-size: 1.8rem; }
            .game-container { padding: 0 2rem; }
            .nav-menu { justify-content: space-around; }

            /*  当屏幕宽度小于等于 768px 时，这条规则会生效。*/
            .site-header {
                /*
                * 关键修改！将 position 从 sticky 改为 static。
                * static 是 position 的默认值，它会取消元素的“粘性”或“固定”定位特性，
                * 使其恢复为普通块级元素，跟随页面内容一起正常滚动。小屏幕导航栏不再固定。
                */
                position: static; 
            }

            /* 游戏卡片样式 */
            .game-card {

            /* Flex项目宽度控制:，这里控制一行排列几个*/
            /* 最大最小尺寸不用改，已经在桌面版定义过了，通用。: */
                width: 31%; 
            }

           /*  .game-card { width: calc(50% - 1rem); 2rem gap * 1 / 2 = 1rem  }*/
            .page-title {font-size: 2rem;} /* 进一步调整页面标题大小 */
            main.games_list_page_main_section-container {padding: 0 2%;} /* 调整主内容区内边距 */




            .article-title-main { font-size: 1.8rem; }
            .article-header-card, .article-content-card { padding: 1.8rem; }
            .markdown-content-article-detail { font-size: 1rem; }




            .article-item-title {font-size: 1.5rem;}
            .article-list-item {padding: 1.5rem;}
            main.article-page-main-container { padding: 0 2%; max-width: 95%;}



            .page-card { padding: 1.8rem; }

        }


        @media (max-width: 576px) { /* 手机，一行2个卡片 */


            .top-bar { padding: 1rem; flex-direction: row; gap: 1rem; }
            .game-featured-player { height: 45vh; }
            .game-title-main { font-size: 1.8rem; }
            .game-short-description { font-size: 1rem; }

            .game-info-card, .game-primary-info-card { padding: 1.5rem; }
            .nav-menu { gap: 0.5rem; padding: 0.5rem 0; }
            .nav-link { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
            .logo { font-size: 1.5rem; }
            .footer-content { grid-template-columns: 1fr; }



            /* 游戏卡片样式 */
            .game-card {

            /* Flex项目宽度控制:，这里控制一行排列几个*/
            /* 最大最小尺寸不用改，已经在桌面版定义过了，通用。: */
            width: 45%; 
    
            }


            .rating-container {
                display: none;
        
            }

        }





    @media (max-width:320px) {


        

            .site-header{
                display: flex;
                flex-wrap: wrap;
            }

            .share {
                display: flex;
                flex-wrap: wrap;
                    /* 在小屏幕上，让图标靠左对齐，看起来更整齐 */
                justify-content: flex-start; 

                /* 减小字体（图标）大小 */
                font-size: 1.3rem; 
    
                /* 同时也减小间距，保持视觉和谐 */
                gap: 0.8rem; 

                /* 相应地调整最小高度 */
                min-height: 1.3rem;
            }


    





        .logo {
        /* 
         * 强制断词：这是最关键的修复。
         * 它告诉浏览器，如果一个单词太长导致要溢出，
         * 可以从任何一个字母处强行把它切断换行。
        */
        word-break: break-all;

        /* 
         * （可选，但推荐）这是一个强大的 Flexbox 技巧。
         * 它允许 .logo 这个 flex item 本身收缩到比其内容
         * （那个长单词）更小的尺寸，进一步防止溢出。
        */
        min-width: 0;
    }

    /* --- ↑↑↑ 修复代码结束 ↑↑↑ --- */





        /* --- ↓↓↓ 这是您需要添加的针对按钮辉光效果的修复代码 ↓↓↓ --- */
    
    /* 
      在小屏幕上，减小按钮在悬停和激活状态下辉光伪元素的尺寸，
      防止它溢出并撑开页面。100% 的尺寸会使它正好
      包裹住按钮本身，不会超出。
    */
    .btn:hover::before,
    .btn:active::before {
        width: 100%;
        height: 100%;
    }

    /* --- ↑↑↑ 修复代码结束 ↑↑↑ --- */





        html {
        /* 将基础字体大小设为 14px (14 / 16 = 87.5%) */
        /* 在手机上，字体可以再小一点，以容纳更多内容 */
        font-size: 81%;
        word-break: break-all;
    }




    .btn {
        /* 
         * 强制断词：告诉浏览器，如果一个单词太长导致要溢出，
         * 可以从任何一个字母处强行把它切断换行。
         * 这是解决这个问题的核心。
        */
        word-break: break-all;

        /* 
         * (可选，但推荐) 这是一个强大的 Flexbox 技巧，
         * 允许 .btn 这个 flex item 本身收缩到比其内容
         * 更小的尺寸，进一步防止溢出。
        */
        min-width: 0;
    }




        /* --- ↓↓↓ 这是您需要添加的针对按钮辉光效果的修复代码 ↓↓↓ --- */
    
    /* 
      在小屏幕上，减小按钮在悬停和激活状态下辉光伪元素的尺寸，
      防止它溢出并撑开页面。100% 的尺寸会使它正好
      包裹住按钮本身，不会超出。
    */
    .btn:hover::before,
    .btn:active::before {
        width: 100%;
        height: 100%;
    }

    /* --- ↑↑↑ 修复代码结束 ↑↑↑ --- */




    .language-selector-container {
        display: none;

    }



    }