:root{--bg:#070d1f;--bg2:#0b1530;--card:#0f1b3a;--card2:#13224a;--line:#22355f;--line2:#2e4678;--ink:#e9eefb;--soft:#c4cfe8;--muted:#8fa0c6;--red:#c8202e;--blue:#1d4fb8;--gold:#d4af6a;--ok:#33c48d;--serif:"Noto Serif TC","Songti TC",serif}
*{box-sizing:border-box}
body{margin:0;background:#04081a;color:var(--ink);font:15px/1.65 "Noto Sans TC",system-ui,-apple-system,"PingFang TC",sans-serif}
a{color:#41d3ff;text-decoration:none}a:hover{text-decoration:underline}
button,input,select{font-family:inherit}button{cursor:pointer}
.hidden{display:none!important}
.app{max-width:1440px;margin:0 auto;min-height:100vh;background:transparent;position:relative;z-index:1}
/* 整頁背景：深藍漸層＋密集「ASC鏢局」斜向浮水印（純 SVG 生成，不用圖片）。--pagebg 以視窗為準固定，頂部導覽列也用同一組，接起來沒有色差 */
:root{--pagebg:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3Cdefs%3E%3Cpattern%20id='p'%20width='200'%20height='76'%20patternUnits='userSpaceOnUse'%20patternTransform='rotate(-22)'%3E%3Cg%20font-family='Noto%20Serif%20TC,Songti%20TC,PMingLiU,serif'%20font-weight='900'%20font-size='20'%20letter-spacing='3'%3E%3Ctext%20x='4'%20y='28'%20fill='rgba(160,178,220,0.10)'%3EASC%E9%8F%A2%E5%B1%80%3C/text%3E%3Ctext%20x='104'%20y='66'%20fill='rgba(200,32,46,0.16)'%3EASC%E9%8F%A2%E5%B1%80%3C/text%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width='100%25'%20height='100%25'%20fill='url(%23p)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat fixed,radial-gradient(ellipse at 50% 0%,#0d1838 0%,transparent 60%) fixed,linear-gradient(180deg,#0a1230,#060b1d 55%,#04081a) fixed}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--pagebg)}
html{background:#04081a}

/* 最上方 */
.top{position:sticky;top:0;z-index:5;background:var(--pagebg);border-bottom:1px solid rgba(46,70,120,.45);padding:8px 24px 10px;display:flex;flex-direction:column;gap:8px}
.toprow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.toprow .right-col{justify-self:end}
.status{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}.brand:hover{text-decoration:none}
.logo{width:36px;height:36px;border-radius:9px;flex:none;overflow:hidden;background:#fff;border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(200,32,46,.25)}.logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand b{font:900 16px var(--serif);letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.2em}
.wallet{display:flex;flex-direction:column;align-items:center;gap:6px}
.chip{padding:3px 9px;border-radius:999px;background:rgba(15,27,58,.55);border:1px solid rgba(34,53,95,.8);font-size:11.5px;color:var(--soft);white-space:nowrap}.chip b{color:var(--ok);font-weight:500}
.connect{min-height:38px;padding:0 14px;border:0;border-radius:11px;background:var(--red);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
/* 切換開關（NFT／Token、中／EN 共用） */
.sw{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(11,21,48,.55);border:1px solid rgba(46,70,120,.8)}
.sw .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--red);transition:transform .25s ease,background .25s}
.sw.right .thumb{transform:translateX(100%);background:var(--blue)}
.sw button{position:relative;z-index:1;border:0;background:transparent;color:var(--soft);border-radius:999px;white-space:nowrap}
.sw button[aria-pressed="true"]{color:#fff;font-weight:700}
.sw.lang{width:92px}.sw.lang .thumb{background:var(--line2)}.sw.lang.right .thumb{background:var(--line2)}
.sw.lang button{min-height:28px;font-size:12px;padding:0 8px}
.sw3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border-radius:999px;background:rgba(11,21,48,.55);border:1px solid rgba(46,70,120,.8);width:min(440px,100%);margin:0 auto}
.sw3 .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:999px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--gold);transition:transform .25s ease,background .25s}
.sw3.p-home .thumb{transform:translateX(100%)}.sw3.p-tok .thumb{transform:translateX(200%);background:var(--blue);box-shadow:none}.sw3.p-nft .thumb{background:var(--red);box-shadow:none}
.sw3 button{position:relative;z-index:1;min-height:36px;border:0;background:transparent;color:var(--soft);border-radius:999px;font-size:14px;white-space:nowrap;padding:0 8px}
.sw3 button[aria-pressed="true"]{color:#fff;font-weight:700}

/* 左邊＋右邊 */
.body{max-width:1180px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.main{min-width:0;display:flex;flex-direction:column;gap:20px}
.home{min-height:50px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--soft);font-size:16px;display:flex;align-items:center;gap:10px}
.home.on{border-color:transparent;background:var(--card2);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.subs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sub{min-height:32px;padding:0 13px;border:1px solid rgba(46,70,120,.8);border-radius:999px;background:rgba(15,27,58,.55);color:var(--soft);font-size:13.5px;white-space:nowrap}
.sub.on{border-color:transparent;background:var(--red);color:#fff;font-weight:700}
.subs[data-subs="tok"] .sub.on{background:var(--blue)}

/* 共用 */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}
.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.24em;white-space:nowrap}
h1,h2,h3{font-family:var(--serif);letter-spacing:.06em;margin:0}
h1{font-size:38px;font-weight:900;line-height:1.3}h2{font-size:26px}h3{font-size:18px}
p{margin:0}.muted{color:var(--muted)}.soft{color:var(--soft)}.small{font-size:13px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{padding:10px 12px;border-radius:10px;background:var(--card2);font-size:14px}.stat span{display:block;color:var(--muted);font-size:12px}
.btn{min-height:50px;border:0;border-radius:12px;background:var(--red);color:#fff;font-size:16px;font-weight:700;padding:0 18px}
.btn.blue{background:var(--blue)}.btn.alt{background:transparent;border:1px solid var(--line2);color:var(--ink);font-weight:500}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cats img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--card2)}
input.in{min-height:52px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:20px;width:100%}
label.f{display:flex;flex-direction:column;gap:6px}
.split{display:flex;flex-wrap:wrap;gap:20px}.split>*{flex:1 1 280px;min-width:0}
.lock{padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--soft);font-size:14px}

/* 首頁：白皮書＋故事 */
.hero{position:relative;overflow:hidden;align-items:center;text-align:center;padding:48px 24px;background:linear-gradient(180deg,rgba(7,13,31,.82),rgba(15,27,58,.97)),url("../assets/story-samurai.jpg") center/cover}
.hero p{max-width:560px}
.toc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.toc a{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--soft);font-size:14px;background:rgba(7,13,31,.6)}
.paper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.paper div{padding:16px;border-radius:14px;background:var(--card2);display:flex;flex-direction:column;gap:6px}
.paper b{font-family:var(--serif);font-size:17px;letter-spacing:.04em}
.paper p{color:var(--soft);font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:12px;border:1px solid var(--line2);color:var(--ink);background:var(--card2)}
.chap{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--card2)}
.chap .pics{display:grid;gap:6px}.chap .pics img{width:100%;border-radius:10px;display:block}
.chap .pics.four{grid-template-columns:repeat(2,minmax(0,1fr))}.chap .pics.four img{height:110px;object-fit:cover}
.chap .pics.one img{max-height:220px;object-fit:cover}
.chap .tag{color:var(--gold);font-size:12px;letter-spacing:.2em}
.chap .txt{display:flex;flex-direction:column;gap:10px;color:var(--soft);font-size:14px}
.chap .txt.short p:not(:first-child){display:none}
.chap button{align-self:flex-start;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:14px}
.chaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}


