/* ===== 网飞猫2026 · 8-bit 复古街机 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Consolas, "Courier New", "PingFang SC", "Microsoft YaHei", monospace;
    color: #e8eaff; background: #12102b; line-height: 1.75;
    image-rendering: pixelated;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
.wp4k { width: 1200px; margin: 0 auto; }

/* ===== 头部 ===== */
.hd8m {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: #0c0a20; border-bottom: 4px solid #39ff14;
    transition: box-shadow .2s;
}
.hd8m.sc8 { box-shadow: 0 0 0 2px #ff4fd8, 0 6px 0 rgba(0,0,0,.5); }
.hd8m .wp4k { height: 70px; display: flex; align-items: center; justify-content: space-between; }
.lg3x { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 900; letter-spacing: 1px; color: #fff; }
.lg3x img { width: 40px; height: 40px; image-rendering: auto; }
.lg3x b { color: #0c0a20; background: #ffe600; padding: 1px 7px; font-size: 15px; }
.nv7q { display: flex; gap: 28px; }
.nv7q a { font-size: 15px; font-weight: 700; color: #b9bde0; padding: 4px 2px; border-bottom: 3px solid transparent; }
.nv7q a:hover { color: #39ff14; border-bottom-color: #39ff14; }
.gb9k {
    display: inline-block; background: #ff4fd8; color: #0c0a20; font-size: 14px; font-weight: 900;
    padding: 11px 18px; border: 0; box-shadow: 0 4px 0 #a81d86, inset -4px -4px 0 rgba(0,0,0,.2), inset 4px 4px 0 rgba(255,255,255,.35);
    transition: transform .12s, box-shadow .12s;
}
.gb9k:hover { transform: translateY(2px); box-shadow: 0 2px 0 #a81d86, inset -4px -4px 0 rgba(0,0,0,.2), inset 4px 4px 0 rgba(255,255,255,.35); }
.mb6t { display: none; background: #39ff14; border: 0; color: #0c0a20; font-size: 22px; padding: 4px 9px; cursor: pointer; box-shadow: 0 3px 0 #1c8a07; }
.mn5w { display: none; }

/* ===== Hero ===== */
.he9r {
    padding: 128px 0 80px; position: relative; overflow: hidden;
    background:
        linear-gradient(rgba(57,255,20,.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(57,255,20,.05) 2px, transparent 2px),
        radial-gradient(ellipse at 80% 10%, rgba(255,79,216,.18), transparent 55%),
        #12102b;
    background-size: 32px 32px, 32px 32px, auto, auto;
}
.he9r::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
    background:
        linear-gradient(rgba(255,79,216,.35), rgba(255,79,216,.35)) 0 100% / 100% 2px no-repeat,
        linear-gradient(rgba(255,79,216,.18), rgba(255,79,216,.18)) 0 100% / 200% 4px no-repeat,
        linear-gradient(rgba(255,79,216,.1), rgba(255,79,216,.1)) 0 100% / 300% 6px no-repeat;
}
.he9r .wp4k { display: flex; align-items: center; gap: 60px; position: relative; z-index: 1; }
.hl3d { flex: 1; }
.hb7m {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; letter-spacing: 2px; color: #39ff14;
    border: 3px solid #39ff14; padding: 6px 14px; margin-bottom: 24px;
    box-shadow: 4px 4px 0 rgba(57,255,20,.25);
}
.px-dot { width: 10px; height: 10px; background: #ff4fd8; animation: pxblink 1s steps(1) infinite; }
@keyframes pxblink { 50% { opacity: 0; } }
.hl3d h1 { font-size: 54px; line-height: 1.25; font-weight: 900; letter-spacing: 1px; color: #fff; margin-bottom: 22px; text-shadow: 4px 4px 0 #ff4fd8; }
.hl3d h1 em {
    font-style: normal; color: #0c0a20; background: #39ff14; padding: 0 14px;
    box-shadow: 6px 6px 0 rgba(57,255,20,.3); display: inline-block; margin-top: 6px;
}
.hd6x { font-size: 15.5px; color: #b9bde0; max-width: 510px; margin-bottom: 32px; }
.hc2p { display: flex; gap: 16px; margin-bottom: 34px; flex-wrap: wrap; }
.rbtn {
    display: inline-flex; align-items: center;
    background: #ffe600; color: #0c0a20; font-size: 16px; font-weight: 900; letter-spacing: .5px;
    padding: 16px 26px;
    box-shadow: 0 6px 0 #b3a400, inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.4);
    transition: transform .12s, box-shadow .12s;
}
.rbtn:hover { transform: translateY(3px); box-shadow: 0 3px 0 #b3a400, inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.4); }
.ybtn {
    display: inline-flex; align-items: center;
    background: transparent; color: #00e5ff; font-size: 15px; font-weight: 900;
    padding: 15px 24px; border: 3px solid #00e5ff;
    box-shadow: 5px 5px 0 rgba(0,229,255,.25); transition: all .15s;
}
.ybtn:hover { background: #00e5ff; color: #0c0a20; }
.hx9k { display: flex; gap: 0; }
.hx9k li { font-size: 12.5px; color: #8f94c4; padding: 10px 20px 0; border-left: 3px solid #3a3770; }
.hx9k li:first-child { padding-left: 0; border-left: 0; }
.hx9k b { display: block; font-size: 22px; color: #ffe600; font-weight: 900; }

/* 街机机柜 */
.hr8g { position: relative; width: 380px; flex: none; }
.cab-top { display: flex; gap: 6px; justify-content: center; margin-bottom: -4px; }
.cab-top span { width: 26px; height: 12px; background: #2d2960; border: 2px solid #0c0a20; }
.cab-top span:nth-child(odd) { background: #ff4fd8; }
.cab {
    background: linear-gradient(180deg, #241f52, #181439);
    border: 4px solid #0c0a20; padding: 16px;
    box-shadow: 0 0 0 4px #3a3770, 0 18px 40px rgba(0,0,0,.55), inset 5px 5px 0 rgba(255,255,255,.07);
}
.cab-mar {
    text-align: center; font-size: 12px; letter-spacing: 2px; color: #0c0a20; font-weight: 900;
    background: #39ff14; padding: 6px; margin-bottom: 14px;
}
.cab-sc { position: relative; border: 4px solid #0c0a20; background: #000; }
.cab-sc img { width: 100%; height: 380px; object-fit: cover; object-position: center top; image-rendering: auto; opacity: .95; }
.cab-osd {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between;
    background: rgba(8,6,24,.82); color: #39ff14; font-size: 11.5px; letter-spacing: 1px;
    padding: 5px 10px;
}
.blink { animation: pxblink .8s steps(1) infinite; color: #ff4fd8; }
.cab-pad { display: flex; align-items: center; gap: 16px; padding: 18px 8px 6px; }
.d-pad { position: relative; width: 52px; height: 52px; }
.d-pad i { position: absolute; left: 16px; top: 0; width: 20px; height: 52px; background: #0c0a20; box-shadow: inset 3px 3px 0 rgba(255,255,255,.12); }
.d-pad b { position: absolute; left: 0; top: 16px; width: 52px; height: 20px; background: #0c0a20; }
.abtn {
    margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; color: #0c0a20;
    box-shadow: 0 3px 0 rgba(0,0,0,.5), inset -3px -3px 0 rgba(0,0,0,.2), inset 3px 3px 0 rgba(255,255,255,.4);
}
.abtn.a { background: #ff4fd8; }
.abtn.b { background: #00e5ff; margin-left: 0; }
.coin { margin-top: 14px; text-align: center; font-size: 12.5px; letter-spacing: 2px; color: #ffe600; }
.coin i { color: #39ff14; }

/* ===== 模块 ===== */
.bk5x { padding: 80px 0; }
.bk5x.gy3 { background: #161333; }
.st9t { text-align: center; margin-bottom: 48px; }
.st9t span {
    display: inline-block; font-size: 26px; font-weight: 900; letter-spacing: 4px; color: #39ff14;
    text-shadow: 3px 3px 0 #ff4fd8;
}

/* 产品展示 · 游戏卡带 */
.sh7k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sh-it {
    flex: 1; background: #241f52; border: 4px solid #0c0a20; position: relative;
    box-shadow: 0 0 0 3px #3a3770, 8px 8px 0 rgba(0,0,0,.45), inset 4px 4px 0 rgba(255,255,255,.06);
    transition: transform .18s;
}
.sh-it:hover { transform: translateY(-7px); }
.cart-lb {
    position: absolute; top: 10px; left: -3px; z-index: 2;
    background: #ffe600; color: #0c0a20; font-size: 11px; font-weight: 900; letter-spacing: 1px;
    padding: 3px 9px; box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.sh-it img { width: 100%; height: 268px; object-fit: cover; object-position: center top; border-bottom: 4px solid #0c0a20; image-rendering: auto; }
.sh-it figcaption { font-size: 13.5px; font-weight: 700; color: #e8eaff; text-align: center; padding: 13px 6px; letter-spacing: 1px; }

/* 优势亮点 · 技能格 */
.ad6q { display: flex; flex-wrap: wrap; gap: 20px; }
.ad-it {
    width: calc((100% - 40px) / 3); background: #1d1944; border: 4px solid #0c0a20;
    padding: 26px 24px 28px; position: relative;
    box-shadow: inset 4px 4px 0 rgba(255,255,255,.05), 0 0 0 3px #3a3770;
    transition: transform .15s, box-shadow .15s;
}
.ad-it:hover { transform: translate(-3px,-3px); box-shadow: inset 4px 4px 0 rgba(255,255,255,.05), 6px 6px 0 #ff4fd8, 0 0 0 3px #3a3770; }
.ad-ic {
    width: 54px; height: 54px; background: #0c0a20; border: 3px solid #39ff14;
    display: flex; align-items: center; justify-content: center;
    font-size: 25px; color: #39ff14; margin-bottom: 15px;
}
.px-no { font-size: 11.5px; letter-spacing: 2px; color: #ff4fd8; margin-bottom: 8px; }
.ad-it .tt9 { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 9px; letter-spacing: 1px; }
.ad-it .ds9 { font-size: 14px; color: #a9add6; }
.lk8 { color: #39ff14; border-bottom: 3px solid #39ff14; font-weight: 700; }

/* 使用流程 · 关卡地图 */
.st7m { display: flex; position: relative; }
.st7m::before {
    content: ""; position: absolute; top: 33px; left: 12%; right: 12%; z-index: 0;
    border-top: 5px dashed #00e5ff;
}
.st7m li { flex: 1; position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.st-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; margin-bottom: 16px;
    background: #ff4fd8; color: #0c0a20; font-size: 16px; font-weight: 900;
    border: 4px solid #0c0a20; box-shadow: 0 0 0 4px #ffe600, 0 6px 0 rgba(0,0,0,.5);
}
.st7m li:nth-child(2) .st-no { background: #00e5ff; }
.st7m li:nth-child(3) .st-no { background: #39ff14; }
.st7m li:nth-child(4) .st-no { background: #ffe600; }
.st7m .tt9 { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 7px; }
.st7m .ds9 { font-size: 13.5px; color: #a9add6; }

/* 产品资讯 · 公告板 */
.nw3q { display: flex; gap: 22px; }
.nw-it {
    flex: 1; background: #1d1944; border: 4px solid #0c0a20; padding: 24px 22px;
    box-shadow: 0 0 0 3px #3a3770, 7px 7px 0 rgba(0,0,0,.45);
}
.nw-it:nth-child(1) { border-top: 8px solid #39ff14; }
.nw-it:nth-child(2) { border-top: 8px solid #00e5ff; }
.nw-it:nth-child(3) { border-top: 8px solid #ff4fd8; }
.nw-no { font-size: 11.5px; letter-spacing: 2px; color: #ffe600; margin-bottom: 12px; }
.nw-it .tt9 { font-size: 17.5px; font-weight: 900; color: #fff; line-height: 1.55; margin-bottom: 11px; }
.nw-it .ds9 { font-size: 13.5px; color: #a9add6; margin-bottom: 16px; }
.nw-dt { font-size: 12.5px; color: #00e5ff; letter-spacing: 1px; border-top: 3px dashed #3a3770; padding-top: 10px; }

/* FAQ · RPG对话框 */
.fa8z { max-width: 940px; margin: 0 auto; }
.fa6q {
    background: #1d1944; border: 4px solid #39ff14; margin-bottom: 16px;
    box-shadow: 0 0 0 3px #0c0a20, 6px 6px 0 rgba(0,0,0,.5);
}
.fq-h { display: flex; align-items: center; gap: 14px; padding: 17px 20px; cursor: pointer; user-select: none; }
.fq-no {
    flex: none; width: 34px; height: 34px; background: #ff4fd8; color: #0c0a20;
    display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900;
    border: 3px solid #0c0a20;
}
.fq-h b { flex: 1; font-size: 16px; font-weight: 900; color: #fff; }
.fq-h i { flex: none; font-size: 20px; color: #39ff14; transition: transform .25s; }
.fa6q.op8 .fq-h i { transform: rotate(45deg); }
.fq-b { max-height: 0; overflow: hidden; transition: max-height .35s steps(6); }
.fq-b .ds9 { padding: 0 20px 20px 68px; font-size: 14px; color: #b9bde0; }

/* 用户评价 · 玩家面板 */
.sy7m { display: flex; flex-wrap: wrap; gap: 20px; }
.sy-it {
    width: calc((100% - 40px) / 3); background: #1d1944; border: 4px solid #0c0a20;
    padding: 20px 20px 16px; box-shadow: 0 0 0 3px #3a3770, 6px 6px 0 rgba(0,0,0,.45);
}
.sy-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sy-a {
    width: 38px; height: 38px; background: #39ff14; color: #0c0a20;
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900;
    border: 3px solid #0c0a20; flex: none;
}
.sy-hd b { font-size: 14px; font-weight: 900; color: #fff; }
.sy-hp { margin-left: auto; width: 60px; height: 10px; background: #0c0a20; border: 2px solid #3a3770; padding: 1px; }
.sy-hp i { display: block; height: 100%; background: linear-gradient(90deg, #39ff14, #ffe600); }
.sy-it .ds9 { font-size: 14px; color: #c6caf0; margin-bottom: 14px; }
.sy-ft { display: flex; align-items: center; justify-content: space-between; border-top: 3px dashed #3a3770; padding-top: 10px; }
.sy-ft time { font-size: 11.5px; color: #8f94c4; }
.px-ok { font-size: 11px; color: #39ff14; letter-spacing: 1px; }

/* CTA */
.cta9x {
    background:
        linear-gradient(rgba(57,255,20,.07) 2px, transparent 2px),
        linear-gradient(90deg, rgba(57,255,20,.07) 2px, transparent 2px),
        #0c0a20;
    background-size: 28px 28px; padding: 88px 0; text-align: center;
    border-top: 4px solid #39ff14; border-bottom: 4px solid #39ff14;
}
.ct-fl { font-size: 13px; letter-spacing: 3px; color: #00e5ff; margin-bottom: 20px; }
.ct-t { font-size: 44px; line-height: 1.4; font-weight: 900; color: #fff; text-shadow: 4px 4px 0 #ff4fd8; margin-bottom: 14px; }
.ct-t em { font-style: normal; color: #39ff14; }
.ct-d { font-size: 15px; color: #8f94c4; margin-bottom: 34px; letter-spacing: 1px; }
.ct-btn {
    display: inline-flex;
    background: #ffe600; color: #0c0a20; font-size: 17px; font-weight: 900;
    padding: 18px 40px; box-shadow: 0 7px 0 #b3a400, inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.4);
    transition: transform .12s, box-shadow .12s;
}
.ct-btn:hover { transform: translateY(3px); box-shadow: 0 4px 0 #b3a400, inset -5px -5px 0 rgba(0,0,0,.18), inset 5px 5px 0 rgba(255,255,255,.4); }

/* 页脚 */
.ft8k { background: #08071a; color: #8f94c4; padding: 42px 0 30px; }
.ft-row { display: flex; align-items: center; justify-content: space-between; }
.ft-lg { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 17px; font-weight: 900; }
.ft-lg img { width: 34px; height: 34px; }
.ft-nv { display: flex; gap: 24px; font-size: 14px; }
.ft-nv a:hover { color: #39ff14; }
.ft-ln { height: 4px; margin: 22px 0 16px; background: repeating-linear-gradient(90deg, #39ff14 0 20px, #ff4fd8 20px 40px, #00e5ff 40px 60px, #ffe600 60px 80px); }
.ft-cp { font-size: 12px; text-align: center; letter-spacing: 1.5px; color: #6c70a0; }

/* ===== 移动档 ===== */
@media (max-width: 768px) {
    .wp4k { width: 100%; padding: 0 16px; }
    .nv7q, .gb9k { display: none; }
    .hd8m .wp4k { height: 58px; }
    .lg3x { font-size: 17px; }
    .lg3x img { width: 33px; height: 33px; }
    .mb6t { display: block; }
    .mn5w {
        position: fixed; top: 58px; left: 0; right: 0; z-index: 99;
        background: #0c0a20; border-bottom: 4px solid #39ff14;
        flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .mn5w.op8 { max-height: 440px; display: flex; }
    .mn5w a { padding: 13px 20px; font-size: 15px; font-weight: 700; color: #b9bde0; border-bottom: 2px solid #241f52; }
    .mn5w a:last-child { color: #39ff14; border-bottom: 0; }

    .he9r { padding: 90px 0 52px; background-size: 24px 24px; }
    .he9r .wp4k { flex-direction: column; gap: 44px; }
    .hl3d h1 { font-size: 34px; text-shadow: 3px 3px 0 #ff4fd8; }
    .hd6x { font-size: 14.5px; }
    .rbtn, .ybtn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 15px; }
    .hx9k { flex-wrap: wrap; }
    .hx9k li { width: 33.33%; padding: 10px 6px 0; text-align: center; }
    .hx9k li:first-child { padding-left: 6px; }

    .hr8g { width: 280px; }
    .cab-sc img { height: 300px; }

    .bk5x { padding: 54px 0; }
    .st9t { margin-bottom: 32px; }
    .st9t span { font-size: 21px; letter-spacing: 2px; text-shadow: 2px 2px 0 #ff4fd8; }

    .sh7k { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 12px; scroll-snap-type: x mandatory; }
    .sh-it { flex: none; width: 218px; scroll-snap-align: center; }
    .sh-it img { height: 230px; }

    .ad6q { gap: 14px; }
    .ad-it { width: 100%; padding: 22px 20px 24px; }

    .st7m { flex-direction: column; gap: 24px; }
    .st7m::before { display: none; }
    .st7m li { display: flex; align-items: center; gap: 16px; text-align: left; }
    .st-no { width: 58px; height: 58px; margin-bottom: 0; flex: none; font-size: 14px; }

    .nw3q { flex-direction: column; gap: 16px; }

    .fq-h { gap: 10px; padding: 14px; }
    .fq-h b { font-size: 14px; }
    .fq-b .ds9 { padding: 0 14px 18px; }

    .sy-it { width: 100%; }

    .cta9x { padding: 58px 0; }
    .ct-t { font-size: 29px; text-shadow: 3px 3px 0 #ff4fd8; }
    .ct-btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15px; }
    .ft-row { flex-direction: column; gap: 18px; }
    .ft-nv { flex-wrap: wrap; justify-content: center; gap: 16px; }
}