/* Xbox reference-only fidelity overrides.
   This file intentionally mirrors the supplied Xbox Home frame instead of
   redesigning it: artwork first, restrained chrome, one focus ring. */

:root{
  --safe-x: 8.8rem;
  --bar-h: 34rem;
  --tile-r: .12rem;
  --card-r: .12rem;
  --green-bright: #53d64b;
  --accent: #53d64b;
}

/* ───────── reference wallpaper ─────────
   The console UI is authored as a 16:9 picture. On taller browser windows we
   keep that composition instead of zooming the wallpaper and moving the car. */
.backdrop{ background:#090d0b !important; }
.backdrop-glow{ display:none !important; }
.backdrop-scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.025),rgba(0,0,0,.015) 65%,rgba(0,0,0,.08) 100%) !important;
}
.topbar-scrim{
  height:29rem !important;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.035) 72%,transparent) !important;
}
.backdrop-layer,
.backdrop-layer.wide,
.backdrop-layer.reference-wide{
  inset:0 !important;
  transform:none !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  filter:saturate(1.08) contrast(1.025) brightness(.99) !important;
}
.backdrop-layer.reference-wide.on{ transform:none !important; }

/* only the selected Xbox item receives chrome */
.focus-ring{
  border:.42rem solid #53d64b !important;
  border-radius:.1rem !important;
  box-shadow:0 0 0 .07rem rgba(0,0,0,.62) !important;
}
.focus-ring.pop{ animation:none !important; }

/* ───────── top chrome ─────────
   Unlike the old implementation, the status cluster is not on the same row
   as the centre navigation. This is the relationship visible in the photo. */
