/* ============================================================================
 * slot-tile-bs-zero.css  (ITER 492 — 2026-05-15)
 *
 * BS-zero (bahissende302.com) tile DOM/CSS parity layer.
 * Loaded AFTER game-card-flash-fix.css to win cascade for tile aesthetics.
 *
 * BS canonical computed (mobile vp 360x740 sample):
 *   - Container .casinoCategoryGames: display:grid, gtc 175px 175px,
 *     gap 10px, padding 3px 0 0
 *   - Tile .casinoGameItemContent: 175 x 123.287, padding 0, bg transparent,
 *     border 0, border-radius 0 (image clips its own corners)
 *   - Image .casinoGameItemImage: absolute fill, object-fit cover, br 0
 *   - Fav icon .casinoGameItemFavBc: 14x14 at (10,10), color rgba(255,255,255,0.6)
 *
 * MR existing chain provides aspect-ratio 171/121 + transparent bg + br 8px.
 * This file refines to BS exact (175/123.287, br 0 on inner content) AND
 * carries BS class aliases so future BS-imported rules also match.
 *
 * Specificity: matches highest chain (html.mobile-root body.mobile-site
 * .slot-page-root #slotsGamesContainer #game-grid .game-item) so it wins
 * by source order against earlier slot-card-*.css files.
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * 1. Tile parent — BS .casinoGameItemContent zero-rect.
 *    Aspect 175/123.287 = 1.4196 (BS measured). Container br 0 on outer,
 *    image carries the rounded clip via 8px br on img.
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.casinoGameItemContent,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.casinoGameItemContent {
  aspect-ratio: 175 / 123.287 !important;
  /* ITER 631 (2026-05-21): ITER 627.1 bg-color + --cover-bg fallback REVERTED.
     Duplicate texture (parent bg + IMG bitmap) GPU memory budget'ı şişiriyordu
     → eviction daha erken tetikleniyordu. Sade transparent parent + IMG render. */
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
 * 2. Tile image — BS .casinoGameItemImage fill + rounded corners on image
 *    (BS uses border-radius:8px on image; outer content stays br:0).
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item > img,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item > img.casinoGameItemImage,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item > img.casinoGameItemImage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
 * 3. Grid container — BS exact: padding 3px 0 0, gap 10px, 2-col 1fr.
 *    MR currently uses padding 0 14px; BS uses no horizontal padding.
 *    Hybrid: keep 14px H-padding for safe-area on devices wider than BS sample,
 *    but switch to BS-exact (padding 3px 0 0) on viewports ≤ 380px (BS native).
 * -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid,
  html.mobile-root body.mobile-site .slot-page-root #game-grid,
  html.mobile-root body.mobile-site .slot-page-root .game-grid {
    padding: 3px 0 0 !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    gap: 10px !important;
  }
}

/* --------------------------------------------------------------------------
 * 4. Provider badge slot — BS has span.providerBadgeBlock as first child.
 *    MR doesn't render this but we reserve the selector for future parity.
 *    Default hidden until provider badge data is attached.
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .game-item > .providerBadgeBlock {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
 * 5. Fav icon BS alias — .casinoGameItemFavBc, top-left 10px, 14x14, dim white.
 *    MR uses .game-fav (top-right of .game-overlay-top). When overlay is closed,
 *    BS shows fav directly on tile. When overlay open, both BS and MR show fav
 *    in overlay top area. This rule applies BS positioning when fav element
 *    carries BS alias class.
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .game-item .casinoGameItemFavBc,
html.mobile-root body.mobile-site .slot-page-root .game-item .game-fav.casinoGameItemFavBc {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
 * 6. Tile transition — BS uses `all` shorthand, MR was using compound.
 *    Override compound to single `all` for BS hover/tap behavior parity.
 *    Duration 0.2s ease matches BS measurement.
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.casinoGameItemContent {
  transition: all 0.2s ease !important;
  -webkit-transition: all 0.2s ease !important;
}