/* 官网与充值中心共用样式：夜色青绿山水 + 金色点缀，与游戏内风格一致 */
:root{
  --ink:#071318; --ink-2:#0b1b21; --panel:#102730; --panel-2:#16353e; --line:#2b5560; --line-2:rgba(217,180,93,.26);
  --paper:#efe5cf; --muted:#97b0aa; --gold:#d9b45d; --gold-hi:#f3dc9c; --jade:#62b49b; --cinnabar:#cf4a33;
  --e-jin:#e0bd5e; --e-mu:#74c26b; --e-shui:#4fa6dc; --e-huo:#e9663f; --e-tu:#b98f55;
  --f-display:"Ma Shan Zheng","STKaiti","KaiTi","Kaiti SC",serif;
  --f-body:"Noto Serif SC","Songti SC","SimSun","Source Han Serif SC",serif;
  --nav-h:64px;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
html,body{background:var(--ink);color:var(--paper)}
body{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:32px;padding-right:32px}}

/* 导航 */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.solid,.nav.open{background:rgba(7,19,24,.9);backdrop-filter:blur(12px);border-color:var(--line-2)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{width:34px;height:34px}
.logo b{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1;color:var(--gold);letter-spacing:2px}
.nav-links{display:flex;gap:2px;margin:0 0 0 8px;padding:0;list-style:none}
.nav-links a{display:block;padding:6px 12px;border-radius:6px;text-decoration:none;color:var(--muted);font-size:14px;letter-spacing:2px;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-hi)}
.nav-cta{display:flex;gap:8px;margin-left:auto}
.menu-btn{display:none;flex:none;width:40px;height:40px;padding:0;background:none;border:1px solid var(--line);border-radius:8px}
.menu-btn span{display:block;width:18px;height:2px;margin:4px auto;background:var(--paper);transition:transform .2s,opacity .2s}
.nav.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav-cta .btn.ghost{display:none}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;margin:0;flex-direction:column;gap:0;padding:4px 16px 16px;background:rgba(7,19,24,.97);border-bottom:1px solid var(--line-2)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 4px;border-radius:0;border-bottom:1px solid rgba(43,85,96,.5);font-size:16px}
}
@media (max-width:420px){.logo b{font-size:21px}.logo img{width:28px;height:28px}.nav .wrap{gap:10px}}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(16,39,48,.6);color:var(--paper);font-size:14px;letter-spacing:2px;text-decoration:none;white-space:nowrap;transition:border-color .2s,transform .2s,box-shadow .2s}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:linear-gradient(180deg,#f0d27e,#b8902f);border-color:#f0d27e;color:#2a1d05;font-weight:700;box-shadow:0 6px 24px rgba(217,180,93,.22)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(217,180,93,.36)}
.btn.ghost{background:rgba(7,19,24,.35);border-color:var(--line-2);color:var(--gold-hi)}
.btn.lg{min-height:52px;padding:12px 34px;font-size:17px;letter-spacing:4px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* 区块标题 */
.sec{position:relative;padding:112px 0}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:56px;text-align:center}
.sec-head .no{font-family:var(--f-display);font-size:20px;letter-spacing:8px;color:var(--cinnabar)}
.sec-head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(38px,5.4vw,60px);line-height:1.1;letter-spacing:6px;color:var(--gold-hi)}
.sec-head p{margin:0;max-width:640px;color:var(--muted)}
.rule{display:flex;align-items:center;gap:10px}
.rule::before,.rule::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{transform:scaleX(-1)}
.rule i{width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--gold)}
@media (max-width:720px){.sec{padding:80px 0}.sec-head{margin-bottom:40px}}

/* 卡片底板 */
.panel{background:linear-gradient(180deg,rgba(22,53,62,.72),rgba(16,39,48,.72));border:1px solid var(--line-2);border-radius:16px}

/* 滚动渐显（只在脚本可用时隐藏初始状态） */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}

/* 页脚 */
.foot{background:#040c10;border-top:1px solid var(--line-2);padding:52px 0 calc(28px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:13px;line-height:1.9}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}
.foot .logo{margin-bottom:10px}
.foot h4{margin:0 0 8px;color:var(--paper);font-size:14px;font-weight:600;letter-spacing:2px}
.foot ul{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
.foot .health{margin-top:36px;padding-top:22px;border-top:1px solid rgba(43,85,96,.5);text-align:center;line-height:2}
.foot .health b{color:var(--paper);font-weight:600}
.foot .legal{margin-top:8px;text-align:center;font-size:12px;opacity:.75}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:80;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 18px;background:var(--panel-2);border:1px solid var(--gold);border-radius:10px;font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s}
#toast.show{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}