/* Mobile-only layout. Desktop selectors are deliberately untouched. */
@media screen {
 html.gxb-mobile,html.gxb-mobile body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 html.gxb-mobile #app-frame{inset:0;width:100%!important;height:100dvh!important;overflow:hidden;transform:none!important}
 html.gxb-mobile #app-frame #game-root{width:100%!important;min-width:0!important;max-width:none!important;overflow-x:hidden!important;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)!important}
 html.gxb-mobile #app-frame #game-root>section:not([hidden]){width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box}
 html.gxb-mobile #app-frame .layout{display:block!important;width:100%!important;min-width:0!important}
 html.gxb-mobile #app-frame .layout>*{width:100%!important;min-width:0!important;max-width:none!important}
 html.gxb-mobile #app-frame .intro{flex-wrap:wrap;gap:10px;padding:12px}
 html.gxb-mobile #app-frame .resources{width:100%;min-width:0;gap:8px}
 html.gxb-mobile #app-frame .panel{max-width:100%;min-width:0;box-sizing:border-box}
 html.gxb-mobile #app-frame .home-stage{width:100%!important;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:0!important;aspect-ratio:auto!important;overflow:hidden}
 html.gxb-mobile #app-frame .home-background{background-position:center center;background-size:cover}
 html.gxb-mobile #app-frame .home-hero{max-height:80%;max-width:100%;object-fit:contain}
 html.gxb-mobile #app-frame .home-currency{max-width:100%;gap:3px}
 html.gxb-mobile #app-frame .home-currency span{min-width:0}
 html.gxb-mobile #app-frame .campaign-scene{max-width:100%;min-width:0;overflow:hidden}
 html.gxb-mobile #app-frame .cmp{width:100%;min-width:0}
 html.gxb-mobile #app-frame .cmp-scene{width:100%;overflow:hidden}
 html.gxb-mobile #app-frame .roster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 html.gxb-mobile #app-frame .formation-board{width:calc(100% - 12px);margin:6px;max-width:none}
 html.gxb-mobile #app-frame .girls-view,
 html.gxb-mobile #app-frame .capsule-view,
 html.gxb-mobile #app-frame .bag-view,
 html.gxb-mobile #app-frame .girl-detail-view,
 html.gxb-mobile #app-frame #home-systems-view{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;border-left:0;border-right:0;border-radius:0}
 html.gxb-mobile #app-frame .detail-scene{height:min(64dvh,540px)!important;min-height:320px}
 html.gxb-mobile #app-frame .detail-art-wrap{max-width:100%;overflow:hidden}
 html.gxb-mobile #app-frame .detail-art-wrap img{max-width:100%;object-fit:contain}
 html.gxb-mobile #app-frame .detail-tabs{width:100%;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
 html.gxb-mobile #app-frame .detail-tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:clamp(10px,2.9vw,15px)}
 html.gxb-mobile #app-frame .bag-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}
 html.gxb-mobile #app-frame .bag-panel{padding:12px 8px}
 html.gxb-mobile #app-frame .sa-overlay{width:100%;height:100%;overflow:hidden}
 html.gxb-mobile #app-frame .sa-waiting-box{width:min(86%,330px);min-width:0;box-sizing:border-box}
 html.gxb-mobile #app-frame .cr-overlay{inset:0;padding:8px;align-items:center}
 html.gxb-mobile #app-frame .cr-box{width:100%;max-width:460px;max-height:calc(100dvh - 24px);overflow-y:auto}
 html.gxb-mobile #app-frame .cr-anim{height:clamp(160px,35dvh,260px)}
 html.gxb-mobile #app-frame .cr-actions{flex-wrap:wrap;gap:6px}
 html.gxb-mobile #app-frame .cr-btn{min-width:min(44%,150px);max-width:100%;font-size:15px}
 html.gxb-mobile #app-frame .online-overlay,
 html.gxb-mobile #app-frame .online-war-overlay{padding:env(safe-area-inset-top) 6px env(safe-area-inset-bottom)}
 html.gxb-mobile #app-frame .online-box,
 html.gxb-mobile #app-frame .online-war-box{width:100%;max-width:100%;max-height:95dvh;border-radius:12px}
 html.gxb-mobile #app-frame .online-head{padding:12px}
 html.gxb-mobile #app-frame .online-body{padding:0 10px 14px}
 html.gxb-mobile #app-frame .online-tabs{padding:0 10px 10px}
 html.gxb-mobile #app-frame .online-rank,
 html.gxb-mobile #app-frame .online-member{min-width:0}
 html.gxb-mobile #app-frame .online-summary{flex-wrap:wrap}
 html.gxb-mobile #app-frame .gs-overlay>.gs-win{width:min(100%,720px);max-width:100%;max-height:calc(100dvh - 16px);overflow:auto}
 html.gxb-mobile #app-frame button,
 html.gxb-mobile #app-frame [role=button]{touch-action:manipulation}
 html.gxb-mobile #app-frame input,
 html.gxb-mobile #app-frame select,
 html.gxb-mobile #app-frame textarea{max-width:100%;min-width:0;font-size:16px}
}
@media(max-width:380px){
 html.gxb-mobile #app-frame .bag-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 html.gxb-mobile #app-frame .cr-btn{min-width:0;flex:1}
 html.gxb-mobile #app-frame .detail-tabs button{font-size:10px}
}

