/* ============================================================
   home.css —— 首页：主视觉 / 主推双栏 / 四个入口 / 动态与简介
   布局参考游戏官网：满屏主视觉 + 左右不对称主推区 + 图标入口行
   ============================================================ */

/* ────────── 主视觉 ────────── */
.hero{
  position:relative;overflow:hidden;
  padding:92px 0 0;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(860px 520px at 74% 8%,rgba(74,222,128,.18),transparent 66%),
    radial-gradient(720px 460px at 12% 96%,rgba(56,189,248,.09),transparent 72%),
    linear-gradient(180deg,#0a1411 0%,#080b0a 76%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 10%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 10%,transparent 76%);
}
.hero-in{position:relative}
.hero-copy{max-width:780px}
.hero-copy h1{
  font-size:clamp(36px,6vw,66px);
  font-weight:800;letter-spacing:-.035em;line-height:1.08;
}
.hero-sub{
  margin-top:20px;max-width:600px;
  font-size:clamp(14.5px,1.4vw,16.5px);
  color:var(--mut);line-height:1.78;
}
.hero-note{
  display:flex;align-items:center;gap:8px;
  margin-top:22px;font-size:13px;color:var(--dim);
}
.tick-ico{
  display:grid;place-items:center;flex:none;
  width:18px;height:18px;border-radius:50%;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);
  color:var(--grn);font-size:10px;font-weight:800;
}

/* 主视觉右侧方块水印：窄屏直接不显示，别去挤正文 */
.hero-art{
  position:absolute;right:-40px;top:6px;
  width:460px;max-width:42%;
  pointer-events:none;
  opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 88%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 88%);
}
.hero-art svg{width:100%;height:auto;overflow:visible}
@media (max-width:1080px){.hero-art{display:none}}

/* 主视觉按钮：像官网一样居中压在底部，上方一条分隔线 */
.hero-cta-row{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  gap:12px;flex-wrap:wrap;
  margin-top:44px;padding-top:30px;
  border-top:1px solid var(--line);
}
.hero-cta-note{
  flex-basis:100%;
  text-align:center;
  font-size:12.5px;color:var(--dim);
}

