/* Touch screens (roadmap item 84, src/touch-layout.js, docs: file tools/docs/mobile-ui.md). Loads after hud-reference.css.
   Only rules for body.hud-navy (touch-first devices): the PC HUD is untouched. Moved controls get the CSS translate/scale
   properties from the script; this file holds the edit mode, the skill slot size and the default spacing fixes. */
:root{--touch-safe-top:env(safe-area-inset-top,0px);--touch-safe-right:env(safe-area-inset-right,0px);--touch-safe-bottom:env(safe-area-inset-bottom,0px);--touch-safe-left:env(safe-area-inset-left,0px)}
/* Skill slots big enough to tap (≥38 px; they were 29–35 px on landscape phones). The orbs and the gaps keep their old
   size (hud-reference.css rule), so the bar's height, the utility row and the chat box stay where they were. */
body.adventure-hud.hud-navy #game>#adventure-hotbar{--tile:max(38px,clamp(29px,4.2vw,46px));--orb:calc(clamp(29px,4.2vw,46px)*1.85);--gap:calc(clamp(29px,4.2vw,46px)*.11)}
/* The utility row keeps its 7 buttons; buttons beyond them (this item's run / quick chat / party, later items) wrap to a
   second row above, starting at the left of the first one. */
body.adventure-hud.hud-navy #game>.hud-utilities{flex-wrap:wrap-reverse;max-width:308px}
body.hud-navy .hud-utilities>.hud-run,body.hud-navy .hud-utilities>.hud-quick-chat,body.hud-navy .hud-utilities>.hud-party{order:1}
/* Landscape phones: the party pills/frame sat on the joystick (and the open chat box covered "+ เชิญ / ออก"): the party
   block now stands right of the joystick, bottom-aligned with it (it grows upwards), and the chat box starts right of the
   party block. src/party-ui.js still writes left/top; these win only on short touch screens. */
@media (max-height:500px){
 body.hud-navy #party-dock{left:148px!important;top:auto!important;bottom:118px}
 body.hud-navy #chat-box{left:316px;width:min(380px,calc(100vw - 332px));min-width:0}
}
body.hud-navy #chat-box .chat-close{min-width:40px;min-height:40px;font-size:18px;line-height:1}
/* Jump: shown whenever the game offers a hop (src/touch-layout.js mirrors #jump.hidden as .touch-jump-ok); the V4 family
   keeps it in the first row as before, others get it at the start of the second row. */