/* Mobile RC: dedicated phone geometry for the actual game controls. */
@media screen {
 html.gxb-mobile #app-frame .home-top{height:11%;padding:clamp(4px,1.5vw,10px);gap:4px}
 html.gxb-mobile #app-frame .home-profile{min-width:0!important;width:clamp(48px,14vw,68px);height:clamp(48px,14vw,68px)}
 html.gxb-mobile #app-frame .home-currency{min-width:0;max-width:58%}
 html.gxb-mobile #app-frame .home-currency span{font-size:clamp(10px,2.7vw,13px);padding:2px 4px}
 html.gxb-mobile #app-frame .home-side{top:13%;width:19%;gap:clamp(2px,.7dvh,6px)}
 html.gxb-mobile #app-frame .home-side button{min-height:0!important;height:clamp(48px,8.8dvh,76px);max-width:100%}
 html.gxb-mobile #app-frame .home-side small{font-size:clamp(9px,2.5vw,12px);white-space:normal;line-height:1.1;text-align:center}
 html.gxb-mobile #app-frame .home-left{width:37%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html.gxb-mobile #app-frame .home-right{right:0;width:18%!important}
 html.gxb-mobile #app-frame .home-destinations{bottom:12.8%;height:19%;width:100%;gap:0}
 html.gxb-mobile #app-frame .home-destinations strong{font-size:clamp(11px,3.4vw,17px)!important;white-space:normal}
 html.gxb-mobile #app-frame .home-bottom{height:12.8%;grid-template-columns:repeat(6,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom)}
 html.gxb-mobile #app-frame .home-bottom button{min-width:0;min-height:0!important;overflow:hidden}
 html.gxb-mobile #app-frame .home-bottom small{font-size:clamp(9px,2.5vw,12px);white-space:normal;text-align:center;line-height:1.05}
 html.gxb-mobile #app-frame .home-bottom .nav-reference-icon{max-width:100%;height:auto;max-height:62%}
 html.gxb-mobile #app-frame .capsule-view{padding:0 8px 85px!important;overflow-x:hidden}
 html.gxb-mobile #app-frame .capsule-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 html.gxb-mobile #app-frame .capsule-actions button{min-width:0;max-width:100%;white-space:normal}
 html.gxb-mobile #app-frame #capsule-result{width:100%;max-width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 html.gxb-mobile #app-frame .battlefield{width:100%;min-width:0;gap:5px;padding:12px 4px}
 html.gxb-mobile #app-frame .units{max-width:46%;gap:4px}
 html.gxb-mobile #app-frame .unit{width:clamp(44px,12vw,70px);min-width:0}
 html.gxb-mobile #app-frame .unit .portrait{max-width:100%}
 html.gxb-mobile #app-frame .hm-content,
 html.gxb-mobile #app-frame .hm-card{min-width:0;overflow-wrap:anywhere}
 html.gxb-mobile #app-frame .cr-overlay{position:fixed!important;inset:0;z-index:100;box-sizing:border-box}
 html.gxb-mobile #app-frame img,
 html.gxb-mobile #app-frame canvas{max-width:100%}
}
@media(max-width:360px){
 html.gxb-mobile #app-frame .home-left{width:39%!important}
 html.gxb-mobile #app-frame .home-side small{font-size:9px}
 html.gxb-mobile #app-frame #capsule-result{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* GXB3 mobile fit: hidden screens must remain hidden even when a layout rule uses !important.
   The previous .layout display:block!important made inactive PC panels leak into phone views. */
html.gxb-mobile #app-frame [hidden]{display:none!important}
html.gxb-mobile #app-frame #game-root{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
html.gxb-mobile #app-frame #game-root > section:not([hidden]){max-width:100%!important;box-sizing:border-box!important}
html.gxb-mobile #app-frame .home-left{left:0!important;width:36%!important;max-width:36%!important}
html.gxb-mobile #app-frame .home-right{right:0!important;width:19%!important;max-width:19%!important}
html.gxb-mobile #app-frame .home-destinations{left:0!important;right:0!important;width:100%!important}
html.gxb-mobile #app-frame .home-bottom{left:0!important;right:0!important;width:100%!important}
html.gxb-mobile #app-frame .home-destinations button,
html.gxb-mobile #app-frame .home-bottom button{min-width:0!important;max-width:100%!important}
html.gxb-mobile #app-frame #events-view{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;overflow-y:auto!important;overscroll-behavior:contain}
html.gxb-mobile #app-frame .fantasy-book-view:not([hidden]){
  width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;
  container-type:size!important;box-sizing:border-box!important;
  background:linear-gradient(180deg,#c9e4fd 0%,#eaf4ff 28%,#f8e7f4 100%)!important
}
html.gxb-mobile #app-frame .fantasy-book-view .fb-stage{
  --u:min(calc(100cqw / 720),calc(100cqh / 1280));
  position:relative!important;flex:none!important;
  width:calc(720 * var(--u))!important;height:calc(1280 * var(--u))!important;
  min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;
  margin:0 auto!important;overflow:hidden!important
}
@media (orientation:landscape) and (max-height:550px){
  html.gxb-mobile #app-frame .home-side button{height:clamp(33px,12dvh,62px)!important}
  html.gxb-mobile #app-frame .home-bottom{height:16%!important}
}