/* ============================================
   赛博朋克电竞风 - 游戏列表卡片样式
   
   设计理念：
   悬浮发光 + 三色按钮(蓝/紫/橙红) + 流光边框
   自适应布局：4列 → 3列 → 2列 → 1列
   
   本文件包含：
   1. 列表区域容器
   2. 游戏行分组（display:contents）
   3. 游戏项卡片
   4. 顶部流光条
   5. 选中/悬浮状态
   6. 空白占位卡片
   7. 游戏图片区（含底部渐变遮罩）
   8. 游戏名称与分类标签
   9. 版本介绍文字
   10. 三色按钮组（蓝/紫/火焰）
   11. 响应式适配（4级断点）
   ============================================ */


/* =====================================================================
   第1部分：列表区域容器
   
   最大宽度1200px居中，flex-wrap布局。
   gap:20px 控制卡片间距，padding防止贴边。
   ===================================================================== */
.游戏列表区域 {
    margin: 20px auto; width: 1200px; max-width: 100%;
    box-sizing: border-box; padding: 0 20px;
    display: flex; flex-wrap: wrap; gap: 20px;
}


/* =====================================================================
   第2部分：游戏行分组（display:contents）
   
   JS按4个一组生成游戏行，用display:contents
   让行分组容器在布局中"透明化"，子元素直接
   参与外层flex布局，实现自动换行。
   ===================================================================== */
.游戏行 {
    display: contents;
}


/* =====================================================================
   第3部分：游戏项卡片
   
   25%宽度（4列），暗色背景+16px圆角+霓虹蓝边框。
   纵向flex布局：图片→名称标签→版本介绍→按钮组。
   overflow:hidden 裁剪流光条溢出。
   position:relative 为内部绝对定位元素提供参考。
   ===================================================================== */
.游戏项 {
    width: calc(25% - 15px); min-width: 0;
    background: var(--bg-card); border-radius: 16px;           /* 暗色背景+大圆角 */
    border: 1px solid var(--border-dim);                        /* 霓虹蓝半透明边框 */
    box-shadow: var(--card-shadow);                              /* 默认卡片阴影 */
    overflow: hidden; display: flex; flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer; position: relative;
}

/* ===== 响应式：3列 ===== */
@media (max-width: 1024px) {
    .游戏项 { width: calc(33.333% - 14px); }
}

/* ===== 响应式：2列 ===== */
@media (max-width: 768px) {
    .游戏项 { width: calc(50% - 10px); }
    .游戏图片 { height: 140px; }
}

/* ===== 响应式：1列 ===== */
@media (max-width: 480px) {
    .游戏列表区域 { padding: 0 12px; gap: 14px; }
    .游戏项 { width: 100%; }
    .游戏图片 { height: 180px; }
    .游戏按钮组 { gap: 4px; padding: 8px 12px 12px; }
    .游戏按钮 { font-size: 11px; letter-spacing: 0; height: 28px; line-height: 28px; }
}


/* =====================================================================
   第4部分：顶部流光条（::before伪元素）
   
   与快捷卡片类似，2px高的蓝紫渐变条，
   默认隐藏（opacity:0），悬浮时显示并播放borderFlow动画。
   z-index:5 确保在图片之上。
   ===================================================================== */
.游戏项::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: var(--gradient-main);              /* 主蓝紫渐变 */
    background-size: 200% 100%;
    opacity: 0; transition: opacity 0.4s ease; z-index: 5;
}

.游戏项:hover::before {
    opacity: 1; animation: borderFlow 2s linear infinite;       /* 悬浮显示+流光动画 */
}


/* =====================================================================
   第5部分：选中/悬浮状态
   
   选中态(.selected)：霓虹蓝边框+蓝光投影+上移6px
   悬浮态(hover)：发光边框+蓝光+深层阴影+上移6px+背景变亮
   ===================================================================== */
.游戏项链接 {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; display: block; text-decoration: none;          /* 全卡可点击覆盖层 */
}

.游戏按钮组 { position: relative; z-index: 2; }                /* 按钮组在链接层之上，可点击 */
.游戏按钮 { position: relative; z-index: 2; }

.游戏项.selected {
    border-color: var(--neon-blue);                              /* 选中：霓虹蓝边框 */
    box-shadow: var(--glow-blue); transform: translateY(-6px);  /* 选中：蓝光投影+上移6px */
}

.游戏项:hover {
    border-color: var(--border-glow);                            /* 悬浮：发光边框 */
    box-shadow: var(--glow-blue), var(--hover-shadow);           /* 悬浮：蓝光+深层阴影 */
    transform: translateY(-6px); background: var(--bg-card-hover);  /* 悬浮：上移6px+背景变亮 */
}


/* =====================================================================
   第6部分：空白占位卡片
   
   当游戏项不足4个时，用空白占位填满行，
   透明背景+虚线边框，不可交互。
   ===================================================================== */
.游戏项.empty-slot {
    background: transparent; box-shadow: none;
    border: 1px dashed var(--border-subtle); visibility: visible;  /* 虚线边框占位 */
}
.游戏项.empty-slot:hover { transform: none; box-shadow: none; }
.游戏项.empty-slot::before { display: none; }


