:root{--tw:min(calc(100vw - 24px),440px);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--gold:#f6c95a;--ol:#3a2616;--ink:#4a3320}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#6fb04a;touch-action:none;
  font-family:ui-rounded,"SF Pro Rounded","PingFang TC","Arial Rounded MT Bold","Microsoft JhengHei",system-ui,sans-serif;color:#fff}
button{font-family:inherit;color:inherit}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
.nv{background:linear-gradient(#353e78,#232955);border:2px solid var(--gold);box-shadow:0 0 0 1.5px var(--ol),0 4px 10px rgba(0,0,0,.3)}
/* 主角卡 */
.card{position:absolute;left:32px;top:calc(var(--sat) + 13px);width:184px;height:63px;border-radius:12px 26px 26px 12px;padding:5px 14px 0 58px}
.ava{position:absolute;left:-28px;top:-10px;width:74px;height:76px;background:url(../art/ui/avaframe.webp) center/100% 100%}
.ava canvas{position:absolute;left:7px;top:5px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#cfeeb8,#74bf7a)}
.ava:after{content:"";position:absolute;inset:0;background:inherit;clip-path:inset(78% 40% 0 40%);pointer-events:none}
.lvb{position:absolute;left:22px;top:38px;width:32px;height:30px;background:url(../art/ui/lvbadge.webp) center/100% 100%;color:#7a4300;font-weight:900;font-size:11.5px;text-align:center;line-height:26px;z-index:1}
.nm{font-size:13px;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.pw{font-size:11.5px;margin-top:5px;line-height:1.2;color:#ffe9a8;font-weight:800}.pw b{font-size:12.5px;color:#fff}
/* 條 */
.bar{position:relative;height:11px;margin-top:3px;border-radius:99px;background:#161a3a}
.bar>i{position:absolute;left:0;top:0;bottom:0;width:100%;border:solid transparent;border-width:0 5px;border-image:url(../art/ui/fill_red.webp) 0 28 fill/0 5px stretch;transition:width .15s}
.bar.fr:after,#xp:after{content:"";position:absolute;inset:-3px;border:8.5px solid transparent;border-image:url(../art/ui/hpframe.webp) 37 fill/8.5px stretch;pointer-events:none}
.bar.fo>i{border-image-source:url(../art/ui/fill_orange.webp)}
/* 右上 */
.res{position:absolute;right:8px;top:calc(var(--sat) + 12px);display:flex;gap:6px;align-items:flex-start}
.res>div{display:flex;flex-direction:column;gap:5px}
.pill{height:27px;min-width:90px;border-radius:99px;padding:0 10px 0 3px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:6px}
.coin,.gem,.stone,.ic{display:inline-block;width:21px;height:21px;background:url(../art/ui/icons.webp) 0 0/500% 400% no-repeat;vertical-align:-5px;flex:none}
.gem{background-position:25% 0}.stone{background-position:50% 0}
#mute{width:40px;height:40px;border-radius:12px;padding:0}#mute .ic{width:30px;height:30px;background-position:0 100%;vertical-align:middle}
#mute:active,.mb:active{transform:translateY(2px)}
/* 公告、關卡、隊友 */
#tick{position:absolute;left:50%;top:calc(var(--sat) + 84px);transform:translateX(-50%);width:var(--tw);height:20px;border-radius:10px;background:rgba(28,33,72,.72);overflow:hidden;font-size:11.5px;font-weight:700;pointer-events:none}
#tick span{position:absolute;white-space:nowrap;line-height:20px;left:100%;animation:tk 9s linear forwards}
#tick span b{color:var(--gold)} #tick span.me{color:#ffe38a}
@keyframes tk{to{transform:translateX(calc(-100% - var(--tw)))}}
#stage{position:absolute;left:calc(50% + 46px);top:calc(var(--sat) + 111px);transform:translateX(-50%);width:200px;pointer-events:none;text-align:center}
#stn{display:block;height:30px;line-height:29px;font-size:12.5px;font-weight:900;letter-spacing:.5px;white-space:nowrap;border:solid transparent;border-width:0 24px;border-image:url(../art/ui/banner.webp) 0 103 fill/0 25px stretch;text-shadow:0 1px 0 rgba(0,0,0,.5)}
#stage .bar{width:160px;height:12px;margin:8px 0 0 30px}
#stage .bar em{position:absolute;left:-17px;top:-8px;width:28px;height:28px;border-radius:50%;background:url(../art/ui/skills.webp) 28.5714% 0/800% 800%;box-shadow:0 0 0 1.5px var(--ol);z-index:1}
#stp{position:absolute;inset:0;line-height:12px;font-size:10.5px;font-weight:900;text-shadow:0 1px 2px #000;z-index:1}
#party{position:absolute;left:10px;top:calc(var(--sat) + 113px);display:flex;flex-direction:column;gap:9px;pointer-events:none}
.pm{position:relative;width:98px;height:34px;padding:3px 9px 0 40px;border-radius:8px 17px 17px 8px;border-width:1.5px;font-size:12px;font-weight:900;line-height:1.25;white-space:nowrap}
.pm canvas{position:absolute;left:-4px;top:-4px;width:39px;height:39px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 0 1.5px var(--ol);background:radial-gradient(circle at 50% 40%,#cfeeb8,#74bf7a)}
.pm small{opacity:.7;font-weight:700;font-size:10px}
.pm .bar{height:7px;margin-top:2px}.pm .bar>i{border:0;border-radius:99px;background:linear-gradient(#a8ffb8,#2fcf66)}
#toasts{position:absolute;left:10px;bottom:calc(var(--sab) + 100px);display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none}
.toast{background:rgba(28,33,72,.9);border:1.5px solid rgba(246,201,90,.6);border-left:4px solid #fff;border-radius:9px;padding:4px 10px;font-size:12px;font-weight:800;animation:tin .25s cubic-bezier(.2,1.6,.4,1),tout .4s 2.6s forwards;max-width:64vw}
@keyframes tin{from{transform:translateX(-30px) scale(.8);opacity:0}}@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
/* 經驗條、選單、技能 */
#xp{position:absolute;left:13px;right:13px;bottom:calc(var(--sab) + 9px);height:13px;border-radius:99px;background:#161a3a}
#xp i{position:absolute;left:0;top:0;bottom:0;width:0;border:solid transparent;border-width:0 6px;border-image:url(../art/ui/fill_xp.webp) 0 28 fill/0 6px stretch;transition:width .25s}
#xp:after{border-width:9.5px;border-image-width:9.5px}
#xp span{position:absolute;inset:0;line-height:13px;text-align:center;font-size:11px;font-weight:900;text-shadow:0 1px 2px #000;z-index:1}
.btns{position:absolute;left:10px;bottom:calc(var(--sab) + 34px);display:flex;gap:6px}
.mb,#mute{border:0;box-shadow:none;background:url(../art/ui/btn_sq.webp) center/100% 100%}.mb:active,#mute:active{background-image:url(../art/ui/btn_sq_p.webp)}
.mb{width:48px;height:48px;padding:0;position:relative}
.mb i{display:block;width:36px;height:36px;margin:auto;background:url(../art/ui/icons.webp) 0 0/500% 400% no-repeat}
.mb em{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;background:#ff3d5a;border:2px solid #fff;display:none}
.sk{position:absolute;right:8px;bottom:calc(var(--sab) + 30px);width:166px;height:172px;pointer-events:none!important}.sk>*{pointer-events:auto}
.sb{position:absolute;width:54px;height:54px;border-radius:50%;border:0;padding:0;background:url(../art/ui/skills.webp) 0 0/800% 800%}
.sb:active{transform:scale(.92)}
.sb u{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(10,10,30,.74) var(--cd,0deg),transparent 0);pointer-events:none}
.sb:after{content:"";position:absolute;left:-4px;top:-4px;width:62px;height:65px;background:url(../art/ui/btn_ring.webp) center/100% 100%;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.sb.cool:after{background-image:url(../art/ui/btn_ring_d.webp)}
#s0{right:102px;bottom:3px}#s1{right:88px;bottom:69px;background-position:14.2857% 0}#s2{right:20px;bottom:109px;background-position:28.5714% 0}
#auto{position:absolute;right:0;bottom:0;width:96px;height:98px;border:0;padding:0;background:url(../art/ui/auto_off.webp) center/100% 100% no-repeat}
#auto.on{background-image:url(../art/ui/auto_on.webp);animation:ap 1.4s infinite}
#auto:active{transform:scale(.95)}
#auto b{position:absolute;left:0;right:0;bottom:13px;font-size:13px;letter-spacing:1px;text-shadow:-1.5px 0 #555,1.5px 0 #555,0 -1.5px #555,0 2px #555}
#auto.on b{text-shadow:-1.5px 0 #7a4300,1.5px 0 #7a4300,0 -1.5px #7a4300,0 2px #7a4300}
@keyframes ap{50%{filter:drop-shadow(0 0 9px #ffd66b) brightness(1.08)}}
@media(max-width:372px){.mb{width:42px;height:42px}.mb i{width:32px;height:32px}.btns{gap:4px}}
/* 視窗 */
.modal{position:fixed;inset:0;background:rgba(12,14,40,.6);display:none;align-items:center;justify-content:center;z-index:5}
.modal.on{display:flex}
.win{position:relative;width:min(92vw,400px);border:solid transparent;border-width:88px 26px 30px;border-image:url(../art/ui/win.webp) 157 70 73 fill/88px 39px 41px stretch;color:var(--ink);animation:pop .28s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.win h2{position:absolute;left:0;right:0;top:-58px;margin:0;font-size:17px;line-height:22px;text-align:center;color:#fff;letter-spacing:2px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.win>div{max-height:60vh;overflow:auto;touch-action:pan-y}
.x{position:absolute;right:-17px;top:-77px;width:38px;height:38px;border:0;padding:0;font-size:0;background:url(../art/ui/btn_x.webp) center/100% 100%;z-index:2}.x:active{background-image:url(../art/ui/btn_x_p.webp)}
.gb{height:36px;line-height:34px;padding:0 2px;border:solid transparent;border-width:0 22px;border-image:url(../art/ui/btn_gold.webp) 0 103 fill/0 22px stretch;background:none;font-weight:900;font-size:13px;color:#6a3a00;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.gb:active{border-image-source:url(../art/ui/btn_gold_p.webp);transform:translateY(1px)}
.gb.dim{border-image-source:url(../art/ui/btn_gold_d.webp);color:#70747c}
.gb.blue{padding:0 5px;border-width:0 19px;border-image:url(../art/ui/btn_blue.webp) 0 83 fill/0 19px stretch;color:#fff;text-shadow:0 1px 0 #1d4f9a}
.gb.blue:active{border-image-source:url(../art/ui/btn_blue_p.webp)}
.rs{display:flex;gap:14px;justify-content:center;font-size:13px;font-weight:900;margin:0 0 8px;align-items:center}
.rs span{display:flex;gap:4px;align-items:center}
.slot,.offer{display:flex;align-items:center;gap:9px;min-height:66px;line-height:1.25;margin-bottom:6px;padding:4px 0 4px 6px;border:solid transparent;border-width:0 12px 0 20px;border-image:url(../art/ui/toastbar.webp) 0 60 0 120 fill/0 27px 0 54px stretch;font-size:13px;font-weight:900}
.offer{padding-left:36px}
.slot div,.offer div{flex:1;min-width:0}.slot small,.offer small{display:block;font-weight:700;opacity:.72;font-size:11.5px;margin-top:2px}
.gi{position:relative;display:inline-block;width:46px;height:46px;flex:none;background:url(../art/ui/slot.webp) center/100% 100%}
.gi>i,.it>i,.cd>i{position:absolute;inset:11%;background:url(../art/ui/gear.webp) 0 0/500% 400% no-repeat}
.gi:after,.it:after,.cd:after{content:"";position:absolute;inset:-2px;background:url(../art/ui/gear.webp) var(--fx,0%) 100%/500% 400% no-repeat;pointer-events:none}
.gi.big{width:76px;height:76px}
.bag{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:8px;padding:2px}
.it{position:relative;aspect-ratio:1;border:0;padding:0;background:url(../art/ui/slot.webp) center/100% 100%}
.it small{position:absolute;right:5px;bottom:3px;font-size:11px;font-weight:900;color:#fff;text-shadow:0 0 2px #000,0 1px 2px #000,0 0 3px #000;z-index:1}
.note{font-size:11.5px;color:#8a6a4a;text-align:center;margin-top:8px;line-height:1.5}
#forge .win,#gacha .win,#off .win{text-align:center}
#ficon{height:84px;padding-top:4px}
#fitem{font-size:17px;font-weight:900;margin:6px 0}
#ficon.hit{animation:fh .28s}@keyframes fh{30%{transform:scale(1.3) rotate(-5deg);filter:brightness(1.6)}}
#fres{font-size:26px;font-weight:900;height:40px;letter-spacing:3px}
#fres.ok{color:#e08a00;text-shadow:0 0 14px #ffd66b;animation:pop .4s cubic-bezier(.2,2,.4,1)}
#fres.ng{color:#8a8a9a;animation:sh .4s}@keyframes sh{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 12px;padding:4px}
.cd{position:relative;aspect-ratio:1;border-radius:12px;background:url(../art/ui/slot.webp) center/100% 100%;filter:brightness(.5) saturate(.5);transition:transform .25s,filter .25s}
.cd i,.cd:after{opacity:0;transition:opacity .2s}
.cd.rv{filter:none;transform:rotateY(360deg);box-shadow:0 0 12px var(--rc)}.cd.rv i,.cd.rv:after{opacity:1}
/* 開始畫面 */
#start{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#2a2160}
#start h1{font-size:44px;margin:30vh 0 0;letter-spacing:6px;background:linear-gradient(#fff6c2,#ffb52e 60%,#ff6b4a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a1a5a) drop-shadow(0 0 22px rgba(255,190,80,.6))}
#start p{opacity:.9;font-weight:700;margin:10px 0 16px}
#go{height:56px;line-height:53px;font-size:20px;padding:0 26px;border-width:0 34px;border-image-width:0 34px}
#start small{position:absolute;bottom:calc(var(--sab) + 18px);opacity:.55;font-size:12px}
#pick{display:flex;gap:16px;margin:0 0 22px}
.pk{width:104px;padding:4px 0 0;border:solid transparent;border-width:14px 12px;border-image:url(../art/ui/panel.webp) 67 fill/26px stretch;background:none;color:var(--ink);font-weight:900;font-size:14px;opacity:.7;transition:transform .15s}
.pk canvas{width:64px;height:64px;display:block;margin:0 auto 4px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 0 1.5px var(--ol);background:radial-gradient(circle at 50% 40%,#cfeeb8,#74bf7a)}
.pk.on{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 10px #ffd66b)}