@font-face{font-family:Brush;src:url(fonts/MaShanZheng.woff2) format("woff2");font-display:swap}
@font-face{font-family:Serif;src:url(fonts/NotoSerifTC.woff2) format("woff2");font-display:swap}
:root{--gold:#e6c67a;--gold2:#b8913f;--ink:#0b1a16;--jade:#7fe0c0;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--vh:100dvh}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#050c0a;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{font-family:Serif,"Noto Serif TC","PingFang TC",serif;color:#f3ead2}
#app{position:fixed;left:0;top:0;width:100vw;height:var(--vh);overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.frame{background:linear-gradient(180deg,rgba(12,30,25,.86),rgba(6,16,13,.82));border:1px solid rgba(230,198,122,.65);box-shadow:0 0 0 3px rgba(10,20,16,.55),0 0 0 4px rgba(230,198,122,.25),0 8px 24px rgba(0,0,0,.5);border-radius:6px;position:relative}
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none}
.frame::before{left:-4px;top:-4px;border-right:none;border-bottom:none}
.frame::after{right:-4px;bottom:-4px;border-left:none;border-top:none}
#hud{position:absolute;inset:0;pointer-events:none}
#fundBox{position:absolute;left:calc(14px + var(--sal));top:calc(12px + var(--sat));padding:8px 14px 10px;min-width:190px}
#fundBox .lbl{font-family:Brush,serif;color:var(--gold);font-size:18px;letter-spacing:4px}
#fund{font-family:Brush,serif;font-size:38px;line-height:1;color:#ffe9a8;text-shadow:0 0 12px rgba(255,210,120,.45),0 2px 0 #3a2a08;transition:color .2s}
#fund.down{color:var(--dn,#ff8a7a)}#fund.up{color:var(--up,#c8ffb0)}
#qiBar{margin-top:6px;height:10px;border-radius:5px;background:#0a1512;border:1px solid rgba(127,224,192,.5);position:relative;overflow:hidden}
#qiBar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#2a8c70,#9ff5d8);box-shadow:0 0 10px #7fe0c0}
#qiBar span{position:absolute;right:4px;top:-3px;font-size:10px;color:#cfeee2}
#qiBar.full i{animation:qiPulse 1s infinite alternate}
@keyframes qiPulse{to{filter:brightness(1.6)}}
#buffs{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
#buffs b{font-weight:normal;font-size:11px;padding:1px 6px;border:1px solid var(--gold2);border-radius:9px;color:var(--gold);background:rgba(40,30,8,.5)}
#questBox{position:absolute;right:calc(14px + var(--sar));top:calc(166px + var(--sat));width:250px;padding:8px 12px;font-size:13px}
#questBox .qt{font-family:Brush,serif;color:var(--gold);font-size:18px;letter-spacing:3px;margin-bottom:2px}
#questList div{margin:4px 0;line-height:1.35}
#questList .done{color:#8fbfa8;text-decoration:line-through}
#questList em{font-style:normal;color:#ffe08a}
#mini{position:absolute;right:calc(14px + var(--sar));top:calc(12px + var(--sat));width:180px;height:140px;border:1px solid rgba(230,198,122,.7);border-radius:6px;box-shadow:0 0 0 3px rgba(10,20,16,.55),0 6px 18px rgba(0,0,0,.5);background:#0b1a16}
#bossBar{position:absolute;left:50%;transform:translateX(-50%);top:calc(16px + var(--sat));width:min(560px,60vw);text-align:center}
#bossBar .bn{font-family:Brush,serif;font-size:26px;color:#ffb39a;text-shadow:0 0 10px #a01a10,0 2px 0 #000;letter-spacing:6px}
#bossBar .bb{height:14px;border:1px solid var(--gold);border-radius:3px;background:#1a0806;box-shadow:0 0 0 2px rgba(0,0,0,.6);overflow:hidden}
#bossBar .bb i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#e0482c,#7a120a);transition:width .15s}
#area{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-family:Brush,serif;font-size:54px;color:#f6e7b8;letter-spacing:14px;text-shadow:0 0 18px rgba(0,0,0,.9),0 0 30px rgba(230,198,122,.35);opacity:0;transition:opacity .8s;white-space:nowrap}
#area.show{opacity:1}
#toasts{position:absolute;left:50%;transform:translateX(-50%);top:calc(70px + var(--sat));display:flex;flex-direction:column;align-items:center;gap:6px}
#toasts div{padding:6px 18px;background:rgba(8,20,16,.85);border:1px solid var(--gold2);border-radius:20px;color:#ffe9b0;font-size:15px;animation:tIn .3s ease-out,tOut .5s ease-in 2.6s forwards}
@keyframes tIn{from{opacity:0;transform:translateY(-8px)}}@keyframes tOut{to{opacity:0}}
button{font-family:inherit;cursor:pointer}
.ico{pointer-events:auto;position:absolute;left:calc(14px + var(--sal));top:calc(150px + var(--sat));width:40px;height:40px;border-radius:50%;border:1px solid var(--gold2);background:rgba(8,20,16,.8);color:var(--gold);font-size:18px}
/* desktop action bar */
#actionBar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--sab));display:flex;gap:12px;padding:10px 16px;background:linear-gradient(180deg,rgba(12,30,25,.88),rgba(5,14,11,.9));border:1px solid rgba(230,198,122,.7);border-radius:10px;box-shadow:0 0 0 3px rgba(10,20,16,.6),0 0 0 4px rgba(230,198,122,.22),0 10px 30px rgba(0,0,0,.6)}
.act{position:relative;width:64px;height:64px;border-radius:8px;border:1px solid var(--gold2);background:radial-gradient(circle at 50% 35%,#1f4a3e,#0a1a15 75%);color:#f6e2a6;overflow:hidden;transition:transform .08s,box-shadow .15s}
.act:hover{box-shadow:0 0 14px rgba(230,198,122,.55);transform:translateY(-2px)}
.act.on{transform:scale(.93);box-shadow:0 0 18px #9ff5d8}
.act .glyph{font-family:Brush,serif;font-size:34px;line-height:60px;text-shadow:0 0 8px rgba(255,220,140,.6)}
.act kbd{position:absolute;left:3px;bottom:2px;font:10px/1 Serif,serif;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.65);border:1px solid rgba(230,198,122,.5);color:#ffe9b0}
.act.ult{border-color:#9ff5d8}.act.ult.ready{animation:ultG 1s infinite alternate}
@keyframes ultG{to{box-shadow:0 0 20px #9ff5d8,inset 0 0 14px rgba(159,245,216,.6)}}
.cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.62);pointer-events:none}
/* touch */
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:calc(26px + var(--sal));bottom:calc(26px + var(--sab));width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(230,198,122,.08),rgba(230,198,122,.14) 70%,rgba(230,198,122,.04));border:1.5px solid rgba(230,198,122,.35);pointer-events:auto;opacity:1}
#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,240,200,.55),rgba(160,130,60,.4));border:1.5px solid rgba(255,230,170,.6);box-shadow:0 0 12px rgba(0,0,0,.4)}
#tbtns{position:absolute;right:calc(18px + var(--sar));bottom:calc(20px + var(--sab));width:220px;height:220px;pointer-events:none}
.tb{position:absolute;pointer-events:auto;width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(230,198,122,.6);background:radial-gradient(circle at 50% 35%,rgba(40,90,75,.55),rgba(8,22,18,.5));color:rgba(255,236,190,.92);font-family:Brush,serif;font-size:30px;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.tb.on{transform:scale(.9);background:radial-gradient(circle,rgba(159,245,216,.6),rgba(8,22,18,.5))}
.tb.big{width:88px;height:88px;right:6px;bottom:6px;font-size:42px}
.tb[data-act=heavy]{right:104px;bottom:4px}
.tb[data-act=dash]{right:6px;bottom:104px}
.tb.ult{right:92px;bottom:86px;border-color:rgba(159,245,216,.8)}
.tb.ult.ready{animation:ultG 1s infinite alternate}
.tb.talk{right:170px;bottom:120px;border-color:#ffe08a;color:#ffe08a;animation:ultG 1s infinite alternate}
/* dialog */
#dlg{position:absolute;left:0;right:0;bottom:calc(16px + var(--sab));display:flex;justify-content:center;padding:0 calc(14px + var(--sar)) 0 calc(14px + var(--sal));pointer-events:auto;z-index:5}
.dframe{display:flex;gap:14px;width:min(860px,100%);padding:16px 18px;background:linear-gradient(180deg,rgba(14,34,28,.95),rgba(6,15,12,.96));border:1px solid var(--gold);border-radius:8px;box-shadow:0 0 0 4px rgba(8,18,14,.7),0 0 0 5px rgba(230,198,122,.3),0 16px 40px rgba(0,0,0,.7)}
#dPortrait{flex:0 0 96px;height:120px;border:1px solid var(--gold2);border-radius:6px;background:#0b1a16 center/cover no-repeat}
.dbody{flex:1;min-width:0}
#dName{font-family:Brush,serif;color:var(--gold);font-size:24px;letter-spacing:3px}
#dText{font-size:16px;line-height:1.65;margin:4px 0 10px;min-height:52px}
#dText b{color:#ffe08a;font-weight:normal}
#dChoices{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gbtn{padding:9px 22px;border-radius:22px;border:1px solid var(--gold);background:linear-gradient(180deg,#3d6b57,#163328);color:#fff1c8;font-size:16px;letter-spacing:2px;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.5)}
.gbtn:hover{filter:brightness(1.2)}.gbtn:disabled{opacity:.5}
.gbtn.alt{background:linear-gradient(180deg,#3a2f1a,#1b150a)}
/* overlay */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,rgba(8,26,20,.55),rgba(2,8,6,.92));z-index:10;padding:calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal))}
.ovl{text-align:center;max-width:720px;max-height:100%;overflow:auto}
.logo{font-family:Brush,serif;font-size:clamp(48px,9vw,96px);color:#f8e6b0;letter-spacing:.12em;text-shadow:0 0 30px rgba(230,198,122,.45),0 4px 0 #2a1e06}
.sub{font-family:Brush,serif;font-size:clamp(20px,3.4vw,30px);color:var(--jade);letter-spacing:.4em;margin-top:-4px}
#ovText{font-size:15px;line-height:1.8;color:#e6dcc0}
#ovHelp{font-size:13px;color:#b9c9bc;line-height:1.7;margin-bottom:14px}
#ovHelp kbd{font-family:inherit;padding:0 5px;border:1px solid var(--gold2);border-radius:3px;color:var(--gold)}
.back{display:block;margin-top:14px;color:#9fb8ad;font-size:13px}
@media (max-height:500px){.logo{font-size:44px}#ovText{font-size:13px;margin:6px 0}#ovHelp{font-size:12px}
 #fundBox{padding:4px 10px 6px;min-width:150px}#fund{font-size:28px}#fundBox .lbl{font-size:14px}
 #mini{width:126px;height:98px}#questBox{top:calc(118px + var(--sat));width:200px;font-size:11.5px;padding:5px 9px}#questBox .qt{font-size:15px}
 #stick{width:124px;height:124px}#knob{width:52px;height:52px;margin:-26px 0 0 -26px}
 #tbtns{transform:scale(.86);transform-origin:right bottom}
 .dframe{padding:10px 12px}#dPortrait{flex-basis:70px;height:86px}#dText{font-size:14px;min-height:0}
 .ico{top:calc(112px + var(--sat))}#area{font-size:38px}}
@media (max-width:600px){#mini{width:120px;height:93px}#questBox{top:calc(112px + var(--sat));right:calc(10px + var(--sar));width:min(200px,50vw);font-size:11.5px;padding:5px 9px;background:linear-gradient(180deg,rgba(12,30,25,.7),rgba(6,16,13,.6))}#questBox .qt{font-size:14px}#mini{right:calc(10px + var(--sar))}
 #fundBox{min-width:150px}#fund{font-size:30px}.ico{top:calc(128px + var(--sat))}#area{font-size:36px;letter-spacing:8px}
 #dPortrait{flex-basis:64px;height:80px}#dText{font-size:14.5px}#bossBar{top:calc(116px + var(--sat));width:84vw}#hud.boss #questBox{display:none}}
.mxlink{display:block;width:max-content;margin:8px auto 0;font-size:13px;color:#cfe3ff;text-decoration:none;border:1px solid rgba(143,176,255,.55);border-radius:12px;padding:3px 12px;background:rgba(26,63,158,.35)}.mxlink:hover{background:rgba(42,91,215,.6)}
/* 效能：遊戲中按鈕不使用 backdrop-filter（每幀畫布更新都要重算模糊，弱機 GPU 負擔大） */
.tb{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* 觸控：搖桿清楚可見、浮動區、圖示鍵 */
#szone{position:absolute;left:0;top:calc(70px + var(--sat,0px));width:48%;bottom:0;pointer-events:auto;touch-action:none}
#stick{background:radial-gradient(circle,rgba(14,48,40,.5),rgba(6,22,19,.6))!important;border:2.5px solid rgba(230,198,122,.85)!important;box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 22px rgba(120,220,180,.22);z-index:2;touch-action:none}
#knob{background:radial-gradient(circle at 38% 34%,rgba(255,244,210,.95),rgba(180,140,60,.85))!important;border:2px solid #fff3c4!important}
.tb svg{display:block;margin:auto;filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}
.tb .cd{pointer-events:none}
@media (max-height:420px){#stick{width:112px!important;height:112px!important;left:calc(12px + var(--sal));bottom:calc(10px + var(--sab))}#knob{width:48px!important;height:48px!important;margin:-24px 0 0 -24px!important}#tbtns{transform:scale(.78);transform-origin:bottom right;bottom:calc(8px + var(--sab))}}
.tb .cd{inset:0!important;height:auto!important;border-radius:50%;background:conic-gradient(rgba(0,0,0,.62) calc(var(--r,0)*1%),transparent 0)!important}
#overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}#overlay>.ovl{margin:auto 0;max-height:none}
@media (orientation:landscape) and (max-height:500px){#overlay{align-items:flex-start}.logo{font-size:40px}.sub{font-size:18px}#ovText{font-size:13px;line-height:1.55}#ovHelp{font-size:11.5px;line-height:1.5;margin-bottom:8px}}
#btnMenu{z-index:30}/* 選單鍵不被觸控搖桿區遮住 */