/* ══════════════════════════════════════════════════════
   PLAYMAX MOBILE CSS  —  Auto-detected, site-wide
   Injected into all pages. Targets max-width: 768px
   ══════════════════════════════════════════════════════ */

/* ── TOUCH IMPROVEMENTS ── */
@media (max-width: 768px) {
  * { -webkit-tap-highlight-color: transparent; }
  input, select, textarea, button { font-size: 16px !important; } /* Prevent iOS zoom */
}

/* ══════════════════════
   INDEX / LANDING PAGE
   ══════════════════════ */
@media (max-width: 768px) {
  /* Header */
  header { padding: 0 1rem !important; height: 58px !important; }
  .nav { display: none !important; }
  .hdr-right { gap: 6px !important; }
  .btn-ghost { padding: 0.4rem 0.8rem !important; font-size: 0.75rem !important; }
  .btn-primary { padding: 0.4rem 0.9rem !important; font-size: 0.75rem !important; }

  /* Hero */
  .hero { padding: 6rem 1.2rem 4rem !important; }
  .hero-title { font-size: clamp(2.8rem, 15vw, 5rem) !important; }
  .hero-desc { font-size: 0.95rem !important; margin-bottom: 2rem !important; }
  .hero-ctas-wrap { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .btn-hero-primary, .btn-hero-ghost { width: 100% !important; text-align: center !important; padding: 1rem !important; }
  .trust-row { gap: 6px !important; }
  .trust-pill { font-size: 0.68rem !important; padding: 5px 10px !important; }

  /* Section */
  .section { padding: 4rem 1.2rem !important; }
  .section-title { font-size: clamp(1.7rem, 8vw, 2.5rem) !important; }

  /* Payment banner */
  .payment-banner { padding: 1.2rem !important; }
  .payment-inner { flex-direction: column !important; gap: 1rem !important; }
  .payment-methods { gap: 8px !important; }
  .pay-chip { font-size: 0.72rem !important; padding: 7px 12px !important; }

  /* Games grid (index page) */
  .games-grid { grid-template-columns: 1fr !important; border-radius: 14px !important; }
  .game-tile { border-right: none !important; padding: 1.2rem 1.4rem !important; }
  .gt-name { font-size: 1rem !important; }

  /* Features */
  .features-grid { grid-template-columns: 1fr !important; }
  .feature-tile { border-right: none !important; padding: 2rem 1.6rem !important; }
  .feature-tile:nth-child(n+3) { border-bottom: 1px solid var(--border) !important; }
  .feature-tile:last-child { border-bottom: none !important; }
  .ft-title { font-size: 1.25rem !important; }

  /* Perks */
  .perks-grid { grid-template-columns: 1fr !important; }

  /* Steps */
  .steps-row { grid-template-columns: 1fr !important; }

  /* Crash band */
  .crash-live-band { padding: 2.5rem 1.2rem !important; }
  .crash-band-inner { flex-direction: column !important; gap: 1.5rem !important; }
  .crash-mult-display { font-size: 3.5rem !important; }
  .crash-desc { text-align: center !important; }

  /* CTA */
  .cta-block { padding: 3rem 1.2rem !important; border-radius: 16px !important; margin: 0 1rem !important; }
  .cta-title { font-size: clamp(2rem, 10vw, 3.5rem) !important; }
  .cta-btns { flex-direction: column !important; align-items: stretch !important; }

  /* Footer */
  footer { padding: 2rem 1.2rem !important; }
  .footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 1.2rem !important; }
  .footer-links { gap: 1.2rem !important; flex-wrap: wrap !important; }

  /* Modal */
  .modal-content { padding: 1.8rem 1.4rem !important; border-radius: 16px !important; }
  .signup-grid { grid-template-columns: 1fr !important; }
  .modal-header h2 { font-size: 1.6rem !important; }

  /* Ref invite */
  .ref-invite-body { flex-direction: column !important; }
  .ref-invite-right { min-width: unset !important; width: 100% !important; }
  .ref-invite-title { font-size: 1.3rem !important; }
}

/* ══════════════════════
   GAMES DASHBOARD
   ══════════════════════ */
