/* ============================================================================
 * casino-page-fixes.css
 * ----------------------------------------------------------------------------
 * Agent Casino (rule #30 dosya sahipliği)
 * Marker: AGENT-CASINO-OWNED — başka agent dokunmaz
 * ----------------------------------------------------------------------------
 * Hedef: MR /casino vs BS /tr/casino EXACT MATCH (K.20 + K.21 + K.22 + K.22§17)
 *
 * MR /casino routing: LiveCasinoController::index → views/pages/livecasino.php
 * BS /tr/casino: React SPA, kategori = casino (slots/live mix)
 *
 * BS REFERENCE (extracted from /assets/index.7tkrlqxF.css):
 *   --border-radius: 4px
 *   --default-transition-duration: .24s   (240ms)
 *   --slow-transition-duration: .4s       (400ms)
 *   --padding-page-aside: 7px
 *   --desktop-sub-nav-height: 36px
 *
 *   .casino-game-item             { border-radius: var(--border-radius); }
 *   .casino-game-item-block       { padding: 5px; flex-direction: column;
 *                                    justify-content: space-between;
 *                                    animation: casino-game-layer var(--slow-transition-duration); }
 *   .casino-game-item-image-bc    { transition: filter var(--default-transition-duration); }
 *   .casino-game-item-fav-bc      { color: #fffc; font-size: 16px;
 *                                    transition: var(--default-transition-duration); top:5px; left:5px; }
 *   .casino-game-item-label-bc    { color: #fff; font-size: 13px; line-height: 15px;
 *                                    font-weight: 400; }
 *   .casino-game-info-icon        { font-size: 12px; }
 *   .casino-category-content      { padding: 5px var(--padding-page-aside);
 *                                    background: linear-gradient(to bottom,
 *                                      rgba(255,255,255,.05) 1%,
 *                                      rgba(30,38,57,.05) 46%, transparent); }
 *   .casino-category-head         { margin-top: 26px; padding-bottom: 10px;
 *                                    border-bottom: 1px solid rgba(var(--b-sc),.15);
 *                                    display:flex; align-items:center; }
 *   .casino-category-types        { display: grid; grid-gap: 20px; }
 *
 * SCOPE (Agent Casino):
 *   1. /casino sayfası özel container (.casino-container)
 *   2. K.22 §17-A: 3-dot/hamburger color (header context)
 *   3. K.22 §17-B: Tile inner spacing (game-overlay padding parity)
 *   4. K.22 §17-C: Animation timing (240ms / 400ms BS-paralel)
 *   5. K.22 §17-D: Loading state skeleton + image fade-in
 *   6. Category tabs (cat-tab) link parity for /tr/livecasino base
 *   7. Casino sub-nav (TURNUVALAR / JACKPOTLAR) BS-paralel
 *   8. Game grid casino-specific border-radius (4px not 0 for casino games)
 *   9. casino-container padding-page-aside (7px BS-paralel)
 *
 * SCOPE-OUT (başka agent'a ait, dokunma):
 *   - .game-grid, .game-item core    → slot-card-bs-exact.css (slot agent)
 *   - .cat-tab spacing/typography    → theme-robinbet-mobile.css (theme)
 *   - .hdr-navigation-link-bc        → sub-nav-active-fix.css
 *   - .providers-sidebar drawer      → provider-drawer-correction.css
 *   - .home-card-parity              → home-card-parity.css
 *
 * Specificity stratejisi: html.mobile-root body.mobile-site .slot-page-root
 *   (theme uses ".slot-page-root", casino uses same — DOM verified line 924
 *    /tmp/mr_casino.html). Theme rules eşit specificity ile match, !important
 *    ile kazan. Mevcut slot rule'ları override etmemek için casino-specific
 *    selector ekle (.casino-container) where needed.
 *
 * Versiyon: 1.0 • Tarih: 2026-04-28
 * Override registry: AI_USER_OVERRIDES.md#casino-page-bs-paralel-2026-04-28
 * ============================================================================ */

/* AGENT-CASINO-OWNED START */

