/* v315 - Shared responsive shell. Loaded after all runtime layout owners. */
html,
body{
  min-width:0;
  min-height:100%;
}

#oaiResponsiveMenuToggle,
#oaiResponsiveMenuBackdrop{
  display:none;
}

@media (max-width:1200px) and (min-width:901px){
  :root{
    --stageSidePad:12px !important;
    --menuStageW:270px !important;
    --stageW:calc(100vw - 24px) !important;
    --cityStageW:calc(var(--stageW) - var(--menuStageW)) !important;
  }

  html body.cityMenuOn #dfMenu,
  html body:not(.create-active) #dfMenu,
  html body #leftHudMenu{
    width:var(--menuStageW) !important;
  }
}

@media (max-width:900px){
  :root{
    --stagePad:0px !important;
    --stageSidePad:0px !important;
    --stageW:100vw !important;
    --menuStageW:0px !important;
    --cityStageW:100vw !important;
    --cityStageH:100dvh !important;
  }

  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  #uiRoot,
  .screen{
    width:100%;
    max-width:100%;
  }

  #oaiResponsiveMenuToggle{
    position:fixed;
    left:12px;
    top:max(12px, env(safe-area-inset-top));
    z-index:2147482500;
    width:46px;
    height:46px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(231,181,86,.76);
    border-radius:13px;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,221,145,.18), transparent 52%),
      linear-gradient(180deg, rgba(91,37,20,.98), rgba(30,12,9,.98));
    color:#ffe4a4;
    box-shadow:0 9px 24px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,238,184,.18);
    font:900 25px/1 system-ui, sans-serif;
    cursor:pointer;
  }

  body.create-active #oaiResponsiveMenuToggle,
  body.charselect-active #oaiResponsiveMenuToggle{
    display:none !important;
  }

  #oaiResponsiveMenuBackdrop{
    position:fixed;
    inset:0;
    z-index:2147482300;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(3px);
    cursor:pointer;
  }

  body.oai-mobile-menu-open #oaiResponsiveMenuBackdrop{
    display:block;
  }

  html body.cityMenuOn #dfMenu,
  html body:not(.create-active) #dfMenu,
  html body #leftHudMenu{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    left:0 !important;
    top:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(340px, calc(100vw - 48px)) !important;
    min-width:0 !important;
    max-width:340px !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:none !important;
    padding-top:max(4px, env(safe-area-inset-top)) !important;
    padding-bottom:max(86px, calc(72px + env(safe-area-inset-bottom))) !important;
    margin:0 !important;
    transform:translateX(calc(-100% - 18px)) !important;
    transform-origin:left center !important;
    transition:transform .22s ease, visibility 0s linear .22s !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    z-index:2147482400 !important;
  }

  html body.oai-mobile-menu-open.cityMenuOn #dfMenu,
  html body.oai-mobile-menu-open:not(.create-active) #dfMenu,
  html body.oai-mobile-menu-open #leftHudMenu{
    transform:translateX(0) !important;
    transition:transform .22s ease !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.charselect-active #dfMenu,
  body.charselect-active #leftHudMenu,
  body.create-active #dfMenu,
  body.create-active #leftHudMenu{
    display:none !important;
  }

  #oaiMainStageFrameV304,
  #cityScreen .bgWrap,
  #colosseumScreen .bgWrap,
  #dungeonScreen .bgWrap,
  #shopScreen .bgWrap,
  #arenaScreen .bgWrap,
  #staticCityBG,
  #cityOverlayFinal,
  #cityOverlay,
  html body #mailPanel.open,
  html body #companionPanel.show{
    left:0 !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  #cityScreen .bgWrap,
  #colosseumScreen .bgWrap,
  #dungeonScreen .bgWrap,
  #shopScreen .bgWrap,
  #arenaScreen .bgWrap,
  #staticCityBG{
    overflow:hidden !important;
  }

  #cityScreen .bg,
  #cityScreen #cityBG,
  #cityScreen #cityImg,
  #cityScreen .bg img{
    width:100% !important;
    height:100% !important;
  }

  #cityScreen #cityImg,
  #cityScreen .bg img{
    object-fit:cover !important;
  }

  #cityOverlayFinal .coPanel,
  #cityOverlayFinal .coInner,
  #cityOverlayFinalBody{
    width:100% !important;
    height:100% !important;
  }

  #cityOverlayFinalBody > .screen.asOverlayPanel .panelBody,
  #cityOverlayFinalBody > #lbScreen.asOverlayPanel #lbBody{
    top:60px !important;
    bottom:12px !important;
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #cityOverlayFinalBody > #talScreen.asOverlayPanel .talentPointsBar{
    top:58px !important;
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
  }

  #cityOverlayFinalBody > #talScreen.asOverlayPanel .panelBody{
    top:106px !important;
    bottom:12px !important;
  }

  #attrScreen.oaiTrainerPanel .oaiTrainerTabs{
    top:69px !important;
    width:calc(100% - 132px) !important;
    min-width:0 !important;
    gap:4px !important;
  }

  #cityOverlayFinalBody > #lbScreen.asOverlayPanel > #lbBody.lbPanel{
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  #attrScreen.oaiTrainerPanel .oaiTrainerTab{
    min-width:0 !important;
    height:31px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  #cityOverlayFinalBody > #attrScreen.oaiTrainerPanel.asOverlayPanel > #attrBody.panelBody{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .attrGrid,
  .statsGrid,
  .colCards,
  .talSpecPickGrid,
  .guildWarBody,
  .guildWarBattleStage,
  .guildBossTopGrid,
  .guildInspectLayout,
  .guildBoardGrid,
  .guildWarSetupGrid{
    grid-template-columns:1fr !important;
  }

  .statBuyRow,
  .dealerCodeRow,
  .lbHeaderRow{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .statBuyBtn,
  .dealerCodeInput,
  .dealerCodeBtn{
    width:100% !important;
    min-width:0 !important;
  }

  .lbTableWrap,
  .guildBoardBody{
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .lbTable{
    min-width:680px;
  }

  body #mailPanel.open .mailTabs{
    top:12px !important;
    left:68px !important;
    right:10px !important;
    width:auto !important;
    transform:none !important;
    gap:6px !important;
  }

  body #mailPanel.open .mailTab{
    min-width:0 !important;
    padding:7px 6px !important;
    font-size:12px !important;
  }

  body #mailPanel.open .mailBody{
    left:10px !important;
    right:10px !important;
    top:64px !important;
    bottom:10px !important;
    width:auto !important;
    height:auto !important;
    transform:none !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(140px, 38%) minmax(0, 1fr) !important;
  }

  body #companionPanel.show .companionCardWrap{
    inset:64px 10px 10px !important;
  }

  body #companionPanel.show .companionClose{
    top:12px !important;
    right:12px !important;
  }

  #inventoryScreen #btnInvClose,
  #cityOverlayFinalBody > #inventoryScreen.asOverlayPanel #btnInvClose{
    position:fixed !important;
    display:grid !important;
    place-items:center !important;
    top:max(12px, env(safe-area-inset-top)) !important;
    right:12px !important;
    left:auto !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    z-index:2147482200 !important;
  }

  #inventoryScreen .oaiSfCharacterPlate,
  #shopScreen .oaiShopCharacterPlate{
    width:min(220px, 62vw) !important;
    min-width:min(220px, 62vw) !important;
    max-width:min(220px, 62vw) !important;
  }

  #inventoryScreen #equipPanel .equipSlot[data-slot] > .oaiEquippedItemIcon,
  #inventoryScreen #equipPanel .equipSlot[data-slot] > .oaiEquippedItemIcon > img,
  #shopScreen .oaiShopCharacterPane .equipSlot[data-slot] > .oaiEquippedItemIcon,
  #shopScreen .oaiShopCharacterPane .equipSlot[data-slot] > .oaiEquippedItemIcon > img{
    width:calc(100% - 8px) !important;
    height:calc(100% - 8px) !important;
    max-width:calc(100% - 8px) !important;
    max-height:calc(100% - 8px) !important;
  }

  #inventoryScreen #invStatsPanel .oaiSfHeraldryBadge,
  #shopScreen .oaiShopStatsStatic .oaiShopHeraldryBadge{
    display:none !important;
  }

  #inventoryScreen #invStatsPanel .oaiRelicSlots{
    bottom:10px !important;
  }

  #shopScreen .oaiShopStatsStatic .oaiShopRelicSlots{
    bottom:10px !important;
  }

  #inventoryScreen #materialsPanel .materialsList{
    grid-template-columns:1fr !important;
  }

  #inventoryScreen .oaiInventoryPageRail .oaiInventoryPageTab,
  #shopScreen .oaiInventoryPageRail .oaiInventoryPageTab{
    flex:1 1 0 !important;
    margin:0 0 0 -1px !important;
    border-radius:0 !important;
  }

  #inventoryScreen .oaiInventoryPageRail .oaiInventoryPageTab:first-child,
  #shopScreen .oaiInventoryPageRail .oaiInventoryPageTab:first-child{
    margin-left:0 !important;
    border-radius:10px 0 0 10px !important;
  }

  #inventoryScreen .oaiInventoryPageRail .oaiInventoryPageTab:last-child,
  #shopScreen .oaiInventoryPageRail .oaiInventoryPageTab:last-child{
    border-radius:0 10px 10px 0 !important;
  }

  #shopScreen .bgWrap,
  #shopScreen #shopBG{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #shopScreen:not(:has(#shopUI.oaiKovarTabsV255)) #btnBackToCity{
    position:fixed !important;
    top:max(12px, env(safe-area-inset-top)) !important;
    right:12px !important;
    left:auto !important;
    z-index:2147482200 !important;
  }

  #shopScreen:not(:has(#shopUI.oaiKovarTabsV255)) #btnReroll{
    position:absolute !important;
    left:50% !important;
    top:14px !important;
    transform:translateX(-50%) !important;
  }

  #shopScreen:not(:has(#shopUI.oaiKovarTabsV255)) .shopCountdown{
    position:absolute !important;
    left:50% !important;
    top:54px !important;
    transform:translateX(-50%) !important;
  }

  #shopScreen .oaiShopOfferPane #shopUI:not(.oaiKovarTabsV255){
    grid-template-columns:repeat(2, minmax(0, 112px)) !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
  }

  #shopScreen .oaiShopStatsStatic .oaiShopStatGrid,
  #inventoryScreen #invStatsPanel .oaiSfStatGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  #arenaScreen .arenaLayer{
    top:0 !important;
  }

  #arenaScreen .arenaBoard{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
  }

  #arenaScreen .arenaCols{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    padding:62px 6px 78px !important;
  }

  #arenaScreen .fighterCard{
    gap:10px !important;
    padding:8px 4px 12px !important;
  }

  #arenaScreen .hpMini{
    width:100% !important;
  }

  #arenaScreen .bar{
    height:24px !important;
  }

  #arenaScreen .bigAvatar,
  #arenaScreen .avatarWithCompanion{
    width:min(124px, 88%) !important;
  }

  #arenaScreen .avatarWithCompanion .companionBattleFrame{
    left:-32px !important;
    bottom:8px !important;
    width:38px !important;
    height:38px !important;
  }
  #arenaScreen .companionAbilityMeter{ width:124px; top:calc(100% + 6px); font-size:9px; }

  #arenaScreen .oaiCombatAvatarName{
    font-size:13px !important;
  }

  #arenaScreen .oaiCombatAvatarTitle,
  #arenaScreen .oaiCombatAvatarLevel{
    font-size:10px !important;
  }

  #arenaScreen .statsPanel{
    width:100% !important;
    min-height:0 !important;
    max-height:230px !important;
    padding:9px !important;
    overflow:auto !important;
    font-size:10px !important;
  }

  #arenaScreen .arenaLeftBtns{
    left:10px !important;
    bottom:10px !important;
  }

  #arenaScreen .arenaAtkCenter{
    bottom:10px !important;
  }

  .warehouseWin{
    width:calc(100vw - 20px) !important;
    height:calc(100dvh - 20px) !important;
    padding:10px !important;
  }

  .warehouseBody{
    grid-template-columns:1fr !important;
    overflow:auto !important;
  }

  .warehouseGrid{
    grid-template-columns:repeat(4, minmax(48px, 1fr)) !important;
    grid-auto-rows:minmax(48px, 1fr) !important;
    gap:7px !important;
  }

  .warehouseBag{
    grid-template-columns:repeat(4, minmax(46px, 1fr)) !important;
  }

  .guildWarModal,
  #guildBossPanel,
  #guildMemberDetailPanel,
  #guildGuildDetailPanel{
    width:calc(100vw - 20px) !important;
    height:calc(100dvh - 20px) !important;
    max-width:none !important;
    max-height:none !important;
  }

  .guildWarGrid2,
  .guildBossProgressGrid,
  .guildBossStatList{
    grid-template-columns:1fr !important;
  }

  .guildWarBattleCard{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    padding:10px !important;
  }

  .guildWarBattleStage{
    grid-template-columns:1fr !important;
  }

  .guildWarBattleVs{
    grid-template-columns:minmax(0, 1fr) 54px minmax(0, 1fr) !important;
    gap:6px !important;
  }

  .guildWarBattleFighter{
    min-height:0 !important;
    padding:10px 6px !important;
  }

  .guildWarBattlePortrait{
    width:min(118px, 86%) !important;
    height:auto !important;
    aspect-ratio:1/1;
  }

  .guildWarBattleCenter .vs{
    font-size:25px !important;
  }

  .guildWarBattleQueue{
    display:none !important;
  }

  #charselectScreen .bgWrap{
    padding:max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  }

  #charselectPanel{
    width:100% !important;
    max-height:100% !important;
    padding:16px !important;
    border-radius:18px !important;
  }

  .charTitle{
    font-size:clamp(27px, 9vw, 34px) !important;
  }

  .charCard{
    min-height:260px !important;
    padding:16px !important;
  }

  #realSettingsCard,
  #settingsCard{
    width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
  }

  button,
  .btn,
  input,
  select{
    max-width:100%;
  }
}

@media (max-width:560px){
  #createScreen .oaiCreateShell,
  #createScreen .panel{
    width:100% !important;
    max-width:100% !important;
  }

  #createScreen .oaiCreateLeft,
  #createScreen .oaiCreateRight{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .companionBonusGrid,
  .companionMilestones,
  .guildBossProgressGrid{
    grid-template-columns:1fr !important;
  }
}

@media (max-height:620px) and (orientation:landscape) and (max-width:900px){
  html body.cityMenuOn #dfMenu,
  html body:not(.create-active) #dfMenu,
  html body #leftHudMenu{
    width:min(310px, calc(100vw - 64px)) !important;
  }

  #dfMenu .dfAvatar,
  #leftHudMenu .dfAvatar{
    width:92px !important;
    height:92px !important;
    flex-basis:92px !important;
  }

  #dfMenu .dfRow,
  #leftHudMenu .dfRow{
    grid-template-columns:98px minmax(0, 1fr) !important;
    grid-template-rows:auto auto 92px !important;
  }

  #arenaScreen .arenaCols{
    padding-top:48px !important;
  }

  #arenaScreen .statsPanel{
    max-height:120px !important;
  }
}