.gx-game-hero {
    display: grid; grid-template-columns: 220px 1fr; gap: 28px;
    margin: 20px 0 32px;
    align-items: start;
  }
  .gx-game-hero-cover {
    position:relative;display:grid;place-items:center;
    aspect-ratio: 3 / 4;
    border-radius: 14px; overflow: hidden;
    background: var(--gx-bg-2);
    background-size: cover; background-position: center;
    border: 1px solid var(--gx-border);
  }
  .gx-game-hero-fallback{color:var(--gx-text-3)}
  .gx-game-hero-cover img { position:absolute;z-index:1;inset:0;width: 100%; height: 100%; object-fit: cover; display: block; }
  .gx-game-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .gx-game-meta-row .gx-pill { background: var(--gx-card-2); }
  .gx-game-meta-row img { height: 22px; filter: brightness(0) invert(1); }

  .gx-game-title {
    font-family: inherit;
    font-size: 42px; font-weight: 700; line-height: 1.05;
    margin: 0 0 10px;
  }
  .gx-game-pub { color: var(--gx-text-3); font-size: 14px; margin-bottom: 14px; }
  .gx-game-desc { color: var(--gx-text-2); line-height: 1.6; font-size: 14px; max-width: 680px; }

  .gx-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--gx-border);
    margin: 30px 0 0;
  }
  .gx-tab {
    padding: 12px 22px;
    font-family: inherit;
    font-size: 17px; font-weight: 600; letter-spacing: 0.3px;
    color: var(--gx-text-3);
    cursor: pointer; background: none; border: none;
    border-bottom: 2px solid transparent;
    transition: all .15s ease;
  }
  .gx-tab:hover { color: var(--gx-text-1); }
  .gx-tab.is-active { color: var(--gx-text-1); border-bottom-color: var(--gx-accent); }
  .gx-tab .count {
    display: inline-block; margin-left: 6px;
    font-family: 'Poppins', sans-serif;
    background: var(--gx-card-2); color: var(--gx-text-2);
    padding: 1px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
  }

  .gx-filters {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 18px 0; margin-bottom: 8px;
  }
  .gx-filters select, .gx-filters .gx-btn {
    padding: 8px 12px; border-radius: 8px;
    background: var(--gx-card); border: 1px solid var(--gx-border);
    color: var(--gx-text-1); font-size: 13px;
  }
  .gx-wrap .gx-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .gx-filters select:focus { outline: none; border-color: var(--gx-accent); }

  .gx-providers {
    display: grid; gap: 12px;
  }
  .gx-provider {
    display: grid;
    /* avatar | info (nick + tags inline) | accepts | precio | CTA */
    grid-template-columns: auto 1fr auto auto auto;
    gap: 12px; align-items: center;
    background: var(--gx-card);
    border: 1px solid var(--gx-border);
    border-radius: 12px;
    padding: 8px 14px;
    transition: border-color .15s ease;
  }
  .gx-provider:hover { border-color: var(--gx-accent); }
  .gx-provider-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-solid);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px;
    flex-shrink: 0;
  }
  .gx-provider-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  /* Info inline: nick + todos los tags en la misma línea, flex-wrap solo si
     no caben (mobile). Compactar margins/padding hace el row mucho más bajo. */
  .gx-provider-info {
    display: flex; align-items: center; gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .gx-provider-nick {
    font-size: 14px; font-weight: 600;
    color: var(--gx-text-1);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
  }
  .gx-provider-nick a { color: inherit; text-decoration: none; }
  .gx-provider-nick a:hover { color: var(--gx-accent-text); }
  .gx-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; padding: 1px 7px;
    background: var(--gx-bg-2); color: var(--gx-text-2);
    border-radius: 999px; border: 1px solid var(--gx-border);
    line-height: 1.6;
    white-space: nowrap;
  }
  .gx-tag.warranty { color: var(--gx-accent-text); border-color: rgba(39,225,157,0.3); }
  .gx-tag.region { color: #785800; border-color: rgba(180,130,0,0.35); }
  .gx-tag.verified { color: var(--gx-accent-text); border-color: rgba(39,225,157,0.45); background: rgba(39,225,157,0.10); font-weight: 600; }
  .gx-tag.official { color: #111827; border-color: #facc15; background: linear-gradient(135deg, #fde68a, #facc15); font-weight: 800; }
  .gx-tag.pro { color: var(--warn); border-color: rgba(255,215,0,0.45); background: rgba(255,215,0,0.10); font-weight: 700; }
  .gx-tag.rating { color: var(--warn); border-color: rgba(255,215,0,0.35); font-weight: 600; }
  .gx-tag.rating .n { color: var(--gx-text-3); font-weight: 400; }
  .gx-tag.low-stock { color: #a8174c; border-color: rgba(168,23,76,0.4); font-weight: 600; }
  html[data-theme="dark"] .gx-tag.region { color: #fde68a; border-color: rgba(253,230,138,0.3); }
  html[data-theme="dark"] .gx-tag.low-stock { color: var(--gx-accent-3); border-color: rgba(255,61,127,0.4); }

  /* Ordenador de ofertas (quick win: ofertas por vendedor ordenables) */
  .gx-sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
  .gx-sort-lbl { font-size: 12px; color: var(--gx-text-3); }

  /* Logos de métodos de pago del seller — columna dedicada del grid del
     provider row, vertically centered con avatar/info/precio/CTA gracias a
     align-items:center del grid padre. Sin max-width: la columna se expande
     según los logos del seller y el grid acomoda. flex-wrap activo solo
     cuando ni siquiera el viewport entero alcanza (mobile via @media). */
  .gx-provider-accepts {
    display: inline-flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
  }
  .gx-bank-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid var(--gx-border);
    flex-shrink: 0;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .gx-bank-logo:hover {
    transform: translateY(-1px);
    border-color: var(--gx-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  }
  .gx-bank-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
  .gx-bank-fallback {
    font-size: 13px; font-weight: 800;
    color: var(--gx-accent);
    line-height: 1;
  }
  .gx-bank-extra {
    background: var(--gx-card-2);
    border-color: var(--gx-border);
    color: var(--gx-text-3);
    font-size: 11px; font-weight: 700;
    width: auto; min-width: 34px;
    padding: 0 9px;
  }
  /* Mobile: el divisor vertical no tiene sentido cuando los logos bajan a
     otra línea. Lo ocultamos y ajustamos espaciado. */
  @media (max-width: 720px) {
    .gx-provider-accepts {
      border-left: 0;
      padding-left: 0;
      margin-left: 0;
      width: 100%;
      margin-top: 4px;
    }
  }

  .gx-provider-price {
    font-family: inherit;
    font-size: 20px; font-weight: 700;
    color: var(--gx-accent-text);
    text-align: right;
    line-height: 1.1;
  }
  .gx-provider-price small { display: block; font-size: 10.5px; color: var(--gx-text-3); font-weight: 500; margin-top: 1px; }
  .gx-provider-cta { white-space: nowrap; }

  .gx-publish-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 18px;
    border: 1px dashed var(--gx-border);
    border-radius: 12px;
    color: var(--gx-text-2);
    font-size: 14px;
  }
  .gx-publish-cta span { min-width: 0; }

  @media (max-width: 720px) {
    .gx-game-hero { grid-template-columns: 1fr; }
    .gx-game-hero-cover { max-width: 200px; aspect-ratio: 3/4; }
    .gx-game-title { font-size: 30px; }
    .gx-provider { grid-template-columns: auto 1fr; gap: 12px; }
    .gx-provider-price, .gx-provider-cta, .gx-provider-accepts { grid-column: 1 / -1; text-align: left; }
    .gx-provider-cta { display: flex; justify-content: flex-end; }
    .gx-provider-accepts { max-width: none; }
    .gx-publish-cta { flex-direction: column; align-items: stretch; text-align: center; }
  }
/* Comparison controls share the marketplace's type scale and focus behavior. */
[data-gaming-game] { min-width:0; }
[data-gaming-game] [hidden] { display:none!important; }
[data-gaming-game] :is(button,select,input,a):focus-visible { outline:2px solid var(--gx-accent-text); outline-offset:3px; }
.gx-game-title { font-size:2rem; line-height:1.25; overflow-wrap:anywhere; }
.gx-game-meta-row img { filter:none; }
.gx-provider { position:relative; grid-template-columns:36px minmax(0,1fr) auto auto; gap:12px; padding:16px; border-radius:12px; }
.gx-provider-info { align-items:center; }
.gx-provider-nick { flex-basis:100%; max-width:none; white-space:normal; overflow-wrap:anywhere; }
.gx-provider-nick a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.gx-provider-accepts { grid-column:2; grid-row:2; }
.gx-provider-price { grid-column:3; grid-row:1/3; font-size:1.25rem; }
.gx-provider-cta { grid-column:4; grid-row:1/3; }
.gx-provider-price small { font-size:.8125rem; }
.gx-tag { font-size:.75rem; }
.gx-tag.pro,.gx-tag.rating { color:var(--warn); background:transparent; border-color:var(--gx-border); }
.gx-tabs { gap:8px; flex-wrap:wrap; }
.gx-tab { min-height:48px; padding:10px 12px; font-size:.9375rem; letter-spacing:0; }
.gx-filters { align-items:flex-end; }
.gx-filters>div { flex:1 1 180px; }
.gx-filters label,.gx-sort label,.gx-alert-dialog label { display:block; margin-bottom:6px; font-size:.875rem; color:var(--gx-text-2); }
.gx-filters select,.gx-sort select,.gx-alert-dialog :is(input,select) { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--gx-border-mid); border-radius:8px; color:var(--gx-text-1); background:var(--gx-card); font:inherit; font-size:1rem; }
.gx-sort { gap:12px; margin:8px 0 20px; }
.gx-sort label { margin:0; }
.gx-sort select { width:auto; max-width:100%; }
.gx-alert-dialog { width:min(480px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:24px; border:1px solid var(--gx-border); border-radius:16px; color:var(--gx-text-1); background:var(--gx-card); text-align:left; }
.gx-alert-dialog::backdrop { background:rgba(12,8,20,.65); }
.gx-alert-dialog h2 { margin:0 44px 12px 0; font-size:1.25rem; }
.gx-alert-dialog p { color:var(--gx-text-2); font-size:.875rem; line-height:1.6; }
.gx-alert-dialog form { display:grid; gap:16px; margin-top:20px; }
.gx-alert-close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--gx-text-2); cursor:pointer; }
.gx-alert-actions { display:flex; justify-content:flex-end; gap:12px; }
@media(max-width:720px) {
  .gx-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gx-tab { padding:10px 6px; font-size:.875rem; }
  .gx-game-hero { grid-template-columns:100px minmax(0,1fr); gap:16px; }
  .gx-game-hero-cover { max-width:100px; }
  .gx-game-title { font-size:1.5rem; }
  .gx-game-meta-row { gap:6px; }
  .gx-game-meta-row .gx-pill { padding:4px 8px; font-size:.75rem; }
  .gx-provider { grid-template-columns:36px minmax(0,1fr); }
  .gx-provider-accepts { grid-column:1/-1; grid-row:auto; }
  .gx-provider-price { grid-column:1/-1; grid-row:auto; text-align:left; }
  .gx-provider-cta { grid-column:1/-1; grid-row:auto; justify-content:stretch; }
  .gx-provider-cta a { width:100%; }
  .gx-sort select { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .gx-provider,.gx-tab,.gx-bank-logo { transition:none; } }