/* ==========================================================================
   萌宠出征 · 官网 /cz/  设计系统
   概念：一日两态 —— 白天陪你（暖水彩），夜里出征（深蓝夜幕）
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root{
  /* 纸与墨 */
  --cream:#FDF7EC; --paper:#FFFCF6; --sand:#F5EADA; --sand-2:#EFDFC9;
  --ink:#241C17; --ink-2:#55443A; --ink-3:#8C7767; --line:rgba(92,68,48,.13);
  --line-2:rgba(92,68,48,.22);

  /* 火焰色（行动 / 强调） */
  --ember:#DF5527; --ember-d:#C33F1B; --amber:#F2A23D; --gold:#F8D074;
  --grad-fire:linear-gradient(104deg,#DF5527 0%,#F2A23D 46%,#F8D074 100%);

  /* 自然色 */
  --moss:#5C8A56; --moss-l:#E9F1E3; --sky:#6DAFD0; --sky-l:#E4F1F7;
  --rose:#DF8598; --rose-l:#FBE9EC;

  /* 夜幕 */
  --dusk:#171427; --dusk-2:#201B33; --dusk-3:#2A2342; --dusk-4:#372E52;
  --lav:#9A88D8; --moon:#F3E7C8;

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --sh-1:0 2px 8px rgba(76,52,36,.05), 0 12px 28px -12px rgba(76,52,36,.14);
  --sh-2:0 4px 14px rgba(76,52,36,.07), 0 26px 60px -22px rgba(76,52,36,.24);
  --sh-3:0 8px 24px rgba(76,52,36,.10), 0 44px 90px -30px rgba(76,52,36,.32);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1240px;
  --nav-h:76px;
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.78; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
h1,h2,h3,h4,h5{margin:0; font-weight:900; line-height:1.24; letter-spacing:-.012em; text-wrap:balance}
.lead,.shead p,.endcta p{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:rgba(242,162,61,.32)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 26px}
.wrap-n{width:100%; max-width:960px; margin:0 auto; padding:0 26px}
.serif{font-family:"Georgia","Songti SC","Times New Roman",serif; font-style:italic; font-weight:400}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}

/* ---------- 3. 顶栏 ---------- */
.progress{position:fixed; left:0; top:0; height:2px; width:0; z-index:120; background:var(--grad-fire); box-shadow:0 0 12px rgba(242,162,61,.7)}
.navbar{position:fixed; left:0; right:0; top:14px; z-index:100; padding:0 20px; pointer-events:none}
.navbar .bar{
  pointer-events:auto; max-width:var(--wrap); margin:0 auto; height:64px;
  display:flex; align-items:center; gap:18px; padding:0 12px 0 16px;
  background:rgba(255,252,246,.80); backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.72); border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -12px rgba(76,52,36,.28);
  transition:height .3s var(--ease), background .3s, box-shadow .3s;
}
.navbar.solid .bar{height:58px; background:rgba(255,252,246,.94); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 40px -16px rgba(76,52,36,.34)}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand img{width:34px; height:34px; border-radius:10px; box-shadow:0 4px 12px rgba(223,85,39,.26)}
.brand .bt{display:flex; flex-direction:column; line-height:1.05}
.brand .bt b{font-size:16.5px; font-weight:900; letter-spacing:.02em}
.brand .bt span{font-size:8.5px; font-weight:800; letter-spacing:.22em; color:var(--ink-3); margin-top:3px}
.navlinks{display:flex; align-items:center; gap:2px; margin-left:auto}
.navlinks a{padding:7px 13px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--ink-2); transition:.24s var(--ease); white-space:nowrap}
.navlinks a:hover{color:var(--ember); background:rgba(242,162,61,.13)}
.navlinks a.on{color:var(--ember-d); background:rgba(242,162,61,.18); font-weight:800}

