/* ═══════════════════════════════════════════════════════════
   PAGES — library, Game Pass, search, settings, detail, play
   ═══════════════════════════════════════════════════════════ */

.page{ position:absolute; inset:0; display:flex; flex-direction:column; }
.page-head{ padding:.4rem var(--safe-x) 1.6rem; flex:none; }
.page-title{ font-size:3.4rem; font-weight:600; margin:0 0 .4rem; }
.page-sub{ font-size:1.6rem; color:var(--text-3); margin:0; }
.page-scroll{ flex:1; overflow-y:auto; padding:0 var(--safe-x) 2rem; scroll-behavior:smooth; }

/* ───────── pivot tabs ───────── */
.pivots{ display:flex; gap:2.6rem; padding:1rem var(--safe-x) 1.4rem; flex:none; }
.pivot{
  position:relative; font-size:1.9rem; font-weight:500; color:var(--text-3);
  padding:.4rem .2rem .8rem; transition:color var(--dur);
}
.pivot.active{ color:var(--text); }
.pivot[data-focused]{ color:var(--text); }
.pivot.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:.3rem;
  background:var(--accent); border-radius:.2rem;
}
.pivot[data-focused]::before{
  content:""; position:absolute; inset:-.4rem -.9rem; border-radius:.4rem;
  background:rgba(255,255,255,.1);
}

