/* ===================================================================
   responsive.css — Chances Casino (clean)
   =================================================================== */

/* базовые переменные для моб. шапки */
:root{
  --m-header-h: 60px;                 /* высота фиксированной шапки на мобилке */
  --m-header-bg: #ffffff;             /* фон шапки */
  --m-menu-bg: #ffffff;               /* фон выпадающего меню */
  --m-border: rgba(20,32,51,.08);
}

/* общие безопасные вещи */
html, body{ overflow-x:hidden; }

/* ------------------------  MOBILE  ------------------------ */
@media (max-width: 991.98px){

  /* фиксированная мобильная шапка */
  .mobile-header-menu{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-header-h);
    display: flex;
    align-items: center;
    background: var(--m-header-bg);
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(16,24,40,.06);
  }

  /* контейнеры внутри шапки */
  .mobile-header-menu .container-fluid,
  .mobile-header-menu .row{
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* логотип */
  .mobile-menu-logo img{
    max-height: 40px;
    width: auto;
    display:block;
  }

  /* бургер-кнопка — комфортный таргет 44×44 */
  .mobile-menu-toggler{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    margin-left:auto;
    background:#ff6a00;               /* твой оранжевый */
    box-shadow: 0 6px 14px rgba(255,106,0,.25);
  }
  .mobile-menu-toggler a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
  .mobile-menu-toggler i{ color:#fff; font-size:20px; line-height:1; }

  /* смещение контента под фикс. шапку */
  .main-content-wrapper{
    margin-top: 0 !important;
    padding-top: calc(var(--m-header-h) + env(safe-area-inset-top));
  }

  /* выпадающее меню */
  .mobile-header-menu .navbar-collapse{
    position: fixed;
    top: var(--m-header-h);
    left: 0; right: 0;
    height: calc(100vh - var(--m-header-h) - env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--m-menu-bg);
    border-top:1px solid var(--m-border);
    z-index: 999;
    padding: 10px 12px 18px;
    box-shadow: 0 18px 36px rgba(16,24,40,.12);
  }
  /* скрывать, когда закрыто (бывает конфликт со старыми стилями) */
  .mobile-header-menu .navbar-collapse.collapse:not(.show){ display:none; }

  /* шапка раскрытого меню (крестик и логотип) */
  .mobile-menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 8px 4px 12px;
    border-bottom:1px solid var(--m-border);
  }
  .mobile-menu-header img{ max-height: 32px; width:auto; }
  .mobile-menu-header .material-icons{ font-size:24px; color:#142033; }

  /* список ссылок меню */
  .mobile-menu{ padding: 10px 0 0; }
  .mobile-menu > li{ border-bottom:1px dashed var(--m-border); }
  .mobile-menu a{
    display:block; padding:12px 4px; color:#142033; font-weight:700; text-transform:capitalize;
  }
  .mobile-menu .dropdown-menu{
    position:static; float:none; width:100%; border:0; padding:0 0 8px 12px;
  }
  .mobile-menu .dropdown-menu a{ padding:8px 4px; font-weight:600; }

  /* «контакты» и соцсети в меню (если оставлены) */
  .mobile-menu-contact, .mobile-menu-social-wrapper{ margin-top:12px; }

  /* баннер/герой: меньше внутренние отступы на узких экранах */
  .slider-text{ padding: 20px !important; }

  /* карточки игр: убрать синий хайлайт при тапе и дерганье */
  .game-card{ -webkit-tap-highlight-color:transparent; }
}

/* ------------------------  TABLET+  ------------------------ */
@media (min-width: 992px){
  /* на десктопе не вмешиваемся — мобильную шапку прячем (на всякий случай) */
  .mobile-header-menu{ display:none !important; }
  .main-content-wrapper{ padding-top:0; }
}

/* мелкие улучшения сетки карточек на узких экранах (если используется .games-grid) */
@media (max-width: 575.98px){
  .games-grid{ gap: 12px; }
}