，去下划线 + 保持原视觉 + 可点光标 */
text-decoration:none;cursor:pointer;flex:0 0 auto;
}
.shop-nav .logo:hover .word{ filter:brightness(1.08); }
/* LOGO 反相定版 Invert Lock：黑场白字缓动翻转为白场黑字并停住 */
.shop-nav .logo .word{
display:inline-block;
padding:5px 13px;border-radius:4px;
font-size:17px;font-weight:600;letter-spacing:-.02em;
opacity:0;
}
.shop-nav.nav-in .logo .word{animation:navInvert 2.4s var(--ease2, cubic-bezier(.22,.61,.36,1)) both}
@keyframes navInvert{
0% {opacity:0;background:transparent;color:#fff}
35% {opacity:1;background:transparent;color:#fff}
55% {opacity:1;background:#000;color:#fff}
100%{opacity:1;background:#fff;color:#000}
}
.shop-nav .nm{display:flex;align-items:center;gap:clamp(4px,.7vw,10px)}
/* 导航项：字号/字重/圆角对齐 Epic 实测（16px / 400 / 6px） */
.shop-nav .nl{
position:relative;color:#c4c4ce;font-size:16px;font-weight:400;letter-spacing:normal;
padding:6px 12px;border-radius:6px;white-space:nowrap;cursor:pointer;
/* 本页没有全局 a 重置，而「免费加速器」是带 href 的真链接（外跳飞书）⇒
必须显式去掉浏览器默认下划线，否则它会跟其它四个导航项长得不一样 */
text-decoration:none;
transition:color .28s var(--ease-silk, cubic-bezier(.22,.61,.36,1)),background .28s var(--ease-silk, cubic-bezier(.22,.61,.36,1));
}
.shop-nav .nl:hover{color:#f2f2f4;background:rgba(255,255,255,.06)}
.shop-nav .nl.on{color:#f2f2f4;background:#2A2A2A}
.shop-nav .nl.nl-hl{color:#1a1a1a;background:#ffd100}
.shop-nav .nl.nl-hl:hover{color:#1a1a1a;background:#ffe033}
.shop-nav .nl.nl-hl.on{color:#1a1a1a;background:#ffd100}
.shop-nav .sp{flex:1}
.shop-nav .search{
display:flex;align-items:center;gap:8px;
background:rgba(255,255,255,.07);border:1px solid var(--line-2, rgba(255,255,255,.12));
border-radius:10px;padding:8px 13px;min-width:clamp(130px,15vw,210px);
color:var(--tx-3, #a9a9b6);font-size:13.5px;
transition:background .28s var(--ease-silk, cubic-bezier(.22,.61,.36,1)),border-color .28s var(--ease-silk, cubic-bezier(.22,.61,.36,1));
}
.shop-nav .search:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.shop-nav .search:focus-within{background:rgba(255,255,255,.1);border-color:rgba(59,130,246,.55)}
.shop-nav .search svg{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.shop-nav .search input{
appearance:none;border:none;background:transparent;outline:none;
color:var(--tx, #f4f4f6);font-family:inherit;font-size:13.5px;width:100%;min-width:0;
}
.shop-nav .search input::placeholder{color:var(--tx-3, #a9a9b6)}
.shop-nav .acts{display:flex;align-items:center;gap:9px;margin:0;padding:0}
/* ★ 导航栏登录按钮：高度必须与导航项 .nl 同排齐平（含已登录态用户名，同一个类）。
踩坑一：照抄商城口径 `line-height:24px` + `padding:8px 18px` ⇒ 实高 40px，
而导航项 .nl 是 `padding:6px 12px` + 16px 字号 ⇒ 33px，同排差 7px「膘肥体壮」。
踩坑二：改成写死行高只在宽屏对，窄屏反而错位，
且窄屏按钮被压窄后「登录」两字换行 ⇒ 实高 50px。
修法：**不写死 line-height**，改为与 .nl 同公式 —— 同字号 + `line-height:normal`
+ 同 padding(6px) ⇒ 任何断点都自动同高；再补 `white-space:nowrap` 防换行。
★ 两个媒体查询里的 .nl 各自改了字号/padding ⇒ 按钮必须同步改，否则再度错位。 */
.shop-nav .btn-w{padding:6px 16px;font-size:16px;letter-spacing:.28px;line-height:normal;white-space:nowrap}
@media(max-width:1180px){ .shop-nav .search{display:none} }
@media(max-width:1040px){
.shop-nav{gap:10px}
.shop-nav .nm{
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
-webkit-overflow-scrolling:touch;flex:1 1 auto;min-width:0;
}
.shop-nav .nm::-webkit-scrollbar{display:none}
/* ★ 2026-10-26 手机适配：导航项禁止压缩（否则窄屏被压扁/文字溢出而不滚动） */
.shop-nav .nl{padding:6px 9px;font-size:14.5px;flex:0 0 auto}
/* ★ 断点必须与 .nl 完全一致（1040）：早先写在 700 那条里 ⇒ 1040~700 区间
导航项已降字号(31px) 而按钮仍是 33px，同排又差 2px。 */
/* ★ 窄屏也必须带 `white-space:nowrap`（基础规则里有，覆盖时漏写就会被压窄换行 ⇒ 实高掉 1px） */
.shop-nav .btn-w{padding:6px 11px;font-size:14.5px;line-height:normal;white-space:nowrap}
.shop-nav .sp{display:none}
}
@media(max-width:700px){
.shop-nav{height:64px}
/* ★ 2026-10-26 手机适配：原来这里 display:none 隐藏 LOGO 字（特异性 .logo span:not(.mark)
= 0,3,1 高于 .logo .word 的 0,3,0）⇒ 现在有汉堡省出空间，改为正常显示，见文末 700px 块 */
}
.btn-w{
background:#fff;color:#000;border-radius:10px;
padding:12px 20px;font-size:14px;font-weight:500;letter-spacing:.28px;
line-height:24px;
}
.btn-w:hover{background:#eaeaea;transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px -10px rgba(255,255,255,.4)}
.btn-w:active{transform:translateY(0) scale(.98)}
/* ★ 2026-10-25：导航登录按钮用独立类名 sn-btn，**不带 .btn** ——
否则会被各页面自己的 `.btn{height:50px}` 撑高（实测差 17px），永远对不齐。
视觉与首页 `.btn.btn-w` 完全等价（白底黑字 16px / padding 6px 16px / 圆角 10px）。 */
.shop-nav .sn-btn{
height:auto;margin:0;box-sizing:border-box;
padding:6px 16px;font-size:16px;letter-spacing:.28px;line-height:normal;white-space:nowrap;
background:#fff;color:#000;border:none;border-radius:10px;cursor:pointer;
font-weight:500;font-family:inherit;
transition:background .2s,transform .2s,box-shadow .2s;
}
.shop-nav .sn-btn:hover{background:#eaeaea;transform:translateY(-2px) scale(1.02);
box-shadow:0 12px 28px -10px rgba(255,255,255,.4)}
.shop-nav .sn-btn:active{transform:translateY(0) scale(.98)}
@media(max-width:1040px){ .shop-nav .sn-btn{padding:6px 11px;font-size:14.5px} }
/* ============================================================
★★ 导航内容宽度上限（2026-10-25，逐字沿用首页 index.html L470-487）
背景仍 100% 通栏，只把「内容」收在 --page-w=1400 以内居中：
padding = max(clamp(24px,6vw,90px), (100% - 1400px)/2)
宽屏（>1568）时 padding 被抬到 (100%-1400)/2 ⇒ 内容恒为 1400 居中。
★ 首页 body 有 16px 内距，导航被负 margin 抵消 32px ⇒ 它要 +32；
本组件用于无内距的页面 ⇒ 用 0（若页面 body 也有内距，可覆写 --nav-bleed）。
============================================================ */
:root{ --page-w: 1400px; }
/* ★ 2026-10-25：去掉 body > 前缀 —— 结果页等页面的 nav 在容器内，
body > .shop-nav 匹配不到 ⇒ 样式全丢。用 .shop-nav 直配（各页已删干净内联，无冲突）。 */
.shop-nav{
--nav-bleed: 0px;
--page-pad: max(clamp(24px, 6vw, 90px),
calc((100% + var(--nav-bleed) - var(--page-w)) / 2));
padding-left: var(--page-pad);
padding-right: var(--page-pad);
}
/* ============================================================
★★ 全站统一容器 .page-wrap（2026-10-25 爹定设计）：
"本身有一个统一的限制，限制内可以调节自己页面的内容的宽度"
· 容器 = 与导航完全同一条竖线（同一 padding 公式，上限 1400）
· 容器内各页面自定内容宽度：商城网格铺满 / 兑换框 460 居中 / 表单 860 居中
用法： + 页面自定 max-width
============================================================ */
.page-wrap{
padding-left: max(clamp(24px, 6vw, 90px), calc((100% - var(--page-w, 1400px)) / 2));
padding-right: max(clamp(24px, 6vw, 90px), calc((100% - var(--page-w, 1400px)) / 2));
}
/* ============================================================
/* ===== 吸顶搜索条（2026-10-01 爹定）=====
★★ 定位（爹原话）：「搜索框是独立的一个搜索框，不属于导航栏，只是浮动置顶」。
⇒ 整条**完全透明**，只有搜索框自己有透明底 —— 绝不给整排铺任何底色。
（★ 10-01 爹纠正：我一度给整条加了渐隐黑底"防穿透"，被指出"整排画了个黑条子，好丑"
⇒ 已删除。背后内容穿透属正常叠加，不做遮罩。）
★ 位置要求：在「游戏大厅」导航之下、首屏大图之上；滚动/翻页时始终吸顶。
★ 尺寸（爹定「别太长，跟之前的长度一样」）＝逐项照搬原 .shop-nav .search，不放大；
左起线沿用导航的 clamp(24px,6vw,90px)，与导航项左对齐。 */
.shop-searchbar{
position:sticky;
/* ★★ 间距与占位**全部走 padding**，一个 margin 都不用 —— 实测踩到两件事：
① sticky 吸顶以「margin 外沿」对齐 top ⇒ margin-top 被吞，滚动时间距变 0（跳动）
② sticky 的 top 若写成「导航高 + 间距」，会把它推离流内位置而**不改变占位**
⇒ 下一个元素（首屏大图）仍按原位置排 ⇒ 搜索框压到大图上（实测压 8px）
正解：top = 导航高（盒外沿吸附点），间距由 padding-top 撑出 ——
吸顶时外沿贴 72、padding 8 ⇒ 搜索框实体从 80 起，与未滚动完全一致。 */
top:var(--nav-h, 72px);
z-index:8900; /* 低于导航(9000)、高于内容 ⇒ 不被大图盖住，也不盖弹窗 */
/* ★ 整条透明：无底色、无底边线 —— 它只是一条"承载搜索框的浮层"，不是色块 */
padding:8px var(--page-pad, max(clamp(24px, 6vw, 90px), calc((100% - 1400px) / 2))) 8px;
pointer-events:none; /* 条本身不挡点击，只有搜索框可点（不压住大图交互） */
}
.ssb-inner{display:flex;align-items:center}
/* ★ 搜索框 = 半透明玻璃（与原 .shop-nav .search 同一观感），只有它自己有底 */
.ssb-box{
display:flex;align-items:center;gap:8px;
background:rgba(255,255,255,.07);
border:1px solid var(--line-2);
border-radius:10px;padding:8px 13px;min-width:clamp(130px,15vw,210px);
color:var(--tx-3);font-size:13.5px;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
pointer-events:auto; /* 框自己可点 */
transition:background .28s var(--ease-silk),border-color .28s var(--ease-silk);
}
.ssb-box:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.ssb-box:focus-within{background:rgba(255,255,255,.12);border-color:rgba(59,130,246,.55)}
.ssb-box svg{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.ssb-box input{
appearance:none;border:none;background:transparent;outline:none;
color:var(--tx);font-family:inherit;font-size:13.5px;width:100%;min-width:0;
}
.ssb-box input::placeholder{color:var(--tx-3)}
/* ★ 2026-10-25：登录用户菜单（ShopNav 注入）—— 个人中心/退出登录 */
.sn-user-menu{position:fixed;background:#fff;border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:9100;min-width:138px;overflow:hidden;
padding:6px;display:none;}
.sn-user-menu .um-item{padding:10px 14px;font-size:13px;color:#333;cursor:pointer;
border-radius:8px;display:flex;align-items:center;gap:8px;user-select:none;}
.sn-user-menu .um-item:hover{background:#f0f2f7}
.sn-user-menu .um-logout{color:#e74c3c}
/* ============================================================
★★ 手机汉堡菜单（2026-10-26）：窄屏把一级导航收进右侧抽屉
背景：原来靠 .nm 横向滚动，但**没有任何"可滑"提示**，用户只看到前 3-4 项，
以为导航就这几项（实测出租页"成品号"被截断成"成…"）。
做法：≤700px 隐藏 .nm，显示三横线按钮；点开右侧抽屉竖排全部导航项。
============================================================ */
.sn-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
width:38px;height:34px;padding:0 8px;margin-left:2px;flex-shrink:0;
background:rgba(255,255,255,.08);border:none;border-radius:8px;cursor:pointer;}
.sn-burger span{display:block;width:100%;height:2px;border-radius:1px;background:#e8e8ee;}
.sn-burger:active{background:rgba(255,255,255,.16);}
.sn-drawer{display:none;position:fixed;inset:0;z-index:9200;}
.sn-drawer.show{display:block;}
.sn-drawer-mask{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.sn-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(78vw,300px);
background:#15151a;border-left:1px solid rgba(255,255,255,.10);
padding:calc(64px + 14px) 14px 20px;overflow-y:auto;
display:flex;flex-direction:column;gap:4px;
transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);}
.sn-drawer.show .sn-drawer-panel{transform:translateX(0);}
.sn-drawer-panel .nl{padding:13px 14px;font-size:15px;border-radius:10px;color:#c4c4ce;}
.sn-drawer-panel .nl + .nl{margin-top:2px;}
.sn-drawer-panel .nl.on{background:#2A2A2A;color:#f2f2f4;}
.sn-drawer-panel .nl.nl-hl{background:#ffd100;color:#1a1a1a;font-weight:600;}
@media(max-width:700px){
/* ★★★ 2026-10-27 方案 C（爹定）：手机上导航改「两行换行」，全部入口一眼可见。
废弃汉堡菜单 —— 爹反馈「很多买家不知道三个横是什么，也不会去点」。
· 第一行：LOGO + 登录
· 第二行：6 个导航项自动换行（.nm 用 order:3 + width:100% 顶到第二行）
· 汉堡按钮与抽屉整体隐藏（DOM 保留但不用，回滚只需改这一块） */
.shop-nav{
height:auto;min-height:64px;flex-wrap:wrap;
padding-top:9px;padding-bottom:9px;row-gap:7px;
}
.shop-nav .nm{
display:flex;flex-wrap:wrap;gap:4px;
order:3;width:100%;flex:1 1 100%;
overflow:visible;min-width:0;
}
.shop-nav .nm::-webkit-scrollbar{display:none}
.shop-nav .nl{
flex:0 0 auto;font-size:13.5px;padding:4px 10px;
margin:0;letter-spacing:normal;
}
.shop-nav .logo{flex:0 0 auto}
.shop-nav .logo .word{display:inline-block;font-size:17px}
.shop-nav .sp{display:none}
/* ★★★ 2026-10-27 修：部分页面（如出租页）自己也有 `.acts` 类（按钮区），
它们写了 `flex-direction:column` / `margin-top:22px` / `justify-content:center`，
而本文件此前只声明了 display/gap ⇒ 这些属性从页面 CSS 漏进来，
导致「闲置出租 + 登录」在手机上竖着堆叠。这里全部显式复位。 */
.shop-nav .acts{
margin-left:auto;order:2;display:flex;flex-direction:row;
align-items:center;justify-content:flex-end;
gap:6px;margin-top:0;position:static;
}
.shop-nav .sn-btn{padding:5px 12px;font-size:14px}
/* ★ 2026-10-27：JS 把「闲置出租」搬进 .acts（登录左侧），这里给它对齐导航项的字号/间距 */
.shop-nav .acts .nl{
flex:0 0 auto;font-size:13.5px;padding:4px 10px;margin:0;
line-height:1.5;white-space:nowrap;
}
/* 汉堡与抽屉整体禁用（DOM 仍在，便于回滚） */
.sn-burger{display:none!important}
.sn-drawer{display:none!important}
/* ★ 2026-10-27 爹定：手机不显示「免费加速」（桌面端保留） */
.shop-nav .nl[data-nav="accel"]{display:none!important}
}
/* 关闭按钮只在抽屉内出现（桌面端 .sn-drawer 本身 display:none，无需单独隐藏） */
/* ============================================================
★★ 全站顶部滑动公告栏（2026-10-26）：导航栏正下方
· 有公告 ⇒ 跑马灯滚动；无公告 ⇒ 前端不渲染（零痕迹）
· sticky top 与导航高度对齐：桌面 72px / 手机 64px
============================================================ */
.sn-notice{
display:none;
position:sticky;top:72px;z-index:8999;
height:34px;
background:linear-gradient(90deg,rgba(255,209,0,.10),rgba(255,209,0,.16),rgba(255,209,0,.10));
border-bottom:1px solid rgba(255,209,0,.28);
}
.sn-notice.show{ display:block; }
/* ★ 2026-10-26 爹定：只中间区域滚动，宽度与「结果页面板」一致（460px） */
.sn-notice-inner{
max-width:460px;margin:0 auto;height:100%;
display:flex;align-items:center;gap:6px;
}
/* ★ 2026-10-26 爹定（第三版）：📢 图标固定左侧不动，**只有文本在动** */
.sn-notice-icon{
flex:0 0 auto;font-size:13px;line-height:1;color:#ffd100;
padding-left:2px;
}
.sn-notice-viewport{
flex:1 1 auto;min-width:0;overflow:hidden;height:100%;
display:flex;align-items:center;justify-content:flex-start;
}
.sn-notice-track{
display:inline-block;white-space:nowrap;flex:0 0 auto;
}
.sn-notice-track.static{ margin:0 auto; }
/* ★ 滚动时长由 JS 按「超出距离」动态算（--scroll-dur），保证长短文本速度一致 */
.sn-notice-track.scrolling{
animation:snNoticeScroll var(--scroll-dur, 7s) linear infinite;
will-change:transform;
}
.sn-notice-track.scrolling:hover{ animation-play-state:paused; }
.sn-notice-text{
font-size:13px;line-height:1;font-weight:500;color:#ffd100;letter-spacing:.2px;
}
@keyframes snNoticeScroll{
0%, 6% { transform:translateX(0); } /* 起点停顿 */
88%, 100% { transform:translateX(var(--scroll-dist, 0px)); } /* 滚到底停顿，随后跳回 0 */
}
@media(prefers-reduced-motion:reduce){
.sn-notice-track.scrolling{ animation:none; }
}
@media(max-width:700px){
.sn-notice{ top:64px; height:30px; }
.sn-notice-inner{ max-width:100%;padding:0 16px; }
.sn-notice-icon{ font-size:12px; }
.sn-notice-text{ font-size:12px; }
}
/* ============================================================
★★ 公告栏「网络详情」入口 + 弹窗（2026-10-26）
入口在公告右侧，只有后台勾选网络详情模块才出现。
============================================================ */
.sn-notice-link{
display:none;flex:0 0 auto;margin-left:8px;
background:rgba(255,209,0,.14);border:1px solid rgba(255,209,0,.38);
color:#ffd100;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap;
transition:background .18s;
}
.sn-notice-link.show{ display:inline-block; }
.sn-notice-link:hover{ background:rgba(255,209,0,.26); }
.sn-netmask{
display:none;position:fixed;inset:0;z-index:9600;
background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
align-items:center;justify-content:center;padding:18px;
}
.sn-netmask.show{ display:flex; }
.sn-netbox{
width:min(92vw,520px);max-height:88vh;overflow-y:auto;
background:#16161c;border:1px solid rgba(255,255,255,.10);border-radius:16px;
padding:20px 20px 16px;box-shadow:0 24px 70px -18px rgba(0,0,0,.9);
position:relative;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
.sn-netclose{
position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;
background:rgba(255,255,255,.08);color:#c4c4ce;font-size:14px;cursor:pointer;line-height:1;
}
.sn-netclose:hover{ background:rgba(255,255,255,.16);color:#fff; }
.sn-nettitle{ font-size:17px;font-weight:700;color:#f2f2f4;text-align:center;margin-bottom:6px; }
.sn-netstatus{ text-align:center;font-size:13px;font-weight:600;margin-bottom:16px; }
.sn-netstatus.ok{ color:#4ade80; }
.sn-netstatus.warn{ color:#f5b942; }
.sn-netstatus.bad{ color:#ff6b6b; }
.sn-netcard{
background:#fff;border-radius:12px;padding:14px 12px 8px;
}
.sn-netcard h4{ font-size:14px;font-weight:700;color:#1a1a1a;margin:0 0 10px; }
.sn-netchart{ width:100%;height:190px;display:block; }
.sn-netaxis{ font-size:10px;fill:#888; }
.sn-netgrid{ stroke:#e8ecf1;stroke-width:1; }
.sn-netfoot{ margin-top:10px;text-align:center;font-size:11.5px;color:#7a7f92; }
@media(max-width:700px){
.sn-notice-link{ font-size:11px;padding:3px 8px;margin-left:6px; }
.sn-netbox{ padding:16px 14px 12px; }
.sn-netchart{ height:160px; }
}