html[data-client=mobile],html[data-client=mobile] body{overscroll-behavior:none;overflow:hidden;-webkit-text-size-adjust:100%}
html[data-client=mobile] #gameCanvas{touch-action:none}
html[data-client=mobile] input,html[data-client=mobile] select{font-size:16px!important}
html[data-client=mobile] button{min-height:36px;touch-action:manipulation}
html[data-client=mobile] #player-hud{left:max(6px,env(safe-area-inset-left))!important;top:max(6px,env(safe-area-inset-top))!important;width:156px!important;padding:7px!important;transform:none!important}
html[data-client=mobile] #minimap-window{right:max(6px,env(safe-area-inset-right))!important;top:max(6px,env(safe-area-inset-top))!important;left:auto!important;width:100px!important;padding:4px!important;transform:none!important}
html[data-client=mobile] #minimap-canvas{width:96px!important;height:96px!important}
html[data-client=mobile] #party-compact{left:6px!important;top:160px!important;width:150px!important}
html[data-client=mobile] #quick-bar{position:fixed!important;left:50%!important;bottom:calc(48px + env(safe-area-inset-bottom))!important;top:auto!important;transform:translateX(-50%)!important;display:grid!important;grid-template-columns:repeat(5,44px)!important;gap:4px!important;width:max-content!important;padding:3px!important}
html[data-client=mobile] #quick-bar .q-slot{width:44px!important;height:44px!important;touch-action:manipulation}
html[data-client=mobile] #menu-bar{left:50%!important;bottom:env(safe-area-inset-bottom)!important;top:auto!important;transform:translateX(-50%)!important;max-width:100vw!important;width:max-content!important;overflow-x:auto;display:flex!important;gap:2px!important;padding:3px!important}
html[data-client=mobile] #menu-bar button{flex-shrink:0;min-width:36px;padding:4px!important;font-size:11px!important}
html[data-client=mobile] .window-panel{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(420px,94vw)!important;max-width:94vw!important;max-height:calc(var(--mobile-height,100dvh) - 24px)!important;overflow:auto!important;box-sizing:border-box;padding:12px!important;touch-action:pan-y}
html[data-client=mobile] #chat-container{left:6px!important;bottom:156px!important;width:min(220px,55vw)!important;max-height:100px!important}
html[data-client=mobile] #chat-messages{max-height:70px!important;font-size:11px!important}
html[data-client=mobile] #chat-container.active{z-index:2000;bottom:160px!important;max-height:170px!important}
html[data-client=mobile] #chat-input{width:100%;box-sizing:border-box}
html[data-client=mobile] #login-ui-wrapper,html[data-client=mobile] #login-layout-anchor{max-width:94vw!important}
html[data-client=mobile] #char-select-screen,html[data-client=mobile] #char-create-screen{overflow:auto;max-height:100dvh}
html[data-client=mobile] .char-grid{flex-wrap:wrap;max-width:94vw}
#mobile-actions{position:fixed;right:max(6px,env(safe-area-inset-right));bottom:calc(150px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:5px;pointer-events:auto;z-index:104}
#mobile-actions button{background:#202936e8;color:#f3ead3;border:1px solid #8e8067;border-radius:8px;padding:7px;min-width:44px}
#mobile-picker{position:fixed;z-index:20000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,90vw);padding:14px;background:#202936;color:white;border:1px solid #b19a70;border-radius:10px}
#mobile-picker button{margin:4px;min-width:44px}
@media(orientation:landscape){html[data-client=mobile] #quick-bar{grid-template-columns:repeat(10,40px)!important;bottom:43px!important}html[data-client=mobile] #quick-bar .q-slot{width:40px!important;height:40px!important}html[data-client=mobile] #chat-container{bottom:98px!important}html[data-client=mobile] #party-compact{top:140px!important}#mobile-actions{bottom:95px}}

html[data-client=mobile] .char-select-container{width:94vw!important;box-sizing:border-box}
html[data-client=mobile] .char-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html[data-client=mobile] #inventory-panel{position:fixed!important;left:3vw!important;top:5dvh!important;width:94vw!important;max-height:85dvh!important;box-sizing:border-box}
html[data-client=mobile] .glass-panel{backdrop-filter:none!important}
html[data-client=mobile] [draggable=true]{-webkit-touch-callout:none}
html[data-client=mobile] [draggable=true]{touch-action:none}
html[data-client=mobile] .create-box{width:94vw!important;max-height:94dvh;overflow:auto!important}
html[data-client=mobile] .create-body{flex-wrap:wrap}
html[data-client=mobile] dialog{max-width:90vw!important;max-height:85dvh!important;box-sizing:border-box}
/* Entry screens must scroll from their top, including with a software keyboard. */
html[data-client=mobile] #login-screen,html[data-client=mobile] #char-select-screen,html[data-client=mobile] #char-create-screen{position:fixed!important;top:var(--mobile-top,0px)!important;left:0;width:100%!important;height:var(--mobile-height,100dvh)!important;max-height:none!important;box-sizing:border-box;overflow:auto!important;overscroll-behavior:contain;align-items:center!important;justify-content:flex-start!important;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));-webkit-overflow-scrolling:touch}
html[data-client=mobile] #login-screen{justify-content:safe center!important}
html[data-client=mobile] #login-layout-anchor{flex-shrink:0;width:min(360px,100%)!important}
html[data-client=mobile] #login-ui-wrapper{animation:none!important;opacity:1!important}
html[data-client=mobile] .title-image{max-width:260px;max-height:100px;object-fit:contain;left:0;margin-bottom:8px}
html[data-client=mobile] .login-box{width:min(320px,100%);padding:12px 18px}
html[data-client=mobile] #sound-hint-container{position:static;margin:6px 0;font-size:11px}
html[data-client=mobile] #video-bg{z-index:0!important;pointer-events:none;width:100%!important;height:100%!important;object-fit:cover;background:#162332}
html[data-client=mobile][data-mobile-phase=entry] #gameCanvas,html[data-client=mobile][data-mobile-phase=entry] #highlightCanvas{visibility:hidden;pointer-events:none}
html[data-client=mobile] .char-select-container{width:100%!important;max-width:700px;padding:8px;flex-shrink:0}
html[data-client=mobile] .char-select-header{margin-bottom:12px;gap:8px}
html[data-client=mobile] .char-select-header-title{font-size:22px;letter-spacing:0}
html[data-client=mobile] .char-grid{max-width:none;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
html[data-client=mobile] .char-sel-slot{height:180px;min-width:0;padding-bottom:10px;touch-action:pan-y}
html[data-client=mobile] .char-sel-slot:hover{transform:none}
html[data-client=mobile] .char-sel-slot .avatar-wrapper{transform:translateX(-50%) scale(1);bottom:35px}
html[data-client=mobile] .char-sel-slot .delete-btn{opacity:1;width:36px;height:36px;top:4px;right:4px}
html[data-client=mobile] .create-box{width:min(600px,100%)!important;max-height:none!important;overflow:visible!important;flex-shrink:0;margin:0 auto}
html[data-client=mobile] .create-header{font-size:18px;padding:10px}
html[data-client=mobile] .create-body{padding:12px;gap:16px;flex-wrap:wrap;align-items:flex-start}
html[data-client=mobile] .create-left{width:100%;min-width:0}
html[data-client=mobile] .preview-box{height:140px;width:140px;margin-bottom:8px}
html[data-client=mobile] .preview-box .avatar-wrapper{transform:translateX(-50%) scale(1)}
html[data-client=mobile] .preview-controls{margin-bottom:10px}
html[data-client=mobile] .input-row{gap:12px;margin-bottom:8px;justify-content:center}
html[data-client=mobile] .input-group{width:auto;flex:1;max-width:250px;min-width:0}
html[data-client=mobile] .input-group input{width:100%;min-width:0;box-sizing:border-box}
html[data-client=mobile] .create-right{width:100%;min-width:0;flex:auto;gap:12px}
html[data-client=mobile] .color-panel{display:flex;flex-wrap:wrap;gap:6px}
html[data-client=mobile] .color-panel>*{min-width:30px;min-height:30px;box-sizing:border-box}
html[data-client=mobile] .create-box>.action-row{position:sticky;bottom:0;z-index:2;box-sizing:border-box;padding:10px;background:#172333;border-top:1px solid #526173;flex-shrink:0}
html[data-client=mobile] .action-row button{min-height:44px}
html[data-client=mobile] #create-warning{position:sticky;top:0;left:auto;transform:none;max-width:90vw;box-sizing:border-box;flex-shrink:0;white-space:normal;font-size:13px;padding:8px}
html[data-client=mobile] #mobile-media-controls{position:fixed;right:8px;top:max(8px,env(safe-area-inset-top));z-index:22;display:flex;gap:5px}
html[data-client=mobile] #mobile-media-controls button{background:#172333dd;color:white;border:1px solid #8398ab;border-radius:6px;font-size:12px;padding:6px}
html[data-client=mobile] .window-panel{top:calc(var(--mobile-top,0px) + var(--mobile-height,100dvh)/2)!important}
html[data-client=mobile] #chat-container.active{position:fixed!important;bottom:auto!important;top:calc(var(--mobile-top,0px) + var(--mobile-height,100dvh) - 150px)!important;width:min(380px,calc(100vw - 12px))!important;max-height:144px!important}
html[data-client=mobile] .job-class-dialog{padding:12px;max-height:var(--mobile-height,100dvh)}
html[data-client=mobile] .job-choice{flex-wrap:wrap}
@media(orientation:landscape){html[data-client=mobile] .create-left{width:48%}html[data-client=mobile] .create-right{width:46%}html[data-client=mobile] .title-image{max-height:60px}html[data-client=mobile] .char-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}

/* Native tap overlay is unrelated to gameplay targeting. */
html[data-client=mobile] *{-webkit-tap-highlight-color:transparent}
html[data-client=mobile] [draggable=true]{touch-action:pan-y!important;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
html[data-client=mobile] button,html[data-client=mobile] .slot{touch-action:manipulation;min-height:44px}
html[data-client=mobile] input,html[data-client=mobile] textarea{user-select:text;-webkit-user-select:text}
html[data-client=mobile] .mobile-info-dialog{width:min(360px,92vw);max-height:80dvh;overflow:auto;background:#182332;color:#eee;border:1px solid #a78b56;border-radius:12px;padding:14px}
html[data-client=mobile] .mobile-info-dialog::backdrop{background:#0007}
html[data-client=mobile] .mobile-info-copy{position:static!important;display:block!important;width:auto!important;max-height:none!important;overflow:visible!important}
html[data-client=mobile] .mobile-item-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
html[data-client=mobile] .mobile-item-actions button{flex:1;min-width:90px;background:#2a3b4d;color:#ffe2a2;border:1px solid #8c7957;border-radius:6px}
html[data-client=mobile] .window-panel{width:min(460px,96vw)!important;max-width:96vw!important;max-height:calc(var(--mobile-height,100dvh) - 16px)!important;padding:10px!important}
html[data-client=mobile] #inv-grid{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important;gap:5px!important}
html[data-client=mobile] .window-header{position:sticky;top:-10px;background:#1e2b3b;z-index:4;padding:6px;min-height:36px}
html[data-client=mobile] .window-header button{min-width:44px}

/* Shared bottom row: narrow chat on the left, quick slots on the right. */
html[data-client=mobile]{--mobile-quick-width:150px;--mobile-bottom-height:194px;--mobile-dock-bottom:calc(48px + env(safe-area-inset-bottom) + max(0px,100dvh - var(--mobile-height,100dvh) - var(--mobile-top,0px)))}
html[data-client=mobile] #quick-bar{left:auto!important;right:max(6px,env(safe-area-inset-right))!important;top:auto!important;bottom:var(--mobile-dock-bottom)!important;transform:none!important;grid-template-columns:repeat(3,44px)!important;gap:4px!important;width:var(--mobile-quick-width)!important;height:var(--mobile-bottom-height)!important;box-sizing:border-box;padding:3px!important;justify-content:center;align-content:start}
html[data-client=mobile] #quick-bar .q-slot{width:44px!important;height:44px!important;box-sizing:border-box}
html[data-client=mobile] #chat-container,html[data-client=mobile] #chat-container.active{position:fixed!important;left:max(6px,env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:var(--mobile-dock-bottom)!important;width:min(260px,calc(100vw - var(--mobile-quick-width) - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;height:var(--mobile-bottom-height)!important;max-height:var(--mobile-bottom-height)!important;min-width:0!important;box-sizing:border-box;transform:none!important;display:flex;flex-direction:column;justify-content:flex-end}
html[data-client=mobile] #chat-messages{width:100%!important;max-height:100%!important;min-height:0;box-sizing:border-box;overflow-y:auto;overflow-wrap:anywhere;word-break:break-word;font-size:11px!important}
html[data-client=mobile] #chat-container.active #chat-messages{max-height:calc(var(--mobile-bottom-height) - 48px)!important}
html[data-client=mobile] #chat-input{flex-shrink:0;width:100%!important;min-height:44px;box-sizing:border-box}
html[data-client=mobile] #mobile-actions{bottom:calc(var(--mobile-dock-bottom) + var(--mobile-bottom-height) + 6px)!important;flex-direction:row;flex-wrap:wrap;max-width:220px;justify-content:flex-end}
@media(min-width:600px){html[data-client=mobile]{--mobile-quick-width:246px;--mobile-bottom-height:98px}html[data-client=mobile] #quick-bar{grid-template-columns:repeat(5,44px)!important}}

/* User reference: ten quick slots above a single menu row. */
html[data-client=mobile]{--reference-slot:clamp(28px,calc((100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right))/10),44px);--reference-menu:44px}
html[data-client=mobile] #quick-bar{left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important;bottom:calc(var(--reference-menu) + 4px + env(safe-area-inset-bottom))!important;width:auto!important;height:calc(var(--reference-slot) + 6px)!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;grid-template-rows:var(--reference-slot)!important;gap:2px!important;padding:3px!important;transform:none!important}
html[data-client=mobile] #quick-bar .q-slot{width:100%!important;height:var(--reference-slot)!important;min-width:0!important;min-height:0!important;margin:0!important}
html[data-client=mobile] #quick-bar .q-slot img{max-width:100%!important;max-height:100%!important}
html[data-client=mobile] #menu-bar{position:fixed!important;left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important;bottom:env(safe-area-inset-bottom)!important;top:auto!important;width:auto!important;height:var(--reference-menu)!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:2px!important;padding:2px!important;box-sizing:border-box;transform:none!important;overflow:hidden!important}
html[data-client=mobile] #menu-bar .menu-btn{width:100%!important;min-width:0!important;height:40px!important;min-height:0!important;margin:0!important;padding:2px!important;font-size:11px!important}
html[data-client=mobile] #menu-bar .hotkey{display:none}
html[data-client=mobile] #mobile-actions{right:max(6px,env(safe-area-inset-right))!important;bottom:calc(var(--reference-menu) + var(--reference-slot) + 16px + env(safe-area-inset-bottom))!important;display:flex;flex-direction:row;flex-wrap:nowrap;max-width:none}
html[data-client=mobile] #mobile-actions button{min-width:44px;min-height:44px}
html[data-client=mobile] #mobile-actions [data-action=cancel]{display:none}
html[data-client=mobile] body.job-targeting #mobile-actions [data-action=cancel]{display:block}
html[data-client=mobile] #chat-container{left:max(6px,env(safe-area-inset-left))!important;bottom:calc(var(--reference-menu) + var(--reference-slot) + 14px + env(safe-area-inset-bottom))!important;width:calc(100vw - 124px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;max-width:280px!important;height:140px!important;max-height:140px!important}
html[data-client=mobile] #chat-container.active{left:max(6px,env(safe-area-inset-left))!important;top:auto!important;bottom:calc(var(--reference-menu) + var(--reference-slot) + 14px + env(safe-area-inset-bottom) + max(0px,100dvh - var(--mobile-height,100dvh) - var(--mobile-top,0px)))!important;width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;max-width:380px!important;height:140px!important;max-height:140px!important}
html[data-client=mobile] #chat-container [data-mobile-chat-send]{display:none;min-height:32px;flex-shrink:0;background:#233447;color:white;border:1px solid #8c7957;border-radius:5px}
html[data-client=mobile] #chat-container.active [data-mobile-chat-send]{display:block}
html[data-client=mobile] #chat-container.active #chat-messages{max-height:60px!important}
/* Resting chat is text only; expanded chat is a full-width input above the menu. */
html[data-client=mobile] #chat-container:not(.active),html[data-client=mobile] #chat-container:not(.active) #chat-messages,html[data-client=mobile] #chat-container:not(.active) #chat-messages>div{background:transparent!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
html[data-client=mobile] #chat-container:not(.active){pointer-events:none}
html[data-client=mobile] #chat-container.active{left:max(4px,env(safe-area-inset-left))!important;right:max(4px,env(safe-area-inset-right))!important;width:auto!important;max-width:none!important;bottom:calc(var(--reference-menu) + 4px + env(safe-area-inset-bottom) + max(0px,100dvh - var(--mobile-height,100dvh) - var(--mobile-top,0px)))!important;height:auto!important;max-height:180px!important;z-index:2200!important;background:#172333f5!important;padding:6px!important;border:1px solid #8c7957;pointer-events:auto;display:grid!important;grid-template-columns:minmax(0,1fr) 52px;gap:5px}
html[data-client=mobile] #chat-container.active #chat-messages{grid-column:1/-1;max-height:88px!important}
html[data-client=mobile] #chat-container.active #chat-input{display:block!important;grid-column:1;min-width:0;margin:0!important}
html[data-client=mobile] #chat-container.active [data-mobile-chat-send]{grid-column:2;min-height:44px}
html[data-client=mobile] body.mobile-chat-open #quick-bar{visibility:hidden}
html[data-client=mobile] body.mobile-chat-open #menu-bar{bottom:calc(env(safe-area-inset-bottom) + max(0px,100dvh - var(--mobile-height,100dvh) - var(--mobile-top,0px)))!important}

/* Selection cards reserve separate portrait and single-line identity areas. */
html[data-client=mobile] #char-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html[data-client=mobile] .char-sel-slot:not(.empty){height:210px!important;box-sizing:border-box;padding-bottom:0!important}
html[data-client=mobile] .char-sel-slot .avatar-wrapper{left:8px!important;right:8px!important;top:32px!important;bottom:40px!important;width:auto!important;height:auto!important;transform:none!important;display:flex!important;align-items:center;justify-content:center}
html[data-client=mobile] .char-sel-slot .char-preview-img,html[data-client=mobile] .char-sel-slot:hover .char-preview-img{position:static!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;transform:none!important;object-fit:contain;filter:none!important;pointer-events:none!important}
html[data-client=mobile] .char-sel-slot .name-bar{left:6px!important;right:6px!important;bottom:5px!important;width:auto!important;transform:none!important;display:flex!important;align-items:center;justify-content:center;gap:4px;white-space:nowrap;overflow:hidden;box-sizing:border-box;font-size:11px!important;letter-spacing:0!important;padding:6px 0!important}
html[data-client=mobile] .mobile-character-name{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
html[data-client=mobile] .mobile-character-level,html[data-client=mobile] .mobile-character-job{flex-shrink:0;font-size:10px}
html[data-client=mobile] .mobile-character-level{color:#f1c40f}
html[data-client=mobile] .mobile-character-job{color:#bad7f2}
@media(min-width:650px){html[data-client=mobile] #char-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* Keep menu artwork and labels in separate columns, including hover. */
html[data-client=mobile] #menu-bar .menu-btn{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:2px!important;padding:2px!important;overflow:hidden}
html[data-client=mobile] #menu-bar .menu-btn img,html[data-client=mobile] #menu-bar .menu-btn svg{position:static!important;left:auto!important;bottom:auto!important;width:clamp(14px,4vw,20px)!important;height:20px!important;flex:0 0 auto;object-fit:contain;transform:none!important;margin:0!important}
html[data-client=mobile] #menu-bar .menu-text{position:static!important;display:block!important;min-width:0;flex:0 0 auto;font-size:10px!important;line-height:1.2!important;margin:0!important;white-space:nowrap;transform:none!important}
html[data-client=mobile] #menu-bar .menu-btn:hover{transform:none!important}