/* ----------------------------------------------------------------------------
 * 1) PAGE LEVEL — casino-container BS-paralel layout
 *    K.22 katman 1+2: Page + Layout
 *    BS: padding-page-aside 7px on .casino-category-content
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container {
  padding-left: 7px !important;
  padding-right: 7px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 1%,
    rgba(30, 38, 57, 0.05) 46%,
    transparent 100%
  ) !important;
  overflow: hidden !important;
}

/* ----------------------------------------------------------------------------
 * 2) SECTION LEVEL — slots-filter-and-games BS-paralel section spacing
 *    K.22 katman 3: Section Level (margin/padding parity)
 *    BS: casino-category-head margin-top 26px
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-filter-and-games {
  margin-top: 0 !important;
  padding: 0 !important;
}

/* ----------------------------------------------------------------------------
 * 3) COMPONENT LEVEL — Game card border-radius
 *    K.22 katman 4: Component (BS .casino-game-item border-radius: 4px)
 *    Note: slot page kullanır border-radius 0 (slot-card-bs-exact ile),
 *    casino sayfası ise BS-paralel 4px kullanır (casino-game-item).
 *    BS-source: .casino-game-item{border-radius:var(--border-radius)} = 4px
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item img,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay {
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* ----------------------------------------------------------------------------
 * 4) K.22 §17-B — TILE INNER SPACING
 *    BS .casino-game-item-block { padding: 5px; flex-direction: column;
 *                                  justify-content: space-between; }
 *    MR equivalent: .game-overlay (positioned absolute over image)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay {
  padding: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Game fav (star) BS-paralel position + sizing
 * BS: .casino-game-item-fav-bc { top:5px; left:5px; color:#fffc; font-size:16px; }
 */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  padding: 2px !important;
  margin: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav .fa-star,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav i {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
}