/* =====================================================================
   第7部分：游戏图片区（含底部渐变遮罩）
   
   图片区固定高度180px，overflow:hidden裁剪。
   ::after伪元素在底部叠加40px渐变遮罩，
   从卡片背景色渐变到透明，使图片与下方内容自然过渡。
   ===================================================================== */
.游戏图片 { width: 100%; height: 180px; overflow: hidden; position: relative; }

.游戏图片::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 40px;
    background: linear-gradient(to top, var(--bg-card), transparent); z-index: 1;  /* 底部渐变遮罩 */
}

.游戏图片 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.游戏图片 img:hover { transform: scale(1.06); }               /* 悬浮微放大6% */


/* =====================================================================
   第8部分：游戏名称与分类标签
   
   名称标签容器：flex布局，名称居左，分类标签居右。
   底部1px霓虹蓝分隔线（border-inner）。
   
   名称：15px加粗，主文字色
   分类：11px，霓虹蓝色，圆角胶囊标签样式
   ===================================================================== */
.游戏名称标签容器 {
    display: flex; justify-content: space-between; align-items: center;
    margin: 12px 16px 6px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-inner);               /* 霓虹蓝分隔线 */
}

.游戏名称 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: 0.5px; }

.游戏分类 {
    margin: 0; font-size: 11px; color: var(--neon-blue);        /* 霓虹蓝色标签文字 */
    background: var(--tag-bg); padding: 2px 8px;                /* 极淡蓝背景 */
    border-radius: 10px; border: 1px solid var(--tag-border);   /* 胶囊圆角+霓虹蓝边框 */
}


/* =====================================================================
   第9部分：版本介绍文字
   
   单行显示（height:34px, line-height:200%），超出隐藏。
   弱化文字色（text-muted），底部极淡分隔线。
   ===================================================================== */
.版本介绍 {
    padding-left: 16px; padding-right: 16px; height: 34px;
    line-height: 200%; overflow: hidden; font-size: 12px;
    color: var(--text-muted); border-bottom: 1px solid var(--border-subtle);  /* 弱化文字+极淡分隔线 */
}


/* =====================================================================
   第10部分：三色按钮组（蓝/紫/火焰）
   
   按钮组：flex布局，gap:6px，弹性宽度flex:1自适应填满。
   每个按钮：30px高度，6px圆角，12px字号，1px字间距。
   
   三种按钮颜色区分：
   - 版本下载：霓虹蓝系（蓝色背景+蓝色文字+蓝色边框）
   - 游戏攻略：霓虹紫系（紫色背景+紫色文字+紫色边框）
   - 进入网站：火焰橙粉渐变（全宽渐变背景+白色文字+无边框）
   ===================================================================== */
.游戏按钮组 { display: flex; gap: 6px; padding: 10px 16px 14px; }

/* 游戏按钮通用样式 */
.游戏按钮 {
    flex: 1; min-width: 0; height: 30px; line-height: 30px;
    text-align: center; font-size: 12px; font-weight: 600;
    margin-top: 0; text-decoration: none; border-radius: 6px;
    border: none; letter-spacing: 1px; cursor: pointer;
    transition: all 0.3s ease; white-space: nowrap;
}

/* ====== 版本下载 - 霓虹蓝 ====== */
.版本下载 {
    background: var(--btn-blue-bg);                              /* 极淡蓝背景 */
    color: var(--neon-blue);                                     /* 霓虹蓝文字 */
    border: 1px solid var(--btn-blue-border);                    /* 霓虹蓝边框 */
}

.版本下载:hover {
    background: var(--btn-blue-hover-bg);                        /* 悬浮：稍亮蓝背景 */
    box-shadow: var(--btn-blue-hover-glow);                      /* 悬浮：蓝色发光 */
    color: var(--btn-hover-text);                                /* 悬浮：白色文字 */
}

/* ====== 游戏攻略 - 霓虹紫 ====== */
.游戏攻略 {
    background: var(--btn-purple-bg);                            /* 极淡紫背景 */
    color: var(--neon-purple);                                   /* 霓虹紫文字 */
    border: 1px solid var(--btn-purple-border);                  /* 霓虹紫边框 */
}

.游戏攻略:hover {
    background: var(--btn-purple-hover-bg);                      /* 悬浮：稍亮紫背景 */
    box-shadow: var(--btn-purple-hover-glow);                    /* 悬浮：紫色发光 */
    color: var(--btn-hover-text);                                /* 悬浮：白色文字 */
}

/* ====== 进入网站 - 火焰橙粉渐变 ====== */
.进入网站 {
    background: var(--gradient-fire);                            /* 火焰橙粉渐变背景 */
    background-size: 200% 100%;
    color: var(--btn-hover-text);                                /* 白色文字 */
    border: none;
}

.进入网站:hover {
    box-shadow: var(--btn-fire-glow);                            /* 悬浮：火焰色发光 */
    animation: borderFlow 2s linear infinite;                    /* 悬浮：流光动画 */
}