/* Cloud Games / adaptive app shell
   Loaded after the legacy theme and catalog CSS. Browser viewport, not the
   underlying game's canvas, determines the available space. No fixed scaling. */
:root{--cg-tap:44px}
html,body{max-width:100%;min-width:0}
body{margin:0}
#shell,.layout,#view,main{box-sizing:border-box;min-width:0;max-width:100%}
#shell{width:100%;min-height:100vh;min-height:100dvh}
.layout{width:100%;min-width:0}
#view{flex:1 1 auto;min-width:0;max-width:100%;overflow-wrap:break-word}
#view .grid{min-width:0}
#view .grid>.tile{min-width:0}
#view .row{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#view img,#sheet img{max-width:100%}
.top{box-sizing:border-box;min-width:0;max-width:100%;gap:9px}
.top .brand{min-width:0!important}
.top .searchbox{min-width:0;max-width:100%;flex:1 1 260px}
.top button,.top a{touch-action:manipulation}
#search{width:100%;min-width:0;box-sizing:border-box}
#side{box-sizing:border-box}
#side .nav,#side button{touch-action:manipulation}
/* Keep player controls and iframe inside their own viewport, including when
   the device rotates or the address bar changes size. */
#player{box-sizing:border-box;max-width:100%;max-height:100vh;max-height:100dvh}
#player.visible{inset:0;width:100%;height:100vh;height:100dvh;display:flex!important;flex-direction:column;overflow:hidden}
#playerbar{box-sizing:border-box;flex:0 0 auto;min-width:0;max-width:100%;display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:55px}
#playerbar .ptitle{min-width:0;flex:0 1 auto;overflow:hidden}
#playerbar #playing{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#playerbar .pfill{flex:1 1 0;min-width:0}
#playerbar button{flex:0 0 auto;min-height:40px;touch-action:manipulation}
#gameframe{display:block;box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;flex:1 1 auto!important;border:0!important}
#playstate{max-width:100%;box-sizing:border-box}
.gd-modal,.gds-settings-overlay{box-sizing:border-box;max-width:100%;overscroll-behavior:contain}
.gd-dialog,.gds-panel{box-sizing:border-box;min-width:0;max-width:100%}
.gd-dialog input,.gd-dialog button{max-width:100%;box-sizing:border-box}
.gds-pane,.gds-panellayout,.gds-panelhead,.gds-themegrid{min-width:0}
.px-overlay,.px-modal,.px-content,.px-work,.px-sidebar{box-sizing:border-box;min-width:0}
@media(max-width:1024px){
 .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;height:auto!important;min-height:0!important;overflow:visible!important}
 .top .searchbox{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important}
 .top .searchbox{order:10;flex:1 0 100%;width:100%;max-width:none!important}
 .top .brand{margin-right:auto!important}
 .top #random{min-width:var(--cg-tap);min-height:var(--cg-tap);padding:8px!important}
 .top #random span{display:none}
 .top .gd-account,.top .gd-logout-top,.top .gds-settings-trigger{min-height:var(--cg-tap)!important}
 #view .grid{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))!important}
}
@media(max-width:900px){
 .layout{display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow:visible}
 /* The former side menu becomes a swipeable row instead of a huge column. */
 #side{
  box-sizing:border-box;width:100%!important;min-width:0!important;
  height:auto!important;max-height:90px;flex:0 0 auto!important;
  display:flex!important;flex-direction:row!important;
  align-items:center;flex-wrap:nowrap!important;gap:7px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  padding:9px 12px!important;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  border-right:0!important;border-bottom:1px solid var(--gd-stroke)!important
 }
 #side>.nav,#side>button,#side>.gd-genre-toggle{
  flex:0 0 auto!important;width:auto!important;min-width:max-content!important;
  min-height:var(--cg-tap)!important;margin:0!important;padding:9px 13px!important;
  scroll-snap-align:start;white-space:nowrap
 }
 #side h3,#side hr{display:none!important}
 #view{width:100%!important;flex:1 1 auto!important}
}
@media(max-width:700px){
 .top{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 10px!important;row-gap:8px!important;column-gap:6px!important}
 .top .brand .cg-brand-logo{width:clamp(76px,24vw,106px)!important;height:43px!important}
 .top .brand{margin-right:auto!important}
 .top .gds-settings-trigger{padding-inline:9px!important}
 .top .gd-account,.top .gd-logout-top{padding-inline:10px!important}
 .top .searchbox{min-height:43px}
 #search{font-size:16px!important}
 #side{padding:7px 10px!important;max-height:70px}
 #side>.nav,#side>button{min-height:44px!important;font-size:12px!important}
 #view{padding:12px 10px 30px!important}
 #view .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #view .tile .hit{touch-action:manipulation}
 #view .tile .fav{min-width:36px;min-height:36px}
 #player.visible{height:100dvh}
 #playerbar{flex-wrap:wrap!important;gap:5px 7px;padding:calc(7px + env(safe-area-inset-top,0px)) 8px 8px!important}
 #playerbar .ptitle{order:0;flex:1 1 42%;min-width:80px}
 #playerbar .pfill{display:none}
 #playerbar button{min-height:44px!important;padding:8px 9px!important}
 #playerbar #back{order:-1}
 #playerbar #refresh,#playerbar #fullscreen,#playerbar #pfav{order:2}
 #playerbar #pgenre{font-size:11px}
 .gd-modal{padding:10px calc(9px + env(safe-area-inset-left,0px)) 10px calc(9px + env(safe-area-inset-right,0px))!important;align-items:center}
 .gd-dialog{width:100%;max-height:calc(100dvh - 20px);padding:20px 17px!important;border-radius:17px!important}
 .gds-settings-overlay{padding:6px!important}
 .gds-panel{width:100%;height:calc(100dvh - 12px)!important;border-radius:14px}
 .gds-panelhead{padding:12px 13px!important}
 .gds-panellayout{min-height:0}
 .gds-pane{overflow-y:auto!important;min-height:0;padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px))!important}
 .gds-stats,.gds-themegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .px-overlay{padding:5px!important}
}
@media(max-width:390px){
 #view{padding-inline:8px!important}
 #view .grid{gap:7px!important}
 .top .gds-settings-trigger{font-size:11px!important}
 #playerbar .ptitle{flex-basis:48%;max-width:100%}
 #playerbar button{font-size:12px!important}
 .gds-stats{grid-template-columns:1fr 1fr}
}
/* When height, rather than width, is scarce (landscape phones), favor the game. */
@media(max-height:500px) and (orientation:landscape){
 #playerbar{padding:4px 10px!important;min-height:44px!important;flex-wrap:nowrap!important}
 #playerbar button{min-height:36px!important;padding:5px 8px!important}
 #playerbar #pgenre{display:none}
 #side{max-height:60px}
}
@media(hover:none){
 #view .tile:hover,#sheet .tile:hover{transform:none!important}
 #view .tile .fav:not([aria-pressed=true]){display:grid!important}
}

