/* RF48 — PC and smartphone no-overlap layout; keep draggable V45 positions */
#ui,#ui .screen,#ui .screen .inner{max-width:100%;min-width:0}
#ui .screen.on{overflow-x:clip;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#ui .topbar{min-width:0;max-width:100%;display:flex;flex-wrap:wrap;gap:6px}
#ui .topbar>*{min-width:0;max-width:100%}
#ui .crumb{overflow-wrap:anywhere}
#ui :is(.menu,.forge,.fpanel,.grid,#shop-list,#select-grid,#stage-grid,#party-slots,.party-picker-results){max-width:100%;min-width:0}
#ui #shop-list{width:min(960px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:10px}
#ui #shop-list>.card{width:100%!important;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:8px;padding:12px}
#ui #shop-list .card img.face{max-width:100%!important;width:min(100%,225px);max-height:220px;height:auto;object-fit:contain;align-self:center}
#ui #shop-list .card :is(b,small,em){white-space:normal;overflow-wrap:anywhere;line-height:1.45}
#ui #shop-list .card button{width:100%;max-width:100%;white-space:normal;min-height:42px;margin-top:auto}
#ui #select-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:clamp(6px,1vw,12px)}
#ui #select-grid>.card{max-width:100%;min-width:0}
#ui #select-grid .face{width:100%;max-width:100%;object-fit:contain}
#ui #select-grid .card :is(b,small,em){white-space:normal;overflow-wrap:anywhere}
#ui :is(.frow,.party-slot,.fpanel,.card){min-width:0}
#ui .forge{grid-template-columns:minmax(120px,175px) minmax(0,1fr)}
#ui :is(.portal-header,.portal-topnav,.portal-modes,.portal-overview,.portal-services,.world-gallery){max-width:100%;min-width:0}
#ui .portal-topnav{flex-wrap:wrap}
#ui .portal-hero{overflow:hidden}
#ui .portal-hero :is(img,.hero-figure){object-fit:contain;max-width:100%}
#ui .mode-tile,#ui .portal-services button{min-width:0;max-width:100%}
#ui .mode-tile :is(b,small,span),#ui .portal-services button :is(b,small){overflow-wrap:anywhere}
#ui :is(.btn,button,input,textarea,select){max-width:100%;min-width:0}
#ui #story-box{max-width:100%;overflow-wrap:anywhere}
#ui #world-panel{max-height:75dvh;max-width:calc(100vw - 14px);overflow-x:hidden;overflow-y:auto}
#ui #world-req{max-width:calc(100vw - 14px);overflow-wrap:anywhere}
#ui #pause{overflow-y:auto;max-height:100%;padding:clamp(10px,2vw,24px)}
#ui #skillname{max-width:92vw;overflow-wrap:anywhere}
#ui #cutin .ci-text{min-width:0;max-width:68vw}
#ui #cutin .ci-title{font-size:clamp(16px,4vw,48px);white-space:normal;line-height:1.15}
#ui .hud-side{max-width:calc(50vw - 55px);min-width:0}
#ui .plate{width:100%;max-width:100%}
#ui .plate b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ui #gauges{max-width:120px}
#ui #touch{max-width:100vw;overflow:hidden}
#ui #joy,#ui #tbtns{touch-action:none}
#ui #tbtns button{display:grid;place-items:center;min-width:0}
@media(max-width:670px){
 #ui #shop-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #ui #shop-list>.card{padding:8px}
 #ui #shop-list .card img.face{max-height:145px}
 #ui #shop-list .card b{font-size:clamp(13px,3.6vw,18px)}
 #ui #shop-list .card small{font-size:clamp(10px,2.5vw,12px)}
 #ui #select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #ui .forge{grid-template-columns:minmax(0,1fr)}
 #ui #forge-list{display:flex;flex-wrap:wrap;gap:5px;max-height:none;overflow:visible}
 #ui #forge-list .chip{flex:1 1 125px;min-width:0}
 #ui #hud-left,#ui #hud-right{top:5px;width:calc(50% - 49px)}
 #ui #gauges{top:37px;max-width:85px;width:85px;font-size:9px}
 #ui #btn-pause{top:5px;max-width:83px;font-size:11px;padding:3px 6px}
 #ui #skillname{top:clamp(104px,17vh,145px)}
 #ui #field-info{max-width:calc(50% - 55px)}
 #ui #field-info small{display:none}
 #ui #field-map{max-width:25vw;height:auto}
 #ui #world-panel{width:calc(100vw - 14px)}
}
@media(max-width:360px){
 #ui #shop-list>.card{padding:6px}
 #ui #shop-list .card img.face{max-height:110px}
 #ui #shop-list .card b{font-size:13px}
 #ui #tbtns{--tb:38px}
 #ui #joy{width:90px}
}
@media(max-height:530px) and (orientation:landscape){
 #ui .screen{padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}
 #ui #skillname{top:clamp(66px,18vh,96px)}
 #ui #tbtns{--tb:clamp(35px,12vh,44px);gap:3px}
 #ui #joy{width:clamp(85px,26vh,115px)}
 #ui #story-box{max-height:46dvh;overflow-y:auto}
 #ui #forge-list{max-height:48dvh;overflow-y:auto}
}