/* ============================================================
   梦想游戏 · 首页样式（白色企业风）
   skin/game/css/index.css
   命名约定：两级以内、全站统一
   .w 容器 | .hd 顶部 | .logo 徽标 | .nav 导航 | .sch 搜索 | .bgm 音乐
   .sb 悬浮栏 | .bn 主视觉 | .sec 区块头 | .nw 新闻 | .ac 专题手风琴
   .gd 资料 | .ph 图说 | .sp 商城 | .tr 三栏 | .rk 排行 | .ft 页脚
   .md 模态（原生 dialog）
   ============================================================ */

/* ---------- 变量与基础 ---------- */
:root {
  --ac: #41618f;          /* 主色 */
  --ac-d: #2f4b73;        /* 主色深 */
  --tx: #1f2937;          /* 正文 */
  --tx2: #64748b;         /* 次要文字 */
  --bg: #ffffff;
  --bg2: #f6f8fb;         /* 区块浅底 */
  --line: #e8edf4;        /* 分隔线 */
  --r: 6px;              /* 圆角 */
  --sh: 0 6px 24px rgba(31, 41, 55, .08);      /* 浅阴影：表单/小控件 */
  --sh2: 0 14px 32px rgba(15, 23, 42, .26), 0 4px 10px rgba(15, 23, 42, .10);  /* 立体阴影：大块面 */
  --sh3: 0 10px 24px rgba(15, 23, 42, .14), 0 3px 7px rgba(15, 23, 42, .07);   /* 立体阴影：卡片 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font: 14px/1.7 "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--ac); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; border: 0; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; outline: none; }
.w { width: 1200px; max-width: 94%; margin: 0 auto; }

/* 滚动进场 */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.rv.on { opacity: 1; transform: none; }

/* 区块头（全站统一） */
.sec { display: flex; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.sec h2 { font-size: 26px; letter-spacing: 1px; position: relative; padding-left: 14px; }
.sec h2::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 5px; border-radius: 3px; background: var(--ac); }
.sec h2 small { font-size: 13px; color: var(--tx2); font-weight: 400; margin-left: 8px; letter-spacing: 2px; }
.sec .more { margin-left: auto; font-size: 13px; color: var(--tx2); }
.sec .more:hover { color: var(--ac); }

/* 通用按钮 */
.btn { display: inline-block; padding: 10px 28px; border-radius: 999px; font-size: 16px; transition: all .25s; }
.btn-pri { background: var(--ac); color: #fff; }
.btn-pri:hover { background: var(--ac-d); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(65, 97, 143, .35); }
.btn-ghost { border: 1px solid #cbd5e1; color: var(--tx); background: rgba(255, 255, 255, .85); }
.btn-ghost:hover { border-color: var(--ac); color: var(--ac); }

/* ---------- 顶部导航 ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 28px rgba(15, 23, 42, .22); }
.hd .w { display: flex; align-items: center; height: 66px; gap: 26px; position: relative; }

/* 徽标（双层图，hover 光晕扩散，同 game 站特效） */
.logo { flex: none; width: 150px; height: 44px; position: relative; display: block; z-index: 2; }
.logo, .logo::after { background: url(/skin/game/images/logo.png) no-repeat center / contain; }
.logo::after { content: ""; position: absolute; inset: 0; z-index: 1; transform-origin: center; }
.logo:hover::after { animation: logoBig 1s linear infinite; }
@keyframes logoBig { 100% { transform: scale(1.25); opacity: 0; } }

.hd nav { margin: 0 auto; transition: transform .35s ease; }
.hd.open nav { transform: translateX(-115px); }
.nav { display: flex; }
.nav > li { position: relative; }
.nav > li > a { display: block; padding: 0 16px; line-height: 66px; font-size: 16px; white-space: nowrap; }
.nav > li.on > a, .nav > li:hover > a { color: var(--ac); }
.nav > li.on > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: var(--ac); }
/* 下拉：圆角 6px；子项背景上下贴合框体（去纵向 padding + 首末项同圆角，同 dream 站） */
.sub { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 10px); min-width: 132px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--ac); border-radius: 6px; overflow: hidden; box-shadow: var(--sh); padding: 0; opacity: 0; visibility: hidden; transition: all .25s; }
.nav > li:hover .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sub a { display: block; padding: 8px 20px; font-size: 14px; text-align: center; color: var(--tx2);
    background: linear-gradient(var(--ac), var(--ac)) center / 0% 100% no-repeat;
    transition: background-size .28s ease, color .2s ease; }
.sub a:hover { color: #fff; background-size: 100% 100%; }
/* 首/末项：背景圆角与下拉框一致（6px），上下贴紧无白边过渡 */
.sub li:first-child a { border-radius: 6px 6px 0 0; }
.sub li:last-child a { border-radius: 0 0 6px 6px; }
/* 下拉颤动入场（移植 bbs mxNavPop）：缩放弹跳，透明度仍走原 transition */
@keyframes subPop {
    0%   { transform: translate(-50%, 10px) scale(.7); }
    45%  { transform: translate(-50%, 0) scale(1.05); }
    80%  { transform: translate(-50%, 0) scale(.95); }
    100% { transform: translate(-50%, 0) scale(1); }
}
.nav > li:hover .sub { animation: subPop .4s ease; }

/* 右侧功能组：搜索 + BGM，贴最右端 */
.rg { flex: none; position: relative; display: flex; align-items: center; gap: 14px; }

/* 背景音乐开关（playing 时旋转） */
.bgm { position: fixed; top: 15px; right: max(3%, calc(50% - 600px)); z-index: 101; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--tx2); display: grid; place-items: center; transition: all .3s; user-select: none; }
.bgm svg { width: 17px; height: 17px; }
.bgm:hover { border-color: var(--ac); color: var(--ac); background: rgba(65, 97, 143, .06); }
.bgm.playing { color: var(--ac); border-color: var(--ac); animation: bgmSpin 3s linear infinite; }
@keyframes bgmSpin { to { transform: rotate(360deg); } }

