/* Lucksy V2 — Mobile Layout */
@media (max-width: 1024px) {
  /* ─── Hide 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; }
  html { overflow: auto !important; }
  body { overflow: auto !important; height: auto !important; min-height: 100vh; }

  .main-container {
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ─── Mobile header ─── */
  .mob-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    background: rgba(10,10,11,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #1D1D20;
    flex-shrink: 0;
  }
  .mob-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .mob-logo { width: 18px; height: 20px; }
  .mob-brand { font-family: 'Jost', sans-serif; font-size: 16px; color: #99989F; }
  .mob-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mob-balance {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #D9D9D9;
    background: #1D1D20;
    padding: 6px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .mob-balance:active { background: #2a2a2e; }
  .mob-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #D9D9D9;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mob-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
  .mob-av-fallback { width: 14px !important; height: 16px !important; object-fit: none !important; border-radius: 0 !important; filter: brightness(0); opacity: 0.4; }

  /* ─── Mobile bottom nav ─── */
  .mob-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(10,10,11,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #1D1D20;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mob-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: #616068;
    transition: color 0.15s;
    padding: 6px 12px;
  }
  .mob-nav__tab.active { color: #D9D9D9; }
  .mob-nav__tab img {
    width: 18px;
    height: 18px;
    opacity: 0.4;
    filter: brightness(0) invert(1);
    transition: opacity 0.15s;
  }
  .mob-nav__tab.active img { opacity: 0.9; }
  .mob-nav__tab span {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
  }

  /* ─── Games dropdown ─── */
  .mob-games-menu {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 49;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s;
  }
  .mob-games-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mob-games-menu__inner {
    background: #19191B;
    border-top: 1px solid #2a2a2e;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .mob-game-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    background: #1D1D20;
    text-decoration: none;
    color: #D9D9D9;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    transition: background 0.15s;
  }
  .mob-game-link:active { background: #2a2a2e; }
  .mob-game-link img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
  }

  /* ─── Content area — full width ─── */
  .content-area, .game-area, .chat-area {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    padding: 16px !important;
    padding-bottom: 80px !important;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ─── Game layout: stack vertically ─── */
  .game-area {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .game-side {
    width: 100% !important;
    max-height: none !important;
    flex-shrink: 0 !important;
  }
  .side-card { max-height: 300px !important; }
  .game-main { overflow: visible !important; }

  /* ─── Banner ─── */
  .banner { height: auto !important; min-height: 100px !important; padding: 20px !important; }
  .banner-line { font-size: 22px !important; flex-wrap: wrap !important; }
  .banner-btn { position: relative !important; top: auto !important; right: auto !important; transform: none !important; margin-top: 12px !important; }
  .banner-desc { font-size: 11px !important; }

  /* ─── Cards grid ─── */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    flex-wrap: nowrap !important;
  }
  .card { width: 100% !important; height: auto !important; min-height: 200px !important; }
  .card-image { height: 130px !important; }

  /* ─── Dashboard ─── */
  .profile-banner { height: 140px !important; }
  .profile-body { height: auto !important; min-height: auto !important; padding-bottom: 20px !important; }
  .profile-header-bar { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin: 16px 0 !important; }
  .user-bio-wrap { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin: 8px 0 !important; }
  .action-btns { position: relative !important; right: auto !important; top: auto !important; height: auto !important; padding: 12px 16px !important; flex-wrap: wrap !important; }
  .tabs-left, .tabs-right { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; flex-wrap: wrap !important; padding: 0 16px 16px !important; }
  .tx-table { font-size: 11px !important; }
  .tx-table th, .tx-table td { padding: 10px 8px !important; }

  /* ─── Chat ─── */
  .chat-area {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-bottom: 60px !important;
  }
  .chat-messages { padding: 8px 12px !important; }
  .chat-msg { max-width: 90% !important; }
  .chat-input-wrap { padding: 8px 12px !important; }
  .pin-bar { padding: 6px 12px !important; }

  /* ─── Mines grid ─── */
  .mines-field { padding: 12px !important; }
  .mines-grid { width: 240px !important; height: 240px !important; }

  /* ─── Dice hero ─── */
  .dice-hero { padding: 20px !important; }
  .dice-hero__roll { font-size: 48px !important; }

  /* ─── Coin field ─── */
  .coin-field { padding: 20px !important; }
  .coin { width: 80px !important; height: 80px !important; }

  /* ─── Trade chart ─── */
  .chart-wrap { min-height: 250px !important; }
  .ctrl-bar { flex-wrap: wrap !important; }

  /* ─── Plinko ─── */
  .canvas-wrap { border-radius: 14px !important; }

  /* ─── LucksyJet ─── */
  .jet-controls { max-width: 100% !important; }

  /* ─── Modals fix ─── */
  .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;
  }

  /* ─── Menu page ─── */
  .menu-item { padding: 12px 14px !important; }

  /* ─── FAQ ─── */
  .faq-q { padding: 14px 16px !important; }

  /* ─── Legal pages ─── */
  .legal-section { margin-bottom: 20px !important; }
}

/* ─── Small phones ─── */
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr !important; }
  .card { min-height: 180px !important; }
  .mob-header { height: 50px !important; padding: 0 12px !important; }
  .mob-balance { font-size: 12px !important; padding: 5px 10px !important; }
  .dice-hero__roll { font-size: 36px !important; }
  .mines-grid { width: 200px !important; height: 200px !important; }
  .trade-btns { flex-direction: column !important; }
  .ctrl-bar { flex-direction: column !important; }
  .ctrl-bar .ctrl-col { width: 100% !important; }
  .ctrl-bar .seg-btns { flex-wrap: wrap !important; }
  .play-row { flex-direction: column !important; }
}