/* ═══════════════════════════════════════════════════════════
   BASE — design tokens, TV scaling, boot sequence
   Console UIs are authored against a 1920×1080 canvas and
   scaled to the panel. 1rem = 10px at 1080p, so every size
   below can be read as "pixels at 1080p".
   ═══════════════════════════════════════════════════════════ */

:root{
  font-size: min(100vw / 192, 100vh / 108);

  --green:        #107c10;
  --green-bright: #4ade4a;
  --green-glow:   #6dfc6d;
  --accent:       var(--green-bright);

  --bg:        #06080a;
  --panel:     #0d0f12;
  --panel-2:   #131619;
  --panel-3:   #1b1f23;
  --stroke:    rgba(255,255,255,.09);
  --stroke-2:  rgba(255,255,255,.16);

  --text:      #ffffff;
  --text-2:    rgba(255,255,255,.72);
  --text-3:    rgba(255,255,255,.46);

  --tile-r:    .6rem;
  --card-r:    .5rem;

  /* Fluent motion: a decelerating curve for things entering, an
     accelerating one for things leaving, and the standard curve for
     anything that moves between two on-screen states. */
  --ease-decel:    cubic-bezier(.1,.9,.2,1);
  --ease-accel:    cubic-bezier(.7,0,1,.5);
  --ease-standard: cubic-bezier(.8,0,.2,1);
  --ease:      var(--ease-standard);
  --ease-out:  var(--ease-decel);

  /* Fluent duration ramp */
  --dur-fast:  .083s;
  --dur:       .167s;
  --dur-mid:   .25s;
  --dur-slow:  .333s;

  /* measured from the reference frame at 1920x1080:
     content margin 100px, system-bar content centred at y=107.5 */
  --safe-x:    10rem;
  --bar-h:     34rem;   /* nav at y=120, profile at y=240 */

  --font: "Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,
          "Inter","Helvetica Neue",Roboto,system-ui,sans-serif;
}

:root[data-motion="reduced"] *{
  animation-duration:.001s !important;
  transition-duration:.001s !important;
}

/* Light/dark mode only controls wallpaper exposure. UI colors stay Xbox-dark. */

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%; margin:0; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}

button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:0; height:0; }
svg .s{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ───────── focus model ─────────
   Console focus = scale + light + a bright ring. Never a browser outline. */
[data-nav]{ outline:none !important; position:relative; }

/* Selection is a thin white outline. The weight does the work: a hairline
   of dark just outside keeps it readable over pale cover art, and the halo
   is faint enough to read as light rather than as a second border. */
.focus-ring{
  position:fixed; z-index:60; pointer-events:none;
  /* content-box so the border lands outside the element it traces */
  box-sizing:content-box;
  border:.5rem solid #55e055;
  border-radius:var(--tile-r);
  box-shadow:
    0 0 0 .1rem rgba(0,0,0,.6),
    0 0 2rem rgba(85,224,85,.5);
  transition:top .16s var(--ease-decel), left .16s var(--ease-decel),
             width .16s var(--ease-decel), height .16s var(--ease-decel),
             border-radius .16s var(--ease-decel), opacity .12s linear;
  opacity:0;
}
.focus-ring.on{ opacity:1; }
.focus-ring.pop{ animation:ringPop .2s var(--ease-decel); }
@keyframes ringPop{
  50%{ box-shadow:0 0 0 .1rem rgba(0,0,0,.6), 0 0 2.6rem rgba(109,252,109,.66); }
}

/* ───────── stage ───────── */
.stage{
  position:fixed; inset:0;
  display:grid; grid-template-rows:var(--bar-h) 1fr;
  opacity:0; animation:stageIn .6s var(--ease-out) forwards;
}
@keyframes stageIn{ from{opacity:0; transform:scale(1.02);} to{opacity:1; transform:none;} }

/* ───────── dynamic backdrop ───────── */
.backdrop{ position:fixed; inset:0; z-index:-1; background:var(--bg); overflow:hidden; }
.backdrop-layer{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .85s var(--ease-out), transform 12s linear;
  transform:scale(1.08);
  filter:saturate(var(--sat, 1.35)) brightness(.98) contrast(1.04);
}
/* proper 16:9 key art is shown close to as-shot; only the square covers
   need blurring to survive being cropped to a widescreen frame */
.backdrop-layer.wide{
  inset:0; transform:none;
  filter:saturate(var(--sat, 1.35)) brightness(1) contrast(1.05);
}
.backdrop-layer.wide.on{ transform:scale(1.03); }
.backdrop-layer.on{ opacity:1; transform:scale(1.12); }
.backdrop-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,5,7,.58) 0%, rgba(4,5,7,.16) 18%,
                    transparent 38%, transparent 52%,
                    rgba(4,5,7,.42) 74%, rgba(3,4,5,.80) 100%);
}

