/* ============================================
   赛博朋克电竞风 - 精品推荐标题区样式
   
   设计理念：
   霓虹发光标题 + 流光装饰线 + 圆形箭头按钮
   
   本文件包含：
   1. 推荐区域整体布局
   2. 左右箭头按钮
   3. 推荐标题（渐变文字+呼吸发光）
   4. 标题两侧装饰线
   5. 响应式适配（768px）
   ============================================ */


/* =====================================================================
   第1部分：推荐区域整体布局
   
   Flex居中布局，最大宽度1200px居中。
   gap:50px 控制箭头与标题间距。
   上下margin：60px（与上方卡片区间距）/ 40px（与下方列表区间距）。
   ===================================================================== */
.新游推荐区域 {
    display: flex; justify-content: center; align-items: center;
    margin: 60px auto 40px; width: 1200px; max-width: 100%;
    box-sizing: border-box; gap: 50px; position: relative; padding: 0 20px;
}


/* =====================================================================
   第2部分：左右箭头按钮
   
   38px圆形按钮，暗色背景+霓虹蓝边框。
   悬浮时：
   - 添加霓虹蓝drop-shadow发光
   - 放大15%
   - 边框变亮
   
   内部箭头图标：
   - 使用filter:brightness(0) invert(1)将图标变白
   - 叠加drop-shadow实现霓虹蓝发光
   ===================================================================== */
.推荐箭头 {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease;
    width: 38px; height: 38px; border-radius: 50%;            /* 38px圆形 */
    background: var(--bg-card); border: 1px solid var(--border-dim); flex-shrink: 0;  /* 暗色背景+霓虹蓝边框 */
}

.推荐箭头:hover {
    filter: drop-shadow(0 0 8px var(--neon-blue));             /* 悬浮霓虹蓝发光 */
    transform: scale(1.15); border-color: var(--border-glow);  /* 放大15%+边框变亮 */
}

.推荐箭头 img {
    width: auto; height: auto; max-height: 14px; object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 4px var(--neon-blue));  /* 图标变白+蓝光 */
}


/* =====================================================================
   第3部分：推荐标题（渐变文字+呼吸发光）
   
   文字本身设为transparent，通过background渐变+
   -webkit-background-clip:text 实现蓝紫渐变文字效果。
   配合textGlow关键帧动画实现呼吸式发光。
   28px超大字号，900超粗字重，3px字间距。
   ===================================================================== */
.推荐标题 {
    font-size: 28px; font-weight: 900;
    color: transparent; background: var(--gradient-main);       /* 透明文字+蓝紫渐变背景 */
    -webkit-background-clip: text; background-clip: text;       /* 渐变裁剪到文字 */
    white-space: nowrap; letter-spacing: 3px; position: relative;
    animation: textGlow 3s ease-in-out infinite;                 /* 呼吸发光动画 */
}


/* =====================================================================
   第4部分：标题两侧装饰线
   
   通过::before和::after伪元素在标题左右各画一条60px渐变线。
   绝对定位在标题垂直中心，opacity:0.4半透明。
   左侧线：right:calc(100% + 25px)（标题左边25px处）
   右侧线：left:calc(100% + 25px)（标题右边25px处）
   ===================================================================== */
.推荐标题::before, .推荐标题::after {
    content: ''; position: absolute; top: 50%;
    width: 60px; height: 1px; background: var(--gradient-main); opacity: 0.4;  /* 蓝紫渐变装饰线 */
}
.推荐标题::before { right: calc(100% + 25px); }   /* 左侧装饰线 */
.推荐标题::after { left: calc(100% + 25px); }     /* 右侧装饰线 */


/* =====================================================================
   第5部分：响应式适配
   
   768px以下：
   - 区域间距缩小到28px
   - 标题字号缩小到20px，字间距2px
   - 装饰线缩短到30px
   - 装饰线与标题间距缩小到15px
   ===================================================================== */
@media (max-width: 768px) {
    .新游推荐区域 { gap: 28px; }
    .推荐标题 { font-size: 20px; letter-spacing: 2px; }
    .推荐标题::before, .推荐标题::after { width: 30px; }
    .推荐标题::before { right: calc(100% + 15px); }
    .推荐标题::after { left: calc(100% + 15px); }
}