/* =====================================================
   TRONSICK — GLOBAL MOBILE RESPONSIVE STYLESHEET
   Covers: Landing, Login, Dashboard, Games, Deposit, Withdraw
   ===================================================== */

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
table { width: 100%; }

/* ── UTILITY ── */
.mob-hidden { display: none !important; }
.mob-full   { width: 100% !important; }

/* ============================================================
   LANDING PAGE — style.css overrides
   ============================================================ */
@media (max-width: 900px) {
  /* Hero */
  .hero-wrap {
    grid-template-columns: 1fr !important;
    padding: 40px 20px 48px !important;
    gap: 28px !important;
    text-align: center;
  }
  .hero-feats-col { display: none !important; }
  .hero-left { padding-left: 0 !important; text-align: center; }
  .hero-sitename { font-size: clamp(32px, 8vw, 52px) !important; }
  .hero-left h1  { font-size: clamp(16px, 4.5vw, 24px) !important; }
  .hero-btns { justify-content: center; }
  .hero-desc { margin: 0 auto 20px; max-width: 460px; }

  /* TRX Widget */
  .trx-widget { width: 290px !important; height: 290px !important; }
  .trx-orbit-out { width: 250px !important; height: 250px !important; }
  .trx-orbit-mid { width: 195px !important; height: 195px !important; }
  .trx-coin-svg { width: 120px !important; height: 120px !important; }
  .trx-stat { padding: 7px 12px !important; }
  .trx-stat-icon { font-size: 12px !important; }
  .trx-stat-key { font-size: 8px !important; }

  /* Nav */
  .nav-menu, .nav-right { display: none !important; }
  .burger { display: flex !important; }

  /* How It Works */
  .how-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .how-card { padding: 22px 18px !important; }

  /* Games grid */
  .games-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .game-tile { padding: 22px 12px 16px !important; }
  .gt-icon { font-size: 40px !important; }
  .gt-nm { font-size: 12px !important; letter-spacing: 1px !important; }

  /* Stats bar */
  .hero-stats { padding: 12px 16px !important; flex-wrap: wrap; gap: 6px; }
  .hstat { padding: 6px 14px !important; }
  .hstat strong { font-size: 18px !important; }
  .hstat span { font-size: 10px !important; }
  .hstat-div { display: none !important; }

  /* FAQ */
  .faq-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .faq-left { text-align: center; }
  .fq-btn { font-size: 14px !important; padding: 15px 16px !important; }

  /* Sections */
  .how-sec, .games-sec, .faq-sec { padding: 64px 0 !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding: 40px 0 28px !important; }
  .fb { grid-column: 1 / -1; text-align: center; }
  .fb p { margin: 0 auto; max-width: 340px; }
  .fc { text-align: left; }
  .footer-bottom-row { flex-direction: column; text-align: center; gap: 6px; }
}

@media (max-width: 640px) {
  .hero-img-col { display: none !important; }
  .hero-wrap { padding: 24px 16px 36px !important; gap: 18px !important; }
  .hero-sitename { font-size: clamp(28px, 9.5vw, 46px) !important; }
  .hero-left h1 { font-size: clamp(12px, 4vw, 18px) !important; }
  .hero-desc { font-size: 14px !important; }
  .hbtn { padding: 12px 20px !important; font-size: 13px !important; }
  .how-grid { grid-template-columns: 1fr !important; }
  .games-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sec-head h2 { font-size: clamp(20px, 6.5vw, 32px) !important; }
  .sec-head p { font-size: 14px !important; padding: 0 10px; }
  .games-cta { font-size: 13px !important; padding: 0 14px; }
  .nav-wrap { padding: 0 14px !important; }
  .container { padding: 0 14px !important; }
}

