/* ==========================================================================
 * OST · Mobile Scale v4 — portrait-native density (no zoom hack)
 * --------------------------------------------------------------------------
 * History:
 *   v1  html{font-size:12px}          -> "too cramped"
 *   v2  html{font-size:16px}          -> "too big, zoom out the whole page"
 *   v3  body{zoom:0.85}               -> "out of touch and feel" — because
 *       `zoom` shrinks TAP TARGETS to ~37px (literally hard to touch) and
 *       causes blurry text + fixed-element quirks on iOS Safari.
 *   v4  NATIVE density: a readable 15px base + genuinely compact spacing so
 *       the page reads dense/"zoomed out" WITHOUT a zoom transform, while tap
 *       targets stay a real 44px and text stays crisp. This is what portrait
 *       phones (the whole user base) actually want.
 *
 * Breakpoints: ≤820px phones/tablets · ≤430px Pro-Max class · ≤380px SE class.
 * ========================================================================== */

@media (max-width: 820px) {
  /* Native base — denser than 16px (fixes "too big"), never cramped, no zoom
     so touch + rendering feel solid. rem-based content scales from here. */
  html { font-size: 15px; }
  body { line-height: 1.5; }

  /* Decorative fixed backgrounds fill the viewport (no zoom compensation). */
  body::before, #particleCanvas, .hero-bg, .cursor-glow {
    height: 100lvh !important;
    min-height: 100vh !important;
  }

  /* ------- Type ramp: readable, hero capped so it never balloons --------- */
  h1, .hero-title           { font-size: clamp(1.55rem, 6vw, 1.95rem) !important; line-height: 1.16 !important; }
  h2, .section-title        { font-size: clamp(1.25rem, 4.8vw, 1.5rem) !important; line-height: 1.22 !important; }
  h3                        { font-size: 1.1rem !important; }
  h4, h5, h6                { font-size: 0.98rem !important; }
  p, li, label              { font-size: 0.92rem !important; line-height: 1.5 !important; }
  small, .small             { font-size: 0.8rem !important; }

  /* ------- Compact section rhythm = the "zoomed-out" density, natively --- */
  section, .section, .panel, .card, .glow-card, .converter-hub,
  .wallet-tab-panel, .convert-terminal, .topup-section {
    padding-top:    clamp(12px, 3vw, 16px) !important;
    padding-bottom: clamp(12px, 3vw, 16px) !important;
    padding-left:   clamp(12px, 3.2vw, 15px) !important;
    padding-right:  clamp(12px, 3.2vw, 15px) !important;
    margin-block:   clamp(8px, 2.2vw, 14px) !important;
    border-radius:  15px !important;
  }
  .container, .wrap, .layout, .content {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
  .grid, .row, .flex-row, .ct-body, .wallet-convert-grid { gap: 10px !important; }

  /* ------- Touch targets: a REAL 44px (Apple HIG), never zoom-shrunk ----- */
  .btn, button, .ct-convert-btn, .converter-btn {
    min-height: 44px;
    padding: 11px 15px !important;
    font-size: 0.92rem !important;
    border-radius: 12px !important;
  }
  .btn-sm { min-height: 40px; padding: 9px 12px !important; font-size: 0.82rem !important; }
  input, select, textarea, .ct-amount, .ct-select {
    min-height: 44px;
    font-size: 1rem !important;        /* ≥16px effective = no iOS focus auto-zoom */
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  /* ------- Cards: compact but comfortable ------------------------------- */
  .faucet-card, .lp-card, .pred-card, .stock-card, .market-card {
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 13px !important;
  }
  .faucet-card h3, .lp-card h3, .pred-card h3 { font-size: 1rem !important; }

  /* Wide data scrolls sideways — never a cramped squeeze. */
  table { font-size: 0.85rem !important; }
  .table-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hero: present but ~half a screen, not two screens. */
  .hero, .cinematic, .splash {
    min-height: 54vh !important;
    padding: 28px 15px !important;
  }

  /* Stat strips: 2 columns of readable numbers beats 4 slivers. */
  .hero-stats, .stats-grid, .stat-row, .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

/* iPhone 12–17 Pro / Pro Max class — tighter gutters, same readable type. */
@media (max-width: 430px) {
  .container, .wrap, .layout, .content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* iPhone SE / mini — narrowest portrait screens: a hair smaller base so dense
   grids fit, but still native (no zoom) and touch targets stay 44px. */
@media (max-width: 380px) {
  html { font-size: 14px; }
  h1, .hero-title    { font-size: 1.5rem !important; }
  h2, .section-title { font-size: 1.22rem !important; }
}