/* Games We Play: a continuous camera journey through independent character planes.
   The scroll controller projects depth into x/y/scale; CSS must not apply z again. */
.xfg-home:has(#games-we-play.xfg-depth-tour){overflow-x:clip;overflow-y:visible}
.xfg-home:has(#games-we-play.xfg-depth-tour) main{overflow:visible}
.xfg-home:has(#games-we-play.xfg-depth-tour) .xfg-header[data-depth-tour-held]:not(:has(:focus-visible)):not(:has([aria-expanded=true])){transform:translate3d(0,-225px,0);pointer-events:none}

#games-we-play.xfg-depth-tour{
 --depth-progress:0;
 --depth-rails-opacity:1;
 --depth-rails-offset:0%;
 --depth-heading-height:60px;
 --depth-accent:255,208,0;
 --depth-glow:116,108,67;
 position:relative;
 height:calc(min(var(--depth-pin-height,100svh),100svh) + var(--depth-runway,9000px));
 margin:0;
 padding:0;
 color:#f5f4ef;
 background:#18191b;
 scroll-margin-top:0;
 overflow:visible;
}
#games-we-play.xfg-depth-tour *,#games-we-play.xfg-depth-tour *::before,#games-we-play.xfg-depth-tour *::after{box-sizing:border-box}
#games-we-play.xfg-depth-tour[data-depth-game="1"]{--depth-glow:103,124,155}
#games-we-play.xfg-depth-tour[data-depth-game="2"]{--depth-glow:167,100,148}
#games-we-play.xfg-depth-tour[data-depth-game="3"]{--depth-glow:75,125,174}
#games-we-play .xfg-depth-pin{
 position:sticky;
 top:0;
 z-index:2;
 display:flex;
 flex-direction:column;
 height:min(var(--depth-pin-height,100svh),100svh);
 min-height:0;
 overflow:hidden;
 isolation:isolate;
 background:#18191b;
}

/* Rails leave the scene during the camera journey without changing its geometry. */
#games-we-play .xfg-depth-heading,
#games-we-play .xfg-depth-nav,
#games-we-play .xfg-depth-mobile-name{
 opacity:var(--depth-rails-opacity,1);
 will-change:opacity,transform;
}
#games-we-play .xfg-depth-heading{transform:translate3d(0,calc(-1 * var(--depth-rails-offset,0%)),0)}
#games-we-play .xfg-depth-nav,
#games-we-play .xfg-depth-mobile-name{transform:translate3d(0,var(--depth-rails-offset,0%),0)}

/* The title returns in the same solid gray at the beginning and end. */
#games-we-play .xfg-depth-heading{
 position:relative;
 z-index:30;
 display:flex;
 flex:none;
 align-items:center;
 justify-content:center;
 height:var(--depth-heading-height);
 padding:0 20px;
 background:var(--xfg-layout-charcoal,#18191b);
 color:#f5f4ef;
 text-align:center;
}
#games-we-play .xfg-depth-heading h2{
 margin:0;
 padding-left:15px;
 color:inherit;
 font:700 36px/1 'XFG Condensed','Arial Narrow',sans-serif;
 letter-spacing:15px;
 white-space:nowrap;
}

