/* Xbox console Microsoft Store.
   Geometry is based on the real Series X|S ten-foot Store: compact icon rail,
   large selected gallery card, smaller cards beside it, details directly below,
   then horizontal discovery rows. */
.view-store{
  z-index:30;
  color:#fff;
  background:#151515;
  font-family:'Segoe UI',system-ui,sans-serif;
}
.xstore-shell{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:10.7rem minmax(0,1fr);
  background:#151515;
}

/* ───────── narrow Xbox Store rail ───────── */
.xstore-rail{
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  padding:1.8rem 1.2rem 2rem;
  background:#202020;
  box-shadow:.25rem 0 1.4rem rgba(0,0,0,.18);
}
.xstore-avatar{
  width:3.3rem;
  height:3.3rem;
  margin:0 auto 2rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:#111;
  display:grid;
  place-items:center;
}
.xstore-avatar span{
  width:2.35rem;
  height:2.35rem;
  display:block;
  border-radius:50%;
  background:#000;
  box-shadow:0 0 0 .12rem rgba(255,255,255,.08);
}
.xstore-nav{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.38rem;
}
.xstore-nav-btn{
  position:relative;
  width:100%;
  height:5rem;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:.2rem;
  background:transparent;
  color:#a9a9a9;
  font:500 1.25rem/1 'Segoe UI',system-ui,sans-serif;
}
.xstore-nav-btn::before{
  content:'';
  position:absolute;
  left:-1.2rem;
  top:50%;
  width:.26rem;
  height:0;
  transform:translateY(-50%);
  background:#fff;
  transition:height .12s ease;
}
.xstore-nav-btn.active{
  color:#fff;
  background:rgba(255,255,255,.025);
}
.xstore-nav-btn.active::before{ height:3.35rem; }
.xstore-nav-btn[data-focused]{
  background:#f0f0f0;
  color:#151515;
  outline:.22rem solid #fff;
  outline-offset:.1rem;
}
.xstore-nav-btn[data-focused]::before{ background:#107c10; height:3.35rem; }
.xstore-nav-icon{
  width:2.45rem;
  height:2.45rem;
  display:grid;
  place-items:center;
}
.xstore-nav-icon svg{ width:2.2rem; height:2.2rem; fill:currentColor; }
.xstore-nav-label{
  position:absolute;
  left:calc(100% + 1.5rem);
  top:50%;
  transform:translateY(-50%) translateX(-.4rem);
  min-width:max-content;
  padding:.75rem 1rem;
  border-radius:.25rem;
  background:#050505;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .1s ease,transform .1s ease;
  box-shadow:0 .5rem 1.6rem rgba(0,0,0,.4);
}
.xstore-nav-btn[data-focused] .xstore-nav-label,
.xstore-nav-btn:hover .xstore-nav-label{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.xstore-nav-rule{
  height:.1rem;
  margin:1rem .7rem;
  background:rgba(255,255,255,.25);
}
.xstore-rail-foot{
  margin-top:auto;
  text-align:center;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.22rem;
  color:rgba(255,255,255,.28);
}

/* ───────── Store body ───────── */
.xstore-main{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 62% 24%,rgba(95,59,38,.18),transparent 32%),
    #151515;
}
.xstore-content{
  position:absolute;
  inset:0;
  overflow:auto;
  padding:3.45rem 2.1rem 7rem;
  scrollbar-width:none;
}
.xstore-content::-webkit-scrollbar{ display:none; }

/* ───────── exact-style Store gallery ───────── */
.xstore-feature{ margin-bottom:3.6rem; }
.xstore-context{
  margin:.15rem 0 1.2rem;
  font-size:1.55rem;
  color:rgba(255,255,255,.72);
}
.xstore-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2rem;
}
.xstore-title-row h1{
  margin:0;
  font-size:3.55rem;
  line-height:1;
  font-weight:400;
  letter-spacing:-.07rem;
}
.xstore-hints{
  display:flex;
  align-items:center;
  gap:2.4rem;
  padding-right:2.3rem;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.035rem;
  color:rgba(255,255,255,.78);
}
.xstore-gallery{
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  min-width:0;
}
.store-lead{
  width:37.2rem;
  flex:0 0 37.2rem;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
}
.store-lead-art{
  position:relative;
  display:block;
  width:100%;
  height:21.2rem;
  overflow:hidden;
  border-radius:.55rem;
  background:#222;
}
.store-lead-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.store-lead[data-focused] .store-lead-art{
  outline:.3rem solid #fff;
  outline-offset:.28rem;
  box-shadow:0 .8rem 2.2rem rgba(0,0,0,.42);
}
.xstore-gallery-small{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:14rem;
  gap:1.4rem;
  overflow-x:auto;
  overflow-y:visible;
  padding:.28rem .3rem 1rem;
  margin-top:-.28rem;
  scrollbar-width:none;
}
.xstore-gallery-small::-webkit-scrollbar{ display:none; }
.store-compact{
  width:14rem;
  min-width:14rem;
  border:0;
  padding:0;
  background:#292727;
  color:#fff;
  text-align:left;
  overflow:visible;
}
.store-compact .store-cover{
  height:13.65rem;
  aspect-ratio:auto;
  border-radius:.38rem .38rem 0 0;
}
.store-compact .store-game-meta{
  min-height:5.1rem;
  padding:.9rem .85rem .7rem;
  background:#302e2e;
  border-radius:0 0 .28rem .28rem;
}
.store-compact .store-game-title{ display:none; }
.store-compact .store-game-price{
  margin:0;
  color:#fff;
  font-size:1.25rem;
  font-weight:500;
}
.store-compact[data-focused] .store-cover,
.store-grid-card[data-focused] .store-cover,
.store-wide[data-focused] .store-cover{
  outline:.3rem solid #fff;
  outline-offset:.26rem;
  box-shadow:0 .7rem 2rem rgba(0,0,0,.45);
}
.xstore-selected{
  width:55rem;
  min-height:11.2rem;
  padding:.15rem 0 0;
}
.xstore-selected-title{
  margin-top:1.7rem;
  font-size:2.25rem;
  line-height:1.1;
  font-weight:400;
}
.xstore-selected-meta{
  display:flex;
  align-items:center;
  gap:1.3rem;
  margin-top:1rem;
}
.xstore-selected-rating{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:2.2rem;
  padding:0 .55rem;
  border-radius:.2rem;
  background:#3b3b3b;
  font-size:1.1rem;
}
.xstore-selected-rating b{ font-weight:600; }
.xstore-selected-rating span:last-child{ color:rgba(255,255,255,.72); }
.xstore-stars{ letter-spacing:.05rem; font-size:1.15rem; }
.xstore-selected-genre{
  min-height:2.15rem;
  display:flex;
  align-items:center;
  padding:0 1rem;
  border-radius:1.4rem;
  background:#5a5a5a;
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
}
.xstore-selected-buy{
  display:flex;
  align-items:baseline;
  gap:1.2rem;
  margin-top:1.35rem;
}
.xstore-selected-price{
  color:#d4f20c;
  font-size:1.7rem;
  font-weight:700;
}
.xstore-selected-offer{
  font-size:1.25rem;
  font-weight:600;
  color:rgba(255,255,255,.78);
}

