/* Mobile usability layer. Desktop layout remains unchanged. */
html, body {
  max-width: 100%;
}

.mobile-gotofd-bar {
  display: none;
}

@media (max-width: 768px) {
  html {
    --header-offset: 58px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body.layout {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  #layout-foldable,
  #layout-lang,
  #page-container,
  .lobby-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  .layout-foldable_fixed {
    padding-left: 0 !important;
  }

  .ui-side-menu-v2 {
    display: none !important;
  }

  #header {
    width: 100% !important;
    max-width: 100% !important;
  }

  #headerControlPanel.ui-header {
    position: fixed !important;
    z-index: 10000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  #headerControlPanel > .ui-header__container {
    min-width: 0 !important;
  }

  #headerControlPanel .wHNWbuODYIbcpNupc72A {
    flex: 0 0 auto !important;
  }

  #headerControlPanel .gEMcKqT8KXB5Qisrqibt,
  #headerControlPanel .Kg3kvRihHb1rR_3MSYio,
  #headerControlPanel [data-testid="social-chat-icon-wrapper"] {
    display: none !important;
  }

  #headerControlPanel [data-testid="logo"] {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin-right: 8px !important;
  }

  #headerControlPanel [data-testid="logo"] img {
    width: clamp(92px, 28vw, 118px) !important;
    height: auto !important;
    max-width: 100% !important;
  }

  #headerControlPanel .gLdEYxl_Tb_URnz7CpPC,
  #headerControlPanel .PIcIus6Xqw9wcz0oiwos,
  #headerControlPanel .HuNmOxHxAUkrx2OC_UHX {
    min-width: 0 !important;
    margin-left: auto !important;
  }

  #headerControlPanel .HuNmOxHxAUkrx2OC_UHX {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }

  #headerControlPanel .ui-header__item {
    margin: 0 !important;
  }

  #headerControlPanel .ui-button {
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    touch-action: manipulation;
  }

  #page-container {
    padding-top: 58px !important;
    padding-right: 0 !important;
    padding-bottom: 18px !important;
  }

  .GO62vC3fcDxXT8Adoh2A,
  .CtufSx29BuI005nu8zmK,
  [data-testid="slider-widget"],
  .promo-shot-wrap,
  .lootbox-clone,
  .gods-series-clone,
  .bigbass-clone,
  .slots-live-clone,
  .jackpot-clone,
  .custom-referral-banner,
  #reference-footer {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .CtufSx29BuI005nu8zmK,
  .promo-shot-wrap,
  .lootbox-clone,
  .gods-series-clone,
  .bigbass-clone,
  .slots-live-clone,
  .jackpot-clone,
  .custom-referral-banner,
  #reference-footer {
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: auto !important;
  }

  .slider-head {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .slider-head .ui-typography_size_2xl,
  .slider-head p {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .slider-head .LhCv17lLaGRCkIZXJFhB {
    display: none !important;
  }

  .swiper,
  .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .swiper-wrapper {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
    cursor: auto !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 0 10px !important;
  }

  .swiper-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .swiper-slide {
    flex: 0 0 clamp(110px, 31vw, 138px) !important;
    width: clamp(110px, 31vw, 138px) !important;
    max-width: 138px !important;
    margin-right: 0 !important;
    scroll-snap-align: start !important;
  }

  .game-card,
  .ui-game-card-v3,
  .ui-card-action {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ui-game-card-media-v3,
  .ui-game-card-media-v3 picture,
  .ui-game-card-media-v3 img {
    border-radius: 10px !important;
  }

  .ui-game-card-media-v3 img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 290 / 342 !important;
    object-fit: cover !important;
  }

  .promo-shot-wrap img,
  .lootbox-clone img,
  .gods-series-clone img,
  .bigbass-clone img,
  .slots-live-clone img,
  .custom-referral-banner img,
  #reference-footer img {
    max-width: 100% !important;
    height: auto !important;
  }

  .lootbox-clone,
  .gods-series-clone,
  .bigbass-clone,
  .slots-live-clone,
  .jackpot-clone {
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  a,
  button,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  button,
  .ui-button,
  a.ui-button {
    min-height: 44px;
  }

  .mobile-gotofd-bar {
    position: fixed;
    z-index: 20000;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(17, 18, 24, 0), rgba(17, 18, 24, .92) 30%, rgba(17, 18, 24, .98));
    pointer-events: none;
  }

  .mobile-gotofd-bar__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border-radius: 13px;
    background: #ffd72e;
    color: #151515 !important;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    pointer-events: auto;
  }
}