/* Artwork supplies depth and color; the transparent characters carry the scene. */
#games-we-play .xfg-depth-stage{
 position:relative;
 flex:1 1 auto;
 min-height:0;
 width:100%;
 overflow:visible;
 isolation:isolate;
 background:transparent;
 touch-action:pan-y;
}
#games-we-play .xfg-depth-backdrop{
 position:absolute;
 inset:-80px -5%;
 z-index:0;
 opacity:var(--depth-backdrop-opacity,0);
 transform:scale(var(--depth-backdrop-scale,1.04));
 transform-origin:center;
 pointer-events:none;
 will-change:opacity,transform;
 contain:paint;
}
#games-we-play .xfg-depth-backdrop[data-depth-resident="false"]{visibility:hidden;will-change:auto}
#games-we-play .xfg-depth-backdrop picture{display:contents}
#games-we-play .xfg-depth-backdrop img{
 display:block;
 max-width:none;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 /* Blur and color are baked once into the texture, not rerasterized per frame. */
}
#games-we-play .xfg-depth-backdrop::after{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(90deg,#101115a3,transparent 35%,transparent 65%,#101115a3);
}
#games-we-play .xfg-depth-atmosphere{
 position:absolute;
 inset:-80px 0;
 z-index:1;
 pointer-events:none;
 background:
  radial-gradient(ellipse at 50% 43%,rgba(var(--depth-glow),.36),transparent 58%),
  radial-gradient(ellipse at 50% 100%,#ffffff0c,transparent 52%),
  linear-gradient(180deg,#12131655,transparent 27%,transparent 68%,#101114c9);
}
#games-we-play .xfg-depth-stage::after{
 content:'';
 position:absolute;
 inset:calc(-1 * var(--depth-heading-height)) 0 0;
 z-index:25;
 pointer-events:none;
 background:
  linear-gradient(180deg,#18191b 0%,#18191be0 4%,#18191b66 12%,#18191b00 24%,#18191b00 70%,#18191b48 84%,#18191bce 94%,#18191b 100%),
  linear-gradient(90deg,#18191b44,transparent 10%,transparent 90%,#18191b44);
}

/* Each plane contains exactly one transparent atlas cell and its floating label. */
#games-we-play .xfg-depth-character{
 position:absolute;
 top:50%;
 left:50%;
 z-index:var(--depth-order,2);
 width:auto;
 height:calc(var(--depth-scene-height,600px) * .90);
 aspect-ratio:1/2;
 margin:0;
 opacity:var(--depth-opacity,0);
 transform:translate(-50%,-50%) translate3d(var(--depth-x,0px),var(--depth-y,0px),0) scale(var(--depth-scale,1));
 transform-origin:50% 50%;
 pointer-events:none;
 backface-visibility:hidden;
 will-change:transform,opacity;
}
/* Keep a padded residency window: warm up before a fade starts and release
   only after it ends, rather than retaining all twelve GPU surfaces. */
#games-we-play .xfg-depth-character[data-depth-resident="false"]{visibility:hidden;will-change:auto}
#games-we-play .xfg-depth-sprite{
 contain:paint;
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-size:300% 100%;
 background-position:0% center;
 filter:blur(var(--depth-blur,0px)) drop-shadow(0 18px 16px #0005);
}
#games-we-play .xfg-depth-captions{position:absolute;inset:0;z-index:28;pointer-events:none}
#games-we-play .xfg-depth-caption{
 position:absolute;
 top:0;
 left:0;
 z-index:var(--caption-order,1);
 width:max-content;
 transform:translate3d(var(--caption-x,0px),var(--caption-y,0px),0) scale(var(--caption-scale,1));
 transform-origin:0 0;
 will-change:transform;
 pointer-events:none;
}
#games-we-play .xfg-depth-caption[data-depth-visible="false"]{visibility:hidden}
#games-we-play .xfg-depth-caption[data-depth-visible="false"] .xfg-depth-bubble::before{will-change:auto}
#games-we-play .xfg-depth-bubble{
 --bubble-edge:-5px;
 position:relative;
 z-index:2;
 display:flex;
 flex-direction:column;
 justify-content:center;
 width:300px;
 min-height:320px;
 max-width:none;
 margin:0;
 padding:26px 24px;
 border:0;
 border-radius:18px;
 color:#ffd000;
 background:transparent;
 font:700 38px/1.08 'XFG Condensed','Arial Narrow',sans-serif;
 letter-spacing:.65px;
 text-shadow:0 2px 5px #0006;
 text-wrap:balance;
}
/* The frosted face samples the scene directly. Fading an ancestor or placing
   backdrop-filter inside a perspective plane creates a backdrop root that can
   alternate between a blurred scene and a clear surface while compositing. */