.over{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.over .cats img{border-radius:10px}
.devrow{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.avatar{width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;font:900 28px var(--serif);color:#fff;background:#8a1424;border:2px solid var(--gold)}

/* 換裝・背包・市場 */
.panelhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.eq{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.eq-left{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.eq-preview{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
.eq-slots{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px!important}
.eq-preview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.eq-slots{display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:10px;background:var(--card2);border:1px solid transparent;font-size:13px}
.slot.try{border-color:var(--gold)}.slot img{width:44px;height:44px;border-radius:8px;object-fit:cover}.slot small{display:block;color:var(--muted);font-size:11px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.tile{position:relative;border:1px solid var(--line2);border-radius:12px;background:var(--card2);padding:6px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;color:var(--ink);font-size:12px;line-height:1.3;cursor:pointer}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.tile .q{position:absolute;top:4px;right:4px;font-size:11px;padding:1px 6px;border-radius:999px;background:rgba(7,13,31,.85)}
.tile.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.rk{display:inline-block;flex:none;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;letter-spacing:.04em;white-space:nowrap}
.rk.super{background:rgba(212,175,106,.18);color:var(--gold)}.rk.rare{background:rgba(61,139,255,.18);color:#8db8ff}.rk.normal{background:rgba(143,160,198,.15);color:var(--soft)}
.lot .meta span{white-space:nowrap}
.mk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card2);color:var(--soft);font-size:14px}
.chips button.on{background:var(--red);border-color:transparent;color:#fff;font-weight:700}
.mk{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.mk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.lot{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.lot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.lot .nm{font-size:14px;font-weight:700}.lot .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.lot .pr{font:900 18px var(--serif)}.lot button{min-height:40px;border:0;border-radius:10px;background:var(--red);color:#fff;font-weight:700}
.lot.self button{background:transparent;border:1px solid var(--line2);color:var(--muted)}
.mk-side{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.mine-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px;padding:6px;border-radius:10px;background:var(--card2)}
.mine-row img{width:40px;height:40px;border-radius:8px}.mine-row button{min-height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:12px}
@media (max-width:860px){.eq,.mk{grid-template-columns:minmax(0,1fr)}}

.subnav:has(.subs:not(.hidden)){padding-top:2px}
.top .subs{margin-top:2px}
html{scroll-padding-top:220px}
.subs{scrollbar-width:none}.subs::-webkit-scrollbar{display:none}
@media (max-width:860px){.top .subs .sub{flex:1 1 0;padding:0 6px;min-width:0}}
.connect{white-space:nowrap}
.fees{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.feegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.fee{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.fee b{font-size:14px}.fee .v{font:900 18px var(--serif);color:var(--gold)}.fee .d{color:var(--soft);font-size:13px}
.vipbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:var(--card2);border:1px solid #6b5a33}
.vipbar small{display:block}
/* 技術架構 */
.arch{display:flex;flex-direction:column}
.tier{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:stretch}
.tier .lbl{border-radius:14px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;gap:2px}
.tier .lbl b{font-family:var(--serif);font-size:16px;letter-spacing:.06em}.tier .lbl span{color:var(--muted);font-size:11px;letter-spacing:.16em}
.nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.node{border-radius:14px;padding:14px;background:var(--card2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.node b{font-size:15px}.node p{color:var(--soft);font-size:13px}
.node .tags{display:flex;flex-wrap:wrap;gap:4px}.node .tags i{font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--bg2);color:var(--soft);border:1px solid var(--line)}
.node.red{border-color:#7a1a26;box-shadow:inset 3px 0 0 var(--red)}.node.blue{border-color:#1f3f86;box-shadow:inset 3px 0 0 var(--blue)}.node.gold{border-color:#6b5a33;box-shadow:inset 3px 0 0 var(--gold)}.node.old{opacity:.8;border-style:dashed}
.flow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px}
.flow div{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:10px 0;color:var(--soft);font-size:13px}
.flow span{display:inline-flex;align-items:center;gap:6px}.flow svg{flex:none;color:var(--gold)}
/* 路線圖 */
.road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.phase{border-radius:16px;padding:18px;background:var(--card2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.phase .st{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.phase.done .st{background:rgba(51,196,141,.14);color:var(--ok)}.phase.now .st{background:rgba(212,175,106,.16);color:var(--gold)}.phase.next .st{background:rgba(61,139,255,.16);color:#8db8ff}
.phase.now{border-color:#6b5a33}
.phase ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.phase li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--soft);font-size:14px}
.phase li::before{content:"";width:10px;height:10px;margin-top:6px;border-radius:50%;border:2px solid var(--line2)}
.phase.done li::before{background:var(--ok);border-color:var(--ok)}.phase.now li::before{border-color:var(--gold)}
@media (max-width:860px){.tier,.flow{grid-template-columns:minmax(0,1fr)}.flow div{justify-content:flex-start}.road{grid-template-columns:minmax(0,1fr)}}

/* 手機 */
@media (max-width:860px){
  .top{padding:10px 16px 12px}.brand small,.chip{display:none}.brand b{font-size:15px}.connect{padding:0 12px;font-size:14px}
  .body{padding:16px}.subs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .paper,.chaps,.grid4{grid-template-columns:repeat(1,minmax(0,1fr))}h1{font-size:28px}
}

/* ═════ 串接 V2 後新增 ═════ */
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.stack{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#1c2f63,#0b1530)}
.stack img{position:absolute;inset:0;width:100%!important;height:100%;object-fit:contain!important;border-radius:0!important;aspect-ratio:auto!important}
.msg{min-height:20px;font-size:14px;color:var(--soft);word-break:break-word}
.msg.ok{color:var(--ok)}.msg.bad{color:#ff8a8a}.msg a{margin-left:6px}
.note{padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);color:var(--soft);font-size:14px}
.note.warn{border-color:#6b5a33;color:#f0d9a6}
.mycats{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mycats button{position:relative;padding:6px;border-radius:14px;border:1px solid var(--line2);background:var(--card2);color:var(--ink);display:flex;flex-direction:column;gap:4px;align-items:center;font-size:12px}
.mycats button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.mycats .stack,.mycats .boxed{width:100%;border-radius:10px}
.mycats .boxed{aspect-ratio:1;display:grid;place-items:center;background:var(--bg2);border:1px dashed var(--line2);color:var(--muted);font:900 32px var(--serif)}
.mycats .chk{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:6px;background:rgba(7,13,31,.85);border:1px solid var(--line2);display:grid;place-items:center;font-size:13px}
.mycats button.on .chk{background:var(--gold);color:#070d1f;border-color:var(--gold)}
.slot{cursor:pointer;color:var(--ink);text-align:left}
.slot.off{opacity:.55}
.slot .x{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--soft)}
.slot{grid-template-columns:44px minmax(0,1fr) auto}
.tile img{background:var(--bg2)}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.results .tile{animation:pop .4s ease both}
.results .tile.miss{opacity:.45}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.chart{width:100%;height:220px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);display:block}
.chart text{fill:var(--muted);font-size:11px}
.ladder{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.ladder div{padding:8px 4px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);text-align:center;font-size:12px;color:var(--muted)}
.ladder div b{display:block;color:var(--soft);font-size:13px}
.ladder div.on{border-color:var(--gold);color:var(--gold)}.ladder div.on b{color:var(--gold)}
@media (max-width:860px){.ladder{grid-template-columns:repeat(4,minmax(0,1fr))}}
.connect.on{background:rgba(19,34,74,.6);border:1px solid rgba(46,70,120,.8)}
.chip.bad b{color:#ff8a8a}.chip.warn b{color:var(--gold)}
.ext{font-size:12px}
.lot .meta .rk{margin-right:auto}
.foot{max-width:1180px;margin:0 auto;padding:12px 24px 40px;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.foot a{color:var(--muted)}
.mycats>p,.tiles>p,.mk-list>p,.results>p{grid-column:1/-1;margin:0}
.slot.on{outline:1px solid var(--gold)}
.mycats .new{position:absolute;top:6px;right:6px;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--gold);color:#070d1f;font-weight:700}
.eq .mycats{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
@media (max-width:860px){
  .eq-preview{grid-template-columns:minmax(0,1fr)}
  .eq-preview .stack{max-width:340px;width:100%;margin:0 auto}
  .logo,.connect svg{display:none}
  .connect{min-height:36px}
  .sw.lang{width:88px}
  .hero{padding:32px 16px}
  .card{padding:18px}
  .status .chip#chVer.warn,.status .chip#chVer.bad{display:inline-block}
  .eq-slots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .vipbar>div{flex-wrap:wrap}
}
img.avatar{object-fit:cover;padding:0;background:var(--card2)}

/* ═════ 2026-11-02 導覽列：一行 品牌｜三分頁（NFT／Token 子選單在按鈕下方往右）｜錢包（下方小字狀態）＋語言 ═════ */
.top{gap:0;padding:0}
.toprow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;padding:8px 20px;align-items:center}
.toprow .brand{justify-self:start}
.toprow .mid{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.toprow .mid .sw3{margin:0;width:360px;max-width:100%}
.sw3 button{min-height:32px;font-size:13.5px}
.toprow .right{justify-self:end;display:flex;align-items:flex-start;gap:12px}
.toprow .wallet{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.toprow .right-col{justify-self:auto}
.wallet .status{display:flex;flex-wrap:nowrap;gap:4px;justify-content:flex-end;padding:0}
.wallet .status .chip{font-size:10.5px;padding:0 7px;line-height:18px;background:rgba(15,27,58,.45);border-color:rgba(34,53,95,.7)}
html{scroll-padding-top:90px}
@media (min-width:861px){
  .toprow{align-items:start}.toprow .brand{margin-top:2px}
  /* 子選單：在目前分頁按鈕正下方，左緣對齊按鈕、往右排（首頁沒有） */
  .toprow .mid .subnav{position:relative;width:100%;height:32px;margin-top:4px;padding:0;border:0;background:none}
  .toprow .mid .subnav:not(:has(.subs:not(.hidden))){display:none}
  .top .mid .subs{position:absolute;top:0;display:flex;flex-wrap:nowrap;gap:2px;margin:0;white-space:nowrap}
  .top .mid .subs[data-subs="nft"]{left:3px}
  .top .mid .subs[data-subs="tok"]{left:calc((100% - 6px)*2/3 + 3px)}
  .top .mid .sub{border:0;background:transparent;min-height:32px;border-radius:0;padding:0 12px;font-size:13.5px;color:var(--muted);white-space:nowrap}
  .top .mid .sub:hover{color:#fff}
  .top .mid .sub.on{background:transparent;color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--red)}
  .top .mid .subs[data-subs="tok"] .sub.on{box-shadow:inset 0 -2px 0 #3d8bff}
}
@media (max-width:860px){
  .toprow{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 14px 0}
  .toprow .mid{grid-column:1/-1;order:5;align-items:stretch}.toprow .mid .sw3{width:100%}
  .toprow .right{gap:8px;align-items:center}
  .wallet .status:not(:has(#chVer.warn,#chVer.bad)){display:none}
  .mid .subnav{margin:8px -14px 0;border-top:1px solid rgba(46,70,120,.35);background:rgba(4,8,26,.35)}
  .mid .subnav:not(:has(.subs:not(.hidden))){display:none}
  .top .subs{margin:0;gap:4px}
  .top .subs .sub{border:0;background:transparent;min-height:36px;border-radius:0;font-size:13.5px;color:var(--muted);padding:0 6px}
  .top .subs .sub.on{background:transparent;color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--red)}
  .top .subs[data-subs="tok"] .sub.on{background:transparent;box-shadow:inset 0 -2px 0 #3d8bff}
  .toprow:not(:has(.subs:not(.hidden))){padding-bottom:8px}
  html{scroll-padding-top:150px}
}

/* ═════ 2026-11-02 管理員面板（app/admin.js）：只有 owner／admin／operator 看得到 ═════ */
.adm-panel{border-color:#6b5a33;gap:16px}
.adm-panel.hasfab{padding-bottom:90px}
.adm-panel h2{margin:0}
.adm-head{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.adm-head>div:first-child{margin-right:auto}
.adm-ref{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--soft);font-size:19px;line-height:1}
.adm-ref:hover{color:#fff;border-color:var(--gold)}.adm-ref.spin{animation:admSpin .8s linear infinite}
@keyframes admSpin{to{transform:rotate(360deg)}}
.adm-hint{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6;background:rgba(200,32,46,.08);border:1px solid rgba(200,32,46,.4);color:var(--soft)}
.adm-panel.safe .adm-hint{background:rgba(212,175,106,.08);border-color:rgba(212,175,106,.5)}
.adm-hint b{color:#fff}
/* 權限摘要 */
.adm-roles{border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.adm-roles>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px}
.adm-roles>summary::-webkit-details-marker{display:none}
.adm-roles[open]>summary{border-bottom:1px solid var(--line)}
.adm-roles .adm-scroll{padding:4px 8px 8px}
.adm-chip{display:inline-flex;gap:6px;padding:2px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);font-size:12px;color:var(--ink)}
.adm-chip i{font-style:normal;color:var(--muted)}.adm-chip.none{opacity:.55}
.adm-more{margin-left:auto;font-size:12px;color:#41d3ff}
.adm-roles[open] .adm-more{opacity:.6}
.adm-scroll{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.adm-table th,.adm-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table th{color:var(--muted);font-weight:500}
.adm-tag{display:inline-block;padding:0 7px;border-radius:999px;background:rgba(212,175,106,.15);color:var(--gold);font-size:11px;white-space:nowrap}
/* 快速開關 */
.adm-sect-h{margin:0 0 -6px;font-size:11.5px;letter-spacing:.2em;color:var(--muted);font-weight:500}
.adm-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.adm-q{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);transition:border-color .2s,background .2s}
.adm-q>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm-q b{font-size:14.5px}.adm-q small{color:var(--muted);font-size:11px;line-height:1.5}.adm-q code{font-size:11px}
.adm-now{font-size:12px;color:var(--muted)}.adm-now.on{color:var(--ok)}
.adm-pend{font-size:12px;color:var(--gold);font-weight:700}
.adm-q.pend{border-color:var(--gold);background:rgba(212,175,106,.08)}
.adm-qmsg{font-size:12px;color:var(--soft)}.adm-qmsg:empty{display:none}.adm-qmsg.bad{color:#ff8a8a}.adm-qmsg.ok{color:var(--ok)}
/* 開關按鈕 */
.adm-sw{position:relative;display:inline-block;width:48px;height:28px;flex:none}
.adm-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.adm-sw i{position:absolute;inset:0;border-radius:999px;background:#2a3a63;border:1px solid var(--line2);transition:background .2s,border-color .2s}
.adm-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .2s ease}
.adm-sw input:checked+i{background:var(--ok);border-color:var(--ok)}
.adm-sw input:checked+i::after{transform:translateX(20px)}
.adm-sw input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
.adm-sw input:disabled{cursor:wait}.adm-sw input:disabled+i{opacity:.5}
.adm-q.pend .adm-sw input+i{background:var(--gold);border-color:var(--gold)}
.adm-swrow{display:flex;align-items:center;gap:10px;min-height:38px}
.adm-swrow em{font-style:normal;color:var(--muted);font-size:13px}
.adm-swrow em::after{content:attr(data-off)}.adm-swrow:has(input:checked) em::after{content:attr(data-on);color:var(--ok)}
/* 分頁＋搜尋 */
.adm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.adm-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:1 1 420px;min-width:0}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs button{flex:1 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--soft);font-size:14px;white-space:nowrap}
.adm-tabs button:hover{color:#fff}
.adm-tabs button[aria-selected="true"]{background:var(--card2);color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--red)}
.adm-tabs small{margin-left:6px;padding:0 6px;border-radius:999px;background:var(--line);font-size:11px;color:var(--soft);font-weight:500}
.adm-search{flex:1 1 220px;min-width:0;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:14px}
.adm-search:focus{outline:none;border-color:var(--gold)}
/* 角色切換（右上）：選哪個身分＝顯示哪些功能＋直接送／加入批次 */
.adm-role{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--bg2);border:1px solid var(--line2)}
.adm-role button{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:120px;padding:6px 14px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--soft);text-align:left;transition:background .2s,border-color .2s}
.adm-role button b{display:flex;align-items:center;gap:6px;font-size:14px}
.adm-role button b small{padding:0 6px;border-radius:999px;background:var(--line);font-size:11px;font-weight:500;color:var(--soft)}
.adm-role button span{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.adm-role button em{font-style:normal;font-size:11px;color:var(--muted)}
.adm-role button:hover{background:rgba(255,255,255,.03)}
.adm-role button[aria-pressed="true"]{color:#fff}
.adm-role button[aria-pressed="true"] span,.adm-role button[aria-pressed="true"] em{color:rgba(255,255,255,.85)}
.adm-role button[data-r="admin"][aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.adm-role button[data-r="operator"][aria-pressed="true"]{background:#1f5fc4;border-color:#3d8bff}
.adm-role button[data-r="owner"][aria-pressed="true"],.adm-role button[data-r="pending"][aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#111}
.adm-role button[data-r="owner"][aria-pressed="true"] *,.adm-role button[data-r="pending"][aria-pressed="true"] *{color:#111}
.adm-role button[data-r="owner"][aria-pressed="true"] small,.adm-role button[data-r="pending"][aria-pressed="true"] small{background:rgba(0,0,0,.15)}
.adm-hint code{font-size:12px;color:var(--soft)}
.adm-tabs button.dim{opacity:.45}
.adm-who{margin-left:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:0;color:var(--muted)}
.adm-pane{display:flex;flex-direction:column;gap:14px}
.adm-pane-h{display:none;margin:4px 0 0;font-size:15px}
.adm-addr{margin-bottom:-6px}
.searching .adm-pane-h{display:block}.searching .adm-state,.searching .adm-addr{display:none}
.adm-state{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.adm-state>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--card2);font-size:12px}
.adm-state span{color:var(--muted)}.adm-state b{font-size:13px;color:var(--ink);word-break:break-all}
.adm-state b.on{color:var(--ok)}.adm-state b.off{color:#ff8a8a}
.adm-grp h4{margin:0 0 8px;font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:500}
.adm-grp[data-lv="owner"] h4{color:var(--gold)}.adm-grp[data-lv="operator"] h4{color:#7fc0ff}
.adm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
/* 每個函式一張方塊；.form＝點了開彈跳視窗 */
.adm-act{display:flex;flex-direction:column;gap:10px;min-height:132px;padding:14px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);transition:border-color .2s,background .2s,transform .15s}
.adm-act.form{cursor:pointer}
.adm-act.form:hover,.adm-act.form:focus-visible{border-color:var(--gold);background:var(--card);outline:none}
.adm-act.form:active{transform:scale(.985)}
.adm-act .tt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-act .tt b{font-size:14.5px;line-height:1.4}
.adm-act .tt code{font-size:11px;color:var(--muted)}
.adm-act .tt p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adm-act .tb{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.adm-act .tb .adm-btns{width:100%}
.adm-act .tb .adm-btns button{flex:1;min-height:36px;padding:0 10px;font-size:13px}
.adm-pn{font-size:12px;color:var(--soft)}
.adm-draft{font-size:11px;padding:0 7px;border-radius:999px;background:rgba(65,211,255,.12);color:#41d3ff}
.adm-go{margin-left:auto;font-size:13px;font-weight:700;color:var(--gold)}
.adm-act.danger{border-color:rgba(200,32,46,.55)}.adm-act.danger .tt b{color:#ff9a9a}
.adm-act.danger.form:hover{border-color:var(--red)}
.adm-act .adm-msg{font-size:12px}
.adm-only{font-size:11px;color:var(--gold);padding:0 7px;border-radius:999px;border:1px solid rgba(212,175,106,.45)}
.adm-panel.safe .adm-only{display:none}
/* 參數彈跳視窗 */
.adm-dlg.wide{width:min(600px,100%)}
.adm-dh{display:flex;align-items:flex-start;gap:12px}.adm-dh>div{flex:1;min-width:0}
.adm-dh .x{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--soft)}
.adm-ddesc{padding:10px 12px;border-radius:10px;background:var(--card);font-size:13px;color:var(--soft)}
.adm-dlg .adm-msg:empty{display:none}
.adm-panel:not(.safe) .adm-act.both .adm-add{display:none}
.adm-panel.safe .adm-act.both .adm-send{display:none}
.adm-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.adm-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.adm-f.wide{grid-column:1/-1}
.adm-f input,.adm-f textarea,.adm-lookrow input{width:100%;min-height:40px;padding:8px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.adm-f input:focus,.adm-f textarea:focus,.adm-lookrow input:focus{outline:none;border-color:var(--gold)}
.adm-btns{display:flex;flex-wrap:wrap;gap:8px}
.adm-btns button,.adm-lookrow button,.adm-rf{min-height:40px;padding:0 18px;border:0;border-radius:10px;background:var(--red);color:#fff;font-size:14px;font-weight:700}
.adm-btns .adm-add,.adm-rf.cart{background:var(--gold);color:#111}
.adm-btns .alt,.adm-cart footer .alt{background:transparent;border:1px solid var(--line2);color:var(--soft)}
.adm-btns button:disabled,.adm-cart button:disabled{opacity:.4;cursor:not-allowed}
.adm-rf{min-height:34px;padding:0 12px;font-size:13px;white-space:nowrap}
.adm-msg:empty{display:none}
.adm-look{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.adm-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.adm-lookrow{display:flex;gap:8px}.adm-lookrow input{flex:1;min-width:0}
.adm-state:empty{display:none}
/* 批次（購物車） */
.adm-fab{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:8px;min-height:54px;padding:0 20px;border:0;border-radius:999px;background:var(--gold);color:#111;font-weight:800;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.2)}
.adm-fab:hover{filter:brightness(1.08)}
.adm-fab b{min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:13px}
.adm-fab.bump{animation:admBump .45s ease}
@keyframes admBump{30%{transform:scale(1.18)}65%{transform:scale(.94)}}
.adm-cart-bg{position:fixed;inset:0;z-index:41;background:rgba(2,5,15,.6);opacity:0;pointer-events:none;transition:opacity .2s}
.adm-cart{position:fixed;top:0;right:0;bottom:0;z-index:42;width:min(460px,100%);background:var(--bg2);border-left:1px solid var(--line2);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s ease;box-shadow:-12px 0 40px rgba(0,0,0,.5)}
#admCartRoot.open .adm-cart{transform:none}#admCartRoot.open .adm-cart-bg{opacity:1;pointer-events:auto}
.adm-cart header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:16px}
.adm-cart header .x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--soft);font-size:14px}
.adm-steps{margin:0;padding:12px 18px 12px 38px;font-size:12px;line-height:1.7;color:var(--muted);border-bottom:1px solid var(--line);background:rgba(212,175,106,.04)}
.adm-cart-body{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:18px}
.adm-cart footer{padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:8px}
.adm-cart footer button{flex:1;min-height:42px;border-radius:10px;font-size:14px;font-weight:700}
.adm-cgh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-bottom:8px}
.adm-items{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.adm-items li{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);animation:pop .2s}
.adm-items li.danger{border-color:rgba(200,32,46,.6)}
.adm-items .no{flex:none;width:22px;height:22px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-size:11px;color:var(--soft)}
.adm-items .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm-items .bd b{font-size:14px}.adm-items .bd small{font-size:11px;color:var(--muted)}
.adm-items .ops{display:flex;flex-direction:column;gap:4px}
.adm-items .ops button{width:30px;height:26px;border-radius:7px;border:1px solid var(--line2);background:transparent;color:var(--soft);font-size:12px;padding:0}
.adm-items .ops button:disabled{opacity:.25;cursor:default}
.adm-items .ops .rm:hover{color:#ff8a8a;border-color:#ff8a8a}
.adm-dl2{margin:4px 0 0;display:flex;flex-direction:column;gap:3px;font-size:12px}
.adm-dl2 div{display:flex;gap:10px}.adm-dl2 dt{color:var(--muted);flex:0 0 auto;max-width:45%}
.adm-dl2 dd{margin:0;color:var(--ink);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.adm-dlbtn{width:100%;min-height:46px;border:0;border-radius:12px;background:var(--gold);color:#111;font-weight:800;font-size:15px}
.adm-empty{text-align:center;padding:40px 10px;color:var(--soft);display:flex;flex-direction:column;gap:6px}
.adm-empty div{font-size:44px;opacity:.45}
/* 確認框、提示 */
.adm-modal{position:fixed;inset:0;z-index:60;background:rgba(2,5,15,.72);display:grid;place-items:center;padding:16px}
.adm-dlg{width:min(480px,100%);max-height:90vh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;animation:pop .18s;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.adm-dlg.danger{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 20px 60px rgba(0,0,0,.6)}
.adm-dlg h3{margin:0;font-size:18px}.adm-dlg code{font-size:12px}
.adm-dlg .adm-dl2{padding:10px 12px;border-radius:10px;background:var(--card);font-size:13px}
.adm-warn{color:#ff8a8a;font-size:13px}
.adm-dlg .adm-btns{justify-content:flex-end}
.adm-toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.adm-toast{pointer-events:auto;padding:10px 16px;border-radius:12px;background:#13224a;border:1px solid var(--line2);color:var(--ink);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.55);animation:pop .2s;transition:opacity .35s}
.adm-toast.ok{border-color:var(--ok)}.adm-toast.bad{border-color:#ff8a8a}.adm-toast.out{opacity:0}.adm-toast a{margin-left:10px}
@media (max-width:640px){
  .adm-head>div:first-child{flex:1 1 auto}
  .adm-quick{grid-template-columns:minmax(0,1fr)}
  .adm-state{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-tabs{flex-basis:100%}
  .adm-role{flex:1 1 100%;order:3;min-width:0}.adm-role button>*{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adm-role button{flex:1 1 0;min-width:0;padding:6px 8px}.adm-role button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .adm-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));min-height:50px;padding:0 16px}
  .adm-toasts{bottom:84px}
  .adm-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.adm-act{min-height:118px;padding:12px}.adm-act .tt p{-webkit-line-clamp:2}
}

/* 連到 owner／admin／operator 錢包時，中間的「首頁」換成紫色「管理介面」（首頁改從左上角標誌回去） */
.sw3.p-admin .thumb{opacity:0}
.sw3.adm.p-admin .thumb{opacity:1;transform:translateX(100%);background:#8b5cf6;box-shadow:none}
.sw3.adm.p-home .thumb{opacity:0}
.sw3.adm button[data-go="admin"]{color:#c4b0ff;font-weight:700}
.sw3.adm button[data-go="admin"][aria-pressed="true"]{color:#fff}
.navrow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.navrow .sw3{margin:0}
@media (max-width:760px){.navrow .sw3{flex:1;width:auto}}
.note.perk{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid var(--gold);background:linear-gradient(135deg,rgba(212,175,106,.18),rgba(212,175,106,.05));color:var(--ink);font-size:13.5px;line-height:1.6}
.note.perk b{color:var(--gold);font-size:14.5px;letter-spacing:.04em}

/* ───── 轉蛋頁：舊天堂風格（index.html 的 .lg、app/nft.js 的 renderGacha／renderLog）
   石頭與皮革的深色面板＋銅金雙框、NPC 對話、寶箱、物品欄格子、黑底系統訊息。
   物品名稱顏色：普通白、稀有藍、超稀有金（像祝福道具） ───── */
.lg{--lt:#efe6d2;--ld:#a8987a;--lgold:#e8c27a;--lbr:#8b6a35;--lsup:#ffd257;--lrare:#6cb6ff;--lnor:#ece6da;display:flex;flex-direction:column;gap:12px;font-family:"Noto Sans TC",system-ui,sans-serif}
.lg-win,.lg-box,.gfx-in{position:relative;color:var(--lt);border:1px solid #000;border-radius:3px;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,90,50,.18),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.035) 2px 4px),linear-gradient(180deg,#241c13,#17120c);
  box-shadow:inset 0 0 0 1px #8b6a35,inset 0 0 0 3px #120d08,inset 0 0 0 4px #5a4322,inset 0 0 24px rgba(0,0,0,.7),0 10px 28px rgba(0,0,0,.55)}
.lg-win{padding:0 14px 14px;display:flex;flex-direction:column;gap:14px}
.lg-win::before,.lg-win::after{content:"";position:absolute;top:-5px;width:10px;height:10px;background:linear-gradient(135deg,#ffe3a0,#9b7433);border:1px solid #000;transform:rotate(45deg)}
.lg-win::before{left:-5px}.lg-win::after{right:-5px}
.lg-title,.gfx-head{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 -14px;padding:9px 14px;border-bottom:1px solid #000;box-shadow:inset 0 -1px 0 #5a4322;background:linear-gradient(180deg,#4a2418,#2a140d 60%,#1b0d08)}
.lg-title b,.gfx-head b{font:900 18px var(--serif);letter-spacing:.14em;color:var(--lgold);text-shadow:0 1px 0 #000,0 0 10px rgba(232,194,122,.45)}
.lg-title i,.gfx-head i{font-style:normal;font-size:10px;color:#b88a3e}
.lg-main{display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:14px;align-items:stretch}
/* 內框（凹進去的面板） */
.lg-npc,.lg-stat,.lg-sec,.lg-log{border:1px solid #000;box-shadow:inset 0 0 0 1px #3d2f1c,inset 0 2px 10px rgba(0,0,0,.6);background:rgba(10,7,4,.55);border-radius:2px}
.lg-npc{display:flex;align-items:flex-start;gap:12px;padding:12px}
.lg-face{width:76px;height:76px;flex:none;padding:2px;border:1px solid #000;background:linear-gradient(135deg,#e8c27a,#6b4e22);box-shadow:0 0 0 1px #3d2f1c}
.lg-face img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.lg-say b{display:block;color:var(--lgold);font:700 14px var(--serif);letter-spacing:.06em;margin-bottom:4px}
.lg-say p{margin:0;font-size:13.5px;line-height:1.75;color:var(--lt)}
/* 寶箱 */
.lg-stage{position:relative;display:grid;place-items:end center;min-height:200px;padding-bottom:18px;overflow:hidden;border-radius:2px;background:radial-gradient(ellipse at 50% 78%,rgba(255,196,90,.32),rgba(255,160,60,.08) 38%,transparent 66%)}
.lg-ped{position:absolute;left:50%;bottom:8px;width:170px;height:22px;margin-left:-85px;border-radius:50%;background:radial-gradient(ellipse,#3a2d1d,#16100a 70%);border:1px solid #000;box-shadow:inset 0 2px 0 #5a4322}
.lg-chest{position:relative;z-index:1;width:138px;height:108px;margin-bottom:6px;animation:lgBob 3.2s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,190,90,.35))}
.lg-chest i{position:absolute;display:block}
.lg-chest .lid{left:0;right:0;top:0;height:44%;border:2px solid #1a0f06;border-radius:46% 46% 4px 4px/70% 70% 4px 4px;transform-origin:50% 100%;
  background:linear-gradient(90deg,transparent 14%,#c99a45 14% 21%,transparent 21% 79%,#c99a45 79% 86%,transparent 86%),linear-gradient(180deg,#9a5a2c,#6a3818 60%,#4b250f)}
.lg-chest .base{left:0;right:0;bottom:0;height:58%;border:2px solid #1a0f06;border-radius:3px 3px 6px 6px;
  background:linear-gradient(90deg,transparent 14%,#c99a45 14% 21%,transparent 21% 79%,#c99a45 79% 86%,transparent 86%),repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 14px,rgba(0,0,0,.28) 14px 16px),linear-gradient(180deg,#83461f,#5a2e12)}
.lg-chest .base::after{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:6px;background:linear-gradient(180deg,#f0cc7c,#a87a2e);border:1px solid #1a0f06}
.lg-chest .lock{z-index:2;left:50%;top:34%;width:24px;height:28px;margin-left:-12px;border:2px solid #1a0f06;border-radius:4px 4px 8px 8px;background:radial-gradient(circle at 50% 42%,#1a0f06 3px,transparent 4px),linear-gradient(180deg,#ffe29a,#c08a32)}
.lg-chest.big{width:176px;height:138px}
.lg-motes{position:absolute;inset:0}
.lg-motes i{position:absolute;bottom:40px;width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px 2px var(--c);opacity:0;animation:lgRise 4s ease-in infinite}
/* 數值（像角色狀態視窗） */
.lg-stat{display:flex;flex-direction:column;gap:8px;padding:12px}
.lg-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:2px 0 6px;border-bottom:1px dotted #4a3a22;font-size:14px;color:var(--ld)}
.lg-row b{color:var(--lgold);font:700 17px var(--serif);text-shadow:0 1px 0 #000}
.lg-row.lg-dim{border:0;font-size:12.5px;padding:0}
.lg-ctrl{display:flex;gap:8px}
.lg-ctrl>*{flex:1 1 0;min-width:0}
.lg-ctrl select{flex:0 0 70px;min-height:42px;padding:0 8px;color:var(--lt);background:#0b0805;border:1px solid #000;box-shadow:inset 0 0 0 1px #4a3a22;border-radius:2px;font-size:15px}
.lg-btn{min-height:42px;padding:0 10px;border:1px solid #000;border-radius:2px;color:var(--lgold);font:700 15px var(--serif);letter-spacing:.06em;text-shadow:0 1px 0 #000;
  background:linear-gradient(180deg,#5b4a33,#3a2e1f 48%,#2a2016 52%,#1f170f);box-shadow:inset 0 1px 0 rgba(255,235,190,.28),inset 0 0 0 1px #6e5530;transition:filter .12s}
.lg-btn:hover:not(:disabled){filter:brightness(1.25)}
.lg-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 0 0 1px #6e5530}
.lg-btn.gold{color:#2a1a06;text-shadow:0 1px 0 rgba(255,240,200,.5);background:linear-gradient(180deg,#ffe4a0,#e1b05a 48%,#b98432 52%,#8e6222);box-shadow:inset 0 1px 0 #fff3cf,inset 0 0 0 1px #6b4a18,0 0 12px rgba(232,194,122,.35)}
.lg-btn:disabled{filter:grayscale(.55) brightness(.78);opacity:.8;cursor:not-allowed}
.lg .note.warn{border-radius:2px}
/* 物品欄格子（大獎、普通、抽到的） */
.lg-sec{padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px}
.lg-sech{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.lg-sech>b{color:var(--lgold);font:900 15px var(--serif);letter-spacing:.1em;text-shadow:0 1px 0 #000}
.lg-odds{font-size:12.5px;color:var(--ld)}
.lg-odds .rk{background:none;padding:0;font-size:12.5px;color:#8f8f8f}.lg-odds .rk.super{color:var(--lsup)}.lg-odds .rk.rare{color:var(--lrare)}.lg-odds .rk.normal{color:var(--lnor)}
.lg-rail{position:relative;display:flex;align-items:center;gap:6px}
.lg-strip{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#5a4322 transparent;padding:4px 2px 6px}
.lg-strip .tile{flex:0 0 92px;scroll-snap-align:start}
.lg-arrow{flex:none;width:26px;height:56px;border:1px solid #000;border-radius:2px;color:var(--lgold);font-size:11px;background:linear-gradient(180deg,#4a3b28,#221a11);box-shadow:inset 0 0 0 1px #5a4322}
.lg-arrow:disabled{opacity:.3;cursor:default}
.lg .tile.lg-t,.lg-bag .tile{border:1px solid #000;border-radius:2px;padding:5px 4px 6px;gap:4px;color:var(--lnor);background:linear-gradient(180deg,#120e09,#0a0704);box-shadow:inset 0 0 0 1px #3d2f1c;font-size:12px;cursor:default}
.lg .tile img{border-radius:0;border:1px solid #000;box-shadow:inset 0 0 0 1px #2a2016;background:radial-gradient(circle,#2a2016,#0d0a06);image-rendering:auto}
.lg .tile .rk{background:none;padding:0;font-weight:500;font-size:10.5px;letter-spacing:.06em}
.lg .tile .q{top:7px;right:6px;border-radius:2px;background:rgba(0,0,0,.8);color:var(--lgold);font-size:10.5px;padding:0 4px;border:1px solid #3d2f1c}
.lg .tile.rare,.gfx-prize .rk.rare{color:var(--lrare)}
.lg .tile.rare{box-shadow:inset 0 0 0 1px #2c5c9a,0 0 10px -3px var(--lrare)}
.lg .tile.rare .rk{color:var(--lrare)}
.lg .tile.super{color:var(--lsup);box-shadow:inset 0 0 0 1px #a8802c,0 0 14px -2px var(--lsup);background:linear-gradient(180deg,rgba(255,210,87,.12),#0a0704 60%)}
.lg .tile.super .rk{color:var(--lsup)}
.lg .tile.super img{animation:lgGlow 2.4s ease-in-out infinite}
.lg .tile.normal .rk{color:var(--ld)}
.lg .tile.miss{justify-content:center;color:#8a8170;min-height:100%}
.lg .tile.miss b{font:900 26px var(--serif);color:#6b6252}
.lg-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;padding-top:10px}
/* 系統訊息（黑底聊天框） */
.lg-log{padding:0 0 8px;background:rgba(0,0,0,.72)}
.lg-logh{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid #3d2f1c}
.lg-logh span{margin-top:6px;padding:3px 12px;font-size:12px;color:var(--ld);border:1px solid #3d2f1c;border-bottom:0;border-radius:3px 3px 0 0;background:#120d08}
.lg-logh span.on{color:var(--lgold);background:#241a10}
.lg-lines,.gfx-log{max-height:150px;overflow-y:auto;padding:6px 12px 0;font-size:13.5px;line-height:1.7;text-shadow:1px 1px 0 #000;scrollbar-width:thin;scrollbar-color:#5a4322 transparent}
.lg-lines p,.gfx-log p{margin:0}
.lg-lines .sys,.gfx-log .sys{color:#c8f08f}
.lg-lines .got,.gfx-log .got{color:#f2f2f2}
.lg-lines .miss,.gfx-log .miss{color:#8f8f8f}
.lg-lines .ann,.gfx-log .ann{color:var(--lsup,#ffd257);font-weight:700;animation:lgAnn 1.6s ease-in-out 3}
.it{font-weight:700}.it.super{color:#ffd257}.it.rare{color:#6cb6ff}.it.normal{color:#fff}
.lg-log .msg{padding:0 12px;font-size:13.5px;text-shadow:1px 1px 0 #000;min-height:0}
.lg-log .msg:not(:empty){padding-top:2px}
.lg-got{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;padding:0 10px}
.lg-got:not(:empty){padding-top:8px}
.lg-got .tile{animation:gfxDrop .35s cubic-bezier(.3,1.4,.6,1) both}
/* 公告、普通配件 */
.lg-box{padding:10px 16px 12px}
.lg-box summary{cursor:pointer;min-height:28px;color:var(--lgold);font:700 14.5px var(--serif);letter-spacing:.06em;text-shadow:0 1px 0 #000}
.lg-tips ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.7;color:var(--lt)}
.lg-tips li::marker{color:#b88a3e}
@media (max-width:760px){
  .lg-main{grid-template-columns:minmax(0,1fr)}
  .lg-stage{min-height:170px;order:-1}
  .lg-win{padding:0 10px 10px}.lg-title{margin:0 -10px}
  .lg-title b{font-size:16px;letter-spacing:.08em}
  .lg-strip .tile{flex-basis:84px}
  .lg-arrow{display:none}
  .lg-face{width:58px;height:58px}
  .lg-box{padding:10px 12px}
}
@keyframes lgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lgRise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-140px) scale(1.1)}}
@keyframes lgGlow{0%,100%{filter:none}50%{filter:brightness(1.18) drop-shadow(0 0 6px #ffd257)}}
@keyframes lgAnn{0%,100%{text-shadow:1px 1px 0 #000}50%{text-shadow:1px 1px 0 #000,0 0 10px #ffd257}}

/* ───── 轉蛋動畫（app/nft.js 的 FX）：寶箱搖晃發光（等上鏈）→ 一個個小寶箱落下、搖晃、掀蓋；下方系統訊息逐行出現
   普通白、稀有藍、超稀有金＋光芒＋全畫面閃光＋公告 ───── */
.gfx{--lsup:#ffd257;position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,rgba(40,24,8,.75),rgba(3,2,1,.9));animation:gfxIn .25s ease both}
.gfx-in{width:min(580px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px 16px}
.gfx-head{align-self:stretch;margin:0 -16px}
.gfx-head{position:relative;padding-right:46px;padding-left:46px}
.gfx-x{position:absolute;right:8px;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;padding:0;border:1px solid #000;border-radius:2px;color:#e8c27a;font-size:14px;line-height:1;background:linear-gradient(180deg,#5b4a33,#2a2016 52%,#1f170f);box-shadow:inset 0 1px 0 rgba(255,235,190,.28),inset 0 0 0 1px #6e5530}
.gfx-x:hover{filter:brightness(1.3);color:#fff}
.gfx.fail .lg-chest{filter:grayscale(.85) brightness(.6);animation:none}
.gfx.fail .lg-chest .lid{animation:none}
.gfx.fail .gfx-rays{display:none}
.gfx.fail .gfx-txt b{color:#ff8a7a}
.gfx-txt a{color:#e8c27a;text-decoration:underline}
.gfx-txt{margin:0;text-align:center;color:#efe6d2;font-size:14px;line-height:1.6;text-shadow:1px 1px 0 #000}
.gfx-txt b{color:#ffd257;font:900 20px var(--serif)}
.gfx-txt .rk{background:none}
.gfx-btns{display:flex;gap:10px;justify-content:center;width:100%}
.gfx-btns .btn{min-width:120px;min-height:42px;border:1px solid #000;border-radius:2px;font:700 15px var(--serif);letter-spacing:.08em;color:#2a1a06;background:linear-gradient(180deg,#ffe4a0,#e1b05a 48%,#b98432 52%,#8e6222);box-shadow:inset 0 1px 0 #fff3cf,inset 0 0 0 1px #6b4a18}
.gfx-btns .btn.alt{color:#e8c27a;background:linear-gradient(180deg,#5b4a33,#2a2016 52%,#1f170f);box-shadow:inset 0 1px 0 rgba(255,235,190,.28),inset 0 0 0 1px #6e5530}
.gfx-mach{position:relative;width:220px;height:190px;flex:none;display:grid;place-items:end center}
.gfx.res .gfx-mach{display:none}
.gfx-rays{position:absolute;left:50%;bottom:92px;width:0;height:0}
.gfx-rays i{position:absolute;left:-9px;bottom:0;width:18px;height:120px;transform-origin:50% 100%;transform:rotate(var(--r));background:linear-gradient(0deg,rgba(255,220,130,.85),transparent);opacity:0;animation:gfxBeam 1.1s ease-in-out infinite;border-radius:50% 50% 0 0}
.gfx.spin .lg-chest{animation:gfxShake .22s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,200,100,.7))}
.gfx.spin .lg-chest .lid{animation:gfxLid .9s ease-in-out infinite}
.gfx-res{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%}
.gfx-res:empty{display:none}
.gfx-res.one{grid-template-columns:minmax(0,200px);justify-content:center}
.gfx-card{--tc:#d8d0c0;position:relative;isolation:isolate;aspect-ratio:3/4;display:grid;place-items:center;animation:gfxDrop .38s cubic-bezier(.3,1.4,.6,1) both}
.gfx-card.t-normal{--tc:#ece6da}.gfx-card.t-rare{--tc:#6cb6ff}.gfx-card.t-super{--tc:#ffd257}.gfx-card.t-miss{--tc:#6b6252}
/* 小寶箱（top＝蓋、bot＝箱身） */
.gfx-cap{position:absolute;left:14%;right:14%;top:50%;aspect-ratio:5/4;transform:translateY(-55%);display:flex;flex-direction:column;transition:filter .3s}
.gfx-cap i{display:block;border:2px solid #1a0f06}
.gfx-cap .top{flex:0 0 42%;border-radius:46% 46% 3px 3px/70% 70% 3px 3px;transform-origin:50% 100%;background:linear-gradient(90deg,transparent 16%,#c99a45 16% 24%,transparent 24% 76%,#c99a45 76% 84%,transparent 84%),linear-gradient(180deg,#9a5a2c,#5a2e12)}
.gfx-cap .bot{flex:1;margin-top:-2px;border-radius:2px 2px 5px 5px;background:radial-gradient(circle at 50% 22%,#ffe29a 0 4px,#1a0f06 5px,transparent 6px),linear-gradient(90deg,transparent 16%,#c99a45 16% 24%,transparent 24% 76%,#c99a45 76% 84%,transparent 84%),linear-gradient(180deg,#83461f,#5a2e12)}
.gfx-card.shake .gfx-cap{animation:gfxWob .12s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px var(--tc))}
.gfx-card.t-rare.shake .gfx-cap{animation-duration:.09s;filter:drop-shadow(0 0 16px var(--tc))}
.gfx-card.t-super.shake .gfx-cap{animation-duration:.06s;filter:drop-shadow(0 0 24px var(--tc)) drop-shadow(0 0 6px #fff)}
.gfx-card.open .gfx-cap{animation:gfxCapOut .5s .15s ease-in forwards}
.gfx-card.open .top{animation:gfxLidOpen .3s ease-out forwards}
.gfx-prize{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12px;line-height:1.3;color:var(--tc);text-shadow:1px 1px 0 #000;opacity:0;transform:scale(.3)}
.gfx-card.open .gfx-prize{animation:gfxPop .5s .2s cubic-bezier(.3,1.6,.5,1) forwards}
.gfx-prize img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;border:1px solid #000;outline:1px solid var(--tc);outline-offset:-3px;background:radial-gradient(circle,#2a2016,#0d0a06);box-shadow:0 0 18px -2px var(--tc)}
.gfx-prize .rk{background:none;padding:0;color:var(--tc)}
.gfx-prize b{font:900 34px var(--serif);color:#6b6252;line-height:1}
.gfx-card.t-miss.open .gfx-prize{opacity:.6}
.gfx-res.one .gfx-prize{font-size:15px}
.gfx-card.open.t-rare::before,.gfx-card.open.t-super::before{content:"";position:absolute;inset:-22%;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--tc) 0 9deg,transparent 9deg 24deg);opacity:.45;-webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);animation:gfxRays 5s linear infinite,gfxIn .4s ease both}
.gfx-card.open.t-super::before{opacity:.8;animation-duration:3s,.4s}
.gfx-card.open.t-super::after{content:"";position:absolute;left:30%;right:30%;bottom:40%;height:220%;z-index:-1;background:linear-gradient(0deg,rgba(255,220,120,.7),transparent);filter:blur(6px);animation:gfxPillar 1.2s ease-out forwards}
.gfx-spark{position:absolute;left:50%;top:42%;width:6px;height:6px;margin:-3px;background:var(--tc);transform:rotate(45deg);box-shadow:0 0 8px var(--tc);pointer-events:none;animation:gfxSpark .8s ease-out forwards}
.gfx-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,230,160,.85),rgba(232,194,122,.25) 45%,transparent 75%);animation:gfxFlash .8s ease-out forwards}
.gfx-log{align-self:stretch;max-height:120px;padding:6px 12px;background:rgba(0,0,0,.75);border:1px solid #000;box-shadow:inset 0 0 0 1px #3d2f1c;border-radius:2px}
.gfx.fast *,.gfx.fast *::before,.gfx.fast *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){.gfx *,.gfx *::before,.gfx *::after,.lg *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
@media (max-width:420px){.gfx-res{gap:6px}.gfx-res:not(.one) .gfx-prize{font-size:10px}.gfx-res:not(.one) .gfx-prize .rk{display:none}.gfx-in{padding:0 10px 12px}.gfx-head{margin:0 -10px}}
@keyframes gfxIn{from{opacity:0}to{opacity:1}}
@keyframes gfxShake{0%,100%{transform:rotate(-3deg) translateX(-2px)}50%{transform:rotate(3deg) translateX(2px)}}
@keyframes gfxLid{0%,100%{transform:rotateX(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
@keyframes gfxBeam{0%,100%{opacity:0}50%{opacity:.75}}
@keyframes gfxDrop{from{opacity:0;transform:translateY(-46px) scale(.6)}to{opacity:1;transform:none}}
@keyframes gfxWob{from{transform:translateY(-55%) rotate(-8deg)}to{transform:translateY(-55%) rotate(8deg)}}
@keyframes gfxLidOpen{to{transform:translateY(-30%) rotate(-28deg)}}
@keyframes gfxCapOut{to{opacity:0;transform:translateY(-10%) scale(.8)}}
@keyframes gfxPop{to{opacity:1;transform:none}}
@keyframes gfxRays{to{transform:rotate(360deg)}}
@keyframes gfxSpark{from{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(45deg) scale(.2)}}
@keyframes gfxFlash{from{opacity:1}to{opacity:0}}
@keyframes gfxPillar{0%{opacity:0;transform:scaleY(.2)}30%{opacity:1}100%{opacity:.35;transform:scaleY(1)}}


/* 換裝：VIP 公庫存（衣櫃） */
.eq-stockh{grid-column:1/-1;margin:6px 0 0;color:var(--gold);font-weight:700}
.tile.stock{border-style:dashed;border-color:rgba(212,175,106,.55)}
.tile.stock .q.free{background:rgba(51,196,141,.18);color:var(--ok)}
.tile.stock.locked{opacity:.5;filter:grayscale(.4)}

/* ═════ 圖鑑（#nft/all）：全部喵武士組合後的樣子 ═════ */
.mycats.gal{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.mycats.gal button{font-size:13px}
.mycats.gal .mine{position:absolute;top:6px;left:6px;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--red);color:#fff;font-weight:700}
.gal-detail{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;padding:14px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.gal-detail .stack,.gal-detail .boxed{width:100%}
.gal-detail .boxed{aspect-ratio:1;object-fit:cover;border-radius:14px}
.gal-info{display:flex;flex-direction:column;gap:10px;min-width:0}
.gal-info h3{margin:0;font:900 24px/1.2 var(--serif)}
.gal-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gal-part{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:12px;background:var(--card2);border:1px solid var(--line2);font-size:13px}
.gal-part img{width:44px;height:44px;border-radius:8px;background:var(--bg2);object-fit:contain}
.gal-part small{display:block;color:var(--muted);font-size:11px}
.gal-act{display:flex;flex-wrap:wrap;gap:8px}
.gal-act .btn{flex:1 1 140px;text-align:center;text-decoration:none}
@media (max-width:860px){.gal-detail{grid-template-columns:minmax(0,1fr)}.gal-detail .stack,.gal-detail .boxed{max-width:340px;margin:0 auto}}
a.btn{display:inline-flex;align-items:center;justify-content:center}
/* 換裝頁步驟（② 部位、③ 配件） */
.eq-step{grid-column:1/-1;margin:0;color:var(--gold);font-weight:700;font-size:13px}
.slot.on{outline:2px solid var(--gold);background:rgba(212,175,106,.12)}
.eq-tabs button small{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px;font-weight:700}
.eq-tabs button.try:not(.on){border-color:var(--gold);color:var(--gold)}
.eq-stockh.mine{color:var(--soft)}
/* 換裝頁縮小（2026-11-05 使用者：要往下滑才看得到配件）：預覽縮小，部位與配件清單都放在預覽右邊，一個畫面看完 */
.eq-preview{grid-template-columns:minmax(0,260px) minmax(0,1fr)!important;gap:14px!important}
.eq-right{display:flex;flex-direction:column;gap:8px;min-width:0}
.eq-slots{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:6px!important}
.eq-slots .slot{grid-template-columns:32px minmax(0,1fr) auto;padding:5px 6px;font-size:12.5px;position:relative}
.eq-slots .slot img,.eq-slots .slot .boxed{width:32px!important;height:32px!important}
.eq-slots .slot small{font-size:10.5px}
.eq-slots .slot .x{position:absolute;right:4px;bottom:4px;padding:0 6px;font-size:10px}
.eq-slots .slot .cnt{position:absolute;top:4px;right:5px;font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.eq-mineh{margin:4px 0 0;font-size:15px}
.eq-right .tiles{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:360px;overflow:auto;padding-right:2px}
.eq-right .tile{font-size:11px;padding:4px}
.eq #qCats{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
@media (max-width:860px){
  /* 手機：預覽縮成左邊小圖、部位排在右邊，③ 配件清單在下面整排，不用滑太多 */
  .eq-preview{grid-template-columns:112px minmax(0,1fr)!important;gap:10px!important;align-items:start}
  .eq-preview .stack{max-width:none!important;width:112px;position:sticky;top:120px}
  .eq-right{display:contents}
  .eq-slots{grid-column:2;grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  .eq-slots .eq-step{font-size:12px}
  .eq-mineh,.eq-right .tiles,.eq-right>.muted{grid-column:1/-1}
  .eq-right .tiles{max-height:none}
}
/* 活動（#nft/event）與背景部位 */
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ev{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.ev.open{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,106,.35)}
.ev.over,.ev.full{opacity:.65}
.ev-img{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--card2);display:grid;place-items:center;color:var(--muted);font:900 22px var(--serif)}
.ev-img img{width:100%;height:100%;object-fit:cover}
.ev-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-h{display:flex;gap:8px;align-items:center;justify-content:space-between}.ev-h b{font-size:16px}
.ev-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;background:rgba(143,160,198,.15);color:var(--soft)}
.ev-st.open{background:var(--gold);color:#111}.ev-st.got{background:rgba(82,211,154,.18);color:var(--ok)}
.ev-claim{display:flex;gap:8px}.ev-claim .in{flex:1;min-width:0;min-height:42px;font-size:16px}.ev-claim .btn{min-height:42px;font-size:15px}
.slot.bgslot{border:1px dashed rgba(212,175,106,.5)}
.bgtile img{aspect-ratio:1}
@media (max-width:860px){.ev{grid-template-columns:84px minmax(0,1fr)}}
/* NFT 子選單變成 7 個（多了圖鑑、活動）：置中在三段切換下方、間距縮小，不會壓到右邊的錢包狀態 */
@media (min-width:861px){.top .mid .subs[data-subs="nft"]{left:50%;transform:translateX(-50%)}.top .mid .subs[data-subs="nft"] .sub{padding:0 9px}}
.ev-claim{flex-wrap:wrap}.ev-claim .in{flex:1 1 150px}
/* 錢包狀態小標籤：視窗不夠寬時換行，不要往左蓋到子選單 */
@media (min-width:861px){.toprow .right{min-width:0}.toprow .wallet{min-width:0;max-width:100%}.wallet .status{flex-wrap:wrap;max-width:100%}}
/* Demo 觀看模式：導覽列按鈕、「先連結錢包」提示裡的按鈕、導覽列下方的黃色橫條 */
.demo-btn{min-height:26px;padding:0 10px;border:1px solid rgba(255,196,77,.55);border-radius:9px;background:rgba(255,196,77,.1);color:#ffd27a;font-size:12px;font-weight:700;white-space:nowrap}
.demo-btn:hover{background:rgba(255,196,77,.2)}
.lock.needwallet{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lock .lock-demo{min-height:34px;font-size:13px;padding:0 12px;border-color:rgba(255,196,77,.55);color:#ffd27a}
.demobar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px auto 0;padding:5px 12px;max-width:100%;border:1px solid rgba(255,196,77,.5);border-radius:10px;background:rgba(60,42,8,.72);color:#ffe3a3;font-size:12.5px;line-height:1.5;text-align:center}
.demobar code{font-family:ui-monospace,Menlo,monospace;color:#fff}
.demobar button{min-height:26px;padding:0 10px;border:0;border-radius:8px;background:#ffc44d;color:#2a1a06;font-size:12px;font-weight:700;white-space:nowrap}
.demobar.hidden,.demo-btn.hidden,.lock-demo.hidden{display:none}
@media (max-width:860px){.demobar{margin:6px 0 0;font-size:12px}.demo-btn{min-height:32px}}
.msg.warn{color:#ffd27a}
@media (max-width:860px){.demobar [data-t="demo.desc2"]{display:none}.demobar{padding:4px 10px}}