/* ============================================
   赛博朋克电竞风 - 全局基础样式
   
   设计理念：
   深黑底色 + 霓虹蓝紫光效 + 流光动画
   所有颜色值统一定义在 :root 变量中，
   :root 外零硬编码颜色，全部使用 var() 引用，
   便于一键切换整套主题风格。
   
   本文件包含：
   1. CSS自定义属性（:root变量区）
   2. 全局重置与基础排版
   3. 网格背景纹理
   4. 选中文字高亮
   5. 滚动条美化
   6. 链接全局样式
   7. 弹出层圆角
   8. 关键帧动画定义
   9. Layui暗色主题覆盖
   ============================================ */


/* =====================================================================
   第1部分：CSS自定义属性（:root变量区）
   
   说明：所有颜色、渐变、阴影、边框等视觉属性均在此统一定义。
   切换风格时只需替换此区块即可，:root外无需改动。
   每个变量后方括号内为中文用途说明。
   ===================================================================== */
:root {
    /* ----- 核心霓虹色 ----- */
    --neon-blue: #00f0ff;              /* 霓虹蓝，主色调，用于链接/边框/发光等 */
    --neon-purple: #b000ff;            /* 霓虹紫，副色调，用于渐变/按钮等 */
    --neon-pink: #ff00aa;              /* 火焰粉，用于火焰渐变终点色 */
    --neon-green: #00ff88;             /* 科技绿，用于冷色渐变 */
    --neon-orange: #ff6a00;            /* 火焰橙，用于火焰渐变起点色 */

    /* ----- 渐变定义 ----- */
    --gradient-main: linear-gradient(135deg, #00f0ff, #b000ff);          /* 主蓝紫渐变，用于标题/流光条/Logo等 */
    --gradient-fire: linear-gradient(135deg, #ff6a00, #ff00aa);          /* 火焰橙粉渐变，用于"进入网站"按钮 */
    --gradient-cool: linear-gradient(135deg, #00f0ff, #00ff88);          /* 冷色蓝绿渐变（备用） */
    --gradient-card: linear-gradient(145deg, rgba(0, 240, 255, 0.08), rgba(176, 0, 255, 0.08));  /* 卡片内微渐变（备用） */

    /* ----- 背景色 ----- */
    --bg-primary: #111833;             /* 页面主背景色，深蓝黑 */
    --bg-secondary: #182040;           /* 页面次级背景色，较浅深蓝（备用） */
    --bg-card: rgba(28, 38, 80, 0.95); /* 卡片背景色，半透明深蓝 */
    --bg-card-hover: rgba(38, 52, 100, 0.98); /* 卡片悬浮背景色，较亮半透明深蓝 */
    --bg-glass: rgba(255, 255, 255, 0.04);    /* 玻璃态微白叠加层（备用） */

    /* ----- 边框色 ----- */
    --border-dim: rgba(0, 240, 255, 0.25);     /* 常规边框，霓虹蓝低透明度 */
    --border-glow: rgba(0, 240, 255, 0.45);    /* 发光边框，霓虹蓝中透明度（悬浮态） */
    --border-purple: rgba(176, 0, 255, 0.3);   /* 紫色边框（备用） */

    /* ----- 阴影/发光 ----- */
    --glow-blue: 0 0 15px rgba(0, 240, 255, 0.3), 0 0 30px rgba(0, 240, 255, 0.1);       /* 霓虹蓝双层发光 */
    --glow-purple: 0 0 15px rgba(176, 0, 255, 0.3), 0 0 30px rgba(176, 0, 255, 0.1);     /* 霓虹紫双层发光 */
    --glow-fire: 0 0 15px rgba(255, 106, 0, 0.3), 0 0 30px rgba(255, 0, 170, 0.1);       /* 火焰色双层发光 */

    /* ----- 文字色 ----- */
    --text-primary: #e0e6ff;           /* 主要文字色，浅蓝白 */
    --text-secondary: #7b8ab8;         /* 次要文字色，中蓝灰 */
    --text-muted: #4a5580;             /* 弱化文字色，深蓝灰（版本介绍/底部信息等） */

    /* ----- 布局变量 ----- */
    --nav-height: 70px;                /* 导航栏高度，全局统一基准 */

    /* ===== 风格扩展变量（切换风格时一并覆盖） ===== */

    /* ----- 网格/背景细节 ----- */
    --grid-line: rgba(0, 240, 255, 0.025);           /* 网格线颜色，极淡蓝 */
    --bg-subtle: rgba(0, 240, 255, 0.03);             /* 微妙背景色，用于快捷图片区等 */
    --bg-input: rgba(0, 240, 255, 0.05);              /* 输入框背景色 */

    /* ----- 导航栏专用 ----- */
    --bg-nav: rgba(11, 16, 40, 0.85);                 /* 导航栏背景，半透明深黑蓝 */
    --bg-nav-scrolled: rgba(11, 16, 40, 0.95);        /* 导航栏滚动后背景，更不透明 */
    --border-nav: rgba(0, 240, 255, 0.1);             /* 导航栏底部边框线 */
    --shadow-nav: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 240, 255, 0.08);  /* 导航栏阴影 */

    /* ----- 底部专用 ----- */
    --bg-footer-end: #080c1e;                          /* 底部渐变终点色，极深蓝黑 */

    /* ----- 卡片/列表内部 ----- */
    --border-inner: rgba(0, 240, 255, 0.1);           /* 卡片内部分隔线（游戏名与分类间） */
    --border-subtle: rgba(0, 240, 255, 0.05);         /* 极淡边框（空白占位/快捷图片区） */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 240, 255, 0.15);   /* 卡片默认阴影 */

    /* ----- 文字高亮/链接 ----- */
    --text-link-hover: #fff;                           /* 链接悬浮色，纯白 */
    --text-heading: #fff;                              /* 标题文字色，纯白 */

    /* ----- 选中文字 ----- */
    --selection-bg: rgba(0, 240, 255, 0.25);          /* 选中背景色，霓虹蓝半透明 */
    --selection-text: #fff;                            /* 选中文字色，纯白 */

    /* ----- 按钮通用 ----- */
    --btn-primary-text: #05060f;                       /* 主按钮文字色，极深黑（渐变背景上使用） */
    --btn-glow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(176, 0, 255, 0.3);   /* 主按钮发光效果 */
    --btn-hover-text: #fff;                            /* 按钮悬浮文字色，纯白 */

    /* ----- Logo专用 ----- */
    --logo-shadow: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));          /* Logo默认霓虹光晕 */
    --logo-shadow-hover: drop-shadow(0 0 15px rgba(0, 240, 255, 0.7));   /* Logo悬浮增强光晕 */
    --logo-text-glow: 0 0 12px rgba(0, 240, 255, 0.5);                   /* Logo文字降级发光 */

    /* ----- 导航项悬浮 ----- */
    --nav-hover-shadow: 0 0 10px rgba(0, 240, 255, 0.5);                /* 导航菜单项悬浮发光阴影 */

    /* ----- 底部链接 ----- */
    --footer-link-shadow: 0 0 8px rgba(0, 240, 255, 0.4);               /* 底部链接悬浮发光 */

    /* ----- 横幅扫描光 ----- */
    --scan-color-a: rgba(0, 240, 255, 0.04);          /* 横幅扫描光色A，极淡蓝 */
    --scan-color-b: rgba(176, 0, 255, 0.03);          /* 横幅扫描光色B，极淡紫 */

    /* ----- 蓝色按钮（版本下载） ----- */
    --btn-blue-bg: rgba(0, 240, 255, 0.12);           /* 蓝色按钮默认背景 */
    --btn-blue-border: rgba(0, 240, 255, 0.2);        /* 蓝色按钮默认边框 */
    --btn-blue-hover-bg: rgba(0, 240, 255, 0.2);      /* 蓝色按钮悬浮背景 */
    --btn-blue-hover-glow: 0 0 12px rgba(0, 240, 255, 0.3);  /* 蓝色按钮悬浮发光 */

    /* ----- 紫色按钮（游戏攻略） ----- */
    --btn-purple-bg: rgba(176, 0, 255, 0.12);         /* 紫色按钮默认背景 */
    --btn-purple-border: rgba(176, 0, 255, 0.2);      /* 紫色按钮默认边框 */
    --btn-purple-hover-bg: rgba(176, 0, 255, 0.2);    /* 紫色按钮悬浮背景 */
    --btn-purple-hover-glow: 0 0 12px rgba(176, 0, 255, 0.3);  /* 紫色按钮悬浮发光 */

    /* ----- 火焰按钮（进入网站） ----- */
    --btn-fire-glow: 0 0 15px rgba(255, 106, 0, 0.4), 0 0 30px rgba(255, 0, 170, 0.2);  /* 火焰按钮悬浮发光 */

    /* ----- 分类标签 ----- */
    --tag-bg: rgba(0, 240, 255, 0.08);                /* 分类标签背景，极淡蓝 */
    --tag-border: rgba(0, 240, 255, 0.15);            /* 分类标签边框 */

    /* ----- 悬停阴影 ----- */
    --hover-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);    /* 卡片/列表悬停附加深层阴影 */

    /* ----- 滚动条 ----- */
    --scrollbar-hover: linear-gradient(180deg, #33f5ff, #c444ff);  /* 滚动条悬浮渐变，亮蓝→亮紫 */

    /* ----- 文字发光动画态 ----- */
    --glow-text-low: 0 0 5px rgba(0, 240, 255, 0.3);     /* 文字发光低态，微弱蓝光 */
    --glow-text-high: 0 0 15px rgba(0, 240, 255, 0.6), 0 0 30px rgba(0, 240, 255, 0.2);  /* 文字发光高态，明亮蓝光+扩散 */

    /* ----- 脉冲发光动画态 ----- */
    --glow-pulse-low: 0 0 5px rgba(0, 240, 255, 0.2);    /* 脉冲发光低态 */
    --glow-pulse-high: 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(0, 240, 255, 0.1); /* 脉冲发光高态 */
}


