/* Mobile controls use CSS pixels and safe-area insets, independent of canvas scale. */
.mobile main{padding:0;width:100%;max-width:none}.mobile footer{display:none}.mobile header{padding:2px max(8px,env(safe-area-inset-right));min-height:28px}.mobile header h1{font-size:12px;letter-spacing:1px}.mobile header button{font-size:12px}.mobile #status{font-size:14px}
#touch-menu{display:flex;gap:4px;overflow-x:auto;flex:none;padding:3px max(6px,env(safe-area-inset-left));background:#15241f;z-index:16}
#touch-menu button{flex:1;min-width:44px;min-height:44px;padding:4px;font-size:12px;line-height:1.2;touch-action:manipulation}
#touch-menu button[aria-pressed="true"]{background:#98c7ad;box-shadow:inset 0 0 0 2px #e9e6bb}
.mobile #stage{overflow:hidden}#touch-travel{position:absolute;right:max(8px,env(safe-area-inset-right));top:148px;z-index:12;width:126px;min-height:44px;padding:5px;font-size:14px;font-weight:600;border:1px solid #a9905c;touch-action:manipulation}
#touch-stick{position:absolute;z-index:12;width:112px;height:112px;left:max(16px,env(safe-area-inset-left));bottom:max(48px,env(safe-area-inset-bottom));border:2px solid #c7b07e;border-radius:50%;background:#14271fba;box-shadow:inset 0 0 24px #0007;touch-action:none;user-select:none;-webkit-user-select:none}
#touch-stick small{position:absolute;bottom:8px;left:0;width:100%;text-align:center;font-size:11px;color:#f0dca8;pointer-events:none}#touch-knob{position:absolute;left:34px;top:34px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#eee0b4,#a8925c);box-shadow:0 2px 12px #0008;pointer-events:none}
#touch-actions{position:absolute;z-index:12;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:224px;height:204px;pointer-events:none}
#touch-actions button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff2d0;background:radial-gradient(circle at 35% 20%,#59634b,#233c32 75%);border:2px solid #beaa76;box-shadow:0 3px 9px #0009;padding:6px;font-size:12px;line-height:1.15;overflow-wrap:anywhere;border-radius:50%}
#touch-actions button:active,#touch-actions button.pressed{filter:brightness(1.45);box-shadow:0 0 14px #ead593;transform:scale(.96)}
#touch-actions>button[data-action="attack"]{position:absolute;right:0;bottom:0;width:84px;height:84px;font-size:16px;font-weight:bold;background:radial-gradient(circle at 35% 20%,#907b48,#4b4528 75%)}
#touch-actions>button[data-action="auto"]{position:absolute;left:20px;top:0;width:48px;height:48px;font-size:11px}
.touch-skill{position:absolute;width:68px;height:68px}.touch-skill:nth-of-type(1){right:94px;bottom:0}.touch-skill:nth-of-type(2){right:112px;bottom:82px}.touch-skill:nth-of-type(3){right:16px;bottom:106px}
.touch-skill>button:first-child{width:68px;height:68px}.touch-skill .skill-name{display:block;font-size:11px}.touch-skill .skill-cooldown{display:block;font-size:17px;font-weight:bold}.touch-skill>button:first-child:disabled{opacity:.55}
#touch-actions .touch-skill-auto{position:absolute;top:-16px;right:-16px;width:44px;height:44px;padding:0;background:transparent;border:none;box-shadow:none}
.touch-skill-auto::after{content:'⏻';display:grid;place-items:center;margin:10px;width:24px;height:24px;border:1px solid #c1ab78;border-radius:50%;background:#111b16;color:#bbb;font-size:16px}
.touch-skill-auto[aria-pressed="true"]::after{background:#218144;color:#efffea;box-shadow:0 0 6px #7de39e}
#touch-actions>button[data-action="auto"][aria-pressed="true"]{background:#257548}#touch-actions button:disabled{cursor:default}#touch-menu button:disabled,#touch-travel:disabled{opacity:.55}
#touch-stick[hidden],#touch-actions[hidden],#touch-menu[hidden],#touch-travel[hidden]{display:none!important}
.mobile #activity-log{z-index:13;left:8px;bottom:4px;font-size:14px;width:min(300px,calc(100% - 16px));height:150px}.mobile #activity-log.collapsed{width:160px;height:38px}.mobile #activity-log.collapsed [data-filter]{display:none}.mobile #activity-log.collapsed header::before{content:'Chat / Loot';font-size:13px;padding:6px}.mobile #activity-log button{min-height:32px}.mobile #activity-log.collapsed header{min-height:36px}
@media(orientation:portrait){#touch-travel{top:130px;width:116px}#touch-actions{right:8px}#touch-stick{left:12px}.mobile header h1::after{content:' · แนวนอนแนะนำ';font-size:11px;font-weight:normal;letter-spacing:0}}
@media(max-width:360px){#touch-actions{transform:scale(.86);transform-origin:bottom right}#touch-stick{width:96px;height:96px;left:8px}#touch-knob{left:26px;top:26px}}
@media(orientation:landscape){#touch-travel{top:8px;right:max(146px,calc(env(safe-area-inset-right) + 146px));width:126px}}
.touch-skill:nth-of-type(3){bottom:90px}.touch-skill:nth-of-type(3) .touch-skill-auto{top:-8px}
.mobile main{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* Bottom icon dock; passives are managed inside the Skills window. */
.mobile main>header{display:none}
.mobile #touch-menu{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 12px);padding:4px;gap:4px;background:#e9dcb4ed;border:1px solid #9e855a;border-radius:6px;overflow:visible;z-index:16}
.mobile #touch-menu button{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:6px;border:1px solid #9e855a;background:#dbc793;border-radius:4px}
.mobile #touch-menu button[aria-pressed="true"]{background:#a8c1b0}
.touch-menu-icon{display:block;width:30px;height:30px;background-repeat:no-repeat;font:bold 28px/28px "Fiend UI", sans-serif;color:#3d291a}.touch-menu-icon svg{display:block;width:30px;height:30px;fill:#3d291a}
/* User-requested 25% reduction, anchored to the same bottom center. */
.mobile #touch-menu{transform:translateX(-50%) scale(.75);transform-origin:center bottom}
.mobile #touch-menu{transform:scale(.75);transform-origin:left bottom}
.mobile #touch-travel,.mobile #touch-fullscreen{position:absolute;z-index:16;width:36px;min-width:36px;height:36px;min-height:36px;padding:6px;border:1px solid #9e855a;border-radius:4px;background:#dbc793;touch-action:manipulation}
#touch-travel svg,#touch-fullscreen svg{display:block;width:22px;height:22px;fill:none;stroke:#3d291a;stroke-width:1.8;stroke-linejoin:round}
#touch-fullscreen[hidden]{display:none!important}
#touch-fullscreen-notice{position:absolute;z-index:30;top:100px;left:10%;width:80%;padding:12px;background:#17241ff2;color:#fff4d2;font-size:14px;border-radius:6px}
#touch-fullscreen-notice[hidden]{display:none}
@media(orientation:portrait){.mobile #touch-stick{bottom:118px}.mobile #touch-actions{bottom:118px}.mobile #activity-log.collapsed{top:100px;bottom:auto!important;width:120px}.mobile #activity-log:not(.collapsed){bottom:236px!important}}

/* Held combat aiming indicator; input stays on the captured button. */
.touch-aim-button{position:relative;touch-action:none}
.touch-aim-button.pressed::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border:2px solid #fff1bd;border-radius:50%;background:#caba8655;transform:translate(var(--aim-x,0px),var(--aim-y,0px));pointer-events:none}

/* Skill art retains source alpha and is masked to the round combat-button face. */
#touch-actions .combat-icon{position:absolute;inset:0;border-radius:inherit;clip-path:circle(50% at 50% 50%);background-repeat:no-repeat;pointer-events:none}
#touch-actions .has-skill-icon .skill-name{display:none}
#touch-actions .has-skill-icon .skill-cooldown{position:absolute;z-index:2;bottom:3px;left:50%;transform:translateX(-50%);min-width:18px;padding:1px 4px;border-radius:8px;background:#101712ba;color:#fff;font-size:13px;text-shadow:0 1px 2px #000;pointer-events:none}
#touch-actions .touch-aim-button.pressed::after{z-index:3}

/* Absolute aim point on the battlefield, independent of the pressed skill button. */
#touch-aim-cursor{position:absolute;z-index:18;width:22px;height:22px;margin:-11px;border:2px solid #fff1bd;border-radius:50%;box-shadow:0 0 0 1px #352918;pointer-events:none;box-sizing:border-box}
#touch-aim-cursor[hidden]{display:none}
#touch-actions .touch-aim-button.pressed::after{display:none}

/* Stats render with the Unity minimap; the canvas occupies the full viewport. */
.mobile main>header{display:none!important}

#touch-skill-pages{position:absolute;right:12px;bottom:220px;display:flex;align-items:center;gap:8px;z-index:8;color:#f1dcac;background:#171927dd;border-radius:8px;padding:3px;font:13px "Fiend UI", sans-serif}#touch-skill-pages[hidden]{display:none}#touch-skill-pages button{width:42px;height:36px;border:1px solid #7e7057;background:#292936;color:#ffe0a1;border-radius:6px;touch-action:manipulation}

@media(orientation:portrait){#touch-skill-pages{bottom:330px}}