/* 搜索（收起只显示放大镜，点击伸缩展开；居文档流内，展开时把居中导航推向左侧让位） */
.sch { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; transition: width .35s ease, border-color .35s, background .35s; }
.sch-input { flex: 1 1 0%; width: 0; min-width: 0; height: 100%; border: 0; background: none; font-size: 14px; padding: 0 4px 0 16px; opacity: 0; transition: opacity .25s; }
.sch-input::placeholder { color: #94a3b8; }
.sch-btn { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: var(--tx2); display: grid; place-items: center; transition: all .3s; }
.sch-btn svg { width: 17px; height: 17px; transition: transform .3s; }
.sch-btn:hover { color: var(--ac); background: rgba(65, 97, 143, .06); }
.sch-btn:hover svg { transform: scale(1.1); }
/* 展开态 */
.hd.open .sch { width: 190px; border-color: var(--ac); background: #fff; box-shadow: var(--sh); }
.hd.open .sch-input { opacity: 1; transition-delay: .12s; }
.hd.open .sch-btn { color: var(--ac); }
.hd.open .sch-btn svg { transform: rotate(90deg); }

/* ---------- 右侧悬浮服务栏 ---------- */
.sb { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.sb a { position: relative; width: 84px; padding: 12px 0 10px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh3); text-align: center; color: var(--tx2); transition: all .25s; }
.sb a i { display: block; height: 26px; margin-bottom: 5px; font-size: 20px; font-style: normal; line-height: 26px; }
.sb a .ic { display: block; width: 26px; height: 26px; margin: 0 auto 5px; object-fit: contain; }
.sb a span { font-size: 13px; display: block; line-height: 1.3; }
.sb a:hover { color: var(--ac); border-color: var(--ac); transform: translateX(-3px); box-shadow: 0 18px 36px rgba(65,97,143,.28), 0 5px 12px rgba(65,97,143,.14); }
.sb .qr { position: absolute; right: calc(100% + 12px); top: 50%; width: max-content; transform: translateY(-50%) scale(.9); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 12px; opacity: 0; visibility: hidden; transition: all .25s; text-align: center; }
.sb .qr img { width: 100px; height: 100px; object-fit: cover; border-radius: 6px; display: block; margin: 0 auto; }
.sb .qr p { font-size: 13px; color: var(--tx2); margin-top: 6px; }
.sb a:hover .qr { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }

/* ---------- 主视觉（全幅 banner + 中央透明 slogan，点击弹视频） ---------- */
.bn { margin-top: 66px; height: 750px; position: relative; overflow: hidden; background: url(/skin/game/images/bn-bg.png) center / cover no-repeat; }
.bn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, #fff); pointer-events: none; }
.bn-slogan { --up: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - var(--up))); width: min(46%, 420px); z-index: 4; transition: transform .3s ease; }
.bn-slogan img { width: 100%; pointer-events: none; }
.bn-slogan:hover { transform: translate(-50%, calc(-50% - var(--up))) scale(1.05); filter: drop-shadow(0 10px 24px rgba(65, 97, 143, .25)); }

/* ---------- 新闻资讯 ---------- */
.blk { padding: 64px 0; }
.blk.gray { background: var(--bg2); }
.nw { display: grid; grid-template-columns: 520px 1fr; gap: 20px; }
.nw > * { min-width: 0; }
.nw > div { display: flex; flex-direction: column; }
.nw .panel.on { flex: 1; display: flex; flex-direction: column; }
.nw .news { flex: 1; grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; }
.nw .news li { align-items: center; }

