/* Xbox Home sizing + radius pass.
   Loaded after reference.css so it only nudges the already-matched layout. */

:root{
  --tile-r:.58rem;
  --card-r:.58rem;
}

/* Bigger game row, while keeping the same Xbox shelf rhythm. */
.ref-strip{
  gap:1.2rem !important;
}
.ref-tile{
  width:18rem !important;
}
.ref-tile .tile-face{
  width:18rem !important;
  height:18rem !important;
  border-radius:var(--tile-r) !important;
}
.ref-tile.tile-sm{
  margin-top:4rem !important;
}
.ref-tile.ref-hero{
  width:22.5rem !important;
}
.ref-tile.ref-hero .tile-face{
  width:22.5rem !important;
  height:22.5rem !important;
  border-radius:var(--tile-r) !important;
}
.ref-art,
.ref-art img{
  border-radius:inherit !important;
}

/* The Friends tile is intentionally a little larger than the standard covers. */
.ref-friends{
  width:21.5rem !important;
  margin-top:.5rem !important;
}
.ref-friends .tile-face{
  width:21.5rem !important;
  height:21.5rem !important;
  border-radius:var(--tile-r) !important;
}

/* Match the softer Xbox card corners on the lower row. */
.ref-card{
  height:20.4rem !important;
  border-radius:var(--card-r) !important;
}
.ref-card-art,
.ref-card-art img,
.ref-card.card-store{
  border-radius:inherit !important;
}
.ref-card .card-chip{
  border-radius:.32rem !important;
}

/* Focus should trace the rounded selected tile instead of looking like a square box. */
.focus-ring{
  border-radius:.62rem !important;
}

/* Round the rest of the visible Xbox chrome a little more too. */
.profile{
  border-radius:3rem !important;
}
.gp-chip{
  border-radius:.38rem !important;
}
.guide-panel{
  border-radius:.65rem !important;
}
.guide-tab{
  border-radius:.38rem !important;
}
.grow{
  border-radius:.5rem !important;
}
.grow-icon{
  border-radius:.42rem !important;
}
.quick-btn{
  border-radius:.5rem !important;
}

/* Top five Xbox buttons: one connected, near-black control capsule. */
.sysnav{
  gap:0 !important;
  padding:.34rem .42rem !important;
  background:rgba(0,0,0,.975) !important;
  border-radius:3.2rem !important;
  box-shadow:0 .28rem 1.1rem rgba(0,0,0,.28) !important;
  overflow:visible;
}
.sysnav-btn{
  width:5.05rem !important;
  height:5.05rem !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.sysnav-btn:first-child{
  border-radius:2.7rem 0 0 2.7rem !important;
}
.sysnav-btn:last-child{
  border-radius:0 2.7rem 2.7rem 0 !important;
}
.sysnav-btn:hover,
.sysnav-btn.active,
.sysnav-btn[data-focused]{
  background:rgba(255,255,255,.075) !important;
  transform:none !important;
}
.sysnav-btn + .sysnav-btn{
  box-shadow:inset .08rem 0 0 rgba(255,255,255,.035) !important;
}

/* Home profile: solid black capsule, black avatar, fixed test label. */
body[data-view="home"] .profile{
  padding:.42rem 1.35rem .42rem .42rem !important;
  gap:1rem !important;
  background:transparent !important;
  box-shadow:none !important;
}
body[data-view="home"] .profile:hover,
body[data-view="home"] .profile[data-focused]{
  background:transparent !important;
}
body[data-view="home"][data-profile-capsule="on"] .profile{
  background:#000 !important;
  box-shadow:0 .24rem 1rem rgba(0,0,0,.30) !important;
}
body[data-view="home"][data-profile-capsule="on"] .profile:hover,
body[data-view="home"][data-profile-capsule="on"] .profile[data-focused]{
  background:#000 !important;
}
body[data-view="home"] .profile .avatar{
  width:5.15rem !important;
  height:5.15rem !important;
  background:#000 !important;
  box-shadow:inset 0 0 0 .16rem rgba(255,255,255,.14) !important;
}
body[data-view="home"] .profile .avatar img{
  display:none !important;
}
body[data-view="home"] .profile .gamertag{
  font-size:0 !important;
  color:#fff !important;
}
body[data-view="home"] .profile .gamertag::after{
  content:"xboxtest";
  font-size:1.9rem;
  font-weight:600;
  line-height:1.1;
  color:#fff;
}
body[data-view="home"] .profile .profile-sub{
  display:none !important;
}

/* Light Microsoft Store correction pass.
   Keep the console Store dense and TV-first instead of looking like a desktop web shop. */
body[data-view="store"] .xstore-shell{
  grid-template-columns:19rem minmax(0,1fr) !important;
}
body[data-view="store"] .xstore-rail{
  padding:2.8rem 1rem 2.4rem !important;
  background:#0b0b0b !important;
  border-right:.1rem solid rgba(255,255,255,.055) !important;
}
body[data-view="store"] .xstore-brand{
  gap:.85rem !important;
  padding:0 1rem 2.35rem !important;
  font-size:1.68rem !important;
}
body[data-view="store"] .xstore-brand-icon{
  width:3rem !important;
  height:3rem !important;
}
body[data-view="store"] .xstore-nav-btn{
  min-height:5rem !important;
  gap:1.05rem !important;
  padding:0 1rem !important;
  border-radius:.22rem !important;
  font-size:1.46rem !important;
}
body[data-view="store"] .xstore-content{
  padding:2.7rem 3.5rem 6rem !important;
}
body[data-view="store"] .xstore-top{
  height:4.3rem !important;
  margin-bottom:1.8rem !important;
}
body[data-view="store"] .xstore-hero{
  height:37rem !important;
  margin-bottom:3rem !important;
  border-radius:.28rem !important;
}
body[data-view="store"] .xstore-hero-copy{
  left:3.2rem !important;
  top:2.8rem !important;
  bottom:3rem !important;
  width:44rem !important;
}
body[data-view="store"] .xstore-hero-title{
  font-size:4rem !important;
}
body[data-view="store"] .xstore-row{
  grid-auto-columns:17.2rem !important;
  gap:1.05rem !important;
}
body[data-view="store"] .store-cover{
  border-radius:.28rem !important;
}
body[data-view="store"] .store-game-meta{
  padding-top:.7rem !important;
}
body[data-view="store"] .store-game-title{
  font-size:1.38rem !important;
}
body[data-view="store"] .xstore-shelf{
  margin-bottom:3.45rem !important;
}
body[data-view="store"] .xstore-shelf-title{
  font-size:2.25rem !important;
}
body[data-view="store"] .xstore-gallery-title{
  font-size:3.65rem !important;
}
body[data-view="store"] .xproduct-cover{
  width:25rem !important;
  border-radius:.32rem !important;
}
body[data-view="store"] .xproduct-title{
  font-size:4.9rem !important;
}
body[data-view="store"] .xproduct-action{
  border-radius:.18rem !important;
}

/* Cloud stream should take over the display like a real launched game. */
.player.cloud-player{
  background:#000 !important;
}
.player.cloud-player iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  background:#000 !important;
}
.player.cloud-player .player-hint{
  background:rgba(0,0,0,.78) !important;
  border-radius:.35rem !important;
}

