/* 斬妖問道（模式 6）— 原創介面。戰鬥中所有面板底色 50% 半透明（文字、K 棒不透明）；技能／操作按鈕一律圖示。 */
body.slash{overflow:hidden;touch-action:none;background:#06140f;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#c{position:fixed;left:0;top:0;display:block}
.hide{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none;z-index:4}
body:not(.playing) #hud,body:not(.playing) #abar,body:not(.playing) #skl,body:not(.playing) #kc{display:none}
#sL{position:absolute;left:calc(8px + env(safe-area-inset-left));top:calc(8px + env(safe-area-inset-top));background:rgba(6,20,15,.5);border:1px solid rgba(231,198,111,.6);border-radius:8px;padding:6px 10px;min-width:190px;color:#f6e7c0;font:600 13px/1.35 Serif,serif;text-shadow:0 1px 2px #000}
#sStock{color:#ffe9a8;font-size:12px;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sFund{display:flex;gap:8px;align-items:baseline}#sMoney{font-size:18px;font-weight:900;color:#fff3c4}#sRoi{font-size:13px;font-weight:800}
#sBar{height:7px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin:3px 0}#sBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c0392b,#ffb340 45%,#ffe08a);transition:width .25s}
#sMeta{display:flex;gap:10px;font-size:12px;flex-wrap:wrap}#sTime{color:#fff;font-weight:900}#sLev{color:#d8c2ff;font-weight:800}#sLev.on{color:#ffe08a;text-shadow:0 0 6px #b48cff}
#sStance{font-weight:900}#sStance.up{color:var(--up)}#sStance.dn{color:var(--dn)}
#sBtns{display:flex;gap:6px;margin-top:6px;pointer-events:auto}
#sBtns .ic{width:36px;height:36px;border-radius:50%;border:1px solid rgba(231,198,111,.7);background:rgba(6,20,15,.5);padding:7px;cursor:pointer;touch-action:manipulation;color:#ffe9a8;font:800 11px Serif,serif}
#sBtns svg{width:100%;height:100%;fill:none;stroke:#ffe9a8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bUD .u{stroke:var(--up)}#bUD .d{stroke:var(--dn)}#bMute.off .w{display:none}#bMute.off{opacity:.5}#bPx.on{background:rgba(120,80,20,.6)}
/* 右上角 K 線：比萬魔圍城的 280×160 大很多（桌機約 32vw、手機直式約 45vw） */
#kc{position:fixed;z-index:5;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:clamp(320px,32vw,600px)!important;height:clamp(190px,18.5vw,340px)!important;pointer-events:none;background:rgba(4,14,11,.5);border:1px solid rgba(231,198,111,.6);border-radius:8px}
body.touch #kc{width:min(45vw,420px)!important;height:min(34vw,260px)!important}
@media (orientation:landscape) and (max-height:500px){body.touch #kc{width:34vw!important;height:min(19vw,44vh)!important}}
/* 底部操作列：漲、跌、加碼、減碼、槓桿，戰鬥中隨時可按 */
#abar{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end;pointer-events:auto;padding:6px 8px 6px;border-radius:14px;background:rgba(6,16,12,.5);border:1px solid rgba(231,198,111,.45)}
#abar .gb{position:relative;width:72px;height:72px;border-radius:14px;border:3px solid #f6e7c0;background:rgba(6,16,12,.5);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;touch-action:manipulation;box-shadow:0 3px 0 rgba(0,0,0,.5);transition:transform .06s;color:#f6e7c0}
#abar .gb svg{width:62%;height:62%}#abar .gb span{font:900 13px Serif,serif;letter-spacing:.12em;text-shadow:0 1px 2px #000}
#abar .gb kbd{position:absolute;right:4px;top:2px;font:700 10px monospace;opacity:.65}
#abar .gb.up svg path{fill:var(--up);stroke:#fff3c4;stroke-width:2}#abar .gb.dn svg path{fill:var(--dn);stroke:#fff3c4;stroke-width:2}
#abar .gb.up{border-color:var(--up)}#abar .gb.dn{border-color:var(--dn)}
#abar .gb.pos svg .c{fill:#e0b84a;stroke:#5a3a10;stroke-width:2}#abar .gb.pos svg .s{fill:#fff3c4;stroke:#3a2a10;stroke-width:2}
#abar .gb.pos.up svg .s{fill:var(--up)}#abar .gb.pos.dn svg .s{fill:var(--dn)}
#abar .gb.st.on{transform:translateY(-4px);box-shadow:0 0 18px currentColor,0 3px 0 rgba(0,0,0,.5)}#abar .gb.st.up.on{color:var(--up);background:rgba(90,20,14,.55)}#abar .gb.st.dn.on{color:var(--dn);background:rgba(14,60,36,.55)}
#gUp.on,#gDn.on{animation:stp 1s infinite}@keyframes stp{50%{filter:brightness(1.35)}}
#abar .gb:active{transform:translateY(3px)}
#abar .gb.sp{border-color:#c9a2ff}#abar .gb.sp svg .r1{fill:none;stroke:#c9a2ff;stroke-width:3;stroke-dasharray:6 4}#abar .gb.sp svg .r2{fill:rgba(160,110,255,.25);stroke:#e6d4ff;stroke-width:2}#abar .gb.sp svg .st2{fill:#f2e6ff;stroke:#7b4cd6;stroke-width:2}
#abar .gb.sp.on{box-shadow:0 0 16px #b48cff,0 3px 0 rgba(0,0,0,.5);background:rgba(40,16,70,.6)}#abar .gb.sp.on span{color:#ffe08a;font-size:17px;letter-spacing:0}
#gPos{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:flex;align-items:baseline;gap:8px;padding:3px 14px;border-radius:14px;border:2px solid #f6e7c0;background:rgba(6,16,12,.5);color:#fff3c4;white-space:nowrap;pointer-events:none;font-family:Serif,serif;text-shadow:0 1px 2px #000}
#gPos b{font:700 13px Serif,serif;opacity:.9}#gPosV{font:900 24px Serif,serif;display:inline-block;min-width:3.2em;text-align:center}#gPos small{font:600 11px Serif,serif;opacity:.9}
#gPos.pop #gPosV{animation:gpop .32s cubic-bezier(.2,1.8,.4,1)}#gPos.pup{animation:gfu .45s}#gPos.pdn{animation:gfd .45s}#gPos.pup #gPosV{color:var(--up)}#gPos.pdn #gPosV{color:var(--dn)}#gPos.deny{animation:gdeny .3s}
@keyframes gpop{0%{transform:scale(1)}35%{transform:scale(calc(1.3 * var(--pk,1)))}100%{transform:scale(1)}}
@keyframes gfu{0%{box-shadow:0 0 0 0 var(--up);border-color:var(--up)}40%{box-shadow:0 0 calc(18px * var(--pk,1)) 4px var(--up);border-color:var(--up)}100%{box-shadow:none}}
@keyframes gfd{0%{box-shadow:0 0 0 0 var(--dn);border-color:var(--dn)}40%{box-shadow:0 0 calc(18px * var(--pk,1)) 4px var(--dn);border-color:var(--dn)}100%{box-shadow:none}}
@keyframes gdeny{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}}
.gposf{position:absolute;top:-4px;font-weight:900;font-family:Serif,serif;pointer-events:none;animation:gflt .9s ease-out forwards;text-shadow:0 0 6px rgba(0,0,0,.9),0 0 12px currentColor}.gposf.up{color:var(--up)}.gposf.dn{color:var(--dn)}
@keyframes gflt{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-14px) scale(1.25);opacity:1}100%{transform:translate(-50%,-46px) scale(1);opacity:0}}
/* 右下：普攻＋4 個法術技能（圖示＋冷卻扇形） */
#skl{position:fixed;z-index:6;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:250px;height:230px;pointer-events:none}
#skl button{position:absolute;pointer-events:auto;touch-action:none;cursor:pointer;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;color:#fff3c4}
#bAtk{right:6px;bottom:6px;width:104px;height:104px;border:3px solid #ffe08a;background:radial-gradient(circle at 50% 40%,rgba(140,40,30,.65),rgba(30,8,6,.5));box-shadow:0 4px 0 rgba(0,0,0,.5)}
#bAtk svg{width:66%;height:66%}#bAtk.on{transform:scale(.94);box-shadow:0 0 22px #ffb340}
#skl kbd{position:absolute;top:2px;left:50%;transform:translateX(-50%);font:700 10px monospace;opacity:.7;z-index:3}
#spk{position:fixed;z-index:8;background:rgba(14,8,28,.92);border:2px solid #c9a2ff;border-radius:12px;padding:8px 10px;box-shadow:0 8px 30px rgba(0,0,0,.6);color:#f2e6ff;font:700 13px Serif,serif}
#spk .spt{display:flex;align-items:center;gap:6px;margin-bottom:6px}#spk .spt svg{width:18px;height:18px;fill:#e6d4ff}
#spk .chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#spk .chip{min-width:46px;height:42px;border-radius:21px;border:2px solid #9a78e0;background:radial-gradient(circle at 50% 35%,#5a3a9a,#24123f);color:#fff3c4;font:900 17px Serif,serif;cursor:pointer;touch-action:manipulation}
#spk .chip.hot{border-color:#ff9a5a;background:radial-gradient(circle at 50% 35%,#9a3a3a,#3f1212)}#spk .chip.sel{outline:3px solid #ffe08a}
#joy{position:fixed;z-index:3;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:rgba(6,20,15,.35);border:2px solid rgba(231,198,111,.5);pointer-events:none}
#joy i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,233,168,.6)}
#joyHint{position:fixed;z-index:3;left:calc(30px + env(safe-area-inset-left));bottom:calc(150px + env(safe-area-inset-bottom));width:110px;height:110px;border-radius:50%;border:2px dashed rgba(231,198,111,.35);pointer-events:none;display:flex;align-items:center;justify-content:center;color:rgba(255,233,168,.55);font:700 12px Serif,serif;text-align:center}
body:not(.touch) #joyHint{display:none}
/* 手機直式：操作列滿寬貼底，技能群組移到操作列上方，不擋主角（主角在畫面 50% 高） */
@media (max-width:760px){#sL{min-width:0;padding:4px 8px;font-size:12px}#sMoney{font-size:15px}#sBtns .ic{width:32px;height:32px;padding:6px}
 #abar{gap:5px;padding:4px 5px;left:calc(4px + env(safe-area-inset-left));right:calc(4px + env(safe-area-inset-right));transform:none;justify-content:space-between}
 #abar .gb{flex:1;width:auto;height:62px;border-radius:12px;border-width:2px}#abar .gb kbd{display:none}#abar .gb span{font-size:12px;letter-spacing:.05em}
 #gPosV{font-size:20px}#gPos{left:50%}
 #skl{bottom:calc(112px + env(safe-area-inset-bottom));right:calc(6px + env(safe-area-inset-right));width:212px;height:196px}
 #bAtk{width:92px;height:92px}#bJump{right:104px;bottom:0;width:66px;height:66px}#bDash{right:100px;bottom:76px;width:56px;height:56px}#bSpell{right:24px;bottom:104px;width:70px;height:70px}#skl kbd,#abar kbd{display:none}
 #joyHint{bottom:calc(120px + env(safe-area-inset-bottom))}}
@media (orientation:landscape) and (max-height:500px){#abar .gb{height:54px;width:58px;flex:none}#abar{left:50%;right:auto;transform:translateX(-50%)}#skl{bottom:calc(8px + env(safe-area-inset-bottom))}#joyHint{bottom:calc(30px + env(safe-area-inset-bottom))}#gPos{bottom:calc(100% + 3px)}}
.sbub{display:none}
.mode-free{display:inline-block;margin:6px 0 2px;padding:3px 12px;border-radius:12px;border:1px solid rgba(231,198,111,.7);color:#ffe9a8;font:800 13px Serif,serif;background:rgba(0,0,0,.3);letter-spacing:.1em}
#best{font:600 13px Serif,serif;color:#ffe9a8;margin:6px 0}

/* 跳躍／衝刺／法術輪按鈕（圖示按鈕，無純文字鍵） */
#bJump{right:126px;bottom:2px;width:72px;height:72px;border:2px solid #bff0ff;background:radial-gradient(circle at 50% 40%,rgba(40,90,120,.6),rgba(6,16,24,.5))}
#bDash{right:122px;bottom:86px;width:60px;height:60px;border:2px solid #ffe08a;background:radial-gradient(circle at 50% 40%,rgba(120,90,30,.55),rgba(20,14,6,.5))}
#bJump svg,#bDash svg{width:70%;height:70%}#bJump:active,#bDash:active{transform:scale(.92)}
#bSpell{right:30px;bottom:122px;width:78px;height:78px;border:3px solid var(--ec,#ffe08a);background:rgba(6,16,12,.55);overflow:hidden;box-shadow:0 0 10px var(--ec,#ffe08a)}
#bSpell .ic{position:relative;z-index:1;width:70%;height:70%;display:flex}#bSpell .ic svg{width:100%;height:100%}
#bSpell .cd,.swi .cd{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(rgba(0,0,0,.72) calc(var(--cd,0)*360deg),transparent 0);z-index:2;pointer-events:none}
#bSpell .cs,.swi .cs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 20px Serif,serif;color:#fff;text-shadow:0 0 4px #000;z-index:3;pointer-events:none}
#bSpell .nm{position:absolute;bottom:3px;left:0;right:0;text-align:center;font:800 10px Serif,serif;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;z-index:3;white-space:nowrap;pointer-events:none}
#bSpell.open{transform:scale(1.08);box-shadow:0 0 22px var(--ec,#ffe08a)}#bSpell.cx{border-color:#888;box-shadow:none}
.swl{position:fixed;z-index:9;width:190px;padding:6px;border-radius:14px;background:rgba(8,14,12,.72);border:2px solid rgba(231,198,111,.7);box-shadow:0 8px 30px rgba(0,0,0,.6);pointer-events:none;display:flex;flex-direction:column;gap:3px}
.swl.cx{opacity:.45;filter:grayscale(1)}.swh{font:700 10px Serif,serif;color:#e7c66f;text-align:center;opacity:.85}
.swi{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 8px;border-radius:17px;color:#efe3c0;font:800 13px Serif,serif;opacity:.55;transform:scale(.9);overflow:hidden;border:1px solid transparent}
.swi .ic{width:26px;height:26px;flex:none;display:flex;position:relative;z-index:1}.swi .ic svg{width:100%;height:100%}.swi .nm{position:relative;z-index:1;white-space:nowrap}
.swi .cs{font-size:14px;justify-content:flex-end;padding-right:10px}
.swi.on{opacity:1;transform:scale(1.06);border-color:var(--ec,#ffe08a);background:rgba(255,224,138,.12);box-shadow:0 0 10px var(--ec,#ffe08a)}
/* 連擊數與評價（自訂五階：靈・玄・地・天・仙） */
#cmb{position:fixed;z-index:6;left:calc(14px + env(safe-area-inset-left));top:150px;pointer-events:none;color:#fff3c4;font:900 15px Serif,serif;text-shadow:0 0 6px #000,0 2px 0 #000;display:flex;align-items:baseline;gap:6px}
#cmbN{font-size:44px;color:#ffe08a;display:inline-block}
#rk{position:fixed;z-index:6;left:calc(16px + env(safe-area-inset-left));top:206px;pointer-events:none;display:flex;align-items:center;gap:8px;text-shadow:0 0 8px #000,0 2px 0 #000}
#rk b{font:900 56px 'Ma Shan Zheng',Serif,serif;line-height:1}#rk small{font:800 14px Serif,serif;color:#fff}
#rk.rk0 b{color:#bff0ff}#rk.rk1 b{color:#9dff7a}#rk.rk2 b{color:#ffd166}#rk.rk3 b{color:#ff9a5a}#rk.rk4 b{color:#ff6ad5;text-shadow:0 0 18px #ff6ad5,0 2px 0 #000}
body:not(.playing) #cmb,body:not(.playing) #rk{display:none}
@media (max-width:760px){#cmb{top:200px}#cmbN{font-size:34px}#rk{top:246px}#rk b{font-size:42px}#rk small{font-size:12px}}
@media (max-width:760px){#bJump{right:100px;bottom:0;width:66px;height:66px}#bDash{right:98px;bottom:74px;width:56px;height:56px}#bSpell{right:22px;bottom:100px;width:70px;height:70px}}
@media (max-width:760px) and (orientation:portrait){#skl{bottom:calc(128px + env(safe-area-inset-bottom))}}
/* 2026-10-18 使用者回饋：底部「部位／減碼／加碼／槓桿／漲／跌」整組縮到約 1/3 面積、貼齊最下緣，不擋畫面（桌機、直式、橫式一致） */
#abar{left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(2px + env(safe-area-inset-bottom))!important;gap:4px!important;padding:2px 4px!important;border-radius:10px!important;justify-content:center!important}
#abar .gb{flex:none!important;width:40px!important;height:40px!important;border-radius:9px!important;border-width:2px!important;padding:2px!important;gap:0!important;box-shadow:0 2px 0 rgba(0,0,0,.5)!important}
#abar .gb::after{content:'';position:absolute;inset:-7px -2px}/* 隱形加大觸控範圍 */
#abar .gb svg{width:58%!important;height:58%!important}#abar .gb span{font-size:9px!important;letter-spacing:0!important;line-height:1}#abar .gb kbd{display:none!important}
#abar .gb.st.on{transform:translateY(-2px)}#abar .gb.sp.on span{font-size:10px!important}
#gPos{bottom:calc(100% + 2px)!important;padding:0 8px!important;gap:5px!important;border-width:1px!important;border-radius:9px!important}
#gPos b{font-size:10px!important}#gPosV{font-size:16px!important;min-width:2.8em!important}#gPos small{font-size:9px!important}
@media (max-width:760px) and (orientation:portrait){#skl{bottom:calc(84px + env(safe-area-inset-bottom))!important}#joyHint{bottom:calc(90px + env(safe-area-inset-bottom))!important}}
@media (orientation:landscape) and (max-height:500px){#skl{bottom:calc(4px + env(safe-area-inset-bottom))!important}#joyHint{bottom:calc(20px + env(safe-area-inset-bottom))!important}#cmb{top:120px}#rk{top:166px}#rk b{font-size:38px}#cmbN{font-size:30px}}
/* 使用者回饋：右下控制鈕整組縮為原本 70%（相對位置不變，錨定右下＋安全區） */
#skl{transform:scale(.7);transform-origin:100% 100%}
@media (max-width:760px) and (orientation:portrait){#skl{bottom:calc(76px + env(safe-area-inset-bottom))!important}}
body.touch #skl kbd,body.touch #abar kbd{display:none!important}
/* 使用者回饋（10:06）：左上狀態面板與右上 K 線面板再縮小 30%，背景再透明 20%（.5 → .3）；文字／K 線維持不透明 */
#sL{transform:scale(.7);transform-origin:0 0;background:rgba(6,20,15,.3)!important;text-shadow:0 1px 2px #000,0 0 3px #000}
#kc{width:clamp(224px,22.4vw,420px)!important;height:clamp(133px,12.95vw,238px)!important;background:rgba(4,14,11,.3)!important}
body.touch #kc{width:min(31.5vw,294px)!important;height:min(23.8vw,182px)!important}
@media (orientation:landscape) and (max-height:500px){body.touch #kc{width:23.8vw!important;height:min(13.3vw,30.8vh)!important}}
#sBtns .ic{position:relative;background:rgba(6,20,15,.3)!important}#sBtns .ic::after{content:'';position:absolute;inset:-6px}
#cmb{top:112px}#rk{top:166px}
@media (max-width:760px){#cmb{top:118px}#rk{top:164px}}
/* v2.2 有正負號的部位：做多／做空／空手，顏色跟著紅漲綠跌設定 */
#gPos #gPosD{text-shadow:0 1px 2px rgba(0,0,0,.8)}#gPosV{text-shadow:0 1px 3px rgba(0,0,0,.85)}
#gPos.L{border-color:var(--up)!important}#gPos.L #gPosD,#gPos.L #gPosV{color:var(--up)!important}
#gPos.S{border-color:var(--dn)!important}#gPos.S #gPosD,#gPos.S #gPosV{color:var(--dn)!important}
#gPos #gPosD{font-weight:900!important;opacity:1}
#gPos.flip.L{animation:gflip .62s cubic-bezier(.2,1.8,.4,1),gfu .7s}#gPos.flip.S{animation:gflip .62s cubic-bezier(.2,1.8,.4,1),gfd .7s}#gPos.flip:not(.L):not(.S){animation:gflip .5s}
@keyframes gflip{0%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.45)}60%{transform:translateX(-50%) scale(.94)}100%{transform:translateX(-50%) scale(1)}}
.gposf.flp{font-size:26px!important;top:-30px;left:50%!important;transform:translateX(-50%);white-space:nowrap;letter-spacing:2px;animation:gflt 1.1s ease-out forwards}.gposf.flp:not(.up):not(.dn){color:#f6e7c0}
/* v2.4 小地圖：底部縮圖＋中央放大圖 */
#mmT{position:fixed;z-index:6;padding:0;margin:0;border:0;border-radius:9px;background:transparent;cursor:zoom-in;touch-action:none;-webkit-tap-highlight-color:transparent}
#mmC{position:fixed;z-index:7;pointer-events:none}
#mmX{position:fixed;z-index:8;width:36px;height:36px;padding:0;border-radius:50%;border:1.5px solid #e7c66f;background:rgba(6,16,12,.88);color:#ffe9a8;font:700 18px/1 system-ui,sans-serif;cursor:pointer;touch-action:none;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#mmT.hide,#mmC.hide,#mmX.hide{display:none}
