/* Remates de la vista de cuadrícula: etiquetas editoriales y controles. */

.card-ribbon{display:none}

/* En cuadrícula, la etiqueta original del listado se sustituye por un banderín. */
#releases.view-grid .release .tag-dlc{display:none}

#releases.view-grid .release>.card-ribbon{
  position:absolute;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:132px;
  color:#fff;
  background:linear-gradient(135deg,#6f56d9,#967cff);
  box-shadow:0 7px 18px -8px rgba(15,8,40,.9);
  font-family:var(--sans);
  font-weight:850;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* Destacados: banderín encajado en el borde superior derecho. */
#releases.view-grid .release[data-tier="1"]>.card-ribbon,
#releases.view-grid .release[data-tier="2"]>.card-ribbon{
  top:10px;
  right:0;
  min-height:27px;
  padding:6px 13px 6px 20px;
  font-size:.57rem;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}

/* Fichas compactas: versión mínima del mismo lenguaje visual. */
#releases.view-grid .release[data-tier="3"]>.card-ribbon{
  top:0;
  right:0;
  min-height:22px;
  max-width:112px;
  padding:5px 9px 5px 14px;
  border-radius:0 12px 0 0;
  font-size:.49rem;
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);
}

#releases.view-grid .release[data-tier="3"].has-card-ribbon>.release-art+div{
  padding-right:108px;
}

/* Los tres accesos vuelven a tener posiciones independientes y predecibles. */
#releases.view-grid .release[data-tier="1"] .release-art .trailer,
#releases.view-grid .release[data-tier="2"] .release-art .trailer,
#releases.view-grid .release[data-tier="1"] .release-art .wish,
#releases.view-grid .release[data-tier="2"] .release-art .wish,
#releases.view-grid .release[data-tier="1"] .release-art .gcal,
#releases.view-grid .release[data-tier="2"] .release-art .gcal{
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:0;
}

/* YouTube y wishlist forman una pareja en la esquina superior derecha. */
#releases.view-grid .release[data-tier="1"] .release-art .trailer,
#releases.view-grid .release[data-tier="2"] .release-art .trailer{
  top:10px;
  right:10px;
  bottom:auto;
  left:auto;
}

#releases.view-grid .release[data-tier="1"] .release-art .wish,
#releases.view-grid .release[data-tier="2"] .release-art .wish{
  top:10px;
  right:45px;
  bottom:auto;
  left:auto;
}

/* Cuando hay banderín, la pareja baja una línea para no competir con él. */
#releases.view-grid .release[data-tier="1"].has-card-ribbon .release-art .trailer,
#releases.view-grid .release[data-tier="2"].has-card-ribbon .release-art .trailer,
#releases.view-grid .release[data-tier="1"].has-card-ribbon .release-art .wish,
#releases.view-grid .release[data-tier="2"].has-card-ribbon .release-art .wish{
  top:47px;
}

/* Google Calendar queda separado, abajo a la derecha. */
#releases.view-grid .release[data-tier="1"] .release-art .gcal,
#releases.view-grid .release[data-tier="2"] .release-art .gcal{
  top:auto;
  right:10px;
  bottom:10px;
  left:auto;
}

#releases.view-grid .release[data-tier="1"] .release-art .trailer svg,
#releases.view-grid .release[data-tier="2"] .release-art .trailer svg,
#releases.view-grid .release[data-tier="1"] .release-art .wish svg,
#releases.view-grid .release[data-tier="2"] .release-art .wish svg,
#releases.view-grid .release[data-tier="1"] .release-art .gcal svg,
#releases.view-grid .release[data-tier="2"] .release-art .gcal svg{
  display:block;
  margin:0;
}

/* ---------- Compra en Instant Gaming ---------- */
.grid-store-cta{display:none}

#releases.view-grid .release>.grid-store-cta{
  position:absolute;
  z-index:7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#ffd073;
  border:1px solid rgba(255,177,43,.48);
  background:rgba(18,14,9,.76);
  box-shadow:0 7px 18px -10px rgba(0,0,0,.9);
  font-family:var(--sans);
  font-weight:850;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(5px);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}