#games-we-play .xfg-depth-bubble::before{
 content:'';
 position:absolute;
 inset:0;
 z-index:0;
 border:1px solid #e9f3ff38;
 border-right-color:#d6e6ff1a;
 border-bottom-color:#ffffff12;
 border-radius:inherit;
 background:linear-gradient(135deg,#ffffff19,transparent 48%,#ffffff08),#10151b24;
 box-shadow:0 14px 30px #0004,inset 0 1px 1px #ffffff45,inset 1px 0 1px #ffffff1f,inset 0 -1px 2px #0006;
 backdrop-filter:blur(18px) saturate(130%);
 -webkit-backdrop-filter:blur(18px) saturate(130%);
 opacity:var(--caption-opacity,0);
 will-change:opacity;
 pointer-events:none;
}
/* Match the ranked tees: one reflection moves with each character's depth. */
#games-we-play .xfg-depth-bubble::after{
 content:'';position:absolute;inset:1px;z-index:0;border-radius:inherit;
 background-image:linear-gradient(115deg,transparent 44%,#ffffff08 47%,#f4fbff66 49.4%,#ffffff18 50.6%,transparent 54%),linear-gradient(115deg,transparent 30%,#d9efff09 37%,#ffffff24 46%,#ffffff10 55%,transparent 69%),radial-gradient(ellipse at 12% 0%,#ffffff18,transparent 58%);
 background-size:240% 100%,240% 100%,100% 100%;
 background-position:var(--caption-shine,110%) 0,var(--caption-shine,110%) 0,0 0;
 background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ffffff0a;
 opacity:var(--caption-opacity,0);pointer-events:none;
}
#games-we-play .xfg-depth-bubble>span,
#games-we-play .xfg-depth-bubble>strong{
 position:relative;
 z-index:1;
 opacity:var(--caption-opacity,0);
}
/* A real perspective face over independently sampled, stable frosted glass. */
#games-we-play[data-depth-reduced="false"] .xfg-depth-caption{
 transform:translate3d(var(--caption-x,0px),var(--caption-y,0px),0);
}
#games-we-play[data-depth-reduced="false"] .xfg-depth-caption::before{
 content:'';position:absolute;left:0;top:0;
 width:var(--caption-width,0px);height:var(--caption-height,0px);
 clip-path:polygon(var(--caption-clip,0 0,100% 0,100% 100%,0 100%));
 background:#10151b28;
 backdrop-filter:blur(18px) saturate(130%);
 -webkit-backdrop-filter:blur(18px) saturate(130%);
 opacity:var(--caption-opacity,0);pointer-events:none;
}
#games-we-play[data-depth-reduced="false"] .xfg-depth-bubble{
 transform:var(--caption-matrix,matrix(1,0,0,1,0,0));transform-origin:0 0;
}
#games-we-play[data-depth-reduced="false"] .xfg-depth-bubble::before{
 backdrop-filter:none;-webkit-backdrop-filter:none;
 background:linear-gradient(135deg,#ffffff19,transparent 48%,#ffffff08);
 box-shadow:0 6px 0 -2px #0c111c66,0 14px 30px #0004,inset 0 1px 1px #ffffff70,inset 1px 0 1px #ffffff32,inset 0 -2px 2px #0008;
}
#games-we-play .xfg-depth-game-name{display:block;margin-bottom:12px;color:#e9eef8;font:700 20px/1.2 'XFG Condensed','Arial Narrow',sans-serif;letter-spacing:1.2px}
#games-we-play .xfg-depth-mode{display:block;font:inherit;line-height:1.05}
#games-we-play .xfg-depth-caption[data-game="0"][data-rank="0"] .xfg-depth-mode{font-size:34px}
#games-we-play .xfg-depth-description{display:block;margin-top:16px;color:#f0f2f6;font:400 18px/1.5 Arial,sans-serif;letter-spacing:0;text-wrap:pretty;text-shadow:0 1px 3px #0008}
#games-we-play .xfg-depth-hint{
 position:absolute;
 z-index:26;
 bottom:19px;
 left:50%;
 transform:translateX(-50%);
 margin:0;
 padding:8px 13px;
 color:#ffffffa6;
 font:500 11px/1.1 Arial,sans-serif;
 letter-spacing:1.6px;
 text-transform:uppercase;
 text-align:center;
 pointer-events:none;
 text-shadow:0 2px 8px #000;
 opacity:clamp(0,calc(1 - var(--depth-progress,0) * 40),1);
}

