#touch-controls,#touch-status{display:none}.mobile-options{font-size:11px;gap:8px;flex-wrap:wrap}.mobile-options select{max-width:210px}
html[data-input=touch] body{overflow:hidden;overscroll-behavior:none}html[data-input=touch] #viewport{position:fixed;inset:var(--touch-top,0px) 0 auto;height:var(--touch-height,100dvh);min-height:0}
html[data-input=touch] header{display:none;position:fixed;z-index:65;top:calc(var(--touch-top,0px) + env(safe-area-inset-top) + 28px);left:8px;right:8px;max-height:calc(var(--touch-height,100dvh) - 140px);overflow:auto;padding:12px;grid-template-areas:none;grid-template-columns:1fr;gap:12px}
html[data-input=touch].touch-settings-open header{display:flex;flex-wrap:wrap}html[data-input=touch] header>*{grid-area:auto!important;min-width:0!important}html[data-input=touch] .mobile-options{width:100%}html[data-input=touch] .mobile-options label{min-width:0;flex:1;flex-wrap:wrap}
html[data-input=touch] #touch-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:fixed;z-index:60;bottom:calc(100dvh - var(--touch-top,0px) - var(--touch-height,100dvh));left:0;right:0;padding:4px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:#101c24ee}
html[data-input=touch] #touch-controls button{min-height:42px;padding:6px;font-size:12px;touch-action:manipulation}html[data-input=touch] button[aria-pressed=true]{outline:2px solid #e8cb72;background:#634424}
html[data-input=touch] #touch-status{display:block;position:fixed;left:max(8px,env(safe-area-inset-left));top:calc(var(--touch-top,0px) + env(safe-area-inset-top));max-width:calc(100vw - 16px);font-size:11px;z-index:55;background:#10202be0;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-input=touch] #viewport>.title,html[data-input=touch] #viewport>footer,html[data-input=touch] body>details{display:none}
html[data-input=touch] #combat-panel{display:none;bottom:108px;right:max(8px,env(safe-area-inset-right));max-height:calc(var(--touch-height,100dvh) - 145px);overflow:auto}html[data-input=touch].touch-state-open #combat-panel:not([hidden]){display:block}
html[data-input=touch] #chat-panel{display:none;z-index:56;left:max(6px,env(safe-area-inset-left));right:6px;bottom:104px;max-width:none}html[data-input=touch].touch-chat-open #chat-panel{display:block}html[data-input=touch] #chat-lines{max-height:64px}html[data-input=touch] #chat-input{font-size:16px;min-width:0}
html[data-input=touch] #inventory-panel{left:8px;right:auto;top:36px;max-height:calc(var(--touch-height,100dvh) - 140px);max-width:calc(100vw - 16px);z-index:45}html[data-input=touch] #inventory-items button{min-height:44px}
html[data-input=touch] #retail-ui .l2wnd{max-width:calc(100vw - 8px);max-height:calc(var(--touch-height,100dvh) - 128px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
html[data-input=touch] #retail-ui canvas{touch-action:pan-y}html[data-input=touch] #retail-ui .l2wnd-bar{touch-action:none}html[data-input=touch] #retail-ui .l2wnd-bar button::after{content:'';position:absolute;inset:-9px}
html[data-input=touch] #loading{z-index:54;left:8px;bottom:110px;max-width:calc(100% - 16px)}html[data-input=touch] #retry-loading{bottom:160px;z-index:55}

#account-panel{color:#e9eceb;background:#17232b;border:1px solid #9a8858;border-radius:6px;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;z-index:100}#account-panel::backdrop{background:#000a}#account-panel h2{font:22px Georgia,serif;margin:0 0 12px}#account-panel label{display:flex;flex-direction:column;align-items:stretch;margin:12px 0;gap:5px}#account-panel input,#account-panel select,#account-panel textarea{font:16px system-ui;max-width:100%;width:100%;padding:9px;background:#101c24;color:#fff;border:1px solid #65736c}#account-panel p{font-size:12px}#account-panel .account-actions{display:flex;flex-wrap:wrap;gap:8px}#account-panel [hidden]{display:none!important}#account-panel .guest-switch{display:flex;flex-direction:row;font-size:12px}#account-panel .guest-switch input{width:24px;flex-shrink:0}#account-panel textarea{height:110px;overflow-wrap:anywhere}#account-panel button{min-height:44px}

#touch-tooltip{position:fixed;z-index:90;left:12px;right:12px;top:calc(var(--touch-top,0px) + 36px);max-height:calc(var(--touch-height,100dvh) - 140px);overflow:auto;background:#17232bf5;color:#e9eceb;border:1px solid #d1c093;padding:12px;white-space:pre-line}#touch-tooltip[hidden]{display:none}html[data-input=touch] #retail-ui img{-webkit-touch-callout:none;user-select:none}

#client-options{position:relative;padding:6px 8px;flex:none;font-size:12px}#client-options-body{position:absolute;top:100%;right:0;width:360px;max-width:calc(100vw - 16px);padding:12px;display:flex;gap:8px;flex-wrap:wrap;background:#17232bf5;border:1px solid #65736c;z-index:70}#client-options:not([open]) #client-options-body{display:none}#client-options-body .mobile-options{display:flex}html[data-input=touch] #client-options{width:100%}html[data-input=touch] #client-options-body{position:static;max-width:none;width:100%}

html[data-input=touch] #account-panel{max-height:calc(var(--touch-height,100dvh) - 24px);top:calc(var(--touch-top,0px) + 12px);bottom:auto;margin-top:0}

html[data-input=touch]{--touch-bar-size:96px}html[data-input=touch] #retail-ui .l2wnd{max-height:calc(var(--touch-height,100dvh) - var(--touch-bar-size) - 40px);touch-action:pan-x pan-y}html[data-input=touch] #retail-ui canvas{touch-action:pan-x pan-y}@media(min-width:700px){html[data-input=touch]{--touch-bar-size:52px}html[data-input=touch] #touch-controls{grid-template-columns:repeat(8,minmax(0,1fr))}html[data-input=touch] #chat-panel{bottom:64px}html[data-input=touch] #loading{bottom:70px}}