/* 左：轮播（大图 + 底部缩略图行；首页与父栏目「大图位」通用结构） */
.car { display: flex; flex-direction: column; }
.car-main { position: relative; height: 325px; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh2); }
.car-main li { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.car-main li.on { opacity: 1; pointer-events: auto; }
.car-main .lk { display: block; width: 100%; height: 100%; }
.car-main img { width: 100%; height: 100%; object-fit: cover; }
.car-main .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: 16px; }
.car-main .cap a { color: #fff; }
/* 轮播每帧左上角：所属栏目名按钮（首页与父栏目轮播通用；取数 $bqsr.classname / classurl） */
.car-main .car-tag { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 4px 14px; border-radius: 20px; background: rgba(47, 75, 115, .85); color: #fff; font-size: 13px; line-height: 20px; white-space: nowrap; transition: background .25s, transform .25s; }
.car-main .car-tag:hover { background: var(--ac); color: #fff; transform: translateY(-1px); }
.car-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .75); color: var(--tx); font-size: 16px; display: grid; place-items: center; opacity: 0; cursor: pointer; transition: opacity .3s; }
.car:hover .car-arr { opacity: 1; }
.car-arr:hover { background: var(--ac); color: #fff; }
.car-arr.l { left: 12px; }
.car-arr.r { right: 12px; }
.car-dot { position: absolute; right: 20px; bottom: 25px; display: flex; align-items: center; gap: 7px; }
.car-dot i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; transition: all .3s; }
.car-dot i.on { width: 24px; border-radius: 5px; background: var(--ac); }
/* 底部缩略图行：4 x 120x75（hover 上浮 / 当前项描边） */
.car-thumbs { display: grid; grid-template-columns: repeat(4, 120px); justify-content: space-between; margin: 20px 0 0; padding: 0; list-style: none; }
.car-thumbs li { width: 120px; height: 75px; border-radius: 4px; overflow: hidden; cursor: pointer; opacity: .6; box-shadow: 0 6px 14px rgba(15, 23, 42, .18), 0 2px 5px rgba(15, 23, 42, .08); transition: opacity .3s, box-shadow .3s, transform .3s; }
.car-thumbs li:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 14px 26px rgba(15, 23, 42, .28), 0 4px 9px rgba(15, 23, 42, .14); }
.car-thumbs li.on { opacity: 1; box-shadow: 0 0 0 2px var(--ac), 0 8px 18px rgba(15, 23, 42, .22); }
.car-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 右栏底部：专题活动手风琴广告（JS 加 .aa/.bb 展开收拢，移出归位并左右震荡） */
.ggad { display: flex; height: 75px; margin-top: 20px; }
.ggad-i { flex: none; width: 120px; height: 75px; overflow: hidden; margin-left: 15px; transition: width .45s cubic-bezier(.33, 1, .68, 1), margin-left .45s cubic-bezier(.33, 1, .68, 1); }
.ggad-i:first-child { margin-left: 0; }
.ggad-i a { display: flex; width: 525px; height: 75px; }
.ggad-p { flex: none; display: block; width: 120px; height: 75px; object-fit: cover; border-radius: 4px; }
.ggad-s { flex: none; display: block; margin-left: 15px; width: 390px; height: 75px; object-fit: cover; }
.ggad-i.aa { width: 525px; }
.ggad-i.bb { width: 0; margin-left: 0; }
@keyframes ggadWobble {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(-10px); }
  32%  { transform: translateX(9px); }
  48%  { transform: translateX(-7px); }
  64%  { transform: translateX(5px); }
  80%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.ggad.wobble { animation: ggadWobble .7s ease-in-out; }