/* Keep the familiar name bar and the stationary lines with a slow light pass. */
#games-we-play .xfg-depth-nav{
 position:relative;
 z-index:30;
 display:grid;
 flex:0 0 66px;
 grid-template-columns:repeat(4,minmax(0,1fr));
 width:100%;
 margin:0;
 padding:0;
 border:0;
 background:#090909;
 user-select:none;
}
#games-we-play .xfg-depth-nav::before,#games-we-play .xfg-depth-mobile-name::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 z-index:3;
 width:calc(var(--depth-progress,0)*100%);
 height:12px;
 background:repeating-linear-gradient(90deg,#ffd000 0 2px,transparent 2px 5px);
 filter:drop-shadow(0 0 5px #ffd00038);
 pointer-events:none;
}
#games-we-play .xfg-depth-nav button{
 position:relative;
 isolation:isolate;
 appearance:none;
 min-width:0;
 min-height:66px;
 margin:0;
 padding:17px 8px 12px;
 border:0;
 border-right:1px solid #ffffff6b;
 border-radius:0;
 color:#f5f4ef;
 background:linear-gradient(180deg,#ffffff08,transparent),#080808;
 font:700 clamp(17px,1.55vw,21px)/1.1 'XFG Condensed','Arial Narrow',sans-serif;
 letter-spacing:1px;
 text-align:center;
 cursor:pointer;
 outline-offset:-4px;
 transition:color .2s,background-color .2s;
}
#games-we-play .xfg-depth-nav button::before,#games-we-play .xfg-depth-mobile-name{
 background-image:url('/media/games/showcase-4k-20261006/game-tab-highlight-20261006.webp');
 background-position:center bottom;
 background-size:auto 100%;
 background-repeat:no-repeat;
}
#games-we-play .xfg-depth-nav button::before{
 content:'';
 position:absolute;
 inset:0;
 z-index:-1;
 opacity:0;
 pointer-events:none;
 transition:opacity .22s;
}
#games-we-play .xfg-depth-nav button::after,#games-we-play .xfg-depth-mobile-name::after{
 content:'';
 position:absolute;
 inset:0;
 z-index:-1;
 opacity:0;
 pointer-events:none;
 background:linear-gradient(90deg,transparent 30%,#ffd000 50%,transparent 70%) calc(100% - var(--depth-progress,0)*100%) center/240% 100% no-repeat;
 mask:url('/media/games/showcase-4k-20261006/game-tab-highlight-20261006.webp') center bottom/auto 100% no-repeat;
 -webkit-mask:url('/media/games/showcase-4k-20261006/game-tab-highlight-20261006.webp') center bottom/auto 100% no-repeat;
 transition:opacity .22s;
}
#games-we-play .xfg-depth-nav button:last-child{border-right:0}
#games-we-play .xfg-depth-nav button:is([aria-selected="true"],[aria-current="true"],:hover,:focus-visible){background-color:#211b00;color:#ffd000}
#games-we-play .xfg-depth-nav button:is([aria-selected="true"],[aria-current="true"],:hover,:focus-visible)::before,
#games-we-play .xfg-depth-nav button:is([aria-selected="true"],[aria-current="true"],:hover,:focus-visible)::after{opacity:.95}
#games-we-play .xfg-depth-nav button:focus-visible{outline:2px solid #ffd000}
#games-we-play .xfg-depth-nav button>span{position:relative;z-index:1}
#games-we-play .xfg-depth-mobile-name{display:none}

