/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — loaded after every other stylesheet on every page.
   Selectors here match the REAL markup in this codebase, not a generic
   template - e.g. the game screen uses .game-topbar/.trading-panel/
   .card-slots/.leaderboard-table (not .match-header/.trade-panel/
   .sabotage-cards/.live-leaderboard), so that's what's targeted below.
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   PART 1 — GLOBAL MOBILE FOUNDATION
─────────────────────────────────────────────────────────────────────── */

html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Prevent text selection during gameplay gestures */
.chart-canvas-wrap,
.positions-list,
.leaderboard-table,
.card-slots {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Touch targets minimum 44px */
button,
.btn,
[role="button"],
.tw-nav-icon-btn,
.tab-item,
.mode-card,
.position-row {
  min-height: 44px;
}

/* .help-btn is a 16x16px inline "?" info icon (tutorial.css), not a
   primary action - the 44px rule above blew it up into a huge oval that
   broke every tight row it sits in (bid/ask/spread, lot size, SL/TP). A
   supplementary info affordance doesn't need a 44px touch target the way
   a button you're meant to tap to act does. .help-btn's class selector
   already outranks the bare `button` type selector above on specificity,
   so this wins regardless of source order. */
.help-btn {
  min-height: 16px;
  min-width: 16px;
}

/* Safe area padding for notch devices */
.bottom-tab-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

.tw-navbar {
  padding-top: env(safe-area-inset-top);
}

/* Smooth momentum scrolling on real scrollable containers in this app */
.tw-notif-panel .notif-list,
.cs-list,
.positions-list,
#lbBody,
.tw-container {
  -webkit-overflow-scrolling: touch;
}

/* ───────────────────────────────────────────────────────────────────────
   PART 3 — LANDING PAGE (client/landing.html)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .hero {
    padding: 80px 20px 40px !important;
    min-height: 100svh;
  }

  /* Staircase logo - .hl/.hamp are the real per-letter classes (hs1-5/hc1-5
     colour it letter by letter) - the base clamp() floor (40px) alone is
     already wider than a 375px screen across all 11 characters, so this
     lowers the floor for small viewports instead of just shrinking the max. */
  .hl {
    font-size: clamp(24px, 6vw, 40px) !important;
  }

  .hamp {
    font-size: clamp(28px, 7vw, 44px) !important;
  }

  .hero-title {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    letter-spacing: -.01em !important;
  }

  .hero-sub {
    font-size: 14px !important;
    padding: 0 8px;
  }

  /* Stats row - 2x2 grid */
  .stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
  }

  .stat {
    padding: 16px 12px !important;
    border-left: none !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .stat:nth-child(2n) {
    border-right: none;
  }

  .stat-v {
    font-size: 1.3rem !important;
  }

  .stat-l {
    font-size: .58rem !important;
  }

  /* CTA buttons stack vertically */
  .cta-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Floating player cards - horizontal scroll row instead of absolute-positioned float */
  .fc-wrap {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 12px !important;
    height: auto !important;
    padding: 8px 0 16px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fc-wrap::-webkit-scrollbar {
    display: none;
  }

  .fc {
    position: static !important;
    animation: none !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  .feat-text {
    font-size: .72rem !important;
  }

  /* Game modes grid - single column */
  .modes {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Sabotage card grid - 2 columns */
  .sab-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }

  .mobile-download-section {
    padding: 20px 0 !important;
  }

  .download-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .download-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .footer-mid {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px 20px 40px !important;
  }

  .fm-links {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .fm-right {
    text-align: left !important;
  }

  .wm-text {
    font-size: 22vw !important;
  }

  .tick-item {
    font-size: .62rem !important;
    padding: 0 1.5rem !important;
  }

  /* Login/register slide-out panel - full screen on mobile */
  .side-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .gl1 { width: 120vw; height: 120vw; }
  .gl2 { width: 100vw; height: 100vw; }
  .gl3 { display: none; }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: 1.4rem !important;
  }

  .stat-v {
    font-size: 1.1rem !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 4 — BOTTOM TAB BAR (injected by js/bottom-nav.js on logged-in pages)
   Additive to the existing .tw-navbar (which already collapses its middle
   nav-links into the ☰ drawer under 900px) rather than replacing it - the
   top bar still carries identity/coins/notifications/logout, none of which
   belong in a 5-item tab bar.
─────────────────────────────────────────────────────────────────────── */

.bottom-tab-bar {
  display: none;
}

@media (max-width: 768px) {
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(10,12,20,0.97);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9000;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Push page content up so the tab bar doesn't cover it - the legal
     footer most pages end with already sits below everything else, so
     this is enough without touching every page's own layout. */
  body:has(.bottom-tab-bar) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: rgba(255,255,255,0.4);
    transition: color 0.15s;
    padding: 8px 4px;
    min-width: 44px;
    position: relative;
  }

  .tab-item.active {
    color: #F5C542;
  }

  .tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #tab-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00C896, #00A878);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #000;
  }

  .tab-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .tab-play-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
  }

  .tab-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F5C542, #D4A017);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    position: absolute;
    bottom: 8px;
    box-shadow: 0 4px 20px rgba(245,197,66,0.5);
    transition: all 0.2s;
  }

  .tab-play-btn:active {
    transform: scale(0.93);
  }

  .tab-item.active .tab-icon::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F5C542;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 5 — GAME SCREEN LANDSCAPE (client/game.html, css/game.css)
   The desktop layout is a 62/38 grid (.game-main) with a 220px-tall
   .game-bottom row underneath. There's already a portrait-mobile
   breakpoint at max-width:900px in game.css (stacked chart + a bottom-sheet
   .trading-panel toggled by .expanded via #tradingPanelHandle) - but it
   applies to landscape phones too since width alone doesn't distinguish
   orientation, squeezing the chart into 46vh exactly when landscape is the
   one case that should give it the full screen. This block wins over that
   one for landscape specifically without touching the portrait behaviour,
   and reuses the same .expanded toggle rather than building a second one.
─────────────────────────────────────────────────────────────────────── */

/* Portrait-only Chart/Trade switch (Part 5B) - hidden here so landscape
   and desktop never see it (game.css's own layouts don't need it). */
.game-mobile-tabs {
  display: none;
}

@media (max-width: 1024px) and (orientation: landscape) {

  body[data-page="game"] {
    padding-bottom: 0 !important;
  }

  .bottom-tab-bar {
    display: none !important;
  }

  .game-shell {
    height: 100vh;
    overflow: hidden;
  }

  /* Chart fills the full screen, everything else floats on top of it */
  .chart-section {
    position: fixed !important;
    inset: 0 !important;
    border-right: none !important;
    z-index: 1 !important;
  }

  .chart-canvas-wrap {
    height: 100% !important;
  }

  .game-main {
    display: block !important;
  }

  /* Drawing tools need too much width to fit alongside everything else on
     a phone - same treatment as chart-drawing-tools in the original spec. */
  .chart-drawing-toolbar {
    display: none !important;
  }

  /* ── slim top HUD ── */
  .game-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    padding: 0 10px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    background: rgba(10,12,20,0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 200 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .topbar-timer {
    font-size: 16px !important;
    min-width: auto !important;
  }

  .topbar-equity {
    display: none !important;
  }

  .topbar-pnl-label {
    display: none !important;
  }

  .topbar-pnl-value {
    font-size: 14px !important;
  }

  .instrument-tabs {
    padding: 2px !important;
  }

  .instrument-tab {
    padding: 4px 8px !important;
    min-height: 28px !important;
    font-size: 11px !important;
  }

  .leave-match-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    min-height: 28px !important;
  }

  /* Quotes strip - thin bar right under the HUD */
  .chart-quotes {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: auto !important;
    z-index: 90 !important;
    background: rgba(10,12,20,0.7) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    gap: 8px !important;
    border-bottom: none !important;
    border-radius: 0 0 10px 0 !important;
  }

  .timeframe-selector,
  .chart-toolbar-actions {
    display: none !important;
  }

  /* ── floating trade panel, bottom right - reuses the existing
     collapse/expand mechanism instead of a second one ── */
  .trading-panel {
    position: fixed !important;
    inset: auto 8px 8px auto !important;
    width: 190px !important;
    max-height: 44px !important;
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    background: rgba(10,12,20,0.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
    z-index: 150 !important;
    transform: none !important;
    transition: max-height 0.25s ease !important;
    overflow: hidden !important;
  }

  .trading-panel.expanded {
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  .trading-panel-handle {
    display: flex !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .trade-buttons .btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .lot-chip {
    padding: 5px 10px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }

  .account-summary {
    flex-wrap: wrap !important;
  }

  /* ── floating leaderboard, top left ── */
  .leaderboard-panel {
    position: fixed !important;
    top: 46px !important;
    left: 8px !important;
    width: 150px !important;
    max-height: calc(100vh - 60px) !important;
    background: rgba(10,12,20,0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    z-index: 95 !important;
    overflow-y: auto !important;
  }

  .leaderboard-table {
    font-size: 10px !important;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 3px 4px !important;
  }

  /* ── sabotage cards, horizontal strip under the top HUD ── */
  .sabotage-panel {
    position: fixed !important;
    top: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 62vw !important;
    background: rgba(10,12,20,0.75) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 96 !important;
    padding: 4px 8px !important;
    border-right: none !important;
    overflow: visible !important;
  }

  .card-slots {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sabotage-card {
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 4px !important;
  }

  .sabotage-card .desc,
  .sabotage-card .category-tag {
    display: none !important;
  }

  .sabotage-card .name {
    font-size: 9px !important;
  }

  .sabotage-card .icon {
    font-size: 16px !important;
  }

  .target-picker {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 97 !important;
    max-width: 80vw !important;
  }

  /* .game-bottom's own box no longer needs to reserve height - both its
     children are position:fixed floating panels now. */
  .game-bottom {
    height: 0 !important;
    border-top: none !important;
    overflow: visible !important;
  }

  .match-feed {
    display: none !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 5B — GAME SCREEN PORTRAIT, TWO-TAB (client/game.html)
   Replaces the single-screen design (chart + floating leaderboard/cards
   over it + a persistent 44vh trade panel) - too much competing for one
   screen at once, and cramped the chart down to just over half the
   viewport. Now split into two views, switched by .game-mobile-tabs at
   the very bottom (default view is "chart", set in game.html's
   .game-shell[data-mobile-view] attribute and flipped by the inline
   script next to .game-mobile-tabs):
     - Chart tab: full-height chart, nothing floating over it, a slim
       persistent Buy/Sell bar so trading stays one tap away.
     - Trade tab: chart hidden, full width for Open Positions, Lot Size,
       Stop Loss/Take Profit, Sabotage Cards and Live Ranks, each with
       real spacing instead of being squeezed into a corner or a fixed
       44vh sheet.
   Loads after game.css so these win the cascade without needing
   !important.

   Fixed header stack (shared by both tabs), heights used in the offsets
   below:
     .game-topbar        48px
     .instrument-tabs     40px
     .chart-quotes        ~64px (bid/ask/spread row + wrapped timeframe row)
   Total header offset: 152px + env(safe-area-inset-top).
   .game-mobile-tabs (shared bottom bar, both tabs): 54px +
   env(safe-area-inset-bottom).
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) and (orientation: portrait) {

  /* ── fixed header stack (both tabs) ── */

  .game-topbar {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: 48px;
    padding: 0 12px;
    gap: 10px;
    flex-wrap: nowrap;
    z-index: 200;
  }

  .topbar-pnl-block {
    flex: 1;
  }

  .topbar-timer {
    font-size: 20px;
    min-width: auto;
  }

  .topbar-pnl-label,
  .topbar-equity {
    display: none;
  }

  .topbar-pnl-value {
    font-size: 16px;
  }

  .leave-match-btn {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 32px;
  }

  .instrument-tabs {
    position: fixed;
    top: calc(48px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    height: 40px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    z-index: 195;
  }

  .instrument-tab {
    flex-shrink: 0;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* height is pinned (not left to auto-size from content) because
     .game-shell's padding-top below hard-codes 152px as "topbar +
     instrument-tabs + this" - an auto height that ends up taller than the
     64px assumed there would recreate exactly the kind of stale-offset
     overlap already fixed once in this file. overflow:hidden enforces the
     assumption instead of silently drifting from it. */
  .chart-quotes {
    position: fixed;
    top: calc(88px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    height: 64px;
    overflow: hidden;
    padding: 6px 12px;
    gap: 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    z-index: 190;
  }

  /* Push the timeframe row onto its own line under bid/ask/spread inside
     the same fixed box, instead of squeezing quotes + timeframes +
     indicator/settings dropdowns into one crowded row - that crowding was
     the direct cause of an "overlapping, broken-looking" header reported
     on a real device. */
  .timeframe-selector {
    flex-basis: 100%;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    padding-top: 4px;
    gap: 4px;
  }

  .timeframe-selector button {
    flex-shrink: 0;
  }

  /* Indicators/chart-settings dropdowns need more width than this header
     has on a phone - same call already made for the drawing toolbar. */
  .chart-toolbar-actions,
  .chart-drawing-toolbar {
    display: none;
  }

  .game-shell {
    padding-top: calc(152px + env(safe-area-inset-top, 0px));
  }

  .chart-section {
    height: 100%;
  }

  /* .news-ticker is position:absolute; bottom:0 (game.css) inside
     .chart-section - anchor it under the fixed header stack instead so it
     can never land on top of the Buy/Sell bar or the mobile tab bar,
     wherever .chart-section's own height ends up. Only ever visible on
     the Chart tab anyway (hidden with .chart-section on Trade, below). */
  .news-ticker {
    position: fixed;
    top: calc(152px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 97;
  }

  /* table-layout:fixed + explicit rank/P&L widths so a long username
     (leaderboard.js's 2nd <td>) truncates with an ellipsis instead of
     pushing the P&L column (3rd <td>) out of view. */
  .leaderboard-table {
    table-layout: fixed;
    width: 100%;
  }

  .leaderboard-table th:nth-child(1),
  .leaderboard-table td:nth-child(1) {
    width: 20px;
  }

  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) {
    width: 64px;
    text-align: right;
  }

  .leaderboard-table td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── shared bottom tab bar (Chart / Trade) ── */

  .game-mobile-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10,12,20,0.97);
    border-top: 1px solid var(--border);
    z-index: 210;
  }

  .game-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-secondary);
    position: relative;
    cursor: pointer;
  }

  .game-mobile-tab.active {
    color: var(--accent);
  }

  .game-mobile-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 2px 2px;
  }

  .game-mobile-tab-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .game-mobile-tab-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 1.5px solid var(--bg);
  }

  /* ── CHART TAB: full-height chart, slim persistent Buy/Sell ── */

  .game-shell[data-mobile-view="chart"] {
    padding-bottom: calc(52px + 54px + env(safe-area-inset-bottom, 0px));
  }

  .game-shell[data-mobile-view="chart"] .game-bottom {
    display: none;
  }

  .game-shell[data-mobile-view="chart"] .trading-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    height: 52px;
    padding: 0;
    display: flex;
    border-radius: 0;
    z-index: 150;
  }

  .game-shell[data-mobile-view="chart"] .trading-panel > *:not(.trade-buttons) {
    display: none;
  }

  .game-shell[data-mobile-view="chart"] .trade-buttons {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .game-shell[data-mobile-view="chart"] .trade-buttons .btn {
    border-radius: 0;
    min-height: 52px;
    font-size: 15px;
  }

  /* ── TRADE TAB: chart hidden, everything else full-width with room ── */

  .game-shell[data-mobile-view="trade"] {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .game-shell[data-mobile-view="trade"] .chart-section,
  .game-shell[data-mobile-view="trade"] .news-ticker {
    display: none;
  }

  /* .game-main normally holds the desktop chart/trade-panel grid (see
     game.css) - with .chart-section hidden here it becomes a plain
     scrollable column for .trading-panel's full content. flex:1.2 vs.
     .game-bottom's flex:1 below just gives trade details slightly more
     room than cards/ranks; both get their own independent scroll
     (min-height:0 is what makes overflow-y:auto work inside a flex
     child - without it the child refuses to shrink below its content
     size and never scrolls). */
  .game-shell[data-mobile-view="trade"] .game-main {
    display: block;
    flex: 1.2;
    min-height: 0;
    overflow-y: auto;
  }

  .game-shell[data-mobile-view="trade"] .trading-panel {
    position: static;
    height: auto;
    max-height: none;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
  }

  .game-shell[data-mobile-view="trade"] .trading-panel-handle,
  .game-shell[data-mobile-view="trade"] .trade-buttons {
    display: none;
  }

  /* Reordered (via the flex `order` property, matching game.html's
     un-classed wrapper <div>s by the control they contain rather than
     adding CSS-only hook classes) to Open Positions, then Lot Size, then
     Stop Loss/Take Profit, per the reference design. */
  .game-shell[data-mobile-view="trade"] .trading-panel > div:has(#positionsList) {
    order: 1;
  }

  .game-shell[data-mobile-view="trade"] .trading-panel > div:has(#lotSelector) {
    order: 2;
  }

  .game-shell[data-mobile-view="trade"] .trading-panel > div:has(.sltp-header) {
    order: 3;
  }

  .game-shell[data-mobile-view="trade"] .account-summary {
    order: 4;
  }

  .game-shell[data-mobile-view="trade"] .game-bottom {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    gap: 18px;
    padding: 16px;
    border-top: 1px solid var(--border);
  }

  .game-shell[data-mobile-view="trade"] .game-bottom-tabs {
    display: none;
  }

  .game-shell[data-mobile-view="trade"] .sabotage-panel,
  .game-shell[data-mobile-view="trade"] .leaderboard-panel {
    display: block;
    padding: 0;
    border-right: none;
    overflow: visible;
  }

  .game-shell[data-mobile-view="trade"] .card-slots {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
  }

  .game-shell[data-mobile-view="trade"] .sabotage-card {
    flex: 1;
    min-height: 84px;
  }

  /* LOT SIZE - hide the preset chips so the existing mobile-only stepper
     (game.js's setupLotStepper, "− value +" either side of #customLotInput)
     is the only lot control, matching the reference design's single
     stepper row instead of a row of preset chips plus a separate custom
     one. */
  .lot-chip[data-lot] {
    display: none;
  }

  .lot-selector {
    gap: 0;
  }

  #customLotChip {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
  }

  #customLotInput {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    background: transparent;
    border: none;
  }

  .lot-step-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .lot-step-btn:active {
    background: rgba(255,255,255,0.16);
  }

  .pretrade-sltp-row input {
    width: auto;
    flex: 1;
  }

  /* ACCOUNT SUMMARY - kept but compact; it's the only balance/equity
     display left on mobile now that .topbar-equity is hidden above. */
  .account-summary {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 4px;
  }

  .account-summary .stat {
    flex: 1;
  }

  .account-summary .label {
    font-size: 9px;
  }

  .account-summary .value {
    font-size: 12px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 5C — MATCH RULES OVERLAY (client/game.html, shown once as a match
   starts). Not gated to portrait/900px like Part 5B - a short viewport
   (small phone, or landscape with little height) is the actual constraint
   here, not width. .match-rules-overlay centers its card with no scroll
   escape hatch, so on a phone the card's natural height (title + countdown
   + rules grid + reminder + ready button + disclaimer) can exceed the
   viewport with no way to reach whatever's cut off top or bottom - reported
   as "can't even see the rules properly."
─────────────────────────────────────────────────────────────────────── */

@media (max-height: 750px) {
  .match-rules-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .match-rules-card {
    padding: 20px;
  }

  .rules-title {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .rules-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .rule-item {
    padding: 8px 12px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 6 — LOBBY (client/lobby.html)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .tw-prematch-grid {
    grid-template-columns: 1fr !important;
  }

  .tw-prematch-side {
    order: 2;
  }

  .room-code-value {
    font-size: 28px !important;
    letter-spacing: .3em !important;
  }

  .chat-presets {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Instruments row - label above a wrapped row of chips (built by
     lobby.html's handleState(), mobile-only) instead of inline "/"-joined
     text, matching the reference mockup. Targeted by :has() since it
     shares .tw-prematch-match-row with the plain label:value rows
     (Duration/Entry/Starting Capital) that should stay as they are. */
  .tw-prematch-match-row:has(#matchInstrumentsValue) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #matchInstrumentsValue {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    color: inherit !important;
  }

  .instrument-chip {
    padding: 4px 10px;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 7 — WALLET AND SHOP (client/wallet.html, client/shop.html)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .overview-grid,
  .coin-packages {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .coin-package .amount {
    font-size: 26px !important;
  }

  .coin-package .price {
    font-size: 16px !important;
  }

  table.tx {
    font-size: 12px;
  }

  table.tx th:nth-child(4),
  table.tx td:nth-child(4) {
    display: none;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .shop-item {
    padding: 12px !important;
  }

  .shop-item .name {
    font-size: 12px !important;
  }

  .shop-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px;
  }

  .shop-tabs::-webkit-scrollbar {
    display: none;
  }

  .shop-tabs button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 8 — LEADERBOARD (client/leaderboard.html)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .lb-controls select,
  .lb-controls input {
    width: 100%;
  }

  .lb-controls input {
    flex-basis: 100%;
  }

  /* Win Rate is the least essential column at a glance - drop it before
     the table needs its own horizontal scroll (which the wrapping
     <div style="overflow-x:auto"> around table.full-lb already provides
     as a fallback for everything else). */
  table.full-lb th:nth-child(6),
  table.full-lb td:nth-child(6) {
    display: none;
  }

  table.full-lb td,
  table.full-lb th {
    padding: 8px 6px !important;
    font-size: 12px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 9 — PROFILE AND SETTINGS (client/profile.html, client/settings.html)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .profile-head {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .settings-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 12px !important;
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tabs button {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .discord-connect-section {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .country-selector {
    max-width: 100% !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   PART 11 — SUPPORT WIDGET (client/js/support-widget.js's real markup:
   #twSupportWidgetRoot / .tw-sw-panel / .tw-sw-launcher / .tw-sw-body,
   not the #support-panel/#support-toggle ids from a different build)
─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .tw-sw-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    bottom: auto !important;
    right: auto !important;
  }

  /* Stay above the bottom tab bar on pages that have one */
  .tw-sw-launcher {
    bottom: 80px !important;
    right: 16px !important;
  }

  .tw-sw-body {
    max-height: none !important;
  }

  /* The game screen has no bottom tab bar - it has a persistent 44vh trade
     panel instead (Part 5B), which bottom:80px lands well inside, right on
     top of the Stop Loss/Take Profit row. You shouldn't be starting a
     support chat mid-trade anyway - hide the launcher entirely in a match
     rather than trying to find it a clear spot over that panel. */
  body[data-page="game"] .tw-sw-launcher {
    display: none !important;
  }
}