/* Minimal My games & apps pass: one row, solid black, no labels or extra chrome. */

/* Keep the Xbox-green selector only on actual game-cover selection. Other
   controls show focus on the control itself instead of drawing a floating box. */
.focus-ring{
  border:.24rem solid #52d64b !important;
  box-shadow:0 0 0 .1rem rgba(0,0,0,.72) !important;
  transition:top .10s var(--ease-decel), left .10s var(--ease-decel),
             width .10s var(--ease-decel), height .10s var(--ease-decel),
             border-radius .10s var(--ease-decel), opacity .07s linear !important;
  opacity:0 !important;
}
.focus-ring.on{ opacity:0 !important; }
body:has(#view-home .ref-tile[data-ref-title][data-focused]) .focus-ring.on,
body:has(#view-home [data-home-library-mosaic="1"][data-focused]) .focus-ring.on,
body:has(#view-library .console-poster[data-focused]) .focus-ring.on{
  opacity:1 !important;
}
.focus-ring.pop{ animation:none !important; }

/* Keep the existing outer top-bar capsule exactly as-is. Only the five inner
   controls become separated circles, with breathing room between them. */
.sysbar .sysnav-btn{
  width:4.45rem !important;
  height:4.45rem !important;
  flex:0 0 4.45rem !important;
  margin:0 .28rem !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.sysbar .sysnav-btn:first-child,
.sysbar .sysnav-btn:last-child{
  border-radius:50% !important;
}
.sysbar .sysnav-btn + .sysnav-btn{
  box-shadow:none !important;
}
.sysbar .sysnav-btn:hover,
.sysbar .sysnav-btn.active{
  border-radius:50% !important;
  background:rgba(255,255,255,.075) !important;
}

/* System-bar controls keep their normal dark surface and get a thin green
   outline that follows the actual button shape. No floating selector here. */
.sysbar .sysnav-btn[data-focused]{
  background:rgba(34,38,42,.9) !important;
  color:#fff !important;
  border-radius:50% !important;
  box-shadow:inset 0 0 0 .24rem #52d64b !important;
  outline:0 !important;
}
.sysbar .friends[data-focused],
.sysbar .status-btn[data-focused],
.sysbar .clock.clock-action[data-focused]{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 .24rem #52d64b !important;
  outline:0 !important;
}
.sysbar .profile[data-focused]{
  background:#000 !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 .24rem #52d64b !important;
  outline:0 !important;
}

#view-library,
#view-library.console-page-view,
#view-library .console-shell,
#view-library .console-main{
  background:#070707 !important;
}

#view-library.console-page-view{
  color:#fff;
}

#view-library .console-shell{
  display:block !important;
}

#view-library .console-side,
#view-library .console-library-toolbar,
#view-library .console-grid-head,
#view-library .console-cloud-library,
#view-library .console-search-status,
#view-library .console-page-kicker,
#view-library .console-page-head p,
#view-library .console-head-actions,
#view-library .console-poster-name,
#view-library .console-poster-meta,
#view-library .console-cloud-pill,
#view-library .console-tag{
  display:none !important;
}

#view-library .console-main{
  height:100% !important;
  overflow:hidden !important;
  padding:5.2rem 5.8rem 4rem !important;
}

#view-library .console-page-head{
  min-height:auto !important;
  margin:0 0 3rem !important;
  padding:0 !important;
  border:0 !important;
}

#view-library .console-page-head h1{
  margin:0 !important;
  font-size:3rem !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.045rem !important;
  color:#fff !important;
}

/* One continuous row only. */
#view-library .console-poster-grid,
#view-library .console-horizontal-row{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-rows:max-content !important;
  grid-template-columns:none !important;
  grid-auto-columns:15.2rem !important;
  gap:1.35rem !important;
  align-items:start !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  padding:1rem .8rem 3.2rem !important;
  margin:0 -.8rem !important;
  scrollbar-width:none !important;
  scroll-snap-type:x proximity;
}

#view-library .console-poster-grid::-webkit-scrollbar,
#view-library .console-horizontal-row::-webkit-scrollbar{
  display:none !important;
}

