/**
 * GWH SOVEREIGN MOBILE CSS v2.0
 * ─────────────────────────────────────────────────────────────────────────────
 * Rules:
 *   • All pages (except LP, Staking, Whitepaper): consistent card/box sizes
 *   • No overflowing elements, no tiny text
 *   • Bottom nav always visible and readable
 *   • Contract address never wraps wildly
 *   • Cards all same width in their row
 *   • Touch targets ≥ 44px
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── GLOBAL MOBILE RESETS ────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent horizontal scroll on any page */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* All flex rows wrap on mobile */
  .ctrl-row, .stat-row, .hdr-chips, .price-sub,
  .eng-cluster, .hdr-r, .army-stats, .army-master,
  .tier-row, .dist-bars, .mstats, .mstats-grid {
    flex-wrap: wrap !important;
  }

  /* ── CONTRACT ADDRESS ─────────────────────────────────────────────────── */
  .caa, .ca-addr, .gf-ca-addr, .cab-addr, #gwh-ca {
    font-size: 13px !important;
    word-break: break-all !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 6px 4px !important;
    letter-spacing: 0 !important;
  }

  /* Contract action buttons — stack vertically */
  .cab .br, .ca-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .cab .br a, .ca-buttons a, .ca-buttons button {
    width: 100% !important;
    max-width: 260px !important;
    text-align: center !important;
  }

  /* ── TOP NAV ──────────────────────────────────────────────────────────── */
  #gwh-topnav {
    padding: 0 10px !important;
    height: 46px !important;
  }
  #gwh-topnav .gn-links { display: none !important; }
  #gwh-topnav .gn-brand {
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
  }
  #gwh-topnav .gn-wbtn {
    font-size: 11px !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
  }

  /* ── BOTTOM NAV ───────────────────────────────────────────────────────── */
  #gwh-botnav {
    display: block !important;
    height: 58px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(2,0,9,.97) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(188,19,254,.22) !important;
  }
  #gwh-botnav .gbn-inner {
    display: flex !important;
    height: 100% !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  #gwh-botnav .gbn-inner::-webkit-scrollbar { display: none !important; }
  #gwh-botnav a {
    flex: 1 !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: rgba(255,255,255,.38) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Orbitron', monospace !important;
    border-top: 2px solid transparent !important;
    padding: 0 4px !important;
    min-height: 44px !important; /* touch target */
  }
  #gwh-botnav a.active, #gwh-botnav a:hover {
    color: #14F195 !important;
    border-top-color: #14F195 !important;
  }
  #gwh-botnav a i { font-size: 16px !important; line-height: 1 !important; }

  body { padding-bottom: 70px !important; }

  /* ── FRAME / COCKPIT PANELS ───────────────────────────────────────────── */
  .frame {
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* All cockpit grids → single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Panels: consistent height, not fixed */
  .panel {
    min-height: 280px !important;
    max-height: none !important;
    border-radius: 12px !important;
  }

  /* ── CONSISTENT CARD SIZES ───────────────────────────────────────────── */
  /* All stat chips same width in a row */
  .hstat-chip {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 80px !important;
    max-width: calc(50% - 6px) !important;
  }

  /* Tier pills — all equal width in 5-col row */
  .tier-row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
  }
  .tpill { padding: 5px 2px !important; }
  .tpill-ico { font-size: 15px !important; }
  .tpill-name { font-size: 11px !important; }
  .tpill-range { font-size: 11px !important; display: none !important; }

  /* Engine cards — stack on mobile */
  .eng-cards { gap: 6px !important; }
  .ec { padding: 8px 10px !important; }
  .ec-value { font-size: 18px !important; }

  /* Army stats grid — 2x2 on mobile */
  .army-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .as-v { font-size: 18px !important; }

  /* Ghost grid — 8 columns on mobile (2 rows of 8 = 15 dots) */
  .ghost-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 3px !important;
  }
  .gdot {
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
  }

  /* Army master cards — full width */
  .army-master {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .am-v { font-size: 15px !important; }

  /* ── SLOT CARDS ─────────────────────────────────────────────────────── */
  .si { padding: 8px 9px !important; }
  .si-rate { font-size: 16px !important; }
  .si-name { max-width: 140px !important; font-size: 12px !important; }

  /* Slot list — full height, scrollable */
  .slist { max-height: 320px !important; overflow-y: auto !important; }
  .usdc-list { max-height: 180px !important; overflow-y: auto !important; }

  /* ── POOL SCANNER ───────────────────────────────────────────────────── */
  .pool-list { max-height: 200px !important; }
  .pr-name { font-size: 12px !important; max-width: 100px !important; }
  .pr-rate { font-size: 16px !important; }

  /* ── DISTRIBUTION BARS ──────────────────────────────────────────────── */
  .dbar { gap: 4px !important; }
  .dbar-label { min-width: 55px !important; font-size: 11px !important; }
  .dbar-val { min-width: 48px !important; font-size: 11px !important; }

  /* ── MINI STATS ─────────────────────────────────────────────────────── */
  .mstats, .mstats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }
  .mstat, .ms { padding: 6px 7px !important; }
  .mstat-v, .ms-v { font-size: 14px !important; }

  /* ── HERO/HEADER CHIPS ──────────────────────────────────────────────── */
  .hdr { flex-wrap: wrap !important; gap: 8px !important; padding: 8px 12px !important; min-height: 64px !important; }
  .ckpt-brand-main { font-size: 16px !important; letter-spacing: 2px !important; }
  .hdr-chips { display: none !important; } /* hidden on mobile — too many chips */
  .ckpt-right { width: 100% !important; justify-content: space-between !important; }

  /* ── VAULT INSTRUMENT ───────────────────────────────────────────────── */
  .vault-instr, .price-hero, .instr-price {
    padding: 10px 12px !important;
    margin: 6px !important;
  }
  .vi-val, .price-main, .instr-val {
    font-size: 20px !important;
  }
  .vi-row, .price-sub { gap: 4px !important; }

  /* ── SIGNAL + VOICE FEEDS ──────────────────────────────────────────── */
  .sig-section { min-height: 120px !important; }
  .voice-section { min-height: 140px !important; }
  .stream-filters { gap: 2px !important; flex-wrap: wrap !important; }
  .sf { font-size: 11px !important; padding: 2px 5px !important; }

  /* ── FOOTER BAR ─────────────────────────────────────────────────────── */
  .footer {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
    padding: 3px 6px !important;
  }
  .fi-v { font-size: 12px !important; }
  .fi-l { font-size: 11px !important; }

  /* ── SOVEREIGN FEATURES CARDS ───────────────────────────────────────── */
  .sf-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sf-card { border-radius: 12px !important; }
  .sf-section-title { font-size: 15px !important; }

  /* ── USER DASHBOARD ─────────────────────────────────────────────────── */
  .gd-numbers {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .gd-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .gd-engines {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .gd-engine-ico { font-size: 18px !important; }
  .gd-engine-name { font-size: 11px !important; }
  .gd-tier-progress { padding: 10px 12px !important; }
  .gd-tp-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  /* Ambassador card - URL wraps cleanly */
  .amb-code-url {
    font-size: 13px !important;
    word-break: break-all !important;
    line-height: 1.5 !important;
  }

  /* P&L chart - full width */
  #pnl-chart-wrap .pnl-chart { height: 60px !important; }

  /* Rankings - fit on small screen */
  .rank-hdr, .rank-row {
    grid-template-columns: 22px 1fr 60px 44px !important;
    gap: 4px !important;
  }
  .rank-wallet { font-size: 12px !important; }
  .rank-earned { font-size: 12px !important; }

  /* ── HARVESTER HQ SPECIFIC ──────────────────────────────────────────── */
  .scan-hdr { padding: 4px 6px !important; }
  .prow { padding: 5px 6px !important; gap: 4px !important; }
  .pr-rank { width: 12px !important; font-size: 11px !important; }
  .pr-name { font-size: 11px !important; }

  /* ── APEX HQ ─────────────────────────────────────────────────────────── */
  .trade-hist { max-height: 200px !important; }
  .th-row td { padding: 3px 5px !important; font-size: 12px !important; }

  /* ── INDEX HERO ──────────────────────────────────────────────────────── */
  .hero-val, .big-price { font-size: 28px !important; }
  .stat-grid, .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* All index stat cards = equal size */
  .stat-card, .s-card, .icard {
    width: 100% !important;
    min-height: 70px !important;
  }

  /* Engine quick links on terminal (2x2 grid of cards) */
  .engine-nav-grid, .eng-quick {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── TERMINAL MOBILE ─────────────────────────────────────────────────── */
  #autoStream { max-height: 200px !important; overflow-y: auto !important; }
  #neural-feed { max-height: 180px !important; overflow-y: auto !important; }
  #bot-logs { max-height: 160px !important; overflow-y: auto !important; }

  /* System status grid — 2 col on mobile */
  .sys-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }
  .sc-label { font-size: 11px !important; }
  .sc-status { font-size: 12px !important; }

  /* ── SOVEREIGN VOICE PAGE ────────────────────────────────────────────── */
  .voice-grid, .post-grid {
    grid-template-columns: 1fr !important;
  }
  .voice-card { margin-bottom: 10px !important; }

  /* ── TICKER ──────────────────────────────────────────────────────────── */
  .ticker { height: 22px !important; }
  .tc { font-size: 11px !important; padding: 0 14px !important; }
  .tc b { font-size: 11px !important; }

  /* ── TOOLTIPS (hover → tap on mobile: show briefly) ─────────────────── */
  .calc-bar:hover::after,
  .pnl-bar-fill:hover::after { display: none !important; }

  /* ── MISC ────────────────────────────────────────────────────────────── */
  /* Prevent very long words from blowing out layout */
  p, div, span, td { overflow-wrap: break-word !important; word-break: normal !important; }

  /* Connected panel - full width on mobile */
  #gwh-wallet-panel {
    bottom: 65px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Sovereign features full-row card */
  .sf-full-row .sf-card { border-radius: 12px !important; }
  .rank-table { width: 100% !important; }

  /* Turbo / pulse sections */
  .turbo { flex-wrap: wrap !important; gap: 5px !important; }
  .gd-pulse-monitor { flex-wrap: nowrap !important; }
}

/* ── 480px VERY SMALL PHONES ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Ghost grid goes to 5 columns */
  .ghost-grid { grid-template-columns: repeat(5, 1fr) !important; }
  .gdot { height: 32px !important; font-size: 13px !important; }

  /* v-fix: .ec-grid rule removed from here — moved to terminal.html's own
     <style> block, scoped to that page only. This file loads globally on
     every page, but .ec-grid means something different on index.html (big
     Harvester/Apex hero cards needing 300px+ each) than on terminal.html
     (a compact 4-column mini-widget) — forcing 2 columns here was silently
     breaking the hero cards on index.html, overflowing the page on mobile. */
  .ecg-v { font-size: 12px !important; }

  /* Tier row — still 5 wide but smaller */
  .tpill-range, .tpill-dot { display: none !important; }
  .tpill-cnt { font-size: 15px !important; }

  /* Footer 4 items */
  .footer { grid-template-columns: repeat(4, 1fr) !important; }

  /* Eng indicators in header */
  .eng-ind { gap: 1px !important; }
  .eng-dot { width: 10px !important; height: 10px !important; }
  .eng-lbl { font-size: 11px !important; }

  /* P&L chart bars slightly smaller */
  .pnl-chart { height: 50px !important; }

  /* Distribution ring — smaller */
  .gd-ring-wrap { width: 64px !important; height: 64px !important; }
  .gd-ring-time { font-size: 14px !important; }
}

