/* ════════════════════════════════════════════════════════════
   mobile.css — Profity mobile/responsive layer
   ADDITIVE ONLY. Everything is wrapped in @media (max-width:768px),
   so desktop (>768px) never reads a single rule here.
   Source of truth (HTML / JS / state) is shared 1:1 with desktop.
   ════════════════════════════════════════════════════════════ */

/* The bottom nav is hidden on desktop; shown only on phones. */
.mobile-bottom-nav { display: none; }

/* Pricing tab bar — built by mobile.js, shown only on phones. */
.mob-price-tabs { display: none; }

@media (max-width: 768px) {

  /* ── 0. Hide scrollbars on phones ────────────────────────────────
     The thin scrollbar track shows as a vertical line on the right edge of
     scrolling areas (market list, league/duel screens). Native apps hide it;
     hide it everywhere on phones so lists read as clean full-width rows. */
  .screen, .screen-inner, .market-grid-wrap, .market-grid,
  #clan-tab-content, .clan-stock-list, .lt-market-grid,
  .coach-messages, .chat-messages {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .screen::-webkit-scrollbar, .screen-inner::-webkit-scrollbar,
  .market-grid-wrap::-webkit-scrollbar, .market-grid::-webkit-scrollbar,
  #clan-tab-content::-webkit-scrollbar, .clan-stock-list::-webkit-scrollbar,
  .lt-market-grid::-webkit-scrollbar, .coach-messages::-webkit-scrollbar,
  .chat-messages::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }

  /* ── 1. Bottom nav for primary screens + the side rail as a drawer ─
     The bottom nav covers 5 destinations; the rest (Missions, Coach,
     Watchlist, Heatmap, News, Ranks, Clan, Settings, Portfolio…) still
     live in the side rail. On phones the rail becomes an off-canvas
     drawer opened by the topbar logo/hamburger (wired in mobile.js). */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 300px;
    z-index: 11000;
    /* !important so the desktop .collapsed transform (sized to the desktop
       rail, not the drawer) can't leave the drawer peeking on screen —
       drawer position depends only on .mob-open. */
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar.mob-open { transform: translateX(0) !important; }
  /* a phone drawer is always full width — ignore desktop collapse state */
  .sidebar.collapsed { width: 82vw; max-width: 300px; }

  .mob-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 10900;
    background: rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .mob-sidebar-backdrop.open { opacity: 1; visibility: visible; }

  .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
    /* leave room for the fixed bottom nav so content isn't covered */
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 2000;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(12,12,12,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
  }

  .mnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.42);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-item svg { width: 22px; height: 22px; }
  .mnav-item.active { color: var(--accent); }
  .mnav-item.active svg { filter: drop-shadow(0 0 6px rgba(0,255,140,0.5)); }

  /* ── 2. Topbar: the logo/hamburger opens the sidebar drawer ── */
  .topbar-logo-toggle { pointer-events: auto; }

  /* ── 3. Generic: collapse fixed multi-column grids to one column ─ */
  .screen { padding-left: 14px !important; padding-right: 14px !important; }

  /* ── 4. Landing page navbar ──────────────────────────────────────
     Desktop packs brand + 5 anchor links + Log In/Sign Up (~652px wide)
     into the bar; that overflows a phone and pushes the auth buttons
     off-screen. On phones: drop the secondary anchor links, shrink the
     bar, and keep the brand + auth buttons that actually matter. */
  #auth-navbar {
    height: 54px;
    padding: 0 8px;
    gap: 4px;
  }
  /* Phone navbar: logo left, PROFITY centered, Log In/Sign Up right.
     The 5 anchor links are dropped (too cramped to tap; still reachable
     by scrolling). The wordmark is absolutely centered in the bar so it
     stays put regardless of the side widths. */
  .auth-nav-links { display: none !important; }
  .auth-nav-logo  { width: 30px; height: 30px; }
  .auth-nav-brand { gap: 0; flex-shrink: 0; margin-left: 16px; }  /* nudge off the corner */
  .auth-nav-name {
    display: block !important;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px; letter-spacing: 0.08em;
    pointer-events: none;
  }
  .auth-nav-actions { gap: 6px; flex-shrink: 0; }
  .auth-nav-login  { font-size: 12px; padding: 6px 10px; }
  .auth-nav-signup { font-size: 12px; padding: 6px 13px; }

  /* Hero tagline: 90px is enormous on a 375px screen — scale it down. */
  .auth-tagline { font-size: 40px; line-height: 1.12; margin-bottom: 14px; }
  .auth-subtag { font-size: 14px; margin-bottom: 28px; padding: 0 16px; }
  .auth-subtag-gold { font-size: 11px; }

  /* CTA buttons: let them share the row comfortably. */
  .auth-cta-row { width: 100%; max-width: 320px; }
  .auth-cta-row .auth-cta-btn { flex: 1; }

  /* ── 5. In-game top bar ──────────────────────────────────────────
     Desktop crams logo + title + event badge + market clock + status
     + gift + inbox + coins + gems into a 46px bar — it overflows and
     gets clipped on a phone. Keep what matters on mobile (logo/menu,
     title, daily-reward, inbox, coins, gems); hide the wide widgets. */
  .topbar { padding: 0 10px; }
  .topbar-logo-btn   { display: flex !important; }  /* opens the sidebar drawer */
  .meb-topbar-badge  { display: none !important; }  /* market-event badge */
  .market-clock      { display: none !important; }  /* wide NYSE clock */
  .topbar-right      { gap: 6px; }
  .topbar-right .market-badge { display: none !important; }
  /* keep the daily-reward gift (main.css hides it below 600px) */
  .topbar-right .dr-gift-btn { display: flex !important; }
  .balance-chip      { padding: 4px 7px; }
  .balance-chip .balance-amt { font-size: 12px; }
  .topbar-title      { font-size: 15px; }

  /* ── 6. Landing — Features section (tabs + feature rows) ─────────
     Desktop: a pill of 4 tabs and rows split into 2 columns (text |
     mockup). On a phone the tabs overflow and the side-by-side text
     gets clipped. Fix: tighten the tabs to fit, and stack each row
     into a single column. */
  .lp-tabs { max-width: 100%; gap: 2px; }
  .lp-tab { padding: 8px 9px; font-size: 10px; letter-spacing: 0.03em; gap: 0; }
  .lp-tab .tab-icon { display: none; }   /* reclaim width for the labels */

  .lp-feat-row.lp-feat-active {
    grid-template-columns: 1fr !important;
    gap: 22px; padding: 18px 0;
  }
  /* Even ("flipped") rows put the mockup first on desktop — on mobile
     always show the text on top, mockup below, for a consistent read. */
  .lp-feat-row.lp-feat-flipped .lp-feat-left  { order: 1; padding-left: 0; }
  .lp-feat-row.lp-feat-flipped .lp-feat-right { order: 2; }
  .lp-feat-row.lp-feat-flipped .lp-feat-num-bg { left: 0; }
  .lp-feat-num-bg { font-size: 84px; top: -16px; }
  .lp-feat-right, .lp-feat-mock-frame, .lp-feat-mock { max-width: 100%; }
  .lp-feat-list { padding: 0 18px; box-sizing: border-box; }  /* keep text off the edges */

  /* ── 7. Landing — "Inside the game" section ──────────────────────
     Desktop pins ONE mock window to the side and swaps its contents as
     you scroll. On a phone that single window either parks at the bottom
     or (if pinned) covers the text. Instead, mobile.js clones the matching
     screen under each of the 4 text slides, so every feature shows its own
     screen inline. Hide the original single window; style the clones. */
  #lp-sticky-pin { flex-direction: column; }
  #lp-hw-text-col { max-width: 100%; }
  #lp-hw-mock-col { display: none !important; }   /* original single sticky window */

  .lp-hw-mob-frame { margin-top: 16px; border-radius: 14px; }
  .lp-hw-mob-win {
    background: #0b0f18;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; overflow: hidden;
  }
  .lp-hw-mob-frame .lp-mock-state-mob { display: block !important; }

  /* ── 8. Landing — "App" phone demo (Everything included) ─────────
     Desktop shows a phone mock of unlabeled app icons + a side info
     panel. On a phone those icons read as mystery glyphs. Turn each into
     a labelled home-screen tile (icon + name) so it's instantly legible
     and feels like a real app grid; tapping still drives the info panel. */
  /* Enlarge the phone so an opened "app" has room to breathe. */
  .lp-phone-frame { width: min(84vw, 320px); height: min(150vw, 600px); }

  .lp-phone-apps { padding: 50px 20px 46px; row-gap: 12px; column-gap: 12px; }
  .lp-app-icon {
    flex-direction: column; gap: 8px;
    width: 100%; height: auto; margin: 0;
    padding: 16px 6px; border-radius: 18px;
  }
  .lp-app-icon svg { width: 26px; height: 26px; }
  .lp-app-label {
    display: block !important;
    font-size: 11px; font-weight: 700; line-height: 1.18;
    text-align: center; color: rgba(255,255,255,0.6);
  }
  .lp-app-icon.lp-app-active .lp-app-label { color: rgb(var(--ac)); }

  /* In-phone "app open" view: tapping a tile slides this over the grid,
     inside the phone, like launching an app. Built by mobile.js. */
  .lp-phone-appview {
    position: absolute; inset: 0; z-index: 6;
    background: #0b0f18;
    display: flex; flex-direction: column;
    transform: translateX(100%); opacity: 0; pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
  }
  .lp-phone-appview.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .lp-phone-appview-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .lp-phone-appview-back {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.08); border: none; color: #fff;
    font-size: 14px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .lp-phone-appview-title { font-size: 13px; font-weight: 800; color: #fff; }
  .lp-phone-appview-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
  /* tighten the reused detail card for the narrower phone screen */
  .lp-phone-appview-body .lp-feat-detail-title { font-size: 19px; }
  .lp-phone-appview-body .lp-feat-detail-desc  { font-size: 13px; }

  /* Entrance: stagger the content up as the app opens, so every app has
     a little life on launch (on top of any animated visual it carries). */
  .lp-phone-appview.open .lp-phone-appview-body > * {
    animation: appview-in 0.42s cubic-bezier(0.22,1,0.36,1) both;
  }
  .lp-phone-appview.open .lp-phone-appview-body > *:nth-child(1) { animation-delay: 0.04s; }
  .lp-phone-appview.open .lp-phone-appview-body > *:nth-child(2) { animation-delay: 0.10s; }
  .lp-phone-appview.open .lp-phone-appview-body > *:nth-child(3) { animation-delay: 0.16s; }
  .lp-phone-appview.open .lp-phone-appview-body > *:nth-child(4) { animation-delay: 0.22s; }
  .lp-phone-appview.open .lp-phone-appview-body > *:nth-child(5) { animation-delay: 0.28s; }

  /* ── 9. Landing — Testimonials ───────────────────────────────────
     Base mobile styles hide columns 2 & 3, leaving a single column.
     Show all three, scaled down so the scrolling "wall" fits a phone. */
  .lp-testimonials-section { padding: 70px 10px; }
  .lp-testi-col:nth-child(2),
  .lp-testi-col:nth-child(3) { display: flex !important; }
  .lp-testi-cols { gap: 8px; max-width: 100%; }
  .lp-testi-col  { width: auto; flex: 1; min-width: 0; gap: 8px; }
  .lp-testi-track { gap: 8px; }
  .lp-testi-card { padding: 11px 10px; gap: 8px; border-radius: 13px; }
  .lp-testi-text { font-size: 9.5px; line-height: 1.5; }
  .lp-testi-author { gap: 6px; }
  .lp-testi-avatar { width: 22px; height: 22px; }
  .lp-testi-name { font-size: 9.5px; }
  .lp-testi-handle { font-size: 8.5px; }

  /* ── 10. Landing — Pricing: tab selector + one full card ─────────
     3 side-by-side cards are too cramped on a phone. Instead show a
     Free | Pro | Elite tab bar (built by mobile.js) and one full,
     readable card for the selected plan. */
  .lp-pricing-section { padding: 64px 16px; }
  .lp-pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px !important; gap: 0; margin-top: 18px;
  }
  .lp-price-card { display: none; }
  .lp-price-card.mob-active { display: flex; }
  .lp-price-card.featured { transform: none; }

  .mob-price-tabs {
    display: flex; gap: 4px; width: 100%; max-width: 400px;
    margin: 30px auto 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px; padding: 4px;
  }
  .mob-price-tab {
    flex: 1; padding: 11px 6px; border: none; background: none;
    color: rgba(255,255,255,0.5); font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
    border-radius: 10px; cursor: pointer; text-transform: uppercase;
    transition: color 0.2s, background 0.2s;
  }
  .mob-price-tab.active { background: rgba(0,255,140,0.14); color: var(--accent); }

  /* ── 11. Game Home — polish spacing on phones ────────────────────
     The bento adds 20px of its own side padding on top of the 14px the
     screen already gives (34px wasted each side → cramped 147px cards).
     Drop the bento's side padding so the cards breathe (~167px). */
  .home-bento-grid { padding: 14px 0 28px; gap: 12px; }

  /* Coach card: avatar + name + Chat button don't fit one row at ~168px,
     so the button gets clipped. Let it wrap to its own full-width line. */
  .home-coach-header { flex-wrap: wrap; gap: 8px; }
  .home-coach-meta { min-width: 0; }
  .home-coach-btn { width: 100%; order: 3; text-align: center; }

  /* Split-row cards (Holdings+Movers, Trades+Clock, the Status Strip)
     put two-to-four widgets side by side, which is fine on desktop but
     crushes each one to ~half or ~quarter of a phone's width. Stack them
     into full-width sections, one per row, divided by a horizontal
     hairline instead of a vertical one. */
  .card.home-split-row { flex-direction: column; }
  .home-split-row .home-split-divider { width: 100%; height: 1px; }

  /* Inside the Movers card: keep Gainers | Losers side-by-side (they fit
     fine at full width), but shrink the mover-row text a touch. */
  .movers-col-title { font-size: 10px; margin-bottom: 6px; }
  .mover-row {
    padding: 7px 8px;
    gap: 6px;
  }
  .mover-ticker { font-size: 12px; min-width: 38px; }
  .mover-name   { font-size: 10px; }
  .mover-pct    { font-size: 12px; }

  /* Recent Trades: trade rows at full width look natural,
     just tighten padding slightly for phone. */
  .trade-row { padding: 10px 12px; gap: 10px; }
  .trade-ticker { font-size: 12px; min-width: 40px; }
  .trade-info   { font-size: 11px; }
  .trade-pnl    { font-size: 12px; }

  /* ── 12. Profile screen ──────────────────────────────────────────
     Desktop builds the header with a huge 168px/160px padding and
     absolutely-positioned rank/Edit/Locker, and a 1fr+300px main grid —
     all of which collapse on a phone. Rebuild it as a clean vertical
     layout: avatar over the banner, name beside it, chips/buttons below,
     and a single-column body. */
  .profile-banner-strip { height: 120px; }
  /* Centered header: avatar in the middle over the banner, everything
     below it stacked and centered. */
  .profile-banner-avatar {
    top: 78px !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88px; height: 88px; font-size: 32px; border-width: 3px;
  }
  /* anchor the corner badges/buttons to the card so they sit over the banner */
  .profile-card { position: relative; }
  .profile-identity {
    position: static;
    flex-direction: column; align-items: center;
    text-align: center;
    padding: 50px 16px 14px; gap: 6px; min-height: 0;
  }
  .profile-id-left { flex-basis: auto; padding-left: 0; align-items: center; gap: 2px; }

  /* Name row: clan badge LEFT of the username, plan (Free/Elite) RIGHT —
     username stays centered between them. */
  .profile-name-row {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: nowrap; margin-bottom: 0;
  }
  .profile-banner-name { display: inline-block; font-size: 22px; order: 0; }
  .profile-clan-badge {
    order: -1; position: static !important;
    top: auto !important; left: auto !important;
  }
  #profile-plan-badge, .profile-name-row .plan-badge {
    order: 1; position: static !important;
    top: auto !important; left: auto !important;
  }
  .profile-banner-meta { justify-content: center; }

  /* Edit + Locker -> icon-only round buttons just BELOW the banner, top-right */
  .profile-identity .profile-edit-btn,
  .profile-locker-chip {
    position: absolute !important; top: 132px; transform: none !important;
    width: 38px !important; height: 38px; padding: 0 !important;
    border-radius: 50% !important; gap: 0 !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 0 !important;          /* hide the text labels */
    z-index: 5;
  }
  .profile-identity .profile-edit-btn { right: 12px; left: auto !important; }
  .profile-locker-chip { left: 12px !important; right: auto !important; }
  .profile-identity .profile-edit-btn svg,
  .profile-locker-chip svg { width: 17px; height: 17px; }

  /* Rank gets its own centered row */
  .profile-id-center {
    position: static !important; transform: none !important;
    left: auto !important; width: auto !important;
    display: flex; justify-content: center;
  }

  /* Full-bleed: drop the "card window" chrome so the profile fills the
     screen edge-to-edge instead of sitting in a bordered box. The visit
     (other player) profile reuses the same .profile-* markup, so give it the
     same full-bleed padding reset. */
  #screen-profile, #screen-visit-profile { padding: 0 !important; }
  #screen-profile > .screen-inner,
  #screen-visit-profile > .screen-inner { padding: 0 !important; }
  .profile-card {
    border: none !important; border-radius: 0 !important;
    margin: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .profile-banner-strip { border-radius: 0; }

  /* Body: single column instead of 1fr + 300px. */
  .profile-main-grid { grid-template-columns: 1fr !important; }
  .profile-weekly-section { border-right: none; border-top: 1px solid var(--border); }
  .profile-calendar-section { padding: 16px; }
  /* Discipline chips: 2 per row instead of 4. */
  .discipline-strip { grid-template-columns: repeat(2, 1fr); padding: 16px; }

  /* Remove the Monthly Goal donut + its stat block on phones — keep the
     calendar as the focus. */
  .profile-stats-donut-row { display: none !important; }

  /* Trade Journal + Checklist: stack instead of overflowing side by side. */
  .profile-bottom-widgets { flex-direction: column; }

  /* Calendar cells are 90px tall on desktop — far too big on a phone.
     Shrink them so the whole month fits without a giant scroll. */
  .cal-day { min-height: 52px; padding: 5px 2px; gap: 2px; }
  .cal-day-num { font-size: 11px; }
  .cal-day-amt, .cal-day-pct { font-size: 8px; }
  .cal-week-total { padding: 4px 2px; }

  /* ── 13. Market (Trade) screen ───────────────────────────────────
     The stock grid uses CSS columns:3 — on a phone that squeezes each
     card to ~125px so the ticker, sparkline and price overlap into a
     mess. One column per row gives each stock the full width its
     internal ticker | chart | price layout needs. */
  /* Match the clan War Fund EXACTLY:
     - block stack (not CSS multi-column, which adds odd spacing)
     - 12px side padding so the row separators inset 12px from the edges,
       identical to the clan list sitting in a 12px-padded screen-inner. */
  /* Drop the 14px side padding on the trade screen so the stock list goes
     edge-to-edge (full width). The search/filter header keeps its own 16px
     padding, so only the list spans the full width — same as the league. */
  #screen-trade { padding-left: 0 !important; padding-right: 0 !important; }

  /* ── Mobile market clock strip ─────────────────────────────────
     Small pill above the search header showing NYSE time + session. */
  .mob-market-clock {
    display: flex !important;
    align-items: center; justify-content: space-between;
    padding: 10px 16px 8px;
    gap: 10px;
  }
  .mob-clock-time {
    font-family: 'SF Mono', 'Fira Mono', 'Consolas', monospace;
    font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums; color: var(--t1); line-height: 1;
  }
  .mob-clock-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .mob-clock-label { font-size: 10px; font-weight: 700; color: var(--t3);
    text-transform: uppercase; letter-spacing: 0.10em; }
  .mob-clock-session {
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    padding: 2px 9px; border-radius: 99px; text-transform: uppercase;
  }
  .mob-clock-session.regular { background: rgba(0,255,140,0.12); color: var(--accent); border: 1px solid rgba(0,255,140,0.28); }
  .mob-clock-session.pre     { background: rgba(46,230,255,0.10); color: var(--cyan);   border: 1px solid rgba(46,230,255,0.28); }
  .mob-clock-session.after   { background: rgba(157,123,255,0.12); color: var(--violet); border: 1px solid rgba(157,123,255,0.28); }
  .mob-clock-session.closed  { background: rgba(255,255,255,0.06); color: var(--t3);    border: 1px solid rgba(255,255,255,0.10); }
  .market-grid {
    columns: auto !important;
    column-rule: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .market-grid .mkt-card {
    grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Kill the green/red event-affected background tints on phones — keep flat. */
  .market-grid .mkt-card.mkt-ev-up,
  .market-grid .mkt-card.mkt-ev-dn { background: transparent !important; border-left: none !important; }
  .market-grid .mkt-card > * { min-width: 0 !important; }
  .market-grid .mkt-chart-area,
  .market-grid .mkt-chart-area svg { width: 100% !important; }

  /* ── 14. Fill the screen on Leaderboard + Shop ───────────────────
     Both sat inside ~38px of side padding (screen 14 + inner 24), so
     their content floated like a small window. Drop the screen padding
     and shrink the inner padding so cards fill the phone width. */
  #screen-leaderboard, #screen-shop { padding: 0 !important; }
  #screen-leaderboard > .screen-inner { padding: 12px 12px 90px !important; }
  #screen-shop > .screen-inner { padding: 12px 12px 100px !important; }

  /* ── Portfolio + Watchlist ──────────────────────────────────────
     Same 38px side-padding problem as leaderboard/shop. Drop screen
     padding, shrink inner to 12px, and scale down the hero card so
     its 28px desktop padding doesn't eat half the phone width. */
  #screen-portfolio, #screen-watchlist { padding: 0 !important; }
  #screen-portfolio > .screen-inner { padding: 12px 12px 100px !important; }
  #screen-watchlist > .screen-inner  { padding: 12px 12px 100px !important; }

  .port-hero         { padding: 20px 16px !important; }
  .port-hero-value   { font-size: 34px !important; }
  .port-qstat        { padding: 10px 12px !important; }
  .port-bw-chip      { padding: 10px 12px !important; }

  /* Leaderboard wraps everything (season banner, tabs, player list) in one
     bordered .card — that's the "window". Strip its chrome so it sits flush
     on the screen instead of looking like a boxed panel. */
  #screen-leaderboard > .screen-inner > .card {
    border: none !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* ── 16. Clan screen ────────────────────────────────────────────
     1. Full-bleed: drop screen-inner padding so the clan card fills edge-to-edge
     2. League chart (clan-mkt-chart): 24px is invisible — make it taller
     3. Chat input bar: add extra bottom padding so it clears the bottom nav (68px) */

  /* Full bleed. The tabs-bar vertical position must be IDENTICAL across every
     clan tab. Previously it came from the screen-inner top padding, which the
     chat tab zeroes out (so the bar jumped up in chat). Instead, zero the
     screen-inner top padding everywhere and control the bar position with a
     fixed margin-top on .clan-tabs — same in every tab, including chat. */
  #screen-clan { padding: 0 !important; }
  #screen-clan > .screen-inner { padding: 0 12px 100px !important; }
  #screen-clan .clan-tabs { margin-top: 20px !important; }

  /* When chat tab is active the screen-inner is already padding:0 (desktop CSS),
     but the chat input bar gets crushed behind the bottom nav. Push it up. */
  #screen-clan.active.clan-chat-active > .screen-inner { padding: 0 !important; }
  #screen-clan.active.clan-chat-active .clan-tabs { margin: 20px 12px 0 !important; padding: 4px !important; }
  .chat-input-bar { padding-bottom: 50px !important; }

  /* War Fund: the hero panel is pulled up under the tabs by a -24px margin on
     desktop, which overlaps the tab bar on mobile. Clear it so there's a real
     gap between the tabs and the "YW WAR FUND / $amount" panel. */
  .clan-market-wrap { margin-top: 0 !important; }

  /* Trading Floor (trade draft / buy suggestions) is hidden on phones by
     main.css (display:none ≤600). Re-enable it as a bottom sheet so phone
     users can still vote/propose. Toggled by a floating button (mobile.js). */
  .trade-panel {
    display: flex !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    max-height: 72vh !important;
    z-index: 11200 !important;
    /* Solid, fully opaque so the blurred chat behind never bleeds through —
       the sheet reads as the foreground element. */
    background: #121212 !important;
    border-top: 1px solid rgba(0,255,140,0.25) !important;
    border-left: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6), 0 -1px 0 rgba(0,255,140,0.12) !important;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto !important;
    padding-bottom: 60px !important;
  }
  .trade-panel.mob-open { transform: translateY(0); }
  /* grab handle */
  .trade-panel::before {
    content: ''; position: sticky; top: 8px;
    display: block; width: 36px; height: 4px; margin: 8px auto 4px;
    background: var(--border); border-radius: 2px; flex-shrink: 0;
  }

  /* Transparent click-catcher. Lives INSIDE .chat-wrap (same trapped
     stacking context as the sheet) so the sheet always paints above it.
     The blur is applied to the chat content itself, not here — that keeps
     the sheet perfectly sharp regardless of stacking. */
  .mob-tradefloor-backdrop {
    position: fixed; inset: 0; z-index: 11150;
    background: transparent;
    opacity: 0; visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
  }
  .mob-tradefloor-backdrop.open { opacity: 1; visibility: visible; }

  /* Blur the chat behind the open sheet (sheet is a sibling, stays sharp). */
  .chat-panel { transition: filter 0.3s ease; }
  .chat-panel.cf-blurred {
    filter: blur(6px) brightness(0.7);
    pointer-events: none;
  }

  /* Trading Floor button — sits in the chat input bar, right of Send. */
  .cf-chat-btn {
    position: relative;
    width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid rgba(0,255,140,0.3);
    background: rgba(0,255,140,0.1);
    color: #00ff8c; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .cf-chat-btn:active { background: rgba(0,255,140,0.2); }
  .cf-chat-btn svg { width: 17px; height: 17px; }
  /* Blinking red dot when there's an active proposal. */
  .cf-chat-dot {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #ff3b5c; border: 1.5px solid #121212;
    display: none;
    animation: cf-dot-blink 1.1s ease-in-out infinite;
  }
  .cf-chat-dot.on { display: block; }
  @keyframes cf-dot-blink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.35; transform: scale(0.8); }
  }

  /* Clan header card: slightly tighter on phone */
  .clan-header-card { padding: 16px; border-radius: 12px; gap: 12px; }
  .clan-header-name { font-size: 18px; }

  /* 4 stat cards (Clan RP / Rank / This Week / Members):
     4 columns at ~85px each is too cramped — switch to 2×2 grid with
     more padding and larger text so each card is comfortably readable. */
  .clan-stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .clan-stat-card { padding: 16px 10px 13px !important; }
  .clan-stat-val  { font-size: 17px !important; }
  .clan-stat-lbl  { font-size: 10px !important; }
  .clan-stat-icon { width: 20px !important; height: 20px !important; }

  /* League sparkline stock cards: was 24px — make it 44px so curves show */
  .clan-mkt-chart { min-height: 44px !important; }
  .clan-mkt-chart svg { height: 44px !important; }

  /* War fund stock list: one stock per row, identical to the Market screen.
     The cards are emitted (in JS, phones only) with the same .mkt-left /
     .mkt-chart-area / .mkt-right structure as Market, so they inherit the
     Market look. Here we just lay the list out as a single column and give
     the row the Market grid (1fr | 110px | 1fr). */
  .clan-stock-list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    grid-template-columns: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* League / Duel full-width market list.
     The screen has 14px side padding and its .screen-inner (lt-content) has
     24px — and lt-content's overflow-y:auto forces overflow-x:auto, which made
     any breakout PAN horizontally (the "escape"). Fix: drop the screen's 14px
     side padding (re-pad only the header), keep lt-content's 24px for the stats,
     and break the grid out of that 24px with negative margins so it spans the
     full screen width with no horizontal scroll. */
  #screen-league-trade, #screen-duel-trade {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  #screen-league-trade > .lt-header, #screen-duel-trade > .lt-header {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  /* Make the whole content the same full width: drop the .screen-inner side
     padding so the detail cards (hero / stats / positions) span the full width
     exactly like the market rows below. Each card keeps its own internal
     padding, so its text stays comfortably inset. */
  #screen-league-trade > .screen-inner,
  #screen-duel-trade > .screen-inner {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .lt-market-grid {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    background: transparent !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* minmax(0,*) lets the columns shrink below their content so nothing
     overflows the row; the chart takes a flexible middle share. */
  .cwf-mob-row {
    display: grid !important;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    /* Flat row look (same as clan war fund): kill any base card chrome
       (lt-mkt-card border / radius / background) and keep only a bottom rule. */
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .cwf-mob-row > * { min-width: 0 !important; }
  .cwf-mob-row .mkt-chart-area,
  .cwf-mob-row .mkt-chart-area svg { width: 100% !important; }
  .cwf-mob-row.has-holding { background: rgba(0,255,140,0.04) !important; }

  /* ── 17. Ranks screen ───────────────────────────────────────────
     The rank-mid layout (badge | progress bar | next badge) is a flex
     row that gets crushed at phone width — the two badges eat all the
     space leaving the progress bar invisible. Stack it vertically and
     make the card fill the screen. */
  #screen-ranks { padding: 0 !important; }
  #screen-ranks > .screen-inner { padding: 12px 12px 100px !important; }

  .rank-mid {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .rank-mid-bar { width: 100% !important; align-items: center; }
  .rank-mid-track { width: 100% !important; }

  /* RP tables side-by-side → stack */
  .rp-tables-grid { grid-template-columns: 1fr !important; }

  /* Bottom section (graph + ladder): hidden by default on mobile,
     toggled open by .mob-rank-details-open class on the parent section */
  .rank-bottom-section-mob {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  .rank-bottom-section-mob.open { max-height: 2000px; }

  /* Stack graph + ladder into one column */
  .rank-bottom-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Toggle button injected by mobile.js */
  .mob-rank-toggle-btn {
    width: 100%; padding: 11px; margin-top: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 10px; color: var(--t2);
    font-size: 12px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s;
  }
  .mob-rank-toggle-btn:active { background: rgba(255,255,255,0.1); }

  /* ── 18. Settings screen ─────────────────────────────────────────
     The 2-column grid squeezes every group to ~50%. On phones it should
     be one full-width column. The Account card's inner 2-column
     (username | password) also needs to stack. */
  #screen-settings { padding: 0 !important; }
  #screen-settings > .screen-inner { padding: 12px 12px 100px !important; }

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

  /* Account card inner 2-col → 1-col */
  #screen-settings .settings-card > div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Remove the border-right divider between username/password on mobile */
  #screen-settings .settings-card > div > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  /* ── 19. Coach AI screen ─────────────────────────────────────────
     coach-layout is flex with a 230px sidebar + chat area. On a phone
     the sidebar takes the entire width, hiding the chat. Hide the
     sidebar and show only the chat (most users go straight to chatting).
     A small "History" button in the chat header can open the sidebar
     as an overlay if needed — for now: sidebar hidden, chat fills. */
  .coach-layout { flex-direction: column !important; }
  /* Remove the leftover screen-enter transform so the fixed drawer/backdrop
     are positioned against the VIEWPORT (not trapped in this screen's
     stacking context, which let the topbar paint over the drawer's top). */
  #screen-coach.active { transform: none !important; }

  /* History as a left side-drawer (slides in from the side, not top).
     Starts below the 46px topbar and ends above the bottom nav. */
  .coach-sidebar {
    position: fixed !important;
    top: 47px !important; left: 0 !important; bottom: 56px !important;
    width: 78vw !important; max-width: 290px;
    max-height: none !important;
    z-index: 11400;
    overflow-y: auto !important;
    background: #0a0a0a !important;
    border-right: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
    transform: translateX(-105%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 8px 0 28px rgba(0,0,0,0.5);
  }
  .coach-chat { flex: 1; min-height: 0; }

  /* Backdrop behind the drawer (created by mobile.js). */
  .coach-hist-backdrop {
    position: fixed; inset: 0; z-index: 11300;
    background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .coach-hist-backdrop.open { opacity: 1; visibility: visible; }

  /* The coach screen fills full height and runs UNDER the fixed bottom nav,
     so the input row at the bottom gets hidden. Reserve the nav's height so
     the whole chat (incl. the text input) sits above it — like the clan chat. */
  #screen-coach.active { padding-bottom: 38px !important; box-sizing: border-box !important; }
  .coach-input-area { padding-bottom: 14px !important; }

  /* History toggle button in the chat header (injected by mobile.js).
     Opens the conversation list (sidebar) as a dropdown so phone users can
     switch between past chats or start a new one. */
  .coach-chat-header { position: relative; }
  .coach-hist-btn {
    margin-left: auto; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid rgba(212,175,55,0.3);
    background: rgba(212,175,55,0.1); color: #d4af37;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .coach-hist-btn:active { background: rgba(212,175,55,0.22); }
  .coach-hist-btn svg { width: 19px; height: 19px; }

  /* Open state — drawer slides in from the left. */
  .coach-sidebar.mob-open { transform: translateX(0) !important; }

  /* Phone-sized internals: bigger header, avatar, touch-friendly rows, and
     always-visible rename/delete actions (no hover on touch). */
  .coach-sidebar .coach-sidebar-header { padding: 16px 16px 14px; gap: 12px; }
  .coach-sidebar .coach-sidebar-avatar img { width: 38px; height: 38px; }
  .coach-sidebar .coach-sidebar-name { font-size: 15px; }
  .coach-sidebar .coach-new-btn { width: 34px; height: 34px; font-size: 22px; }
  .coach-sidebar .coach-convos-list { padding: 10px 8px; }
  .coach-sidebar .coach-convo-item { padding: 13px 12px; gap: 10px; margin-bottom: 4px; }
  .coach-sidebar .coach-convo-title { font-size: 14px; }
  .coach-sidebar .coach-convo-actions { display: flex !important; }
  .coach-sidebar .coach-convo-action-btn { font-size: 15px; padding: 4px; }

  /* ── 20. Stock Detail screen ─────────────────────────────────────
     Desktop: 2×2 grid (left price panel | right chart) plus a fixed top
     offset. On a phone the 1.4fr/2fr columns squeeze everything to ~80px
     each. Flip to a single scrollable column so each panel gets full width.
     The topbar is ~52px on mobile (bigger touch target), so re-anchor
     the content beneath it. */
  #screen-stock-detail { overflow: hidden; }

  .sd-topbar {
    padding: 10px 14px;
  }

  .sd-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 12px 100px !important;
    /* fill the remaining height below the topbar */
    height: calc(100dvh - 52px);
    scrollbar-width: none;
  }
  .sd-content::-webkit-scrollbar { display: none; }

  /* Each of the 4 quadrant panels becomes full-width and auto-height */
  .sd-panel {
    min-height: unset !important;
    overflow: visible !important;
  }

  /* Reorder panels for mobile:
     DOM order: tl (trade) → tr (chart) → bl (intel) → br (orders/sltp)
     Mobile order: chart → orders/sltp → intel → trade controls */
  .sd-panel-tr { order: 1; }
  .sd-panel-br { order: 2; overflow: visible !important; }
  .sd-panel-bl { order: 3; }
  .sd-panel-tl { order: 4; }

  /* Chart panel: tall enough to be actually useful */
  .sd-panel-tr {
    height: 300px;
    flex-shrink: 0;
  }

  /* Stat cards: 2-col grid stays fine on phone width */
  .sd-stats { grid-template-columns: 1fr 1fr; }

  /* ── 15. Trade Journal modal: one column, full-screen ────────────
     The journal is a 2-column layout (290px entry list | editor). On a
     phone the fixed 290px list leaves ~37px for the editor — unusable.
     Make it a full-screen notebook: entry list on top, editor below. */
  .jnl-modal {
    width: 100vw !important; height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
  }
  .jnl-layout { flex-direction: column; }
  .jnl-panel-left {
    width: 100% !important; flex-shrink: 0;
    max-height: 42%;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .jnl-panel-right { flex: 1; min-height: 0; }
  .jnl-header { padding: 13px 16px; }
  /* 5-stat summary bar is a touch too wide — let it scroll horizontally. */
  .jnl-stats-bar { overflow-x: auto; scrollbar-width: none; }
  .jnl-stats-bar::-webkit-scrollbar { display: none; }
}

/* ── More bottom sheet (always in DOM; shown only on phones via JS) ── */
.mob-more-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 11500;
  background: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity 0.25s ease;
}
.mob-more-backdrop.open { display: block; opacity: 1; }

.mob-more-sheet {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 11600;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 10px 20px 40px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mob-more-sheet.open { display: block; transform: translateY(0); }

.mob-more-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.mob-more-title {
  font-size: 13px; font-weight: 800;
  color: var(--t2); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 18px;
}
.mob-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}
.mob-more-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 6px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mob-more-item:active { background: rgba(255,255,255,0.08); border-color: var(--accent); }
.mob-more-icon { color: var(--t1); }
.mob-more-icon svg { width: 22px; height: 22px; display: block; }
.mob-more-label {
  font-size: 10px; font-weight: 700;
  color: var(--t2); text-align: center;
  white-space: nowrap;
}

@keyframes appview-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}