/* FRIDE mobile responsive fix v6.17
   Меняет только мобильный и планшетный вид.
   Десктоп (шире 1100px) не трогает.
*/

@media (max-width: 1100px) {
  .wrap,
  .container {
    width: min(100% - 24px, 1180px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-header .topbar,
  .topbar {
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .site-header .nav,
  .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .site-header .nav a,
  .nav a {
    min-height: 42px !important;
  }

  .single-page,
  .panel,
  .liquid-panel,
  .hero-panel,
  .lkx-panel,
  .lkn-panel,
  .case-card,
  .reward-card,
  .balance-box,
  .roulette-panel,
  .donate-card {
    border-radius: 22px !important;
  }

  .section-head.between,
  .between {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .main-grid,
  .dashboard-grid,
  .lk-grid,
  .lkx-grid-2,
  .lkn-grid-2,
  .lkn-grid-3,
  .cases-grid,
  .cases-grid.deluxe,
  .roulette-grid,
  .donate-grid,
  .account-grid,
  .stats-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .lkx-stats,
  .lkn-stats,
  .case-chances,
  .reward-list,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .lkx-hero,
  .lkn-head,
  .profile-hero,
  .account-hero,
  .hero-panel {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .lkx-avatar,
  .lkn-avatar,
  .profile-avatar,
  .avatar-box {
    margin: 0 auto !important;
  }

  .lkx-hero-copy h1,
  .lkn-head-copy h1,
  .hero-copy h1,
  .profile-title h1 {
    font-size: clamp(30px, 6vw, 42px) !important;
    line-height: 1.05 !important;
  }

  .case-art img,
  .hero-banner img,
  .main-banner img {
    height: 200px !important;
    object-fit: cover !important;
  }

  .case-strip-wrap {
    padding: 14px 10px !important;
  }

  .case-tile {
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden !important;
  }

  .wrap,
  .container {
    width: calc(100% - 20px) !important;
  }

  .site-header {
    padding: 10px 0 !important;
  }

  .site-header .topbar,
  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .logo {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .site-header .nav,
  .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .site-header .nav a,
  .nav a,
  .btn,
  .lkn-btn,
  .lkx-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-launcher,
  .btn-launcher {
    grid-column: 1 / -1 !important;
  }

  .section-head h1,
  .section-head h2,
  .single-page h1,
  .hero-copy h1 {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .lead,
  .section-head p,
  .hero-copy p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .lkx-stats,
  .lkn-stats,
  .case-chances,
  .feature-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .lkx-actions,
  .lkn-actions,
  .reward-actions,
  .case-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .lkx-section,
  .lkn-section,
  .panel,
  .liquid-panel,
  .case-content,
  .reward-card,
  .donate-card {
    padding: 16px !important;
  }

  .lkx-avatar,
  .lkn-avatar,
  .profile-avatar {
    width: 120px !important;
    height: 120px !important;
  }

  .lkn-current,
  .lkx-avatar-current {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .lkn-current-preview,
  .lkx-avatar-mini {
    margin: 0 auto !important;
  }

  .lkn-presets,
  .lkx-presets,
  .profile-presets,
  .avatar-presets,
  .preset-grid,
  .profile-chooser-grid,
  .profile-chooser {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .lkn-preset-preview,
  .preset-card,
  .avatar-card,
  .profile-choice,
  .profile-option {
    height: auto !important;
    min-height: 120px !important;
  }

  .case-art img,
  .hero-banner img,
  .main-banner img {
    height: 170px !important;
  }

  .case-strip-pointer {
    width: 3px !important;
  }

  .case-tile {
    min-width: 136px !important;
    max-width: 136px !important;
    padding: 10px !important;
  }

  .case-tile img {
    height: 92px !important;
  }

  .reward-card.final-reward {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .reward-card.final-reward img {
    margin: 0 auto !important;
  }

  .footer-grid,
  footer .wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: left !important;
  }
}

@media (max-width: 520px) {
  .wrap,
  .container {
    width: calc(100% - 16px) !important;
  }

  .site-header .nav,
  .nav {
    grid-template-columns: 1fr !important;
  }

  .logo {
    font-size: 26px !important;
  }

  .section-head h1,
  .section-head h2,
  .single-page h1,
  .hero-copy h1,
  .lkx-hero-copy h1,
  .lkn-head-copy h1 {
    font-size: 28px !important;
  }

  .case-price,
  .mini-badge,
  .tag,
  .lkn-tag,
  .lkx-tag {
    font-size: 12px !important;
  }

  .balance-box strong,
  .lkx-balance strong,
  .lkn-balance strong {
    font-size: 32px !important;
  }

  .case-tile {
    min-width: 124px !important;
    max-width: 124px !important;
  }

  .single-page,
  .panel,
  .liquid-panel,
  .hero-panel,
  .case-card,
  .reward-card,
  .lkx-panel,
  .lkn-panel {
    border-radius: 18px !important;
  }
}