#touch-controls{position:fixed;inset:0;z-index:45;pointer-events:none;user-select:none;-webkit-user-select:none;color:#e9e9df;font-family:system-ui,sans-serif}
#touch-controls.hidden{display:none!important}
#touch-controls button,#touch-toggle{pointer-events:auto;touch-action:none;min-height:48px;border:1px solid #8b8266;border-radius:12px;color:#e9e9df;background:rgba(20,31,41,.8);font:600 13px system-ui,sans-serif;padding:8px 12px;-webkit-tap-highlight-color:transparent}
#touch-controls button.held,#touch-controls button.selected,#touch-toggle.selected{background:rgba(63,105,124,.9);border-color:#d8d0a3}
#touch-toggle{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:2500;font-size:12px;min-height:40px}
.touch-toolbar{position:absolute;top:max(62px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:6px}
.touch-stick{pointer-events:auto;touch-action:none;position:absolute;left:max(26px,env(safe-area-inset-left));bottom:max(85px,calc(env(safe-area-inset-bottom) + 75px));width:142px;height:142px;border-radius:50%;border:2px solid rgba(189,204,211,.45);background:rgba(20,31,41,.32)}
.touch-stick-knob{display:block;position:absolute;inset:44px;border-radius:50%;background:rgba(170,201,214,.65);border:2px solid #d4e4e8;pointer-events:none}
.touch-stick small{position:absolute;bottom:8px;left:0;right:0;text-align:center;opacity:.7;pointer-events:none}
.touch-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(90px,calc(env(safe-area-inset-bottom) + 80px));width:300px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:end}
#touch-controls .touch-attack{grid-column:2/4;background:rgba(90,59,45,.85);min-height:62px}.touch-volley{grid-column:1}
.touch-skills{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:5px;width:min(94vw,760px)}
.touch-skills button{flex:1;min-width:0;max-height:60px;overflow:hidden;font-size:11px!important;padding:4px!important;line-height:1.2}
.touch-look-hint{position:absolute;right:18px;top:43%;opacity:.65;font-size:12px;text-shadow:0 1px 3px #000}.touch-crosshair{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);font-size:26px;color:#d4e5eb;text-shadow:0 1px 3px #000}
.touch-modal .touch-stick,.touch-modal .touch-actions,.touch-modal .touch-skills,.touch-modal .touch-look-hint,.touch-modal .touch-crosshair{display:none}
body.touch-active #game-container canvas{touch-action:none}body.touch-active #skill-hotbar,body.touch-active #weapon-hud,body.touch-active #controls-hint{display:none}
@media(pointer:coarse){input,select,textarea{font-size:16px!important}}
@media(max-width:800px){.touch-stick{width:116px;height:116px;left:18px;bottom:80px}.touch-stick-knob{inset:35px}.touch-actions{width:260px;gap:4px;bottom:80px}#touch-controls button{font-size:11px;padding:6px;min-height:44px}.touch-look-hint{display:none}.touch-toolbar{top:58px}body.touch-active #party-hud{max-width:175px;max-height:180px;overflow:auto}body.touch-active #boss-hud{max-width:50vw}}
@media(max-height:560px){.touch-actions{grid-template-columns:repeat(4,1fr);width:340px;bottom:70px}.touch-attack{grid-column:3/5!important}.touch-volley{grid-column:1/3!important}.touch-toolbar{top:12px;right:145px}.touch-stick{bottom:70px;width:112px;height:112px}.touch-stick-knob{inset:34px}}