@charset "utf-8";
/* 冰雪传奇点卡版 · 极光雪境 Design System - PC base.css（明亮冰雪主题） */
:root{
  --bg:#f4faff; --bg-2:#e9f4fd;
  --panel:#ffffff; --panel-h:#f2faff;
  --line:rgba(14,110,170,.16); --line-h:rgba(14,110,170,.34);
  --txt:#0c2b46; --txt-2:#3a5a78; --txt-3:#6b8298;
  --ice:#0d8ecf; --ice-2:#25b3e6; --ice-3:#0b5f96; --ice-4:#4fd3f7;
  --gold:#ff9d2e; --gold-2:#ff7a18;
  --ok:#0f9d76; --warn:#d98207; --bad:#d9473f;
  --r:14px; --r-lg:20px; --r-sm:8px;
  --glow:0 0 0 1px rgba(20,140,205,.20),0 14px 34px rgba(16,90,150,.15);
  --shadow:0 18px 44px rgba(16,84,140,.14);
  --maxw:1200px;
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --num:"Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; color:var(--txt-2); font:400 16px/1.85 var(--font);
  background:var(--bg); overflow-x:hidden;
  background-image:
    radial-gradient(1200px 720px at 50% 108%,rgba(206,235,253,.85),transparent 66%);
  background-position:0 0;
  background-size:auto;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(13,110,180,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(13,110,180,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(900px 620px at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(900px 620px at 50% 0%,#000,transparent 78%);
}
/* 全站装饰边框：固定覆盖层，与导航栏顶部平齐（从页面顶边开始），层级低于导航栏所以不遮挡导航内容，不拦截点击 */
body::after{display:none}
body.home::after{
  content:""; position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:59;
  background:url("../img/frame.png") center center/100% 100% no-repeat;
  display:block;
}
body>*{position:relative; z-index:1}
a{color:inherit; text-decoration:none; transition:color .2s,opacity .2s}
img{max-width:100%; display:block; border:0}
h1,h2,h3,h4{margin:0; color:var(--txt); font-weight:700; line-height:1.25}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
.w{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ============ 按钮 ============ */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 30px; border-radius:999px; border:1px solid transparent;
  font:600 15px/1 var(--font); letter-spacing:.02em; cursor:pointer;
  transition:transform .2s,box-shadow .25s,filter .2s;
}
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:38%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.btn:hover::after{opacity:1; left:120%; transition:left .75s ease,opacity .2s}
.btn-ghost::after{background:linear-gradient(100deg,rgba(13,142,207,0),rgba(13,142,207,.16),rgba(13,142,207,0))}
.btn-ice{background:linear-gradient(135deg,#0d8ecf,#3fc3f0); color:#fff; box-shadow:0 10px 26px rgba(13,142,207,.30)}
.btn-ice:hover{transform:translateY(-2px); filter:saturate(1.1) brightness(1.04); box-shadow:0 14px 34px rgba(13,142,207,.40)}
.btn-gold{background:linear-gradient(135deg,#ffb03a,#ff7a18); color:#4a2400; box-shadow:0 10px 26px rgba(255,140,40,.34)}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 14px 34px rgba(255,140,40,.44)}
.btn-ghost{background:rgba(255,255,255,.8); color:var(--txt); border-color:var(--line)}
.btn-ghost:hover{background:#fff; border-color:var(--line-h); color:var(--ice-3)}
.btn-sm{padding:9px 20px; font-size:14px}

/* ============ 头部 ============ */
.hd{position:fixed; top:0; left:0; right:0; z-index:60; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.25); box-shadow:none}
.hd .w{display:flex; align-items:center; gap:28px; height:70px}
body{padding-top:70px}
.logo{display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.logo img{height:56px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0}
.nav a{padding:8px 14px; border-radius:999px; font:500 15px/1 var(--font); color:var(--txt-2); white-space:nowrap}
.nav a:hover{color:var(--ice-3); background:var(--panel-h)}
.nav a.on{color:var(--ice-3); background:rgba(13,142,207,.10); box-shadow:inset 0 0 0 1px rgba(13,142,207,.22)}
.hd-act{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.hambtn{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.9); cursor:pointer; padding:0}
.hambtn span{display:block; width:18px; height:2px; margin:4px auto; background:var(--txt); border-radius:2px}

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden; margin-top:-70px; padding:110px 0 78px;
  background:#cbe7fa url("../img/hero-bg.jpg") center top/cover no-repeat;
  min-height:min(56.25vw,1080px); display:flex; flex-direction:column; justify-content:flex-end}
/* 启用主视觉背景图后，隐藏纯 CSS 雪山与极光层，避免遮挡画面 */
.scene{display:none}
.hero::before{display:none}
/* 新主视觉背景图自带角色与标题，隐藏独立角色切图，避免画面重复 */
.hero-role{display:none}
/* 极光 */
.scene .au{position:absolute; inset:-30% -12% auto -12%; height:150%;
  background:
    radial-gradient(540px 230px at 74% 20%,rgba(120,222,255,.45),transparent 68%),
    radial-gradient(430px 210px at 26% 10%,rgba(150,208,255,.36),transparent 70%),
    radial-gradient(360px 180px at 50% 40%,rgba(190,235,255,.30),transparent 72%);
  animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.07)}}
/* 雪山 */
.scene{position:absolute; inset:auto 0 0 0; height:64%; pointer-events:none; z-index:0}
.scene .mt{position:absolute; left:-4%; right:-4%; bottom:0; display:block}
.scene .mt1{height:100%; background:linear-gradient(180deg,#b9dff9,#d7edfd); clip-path:polygon(0 100%,9% 56%,19% 73%,32% 38%,44% 65%,57% 28%,69% 61%,81% 42%,91% 69%,100% 54%,100% 100%)}
.scene .mt2{height:66%; background:linear-gradient(180deg,#d5eafd,#e9f5ff); clip-path:polygon(0 100%,13% 44%,26% 67%,40% 32%,54% 61%,68% 36%,84% 65%,100% 40%,100% 100%)}
.scene .mt3{height:36%; background:linear-gradient(180deg,#edf7ff,#fbfeff); clip-path:polygon(0 100%,16% 38%,32% 61%,48% 26%,64% 57%,80% 34%,100% 59%,100% 100%)}
.scene .gd{position:absolute; left:0; right:0; bottom:-1px; height:56px; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 92%)}
/* 冰晶装饰 */
.flake{position:absolute; z-index:1; pointer-events:none; opacity:.30;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%230d8ecf' stroke-width='3' stroke-linecap='round'><path d='M50 6v88M13 28l74 44M87 28L13 72'/><path d='M50 20l-11-11M50 20l11-11M50 80l-11 11M50 80l11 11M27 34l-15-3M27 34l2-15M73 66l15 3M73 66l-2 15M73 34l15-3M73 34l-2-15M27 66l-15 3M27 66l2 15'/></g></svg>") center/contain no-repeat;
  animation:spin 30s linear infinite}
.flake.f1{width:132px; height:132px; right:9%; top:12%}
.flake.f2{width:74px; height:74px; right:26%; top:52%; opacity:.22; animation-duration:42s; animation-direction:reverse}
.flake.f3{width:52px; height:52px; left:4%; bottom:16%; opacity:.18; animation-duration:36s}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:150%;
  background:
    radial-gradient(600px 320px at 78% 18%,rgba(126,214,247,.26),transparent 70%),
    radial-gradient(520px 300px at 20% 30%,rgba(76,201,240,.16),transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:
    radial-gradient(2.4px 2.4px at 12% 22%,rgba(11,95,150,.30),transparent),radial-gradient(2px 2px at 32% 62%,rgba(11,95,150,.22),transparent),radial-gradient(1.8px 1.8px at 58% 18%,rgba(11,95,150,.24),transparent),radial-gradient(2.6px 2.6px at 74% 54%,rgba(11,95,150,.20),transparent),radial-gradient(1.8px 1.8px at 88% 30%,rgba(11,95,150,.26),transparent),radial-gradient(2.2px 2.2px at 46% 82%,rgba(11,95,150,.18),transparent);
}
/* 飘雪 */
.snow{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:68}
.snow i{position:absolute; top:-14%; left:0; width:100%; height:128%; display:block; opacity:.92;
  background-image:radial-gradient(6.5px 6.5px at 5% 6%,#fff,transparent),radial-gradient(5px 5px at 15% 22%,#fff,transparent),radial-gradient(7px 7px at 26% 9%,#fff,transparent),radial-gradient(4.5px 4.5px at 36% 31%,#fff,transparent),radial-gradient(6px 6px at 45% 3%,#fff,transparent),radial-gradient(5.5px 5.5px at 55% 26%,#fff,transparent),radial-gradient(7.5px 7.5px at 63% 12%,#fff,transparent),radial-gradient(4.8px 4.8px at 72% 34%,#fff,transparent),radial-gradient(6.2px 6.2px at 81% 7%,#fff,transparent),radial-gradient(5.2px 5.2px at 90% 28%,#fff,transparent),radial-gradient(7px 7px at 97% 15%,#fff,transparent),radial-gradient(5px 5px at 10% 44%,#fff,transparent),radial-gradient(6.4px 6.4px at 22% 58%,#fff,transparent),radial-gradient(4.6px 4.6px at 33% 47%,#fff,transparent),radial-gradient(7.2px 7.2px at 48% 62%,#fff,transparent),radial-gradient(5.6px 5.6px at 58% 48%,#fff,transparent),radial-gradient(6.8px 6.8px at 69% 66%,#fff,transparent),radial-gradient(4.4px 4.4px at 78% 52%,#fff,transparent),radial-gradient(6px 6px at 88% 68%,#fff,transparent),radial-gradient(5.4px 5.4px at 95% 44%,#fff,transparent),radial-gradient(7.4px 7.4px at 3% 72%,#fff,transparent),radial-gradient(5px 5px at 18% 84%,#fff,transparent),radial-gradient(6.6px 6.6px at 30% 76%,#fff,transparent),radial-gradient(4.6px 4.6px at 42% 90%,#fff,transparent),radial-gradient(7px 7px at 53% 80%,#fff,transparent),radial-gradient(5.2px 5.2px at 66% 92%,#fff,transparent),radial-gradient(6.2px 6.2px at 76% 78%,#fff,transparent),radial-gradient(4.8px 4.8px at 85% 94%,#fff,transparent),radial-gradient(6.8px 6.8px at 93% 82%,#fff,transparent);
  background-size:78% 78%; animation:snowfall 16s linear infinite}
.snow i:nth-child(2){opacity:.72; background-size:56% 56%; animation-duration:22s; animation-delay:-7s}
.snow i:nth-child(3){opacity:.5; background-size:112% 112%; animation-duration:30s; animation-delay:-15s}
.snow i:nth-child(4){opacity:.62; background-size:44% 44%; animation-duration:12s; animation-delay:-3s}
.snow i:nth-child(5){opacity:.46; background-size:130% 130%; animation-duration:36s; animation-delay:-21s}
@keyframes snowfall{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4%,124%,0)}}
/* 真实雪片飘屏：SVG 雪片，大小/速度/摆幅/旋转/透明度全随机（由 app.js 生成） */
.snowfall{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:70}
.snowfall i{position:absolute; top:0; left:var(--x); display:block; width:var(--s); height:var(--s);
  animation:sfall var(--d) linear infinite; animation-delay:var(--dl); will-change:transform}
.snowfall i>b{display:block; width:100%; height:100%;
  background:url("../img/snowflake.svg") center/contain no-repeat; opacity:var(--o);
  filter:drop-shadow(0 1px 2px rgba(9,72,118,.38));
  animation:ssway var(--rs) ease-in-out infinite alternate; will-change:transform}
@keyframes sfall{from{transform:translate3d(0,-140px,0)}to{transform:translate3d(0,var(--fall,110vh),0)}}
@keyframes ssway{from{transform:translateX(calc(var(--sw) * -1)) rotate(0)}to{transform:translateX(var(--sw)) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.snow,.snowfall{display:none}}
.hero .w{position:relative; z-index:3}
.flake{z-index:2}
.hero-role{position:absolute; right:-1%; bottom:-1.5%; z-index:1; width:auto; max-width:20%; height:42%;
  object-fit:contain; object-position:bottom right; pointer-events:none;
  animation:roleFloat 5s ease-in-out infinite alternate}
.ovl{font:600 12px/1 var(--num); letter-spacing:.24em; text-transform:uppercase; color:var(--ice); margin-bottom:18px}
.hero h1{font-size:58px; font-weight:800; line-height:1.06; letter-spacing:-1.4px; margin:0 0 20px;
  background:linear-gradient(180deg,#0b5f96 18%,#2aa8e8 92%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 26px rgba(13,110,170,.18))}
.hero-card{position:relative; z-index:2; max-width:560px; margin-left:120px; padding:0 34px; border-radius:16px;
  background:url("../img/hero-card-frame.webp") center/100% 100% no-repeat;
  border:0; box-shadow:none;
  aspect-ratio:560/130;
  display:flex; flex-direction:column; justify-content:center}
/* 相框按 560:130 等比定高，内部按钮垂直居中；抵消 .hero-act 的负下外边距 */
.hero-card .hero-act{flex:0 0 auto; margin-bottom:0}
/* 背景图本身冰晶质感已够，隐藏装饰性雪花片 */
.flake{display:none}
@keyframes roleFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.hero p{font-size:18px; line-height:1.75; color:var(--txt-2); max-width:36em; margin:0 0 32px}
.hero-act{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:13px; margin:0 0 -17px}
/* 图片按钮：按冰晶底板底部对齐，三个尺寸主次递减（56/50/45 拉大到 64/50/41） */
.hero-btn{display:block; flex:0 0 auto; transition:transform .18s ease, filter .18s ease}
.hero-btn img{display:block; height:100%; width:auto}
.hero-btn:nth-child(1){height:64px}
.hero-btn:nth-child(2){height:50px; margin-bottom:5px}
.hero-btn:nth-child(3){height:41px; margin-bottom:8px}
.hero-btn:hover{transform:translateY(-3px); filter:brightness(1.04) drop-shadow(0 10px 20px rgba(13,110,170,.26))}
.hero-btn:active{transform:translateY(-1px)}
@media(max-width:1100px){
  .hero-act{margin-bottom:-16px}
  .hero-btn:nth-child(1){height:58px}
  .hero-btn:nth-child(2){height:46px; margin-bottom:4px}
  .hero-btn:nth-child(3){height:38px; margin-bottom:7px}
}
@media(max-width:620px){
  .hero-act{gap:10px; margin-bottom:-14px}
  .hero-btn:nth-child(1){height:50px}
  .hero-btn:nth-child(2){height:40px; margin-bottom:3px}
  .hero-btn:nth-child(3){height:33px; margin-bottom:6px}
}

/* ============ 区块 ============ */
/* 首页三大板块通栏背景（背景图铺满 + 提亮蒙层保证文字可读） */
.mainbg{
  position:relative; isolation:isolate;
  background:#f4faff url("../img/sec-bg.jpg") center top/cover no-repeat;
}
/* 内页（非首页）把 mainbg 上提，让背景图铺满到导航栏后面 */
body:not(.home) .mainbg{
  margin-top:-70px;
  padding-top:70px;
}
.mainbg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,250,255,.55) 0%,
    rgba(244,250,255,.32) 12%,
    rgba(244,250,255,.32) 75%,
    rgba(244,250,255,.82) 93%,
    rgba(244,250,255,1) 100%);
}
.sec{padding:72px 0 0}
.sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px}
.sec-h h2{position:relative; padding-left:14px; font-size:30px; letter-spacing:-.4px}
.sec-h h2::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--ice),var(--ice-2))}
.sec-h .ovl{margin:0 0 6px}
.sec-h>a{font-size:14px; color:var(--txt-3)}
.sec-h>a:hover{color:var(--ice)}
.sec-h .lft{display:block}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ============ 卡片 ============ */
.card{position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.card::before{content:""; position:absolute; left:12%; right:12%; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--ice),transparent); opacity:0; transition:opacity .25s}
.card:hover{transform:translateY(-4px); border-color:var(--line-h); background-color:var(--panel-h); box-shadow:var(--glow)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px; font-size:18px; font-weight:600}
.card p{margin:0; font-size:14px; line-height:1.75; color:var(--txt-2)}
.card .no{position:relative; padding-left:20px; font:700 13px/1 var(--num); letter-spacing:.1em; color:var(--ice); margin-bottom:12px; display:block}
.card .no::before{content:""; position:absolute; left:0; top:50%; width:14px; height:14px; margin-top:-7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d8ecf' stroke-width='2.4'><path d='M12 2v20M4 8l16 8M20 8L4 16'/><path d='M12 5l-2-2M12 5l2-2M12 19l-2 2M12 19l2 2M7 10l-2-2M7 10l2-2M17 14l2 2M17 14l-2 2M17 10l2-2M17 10l-2-2M7 14l-2 2M7 14l2-2'/></svg>") center/contain no-repeat; opacity:.85}
.card .btn{margin-top:18px}
/* 半栏内的紧凑卡片（首页「点卡版四大核心玩法」右栏） */
.card.mini{padding:20px 18px}
.card.mini h3{font-size:16.5px; margin-bottom:8px}
.card.mini p{font-size:13.5px; line-height:1.7}
/* 首页「最新资讯 + 核心玩法」分栏：资讯栏更宽，玩法卡单列竖排 */
.newsplit{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:26px}
.newsplit .sec-h>a{flex-shrink:0; white-space:nowrap}
.newsplit .sec-h h2{white-space:nowrap}
@media(max-width:1250px){.newsplit .sec-h h2{font-size:24px}}
@media(max-width:1000px){.newsplit .sec-h h2{font-size:21px}}
.cardcol{display:grid; gap:14px}
.newsplit .plist a{grid-template-columns:250px 1fr}
.newsplit .plist img{width:250px; height:150px}

/* 职业卡 */
.role{overflow:hidden; padding:0}
.role img{width:100%; height:220px; object-fit:contain; object-position:center top; background:#dbeefb}
.role .ri{padding:20px 22px 24px}
.role h3{margin-bottom:8px}
.role .tagline{font-size:13px; color:var(--ice); margin-bottom:8px}

/* ============ 新闻列表 ============ */
.nlist li{border-bottom:1px solid var(--line)}
.nlist li:first-child{border-top:1px solid var(--line)}
.nlist a{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 6px; transition:background .2s,padding .2s}
.nlist a:hover{background:var(--panel); padding-left:14px; border-radius:10px}
.nlist .t{flex:1 1 auto; min-width:0; font-size:16px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nlist a:hover .t{color:var(--ice)}
.nlist .d{flex:0 0 auto; font:400 13px/1 var(--num); color:var(--txt-3); letter-spacing:.04em}
.nlist .dot{flex:0 0 auto; width:14px; height:14px; opacity:.85; margin-right:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d8ecf' stroke-width='2.4'><path d='M12 2v20M4 8l16 8M20 8L4 16'/><path d='M12 5l-2-2M12 5l2-2M12 19l-2 2M12 19l2 2M7 10l-2-2M7 10l2-2M17 14l2 2M17 14l-2 2M17 10l2-2M17 10l-2-2M7 14l-2 2M7 14l2-2'/></svg>") center/contain no-repeat}

/* 图文列表 */
.plist{display:grid; gap:16px}
.plist a{display:grid; grid-template-columns:210px 1fr; gap:20px; align-items:center; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.plist a:hover{transform:translateY(-3px); border-color:var(--line-h); background-color:var(--panel-h); box-shadow:var(--glow)}
.plist img{width:210px; height:132px; object-fit:fill; border-radius:10px; background:#dbeefb}
.plist h3{font-size:17px; font-weight:600; margin-bottom:8px; transition:color .2s}
.plist a:hover h3{color:var(--ice)}
.plist p{margin:0 0 10px; font-size:13.5px; line-height:1.7; color:var(--txt-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.plist .m{font:400 12.5px/1 var(--num); color:var(--txt-3); letter-spacing:.03em}

/* 开服时间表 */
.kf{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel)}
.kf-row{display:grid; grid-template-columns:1.1fr .8fr .7fr 1fr .7fr; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); align-items:center}
.kf-row:last-child{border-bottom:0}
.kf-row.head{background:rgba(13,142,207,.08); font:600 13px/1 var(--font); color:var(--ice-3); letter-spacing:.06em}
.kf-row.head span:nth-child(4),.kf-row.head span:nth-child(5){justify-self:center}
.kf-row:hover{background:var(--panel-h)}
.kf-row .nm{font-size:15.5px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kf-row .tm{font:400 14px/1 var(--num); color:var(--txt-2); letter-spacing:.03em}
.kf-row .st{justify-self:start; padding:4px 12px; border-radius:999px; font-size:12.5px; border:1px solid rgba(15,157,118,.38); color:var(--ok); background:rgba(15,157,118,.08)}
.kf-row .gf{font:700 13px/1 var(--num); color:var(--gold-2); letter-spacing:.03em; justify-self:center}
.kf-row .go{justify-self:center; display:inline-flex; align-items:center}
.kf-row .go .gft{font:700 13px/1 var(--num); color:var(--gold-2); letter-spacing:.03em}
.kf-row .go .gin{font-style:normal; min-width:48px; text-align:center; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:#fff; background:linear-gradient(135deg,#ffb03a,#ff7a18); box-shadow:0 4px 12px rgba(255,122,24,.28); transition:filter .2s}
.kf-row:hover .go .gin{filter:brightness(1.08); color:#fff}

/* ============ 轮播 ============ */
.slidebox{position:relative; margin-top:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid transparent; background:transparent; box-shadow:none}
.slidebox .sec-h{grid-column:1/-1; order:0; padding:18px 24px 0; margin-bottom:14px; align-items:flex-end; background:transparent}
.slidebox .sec-h h2{font-size:26px}
.slides{position:relative; aspect-ratio:16/9; max-height:560px; background:linear-gradient(180deg,#e8f5fd,#f5fbfe)}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s; z-index:0}
.slide.on{opacity:1; z-index:1}
.slide img{width:100%; height:100%; object-fit:fill; background:#eaf5fd}
.cap{position:absolute; left:0; right:0; bottom:0; padding:56px 34px 28px; background:linear-gradient(0deg,rgba(6,30,52,.82),transparent)}
.cap strong{display:block; font-size:24px; color:#fff; margin-bottom:6px; letter-spacing:-.3px; text-shadow:0 2px 12px rgba(4,26,46,.45)}
.cap span{font-size:14px; color:#dff1ff}
.sbtn{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; line-height:42px; text-align:center; border-radius:50%; cursor:pointer; color:var(--ice-3); background:rgba(255,255,255,.82); border:1px solid var(--line-h); font-size:18px; user-select:none}
.sbtn:hover{background:#fff; color:var(--ice)}
.sbtn.prev{left:16px} .sbtn.next{right:16px}
.dots{position:absolute; right:20px; bottom:20px; z-index:3; display:flex; gap:8px}
.dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(11,95,150,.25); cursor:pointer; transition:background .2s,transform .2s}
.dots i.on{background:var(--ice-4); transform:scale(1.3)}

/* 轮播右侧两个小方格：视频展示 / 图片展示 */
.slidebox{display:grid; grid-template-columns:300px 1fr; gap:8px}
.sboxes{display:grid; grid-template-rows:1fr 1fr; gap:8px; order:1}
.slides{order:2}
.sbox{position:relative; display:block; overflow:hidden; border-radius:2px;
  background:radial-gradient(120% 120% at 50% 30%,#1d4f78 0%,#0b2a4a 70%)}
.sbox img{width:100%; height:100%; object-fit:fill; opacity:.9; transition:transform .6s,opacity .3s}
.sbox:hover img{transform:scale(1.08); opacity:1}
.sbox::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,30,52,.05),rgba(6,30,52,.72))}
.s-ic{position:absolute; left:50%; top:50%; z-index:2; width:54px; height:54px; margin:-38px 0 0 -27px; border-radius:50%;
  background:rgba(6,30,52,.42) center/26px 26px no-repeat; border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(4,22,40,.35); transition:transform .25s,background-color .25s}
.sbox:hover .s-ic{transform:scale(1.09); background-color:rgba(13,142,207,.62)}
.s-vid .s-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}
.s-pic .s-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='3'/%3E%3Ccircle cx='8.6' cy='9.6' r='1.5' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M4 17.5l5-4 4 3 3-2.2 4 3.2'/%3E%3C/svg%3E")}
.s-tx{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 18px 16px; text-align:center}
.s-tx b{display:block; font-size:17px; color:#fff; letter-spacing:.5px; text-shadow:0 2px 10px rgba(4,22,40,.55)}
.s-tx i{display:block; margin-top:3px; font-size:12.5px; font-style:normal; color:#cfe8fb}
.s-tx em{font-style:normal; color:var(--ice-4); font-weight:700}

/* 视频 / 图片 弹出层 */
.lbx{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,18,32,.88); backdrop-filter:blur(4px)}
.lbx.on{display:flex}
.lbx-in{position:relative; width:min(920px,94vw)}
.lbx-bd{position:relative; border-radius:14px; overflow:hidden; background:#04121f; min-height:180px;
  display:flex; align-items:center; justify-content:center}
.lbx-bd img{display:block; width:100%; max-height:74vh; object-fit:contain; background:#04121f}
.lbx-bd video{display:block; width:100%; max-height:76vh; background:#000}
.lbx-msg{color:#cfe8fb; font-size:14px; text-align:center; padding:46px 24px; line-height:1.9}
.lbx-cap{margin-top:12px; font-size:14.5px; color:#e6f4ff; text-align:center}
.lbx-x{position:absolute; right:-16px; top:-16px; z-index:3; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.94); color:#0b2a4a; font-size:22px; line-height:36px; text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.lbx-x:hover{background:#fff}
.lbx-ar{position:absolute; top:50%; z-index:3; width:44px; height:44px; margin-top:-22px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.86); color:#0b2a4a; font-size:17px; line-height:42px; text-align:center; user-select:none}
.lbx-ar:hover{background:#fff}
.lbx-ar.prev{left:-60px} .lbx-ar.next{right:-60px}
.galset{display:none}

/* ============ 面包屑 ============ */
.crumb{padding:26px 0 6px; font-size:13.5px; color:var(--txt-3)}
.crumb a{color:var(--txt-3)}
.crumb a:hover{color:var(--ice)}
.crumb span{color:var(--txt-2)}

/* ============ 主内容 + 侧栏 ============ */
.main{display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start}
.side{display:grid; gap:20px; position:sticky; top:94px}
.box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.box h3{position:relative; padding-left:12px; font-size:16px; margin-bottom:16px}
.box h3::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--ice),var(--ice-2))}
.box li{border-bottom:1px dashed rgba(14,110,170,.18)}
.box li:last-child{border-bottom:0}
.box li a{display:block; padding:10px 2px; font-size:14.5px; color:var(--txt-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.box li a:hover{color:var(--ice)}
.box .rank{display:inline-block; width:20px; font:700 13px/1 var(--num); color:var(--txt-3)}
.box li:nth-child(1) .rank,.box li:nth-child(2) .rank,.box li:nth-child(3) .rank{color:var(--ice)}
.tagcloud{display:flex; flex-wrap:wrap; gap:8px}
.tagcloud a{padding:6px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--txt-2); background:rgba(255,255,255,.8)}
.tagcloud a:hover{color:var(--ice); border-color:var(--line-h); background:rgba(13,142,207,.08)}
/* 标签聚合页大号标签云 */
.tagpage{padding:24px}
.tagpage__tip{margin:0 0 18px; font-size:13.5px; color:var(--txt-3)}
.tagcloud--page{gap:12px 10px}
.tagcloud--page a{padding:9px 20px; font-size:15px; font-weight:500; color:var(--ice-3); border-color:rgba(13,142,207,.25); background:#fff; transition:transform .15s ease, box-shadow .15s ease}
.tagcloud--page a:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(13,110,170,.14)}
.dlbox{background:linear-gradient(160deg,rgba(255,157,46,.12),rgba(255,255,255,.9)); border-color:rgba(255,140,40,.35)}
.dlbox h3::before{background:linear-gradient(180deg,var(--gold),var(--gold-2))}
.dlbox p{font-size:13.5px; color:var(--txt-2); margin:0 0 16px}
.dlbox .btn{width:100%}

/* ============ 文章 ============ */
.art{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 40px}
/* 文章页：正文区使用 sec-bg 背景图 + 提亮蒙层保证可读 */
.art-bg{background:rgba(255,255,255,.82); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.art>h1{font-size:34px; line-height:1.3; letter-spacing:-.6px; margin-bottom:20px}
.art-pic{margin-bottom:22px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.art-pic img{width:100%; height:auto}
.meta{display:flex; flex-wrap:wrap; gap:22px; padding:12px 0 22px; border-bottom:1px solid var(--line); margin-bottom:26px; font:400 13px/1 var(--font); color:var(--txt-3)}
.art-body{font-size:16.5px; line-height:1.95; color:#3a5a78}
.art-body p{margin:0 0 1.15em}
.art-body h2{font-size:22px; margin:1.6em 0 .8em; padding-left:12px; position:relative}
.art-body h2::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--ice),var(--ice-2))}
.art-body h3{font-size:18px; margin:1.4em 0 .7em}
.art-body img{border-radius:12px; border:1px solid var(--line); margin:8px 0; height:auto}
.art-body a{color:var(--ice); text-decoration:underline; text-underline-offset:3px}
.art-body ul{padding-left:1.2em; margin:0 0 1.15em; list-style:disc}
.art-body li{margin:.35em 0}
.art-body blockquote{margin:1.2em 0; padding:14px 18px; border-left:3px solid var(--ice); background:rgba(13,142,207,.07); border-radius:0 10px 10px 0; color:var(--txt-2)}
.art-body table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:15px}
.art-body th,.art-body td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.art-body th{background:rgba(13,142,207,.08); color:var(--txt)}
.art-body strong{color:var(--txt)}
.pn{display:grid; gap:10px; margin:28px 0 0; padding-top:22px; border-top:1px solid var(--line); font-size:14.5px}
.pn span{color:var(--txt-3)}
.pn a{color:var(--txt-2)}
.pn a:hover{color:var(--ice)}
.tags{margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.tags strong{font-size:14px; color:var(--txt-3); font-weight:400}
.tags a{padding:6px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--txt-2)}
.tags a:hover{color:var(--ice); border-color:var(--line-h); background:rgba(13,142,207,.08)}
.rel{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px}
.rel .card{padding:20px}
.rel .card h3{font-size:15.5px; margin-bottom:8px}
.rel .card p{font-size:13px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}

/* ============ 分页 ============ */
.pager{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:34px}
.pager .page-status{padding:8px 18px; border-radius:999px; border:1px solid var(--line); font-size:14px; color:var(--txt-2); background:var(--panel)}
.pager a{padding:8px 18px; border-radius:999px; border:1px solid var(--line); font-size:14px; color:var(--txt-2); background:var(--panel)}
.pager a:hover{border-color:var(--line-h); color:var(--ice); background:var(--panel-h)}
.pager a.disabled{opacity:.5; cursor:not-allowed; pointer-events:none}
.pager .page-pre{order:-1}
.pager .page-status{order:0}
.pager .page-next{order:1}
.pager .page-index,.pager .page-numbar,.pager .page-last{display:none}

/* ============ 下载区 ============ */
.dlwrap{display:grid; grid-template-columns:1fr 280px; gap:22px}
.dlgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.dlgrid .card{text-align:center; padding:28px 22px}
.dlgrid .card h3{margin-bottom:8px}
.dlgrid .card p{margin-bottom:18px; min-height:3.5em}
.qr{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; text-align:center}
.qr img{width:170px; height:170px; margin:0 auto 14px; border-radius:10px; border:1px solid var(--line); background:#fff; object-fit:contain}
.qr p{margin:0; font-size:13px; color:var(--txt-3)}

/* ============ 页脚（浅色四栏版） ============ */
.ft{position:relative; overflow:hidden; margin-top:0; padding:34px 0 18px; border-top:1px solid var(--line); background:linear-gradient(180deg,#e6f2fb,#f6fbff); color:var(--txt-2)}
.ft::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#4fd3f7,#0d8ecf,transparent)}
.ft__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; position:relative; z-index:1}
.ft__brand .ft__logo{display:inline-block; margin-bottom:10px}
.ft__brand .ft__logo img{height:38px}
.ft__desc{font-size:13.5px; line-height:1.75; color:var(--txt-3); margin:0 0 12px; max-width:380px}
.ft__contact{display:flex; flex-direction:column; gap:6px}
.ft__contact span{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--txt-2)}
.ft__contact span::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--ice); box-shadow:0 0 6px rgba(13,142,207,.6)}
.ft h4{position:relative; margin:0 0 12px; padding-left:12px; font-size:15px; font-weight:700; color:var(--txt); letter-spacing:.05em}
.ft h4::before{content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--ice),var(--ice-2))}
.ft__col ul{list-style:none; margin:0; padding:0}
.ft li a{display:inline-block; padding:4px 0; font-size:13.5px; color:var(--txt-3); transition:color .2s,transform .2s}
.ft li a:hover{color:var(--ice); transform:translateX(3px)}
.ft__copy{position:relative; z-index:1; margin-top:22px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; text-align:center}
/* 页脚紧凑化：品牌区横排、栏目横向平铺，压缩整体高度 */
.ft__brand{display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px}
.ft__brand .ft__logo{margin-bottom:0}
.ft__brand .ft__logo img{height:34px}
.ft__desc{display:none}
.ft__contact{flex-direction:row; flex-wrap:wrap; gap:6px 14px}
.ft__contact span{font-size:12.5px; gap:6px}
.ft__col ul{display:flex; flex-wrap:wrap; gap:5px 16px}
.ft li a{padding:0}
.ft__copy p{margin:0; font-size:12.5px; color:var(--txt-3); line-height:1.8}
@media(max-width:960px){.ft__grid{grid-template-columns:1fr 1fr; gap:28px}}

/* ============ 视觉增强 ============ */
::selection{background:rgba(13,142,207,.18); color:var(--txt)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ice); outline-offset:3px; border-radius:10px}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:#e9f4fd}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4fd3f7,#0d8ecf); border-radius:10px; border:2px solid #e9f4fd}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#25b3e6,#0b5f96)}

/* 顶部阅读进度条 */
#tpbar{position:fixed; left:0; top:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg,#4fd3f7,#0d8ecf 55%,#ffb03a); box-shadow:0 0 12px rgba(13,142,207,.45); transition:width .1s linear}
/* 导航滚动态：始终透明 */
.hd{transition:box-shadow .3s,background .3s, border-color .3s, color .3s}
.hd.scrolled{background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-bottom-color:rgba(255,255,255,.25)}

/* 透明导航文字/按钮颜色：导航文字为黑色（深色） */
.hd .nav a{color:var(--txt); text-shadow:0 1px 2px rgba(255,255,255,.65)}
.hd .nav a:hover{color:var(--ice-3); background:rgba(255,255,255,.55)}
.hd .nav a.on{color:var(--ice-3); background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(13,142,207,.25)}
.hd .btn-ghost{background:rgba(255,255,255,.55); color:var(--txt); border-color:rgba(255,255,255,.75)}
.hd .btn-ghost:hover{background:rgba(255,255,255,.82); color:var(--ice-3); border-color:rgba(13,142,207,.3)}
.hd .hambtn{background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.75)}
.hd .hambtn span{background:var(--txt)}

/* 冰蓝渐变描边（卡片 / 面板 / 列表） */
.card,.box,.plist a,.kf{
  border-color:transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(140deg,rgba(79,211,247,.55),rgba(255,255,255,.9) 44%,rgba(13,142,207,.22));
  background-origin:padding-box,border-box; background-clip:padding-box,border-box;
}
.card:hover,.box:hover,.plist a:hover{
  background-image:linear-gradient(var(--panel-h),var(--panel-h)),linear-gradient(140deg,rgba(13,142,207,.55),rgba(255,255,255,.9) 44%,rgba(79,211,247,.45));
}
.kf-row.head{background-image:none}

/* 按钮内高光 */
.btn-ice{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px rgba(13,142,207,.32)}
.btn-ice:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px rgba(13,142,207,.42)}
.btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px rgba(255,140,40,.34)}
.btn-gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 34px rgba(255,140,40,.44)}

/* 图片统一冰蓝调 */
.plist img,.role img,.art-body img{filter:saturate(1.05) contrast(1.02) brightness(1.03)}

/* 卡片冰晶光泽 */
.card:not(.role)::after{content:""; position:absolute; right:-42%; top:-58%; width:72%; height:150%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%);
  transform:rotate(18deg); opacity:.5; pointer-events:none; transition:opacity .3s}
.card:not(.role):hover::after{opacity:.9}

/* 列表缩略图微缩放 */
.plist a{overflow:hidden}
.plist img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.plist a:hover img{transform:scale(1.07)}

/* 轮播细节 */
.slide img{transition:transform 8s linear}
.slide.on img{transform:scale(1.05)}
.dots i{width:8px; height:8px; box-shadow:none; background:rgba(255,255,255,.75)}
.dots i.on{width:24px; border-radius:6px; background:linear-gradient(90deg,#4fd3f7,#0d8ecf)}

/* 开服表斑马纹 + 状态发光 */
.kf-row:not(:hover):nth-child(even){background:rgba(233,244,253,.55)}
.kf-row .st{box-shadow:0 0 0 3px rgba(15,157,118,.08)}

/* 侧栏面板顶部冰线 */
.box{position:relative; overflow:hidden}
.box::after{content:""; position:absolute; left:14%; right:14%; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--ice-4),transparent); opacity:.55}

/* 面包屑胶囊 */
.crumb a{padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.85)}
.crumb a:hover{background:#fff; border-color:var(--line-h)}

/* 页脚 */
.ft li a{transition:color .2s,transform .2s}

/* 滚动入场 */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* 返回顶部 */
#totop{position:fixed; right:24px; bottom:28px; z-index:90; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line-h);
  background:rgba(255,255,255,.94); color:var(--ice-3); font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 10px 26px rgba(16,84,140,.16); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s,transform .3s,visibility .3s,background .25s,color .25s}
#totop.show{opacity:1; visibility:visible; transform:none}
#totop:hover{background:linear-gradient(135deg,#0d8ecf,#3fc3f0); color:#fff; border-color:transparent}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
  .slide img,.plist img{transition:none}
  .hero-role{animation:none}
}

@media (max-width:1100px){
  .hero-role{max-width:22%; height:38%; right:-2%; bottom:-1%; opacity:.95}
  .hero-card{max-width:none}
  .hero h1{max-width:100%}
}

/* ============ 响应式 ============ */
@media (max-width:1100px){
  .main{grid-template-columns:1fr}
  .side{position:static; grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .dlwrap{grid-template-columns:1fr}
  .dlgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero{padding:64px 0 56px}
  .hero h1{font-size:40px}
  .sec{padding-top:56px}
  .g3,.g4,.dlgrid{grid-template-columns:repeat(2,1fr)}
  .slides{height:auto} .slide img{height:100%}
  .slidebox{grid-template-columns:1fr}
  .slides{order:1}
  .sboxes{order:2; grid-template-rows:none; grid-template-columns:repeat(2,1fr)}
  .sbox{height:170px}
  .lbx-ar.prev{left:0} .lbx-ar.next{right:0}
  .lbx-x{right:0; top:-46px}
  .kf-row{grid-template-columns:1fr auto auto; padding:14px 18px}
  .kf-row.head{display:none}
  .kf-row .gf{grid-column:2; grid-row:1}
  .kf-row .st{grid-column:2; grid-row:2}
  .kf-row .go{grid-column:2; grid-row:3}
}
@media (max-width:768px){
  .hd .w{height:60px; gap:14px}
  body::after{top:60px}
  .hambtn{display:block}
  .nav{position:absolute; left:0; right:0; top:60px; display:none; flex-direction:column; align-items:stretch; gap:2px; padding:12px 20px 18px; background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); box-shadow:0 12px 30px rgba(16,84,140,.12)}
  .nav.show{display:flex}
  .nav a{padding:12px 8px; border-radius:10px}
  .hd-act .btn-ghost{display:none}
  .w{padding:0 18px}
  .hero h1{font-size:32px; letter-spacing:-.6px}
  .hero p{font-size:16px}
  .hero-card{margin-left:0; padding:0 22px}
  .ft__grid{grid-template-columns:1fr; gap:26px}
  .art{padding:26px 20px}
  .art>h1{font-size:25px}
  .rel{grid-template-columns:1fr}
  .side{grid-template-columns:1fr}
  .newsplit{grid-template-columns:1fr}
  .slides{height:auto} .slide img{height:100%}
}
@media (max-width:640px){
  .grid,.g2,.g3,.g4,.dlgrid{grid-template-columns:1fr}
  .plist a{grid-template-columns:1fr}
  .plist img{width:100%; height:180px}
  .newsplit .plist a{grid-template-columns:1fr}
  .newsplit .plist img{width:100%; height:180px}
  .side{grid-template-columns:1fr}
}


/* ============ 冰雪包裹外壳（通用组件：任意容器加 class="ice-wrap" 即可复用） ============ */
.ice-wrap{position:relative; isolation:isolate}
.ice-wrap::before,.ice-wrap::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1}
/* 冰晶飘雪（画在容器背景之上、内容之下） */
.ice-wrap::before{
  background-image:
    /* 顶部积雪 */
    radial-gradient(120% 38% at 50% 0%,rgba(255,255,255,.96) 0 22%,rgba(255,255,255,0) 70%),
    /* 底部雪雾 */
    radial-gradient(120% 32% at 50% 100%,rgba(222,245,255,.92) 0 20%,rgba(222,245,255,0) 62%),
    /* 四角霜花 */
    radial-gradient(circle at 4% 4%,rgba(255,255,255,.9) 0 2px,rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 96% 4%,rgba(255,255,255,.85) 0 2px,rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 4% 96%,rgba(255,255,255,.8) 0 1.8px,rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 96% 96%,rgba(255,255,255,.8) 0 1.8px,rgba(255,255,255,0) 2.4px),
    /* 空中飘雪 */
    radial-gradient(circle at 24% 26%,rgba(255,255,255,.75) 0 1.2px,rgba(255,255,255,0) 1.8px),
    radial-gradient(circle at 68% 62%,rgba(222,245,255,.7) 0 1px,rgba(222,245,255,0) 1.5px);
  background-size:100% 100%,100% 100%,60px 60px,60px 60px,60px 60px,60px 60px,130px 130px,100px 100px;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,30px 20px;
  animation:iceSnow 16s linear infinite}
@keyframes iceSnow{to{background-position:0 0,0 0,0 0,0 0,0 0,0 0,-45px 280px,66px 240px}}
/* 冰面寒光扫过 */
.ice-wrap::after{
  background-image:linear-gradient(105deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.6) 47%,rgba(214,243,255,.34) 54%,rgba(255,255,255,0) 67%);
  background-repeat:no-repeat; background-size:300% 100%; background-position:100% 0;
  animation:iceShine 7s ease-in-out infinite}
@keyframes iceShine{0%{background-position:100% 0} 62%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .ice-wrap::before,.ice-wrap::after{animation:none}
}

/* ============ 下载弹窗（电脑版 / 安卓 / iOS / 二维码） ============ */
.dlpop{position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,22,40,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.dlpop.on{display:flex}
.dlpop__mask{position:absolute; inset:0; cursor:pointer}
/* 弹窗背景飘雪（在盒子之下，不拦截点击） */
.dlpop::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.85) 0 1.8px,rgba(255,255,255,0) 2.6px),
    radial-gradient(circle at 62% 70%,rgba(224,246,255,.7) 0 1.4px,rgba(224,246,255,0) 2px);
  background-size:190px 190px,130px 130px; background-position:0 0,50px 30px;
  animation:iceSnowMask 18s linear infinite}
@keyframes iceSnowMask{to{background-position:-60px 380px,90px 320px}}
/* 弹窗主体：被一层冰壳包裹（顶部垂冰凌 + 底部结冰刺 + 霜带 + 角部冰花 + 外圈寒气） */
.dlpop__box{position:relative; isolation:isolate; width:min(560px,100%); max-height:92vh; overflow:auto;
  border-radius:28px; border:2px solid rgba(172,232,252,.95); padding:36px 30px 28px;
  background-color:#f7fdff;
  background-image:
    conic-gradient(from 315deg at 50% 100%,rgba(198,236,253,.95) 0deg 90deg,rgba(198,236,253,0) 90deg 360deg),
    conic-gradient(from 135deg at 50% 0%,rgba(198,236,253,.85) 0deg 90deg,rgba(198,236,253,0) 90deg 360deg),
    linear-gradient(180deg,rgba(216,244,255,.95),rgba(216,244,255,0)),
    linear-gradient(0deg,rgba(206,238,253,.9),rgba(206,238,253,0)),
    radial-gradient(circle at 2% 3%,rgba(146,214,245,.45),rgba(146,214,245,0) 36%),
    radial-gradient(circle at 98% 97%,rgba(146,214,245,.4),rgba(146,214,245,0) 40%),
    linear-gradient(168deg,#ffffff,#eaf7ff 52%,#d8f0fd);
  background-size:26px 13px,26px 13px,100% 52px,100% 44px,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 100%,0 0,0 100%,0 0,0 0,0 0;
  background-repeat:repeat-x,repeat-x,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 2px rgba(255,255,255,.7),
    inset 0 28px 48px rgba(198,236,253,.5),
    inset 0 -28px 48px rgba(140,205,240,.24),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 0 5px rgba(160,230,252,.42),
    0 0 0 11px rgba(150,220,250,.15),
    0 0 42px rgba(85,185,245,.34),
    0 26px 66px rgba(6,34,60,.42);
  animation:dlpopIn .22s ease}
@keyframes dlpopIn{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}
.dlpop__x{position:absolute; right:12px; top:10px; width:34px; height:34px; border:0; border-radius:50%;
  background:transparent; color:var(--txt-3); font-size:26px; line-height:1; cursor:pointer}
.dlpop__x:hover{color:var(--ice-3); background:var(--panel-h)}
.dlpop__hd{text-align:center; margin-bottom:18px}
.dlpop__hd h3{font-size:20px}
.dlpop__hd p{margin:6px 0 0; font-size:13.5px; color:var(--txt-3)}
.dlpop__list{display:grid; gap:10px}
.dli{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel-h);
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s, background .2s}
.dli:hover{transform:translateY(-2px); border-color:var(--line-h); background:#fff; box-shadow:var(--glow)}
.dli__ic{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff}
.dli--pc .dli__ic{background:linear-gradient(135deg,#0d8ecf,#3fc3f0)}
.dli--and .dli__ic{background:linear-gradient(135deg,#3ddc84,#0f9d76)}
.dli--ios .dli__ic{background:linear-gradient(135deg,#7b93a9,#0c2b46)}
.dli__tx{flex:1 1 auto; min-width:0}
.dli__tx b{display:block; font-size:15.5px; color:var(--txt)}
.dli__tx i{display:block; font-style:normal; font-size:12.5px; color:var(--txt-3)}
.dli__go{flex:0 0 auto; font-size:20px; color:var(--txt-3)}
.dli:hover .dli__go{color:var(--ice-3)}
.dlpop__qr{display:flex; align-items:center; gap:16px; margin-top:16px; padding:14px 16px;
  border-radius:var(--r); border:1px dashed var(--line-h); background:rgba(13,142,207,.05)}
.dlqr{flex:0 0 auto; width:96px; height:96px; padding:6px; background:#fff; border-radius:10px;
  box-shadow:0 4px 14px rgba(16,84,140,.14)}
.dlqr img,.dlqr canvas{display:block; width:100% !important; height:100% !important}
.dlqr__tx b{display:block; font-size:15px; color:var(--txt)}
.dlqr__tx i{display:block; font-style:normal; font-size:12.5px; color:var(--txt-3)}
.dlpop__more{display:block; margin-top:14px; text-align:center; font-size:13px; color:var(--ice-3)}
.dlpop__more:hover{text-decoration:underline}

/* 下载页：四平台下载卡片 */
.dlgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0 26px}
.dlcell{display:flex; flex-direction:column; align-items:center; gap:7px; padding:20px 12px;
  border-radius:var(--r); border:1px solid var(--line); background:var(--panel-h); text-align:center;
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s, background .2s}
.dlcell:hover{transform:translateY(-3px); border-color:var(--line-h); background:#fff; box-shadow:var(--glow)}
.dlcell__ic{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff}
.dlcell--pc .dlcell__ic{background:linear-gradient(135deg,#0d8ecf,#3fc3f0)}
.dlcell--and .dlcell__ic{background:linear-gradient(135deg,#3ddc84,#0f9d76)}
.dlcell--ios .dlcell__ic{background:linear-gradient(135deg,#7b93a9,#0c2b46)}
.dlcell--qr .dlqr{width:88px; height:88px; margin-bottom:2px}
.dlcell b{font-size:15px; color:var(--txt)}
.dlcell i{font-style:normal; font-size:12.5px; color:var(--txt-3); line-height:1.6}
@media(max-width:900px){ .dlgrid{grid-template-columns:repeat(2,1fr)} }
/* 详情页：下载卡片放在右侧栏时的紧凑排列 */
.side .dlgrid{grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 18px}
.side .dlcell{padding:16px 10px}
@media (max-width:1100px){ .side .dlgrid{grid-column:1/-1} }
@media(max-width:480px){
  .dlgrid{grid-template-columns:repeat(2,1fr); gap:10px}
  /* 所有宽度都保留冰晶相框，窄屏只收窄内边距 */
  .hero-card{padding:0 12px}
}

/* ============ 游戏详情/下载页（参考 cq555 单栏礼包页） ============ */
.gameview{max-width:820px; margin:0 auto; padding:22px 0 40px}
.gameview__head{position:relative; z-index:1; isolation:isolate; display:flex; align-items:center; gap:18px; padding:18px 20px; margin-bottom:16px}
.gameview__head::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--glow)}
.gameview__head .gameview__play{margin-left:auto; flex:0 0 auto; display:block}
.gameview__head .gameview__play img{display:block; height:54px; width:auto; transition:transform .18s ease, filter .18s ease}
.gameview__head .gameview__play:hover img{transform:translateY(-2px); filter:brightness(1.04) drop-shadow(0 8px 16px rgba(255,122,24,.28))}
.gameview__icon{flex:0 0 auto; width:90px; height:90px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#e8f6ff,#cde9fb); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; color:var(--ice-3)}
.gameview__icon img{width:100%; height:100%; object-fit:cover; display:block}
.gameview__info h1{font-size:28px; font-weight:800; margin:0 0 10px; color:var(--txt); letter-spacing:-.4px}
.gameview__meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:14px; color:var(--txt-2)}
.gameview__meta .tag{display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(13,142,207,.10); color:var(--ice-3); border:1px solid rgba(13,142,207,.18)}
.gameview__meta .tags{margin-top:0; padding-top:0; border-top:none; display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center}
.gameview__meta .size{color:var(--txt-3)}

.gameview__gallery{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--glow); margin-bottom:16px}
.gameview__slider{position:relative; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#e8f6ff,#cde9fb)}
.gameview__track{display:flex; height:100%; transition:transform .45s ease}
.gameview__slide{flex:0 0 100%; height:100%}
.gameview__slide img{width:100%; height:100%; object-fit:cover; display:block}
.gameview__dots{display:flex; justify-content:center; gap:8px; padding:12px}
.gameview__dot{width:8px; height:8px; border-radius:50%; background:rgba(13,142,207,.25); cursor:pointer}
.gameview__dot.active{background:var(--ice)}

.gameview__section{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--glow); margin-bottom:16px}
.gameview__title{font-size:18px; font-weight:700; margin:0 0 16px; padding-left:12px; border-left:4px solid var(--ice); color:var(--txt)}

.giftbox{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; background:linear-gradient(90deg,#fff7ed,#fff); border:1px dashed rgba(255,140,40,.35); border-radius:12px}
.giftbox__label{color:var(--txt-3); font-size:14px}
.giftbox__code{font-family:var(--num); font-size:22px; font-weight:800; color:var(--gold-2); letter-spacing:.05em}
.giftbox__copy{margin-left:auto; padding:9px 20px; border-radius:999px; border:none; background:linear-gradient(135deg,#ffb03a,#ff7a18); color:#fff; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(255,122,24,.28); font-size:14px}
.giftbox__copy:hover{filter:brightness(1.05)}

.gameview__body h2{font-size:17px; font-weight:700; color:var(--txt); margin:22px 0 10px; padding-left:12px; border-left:4px solid var(--ice)}
.gameview__body h2:first-child{margin-top:0}
.gameview__body p{margin:0 0 .85em; color:var(--txt-2); line-height:1.8}
.gameview__body ul.giftlist{list-style:none; padding:0; margin:10px 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.gameview__body ul.giftlist li{padding:10px; text-align:center; background:#f4faff; border-radius:8px; font-family:var(--num); color:var(--txt); border:1px solid var(--line)}
.gameview__body table{width:100%; border-collapse:collapse; margin-top:10px; font-size:15px}
.gameview__body th,.gameview__body td{padding:10px 12px; text-align:left; border:1px solid var(--line)}
.gameview__body th{background:rgba(13,142,207,.08); color:var(--ice-3); font-weight:600}

.gameview__down{text-align:center; padding:12px 0 20px}
.gameview__down .btn-lg{padding:14px 48px; font-size:18px; border-radius:999px}

@media(max-width:900px){
  .gameview{padding:18px 0 30px}
  .gameview__head{padding:14px 16px; gap:14px}
  .gameview__icon{width:72px; height:72px; font-size:26px}
  .gameview__info h1{font-size:22px}
  .gameview__section{padding:18px}
  .giftbox__code{font-size:18px}
}
@media(max-width:640px){
  .gameview__head{flex-wrap:wrap}
  .gameview__head .gameview__play{margin-left:0; width:100%; max-width:300px}
  .gameview__head .gameview__play img{height:48px; width:100%}
  .gameview__body ul.giftlist{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}

/* ============ 首页 hero 四平台下载盒（电脑版 / 安卓 / iOS / 二维码） ============ */
/* 下载栏目多版本卡片（横向一排） */
.vergrid{display:flex; flex-direction:column; gap:14px}
.vercell{display:flex; flex-direction:row; align-items:center; gap:16px; padding:14px 18px; border-radius:16px; background:var(--panel); border:1px solid var(--line); transition:transform .18s ease, box-shadow .18s ease}
.vercell:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,84,140,.18)}
.vercell__pic{flex:0 0 auto; width:72px; height:72px; border-radius:16px; overflow:hidden; background:linear-gradient(160deg,#e8f6ff,#cde9fb)}
.vercell__pic img{width:100%; height:100%; object-fit:cover; display:block}
.vercell__info{flex:1 1 auto; display:flex; flex-direction:column; gap:4px; min-width:0}
.vercell__info b{font-size:16px; font-weight:700; color:var(--txt); line-height:1.3}
.vercell__info em{font-style:normal; align-self:flex-start; font-size:12px; color:var(--ice); background:rgba(13,142,207,.10); padding:2px 8px; border-radius:999px}
.vercell__info i{font-style:normal; font-size:13px; color:var(--txt-2); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vercell__go{flex:0 0 auto; margin-left:auto; padding:9px 28px; border-radius:10px; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(180deg,#ffb648,#ff8a1f)}
@media(max-width:768px){
  .vercell{gap:12px; padding:12px}
  .vercell__pic{width:60px; height:60px}
  .vercell__go{padding:8px 18px}
}
.hero-act--dl{gap:10px; align-items:flex-end; justify-content:center}
/* 冰雪包裹：冰壳 + 顶部垂冰凌 + 底部冰刺 + 霜带 + 外圈寒气 */
.dlbox{flex:0 0 auto; position:relative; isolation:isolate; padding:22px 20px 20px; border-radius:24px; text-align:center;
  border:2px solid rgba(172,232,252,.95);
  background-color:rgba(248,253,255,.74);
  background-image:
    conic-gradient(from 315deg at 50% 100%,rgba(198,236,253,.85) 0deg 90deg,rgba(198,236,253,0) 90deg 360deg),
    conic-gradient(from 135deg at 50% 0%,rgba(198,236,253,.7) 0deg 90deg,rgba(198,236,253,0) 90deg 360deg),
    linear-gradient(180deg,rgba(216,244,255,.9),rgba(216,244,255,0)),
    linear-gradient(0deg,rgba(206,238,253,.85),rgba(206,238,253,0)),
    radial-gradient(circle at 4% 6%,rgba(146,214,245,.4),rgba(146,214,245,0) 34%),
    linear-gradient(168deg,rgba(255,255,255,.92),rgba(233,248,255,.8) 55%,rgba(214,240,253,.9));
  background-size:22px 11px,22px 11px,100% 40px,100% 34px,100% 100%,100% 100%;
  background-position:0 0,0 100%,0 0,0 100%,0 0,0 0;
  background-repeat:repeat-x,repeat-x,no-repeat,no-repeat,no-repeat,no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 2px rgba(255,255,255,.7),
    inset 0 22px 36px rgba(198,236,253,.45),
    inset 0 -18px 30px rgba(140,205,240,.2),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 0 5px rgba(160,230,252,.42),
    0 0 0 10px rgba(150,220,250,.14),
    0 0 30px rgba(85,185,245,.28),
    0 14px 36px rgba(16,84,140,.18)}
.dlbox__t{display:block; font-size:17px; font-weight:700; color:var(--txt); margin-bottom:12px; letter-spacing:.5px}
.dlbox__btns{display:flex; align-items:center; gap:16px; justify-content:center}
/* 首页 hero 下载区：去掉冰壳背景，按钮直接落在 hero 背景上 */
.dlbox--flat{background:transparent; border:none; box-shadow:none; padding:0; width:fit-content; margin:0 auto}
.dlbox--flat .dlbox__t{color:#fff; text-shadow:0 1px 4px rgba(0,40,80,.45)}
.dlimg{width:160px; height:45px; display:block; text-decoration:none; overflow:hidden; border-radius:12px}
.dlimg img{display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(13,110,170,.15); transition:transform .2s ease, box-shadow .2s ease}
.dlimg:hover img{transform:translateY(-4px); box-shadow:0 10px 26px rgba(13,110,170,.25)}
.dlchip{display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; padding:11px 8px 10px;
  border-radius:16px; border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.75));
  box-shadow:0 6px 18px rgba(13,110,170,.15);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.dlchip:hover{transform:translateY(-4px); box-shadow:0 10px 26px rgba(13,110,170,.25); border-color:var(--ice-1)}
.dlchip__ic{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff}
.dlchip--pc .dlchip__ic{background:linear-gradient(135deg,#0d8ecf,#3fc3f0)}
.dlchip--and .dlchip__ic{background:linear-gradient(135deg,#3ddc84,#0f9d76)}
.dlchip--ios .dlchip__ic{background:linear-gradient(135deg,#7b93a9,#0c2b46)}
.dlchip--qr{padding:11px 8px 10px; cursor:pointer}
.dlchip__qrimg{width:52px; height:52px; padding:4px; background:#fff; border-radius:8px; box-shadow:0 3px 10px rgba(13,110,170,.12)}
.dlchip__qrimg img,.dlchip__qrimg canvas{display:block; width:100% !important; height:100% !important}
.dlchip b{font-size:13px; color:var(--txt); font-weight:700}
@media(max-width:1100px){
  .dlbox{padding:14px 16px 16px}
  .dlchip{width:78px; padding:10px 6px 9px}
  .dlchip__ic{width:34px; height:34px}
  .dlchip__qrimg{width:46px; height:46px}
}
@media(max-width:620px){
  .hero-act--dl{flex-direction:column; align-items:center; gap:12px}
  .dlbox{width:100%; max-width:380px; padding:14px 12px 16px}
  .dlbox__btns{gap:8px}
  .dlchip{flex:1 1 0; min-width:0; width:auto; padding:10px 4px 9px}
}