/* ───────── secondary rows ───────── */
.xstore-shelf{ margin:0 0 4.1rem; }
.xstore-shelf-head{
  min-height:3.4rem;
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:1.2rem;
}
.xstore-shelf-title{
  margin:0;
  font-size:1.9rem;
  line-height:1;
  font-weight:500;
}
.xstore-shelf-sub{
  margin-top:.5rem;
  font-size:1.15rem;
  color:rgba(255,255,255,.52);
}
.xstore-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:14rem;
  gap:1.35rem;
  overflow-x:auto;
  overflow-y:visible;
  padding:.3rem .3rem 1.4rem;
  margin-left:-.3rem;
  scrollbar-width:none;
}
.xstore-row::-webkit-scrollbar{ display:none; }
.xstore-row.wide{ grid-auto-columns:26rem; }
.store-game{
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font:inherit;
}
.store-cover{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:.4rem;
  background:#252525;
}
.store-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.store-wide .store-cover{ aspect-ratio:16/9; }
.store-wide .store-game-meta{ padding-top:.72rem; }
.store-cloud-mark{
  position:absolute;
  left:.65rem;
  bottom:.65rem;
  width:2.35rem;
  height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.78);
  color:#fff;
}
.store-cloud-mark svg{ width:1.45rem; height:1.45rem; }
.store-owned-badge{
  position:absolute;
  top:.65rem;
  right:.65rem;
  padding:.4rem .62rem;
  border-radius:.18rem;
  background:#107c10;
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.03rem;
}
.store-game-meta{ display:block; padding:.72rem .05rem 0; }
.store-game-title{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:1.35rem;
  font-weight:500;
}
.store-game-price{
  display:block;
  margin-top:.28rem;
  font-size:1.2rem;
  font-weight:600;
  color:#d4f20c;
}
.store-game-sub{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-top:.18rem;
  font-size:1.05rem;
  color:rgba(255,255,255,.52);
}

