/* infini88 — provider tiles are 100% backoffice-managed (/game-display-infini88).
 *
 * WHY THIS FILE EXISTS
 * A robotaset provider tile is not one picture but THREE image slots, and the
 * theme ships each of them as a CSS sprite keyed by the provider slug. Worse,
 * the artwork and logo elements SWAP between devices:
 *
 *   desktop  li.game.sub.{slug}
 *            └ .icon-menu-wrapper        (per-provider backdrop art)
 *              ├ img.game-front-tag      LABEL   corner badge
 *              ├ .game-front             ARTWORK .futuristic .slot .pgs .game-front
 *              └ a.game-front-type       LOGO    .futuristic .gameNav .pgs a
 *
 *   mobile   li.{slug}                   (per-provider backdrop art)
 *            ├ img.game-front-tag        LABEL   corner badge
 *            └ a.game-front-type         ARTWORK .game-front-menu .slot .pgs .game-front-type
 *              └ i.game-front-icon       LOGO    .game-front-menu .pgs .game-front-icon
 *
 * Blanking only some layers leaves the rest showing vendor art. So: every
 * sprite is switched off here, and the operator's three uploads are painted
 * inline (with !important) onto the layers above — see provider_tile_images()
 * / provider_tile_bg() in SiteHelper.php and the four tile blades.
 *
 * Scoped to `.i88-tile`, which those blades emit, so the rest of the theme —
 * bonus lists, history, favourites, avatars — keeps its sprites.
 */

/* 1. Kill every vendor sprite layer on the tile. */
.i88-tile,
.i88-tile .game-front,
.i88-tile a.game-front-type,
.i88-tile .game-front-icon {
    background-image: none !important;
}

/* 2. Desktop: the artwork sprite was nudged 15px left to line up inside the
      pill; an uploaded image must sit centred instead. */
.i88-tile .game-front {
    left: 0 !important;
}

/* 3. Desktop: keep the yellow gradient pill, but drop the per-provider backdrop
      (.futuristic .pgr .icon-menu-wrapper) that would sit behind the artwork.
      Re-declared rather than blanked, so the pill itself survives. */
.i88-tile .icon-menu-wrapper {
    background-image: linear-gradient(
        90deg,
        rgb(255 194 79 / 0.5) 0,
        rgb(249 239 157 / 0.5) 50%,
        rgb(255 195 80 / 0.5) 100%
    ) !important;
}

/* 4. Mobile: `.game-front-icon` is the 39px bottom strip that holds the LOGO.
      Its dark plate is part of the design, so only the sprite is dropped
      (rule 1) — the operator's logo is painted on top inline. */

/* 5. Desktop FOOTER strip (#ProviderList). The theme paints a sprite sheet on
      `#ProviderList a` plus a per-slug rule for some providers; the operator's
      "Logo Provider" upload is painted inline instead. The <a> keeps its
      padding-based 80x50 box. */
.i88-footer-providers a {
    background-image: none !important;
}

/* 6. Desktop /game-group/{cat}: tiles are Bootstrap `.col-md-3` columns that
      float with no bottom spacing, so wrapped rows of provider pills sit flush
      (no vertical gap). Add a row gap. Scoped to `.game-group .row` so the mobile
      list (ul.provider-item-list > li.col-4) is untouched. */
.game-group .row > .i88-tile {
    margin-bottom: 30px !important;
}

/* 7. Mobile provider grid — applies to BOTH the home .game-front-menu and the
      /game-group page (same vendor markup: .game-front-menu .provider-item-list
      > li.col-4.col-sm-2). The markup already carries Bootstrap col-4 (3-up on
      phones) / col-sm-2 (6-up ≥576px), but the vendor pins each tile to a fixed
      115px inline-block, so only ~2 fit. Make the list a flex row and drop the
      fixed width + inline-block so the col-* flex-basis governs, as the classes
      intend. The .col-4/.col-sm-2 15px side padding stays as the gutter; add a
      bottom margin so wrapped rows breathe. Scoped to .game-front-menu (mobile
      only; desktop uses .futuristic .gameNav). */
.game-front-menu .provider-item-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
}
.game-front-menu .provider-item-list > li {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin-bottom: 14px !important;
}