/* ── HARVEST TRIGGER SLIDER ───────────────────────────────────────────────── */
.shield-slider {
  width: 100% !important;
}
.ht-input-row {
  gap: 6px !important;
}
.ht-input {
  min-width: 0 !important;
  width: 100% !important;
}

/* ── WALLET MODAL MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #gwh-wallet-modal > div {
    padding: 18px 16px !important;
  }
  #gwm-wallets button {
    padding: 10px 12px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   GWH MOBILE LAYOUT PATCH v2.1
   Fixes: header marquee · hero grid lines · empty cells ·
          footer artifacts · touch nav spacing
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL HEADER: STATUS MARQUEE (.pb price bar) ─────────────────────
   Problem: margin-top:62px was for the old 62px nav. On mobile gwh-topnav is
   46px. The bar was clipping 16px under the sticky header.
   Fix: correct margin-top + convert from overflow-scroll to CSS marquee       */
@media (max-width: 768px) {

  .pb {
    margin-top: 46px !important;   /* exact gwh-topnav height */
    position: relative !important;
    z-index: 990 !important;       /* below nav (z-index:1000) above content */
    overflow: hidden !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
  }

  /* Wrap the inner items in an animation container.
     JS adds .pb-running class; CSS drives the scroll. */
  .pb-inner {
    display: inline-flex !important;
    gap: 24px !important;
    animation: gwh-marquee-scroll 32s linear infinite !important;
    padding-left: 5% !important;
  }
  .pb-inner:hover { animation-play-state: paused !important; }

  @keyframes gwh-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Fade edges so it looks polished */
  .pb::before, .pb::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    width: 40px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  .pb::before {
    left: 0 !important;
    background: linear-gradient(to right, var(--bg, #03000d), transparent) !important;
  }
  .pb::after {
    right: 0 !important;
    background: linear-gradient(to left, var(--bg, #03000d), transparent) !important;
  }

  /* Fallback for pages without .pb-inner wrapper: just scroll horizontally */
  .pb:not(:has(.pb-inner)) {
    overflow-x: auto !important;
    animation: none !important;
    padding: 8px 5% !important;
  }
}


/* ── 2. HERO: REMOVE DECORATIVE BACKGROUND VERTICAL GRID LINES ─────────────
   Problem: Absolutely positioned elements (.r1, .r2 orbit rings and any
   background grid overlays) extend behind the <h1> headline on mobile.
   Fix: hide decorative rings + grid overlays on mobile.                       */
@media (max-width: 768px) {

  /* Orbit rings — clip-path them inside the image container */
  .r1, .r2 {
    display: none !important;  /* cleanest — image still shows without rings */
  }

  /* Any pseudo-element grid lines on the hero section */
  .hero::before, .hero::after,
  section.hero::before, section.hero::after,
  #home::before, #home::after {
    display: none !important;
    background: none !important;
  }

  /* Background grid-line pattern on body / hero — null it out on mobile */
  .hero {
    background-image: none !important;
  }

  /* Decorative grid overlays from harvester / cockpit pages */
  .grid-lines, .bg-grid, [class*="grid-line"], [class*="bg-line"] {
    display: none !important;
  }

  /* Hero image ring wrapper — prevent overflow leaking behind text */
  .hiw {
    overflow: visible !important;
    contain: layout !important;
    z-index: 0 !important;
  }
}


/* ── 3. GRID DATA CONTAINERS: VAULT SUMMARY METRIC BOXES (.sc) ─────────────
   Problem 1: Empty cells collapse to 0 height — layout looks broken.
   Problem 2: Long fractional values (0.00000867) wrap mid-number on narrow.
   Fix: min-height, min-width, white-space, overflow ellipsis.                 */
@media (max-width: 768px) {

  /* Stat cards — always retain shape even when empty */
  .sc, .hmc, .ms, .mstat, .s-card, .stat-card,
  .icard, .fc-stat, .gd-num-box {
    min-height: 72px !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
  }

  /* Value text — never wrap mid-number */
  .sv, .hmv, .ms-v, .mstat-v, .gd-num-val,
  .ec-value, .vi-val, .pb-price, .instr-val {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    font-size: clamp(11px, 3.5vw, 18px) !important;
  }

  /* Minimum width so tiny values don't get squashed in grid columns */
  .sc { min-width: 80px !important; }

  /* Grid: force exactly 2 columns on mobile — no collapsing to 1 */
  .sg {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .hm {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Sub-label for units */
  .sl, .hml, .ms-l, .mstat-l, .ecg-l {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* ── 4. FLOATING FOOTER ARTIFACTS: ABSOLUTE POSITIONED STRAY NUMBERS ────────
   Problem: Cockpit stats bar + page footer + gwh-botnav stack without enough
   bottom clearance. Stray numbers from the 8-cell cockpit bar overlap the
   mobile bottom nav.
   Fix: Bottom padding offset + clean up absolute positions.                   */
@media (max-width: 768px) {

  /* Primary safety padding — body must clear: botnav(58px) + any footer */
  body {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px) + 72px) !important;
  }

  /* Cockpit footer stats bar — ensure it doesn't overlap gwh-botnav */
  .footer.cockpit-footer, div.footer[class="footer"] {
    position: relative !important;
    z-index: 5 !important;
    margin-bottom: 0 !important;
  }

  /* Last child of .frame — add bottom gap before botnav */
  .frame > .footer:last-child {
    margin-bottom: 0 !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toast notifications — clear botnav */
  #toast, #gwh-toast, [id*="toast"] {
    bottom: max(80px, 72px) !important;
  }

  /* Any absolute-positioned counter/badge elements near bottom */
  [style*="position:absolute"][style*="bottom"],
  [style*="position: absolute"][style*="bottom"] {
    z-index: 5 !important;
  }

  /* gwh-page-footer — add breathing room before botnav */
  #gwh-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px) + 10px) !important;
    margin-bottom: 0 !important;
  }
}


/* ── 5. TOUCH INTERFACES: THUMB-FRIENDLY NAV ITEM SPACING ───────────────────
   Problem: Navigation links in footer nav, mobile slide-in menu, and index
   nav lists are too tightly packed for comfortable thumb tapping (< 44px).
   Apple HIG and Google Material both recommend 44–48px minimum touch target.
   Fix: min-height 48px, generous padding, visual separator lines.             */
@media (max-width: 768px) {

  /* Footer navigation links */
  #gwh-footer .gf-links a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 6px !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    transition: color .15s !important;
  }
  #gwh-footer .gf-links a:last-child {
    border-bottom: none !important;
  }

  /* Mobile slide-in menu links (gwh-nav.js injects .gmm-link) */
  .gmm-links a, .gmm-link,
  #gwh-mobile-menu a, .mobile-menu-link {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    letter-spacing: 1.5px !important;
  }

  /* Index hero navigation section (core nav visible on desktop only normally) */
  .nl a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 8px !important;
  }

  /* Bottom nav items — already set but reinforce */
  #gwh-botnav a {
    min-height: 54px !important;
    padding: 6px 4px !important;
    gap: 4px !important;
  }
  #gwh-botnav a span {
    font-size: 11px !important;
    letter-spacing: .4px !important;
  }
  #gwh-botnav a i {
    font-size: 18px !important;
  }

  /* Any list-based navigation on hero/landing sections */
  .pl li, .nav-list li, [class*="nav-item"] {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
  }
  .pl li:last-child, .nav-list li:last-child {
    border-bottom: none !important;
  }
}


