/* Lucksy V2 — Mobile */
@media (max-width: 768px) {
  /* Hide ALL desktop layout */
  .top-bar, .logo, .nav-item, .bottom-bar,
  .divider, .divider-vertical,
  .ticker-wrap, .search-bar,
  .wallet-btn, .toolbar-search, .toolbar-lang,
  .toggle-theme, .toggle-sound { display: none !important; }

  body { padding: 0 !important; overflow-y: scroll !important; overflow-x: hidden !important; height: auto !important; min-height: 100vh; -webkit-tap-highlight-color: transparent !important; }
  html { overflow: visible !important; height: auto !important; }
  *, *::before, *::after { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; }
  button, a, [onclick], .mob-nav__btn, .tab, .btn, .banner-btn, .card {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea { -webkit-user-select: text; user-select: text; }

  .main-container {
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    min-height: 100vh;
    width: 100% !important;
    overflow: hidden;
  }

  /* ─── Mobile ticker bar ─── */
  .mob-ticker {
    margin: 16px 29px 0;
    flex-shrink: 0;
    height: 42px;
    border: 1px solid #1D1D20;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .mob-ticker .ticker {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    animation: tickerScroll 20s linear infinite;
  }

  /* ─── Mobile header bar (balance + user) ─── */
  .mob-header {
    margin: 16px 29px 0;
    flex-shrink: 0;
    height: 74px;
    display: flex;
    gap: 0;
    z-index: 50;
  }
  .mob-header__left {
    width: fit-content;
    min-width: 130px;
    flex-shrink: 0;
    flex-grow: 0;
    height: 74px;
    border: 1px solid #1D1D20;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .mob-header__balance {
    height: 42px;
    background: #1D1D20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: #D9D9D9;
    cursor: pointer;
    border-radius: 12px;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
  #mobBalanceText {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  #mobBalanceText .cand { margin-left: 0 !important; margin-right: 0 !important; }
  .mob-header__online { width: auto; }
  /* Правая половина сжимается под левую — ник в маркизу уедет если не влезет */
  .mob-header__right { min-width: 0; flex-shrink: 1; }
  .mob-header__info { min-width: 0; flex: 0 1 auto; }
  /* Marquee — бегущая строка для длинных ников */
  .mob-marquee { display: flex !important; align-items: center; overflow: hidden !important; text-overflow: clip !important; }
  .mob-marquee > .mob-marquee__inner {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: mob-marquee-scroll 10s linear infinite;
  }
  @keyframes mob-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  .mob-header__name { max-width: none !important; }
  .mob-header__balance img {
    width: 16px;
    height: 16px;
    opacity: .85;
    filter: brightness(0) invert(1) opacity(.85);
    flex-shrink: 0;
  }
  .mob-header__online {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 6px;
  }
  .mob-header__online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #578F5D;
    box-shadow: 0 0 8px #578F5D;
    flex-shrink: 0;
  }
  .mob-header__online-text {
    font-size: 11px;
    color: #616068;
  }
  .mob-header__right {
    flex: 1 1 auto;
    min-width: 0;
    height: 74px;
    border: 1px solid #1D1D20;
    border-radius: 14px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px;
    cursor: pointer;
  }
  .mob-header__avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mob-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }
  .mob-header__avatar .mob-av-fallback {
    width: 18px;
    height: 20px;
    object-fit: contain;
    border-radius: 0;
    opacity: .85;
  }
  .mob-header__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .mob-header__name {
    font-size: 12px;
    font-weight: 500;
    color: #D9D9D9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-header__role {
    font-size: 10px;
    color: #616068;
  }

  /* Content areas — full width */
  .content-area, .game-area, .chat-area, .chat-wrapper {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    padding: 16px 16px calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .mob-back-btn {
    padding: 8px 16px;
    font-size: 12px;
    color: #84858D;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px 16px;
    border: 1px solid #2a2a2e;
    border-radius: 10px;
    background: transparent;
    transition: border-color .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-back-btn:active { border-color: #84858D; color: #D9D9D9; }

  .game-area {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .game-side {
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  .game-main { overflow: visible !important; }

  /* ─── Mobile bottom nav ─── */
  .mob-nav {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 306px;
    height: 62px;
    background: rgba(20, 20, 22, 0.9);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border: 1px solid #1F1F1F;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 100;
    padding: 10px 16px;
  }
  .mob-nav__btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
  }
  .mob-nav__btn:active { background: rgba(255,255,255,0.06); }
  .mob-nav__btn.active { background: rgba(255,255,255,0.06); }
  .mob-nav__btn img {
    width: 16px;
    height: 16px;
    opacity: 0.4;
    filter: brightness(0) invert(1);
    transition: opacity 0.15s;
  }
  .mob-nav__btn.active img { opacity: 0.9; }

  /* ─── Banner ─── */
  .banner {
    height: 110px !important;
    min-height: 110px !important;
    padding: 20px !important;
    padding-left: 24px !important;
    background-size: cover !important;
    background-position: center !important;
    gap: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-content: center !important;
  }
  .banner-line {
    font-size: 22px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  /* Скрыть описание внутри banner-line, показать мобильный клон */
  .banner-line .banner-desc { display: none !important; }
  .mob-banner-desc {
    font-size: 11px;
    color: #616068;
    line-height: 1.4;
    margin-top: 8px;
    width: 100%;
  }
  .banner-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    width: 95px !important;
    height: 42px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .banner-btn + .banner-btn { margin-left: 8px !important; }
  /* Баннер подписки — одна кнопка справа */
  .banner > .banner-btn-tg:only-child {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 105px !important;
    height: 36px !important;
    font-size: 12.5px !important;
    margin: 0 !important;
  }

  .cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .card { width: 100% !important; height: auto !important; min-height: auto !important; }
  .card-image { width: 100% !important; height: auto !important; aspect-ratio: 1000 / 905 !important; }
  .card-play {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    transform: none !important;
  }
  .card.mob-tapped .card-play {
    bottom: 12px !important;
    opacity: 1 !important;
  }
  .card.mob-tapped::after {
    opacity: 1 !important;
  }

  /* ─── Dashboard mobile ─── */
  .welcome { font-size: 13px !important; margin-bottom: 14px !important; }
  .profile-banner {
    height: 120px !important;
    border-radius: 16px 16px 0 0 !important;
    background-size: cover !important;
  }
  .profile-banner-overlay { border-radius: 16px 16px 0 0 !important; }
  .edit-profile-btn { left: 12px !important; top: 12px !important; padding: 7px 14px !important; font-size: 11px !important; border-radius: 10px !important; }
  .profile-body {
    height: auto !important;
    min-height: auto !important;
    padding: 14px !important;
    border-radius: 0 0 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .profile-header-bar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .user-card {
    padding: 0 !important;
    height: auto !important;
    gap: 12px !important;
  }
  .user-avatar { width: 44px !important; height: 44px !important; border-radius: 14px !important; }
  .user-name { max-width: 140px !important; font-size: 13px !important; }
  .user-id { font-size: 10px !important; }
  .user-icons { gap: 10px !important; }
  .action-btns {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    order: 2 !important;
    width: 100% !important;
  }
  .action-btns .btn { padding: 8px 14px !important; font-size: 12px !important; border-radius: 10px !important; flex: 1 !important; text-align: center !important; }

  /* Описание */
  .user-bio-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 32px !important;
    margin: 0 !important;
    order: 3 !important;
  }
  .user-bio { font-size: 11px !important; }

  /* Вагер/промо под описанием */
  .tabs-right {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    order: 4 !important;
    width: 100% !important;
  }
  .tab-info { font-size: 10px !important; padding: 0 10px !important; height: 34px !important; border-radius: 10px !important; flex: 1 !important; justify-content: center !important; }
  .tabs-right .tab { padding: 8px 14px !important; font-size: 11px !important; border-radius: 10px !important; flex: 1 !important; justify-content: center !important; }

  /* Дивайдер */
  .mob-divider {
    width: 100% !important;
    height: 1px !important;
    background: #222225 !important;
    order: 5 !important;
  }

  /* Табы история/партнёры ниже дивайдера */
  .profile-header-bar { order: 1 !important; }
  .tabs-left {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    order: 6 !important;
    width: 100% !important;
  }
  .tab { padding: 8px 14px !important; font-size: 11px !important; border-radius: 10px !important; flex: 1 !important; justify-content: center !important; }

  /* Transaction table */
  .tx-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
  .tx-table th, .tx-table td { padding: 10px 6px !important; font-size: 10px !important; word-break: break-word !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .tx-table th:first-child, .tx-table td:first-child { width: 22% !important; }
  .tx-table th:nth-child(2), .tx-table td:nth-child(2) { width: 20% !important; }
  .tx-table th:nth-child(3), .tx-table td:nth-child(3) { width: 22% !important; }
  .tx-table th:nth-child(4), .tx-table td:nth-child(4) { width: 18% !important; }
  .tx-table th:nth-child(5), .tx-table td:nth-child(5) { width: 18% !important; }
  .tx-desc { max-width: none !important; }
  .badge { font-size: 9px !important; padding: 3px 8px !important; }
  .tx-detail { display: none !important; }
  .tx-detail.open { display: table-row !important; }
  .tx-detail td { white-space: normal !important; }
  .tx-detail-inner { grid-template-columns: 1fr !important; }

  /* Partners section */
  #partnersSection { margin-top: 14px !important; }
  #partnersSection > div { padding: 16px !important; }
  #partnersSection .pay-card__desc,
  #partnersSection div[style*="font-size:12px"] { font-size: 11px !important; }

  .chat-channels {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid #1D1D20 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-shrink: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .chat-channels::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .ch-item {
    flex-shrink: 0 !important;
    width: auto !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: auto !important;
    height: 36px !important;
    background: #1D1D20 !important;
    border: 1px solid transparent !important;
  }
  .ch-item.active {
    background: #2a2a2e !important;
    border-color: #3a3a3e !important;
  }
  .ch-item__icon { width: 18px !important; height: 18px !important; }
  .ch-item__icon img { width: 18px !important; height: 18px !important; }
  .ch-item__body { gap: 0 !important; }
  .ch-item__name { font-size: 12.5px !important; line-height: 1 !important; }
  .ch-item__last { display: none !important; }

  /* ─── Chat page: fixed header with blur ─── */
  .mob-chat-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(20, 20, 22, 0.9);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    border-bottom: 1px solid #1F1F1F;
    padding-bottom: 12px;
  }
  .mob-chat-top .mob-ticker { margin: 12px 16px 0; }
  .mob-chat-top .mob-header { margin: 10px 16px 0; }

  .chat-area {
    position: fixed !important;
    top: 148px !important;
    bottom: 86px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .chat-messages {
    padding: 8px 12px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  .chat-msg { max-width: 90% !important; }
  .chat-input-wrap { padding: 8px 12px !important; flex-shrink: 0 !important; }
  #chatInputArea { flex-shrink: 0 !important; }

  .mines-field {
    border: 1px solid #1D1D20 !important;
    background: transparent !important;
    border-radius: 18px !important;
    padding: 28px 20px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mines-grid {
    width: 290px !important;
    height: 290px !important;
    max-width: calc(100vw - 80px) !important;
    aspect-ratio: 1 / 1 !important;
  }
  .dice-hero { padding: 20px !important; }
  .dice-hero__roll { font-size: 44px !important; }
  .coin-field, .coin-arena { padding: 20px !important; min-height: 300px !important; }
  .coin { width: 200px !important; height: 200px !important; }
  .chart-wrap { min-height: 240px !important; }
  .ctrl-bar { flex-wrap: wrap !important; }
  .jet-controls { max-width: 100% !important; }

  .auth-box, .wallet-box, .edit-box, .promo-box, .prof-box {
    width: calc(100vw - 32px) !important;
    max-width: 400px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
  body.mob-modal-open .mob-nav { display: none !important; }
}

@media (max-width: 400px) {
  .cards-grid { flex-direction: column !important; }
  .mob-nav { width: 290px; }
  .dice-hero__roll { font-size: 36px !important; }
  .mines-grid { max-width: 100% !important; }
  .trade-btns { flex-direction: column !important; }
  .play-row { flex-direction: row !important; }

  /* Dashboard small screens */
  .profile-banner { height: 100px !important; }
  .action-btns { gap: 6px !important; }
  .action-btns .btn { padding: 7px 10px !important; font-size: 11px !important; }
  .tabs-left, .tabs-right { gap: 6px !important; }
  .tab { padding: 7px 10px !important; font-size: 10px !important; }
  .tab-info { font-size: 9px !important; height: 30px !important; padding: 0 8px !important; }
  .user-avatar { width: 38px !important; height: 38px !important; }
  .user-name { max-width: 110px !important; font-size: 12px !important; }
}

/* iOS: принудительно font-size >=16px на инпутах на мобиле, чтобы Safari не зумил */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  .ref-date-row { flex-direction: column !important; align-items: stretch !important; }
  .ref-date-row > div { flex: 0 0 auto !important; width: 100% !important; }
  .ref-date-row > button { width: 100% !important; }
  #refFrom, #refTo { width: 100% !important; min-width: 0 !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; padding: 0 10px !important; overflow: hidden !important; }
}

@media (max-width: 768px) {
  .partner-block { padding: 16px !important; overflow: hidden !important; }
  .partner-input { max-width: 100% !important; box-sizing: border-box !important; }
}