/* GamePass.es — Xbox Fluent v2 icon system.
   Source of truth: XboxFluent2.ttf supplied by owner. Webfont is a production
   subset containing only verified glyphs currently used by GamePass.es. */
@import url('/assets/css/xbox-fluent-font-a.css?v=20260917a');
@import url('/assets/css/xbox-fluent-font-b.css?v=20260918b');
@import url('/assets/css/xbox-fluent-font-c.css?v=20260917a');
@import url('/assets/css/xbox-fluent-font-d.css?v=20260918a');

.xbf,
.xbf::before{
  font-family:'Xbox Fluent v2'!important;
  font-style:normal!important;
  font-weight:400!important;
  font-variant:normal!important;
  text-transform:none!important;
  line-height:1!important;
  speak:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.xbf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:1em;
  height:1em;
  vertical-align:-.08em;
}
.xbf-glow{filter:drop-shadow(0 0 7px currentColor)}

/* NEXO DESKTOP — navegación principal.
   ::before queda reservado para la barra cyan activa del shell v3.
   Xbox Fluent vive en ::after y order:-1 lo mantiene antes del texto. */
.nxm-nav a>svg{display:none!important}
.nxm-nav a::after{
  content:'';
  width:30px;
  flex:0 0 30px;
  order:-1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Xbox Fluent v2'!important;
  font-size:25px;
  font-weight:400;
  line-height:1;
  color:#d8e9f2;
  opacity:.96;
  transition:color .18s ease,filter .18s ease,transform .18s ease;
}
/* Stable mapping: do NOT bind icons to DOM position.
   "Buscar" is inserted after El Nexo and must never shift the remaining icons. */
.nxm-nav a[href="/"]::after{content:'\EC7C';font-size:26px}
.nxm-nav a[href="/noticias"]::after{content:'\EA7A';font-size:23px}
.nxm-nav a[href="/juegos"]::after{content:'\E9CD';font-size:25px}
.nxm-nav a[href="/proximos-lanzamientos"]::after{content:'\E9A1';font-size:27px}
.nxm-nav a[href^="/buscar?q=Disc-to-Digital"]::after{content:'\EC7A';font-size:26px}
.nxm-nav a[href="/ofertas"]::after{content:'\E95A';font-size:24px}
.nxm-nav a.nxm-nav-search::after{display:none!important;content:''!important}
.nxm-nav a.nxm-nav-search>svg{
  display:block!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 30px;
  color:#d8e9f2;
  fill:currentColor!important;
  stroke:none!important;
}
.nxm-nav a.is-active::after,
.nxm-nav a:hover::after{
  color:#00dcff;
  filter:drop-shadow(0 0 7px rgba(0,220,255,.78)) drop-shadow(0 0 16px rgba(0,220,255,.22));
}
.nxm-nav a:hover::after{transform:translateY(-1px)}
.nxm-cta>svg{display:none!important}
.nxm-cta::before{
  content:'\EC7C';
  font:400 20px/1 'Xbox Fluent v2';
  margin-right:7px;
}

/* Nexo composer. */
#nx-c-shut [title="Imagen"]>svg{display:none!important}
#nx-c-shut [title="Imagen"]::before{
  content:'\E7EE';
  font:400 18px/1 'Xbox Fluent v2';
  color:currentColor;
}