@media (max-width: 480px) {
  .games-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .game-tile   { padding: 18px 8px 12px !important; }
  .gt-icon     { font-size: 34px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-btns   { flex-direction: column; gap: 10px; }
  .hbtn        { width: 100% !important; justify-content: center; padding: 13px !important; }
  .how-sec, .games-sec, .faq-sec { padding: 48px 0 !important; }
}

/* ============================================================
   LOGIN / SIGNUP PAGE
   ============================================================ */
@media (max-width: 560px) {
  .auth-card  { padding: 24px 18px 28px !important; margin: 0 10px; }
  .top-bar    { padding: 12px 16px !important; }
  .tb-nav a:not(.tb-signup) { display: none !important; }
  .auth-tabs  { margin-bottom: 18px !important; }
  .auth-btn   { font-size: 14px !important; padding: 12px !important; }
  .ff-iw input { font-size: 15px !important; } /* prevent zoom on iOS */
  .auth-footer-links { gap: 12px !important; flex-wrap: wrap; }
}

/* ============================================================
   DASHBOARD — dashboard.css overrides
   ============================================================ */
@media (max-width: 900px) {
  /* Sidebar collapse */
  .sidebar {
    position: fixed !important;
    left: -260px !important;
    top: 0; bottom: 0;
    width: 260px !important;
    z-index: 1000;
    transition: left .3s ease !important;
    overflow-y: auto;
  }
  .sidebar.mob-open { left: 0 !important; }
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
  }
  .sidebar-overlay.mob-open { display: block; }
  .main-content,
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    max-width: 100vw !important;
  }
  .topbar { padding: 12px 16px !important; }
  .mob-menu-btn { display: flex !important; }

  /* Stat cards */
  .stats-grid,
  .dash-stats,
  .stat-cards,
  [class*="stats-row"],
  [class*="grid-4"],
  [class*="grid-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 560px) {
  .stats-grid,
  .dash-stats,
  .stat-cards,
  [class*="stats-row"],
  [class*="grid-4"],
  [class*="grid-3"] {
    grid-template-columns: 1fr !important;
  }
  /* Tables scroll */
  .table-wrap, .history-table, [class*="tbl-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 500px; }
}

/* ============================================================
   GAMES PAGE — games.css / games2.css overrides
   ============================================================ */
@media (max-width: 900px) {
  /* Game layout: controls + canvas stack */
  .game-layout,
  .game-wrap,
  [class*="game-container"],
  [class*="game-inner"] {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .bet-panel,
  .game-controls,
  [class*="bet-side"],
  [class*="ctrl-panel"] {
    width: 100% !important;
    max-width: 100% !important;
    order: 2;
  }
  .game-canvas,
  .game-area,
  [class*="game-display"] {
    width: 100% !important;
    order: 1;
  }
}

@media (max-width: 560px) {
  /* Bet controls */
  .bet-row,
  [class*="bet-inputs"],
  [class*="input-row"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .bet-input,
  [class*="bet-field"],
  [class*="input-field"] {
    width: 100% !important;
  }
  /* Games grid on games list page */
  .games-grid-list,
  [class*="games-list"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Bet history table */
  .bet-history, [class*="history-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   DEPOSIT / WITHDRAW PAGE
   ============================================================ */
@media (max-width: 700px) {
  .deposit-wrap,
  .withdraw-wrap,
  [class*="payment-wrap"],
  [class*="deposit-inner"],
  [class*="withdraw-inner"] {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 16px !important;
  }
  .deposit-card,
  .withdraw-card,
  [class*="payment-card"],
  [class*="method-card"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .dep-methods,
  [class*="method-list"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .dep-input,
  [class*="amount-input"],
  [class*="address-input"] {
    width: 100% !important;
    font-size: 15px !important;
  }
  .dep-btn,
  [class*="submit-btn"],
  .btn-orange, .btn-red {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
  }
}

/* ============================================================
   GLOBAL TOUCH IMPROVEMENTS
   ============================================================ */
@media (max-width: 900px) {
  /* Bigger tap targets */
  button, a, input, select {
    min-height: 42px;
  }
  /* Prevent horizontal scroll */
  body { overflow-x: hidden !important; }
  /* Font size floor to prevent iOS zoom */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Mobile hamburger button (shown only on mobile) */
.mob-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  gap: 5px;
  flex-direction: column;
}
.mob-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .25s;
}

/* ============================================================
   DASHBOARD TOPBAR — Mobile Fix
   ============================================================ */
@media (max-width: 900px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-height: 52px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 900 !important;
  }
  .tb-bal {
    min-width: 0 !important;
    flex: 1 !important;
    font-size: 13px !important;
  }
  .tb-wallet {
    font-size: 11px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .burger {
    flex-shrink: 0 !important;
    order: -1 !important;
  }
  /* Push main content below fixed topbar */
  .main {
    margin-top: 52px !important;
  }
  /* Sidebar fix — slide in from left */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0; bottom: 0;
    width: 240px !important;
    z-index: 1000 !important;
    transition: left .28s ease !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  .sidebar.open,
  .sidebar.mob-open {
    left: 0 !important;
    box-shadow: 4px 0 30px rgba(0,0,0,.6) !important;
  }
  .overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 999 !important;
  }
  .overlay.open { display: block !important; }
}

/* ============================================================
   DASHBOARD FOOTER — Mobile Fix
   ============================================================ */
@media (max-width: 900px) {
  .foot-in {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 28px 16px !important;
  }
  .fl-col {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  .foot-bot {
    text-align: center !important;
    font-size: 11px !important;
    padding: 12px 16px !important;
  }
}
@media (max-width: 560px) {
  .foot-in {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .fc { text-align: center !important; }
  /* Overflow scroll for tables on mobile */
  .po-tbl-wrap,
  .tbl-box,
  .aff-rew-tbl,
  .cb-tbl { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 420px !important; }
  /* Payouts page table */
  .po-tbl { min-width: 480px !important; }
}

/* ============================================================
   PAYOUTS PAGE — Mobile Fix
   ============================================================ */
@media (max-width: 700px) {
  .po-top {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .po-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .po-nav a { font-size: 12px !important; padding: 6px 10px !important; }
  .po-hdr { padding: 16px !important; }
  .po-hdr h1 { font-size: 20px !important; }
  .po-tbl-wrap { overflow-x: auto !important; }
}


/* CONTEST + WAGER TABLE - Mobile Fix */
@media (max-width: 700px) {
  .ct-tbl, .aff-rew-tbl, .cb-tbl, .tbl { 
    min-width: 0 !important; 
    width: 100% !important;
    font-size: 12px !important;
  }
  .ct-tbl th, .ct-tbl td { padding: 8px 6px !important; }
  .ct-my-grid { grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; }
  .ct-my-card { padding: 12px 8px !important; }
  .ct-my-val { font-size: 15px !important; }
  .ct-clock { gap: 8px !important; }
  .ct-clock-val { font-size: 22px !important; }
  .ct-clock-seg { padding: 8px 10px !important; }
  .hw { padding: 0 !important; }
  .tbl-box { overflow-x: auto !important; }
  table.tbl { min-width: 0 !important; }
}
@media (max-width: 480px) {
  .ct-my-grid { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .ct-board-box { overflow-x: auto !important; }
  .ct-tbl { min-width: 320px !important; }
  #luckyDrawModal > div > div { padding: 18px 14px !important; max-height: 95vh !important; }
  .tb-val { font-size: 12px !important; }
  .prog { padding: 10px !important; }
  .prog-info { font-size: 12px !important; }
}
/* LANDING PAGE Mobile Fix */
@media (max-width: 768px) {
  .hero-inner { flex-direction: column !important; padding: 40px 16px !important; }
  .hero-text { text-align: center !important; max-width: 100% !important; }
  .hero-visual { display: none !important; }
  .hero-title { font-size: clamp(26px, 8vw, 40px) !important; }
  .hero-desc { font-size: 14px !important; }
  .hero-ctas { justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; }
  .stats-strip .stats-inner { flex-wrap: wrap !important; gap: 12px !important; }
  .earn-grid { grid-template-columns: 1fr !important; }
  .contest-grid { grid-template-columns: 1fr !important; }
  .games-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .payouts-table-wrap { overflow-x: auto !important; }
  .payouts-table { min-width: 420px !important; }
  .header-inner { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 16px !important; }
  .nav-links { display: none !important; }
  .menu-btn { display: flex !important; }
  .container { padding: 0 16px !important; }
  .section-title { font-size: clamp(20px, 6vw, 32px) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-divider { display: none !important; }
  /* Signup box in hero */
  .hero-right { width: 100% !important; }
  .signup-box { max-width: 100% !important; padding: 24px 18px !important; }
  .hero-wrap { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Payout table mobile */
  .ptbl-wrap { overflow-x: auto !important; }
  .ptbl { min-width: 500px !important; }
}

/* ============================================================
   CONTACT PAGE — Mobile Responsive Fix
   ============================================================ */
@media (max-width: 900px) {
  .ct-page-wrap,
  [class*="contact-wrap"],
  [class*="contact-inner"] {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px 16px !important;
  }
  .ct-info-col,
  [class*="contact-info"],
  [class*="contact-sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ct-form-col,
  [class*="contact-form"] {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* Contact page form inputs */
  .ct-form input,
  .ct-form textarea,
  .ct-form select,
  [class*="contact-form"] input,
  [class*="contact-form"] textarea {
    font-size: 16px !important;
    width: 100% !important;
  }
  .ct-form button,
  [class*="contact-form"] button {
    width: 100% !important;
  }
  /* Contact info cards */
  .ct-info-cards,
  [class*="contact-cards"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Policy pages */
  .policy-wrap { padding: 32px 16px 60px !important; }
  .policy-wrap h1 { font-size: 26px !important; }
  .policy-wrap h2 { font-size: 17px !important; }
}

/* ============================================================
   GLOBAL MOBILE NAV FIX FOR LANDING PAGE
   ============================================================ */
@media (max-width: 900px) {
  .mob-nav {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 20px;
    background: #0d1f35;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .mob-nav.open { display: flex !important; }
  .mob-nav a {
    padding: 11px 14px !important;
    border-radius: 9px;
    font-size: 14px !important;
    font-weight: 600;
    display: block;
  }
}