/* ───────── Mobile & touch optimisations ───────── */
.show-sm { display: none !important; }
.m-tabs, .m-actionbar, .lp-mmenu { display: none; }

@media (hover: none) {
  .comp-card:hover, .duel-card:hover, .lp-card.in:hover { transform: none; box-shadow: none; }
  .sidebar:hover { width: var(--sidebar-w); }
}

@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  .show-sm { display: inline-grid !important; }
  #app { height: auto; min-height: 100dvh; }
  .shell { min-height: 100dvh; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: 0; padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .topbar-center { display: none; }
  .topbar-title .title-icon { display: none; }
  .bottomnav { height: calc(62px + env(safe-area-inset-bottom)); }
  .bottomnav a { min-height: 44px; }

  /* Prevent iOS zoom on focus, bigger touch targets */
  .input, .otp input, select, textarea { font-size: 16px !important; }
  .btn { min-height: 40px; }
  .btn-xs { min-height: 32px; }
  .icon-btn.sm { width: 36px; height: 36px; }
  .seg button { padding: 8px 12px; }
  .chip { height: 34px; }

  /* Horizontal scrollers */
  .filterbar, .tabs, .seg { scrollbar-width: none; }
  .filterbar::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; flex-shrink: 0; }
  .statsbar { position: static; }

  /* Modals become bottom sheets */
  .modal-back { align-items: end; padding: 0; }
  .modal { width: 100% !important; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheet .26s cubic-bezier(.2,.8,.2,1); }
  .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border-3); margin: 8px auto 0; }
  @keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
  .modal-foot { position: sticky; bottom: 0; background: inherit; }
  .dd-menu { position: fixed; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom)); max-height: 60dvh; overflow: auto; }

  .toasts { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; min-width: 0; }

  /* Competitions */
  .hero-dots { position: static; margin-top: 16px; }
  .hero h2 { font-size: 26px; }
  .hero-main .btn-lg { flex: 1; }

  /* Duels */
  .page > .row.between, main > .row.between { flex-wrap: wrap; }
  .duel-card { padding: 12px; gap: 12px; }
  .duel-card > .row:first-child { flex-wrap: wrap; row-gap: 4px; }
  .duel-players { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); }
  .duel-players .avatar { width: 28px !important; height: 28px !important; }
  .duel-foot { flex-wrap: wrap; gap: 14px; }
  .duel-foot > .row { margin-left: 0 !important; width: 100%; }
  .duel-foot > .row .btn { flex: 1; }

  /* Leaderboard / analytics / wallet */
  .lb-stats { grid-template-columns: 1fr !important; }
  .pod .num { font-size: 80px; }
  .pager { justify-content: center; }

  /* HyperStake: ticket first, compact ladder */
  .hs-grid > .col:last-child { order: -1; }
  .hs-ladder { height: 280px; }
  .hs-tabs button { font-size: 12px; gap: 5px; }

  /* Arena: tabbed single-panel layout */
  .main.arena-mode { padding-bottom: 64px; }
  .arena { display: flex; flex-direction: column; height: auto; }
  .m-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 30; background: var(--bg-base); border-bottom: 1px solid var(--border); }
  .m-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; font-size: 10.5px; font-weight: 600; color: var(--text-3); position: relative; }
  .m-tabs button.on { color: var(--primary); }
  .m-tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; }
  .arena > .arena-left, .arena > .arena-right, .arena > .arena-center { display: none !important; }
  .arena-center { overflow: visible; }
  .arena[data-mtab="chart"] > .arena-center, .arena[data-mtab="book"] > .arena-center, .arena[data-mtab="orders"] > .arena-center { display: block !important; }
  .arena[data-mtab="trade"] > .arena-right { display: block !important; border-top: 0; }
  .arena[data-mtab="board"] > .arena-left { display: flex !important; border-right: 0; }
  .arena-chartrow { display: block; border-bottom: 0; }
  .arena .arena-chart, .arena .ob, .arena .bottom-panel { display: none; }
  .arena[data-mtab="chart"] .arena-chart { display: flex; height: calc(100dvh - var(--topbar-h) - 52px - 62px - 64px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); min-height: 340px; }
  .arena[data-mtab="book"] .ob { display: flex; height: calc(100dvh - var(--topbar-h) - 52px - 62px - 64px - env(safe-area-inset-bottom)); min-height: 420px; border-top: 0; }
  .arena[data-mtab="orders"] .bottom-panel { display: flex; height: auto; min-height: 60dvh; }
  .arena[data-mtab="orders"] .bottom-body { overflow: visible; }
  .arena-left > div[data-left] { overflow: visible !important; }
  .chart-head { gap: 12px; padding: 8px 12px; }
  .m-actionbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); padding: 8px 10px; z-index: 70; background: rgba(28,31,34,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border); }
  .m-actionbar .btn { height: 46px; font-size: 15px; }
  .ticket .btn-lg { height: 52px; }
  .arena-top .it { padding: 0 12px; }

  /* Landing */
  .lp-links { display: none !important; }
  .lp-nav { padding: 0 14px; }
  .lp-mmenu { display: flex; flex-direction: column; position: fixed !important; top: 64px; left: 0; right: 0; bottom: 0; z-index: 49 !important; background: rgba(28,31,34,.98); backdrop-filter: blur(14px); padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
  .lp-mmenu.open { opacity: 1; transform: none; pointer-events: auto; }
  .lp-mmenu > button, .lp-mmenu > a:not(.btn) { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 600; color: var(--text); font-family: var(--font-display); }
  .lp-hero { min-height: calc(100dvh - 64px); padding-top: 20px; }
  .lp-sub { font-size: 15px; }
  .lp-cta { width: 100%; justify-content: center; }
  .lp-hero > .row, .lp-hero-inner > .row { width: 100%; max-width: 360px; }
  .lp-preview-grid { grid-template-columns: 1fr; max-height: 520px; }
  .lp-preview-grid .comp-card { zoom: .9; }
  .lp-preview-grid .comp-card:nth-child(n+3) { display: none; }
  .lp-3 { grid-template-columns: 1fr; }
  .lp-scard { padding: 16px; }
  .lp-card:nth-child(n) { margin-left: 0 !important; }
  .lp-foot { flex-direction: column; align-items: center; text-align: center; }
  .lp-bg { display: none; }
}

@media (max-width: 380px) {
  .m-tabs button span { font-size: 9.5px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats > div:nth-child(3) { border-left: 0; }
  .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}