/* Touch surfaces use the visible viewport, including keyboard and device cutouts. */
body.mobile{
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-left:env(safe-area-inset-left,0px);--mobile-safe-right:env(safe-area-inset-right,0px);--mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-ui-top:calc(var(--mobile-viewport-top,0px) + max(var(--mobile-safe-top),var(--game-chrome-height,0px)));
  --mobile-ui-left:calc(var(--mobile-viewport-left,0px) + var(--mobile-safe-left));
  --mobile-ui-width:calc(var(--mobile-viewport-width,100vw) - var(--mobile-safe-left) - var(--mobile-safe-right));
  --mobile-ui-height:calc(var(--mobile-viewport-height,100dvh) - max(var(--mobile-safe-top),var(--game-chrome-height,0px)) - var(--mobile-safe-bottom));
}
body.mobile :is(
  #windows,#mob-sheet,.rpg-confirm-overlay,.scroll-picker-overlay,.news-overlay,
  .premium-zoom-overlay,#pp-overlay,#drop-modal,#npctut-modal,#split-modal,
  .fullmap-overlay,.duel-countdown-overlay,.pwa-tut-ov,#reconnect-modal,#tut-overlay,
  #reg-modal,.login-reward-overlay,.abyss-pick-ov,#gm-item-browser,#party-loot-modal,
  #spec-modal,#death-overlay,#win-backdrop,#dv-tut-ov,#fish-info-ov
){
  position:fixed!important;top:var(--mobile-ui-top)!important;left:var(--mobile-ui-left)!important;
  right:auto!important;bottom:auto!important;width:var(--mobile-ui-width)!important;height:var(--mobile-ui-height)!important;
  box-sizing:border-box;
}
body.mobile #windows>.win{height:100%;max-height:100%;box-sizing:border-box;scale:1}
body.mobile .win>.win-body{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
body.mobile .win>.win-title{display:flex!important;align-items:center;gap:8px;min-height:56px!important;box-sizing:border-box;padding-top:4px!important;padding-bottom:4px!important}
body.mobile .win>.win-title>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
body.mobile .win>.win-title .x{position:static!important;transform:none!important;align-self:center;margin:0;flex:0 0 44px;width:44px;height:44px;box-sizing:border-box;min-width:44px!important;min-height:44px!important;touch-action:manipulation}
body.mobile :is(.rpg-confirm-overlay,.scroll-picker-overlay,.news-overlay,#mob-sheet,#death-overlay){padding:8px}
body.mobile :is(.rpg-confirm-overlay,.scroll-picker-overlay,.news-overlay,#mob-sheet,#death-overlay)>
:is(.win,.rpg-modal-win,.mob-sheet-panel,.scroll-picker-box,.news-box,.death-panel){
  min-width:0!important;max-width:100%!important;max-height:100%!important;box-sizing:border-box;
}
body.mobile .rpg-confirm-overlay>.win{height:auto;flex:0 1 auto}
body.mobile .rpg-confirm-overlay>.pet-picker-win{position:static!important;transform:none!important;margin:0;max-height:100%!important}
body.mobile .death-panel{overflow:auto;overscroll-behavior:contain}
body.mobile .mob-sheet-panel{min-height:0;max-height:100%;width:min(640px,100%);box-sizing:border-box}
body.mobile .mob-sheet-head{flex-shrink:0;min-width:0}
body.mobile .mob-sheet-head .nm{min-width:0;overflow-wrap:anywhere}
body.mobile .mob-sheet-head .x{flex:0 0 44px;min-height:44px}
body.mobile .mob-sheet-acts{min-height:0;justify-content:flex-start;box-sizing:border-box}
body.mobile .mob-sheet-acts .mob-act{flex-shrink:0;white-space:normal;overflow-wrap:anywhere;min-height:44px}
body.mobile .sheet-itemdetail{grid-template-columns:minmax(0,1fr) minmax(112px,.65fr)}
body.mobile .sheet-itemdetail .mob-sheet-acts{width:auto}
body.mobile .journal-entry{min-width:0;max-width:100%;overflow-wrap:anywhere}
body.mobile #win-char.character-journal-win .character-nav{max-height:calc(var(--mobile-ui-height) - 104px);overflow:auto;overscroll-behavior:contain}
body.mobile .shop-grid{grid-template-columns:repeat(auto-fit,minmax(54px,1fr))}
body.mobile .shop-grid .shop-slot{width:100%;min-width:0;box-sizing:border-box}
body.mobile :is(.bank-tabs,.rpg-confirm-actions){flex-wrap:wrap}
body.mobile :is(.bank-tabs,.rpg-confirm-actions)>.rpg-btn{min-width:0;white-space:normal;overflow-wrap:anywhere;min-height:44px}
body.mobile .bp-win .bp-head{display:block;min-width:0;box-sizing:border-box;width:100%}
body.mobile .bp-win .bp-head>*{min-width:0;max-width:100%;box-sizing:border-box}
body.mobile .bp-win .bp-head .bp-sum-toggle{display:block;flex:none;width:100%;white-space:normal;min-height:44px}
body.mobile #win-rewards.bp-win .rewards-content{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
body.mobile #win-rewards.bp-win .rewards-content>*{grid-column:1!important;grid-row:auto!important;min-width:0}
body.mobile #win-rewards.bp-win .rewards-content>.bp-track{max-height:none;overflow:visible}
body.mobile #win-closeall{top:calc(var(--mobile-ui-top) + 8px);min-height:44px}
body.mobile #windows:has(>.win:nth-child(2)){padding-top:52px}
body.mobile #windows:has(>.win:nth-child(2))>.win{height:100%}
body.mobile .cosm-slide{top:var(--mobile-ui-top);height:var(--mobile-ui-height);max-width:var(--mobile-ui-width);box-sizing:border-box}
body.mobile .act-btn{max-width:calc(min(var(--mobile-ui-width),var(--mobile-ui-height)) - 8px);max-height:calc(min(var(--mobile-ui-width),var(--mobile-ui-height)) - 8px)}
body.mobile #friend-request-popup,body.mobile #screen-chars>#char-create{
  top:calc(var(--mobile-ui-top) + var(--mobile-ui-height) / 2)!important;
  left:calc(var(--mobile-ui-left) + var(--mobile-ui-width) / 2)!important;
  max-width:calc(var(--mobile-ui-width) - 16px)!important;max-height:calc(var(--mobile-ui-height) - 16px)!important;
}
@media(max-width:650px){
  body.mobile #windows{justify-content:safe flex-end;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
  body.mobile #windows>.win{flex:0 0 min(440px,100%);width:min(440px,100%);max-width:100%;scroll-snap-align:start}
  body.mobile .win-body{overscroll-behavior-x:auto;overscroll-behavior-y:contain}
}
body.mobile :is(.mob-sheet-panel,.mob-sheet-body,.mob-sheet-acts,.death-panel,#windows){scrollbar-width:none}
body.mobile :is(.mob-sheet-panel,.mob-sheet-body,.mob-sheet-acts,.death-panel,#windows)::-webkit-scrollbar{display:none}
/* Requested size is fitted to the available space without changing saved settings. */
body.mobile .act-btn{--action-base:52px;--action-size:max(44px,calc(var(--action-base) * var(--act-scale,1) * var(--btn-scale,1) * var(--action-fit,1)));box-sizing:border-box;width:var(--action-size);height:var(--action-size);margin:calc(var(--action-size) / -2) 0 0 calc(var(--action-size) / -2)}
body.mobile :is(.act-attack,.act-interact){--action-base:92px}
body.mobile .act-skill{--action-base:60px}
body.mobile :is(.act-interact,.act-pickup) .lbl{top:auto;bottom:2px;left:3px;right:3px;width:auto;max-width:none;transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;font-size:9px;line-height:12px;padding:0 2px}
body.mobile :is(.act-interact,.act-pickup)>img{width:52%;height:52%;margin-top:-10px}
body.mobile.mobile-menu-open .act-cluster{visibility:hidden}
body.mobile.mobile-menu-open :is(#hud-top,#hud-target,#chat,#hud-ping,#hud-yang,#hud-dc,#quest-tracker,#fps-meter){visibility:hidden}
body.mobile.mobile-menu-open .mob-topbar{max-height:calc(var(--mobile-ui-height) - 16px)}
body.mobile .mob-topbar-items{min-height:0;max-height:calc(var(--mobile-ui-height) - 80px);overflow-y:auto;scrollbar-width:none}
body.mobile .mob-topbar-items::-webkit-scrollbar{display:none}
body.mobile .mob-menu-btn{min-width:44px;min-height:44px;box-sizing:border-box}
body.mobile #hud-top{transform:scale(calc(var(--mob-hud-player-scale,1) * var(--mobile-controls-hud-fit,1)))}
body.mobile #hud-target{transform:translateX(-50%) scale(calc(var(--mob-hud-target-scale,1) * var(--mobile-controls-hud-fit,1)))}
body.mobile #chat{transform:scale(calc(var(--mob-hud-chat-scale,1) * var(--mobile-controls-hud-fit,1)))}
body.mobile :is(#hud-yang,#hud-dc){transform:scale(calc(var(--mob-hud-currency-scale,1) * var(--mobile-controls-hud-fit,1)))}
body.mobile #hud-ping{transform:scale(calc(var(--mob-hud-status-scale,1) * var(--mobile-controls-hud-fit,1)))}
body.mobile .mob-edit-banner{flex-wrap:nowrap;justify-content:flex-start;gap:8px;width:calc(var(--mobile-ui-width) - 16px);max-width:calc(var(--mobile-ui-width) - 16px);box-sizing:border-box;max-height:64px;padding:4px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body.mobile .mob-edit-banner>*{flex-shrink:0;white-space:nowrap}
body.mobile .mob-edit-banner :is(.save,.reset,.export,.done){display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
body.mobile .mob-edit-banner::-webkit-scrollbar{display:none}