/* ── Mobile: canvas layout overrides ── */
/* ── Mobile canvas layout ─────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    width: 100%; height: 100%;
    min-height: 100dvh;
    margin: 0; overflow: hidden;
  }
  #game-container {
    display: flex; flex-direction: column;
    width: 100vw; height: 100dvh; min-height: 100dvh;
    overflow: hidden;
  }
  #top-area {
    display: flex; flex-direction: row;
    flex: 0 0 var(--top-height, 16dvh); min-height: 90px;
    width: 100%; overflow: hidden;
  }
  #galton-panel {
    display: block; flex: 0 0 var(--left-width, 24%);
    min-width: 70px; min-height: 70px;
    height: 100%; overflow: hidden;
  }
  #top-right {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-width: 0;
    height: 100%; overflow: hidden;
  }
  #newsfeed-panel { flex: 0 0 32px; min-height: 32px; }
  #splitter-h {
    flex: 0 0 10px; height: 10px; min-height: 10px;
    touch-action: none;
  }
  #splitter-v {
    flex: 0 0 10px; width: 10px; min-width: 10px;
    touch-action: none;
  }
  .splitter { touch-action: none; pointer-events: auto; z-index: 20; }
  #bottom-area {
    display: flex; flex-direction: column;
    flex: 1 1 0; min-height: 0;
    width: 100%; overflow: hidden;
  }
  #chart-area {
    display: block; flex: 1 1 0;
    min-height: 120px; overflow: hidden;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #bottom-area {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #controls { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px; }
  #galton-canvas,
  #chart-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    min-height: 1px;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #galton-panel,
  #chart-area {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile: show only Menu in pnl-actions */
  .pnl-desktop-only { display: none !important; }
  .pnl-mobile-only { display: inline-flex !important; }

  /* ── Compact Stats Block ──────────────────────── */
  #pnl-info {
    font-size: 10px !important;
    gap: 1px 5px !important;
    padding: 2px 6px !important;
    flex-wrap: wrap;
    align-items: center;
  }
  #pnl-info > span { white-space: nowrap; font-size: 10px; }

  /* Badges + level + coins — compact inline */
  .hud-level { font-size: 10px !important; gap: 2px !important; }
  .xp-bar-mini { width: 24px !important; height: 4px !important; }
  .coins-label { font-size: 10px !important; }

  /* Streak display hidden — shown via mobile badge strip */
  .streak-display { display: none !important; }

  /* Menu button compact */
  .pnl-actions { gap: 2px !important; margin-left: 4px !important; }
  #btn-game-menu { padding: 2px 8px !important; font-size: 11px !important; display: inline-flex !important; align-items: center; gap: 3px; }

  /* ── Mobile badge strip: theme, missions, mods, streaks — icons ── */
  .mobile-badge-strip {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
  }
  .mbadge {
    font-size: 11px;
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mbadge:empty { display: none; }
  .mbadge:active { background: rgba(59,130,246,0.2); }

  /* ── Controls: two rows (product + risk) ───────── */
  #pnl-controls {
    padding: 2px 6px !important;
    gap: 1px 0 !important;
    font-size: 10px;
    flex-wrap: wrap !important;
    align-items: center;
  }
  /* Each selector group takes full width = own row */
  .strategy-selector,
  .bet-selector {
    display: flex !important;
    align-items: center;
    gap: 4px !important;
    width: 100%;
    min-width: 0;
  }
  .mobile-ctrl-label {
    display: inline !important;
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #sel-strategy,
  #sel-bet-pct,
  #opt-term {
    padding: 2px 6px !important;
    font-size: 10px !important;
    width: auto !important;
    flex: 0 0 auto;
    min-width: 0;
  }
  #option-params {
    display: inline-flex !important;
    align-items: center;
    gap: 4px !important;
  }
  #option-params.hidden { display: none !important; }
  .bet-label { font-size: 9px !important; }

  /* ── Hide desktop-only rows on mobile ─────────── */
  #theme-missions-row { display: none !important; }
  /* Hide original mod strip — badge strip is the single source */
  #mod-active-strip { display: none !important; }

  #mod-effect-flash { display: none !important; }
}