@media(max-width:760px){
 #games-we-play.xfg-depth-tour{--depth-heading-height:52px}
 #games-we-play .xfg-depth-heading{padding:0 12px}
 #games-we-play .xfg-depth-heading h2{padding-left:6px;font-size:28px;letter-spacing:6px}
 #games-we-play .xfg-depth-character{height:calc(var(--depth-scene-height,728px) * .36)}
 /* Portrait texture already contains the centered title and edge-to-edge blur. */
 #games-we-play .xfg-depth-backdrop{inset:-80px -5%}
 #games-we-play .xfg-depth-bubble{
  width:clamp(136px,38vw,152px);
  min-height:220px;
  padding:16px 12px;
  font-size:22px;
  letter-spacing:.35px;
 }
 #games-we-play .xfg-depth-description{font-size:14px;line-height:1.45;margin-top:10px}
 #games-we-play .xfg-depth-caption[data-game="0"][data-rank="0"] .xfg-depth-mode{font-size:21px}
 #games-we-play .xfg-depth-game-name{font-size:14px;letter-spacing:.8px;margin-bottom:8px}
 #games-we-play .xfg-depth-hint{bottom:15px;font-size:10px;letter-spacing:1.2px;white-space:nowrap}
 #games-we-play .xfg-depth-nav{display:none}
 #games-we-play .xfg-depth-mobile-name{
  position:relative;
  z-index:30;
  isolation:isolate;
  display:flex;
  flex:0 0 64px;
  align-items:center;
  justify-content:center;
  width:100%;
  height:64px;
  margin:0;
  padding:11px 10px 0;
  color:#f5f4ef;
  background-color:#090909;
  font:700 21px/1.1 'XFG Condensed','Arial Narrow',sans-serif;
  letter-spacing:1px;
  text-align:center;
 }
 #games-we-play .xfg-depth-mobile-name::after{opacity:.95}
}
@media(max-width:360px){
 #games-we-play .xfg-depth-heading h2{font-size:25px;letter-spacing:4.5px;padding-left:4.5px}
}
@media(max-height:540px) and (orientation:landscape){
 #games-we-play.xfg-depth-tour{--depth-heading-height:42px}
 #games-we-play .xfg-depth-heading h2{font-size:25px;letter-spacing:6px;padding-left:6px}
 #games-we-play .xfg-depth-nav{flex-basis:54px}
 #games-we-play .xfg-depth-nav button{min-height:54px;padding-top:14px;font-size:16px}
 #games-we-play .xfg-depth-mobile-name{flex-basis:48px;height:48px;font-size:19px}
 #games-we-play .xfg-depth-bubble{min-height:250px;padding:18px 16px}
 #games-we-play .xfg-depth-hint{bottom:8px;font-size:9px}
}

