/* Keep the baked-in game titles visible, without cropping or extra captions. */
.game-card-grid-home .game-showcase-card {
  min-height: 0;
  aspect-ratio: 1;
}

.game-card-grid-home .game-showcase-artwork {
  display: block;
  background: #090b16;
}

.game-card-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.game-card-artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* LoL's embedded logo ends at 97% of the source; the other two end at 95%. */
.game-showcase-lol.game-showcase-artwork {
  background: #07101b;
}

.game-showcase-lol .game-card-artwork {
  transform: translateY(-2.2%);
}

.game-card-grid-home .game-showcase-artwork::before {
  content: none;
}

.game-showcase-artwork {
  --service-accent: 172, 145, 255;
}

.game-showcase-valorant.game-showcase-artwork {
  --service-accent: 255, 113, 128;
}

.game-showcase-tft.game-showcase-artwork {
  --service-accent: 110, 193, 255;
}

/* Floating pills preserve the original menu layout and the game logo below. */
.game-showcase-artwork .game-service-overlay {
  padding: 16px clamp(12px, 1.4vw, 22px) 26%;
  background: linear-gradient(180deg, rgba(6, 9, 22, .32), rgba(6, 9, 22, .58));
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.game-showcase-artwork .game-service-link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 390px;
  gap: 12px 10px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.game-showcase-artwork .game-service-link {
  display: inline-flex;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 14px 19px;
  border: 1px solid rgba(var(--service-accent), .6);
  border-radius: 999px;
  background: linear-gradient(160deg, #100d29, #08061b);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f0eef9;
  font-size: clamp(.92rem, 1vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.game-showcase-artwork .game-service-link:is(:hover, :focus-visible) {
  border-color: rgba(var(--service-accent), .7);
  background: linear-gradient(160deg, #1b143a, #100b27);
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--service-accent), .12), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translateY(-2px);
}

.game-showcase-artwork .game-service-link:focus-visible {
  outline: 2px solid rgb(var(--service-accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .game-card-grid-home .game-showcase-artwork,
  .game-showcase-artwork .game-service-overlay,
  .game-showcase-artwork .game-service-link {
    transition: none;
  }
}