:root {
 --mobile-jump:76px;--mobile-action:58px;--mobile-stick:124px;--mobile-opacity:.92;
}
html[data-mobile-size=compact] { --mobile-jump:64px;--mobile-action:52px;--mobile-stick:108px; }
html[data-mobile-size=large] { --mobile-jump:86px;--mobile-action:64px;--mobile-stick:140px; }
.touch-device #mobile-controls {
 left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));
 bottom:max(12px,env(safe-area-inset-bottom));align-items:end;gap:12px;opacity:var(--mobile-opacity);
}
html[data-mobile-hand=left] #mobile-controls { flex-direction:row-reverse; }
#mobile-controls .joystick-wrap { display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none; }
#mobile-controls:not(.joystick-ready) .joystick-wrap { display:none; }
.touch-device #mobile-controls #joystick-zone {
 width:var(--mobile-stick);height:var(--mobile-stick)!important;
}
#mobile-controls .joystick-wrap>small { font-size:10px;color:#e1e7d0;letter-spacing:1px;text-shadow:1px 1px 0 #183428;margin:0; }
#mobile-controls .joystick-base {
 width:76%;height:76%;border:3px solid #afbc8c99;background:#263f34c9;box-shadow:inset 0 2px 0 #dde1bb20;
}
#mobile-controls .joystick-stick {
 width:46%;height:46%;left:27%;top:27%;border:2px solid #d8dcb0;
 background:#889a68;box-shadow:inset 0 3px 0 #b6c58d,inset 0 -3px 0 #61784c;
}
#mobile-controls .joystick-zone.pressed .joystick-base { border-color:#dfdca1; }
.touch-device #mobile-controls .mobile-actions {
 display:grid;grid-template-columns:var(--mobile-action) var(--mobile-jump);
 grid-template-rows:var(--mobile-action) var(--mobile-action);gap:10px;align-items:end;
}
.touch-device #mobile-controls .mobile-actions button {
 position:relative;width:var(--mobile-action)!important;height:var(--mobile-action)!important;
 padding:7px 3px;border:3px solid #899e7d;border-radius:5px;
 background:#324d3f!important;color:#e6e9c9!important;
 box-shadow:inset 0 2px 0 #a9b38b30,inset 0 -3px 0 #172f25,0 3px 0 #142b21;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.touch-device #mobile-controls #attack-button { grid-column:1;grid-row:2;background:#72503d!important;border-color:#c99571!important; }
