/* ════════════════════════════════════════════════════════════════════
   src/battle-views.css — Battle Board, Stage 2: card views.
   The micro stat card (Figs 3/4), the Rail initiative track (Figs 9/10),
   the console header with the Board/Rail toggle (Fig 7-ish), and the
   full-stat-card modal overlay (Figs 11/12) that the blue + opens.

   Palette per handoff §2.1. The micro card is a LIVE VIEW over our real
   full card — HP/conditions are proxied, never re-stored here. Colours of
   the card header are a per-combatant tint (set inline as --bb-head /
   --bb-head2 / --bb-ink by the JS; defaults below are the clay house tint).
   ════════════════════════════════════════════════════════════════════ */

:root{
  --bb-board:#e7ddc5; --bb-page:#d9d5c8; --bb-paper:#fbf8f1; --bb-paper2:#faf6ec;
  --bb-dark:#26211c; --bb-d2:#312a23; --bb-d3:#3a3228; --bb-trough:#1c1810;
  --bb-line:#e4dcc8; --bb-line2:#d6cdb6;
  /* Board texture — the Warboard texture chooser overrides these on <body>. Defaults = Parchment. */
  --bb-dot:#cdbfa0;
  --bb-tex-img:radial-gradient(circle, var(--bb-dot) 1px, transparent 1px); --bb-tex-size:26px 26px;
  --bb-wmttl:#6f6550; --bb-wmsub:#8a7f66; --bb-howh:#a3894f; --bb-hows:#b3a98f;
  --bb-clay:#9a4436; --bb-clay2:#945230; --bb-burnt:#ad5e30; --bb-burnt2:#8a4d2a;
  --bb-sage:#4e6b62; --bb-olive:#5f7338; --bb-slate:#4c5d72; --bb-ochre:#c69230;
  --bb-ink:#2a241d; --bb-ink2:#6b6253; --bb-mute:#8a8170; --bb-blue:#4c5d72;
  --bb-mono:'JetBrains Mono',ui-monospace,monospace;
  --bb-serif:'Spectral',Georgia,serif; --bb-sans:'Hanken Grotesk',system-ui,sans-serif;
}
.bb-frame{
  font-family:var(--bb-sans); margin-top:14px; border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(60,46,26,.12);   /* no border: a light outline read as a pale stroke around the dark header */
}
.bb-frame[hidden]{ display:none; }

/* Flow: Battle mode makes the Warboard the full-viewport page background (under the ~50px header). */
body[data-mode="battle"] #bbFrame{ position:fixed; inset:50px 0 0 0; z-index:1; margin:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
body[data-mode="battle"]{ overflow:hidden; }
body[data-mode="setup"] #bbFrame{ display:none; }
body[data-mode="battle"] .site-footer{ display:none; }   /* the Warboard IS the page in battle mode */
body[data-mode="battle"] #bbBoard{ flex:1 1 auto; min-height:0; }
body[data-mode="battle"] #bbRail{ flex:1 1 auto; min-height:0; overflow:auto; }
/* Full view (#cards) is a sibling of #bbFrame, so in battle mode it becomes its own fixed,
   scrollable pane. Top inset = topbar (50px) + subheader (55px) = 105px, so it sits flush BELOW
   the subheader instead of painting over its bottom edge (which made the dark bar look shorter in
   Full than Rail/Warboard). align-content:start keeps the grid rows content-sized: this pane now has
   a fixed height, and without it the auto rows stretch to split that height evenly (~356px each),
   so tall stat cards overflow their track and overlap the row below. */
