/* gp-ui — capa común de la marca (02-10-2026). Sale del GameTracker 2.0 para que las pantallas
   nuevas (El Nexo 3 primero) no vuelvan a copiar tokens y componentes. Opt-in: solo afecta a lo
   que esté dentro de .gpu (o use sus clases gpu-*). GT2, Perfil y Cuenta no la cargan todavía.
   Paleta: cyan + blanco + oscuro; verde solo en chips de estado; dorado solo para el reto 2027. */
@font-face{font-family:"XF";src:url(/assets/fonts/xbox-fluent-gt.woff2) format("woff2");font-display:block}
.gpu,.gpu-sheet,.gpu-toasts{--bg:#080d14;--bg2:#071019;--pan:#0e151e;--pan2:#111821;--inset:rgba(255,255,255,.04);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
  --t:#dfe7ef;--t2:#aab6c3;--mut:#7a899a;--h:#fff;--cy:#00d4ff;--cy2:#7ee7ff;--cyd:#0094b3;--cyb:rgba(0,212,255,.12);--cyl:rgba(0,212,255,.30);--on:#04121a;
  --gr:#5eff9f;--gold:#ffd166;--red:#ff6b6b;--r:16px;--rs:10px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.32,1.25,.5,1);
  --fd:"Bebas Neue",Impact,sans-serif;--fs:Barlow,"Segoe UI",system-ui,sans-serif;--fc:"Barlow Condensed",Barlow,"Arial Narrow",sans-serif;
  font-family:var(--fs);color:var(--t);-webkit-tap-highlight-color:transparent}
.gpu *,.gpu-sheet *{box-sizing:border-box}
.gpu a{color:inherit}
.gpu img{max-width:100%}
.gpu button{font-family:inherit}
.gpu :focus-visible,.gpu-sheet :focus-visible{outline:2px solid var(--cy2);outline-offset:2px}

/* Iconos XboxFluent (subset) */
.xg{font-family:"XF";font-style:normal;font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex:none;speak:never}

/* Tipografía */
.gpu-eye{font:800 12px/1.15 var(--fc);letter-spacing:.12em;text-transform:uppercase;color:var(--cy)}
.gpu-eye.is-mut{color:var(--mut)}
.gpu-h{font:400 38px/.9 var(--fd);letter-spacing:.01em;color:var(--h);margin:0}
.gpu-h.is-sm{font-size:28px}
.gpu-meta{font:600 12px/1.3 var(--fs);color:var(--mut)}

/* Botones */
.gpu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:9px;border:0;cursor:pointer;text-decoration:none!important;
  font:800 15px/1 var(--fs);background:var(--cy);color:var(--on)!important;box-shadow:0 10px 30px -10px rgba(0,212,255,.55);transition:transform .18s var(--ease),background .18s,box-shadow .18s}
.gpu-btn:hover{background:var(--cy2)}
.gpu-btn:active{transform:scale(.96)}
.gpu-btn .xg{font-size:17px}
.gpu-btn.is-ghost{background:rgba(8,13,20,.55);color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.gpu-btn.is-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.gpu-btn.is-soft{background:var(--cyb);color:var(--cy)!important;box-shadow:inset 0 0 0 1px var(--cyl)}
.gpu-btn.is-sm{min-height:36px;padding:0 13px;font-size:13.5px;border-radius:8px}
.gpu-btn.is-lg{min-height:52px;font-size:16px;padding:0 24px}
.gpu-btn.is-block{display:flex;width:100%}
.gpu-btn.is-busy{pointer-events:none;opacity:.7}
.gpu-btn[aria-pressed=true]{background:var(--cyb);color:var(--cy)!important;box-shadow:inset 0 0 0 1px var(--cyl)}

/* Chips */
.gpu-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;font:800 11px/1 var(--fc);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--inset);color:var(--t2);box-shadow:inset 0 0 0 1px var(--line2)}
.gpu-chip.is-cy{background:var(--cyb);color:var(--cy2);box-shadow:inset 0 0 0 1px var(--cyl)}
.gpu-chip.is-fill{background:var(--cy);color:var(--on);box-shadow:none}
.gpu-chip.is-gr{background:var(--gr);color:var(--on);box-shadow:none}
.gpu-chip.is-gold{background:rgba(255,209,102,.12);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,209,102,.35)}
.gpu-live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:4px;background:rgba(0,212,255,.14);box-shadow:inset 0 0 0 1px rgba(0,212,255,.55);font:800 11px/1 var(--fc);letter-spacing:.1em;color:#fff}

/* Punto en vivo y rayo de marca */
.gpu-dot{width:8px;height:8px;border-radius:99px;background:var(--cy);flex:none;animation:gpuVivo 1.4s ease-in-out infinite}
.gpu-rayo{display:inline-block;width:1em;height:1em;flex:none;color:var(--cy);animation:gpuRayo 2.2s ease-in-out infinite}
.gpu-rayo path{fill:currentColor}
.gpu-rayo-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;background:var(--on);box-shadow:inset 0 0 0 2px var(--cy);font-size:14px}
@keyframes gpuVivo{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)}}
@keyframes gpuRayo{0%,100%{filter:drop-shadow(0 0 2px rgba(0,212,255,.5))}50%{filter:drop-shadow(0 0 12px rgba(0,212,255,1))}}

