*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
:root{
  --ink:#3d342a; --ink2:#7a6d5e; --ink3:#a89a83;
  --paper:#f9f4e8; --paper2:#f2e8d4; --card:#fffdf6;
  --cinnabar:#c0503f; --cinnabar2:#a63c2d; --cinnabar-l:#e8a093;
  --azurite:#4e7f92; --azurite-l:#a9c8d2;
  --gamboge:#d9a441; --malachite:#7c9e76; --lav:#8b7ba8; --gold:#bd9027;
  --line:rgba(61,52,42,.13);
  --r:16px;
  --sh:0 6px 18px rgba(92,68,32,.10);
  --sh2:0 10px 28px rgba(92,68,32,.16);
  --font:"Songti SC","Noto Serif SC","STSong","SimSun","Source Han Serif SC",serif;
}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font-family:var(--font); color:var(--ink); background:#e6ddc9;
  user-select:none; -webkit-user-select:none; overflow:hidden;
}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:0}
input{font-family:inherit}
#app{
  position:relative; width:100%; max-width:460px; height:100dvh; height:100vh; margin:0 auto;
  overflow:hidden; background:rgba(249,244,232,.90); backdrop-filter:blur(2px);
  box-shadow:0 0 60px rgba(70,50,20,.18);
}
#app::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    radial-gradient(80% 40% at 100% 100%, rgba(78,127,146,.10), transparent 70%),
    radial-gradient(70% 40% at 0% 90%, rgba(192,80,63,.07), transparent 70%);
}
/* ---------- 祥云底纹 ---------- */
.cloud-bg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23c9b48a' stroke-width='1.1' opacity='.45'%3E%3Cpath d='M20 60c0-9 7-16 16-16 3-8 11-13 19-11 6-8 18-8 24 1 10-1 18 6 18 15 8 1 13 7 13 14'/%3E%3Cpath d='M110 60c0-6 5-11 11-11 2-6 8-9 13-8 4-6 13-6 17 1 7-1 13 4 13 11'/%3E%3Cpath d='M150 170c0-9 7-16 16-16 3-8 11-13 19-11 6-8 18-8 24 1 10-1 18 6 18 15 8 1 13 7 13 14'/%3E%3Cpath d='M10 176c0-6 5-11 11-11 2-6 8-9 13-8 4-6 13-6 17 1 7-1 13 4 13 11'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px;
}
/* ---------- 屏幕容器 ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;z-index:1}
.screen.active{display:flex;animation:fadeIn .26s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 14px 96px;-webkit-overflow-scrolling:touch}
.sbody::-webkit-scrollbar{width:0}
/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:6px;padding:12px 12px 8px;z-index:5}
.res{display:flex;align-items:center;gap:5px;background:rgba(255,253,246,.86);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 5px;
  font-size:12.5px;color:var(--ink2);box-shadow:0 2px 8px rgba(120,95,50,.06);font-variant-numeric:tabular-nums}
.res b{color:var(--ink);font-weight:600;font-size:13px}
.res svg{width:19px;height:19px;flex:none}
.spacer{flex:1}
.icon-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,246,.8);border:1px solid var(--line);color:var(--ink2)}
.icon-btn svg{width:17px;height:17px}
/* ---------- 首页 ---------- */
.hero{position:relative;padding:14px 4px 10px;text-align:center}
.hero h1{margin:0;font-size:34px;letter-spacing:6px;font-weight:700;color:var(--ink);
  text-shadow:0 2px 0 #fff, 0 5px 14px rgba(180,140,70,.22)}
.hero h1 em{font-style:normal;color:var(--cinnabar)}
.hero .sub{margin-top:8px;font-size:11.5px;letter-spacing:8px;color:var(--ink3)}
.hero .sub i{font-style:normal;color:var(--gold)}
.hero-seal{position:absolute;right:6px;bottom:2px;width:34px;height:34px;border-radius:6px;
  border:1.5px solid var(--cinnabar);color:var(--cinnabar);display:grid;place-items:center;
  font-size:9px;line-height:1.05;letter-spacing:1px;transform:rotate(-6deg);opacity:.8;writing-mode:vertical-rl;padding:3px}
.progress-wrap{background:rgba(255,253,246,.78);border:1px solid var(--line);border-radius:18px;
  padding:12px 14px;margin:6px 0 14px;box-shadow:var(--sh)}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink2)}
.progress-top b{font-size:17px;color:var(--cinnabar);letter-spacing:.5px}
.bar{height:7px;border-radius:99px;background:rgba(61,52,42,.08);margin-top:9px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gamboge),var(--cinnabar));
  transition:width .7s cubic-bezier(.3,1.4,.5,1)}
/* 主 CTA */
.cta{position:relative;overflow:hidden;border-radius:20px;padding:16px 18px;color:#fff5e6;
  background:linear-gradient(140deg,#c0503f,#a63c2d 55%,#8e3126);
  box-shadow:0 10px 24px rgba(160,60,45,.30); display:flex;align-items:center;gap:14px;
  border:1px solid rgba(255,220,180,.35)}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.2'%3E%3Ccircle cx='20' cy='24' r='9'/%3E%3Ccircle cx='31' cy='24' r='7'/%3E%3Ccircle cx='9' cy='26' r='6'/%3E%3Cpath d='M78 96c0-6 5-11 11-11 2-6 8-9 13-8 4-6 13-6 17 1'/%3E%3C/g%3E%3C/svg%3E")}
.cta .cta-ico{width:52px;height:52px;flex:none;border-radius:14px;background:rgba(255,240,215,.16);
  display:grid;place-items:center;border:1px solid rgba(255,230,190,.35)}
.cta .cta-ico svg{width:30px;height:30px}
.cta .cta-txt{flex:1}
.cta .cta-txt b{display:block;font-size:19px;letter-spacing:3px;font-weight:600}
.cta .cta-txt span{font-size:11.5px;opacity:.82;letter-spacing:1px}
.cta .cta-go{font-size:12px;padding:7px 13px;border-radius:99px;background:rgba(255,246,232,.92);color:var(--cinnabar2);
  font-weight:600;letter-spacing:1px;box-shadow:0 3px 10px rgba(60,20,10,.25)}
/* 四宫格 */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}
.tile{position:relative;overflow:hidden;background:rgba(255,253,246,.9);border:1px solid var(--line);
  border-radius:18px;padding:14px 12px;text-align:left;box-shadow:var(--sh);transition:transform .16s}
.tile:active{transform:scale(.97)}
.tile .t-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px}
.tile .t-ico svg{width:21px;height:21px}
.tile b{display:block;font-size:15px;letter-spacing:2px;font-weight:600}
.tile span{display:block;font-size:10.5px;color:var(--ink3);margin-top:4px;letter-spacing:.5px}
.tile .badge{position:absolute;top:10px;right:10px;background:var(--cinnabar);color:#fff;font-size:9.5px;
  padding:2px 6px;border-radius:99px;letter-spacing:.5px;animation:pulse 1.8s infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.85}}
