/* ════════════════════════════════════════════════════════════════════
   app-mobile.css — Battlesmith phone / narrow-screen overrides.

   Loaded LAST, and every rule lives inside @media (max-width:600px), so this
   file is purely additive: desktop (>600px) never sees a line of it and cannot
   be broken by it. It fixes the three things that cramp on a phone — the battle
   console header, its edit toolbar, and the tall spatial board — with a
   defensive sweep of the cards and modals so nothing runs off the edge.

   Breakpoint 600px matches the existing mobile blocks in app-shell / app-input.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:600px){

  /* ── Battle console header ─────────────────────────────────────────────
     Desktop packs badge · title · round · turn · NEXT · view-toggle · Summon ·
     Full-Screen into one row that overflows a phone. Let it wrap, drop the
     flex spacer, and float the RAIL/BOARD/FULL toggle onto its own centred row. */
  .bb-console{ flex-wrap:wrap; justify-content:center; gap:8px 10px; padding:10px 12px; }
  .bb-console-spacer{ display:none; }
  .bb-console-title{ font-size:16px; }
  .bb-console-titles{ flex:1 1 auto; min-width:0; }
  .bb-viewtog{ order:20; flex-basis:100%; justify-content:center; }
  .bb-viewtog button{ padding:7px 22px; }
  .bb-turn-txt, .bb-next{ order:10; }
  .bb-update-btn{ order:21; font-size:9.5px; padding:7px 11px; }
  .bb-fs-toggle{ order:22; font-size:9.5px; padding:6px 10px; }

  /* ── Edit toolbar ──────────────────────────────────────────────────────
     Nine wrapped rows on a phone. Compact the buttons, drop the flex spacer so
     they pack tight, and hide the "LINES"/"CARDS" captions (the toggles remain). */
  .bb-editbar{ gap:6px; padding:8px 10px; justify-content:center; }
  .bb-editbar-sp{ display:none; }
  .bb-editbar-lbl{ display:none; }
  .bb-editbar-btn{ padding:6px 10px; font-size:11px; gap:5px; }
  .bb-editbar-btn svg{ width:13px; height:13px; }
  .bb-seg2 button{ padding:5px 9px; font-size:9px; }

  /* ── Spatial board ─────────────────────────────────────────────────────
     Cut the fixed 760px down to a phone-sized, scrollable pane (cards already
     collapse to a single column at this width), and drop the FAR/LEFT/RIGHT
     orientation marks that only add clutter on a small screen. */
  .bb-board{ height:52vh; min-height:300px; overflow-x:hidden; overflow-y:auto; }
  .bb-edge{ display:none; }
  .bb-legend{ font-size:9px; }

  /* ── Rail view ─────────────────────────────────────────────────────────*/
  .bb-rail{ padding:16px 12px 14px; }
  .bb-rail-cards{ gap:14px 16px; justify-content:center; }

  /* ── Cards ─────────────────────────────────────────────────────────────
     The full-view grid pins a fixed 420px column that overruns a phone; collapse
     it to one flexible column so the stat card reflows to the available width. */
  .gs-grid{ grid-template-columns:minmax(0,1fr); }
  .gs-card{ max-width:100%; }

  /* ── Modals: cap to the screen so nothing spills past the edge ──────────*/
  .bb-party-sheet, .bb-round-sheet, .gei-modal, .enc-modal{ width:100%; max-width:100%; }
  .bb-linked, .bb-wpop{ max-width:calc(100vw - 20px); }

  /* ── Frame gutter: a touch tighter on a phone ──────────────────────────*/
  .bb-frame{ margin-top:10px; }

  /* ── Site chrome: top nav → hamburger; footer compacts ─────────────────
     The topbar's brand + Home + Systems + system label ran ~520px wide and spilled
     off-edge. On a phone the bar shows just the wordmark and the hamburger, and the
     WHOLE menu drops from it: Home · Systems · system label, a hair divider, then the
     same Settings + History that sit in the desktop hamburger dropdown. (.gs-nav-menu
     is display:contents on desktop, so this @media block is the only place it becomes
     one real dropdown.) */
  .gs-topbar{ padding:0 6px 0 4px; gap:6px; height:52px; overflow:visible; flex-wrap:nowrap; position:relative; }
  .gs-topbar-spacer{ display:none; }
  .gs-brand b{ font-size:17px; }   /* keep the full "Grimshackle Battlesmith" wordmark on a phone */
  .gs-nav-burger{ margin-left:auto; }
  .gs-nav-menu{ display:none; position:absolute; top:calc(100% + 4px); right:6px; flex-direction:column; align-items:stretch;
    min-width:210px; background:#1c1710; border:1px solid #3a3120; border-radius:11px; padding:6px; gap:2px;
    box-shadow:0 14px 30px rgba(0,0,0,.5); z-index:1200; }
  .gs-nav-menu.open{ display:flex; animation:gsNavIn .14s ease both; }
  .gs-nav-menu .gs-nav-item{ justify-content:flex-start; padding:11px 13px; border-radius:8px; border-bottom:none; font-size:12px; }
  .gs-nav-menu .gs-nav-item.is-active{ border-bottom:none; background:rgba(202,162,58,.12); }
  /* On a phone the tools aren't a floating sub-menu — they flow inline in the dropdown,
     under a hair divider, so the one menu reads: nav links · line · Settings · History. */
  .gs-nav-tools{ position:static; min-width:0; padding:0; gap:2px; background:none; border:none; box-shadow:none; }
  .gs-nav-menu.open .gs-nav-tools{ animation:none; }
  .gs-nav-tools .gs-nav-item{ font-size:12px; }
  .gs-nav-sep{ display:block; height:1px; background:#3a3120; margin:5px 6px; }

  /* Footer on a phone: keep the wordmark and all three links on ONE row — the
     header-style brand (beta tucked beneath it) on the left, the links on the right —
     by trimming the type so a narrow screen holds them without wrapping. */
  .site-footer .sf-inner{ padding:8px 12px; gap:4px 8px; justify-content:space-between; flex-wrap:nowrap; }
  .site-footer .sf-brand{ gap:8px; }
  .site-footer .sf-badge{ width:20px; height:20px; }
  .site-footer .sf-name{ gap:5px; }
  .site-footer .sf-name b{ font-size:13px; }
  .site-footer .sf-name .sf-app{ font-size:7px; letter-spacing:.12em; }
  .site-footer .sf-ver{ font-size:8px; }
  .site-footer .sf-links{ flex:0 0 auto; gap:10px; flex-wrap:nowrap; }
  .site-footer .sf-link{ font-size:10px; }
}

/* Very narrow phones (old iPhone SE, ~320px): let the footer's link group drop below the
   wordmark rather than force a page-wide horizontal scrollbar. */
@media (max-width:344px){
  .site-footer .sf-inner{ flex-wrap:wrap; }
  .site-footer .sf-links{ flex:1 1 100%; justify-content:flex-start; }
}