@media (max-width: 420px) {
  #headerControlPanel .ui-button {
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .swiper-slide {
    flex-basis: clamp(104px, 32vw, 126px) !important;
    width: clamp(104px, 32vw, 126px) !important;
  }
}

@media (max-width: 350px) {
  #headerControlPanel .ui-header__item:first-child {
    display: none !important;
  }

  #headerControlPanel [data-testid="logo"] img {
    width: 96px !important;
  }
}

/* ========================================================================== 
   Responsive layout v2 — tablets + phones, no horizontal scrolling
   This block intentionally comes last and overrides the legacy slider sizes.
   ========================================================================== */

:root {
  --joy-fluid-gutter: clamp(10px, 2.2vw, 22px);
  --joy-fluid-gap: clamp(8px, 1.5vw, 12px);
  --joy-radius-fluid: clamp(10px, 1.6vw, 15px);
}

html,
body,
body#layout,
#layout-foldable,
#layout-lang,
#page-container,
.lobby-page,
[data-testid="lobby-widgets"] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html,
body,
body#layout {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Media and text should always be allowed to shrink with their parent. */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
button,
.reference-footer__legal,
.reference-footer__contact,
.promo-shot__card-title,
.promo-shot__card-text,
.lootbox-clone__name {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tablets and all smaller touch layouts. */
@media (max-width: 1024px) {
  html {
    --header-offset: 62px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.layout,
  body#layout {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  /* Sidebar is useful on desktop, but wastes too much width on tablets. */
  .ui-side-menu-v2 {
    display: none !important;
  }

  .layout-foldable_fixed,
  #layout-foldable,
  #layout-lang,
  #page-container,
  .lobby-page {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  #page-container {
    padding-top: 62px !important;
    padding-right: 0 !important;
  }

  [data-testid="lobby-widgets"] {
    width: calc(100% - (var(--joy-fluid-gutter) * 2)) !important;
    max-width: calc(100% - (var(--joy-fluid-gutter) * 2)) !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  [data-testid="lobby-widgets"] > *,
  [data-testid="lobby-widgets"] [data-testid="slider-widget"],
  [data-testid="lobby-widgets"] [data-testid="banner-slider"],
  [data-testid="lobby-widgets"] [data-testid="filters-page"],
  [data-testid="lobby-widgets"] .swiper,
  [data-testid="lobby-widgets"] .swiper-container,
  [data-testid="lobby-widgets"] .swiper-new,
  [data-testid="lobby-widgets"] .games-menu,
  [data-testid="lobby-widgets"] .games-menu__menu,
  [data-testid="lobby-widgets"] .promo-shot-wrap,
  [data-testid="lobby-widgets"] .promo-shot,
  [data-testid="lobby-widgets"] .promo-shot__viewport,
  [data-testid="lobby-widgets"] .lootbox-clone,
  [data-testid="lobby-widgets"] .lootbox-clone__viewport,
  [data-testid="lobby-widgets"] .bigbass-clone,
  [data-testid="lobby-widgets"] .bigbass-clone__viewport,
  [data-testid="lobby-widgets"] .gods-series-clone,
  [data-testid="lobby-widgets"] .gods-series-clone__viewport,
  [data-testid="lobby-widgets"] .slots-live-clone,
  [data-testid="lobby-widgets"] .slots-live-clone__viewport,
  [data-testid="lobby-widgets"] .jackpot-clone,
  [data-testid="lobby-widgets"] .custom-referral-banner,
  #reference-footer {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header: keep the logo and actions inside the viewport on tablet widths. */
  #header,
  #headerControlPanel.ui-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #headerControlPanel.ui-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 10000 !important;
    padding-inline: max(var(--joy-fluid-gutter), env(safe-area-inset-left)) max(var(--joy-fluid-gutter), env(safe-area-inset-right)) !important;
  }

  #headerControlPanel > .ui-header__container,
  #headerControlPanel > .ui-header__container.wHNWbuODYIbcpNupc72A,
  #headerControlPanel .ui-header__menu,
  #headerControlPanel .PIcIus6Xqw9wcz0oiwos,
  #headerControlPanel .HuNmOxHxAUkrx2OC_UHX,
  #headerControlPanel .gLdEYxl_Tb_URnz7CpPC {
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }

  #headerControlPanel > .ui-header__container.wHNWbuODYIbcpNupc72A {
    padding-left: 0 !important;
  }

  #headerControlPanel [data-testid="logo"] img {
    width: clamp(96px, 15vw, 132px) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #headerControlPanel .ui-button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding-inline: clamp(9px, 1.5vw, 14px) !important;
    font-size: clamp(12px, 1.65vw, 14px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* Category menu wraps instead of creating another horizontal rail. */
  .games-menu__menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: hidden !important;
    padding: 2px 0 4px !important;
  }

  .games-menu__menu > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Native Swiper rails become a responsive grid. This removes horizontal
     scrolling while keeping every card accessible. */
  [data-testid="lobby-widgets"] .swiper,
  [data-testid="lobby-widgets"] .swiper-container,
  [data-testid="lobby-widgets"] .swiper-new {
    overflow: hidden !important;
  }

  [data-testid="lobby-widgets"] .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: var(--joy-fluid-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-block-size: none !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    padding: 0 !important;
    cursor: default !important;
    scroll-snap-type: none !important;
  }

  [data-testid="lobby-widgets"] .swiper-slide {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    flex: none !important;
    align-self: stretch !important;
  }

  [data-testid="lobby-widgets"] .game-card,
  [data-testid="lobby-widgets"] .ui-card-action,
  [data-testid="lobby-widgets"] .ui-game-card-v3,
  [data-testid="lobby-widgets"] .ui-game-card-media-v3,
  [data-testid="lobby-widgets"] .ui-game-card-media-v3 .ui-image-loader-wrapper,
  [data-testid="lobby-widgets"] .ui-game-card-media-v3 picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  [data-testid="lobby-widgets"] .ui-game-card-media-v3 {
    aspect-ratio: 290 / 342 !important;
    overflow: hidden !important;
    border-radius: var(--joy-radius-fluid) !important;
  }

  [data-testid="lobby-widgets"] .ui-game-card-media-v3 > .ui-image-loader-wrapper,
  [data-testid="lobby-widgets"] .ui-game-card-media-v3 picture {
    height: 100% !important;
  }

  [data-testid="lobby-widgets"] .ui-game-card-media-v3 img:not([width="16"]):not([height="16"]) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Section headings scale smoothly instead of jumping between fixed sizes. */
  .slider-head,
  .lootbox-clone__header,
  .bigbass-clone__head,
  .gods-series-clone__head,
  .slots-live-clone__head,
  .jackpot-clone__head {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .slider-head .ui-typography_size_2xl,
  .slider-head p,
  .lootbox-clone__title,
  .jackpot-clone__title {
    font-size: clamp(17px, 2.35vw, 22px) !important;
    line-height: 1.2 !important;
  }

  /* Hide desktop arrows because there is no horizontal rail anymore. */
  .slider-head .LhCv17lLaGRCkIZXJFhB,
  .lootbox-clone__arrows,
  .bigbass-clone__controls,
  .gods-series-clone__controls,
  .slots-live-clone__controls,
  .promo-shot__nav {
    display: none !important;
  }

  /* Custom promotion cards: responsive grid, never max-content. */
  .promo-shot__viewport,
  .lootbox-clone__viewport,
  .bigbass-clone__viewport,
  .gods-series-clone__viewport,
  .slots-live-clone__viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .promo-shot__track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--joy-fluid-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  .promo-shot__card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: clamp(118px, 16vw, 138px) !important;
    margin: 0 !important;
    padding: clamp(9px, 1.4vw, 12px) !important;
    gap: clamp(8px, 1.3vw, 12px) !important;
    border-radius: var(--joy-radius-fluid) !important;
  }

  .promo-shot__media,
  .promo-shot__placeholder {
    width: clamp(72px, 10vw, 92px) !important;
    height: clamp(94px, 13vw, 116px) !important;
    flex: 0 0 clamp(72px, 10vw, 92px) !important;
    border-radius: calc(var(--joy-radius-fluid) - 2px) !important;
    overflow: hidden !important;
  }

  .promo-shot__media img,
  .promo-shot__placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .promo-shot__copy {
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  .promo-shot__card-title {
    font-size: clamp(13px, 1.8vw, 15px) !important;
    line-height: 1.2 !important;
  }

  .promo-shot__card-text {
    font-size: clamp(11px, 1.55vw, 13px) !important;
    line-height: 1.35 !important;
  }

  .lootbox-clone__track,
  .bigbass-clone__track,
  .gods-series-clone__track,
  .slots-live-clone__slots-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--joy-fluid-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  .lootbox-clone__card,
  .bigbass-clone__card,
  .gods-series-clone__card,
  .slots-live-clone__slot-col,
  .slots-live-clone__slot-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    flex: none !important;
  }

  .bigbass-clone__card,
  .gods-series-clone__card,
  .slots-live-clone__slot-card {
    aspect-ratio: 126 / 148 !important;
    overflow: hidden !important;
    border-radius: var(--joy-radius-fluid) !important;
  }

  .bigbass-clone__card img,
  .gods-series-clone__card img,
  .slots-live-clone__slot-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  .lootbox-clone__card {
    padding: clamp(8px, 1.3vw, 12px) !important;
    min-height: 0 !important;
  }

  .lootbox-clone__image,
  .lootbox-clone__image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.32 / 1 !important;
    object-fit: contain !important;
  }

  .lootbox-clone__image {
    flex-basis: auto !important;
  }

  .lootbox-clone__name {
    font-size: clamp(12px, 1.7vw, 14px) !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
  }

  .lootbox-clone__button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    font-size: clamp(12px, 1.6vw, 14px) !important;
    padding-inline: 8px !important;
  }

  .slots-live-clone__live-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--joy-fluid-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }

  .slots-live-clone__live-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1.9 / 1 !important;
    overflow: hidden !important;
    border-radius: var(--joy-radius-fluid) !important;
  }

  .slots-live-clone__live-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  /* Top banner stays proportional on every tablet/phone width. */
  [data-testid="banner-slider"] .single-static-banner {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(138px, 23vw, 220px) !important;
    min-height: 0 !important;
    border-radius: var(--joy-radius-fluid) !important;
    overflow: hidden !important;
  }

  [data-testid="banner-slider"] .single-static-banner img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .custom-referral-banner,
  .custom-referral-banner img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .custom-referral-banner {
    overflow: hidden !important;
    border-radius: var(--joy-radius-fluid) !important;
  }

  .custom-referral-banner img {
    display: block !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Jackpot: fluid digits and cards, no clipped counter. */
  .jackpot-clone__panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(13px, 2vw, 18px) !important;
    border-radius: var(--joy-radius-fluid) !important;
    overflow: hidden !important;
  }

  .jackpot-clone__counter {
    max-width: 100% !important;
    font-size: clamp(22px, 4.1vw, 34px) !important;
    line-height: 1.15 !important;
    flex-wrap: wrap !important;
  }

  .jackpot-clone__counter-digit {
    min-width: clamp(15px, 2.3vw, 23px) !important;
    height: auto !important;
    min-height: 30px !important;
  }

  .jackpot-clone__currency {
    font-size: clamp(18px, 3vw, 24px) !important;
  }

  .jackpot-clone__wins {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .jackpot-clone__win {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
  }

  .jackpot-clone__win-value {
    font-size: clamp(13px, 1.9vw, 15px) !important;
  }

  .jackpot-clone__win-time {
    font-size: clamp(10px, 1.45vw, 12px) !important;
    line-height: 1.3 !important;
  }

  /* Footer content should reflow naturally rather than keep desktop widths. */
  #reference-footer,
  .reference-footer,
  .reference-footer__inner,
  .reference-footer__crypto,
  .reference-footer__contact,
  .reference-footer__legal {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .reference-footer__crypto {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
  }

  .reference-footer__crypto-item img {
    max-width: min(100%, 110px) !important;
    height: auto !important;
  }

  .reference-footer__contact {
    font-size: clamp(13px, 1.8vw, 15px) !important;
    line-height: 1.4 !important;
  }

  .reference-footer__legal {
    font-size: clamp(11px, 1.45vw, 13px) !important;
    line-height: 1.55 !important;
  }

  a,
  button,
  [role="button"] {
    max-width: 100%;
    touch-action: manipulation;
  }
}

/* Medium tablets: four game columns give cards a comfortable visual size. */
@media (max-width: 760px) {
  [data-testid="lobby-widgets"] .swiper-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .lootbox-clone__track,
  .bigbass-clone__track,
  .gods-series-clone__track,
  .slots-live-clone__slots-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .jackpot-clone__wins {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .jackpot-clone__win:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Standard phones: three compact game cards per row; promo text gets full width. */
@media (max-width: 520px) {
  :root {
    --joy-fluid-gutter: clamp(8px, 3vw, 14px);
    --joy-fluid-gap: 8px;
  }

  #headerControlPanel .gEMcKqT8KXB5Qisrqibt,
  #headerControlPanel .Kg3kvRihHb1rR_3MSYio,
  #headerControlPanel [data-testid="social-chat-icon-wrapper"] {
    display: none !important;
  }

  #headerControlPanel [data-testid="logo"] img {
    width: clamp(88px, 27vw, 112px) !important;
  }

  #headerControlPanel .ui-button {
    min-height: 40px !important;
    padding-inline: 9px !important;
    font-size: clamp(12px, 3.2vw, 13px) !important;
  }

  [data-testid="lobby-widgets"] .swiper-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .promo-shot__track {
    grid-template-columns: 1fr !important;
  }

  .promo-shot__card {
    min-height: 116px !important;
  }

  .promo-shot__media,
  .promo-shot__placeholder {
    width: clamp(74px, 23vw, 92px) !important;
    height: clamp(94px, 29vw, 116px) !important;
    flex-basis: clamp(74px, 23vw, 92px) !important;
  }

  .lootbox-clone__track,
  .bigbass-clone__track,
  .gods-series-clone__track,
  .slots-live-clone__slots-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .slots-live-clone__live-track {
    grid-template-columns: 1fr !important;
  }

  [data-testid="banner-slider"] .single-static-banner {
    height: clamp(132px, 39vw, 168px) !important;
  }

  .jackpot-clone__top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
  }

  .jackpot-clone__wins {
    grid-template-columns: 1fr !important;
  }

  .jackpot-clone__win:last-child {
    grid-column: auto !important;
  }

  .mobile-gotofd-bar {
    padding-inline: var(--joy-fluid-gutter) !important;
  }

  .mobile-gotofd-bar__button {
    min-height: 50px !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    border-radius: 12px !important;
  }
}