.tile .t-ico.c1{background:rgba(192,80,63,.10);color:var(--cinnabar)}
.tile .t-ico.c2{background:rgba(78,127,146,.12);color:var(--azurite)}
.tile .t-ico.c3{background:rgba(217,164,65,.14);color:#b8862c}
.tile .t-ico.c4{background:rgba(124,158,118,.14);color:#5f8259}
.sec-title{display:flex;align-items:center;gap:8px;margin:18px 2px 10px;font-size:13px;color:var(--ink2);letter-spacing:2px}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
/* ---------- 页头 ---------- */
.page-head{display:flex;align-items:center;gap:10px;padding:10px 12px 6px}
.page-head h2{margin:0;font-size:19px;letter-spacing:3px;font-weight:600}
.page-head .ph-sub{font-size:10.5px;color:var(--ink3);letter-spacing:1px;margin-top:2px}
/* ---------- 抽卡 ---------- */
.pool{position:relative;overflow:hidden;border-radius:20px;padding:16px;margin-bottom:12px;
  border:1px solid rgba(189,144,39,.28);box-shadow:var(--sh2);
  background:linear-gradient(150deg,#fffdf6,#f6ecd7)}
.pool.up{background:linear-gradient(150deg,#fdf6ec,#f7e2d4)}
.pool .p-tag{display:inline-block;font-size:10px;letter-spacing:1px;padding:2px 8px;border-radius:99px;
  background:rgba(139,123,168,.14);color:var(--lav);margin-bottom:8px}
.pool.up .p-tag{background:rgba(192,80,63,.12);color:var(--cinnabar)}
.pool h3{margin:0 0 4px;font-size:19px;letter-spacing:3px;font-weight:600}
.pool p{margin:0;font-size:11.5px;color:var(--ink3);line-height:1.7}
.pool .p-art{position:absolute;right:-6px;bottom:-8px;width:120px;opacity:.5;pointer-events:none}
.pity{margin-top:10px;font-size:10.5px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.pity .pbar{flex:1;height:5px;border-radius:99px;background:rgba(61,52,42,.07);overflow:hidden}
.pity .pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--azurite-l),var(--azurite));border-radius:99px}
.draw-actions{display:flex;gap:10px;margin-top:4px}
.btn{flex:1;border-radius:16px;padding:13px 10px;text-align:center;font-size:14px;letter-spacing:1px;
  border:1px solid var(--line);background:#fffdf6;box-shadow:var(--sh);transition:transform .14s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(140deg,#c0503f,#a23a2c);color:#fff6e8;border-color:rgba(255,220,180,.3);
  box-shadow:0 8px 20px rgba(160,60,45,.26)}
.btn.gold{background:linear-gradient(140deg,#d9a441,#c08c25);color:#fffaf0;border-color:rgba(255,235,180,.4);
  box-shadow:0 8px 20px rgba(190,150,50,.26)}
.btn small{display:block;font-size:10px;opacity:.75;margin-top:3px;letter-spacing:0}
.btn.ghost{background:rgba(255,253,246,.6)}
.btn:disabled{opacity:.45}
/* ---------- 卡牌通用 ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cwrap{position:relative;border-radius:13px;overflow:hidden;background:#efe7d5;box-shadow:0 4px 12px rgba(90,65,30,.12);
  transition:transform .15s;aspect-ratio:200/280}
.cwrap:active{transform:scale(.96)}
.cwrap svg{display:block;width:100%;height:100%}
.cwrap.locked svg{filter:grayscale(1) brightness(1.02) opacity(.55)}
.cwrap.locked::after{content:"";position:absolute;inset:0;background:rgba(245,240,228,.35)}
.cwrap .lock{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.cwrap .lock svg{width:30%;height:30%;opacity:.55;filter:none}
.cwrap.new::before{content:"新";position:absolute;top:5px;right:5px;z-index:3;background:var(--cinnabar);color:#fff;
  font-size:9px;padding:1px 5px;border-radius:99px;letter-spacing:0}
.cwrap .cnt{position:absolute;right:4px;bottom:4px;z-index:3;background:rgba(61,52,42,.62);color:#fff8ea;
  font-size:9px;padding:1px 5px;border-radius:99px;font-variant-numeric:tabular-nums}
/* 稀有度光效 */
.cwrap.r-SSR::after{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,235,180,.75) 48%,rgba(255,255,240,.95) 52%,transparent 62%);
  animation:sheen 3.6s infinite;mix-blend-mode:screen}
.cwrap.r-SP::after{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(190,230,255,.6) 45%,rgba(255,225,250,.75) 50%,rgba(255,250,205,.7) 55%,transparent 65%);
  animation:sheen 3.2s infinite;mix-blend-mode:screen}
@keyframes sheen{0%{transform:translateX(-60%) rotate(8deg)}55%,100%{transform:translateX(60%) rotate(8deg)}}
/* 套装标签 */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:7px 13px;border-radius:99px;font-size:12px;letter-spacing:1px;
  background:rgba(255,253,246,.8);border:1px solid var(--line);color:var(--ink2)}
.tab.on{background:linear-gradient(140deg,#4e7f92,#3d6a7c);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(60,110,130,.28)}
.set-head{background:rgba(255,253,246,.84);border:1px solid var(--line);border-radius:18px;padding:13px 14px;margin-bottom:11px;box-shadow:var(--sh)}
.set-head .sh-top{display:flex;justify-content:space-between;align-items:center}
.set-head h3{margin:0;font-size:15.5px;letter-spacing:2px}
.set-head .sh-num{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.set-head .sh-num b{color:var(--azurite);font-size:13px}
.set-head .sh-desc{font-size:10.5px;color:var(--ink3);margin-top:6px;line-height:1.6}
/* ---------- 商店 ---------- */
.shop-row{display:flex;gap:12px;align-items:center;background:rgba(255,253,246,.86);border:1px solid var(--line);
  border-radius:16px;padding:10px;margin-bottom:10px;box-shadow:var(--sh)}
.shop-row .sart{width:60px;flex:none;border-radius:9px;overflow:hidden;box-shadow:0 3px 8px rgba(90,65,30,.14)}
.shop-row .sart svg{display:block;width:100%;height:auto}
.shop-row .sinfo{flex:1;min-width:0}
.shop-row .sinfo b{font-size:14.5px;letter-spacing:1px}
.shop-row .sinfo p{margin:3px 0 0;font-size:10.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-row .sprice{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink2);margin-top:6px}
.sprice svg{width:13px;height:13px;flex:none}
.panel svg{width:16px;height:16px;flex:none}
.buy{padding:8px 12px;border-radius:12px;font-size:12px;background:linear-gradient(140deg,#4e7f92,#3d6a7c);color:#fff;
  letter-spacing:1px;flex:none;box-shadow:0 4px 12px rgba(60,110,130,.24)}
.buy:disabled{background:rgba(61,52,42,.12);color:var(--ink3);box-shadow:none}
.buy.owned{background:rgba(61,52,42,.08);color:var(--ink3);box-shadow:none}
/* ---------- 签到 ---------- */
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:8px 0 14px}
.sign-cell{background:rgba(255,253,246,.9);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;
  position:relative;box-shadow:0 3px 10px rgba(90,65,30,.07)}
.sign-cell b{display:block;font-size:10px;color:var(--ink3);font-weight:400;letter-spacing:1px}
.sign-cell .g{font-size:11.5px;color:var(--ink);margin-top:5px;line-height:1.4;min-height:30px;display:grid;place-items:center}
.sign-cell.done{background:rgba(124,158,118,.12);border-color:rgba(124,158,118,.3)}
.sign-cell.today{border-color:var(--cinnabar);box-shadow:0 0 0 2px rgba(192,80,63,.12),0 4px 12px rgba(160,60,45,.14)}
.sign-cell .stamp{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;color:var(--malachite)}
/* ---------- 陈列台 ---------- */
.stage-wrap{position:relative;margin-top:6px}
.stage{position:relative;width:100%;aspect-ratio:3/4;border-radius:20px;overflow:hidden;
  box-shadow:var(--sh2);border:1px solid rgba(189,144,39,.25);background:#efe6d2}
.stage svg.bg{position:absolute;inset:0;width:100%;height:100%}
.stage .placed{position:absolute;width:32%;transform:translate(-50%,-50%);touch-action:none;
  filter:drop-shadow(0 8px 14px rgba(80,55,20,.28));transition:filter .2s}
.stage .placed.dragging{filter:drop-shadow(0 14px 22px rgba(80,55,20,.4)) brightness(1.06);z-index:9}
.stage .placed .rm{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--cinnabar);
  color:#fff;font-size:12px;line-height:20px;text-align:center;display:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.stage.edit .placed .rm{display:block}
.stage-tip{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10.5px;color:rgba(61,52,42,.45);letter-spacing:1px}
.bg-picker{display:flex;gap:9px;margin:12px 0}
.bg-opt{flex:1;border-radius:14px;overflow:hidden;border:2px solid transparent;box-shadow:var(--sh);position:relative}
.bg-opt.on{border-color:var(--cinnabar)}
.bg-opt svg{display:block;width:100%;height:100%}
.bg-opt span{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;text-align:center;padding:2px 0;
  background:rgba(0,0,0,.28);color:#fff;letter-spacing:1px}
.tray{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
.tray .tslot{flex:none;width:64px;aspect-ratio:200/280;border-radius:10px;overflow:hidden;box-shadow:0 3px 9px rgba(90,65,30,.14);position:relative}
.tray .tslot svg{display:block;width:100%;height:100%}
.tray .tslot.used{opacity:.35}
.tray .tslot.used::after{content:"陈列中";position:absolute;inset:0;display:grid;place-items:center;background:rgba(40,30,20,.35);color:#fff;font-size:8px}
/* ---------- 弹窗 ---------- */
.mask{position:absolute;inset:0;background:rgba(45,35,22,.42);backdrop-filter:blur(3px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:22px}
.mask.show{display:flex;animation:fadeIn .2s}
.modal{background:var(--paper);border-radius:22px;width:100%;max-height:82%;overflow-y:auto;padding:18px;
  box-shadow:0 24px 60px rgba(50,35,15,.32);border:1px solid rgba(189,144,39,.28);position:relative}
.modal::-webkit-scrollbar{width:0}
.modal h3{margin:0 0 4px;font-size:17px;letter-spacing:2px}
.modal .m-sub{font-size:10.5px;color:var(--ink3);letter-spacing:1px}
.modal .close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  background:rgba(61,52,42,.07);display:grid;place-items:center;color:var(--ink2);font-size:14px}
.lore{font-size:12.5px;line-height:2;color:var(--ink2);margin-top:10px;text-indent:2em;letter-spacing:.5px}
.rew-list{display:grid;gap:8px;margin-top:10px}
.rew{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);background:rgba(255,253,246,.8);
  border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rew svg{width:18px;height:18px}
.rew b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.rew.locked{opacity:.55}
/* ---------- 抽卡动画 ---------- */
.draw-layer{position:absolute;inset:0;z-index:80;display:none;flex-direction:column;
  background:radial-gradient(120% 80% at 50% 30%,#2b241c,#191411 70%);overflow:hidden}
.draw-layer.show{display:flex;animation:fadeIn .2s}
.draw-layer .stars{position:absolute;inset:0;pointer-events:none}
.draw-layer .stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;
  box-shadow:0 0 6px 2px rgba(255,225,160,.8)}
.dl-head{padding:18px 20px 0;color:#e9dcc2;font-size:11px;letter-spacing:4px;text-align:center;opacity:.65}
.dl-stage{flex:1;display:grid;place-items:center;position:relative;padding:8px}
.dl-card{width:56%;max-width:210px;border-radius:16px;opacity:0;transform:translateY(30px) scale(.8);
  transition:opacity .32s, transform .45s cubic-bezier(.2,1.5,.4,1)}
.dl-card.in{opacity:1;transform:none}
.dl-card .cwrap{box-shadow:0 20px 40px rgba(0,0,0,.45)}
.dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:400px;padding:0 10px}
.dl-grid .cwrap{border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.dl-grid .dl-card{width:100%!important;max-width:none}
.dl-grid .dl-card{width:100%!important;max-width:none}
.dl-foot{padding:14px 18px 26px;text-align:center}
.dl-foot .btn{display:inline-block;flex:none;min-width:120px;margin:0 5px;padding:10px 20px;font-size:13px}
.dl-rare{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.dl-rare .ring{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,230,170,.9);
  animation:ringOut .9s ease-out forwards}
@keyframes ringOut{to{width:520px;height:520px;opacity:0;border-width:1px}}
.dl-skip{position:absolute;right:16px;top:14px;color:#e9dcc2;font-size:11px;opacity:.6;letter-spacing:2px;z-index:9}
/* ---------- Toast ---------- */
#toast{position:absolute;left:50%;bottom:110px;transform:translate(-50%,10px);z-index:99;pointer-events:none;
  background:rgba(48,38,26,.92);color:#fdf6e8;padding:9px 18px;border-radius:99px;font-size:12.5px;
  letter-spacing:1px;opacity:0;transition:.28s;white-space:nowrap;max-width:88%;overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- 底部导航 ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:66px;z-index:30;display:flex;
  background:rgba(250,245,233,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(189,144,39,.22);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;letter-spacing:1px;color:var(--ink3);position:relative}
.tabbar .tb svg{width:22px;height:22px}
.tabbar .tb.on{color:var(--cinnabar)}
.tabbar .tb.on::before{content:"";position:absolute;top:0;width:22px;height:2px;border-radius:99px;background:var(--cinnabar)}
.tabbar .tb .dot{position:absolute;top:8px;right:calc(50% - 16px);width:6px;height:6px;border-radius:50%;background:var(--cinnabar)}
/* 卡牌详情 */
.detail-top{display:flex;gap:14px}
.detail-top .dcard{width:38%;flex:none;border-radius:13px;overflow:hidden;box-shadow:var(--sh2)}
.detail-top .dcard svg{display:block;width:100%;height:auto}
.detail-top .dmeta{flex:1;min-width:0;font-size:11.5px;color:var(--ink2);line-height:1.9}
.detail-top .dmeta .rk{font-size:10px;padding:1px 7px;border-radius:99px;background:rgba(61,52,42,.07)}
.detail-top .dmeta h3{font-size:20px;letter-spacing:2px;margin:6px 0 4px}
.detail-quote{margin-top:10px;padding:10px 12px;border-left:2px solid var(--gamboge);background:rgba(217,164,65,.08);
  border-radius:0 10px 10px 0;font-size:12.5px;color:var(--ink2);letter-spacing:1px;line-height:1.8}
.empty{text-align:center;padding:36px 10px;color:var(--ink3);font-size:12px;letter-spacing:1px;line-height:2}
.empty svg{width:56px;height:56px;opacity:.4;margin-bottom:6px}
.foot-note{text-align:center;font-size:9.5px;color:var(--ink3);letter-spacing:1px;padding:16px 0 4px;opacity:.75;line-height:1.9}
/* 面板 */
.panel{background:rgba(255,253,246,.86);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--sh);margin-bottom:12px}
.panel h3{margin:0 0 8px;font-size:14px;letter-spacing:2px}
.rate-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);padding:5px 0;border-bottom:1px dashed var(--line)}
.rate-row:last-child{border:0}
.rate-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.mini-note{font-size:10px;color:var(--ink3);line-height:1.8;margin-top:6px}
@media (max-width:360px){ .hero h1{font-size:29px} .grid{gap:7px} }

/* ============================================================
   v2：Phaser 画布层 / 登录 / 用户 / 陈列台
   ============================================================ */
#phaser{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#phaser canvas{display:block}
#app{z-index:2}
body.drawing #app{opacity:0;pointer-events:none}
body.drawing #phaser{z-index:60;pointer-events:auto}
#app.ex-mode{background:transparent!important;backdrop-filter:none}
#app.ex-mode::before{display:none}

/* 抽卡文字层（画面在 canvas） */
.draw-layer{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:460px;
  height:100vh;height:100dvh;background:none!important;z-index:70;pointer-events:none}
.draw-layer .dl-stage{display:none}
.draw-layer .dl-head{padding:34px 20px 0;font-size:12px;letter-spacing:8px;color:#e9dcc2;opacity:.8}
.draw-layer .dl-foot{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 34px;pointer-events:auto}
.draw-layer .dl-skip{pointer-events:auto}
.draw-layer .btn.ghost{background:rgba(255,250,238,.92);color:var(--ink)}
.draw-layer .btn.gold{margin-bottom:8px}

/* 用户胶囊 */
.userchip{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);
  background:rgba(255,253,246,.86);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px}
.userchip .ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#c0503f,#a63c2d);color:#fff6e8;font-size:11px}

/* 登录 / 注册 */
.gate{position:absolute;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:26px;
  background:radial-gradient(120% 80% at 50% 18%,rgba(250,246,236,.97),rgba(232,222,200,.985))}
.gate.show{display:flex}
.gate-card{width:100%;max-width:330px;text-align:center}
.gate-title{font-size:32px;letter-spacing:10px;color:var(--ink);text-shadow:0 2px 0 #fff}
.gate-sub{font-size:10.5px;letter-spacing:8px;color:var(--ink3);margin:8px 0 24px}
.gate-tabs{display:flex;background:rgba(61,52,42,.06);border-radius:12px;padding:3px;margin-bottom:16px}
.gate-tabs button{flex:1;padding:8px;border-radius:9px;font-size:13px;letter-spacing:2px;color:var(--ink2)}
.gate-tabs button.on{background:#fffdf6;color:var(--cinnabar);box-shadow:0 2px 8px rgba(90,65,30,.1)}
.gate input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fffdf9;
  font-size:14px;margin-bottom:10px;font-family:var(--font);color:var(--ink)}
.gate input:focus{outline:none;border-color:rgba(192,80,63,.5);box-shadow:0 0 0 3px rgba(192,80,63,.08)}
.gate-btn{width:100%;padding:13px;border-radius:14px;background:linear-gradient(140deg,#c0503f,#a63c2d);
  color:#fff6e8;font-size:15px;letter-spacing:4px;box-shadow:0 8px 20px rgba(160,60,45,.24)}
.gate-guest{width:100%;margin-top:10px;padding:11px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,253,246,.7);color:var(--ink2);font-size:13px;letter-spacing:1px}
.gate-tip{font-size:10.5px;color:var(--ink3);margin-top:16px;letter-spacing:1px;line-height:1.8}

/* 陈列台 */
.stage-slot{width:100%;aspect-ratio:3/4;border-radius:20px;margin:6px 0 12px;position:relative}
.tray-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;min-height:26px}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,253,246,.9);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-size:11.5px;color:var(--ink2)}
.chip i{font-style:normal;color:var(--cinnabar);font-size:14px;line-height:1}
#s-exhibit .sbody{padding-bottom:24px}

/* ============================================================
   v3 交互改版：卷轴主舞台 / 书签进度 / 四宫格 / 新导航
   ============================================================ */
:root{ --kai:"Kaiti SC","STKaiti","KaiTi",var(--font); }

/* ---------- 顶栏 v3 ---------- */
.topbar{gap:7px}
.brand{font-family:var(--kai);font-size:16px;font-weight:700;letter-spacing:1.5px;color:#463a28;
  white-space:nowrap;text-shadow:0 1px 0 rgba(255,252,240,.85),0 2px 6px rgba(160,120,50,.18)}
.brand .bd-sep{color:var(--cinnabar);margin:0 1px}
.pill{display:flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px 4px 6px;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 2px 7px rgba(55,45,25,.22);flex:none}
.pill svg{width:17px;height:17px;flex:none}
.pill.jade{background:linear-gradient(140deg,#46586f,#324050);color:#eef6fa;border:1px solid #2b3644}
.pill.tkt{background:linear-gradient(140deg,#f4e6bb,#e3cd93);color:#7c5c1c;border:1px solid #c8ae74}
.ava-btn{width:29px;height:29px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#c65a45,#96352a);color:#fff6e8;font-size:13px;font-weight:700;
  border:1.5px solid #f0e2c0;box-shadow:0 2px 7px rgba(120,60,40,.3)}
.back-btn{width:29px;height:29px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,253,246,.9);border:1px solid var(--line);color:var(--ink2);
  font-size:19px;line-height:1;padding-bottom:2px}

/* ---------- 首页 · 卷轴舞台 ---------- */
.home-stage{position:relative;display:flex;justify-content:center;padding:2px 0 0}
.bm-col{position:absolute;left:2px;top:14px;display:flex;flex-direction:column;gap:9px;z-index:6}
.bm{width:47px;border-radius:12px;padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:linear-gradient(175deg,#faf4e1,#efe4c8);border:1px solid #d6c8a2;
  box-shadow:0 3px 8px rgba(90,70,35,.16), inset 0 1px 0 #fff}
.bm .bstar{width:13px;height:13px}
.bm .vt{writing-mode:vertical-rl;letter-spacing:3px;font-size:11.5px;color:#5c5040;font-weight:600;font-family:var(--kai)}
.bm .pg{font-size:10px;color:#bc5643;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.bm.done{background:linear-gradient(175deg,#eef3e2,#dfe9cd);border-color:#b9c8a4}
.bm.done .pg{color:#5f8a53}
.scroll-wrap{position:relative;width:min(74%,292px)}
.roller{position:relative;height:24px;z-index:3;
  background:linear-gradient(180deg,#f6eed6,#dcc99c 46%,#b89f6e);
  border-radius:12px;box-shadow:0 3px 6px rgba(80,60,25,.28), inset 0 -2px 3px rgba(120,90,40,.25)}
.roller .knob{position:absolute;top:-3px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#c8a26b,#8a6238 62%,#5f4326);
  box-shadow:0 2px 4px rgba(60,40,15,.4), inset 0 2px 3px rgba(255,240,200,.4)}
.roller .knob::after{content:"";position:absolute;inset:11px;border-radius:50%;background:rgba(50,35,18,.5)}
.roller .knob.l{left:-11px}.roller .knob.r{right:-11px}
.scroll-paper{position:relative;overflow:hidden;min-height:378px;margin:0 7px;
  background:linear-gradient(180deg,#f9f3e2,#f2e8cd 70%,#eddfc0);
  box-shadow:inset 0 0 26px rgba(150,115,55,.18), inset 3px 0 8px rgba(150,115,55,.10), inset -3px 0 8px rgba(150,115,55,.10);
  display:flex;flex-direction:column;align-items:center}
.scroll-paper .mnt{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none}
.scroll-paper .mnt svg{width:100%;height:100%;display:block}
.medal{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;margin-top:34px;
  background:radial-gradient(circle at 38% 28%,#7d7462,#4c4437 68%,#3a342b);
  border:3px solid #c9a962;
  box-shadow:0 0 0 4px rgba(201,169,98,.22),0 10px 22px rgba(60,45,20,.35), inset 0 3px 10px rgba(255,244,214,.18);
  display:grid;place-items:center;transition:transform .15s}
.medal:active{transform:scale(.96)}
.medal::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(222,193,128,.5)}
.medal .mtxt{font-family:var(--kai);color:#ecd9a4;font-size:25px;line-height:1.22;letter-spacing:3px;
  text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.45);font-weight:700}
.pool-chip{position:relative;z-index:2;margin-top:16px;display:flex;align-items:center;gap:4px;
  font-size:11px;letter-spacing:1px;color:#6d5c3c;background:rgba(255,252,240,.75);
  border:1px solid #d8c9a2;border-radius:999px;padding:4px 12px}
.pool-chip .updot{width:6px;height:6px;border-radius:50%;background:#d4553f;box-shadow:0 0 0 2.5px rgba(212,85,63,.25)}
.pity-line{position:relative;z-index:2;margin-top:7px;font-size:9.5px;letter-spacing:1px;color:#a392733;
  color:#a39273}
.pity-line .pmini{display:inline-block;width:52px;height:4px;border-radius:99px;background:rgba(61,52,42,.12);
  vertical-align:1px;margin:0 5px;overflow:hidden}
.pity-line .pmini i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#d9a441,#c07a3a)}
.plq-row{position:relative;z-index:2;display:flex;gap:14px;width:100%;padding:0 20px;margin-top:auto;margin-bottom:22px}
.plq{flex:1;height:54px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--kai);transition:transform .12s, box-shadow .12s}
.plq b{font-size:20px;letter-spacing:7px;text-indent:7px;font-weight:700;line-height:1}
.plq small{font-size:9px;letter-spacing:1px;opacity:.85;font-family:var(--font)}
.plq.red{background:linear-gradient(180deg,#d4604c,#a63c2c);color:#ffedd2;border:2px solid #e9c98c;
  box-shadow:0 5px 0 #7c2a1f,0 9px 16px rgba(140,50,30,.32)}
.plq.gold{background:linear-gradient(180deg,#eecb72,#c69a3c);color:#6b4c14;border:2px solid #f7e7bd;
  box-shadow:0 5px 0 #96742a,0 9px 16px rgba(150,110,40,.32)}
.plq:active{transform:translateY(4px)}
.plq.red:active{box-shadow:0 1px 0 #7c2a1f,0 4px 8px rgba(140,50,30,.3)}
.plq.gold:active{box-shadow:0 1px 0 #96742a,0 4px 8px rgba(150,110,40,.3)}
.home-char{position:absolute;right:-14px;bottom:16px;z-index:5;pointer-events:none;
  display:flex;align-items:flex-end;gap:2px;filter:drop-shadow(0 8px 12px rgba(70,50,20,.28))}
.home-char .chb{display:block}
.home-char .rbt{margin-bottom:2px;opacity:.96}

/* ---------- 四宫格入口 ---------- */
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:13px 13px 2px}
.tile3{position:relative;border-radius:17px;padding:12px 4px 10px;display:flex;flex-direction:column;
  align-items:center;gap:7px;color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 5px 12px rgba(70,60,40,.20), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s}
.tile3:active{transform:scale(.95)}
.tile3 svg{width:27px;height:27px}
.tile3 b{font-size:12px;letter-spacing:1.5px;font-weight:600;text-shadow:0 1px 2px rgba(40,50,60,.25)}
.t-book{background:linear-gradient(165deg,#7d97ae,#58748f)}
.t-exh{background:linear-gradient(165deg,#8ab29c,#5f8d76)}
.t-shop{background:linear-gradient(165deg,#7393b5,#4e6f96)}
.t-sign{background:linear-gradient(165deg,#dcba6e,#bb9240)}
.tdot{position:absolute;top:7px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#ff5946;border:1.6px solid #fff;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.home-foot{text-align:center;font-size:10px;letter-spacing:1.5px;color:var(--ink3);padding:12px 0 0}

/* ---------- 底栏 v3 ---------- */
.tabbar{background:#dee3df;border-top:1px solid #c7cec8;
  height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;z-index:20}
.tabbar .tb{flex:1;display:flex;align-items:center;justify-content:center;color:#8b978f;font-size:10.5px;letter-spacing:1px}
.tabbar .tbchip{display:flex;flex-direction:column;align-items:center;gap:2.5px;padding:6px 17px;border-radius:14px;transition:all .18s}
.tabbar .tb svg{width:23px;height:23px}
.tabbar .tb.on{color:#fff}
.tabbar .tb.on .tbchip{background:linear-gradient(180deg,#33b5cd,#198ba4);
  box-shadow:0 5px 12px rgba(25,139,168,.42), inset 0 1px 0 rgba(255,255,255,.35)}
.tabbar .tb:not(.on):active .tbchip{background:rgba(120,140,130,.12)}

/* ---------- 卡池弹层 ---------- */
.pool-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pool-opt{text-align:left;border-radius:16px;padding:13px 14px;border:1.5px solid var(--line);
  background:rgba(255,253,246,.85);display:flex;flex-direction:column;gap:4px}
.pool-opt.on{border-color:#c9a962;box-shadow:0 0 0 2.5px rgba(201,169,98,.25)}
.pool-opt h4{margin:0;font-size:15px;color:var(--ink)}
.pool-opt p{margin:0;font-size:11px;color:var(--ink3)}
.pool-opt .ptag{display:inline-flex;align-self:flex-start;font-size:9.5px;padding:2px 8px;border-radius:99px;
  background:#f3e2c4;color:#8a5a20;letter-spacing:1px;margin-bottom:2px}
.pool-opt .ptag.up{background:#f6d8d0;color:#b0442f}

/* v3 微调 */
.medal .mtxt{width:2.6em}
.plq-row{padding-right:96px}
.home-char{bottom:12px;right:-8px}
.home-char .chb svg{width:88px}
.scroll-paper{min-height:390px}

/* v3 微调 */
.medal .mtxt{width:2.6em}
.plq-row{padding-right:96px}
.home-char{bottom:12px;right:-8px}
.home-char .chb svg{width:88px}
.scroll-paper{min-height:390px}
.plq small{white-space:nowrap}

/* ============================================================
   v4 · Seedream 生成材质接入
   ============================================================ */
body{background:#e9e2d0 url("../img/ui/bg_main.jpg") center/cover no-repeat fixed}
#app{background:linear-gradient(180deg,rgba(250,246,236,.42),rgba(248,243,230,.60) 40%,rgba(246,240,224,.68))}
#app::before{opacity:.5}

.scroll-paper{background:#f7f0dd url("../img/ui/paper.jpg") center/cover}
.scroll-paper .mnt{opacity:.55;mix-blend-mode:multiply}
.roller{background:linear-gradient(180deg,#f2e7c9,#d8c396 46%,#ab8f5e)}
.roller .knob{background:#c8a26b url("../img/ui/knob.jpg") center/cover;background-size:135%}
.roller .knob::after{display:none}

.medal{background:#4c4437 url("../img/ui/seal.jpg") center/cover;background-size:112%;
  border:3px solid #c9a962}
.medal::before{border-color:rgba(222,193,128,.35)}
.medal .mtxt{font-size:27px;text-shadow:0 2px 4px rgba(0,0,0,.55),0 0 14px rgba(240,206,130,.35)}

.plq{border:0}
.plq.red{background:url("../img/ui/plaque_red.jpg") center/cover;background-size:104%;
  color:#fff0d2;box-shadow:0 6px 16px rgba(120,40,25,.38)}
.plq.gold{background:url("../img/ui/plaque_gold.jpg") center/cover;background-size:104%;
  color:#6b4c14;box-shadow:0 6px 16px rgba(150,110,40,.38)}
.plq b{text-shadow:0 1px 3px rgba(60,20,10,.35)}
.plq.gold b{text-shadow:0 1px 2px rgba(120,85,20,.25)}

.tile3{border:1.5px solid rgba(255,255,255,.55);background-size:cover;background-position:center}
.t-book{background-image:url("../img/ui/tile_book.jpg")}
.t-exh{background-image:url("../img/ui/tile_exhibit.jpg")}
.t-shop{background-image:url("../img/ui/tile_shop.jpg")}
.t-sign{background-image:url("../img/ui/tile_sign.jpg")}
.tile3 b{text-shadow:0 1px 3px rgba(30,40,55,.4)}
.tile3 svg{filter:drop-shadow(0 1px 2px rgba(30,40,55,.35))}

.home-char .chb-img{width:112px;display:block;mix-blend-mode:multiply}
.home-char{filter:none}
html.art-mode .tile3 .t-ico{display:none}
html.art-mode .tile3{padding-top:26px;padding-bottom:12px}

/* v4 修正 */
.plq.red{background-size:cover;background-position:center;border-radius:16px}
.plq.gold{background-size:cover;background-position:center;border-radius:16px}
.plq .plq-bg{display:none}
.tile3{background-size:122%;background-position:center}
.home-char .chb-img{width:118px;mix-blend-mode:multiply;filter:brightness(1.13) saturate(1.03)}
.medal{background-size:cover}

/* v4 修正二 */
.home-char{z-index:auto;bottom:-2px;right:-12px}
.home-char .chb-img{width:106px;filter:brightness(1.14) saturate(1.02);mix-blend-mode:multiply}
html.art-mode .tile3{justify-content:flex-end;padding-top:38px;padding-bottom:9px;gap:2px}
.tile3 b{line-height:1}
.plq-row{padding-right:56px;padding-left:14px;margin-bottom:24px}
.plq b{font-size:21px}
.plq small{display:none}
.plq-note{position:relative;z-index:2;margin-top:-14px;margin-bottom:20px;font-size:8.5px;
  letter-spacing:.6px;color:#a39273;text-align:center}

/* v4 修正三 */
.home-char .chb-img{width:98px}
.home-char{right:-16px;bottom:0}
.plq-row{padding-right:74px}
html.art-mode .tile3{aspect-ratio:1/1;justify-content:flex-end;padding:0 4px 9px;
  background-size:118%;background-position:center}

/* ============================================================
   v4.1 · 登录页改版：神仙主视觉 + 按钮先行
   ============================================================ */
.gate{position:absolute;inset:0;z-index:90;display:none;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(130% 62% at 50% 6%, #fdf9ec 0%, rgba(253,249,236,0) 62%),
    linear-gradient(180deg,#f6efdc 0%,#eee3c8 58%,#e6d9ba 100%)}
.gate.show{display:flex}
.gscenic{position:absolute;inset:0;pointer-events:none}
.gcloud{position:absolute;opacity:.55}
.gcloud.gc1{top:9%;left:-34px;animation:gdrift 26s linear infinite}
.gcloud.gc2{top:22%;right:-30px;animation:gdrift 34s linear infinite reverse}
@keyframes gdrift{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}
.gtitle{position:absolute;top:12.5%;width:100%;text-align:center;
  font-family:var(--kai);font-size:47px;font-weight:700;letter-spacing:13px;text-indent:13px;
  color:#463724;text-shadow:0 2px 0 rgba(255,252,240,.9),0 8px 22px rgba(170,120,40,.28)}
.gtitle::after{content:"";display:block;width:150px;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,#c9a962,transparent)}
.gsub{position:absolute;top:calc(12.5% + 92px);width:100%;text-align:center;
  font-size:10.5px;letter-spacing:5px;color:#a2917a}
.gmount{position:absolute;left:0;right:0;bottom:0;height:30%;opacity:.42}
.gmount svg{width:100%;height:100%}
.ghero{position:absolute;bottom:206px;left:50%;transform:translateX(-50%);width:216px;transition:opacity .3s}
.ghero img{width:100%;display:block;mix-blend-mode:multiply;filter:brightness(1.1)}
.ghero.dim{opacity:.38}
.gpanel{position:relative;z-index:2;margin-top:auto;width:100%;max-width:334px;
  padding:0 26px calc(26px + env(safe-area-inset-bottom));animation:gsUp .3s ease}
@keyframes gsUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gbtn{display:flex;align-items:center;justify-content:center;width:100%;height:53px;margin-bottom:11px;
  border-radius:15px;font-family:var(--kai);font-size:18px;letter-spacing:7px;text-indent:7px;font-weight:700;
  transition:transform .12s}
.gbtn:active{transform:scale(.97)}
.gbtn.primary{background:url("../img/ui/plaque_red.jpg") center/cover;color:#fff0d2;
  text-shadow:0 1px 3px rgba(60,20,10,.4);box-shadow:0 6px 16px rgba(120,40,25,.38)}
.gbtn.plain{background:linear-gradient(180deg,#f9f3e0,#eadfc0);border:1.5px solid #c9b98e;
  color:#5c4c32;box-shadow:0 4px 12px rgba(110,90,50,.16)}
.gbtn.ghost{height:44px;background:none;border:1.2px dashed #c3b28a;color:#8d7c5c;
  font-size:13px;letter-spacing:3px;font-family:var(--font);font-weight:600}
.gtip{text-align:center;font-size:10px;letter-spacing:1px;color:#a8977c;margin-top:4px}
.gpanel.form{background:rgba(250,246,234,.96);border:1px solid #d8c9a2;border-radius:22px;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom));margin:0 22px 18px auto;
  box-shadow:0 14px 34px rgba(90,70,35,.22)}
.gp-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.gp-head b{font-family:var(--kai);font-size:19px;letter-spacing:4px;color:#463724}
.gp-back{width:30px;height:30px;border-radius:50%;background:rgba(61,52,42,.06);color:#6d5c3c;
  font-size:18px;display:grid;place-items:center;line-height:1}
.gpanel.form input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d8c9a2;
  background:#fffdf6;font-size:14px;margin-bottom:10px;font-family:var(--font);color:var(--ink)}
.gpanel.form input:focus{outline:none;border-color:rgba(192,80,63,.5);box-shadow:0 0 0 3px rgba(192,80,63,.08)}
.gpanel.form .gbtn{margin-bottom:9px}

/* v4.1 修正 */
.ghero{width:252px;bottom:246px}
.ghero img{filter:brightness(1.14) saturate(1.02);
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, transparent 98%);
  mask-image:radial-gradient(closest-side, #000 58%, transparent 98%)}
.ghero.dim{opacity:0}
.gmount{opacity:.3}
.gbtn.primary{background-color:#a84434}
.plq.red,.plq.gold{background-color:#b08d4f}
.gbtn.primary{background:url("../img/ui/plaque_red.jpg") center 55%/118% auto;background-color:#8e2f22}
.gbtn.primary{background:url("../img/ui/plaque_red.jpg") center 55%/118% auto;background-color:#8e2f22}

/* ============================================================
   v5 · 登录后界面重构（依据 Seedream 设计稿）
   · 底部 4 页签为唯一页面导航：首页 / 引仙台 / 众神簿 / 仙府
   · 首页宫格只留功能入口：每日签到 / 灵韵商店（与页签零重复）
   · 品牌标题仅首页顶栏显示
   ============================================================ */

/* ---- 两宫格功能入口：仿设计稿方形圆角·朱砂边·金包角 ---- */
.tiles2{display:flex;gap:13px;justify-content:center;padding:15px 30px 2px}
.tiles2 .tile3{flex:1;max-width:158px;border-radius:19px;padding:14px 4px 13px;
  border:1.6px solid rgba(255,236,200,.65);
  box-shadow:0 6px 14px rgba(70,60,40,.22), inset 0 1.5px 0 rgba(255,255,255,.45)}
html.art-mode .tiles2 .tile3{justify-content:center;padding-top:16px;gap:7px}
html.art-mode .tiles2 .tile3 b{font-size:12.5px;letter-spacing:2px}
.tiles2 .tile3 b{color:#fff6e0}
.tdot{top:8px;right:10px}

/* ---- 顶栏：首页品牌标题居中（绝对定位不挤占布局），子页隐藏 ---- */
.topbar{min-height:52px;position:relative}
.topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  font-size:18px;letter-spacing:3px}
.brand .bd-sep{font-size:13px}
.back-btn{flex:0 0 30px}

/* ---- 底栏：仿设计稿米灰长条 + 高亮青色圆角块 ---- */
.tabbar{background:linear-gradient(180deg,#e7e3d6,#ddd8c8);border-top:1px solid #cfc6ac;
  box-shadow:0 -1px 0 rgba(201,169,98,.35), 0 -6px 18px rgba(90,75,40,.10)}
.tabbar .tbchip{padding:6px 19px;border-radius:15px}
.tabbar .tb.on .tbchip{background:linear-gradient(180deg,#3fae9b,#238a7d);
  box-shadow:0 5px 13px rgba(35,138,125,.40), inset 0 1px 0 rgba(255,255,255,.38)}

/* ---- 首页卷轴微调：给下方宫格留白 ---- */
.scroll-paper{min-height:360px}
.home-stage{padding-top:6px}

/* ---- v5 修正二 ---- */
/* 顶栏品牌缩短后居中，不再与货币胶囊重叠 */
.topbar .brand{font-size:17px;letter-spacing:4px;text-indent:4px}
/* 单抽/十连匾额：文字不换行 */
.plq{white-space:nowrap}
.plq b{font-size:19px;letter-spacing:5px;text-indent:5px;white-space:nowrap}
.plq-row{align-items:center}
/* 宫格文字回落到底部（沿用全局 art-mode 规则），并加强可读性 */
html.art-mode .tiles2 .tile3{justify-content:flex-end;padding-top:20px;padding-bottom:11px;gap:2px}
html.art-mode .tiles2 .tile3 b{font-size:12px;letter-spacing:2.5px;
  text-shadow:0 1px 3px rgba(30,40,55,.55),0 0 6px rgba(30,40,55,.3)}

/* ============================================================
   v6 · 首页神将立绘舞台 / 左侧边栏 / 活动页
   ============================================================ */

/* ---- 左侧边栏：签到 / 灵韵铺 ---- */
#s-home .sbody{position:relative}
.sidebar{position:absolute;left:4px;top:84px;z-index:12;display:flex;flex-direction:column;gap:10px}
.sbi{position:relative;width:54px;padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:linear-gradient(175deg,#faf4e1,#efe4c8);border:1px solid #d6c8a2;border-radius:13px;
  box-shadow:0 3px 8px rgba(90,70,35,.16), inset 0 1px 0 #fff;color:#5c5040;transition:transform .12s}
.sbi:active{transform:scale(.93)}
.sbi span{font-size:10.5px;letter-spacing:1.5px;font-weight:600;font-family:var(--kai)}
.sbi-dot{position:absolute;top:5px;right:7px;width:8px;height:8px;border-radius:50%;
  background:#ff5946;border:1.5px solid #fff;animation:blink 1.4s infinite}

/* ---- 神将立绘舞台 ---- */
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center;
  padding-top:8px;min-height:400px;justify-content:flex-end}
.hero-halo{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;
  background:url("../img/ui3/hero_halo.jpg") center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.9;pointer-events:none;
  animation:haloSpin 26s linear infinite}
.hero-stage::before{content:"";position:absolute;left:50%;bottom:110px;transform:translateX(-50%);
  width:230px;height:230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(120,200,190,.28),rgba(120,200,190,0) 68%);
  animation:haloPulse 3.2s ease-in-out infinite}
.hero-img{position:relative;z-index:2;width:198px;display:block;mix-blend-mode:multiply;
  filter:brightness(1.12) saturate(1.04) drop-shadow(0 10px 14px rgba(70,50,20,.22));
  animation:heroFloat 4.6s ease-in-out infinite;transform-origin:50% 90%}
.hero-svg{position:relative;z-index:2;display:block;animation:heroFloat 4.6s ease-in-out infinite}
.hero-svg svg{width:170px}
.pedestal{position:relative;z-index:3;width:238px;display:block;mix-blend-mode:multiply;
  margin-top:-26px;pointer-events:none}
.hero-dust{position:absolute;inset:0;pointer-events:none;z-index:4}
.hero-dust i{position:absolute;bottom:120px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#f2d488,rgba(242,212,136,0));opacity:0;
  animation:dustUp 5.2s linear infinite}
.hero-dust i:nth-child(1){left:22%;animation-delay:0s}
.hero-dust i:nth-child(2){left:34%;width:3px;height:3px;animation-delay:1.3s}
.hero-dust i:nth-child(3){left:47%;animation-delay:2.4s}
.hero-dust i:nth-child(4){left:60%;width:4px;height:4px;animation-delay:.7s}
.hero-dust i:nth-child(5){left:72%;animation-delay:3.1s}
.hero-dust i:nth-child(6){left:82%;width:3px;height:3px;animation-delay:1.9s}
.hero-stage.empty .hero-none{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);
  z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;color:#9a8a68}
.hero-stage.empty .hero-none b{font-family:var(--kai);font-size:17px;letter-spacing:3px;color:#8a7a58}
.hero-stage.empty .hero-none span{font-size:11px;letter-spacing:1px}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-13px) scale(1.015)}}
@keyframes haloSpin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}
@keyframes haloPulse{0%,100%{opacity:.45;transform:translateX(-50%) scale(1)}50%{opacity:.8;transform:translateX(-50%) scale(1.05)}}
@keyframes dustUp{0%{transform:translateY(0);opacity:0}18%{opacity:.95}100%{transform:translateY(-150px);opacity:0}}

/* ---- 立绘信息与切换 ---- */
.hero-meta{text-align:center;margin-top:4px}
.hero-meta h2{margin:4px 0 3px;font-family:var(--kai);font-size:21px;letter-spacing:5px;color:#463a28}
.hm-set{font-size:10.5px;letter-spacing:1px;color:var(--ink3)}
.hm-rar{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;
  padding:2px 9px;border-radius:99px;color:#fff}
.hm-rar.r-SP{background:linear-gradient(140deg,#a86ce0,#6d3fb0)}
.hm-rar.r-SSR{background:linear-gradient(140deg,#d9a63c,#a86a18)}
.hm-rar.r-SR{background:linear-gradient(140deg,#7f9fd0,#4d6da3)}
.hm-rar.r-R{background:linear-gradient(140deg,#7cb08b,#4d8560)}
.hm-rar.r-N{background:linear-gradient(140deg,#a8a49a,#7d7a72)}
.hero-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 4px}
.hn-arrow{width:34px;height:34px;border-radius:50%;background:rgba(255,253,246,.92);
  border:1px solid var(--line);color:var(--ink2);font-size:19px;line-height:1;box-shadow:0 2px 6px rgba(90,70,35,.14)}
.hn-arrow:disabled{opacity:.35}
.hero-change{padding:9px 22px;border-radius:99px;border:1.5px solid #c9a962;
  background:linear-gradient(180deg,#f7ecd2,#ecdcb4);color:#7c5c1c;
  font-family:var(--kai);font-size:13.5px;letter-spacing:3px;font-weight:700;
  box-shadow:0 4px 10px rgba(150,110,40,.18), inset 0 1px 0 #fff}
.hero-change:active{transform:scale(.96)}

/* ---- 更换神将弹窗 ---- */
.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;
  max-height:46vh;overflow-y:auto;padding:2px}
.hp-card{position:relative;border-radius:14px;padding:8px 4px 7px;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:#fbf6e9;border:1.5px solid var(--line);transition:all .15s}
.hp-card.on{border-color:#c9a962;box-shadow:0 0 0 2.5px rgba(201,169,98,.3)}
.hp-card:active{transform:scale(.94)}
.hp-face{width:66px;height:66px;display:grid;place-items:center;border-radius:10px;background:#f4edda;overflow:hidden}
.hp-face img{width:62px;mix-blend-mode:multiply}
.hp-face svg{width:52px}
.hp-card b{font-size:11.5px;color:var(--ink2);letter-spacing:1px}

/* ---- 用户弹窗：资源行 ---- */
.up-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.up-ava{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,#c65a45,#96352a);color:#fff6e8;font-size:19px;font-weight:700;
  border:2px solid #f0e2c0;box-shadow:0 3px 9px rgba(120,60,40,.3)}
.up-head h3{margin:0 0 3px;font-family:var(--kai);font-size:18px;letter-spacing:2px;color:var(--ink)}
.up-res{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.upr{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px 9px;border-radius:14px;
  background:rgba(255,253,246,.9);border:1px solid var(--line)}
.upr-ico{width:22px;height:22px}
.upr i{font-style:normal;font-size:10px;letter-spacing:1.5px;color:var(--ink3)}
.upr b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- 活动页 ---- */
.ev-banner{position:relative;display:block;width:100%;border-radius:18px;overflow:hidden;
  border:1px solid #d8c9a2;box-shadow:0 6px 16px rgba(90,70,35,.18);transition:transform .12s}
.ev-banner:active{transform:scale(.98)}
.ev-banner img{width:100%;display:block;aspect-ratio:3/1.15;object-fit:cover}
.evb-txt{position:absolute;left:16px;top:50%;transform:translateY(-50%);text-align:left}
.evb-tag{display:inline-block;font-size:9.5px;letter-spacing:2px;padding:2px 9px;border-radius:99px;
  background:rgba(166,60,44,.92);color:#ffe9c8;margin-bottom:6px}
.evb-txt h3{margin:0 0 3px;font-family:var(--kai);font-size:19px;letter-spacing:3px;color:#46331f;
  text-shadow:0 1px 0 rgba(255,250,235,.8)}
.evb-txt p{margin:0;font-size:10px;letter-spacing:.5px;color:#6d5c40}
.evb-seal{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:56px;height:56px}
.evb-seal img{width:100%;mix-blend-mode:multiply;animation:haloPulse2 2.6s ease-in-out infinite}
@keyframes haloPulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.ev-list{display:flex;flex-direction:column;gap:10px;margin-top:13px}
.ev-item{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-radius:16px;
  background:rgba(255,253,246,.88);border:1px solid var(--line);box-shadow:0 3px 9px rgba(90,70,35,.10)}
.ev-item:active{transform:scale(.98)}
.ev-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(160deg,#f6ecd4,#eadcb6);color:#8a6a30}
.ev-txt{flex:1;min-width:0}
.ev-txt h4{margin:0 0 2px;font-size:13.5px;color:var(--ink);letter-spacing:.5px}
.ev-txt p{margin:0;font-size:10.5px;color:var(--ink3)}
.ev-go{flex:none;font-size:10.5px;letter-spacing:1.5px;padding:5px 12px;border-radius:99px;
  background:#f3e8cd;color:#8a6a30;border:1px solid #dcc99c}
.ev-go.hot{background:linear-gradient(180deg,#d4604c,#a63c2c);color:#ffedd2;border-color:#e9c98c;
  animation:blink 1.4s infinite}

/* ---- v6 修正：透明素材替代混合模式（动画合成层会破坏 mix-blend） ---- */
.hero-halo{background-image:url("../img/ui3/hero_halo.webp");mix-blend-mode:normal;opacity:.95}
.hero-img{mix-blend-mode:normal}
.pedestal{mix-blend-mode:normal}
.hp-face img{mix-blend-mode:normal}
.evb-seal img{mix-blend-mode:normal}

/* ---- v6 修正二：活动 banner ---- */
.evb-txt{left:0;right:0;text-align:center;transform:translateY(-50%)}
.evb-txt h3{font-size:20px;color:#fff;text-shadow:0 1px 4px rgba(120,30,20,.55),0 0 12px rgba(255,220,170,.3)}
.evb-txt p{color:rgba(255,244,222,.92);text-shadow:0 1px 3px rgba(120,30,20,.5)}
.evb-seal::after{content:"UP";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--kai);font-weight:700;font-size:17px;letter-spacing:1px;color:#a63c2c;
  text-shadow:0 1px 0 rgba(255,240,220,.6)}

/* ---- v6 修正三：banner 文字深色化（中部浅底） ---- */
.evb-txt h3{color:#8a3020;text-shadow:0 1px 0 rgba(255,250,238,.85),0 2px 6px rgba(150,90,50,.18)}
.evb-txt p{color:#7a5a38;text-shadow:0 1px 0 rgba(255,250,238,.8)}
.evb-seal{top:42%}

/* ---- v6 修正四：立绘落点贴合台座 ---- */
.hero-img{margin-bottom:-12px}
.hero-svg{margin-bottom:-12px}
.hero-halo{bottom:58px}

/* ============================================================
   v7 · 布局比例重排 + 按钮材质化（去色块）
   ============================================================ */

/* ---- 顶栏放大 ---- */
.topbar{min-height:60px;padding:0 14px;gap:9px}
.topbar .ava-btn{width:38px;height:38px;font-size:15px;border-width:2px}
.pill{padding:6px 13px 6px 8px;font-size:13.5px;gap:6px}
.pill svg{width:19px;height:19px;height:19px}
.topbar .brand{font-size:19px;letter-spacing:5px;text-indent:5px}

/* ---- 首页填满、消灭底部空白 ---- */
#home-body{display:flex;flex-direction:column;padding:0 0 4px;overflow:hidden}
.hero-stage{flex:1 1 auto;min-height:0;position:relative;display:block;padding:0}
.hero-figure{position:absolute;left:0;right:0;bottom:166px;z-index:2;
  display:flex;justify-content:center;pointer-events:none;
  animation:heroFloat 4.8s ease-in-out infinite}
.hero-img{position:static;width:252px;margin:0;display:block}
.hero-svg svg{width:196px}
.hero-halo{width:342px;height:342px;bottom:104px;animation:haloSpin 30s linear infinite}
.hero-stage::before{width:252px;height:252px;bottom:158px}
.pedestal{position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;
  width:302px;margin:0;z-index:3}
.hero-dust i{bottom:180px}
.hero-meta{margin-top:8px}
.hero-meta h2{font-size:22px;margin:3px 0 3px}
.hero-nav{margin:9px 0 2px;gap:18px}
.home-foot{padding:8px 0 2px;font-size:10.5px}

/* ---- 底栏：石条纹理 + 玉牌页签（选中） ---- */
.tabbar{height:calc(70px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);align-items:center;
  background:url("../img/ui2/nav.webp") center bottom/100% 100% no-repeat;
  border:0;box-shadow:none}
.tabbar .tb{color:#8a7649;font-size:10.5px;letter-spacing:1.5px}
.tabbar .tb svg{width:24px;height:24px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.tabbar .tbchip{position:relative;padding:6px 19px 5px;border-radius:16px;gap:3px}
.tabbar .tb.on{color:#fff9e8}
.tabbar .tb.on .tbchip{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#66c4b2 0%,#2f8477 58%,#1f6157 100%);
  border:1.5px solid #e2c98c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(14,60,52,.45),
    0 4px 11px rgba(30,90,80,.42)}
.tabbar .tb.on .tbchip::after{content:"";position:absolute;inset:2.5px;border-radius:13px;
  border:1px solid rgba(255,246,220,.34);pointer-events:none}
.tabbar .tb.on .tbchip svg{filter:drop-shadow(0 1px 2px rgba(10,50,44,.45))}
.tabbar .tb:not(.on):active .tbchip{background:rgba(120,100,60,.10)}

/* ---- 侧边栏：竖木牌 ---- */
.sidebar{left:6px;top:76px;gap:12px}
.sbi{width:58px;height:98px;padding:18px 2px 14px;justify-content:center;
  background:url("../img/ui2/tag.webp") center/100% 100% no-repeat;
  border:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 4px 7px rgba(90,70,35,.3))}
.sbi svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.65))}
.sbi span{color:#6b4f2c;font-size:11px;letter-spacing:2px}
.sbi:active{transform:scale(.94)}
.sbi-dot{top:9px;right:8px}

/* ---- 瓷圆钮箭头 ---- */
.hn-arrow{width:46px;height:46px;display:grid;place-items:center;
  background:url("../img/ui2/btn_round.webp") center/102% no-repeat;
  border:0;box-shadow:none;color:#6b5535;font-size:22px;
  filter:drop-shadow(0 3px 6px rgba(90,70,35,.3))}
.hn-arrow:disabled{opacity:.4}
.hn-arrow:active{transform:scale(.92)}

/* ---- 朱砂匾额主按钮 ---- */
.hero-change{background:url("../img/ui/plaque_red.jpg") center 52%/122% auto no-repeat #8e2f22;
  color:#ffeed0;border:0;padding:12px 32px;font-size:15px;letter-spacing:4px;
  box-shadow:0 6px 16px rgba(120,40,25,.38);text-shadow:0 1px 3px rgba(60,20,10,.45)}
.hero-change:active{transform:translateY(2px)}

/* ---- 活动页按钮材质 ---- */
.ev-go{background:url("../img/ui/plaque_gold.jpg") center/cover no-repeat;border:0;color:#6b4c14;
  padding:8px 15px;font-size:10.5px;box-shadow:0 3px 8px rgba(150,110,40,.25)}
.ev-go.hot{background:url("../img/ui/plaque_red.jpg") center/cover no-repeat;color:#ffedd2}
.ev-item{background:rgba(255,252,243,.94) url("../img/ui/paper.jpg") center/cover;
  border:1px solid #e0d3b0;box-shadow:0 4px 12px rgba(90,70,35,.12), inset 0 1px 0 #fff}

/* ---- v7 修正二 ---- */
#home-body{padding-bottom:86px}
.topbar .brand{font-size:16.5px;letter-spacing:2.5px;text-indent:2.5px}
.hero-figure{bottom:100px}
.hero-halo{bottom:59px}
.hero-stage::before{bottom:114px}
.hero-dust i{bottom:120px}
.pedestal{width:290px;bottom:-6px}
.hero-meta{margin-top:4px}

/* ---- v7 修正三：台座不再盖住人物 ---- */
/* 台座图已裁掉透明空白（720×276），层级降到人物之下，尺寸按内容比例重算 */
.pedestal{width:300px;bottom:58px;z-index:1}
.hero-figure{z-index:4}
/* 人物脚底踩在台面中心：微调 ±4px */
.hero-img,.hero-svg{margin-bottom:-12px}

/* ---- v7 修正四：立绘组合整体下移，压缩下方空隙 ---- */
.pedestal{bottom:14px}
.hero-figure{bottom:56px}
.hero-halo{bottom:15px}
.hero-stage::before{bottom:70px}
.hero-dust i{bottom:76px}

/* ---- v7 修正五：立绘组整体上移 + 适度放大（吃掉顶部空白） ---- */
.hero-img{width:270px}
.hero-svg svg{width:210px}
.hero-figure{bottom:87px}
.hero-halo{width:356px;height:356px;bottom:41px}
.hero-stage::before{width:262px;height:262px;bottom:96px}
.hero-dust i{bottom:102px}
.pedestal{width:320px;bottom:40px}

/* ============================================================
   v7 修正六 · 全面屏安全区
   · 顶栏预留状态栏/刘海高度（env(safe-area-inset-top)），
     否则内容顶到屏幕最上沿会被状态栏遮住、按钮点不到
   · 首页侧边栏、登录门同步下移
   ============================================================ */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
.topbar{padding-top:calc(8px + var(--sat));min-height:calc(68px + var(--sat))}
.sidebar{top:calc(84px + var(--sat))}
.gate{padding-top:calc(26px + var(--sat))}
.gate.show{padding-top:calc(26px + var(--sat))}
.tabbar{height:calc(70px + var(--sab));padding-bottom:var(--sab)}
/* 视口高度：优先 dvh（移动端地址栏收起/展开自适应），vh 仅作旧浏览器回退 */
#app{height:100vh;height:100dvh}

/* ---- v7 修正六·补：品牌绝对定位跟随安全区；侧栏相对 sbody 无需重复加 ---- */
.topbar .brand{top:calc(50% + var(--sat) / 2)}
.sidebar{top:76px}

/* ---- v7 修正六·补：品牌绝对定位跟随安全区；侧栏相对 sbody 无需重复加 ---- */
.topbar .brand{top:calc(50% + var(--sat) / 2)}
.sidebar{top:76px}

/* ---- v7 修正七：人物 + 光轮整体上移 30px，台座保持不动 ---- */
.hero-figure{bottom:117px}
.hero-halo{bottom:71px}
.hero-stage::before{bottom:126px}
.hero-dust i{bottom:132px}

/* ---- v7 修正八：精细微调（人物 ↓5 / 光轮 ↑2 / 台座 ↓10） ---- */
.hero-figure{bottom:112px}
.hero-halo{bottom:73px}
.pedestal{bottom:30px}

/* ============================================================
   v7 修正九 · 移动端主背景修复
   · background-attachment:fixed 在 iOS Safari / 安卓 WebView
     上不绘制（只显示底色），导致真机整页发白
   · 改为把底图挂到 html 上（移动端最稳的绘制层），body 透明
   ============================================================ */
html{
  background:#e9e2d0 url("../img/ui/bg_main.jpg") center center / cover no-repeat;
  -webkit-background-size:cover;
  min-height:100%;
}
body{background:transparent !important}
/* 底图偏淡时补一层暖色，避免任何情况下露出纯白 */
#app{
  background:linear-gradient(180deg,rgba(250,246,236,.34),rgba(248,243,230,.52) 40%,rgba(246,240,224,.60))
}
/* backdrop-filter 在移动端会把底层合成为白色，直接关闭（视觉影响极小） */
#app{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* ---- v7 修正十：底座单独下移 20px ---- */
.pedestal{bottom:10px}

/* ============================================================
   v7 修正十一 · 侧边栏按钮一体化素材
   · 整块牌匾（含图案）由 Seedream 一张图生成，直接铺背景
   · 不再叠加 SVG icon；文字落在牌面下方留空处
   ============================================================ */
.sbi{width:64px;height:118px;padding:0;background:none;border:0;box-shadow:none;
  filter:drop-shadow(0 4px 8px rgba(90,70,35,.28))}
.sbi svg{display:none}
.sbi::before{content:"";position:absolute;inset:0;border-radius:0;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.sbi-sign::before{background-image:url("../img/ui4/sb_sign.webp")}
.sbi-shop::before{background-image:url("../img/ui4/sb_shop.webp")}
.sbi span{position:absolute;left:0;right:0;bottom:14px;margin:0;
  color:#8a5a28;font-family:var(--kai);font-size:11px;letter-spacing:2px;
  text-indent:2px;font-weight:700;text-shadow:0 1px 0 rgba(255,248,230,.8)}
.sbi:active{transform:scale(.93)}
.sbi-dot{top:14px;right:9px}

/* ============================================================
   v7 修正十二 · 侧边栏改方形 icon + 下方文字
   · 去掉玉牌/木牌底板，只保留图案本体（透明 WebP）
   · icon 等比缩放至 56px 见方，文字置于 icon 下方
   ============================================================ */
.sbi{width:64px;height:auto;padding:6px 2px 4px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:5px;background:none;border:0;box-shadow:none}
.sbi::before{content:"";position:static;display:block;width:56px;height:56px;flex:0 0 56px;
  border-radius:0;background-position:center;background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 3px 5px rgba(90,70,35,.30))}
.sbi-sign::before{background-image:url("../img/ui4/sb_sign_ico.webp")}
.sbi-shop::before{background-image:url("../img/ui4/sb_shop_ico.webp")}
.sbi span{position:static;margin:0;color:#6e5230;font-family:var(--kai);font-size:11px;
  letter-spacing:2px;text-indent:2px;font-weight:700;line-height:1;
  text-shadow:0 1px 0 rgba(255,250,238,.9)}
.sbi:active{transform:scale(.92)}
.sbi-dot{top:4px;right:6px}

/* ============================================================
   v7 修正十三 · 底部菜单重做：纯图案 icon（一菜单一图）
   · 弃用线条 SVG，改为 Seedream 生成的独立物件图（透明 WebP）
   · icon 26px 见方 contain 等比，文字在下；选中态保留青玉色 chip
   ============================================================ */
.tabbar .tb svg{display:none !important}
.tabbar .tbico{display:block;width:27px;height:27px;flex:0 0 27px;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  filter:drop-shadow(0 2px 3px rgba(90,70,35,.22))}
.tb-home::before,
.tb-draw::before,
.tb-book::before,
.tb-event::before{content:"";display:block;width:100%;height:100%;
  background-position:center;background-size:contain;background-repeat:no-repeat}
.tb-home::before{background-image:url("../img/ui5/tb_home.webp")}
.tb-draw::before{background-image:url("../img/ui5/tb_draw.webp")}
.tb-book::before{background-image:url("../img/ui5/tb_book.webp")}
.tb-event::before{background-image:url("../img/ui5/tb_event.webp")}

/* ============================================================
   v7 修正十四 · 首页动态背景 + 删除人物底座
   · #bg 固定层承载底图（缓慢呼吸位移）+ canvas 流动云海/飞鸟
   · 移除 .pedestal，人物与光轮悬空自成一体
   ============================================================ */
html{background-image:none !important;background-color:#e9e2d0;min-height:100%}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#e9e2d0}
#bg-img{position:absolute;inset:-5%;background:#e9e2d0 url("../img/ui/bg_main.jpg") center center/cover no-repeat;
  animation:bgbreathe 54s ease-in-out infinite alternate;will-change:transform;transform-origin:50% 45%}
@keyframes bgbreathe{
  0%{transform:scale(1.03) translate3d(0,0,0)}
  100%{transform:scale(1.12) translate3d(-1.8%,-1.5%,0)}
}
#bgfx{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){
  #bg-img{animation:none;transform:scale(1.05)}
}
.pedestal,img.pedestal{display:none !important}
/* 内容层再降一档透明度，让动态云海在真机上透出来 */
#app{background:linear-gradient(180deg,rgba(250,246,236,.26),rgba(248,243,230,.40) 40%,rgba(246,240,224,.50)) !important}

/* ============================================================
   v7 修正十五 · 动态背景改为模型生成分层素材（替换 canvas 手绘）
   · bg_scene：Seedream 长卷仙山云海，横向缓速平移
   · bg_cloud：Seedream 云带（蓝底抠透明）双条不同速度漂移
   · bird_flock：Seedream 仙鹤群（白底抠透明）两群对飞
   · 纯 CSS transform 动画，GPU 合成，移动端流畅
   ============================================================ */
#bg-img,canvas#bgfx{display:none !important}
#bg-scene{position:absolute;top:-2%;bottom:-2%;left:0;width:280%;
  background:#e9e2d0 url("../img/ui6/bg_scene.webp") center/cover no-repeat;
  transform-origin:50% 50%;animation:scenepan 110s ease-in-out infinite alternate;
  will-change:transform}
@keyframes scenepan{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-28.5%,0,0)}
}
.bg-cloud{position:absolute;left:0;width:300%;pointer-events:none;
  background:url("../img/ui6/bg_cloud.webp") center/cover no-repeat;opacity:.8}
.bg-cloud.c1{top:14%;height:15%;animation:clouddrift1 52s ease-in-out infinite alternate}
.bg-cloud.c2{top:30%;height:10%;opacity:.5;animation:clouddrift2 74s ease-in-out infinite alternate}
@keyframes clouddrift1{
  0%{transform:translate3d(-7%,0,0)}
  100%{transform:translate3d(3%,0,0)}
}
@keyframes clouddrift2{
  0%{transform:translate3d(4%,0,0) scaleX(-1)}
  100%{transform:translate3d(-6%,0,0) scaleX(-1)}
}
.fly{position:absolute;pointer-events:none;opacity:.92;will-change:transform}
.fly1{top:12%;width:104px;animation:flyx1 46s linear infinite}
.fly2{top:26%;width:66px;opacity:.72;animation:flyx2 63s linear infinite;animation-delay:-26s}
@keyframes flyx1{
  0%{transform:translate3d(-140px,0,0)}
  100%{transform:translate3d(110vw,0,0)}
}
@keyframes flyx2{
  0%{transform:translate3d(110vw,0,0) scaleX(-1)}
  100%{transform:translate3d(-160px,0,0) scaleX(-1)}
}
@media (prefers-reduced-motion:reduce){
  #bg-scene,.bg-cloud,.fly{animation:none !important}
}
/* 仙鹤在浅色天空上加轻投影增强辨识度 */
.fly{filter:drop-shadow(0 1px 2px rgba(96,84,60,.38))}
/* 云带改为整图拉伸，保留羽化边（cover 会把羽化裁掉形成硬边） */
.bg-cloud{background-size:100% 100% !important}

/* ============================================================
   v7 修正十六 · 首页神将交互改版
   · 删除「更换神将」长条按钮与左右切换箭头
   · 立绘下方只留 品质 + 名称
   · 点击立绘弹窗：更换神将 / 神将信息
   ============================================================ */
.hero-nav{display:none !important}
.hero-stage{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-stage:active .hero-figure{transform:scale(.975)}
.hm-menu{display:flex;flex-direction:column;gap:11px;padding:14px 2px 2px}
.hm-item{width:100%;padding:15px 0;border-radius:16px;
  border:1.5px solid rgba(189,144,39,.55);
  background:linear-gradient(180deg,#fbf4e2,#f2e6c9);
  color:#7a5a1e;font-family:var(--kai);font-size:15px;letter-spacing:5px;
  text-indent:5px;font-weight:700;
  box-shadow:0 4px 12px rgba(150,110,40,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.hm-item:active{transform:scale(.97);background:linear-gradient(180deg,#f6ecd6,#ecdcb8)}
/* 神将信息 */
.hin{display:flex;gap:14px;align-items:center;padding:10px 2px 4px}
.hin-art{width:104px;flex:0 0 104px;height:132px;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#f6efe0,#e9dfc8);
  display:flex;align-items:center;justify-content:center}
.hin-art img{width:100%;height:100%;object-fit:contain;object-position:50% 70%}
.hin-main{flex:1;min-width:0}
.hin-main h3{margin:6px 0 6px;font-family:var(--kai);font-size:19px;letter-spacing:4px;color:#463a28}
.hin-q{margin:0 0 6px;font-size:11.5px;line-height:1.7;color:var(--ink2);letter-spacing:.5px}
.hin-set{font-size:10.5px;letter-spacing:1px;color:var(--ink3)}

/* ============================================================
   v7 修正十七 · 仙鹤拍翅动画
   · 鹤群拆为 4 组，每组生成 4 帧拍翅序列帧（程序化翅膀变形）
   · .bd 元素 background-position 逐帧硬切（steps），相位错开
   ============================================================ */
.fly{aspect-ratio:967/304;height:auto}
@keyframes flap{
  0%{background-position:0 0;animation-timing-function:steps(1,end)}
  25%{background-position:33.3333% 0;animation-timing-function:steps(1,end)}
  50%{background-position:66.6667% 0;animation-timing-function:steps(1,end)}
  75%{background-position:100% 0;animation-timing-function:steps(1,end)}
  100%{background-position:0 0}
}
.bd{position:absolute;background-repeat:no-repeat;background-size:400% 100%;
  animation:flap .85s ease-in-out infinite}
.bd.b1{left:0;top:13.82%;width:46.95%;height:83.88%;
  background-image:url("../img/ui6/flap_b1.webp")}
.bd.b2{left:39.61%;top:.99%;width:26.68%;height:52.3%;
  background-image:url("../img/ui6/flap_b2.webp");animation-duration:.8s;animation-delay:-.21s}
.bd.b3{left:56.57%;top:25.33%;width:26.27%;height:75.33%;
  background-image:url("../img/ui6/flap_b3.webp");animation-duration:.95s;animation-delay:-.5s}
.bd.b4{left:74.66%;top:25.66%;width:25.23%;height:50.99%;
  background-image:url("../img/ui6/flap_b4.webp");animation-duration:.78s;animation-delay:-.33s}
.fly2 .bd{animation-duration:.9s}
.fly2 .bd.b2{animation-delay:-.55s}
.fly2 .bd.b3{animation-delay:-.12s}
.fly2 .bd.b4{animation-delay:-.4s}

/* ============================================================
   v7 修正十八 · 无神将时首页引导按钮
   · 立绘舞台空状态放「去抽神将」，点击跳抽卡页
   ============================================================ */
.hero-stage.empty .hero-none{gap:9px}
.hero-none .hn-ico{opacity:.8;margin-bottom:2px}
.hn-cta{position:relative;margin-top:13px;padding:12px 30px;border:0;border-radius:999px;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#cf6249,#a83526);
  color:#fdf4e0;font-family:var(--kai);font-size:15px;letter-spacing:4px;
  text-indent:4px;font-weight:700;line-height:1;
  box-shadow:0 7px 18px rgba(150,55,35,.30),inset 0 1px 0 rgba(255,222,186,.55),
             inset 0 -2px 0 rgba(110,32,22,.28);
  animation:ctaBreath 2.6s ease-in-out infinite}
.hn-cta:active{transform:scale(.955)}
.hn-cta-shine{position:absolute;top:0;left:-40%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.55),transparent);
  animation:ctaShine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes ctaBreath{
  0%,100%{box-shadow:0 7px 18px rgba(150,55,35,.28),inset 0 1px 0 rgba(255,222,186,.5),
            inset 0 -2px 0 rgba(110,32,22,.28),0 0 0 0 rgba(207,98,73,.42)}
  50%{box-shadow:0 9px 22px rgba(150,55,35,.34),inset 0 1px 0 rgba(255,222,186,.6),
            inset 0 -2px 0 rgba(110,32,22,.28),0 0 0 11px rgba(207,98,73,0)}
}
@keyframes ctaShine{
  0%{left:-42%}
  55%,100%{left:112%}
}
@media (prefers-reduced-motion:reduce){
  .hn-cta,.hn-cta-shine{animation:none}
}
/* .hero-figure 带 pointer-events:none（防挡人物点击），空状态按钮需显式恢复命中 */
.hero-stage.empty .hero-none,
.hero-none .hn-cta{pointer-events:auto}