/* Measured against the reference: the bar strip sits near 15 luminance and
   the very top near 6. Artwork alone cannot be relied on to get there, so
   the bar carries its own scrim. */
.topbar-scrim{
  position:absolute; left:0; right:0; top:0; height:34rem; z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(2,3,4,.72) 0%, rgba(2,3,4,.44) 40%, rgba(3,4,6,.16) 72%, transparent 100%);
}

.backdrop-glow{
  position:absolute; left:50%; top:26%; width:86rem; height:86rem;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(120,190,255,.07), transparent 62%);
  pointer-events:none;
}

body[data-bg="plain"] .backdrop-layer{ opacity:0 !important; }

/* ───────── boot ─────────
   The startup video plays over black and is allowed to fail: the poster
   frame stands in on its own, so a slow connection degrades to a still
   image rather than a stalling, half-buffered clip. */
.boot{
  position:fixed; inset:0; z-index:200; background:#000;
  display:grid; place-items:center;
}
.boot.out{ animation:bootOut .6s var(--ease) forwards; }
@keyframes bootOut{ to{ opacity:0; visibility:hidden; } }

.boot-video{
  width:100%; height:100%;
  object-fit:contain;
  background:#000;
  /* the poster is the last frame, so a skipped video lands where the
     clip would have ended instead of cutting from an unrelated image */
  background-size:contain; background-position:center; background-repeat:no-repeat;
}

/* when the clip is skipped the poster alone carries the screen, held
   just long enough to read as a boot rather than a flash of black */
.boot.still .boot-video{ animation:bootStill .9s var(--ease-out); }
@keyframes bootStill{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } }

/* ───────── shared bits ───────── */
.scanline{
  position:fixed; inset:0; z-index:150; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.7) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

.spinner{
  width:3rem; height:3rem; border-radius:50%;
  border:.3rem solid rgba(255,255,255,.14);
  border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.cover{
  position:relative; z-index:1;   /* above .cover-plate, below every overlay */
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--dur-slow) var(--ease-decel);
}
.cover.loaded{ opacity:1; }

/* Shown until the artwork lands, and left in place if it never does.
   The hue comes from the title, so a given game always gets the same
   plate and the grid reads as designed rather than broken. */
.cover-plate{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 30% 0%,
      hsl(var(--h) 42% 30%) 0%,
      hsl(var(--h) 38% 18%) 55%,
      hsl(var(--h) 34% 11%) 100%);
}
.cover-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(255,255,255,.07), transparent 46%);
}
.cover-initials{
  position:relative;
  font-size:3.6rem; font-weight:600; letter-spacing:.15rem;
  color:hsl(var(--h) 60% 86%); opacity:.55;
  text-shadow:0 .2rem 1.2rem rgba(0,0,0,.45);
}
.tile-sm .cover-initials,
.grid-item .cover-initials{ font-size:2.8rem; }
.detail-cover .cover-initials{ font-size:7rem; }


/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY & DISPLAY
   ═══════════════════════════════════════════════════════════ */

.filter-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* text scale multiplies the TV-derived root size, so every rem
   in the build follows it */
:root{ --text-scale:1; --sat:1.35; }
:root{ font-size: calc(min(100vw / 192, 100vh / 108) * var(--text-scale)); }