/* ── BONUS: marquee init script injection via CSS content trick ─────────────
   The .pb marquee needs the inner items duplicated for seamless loop.
   We use a small inline script added via JS (see gwh-nav.js wireMarquee).
   This CSS ensures the fallback is a smooth horizontal scroll.               */
@media (max-width: 768px) {
  .pb { cursor: grab !important; }
  .pb:active { cursor: grabbing !important; }
}



/* ════════════════════════════════════════════════════════════════════════════
   GWH UNIVERSAL FRAME FORMULA v2.2
   Based on index.html's beautiful box system — applied to ALL pages
   ════════════════════════════════════════════════════════════════════════════ */

/* ── THE INDEX FORMULA ──────────────────────────────────────────────────────
   Index uses:
     background: rgba(10,5,25,.78)         ← deep dark glass
     border: 1px solid rgba(188,19,254,.22) ← soft purple glow border
     border-radius: 14–20px                ← rounded corners
     padding: 18–32px                      ← generous breathing room
     backdrop-filter: blur(18–25px)        ← glass morphism
   We enforce this formula on all content cards/frames across all pages.       */

@media (max-width: 768px) {

  /* ── SECTIONS: consistent side padding ── */
  section, .lp-section, .staking-section, .wp-section,
  [class*="section"]:not(#gwh-footer):not(#gwh-topnav) {
    padding-left:  5% !important;
    padding-right: 5% !important;
  }

  /* ── UNIVERSAL CARD FRAME FORMULA ── */
  /* Every floating content box matches index.html style */
  .tier-card, .faq-card, .how-card, .step-card,
  .feature-card, .stat-card, .info-card, .vault-card,
  .pool-card, .slot-card, .pos-card, .metric-card,
  .calc-card, .calc-block, .calc-section,
  /* Harvester/Apex specific */
  .vault-instr, .eng-card, .dist-block, .slots-section,
  /* Terminal specific */
  .panel, .sys-card, .price-block, .friday-block,
  /* Sovereign features */
  .sf-card, .amb-code-box, .gd-card, .gd-stake-block,
  /* Staking tier cards */
  .staking-card, [class*="stake-card"],
  /* LP specific */
  .lp-card, .fee-box, .fee-card, [class*="exec-fee"],
  /* Generic containers */
  .card, .box, .block-card, .content-block {
    background: rgba(10, 5, 25, .82) !important;
    border: 1px solid rgba(188, 19, 254, .22) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Large feature blocks get more padding */
  .feature-block, .mb, .vault-instr, .price-block {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  /* ── GRIDS: max 2 columns unless specified ── */
  /* Default: most grids become 2-col on mobile */
  .tier-grid         { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stats-belt        { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .how-grid          { grid-template-columns: 1fr !important; }
  .faq-grid          { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pos-grid          { grid-template-columns: 1fr !important; gap: 12px !important; }
  .feed-strip        { grid-template-columns: 1fr !important; }
  .army-stats        { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .army-master       { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .sys-grid          { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .gd-numbers        { grid-template-columns: 1fr !important; gap: 8px !important; }
  .gd-grid           { grid-template-columns: 1fr !important; gap: 10px !important; }
  .gd-tp-stats       { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }

  /* ── TIER CARDS: text never wraps letter-by-letter ── */
  .tier-card {
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }
  .tc-name, .tier-name, [class*="tc-name"] {
    font-size: 14px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    letter-spacing: .5px !important;
    line-height: 1.3 !important;
  }
  .tc-apr, [class*="tc-apr"], .tier-apr {
    font-size: clamp(14px, 5.5vw, 22px) !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tc-gate, .tier-gate {
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
  .tc-apr-lbl, .tc-ico { font-size: 11px !important; }
  .tc-ico span, .tier-icon { font-size: 22px !important; }

  /* ── FAQ CARDS: single column, readable text ── */
  .faq-card, [class*="faq-item"], [class*="faq-card"] {
    padding: 18px 16px !important;
  }
  .faq-card h3, [class*="faq"] h3,
  .faq-card .faq-q {
    font-size: 15px !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    margin-bottom: 10px !important;
  }
  .faq-card p, [class*="faq"] p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* ── AI EXECUTION FEE TABLE: match other frames ── */
  [class*="exec-fee"], [class*="fee-table-wrap"],
  .fee-section, .lp-fee-block {
    margin: 0 0 20px !important;
    padding: 22px 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .fee-table, [class*="exec"] table {
    width: 100% !important;
    min-width: 320px !important;
  }
  .fee-table td, .fee-table th,
  [class*="exec"] td, [class*="exec"] th {
    padding: 10px 8px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  /* "WEST" stray badge fix */
  [class*="WEST"], .west-badge { display: none !important; }

  /* ── TOKENOMICS TABLE: horizontal scroll ── */
  .tokenomics-table, .tokn-table,
  [class*="tokenomics"] table, [class*="tokn"] table,
  table {
    min-width: 460px;
    font-size: 15px !important;
    border-collapse: collapse !important;
  }
  table th { font-size: 14px !important; }
  table td, table th {
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }
  /* Table scroll wrapper auto-injected */
  .table-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -5% !important;
    padding: 0 5% !important;
    border-radius: 0 !important;
  }

  /* ── FOOTER: consistent navigation layout ── */
  #gwh-footer {
    padding: 28px 5% 90px !important;
  }
  #gwh-footer .gf-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #gwh-footer .gf-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #gwh-footer .gf-links a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    color: rgba(255,255,255,.55) !important;
    text-decoration: none !important;
  }
  #gwh-footer .gf-links a:last-child {
    border-bottom: none !important;
  }
  #gwh-footer .gf-links a::before {
    content: '◈' !important;
    color: rgba(188,19,254,.6) !important;
    margin-right: 10px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  #gwh-footer .gf-brand {
    display: block !important;
    margin-bottom: 12px !important;
  }
  #gwh-footer .gf-tagline {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }
  #gwh-footer .gf-chains {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #gwh-footer .gf-chain-btn {
    flex: 1 1 calc(50% - 4px) !important;
    text-align: center !important;
    padding: 10px 6px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
  #gwh-footer .gf-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }
  #gwh-footer .gf-disc {
    text-align: center !important;
    font-size: 13px !important;
    max-width: 100% !important;
  }

  /* ── TERMINAL COCKPIT HEADER: consistent height ── */
  .hdr {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .hdr-stats { display: none !important; }
  .ckpt-right {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .eng-cluster {
    gap: 6px !important;
  }
  .eng-dot {
    width: 10px !important;
    height: 10px !important;
  }
  .eng-lbl { font-size: 11px !important; }

  /* ── SOVEREIGN VOICE ONLINE INDICATOR ── */
  /* Wire the voice dot to show correctly */
  #cdot-voice.on,
  #pd-voice.on {
    background: #14F195 !important;
    box-shadow: 0 0 8px #14F195 !important;
  }

}

/* ── 400px SMALLEST SCREENS ── */
@media (max-width: 420px) {
  .tier-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .tier-card { padding: 12px 8px !important; }
  .tc-apr {
    font-size: clamp(12px, 5vw, 18px) !important;
  }
  .tc-name { font-size: 13px !important; }
  #gwh-footer .gf-chain-btn {
    flex: 1 1 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   GWH MOBILE POLISH — final professional touches
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Prevent ALL horizontal overflow ── */
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  /* overflow-wrap (not word-break) — only break a word when it truly can't fit
     (e.g. the 44-char contract address); short labels like "ENGINE LIVE" stay whole */
  *{max-width:100%!important;overflow-wrap:break-word;word-break:normal}
  img,video{max-width:100%!important;height:auto}

  /* ── Typography scaling ── */
  h1,h2{font-size:clamp(1.6rem,8vw,3rem)!important;line-height:1.1!important}
  h3{font-size:clamp(1rem,4vw,1.4rem)!important}
  p{font-size:15px!important;line-height:1.75!important}

  /* ── Sections: breathe on mobile ── */
  section,[class*="section"]{padding:36px 5%!important}

  /* ── Cards: consistent formula ── */
  .wp-card,.fc,.hmc,.tier-card-wp,.rm-card,
  .wp-info,.engine-card,.wps,.dist-card{
    padding:18px 16px!important;border-radius:16px!important;
  }
  .contract-card,.mb{padding:22px 18px!important;border-radius:18px!important}

  /* ── Tables: always scrollable ── */
  table{min-width:460px;font-size:14px!important}
  .table-scroll,.tok-table-wrap{
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    border-radius:12px!important;
  }
  td,th{padding:10px 10px!important;white-space:nowrap!important}

  /* ── Grids: max 2 columns ── */
  .wp-grid,.wp-info-grid,.engine-grid,.dist-grid{
    grid-template-columns:1fr!important;gap:10px!important
  }
  .tier-grid-wp{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .wp-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .tier-stat-row{gap:3px!important}
  .tsr{padding:5px 3px!important}
  .tsr-v{font-size:13px!important}

  /* ── Roadmap: single column ── */
  .roadmap-grid{grid-template-columns:1fr!important}
  .rm-card{padding:18px 18px 18px 48px!important;margin-bottom:10px!important}

  /* ── Hero price badge ── */
  .wp-price-badge{flex-wrap:wrap!important;justify-content:center!important;gap:6px!important}
  .wp-price-val{font-size:16px!important}

  /* ── Contract card ── */
  .links-row{gap:6px!important}
  .wp-link-btn{padding:8px 12px!important;font-size:12px!important;flex:1 1 calc(50% - 3px)}
  .ca-addr{font-size:13px!important;letter-spacing:0!important}

  /* ── Touch targets ── */
  a,button,[onclick]{min-height:40px!important;display:inline-flex!important;
    align-items:center!important;justify-content:center!important}
  /* v-fix: the blanket a,button,[onclick] rule above was meant for small
     tap targets (nav links, icon buttons) but its broad selector also
     caught index.html's .ec cards — big content blocks (icon, title,
     description, tag row, link) wrapped in a single <a>. Forcing those
     into inline-flex/centered layout broke their intended vertical stack,
     causing the icon+title to sit beside cramped, word-wrapped text
     instead of the description flowing full-width beneath them. */
  .ec{display:block!important;min-height:auto!important}
  .gf-links a{min-height:44px!important;display:flex!important;
    border-bottom:1px solid rgba(255,255,255,.04)!important}
  .gf-chain-btn{min-height:40px!important;flex:1 1 calc(50% - 4px)!important;justify-content:center!important}

  /* ── Botnav ── */
  #gwh-botnav a{min-height:44px!important}
  #gwh-botnav a i{font-size:17px!important}
  #gwh-botnav a span{font-size:11px!important}

  /* ── Tier cards mobile ── */
  .tier-card{padding:12px 8px!important}
  .tc-name{font-size:13px!important;word-break:normal!important;white-space:normal!important;line-height:1.3!important}
  .tc-apr{font-size:clamp(13px,5vw,20px)!important;white-space:nowrap!important}

  /* ── Numbers: never wrap mid-digit ── */
  .sv,.hmv,.ms-v,.gd-num-val,.instr-val,.as-v,
  [id*="price"],[id*="vault"],[id*="earned"]{
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }

  /* ── Toast notifications: clear botnav ── */
  #toast,[id*="toast"]{bottom:max(76px,64px)!important;z-index:9998!important}

  /* ── Safe area: iphone X+ ── */
  body{padding-bottom:max(72px,env(safe-area-inset-bottom,0px)+58px)!important}
  #gwh-footer{padding-bottom:max(96px,env(safe-area-inset-bottom,0px)+72px)!important}
}


/* ════════════════════════════════════════════════════════════════════════════
   GWH MOBILE — HARD OVERRIDES  (appended last; load-order + specificity proof)
   ----------------------------------------------------------------------------
   #1  index.html has a bare `nav{position:fixed;top:0}` in its inline <style>
       that leaks onto <nav id="gwh-botnav">, pinning the bottom bar to the TOP
       of the screen over the page content. Force it back to the bottom.
   #2  Footer bottom padding kept resolving to ~0 (stray `env()+px` inside
       `max()` and cascade order). Use a plain calc() so it always clears the
       58px bottom nav + the iOS home indicator.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  nav#gwh-botnav{
    position:fixed !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:58px !important;
    z-index:9999 !important;
    transform:none !important;
  }

  footer#gwh-footer{
    padding-bottom:calc(58px + 28px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom:0 !important;
  }

  html body{
    padding-bottom:calc(58px + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   GWH MOBILE — DASHBOARD POLISH PASS  (staking + lp_dashboard)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  /* any wide table scrolls inside its own wrapper, never the page */
  .table-scroll-wrap{
    overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;
    margin:0 !important;padding:0 !important;border-radius:10px !important;
    border:1px solid rgba(255,255,255,.06) !important;
  }
  .penalty-table{min-width:420px !important}
  .penalty-table th,.penalty-table td{white-space:nowrap !important}

  /* staking: stack the stake form + side panel, kill the sticky offset.
     minmax(0,1fr) stops a wide child from blowing the column past the viewport. */
  .stake-main{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
  .stake-main > div{min-width:0 !important}
  .side-panel{position:static !important;top:auto !important}
  .lock-card{padding:20px 16px !important}
  .lock-options{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .lock-opt{min-width:0 !important;padding:12px 6px !important}
  .lock-opt .lo-mult{font-size:13px !important}
  .est-box,.si-box,.compound-row{min-width:0 !important}
  .si-input{min-width:0 !important}

  /* staking stats belt: 5-up → 2-up, readable */
  .stats-belt{grid-template-columns:repeat(2,1fr) !important;gap:1px !important}
  .stats-belt .stat-node:last-child:nth-child(odd){grid-column:1 / -1}
  .stat-node{padding:14px 12px !important}
  .stat-node .sv{font-size:clamp(1rem,5vw,1.4rem) !important;word-break:normal !important}

  /* price ticker: a touch taller, legible */
  .price-ticker{height:auto !important;min-height:30px}
  .ptc{padding:0 14px !important;font-size:12px !important}

  /* live ecosystem / activity feeds: cap height, contain */
  #eco-feed,.feed-content,.sd-feed{max-height:190px !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}

  /* lock + tier grids: never below 2-up, no letter-wrap */
  .lock-options{grid-template-columns:repeat(2,1fr) !important}
  .tier-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  .tier-card .tc-name,.tier-card .tc-apr{white-space:normal !important;word-break:normal !important}
  .tier-card .tc-apr{font-size:clamp(15px,5.5vw,22px) !important}

  /* revenue + how-it-works: 2-up reads better than 1-up on phones */
  .rev-grid{grid-template-columns:repeat(2,1fr) !important}
  .how-grid{grid-template-columns:1fr !important}

  /* lp: position cards single column, calc results 2-up */
  .pos-grid{grid-template-columns:1fr !important}
  .feed-strip{grid-template-columns:1fr !important}

  /* lp calculator: any multi-col grid inside the calc wrap stacks;
     the lock/scenario button rows wrap instead of overflowing the card */
  #gwh-calc-wrap [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  #gwh-calc-wrap [style*="display:flex"]{flex-wrap:wrap !important}
  #gwh-calc-wrap .clck,#gwh-calc-wrap .cscn{flex:1 1 auto !important;min-width:60px !important}
  #calcResults{grid-template-columns:1fr 1fr !important}

  /* small stat tables inside tier cards: let them wrap to fit, never clip.
     (the global `table{min-width:460px}` above is for wide data tables that
     sit inside a .table-scroll-wrap — these little 2-col ones don't.) */
  .tier-card table,
  .tier-card table td,
  .tier-card table th{
    min-width:0 !important;width:100% !important;
    white-space:normal !important;font-size:13px !important;
    padding:5px 6px !important;letter-spacing:0 !important;
  }
  /* any table NOT wrapped in a scroller: fit to the card and wrap cells
     rather than push the page (page overflow-x is hidden, so wide = clipped) */
  :not(.table-scroll-wrap) > table{min-width:0 !important;width:100% !important}
  :not(.table-scroll-wrap) > table td,
  :not(.table-scroll-wrap) > table th{white-space:normal !important}
}

@media (max-width: 400px){
  .lock-options,.tier-grid,.rev-grid{grid-template-columns:1fr !important}
  .stats-belt{grid-template-columns:1fr 1fr !important}
}