/* ============================================================
   Nexus — mobile overlay   (css/mobile.css)
   ------------------------------------------------------------
   This EXTENDS the phone block already shipping in css/app.css (~L1360+):
   that block already makes .site-nav a scroll strip, hides .tray, turns
   .game-panel/.spectate-panel into bottom sheets, shrinks the hand, and
   guards 100dvh. This file adds only what's still missing — it is NOT a
   blank slate. Loaded AFTER app.css so equal-specificity rules win by
   source order. Media-gated → desktop (>640px) is byte-identical.
   ============================================================ */
@media (max-width: 640px){

  /* ─── FULL-SCREEN WHILE PLAYING (user 7/12: "hide top bar when playing") ───
     The board is the point. During a live game the nav chrome + game-tools
     bar are useless, so give the board the whole screen. A floating ≡ pill
     (injected by js/mobile.js) brings them back so you're never trapped. */
  body.game-live .site-nav,
  body.game-live .top-bar{ display: none !important; }
  body.game-live.m-chrome .site-nav,
  body.game-live.m-chrome .top-bar{ display: flex !important; }
  #mChrome{
    position: fixed; z-index: 300;
    top: calc(6px + env(safe-area-inset-top, 0px)); left: 8px;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-panel) 88%, transparent);
    border: .5px solid var(--ui-border);
    color: var(--gold); font-size: 18px; line-height: 1;
    backdrop-filter: blur(6px);
    display: none;                     /* only appears during a live game */
  }
  body.game-live #mChrome{ display: flex; }

  /* ─── IDLE chrome: keep the account controls REACHABLE (not off in a scroll
     strip you have to swipe). Deliberately replaces the shipped scroll-strip
     with a wrap layout so Sign in / ₭ / day-night are always on screen. ─── */
  .site-nav{ flex-wrap: wrap; overflow-x: visible; row-gap: 4px; align-items: center; padding: 6px 10px; }
  .site-nav .logo{ font-size: 20px; }
  .sn-right{ margin-left: auto; gap: 6px; flex: 0 0 auto; }
  .sn-links{
    order: 3; width: 100%; flex-wrap: nowrap;
    overflow-x: auto; gap: 14px; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sn-links::-webkit-scrollbar{ display: none; }
  .sn-links a{ white-space: nowrap; }
  .sn-drop-menu{ left: auto; right: 0; }   /* touch: keep the menu on-screen */

  /* game-tools bar (idle): swipe strip instead of a tall wrap */
  .top-bar{
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .top-bar::-webkit-scrollbar{ display: none; }
  .top-bar > *{ flex: 0 0 auto; }

  /* ─── 44px touch targets — the shipped block never sized these ─── */
  .tbtn, .daynight, .sn-links a, .seg button{ min-height: 44px; display: inline-flex; align-items: center; }

  /* never let the page itself scroll sideways */
  html, body{ max-width: 100%; overflow-x: hidden; }

  /* ─── the board owns the screen: pan/pinch, don't page-scroll ─── */
  .board-wrap, .board, #board{ touch-action: none; }

  /* ─── HAND DOCK: full-width scroll-snap strip (ADD-ONLY — leaves app.css's
     tuned --hc-scale / height budget authoritative; just kills the fan and the
     desktop panel-offset centering, and makes cards swipeable + tap-select) ─── */
  .hand,
  body:has(.game-panel.open) .hand{ left: 0; right: 0; width: 100%; transform: none; }
  .hand .hand-cards,
  body:has(.game-panel.open) .hand .hand-cards{      /* out-specify app.css:1407 clip */
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: visible;
    gap: 8px; padding: 6px 12px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hand .hand-cards::-webkit-scrollbar{ display: none; }
  .hand .hand-card,
  .hand.game-hand:not(.dock-wide):not(.view-node):not(.view-list) .hand-card{
    margin: 0; flex: 0 0 auto; scroll-snap-align: start;   /* drop the fan overlap */
  }
  .hand-card:hover{ transform: none; }                     /* hover is dead on touch */
  .hand-card.sel{ transform: translateY(-8px) scale(1.06); z-index: 11; }

  /* ─── GAME-PANEL SHEET: the sheet already exists (app.css:1383). ADD-ONLY:
     safe-area so buttons clear the home bar, and 44px targets. ─── */
  .game-panel, .spectate-panel{ bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .gp-body, .sp-body{ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .gp-denom, .gp-chip, .gp-sitout, .gp-stake-pick, .gp-vote-op, .gp-buyer, .gp-card{ min-height: 44px; }
  .gp-go, .gp-sway-row button, .gp-bribe-row button{ min-height: 46px; width: 100%; }
  .gp-chips{ flex-wrap: wrap; }

  /* ─── DIALOGS (setup / Modes / lobby): keep the shipped .dlg sizing; fix the
     real pain — sub-16px inputs (iOS focus-zoom), side-by-side rows, tiny tabs ─── */
  .setup-row, .mod-row{ flex-direction: column; align-items: stretch; gap: 6px; }
  .setup-row label, .mod-lbl{ width: auto; flex: none; }
  .dlg select, .dlg input, .dlg textarea,
  .mod-row input[type=number], .mod-row select{
    width: 100% !important; max-width: none !important;
    min-height: 44px; font-size: 16px; box-sizing: border-box;   /* 16px stops iOS zoom */
  }
  .mod-tabs{ position: sticky; top: 0; z-index: 2; background: var(--ui-panel); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mod-tab{ min-height: 44px; white-space: nowrap; }
  .dlg-btn, .mod-preset{ min-height: 44px; }
  .mod-slider{ width: 100%; min-width: 0; }
  .mod-slider input[type=range]{ height: 44px; }
}

/* never render the floating chrome pill on desktop */
#mChrome{ display: none; }