/*
 * SWShops — Premium Mobile UI
 * Отдельный слой адаптивных стилей. Десктопная версия не затрагивается.
 */

:root {
  --mobile-accent: #ffc607;
  --mobile-accent-2: #ff9d18;
  --mobile-bg: #111116;
  --mobile-panel: rgba(27, 27, 34, .94);
  --mobile-panel-soft: rgba(37, 37, 45, .82);
  --mobile-border: rgba(255, 255, 255, .10);
  --mobile-text: #f7f7f8;
  --mobile-muted: #9c9ca6;
  --mobile-success: #49b960;
  --mobile-radius: 16px;
  --mobile-shadow: 0 14px 40px rgba(0, 0, 0, .34);
}

.mobile-shell { display: none; }

@media (max-width: 1100px) {
  html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--mobile-bg);
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe { max-width: 100%; }
  img { height: auto; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, [role="button"], a { touch-action: manipulation; }

  /* На телефоне используется отдельная компактная шапка. */
  .bannerhh,
  .header {
    display: none !important;
  }

  .wrapper,
  main,
  main > div,
  .page,
  .searchpage,
  .cases {
    min-width: 0 !important;
    width: 100% !important;
  }

  .wrapper { overflow: visible !important; }

  .container,
  .container--small {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .page,
  .searchpage,
  .cases {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
  }

  /* ---------- Mobile app shell ---------- */
  .mobile-shell { display: block; }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 9000;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    min-height: 62px;
    padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
    background:
      linear-gradient(180deg, rgba(19,19,24,.98), rgba(19,19,24,.93)),
      radial-gradient(circle at 50% 0, rgba(255,198,7,.10), transparent 55%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .mobile-icon-btn,
  .mobile-account-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
    color: #fff;
    padding: 0;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
  }

  .mobile-icon-btn:active,
  .mobile-account-avatar:active { transform: scale(.96); }

  .mobile-menu-toggle {
    flex-direction: column;
    gap: 4px;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 3px;
    background: #f5f5f6;
    transition: transform .22s ease, opacity .22s ease;
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-brand {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .mobile-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }

  .mobile-brand > span > span { color: var(--mobile-accent); }

  .mobile-account-avatar {
    justify-self: end;
    overflow: hidden;
    padding: 2px;
    border-color: rgba(255,198,7,.46);
    background: linear-gradient(145deg, rgba(255,198,7,.25), rgba(255,126,0,.08));
  }

  .mobile-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  .mobile-login-btn { justify-self: end; }
  .mobile-login-btn svg { width: 21px; height: 21px; fill: var(--mobile-accent); }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9200;
    width: min(88vw, 390px);
    max-width: 390px;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      linear-gradient(180deg, rgba(21,21,27,.995), rgba(14,14,19,.995)),
      radial-gradient(circle at 10% 0, rgba(255,198,7,.12), transparent 38%);
    border-right: 1px solid rgba(255,255,255,.10);
    box-shadow: 22px 0 60px rgba(0,0,0,.46);
    transform: translateX(-104%);
    transition: transform .26s cubic-bezier(.2,.8,.2,1);
  }

  body.mobile-nav-open { overflow: hidden !important; touch-action: none; }
  body.mobile-nav-open .mobile-drawer { transform: translateX(0); }
  body.mobile-nav-open .mobile-drawer-backdrop { opacity: 1; visibility: visible; }

  .mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .mobile-drawer__brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-drawer__brand img { width: 36px; height: 36px; flex: 0 0 36px; }
  .mobile-drawer__brand div { min-width: 0; }
  .mobile-drawer__brand strong {
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
  }
  .mobile-drawer__brand span {
    display: block;
    margin-top: 3px;
    color: #7d7d87;
    font-size: 10px;
    letter-spacing: .04em;
  }

  .mobile-drawer__close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #cfcfd3;
    font-size: 27px;
    line-height: 38px;
  }

  .mobile-user-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(255,198,7,.17);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,198,7,.08), rgba(255,255,255,.035));
  }

  .mobile-user-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,198,7,.52);
    padding: 2px;
  }
  .mobile-user-card__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
  .mobile-user-card__body { min-width: 0; }
  .mobile-user-card__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }
  .mobile-user-card__balance { margin-top: 4px; color: #8e8e98; font-size: 11px; }
  .mobile-user-card__balance strong { color: var(--mobile-accent); font-size: 13px; }
  .mobile-user-card__topup {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(64,184,91,.54);
    border-radius: 10px;
    background: rgba(64,184,91,.14);
    color: #8ee8a2;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-search {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 5px 0 12px;
    border: 1px solid rgba(255,198,7,.25);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px rgba(255,255,255,.03);
  }

  .mobile-search:focus-within {
    border-color: rgba(255,198,7,.62);
    box-shadow: 0 0 0 3px rgba(255,198,7,.08);
  }

  .mobile-search svg { width: 19px; height: 19px; fill: #8d8d96; }
  .mobile-search input {
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    padding: 0 8px;
    background: transparent;
    color: #fff;
    font-size: 16px; /* iOS: не увеличивает страницу при фокусе */
  }
  .mobile-search input::placeholder { color: #777780; }
  .mobile-search button {
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffd32b, #eda500);
    color: #1a1608;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-drawer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .mobile-drawer__nav a {
    min-width: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    color: #d7d7dc;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-drawer__nav a:active { background: rgba(255,198,7,.08); border-color: rgba(255,198,7,.25); }
  .mobile-drawer__nav img { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; }

  .mobile-drawer__section { margin-top: 18px; }
  .mobile-drawer__section-title {
    margin-bottom: 9px;
    color: #8d8d96;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .mobile-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .mobile-category-grid a {
    min-width: 0;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 13px;
    background: rgba(255,255,255,.03);
    color: #cfcfd4;
    text-decoration: none;
    text-align: center;
    font-size: 9px;
    line-height: 1.15;
    font-weight: 700;
  }
  .mobile-category-grid a:active { border-color: rgba(255,198,7,.30); background: rgba(255,198,7,.07); }
  .mobile-category-grid img { width: 31px; height: 31px; object-fit: contain; }

  .mobile-drawer__footer {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .mobile-drawer__footer a,
  .mobile-drawer__footer button {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #d6d6da;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-drawer__footer .mobile-drawer__logout { color: #ff9494; border-color: rgba(255,100,100,.15); }
  .mobile-drawer__footer button { color: #191607; background: linear-gradient(180deg, #ffd32b, #eda500); border-color: #ffd342; }

  .mobile-bottom-nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    z-index: 8800;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 60px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 19px;
    background: rgba(20,20,26,.94);
    box-shadow: 0 16px 40px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }

  .mobile-bottom-nav__item {
    position: relative;
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #8c8c96;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
  }
  .mobile-bottom-nav__item svg { width: 20px; height: 20px; fill: currentColor; }
  .mobile-bottom-nav__item:active { background: rgba(255,255,255,.06); color: #fff; transform: scale(.97); }
  .mobile-bottom-nav__item--accent { color: var(--mobile-accent); }
  .mobile-bottom-nav__item--accent::before {
    content: "";
    position: absolute;
    inset: 5px 13px;
    z-index: -1;
    border-radius: 12px;
    background: rgba(255,198,7,.08);
  }

  /* ---------- Titles & typography ---------- */
  .page-title {
    width: 100%;
    margin: 4px 0 18px !important;
    padding: 0 6px;
    font-size: clamp(18px, 5vw, 23px) !important;
    line-height: 1.22 !important;
    letter-spacing: .025em !important;
    text-wrap: balance;
  }
  .page-title::before,
  .page-title::after {
    width: min(15vw, 54px) !important;
    height: 22px !important;
    opacity: .55;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .page-title_2 {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .page-title_2:hover { transform: none !important; }

  p, li { overflow-wrap: anywhere; }

  /* ---------- Tabs ---------- */
  .tabs {
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: 18px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs__list {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start !important;
    padding: 0 14px;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
  .tabs__item { flex: 0 0 auto; }
  .tabs__item + .tabs__item,
  .searchpage .tabs__item + .tabs__item { margin-left: 8px !important; }
  .tabs__btn,
  .searchpage .tabs__btn {
    min-height: 44px !important;
    padding: 10px 15px !important;
    border-radius: 12px 12px 0 0 !important;
    font-size: 14px !important;
    animation: none !important;
  }
  .tabs__btn:hover,
  .searchpage .tabs__btn:hover { transform: none !important; animation: none !important; }

  /* ---------- Catalog cards ---------- */
  .cases__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch;
  }

  .cases__item,
  .cases__item:hover {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(42,42,50,.82), rgba(25,25,31,.82)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    transform: none !important;
  }

  .cases__item:active { transform: scale(.985) !important; background: rgba(46,46,55,.94) !important; }
  .cases__link { min-height: 100%; padding: 10px 8px 11px !important; }
  .cases__link:hover .cases__image-wrapper { transform: none !important; }
  .cases__name {
    min-height: 35px;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 4px;
    color: #f1f1f3;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center;
    white-space: normal !important;
  }
  .cases__image-wrapper {
    min-height: 122px !important;
    max-height: 150px;
    padding: 4px 0;
  }
  .cases__image {
    width: auto !important;
    max-width: 96% !important;
    max-height: 145px !important;
    object-fit: contain;
  }
  .cases__price-wrapper {
    justify-content: center !important;
    margin-top: -12px !important;
    padding-right: 0 !important;
  }
  .cases__price {
    font-size: 17px !important;
    font-weight: 800;
  }
  .cases__percent {
    left: 7px !important;
    top: 42px;
    margin-top: 0 !important;
    padding: 6px 10px 6px 6px !important;
    font-size: 10px !important;
  }
  .buttonmore,
  .load-more__btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 48px;
    margin-top: 14px;
    border: 1px solid rgba(255,198,7,.28) !important;
    border-radius: 13px !important;
    background: rgba(255,198,7,.08) !important;
    color: var(--mobile-accent) !important;
    font-size: 13px !important;
    font-weight: 800;
  }

  .cases__name_game {
    margin-bottom: 10px !important;
    padding: 10px 8px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  .cases__name_game::before,
  .cases__name_game::after { width: 1.7em !important; height: 1.7em !important; }

  /* ---------- Home / guarantees / informational cards ---------- */
  .guarantees-items-wrapper,
  .guarantees-items-wrapper_con {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  .guarantee-item,
  .guarantee-item-m1,
  .guarantee-item-m2 {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(39,39,47,.78), rgba(27,27,33,.72)) !important;
    box-shadow: 0 9px 26px rgba(0,0,0,.18);
  }

  .guarantee-item-header {
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }
  .guarantee-item-img,
  .guarantee-item-img44,
  .guarantee-item-img2,
  .guarantee-item-img3 {
    width: min(42vw, 150px) !important;
    max-width: 150px !important;
    margin: 0 auto 12px !important;
    transform: none !important;
    animation: none !important;
  }
  .guarantee-item-title,
  .guarantee-item-title-m2 { font-size: 17px !important; text-align: center; }
  .guarantee-item-content,
  .guarantee-item-content_2 {
    width: 100%;
    font-size: 14px !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }

  /* ---------- FAQ / text pages ---------- */
  .faq-how-works {
    padding: 18px 12px !important;
    border-radius: 16px !important;
  }
  .faq, .faq-how-works, .faq__title { margin-bottom: 22px !important; }
  .faq__title { font-size: 18px !important; }
  .faq__item { padding-left: 52px !important; border-radius: 13px !important; }
  .faq__separator { left: 12px !important; }

  .agreement,
  .agreement__content,
  .contacts,
  .news,
  .reviews {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .agreement ol li { line-height: 1.6 !important; }

  /* ---------- Game detail ---------- */
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
    padding: 0 14px !important;
  }
  .game { padding-top: 0 !important; margin-bottom: 18px !important; }
  .game__breadcrumbs {
    margin-bottom: 14px !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .game__breadcrumbs::-webkit-scrollbar { display: none; }
  .game__h1 {
    max-height: none !important;
    margin-bottom: 15px !important;
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.2 !important;
    overflow: visible !important;
  }
  .game__wrapper,
  .game__wrapper-left,
  .game__wrapper-right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  .game__wrapper-left { padding-right: 0 !important; }
  .game__img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 12px !important;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(0,0,0,.22);
  }
  .game__img img {
    width: 100% !important;
    height: auto !important;
    max-height: 62vh;
    object-fit: contain !important;
    border-radius: 16px !important;
  }
  .game__img img:hover { transform: none !important; box-shadow: none !important; }
  .game__specs,
  .game__main {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  }
  .game__specs-wrapper { width: 100%; display: block !important; }
  .game__specs-spec {
    display: grid !important;
    grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
  }
  .game__specs-key,
  .game__specs-val {
    display: block !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .game__main { flex-direction: column !important; }
  .game__main-data-top { gap: 10px; flex-wrap: wrap; }

  /* ---------- Unified profile ---------- */
  .profile-page .container--small { padding-left: 12px !important; padding-right: 12px !important; }
  .profile-page .page-title { margin-top: 0 !important; }

  .noob-profile {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px !important;
    background: rgba(25,25,31,.70);
    box-shadow: var(--mobile-shadow);
  }
  .noob-profile__main {
    width: 100% !important;
    padding-top: 16px !important;
    background: linear-gradient(180deg, rgba(45,45,54,.78), rgba(34,34,42,.76)) !important;
  }
  .noob-profile__info-wrapper {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 0 14px 13px;
  }
  .noob-profile__info { width: 112px !important; }
  .noob-profile__photo-wrapper {
    width: 88px !important;
    height: 88px !important;
    margin-bottom: 15px !important;
  }
  .noob-profile__photo { width: 84px !important; height: 84px !important; object-fit: cover; }
  .noob-profile__settings-btn {
    min-width: 88px !important;
    height: 34px !important;
    margin-top: -8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }
  .noob-profile__info-right { min-width: 0; text-align: left !important; }
  .noob-profile__name {
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.2;
  }
  .noob-profile__balance-val { margin-bottom: 11px !important; font-size: 16px !important; }
  .noob-profile__balance-btn {
    width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }
  .noob-profile__balance-btn::after { top: 15px !important; }
  .noob-profile__stats { padding-top: 0 !important; border-top: 1px solid rgba(255,255,255,.06); }
  .noob-profile__stats-item { padding: 14px 7px !important; }
  .noob-profile__stats-title { min-height: 28px; font-size: 11px !important; line-height: 1.3; }
  .noob-profile__stats-val { font-size: 21px !important; }

  .noob-profile__content { width: 100%; }
  .noob-profile__timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    background: rgba(34,34,42,.82) !important;
  }
  .noob-profile__timeline-item,
  .noob-profile__timeline-item + .noob-profile__timeline-item {
    width: 100% !important;
    min-height: 66px;
    padding: 12px 14px !important;
    border-top: 1px solid rgba(255,255,255,.055);
    background: transparent !important;
  }
  .noob-profile__timeline-item:first-child { border-top: 0; }
  .noob-profile__timeline-item::before,
  .noob-profile__timeline-item::after { display: none !important; }
  .noob-profile__timeline-val {
    width: 30px !important;
    height: 30px !important;
    margin: 0 12px 0 0 !important;
    font-size: 14px !important;
  }
  .noob-profile__timeline-title { font-size: 14px !important; }
  .noob-profile__timeline-desc { font-size: 12px !important; line-height: 1.45; }

  .noob-profile__trade { padding: 16px 14px !important; }
  .noob-profile__trade-header {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .noob-profile__trade-title { padding-left: 23px !important; font-size: 15px !important; }
  .noob-profile__trade-title::before { top: 1px !important; }
  .noob-profile__trade-how { margin-top: 9px; }
  .noob-profile__trade-how-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 30px 8px 12px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }
  .noob-profile__trade-how-link::after { top: 13px !important; }
  .noob-profile__trade-form { display: block !important; }
  .profile-promo-form { width: 100%; }
  .noob-profile__trade-input {
    min-height: 46px;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 16px !important;
  }
  .noob-profile__trade-btn-wrapper { margin: 9px 0 0 !important; }
  .noob-profile__trade-btn {
    width: 100% !important;
    min-height: 44px;
    border-radius: 11px !important;
  }

  .profile-dashboard-nav {
    display: flex !important;
    gap: 7px !important;
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 0 12px 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .profile-dashboard-nav::-webkit-scrollbar { display: none; }
  .profile-dashboard-nav__item {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 43px !important;
    padding: 9px 13px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .profile-dashboard-section {
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }
  .profile-section-heading {
    min-height: 0 !important;
    padding: 15px 14px !important;
    align-items: flex-start !important;
  }
  .profile-section-heading h2 { font-size: 18px !important; line-height: 1.25 !important; }
  .profile-section-heading p { margin-top: 5px !important; font-size: 12px !important; line-height: 1.45 !important; }
  .profile-section-count { min-width: 34px !important; height: 34px !important; font-size: 14px !important; }
  .profile-section-body { padding: 10px !important; }

  .profile-settings--embedded .profile-settings__layout { display: block !important; }
  .profile-settings--embedded .profile-settings-card--avatar,
  .profile-settings--embedded .profile-settings-card--security {
    width: 100% !important;
    padding: 16px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  .profile-settings--embedded .profile-settings-card--security { border-bottom: 0 !important; }
  .profile-settings-card__head {
    padding: 0 0 14px !important;
    gap: 8px !important;
  }
  .profile-settings-card h3 { font-size: 18px !important; }
  .profile-settings-card h4 { font-size: 16px !important; }
  .profile-settings-card p,
  .profile-settings--embedded .profile-settings-card p,
  .profile-settings--embedded .profile-security-section__title p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .profile-avatar-editor { max-width: none !important; }
  .profile-settings--embedded .profile-avatar-editor__preview-wrap {
    width: 96px !important;
    height: 96px !important;
  }
  .profile-file-picker,
  .profile-settings-btn { min-height: 46px !important; border-radius: 12px !important; }
  .profile-file-picker__text,
  .profile-settings-btn { font-size: 12px !important; }
  .profile-settings-label,
  .profile-settings-label > span,
  .profile-settings--embedded .profile-settings-label,
  .profile-settings--embedded .profile-settings-label > span { font-size: 12px !important; }
  .profile-input-wrap { min-height: 48px !important; border-radius: 12px !important; }
  .profile-settings-label input,
  .profile-settings--embedded .profile-settings-label input {
    height: 46px !important;
    min-height: 46px !important;
    line-height: 46px !important;
    font-size: 16px !important;
  }
  .profile-password-toggle { height: 34px !important; line-height: 34px !important; border-radius: 9px !important; }
  .profile-security-section { padding-top: 18px !important; }
  .profile-security-section + .profile-security-section { margin-top: 18px !important; }
  .profile-settings-actions .profile-settings-btn { width: 100% !important; }
  .profile-settings-locked { border-radius: 12px !important; }

  /* Purchases / wins: convert each row into a mobile card. */
  .profile-games,
  .profile-games__item {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .profile-games__item {
    margin-bottom: 10px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(43,43,51,.86);
  }
  .profile-games__win {
    width: 100% !important;
    height: 150px !important;
  }
  .profile-games__win-image {
    position: static !important;
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
  }
  .profile-games__content {
    display: flex !important;
    flex-direction: column;
    gap: 9px;
    min-height: 0 !important;
    padding: 13px !important;
    background: rgba(47,47,56,.96) !important;
  }
  .profile-games__win-info,
  .profile-games__win-info.w-auto {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .profile-games__win-name,
  .profile-games__win-desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .profile-games__win-name { font-size: 14px !important; line-height: 1.4; }
  .profile-games__win-desc { margin-top: 4px !important; font-size: 12px !important; line-height: 1.45; }
  .open-key { margin: 0 !important; order: 4; }
  .open-key_btn { width: 100% !important; min-height: 44px; border-radius: 11px !important; }
  .profile-games__price,
  .profile-games__time {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.45;
  }

  /* ---------- Forms / search ---------- */
  .search-wr__input,
  input.inp,
  textarea,
  select {
    max-width: 100%;
    font-size: 16px !important;
  }

  /* ---------- Old auth & deposit popups ---------- */
  .popup-container,
  #auth .popup-container {
    top: 50% !important;
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: 460px !important;
    height: auto !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) !important;
  }
  .popup .head-h3 { padding-right: 30px; font-size: 21px !important; }
  .popup .head-h4 { font-size: 17px !important; }
  .popup .amount-l,
  .popup .amount-r { float: none !important; width: 100% !important; margin: 0 !important; }
  .popup .amount-l .inp,
  .popup .amount-r2 .inp {
    width: 100% !important;
    height: 48px !important;
    margin: 10px 0 !important;
  }
  .popup .payment-method {
    float: none !important;
    width: calc(33.333% - 7px) !important;
    height: 52px !important;
    margin: 5px 3px !important;
    vertical-align: top;
  }
  .pm-crypto.payment-left100 { margin-left: 3px !important; }
  .popup .foo .btn { width: 100% !important; min-height: 48px !important; }
  #auth .case-err__btn { width: 100% !important; min-width: 0 !important; margin: 16px auto !important; }
  #auth .auth-form input { font-size: 16px !important; min-height: 48px !important; }

  /* New refill modal */
  .refill {
    top: 50% !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 16px;
  }
  .refill-wrap { min-height: 0 !important; }
  .refill-left {
    display: block !important;
    width: 100% !important;
    padding: 45px 12px 12px !important;
  }
  .refill-title { margin-bottom: 12px; font-size: 16px !important; }
  .refill-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
    margin-top: 0 !important;
  }
  .refill-menu__item { min-height: 38px !important; height: auto !important; padding: 8px 10px !important; font-size: 9px !important; }
  .refill-total { margin-top: 12px !important; }
  .refill-right { width: 100% !important; padding: 10px 10px 14px !important; }
  .refill-methods {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
    min-height: 0 !important;
    max-height: 230px !important;
    margin: 8px 0 12px !important;
    padding: 6px 4px 4px !important;
  }
  .refill-method { height: 66px !important; }
  .refill-inputs { flex-direction: column !important; gap: 8px !important; }
  .close-modal { top: 10px !important; right: 10px !important; min-width: 44px !important; padding: 7px 10px !important; }

  /* ---------- Footer ---------- */
  .footer {
    margin-top: 18px;
    padding: 24px 14px calc(24px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(12,12,16,.72) !important;
  }
  .footer__container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
    padding: 0 !important;
  }
  .footer__logo-wrapper { display: block !important; text-align: center; }
  .footer__logo-wrapper .hf-logo { width: 150px !important; padding: 0 !important; }
  .footer__logo-wrapper .hf-logo img { width: 100% !important; }
  .footer__copyright {
    display: block !important;
    order: 4;
    padding: 0 !important;
    text-align: center;
  }
  .footer__copyright-text {
    max-width: 560px !important;
    margin: 0 auto;
    color: #6f6f78 !important;
    font-size: 10px !important;
    line-height: 1.55;
  }
  .footer__copyright-title { padding-top: 12px; padding-bottom: 0 !important; font-size: 11px !important; }
  .footer__nav { order: 2; padding: 0 !important; }
  .footer__nav-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .footer__nav-item + .footer__nav-item { margin-left: 0 !important; }
  .footer__nav-link {
    min-height: 42px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    font-size: 10px !important;
    line-height: 1.3;
    text-align: center;
  }
  .footer__nav-link::before,
  .footer__nav-link::after { display: none !important; }
  .footer__partner {
    order: 3;
    width: 100%;
    padding-left: 0 !important;
    transform: none !important;
  }
  .footer__partner-link {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
  .footer__partner-image { display: none !important; }
  .footer__up { display: none !important; }

  /* ---------- Tables & wide legacy blocks ---------- */
  .table,
  table,
  .withdraw,
  .trade-link {
    max-width: 100% !important;
  }
  .withdraw,
  .trade-link {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Avoid hover-only behavior on touch. */
  @media (hover: none) {
    a:hover, button:hover { transform: none; }
  }
}

/* Narrow phones */
@media (max-width: 420px) {
  .container,
  .container--small { padding-left: 10px !important; padding-right: 10px !important; }

  .mobile-topbar { padding-left: 9px; padding-right: 9px; }
  .mobile-drawer { width: min(92vw, 365px); }
  .mobile-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-drawer__nav { grid-template-columns: 1fr; }

  .cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .cases__link { padding-left: 5px !important; padding-right: 5px !important; }
  .cases__name { min-height: 32px; font-size: 11px !important; }
  .cases__image-wrapper { min-height: 105px !important; }
  .cases__image { max-height: 120px !important; }
  .cases__price { font-size: 15px !important; }

  .noob-profile__info-wrapper { grid-template-columns: 100px minmax(0, 1fr); padding-left: 10px; padding-right: 10px; }
  .noob-profile__info { width: 100px !important; }
  .noob-profile__photo-wrapper { width: 80px !important; height: 80px !important; }
  .noob-profile__photo { width: 76px !important; height: 76px !important; }
  .noob-profile__name { font-size: 18px !important; }

  .profile-section-heading { padding-left: 12px !important; padding-right: 12px !important; }
  .profile-account-badge { font-size: 9px !important; padding-left: 8px !important; padding-right: 8px !important; }

  .footer__nav-list { grid-template-columns: 1fr; }
}

/* Very narrow / accessibility fallback: 1 catalog card per row. */
@media (max-width: 340px) {
  .cases__list { grid-template-columns: 1fr !important; }
  .cases__image-wrapper { min-height: 150px !important; }
  .cases__image { max-height: 160px !important; }
  .mobile-brand > span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-drawer,
  .mobile-drawer-backdrop,
  .mobile-menu-toggle span,
  .mobile-bottom-nav__item,
  .mobile-icon-btn { transition: none !important; }
}

@media (max-width: 1100px) {
  .mobile-bottom-nav__item.is-active {
    color: #fff;
    background: rgba(255,255,255,.055);
  }
  .mobile-bottom-nav__item.is-active svg { fill: var(--mobile-accent); }
}

@media (max-width: 480px) {
  .page-title::before,
  .page-title::after {
    width: 28px !important;
    flex: 0 0 28px;
  }
}

/* Product/account detail page: override late inline legacy rules on mobile. */
@media (max-width: 1100px) {
  .account-info-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .game__specs-card,
  .game__specs-card-dark {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin: 0 0 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .game__specs-header,
  .account-section-title {
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-bottom: 11px !important;
  }

  .game__specs-header i,
  .account-section-title i {
    font-size: 19px !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  .game__specs-title,
  .account-section-title h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: .1px !important;
    margin: 0 !important;
  }

  .game__specs-list { gap: 8px !important; }

  .game__specs-item,
  .account-info-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .game__specs-item:hover,
  .account-info-item:hover,
  .account-contact-btn:hover,
  .account-social-link:hover {
    transform: none !important;
  }

  .game__specs-icon {
    width: 36px !important;
    height: 36px !important;
    margin-right: 11px !important;
    border-radius: 9px !important;
  }
  .game__specs-icon i { font-size: 16px !important; }

  .game__specs-content {
    min-width: 0 !important;
    gap: 3px !important;
    align-items: flex-start !important;
  }
  .game__specs-key {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .game__specs-val {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .game__specs-val.guarantee,
  .game__specs-val.unbound {
    font-size: 13px !important;
    padding: 5px 10px !important;
  }

  .account-info-content {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  .account-link {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .account-highlight {
    margin: 10px 0 !important;
    padding: 10px 12px !important;
  }

  .account-contact-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  .account-contact-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .account-social-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    align-items: stretch !important;
  }
  .account-social-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
  }

  .game__screens {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .game__screens-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .game__screens-slide,
  .game__screens-slide img {
    max-width: 100% !important;
  }
  .game__screens-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 310px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 420px) {
  .account-social-links { grid-template-columns: 1fr !important; }
  .game__specs-card,
  .game__specs-card-dark { padding: 13px !important; }
}

/* ---------- Legacy content pages: mobile reconstruction ---------- */
@media (max-width: 1100px) {
  /* "Как купить": turn the desktop horizontal scheme into a compact vertical flow. */
  .how-works__content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .how-works__item {
    width: 100% !important;
    min-height: 78px !important;
    padding: 10px 10px 10px 78px !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
  }
  .how-works__icon {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    width: 56px !important;
    height: 56px !important;
  }
  .how-works__icon::before { inset: 5px !important; }
  .how-works__icon img { max-width: 34px !important; max-height: 34px !important; }
  .how-works__desc {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }
  .how-works__separator {
    width: 2px !important;
    height: 18px !important;
    margin: -4px 0 -4px 36px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255,198,7,.35) !important;
  }
  .how-works__separator-item { display: none !important; }

  /* Old "why we" diagram: avoid absolutely positioned desktop canvas. */
  .why-we {
    width: 100% !important;
    padding: 18px 12px !important;
    border-radius: 16px !important;
  }
  .why-we__title {
    position: static !important;
    top: auto !important;
    margin: 0 0 16px !important;
    font-size: 20px !important;
  }
  .why-we__content {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .why-we__content::before { display: none !important; }
  .why-we__item,
  .why-we__item--center,
  .why-we__item--tl,
  .why-we__item--bl,
  .why-we__item--tr,
  .why-we__item--br {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.025) !important;
  }
  .why-we__item--center { grid-column: 1 / -1 !important; }
  .why-we__logo-wrapper {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto 8px !important;
  }
  .why-we__logo-wrapper::after { inset: 12px !important; }
  .why-we__logo { width: 70px !important; height: 70px !important; margin-bottom: 8px !important; }
  .why-we__item--center .why-we__item-title { margin-top: 0 !important; }
  .why-we__item-title { font-size: 13px !important; line-height: 1.35 !important; }
  .why-we__item-desc { font-size: 12px !important; line-height: 1.45 !important; }

  /* Contacts. */
  #contact .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #contact div[class^="col-md"],
  #contact .col-md-3 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 8px !important;
    font-size: 14px !important;
  }
  #contact .icon-img {
    width: 78px !important;
    height: 78px !important;
    line-height: 72px !important;
    margin-bottom: 12px !important;
  }
  #contact .icon-img img { max-width: 66px !important; max-height: 66px !important; }

  /* Sell-account / instruction content. */
  #howToBuyPage,
  #howToBuyPageContent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #howToBuyPage { padding: 0 !important; }
  #howToBuyPage #howToBuyPageContent {
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(32,32,39,.82) !important;
    color: #efeff2 !important;
  }
  #howToBuyPageContent .title-content-step {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 18px !important;
  }
  #howToBuyPageContent .title-content-step h2 {
    padding-left: 0 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
  #howToBuyPageContent .page-step-item {
    width: 66px !important;
    height: 66px !important;
  }
  #howToBuyPageContent input,
  #howToBuyPageContent select,
  #howToBuyPageContent textarea,
  #howToBuyPageContent button {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  /* Very old single account page. */
  .account-info,
  .accinfo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .account-info { padding: 16px 14px !important; }
  .accinfo {
    display: flow-root !important;
    padding: 14px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .accinfo_h1 { display: block !important; font-size: 21px !important; line-height: 1.25 !important; margin-bottom: 12px !important; }
  .accinfo_left,
  .accinfo_right,
  .accinfo_dleft,
  .accinfo_dleftn,
  .accinfo_dleftn1 {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  .accinfo_p { width: 100% !important; max-width: 100% !important; font-size: 14px !important; line-height: 1.55 !important; }
  .accinfo_img {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
    margin: 12px auto !important;
  }
  .account-info .popup-gallery,
  .account-info .owl-carousel { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .account-info .popup-gallery img { width: 100% !important; height: auto !important; }
  .account-info .tovar__button { display: flex !important; width: 100% !important; min-height: 48px !important; justify-content: center !important; align-items: center !important; }

  /* Bonus / wish roulette. roll.css is loaded late, hence !important here. */
  .roll_lenta,
  .roll-row,
  .wraper {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .wraper {
    width: calc(100% - 28px) !important;
    margin: 18px 14px 0 !important;
    border-width: 2px !important;
    border-radius: 12px !important;
  }
  .window { height: 112px !important; }
  .list li img { width: 184px !important; height: 104px !important; border-radius: 8px !important; }
  .list li span { bottom: 6px !important; font-size: 11px !important; padding: 4px !important; }
  .roll-row {
    width: 100% !important;
    margin: 10px 0 28px !important;
    padding: 0 14px !important;
    gap: 12px !important;
  }
  .roll_text { width: 100% !important; }
  .roll_text_h {
    margin-left: 0 !important;
    font-size: clamp(30px, 11vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }
  .roll_text_s { font-size: 15px !important; line-height: 1.55 !important; }
  .roll-row h4 { padding-left: 0 !important; font-size: 17px !important; }
  .roll_lenta .button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  .prizes_list,
  .live_prizes {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .prizes_list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .prizes_item {
    width: 100% !important;
    height: 150px !important;
    margin: 0 !important;
  }
  .live_prizes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; max-height: none !important; }
  .live_prizes_item {
    width: 100% !important;
    height: 125px !important;
    margin: 0 !important;
  }
  .prizes_item span,
  .live_prizes_item_text { font-size: 10px !important; line-height: 1.25 !important; }

  /* Embeds and long external content. */
  .page iframe,
  .why-we iframe,
  .reviews iframe,
  .news iframe {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .why-we__content { grid-template-columns: 1fr !important; }
  .why-we__item--center { grid-column: auto !important; }
  #contact .row { grid-template-columns: 1fr !important; }
  .prizes_list,
  .live_prizes { grid-template-columns: 1fr 1fr !important; }
  .prizes_item { height: 128px !important; }
  .live_prizes_item { height: 110px !important; }
}

/* ========================================================================== */
/* FINAL MOBILE POLISH — 2026-09                                                */
/* ========================================================================== */
.home-about-carousel__controls { display: none; }

@media (max-width: 1100px) {
  /* ----- Notifications: long server messages must always fit the viewport. ----- */
  .inputs {
    position: fixed !important;
    top: calc(74px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 12000 !important;
    width: auto !important;
    pointer-events: none;
  }
  .inputs_info,
  .inputs_info.inputs_green,
  .inputs_info.inputs_red {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    min-height: 52px;
    margin: 0 auto 8px !important;
    padding: 13px 16px !important;
    border-radius: 13px !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.34) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: auto;
  }
  .inputs_info.inputs_green {
    color: #17170f !important;
    background: linear-gradient(180deg, #f5e5a8, #d8c482) !important;
    border-color: rgba(255,225,124,.65) !important;
  }
  .inputs_info.inputs_red {
    color: #fff !important;
    background: linear-gradient(180deg, #9d5757, #773f43) !important;
    border-color: rgba(255,142,142,.42) !important;
  }
  .inputs em {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* ----- Catalog: one large account card per row. ----- */
  .cases__list,
  #games_main.cases__list,
  #alllists.cases__list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .cases__item,
  .cases__item:hover {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 17px !important;
  }
  .cases__link {
    padding: 13px 12px 15px !important;
  }
  .cases__name,
  .cases__name_2 {
    min-height: 0 !important;
    padding: 1px 26px 4px !important;
    font-size: 14px !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
  }
  .cases__image-wrapper,
  .cases__list--our .cases__image-wrapper {
    min-height: 205px !important;
    max-height: 235px !important;
    padding: 8px 0 2px !important;
  }
  .cases__image {
    max-width: min(100%, 330px) !important;
    max-height: 225px !important;
    object-fit: contain !important;
  }
  .cases__price-wrapper {
    margin-top: 2px !important;
    padding: 0 !important;
  }
  .cases__price {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  .cases__percent {
    /* Mobile: keep the discount in document flow, centered directly
       below the orange title divider so it never covers the account image. */
    position: relative !important;
    display: block !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 6px auto 7px !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    z-index: 3 !important;
  }
  .mobile-category-grid img {
    width: 37px !important;
    height: 37px !important;
  }

  /* ----- Home: compact premium one-slide information carousel. ----- */
  .home-cases { padding-top: 8px !important; }
  .home-about-title { margin-bottom: 12px !important; }
  .home-about-carousel {
    --about-index: 0;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    position: relative;
    overflow: hidden !important;
    width: 100% !important;
    border-radius: 18px;
    background: rgba(18,18,24,.72);
    box-shadow: 0 14px 38px rgba(0,0,0,.30);
    touch-action: pan-y;
  }
  .home-about-carousel .home-about-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 302px;
    margin: 0 !important;
    padding: 17px 16px !important;
    border: 1px solid rgba(255,198,7,.14) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 96% 10%, rgba(255,174,34,.10), transparent 34%),
      linear-gradient(145deg, rgba(43,43,53,.96), rgba(25,25,32,.96)) !important;
    box-shadow: none !important;
    transform: translate3d(calc(var(--about-index) * -100%), 0, 0) !important;
    transition: transform .42s cubic-bezier(.2,.75,.2,1) !important;
  }
  .home-about-slide__inner,
  .home-about-carousel .guarantee-item-header {
    display: block !important;
    min-height: 266px;
    text-align: left !important;
  }
  .home-about-slide__art,
  .home-about-carousel .guarantee-item-img2,
  .home-about-carousel .guarantee-item-img3 {
    float: right !important;
    width: 112px !important;
    max-width: 32vw !important;
    max-height: 215px !important;
    margin: 0 -5px 8px 12px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.32));
  }
  .home-about-slide__content,
  .home-about-carousel .guarantee-item-content_2 {
    width: 100% !important;
    color: #d9d9df !important;
    font-size: 12.5px !important;
    line-height: 1.47 !important;
    text-align: left !important;
  }
  .home-about-slide__content p {
    margin: 0 0 9px !important;
  }
  .home-about-slide__content p:last-child { margin-bottom: 0 !important; }
  .home-about-slide__lead {
    color: #f5f5f7;
    font-size: 13px;
  }
  .home-about-slide__content b { color: #fff; }
  .home-about-slide__content a {
    color: #ffc607 !important;
    font-weight: 700;
    text-decoration: none;
  }
  .home-about-slide__accent {
    display: inline-block;
    padding: 6px 9px;
    border: 1px solid rgba(255,198,7,.20);
    border-radius: 9px;
    background: rgba(255,198,7,.06);
    color: #fff !important;
  }
  .home-about-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 10px 0 18px;
  }
  .home-about-carousel__arrow {
    width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    background: rgba(255,255,255,.04);
    color: #f3f3f5;
    font-size: 25px;
    line-height: 1;
  }
  .home-about-carousel__dots {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 54px;
    justify-content: center;
  }
  .home-about-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    transition: width .2s ease, background .2s ease;
  }
  .home-about-carousel__dot.is-active {
    width: 23px;
    background: #ffc607;
  }
  .home-new-title { margin-top: 2px !important; margin-bottom: 13px !important; }
  .home-account-list-wrap { display: block !important; }

  /* ----- /game: precise icon/text alignment and a compact purchase panel. ----- */
  .game__main {
    padding: 13px !important;
    gap: 12px !important;
  }
  .game__main-features {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .game__main-feature {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
  }
  .game__main-feature-img {
    float: none !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 6px;
    border-radius: 9px;
    background: rgba(255,198,7,.07);
  }
  .game__main-feature-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .game__main-feature-text {
    min-width: 0;
    color: #e6e6ea;
    font-size: 13px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
  }
  .game__main-feature-text a { color: #ffc607 !important; font-weight: 700; }
  .game__main-data {
    width: 100% !important;
    margin-top: 2px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .game__main-data-top {
    align-items: center !important;
    margin-bottom: 11px !important;
  }
  .game__main-data-new { font-size: 29px !important; }
  .game__main-data-discount {
    padding: 5px 9px !important;
    border-radius: 8px;
    font-size: 12px !important;
  }
  .game__main-data-buy {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .game__specs-card-dark,
  .game__specs-card {
    background: linear-gradient(180deg, rgba(36,36,44,.94), rgba(27,27,34,.94)) !important;
  }
  .game__specs-item {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px;
  }
  .game__specs-icon {
    margin: 0 !important;
  }
  .game__specs-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .game__specs-key { font-size: 12px !important; }
  .game__specs-val { font-size: 14px !important; }

  .account-info-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 54px;
    padding: 11px 12px !important;
  }
  .account-info-item > i {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border-radius: 9px;
    background: rgba(255,140,0,.09);
    font-size: 15px !important;
  }
  .account-info-content,
  .account-info-item > strong {
    min-width: 0;
    align-self: center;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .account-link {
    gap: 3px;
    line-height: 1.4;
  }
  .account-link i {
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 3px 0 0 !important;
    background: none !important;
  }

  /* These desktop-heavy blocks are intentionally omitted from the mobile account page. */
  .game__recommendations,
  .game-info-section--delivery,
  .game-info-section--reviews {
    display: none !important;
  }

  /* ----- Account screenshots: one full screenshot, centered, never cropped. ----- */
  .game__screens {
    margin: 14px 0 16px !important;
    padding: 12px 9px 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: rgba(18,18,24,.56);
  }
  .game__screens-title {
    margin: 0 0 10px !important;
    padding: 0 44px;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center;
  }
  .game__screens .popup-gallery,
  .game__screens .game__screens-slider,
  .game__screens .slick-list,
  .game__screens .slick-track,
  .game__screens .slick-slide,
  .game__screens .slick-slide > div {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .game__screens .slick-list {
    overflow: hidden !important;
    border-radius: 12px;
    background: rgba(0,0,0,.22);
  }
  .game__screens .slick-track {
    display: flex !important;
    align-items: center !important;
  }
  .game__screens .slick-slide {
    height: auto !important;
  }
  .game__screens-slide {
    width: 100% !important;
    min-height: 230px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px !important;
  }
  .game__screens-slide img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(62dvh, 520px) !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
  }
  .game__screens .slick-prev,
  .game__screens .slick-next {
    top: 50% !important;
    bottom: auto !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: rgba(14,14,18,.78) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
  }
  .game__screens .slick-prev { left: 6px !important; }
  .game__screens .slick-next { right: 6px !important; }
  .game__screens .slick-dots {
    position: static !important;
    display: flex !important;
    justify-content: center;
    gap: 5px;
    margin: 9px 0 0 !important;
    padding: 0 !important;
  }
  .game__screens .slick-dots li { width: 8px !important; height: 8px !important; margin: 0 !important; }
  .game__screens .slick-dots li button { width: 8px !important; height: 8px !important; padding: 0 !important; }
  .game__screens .slick-dots li button:before { font-size: 8px !important; line-height: 8px !important; width: 8px !important; height: 8px !important; }

  /* Full-screen screenshot viewer. Vertical screenshots fit entirely inside the phone. */
  .mfp-sw-gallery.mfp-wrap,
  .mfp-wrap.mfp-sw-gallery {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .mfp-sw-gallery .mfp-container {
    width: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(54px + env(safe-area-inset-top)) 10px calc(78px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  .mfp-sw-gallery .mfp-container:before { display: none !important; }
  .mfp-sw-gallery .mfp-content,
  .mfp-sw-gallery .mfp-image-holder .mfp-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mfp-sw-gallery .mfp-figure,
  .mfp-sw-gallery .mfp-figure figure {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .mfp-sw-gallery img.mfp-img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    border-radius: 10px;
  }
  .mfp-sw-gallery .mfp-figure:after { display: none !important; }
  .mfp-sw-gallery .mfp-close {
    position: fixed !important;
    top: calc(9px + env(safe-area-inset-top)) !important;
    right: 9px !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px;
    background: rgba(28,28,34,.88) !important;
    color: #fff !important;
    opacity: 1 !important;
    text-align: center !important;
  }
  .mfp-sw-gallery .mfp-counter {
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: auto !important;
    padding: 7px 10px !important;
    border-radius: 9px;
    background: rgba(28,28,34,.82);
    color: #ddd !important;
    font-size: 11px !important;
  }
  .mfp-sw-gallery .mfp-arrow {
    position: fixed !important;
    top: auto !important;
    bottom: calc(15px + env(safe-area-inset-bottom)) !important;
    width: 50px !important;
    height: 46px !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 13px !important;
    background: rgba(28,28,34,.88) !important;
    opacity: 1 !important;
  }
  .mfp-sw-gallery .mfp-arrow-left { left: calc(50% - 61px) !important; }
  .mfp-sw-gallery .mfp-arrow-right { right: calc(50% - 61px) !important; }

  /* ----- Purchased account credentials modal: centered and fully scrollable. ----- */
  #filter.filter {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 10900 !important;
    background: rgba(5,5,8,.78) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #prize.indicator,
  #prize.success {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: 520px !important;
    max-height: calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 11000 !important;
    line-height: 1.45 !important;
    -webkit-overflow-scrolling: touch;
  }
  #prize .modal__close {
    position: sticky !important;
    top: 7px !important;
    float: right;
    width: 40px !important;
    height: 40px !important;
    margin: 7px 7px -47px 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(20,20,25,.88);
    color: #fff !important;
    font-size: 27px !important;
    line-height: 38px !important;
  }
  #prize .modal__title {
    min-height: 56px;
    padding: 17px 50px 14px 14px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }
  #prize .refill__content {
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }
  #prize .refill__desc { margin-bottom: 12px !important; }
  #prize-img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 31dvh !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border-radius: 11px;
  }
  #prize-product {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 12px 11px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    user-select: text;
  }
  #prize .refill__footer-text {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  #prize .refill__footer-text img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
  }
  #prize .refill__btn {
    width: 100% !important;
    min-height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 11px !important;
  }

  /* ----- Refill modal: inputs use the full mobile width. ----- */
  .refill-inputs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .refill-rate,
  .refill-promocode,
  .refill-submit,
  button.refill-submit {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .refill-inputs input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 8px !important;
    font-size: 16px !important;
  }
  .refill-promocode { min-height: 48px !important; }
  .refill-method[data-id="card_other2"] .refill-method__info {
    display: none !important;
  }
  .refill-checkbox {
    align-items: flex-start !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  /* ----- Main promotional overlay: keep controls inside narrow phones. ----- */
  #swShopsBanner .sw-banner-content {
    width: calc(100vw - 20px) !important;
    max-width: 560px !important;
    margin: 10px !important;
  }
  #swShopsBanner .sw-close-btn {
    top: 7px !important;
    right: 7px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    background: rgba(170,32,32,.94) !important;
  }
  #swShopsBanner .sw-banner-img {
    max-height: 62dvh !important;
    object-fit: contain !important;
    border-width: 1px !important;
  }
  #swShopsBanner .sw-banner-footer {
    gap: 10px !important;
    padding: 12px !important;
    border-width: 1px !important;
  }
  #swShopsBanner .sw-dont-show-label { font-size: 12px !important; line-height: 1.35 !important; }
  #swShopsBanner .sw-close-footer-btn { padding: 9px 13px !important; font-size: 12px !important; }

  /* ----- Final readability pass for profile and payment UI. ----- */
  .profile-section-heading p,
  .profile-settings-card p,
  .profile-settings--embedded .profile-settings-card p,
  .profile-settings--embedded .profile-security-section__title p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .profile-file-picker__text,
  .profile-settings-btn,
  .profile-settings-label,
  .profile-settings-label > span,
  .profile-settings--embedded .profile-settings-label,
  .profile-settings--embedded .profile-settings-label > span {
    font-size: 13px !important;
  }
  .profile-dashboard-nav__item { font-size: 12px !important; }
  .profile-games__win-desc,
  .profile-games__price,
  .profile-games__time { font-size: 13px !important; }
  .noob-profile__trade-how-link { font-size: 11.5px !important; }
  .refill-menu__item {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .refill-right__title { font-size: 14px !important; line-height: 1.35 !important; }

  /* General last-line protection against legacy fixed widths. */
  main pre,
  main code,
  main .account-info-container,
  main .game__wrapper,
  main .game__main,
  main .game__specs-card-dark {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .home-about-carousel .home-about-slide {
    min-height: 318px;
    padding: 15px 13px !important;
  }
  .home-about-slide__art,
  .home-about-carousel .guarantee-item-img2,
  .home-about-carousel .guarantee-item-img3 {
    width: 98px !important;
    max-width: 31vw !important;
    margin-left: 9px !important;
  }
  .home-about-slide__content,
  .home-about-carousel .guarantee-item-content_2 {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .cases__image-wrapper,
  .cases__list--our .cases__image-wrapper { min-height: 190px !important; max-height: 220px !important; }
  .cases__image { max-height: 210px !important; }

  #swShopsBanner .sw-banner-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #swShopsBanner .sw-footer-buttons,
  #swShopsBanner .sw-close-footer-btn { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-about-carousel .home-about-slide,
  .home-about-carousel__dot { transition: none !important; }
}

/* FINAL MOBILE PATCH v2 — single about slide, readable catalog, full-size game gallery */
@media (max-width: 1100px) {
  /* Left drawer: larger typography and icons. */
  .mobile-drawer__nav {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .mobile-drawer__nav a {
    min-height: 64px !important;
    gap: 11px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    border-radius: 14px !important;
  }
  .mobile-drawer__nav img {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .mobile-drawer__section-title {
    margin-bottom: 12px !important;
    color: #b7b7bf !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }
  .mobile-category-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .mobile-category-grid a {
    min-height: 84px !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }
  .mobile-category-grid img {
    width: 42px !important;
    height: 42px !important;
  }

  /* Bottom “Catalog” opens only the account categories, not the whole navigation. */
  .mobile-drawer.mobile-drawer--catalog-only {
    width: min(92vw, 390px) !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-user-card,
  .mobile-drawer.mobile-drawer--catalog-only [data-mobile-search],
  .mobile-drawer.mobile-drawer--catalog-only .mobile-drawer__nav,
  .mobile-drawer.mobile-drawer--catalog-only .mobile-drawer__footer {
    display: none !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-drawer__section {
    margin-top: 18px !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-drawer__section-title {
    color: #fff !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-category-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-category-grid a {
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 13px !important;
    padding: 9px 13px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    border-color: rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.025)) !important;
  }
  .mobile-drawer.mobile-drawer--catalog-only .mobile-category-grid img {
    width: 42px !important;
    height: 42px !important;
  }

  /* Home “Information about us”: exactly one card is rendered at a time. */
  .home-about-carousel {
    display: block !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .home-about-carousel .home-about-slide {
    display: none !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  .home-about-carousel .home-about-slide.is-active {
    display: block !important;
    animation: swAboutFade .32s ease both;
  }
  .home-about-slide__inner,
  .home-about-carousel .guarantee-item-header {
    min-height: 0 !important;
  }
  @keyframes swAboutFade {
    from { opacity: .25; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* /game top feature icons: keep local PNGs and FA icons visible and aligned. */
  .game__main-feature-img {
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  .game__main-feature-img img {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .game__specs-header > i,
  .game__specs-icon > i,
  .account-info-item > i,
  .game__screens-title > i,
  .account-section-title > i,
  .account-contact-btn > i {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* /game screenshots: one large centered screenshot, no row of dots. */
  .game__screens {
    width: 100% !important;
    margin: 16px 0 18px !important;
    padding: 12px 10px 12px !important;
  }
  .game__screens-title {
    margin-bottom: 11px !important;
    padding: 0 48px !important;
  }
  .game__screens .slick-list {
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 13px !important;
    background: rgba(0,0,0,.18) !important;
  }
  .game__screens .slick-track {
    align-items: center !important;
  }
  .game__screens .slick-slide,
  .game__screens .slick-slide > div {
    width: 100% !important;
    min-height: 0 !important;
  }
  .game__screens-slide {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .game__screens-slide img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 72dvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  .game__screens .slick-dots {
    display: none !important;
  }
  .game__screens .slick-prev,
  .game__screens .slick-next {
    top: 50% !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    background-color: rgba(12,12,17,.80) !important;
    background-size: 52% 52% !important;
    background-position: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.34) !important;
    opacity: .96 !important;
    z-index: 6 !important;
  }
  .game__screens .slick-prev { left: 8px !important; }
  .game__screens .slick-next { right: 8px !important; }

  /* Full-screen screenshot viewer: restore obvious left/right buttons. */
  .mfp-sw-gallery .mfp-arrow {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    width: 50px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 15px !important;
    background: rgba(20,20,26,.84) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
    opacity: 1 !important;
    z-index: 11060 !important;
  }
  .mfp-sw-gallery .mfp-arrow-left { left: 8px !important; right: auto !important; }
  .mfp-sw-gallery .mfp-arrow-right { right: 8px !important; left: auto !important; }
  .mfp-sw-gallery .mfp-arrow::after {
    display: none !important;
  }
  .mfp-sw-gallery .mfp-arrow::before {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 37px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }
  .mfp-sw-gallery .mfp-arrow-left::before { content: '‹' !important; }
  .mfp-sw-gallery .mfp-arrow-right::before { content: '›' !important; }
  .mfp-sw-gallery img.mfp-img {
    max-width: calc(100vw - 22px) !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 420px) {
  .mobile-drawer__nav {
    grid-template-columns: 1fr !important;
  }
  .mobile-drawer:not(.mobile-drawer--catalog-only) .mobile-category-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .home-about-carousel .home-about-slide {
    padding: 15px 14px !important;
  }
  .home-about-slide__content,
  .home-about-carousel .guarantee-item-content_2 {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
  .home-about-slide__lead { font-size: 13.5px !important; }
  .game__screens-slide img { max-height: 68dvh !important; }
}

/* ========================================================================== */
/* FINAL V3 — account screenshots, centered server tabs and desktop home rhythm */
/* ========================================================================== */
@media (max-width: 1100px) {
  /* Server selector: two choices are centered instead of hugging the left edge. */
  .searchpage .tabs {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
  }
  .searchpage .tabs__list {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .searchpage .tabs__item {
    flex: 0 0 auto !important;
  }
  .searchpage .tabs__item + .tabs__item {
    margin-left: 10px !important;
  }

  /* Dedicated mobile /game gallery: never squeeze all screenshots into one row. */
  .game__screens {
    position: relative !important;
    overflow: hidden !important;
  }
  .game__screens .popup-gallery {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    background: rgba(0, 0, 0, .18) !important;
  }
  .game__screens-slider.mobile-screen-gallery {
    position: relative !important;
    line-height: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .game__screens-slider.mobile-screen-gallery > div {
    display: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .game__screens-slider.mobile-screen-gallery > div.is-mobile-active {
    display: block !important;
    animation: swScreenFade .18s ease both;
  }
  .game__screens-slider.mobile-screen-gallery .game__screens-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  .game__screens-slider.mobile-screen-gallery .game__screens-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70dvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .game__screens-slider.mobile-screen-gallery > div::before,
  .game__screens-slider.mobile-screen-gallery > div::after,
  .game__screens-slider.mobile-screen-gallery .game__screens-slide::before,
  .game__screens-slider.mobile-screen-gallery .game__screens-slide::after {
    display: none !important;
    content: none !important;
  }

  /* Hide any old Slick controls if stale cached markup is still present. */
  .game__screens .slick-prev,
  .game__screens .slick-next,
  .game__screens .slick-dots {
    display: none !important;
  }

  /* Clean arrows over the image: no large dark circles. */
  .game__screens-mobile-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 12 !important;
    width: 40px !important;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    opacity: .94 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .game__screens-mobile-arrow--prev { left: 2px !important; }
  .game__screens-mobile-arrow--next { right: 2px !important; }
  .game__screens-mobile-arrow span {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-top: 3px solid #fff !important;
    border-right: 3px solid #fff !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.95)) drop-shadow(0 0 5px rgba(0,0,0,.7)) !important;
  }
  .game__screens-mobile-arrow--prev span { transform: rotate(-135deg) !important; }
  .game__screens-mobile-arrow--next span { transform: rotate(45deg) !important; }
  .game__screens-mobile-arrow:active { opacity: .72 !important; }
  .game__screens-mobile-arrow[hidden] {
    display: none !important;
  }
  .game__screens-mobile-counter {
    position: absolute !important;
    right: 9px !important;
    bottom: 8px !important;
    z-index: 11 !important;
    min-width: 42px !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: rgba(8,8,12,.58) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    pointer-events: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  @keyframes swScreenFade {
    from { opacity: .45; }
    to { opacity: 1; }
  }
}

/* Desktop home page: restore breathing room below the category bar. */
@media (min-width: 1101px) {
  .home-cases {
    padding-top: 62px !important;
  }
  .home-about-title {
    width: 100% !important;
    clear: both !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  .home-about-carousel {
    margin-top: 0 !important;
  }
  .home-new-title {
    width: 100% !important;
    clear: both !important;
    margin-top: 58px !important;
    margin-bottom: 34px !important;
  }
  .home-account-list-wrap {
    margin-bottom: 46px !important;
  }
}

/* FINAL MOBILE PATCH v5 — bottom Menu, readable News, unified Profile controls */
@media (max-width: 1100px) {
  /* Bottom bar: Главная / Меню / Каталог / Профиль. */
  .mobile-bottom-nav__item {
    font-size: 10px !important;
  }
  .mobile-bottom-nav__item svg {
    width: 21px !important;
    height: 21px !important;
  }

  /* Drawer subtitle requested by the project. */
  .mobile-drawer__brand span {
    line-height: 1.3 !important;
  }

  /* News page: compact, readable cards in the same dark/gold mobile language. */
  .news-page {
    padding-top: 14px !important;
  }
  .news-page__container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .news-page__header {
    margin: 0 0 14px;
  }
  .news-page__title {
    margin: 0 !important;
    padding: 6px 4px 10px !important;
    text-align: center;
  }
  .news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .news-card.why-we {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(39,39,47,.96), rgba(27,27,34,.96)) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .news-card__inner {
    width: 100%;
    padding: 16px 14px 14px;
  }
  .news-card__title.why-we__title {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0 0 12px !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid rgba(255,198,7,.14) !important;
    color: #f7f7f8 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
    overflow-wrap: anywhere;
  }
  .news-card__text {
    width: 100%;
    color: #d0d0d6;
    font-size: 14px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .news-card__text p,
  .news-card__text div {
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    color: inherit;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
  }
  .news-card__text p:last-child,
  .news-card__text div:last-child {
    margin-bottom: 0;
  }
  .news-card__text ul,
  .news-card__text ol {
    margin: 10px 0;
    padding-left: 21px;
  }
  .news-card__text li {
    margin: 5px 0;
    color: #d0d0d6;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .news-card__text a {
    color: #ffc607 !important;
    text-decoration-color: rgba(255,198,7,.42) !important;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }
  .news-card__text strong,
  .news-card__text b {
    color: #fff;
  }
  .news-card__text img,
  .news-card__text video,
  .news-card__text iframe {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 12px auto !important;
    border-radius: 11px;
  }
  .news-card__text table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .news-card__date {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(255,198,7,.13);
    border-radius: 10px;
    background: rgba(255,198,7,.055);
    color: #a9a9b1;
    font-size: 12px;
    line-height: 1.2;
  }
  .news-card__date-icon {
    color: #ffc607;
    font-size: 8px;
    text-shadow: 0 0 8px rgba(255,114,2,.55);
  }
  .news-card__media {
    width: calc(100% + 28px);
    margin: 14px -14px -14px !important;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.065);
    background: rgba(10,10,14,.36);
  }
  .news-card__media img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 58dvh;
    margin: 0 !important;
    object-fit: contain;
    background: rgba(0,0,0,.16);
  }
  .news-more.buttonmore {
    min-height: 50px;
    margin: 14px 0 4px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(255,198,7,.28) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,198,7,.09), rgba(255,140,0,.05)) !important;
    color: #ffc607 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-family: inherit;
    font-weight: 800;
    text-shadow: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.03);
  }
  .news-more.buttonmore:active {
    transform: scale(.99);
    background: rgba(255,198,7,.13) !important;
  }
  .news-empty {
    border-radius: 14px !important;
  }

  /* Profile: top-up now sits in the same toolbar/style as the other profile actions. */
  .profile-dashboard-nav__item--topup {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    color: #ffc607 !important;
    font-family: inherit;
  }
  .noob-profile__balance-val {
    margin-bottom: 0 !important;
  }
  .profile-logout-row {
    padding: 0 14px 14px !important;
    background: rgba(38,38,46,.62) !important;
  }
  .profile-logout-btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}


/* ===== FINAL V7: compact mobile profile header ===== */
@media (max-width: 1100px) {
  /* Give the balance a little breathing room before the three main actions. */
  .profile-page .noob-profile__quick-actions {
    margin-top: 10px !important;
  }

  /* Purchases and wins now sit directly below Settings / Top up / Logout. */
  .profile-page .noob-profile__mobile-section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 7px;
  }
  .profile-page .noob-profile__mobile-section-action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 38px;
    padding: 7px 7px;
    border: 1px solid rgba(239,164,6,.30);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(48,46,43,.82), rgba(34,34,39,.90));
    color: #e7e2d5;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    font-size: 10px;
    line-height: 1.15;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
  }
  .profile-page .noob-profile__mobile-section-action.is-active {
    border-color: rgba(255,198,7,.52);
    color: #ffc607;
    background: linear-gradient(180deg, rgba(70,58,34,.76), rgba(42,39,34,.92));
  }
  .profile-page .noob-profile__mobile-section-label {
    min-width: 0;
  }
  .profile-page .noob-profile__mobile-section-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255,198,7,.11);
    color: #ffc607;
    font-size: 10px;
    font-weight: 850;
  }

  /* The previous standalone section navigation is replaced by the two buttons above. */
  .profile-page .noob-profile + .profile-dashboard-nav {
    display: none !important;
  }

  /* Mobile profile no longer shows the three onboarding steps or the promo-code block. */
  .profile-page .noob-profile__content {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .profile-page .noob-profile__mobile-section-action {
    gap: 4px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 9.2px;
  }
}

/* FINAL v8: external auth services load only when authorization is opened. */
.external-auth-status,
.external-auth-warning {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: #c9c9cf;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.external-auth-status[data-state="error"],
.external-auth-warning {
  color: #ffd58a;
  border-color: rgba(255,198,7,.24);
  background: rgba(255,198,7,.08);
}
@media (max-width: 1100px) {
  #auth .g-recaptcha { min-height: 0; }
  #tg-login-wrap { min-height: 42px; display:flex; align-items:center; justify-content:center; }
}

/* ===== FINAL V9: fixed mobile top bar ===== */
@media (max-width: 1100px) {
  /* Reserve exactly the same space that the fixed bar occupies. */
  .mobile-shell {
    padding-top: calc(62px + env(safe-area-inset-top)) !important;
  }

  .mobile-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(62px + env(safe-area-inset-top)) !important;
    min-height: calc(62px + env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) 12px 0 !important;
    z-index: 9000 !important;
  }
}

@media (max-width: 420px) {
  .mobile-topbar {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ===== FINAL V10: mobile screenshot viewer close button below fixed top bar ===== */
@media (max-width: 1100px) {
  /* The mobile top bar is fixed and is 62px high. Keep the screenshot close
     control below it so iPhone/Safari can always show and tap the button. */
  .mfp-sw-gallery .mfp-close {
    top: calc(70px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    z-index: 11080 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

@media (max-width: 420px) {
  .mfp-sw-gallery .mfp-close {
    top: calc(68px + env(safe-area-inset-top)) !important;
    right: 10px !important;
  }
}


/* FINAL V12 — mobile /game: screenshots gallery replaces the static account poster. */
@media (max-width: 1100px) {
  .game__wrapper-left > .game__img {
    display: none !important;
  }

  .game__wrapper-left > .game__screens.game__screens--mobile-hero {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .game__screens--mobile-hero .game__screens-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .game__screens--mobile-hero .popup-gallery {
    margin: 0 !important;
  }
}

/* ==========================================================
   FINAL v13 — desktop game artwork as the mobile page backdrop
   Mobile only. Desktop styles are intentionally untouched.
   ========================================================== */
@media (max-width: 1100px) {
  html {
    background-color: #25252d !important;
  }

  body,
  .wrapper,
  main {
    background-color: transparent !important;
  }

  /* Use exactly the same game artwork as the desktop version.
     A fixed pseudo-layer keeps it visible while the page scrolls. */
  main::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    background-color: #25252d !important;
    background-image: url("../img/background.jpg?v=1") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
}

/* ==========================================================
   FINAL v14 — mobile catalog title/divider spacing
   Long account names must never collide with the orange divider.
   Mobile only; desktop catalog styles are untouched.
   ========================================================== */
@media (max-width: 1100px) {
  /* Turn the legacy background divider into a real block AFTER the title.
     This lets the title grow to 2/3/4 lines without ever covering the art. */
  .cases__name,
  .cases__name_2 {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 18px !important;
    background: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    white-space: normal !important;
    text-align: center !important;
    text-wrap: balance;
  }

  .cases__name::after,
  .cases__name_2::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: min(311px, 94%) !important;
    aspect-ratio: 311 / 60 !important;
    margin: 8px auto 0 !important;
    background: url("../img/game-title.png") no-repeat center / contain !important;
    pointer-events: none !important;
  }

  /* Remove the legacy fixed-height image slot. The account screenshot now
     follows the divider at a consistent visual distance instead of floating
     in a large empty area. */
  .cases__image-wrapper,
  .cases__list--our .cases__image-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 3px !important;
  }

  .cases__image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 330px) !important;
    max-height: 225px !important;
    margin: 0 auto !important;
  }

  /* Discount cards keep the same rhythm: title -> divider -> discount -> image. */
  .cases__name + .cases__percent,
  .cases__name_2 + .cases__percent {
    margin-top: 4px !important;
    margin-bottom: 7px !important;
  }

  .cases__percent + .cases__image-wrapper {
    padding-top: 4px !important;
  }
}

@media (max-width: 420px) {
  .cases__name,
  .cases__name_2 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cases__name::after,
  .cases__name_2::after {
    width: min(295px, 96%) !important;
    margin-top: 7px !important;
  }

  .cases__image-wrapper,
  .cases__list--our .cases__image-wrapper {
    padding-top: 7px !important;
  }
}

/* ==========================================================
   FINAL v16 — mobile vertical scroll / desktop mouse-wheel fix
   - keeps native touch scrolling on phones;
   - restores a predictable root scroll container in responsive mode;
   - intentional modal/drawer scroll locks keep working.
   ========================================================== */
@media (max-width: 1100px) {
  html {
    overflow-y: auto;
    min-height: 100%;
  }

  body:not(.mobile-nav-open):not(.overflow-hidden):not(.popup-open) {
    overflow-y: visible;
    min-height: 100%;
    touch-action: pan-y pinch-zoom;
  }
}

/* ==========================================================
   FINAL v18 — wheel animation controls interpolation itself.
   Prevent CSS smooth-scroll from adding a second animation layer.
   ========================================================== */
@media (max-width: 1100px) {
  html {
    scroll-behavior: auto !important;
  }
}