@media (max-width: 768px) {
  /* Topbar */
  .topbar { padding: 0 14px !important; height: 58px !important; }
  .topbar-logo img { height: 36px !important; }
  .topbar-nav { display: none !important; }
  .topbar-right { gap: 6px !important; }
  .balance-pill { padding: 0.25rem 0.7rem 0.25rem 0.3rem !important; font-size: 0.8rem !important; }
  .btn-deposit { padding: 0.38rem 0.9rem !important; font-size: 0.78rem !important; }
  .topbar-divider { display: none !important; }

  /* Page / inner */
  .page { padding-top: 58px !important; }
  .inner { padding: 20px 14px 80px !important; }

  /* Hero banner */
  .hero { height: auto !important; padding: 1.6rem 1.4rem !important; border-radius: 18px !important; }
  .hero-deco { display: none !important; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
  .btn-hero { padding: 0.6rem 1.4rem !important; font-size: 0.85rem !important; }

  /* Games grid */
  .games-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Game cards */
  .game-card { border-radius: 14px !important; }
  .gc-banner { height: 130px !important; }
  .gc-info { padding: 10px 12px 12px !important; }
  .gc-name { font-size: 0.9rem !important; }

  /* Section header */
  .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }

  /* Bottom mobile nav — add a fixed nav bar */
}

/* ══════════════════════
   GAME PAGES (mines, dice, etc.)
   ══════════════════════ */
@media (max-width: 768px) {
  /* Game header */
  .header, .game-header { padding: 0.7rem 1rem !important; }
  .header-left { gap: 0.8rem !important; }
  .back-btn { padding: 0.4rem 0.7rem !important; font-size: 0.78rem !important; }
  .game-title { font-size: 1.05rem !important; }
  .header-balance { font-size: 0.82rem !important; padding: 0.35rem 0.75rem !important; }

  /* Game layout: stack left + right panels */
  .game-content {
    flex-direction: column !important;
    padding: 0.8rem 0.9rem !important;
    gap: 0.8rem !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Left panel becomes a top control bar */
  .left-panel {
    width: 100% !important;
    flex-direction: column !important;
  }

  /* Right panel takes remaining space */
  .right-panel { flex: 1 !important; min-height: 0 !important; }

  /* Body overflow fix for games */
  body { overflow: auto !important; height: auto !important; min-height: 100vh !important; }

  /* Grid cells in game */
  .mine-cell, .tile, .grid-cell {
    border-radius: 8px !important;
  }

  /* Mines grid: make it square and fit screen */
  .grid { gap: 5px !important; }

  /* Stats box / control box */
  .stats-box { padding: 0.6rem 0.9rem !important; }
  .control-box { padding: 0.7rem 0.9rem !important; }
  .mult-display { padding: 0.55rem 0.9rem !important; }
  .mult-value { font-size: 1.25rem !important; }

  /* Quick bets */
  .quick-bets { grid-template-columns: repeat(4, 1fr) !important; }
  .qbet { padding: 0.35rem 0 !important; font-size: 0.7rem !important; }

  /* Mine selector */
  .mines-selector { grid-template-columns: repeat(4, 1fr) !important; }

  /* Bet input */
  .bet-input { padding: 0.55rem 0.75rem !important; font-size: 0.9rem !important; }

  /* Buttons */
  .btn { padding: 0.75rem !important; font-size: 0.88rem !important; }

  /* Provably fair / seed section */
  .seed-section, .seed-box { padding: 0.7rem !important; }

  /* Main container height */
  .main-container { height: auto !important; min-height: 100vh !important; }

  /* Roulette specific */
  .roulette-wheel-wrap, .wheel-container { max-width: 100% !important; }
  .number-grid { gap: 3px !important; }
  .num-btn { min-height: 38px !important; font-size: 0.8rem !important; }

  /* Blackjack / Baccarat card tables */
  .table-area, .bj-table, .bac-table { padding: 1rem 0.7rem !important; }
  .card { width: 52px !important; height: 74px !important; font-size: 1rem !important; }
  .card-sm { width: 42px !important; height: 60px !important; }

  /* Coinflip */
  .coin-wrap { width: 130px !important; height: 130px !important; }

  /* Limbo */
  .limbo-display { font-size: 4rem !important; }

  /* Crash / Limbo chart */
  canvas { max-width: 100% !important; }

  /* Dice */
  .dice-container { gap: 8px !important; }
  .die { width: 60px !important; height: 60px !important; }

  /* Cups */
  .cups-row { gap: 12px !important; }
  .cup-item { width: 70px !important; }

  /* Chicken road */
  .road-grid { gap: 4px !important; }
  .road-cell { min-height: 52px !important; }
  .chicken-icon { font-size: 1.8rem !important; }

  /* Lootbox */
  .loot-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Chat panel hide on mobile games */
  .chat-panel, .live-bets-panel { display: none !important; }

  /* History / Recent bets ticker */
  .bet-history { font-size: 0.78rem !important; }
}

/* ══════════════════════
   PROFILE PAGE
   ══════════════════════ */
@media (max-width: 768px) {
  .profile-wrap, .profile-page { padding: 1rem !important; }
  .profile-header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
  .profile-avatar { width: 60px !important; height: 60px !important; font-size: 1.5rem !important; }
  .profile-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .profile-card, .stat-card { padding: 1rem !important; border-radius: 12px !important; }
  .profile-tabs { gap: 4px !important; overflow-x: auto !important; white-space: nowrap !important; }
  .tab-btn { padding: 0.5rem 0.9rem !important; font-size: 0.78rem !important; flex-shrink: 0 !important; }
}

/* ══════════════════════
   DEPOSIT / WITHDRAW
   ══════════════════════ */
@media (max-width: 768px) {
  .deposit-wrap, .withdraw-wrap, .page-wrap { padding: 1rem 1rem 5rem !important; }
  .amount-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .method-cards { grid-template-columns: 1fr !important; }
  .method-card { padding: 1rem !important; }
  .deposit-container, .withdraw-container { max-width: 100% !important; padding: 1.4rem !important; }
}

/* ══════════════════════
   LEADERBOARD
   ══════════════════════ */
@media (max-width: 768px) {
  .lb-table { font-size: 0.82rem !important; }
  .lb-row { padding: 0.7rem 0.8rem !important; }
  .lb-col-wager, .lb-col-games { display: none !important; }
  .lb-header { padding: 1.5rem 1rem !important; }
  .lb-filters { flex-wrap: wrap !important; gap: 6px !important; }
  .lb-filter-btn { padding: 0.4rem 0.9rem !important; font-size: 0.75rem !important; }
  .podium { gap: 8px !important; }
  .podium-card { padding: 1rem 0.8rem !important; }
}

/* ══════════════════════
   BONUSES / RAKEBACK / REFERRAL
   ══════════════════════ */
@media (max-width: 768px) {
  .bonus-grid, .bonus-cards { grid-template-columns: 1fr !important; }
  .bonus-card { padding: 1.4rem !important; }
  .referral-box, .rakeback-box { padding: 1.4rem !important; }
  .referral-link-row { flex-direction: column !important; gap: 8px !important; }
  .copy-btn { width: 100% !important; }
  .ref-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════
   TOPBAR  (shared across logged-in pages)
   ══════════════════════ */
@media (max-width: 768px) {
  /* Mobile hamburger / bottom nav approach */
  .topbar-nav { 
    display: none !important; 
  }

  /* Balance pill: compact */  
  #balanceDisplay { font-size: 0.82rem !important; }
  .profile-btn .profile-name { display: none !important; }
}

/* ══════════════════════
   MOBILE BOTTOM NAV BAR
   Shown on logged-in game pages
   ══════════════════════ */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex !important;
  }
}

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: rgba(11, 13, 22, 0.97);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.3rem 0.8rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