.touch-device #mobile-controls #interact-button { grid-column:1;grid-row:1;background:#3a594b!important;border-color:#8fb6a0!important; }
.touch-device #mobile-controls .mobile-actions .jump-button {
 grid-column:2;grid-row:1/3;width:var(--mobile-jump)!important;height:var(--mobile-jump)!important;
 background:#777146!important;border-color:#c9bd81!important;align-self:end;
}
#mobile-controls .mobile-actions img { width:28px;height:28px;image-rendering:pixelated;pointer-events:none; }
#mobile-controls .mobile-actions .jump-button img { width:34px;height:34px; }
#mobile-controls .mobile-actions small { font-size:10px;line-height:1.1;margin:0;pointer-events:none; }
.touch-device #mobile-controls .mobile-actions .pressed {
 filter:none;transform:translateY(2px);border-color:#f1dfb6!important;
 box-shadow:inset 0 2px 0 #f5eac344,inset 0 -1px 0 #172f25;
}
.aim-indicator { display:none;position:absolute;left:50%;top:-6px;width:0;height:0;border:5px solid transparent;border-right-color:#f2dcaa;transform-origin:0 5px;transform:rotate(var(--aim-angle,0rad));pointer-events:none; }
.aiming .aim-indicator { display:block; }
.touch-device .bottom-bar {
 left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 165px);
 padding:7px;gap:6px;max-width:calc(100vw - 28px);
}
.touch-device .hotbar { gap:5px; }
.touch-device .hotbar button { width:46px;height:58px;border-width:2px;padding:4px; }
.touch-device .hotbar img { width:30px;height:30px; }
.touch-device .hotbar .slot-caption { font-size:8px; }
.touch-device .hotbar .key-number { font-size:9px; }
.touch-device .bag-button { width:38px;height:54px; }
.touch-device .game-nav { right:max(12px,env(safe-area-inset-right)); }
.touch-device .game-nav button { width:44px;height:44px; }
.touch-device .quest-tracker { top:178px;bottom:auto;left:12px;right:auto;width:185px;transform:none; }
.touch-device .quest-tracker strong { font-size:10px; }
.touch-device .quest-tracker small { font-size:9px; }
.touch-device .chat-box { bottom:calc(var(--mobile-stick) + 50px);max-width:195px; }
.touch-device .zoom-controls { top:auto;bottom:calc(var(--mobile-stick) + 100px);left:12px; }
.mobile-settings { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0; }
@media (max-width:600px) { .mobile-settings { grid-template-columns:1fr;gap:4px; } }
@media (orientation:portrait) and (max-width:380px) {
 :root { --mobile-jump:70px;--mobile-action:54px;--mobile-stick:108px; }
 html[data-mobile-size=large] { --mobile-jump:78px;--mobile-action:58px;--mobile-stick:116px; }
}
@media (orientation:landscape) {
 .touch-device #mobile-controls { bottom:max(10px,env(safe-area-inset-bottom)); }
 .touch-device .bottom-bar { bottom:max(12px,env(safe-area-inset-bottom));left:50%;max-width:calc(100vw - 330px); }
 .touch-device .hotbar button { width:42px;height:54px; }
 .touch-device .hotbar img { width:28px;height:28px; }
 .touch-device .bag-button { width:32px;height:50px; }
 .touch-device .game-nav { top:60px; }
 .touch-device .game-nav button { width:40px;height:40px; }
 .touch-device .quest-tracker { top:110px;left:214px;width:150px; }
 .touch-device .chat-box,.touch-device .chat-box.collapsed { bottom:calc(var(--mobile-stick) + 42px); }
 .touch-device .zoom-controls { bottom:calc(var(--mobile-stick) + 88px); }
 .mobile-settings { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (orientation:landscape) and (max-width:760px) {
 :root { --mobile-jump:68px;--mobile-action:54px;--mobile-stick:108px; }
 html[data-mobile-size=compact] { --mobile-jump:60px;--mobile-action:48px;--mobile-stick:94px; }
 html[data-mobile-size=large] { --mobile-jump:76px;--mobile-action:58px;--mobile-stick:116px; }
 .touch-device .hotbar { gap:3px; }
 .touch-device .hotbar button { width:39px;height:52px; }
 .touch-device .bottom-bar { padding:5px;gap:4px; }
 .touch-device .hotbar .slot-caption { font-size:7px; }
 .touch-device .bag-button { width:28px; }
 .touch-device .game-nav button { width:38px;height:38px; }
}
@media (orientation:landscape) and (max-width:620px) {
 .touch-device .bottom-bar { bottom:calc(max(10px,env(safe-area-inset-bottom)) + 112px);max-width:calc(100vw - 32px); }
 .touch-device .quest-tracker { top:107px;left:200px;width:138px; }
 .touch-device .chat-box { width:168px; }
 .touch-device .chat-box.collapsed { width:66px; }
 .touch-device .chat-box.collapsed .chat-heading>i,.touch-device .chat-box.collapsed .chat-heading>span:first-of-type { display:none; }
 .touch-device .chat-box.collapsed .chat-heading::before { content:'CHAT';font-size:9px; }
}
@media (orientation:landscape) and (max-height:330px) {
 :root { --mobile-jump:60px;--mobile-action:48px;--mobile-stick:92px; }
 html[data-mobile-size=large] { --mobile-jump:68px;--mobile-action:52px;--mobile-stick:100px; }
 .touch-device .quest-tracker { display:none; }
 .touch-device .bottom-bar { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 100px); }
 .touch-device .zoom-controls { display:none; }
 .touch-device .combat-hud { padding:5px;font-size:9px; }
 .touch-device #weapon-text { display:block;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
 .touch-device #effect-text { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 #mobile-controls .mobile-actions .pressed { transform:none; }
}