/* ────────── 数据条 ────────── */
.statbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;margin-top:38px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{
  display:flex;flex-direction:column;gap:5px;
  padding:20px 22px;
  background:rgba(12,18,16,.82);
  backdrop-filter:blur(6px);
}
.stat-k{font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.stat-v{
  display:flex;align-items:baseline;gap:4px;min-width:0;
  font-size:20px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat-v b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-v em{font-style:normal;font-size:13px;font-weight:500;color:var(--dim)}
#sHost{cursor:pointer;transition:color .15s}
#sHost:hover{color:var(--grn)}
.stat-host .stat-v{font-size:17px}
.stat-host .stat-v b{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:-.02em}

/* ────────── 主推双栏 ────────── */
.sec-dual{padding:60px 0 70px}
.dual{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:18px;align-items:stretch;
}

/* 左：纵向大图版块 */
.dual-l{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:0;
  padding:26px 28px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 88% at 52% 0%,rgba(74,222,128,.13),transparent 60%),
    linear-gradient(180deg,#0d1714,#080d0b);
}
.dual-art{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:flex-end;
  padding:18px 0 138px 34%;
  opacity:.9;
}
.dual-art svg{width:min(330px,100%);height:auto}
.dual-art .blk{transform-box:view-box}
.dual-art .blk-main{animation:bob 8s ease-in-out infinite}
.dual-art .blk-dia{animation:bob 5.6s ease-in-out .7s infinite}
.dual-art .blk-stone{animation:bob 6.8s ease-in-out 1.4s infinite}
@keyframes bob{50%{translate:0 -13px}}
.dual-art .sp{animation:twinkle 3.4s ease-in-out infinite}
.dual-art .sp2{animation-delay:.9s}
.dual-art .sp3{animation-delay:1.7s}
.dual-art .sp4{animation-delay:2.4s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}

.dual-k{
  position:relative;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.2em;color:var(--grn);
}
.vtitle{
  position:relative;
  margin-top:12px;
  writing-mode:vertical-rl;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;letter-spacing:.16em;line-height:1.1;
  color:var(--txt);
  text-shadow:0 0 40px rgba(74,222,128,.3);
}
.vlist{
  position:relative;
  list-style:none;
  margin-top:auto;
  display:grid;gap:9px;
  padding:16px 18px;
  max-width:400px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(7,11,9,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:13px;color:var(--mut);
}
.vlist li{position:relative;padding-left:15px;line-height:1.6}
.vlist li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:1px;background:var(--grn);opacity:.8;
}
.vlist code{font-size:12px}
.dual-link{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;font-size:13.5px;font-weight:600;color:var(--grn);
}
.dual-link:hover{color:var(--mint)}

/* 右：促销 banner + 动态盒 */
.dual-r{display:flex;flex-direction:column;gap:16px;min-width:0}
.promo{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding:26px 28px;
  border:1px solid rgba(251,191,36,.26);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 150% at 88% 12%,rgba(251,191,36,.22),transparent 62%),
    linear-gradient(118deg,#1a1510,#0f1a15 68%);
  transition:transform .25s var(--ease),border-color .25s;
}
.promo:hover{transform:translateY(-3px);border-color:rgba(251,191,36,.46)}
.promo-txt{position:relative;z-index:1;min-width:0}
.promo-k{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;color:var(--gold);
}
.promo-txt h3{
  margin-top:9px;
  font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;
}
.promo-p{margin-top:8px;font-size:13.5px;color:var(--mut);line-height:1.7}
.promo-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;padding:9px 16px;border-radius:10px;
  background:linear-gradient(180deg,#fcd34d,#efb32a);
  color:#241a05;font-size:13px;font-weight:700;
}
.promo-glyph{
  position:absolute;right:16px;bottom:-26px;
  font-size:150px;font-weight:800;line-height:1;
  color:rgba(251,191,36,.1);
  pointer-events:none;
}

.newsbox{
  flex:1;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);overflow:hidden;
}
.ntabs{
  display:flex;align-items:center;gap:4px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.ntab{
  border:0;background:transparent;cursor:pointer;
  padding:6px 13px;border-radius:8px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--mut);
  transition:.16s;
}
.ntab:hover{color:var(--txt)}
.ntab.on{
  color:var(--txt);background:var(--panel2);
  box-shadow:inset 0 0 0 1px var(--line2);
}
.ntab-more{margin-left:auto;padding-right:4px;font-size:12.5px;color:var(--dim)}
.ntab-more:hover{color:var(--grn)}

.nlist{flex:1;padding:6px 8px 8px}
.nrow{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;
  transition:background .16s;
}
.nrow:hover{background:rgba(255,255,255,.045)}
.ntag{
  flex:none;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;
  border:1px solid var(--line2);color:var(--mut);
}
.ntitle{
  font-size:13.5px;color:var(--txt2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nrow:hover .ntitle{color:var(--txt)}
.ndate{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.nrow-skel{
  height:38px;margin:4px 6px;border-radius:8px;
  background:linear-gradient(100deg,var(--panel) 0%,var(--panel2) 45%,var(--panel) 90%);
  background-size:220% 100%;
  animation:shine 1.4s linear infinite;
}
.nempty{padding:18px 10px;font-size:13px;color:var(--dim);text-align:center}

/* ────────── 四个入口 ────────── */
.entries{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-top:18px;
}
.entry{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:24px 16px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.035),transparent 50%),var(--panel);
  text-align:center;
  transition:transform .22s var(--ease),border-color .22s,background .22s;
}
.entry:hover{transform:translateY(-3px);border-color:rgba(74,222,128,.3);background:var(--panel2)}
.entry-ico{
  display:grid;place-items:center;
  width:50px;height:50px;margin-bottom:6px;
  border-radius:50%;
  border:1px solid rgba(74,222,128,.26);
  background:rgba(74,222,128,.08);
  color:var(--mint);
}
.entry b{font-size:14.5px;font-weight:700;color:var(--txt)}
.entry span:last-child{font-size:12.5px;color:var(--dim)}

/* ────────── 最新动态 + 简介 ────────── */
.newsband{padding:62px 0 70px}
.nb{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:20px;align-items:stretch;
}
.nb-l{display:flex;flex-direction:column;min-width:0}
.nb-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.nb-head h2{font-size:clamp(20px,2.4vw,27px);font-weight:800;letter-spacing:-.02em}
.nb-more{font-size:13px;color:var(--mut)}
.nb-more:hover{color:var(--grn)}
.nb-list{
  flex:1;
  padding:6px 8px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);
}
.nb-r{
  position:relative;overflow:hidden;
  padding:30px 28px;
  border:1px solid rgba(251,191,36,.22);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 130% at 92% 0%,rgba(251,191,36,.14),transparent 62%),
    linear-gradient(180deg,#14130f,#0c1512);
}
.nb-k{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.2em;color:var(--gold);
}
.nb-r h2{margin-top:10px;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}
.nb-p{margin-top:12px;font-size:13.5px;color:var(--mut);line-height:1.85}
.nb-facts{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:18px 0 20px;
  font-size:12px;color:var(--dim);
}
.nb-facts b{color:var(--txt2);font-weight:600}