[x-cloak] { display: none !important; }
    :root {
      --gx-bg:        #0a0a14;
      --gx-bg-2:      #11111f;
      --gx-card:      #161628;
      --gx-card-2:    #1d1d33;
      --gx-border:    #2b2b44;
      --gx-border-mid:#3a3a58;
      --gx-text-1:    #ffffff;
      --gx-text-2:    rgba(255,255,255,0.78);
      --gx-text-3:    rgba(255,255,255,0.55);
      --gx-accent:    #9B48ED;       /* púrpura Gudfy */
      --gx-accent-2:  #27E19D;       /* teal Gudfy */
      --gx-accent-text:#27E19D;      /* texto teal sobre superficies oscuras */
      --gx-accent-3:  #ff3d7f;       /* rosa neón gaming */
      --gx-glow:      0 0 24px rgba(155,72,237,0.4);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      overflow-x: hidden; max-width: 100vw;
      background: var(--gx-bg);
      color: var(--gx-text-1);
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }
    a { color: inherit; text-decoration: none; }

    /* ── Header gaming ───────────────────────────────────────────── */
    .gx-hdr {
      position: sticky; top: 0; z-index: 100;
      background: var(--gx-header);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gx-border);
    }
    .gx-hdr-inner {
      width: 100%;
      display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px;
      padding: 14px 20px;
    }
    .gx-hdr-left   { display: flex; align-items: center; min-width: 0; }
    .gx-brand {
      display: flex; align-items: center; gap: 10px;
      color: var(--gx-text-1);
      flex-shrink: 0;
    }
    .gx-brand img.gx-brand-logo {
      height: 30px; width: auto;

    }
    .gx-brand .gx-brand-tag {
      font-family:inherit;
      font-size:12px; font-weight: 700;
      color: var(--gx-accent-2);
      letter-spacing: 2px; text-transform: uppercase;
      padding: 3px 8px;
      background: rgba(39,225,157,0.10);
      border: 1px solid rgba(39,225,157,0.35);
      border-radius: 999px;
      line-height: 1;
    }

    .gx-actions {
      display: flex; align-items: center; gap: 10px;
      justify-self: end; flex-shrink: 0;
    }
    .gx-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: 999px;
      background: var(--gx-card);
      border: 1px solid var(--gx-border);
      font-size: 13px; font-weight: 600;
      color: var(--gx-text-1);
    }
    .gx-pill.gem { color:var(--warn); border-color:var(--gx-border); }

    /* Currency picker */
    .gx-currency { position: relative; }
    .gx-currency-pill { cursor: pointer; }
    .gx-currency-pill .flag { font-size: 14px; line-height: 1; }
    .gx-currency-pill .code { font-weight: 700; letter-spacing: 0.3px; }
    .gx-currency-pill svg { color: var(--gx-text-3); margin-left: 2px; }
    .gx-currency-menu {
      position: absolute; top: calc(100% + 8px); right: 0;
      min-width: 220px; max-height: 320px; overflow-y: auto;
      background: var(--gx-card);
      border: 1px solid var(--gx-border-mid);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.6);
      z-index: 110;
      padding: 4px;
    }
    .gx-currency-menu form { display: flex; flex-direction: column; gap: 1px; }
    .gx-currency-opt {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 7px;
      background: transparent; border: none;
      color: var(--gx-text-1); font-size: 13px;
      text-align: left; cursor: pointer;
      font-family: inherit;
      transition: background .12s;
    }
    .gx-currency-opt:hover { background: var(--gx-card-2); }
    .gx-currency-opt.is-active { background: rgba(155,72,237,0.12); color: var(--gx-accent-2); }
    .gx-currency-opt .flag { font-size: 16px; line-height: 1; }
    .gx-currency-opt .code { font-weight: 700; min-width: 36px; }
    .gx-currency-opt small { color: var(--gx-text-3); font-size:12px; }

    .gx-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: 8px;
      background:var(--accent-solid);
      color: #fff; font-size: 13px; font-weight: 600;
      border: none; cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .gx-btn:hover { transform: translateY(-1px); box-shadow: var(--gx-glow); }
    .gx-btn-ghost {
      background: transparent;
      border: 1px solid var(--gx-border);
      color: var(--gx-text-2);
    }
    .gx-btn-ghost:hover { color: var(--gx-text-1); border-color: var(--gx-border-mid); }

    /* Dropdown "Mi cuenta" (anon) — réplica del componente de la zona de
       cuentas/marketplace, tematizada para fondo oscuro de gaming. */
    .gx-user-wrap { position: relative; }
    .gx-user-trigger {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px;
      background: transparent;
      border: 1px solid var(--gx-border);
      border-radius: 8px;
      color: rgba(255,255,255,0.78);
      font-family: inherit;
      font-size: 13px; font-weight: 500;
      cursor: pointer;
      transition: color .15s ease, border-color .15s ease;
    }
    .gx-user-trigger:hover, .gx-user-trigger:focus-visible {
      color: #fff;
      border-color: var(--gx-border-mid);
      outline: none;
    }
    html[data-theme="light"] { --gx-accent-text: #067148; }
    .gx-user-label { line-height: 1; }
    .gx-user-drop {
      position: absolute; top: calc(100% + 6px); right: 0;
      min-width: 180px;
      background: var(--gx-card);
      border: 1px solid var(--gx-border);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.35);
      z-index: 100;
    }
    .gx-user-drop-item {
      display: block;
      width: 100%; text-align: left;
      padding: 9px 12px;
      color: var(--gx-text-1);
      font-size: 13px; font-weight: 500;
      text-decoration: none;
      border-radius: 6px;
      border: none; background: transparent;
      cursor: pointer; font-family: inherit;
      transition: background .12s ease;
    }
    .gx-user-drop-item:hover, .gx-user-drop-item:focus-visible {
      background: rgba(155,72,237,0.12);
      outline: none;
    }
    /* Variante autenticada (avatar + nick + chev) — botón sin borde, más compacto */
    .gx-user-trigger--auth {
      padding: 4px 10px 4px 4px;
      gap: 8px;
      border: 1px solid transparent;
    }
    .gx-user-trigger--auth:hover, .gx-user-trigger--auth:focus-visible {
      background: rgba(255,255,255,0.06);
      border-color: var(--gx-border);
    }
    .gx-user-nick {
      max-width: 110px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 13px;
    }
    .gx-user-drop-head {
      padding: 8px 12px 10px;
      font-size:12px; color: var(--gx-text-3);
      border-bottom: 1px solid var(--gx-border);
      margin-bottom: 4px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .gx-user-drop-sep {
      height: 1px; background: var(--gx-border);
      margin: 4px 0;
    }
    /* Bloque solo-mobile dentro del dropdown del perfil: gemas + selector de divisa.
       En desktop viven en el header; en ≤720px se mueven aquí. */
    .gx-drop-only-mobile { display: none; }
    .gx-drop-cur-head {
      padding: 8px 12px 2px;
      font-size:12px; text-transform: uppercase; letter-spacing: 1px;
      color: var(--gx-text-3);
    }
    .gx-drop-cur { display: block; max-height: 220px; overflow-y: auto; }
    .gx-cur-opt { display: flex; align-items: center; gap: 8px; }
    .gx-cur-opt .code { font-weight: 700; min-width: 34px; }
    .gx-cur-opt small { color: var(--gx-text-3); font-size:12px; margin-left: auto; }
    .gx-cur-opt.is-active { color: var(--gx-accent-2); }
    /* Selector de divisa colapsable en el dropdown: muestra solo la elegida; click expande. */
    .gx-cur-toggle { display: flex; align-items: center; gap: 6px; }
    .gx-cur-toggle .gx-cur-lbl { color: var(--gx-text-3); margin-right: auto; }
    .gx-cur-toggle .flag { font-size: 15px; line-height: 1; }
    .gx-cur-toggle .code { font-weight: 700; }
    .gx-drop-cur-wrap .gx-drop-cur { margin: 2px 0 0; border-left: 1px solid var(--gx-border); padding-left: 4px; }
    .gx-user-drop-logout {
      color: #ff8b9b;
    }
    .gx-user-drop-logout:hover { background: rgba(255, 77, 109, 0.12); color: #ff4d6d; }
    @media (max-width: 720px) {
      .gx-user-nick { display: none; }
    }

    /* ── Containers ────────────────────────────────────────────────── */
    .gx-wrap {
      max-width: 1400px; margin: 0 auto;
      padding: 28px 20px 80px;
    }
    .gx-wrap-narrow {
      max-width: 980px; margin: 0 auto;
      padding: 28px 20px 80px;
    }

    /* ── Cards ─────────────────────────────────────────────────────── */
    .gx-card {
      background: var(--gx-card);
      border: 1px solid var(--gx-border);
      border-radius: 14px;
      padding: 20px;
    }
    .gx-card-soft {
      background: linear-gradient(180deg, var(--gx-card), var(--gx-bg-2));
      border: 1px solid var(--gx-border);
      border-radius: 14px;
    }

    /* ── Tipografía ────────────────────────────────────────────────── */
    .gx-h1 {
      font-family:inherit;
      font-size: 38px; font-weight: 700; letter-spacing: 0.5px;
      margin: 0 0 6px;
    }
    .gx-h2 {
      font-family:inherit;
      font-size: 26px; font-weight: 700; letter-spacing: 0.3px;
      margin: 0 0 16px;
    }
    .gx-muted { color: var(--gx-text-3); font-size: 14px; }

    /* ── Toast ─────────────────────────────────────────────────────── */
    .gx-toast {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: var(--gx-card);
      border: 1px solid var(--gx-border-mid);
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 14px; color: var(--gx-text-1);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      z-index: 1000;
      animation: gxToastIn 0.25s ease;
    }
    .gx-toast.ok { border-color: var(--gx-accent-2); color: var(--gx-accent-2); }
    .gx-toast.err { border-color: var(--gx-accent-3); color: var(--gx-accent-3); }
    @keyframes gxToastIn {
      from { opacity: 0; transform: translate(-50%, 10px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    /* ── Promo badges (sticker en cards de listings) ────────────────── */
    .gx-promo-badge {
      position: absolute; top: 10px; right: 10px;
      padding: 4px 10px; border-radius: 6px;
      font-family:inherit;
      font-size:12px; font-weight: 800;
      letter-spacing: 1.2px;
      background: var(--gx-card-2); color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      z-index: 2;
      text-transform: uppercase;
    }
    .gx-promo-nuevo,
    .gx-promo-estreno  { background: linear-gradient(135deg, #0f9e6a, #27E19D); color: #042e1d; }
    .gx-promo-oferta   { background: linear-gradient(135deg, #ff3d7f, #b8174c); color: #fff; box-shadow: 0 2px 12px rgba(255,61,127,0.4); }
    .gx-promo-goty,
    .gx-promo-top      { background: linear-gradient(135deg, #FFD700, #f59e0b); color: #1a0a30; }
    .gx-promo-popular  { background: linear-gradient(135deg, #9B48ED, #c4a8ff); color: #fff; }

    .gx-provider { position: relative; }

    /* ── Footer ────────────────────────────────────────────────────── */
    .gx-foot {
      border-top: 1px solid var(--gx-border);
      padding: 30px 20px;
      text-align: center;
      color: var(--gx-text-3);
      font-size: 13px;
    }
    .gx-foot a { color: var(--gx-text-2); margin: 0 10px; }
    .gx-foot a:hover { color: var(--gx-text-1); }

    @media (max-width: 720px) {
      .gx-hdr-inner {
        min-height:60px;padding:8px 12px;gap:8px;
        grid-template-columns:minmax(0,1fr) auto;
      }
      .gx-brand img.gx-brand-logo { height: 22px; }
      .gx-brand { min-height:44px;display:inline-flex;align-items:center; }
      .gx-brand .gx-brand-tag { display: none; }
      .gx-h1 { font-size: 28px; }
      /* Mobile: bandera (divisa) y gemas salen del header → al dropdown del perfil. */
      .gx-actions .gx-currency { display: none; }
      .gx-actions .gx-pill.gem { display: none; }
      .gx-drop-only-mobile { display: block; }
      .gx-wrap, .gx-wrap-narrow { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
      .gx-user-trigger { width:44px;height:44px;min-width:44px;padding:0;justify-content:center;border-radius:50%; }
      .gx-user-label,.gx-user-trigger > svg:last-child { display:none; }
      .gx-user-drop { position:fixed;top:66px;right:12px;width:min(300px,calc(100vw - 24px));min-width:0;max-height:calc(100dvh - 82px);overflow-y:auto; }
      .gx-foot { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
      .gx-foot a { min-height:44px;display:inline-flex;align-items:center; }
    }

.gx-hdr :is(button,a) { min-height:44px; }
.gx-hdr :is(a,button):focus-visible,#gaming-main :is(a,button,input,select,textarea):focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
.gx-hdr .gx-user-drop-item:focus-visible { outline-offset:-3px; }
.gx-user-drop-logout { color:var(--error); }
.gx-console-chip { min-height:44px; }
.gx-skip-link { position:fixed; left:12px; top:-80px; z-index:1001; padding:12px 16px; border-radius:8px; color:var(--text-1); background:var(--bg-card); }
.gx-skip-link:focus { top:8px; }
@media(prefers-reduced-motion:reduce) { .gx-btn,.gx-toast { animation:none; transition:none; } }