#releases.view-grid .release>.grid-store-cta:hover{
  color:#fff3d5;
  border-color:#ffb12b;
  background:rgba(116,69,0,.88);
  transform:translateY(-1px);
}

#releases.view-grid .release>.grid-store-cta:focus-visible{
  outline:2px solid #ffb12b;
  outline-offset:2px;
}

#releases.view-grid .release>.grid-store-cta svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* En los mosaicos grandes aparece como un CTA breve junto al calendario. */
#releases.view-grid .release[data-tier="1"]>.grid-store-cta,
#releases.view-grid .release[data-tier="2"]>.grid-store-cta{
  right:45px;
  bottom:10px;
  min-height:29px;
  padding:0 10px;
  border-radius:99px;
  font-size:.62rem;
}

#releases.view-grid .release[data-tier="1"]:not(:has(.release-art .gcal))>.grid-store-cta,
#releases.view-grid .release[data-tier="2"]:not(:has(.release-art .gcal))>.grid-store-cta{
  right:10px;
}

#releases.view-grid .release[data-tier="1"].has-grid-store .release-art+div,
#releases.view-grid .release[data-tier="2"].has-grid-store .release-art+div{
  padding-right:148px;
}

/* En las fichas pequeñas se reduce a una bolsa de compra para no saturar la fila. */
#releases.view-grid .release[data-tier="3"]>.grid-store-cta{
  right:8px;
  bottom:8px;
  width:30px;
  height:30px;
  padding:0;
  border-radius:9px;
}

#releases.view-grid .release[data-tier="3"]>.grid-store-cta span{
  display:none;
}

#releases.view-grid .release[data-tier="3"].has-grid-store>.release-art+div{
  padding-right:42px;
}

#releases.view-grid .release[data-tier="3"].has-card-ribbon.has-grid-store>.release-art+div{
  padding-right:112px;
}

/* El tráiler vuelve a mostrarse en las fichas compactas ahora que la miniatura
   tiene posición propia, pero permanece oculto en reposo y solo aparece al
   pasar el ratón (o al enfocarlo con teclado) para no tapar la carátula.
   El icono de Google Calendar se retira de estas fichas para no saturarlas. */
#releases.view-grid .release[data-tier="3"] .release-art .trailer{
  display:flex;
  top:50%;
  left:50%;
  width:24px;
  height:24px;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .18s ease;
}

#releases.view-grid .release[data-tier="3"] .release-art .trailer svg{
  width:13px;
  height:13px;
}

#releases.view-grid .release[data-tier="3"]:hover .release-art .trailer,
#releases.view-grid .release[data-tier="3"] .release-art .trailer:focus-visible{
  opacity:1;
}

#releases.view-grid .release[data-tier="3"] .release-art .gcal{
  display:none;
}

/* Toda la ficha compacta actúa como enlace a la wishlist; los iconos y el botón
   de compra conservan su propio destino y detienen la navegación de la tarjeta. */
#releases.view-grid .release[data-tier="3"].card-clickable{
  cursor:pointer;
}

#releases.view-grid .release[data-tier="3"].card-clickable:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media(max-width:640px){
  #releases.view-grid .release[data-tier="3"].has-card-ribbon>.release-art+div{
    padding-right:96px;
  }

  #releases.view-grid .release[data-tier="3"]>.card-ribbon{
    max-width:100px;
  }

  #releases.view-grid .release[data-tier="1"]>.grid-store-cta,
  #releases.view-grid .release[data-tier="2"]>.grid-store-cta{
    width:30px;
    padding:0;
  }

  #releases.view-grid .release[data-tier="1"]>.grid-store-cta span,
  #releases.view-grid .release[data-tier="2"]>.grid-store-cta span{
    display:none;
  }

  #releases.view-grid .release[data-tier="1"].has-grid-store .release-art+div,
  #releases.view-grid .release[data-tier="2"].has-grid-store .release-art+div{
    padding-right:50px;
  }
}