@media (max-aspect-ratio:16/10){
  .ref-tile{
    width:17.4rem !important;
  }
  .ref-tile .tile-face{
    width:17.4rem !important;
    height:17.4rem !important;
  }
  .ref-tile.ref-hero{
    width:21.8rem !important;
  }
  .ref-tile.ref-hero .tile-face{
    width:21.8rem !important;
    height:21.8rem !important;
  }
  /* Width on the tile, height only on the face - the same split the
     unscoped .ref-friends rule above uses. Grouping them gave the <button>
     a fixed 20.8rem height while its face stayed 18rem (home-row-custom
     pins it), and a button centres content it is taller than, so the
     Friends artwork floated 1.4rem above the row baseline on every display
     at or below 16:10. Measured at 1920x1200: button 208px, face 180px,
     face top 699 against 713 for every neighbour. */
  .ref-friends{
    width:20.8rem !important;
  }
  .ref-friends .tile-face{
    width:20.8rem !important;
    height:20.8rem !important;
  }
  body[data-view="store"] .xstore-shell{
    grid-template-columns:17rem minmax(0,1fr) !important;
  }
  body[data-view="store"] .xstore-content{
    padding-left:2.7rem !important;
    padding-right:2.7rem !important;
  }
  body[data-view="store"] .xstore-row{
    grid-auto-columns:16.3rem !important;
  }
}


/* Exact neutral Home black: match the top navigation bar pixel-for-pixel. */
body[data-view="home"][data-home-neutral="true"]{
  --bg:#000 !important;
  background:#000 !important;
}
body[data-view="home"][data-home-neutral="true"] .stage,
body[data-view="home"][data-home-neutral="true"] .views,
body[data-view="home"][data-home-neutral="true"] #view-home,
body[data-view="home"][data-home-neutral="true"] .reference-home,
body[data-view="home"][data-home-neutral="true"] .backdrop,
body[data-view="home"][data-home-neutral="true"] .backdrop-scrim,
body[data-view="home"][data-home-neutral="true"] .topbar-scrim{
  background:#000 !important;
}
body[data-view="home"][data-home-neutral="true"] .backdrop-layer{
  opacity:0 !important;
  background-image:none !important;
}
body[data-view="home"][data-home-neutral="true"] .backdrop-glow{
  display:none !important;
}
body[data-view="home"][data-home-neutral="true"] #view-home::before,
body[data-view="home"][data-home-neutral="true"] #view-home::after,
body[data-view="home"][data-home-neutral="true"] .reference-home::before,
body[data-view="home"][data-home-neutral="true"] .reference-home::after{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}