/* Very narrow phones: two columns keep cards readable and tappable. */
@media (max-width: 340px) {
  [data-testid="lobby-widgets"] .swiper-wrapper,
  .lootbox-clone__track,
  .bigbass-clone__track,
  .gods-series-clone__track,
  .slots-live-clone__slots-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #headerControlPanel [data-testid="logo"] img {
    width: 88px !important;
  }

  #headerControlPanel .ui-button {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
}

/* ========================================================================== 
   Mobile polish v3 — pill filters, proportional banner, correct card icons
   ========================================================================== */
@media (max-width: 1024px) {
  /* More rounded controls, matching the desktop visual language. */
  #headerControlPanel .ui-button,
  .games-menu__button,
  .lootbox-clone__button,
  .mobile-gotofd-bar__button {
    border-radius: 999px !important;
  }

  /* Search stays fixed at the left; all slot filters become one swipe row. */
  [data-testid="lobby-widgets"] .games-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  [data-testid="lobby-widgets"] [data-testid="menu-search"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  [data-testid="lobby-widgets"] [data-testid="menu-search"] > button,
  [data-testid="lobby-widgets"] [data-testid="menu-search"] .ui-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  [data-testid="lobby-widgets"] .games-menu__menu {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    padding: 2px 2px 5px 0 !important;
  }

  [data-testid="lobby-widgets"] .games-menu__menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  [data-testid="lobby-widgets"] .games-menu__menu > *,
  [data-testid="lobby-widgets"] .games-menu__button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 clamp(15px, 2vw, 20px) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button .ui-typography {
    font-size: clamp(14px, 1.85vw, 16px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button .ui-icon-wrapper,
  [data-testid="lobby-widgets"] .games-menu__button .ui-icon-wrapper img {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }

  /* The source banner is 1064×240. Never stretch it: scale and crop instead. */
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner {
    height: clamp(150px, 22vw, 220px) !important;
    min-height: 0 !important;
    border-radius: clamp(12px, 1.8vw, 16px) !important;
    overflow: hidden !important;
  }

  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner > a,
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] [data-testid="main-banner-v4"],
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .ui-main-banner-v4__inner,
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .ui-main-banner-v4__inner-media,
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .ui-image-loader-wrapper,
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] picture,
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner img {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }

  /* Only the main game bitmap fills a card. Overlay status icons must not. */
  [data-testid="lobby-widgets"] .ui-game-card-media-v3__wrapper .ui-image-loader-wrapper,
  [data-testid="lobby-widgets"] .ui-game-card-media-v3__wrapper picture {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  [data-testid="lobby-widgets"] .ui-game-card-media-v3__wrapper img[width="16"],
  [data-testid="lobby-widgets"] .ui-game-card-media-v3__wrapper img[height="16"] {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  [data-testid="lobby-widgets"] .ui-game-card-media-overlay-v3__item .ui-icon-box,
  [data-testid="lobby-widgets"] .ui-game-card-media-overlay-v3__item .ui-icon-wrapper,
  [data-testid="lobby-widgets"] .ui-game-card-media-overlay-v3__item svg {
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}

@media (max-width: 600px) {
  /* Taller mobile crop keeps the artwork readable without squashing it. */
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner {
    height: clamp(142px, 40vw, 174px) !important;
  }

  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner img {
    /* Slight left bias preserves both the text area and the character. */
    object-position: 22% center !important;
  }

  [data-testid="lobby-widgets"] .games-menu {
    gap: 7px !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button {
    min-height: 42px !important;
    padding-inline: 16px !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button .ui-typography {
    font-size: 15px !important;
  }
}

@media (max-width: 380px) {
  [data-testid="lobby-widgets"] [data-testid="menu-search"] > button,
  [data-testid="lobby-widgets"] [data-testid="menu-search"] .ui-button {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button {
    min-height: 42px !important;
    padding-inline: 14px !important;
  }
}

/* Final mobile sizing refinements. */
@media (max-width: 700px) {
  /* On phones the compact magnifier is enough; hiding the text field leaves
     the full remaining row for horizontally swipeable categories. */
  [data-testid="lobby-widgets"] [data-testid="menu-search"] > div {
    display: none !important;
  }

  [data-testid="lobby-widgets"] [data-testid="menu-search"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: 1 !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button .ui-typography {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 600px) {
  /* Less aggressive crop than a 150px-high phone banner: artwork remains
     proportional while more of both the left copy and right character stay visible. */
  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner {
    height: clamp(108px, 31vw, 145px) !important;
  }

  [data-testid="lobby-widgets"] [data-testid="banner-slider"] .single-static-banner img {
    object-position: 12% center !important;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  [data-testid="lobby-widgets"] .games-menu__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 1 !important;
  }

  [data-testid="lobby-widgets"] .games-menu__button .ui-typography {
    margin: 0 !important;
    padding: 0 !important;
  }
}