/* 「关于」下拉 */
.navdrop{position:relative; display:flex; align-items:center}
.dbtn{display:inline-flex; align-items:center; gap:3px; padding:7px 11px 7px 13px; border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--ink-2); transition:.24s var(--ease); white-space:nowrap}
.dbtn svg{width:12px; height:12px; transition:transform .26s var(--ease); opacity:.7}
.navdrop:hover .dbtn,.navdrop.open .dbtn{color:var(--ember); background:rgba(242,162,61,.13)}
.navdrop.open .dbtn svg{transform:rotate(180deg)}
.dmenu{position:absolute; top:100%; right:-6px; padding-top:12px; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s}
.navdrop:hover .dmenu,.navdrop.open .dmenu,.navdrop:focus-within .dmenu{opacity:1; visibility:visible; transform:none}
.dmenu-in{min-width:214px; padding:7px; border-radius:var(--r-m); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-2)}
.dmh{display:block; padding:8px 12px 6px; font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase}
.dmenu-in a{display:block; padding:9px 12px; border-radius:11px; transition:.18s}
.dmenu-in a:hover{background:var(--sand)}
.dmenu-in b{display:block; font-size:13.5px; font-weight:800; color:var(--ink)}
.dmenu-in small{display:block; font-size:11.5px; font-weight:600; color:var(--ink-3); margin-top:2px}
.dmenu-in a:hover b{color:var(--ember-d)}
.nav-cta{display:inline-flex; align-items:center; gap:7px; margin-left:6px; padding:9px 17px; border-radius:999px; font-size:13.5px; font-weight:800; color:#fff; background:var(--grad-fire); box-shadow:0 8px 20px -8px rgba(223,85,39,.7); transition:.26s var(--ease)}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(223,85,39,.8)}
.nav-cta svg{width:15px; height:15px}
.burger{display:none; width:40px; height:40px; border-radius:999px; align-items:center; justify-content:center; background:rgba(242,162,61,.14); margin-left:auto}
.burger i{display:block; width:16px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.24s}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:16px; height:2px; background:var(--ink); border-radius:2px; transition:.24s}
.burger i::before{top:-5px} .burger i::after{top:5px}
.sheet{position:fixed; inset:0; z-index:110; background:rgba(253,247,236,.98); backdrop-filter:blur(18px); padding:22px; display:none; flex-direction:column}
.sheet.on{display:flex}
.sheet .sh{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.sheet .sh b{font-size:17px; font-weight:900}
.sheet .x{width:40px; height:40px; border-radius:999px; background:rgba(242,162,61,.15); font-size:19px; display:grid; place-items:center}
.sheet a{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; margin-bottom:8px; border-radius:16px; background:#fff; border:1px solid var(--line); font-size:16px; font-weight:800}
.sheet a small{font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.14em}
.sheet .shdiv{margin:14px 0 10px; padding:0 4px; font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase}

/* ---------- 4. 按钮 / 标签 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 26px; border-radius:999px; font-size:15px; font-weight:800; letter-spacing:.01em; transition:.26s var(--ease); white-space:nowrap}
.btn svg{width:18px; height:18px}
.btn-fire{color:#fff; background:var(--grad-fire); box-shadow:0 10px 26px -10px rgba(223,85,39,.85), 0 1px 0 rgba(255,255,255,.4) inset}
.btn-fire:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(223,85,39,.95)}
.btn-ghost{color:var(--ink); background:rgba(255,255,255,.72); border:1.5px solid var(--line-2); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--ember); color:var(--ember-d); background:#fff; transform:translateY(-2px)}
.btn-sm{height:42px; padding:0 19px; font-size:13.5px}
.btn-ghost.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-ghost.on:hover{background:var(--ink); color:#fff}
.on-dark .btn-ghost{color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5)}

.kicker{display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:800; letter-spacing:.2em; color:var(--ember-d); text-transform:uppercase}
.kicker::before{content:""; width:26px; height:1.5px; background:currentColor; opacity:.55}
.on-dark .kicker{color:var(--gold)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800; background:rgba(242,162,61,.14); color:var(--ember-d); letter-spacing:.04em}
.chip-moss{background:var(--moss-l); color:#41673C}
.chip-sky{background:var(--sky-l); color:#2E6C8A}
.chip-rose{background:var(--rose-l); color:#A34E62}
.chip-dusk{background:rgba(154,136,216,.18); color:#6E5CB0}

/* ---------- 5. 区块骨架 ---------- */
section{position:relative}
.sec{padding:96px 0}
.sec-s{padding:64px 0}
.sec-paper{background:var(--paper)}
.sec-sand{background:linear-gradient(180deg,var(--sand) 0%,#FBF1E2 100%)}
.on-dark{background:var(--dusk); color:#F4EEE4}
.on-dark h1,.on-dark h2,.on-dark h3{color:#FBF6EC}
.on-dark p{color:rgba(244,238,228,.76)}
.on-dark .chip{background:rgba(255,255,255,.09); color:#F0E2C8}

.shead{max-width:720px; margin-bottom:52px}
.shead.center{margin-left:auto; margin-right:auto; text-align:center}
.shead.center .kicker{justify-content:center}
.shead h2{font-size:clamp(27px,3.5vw,44px); margin:16px 0 16px}
.shead p{font-size:16.5px; color:var(--ink-2); max-width:640px}
.shead.center p{margin-left:auto; margin-right:auto}
.on-dark .shead p{color:rgba(244,238,228,.72)}
.hl{background:var(--grad-fire); -webkit-background-clip:text; background-clip:text; color:transparent}
.on-dark .hl{background:linear-gradient(104deg,#F8D074,#F2A23D 55%,#DF5527); -webkit-background-clip:text; background-clip:text}
.mark{position:relative; white-space:nowrap}
.nb{white-space:nowrap}
.mark::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.34em; background:rgba(242,162,61,.34); z-index:-1; border-radius:3px}

/* ---------- 6. 首页 Hero ---------- */
.hero{position:relative; min-height:min(94vh,860px); display:flex; align-items:center; padding:calc(var(--nav-h) + 40px) 0 60px; overflow:hidden; background:#1a1522}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media video,.hero-media .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-media .poster{background:url("../img/hero-poster.webp") center/cover no-repeat; opacity:1; transition:opacity 1.2s ease}
.hero-media video{opacity:0; transition:opacity 1.2s ease}
.hero-media.playing video{opacity:1}
.hero-media.playing .poster{opacity:0}
.hero-media::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(78% 58% at 50% 44%,rgba(30,17,22,.50) 0%,rgba(30,17,22,.30) 46%,rgba(30,17,22,0) 72%),
    radial-gradient(120% 80% at 50% 8%,rgba(255,238,208,.26) 0%,rgba(255,238,208,0) 52%),
    linear-gradient(180deg,rgba(26,18,26,.46) 0%,rgba(26,18,26,.12) 30%,rgba(26,18,26,.52) 74%,rgba(253,247,236,.97) 100%);
}
.hero-in{position:relative; z-index:2; text-align:center; width:100%}
.hero-logo{width:clamp(220px,28vw,380px); margin:0 auto 20px; filter:drop-shadow(0 18px 44px rgba(60,30,10,.42)); animation:logoIn 1.1s var(--ease) both}
.hero-eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; padding:7px 16px 7px 9px; border-radius:999px; font-size:12px; font-weight:800; color:#FFF6E6; letter-spacing:.08em; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px)}
.hero-eyebrow b{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:var(--grad-fire); font-size:11px; letter-spacing:.04em}
.hero h1{font-size:clamp(32px,4.6vw,60px); color:#fff; letter-spacing:-.02em; text-shadow:0 6px 44px rgba(30,14,10,.55),0 2px 10px rgba(30,14,10,.35); margin-bottom:18px}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,#FFEFC4,#F8D074 42%,#F2A23D); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 6px 22px rgba(28,12,10,.55))}
.hero .lead{max-width:600px; margin:0 auto; font-size:clamp(14.5px,1.6vw,17.5px); line-height:1.85; color:rgba(255,252,244,.88); text-shadow:0 2px 16px rgba(40,20,10,.34)}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:32px 0 26px}
.hero-tags{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:rgba(255,252,244,.8)}
.hero-tags span{display:inline-flex; align-items:center; gap:6px}
.hero-tags i{width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(248,208,116,.3)}

.hero-stats{position:relative; z-index:3; margin-top:-34px}
.stats{display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,252,246,.86); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.9); border-radius:var(--r-l); box-shadow:var(--sh-2); overflow:hidden}
.stats div{padding:22px 20px; text-align:center; border-right:1px solid var(--line); transition:.3s var(--ease)}
.stats div:last-child{border-right:0}
.stats div:hover{background:rgba(242,162,61,.09)}
.stats b{display:block; font-size:clamp(24px,2.8vw,36px); font-weight:900; letter-spacing:-.02em; background:var(--grad-fire); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1}
.stats span{display:block; font-size:12px; font-weight:700; color:var(--ink-3); margin-top:5px; letter-spacing:.04em}
@keyframes logoIn{from{opacity:0; transform:translateY(26px) scale(.94)} to{opacity:1; transform:none}}
.scrollcue{display:none !important;position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; font-size:10.5px; letter-spacing:.28em; font-weight:800; color:rgba(255,252,244,.7); writing-mode:vertical-rl; display:flex; align-items:center; gap:8px}
.scrollcue::after{content:""; width:1px; height:34px; background:linear-gradient(180deg,rgba(255,255,255,.8),transparent); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)}}

/* ---------- 7. 卡片 ---------- */
.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; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:28px; box-shadow:var(--sh-1); transition:.3s var(--ease); overflow:hidden}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(242,162,61,.4)}
.card .ic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(242,162,61,.14); margin-bottom:16px}
.card .ic svg{width:24px; height:24px; stroke:var(--ember-d)}
.card h3{font-size:18.5px; margin-bottom:8px}
.card p{font-size:14.5px; color:var(--ink-2); line-height:1.8}
.card .num{position:absolute; right:20px; top:14px; font-family:Georgia,serif; font-size:52px; font-weight:400; font-style:italic; color:rgba(223,85,39,.10); line-height:1}

/* 图片卡 */
.figcard{border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh-1)}
.figcard img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease)}
.figcard:hover img{transform:scale(1.04)}
.figcard .cap{padding:14px 18px; font-size:13px; color:var(--ink-3); border-top:1px solid var(--line)}

