/* V107 — Trending Games compact grid.
   public5WhiteGreenHome-weBZEvkV.css collapses .lottery-featured to a single
   column below 520px (every phone). Keep the two-column layout at all widths
   (WINGO + MOTO RACING left, K3 / 5D / TRX stacked right).

   Height is owned by the left column: each featured card is 2 / 1 (the ratio
   Vue already sets). The right column stretches to that height and splits into
   three equal rows. Do not use 3 / 2 or 1fr on the left — that is what blew
   the block up. #app prefix beats the theme's media-query and !important
   image rules. */

#app .lottery-featured {
  display: grid !important;
  grid-template-columns: 1.52fr 1fr !important;
  grid-template-rows: auto !important;
  gap: .21333rem !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

#app .lottery-featured__left,
#app .lottery-featured__right {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .21333rem !important;
  min-width: 0;
  min-height: 0;
}

#app .lottery-featured__left {
  grid-template-rows: auto auto !important;
  height: auto;
}

#app .lottery-featured__right {
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  height: 100%;
  align-self: stretch;
}

#app .lottery-featured .lottery-card,
#app .lottery-featured .game-card {
  flex: none !important;
  gap: 0 !important;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#app .lottery-featured__left .lottery-card--featured,
#app .lottery-featured__left .game-card {
  height: auto;
}

#app .lottery-featured__right .lottery-card--support,
#app .lottery-featured__right .game-card {
  height: 100%;
  min-height: 0;
}

/* Left: compact 2 / 1, size from width. No flex-grow. */
#app .lottery-featured__left .lottery-card--featured .game-card__img,
#app .lottery-featured__left .game-card__img {
  aspect-ratio: 2 / 1 !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* Right: fill the 1/3 row. Ignore Vue's 16 / 9 inline ratio. */
#app .lottery-featured__right .lottery-card--support .game-card__img,
#app .lottery-featured__right .game-card__img {
  aspect-ratio: auto !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}

#app .lottery-featured .game-card__img > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Theme mobile branch made the third support card span both columns. */
#app .lottery-featured__right .game-card:last-child {
  grid-column: auto !important;
}

/* Title + All sit on the same edges as the grid. */
#app .lobby-item--lottery .lobby-item__head {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}