/* Thumb areas stay separate in landscape and in compact portrait screens. */
.joy{z-index:6}
.joyPad{position:absolute;left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));width:clamp(140px,26vw,230px);height:clamp(150px,48vh,220px);pointer-events:auto;touch-action:none}
.joy .base{box-sizing:border-box;left:50%;top:55%;width:116px;height:116px;margin:-58px 0 0 -58px;background:radial-gradient(circle,rgba(21,22,26,.32),rgba(21,22,26,.18));border:2px solid rgba(255,255,255,.7);box-shadow:0 4px 20px #0003,inset 0 0 0 12px #ffffff0a}
.joy .base:before,.joy .base:after{content:'';position:absolute;background:#ffffff24;left:50%;top:50%;transform:translate(-50%,-50%)}
.joy .base:before{width:1px;height:80%}.joy .base:after{width:80%;height:1px}
.joy .knob{width:48px;height:48px;margin:-24px 0 0 -24px;z-index:1;background:#fff;box-shadow:0 3px 14px #0005}
.joy.active .base{border-color:#ffd23a;background:rgba(21,22,26,.3)}
.joy .lbl{font-size:11px;letter-spacing:.1em;top:calc(100% + 8px)}
.touch .actions{--button:clamp(60px,17vh,78px);z-index:6;right:calc(16px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));width:calc(2 * var(--button) + 12px);height:calc(2 * var(--button) + 12px);display:grid;grid-template-columns:repeat(2,var(--button));grid-template-rows:repeat(2,var(--button));gap:12px}
.touch .actions button,.touch .actions [data-act=especial],.touch .actions [data-act=ataque]{position:static;width:var(--button);height:var(--button);font-size:12px;border-radius:24px;padding:5px;box-sizing:border-box;border:1px solid #ffffff4d;box-shadow:0 4px 16px #0005;transition:transform .08s,background .08s}
.touch .actions [data-act=levantada]{grid-column:1;grid-row:1}
.touch .actions [data-act=especial]{grid-column:2;grid-row:1;font-size:11px;border-color:#ffb42e8c}
.touch .actions [data-act=recepcao]{grid-column:1;grid-row:2}
.touch .actions [data-act=ataque]{grid-column:2;grid-row:2;background:#f7c844;color:#15161a;font-size:13px;border-color:#ffe79e}
.touch .actions button.pressed,.touch .actions button.hit{transform:scale(.93);background:#3c9450;color:#fff}
.touch .actions button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.touch .flash{bottom:calc(210px + env(safe-area-inset-bottom));max-width:65vw;text-align:center}
.menu-open .joy,.menu-open .actions,.install-guide-open .joy,.install-guide-open .actions{visibility:hidden}
@media (max-width:380px) and (orientation:portrait){.touch .actions{--button:60px;right:calc(10px + env(safe-area-inset-right));gap:10px;width:130px;height:130px}.joyPad{width:140px}.joy .base{width:108px;height:108px;margin:-54px 0 0 -54px}}
@media (max-height:350px) and (orientation:landscape){.touch .actions{--button:56px;gap:10px;width:122px;height:122px;bottom:calc(14px + env(safe-area-inset-bottom))}.joyPad{height:142px}.touch .flash{bottom:calc(155px + env(safe-area-inset-bottom))}}
@supports(height:100dvh){.sCard{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.joyPad{height:clamp(150px,48dvh,220px)}}
@media (prefers-reduced-motion:reduce){.touch .actions button{transition:none}}