/* Thumb controls; loaded after legacy desktop/portrait layouts. */
#game button,#game a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#world,#movementPad,.actiondock{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{font-size:16px}
@media(max-width:900px),(pointer:coarse) and (max-width:1200px),(max-height:600px) and (max-width:1200px){
 #game{overflow:hidden;overscroll-behavior:none}
 #movementPad,.in-town #movementPad{position:absolute;display:block;grid-template-columns:none;width:120px;height:120px;left:max(16px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));z-index:8;border:1px solid #aedddc60;border-radius:50%;background:radial-gradient(circle,#182f4480,#07152370);box-shadow:inset 0 0 18px #0008;touch-action:none}
 #movementPad .joystick-ring{position:absolute;inset:16px;border:1px solid #a6dcdd33;border-radius:50%;background:none;display:block}
 #movementPad .joystick-thumb{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d1eded,#6298b0);border:2px solid #d1f3f0;box-shadow:0 3px 12px #0008;display:block;pointer-events:none}
 #movementPad small{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:10px;text-shadow:0 1px 3px #000;pointer-events:none}
 #movementPad.held{border-color:#b9fff1;background:#173b5266}
 .bottomhud{inset:0;pointer-events:none;display:block;transform:none;width:auto;margin:0}
 .bottomhud>*{pointer-events:auto}
 .bottomhud .actiondock{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:204px;height:216px;max-width:none;display:block;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;margin:0}
 .actiondock .skills{position:absolute;inset:0;display:block;pointer-events:none}
 .actiondock .skills button{position:absolute;width:49px;height:49px;max-width:none;min-width:0;min-height:0;border-radius:50%;overflow:hidden;padding:0;background:#102537dd;border:1px solid #8babbc;box-shadow:0 2px 8px #0008;pointer-events:auto;touch-action:none}
 .actiondock .skills button:nth-child(1){left:3px;bottom:11px}
 .actiondock .skills button:nth-child(2){left:0;bottom:67px}
 .actiondock .skills button:nth-child(3){left:25px;bottom:119px}
 .actiondock .skills button:nth-child(4){left:80px;bottom:143px}
 .actiondock .skills button:nth-child(5){right:17px;bottom:119px}
 .actiondock .skills button:nth-child(6){right:0;bottom:67px}
 .actiondock .skills button>.skill-name{display:none}
 .actiondock .skills .interface-icon{inset:2px;width:auto;height:auto;opacity:.95;border-radius:50%}
 .actiondock .skills .skill-art{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);margin:0;opacity:1;border-radius:50%}.actiondock .skills .skill-lock .skill-art{opacity:.6}.actiondock .skills .skill-lock{border-style:dashed}.actiondock .skills .skill-lock:after{content:'·';position:absolute;bottom:0;right:5px;color:#d1dce4;font-size:16px}
 .actiondock .skills button .cooldown{font-size:19px;background:#06112066;color:white;text-shadow:0 2px 3px #000,1px 0 #000,-1px 0 #000;font-weight:800;z-index:3}
 .bottomhud .actiondock #attackBtn{position:absolute;right:43px;bottom:0;width:87px;height:87px;min-width:0;max-width:none;border-radius:50%;border:2px solid #ebcc90;background:radial-gradient(circle at 35% 30%,#87673dcc,#392f24e8);box-shadow:0 3px 16px #0008;padding:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
 #attackBtn b{font-size:31px;line-height:34px}.actiondock #attackBtn span{font-size:12px;line-height:16px}
 .actiondock kbd{display:none}
 .bottomhud .actiondock .consumable{position:absolute;top:-22px;width:44px;height:44px;min-width:0;max-width:none;padding:0;border-radius:12px;overflow:hidden;background:#102637d9}
 .actiondock #potionBtn{left:86px}.actiondock #etherBtn{right:24px}
 .actiondock .consumable .interface-icon{width:26px;height:26px;margin:5px auto 0}.actiondock .consumable .supply-name{display:none}.actiondock .consumable>span{position:absolute;bottom:0;right:4px;font-size:10px}
 .botdock{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:246px;width:144px;min-width:0;height:38px;margin:0}.botdock strong{font-size:10px}.botdock span{font-size:9px}.botdock button{padding:3px 6px}.botdock button:last-child{min-width:36px}
 .mission-state,.hint,#performanceStatus,#questTracker{display:none}
 #socialDock,.in-town #socialDock{left:max(12px,env(safe-area-inset-left));bottom:171px;top:auto}
 #chatToggle{position:static;min-height:40px;font-size:11px;padding:5px 8px;background:#0c24368c}
 #chatPanel{position:fixed;left:8px;bottom:170px;top:auto;transform:none;width:min(340px,calc(100vw - 16px));max-width:none;height:210px;max-height:calc(100dvh - 210px);background:#071824cf}
 #chatPanel.expanded{width:calc(100vw - 16px);height:calc(100dvh - 32px);max-height:none;bottom:16px}
 .chat-open #movementPad{visibility:visible}.chat-open:has(#chatPanel.expanded) #movementPad{visibility:hidden}
 #messages,.in-town #messages{left:12px;bottom:220px;max-width:155px;pointer-events:none}.message{font-size:10px;background:#091825a8}
 .nearby-loot,.in-town .nearby-loot{bottom:294px;right:8px;max-width:150px;max-height:86px;font-size:10px}
 .in-town .townbar{position:absolute;left:auto;right:8px;bottom:max(12px,env(safe-area-inset-bottom));width:190px;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;background:#071b2bb0}
 .townbar button{min-width:0;min-height:44px;padding:5px;font-size:11px}
 .in-town #messages{bottom:220px}
 #modal,#modal:is([data-view="npc-detail"],[data-view="quests"],[data-view="campaign"]){width:calc(100vw - 16px);max-width:680px;max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;background:#0b1d2fed}
 #modal .dialog-top{position:sticky;top:0;z-index:5;padding:10px 12px;background:#183345}.dialog-top .close{width:44px;height:44px;flex-shrink:0}
 #modal #modalBody{padding:12px;min-width:0}
 #modal .sheet-top,#modal[data-view="npc-detail"] .sheet-top{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start}
 #modal .sheet-top>*{min-width:0;overflow-wrap:anywhere}#modal .sheet-top>div:last-child{grid-column:2;width:auto}#modal .sheet-top>.sheet-art{display:block;grid-column:1}
 #modal .sheet-art,#modal[data-view="npc-detail"] .sheet-art,#modal .sheet-art canvas,#modal[data-view="npc-detail"] .sheet-art canvas{width:64px;height:86px;min-height:0}
 #modal .sheet-top h3{font-size:17px;line-height:1.5}.sheet-top p{line-height:1.65}
 #modal[data-view="npc-detail"]{max-height:72dvh;margin:auto auto max(12px,env(safe-area-inset-bottom))}
 #modal button{min-height:40px}#modal input,#modal select,#modal textarea,#characterSelect input,#chatForm input{font-size:16px}
 body:has(dialog[open]) #movementPad,body:has(dialog[open]) .bottomhud,body:has(dialog[open]) .townbar{visibility:hidden}
}
@media(orientation:portrait) and (max-width:900px){
 .hud{top:max(8px,env(safe-area-inset-top));left:8px;right:8px}.player{width:204px;max-width:calc(100vw - 88px);padding:4px}.player canvas{width:38px;height:60px}.player strong{font-size:13px}.player small{font-size:9px}.player #jobLevel{display:none}
 #menuToggle{min-width:48px;min-height:44px;padding:6px}
 .zone{top:102px;left:0;max-width:calc(100vw - 126px);text-align:left}.zone h1{font-size:14px}.zone .eyebrow,.zone>span:last-child{display:none}
 .righttools{top:56px;right:8px;width:72px;gap:3px}.righttools button{min-height:30px;font-size:9px;padding:4px}
 #networkStatus{top:152px;right:8px;max-width:108px;font-size:8px;padding:3px}.minimap,.in-town .minimap{top:180px;bottom:auto;right:8px;width:100px;padding:4px}.minimap canvas{width:90px;height:56px}.minimap>div:not(#cameraControls){display:none}
 #cameraControls button{min-height:32px}#targetPanel{top:135px;left:8px;transform:none;width:calc(100vw - 130px);max-width:240px;font-size:10px;padding:5px}
 #movementPad,.in-town #movementPad{width:112px;height:112px;left:12px;bottom:max(30px,env(safe-area-inset-bottom))}
 #upgradeNotice{display:none}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1200px){
 .minimap,.in-town .minimap{top:56px;right:12px;width:96px}.minimap canvas{width:86px;height:50px}.minimap>div:not(#cameraControls){display:none}
 #networkStatus{right:76px;top:12px;max-width:150px;font-size:9px}#cameraControls{margin:1px 0}#cameraControls button{min-height:27px}
 .righttools{left:12px;right:auto;top:102px;max-width:230px}.righttools button{min-height:32px}
 .botdock{left:154px;right:auto;bottom:14px;width:120px}
 #socialDock,.in-town #socialDock{left:154px;bottom:60px}#messages,.in-town #messages{left:154px;bottom:106px;max-width:180px}
 #chatPanel{left:154px;bottom:60px;width:min(340px,calc(100vw - 380px));height:210px;max-height:calc(100dvh - 76px)}
 .nearby-loot{right:224px;bottom:90px}
}
@media(max-width:360px){.bottomhud .actiondock{right:5px;width:190px}#movementPad,.in-town #movementPad{width:96px;height:96px;left:8px}.actiondock .skills button{width:46px;height:46px}.bottomhud .actiondock #attackBtn{right:37px;width:80px;height:80px}}