/* ---------- 8. 双栏叙事 ---------- */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
.split.rev .s-media{order:2}
.s-media{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); border:1px solid rgba(255,255,255,.6)}
.s-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.s-media.tall img{aspect-ratio:3/4}
.s-media .tagline{position:absolute; left:16px; bottom:16px; padding:7px 14px; border-radius:999px; font-size:12px; font-weight:800; color:#fff; background:rgba(36,28,23,.55); backdrop-filter:blur(8px)}
.s-txt h3{font-size:clamp(22px,2.6vw,32px); margin:14px 0 14px}
.s-txt p{font-size:15.5px; color:var(--ink-2)}
.blist{margin-top:20px; display:grid; gap:11px}
.blist li{display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); line-height:1.72}
.blist li::before{content:""; flex:0 0 auto; width:18px; height:18px; margin-top:4px; border-radius:6px; background:rgba(242,162,61,.2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23C33F1B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.4'/%3E%3C/svg%3E") center/13px no-repeat}
.blist li b{color:var(--ink)}
.on-dark .blist li{color:rgba(244,238,228,.78)}
.on-dark .blist li b{color:#FBF6EC}

/* ---------- 9. 四大世界（滚动切换） ---------- */
.worlds{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
.world-list{display:grid; gap:14px}
.world-item{padding:22px 24px; border-radius:var(--r-m); border:1px solid transparent; background:transparent; transition:.4s var(--ease); cursor:pointer; text-align:left; width:100%}
.world-item .wt{display:flex; align-items:center; gap:12px; font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--ink-3)}
.world-item h3{font-size:21px; margin:8px 0 6px; transition:.3s}
.world-item p{font-size:14px; color:var(--ink-3); max-height:0; overflow:hidden; opacity:0; transition:.4s var(--ease)}
.world-item.on{background:var(--paper); border-color:rgba(242,162,61,.44); box-shadow:var(--sh-1)}
.world-item.on p{max-height:120px; opacity:1; margin-top:8px}
.world-item.on h3{color:var(--ember-d)}
.world-stage{position:sticky; top:104px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); background:var(--dusk); aspect-ratio:16/11}
.world-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .8s var(--ease), transform 1.4s var(--ease)}
.world-stage img.on{opacity:1; transform:scale(1)}
.world-stage .wb{position:absolute; left:0; right:0; bottom:0; padding:26px; background:linear-gradient(0deg,rgba(20,12,24,.86),rgba(20,12,24,0)); color:#fff; z-index:2}
.world-stage .wb b{font-size:20px; display:block}
.world-stage .wb span{font-size:12.5px; color:rgba(255,255,255,.72); letter-spacing:.06em}

/* ---------- 10. 关卡地图 ---------- */
.lmap{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:34px 30px; box-shadow:var(--sh-1)}
.lrow{display:grid; grid-template-columns:158px 1fr; gap:20px; align-items:center; padding:16px 0; border-bottom:1px dashed var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .lname{font-size:13px; font-weight:900; color:var(--ink); line-height:1.5}
.lrow .lname small{display:block; font-size:11px; color:var(--ink-3); font-weight:700; letter-spacing:.06em; margin-top:3px}
.nodes{display:grid; grid-template-columns:repeat(10,1fr); gap:8px}
.node{position:relative; aspect-ratio:1; border-radius:12px; display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--ink-3); background:var(--sand); border:1px solid transparent; transition:.24s var(--ease)}
.node:hover{transform:translateY(-3px); border-color:var(--amber); color:var(--ember-d); background:#fff}
.node.boss{color:#fff; background:var(--grad-fire); box-shadow:0 6px 16px -6px rgba(223,85,39,.8); border-radius:14px}
.node.boss::after{content:""; position:absolute; inset:-3px; border-radius:16px; border:1px solid rgba(223,85,39,.35)}
.node:hover::before{content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--ink); color:#fff; font-size:11px; font-weight:700; padding:6px 11px; border-radius:8px; z-index:9; box-shadow:var(--sh-1)}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:12px; color:var(--ink-3); font-weight:700}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:11px; height:11px; border-radius:4px; display:inline-block}

/* ---------- 11. 宠物矩阵 ---------- */
.pet-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:26px}
.filter{display:inline-flex; padding:5px; border-radius:999px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); gap:2px}
.filter button{padding:7px 15px; border-radius:999px; font-size:13px; font-weight:800; color:var(--ink-3); transition:.24s var(--ease)}
.filter button:hover{color:var(--ember-d)}
.filter button.on{background:var(--ink); color:#fff}
.petgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.pet{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 18px 16px; text-align:left; transition:.3s var(--ease); overflow:hidden}
.pet:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(242,162,61,.45)}
.pet .ph{position:relative; display:grid; place-items:center; height:128px; margin-bottom:8px; border-radius:14px; background:radial-gradient(circle at 50% 74%,rgba(242,162,61,.13),rgba(242,162,61,0) 66%)}
.pet .ph img{height:118px; width:auto; object-fit:contain; transition:transform .4s var(--ease); filter:drop-shadow(0 10px 14px rgba(90,60,35,.18))}
.pet:hover .ph img{transform:translateY(-4px) scale(1.05)}
.pet .rate{position:absolute; right:6px; top:4px; font-size:10.5px; font-weight:900; padding:2px 7px; border-radius:7px; color:#fff; letter-spacing:.02em}
.rate.S{background:linear-gradient(135deg,#DF5527,#F2A23D)}
.rate.A{background:linear-gradient(135deg,#5C8A56,#8FB884)}
.rate.B{background:linear-gradient(135deg,#9C8EA0,#B9AEBE)}
.pet h4{font-size:15.5px; display:flex; align-items:center; gap:7px}
.pet h4 span{font-size:10.5px; font-weight:800; color:var(--ink-3); background:var(--sand); padding:1px 6px; border-radius:5px}
.pet .sk{font-size:12px; color:var(--ember-d); font-weight:800; margin-top:5px; display:flex; align-items:center; gap:5px}
.pet .sk em{font-style:normal; font-weight:700; color:var(--ink-3); font-size:11px}
.pet .ps{font-size:11.5px; color:var(--ink-3); line-height:1.6; margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pet .lock{position:absolute; inset:0; display:none; place-items:center; background:rgba(253,247,236,.9); backdrop-filter:blur(2px)}
.pet[data-lock="1"] .lock{display:grid}
.pet[data-lock="1"] .ph img{filter:grayscale(.7) opacity(.6)}

/* ---------- 12. 交互演示：气势槽 ---------- */
.demo{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.panel{position:relative; border-radius:var(--r-l); border:1px solid rgba(255,255,255,.12); background:linear-gradient(160deg,#241E3A,#1B1730); padding:26px; overflow:hidden; color:#F4EEE4}
.panel h4{font-size:14px; letter-spacing:.06em; color:rgba(244,238,228,.6); font-weight:800; margin-bottom:16px}
.pips{display:flex; gap:10px; margin:6px 0 18px}
.pip{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); transition:.26s var(--ease)}
.pip svg{width:18px; height:18px; stroke:rgba(244,238,228,.34); fill:none; stroke-width:1.8}
.pip.on{background:linear-gradient(150deg,#F2A23D,#DF5527); border-color:transparent; box-shadow:0 0 22px rgba(242,162,61,.55); transform:translateY(-2px)}
.pip.on svg{stroke:#fff}
.panel .hint{font-size:12.5px; color:rgba(244,238,228,.6); line-height:1.7}
.panel .hitbtn{margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); font-size:13px; font-weight:800; transition:.24s}
.panel .hitbtn:hover{background:rgba(255,255,255,.18)}
.panel.heavy{animation:shake .5s var(--ease)}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
.slash{position:absolute; inset:0; pointer-events:none; opacity:0}
.slash.go{opacity:1}
.slash span{position:absolute; left:50%; top:46%; width:2px; height:0; background:linear-gradient(180deg,transparent,#FFE9B8,transparent); transform-origin:top center; filter:blur(.4px)}
.slash.go span{animation:sl .42s var(--ease) forwards}
.slash span:nth-child(1){transform:rotate(-24deg) translateX(-26px)}
.slash span:nth-child(2){transform:rotate(2deg) translateX(0)}
.slash span:nth-child(3){transform:rotate(26deg) translateX(26px)}
@keyframes sl{0%{height:0; opacity:0}35%{height:150px; opacity:1}100%{height:190px; opacity:0}}

/* 三选一 */
.pickrow{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pickcard{border-radius:14px; padding:13px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:.28s var(--ease); text-align:center; cursor:pointer}
.pickcard:hover{transform:translateY(-3px); background:rgba(255,255,255,.12)}
.pickcard img{width:38px; height:38px; margin:0 auto 7px; object-fit:contain}
.pickcard b{display:block; font-size:12.5px}
.pickcard small{display:block; font-size:10.5px; color:rgba(244,238,228,.55); margin-top:2px}
.pickcard.epic{border-color:rgba(242,162,61,.7); box-shadow:0 0 0 1px rgba(242,162,61,.25) inset}
.pickcard.rare{border-color:rgba(154,136,216,.6)}
.pickcard.chosen{border-color:var(--gold); background:rgba(248,208,116,.16); transform:scale(.97)}
.pickbtns{display:flex; gap:9px; margin-top:12px}
.pickbtns button{flex:1; padding:8px; border-radius:10px; font-size:12px; font-weight:800; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:rgba(244,238,228,.85)}
.pickbtns button:hover{background:rgba(255,255,255,.14)}

/* ---------- 13. 桌宠模拟 ---------- */
.desk{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.5); aspect-ratio:16/9.4; background:#C9BDB4}
.desk .wall{position:absolute; inset:0; background:url("../img/scene/world-roof.webp") center/cover no-repeat; filter:saturate(1.05)}
.desk .wall::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,30,60,.28),rgba(20,30,60,.12) 40%,rgba(20,30,60,.42))}
.dicons{position:absolute; left:18px; top:18px; display:grid; gap:14px; z-index:2}
.dicons i{display:block; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.86); box-shadow:0 6px 14px -6px rgba(0,0,0,.5); position:relative}
.dicons i:nth-child(1)::after,.dicons i:nth-child(2)::after,.dicons i:nth-child(3)::after,.dicons i:nth-child(4)::after{
  content:""; position:absolute; inset:9px; border-radius:5px; background:linear-gradient(140deg,#F2A23D,#DF5527); opacity:.9}
.dicons i:nth-child(2)::after{background:linear-gradient(140deg,#7FB79B,#3F7D63)}
.dicons i:nth-child(3)::after{background:linear-gradient(140deg,#8FB6D9,#3D6E97)}
.dicons i:nth-child(4)::after{background:linear-gradient(140deg,#C6A9E2,#7A5DA8)}
.desk .win{position:absolute; left:12%; top:14%; width:50%; border-radius:12px; overflow:hidden; box-shadow:0 24px 50px -20px rgba(20,14,30,.6); background:rgba(255,255,255,.97)}
.desk .win .wt{height:30px; background:#F4F2EF; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #EAE6E0}
.desk .win .wt i{width:9px; height:9px; border-radius:50%; background:#DFD8D0}
.desk .win .wb{padding:18px; display:grid; gap:9px}
.desk .win .wb span{height:8px; border-radius:4px; background:#EDE9E3}
.desk .win .wb span:nth-child(1){width:64%} .desk .win .wb span:nth-child(2){width:88%}
.desk .win .wb span:nth-child(3){width:52%} .desk .win .wb span:nth-child(4){width:74%} .desk .win .wb span:nth-child(5){width:36%}
.desk .taskbar{position:absolute; left:0; right:0; bottom:0; height:44px; background:rgba(250,249,247,.82); backdrop-filter:blur(14px); display:flex; align-items:center; gap:9px; padding:0 14px; z-index:4; font-size:11px; color:#5C544D; font-weight:700}
.desk .taskbar i{width:24px; height:24px; border-radius:7px; background:#DCD6CE}
.desk .taskbar i.on{background:var(--grad-fire); box-shadow:0 4px 10px -3px rgba(223,85,39,.8)}
.desk .taskbar .clock{margin-left:auto}
.desk .petpeek{position:absolute; right:8%; bottom:56px; width:clamp(96px,13%,168px); animation:bob 5.5s ease-in-out infinite; filter:drop-shadow(0 18px 22px rgba(40,26,18,.4)); z-index:3; cursor:pointer}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
.desk .menu{position:absolute; right:calc(8% + 100px); bottom:calc(56px + 40px); width:198px; border-radius:14px; background:rgba(255,253,249,.98); backdrop-filter:blur(16px); box-shadow:0 26px 54px -18px rgba(20,14,30,.6); border:1px solid rgba(255,255,255,.9); padding:7px; font-size:12.5px; opacity:0; transform:translateY(8px) scale(.98); transition:.26s var(--ease); pointer-events:none; z-index:5}
.desk .menu.on{opacity:1; transform:none; pointer-events:auto}
.desk .menu .mh{font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--ink-3); padding:6px 9px 3px}
.desk .menu button{display:flex; align-items:center; gap:8px; width:100%; padding:6px 9px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--ink-2); text-align:left; line-height:1.5}
.desk .menu button:hover{background:rgba(242,162,61,.16); color:var(--ember-d)}
.desk .menu hr{border:0; border-top:1px solid var(--line); margin:4px 6px}

/* ---------- 14. 表格 / 折叠 ---------- */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line)}
.table th{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; background:rgba(245,234,218,.5)}
.table tr:last-child td{border-bottom:0}
.table td b{font-weight:800}

.acc{border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh-1)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{cursor:pointer; list-style:none; padding:18px 22px; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:800; transition:.2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:rgba(242,162,61,.07)}
.acc summary::after{content:""; margin-left:auto; width:9px; height:9px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); transition:.26s var(--ease); flex:0 0 auto}
.acc details[open] summary::after{transform:rotate(-135deg); border-color:var(--ember)}
.acc details[open] summary{color:var(--ember-d)}
.acc .a-body{padding:0 22px 20px; font-size:14.5px; color:var(--ink-2); line-height:1.85}
.acc .a-body p+p{margin-top:10px}

/* ---------- 15. 时间线 ---------- */
.timeline{position:relative; padding-left:26px}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,rgba(242,162,61,.6),rgba(242,162,61,.1))}
.tl-item{position:relative; padding-bottom:26px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-27px; top:7px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--amber)}
.tl-item.now::before{background:var(--grad-fire); border-color:#fff; box-shadow:0 0 0 4px rgba(242,162,61,.22)}
.tl-item b{font-size:15px}
.tl-item .v{font-size:11px; font-weight:800; color:var(--ember-d); letter-spacing:.06em}
.tl-item p{font-size:13.5px; color:var(--ink-2); margin-top:4px}

/* ---------- 16. CTA 结尾 ---------- */
.endcta{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:64px 40px; text-align:center; color:#fff; background:linear-gradient(140deg,#2A1E2E,#3A2436 45%,#5A3020); box-shadow:var(--sh-3)}
.endcta::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 50% 110%,rgba(242,162,61,.55),transparent 62%);}
.endcta>*{position:relative; z-index:2}
.endcta h2{font-size:clamp(26px,3.4vw,42px); color:#fff; margin-bottom:14px}
.endcta p{color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 28px}
.endcta .hero-cta{margin-bottom:0}

/* ---------- 17. 页脚 ---------- */
footer{background:var(--dusk); color:rgba(244,238,228,.7); padding:64px 0 30px; margin-top:0}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.09)}
.fbrand img{width:236px; height:auto; margin:-4px 0 16px -10px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(242,162,61,.30))}
@media (max-width:620px){.fbrand img{width:200px; margin-left:-8px}}
.fbrand p{font-size:13px; line-height:1.9; max-width:280px}
.fcol h5{font-size:12px; letter-spacing:.16em; color:rgba(244,238,228,.45); margin-bottom:14px; font-weight:800}
.fcol a,.fcol span{display:block; font-size:13.5px; padding:4px 0; transition:.2s}
.fcol a:hover{color:var(--gold)}
.fbot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; font-size:12px; color:rgba(244,238,228,.42)}

/* 页内锚点：给吸顶子导航留位置 */
section[id]{scroll-margin-top:158px}

/* 页内子导航 */
.subbar{position:sticky; top:88px; z-index:60; margin-top:-26px; pointer-events:none}
.subnav{pointer-events:auto; display:flex; gap:6px; flex-wrap:wrap; padding:8px; border-radius:999px;
  background:rgba(255,252,246,.90); backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px -16px rgba(76,52,36,.32);
  width:fit-content}
.subnav a{font-size:13px; font-weight:700; color:var(--ink-2); padding:7px 14px; border-radius:999px;
  transition:.22s var(--ease); white-space:nowrap}
.subnav a:hover{background:var(--sand); color:var(--ember-d)}
@media (max-width:1080px){
  .dbtn{padding:7px 8px 7px 10px}
  .navlinks a{padding:7px 9px; font-size:13px}
}
@media (max-width:920px){
  .navdrop{display:none}
  .subbar{top:78px; margin-top:-16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .subbar::-webkit-scrollbar{display:none}
  .subnav{flex-wrap:nowrap; width:max-content; border-radius:999px}
  section[id]{scroll-margin-top:140px}
}
@media (max-width:620px){
  .subbar{margin-top:-6px}
  .subnav a{font-size:12.5px; padding:6px 12px}
}

/* ---------- 18. 滚动揭示 ---------- */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.rv{opacity:1}
.rv.d1{transition-delay:.07s} .rv.d2{transition-delay:.14s} .rv.d3{transition-delay:.21s} .rv.d4{transition-delay:.28s}

/* ---------- 19. 子页页头 ---------- */
.phead{position:relative; padding:calc(var(--nav-h) + 78px) 0 64px; overflow:hidden}
.phead .bg{position:absolute; inset:0; z-index:0}
.phead .bg img{width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(1.02)}
.phead .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(253,247,236,.18) 0%,rgba(253,247,236,.62) 46%,rgba(253,247,236,.94) 82%,var(--cream) 100%)}
.phead-in{position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .7fr; gap:34px; align-items:center}
.phead h1{font-size:clamp(30px,4.4vw,54px); margin:14px 0 14px}
.phead p{font-size:16px; color:var(--ink-2); max-width:600px}
.crumb{font-size:12px; font-weight:700; color:var(--ink-3); margin-bottom:10px}
.crumb a:hover{color:var(--ember)}
.phead .art{position:relative; display:grid; place-items:center}
.phead .art img{max-height:216px; width:auto; filter:drop-shadow(0 20px 30px rgba(90,60,35,.24)); animation:bob 6.5s ease-in-out infinite}

/* ---------- 20. 响应式 ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .petgrid{grid-template-columns:repeat(3,1fr)}
  .split{gap:34px}
  .worlds{grid-template-columns:1fr}
  .world-stage{position:relative; top:0; aspect-ratio:16/10}
  .demo{grid-template-columns:1fr}
  .phead-in{grid-template-columns:1fr}
  .phead .art{display:none}
  .fgrid{grid-template-columns:1fr 1fr; gap:26px}
}
@media (max-width:920px){
  .navlinks{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  .sec{padding:70px 0}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats div:nth-child(3){border-right:0}
  .stats div:nth-child(n+4){border-top:1px solid var(--line)}
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.rev .s-media{order:0}
  .petgrid{grid-template-columns:repeat(2,1fr)}
  .lrow{grid-template-columns:1fr; gap:10px}
  .nodes{grid-template-columns:repeat(5,1fr)}
  .pickrow{grid-template-columns:1fr 1fr 1fr}
  .hero{min-height:auto; padding-bottom:40px}
  .scrollcue{display:none !important;display:none}
}
@media (max-width:620px){
  body{font-size:15px}
  .wrap,.wrap-n{padding:0 18px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div{border-right:0}
  .stats div:nth-child(odd){border-right:1px solid var(--line)}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .petgrid{grid-template-columns:1fr 1fr; gap:12px}
  .pet{padding:14px 12px}
  .pet .ph{height:88px} .pet .ph img{height:84px}
  .card{padding:22px}
  .lmap{padding:22px 16px}
  .endcta{padding:44px 22px}
  .fgrid{grid-template-columns:1fr}
  .desk{aspect-ratio:3/4}
  .desk .win{width:66%}
  .desk .menu{right:4%; width:180px}
  .hero-cta .btn{width:100%}
  .filter button{padding:6px 11px; font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

/* ==========================================================================
   21. 内页组件
   ========================================================================== */
/* 流程步进 */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:8px}
.flow .st{position:relative; padding:18px 16px; border-radius:16px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1)}
.flow .st::after{content:""; position:absolute; right:-11px; top:50%; width:12px; height:1.5px; background:var(--line-2)}
.flow .st:last-child::after{display:none}
.flow .st b{display:block; font-size:12px; letter-spacing:.12em; color:var(--ember-d); margin-bottom:6px; font-weight:900}
.flow .st span{font-size:13px; color:var(--ink-2); line-height:1.6}
.on-dark .flow .st{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.on-dark .flow .st::after{background:rgba(255,255,255,.2)}
.on-dark .flow .st span{color:rgba(244,238,228,.72)}

/* 键值表 */
.kvs{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; margin-top:18px}
.kvs div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px}
.kvs div span{color:var(--ink-3); font-weight:700}
.kvs div b{font-weight:900; color:var(--ink)}

/* 图标网格 */
.icogrid{display:grid; grid-template-columns:repeat(8,1fr); gap:14px}
.icogrid figure{margin:0; text-align:center}
.icogrid img{width:100%; max-width:64px; margin:0 auto 8px; transition:transform .3s var(--ease); filter:drop-shadow(0 6px 10px rgba(90,60,35,.16))}
.icogrid figure:hover img{transform:translateY(-4px) scale(1.08)}
.icogrid figcaption{font-size:11.5px; font-weight:700; color:var(--ink-2); line-height:1.5}
.icogrid figcaption small{display:block; color:var(--ink-3); font-weight:600; font-size:10.5px}

/* Boss 行 */
.bossrow{display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line)}
.bossrow:last-child{border-bottom:0}
.bossrow .bimg{position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:20px; background:radial-gradient(circle at 50% 62%,rgba(154,136,216,.26),rgba(23,20,39,.05) 70%); overflow:hidden}
.bossrow .bimg img{width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(60,40,90,.3))}
.bossrow h3{font-size:20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bossrow p{font-size:14.5px; color:var(--ink-2); margin-top:8px}
.bossrow .kvs{margin-top:12px}

/* 害虫卡 */
.enemygrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.enemy{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:16px; box-shadow:var(--sh-1); transition:.28s var(--ease)}
.enemy:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.enemy .eh{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.enemy img{width:64px; height:64px; object-fit:contain; flex:0 0 auto; background:radial-gradient(circle at 50% 60%,rgba(242,162,61,.16),rgba(242,162,61,0) 70%); border-radius:12px}
.enemy b{font-size:15px}
.enemy .em{font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px; background:var(--sand); color:var(--ink-2); margin-left:auto}
.enemy .em.boss{background:var(--grad-fire); color:#fff}
.enemy p{font-size:12.5px; color:var(--ink-3); line-height:1.65}
.enemy .es{display:flex; gap:10px; margin-top:10px; font-size:11px; font-weight:700; color:var(--ink-2)}
.enemy .es span{background:var(--sand); padding:2px 7px; border-radius:5px}

/* 下载卡 */
.dlcard{display:grid; grid-template-columns:1.15fr .85fr; gap:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-2); background:var(--paper)}
.dlcard .l{padding:38px 40px}
.dlcard .r{position:relative; background:linear-gradient(150deg,#2A2038,#3E2A2A); display:grid; place-items:center; overflow:hidden}
.dlcard .r img{width:56%; filter:drop-shadow(0 20px 34px rgba(0,0,0,.45)); animation:bob 6s ease-in-out infinite}
.dlcard .ver{font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--ember-d)}
.dlcard h2{font-size:clamp(24px,3vw,34px); margin:10px 0 12px}
.dlcard .meta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); font-weight:700; margin:16px 0 22px}
.codebox{display:flex; align-items:center; gap:10px; background:var(--sand); border:1px dashed var(--line-2); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--ink-2); overflow:auto}
.codebox code{font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; color:var(--ink); white-space:nowrap}
.codebox button{margin-left:auto; flex:0 0 auto; padding:6px 12px; border-radius:8px; background:#fff; border:1px solid var(--line-2); font-size:11.5px; font-weight:800}

/* ---------- 资讯中心 ---------- */
.newsgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ncard{display:flex; flex-direction:column; gap:9px; padding:20px 21px 18px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; transition:.24s var(--ease)}
.ncard:hover{transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(90,50,30,.45); border-color:rgba(223,85,39,.32)}
.ncard .ntag{font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--ember-d);
  background:rgba(242,162,61,.16); padding:3px 8px; border-radius:6px; width:fit-content}
.ncard h3{font-size:15.5px; line-height:1.5; margin:0; font-weight:800}
.ncard p{font-size:13px; color:var(--ink-2); line-height:1.75; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ncard .nmeta{font-size:11.5px; color:var(--ink-3); font-weight:700; margin-top:auto; padding-top:4px}
.newsgroup{margin-top:40px}
.newsgroup h2{font-size:19px; margin:0 0 15px; display:flex; align-items:center; gap:10px}
.newsgroup h2 span{font-size:12px; font-weight:800; color:var(--ink-3); letter-spacing:.08em}
.subnav a{display:inline-flex; align-items:center; gap:5px}

/* 文章页收紧页头（长标题容易撑出大块空白） */
[data-page="news.html"] .phead{padding:calc(var(--nav-h) + 54px) 0 30px}
[data-page="news.html"] .phead h1{font-size:clamp(24px,3.3vw,38px); line-height:1.32; max-width:19em}
[data-page="news.html"] .phead p{max-width:44em}
[data-page="news.html"] .sec-s{padding:38px 0}
[data-page="news.html"] .phead .art img{max-height:96px !important}

/* 文章正文 */
.artmeta{display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); font-weight:700;
  max-width:780px; margin:0 auto 20px}
.artmeta span{background:var(--sand); padding:4px 10px; border-radius:7px}
.prose{max-width:780px; margin:0 auto}
.prose h2{font-size:clamp(18px,2.2vw,21px); margin:32px 0 11px; letter-spacing:-.2px}
.prose p{font-size:15px; line-height:1.98; color:var(--ink-2); margin:0 0 14px}
.prose .answer{background:var(--sand); border-left:3px solid var(--ember); border-radius:0 14px 14px 0;
  padding:16px 20px; margin:0 0 26px}
.prose .answer b{display:block; font-size:11.5px; letter-spacing:.14em; color:var(--ember-d); margin-bottom:7px; font-weight:800}
.prose .answer p{margin:0; font-size:15.5px; color:var(--ink); line-height:1.9}
.prose table{width:100%; border-collapse:collapse; margin:6px 0 26px; font-size:13.5px}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.prose th{background:var(--sand); font-weight:800; font-size:13px; color:var(--ink)}
.prose td{color:var(--ink-2)}
.prose details{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--paper)}
.prose summary{padding:13px 16px; font-weight:800; font-size:14.5px; cursor:pointer; list-style:none}
.prose summary::-webkit-details-marker{display:none}
.prose summary::before{content:"Q "; color:var(--ember); font-weight:900}
.prose details .a-body{padding:0 16px 14px}
.prose details p{font-size:14px; margin:0; line-height:1.9}
.srcbox{margin-top:30px; padding:14px 18px; background:var(--sand); border-radius:12px;
  font-size:12.5px; color:var(--ink-3); line-height:1.85}
.srcbox b{color:var(--ink-2)}
.relbox{margin-top:28px; padding-top:22px; border-top:1px solid var(--line)}
.relbox h3{font-size:12px; margin:0 0 8px; letter-spacing:.16em; color:var(--ink-3); font-weight:800; text-transform:uppercase}
.relbox a{display:block; font-size:14.5px; padding:8px 0; color:var(--ink-2); border-bottom:1px dashed var(--line); transition:.18s}
.relbox a:hover{color:var(--ember-d)}

/* FAQ 页底部资讯列表 */
.nlist{display:grid; grid-template-columns:1fr 1fr; gap:14px 30px}
.nlist .ng b{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ember-d);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.nlist .ng b i{font-style:normal; font-size:11px; color:var(--ink-3); background:var(--sand);
  padding:2px 7px; border-radius:6px; font-weight:800}
.nlist ul{margin:0; padding:0; list-style:none}
.nlist li a{display:block; font-size:13.5px; line-height:1.7; padding:5px 0 5px 12px; color:var(--ink-2);
  position:relative; transition:.16s}
.nlist li a::before{content:""; position:absolute; left:0; top:14px; width:4px; height:4px; border-radius:50%; background:var(--line-2)}
.nlist li a:hover{color:var(--ember-d); padding-left:15px}

@media (max-width:920px){
  .newsgrid{grid-template-columns:repeat(2,1fr)}
  .nlist{grid-template-columns:1fr}
}
@media (max-width:620px){
  .newsgrid{grid-template-columns:1fr}
  .prose p{font-size:14.5px; line-height:1.9}
  .prose table{font-size:12.5px}
  .prose th,.prose td{padding:8px 8px}
  .prose td:first-child,.prose th:first-child{white-space:nowrap}
  .ncard{padding:17px 17px 15px}
}

/* 下载通道 */
.dl-hint{margin-top:12px; font-size:12.5px; color:var(--ink-3); font-weight:600}
.dlan{border-radius:var(--r-xl); border:1px solid var(--line); background:var(--paper); box-shadow:var(--sh-1); padding:34px 36px 30px}
.dlan-head h2{font-size:clamp(21px,2.4vw,27px); margin:0 0 8px}
.dlan-head p{margin:0 0 20px; font-size:14px; color:var(--ink-2); line-height:1.85; max-width:76ch}
.dlrows{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.dlrow{display:flex; align-items:center; gap:10px; min-width:0; background:var(--sand); border:1px solid var(--line);
  border-radius:14px; padding:5px 5px 5px 8px; transition:.2s var(--ease)}
.dlrow:hover{border-color:rgba(223,85,39,.34); background:#FFF4E8}
.dlrow a{display:flex; align-items:center; gap:10px; flex:1 1 0%; min-width:0; overflow:hidden; padding:9px 4px}
.dlrow .u{font-family:"SFMono-Regular",Consolas,monospace; font-size:12.5px; color:var(--ink-2);
  min-width:0; flex:1 1 0%; overflow-wrap:anywhere; line-height:1.55; transition:.2s}
.dlrow:hover .u{color:var(--ember-d)}
.bdg{flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.04em; padding:4px 9px; border-radius:7px; color:#fff; white-space:nowrap}
.bdg-main{background:var(--grad-fire)}
.bdg-alt{background:#6F6A85}
.cp{flex:0 0 auto; padding:8px 13px; border-radius:10px; border:1px solid var(--line-2); background:#fff;
  font-size:12px; font-weight:800; color:var(--ink-2); transition:.18s}
.cp:hover{color:var(--ember-d); border-color:rgba(223,85,39,.4)}
.hashbox{margin-top:18px; padding:18px 20px; border-radius:14px; background:var(--sand); border:1px dashed var(--line-2)}
.hb-t{font-size:13.5px; font-weight:800; color:var(--ink); margin-bottom:9px}
.hashbox p{margin:0 0 9px; font-size:13px; color:var(--ink-2); line-height:1.8}
.hb-code{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin:0 0 10px; overflow:auto}
.hb-code code{font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; color:var(--ink); white-space:nowrap}
.hb-code button{margin-left:auto; flex:0 0 auto; padding:6px 12px; border-radius:8px; background:var(--sand);
  border:1px solid var(--line-2); font-size:11.5px; font-weight:800; color:var(--ink-2)}
.hb-note{font-size:12.5px !important; color:var(--ink-3) !important; margin-bottom:0 !important}
@media (max-width:620px){
  .dlcard h2{font-size:21px; line-height:1.38}
  .dlan{padding:22px 18px 20px}
  /* 窄屏：标签 / 地址 / 复制 同排，地址自身换行；flex-basis 0 保证不被长地址撑开 */
  .dlrow{flex-wrap:nowrap; align-items:center; gap:8px; padding:8px 10px}
  .dlrow a{flex:1 1 0%; width:auto; padding:0; gap:7px; align-items:center}
  .dlrow .u{flex:1 1 0%; min-width:0; font-size:11px; letter-spacing:-.2px; line-height:1.55;
    overflow-wrap:anywhere}
  .bdg{font-size:10px; padding:3px 7px; letter-spacing:0}
  .cp{padding:6px 10px; font-size:11px}
  .hashbox{padding:14px 14px}
  .hb-code{flex-wrap:wrap}
  .hb-code code{font-size:11px; white-space:normal; word-break:break-all; line-height:1.65}
  .hb-code button{margin-left:auto; margin-top:6px}
}

/* 安装步骤 */
.steps{counter-reset:s; display:grid; gap:16px}
.steps .st{counter-increment:s; position:relative; padding:20px 24px 20px 68px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-1)}
.steps .st::before{content:counter(s); position:absolute; left:22px; top:18px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--grad-fire); color:#fff; font-weight:900; font-size:14px}
.steps .st b{display:block; font-size:15.5px; margin-bottom:4px}
.steps .st p{font-size:14px; color:var(--ink-2)}

/* 提示块 */
.note{display:flex; gap:12px; padding:16px 18px; border-radius:14px; background:rgba(242,162,61,.10); border:1px solid rgba(242,162,61,.3); font-size:13.5px; color:var(--ink-2); line-height:1.75}
.note b{color:var(--ember-d)}
.note svg{flex:0 0 auto; width:18px; height:18px; margin-top:3px; stroke:var(--ember-d)}

/* 大引言 */
.bigquote{font-size:clamp(20px,2.6vw,30px); line-height:1.6; font-weight:900; letter-spacing:-.01em; max-width:860px}
.bigquote .q{color:var(--ember); font-family:Georgia,serif; font-style:italic; font-weight:400; margin-right:4px}

/* 宠物全表 */
.petall{display:grid; gap:12px}
.prow{display:grid; grid-template-columns:64px 120px 1fr 150px 74px; gap:16px; align-items:center; padding:14px 18px; border-radius:14px; background:var(--paper); border:1px solid var(--line); transition:.24s var(--ease)}
.prow:hover{border-color:rgba(242,162,61,.5); box-shadow:var(--sh-1); transform:translateX(3px)}
.prow img{width:64px; height:64px; object-fit:contain}
.prow .nm{font-weight:900; font-size:15px}
.prow .nm small{display:block; font-size:11px; color:var(--ink-3); font-weight:700; margin-top:2px}
.prow .sk{font-size:13px; color:var(--ink-2)}
.prow .sk b{color:var(--ember-d)}
.prow .cd{font-size:12px; color:var(--ink-3); font-weight:700}
.prow .rt{text-align:center; font-weight:900; color:#fff; border-radius:8px; padding:4px 0; font-size:12px}

@media (max-width:1080px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow .st::after{display:none}
  .icogrid{grid-template-columns:repeat(5,1fr)}
  .enemygrid{grid-template-columns:repeat(2,1fr)}
  .dlcard{grid-template-columns:1fr}
  .dlcard .r{min-height:220px}
  .prow{grid-template-columns:56px 1fr 74px; grid-template-areas:"i n r" "i s s"}
  .prow img{grid-area:i} .prow .nm{grid-area:n} .prow .sk{grid-area:s} .prow .rt{grid-area:r}
  .prow .cd{display:none}
  .bossrow{grid-template-columns:150px 1fr}
}
@media (max-width:620px){
  .icogrid{grid-template-columns:repeat(4,1fr)}
  .kvs{grid-template-columns:1fr}
  .bossrow{grid-template-columns:1fr}
  .bossrow .bimg{max-width:200px}
  .flow{grid-template-columns:1fr 1fr}
  .dlcard .l{padding:26px 22px}
}

/* 手机端首屏收紧 */
@media (max-width:620px){
  .navbar{padding:0 12px}
  .navbar .bar{height:58px; padding:0 8px 0 12px; gap:10px}
  .brand img{width:30px;height:30px}
  .brand .bt b{font-size:15px}
  .hero{padding-top:calc(var(--nav-h) + 26px)}
  .hero-eyebrow{flex-wrap:wrap; justify-content:center; text-align:center; font-size:10.5px; letter-spacing:.03em; padding:6px 12px; line-height:1.6}
  .hero-eyebrow b{font-size:10px; padding:2px 7px}
  .hero h1{font-size:clamp(25px,7.4vw,32px); line-height:1.32}
  .hero .lead{font-size:13.6px; line-height:1.8; padding:0 2px}
  .hero-cta{gap:10px; margin:24px 0 20px}
  .hero-tags{gap:10px 16px; font-size:11px}
  .stats div{padding:16px 10px}
  .shead h2, .phead h1{letter-spacing:0}
}