/* ───────── NEXO DESKTOP — LIVE TIMELINE RAIL ───────── */
@media (min-width:1024px){
  #nx-feed{position:relative;isolation:isolate}

  /* Single sweep created by nexo2.js. It adds a slow continuous energy pass
     behind the local thread segments, so the rail reads as one living system. */
  #nx-feed .nx-rail-sweep{
    position:absolute;
    left:26px;
    width:2px;
    height:var(--nx-rail-sweep-h,420px);
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    border-radius:999px;
    background:linear-gradient(180deg,rgba(0,212,255,.08),rgba(70,132,168,.18) 28%,rgba(255,201,77,.12) 56%,rgba(255,107,114,.08));
    box-shadow:0 0 9px rgba(0,212,255,.08);
    opacity:.82;
  }
  #nx-feed .nx-rail-sweep::after{
    content:"";
    position:absolute;
    left:50%;
    top:-110px;
    width:8px;
    height:105px;
    transform:translateX(-50%);
    border-radius:999px;
    background:linear-gradient(180deg,transparent,rgba(96,235,255,.08) 18%,rgba(96,235,255,.92) 50%,rgba(255,255,255,.75) 57%,rgba(96,235,255,.10) 74%,transparent);
    filter:blur(1.6px) drop-shadow(0 0 9px rgba(0,220,255,.58));
    animation:nxTlSweep 6.2s linear infinite;
  }

  /* Every local line segment has its own staggered travelling packet. */
  #nx-feed .nx-tl-thread{
    position:relative!important;
    min-height:24px;
    overflow:visible;
    box-shadow:0 0 12px -3px rgba(var(--nx-thread-rgb),.18);
  }
  #nx-feed .nx-tl-thread::before{
    content:"";
    position:absolute;
    inset:0 -2px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(var(--nx-thread-rgb),.14),transparent 58%);
    filter:blur(1.8px);
    opacity:.7;
  }
  #nx-feed .nx-tl-thread::after{
    content:"";
    position:absolute;
    left:50%;
    top:-72px;
    width:7px;
    height:72px;
    transform:translateX(-50%);
    border-radius:999px;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(var(--nx-thread-rgb),.08) 20%,rgba(var(--nx-thread-rgb),.94) 56%,rgba(255,255,255,.68) 63%,transparent 100%);
    filter:blur(1px) drop-shadow(0 0 8px rgba(var(--nx-thread-rgb),.48));
    animation:nxTlThreadFlow 4.6s linear infinite;
    animation-delay:var(--nx-thread-delay,0s);
  }
  #nx-feed .nx-tl-thread--dotted::after{height:58px;animation-duration:4.1s}

  /* Premium icon node: icon dominates; frame is only a compact dark lens. */
  #nx-feed .nx-tl-node{
    --nx-node-size:38px;
    position:relative;
    z-index:4;
    width:var(--nx-node-size);
    height:var(--nx-node-size);
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--nx-node-color,#00d4ff);
    border-radius:50%;
    isolation:isolate;
    animation:nxTlNodeFloat 4.2s ease-in-out infinite;
    animation-delay:var(--nx-node-delay,0s);
  }
  #nx-feed .nx-tl-node::before{
    content:"";
    position:absolute;
    inset:-5px;
    z-index:-2;
    border-radius:50%;
    border:1px solid rgba(var(--nx-node-rgb),.46);
    box-shadow:0 0 13px rgba(var(--nx-node-rgb),.17),inset 0 0 11px rgba(var(--nx-node-rgb),.06);
    opacity:.72;
    animation:nxTlNodeRing 3.25s cubic-bezier(.2,.75,.25,1) infinite;
    animation-delay:var(--nx-node-delay,0s);
  }
  #nx-feed .nx-tl-node::after{
    content:"";
    position:absolute;
    inset:-14px;
    z-index:-3;
    border-radius:50%;
    background:radial-gradient(circle,rgba(var(--nx-node-rgb),.23),rgba(var(--nx-node-rgb),.08) 38%,transparent 70%);
    filter:blur(3px);
    opacity:.72;
    animation:nxTlAura 3.8s ease-in-out infinite;
    animation-delay:var(--nx-node-delay,0s);
  }
  #nx-feed .nx-tl-node-core{
    position:relative;
    width:calc(var(--nx-node-size) - 4px);
    height:calc(var(--nx-node-size) - 4px);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(var(--nx-node-rgb),.55);
    background:
      radial-gradient(circle at 32% 22%,rgba(255,255,255,.16),transparent 34%),
      linear-gradient(155deg,rgba(var(--nx-node-rgb),.18),rgba(5,17,26,.94) 55%,rgba(2,9,15,.98));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 0 18px rgba(var(--nx-node-rgb),.08),
      0 0 18px rgba(var(--nx-node-rgb),.18),
      0 8px 20px rgba(0,0,0,.30);
    transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease;
  }
  #nx-feed .nx-tl-node .xbf{
    position:relative;
    z-index:2;
    filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 15px rgba(var(--nx-node-rgb),.20));
    transition:transform .22s cubic-bezier(.16,1,.3,1),filter .22s ease;
  }
  #nx-feed .nx-tl-node--featured::before{animation-duration:2.8s}
  #nx-feed .nx-tl-node--featured::after{opacity:.88}
  #nx-feed .nx-tl-node--urgent::before{animation-duration:2.35s}
  #nx-feed .nx-tl-node--urgent::after{animation-duration:2.9s;opacity:.86}
  #nx-feed [data-ev]:hover .nx-tl-node-core,
  #nx-feed [data-gpblock]:hover .nx-tl-node-core,
  #nx-feed .nx-tl-node:hover .nx-tl-node-core{
    transform:scale(1.09) translateY(-1px);
    border-color:rgba(var(--nx-node-rgb),.86);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 25px rgba(var(--nx-node-rgb),.28),0 10px 24px rgba(0,0,0,.34);
  }
  #nx-feed [data-ev]:hover .nx-tl-node .xbf,
  #nx-feed [data-gpblock]:hover .nx-tl-node .xbf,
  #nx-feed .nx-tl-node:hover .xbf{
    transform:scale(1.09);
    filter:drop-shadow(0 0 9px currentColor) drop-shadow(0 0 22px rgba(var(--nx-node-rgb),.34));
  }

  /* AHORA keeps identity semantics. Authenticated users keep their real avatar;
     guest state swaps only the generic person drawing for official Fluent. */
  #nx-node{
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    filter:drop-shadow(0 0 10px rgba(0,212,255,.40))!important;
    isolation:isolate;
    animation:nxTlNodeFloat 4s ease-in-out infinite;
  }
  #nx-node>span:first-child{
    clip-path:none!important;
    border-radius:50%!important;
    box-shadow:0 0 18px rgba(0,212,255,.22),inset 0 1px 0 rgba(255,255,255,.16);
  }
  #nx-node>span:nth-child(2){clip-path:none!important;border-radius:50%!important}
  #nx-node::before{
    content:"";
    position:absolute;
    inset:-6px;
    z-index:-2;
    border-radius:50%;
    border:1px solid rgba(0,212,255,.55);
    animation:nxTlNodeRing 2.65s cubic-bezier(.2,.75,.25,1) infinite;
  }
  html:not([data-auth="1"]) #nx-node>span:nth-child(2)>svg{display:none!important}
  html:not([data-auth="1"]) #nx-node::after{
    content:'\EC7D';
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    font:400 23px/1 'Xbox Fluent v2';
    color:#8ff3ff;
    text-shadow:0 0 10px rgba(0,220,255,.60),0 0 22px rgba(0,220,255,.28);
    pointer-events:none;
  }
}

