/**
 * SYNAPSE — Mobile-First Responsive Override v2
 * Covers all devices 375px ~ 768px
 * Loads last — highest priority overrides
 */

/* ═══════════════════════════════════════════════════
   1. GLOBAL TOUCH / SCROLL OPTIMIZATIONS
═══════════════════════════════════════════════════ */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: contain;
}
input, textarea, select, button {
  font-size: 16px !important; /* prevent iOS zoom on focus */
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════
   2. NAVIGATION — sticky, compact, safe area
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #navbar {
    padding: 0 0.9rem;
    height: 56px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
  }
  .nav-brand { gap: 0.3rem; }
  .brand-icon { font-size: 1rem; }
  .brand-primary { font-size: 0.88rem; letter-spacing: 0.06em; }
  .brand-secondary { display: none; }
  .brand-divider  { display: none; }

  .nav-links {
    top: 56px;
    padding: 0.75rem 1rem;
    gap: 0.2rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-height: calc(100svh - 56px);
    overflow-y: auto;
  }
  .nav-link {
    padding: 0.65rem 0.5rem;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav-link:last-child { border-bottom: none; }
  .nav-toggle {
    width: 36px; height: 36px;
    font-size: 1rem;
  }
  .lang-switcher { margin-right: 0.25rem; }
  .lang-btn {
    font-size: 0.62rem !important;
    padding: 0.18rem 0.4rem !important;
  }
}

/* ═══════════════════════════════════════════════════
   3. INDEX.HTML — HERO SECTION
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding-top: 0; }

  #hero {
    min-height: 100svh;
    padding-top: 56px;
  }
  .hero-content {
    padding: 1.5rem 1.2rem 2rem;
    gap: 1rem;
  }
  .hero-badge {
    font-size: 0.62rem;
    padding: 0.3rem 0.75rem;
    letter-spacing: 0.05em;
    white-space: normal;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: 1.15;
  }
  .hero-title-line { display: block; }
  .hero-desc {
    font-size: 0.85rem;
    line-height: 1.65;
    max-width: 100%;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
  }
  .stat-item {
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.15);
    text-align: center;
  }
  .stat-num    { font-size: 1.3rem; }
  .stat-number  { font-size: 1.3rem; }
  .stat-label   { font-size: 0.58rem; }

  .hero-cta {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  .hero-cta a,
  .hero-cta button {
    width: 100%;
    text-align: center;
    padding: 0.9rem 1rem;
    font-size: 0.9rem !important;
  }
  .hero-scroll { display: none; }

  /* Hero video — keep action visible on mobile */
  .hero-video {
    opacity: 0.45;
    object-position: 65% center;
  }
}

