/* =========================================
           1. 全局基础设置
           ========================================= */
        * { box-sizing: border-box; }
        body {
            margin: 0; padding: 0;
            background-color: #050505;
            color: #fff;
            font-family: "Microsoft YaHei", "Courier New", sans-serif;
            height: 100vh;
            overflow: hidden;
        }
        a { text-decoration: none; color: inherit; cursor: pointer; }
        input { display: none; } 

        /* =========================================
           2. 核心动画定义 (@keyframes)
           ========================================= */
        @keyframes huxi-jicu {
            0% { transform: scale(1); filter: drop-shadow(0 0 0px #ff0); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 10px #ff0); }
            100% { transform: scale(1); filter: drop-shadow(0 0 0px #ff0); }
        }

        @keyframes guzhang-doudong {
            0% { transform: translate(0, 0); text-shadow: 2px 2px 0 #000; }
            2% { transform: translate(-2px, 1px); text-shadow: -2px 0 #f00; }
            4% { transform: translate(2px, -1px); text-shadow: 2px 0 #0f0; }
            6% { transform: translate(0, 0); text-shadow: 2px 2px 0 #000; }
            100% { transform: translate(0, 0); text-shadow: 2px 2px 0 #000; }
        }

        /* =========================================
           3. 页面切换逻辑
           ========================================= */
        .yemian {
            display: none; width: 100%; height: 100vh;
            overflow-y: auto; position: absolute; top: 0; left: 0;
            background-color: #111;
            scrollbar-width: none; -ms-overflow-style: none;
        }
        .yemian::-webkit-scrollbar { display: none; }
        .yemian:target { display: block; }
        body:not(:has(.yemian:target)) #shouye { display: block; }

        /* =========================================
           4. 公共组件 (面包屑 & 导航)
           ========================================= */
        .mianbaoxie {
            position: fixed; top: 0; left: 0; width: 100%;
            background: rgba(0, 0, 0, 0.9); border-bottom: 1px solid #333;
            padding: 15px 20px; font-family: 'Courier New', monospace; font-size: 14px;
            z-index: 100; text-align: left; display: flex; align-items: center;
        }
        .mianbaoxie a { color: #0f0; transition: 0.2s; }
        .mianbaoxie a:hover { text-decoration: underline; text-shadow: 0 0 5px #0f0; }
        .mianbaoxie .fenge { margin: 0 8px; color: #555; }
        .mianbaoxie .dangqian { color: #fff; font-weight: bold; }
        
        .neirong-jianju { padding-top: 60px; }

        /* =========================================
           5. 首页样式 (#shouye)
           ========================================= */
        #shouye {
            background-image: url('2.png'); /* 请替换为真实背景 */
            background-size: cover; background-position: center;
            display: flex; flex-direction: column; justify-content: space-between;
        }
        .dingbu-lan {
            background: rgba(0,0,0,0.7); padding: 15px 30px;
            display: flex; justify-content: space-between; align-items: center; height: 80px; 
        }
        .logo-quyu { display: flex; align-items: center; gap: 15px; height: 100%; }
        .logo-tu { width: 50px; height: 50px; border-radius: 5px; background: #fff; display: block; object-fit: cover; } 
        .biaoti-wenzi { font-size: 26px; font-weight: bold; letter-spacing: 2px; line-height: 1; margin-top: 4px; }
        .guanyu-anniu {
            background: #8a0; padding: 8px 20px; border-radius: 20px; border: 2px solid #680;
            font-weight: bold; font-size: 16px; transition: 0.2s;
        }
        
        .shouye-zhuti { flex: 1; display: flex; align-items: center; padding-left: 10%; position: relative; }
        .xitong-kuang {
            background: #000; border: 4px solid #f00; padding: 40px; text-align: center;
            width: 400px; box-shadow: 10px 10px 30px rgba(0,0,0,0.8); margin-top: 150px; 
        }
        .xitong-biaoti { color: #f00; font-size: 36px; font-weight: bold; margin-bottom: 20px; font-family: 'Courier New'; }
        .jinru-anniu {
            display: block; width: 100%; border: 2px solid #0f0; color: #0f0;
            padding: 15px; font-size: 20px; font-weight: bold; transition: 0.2s;
        }
        .jinru-anniu:hover { background: #0f0; color: #000; box-shadow: 0 0 20px #0f0; }

        /* =========================================
           6. 列表页样式 (#liebiao)
           ========================================= */
        #liebiao {
            background-image: url('3.png'); /* 请替换为真实背景 */
            background-size: cover; background-position: center; background-attachment: fixed;
        }
        .fenlei-daohang { position: absolute; top: 70px; width: 100%; text-align: center; z-index: 40; }
        .fenlei-anniu { color: #0f0; margin: 0 10px; cursor: pointer; padding: 5px 15px; transition: 0.2s; background: rgba(0,0,0,0.5); }
        .fenlei-anniu:hover { color: #fff; text-decoration: underline; }
        
        /* 筛选高亮 */
        #shaixuan-quanbu:checked ~ #liebiao .fenlei-daohang label[for="shaixuan-quanbu"],
        #shaixuan-buru:checked ~ #liebiao .fenlei-daohang label[for="shaixuan-buru"],
        #shaixuan-niaolei:checked ~ #liebiao .fenlei-daohang label[for="shaixuan-niaolei"],
        #shaixuan-yulei:checked ~ #liebiao .fenlei-daohang label[for="shaixuan-yulei"] {
            background: #0f0; color: #000; border-radius: 4px; font-weight: bold;
        }
        /* 筛选显示 */
        #shaixuan-buru:checked ~ #liebiao .dongwu-kapian:not(.leixing-buru),
        #shaixuan-niaolei:checked ~ #liebiao .dongwu-kapian:not(.leixing-niaolei),
        #shaixuan-yulei:checked ~ #liebiao .dongwu-kapian:not(.leixing-yulei) { display: none; }

        .liebiao-rongqi { max-width: 1200px; margin: 0 auto; padding-top: 100px; display: flex; justify-content: center; }
        
        /* 警报侧栏 */
        .jingbao-celan { position: fixed; left: 5%; top: 30%; width: 200px; text-align: center; z-index: 10; }
        .jingbao-tubiao { width: 80px; margin-bottom: 10px; animation: huxi-jicu 1.5s infinite ease-in-out; }
        .jingbao-wenzi { color: #0f0; font-size: 24px; font-weight: bold; animation: guzhang-doudong 3s infinite steps(5); }
        .jingbao-fubiaoti { color: #0f0; font-size: 14px; opacity: 0.8; margin-top: 5px; }

        .kapian-duidie { display: flex; flex-direction: column; gap: 15px; padding-bottom: 80px; }

        .dongwu-kapian {
            width: 400px; height: 110px; background: #2b2b2b; border: 2px solid #444;
            display: flex; align-items: center; padding: 10px; transition: 0.2s;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.7);
        }
        .dongwu-kapian:hover { transform: scale(1.05); border-color: #fff; z-index: 20; }
        .touxiang-kuang {
            width: 80px; height: 80px; background: #444; margin-right: 20px;
            display: flex; justify-content: center; align-items: center; border: 1px solid #555;
        }
        .touxiang { width: 70px; height: 70px; object-fit: cover; image-rendering: pixelated; }
        .mingcheng { font-size: 24px; font-weight: bold; margin-bottom: 5px; color: #0f0; }
        .zhuangtai-biaoqian { border: 2px solid; padding: 2px 10px; font-size: 16px; font-weight: bold; display: inline-block; background: rgba(0,0,0,0.4); }
        .biaoqian-lv { color: #0f0; border-color: #0f0; }
        .biaoqian-hong { color: #f00; border-color: #f00; }
        .biaoqian-cheng { color: #ffa500; border-color: #ffa500; }

        /* =========================================
           7. 详情页 & 关于页
           ========================================= */
        .zi-yemian {
            background-image: url('10.png');
            background-size: cover; background-position: center; background-attachment: fixed;
            box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); 
            padding-top: 60px; text-align: center;
        }
        /* 自定义背景类 (保留你的需求) */
        .zi-yemian1 { background-image: url('4.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }
        .zi-yemian2 { background-image: url('5.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }
        .zi-yemian3 { background-image: url('6.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }
        .zi-yemian4 { background-image: url('7.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }
        .zi-yemian5 { background-image: url('8.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }
        .zi-yemian6 { background-image: url('9.png'); background-size: cover; background-position: center; background-attachment: fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7); padding-top: 60px; text-align: center; }

        .xiangqing-tu {
            width: 250px; height: 250px; border: 4px solid #fff; margin: 30px auto;
            object-fit: cover; display: block; filter: contrast(1.1);
        }
        .xinxi-kuang {
            width: 80%; max-width: 650px; margin: 0 auto; text-align: left;
            border: 1px dashed #555; padding: 25px; color: #ccc; background: rgba(0,0,0,0.8);
            line-height: 1.8;
        }
        .xinxi-kuang p { margin-bottom: 15px; }
        .xinxi-kuang strong { color: #fff; font-size: 18px; display: block; margin-bottom: 5px; border-bottom: 1px solid #333; padding-bottom: 2px; }
        .gaoliang { color: #0f0; font-weight: bold; }

        .shanchu-anniu {
            border: 1px solid #f00; color: #f00; padding: 12px 30px; display: inline-block;
            margin-top: 30px; font-family: 'Courier New'; transition: 0.2s; background: rgba(0,0,0,0.5);
        }
        .shanchu-anniu:hover { background: #f00; color: #000; }

        input:checked + .xianshi-quyu .xiangqing-tu { opacity: 0; transform: scale(0); transition: 0.5s; }
        input:checked ~ .shanchu-tishi { display: block; }
        input:checked ~ label { display: none; }
        .shanchu-tishi { display: none; color: #f00; font-size: 30px; font-weight: bold; margin-top: 20px; text-shadow: 2px 2px 0 #000; }

        .guanyu-biaoti { font-size: 40px; color: #0f0; margin-bottom: 30px; text-shadow: 2px 2px 0 #000; }
        .guanyu-neirong p { font-size: 16px; line-height: 1.8; margin-bottom: 20px; }

        /* =========================================
           🔴 8. 响应式布局 (Media Query) - 新增
           ========================================= */
        @media screen and (max-width: 768px) {
            /* 1. 首页适配 */
            .dingbu-lan { padding: 0 10px; }
            .biaoti-wenzi { font-size: 18px; } /* 缩小标题 */
            .shouye-zhuti { padding-left: 0; justify-content: center; } /* 内容居中 */
            .xitong-kuang { 
                width: 90%; /* 宽度变宽 */
                margin-top: 80px; /* 上移一点 */
            }
            .slogan-text { /* 首页口号 */
                position: static; text-align: center; margin-top: 20px; 
            }

            /* 2. 列表页适配 */
            .fenlei-daohang { top: 60px; font-size: 12px; } /* 筛选按钮变小 */
            .fenlei-anniu { padding: 5px; margin: 0 2px; }
            
            .liebiao-rongqi { 
                flex-direction: column; /* 上下排列 */
                padding-top: 120px; 
            }
            
            /* 左侧警报栏 -> 变成顶部横幅 */
            .jingbao-celan { 
                position: static; /* 取消固定定位 */
                width: 100%; 
                margin-bottom: 20px;
                display: flex; /* 横向排列 */
                justify-content: center; 
                align-items: center;
                gap: 15px;
            }
            .jingbao-tubiao { width: 50px; margin-bottom: 0; }
            .jingbao-wenzi { font-size: 20px; }
            .jingbao-fubiaoti { display: none; } /* 手机上隐藏副标题节省空间 */

            /* 卡片适配 */
            .kapian-duidie { padding-bottom: 50px; }
            .dongwu-kapian { 
                width: 95%; /* 卡片宽度铺满 */
                margin: 0 auto; /* 居中 */
            }

            /* 3. 详情页适配 */
            .xinxi-kuang { width: 95%; padding: 15px; }
            .xiangqing-tu { width: 200px; height: 200px; }
        }

        /* =========================================
           8. 页脚样式 (.yejiao) 
           ========================================= */
        .yejiao {
            position: fixed; 
            bottom: 0; 
            left: 0;
            width: 100%; 
            height: 40px; 
            
            
            
            /* 布局方式 */
            display: flex; 
            justify-content: flex-end; /* 让内容靠右对齐 */
            align-items: center;       /* 垂直居中 */
            padding-right: 30px;       /* 右侧留出 30px 间距，不紧贴边缘 */
            
            z-index: 200; 
            font-family: 'Courier New', monospace; 
            font-size: 12px; 
            color: #666;
        }

        .yejiao a { color: #666; text-decoration: none; transition: 0.3s; }
        .yejiao a:hover { color: #0f0; text-shadow: 0 0 5px #0f0; }
        .yejiao .fenge { margin: 0 10px; color: #333; }