/* Homepage game-card artwork and shared action geometry. */
#webApp .home-v3__game-card > .home-v3__enter,
#webApp[class] .home-v3__game-card > .home-v3__enter {
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: start !important;
  align-self: start !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #d8273e, #a70e28) !important;
  box-shadow: 0 7px 14px rgba(184, 20, 48, .2) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* The three 28 cards use the supplied finished artwork as their real surface. */
#webApp #home-game-fast .home-v3__game-card--art,
#webApp[class] #home-game-fast .home-v3__game-card--art {
  isolation: isolate !important;
  background: #f8fbff !important;
  border-color: rgba(110, 137, 182, 0.18) !important;
}

#webApp #home-game-fast .home-v3__game-card--art .home-v3__game-art--draw,
#webApp[class] #home-game-fast .home-v3__game-card--art .home-v3__game-art--draw {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

#webApp #home-game-fast .home-v3__game-card--art > div,
#webApp #home-game-fast .home-v3__game-card--art > .home-v3__enter {
  position: relative !important;
  z-index: 2 !important;
}

#webApp #home-game-fast .home-v3__game-card--art > div {
  max-width: 60% !important;
}

#webApp #home-game-fast .home-v3__game-card--art strong {
  color: #172b53 !important;
}

#webApp #home-game-fast .home-v3__game-card--art em {
  color: #66789a !important;
}

#webApp #home-game-fast .home-v3__game-card--art > .home-v3__hot,
#webApp #home-game-fast .home-v3__game-card--art > .home-v3__game-orb {
  display: none !important;
}

/* Popular games use the finished wide artwork as one fully clickable banner. */
#webApp #home-game-live .home-v3__game-grid,
#webApp[class] #home-game-live .home-v3__game-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#webApp #home-game-live .home-v3__game-card--banner,
#webApp[class] #home-game-live .home-v3__game-card--banner {
  min-height: 0 !important;
  aspect-ratio: 930 / 320 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0b1f3d !important;
  box-shadow: 0 8px 20px rgba(20, 34, 66, 0.18) !important;
}

#webApp #home-game-live .home-v3__game-card--banner .home-v3__game-art,
#webApp[class] #home-game-live .home-v3__game-card--banner .home-v3__game-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

#webApp #home-game-live .home-v3__game-card--banner > div,
#webApp #home-game-live .home-v3__game-card--banner > .home-v3__hot,
#webApp #home-game-live .home-v3__game-card--banner > .home-v3__enter,
#webApp #home-game-live .home-v3__game-card--banner > .home-v3__game-orb {
  display: none !important;
}

/* Lucide-style flame and mail silhouettes replace the old text glyphs. */
#webApp .home-v3__game-tab-icon--live,
#webApp .home-v3__game-tab-icon--redEnvelope {
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  font-size: 0 !important;
}

#webApp .home-v3__game-tab-icon--live::before,
#webApp .home-v3__game-tab-icon--redEnvelope::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

#webApp .home-v3__game-tab-icon--live::before {
  color: #f04438;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22c4.97 0 9-3.58 9-8 0-2.9-1.1-5.6-3-7.5-1.8 2.8-4.5 4.5-7 4.5 0-2.9-1.5-5.5-4-7-2 2-3 4.5-3 7a8 8 0 0 0 8 11Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22c4.97 0 9-3.58 9-8 0-2.9-1.1-5.6-3-7.5-1.8 2.8-4.5 4.5-7 4.5 0-2.9-1.5-5.5-4-7-2 2-3 4.5-3 7a8 8 0 0 0 8 11Z'/%3E%3C/svg%3E");
}

#webApp .home-v3__game-tab-icon--redEnvelope::before {
  color: #30343b;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

@media (max-width: 380px) {
  #webApp #home-game-live .home-v3__game-grid,
  #webApp[class] #home-game-live .home-v3__game-grid {
    gap: 9px !important;
  }

  #webApp .home-v3__game-tab-icon--live,
  #webApp .home-v3__game-tab-icon--redEnvelope {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }
}