/* ───────── games/search/wishlist/owned pages ───────── */
.xstore-browse{ padding-top:4.2rem; padding-right:4.5rem; }
.xstore-page-head{
  position:relative;
  margin:0 0 2.1rem;
}
.xstore-page-kicker{
  margin-bottom:.75rem;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.11rem;
  color:rgba(255,255,255,.48);
}
.xstore-page-title{
  margin:0;
  font-size:3.8rem;
  line-height:1;
  font-weight:400;
  letter-spacing:-.06rem;
}
.xstore-page-count{
  position:absolute;
  right:0;
  bottom:.3rem;
  font-size:1.25rem;
  color:rgba(255,255,255,.5);
}
.xstore-filters{
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  margin-bottom:2.2rem;
  padding:.25rem;
  scrollbar-width:none;
}
.xstore-filters::-webkit-scrollbar{ display:none; }
.xstore-filter{
  flex:0 0 auto;
  min-height:3.8rem;
  padding:0 1.5rem;
  border:0;
  border-radius:.18rem;
  background:#303030;
  color:#fff;
  font:600 1.22rem/1 'Segoe UI',system-ui,sans-serif;
}
.xstore-filter.active{ background:#f1f1f1; color:#111; }
.xstore-filter[data-focused]{ outline:.26rem solid #9bf00b; outline-offset:.2rem; }
.xstore-search-wrap{
  position:relative;
  max-width:75rem;
  height:5.1rem;
  margin:0 0 2.4rem;
  display:flex;
  align-items:center;
  border:.16rem solid rgba(255,255,255,.32);
  background:#252525;
}
.xstore-search-wrap:focus-within{ border-color:#fff; }
.xstore-search-icon{
  width:5rem;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.72);
}
.xstore-search-icon svg{ width:2.15rem; height:2.15rem; }
.xstore-search{
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font:400 1.65rem/1 'Segoe UI',system-ui,sans-serif;
}
.xstore-search::placeholder{ color:rgba(255,255,255,.38); }
.xstore-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14.8rem,1fr));
  gap:2.45rem 1.35rem;
  padding:.25rem .25rem 6rem;
}
.store-grid-card .store-cover{ aspect-ratio:3/4; }
.xstore-empty{
  grid-column:1/-1;
  min-height:25rem;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
  font-size:1.65rem;
}
.xstore-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1rem;
  background:#151515;
  color:#fff;
  text-align:center;
  font-size:3rem;
  font-weight:400;
}
.xstore-loading span{
  margin-top:.75rem;
  font-size:1.35rem;
  color:rgba(255,255,255,.5);
  font-weight:400;
}
.xstore-loading.error span{ color:#ffb4ab; }

/* ───────── product details ───────── */
.xproduct{
  position:absolute;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:#101010;
}
.xproduct-art{
  position:absolute;
  inset:0 0 0 38%;
  background-size:cover;
  background-position:center;
  opacity:.68;
}
.xproduct-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#0a0a0a 0%,rgba(10,10,10,.98) 32%,rgba(10,10,10,.75) 56%,rgba(10,10,10,.32) 100%),
    linear-gradient(0deg,rgba(0,0,0,.58),transparent 48%);
}
.xproduct-back{
  position:absolute;
  z-index:3;
  left:2.4rem;
  top:2.2rem;
  width:4.5rem;
  height:4.5rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
}
.xproduct-back svg{ width:2.3rem; height:2.3rem; }
.xproduct-back[data-focused]{ outline:.28rem solid #fff; outline-offset:.2rem; }
.xproduct-body{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  gap:3.5rem;
  padding:6.8rem 7rem 5.5rem;
}
.xproduct-cover-wrap{ flex:0 0 auto; }
.xproduct-cover{
  width:24rem;
  aspect-ratio:3/4;
  display:block;
  object-fit:cover;
  border-radius:.4rem;
  box-shadow:0 2rem 5rem rgba(0,0,0,.5);
}
.xproduct-copy{ max-width:70rem; }
.xproduct-type{
  margin-bottom:.9rem;
  color:#9bf00b;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.08rem;
}
.xproduct-title{
  margin:0 0 .8rem;
  max-width:70rem;
  font-size:4.75rem;
  line-height:1;
  font-weight:500;
  letter-spacing:-.08rem;
}
.xproduct-publisher{
  font-size:1.3rem;
  color:rgba(255,255,255,.72);
}
.xproduct-rating{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:1rem;
  font-size:1.15rem;
}
.xproduct-rating span{ letter-spacing:.04rem; }
.xproduct-rating b{ font-weight:600; }
.xproduct-rating small{ color:rgba(255,255,255,.55); font-size:1.05rem; }
.xproduct-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin:1.2rem 0 1.45rem;
}
.xproduct-badges span{
  min-height:2.6rem;
  display:flex;
  align-items:center;
  padding:0 .8rem;
  border-radius:.18rem;
  background:rgba(255,255,255,.12);
  font-size:1.05rem;
  font-weight:600;
}
.xproduct-desc{
  margin:0;
  max-width:66rem;
  font-size:1.48rem;
  line-height:1.48;
  color:rgba(255,255,255,.84);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.xproduct-price{
  margin-top:1.7rem;
  font-size:2rem;
  font-weight:600;
}
.xproduct-ownership{
  margin-top:.3rem;
  font-size:1.15rem;
  color:rgba(255,255,255,.55);
}
.xproduct-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.9rem;
}
.xproduct-action{
  min-width:16.5rem;
  min-height:4.65rem;
  border:0;
  border-radius:.18rem;
  padding:0 1.7rem;
  background:#ededed;
  color:#111;
  font:700 1.28rem/1 'Segoe UI',system-ui,sans-serif;
}
.xproduct-action.primary{ background:#107c10; color:#fff; }
.xproduct-action.primary.play{ background:#107c10; color:#fff; }
.xproduct-action[data-focused]{ outline:.3rem solid #fff; outline-offset:.25rem; }
.xproduct-cloud-row{
  display:flex;
  align-items:center;
  gap:.9rem;
  max-width:62rem;
  margin-top:1.45rem;
  color:rgba(255,255,255,.64);
  font-size:1.1rem;
}
.xproduct-cloud-row svg{ width:2rem; height:2rem; flex:0 0 auto; }

/* ───────── owned cloud shelf in My games & apps ───────── */
.cloud-library-section{
  flex:none;
  margin:0 var(--safe-x) 1.5rem;
  padding:1.4rem 0 1.2rem;
}
.cloud-library-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:1rem;
}
.cloud-library-head h2{
  margin:0;
  font-size:2rem;
  font-weight:600;
}
.cloud-library-head p{
  margin:.35rem 0 0;
  font-size:1.15rem;
  color:rgba(255,255,255,.55);
}
.cloud-library-head > span{
  font-size:1.1rem;
  color:rgba(255,255,255,.5);
}
.cloud-library-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:13.5rem;
  gap:1.2rem;
  overflow-x:auto;
  padding:.3rem .3rem 1rem;
  margin-left:-.3rem;
  scrollbar-width:none;
}
.cloud-library-row::-webkit-scrollbar{ display:none; }
.cloud-library-game{
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font:inherit;
}
.cloud-library-cover{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:.45rem;
  background:#222;
}
.cloud-library-cover img{ width:100%; height:100%; display:block; object-fit:cover; }
.cloud-library-game[data-focused] .cloud-library-cover{ outline:.3rem solid #fff; outline-offset:.25rem; }
.cloud-library-badge{
  position:absolute;
  left:.6rem;
  bottom:.6rem;
  width:2.2rem;
  height:2.2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-size:1.2rem;
}
.cloud-library-name{
  display:block;
  margin-top:.65rem;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:1.25rem;
  font-weight:600;
}
.cloud-library-sub{
  display:block;
  margin-top:.2rem;
  font-size:1.05rem;
  color:rgba(255,255,255,.5);
}

/* ───────── cloud player hardening ───────── */
.player.cloud-player{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  width:100vw!important;
  height:100vh!important;
  background:#000!important;
}
.player.cloud-player iframe{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:#000!important;
}
.player.cloud-player .player-hint{
  position:absolute;
  left:50%;
  bottom:2.4rem;
  transform:translateX(-50%);
  z-index:2;
  padding:.75rem 1.15rem;
  border-radius:.25rem;
  background:rgba(0,0,0,.72);
  color:rgba(255,255,255,.78);
  font-size:1.15rem;
  pointer-events:none;
}

body[data-view="store"] .backdrop,
body[data-view="store"] .topbar-scrim,
body[data-view="store"] .sysbar,
body[data-view="store"] .legend{
  opacity:0!important;
  pointer-events:none!important;
}

@media (max-aspect-ratio:16/10){
  .xstore-shell{ grid-template-columns:9.2rem minmax(0,1fr); }
  .xstore-rail{ padding-left:1rem; padding-right:1rem; }
  .xstore-nav-btn::before{ left:-1rem; }
  .xstore-content{ padding-left:1.7rem; padding-right:1.7rem; }
  .store-lead{ width:32rem; flex-basis:32rem; }
  .store-lead-art{ height:18rem; }
  .xstore-gallery-small{ grid-auto-columns:12.6rem; }
  .store-compact{ width:12.6rem; min-width:12.6rem; }
  .store-compact .store-cover{ height:12.3rem; }
  .xstore-title-row h1{ font-size:3.15rem; }
  .xstore-hints{ padding-right:.6rem; gap:1.3rem; }
  .xproduct-body{ padding-left:5rem; padding-right:4rem; gap:2.8rem; }
  .xproduct-cover{ width:21rem; }
  .xproduct-title{ font-size:4.1rem; }
}


/* Rich local details for every Stratus Store title. */
.xproduct-rich-details{
  margin:1.65rem 0 1.2rem;
  max-width:82rem;
}
.xproduct-rich-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}
.xproduct-rich-fact{
  min-width:0;
  min-height:5.2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.28rem;
  padding:.85rem 1rem;
  border:.1rem solid rgba(255,255,255,.09);
  border-radius:.7rem;
  background:rgba(0,0,0,.34);
}
.xproduct-rich-fact small{
  color:rgba(255,255,255,.48);
  font-size:.95rem;
  font-weight:600;
}
.xproduct-rich-fact strong{
  overflow:hidden;
  color:#fff;
  font-size:1.14rem;
  font-weight:600;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.xproduct-rich-head{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  margin:1.15rem 0 .7rem;
}
.xproduct-rich-head strong{
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
}
.xproduct-rich-head span{
  color:rgba(255,255,255,.5);
  font-size:1rem;
}
.xproduct-rich-gallery{
  display:flex;
  gap:.72rem;
  padding:.3rem .22rem .55rem;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.xproduct-rich-gallery::-webkit-scrollbar{display:none}
.xproduct-rich-shot{
  position:relative;
  width:13.2rem;
  height:7.45rem;
  flex:0 0 13.2rem;
  padding:0;
  overflow:hidden;
  border:.14rem solid rgba(255,255,255,.17);
  border-radius:.62rem;
  background:#0e1012;
  opacity:.72;
  scroll-snap-align:center;
  transform:scale(.985);
  transition:opacity .12s ease,transform .14s ease,border-color .12s ease;
}
.xproduct-rich-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.xproduct-rich-shot:hover,
.xproduct-rich-shot.selected,
.xproduct-rich-shot[data-focused]{
  opacity:1;
  transform:scale(1);
  border-color:rgba(255,255,255,.76);
}
.xproduct-rich-shot.selected::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 .2rem #fff;
  pointer-events:none;
}
.xproduct-rich-shot[data-focused]{
  outline:.28rem solid #fff!important;
  outline-offset:.18rem!important;
}

@media(max-aspect-ratio:16/10){
  .xproduct-rich-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  .xproduct-rich-facts{grid-template-columns:1fr 1fr}
  .xproduct-rich-shot{
    width:max(12rem,116px);
    height:max(6.75rem,65px);
    flex-basis:max(12rem,116px);
  }
}


/* ───────── Store motion + responsiveness pass ───────── */
.view-store{
  --store-ease-out:cubic-bezier(.16,1,.3,1);
  --store-ease-soft:cubic-bezier(.22,.61,.36,1);
}
.xstore-shell{
  isolation:isolate;
}
.xstore-main::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-14%;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 23%,rgba(16,124,16,.08),transparent 24%),
    radial-gradient(circle at 26% 78%,rgba(255,255,255,.025),transparent 32%);
  opacity:.72;
  transform:translate3d(0,0,0) scale(1.02);
  animation:xstoreAmbient 18s ease-in-out infinite alternate;
}
@keyframes xstoreAmbient{
  from{transform:translate3d(-1.2%,0,0) scale(1.02)}
  to{transform:translate3d(1.4%,-.8%,0) scale(1.045)}
}
.xstore-content{
  z-index:1;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.xstore-content.store-page-enter{
  animation:xstorePageIn .28s var(--store-ease-out) both;
}
@keyframes xstorePageIn{
  from{opacity:0;transform:translate3d(0,.8rem,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Keep the rail alive between Store sections instead of flashing/rebuilding. */
.xstore-rail{
  transition:background-color .2s ease,box-shadow .2s ease;
}
.xstore-nav-btn{
  transition:
    background-color .14s ease,
    color .14s ease,
    transform .18s var(--store-ease-out);
}
.xstore-nav-btn:hover,
.xstore-nav-btn[data-focused]{
  transform:translate3d(.18rem,0,0);
}
.xstore-nav-btn::before{
  transition:height .18s var(--store-ease-out),background-color .14s ease;
}

/* Home hero gets a living ambient layer based on the focused game. */
.xstore-feature{
  position:relative;
  isolation:isolate;
  padding:1.2rem 1.35rem 1.55rem;
  margin-left:-1.35rem;
  margin-right:-.7rem;
  border-radius:1.1rem;
  overflow:hidden;
}
.xstore-feature::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-18%;
  right:-5%;
  width:66%;
  height:92%;
  background-image:var(--feature-art);
  background-size:cover;
  background-position:center;
  opacity:.16;
  filter:saturate(.78) brightness(.72);
  transform:scale(1.055) translate3d(1%,0,0);
  transition:opacity .22s ease;
  animation:xstoreFeatureDrift 15s ease-in-out infinite alternate;
}
.xstore-feature::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,#151515 0%,rgba(21,21,21,.95) 38%,rgba(21,21,21,.55) 73%,rgba(21,21,21,.92) 100%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 36%,rgba(0,0,0,.18));
  pointer-events:none;
}
@keyframes xstoreFeatureDrift{
  from{transform:scale(1.055) translate3d(0,0,0)}
  to{transform:scale(1.085) translate3d(-1.3%,.6%,0)}
}
.xstore-feature.selection-changed::before{
  animation:xstoreFeatureSwap .34s var(--store-ease-out),xstoreFeatureDrift 15s .34s ease-in-out infinite alternate;
}
@keyframes xstoreFeatureSwap{
  0%{opacity:.04;transform:scale(1.075) translate3d(1.4%,0,0)}
  100%{opacity:.16;transform:scale(1.055) translate3d(0,0,0)}
}
.xstore-selected.selection-changed{
  animation:xstoreSelectedSwap .2s var(--store-ease-out);
}
@keyframes xstoreSelectedSwap{
  from{opacity:.55;transform:translate3d(0,.35rem,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Smooth, restrained card motion. No bounce. */
.store-game{
  position:relative;
  z-index:1;
  transform:translate3d(0,0,0);
  transition:
    transform .2s var(--store-ease-out),
    opacity .16s ease;
  will-change:transform;
}
.store-card-enter{
  animation:xstoreCardIn .28s var(--store-ease-out) backwards;
  animation-delay:var(--store-delay,0ms);
}
@keyframes xstoreCardIn{
  from{opacity:0;transform:translate3d(0,.85rem,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.store-game:hover,
.store-game[data-focused]{
  z-index:3;
  transform:translate3d(0,-.28rem,0) scale(1.018);
}
.store-cover,
.store-lead-art{
  transform:translateZ(0);
  transition:
    box-shadow .2s ease,
    outline-color .16s ease,
    background-color .2s ease;
}
.store-cover img,
.store-lead-art img{
  opacity:.01;
  transform:scale(1.025);
  transition:
    opacity .2s ease,
    transform .42s var(--store-ease-soft),
    filter .18s ease;
}
.store-cover img.ready,
.store-lead-art img.ready{
  opacity:1;
}
.store-game:hover .store-cover img,
.store-game[data-focused] .store-cover img,
.store-lead:hover .store-lead-art img,
.store-lead[data-focused] .store-lead-art img{
  transform:scale(1.055);
}
.store-game:not(:hover):not([data-focused]) .store-cover img{
  filter:saturate(.94);
}
.store-game-meta{
  transition:transform .18s var(--store-ease-out),opacity .16s ease;
}
.store-game:hover .store-game-meta,
.store-game[data-focused] .store-game-meta{
  transform:translate3d(0,.08rem,0);
}
.xstore-row,
.xstore-gallery-small,
.xproduct-rich-gallery{
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
}
.store-game,
.xproduct-rich-shot{
  scroll-snap-align:start;
}

/* Shelves materialize as they enter the page without adding expensive blur. */
.xstore-shelf,
.xstore-deals{
  animation:xstoreSectionIn .34s var(--store-ease-out) both;
}
.xstore-shelf:nth-of-type(2){animation-delay:35ms}
.xstore-shelf:nth-of-type(3){animation-delay:65ms}
.xstore-shelf:nth-of-type(4){animation-delay:95ms}
.xstore-shelf:nth-of-type(5){animation-delay:125ms}
@keyframes xstoreSectionIn{
  from{opacity:0;transform:translate3d(0,.7rem,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Browse page: seamless infinite catalog. No "Show more" button. */
.xstore-grid{
  position:relative;
  align-items:start;
}
.xstore-autoload-sentinel{
  grid-column:1/-1;
  height:5.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  opacity:.6;
  transition:opacity .16s ease,height .16s ease;
  pointer-events:none;
}
.xstore-autoload-sentinel span{
  width:.62rem;
  height:.62rem;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  animation:xstoreLoadDot 1s ease-in-out infinite;
}
.xstore-autoload-sentinel span:nth-child(2){animation-delay:.12s}
.xstore-autoload-sentinel span:nth-child(3){animation-delay:.24s}
.xstore-autoload-sentinel:not(.loading){
  opacity:.24;
}
.xstore-autoload-sentinel.done{
  height:0;
  opacity:0;
}
@keyframes xstoreLoadDot{
  0%,70%,100%{transform:translateY(0);opacity:.42}
  35%{transform:translateY(-.35rem);opacity:1}
}
.xstore-filter{
  transition:
    transform .18s var(--store-ease-out),
    background-color .14s ease,
    color .14s ease,
    outline-color .14s ease;
}
.xstore-filter:hover,
.xstore-filter[data-focused]{
  transform:translate3d(0,-.12rem,0);
}
.xstore-search-wrap{
  transition:border-color .15s ease,background-color .15s ease,transform .2s var(--store-ease-out);
}
.xstore-search-wrap:focus-within{
  transform:translate3d(0,-.08rem,0);
  background:#292929;
}

/* Product pages feel like a console transition instead of a hard DOM swap. */
.xproduct{
  animation:xproductEnter .3s var(--store-ease-out) both;
}
@keyframes xproductEnter{
  from{opacity:0;transform:scale(1.008)}
  to{opacity:1;transform:scale(1)}
}
.xproduct-art{
  transform:scale(1.035);
  animation:xproductArtIn .55s var(--store-ease-out) both,xproductArtDrift 22s .55s ease-in-out infinite alternate;
}
@keyframes xproductArtIn{
  from{opacity:.22;transform:scale(1.075) translate3d(1.2%,0,0)}
  to{opacity:.68;transform:scale(1.035) translate3d(0,0,0)}
}
@keyframes xproductArtDrift{
  from{transform:scale(1.035) translate3d(0,0,0)}
  to{transform:scale(1.06) translate3d(-1.2%,.6%,0)}
}
.xproduct-cover-wrap{
  animation:xproductCoverIn .34s .04s var(--store-ease-out) both;
}
@keyframes xproductCoverIn{
  from{opacity:0;transform:translate3d(-1.2rem,.5rem,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.xproduct-copy{
  animation:xproductCopyIn .36s .08s var(--store-ease-out) both;
}
@keyframes xproductCopyIn{
  from{opacity:0;transform:translate3d(1rem,.45rem,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.xproduct-action{
  transition:
    transform .16s var(--store-ease-out),
    background-color .14s ease,
    color .14s ease,
    box-shadow .16s ease;
}
.xproduct-action:hover,
.xproduct-action[data-focused]{
  transform:translate3d(0,-.16rem,0);
  box-shadow:0 .7rem 1.8rem rgba(0,0,0,.28);
}
.xproduct-rich-shot{
  transition:
    opacity .14s ease,
    transform .18s var(--store-ease-out),
    border-color .14s ease;
}

/* Faster-feeling loading surface. */
.xstore-loading::before{
  content:"";
  width:4.6rem;
  height:.32rem;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#9bf00b,transparent);
  transform:translateX(-5rem);
  animation:xstoreLoader 1.05s ease-in-out infinite;
}
@keyframes xstoreLoader{
  0%{transform:translateX(-5rem);opacity:.18}
  50%{opacity:1}
  100%{transform:translateX(5rem);opacity:.18}
}

@media (prefers-reduced-motion:reduce){
  .xstore-main::before,
  .xstore-feature::before,
  .xstore-feature.selection-changed::before,
  .store-card-enter,
  .xstore-shelf,
  .xstore-deals,
  .xproduct,
  .xproduct-art,
  .xproduct-cover-wrap,
  .xproduct-copy,
  .xstore-autoload-sentinel span,
  .xstore-loading::before{
    animation:none!important;
  }
  .store-game,
  .store-cover img,
  .store-lead-art img,
  .xstore-nav-btn,
  .xproduct-action{
    transition-duration:.01ms!important;
  }
}


/* ───────── Figure-clean Store refinement ─────────
   Figure's useful lesson is hierarchy: quiet chrome, strong artwork, immediate
   rows and low-latency focus feedback. Keep Xbox geometry and identity. */
.view-store{
  --store-surface:#101112;
  --store-panel:#171819;
  --store-panel-2:#1d1f20;
  --store-muted:rgba(255,255,255,.58);
}
.xstore-shell,
.xstore-main{
  background:var(--store-surface);
}
.xstore-main{
  background:
    radial-gradient(circle at 72% 18%,rgba(255,255,255,.025),transparent 30%),
    var(--store-surface);
}
.xstore-main::before{
  display:none;
}
.xstore-rail{
  background:#151617;
  box-shadow:inset -1px 0 rgba(255,255,255,.055);
}
.xstore-content{
  padding-top:3rem;
}
.xstore-context{
  margin-bottom:.75rem;
  font-size:1.18rem;
  color:var(--store-muted);
}
.xstore-title-row{
  margin-bottom:1.35rem;
}
.xstore-title-row h1{
  font-size:3.05rem;
  font-weight:520;
  letter-spacing:-.055rem;
}
.xstore-hints{
  opacity:.55;
}
.xstore-feature{
  padding:.5rem .55rem 1rem;
  margin-left:-.55rem;
  margin-right:0;
  border-radius:.55rem;
}
.xstore-feature::before{
  top:-8%;
  right:-2%;
  width:55%;
  height:86%;
  opacity:.1;
  filter:saturate(.72) brightness(.58);
  animation-duration:22s;
}
.xstore-feature::after{
  background:
    linear-gradient(90deg,var(--store-surface) 0%,rgba(16,17,18,.96) 48%,rgba(16,17,18,.62) 78%,rgba(16,17,18,.9) 100%);
}
.xstore-gallery{
  gap:.85rem;
}
.store-lead{
  width:34rem;
  flex-basis:34rem;
}
.store-lead-art{
  height:19.2rem;
  border-radius:.7rem;
}
.xstore-gallery-small{
  grid-auto-columns:12.8rem;
  gap:.85rem;
}
.store-compact{
  width:12.8rem;
  min-width:12.8rem;
  background:transparent;
}
.store-compact .store-cover{
  height:12.5rem;
  border-radius:.65rem;
}
.store-compact .store-game-meta{
  min-height:3.7rem;
  padding:.68rem .12rem .35rem;
  background:transparent;
}
.xstore-selected{
  min-height:9rem;
}
.xstore-selected-title{
  margin-top:1.2rem;
  font-size:2rem;
  font-weight:540;
}
.xstore-selected-meta{
  margin-top:.72rem;
}
.xstore-selected-rating{
  background:rgba(255,255,255,.075);
}
.xstore-selected-genre{
  background:rgba(255,255,255,.11);
}
.xstore-selected-buy{
  margin-top:.9rem;
}
.xstore-selected-price{
  color:#fff;
}
.xstore-selected-offer{
  color:var(--store-muted);
}
.xstore-shelf{
  margin-bottom:3.2rem;
}
.xstore-shelf-head{
  margin-bottom:.9rem;
}
.xstore-shelf-kicker{
  opacity:.62;
}
.xstore-shelf-title{
  font-size:1.72rem;
  font-weight:580;
}
.xstore-shelf-sub{
  color:rgba(255,255,255,.46);
}
.xstore-row{
  grid-auto-columns:12.7rem;
  gap:.9rem;
  padding-bottom:.9rem;
}
.xstore-row.wide{
  grid-auto-columns:23rem;
}
.store-cover{
  border-radius:.7rem;
  background:#1a1b1c;
}
.store-game-meta{
  padding-top:.58rem;
}
.store-game-title{
  font-size:1.2rem;
  font-weight:570;
}
.store-game-price{
  color:rgba(255,255,255,.8);
  font-size:1.05rem;
}
.store-game-sub{
  color:rgba(255,255,255,.43);
  font-size:.98rem;
}
.store-cloud-mark{
  width:2.05rem;
  height:2.05rem;
  background:rgba(0,0,0,.68);
}
.store-cloud-mark svg{
  width:1.2rem;
  height:1.2rem;
}
.store-owned-badge{
  padding:.34rem .52rem;
  border-radius:.32rem;
}

/* Figure-like immediacy: focus is obvious, but movement is tiny and never bouncy. */
.store-game{
  transition:transform .145s var(--store-ease-out),opacity .12s ease;
}
.store-game:hover,
.store-game[data-focused]{
  transform:translate3d(0,-.14rem,0) scale(1.012);
}
.store-cover,
.store-lead-art{
  transition:box-shadow .15s ease,outline-color .12s ease;
}
.store-game:hover .store-cover img,
.store-game[data-focused] .store-cover img,
.store-lead:hover .store-lead-art img,
.store-lead[data-focused] .store-lead-art img{
  transform:scale(1.025);
}
.store-cover img,
.store-lead-art img{
  transition:opacity .16s ease,transform .26s var(--store-ease-soft);
}
.store-compact[data-focused] .store-cover,
.store-grid-card[data-focused] .store-cover,
.store-wide[data-focused] .store-cover,
.store-lead[data-focused] .store-lead-art{
  outline:.22rem solid rgba(255,255,255,.94);
  outline-offset:.2rem;
  box-shadow:0 .55rem 1.7rem rgba(0,0,0,.34);
}

/* Discovery pages are dense and immediate, like a real library rather than cards floating in space. */
.xstore-browse{
  padding-top:3.3rem;
}
.xstore-page-head{
  margin-bottom:1.55rem;
}
.xstore-page-title{
  font-size:3.15rem;
  font-weight:540;
}
.xstore-page-count{
  color:rgba(255,255,255,.44);
}
.xstore-filters{
  gap:.55rem;
  margin-bottom:1.5rem;
}
.xstore-filter{
  min-height:3.25rem;
  padding:0 1.15rem;
  border-radius:.55rem;
  background:#1d1f20;
  font-size:1.08rem;
}
.xstore-filter.active{
  background:#f2f2f2;
}
.xstore-search-wrap{
  max-width:64rem;
  height:4.45rem;
  margin-bottom:1.7rem;
  border:.1rem solid rgba(255,255,255,.16);
  border-radius:.65rem;
  background:#191b1c;
  overflow:hidden;
}
.xstore-search{
  font-size:1.35rem;
}
.xstore-grid{
  grid-template-columns:repeat(auto-fill,minmax(13.2rem,1fr));
  gap:1.8rem .9rem;
  padding-bottom:5rem;
}
.store-grid-card .store-cover{
  aspect-ratio:3/4;
}
.xstore-autoload-sentinel{
  height:3.7rem;
}

/* Product page: fewer boxes, clearer hierarchy, artwork does the visual work. */
.xproduct{
  background:#090a0a;
}
.xproduct-scrim{
  background:
    linear-gradient(90deg,#090a0a 0%,rgba(9,10,10,.985) 35%,rgba(9,10,10,.74) 59%,rgba(9,10,10,.2) 100%),
    linear-gradient(0deg,rgba(0,0,0,.64),transparent 52%);
}
.xproduct-body{
  padding:5.8rem 6rem 4.8rem;
  gap:2.8rem;
}
.xproduct-cover{
  width:21.5rem;
  border-radius:.75rem;
  box-shadow:0 1.4rem 4rem rgba(0,0,0,.45);
}
.xproduct-title{
  font-size:4.15rem;
  font-weight:570;
}
.xproduct-type{
  color:rgba(255,255,255,.55);
  letter-spacing:.1rem;
}
.xproduct-badges{
  margin:1rem 0 1.15rem;
}
.xproduct-badges span{
  min-height:2.3rem;
  border-radius:.45rem;
  background:rgba(255,255,255,.085);
}
.xproduct-desc{
  color:rgba(255,255,255,.76);
  font-size:1.34rem;
}
.xproduct-rich-details{
  margin-top:1.25rem;
}
.xproduct-rich-facts{
  gap:.55rem;
}
.xproduct-rich-fact{
  min-height:4.45rem;
  padding:.65rem .8rem;
  border-color:rgba(255,255,255,.06);
  border-radius:.55rem;
  background:rgba(255,255,255,.045);
}
.xproduct-rich-shot{
  border-radius:.55rem;
  opacity:.78;
}
.xproduct-action{
  min-height:4.25rem;
  border-radius:.55rem;
}
.xproduct-action.primary{
  background:#107c10;
}

/* Prevent constant decorative motion from making the Store feel busy or slower. */
.xstore-feature::before,
.xproduct-art{
  animation-iteration-count:1;
}
.xstore-shelf,
.xstore-deals{
  animation-duration:.24s;
}
.store-card-enter{
  animation-duration:.2s;
}
@media(max-width:720px){
  .xstore-content{
    padding:2rem 1.15rem 5rem;
  }
  .xstore-page-title{
    font-size:2.5rem;
  }
  .xstore-grid{
    grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
    gap:1.35rem .7rem;
  }
}


/* ───────── 4-column clean catalog ───────── */
.xstore-browse .xstore-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.15rem;
  align-items:start;
}
.xstore-browse .store-catalog-card{
  width:100%;
  min-width:0;
  padding:0;
  overflow:visible;
}
.xstore-browse .store-catalog-card .store-cover{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:.82rem;
  background:#181a1b;
  box-shadow:0 .35rem 1.1rem rgba(0,0,0,.2);
}
.xstore-browse .store-catalog-card .store-cover::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:38% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.34) 25%,rgba(0,0,0,.9) 100%);
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
}
.xstore-browse .store-catalog-card .store-game-meta{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  min-height:0;
  padding:3.3rem 1rem .85rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.18rem;
  background:transparent;
  color:#fff;
  opacity:0;
  transform:translate3d(0,.45rem,0);
  transition:opacity .14s ease,transform .18s var(--store-ease-out);
  pointer-events:none;
}
.xstore-browse .store-catalog-card:hover .store-cover::after,
.xstore-browse .store-catalog-card[data-focused] .store-cover::after,
.xstore-browse .store-catalog-card:focus-visible .store-cover::after{
  opacity:1;
}
.xstore-browse .store-catalog-card:hover .store-game-meta,
.xstore-browse .store-catalog-card[data-focused] .store-game-meta,
.xstore-browse .store-catalog-card:focus-visible .store-game-meta{
  opacity:1;
  transform:translate3d(0,0,0);
}
.xstore-browse .store-catalog-card .store-game-title{
  width:100%;
  overflow:hidden;
  color:#fff;
  font-size:1.26rem;
  font-weight:620;
  line-height:1.18;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 .12rem .35rem rgba(0,0,0,.72);
}
.xstore-browse .store-catalog-card .store-game-price,
.xstore-browse .store-catalog-card .store-game-sub{
  color:rgba(255,255,255,.7);
  font-size:.98rem;
  line-height:1.2;
}
.xstore-browse .store-catalog-card .store-game-sub{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.xstore-browse .store-catalog-card .store-cloud-mark{
  z-index:3;
  top:.65rem;
  right:.65rem;
  opacity:0;
  transform:scale(.92);
  transition:opacity .14s ease,transform .16s var(--store-ease-out);
}
.xstore-browse .store-catalog-card:hover .store-cloud-mark,
.xstore-browse .store-catalog-card[data-focused] .store-cloud-mark{
  opacity:1;
  transform:scale(1);
}
.xstore-browse .store-catalog-card .store-owned-badge,
.xstore-browse .store-catalog-card .store-deal-badge{
  z-index:3;
}
.xstore-browse .store-catalog-card:hover,
.xstore-browse .store-catalog-card[data-focused]{
  transform:translate3d(0,-.12rem,0) scale(1.008);
}
.xstore-browse .store-catalog-card[data-focused] .store-cover,
.xstore-browse .store-catalog-card:focus-visible .store-cover{
  outline:.2rem solid rgba(255,255,255,.95);
  outline-offset:.18rem;
  box-shadow:0 .65rem 1.8rem rgba(0,0,0,.34);
}
.xstore-browse .store-catalog-card:hover .store-cover img,
.xstore-browse .store-catalog-card[data-focused] .store-cover img{
  transform:scale(1.025);
}
@media(max-width:900px){
  .xstore-browse .xstore-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .xstore-browse .xstore-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.8rem;
  }
}


/* ───────── Catalog correction: four large portrait covers ─────────
   Keep the original Store game-card aspect ratio and metadata layout. */
.xstore-browse .xstore-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem 1.15rem;
}
.xstore-browse .store-grid-card{
  width:100%;
  min-width:0;
  padding:0;
  background:transparent;
}
.xstore-browse .store-grid-card .store-cover{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:.72rem;
  background:#1a1b1c;
  box-shadow:0 .35rem 1.1rem rgba(0,0,0,.2);
}
.xstore-browse .store-grid-card .store-cover::after{
  display:none;
}
.xstore-browse .store-grid-card .store-game-meta{
  position:static;
  min-height:4.4rem;
  padding:.72rem .12rem .2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.16rem;
  background:transparent;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.xstore-browse .store-grid-card .store-game-title{
  width:100%;
  overflow:hidden;
  color:#fff;
  font-size:1.24rem;
  font-weight:570;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:none;
}
.xstore-browse .store-grid-card .store-game-price{
  color:rgba(255,255,255,.78);
  font-size:1rem;
}
.xstore-browse .store-grid-card .store-game-sub{
  width:100%;
  overflow:hidden;
  color:rgba(255,255,255,.43);
  font-size:.96rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.xstore-browse .store-grid-card .store-cloud-mark{
  z-index:3;
  top:.65rem;
  right:.65rem;
  opacity:1;
  transform:none;
}
.xstore-browse .store-grid-card:hover,
.xstore-browse .store-grid-card[data-focused]{
  transform:translate3d(0,-.14rem,0) scale(1.012);
}
.xstore-browse .store-grid-card:hover .store-cover img,
.xstore-browse .store-grid-card[data-focused] .store-cover img{
  transform:scale(1.025);
}
.xstore-browse .store-grid-card[data-focused] .store-cover,
.xstore-browse .store-grid-card:focus-visible .store-cover{
  outline:.22rem solid rgba(255,255,255,.94);
  outline-offset:.2rem;
  box-shadow:0 .65rem 1.8rem rgba(0,0,0,.34);
}
@media(max-width:900px){
  .xstore-browse .xstore-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .xstore-browse .xstore-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem .75rem;
  }
}


/* ───────── Catalog reference correction ─────────
   Match the supplied Xbox Store catalog proportions: five portrait cards across
   at the reference viewport, with the original cover ratio and text underneath. */
.xstore-browse{
  padding-top:2.65rem;
}
.xstore-browse .xstore-page-head{
  margin-bottom:1.65rem;
}
.xstore-browse .xstore-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.7rem .9rem;
}
.xstore-browse .store-grid-card .store-cover{
  aspect-ratio:3/4;
  border-radius:.62rem;
}
.xstore-browse .store-grid-card .store-game-meta{
  min-height:4.15rem;
  padding:.62rem .08rem .15rem;
  gap:.12rem;
}
.xstore-browse .store-grid-card .store-game-title{
  font-size:1.18rem;
}
.xstore-browse .store-grid-card .store-game-price{
  font-size:1rem;
}
.xstore-browse .store-grid-card .store-game-sub{
  font-size:.92rem;
}
@media(max-width:1080px){
  .xstore-browse .xstore-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:820px){
  .xstore-browse .xstore-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .xstore-browse .xstore-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem .7rem;
  }
}


/* ───────── Catalog metadata lives on artwork, reveal on hover/focus ───────── */
.xstore-browse .store-catalog-hover-card{
  width:100%;
  min-width:0;
  padding:0;
  background:transparent;
}
.xstore-browse .store-catalog-hover-card .store-cover{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:.62rem;
}
.xstore-browse .store-catalog-hover-card .store-cover::after{
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  inset:34% 0 0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.9) 100%);
  opacity:0;
  transition:opacity .14s ease;
  pointer-events:none;
}
.xstore-browse .store-catalog-hover-card .store-game-meta{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  min-height:0;
  padding:3.6rem .9rem .8rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.14rem;
  background:transparent;
  opacity:0;
  transform:translate3d(0,.35rem,0);
  transition:opacity .13s ease,transform .16s var(--store-ease-out);
  pointer-events:none;
}
.xstore-browse .store-catalog-hover-card:hover .store-cover::after,
.xstore-browse .store-catalog-hover-card[data-focused] .store-cover::after,
.xstore-browse .store-catalog-hover-card:focus-visible .store-cover::after,
.xstore-browse .store-catalog-hover-card:hover .store-game-meta,
.xstore-browse .store-catalog-hover-card[data-focused] .store-game-meta,
.xstore-browse .store-catalog-hover-card:focus-visible .store-game-meta{
  opacity:1;
}
.xstore-browse .store-catalog-hover-card:hover .store-game-meta,
.xstore-browse .store-catalog-hover-card[data-focused] .store-game-meta,
.xstore-browse .store-catalog-hover-card:focus-visible .store-game-meta{
  transform:translate3d(0,0,0);
}
.xstore-browse .store-catalog-hover-card .store-game-title{
  width:100%;
  overflow:hidden;
  color:#fff;
  font-size:1.2rem;
  font-weight:620;
  line-height:1.18;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 .1rem .32rem rgba(0,0,0,.8);
}
.xstore-browse .store-catalog-hover-card .store-game-price{
  color:rgba(255,255,255,.86);
  font-size:.98rem;
}
.xstore-browse .store-catalog-hover-card .store-game-sub{
  width:100%;
  overflow:hidden;
  color:rgba(255,255,255,.62);
  font-size:.9rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.xstore-browse .store-catalog-hover-card .store-cloud-mark{
  z-index:3;
  opacity:0;
  transform:scale(.92);
  transition:opacity .13s ease,transform .15s var(--store-ease-out);
}
.xstore-browse .store-catalog-hover-card:hover .store-cloud-mark,
.xstore-browse .store-catalog-hover-card[data-focused] .store-cloud-mark,
.xstore-browse .store-catalog-hover-card:focus-visible .store-cloud-mark{
  opacity:1;
  transform:scale(1);
}
.xstore-browse .store-catalog-hover-card .store-owned-badge,
.xstore-browse .store-catalog-hover-card .store-deal-badge{
  z-index:3;
  opacity:0;
  transition:opacity .13s ease;
}
.xstore-browse .store-catalog-hover-card:hover .store-owned-badge,
.xstore-browse .store-catalog-hover-card[data-focused] .store-owned-badge,
.xstore-browse .store-catalog-hover-card:focus-visible .store-owned-badge,
.xstore-browse .store-catalog-hover-card:hover .store-deal-badge,
.xstore-browse .store-catalog-hover-card[data-focused] .store-deal-badge,
.xstore-browse .store-catalog-hover-card:focus-visible .store-deal-badge{
  opacity:1;
}