@keyframes nxTlSweep{
  0%{top:-110px;opacity:0}
  8%{opacity:.92}
  82%{opacity:.82}
  100%{top:calc(100% + 20px);opacity:0}
}
@keyframes nxTlThreadFlow{
  0%{top:-72px;opacity:0}
  12%{opacity:.88}
  84%{opacity:.76}
  100%{top:calc(100% + 10px);opacity:0}
}
@keyframes nxTlNodeRing{
  0%{transform:scale(.83);opacity:0}
  18%{opacity:.72}
  68%{opacity:.20}
  100%{transform:scale(1.48);opacity:0}
}
@keyframes nxTlAura{
  0%,100%{transform:scale(.92);opacity:.42}
  50%{transform:scale(1.08);opacity:.82}
}
@keyframes nxTlNodeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}

@media (prefers-reduced-motion:reduce){
  #nx-feed .nx-rail-sweep::after,
  #nx-feed .nx-tl-thread::after,
  #nx-feed .nx-tl-node,
  #nx-feed .nx-tl-node::before,
  #nx-feed .nx-tl-node::after,
  #nx-node,
  #nx-node::before{animation:none!important}
}

/* Canonical timeline icon accents. */
[data-node] .xbf,
[data-ev] .xbf{transform:translateZ(0)}
[data-ev="noticia"] .xbf{filter:drop-shadow(0 0 6px rgba(0,212,255,.22))}
[data-ev="oferta"] .xbf{filter:drop-shadow(0 0 6px rgba(94,255,159,.18))}

