@font-face{font-family:Brush;src:url(fonts/MaShanZheng.woff2) format("woff2")}
@font-face{font-family:Serif;src:url(fonts/NotoSerifTC.woff2) format("woff2");font-weight:400 900}
html,body{margin:0;height:100%;overflow:hidden;background:#06140f;color:#f3ead0;font-family:Serif,"Noto Serif TC","PingFang TC",serif;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#c{position:fixed;left:0;top:0;width:100vw;height:100vh;display:block}
html.pix #c{image-rendering:pixelated}
.hide{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hTop{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:4px}
#xpb{width:100%;height:9px;border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(231,198,111,.6);overflow:hidden}
#xpb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fae86,#c9f7dd)}
#hRow{display:flex;gap:14px;align-items:baseline;text-shadow:0 1px 3px #000;font-size:15px}
#hTime{font:26px Brush,serif;color:#fff3c4}
#hLv{color:#e7c66f}#hKill{color:#f3ead0;opacity:.9}
#hWep{position:absolute;left:calc(10px + env(safe-area-inset-left));top:calc(86px + env(safe-area-inset-top));display:flex;flex-wrap:wrap;gap:4px;max-width:46vw}
#hWep span{font-size:12px;padding:1px 6px;border-radius:8px;background:rgba(6,20,15,.7);border:1px solid rgba(231,198,111,.45)}
#hWep span.evo{border-color:#ffd24a;color:#ffd24a}
#hBoss{position:absolute;left:50%;transform:translateX(-50%);top:calc(92px + env(safe-area-inset-top));width:min(60vw,420px);text-align:center;font-size:13px}
#hBoss b{display:block;height:8px;border-radius:4px;background:rgba(0,0,0,.6);border:1px solid #c9a24a;overflow:hidden;margin-top:2px}#hBoss b i{display:block;height:100%;background:#d8452c}
#banner{position:absolute;left:0;right:0;top:32%;text-align:center;font:44px Brush,serif;color:#fff3c4;text-shadow:0 0 12px #c9a24a,0 2px 4px #000;opacity:0;transition:opacity .4s}
#banner small{display:block;font:16px Serif,serif;color:#f3ead0}
#banner.on{opacity:1}
#skb{position:fixed;z-index:7;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end}
.sk{position:relative;width:72px;height:72px;border-radius:50%;border:2px solid rgba(231,198,111,.75);background:rgba(6,20,15,.6) center/86% no-repeat;box-shadow:0 0 12px rgba(0,0,0,.6);padding:0;cursor:pointer;pointer-events:auto;overflow:hidden}
.sk i{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.66) calc(var(--r,0)*1%),transparent 0);border-radius:50%}
.sk.rdy{box-shadow:0 0 14px rgba(255,220,120,.85)}
.sk kbd{position:absolute;right:4px;bottom:2px;font:11px sans-serif;color:#fff3c4;opacity:.8}
body.touch .sk kbd{display:none}
.sk.wanfo{background-image:url(assets/ult/icons/wanfo_hd.webp)}.sk.carpet{background-image:url(assets/ult/icons/carpet_hd.webp)}
html.pix .sk.wanfo{background-image:url(assets/ult/icons/wanfo_px.webp);image-rendering:pixelated}html.pix .sk.carpet{background-image:url(assets/ult/icons/carpet_px.webp);image-rendering:pixelated}
.sk.pause{width:46px;height:46px;background:rgba(6,20,15,.6)}
.sk.pause svg{width:60%;height:60%;margin:20%;stroke:#e7c66f;fill:none;stroke-width:2.4;stroke-linecap:round}
body.touch .sk.pause{display:none}
body.touch #skb{bottom:calc(28px + env(safe-area-inset-bottom))}
.ov{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(3,10,8,.72);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;overflow:auto}
.ov.bg{background:linear-gradient(rgba(3,12,10,.35),rgba(3,12,10,.75)),url(assets/poster1_bg.webp) center/cover}
.fr{max-width:min(560px,94vw);text-align:center;padding:18px 20px;border-radius:16px;background:rgba(6,20,15,.82);border:1px solid rgba(231,198,111,.55);box-shadow:0 8px 30px rgba(0,0,0,.6);box-sizing:border-box;max-height:100%;overflow:auto}
h1.t{font:46px/1.1 Brush,serif;color:#fff3c4;margin:4px 0 6px;text-shadow:0 0 12px rgba(201,162,74,.7)}
h1.t small{display:block;font:15px Serif,serif;color:#e7c66f;letter-spacing:.2em}
.demo{display:inline-block;font:13px Serif,serif;color:#06140f;background:#e7c66f;border-radius:6px;padding:1px 8px;vertical-align:middle;margin-left:6px}
.sub{font-size:14px;opacity:.85;margin:4px 0 10px;line-height:1.6}
.gbtn{display:inline-block;min-width:180px;margin:6px;padding:10px 18px;font:18px Serif,serif;color:#06140f;background:linear-gradient(#f3d27a,#c9a24a);border:0;border-radius:10px;cursor:pointer;box-shadow:0 2px 0 #7a5a1a}
.gbtn.g2{background:rgba(231,198,111,.15);color:#f3ead0;border:1px solid rgba(231,198,111,.6);box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.row button{font:14px Serif,serif;padding:5px 10px;border-radius:8px;border:1px solid rgba(231,198,111,.5);background:rgba(6,20,15,.6);color:#f3ead0;cursor:pointer}
.row button.on{background:#e7c66f;color:#06140f}
.tip{font-size:12px;opacity:.7;line-height:1.6;margin-top:8px}
a.back{display:block;color:#e7c66f;margin-top:8px;font-size:14px}
.cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.card{width:150px;min-height:150px;padding:10px;border-radius:12px;background:linear-gradient(rgba(20,50,40,.95),rgba(6,20,15,.95));border:1.5px solid rgba(231,198,111,.7);cursor:pointer;text-align:center;box-sizing:border-box;color:#f3ead0;font:inherit}
.card:hover,.card:focus{border-color:#fff3c4;box-shadow:0 0 14px rgba(231,198,111,.6)}
.card .ic{font:34px Brush,serif;color:#fff3c4;height:44px}
.card .ic canvas{width:44px;height:44px}
.card b{display:block;font-size:17px;color:#e7c66f;margin:4px 0}
.card small{font-size:12.5px;line-height:1.5;opacity:.9}
.card.evo{border-color:#ffd24a;box-shadow:0 0 16px rgba(255,210,74,.6)}
.card .lv{font-size:11px;opacity:.7}
.es{display:grid;grid-template-columns:auto auto;gap:4px 16px;justify-content:center;font-size:15px;margin:8px 0}
.es b{color:#e7c66f;text-align:right}
#fps{position:fixed;left:4px;bottom:4px;z-index:30;font:12px monospace;color:#7f7;background:rgba(0,0,0,.5);padding:2px 5px;pointer-events:none}
@media (orientation:portrait){.card{width:min(44vw,150px)}.sk{width:62px;height:62px}h1.t{font-size:40px}}
@media (orientation:landscape) and (max-height:430px){.cards{flex-wrap:nowrap}.card{min-height:120px;width:140px;padding:6px}.card .ic{height:34px;font-size:26px}h1.t{font-size:32px}.fr{padding:10px 14px}.sk{width:58px;height:58px}#hBoss{top:calc(70px + env(safe-area-inset-top))}}

#hCap{display:flex;gap:8px;align-items:baseline;font-size:14px;text-shadow:0 1px 3px #000;flex-wrap:wrap;justify-content:center}
#hCap i{font-style:normal;color:#e7c66f}#hCapV{font:22px Brush,serif;min-width:54px;text-align:left}
#hTk{color:#f3ead0;opacity:.9}#hDate{font-family:monospace;opacity:.85}
@media (orientation:landscape) and (max-height:430px){#hCap{font-size:12px}#hCapV{font-size:18px}}
body.touch #mmode{display:none}
#c{cursor:crosshair}
.sk.ic svg{position:absolute;inset:18%;width:64%;height:64%;stroke:#e7c66f;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (orientation:portrait){#skb{flex-wrap:wrap;max-width:150px;justify-content:flex-end}}

/* 巨型魔王血條（頂部大條） */
#hBoss{width:min(82vw,760px);font:bold 17px Serif,serif;color:#ffe7b0;text-shadow:0 2px 4px #000;letter-spacing:.12em}
#hBoss b{height:16px;border-radius:8px;border:2px solid #e7c66f;box-shadow:0 0 14px rgba(255,90,40,.55);margin-top:4px}
#hBoss b i{background:linear-gradient(180deg,#ff8a5a,#c8281c 60%,#7a120c);transition:width .25s}
/* 連斬計數（三國無雙風） */
#hCombo{position:fixed;right:calc(18px + env(safe-area-inset-right));top:38%;text-align:right;color:#ffe7b0;font:italic 900 46px Serif,serif;text-shadow:0 3px 0 #7a120c,0 0 14px rgba(255,120,40,.7);opacity:0;transition:opacity .2s;pointer-events:none;z-index:6}
#hCombo span{display:block;font-size:18px;letter-spacing:.3em;margin-top:-6px}#hCombo.on{opacity:1}#hCombo.big b{color:#ffd24a;font-size:58px}
#hCombo.pop{animation:cpop .5s ease-out}@keyframes cpop{0%{transform:scale(1.8)}100%{transform:scale(1)}}
.sk.musou{border-color:#ff9a50}.sk.musou.rdy{box-shadow:0 0 18px rgba(255,140,60,.95);animation:mpul 1s infinite}@keyframes mpul{50%{box-shadow:0 0 6px rgba(255,140,60,.5)}}
html.pix #hCombo{font-family:monospace;font-style:normal}
@media (max-height:380px){.sk{width:54px;height:54px}#skb{gap:8px;bottom:calc(10px + env(safe-area-inset-bottom))}}

/* 右上角迷你 K 線圖：半透明、不攔截觸控 */
#kc{position:fixed;z-index:6;top:calc(30px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:280px;height:160px;pointer-events:none;background:rgba(4,14,11,.55);border:1px solid rgba(231,198,111,.45);border-radius:6px;opacity:.9}
body:not(.playing) #kc{display:none}
body.touch #kc{top:calc(56px + env(safe-area-inset-top));width:200px;height:116px;opacity:.82}
@media (orientation:portrait){body.touch #kc{width:min(46vw,190px);height:108px;top:calc(104px + env(safe-area-inset-top))}}
@media (max-height:420px){body.touch #kc{width:170px;height:92px;top:calc(52px + env(safe-area-inset-top))}}

.sk.snd svg{width:60%;height:60%;margin:20%;stroke:#e7c66f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk.snd .x{display:none}.sk.snd.off .x{display:inline}.sk.snd.off .w{display:none}.sk.snd.off{border-color:#ff6b5a}.sk.snd.off svg{stroke:#ff8a7a}
body.touch .sk.snd{display:none}
#mc .mc-ic.off{border-color:#ff6b5a;opacity:.9}#mc .mc-ic.off svg{opacity:.45}

.sk.gat svg{position:absolute;inset:18%;width:64%;height:64%;stroke:#bff7e2;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #3fae86)}
.sk.gat i{background:conic-gradient(rgba(255,120,60,.55) calc(var(--r,0)*1%),transparent 0)!important}
.sk.gat.on{box-shadow:0 0 16px rgba(140,255,210,.9);transform:scale(.94)}.sk.gat.oh{border-color:#ff6b5a;animation:gatoh .3s infinite alternate}
@keyframes gatoh{to{box-shadow:0 0 18px rgba(255,90,60,.9)}}
.gbtn.lbl{display:inline-block;text-decoration:none}
@media (orientation:landscape) and (max-height:500px){.ov{align-items:flex-start;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}#start .fr,#pause .fr,#end .fr{padding:8px 16px;max-width:min(760px,94vw)}#start h1.t{font-size:26px;margin:0}#start .sub{font-size:13px;line-height:1.5;margin:4px 0}#start .row button{padding:4px 10px;font-size:13px}#start .tip{font-size:11px;line-height:1.4}#start .gbtn,#pause .gbtn,#end .gbtn{padding:6px 16px;font-size:15px;margin:4px}#start #go{position:sticky;bottom:0;z-index:2;box-shadow:0 -6px 14px rgba(3,10,8,.8)}}
/* 小螢幕：頂列 HUD 避開右上圖示鍵與迷你 K 線 */
@media (orientation:portrait){body.touch #hTop{top:calc(50px + env(safe-area-inset-top))}body.touch #hWep{top:calc(130px + env(safe-area-inset-top))}body.touch #kc{top:calc(150px + env(safe-area-inset-top))}}
@media (orientation:landscape) and (max-width:900px){body.touch #hTop{right:calc(214px + env(safe-area-inset-right))}body.touch #hRow{font-size:13px;gap:8px}}
@media (orientation:portrait) and (max-width:380px){body.touch #hWep{top:calc(146px + env(safe-area-inset-top))}body.touch #kc{top:calc(170px + env(safe-area-inset-top))}}

/* 置中標題「小M老師美谷修仙傳」：與心魔無雙（survivor.css #hudLogo）相同的字、字型、樣式與位置；不攔截任何觸控 */
#hudLogo{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);pointer-events:none!important;z-index:5;white-space:nowrap;transition:opacity .3s}
#hudLogo *{pointer-events:none!important}
#hudLogo span{font-family:'Ma Shan Zheng',serif;font-size:clamp(16px,2.4vw,30px);letter-spacing:.06em;background:none;color:#efca6e;text-shadow:0 1px 0 #fff2c0,0 2px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5)}
#hudLogo .lm{font-family:'Noto Serif TC',serif;font-style:normal;font-weight:700;font-size:.82em;letter-spacing:0;margin:0 .04em}
@media (max-width:760px){#hudLogo{display:none}}
@media (orientation:landscape) and (max-height:500px){#hudLogo span{font-size:15px}#hudLogo{top:calc(4px + env(safe-area-inset-top))}}
body.touch #hudLogo{display:none}
/* 萬魔圍城頂部正中已有 Lv／時間／斬殺列（#hTop 約 98px 高），標題改放在其正下方，避免疊字 */
#hudLogo{top:calc(102px + env(safe-area-inset-top))}