/* =========================================================================
 * OST · Mobile-friendly overrides
 * Targets: hero, store tabs, fuel section, shop cart, modals, gift cards
 * Loaded last so it wins specificity battles without raising !important.
 * ========================================================================= */

/* ---------------------------------------------------------------- Global
 * Wallet section: the "wallet curve" (#wdPortfolioChart) is the ONLY graph
 * that should appear in the wallet section. Hide every other chart canvas
 * that historically lived alongside it.
 * ------------------------------------------------------------------------ */
#wallet .wallet-market-chart-wrap,
#wallet #chartsRow,
#wallet .charts-row {
  display: none !important;
}

/* ---------------------------------------------------------------- Tablet */
@media (max-width: 960px) {
  .hero,
  .hero-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .store-tabs,
  .demo-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 6px;
  }
  .store-tab,
  .demo-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-width: 120px;
    font-size: 13px !important;
  }
  .store-products,
  .pay-anywhere-grid,
  .interchange-desk-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .fuel2-command,
  .fuel2-station,
  .fuel2-list-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .fuel2-country-row {
    flex-wrap: wrap !important;
  }
  .fuel2-country-sel {
    width: 100% !important;
  }
  .gc2-atlas {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------- Phone */
@media (max-width: 640px) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* CRITICAL: many hero elements rely on `opacity:0 → animation forwards`
   * to fade in. With animations killed above, they stay invisible and the
   * mobile home looks empty (only the globe shows). Force them visible. */
  .hero-content,
  .hero-content *,
  .hero-tag,
  .hero h1,
  .hero-sub,
  .hero-actions,
  .hero-actions .btn,
  .hero-stats,
  .hero-stat,
  .hero-ticker,
  .hero-free-banner,
  .hero-badge-row,
  .hero-knowledge-bar,
  .knowledge-banner,
  .knowledge-item,
  .scroll-hint,
  .ost-vision-home,
  .vision-stage,
  .vision-pill,
  .vision-spacex,
  .vision-main,
  .vision-main * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Stack hero so text is on top, globe sits below at a smaller size. */
  .hero-split {
    flex-direction: column !important;
    padding: 84px 14px 16px !important;
    gap: 20px !important;
  }
  .hero-content {
    text-align: center !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .hero-globe-wrap {
    order: 2 !important;
    max-width: 280px !important;
    min-height: 240px !important;
    margin: 0 auto !important;
  }

  /* Wallet section feels cut on phones — give it the full viewport width
   * with safe-area padding and stack any side cards. */
  #wallet,
  #wallet .container,
  #wallet .wallet-command-shell,
  #wallet .wallet-command-hero,
  #wallet .wallet-dashboard,
  #wallet .wallet-market-grid-shell,
  #wallet .wallet-market-grid-main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #wallet .container,
  #wallet .wallet-command-shell {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  #wallet .wd-intelligence-grid,
  #wallet .wallet-market-grid-shell,
  #wallet .wallet-routes-grid {
    grid-template-columns: 1fr !important;
  }
  #wallet .wallet-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  body {
    font-size: 15px;
  }
  h1, .hero h1 { font-size: 1.9rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }

  /* Header / nav */
  .navbar,
  header.site-header {
    padding: 10px 12px !important;
  }
  nav {
    width: 100vw !important;
    overflow: hidden !important;
  }
  .nav-inner {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    max-width: 100vw !important;
  }
  .logo {
    min-width: 0 !important;
    max-width: calc(100vw - 188px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 1.05rem !important;
  }
  .nav-right {
    gap: 6px !important;
    flex: 0 0 auto !important;
    max-width: 176px !important;
    justify-content: flex-end !important;
  }
  .wallet-btn,
  .lang-trigger,
  .nav-toggle,
  .legacy-toggle,
  .ancient-toggle {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 8px !important;
  }
  .legacy-toggle,
  .ancient-toggle,
  .nav-right > button:first-child {
    max-width: 48px !important;
    overflow: hidden !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-mobile-toggle {
    display: inline-flex !important;
  }

  /* Stores grid → single column */
  .store-products,
  .pay-anywhere-grid,
  .interchange-desk-summary,
  .gc2-signal-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero */
  .hero {
    min-height: 78vh !important;
    padding: 28px 14px !important;
    text-align: center;
  }
  .satellite-layer {
    display: none !important;
  }
  .vision-main {
    flex-basis: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
  }

  /* Cart */
  .store-cart {
    position: sticky;
    bottom: 0;
    z-index: 12;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
    border-radius: 14px 14px 0 0 !important;
    margin: 0 -8px;
  }
  .cart-footer {
    padding: 12px !important;
  }
  .btn-pay {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
  }

  /* Fuel section */
  .fuel2-search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .fuel2-loc-input,
  .fuel2-find-btn {
    width: 100% !important;
  }
  .fuel2-fuel-tabs,
  .fuel2-sort-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .fuel2-station {
    padding: 10px !important;
  }
  .fuel2-detail-modal {
    width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
  .fuel2-det-prices,
  .fuel2-det-pay-fields,
  .fuel2-det-session-grid {
    grid-template-columns: 1fr !important;
  }

  /* Generic modal sizing */
  #ostSendModal > div,
  #mxOstCheckout > div,
  .modal-content,
  .ost-modal {
    width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Wallet dashboard */
  .wallet-dash-grid,
  .wd-balance-grid {
    grid-template-columns: 1fr !important;
  }

  /* Prediction board */
  .prediction-board,
  .prediction-stage,
  .prediction-trade {
    grid-template-columns: 1fr !important;
  }
  .prediction-pulse,
  .prediction-tape {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* Generic readability */
  pre, code {
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  iframe {
    max-width: 100% !important;
  }
  .ostg-section,
  .ostg-stage,
  .ostg-game,
  .ostg-lobby-strip,
  .ostg-tabs,
  .ostg-history {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .ostg-lobby-strip,
  .ostg-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ostg-lobby-game {
    min-width: 0 !important;
  }
  .ostg-hero-token,
  .ostg-game-hero-art span,
  .ostg-game-hero-art i,
  .ostg-loader-reels span,
  .ostg-loader-scan,
  .ostg-resolve-reels span,
  .ostg-resolve-line,
  .ostg-quick-orbit span {
    animation: none !important;
  }
  .sr,
  .sr-left,
  .sr-right,
  .sr.visible,
  .sr-left.visible,
  .sr-right.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* Tap targets */
  .btn, button, .store-tab, .fuel2-ft, .fuel2-sort, .nav-links a, .converter-tab, .converter-btn {
    min-height: 48px !important;
  }
}

/* ---------------------------------------------------------------- Tiny */
@media (max-width: 380px) {
  h1, .hero h1 { font-size: 1.65rem !important; }
  .pay-demo-header h3,
  .interchange-desk-head h3 {
    font-size: 1rem !important;
  }
  .cart-badge {
    font-size: 11px !important;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}