/* ═══════════════════════════════════════════════════════════
   CHROME — system bar, guide, legend, toasts, modals
   ═══════════════════════════════════════════════════════════ */

/* ───────── system bar ─────────
   Nav centred on the top line, status opposite it, profile on its own
   line underneath. */
/* Positions read straight off the reference frames at 1920x1080:
   the nav band sits at y=120, the profile block at y=240. */
.sysbar{ position:relative; z-index:20; height:var(--bar-h); }

.sysbar-top{
  position:absolute; left:var(--safe-x); right:var(--safe-x); top:12rem;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}

/* the cluster sits a touch left of true centre, as on the console */
.sysnav{
  display:flex; align-items:center; gap:1.4rem;
  grid-column:2; transform:translateX(-4rem);
}
.sysnav-btn{
  position:relative; width:5.6rem; height:5.6rem; border-radius:50%;
  display:grid; place-items:center;
  color:rgba(255,255,255,.82);
  background:rgba(22,25,28,.72);
  backdrop-filter:blur(.8rem);
  transition:background var(--dur) var(--ease-standard),
             color var(--dur) var(--ease-standard),
             transform var(--dur-mid) var(--ease-decel);
}
.sysnav-btn svg{ width:2.8rem; height:2.8rem; fill:currentColor; }
.sysnav-btn:hover{ color:#fff; background:rgba(34,38,42,.85); }
.sysnav-btn[data-focused]{ color:#fff; background:rgba(48,53,58,.92); transform:scale(1.06); }
.sysnav-btn.active{ color:#fff; background:rgba(44,49,54,.9); }
.gp-chip{
  font-size:1.05rem; font-weight:800; line-height:1.02; letter-spacing:.02rem;
  text-align:center; color:currentColor;
  border:.2rem solid currentColor; border-radius:.35rem; padding:.3rem .35rem;
}
.badge-dot{
  position:absolute; top:.4rem; right:.4rem; width:1.2rem; height:1.2rem;
  border-radius:50%; background:var(--green-bright);
  box-shadow:0 0 0 .25rem rgba(6,8,10,.9);
}

/* ── right-hand status ── */
.sysstatus{
  grid-column:3; justify-self:end;
  display:flex; align-items:center; gap:2.2rem; color:#fff;
}
.friends{ display:flex; align-items:center; gap:.9rem; padding:.4rem .8rem; border-radius:.6rem; }
.friends[data-focused]{ background:rgba(255,255,255,.12); }
.friends-icon{ display:grid; place-items:center; }
.friends-icon svg{ width:2.3rem; height:2.3rem; fill:currentColor; }
.friends-count{ font-size:2rem; font-weight:500; font-variant-numeric:tabular-nums; }

.status-btn{ display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%; }
.status-btn[data-focused]{ background:rgba(255,255,255,.12); }
.status-btn svg{ width:2.6rem; height:2.6rem; fill:currentColor; }
body[data-mic="muted"] #micBtn{ color:rgba(255,255,255,.85); }

.battery{ display:flex; align-items:center; gap:.25rem; }
.battery-shell{
  width:2.8rem; height:1.7rem; border:.2rem solid var(--text);
  border-radius:.3rem; padding:.2rem; display:block;
}
.battery-fill{ display:block; height:100%; background:var(--text); border-radius:.1rem;
  transition:width .4s var(--ease-standard); }
.battery-cap{ width:.34rem; height:.85rem; background:var(--text); border-radius:0 .2rem .2rem 0; }
.clock{ font-size:2.9rem; font-weight:400; font-variant-numeric:tabular-nums;
  min-width:12rem; text-align:right; }

/* ── profile, on its own line ── */
.profile{
  position:absolute; left:calc(var(--safe-x) - .6rem); top:24rem;
  display:flex; align-items:center; gap:1.6rem;
  padding:.6rem 1.4rem .6rem .6rem; border-radius:4rem;
  transition:background var(--dur) var(--ease-standard);
}
.profile[data-focused]{ background:rgba(255,255,255,.1); }
.avatar{
  position:relative; width:4.6rem; height:4.6rem; border-radius:50%;
  overflow:hidden; flex:none;
  background:linear-gradient(140deg,#2b8a4a,#1c5f7a);
  box-shadow:0 0 0 .2rem rgba(255,255,255,.16), 0 .4rem 1.6rem rgba(0,0,0,.55);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-text{ display:flex; flex-direction:column; gap:.2rem; text-align:left; }
.gamertag{ font-size:1.8rem; font-weight:600; letter-spacing:.01rem; line-height:1.2; }
.profile-sub{ font-size:1.4rem; color:rgba(255,255,255,.62); font-weight:400; line-height:1.2; }
.tier{
  font-size:1.15rem; font-weight:700; letter-spacing:.08rem;
  padding:.18rem .55rem; border-radius:.25rem;
  background:linear-gradient(100deg,#0f7d0f,#1aa81a); color:#fff;
}
.g-icon{ width:1.8rem; height:1.8rem; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }

/* ───────── views host ───────── */
.views{ position:relative; overflow:hidden; }
.view{ position:absolute; inset:0; }
.view.entering{ animation:viewIn var(--dur-slow) var(--ease-decel); }
@keyframes viewIn{ from{opacity:0; transform:translateY(1.2rem);} to{opacity:1; transform:none;} }

/* ───────── button legend ───────── */
/* the legend overlays the bottom edge rather than taking a grid row,
   so the card row can sit at its measured offset */
.legend{
  position:absolute; left:0; right:0; bottom:.2rem;
  display:flex; justify-content:flex-end; align-items:center; gap:2.6rem;
  padding:0 var(--safe-x); height:2.6rem;
  font-size:1.5rem; color:var(--text-2); z-index:20; pointer-events:none;
}
/* home shows no button legend */
body[data-view="home"] .legend{ display:none; }
.legend-item{ display:flex; align-items:center; gap:.76rem; }
.pad{
  width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center;
  font-size:1.35rem; font-weight:800; color:#0b0d0f;
}
.pad.a{ background:#5dc21e; } .pad.b{ background:#e8403a; }
.pad.x{ background:#2a7de1; } .pad.y{ background:#e8b21e; }
.pad.menu,.pad.view{ background:rgba(255,255,255,.7); font-size:1.1rem; }

/* ───────── guide ─────────
   Tabs run horizontally across the top of the panel, the list fills the
   middle, and a strip of quick actions closes it off at the bottom.
   Contextual button hints sit outside the panel to its right. */
.guide{ position:fixed; inset:0; z-index:100; }
.guide-scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.34);
  animation:fade .25s var(--ease-decel);
}
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

.guide-panel{
  position:absolute; left:3.4rem; top:3.4rem; bottom:3.4rem; width:46rem;
  display:grid; grid-template-rows:auto 1fr auto;
  background:rgba(58,62,66,.92);
  backdrop-filter:blur(.6rem) saturate(1.05);
  border:.1rem solid rgba(255,255,255,.12);
  border-radius:.8rem;
  box-shadow:0 2.4rem 8rem rgba(0,0,0,.6);
  overflow:hidden;
  animation:guideIn var(--dur-mid) var(--ease-decel);
}
body[data-theme="light"] .guide-panel{ background:rgba(240,241,243,.94); }
@keyframes guideIn{ from{ transform:translateX(-3rem); opacity:0; } to{ transform:none; opacity:1; } }
.guide.out .guide-panel{ animation:guideOut var(--dur) var(--ease-accel) forwards; }
.guide.out .guide-scrim{ animation:fade var(--dur) var(--ease-accel) reverse forwards; }
@keyframes guideOut{ to{ transform:translateX(-3rem); opacity:0; } }

/* ── tab strip ── */
.guide-tabs{
  display:flex; align-items:center; gap:.4rem;
  padding:1.4rem 1.6rem 0;
}
.guide-tab{
  position:relative; flex:1; height:5rem; border-radius:.5rem;
  display:grid; place-items:center;
  color:rgba(255,255,255,.42);
  transition:color var(--dur) var(--ease-standard),
             background var(--dur) var(--ease-standard);
}
.guide-tab svg{ width:2.5rem; height:2.5rem; fill:currentColor; }
.guide-tab.active{ color:#fff; }
.guide-tab[data-focused]{ color:#fff; background:rgba(255,255,255,.1); }
.guide-tab.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:-.2rem;
  height:.3rem; border-radius:.2rem; background:var(--accent);
}
.guide-avatar{
  width:3.6rem; height:3.6rem; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 .2rem rgba(255,255,255,.18);
}
.guide-avatar img{ width:100%; height:100%; object-fit:cover; }
.tab-badge{
  position:absolute; top:.5rem; right:1rem;
  min-width:1.6rem; height:1.6rem; padding:0 .4rem; border-radius:1rem;
  background:var(--green); color:#fff;
  font-size:1.05rem; font-weight:700; line-height:1.6rem; text-align:center;
}

/* ── body ── */
.guide-body{ padding:1.4rem 1.4rem; overflow-y:auto; }
.guide-head{ display:flex; align-items:center; gap:1.5rem; margin:0 0 1.6rem; padding:0 .4rem; }
.guide-head-pic{
  width:6rem; height:6rem; border-radius:50%; overflow:hidden; flex:none;
  box-shadow:0 0 0 .22rem rgba(255,255,255,.14);
}
.guide-head-pic img{ width:100%; height:100%; object-fit:cover; }
.guide-title{ font-size:2.3rem; font-weight:600; margin:0; line-height:1.15; }
.guide-sub{ font-size:1.4rem; color:var(--text-3); margin:.2rem 0 0; }
.status-pill{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:.5rem;
  font-size:1.3rem; color:var(--text-2);
  background:rgba(255,255,255,.07); border-radius:2rem; padding:.3rem .9rem;
}
.status-dot{ width:.8rem; height:.8rem; border-radius:50%; background:var(--green-bright); }

.guide-section{
  font-size:1.25rem; font-weight:700; letter-spacing:.16rem;
  color:rgba(255,255,255,.36); text-transform:uppercase;
  margin:1.8rem 0 .6rem; padding-left:.6rem;
}
.guide-section:first-child{ margin-top:.4rem; }

.grow{
  display:flex; align-items:center; gap:1.6rem; width:100%;
  padding:1.9rem 1.6rem; border-radius:.4rem; text-align:left;
  border:.3rem solid transparent;
  transition:background var(--dur) var(--ease-standard),
             border-color var(--dur) var(--ease-standard);
}
.grow[data-focused]{
  background:rgba(255,255,255,.1);
  border-color:var(--green-bright);
}
/* a cover thumbnail, or a bare glyph - no rounded-square card around it */
.grow-icon{
  width:4.4rem; height:4.4rem; flex:none; overflow:hidden;
  display:grid; place-items:center; position:relative;
  border-radius:.3rem;
}
.grow-icon.glyph{ border-radius:0; }
.grow-icon svg{ width:3rem; height:3rem; fill:rgba(255,255,255,.92); }
.grow-text{ flex:1; min-width:0; }
.grow-name{ font-size:1.9rem; font-weight:400; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.grow-meta{ font-size:1.35rem; color:rgba(255,255,255,.6); margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grow-right{ font-size:1.4rem; color:rgba(255,255,255,.6); flex:none; }
.grow-chev{ flex:none; display:grid; place-items:center; }
.grow-chev svg{ width:1.6rem; height:1.6rem; fill:rgba(255,255,255,.45); }

/* the divider between the fixed entries and recent titles */
.guide-divider{
  height:.1rem; background:rgba(255,255,255,.16);
  margin:1.2rem 1.6rem;
}

.guide-tile-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.guide-tile{
  aspect-ratio:1; border-radius:.4rem; overflow:hidden; position:relative;
  background:var(--panel-2); transition:transform var(--dur) var(--ease-decel);
}
.guide-tile[data-focused]{ transform:scale(1.07); }

/* ───────── toasts / achievements ───────── */
.toasts{
  position:fixed; z-index:120; top:11.4rem; right:var(--safe-x);
  display:flex; flex-direction:column; gap:1rem; align-items:flex-end; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:1.4rem;
  min-width:34rem; padding:1.4rem 1.8rem;
  background:rgba(20,23,26,.96); border:.1rem solid var(--stroke-2);
  border-left:.4rem solid var(--accent);
  border-radius:.5rem; box-shadow:0 1.2rem 3.6rem rgba(0,0,0,.6);
  animation:toastIn .38s var(--ease-out);
}
.toast.out{ animation:toastOut .3s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(3rem);} to{opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateX(3rem);} }
.toast-icon{
  width:4.6rem; height:4.6rem; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--green),#0a5a0a);
}
.toast-icon svg{ width:2.6rem; height:2.6rem; fill:#fff; }
.toast-title{ font-size:1.8rem; font-weight:600; }
.toast-sub{ font-size:1.45rem; color:var(--text-2); margin-top:.1rem; }
.toast-score{ margin-left:auto; font-size:1.7rem; font-weight:700; color:var(--green-bright); }

/* ───────── tiny signed-in greeting after boot ───────── */
.boot-greeting{
  position:fixed;
  z-index:121;
  left:50%;
  bottom:max(12.6rem,calc(env(safe-area-inset-bottom) + 8.8rem));
  min-width:23.5rem;
  min-height:5.2rem;
  max-width:min(42rem,calc(100vw - 2.4rem));
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.05rem;
  padding:.76rem 1.55rem .8rem 1rem;
  border:.1rem solid rgba(255,255,255,.16);
  border-radius:999rem;
  background:#107c10;
  box-shadow:0 .8rem 2.35rem rgba(0,0,0,.44), inset 0 .1rem 0 rgba(255,255,255,.12);
  color:#fff;
  opacity:0;
  transform:translate(-50%,.8rem) scale(.985);
  pointer-events:none;
  transition:
    opacity .2s var(--ease-decel),
    transform .24s var(--ease-decel);
}
.boot-greeting.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.boot-greeting.out{
  opacity:0;
  transform:translate(-50%,.45rem) scale(.99);
  transition:
    opacity .22s var(--ease-accel),
    transform .22s var(--ease-accel);
}
.boot-greeting-mark{
  width:3.2rem;
  height:3.2rem;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:rgba(0,0,0,.14);
}
.boot-greeting-mark img{
  width:2.85rem;
  height:2.85rem;
  display:block;
  object-fit:cover;
  filter:saturate(1.32) contrast(1.06) brightness(1.03);
}
.boot-greeting-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font:600 1.62rem/1.08 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  letter-spacing:.005rem;
  text-shadow:0 .08rem .24rem rgba(0,0,0,.22);
}

html[data-motion="reduced"] .boot-greeting{
  transition:opacity .12s linear;
  transform:translate(-50%,0);
}

@media (hover:none), (pointer:coarse){
  .boot-greeting{
    bottom:max(10.6rem,calc(env(safe-area-inset-bottom) + 7rem));
  }
}

/* ───────── modal ───────── */
.modal{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  background:rgba(0,0,0,.7); backdrop-filter:blur(.6rem); animation:fade .2s var(--ease);
}
.modal-card{
  width:56rem; padding:3rem; border-radius:.6rem;
  background:var(--panel); border:.1rem solid var(--stroke-2);
  box-shadow:0 2rem 6rem rgba(0,0,0,.65);
  animation:cardIn .28s var(--ease-out);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(2rem) scale(.98);} to{opacity:1; transform:none;} }
.modal-title{ font-size:2.6rem; font-weight:600; margin:0 0 1rem; }
.modal-text{ font-size:1.7rem; color:var(--text-2); line-height:1.5; margin:0 0 2.6rem; }
.modal-actions{ display:flex; flex-direction:column; gap:.8rem; }
.modal-btn{
  padding:1.3rem 1.6rem; border-radius:.4rem; font-size:1.8rem; text-align:left;
  background:var(--panel-2); border:.1rem solid transparent;
  transition:background var(--dur), transform var(--dur);
}
.modal-btn[data-focused]{ background:var(--accent); color:#06210a; font-weight:600; }

/* ───────── guide: quick action strip ─────────
   (restored — an earlier edit removed these along with the rail) */
.guide-quick{
  display:flex; align-items:center; gap:.8rem;
  padding:1.2rem 1.4rem 1.4rem;
  border-top:.1rem solid rgba(255,255,255,.14);
}
.quick-btn{
  flex:1; height:4.8rem; border-radius:.5rem;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.88);
  transition:background var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard);
}
.quick-btn svg{ width:2.3rem; height:2.3rem; fill:currentColor; }
.quick-btn[data-focused]{ background:var(--accent); color:#06210a; }
.quick-btn .gp-chip{ font-size:.95rem; border-width:.15rem; padding:.25rem .3rem; }

/* ───────── guide: contextual actions beside the panel ───────── */
.guide-hints{
  position:absolute; left:52rem; top:5rem;
  display:flex; flex-direction:column; gap:1.4rem;
  font-size:1.7rem; color:rgba(255,255,255,.9);
  text-shadow:0 .2rem 1.2rem rgba(0,0,0,.8);
  animation:fade var(--dur-slow) var(--ease-decel);
}
.guide-hint{ display:flex; align-items:center; gap:1.2rem; }
.guide-hint .glyph{
  width:2.8rem; height:2.8rem; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.22);
}
.guide-hint .glyph svg{ width:1.7rem; height:1.7rem; fill:#fff; }

/* a thumbnail slot reads as one even before its cover lands */
.grow-icon{ background:rgba(0,0,0,.28); }
.grow-icon.glyph{ background:none; }


/* Secondary pages keep one compact route back to Dashboard/Home.
   Hidden on Home so the reference frame remains untouched. */
.global-home-return{
  position:fixed;
  left:1.25rem;
  top:2.15rem;
  z-index:85;
  width:3.9rem;
  height:3.9rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(28,31,34,.88);
  color:rgba(255,255,255,.76);
  box-shadow:0 .45rem 1.3rem rgba(0,0,0,.35);
  backdrop-filter:blur(.55rem);
  -webkit-backdrop-filter:blur(.55rem);
  transition:background var(--dur) var(--ease-standard),
             color var(--dur) var(--ease-standard),
             transform var(--dur) var(--ease-decel);
}
.global-home-return svg{
  width:2rem;
  height:2rem;
  fill:currentColor;
}
.global-home-return:hover,
.global-home-return[data-focused]{
  color:#fff;
  background:rgba(44,48,52,.96);
  transform:scale(1.05);
}
.global-home-return[data-focused]{
  box-shadow:inset 0 0 0 .22rem #52d64b,0 .45rem 1.3rem rgba(0,0,0,.35);
}
body[data-view="home"] .global-home-return{
  display:none !important;
}

/* Real Xbox Guide behavior: the status time becomes a touch more prominent
   while the Guide/sidebar is open, then returns to normal on close. */
.clock{
  transition:font-size .17s var(--ease-decel),
             min-width .17s var(--ease-decel) !important;
}
body.guide-open .clock{
  font-size:3.15rem !important;
  min-width:13.4rem !important;
}