/* Shared desktop sidebar used by /juegos and /juego/{slug}. */
@media (min-width:1024px){
  .nx-sidebar-nav .nx-nav-link>svg{display:none!important}
  .nx-sidebar-nav .nx-nav-link::before{
    width:24px;
    flex:0 0 24px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    font:400 20px/1 'Xbox Fluent v2';
    color:currentColor;
  }
  .nx-sidebar-nav .nx-nav-link:nth-child(1)::before{content:'\EC7C'}
  .nx-sidebar-nav .nx-nav-link:nth-child(2)::before{content:'\EA7A'}
  .nx-sidebar-nav .nx-nav-link:nth-child(3)::before{content:'\E95A'}
  .nx-sidebar-nav .nx-nav-link:nth-child(4)::before{content:'\E9CD'}
  .nx-sidebar-nav .nx-nav-link:nth-child(5)::before{content:'\EC7D'}
  .nx-sidebar-nav .nx-nav-link--active::before{
    color:#00d4ff;
    filter:drop-shadow(0 0 7px rgba(0,212,255,.58));
  }
  .nx-wj-btn>svg{display:none!important}
  .nx-wj-btn::before{font:400 15px/1 'Xbox Fluent v2'}
  .nx-wj-btn[title*="pendiente"]::before{content:'\E7FB'}
  .nx-wj-btn[title*="jugando"]::before{content:'\E9CD'}
}

/* FICHAS DE JUEGO */
@media (min-width:1024px){
  .juego-tk-btn-icon>svg{display:none!important}
  .juego-tk-btn-icon::before{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font:400 18px/1 'Xbox Fluent v2';
    color:currentColor;
  }
  .juego-tk-btn-pendiente .juego-tk-btn-icon::before{content:'\E7FB'}
  .juego-tk-btn-jugando .juego-tk-btn-icon::before{content:'\E9CD'}
  .juego-tk-btn-terminado .juego-tk-btn-icon::before{content:'\E837'}
  .juego-tk-btn-abandonado .juego-tk-btn-icon::before{content:'\E7DB'}
  .juego-tier-icon>svg{display:none!important}
  .juego-tier-icon::before{font:400 21px/1 'Xbox Fluent v2';color:currentColor}
  .juego-tier[data-tier="ultimate"] .juego-tier-icon::before{content:'\E8C9';font-size:25px}
  .juego-tier[data-tier="pc"] .juego-tier-icon::before{content:'\E8B5'}
  .juego-tier[data-tier="premium"] .juego-tier-icon::before{content:'\E9A1'}
  .juego-tier[data-tier="essential"] .juego-tier-icon::before{content:'\E9CD'}
  .juego-goty-badge>svg{display:none!important}
  .juego-goty-badge::before{content:'\E8CA';font:400 19px/1 'Xbox Fluent v2'}
  .juego-cta-comunidad .juego-cta-primary>svg{display:none!important}
  .juego-cta-comunidad .juego-cta-primary::before{content:'\EC7C';font:400 20px/1 'Xbox Fluent v2'}
}