/* Build 6.00: iPhone Duo and other wide screens.
   Inner screen opens in landscape (about 890 x 626), outer screen is short (about 466 x 678), Split View halves the width.
   Phones keep their layout. From 760 px wide, the main pages (Home, Journey, Sessions, More, a bowler's page) use two columns of cards;
   every other page stays in its usual centred column. The side Dynamic Island is kept clear with the safe areas. */
html body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media (min-width:760px){
 html{--xw-wide:min(1040px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
 html body:has(.home-content,#jy-root,#completed-list,.more-links,.bs) :is(.app-frame,.home-shell,.screen,.settings-shell){max-width:var(--xw-wide)!important;width:100%!important}
 html body:has(.home-content,#jy-root,#completed-list,.more-links,.bs) :is(.profile-nav,.home-nav,.game-nav,.xw-primary-nav){width:var(--xw-wide)!important;max-width:var(--xw-wide)!important}
 html body:has(.home-content,#jy-root,#completed-list,.more-links,.bs) .xw-brand-header{max-width:var(--xw-wide)!important}
 /* two columns of cards */
 html body :is(.home-content,#jy-root,#completed-list,.more-links,.bs){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start;grid-auto-flow:row dense}
 html body :is(.home-content,#jy-root,#completed-list,.more-links,.bs)>*{min-width:0;margin-top:0!important;margin-bottom:14px!important}
 html body .more-links>*{margin-bottom:0!important}html body .more-links{row-gap:12px}
 /* parts that stay full width */
 html body .home-content>:is(.xw-bk,.home-photo-banner),html body #jy-root>:is(header,.jy-banner,.stats-photo-banner,h1,.jy-back,.jy-seg),html body .bs>.bs-hero{grid-column:1/-1}
 /* photo banners stay a sensible height on a wide screen */
 html body :is([class*="photo-banner"],.xw-backup-banner,.practice-setup-banner){max-height:210px!important;min-height:0!important;overflow:hidden}
 html body :is([class*="photo-banner"],.xw-backup-banner,.practice-setup-banner)>img{width:100%!important;height:100%!important;max-height:210px!important;object-fit:cover!important}
}
/* short screens (the outer screen, the inner screen held sideways): smaller photo banners so the content shows sooner */
@media (max-height:700px) and (min-width:440px){
 html body :is([class*="photo-banner"],.xw-backup-banner,.practice-setup-banner){max-height:150px!important;min-height:0!important;overflow:hidden}
 html body :is([class*="photo-banner"],.xw-backup-banner,.practice-setup-banner)>img{height:100%!important;max-height:150px!important;object-fit:cover!important}
}
/* Build 6.02: on wide and folding screens the page-to-page animation is off. During it the bottom menu was drawn as a picture
   and could float in the middle of the page or vanish while the next page loaded. Phones keep the animation. */
@media (min-width:440px){
 @view-transition{navigation:none}
 html body :is(nav[aria-label="Primary navigation"],.xw-brand-header){view-transition-name:none!important}
}
/* Build 6.10: on wide and folding screens the menu gets its own drawing layer, so iPhone does not drop it while the screen changes size */
@media (min-width:440px){
 html body nav.xw-primary-nav{-webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
}