#view-library .console-poster{
  width:15.2rem !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  color:#fff !important;
  scroll-snap-align:start;
  transform-origin:center center;
  transition:transform .14s ease, filter .14s ease !important;
}

#view-library .console-poster-art{
  display:block !important;
  width:15.2rem !important;
  height:19rem !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  border-radius:.78rem !important;
  background:#111 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 .9rem 2.2rem rgba(0,0,0,.5) !important;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

#view-library .console-poster-art img,
#view-library .console-poster-art .tile-art,
#view-library .console-poster-art .tile-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

@media (hover:hover){
  #view-library .console-poster:hover{
    transform:translateY(-.28rem) scale(1.022) !important;
    z-index:3;
  }
  #view-library .console-poster:hover .console-poster-art{
    filter:brightness(1.07) saturate(1.02) !important;
    box-shadow:0 1.25rem 2.8rem rgba(0,0,0,.64) !important;
  }
}

#view-library .console-poster[data-focused],
#view-library .console-poster.library-menu-open{
  transform:translateY(-.22rem) scale(1.018) !important;
  z-index:4;
}

/* One selector only: the shared green ring above. */
#view-library .console-poster[data-focused] .console-poster-art,
#view-library .console-poster.library-menu-open .console-poster-art{
  outline:0 !important;
  box-shadow:0 1.3rem 2.9rem rgba(0,0,0,.68) !important;
}

/* Small Xbox-style action flyout shown when a game is selected. */
.library-game-menu{
  position:fixed;
  z-index:180;
  padding:.55rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#202225;
  border:.1rem solid rgba(255,255,255,.11);
  border-radius:.48rem;
  box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.7);
  scrollbar-width:none;
}
.library-game-menu::-webkit-scrollbar{ display:none; }

.library-game-menu button{
  width:100%;
  min-height:4.6rem;
  display:flex;
  align-items:center;
  padding:0 1.15rem;
  margin:0;
  border:0;
  border-radius:.28rem;
  background:transparent;
  color:#f3f3f3;
  text-align:left;
  font:500 1.38rem/1.2 'Segoe UI',system-ui,sans-serif;
}

.library-game-menu button + button{
  margin-top:.18rem;
}

.library-game-menu button:hover{
  background:#34373a;
}

.library-game-menu button[data-focused],
.library-game-menu button:focus-visible{
  background:#34373a;
  color:#fff;
  outline:0;
  box-shadow:inset 0 0 0 .22rem #52d64b;
}

@media (max-aspect-ratio:16/10){
  #view-library .console-main{
    padding:4.5rem 4.3rem 3.6rem !important;
  }
  #view-library .console-poster-grid,
  #view-library .console-horizontal-row{
    grid-auto-columns:13.8rem !important;
    gap:1.15rem !important;
  }
  #view-library .console-poster,
  #view-library .console-poster-art{
    width:13.8rem !important;
  }
  #view-library .console-poster-art{
    height:17.25rem !important;
  }
  .library-game-menu{
    width:27rem;
  }
}


