/* responsive.css — ClashGames mobile/tablet */

/* ═══════════════════════════════════════════════════════════════════
   PREVENT IOS INPUT ZOOM (font-size must be ≥16px on inputs)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #navbar {
    padding: 0 12px;
    height: 48px;
  }
  #navbar .nav-links {
    display: none !important;
  }
  #navbar .site-name {
    font-size: 18px;
  }
  #navbar .balance {
    font-size: 12px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #navbar .player-dropdown-btn {
    padding: 5px 8px;
    font-size: 12px;
  }
  #navbar .nav-user {
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE ROOT — less padding on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #page-root:not(.fullwidth) {
    padding: 12px !important;
  }
}
@media (max-width: 480px) {
  #page-root:not(.fullwidth) {
    padding: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH TARGETS — minimum 44px height
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .input {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .auth-page {
    align-items: flex-start;
    padding: 24px 16px;
  }
  .auth-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px;
    border-radius: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CRASH GAME — home.js overrides
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet: 2-column layout (graph + bet side by side, chat below) */
@media (min-width: 481px) and (max-width: 900px) {
  #game-page {
    grid-template-columns: 1.5fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: calc(100vh - 48px) !important;
  }
  #graph-panel  { grid-column: 1 !important; grid-row: 1 !important; }
  #bet-panel    { grid-column: 2 !important; grid-row: 1 !important; }
  #chat-panel   { grid-column: 1 / 3 !important; grid-row: 2 !important; }
  #players-panel { display: none !important; }
  .mobile-only-tab { display: flex !important; }
  #graph-wrap { height: 200px !important; flex: none !important; }
}

/* Phone: single column stacked */
@media (max-width: 480px) {
  #game-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    gap: 4px !important;
    padding: 4px !important;
  }
  #graph-panel  { grid-column: 1 !important; grid-row: 1 !important; }
  #bet-panel    { grid-column: 1 !important; grid-row: 2 !important; }
  #chat-panel   { grid-column: 1 !important; grid-row: 3 !important; min-height: 160px !important; }
  #players-panel { display: none !important; }
  .mobile-only-tab { display: flex !important; }
  #graph-wrap { height: 150px !important; flex: none !important; }
  #multiplier-display { font-size: 36px !important; }
  #multiplier-display .mult-x { font-size: 20px !important; }
  #crash-history { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; }
  #bankroll-bar { font-size: 9px; }
  .br-bar-stat { padding: 0 5px; }
}

/* Landscape phone — compact mode */
@media (max-height: 500px) and (max-width: 900px) {
  #game-page {
    grid-template-columns: 1.4fr 1fr !important;
    grid-template-rows: 1fr auto !important;
    height: calc(100vh - 48px) !important;
  }
  #graph-panel  { grid-column: 1 !important; grid-row: 1 !important; }
  #bet-panel    { grid-column: 2 !important; grid-row: 1 / 3 !important; overflow-y: auto !important; }
  #chat-panel   { grid-column: 1 !important; grid-row: 2 !important; min-height: 100px !important; }
  #players-panel { display: none !important; }
  .mobile-only-tab { display: flex !important; }
  #graph-wrap { min-height: 80px !important; }
  #multiplier-display { font-size: 28px !important; }
}

/* Bigger touch targets for game controls */
@media (max-width: 900px) {
  .quick-btn {
    padding: 8px 10px !important;
    min-height: 36px !important;
    font-size: 12px !important;
  }
  .mode-btn {
    padding: 8px !important;
    min-height: 36px !important;
  }
  #bet-btn, #cashout-btn, #auto-start-btn {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Stack 2-col grids */
  .acct-two-col {
    grid-template-columns: 1fr !important;
  }
  /* Stats grid: 2 per row minimum */
  .acct-stats-grid,
  #acct-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Transaction history: allow horizontal scroll */
  #txn-list-wrap,
  #acct-history-body,
  .hist-header {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Game stats grid: 2 per row */
  .gsc-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Charts: stack on phone */
  #crash-charts-row {
    grid-template-columns: 1fr !important;
  }
  /* Account tabs: scrollable */
  .acct-tabs-row,
  [class*="acct-tab"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BLACKJACK PAGE
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 521px) and (max-width: 800px) {
  #bj-table {
    max-width: 100% !important;
  }
  #bj-split-hands {
    gap: 8px !important;
  }
  .bj-card {
    width: 52px !important;
    height: 74px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   POKER PAGE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Widen poker containers to full width on mobile */
  #poker-page > div,
  #poker-page [style*="max-width:520px"],
  #poker-page [style*="max-width: 520px"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .adm-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
  }
  .adm-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .adm-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .crash-layout,
  .adm-two-col {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  /* Stats grids: 2 per row on tablet, 1 on phone */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .adm-topbar,
  .adm-tabs {
    padding: 0 8px !important;
  }
  .adm-content {
    padding: 12px 8px !important;
  }
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LOBBY / GAMES PAGE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #lobby-page {
    padding: 16px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE (index.html)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lp-hero-inner {
    padding: 40px 24px !important;
  }
  .lp-cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .lp-preview {
    display: none !important;
  }
  .lp-stats-bar {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .lp-stat {
    flex: 0 0 50% !important;
    padding: 16px 12px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .lp-divider {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .lp-hero-inner {
    padding: 32px 16px !important;
  }
  .lp-stat {
    flex: 0 0 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DEPOSIT PAGE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #deposit-page,
  #deposit-page > div {
    max-width: 100% !important;
    padding: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .cg-modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
  }
  #credit-modal > div {
    min-width: unset !important;
    width: calc(100vw - 32px) !important;
    padding: 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GENERAL UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
/* Horizontal scroll wrapper */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Safe tap area */
@supports (padding: env(safe-area-inset-bottom)) {
  #game-page {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #navbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGE — transaction & history grids
   (inline JS styles come after this file so need !important)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Transaction rows: stack into 2 cols on mobile */
  .txn-header {
    display: none !important;
  }
  .txn-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 8px !important;
    padding: 10px 10px !important;
    font-size: 12px !important;
  }
  /* Crash history rows: 2 cols */
  .hist-header {
    grid-template-columns: 2fr 1fr 1fr !important;
    font-size: 9px !important;
  }
  .hist-row {
    grid-template-columns: 2fr 1fr 1fr !important;
    font-size: 12px !important;
  }
  /* Balance tab */
  .txn-header,
  #bal-txn-body { overflow-x: auto !important; }
}

/* Account tabs: scrollable row */
@media (max-width: 640px) {
  .acct-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }
  .acct-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
}

/* Referral table */
@media (max-width: 640px) {
  .acct-section table {
    font-size: 11px !important;
  }
  .acct-section table td,
  .acct-section table th {
    padding: 6px 8px !important;
  }
}