/* Mobile embed polish. Google Sites can give us a narrow iframe viewport, so
   layout must never rely on the parent page being wider than the game site. */
@media(max-width:700px){
 html,body,#shell{width:100%;max-width:100%;min-width:0}
 html{scroll-padding-top:12px}
 .top{
  position:relative!important;inset:auto!important;top:auto!important;left:auto!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  display:flex!important;flex-flow:row wrap!important;align-content:start!important;
  align-items:center!important;justify-content:flex-start!important;
  gap:8px!important;overflow:visible!important;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px))
          12px max(12px,env(safe-area-inset-left,0px))!important;
 }
 .top>.brand{
  order:0!important;flex:1 1 82px!important;min-width:76px!important;
  max-width:none!important;margin:0 auto 0 0!important;
  overflow:visible!important;white-space:nowrap
 }
 .top .brand .cg-brand-logo{
  width:clamp(84px,26vw,108px)!important;
  height:47px!important;max-width:100%;object-fit:contain;object-position:left center
 }
 .top #random{
  order:1!important;flex:0 0 42px!important;
  margin:0!important;padding:7px!important;width:42px!important;
  height:44px!important;min-width:42px!important;max-width:42px!important;
  display:flex;justify-content:center;align-items:center
 }
 .top .gd-random-near-account{margin-left:0!important}
 .top .gds-settings-trigger{
  order:2!important;flex:0 0 auto!important;
  min-height:44px!important;margin:0!important;padding:8px!important
 }
 .top>.gd-account{
  order:3!important;flex:0 1 auto!important;min-width:0!important;
  max-width:96px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  margin:0!important;min-height:44px!important;white-space:nowrap
 }
 .top>.gd-logout-top{order:4!important;flex:0 0 auto!important;margin:0!important}
 .top>.gd-more{
  order:5!important;flex:0 0 44px!important;
  width:44px!important;margin:0!important
 }
 .top>.gd-more summary{width:44px!important;height:44px!important;min-height:44px!important}
 .top>.gd-more .gd-more-menu{right:0!important;left:auto!important}
 .top>.searchbox{
  order:10!important;flex:1 0 100%!important;
  position:relative!important;inset:auto!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:46px!important;min-height:46px!important;margin:0!important
 }
 #search{width:100%!important;font-size:16px!important;min-height:46px!important}
 .layout{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}
 #side{
  width:100%!important;max-width:100%!important;min-width:0!important;
  min-height:60px!important;max-height:none!important;height:auto!important;
  margin:0!important;box-sizing:border-box!important;
  display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
  gap:8px!important;padding:8px max(14px,env(safe-area-inset-right,0px))
                     8px max(14px,env(safe-area-inset-left,0px))!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scroll-padding-inline:14px!important;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch
 }
 #side>.nav,#side>button,#side>.gd-genre-toggle{
  flex:0 0 auto!important;width:auto!important;min-width:max-content!important;
  max-width:none!important;min-height:44px!important;box-sizing:border-box!important;
  padding:9px 12px!important;margin:0!important;
  font-size:12px!important;white-space:nowrap!important;scroll-snap-align:start
 }
 #side>.gd-genre-toggle{max-width:none!important}
 #view{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;
  padding:14px max(14px,env(safe-area-inset-right,0px))
          32px max(14px,env(safe-area-inset-left,0px))!important
 }
 #view>h1,#view>h2,#view h1,#view h2{
  margin-left:0!important;min-width:0;max-width:100%;
  overflow-wrap:break-word
 }
 #view .row{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  min-width:0!important;display:flex!important;flex-flow:row nowrap!important;
  gap:10px!important;margin:0!important;padding:3px 0 11px!important;
  scroll-snap-type:x mandatory;scroll-padding-inline:0!important;
  overflow-x:auto!important;overscroll-behavior-inline:contain;
 }
 /* Show exactly two complete cards at a time; do not leave a third card
    awkwardly chopped off in the phone viewport. */
 #view .row>.tile{
  box-sizing:border-box!important;flex:0 0 calc((100% - 10px)/2)!important;
  width:calc((100% - 10px)/2)!important;max-width:calc((100% - 10px)/2)!important;
  min-width:0!important;height:auto!important;scroll-snap-align:start
 }
 #view .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #view .tile .name{overflow-wrap:anywhere}
 #view>.px-banner{width:100%!important;max-width:100%!important;margin:0 0 16px!important}
 #view .px-banner-head{gap:10px!important}
 #view .px-banner #px-open{min-height:42px!important}
}
/* Very narrow devices: keep navigation accessible and card titles readable
   instead of squeezing the entire interface to a 280px desktop canvas. */
@media(max-width:360px){
 .top{column-gap:6px!important}
 .top .brand .cg-brand-logo{width:78px!important;height:43px!important}
 .top>.gd-account{max-width:75px!important;padding-inline:7px!important}
 .top .gds-settings-trigger{padding-inline:7px!important}
 #view .row{gap:8px!important}
 #view .row>.tile{flex-basis:calc((100% - 8px)/2)!important;width:calc((100% - 8px)/2)!important;max-width:calc((100% - 8px)/2)!important}
 #view .grid{gap:8px!important}
}