/* ───────── library grid ───────── */
.grid{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr));
  padding:1.2rem .4rem 2rem;
}
.grid-item{
  position:relative; aspect-ratio:1; border-radius:var(--tile-r); overflow:hidden;
  background:var(--panel-2); box-shadow:0 .6rem 1.8rem rgba(0,0,0,.4);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.grid-item[data-focused]{ transform:scale(1.07); box-shadow:0 1.2rem 3rem rgba(0,0,0,.6); z-index:2; }
.grid-item .tile-label{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:2.4rem .8rem .7rem;
  font-size:1.35rem; background:linear-gradient(transparent, rgba(0,0,0,.9));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0;
  transition:opacity var(--dur);
}
.grid-item[data-focused] .tile-label{ opacity:1; }

.section-label{
  font-size:1.5rem; font-weight:700; letter-spacing:.14rem; text-transform:uppercase;
  color:var(--text-3); margin:2.4rem 0 0; padding-left:.4rem;
}
.empty{
  display:grid; place-items:center; gap:1rem; padding:8rem 0; color:var(--text-3);
  font-size:1.9rem; text-align:center;
}
.empty svg{ width:6rem; height:6rem; fill:currentColor; opacity:.5; }

/* ───────── Game Pass ───────── */
.gp-hero{
  /* a <button> is a form control: it shrink-to-fits even at display:block,
     and every child here is absolutely positioned, so it needs an
     explicit width or it collapses to nothing */
  display:block; width:calc(100% - .8rem);
  position:relative; height:30rem; border-radius:.6rem; overflow:hidden;
  margin:.4rem .4rem 1rem; flex:none;
  transition:transform .2s var(--ease);
}
.gp-hero[data-focused]{ transform:scale(1.012); }
.gp-hero-art{ position:absolute; inset:0; }
.gp-hero-art img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.08); }
.gp-hero-scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(95deg, rgba(6,8,10,.94) 12%, rgba(6,8,10,.55) 46%, transparent 78%); }
.gp-hero-copy{ position:absolute; z-index:3; left:3.4rem; top:50%; transform:translateY(-50%); max-width:46rem; }
.gp-hero-kicker{ font-size:1.3rem; font-weight:800; letter-spacing:.2rem; color:var(--green-bright); text-transform:uppercase; }
.gp-hero-title{ font-size:4rem; font-weight:600; margin:.8rem 0 1rem; line-height:1.06; }
.gp-hero-meta{ font-size:1.6rem; color:var(--text-2); }
.gp-play{
  display:inline-flex; align-items:center; gap:.9rem; margin-top:1.8rem;
  background:var(--text); color:var(--bg); font-size:1.7rem; font-weight:600;
  padding:1rem 2rem; border-radius:.35rem;
}
.gp-hero[data-focused] .gp-play{ background:var(--accent); color:#06210a; }

/* ───────── search ───────── */
.search-wrap{ display:grid; grid-template-columns:54rem 1fr; gap:3.4rem;
  padding:0 var(--safe-x); height:100%; overflow:hidden; }
.search-left{ display:flex; flex-direction:column; gap:1.6rem; padding-top:.4rem; }
.search-field{
  display:flex; align-items:center; gap:1.2rem;
  background:rgba(255,255,255,.1); border:.2rem solid var(--stroke-2);
  border-radius:.4rem; padding:1.3rem 1.6rem; font-size:2.2rem;
}
.search-field svg{ width:2.4rem; height:2.4rem; fill:var(--text-2); }
.search-input{ flex:1; min-width:0; background:none; border:0; outline:none; color:var(--text); font:inherit; }
.search-input::placeholder{ color:var(--text-3); }
.caret{ width:.2rem; height:2.4rem; background:var(--accent); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.keyboard{ display:grid; grid-template-columns:repeat(10, 1fr); gap:.7rem; }
.key{
  aspect-ratio:1.18; display:grid; place-items:center; border-radius:.35rem;
  background:rgba(255,255,255,.08); font-size:1.8rem; font-weight:500;
  transition:background var(--dur), transform var(--dur);
}
.key[data-focused]{ background:var(--accent); color:#06210a; transform:scale(1.1); z-index:2; }
.key.wide{ grid-column:span 2; aspect-ratio:auto; font-size:1.4rem; }
.key.xwide{ grid-column:span 4; aspect-ratio:auto; font-size:1.4rem; }

.search-right{ overflow-y:auto; padding-bottom:2rem; }
.result-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:1.4rem; padding:.4rem; }

/* ───────── settings ───────── */
.settings-wrap{ display:grid; grid-template-columns:26rem 1fr; gap:4rem; padding:0 var(--safe-x);
  height:100%; overflow:hidden; }
.settings-nav{ display:flex; flex-direction:column; gap:.4rem; padding-top:.4rem; }
.snav{
  text-align:left; padding:1.2rem 1.4rem; border-radius:.4rem; font-size:1.8rem;
  color:var(--text-2); transition:background var(--dur), color var(--dur);
}
.snav.active{ color:var(--text); background:rgba(255,255,255,.07); }
.snav[data-focused]{ background:var(--accent); color:#06210a; font-weight:600; }
.settings-body{ overflow-y:auto; padding:.4rem .4rem 3rem; }

.srow{
  display:flex; align-items:center; gap:2rem; width:100%; text-align:left;
  padding:1.6rem 1.8rem; border-radius:.4rem;
  background:rgba(255,255,255,.04); border:.1rem solid var(--stroke);
  margin-bottom:.8rem; transition:background var(--dur);
}
.srow[data-focused]{ background:rgba(255,255,255,.14); border-color:var(--stroke-2); }
.srow-text{ flex:1; min-width:0; }
.srow-name{ font-size:1.9rem; font-weight:500; }
.srow-desc{ font-size:1.45rem; color:var(--text-3); margin-top:.2rem; }
.srow-value{ font-size:1.7rem; color:var(--text-2); font-weight:500; }
.swatches{ display:flex; gap:.8rem; }
.swatch{ width:2.6rem; height:2.6rem; border-radius:50%; border:.2rem solid transparent; }
.swatch.on{ border-color:#fff; }
.toggle{ width:5.2rem; height:2.8rem; border-radius:2rem; background:rgba(255,255,255,.2); position:relative; flex:none; }
.toggle::after{ content:""; position:absolute; top:.35rem; left:.35rem; width:2.1rem; height:2.1rem;
  border-radius:50%; background:#fff; transition:transform var(--dur) var(--ease); }
.toggle.on{ background:var(--accent); }
.toggle.on::after{ transform:translateX(2.4rem); background:#06210a; }

.ach-list{ display:flex; flex-direction:column; gap:.8rem; }
.ach{
  display:flex; align-items:center; gap:1.6rem; padding:1.4rem 1.6rem;
  background:rgba(255,255,255,.04); border:.1rem solid var(--stroke); border-radius:.4rem;
}
.ach.locked{ opacity:.48; }
.ach-badge{
  width:5rem; height:5rem; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#1a1d21,#0d0f11); border:.2rem solid var(--stroke-2);
}
.ach.unlocked .ach-badge{ background:linear-gradient(140deg,#0f7d0f,#0a4f0a); border-color:#4ade4a; }
.ach-badge svg{ width:2.6rem; height:2.6rem; fill:#fff; }
.ach-name{ font-size:1.8rem; font-weight:500; }
.ach-desc{ font-size:1.45rem; color:var(--text-3); }
.ach-score{ margin-left:auto; font-size:1.9rem; font-weight:700; color:var(--text-2); }

/* ───────── game detail ───────── */
.detail{ position:fixed; inset:0; z-index:90; overflow:hidden; background:var(--bg);
  animation:fade .25s var(--ease); }
.detail-bg{ position:absolute; inset:-6%; background-size:cover; background-position:center;
  filter:blur(2.4rem) saturate(1.1); transform:scale(1.1); }
.detail-scrim{ position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,8,10,.94) 18%, rgba(6,8,10,.82) 52%, rgba(6,8,10,.96)); }
body[data-theme="light"] .detail-scrim{
  background:linear-gradient(100deg, rgba(233,236,239,.95) 18%, rgba(233,236,239,.85) 52%, rgba(233,236,239,.97)); }
.detail-inner{
  position:relative; height:100%; display:grid; grid-template-columns:38rem 1fr;
  gap:5rem; padding:7rem var(--safe-x) 5rem; align-content:center;
  animation:detailIn .34s var(--ease-out);
}
@keyframes detailIn{ from{opacity:0; transform:translateY(2rem);} to{opacity:1; transform:none;} }
.detail-cover{
  width:38rem; height:38rem; border-radius:.8rem; overflow:hidden; align-self:center;
  box-shadow:0 2rem 6rem rgba(0,0,0,.7); background:var(--panel-2); position:relative;
}
.detail-main{ align-self:center; max-width:78rem; }
.detail-kicker{ font-size:1.35rem; font-weight:800; letter-spacing:.2rem; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:1rem; }
.detail-title{ font-size:5.4rem; font-weight:600; margin:0 0 1.2rem; line-height:1.05; }
.detail-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; font-size:1.6rem;
  color:var(--text-2); margin-bottom:2.2rem; }
.meta-chip{ padding:.35rem .8rem; border-radius:.3rem; background:rgba(255,255,255,.1);
  font-size:1.3rem; font-weight:600; letter-spacing:.05rem; text-transform:uppercase; }
.detail-desc{ font-size:1.8rem; line-height:1.55; color:var(--text-2); margin:0 0 3rem; max-width:64rem; }
.detail-actions{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:1.3rem 2.4rem; border-radius:.35rem; font-size:1.8rem; font-weight:500;
  background:rgba(255,255,255,.12); border:.1rem solid var(--stroke-2);
  transition:background var(--dur), transform var(--dur), color var(--dur);
}
.btn svg{ width:2.1rem; height:2.1rem; fill:currentColor; flex:none; }
.btn.primary{ background:var(--text); color:var(--bg); border-color:transparent; font-weight:600; }
.btn[data-focused]{ background:var(--accent); color:#06210a; transform:scale(1.04); border-color:transparent; }
.detail-stats{ display:flex; gap:3.4rem; margin-top:3rem; }
.stat-num{ font-size:2.6rem; font-weight:600; }
.stat-lbl{ font-size:1.4rem; color:var(--text-3); }

/* ───────── launch splash ───────── */
.launch{ position:fixed; inset:0; z-index:140; background:#000; display:grid; place-items:center;
  animation:fade .2s var(--ease); }
.launch-art{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.28; filter:blur(1.6rem) saturate(1.2); transform:scale(1.08);
  animation:launchZoom 6s var(--ease-out) forwards; }
@keyframes launchZoom{ to{ transform:scale(1.16); } }
.launch-center{ position:relative; display:grid; justify-items:center; gap:2rem; }
.launch-title{ font-size:4rem; font-weight:600; text-align:center; max-width:70rem; }
.launch-sub{ font-size:1.7rem; color:var(--text-3); letter-spacing:.1rem; }
.launch-source-status{
  display:inline-flex; align-items:center; gap:.9rem;
  min-height:4rem; padding:.85rem 1.35rem;
  border:.1rem solid rgba(255,255,255,.18); border-radius:.55rem;
  background:rgba(18,18,18,.82); color:#fff;
  font:600 1.45rem/1 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.02rem; opacity:.94;
}
.launch-source-status[hidden]{ display:none!important; }
.launch-source-status:disabled{ opacity:.94; color:#fff; }
.launch-source-dot{
  width:1.35rem; height:1.35rem; border-radius:50%;
  border:.18rem solid rgba(255,255,255,.25);
  border-top-color:var(--green-bright);
  animation:spin .8s linear infinite;
}
.launch-spinner{ position:relative; width:7rem; height:7rem; }
.launch-spinner span{
  position:absolute; inset:0; border-radius:50%;
  border:.3rem solid transparent; border-top-color:var(--green-bright);
  animation:spin 1.4s linear infinite;
}
.launch-spinner span:nth-child(2){ inset:.9rem; animation-duration:1.1s; animation-direction:reverse; border-top-color:rgba(109,252,109,.6); }
.launch-spinner span:nth-child(3){ inset:1.8rem; animation-duration:.9s; border-top-color:rgba(109,252,109,.4); }
.launch-spinner span:nth-child(4){ inset:2.7rem; animation-duration:.7s; animation-direction:reverse; border-top-color:rgba(109,252,109,.25); }

/* ───────── player ───────── */
.player{ position:fixed; inset:0; z-index:95; background:#000; }
.player iframe{ width:100%; height:100%; border:0; display:block; }
.player-hint{
  position:absolute; top:2rem; right:2rem; padding:.9rem 1.4rem; border-radius:.35rem;
  background:rgba(0,0,0,.72); border:.1rem solid var(--stroke-2);
  font-size:1.5rem; color:var(--text-2); transition:opacity .6s var(--ease);
}
.player-hint.hide{ opacity:0; }
.player-hint kbd{
  font:inherit; font-size:1.3rem; padding:.15rem .5rem; border-radius:.25rem;
  background:rgba(255,255,255,.16); border:.1rem solid var(--stroke-2);
}

/* ───────── narrow screens: keep it usable on a phone ───────── */
@media (max-width: 760px){
  :root{ font-size: min(100vw / 66, 100vh / 118); --safe-x:2.4rem; --bar-h:9rem; }
  .sysbar{ grid-template-columns:1fr auto; row-gap:1rem; }
  .profile-text{ display:none; }
  .sysstatus .battery{ display:none; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .detail-inner{ grid-template-columns:1fr; gap:2.4rem; padding:6rem 2.4rem 3rem; align-content:start;
    overflow-y:auto; }
  .detail-cover{ width:20rem; height:20rem; }
  .detail-title{ font-size:3.6rem; }
  .search-wrap,.settings-wrap{ grid-template-columns:1fr; }
  .keyboard{ display:none; }
  .guide-panel{ width:100%; }
}


/* ───────── touch gamepad for cloud games ─────────
   Only mounted on coarse-pointer devices, and only while a Stratus session is
   on screen. Every control is pointer-driven so one finger per button works.

   Sized in px, deliberately against the house rem convention: the TV canvas
   makes 1rem = 10px only at 1080p, and on a phone it resolves to ~3.6px, which
   turned every button into an 18px target. A finger does not scale.

   Positioned with dvh and the safe-area insets because on an iPad the bottom
   row was landing under the home indicator and off the visual viewport, so
   the d-pad and face buttons could not be reached at all. --tpad-lift is the
   single knob for how far the bottom cluster sits above the edge. */
.touchpad{
  position:fixed;
  left:0; right:0; top:0;
  height:100dvh;
  z-index:8;
  display:none;
  pointer-events:none;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
  --tpad-lift:calc(env(safe-area-inset-bottom, 0px) + 46px);
  --tpad-side:calc(env(safe-area-inset-right, 0px) + 20px);
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
}
@supports not (height:100dvh){ .touchpad{ height:100%; } }
.touchpad.on{ display:block; }
.touchpad > *{ pointer-events:none; }

/* Collapsed: everything goes except the control that brings it back. */
.touchpad.hidden .tpad-top,
.touchpad.hidden .tpad-bottom{ display:none; }

.tpad-top{
  position:absolute; left:0; right:0;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:0 var(--tpad-side) 0 calc(env(safe-area-inset-left, 0px) + 20px);
  gap:10px;
}
/* The player's own quit control sits in the top-right corner. */
.tpad-top > .tpad-cluster:last-child{ margin-right:52px; }
.tpad-cluster{ display:flex; gap:8px; pointer-events:none; }
.tpad-mid{ margin-top:2px; }

.tpad-bottom{ position:absolute; inset:0; }
.tpad-left{
  position:absolute;
  left:calc(env(safe-area-inset-left, 0px) + 20px);
  bottom:var(--tpad-lift);
}

.tpad-btn{
  pointer-events:auto;
  display:grid; place-items:center;
  min-width:0; padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(12,12,14,.52);
  color:rgba(255,255,255,.88);
  font:600 13px/1 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  letter-spacing:.3px;
  backdrop-filter:blur(8px) saturate(.9);
  -webkit-backdrop-filter:blur(8px) saturate(.9);
  transition:background .07s linear, transform .07s linear, border-color .07s linear;
  touch-action:none;
}
.touchpad .tpad-btn.down{
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.5);
  color:#0c0c0e;
  transform:scale(.93);
}

.tpad-sm{ width:56px; height:38px; }
.tpad-wide{ width:74px; height:34px; font-size:12px; }
.tpad-start{ background:rgba(88,20,20,.58); }

.tpad-stick{
  pointer-events:auto;
  position:relative;
  width:128px; height:128px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15);
  background:rgba(10,10,12,.28);
  touch-action:none;
}
.tpad-knob{
  position:absolute; left:50%; top:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.32);
  background:rgba(222,222,226,.18);
  transition:transform .06s linear;
}

.tpad-dpad{
  position:absolute; right:212px; bottom:var(--tpad-lift);
  width:132px; height:132px;
}
.tpad-d{ position:absolute; width:44px; height:44px; font-size:12px; }
.tpad-du{ left:44px; top:0; }
.tpad-dd{ left:44px; bottom:0; }
.tpad-dl{ left:0; top:44px; }
.tpad-dr{ right:0; top:44px; }

.tpad-face{
  position:absolute; right:var(--tpad-side); bottom:var(--tpad-lift);
  width:132px; height:132px;
}
.tpad-f{ position:absolute; width:46px; height:46px; border-radius:50%; font-size:16px; }
.tpad-y{ left:43px; top:0; }
.tpad-a{ left:43px; bottom:0; }
.tpad-x{ left:0; top:43px; }
.tpad-b{ right:0; top:43px; }
/* A is select, so it reads as the primary action. */
.tpad-a{ border-color:rgba(122,222,122,.42); }

.tpad-hints{
  position:absolute; right:calc(var(--tpad-side) + 142px);
  bottom:var(--tpad-lift);
  display:flex; flex-direction:column; gap:8px;
}
.tpad-hint{ width:44px; height:34px; font-size:12px; }

/* Show/hide. Small, always reachable, never under the quit control. */
.tpad-toggle{
  pointer-events:auto;
  position:absolute;
  right:calc(env(safe-area-inset-right, 0px) + 14px);
  top:calc(env(safe-area-inset-top, 0px) + 58px);
  width:44px; height:44px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(12,12,14,.56);
  color:rgba(255,255,255,.8);
  font:600 15px/1 system-ui, sans-serif;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  touch-action:none;
}
.touchpad.hidden .tpad-toggle{ background:rgba(12,12,14,.3); color:rgba(255,255,255,.5); }

/* Narrow phones: pull the clusters in so nothing overlaps. */
@media (max-width:560px){
  .touchpad{ --tpad-lift:calc(env(safe-area-inset-bottom, 0px) + 30px); }
  .tpad-stick{ width:104px; height:104px; }
  .tpad-knob{ width:44px; height:44px; margin:-22px 0 0 -22px; }
  .tpad-dpad{ right:168px; width:116px; height:116px; }
  .tpad-d{ width:38px; height:38px; }
  .tpad-du,.tpad-dd{ left:39px; }
  .tpad-dl,.tpad-dr{ top:39px; }
  .tpad-face{ width:116px; height:116px; }
  .tpad-f{ width:40px; height:40px; }
  .tpad-y,.tpad-a{ left:38px; }
  .tpad-x,.tpad-b{ top:38px; }
  .tpad-hints{ right:calc(var(--tpad-side) + 126px); }
  .tpad-sm{ width:48px; height:34px; }
  .tpad-wide{ width:62px; height:30px; font-size:11px; }
}

/* Short landscape phones have no room for a 46px lift. */
@media (max-height:440px){
  .touchpad{ --tpad-lift:calc(env(safe-area-inset-bottom, 0px) + 18px); }
}