/* Avatar hexagonal con anillo de rango */
.gpu-hex{position:relative;display:inline-block;flex:none;width:var(--s,40px);height:calc(var(--s,40px)*1.1)}
.gpu-hex::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--ring,linear-gradient(160deg,#00d4ff,#7ee7ff))}
.gpu-hex>img,.gpu-hex>span{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);object-fit:cover;background:var(--pan2);
  display:flex;align-items:center;justify-content:center;font:800 calc(var(--s,40px)*.4)/1 var(--fs);color:#fff}
.gpu-ava{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s,36px);height:var(--s,36px);border-radius:99px;overflow:hidden;background:var(--pan2);
  box-shadow:0 0 0 2px var(--ring,var(--cy));font:800 calc(var(--s,36px)*.42)/1 var(--fs);color:#fff}
.gpu-ava img{width:100%;height:100%;object-fit:cover}

/* Carrusel horizontal (overflow-y:hidden: sin él atrapaba la rueda) */
.gpu-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gpu-rail::-webkit-scrollbar{display:none}
.gpu-rail>*{scroll-snap-align:start;flex:none}

/* Panel y skeleton */
.gpu-pan{border-radius:var(--r);background:var(--pan);box-shadow:inset 0 0 0 1px var(--line)}
.gpu-sk{position:relative;overflow:hidden;background:var(--inset);border-radius:var(--rs)}
.gpu-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:gpuSk 1.3s infinite}
@keyframes gpuSk{to{transform:translateX(100%)}}

/* Hoja: cajón derecho en escritorio, hoja inferior arrastrable en móvil.
   Cerrada = visibility:hidden + pointer-events:none (lección del P0 del 30-09: nunca depender de [hidden]). */
.gpu-sheet{position:fixed;inset:0;z-index:2147483000;visibility:hidden;pointer-events:none}
.gpu-sheet.is-open{visibility:visible;pointer-events:auto}
.gpu-scrim{position:absolute;inset:0;background:rgba(3,6,10,.64);opacity:0;transition:opacity .3s var(--ease)}
.gpu-sheet.is-open .gpu-scrim{opacity:1}
.gpu-sheet-box{position:absolute;top:0;right:0;bottom:0;width:min(520px,100vw);display:flex;flex-direction:column;background:#0b1118;border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.9);transform:translateX(102%);transition:transform .42s var(--ease);outline:none}
.gpu-sheet.is-open .gpu-sheet-box{transform:none}
.gpu-sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 20px calc(24px + env(safe-area-inset-bottom))}
.gpu-sheet-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:99px;border:0;background:rgba(255,255,255,.06);color:#fff;font-size:22px;cursor:pointer;z-index:2}
.gpu-grab{display:none}
@media (max-width:767px){
  .gpu-sheet-box{top:auto;left:0;right:0;width:100%;max-height:92vh;border-left:0;border-top:1px solid rgba(255,255,255,.1);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .46s var(--ease)}
  .gpu-sheet-box.is-dragging{transition:none}
  .gpu-grab{display:flex;justify-content:center;padding:10px 0 2px;cursor:grab;touch-action:none}
  .gpu-grab span{width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.24)}
  .gpu-sheet-x{display:none}
}

/* Avisos */
.gpu-toasts{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.gpu-toast{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;background:rgba(14,21,30,.97);box-shadow:inset 0 0 0 1px var(--cyl),0 18px 40px -12px rgba(0,0,0,.8);
  color:#fff;font:700 14px/1.3 var(--fs);pointer-events:auto;animation:gpuToast .42s var(--spring) both}
.gpu-toast .xg,.gpu-toast .gpu-rayo{font-size:20px;color:var(--cy)}
.gpu-toast small{display:block;font-weight:600;color:var(--t2);font-size:12.5px;margin-top:2px}
.gpu-toast.is-err{box-shadow:inset 0 0 0 1px rgba(255,107,107,.5),0 18px 40px -12px rgba(0,0,0,.8)}
.gpu-toast.is-out{animation:gpuToastOut .28s var(--ease) both}
@keyframes gpuToast{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes gpuToastOut{to{opacity:0;transform:translateY(10px)}}
@media (min-width:1181px){.gpu-toasts{bottom:28px}}

/* Entrada escalonada */
.gpu-in{animation:gpuIn .6s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes gpuIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .gpu-dot,.gpu-rayo,.gpu-sk::after,.gpu-in,.gpu-toast,.gpu-toast.is-out{animation:none!important}
  .gpu-sheet-box,.gpu-scrim{transition:none!important}
}