/* Stratus-only My games & apps. One portrait row, no catalogue spillover. */
#view-library.stratus-only-library .stratus-library-main{
  display:block !important;
  padding:5.2rem 5.8rem 4rem !important;
}
#view-library.stratus-only-library .stratus-library-row{
  grid-auto-columns:16rem !important;
  gap:1.6rem !important;
  padding:1.1rem .9rem 5rem !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
}
#view-library.stratus-only-library .stratus-poster{
  position:relative !important;
  width:16rem !important;
  min-width:16rem !important;
  overflow:visible !important;
}
#view-library.stratus-only-library .stratus-poster .console-poster-art{
  width:16rem !important;
  height:23.5rem !important;
  border-radius:1.05rem !important;
  overflow:hidden !important;
  box-shadow:0 1rem 2.7rem rgba(0,0,0,.58) !important;
}
#view-library.stratus-only-library .stratus-poster .console-poster-name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:5 !important;
  display:-webkit-box !important;
  padding:3.8rem 1rem 1.05rem !important;
  margin:0 !important;
  min-height:6.2rem;
  overflow:hidden;
  opacity:0;
  color:#fff !important;
  font-size:1.42rem !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-shadow:0 .14rem .5rem rgba(0,0,0,.95);
  background:linear-gradient(180deg,transparent 0%,rgba(5,6,7,.18) 18%,rgba(5,6,7,.9) 70%,rgba(5,6,7,.98) 100%);
  pointer-events:none;
  transition:opacity .14s ease;
  border-radius:0 0 1.05rem 1.05rem;
}
#view-library.stratus-only-library .stratus-poster:hover .console-poster-name,
#view-library.stratus-only-library .stratus-poster[data-focused] .console-poster-name,
#view-library.stratus-only-library .stratus-poster.library-menu-open .console-poster-name{
  opacity:1 !important;
}
#view-library.stratus-only-library .stratus-poster:hover,
#view-library.stratus-only-library .stratus-poster[data-focused],
#view-library.stratus-only-library .stratus-poster.library-menu-open{
  transform:translateY(-.38rem) scale(1.026) !important;
  z-index:6 !important;
}
#view-library.stratus-only-library .stratus-poster:hover .console-poster-art,
#view-library.stratus-only-library .stratus-poster[data-focused] .console-poster-art,
#view-library.stratus-only-library .stratus-poster.library-menu-open .console-poster-art{
  filter:brightness(1.08) saturate(1.04) !important;
  box-shadow:0 1.5rem 3.4rem rgba(0,0,0,.72) !important;
}

/* The action flyout belongs only to Stratus cards and keeps a softer Xbox radius. */
.library-game-menu{
  border-radius:1.15rem !important;
  padding:.72rem !important;
}
.library-game-menu button{
  border-radius:.72rem !important;
}

@media (max-aspect-ratio:16/10){
  #view-library.stratus-only-library .stratus-library-row{
    grid-auto-columns:14.8rem !important;
    gap:1.35rem !important;
  }
  #view-library.stratus-only-library .stratus-poster,
  #view-library.stratus-only-library .stratus-poster .console-poster-art{
    width:14.8rem !important;
    min-width:14.8rem !important;
  }
  #view-library.stratus-only-library .stratus-poster .console-poster-art{
    height:21.8rem !important;
  }
}


/* Ultrawide library scaling ---------------------------------------------- */
@media (min-width:2200px) and (min-aspect-ratio:2/1){
  #view-library .console-main{
    padding:5.8rem clamp(7rem,4.5vw,15rem) 4.5rem!important;
  }

  #view-library .console-poster-grid,
  #view-library .console-horizontal-row{
    grid-auto-columns:clamp(16.5rem,6.1vw,19rem)!important;
    gap:clamp(1.6rem,.85vw,2.5rem)!important;
    padding-top:1.25rem!important;
  }

  #view-library .console-poster,
  #view-library .console-poster-art{
    width:clamp(16.5rem,6.1vw,19rem)!important;
  }

  #view-library .console-poster-art{
    height:clamp(20.6rem,7.6vw,23.7rem)!important;
  }

  #view-library.stratus-only-library .stratus-library-row{
    grid-auto-columns:clamp(17.5rem,6.35vw,20rem)!important;
    gap:clamp(1.8rem,.9vw,2.7rem)!important;
  }

  #view-library.stratus-only-library .stratus-poster,
  #view-library.stratus-only-library .stratus-poster .console-poster-art{
    width:clamp(17.5rem,6.35vw,20rem)!important;
    min-width:clamp(17.5rem,6.35vw,20rem)!important;
  }

  #view-library.stratus-only-library .stratus-poster .console-poster-art{
    height:clamp(25.5rem,9vw,29rem)!important;
  }
}

@media (min-width:3000px) and (min-aspect-ratio:2.25/1){
  #view-library .console-main{
    padding-left:clamp(10rem,4.8vw,18rem)!important;
    padding-right:clamp(10rem,4.8vw,18rem)!important;
  }

  #view-library .console-poster-grid,
  #view-library .console-horizontal-row{
    grid-auto-columns:clamp(18rem,5.4vw,20.5rem)!important;
  }

  #view-library .console-poster,
  #view-library .console-poster-art{
    width:clamp(18rem,5.4vw,20.5rem)!important;
  }

  #view-library .console-poster-art{
    height:clamp(22.5rem,6.75vw,25.5rem)!important;
  }
}