/* ===== UI 全面升级 B1：Q版手绘风 · 登录/顶栏/导航/弹窗/按钮/面板 ===== */
:root{--gold2:#f7d98a;--frame:linear-gradient(180deg,#f9e2a0,#c8963e 45%,#8a5a1c);--panel:linear-gradient(180deg,rgba(44,30,86,.86),rgba(20,14,46,.9))}
body{background:radial-gradient(ellipse at 50% -20%,#4a2a8a 0,transparent 60%),radial-gradient(ellipse at 100% 100%,#123a5c 0,transparent 55%),#0b0920}
/* 登录 */
.land{position:relative;padding-top:0}
.land:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0b092000 40%,#0b0920ee 92%),url(img/ui/login.webp) center top/cover no-repeat}
.land .hero{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4vh}
.land .sigil{display:none}
.land .title{font-size:76px;letter-spacing:14px;background:linear-gradient(180deg,#fffbe8,#ffd45a 45%,#d9822b 75%,#8a3f10);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #4a1d00) drop-shadow(0 0 18px #ffcf6a) drop-shadow(0 0 2px #fff);margin:10px 0 0;font-family:"STKaiti","KaiTi","Songti SC",serif;font-weight:900}
.land .sub{color:#fff;text-shadow:0 2px 6px #000,0 0 12px #6a3aff;font-size:19px;background:linear-gradient(90deg,transparent,#1a0f3acc,transparent);padding:4px 40px}
.land .lore{background:#0e0a26b8;border-radius:14px;padding:10px 18px;color:#d8d2ff;backdrop-filter:blur(4px)}
.auth{background:var(--panel);border:2px solid transparent;background-clip:padding-box;position:relative;border-radius:20px;box-shadow:0 0 0 2px #c8963e,0 0 0 5px #3a2560,0 0 0 6px #f0c76a,0 18px 40px #000a;padding:22px 22px 16px}
.auth:before{content:"神主登录";position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:var(--frame);color:#3a1d00;font-weight:900;padding:3px 26px;border-radius:14px;box-shadow:0 2px 0 #5a3500,0 0 12px #ffcf6a88;letter-spacing:4px;font-size:14px}
.auth input{background:#0c0824;border:1px solid #c8963e88;border-radius:12px;padding:10px 14px;box-shadow:inset 0 2px 6px #0008}
.auth input:focus{outline:0;border-color:#ffd76b;box-shadow:0 0 0 2px #ffd76b44,inset 0 2px 6px #0008}
.feat{background:var(--panel);border:1px solid #c8963e66;border-radius:18px;box-shadow:0 6px 18px #0007}
.feat .fi{width:58px;height:58px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6,#7a4dff 60%,#2a1660);box-shadow:0 0 0 3px #c8963e,0 0 14px #b28bff88}
/* 按钮 */
button{border-radius:14px;border:1px solid #c8a0ff55;background:linear-gradient(180deg,#4a3a9a,#2a1f66 55%,#1d1548);box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 #120c30,0 4px 8px #0006;text-shadow:0 1px 1px #0008}
button:hover{filter:brightness(1.15);transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff30,0 1px 0 #120c30}
button.pri{background:linear-gradient(180deg,#9b7bff,#6a3cf0 50%,#4a22c0);box-shadow:inset 0 1px 0 #ffffff66,0 3px 0 #2a0f80,0 0 14px #7a4dff66;border:1px solid #c9b3ff}
button.gold{background:linear-gradient(180deg,#fff0b0,#ffc94a 45%,#e08a1a);color:#4a2400;text-shadow:0 1px 0 #fff8;box-shadow:inset 0 1px 0 #fff,0 3px 0 #8a4a00,0 0 14px #ffc93c66;border:1px solid #fff3c4}
button:disabled{filter:grayscale(.8) brightness(.7);transform:none}
input,select,textarea{border-radius:10px;border-color:#c8963e55}
/* 面板 */
.card{background:var(--panel);border:1px solid #c8963e55;border-radius:20px;position:relative;box-shadow:inset 0 0 0 1px #ffffff10,inset 0 0 30px #7a4dff22,0 10px 30px #0008}
.card:before,.card:after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;border:2px solid #e9bf62;opacity:.85}
.card:before{left:6px;top:6px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.card:after{right:6px;bottom:6px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.card h3{display:inline-flex;align-items:center;gap:6px;color:#ffe4a0;text-shadow:0 2px 0 #3a1d00,0 0 10px #ffc93c55;font-size:17px;padding:2px 14px 2px 10px;background:linear-gradient(90deg,#c8963e44,transparent);border-left:3px solid #f0c76a;border-radius:4px}
/* 弹窗 */
#modal{background:radial-gradient(circle,#1a0f3a99,#000c)}
#mbody{background:linear-gradient(180deg,#2e2066,#170f3a 30%,#110b2c);border:2px solid #d9a94e;border-radius:22px;box-shadow:0 0 0 4px #2a1a50,0 0 0 5px #f0c76a88,0 0 60px #7a4dff66;animation:mIn .28s cubic-bezier(.3,1.5,.5,1)}
@keyframes mIn{from{transform:scale(.85);opacity:0}}
#mbody h3.goldt,#mbody>h3:first-child{margin:-20px -24px 12px;padding:12px;background:linear-gradient(180deg,#5a3aa0,#2a1a60);border-bottom:2px solid #d9a94e;border-radius:20px 20px 0 0;-webkit-text-fill-color:#ffe6a0;text-shadow:0 2px 0 #3a1d00,0 0 12px #ffc93c88;letter-spacing:3px}
.toast{background:linear-gradient(180deg,#3a2a7aee,#1d1548ee);border:1px solid #e9bf62;border-radius:14px;box-shadow:0 6px 18px #000a}
/* 顶栏 */
.top{background:linear-gradient(180deg,#3a2a7ae6,#1b1442e6);border:2px solid #c8963e;border-radius:20px;box-shadow:inset 0 1px 0 #ffffff30,0 0 0 3px #1b1238,0 8px 24px #0009}
.brand{font-family:"STKaiti","KaiTi",serif;font-size:22px;font-weight:900;background:linear-gradient(180deg,#fffbe0,#ffd45a 50%,#c86a1a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #3a1d00)}
.gname{text-shadow:0 2px 0 #000a}
.vip{box-shadow:0 0 10px #ffc93c88}
.res span{background:#0c0824cc;border:1px solid #c8963e77;border-radius:20px;padding:2px 10px 2px 2px;box-shadow:inset 0 2px 4px #0008}
.res span>.i,.res span>svg{display:none}
.res span:before{content:"";width:22px;height:22px;border-radius:50%;background:center/cover;flex:none}
.res span[title=神晶]:before{background-image:url(img/ui/t_gem.webp)}.res span[title=金币]:before{background-image:url(img/ui/t_gold.webp)}
.res span[title=信仰]:before{background-image:url(img/ui/t_power.webp)}.res span[title=战力]:before{background-image:url(img/ui/t_降临.webp)}
.acts .ib{border-radius:12px}
.ticker{background:linear-gradient(90deg,transparent,#3a1d0099,transparent);border-radius:10px;padding:3px 0}
/* 导航 */
.tabs{gap:4px;padding:6px;background:linear-gradient(180deg,#2a1d5acc,#140e34cc);border:1px solid #c8963e66;border-radius:18px}
.tabs button{font-size:0;min-width:70px;padding:5px 4px 4px;background:none;border:0;box-shadow:none;border-radius:14px;gap:2px}
.tabs button>:not(span){display:none}
.tabs button:before{content:"";width:46px;height:46px;border-radius:50%;background:var(--ti,radial-gradient(#7a4dff,#2a1660)) center/cover;box-shadow:0 3px 6px #000a;transition:transform .2s}
.tabs button span{font-size:12px;color:#d9d2ff;font-weight:700;text-shadow:0 1px 2px #000}
.tabs button:hover:before{transform:translateY(-3px) scale(1.06)}
.tabs button.on{background:radial-gradient(ellipse at 50% 40%,#ffc93c40,transparent 70%)}
.tabs button.on:before{box-shadow:0 0 0 2px #ffe08a,0 0 16px #ffc93c}
.tabs button.on span{color:#ffe08a}
.tabs button[onclick*="'主城'"]{--ti:url(img/ui/t_主城.webp)}.tabs button[onclick*="'人物'"]{--ti:url(img/ui/t_人物.webp)}.tabs button[onclick*="'神国'"]{--ti:url(img/ui/t_神国.webp)}.tabs button[onclick*="'降临'"]{--ti:url(img/ui/t_降临.webp)}.tabs button[onclick*="'神民'"]{--ti:url(img/ui/t_神民.webp)}.tabs button[onclick*="'神器'"]{--ti:url(img/ui/t_神器.webp)}.tabs button[onclick*="'召唤'"]{--ti:url(img/ui/t_召唤.webp)}.tabs button[onclick*="'宝库'"]{--ti:url(img/ui/t_宝库.webp)}.tabs button[onclick*="'交易所'"]{--ti:url(img/ui/t_交易所.webp)}.tabs button[onclick*="'史诗'"]{--ti:url(img/ui/t_史诗.webp)}.tabs button[onclick*="'商城'"]{--ti:url(img/ui/t_商城.webp)}.tabs button[onclick*="'VIP'"]{--ti:url(img/ui/t_VIP.webp)}.tabs button[onclick*="'福利'"]{--ti:url(img/ui/t_福利.webp)}.tabs button[onclick*="'排行'"]{--ti:url(img/ui/t_排行.webp)}.tabs button[onclick*="'开服'"]{--ti:url(img/ui/t_开服.webp)}.tabs button[onclick*="'分身'"]{--ti:url(img/ui/t_分身.webp)}.tabs button[onclick*="'攻略'"]{--ti:url(img/ui/t_攻略.webp)}.tabs button[onclick*="'新手'"]{--ti:url(img/ui/t_新手.webp)}.tabs button[onclick*="'邀请'"]{--ti:url(img/ui/t_邀请.webp)}.tabs button[onclick*="'阵营'"]{--ti:url(img/ui/t_阵营.webp)}.tabs button[onclick*="'神城'"]{--ti:url(img/ui/t_神城.webp)}.tabs button[onclick*="'GM'"]{--ti:url(img/ui/t_GM.webp)}
@media(max-width:640px){.land .title{font-size:46px;letter-spacing:8px}.land:before{background-position:28% top}.land .hero{min-height:auto}
 .tabs{border-radius:18px 18px 0 0;border-width:2px 0 0;border-color:#c8963e;background:linear-gradient(180deg,#2e2066f5,#120c30fa);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px #000a}
 .tabs button{min-width:58px}.tabs button:before{width:38px;height:38px}.tabs button span{font-size:11px}
 .res span{padding:1px 8px 1px 1px}.res span:before{width:18px;height:18px}.card:before,.card:after{width:14px;height:14px}
 #mbody h3.goldt,#mbody>h3:first-child{margin:-14px -14px 10px}}

/* 主城建筑图标 */
.hot[onclick*="'主城'"]{--ti:url(img/ui/t_主城.webp)}.hot[onclick*="'人物'"]{--ti:url(img/ui/t_人物.webp)}.hot[onclick*="'神国'"]{--ti:url(img/ui/t_神国.webp)}.hot[onclick*="'降临'"]{--ti:url(img/ui/t_降临.webp)}.hot[onclick*="'神民'"]{--ti:url(img/ui/t_神民.webp)}.hot[onclick*="'神器'"]{--ti:url(img/ui/t_神器.webp)}.hot[onclick*="'召唤'"]{--ti:url(img/ui/t_召唤.webp)}.hot[onclick*="'宝库'"]{--ti:url(img/ui/t_宝库.webp)}.hot[onclick*="'交易所'"]{--ti:url(img/ui/t_交易所.webp)}.hot[onclick*="'史诗'"]{--ti:url(img/ui/t_史诗.webp)}.hot[onclick*="'商城'"]{--ti:url(img/ui/t_商城.webp)}.hot[onclick*="'VIP'"]{--ti:url(img/ui/t_VIP.webp)}.hot[onclick*="'福利'"]{--ti:url(img/ui/t_福利.webp)}.hot[onclick*="'排行'"]{--ti:url(img/ui/t_排行.webp)}.hot[onclick*="'开服'"]{--ti:url(img/ui/t_开服.webp)}.hot[onclick*="'分身'"]{--ti:url(img/ui/t_分身.webp)}.hot[onclick*="'攻略'"]{--ti:url(img/ui/t_攻略.webp)}.hot[onclick*="'新手'"]{--ti:url(img/ui/t_新手.webp)}.hot[onclick*="'邀请'"]{--ti:url(img/ui/t_邀请.webp)}.hot[onclick*="'阵营'"]{--ti:url(img/ui/t_阵营.webp)}.hot[onclick*="'神城'"]{--ti:url(img/ui/t_神城.webp)}.hot[onclick*="'GM'"]{--ti:url(img/ui/t_GM.webp)}.hot[onclick*="'@notice'"]{--ti:url(img/ui/t_notice.webp)}.hot[onclick*="'@mail'"]{--ti:url(img/ui/t_mail.webp)}
.hot .hic{font-size:0;background:var(--ti,radial-gradient(circle at 40% 30%,#ffffff40,#7a4dff)) center/cover;border-radius:50%;border:0;box-shadow:0 6px 14px #000a,0 0 0 2px #ffe08a55}.hot .hic>*{display:none}
.hnm{background:linear-gradient(180deg,#3a2a7a,#1b1442);border:1px solid #e9bf62;border-radius:10px;font-weight:700}
/* ===== B2：神国/神民 种族立绘 ===== */
.kpt{position:relative;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 55%,#fff0) 0,transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 30%,#1a1240),#0f0a28);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 70%,transparent),inset 0 -20px 30px #0008;margin-bottom:4px}
.kpt:before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 45%,#ffffff10 0 8deg,transparent 8deg 22deg);opacity:.7}
.kpt.r4:before,.kpt.r5:before{animation:spin 30s linear infinite;inset:-30%}
.kpt .rpt{position:relative;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 4px 4px #000a);transition:transform .25s}
.kdu:hover .rpt,.rcard:hover .rpt{transform:translateY(-4px) scale(1.06)}
.kpt.r5{box-shadow:inset 0 0 0 2px #ffe08a,inset 0 0 24px #ffc93c88,inset 0 -20px 30px #0008}
.kdu{width:150px;border-radius:16px;padding:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 18%,#221a50),#120d2e);box-shadow:0 6px 16px #0008}
.kdu b,.rcard b{font-size:15px;color:#fff;text-shadow:0 2px 0 #000}
.kdst{color:#ffd76b;text-shadow:0 0 6px #ffc93c;letter-spacing:1px}
.rcard{cursor:pointer;border-radius:16px;padding:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 18%,#221a50),#120d2e);box-shadow:0 6px 16px #0008;transition:transform .2s}
.rcard:hover{transform:translateY(-3px)}
.rbs i{border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 60%,transparent) calc(var(--v,5)*10%),#ffffff10 0)}
@media(max-width:640px){.kdu{width:calc(50% - 6px)}}
/* ===== B3：召唤演出 / 翻牌 / 神器图标 ===== */
.gres.sum{position:relative;min-height:300px}
.sumfx{position:absolute;left:50%;top:46%;width:min(420px,80vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:5;animation:sumOut .5s 1.4s forwards}
.sumfx img{width:100%;height:100%;animation:sumSpin 1.6s cubic-bezier(.3,0,.2,1) both;filter:drop-shadow(0 0 20px #b28bff)}
.sumfx b{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(#fff,#ffe08a 30%,transparent 70%);animation:sumFlash .6s 1.1s both}
.sumfx.vio img{filter:drop-shadow(0 0 30px #c77dff) hue-rotate(10deg)}.sumfx.gold img{filter:drop-shadow(0 0 40px #ffc93c) saturate(1.6)}.sumfx.gold b{background:radial-gradient(#fff,#ffd23a 30%,#ff9de2 50%,transparent 72%)}
@keyframes sumSpin{from{transform:scale(.2) rotate(-200deg);opacity:0}40%{opacity:1}to{transform:scale(1) rotate(0)}}
@keyframes sumFlash{from{transform:scale(.2);opacity:0}50%{opacity:1}to{transform:scale(3.2);opacity:0}}
@keyframes sumOut{to{opacity:0;visibility:hidden}}
.gres.sum .cards{perspective:900px}
.gres.sum .cards>*{position:relative;overflow:hidden;animation:cIn .45s calc(.9s + var(--fi)*.07s) backwards,cFlip .7s calc(1.6s + var(--fi)*.14s) both!important}
.gres.sum .cbk{position:absolute;inset:0;z-index:4;background:url(img/ui/cardback.webp) center/cover;border-radius:inherit;animation:cbk .7s calc(1.6s + var(--fi)*.14s) both}
@keyframes cIn{from{opacity:0;transform:translateY(60px) scale(.4)}}
@keyframes cFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
@keyframes cbk{0%,49.9%{opacity:1}50%,100%{opacity:0;visibility:hidden}}
.gres.sum .cards>.hot4{box-shadow:0 0 22px #c77dff}.gres.sum .cards>.hot5{box-shadow:0 0 34px #ffc93c,0 0 70px #ff9de288}
.gres.sum .cards>.hot5:after{content:"";position:absolute;inset:-40%;z-index:3;pointer-events:none;background:conic-gradient(from 0deg,transparent,#ffe08a66,transparent 30%,#ff9de255,transparent 60%);animation:spin 3s linear infinite,cGlow .6s calc(1.95s + var(--fi)*.14s) backwards;mix-blend-mode:screen}
@keyframes cGlow{from{opacity:0}}
.gres.sum>button{animation:cIn .4s calc(2.2s + var(--n,1)*.14s) backwards}
.gres.skip .sumfx{display:none}.gres.skip .cards>*,.gres.skip .cbk,.gres.skip>button{animation-delay:0s!important;animation-duration:.01s!important}
.gcard{width:120px;height:160px;border-radius:14px;background:radial-gradient(circle at 50% 35%,#ffffff22,transparent 60%),linear-gradient(180deg,#3a2a7a,#151036);border:2px solid #8a7ad0;box-shadow:inset 0 0 0 3px #0006}
.gcard b{font-size:24px;font-weight:900;font-family:serif;letter-spacing:2px;background:linear-gradient(180deg,#fff,#b9c2ff);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000)}
.gcard.SR b{background-image:linear-gradient(180deg,#fff,#d59bff)}.gcard.SSR b{background-image:linear-gradient(180deg,#fffbe0,#ffc93c 60%,#e07a10);font-size:30px}
.gcard span{font-size:13px;font-weight:700;text-align:center;padding:0 6px;text-shadow:0 1px 2px #000}
.gcard.SSR{background:radial-gradient(circle at 50% 35%,#ffe08a55,transparent 60%),linear-gradient(180deg,#6a4a10,#2a1840);border-color:#ffd76b}
.gcard.SR{background:radial-gradient(circle at 50% 35%,#c77dff44,transparent 60%),linear-gradient(180deg,#4a2a8a,#1c1240);border-color:#c77dff}
/* 神器图标 */
.relic-ic{flex:none;width:58px;height:58px;border-radius:14px;display:inline-grid;place-items:center;margin-right:8px;vertical-align:middle;background:radial-gradient(circle,#9fb4ff33,transparent 70%),linear-gradient(160deg,#2a2f5a,#121530);box-shadow:inset 0 0 0 2px #9fb4ff88}
.relic-ic img{width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 3px 3px #000a)}
.relic-ic.g3{background:radial-gradient(circle,#c77dff44,transparent 70%),linear-gradient(160deg,#3a1d66,#170c30);box-shadow:inset 0 0 0 2px #c77dff,0 0 10px #c77dff66}
.relic-ic.g5{background:radial-gradient(circle,#ffe08a66,transparent 70%),linear-gradient(160deg,#6a4a10,#2a1840);box-shadow:inset 0 0 0 2px #ffd76b,0 0 18px #ffc93c99;position:relative;overflow:hidden}
.relic-ic.g5:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff88 50%,transparent 65%);animation:relShine 2.6s infinite}
@keyframes relShine{from{transform:translateX(-120%)}60%,to{transform:translateX(120%)}}
.relic-ic.big{width:84px;height:84px;margin:4px auto}
.relic{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;border-radius:14px;background:linear-gradient(160deg,#2a1f5a88,#120d2e)}.relic>.relic-ic{grid-row:span 3;margin:0}.relic>*:not(.relic-ic){grid-column:2;min-width:0}
.slot{border-style:solid;border-color:#c8963e55;border-radius:16px;background:linear-gradient(180deg,#2a1f5a88,#120d2e)}
/* ===== B4：商城/市场/福利/活动/排行/邮件/公告/攻略/VIP/阵营 ===== */
.phero{position:relative;display:flex;align-items:center;gap:14px;margin:10px 0 4px;padding:10px 20px 10px 12px;border-radius:20px;overflow:hidden;background:linear-gradient(90deg,#5a3aa0ee,#2a1a60cc 55%,transparent),radial-gradient(ellipse at 10% 50%,#ffc93c44,transparent 50%);border:1px solid #e9bf6288;box-shadow:0 6px 20px #0008;animation:pop .4s both}
.phero:after{content:"";position:absolute;right:-30px;top:-40px;width:220px;height:220px;background:var(--ti) center/cover;border-radius:50%;opacity:.18;filter:blur(1px)}
.phero i{width:64px;height:64px;flex:none;border-radius:50%;background:var(--ti) center/cover;box-shadow:0 0 0 3px #ffe08a,0 0 20px #ffc93c88;animation:float 3.5s ease-in-out infinite}
.phero b{display:block;font-family:"STKaiti","KaiTi",serif;font-size:26px;font-weight:900;letter-spacing:4px;background:linear-gradient(180deg,#fffbe0,#ffd45a 55%,#d9822b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #3a1d00)}
.phero small{color:#e6dcff;font-size:13px;text-shadow:0 1px 2px #000}
/* 商城 */
.prod{border-radius:16px;border:1px solid #c8963e66;background:radial-gradient(circle at 50% 0,#7a4dff33,transparent 60%),linear-gradient(180deg,#2e2066,#150f36);box-shadow:inset 0 1px 0 #ffffff22,0 6px 14px #0007;padding:12px;text-align:center;align-items:center;transition:transform .2s}
.prod:hover{transform:translateY(-3px);border-color:#ffd76b}
.prod b{color:#ffe6a0;font-size:15px}.prod>span{font-size:20px;font-weight:900;color:#fff;text-shadow:0 0 10px #b28bff}
.topup{background:radial-gradient(ellipse at 0 0,#ffc93c22,transparent 50%),var(--panel)}
.topup .prod:before{content:"";width:54px;height:54px;margin:0 auto 4px;background:url(img/ui/t_gem.webp) center/cover;border-radius:50%;box-shadow:0 0 14px #9d6bff}
/* VIP */
.vipc{background:radial-gradient(ellipse at 50% 0,#ffc93c44,transparent 60%),linear-gradient(180deg,#4a3510ee,#2a1840ee);border-color:#ffd76b}
.vrow{border-radius:10px;border-bottom:0;margin:3px 0;background:#ffffff06}.vrow:nth-child(odd){background:#ffffff0c}
.vrow.on{background:linear-gradient(90deg,#ffc93c33,#ffc93c0a);box-shadow:inset 0 0 0 1px #ffd76b}
/* 福利 / 签到 */
.week span{border-radius:14px;background:linear-gradient(180deg,#2e2066,#150f36);border:1px solid #c8963e55;padding:8px 4px}
.week span.on{background:linear-gradient(180deg,#6a4a10,#3a2560);border-color:#ffd76b;box-shadow:0 0 12px #ffc93c66;position:relative}
.week span.on:after{content:"✓";position:absolute;top:-6px;right:-4px;width:20px;height:20px;border-radius:50%;background:linear-gradient(#7dffb0,#1fa860);color:#033;font-weight:900;font-size:12px;display:grid;place-items:center;box-shadow:0 2px 4px #0008}
.rw{background:#0c0824cc;border-color:#c8963e88;border-radius:10px}
/* 排行 */
.rk{border-collapse:separate;border-spacing:0 5px}.rk td{border-bottom:0;background:#ffffff08;padding:8px 10px}.rk td:first-child{border-radius:12px 0 0 12px;text-align:center;width:52px;font-weight:900;color:#cfc8ff}.rk td:last-child{border-radius:0 12px 12px 0;text-align:right;color:#ffe08a;font-weight:700}
.rk tr:nth-child(1) td{background:linear-gradient(90deg,#ffc93c44,#ffc93c10)}.rk tr:nth-child(2) td{background:linear-gradient(90deg,#cfd6ff33,#cfd6ff0a)}.rk tr:nth-child(3) td{background:linear-gradient(90deg,#e08a4a33,#e08a4a0a)}
.rk tr:nth-child(-n+3) td:first-child{font-size:22px}
.rk tr.me td{background:linear-gradient(90deg,#7a4dff66,#7a4dff22);box-shadow:inset 0 0 0 1px #b28bff}
.chips .chip{border-radius:20px}.chip.on{background:linear-gradient(180deg,#fff0b0,#ffc94a 45%,#e08a1a);color:#4a2400;text-shadow:none;border-color:#fff3c4}
/* 市场/宝库 */
.it{border-radius:14px;background:linear-gradient(180deg,#2e2066,#150f36);border-color:#c8963e55;box-shadow:0 4px 10px #0006;transition:transform .2s}.it:hover{transform:translateY(-2px);border-color:#ffd76b}
/* 公告 / 邮件 */
.notice{border-bottom:0;margin:8px 0;padding:10px 12px;border-radius:14px;background:linear-gradient(160deg,#2a1f5a88,#120d2e);border:1px solid #c8963e44}
.notice.pin{border-color:#ffd76b;box-shadow:0 0 10px #ffc93c33}
/* 攻略 */
.gsec{border-color:#c8963e55;border-radius:18px}.gsec summary{background:linear-gradient(90deg,#3a2a7a88,transparent)}.gic{border-radius:50%;box-shadow:0 0 0 2px #e9bf62}
.gtip{border-radius:12px}.gt th{color:#ffe08a}
/* 阵营 */
.faccard{border-radius:20px;border:2px solid color-mix(in srgb,var(--fc) 70%,#fff0);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--fc) 40%,transparent),transparent 65%),linear-gradient(180deg,#2a1f5a,#100b28);box-shadow:0 8px 22px #0009;transition:transform .2s}
.faccard:hover{transform:translateY(-4px)}.faccard.on{box-shadow:0 0 0 3px #ffe08a,0 0 26px var(--fc)}
/* 史诗/成就/新手 */
.chap,.ach{border-radius:16px;border-color:#c8963e55}
.goal{background:#0c0824aa;border:1px solid #c8963e44}
@media(max-width:640px){.phero{padding:8px 12px 8px 8px;gap:10px}.phero i{width:48px;height:48px}.phero b{font-size:21px}.phero small{font-size:11px}}
/* 行走小人：头饰/背饰 */
/* 主城行走图层（后→前）：背饰 < 武器下段 < 身体 < 武器上段 < 手 < 头发 < 头饰 */.spr .sk{position:absolute;z-index:0;object-fit:fill;pointer-events:none}.spr .swl{z-index:1}.spr .sb{z-index:2}.spr .swh{z-index:3}.spr .sf{z-index:4}.spr .sh{z-index:5}.spr .sa{position:absolute;z-index:6;object-fit:fill;pointer-events:none}