/* =====================================================================
   第2部分：全局重置与基础排版
   ===================================================================== */
* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    background: var(--bg-primary) !important;   /* 页面主背景：深蓝黑 */
    color: var(--text-primary) !important;       /* 页面默认文字色：浅蓝白 */
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;  /* 中文字体栈 */
    overflow-x: hidden;   /* 隐藏水平滚动条，防止网格背景溢出 */
    min-height: 100vh;    /* 最小高度占满视口 */
}


/* =====================================================================
   第3部分：网格背景纹理
   
   body::before 伪元素覆盖全屏，绘制60px间距的淡蓝网格线，
   营造赛博朋克科技感底纹，pointer-events:none 不影响交互。
   ===================================================================== */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),      /* 水平网格线 */
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* 垂直网格线 */
    background-size: 60px 60px;
    pointer-events: none; z-index: 0;
}


/* =====================================================================
   第4部分：选中文字高亮
   
   鼠标选中页面文字时，背景为半透明霓虹蓝，文字为纯白。
   ===================================================================== */
::selection { background: var(--selection-bg); color: var(--selection-text); }


/* =====================================================================
   第5部分：滚动条美化
   
   自定义Webkit浏览器滚动条：
   - 宽度6px，不占空间
   - 轨道背景与页面主背景一致
   - 滑块为蓝→紫渐变
   - 悬浮时渐变更亮
   ===================================================================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }


/* =====================================================================
   第6部分：链接全局样式
   
   默认：霓虹蓝色，无下划线，0.3s缓动过渡
   悬浮：纯白色，霓虹蓝文字发光阴影
   ===================================================================== */