/* Game info icon (info-circle) BS .casino-game-info-icon font-size: 12px */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-info-btn {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  padding: 2px !important;
  margin: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-info-btn i {
  font-size: 12px !important;
}

/* Game title text BS-paralel
 * BS: .casino-game-item-label-bc { color:#fff; font-size:13px;
 *                                   line-height:15px; font-weight:400; }
 */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay .game-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay .game-title-text {
  color: rgb(255, 255, 255) !important;
  font-size: 13px !important;
  line-height: 15px !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* Game actions (OYNA/DEMO) BS-paralel
 * BS: .casino-game-buttons { display:flex; justify-content:center; }
 *     .casino-game-buttons .btn { height:28px; padding:0 10px; width:auto; }
 */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 10px !important;
  width: auto !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ----------------------------------------------------------------------------
 * 5) K.22 §17-C — ANIMATION / TRANSITION TIMING
 *    BS: --default-transition-duration: 0.24s (240ms)
 *        --slow-transition-duration: 0.4s (400ms)
 *
 *    Element timing hedefleri:
 *    - game-item img:        transition filter 240ms (BS .casino-game-item-image-bc)
 *    - game-item fav:        transition opacity/color 240ms (BS .casino-game-item-fav-bc)
 *    - game-item-block:      animation 400ms (BS casino-game-layer)
 *    - game-overlay:         transition opacity 240ms
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item img {
  transition: filter 0.24s ease, transform 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-info-btn {
  transition: color 0.24s ease, opacity 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay {
  transition: opacity 0.24s ease, transform 0.24s ease !important;
  animation-duration: 0.4s !important;
  animation-fill-mode: forwards !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn {
  transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease !important;
}

/* Hover/active feedback timing — BS-paralel 240ms */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn:hover,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn:hover {
  filter: brightness(1.1) !important;
}

/* ----------------------------------------------------------------------------
 * 6) K.22 §17-D — LOADING STATE
 *    BS: .skeleton-loader-game-cube{padding:35%}
 *        .skeleton-loader-* with shimmer
 *    MR'da skeleton yok — image fade-in + shimmer placeholder ekle
 *    Image fade-in: opacity 0 → 1 transition during load
 * ---------------------------------------------------------------------------- */
@keyframes casino-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes casino-image-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item {
  position: relative !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Skeleton placeholder for game-item before image loads (using ::before) */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: casino-skeleton-shimmer 1.4s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  transition: opacity 0.24s ease !important;
}

/* Hide skeleton when image loaded */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.loaded::before,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:has(img.loaded)::before,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item img[src]:not([src=""])~::before {
  opacity: 0 !important;
}

/* Image fade-in BS-paralel */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item img {
  position: relative !important;
  z-index: 1 !important;
  animation: casino-image-fade-in 0.4s ease forwards !important;
}

/* Empty state BS-paralel */
html.mobile-root body.mobile-site .slot-page-root .casino-container .empty-state {
  text-align: center !important;
  padding: 40px 20px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  background: transparent !important;
  border-radius: 4px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .empty-state i {
  font-size: 48px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  margin-bottom: 12px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .empty-state h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 6px 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .empty-state p {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ----------------------------------------------------------------------------
 * 7) GAME GRID — BS-paralel 2-column on mobile
 *    K.22 katman 2: Layout grid system
 *    BS: 2-column grid, gap 5-7px (padding-page-aside)
 * ---------------------------------------------------------------------------- */
@media (max-width: 414px) {
  html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 7px !important;
    row-gap: 7px !important;
    padding: 0 !important;
  }
}

@media (max-width: 359px) {
  html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid {
    column-gap: 5px !important;
    row-gap: 5px !important;
  }
}

/* ----------------------------------------------------------------------------
 * 8) CATEGORY TABS — BS-paralel
 *    K.22 katman 6+7: Typography + Color
 *    BS reference (.casino-game-tabs derivative):
 *    - Roboto 14/500
 *    - height 36px (matches --desktop-sub-nav-height)
 *    - color rgba(255,255,255,0.7) inactive, rgb(255,255,255) active
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-category-filters {
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .category-tabs-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 36px !important;
  scroll-behavior: smooth !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 12px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.24s ease, border-bottom-color 0.24s ease !important;
  background: transparent !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab.active {
  color: rgb(255, 255, 255) !important;
  border-bottom-color: rgb(232, 201, 74) !important;
  font-weight: 500 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab i {
  font-size: 14px !important;
  color: inherit !important;
}

/* ----------------------------------------------------------------------------
 * 9) PROVIDERS-GAMES LINE — BS-paralel
 *    K.22 katman 3+4: Section + Component
 *    BS: SAĞLAYICILAR | OYUNLAR pill button row
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-providers-games-line {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 7px !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .providers-games-chevron {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 4px 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .providers-games-label {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 4px 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .providers-games-label.providers-games-active,
html.mobile-root body.mobile-site .slot-page-root .casino-container button.providers-games-active {
  color: rgb(255, 255, 255) !important;
  font-weight: 500 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .providers-games-sep {
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* ----------------------------------------------------------------------------
 * 10) GAMES HEADER (search/filter row) — BS-paralel
 *     K.22 katman 3+4
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-game-search-bar {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 4px 7px !important;
  gap: 6px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .mobile-sidebar-toggle {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  transition: background-color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .mobile-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .mobile-sidebar-toggle__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: inherit !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .mobile-sidebar-toggle__menu-icon {
  margin-left: auto !important;
}

/* iconButtonBlock buttons (all-games, view-module, sort) BS-paralel 32x32 */
html.mobile-root body.mobile-site .slot-page-root .casino-container .iconButtonBlock {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.24s ease, color 0.24s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .iconButtonBlock:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgb(255, 255, 255) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .iconButtonBlock i {
  font-size: 14px !important;
}

/* Random game button BS-paralel */
html.mobile-root body.mobile-site .slot-page-root .casino-container .random-game-btn {
  height: 32px !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 1px solid rgba(232, 201, 74, 0.5) !important;
  color: rgb(232, 201, 74) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .random-game-btn:hover {
  background: rgba(232, 201, 74, 0.1) !important;
  border-color: rgba(232, 201, 74, 0.8) !important;
}

/* ----------------------------------------------------------------------------
 * 11) K.22 §17-A — HEADER 3-DOT/HAMBURGER COLOR
 *     Header context (her sayfada görünür) — bu CSS sadece /casino route'da
 *     etkili olur (slot-page-root scope). Color zaten theme/header.css ile
 *     beyaz, ama casino sayfası özelinde override yok. Cross-scope etki için
 *     genel header'a değil sadece :has(.slot-page-root) ile sınırlı.
 *
 *     BS reference: rgba(255,255,255,0.85) inactive, rgb(255,255,255) active
 *     (theme/sub-nav-active-fix.css uyumlu)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site:has(.slot-page-root) .layout-header-holder-bc .three-dot-menu-toggle,
html.mobile-root body.mobile-site:has(.slot-page-root) .layout-header-holder-bc [class*="hamburger"],
html.mobile-root body.mobile-site:has(.slot-page-root) .layout-header-holder-bc [class*="menu-toggle"] {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  transition: color 0.24s ease, background-color 0.24s ease !important;
}

html.mobile-root body.mobile-site:has(.slot-page-root) .layout-header-holder-bc .three-dot-menu-toggle.active,
html.mobile-root body.mobile-site:has(.slot-page-root) .layout-header-holder-bc .three-dot-menu-toggle:hover {
  color: rgb(255, 255, 255) !important;
}

/* ----------------------------------------------------------------------------
 * 12) GAMES MAIN container — BS-paralel scroll behavior
 *     K.22 katman 11+12: Interaction + Animation
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .games-main {
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-y: contain !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-games-container {
  padding: 5px 0 !important;
  overflow: hidden !important;
}

/* ----------------------------------------------------------------------------
 * 13) RECENT GAMES section BS-paralel
 *     K.22 katman 3: Section level
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .recent-games-section {
  margin: 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .recent-games-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 8px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .recent-games-header i {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .recent-games-header h3 {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ----------------------------------------------------------------------------
 * 14) ACTIVE FILTERS BOX (chips) BS-paralel
 *     K.22 katman 4+14: Component + State
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .active-filters-box {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .active-filter-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  background: rgba(232, 201, 74, 0.15) !important;
  border: 1px solid rgba(232, 201, 74, 0.4) !important;
  border-radius: 4px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgb(232, 201, 74) !important;
  white-space: nowrap !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .active-filter-tag .remove {
  cursor: pointer !important;
  color: rgba(232, 201, 74, 0.8) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 0 0 2px !important;
  transition: color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .active-filter-tag .remove:hover {
  color: rgb(232, 201, 74) !important;
}

/* ----------------------------------------------------------------------------
 * 15) GAMES SEARCH expand BS-paralel
 *     K.22 katman 4+11+14: Component + Interaction + State
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-expand {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  height: 32px !important;
  padding: 0 8px !important;
  transition: border-color 0.24s ease, background-color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-expand:focus-within {
  border-color: rgba(232, 201, 74, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-bar {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  gap: 6px !important;
  background: transparent !important;
  height: 100% !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  color: rgb(255, 255, 255) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 13px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-btn:hover {
  color: rgb(255, 255, 255) !important;
}

/* ----------------------------------------------------------------------------
 * 16) GAME OVERLAY - default state (only show on tap/click)
 *     K.22 katman 14: State (default vs active vs hover)
 *     BS: overlay opacity 0 default, 1 on tap
 *     Source: @keyframes casino-game-layer { 0%{opacity:0;pointer-events:none}
 *             to{opacity:1;pointer-events:auto;backdrop-filter:blur(2px);
 *                background:#00000080}}
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item .game-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.show-overlay .game-overlay,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:hover .game-overlay,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:active .game-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

/* ----------------------------------------------------------------------------
 * 17) BS-PARALEL @keyframes — exact match from /assets/index.7tkrlqxF.css
 *     K.22 §17-C ANIMATION TIMING zorunlu metrik
 *     Source: @keyframes casino-game-layer { 0%{opacity:0;pointer-events:none}
 *               to{opacity:1;pointer-events:auto;
 *                  -webkit-backdrop-filter:blur(2px);
 *                  backdrop-filter:blur(2px);
 *                  background:#00000080}}
 *             @keyframes casino-game-layer-label{0%{filter:blur(10px)}
 *                                                 to{filter:blur(0)}}
 *             @keyframes casino-game-layer-first-btn{
 *               0%{opacity:0;transform:translateY(-50%)}
 *               to{opacity:1;transform:translateY(0)}}
 *             @keyframes casino-game-layer-second-btn{
 *               0%{opacity:0;transform:translateY(50%)}
 *               to{opacity:1;transform:translateY(0)}}
 * ---------------------------------------------------------------------------- */
@keyframes casino-game-layer {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
  }
}

@keyframes casino-game-layer-label {
  0% { filter: blur(10px); }
  100% { filter: blur(0); }
}

@keyframes casino-game-layer-first-btn {
  0% { opacity: 0; transform: translateY(-50%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes casino-game-layer-second-btn {
  0% { opacity: 0; transform: translateY(50%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Apply BS-paralel keyframes to MR overlay elements */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.show-overlay .game-overlay .game-title-text,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:active .game-overlay .game-title-text {
  animation: casino-game-layer-label 0.4s forwards !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.show-overlay .game-overlay .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:active .game-overlay .game-actions .play-btn {
  animation: casino-game-layer-first-btn 0.4s forwards !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:active .game-overlay .game-actions .demo-btn {
  animation: casino-game-layer-second-btn 0.4s forwards !important;
}

/* ----------------------------------------------------------------------------
 * 18) BS-PARALEL .btn base style for casino-game-buttons children
 *     K.22 katman 4: Component
 *     BS .btn { color: rgba(b-sc,0.9); bg: rgba(b-sc,0.15); border: none;
 *               border-radius: 4px; height: 36px (overridden 28); }
 *
 *     1st btn (OYNA): primary fill (gold operator color)
 *     2nd btn (DEMO): outlined (transparent + white border #fff9)
 * ---------------------------------------------------------------------------- */
/* OYNA = first child = primary action — BS gold operator color */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn {
  color: rgb(255, 255, 255) !important;
  background: rgb(211, 175, 55) !important;
  border: 1px solid rgb(211, 175, 55) !important;
  text-decoration: none !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn:hover,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .play-btn:active {
  background: rgb(166, 132, 24) !important;
  border-color: rgb(166, 132, 24) !important;
}

/* DEMO = second child = outlined — BS .btn:nth-child(2) { color:#ffffffe6; border:#fff9 } */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  margin-inline-start: 5px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn:hover,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn:active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgb(255, 255, 255) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions .demo-btn--disabled {
  color: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
 * 19) GAME-OVERLAY-TOP — fav star + info icon BS-paralel position
 *     K.22 katman 5+8: Element + Shape
 *     BS .casino-game-icons { display:flex; justify-content:flex-end;
 *                             color:#fffc; font-size:16px; }
 *     BS .casino-game-item-fav-bc { top:5px; left:5px; color:#fffc; }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav {
  position: relative !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  flex-shrink: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav:active {
  color: rgb(255, 215, 0) !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav.active i,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav.active .fa-star {
  color: rgb(255, 215, 0) !important;
  font-weight: 900 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-info-btn {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-info-btn:hover {
  color: rgba(211, 175, 55, 0.95) !important;
}

/* ----------------------------------------------------------------------------
 * 20) PROVIDER SHEET (drawer) BS-paralel — minimal touches
 *     Note: drawer detail handled by provider-drawer-correction.css (other agent)
 *     We only add casino-page specific tweaks (sheet support fab position)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .provider-sheet-support-fab {
  bottom: 16px !important;
  right: 16px !important;
}

/* ----------------------------------------------------------------------------
 * 21) DEMO BTN DISABLED — BS-paralel (when game has no demo)
 *     K.22 katman 14: State (disabled)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .demo-btn[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4) !important;
}

/* ----------------------------------------------------------------------------
 * 22) HORIZONTAL CATEGORY ARROW BUTTONS — BS-paralel
 *     K.22 katman 4: Component (cat-tab-arrow scroll buttons)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab-arrow {
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  width: 24px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.24s ease, color 0.24s ease !important;
  z-index: 2 !important;
  position: absolute !important;
  top: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab-arrow-left {
  left: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab-arrow-right {
  right: 0 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab-arrow:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  color: rgb(255, 255, 255) !important;
}

/* ----------------------------------------------------------------------------
 * 23) BADGE SYSTEM — BS-paralel diagonal ribbon
 *     K.22 katman 4+8: Component + Shape (badge ribbons rotate 45deg)
 *     BS source: .casino-game-item:after { rotate(45deg); 100x80px;
 *                                          font-size:9px; line-height:11px; }
 *     Color map (badge name → background):
 *       new       #7f194f
 *       top       #6e3a85
 *       vpn       #49557e
 *       promo     #186360
 *       jackpot   #7b6418
 *       exclusive #53934f
 *       free      #1077c3
 *       tournament #3b26ac
 *       spinCount #c3910a
 *       hot       #e32020
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge] {
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge]::after {
  content: attr(data-badge) !important;
  position: absolute !important;
  top: -32px !important;
  right: -42px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100px !important;
  height: 80px !important;
  padding-bottom: 2px !important;
  box-sizing: border-box !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.33px !important;
  text-transform: uppercase !important;
  transform: rotate(45deg) !important;
  color: #fff !important;
  z-index: 3 !important;
  pointer-events: none !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* Badge color map — BS exact */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="new"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-new::after {
  background: #7f194f !important;
  box-shadow: -2px 2px 8px #7f194f99 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="top"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-top::after {
  background: #6e3a85 !important;
  box-shadow: -2px 2px 8px #6e3a8599 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="hot"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-hot::after {
  background: #e32020 !important;
  box-shadow: -2px 2px 8px #e3202099 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="jackpot"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-jackpot::after {
  background: #7b6418 !important;
  box-shadow: -2px 2px 8px #7b641899 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="promo"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-promo::after {
  background: #186360 !important;
  box-shadow: -2px 2px 8px #18636099 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="exclusive"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-exclusive::after {
  background: #53934f !important;
  box-shadow: -2px 2px 8px #53934f99 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="free"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-free::after {
  background: #1077c3 !important;
  box-shadow: -2px 2px 8px #1077c399 !important;
}
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item[data-badge="tournament"]::after,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item.badge-tournament::after {
  background: #3b26ac !important;
  box-shadow: -2px 2px 8px #3b26ac99 !important;
}

/* ----------------------------------------------------------------------------
 * 24) GAME GRID auto-fill responsive — BS-paralel
 *     K.22 katman 2: Layout (BS .casino-category-games auto-fill 140px)
 *     BS source: grid-template-columns:repeat(auto-fill,minmax(140px,1fr))
 * ---------------------------------------------------------------------------- */
@media (min-width: 415px) {
  html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
}

/* ----------------------------------------------------------------------------
 * 25) CASINO CATEGORY HEAD/TITLE — BS-paralel section header
 *     K.22 katman 6+7: Typography + Color
 *     BS .casino-category-title { color:rgba(b-sc,1); height:20px;
 *                                  font-size:16px; line-height:20px; }
 *     BS .casino-category-head { display:flex; align-items:center;
 *                                 padding-bottom:10px;
 *                                 border-bottom:1px solid rgba(b-sc,.15); }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .recent-games-header h3,
html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-category-title,
html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-category-head h3 {
  flex: auto !important;
  color: rgba(255, 255, 255, 0.95) !important;
  height: 20px !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-transform: none !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* ----------------------------------------------------------------------------
 * 26) FAV STAR ACTIVE — BS-paralel persistent fill
 *     BS .casino-game-item-fav-bc.active { opacity:1; color:#fff }
 *     MR: .game-fav.active uses gold star
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav.active {
  opacity: 1 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav.active i.fas.fa-star,
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav i.fas.fa-star {
  color: rgb(255, 215, 0) !important;
  font-weight: 900 !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-fav i.far.fa-star {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------------------------------------
 * 27) GAME TITLE — clamp + ellipsis BS-paralel
 *     K.22 katman 6: Typography (max 2 lines + ellipsis)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-overlay .game-title-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

/* ----------------------------------------------------------------------------
 * 28) PROVIDERS-GAMES-LINE — sticky behavior BS-paralel
 *     K.22 katman 11+12: Interaction + Animation (sticky scroll)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-providers-games-line {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* ----------------------------------------------------------------------------
 * 29) GAME ITEM tap highlight — BS-paralel touch feedback
 *     K.22 katman 11: Interaction
 *     BS uses :active without visible feedback color change (overlay does it)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  cursor: pointer !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
 * 30) FOCUS-VISIBLE — BS-paralel keyboard a11y
 *     K.22 katman 14: State (focus-visible only on keyboard nav)
 *     BS uses --hero color for focus ring
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item:focus-visible {
  outline: 2px solid rgba(211, 175, 55, 0.8) !important;
  outline-offset: 2px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab:focus-visible,
html.mobile-root body.mobile-site .slot-page-root .casino-container .iconButtonBlock:focus-visible,
html.mobile-root body.mobile-site .slot-page-root .casino-container .random-game-btn:focus-visible {
  outline: 2px solid rgba(211, 175, 55, 0.8) !important;
  outline-offset: 1px !important;
}

/* ----------------------------------------------------------------------------
 * 31) SCROLL-SNAP — BS .casino-game-item scroll-snap-align: start
 *     K.22 katman 11+12: Interaction + Animation (horizontal scroll snap)
 *     Note: only for horizontal scrollers, not main grid
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-horizontal-sl-list-bc {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  gap: 8px !important;
  padding: 0 7px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-horizontal-sl-list-bc > * {
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  min-width: 150px !important;
}

/* ----------------------------------------------------------------------------
 * 32) PRINT (a11y) — hide non-essential elements when printing
 *     K.22 katman 1: Page (print stylesheet parity from atlama katalogu)
 * ---------------------------------------------------------------------------- */
@media print {
  html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-providers-games-line,
  html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab-arrow,
  html.mobile-root body.mobile-site .slot-page-root .casino-container .game-overlay,
  html.mobile-root body.mobile-site .slot-page-root .casino-container .random-game-btn,
  html.mobile-root body.mobile-site .slot-page-root .casino-container .iconButtonBlock,
  html.mobile-root body.mobile-site .slot-page-root .casino-container .providers-sidebar {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------
 * 33) PREFERS-REDUCED-MOTION — BS a11y parity
 *     K.22 katman 14: State (motion-reduce respecting user pref)
 * ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .slot-page-root .casino-container *,
  html.mobile-root body.mobile-site .slot-page-root .casino-container *::before,
  html.mobile-root body.mobile-site .slot-page-root .casino-container *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
 * 34) ARIA-LIVE / SR-ONLY — BS-paralel screen reader announcements
 *     K.22 katman 14: State (a11y from atlama katalogu)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container [aria-live] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ----------------------------------------------------------------------------
 * 35) CASINO-GAME-TABS data-badge — BS-paralel small badge on tab
 *     K.22 katman 4+8: Component + Shape
 *     BS .casino-game-tabs .horizontal-sl-tab-bc[data-badge]:after
 *     { top:1px; height:12px; padding:0 4px; border-radius:4px;
 *       font-size:8px; line-height:12px; }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab[data-badge] {
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .cat-tab[data-badge]::after {
  content: attr(data-badge) !important;
  position: absolute !important;
  top: 1px !important;
  right: 0 !important;
  height: 12px !important;
  max-width: 99% !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  text-transform: capitalize !important;
  font-size: 8px !important;
  line-height: 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: rgb(211, 175, 55) !important;
}

/* ----------------------------------------------------------------------------
 * 36) GAME GRID column layouts — BS-paralel responsive matrix
 *     K.22 katman 2: Layout (different breakpoints)
 *     BS uses minmax(140px, 1fr) — adapt for narrower mobile
 * ---------------------------------------------------------------------------- */
@media (max-width: 320px) {
  html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
  }
}

/* ----------------------------------------------------------------------------
 * 37) HORIZONTAL SCROLL SHADOW — BS-paralel scrollable hint
 *     K.22 katman 4+8: Component + Shape (visual hint of scrollable content)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .category-tabs-scroll {
  -webkit-overflow-scrolling: touch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .category-tabs-scroll::-webkit-scrollbar {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 38) GAMES-MAIN scroll behavior — BS-paralel infinite scroll
 *     K.22 katman 11+12: Interaction + Animation
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .games-main {
  scroll-padding-top: 36px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container #load-more-sentinel {
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ----------------------------------------------------------------------------
 * 39) GAME-OVERLAY .game-actions — BS-paralel button column flex
 *     K.22 katman 4: Component (final actions row layout)
 *     BS .casino-game-buttons { display:flex; justify-content:center; }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-actions {
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-top: auto !important;
}

/* ----------------------------------------------------------------------------
 * 40) RESET previous theme rules that leak into casino-container
 *     K.22 katman 7: Color (ensure base colors don't leak)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item .game-overlay::before {
  content: none !important;
  display: none !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .game-grid .game-item .game-overlay::after {
  content: none !important;
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 41) ROUTE-SPECIFIC OVERRIDE — /casino vs /livecasino
 *     K.22 katman 1: Page (route-aware styling)
 *     /casino route: standalone slots-style content
 *     /livecasino route: livecasino-page-fixes.css adds further overrides
 * ---------------------------------------------------------------------------- */
/* /casino route — no extra :has() needed since casino-page-fixes.css
 * is conditionally included only on /casino + /livecasino */

/* ----------------------------------------------------------------------------
 * 42) PROVIDER-SHEET BS-paralel close button position
 *     K.22 katman 4: Component (drawer close)
 *     Note: deeper drawer styling is in provider-drawer-correction.css
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .provider-sheet-back {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  transition: color 0.24s ease !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .provider-sheet-back:hover {
  color: rgb(255, 255, 255) !important;
}

/* ----------------------------------------------------------------------------
 * 43) INPUT MOBILE — BS-paralel text input behavior
 *     K.22 katman 4+11: Component + Interaction
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-input,
html.mobile-root body.mobile-site .slot-page-root .casino-container .provider-search-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-search-input::-webkit-search-cancel-button,
html.mobile-root body.mobile-site .slot-page-root .casino-container .provider-search-input::-webkit-search-cancel-button {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 44) FONT FAMILY GLOBAL — BS uses Roboto fallback chain
 *     K.22 katman 6: Typography
 *     Source: BS body uses Roboto, Arial, Helvetica, sans-serif
 *     Note: mobile body already has font-family from theme; we override to Roboto
 *           on casino-container for consistent rendering.
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container,
html.mobile-root body.mobile-site .slot-page-root .casino-container * {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* ----------------------------------------------------------------------------
 * 45) JACKPOT LIST ARROW — BS-paralel (if jackpot list rendered)
 *     K.22 katman 4: Component
 *     BS .casino-jackpot-list-arrow > i { 24x24px;
 *           color rgba(b-sc,1); bg rgba(b-sc,.15);
 *           border-radius 4px; font-size 11px; line-height 24px; }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-jackpot-list-arrow {
  flex-shrink: 0 !important;
  display: flex !important;
  margin-inline-start: 10px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-jackpot-list-arrow > i {
  width: 24px !important;
  height: 24px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 24px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-jackpot-list-arrow > i + i {
  margin-inline-start: 10px !important;
}

/* ----------------------------------------------------------------------------
 * 46) CASINO FREE-SPIN BLOCK — BS-paralel structural
 *     K.22 katman 3: Section (free spin promotional area)
 *     BS .casino-free-spin-block { margin-top: 20px; }
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-free-spin-block {
  margin-top: 20px !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-free-spin-block .competition-wrapper-bc {
  width: 100% !important;
  box-shadow: none !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .casino-free-spin-block .competition-header-bc {
  border-radius: 4px !important;
}

/* ----------------------------------------------------------------------------
 * 47) FINAL CASCADE — slots-layout container BS-paralel width
 *     K.22 katman 2: Layout (sidebar + main flex layout)
 * ---------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root .casino-container .slots-layout {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

html.mobile-root body.mobile-site .slot-page-root .casino-container .games-main {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* AGENT-CASINO-OWNED END */