/* ═══════════════════════════════════════════════════
   4. SECTION GENERAL
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section { padding: 3rem 1.1rem; }
  .section-label { font-size: 0.62rem; letter-spacing: 0.15em; }
  .section-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .section-sub   { font-size: 0.82rem; }
  .container     { padding: 0 1.1rem; }
}

/* ═══════════════════════════════════════════════════
   5. TICKER / INNOVATION BAR
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ticker-bar { padding: 0.4rem 0; }
  .ticker-label { font-size: 0.58rem; padding: 0 0.5rem; }
  .ticker-item  { font-size: 0.68rem; margin: 0 1rem; }
}

/* ═══════════════════════════════════════════════════
   6. WORLDS GRID (index.html)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .worlds-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .world-card {
    min-height: 150px;
    padding: 1rem;
  }
  .world-card-title { font-size: 1.05rem; }
  .world-stats { gap: 0.5rem; }
  .world-stat  { font-size: 0.65rem; }
}

/* ═══════════════════════════════════════════════════
   7. AI AGENT SECTION
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* index.html uses .agent-demo; worlds.html uses .agent-layout */
  .agent-demo,
  .agent-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .agent-card-main { max-width: 260px; margin: 0 auto; }
  .agent-portrait  { max-height: 340px; object-fit: cover; }
  .agent-visual { order: -1; max-height: 240px; overflow: hidden; border-radius: 12px; }
  .agent-info { padding: 0; }
  .agent-name { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .agent-traits { gap: 0.4rem; flex-wrap: wrap; }
  .agent-trait  { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
  .income-sources { gap: 0.5rem; }
  .income-item    { padding: 0.5rem 0.6rem; font-size: 0.72rem; }
  .income-value   { font-size: 0.8rem; }
  /* Income list + personality bars */
  .income-list { gap: 0.5rem; }
  .inc-val     { font-size: 0.68rem; white-space: nowrap; }
  .p-row  { gap: 0.4rem; }
  .p-name { font-size: 0.7rem; min-width: 44px; }
  .p-val  { font-size: 0.7rem; min-width: 22px; }
  .agent-earnings { gap: 0.5rem; }
  .earn-val { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════
   8. TOKENOMICS
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .token-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .token-card { padding: 1.1rem; }
  .token-bridge { padding: 1.1rem; }
  .token-chart-wrap { height: 150px !important; }
  .token-stats { gap: 0.5rem; }
  .ts-item     { font-size: 0.75rem; }
  .token-logo  { width: 50px; height: 50px; font-size: 1.3rem; }
  .token-name  { font-size: 1.3rem; }
  .token-role  { font-size: 0.72rem; }
  .token-uses  { gap: 0.4rem; }
  .use-item    { font-size: 0.75rem; }
  /* bridge */
  .bridge-flows { gap: 0.5rem; }
  .bf-item    { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
  .ltv-val    { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════
   9. ROADMAP
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .roadmap-timeline { padding: 0; }
  .timeline-item {
    flex-direction: column !important;
    text-align: left !important;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border);
    margin-left: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
  }
  .timeline-item::before { left: -5px; top: 4px; }
  .timeline-dot  { display: none; }
  .timeline-year { font-size: 0.75rem; margin-bottom: 0.3rem; }
  .timeline-title{ font-size: 0.95rem; }
  .timeline-desc { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════
   10. FOOTER
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.7rem;
  }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .footer-link  { font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════
   11. WORLDS.HTML — HERO
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .worlds-hero { min-height: 52svh; padding-top: 56px; }
  .worlds-hero .hero-content { padding: 1.2rem; }
  .wh-title    { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  .wh-sub      { font-size: 0.8rem; }
  .worlds-hero-stats {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .whs-item { font-size: 0.7rem; }
}

/* ─── Worlds Nav Bar ─── */
@media (max-width: 768px) {
  .worlds-nav-bar {
    padding: 0 0.5rem;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .worlds-nav-bar::-webkit-scrollbar { display: none; }
  .wnb-item {
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ─── World Detail Cards ─── */
@media (max-width: 768px) {
  .world-detail { padding: 2rem 1rem; }
  .wd-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .wd-title     { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .wd-desc      { font-size: 0.8rem; }
  .factions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .opportunity-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem;
  }
  .opp-card { padding: 0.7rem; }
  .opp-earning { font-size: 0.68rem; }
  .world-live-stats {
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .wls-item { font-size: 0.7rem; }
  .event-log { max-height: 160px; }
}

/* ─── Create Agent Form ─── */
@media (max-width: 768px) {
  .create-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .create-preview { order: -1; }
  .preview-card {
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: 12px;
  }
  .preview-avatar { width: 80px; height: 80px; flex-shrink: 0; border-radius: 10px; }
  .preview-info   { flex: 1; }
  .preview-name   { font-size: 0.95rem; }

  .cf-step { flex-direction: row; gap: 0.75rem; align-items: flex-start; }
  .step-num { font-size: 0.88rem; min-width: 26px; padding-top: 0.1rem; }
  .world-select-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
  .wsg-item { padding: 0.45rem 0.4rem; font-size: 0.72rem; }

  .invest-options {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
  .io-item { padding: 0.55rem 0.5rem; }
  .io-amount { font-size: 0.8rem; }
  .io-desc   { font-size: 0.62rem; }

  .personality-sliders { gap: 0.55rem; }
  .ps-row input[type=range] { height: 3px; }
  .agent-desc-input { min-height: 80px; }

  .create-btn {
    width: 100%;
    padding: 0.9rem;
  }

  /* char picker in create form */
  #char-picker-container .char-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
    max-height: 210px;
    gap: 0.4rem;
  }
  #char-picker-container .char-pick-card { border-radius: 8px; }
  #char-picker-container .char-pick-name { font-size: 0.56rem; }
}

/* ─── Leaderboard ─── */
@media (max-width: 768px) {
  .leaderboard-section { padding: 2rem 1rem; }
  .lb-tabs { gap: 0.4rem; flex-wrap: wrap; }
  .lb-tab  { font-size: 0.7rem; padding: 0.32rem 0.7rem; }

  /* 3-column on mobile: rank | agent | earnings */
  .lb-row {
    grid-template-columns: 32px 1fr 90px !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.73rem;
  }
  .lb-row.header { padding: 0.45rem 0.75rem !important; }

  /* Hide world + level columns */
  .lb-col-world,
  .lb-col-level { display: none !important; }

  /* Always show earnings */
  .lb-earnings { display: block !important; font-size: 0.72rem !important; }

  .lb-rank { font-size: 0.95rem; }
  .lb-agent { gap: 0.5rem; }
  .lb-avatar { font-size: 1.1rem; }
  .lb-name   { font-size: 0.75rem; }
  .lb-creator { font-size: 0.6rem; }

  #lbTable { overflow-x: hidden; }
}

/* ═══════════════════════════════════════════════════
   12. WALLET.HTML — LAYOUT
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wallet-layout { flex-direction: column !important; }

  /* sidebar becomes horizontal tab bar */
  .wallet-sidebar {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    flex-direction: row !important;
    overflow-x: auto;
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    background: rgba(3,8,17,0.98);
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wallet-sidebar::-webkit-scrollbar { display: none; }

  .wallet-avatar, .chain-selector { display: none !important; }
  .sidebar-menu  { flex-direction: row !important; padding: 0 !important; gap: 0 !important; }
  .smenu-item {
    flex-direction: column !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.56rem !important;
    gap: 0.12rem !important;
    white-space: nowrap;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    min-width: 52px;
    text-align: center;
    align-items: center !important;
    justify-content: center;
  }
  .smenu-item.active {
    border-bottom-color: var(--cyan) !important;
    border-left-color: transparent !important;
  }
  .smenu-item i { font-size: 0.85rem !important; width: auto !important; }

  .wallet-main { height: auto !important; overflow: visible !important; }
  .wsection    { padding: 1rem 0.9rem !important; }
  .wsection-header { flex-wrap: wrap; gap: 0.5rem; }
}

/* ─── Balance Hero ─── */
@media (max-width: 768px) {
  .balance-hero {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 1.2rem !important;
  }
  .bh-value  { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
  .bh-actions { flex-wrap: wrap; gap: 0.5rem; }
  .wbtn-primary, .wbtn-secondary {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.75rem !important;
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 76px;
    text-align: center;
  }
  .portfolio-chart-wrap { height: 170px !important; }
}

/* ─── Asset Table ─── */
@media (max-width: 768px) {
  .asset-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .asset-table { min-width: 480px; font-size: 0.75rem; }
  .at-col-action .wbtn-secondary { padding: 0.28rem 0.55rem !important; font-size: 0.65rem !important; }
}

/* ─── Swap / Perp side by side → stack ─── */
@media (max-width: 900px) {
  .swap-layout, .perp-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .swap-chart-canvas-wrap,
  .perp-chart-canvas-wrap { height: 170px !important; }
}

/* ─── Dual Token ─── */
@media (max-width: 768px) {
  .dual-token-grid { grid-template-columns: 1fr !important; }
  .dt-card { padding: 1rem !important; }
  .dt-stats { gap: 0.4rem; }
  .dt-actions { flex-wrap: wrap; gap: 0.4rem; }
  .dt-actions button {
    flex: 1 1 calc(33% - 0.27rem);
    font-size: 0.68rem !important;
    padding: 0.42rem 0.4rem !important;
  }
  .token-flow-viz { overflow-x: auto; }
  .tfv-container { min-width: 320px; }
}

/* ─── NFT Grid ─── */
@media (max-width: 768px) {
  .nft-grid { grid-template-columns: 1fr 1fr !important; gap: 0.7rem; }
  .nft-card { padding: 0.7rem; }
  .nft-name { font-size: 0.75rem; }
}

/* ─── Predict Grid ─── */
@media (max-width: 768px) {
  .predict-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
}

/* ─── Bridge ─── */
@media (max-width: 768px) {
  .bridge-container { grid-template-columns: 1fr !important; gap: 0.75rem; }
  .bridge-arrow { transform: rotate(90deg); }
  .bridge-panel { padding: 1rem; }
}

/* ─── History ─── */
@media (max-width: 768px) {
  .history-filters { flex-wrap: wrap; gap: 0.4rem; }
  .hf-btn { font-size: 0.7rem; padding: 0.28rem 0.65rem; }
  .tx-list { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════
   13. CHARACTERS.HTML
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .char-hero { padding-top: 56px; min-height: 38svh; }
  .char-hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .char-hero-sub   { font-size: 0.8rem; }
  .char-hero-stats { font-size: 0.78rem; gap: 0.3rem; }

  .char-filter-bar {
    padding: 0.65rem 0.75rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .char-filter-bar::-webkit-scrollbar { display: none; }
  .cfb-inner { flex-wrap: nowrap; }
  .cfb-btn {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.65rem !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .cfb-count { font-size: 0.6rem; }

  /* Character card grid — 2 columns */
  .char-grid-section {
    padding: 1.5rem 0.75rem;
  }
  .char-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem;
  }

  /* Modal — bottom sheet on mobile */
  .char-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .char-modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92svh !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.2rem 1rem max(1.5rem, env(safe-area-inset-bottom)) !important;
  }
}

/* ═══════════════════════════════════════════════════
   14. SUMMON OVERLAY — mobile optimized
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ritual stage */
  .so-ritual-circle { width: 140px; height: 140px; }
  .so-ritual-text   { font-size: 0.95rem; letter-spacing: 0.08em; }
  .inner-icon       { font-size: 2rem; }

  /* Stage titles */
  .so-stage-title {
    font-size: 1.2rem !important;
    letter-spacing: 0.08em;
  }
  .so-stage-sub {
    font-size: 0.72rem !important;
  }

  /* Card flip */
  .so-card-wrapper  { width: 220px; height: 340px; }
  .so-stage-flip    { perspective: 800px; }

  /* Result stage — full scrollable */
  .so-result {
    padding: 1rem 0.75rem 1.5rem;
    gap: 0.85rem;
    max-width: 100%;
    overflow-y: auto;
    max-height: 96svh;
    align-items: center;
    -webkit-overflow-scrolling: touch;
  }
  .so-result-title  { font-size: 0.78rem; letter-spacing: 0.12em; }
  .so-result-name   { font-size: 1.3rem; }

  /* Result card sizing */
  .so-result .char-card {
    width: 200px !important;
    height: 310px !important;
    flex-shrink: 0;
  }

  /* Action buttons */
  .so-result-actions {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
  }
  .so-btn {
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    width: 100%;
    text-align: center;
  }
  .so-btn-enter {
    font-size: 0.88rem;
    padding: 0.8rem;
    width: 100%;
  }

  /* Detail modal — bottom sheet */
  #char-detail-modal { padding: 0.5rem; align-items: flex-end; }
  .cdm-inner {
    flex-direction: column;
    border-radius: 18px 18px 0 0;
    max-height: 93svh;
    overflow: hidden;
  }
  .cdm-card-col {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    position: relative;
  }
  .cdm-card-col .char-card {
    width: 100%;
    height: 200px;
    border-radius: 18px 18px 0 0 !important;
  }
  .cdm-card-col .char-card .card-bg-img {
    object-position: center 18%;
  }
  .cdm-info-col {
    padding: 1rem 1.2rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .cdm-name  { font-size: 1.2rem; }
  .cdm-close {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    z-index: 9;
    background: rgba(0,0,0,0.6) !important;
  }
}

/* ─── Char picker grid ─── */
@media (max-width: 768px) {
  .char-picker-grid {
    max-height: 200px;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  }
  .char-pick-card   { border-radius: 8px; }
  .char-pick-name   { font-size: 0.55rem; }
  .char-pick-type   { font-size: 0.5rem; }
}

/* ═══════════════════════════════════════════════════
   15. WALLET-GATE MODAL
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wg-overlay { padding: 0.75rem; align-items: flex-end; }
  .wg-modal {
    border-radius: 18px 18px 0 0 !important;
    padding: 1.5rem 1.2rem max(2rem, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wg-title  { font-size: 1.1rem !important; }
  .wg-desc   { font-size: 0.8rem !important; }
  .wg-features { gap: 0.5rem; }
  .wg-feature  { font-size: 0.75rem; }
  .wg-cta  { padding: 0.8rem !important; font-size: 0.88rem !important; width: 100%; }
  .wg-actions { flex-direction: column; gap: 0.5rem; }
}

/* ═══════════════════════════════════════════════════
   16. WORLD-PORTAL.HTML
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Step 0 confirm — card at top, info below */
  #transfer-overlay {
    padding: 1.5rem 1.2rem max(2rem, env(safe-area-inset-bottom));
    justify-content: center;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
  }
  .to-agent-card    { width: 150px; height: 225px; }
  .to-confirm-title { font-size: 1.15rem; text-align: center; }
  .to-confirm-sub   { font-size: 0.75rem; text-align: center; }
  .to-world-name    { font-size: 0.7rem; }
  .to-confirm-btn   {
    padding: 0.8rem 2rem;
    font-size: 0.88rem !important;
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  /* Step 1 beam */
  .beam-text { font-size: 0.75rem; letter-spacing: 0.08em; }
  .beam-sub  { font-size: 0.6rem; }
  .beam-progress { width: 200px; }
  .beam-ring.r3 { width: 170px; height: 170px; }
  .beam-ring.r4 { width: 250px; height: 250px; }

  /* HUD top bar */
  .wm-hud { padding: 0.6rem 0.85rem; }
  .wm-brand { font-size: 0.72rem; }
  .wm-agent-avatar { width: 28px; height: 28px; }
  .wm-agent-name   { font-size: 0.65rem; }
  .wm-agent-status { font-size: 0.52rem; }
  .wm-back-btn     { font-size: 0.62rem !important; padding: 0.28rem 0.55rem; }

  /* Continent labels */
  .cl-name { font-size: 0.52rem !important; }
  .cl-sub  { display: none; }
  .cl-dot  { width: 5px; height: 5px; margin: 2px auto; }

  /* WUC modal — bottom sheet */
  #wuc-modal { padding: 0; align-items: flex-end; }
  .wuc-box {
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem 1.2rem max(1.8rem, env(safe-area-inset-bottom)) !important;
    max-height: 88svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  .wuc-icon     { width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: 0.7rem; }
  .wuc-title    { font-size: 1.05rem; }
  .wuc-subtitle { font-size: 0.58rem; letter-spacing: 0.04em; margin-bottom: 0.9rem; }
  .wuc-agent-row { padding: 0.6rem 0.8rem; gap: 0.7rem; }
  .wuc-agent-img { width: 36px; height: 36px; border-radius: 8px; }
  .wuc-agent-name { font-size: 0.82rem; }
  .wuc-agent-world { font-size: 0.62rem; }
  .wuc-agent-badge { font-size: 0.58rem; padding: 2px 6px; }
  .wuc-progress-section { margin-bottom: 0.9rem; }
  .wuc-progress-bar { height: 5px; }
  .wuc-step { font-size: 0.68rem; padding: 0.32rem 0; }
  .wuc-step-icon { width: 17px; height: 17px; font-size: 0.56rem; }
  .wuc-message { font-size: 0.76rem; min-height: 32px; margin-bottom: 1rem; }
  .wuc-actions { flex-direction: column; gap: 0.5rem; }
  .wuc-btn-primary,
  .wuc-btn-secondary { width: 100%; padding: 0.75rem; font-size: 0.85rem !important; }
}

/* ═══════════════════════════════════════════════════
   17. SAFE AREA (iPhone notch / home bar)
═══════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .wg-modal, .wuc-box, .cdm-inner {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  #navbar {
    padding-top: env(safe-area-inset-top);
  }
  #transfer-overlay {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════
   18. VERY SMALL PHONES (< 375px)
═══════════════════════════════════════════════════ */
@media (max-width: 374px) {
  .hero-title    { font-size: 1.5rem; }
  .section-title { font-size: 1.2rem; }
  .hero-stats    { grid-template-columns: 1fr 1fr; }
  .stat-num      { font-size: 1.1rem; }
  .stat-number    { font-size: 1.1rem; }
  .invest-options { grid-template-columns: 1fr !important; }
  .nft-grid      { grid-template-columns: 1fr !important; }
  .wuc-box       { padding: 1.2rem 1rem 1.8rem !important; }
  .so-result .char-card { width: 170px !important; height: 265px !important; }
  .so-card-wrapper { width: 195px; height: 305px; }
}

/* ═══════════════════════════════════════════════════
   19. LANDSCAPE PHONES
═══════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  #hero { min-height: auto; padding: 72px 1rem 2rem; }
  .worlds-hero { min-height: auto; }
  .so-result {
    flex-direction: row !important;
    flex-wrap: nowrap;
    max-height: 96vw;
    overflow-y: auto;
    align-items: flex-start;
    padding: 1rem;
    gap: 1rem;
  }
  .so-result .char-card { width: 160px !important; height: 250px !important; flex-shrink: 0; }
  .so-result-actions { flex-direction: column; }
  .wuc-box   { max-height: 88vw; overflow-y: auto; }
  #transfer-overlay { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 1rem; }
  .to-agent-card { width: 110px; height: 165px; }
}

/* ═══════════════════════════════════════════════════
   20. SCROLLBAR GLOBAL SLIM (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
}

/* ═══════════════════════════════════════════════════
   21. TOAST NOTIFICATIONS — mobile
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toast {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    left: 1rem !important;
    right: 1rem !important;
    max-width: none !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 1rem !important;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════
   22. MARKET DATA / STATS GRID
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .market-data {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }
  .md-item { padding: 0.7rem; }
  .md-value { font-size: 1rem; }
  .md-label { font-size: 0.58rem; }
  .md-change { font-size: 0.62rem; }
}

/* ═══════════════════════════════════════════════════
   23. ABOUT / WALLET PROMO SECTION
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .about-lead { font-size: 0.95rem !important; line-height: 1.7; }
  .about-features { gap: 0.5rem; margin-top: 1rem; }
  .feature-tag { font-size: 0.72rem; padding: 0.3rem 0.6rem; }

  /* Tech flow — reduce padding & font sizes on mobile */
  .tech-flow { padding: 1rem; gap: 0.4rem; }
  .flow-step  { padding: 0.5rem 0.6rem; gap: 0.6rem; }
  .flow-icon  { font-size: 1.4rem; }
  .flow-text  { font-size: 0.8rem; }
  .flow-arrow { font-size: 0.85rem; padding: 0.1rem 0.5rem; }

  /* Wallet promo */
  .wallet-promo-inner { grid-template-columns: 1fr !important; gap: 1rem; }
  .wpf-item { padding: 0.65rem 0.75rem; font-size: 0.78rem; }
  .wpf-item i { font-size: 1rem; }
  .wpi-title { font-size: 0.82rem; }
  .wpi-val   { font-size: 1rem; }
}