.sysbar{ height:var(--bar-h); }
.sysbar-top{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
}
.sysnav{
  position:absolute !important;
  left:50% !important;
  top:16.7rem !important;
  transform:translateX(-50%) !important;
  display:flex;
  gap:1.05rem;
}
.sysnav-btn{
  width:5.05rem;
  height:5.05rem;
  color:rgba(255,255,255,.42) !important;
  background:rgba(28,30,32,.62);
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.sysnav-btn:hover,
.sysnav-btn.active,
.sysnav-btn[data-focused]{
  color:#fff !important;
  background:rgba(38,40,42,.76);
  transform:none !important;
}
.sysnav-btn svg{ width:2.42rem; height:2.42rem; }
.gp-chip{
  font-size:.94rem !important;
  border-width:.18rem !important;
  border-radius:.25rem !important;
  padding:.25rem .3rem !important;
}
.badge-dot{
  width:.82rem;
  height:.82rem;
  top:.12rem;
  right:.15rem;
  box-shadow:0 0 0 .16rem rgba(22,24,26,.96);
}

.sysstatus{
  position:absolute !important;
  right:5.6rem !important;
  top:2.8rem !important;
  display:flex !important;
  align-items:center;
  gap:1.65rem;
}
.friends{ padding:.25rem .45rem; }
.friends-count{ font-size:1.85rem; font-weight:500; }
.friends-icon svg{ width:2rem; height:2rem; }
.status-btn{ width:2.8rem; height:2.8rem; }
.status-btn svg{ width:2.05rem; height:2.05rem; }
.battery-shell{ width:2.7rem; height:1.55rem; }
.clock{
  font-size:2.7rem;
  font-weight:500;
  min-width:11.8rem;
  letter-spacing:.005rem;
}

.profile{
  top:24.9rem !important;
  left:calc(var(--safe-x) - .45rem) !important;
  gap:1.15rem;
  padding:.4rem .9rem .4rem .4rem;
}
body[data-view="home"] .profile[data-focused]{ background:transparent !important; }
.avatar{
  width:4.45rem;
  height:4.45rem;
  box-shadow:0 0 0 .09rem rgba(255,255,255,.15),0 .18rem .8rem rgba(0,0,0,.24);
}
.gamertag{ font-size:1.58rem; font-weight:500; line-height:1.16; }
.profile-sub{ font-size:1.18rem; color:rgba(255,255,255,.68); line-height:1.18; }

/* ───────── Home rail ───────── */
.reference-home .hero{ display:none !important; }
.ref-rail{ top:30rem; }
.ref-strip{
  /* User-requested breathing room: 17.5px at the 1920×1080 reference canvas. */
  gap:1.75rem;
  padding-left:var(--safe-x);
  padding-right:var(--safe-x);
  overflow:visible;
}
.reference-home .ref-tile,
.reference-home .ref-tile .tile-face,
.reference-home .ref-card{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.ref-tile{
  width:17rem;
  background:transparent !important;
}
.ref-tile .tile-face{
  width:17rem;
  height:17rem;
  border-radius:.08rem;
  background:#151718;
}
.ref-tile.tile-sm{ margin-top:4rem; }
.ref-tile.ref-hero{ width:21rem; }
.ref-tile.ref-hero .tile-face{ width:21rem; height:21rem; }
.ref-tile[data-focused]{ transform:none !important; }

.ref-art,
.ref-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ref-art{ overflow:hidden; border-radius:inherit; }
.ref-art img{ object-fit:cover; opacity:1 !important; filter:none !important; }

.edge-tile .tile-face{ background:#08a83e !important; }
.edge-tile .ref-art{ display:grid; place-items:center; }
.edge-tile .ref-art img{
  position:static;
  width:50%;
  height:50%;
  object-fit:contain;
}

.ref-platform{
  position:absolute;
  left:.48rem;
  bottom:.46rem;
  z-index:4;
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  line-height:1;
  padding:.22rem .27rem;
  background:rgba(0,0,0,.65);
  text-shadow:none;
}

.ref-tile .tile-label{
  background:rgba(8,9,10,.965);
  font-size:1.42rem;
  border:0 !important;
}
.ref-tile[data-focused] .tile-label{
  height:3.45rem;
  padding:.88rem .78rem 0;
}

.ref-friends{
  width:20.5rem;
  margin-top:.55rem;
}
.ref-friends .tile-face{
  width:20.5rem;
  height:20.5rem;
  border-radius:.08rem;
  background:linear-gradient(145deg,#35d15d 0%,#25c17f 43%,#22a9d9 100%) !important;
  display:grid;
  place-items:center;
}
.ref-friends-icon{ display:grid; place-items:center; }
.ref-friends-icon svg{ width:5.7rem; height:5.7rem; fill:none !important; stroke:#fff; stroke-width:1.7; }

/* ───────── lower promo row ───────── */
.ref-cards{
  top:55rem;
  grid-template-columns:33.5rem .9fr 1.08fr 1.08fr;
  gap:1.7rem;
}
.ref-card{
  height:19.4rem;
  border-radius:.08rem;
  overflow:hidden;
  background:#151718;
}
.ref-card[data-focused]{ transform:none !important; }
.ref-card-art,
.ref-card-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ref-card-art{ overflow:hidden; }
.ref-card-art img{
  object-fit:cover;
  object-position:center center;
  opacity:1 !important;
  filter:none !important;
}
.ref-card::after{
  content:"";
  position:absolute;
  inset:54% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.63));
  pointer-events:none;
}
.ref-card .card-label{
  left:1.45rem;
  right:1.25rem;
  bottom:1.08rem;
  font-size:2.05rem;
  font-weight:400;
  line-height:1.12;
  text-shadow:0 .13rem .42rem rgba(0,0,0,.9);
}
.ref-card .card-label .sub{
  margin-top:.18rem;
  font-size:1.62rem;
  font-weight:400;
  color:#fff;
}
.ref-card .card-chip{
  top:.95rem;
  left:.95rem;
  padding:.26rem .55rem;
  border-radius:.08rem;
  background:rgba(0,0,0,.79);
  font-size:.98rem;
}
.ref-card.card-store{
  background:#4b3a82 !important;
}
.ref-card.card-store::after{ display:none; }
.ref-card.card-store::before{ display:none; }
.ref-card.card-store .ref-store-art img{
  object-fit:fill;
  object-position:center;
}
.ref-store-icon{
  position:absolute;
  left:50%;
  top:5rem;
  transform:translateX(-50%);
  z-index:2;
  display:grid;
  place-items:center;
}
.ref-store-icon svg{
  width:4.4rem;
  height:4.4rem;
  fill:#fff;
}
.ref-store-wordmark{
  position:absolute;
  left:0;
  right:0;
  top:10.25rem;
  z-index:2;
  color:rgba(255,255,255,.95);
  font-size:1.22rem;
  font-weight:500;
  text-align:center;
}
.ref-card.card-store .card-label{
  left:1.45rem;
  right:1.25rem;
  bottom:1.18rem;
  font-size:1.62rem;
  font-weight:400;
}

body[data-view="home"] .legend{ display:none !important; }

/* ───────── Guide ───────── */
.guide-scrim{ background:rgba(0,0,0,.24) !important; backdrop-filter:none !important; }
.guide-panel{
  left:5.4rem;
  top:4.8rem;
  bottom:4.8rem;
  width:45.5rem;
  background:rgba(72,75,79,.95) !important;
  backdrop-filter:none !important;
  border:0 !important;
  border-radius:.18rem !important;
  box-shadow:0 1.1rem 3.6rem rgba(0,0,0,.34) !important;
}
.guide-tabs{ gap:.1rem; padding:1.2rem 1.45rem 0; }
.guide-tab{ height:4.8rem; border-radius:0; color:rgba(255,255,255,.72); }
.guide-tab svg{ width:2.35rem; height:2.35rem; }
.guide-tab[data-focused]{ background:rgba(255,255,255,.08); }
.guide-tab.active::after{
  left:.85rem; right:.85rem; bottom:0; height:.32rem;
  border-radius:0; background:#53d64b;
}
.guide-tab.reference-hidden-tab{ display:none !important; }
.xbox-guide-mark{ width:2.75rem !important; height:2.75rem !important; }
.guide-body{ padding:1rem 1.25rem 1.1rem; }
.grow{
  min-height:6.15rem;
  gap:1.2rem;
  padding:1rem 1.15rem;
  border:.3rem solid transparent;
  border-radius:.1rem;
}
.grow[data-focused]{ background:rgba(255,255,255,.14); border-color:#53d64b; }
.grow-icon{ width:4.05rem; height:4.05rem; border-radius:.08rem; }
.grow-icon svg{ width:2.45rem; height:2.45rem; }
.grow-name{ font-size:1.7rem; font-weight:400; }
.grow-meta{ font-size:1.2rem; }
.guide-divider{ margin:.7rem 1.1rem; background:rgba(255,255,255,.22); }
.guide-quick{ padding:1rem 1.35rem 1.35rem; gap:.8rem; }
.quick-btn{ height:5.4rem; border-radius:.1rem !important; background:rgba(24,26,28,.38) !important; }
.quick-btn[data-focused]{ background:rgba(255,255,255,.12) !important; }
.guide-hints{ left:53.5rem !important; top:15.8rem !important; }
.guide-hint{ font-size:1.55rem !important; gap:.9rem !important; margin-bottom:.55rem !important; }
.guide-hint .glyph svg{ width:1.85rem !important; height:1.85rem !important; }

.cover-plate{ background:#202326 !important; }
.cover-plate::after{ display:none !important; }
.cover-initials{ color:rgba(255,255,255,.52) !important; text-shadow:none !important; }

/* keep the same measured 1920x1080 geometry on taller tablet windows */
@media (max-aspect-ratio:16/10){
  .ref-strip{ gap:1.65rem; }
  .ref-cards{ gap:1.55rem; }
}




/* Xbox Guide: People -------------------------------------------------------- */
.people-empty{
  display:flex;
  align-items:center;
  gap:1.35rem;
  margin:.35rem .6rem 1rem;
  padding:1.35rem 1.2rem;
  background:rgba(20,22,24,.42);
}
.people-empty-icon{
  width:4.2rem;
  height:4.2rem;
  flex:0 0 4.2rem;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.78);
}
.people-empty-icon svg{
  width:3rem;
  height:3rem;
  fill:currentColor;
}
.people-empty-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.people-empty-copy strong{
  color:#fff;
  font-size:1.55rem;
  font-weight:500;
}
.people-empty-copy span{
  max-width:31rem;
  color:rgba(255,255,255,.56);
  font-size:1.16rem;
  line-height:1.35;
}

/* Bottom-edge Windows-style build stamp shown after boot. */
.version-snapshot-toast{
  position:fixed;right:2.2rem;bottom:2.2rem;z-index:240;
  width:min(48rem,calc(100vw - 3rem));min-height:6.4rem;
  display:flex;align-items:center;gap:1.15rem;padding:1rem 1.25rem;
  box-sizing:border-box;background:rgba(4,8,4,.97);color:#fff;
  border:.16rem solid rgba(16,124,16,.95);border-radius:1.35rem;
  box-shadow:0 .8rem 2.4rem rgba(0,0,0,.5),inset 0 0 0 .05rem rgba(82,214,75,.16);
  opacity:0;transform:translateY(1.1rem);
  transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.version-snapshot-toast.show{opacity:1;transform:translateY(0)}
.version-snapshot-toast.out{opacity:0;transform:translateY(.7rem)}
.version-snapshot-mark{
  width:3.8rem;height:3.8rem;flex:0 0 3.8rem;display:grid;place-items:center;
  background:transparent;border:0;
}
.version-snapshot-mark img{width:3.15rem;height:3.15rem;display:block;filter:none}
.version-snapshot-copy{display:flex;flex-direction:column;gap:.25rem}
.version-snapshot-copy strong{font-size:1.35rem;font-weight:550;letter-spacing:.01em}
.version-snapshot-copy span{font-size:1.08rem;color:rgba(255,255,255,.68);font-weight:400}
@media(max-width:720px){.version-snapshot-toast{right:1rem;bottom:1rem;width:calc(100vw - 2rem)}}