/* 右：标签 + 列表 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tabs a, .tabs li { padding: 10px 18px; font-size: 16px; color: var(--tx2); cursor: pointer; position: relative; white-space: nowrap; }
.tabs .on { color: var(--ac); font-weight: 600; }
.tabs .on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--ac); }

/* 新闻右栏头部：标题 + 选项卡 + 更多 同排 */
.nhd { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.n-tt { flex: none; width: 520px; display: flex; align-items: center; font-size: 19px; font-weight: 700; white-space: nowrap; color: var(--tx); }
.n-tt::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: var(--ac); margin-right: 10px; }
.n-tt:hover { color: var(--ac); }
.nhd .tabs { flex: 1; min-width: 0; border-bottom: 0; margin: 0; padding-left: 20px; }
.nhd .tabs li { padding: 0; }
.nhd .tabs a { padding: 10px 20px; font-size: 15px; }
.nhd .tabs .on::after { left: 14px; right: 14px; bottom: -1px; }
.nhd .more { flex: none; margin-left: auto; display: flex; align-items: center; padding-left: 10px; font-size: 13px; white-space: nowrap; color: var(--tx2); }
.nhd .more:hover { color: var(--ac); }
.panel { display: none; }
.panel.on { display: block; animation: fade .4s; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.rec { display: block; padding: 6px 4px 13px; border-bottom: 1px dashed var(--line); text-align: center; }
.rec b { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; transition: color .2s, transform .2s; }
.rec:hover b { color: var(--ac); transform: translateX(3px); }
.rec p { font-size: 14px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.news li { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.news .d { flex: none; width: 40px; text-align: center; line-height: 1.15; color: var(--tx2); }
.news .d b { display: block; font-size: 16px; color: var(--tx); font-weight: 600; }
.news .tag { flex: none; font-size: 13px; color: var(--ac); background: rgba(65, 97, 143, .08); border-radius: 4px; padding: 2px 6px; }
.news .t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s, transform .2s; }
.news li:hover .t { color: var(--ac); transform: translateX(3px); }

/* ---------- 精彩专题：一行四列手风琴（hover 展开当前列，其余收缩） ---------- */
.ac { display: flex; height: 199px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh2); }
.ac > li { position: relative; flex: none; width: 25%; height: 100%; overflow: hidden; transition: width .5s ease; }
/* 列间竖线：默认态与封面图等高（inset 15px）、中段实两端渐隐；
   hover 展开态（on 当前列 / sm 收缩列）竖线满格高实线（20261017b，与原 opacity:0 隐藏行为统一改为满格） */
.ac > li + li::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: linear-gradient(to bottom, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent); z-index: 1; transition: top .3s ease, bottom .3s ease, background .3s ease; }
.ac > li.on::before, .ac > li.sm::before { top: 0; bottom: 0; background: #cbd5e1; }
.ac > li.sm { width: 16.6%; }
.ac > li.on { width: 50%; }
.ac-cv { position: absolute; left: 15px; right: 15px; top: 15px; height: 169px; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 16px rgba(15, 23, 42, .18); }
.ac-cv img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ac-cv:hover img { transform: scale(1.04); }
.ac-cv span, .ac-top span { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-bd { position: absolute; inset: 0; display: none; }
.ac > li.on .ac-cv { display: none; }
.ac > li.on .ac-bd { display: flex; }
.ac-l { position: relative; flex: none; width: 302px; }
.ac-l::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ac-top { position: absolute; inset: 15px; display: block; border-radius: 6px; overflow: hidden; }
.ac-top img { width: 100%; height: 100%; object-fit: cover; }
.ac-top span { padding: 30px 12px 10px; }
.ac-add { position: absolute; left: 25px; top: 25px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ac); font-size: 17px; font-weight: 700; line-height: 1; display: grid; place-items: center; transition: all .2s; }
.ac-add::before { content: "+"; }
.ac-add:hover { background: var(--ac); color: #fff; }
.ac-r { flex: 1; min-width: 0; align-self: center; height: 169px; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; overflow: hidden; }
.ac-r li { display: flex; align-items: center; gap: 10px; height: 36px; border-bottom: 1px dashed var(--line); }
.ac-r li:last-child { border-bottom: 0; }
.ac-r a { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s, transform .2s; }
.ac-r a::before { content: "\00BB"; margin-right: 6px; font-weight: 700; color: var(--ac); }
.ac-r li:hover a { color: var(--ac); transform: translateX(3px); }
.ac-r span { font-size: 13px; color: #94a3b8; }

/* ---------- 图说 + 资料 ---------- */
.duo { display: grid; grid-template-columns: 560px 1fr; gap: 20px; align-items: start; }
.duo > * { min-width: 0; }
.duo .sec { gap: 20px; margin-bottom: 20px; height: 44px; align-items: center; }
.duo .sec h2 { font-size: 20px; }
.duo .sec h2 small { letter-spacing: 1px; }
.duo .sec .tabs { flex: 1; min-width: 0; }
.duo .sec .tabs a, .duo .sec .tabs li { padding: 10px 0px 10px 15px; font-size: 15px; }
.duo .sec { border-bottom: 1px solid var(--line); }
.duo .sec .tabs { border-bottom: 0; margin-bottom: 0; }
.duo .sec .tabs .on::after { left: 20px; right: -10px; bottom: -1px; }

/* 左：图说游戏 2×2 大卡（default 底部标题条，hover 下沉变暗 + 按钮居中放大） */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; height: 170px; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); }
.card .im { height: 100%; }
.card .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .im img { transform: scale(1.06); }
.card .tt { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .35s ease, opacity .35s ease; }
.card:hover .tt { transform: translateY(100%); opacity: 0; }
.card .mk { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; opacity: 0; transition: opacity .3s; cursor: zoom-in; }
.card:hover .mk { opacity: 1; }
.card .mk b { color: #fff; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; padding: 6px 18px; font-weight: 400; font-size: 13px; transform: scale(.85); transition: transform .3s; }
.card:hover .mk b { transform: scale(1); }

/* 右：游戏资料 封面手风琴（收起为封面竖条，悬停展开链接列表） */
.gd { display: flex; height: 356px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh2); }
.gd li { position: relative; flex: 1 1 110px; height: 100%; overflow: hidden; transition: flex-basis .4s ease, flex-grow .4s ease, flex-shrink .4s ease; }
.gd li + li { border-left: 1px solid var(--line); }
.gd li.on { flex: 0 0 284px; }
.gd .gd-tab { position: absolute; right: 0; top: 0; bottom: 0; width: 110px; display: block; cursor: pointer; text-indent: -9999px; overflow: hidden; background: url(/skin/game/images/tab.png) no-repeat; background-size: 440px 712px; }
.gd li:nth-child(1) .gd-tab { background-position: 0 0; }
.gd li:nth-child(2) .gd-tab { background-position: -110px 0; }
.gd li:nth-child(3) .gd-tab { background-position: -220px 0; }
.gd li:nth-child(4) .gd-tab { background-position: -330px 0; }
.gd li:hover .gd-tab { background-position-y: -356px; }
.gd-body { position: absolute; left: 0; top: 0; right: 100px; bottom: 0; padding: 14px 24px 44px 14px; display: none; }
.gd li.on .gd-body { display: block; }
/* 四字小标题：仿下载演示页文字框（边框方框+蓝字，hover 实底），紧凑版；8 行满布上下均匀 */
.gd-cols { column-count: 2; column-gap: 10px; }
.gd-cols a { display: block; border: 1px solid #ddd; text-align: center; font-size: 12px; color: var(--ac); height: 30px; line-height: 28px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; transition: all .2s; }
.gd-cols a:hover { color: #fff; background: var(--ac); border-color: var(--ac); }
.gd-more { position: absolute; bottom: 12px; right: 55px; font-size: 13px; color: var(--ac); }

/* ---------- 商城展示 ---------- */
/* ---------- 商城：手风琴 default 式四列（外框+渐隐分割线+封面留白），hover 遮罩文字飞入 ---------- */
/* 外框与通栏手风琴 .ac 完全同款：185px 高、重阴影、列间竖向渐隐线；封面 inset 15px、高 155px 圆角 8px */
.sp { display: flex; height: 199px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh2); }
.sp li { position: relative; flex: none; width: 25%; height: 100%; overflow: hidden; }
/* 列间竖线：默认态与封面图等高（inset 15px）、中段实两端渐隐；
   hover 态相邻竖线满格高实线（20261017b，与原 opacity:0 隐藏行为统一改为满格） */
.sp li + li::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: linear-gradient(to bottom, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent); z-index: 1; transition: top .3s ease, bottom .3s ease, background .3s ease; }
.sp li:hover::before, .sp li:hover + li::before { top: 0; bottom: 0; background: #cbd5e1; }
.sp .sp-cv { position: absolute; left: 15px; right: 15px; top: 15px; height: 169px; display: block; overflow: hidden; border-radius: 6px; box-shadow: 0 6px 16px rgba(15, 23, 42, .18); }
.sp .sp-cv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sp li:hover .sp-cv img { transform: scale(1.05); }
.sp .sp-i { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); color: #fff; transition: transform .45s ease, opacity .45s ease; }
.sp .sp-i b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .sp-i .p { flex: none; font-style: normal; font-size: 13px; color: #ffc14d; }
.sp .sp-i .p em { font-style: normal; font-size: 18px; font-weight: 700; }
.sp li:hover .sp-i { transform: translateY(100%); opacity: 0; }
.sp .sp-mk { position: absolute; left: 15px; right: 15px; top: 15px; height: 169px; padding: 14px 12px 12px; background: rgba(15, 23, 42, .78); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; border-radius: 6px; transform: translateX(-130%); transition: transform .35s ease; }
.sp li:hover .sp-mk { transform: translateX(0); }
.sp .sp-mk .t { font-size: 16px; font-weight: 600; }
.sp .sp-mk p { max-width: 100%; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .sp-mk .p { font-size: 13px; color: #ffc14d; }
.sp .sp-mk .p em { font-style: normal; font-size: 18px; font-weight: 700; }
.sp .sp-mk .btn { padding: 6px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-size: 13px; white-space: nowrap; transition: background .2s, border-color .2s; }
.sp .sp-mk .btn:hover { background: var(--ac); border-color: var(--ac); }
/* 遮罩内文字依次飞入：标题→描述→价格→按钮，错峰上浮；移出时立即复位 */
.sp .sp-mk > * { opacity: 0; transform: translateY(22px); transition: opacity .28s ease, transform .28s ease; transition-delay: 0s; }
.sp li:hover .sp-mk > .t { opacity: 1; transform: none; transition-delay: .12s; }
.sp li:hover .sp-mk > p { opacity: 1; transform: none; transition-delay: .24s; }
.sp li:hover .sp-mk > .p { opacity: 1; transform: none; transition-delay: .36s; }
.sp li:hover .sp-mk > .btn { opacity: 1; transform: none; transition-delay: .48s; }

/* ---------- 三栏排行 ---------- */
/* ---------- 三栏：下载 / 影音 / 文档（移植 game extra-row 排行版式） ---------- */
/* 列高 384px 与上方图说/资料板块(.duo)一致；列表交互：首条默认高亮展开，hover 切换，缩略图宽度动画 */
.tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tr .col { display: flex; flex-direction: column; height: 408px; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh2); }
/* 右侧内边距取 17px，与列表项内的时间 .dt（right:17px）同一基线：头部"更多"与下方时间右对齐 */
.tr .sec { flex: none; height: 44px; margin: 0; padding: 0 17px 0 15px; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.tr .sec h2 { font-size: 18px; flex: none; white-space: nowrap; padding-left: 8px; }
/* 选项卡 li 清空外层内边距（基础 .tabs li 的 10px 18px 会与内层 a 叠加，2 枚即超宽把"更多"挤出卡片） */
.tr .tabs { border: 0; margin: 0 8px 0 auto; }
.tr .tabs li { padding: 0; }
.tr .tabs a { padding: 6px 10px; font-size: 15px; }
.tr .tabs li + li { margin-left: 2px; }
.tr .tabs .on::after { left: 10px; right: 10px; bottom: 0; }
.tr .sec .more { flex: none; white-space: nowrap; margin-left: 0; }
.tr .bd { position: relative; flex: 1; overflow: hidden; padding: 15px 0 0; }
.tr .panel { position: absolute; inset: 15px 15px 0; opacity: 0; transform: translateX(12px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.tr .panel.on { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
.rk li { display: flex; align-items: center; position: relative; height: 58px; padding: 0 15px; border-bottom: 1px dashed var(--line); transition: background .25s ease; cursor: pointer; overflow: hidden; }
.rk li:last-child { border-bottom: 0; }
.rk li.on { background: linear-gradient(90deg, rgba(65, 97, 143, .07), rgba(65, 97, 143, .02)); }
.rk li:hover { background: rgba(65, 97, 143, .06); }
.rk .no { flex: none; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; background: var(--bg2); color: var(--tx2); font-size: 13px; font-style: normal; margin-right: 10px; transition: transform .25s ease; }
.rk li:hover .no { transform: translateY(-3px); }
.rk .no.top { color: #fff; }
.rk li:nth-child(1) .no.top { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.rk li:nth-child(2) .no.top { background: linear-gradient(135deg, #f1c40f, #d4ac0d); }
.rk li:nth-child(3) .no.top { background: linear-gradient(135deg, #4a7ba6, #35597f); }
.rk .im { flex: none; width: 0; height: 45px; overflow: hidden; border-radius: 4px; opacity: 0; transition: width .3s ease, margin-right .3s ease, opacity .3s ease; }
.rk .im img { width: 72px; height: 45px; object-fit: cover; display: block; border-radius: 4px; }
.rk li.on .im, .rk li:hover .im { width: 72px; margin-right: 10px; opacity: 1; }
.rk .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.rk .info .t { display: block; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.rk li.on .info .t, .rk li:hover .info .t { color: var(--ac); }
.rk .info .m { display: none; align-items: center; gap: 8px; margin-top: 2px; font-size: 13px; color: var(--tx2); }
.rk li.on .info .m, .rk li:hover .info .m { display: flex; }
.rk .info .m a { padding: 1px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ac); background: rgba(65, 97, 143, .05); white-space: nowrap; transition: all .2s; display: inline-block; }
.rk .info .m a:hover { color: #fff; background: var(--ac); border-color: var(--ac); transform: none; }
.rk .dt { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #94a3b8; font-weight: 600; transition: top .25s ease; pointer-events: none; }
.rk li:hover .dt { top: 70%; }
.rk li.on .dt { top: 70%; }
.rk:has(li:hover) li.on:not(:hover) .dt { top: 50%; }

/* ---------- 页脚 ---------- */
.ft { background: #24313f; color: #9aa9ba; }
.ft-top { display: grid; grid-template-columns: repeat(7, 1fr) auto; gap: 20px; padding: 64px 0 40px; }
.ft h3 { font-size: 16px; color: #fff; font-weight: 600; margin-bottom: 14px; }
.ft h3 a:hover { color: var(--ac); }
.ft li { padding: 4px 0; font-size: 13px; }
.ft li a { color: #94a3b8; display: inline-block; transition: color .2s, transform .2s; }
.ft li a:hover { color: #fff; transform: translateX(3px); }
.ft-qr { display: flex; gap: 14px; }
.ft-qr img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.ft-copy { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; text-align: center; font-size: 13px; }
.ft-copy a { color: #cbd5e1; }
.ft-copy a:hover { color: var(--ac); }
.ft-m { margin-top: 12px; }
.ft-mbtn { display: inline-block; padding: 7px 26px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; color: #cbd5e1; font-size: 13px; transition: all .2s; }
.ft-mbtn:hover { background: var(--ac); border-color: var(--ac); color: #fff; }

/* ---------- 模态（原生 dialog，全站统一） ---------- */
dialog.md { position: fixed; inset: 0; margin: auto; border: 0; border-radius: 0; padding: 0; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); width: fit-content; max-width: 88vw; overflow: visible; }
dialog.md[open] { animation: mdIn .28s ease; }
@keyframes mdIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
dialog.md::backdrop { background: rgba(15, 23, 42, .78); backdrop-filter: blur(4px); animation: mdBg .28s ease; }
@keyframes mdBg { from { opacity: 0; } to { opacity: 1; } }
/* 弹窗关闭按钮（全站统一：视频/图集/后续弹窗共用 .md-x；dialog 会裁负偏移，须放框内） */
.md-x { position: absolute; top: 0; right: -40px; z-index: 5; width: 40px; height: 40px; background: url(/skin/game/images/close1.png) center / 40px 40px no-repeat; cursor: pointer; transition: transform .3s ease; }
.md-x:hover { transform: rotate(180deg); }
dialog.md.md-video { width: min(1080px, 88vw, calc(82vh * 1.6)); aspect-ratio: 16 / 10; background: #000; border-radius: 0; }
dialog.md.md-video video { width: 100%; height: 100%; display: block; border-radius: 0; object-fit: contain; }
/* 音频：与视频同框（同 1080×675），封面图铺底 + 底部播放条，全站视频/音频弹窗尺寸一致 */
dialog.md.md-video.md-audio { background-color: #0f172a; background-position: center; background-size: cover; background-repeat: no-repeat; }
dialog.md.md-video.md-audio::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .3) 46%, rgba(15, 23, 42, .9)); }
dialog.md.md-video.md-audio video { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); width: min(680px, 76%); height: 52px; z-index: 2; object-fit: contain; }

/* 图集模态 */
dialog.md-alb { --albW: min(1080px, calc(100vw - 130px), calc(82vh * 1.6)); background: transparent; box-shadow: none; }
.md-alb .alb-box { position: relative; width: var(--albW); height: calc(var(--albW) * .625); overflow: hidden; background: #0f172a; }
.md-alb .alb-wrapper { display: flex; height: 100%; transition: transform .5s cubic-bezier(.25, .1, .25, 1); }
.md-alb .alb-slide { flex: 0 0 auto; width: var(--albW); height: 100%; margin-right: 30px; }
.md-alb .alb-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.md-alb .alb-shade { position: absolute; left: 0; bottom: 0; width: 100%; height: 45px; background: rgba(0, 0, 0, .3); pointer-events: none; }
.md-alb .alb-dot { position: absolute; left: 20px; bottom: 14px; display: flex; gap: 8px; }
.md-alb .alb-dot i { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: .5; cursor: pointer; transition: all .3s; }
.md-alb .alb-dot i.on { opacity: 1; background: var(--ac); transform: scale(1.1); }
.md-alb .alb-cap { position: absolute; right: 20px; bottom: 14px; max-width: 62%; height: 22px; line-height: 22px; color: #fff; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-alb .alb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 86px; border: 0; padding: 0; background: rgba(0, 0, 0, .8); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.md-alb .alb-nav::after { content: ""; display: block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.md-alb .alb-nav.l { left: -40px; }
.md-alb .alb-nav.r { right: -40px; }
.md-alb .alb-nav.l::after { border-right: 12px solid #fff; margin-left: 4px; }
.md-alb .alb-nav.r::after { border-left: 12px solid #fff; margin-right: 4px; }
.md-alb .alb-nav:hover { background: var(--ac); }
.md-alb .alb-nav.off { display: none; }

/* ---------- 返回顶部 ---------- */
.gotop { position: fixed; right: 14px; bottom: 40px; z-index: 90; width: 84px; height: 70px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh3); color: var(--tx2); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: all .3s; }
.gotop.on { opacity: 1; visibility: visible; }
.gotop:hover { background: var(--ac); border-color: var(--ac); color: #fff; }
.gotop svg { width: 40px; height: 40px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .nw, .duo { grid-template-columns: 1fr; }
  .gd li { flex: 0 0 80px; }
  .gd li.on { flex: 0 0 calc(100% - 240px); }
  .gd-body { right: 80px; }
  .sp { flex-wrap: wrap; height: auto; }
  .sp li { width: 50%; height: 199px; }
  .ac { flex-wrap: wrap; height: auto; }
  .ac > li, .ac > li.sm, .ac > li.on { width: 50%; height: 200px; }
  .tr { grid-template-columns: 1fr; }
  .bn { height: 440px; }
  .bn-slogan { width: 58%; --up: 26px; }
  .ft-top { grid-template-columns: repeat(3, 1fr); }
  .sb { display: none; }
  .nav { display: none; }
  .hd.open .sch { width: 160px; }
  .rg { margin-left: auto; }
}
@media (max-width: 720px) {
  .hd .w { gap: 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd li { flex: 0 0 56px; }
  .gd li.on { flex: 0 0 calc(100% - 168px); }
  .gd-body { right: 56px; padding: 12px 12px 38px; }
  .sp li { width: 100%; }
  .ac > li, .ac > li.sm, .ac > li.on { width: 100%; }
  .bn { height: 340px; }
  .bn-slogan { width: 72%; --up: 18px; }
  .ft-top { grid-template-columns: repeat(2, 1fr); }
  .hd.open .sch { width: 140px; }
  .sch-input { font-size: 13px; }
}

/* ---------- banner 底部快捷导航（移植 game quick-nav，白蓝主题） ---------- */
@keyframes qn-spin       { to { transform: rotate(360deg); } }
@keyframes qn-spin-rev   { to { transform: rotate(-360deg); } }
@keyframes qn-core-pulse { 0%,100% { box-shadow: 0 0 14px rgba(65,97,143,.45); } 50% { box-shadow: 0 0 24px rgba(65,97,143,.8); } }
@keyframes qn-dot-pulse  { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.35); } }
@keyframes qn-arrow      { 0%,100% { opacity:.26; } 50% { opacity:1; } }

.qn { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; z-index: 15; white-space: nowrap; }
/* 半透明白色背景带（随 .active 收缩消失） */
.qn::before { content: ""; position: absolute; top: 50%; left: 50%; height: 92px; margin-top: -46px; width: 1066px; margin-left: -533px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 8%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.32) 92%, rgba(255,255,255,0) 100%);  z-index: 1; transition: transform 1.2s cubic-bezier(.25,0,.2,1); pointer-events: none; }
.qn.active::before { transform: scaleX(0); }

/* 中央圆钮（旋转环 + 星芒 + 蓝色核心） */
.qn-btn { position: relative; width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0; z-index: 5; background: transparent; padding: 0; }
.qn-btn:active { transform: scale(.94); }
.qn-ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; margin: -44px 0 0 -44px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(65, 97, 143, .85); border-right-color: rgba(65, 97, 143, .30); animation: qn-spin 5s linear infinite; box-shadow: 0 0 16px rgba(65, 97, 143, .22); }
.qn-star { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; animation: qn-spin-rev 6s linear infinite; }
.qn-star::before, .qn-star::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 50%; left: 50%; margin: -2.5px 0 0 -2.5px; background: rgba(65, 97, 143, .8); box-shadow: -27px 0 0 rgba(65,97,143,.55), 27px 0 0 rgba(65,97,143,.55), 0 -27px 0 rgba(65,97,143,.55), 0 27px 0 rgba(65,97,143,.55); }
.qn-star::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: rgba(65, 97, 143, .9); box-shadow: -19px -19px 0 rgba(65,97,143,.45), 19px -19px 0 rgba(65,97,143,.45), -19px 19px 0 rgba(65,97,143,.45), 19px 19px 0 rgba(65,97,143,.45); }
.qn-core { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #eff3f8 0%, #7389a8 55%, #2f4b73 100%); animation: qn-core-pulse 2.4s ease-in-out infinite; transition: box-shadow .3s; }
.qn-btn:hover .qn-core { box-shadow: 0 0 28px rgba(65, 97, 143, .7); }
.qn-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; animation: qn-dot-pulse 2s ease-in-out infinite; }

/* 指向圆钮的三连箭头（尾亮头暗渐变呼吸；收缩时翻转朝外，渐变随镜像保持尾亮头暗） */
.qn-arrows { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 18px; z-index: 4; margin: 0 14px; }
.qn-arrows i { display: block; width: 11px; height: 18px; transition: transform .6s cubic-bezier(.25,0,.2,1); animation: qn-arrow 2.4s ease-in-out infinite; }
.qn-ar-l i  { background-image: linear-gradient(90deg, rgba(65, 97, 143, .95), rgba(65, 97, 143, .12)); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.qn-ar-r i  { background-image: linear-gradient(270deg, rgba(65, 97, 143, .95), rgba(65, 97, 143, .12)); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
/* 呼吸此起彼伏：始终由箭尾流向箭头（左列指向右→顺序左起，右列指向左→顺序右起） */
.qn:not(.active) .qn-ar-l i:nth-child(2) { animation-delay: .35s; }
.qn:not(.active) .qn-ar-l i:nth-child(3) { animation-delay: .70s; }
.qn:not(.active) .qn-ar-r i:nth-child(1) { animation-delay: .70s; }
.qn:not(.active) .qn-ar-r i:nth-child(2) { animation-delay: .35s; }
.qn.active .qn-arrows i { transform: scaleX(-1); }
/* 收缩态箭头朝外，尾端换到另一侧，顺序镜像，仍是尾→头 */
.qn.active .qn-ar-l i:nth-child(1) { animation-delay: .70s; }
.qn.active .qn-ar-l i:nth-child(2) { animation-delay: .35s; }
.qn.active .qn-ar-r i:nth-child(2) { animation-delay: .35s; }
.qn.active .qn-ar-r i:nth-child(3) { animation-delay: .70s; }

/* 两侧容器（宽度 416→0 收缩） */
.qn-side { position: relative; height: 92px; z-index: 3; overflow: hidden; flex-shrink: 0; width: 416px; transition: width 1.2s cubic-bezier(.25,0,.2,1); }
.qn.active .qn-side { width: 0; }

/* 白色卡片按钮（图标+文字，hover 上浮变蓝） */
/* 图标项：hover 双帧上推（hover 帧自下推入 / default 帧同速上推隐藏 / 标题延迟跟上），
   整卡不做位移，避免指针贴边时 hover 抖动（同 game .all_btn 禁 transform 的做法） */
.qn-item { position: absolute; top: 9px; width: 120px; height: 74px; overflow: hidden; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 16px rgba(15, 23, 42, .12); opacity: 0; transition: opacity .5s ease, border-color .25s, box-shadow .25s; }
.qn-fl { display: block; position: absolute; inset: 0; transition: transform .62s cubic-bezier(.25, 0, .2, 1); }
.qn-fc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 74px; }
.qn-fc svg { width: 24px; height: 24px; color: var(--tx2); }
.qn-fc em { font-style: normal; font-size: 13px; font-weight: 500; line-height: 19px; color: var(--tx); }
.qn-fc.on { background: linear-gradient(180deg, #7389a8 0%, var(--ac) 55%, #2f4b73 100%); }
.qn-fc.on svg { color: #fff; }
.qn-fc.on em { color: #fff; transform: translateY(15px); transition: transform .46s cubic-bezier(.25, 0, .2, 1) .24s; }
.qn-item:hover { border-color: var(--ac); box-shadow: 0 12px 26px rgba(65, 97, 143, .30); }
.qn-item:hover .qn-fl { transform: translateY(-74px); }
.qn-item:hover .qn-fc.on em { transform: translateY(0); }
/* 图标精灵容器（隐藏） */
.qp { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 卡片定位（左列锚右、右列锚左） */
/* 百分比定位（同 game .all_btn 的 5.4/35.4/65.4%）：
   容器宽度收缩时卡片随比例移动 —— 越外侧位移越大（最外 ~272px、最内 ~22px），
   与半透明背景带 1.2s 同步向外推开 / 向圆钮回拢，而非静止被裁切 */
.qn-left  .qn-item:nth-child(3) { right: 5.4%; }
.qn-left  .qn-item:nth-child(2) { right: 35.4%; }
.qn-left  .qn-item:nth-child(1) { right: 65.4%; }
.qn-right .qn-item:nth-child(1) { left: 5.4%; }
.qn-right .qn-item:nth-child(2) { left: 35.4%; }
.qn-right .qn-item:nth-child(3) { left: 65.4%; }

/* 展开：靠近圆钮先浮现 */
.qn:not(.active) .qn-left  .qn-item:nth-child(3) { opacity: 1; transition-delay: .05s; }
.qn:not(.active) .qn-left  .qn-item:nth-child(2) { opacity: 1; transition-delay: .18s; }
.qn:not(.active) .qn-left  .qn-item:nth-child(1) { opacity: 1; transition-delay: .31s; }
.qn:not(.active) .qn-right .qn-item:nth-child(1) { opacity: 1; transition-delay: .05s; }
.qn:not(.active) .qn-right .qn-item:nth-child(2) { opacity: 1; transition-delay: .18s; }
.qn:not(.active) .qn-right .qn-item:nth-child(3) { opacity: 1; transition-delay: .31s; }
/* 收缩：外侧先隐去 */
.qn.active .qn-left  .qn-item:nth-child(1) { opacity: 0; transition-delay: 0s; }
.qn.active .qn-left  .qn-item:nth-child(2) { opacity: 0; transition-delay: .13s; }
.qn.active .qn-left  .qn-item:nth-child(3) { opacity: 0; transition-delay: .26s; }
.qn.active .qn-right .qn-item:nth-child(3) { opacity: 0; transition-delay: 0s; }
.qn.active .qn-right .qn-item:nth-child(2) { opacity: 0; transition-delay: .13s; }
.qn.active .qn-right .qn-item:nth-child(1) { opacity: 0; transition-delay: .26s; }

@media (max-width: 1180px) { .qn { transform: translateX(-50%) scale(.86); transform-origin: center bottom; } }
@media (max-width: 760px)  { .qn { display: none; } }
/* ---------- 服务栏适龄提示 + 弹窗 ---------- */
/* 适龄卡：图片自带文字，无标题；图片撑满卡片 */
.sb a#sbAge { padding: 5px 6px; }
.sb a .ic-age { width: 100%; height: auto; margin: 0; object-fit: contain; }
dialog.md-age { width: min(800px, 84vw); max-height: 84vh; }
.age-box { padding: 26px 34px 24px; overflow-y: auto; max-height: 84vh; }
.age-box .age-logo { display: block; width: 62px; height: 76px; margin: 0 auto 6px; }
.age-box h3 { margin: 0 0 10px; text-align: center; color: var(--ac); font-size: 20px; letter-spacing: 2px; }
.age-box p { margin: 6px 0; color: var(--tx2); font-size: 13px; line-height: 1.85; text-align: justify; }
.age-ok { display: block; margin: 16px auto 0; padding: 9px 36px; border: 0; border-radius: 999px; background: var(--ac); color: #fff; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: box-shadow .25s, transform .25s; }
.age-ok:hover { box-shadow: 0 8px 22px rgba(65, 97, 143, .4); transform: translateY(-2px); }