/**
 * CoinRush Global Responsive Utilities
 * ─────────────────────────────────────
 * Ensures every page scales properly on any screen size.
 * Loaded on ALL pages via base templates.
 *
 * Breakpoints (mobile-first override):
 *   ≤ 1200px — tablets / small desktops
 *   ≤  900px — large phones / tablet portrait
 *   ≤  600px — phones
 *   ≤  380px — small phones (iPhone SE, Galaxy S)
 */

/* ============================================
   1.  GLOBAL OVERFLOW & BOX-SIZING SAFETY
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — avoids iOS Safari address bar jump */
}

/* Prevent any element from causing horizontal scroll */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent text inputs from zooming on iOS (font-size < 16px triggers zoom)
   NOTE: Exclude #sc-panel (support chat widget) — it manages its own sizing */
input[type="text"]:not(#sc-panel *),
input[type="email"]:not(#sc-panel *),
input[type="password"]:not(#sc-panel *),
input[type="number"]:not(#sc-panel *),
input[type="tel"]:not(#sc-panel *),
input[type="url"]:not(#sc-panel *),
input[type="search"]:not(#sc-panel *),
select:not(#sc-panel *),
textarea:not(#sc-panel *) {
  font-size: max(16px, 1em);
}

/* ============================================
   2.  SAFE AREA INSETS (notched phones)
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Fixed bottom elements need safe area clearance */
  .jp-sound-toggle,
  .jp-htp-fab,
  .plinko-sound-toggle,
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   3.  TOUCH TARGETS — 44px minimum (WCAG 2.5.5)
   NOTE: Exclude #sc-panel and #sc-fab (support chat widget)
   ============================================ */
@media (pointer: coarse) {
  button:not(#sc-panel button):not(#sc-fab),
  a:not(#sc-panel a),
  [role="button"]:not(#sc-panel [role="button"]),
  .tab-btn, .nav-link,
  input[type="checkbox"]:not(#sc-panel input),
  input[type="radio"]:not(#sc-panel input) {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   4.  TABLETS / SMALL DESKTOPS  (≤ 1200px)
   ============================================ */
@media (max-width: 1200px) {
  /* Global container squeeze */
  .ln-wrap, .missions-main, .hof-main, .social-main,
  .guild-main, .profile-main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================
   5.  LARGE PHONES / TABLET PORTRAIT  (≤ 900px)
   ============================================ */
@media (max-width: 900px) {
  /* Side-by-side layouts → stack */
  .two-col, .split-layout, .game-layout {
    flex-direction: column !important;
  }

  /* Chat panels beside game → below game */
  .chat-panel, .sidebar, .jp-sidebar--right {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix hard-coded widths that overflow */
  .hof-modal, .guild-modal, .rules-modal,
  [class*="modal"] {
    max-width: calc(100vw - 32px) !important;
  }
}

/* ============================================
   6.  PHONES  (≤ 600px)
   ============================================ */
@media (max-width: 600px) {
  /* Tighter padding globally */
  .ln-wrap, .missions-main, .hof-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Tables → horizontal scroll instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed-width elements that break on phones */
  .hof-search-input,
  .search-input,
  [class*="search"] input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modals should fill screen width */
  .modal-content, .modal-body, .modal-dialog,
  [class*="modal"]:not(.dr-modal-backdrop) {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
  }

  /* Grid columns: max 2 on phones */
  .stats-grid, .competitions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ensure long text doesn't overflow */
  .username, .player-name, .winner-name,
  [class*="name"], [class*="username"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Prevent horizontal overflow from wide fixed elements */
  pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-all;
  }
}

/* ============================================
   7.  SMALL PHONES  (≤ 380px — iPhone SE, etc.)
   ============================================ */
@media (max-width: 380px) {
  /* Even tighter */
  .ln-wrap, .missions-main, .hof-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Smaller headings */
  h1, .page-title, .hero-title, .missions-title {
    font-size: 1.5rem !important;
  }

  h2, .section-title {
    font-size: 1.2rem !important;
  }

  /* Button text smaller — exclude support chat widget */
  .btn:not(#sc-panel .btn),
  button:not(.dr-modal-close):not(.nav-btn):not(#sc-panel button) {
    font-size: 13px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================
   8.  LANDSCAPE PHONES (short viewport)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce hero heights */
  .hof-hero, .landing-hero, .guild-hero {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 30px !important;
  }

  /* Navbar should be compact */
  .navbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ============================================
   9.  PRINT (hide non-essential)
   ============================================ */
@media print {
  .navbar, footer, .chat-panel, .sidebar,
  .wallet-modal-overlay, .dr-modal-backdrop,
  .jp-app__orbitals, .jp-app__shooters,
  .cursor-trail, [class*="confetti"] {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   10. REDUCED MOTION (accessibility)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   11. HALL OF FAME — missing phone fixes
   ============================================ */
@media (max-width: 600px) {
  /* Fixed width: 400px / 300px elements */
  .hof-avatar-preview,
  .avatar-preview-circle {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto;
  }

  .hof-search-bar {
    width: 100% !important;
  }

  .podium-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .prize-stand {
    flex: 0 0 auto;
    width: calc(33.33% - 8px);
    min-width: 90px;
  }
}

/* ============================================
   12. MISSIONS — missing phone refinements
   ============================================ */
@media (max-width: 480px) {
  .missions-main {
    padding: 70px 10px 30px !important;
  }

  .missions-title {
    font-size: 1.5rem !important;
  }

  .mission-card {
    padding: 14px !important;
  }

  .mission-rewards {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .countdown-timer {
    font-size: 12px !important;
  }
}

/* ============================================
   13. LOTTERY V2 — responsive additions
   ============================================ */
@media (max-width: 768px) {
  .lottery-container {
    padding: 16px !important;
  }

  .lottery-grid {
    grid-template-columns: 1fr !important;
  }

  .ticket-display {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .lottery-title {
    font-size: 1.5rem !important;
  }

  .lottery-card {
    padding: 14px !important;
  }
}

/* ============================================
   14. CONTENT PAGES (about, faq, etc.)
   ============================================ */
@media (max-width: 600px) {
  .content-page-main {
    padding: 80px 14px 40px !important;
  }

  .content-page-main h1 {
    font-size: 1.6rem;
  }

  .content-page-main h2 {
    font-size: 1.3rem;
  }

  .content-page-main p,
  .content-page-main li {
    font-size: 14px;
    line-height: 1.6;
  }
}