.mobile-nav-item svg { 
  width: 22px; height: 22px; 
  opacity: 0.6;
  transition: opacity 0.2s;
}

.mobile-nav-item.active,
.mobile-nav-item:hover { color: #00f0ff; }
.mobile-nav-item.active svg,
.mobile-nav-item:hover svg { opacity: 1; }

.mobile-nav-item.active .mobile-nav-dot {
  display: block;
}

.mobile-nav-dot {
  display: none;
  width: 4px; height: 4px;
  background: #00f0ff;
  border-radius: 50%;
  box-shadow: 0 0 6px #00f0ff;
  margin-top: 1px;
}

/* Deposit button highlight */
.mobile-nav-deposit {
  background: linear-gradient(135deg, rgba(0,85,255,0.2), rgba(0,240,255,0.15)) !important;
  border: 1px solid rgba(0,240,255,0.25) !important;
  border-radius: 12px !important;
  color: #00f0ff !important;
  padding: 0.4rem 0.9rem !important;
}
.mobile-nav-deposit svg { opacity: 1 !important; }

/* Body padding for bottom nav on game pages */
@media (max-width: 768px) {
  .has-mobile-nav {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}

/* ══════════════════════
   GENERAL SMALL SCREEN
   ══════════════════════ */
@media (max-width: 480px) {
  /* Games grid: single col on very small screens */
  .games-grid { grid-template-columns: 1fr !important; }

  /* Font size reductions */
  .hero-title { font-size: clamp(2.4rem, 16vw, 4rem) !important; }
  .section-title { font-size: clamp(1.5rem, 9vw, 2.2rem) !important; }

  /* Modals full-screen */
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.6rem 1.2rem !important;
  }
  .modal { align-items: flex-end !important; }

  /* Game grid cells slightly smaller */
  .gc-banner { height: 110px !important; }

  /* Card game adjustments */
  .card { width: 46px !important; height: 65px !important; font-size: 0.9rem !important; }
}

/* ══════════════════════
   SAFE AREA SUPPORT (notch, etc.)
   ══════════════════════ */
@supports (padding: max(0px)) {
  header, .header, .topbar {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}