body[data-mode="battle"] #cards{ position:fixed; inset:105px 0 0 0; z-index:1; overflow-y:auto; overflow-x:hidden; align-content:start; grid-auto-rows:max-content; padding:18px 20px 48px; background-color:var(--bb-board,#efe9dc); background-image:var(--bb-tex-img); background-size:var(--bb-tex-size); }
/* consolidated subheader — replaces the console + the separate board editbar */
.bb-subheader{ display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--bb-dark); color:#f3ecdd; flex:none; position:relative; z-index:2; }
body[data-mode="setup"] .bb-subheader{ display:none; }
.bb-subhead-left{ flex:0 0 auto; display:flex; align-items:center; gap:12px; min-width:0; }
.bb-subhead-center{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.bb-subhead-right{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.bb-subhead-sp{ flex:1 1 auto; min-width:0; }
/* "Tidy up" rearranges the Warboard, so it's only meaningful there — hide it in Rail and Full. */
body[data-view="rail"] #bbTidy, body[data-view="full"] #bbTidy{ display:none; }
/* Give it a solid filled button background (not the near-white paper) so it reads as a real control on the dark subheader. */
body[data-mode="battle"] #bbTidy{ background:#3f362b; border-color:#4c4235; color:#efe6d3; }
body[data-mode="battle"] #bbTidy:hover{ background:#4c4235; }
.bb-subhead-board{ display:inline-flex; align-items:center; gap:8px; }
.bb-subhead-board .bb-editbar{ display:inline-flex; align-items:center; gap:8px; background:transparent; padding:0; margin:0; border:0; box-shadow:none; }

/* ── console header (both views) ── */
.bb-console{ position:relative; display:flex; align-items:center; gap:14px; padding:13px 18px; background:var(--bb-dark); color:#f3ecdd; }
.bb-console-badge{ width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#a8523f,#7e3b2c); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.bb-console-titles{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.bb-console-eyebrow{ font-family:var(--bb-mono); font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#b7ab93; }
.bb-console-title{ font-family:var(--bb-serif); font-size:18px; font-weight:700; color:#f6efe1; line-height:1.1; }
.bb-console-tag{ font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#d9b06a;
  border:1px solid #5a4a33; border-radius:6px; padding:3px 8px; }
.bb-console-spacer{ flex:1; }
.bb-turn{ display:flex; align-items:center; gap:10px; background:#312a23; border-radius:10px; padding:6px 8px 6px 12px; }
.bb-turn-txt{ display:flex; flex-direction:column; line-height:1.15; }
.bb-turn-k{ font-family:var(--bb-mono); font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9a8e76; }
.bb-turn-v{ font-size:13px; font-weight:600; color:#f3ecdd; }
.bb-next{ display:inline-flex; align-items:center; gap:6px; background:#473d31; border:none; color:#f3ecdd; cursor:pointer;
  border-radius:7px; padding:7px 11px; font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.bb-next:hover{ background:var(--bb-clay); }
.bb-viewtog{ display:inline-flex; background:#1c1810; border-radius:9px; padding:3px; }
.bb-viewtog button{ border:none; background:none; cursor:pointer; padding:7px 16px; border-radius:6px; font-family:var(--bb-mono);
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#b7ab93; }
.bb-viewtog button.is-on{ background:var(--bb-clay); color:#fff; }
@media (min-width:760px){ .bb-viewtog{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } }   /* dead-centre the view toggle in the console */
/* Update Battle — console pill (right side) that reopens the collapsed builder */
.bb-update-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:none; border-radius:8px; cursor:pointer;
  background:var(--bb-clay); color:#fff; font-family:var(--bb-mono); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  box-shadow:0 2px 9px rgba(154,68,54,.32); white-space:nowrap; }
.bb-update-btn:hover{ filter:brightness(1.08); }
.bb-update-btn svg{ width:13px; height:13px; flex:none; }
.bb-update-btn[hidden]{ display:none; }
/* Full-screen toggle — a switch in the console (echoes the builder's loot toggle), styled for the dark bar */
.bb-fs-toggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border:none; border-radius:8px; cursor:pointer;
  background:#1c1810; color:#b7ab93; font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.bb-fs-toggle:hover{ color:#e8dfcb; }
.bb-fs-sw{ position:relative; width:30px; height:16px; border-radius:9px; background:#3a3228; transition:background .15s; flex:none; }
.bb-fs-sw::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#b7ab93; transition:transform .15s, background .15s; }
.bb-fs-toggle[aria-pressed="true"] .bb-fs-sw{ background:var(--bb-clay); }
.bb-fs-toggle[aria-pressed="true"] .bb-fs-sw::after{ transform:translateX(14px); background:#fff; }
/* Full-screen mode: the board frame fills the viewport over everything; the active view grows to fill */
.bb-frame.bb-fullscreen{ position:fixed; inset:0; z-index:9000; margin:0; border:none; border-radius:0; max-width:none; width:100vw; height:100vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:none; background:var(--bb-page); }
.bb-frame.bb-fullscreen .bb-console{ flex:none; }
.bb-frame.bb-fullscreen .bb-board{ flex:1 1 auto; height:auto; min-height:0; }
.bb-frame.bb-fullscreen .bb-rail{ flex:1 1 auto; min-height:0; overflow-y:auto; }
body.bb-fs-lock{ overflow:hidden; }
body.bb-fs-lock .gs-topbar{ z-index:0; }   /* full-screen board (z-index 9000, nested in .gs-page z-index:1) must sit above the sticky site header */

/* ── Rail surface ── */
.bb-rail{ position:relative; background-color:var(--bb-board); background-image:var(--bb-tex-img); background-size:var(--bb-tex-size); padding:20px 18px 16px; }
/* Rail's board-style button area: Drop in party (left) · Clear round (right), above the cards. */
.bb-rail-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:-20px -18px 18px; padding:10px 18px; background:var(--bb-paper2); border-bottom:1px solid var(--bb-line); }
.bb-rail-cards{ display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-start; position:relative; z-index:2; }
.bb-rail-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; position:relative; z-index:2; }
.bb-rail-hint{ font-family:var(--bb-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#a99e85; }
.bb-rail-actions{ display:flex; gap:10px; }
.bb-ghostbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--bb-paper); border:1px solid var(--bb-line2); color:var(--bb-ink);
  cursor:pointer; border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:600; }
.bb-ghostbtn:hover{ background:#f1ece0; }
.bb-rail-empty{ width:100%; text-align:center; padding:46px 20px; color:var(--bb-mute); font-style:italic; font-family:var(--bb-serif); font-size:15px; }

/* board surface placeholder (Stage 3 fills this) */
.bb-board{ position:relative; background-color:var(--bb-board); height:760px; overflow:hidden;
  background-image:var(--bb-tex-img); background-size:var(--bb-tex-size); }
/* Link-phone battlemap photo — a real <img class="bb-map"> (created in gsbattlesmith.html) fills
   the board WIDTH; the board becomes a vertical scroll viewport so a tall map runs past the fold
   instead of being letterboxed with dark side bars. Tokens/strings are the board's own children,
   so they scroll with the map (battle-views.js switches their clamp/SVG to the map height). */
.bb-board.has-photo{ background-color:#1c1814; overflow:hidden auto;
  scrollbar-width:thin; scrollbar-color:#8a6d4a transparent; }
.bb-board.has-photo .bb-map{ display:block; width:100%; height:auto; }
/* custom warboard scrollbar (matches the bestiary scrollers in encounter-builder.css) */
.bb-board.has-photo::-webkit-scrollbar{ width:11px; }
.bb-board.has-photo::-webkit-scrollbar-track{ background:transparent; margin:4px 0; }
.bb-board.has-photo::-webkit-scrollbar-thumb{ background:#8a6d4a; border-radius:6px; border:2px solid #1c1814; }
.bb-board.has-photo::-webkit-scrollbar-thumb:hover{ background:#a5855f; }
/* declutter onboarding chrome over a real map; keep the connection legend, pinned to the viewport */
.bb-board.has-photo .bb-watermark,
.bb-board.has-photo .bb-howto,
.bb-board.has-photo .bb-edge{ display:none; }
.bb-board.has-photo .bb-legend{ position:sticky; bottom:13px; left:auto; z-index:6;
  width:max-content; max-width:calc(100% - 32px); margin-left:16px;
  padding:7px 12px; border-radius:9px; background:rgba(28,24,20,.74); backdrop-filter:blur(3px); }
.bb-board.has-photo .bb-legend .bb-leg-item{ color:#e8dfce; }
.bb-board.has-photo .bb-legend .bb-leg-hint{ color:#c9bfa8; }
.bb-board-soon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:#a99e85; }
.bb-board-soon b{ font-family:var(--bb-serif); font-size:18px; color:#8a7f68; }
/* spatial edge labels — faint orientation marks */
.bb-edge{ position:absolute; font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--bb-hows); opacity:.55; pointer-events:none; user-select:none; z-index:0; }
.bb-edge-far{ top:10px; left:50%; transform:translateX(-50%); }
.bb-edge-close{ bottom:14px; left:50%; transform:translateX(-50%); }
.bb-edge-left{ left:10px; top:50%; transform:translateY(-50%) rotate(-90deg); }
.bb-edge-right{ right:10px; top:50%; transform:translateY(-50%) rotate(90deg); }
/* connection legend — bottom-left key */
.bb-legend{ position:absolute; left:16px; bottom:13px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; z-index:1; pointer-events:none; }
.bb-leg-item{ display:inline-flex; align-items:center; gap:8px; font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bb-hows); }
.bb-leg-line{ width:24px; border-top:2px solid var(--lg); display:inline-block; }
.bb-leg-line.is-grapple{ border-top-width:3.5px; }
.bb-leg-line.is-melee{ border-top-style:dotted; border-top-width:2.5px; }
.bb-leg-line.is-ranged{ border-top-style:dashed; }
.bb-leg-sep{ width:1px; height:12px; background:var(--bb-line2); }
.bb-leg-hint{ font-family:var(--bb-mono); font-size:9.5px; letter-spacing:.02em; color:var(--bb-hows); }
/* Always-on centre brand watermark — sits behind the tokens (z-index:0, pointer-events:none),
   so the fight plays out on top of it. */
.bb-watermark{ position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; opacity:.2; }
.bb-wm-ico{ color:var(--bb-wmsub); }
.bb-wm-title{ font-family:var(--gs-font-display,'Spectral',Georgia,serif); font-size:48px; font-weight:700; letter-spacing:.01em; line-height:1; color:var(--bb-wmttl); }
.bb-wm-sub{ font-family:var(--bb-mono); font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--bb-wmsub); }
/* "How it works" guide — a faint stack of steps pinned to the board's top-right corner. */
.bb-howto{ position:absolute; top:12px; right:14px; z-index:1; pointer-events:none; user-select:none;
  text-align:right; display:flex; flex-direction:column; gap:3px; max-width:236px; }
.bb-howto-h{ font-family:var(--bb-mono); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--bb-howh); margin-bottom:2px; }
.bb-howto-step{ font-family:var(--bb-mono); font-size:9.5px; font-weight:600; letter-spacing:.02em; color:var(--bb-hows); }

/* ── Warboard textures ─────────────────────────────────────────────────────
   The texture chooser sets body[data-texture]; each option swaps the board's base colour and its
   surface pattern (--bb-tex-img / --bb-tex-size). Parchment keeps the dots (:root default); the
   others carry a material grain rendered as a small tiling SVG line pattern (glass and velvet add a
   linear-gradient sheen on top). The darker felt/glass/slate/velvet also flip the faint chrome inks
   to light so the watermark, how-it-works, edges and legend stay legible. Cards keep their own
   opaque paper, so only the board surface changes. */
body[data-texture="leather"]{ --bb-board:#d5c39e; --bb-tex-size:18px 18px;
  --bb-tex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 18L18 0' stroke='rgba(96,64,34,.09)' stroke-width='1'/%3E%3Cpath d='M0 0L18 18' stroke='rgba(96,64,34,.06)' stroke-width='1'/%3E%3C/svg%3E"); }
body[data-texture="felt"]{ --bb-board:#357a52; --bb-tex-size:6px 6px;
  --bb-tex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0H6M0 0V6' stroke='rgba(0,0,0,.08)' stroke-width='.6'/%3E%3C/svg%3E");
  --bb-wmttl:#eadfc4; --bb-wmsub:#cdc4a6; --bb-howh:#ecd79c; --bb-hows:#cbc1a3; }
body[data-texture="glass"]{ --bb-board:#59666f; --bb-tex-size:24px 24px, 100% 100%;
  --bb-tex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 24L24 0' stroke='rgba(255,255,255,.06)' stroke-width='1'/%3E%3Cpath d='M0 10L10 0M14 24L24 14' stroke='rgba(255,255,255,.04)' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(120deg, rgba(255,255,255,.11), transparent 42%, rgba(255,255,255,.05) 72%, transparent);
  --bb-wmttl:#e8eef1; --bb-wmsub:#c6cfd3; --bb-howh:#bcd2de; --bb-hows:#c2cbcf; }
body[data-texture="slate"]{ --bb-board:#383b41; --bb-tex-size:14px 14px;
  --bb-tex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0' stroke='rgba(255,255,255,.05)' stroke-width='1'/%3E%3Cpath d='M0 7L7 0M7 14L14 7' stroke='rgba(0,0,0,.06)' stroke-width='1'/%3E%3C/svg%3E");
  --bb-wmttl:#e8ddc3; --bb-wmsub:#c9bea0; --bb-howh:#dbc489; --bb-hows:#c4b99b; }
body[data-texture="velvet"]{ --bb-board:#3b2e60; --bb-tex-size:5px 5px, 100% 100%;
  --bb-tex-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='1' height='5' fill='rgba(255,255,255,.055)'/%3E%3C/svg%3E"), linear-gradient(103deg, rgba(255,255,255,.07), transparent 46%);
  --bb-wmttl:#eae0cb; --bb-wmsub:#ccc2ab; --bb-howh:#ddc796; --bb-hows:#c9bea7; }

/* Texture chooser — a glass dropdown that lives in the subheader's right zone, left of Tidy up. */
.bb-tex{ position:relative; }
.bb-tex-btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.07); color:#f1ecdd; cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap; transition:background .12s,border-color .12s; }
.bb-tex-btn:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.32); }
.bb-tex-eyebrow{ color:#b7ae98; }
.bb-tex-chev{ font-size:8px; opacity:.75; }
.bb-tex-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:184px; padding:5px; background:#241f18; border:1px solid rgba(255,255,255,.14); border-radius:11px; box-shadow:0 18px 38px -12px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:2px; }
.bb-tex-menu[hidden]{ display:none; }
.bb-tex-row{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 10px; border:none; border-radius:7px; background:transparent; color:#f1ecdd; cursor:pointer; font-size:12px; font-weight:600; text-align:left; transition:background .12s; }
.bb-tex-row:hover{ background:rgba(255,255,255,.14); }
.bb-tex-row.is-on{ background:rgba(255,255,255,.08); }
.bb-tex-sw{ width:15px; height:15px; flex:none; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.bb-tex-name{ flex:1; }
.bb-tex-check{ color:#d8c7a2; }
.bb-tex-linkrow .bb-tex-check{ color:#fff; visibility:hidden; margin-left:auto; }  /* shown (via JS) only when a tabletop photo is the active surface */
/* ── Link phone (battlemap photo) ─────────────────────────────────────────────
   Trigger is the top row of the Style dropdown ("Your Real Tabletop") — a blue
   phone-icon row. Clicking it opens a centered modal with a QR + 6-digit code and
   live pairing status. The photo itself lands on .bb-board.has-photo (above). */
.bb-tex-linkrow{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; margin-bottom:7px;
  border:1px solid #3a4a60; border-radius:8px; cursor:pointer; text-align:left; font-size:12px; font-weight:700;
  color:#fff; background:linear-gradient(160deg,#586c84,#3f5169); box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:background .12s, box-shadow .12s; }
.bb-tex-linkrow:hover{ background:linear-gradient(160deg,#61758f,#455876); box-shadow:0 2px 7px rgba(0,0,0,.3); }
/* Phone chip echoes the texture swatches (same size + inset ring), tinted to sit on the blue. */
.bb-tex-linkico{ width:16px; height:16px; flex:none; border-radius:4px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.bb-tex-linkico svg{ width:11px; height:11px; color:#fff; }
.bb-tex-linkname{ flex:1; letter-spacing:.01em; }
.bb-link-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(22,18,13,.72); backdrop-filter:blur(3px); }
.bb-link-modal[hidden]{ display:none; }
.bb-link-card{ position:relative; width:100%; max-width:380px; max-height:calc(100dvh - 40px); overflow:auto;
  background:#241f18; border:1px solid rgba(255,255,255,.14); border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7); padding:26px 24px 20px; text-align:center; color:#f1ecdd; }
.bb-link-x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:8px; border:none;
  background:rgba(255,255,255,.06); color:#d8cdb6; cursor:pointer; font-size:14px; line-height:1; }
.bb-link-x:hover{ background:rgba(255,255,255,.14); }
.bb-link-eyebrow{ font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#c47a45; margin-bottom:6px; }
.bb-link-title{ font-family:var(--bb-serif); font-size:23px; font-weight:700; margin:0 0 8px; color:#f6efe0; }
.bb-link-sub{ font-size:13.5px; line-height:1.5; color:#c3b8a1; margin:0 0 18px; }
.bb-link-qr{ display:flex; align-items:center; justify-content:center; width:224px; height:224px; margin:0 auto 14px;
  background:#fbf8f1; border-radius:14px; padding:10px; }
.bb-link-qr svg{ width:100%; height:100%; display:block; shape-rendering:crispEdges; }
.bb-link-qrfail{ font-size:12px; color:#8a7f68; align-self:center; }
.bb-link-or{ font-size:12px; color:#a99e85; margin-bottom:4px; }
.bb-link-url{ font-family:var(--bb-mono); font-size:13px; font-weight:600; color:#e8dcc2; margin-bottom:12px; }
.bb-link-words{ display:inline-block; font-family:var(--bb-mono); font-size:28px; font-weight:700; letter-spacing:.16em;
  color:#e8b98c; background:rgba(196,122,69,.12); border:1px solid rgba(196,122,69,.3); border-radius:10px;
  padding:10px 20px 10px 24px; margin-bottom:16px; cursor:pointer; transition:background .12s; }
.bb-link-words:hover{ background:rgba(196,122,69,.2); }
.bb-link-words.copied{ color:#7fc58a; border-color:rgba(127,197,138,.5); }
.bb-link-state{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:600;
  color:#c3b8a1; margin-bottom:14px; }
.bb-link-dot{ width:9px; height:9px; border-radius:50%; background:#7a6a4d; flex:none; }
.bb-link-state.is-wait .bb-link-dot{ background:#e8b98c; animation:bbLinkPulse 1.1s infinite; }
.bb-link-state.is-on .bb-link-dot{ background:#7fc58a; }
.bb-link-state.is-off .bb-link-dot{ background:#e88c8c; }
.bb-link-state.is-on{ color:#a9d9b0; } .bb-link-state.is-off{ color:#e0a9a9; }
@keyframes bbLinkPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.bb-link-photo-actions{ display:flex; gap:10px; margin-bottom:14px; }
.bb-link-photo-actions[hidden]{ display:none; }
.bb-link-rotate, .bb-link-remove{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px; border-radius:11px; cursor:pointer; font-size:13px; font-weight:600; transition:background .12s; }
.bb-link-rotate{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#ece3cf; }
.bb-link-rotate:hover{ background:rgba(255,255,255,.13); }
.bb-link-remove{ border:1px solid rgba(232,140,140,.35); background:rgba(232,140,140,.08); color:#e6b3b3; }
.bb-link-remove:hover{ background:rgba(232,140,140,.16); }
.bb-link-foot{ font-size:11px; line-height:1.5; color:#8a7f68; }
/* Phone camera capture (mobile "Your Real Tabletop") — QR is replaced by a direct camera button. */
.bb-link-file{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.bb-link-capture{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin:0 0 16px; padding:15px 18px; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--bb-serif); font-size:16px; font-weight:700; color:#241f18;
  background:linear-gradient(180deg,#e8b98c,#c47a45); box-shadow:0 8px 22px -8px rgba(196,122,69,.55);
  transition:filter .12s; }
.bb-link-capture[hidden]{ display:none; }
.bb-link-capture:hover{ filter:brightness(1.06); }
.bb-link-capture svg{ width:18px; height:18px; flex:none; }
/* a card placed on the board */
.bb-board-card{ position:absolute; width:158px; will-change:left,top; transition:box-shadow .12s; }
.bb-board-card .bb-card-head{ cursor:grab; }
/* Touch drag: the grab handles claim the pointer so a finger-drag MOVES the card (rail + board)
   instead of scrolling the page. Harmless for mouse; the rest of the card/board still scrolls. */
.bb-card-head, .bb-token, .bb-tk-coin{ touch-action:none; }
.bb-board-card.is-dragging{ transition:none; }
.bb-board-card.is-dragging .bb-card{ box-shadow:0 16px 34px rgba(40,30,16,.42); }
.bb-board-card.is-dragging .bb-card-head{ cursor:grabbing; }

/* ── the micro stat card ── */
.bb-card{ position:relative; isolation:isolate; width:158px; background:var(--bb-paper); border-radius:12px;
  box-shadow:0 5px 14px rgba(60,46,26,.18); border:1px solid rgba(0,0,0,.04);
  --bb-head:#8a4d2a; --bb-head2:#6f3d20; --bb-ink-on:#fdf3ea;
  /* isolation:isolate keeps a permanent stacking context so the z-index:-1 plus/done tabs stay tucked
     against the card even while a rail drag strips the bbIn animation (flipRail sets animation:none —
     without this the tabs escape upward and render behind the rail, vanishing mid-drag). */
  animation:bbIn .16s ease both; }
@keyframes bbIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.bb-card.is-active{ outline:2.5px solid var(--bb-clay); outline-offset:1px; }
.bb-card.is-done{ opacity:.55; filter:saturate(.7); }

.bb-card-head{ position:relative; padding:9px 11px 11px; border-radius:12px 12px 0 0; cursor:grab;
  background:linear-gradient(155deg,var(--bb-head),var(--bb-head2)); color:var(--bb-ink-on); overflow:hidden; }
.bb-card-head:active{ cursor:grabbing; }
.bb-dots{ position:absolute; top:7px; left:9px; cursor:grab; color:rgba(255,255,255,.62); display:flex; line-height:0; user-select:none; }
.bb-dots:active{ cursor:grabbing; }
.bb-dogear{ position:absolute; top:0; right:0; width:0; height:0; border-top:30px solid #f1e8d6; border-left:30px solid transparent; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.bb-dogear-n{ position:absolute; top:5px; right:7px; font-family:var(--bb-mono); font-size:11px; font-weight:700; color:#4a3f2e; }
.bb-card-eyebrow{ font-family:var(--bb-mono); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:6px 0 1px; padding-right:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-card-namerow{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; }
.bb-card-name{ font-family:var(--bb-serif); font-size:17px; font-weight:700; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 1.5px rgba(0,0,0,.35); }
.bb-card-hp{ font-family:var(--bb-serif); font-weight:700; font-size:20px; line-height:1; cursor:pointer; white-space:nowrap; text-shadow:0 1px 1.5px rgba(0,0,0,.35); }
.bb-card-hp .bb-hp-max{ font-size:12px; opacity:.7; }
.bb-hpbar{ margin-top:7px; height:3px; border-radius:3px; background:rgba(0,0,0,.28); overflow:hidden; }
.bb-hpbar-fill{ height:100%; border-radius:3px; background:rgba(255,255,255,.88); transition:width .2s; }

.bb-vitals{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); }
.bb-vital{ text-align:center; padding:7px 2px; border-right:1px solid var(--bb-line); }
.bb-vital:last-child{ border-right:none; }
.bb-vital-k{ font-family:var(--bb-mono); font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bb-mute); }
.bb-vital-v{ font-family:var(--bb-serif); font-size:16px; font-weight:700; color:var(--bb-ink); line-height:1.15; }

.bb-more{ display:block; width:100%; text-align:center; padding:6px 0 8px; border:none; background:#f1ead7; cursor:pointer; border-radius:0 0 12px 12px;
  font-family:var(--bb-mono); font-size:7.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bb-mute); }
.bb-card.is-open .bb-more{ border-top:1px solid var(--bb-line); }
.bb-more:hover{ color:var(--bb-clay); }

/* expanded drawer */
.bb-drawer{ display:none; padding:4px 11px 6px; }
.bb-card.is-open .bb-drawer{ display:block; }
.bb-action{ padding:6px 2px; border-top:1px solid var(--bb-line); }
.bb-action:first-child{ border-top:none; }
.bb-action-top{ display:flex; align-items:center; gap:8px; }
.bb-action-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.bb-action-name{ flex:1; font-size:12.5px; color:var(--bb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-action-kind{ font-family:var(--bb-mono); font-size:7.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bb-mute); }
.bb-action-roll{ width:24px; height:24px; flex:none; border:1px solid var(--bb-line2); background:#fff; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--bb-ink2); }
.bb-action-roll:hover{ background:#f3ece0; color:var(--bb-clay); }
.bb-condadd{ display:inline-flex; align-items:center; gap:6px; margin:8px 0 4px; padding:6px 11px; border:1px dashed var(--bb-line2); border-radius:8px;
  background:none; cursor:pointer; font-size:12px; color:var(--bb-ink2); }
.bb-condadd:hover{ border-color:var(--bb-clay); color:var(--bb-clay); }
.bb-conds{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }

/* blue + tab on the right edge → opens the full card */
.bb-plus{ position:absolute; top:34px; right:-21px; width:26px; height:34px; border:none; border-radius:0 9px 9px 0; cursor:pointer; z-index:-1;
  background:linear-gradient(160deg,#586c84,#3f5169); color:#fff; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:2px 3px 8px rgba(40,40,60,.3); }
.bb-plus:hover{ filter:brightness(1.08); }
/* done checkbox — a tab that peeks out from behind the card's right edge (above the + tab) */
.bb-done{ position:absolute; top:8px; right:-21px; width:22px; height:22px; border-radius:0 6px 6px 0; border:1px solid var(--bb-line2); background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:transparent; box-shadow:2px 2px 6px rgba(60,46,26,.18); z-index:-1; }
.bb-card.is-done .bb-done{ background:var(--bb-olive); border-color:var(--bb-olive); color:#fff; }

/* ── full stat card modal (the blue + target — shows OUR real card) ── */
.bb-fullmodal{ position:fixed; inset:0; z-index:1100; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;
  background:rgba(28,22,16,.55); }
.bb-fullmodal.open{ display:flex; }
.bb-fullmodal-inner{ position:relative; animation:bbIn .16s ease both; }
.bb-fullmodal-close{ position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bb-dark); color:#e8dcc4; font-size:15px; z-index:3; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.bb-fullmodal-close:hover{ background:var(--bb-clay); color:#fff; }
.bb-fullmodal-host{ display:flex; gap:18px; align-items:flex-start; }       /* duplicates sit side-by-side (to the right), not stacked */
.bb-fullmodal-host .gs-card{ margin:0; }

/* ── Stage 2b additions ─────────────────────────────────────────── */
/* round-complete banner (shown in the rail when every combatant has acted) */
/* round-complete modal — centered, fires in any view */
.bb-round-modal{ position:fixed; inset:0; z-index:300; background:rgba(24,17,10,.72); display:none; align-items:center; justify-content:center; padding:24px; }
.bb-round-modal.open{ display:flex; }
.bb-round-sheet{ width:380px; max-width:100%; background:var(--bb-paper); border:1px solid var(--bb-line2); border-radius:16px; padding:30px 28px 26px; text-align:center;
  box-shadow:0 28px 70px rgba(20,13,6,.5); }
.bb-round-eyebrow{ font-family:var(--bb-mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--bb-mute); }
.bb-round-title{ font-family:var(--bb-serif); font-size:26px; font-weight:600; color:var(--bb-ink); margin-top:6px; }
.bb-round-body{ font-size:13.5px; color:var(--bb-ink2); margin-top:8px; }
.bb-round-go{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:22px; padding:13px;
  border:none; border-radius:11px; background:var(--bb-clay); color:#fff; cursor:pointer; font:700 14px var(--bb-sans); }
.bb-round-go:hover{ filter:brightness(1.05); }

/* defenses row (in the drawer) — immunities / resistances / vulnerabilities, as labelled chips */
.bb-defs{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:4px 0 5px; }
.bb-def{ display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 7px 2px 3px; border:1px solid var(--bb-line2); border-radius:6px;
  background:#fbf8f1; font-size:10.5px; font-weight:600; color:var(--bb-ink); }
.bb-def-k{ font-family:var(--bb-mono); font-size:7.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 4px; border-radius:4px;
  background:#ece4d3; color:var(--bb-mute); flex:none; }
.bb-def-v{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-def-vuln{ background:#f8ece8; border-color:#e4c7be; color:#9a4436; }
.bb-def-vuln .bb-def-k{ background:#e7ccc1; color:#7d3120; }
.bb-def-res{ background:#eef1f6; border-color:#cdd6e2; color:#41506a; }
.bb-def-res .bb-def-k{ background:#d8e0ec; color:#3a4960; }
/* saves row (between vitals + drawer) */
.bb-saves{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:4px 0 5px; }
.bb-saves-lbl{ font-family:var(--bb-mono); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bb-mute); }
.bb-save{ display:inline-flex; align-items:center; gap:5px; padding:2px 7px 2px 3px; border:1px solid var(--bb-line2); border-radius:6px; background:#fbf8f1;
  font-family:var(--bb-mono); font-size:11px; font-weight:700; color:var(--bb-ink); }
.bb-save-ab{ font-size:8px; letter-spacing:.03em; color:var(--bb-mute); background:#ece4d3; padding:2px 4px; border-radius:4px; }
/* Expanded micro-card: 3×2 grid of clickable stat+save boxes (dnd 6 / pf 3) */
.bb-save-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin:2px 0 8px; }
.bb-save-box{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 4px; border-radius:7px;
  background:#f2ecdf; border:1px solid #ddd0b6; cursor:pointer; line-height:1; transition:background .12s, border-color .12s; }
.bb-save-box:hover{ background:#e9dfc6; border-color:#cbb98f; }
.bb-save-box .bb-save-ab{ font-family:var(--bb-mono,monospace); font-size:8px; font-weight:700; letter-spacing:.06em; color:#8a7b5c; }
.bb-save-box .bb-save-mod{ font-size:8.5px; color:#a99a7c; }
.bb-save-box .bb-save-sv{ font-size:13px; font-weight:700; color:#3f382e; }
/* active-condition chips — a live view of the full card's conditions, accent-tinted */
.bb-conds{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:7px 11px 1px; }
.bb-cond{ display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 7px 0 4px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cond,#8a7a55) 46%, transparent);
  background:color-mix(in srgb, var(--cond,#8a7a55) 12%, transparent); color:var(--cond,#8a7a55); }
.bb-cond-ic{ width:12px; height:12px; flex:none; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.bb-cond-ic svg{ width:12px; height:12px; display:block; }
.bb-cond-nm{ font-size:9.5px; font-weight:700; text-transform:capitalize; white-space:nowrap; }
/* HP popup — frames the real per-system adjuster borrowed from the full card (vars inherit from :root) */
.bb-hp-pop{ position:fixed; z-index:240; background:var(--gs-card,#fdfcf9); border:1px solid var(--gs-card-border,#e6e1d8);
  border-radius:12px; padding:10px 13px 12px; box-shadow:0 14px 34px rgba(40,30,16,.32); min-width:236px; max-width:330px; }
.bb-hp-pop-name{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gs-muted,#6f665c); margin:0 0 7px; }
.bb-hp-pop .gs-hp-host{ margin:0; }
/* reaction row (in the drawer, after actions) — slate-tinted */
.bb-react{ display:flex; align-items:center; gap:8px; margin-top:6px; padding:6px 10px; border-radius:8px; background:#eef1f6; }
.bb-react-ic{ flex:none; color:#4c5d72; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.bb-react-ic svg{ width:12px; height:12px; display:block; }
.bb-react-name{ flex:1; font-size:12.5px; font-weight:600; color:#3f4d60; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-react-tag{ font-family:var(--bb-mono); font-size:10px; font-weight:700; color:#4c5d72; flex:none; }

/* weapon roll popup — opened by a weapon's dice icon: To Hit + Damage rows, then a dark result box */
.bb-wpop{ position:fixed; z-index:240; width:204px; background:#f4f0e6; border:1px solid #e2dac9; border-radius:14px; padding:12px;
  box-shadow:0 16px 38px rgba(40,30,16,.34); }
.bb-wpop-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 2px 9px; }
.bb-wpop-name{ font-family:var(--bb-serif); font-size:15px; font-weight:700; color:var(--bb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-wpop-kind{ font-family:var(--bb-mono); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bb-mute); flex:none; }
.bb-wpop-row{ display:flex; align-items:center; gap:9px; width:100%; margin-top:7px; padding:9px 11px; border:1px solid #e4ddcd; border-radius:10px;
  background:#fbf9f3; cursor:pointer; text-align:left; }
.bb-wpop-row:first-of-type{ margin-top:0; }
.bb-wpop-row:hover{ background:#fff; border-color:#d8cfba; }
.bb-wpop-ic{ width:17px; height:17px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.bb-wpop-ic svg{ width:17px; height:17px; display:block; }
.bb-wpop-ic-hit{ color:var(--bb-clay); }
.bb-wpop-ic-dmg{ color:#5a8a3f; }
.bb-wpop-lbl{ flex:1; font-family:var(--bb-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bb-mute); }
.bb-wpop-val{ font-family:var(--bb-serif); font-size:16px; font-weight:700; color:var(--bb-ink); flex:none; }
.bb-wpop-row[data-rk="hit"] .bb-wpop-val{ color:var(--bb-clay); }
.bb-wpop-row[data-rk="dmg"] .bb-wpop-val{ color:#4f7d37; }
.bb-wpop-result{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; padding:8px 12px; border-radius:9px; background:#27231c; }
.bb-wpop-rlbl{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#b3a06a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-wpop-rtot{ font-family:var(--bb-serif); font-size:20px; font-weight:700; color:#e3b341; line-height:1; flex:none; }

/* ── Stage 3: edit toolbar (Board view only) ────────────────────── */
.bb-editbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; row-gap:9px; padding:10px 18px; background:var(--bb-paper2); border-bottom:1px solid var(--bb-line); }
.bb-clear-btn svg{ color:var(--bb-clay); }
.bb-editbar[hidden]{ display:none; }
.bb-editbar-lbl{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bb-mute); }
.bb-seg2{ display:inline-flex; background:#e7e0d0; border-radius:8px; padding:2px; }
.bb-seg2 button{ border:none; background:none; cursor:pointer; padding:6px 14px; border-radius:6px; font-family:var(--bb-mono);
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bb-ink2); }
.bb-seg2 button.is-on{ background:#fff; color:var(--bb-clay); box-shadow:0 1px 3px rgba(60,46,26,.14); }
.bb-editbar-sp{ flex:1; }
.bb-editbar-btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--bb-line2); border-radius:8px;
  background:var(--bb-paper); cursor:pointer; font-size:12px; font-weight:600; color:var(--bb-ink); white-space:nowrap; }
.bb-editbar-btn:hover{ background:#f1ece0; }
.bb-cancel-btn{ border-color:#dcb6aa; color:var(--bb-clay); }
.bb-cancel-btn svg{ color:var(--bb-clay); }
.bb-cancel-btn:hover{ background:var(--bb-clay); border-color:var(--bb-clay); color:#fff; }
.bb-cancel-btn:hover svg{ color:#fff; }
/* Connections fold-away: the dots-and-lines icon toggles a group that slides Single
   Connect · Connect All · Clear · Lines out to its right. Collapsed by default so the
   bar stays uncluttered; max-width + opacity give the reveal its slide. */
.bb-conntoggle.is-on{ background:#f1ece0; border-color:var(--bb-clay); color:var(--bb-clay); }
.bb-connect-group{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px; overflow:hidden;
  max-width:0; opacity:0; transition:max-width .32s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.bb-connect-group.is-open{ max-width:820px; opacity:1; }   /* fits the ~758px of controls; 660 clipped the Cards toggle */
/* Keep the buttons at their natural width while collapsed — otherwise they shrink to
   min-content and the labels wrap to two lines, which made the closed bar taller than
   the open one. */
.bb-connect-group > *{ flex:0 0 auto; }

/* ── Stage 4: connections (the red string) ──────────────────────── */
.bb-board-card{ z-index:1; }
.bb-links{ position:absolute; top:0; left:0; z-index:5; pointer-events:none; overflow:visible; }  /* strings + parchment tags ride ABOVE the cards so labels never hide behind a foe */
.bb-string{ filter:drop-shadow(0 1px 1px rgba(40,28,16,.28)); }
.bb-linktag{ pointer-events:auto; cursor:pointer; }
.bb-linktag rect{ filter:drop-shadow(0 1px 2px rgba(40,28,16,.18)); }
.bb-linktag:hover rect{ fill:#fffdf7; }
/* connect mode: crosshair pick affordance on every card */
.bb-connecting .bb-board-card .bb-card{ cursor:crosshair; }
.bb-connecting .bb-board-card .bb-card::after{ content:''; position:absolute; inset:0; border-radius:13px; box-shadow:inset 0 0 0 2px rgba(154,68,54,.45); pointer-events:none; }
.bb-connecting .bb-board-card .bb-card-head{ cursor:crosshair; }
/* hint banner (between toolbar + board) */
.bb-connect-hint{ display:flex; align-items:center; gap:8px; padding:9px 18px; font-family:var(--bb-mono); font-size:11px; font-weight:700;
  letter-spacing:.04em; color:#fbeee9; background:linear-gradient(90deg,#9a4436,#8a3c2c); }
.bb-connect-hint[hidden]{ display:none; }
.bb-connect-hint::before{ content:''; width:8px; height:8px; border-radius:50%; background:#fbeee9; box-shadow:0 0 0 3px rgba(251,238,233,.3); }
.bb-connect-btn.is-on{ background:var(--bb-clay); border-color:var(--bb-clay); color:#fff; }
.bb-connect-btn.is-on svg{ stroke:#fff; }
/* #7 Drop in party — slate-blue (matches the + party box) with white label + icon (stroke=currentColor) */
.bb-party-btn{ background:linear-gradient(160deg,#586c84,#3f5169); border-color:#3a4a60; color:#fff; }
.bb-party-btn:hover{ background:linear-gradient(160deg,#4f6076,#374559); }
/* #8 Single Connect + Connect All — Canvas · Sand; the is-on clay (above) still wins when connect mode is active */
.bb-connect-btn, .bb-connectall-btn{ background:#d9d5c8; border-color:#cdc8b8; }
.bb-connect-btn:not(.is-on):hover, .bb-connectall-btn:hover{ background:#d0cbbb; }
/* line editor popover (Fig 8) */
.bb-linked{ position:fixed; z-index:240; width:236px; background:var(--bb-paper); border:1px solid var(--bb-line2); border-radius:12px;
  box-shadow:0 14px 34px rgba(40,28,16,.26); padding:13px; font-family:var(--bb-sans); }
.bb-linked-sec{ margin-bottom:11px; }
.bb-linked-lbl{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bb-mute); margin-bottom:6px; }
.bb-linked-input{ width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--bb-line2); border-radius:7px; font:600 13px var(--bb-sans); color:var(--bb-ink); background:#fff; }
.bb-linked-input:focus{ outline:none; border-color:var(--bb-clay); }
.bb-linked-types{ display:flex; gap:4px; }
.bb-linked-types button{ flex:1; padding:6px 2px; border:1px solid var(--bb-line2); border-radius:6px; background:#fff; cursor:pointer;
  font-family:var(--bb-mono); font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--bb-ink2); }
.bb-linked-types button.is-on{ background:var(--bb-clay); border-color:var(--bb-clay); color:#fff; }
.bb-linked-colors{ display:flex; gap:8px; }
.bb-linked-colors button{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 2px #fff; }
.bb-linked-colors button.is-on{ border-color:var(--bb-ink2); }
.bb-linked-foot{ display:flex; gap:8px; margin-top:13px; }
.bb-linked-cut{ flex:1; padding:8px; border:1px solid var(--bb-clay); border-radius:8px; background:#fff; color:var(--bb-clay); cursor:pointer; font:700 12px var(--bb-sans); }
.bb-linked-cut:hover{ background:#fbeee9; }
.bb-linked-done{ flex:1; padding:8px; border:none; border-radius:8px; background:var(--bb-clay); color:#fff; cursor:pointer; font:700 12px var(--bb-sans); }

/* ── Stage 5: player tokens + drop-in party ─────────────────────── */
.bb-board-token{ position:absolute; z-index:1; }
.bb-token{ position:relative; width:74px; display:flex; flex-direction:column; align-items:center; user-select:none; }
.bb-tk-coin{ box-sizing:border-box; width:var(--pcd,56px); height:var(--pcd,56px); border-radius:50%; background:radial-gradient(circle at 38% 30%, #fffdf9, #ece3d1 72%);
  border:3px solid var(--cc); display:flex; align-items:center; justify-content:center; cursor:grab; box-shadow:0 3px 8px rgba(40,28,16,.2); }
.bb-board-token.is-dragging .bb-tk-coin{ cursor:grabbing; box-shadow:0 12px 26px rgba(40,28,16,.4); }
.bb-tk-glyph{ color:var(--cc); width:70%; height:70%; display:flex; align-items:center; justify-content:center; }
.bb-tk-glyph svg{ width:100%; height:100%; }
.bb-tk-name{ margin-top:5px; font-family:var(--bb-serif); font-weight:600; font-size:13px; color:var(--cc); max-width:84px;
  text-align:center; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-token.is-active .bb-tk-name{ color:var(--bb-clay); }
/* Warboard: the PC name hides as a pill behind the coin and drops out on hover (desktop) / tap
   (mobile), staying while hovered; the rail keeps its visible label above the coin. */
.bb-board-token .bb-token{ width:var(--pcd,56px); }
.bb-board-token .bb-tk-coin{ position:relative; z-index:2; }
.bb-board-token .bb-tk-badge{ right:-3px; z-index:4; }
.bb-board-token .bb-tk-done{ left:-3px; z-index:1; opacity:0; pointer-events:none;
  transform:translate(11px,11px) scale(.55); transform-origin:top left;
  transition:transform .45s cubic-bezier(.34,1.35,.5,1), opacity .3s ease; }
.bb-board-token .bb-tk-name{ position:absolute; left:50%; top:50%; margin:0; max-width:none; z-index:0; opacity:0;
  pointer-events:none; transform:translate(-50%,-50%); color:#f4efe2; background:#2a241d; border:1px solid var(--cc);
  padding:5px 12px; border-radius:20px; box-shadow:0 4px 11px rgba(38,28,16,.42);
  transition:transform .5s cubic-bezier(.34,1.35,.5,1), opacity .3s ease; }
@media (hover:hover){ .bb-board-token:hover .bb-tk-name{ opacity:1; transform:translate(-50%, calc(-50% + var(--pcd,56px)/2 + 22px)); } }
.bb-board-token.is-revealed .bb-tk-name{ opacity:1; transform:translate(-50%, calc(-50% + var(--pcd,56px)/2 + 22px)); }
@media (hover:hover){ .bb-board-token:hover .bb-tk-done{ opacity:1; pointer-events:auto; transform:none; z-index:3; } }
.bb-board-token.is-revealed .bb-tk-done{ opacity:1; pointer-events:auto; transform:none; z-index:3; }
.bb-token.is-active .bb-tk-coin{ box-shadow:0 0 0 3px rgba(154,68,54,.28), 0 3px 8px rgba(40,28,16,.2); }
.bb-token.is-done{ opacity:.5; }
.bb-tk-badge{ position:absolute; top:-3px; right:5px; min-width:17px; height:17px; padding:0 3px; border-radius:9px; background:#2a241d;
  color:#e0b257; font-family:var(--bb-mono); font-weight:800; font-size:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.bb-tk-done{ position:absolute; top:-3px; left:5px; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--bb-line2);
  background:#fff; color:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.bb-token.is-done .bb-tk-done{ background:var(--bb-sage); color:#fff; }
.bb-connecting .bb-board-token .bb-tk-coin{ cursor:crosshair; box-shadow:inset 0 0 0 2px rgba(154,68,54,.45), 0 3px 8px rgba(40,28,16,.2); }
.bb-rail-cards{ align-items:flex-start; }
.bb-rail-cards .bb-token{ margin-top:6px; }

/* ── Warboard creature icon (Stage 1 default) ────────────────────────────
   Type-coloured disc + type glyph + HP-coloured ring, sized by creature size
   (--cd). The micro card lives collapsed inside the node and springs open on
   expand (see .bb-cr-node.is-expanded). */
.bb-cr-node{ position:absolute; }
.bb-cr-icon{ position:absolute; left:0; top:0; width:var(--cd,48px); height:var(--cd,48px); border-radius:50%; border:none; padding:0; cursor:pointer;
  background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), var(--disc,#8a8170);
  box-shadow:inset 0 0 0 3px var(--ring,#5f7338), 0 3px 8px rgba(40,28,16,.28);
  display:grid; place-items:center; z-index:5; transition:filter .2s, box-shadow .15s; }
.bb-cr-glyph{ width:62%; height:62%; color:#f4efe2; display:flex; }
.bb-cr-glyph svg{ width:100%; height:100%; display:block; }
.bb-cr-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px; border-radius:9px; background:#2a241d;
  color:#e0b257; font-family:var(--bb-mono); font-weight:800; font-size:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:6; }
.bb-cr-icon.is-active{ box-shadow:inset 0 0 0 3px var(--ring,#5f7338), 0 0 0 3px rgba(154,68,54,.32), 0 3px 8px rgba(40,28,16,.28); }
.bb-cr-icon.is-done{ opacity:.5; }
.bb-cr-icon.is-down{ filter:grayscale(.65) brightness(.72); }
.bb-cr-state{ position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--cd,48px) * .5); pointer-events:none; }
/* Warboard: desktop-only affordance hints — a done-checkbox (top-left) and a "+" tab (right) slide
   out from behind a COLLAPSED icon on hover. Clickable only while revealed (pointer-events flips to
   auto): the checkbox marks the creature done for the turn, the "+" opens the micro card. The full
   card still opens only from the micro card's "+". Both hidden once expanded. */
.bb-cr-hint{ position:absolute; --hint:clamp(9px, calc(var(--cd,48px) * .28), 15px); opacity:0; pointer-events:none; cursor:pointer; z-index:4;
  transition:transform .3s cubic-bezier(.34,1.35,.5,1), opacity .25s ease; }
/* top-left done-checkbox — marks the creature acted this turn; shows a check when done */
.bb-cr-hint-done{ top:-3px; left:-3px; width:var(--hint); height:var(--hint); border-radius:4px;
  border:1.5px solid var(--bb-line2); background:#fff; color:transparent; box-shadow:0 1px 3px rgba(60,46,26,.28);
  display:grid; place-items:center; transform:translate(8px,8px) scale(.5); transform-origin:top left; }
.bb-cr-hint-done svg{ width:72%; height:72%; }
.bb-cr-icon.is-done .bb-cr-hint-done{ background:var(--bb-olive); border-color:var(--bb-olive); color:#fff; }
/* right-side blue "+" tab that peeks out from BEHIND the disc (node sibling, z:4 < icon z:5); opens the micro card */
.bb-cr-hint-plus{ top:calc(var(--cd,48px)/2 - 14px); left:calc(var(--cd,48px) - 18px); width:34px; height:28px; box-sizing:border-box; border-radius:0 9px 9px 0;
  background:linear-gradient(160deg,#586c84,#3f5169); color:#fff; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:flex-end; padding-right:6px; box-shadow:2px 3px 8px rgba(40,40,60,.3); z-index:4;
  transform:translate(-14px,0); }
/* two-line name pill: type (small caps) over given name (large serif); drops below the disc on hover, mirrors the PC .bb-tk-name. Informational — stays pointer-events:none. */
.bb-cr-name{ position:absolute; left:calc(var(--cd,48px)/2); top:calc(var(--cd,48px)/2); z-index:1;
  display:flex; flex-direction:column; align-items:center; line-height:1.04; white-space:nowrap;
  color:#f4efe2; background:#2a241d; border:1px solid var(--bb-line2); padding:4px 13px; border-radius:13px;
  box-shadow:0 5px 13px rgba(20,26,18,.5); opacity:0; pointer-events:none;
  transform:translate(-50%,-50%); transition:transform .5s cubic-bezier(.34,1.35,.5,1), opacity .3s ease; }
.cn-type{ font-family:var(--bb-mono); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.66; }
.cn-given{ font-family:var(--bb-serif); font-weight:600; font-size:15px; }
@media (hover:hover){
  .bb-cr-node:not(.is-expanded):hover .bb-cr-hint{ opacity:1; transform:none; pointer-events:auto; }
  .bb-cr-node:not(.is-expanded):hover .bb-cr-name{ opacity:1; transform:translate(-50%, calc(-50% + var(--cd,48px)/2 + 20px)); }
}
/* The icon (at the node origin) overhangs the card's top-left corner. Offset is keyed to the CIRCLE
   PERIMETER, not the square box corner: the 45deg edge of the disc is at 0.854*--cd from the origin,
   so `0.854*--cd - 8px` puts the card corner a constant 8px/axis (~11px diagonal) inside the
   perimeter at EVERY size — a Gargantuan icon clips its card exactly like a Tiny one. (The old
   `--cd - 14` measured from the box corner, so the perimeter overlap shrank as the icon grew.)
   transform-origin 0 0 keeps the spring originating at the icon; header text stays clear. */
.bb-cr-card{ position:absolute; left:calc(var(--cd,48px) * 0.854 - 8px); top:calc(var(--cd,48px) * 0.854 - 8px); transform-origin:0 0; transform:scale(.36); opacity:0; pointer-events:none;
  transition:transform .6s cubic-bezier(.16,1.32,.3,1), opacity .3s ease; z-index:3; }
.bb-cr-node.is-expanded{ z-index:20; }
.bb-cr-node.is-expanded .bb-cr-card{ transform:none; opacity:1; pointer-events:auto; }
.bb-cr-node.is-expanded .bb-cr-icon{ z-index:21; }

/* party modal */
.bb-party-modal{ position:fixed; inset:0; z-index:250; background:rgba(28,20,12,.5); display:none; align-items:flex-start; justify-content:center; padding:60px 16px; overflow:auto; }
.bb-party-modal.open{ display:flex; }
.bb-party-sheet{ width:440px; max-width:100%; background:var(--bb-paper); border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(28,20,12,.4); }
.bb-party-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--bb-dark); color:#f3ecdd; }
.bb-party-eyebrow{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#b8ab93; }
.bb-party-title{ font-family:var(--bb-serif); font-size:20px; font-weight:600; margin-top:2px; }
.bb-party-x{ border:none; background:none; color:#cabfa8; cursor:pointer; font-size:18px; line-height:1; padding:4px; }
.bb-party-x:hover{ color:#fff; }
.bb-party-body{ padding:18px 20px 20px; }
.bb-party-sec-lbl{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bb-mute); margin:4px 0 9px; }
.bb-party-saved{ margin-bottom:18px; }
.bb-saved-row{ display:flex; align-items:center; gap:11px; padding:9px 10px; border:1px solid var(--bb-line2); border-radius:10px; margin-bottom:7px; }
.bb-pa-stack{ display:inline-flex; }
.bb-pa{ width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 38% 30%, #fffdf9, #ece3d1 72%); border:2px solid var(--cc);
  color:var(--cc); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(40,28,16,.18); }
.bb-pa svg{ width:15px; height:15px; }
.bb-saved-meta{ flex:1; min-width:0; }
.bb-saved-name{ font-family:var(--bb-sans); font-weight:700; font-size:14px; color:var(--bb-ink); }
.bb-saved-n{ font-family:var(--bb-mono); font-size:10px; color:var(--bb-mute); }
.bb-saved-load{ padding:6px 14px; border:none; border-radius:8px; background:var(--bb-sage); color:#fff; cursor:pointer; font:700 12px var(--bb-sans); }
.bb-saved-del{ width:28px; height:28px; border:1px solid var(--bb-line2); border-radius:8px; background:#fff; color:var(--bb-mute); cursor:pointer; }
.bb-saved-del:hover{ color:var(--bb-clay); border-color:var(--bb-clay); }
.bb-party-name{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--bb-line2); border-radius:9px; font:600 14px var(--bb-sans); color:var(--bb-ink); background:#fff; margin-bottom:11px; }
.bb-party-name:focus{ outline:none; border-color:var(--bb-clay); }
.bb-party-mrow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.bb-party-icon{ width:var(--picn,48px); height:var(--picn,48px); flex:none; border-radius:50%; border:2px solid var(--cc); background:radial-gradient(circle at 38% 30%, #fffdf9, #ece3d1 72%);
  color:var(--cc); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.bb-party-icon svg{ width:21px; height:21px; }
.bb-party-mname{ flex:1; min-width:0; padding:9px 11px; border:1px solid var(--bb-line2); border-radius:8px; font:600 13px var(--bb-sans); color:var(--bb-ink); background:#fff; }
.bb-party-mname:focus{ outline:none; border-color:var(--bb-clay); }
.bb-party-mdel{ width:34px; height:34px; flex:none; border:1px solid var(--bb-line2); border-radius:8px; background:#fff; color:var(--bb-mute); cursor:pointer; }
.bb-party-mdel:hover{ color:var(--bb-clay); border-color:var(--bb-clay); }
.bb-party-size{ flex:none; }
.bb-party-size button{ padding:6px 9px; }
.bb-party-add{ width:100%; padding:9px; border:1.5px dashed var(--bb-line2); border-radius:9px; background:none; color:var(--bb-ink2); cursor:pointer; font:700 12px var(--bb-sans); margin-top:3px; }
.bb-party-add:hover{ border-color:var(--bb-clay); color:var(--bb-clay); }
.bb-party-foot{ display:flex; gap:9px; margin-top:16px; }
.bb-party-cancel{ flex:1; padding:11px; border:1px solid var(--bb-line2); border-radius:9px; background:#fff; color:var(--bb-ink); cursor:pointer; font:700 13px var(--bb-sans); }
.bb-party-save{ flex:2; padding:11px; border:none; border-radius:9px; background:var(--bb-sage); color:#fff; cursor:pointer; font:700 13px var(--bb-sans); }
.bb-party-save:hover{ filter:brightness(1.05); }

/* icon picker — centered "Choose an icon" modal (above the party modal) */
.bb-iconpick-modal{ z-index:280; align-items:center; background:rgba(28,20,12,.66); }
.bb-iconpick-sheet{ width:340px; max-width:calc(100vw - 32px); background:var(--bb-paper); border:1px solid var(--bb-line2); border-radius:16px;
  box-shadow:0 22px 60px rgba(40,28,16,.34); overflow:hidden; }
.bb-iconpick-head{ padding:16px 18px 12px; border-bottom:1px solid var(--bb-line); }
.bb-iconpick-eyebrow{ font:700 10px var(--bb-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--bb-mute); }
.bb-iconpick-title{ font-family:var(--bb-serif); font-weight:600; font-size:20px; color:var(--bb-ink); margin-top:2px; }
.bb-iconpick-grid{ padding:14px 16px 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:48vh; overflow:auto; }
.bb-ip-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 2px 6px; border:1px solid transparent; border-radius:11px; background:none; cursor:pointer; }
.bb-ip-btn:hover{ background:var(--bb-paper2); }
.bb-ip-ic{ width:38px; height:38px; border-radius:50%; border:2px solid var(--cc); background:radial-gradient(circle at 38% 30%, #fffdf9, #ece3d1 72%);
  color:var(--cc); display:flex; align-items:center; justify-content:center; }
.bb-ip-ic svg{ width:21px; height:21px; }
.bb-ip-lbl{ font:600 9.5px var(--bb-sans); color:var(--bb-ink2); text-transform:capitalize; letter-spacing:.01em; line-height:1.1; text-align:center; }
.bb-ip-btn.is-on{ border-color:var(--bb-line2); background:var(--bb-paper2); }
.bb-ip-btn.is-on .bb-ip-ic{ box-shadow:0 0 0 2px var(--bb-ink2); }

/* delete-party confirm */
.bb-confirm-modal{ z-index:270; align-items:center; }
.bb-confirm-sheet{ width:330px; max-width:100%; background:var(--bb-paper); border-radius:14px; padding:22px; box-shadow:0 24px 60px rgba(28,20,12,.4); }
.bb-confirm-eyebrow{ font-family:var(--bb-mono); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bb-clay); }
.bb-confirm-title{ font-family:var(--bb-serif); font-size:20px; font-weight:600; margin:3px 0 9px; color:var(--bb-ink); }
.bb-confirm-body{ font-family:var(--bb-sans); font-size:14px; line-height:1.45; color:var(--bb-ink2); }
.bb-confirm-foot{ display:flex; gap:9px; margin-top:18px; }
.bb-confirm-cancel{ flex:1; padding:10px; border:1px solid var(--bb-line2); border-radius:9px; background:#fff; color:var(--bb-ink); cursor:pointer; font:700 13px var(--bb-sans); }
.bb-confirm-del{ flex:1; padding:10px; border:none; border-radius:9px; background:var(--bb-clay); color:#fff; cursor:pointer; font:700 13px var(--bb-sans); }

/* ── Stage 6: resume-battle card (Claude Design import) ──────────── */
.bb-resume{ position:absolute; top:26px; right:24px; z-index:30; width:300px; height:300px;
  border-radius:14px; overflow:hidden; background:#fbf8f1; border:1px solid #e3d9c4;
  box-shadow:0 10px 26px rgba(60,46,26,.1);
  font-family:var(--bb-sans); animation:bb-resume-in .26s cubic-bezier(.2,.7,.3,1) both; }
.bb-resume[hidden]{ display:none; }
@keyframes bb-resume-in{ from{ opacity:0; transform:translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }
.bb-resume-band{ position:absolute; top:0; left:0; right:0; height:120px; overflow:hidden;
  background:linear-gradient(135deg,#2b2520 0%,#3b322890 55%,#4a3f30 100%); }
.bb-resume-glow{ position:absolute; inset:0; background:radial-gradient(120% 90% at 78% -10%, rgba(214,162,90,.4), transparent 60%); }
.bb-resume-band::after{ content:''; position:absolute; inset:0; box-shadow:0 -22px 26px -10px rgba(40,28,16,.5) inset; }
.bb-resume-swords{ position:absolute; inset:0; width:100%; height:100%; opacity:.14; }
.bb-resume-close{ position:absolute; top:12px; right:12px; z-index:3; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid rgba(247,240,226,.35); background:rgba(30,22,14,.28); color:#f3ece0; cursor:pointer; backdrop-filter:blur(2px); }
.bb-resume-close:hover{ background:rgba(30,22,14,.5); border-color:rgba(247,240,226,.6); }
.bb-resume-disc{ position:absolute; top:82px; left:50%; margin-left:-31px; z-index:4; width:62px; height:62px; padding:0; border-radius:50%;
  background:#fbf8f1; border:1px solid #e3d9c4; box-shadow:0 8px 16px -8px rgba(38,28,18,.5); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:box-shadow .2s ease, border-color .2s ease; }
.bb-resume-disc:hover{ box-shadow:0 12px 22px -10px rgba(38,28,18,.55); border-color:var(--bb-clay); }
.bb-resume-disc:active{ transform:scale(.95); }
.bb-resume-disc-in{ width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #fff, #f0e7d6); border:1px solid #ead9b8;
  display:flex; align-items:center; justify-content:center; color:var(--bb-clay); }
.bb-resume-disc:hover .bb-resume-disc-in{ animation:bb-resume-spin 1.5s linear infinite; }
@keyframes bb-resume-spin{ to{ transform:rotate(-360deg); } }
.bb-resume-body{ position:absolute; top:156px; left:0; right:0; bottom:0; padding:0 20px 18px; display:flex; flex-direction:column; align-items:center; }
.bb-resume-title{ font-family:var(--bb-serif); font-size:20px; font-weight:700; letter-spacing:-.01em; color:#26211c; text-align:center; line-height:1.18; }
.bb-resume-pills{ display:flex; align-items:center; gap:7px; margin-top:11px; }
.bb-resume-pill{ display:flex; align-items:center; gap:5px; background:#efe7d6; border:1px solid #e6dcc4; border-radius:999px; padding:4px 10px 4px 8px;
  font-family:var(--bb-mono); font-size:10.5px; font-weight:600; letter-spacing:.02em; color:#6a5c48; }
.bb-resume-go{ margin-top:auto; width:100%; height:46px; display:flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px;
  background:var(--bb-clay); color:#fdf6ec; font-family:var(--bb-sans); font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer; box-shadow:0 8px 18px -10px var(--bb-clay); }
.bb-resume-go:hover{ filter:brightness(.94); }
.bb-resume-go:active{ transform:translateY(1px); }
.bb-resume-not{ margin-top:8px; border:none; background:none; color:#9a8c74; font-family:var(--bb-sans); font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 6px; }
.bb-resume-not:hover{ color:#5a4d3c; }
/* Narrow viewports: no room beside the centered builder — flow the card below it instead of overlapping */
@media (max-width:1080px){ .bb-resume{ position:static; margin:16px auto 18px; } }
@media (prefers-reduced-motion:reduce){ .bb-resume{ animation:none; } .bb-resume-disc:hover .bb-resume-disc-in{ animation:none; } }

/* ── downed (unconscious/dead) micro card: darken the whole block + float the sleeping/skull icon ──
   (same 💀/😴 as the full stat card). The blue + still pokes out and expands the full card. */
.bb-state-ov{ position:absolute; inset:0; border-radius:12px; background:rgba(14,10,5,.62);
  display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:4; }
.bb-state-ic{ font-size:40px; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
/* On a downed card the "+" tab stays at its default z-index:-1 (peeking out the right edge, behind
   the card) rather than being raised above the death overlay — so it no longer sits on the skull. */
.bb-fs-toggle{ flex:none; }                              /* never shrink away — stays visible in full screen */

/* "Clear Party from Encounter" — ghost danger button in the Drop-in Party modal (dark surface) */
.bb-party-clear{ display:block; width:100%; margin:2px 0 0; padding:9px 12px; border-radius:9px;
  border:1px solid rgba(168,67,47,.5); background:rgba(168,67,47,.12); color:#dd9079;
  font:700 11px var(--bb-mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .12s,color .12s; }
.bb-party-clear:hover{ background:#a8432f; color:#fff; border-color:#a8432f; }

/* ════════════════════════════════════════════════════════════════════
   Dark theme (body.gs-dark) — the battle console: board, rail, micro cards,
   toolbar and the resume card follow the Light/Dark toggle. The console HEADER
   (.bb-console) was always dark; this carries the surfaces below it down too. The
   --bb-* tokens live on :root, so most of it is a token swap; hard-coded #fff fields
   get explicit overrides. Card + frame borders soften so no pale stroke rings the
   box on the dark page. Per-combatant header tints (set inline) are left untouched.
   ════════════════════════════════════════════════════════════════════ */
body.gs-dark{
  --bb-page:#14110b; --bb-paper:#1f1a12; --bb-paper2:#211c14;
  --bb-line:#332c1e; --bb-line2:#3a3120;
  --bb-ink:#efe3c8; --bb-ink2:#bfb08a; --bb-mute:#8f8168;
}
/* The dark table surface is the DEFAULT (Parchment) only — a chosen Warboard texture keeps its own
   colour + pattern in dark mode too, so the Style chooser still works. (Board uses var(--bb-tex-img),
   which for the dark default is these dark dots and for a texture is that texture's pattern.) */
body.gs-dark:not([data-texture]), body.gs-dark[data-texture="parchment"]{ --bb-board:#161009; --bb-dot:#2b2416; }
/* frame: kill the pale outline */
body.gs-dark .bb-frame{ border:1px solid #2a2418; box-shadow:0 14px 34px rgba(0,0,0,.55); }
/* new board chrome — the watermark ink would vanish on the dark surface; lift it to a
   faint tan, and give the connections toggle a dark-mode "open" highlight. */
body.gs-dark .bb-watermark{ opacity:.24; }
body.gs-dark .bb-wm-title{ color:#b7a988; }
body.gs-dark .bb-wm-sub, body.gs-dark .bb-wm-ico{ color:#9a8f74; }
body.gs-dark .bb-howto-step{ color:#9a8f74; }
body.gs-dark .bb-howto-h{ color:#c69a3f; }
body.gs-dark .bb-conntoggle.is-on{ background:#332b1b; border-color:var(--bb-clay); color:#e8c9bf; }
body.gs-dark .bb-rail-bar{ border-bottom-color:#2a2418; }
/* micro-card fields, toggles, popovers, done-tabs hard-coded #fff / pale tan */
body.gs-dark .bb-action-roll,
body.gs-dark .bb-linked-input,
body.gs-dark .bb-linked-types button,
body.gs-dark .bb-seg2 button.is-on{ background:#2a2417; border-color:#3a3120; color:var(--bb-ink); }
/* done checkboxes keep an INVISIBLE (transparent) tick until actually checked — the is-done rule
   paints it olive/sage. A light ink here made an unchecked box look already ticked in dark mode. */
body.gs-dark .bb-done,
body.gs-dark .bb-tk-done{ background:#2a2417; border-color:#3a3120; color:transparent; }
body.gs-dark .bb-more{ background:#2a2417; color:var(--bb-ink2); }
body.gs-dark .bb-seg2{ background:#141009; }
body.gs-dark .bb-def{ background:#241f16; }
body.gs-dark .bb-save{ background:#241f16; }
body.gs-dark .bb-def-k,
body.gs-dark .bb-save-ab{ background:#33291a; color:#c3b48f; }
body.gs-dark .bb-def-vuln{ background:#2e1c17; border-color:#5a3228; color:#e0917f; }
body.gs-dark .bb-def-vuln .bb-def-k{ background:#4a2b22; color:#e6a58f; }
body.gs-dark .bb-def-res{ background:#1b2330; border-color:#33455c; color:#9fb6d4; }
body.gs-dark .bb-react{ background:#1b2330; }
body.gs-dark .bb-wpop{ background:#211c14; border-color:#3a3120; }
body.gs-dark .bb-wpop-row{ background:#2a2417; }
body.gs-dark .bb-wpop-row:hover{ background:#332b1b; border-color:#4a3d24; }
body.gs-dark .bb-ghostbtn:hover,
body.gs-dark .bb-action-roll:hover,
body.gs-dark .bb-editbar-btn:hover{ background:#332b1b; }
/* resume-battle card → dark surface, no pale outline (the top band stays as designed) */
body.gs-dark .bb-resume{ background:#1f1a12; border-color:#2a2418; box-shadow:0 14px 34px rgba(0,0,0,.55); }
body.gs-dark .bb-resume-disc{ background:#2a2417; border-color:#3a3120; }
body.gs-dark .bb-resume-disc-in{ background:radial-gradient(circle at 38% 32%, #3f3626, #2a2417); border-color:#4a3d24; }
body.gs-dark .bb-resume-title{ color:#efe3c8; }
body.gs-dark .bb-resume-pill{ background:#2a2417; border-color:#3a3120; color:#c3b48f; }
body.gs-dark .bb-resume-not{ color:#8f8168; }
body.gs-dark .bb-resume-not:hover{ color:#c3b48f; }
/* Single Connect + Connect All — hard-coded Sand (#d9d5c8) in the light theme, which left
   light text on a light chip in dark mode. Dark chip + the theme's light ink instead. */
body.gs-dark .bb-connect-btn,
body.gs-dark .bb-connectall-btn{ background:#2a2417; border-color:#3a3120; }
body.gs-dark .bb-connect-btn:not(.is-on):hover,
body.gs-dark .bb-connectall-btn:hover{ background:#332b1b; }
body.gs-dark .bb-cancel-btn{ border-color:#5a3228; }
/* Drop-in-party modal: the sheet + header already follow the --bb tokens; these are the
   hard-coded #fff name/member inputs and the delete + cancel buttons. */
body.gs-dark .bb-party-name,
body.gs-dark .bb-party-mname,
body.gs-dark .bb-party-cancel{ background:#2a2417; border-color:#3a3120; color:var(--bb-ink); }
body.gs-dark .bb-party-mdel,
body.gs-dark .bb-saved-del{ background:#2a2417; border-color:#3a3120; }
body.gs-dark .bb-party-name::placeholder,
body.gs-dark .bb-party-mname::placeholder{ color:#6f6552; }