/* Large thumb controls: movement left, combat/build right, jump below. */
body.playing { overscroll-behavior:none; user-select:none; -webkit-user-select:none; }
/* Rapid taps activate controls instead of the browser's double-tap zoom.
   Keep normal scrolling in menus and horizontal swiping in the inventory. */
html,body,button,a,input,dialog,.menu { touch-action:manipulation; }
input { font-size:16px; }
#game { touch-action:none; outline:none; }
#touch { touch-action:none; }
#selected-item { text-align:center; font-size:13px; font-weight:700; color:white; text-shadow:0 2px 4px #000; margin:0 0 7px; min-height:18px; }
.touch-controls #joystick { width:clamp(140px,38vw,184px);height:clamp(140px,38vw,184px);left:max(16px,env(safe-area-inset-left));bottom:calc(163px + env(safe-area-inset-bottom));border:3px solid #ffffff85;background:radial-gradient(circle,#17233338 30%,#17233380);box-shadow:0 3px 14px #10203030; }
.touch-controls #joystick div { width:44%;height:44%;top:28%;left:28%;border:2px solid #ffffffbb;background:#f4f7ff88;box-shadow:0 3px 10px #0c192450;pointer-events:none; }
#joystick>span { position:absolute;top:calc(100% + 7px);width:100%;text-align:center;font-size:12px;font-weight:800;letter-spacing:2px;pointer-events:none;text-shadow:0 1px 4px #142234; }
.touch-controls .touch-actions { right:max(16px,env(safe-area-inset-right));bottom:calc(153px + env(safe-area-inset-bottom));width:172px;height:172px;display:grid;grid-template-columns:80px 80px;grid-template-rows:80px 80px;gap:12px;pointer-events:none; }
.touch-controls .touch-actions button { width:80px;height:80px;padding:9px 3px;border:3px solid #ffffffab;background:#273441a6;box-shadow:0 4px 14px #10203036;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:800;pointer-events:auto;touch-action:none;color:white;text-shadow:0 1px 3px #000; }
.touch-actions .action-symbol { font-size:32px;line-height:1; }
.touch-controls #touch-build { grid-column:1;grid-row:1;border-color:#cff997; }
.touch-controls #touch-attack { grid-column:2;grid-row:1; }
.touch-controls #touch-jump { grid-column:2;grid-row:2;background:#ffffff35; }
.touch-controls #touch-jump .action-symbol { font-size:40px; }
.touch-actions button.held { background:#91b666d9!important;transform:scale(.95); }
.touch-controls .bottom-hud { width:min(620px,calc(100vw - 28px));bottom:calc(14px + env(safe-area-inset-bottom));z-index:9; }
.touch-controls .health-row { font-size:12px;letter-spacing:.7px; }
.touch-controls .health-track { height:13px;border:1px solid #f1f4f888;border-radius:0;margin-bottom:7px; }
.touch-controls #health { background:#eb585b; }
.touch-controls #selected-item { margin-bottom:5px;font-size:13px; }
.touch-controls #hotbar { gap:7px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;touch-action:pan-x;padding:3px 2px 5px;justify-content:unsafe center; }
.touch-controls #hotbar:has(button:nth-child(n+6):not([hidden])) { justify-content:flex-start; }
.touch-controls #hotbar button { flex:0 0 62px;min-width:62px;height:66px;border:2px solid #e5edfa77;background:#3a414fbf;border-radius:0;touch-action:pan-x; }
.touch-controls #hotbar button.active { border:3px solid #fff;background:#789bc178; }
.touch-controls #hotbar .slot-key { display:none; }
.touch-controls #hotbar .slot-name { display:block;font-size:10px;letter-spacing:0;max-width:100%;overflow:hidden; }
.touch-controls #hotbar .slot-icon { font-size:27px;margin-bottom:5px; }
.touch-controls #hotbar .slot-count { top:3px;right:4px;bottom:auto;font-size:12px;text-shadow:0 1px 3px #000; }
.touch-controls .key-help { display:none; }
.touch-controls #resources { bottom:calc(343px + env(safe-area-inset-bottom));font-size:12px;gap:12px;padding:9px 12px;border-radius:0;max-width:96vw; }
.touch-controls .shop-button { top:151px;bottom:auto;right:16px;min-height:48px;padding:12px 16px;z-index:10; }
.touch-controls .shop-button span { font-size:13px; }
.touch-controls .pause-button { top:151px;bottom:auto;left:16px;width:48px;height:48px;padding:10px;z-index:10; }
.touch-controls .objective { top:210px;left:16px;right:16px;max-width:none;pointer-events:none; }
.touch-controls .objective>span { display:none; }
.touch-controls .objective strong { font-size:12px; }
.touch-controls .icon-button { width:44px;height:44px; }
.touch-controls #connection { display:none; }
.touch-controls .top-hud { top:82px; }
.touch-controls #feed { top:240px;pointer-events:none; }
.touch-controls #target-label { font-size:14px; }
.touch-controls #toast { top:27%;font-size:14px; }
.touch-controls dialog button { min-height:48px; }
.touch-controls .controls-grid { font-size:14px; }
#input-status { margin:8px 0; }
#input-toggle { width:100%; }
@media (max-width:350px) {
 .touch-controls #joystick { width:128px;height:128px;left:8px; }
 .touch-controls .touch-actions { right:8px;width:164px;height:164px;grid-template-columns:76px 76px;grid-template-rows:76px 76px; }
 .touch-controls .touch-actions button { width:76px;height:76px; }
 .touch-controls header .brand { font-size:16px;gap:6px; }
 .touch-controls .header-right { gap:5px; }
 .touch-controls #resources { font-size:11px;gap:8px; }
}
@media (orientation:landscape) and (max-height:600px) {
 .touch-controls header { top:10px;left:18px;right:18px; }
 .touch-controls .brand { font-size:18px; }
 .touch-controls .top-hud { top:62px;left:18px;right:18px; }
 .touch-controls .objective { top:108px;left:18px; }
 .touch-controls #joystick { width:148px;height:148px;left:max(16px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom)); }
 .touch-controls .touch-actions { bottom:max(24px,env(safe-area-inset-bottom)); }
 .touch-controls .bottom-hud { width:min(560px,calc(100vw - 398px));bottom:12px; }
 .touch-controls #resources { bottom:148px;font-size:11px;gap:8px;padding:7px 10px; }
 .touch-controls #hotbar { justify-content:flex-start; }
 .touch-controls #selected-item { font-size:12px; }
 .touch-controls .shop-button { top:112px;right:18px;min-height:44px;padding:10px 13px; }
 .touch-controls .pause-button { top:10px;left:calc(50% - 24px);width:44px;height:44px; }
 .touch-controls #feed { top:108px;right:155px; }
 .touch-controls #toast { top:20%; }
 .touch-controls #target-label { top:calc(50% + 18px); }
}
@media (min-width:900px) and (min-height:601px) {
 .touch-controls .touch-actions { width:204px;height:204px;grid-template-columns:96px 96px;grid-template-rows:96px 96px; }
 .touch-controls .touch-actions button { width:96px;height:96px;font-size:14px; }
 .touch-controls #resources { bottom:375px; }
}
#joystick>span{top:auto;bottom:10px}.touch-controls .pause-button{z-index:14}
@media(orientation:landscape) and (max-height:600px){.menu{top:70px;left:5%;width:330px;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:8px}.menu h1{font-size:46px;line-height:.88;margin:10px 0}.menu .intro,.menu .menu-foot{display:none}.menu-actions .primary,.menu-actions .secondary{min-height:48px;padding:10px 12px}#menu-status{margin:8px 0;font-size:11px}#island-label{bottom:12%}}
body:not(.touch-controls) #resources{bottom:180px}

.shift-lock-button { position:fixed;left:45px;bottom:100px;min-width:132px;min-height:62px;padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#273441dc;border:2px solid #ffffff88;border-radius:0;color:white;pointer-events:auto;touch-action:manipulation;z-index:10; }
.shift-lock-button span { font-size:12px;font-weight:800; }
.shift-lock-button strong { font-size:16px; }
.shift-lock-button small { font-size:9px;opacity:.8; }
.shift-lock-button[aria-pressed="true"],.touch-controls #touch-lock[aria-pressed="true"] { background:#475f28e6;border-color:#eefe7c;color:#f1ffb5; }
.touch-controls .shift-lock-button { display:none; }
.touch-controls #touch-lock { grid-column:1;grid-row:2;gap:5px;font-size:10px; }
.touch-controls #touch-lock .lock-state { font-size:20px; }