/* ════════════════════════════════════════════════════════════════════
   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; }

  /* ── Board subheader (ROUND · Drop-in party · turn/NEXT · edit) ─────────
     Desktop lays this as a single no-wrap flex row of fixed-size groups
     (left/center/right, each flex:0 0 auto) with a flex spacer between — so on
     a phone it runs off the right edge and the turn tracker, NEXT and the edit
     button become unreachable. Let the whole row wrap, drop the spacer, and let
     each group wrap too, so every control lands on-screen. */
  .bb-subheader{ flex-wrap:wrap; gap:8px 10px; padding:8px 12px; }
  .bb-subhead-sp{ display:none; }
  .bb-subhead-left, .bb-subhead-center, .bb-subhead-right{ flex-wrap:wrap; min-width:0; }
  .bb-subhead-right{ justify-content:flex-start; }

  /* ── 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 pane. The Warboard lays its cards
     out wider than a phone, so the board must scroll BOTH ways — overflow-x:auto
     with iOS momentum lets you swipe left/right to reach every card (it was
     overflow-x:hidden, which trapped them off-screen). Drop the FAR/LEFT/RIGHT
     orientation marks that only add clutter on a small screen. */
  .bb-board{ height:52vh; min-height:300px; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .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; }

  /* ── Encounter builder (initial console: toggles · roster · search · actions) ──
     Desktop pins the generator as a 420px column (min-width:320) whose toggle
     row is flex-wrap:nowrap, so its ~424px min-content holds the column open and
     balloons the whole layout past the phone — RANDOM LOOT, the Bestiary button
     and the helper text fall off the right edge. Let the column shrink to the
     screen and let the search/action rows wrap. */
  .eb-col-gen{ flex-basis:auto; min-width:0; }
  /* The three generation toggles (Allow Ranks · Vary Stats · Random Loot) stay on ONE
     row on phones — share the width in equal thirds and compact to fit, don't wrap. */
  .eb-gen-toggles{ flex-wrap:nowrap; gap:5px; padding:8px 6px; justify-content:center; }
  .eb-gen-toggles .eb-toggle{ flex:0 0 auto; padding:6px 6px; gap:5px; }   /* natural width → labels never clip */
  .eb-gen-toggles .eb-toggle-lbl{ font-size:8px; letter-spacing:.02em; }
  .eb-gen-toggles .eb-sw{ width:30px; height:17px; }
  .eb-gen-toggles .eb-sw::after{ width:13px; height:13px; }
  .eb-gen-toggles .eb-toggle.is-on .eb-sw::after{ transform:translateX(13px); }
  .eb-searchrow{ flex-wrap:wrap; }
  .eb-actions{ flex-wrap:wrap; }

  /* ── 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.) */
  /* In board mode the topbar also carries the Rail/Warboard/Full view toggle +
     "Smith a New Battle" + burger, which won't fit a phone in one row. Let the
     bar WRAP (was flex-wrap:nowrap): brand · Smith-a-New · burger stay on row 1,
     and .bb-viewtog (flex-basis:100%, above) drops to its own second row so the
     Rail/Warboard/Full buttons are reachable. (In setup mode the viewtog is
     display:none, so nothing wraps then.) */
  .gs-topbar{ padding:5px 6px; gap:6px 8px; height:auto; min-height:52px; overflow:visible; flex-wrap:wrap; row-gap:7px; 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; }
}

/* ── Portrait phones in battle mode: force the landscape experience ─────────
   The battle table (Warboard/Rail/Full) is designed for width; sideways, a
   phone crosses the 600px breakpoint and gets the full desktop layout — which
   is the experience that works. iOS Safari cannot lock orientation from a web
   page, so instead this opaque gate (markup in gsbattlesmith.html, [hidden]
   everywhere else) covers battle mode on portrait phones and asks for
   landscape. z-index 900 keeps the site topbar (z:1000) painted ABOVE and
   clickable, so "Smith a New Battle" + the menu remain an exit for users with
   rotation lock on. Setup mode (portrait) is untouched — it works fine. */
@media (max-width:600px) and (orientation:portrait){
  /* While gated: collapse the topbar to ONE tidy row — the view toggle is
     pointless behind the gate, and "Smith a New Battle" moves into the
     hamburger (the topbar button was crowding the full "Grimshackle
     BATTLESMITH" brand off the edge). Landscape/desktop/setup untouched. */
  body[data-mode="battle"] #bbViewTog{ display:none; }
  body[data-mode="battle"] .gs-topbar{ flex-wrap:nowrap; }
  body[data-mode="battle"] #gsSmithNew{ display:none; }
  /* !important beats the item's inline display:none (inline style is how it
     stays out of the DESKTOP topbar, where author .gs-nav-item rules would
     defeat a [hidden] attribute — see the eb-collapse-row precedent). */
  body[data-mode="battle"] .gs-nav-menu .gs-nav-smith{ display:flex !important; }

  body[data-mode="battle"] .bb-rotate-gate{
    display:flex; position:fixed; inset:0; z-index:900;
    flex-direction:column; align-items:center; justify-content:center; gap:15px;
    padding:90px 28px 70px; text-align:center;
    background:radial-gradient(120% 90% at 50% 0%, #241c11 0%, #1a140c 58%, #14100a 100%);
  }
  /* Optional fullscreen hop — the Fullscreen API requires a TAP (no browser
     allows it automatically on rotate), so the gate offers one. The button is
     [hidden] until the inline script in gsbattlesmith.html detects support. */
  body[data-mode="battle"] .bb-rotate-gate .bb-rotate-fs{
    margin-top:8px; display:inline-flex; align-items:center; gap:7px;
    padding:10px 17px; border-radius:9px; border:1px solid #6b5620;
    background:rgba(201,162,39,.10); color:#e9d18a; cursor:pointer;
    font-family:var(--bb-mono, 'JetBrains Mono', monospace); font-size:10.5px;
    font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  }
  body[data-mode="battle"] .bb-rotate-gate .bb-rotate-fs[hidden]{ display:none; }
  body[data-mode="battle"] .bb-rotate-gate svg{
    width:62px; height:62px; color:#c9a227;
    animation:bbRotateHint 2.8s ease-in-out infinite;
  }
  .bb-rotate-eyebrow{ font-family:var(--bb-mono, 'JetBrains Mono', monospace); font-size:10px; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; color:#c9a227; }
  .bb-rotate-msg{ font-family:var(--bb-serif, 'Spectral', serif); font-size:19px; line-height:1.4;
    color:#f1e7d4; max-width:300px; }
  @keyframes bbRotateHint{ 0%,18%{ transform:rotate(0deg); } 52%,82%{ transform:rotate(-90deg); } 100%{ transform:rotate(-90deg); } }
}
@media (prefers-reduced-motion:reduce){
  .bb-rotate-gate svg{ animation:none !important; }
}