body.hud-navy #game>.hud-utilities>[data-target="jump"].touch-jump-ok{display:grid!important}
body.hud-navy #game:not(.character-v4)>.hud-utilities>[data-target="jump"].touch-jump-ok{order:1}
/* A moved joystick stays above the panels it may now sit next to. */
body.hud-navy #joystick.touch-placed{z-index:4}
/* Run toggle (src/touch-layout.js; ❓1 default (ก)). */
body.hud-navy .hud-utilities>.hud-run[aria-pressed="true"]{border-color:#9fe0a0;background:#2f6b3ae6;box-shadow:0 0 8px #8fe08f99}
/* Party on touch screens (src/party-ui.js): hide the member list / show levels. */
body.hud-navy #party-frame .party-title{cursor:pointer}
body.hud-navy #party-frame.party-collapsed .party-members{display:none}
body.hud-navy #party-frame.party-expanded .party-level{display:inline}
body.hud-navy #party-frame.party-expanded{width:max-content;min-width:100%;max-width:min(260px,calc(100vw - 24px))}
body.hud-navy #party-accept,body.hud-navy #party-decline{min-height:40px;padding:8px 16px}
.hud-utilities>.hud-party{position:relative}
.hud-utilities>.hud-party[hidden],.hud-utilities>.hud-run[hidden]{display:none}
.hud-party-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border:1px solid #fff3c4;border-radius:9px;background:#d2452f;color:#fff;font:700 11px/16px Tahoma,sans-serif;text-align:center;pointer-events:none}
.hud-party-badge[hidden]{display:none}
.party-touch-sheet{position:absolute;z-index:35;display:grid;gap:6px;box-sizing:border-box;width:min(230px,calc(100vw - 16px));padding:8px;border:1.5px solid #8fcf8a;border-radius:10px;background:#1f3328f2;box-shadow:0 4px 14px #0008;color:#fff8dc;font:13px Tahoma,"Noto Sans Thai",sans-serif}
.party-touch-sheet[hidden]{display:none}
.party-touch-head{display:flex;align-items:center;gap:6px}
.party-touch-head strong{flex:1;color:#d9ffcf}
.party-touch-close{width:40px;height:40px;min-height:0;padding:0;border:1px solid #8fcf8a88;border-radius:8px;background:#0003;color:#fff8dc;font:bold 18px/1 Tahoma,sans-serif}
.party-touch-action,.party-touch-accept,.party-touch-decline{min-height:40px;padding:6px 10px;border:1px solid #8fcf8a88;border-radius:8px;background:#0003;color:#fff8dc;font:bold 13px Tahoma,"Noto Sans Thai",sans-serif;text-align:left}
.party-touch-accept{background:#2f6b3a;border-color:#9fd39a}
.party-touch-danger{border-color:#ff9a7e88;color:#ffe6dc}
.party-touch-invite{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:8px;background:#0002}
.party-touch-invite p{grid-column:1/-1;margin:0;font-weight:bold}
.party-touch-invite button{text-align:center}
/* Long press on a skill orb / slot. */
.touch-skill-tip{position:fixed;z-index:40;max-width:min(260px,calc(100vw - 16px));transform:translate(-50%,-100%);padding:6px 10px;border:1px solid #e4c276;border-radius:8px;background:#101c39f0;color:#fff0b2;font:12px/1.4 Tahoma,"Noto Sans Thai",sans-serif;text-align:center;pointer-events:none;box-shadow:0 3px 10px #000a}
.touch-skill-tip[hidden]{display:none}
/* ---- edit mode ---- */
body.touch-layout-editing #game>*:not(#touch-layout-overlay):not(#touch-layout-toolbar){pointer-events:none!important}
.touch-layout-overlay{position:fixed;inset:0;z-index:9000;background:#08140e47;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-layout-overlay[hidden],.touch-layout-toolbar[hidden]{display:none}
.touch-layout-handle{position:fixed;z-index:2;box-sizing:border-box;min-width:20px;min-height:20px;border:2px dashed #ffe08a;border-radius:10px;background:#ffe08a1f;touch-action:none;cursor:grab}
.touch-layout-handle.touch-layout-panel{z-index:1}
.touch-layout-handle.touch-layout-proxy{background:#ffe08a33;border-style:dotted}
.touch-layout-handle.touch-layout-selected{border-style:solid;border-color:#9ff0a8;background:#9ff0a82e;box-shadow:0 0 0 2px #0b1a12,0 0 12px #9ff0a8aa}
.touch-layout-tag{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);box-sizing:border-box;max-width:calc(100% - 2px);overflow:hidden;padding:0 3px;border-radius:5px;background:#0b1a12d9;color:#fff4c8;font:9px/13px Tahoma,"Noto Sans Thai",sans-serif;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.touch-layout-handle.touch-layout-panel .touch-layout-tag,.touch-layout-handle.touch-layout-selected .touch-layout-tag{font-size:11px;line-height:15px}
.touch-layout-toolbar{position:fixed;z-index:9001;left:50%;top:calc(6px + var(--touch-safe-top));transform:translateX(-50%);display:flex;align-items:center;gap:6px;box-sizing:border-box;max-width:calc(100vw - 12px);padding:6px 8px;border:1.5px solid #c8a767;border-radius:12px;background:#142027f2;color:#fff0be;font:12px Tahoma,"Noto Sans Thai",sans-serif;box-shadow:0 4px 14px #000a}
.touch-layout-toolbar.touch-layout-bottom{top:auto;bottom:calc(6px + var(--touch-safe-bottom))}
.touch-layout-label{display:grid;min-width:0;max-width:200px}
.touch-layout-label strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.touch-layout-label small{overflow:hidden;color:#d8cfa8;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.touch-layout-button{flex:none;min-width:40px;min-height:40px;padding:4px 10px;border:1px solid #c8a76799;border-radius:8px;background:#0b1a12;color:#fff0be;font:bold 13px Tahoma,"Noto Sans Thai",sans-serif}
#touch-layout-smaller,#touch-layout-larger{font-size:20px;line-height:1}
.touch-layout-button:disabled{opacity:.45}
.touch-layout-primary{background:#2f6b3a;border-color:#9fd39a;color:#f2ffe9}
.touch-layout-danger{border-color:#ff9a7e99;color:#ffe2d8}
@media (max-width:700px){.touch-layout-label small{display:none}.touch-layout-label{max-width:110px}.touch-layout-button{padding:4px 7px;font-size:12px}}
/* ---- typing on a touch screen: the box goes above the on-screen keyboard (src/quick-chat.js sets --vv-*) ---- */
body.hud-navy.touch-typing #joystick,body.hud-navy.touch-typing #adventure-hotbar,body.hud-navy.touch-typing .hud-utilities{visibility:hidden}
body.hud-navy.touch-typing #chat-box.chat-open{position:fixed;top:calc(var(--vv-top,0px) + 4px);bottom:auto;left:50%;right:auto;width:min(600px,calc(100vw - 16px));margin-left:calc(min(600px,calc(100vw - 16px))/-2);max-height:calc(var(--vv-height,100dvh) - 8px);translate:none!important;scale:none!important;z-index:40}
body.hud-navy.touch-typing #chat-box .chat-log{height:auto;min-height:0;max-height:max(24px,calc(var(--vv-height,100dvh) - 110px));flex:1 1 auto}