html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
canvas,#mc,#mc *{touch-action:none}
#mc{position:fixed;inset:0;pointer-events:none;z-index:20;transition:opacity .4s}#mc.idle{opacity:.72}
#mc .mc-zone{position:absolute;left:0;top:70px;width:50%;bottom:0;pointer-events:auto}
#mc .mc-stick{position:absolute;left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:140px;height:140px;pointer-events:auto}
#mc .mc-base{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(14,48,40,.3),rgba(6,22,19,.3));border:1.5px solid rgba(231,198,111,.55);box-shadow:inset 0 0 18px rgba(120,220,180,.15);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#mc .mc-knob{position:absolute;left:43px;top:43px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(200,255,230,.6),rgba(63,174,134,.55));border:1.5px solid rgba(255,243,196,.7);box-shadow:0 0 12px rgba(140,255,210,.35)}
#mc .mc-acts{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,64px);gap:12px;pointer-events:auto}
#mc .mc-btn,#mc .mc-ic{border-radius:50%;border:1.5px solid rgba(231,198,111,.75);color:#fff3c4;background:rgba(6,26,22,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);text-shadow:0 0 4px #000,0 0 2px #000;cursor:pointer;padding:0}
#mc .mc-btn{width:64px;height:64px;font:400 26px Brush,serif;opacity:.85}#mc .mc-btn.on{background:rgba(40,110,90,.7);box-shadow:0 0 16px rgba(231,198,111,.6)}
#mc .mc-jump{font-size:30px}#mc .mc-pause{font:700 15px Serif,serif}
#mc .mc-top{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));display:flex;gap:8px;pointer-events:auto}
#mc .mc-top.left{left:calc(10px + env(safe-area-inset-left));right:auto}
#mc .mc-ic{width:40px;height:40px;font:700 17px Serif,serif;background:rgba(6,26,22,.4)}
#mc .mc-rot{position:absolute;top:calc(56px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(6,26,22,.7);border:1px solid #8a6524;color:#e9d9a8;font:14px Serif,serif;padding:6px 14px;border-radius:16px;pointer-events:auto;white-space:nowrap}
body.touch #btns,body.touch #bJump{display:none!important}
body.touch .hframe{transform:scale(.8);transform-origin:top left}body.touch .hr{transform-origin:top right;top:calc(56px + env(safe-area-inset-top))}
@media (max-width:560px){body.touch .hframe{transform:scale(.68)}body.touch .hl{left:calc(6px + env(safe-area-inset-left));top:calc(6px + env(safe-area-inset-top))}body.touch #hBoss{top:120px}}
.ov{overflow-y:auto}.ov.scrollable{touch-action:pan-y}
body:not(.playing) #mc{display:none}
body.touch #hBoss{display:none}
#mc .mc-rot{top:40%;font-size:13px;opacity:.9}
#mc .mc-btn svg,#mc .mc-ic svg{display:block;margin:auto;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
#mc .mc-acts{position:absolute}
#mc .mc-btn.mc-spell{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);z-index:2;background:radial-gradient(rgba(6,26,22,.55) 60%,transparent 62%),conic-gradient(rgba(255,210,74,.85) calc(var(--r,0)*1%),rgba(255,255,255,.12) 0);border-color:rgba(255,224,138,.85)}
#mc .mc-btn.mc-spell.rdy{box-shadow:0 0 14px rgba(255,210,74,.8);opacity:.95}
#mc .mc-acts{gap:20px}
/* 6 鍵：3×2 緊湊排列（拇指可及）；冷卻環 conic-gradient */
#mc .mc-acts{grid-template-columns:repeat(3,56px);gap:10px}
#mc .mc-btn{width:56px;height:56px}
#mc .mc-btn.mc-spell,#mc .mc-btn.mc-heavy{position:static;transform:none;width:56px;height:56px;background:radial-gradient(rgba(6,26,22,.5) 60%,transparent 62%),conic-gradient(rgba(255,210,74,.85) calc(var(--r,0)*1%),rgba(255,255,255,.12) 0)}
@media (max-height:420px){#mc .mc-acts{grid-template-columns:repeat(3,50px);gap:8px}#mc .mc-btn,#mc .mc-btn.mc-spell,#mc .mc-btn.mc-heavy{width:50px;height:50px}}

/* 戰鬥鍵叢集：輕斬（原暫停位）、K線雨專屬鍵（取得法寶後出現，含冷卻環） */
#mc .mc-btn.mc-slash{background:radial-gradient(rgba(6,26,22,.5) 60%,transparent 62%),conic-gradient(rgba(255,210,74,.85) calc(var(--r,100)*1%),rgba(255,255,255,.12) 0)}
#mc .mc-btn.mc-krain{display:none;position:absolute!important;right:0;bottom:calc(100% + 12px);transform:none!important;border-color:#9fffd0;background:radial-gradient(rgba(6,26,22,.55) 60%,transparent 62%),conic-gradient(rgba(120,255,190,.9) calc(var(--r,100)*1%),rgba(255,255,255,.12) 0)}
body.has-krain #mc .mc-btn.mc-krain{display:block;animation:mckrg 1.5s ease-in-out 4}
#mc .mc-btn.mc-krain.rdy{box-shadow:0 0 14px rgba(120,255,190,.8)}
@keyframes mckrg{0%,100%{box-shadow:0 0 6px rgba(120,255,190,.4)}50%{box-shadow:0 0 24px rgba(120,255,190,1),0 0 40px rgba(255,90,74,.5)}}
body:has(#pause:not(.hide)) #mc,body:has(#end:not(.hide)) #mc{display:none}

html.standalone #mc .mc-ic[data-k=full]{display:none}

#mc .mc-btn.mc-wanfo,#mc .mc-btn.mc-carpet{position:absolute!important;bottom:calc(100% + 12px);width:52px;height:52px;font-size:22px;transform:none!important;border-color:#ffe39a;background:radial-gradient(rgba(6,26,22,.55) 60%,transparent 62%),conic-gradient(rgba(255,220,130,.9) calc(var(--r,100)*1%),rgba(255,255,255,.12) 0)}
#mc .mc-btn.mc-wanfo{right:76px}#mc .mc-btn.mc-carpet{right:140px}
@media (max-height:420px){#mc .mc-btn.mc-wanfo,#mc .mc-btn.mc-carpet{width:44px;height:44px;font-size:19px}#mc .mc-btn.mc-wanfo{right:70px}#mc .mc-btn.mc-carpet{right:122px}}
#mc .mc-btn img.ulti{width:64%;height:64%;object-fit:contain;display:block;margin:auto;pointer-events:none;filter:drop-shadow(0 0 2px #000)}
img.ulti.px{image-rendering:pixelated}
#mc .mc-btn img.ulti-carpet{width:84%;height:84%}
/* 效能：取消搖桿/按鍵 backdrop-filter 模糊（每幀重算），以略深底色替代 */
#mc .mc-base,#mc .mc-btn,#mc .mc-ic{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#mc .mc-base{background:radial-gradient(circle,rgba(14,48,40,.42),rgba(6,22,19,.42))}#mc .mc-ic{background:rgba(6,26,22,.5)}

/* 搖桿永遠清楚可見（不再淡到 .15）：加深底盤與外環 */
#mc .mc-base{background:radial-gradient(circle,rgba(14,48,40,.55),rgba(6,22,19,.6))!important;border:2.5px solid rgba(231,198,111,.85);box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 22px rgba(120,220,180,.25),0 0 14px rgba(0,0,0,.45)}
#mc .mc-base::after{content:'';position:absolute;inset:26%;border-radius:50%;border:1px dashed rgba(231,198,111,.4)}
#mc .mc-knob{background:radial-gradient(circle at 35% 35%,rgba(220,255,236,.9),rgba(63,174,134,.85))!important;border:2px solid #fff3c4}
#mc .mc-zone{top:calc(64px + env(safe-area-inset-top));bottom:0;width:48%}
@media (max-height:420px){#mc .mc-stick{width:118px;height:118px;left:calc(12px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom))}#mc .mc-knob{left:33px;top:33px;width:50px;height:50px}}
@media (max-height:360px){#mc .mc-stick{width:104px;height:104px}#mc .mc-knob{left:28px;top:28px;width:46px;height:46px}}
/* 覆蓋層（開始／暫停／結算）：矮螢幕（手機橫放）可捲動、不裁切頂端 */
.ov{overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;max-height:100dvh}
.ov>:first-child{margin-top:auto}.ov>:last-child{margin-bottom:auto}.ov>*{flex-shrink:0}
body.mc-modal #mc{display:none!important;pointer-events:none!important}.ov:not(.hide):not(.strip){z-index:60}
#skb{z-index:30!important}#skb{pointer-events:auto}/* 技能／無雙鍵永遠優先於搖桿 */
body.playing #mentorTip{z-index:18}/* 小M提醒在操作鍵下方，不擋按鈕 */
@media (orientation:portrait) and (max-width:380px){body.touch #mc .mc-stick{width:124px;height:124px}body.touch #mc .mc-knob{left:37px;top:37px;width:50px;height:50px}}