/* Reduced motion retains the three characters without a camera flight. */
#games-we-play[data-depth-reduced="true"]{height:auto}
#games-we-play[data-depth-reduced="true"] .xfg-depth-pin{position:relative}
#games-we-play[data-depth-reduced="true"] .xfg-depth-character,
#games-we-play[data-depth-reduced="true"] .xfg-depth-backdrop{will-change:auto}
#games-we-play[data-depth-reduced="true"] .xfg-depth-hint{display:none}
#games-we-play[data-depth-reduced="true"] .xfg-depth-nav button::after,
#games-we-play[data-depth-reduced="true"] .xfg-depth-mobile-name::after{display:none}
@media(max-width:760px){
 #games-we-play[data-depth-reduced="true"] .xfg-depth-character{height:calc(var(--depth-scene-height,728px) * .60)}
 #games-we-play[data-depth-reduced="true"] .xfg-depth-nav{display:grid;flex-basis:56px}
 #games-we-play[data-depth-reduced="true"] .xfg-depth-nav button{min-height:56px;padding:13px 2px 7px;font-size:13px;letter-spacing:0}
 #games-we-play[data-depth-reduced="true"] .xfg-depth-mobile-name{display:none}
 #games-we-play[data-depth-reduced="true"] .xfg-depth-bubble{font-size:28px;width:clamp(184px,49vw,212px);min-height:290px;padding:20px 15px}
}
@media(prefers-reduced-motion:reduce){
 #games-we-play.xfg-depth-tour *,#games-we-play.xfg-depth-tour *::before,#games-we-play.xfg-depth-tour *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* A small fallback lets reduced-motion viewers choose games without a name banner. */
#games-we-play .xfg-depth-reduced-controls{display:none}
#games-we-play[data-depth-reduced="true"] .xfg-depth-reduced-controls{display:flex;position:absolute;bottom:12px;right:12px;gap:8px;z-index:30}
#games-we-play .xfg-depth-reduced-controls button{appearance:none;border:1px solid #ffffff50;border-radius:6px;background:#18191bd9;color:#fff;padding:9px 14px;font:600 13px/1.2 Arial,sans-serif;cursor:pointer}
#games-we-play .xfg-depth-reduced-controls button:focus-visible{outline:2px solid #ffd000;outline-offset:3px}

/* BEGIN GENERATED ASSET RULES */
#games-we-play .xfg-depth-character[data-game="0"][data-rank="0"]{aspect-ratio:514/1024;--depth-asset-image:url('/media/games/depth-20261015/cod-skins-v2.png');--depth-asset-size:298.832685% 100%;--depth-asset-position:0.000000% center}
#games-we-play .xfg-depth-character[data-game="0"][data-rank="1"]{aspect-ratio:510/1024;--depth-asset-image:url('/media/games/depth-20261015/cod-skins-v2.png');--depth-asset-size:301.176471% 100%;--depth-asset-position:50.097466% center}
#games-we-play .xfg-depth-character[data-game="0"][data-rank="2"]{aspect-ratio:512/1024;--depth-asset-image:url('/media/games/depth-20261015/cod-skins-v2.png');--depth-asset-size:300.000000% 100%;--depth-asset-position:100.000000% center}
#games-we-play .xfg-depth-character[data-game="1"][data-rank="0"]{aspect-ratio:549/1024;--depth-asset-image:url('/media/games/depth-20261015/apex-skins-v2.png');--depth-asset-size:279.781421% 100%;--depth-asset-position:0.000000% center}
#games-we-play .xfg-depth-character[data-game="1"][data-rank="1"]{aspect-ratio:475/1024;--depth-asset-image:url('/media/games/depth-20261015/apex-skins-v2.png');--depth-asset-size:323.368421% 100%;--depth-asset-position:51.743638% center}
#games-we-play .xfg-depth-character[data-game="1"][data-rank="2"]{aspect-ratio:512/1024;--depth-asset-image:url('/media/games/depth-20261015/apex-skins-v2.png');--depth-asset-size:300.000000% 100%;--depth-asset-position:100.000000% center}
#games-we-play .xfg-depth-character[data-game="2"][data-rank="0"]{aspect-ratio:512/1024;--depth-asset-image:url('/media/games/depth-20261015/gta-skins-v2.png');--depth-asset-size:300.000000% 100%;--depth-asset-position:0.000000% center}
#games-we-play .xfg-depth-character[data-game="2"][data-rank="1"]{aspect-ratio:531/1024;--depth-asset-image:url('/media/games/depth-20261015/gta-skins-v2.png');--depth-asset-size:289.265537% 100%;--depth-asset-position:50.945274% center}
#games-we-play .xfg-depth-character[data-game="2"][data-rank="2"]{aspect-ratio:493/1024;--depth-asset-image:url('/media/games/depth-20261015/gta-skins-v2.png');--depth-asset-size:311.561866% 100%;--depth-asset-position:100.000000% center}
#games-we-play .xfg-depth-character[data-game="3"][data-rank="0"]{aspect-ratio:512/1024;--depth-asset-image:url('/media/games/depth-20261015/fortnite-skins-v2.png');--depth-asset-size:300.000000% 100%;--depth-asset-position:0.000000% center}
#games-we-play .xfg-depth-character[data-game="3"][data-rank="1"]{aspect-ratio:474/1024;--depth-asset-image:url('/media/games/depth-20261015/fortnite-skins-v2.png');--depth-asset-size:324.050633% 100%;--depth-asset-position:48.210923% center}
#games-we-play .xfg-depth-character[data-game="3"][data-rank="2"]{aspect-ratio:550/1024;--depth-asset-image:url('/media/games/depth-20261015/fortnite-skins-v2.png');--depth-asset-size:279.272727% 100%;--depth-asset-position:100.000000% center}
#games-we-play .xfg-depth-character>.xfg-depth-sprite{background-image:var(--depth-asset-image);background-size:var(--depth-asset-size,300% 100%);background-position:var(--depth-asset-position,0% center)}
/* END GENERATED ASSET RULES */