a { color: var(--neon-blue); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--text-link-hover); text-shadow: 0 0 8px var(--neon-blue); }


/* =====================================================================
   第7部分：弹出层圆角
   
   通用弹出层样式：12px圆角 + 霓虹蓝半透明边框
   ===================================================================== */
.弹出层圆角 { border-radius: 12px; border: 1px solid var(--border-dim); }


/* =====================================================================
   第8部分：关键帧动画定义
   
   borderFlow — 流光边框动画，背景位移动画实现渐变流动效果
   scanLine   — 光线扫过动画，从左侧-50%到右侧150%水平移动
   textGlow   — 文字呼吸发光，低态↔高态交替
   glowPulse  — 脉冲发光，低态↔高态交替
   ===================================================================== */
@keyframes borderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes scanLine { 0% { left: -50%; } 100% { left: 150%; } }
@keyframes textGlow { 0%, 100% { text-shadow: var(--glow-text-low); } 50% { text-shadow: var(--glow-text-high); } }
@keyframes glowPulse { 0%, 100% { box-shadow: var(--glow-pulse-low); } 50% { box-shadow: var(--glow-pulse-high); } }


/* =====================================================================
   第9部分：Layui暗色主题覆盖
   
   原Layui组件为浅色主题，此处强制覆盖为赛博朋克暗色风格。
   所有覆盖使用 !important 确保优先级。
   
   覆盖范围：
   - 容器背景透明
   - 卡片：暗色背景 + 霓虹边框 + 12px圆角
   - 卡片内所有文字：亮色
   - 标题h1-h6：纯白
   - 链接：霓虹蓝，悬浮白字+发光
   - 表格/单元格：霓虹边框 + 透明背景
   - 输入框/文本域：深色背景 + 霓虹边框
   - 段落/列表：次要/弱化文字色
   ===================================================================== */
.layui-container { background: transparent !important; }
.layui-card { background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important; color: var(--text-primary) !important; border-radius: 12px !important; }
.layui-card * { color: var(--text-primary) !important; }
.layui-card h1,.layui-card h2,.layui-card h3,.layui-card h4,.layui-card h5,.layui-card h6 { color: var(--text-heading) !important; }
.layui-card a { color: var(--neon-blue) !important; }
.layui-card a:hover { color: var(--text-link-hover) !important; text-shadow: 0 0 8px var(--neon-blue); }
.layui-card table { border-color: var(--border-dim) !important; }
.layui-card td,.layui-card th { border-color: var(--border-dim) !important; color: var(--text-primary) !important; background: transparent !important; }
.layui-card img { border-radius: 8px; }
.layui-card input,.layui-card textarea,.layui-card select { background: var(--bg-input) !important; border: 1px solid var(--border-dim) !important; color: var(--text-primary) !important; border-radius: 6px !important; }
.layui-card p { color: var(--text-secondary) !important; }
.layui-card span { color: var(--text-primary) !important; }
.layui-card li { color: var(--text-secondary) !important; }