/* ─── free-mode.css ─────────────────────────────────────────────────────────────
   Free Mode (sandbox): placement popup, dice arrows, draggable tracker cubes.
   Split out of the old style.css as a pure ordered slice. The <link> order
   in index.html (base → menu → online → board → folks → war → overlays →
   mobile → free-mode) preserves the original cascade — do not reorder. ─── */

/* ─── Free Mode (hot-seat sandbox) ─────────────────────────────────────────── */
/* Touch devices: a drag that starts on a draggable sandbox element (tracker
   cube, pool die, an occupied board cell) must not scroll the page — pointer
   events need to own the gesture. Empty cells / the rest still scroll. */
body.free-mode-active .tracker-cube,
body.free-mode-active .reserve-die,
body.free-mode-active #board-war .cell:has(.creature) { touch-action: none; }

/* Sandbox button — lives in the left column's middle gap (and the mobile
   drawer). A quiet dashed tile by default; solid amber when the sandbox is
   active; greyed when blocked (online pre-connect / setup), with the reason
   carried in its title attribute for hover. */
.sandbox-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; padding: 9px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed #4a5a3c; border-radius: 8px;
  color: #9aa68c; cursor: pointer;
  font-size: 0.66rem; font-weight: bold;
  letter-spacing: 0.05em; text-transform: uppercase;
  user-select: none; transition: background .15s, color .15s, border-color .15s;
}
.sandbox-btn .sb-ico { font-size: 1.15rem; line-height: 1; }
.sandbox-btn:hover { background: rgba(255,255,255,0.07); color: #c6d3b4; border-color: #6c8052; }
/* Active: free mode is ON — solid amber so it reads as "you are in sandbox". */
.sandbox-btn.sb-active {
  background: rgba(230,150,60,0.16); border-style: solid; border-color: #c97b35; color: #ffcf9c;
}
.sandbox-btn.sb-active:hover { background: rgba(230,150,60,0.24); border-color: #e08c3f; }
/* Blocked: greyed; not interactive (the title carries the hover explanation). */
.sandbox-btn.fm-blocked { opacity: 0.4; cursor: not-allowed; }
.sandbox-btn.fm-blocked:hover { background: rgba(255,255,255,0.03); color: #9aa68c; border-color: #4a5a3c; }

#free-mode-panel {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px; padding: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid #4a5a3c; border-radius: 6px;
}
.fm-block { display: flex; flex-direction: column; gap: 4px; }
.fm-block.fm-p2 { border-top: 1px solid #333; padding-top: 6px; }
.fm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; }
.fm-tag { font-weight: bold; color: #ccc; }
.fm-grp { display: inline-flex; align-items: center; gap: 3px; color: #bbb; }
.fm-grp b { min-width: 1.2em; text-align: center; color: #fff; }
#free-mode-panel button {
  background: #2a2a3a; color: #ddd; border: 1px solid #555; border-radius: 3px;
  padding: 1px 6px; font-size: 0.72rem; cursor: pointer; min-width: 0;
}
#free-mode-panel button:hover { background: #3a3a4a; color: #fff; }

/* Up/down quick-edit arrows on each creature token in free mode. */
.fm-arrows {
  position: absolute; top: 1px; right: 1px; z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: auto;   /* .creature is pointer-events:none — re-enable for the arrows */
}
.fm-arrows button {
  width: 16px; height: 14px; line-height: 1; padding: 0;
  font-size: 9px; border: none; border-radius: 2px; cursor: pointer;
  background: rgba(0,0,0,0.6); color: #fff;
}
.fm-arrows button:hover { background: rgba(0,0,0,0.85); }
.creature.fm-dragging { opacity: 0.35; }
/* Free mode: VP/TP markers and Reserve/Exile dice are interactive — show the
   pointing hand on hover, like creatures on the board. */
body.free-mode-active .tracker-cube:not(.cube-hollow) { pointer-events: auto; cursor: pointer; }
body.free-mode-active .reserve-die { cursor: pointer; }
/* Floating clone that follows the cursor while dragging a creature in free mode. */
#fm-drag-ghost {
  position: fixed; z-index: 2000; pointer-events: none;
  transform: scale(1.2); border-radius: 6px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55));
}