/* colour-vision filters wrap the whole stage */
body[data-cvd="protanopia"]   .stage,
body[data-cvd="protanopia"]   .guide,
body[data-cvd="protanopia"]   .detail{ filter:url(#cvd-protanopia); }
body[data-cvd="deuteranopia"] .stage,
body[data-cvd="deuteranopia"] .guide,
body[data-cvd="deuteranopia"] .detail{ filter:url(#cvd-deuteranopia); }
body[data-cvd="tritanopia"]   .stage,
body[data-cvd="tritanopia"]   .guide,
body[data-cvd="tritanopia"]   .detail{ filter:url(#cvd-tritanopia); }
body[data-cvd="mono"]         .stage,
body[data-cvd="mono"]         .guide,
body[data-cvd="mono"]         .detail{ filter:grayscale(1); }

/* high contrast: flatten the translucent surfaces and harden edges */
body[data-contrast="high"]{
  --panel:#000; --panel-2:#0a0a0a; --panel-3:#141414;
  --text:#fff; --text-2:#fff; --text-3:#e6e6e6;
  --stroke:rgba(255,255,255,.6); --stroke-2:rgba(255,255,255,.85);
}
body[data-contrast="high"] .backdrop-layer{ opacity:0 !important; }
body[data-contrast="high"] .tile,
body[data-contrast="high"] .card,
body[data-contrast="high"] .grid-item{ outline:.2rem solid rgba(255,255,255,.7); }
body[data-contrast="high"] .card-scrim{ background:rgba(0,0,0,.86); }
body[data-contrast="high"] .tile-label,
body[data-contrast="high"] .card-label{ background:#000; }

/* reduce transparency: blur and translucency are expensive and, for
   some people, unreadable */
body[data-transparency="reduced"] .guide-scrim{ backdrop-filter:none; background:rgba(0,0,0,.9); }
body[data-transparency="reduced"] .guide-panel{ background:#0d1013; }
body[data-transparency="reduced"] .modal{ backdrop-filter:none; background:rgba(0,0,0,.92); }
body[data-transparency="reduced"] .tile-badge{ backdrop-filter:none; background:#000; }
body[data-transparency="reduced"] .backdrop-layer{ filter:none; opacity:.18; }

/* night mode: a warm veil, strength driven from settings */
.night-veil{
  position:fixed; inset:0; z-index:190; pointer-events:none;
  background:rgb(255 148 40);
  mix-blend-mode:multiply;
  opacity:calc(var(--night, 0) / 100);
  transition:opacity var(--dur-slow) var(--ease-standard);
}

/* safe-area calibration for panels that overscan */
.stage{ padding:calc(var(--overscan, 0) * 1rem); }


/* ═══════════════════════════════════════════════════════════
   COARSE POINTER / TOUCH
   Keeps the TV composition unchanged for mouse/controller while making the
   same surfaces comfortable to tap and swipe on iPad/phones.
   ═══════════════════════════════════════════════════════════ */
@media (hover:none), (pointer:coarse){
  html,body{
    -webkit-text-size-adjust:100%;
  }

  button,
  [data-nav]{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
  }

  input,
  textarea{
    touch-action:manipulation;
    user-select:text;
    -webkit-user-select:text;
  }

  /* Native momentum scrolling for Xbox horizontal shelves. */
  .ref-strip,
  .console-horizontal-row,
  .console-poster-grid,
  .stratus-library-row,
  .xstore-console-tabs,
  .xstore-nav,
  .xstore-row,
  .store-row{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .ref-strip{
    overflow-x:auto !important;
    overflow-y:visible !important;
    scroll-snap-type:x proximity;
    touch-action:pan-x pinch-zoom;
  }
  .ref-strip::-webkit-scrollbar,
  .console-horizontal-row::-webkit-scrollbar,
  .console-poster-grid::-webkit-scrollbar,
  .stratus-library-row::-webkit-scrollbar,
  .xstore-console-tabs::-webkit-scrollbar{
    display:none;
  }
  .ref-strip > *,
  .console-horizontal-row > *,
  .stratus-library-row > *{
    scroll-snap-align:start;
  }

  /* Keep the visible Xbox top bar at its authored TV scale on touch devices.
     The earlier 44px minimum made the actual chrome visibly larger on iPad. */
  .global-home-return{
    min-width:44px !important;
    min-height:44px !important;
    left:max(10px,env(safe-area-inset-left)) !important;
    top:max(10px,env(safe-area-inset-top)) !important;
  }

  /* The Guide is a true touch drawer instead of a TV-scaled postage stamp. */
  .guide-panel{
    left:max(8px,env(safe-area-inset-left)) !important;
    top:max(8px,env(safe-area-inset-top)) !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    width:min(92vw,480px) !important;
  }
  .guide-tabs{
    gap:4px !important;
    padding:10px 10px 0 !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .guide-tabs::-webkit-scrollbar{ display:none; }
  .guide-tab{
    flex:0 0 52px !important;
    min-width:52px !important;
    min-height:48px !important;
  }
  .guide-tab svg{
    width:max(2.35rem,24px) !important;
    height:max(2.35rem,24px) !important;
  }
  .guide-body{
    padding:10px !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  .grow{
    min-height:54px !important;
    padding:8px 10px !important;
    gap:10px !important;
  }
  .grow-icon{
    width:42px !important;
    height:42px !important;
  }
  .grow-name{ font-size:max(1.7rem,16px) !important; }
  .grow-meta{ font-size:max(1.2rem,12px) !important; }
  .guide-quick{
    gap:6px !important;
    padding:8px 10px 10px !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .quick-btn{
    min-width:56px !important;
    min-height:48px !important;
  }
  .guide-hints{ display:none !important; }

  /* Secondary-page controls should never require pixel-perfect finger taps. */
  .console-side-item,
  .console-tool-btn,
  .console-top-tab,
  .console-chip,
  .console-key,
  .console-settings-row,
  .detail-actions .btn,
  .library-game-menu button,
  .xstore-console-tab,
  .xstore-nav-btn{
    min-height:48px !important;
  }

  .library-game-menu{
    max-width:calc(100vw - 20px) !important;
    touch-action:pan-y;
  }
}


/* Microsoft credit interstitial shown after the Xbox boot movie. */
.microsoft-credit{
  position:fixed;inset:0;z-index:199;
  display:grid;place-items:center;
  background:#000;
  overflow:hidden;
  opacity:0;
  transition:opacity .18s ease;
}
.microsoft-credit::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 14% 22%,rgba(255,255,255,.12) 0 .12rem,transparent .15rem),
    radial-gradient(circle at 72% 38%,rgba(255,255,255,.08) 0 .1rem,transparent .13rem),
    radial-gradient(circle at 39% 71%,rgba(255,255,255,.08) 0 .11rem,transparent .14rem),
    radial-gradient(circle at 88% 63%,rgba(255,255,255,.06) 0 .1rem,transparent .14rem);
  background-size:19rem 17rem,23rem 21rem,31rem 27rem,29rem 25rem;
  opacity:.42;filter:blur(.25rem);pointer-events:none;
}
.microsoft-credit.show{opacity:1}
.microsoft-credit.out{opacity:0}
.microsoft-credit-brand{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:1.55rem;
  transform:translateY(-.2rem);
  color:#fff;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
.microsoft-credit-grid{
  width:8.2rem;height:8.2rem;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:.32rem;filter:none;
}
.microsoft-credit-grid i{display:block}
.microsoft-credit-grid i:nth-child(1){background:#f25022}
.microsoft-credit-grid i:nth-child(2){background:#7fba00}
.microsoft-credit-grid i:nth-child(3){background:#00a4ef}
.microsoft-credit-grid i:nth-child(4){background:#ffb900}
.microsoft-credit-word{
  font-size:7.2rem;line-height:1;font-weight:600;letter-spacing:-.18rem;
  text-shadow:0 .12rem .32rem rgba(0,0,0,.28);
}
@media(max-width:720px){
  .microsoft-credit-brand{gap:1.2rem}
  .microsoft-credit-grid{width:5.5rem;height:5.5rem;gap:.24rem}
  .microsoft-credit-word{font-size:4.8rem}
}






/* Xbox OOBE reference pass.
   IMPORTANT: this project uses a 1920x1080 TV coordinate system where 1rem≈10px.
   The photographed Xbox panels occupy about 70% of the TV width, so they need
   ~136-140rem widths here, not 70rem web-card widths. */
.xbox-onboarding{
  position:fixed;inset:0;z-index:198;overflow:hidden;color:#fff;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(ellipse at 82% 22%,rgba(54,102,70,.22),transparent 34%),
    radial-gradient(ellipse at 15% 8%,rgba(100,47,46,.13),transparent 34%),
    linear-gradient(180deg,#272e33 0%,#3c484e 53%,#607277 100%);
  transition:opacity .18s ease;
}
.xbox-onboarding::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.09));
  pointer-events:none;
}
.xbox-onboarding.out{opacity:0}
.onboard-shell{position:absolute;inset:0}
.onboard-xbox{display:none}
.onboard-content{position:absolute;inset:0;opacity:0}
.onboard-content.ready{animation:onboardIn .16s ease-out forwards}
@keyframes onboardIn{to{opacity:1}}

.onboard-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:138rem;max-width:calc(100vw - 18rem);box-sizing:border-box;
  background:rgba(79,80,101,.58);
  border:.22rem solid rgba(255,255,255,.60);
  /* Corner radius measured off the Checking Network photo, whose top-left
     corner curves over 14px on a 755px panel - 2.6rem at this panel width.
     The inner controls are rounded far less in the reference: the input box
     and the rows curve over about 5px, so 1rem here. */
  border-radius:2.6rem;
  box-shadow:0 1.8rem 5.2rem rgba(0,0,0,.18);
  text-align:center;color:#fff;
}
.onboard-panel h1{
  margin:0;font-size:7.5rem;line-height:1.02;font-weight:400;letter-spacing:-.16rem;
  text-shadow:0 .18rem .32rem rgba(0,0,0,.18);
}
/* Title-to-subtitle spacing: the reference puts their ink centres 80.4px apart
   at this panel width, measured the same way on two screens (Checking Network
   .0583 of the panel width, Choose your Gamertag .0575). It was 72px. */
.onboard-panel p{
  margin:2.4rem 0 0;font-size:3.15rem;line-height:1.18;font-weight:600;color:#fff;
}

/* Checking Network.
   Measured off the reference photo, which shows both panel edges and both
   screen edges: panel 755 x 360 of a 1068-wide screen, so it is .707 of the
   width (138rem here, unchanged) and its aspect is 2.10, not the 2.42 this
   had. Height 138/2.10 = 65.5rem, and the paddings scale with it so the
   title, subtitle and spinner keep the centres the photo puts them at
   (.261, .383 and .703 of panel height).
   Spinner: 48px across in the photo against a 755px panel = .064, i.e. 8.8rem
   outer - it was already 8.9rem, so only the ring changed. The ring measures
   5px thick on a 56px circle there (.089), and the green arc is a quarter,
   not the half two coloured borders draw. */
.network-panel{height:65.5rem;padding-top:13.1rem}
.network-panel .onboard-spinner{
  width:8.8rem;height:8.8rem;box-sizing:border-box;
  margin:14.6rem auto 0;border-radius:50%;
  border:.78rem solid rgba(255,255,255,.56);
  border-bottom-color:#62df3f;
  animation:onboardSpin .86s linear infinite;
}
@keyframes onboardSpin{to{transform:rotate(360deg)}}

/* Choose your Gamertag */
/* Panel aspect measured at 756 x 352 = 2.148 in the photo; 138/2.148 = 64rem.
   The input box is .86 of the panel width there (650 of 756), so the side
   padding is 9.7rem, and its height is .103 of the panel width = 14.2rem. */
.gamertag-panel{height:64rem;padding:13.1rem 9.7rem 6rem}
.gamertag-panel h1{font-size:7.25rem}
.gamertag-panel p{font-size:2.95rem}
.gamertag-box{
  display:block;width:100%;height:14.2rem;margin:7.6rem auto 0;box-sizing:border-box;
  background:rgba(156,167,191,.58);
  border:.68rem solid #fff;border-radius:1rem;color:#fff;text-align:left;
  box-shadow:inset 0 0 0 .12rem rgba(255,255,255,.35);
}
.input-box{padding:0;overflow:hidden}
.input-box input{
  width:100%;height:100%;box-sizing:border-box;border:0;outline:0;background:transparent;color:#fff;
  padding:0 2.4rem;font:400 3.7rem "Segoe UI",sans-serif;caret-color:#fff;
}
.keyboard-hint{margin-top:3.9rem;font-size:2.35rem;font-weight:500;color:#fff}

/* Xbox software keyboard. In the reference the OOBE panel is pushed partly
   off the top while the keyboard owns the lower half of the display. */
.keyboard-state{
  top:-7rem;transform:translate(-50%,0);height:57rem;
}
.xbox-keyboard{
  /* The reference photo of this screen is the most distorted of the set, so
     only what survives that is copied: the keyboard's top edge sits at 48% of
     the frame height there against 35% here, and it is 4 key rows plus the
     space bar. Height 54rem puts the top edge at 49%. */
  position:absolute;left:2rem;right:0;bottom:1.1rem;height:54rem;
  background:rgba(89,102,121,.97);
  border-top:.18rem solid rgba(255,255,255,.18);
  border-radius:1.6rem;
  padding:2.2rem 2rem 1.4rem;box-sizing:border-box;
}
.keyboard-title{
  font-size:2.55rem;font-weight:600;margin-bottom:2rem;text-align:left;
}
.keyboard-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:.65rem;
}
.keyboard-grid button{
  height:8.2rem;border:0;border-radius:.6rem;background:#74849a;color:#fff;
  font:600 2.8rem "Segoe UI",sans-serif;
}
.keyboard-grid button:focus,.keyboard-grid button:hover{
  outline:.5rem solid #fff;outline-offset:0;background:#8897aa;
}
.keyboard-grid .key-selected{
  background:#fff;color:#59636f;box-shadow:0 0 3.4rem rgba(255,255,255,.55);
}
.keyboard-space{
  display:block;width:46%;height:7.1rem;margin:2rem auto 0;border:0;border-radius:.6rem;
  background:#7a899d;color:#fff;font:600 2.35rem "Segoe UI",sans-serif;
}
.keyboard-space i{
  display:inline-block;width:1.7rem;height:1.7rem;border-radius:50%;
  background:#e5d819;margin-left:1rem;vertical-align:-.1rem;
}
.keyboard-done{
  position:absolute;top:1.9rem;left:1.9rem;height:3.5rem;width:13rem;
  opacity:0;cursor:pointer;
}

/* Pick a color */
/* Height follows the content: the grid now ends 720px below the panel top and
   the photo leaves 42px under the last row of circles, which is 6.7rem at that
   photo's 1.599x scale. */
.color-panel{height:79rem;padding:8rem 6rem 6rem}
.color-panel h1{font-size:7.35rem}
.color-panel p{font-size:3rem}
/* Swatches measured against the title in the same photo (the one anchor that
   survives the panel being cropped there): title ink 250px, circles 122px
   across on a 20.5px column gap and a 30px row gap. The title renders 399.7px
   at 7.35rem, so the photo is at 1.599x: circles 19.5rem, column gap 3.3rem,
   row gap 4.8rem. They were 15.4rem on a 5rem column gap - too small, and
   spaced twice as far apart as the reference. */
.color-grid{
  display:grid;grid-template-columns:repeat(5,19.5rem);
  gap:4.8rem 3.3rem;justify-content:center;margin-top:8.3rem;
}
.color-grid button{
  width:19.5rem;height:19.5rem;border-radius:50%;
  border:.42rem solid rgba(255,255,255,.36);
  background:var(--sw);
  box-shadow:inset 0 0 1.5rem rgba(255,255,255,.24),0 .35rem .8rem rgba(0,0,0,.14);
}
.color-grid button.selected{outline:.8rem solid #fff;outline-offset:.85rem}
.color-next{position:absolute;opacity:0;pointer-events:none}

/* Privacy */
/* The button used to overflow the panel - measured, its bottom edge sat at
   1.044 of the panel height, i.e. outside the border. The reference has it
   inside with a gap below, 42px against a 701px row = 7rem here. Height is
   whatever puts the button's bottom edge one bottom-padding above it. */
.privacy-panel{height:104rem;padding:6.8rem 9rem 7rem}
.privacy-panel h1{font-size:7.15rem}
.privacy-panel p{font-size:2.9rem}
/* Rows, checkbox and button measured against the row width in the photo, the
   sharpest edge on that screen (701px): gap .0257, checkbox .0399 with a
   .0456 right inset, button .1156 tall on a .0428 gap above, label ink .274.
   Against this row width (1196px) that is 3.1rem, 4.8rem, 5.5rem, 13.8rem,
   5.1rem and a 3.5rem label. */
.privacy-list{display:grid;gap:3.1rem;margin-top:10.2rem}
.privacy-row{
  height:13.8rem;padding:0 5.5rem 0 4.2rem;border:0;border-radius:1rem;
  background:rgba(174,187,209,.48);color:#fff;
  display:flex;align-items:center;justify-content:space-between;text-align:left;
  font:600 3.5rem "Segoe UI",sans-serif;
}
.privacy-row:focus,.privacy-row:hover{outline:.65rem solid #fff;outline-offset:0}
/* The reference draws a white square with a green check inside it, not a
   square that fills in green. Unchecked is the same square, empty. */
.privacy-row i{
  position:relative;flex:none;
  width:4.8rem;height:4.8rem;border:.5rem solid #fff;border-radius:.45rem;
  box-sizing:border-box;background:transparent;
}
.privacy-row.checked i::after{
  content:"";position:absolute;left:31%;top:10%;
  width:34%;height:62%;
  border:.42rem solid #6cd23f;border-top:0;border-left:0;
  transform:rotate(38deg);
}
.complete-setup{
  width:100%;height:13.8rem;margin-top:5.1rem;border:0;border-radius:1rem;
  background:#62dd38;color:#fff;font:700 3.25rem "Segoe UI",sans-serif;
}
.complete-setup:focus,.complete-setup:hover{outline:.65rem solid #fff;outline-offset:0}

/* TV controller legend */
.onboard-legend{
  position:absolute;left:5.2rem;bottom:2.6rem;display:flex;gap:3.8rem;
  font-size:2.1rem;font-weight:600;
}
.onboard-legend span{display:flex;align-items:center;gap:.8rem}
.onboard-legend i{
  display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;
  font-style:normal;font-size:1.7rem;color:#fff;
}
.onboard-legend .a{background:#53c931}
.onboard-legend .b{background:#e54b59}

/* Narrow/touch screens preserve the same TV composition, only scale it to fit. */
@media(max-width:720px){
  /* Same composition as the TV reference above, scaled to fit: every value
     here moves by the same factor its 1080p counterpart did. */
  .onboard-panel{width:86vw;max-width:86vw}
  .onboard-panel h1{font-size:5rem}
  .onboard-panel p{font-size:2.1rem}
  .network-panel{height:55rem;padding-top:9.2rem}
  .network-panel .onboard-spinner{width:7rem;height:7rem;border-width:.62rem;margin-top:10.5rem}
  .gamertag-panel{height:55rem;padding:9rem 4.5rem 4rem}
  .gamertag-box{height:11rem;margin-top:5.6rem}
  .keyboard-state{top:-4rem}
  .xbox-keyboard{left:0;right:0;bottom:0;height:47vh}
  .keyboard-grid button{height:5.6rem;font-size:2.1rem}
  .color-panel{height:70rem;padding-top:6rem}
  .color-grid{grid-template-columns:repeat(5,10.4rem);gap:2.6rem 1.8rem;margin-top:5.6rem}
  .color-grid button{width:10.4rem;height:10.4rem}
  .privacy-panel{height:77rem;padding:5rem 4rem}
  .privacy-list{margin-top:6.5rem;gap:2.2rem}
  .privacy-row{height:10rem;font-size:2.45rem;padding:0 4rem 0 3rem}
  .privacy-row i{width:3.6rem;height:3.6rem}
  .complete-setup{height:10.2rem;margin-top:3.6rem;font-size:2.45rem}
}